gloomberb 0.15.2 → 0.15.4

package/src/plugins/builtin/broker-manager/detail.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef } from "react";
-import { Box, ScrollBox, Text, TextAttributes, useUiCapabilities, type BoxRenderable, type ScrollBoxRenderable } from "../../../ui";
-import { Button, NumberField, SectionHeading, SegmentedControl, TextField } from "../../../components";
+import { useRef } from "react";
+import { Box, ScrollBox, Text, TextAttributes, type BoxRenderable, type ScrollBoxRenderable } from "../../../ui";
+import { Button, FieldLabel, NumberField, SectionHeading, SegmentedControl, TextField, useFieldRing } from "../../../components";
 import {
   PRESERVED_PASSWORD_HINT,
   type BrokerProfileDraft,
@@ -9,47 +9,17 @@ import { colors } from "../../../theme/colors";
 import type { BrokerAdapter, BrokerConfigField } from "../../../types/broker";
 import type { BrokerInstanceConfig } from "../../../types/config";
 import type { BrokerAccount } from "../../../types/trading";
-import { formatCurrency } from "../../../utils/format";
+import { formatRelativeAge } from "../../../utils/datetime-format";
+import { formatCurrency, truncateToDisplayWidth } from "../../../utils/format";
 import { t, tf } from "../../../i18n";
-import { formatBrokerUpdatedAt, type BrokerProfileRow } from "./model";
-import { isBrokerErrorMessage, stateColor, truncate } from "./table";
+import type { BrokerProfileRow } from "./model";
+import type { BrokerManagerMessage } from "./pane-actions";
+import { stateColor } from "./table";
 
 export type BrokerEditKey = "label" | "enabled" | string;
 
 type RowRef = (node: BoxRenderable | null) => void;
 
-/**
- * Scrolls the detail so the active edit row is in view. The terminal measures
- * rows in cells from the top of the content; the desktop in pixels, since a
- * focused text field scrolls itself but a segmented control does not.
- */
-function revealEditRow(scroll: ScrollBoxRenderable | null, top: BoxRenderable | null, row: BoxRenderable | null): void {
-  if (!scroll || !top || !row) return;
-  const topRect = top.getBoundingClientRect?.();
-  const rowRect = row.getBoundingClientRect?.();
-  const pixels = topRect && rowRect && scroll.viewportPx && typeof scroll.scrollTopPx === "number";
-  const offset = pixels ? rowRect.y - topRect.y : (row.y ?? 0) - (top.y ?? 0);
-  const size = pixels ? rowRect.height : row.height ?? 1;
-  const viewport = pixels ? scroll.viewportPx!.height : scroll.viewport?.height ?? 0;
-  const current = pixels ? scroll.scrollTopPx! : scroll.scrollTop;
-  if (viewport <= 0) return;
-  let next = current;
-  if (offset < current) next = offset;
-  else if (offset + size > current + viewport) next = Math.min(offset, offset + size - viewport);
-  if (next === current) return;
-  if (pixels) scroll.scrollTopPx = Math.max(0, next);
-  else scroll.scrollTo(Math.max(0, next));
-}
-
-/**
- * The desktop field draws its own focus ring, so the label is plain there. The
- * terminal field label does not change with focus, so it keeps the marker.
- */
-function useFieldLabel(): (label: string, focused: boolean) => string {
-  const { nativePaneChrome } = useUiCapabilities();
-  return (label, focused) => nativePaneChrome ? label : `${focused ? "> " : "  "}${label}`;
-}
-
 function BrokerConfigFieldEditor({
   field,
   draft,
@@ -75,7 +45,6 @@ function BrokerConfigFieldEditor({
   onChange: (key: string, value: string) => void;
   onSubmit: () => void;
 }) {
-  const fieldLabel = useFieldLabel();
   const value = draft.values[field.key] ?? "";
   const previousPassword = field.type === "password"
     ? String(((adapter.toConfigValues?.(previous) ?? previous.config)[field.key] ?? "") || "")
@@ -84,9 +53,7 @@ function BrokerConfigFieldEditor({
   if (field.type === "select") {
     return (
       <Box ref={rowRef} flexDirection="column" onMouseDown={onFocus}>
-        <Text fg={focused ? colors.textBright : colors.textDim} attributes={focused ? TextAttributes.BOLD : 0}>
-          {fieldLabel(t(field.label), focused)}
-        </Text>
+        <FieldLabel label={t(field.label)} active={focused} />
         <SegmentedControl
           value={value}
           focused={focused}
@@ -103,7 +70,8 @@ function BrokerConfigFieldEditor({
   return (
     <Box ref={rowRef} onMouseDown={onFocus}>
       <Field
-        label={fieldLabel(t(field.label), focused)}
+        label={t(field.label)}
+        active={focused}
         value={value}
         focused={focused}
         width={width}
@@ -132,6 +100,7 @@ export function BrokerDetailContent({
   editDraft,
   editFields,
   activeEditKey,
+  editKeys,
   busy,
   message,
   width,
@@ -149,8 +118,10 @@ export function BrokerDetailContent({
   editDraft: BrokerProfileDraft | null;
   editFields: BrokerConfigField[];
   activeEditKey: BrokerEditKey;
+  /** The edit form's fields in Tab order. */
+  editKeys: readonly BrokerEditKey[];
   busy: string | null;
-  message: string | null;
+  message: BrokerManagerMessage | null;
   width: number;
   /** The edit form's shortcut scope, shared with the pane's field ring. */
   editScope: string;
@@ -163,54 +134,47 @@ export function BrokerDetailContent({
   onSaveEdit: () => void;
   onCancelEdit: () => void;
 }) {
-  const fieldLabel = useFieldLabel();
   const scrollRef = useRef<ScrollBoxRenderable | null>(null);
-  const topRef = useRef<BoxRenderable | null>(null);
-  const rowRefs = useRef(new Map<BrokerEditKey, BoxRenderable>());
-  const rowRef = (key: BrokerEditKey): RowRef => (node) => {
-    if (node) rowRefs.current.set(key, node);
-    else rowRefs.current.delete(key);
-  };
-  const editing = !!editDraft;
-  const shownEditKey = useRef<BrokerEditKey | null>(null);
-  useEffect(() => {
-    if (!editing) {
-      shownEditKey.current = null;
-      return;
-    }
-    // The form opens at its first field; after that the view follows the active row.
-    const previous = shownEditKey.current;
-    shownEditKey.current = activeEditKey;
-    if (previous === null || previous === activeEditKey) return;
-    revealEditRow(scrollRef.current, topRef.current, rowRefs.current.get(activeEditKey) ?? null);
-  }, [activeEditKey, editing]);
+  // Tab and j/k walk the fields and go round; Enter, Esc and the select rows'
+  // left and right are the pane's (keyboard.ts).
+  const { nodeRef: rowRef } = useFieldRing({
+    ids: editKeys,
+    activeId: activeEditKey,
+    onActivate: onActiveEditKeyChange,
+    enabled: paneFocused && !!editDraft,
+    scope: editScope,
+    wrap: true,
+    scrollRef,
+  });
 
   if (!row) return <Box flexGrow={1} />;
 
   // Never wider than the detail pane, so a narrow floating pane shrinks instead of clipping.
   const fieldWidth = Math.max(12, Math.min(34, width - 2));
-  const detailStatusMessage = isBrokerErrorMessage(message) ? message : row.message || t("No status message.");
+  // A failed action outranks the profile's own status until the next action.
+  const actionError = message?.tone === "error" ? message.text : null;
+  const detailStatusMessage = actionError ?? (row.message || t("No status message."));
   const editAdapter = row.adapter;
 
   return (
     <ScrollBox ref={scrollRef} flexGrow={1} scrollY>
-      <Box ref={topRef} flexDirection="column" paddingX={1}>
+      <Box flexDirection="column" paddingX={1}>
         {/* The stack title already names the profile; the body starts with its state. */}
         <Text fg={stateColor(row.state)} attributes={TextAttributes.BOLD}>
-          {truncate(row.stateLabel, width)}
+          {truncateToDisplayWidth(row.stateLabel, width)}
         </Text>
         <Text fg={colors.textDim}>
-          {truncate(`${row.brokerName} · ${row.mode} · ${row.id}`, width)}
+          {truncateToDisplayWidth(`${row.brokerName} · ${row.mode} · ${row.id}`, width)}
         </Text>
         <Text
-          fg={isBrokerErrorMessage(detailStatusMessage) ? colors.negative : colors.textDim}
+          fg={actionError || row.state === "error" ? colors.negative : colors.textDim}
           width={width}
           wrapText
         >
           {detailStatusMessage}
         </Text>
-        <Text fg={colors.textMuted}>{tf("Last sync {time}", { time: formatBrokerUpdatedAt(row.lastSyncedAt) })}</Text>
-        <Text fg={colors.textMuted}>{tf("Status updated {time}", { time: formatBrokerUpdatedAt(row.updatedAt) })}</Text>
+        <Text fg={colors.textMuted}>{tf("Last sync {time}", { time: formatRelativeAge(row.lastSyncedAt) })}</Text>
+        <Text fg={colors.textMuted}>{tf("Status updated {time}", { time: formatRelativeAge(row.updatedAt) })}</Text>
         <Box height={1} />
 
         {editDraft && editAdapter ? (
@@ -218,7 +182,8 @@ export function BrokerDetailContent({
             <SectionHeading title="Edit Profile" />
             <Box ref={rowRef("label")} onMouseDown={() => onActiveEditKeyChange("label")}>
               <TextField
-                label={fieldLabel(t("Profile Label"), activeEditKey === "label")}
+                label={t("Profile Label")}
+                active={activeEditKey === "label"}
                 value={editDraft.label}
                 focused={paneFocused && activeEditKey === "label"}
                 width={fieldWidth}
@@ -227,9 +192,7 @@ export function BrokerDetailContent({
               />
             </Box>
             <Box ref={rowRef("enabled")} flexDirection="column" onMouseDown={() => onActiveEditKeyChange("enabled")}>
-              <Text fg={activeEditKey === "enabled" ? colors.textBright : colors.textDim} attributes={activeEditKey === "enabled" ? TextAttributes.BOLD : 0}>
-                {fieldLabel(t("Enabled"), activeEditKey === "enabled")}
-              </Text>
+              <FieldLabel label={t("Enabled")} active={activeEditKey === "enabled"} />
               <SegmentedControl
                 value={editDraft.enabled ? "yes" : "no"}
                 focused={paneFocused && activeEditKey === "enabled"}
@@ -271,7 +234,7 @@ export function BrokerDetailContent({
               <Text fg={colors.textDim}>{t("No accounts loaded. Test/connect or sync this profile.")}</Text>
             ) : accounts.map((account) => (
               <Text key={account.accountId} fg={colors.textDim}>
-                {truncate(accountDetail(account), width)}
+                {truncateToDisplayWidth(accountDetail(account), width)}
               </Text>
             ))}
           </Box>

package/src/plugins/builtin/broker-manager/footer.ts

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from "react";
 import { usePaneFooter, type PaneFooterSegment, type PaneHint } from "../../../components";
-import { isBrokerErrorMessage } from "./table";
+import type { BrokerManagerMessage } from "./pane-actions";
 
 interface BrokerManagerFooterActions {
   connectSelected: () => Promise<void>;
@@ -29,7 +29,7 @@ export function useBrokerManagerFooter({
   canUseSelectedBroker: boolean;
   editing: boolean;
   /** The last result of an action, or null. */
-  message: string | null;
+  message: BrokerManagerMessage | null;
 }) {
   const actionsRef = useRef(actions);
   actionsRef.current = actions;
@@ -62,7 +62,7 @@ export function useBrokerManagerFooter({
   // so the footer carries only what changes: the running action and its result.
   const info = useMemo<PaneFooterSegment[]>(() => [
     ...(busy ? [{ id: "busy", parts: [{ text: busy, tone: "muted" as const }] }] : []),
-    ...(message ? [{ id: "message", parts: [{ text: message, tone: isBrokerErrorMessage(message) ? "negative" as const : "muted" as const }] }] : []),
+    ...(message ? [{ id: "message", parts: [{ text: message.text, tone: message.tone === "error" ? "negative" as const : "muted" as const }] }] : []),
   ], [busy, message]);
 
   usePaneFooter("broker-manager", () => ({

package/src/plugins/builtin/broker-manager/index.tsx

@@ -1,8 +1,16 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import {
   getVisibleBrokerConfigFields,
   type BrokerProfileDraft,
 } from "../../../brokers/profile-form";
+import { signedInBrokerAdapter } from "../../../brokers/signed-in/adapter";
+import {
+  attachSignedInBrokerPersistence,
+  getSignedInBrokers,
+  refreshSignedInBrokers,
+  resetSignedInBrokerCatalog,
+  subscribeSignedInBrokers,
+} from "../../../brokers/signed-in/catalog";
 import { Button, DataTableStackView, EmptyState } from "../../../components";
 import { t } from "../../../i18n";
 import { useAppLanguage } from "../../../i18n/react";
@@ -15,6 +23,7 @@ import {
 import type { BrokerAdapter } from "../../../types/broker";
 import type { PaneProps } from "../../../types/plugin";
 import { Box } from "../../../ui";
+import { getCurrentPluginTarget } from "../../current-target";
 import { usePluginBrokerActions, usePluginPaneState } from "../../runtime";
 import type { PluginModule } from "../plugin-module";
 import { BrokerDetailContent, type BrokerEditKey } from "./detail";
@@ -64,9 +73,11 @@ export function BrokersPane({ focused, width, height }: PaneProps) {
     };
   }, [config.brokerInstances, getBrokerAdapter]);
 
+  // Signed-in profiles take their broker's name from the connector list.
+  const signedInBrokers = useSyncExternalStore(subscribeSignedInBrokers, getSignedInBrokers, getSignedInBrokers);
   const rows = useMemo(
     () => buildBrokerProfileRows(config, adapters, brokerAccounts),
-    [adapters, brokerAccounts, config, language, statusVersion],
+    [adapters, brokerAccounts, config, language, signedInBrokers, statusVersion],
   );
   const selectedIndex = Math.max(0, rows.findIndex((row) => row.id === selectedId));
   const selectedRow = rows[selectedIndex] ?? null;
@@ -168,11 +179,9 @@ export function BrokersPane({ focused, width, height }: PaneProps) {
   useBrokerManagerKeyboard({
     activeEditKey,
     editing: !!editDraft,
-    editKeys,
     focused,
     scope: editScope,
     selectKeys: editSelectKeys,
-    onActiveEditKeyChange: setActiveEditKey,
     onCancelEdit: cancelEdit,
     onCycleSelect: cycleEditSelect,
     saveEdit,
@@ -222,6 +231,7 @@ export function BrokersPane({ focused, width, height }: PaneProps) {
       editDraft={editDraft}
       editFields={editFields}
       activeEditKey={activeEditKey}
+      editKeys={editKeys}
       busy={busy}
       message={message}
       width={detailContentWidth}
@@ -306,6 +316,12 @@ export const brokerManagerModule: PluginModule = {
   ],
 
   setup(ctx) {
+    // Brokers whose connection the Gloom account holds; the backend lists them.
+    ctx.registerBroker(signedInBrokerAdapter);
+    attachSignedInBrokerPersistence(ctx.persistence);
+    // The app fetches the connector list; a CLI run and the desktop's Bun half read the saved one.
+    if (getCurrentPluginTarget() !== "cli") void refreshSignedInBrokers();
+
     ctx.registerCommand({
       id: "open-brokers",
       label: "Open Brokers",
@@ -317,4 +333,8 @@ export const brokerManagerModule: PluginModule = {
       },
     });
   },
+
+  dispose() {
+    resetSignedInBrokerCatalog();
+  },
 };

package/src/plugins/builtin/broker-manager/keyboard.ts

@@ -3,35 +3,32 @@ import { isPlainKey } from "../../../utils/keyboard";
 import type { BrokerEditKey } from "./detail";
 
 /**
- * The edit form's field ring. The list and detail actions (a, e, c, s, o, d)
- * are footer hints, which bind their own keys, and the table opens a row on
- * Enter, so only editing needs keys of its own.
+ * The edit form's keys beside its field ring (the detail's useFieldRing walks
+ * the fields). The list and detail actions (a, e, c, s, o, d) are footer
+ * hints, which bind their own keys, and the table opens a row on Enter, so
+ * only editing needs keys of its own.
  *
- * It runs before the app's Tab (next pane) and the stack's Esc (back), and
- * while a text field has the keyboard, so Tab walks every field, Esc cancels
- * the edit instead of closing the profile, and Enter saves from any row.
+ * It runs before the stack's Esc (back), and while a text field has the
+ * keyboard, so Esc cancels the edit instead of closing the profile and Enter
+ * saves from any row.
  */
 export function useBrokerManagerKeyboard({
   activeEditKey,
   editing,
-  editKeys,
   focused,
   scope,
   selectKeys,
-  onActiveEditKeyChange,
   onCancelEdit,
   onCycleSelect,
   saveEdit,
 }: {
   activeEditKey: BrokerEditKey;
   editing: boolean;
-  editKeys: BrokerEditKey[];
   focused: boolean;
   /** Shared with the form's segmented controls so the two take turns on left and right. */
   scope: string;
   /** Rows edited with left and right: the enabled switch and select-type broker fields. */
   selectKeys: ReadonlySet<BrokerEditKey>;
-  onActiveEditKeyChange: (key: BrokerEditKey) => void;
   onCancelEdit: () => void;
   onCycleSelect: (key: BrokerEditKey, direction: -1 | 1) => void;
   saveEdit: () => Promise<void>;
@@ -42,11 +39,6 @@ export function useBrokerManagerKeyboard({
       event.preventDefault();
       event.stopPropagation();
     };
-    const move = (delta: number) => {
-      const index = Math.max(0, editKeys.indexOf(activeEditKey));
-      const next = editKeys[(index + delta + editKeys.length) % editKeys.length];
-      if (next) onActiveEditKeyChange(next);
-    };
     const onSelectRow = !event.targetEditable && selectKeys.has(activeEditKey);
 
     if (isPlainKey(event, "escape") || (!event.targetEditable && isPlainKey(event, "backspace"))) {
@@ -59,21 +51,6 @@ export function useBrokerManagerKeyboard({
       saveEdit().catch(() => {});
       return;
     }
-    if (event.name === "tab" && !event.ctrl && !event.alt && !event.meta && !event.super) {
-      consume(event);
-      move(event.shift ? -1 : 1);
-      return;
-    }
-    if (!event.targetEditable && isPlainKey(event, "up", "k")) {
-      consume(event);
-      move(-1);
-      return;
-    }
-    if (!event.targetEditable && isPlainKey(event, "down", "j")) {
-      consume(event);
-      move(1);
-      return;
-    }
     if (onSelectRow && isPlainKey(event, "left", "h", "right", "l", "space")) {
       consume(event);
       onCycleSelect(activeEditKey, isPlainKey(event, "left", "h") ? -1 : 1);

package/src/plugins/builtin/broker-manager/model.ts

@@ -2,7 +2,6 @@ import type { BrokerAdapter, BrokerConnectionStatus } from "../../../types/broke
 import type { AppConfig, BrokerInstanceConfig } from "../../../types/config";
 import type { BrokerAccount } from "../../../types/trading";
 import { formatCurrency } from "../../../utils/format";
-import { formatRelativeAge } from "../../../utils/relative-time";
 import { t } from "../../../i18n";
 
 export type BrokerDisplayState =
@@ -42,10 +41,6 @@ function formatBrokerMode(value: unknown): string {
   return text ? titleCase(text) : t("Configured");
 }
 
-export function formatBrokerUpdatedAt(updatedAt: number | undefined, now = Date.now()): string {
-  return formatRelativeAge(updatedAt, now);
-}
-
 function summarizeBrokerAccounts(accounts: BrokerAccount[]): string {
   if (accounts.length === 0) return "0 acct";
   const currencies = new Set(accounts.map((account) => account.currency || "USD"));
@@ -116,7 +111,9 @@ export function buildBrokerProfileRows(
   return config.brokerInstances.map((instance) => {
     const adapter = adapters.get(instance.brokerType) ?? null;
     const status = adapter?.getStatus?.(instance) ?? null;
-    const mode = resolveMode(adapter, instance, status);
+    // An adapter that fronts several brokers names the broker and how it connects.
+    const described = adapter?.describeInstance?.(instance) ?? null;
+    const mode = described?.method ?? resolveMode(adapter, instance, status);
     const state = resolveState(instance, adapter, mode, status);
     const accounts = brokerAccounts[instance.id] ?? [];
     const portfolioLastSyncedAt = Math.max(
@@ -132,7 +129,7 @@ export function buildBrokerProfileRows(
       id: instance.id,
       label: instance.label,
       brokerType: instance.brokerType,
-      brokerName: adapter?.name ?? instance.brokerType.toUpperCase(),
+      brokerName: described?.brokerName ?? adapter?.name ?? instance.brokerType.toUpperCase(),
       mode,
       state: state.state,
       stateLabel: state.label,

package/src/plugins/builtin/broker-manager/pane-actions.tsx

@@ -1,18 +1,35 @@
 import { useCallback, useMemo, useState, type Dispatch, type SetStateAction } from "react";
-import { ConfirmDialog } from "../../../components";
+import { confirmDialog } from "../../../components";
 import {
   buildBrokerProfileConfig,
   createBrokerProfileDraft,
   validateBrokerProfileValues,
   type BrokerProfileDraft,
 } from "../../../brokers/profile-form";
+import { disconnectSignedInProfile, signedInBrokerForProfile } from "../../../brokers/signed-in/connect";
+import { isSignedInBrokerProfile } from "../../../brokers/signed-in/profile";
+import { requestBrokerSignIn } from "../../../brokers/signed-in/sign-in-dialog";
 import type { BrokerProfileAction } from "../../../types/broker";
-import { useDialog, type PromptContext } from "../../../ui/dialog";
+import { useDialog } from "../../../ui/dialog";
 import { t, tf } from "../../../i18n";
 import { usePluginAppActions, usePluginBrokerActions } from "../../runtime";
 import type { BrokerEditKey } from "./detail";
 import type { BrokerProfileRow } from "./model";
 
+/** The last action's result. Errors also replace the profile status in the detail. */
+export interface BrokerManagerMessage {
+  tone: "info" | "error";
+  text: string;
+}
+
+function infoMessage(text: string): BrokerManagerMessage {
+  return { tone: "info", text };
+}
+
+function errorMessage(error: unknown, fallback: string): BrokerManagerMessage {
+  return { tone: "error", text: error instanceof Error ? error.message : fallback };
+}
+
 export function useBrokerManagerActions({
   selectedRow,
   editDraft,
@@ -37,7 +54,7 @@ export function useBrokerManagerActions({
     removeBrokerInstance,
   } = usePluginBrokerActions();
   const [busy, setBusy] = useState<string | null>(null);
-  const [message, setMessage] = useState<string | null>(null);
+  const [message, setMessage] = useState<BrokerManagerMessage | null>(null);
 
   const openAddBroker = useCallback(() => {
     openCommandBar("Add Broker Account");
@@ -45,7 +62,7 @@ export function useBrokerManagerActions({
 
   const startEdit = useCallback(() => {
     if (!selectedRow?.adapter) {
-      setMessage(t("Broker plugin is not available."));
+      setMessage({ tone: "error", text: t("Broker plugin is not available.") });
       return;
     }
     const draft = createBrokerProfileDraft(selectedRow.adapter, selectedRow.instance);
@@ -62,12 +79,12 @@ export function useBrokerManagerActions({
     if (!selectedRow?.adapter || !editDraft) return;
     const label = editDraft.label.trim();
     if (!label) {
-      setMessage(t("Profile label is required."));
+      setMessage({ tone: "error", text: t("Profile label is required.") });
       return;
     }
     const validationError = validateBrokerProfileValues(selectedRow.adapter, editDraft.values, selectedRow.instance);
     if (validationError) {
-      setMessage(validationError);
+      setMessage({ tone: "error", text: validationError });
       return;
     }
 
@@ -80,9 +97,9 @@ export function useBrokerManagerActions({
         replaceConfig: true,
       });
       setEditDraft(null);
-      setMessage(tf("Saved {label}.", { label }));
+      setMessage(infoMessage(tf("Saved {label}.", { label })));
     } catch (error) {
-      setMessage(error instanceof Error ? error.message : t("Failed to save broker profile."));
+      setMessage(errorMessage(error, t("Failed to save broker profile.")));
     } finally {
       setBusy(null);
     }
@@ -90,17 +107,36 @@ export function useBrokerManagerActions({
 
   const connectSelected = useCallback(async () => {
     if (!selectedRow) return;
+    if (isSignedInBrokerProfile(selectedRow.instance)) {
+      // Connecting happens in the browser, then the profile syncs what it can now see.
+      const broker = signedInBrokerForProfile(selectedRow.instance, selectedRow.brokerName);
+      try {
+        setBusy(t("Connecting…"));
+        if (!await requestBrokerSignIn(broker)) {
+          setMessage(infoMessage(tf("{broker} was not connected.", { broker: broker.name })));
+          return;
+        }
+        await syncBrokerInstance(selectedRow.id);
+        refreshStatuses();
+        setMessage(infoMessage(tf("Connected {broker}.", { broker: broker.name })));
+      } catch (error) {
+        setMessage(errorMessage(error, tf("Failed to sync {label}.", { label: selectedRow.label })));
+      } finally {
+        setBusy(null);
+      }
+      return;
+    }
     try {
       setBusy(t("Testing…"));
       await connectBrokerInstance(selectedRow.id);
       refreshStatuses();
-      setMessage(tf("Tested {label}.", { label: selectedRow.label }));
+      setMessage(infoMessage(tf("Tested {label}.", { label: selectedRow.label })));
     } catch (error) {
-      setMessage(error instanceof Error ? error.message : tf("Failed to test {label}.", { label: selectedRow.label }));
+      setMessage(errorMessage(error, tf("Failed to test {label}.", { label: selectedRow.label })));
     } finally {
       setBusy(null);
     }
-  }, [connectBrokerInstance, refreshStatuses, selectedRow]);
+  }, [connectBrokerInstance, refreshStatuses, selectedRow, syncBrokerInstance]);
 
   const syncSelected = useCallback(async () => {
     if (!selectedRow) return;
@@ -108,9 +144,9 @@ export function useBrokerManagerActions({
       setBusy(t("Syncing…"));
       await syncBrokerInstance(selectedRow.id);
       refreshStatuses();
-      setMessage(tf("Synced {label}.", { label: selectedRow.label }));
+      setMessage(infoMessage(tf("Synced {label}.", { label: selectedRow.label })));
     } catch (error) {
-      setMessage(error instanceof Error ? error.message : tf("Failed to sync {label}.", { label: selectedRow.label }));
+      setMessage(errorMessage(error, tf("Failed to sync {label}.", { label: selectedRow.label })));
     } finally {
       setBusy(null);
     }
@@ -125,7 +161,7 @@ export function useBrokerManagerActions({
   const openProfileAction = useCallback((action: BrokerProfileAction | null = primaryProfileAction) => {
     if (!action) return;
     if (action.disabled) {
-      setMessage(action.disabledReason ?? tf("{action} is unavailable for this profile.", { action: t(action.label) }));
+      setMessage(infoMessage(action.disabledReason ?? tf("{action} is unavailable for this profile.", { action: t(action.label) })));
       return;
     }
     if (action.paneId) showPane(action.paneId);
@@ -133,33 +169,37 @@ export function useBrokerManagerActions({
 
   const removeSelected = useCallback(async () => {
     if (!selectedRow) return;
-    const confirmed = await dialog.prompt<boolean>({
-      closeOnClickOutside: true,
-      content: (ctx: PromptContext<boolean>) => (
-        <ConfirmDialog
-          {...ctx}
-          title={t("Disconnect broker?")}
-          body={[
-            tf('Remove "{label}" and imported broker data?', { label: selectedRow.label }),
-            t("Broker-managed portfolios, positions, and contracts will be removed."),
-          ]}
-          confirmLabel={t("Disconnect")}
-          cancelLabel={t("Back")}
-          width={58}
-          footer={t("Enter disconnect · Esc cancel")}
-        />
-      ),
-    }).catch(() => false);
-    if (confirmed !== true) return;
+    // The connection belongs to the Gloom account, so removing it reaches every device.
+    const signedIn = isSignedInBrokerProfile(selectedRow.instance)
+      ? signedInBrokerForProfile(selectedRow.instance, selectedRow.brokerName)
+      : null;
+    const confirmed = await confirmDialog(dialog, {
+      title: t("Disconnect broker?"),
+      body: [
+        tf('Remove "{label}" and imported broker data?', { label: selectedRow.label }),
+        t("Broker-managed portfolios, positions, and contracts will be removed."),
+        ...(signedIn
+          ? [tf("This also disconnects {broker} from your other devices and agents.", { broker: signedIn.name })]
+          : []),
+      ],
+      confirmLabel: t("Disconnect"),
+      cancelLabel: t("Back"),
+      width: 58,
+      footer: t("Enter disconnect · Esc cancel"),
+    });
+    if (!confirmed) return;
 
     try {
       setBusy(t("Disconnecting…"));
+      const { stillConnected } = await disconnectSignedInProfile(selectedRow.instance);
       await removeBrokerInstance(selectedRow.id);
       setEditDraft(null);
       setDetailOpen(false);
-      setMessage(tf("Removed {label}.", { label: selectedRow.label }));
+      setMessage(infoMessage(stillConnected && signedIn
+        ? tf("Removed {label}. Sign in to Gloom to disconnect {broker} from your account.", { label: selectedRow.label, broker: signedIn.name })
+        : tf("Removed {label}.", { label: selectedRow.label })));
     } catch (error) {
-      setMessage(error instanceof Error ? error.message : tf("Failed to remove {label}.", { label: selectedRow.label }));
+      setMessage(errorMessage(error, tf("Failed to remove {label}.", { label: selectedRow.label })));
     } finally {
       setBusy(null);
     }