dockza.app 0.2.0

package/dist/ui/containers/containers-tab.js

@@ -0,0 +1,314 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainersTab = void 0;
+const containers_1 = require("../../docker/containers");
+const status_1 = require("../../utils/status");
+const external_terminal_1 = require("../../utils/external-terminal");
+const container_list_1 = require("../containers/container-list");
+const container_detail_1 = require("../containers/container-detail");
+const confirm_dialog_1 = require("../containers/confirm-dialog");
+const log_viewer_1 = require("../containers/log-viewer");
+class ContainersTab {
+    screen;
+    containerList;
+    containerDetail;
+    confirmDialog;
+    logViewer;
+    containers = [];
+    selectedIndex = 0;
+    active = false;
+    statsCache = new Map();
+    errorHandlers = [];
+    containerSelectHandlers = [];
+    detailOpenHandlers = [];
+    logOpenHandlers = [];
+    logFollowChangeHandlers = [];
+    handleEnter = () => {
+        if (!this.active || this.isOverlayOpen())
+            return;
+        const c = this.containerList.getSelected();
+        if (!c)
+            return;
+        this.containerDetail.show(c, this.statsCache.get(c.id));
+        this.detailOpenHandlers.forEach((h) => h());
+    };
+    handleL = () => {
+        if (!this.active || this.isModalOpen())
+            return;
+        const c = this.getActionTarget();
+        if (!c)
+            return;
+        if (this.containerDetail.isVisible())
+            this.containerDetail.hide();
+        this.logViewer.show(c);
+        this.logOpenHandlers.forEach((h) => h());
+    };
+    confirmAndRun(title, message, danger, action) {
+        if (this.containerDetail.isVisible())
+            this.containerDetail.hide();
+        this.confirmDialog.show({
+            title,
+            message,
+            danger,
+            onConfirm: () => {
+                void action()
+                    .then(() => this.refresh())
+                    .catch((err) => this.emitError(err))
+                    .finally(() => {
+                    this.containerList.focus();
+                    this.screen.render();
+                });
+            },
+            onCancel: () => {
+                this.containerList.focus();
+                this.screen.render();
+            },
+        });
+    }
+    handleS = () => {
+        if (!this.active || this.isModalOpen())
+            return;
+        const c = this.getActionTarget();
+        if (!c || !(0, status_1.isActive)(c.status))
+            return;
+        this.confirmAndRun('Stop container?', `${c.name} will be stopped.`, true, () => (0, containers_1.stopContainer)(c.id));
+    };
+    handleR = () => {
+        if (!this.active || this.isModalOpen())
+            return;
+        const c = this.getActionTarget();
+        if (!c || !(0, status_1.isActive)(c.status))
+            return;
+        this.confirmAndRun('Restart container?', `${c.name} will be restarted.`, false, () => (0, containers_1.restartContainer)(c.id));
+    };
+    handleK = () => {
+        if (!this.active || this.isModalOpen())
+            return;
+        const c = this.getActionTarget();
+        if (!c || !(0, status_1.isActive)(c.status))
+            return;
+        this.confirmAndRun('Kill container?', `${c.name} will be killed (SIGKILL).`, true, () => (0, containers_1.killContainer)(c.id));
+    };
+    handleShiftS = () => {
+        if (!this.active || this.isModalOpen())
+            return;
+        const c = this.getActionTarget();
+        if (!c) {
+            this.emitError('No container selected');
+            return;
+        }
+        if ((0, status_1.isActive)(c.status)) {
+            this.emitError(`${c.name} is already ${c.status}`);
+            return;
+        }
+        if (c.status !== 'exited' && c.status !== 'created') {
+            this.emitError(`Cannot start ${c.name}: status is ${c.status}`);
+            return;
+        }
+        if (this.containerDetail.isVisible())
+            this.containerDetail.hide();
+        void (0, containers_1.startContainer)(c.id)
+            .then(() => this.refresh())
+            .catch((err) => this.emitError(err))
+            .finally(() => {
+            this.containerList.focus();
+            this.screen.render();
+        });
+    };
+    handleD = () => {
+        if (!this.active || this.isModalOpen())
+            return;
+        const c = this.getActionTarget();
+        if (!c || (0, status_1.isActive)(c.status))
+            return;
+        this.confirmAndRun('Remove container?', `${c.name} will be permanently removed.`, true, () => (0, containers_1.removeContainer)(c.id));
+    };
+    handleX = () => {
+        if (!this.active || this.isModalOpen())
+            return;
+        const c = this.getActionTarget();
+        if (!c || c.status !== 'running') {
+            if (c)
+                this.emitError(`Cannot exec into ${c.name}: container is not running`);
+            return;
+        }
+        if (this.containerDetail.isVisible())
+            this.containerDetail.hide();
+        const result = (0, external_terminal_1.openExternalShell)(c.id);
+        if (!result.ok) {
+            this.emitError(result.error ?? `Failed to open external terminal for ${c.name}`);
+        }
+        this.screen.render();
+    };
+    constructor(screen, dims) {
+        this.screen = screen;
+        this.containerList = new container_list_1.ContainerList(screen, dims);
+        this.containerDetail = new container_detail_1.ContainerDetail(screen, dims);
+        this.confirmDialog = new confirm_dialog_1.ConfirmDialog(screen);
+        this.logViewer = new log_viewer_1.LogViewer(screen, dims);
+        this.containerList.on('select', (container) => {
+            const idx = this.containers.findIndex((c) => c.id === container.id);
+            if (idx >= 0)
+                this.selectedIndex = idx;
+        });
+        this.containerList.on('navigate', (container) => {
+            this.containerSelectHandlers.forEach((h) => h(container));
+        });
+        this.containerDetail.on('close', () => {
+            this.containerList.focus();
+            this.emitSelect();
+            this.screen.render();
+        });
+        this.logViewer.on('close', () => {
+            this.containerList.focus();
+            this.emitSelect();
+            this.screen.render();
+        });
+        this.logViewer.on('follow-change', (following) => {
+            this.logFollowChangeHandlers.forEach((h) => h(following));
+        });
+        this.containerList.hide();
+    }
+    on(event, handler) {
+        if (event === 'error')
+            this.errorHandlers.push(handler);
+        if (event === 'select')
+            this.containerSelectHandlers.push(handler);
+        if (event === 'detail-open')
+            this.detailOpenHandlers.push(handler);
+        if (event === 'log-open')
+            this.logOpenHandlers.push(handler);
+        if (event === 'log-follow-change') {
+            this.logFollowChangeHandlers.push(handler);
+        }
+    }
+    show() {
+        this.active = true;
+        this.containerList.show();
+        this.containerList.focus();
+        this.screen.key(['enter'], this.handleEnter);
+        this.screen.key(['l'], this.handleL);
+        this.screen.key(['s'], this.handleS);
+        this.screen.key(['r'], this.handleR);
+        this.screen.key(['k'], this.handleK);
+        this.screen.key(['S-s'], this.handleShiftS);
+        this.screen.key(['d'], this.handleD);
+        this.screen.key(['x'], this.handleX);
+        this.emitSelect();
+    }
+    hide() {
+        this.active = false;
+        this.containerList.hide();
+        if (this.containerDetail.isVisible())
+            this.containerDetail.hide();
+        if (this.logViewer.isVisible())
+            this.logViewer.hide();
+        if (this.confirmDialog.isVisible())
+            this.confirmDialog.hide();
+        this.screen.removeKey('enter', this.handleEnter);
+        this.screen.removeKey('l', this.handleL);
+        this.screen.removeKey('s', this.handleS);
+        this.screen.removeKey('r', this.handleR);
+        this.screen.removeKey('k', this.handleK);
+        this.screen.removeKey('S-s', this.handleShiftS);
+        this.screen.removeKey('d', this.handleD);
+        this.screen.removeKey('x', this.handleX);
+        this.containerSelectHandlers.forEach((h) => h(null));
+    }
+    showLoading() {
+        this.containerList.showLoading();
+    }
+    isOverlayOpen() {
+        return this.isModalOpen() || this.containerDetail.isVisible();
+    }
+    isConfirmOpen() {
+        return this.confirmDialog.isVisible();
+    }
+    getSelected() {
+        return this.containerList.getSelected();
+    }
+    cleanup() {
+        if (this.logViewer.isVisible())
+            this.logViewer.hide();
+        if (this.containerDetail.isVisible())
+            this.containerDetail.hide();
+        if (this.confirmDialog.isVisible())
+            this.confirmDialog.hide();
+    }
+    refreshListStats() {
+        const cursorPos = this.containerList.getSelectedIndex();
+        const listStats = new Map();
+        for (const c of this.containers) {
+            const s = this.statsCache.get(c.id);
+            if (s)
+                listStats.set(c.id, { cpuPercent: s.cpuPercent, memPercent: s.memPercent });
+        }
+        this.containerList.setData(this.containers, listStats);
+        this.containerList.list.select(Math.min(cursorPos, Math.max(0, this.containers.length - 1)));
+    }
+    setData(containers) {
+        const cursorId = this.containerList.getSelected()?.id ?? this.containers[this.selectedIndex]?.id;
+        this.containers = containers;
+        if (cursorId) {
+            const newIdx = containers.findIndex((c) => c.id === cursorId);
+            this.selectedIndex = newIdx >= 0 ? newIdx : 0;
+        }
+        this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, containers.length - 1));
+        const listStats = new Map();
+        for (const c of containers) {
+            const s = this.statsCache.get(c.id);
+            if (s)
+                listStats.set(c.id, { cpuPercent: s.cpuPercent, memPercent: s.memPercent });
+        }
+        const targetIdx = this.selectedIndex;
+        this.containerList.setData(containers, listStats);
+        this.containerList.list.select(targetIdx);
+        if (this.containerDetail.isVisible()) {
+            const detailId = this.containerDetail.getContainerId();
+            if (detailId) {
+                const updated = containers.find((c) => c.id === detailId);
+                if (updated) {
+                    this.containerDetail.update(updated, this.statsCache.get(detailId));
+                }
+                else {
+                    this.containerDetail.hide();
+                    this.containerList.focus();
+                }
+            }
+        }
+        this.emitSelect();
+    }
+    updateStats(id, stats) {
+        this.statsCache.set(id, stats);
+        if (this.containerDetail.isVisible() && this.containerDetail.getContainerId() === id) {
+            const container = this.containers.find((c) => c.id === id);
+            if (container)
+                this.containerDetail.update(container, stats);
+        }
+    }
+    async refresh() {
+        const containers = await (0, containers_1.listContainers)();
+        this.setData(containers);
+    }
+    isModalOpen() {
+        return this.confirmDialog.isVisible() || this.logViewer.isVisible();
+    }
+    /** Container targeted by list/detail actions (detail takes precedence when open). */
+    getActionTarget() {
+        if (this.containerDetail.isVisible()) {
+            const id = this.containerDetail.getContainerId();
+            if (id)
+                return this.containers.find((c) => c.id === id) ?? null;
+        }
+        return this.containerList.getSelected();
+    }
+    emitSelect() {
+        const container = this.containerList.getSelected();
+        this.containerSelectHandlers.forEach((h) => h(container));
+    }
+    emitError(err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        this.errorHandlers.forEach((h) => h(msg));
+    }
+}
+exports.ContainersTab = ContainersTab;

