gloomberb 0.5.0 → 0.6.0

package/src/components/onboarding/onboarding-wizard.tsx

@@ -1,20 +1,21 @@
+import { AsciiText, Box, Input, Span, Strong, Text, Underline, useUiHost } from "../../ui";
 import { useState, useCallback, useEffect, useRef, useMemo, type RefObject } from "react";
-import { useKeyboard, useTerminalDimensions } from "@opentui/react";
-import { TextAttributes } from "@opentui/core";
-import type { InputRenderable } from "@opentui/core";
+import { useShortcut, useViewport } from "../../react/input";
+import { TextAttributes } from "../../ui";
+import { type InputRenderable } from "../../ui";
 import { colors, applyTheme } from "../../theme/colors";
 import { themes, getThemeIds } from "../../theme/themes";
 import { saveConfig } from "../../data/config-store";
 import type { AppConfig } from "../../types/config";
 import type { PluginRegistry } from "../../plugins/registry";
 import { resolveBrokerConfigFields, type BrokerAdapter, type BrokerConfigField } from "../../types/broker";
-import { buildIbkrConfigFromValues } from "../../plugins/ibkr/config";
+import { buildBrokerProfileConfig, validateBrokerProfileValues } from "../../brokers/profile-form";
 import { createBrokerInstanceId } from "../../utils/broker-instances";
 import { isBackNavigationKey, isPlainEscape } from "../../utils/back-navigation";
+import { detectShortcutPlatform, formatPrimaryShortcut, getShortcutDisplayMode } from "../../utils/shortcut-labels";
 import { syncBrokerInstance } from "../../brokers/sync-broker-instance";
 import { debugLog } from "../../utils/debug-log";
-import { ToggleList, type ToggleListItem } from "../toggle-list";
-import { TextField, ExternalLink } from "../ui";
+import { TextField, ExternalLink, ListView, type ListViewItem } from "../ui";
 
 interface OnboardingWizardProps {
   config: AppConfig;
@@ -22,8 +23,8 @@ interface OnboardingWizardProps {
   onComplete: (config: AppConfig) => void | Promise<void>;
 }
 
-type Step = "welcome" | "theme" | "portfolio" | "plugins" | "shortcuts" | "ready";
-const STEPS: Step[] = ["welcome", "theme", "portfolio", "plugins", "shortcuts", "ready"];
+type Step = "welcome" | "theme" | "portfolio" | "shortcuts" | "ready";
+const STEPS: Step[] = ["welcome", "theme", "portfolio", "shortcuts", "ready"];
 
 // Sub-steps within the portfolio step
 type PortfolioSub = "choose" | "manual-name" | "broker-setup" | "broker-fields" | "broker-sync";
@@ -34,12 +35,7 @@ interface BrokerOption {
   adapter: BrokerAdapter;
 }
 
-const LOGO = [
-  "\u259E\u2580\u2596\u259C           \u258C        \u258C  ",
-  "\u258C\u2584\u2596\u2590 \u259E\u2580\u2596\u259E\u2580\u2596\u259B\u259A\u2580\u2596\u259B\u2580\u2596\u259E\u2580\u2596\u2599\u2580\u2596\u259B\u2580\u2596",
-  "\u258C \u258C\u2590 \u258C \u258C\u258C \u258C\u258C\u2590 \u258C\u258C \u258C\u259B\u2580 \u258C  \u258C \u258C",
-  "\u259D\u2580  \u2598\u259D\u2580 \u259D\u2580 \u2598\u259D \u2598\u2580\u2580 \u259D\u2580\u2598\u2598  \u2580\u2580 ",
-];
+const LOGO_TEXT = "Gloomberb";
 
 const PASSWORD_MASK_CHAR = "*";
 const onboardingLog = debugLog.createLogger("onboarding");
@@ -49,23 +45,6 @@ interface BrokerSyncSummary {
   positionsImported: number;
 }
 
-function getToggleablePlugins(pluginRegistry: PluginRegistry) {
-  const result: Array<{ id: string; name: string; description: string; order: number }> = [];
-  for (const [, plugin] of pluginRegistry.allPlugins) {
-    if (plugin.toggleable) {
-      result.push({
-        id: plugin.id,
-        name: plugin.name,
-        description: plugin.description ?? "",
-        order: plugin.order ?? Number.MAX_SAFE_INTEGER,
-      });
-    }
-  }
-  return result
-    .sort((left, right) => left.order - right.order || left.name.localeCompare(right.name))
-    .map(({ order: _order, ...plugin }) => plugin);
-}
-
 function summarizeError(error: unknown): string {
   if (error instanceof Error && error.message.trim()) {
     return error.message.trim();
@@ -91,7 +70,6 @@ function focusPortfolioListCollection(config: AppConfig, collectionId: string):
       },
       settings: {
         ...instance.settings,
-        lockedCollectionId: collectionId,
         visibleCollectionIds: [collectionId, ...visibleCollectionIds.filter((value) => value !== collectionId)],
       },
     };
@@ -107,7 +85,7 @@ function focusPortfolioListCollection(config: AppConfig, collectionId: string):
 }
 
 export function OnboardingWizard({ config, pluginRegistry, onComplete }: OnboardingWizardProps) {
-  const { width: termWidth, height: termHeight } = useTerminalDimensions();
+  const { width: termWidth, height: termHeight } = useViewport();
   const [step, setStep] = useState<Step>("welcome");
   const [themeIdx, setThemeIdx] = useState(0);
 
@@ -128,13 +106,6 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
   const [isFinishing, setIsFinishing] = useState(false);
   const [finishError, setFinishError] = useState<string | null>(null);
 
-  // Plugin state
-  const toggleablePlugins = useMemo(() => getToggleablePlugins(pluginRegistry), [pluginRegistry]);
-  const [disabledPlugins, setDisabledPlugins] = useState<string[]>(() => (
-    config.disabledPlugins.filter((pluginId) => pluginId !== "gloomberb-cloud")
-  ));
-  const [pluginIdx, setPluginIdx] = useState(0);
-
   const inputRef = useRef<InputRenderable>(null);
   const brokerSyncAttemptRef = useRef(0);
   const themeIds = getThemeIds();
@@ -152,15 +123,15 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
   }, [pluginRegistry.brokers]);
 
   // Build the list of choices for the portfolio step: manual + all connectable brokers
