gloomberb 0.2.0 → 0.3.1

package/src/components/layout/status-bar.test.tsx

@@ -0,0 +1,173 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import { AppContext, createInitialState } from "../../state/app-context";
+import { cloneLayout, createDefaultConfig } from "../../types/config";
+import { StatusBar } from "./status-bar";
+import { setSharedRegistryForTests } from "../../plugins/registry";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy();
+    testSetup = undefined;
+  }
+  setSharedRegistryForTests(undefined);
+});
+
+describe("StatusBar", () => {
+  test("shows the command bar shortcut when only one layout exists", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-test");
+    const state = {
+      ...createInitialState(config),
+      statusBarVisible: true,
+    };
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <StatusBar />
+      </AppContext>,
+      { width: 120, height: 1 },
+    );
+
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Ctrl+P");
+    expect(frame).toContain("command bar");
+  });
+
+  test("renders layout tabs without preview suffixes", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-test");
+    const researchLayout = cloneLayout(config.layout);
+    researchLayout.dockRoot = { kind: "pane", instanceId: "portfolio-list:main" };
+    researchLayout.floating = [{ instanceId: "ticker-detail:main", x: 8, y: 2, width: 36, height: 12 }];
+
+    const state = {
+      ...createInitialState({
+        ...config,
+        layouts: [
+          { name: "Default", layout: cloneLayout(config.layout) },
+          { name: "Research", layout: researchLayout },
+        ],
+      }),
+      statusBarVisible: true,
+    };
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <StatusBar />
+      </AppContext>,
+      { width: 120, height: 1 },
+    );
+
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Default");
+    expect(frame).toContain("Research");
+  });
+
+  test("shows a gridlock tip after a corner snap and runs gridlock on click", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-test");
+    const floatingLayout = cloneLayout(config.layout);
+    floatingLayout.dockRoot = { kind: "pane", instanceId: "portfolio-list:main" };
+    floatingLayout.floating = [{ instanceId: "ticker-detail:main", x: 8, y: 2, width: 36, height: 12 }];
+
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: floatingLayout,
+        layouts: [
+          { name: "Default", layout: cloneLayout(floatingLayout) },
+          { name: "Research", layout: cloneLayout(floatingLayout) },
+        ],
+      }),
+      statusBarVisible: true,
+      gridlockTipVisible: true,
+    };
+
+    const actions: Array<{ type: string }> = [];
+    let updatedLayout = null as ReturnType<typeof cloneLayout> | null;
+    const toasts: string[] = [];
+
+    setSharedRegistryForTests({
+      getLayoutFn: () => state.config.layout,
+      getTermSizeFn: () => ({ width: 120, height: 40 }),
+      updateLayoutFn: (layout) => { updatedLayout = layout; },
+      showToastFn: (message: string) => { toasts.push(message); },
+      Slot: () => null,
+    } as any);
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action as { type: string }) }}>
+        <StatusBar />
+      </AppContext>,
+      { width: 120, height: 1 },
+    );
+
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Snapped a window?");
+    expect(frame).toContain("Gridlock All");
+
+    const buttonX = frame.split("\n")[0]?.indexOf("Gridlock All") ?? -1;
+    expect(buttonX).toBeGreaterThanOrEqual(0);
+
+    await testSetup.mockMouse.click(buttonX + 1, 0);
+    await testSetup.renderOnce();
+
+    expect(updatedLayout?.floating).toHaveLength(0);
+    expect(toasts).toEqual(["Retiled all panes"]);
+    expect(actions).toContainEqual({ type: "DISMISS_GRIDLOCK_TIP" });
+  });
+
+  test("auto-dismisses the gridlock tip after its timeout", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-test");
+    const state = {
+      ...createInitialState(config),
+      statusBarVisible: true,
+      gridlockTipVisible: true,
+      gridlockTipSequence: 1,
+    };
+    const actions: Array<{ type: string }> = [];
+    const timers: Array<{ callback: (() => void) | null; delay: number | undefined }> = [];
+    const originalSetTimeout = globalThis.setTimeout;
+    const originalClearTimeout = globalThis.clearTimeout;
+
+    globalThis.setTimeout = ((callback: TimerHandler, delay?: number) => {
+      timers.push({ callback: typeof callback === "function" ? callback : null, delay });
+      return 1 as unknown as ReturnType<typeof setTimeout>;
+    }) as typeof setTimeout;
+    globalThis.clearTimeout = (() => {}) as typeof clearTimeout;
+
+    setSharedRegistryForTests({
+      getLayoutFn: () => state.config.layout,
+      getTermSizeFn: () => ({ width: 120, height: 40 }),
+      updateLayoutFn: () => {},
+      showToastFn: () => {},
+      Slot: () => null,
+    } as any);
+
+    try {
+      testSetup = await testRender(
+        <AppContext value={{ state, dispatch: (action) => actions.push(action as { type: string }) }}>
+          <StatusBar />
+        </AppContext>,
+        { width: 120, height: 1 },
+      );
+
+      await testSetup.renderOnce();
+
+      const gridlockTimer = timers.find((entry) => entry.delay === 60_000);
+      expect(gridlockTimer?.callback).toBeDefined();
+      gridlockTimer?.callback?.();
+
+      expect(actions).toContainEqual({ type: "DISMISS_GRIDLOCK_TIP" });
+    } finally {
+      globalThis.setTimeout = originalSetTimeout;
+      globalThis.clearTimeout = originalClearTimeout;
+    }
+  });
+});