package/dist/ui/containers/log-viewer.js

@@ -0,0 +1,190 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogViewer = void 0;
+const neo_blessed_1 = __importDefault(require("neo-blessed"));
+const containers_1 = require("../../docker/containers");
+const _theme_1 = require("../../theme");
+class LogViewer {
+    screen;
+    wrapper;
+    headerBox;
+    logBox;
+    visible = false;
+    following = true;
+    activeStream = null;
+    streamGen = 0;
+    pending = Buffer.alloc(0);
+    containerName = '';
+    closeHandlers = [];
+    followChangeHandlers = [];
+    handleF = () => {
+        if (!this.visible)
+            return;
+        this.following = !this.following;
+        this.followChangeHandlers.forEach((h) => h(this.following));
+        this.screen.render();
+    };
+    handleG = () => {
+        if (!this.visible)
+            return;
+        this.logBox.setScrollPerc(0);
+        this.screen.render();
+    };
+    handleShiftG = () => {
+        if (!this.visible)
+            return;
+        this.following = true;
+        this.logBox.setScrollPerc(100);
+        this.followChangeHandlers.forEach((h) => h(this.following));
+        this.screen.render();
+    };
+    handleUp = () => {
+        if (!this.visible)
+            return;
+        this.following = false;
+        this.logBox.scroll(-1);
+        this.followChangeHandlers.forEach((h) => h(this.following));
+        this.screen.render();
+    };
+    handleClose = () => {
+        if (!this.visible)
+            return;
+        this.hide();
+        this.closeHandlers.forEach((h) => h());
+    };
+    constructor(screen, dims) {
+        this.screen = screen;
+        this.wrapper = neo_blessed_1.default.box({
+            parent: screen,
+            top: dims.top,
+            left: dims.left,
+            width: dims.width,
+            height: dims.height,
+            style: { bg: _theme_1.C.bg },
+            hidden: true,
+        });
+        this.headerBox = neo_blessed_1.default.box({
+            parent: this.wrapper,
+            top: 0,
+            left: 0,
+            height: 1,
+            width: '100%',
+            tags: true,
+            style: { bg: _theme_1.C.bgSel },
+        });
+        this.logBox = neo_blessed_1.default.log({
+            parent: this.wrapper,
+            top: 1,
+            left: 0,
+            height: '100%-1',
+            width: '100%',
+            scrollable: true,
+            mouse: true,
+            keys: true,
+            vi: true,
+            tags: true,
+            alwaysScroll: true,
+            // Cap retained lines so a chatty container can't grow this without bound.
+            scrollback: 5000,
+            scrollbar: { ch: '│', style: { fg: _theme_1.C.comment } },
+            style: { fg: _theme_1.C.fg, bg: _theme_1.C.bg },
+        });
+    }
+    on(event, handler) {
+        if (event === 'close')
+            this.closeHandlers.push(handler);
+        if (event === 'follow-change')
+            this.followChangeHandlers.push(handler);
+    }
+    show(container) {
+        this.containerName = container.name;
+        this.following = true;
+        this.logBox.setContent('');
+        this.logBox.setScrollPerc(0);
+        this.visible = true;
+        this.wrapper.show();
+        this.logBox.focus();
+        this.updateHeader();
+        this.screen.key(['f'], this.handleF);
+        this.screen.key(['g'], this.handleG);
+        this.screen.key(['S-g'], this.handleShiftG);
+        this.screen.key(['up', 'k'], this.handleUp);
+        this.screen.key(['escape'], this.handleClose);
+        this.screen.render();
+        this.pending = Buffer.alloc(0);
+        const myGen = ++this.streamGen;
+        void (0, containers_1.streamLogs)(container.id, 200)
+            .then((stream) => {
+            if (myGen !== this.streamGen) {
+                stream.destroy?.();
+                return;
+            }
+            this.activeStream = stream;
+            stream.on('data', (chunk) => {
+                if (myGen !== this.streamGen)
+                    return;
+                this.parseFrames(chunk);
+                if (this.following)
+                    this.logBox.setScrollPerc(100);
+                this.screen.render();
+            });
+            stream.on('error', (err) => {
+                if (myGen !== this.streamGen)
+                    return;
+                this.logBox.pushLine(_theme_1.t.red(`Stream error: ${err.message}`));
+                this.screen.render();
+            });
+        })
+            .catch((err) => {
+            if (myGen !== this.streamGen)
+                return;
+            this.logBox.pushLine(_theme_1.t.red(`Failed to open log stream: ${err instanceof Error ? err.message : String(err)}`));
+            this.screen.render();
+        });
+    }
+    hide() {
+        this.visible = false;
+        this.streamGen++;
+        this.pending = Buffer.alloc(0);
+        if (this.activeStream) {
+            this.activeStream.destroy?.();
+            this.activeStream = null;
+        }
+        this.wrapper.hide();
+        this.screen.removeKey('f', this.handleF);
+        this.screen.removeKey('g', this.handleG);
+        this.screen.removeKey('S-g', this.handleShiftG);
+        this.screen.removeKey('up', this.handleUp);
+        this.screen.removeKey('k', this.handleUp);
+        this.screen.removeKey('escape', this.handleClose);
+        this.screen.render();
+    }
+    isVisible() {
+        return this.visible;
+    }
+    updateHeader() {
+        this.headerBox.setContent(` ${_theme_1.t.purple('LOGS')} — ${_theme_1.t.fg(this.containerName)}`);
+    }
+    parseFrames(chunk) {
+        const buf = this.pending.length > 0 ? Buffer.concat([this.pending, chunk]) : chunk;
+        let offset = 0;
+        while (offset + 8 <= buf.length) {
+            const type = buf[offset];
+            const size = buf.readUInt32BE(offset + 4);
+            if (offset + 8 + size > buf.length)
+                break;
+            const message = buf.slice(offset + 8, offset + 8 + size).toString('utf8');
+            offset += 8 + size;
+            for (const line of message.split('\n')) {
+                if (!line)
+                    continue;
+                this.logBox.pushLine(type === 2 ? _theme_1.t.orange(line) : line);
+            }
+        }
+        this.pending = offset < buf.length ? buf.slice(offset) : Buffer.alloc(0);
+    }
+}
+exports.LogViewer = LogViewer;