-  const portfolioChoices = useMemo(() => {
-    const choices: Array<{ id: string; label: string; desc: string }> = [
-      { id: "manual", label: "Create Manual Portfolio", desc: "Add tickers and positions by hand" },
+  const portfolioChoices = useMemo<ListViewItem[]>(() => {
+    const choices: ListViewItem[] = [
+      { id: "manual", label: "Create Manual Portfolio", description: "Add tickers and positions by hand" },
     ];
     for (const broker of brokerOptions) {
       choices.push({
         id: broker.id,
         label: `Connect ${broker.name}`,
-        desc: `Auto-import positions via ${broker.name}`,
+        description: `Auto-import positions via ${broker.name}`,
       });
     }
     return choices;
@@ -232,10 +203,13 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
     }
 
     const brokerOption = brokerOptions.find((option) => option.id === selectedBrokerId);
+    const adapter = brokerOption?.adapter;
+    if (!adapter) throw new Error(`Unknown broker "${selectedBrokerId}".`);
+    const validationError = validateBrokerProfileValues(adapter, selectedValues);
+    if (validationError) throw new Error(validationError);
+
     const label = brokerOption?.name || selectedBrokerId;
-    const brokerConfig = (selectedBrokerId === "ibkr"
-      ? buildIbkrConfigFromValues(selectedValues)
-      : { ...selectedValues }) as unknown as Record<string, unknown>;
+    const brokerConfig = buildBrokerProfileConfig(adapter, selectedValues);
     const instanceId = createBrokerInstanceId(
       selectedBrokerId,
       label,
@@ -280,7 +254,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
         brokers: pluginRegistry.brokers,
         tickerRepository: pluginRegistry.tickerRepository,
         resources: pluginRegistry.persistence.resources,
-        persistResolvedIbkrConnection: true,
+        persistResolvedBrokerConfig: true,
       });
       if (brokerSyncAttemptRef.current !== attemptId) {
         return;
@@ -347,7 +321,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
         portfolios: isBroker
           ? (baseConfig ?? config).portfolios
           : [{ id: "main", name: portfolioName || "Main Portfolio", currency: "USD" }],
-        disabledPlugins,
+        disabledPlugins: [],
         onboardingComplete: true,
       };
 
@@ -360,7 +334,6 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
   }, [
     brokerSyncedConfig,
     config,
-    disabledPlugins,
     isFinishing,
     onComplete,
     portfolioName,
@@ -378,7 +351,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
     }));
   }, [resetBrokerSync]);
 
-  useKeyboard((event) => {
+  useShortcut((event) => {
     if (isFinishing) {
       return;
     }
@@ -576,22 +549,6 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
           setBrokerSelectIdx((index) => Math.min(optionCount - 1, index + 1));
         }
       }
-    } else if (step === "plugins") {
-      if (event.name === "up" || event.name === "k") {
-        setPluginIdx((i) => Math.max(0, i - 1));
-      } else if (event.name === "down" || event.name === "j") {
-        setPluginIdx((i) => Math.min(toggleablePlugins.length - 1, i + 1));
-      } else if (event.name === "space" || event.name === " ") {
-        event.stopPropagation?.();
-        const plugin = toggleablePlugins[pluginIdx];
-        if (plugin) {
-          setDisabledPlugins((prev) =>
-            prev.includes(plugin.id)
-              ? prev.filter((id) => id !== plugin.id)
-              : [...prev, plugin.id]
-          );
-        }
-      }
     }
   });
 
@@ -623,7 +580,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
     : null;
 
   return (
-    <box
+    <Box
       position="absolute"
       top={0}
       left={0}
@@ -632,7 +589,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
       backgroundColor={colors.bg}
       zIndex={200}
     >
-      <box
+      <Box
         position="absolute"
         top={contentTop}
         left={contentLeft}
@@ -646,6 +603,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
             sub={portfolioSub}
             choices={portfolioChoices}
             optionIdx={portfolioOptionIdx}
+            onOptionSelect={setPortfolioOptionIdx}
             portfolioName={portfolioName}
             onNameChange={setPortfolioName}
             selectedBrokerId={selectedBrokerId}
@@ -660,21 +618,8 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
             brokerSyncError={brokerSyncError}
           />
         )}
-        {step === "plugins" && (
-          <PluginsStep
-            plugins={toggleablePlugins}
-            disabledPlugins={disabledPlugins}
-            selectedIdx={pluginIdx}
-            onToggle={(id) => {
-              setDisabledPlugins((prev) =>
-                prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
-              );
-            }}
-            onSelect={setPluginIdx}
-          />
-        )}
         {step === "shortcuts" && (
-          <ShortcutsStep pluginRegistry={pluginRegistry} disabledPlugins={disabledPlugins} />
+          <ShortcutsStep pluginRegistry={pluginRegistry} />
         )}
         {step === "ready" && (
           <ReadyStep
@@ -687,20 +632,20 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
         )}
 
         {/* Bottom: progress + nav hints */}
