gloomberb 0.13.2 → 0.14.0

package/src/components/layout/status-bar-groups.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, test } from "bun:test";
+import type { TeamSummary } from "../../api-client";
+import {
+  buildStatusBarTabGroups,
+  focusCollapses,
+  groupIdFromMarkerValue,
+  groupMarkerValue,
+} from "./status-bar-groups";
+
+function team(id: string, name: string): TeamSummary {
+  return {
+    id,
+    name,
+    slug: name.toLowerCase(),
+    accentColor: "blue",
+    shortName: name.slice(0, 2).toUpperCase(),
+    allowMemberInvites: false,
+    channelId: `team:${id}`,
+    createdAt: "2026-09-14T12:00:00.000Z",
+    role: "member",
+    memberCount: 2,
+  };
+}
+
+const origin = (teamId: string) => ({
+  kind: "team" as const,
+  teamId,
+  layoutId: "a".repeat(32),
+  revision: 1,
+  contentHash: "x",
+  syncedAt: "2026-09-14T12:00:00.000Z",
+});
+
+const layouts = [
+  { origin: undefined },
+  { origin: origin("rates") },
+  { origin: undefined },
+  { origin: origin("macro") },
+  { origin: origin("rates") },
+];
+const teams = [team("rates", "Rates"), team("macro", "Macro")];
+
+describe("status bar tab groups", () => {
+  test("puts personal tabs first, then teams by name, keeping indexes", () => {
+    const groups = buildStatusBarTabGroups(layouts, 0, teams, "all", new Set());
+    expect(groups.map((group) => [group.id, group.indexes, group.collapsed])).toEqual([
+      ["personal", [0, 2], false],
+      ["team:macro", [3], false],
+      ["team:rates", [1, 4], false],
+    ]);
+  });
+
+  test("FOCUS folds the other groups but never the one holding the active tab", () => {
+    expect(focusCollapses("personal", "team:rates")).toBe(true);
+    expect(focusCollapses("personal", "personal")).toBe(false);
+    expect(focusCollapses({ teamId: "rates" }, "personal")).toBe(true);
+    expect(focusCollapses({ teamId: "rates" }, "team:rates")).toBe(false);
+    expect(focusCollapses("all", "team:rates")).toBe(false);
+
+    const personalFocus = buildStatusBarTabGroups(layouts, 0, teams, "personal", new Set());
+    expect(personalFocus.map((group) => group.collapsed)).toEqual([false, true, true]);
+
+    const activeInRates = buildStatusBarTabGroups(layouts, 4, teams, "personal", new Set());
+    expect(activeInRates.map((group) => group.collapsed)).toEqual([false, true, false]);
+
+    const ratesFocus = buildStatusBarTabGroups(layouts, 1, teams, { teamId: "rates" }, new Set());
+    expect(ratesFocus.map((group) => group.collapsed)).toEqual([true, true, false]);
+  });
+
+  test("a manual toggle flips what FOCUS decided", () => {
+    const groups = buildStatusBarTabGroups(layouts, 0, teams, "personal", new Set(["team:macro"]));
+    expect(groups.map((group) => group.collapsed)).toEqual([false, false, true]);
+    const folded = buildStatusBarTabGroups(layouts, 1, teams, "all", new Set(["team:macro"]));
+    expect(folded.map((group) => group.collapsed)).toEqual([false, true, false]);
+  });
+
+  test("groups without a known team still appear, after the known ones", () => {
+    const groups = buildStatusBarTabGroups(layouts, 0, [team("rates", "Rates")], "all", new Set());
+    expect(groups.map((group) => [group.id, group.team?.name ?? null])).toEqual([
+      ["personal", null],
+      ["team:rates", "Rates"],
+      ["team:macro", null],
+    ]);
+  });
+
+  test("marker values round-trip", () => {
+    expect(groupIdFromMarkerValue(groupMarkerValue("team:rates"))).toBe("team:rates");
+    expect(groupIdFromMarkerValue(groupMarkerValue("personal"))).toBe("personal");
+    expect(groupIdFromMarkerValue("3")).toBeNull();
+    expect(groupIdFromMarkerValue("group:nope")).toBeNull();
+  });
+});

