@spfunctions/cli 1.4.4 → 1.4.5

package/dist/tui/layout.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Layout Engine — divide terminal into named regions
+ */
+export interface Region {
+    name: string;
+    row: number;
+    col: number;
+    width: number;
+    height: number;
+}
+/** Compute OVERVIEW layout (6 panels + status bars) */
+export declare function overviewLayout(cols: number, rows: number): Region[];
+/** Full-screen region (for DETAIL, LIQUIDITY, WHATIF modes) */
+export declare function fullLayout(cols: number, rows: number): Region;
+/** Narrow layout for terminals < 80 cols (single column) */
+export declare function narrowLayout(cols: number, rows: number): Region[];

package/dist/tui/layout.js

@@ -0,0 +1,41 @@
+"use strict";
+/**
+ * Layout Engine — divide terminal into named regions
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.overviewLayout = overviewLayout;
+exports.fullLayout = fullLayout;
+exports.narrowLayout = narrowLayout;
+/** Compute OVERVIEW layout (6 panels + status bars) */
+function overviewLayout(cols, rows) {
+    const contentRows = rows - 2; // -1 status bar, -1 command bar
+    const leftWidth = Math.floor(cols * 0.55);
+    const rightWidth = cols - leftWidth - 1; // -1 for vertical divider
+    const rightCol = leftWidth + 1;
+    // Vertical split: 45% top, 25% mid, 30% bottom
+    const topH = Math.max(Math.floor(contentRows * 0.45), 6);
+    const midH = Math.max(Math.floor(contentRows * 0.25), 4);
+    const botH = Math.max(contentRows - topH - midH, 3);
+    return [
+        { name: 'positions', row: 1, col: 0, width: leftWidth, height: topH },
+        { name: 'thesis', row: 1, col: rightCol, width: rightWidth, height: topH },
+        { name: 'edges', row: 1 + topH, col: 0, width: leftWidth, height: midH },
+        { name: 'upcoming', row: 1 + topH, col: rightCol, width: rightWidth, height: midH },
+        { name: 'orders', row: 1 + topH + midH, col: 0, width: leftWidth, height: botH },
+        { name: 'signals', row: 1 + topH + midH, col: rightCol, width: rightWidth, height: botH },
+    ];
+}
+/** Full-screen region (for DETAIL, LIQUIDITY, WHATIF modes) */
+function fullLayout(cols, rows) {
+    return { name: 'main', row: 1, col: 0, width: cols, height: rows - 2 };
+}
+/** Narrow layout for terminals < 80 cols (single column) */
+function narrowLayout(cols, rows) {
+    const contentRows = rows - 2;
+    const h = Math.floor(contentRows / 3);
+    return [
+        { name: 'positions', row: 1, col: 0, width: cols, height: h },
+        { name: 'edges', row: 1 + h, col: 0, width: cols, height: h },
+        { name: 'thesis', row: 1 + 2 * h, col: 0, width: cols, height: contentRows - 2 * h },
+    ];
+}

package/dist/tui/screen.d.ts

@@ -0,0 +1,33 @@
+/**
+ * ScreenBuffer — Double-buffered terminal renderer
+ *
+ * Only writes changed cells to stdout (no flickering).
+ * This is how Bloomberg terminals stay "alive" without blinking.
+ */
+export interface Cell {
+    char: string;
+    fg: string;
+    bg: string;
+}
+export declare class ScreenBuffer {
+    private front;
+    private back;
+    cols: number;
+    rows: number;
+    constructor();
+    private createBuffer;
+    /** Write a plain string at position. Strips ANSI codes for positioning. */
+    write(row: number, col: number, text: string, fg?: string, bg?: string): void;
+    /** Write styled text — supports inline ANSI codes (parses them for fg tracking) */
+    writeStyled(row: number, col: number, segments: Array<{
+        text: string;
+        fg?: string;
+        bg?: string;
+    }>): void;
+    /** Fill a rectangular region with a character */
+    fill(row: number, col: number, width: number, height: number, char?: string, fg?: string, bg?: string): void;
+    /** Diff front vs back, output only changed cells */
+    flush(): void;
+    /** Handle terminal resize */
+    resize(): void;
+}

