gloomberb 0.11.0 → 0.11.2

package/src/plugins/builtin/chat/sidebar.tsx

@@ -96,6 +96,47 @@ function ChannelNotificationIcon({
   );
 }
 
+function ProfileIcon({
+  color,
+  onMouseDown,
+}: {
+  color: string;
+  onMouseDown?: (event: any) => void;
+}) {
+  const { nativePaneChrome } = useUiCapabilities();
+
+  if (!nativePaneChrome) {
+    return (
+      <Text fg={color} selectable={false} onMouseDown={onMouseDown}>@</Text>
+    );
+  }
+
+  return (
+    <Span
+      fg={color}
+      onMouseDown={onMouseDown}
+      style={{
+        color,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 16,
+        height: 16,
+      }}
+    >
+      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" aria-hidden="true">
+        <circle cx="12" cy="8.5" r="3.4" stroke="currentColor" strokeWidth="1.8" />
+        <path
+          d="M5.5 19.5a6.5 6.5 0 0 1 13 0"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+        />
+      </svg>
+    </Span>
+  );
+}
+
 export function ChannelSidebar({
   channels,
   channelStates,
@@ -109,9 +150,11 @@ export function ChannelSidebar({
   canManageNotifications,
   canCreateConversation,
   directExpanded,
+  needsProfileSetup = false,
   onSelect,
   onFocusRequest,
   onCreateConversation,
+  onOpenProfile,
   onToggleNotifications,
   onToggleDirectExpanded,
 }: {
@@ -127,9 +170,11 @@ export function ChannelSidebar({
   canManageNotifications: boolean;
   canCreateConversation: boolean;
   directExpanded: boolean;
+  needsProfileSetup?: boolean;
   onSelect?: (channelId: string) => void;
   onFocusRequest?: () => void;
   onCreateConversation?: () => void;
+  onOpenProfile?: () => void;
   onToggleNotifications?: (channelId: string, enabled: boolean) => void;
   onToggleDirectExpanded?: () => void;
 }) {
@@ -240,6 +285,24 @@ export function ChannelSidebar({
               );
             })}
             <Box flexGrow={1} />
+            {needsProfileSetup && (
+              <PaneSidebarRow
+                active={false}
+                ariaLabel={t("Profile")}
+                onSelect={onOpenProfile}
+              >
+                {({ foregroundColor, onMouseDown }) => (
+                  <>
+                    <Text fg={foregroundColor} selectable={false} onMouseDown={onMouseDown}> </Text>
+                    <ProfileIcon color={foregroundColor} onMouseDown={onMouseDown} />
+                    <Text fg={foregroundColor} selectable={false} onMouseDown={onMouseDown}>
+                      {` ${truncateChannelLabel(t("Profile"), Math.max(listWidth - 3, 1))}`}
+                    </Text>
+                    <Box flexGrow={1} onMouseDown={onMouseDown} />
+                  </>
+                )}
+              </PaneSidebarRow>
+            )}
             {loading && focused && (
               <Box height={1} width={listWidth} flexDirection="row">
                 <Text fg={colors.textDim}>{` ${t("syncing")}`}</Text>

package/src/plugins/builtin/chat/test-harness.tsx

@@ -6,7 +6,7 @@ import { MemoryPluginPersistence } from "../../../test-support/plugin-persistenc
 import { createTestPluginRuntime } from "../../../test-support/plugin-runtime";
 import { createDefaultConfig } from "../../../types/config";
 import { Box } from "../../../ui";
-import { apiClient, type ChatChannel, type ChatMessage } from "../../../api-client";
+import { apiClient, type AccountProfile, type ChatChannel, type ChatMessage } from "../../../api-client";
 import { PluginRenderProvider, type PluginRuntimeAccess } from "../../runtime";
 import { setSharedMarketDataForTests, setSharedRegistryForTests } from "../../registry";
 import { ChatContent } from "./content";
@@ -67,6 +67,34 @@ export function installServerChannels(controller: ChatController, channels = TES
 
 export { MemoryPluginPersistence as MemoryPersistence } from "../../../test-support/plugin-persistence";
 
+export function makeAccountProfile(overrides: Partial<AccountProfile> = {}): AccountProfile {
+  return {
+    id: "u1",
+    email: "vince@example.com",
+    emailVerified: true,
+    plan: "pro",
+    username: "vince",
+    name: "Vince",
+    company: "Gloom",
+    title: null,
+    bio: "Made Gloomberb",
+    profilePublic: true,
+    publicEmail: null,
+    xAccount: null,
+    sharedPortfolioId: "broker:ibkr:coldstart",
+    acceptUnknownDms: false,
+    chatEmailNotificationsEnabled: true,
+    portfolioAnalytics: null,
+    syncEnabled: true,
+    weeklyRoundupEnabled: true,
+    positionAlertsEnabled: true,
+    lastSyncAt: null,
+    lastRoundupEmailAt: null,
+    updatedAt: "2026-07-21T22:03:59.832Z",
+    ...overrides,
+  };
+}
+
 export function makeMessage(index: number): ChatMessage {
   return {
     id: `m${index}`,

package/src/plugins/builtin/cloud/auth-actions.tsx

@@ -4,15 +4,19 @@ import { Button } from "../../../components";
 import { usePluginAppActions } from "../../runtime";
 import { colors, hoverBg } from "../../../theme/colors";
 import { t } from "../../../i18n";
+import { requestAuthDialog } from "./auth-dialog";
+import type { AccountMode } from "./auth-model";
 
-function openAuthCommand(
+function openAuth(
   openCommandBar: (query?: string) => void,
-  query: string,
+  mode: AccountMode,
   event?: { preventDefault?: () => void; stopPropagation?: () => void },
 ) {
   event?.preventDefault?.();
   event?.stopPropagation?.();
-  openCommandBar(query);
+  if (!requestAuthDialog({ mode })) {
+    openCommandBar(mode === "login" ? "Log In" : "Sign Up");
+  }
 }
 
 export function InlineAuthActions({ showSignup = true }: { showSignup?: boolean }) {
@@ -25,7 +29,7 @@ export function InlineAuthActions({ showSignup = true }: { showSignup?: boolean
         backgroundColor={hoveredAction === "login" ? hoverBg() : undefined}
         onMouseOver={() => setHoveredAction((current) => (current === "login" ? current : "login"))}
         onMouseOut={() => setHoveredAction((current) => (current === "login" ? null : current))}
-        onMouseDown={(event: any) => openAuthCommand(openCommandBar, "Log In", event)}
+        onMouseDown={(event: any) => openAuth(openCommandBar, "login", event)}
       >
         <Text fg={hoveredAction === "login" ? colors.text : colors.textDim}>{` ${t("Log In")} `}</Text>
       </Box>
@@ -36,7 +40,7 @@ export function InlineAuthActions({ showSignup = true }: { showSignup?: boolean
             backgroundColor={hoveredAction === "signup" ? hoverBg() : undefined}
             onMouseOver={() => setHoveredAction((current) => (current === "signup" ? current : "signup"))}
             onMouseOut={() => setHoveredAction((current) => (current === "signup" ? null : current))}
-            onMouseDown={(event: any) => openAuthCommand(openCommandBar, "Sign Up", event)}
+            onMouseDown={(event: any) => openAuth(openCommandBar, "signup", event)}
           >
             <Text fg={hoveredAction === "signup" ? colors.text : colors.textDim}>{` ${t("Sign Up")} `}</Text>
           </Box>
@@ -49,16 +53,19 @@ export function InlineAuthActions({ showSignup = true }: { showSignup?: boolean
 export function CloudAuthNotice({
   message,
   showSignup = true,
+  needsVerification = false,
 }: {
   message: string;
   showSignup?: boolean;
+  /** Forces the verification branch and uses `message` as its headline. */
+  needsVerification?: boolean;
 }) {
   const { openCommandBar } = usePluginAppActions();
 
-  if (/verification/i.test(message)) {
+  if (needsVerification || /verification/i.test(message)) {
     return (
       <Box flexDirection="column" padding={1} gap={1}>
-        <Text fg={colors.positive}>{t("Verify your email to use Cloud tweets.")}</Text>
+        <Text fg={colors.positive}>{needsVerification ? message : t("Verify your email to use Cloud tweets.")}</Text>
         <Button label={t("Resend Verification Email")} variant="secondary" onPress={() => openCommandBar("Resend Verification Email")} />
       </Box>
     );

package/src/plugins/builtin/cloud/auth-commands.ts

@@ -1,6 +1,7 @@
 import type { GloomPluginContext } from "../../../types/plugin";
 import { apiClient } from "../../../api-client";
 import { chatController } from "../chat/controller";
+import { requestAuthDialog } from "./auth-dialog";
 import { requestDeviceSignInDialog } from "./device-signin-dialog";
 
 export function registerCloudAuthCommands(ctx: GloomPluginContext): void {
@@ -10,7 +11,7 @@ export function registerCloudAuthCommands(ctx: GloomPluginContext): void {
     description: "Sign in by scanning a QR code with the Gloom app",
     keywords: ["login", "sign in", "qr", "scan", "device", "mobile", "phone", "app", "code"],
     category: "config",
-    hidden: () => !!apiClient.getSessionToken(),
+    hidden: () => apiClient.isSignedIn(),
     execute: () => {
       const opened = requestDeviceSignInDialog({
         onSignedIn: () => ctx.showPane("chat"),
@@ -27,24 +28,15 @@ export function registerCloudAuthCommands(ctx: GloomPluginContext): void {
     description: "Log in to your Gloomberb account",
     keywords: ["login", "sign in", "auth", "account"],
     category: "config",
-    wizardLayout: "form",
-    hidden: () => !!apiClient.getSessionToken(),
-    wizard: [
-      { key: "email", label: "Email", type: "text", placeholder: "email@example.com" },
-      { key: "password", label: "Password", type: "password", placeholder: "Your password" },
-      { key: "_validate", label: "Signing in...", type: "info", body: ["Connecting to Gloomberb...", "Logged in successfully!"] },
-    ],
-    execute: async (values) => {
-      if (!values?.email || !values?.password) {
-        throw new Error("Email and password are required");
-      }
-      const user = await apiClient.signIn(values.email, values.password);
-      if (!user.emailVerified) {
-        await apiClient.sendVerification().catch(() => {});
+    hidden: () => apiClient.isSignedIn(),
+    execute: () => {
+      const opened = requestAuthDialog({
+        mode: "login",
+        onSignedIn: () => ctx.showPane("chat"),
+      });
+      if (!opened) {
+        ctx.notify({ body: "Sign-in is not available right now.", type: "error" });
       }
-      chatController.clearSession();
-      await chatController.refreshSession();
-      ctx.showPane("chat");
     },
   });
 
@@ -54,33 +46,15 @@ export function registerCloudAuthCommands(ctx: GloomPluginContext): void {
     description: "Create a Gloomberb account",
     keywords: ["signup", "register", "create account"],
     category: "config",
-    wizardLayout: "form",
-    hidden: () => !!apiClient.getSessionToken(),
-    wizard: [
-      { key: "email", label: "Email", type: "text", placeholder: "email@example.com" },
-      {
-        key: "username",
-        label: "Username",
-        type: "text",
-        placeholder: "3-30 chars, starts with letter",
-        body: ["Choose a username (3-30 characters, starts with a letter, alphanumeric and underscore only)"],
-      },
-      { key: "password", label: "Password", type: "password", placeholder: "Min 8 characters" },
-      { key: "confirmPassword", label: "Confirm Password", type: "password", placeholder: "Re-enter password" },
-      { key: "_validate", label: "Creating account...", type: "info", body: ["Registering with Gloomberb...", "Account created! Welcome to Gloomberb."] },
-    ],
-    execute: async (values) => {
-      if (!values?.email || !values?.username || !values?.password) {
-        throw new Error("All fields are required");
-      }
-      if (values.password !== values.confirmPassword) {
-        throw new Error("Passwords do not match");
+    hidden: () => apiClient.isSignedIn(),
+    execute: () => {
+      const opened = requestAuthDialog({
+        mode: "signup",
+        onSignedIn: () => ctx.showPane("chat"),
+      });
+      if (!opened) {
+        ctx.notify({ body: "Sign-up is not available right now.", type: "error" });
       }
-      await apiClient.signUp(values.email, values.username, values.username, values.password);
-      await apiClient.sendVerification();
-      chatController.clearSession();
-      await chatController.refreshSession();
-      ctx.showPane("chat");
     },
   });
 
@@ -92,7 +66,7 @@ export function registerCloudAuthCommands(ctx: GloomPluginContext): void {
     category: "config",
     hidden: () => {
       const user = chatController.getSnapshot().user;
-      return !apiClient.getSessionToken() || !user || user.emailVerified;
+      return !apiClient.isSignedIn() || !user || user.emailVerified;
     },
     execute: async () => {
       await apiClient.sendVerification();
@@ -100,10 +74,6 @@ export function registerCloudAuthCommands(ctx: GloomPluginContext): void {
     },
   });
 
-  if (apiClient.getSessionToken()) {
-    void chatController.refreshSession().catch(() => {});
-  }
-
   ctx.registerCommand({
     id: "auth-logout",
     label: "Logout",
@@ -111,7 +81,7 @@ export function registerCloudAuthCommands(ctx: GloomPluginContext): void {
     keywords: ["logout", "sign out"],
     category: "config",
     execute: async () => {
-      if (!apiClient.getSessionToken()) {
+      if (!apiClient.isSignedIn()) {
         ctx.notify({ body: "Not logged in.", type: "error" });
         return;
       }
@@ -128,6 +98,6 @@ export function registerCloudAuthCommands(ctx: GloomPluginContext): void {
         type: "info",
       });
     },
-    hidden: () => !apiClient.getSessionToken(),
+    hidden: () => !apiClient.isSignedIn(),
   });
 }

package/src/plugins/builtin/cloud/auth-dialog.tsx

@@ -0,0 +1,296 @@
+/**
+ * Shared email/password auth dialog plus the request bridge that lets commands
+ * (which run outside the React tree) open it. `AuthDialogHost` is mounted by
+ * the shell for the life of the app and owns the actual dialog, mirroring the
+ * QR sign-in dialog host.
+ */
+import { useCallback, useState } from "react";
+import { apiClient, type AuthUser } from "../../../api-client";
+import { Button, Spinner, TextField } from "../../../components";
+import { DialogFrame } from "../../../components/ui/frame";
+import { t, tf } from "../../../i18n";
+import { useAppLanguage } from "../../../i18n/react";
+import { colors } from "../../../theme/colors";
+import { Box, Text, TextAttributes } from "../../../ui";
+import { useDialog, useDialogKeyboard, type PromptContext } from "../../../ui/dialog";
+import { isPlainKey } from "../../../utils/keyboard";
+import { useEffect, useRef } from "react";
+import {
+  advanceAccountField,
+  classifyAccountError,
+  performEmailAuth,
+  validateAccountEmail,
+  validateAccountPassword,
+  type AccountMode,
+  type AccountSubmitError,
+} from "./auth-model";
+
+const FIELD_WIDTH = 42;
+
+type AuthField = "email" | "password";
+
+type ResetState = "idle" | "sending" | "sent";
+
+export function AuthDialog({
+  initialMode,
+  resolve,
+  dismiss,
+}: PromptContext<AuthUser | undefined> & { initialMode: AccountMode }) {
+  useAppLanguage();
+  const [mode, setMode] = useState<AccountMode>(initialMode);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [activeField, setActiveField] = useState<AuthField>("email");
+  const [showPassword, setShowPassword] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [submitError, setSubmitError] = useState<AccountSubmitError | null>(null);
+  const [resetState, setResetState] = useState<ResetState>("idle");
+  const attemptRef = useRef(0);
+
+  const clearErrors = useCallback(() => {
+    setValidationError(null);
+    setSubmitError(null);
+  }, []);
+
+  useEffect(() => () => {
+    // Unmounting abandons any in-flight attempt so a late response can't set state.
+    attemptRef.current += 1;
+  }, []);
+
+  const switchMode = useCallback((nextMode: AccountMode) => {
+    attemptRef.current += 1;
+    setMode(nextMode);
+    setSubmitting(false);
+    setPassword("");
+    setResetState("idle");
+    clearErrors();
+    setActiveField(email.trim() ? "password" : "email");
+  }, [clearErrors, email]);
+
+  const requestReset = useCallback(() => {
+    if (submitting || resetState === "sending") return;
+    const trimmedEmail = email.trim();
+    const emailError = validateAccountEmail(trimmedEmail);
+    if (emailError) {
+      setActiveField("email");
+      setValidationError(emailError);
+      return;
+    }
+    setResetState("sending");
+    clearErrors();
+    void apiClient.requestPasswordReset(trimmedEmail)
+      .then(() => setResetState("sent"))
+      .catch(() => {
+        setResetState("idle");
+        setSubmitError({ message: t("Could not send the reset email."), kind: "retry" });
+      });
+  }, [clearErrors, email, resetState, submitting]);
+
+  const submit = useCallback(() => {
+    if (submitting) return;
+    const trimmedEmail = email.trim();
+    const emailError = validateAccountEmail(trimmedEmail);
+    if (emailError) {
+      setActiveField("email");
+      setValidationError(emailError);
+      return;
+    }
+    const passwordError = validateAccountPassword(password, mode);
+    if (passwordError) {
+      setActiveField("password");
+      setValidationError(passwordError);
+      return;
+    }
+
+    const attemptId = attemptRef.current + 1;
+    attemptRef.current = attemptId;
+    setSubmitting(true);
+    clearErrors();
+    void (async () => {
+      try {
+        const user = await performEmailAuth(mode, trimmedEmail, password);
+        if (attemptRef.current !== attemptId) return;
+        resolve(user);
+      } catch (error) {
+        if (attemptRef.current !== attemptId) return;
+        setSubmitting(false);
+        setSubmitError(classifyAccountError(error, mode));
+      }
+    })();
+  }, [clearErrors, email, mode, password, resolve, submitting]);
+
+  const submitField = useCallback(() => {
+    const advance = advanceAccountField({
+      mode,
+      email: email.trim(),
+      password,
+      fieldIdx: activeField === "email" ? 0 : 1,
+    });
+    if (advance.action === "invalid") {
+      setValidationError(advance.message);
+      return;
+    }
+    if (advance.action === "next-field") {
+      setValidationError(null);
+      setActiveField("password");
+      return;
+    }
+    submit();
+  }, [activeField, email, mode, password, submit]);
+
+  useDialogKeyboard((event) => {
+    if (event.name === "escape") {
+      event.stopPropagation?.();
+      dismiss();
+      return;
+    }
+    const forward = isPlainKey(event, "tab") || (!event.targetEditable && isPlainKey(event, "down", "j"));
+    const backward = !event.targetEditable && isPlainKey(event, "up", "k");
+    if (forward || backward) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      setActiveField(forward ? "password" : "email");
+    }
+  }, { allowEditable: true });
+
+  const switchToLogin = submitError?.kind === "switch-to-login";
+  const error = validationError ?? submitError?.message ?? null;
+
+  return (
+    <DialogFrame title={mode === "login" ? t("Log in to Gloom Cloud") : t("Create your free Gloom Cloud account")}>
+      <Box flexDirection="column" gap={1}>
+        <TextField
+          label={t("Email")}
+          value={email}
+          placeholder="email@example.com"
+          focused={activeField === "email" && !submitting}
+          width={FIELD_WIDTH}
+          type="email"
+          autoComplete="email"
+          onMouseDown={() => setActiveField("email")}
+          onChange={(value) => {
+            setEmail(value);
+            setResetState("idle");
+            clearErrors();
+          }}
+          onSubmit={submitField}
+        />
+        <Box flexDirection="column">
+          <Box height={1} width={FIELD_WIDTH} flexDirection="row" justifyContent="space-between">
+            <Text
+              fg={activeField === "password" ? colors.textBright : colors.textDim}
+              attributes={activeField === "password" ? TextAttributes.BOLD : 0}
+            >
+              {t("Password")}
+            </Text>
+            <Box onMouseDown={() => setShowPassword((current) => !current)}>
+              <Text fg={colors.textMuted}>{showPassword ? t("hide") : t("show")}</Text>
+            </Box>
+          </Box>
+          <TextField
+            value={password}
+            placeholder={mode === "signup" ? t("At least 8 characters") : t("Your password")}
+            focused={activeField === "password" && !submitting}
+            width={FIELD_WIDTH}
+            type={showPassword ? "text" : "password"}
+            autoComplete={mode === "signup" ? "new-password" : "current-password"}
+            onMouseDown={() => setActiveField("password")}
+            onChange={(value) => {
+              setPassword(value);
+              clearErrors();
+            }}
+            onSubmit={submitField}
+          />
+        </Box>
+        <Box flexDirection="column" minHeight={2} width={FIELD_WIDTH}>
+          {submitting ? (
+            <Spinner label={mode === "signup" ? t("Creating your account...") : t("Signing you in...")} />
+          ) : resetState === "sending" ? (
+            <Spinner label={t("Sending reset link...")} />
+          ) : error ? (
+            <Text fg={colors.negative} wrapText>{error}</Text>
+          ) : resetState === "sent" ? (
+            <Text fg={colors.positive} wrapText>
+              {tf("Reset link sent to {email}. Check your inbox.", { email: email.trim() })}
+            </Text>
+          ) : mode === "signup" ? (
+            <Text fg={colors.textMuted} wrapText>{t("We'll email you a verification link.")}</Text>
+          ) : null}
+        </Box>
+        <Box flexDirection="row" justifyContent="space-between" width={FIELD_WIDTH}>
+          <Button
+            label={switchToLogin || mode === "signup" ? t("Log in instead") : t("Sign up instead")}
+            variant="ghost"
+            disabled={submitting}
+            onPress={() => switchMode(mode === "login" ? "signup" : "login")}
+          />
+          <Button
+            label={mode === "login" ? t("Log In") : t("Create Account")}
+            variant="primary"
+            disabled={submitting}
+            onPress={submit}
+          />
+        </Box>
+        {mode === "login" && (
+          <Box flexDirection="row" width={FIELD_WIDTH}>
+            <Button
+              label={t("Forgot password?")}
+              variant="ghost"
+              disabled={submitting || resetState === "sending"}
+              onPress={requestReset}
+            />
+          </Box>
+        )}
+      </Box>
+    </DialogFrame>
+  );
+}
+
+export interface AuthDialogRequest {
+  mode?: AccountMode;
+  onSignedIn?: (user: AuthUser) => void;
+}
+
+const authDialogListeners = new Set<(request: AuthDialogRequest) => void>();
+
+/** Returns false when no dialog host is mounted, so callers can fall back. */
+export function requestAuthDialog(request: AuthDialogRequest = {}): boolean {
+  if (authDialogListeners.size === 0) return false;
+  for (const listener of authDialogListeners) listener(request);
+  return true;
+}
+
+export function AuthDialogHost() {
+  const dialog = useDialog();
+  const openRef = useRef(false);
+
+  useEffect(() => {
+    const listener = (request: AuthDialogRequest) => {
+      if (openRef.current) return;
+      openRef.current = true;
+      void dialog
+        .prompt<AuthUser | undefined>({
+          closeOnClickOutside: false,
+          content: (context: unknown) => (
+            <AuthDialog
+              {...(context as PromptContext<AuthUser | undefined>)}
+              initialMode={request.mode ?? "login"}
+            />
+          ),
+        })
+        .then((user) => {
+          if (user) request.onSignedIn?.(user);
+        })
+        .finally(() => {
+          openRef.current = false;
+        });
+    };
+    authDialogListeners.add(listener);
+    return () => {
+      authDialogListeners.delete(listener);
+    };
+  }, [dialog]);
+
+  return null;
+}

package/src/{components/onboarding/account-step/model.test.ts → plugins/builtin/cloud/auth-model.test.ts}

@@ -4,7 +4,7 @@ import {
   classifyAccountError,
   deriveUsernameFromEmail,
   isUsernameConflictError,
-} from "./model";
+} from "./auth-model";
 
 describe("deriveUsernameFromEmail", () => {
   test("builds a server-legal username from the email local part", () => {