gloomberb 0.2.0 → 0.3.1

package/src/plugins/prediction-markets/detail/book.tsx

@@ -0,0 +1,118 @@
+import { TextAttributes } from "@opentui/core";
+import { colors } from "../../../theme/colors";
+import { formatNumber, padTo } from "../../../utils/format";
+import { formatPredictionProbability } from "../metrics";
+import type {
+  PredictionBookLevel,
+  PredictionMarketDetail,
+  PredictionOrderPreviewIntent,
+} from "../types";
+
+function BookTable({
+  title,
+  levels,
+  onSelect,
+}: {
+  title: string;
+  levels: PredictionBookLevel[];
+  onSelect: (level: PredictionBookLevel) => void;
+}) {
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <box height={1}>
+        <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+          {title}
+        </text>
+      </box>
+      <box height={1}>
+        <text fg={colors.textDim}>
+          {padTo("PRICE", 8)} {padTo("SIZE", 10)}
+        </text>
+      </box>
+      {levels.slice(0, 10).map((level) => (
+        <box
+          key={`${title}:${level.price}:${level.size}`}
+          height={1}
+          onMouseDown={(event) => {
+            event.preventDefault();
+            onSelect(level);
+          }}
+        >
+          <text fg={colors.text}>
+            {`${padTo(formatPredictionProbability(level.price), 8)} ${padTo(formatNumber(level.size, 0), 10, "right")}`}
+          </text>
+        </box>
+      ))}
+      {levels.length === 0 && <text fg={colors.textDim}>No levels.</text>}
+    </box>
+  );
+}
+
+export function PredictionMarketBookView({
+  detail,
+  onPreviewOrder,
+}: {
+  detail: PredictionMarketDetail;
+  onPreviewOrder: (intent: PredictionOrderPreviewIntent) => void;
+}) {
+  return (
+    <box flexDirection="column" gap={1}>
+      <box flexDirection="row" gap={2}>
+        <BookTable
+          title="YES Bids"
+          levels={detail.book.yesBids}
+          onSelect={(level) =>
+            onPreviewOrder({
+              marketKey: detail.summary.key,
+              outcome: "yes",
+              side: "buy",
+              price: level.price,
+              size: level.size,
+            })
+          }
+        />
+        <BookTable
+          title="YES Asks"
+          levels={detail.book.yesAsks}
+          onSelect={(level) =>
+            onPreviewOrder({
+              marketKey: detail.summary.key,
+              outcome: "yes",
+              side: "sell",
+              price: level.price,
+              size: level.size,
+            })
+          }
+        />
+      </box>
+      <box flexDirection="row" gap={2}>
+        <BookTable
+          title="NO Bids"
+          levels={detail.book.noBids}
+          onSelect={(level) =>
+            onPreviewOrder({
+              marketKey: detail.summary.key,
+              outcome: "no",
+              side: "buy",
+              price: level.price,
+              size: level.size,
+            })
+          }
+        />
+        <BookTable
+          title="NO Asks"
+          levels={detail.book.noAsks}
+          onSelect={(level) =>
+            onPreviewOrder({
+              marketKey: detail.summary.key,
+              outcome: "no",
+              side: "sell",
+              price: level.price,
+              size: level.size,
+            })
+          }
+        />
+      </box>
+    </box>
+  );
+}

package/src/plugins/prediction-markets/detail/outcomes.tsx