package/dist/tui/screen.js

@@ -0,0 +1,102 @@
+"use strict";
+/**
+ * ScreenBuffer — Double-buffered terminal renderer
+ *
+ * Only writes changed cells to stdout (no flickering).
+ * This is how Bloomberg terminals stay "alive" without blinking.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenBuffer = void 0;
+class ScreenBuffer {
+    front;
+    back;
+    cols;
+    rows;
+    constructor() {
+        this.cols = process.stdout.columns || 120;
+        this.rows = process.stdout.rows || 40;
+        this.front = this.createBuffer();
+        this.back = this.createBuffer();
+    }
+    createBuffer() {
+        return Array.from({ length: this.rows }, () => Array.from({ length: this.cols }, () => ({ char: ' ', fg: '', bg: '' })));
+    }
+    /** Write a plain string at position. Strips ANSI codes for positioning. */
+    write(row, col, text, fg = '', bg = '') {
+        if (row < 0 || row >= this.rows)
+            return;
+        let pos = col;
+        for (let i = 0; i < text.length && pos < this.cols; i++) {
+            if (pos >= 0) {
+                this.back[row][pos] = { char: text[i], fg, bg };
+            }
+            pos++;
+        }
+    }
+    /** Write styled text — supports inline ANSI codes (parses them for fg tracking) */
+    writeStyled(row, col, segments) {
+        let pos = col;
+        for (const seg of segments) {
+            for (let i = 0; i < seg.text.length && pos < this.cols; i++) {
+                if (row >= 0 && row < this.rows && pos >= 0) {
+                    this.back[row][pos] = { char: seg.text[i], fg: seg.fg || '', bg: seg.bg || '' };
+                }
+                pos++;
+            }
+        }
+    }
+    /** Fill a rectangular region with a character */
+    fill(row, col, width, height, char = ' ', fg = '', bg = '') {
+        for (let r = row; r < row + height && r < this.rows; r++) {
+            for (let c = col; c < col + width && c < this.cols; c++) {
+                if (r >= 0 && c >= 0) {
+                    this.back[r][c] = { char, fg, bg };
+                }
+            }
+        }
+    }
+    /** Diff front vs back, output only changed cells */
+    flush() {
+        let output = '';
+        let lastFg = '';
+        let lastBg = '';
+        for (let r = 0; r < this.rows; r++) {
+            for (let c = 0; c < this.cols; c++) {
+                const f = this.front[r][c];
+                const b = this.back[r][c];
+                if (f.char !== b.char || f.fg !== b.fg || f.bg !== b.bg) {
+                    // Move cursor
+                    output += `\x1b[${r + 1};${c + 1}H`;
+                    // Set colors if changed
+                    if (b.fg !== lastFg || b.bg !== lastBg) {
+                        output += '\x1b[0m';
+                        if (b.fg)
+                            output += b.fg;
+                        if (b.bg)
+                            output += b.bg;
+                        lastFg = b.fg;
+                        lastBg = b.bg;
+                    }
+                    output += b.char;
+                }
+            }
+        }
+        if (output) {
+            output += '\x1b[0m'; // reset at end
+            process.stdout.write(output);
+        }
+        // Swap: back becomes front, create fresh back
+        this.front = this.back;
+        this.back = this.createBuffer();
+    }
+    /** Handle terminal resize */
+    resize() {
+        this.cols = process.stdout.columns || 120;
+        this.rows = process.stdout.rows || 40;
+        this.front = this.createBuffer();
+        this.back = this.createBuffer();
+        // Force full redraw
+        process.stdout.write('\x1b[2J');
+    }
+}
+exports.ScreenBuffer = ScreenBuffer;

