@kazurolabs/psql-explorer 0.0.0-stage → 0.1.0

package/dist/explorer/format.js

@@ -0,0 +1,134 @@
+// How results are written out: on one line in a grid cell, as an aligned table like psql's, as CSV
+// and as JSON. Values arrive as the text Postgres sent (see Session).
+import stringWidth from 'string-width';
+export const outputFormats = ['table', 'csv', 'json'];
+export const nullText = 'NULL';
+/** A value on one line: line breaks and tabs become visible marks, so a row stays one row. */
+export const cellText = (value) => value === null
+    ? nullText
+    : value
+        .replaceAll('\r\n', '↵')
+        .replace(/[\n\r]/g, '↵')
+        .replaceAll('\t', '  ');
+/** Text cut to `width` columns, ending in … when it was longer. */
+export function truncate(text, width) {
+    if (width <= 0)
+        return '';
+    if (stringWidth(text) <= width)
+        return text;
+    let out = '';
+    for (const char of text) {
+        if (stringWidth(out + char) > width - 1)
+            break;
+        out += char;
+    }
+    return `${out}…`;
+}
+export const pad = (text, width, right = false) => {
+    const gap = ' '.repeat(Math.max(0, width - stringWidth(text)));
+    return right ? gap + text : text + gap;
+};
+const numericTypes = new Set([
+    'smallint',
+    'integer',
+    'bigint',
+    'numeric',
+    'real',
+    'double precision',
+    'oid',
+    'money',
+]);
+/** Whether a column holds numbers, which read best aligned to the right. */
+export const isNumeric = (column) => numericTypes.has(column.type) || column.type.startsWith('numeric');
+export const widthOf = stringWidth;
+/** An aligned table with a header row and a "(n rows)" footer, like psql prints. */
+export function textTable(result, { maxColumnWidth = 60 } = {}) {
+    const { columns, rows } = result;
+    const texts = rows.map((row) => row.map((value) => truncate(cellText(value), maxColumnWidth)));
+    const widths = columns.map((column, index) => Math.max(stringWidth(truncate(column.name, maxColumnWidth)), ...texts.map((row) => stringWidth(row[index] ?? ''))));
+    const line = (cells, right) => cells
+        .map((cell, index) => pad(cell, widths[index] ?? 0, right(index)))
+        .join(' | ')
+        .trimEnd();
+    const header = line(columns.map((column) => truncate(column.name, maxColumnWidth)), () => false);
+    const rule = widths.map((width) => '-'.repeat(width)).join('-+-');
+    const body = texts.map((row) => line(row, (index) => isNumeric(columns[index])));
+    const count = `(${rows.length} ${rows.length === 1 ? 'row' : 'rows'})`;
+    return [header, rule, ...body, count].join('\n') + '\n';
+}
+const csvField = (value) => /[",\r\n]/.test(value) ? `"${value.replaceAll('"', '""')}"` : value;
+/** RFC 4180 CSV with a header row; NULL is an empty field. */
+export function csv(result) {
+    const lines = [
+        result.columns.map((column) => csvField(column.name)).join(','),
+        ...result.rows.map((row) => row.map((value) => (value === null ? '' : csvField(value))).join(',')),
+    ];
+    return lines.map((line) => `${line}\r\n`).join('');
+}
+const jsonNumberTypes = new Set(['smallint', 'integer', 'real', 'double precision', 'oid']);
+/**
+ * A value as JSON: numbers that fit a JS number, booleans and json columns as themselves, and
+ * everything else (bigint and numeric included, to keep every digit) as its text.
+ */
+export function jsonValue(value, column) {
+    if (value === null)
+        return null;
+    if (jsonNumberTypes.has(column.type)) {
+        const number = Number(value);
+        return Number.isFinite(number) ? number : value;
+    }
+    if (column.type === 'boolean')
+        return value === 't';
+    if (column.type === 'json' || column.type === 'jsonb') {
+        try {
+            return JSON.parse(value);
+        }
+        catch {
+            return value;
+        }
+    }
+    return value;
+}
+/** The rows as an array of objects keyed by column name (a repeated name keeps its last value). */
+export function jsonRows(result) {
+    return result.rows.map((row) => Object.fromEntries(result.columns.map((column, index) => [column.name, jsonValue(row[index] ?? null, column)])));
+}
+export function formatResult(result, format) {
+    if (format === 'csv')
+        return csv(result);
+    if (format === 'json')
+        return `${JSON.stringify(jsonRows(result), null, 2)}\n`;
+    return textTable(result);
+}
+/** "SELECT 3", "UPDATE 1": what a statement did, in psql's words. */
+export function commandSummary(result) {
+    if (result.truncated)
+        return `${result.command} (first ${result.rows.length} rows)`;
+    return result.rowCount === null ? result.command : `${result.command} ${result.rowCount}`;
+}
+const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'];
+/** 1536 → "1.5 kB", as pg_size_pretty but with one decimal. */
+export function formatBytes(bytes) {
+    if (bytes === null)
+        return '';
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit++;
+    }
+    return unit === 0 ? `${value} B` : `${value.toFixed(1)} ${units[unit]}`;
+}
+/** 1234567 → "1.2M": a row estimate is only ever approximate. */
+export function formatEstimate(rows) {
+    if (rows === null)
+        return '';
+    if (rows < 1000)
+        return `~${rows}`;
+    if (rows < 1_000_000)
+        return `~${(rows / 1000).toFixed(1)}k`;
+    if (rows < 1_000_000_000)
+        return `~${(rows / 1_000_000).toFixed(1)}M`;
+    return `~${(rows / 1_000_000_000).toFixed(1)}B`;
+}
+export const formatDuration = (ms) => ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;