-        <box height={1} />
-        <box height={1} flexDirection="row" width={contentWidth}>
-          <box flexGrow={1}>
-            <text fg={colors.textMuted}>{progressDots}</text>
-          </box>
-        </box>
-        <box height={1} flexDirection="row" width={contentWidth}>
-          <box flexGrow={1} />
-          <box>
-            <text fg={colors.textMuted}>{hintText}</text>
-          </box>
-        </box>
-      </box>
-    </box>
+        <Box height={1} />
+        <Box height={1} flexDirection="row" width={contentWidth}>
+          <Box flexGrow={1}>
+            <Text fg={colors.textMuted}>{progressDots}</Text>
+          </Box>
+        </Box>
+        <Box height={1} flexDirection="row" width={contentWidth}>
+          <Box flexGrow={1} />
+          <Box>
+            <Text fg={colors.textMuted}>{hintText}</Text>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
   );
 }
 
@@ -708,24 +653,20 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
 
 function WelcomeStep() {
   return (
-    <box flexDirection="column" paddingX={2}>
-      <box height={1} />
-      {LOGO.map((line, i) => (
-        <box key={i} height={1}>
-          <text fg={colors.textBright} attributes={TextAttributes.BOLD}>{line}</text>
-        </box>
-      ))}
-      <box height={2} />
-      <box height={1}>
-        <text fg={colors.textDim}>{"The open terminal for modern finance."}</text>
-      </box>
-      <box height={2} />
-      <box height={1}>
-        <text fg={colors.textMuted}>{"Let's set things up (~30s)."}</text>
-      </box>
-      <box height={2} />
-
-    </box>
+    <Box flexDirection="column" paddingX={2}>
+      <Box height={1} />
+      <AsciiText text={LOGO_TEXT} font="wordmark" color={colors.textBright} />
+      <Box height={2} />
+      <Box height={1}>
+        <Text fg={colors.textDim}>{"The open terminal for modern finance."}</Text>
+      </Box>
+      <Box height={2} />
+      <Box height={1}>
+        <Text fg={colors.textMuted}>{"Let's set things up (~30s)."}</Text>
+      </Box>
+      <Box height={2} />
+
+    </Box>
   );
 }
 