package/src/components/layout/status-bar-groups.ts

@@ -0,0 +1,85 @@
+import type { TeamSummary } from "../../api-client";
+import type { SavedLayout } from "../../types/config";
+import type { TeamStoreSnapshot } from "../../plugins/builtin/cloud/team/store";
+
+export type TabGroupId = "personal" | `team:${string}`;
+
+export interface StatusBarTabGroup {
+  id: TabGroupId;
+  team: TeamSummary | null;
+  /** Indexes into config.layouts, in tab order. */
+  indexes: number[];
+  collapsed: boolean;
+}
+
+export const GROUP_MARKER_PREFIX = "group:";
+
+export function groupIdFor(layout: Pick<SavedLayout, "origin">): TabGroupId {
+  return layout.origin ? `team:${layout.origin.teamId}` : "personal";
+}
+
+/**
+ * What FOCUS says about a group before any manual toggle: personal focus
+ * folds every team, a team focus folds everything but that team, all folds
+ * nothing.
+ */
+export function focusCollapses(focus: TeamStoreSnapshot["focus"], groupId: TabGroupId): boolean {
+  if (focus === "all") return false;
+  if (focus === "personal") return groupId !== "personal";
+  return groupId !== `team:${focus.teamId}`;
+}
+
+/**
+ * Splits the tab strip into a personal group and one per team, in team name
+ * order, keeping `Ctrl+1-9` positional because indexes are carried through.
+ * A group with the active tab is never collapsed: switching into it opens it.
+ */
+export function buildStatusBarTabGroups(
+  layouts: readonly Pick<SavedLayout, "origin">[],
+  activeIndex: number,
+  teams: readonly TeamSummary[],
+  focus: TeamStoreSnapshot["focus"],
+  manualToggles: ReadonlySet<string>,
+): StatusBarTabGroup[] {
+  const personal: number[] = [];
+  const byTeam = new Map<string, number[]>();
+  layouts.forEach((layout, index) => {
+    if (!layout.origin) {
+      personal.push(index);
+      return;
+    }
+    const list = byTeam.get(layout.origin.teamId) ?? [];
+    list.push(index);
+    byTeam.set(layout.origin.teamId, list);
+  });
+  const teamById = new Map(teams.map((team) => [team.id, team]));
+  const teamGroups = [...byTeam.entries()]
+    .map(([teamId, indexes]) => ({ teamId, team: teamById.get(teamId) ?? null, indexes }))
+    // Known teams by name; teams the store has not loaded yet go last.
+    .sort((a, b) => (
+      a.team && b.team
+        ? a.team.name.localeCompare(b.team.name)
+        : a.team ? -1 : b.team ? 1 : a.teamId.localeCompare(b.teamId)
+    ));
+
+  const groups: StatusBarTabGroup[] = [];
+  const push = (id: TabGroupId, team: TeamSummary | null, indexes: number[]) => {
+    if (indexes.length === 0) return;
+    const byFocus = focusCollapses(focus, id);
+    const collapsed = manualToggles.has(id) ? !byFocus : byFocus;
+    groups.push({ id, team, indexes, collapsed: collapsed && !indexes.includes(activeIndex) });
+  };
+  push("personal", null, personal);
+  for (const group of teamGroups) push(`team:${group.teamId}`, group.team, group.indexes);
+  return groups;
+}
+
+export function groupMarkerValue(groupId: TabGroupId): string {
+  return `${GROUP_MARKER_PREFIX}${groupId}`;
+}
+
+export function groupIdFromMarkerValue(value: string): TabGroupId | null {
+  if (!value.startsWith(GROUP_MARKER_PREFIX)) return null;
+  const id = value.slice(GROUP_MARKER_PREFIX.length);
+  return id === "personal" || id.startsWith("team:") ? (id as TabGroupId) : null;
+}

package/src/components/layout/status-bar.test.tsx

@@ -1,13 +1,13 @@
 import { afterEach, describe, expect, test } from "bun:test";
