@gloom-sh/terminal 0.19.2 → 0.19.3

package/src/components/onboarding/use-onboarding-progress.ts

@@ -10,7 +10,13 @@ import type { PluginRegistry } from "../../plugins/registry";
 import { resolvePlanAccess } from "../../api-client/plan-access";
 import type { PortfolioSub } from "./onboarding-steps";
 import type { useOnboardingPositions } from "./wizard-positions";
-import { applyFirstRunLayout, buildFirstRunLayout, planFirstRunWatchlist } from "./first-run-workspace";
+import {
+  applyFirstRunLayout,
+  buildFirstRunLayout,
+  onboardingDeskLayoutId,
+  planFirstRunWatchlist,
+  setupDeskPicks,
+} from "./first-run-workspace";
 import { buildDesk, getDesk, isDeskKey, isDeskStock, pickDeskCompany, type DeskKey } from "../../layout/desks";
 import { debugLog } from "../../utils/debug-log";
 import {
@@ -92,15 +98,18 @@ export function useOnboardingWorkspace({
   selectedBrokerId: string | null;
   setPortfolioSub: Dispatch<SetStateAction<PortfolioSub>>;
 }) {
-  const [chosenDesks, setChosenDesks] = useState<DeskKey[]>([]);
+  // Run again, it starts with the desks it made ticked.
+  const [chosenDesks, setChosenDesks] = useState<DeskKey[]>(() => setupDeskPicks(stateRef.current.config));
   const [deskCursor, setDeskCursor] = useState(0);
   const [buildingDesks, setBuildingDesks] = useState(false);
   const buildingDesksRef = useRef(false);
 
   /**
    * Seeds the watchlist and swaps Home for the first-run workspace built
-   * around `symbol`, with the picked desks as tabs right after it. The config
-   * comes back for the caller to persist with its own progress patch.
+   * around `symbol`, with the picked desks as tabs right after it. Run again,
+   * it replaces the layouts it made before instead of adding copies, and
+   * from Settings it leaves an existing watchlist alone. The config comes
+   * back for the caller to persist with its own progress patch.
    */
   const buildFirstRunWorkspace = useCallback(async (
     baseConfig: AppConfig,
@@ -109,12 +118,17 @@ export function useOnboardingWorkspace({
     desks: readonly DeskKey[],
   ): Promise<AppConfig> => {
     let config = baseConfig;
+    const rerun = getOnboardingProgress(baseConfig).rerun === true;
     let watchlistId = config.watchlists[0]?.id;
+    // A run from Settings leaves a watchlist the user has as it is.
+    const seedWatchlist = !rerun || !watchlistId;
     if (!watchlistId) {
       watchlistId = "watchlist";
       config = { ...config, watchlists: [{ id: watchlistId, name: "Watchlist" }] };
     }
-    const plan = planFirstRunWatchlist(stateRef.current.tickers, watchlistId, portfolioId);
+    const plan = seedWatchlist
+      ? planFirstRunWatchlist(stateRef.current.tickers, watchlistId, portfolioId)
+      : { create: [], update: [] };
     for (const metadata of plan.create) {
       try {
         const ticker = await pluginRegistry.tickerRepository.createTicker(metadata);
@@ -138,7 +152,7 @@ export function useOnboardingWorkspace({
       watchlistId,
       hasPane: (paneId) => pluginRegistry.panes?.has(paneId) ?? false,
     });
-    const workspace = applyFirstRunLayout(config, home);
+    const workspace = applyFirstRunLayout(config, home, [], { rerun });
     if (desks.length === 0) return workspace;
     const { tickers, financials } = stateRef.current;
     const held = [...tickers.values()]
@@ -150,13 +164,15 @@ export function useOnboardingWorkspace({
     const pro = resolvePlanAccess(apiClient.getCurrentUser()).hasProAccess;
     // A desk that fails to build is left out; it never holds up the first run.
     const deskTabs = await Promise.all(desks.map((key) => (
-      buildDesk(getDesk(key), { catalog: pluginRegistry, config: workspace, company, pro }).catch((error) => {
-        onboardingLog.error("Desk build failed", { desk: key, error: String(error) });
-        return null;
-      })
+      buildDesk(getDesk(key), { catalog: pluginRegistry, config: workspace, company, pro }).then(
+        (tab) => (tab ? { ...tab, id: onboardingDeskLayoutId(key) } : null),
+        (error) => {
+          onboardingLog.error("Desk build failed", { desk: key, error: String(error) });
+          return null;
+        },
+      )
     )));
-    const tabs = deskTabs.filter((tab) => tab !== null);
-    return { ...workspace, layouts: [workspace.layouts[0]!, ...tabs, ...workspace.layouts.slice(1)] };
+    return applyFirstRunLayout(config, home, deskTabs.filter((tab) => tab !== null), { rerun });
   }, [dispatch, pluginRegistry, stateRef]);
 
   const commitWorkspaceProgress = useCallback(async (
@@ -187,7 +203,7 @@ export function useOnboardingWorkspace({
   }, [positions, saveProgressInBackground]);
 
   /**
-   * Leaves "What do you trade?": builds the workspace with the picked desks as
+   * Leaves "What do you trade most?": builds the workspace with the picked desks as
    * tabs (none when skipped, which is today's workspace) and moves on.
    */
   const finishDesks = useCallback((desks: readonly DeskKey[]) => {
@@ -270,7 +286,8 @@ export function useOnboardingCompletion({
     setPersistenceError(null);
     try {
       await progressSaveQueueRef.current.catch(() => {});
-      const desks = getOnboardingProgress(stateRef.current.config).desks?.filter(isDeskKey);
+      const { desks: picked, rerun } = getOnboardingProgress(stateRef.current.config);
+      const desks = picked?.filter(isDeskKey);
       const nextConfig: AppConfig = {
         ...stateRef.current.config,
         onboardingComplete: true,
@@ -282,7 +299,8 @@ export function useOnboardingCompletion({
         complete: true,
         progress: undefined,
       });
-      recordResearchActivity(skipped ? "onboarding_skipped" : "onboarding_completed", undefined, undefined, { desks });
+      // The funnel counts first runs; a run from Settings is not one.
+      if (!rerun) recordResearchActivity(skipped ? "onboarding_skipped" : "onboarding_completed", undefined, undefined, { desks });
       await Promise.resolve(onComplete(nextConfig));
     } catch (error) {
       setPersistenceError(error instanceof Error ? error.message : String(error));

package/src/components/onboarding/use-onboarding-upgrade.ts

@@ -6,14 +6,12 @@ import { chatController } from "../../plugins/builtin/chat/controller";
 import type { CloudBillingInterval } from "../../account/billing";
 import { loadUpgradeOffer, type UpgradeOffer } from "../../account/upgrade-dialog";
 import { useCloudUpgradeAction } from "../../plugins/builtin/shared/cloud-upgrade";
-import { useUpgradePersonalization } from "../../account/upgrade-personalization";
 import { usePlanAccess } from "../../api-client/plan-access";
 
 export function useOnboardingUpgrade({
-  stage, progress, saveProgressInBackground, persistProgress, shown,
+  stage, progress, saveProgressInBackground, persistProgress,
 }: {
   stage: OnboardingStage;
-  shown: boolean;
   progress: OnboardingProgress;
   saveProgressInBackground: (patch: Partial<OnboardingProgress> & Pick<OnboardingProgress, "stage">, baseConfig?: AppConfig | undefined) => void;
   persistProgress: (patch: Partial<OnboardingProgress> & Pick<OnboardingProgress, "stage">, baseConfig?: AppConfig | undefined) => Promise<AppConfig>;
@@ -25,8 +23,6 @@ export function useOnboardingUpgrade({
   const appActive = useAppActive();
   const planAccess = usePlanAccess();
   const openUpgrade = useCloudUpgradeAction("onboarding-pro");
-  // The step lists the features from its first frame, so that is when it is shown.
-  const personalTickers = useUpgradePersonalization("onboarding-pro", shown && stage === "upgrade");
   // The price and whether this account still has its trial, asked again for
   // whichever account reaches the step.
   const accountId = planAccess.signedIn ? apiClient.getCurrentUser()?.id ?? null : null;
@@ -82,6 +78,6 @@ export function useOnboardingUpgrade({
   }, [progress.accountStatus, saveProgressInBackground]);
 
   return {
-    offer, pricing, billingInterval, setBillingInterval, planAccess, primaryUpgradeAction, continueFree, personalTickers,
+    offer, pricing, billingInterval, setBillingInterval, planAccess, primaryUpgradeAction, continueFree,
   };
 }

package/src/components/onboarding/wizard-model.ts

@@ -19,9 +19,63 @@ const LEGACY_STAGES: Partial<Record<OnboardingStage, OnboardingStage>> = {
 };
 
 export function getOnboardingProgress(config: AppConfig): OnboardingProgress {
-  const progress = config.onboardingProgress ?? { version: 1, stage: "portfolio" };
-  const stage = LEGACY_STAGES[progress.stage];
-  return stage ? { ...progress, stage } : progress;
+  const saved = config.onboardingProgress ?? { version: 1, stage: "portfolio" };
+  const legacy = LEGACY_STAGES[saved.stage];
+  const progress = legacy ? { ...saved, stage: legacy } : saved;
+  // Older builds sent Back from Gloom Cloud to the portfolio after the
+  // workspace was built; such a profile resumes on the workspace.
+  return isOnboardingStageFinished(progress, progress.stage) ? { ...progress, stage: "research" } : progress;
+}
+
+/** Stages the wizard reaches only once the workspace is built. */
+const WORKSPACE_STAGES: ReadonlySet<OnboardingStage> = new Set(["research", "account", "upgrade", "ready"]);
+
+/**
+ * Whether the workspace is built around a holding: the portfolio and desk
+ * steps are finished. Older builds saved no desks, so a later stage with a
+ * holding counts too.
+ */
+export function isOnboardingWorkspaceBuilt(progress: OnboardingProgress): boolean {
+  return !!progress.tickerSymbol && (Array.isArray(progress.desks) || WORKSPACE_STAGES.has(progress.stage));
+}
+
+/**
+ * A step that is done for good: the portfolio and desk steps once the
+ * workspace is built (building twice would add every desk twice), and Pro
+ * for an account that has it. The wizard shows them as done and never asks
+ * them again.
+ */
+function isOnboardingStageFinished(progress: OnboardingProgress, stage: OnboardingStage, pro = false): boolean {
+  if (stage === "upgrade") return pro;
+  return (stage === "portfolio" || stage === "desks") && isOnboardingWorkspaceBuilt(progress);
+}
+
+/**
+ * Where Back (and Esc) goes: the step the user came from, passing over any
+ * that is finished for good (`pro`: the account has Pro). With no way back
+ * recorded (the app restarted on this step), the step before it in the
+ * flow. `visited` is the stages the user came through, oldest first; what
+ * comes back is what is left of it. Null when the step has no way back.
+ */
+export function previousOnboardingStage(
+  progress: OnboardingProgress,
+  visited: readonly OnboardingStage[],
+  { pro = false }: { pro?: boolean } = {},
+): { stage: OnboardingStage; visited: OnboardingStage[] } | null {
+  for (let index = visited.length - 1; index >= 0; index -= 1) {
+    const stage = visited[index]!;
+    if (stage !== progress.stage && !isOnboardingStageFinished(progress, stage, pro)) {
+      return { stage, visited: visited.slice(0, index) };
+    }
+  }
+  const stage: OnboardingStage | null = progress.stage === "account"
+    ? isOnboardingWorkspaceBuilt(progress) ? "research" : "portfolio"
+    : progress.stage === "upgrade"
+      ? "account"
+      : progress.stage === "ready"
+        ? progress.accountStatus === "signed-in" && !pro ? "upgrade" : "account"
+        : null;
+  return stage ? { stage, visited: [] } : null;
 }
 
 export function withOnboardingProgress(

package/src/components/onboarding/wizard-positions.ts

@@ -302,7 +302,7 @@ export function useOnboardingPositions({
         const costBasis = avgCost ?? result.quote?.price;
         if (costBasis === undefined || costBasis === null || !Number.isFinite(costBasis)) {
           setFieldIdx(2);
-          setError(t("No live price yet. Enter the average cost."));
+          setError(t("No price yet. Enter the average cost."));
           return false;
         }
         // A future is entered in contracts, sized by its terms; a cost typed as corn is quoted counts cents.

package/src/components/ui/delayed-mark.tsx

@@ -0,0 +1,56 @@
+import { Box, Text, useUiCapabilities } from "../../ui";
+import { useThemeColors } from "../../theme/theme-context";
+import { tf } from "../../i18n";
+import { displayWidth } from "../../utils/format";
+import { ICON_GLYPHS, Icon } from "./icon";
+
+/** The terminal's form of the mark: the clock and the delay, as the pane footer draws it (`◷15m`). */
+function delayedMarkText(minutes: number): string {
+  return `${ICON_GLYPHS.clock}${minutes}m`;
+}
+
+/** The delay the mark spells out after its clock: `15m`. */
+function delayedMarkDelay(minutes: number): string {
+  return `${minutes}m`;
+}
+
+/**
+ * Cells the mark takes: `◷15m` in the terminal; on the desktop and the web the
+ * clock icon and its gap (12px and 4px, three cells at the narrowest cell) and `15m`.
+ */
+export function delayedMarkWidth(minutes: number, nativePaneChrome: boolean): number {
+  return nativePaneChrome ? 3 + displayWidth(delayedMarkDelay(minutes)) : displayWidth(delayedMarkText(minutes));
+}
+
+/**
+ * The one mark for a price shown late, beside the price: what the pane
+ * footer's clock is for a pane's data (`delayedFooterSegment`), for a price
+ * outside a footer (the header's SPY, the status bar, a quote's headline).
+ * It reads without hovering: a yellow clock and the delay (`15m`) in the dim
+ * tone of the meta text around it on the desktop and the web, `◷15m` in the
+ * terminal, with `15m delayed` in its tooltip. Callers decide when a price is
+ * late with `freeQuoteDelayMinutes` (or `useFreeQuoteDelay`); it draws nothing else.
+ */
+export function DelayedMark({ minutes }: { minutes: number }) {
+  const colors = useThemeColors();
+  const { nativePaneChrome } = useUiCapabilities();
+  const detail = tf("{delay} delayed", { delay: `${minutes}m` });
+  if (!nativePaneChrome) {
+    return <Text fg={colors.warning} flexShrink={0} selectable={false} aria-label={detail}>{delayedMarkText(minutes)}</Text>;
+  }
+  return (
+    <Box
+      role="img"
+      aria-label={detail}
+      title={detail}
+      flexShrink={0}
+      flexDirection="row"
+      alignItems="center"
+      data-gloom-role="delayed-mark"
+      style={{ gap: "var(--gloom-space-xs)" }}
+    >
+      <Icon name="clock" color={colors.warning} />
+      <Text fg={colors.textDim} selectable={false}>{delayedMarkDelay(minutes)}</Text>
+    </Box>
+  );
+}

package/src/components/ui/external-link.tsx

@@ -3,7 +3,7 @@ import { Box, Text } from "../../ui";
 import { TextAttributes } from "../../ui";
 import { tf } from "../../i18n";
 import { useThemeColors } from "../../theme/theme-context";
-import { safeExternalUrl } from "../../utils/external-url";
+import { safeExternalUrl, systemOpenCommand } from "../../utils/external-url";
 import { linkContextMenuItems, useContextMenu, useRendererHost, useUiCapabilities } from "../../ui";
 import type { ContextMenuItem } from "../../types/context-menu";
 import { usePaneMenuItems } from "../layout/pane/footer/registration";
@@ -20,11 +20,8 @@ export function openUrl(rawUrl: string) {
 
   if (typeof Bun !== "undefined" && typeof Bun.spawn === "function") {
     const platform = typeof process !== "undefined" ? process.platform : "linux";
-    const command = platform === "darwin"
-      ? ["open", url]
-      : platform === "win32"
-        ? ["cmd", "/c", "start", "", url]
-        : ["xdg-open", url];
+    const command = systemOpenCommand(url, platform);
+    if (!command) return;
     // Spawning throws when the opener is not installed (no xdg-open on
     // minimal Linux and WSL); a link that does nothing beats a crash.
     try {

package/src/components/ui/icon.tsx

@@ -138,6 +138,11 @@ export interface IconButtonProps {
   size?: number;
   /** Keep the press from also reaching a row or header behind the button. */
   stopPropagation?: boolean;
+  /**
+   * A few characters after the icon, in a muted tone, for a status that must
+   * read without hovering (a delay's `15m`). The label stays the accessible name.
+   */
+  text?: string;
 }
 
 /**
@@ -157,6 +162,7 @@ export function IconButton({
   disabled = false,
   size = 12,
   stopPropagation = true,
+  text,
 }: IconButtonProps) {
   const colors = useThemeColors();
   const label = t(rawLabel);
@@ -182,6 +188,7 @@ export function IconButton({
         disabled={disabled}
         size={size}
         stopPropagation={stopPropagation}
+        text={text}
       />
     );
   }
@@ -201,7 +208,7 @@ export function IconButton({
     >
       {/* Pressed takes the colour the desktop and the terminal pane header give an active toggle. */}
       <Text fg={disabled ? colors.textMuted : color ?? (pressed ? colors.warning : colors.textDim)} selectable={false}>
-        {` ${ICON_GLYPHS[icon]} `}
+        {` ${ICON_GLYPHS[icon]}${text ?? ""} `}
       </Text>
     </Box>
   );

package/src/components/ui/logo-mark.tsx

@@ -23,15 +23,16 @@ const LETTER_STYLE: Record<LogoMarkSize, CSSProperties> = {
 };
 
 export interface LogoMarkProps {
-  /** The logo, an image URL; without one, or when it fails to load, the tile shows `name`'s initial. */
+  /** The logo, an image URL; without one, while it loads and when it fails to load, the tile shows `name`'s initial. */
   src?: string | null;
   /** What the logo stands for, such as a broker. Only its initial is drawn; the label beside it names it. */
   name: string;
   size?: LogoMarkSize;
   /**
-   * Draws the logo on a white plate. Company and coin logos are made for a
-   * light page: a black mark on a clear field (XRP's) would vanish on a dark
-   * theme, while a logo that fills its square covers the plate.
+   * Draws the logo on a white plate once it has loaded, never behind the
+   * initial. Company and coin logos are made for a light page: a black mark
+   * on a clear field (XRP's) would vanish on a dark theme, while a logo that
+   * fills its square covers the plate.
    */
   plate?: boolean;
 }
@@ -59,9 +60,11 @@ export function LogoMark({ src, name, size = "row", plate = false }: LogoMarkPro
       src={src ?? undefined}
       alt=""
       objectFit="cover"
+      fallbackWhileLoading
+      imageBackground={plate ? LOGO_PLATE : undefined}
       aria-hidden="true"
       data-gloom-role="logo-mark"
-      style={{ width: tile.side, height: tile.side, flexShrink: 0, borderRadius: tile.radius, ...(plate ? { background: LOGO_PLATE } : {}) }}
+      style={{ width: tile.side, height: tile.side, flexShrink: 0, borderRadius: tile.radius }}
     >
       <Box width="100%" height="100%" alignItems="center" justifyContent="center" backgroundColor={colors.border}>
         <Text fg={colors.textBright} attributes={TextAttributes.BOLD} style={LETTER_STYLE[size]}>