gloomberb 0.2.0 → 0.3.2

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/markdown-text.tsx

@@ -0,0 +1,218 @@
+import { useState } from "react";
+import { TextAttributes } from "@opentui/core";
+import { TickerBadge } from "./ticker-badge";
+import { tokenizeTickerText } from "../utils/ticker-tokenizer";
+import type { InlineTickerCatalogEntry } from "../state/use-inline-tickers";
+import { colors } from "../theme/colors";
+
+export interface MarkdownTextProps {
+  text: string;
+  lineWidth: number;
+  catalog: Record<string, InlineTickerCatalogEntry>;
+  textColor: string;
+  openTicker: (symbol: string) => void;
+}
+
+interface StyledSegment {
+  text: string;
+  bold?: boolean;
+  italic?: boolean;
+  dim?: boolean;
+  code?: boolean;
+  color?: string;
+}
+
+interface ParsedLine {
+  segments: StyledSegment[];
+  heading?: boolean;
+  indent?: number;
+}
+
+const INLINE_RE =
+  /(\*\*(?<bold>[^*]+)\*\*|(?<!\*)\*(?!\*)(?<italic>[^*]+)\*(?!\*)|`(?<code>[^`]+)`|~~(?<strike>[^~]+)~~)/g;
+
+function parseInlineMarkdown(text: string): StyledSegment[] {
+  const segments: StyledSegment[] = [];
+  let cursor = 0;
+
+  INLINE_RE.lastIndex = 0;
+  let match: RegExpExecArray | null;
+  while ((match = INLINE_RE.exec(text)) !== null) {
+    if (match.index > cursor) {
+      segments.push({ text: text.slice(cursor, match.index) });
+    }
+    if (match.groups?.bold != null) {
+      segments.push({ text: match.groups.bold, bold: true });
+    } else if (match.groups?.italic != null) {
+      segments.push({ text: match.groups.italic, italic: true });
+    } else if (match.groups?.code != null) {
+      segments.push({ text: match.groups.code, code: true });
+    } else if (match.groups?.strike != null) {
+      segments.push({ text: match.groups.strike, dim: true });
+    }
+    cursor = match.index + match[0].length;
+  }
+  if (cursor < text.length) {
+    segments.push({ text: text.slice(cursor) });
+  }
+  return segments;
+}
+
+function parseLine(line: string): ParsedLine {
+  // Headings
+  const headingMatch = line.match(/^(#{1,3})\s+(.+)$/);
+  if (headingMatch) {
+    return {
+      heading: true,
+      segments: [{ text: headingMatch[2]!, bold: true, color: colors.borderFocused }],
+    };
+  }
+
+  // List items
+  const listMatch = line.match(/^(\s*)([-*]|\d+\.)\s(.*)$/);
+  if (listMatch) {
+    const indent = listMatch[1]!.length;
+    const marker = listMatch[2]!;
+    const content = listMatch[3]!;
+    return {
+      indent,
+      segments: [
+        { text: `${marker} `, bold: true, color: colors.borderFocused },
+        ...parseInlineMarkdown(content),
+      ],
+    };
+  }
+
+  return { segments: parseInlineMarkdown(line) };
+}
+
+function SegmentSpan({ segment }: { segment: StyledSegment }) {
+  if (segment.code) {
+    return <span fg={colors.textDim}>{segment.text}</span>;
+  }
+  const attrs =
+    (segment.bold ? TextAttributes.BOLD : 0) |
+    (segment.italic ? TextAttributes.ITALIC : 0) |
+    (segment.dim ? TextAttributes.DIM : 0);
+  return (
+    <span
+      fg={segment.color ?? undefined}
+      attributes={attrs || undefined}
+    >
+      {segment.text}
+    </span>
+  );
+}
+
+function MarkdownLine({
+  parsed,
+  lineWidth,
+  catalog,
+  textColor,
+  openTicker,
+  hoveredSymbol,
+  onHover,
+}: {
+  parsed: ParsedLine;
+  lineWidth: number;
+  catalog: Record<string, InlineTickerCatalogEntry>;
+  textColor: string;
+  openTicker: (symbol: string) => void;
+  hoveredSymbol: string | null;
+  onHover: (symbol: string | null) => void;
+}) {
+  const indent = parsed.indent ?? 0;
+  const indentStr = indent > 0 ? " ".repeat(indent) : "";
+
+  // Check if any segment contains ticker symbols
+  const fullText = parsed.segments.map((s) => s.text).join("");
+  const tickerTokens = tokenizeTickerText(fullText);
+  const hasTickers = tickerTokens.some((t) => t.kind === "ticker" && catalog[t.symbol]?.status !== "missing");
+
+  if (!hasTickers) {
+    // Simple case: no tickers, render as styled text
+    return (
+      <text fg={textColor}>
+        {indentStr}
+        {parsed.segments.map((segment, i) => (
+          <SegmentSpan key={i} segment={segment} />
+        ))}
+      </text>
+    );
+  }
+
+  // Complex case: need to handle tickers within styled segments
+  // Render as a flex row to allow badge elements
+  return (
+    <box flexDirection="row" flexWrap="wrap" width={lineWidth}>
+      {indentStr ? <text fg={textColor}>{indentStr}</text> : null}
+      {parsed.segments.map((segment, segIdx) => {
+        const tokens = tokenizeTickerText(segment.text);
+        return tokens.map((token, tokIdx) => {
+          if (token.kind === "text") {
+            if (!token.value) return null;
+            return (
+              <text key={`${segIdx}:${tokIdx}`} fg={textColor}>
+                <SegmentSpan segment={{ ...segment, text: token.value }} />
+              </text>
+            );
+          }
+          const entry = catalog[token.symbol];
+          if (!entry || entry.status === "missing") {
+            return (
+              <text key={`${segIdx}:${tokIdx}`} fg={textColor}>
+                <SegmentSpan segment={{ ...segment, text: token.value }} />
+              </text>
+            );
+          }
+          return (
+            <TickerBadge
+              key={`badge:${segIdx}:${tokIdx}:${token.symbol}`}
+              symbol={token.symbol}
+              status={entry.status}
+              quote={entry.quote}
+              hovered={hoveredSymbol === token.symbol}
+              onHoverStart={() => onHover(token.symbol)}
+              onHoverEnd={() => onHover(null)}
+              onOpen={openTicker}
+            />
+          );
+        });
+      })}
+    </box>
+  );
+}
+
+export function MarkdownText({
+  text,
+  lineWidth,
+  catalog,
+  textColor,
+  openTicker,
+}: MarkdownTextProps) {
+  const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
+  const lines = text.split("\n");
+
+  return (
+    <box flexDirection="column" width={lineWidth}>
+      {lines.map((line, index) => {
+        if (line.trim() === "") {
+          return <text key={index}>{" "}</text>;
+        }
+        const parsed = parseLine(line);
+        return (
+          <MarkdownLine
+            key={index}
+            parsed={parsed}
+            lineWidth={lineWidth}
+            catalog={catalog}
+            textColor={textColor}
+            openTicker={openTicker}
+            hoveredSymbol={hoveredSymbol}
+            onHover={setHoveredSymbol}
+          />
+        );
+      })}
+    </box>
+  );
+}