package/dist/explorer/rows.js

@@ -0,0 +1,50 @@
+// Paging through a table's rows, as the Rows tab and the rows command show them.
+import { quoteIdentifier } from '../db/identifiers.js';
+import { qualified } from './catalog.js';
+export const DEFAULT_PAGE_SIZE = 100;
+export function browseSql(table, { orderBy = [] }) {
+    const order = orderBy
+        .map(({ column, descending }) => `${quoteIdentifier(column)} ${descending ? 'DESC NULLS LAST' : 'ASC NULLS FIRST'}`)
+        .join(', ');
+    return `SELECT * FROM ${qualified(table)}${order ? ` ORDER BY ${order}` : ''} LIMIT $1 OFFSET $2`;
+}
+/** One page of a table's rows. */
+export function browseRows(session, table, options) {
+    return session.run(browseSql(table, options), [options.limit, options.offset ?? 0], {
+        maxRows: options.limit,
+    });
+}
+/** The exact number of rows; this reads the whole table, so the statement timeout bounds it. */
+export async function countRows(session, table) {
+    const [row] = await session.rows(`SELECT count(*) AS count FROM ${qualified(table)}`);
+    return Number(row?.count ?? 0);
+}
+// Statements that return rows and can stand in a FROM clause.
+const readsRows = /^(?:select|with|values|table)\b/i;
+// SQLSTATE 42601 (syntax error) and 0A000 (not supported): the statement cannot be wrapped.
+const cannotWrap = (error) => ['42601', '0A000'].includes(error?.code ?? '');
+/** The statement without its leading comments and trailing semicolons. */
+const trimStatement = (sql) => sql
+    .replace(/^(?:\s+|--[^\n]*\n?|\/\*[\s\S]*?\*\/)+/, '')
+    .replace(/[\s;]+$/, '');
+/**
+ * One page of any statement's rows, without the statement needing a LIMIT of its own. A query is
+ * wrapped in `SELECT * FROM (...) LIMIT OFFSET`, so the planner knows that few rows are wanted and
+ * starts returning them early, as it does for an explicit LIMIT. Other statements, and queries that
+ * cannot be wrapped, run as they are and give their first rows.
+ */
+export async function runPage(session, sql, { limit, offset = 0 }) {
+    const statement = trimStatement(sql);
+    if (!readsRows.test(statement))
+        return session.run(sql, [], { maxRows: limit });
+    // The newline keeps a trailing -- comment from swallowing the closing parenthesis.
+    const wrapped = `SELECT * FROM (\n${statement}\n) AS page LIMIT ${limit + 1} OFFSET ${offset}`;
+    try {
+        return await session.run(wrapped, [], { maxRows: limit });
+    }
+    catch (error) {
+        if (!cannotWrap(error))
+            throw error;
+        return session.run(sql, [], { maxRows: limit });
+    }
+}