+import { act, useEffect, useState } from "react";
+import { getDockedPaneIds } from "../../plugins/pane-manager";
+import { setSharedRegistryForTests } from "../../plugins/registry";
 import { testRender } from "../../renderers/opentui/test-utils";
 import { AppContext, createInitialState } from "../../state/app/context";
 import { cloneLayout, createDefaultConfig, createPaneInstance, type LayoutConfig } from "../../types/config";
 import type { AppNotificationRequest } from "../../types/plugin";
-import { StatusBar } from "./status-bar";
 import { VERSION } from "../../version";
-import { getDockedPaneIds } from "../../plugins/pane-manager";
-import { setSharedRegistryForTests } from "../../plugins/registry";
-import { act, useEffect, useState } from "react";
+import { StatusBar } from "./status-bar";
 import { TransientLayoutProvider, useTransientLayout } from "./transient-layout";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
@@ -220,7 +220,7 @@ describe("StatusBar", () => {
       getTermSizeFn: () => ({ width: 120, height: 40 }),
       updateLayoutFn: (layout: LayoutConfig) => { updatedLayout = layout; },
       notify: (notification: AppNotificationRequest) => { notifications.push(notification); },
-      Slot: () => null,
+      renderSlot: () => null,
     } as any);
 
     testSetup = await testRender(
@@ -280,7 +280,7 @@ describe("StatusBar", () => {
       getTermSizeFn: () => ({ width: 120, height: 40 }),
       updateLayoutFn: (layout: LayoutConfig) => { updatedLayout = layout; },
       notify: (notification: AppNotificationRequest) => { notifications.push(notification); },
-      Slot: () => null,
+      renderSlot: () => null,
     } as any);
 
     testSetup = await testRender(

package/src/components/layout/status-bar.tsx

@@ -1,6 +1,14 @@
-import { Box, Text, TextAttributes, contextMenuDivider, useContextMenu, useUiCapabilities } from "../../ui";
+import {
+  Box,
+  Text,
+  TextAttributes,
+  contextMenuDivider,
+  useContextMenu,
+  useRendererHost,
+  useUiCapabilities,
+} from "../../ui";
 import { useDialog, type PromptContext } from "../../ui/dialog";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState, useSyncExternalStore } from "react";
 import { blendHex, hoverBg } from "../../theme/colors";
 import { t, tf } from "../../i18n";
 import { useThemeColors } from "../../theme/theme-context";
@@ -12,6 +20,7 @@ import {
   selectStatusBarVisible,
 } from "../../state/selectors-ui";
 import { useViewport } from "../../react/input";
+import { getCurrentPluginTarget } from "../../plugins/current-target";
 import { getSharedRegistry } from "../../plugins/registry";
 import {
   gridlockAllPanes,
@@ -25,6 +34,10 @@ import { VERSION } from "../../version";
 import { ConfirmDialog } from "../ui/confirm-dialog";
 import { Tabs } from "../ui/tabs";
 import { useTransientLayout } from "./transient-layout";
+import { linkedLayoutMarker, linkedLayoutStatus, linkedLayoutUpdates } from "../../layout-marketplace/linked";
+import { teamAccentHex } from "../../plugins/builtin/cloud/team/model";
+import { teamStore } from "../../plugins/builtin/cloud/team/store";
+import { buildStatusBarTabGroups, groupIdFromMarkerValue, groupMarkerValue } from "./status-bar-groups";
 
 type StatusBarEvent = { stopPropagation?: () => void; preventDefault?: () => void };
 type HoveredControl = string | null;
@@ -34,6 +47,11 @@ type SetHoveredControl = (updater: (current: HoveredControl) => HoveredControl)
 const TIDY_WINDOWS_COLUMNS = 15;
 /** Space held back for the `status:widget` plugin slot, which sizes itself. */
 const STATUS_WIDGET_COLUMNS = 20;
+/**
+ * Where term.gloom.sh sends people who want the installed app. The route
+ * picks the installer for the visitor's OS, so one link serves every platform.
+ */
+const DESKTOP_DOWNLOAD_URL = "https://gloom.sh/download/desktop";
 
 type LayoutTabItem = {
   label: string;
@@ -84,11 +102,51 @@ export function StatusBar({ onOpenChangelog }: { onOpenChangelog?: (version: str
   const showTidyWindows = useMemo(() => shouldShowTidyWindows(layout), [layout])
     && !transientLayout?.active
     && !!registry;
-  const savedLayoutTabs = layouts.map((layout, index) => ({
-    label: `^${index + 1} ${truncate(layout.name, 14)}`,
-    value: String(index),
-    reorderable: true,
-  }));
+  const remoteRevisions = useSyncExternalStore(
+    (onChange) => linkedLayoutUpdates.subscribe(onChange),
+    () => linkedLayoutUpdates.snapshot(),
+  );
+  const teamSnapshot = useSyncExternalStore(
+    (onChange) => teamStore.subscribe(onChange),
+    () => teamStore.getSnapshot(),
+  );
+  const tabGroups = useMemo(
+    () => buildStatusBarTabGroups(layouts, activeLayoutIdx, teamSnapshot.teams, teamSnapshot.focus, teamSnapshot.toggledGroups),
+    [activeLayoutIdx, layouts, teamSnapshot.focus, teamSnapshot.teams, teamSnapshot.toggledGroups],
+  );
+  const layoutTab = (index: number) => {
+    const layout = layouts[index]!;
+    // Linked tabs show `*` when edited locally and `↓` when the team is ahead.
+    const marker = layout.origin && registry
+      ? linkedLayoutMarker(linkedLayoutStatus(layout, registry.panes, remoteRevisions.get(layout.origin.layoutId)))
+      : "";
+    return {
+      label: `^${index + 1} ${truncate(layout.name, 14)}${marker}`,
+      value: String(index),
+      reorderable: true,
+    };
+  };
+  // Tabs grouped by owner: personal first, then one marker per team in its
+  // accent followed by that team's tabs. A collapsed group keeps its marker
+  // with the tab count. Ctrl+1-9 stays positional through the index labels.
+  const savedLayoutTabs = tabGroups.length <= 1
+    ? layouts.map((_, index) => layoutTab(index))
+    : tabGroups.flatMap((group) => {
+      const marker = group.team
+        ? {
+          label: `${group.team.shortName}·${group.collapsed ? `(${group.indexes.length})` : ""}`,
+          value: groupMarkerValue(group.id),
+          reorderable: false,
+          fg: teamAccentHex(group.team.accentColor),
+        }
+        : group.collapsed
+          ? { label: `me·(${group.indexes.length})`, value: groupMarkerValue(group.id), reorderable: false }
+          : null;
+      return [
+        ...(marker ? [marker] : []),
+        ...(group.collapsed ? [] : group.indexes.map(layoutTab)),
+      ];
+    });
   const layoutTabs = transientLayout
     ? [
       ...savedLayoutTabs,
@@ -102,6 +160,11 @@ export function StatusBar({ onOpenChangelog }: { onOpenChangelog?: (version: str
   const layoutTabsWidth = layoutTabs.reduce((sum, tab) => sum + tab.label.length + 2, 0);
   const activeLayoutValue = transientLayout?.active ? transientLayout.id : String(activeLayoutIdx);
   const handleLayoutSelect = (value: string) => {
+    const groupId = groupIdFromMarkerValue(value);
+    if (groupId) {
+      teamStore.toggleGroup(groupId);
+      return;
+    }
     if (value === transientLayout?.id) {
       if (transientLayout.active) {
         transientLayout.onExit?.();
@@ -118,6 +181,7 @@ export function StatusBar({ onOpenChangelog }: { onOpenChangelog?: (version: str
     dispatch({ type: "SWITCH_LAYOUT", index });
   };
   const handleLayoutReorder = (fromValue: string, toValue: string) => {
+    if (groupIdFromMarkerValue(fromValue) || groupIdFromMarkerValue(toValue)) return;
     const fromIndex = Number(fromValue);
     const toIndex = Number(toValue);
     if (
@@ -399,9 +463,10 @@ function StatusBarLayoutControl({
 }
 
 /**
- * The version chip, dropped when the row runs out of room. Live market status
- * lives at the header's right edge, not here, so nothing in the status bar
- * repeats it.
+ * The version chip and, on the hosted web app, a link to the desktop app.
+ * The link goes first when the row runs out of room, then the version. Live
+ * market status lives at the header's right edge, not here, so nothing in the
+ * status bar repeats it.
  */
 function StatusBarSummary({
   hoveredControl,
@@ -413,43 +478,87 @@ function StatusBarSummary({
   StatusBarViewProps,
   "hoveredControl" | "openChangelog" | "rightAvailableWidth" | "setHoveredControl"
 > & { nativePaneChrome: boolean }) {
+  const rendererHost = useRendererHost();
   const versionLabel = `v${VERSION}`;
-  if (rightAvailableWidth < versionLabel.length + 1) return null;
+  const downloadLabel = t("Download desktop app");
+  const showVersion = rightAvailableWidth >= versionLabel.length + 1;
+  const showDownload = getCurrentPluginTarget() === "web"
+    && rightAvailableWidth >= versionLabel.length + 1 + downloadLabel.length + 1;
+  if (!showVersion) return null;
   return (
-    <VersionChip
-      hoveredControl={hoveredControl}
-      label={versionLabel}
-      nativePaneChrome={nativePaneChrome}
-      openChangelog={openChangelog}
-      setHoveredControl={setHoveredControl}
-    />
+    <>
+      <StatusBarChip
+        hoveredControl={hoveredControl}
+        id="version"
+        label={versionLabel}
+        nativePaneChrome={nativePaneChrome}
+        onPress={openChangelog}
+        role="button"
+        setHoveredControl={setHoveredControl}
+        title={openChangelog ? tf("Open changelog for {version}", { version: versionLabel }) : undefined}
+      />
+      {showDownload && (
+        <StatusBarChip
+          hoveredControl={hoveredControl}
+          id="desktop-download"
+          label={downloadLabel}
+          nativePaneChrome={nativePaneChrome}
+          onPress={() => { void rendererHost.openExternal(DESKTOP_DOWNLOAD_URL); }}
+          role="link"
+          setHoveredControl={setHoveredControl}
+          title={t("Get Gloomberb for Mac or Windows")}
+        />
+      )}
+    </>
   );
 }
 
-function VersionChip({
+/** Dim text at the row's right edge that lights up when it can be pressed. */
+function StatusBarChip({
   hoveredControl,
+  id,
   label,
   nativePaneChrome,
-  openChangelog,
+  onPress,
+  role,
   setHoveredControl,
-}: Pick<StatusBarViewProps, "hoveredControl" | "openChangelog" | "setHoveredControl"> & {
+  title,
+}: Pick<StatusBarViewProps, "hoveredControl" | "setHoveredControl"> & {
+  id: string;
   label: string;
   nativePaneChrome: boolean;
+  onPress?: (event?: StatusBarEvent) => void;
+  role: "button" | "link";
+  title?: string;
 }) {
   const colors = useThemeColors();
-  const hovered = hoveredControl === "version";
+  const hovered = hoveredControl === id;
+  const press = onPress
+    ? (event?: StatusBarEvent) => {
+      event?.preventDefault?.();
+      event?.stopPropagation?.();
+      onPress(event);
+    }
+    : undefined;
   return (
     <Box paddingRight={1} flexShrink={0}>
       <Text
-        fg={hovered && openChangelog ? colors.text : colors.textDim}
-        {...(!nativePaneChrome ? { bg: hovered && openChangelog ? hoverBg(colors) : undefined } : {})}
-        title={openChangelog ? tf("Open changelog for {version}", { version: label }) : undefined}
-        aria-label={openChangelog ? tf("Open changelog for {version}", { version: label }) : undefined}
-        role={openChangelog ? "button" : undefined}
-        onMouseOver={() => setHoveredControl((current) => (current === "version" ? current : "version"))}
-        onMouseDown={openChangelog}
-        {...(nativePaneChrome && openChangelog ? { "data-gloom-interactive": "true" } : {})}
-        style={openChangelog ? { cursor: "pointer" } : undefined}
+        fg={hovered && press ? colors.text : colors.textDim}
+        {...(!nativePaneChrome ? { bg: hovered && press ? hoverBg(colors) : undefined } : {})}
+        title={press ? title : undefined}
+        aria-label={press ? title : undefined}
+        role={press ? role : undefined}
+        tabIndex={press ? 0 : undefined}
+        onMouseOver={() => setHoveredControl((current) => (current === id ? current : id))}
+        onMouseOut={() => setHoveredControl((current) => (current === id ? null : current))}
+        onMouseDown={press}
+        onKeyDown={press
+          ? (event: StatusBarEvent & { key?: string }) => {
+            if (event.key === "Enter") press(event);
+          }
+          : undefined}
+        {...(nativePaneChrome && press ? { "data-gloom-interactive": "true" } : {})}
+        style={press ? { cursor: "pointer" } : undefined}
       >
         {label}
       </Text>

package/src/components/layout/titlebar-overlay.ts

@@ -13,6 +13,16 @@ function currentPlatform(): string {
     ?? "";
 }
 
-export function getTitlebarLeadingInset(platform = currentPlatform()): number {
+/**
+ * Columns the header leaves free before its first content. macOS parks the
+ * traffic lights over them, but takes them away in fullscreen, where the space
+ * would just be a gap the eye has to cross.
+ */
+export function getTitlebarLeadingInset(options: {
+  platform?: string;
+  windowFullscreen?: boolean;
+} = {}): number {
+  if (options.windowFullscreen) return 0;
+  const platform = options.platform ?? currentPlatform();
   return /mac/i.test(platform) ? TITLEBAR_TRAFFIC_LIGHT_WIDTH : 0;
 }

package/src/components/layout/window-fullscreen.ts

@@ -0,0 +1,32 @@
+import { useSyncExternalStore } from "react";
+
+let windowFullscreen = false;
+const listeners = new Set<() => void>();
+
+/**
+ * Whether the window hosting this view is in the platform's own fullscreen,
+ * which is not the same as a pane being maximized inside the workspace. Only
+ * the desktop host knows: a webview cannot see its window's style mask, and
+ * macOS hides the traffic lights there, so the header has to stop holding
+ * columns for controls that are no longer on screen.
+ */
+export function setWindowFullscreen(next: boolean): void {
+  if (windowFullscreen === next) return;
+  windowFullscreen = next;
+  for (const listener of [...listeners]) listener();
+}
+
+export function isWindowFullscreen(): boolean {
+  return windowFullscreen;
+}
+
+function subscribeWindowFullscreen(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function useWindowFullscreen(): boolean {
+  return useSyncExternalStore(subscribeWindowFullscreen, isWindowFullscreen, () => false);
+}

package/src/components/onboarding/account-step/form-panel.tsx

@@ -4,6 +4,7 @@ import { colors } from "../../../theme/colors";
 import { t } from "../../../i18n";
 import { TextField } from "../../ui";
 import type { AccountMode, AccountSubmitError } from "../../../plugins/builtin/cloud/auth-model";
+import { ONBOARDING_DESKTOP } from "../onboarding-frame";
 
 function TuiFieldRow({
   label,
@@ -14,7 +15,6 @@ function TuiFieldRow({
   editing,
   inputRef,
   onChange,
-  onSubmit,
 }: {
   label: string;
   active: boolean;
@@ -24,7 +24,6 @@ function TuiFieldRow({
   editing: boolean;
   inputRef: RefObject<InputRenderable | null>;
   onChange: (value: string) => void;
-  onSubmit?: () => void;
 }) {
   if (!active) {
     return (
@@ -52,7 +51,6 @@ function TuiFieldRow({
             textColor={colors.text}
             placeholderColor={colors.textDim}
             onChange={onChange}
-            onSubmit={() => onSubmit?.()}
           />
         ) : (
           <Text fg={value ? colors.text : colors.textMuted}>
@@ -77,7 +75,6 @@ export function AccountFormPanel({
   onEmailChange,
   onPasswordChange,
   onFieldFocus,
-  onSubmitField,
 }: {
   mode: AccountMode;
   email: string;
@@ -91,20 +88,25 @@ export function AccountFormPanel({
   onEmailChange: (value: string) => void;
   onPasswordChange: (value: string) => void;
   onFieldFocus: (index: 0 | 1) => void;
-  onSubmitField?: () => void;
 }) {
   const desktop = useUiHost().kind === "desktop-web";
   const onEmail = fieldIdx <= 0;
 
   if (desktop) {
+    const status = submitting
+      ? { color: colors.text, text: mode === "signup" ? t("Creating your account...") : t("Signing you in...") }
+      : validationError || submitError
+        ? { color: colors.negative, text: validationError ?? submitError?.message ?? "" }
+        : null;
     return (
-      <Box flexDirection="column" style={{ marginTop: 14, gap: 10 }}>
+      <Box flexDirection="column" style={{ marginTop: ONBOARDING_DESKTOP.afterHeader, gap: 14 }}>
         <TextField
           label={t("Email")}
           inputRef={onEmail ? inputRef : undefined}
           value={email}
           type="email"
           autoComplete="email"
+          size="comfortable"
           placeholder="email@example.com"
           focused={onEmail && editing && !submitting}
           backgroundColor={colors.panel}
@@ -112,7 +114,6 @@ export function AccountFormPanel({
           placeholderColor={colors.textDim}
           onMouseDown={() => onFieldFocus(0)}
           onChange={onEmailChange}
-          onSubmit={() => onSubmitField?.()}
         />
         <TextField
           label={t("Password")}
@@ -120,6 +121,7 @@ export function AccountFormPanel({
           value={password}
           type="password"
           autoComplete={mode === "signup" ? "new-password" : "current-password"}
+          size="comfortable"
           placeholder={mode === "signup" ? t("At least 8 characters") : t("Your password")}
           focused={!onEmail && editing && !submitting}
           backgroundColor={colors.panel}
@@ -127,29 +129,10 @@ export function AccountFormPanel({
           placeholderColor={colors.textDim}
           onMouseDown={() => onFieldFocus(1)}
           onChange={onPasswordChange}
-          onSubmit={() => onSubmitField?.()}
         />
-        <Box minHeight="40px" style={{ paddingTop: 2 }}>
-          {submitting ? (
-            <Text fg={colors.text} wrapText>
-              {mode === "signup" ? t("Creating your account...") : t("Signing you in...")}
-            </Text>
-          ) : validationError || submitError ? (
-            <Text fg={colors.negative} wrapText>
-              {validationError ?? submitError?.message ?? ""}
-            </Text>
-          ) : (
-            <Text fg={colors.textMuted} wrapText>
-              {mode === "signup"
-                ? t("We will email you a verification link. Cloud features unlock after verification.")
-                : t("This signs the app in to your Gloom Cloud account.")}
-            </Text>
-          )}
-          {!submitting && submitError?.kind === "switch-to-login" ? (
-            <Text fg={colors.textDim} wrapText style={{ marginTop: 3 }}>
-              {t("Use Log in with this email instead.")}
-            </Text>
-          ) : null}
+        {/* Reserved so the footer does not jump when a message appears. */}
+        <Box style={{ minHeight: 18 }}>
+          {status ? <Text fg={status.color} wrapText>{status.text}</Text> : null}
         </Box>
       </Box>
     );
@@ -166,7 +149,6 @@ export function AccountFormPanel({
         editing={editing}
         inputRef={inputRef}
         onChange={onEmailChange}
-        onSubmit={onSubmitField}
       />
 
       {!onEmail ? (
@@ -181,7 +163,6 @@ export function AccountFormPanel({
             editing={editing && !submitting}
             inputRef={inputRef}
             onChange={onPasswordChange}
-            onSubmit={onSubmitField}
           />
         </>
       ) : null}
@@ -200,7 +181,7 @@ export function AccountFormPanel({
         ) : (
           <Text fg={colors.textDim}>
             {mode === "signup"
-              ? t("We email a link to verify your address.")
+              ? t("New accounts get a verification email.")
               : t("Signs this terminal in to your account.")}
           </Text>
         )}