@@ -737,30 +678,30 @@ function ThemeStep({ themeIds, selectedIdx, height }: { themeIds: string[]; sele
   const windowEnd = Math.min(themeIds.length, windowStart + maxVisible);
 
   return (
-    <box flexDirection="column" paddingX={2}>
-      <box height={1}>
-        <text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"Theme"}</text>
-      </box>
-      <box height={1} />
-      <box height={1} flexDirection="row">
-        <text fg={colors.textDim}>{"Change it later from the command bar with "}</text>
-        <text fg={colors.text} attributes={TextAttributes.BOLD}>{"TH"}</text>
-      </box>
-      <box height={1} />
-      <box height={1}>
-        <text fg={colors.positive}>{" \u2588\u2588 "}</text>
-        <text fg={colors.negative}>{" \u2588\u2588 "}</text>
-        <text fg={colors.text}>{" \u2588\u2588 "}</text>
-        <text fg={colors.textBright}>{" \u2588\u2588 "}</text>
-        <text fg={colors.borderFocused}>{" \u2588\u2588 "}</text>
-        <text fg={colors.textDim}>{" \u2588\u2588 "}</text>
-      </box>
-      <box height={1} />
+    <Box flexDirection="column" paddingX={2}>
+      <Box height={1}>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"Theme"}</Text>
+      </Box>
+      <Box height={1} />
+      <Box height={1} flexDirection="row">
+        <Text fg={colors.textDim}>{"Change it later from the command bar with "}</Text>
+        <Text fg={colors.text} attributes={TextAttributes.BOLD}>{"TH"}</Text>
+      </Box>
+      <Box height={1} />
+      <Box height={1}>
+        <Text fg={colors.positive}>{" \u2588\u2588 "}</Text>
+        <Text fg={colors.negative}>{" \u2588\u2588 "}</Text>
+        <Text fg={colors.text}>{" \u2588\u2588 "}</Text>
+        <Text fg={colors.textBright}>{" \u2588\u2588 "}</Text>
+        <Text fg={colors.borderFocused}>{" \u2588\u2588 "}</Text>
+        <Text fg={colors.textDim}>{" \u2588\u2588 "}</Text>
+      </Box>
+      <Box height={1} />
 
       {windowStart > 0 && (
-        <box height={1}>
-          <text fg={colors.textMuted}>{"\u2191 more"}</text>
-        </box>
+        <Box height={1}>
+          <Text fg={colors.textMuted}>{"\u2191 more"}</Text>
+        </Box>
       )}
 
       {themeIds.slice(windowStart, windowEnd).map((id, i) => {
@@ -768,28 +709,28 @@ function ThemeStep({ themeIds, selectedIdx, height }: { themeIds: string[]; sele
         const globalIdx = windowStart + i;
         const isSel = globalIdx === selectedIdx;
         return (
-          <box key={id} height={1} backgroundColor={isSel ? colors.selected : colors.bg}>
-            <text fg={isSel ? colors.selectedText : colors.textDim}>
+          <Box key={id} height={1} backgroundColor={isSel ? colors.selected : colors.bg}>
+            <Text fg={isSel ? colors.selectedText : colors.textDim}>
               {isSel ? "\u25b8 " : "  "}
-            </text>
-            <text fg={isSel ? colors.text : colors.textDim} attributes={isSel ? TextAttributes.BOLD : 0}>
+            </Text>
+            <Text fg={isSel ? colors.text : colors.textDim} attributes={isSel ? TextAttributes.BOLD : 0}>
               {theme.name}
-            </text>
-          </box>
+            </Text>
+          </Box>
         );
       })}
 
       {windowEnd < themeIds.length && (
-        <box height={1}>
-          <text fg={colors.textMuted}>{"\u2193 more"}</text>
-        </box>
+        <Box height={1}>
+          <Text fg={colors.textMuted}>{"\u2193 more"}</Text>
+        </Box>
       )}
 
-      <box height={1} />
-      <box height={1}>
-        <text fg={colors.textMuted}>{"Use \u2191\u2193 to browse"}</text>
-      </box>
-    </box>
+      <Box height={1} />
+      <Box height={1}>
+        <Text fg={colors.textMuted}>{"Use \u2191\u2193 to browse"}</Text>
+      </Box>
+    </Box>
   );
 }
 
@@ -797,6 +738,7 @@ function PortfolioStep({
   sub,
   choices,
   optionIdx,
+  onOptionSelect,
   portfolioName,
   onNameChange,
   selectedBrokerId,
@@ -811,8 +753,9 @@ function PortfolioStep({
   brokerSyncError,
 }: {
   sub: PortfolioSub;
-  choices: Array<{ id: string; label: string; desc: string }>;
+  choices: ListViewItem[];
   optionIdx: number;
+  onOptionSelect: (idx: number) => void;
   portfolioName: string;
   onNameChange: (n: string) => void;
   selectedBrokerId: string | null;
@@ -828,62 +771,50 @@ function PortfolioStep({
 }) {
   if (sub === "choose") {
     return (
-      <box flexDirection="column" paddingX={2}>
-        <box height={1}>
-          <text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"Set up a portfolio"}</text>
-        </box>
-        <box height={1} />
-        <box height={1}>
-          <text fg={colors.textDim}>{"How would you like to get started?"}</text>
-        </box>
-        <box height={2} />
-
-        {choices.map((opt, i) => {
-          const isSel = i === optionIdx;
-          return (
-            <box key={opt.id} height={1} backgroundColor={isSel ? colors.selected : colors.bg}>
-              <text fg={isSel ? colors.selectedText : colors.textDim}>
-                {isSel ? "\u25b8 " : "  "}
-              </text>
-              <text fg={isSel ? colors.text : colors.textDim} attributes={isSel ? TextAttributes.BOLD : 0}>
-                {opt.label}
-              </text>
-            </box>
-          );
-        })}
-
-        <box height={1} />
-        <box height={1}>
-          <text fg={colors.textDim}>{choices[optionIdx]?.desc}</text>
-        </box>
-
-        <box height={1} />
-        <box height={1}>
-          <text fg={colors.textDim}>{"Edits later from the command bar."}</text>
-        </box>
-        <box height={1} />
-        <box height={1}>
-          <text fg={colors.textMuted}>{"Use \u2191\u2193 to choose"}</text>
-        </box>
-      </box>
+      <Box flexDirection="column" paddingX={2}>
+        <Box height={1}>
+          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"Set up a portfolio"}</Text>
+        </Box>
+        <Box height={1} />
+        <Box height={1}>
+          <Text fg={colors.textDim}>{"How would you like to get started?"}</Text>
+        </Box>
+        <Box height={2} />
+
+        <ListView
+          items={choices}
+          selectedIndex={optionIdx}
+          onSelect={onOptionSelect}
+          showSelectedDescription
+        />
+
+        <Box height={1} />
+        <Box height={1}>
+          <Text fg={colors.textDim}>{"Edits later from the command bar."}</Text>
+        </Box>
+        <Box height={1} />
+        <Box height={1}>
+          <Text fg={colors.textMuted}>{"Use \u2191\u2193 to choose"}</Text>
+        </Box>
+      </Box>
     );
   }
 
   if (sub === "manual-name") {
     return (
-      <box flexDirection="column" paddingX={2}>
-        <box height={1}>
-          <text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"Name your portfolio"}</text>
-        </box>
-        <box height={1} />
-        <box height={1}>
-          <text fg={colors.textDim}>{"Create watchlists later."}</text>
-        </box>
-        <box height={2} />
-        <box height={1}>
-          <text fg={colors.text}>{"Portfolio name:"}</text>
-        </box>
-        <box height={1}>
+      <Box flexDirection="column" paddingX={2}>
+        <Box height={1}>
+          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"Name your portfolio"}</Text>
+        </Box>
+        <Box height={1} />
+        <Box height={1}>
+          <Text fg={colors.textDim}>{"Create watchlists later."}</Text>
+        </Box>
+        <Box height={2} />
+        <Box height={1}>
+          <Text fg={colors.text}>{"Portfolio name:"}</Text>
+        </Box>
+        <Box height={1}>
           {editing ? (
             <TextField
               inputRef={inputRef}
@@ -897,23 +828,23 @@ function PortfolioStep({
               onSubmit={() => {}}
             />
           ) : (
-            <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+            <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
               {`> ${portfolioName}`}
-            </text>
+            </Text>
           )}
-        </box>
-        <box height={2} />
-        <box height={1} flexDirection="row">
-          <text fg={colors.textDim}>{"After setup, use the command bar ("}</text>
-          <text fg={colors.text}>{"Ctrl+P"}</text>
-          <text fg={colors.textDim}>{") and"}</text>
-        </box>
-        <box height={1} flexDirection="row">
-          <text fg={colors.textDim}>{"type "}</text>
-          <text fg={colors.text} attributes={TextAttributes.BOLD}>{"T AAPL"}</text>
-          <text fg={colors.textDim}>{" to search and add any stock or ETF."}</text>
-        </box>
-      </box>
+        </Box>
+        <Box height={2} />
+        <Box height={1} flexDirection="row">
+          <Text fg={colors.textDim}>{"After setup, use the command bar ("}</Text>
+          <Text fg={colors.text}>{"Ctrl+P"}</Text>
+          <Text fg={colors.textDim}>{") and"}</Text>
+        </Box>
+        <Box height={1} flexDirection="row">
+          <Text fg={colors.textDim}>{"type "}</Text>
+          <Text fg={colors.text} attributes={TextAttributes.BOLD}>{"DES AAPL"}</Text>
+          <Text fg={colors.textDim}>{" to open security details for a stock or ETF."}</Text>
+        </Box>
+      </Box>
     );
   }
 
@@ -923,110 +854,110 @@ function PortfolioStep({
     const isGateway = connectionMode === "gateway";
 
     return (
-      <box flexDirection="column" paddingX={2}>
-        <box height={1}>
-          <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+      <Box flexDirection="column" paddingX={2}>
+        <Box height={1}>
+          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
             {`Setup Guide — ${brokerLabel}`}
-          </text>
-        </box>
-        <box height={1} />
+          </Text>
+        </Box>
+        <Box height={1} />
 
         {selectedBrokerId === "ibkr" && !isGateway && (
           <>
-            <box height={1}>
-              <text fg={colors.textDim}>{"You'll need 2 things from IBKR Account Management:"}</text>
-            </box>
-            <box height={2} />
-            <box height={1}>
-              <text fg={colors.textDim}>{"1. Go to "}<u><span fg={colors.text}>{"Reports > Flex Queries"}</span></u></text>
-            </box>
-            <box height={1}>
-              <text fg={colors.textDim}>{"2. Create a Flex Query that includes positions data"}</text>
-            </box>
-            <box height={1}>
-              <text fg={colors.textDim}>{"3. Note the "}<strong><span fg={colors.text}>{"Query ID"}</span></strong>{" (numeric)"}</text>
-            </box>
-            <box height={1}>
-              <text fg={colors.textDim}>{"4. Under "}<u><span fg={colors.text}>{"Reports > Settings"}</span></u>{", generate a "}<strong><span fg={colors.text}>{"Flex Web Service Token"}</span></strong></text>
-            </box>
-            <box height={2} />
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"You'll need 2 things from IBKR Account Management:"}</Text>
+            </Box>
+            <Box height={2} />
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"1. Go to "}<Underline><Span fg={colors.text}>{"Reports > Flex Queries"}</Span></Underline></Text>
+            </Box>
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"2. Create a Flex Query that includes positions data"}</Text>
+            </Box>
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"3. Note the "}<Strong><Span fg={colors.text}>{"Query ID"}</Span></Strong>{" (numeric)"}</Text>
+            </Box>
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"4. Under "}<Underline><Span fg={colors.text}>{"Reports > Settings"}</Span></Underline>{", generate a "}<Strong><Span fg={colors.text}>{"Flex Web Service Token"}</Span></Strong></Text>
+            </Box>
+            <Box height={2} />
             <ExternalLink url="https://www.ibkrguides.com/orgportal/performanceandstatements/flex.htm" />
           </>
         )}
 
         {selectedBrokerId === "ibkr" && isGateway && (
           <>
-            <box height={1}>
-              <text fg={colors.textDim}>{"You'll need IB Gateway or TWS running locally:"}</text>
-            </box>
-            <box height={2} />
-            <box height={1}>
-              <text fg={colors.textDim}>{"1. Download and install "}<strong><span fg={colors.text}>{"IB Gateway"}</span></strong>{" (or use TWS)"}</text>
-            </box>
-            <box height={1}>
-              <text fg={colors.textDim}>{"2. Log in with your IBKR credentials"}</text>
-            </box>
-            <box height={1}>
-              <text fg={colors.textDim}>{"3. In "}<u><span fg={colors.text}>{"Configuration > API > Settings"}</span></u>{":"}</text>
-            </box>
-            <box height={1}>
-              <text fg={colors.textDim}>{"   Enable \"ActiveX and Socket Clients\""}</text>
-            </box>
-            <box height={1}>
-              <text fg={colors.textDim}>{"   Gloomberb can auto-detect local API ports (4001, 4002, 7496, 7497)"}</text>
-            </box>
-            <box height={1}>
-              <text fg={colors.textDim}>{"   Use Manual setup only if you need a custom host or exact socket port"}</text>
-            </box>
-            <box height={1}>
-              <text fg={colors.textDim}>{"4. Keep it running while using Gloomberb"}</text>
-            </box>
-            <box height={2} />
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"You'll need IB Gateway or TWS running locally:"}</Text>
+            </Box>
+            <Box height={2} />
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"1. Download and install "}<Strong><Span fg={colors.text}>{"IB Gateway"}</Span></Strong>{" (or use TWS)"}</Text>
+            </Box>
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"2. Log in with your IBKR credentials"}</Text>
+            </Box>
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"3. In "}<Underline><Span fg={colors.text}>{"Configuration > API > Settings"}</Span></Underline>{":"}</Text>
+            </Box>
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"   Enable \"ActiveX and Socket Clients\""}</Text>
+            </Box>
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"   Gloomberb can auto-detect local API ports (4001, 4002, 7496, 7497)"}</Text>
+            </Box>
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"   Use Manual setup only if you need a custom host or exact socket port"}</Text>
+            </Box>
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"4. Keep it running while using Gloomberb"}</Text>
+            </Box>
+            <Box height={2} />
             <ExternalLink url="https://www.interactivebrokers.com/en/trading/ibgateway-stable.php" />
           </>
         )}
 
         {selectedBrokerId !== "ibkr" && (
           <>
-            <box height={1}>
-              <text fg={colors.textDim}>{`You'll need your ${brokerLabel} API credentials.`}</text>
-            </box>
-            <box height={1}>
-              <text fg={colors.textDim}>{"Check your broker's documentation for setup instructions."}</text>
-            </box>
+            <Box height={1}>
+              <Text fg={colors.textDim}>{`You'll need your ${brokerLabel} API credentials.`}</Text>
+            </Box>
+            <Box height={1}>
+              <Text fg={colors.textDim}>{"Check your broker's documentation for setup instructions."}</Text>
+            </Box>
           </>
         )}
 
