@jxsuite/studio 2.0.0 → 2.1.0

package/src/packages/jxsuite-update.ts

@@ -1,84 +1,113 @@
 /// <reference lib="dom" />
 /**
- * On project open, compare the project's `@jxsuite/*` dependency ranges to the version this Studio
- * build embeds (`VERSION`). If the project is behind, prompt the user to bump them to match and —
- * on confirm — rewrite the ranges and reinstall. The target is the embedded version (not npm
- * latest) so a project always lines up with the runtime/compiler the running app actually uses.
+ * On project open, offer to bring the project's `@jxsuite/*` dependencies up to their newest
+ * PUBLISHED versions — each package to its own latest, asked of the npm registry.
+ *
+ * It used to target `VERSION`, the version this Studio build embeds, and bump every `@jxsuite/*`
+ * range to `^VERSION` in one move. That was right exactly once: when the whole suite released
+ * together, so "the version Studio is" and "the newest version of each package" were the same
+ * string. They are not any more — the packages release on their own cadences, and `@jxsuite/parser`
+ * being at 1.2.0 while Studio is 2.0.1 is the normal case, not a fault. Targeting the embedded
+ * version therefore proposed a version that may never have been published, for a package whose real
+ * latest it had not looked at.
+ *
+ * **Studio's own copies are not involved.** The app resolves `@jxsuite/*` from its own install
+ * (that is the hermetic host rule the schema loader enforces), so the project's ranges govern `jx
+ * build` and the project's types — not the running app. There is no reason for them to match
+ * Studio, and pinning them to it was the residue of an assumption that is no longer true.
+ *
+ * The registry lookup is `platform.outdatedPackages()`, the same seam the dependencies editor uses.
+ * A host that does not offer it (the cloud session, which manages dependencies server-side) simply
+ * gets no prompt: without the registry there is no honest target, and guessing is what this
+ * replaced.
  */
 
 import { html } from "lit-html";
 import { getPlatform } from "../platform";
-import { VERSION } from "../version";
+import { shouldInstallAutomation } from "../services/automation";
 import { showConfirmDialog } from "../ui/layers";
 import { showProgressModal } from "../ui/progress-modal";
-import { statusMessage } from "../panels/statusbar";
-import { isComparable, isUpgrade } from "./semver";
-import type { PackageInfo } from "../types";
+import { notify } from "../services/notify";
+import { isUpgrade } from "./semver";
 
 const JXSUITE_PREFIX = "@jxsuite/";
 
 export interface JxsuiteUpdate {
   name: string;
+  /** The range pinned in package.json, e.g. `^1.2.0`. */
   current: string;
+  /** THIS package's newest published version — not a suite-wide number. */
+  latest: string;
   dev: boolean;
 }
 
 /**
- * Compare the project's @jxsuite/* deps to the embedded version. Returns the packages behind the
- * target plus the target version, or null when there's nothing to do (dev build, no project, or all
- * already current/ahead).
+ * The project's `@jxsuite/*` dependencies that are behind their own newest published version.
+ *
+ * Empty when there is nothing to do, when the host cannot reach the registry, or when it offers no
+ * lookup at all. Every failure path is empty rather than thrown: this runs on project open, and a
+ * registry that is unreachable on a train is not an error the author needs to see.
  */