package/src/components/layout/status-bar.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useState } from "react";
+import { colors, hoverBg } from "../../theme/colors";
+import { useAppState, useFocusedTicker } from "../../state/app-context";
+import { marketStateLabel, marketStateColor, exchangeShortName, getExtendedHoursInfo } from "../../utils/market-status";
+import { getSharedRegistry } from "../../plugins/registry";
+import { gridlockAllPanes } from "../../plugins/pane-manager";
+
+const GRIDLOCK_TIP_DURATION_MS = 60_000;
+
+function truncate(text: string, width: number): string {
+  if (width <= 0) return "";
+  if (text.length <= width) return text;
+  if (width <= 2) return ".".repeat(width);
+  return `${text.slice(0, width - 2)}..`;
+}
+
+export function StatusBar() {
+  const registry = getSharedRegistry();
+  const { state, dispatch } = useAppState();
+  const { symbol, financials: focusedFinancials } = useFocusedTicker();
+  const [hoveredTab, setHoveredTab] = useState<number | null>(null);
+  const [hoveredControl, setHoveredControl] = useState<string | null>(null);
+
+  const q = focusedFinancials?.quote;
+  const mktState = q?.marketState;
+  const exchName = q ? exchangeShortName(q.exchangeName, q.fullExchangeName) : "";
+
+  // Extended hours info for selected ticker
+  const extInfo = getExtendedHoursInfo(focusedFinancials?.quote);
+  const extText = extInfo?.text ?? "";
+  const extColor = extInfo?.color ?? colors.textDim;
+
+  const layouts = state.config.layouts ?? [];
+  const activeLayoutIdx = state.config.activeLayoutIndex ?? 0;
+  const hasMultipleLayouts = layouts.length > 1;
+  const showGridlockTip = state.gridlockTipVisible && !!registry;
+
+  useEffect(() => {
+    if (!state.gridlockTipVisible) return;
+    const timer = setTimeout(() => {
+      dispatch({ type: "DISMISS_GRIDLOCK_TIP" });
+    }, GRIDLOCK_TIP_DURATION_MS);
+    return () => clearTimeout(timer);
+  }, [dispatch, state.gridlockTipSequence, state.gridlockTipVisible]);
+
+  const handleGridlockTip = (event?: { stopPropagation?: () => void; preventDefault?: () => void }) => {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    if (!registry) return;
+    const { width, height } = registry.getTermSizeFn();
+    registry.updateLayoutFn(gridlockAllPanes(registry.getLayoutFn(), { x: 0, y: 0, width, height }));
+    registry.showToastFn("Retiled all panes", { type: "success" });
+    dispatch({ type: "DISMISS_GRIDLOCK_TIP" });
+  };
+
+  const dismissGridlockTip = (event?: { stopPropagation?: () => void; preventDefault?: () => void }) => {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    dispatch({ type: "DISMISS_GRIDLOCK_TIP" });
+  };
+
+  if (!state.statusBarVisible) return null;
+
+  return (
+    <box
+      flexDirection="row"
+      height={1}
+      backgroundColor={colors.panel}
+    >
+      <box paddingLeft={1} flexShrink={0} flexDirection="row">
+        {hasMultipleLayouts ? (
+          layouts.map((l, i) => {
+            const isActive = i === activeLayoutIdx;
+            const isHovered = hoveredTab === i && !isActive;
+            const num = i + 1;
+            const label = truncate(l.name, 14);
+            const bg = isActive ? colors.header : isHovered ? hoverBg() : undefined;
+            const fg = isActive ? colors.headerText : isHovered ? colors.text : colors.textDim;
+            return (
+              <text
+                key={i}
+                fg={fg}
+                bg={bg}
+                onMouseMove={() => setHoveredTab(i)}
+                onMouseDown={(event: any) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  dispatch({ type: "SWITCH_LAYOUT", index: i });
+                }}
+              >
+                {` ^${num} `}<span fg={isActive ? colors.headerText : colors.text}>{label}</span>{" "}
+              </text>
+            );
+          })
+        ) : (
+          <text fg={colors.textDim}>
+            <span fg={colors.text}>Ctrl+P</span> command bar
+          </text>
+        )}
+      </box>
+      {showGridlockTip && (
+        <box paddingLeft={1} flexShrink={0} flexDirection="row">
+          <text fg={colors.textDim}>Snapped a window?</text>
+          <box width={1} />
+          <box
+            backgroundColor={hoveredControl === "gridlock-tip" ? hoverBg() : colors.header}
+            onMouseMove={() => setHoveredControl("gridlock-tip")}
+            onMouseDown={handleGridlockTip}
+          >
+            <text fg={colors.headerText}> Gridlock All </text>
+          </box>
+          <text
+            fg={hoveredControl === "gridlock-tip-dismiss" ? colors.text : colors.textDim}
+            onMouseMove={() => setHoveredControl("gridlock-tip-dismiss")}
+            onMouseDown={dismissGridlockTip}
+          >
+            {" x"}
+          </text>
+        </box>
+      )}
+      <box flexGrow={1} />
+      {extText && (
+        <box paddingRight={1}>
+          <text fg={extColor}>{symbol} {extText}</text>
+        </box>
+      )}
+      {mktState && (
+        <box paddingRight={1}>
+          <text fg={marketStateColor(mktState)}>
+            {exchName ? `${exchName} ` : ""}{marketStateLabel(mktState)}
+          </text>
+        </box>
+      )}
+      {/* Plugin status widgets */}
+      {registry && <registry.Slot name="status:widget" />}
+    </box>
+  );
+}