package/dist/tui/state.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Dashboard state — single source of truth
+ */
+export type Mode = 'overview' | 'detail' | 'liquidity' | 'whatif' | 'trade';
+export type FocusArea = 'positions' | 'edges';
+export interface DashboardState {
+    mode: Mode;
+    prevMode: Mode;
+    selectedIndex: number;
+    focusArea: FocusArea;
+    detailTicker: string | null;
+    liquidityTopic: string;
+    liquiditySelectedIndex: number;
+    whatifScenarioIndex: number;
+    whatifResult: any | null;
+    whatifThesisId: string | null;
+    tradeParams: {
+        ticker: string;
+        side: string;
+        action: string;
+        qty: number;
+        price: number;
+    } | null;
+    tradeCountdown: number;
+    tradeField: 'qty' | 'price';
+    positions: any[];
+    theses: any[];
+    contexts: Map<string, any>;
+    edges: any[];
+    orders: any[];
+    signals: any[];
+    events: any[];
+    balance: number;
+    candleCache: Map<string, any[]>;
+    liquidityData: Map<string, any[]>;
+    error: string | null;
+    lastRefresh: Record<string, number>;
+    exchangeOpen: boolean | null;
+}
+export declare function initialState(): DashboardState;

package/dist/tui/state.js

@@ -0,0 +1,36 @@
+"use strict";
+/**
+ * Dashboard state — single source of truth
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initialState = initialState;
+function initialState() {
+    return {
+        mode: 'overview',
+        prevMode: 'overview',
+        selectedIndex: 0,
+        focusArea: 'positions',
+        detailTicker: null,
+        liquidityTopic: 'oil',
+        liquiditySelectedIndex: 0,
+        whatifScenarioIndex: 0,
+        whatifResult: null,
+        whatifThesisId: null,
+        tradeParams: null,
+        tradeCountdown: -1,
+        tradeField: 'qty',
+        positions: [],
+        theses: [],
+        contexts: new Map(),
+        edges: [],
+        orders: [],
+        signals: [],
+        events: [],
+        balance: 0,
+        candleCache: new Map(),
+        liquidityData: new Map(),
+        error: null,
+        lastRefresh: {},
+        exchangeOpen: null,
+    };
+}

package/dist/tui/widgets/commandbar.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Command bar — bottom row of the dashboard
+ *
+ * Context-sensitive key hints that change based on current mode.
+ */
+import type { ScreenBuffer } from '../screen.js';
+import type { DashboardState } from '../state.js';
+export declare function renderCommandBar(screen: ScreenBuffer, row: number, state: DashboardState): void;

package/dist/tui/widgets/commandbar.js

@@ -0,0 +1,82 @@
+"use strict";
+/**
+ * Command bar — bottom row of the dashboard
+ *
+ * Context-sensitive key hints that change based on current mode.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderCommandBar = renderCommandBar;
+const border_js_1 = require("../border.js");
+const CMD_BG = (0, border_js_1.bgRgb)(22, 22, 26);
+const HINTS = {
+    overview: [
+        { key: 'j/k', label: 'nav' },
+        { key: 'Enter', label: 'detail' },
+        { key: 'Tab', label: 'focus' },
+        { key: 'l', label: 'liquidity' },
+        { key: 'w', label: 'whatif' },
+        { key: 'b', label: 'buy' },
+        { key: 's', label: 'sell' },
+        { key: 'e', label: 'evaluate' },
+        { key: 'r', label: 'refresh' },
+        { key: 'q', label: 'quit' },
+    ],
+    detail: [
+        { key: 'b', label: 'buy' },
+        { key: 's', label: 'sell' },
+        { key: 'w', label: 'whatif' },
+        { key: 'Esc', label: 'back' },
+        { key: 'q', label: 'quit' },
+    ],
+    liquidity: [
+        { key: 'j/k', label: 'nav' },
+        { key: 'Tab', label: 'topic' },
+        { key: 'b', label: 'buy' },
+        { key: 'r', label: 'refresh' },
+        { key: 'Esc', label: 'back' },
+        { key: 'q', label: 'quit' },
+    ],
+    whatif: [
+        { key: 'j/k', label: 'nav' },
+        { key: 'Enter', label: 'apply' },
+        { key: 'Esc', label: 'back' },
+        { key: 'q', label: 'quit' },
+    ],
+    trade: [
+        { key: '\u2191\u2193', label: 'adjust' },
+        { key: 'Tab', label: 'field' },
+        { key: 'Enter', label: 'confirm' },
+        { key: 'Esc', label: 'cancel' },
+    ],
+};
+function renderCommandBar(screen, row, state) {
+    const w = screen.cols;
+    // Fill background
+    screen.fill(row, 0, w, 1, ' ', '', CMD_BG);
+    const hints = HINTS[state.mode] || HINTS.overview;
+    let col = 1;
+    for (const hint of hints) {
+        if (col + hint.key.length + hint.label.length + 4 > w)
+            break;
+        // Key in white/emerald, label in dim
+        screen.write(row, col, hint.key, border_js_1.CLR.emerald, CMD_BG);
+        col += hint.key.length;
+        screen.write(row, col, ' ', border_js_1.CLR.dim, CMD_BG);
+        col++;
+        screen.write(row, col, hint.label, border_js_1.CLR.dim, CMD_BG);
+        col += hint.label.length;
+        // Separator
+        col += 2;
+        if (col < w - 2) {
+            screen.write(row, col - 1, '│', border_js_1.CLR.veryDim, CMD_BG);
+        }
+    }
+    // Error display on the right
+    if (state.error) {
+        const errStr = state.error.slice(0, 30);
+        const errCol = w - errStr.length - 2;
+        if (errCol > col) {
+            screen.write(row, errCol, errStr, border_js_1.CLR.red, CMD_BG);
+        }
+    }
+}

package/dist/tui/widgets/detail.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Detail view — full-screen position deep-dive
+ *
+ * Shows position summary, P&L chart, causal tree nodes, and orderbook snapshot.
+ */
+import type { ScreenBuffer } from '../screen.js';
+import type { Region } from '../layout.js';
+import type { DashboardState } from '../state.js';
+export declare function renderDetail(screen: ScreenBuffer, region: Region, state: DashboardState): void;