-export async function checkJxsuiteUpdate(): Promise<{
-  target: string;
-  outdated: JxsuiteUpdate[];
-} | null> {
-  const target = VERSION;
-  if (!isComparable(target)) {
-    return null; // "dev" / non-semver build — no reliable target
-  }
+export async function checkJxsuiteUpdate(): Promise<JxsuiteUpdate[]> {
   const platform = getPlatform();
-  let pkgs: PackageInfo[];
+  if (!platform.outdatedPackages) {
+    return [];
+  }
+  let reported;
   try {
-    pkgs = await platform.listPackages();
+    reported = await platform.outdatedPackages();
   } catch {
-    return null;
+    return [];
   }
   const outdated: JxsuiteUpdate[] = [];
-  for (const p of pkgs) {
-    if (!p.name.startsWith(JXSUITE_PREFIX) || !isComparable(p.version)) {
-      continue;
-    }
-    if (isUpgrade(p.version, target)) {
-      outdated.push({ current: p.version, dev: Boolean(p.dev), name: p.name });
+  for (const p of reported) {
+    /*
+     * `isUpgrade`, not merely "differs from latest". `outdatedPackages` reports any difference, and
+     * a project deliberately pinned AHEAD of the registry — a prerelease, or a range bumped before
+     * the publish landed — would otherwise be offered a downgrade described as an update.
+     */
+    if (p.name.startsWith(JXSUITE_PREFIX) && isUpgrade(p.current, p.latest)) {
+      outdated.push({ current: p.current, dev: Boolean(p.dev), latest: p.latest, name: p.name });
     }
   }
-  return outdated.length > 0 ? { outdated, target } : null;
+  return outdated;
 }
 
-function dismissKey(root: string, target: string): string {
-  return `jx:jxsuite-update-dismissed:${root}:${target}`;
+/**
+ * The dismissal is remembered against the exact set of versions declined.
+ *
+ * It used to be keyed on the single target version, which no longer exists. Keying on the set means
+ * a later publish of any one package asks again — which is the behaviour you want from "not now",
+ * and the reason this is not keyed on the project alone.
+ */
+function dismissKey(root: string, outdated: JxsuiteUpdate[]): string {
+  const signature = outdated
+    .map((p) => `${p.name}@${p.latest}`)
+    .toSorted()
+    .join(",");
+  return `jx:jxsuite-update-dismissed:${root}:${signature}`;
 }
 
-function isDismissed(root: string, target: string): boolean {
+function isDismissed(root: string, outdated: JxsuiteUpdate[]): boolean {
   try {
-    return localStorage.getItem(dismissKey(root, target)) === "1";
+    return localStorage.getItem(dismissKey(root, outdated)) === "1";
   } catch {
     return false;
   }
 }
 
-function setDismissed(root: string, target: string): void {
+function setDismissed(root: string, outdated: JxsuiteUpdate[]): void {
   try {
-    localStorage.setItem(dismissKey(root, target), "1");
+    localStorage.setItem(dismissKey(root, outdated), "1");
   } catch {
     /* Ignore storage errors */
   }
 }
 
-/** Apply a set of @jxsuite bumps to `^target` and reinstall, behind a progress modal. */
-export async function applyJxsuiteUpdate(outdated: JxsuiteUpdate[], target: string): Promise<void> {
+/** Pin each package to `^<its own latest>` and reinstall, behind a progress modal. */
+export async function applyJxsuiteUpdate(outdated: JxsuiteUpdate[]): Promise<void> {
   const platform = getPlatform();
-  if (!platform.setPackageVersions) {
+  if (!platform.setPackageVersions || outdated.length === 0) {
     return;
   }
   const progress = showProgressModal({
@@ -87,11 +116,13 @@ export async function applyJxsuiteUpdate(outdated: JxsuiteUpdate[], target: stri
   });
   try {
     const result = await platform.setPackageVersions(
-      outdated.map((p) => ({ dev: p.dev, name: p.name, version: `^${target}` })),
+      // Per package. One shared `^${target}` for all of them is the bug this module was refactored
+      // To remove.
+      outdated.map((p) => ({ dev: p.dev, name: p.name, version: `^${p.latest}` })),
     );
     if (result.ok) {
       progress.done();
-      statusMessage(`Updated ${outdated.length} @jxsuite package(s) to ${target}`);
+      notify.success(`Updated ${outdated.length} @jxsuite package(s) to their latest versions.`);
     } else {
       progress.fail(result.log ?? "Update failed");
     }
@@ -101,22 +132,40 @@ export async function applyJxsuiteUpdate(outdated: JxsuiteUpdate[], target: stri
 }
 
 /**
- * Prompt to update @jxsuite packages on open. Skips when there's nothing to do or the user already
- * declined this exact target for this project (remembered in localStorage).
+ * Prompt to update on open. Skips when there is nothing to do or the user already declined this
+ * exact set of versions for this project (remembered in localStorage).
  */
 export async function maybePromptJxsuiteUpdate(projectRoot: string): Promise<void> {
+  // Automation/screenshot runs open projects read-only to drive the canvas — the same rule
+  // Ensure-deps.ts states, and for the same reason: confirming here calls `setPackageVersions`,
+  // Which rewrites the opened project's package.json.
+  //
+  // It also has to hold when nobody confirms anything. `showConfirmDialog` renders an
+  // `<sp-dialog-wrapper open underlay>`, and an underlay swallows every pointer event across the
+  // Viewport — so a prompt raised at boot means every subsequent click in a shot lands in a scrim.
+  // That is not hypothetical: it put this dialog into the middle of 33 committed screenshots,
+  // Including docs/images/hero.png, which is the jxsuite.com marketing hero.
+  //
+  // Correct pins are NOT sufficient on their own. `outdatedPackages` compares the range's base
+  // Version against the registry's `latest` (packages/server/src/packages.ts: `latest ===
+  // StripRange(p.version)`), not whether the range resolves it — so a project pinned `^1.4.1` is
+  // "outdated" the moment 1.4.2 publishes, and every starter shot would be scrimmed again by the
+  // Next patch release of any @jxsuite package.
+  if (shouldInstallAutomation(location.search)) {
+    return;
+  }
   const platform = getPlatform();
   if (!platform.setPackageVersions) {
     return;
   }
-  const check = await checkJxsuiteUpdate();
-  if (!check || isDismissed(projectRoot, check.target)) {
+  const outdated = await checkJxsuiteUpdate();
+  if (outdated.length === 0 || isDismissed(projectRoot, outdated)) {
     return;
   }
-  const list = check.outdated.map((p) => `${p.name} ${p.current} → ^${check.target}`).join("\n");
+  const list = outdated.map((p) => `${p.name} ${p.current} → ^${p.latest}`).join("\n");
   const confirmed = await showConfirmDialog(
     "Update @jxsuite packages?",
-    html`This project uses older @jxsuite packages. Update them to match Studio ${check.target}?
+    html`Newer versions of these packages have been published. Update the project to them?
       <br /><br /><span
         style="font-size:var(--spectrum-font-size-75, 12px);color:var(--fg-dim);white-space:pre-line"
         >${list}</span
@@ -124,8 +173,8 @@ export async function maybePromptJxsuiteUpdate(projectRoot: string): Promise<voi
     { cancelLabel: "Not now", confirmLabel: "Update" },
   );
   if (!confirmed) {
-    setDismissed(projectRoot, check.target);
+    setDismissed(projectRoot, outdated);
     return;
   }
-  await applyJxsuiteUpdate(check.outdated, check.target);
+  await applyJxsuiteUpdate(outdated);
 }

package/src/packages/pull-package-sync.ts

@@ -13,7 +13,7 @@ import { errorMessage } from "@jxsuite/schema/parse";
 import { getPlatform } from "../platform";
 import { showConfirmDialog } from "../ui/layers";
 import { showProgressModal } from "../ui/progress-modal";
-import { statusMessage } from "../panels/statusbar";
+import { notify } from "../services/notify";
 import { applyJxsuiteUpdate, checkJxsuiteUpdate } from "./jxsuite-update";
 import type { GitStatusResult } from "../types";
 
@@ -192,15 +192,15 @@ async function applyDiscard(plan: PackagePullPlan): Promise<void> {
  */
 async function syncPackagesAfterPull(): Promise<void> {
   const platform = getPlatform();
-  let check: Awaited<ReturnType<typeof checkJxsuiteUpdate>> = null;
+  let outdated: Awaited<ReturnType<typeof checkJxsuiteUpdate>> = [];
   try {
-    check = await checkJxsuiteUpdate();
+    outdated = await checkJxsuiteUpdate();
   } catch {
-    check = null;
+    outdated = [];
   }
-  if (check && platform.setPackageVersions) {
+  if (outdated.length > 0 && platform.setPackageVersions) {
     // No re-prompt: the discarded local changes came from an update the user already accepted.
-    await applyJxsuiteUpdate(check.outdated, check.target);
+    await applyJxsuiteUpdate(outdated);
     return;
   }
   if (!platform.installDependencies) {
@@ -241,7 +241,9 @@ async function discardPullAndSync(plan: PackagePullPlan): Promise<void> {
     await syncPackagesAfterPull();
     throw error;
   }
-  statusMessage("Local package updates were superseded by pulled changes");
+  notify.warn("Local package updates were superseded by pulled changes.", {
+    source: "Source Control",
+  });
   await syncPackagesAfterPull();
 }
 
@@ -349,10 +351,17 @@ export async function autoSyncProjectOnOpen(): Promise<void> {
   if (!status?.isRepo || (status.remotes?.length ?? 0) === 0) {
     return;
   }
-  statusMessage("Syncing project…");
+  notify.info("Syncing project…", { key: "project.sync", source: "Source Control" });
   try {
     await pullWithPackageSync();
   } catch (error) {
-    statusMessage(`Sync skipped: ${errorMessage(error)}`);
+    // A skipped sync leaves the project behind its remote, which is a state to FIX rather than
+    // A moment to read about — it stays listed until a pull succeeds.
+    notify.warn("The project could not be synced with its remote.", {
+      detail: errorMessage(error),
+      key: "project.sync",
+      source: "Source Control",
+      tier: "problem",
+    });
   }
 }

package/src/page-params.ts

@@ -249,7 +249,8 @@ function pushValue(out: ParamValues, param: string, value: unknown) {
     return;
   }
   const str = String(value);
-  const list = (out[param] ??= []);
+  out[param] ??= [];
+  const list = out[param];
   if (!list.includes(str)) {
     list.push(str);
   }

package/src/panels/activity-bar.ts

@@ -1,31 +1,53 @@
 /// <reference lib="dom" />
-/** Activity bar — tab icons for switching left panel views. */
+/**
+ * Activity bar — the rail, rendered FROM the panel registry.
+ *
+ * There is no list of panels in this file. `railGroups()` returns every rail-able record grouped by
+ * level and filtered by its own `when`, and the rail draws whatever that says: two groups with a
+ * divider between them, PROJECT above and DOCUMENT below (plan §3.2 ②). Adding a panel is a
+ * `registerPanel()` call in the module that owns it, and it appears here; there is nothing to
+ * update in step.
+ *
+ * **Every rail button opens the Navigator, and the grouping is by LEVEL.** It briefly spanned two
+ * docks so Problems could keep a button while its body was drawn at the bottom; that cost a
+ * per-dock branch here, in {@link isRailPanelShowing} and in `focusPanel`, and it pointed left at
+ * something that opens below. Problems is `rail: false` now.
+ *
+ * The predecessor was an eight-item array literal — `{icon, label, value}` — whose `label` reached
+ * the screen only as a `title` attribute. Thirteen icons in this shell had no name but a hover
+ * tooltip, which is the accessibility failure §2 principle 6 names outright: **every rail button
+ * now carries an 11px text label under its icon**, and the rail is 56px wide to hold it.
+ */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { activityBar, renderOnly } from "../store";
+import { activityBar } from "../store";
 import { effect, effectScope } from "../reactivity";
-import { activeTab } from "../workspace/workspace";
-import { applyPanelCollapse, view } from "../view";
-import { openSettingsModal } from "../settings/settings-modal";
-import { openAboutModal } from "../about/about-modal";
+import { requireNavigatorPanelId, shell, toggleActivityTab } from "../shell";
 import { refreshGitStatus } from "./git-panel";
+import { panelContext, railGroups } from "./panel-registry";
+import { registerNavigatorPanels } from "./navigator-panels";
+import type { PanelRecord } from "./panel-registry";
+import type { CommandContext } from "../commands/context";
 import type { EffectScope } from "@vue/reactivity";
+import { activeRegistry } from "../commands/active-registry";
 import type { TemplateResult } from "lit-html";
 
 let _scope: EffectScope | null = null;
 
 export function mount() {
+  // The rail is a rendering of the registry, so the registry has to exist before the first paint.
+  // Idempotent, and the Navigator dock calls it too — whichever mounts first wins.
+  registerNavigatorPanels();
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
-      const tab = activeTab.value;
-      if (tab) {
-        const gs = tab.session.ui.gitStatus;
-        // The badge needs a status once. A refresh that already failed must not re-arm this: the
-        // Effect re-runs on the very state the failure writes, so retrying here spins.
-        if (!gs && !tab.session.ui.gitLoading && !tab.session.ui.gitError) {
-          void refreshGitStatus();
-        }
+      // Source control is PROJECT state, so the badge is fetched and drawn without reference to
+      // Any tab. Sourcing it from `activeTab` is what made it vanish when the last tab closed.
+      // The badge needs a status once. A refresh that already failed must not re-arm this: the
+      // Effect re-runs on the very state the failure writes, so retrying here spins.
+      const { error, loading, status } = shell.git;
+      if (!status && !loading && !error) {
+        void refreshGitStatus();
       }
       renderActivityBar();
     });
@@ -63,99 +85,138 @@ const gitBranchIcon = (s: string) => html`
  */
 export function tabIcon(tag: string, size?: string) {
   const m: Record<string, (s: string) => TemplateResult> = {
-    "sp-icon-artboard": (s: string) =>
-      html`<sp-icon-artboard slot="icon" size=${s}></sp-icon-artboard>`,
     "sp-icon-box": (s: string) => html`<sp-icon-box slot="icon" size=${s}></sp-icon-box>`,
-    "sp-icon-brackets": (s: string) =>
-      html`<sp-icon-brackets slot="icon" size=${s}></sp-icon-brackets>`,
-    "sp-icon-brush": (s: string) => html`<sp-icon-brush slot="icon" size=${s}></sp-icon-brush>`,
-    "sp-icon-chat": (s: string) => html`<sp-icon-chat slot="icon" size=${s}></sp-icon-chat>`,
     "sp-icon-data": (s: string) => html`<sp-icon-data slot="icon" size=${s}></sp-icon-data>`,
-    "sp-icon-event": (s: string) => html`<sp-icon-event slot="icon" size=${s}></sp-icon-event>`,
-    "sp-icon-file-single-web-page": (s: string) =>
-      html`<sp-icon-file-single-web-page slot="icon" size=${s}></sp-icon-file-single-web-page>`,
     "sp-icon-folder": (s: string) => html`<sp-icon-folder slot="icon" size=${s}></sp-icon-folder>`,
     "sp-icon-git-branch": gitBranchIcon,
     "sp-icon-layers": (s: string) => html`<sp-icon-layers slot="icon" size=${s}></sp-icon-layers>`,
-    "sp-icon-properties": (s: string) =>
-      html`<sp-icon-properties slot="icon" size=${s}></sp-icon-properties>`,
+    "sp-icon-search": (s: string) => html`<sp-icon-search slot="icon" size=${s}></sp-icon-search>`,
     "sp-icon-view-all-tags": (s: string) =>
       html`<sp-icon-view-all-tags slot="icon" size=${s}></sp-icon-view-all-tags>`,
-    "sp-icon-view-grid": (s: string) =>
-      html`<sp-icon-view-grid slot="icon" size=${s}></sp-icon-view-grid>`,
   };
   const fn = m[tag];
   return fn ? fn(size || "s") : nothing;
 }
 
-export function renderActivityBar() {
-  const tab = activeTab.value;
-  const { leftTab } = view;
-  const gitFileCount = tab?.session.ui.gitStatus?.files?.length || 0;
-  const tabs = [
-    { icon: "sp-icon-folder", label: "Files", value: "files" },
-    { icon: "sp-icon-layers", label: "Layers", value: "layers" },
-    { icon: "sp-icon-box", label: "Imports", value: "imports" },
-    { icon: "sp-icon-view-grid", label: "Elements", value: "blocks" },
-    { icon: "sp-icon-brackets", label: "State", value: "state" },
-    { icon: "sp-icon-data", label: "Data", value: "data" },
-    { icon: "sp-icon-view-all-tags", label: "Document", value: "head" },
-    { icon: "sp-icon-git-branch", label: "Source Control", value: "git" },
-  ];
-  const tpl = html`
-    <sp-tabs
-      selected=${view.leftPanelCollapsed ? "" : leftTab}
-      direction="vertical"
-      quiet
-      @change=${(e: Event) => {
-        const clicked = (e.target as HTMLElement & { selected: string }).selected;
-        if (clicked === view.leftTab && !view.leftPanelCollapsed) {
-          view.leftPanelCollapsed = true;
-          applyPanelCollapse();
-        } else {
-          view.leftTab = clicked;
-          view.leftPanelCollapsed = false;
-          applyPanelCollapse();
-          renderOnly("leftPanel");
-        }
-        renderActivityBar();
+/**
+ * Whether a rail button is showing what it names — its dock open, on its tab.
+ *
+ * The rail spans two docks (plan §7.2 puts Problems in the Bottom dock and its badge on the rail),
+ * so "selected" is a question about the panel's OWN host, not about `shell.leftTab`. Reading only
+ * the Navigator here is what would draw Problems as unselected while it is on screen.
+ *
+ * @param {PanelRecord} panel
+ */
+export function isRailPanelShowing(panel: PanelRecord): boolean {
+  return !shell.docks.left.collapsed && shell.leftTab === panel.id;
+}
+
+/**
+ * Reveal (or collapse) what a rail button names.
+ *
+ * There is no per-dock branch, because every rail button opens the Navigator. There WAS one — the
+ * rail spanned two docks so that Problems could keep a button while its body was drawn in the
+ * Bottom dock — and it cost a branch here, a branch in {@link isRailPanelShowing} and a third in
+ * `focusPanel`, all to make one button behave like the other seven. A control on the left that
+ * opens something at the bottom is also a lie about where it will take you. Problems is `rail:
+ * false` now and is addressed by `view.setBottomTab`, like the three tabs beside it.
+ *
+ * @param {PanelRecord} panel
+ */
+export function toggleRailPanel(panel: PanelRecord): void {
+  // `PanelRecord.id` is a `string` because the same registry hosts the Bottom dock's panels; the
+  // Rail only ever draws Navigator ones, and `requireNavigatorPanelId` is the shared lock that says
+  // So out loud rather than letting an undeclared id reach `shell.leftTab` (which is how the
+  // Outline's empty state spent three phases opening a panel that did not exist).
+  toggleActivityTab(requireNavigatorPanelId(panel.id, "the Navigator rail"));
+}
+
+/**
+ * One rail button.
+ *
+ * The label is REAL TEXT, not a `title` attribute — so it is the accessible name, it is readable
+ * without a pointer, and it survives a screenshot. `aria-pressed` states the toggle-focus semantics
+ * honestly: re-picking the open panel collapses its dock (see {@link toggleRailPanel}), which is a
+ * two-state control, not a one-way selection.
+ *
+ * `title` survives as a TOOLTIP only. Because the button has text content, that text is its
+ * accessible name and the attribute adds no second announcement (the reason the old `sp-tab` could
+ * not carry both) — it exists to restore the full string for "Source Control", which 56px ellipses.
+ * An icon whose only name is a tooltip is what principle 6 bans; a tooltip beside a label is not.
+ */
+function railButton(panel: PanelRecord, ctx: CommandContext): TemplateResult {
+  const badge = panel.badge?.(ctx) ?? null;
+  const selected = isRailPanelShowing(panel);
+  return html`
+    <button
+      type="button"
+      class="rail-item${selected ? " selected" : ""}"
+      data-panel=${panel.id}
+      aria-pressed=${selected}
+      title=${panel.title}
+      @click=${() => {
+        // No repaint call: the rail, the Navigator and the Bottom dock all track `shell`, so
+        // Selecting a panel is one state write.
+        toggleRailPanel(panel);
       }}
     >
-      ${tabs.map(
-        (t) => html`
-          <sp-tab value=${t.value} title=${t.label} aria-label=${t.label}>
-            ${tabIcon(t.icon, "m")}
-            ${
-              t.value === "git" && gitFileCount > 0
-                ? html`<span class="activity-badge">${gitFileCount}</span>`
-                : nothing
-            }
-          </sp-tab>
+      <span class="rail-icon">${tabIcon(panel.icon, "m")}</span>
+      <span class="rail-label">${panel.title}</span>
+      ${badge ? html`<span class="activity-badge">${badge}</span>` : nothing}
+    </button>
+  `;
+}
+
+/**
+ * The rail foot: **Preferences**, and only Preferences (plan §3.2 ②).
+ *
+ * It was two hand-authored buttons calling two module functions directly — the exact shape §2
+ * principle 1 bans, and the reason the gear opened PROJECT configuration from an application-level
+ * slot. Preferences is the application's own settings and follows the author between projects, so
+ * it is the one that earns the pinned position; project configuration is `settings.open`, which
+ * lives in the ⬢ menu and the palette because it is scoped to a project; and About is `help.about`,
+ * reachable by name.
+ *
+ * Rendered FROM the record, so the label and the chord in its tooltip cannot drift from ⌘,.
+ */
+function railFooterTpl(): TemplateResult {
+  const registry = activeRegistry();
+  const command = registry?.get("app.preferences");
+  if (!registry || !command || !registry.isVisible("app.preferences")) {
+    return html`${nothing}`;
+  }
+  const chord = registry.keymap.formatBinding("app.preferences");
+  return html`
+    <button
+      type="button"
+      class="rail-item"
+      data-command="app.preferences"
+      title=${chord ? `${command.title} (${chord})` : command.title}
+      @click=${() => {
+        void registry.run("app.preferences");
+      }}
+    >
+      <span class="rail-icon"><sp-icon-settings size="m"></sp-icon-settings></span>
+      <span class="rail-label">Preferences</span>
+    </button>
+  `;
+}
+
+export function renderActivityBar() {
+  const ctx = panelContext();
+  const groups = railGroups(ctx);
+  const tpl = html`
+    <nav class="rail-groups" aria-label="Navigator panels">
+      ${groups.map(
+        (group, index) => html`
+          ${index === 0 ? nothing : html`<div class="rail-divider" role="separator"></div>`}
+          <div class="rail-group" role="group" aria-label=${group.label}>
+            ${group.panels.map((panel) => railButton(panel, ctx))}
+          </div>
         `,
       )}
-    </sp-tabs>
-    <div
-      style="margin-top:auto;padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:4px"
-    >
-      <sp-action-button
-        quiet
-        size="m"
-        title="About"
-        aria-label="About"
-        @click=${() => openAboutModal()}
-      >
-        <sp-icon-info slot="icon"></sp-icon-info>
-      </sp-action-button>
-      <sp-action-button
-        quiet
-        size="m"
-        title="Settings"
-        aria-label="Settings"
-        @click=${() => openSettingsModal()}
-      >
-        <sp-icon-settings slot="icon"></sp-icon-settings>
-      </sp-action-button>
-    </div>
+    </nav>
+    <div class="rail-footer">${railFooterTpl()}</div>
   `;
   litRender(tpl, activityBar);
 }