package/src/components/markdown-editor.tsx

@@ -0,0 +1,134 @@
+import { useRef, useEffect, useCallback } from "react";
+import { SyntaxStyle, RGBA } from "@opentui/core";
+import type { TextareaRenderable, Highlight } from "@opentui/core";
+import { colors } from "../theme/colors";
+
+interface LinePattern {
+  regex: RegExp;
+  styleId: string;
+}
+
+// Patterns applied per-line (no 'g' or 'm' flags — we iterate lines ourselves)
+const LINE_PATTERNS: LinePattern[] = [
+  // Full-line heading
+  { regex: /^#{1,3}\s+.+$/, styleId: "md.heading" },
+  // Bold **text**
+  { regex: /\*\*[^*]+\*\*/, styleId: "md.bold" },
+  // Italic *text* (not **)
+  { regex: /(?<!\*)\*(?!\*)[^*]+\*(?!\*)/, styleId: "md.italic" },
+  // Strikethrough ~~text~~
+  { regex: /~~[^~]+~~/, styleId: "md.strikethrough" },
+  // Inline code `text`
+  { regex: /`[^`]+`/, styleId: "md.code" },
+  // List markers
+  { regex: /^(\s*[-*]|\s*\d+\.)\s/, styleId: "md.list" },
+];
+
+function createMarkdownStyle(): { style: SyntaxStyle; ids: Record<string, number> } {
+  const style = SyntaxStyle.create();
+  const ids: Record<string, number> = {};
+  ids["md.heading"] = style.registerStyle("md.heading", {
+    fg: RGBA.fromHex(colors.borderFocused),
+    bold: true,
+  });
+  ids["md.bold"] = style.registerStyle("md.bold", { bold: true });
+  ids["md.italic"] = style.registerStyle("md.italic", { italic: true });
+  ids["md.strikethrough"] = style.registerStyle("md.strikethrough", { dim: true });
+  ids["md.code"] = style.registerStyle("md.code", {
+    fg: RGBA.fromHex(colors.textDim),
+  });
+  ids["md.list"] = style.registerStyle("md.list", {
+    fg: RGBA.fromHex(colors.borderFocused),
+    bold: true,
+  });
+  return { style, ids };
+}
+
+function computeLineHighlights(
+  line: string,
+  ids: Record<string, number>,
+): Highlight[] {
+  const highlights: Highlight[] = [];
+  for (const pattern of LINE_PATTERNS) {
+    const id = ids[pattern.styleId];
+    if (id == null) continue;
+    // Use a global copy to find all matches on this line
+    const globalRe = new RegExp(pattern.regex.source, "g");
+    let match: RegExpExecArray | null;
+    while ((match = globalRe.exec(line)) !== null) {
+      highlights.push({
+        start: match.index,
+        end: match.index + match[0].length,
+        styleId: id,
+      });
+      if (match[0].length === 0) break; // safety
+    }
+  }
+  return highlights;
+}
+
+export interface MarkdownEditorProps {
+  textareaKey?: string;
+  focused: boolean;
+  initialValue?: string;
+  placeholder?: string;
+  onRef?: (ref: TextareaRenderable | null) => void;
+}
+
+export function MarkdownEditor({
+  textareaKey,
+  focused,
+  initialValue = "",
+  placeholder = "Write notes...",
+  onRef,
+}: MarkdownEditorProps) {
+  const textareaRef = useRef<TextareaRenderable>(null);
+  const styleRef = useRef<{ style: SyntaxStyle; ids: Record<string, number> } | null>(null);
+
+  const applyHighlights = useCallback(() => {
+    const ta = textareaRef.current;
+    if (!ta || !styleRef.current) return;
+    const text = ta.editBuffer.getText();
+    const lines = text.split("\n");
+    const { ids } = styleRef.current;
+    for (let i = 0; i < lines.length; i++) {
+      ta.clearLineHighlights(i);
+      const lineHls = computeLineHighlights(lines[i]!, ids);
+      for (const hl of lineHls) {
+        ta.addHighlight(i, hl);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    const created = createMarkdownStyle();
+    styleRef.current = created;
+    ta.syntaxStyle = created.style;
+    applyHighlights();
+    ta.onContentChange = () => applyHighlights();
+    return () => {
+      if (ta) ta.onContentChange = undefined;
+    };
+  }, [textareaKey, applyHighlights]);
+
+  useEffect(() => {
+    onRef?.(textareaRef.current);
+    return () => onRef?.(null);
+  }, [textareaKey, onRef]);
+
+  return (
+    <textarea
+      key={textareaKey}
+      ref={textareaRef}
+      initialValue={initialValue}
+      placeholder={placeholder}
+      focused={focused}
+      textColor={colors.text}
+      placeholderColor={colors.textDim}
+      backgroundColor={focused ? colors.panel : colors.bg}
+      flexGrow={1}
+    />
+  );
+}

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

@@ -0,0 +1,184 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { mkdtemp, rm } from "fs/promises";
+import { tmpdir } from "os";
+import { join } from "path";
+import { act } from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { OnboardingWizard } from "./onboarding-wizard";
+import { createDefaultConfig, type AppConfig } from "../../types/config";
+import type { BrokerAdapter } from "../../types/broker";
+import type { TickerRecord } from "../../types/ticker";
+import type { PluginRegistry } from "../../plugins/registry";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let tempDataDir: string | null = null;
+
+function createDeferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((nextResolve, nextReject) => {
+    resolve = nextResolve;
+    reject = nextReject;
+  });
+  return { promise, resolve, reject };
+}
+
+function createTickerRepository(initial: TickerRecord[] = []) {
+  const tickers = new Map(initial.map((ticker) => [ticker.metadata.ticker, ticker] as const));
+
+  return {
+    async loadAllTickers() {
+      return [...tickers.values()];
+    },
+    async loadTicker(symbol: string) {
+      return tickers.get(symbol) ?? null;
+    },
+    async saveTicker(ticker: TickerRecord) {
+      tickers.set(ticker.metadata.ticker, ticker);
+    },
+    async createTicker(metadata: TickerRecord["metadata"]) {
+      const ticker = { metadata };
+      tickers.set(metadata.ticker, ticker);
+      return ticker;
+    },
+    async deleteTicker(symbol: string) {
+      tickers.delete(symbol);
+    },
+  };
+}
+
+async function emitKeypress(
+  renderer: Awaited<ReturnType<typeof testRender>>,
+  event: { name?: string; sequence?: string },
+) {
+  await act(async () => {
+    renderer.renderer.keyInput.emit("keypress", {
+      ctrl: false,
+      meta: false,
+      option: false,
+      shift: false,
+      eventType: "press",
+      repeated: false,
+      ...event,
+    } as any);
+    await renderer.renderOnce();
+  });
+}
+
+afterEach(async () => {
+  if (testSetup) {
+    await act(async () => {
+      testSetup!.renderer.destroy();
+    });
+    testSetup = undefined;
+  }
+  if (tempDataDir) {
+    await rm(tempDataDir, { recursive: true, force: true });
+    tempDataDir = null;
+  }
+});
+
+describe("OnboardingWizard", () => {
+  test("waits for broker positions to import before completing onboarding", async () => {
+    tempDataDir = await mkdtemp(join(tmpdir(), "gloomberb-onboarding-"));
+    const importDeferred = createDeferred<any[]>();
+    const tickerRepository = createTickerRepository();
+    const broker: BrokerAdapter = {
+      id: "demo",
+      name: "Demo Broker",
+      configSchema: [{ key: "host", label: "Host", type: "text", required: true, defaultValue: "paper" }],
+      validate: async () => true,
+      listAccounts: async () => [{ accountId: "ACC-1", name: "Primary", currency: "USD" }],
+      importPositions: async () => importDeferred.promise,
+    };
+    const pluginRegistry = {
+      allPlugins: new Map(),
+      brokers: new Map([["demo", broker]]),
+      paneTemplates: new Map(),
+      getPaneTemplatePluginId: () => undefined,
+      tickerRepository,
+      persistence: { resources: undefined },
+    } as unknown as PluginRegistry;
+
+    let completedConfig: AppConfig | null = null;
+
+    testSetup = await testRender(
+      <OnboardingWizard
+        config={createDefaultConfig(tempDataDir)}
+        pluginRegistry={pluginRegistry}
+        onComplete={(nextConfig) => {
+          completedConfig = nextConfig;
+        }}
+      />,
+      { width: 90, height: 28 },
+    );
+    await testSetup.renderOnce();
+
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    await emitKeypress(testSetup, { name: "down", sequence: "\u001b[B" });
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+
+    let frame = testSetup.captureCharFrame();
+    for (let index = 0; index < 10 && !frame.includes("Connecting to Demo Broker and importing"); index += 1) {
+      await act(async () => {
+        await Promise.resolve();
+        await testSetup!.renderOnce();
+      });
+      frame = testSetup.captureCharFrame();
+    }
+    expect(frame).toContain("Connecting to Demo Broker and importing");
+    expect(completedConfig).toBeNull();
+
+    importDeferred.resolve([{
+      ticker: "AAPL",
+      exchange: "NASDAQ",
+      shares: 7,
+      avgCost: 180,
+      currency: "USD",
+      accountId: "ACC-1",
+      name: "Apple Inc.",
+      assetCategory: "STK",
+    }]);
+
+    for (let index = 0; index < 20 && !completedConfig; index += 1) {
+      await act(async () => {
+        await Promise.resolve();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        await testSetup!.renderOnce();
+      });
+    }
+
+    frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Select plugins to enable");
+
+    for (let index = 0; index < 3 && !frame.includes("Imported 1 position"); index += 1) {
+      await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+      frame = testSetup.captureCharFrame();
+    }
+
+    expect(frame).toContain("Imported 1 position");
+    expect(completedConfig).toBeNull();
+
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+
+    for (let index = 0; index < 20 && !completedConfig; index += 1) {
+      await act(async () => {
+        await Promise.resolve();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        await testSetup!.renderOnce();
+      });
+    }
+
+    expect(completedConfig).not.toBeNull();
+    if (!completedConfig) {
+      throw new Error("Onboarding did not complete.");
+    }
+    const finalConfig: AppConfig = completedConfig;
+    expect(finalConfig.portfolios.some((portfolio) => portfolio.id === "broker:demo-demo-broker:ACC-1")).toBe(true);
+    expect(finalConfig.layout.instances.find((instance) => instance.paneId === "portfolio-list")?.params?.collectionId)
+      .toBe("broker:demo-demo-broker:ACC-1");
+    expect((await tickerRepository.loadAllTickers()).map((ticker) => ticker.metadata.ticker)).toContain("AAPL");
+  });
+});