@@ -0,0 +1,102 @@
+import { TextAttributes } from "@opentui/core";
+import { colors } from "../../../theme/colors";
+import { padTo } from "../../../utils/format";
+import {
+  formatPredictionMetric,
+  formatPredictionPercent,
+  getPredictionProbabilityColor,
+} from "../metrics";
+import type { PredictionListRow } from "../types";
+import { sortPredictionOutcomeMarkets } from "../outcome-order";
+
+export function PredictionMarketOutcomesView({
+  detailWidth,
+  onSelectMarket,
+  selectedMarketKey,
+  selectedRow,
+}: {
+  detailWidth: number;
+  onSelectMarket: (marketKey: string) => void;
+  selectedMarketKey: string;
+  selectedRow: PredictionListRow;
+}) {
+  if (selectedRow.kind !== "group") return null;
+
+  const sortedOutcomes = sortPredictionOutcomeMarkets(selectedRow.markets);
+  const labelWidth = Math.max(detailWidth - 22, 12);
+
+  return (
+    <box flexDirection="column">
+      <box flexDirection="column">
+        <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+          Outcomes
+        </text>
+        <text fg={colors.textDim}>Ranked by implied YES probability.</text>
+      </box>
+
+      <box flexDirection="row" height={1}>
+        <box width={labelWidth + 1}>
+          <text fg={colors.textDim}>{padTo("TARGET", labelWidth)}</text>
+        </box>
+        <box width={8}>
+          <text fg={colors.textDim}>{padTo("ODDS", 7, "right")}</text>
+        </box>
+        <box width={13}>
+          <text fg={colors.textDim}>{padTo("24H VOL", 12, "right")}</text>
+        </box>
+      </box>
+
+      {sortedOutcomes.map((market, index) => {
+        const selected = market.key === selectedMarketKey;
+        return (
+          <box
+            key={market.key}
+            flexDirection="row"
+            height={1}
+            backgroundColor={selected ? colors.selected : undefined}
+            onMouseDown={(event) => {
+              event.preventDefault();
+              onSelectMarket(market.key);
+            }}
+          >
+            <box width={labelWidth + 1}>
+              <text
+                fg={selected ? colors.selectedText : colors.text}
+                attributes={selected ? TextAttributes.BOLD : 0}
+              >
+                {padTo(
+                  `${index === 0 ? "TOP " : ""}${market.marketLabel}`,
+                  labelWidth,
+                )}
+              </text>
+            </box>
+            <box width={8}>
+              <text
+                fg={
+                  selected
+                    ? colors.selectedText
+                    : getPredictionProbabilityColor(market.yesPrice) ??
+                      colors.text
+                }
+              >
+                {padTo(formatPredictionPercent(market.yesPrice), 7, "right")}
+              </text>
+            </box>
+            <box width={13}>
+              <text fg={selected ? colors.selectedText : colors.textDim}>
+                {padTo(
+                  formatPredictionMetric(
+                    market.volume24h,
+                    market.volume24hUnit,
+                  ),
+                  12,
+                  "right",
+                )}
+              </text>
+            </box>
+          </box>
+        );
+      })}
+    </box>
+  );
+}

package/src/plugins/prediction-markets/detail/overview.tsx

