gloomberb 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gloomberb",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Bloomberg-style stock portfolio tracker for the terminal",
   "module": "src/index.tsx",
   "type": "module",

package/src/components/layout/floating-pane.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { colors, floatingPaneBg } from "../../theme/colors";
 import { PaneHeader } from "./pane-header";
-import { getPaneBodyHeight } from "./pane-sizing";
+import { getPaneBodyHeight, getPaneBodyHorizontalInset } from "./pane-sizing";
 
 interface FloatingPaneWrapperProps {
   title: string;
@@ -22,6 +22,7 @@ export function FloatingPaneWrapper({
 }: FloatingPaneWrapperProps) {
   const bg = floatingPaneBg(focused);
   const bodyHeight = getPaneBodyHeight(height);
+  const bodyInset = getPaneBodyHorizontalInset(focused);
 
   return (
     <box
@@ -38,7 +39,7 @@ export function FloatingPaneWrapper({
       <PaneHeader title={title} width={width} focused={focused} floating showActions={showActions} />
 
       {/* Content */}
-      <box height={bodyHeight} overflow="hidden">
+      <box height={bodyHeight} overflow="hidden" paddingLeft={bodyInset} paddingRight={bodyInset}>
         {children}
       </box>
 

package/src/components/layout/pane-sizing.ts

@@ -1,6 +1,16 @@
 const RESERVED_PANE_CHROME_ROWS = 2;
+const FOCUSED_PANE_BODY_INSET = 1;
+const RESERVED_FOCUSED_PANE_CHROME_COLUMNS = FOCUSED_PANE_BODY_INSET * 2;
 
 export function getPaneBodyHeight(height: number): number {
   // Reserve the header row plus the bottom border/resize row.
   return Math.max(1, height - RESERVED_PANE_CHROME_ROWS);
 }
+
+export function getPaneBodyHorizontalInset(focused: boolean): number {
+  return focused ? FOCUSED_PANE_BODY_INSET : 0;
+}
+
+export function getPaneBodyWidth(width: number, focused: boolean): number {
+  return Math.max(1, width - (focused ? RESERVED_FOCUSED_PANE_CHROME_COLUMNS : 0));
+}

package/src/components/layout/pane.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { paneBg } from "../../theme/colors";
 import { PaneHeader } from "./pane-header";
-import { getPaneBodyHeight } from "./pane-sizing";
+import { getPaneBodyHeight, getPaneBodyHorizontalInset } from "./pane-sizing";
 
 interface PaneWrapperProps {
   title?: string;
@@ -30,6 +30,7 @@ export function PaneWrapper({
   const bodyHeight = typeof height === "number"
     ? title ? getPaneBodyHeight(height) : height
     : undefined;
+  const bodyInset = getPaneBodyHorizontalInset(focused);
 
   return (
     <box
@@ -45,7 +46,13 @@ export function PaneWrapper({
       {title && (
         <PaneHeader title={title} width={width} focused={focused} showActions={showActions} />
       )}
-      <box height={bodyHeight} flexGrow={bodyHeight == null ? 1 : 0} overflow="hidden">
+      <box
+        height={bodyHeight}
+        flexGrow={bodyHeight == null ? 1 : 0}
+        overflow="hidden"
+        paddingLeft={bodyInset}
+        paddingRight={bodyInset}
+      >
         {children}
       </box>
     </box>

package/src/components/layout/shell.test.tsx

@@ -35,6 +35,7 @@ afterEach(() => {
 });
 
 function createShellPluginRegistry(options?: {
+  portfolioListComponent?: (props: PaneProps) => ReactNode;
   tickerDetailComponent?: (props: PaneProps) => ReactNode;
 }): PluginRegistry {
   return {
@@ -42,7 +43,7 @@ function createShellPluginRegistry(options?: {
       ["portfolio-list", {
         id: "portfolio-list",
         name: "Portfolio List",
-        component: () => <text>Portfolio Body</text>,
+        component: options?.portfolioListComponent ?? (() => <text>Portfolio Body</text>),
         defaultPosition: "left",
       }],
       ["ticker-detail", {
@@ -281,6 +282,20 @@ function BrokerShellHarness({ pluginRegistry }: { pluginRegistry: PluginRegistry
   );
 }
 
+function FocusBorderProbe({ width, height }: Pick<PaneProps, "width" | "height">) {
+  return (
+    <box flexDirection="column" width={width} height={height}>
+      <box height={1} width={width}>
+        <text>Read Probe</text>
+      </box>
+      <box height={1} width={width} flexDirection="row">
+        <box flexGrow={1} />
+        <text>Right</text>
+      </box>
+    </box>
+  );
+}
+
 function ChartShellHarness({
   pluginRegistry,
   config,
@@ -651,9 +666,11 @@ describe("Shell", () => {
       harnessState?.config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main")?.settings?.chartResolution,
     ).toBe("1wk");
     const resolutionSpans = testSetup.captureSpans().lines[resolutionRow]?.spans ?? [];
-    expect(
-      resolutionSpans.some((span) => span.text === targetResolution && (span.attributes & TextAttributes.BOLD) !== 0),
-    ).toBe(true);
+    const boldResolutionText = resolutionSpans
+      .filter((span) => (span.attributes & TextAttributes.BOLD) !== 0)
+      .map((span) => span.text)
+      .join("");
+    expect(boldResolutionText).toContain(targetResolution);
   });
 
   test("keeps the cash drawer and gridlock tip on distinct click rows in the full app layout", async () => {
@@ -700,6 +717,84 @@ describe("Shell", () => {
     expect(toasts).toEqual(["Retiled all panes"]);
   });
 
+  test("keeps focused docked pane body text inside the focus border", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-focus-border-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    if (!mainPane) throw new Error("missing default portfolio pane");
+
+    const singlePaneLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }],
+      floating: [],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(singlePaneLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(singlePaneLayout) }],
+      }),
+      focusedPaneId: "portfolio-list:main",
+    };
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+          <Shell pluginRegistry={createShellPluginRegistry({
+            portfolioListComponent: FocusBorderProbe,
+          })} />
+        </DialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("│Read Probe");
+    expect(frame).toContain("Right│");
+    expect(frame).not.toContain("│ead Probe");
+    expect(frame).not.toContain("Righ│");
+  });
+
+  test("keeps focused floating pane body text inside the focus border", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-floating-focus-border-test");
+    const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
+    if (!detailPane) throw new Error("missing detail pane");
+
+    const floatingOnlyLayout = {
+      dockRoot: null,
+      instances: [{ ...detailPane }],
+      floating: [{ instanceId: "ticker-detail:main", x: 4, y: 2, width: 30, height: 8, zIndex: 75 }],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(floatingOnlyLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(floatingOnlyLayout) }],
+      }),
+      focusedPaneId: "ticker-detail:main",
+    };
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+          <Shell pluginRegistry={createShellPluginRegistry({
+            tickerDetailComponent: FocusBorderProbe,
+          })} />
+        </DialogProvider>
+      </AppContext>,
+      { width: 40, height: 12 },
+    );
+
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("│Read Probe");
+    expect(frame).toContain("Right│");
+    expect(frame).not.toContain("│ead Probe");
+    expect(frame).not.toContain("Righ│");
+  });
+
   test("shows the gridlock tip after snapping a pane to a half screen", () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-snap-test");
     const snapLayout = cloneLayout(config.layout);

package/src/components/layout/shell.tsx

@@ -39,7 +39,7 @@ import { PANE_HEADER_ACTION, PANE_HEADER_CLOSE } from "./pane-header";
 import { getNativeSurfaceManager, type NativeOccluder, type NativePaneLayer } from "../chart/native/surface-manager";
 import { FloatingPaneWrapper } from "./floating-pane";
 import { PaneWrapper } from "./pane";
-import { getPaneBodyHeight } from "./pane-sizing";
+import { getPaneBodyHeight, getPaneBodyWidth } from "./pane-sizing";
 
 interface ShellProps {
   pluginRegistry: PluginRegistry;
@@ -987,6 +987,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
         const focused = state.focusedPaneId === leaf.instanceId && (!overlayOpen || menuState?.paneId === leaf.instanceId);
         const showActions = focused || hoveredPaneId === leaf.instanceId || menuState?.paneId === leaf.instanceId;
         const bodyHeight = getPaneBodyHeight(leaf.rect.height);
+        const bodyWidth = getPaneBodyWidth(leaf.rect.width, focused);
         return (
           <box
             key={`dock:${leaf.instanceId}`}
@@ -1009,7 +1010,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
                   paneId={pane.instance.instanceId}
                   paneType={pane.instance.paneId}
                   focused={focused}
-                  width={leaf.rect.width}
+                  width={bodyWidth}
                   height={bodyHeight}
                 />
               </PaneInstanceProvider>
@@ -1023,6 +1024,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
         const focused = state.focusedPaneId === pane.instance.instanceId && (!overlayOpen || menuState?.paneId === pane.instance.instanceId);
         const showActions = focused || hoveredPaneId === pane.instance.instanceId || menuState?.paneId === pane.instance.instanceId;
         const bodyHeight = getPaneBodyHeight(preview.height);
+        const bodyWidth = getPaneBodyWidth(preview.width, focused);
         return (
           <FloatingPaneWrapper
             key={`float:${pane.instance.instanceId}`}
@@ -1041,7 +1043,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
                 paneId={pane.instance.instanceId}
                 paneType={pane.instance.paneId}
                 focused={focused}
-                width={preview.width}
+                width={bodyWidth}
                 height={bodyHeight}
                 close={() => handleFloatingClose(pane.instance.instanceId)}
               />

package/src/plugins/builtin/chat-controller.test.ts

@@ -155,6 +155,27 @@ describe("ChatController", () => {
     });
   });
 
+  test("does not restore persisted websocket tokens", () => {
+    const persistence = new MemoryPersistence();
+    const controller = new ChatController();
+
+    persistence.setState("session", {
+      sessionToken: "token-123",
+      websocketToken: "stale-ws-token",
+      user: { id: "u1", username: "vince", emailVerified: true },
+    }, { schemaVersion: 1 });
+
+    controller.attachPersistence(persistence);
+
+    expect(apiClient.getSessionToken()).toBe("token-123");
+    expect(apiClient.getWebSocketToken()).toBeNull();
+    expect(apiClient.getCurrentUser()).toMatchObject({
+      id: "u1",
+      username: "vince",
+      emailVerified: true,
+    });
+  });
+
   test("reset clears persisted chat state and session token", () => {
     const persistence = new MemoryPersistence();
     const controller = new ChatController();

package/src/plugins/builtin/chat-controller.ts

@@ -129,7 +129,9 @@ export class ChatController {
       schemaVersion: SESSION_SCHEMA_VERSION,
     });
     apiClient.setSessionToken(session?.sessionToken ?? null);
-    apiClient.setWebSocketToken(session?.websocketToken ?? null);
+    // WebSocket tokens are short-lived connection credentials. Reusing a persisted
+    // one can trap reconnects on an expired token even while the session cookie is valid.
+    apiClient.setWebSocketToken(null);
     apiClient.restoreCachedUser(session?.user ?? null);
     this.user = session?.user
       ? {
@@ -483,7 +485,6 @@ export class ChatController {
   private persistSession(): void {
     const value = {
       sessionToken: apiClient.getSessionToken(),
-      websocketToken: apiClient.getWebSocketToken(),
       user: this.user,
     } satisfies PersistedSessionState;
     this.resume?.setState(SESSION_STATE_KEY, value, {

package/src/plugins/builtin/chat.tsx

@@ -962,10 +962,18 @@ export const gloomberbCloudPlugin: GloomPlugin = {
           ctx.notify({ body: "Not logged in.", type: "error" });
           return;
         }
-        await apiClient.signOut();
+        let signOutError: unknown = null;
+        try {
+          await apiClient.signOut();
+        } catch (error) {
+          signOutError = error;
+        }
         await chatController.refreshSession();
         await chatController.refreshMessages();
-        ctx.notify({ body: "Logged out.", type: "info" });
+        ctx.notify({
+          body: signOutError ? "Logged out locally. Cloud sign-out did not complete." : "Logged out.",
+          type: "info",
+        });
       },
       hidden: () => !apiClient.getSessionToken(),
     });

package/src/utils/api-client.test.ts

@@ -3,6 +3,7 @@ import type { AuthUser } from "./api-client";
 import { apiClient } from "./api-client";
 
 const originalFetch = globalThis.fetch;
+const originalWebSocket = globalThis.WebSocket;
 
 const verifiedUser: AuthUser = {
   id: "user-1",
@@ -33,7 +34,9 @@ function createResponse(body: unknown, options: { status?: number; cookies?: str
 }
 
 afterEach(() => {
+  apiClient.dispose();
   globalThis.fetch = originalFetch;
+  globalThis.WebSocket = originalWebSocket;
   apiClient.setSessionToken(null);
   apiClient.setWebSocketToken(null);
 });
@@ -83,6 +86,93 @@ describe("apiClient auth cookies", () => {
       "__Secure-gloomberb.session_token=persisted-token.value; gloomberb.session_token=persisted-token.value",
     ]);
   });
+
+  test("keeps cached identity when session refresh is rejected without a hard account-missing response", async () => {
+    apiClient.setSessionToken("persisted-token.value");
+    apiClient.restoreCachedUser(verifiedUser);
+
+    globalThis.fetch = (async () => createResponse({ message: "Unauthorized" }, { status: 401 })) as typeof fetch;
+
+    await expect(apiClient.getSession()).rejects.toThrow("Unauthorized");
+    expect(apiClient.getSessionToken()).toBe("persisted-token.value");
+    expect(apiClient.getCurrentUser()).toMatchObject({
+      id: verifiedUser.id,
+      username: verifiedUser.username,
+      emailVerified: true,
+    });
+  });
+
+  test("clears cached identity when session refresh says the account no longer exists", async () => {
+    apiClient.setSessionToken("persisted-token.value");
+    apiClient.setWebSocketToken("ws-token");
+    apiClient.restoreCachedUser(verifiedUser);
+
+    globalThis.fetch = (async () => createResponse({ code: "USER_NOT_FOUND" }, { status: 403 })) as typeof fetch;
+
+    await expect(apiClient.getSession()).resolves.toBeNull();
+    expect(apiClient.getSessionToken()).toBeNull();
+    expect(apiClient.getWebSocketToken()).toBeNull();
+    expect(apiClient.getCurrentUser()).toBeNull();
+  });
+
+  test("clears local session on explicit sign out even if the server request fails", async () => {
+    apiClient.setSessionToken("persisted-token.value");
+    apiClient.setWebSocketToken("ws-token");
+    apiClient.restoreCachedUser(verifiedUser);
+
+    globalThis.fetch = (async () => createResponse({ message: "server unavailable" }, { status: 503 })) as typeof fetch;
+
+    await expect(apiClient.signOut()).rejects.toThrow("server unavailable");
+    expect(apiClient.getSessionToken()).toBeNull();
+    expect(apiClient.getWebSocketToken()).toBeNull();
+    expect(apiClient.getCurrentUser()).toBeNull();
+  });
+
+  test("drops a stale websocket token after socket close so reconnect can use the session token", () => {
+    const sockets: Array<{
+      url: string;
+      readyState: number;
+      onclose: ((event: unknown) => void) | null;
+      close: () => void;
+    }> = [];
+
+    class FakeWebSocket {
+      static OPEN = 1;
+      readyState = 0;
+      onopen: ((event: unknown) => void) | null = null;
+      onmessage: ((event: { data: string }) => void) | null = null;
+      onclose: ((event: unknown) => void) | null = null;
+      onerror: ((event: unknown) => void) | null = null;
+
+      constructor(readonly url: string) {
+        sockets.push(this);
+      }
+
+      send(): void {}
+
+      close(): void {
+        this.readyState = 3;
+        this.onclose?.({ code: 1000, reason: "closed" });
+      }
+    }
+
+    globalThis.WebSocket = FakeWebSocket as any;
+    apiClient.setSessionToken("session-token");
+    apiClient.setWebSocketToken("stale-ws-token");
+    apiClient.restoreCachedUser(verifiedUser);
+
+    const unsubscribe = apiClient.subscribeQuotes([{ symbol: "AAPL" }], () => {});
+
+    expect(sockets).toHaveLength(1);
+    expect(sockets[0]!.url).toContain("token=stale-ws-token");
+
+    sockets[0]!.onclose?.({ code: 1008, reason: "Unauthorized" });
+
+    expect(apiClient.getWebSocketToken()).toBeNull();
+    expect(apiClient.getSessionToken()).toBe("session-token");
+
+    unsubscribe();
+  });
 });
 
 describe("apiClient chat timestamps", () => {

package/src/utils/api-client.ts

@@ -6,6 +6,11 @@ import { normalizeTimestamp } from "./timestamp";
 const DEFAULT_API_URL = "https://api.gloom.sh";
 const SESSION_COOKIE_NAMES = ["__Secure-gloomberb.session_token", "gloomberb.session_token"] as const;
 const cloudApiLog = debugLog.createLogger("cloud-api");
+const HARD_SESSION_INVALID_PATTERNS = [
+  /\b(user|account)\b.*\b(not found|deleted|removed|disabled|deactivated|suspended)\b/i,
+  /\b(user|account)\b.*\bdoes(?:\s+not|n't)\s+exist\b/i,
+  /\b(no|unknown|missing)\s+(user|account)\b/i,
+];
 
 export interface ChatMessage {
   id: string;
@@ -131,6 +136,22 @@ class ApiRequestError extends Error {
   }
 }
 
+function parseApiErrorMessage(body: string): string {
+  try {
+    const parsed = JSON.parse(body) as Record<string, unknown>;
+    const parts = [parsed.message, parsed.error, parsed.code, parsed.reason]
+      .filter((value): value is string => typeof value === "string" && value.trim().length > 0);
+    return parts.join(" ") || body;
+  } catch {
+    return body;
+  }
+}
+
+function isHardSessionInvalidMessage(message: string): boolean {
+  const normalized = message.replace(/[_-]+/g, " ");
+  return HARD_SESSION_INVALID_PATTERNS.some((pattern) => pattern.test(normalized));
+}
+
 class GloomApiClient {
   private sessionToken: string | null = null;
   private sessionCookieName: SessionCookieName | null = null;
@@ -262,12 +283,7 @@ class GloomApiClient {
 
     if (!res.ok) {
       const body = await res.text();
-      let msg: string;
-      try {
-        msg = JSON.parse(body).message ?? body;
-      } catch {
-        msg = body;
-      }
+      const msg = parseApiErrorMessage(body);
       throw new ApiRequestError(msg, res.status);
     }
 
@@ -300,10 +316,11 @@ class GloomApiClient {
 
     const socketToken = this.getSocketAuthToken();
     if (!socketToken) return;
+    const usingWebSocketToken = !!this.websocketToken;
     const url = `${this.getWebSocketBaseUrl()}/cloud/ws?token=${encodeURIComponent(socketToken)}`;
     cloudApiLog.info("open websocket", {
       hasToken: !!socketToken,
-      tokenSource: this.websocketToken ? "websocket" : "session",
+      tokenSource: usingWebSocketToken ? "websocket" : "session",
       quoteTargets: this.quoteTargets.size,
       channelTargets: this.channelListeners.size,
     });
@@ -321,11 +338,24 @@ class GloomApiClient {
       void this.handleSocketMessage(String(event.data));
     };
 
-    ws.onclose = () => {
+    ws.onclose = (event) => {
+      const activeSocket = this.ws === ws;
       if (this.ws === ws) {
         this.ws = null;
       }
-      cloudApiLog.warn("websocket closed", { quoteTargets: this.quoteTargets.size, channelTargets: this.channelListeners.size });
+      const closeEvent = event as CloseEvent | undefined;
+      cloudApiLog.warn("websocket closed", {
+        quoteTargets: this.quoteTargets.size,
+        channelTargets: this.channelListeners.size,
+        code: closeEvent?.code,
+        reason: closeEvent?.reason,
+        tokenSource: usingWebSocketToken ? "websocket" : "session",
+      });
+      if (activeSocket && usingWebSocketToken && this.sessionToken) {
+        this.websocketToken = null;
+        this.reconnectDelayMs = 1000;
+        cloudApiLog.warn("cleared websocket token after socket close; falling back to session token");
+      }
       if (!this.shouldKeepSocketOpen()) return;
       this.scheduleReconnect();
     };
@@ -410,6 +440,14 @@ class GloomApiClient {
 
     if (parsed?.type === "auth.unverified") {
       cloudApiLog.warn("websocket marked unverified");
+      if (this.websocketToken && this.sessionToken) {
+        this.websocketToken = null;
+        this.reconnectDelayMs = 1000;
+        cloudApiLog.warn("cleared websocket token after auth rejection; falling back to session token");
+        this.teardownSocket();
+        this.scheduleReconnect();
+        return;
+      }
       if (this.currentUser) {
         this.currentUser = { ...this.currentUser, emailVerified: false };
       }
@@ -464,9 +502,11 @@ class GloomApiClient {
   }
 
   async signOut(): Promise<void> {
-    await this.request("/api/auth/api/auth/sign-out", { method: "POST" });
-    this.sessionToken = null;
-    this.setCurrentUser(null);
+    try {
+      await this.request("/api/auth/api/auth/sign-out", { method: "POST" });
+    } finally {
+      this.setSessionToken(null);
+    }
   }
 
   async getSession(): Promise<AuthUser | null> {
@@ -478,11 +518,11 @@ class GloomApiClient {
       this.setCurrentUser(user);
       return user;
     } catch (error) {
-      if (!(error instanceof ApiRequestError) || (error.status !== 401 && error.status !== 403)) {
-        throw error;
+      if (error instanceof ApiRequestError && isHardSessionInvalidMessage(error.message)) {
+        this.setSessionToken(null);
+        return null;
       }
-      this.setCurrentUser(null);
-      return null;
+      throw error;
     }
   }
 

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "0.5.0";
+export const VERSION = "0.5.1";