@kazurolabs/psql-explorer 0.0.0-stage → 0.3.0

package/dist/explorer/session.js

@@ -0,0 +1,122 @@
+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),
+        // From a connection of its own, since this one is busy with the statement to stop.
+        cancel: async () => {
+            const pid = client.processID;
+            if (!pid)
+                return;
+            const other = createClient(params, { ...options, statementTimeoutMs: 5000, readOnly: true });
+            try {
+                await other.connect();
+                await other.query('SELECT pg_catalog.pg_cancel_backend($1)', [pid]);
+            }
+            catch {
+                // The statement may have finished meanwhile, or the server cannot be reached.
+            }
+            finally {
+                await other.end().catch(() => undefined);
+            }
+        },
+        close: () => serial(() => client.end().catch(() => undefined)),
+    };
+};

package/dist/explorer/stats.js

@@ -0,0 +1,135 @@
+import { qualified } from './catalog.js';
+const utc = (column) => `to_char(${column} AT TIME ZONE 'UTC', 'YYYY-MM-DD"T"HH24:MI:SS"Z"')`;
+const kinds = {
+    r: 'table',
+    p: 'partitioned',
+    m: 'materialized',
+};
+const count = (value) => (value === null ? null : Number(value));
+const flag = (value) => value === 't';
+/**
+ * Tables and materialized views with their sizes and upkeep, biggest first. The schemas of the
+ * system are left out; `table` narrows it to one.
+ */
+export async function listTableStats(session, table) {
+    const rows = await session.rows(`WITH rel AS (
+			SELECT c.oid, n.nspname AS schema, c.relname AS name, c.relkind AS kind, c.reltuples,
+				c.relpages,
+				pg_catalog.pg_relation_size(c.oid) AS heap_bytes,
+				pg_catalog.pg_table_size(c.oid) AS table_and_toast_bytes,
+				pg_catalog.pg_indexes_size(c.oid) AS index_bytes,
+				CASE WHEN c.reltoastrelid = 0 THEN 0
+					ELSE pg_catalog.pg_total_relation_size(c.reltoastrelid) END AS toast_bytes,
+				pg_catalog.pg_total_relation_size(c.oid) AS total_bytes,
+				-- The bytes a row needs: its header, its pointer in the page, and its columns.
+				(SELECT 24 + 4 + sum(s.avg_width) FROM pg_catalog.pg_stats s
+					WHERE s.schemaname = n.nspname AND s.tablename = c.relname
+						AND NOT s.inherited) AS row_bytes,
+				coalesce((SELECT option_value::numeric
+					FROM pg_catalog.pg_options_to_table(c.reloptions)
+					WHERE option_name = 'fillfactor'), 100) AS fillfactor
+			FROM pg_catalog.pg_class c
+			JOIN pg_catalog.pg_namespace n ON n.oid = c.relnamespace
+			WHERE c.relkind IN ('r', 'p', 'm')
+				AND n.nspname !~ '^pg_' AND n.nspname <> 'information_schema'
+				AND ($1::text IS NULL OR c.oid = $1::regclass)
+		)
+		SELECT r.schema, r.name, r.kind,
+			CASE WHEN r.reltuples < 0 THEN NULL ELSE r.reltuples::int8 END AS estimated_rows,
+			r.table_and_toast_bytes - r.toast_bytes AS table_bytes,
+			r.index_bytes, r.toast_bytes, r.total_bytes,
+			CASE WHEN r.row_bytes IS NULL OR r.reltuples < 0 OR r.kind = 'p' THEN NULL
+				ELSE greatest(r.heap_bytes - ceil(r.reltuples * r.row_bytes
+					/ ((current_setting('block_size')::int - 24) * r.fillfactor / 100))
+					* current_setting('block_size')::int, 0)::int8
+			END AS bloat_bytes,
+			s.n_live_tup AS live_rows, s.n_dead_tup AS dead_rows,
+			s.seq_scan AS seq_scans, s.idx_scan AS index_scans,
+			${utc('s.last_vacuum')} AS last_vacuum, ${utc('s.last_autovacuum')} AS last_autovacuum,
+			${utc('s.last_analyze')} AS last_analyze, ${utc('s.last_autoanalyze')} AS last_autoanalyze
+		FROM rel r
+		LEFT JOIN pg_catalog.pg_stat_all_tables s ON s.relid = r.oid
+		ORDER BY r.total_bytes DESC, r.schema, r.name`, [table ? qualified(table) : null]);
+    return rows.map((row) => ({
+        schema: row.schema ?? '',
+        name: row.name ?? '',
+        kind: kinds[row.kind ?? ''] ?? 'table',
+        estimatedRows: count(row.estimated_rows),
+        tableBytes: Number(row.table_bytes),
+        indexBytes: Number(row.index_bytes),
+        toastBytes: Number(row.toast_bytes),
+        totalBytes: Number(row.total_bytes),
+        bloatBytes: count(row.bloat_bytes),
+        liveRows: count(row.live_rows),
+        deadRows: count(row.dead_rows),
+        seqScans: count(row.seq_scans),
+        indexScans: count(row.index_scans),
+        lastVacuum: row.last_vacuum,
+        lastAutovacuum: row.last_autovacuum,
+        lastAnalyze: row.last_analyze,
+        lastAutoanalyze: row.last_autoanalyze,
+    }));
+}
+/**
+ * Every index of the user's tables (or of one table) with its size, how often it was used, and the
+ * other indexes it duplicates: the same table, columns, operator classes, expressions and
+ * condition. Biggest first.
+ */
+export async function listIndexStats(session, table) {
+    const rows = await session.rows(`SELECT n.nspname AS schema, t.relname AS "table", i.relname AS name,
+			pg_catalog.pg_get_indexdef(x.indexrelid) AS definition,
+			pg_catalog.pg_relation_size(x.indexrelid) AS bytes,
+			x.indisprimary AS "primary", x.indisunique AS "unique", x.indisvalid AS valid,
+			EXISTS (SELECT 1 FROM pg_catalog.pg_constraint k WHERE k.conindid = x.indexrelid
+				AND k.conrelid = x.indrelid AND k.contype IN ('p', 'u', 'x')) AS "constraint",
+			coalesce(s.idx_scan, 0) AS scans,
+			array_to_json(ARRAY(SELECT o.relname FROM pg_catalog.pg_index y
+				JOIN pg_catalog.pg_class o ON o.oid = y.indexrelid
+				WHERE y.indrelid = x.indrelid AND y.indexrelid <> x.indexrelid
+					AND y.indkey::text = x.indkey::text AND y.indclass::text = x.indclass::text
+					AND y.indcollation::text = x.indcollation::text
+					AND o.relam = i.relam
+					AND coalesce(pg_catalog.pg_get_expr(y.indexprs, y.indrelid), '')
+						= coalesce(pg_catalog.pg_get_expr(x.indexprs, x.indrelid), '')
+					AND coalesce(pg_catalog.pg_get_expr(y.indpred, y.indrelid), '')
+						= coalesce(pg_catalog.pg_get_expr(x.indpred, x.indrelid), '')
+				ORDER BY o.relname))::text AS duplicate_of
+		FROM pg_catalog.pg_index x
+		JOIN pg_catalog.pg_class i ON i.oid = x.indexrelid
+		JOIN pg_catalog.pg_class t ON t.oid = x.indrelid
+		JOIN pg_catalog.pg_namespace n ON n.oid = t.relnamespace
+		LEFT JOIN pg_catalog.pg_stat_all_indexes s ON s.indexrelid = x.indexrelid
+		WHERE t.relkind IN ('r', 'p', 'm')
+			AND n.nspname !~ '^pg_' AND n.nspname <> 'information_schema'
+			AND ($1::text IS NULL OR x.indrelid = $1::regclass)
+		ORDER BY bytes DESC, n.nspname, t.relname, i.relname`, [table ? qualified(table) : null]);
+    return rows.map((row) => ({
+        schema: row.schema ?? '',
+        table: row.table ?? '',
+        name: row.name ?? '',
+        definition: row.definition ?? '',
+        bytes: Number(row.bytes),
+        primary: flag(row.primary),
+        unique: flag(row.unique),
+        constraint: flag(row.constraint),
+        valid: flag(row.valid),
+        scans: Number(row.scans),
+        duplicateOf: JSON.parse(row.duplicate_of ?? '[]'),
+    }));
+}
+/** The sizes and upkeep of every table and index of the database, biggest first. */
+export async function databaseStats(session) {
+    const [row] = await session.rows(`SELECT current_database() AS database,
+			pg_catalog.pg_database_size(current_database()) AS bytes,
+			(SELECT ${utc('stats_reset')} FROM pg_catalog.pg_stat_database
+				WHERE datname = current_database()) AS reset`);
+    const tables = await listTableStats(session);
+    const indexes = await listIndexStats(session);
+    return {
+        database: row?.database ?? '',
+        databaseBytes: Number(row?.bytes ?? 0),
+        statsReset: row?.reset ?? null,
+        tables,
+        indexes,
+    };
+}

package/dist/explorer/timeout.js

@@ -0,0 +1,13 @@
+/** Runs `work` with the session's statement timeout set to `ms`, and puts the old one back. */
+export async function withStatementTimeout(session, ms, work) {
+    const [before] = await session.rows("SELECT current_setting('statement_timeout') AS timeout");
+    await session.rows("SELECT pg_catalog.set_config('statement_timeout', $1, false)", [String(ms)]);
+    try {
+        return await work();
+    }
+    finally {
+        await session.rows("SELECT pg_catalog.set_config('statement_timeout', $1, false)", [
+            before?.timeout ?? '0',
+        ]);
+    }
+}

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,229 @@
+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 WebNote({ url }) {
+    if (!url)
+        return null;
+    return (_jsx(Box, { marginTop: 1, paddingX: 1, children: _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["Web UI is running on ", _jsx(Text, { color: "cyan", children: url })] }) }));
+}
+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);
+        }
+        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(WebNote, { url: services.webUrl }), _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))) })] }));
+}