-        <box height={2} />
+        <Box height={2} />
 
-      </box>
+      </Box>
     );
   }
 
   if (sub === "broker-sync" && selectedBrokerId) {
     const brokerLabel = choices.find((choice) => choice.id === selectedBrokerId)?.label.replace("Connect ", "") ?? selectedBrokerId;
     return (
-      <box flexDirection="column" paddingX={2}>
-        <box height={1}>
-          <text fg={colors.textBright} attributes={TextAttributes.BOLD}>{`Connect ${brokerLabel}`}</text>
-        </box>
-        <box height={1} />
-        <box height={1}>
-          <text fg={brokerSyncing ? colors.text : colors.negative}>
+      <Box flexDirection="column" paddingX={2}>
+        <Box height={1}>
+          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{`Connect ${brokerLabel}`}</Text>
+        </Box>
+        <Box height={1} />
+        <Box height={1}>
+          <Text fg={brokerSyncing ? colors.text : colors.negative}>
             {brokerSyncing
               ? `Connecting to ${brokerLabel} and importing accounts and positions...`
               : brokerSyncError || `Unable to sync ${brokerLabel}.`}
-          </text>
-        </box>
-        <box height={2} />
-        <box height={1}>
-          <text fg={colors.textDim}>
+          </Text>
+        </Box>
+        <Box height={2} />
+        <Box height={1}>
+          <Text fg={colors.textDim}>
             {brokerSyncing
               ? "This happens now so your portfolio is ready before onboarding finishes."
               : "Press Enter to retry, or Backspace to edit the broker settings."}
-          </text>
-        </box>
-      </box>
+          </Text>
+        </Box>
+      </Box>
     );
   }
 