package/dist/explorer/session.js

@@ -0,0 +1,105 @@
+import Cursor from 'pg-cursor';
+import { createClient } from '../db/connect.js';
+import { quoteIdentifier } from '../db/identifiers.js';
+import { shortVersion } from '../db/tester.js';
+export const DEFAULT_MAX_ROWS = 1000;
+/** The server refused to change anything because the session is read only (SQLSTATE 25006). */
+export const isReadOnlyError = (error) => error?.code === '25006';
+// The extended protocol takes one statement at a time (SQLSTATE 42601 with this message).
+const isMultipleCommands = (error) => error instanceof Error && error.message.includes('cannot insert multiple commands');
+/** Why a statement failed, in a form ready to show. */
+export function describeQueryError(error) {
+    if (isMultipleCommands(error))
+        return 'Run one statement at a time';
+    if (isReadOnlyError(error)) {
+        return `${error instanceof Error ? error.message : String(error)} (this environment is read only)`;
+    }
+    const pgError = error;
+    const message = error instanceof Error ? error.message : String(error);
+    const extra = [
+        pgError?.detail ? `Detail: ${pgError.detail}` : undefined,
+        pgError?.hint ? `Hint: ${pgError.hint}` : undefined,
+    ].filter(Boolean);
+    return extra.length > 0 ? `${message}. ${extra.join('. ')}` : message;
+}
+const readCursor = (cursor, count) => new Promise((resolve, reject) => {
+    cursor.read(count, (error, rows, result) => {
+        if (error)
+            reject(error);
+        else
+            resolve({ rows, result });
+    });
+});
+/** Connects to the database and returns a session on it. Throws what the driver throws. */
+export const openSession = async (params, options = {}) => {
+    const client = createClient(params, options);
+    await client.connect();
+    let serverVersion;
+    try {
+        const result = await client.query('SHOW server_version');
+        serverVersion = shortVersion(result.rows[0]?.server_version ?? '');
+        // Tables of the environment's schema can be named without it, as in the Tables tab.
+        if (params.schema !== 'public') {
+            await client.query("SELECT pg_catalog.set_config('search_path', $1, false)", [
+                `${quoteIdentifier(params.schema)}, public`,
+            ]);
+        }
+    }
+    catch (error) {
+        await client.end().catch(() => undefined);
+        throw error;
+    }
+    const typeNames = new Map();
+    const namesOf = async (fields) => {
+        const missing = [...new Set(fields.map((field) => field.dataTypeID))].filter((oid) => !typeNames.has(oid));
+        if (missing.length > 0) {
+            const { rows } = await client.query('SELECT oid::int8 AS oid, pg_catalog.format_type(oid, NULL) AS name FROM pg_catalog.pg_type WHERE oid = ANY($1::oid[])', [missing]);
+            for (const row of rows)
+                typeNames.set(Number(row.oid), row.name);
+        }
+        return fields.map((field) => ({
+            name: field.name,
+            type: typeNames.get(field.dataTypeID) ?? String(field.dataTypeID),
+        }));
+    };
+    // One statement at a time: a cursor holds the connection until it is closed.
+    let queue = Promise.resolve();
+    const serial = (work) => {
+        const next = queue.then(work, work);
+        queue = next.catch(() => undefined);
+        return next;
+    };
+    return {
+        params,
+        readOnly: options.readOnly ?? false,
+        serverVersion,
+        run: (sql, values = [], { maxRows = DEFAULT_MAX_ROWS } = {}) => serial(async () => {
+            const started = performance.now();
+            const cursor = client.query(new Cursor(sql, [...values], { rowMode: 'array' }));
+            let read;
+            try {
+                // One more than wanted says whether there are more.
+                read = await readCursor(cursor, maxRows + 1);
+            }
+            finally {
+                // A cursor stopped before its end keeps the connection busy: close it before
+                // asking anything else, such as the names of the column types.
+                await cursor.close().catch(() => undefined);
+            }
+            const { rows, result } = read;
+            const durationMs = performance.now() - started;
+            const truncated = rows.length > maxRows;
+            return {
+                command: result.command ?? '',
+                columns: await namesOf(result.fields ?? []),
+                rows: truncated ? rows.slice(0, maxRows) : rows,
+                // A cursor that was not read to the end has no command tag yet.
+                rowCount: truncated ? null : (result.rowCount ?? rows.length),
+                truncated,
+                durationMs,
+            };
+        }),
+        rows: (sql, values = []) => serial(async () => (await client.query(sql, [...values])).rows),
+        close: () => serial(() => client.end().catch(() => undefined)),
+    };
+};