package/dist/ui/footer.js

@@ -0,0 +1,193 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+const neo_blessed_1 = __importDefault(require("neo-blessed"));
+const _theme_1 = require("../theme");
+const format_1 = require("../utils/format");
+const HINTS = {
+    global: [
+        { key: '↑↓', verb: 'nav' },
+        { key: '↵', verb: 'select' },
+        { key: '1-5', verb: 'view' },
+        { key: 'h', verb: 'help' },
+        { key: 'q', verb: 'quit' },
+    ],
+    'stacks-tree-stack': [
+        { key: '↑↓', verb: 'nav' },
+        { key: '→←', verb: 'expand' },
+        { key: '↵', verb: 'toggle' },
+        { key: '/', verb: 'filter' },
+        { key: 'h', verb: 'help' },
+        { key: 'q', verb: 'quit' },
+    ],
+    'stacks-tree-running': [
+        { key: '↑↓', verb: 'nav' },
+        { key: '↵', verb: 'detail' },
+        { key: 'l', verb: 'logs' },
+        { key: 'x', verb: 'shell' },
+        { key: 's', verb: 'stop' },
+        { key: 'r', verb: 'restart' },
+        { key: 'k', verb: 'kill' },
+        { key: '/', verb: 'filter' },
+        { key: 'h', verb: 'help' },
+    ],
+    'stacks-tree-stopped': [
+        { key: '↑↓', verb: 'nav' },
+        { key: '↵', verb: 'detail' },
+        { key: 'l', verb: 'logs' },
+        { key: 'S', verb: 'start' },
+        { key: 'd', verb: 'remove' },
+        { key: '/', verb: 'filter' },
+        { key: 'h', verb: 'help' },
+    ],
+    'containers-running': [
+        { key: '↑↓', verb: 'nav' },
+        { key: '↵', verb: 'detail' },
+        { key: 'l', verb: 'logs' },
+        { key: 'x', verb: 'shell' },
+        { key: 's', verb: 'stop' },
+        { key: 'r', verb: 'restart' },
+        { key: 'k', verb: 'kill' },
+        { key: 'h', verb: 'help' },
+    ],
+    'containers-stopped': [
+        { key: '↑↓', verb: 'nav' },
+        { key: '↵', verb: 'detail' },
+        { key: 'l', verb: 'logs' },
+        { key: 'S', verb: 'start' },
+        { key: 'd', verb: 'remove' },
+        { key: 'h', verb: 'help' },
+    ],
+    'containers-empty': [
+        { key: '↑↓', verb: 'nav' },
+        { key: '1-5', verb: 'view' },
+        { key: 'h', verb: 'help' },
+        { key: 'q', verb: 'quit' },
+    ],
+    images: [
+        { key: '↑↓', verb: 'nav' },
+        { key: 'd', verb: 'delete' },
+        { key: 'h', verb: 'help' },
+        { key: 'q', verb: 'quit' },
+    ],
+    volumes: [
+        { key: '↑↓', verb: 'nav' },
+        { key: 'd', verb: 'delete' },
+        { key: 'h', verb: 'help' },
+        { key: 'q', verb: 'quit' },
+    ],
+    networks: [
+        { key: '↑↓', verb: 'nav' },
+        { key: 'd', verb: 'delete' },
+        { key: 'h', verb: 'help' },
+        { key: 'q', verb: 'quit' },
+    ],
+    detail: [
+        { key: 'e', verb: 'env' },
+        { key: 'l', verb: 'logs' },
+        { key: 's/r/k', verb: 'ctrl' },
+        { key: '↑↓', verb: 'scroll' },
+        { key: 'Esc', verb: 'close' },
+    ],
+    log: [
+        { key: 'f', verb: 'follow' },
+        { key: 'g', verb: 'top' },
+        { key: 'G', verb: 'bottom' },
+        { key: '↑↓', verb: 'scroll' },
+        { key: 'Esc', verb: 'close' },
+    ],
+};
+class Footer {
+    box;
+    context = 'global';
+    message = null;
+    lastRefreshAt = null;
+    tickerHandle = null;
+    constructor(screen) {
+        this.box = neo_blessed_1.default.box({
+            parent: screen,
+            bottom: 0,
+            left: 0,
+            width: '100%',
+            height: 1,
+            tags: true,
+            style: { bg: _theme_1.C.bg, fg: _theme_1.C.fg },
+        });
+    }
+    setContext(c) {
+        this.context = c;
+        this.render();
+    }
+    setMessage(message) {
+        this.message = message;
+        this.render();
+    }
+    noteRefresh() {
+        this.lastRefreshAt = Date.now();
+        this.render();
+    }
+    startTicker(onTick) {
+        if (this.tickerHandle)
+            return;
+        this.tickerHandle = setInterval(() => {
+            this.render();
+            onTick();
+        }, 1000);
+    }
+    stopTicker() {
+        if (this.tickerHandle) {
+            clearInterval(this.tickerHandle);
+            this.tickerHandle = null;
+        }
+    }
+    render() {
+        const width = Number(this.box.width) || 80;
+        const right = this.buildRight();
+        const left = this.message ? this.buildMessage() : this.buildHints(width - (0, format_1.visualLength)(right) - 2);
+        const gap = Math.max(1, width - (0, format_1.visualLength)(left) - (0, format_1.visualLength)(right));
+        this.box.setContent(left + ' '.repeat(gap) + right);
+    }
+    buildMessage() {
+        if (!this.message)
+            return '';
+        const text = this.message.text;
+        if (this.message.color === 'red')
+            return ` ${_theme_1.t.red(text)}`;
+        if (this.message.color === 'green')
+            return ` ${_theme_1.t.green(text)}`;
+        return ` ${_theme_1.t.fg(text)}`;
+    }
+    buildHints(budget) {
+        const hints = HINTS[this.context];
+        const parts = [' '];
+        let visible = 1;
+        for (const h of hints) {
+            const piece = `${this.renderKey(h.key)} ${_theme_1.t.dim(h.verb)}`;
+            const pieceLen = (0, format_1.visualLength)(piece);
+            const separator = parts.length === 1 ? '' : '  ';
+            const sepLen = separator.length;
+            if (visible + pieceLen + sepLen > budget) {
+                if (parts.length > 1)
+                    parts.push(_theme_1.t.faint('…'));
+                break;
+            }
+            parts.push(separator + piece);
+            visible += pieceLen + sepLen;
+        }
+        return parts.join('');
+    }
+    renderKey(key) {
+        return `{${_theme_1.C.rule2}-bg}{${_theme_1.C.fg}-fg} ${key} {/}`;
+    }
+    buildRight() {
+        if (!this.lastRefreshAt)
+            return `${_theme_1.t.faint('—')} `;
+        const ageSec = (Date.now() - this.lastRefreshAt) / 1000;
+        const label = ageSec < 1 ? `${ageSec.toFixed(1)}s` : `${Math.floor(ageSec)}s`;
+        return `${_theme_1.t.faint(`last refresh ${label} ago`)} `;
+    }
+}
+exports.Footer = Footer;