@@ -0,0 +1,73 @@
+import { TextAttributes } from "@opentui/core";
+import { colors } from "../../../theme/colors";
+import { formatPercentRaw } from "../../../utils/format";
+import { PredictionMarketChart } from "../chart";
+import type {
+  PredictionHistoryRange,
+  PredictionListRow,
+  PredictionMarketDetail,
+  PredictionMarketSummary,
+} from "../types";
+import { PredictionMarketOutcomesView } from "./outcomes";
+import { SummaryLink } from "./shared";
+
+export function PredictionMarketOverviewView({
+  detail,
+  detailWidth,
+  height,
+  historyRange,
+  onHistoryRangeChange,
+  onSelectMarket,
+  selectedRow,
+  summary,
+}: {
+  detail: PredictionMarketDetail | null;
+  detailWidth: number;
+  height: number;
+  historyRange: PredictionHistoryRange;
+  onHistoryRangeChange: (range: PredictionHistoryRange) => void;
+  onSelectMarket: (marketKey: string) => void;
+  selectedRow: PredictionListRow | null;
+  summary: PredictionMarketSummary;
+}) {
+  return (
+    <box flexDirection="column" gap={1}>
+      {selectedRow?.kind === "group" && (
+        <PredictionMarketOutcomesView
+          detailWidth={detailWidth}
+          onSelectMarket={onSelectMarket}
+          selectedMarketKey={summary.key}
+          selectedRow={selectedRow}
+        />
+      )}
+      <PredictionMarketChart
+        history={detail?.history ?? []}
+        width={detailWidth}
+        height={Math.max(Math.floor(height * 0.36), 10)}
+        range={historyRange}
+        onRangeSelect={onHistoryRangeChange}
+      />
+      <SummaryLink
+        url={summary.url}
+        maxLength={Math.max(detailWidth - 8, 12)}
+      />
+      {summary.description && (
+        <box flexDirection="column">
+          <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+            Description
+          </text>
+          <text fg={colors.text}>{summary.description}</text>
+        </box>
+      )}
+      <box height={1}>
+        <text fg={colors.textDim}>
+          {detail?.history &&
+          detail.history.length > 1 &&
+          summary.yesPrice != null
+            ? `Range move ${formatPercentRaw((((detail.history[detail.history.length - 1]?.close ?? summary.yesPrice) - (detail.history[0]?.close ?? summary.yesPrice)) / Math.max(detail.history[0]?.close ?? summary.yesPrice, 0.0001)) * 100)}`
+            : "No extended move data."}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/plugins/prediction-markets/detail/pane.tsx

@@ -0,0 +1,308 @@
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import type { RefObject } from "react";
+import { Spinner, TabBar } from "../../../components";
+import { EmptyState } from "../../../components/ui/status";
+import { colors } from "../../../theme/colors";
+import { padTo } from "../../../utils/format";
+import { DETAIL_TABS } from "../navigation";
+import {
+  formatPredictionEndsAt,
+  formatPredictionMetric,
+  formatPredictionPercent,
+  formatPredictionProbability,
+  formatPredictionSpread,
+  getPredictionProbabilityColor,
+} from "../metrics";
+import type {
+  PredictionDetailTab,
+  PredictionHistoryRange,
+  PredictionListRow,
+  PredictionMarketDetail,
+  PredictionMarketSummary,
+  PredictionOrderPreviewIntent,
+} from "../types";
+import { PredictionMarketBookView } from "./book";
+import { PredictionMarketOverviewView } from "./overview";
+import { PredictionMarketRulesView } from "./rules";
+import { truncatePredictionText } from "./shared";
+import { PredictionMarketTradesView } from "./trades";
+
+interface MetricCell {
+  label: string;
+  value: string;
+  width: number;
+  color?: string;
+}
+
+function formatVenueLabel(venue: PredictionMarketSummary["venue"]): string {
+  return venue === "polymarket" ? "Polymarket" : "Kalshi";
+}
+
+function MetricLabelRow({ metrics }: { metrics: MetricCell[] }) {
+  return (
+    <box flexDirection="row" height={1}>
+      {metrics.map((metric) => (
+        <box key={metric.label} width={metric.width + 1}>
+          <text fg={colors.textDim}>{padTo(metric.label, metric.width)}</text>
+        </box>
+      ))}
+    </box>
+  );
+}
+
+function MetricValueRow({ metrics }: { metrics: MetricCell[] }) {
+  return (
+    <box flexDirection="row" height={1}>
+      {metrics.map((metric) => (
+        <box key={metric.label} width={metric.width + 1}>
+          <text
+            fg={metric.color ?? colors.textBright}
+            attributes={TextAttributes.BOLD}
+          >
+            {padTo(metric.value, metric.width)}
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}
+
+export function PredictionMarketDetailPane({
+  detail,
+  detailError,
+  detailLoadCount,
+  detailTab,
+  detailWidth,
+  focused,
+  height,
+  historyRange,
+  onDetailTabChange,
+  onHistoryRangeChange,
+  onPreviewOrder,
+  onSelectMarket,
+  selectedRow,
+  selectedSummary,
+  scrollRef,
+}: {
+  detail: PredictionMarketDetail | null;
+  detailError: string | null;
+  detailLoadCount: number;
+  detailTab: PredictionDetailTab;
+  detailWidth: number;
+  focused: boolean;
+  height: number;
+  historyRange: PredictionHistoryRange;
+  onDetailTabChange: (tab: PredictionDetailTab) => void;
+  onHistoryRangeChange: (range: PredictionHistoryRange) => void;
+  onPreviewOrder: (intent: PredictionOrderPreviewIntent) => void;
+  onSelectMarket: (marketKey: string) => void;
+  selectedRow: PredictionListRow | null;
+  selectedSummary: PredictionMarketSummary | null;
+  scrollRef: RefObject<ScrollBoxRenderable | null>;
+}) {
+  if (!selectedSummary) {
+    return (
+      <box flexGrow={1} justifyContent="center">
+        <EmptyState
+          title="Select a market."
+          hint="Use the table on the left to inspect live prediction market detail."
+        />
+      </box>
+    );
+  }
+
+  const summaryMetrics = detail?.summary ?? selectedSummary;
+  const detailTitle =
+    selectedRow?.kind === "group" ? selectedRow.title : summaryMetrics.title;
+  const selectedLabel = truncatePredictionText(
+    selectedSummary.marketLabel,
+    Math.max(detailWidth - 18, 12),
+  );
+  const detailSubtitleParts = [formatVenueLabel(summaryMetrics.venue)];
+  if (selectedRow?.kind === "group") {
+    if (summaryMetrics.category) detailSubtitleParts.push(summaryMetrics.category);
+    detailSubtitleParts.push(`${selectedRow.marketCount} targets`);
+  } else if (
+    summaryMetrics.eventLabel &&
+    summaryMetrics.eventLabel !== summaryMetrics.title
+  ) {
+    detailSubtitleParts.push(summaryMetrics.eventLabel);
+  } else if (summaryMetrics.category) {
+    detailSubtitleParts.push(summaryMetrics.category);
+  }
+  const endsLabel = formatPredictionEndsAt(
+    selectedRow?.kind === "group" ? selectedRow.endsAt : summaryMetrics.endsAt,
+  );
+  if (endsLabel !== "—") detailSubtitleParts.push(endsLabel);
+  const detailSubtitle = detailSubtitleParts.join(" · ");
+  const primaryMetrics: MetricCell[] = [
+    {
+      label: "YES",
+      value: formatPredictionProbability(summaryMetrics.yesPrice),
+      color: getPredictionProbabilityColor(summaryMetrics.yesPrice),
+      width: 12,
+    },
+    {
+      label: "NO",
+      value: formatPredictionProbability(summaryMetrics.noPrice),
+      color: getPredictionProbabilityColor(summaryMetrics.noPrice),
+      width: 12,
+    },
+    {
+      label: "24H VOL",
+      value: formatPredictionMetric(
+        summaryMetrics.volume24h,
+        summaryMetrics.volume24hUnit ?? "usd",
+      ),
+      width: 16,
+    },
+    {
+      label: "TOTAL VOL",
+      value: formatPredictionMetric(
+        summaryMetrics.totalVolume,
+        summaryMetrics.totalVolumeUnit ?? "usd",
+      ),
+      width: 16,
+    },
+  ];
+  const secondaryMetrics: MetricCell[] = [
+    {
+      label: "OI",
+      value: formatPredictionMetric(
+        summaryMetrics.openInterest,
+        summaryMetrics.openInterestUnit ?? "usd",
+      ),
+      width: 16,
+    },
+    {
+      label: "SPREAD",
+      value: formatPredictionSpread(summaryMetrics.spread),
+      width: 16,
+    },
+    {
+      label: "LAST",
+      value: formatPredictionProbability(summaryMetrics.lastTradePrice),
+      color: colors.textBright,
+      width: 16,
+    },
+  ];
+  const relatedSiblings =
+    selectedRow?.kind === "group"
+      ? []
+      : (detail?.siblings
+          ?.filter((sibling) => sibling.key !== selectedSummary.key)
+          .slice(
+            0,
+            Math.max(Math.min(Math.floor((detailWidth - 10) / 18), 3), 0),
+          ) ?? []);
+  const headerHeight = selectedRow?.kind === "group" ? 4 : 3;
+  const detailLoading = detailLoadCount > 0 && !detail;
+  const titleColor = focused ? colors.textBright : colors.text;
+
+  return (
+    <>
+      <box flexDirection="column" height={headerHeight} paddingBottom={1}>
+        <box flexDirection="row" height={1}>
+          <text fg={titleColor} attributes={TextAttributes.BOLD}>
+            {detailTitle}
+          </text>
+        </box>
+        <box flexDirection="row" height={1}>
+          <text fg={colors.textDim}>{detailSubtitle}</text>
+        </box>
+        {selectedRow?.kind === "group" && (
+          <box flexDirection="row" height={1}>
+            <text fg={colors.textDim}>Top target:</text>
+            <box width={1} />
+            <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+              {selectedLabel}
+            </text>
+            <box width={1} />
+            <text fg={getPredictionProbabilityColor(selectedSummary.yesPrice)}>
+              {formatPredictionPercent(selectedSummary.yesPrice)}
+            </text>
+          </box>
+        )}
+      </box>
+
+      <box flexDirection="column" height={4} paddingBottom={1}>
+        <MetricLabelRow metrics={primaryMetrics} />
+        <MetricValueRow metrics={primaryMetrics} />
+        <MetricLabelRow metrics={secondaryMetrics} />
+        <MetricValueRow metrics={secondaryMetrics} />
+      </box>
+
+      {relatedSiblings.length > 0 && (
+        <box flexDirection="row" gap={1} height={1} paddingBottom={1}>
+          <text fg={colors.textDim}>Related:</text>
+          {relatedSiblings.map((sibling) => (
+            <box
+              key={sibling.key}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                onSelectMarket(sibling.key);
+              }}
+            >
+              <text fg={colors.text}>
+                {`${truncatePredictionText(sibling.label, 10)} ${formatPredictionProbability(sibling.yesPrice)}`}
+              </text>
+            </box>
+          ))}
+        </box>
+      )}
+
+      <box paddingBottom={1}>
+        <TabBar
+          tabs={DETAIL_TABS.map((tab) => ({
+            label: tab.label,
+            value: tab.value,
+          }))}
+          activeValue={detailTab}
+          onSelect={(value) => onDetailTabChange(value as PredictionDetailTab)}
+          compact
+        />
+      </box>
+
+      {detailError && !detail && (
+        <box paddingBottom={1}>
+          <text fg={colors.negative}>{detailError}</text>
+        </box>
+      )}
+
+      <scrollbox ref={scrollRef} flexGrow={1} scrollY>
+        {detailLoading && (
+          <box height={1} paddingBottom={1}>
+            <Spinner label="Loading market detail..." />
+          </box>
+        )}
+        {detailTab === "overview" && (
+          <PredictionMarketOverviewView
+            detail={detail}
+            detailWidth={detailWidth}
+            height={height}
+            historyRange={historyRange}
+            onHistoryRangeChange={onHistoryRangeChange}
+            onSelectMarket={onSelectMarket}
+            selectedRow={selectedRow}
+            summary={summaryMetrics}
+          />
+        )}
+
+        {detailTab === "book" && detail && (
+          <PredictionMarketBookView
+            detail={detail}
+            onPreviewOrder={onPreviewOrder}
+          />
+        )}
+
+        {detailTab === "trades" && (
+          <PredictionMarketTradesView trades={detail?.trades ?? []} />
+        )}
+
+        {detailTab === "rules" && (
+          <PredictionMarketRulesView rules={detail?.rules ?? []} />
+        )}
+      </scrollbox>
+    </>
+  );
+}

package/src/plugins/prediction-markets/detail/rules.tsx

@@ -0,0 +1,16 @@
+import { colors } from "../../../theme/colors";
+
+export function PredictionMarketRulesView({ rules }: { rules: string[] }) {
+  return (
+    <box flexDirection="column" gap={1}>
+      {rules.map((rule, index) => (
+        <box key={`${index}:${rule.slice(0, 24)}`} flexDirection="column">
+          <text fg={colors.text}>{rule}</text>
+        </box>
+      ))}
+      {rules.length === 0 && (
+        <text fg={colors.textDim}>No rule text returned by the venue.</text>
+      )}
+    </box>
+  );
+}

package/src/plugins/prediction-markets/detail/shared.tsx

@@ -0,0 +1,29 @@
+import { TextAttributes } from "@opentui/core";
+import { colors } from "../../../theme/colors";
+import { openUrl } from "../../../components/ui/external-link";
+
+export function truncatePredictionText(
+  value: string,
+  maxLength: number,
+): string {
+  if (value.length <= maxLength) return value;
+  if (maxLength <= 3) return value.slice(0, maxLength);
+  return `${value.slice(0, maxLength - 3)}...`;
+}
+
+export function SummaryLink({
+  url,
+  maxLength,
+}: {
+  url: string;
+  maxLength: number;
+}) {
+  return (
+    <box height={1} onMouseDown={() => openUrl(url)}>
+      <text fg={colors.textDim}>{"Venue: "}</text>
+      <text fg={colors.textBright} attributes={TextAttributes.UNDERLINE}>
+        {truncatePredictionText(url, maxLength)}
+      </text>
+    </box>
+  );
+}

package/src/plugins/prediction-markets/detail/trades.tsx

@@ -0,0 +1,30 @@
+import { colors } from "../../../theme/colors";
+import { formatNumber, padTo } from "../../../utils/format";
+import { formatPredictionProbability } from "../metrics";
+import type { PredictionTrade } from "../types";
+
+export function PredictionMarketTradesView({
+  trades,
+}: {
+  trades: PredictionTrade[];
+}) {
+  return (
+    <box flexDirection="column">
+      <box height={1}>
+        <text
+          fg={colors.textDim}
+        >{`${padTo("TIME", 16)} ${padTo("SIDE", 6)} ${padTo("OUT", 4)} ${padTo("PRICE", 8)} ${padTo("SIZE", 10)}`}</text>
+      </box>
+      {trades.slice(0, 30).map((trade) => (
+        <box key={trade.id} height={1}>
+          <text fg={trade.side === "buy" ? colors.positive : colors.negative}>
+            {`${padTo(new Date(trade.timestamp).toLocaleTimeString("en-US", { hour12: false }), 16)} ${padTo(trade.side.toUpperCase(), 6)} ${padTo(trade.outcome.toUpperCase(), 4)} ${padTo(formatPredictionProbability(trade.price), 8)} ${padTo(formatNumber(trade.size, 0), 10, "right")}`}
+          </text>
+        </box>
+      ))}
+      {trades.length === 0 && (
+        <text fg={colors.textDim}>No recent trades.</text>
+      )}
+    </box>
+  );
+}