package/dist/prompts.js

@@ -0,0 +1,52 @@
+import { ResolveError } from './config/resolvers/types.js';
+export function createPromptQueue() {
+    const queue = [];
+    const listeners = new Set();
+    const notify = () => {
+        for (const listener of listeners)
+            listener();
+    };
+    return {
+        ask(request) {
+            const { envName, field, masked, challenge, signal } = request;
+            return new Promise((resolve, reject) => {
+                const remove = () => {
+                    const index = queue.indexOf(pending);
+                    if (index >= 0)
+                        queue.splice(index, 1);
+                    signal?.removeEventListener('abort', cancel);
+                    notify();
+                };
+                const cancel = () => {
+                    remove();
+                    reject(new ResolveError(envName, field, 'cancelled'));
+                };
+                const pending = {
+                    envName,
+                    field,
+                    masked,
+                    ...(challenge === undefined ? {} : { challenge }),
+                    submit(value) {
+                        remove();
+                        resolve(value);
+                    },
+                    cancel,
+                };
+                if (signal?.aborted) {
+                    reject(new ResolveError(envName, field, 'cancelled'));
+                    return;
+                }
+                signal?.addEventListener('abort', cancel);
+                queue.push(pending);
+                notify();
+            });
+        },
+        current: () => queue[0],
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+}

package/dist/screens/environments.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import { describeProblem } from '../config/schema.js';
+import { addressOf, credentialsReadable, listEnvironments, resolveEntry, shield, tierColor, } from '../environments.js';
+import Header from './header.js';
+import { clampTop, moveTo } from './scroll.js';
+import { useTerminalSize } from './terminal.js';
+// Rows the screen uses around the list: top padding, header (3), gap, column titles, the two "more" markers,
+// gap + result line, gap, key help, and one spare so the frame never reaches the bottom row (Ink
+// would then clear and redraw the whole screen on every update).
+const chromeRows = 13;
+const statusWidth = 10;
+const tierWidth = 12;
+const protectedWidth = 3;
+const sourceWidth = 7;
+const tlsWidth = 12;
+const maxNameWidth = 28;
+// Optional columns appear only when the row is wide enough to keep the address readable.
+const tierMinWidth = 50;
+const sourceMinWidth = 60;
+const tlsMinWidth = 72;
+const accessWidth = 11;
+const accessMinWidth = 110;
+const maxProblems = 5;
+const describeFailure = (result) => result.detail && result.detail !== result.reason
+    ? `${result.reason} (${result.detail})`
+    : result.reason;
+function Status({ entry, outcome }) {
+    if (outcome?.state === 'running') {
+        return (_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }));
+    }
+    const status = outcome?.state ?? entry.connection?.lastTest?.status;
+    if (status === 'ok')
+        return _jsx(Text, { color: "green", children: "\u2713" });
+    if (status === 'failed')
+        return _jsx(Text, { color: "red", children: "\u2717" });
+    return _jsx(Text, { dimColor: true, children: "untested" });
+}
+function Banner({ services }) {
+    const error = services.configError;
+    if (!error)
+        return null;
+    const shown = error.problems.slice(0, maxProblems);
+    const more = error.problems.length - shown.length;
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: "red", wrap: "truncate-middle", children: ["\u2717 Invalid config ", error.file] }), shown.map((problem) => (_jsxs(Text, { color: "red", wrap: "truncate-end", children: ['  ', describeProblem(problem)] }, describeProblem(problem)))), more > 0 ? _jsx(Text, { color: "red", children: `  … and ${more} more` }) : null] }));
+}
+const readEntries = (services) => {
+    try {
+        return { entries: listEnvironments(services) };
+    }
+    catch (error) {
+        return { error: error instanceof Error ? error.message : String(error) };
+    }
+};
+export default function Environments({ version, navigate, params, services, isInputActive, }) {
+    const { columns, rows } = useTerminalSize();
+    const [loaded, setLoaded] = useState(() => readEntries(services));
+    const entries = 'entries' in loaded ? loaded.entries : [];
+    const [position, setPosition] = useState(() => ({
+        selected: Math.max(0, entries.findIndex((entry) => entry.key === params?.selectedKey)),
+        top: 0,
+    }));
+    const { selected } = position;
+    const [outcomes, setOutcomes] = useState(new Map());
+    const running = useRef(new Set());
+    // Shared environments whose Vault secrets this user may not read.
+    const [locked, setLocked] = useState(new Set());
+    // A local connection waiting to be confirmed for deletion, and why something cannot be done.
+    const [deleting, setDeleting] = useState();
+    const [note, setNote] = useState();
+    useEffect(() => {
+        const controller = new AbortController();
+        for (const entry of entries) {
+            if (!entry.config)
+                continue;
+            void credentialsReadable(entry, services, controller.signal).then((readable) => {
+                if (!readable && !controller.signal.aborted) {
+                    setLocked((previous) => new Set(previous).add(entry.key));
+                }
+            });
+        }
+        return () => {
+            controller.abort();
+        };
+        // Looked at once, when the screen opens.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const bannerRows = services.configError
+        ? 2 +
+            Math.min(services.configError.problems.length, maxProblems) +
+            (services.configError.problems.length > maxProblems ? 1 : 0)
+        : 0;
+    const visible = Math.max(1, rows - chromeRows - bannerRows);
+    const first = clampTop(position.top, selected, visible, entries.length);
+    const setOutcome = (key, outcome) => {
+        setOutcomes((previous) => new Map(previous).set(key, outcome));
+    };
+    const test = async (entry) => {
+        if (running.current.has(entry.key))
+            return;
+        running.current.add(entry.key);
+        setOutcome(entry.key, { state: 'running' });
+        let outcome;
+        try {
+            const resolved = await resolveEntry(entry, services);
+            const result = await services.tester(resolved);
+            outcome = result.ok
+                ? { state: 'ok', message: `Connected · PostgreSQL ${result.serverVersion}` }
+                : { state: 'failed', message: describeFailure(result) };
+            if (entry.connection) {
+                services.store.recordTest(entry.connection.id, {
+                    status: result.ok ? 'ok' : 'failed',
+                    message: result.ok ? `PostgreSQL ${result.serverVersion}` : result.reason,
+                });
+            }
+        }
+        catch (error) {
+            outcome = { state: 'failed', message: error instanceof Error ? error.message : String(error) };
+        }
+        finally {
+            running.current.delete(entry.key);
+            // Credentials issued for the test are not needed any more.
+            void services.groups?.release(entry.name);
+        }
+        setOutcome(entry.key, outcome);
+    };
+    // Shared environments come from the config (a directory or Vault), which is managed outside the
+    // app: only local connections can be changed here.
+    const fromConfig = (entry, what) => {
+        setNote(`${entry.name} is managed in the shared config: ${what} it there${services.config ? ` (${services.config.base})` : ''}`);
+    };
+    const deleteConnection = (entry) => {
+        if (!entry.connection)
+            return;
+        services.store.delete(entry.connection.id);
+        const next = readEntries(services);
+        setLoaded(next);
+        const remaining = 'entries' in next ? next.entries.length : 0;
+        setPosition((previous) => moveTo(previous, (at) => at, visible, remaining));
+        setOutcomes((previous) => {
+            const rest = new Map(previous);
+            rest.delete(entry.key);
+            return rest;
+        });
+        setNote(`Deleted ${entry.name}`);
+    };
+    useInput((input, key) => {
+        if (deleting) {
+            const entry = deleting;
+            setDeleting(undefined);
+            if (input === 'y')
+                deleteConnection(entry);
+            return;
+        }
+        setNote(undefined);
+        if (input === 'n') {
+            navigate('newConnection');
+            return;
+        }
+        const entry = entries[selected];
+        if (!entry)
+            return;
+        if (key.return) {
+            navigate('explorer', { envKey: entry.key });
+            return;
+        }
+        if (input === 't') {
+            void test(entry);
+            return;
+        }
+        if (input === 'e') {
+            if (entry.connection)
+                navigate('newConnection', { connectionId: entry.connection.id });
+            else
+                fromConfig(entry, 'change');
+            return;
+        }
+        if (input === 'd') {
+            if (entry.connection)
+                setDeleting(entry);
+            else
+                fromConfig(entry, 'remove');
+            return;
+        }
+        const move = key.upArrow ? -1 : key.downArrow ? 1 : 0;
+        if (move === 0)
+            return;
+        setPosition((previous) => moveTo(previous, (at) => at + move, visible, entries.length));
+    }, { isActive: isInputActive });
+    const width = Math.max(20, columns - 4);
+    // The list sits inside paddingX={1}, so rows get two columns less than the header.
+    const rowWidth = width - 2;
+    const showTier = rowWidth >= tierMinWidth;
+    const showSource = rowWidth >= sourceMinWidth;
+    const showTls = rowWidth >= tlsMinWidth;
+    const showAccess = rowWidth >= accessMinWidth;
+    // What the name and address share: the row minus marker (2), the gap after the name (2), the
+    // badge, the status and any optional columns. The name takes at most half, so the address
+    // always keeps some room.
+    const textWidth = rowWidth -
+        2 -
+        2 -
+        (showTier ? tierWidth : 0) -
+        protectedWidth -
+        statusWidth -
+        (showSource ? sourceWidth : 0) -
+        (showTls ? tlsWidth : 0) -
+        (showAccess ? accessWidth : 0);
+    const nameWidth = Math.min(maxNameWidth, Math.max(4, Math.floor(textWidth / 2)), Math.max(4, ...entries.map((entry) => entry.name.length)));
+    const hints = [
+        ...(entries.length > 0 ? ['↑↓ move', 'Enter explore', 'e edit', 'd delete', 't test'] : []),
+        'n new',
+        'q quit',
+    ];
+    const shown = entries.slice(first, first + visible);
+    const above = first;
+    const below = entries.length - first - shown.length;
+    const current = entries[selected];
+    const currentOutcome = current ? outcomes.get(current.key) : undefined;
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingTop: 1, flexGrow: 1, children: [_jsx(Header, { version: version, title: "Environments", width: width }), _jsx(Banner, { services: services }), _jsx(Box, { flexDirection: "column", marginTop: 1, paddingX: 1, children: 'error' in loaded ? (_jsxs(Text, { color: "red", children: ["\u2717 Could not read connections: ", loaded.error] })) : entries.length === 0 ? (_jsxs(Text, { children: ["No environments yet. Press ", _jsx(Text, { color: "cyan", children: "n" }), " to create one."] })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { width: rowWidth, children: [_jsx(Box, { width: 2, flexShrink: 0 }), _jsx(Box, { width: nameWidth, marginRight: 2, flexShrink: 0, children: _jsx(Text, { bold: true, dimColor: true, children: "NAME" }) }), showTier ? (_jsx(Box, { width: tierWidth, flexShrink: 0, children: _jsx(Text, { bold: true, dimColor: true, children: "TIER" }) })) : null, _jsx(Box, { width: protectedWidth, flexShrink: 0 }), showSource ? (_jsx(Box, { width: sourceWidth, flexShrink: 0, children: _jsx(Text, { bold: true, dimColor: true, children: "SOURCE" }) })) : null, _jsx(Box, { flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 0, children: _jsx(Text, { bold: true, dimColor: true, wrap: "truncate-end", children: "ADDRESS" }) }), showAccess ? (_jsx(Box, { width: accessWidth, flexShrink: 0, children: _jsx(Text, { bold: true, dimColor: true, children: "ACCESS" }) })) : null, showTls ? (_jsx(Box, { width: tlsWidth, flexShrink: 0, children: _jsx(Text, { bold: true, dimColor: true, children: "TLS" }) })) : null, _jsx(Box, { width: statusWidth, flexShrink: 0, justifyContent: "flex-end", children: _jsx(Text, { bold: true, dimColor: true, children: "CONNECTION" }) })] }), _jsx(Text, { dimColor: true, children: above > 0 ? `  ↑ ${above} more` : ' ' }), shown.map((entry, index) => {
+                            const isSelected = first + index === selected;
+                            return (_jsxs(Box, { width: rowWidth, children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: "cyan", children: isSelected ? '›' : ' ' }) }), _jsx(Box, { width: nameWidth, marginRight: 2, flexShrink: 0, children: _jsx(Text, { bold: isSelected, color: locked.has(entry.key) ? 'red' : isSelected ? 'cyan' : undefined, wrap: "truncate-end", children: entry.name }) }), showTier ? (_jsx(Box, { width: tierWidth, flexShrink: 0, children: _jsx(Text, { color: tierColor[entry.tier], children: entry.tier }) })) : null, _jsx(Box, { width: protectedWidth, flexShrink: 0, children: entry.protected ? _jsx(Text, { color: "red", children: shield }) : null }), showSource ? (_jsx(Box, { width: sourceWidth, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: entry.source }) })) : null, _jsx(Box, { flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 0, children: _jsx(Text, { dimColor: !isSelected, wrap: "truncate-end", children: addressOf(entry) }) }), locked.has(entry.key) ? (_jsx(Box, { flexShrink: 0, marginRight: 2, children: _jsx(Text, { color: "red", children: "credentials can't be retrieved" }) })) : null, showAccess ? (_jsx(Box, { width: accessWidth, flexShrink: 0, children: entry.readOnly ? (_jsx(Text, { color: "yellow", children: "read only" })) : (_jsx(Text, { dimColor: true, children: "read write" })) })) : null, showTls ? (_jsx(Box, { width: tlsWidth, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: entry.tlsMode }) })) : null, _jsx(Box, { width: statusWidth, flexShrink: 0, justifyContent: "flex-end", children: _jsx(Status, { entry: entry, outcome: outcomes.get(entry.key) }) })] }, entry.key));
+                        }), _jsx(Text, { dimColor: true, children: below > 0 ? `  ↓ ${below} more` : ' ' })] })) }), _jsx(Box, { marginTop: 1, paddingX: 1, width: width, children: deleting ? (_jsxs(Text, { color: "red", wrap: "truncate-end", children: ["Delete ", deleting.name, "? y to delete \u00B7 any other key cancels"] })) : note ? (_jsx(Text, { color: "yellow", wrap: "truncate-end", children: note })) : currentOutcome?.state === 'running' ? (_jsxs(Text, { dimColor: true, children: ["Testing ", current?.name, "\u2026"] })) : currentOutcome ? (_jsxs(Text, { color: currentOutcome.state === 'ok' ? 'green' : 'red', wrap: "truncate-end", children: [currentOutcome.state === 'ok' ? '✓' : '✗', " ", currentOutcome.message] })) : (_jsx(Text, { children: " " })) }), _jsx(Box, { flexGrow: 1 }), _jsx(Box, { marginTop: 1, paddingX: 1, width: width, flexWrap: "wrap", children: hints.map((hint, index) => (_jsxs(Text, { color: "gray", wrap: "truncate-end", children: [hint, index < hints.length - 1 ? ' · ' : ''] }, hint))) })] }));
+}