package/dist/tui/widgets/detail.js

@@ -0,0 +1,151 @@
+"use strict";
+/**
+ * Detail view — full-screen position deep-dive
+ *
+ * Shows position summary, P&L chart, causal tree nodes, and orderbook snapshot.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderDetail = renderDetail;
+const border_js_1 = require("../border.js");
+const chart_js_1 = require("../chart.js");
+function renderDetail(screen, region, state) {
+    (0, border_js_1.drawBorder)(screen, region, 'POSITION DETAIL');
+    const x = region.col + 2;
+    const w = region.width - 4;
+    // Find selected position
+    const pos = state.positions.find(p => (p.ticker_symbol || p.ticker) === state.detailTicker) || state.positions[0];
+    if (!pos) {
+        screen.write(region.row + 2, x, 'No position selected', border_js_1.CLR.dim);
+        return;
+    }
+    const ticker = pos.ticker_symbol || pos.ticker || '???';
+    const qty = pos.quantity ?? 0;
+    const entry = pos.average_price_paid ?? pos.cost_basis ?? 0;
+    const current = pos.current_value ?? entry;
+    const pnl = (current - entry) * qty;
+    const pnlDollars = pnl / 100;
+    const pnlColor = pnl >= 0 ? border_js_1.CLR.green : border_js_1.CLR.red;
+    const side = pos.side || 'yes';
+    // ── Top: Position Summary (3 rows) ──
+    let line = 1;
+    screen.writeStyled(region.row + line, x, [
+        { text: (0, border_js_1.fit)(ticker, 30), fg: border_js_1.CLR.white },
+        { text: `  ${side.toUpperCase()} `, fg: border_js_1.CLR.emerald },
+        { text: `  qty: ${qty}`, fg: border_js_1.CLR.dim },
+    ]);
+    line++;
+    screen.writeStyled(region.row + line, x, [
+        { text: `Entry: ${entry.toFixed(0)}\u00A2`, fg: border_js_1.CLR.dim },
+        { text: `   Current: ${current.toFixed(0)}\u00A2`, fg: border_js_1.CLR.text },
+        { text: `   P&L: ${pnlDollars >= 0 ? '+' : ''}$${Math.abs(pnlDollars).toFixed(2)}`, fg: pnlColor },
+    ]);
+    line++;
+    // Expiry
+    const expiry = pos.expiration_time || pos.expiry || pos.close_time || '';
+    if (expiry) {
+        const expiryDate = new Date(expiry);
+        const daysLeft = Math.ceil((expiryDate.getTime() - Date.now()) / 86400000);
+        screen.write(region.row + line, x, `Expiry: ${expiryDate.toISOString().slice(0, 10)} (${daysLeft}d)`, border_js_1.CLR.dim);
+    }
+    line++;
+    // ── Divider ──
+    (0, border_js_1.drawHDivider)(screen, region, line);
+    line++;
+    // ── Middle: Chart area ──
+    const chartHeight = Math.min(8, Math.floor((region.height - line - 8) / 2) + 4);
+    const candles = state.candleCache.get(ticker) || [];
+    if (candles.length > 1) {
+        const values = candles.map((c) => {
+            const close = c.close ?? 0; // already in cents from dashboard parsing
+            return ((close - entry) * qty) / 100; // P&L in dollars
+        });
+        const dateLabels = candles.map((c) => {
+            const d = c.date ? new Date(c.date) : new Date(c.end_period_ts ? c.end_period_ts * 1000 : 0);
+            return `${d.getMonth() + 1}/${d.getDate()}`;
+        });
+        screen.write(region.row + line, x, 'Daily P&L ($)', border_js_1.CLR.title);
+        line++;
+        (0, chart_js_1.drawChart)(screen, region.row + line, x, w, chartHeight, values, dateLabels);
+        line += chartHeight + 1;
+    }
+    else {
+        screen.write(region.row + line, x, 'No chart data available', border_js_1.CLR.dim);
+        line += 2;
+    }
+    // ── Divider ──
+    if (line < region.height - 5) {
+        (0, border_js_1.drawHDivider)(screen, region, line);
+        line++;
+    }
+    // ── Bottom: Two columns — causal tree (left) and orderbook (right) ──
+    const halfW = Math.floor(w / 2) - 1;
+    const bottomRow = region.row + line;
+    const remainingRows = region.height - line - 1;
+    // Left: Causal tree nodes from context
+    // Find context that contains an edge matching this ticker
+    screen.write(bottomRow, x, 'Causal Tree', border_js_1.CLR.title);
+    let ctx = null;
+    for (const [, c] of state.contexts) {
+        const edges = c?.edges || [];
+        if (edges.some((e) => e.marketId === ticker || e.ticker === ticker)) {
+            ctx = c;
+            break;
+        }
+    }
+    const treeNodes = ctx?.causalTree?.nodes || [];
+    // Flatten nested nodes
+    const flatNodes = [];
+    function walk(nodes, depth = 0) {
+        for (const n of nodes) {
+            flatNodes.push({ ...n, depth });
+            if (n.children)
+                walk(n.children, depth + 1);
+        }
+    }
+    walk(treeNodes);
+    const nodes = flatNodes.filter(n => n.depth <= 1).slice(0, remainingRows - 1);
+    for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        const indent = '  '.repeat(node.depth + 1);
+        const name = node.label || node.claim || node.name || node.id || '?';
+        const prob = node.probability != null ? `${Math.round(node.probability * 100)}%` : '';
+        screen.writeStyled(bottomRow + 1 + i, x, [
+            { text: indent + (0, border_js_1.fit)(name, halfW - indent.length - 5), fg: border_js_1.CLR.text },
+            { text: (0, border_js_1.fit)(prob, 5, 'right'), fg: border_js_1.CLR.emerald },
+        ]);
+    }
+    if (nodes.length === 0) {
+        screen.write(bottomRow + 1, x, '  (no context data)', border_js_1.CLR.dim);
+    }
+    // Right: Orderbook snapshot
+    const rightX = x + halfW + 2;
+    screen.write(bottomRow, rightX, 'Orderbook', border_js_1.CLR.title);
+    // Find orderbook from the edge matching this ticker
+    const matchingEdge = ctx?.edges?.find((e) => e.marketId === ticker || e.ticker === ticker);
+    const ob = matchingEdge?.orderbook;
+    if (ob) {
+        const bestBid = ob.bidPrice ?? ob.bestBid ?? 0;
+        const bestAsk = ob.askPrice ?? ob.bestAsk ?? 0;
+        const spread = ob.spread ?? (bestAsk - bestBid);
+        screen.writeStyled(bottomRow + 1, rightX, [
+            { text: 'Bid: ', fg: border_js_1.CLR.dim },
+            { text: `${bestBid}\u00A2`, fg: border_js_1.CLR.green },
+            { text: '  Ask: ', fg: border_js_1.CLR.dim },
+            { text: `${bestAsk}\u00A2`, fg: border_js_1.CLR.red },
+        ]);
+        screen.writeStyled(bottomRow + 2, rightX, [
+            { text: 'Spread: ', fg: border_js_1.CLR.dim },
+            { text: `${spread}\u00A2`, fg: spread <= 2 ? border_js_1.CLR.green : spread <= 5 ? border_js_1.CLR.yellow : border_js_1.CLR.red },
+        ]);
+        if (ob.bidDepth != null) {
+            screen.writeStyled(bottomRow + 3, rightX, [
+                { text: 'Depth: ', fg: border_js_1.CLR.dim },
+                { text: `bid ${ob.bidDepth}`, fg: border_js_1.CLR.dim },
+                { text: ` / ask ${ob.askDepth}`, fg: border_js_1.CLR.dim },
+            ]);
+        }
+    }
+    else {
+        screen.write(bottomRow + 1, rightX, '  (no orderbook data)', border_js_1.CLR.dim);
+    }
+}

package/dist/tui/widgets/edges.d.ts

@@ -0,0 +1,4 @@
+import type { ScreenBuffer } from '../screen.js';
+import type { Region } from '../layout.js';
+import type { DashboardState } from '../state.js';
+export declare function renderEdges(screen: ScreenBuffer, region: Region, state: DashboardState): void;

package/dist/tui/widgets/edges.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderEdges = renderEdges;
+const border_js_1 = require("../border.js");
+function renderEdges(screen, region, state) {
+    (0, border_js_1.drawBorder)(screen, region, 'TOP EDGES');
+    const x = region.col + 2;
+    const w = region.width - 4;
+    const maxRows = region.height - 2;
+    // Filter out edges already held as positions
+    const heldTickers = new Set(state.positions.map((p) => p.ticker));
+    const unpositioned = state.edges.filter((e) => !heldTickers.has(e.marketId || e.ticker || ''));
+    const top = unpositioned.slice(0, Math.min(5, maxRows));
+    if (top.length === 0) {
+        screen.write(region.row + 1, x, 'No unpositioned edges', border_js_1.CLR.dim);
+        return;
+    }
+    for (let i = 0; i < top.length; i++) {
+        const e = top[i];
+        const y = region.row + 1 + i;
+        const selected = state.focusArea === 'edges' && state.selectedIndex === i;
+        const marker = selected ? '▸' : ' ';
+        const name = e.market || e.marketTitle || e.marketId || '???';
+        const edgeVal = e.edge ?? e.edgeSize ?? 0;
+        const edgeStr = `+${edgeVal.toFixed(1)}¢`;
+        const liq = e.orderbook?.liquidityScore || '?';
+        const liqColor = liq === 'high' ? border_js_1.CLR.green : liq === 'low' ? border_js_1.CLR.yellow : border_js_1.CLR.dim;
+        const nameWidth = Math.max(w - 18, 10);
+        screen.write(y, x, `${marker} ${(0, border_js_1.fit)(name, nameWidth)}`, selected ? border_js_1.CLR.white : border_js_1.CLR.text);
+        screen.write(y, x + nameWidth + 2, (0, border_js_1.fit)(edgeStr, 8, 'right'), border_js_1.CLR.emerald);
+        screen.write(y, x + nameWidth + 11, (0, border_js_1.fit)(liq, 5, 'right'), liqColor);
+    }
+}

package/dist/tui/widgets/liquidity.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Liquidity view — full-screen market liquidity scanner
+ *
+ * Shows markets grouped by topic and horizon with bid/ask/spread/depth info.
+ */
+import type { ScreenBuffer } from '../screen.js';
+import type { Region } from '../layout.js';
+import type { DashboardState } from '../state.js';
+export declare function renderLiquidity(screen: ScreenBuffer, region: Region, state: DashboardState): void;