@@ -1036,13 +967,13 @@ function PortfolioStep({
   const values = brokerValues[selectedBrokerId] ?? {};
 
   return (
-    <box flexDirection="column" paddingX={2}>
-      <box height={1}>
-        <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+    <Box flexDirection="column" paddingX={2}>
+      <Box height={1}>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
           {"Connect "}{choices.find((c) => c.id === selectedBrokerId)?.label.replace("Connect ", "") ?? selectedBrokerId}
-        </text>
-      </box>
-      <box height={1} />
+        </Text>
+      </Box>
+      <Box height={1} />
 
       {/* Show completed fields */}
       {brokerFields.map((field, i) => {
@@ -1055,10 +986,10 @@ function PortfolioStep({
             ? field.options?.find((option) => option.value === val)?.label ?? val
             : field.type === "password" ? PASSWORD_MASK_CHAR.repeat(val.length) : val;
           return (
-            <box key={field.key} height={1}>
-              <text fg={colors.positive}>{"\u2713 "}</text>
-              <text fg={colors.text}>{`${field.label}: ${selectedLabel}`}</text>
-            </box>
+            <Box key={field.key} height={1}>
+              <Text fg={colors.positive}>{"\u2713 "}</Text>
+              <Text fg={colors.text}>{`${field.label}: ${selectedLabel}`}</Text>
+            </Box>
           );
         }
 
@@ -1066,15 +997,15 @@ function PortfolioStep({
           const activeSelectValue = field.options?.[brokerSelectIdx]?.value ?? values[field.key] ?? "";
           const effectiveValue = val || field.defaultValue || "";
           return (
-            <box key={field.key} flexDirection="column">
-              {i > 0 && <box height={1} />}
-              <box height={1}>
-                <text fg={colors.text} attributes={TextAttributes.BOLD}>
+            <Box key={field.key} flexDirection="column">
+              {i > 0 && <Box height={1} />}
+              <Box height={1}>
+                <Text fg={colors.text} attributes={TextAttributes.BOLD}>
                   {`Step ${i + 1}: `}
-                </text>
-                <text fg={colors.text}>{field.label}</text>
-              </box>
-              <box height={1}>
+                </Text>
+                <Text fg={colors.text}>{field.label}</Text>
+              </Box>
+              <Box height={1}>
                 {field.type !== "select" && (editing ? (
                   <TextField
                     inputRef={inputRef}
@@ -1089,142 +1020,87 @@ function PortfolioStep({
                     onSubmit={() => {}}
                   />
                 ) : (
-                  <text fg={effectiveValue ? colors.positive : colors.textMuted}>
+                  <Text fg={effectiveValue ? colors.positive : colors.textMuted}>
                     {effectiveValue
                       ? `\u2713 ${field.label}: ${field.type === "password" ? PASSWORD_MASK_CHAR.repeat(effectiveValue.length) : effectiveValue}`
                       : "Press enter to type..."}
-                  </text>
+                  </Text>
                 ))}
-              </box>
+              </Box>
               {field.type !== "select" && !val && field.defaultValue && (
-                <box height={1}>
-                  <text fg={colors.textMuted}>{`Press enter to use ${field.defaultValue}`}</text>
-                </box>
+                <Box height={1}>
+                  <Text fg={colors.textMuted}>{`Press enter to use ${field.defaultValue}`}</Text>
+                </Box>
               )}
               {field.type === "select" && (
-                <box flexDirection="column">
+                <Box flexDirection="column">
                   {(field.options ?? []).map((option, optionIdx) => {
                     const selected = optionIdx === brokerSelectIdx;
                     return (
-                      <box key={option.value} flexDirection="column" backgroundColor={selected ? colors.selected : colors.bg}>
-                        <box height={1}>
-                          <text fg={selected ? colors.selectedText : colors.textDim}>{selected ? "\u25b8 " : "  "}</text>
-                          <text
+                      <Box key={option.value} flexDirection="column" backgroundColor={selected ? colors.selected : colors.bg}>
+                        <Box height={1}>
+                          <Text fg={selected ? colors.selectedText : colors.textDim}>{selected ? "\u25b8 " : "  "}</Text>
+                          <Text
                             fg={selected ? colors.text : colors.textDim}
                             attributes={selected ? TextAttributes.BOLD : 0}
                           >
                             {option.label}
-                          </text>
-                        </box>
+                          </Text>
+                        </Box>
                         {option.description && (
-                          <box height={1}>
-                            <text fg={colors.textMuted}>{`  ${option.description}`}</text>
-                          </box>
+                          <Box height={1}>
+                            <Text fg={colors.textMuted}>{`  ${option.description}`}</Text>
+                          </Box>
                         )}
-                      </box>
+                      </Box>
                     );
                   })}
-                </box>
+                </Box>
               )}
               {field.type === "select" && (
-                <box height={1}>
-                  <text fg={colors.textMuted}>
+                <Box height={1}>
+                  <Text fg={colors.textMuted}>
                     {activeSelectValue ? `Selected: ${field.options?.find((option) => option.value === activeSelectValue)?.label ?? activeSelectValue}` : "Use \u2191\u2193 to choose"}
-                  </text>
-                </box>
+                  </Text>
+                </Box>
               )}
-            </box>
+            </Box>
           );
         }
 
         return null;
       })}
 
-      <box height={2} />
-      <box height={1}>
-        <text fg={colors.textDim}>{"Credentials are saved locally."}</text>
-      </box>
-      <box height={1} />
-      <box height={1}>
-        <text fg={colors.textMuted}>
+      <Box height={2} />
+      <Box height={1}>
+        <Text fg={colors.textDim}>{"Credentials are saved locally."}</Text>
+      </Box>
+      <Box height={1} />
+      <Box height={1}>
+        <Text fg={colors.textMuted}>
           {`Field ${brokerFieldIdx + 1} of ${brokerFields.length}`}
-        </text>
-      </box>
-    </box>
-  );
-}
-
-function PluginsStep({
-  plugins,
-  disabledPlugins,
-  selectedIdx,
-  onToggle,
-  onSelect,
-}: {
-  plugins: { id: string; name: string; description: string }[];
-  disabledPlugins: string[];
-  selectedIdx: number;
-  onToggle: (id: string) => void;
-  onSelect: (idx: number) => void;
-}) {
-  const items: ToggleListItem[] = plugins.map((p) => ({
-    id: p.id,
-    label: p.name,
-    enabled: !disabledPlugins.includes(p.id),
-    description: p.description,
-  }));
-
-  return (
-    <box flexDirection="column" paddingX={2}>
-      <box height={1}>
-        <text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"Select plugins to enable"}</text>
-      </box>
-
-      <box height={2} />
-
-      <ToggleList
-        items={items}
-        selectedIdx={selectedIdx}
-        onToggle={onToggle}
-        onSelect={onSelect}
-      />
-
-      <box height={1} />
-      <box height={1}>
-        <text fg={colors.textMuted}>{"Use \u2191\u2193 to navigate \u00b7 space to toggle"}</text>
-      </box>
-      <box height={1} />
-      <box height={1}>
-        <text fg={colors.textDim}>{"Toggle plugins anytime from the command bar"}</text>
-      </box>
-      <box height={1} flexDirection="row">
-        <text fg={colors.textDim}>{"with the "}</text>
-        <text fg={colors.text} attributes={TextAttributes.BOLD}>{"PL"}</text>
-        <text fg={colors.textDim}>{" prefix."}</text>
-      </box>
-    </box>
+        </Text>
+      </Box>
+    </Box>
   );
 }
 
-function ShortcutsStep({
-  pluginRegistry,
-  disabledPlugins,
-}: {
-  pluginRegistry: PluginRegistry;
-  disabledPlugins: string[];
-}) {
+function ShortcutsStep({ pluginRegistry }: { pluginRegistry: PluginRegistry }) {
+  const uiHost = useUiHost();
+  const shortcutPlatform = detectShortcutPlatform();
+  const shortcutDisplayMode = getShortcutDisplayMode(uiHost.kind);
+  const platformShortcut = (keys: string | readonly string[]) => formatPrimaryShortcut(keys, shortcutPlatform, shortcutDisplayMode);
   const keyboardShortcuts = [
     { key: "Ctrl+P / `", desc: "Open the command bar" },
     { key: "Tab", desc: "Switch between panels" },
-    { key: "Ctrl+W", desc: "Close the current window" },
+    { key: platformShortcut("W"), desc: "Close the focused pane" },
+    { key: platformShortcut(["Shift", "D"]), desc: "Dock or float the focused pane" },
     { key: "q", desc: "Quit" },
   ];
 
-  const disabledSet = useMemo(() => new Set(disabledPlugins), [disabledPlugins]);
-
   const commandPrefixes = useMemo(() => {
     const builtIn = [
-      { key: "T AAPL", desc: "Search and add any ticker" },
+      { key: "DES AAPL", desc: "Open security details" },
       { key: "TH", desc: "Switch theme" },
       { key: "PL", desc: "Toggle plugins" },
       { key: "PS", desc: "Edit the current window settings" },
@@ -1236,8 +1112,6 @@ function ShortcutsStep({
 
     for (const [, template] of pluginRegistry.paneTemplates) {
       if (!template.shortcut) continue;
-      const pluginId = pluginRegistry.getPaneTemplatePluginId(template.id);
-      if (pluginId && disabledSet.has(pluginId)) continue;
       if (builtInKeys.has(template.shortcut.prefix)) continue;
       const label = template.shortcut.argPlaceholder
         ? `${template.shortcut.prefix} <${template.shortcut.argPlaceholder}>`
@@ -1247,46 +1121,46 @@ function ShortcutsStep({
 
     pluginPrefixes.sort((a, b) => a.key.localeCompare(b.key));
     return [...builtIn, ...pluginPrefixes];
-  }, [pluginRegistry, disabledSet]);
+  }, [pluginRegistry]);
 
-  const COL = 14;
+  const COL = 20;
 
   return (
-    <box flexDirection="column" paddingX={2}>
-      <box height={1}>
-        <text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"Useful shortcuts"}</text>
-      </box>
-      <box height={1} />
+    <Box flexDirection="column" paddingX={2}>
+      <Box height={1}>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"After launch shortcuts"}</Text>
+      </Box>
+      <Box height={1} />
 
       {keyboardShortcuts.map((s) => (
-        <box key={s.key} height={1} flexDirection="row">
-          <text fg={colors.text} attributes={TextAttributes.BOLD}>{s.key.padEnd(COL)}</text>
-          <text fg={colors.textDim}>{s.desc}</text>
-        </box>
+        <Box key={s.key} height={1} flexDirection="row">
+          <Text fg={colors.text} attributes={TextAttributes.BOLD}>{s.key.padEnd(COL)}</Text>
+          <Text fg={colors.textDim}>{s.desc}</Text>
+        </Box>
       ))}
 
-      <box height={2} />
-      <box height={1}>
-        <text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"Command-bar prefixes"}</text>
-      </box>
-      <box height={1} />
-      <box height={1}>
-        <text fg={colors.textDim}>{"Type these in the command bar ("}<span fg={colors.text}><strong>{"Ctrl+P"}</strong></span>{" or "}<span fg={colors.text}><strong>{"`"}</strong></span>{"):"}</text>
-      </box>
-      <box height={1} />
+      <Box height={2} />
+      <Box height={1}>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"Command-bar prefixes"}</Text>
+      </Box>
+      <Box height={1} />
+      <Box height={1}>
+        <Text fg={colors.textDim}>{"Type these in the command bar ("}<Span fg={colors.text}><Strong>{"Ctrl+P"}</Strong></Span>{" or "}<Span fg={colors.text}><Strong>{"`"}</Strong></Span>{"):"}</Text>
+      </Box>
+      <Box height={1} />
 
       {commandPrefixes.map((s) => (
-        <box key={s.key} height={1} flexDirection="row">
-          <text fg={colors.text} attributes={TextAttributes.BOLD}>{s.key.padEnd(COL)}</text>
-          <text fg={colors.textDim}>{s.desc}</text>
-        </box>
+        <Box key={s.key} height={1} flexDirection="row">
+          <Text fg={colors.text} attributes={TextAttributes.BOLD}>{s.key.padEnd(COL)}</Text>
+          <Text fg={colors.textDim}>{s.desc}</Text>
+        </Box>
       ))}
 
-      <box height={2} />
-      <box height={1}>
-        <text fg={colors.textDim}>{"Everything is searchable, just type what you want."}</text>
-      </box>
-    </box>
+      <Box height={2} />
+      <Box height={1}>
+        <Text fg={colors.textDim}>{"Everything is searchable, just type what you want."}</Text>
+      </Box>
+    </Box>
   );
 }
 
@@ -1307,58 +1181,58 @@ function ReadyStep({
   const positionLabel = positionsImported === 1 ? "position" : "positions";
 
   return (
-    <box flexDirection="column" paddingX={2}>
-      <box height={2} />
-      <box height={1}>
-        <text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"You're all set"}</text>
-      </box>
-      <box height={2} />
-      <box height={1}>
-        <text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713"}</text>
-        <text fg={colors.text}>{" Theme configured"}</text>
-      </box>
-      <box height={1}>
-        <text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713"}</text>
-        <text fg={colors.text}>
+    <Box flexDirection="column" paddingX={2}>
+      <Box height={2} />
+      <Box height={1}>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"You're all set"}</Text>
+      </Box>
+      <Box height={2} />
+      <Box height={1}>
+        <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713"}</Text>
+        <Text fg={colors.text}>{" Theme configured"}</Text>
+      </Box>
+      <Box height={1}>
+        <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713"}</Text>
+        <Text fg={colors.text}>
           {brokerName
             ? ` ${brokerName} connected. Imported ${positionsImported} ${positionLabel}`
             : ` Portfolio "${portfolioName}" created`}
-        </text>
-      </box>
-      <box height={1}>
-        <text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713"}</text>
-        <text fg={colors.text}>{" Plugins selected"}</text>
-      </box>
-      <box height={2} />
+        </Text>
+      </Box>
+      <Box height={1}>
+        <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713"}</Text>
+        <Text fg={colors.text}>{" Plugins enabled"}</Text>
+      </Box>
+      <Box height={2} />
       {brokerName ? (
-        <box height={1}>
-          <text fg={isFinishing ? colors.text : colors.textDim}>
+        <Box height={1}>
+          <Text fg={isFinishing ? colors.text : colors.textDim}>
             {isFinishing
               ? "Launching Gloomberb..."
               : positionsImported > 0
               ? "Your broker portfolio is ready and will open directly after launch."
               : "Broker sync finished. If you expected holdings, check the selected account or connection mode."}
-          </text>
-        </box>
+          </Text>
+        </Box>
       ) : (
-        <box height={1}>
-          <text fg={colors.textDim}>{"Search for broker names in the command bar to connect."}</text>
-        </box>
+        <Box height={1}>
+          <Text fg={colors.textDim}>{"Search for broker names in the command bar to connect."}</Text>
+        </Box>
       )}
       {error && (
         <>
-          <box height={1} />
-          <box height={2}>
-            <text fg={colors.negative}>{error}</text>
-          </box>
+          <Box height={1} />
+          <Box height={2}>
+            <Text fg={colors.negative}>{error}</Text>
+          </Box>
         </>
       )}
-      <box height={2} />
-      <box height={1} flexDirection="row">
-        <text fg={colors.textDim}>{"Data stored in "}</text>
-        <text fg={colors.text}>{"~/gloomberb/"}</text>
-      </box>
-      <box height={1} />
-    </box>
+      <Box height={2} />
+      <Box height={1} flexDirection="row">
+        <Text fg={colors.textDim}>{"Data stored in "}</Text>
+        <Text fg={colors.text}>{"~/gloomberb/"}</Text>
+      </Box>
+      <Box height={1} />
+    </Box>
   );
 }