dockza.app 0.2.0

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

@@ -0,0 +1,392 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StacksTab = void 0;
+const neo_blessed_1 = __importDefault(require("neo-blessed"));
+const containers_1 = require("../../docker/containers");
+const _theme_1 = require("../../theme");
+const stacks_1 = require("../../utils/stacks");
+const status_1 = require("../../utils/status");
+const external_terminal_1 = require("../../utils/external-terminal");
+const container_detail_1 = require("../containers/container-detail");
+const confirm_dialog_1 = require("../containers/confirm-dialog");
+const log_viewer_1 = require("../containers/log-viewer");
+const stack_tree_1 = require("../stacks/stack-tree");
+class StacksTab {
+    screen;
+    wrapper;
+    filterBox;
+    tree;
+    containerDetail;
+    confirmDialog;
+    logViewer;
+    containers = [];
+    stacks = [];
+    statsCache = new Map();
+    active = false;
+    filterOpen = false;
+    errorHandlers = [];
+    navigateHandlers = [];
+    stackUpdateHandlers = [];
+    detailOpenHandlers = [];
+    logOpenHandlers = [];
+    logFollowHandlers = [];
+    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,
+            hidden: true,
+        });
+        this.tree = new stack_tree_1.StackTree(this.wrapper, {
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+        });
+        // Appended after the tree so the filter input draws on top when shown.
+        this.filterBox = neo_blessed_1.default.textbox({
+            parent: this.wrapper,
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: 1,
+            inputOnFocus: true,
+            tags: true,
+            style: { bg: _theme_1.C.panel, fg: _theme_1.C.fg },
+            hidden: true,
+        });
+        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.tree.on('navigate', (sel) => this.navigateHandlers.forEach((h) => h(sel)));
+        this.containerDetail.on('close', () => {
+            this.tree.focus();
+            this.screen.render();
+        });
+        this.logViewer.on('close', () => {
+            this.tree.focus();
+            this.screen.render();
+        });
+        this.logViewer.on('follow-change', (f) => this.logFollowHandlers.forEach((h) => h(f)));
+        this.filterBox.on('submit', (value) => {
+            this.applyFilter(value ?? '');
+            this.exitFilter();
+        });
+        this.filterBox.on('cancel', () => {
+            this.applyFilter('');
+            this.exitFilter();
+        });
+    }
+    on(event, handler) {
+        if (event === 'error')
+            this.errorHandlers.push(handler);
+        else if (event === 'navigate')
+            this.navigateHandlers.push(handler);
+        else if (event === 'stack-update')
+            this.stackUpdateHandlers.push(handler);
+        else if (event === 'detail-open')
+            this.detailOpenHandlers.push(handler);
+        else if (event === 'log-open')
+            this.logOpenHandlers.push(handler);
+        else
+            this.logFollowHandlers.push(handler);
+    }
+    show() {
+        this.active = true;
+        this.wrapper.show();
+        this.tree.focus();
+        this.screen.key(['enter'], this.handleEnter);
+        this.screen.key(['left'], this.handleLeft);
+        this.screen.key(['right'], this.handleRight);
+        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.screen.key(['/'], this.handleSlash);
+        this.emitNavigate();
+    }
+    hide() {
+        this.active = false;
+        if (this.containerDetail.isVisible())
+            this.containerDetail.hide();
+        if (this.logViewer.isVisible())
+            this.logViewer.hide();
+        if (this.confirmDialog.isVisible())
+            this.confirmDialog.hide();
+        if (this.filterOpen)
+            this.exitFilter();
+        this.wrapper.hide();
+        this.screen.removeKey('enter', this.handleEnter);
+        this.screen.removeKey('left', this.handleLeft);
+        this.screen.removeKey('right', this.handleRight);
+        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.screen.removeKey('/', this.handleSlash);
+        this.navigateHandlers.forEach((h) => h(null));
+    }
+    showLoading() {
+        this.tree.showLoading();
+    }
+    isOverlayOpen() {
+        return this.isModalOpen() || this.containerDetail.isVisible();
+    }
+    isConfirmOpen() {
+        return this.confirmDialog.isVisible();
+    }
+    isFilterOpen() {
+        return this.filterOpen;
+    }
+    getSelected() {
+        return this.tree.getSelected();
+    }
+    jumpToStack(stackId) {
+        this.tree.jumpToStack(stackId);
+    }
+    getAggregateStats() {
+        let cpu = 0;
+        let mem = 0;
+        for (const c of this.containers) {
+            if (!(0, status_1.isActive)(c.status))
+                continue;
+            const s = this.statsCache.get(c.id);
+            if (s) {
+                cpu += s.cpuPercent;
+                mem += s.memUsageMB;
+            }
+        }
+        return { cpuPercent: cpu, memUsageMB: mem };
+    }
+    cleanup() {
+        if (this.containerDetail.isVisible())
+            this.containerDetail.hide();
+        if (this.logViewer.isVisible())
+            this.logViewer.hide();
+        if (this.confirmDialog.isVisible())
+            this.confirmDialog.hide();
+    }
+    setData(containers, stacks) {
+        this.containers = containers;
+        this.stacks = stacks ?? (0, stacks_1.groupIntoStacks)(containers);
+        this.tree.setData(this.stacks, this.statsCache);
+        if (this.containerDetail.isVisible()) {
+            const id = this.containerDetail.getContainerId();
+            if (id) {
+                const updated = containers.find((c) => c.id === id);
+                if (updated)
+                    this.containerDetail.update(updated, this.statsCache.get(id));
+                else {
+                    this.containerDetail.hide();
+                    this.tree.focus();
+                }
+            }
+        }
+        this.stackUpdateHandlers.forEach((h) => h(this.stacks));
+        this.emitNavigate();
+    }
+    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);
+        }
+    }
+    refreshStats() {
+        this.tree.setData(this.stacks, this.statsCache);
+    }
+    redraw() {
+        this.tree.redraw();
+    }
+    async refresh() {
+        const containers = await (0, containers_1.listContainers)();
+        this.setData(containers);
+    }
+    emitNavigate() {
+        this.navigateHandlers.forEach((h) => h(this.tree.getSelected()));
+    }
+    emitError(err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        this.errorHandlers.forEach((h) => h(msg));
+    }
+    isModalOpen() {
+        return this.confirmDialog.isVisible() || this.logViewer.isVisible() || this.isFilterOpen();
+    }
+    applyFilter(value) {
+        this.tree.setFilter(value.trim());
+        this.screen.render();
+    }
+    exitFilter() {
+        this.filterOpen = false;
+        this.filterBox.hide();
+        this.filterBox.setValue('');
+        this.tree.focus();
+        this.screen.render();
+    }
+    handleSlash = () => {
+        if (!this.active || this.isOverlayOpen())
+            return;
+        this.filterOpen = true;
+        this.filterBox.setValue(this.tree.getFilter());
+        this.filterBox.show();
+        this.filterBox.readInput();
+        this.screen.render();
+    };
+    handleEnter = () => {
+        if (!this.active || this.isOverlayOpen())
+            return;
+        const sel = this.tree.getSelected();
+        if (!sel)
+            return;
+        if (sel.kind === 'stack') {
+            this.tree.toggleExpansion();
+            return;
+        }
+        this.containerDetail.show(sel.container, this.statsCache.get(sel.container.id));
+        this.detailOpenHandlers.forEach((h) => h());
+    };
+    handleLeft = () => {
+        if (!this.active || this.isOverlayOpen())
+            return;
+        this.tree.collapseSelected();
+        this.screen.render();
+    };
+    handleRight = () => {
+        if (!this.active || this.isOverlayOpen())
+            return;
+        this.tree.expandSelected();
+        this.screen.render();
+    };
+    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());
+    };
+    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();
+    };
+    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)
+            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.tree.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));
+    };
+    /** Container targeted by tree/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;
+        }
+        const sel = this.tree.getSelected();
+        if (!sel || sel.kind !== 'service')
+            return null;
+        return sel.container;
+    }
+    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.tree.focus();
+                    this.screen.render();
+                });
+            },
+            onCancel: () => {
+                this.tree.focus();
+                this.screen.render();
+            },
+        });
+    }
+}
+exports.StacksTab = StacksTab;

package/dist/ui/top-bar.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopBar = void 0;
+const module_1 = require("module");
+const neo_blessed_1 = __importDefault(require("neo-blessed"));
+const _theme_1 = require("../theme");
+const format_1 = require("../utils/format");
+const pkg = (0, module_1.createRequire)(__filename)('../../package.json');
+const VERSION = pkg.version;
+const SEP = '   ';
+class TopBar {
+    box;
+    socketPath = '';
+    dockerVersion = '';
+    counters = { running: 0, errored: 0, stopped: 0 };
+    stats = null;
+    constructor(screen) {
+        this.box = neo_blessed_1.default.box({
+            parent: screen,
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: 1,
+            tags: true,
+            style: { bg: _theme_1.C.bg, fg: _theme_1.C.fg },
+        });
+    }
+    setSocketPath(p) {
+        this.socketPath = p;
+        this.render();
+    }
+    setDockerVersion(v) {
+        this.dockerVersion = v;
+        this.render();
+    }
+    setCounters(c) {
+        this.counters = c;
+        this.render();
+    }
+    setStats(s) {
+        this.stats = s;
+        this.render();
+    }
+    render() {
+        const width = Number(this.box.width) || 80;
+        const right = this.buildRight(width);
+        const left = this.buildLeft(width, (0, format_1.visualLength)(right));
+        const gap = Math.max(1, width - (0, format_1.visualLength)(left) - (0, format_1.visualLength)(right));
+        this.box.setContent(left + ' '.repeat(gap) + right);
+    }
+    buildLeft(width, rightVisualLen) {
+        const dv = this.dockerVersion ? ` ${_theme_1.t.dim('· docker')} ${_theme_1.t.dim(this.dockerVersion)}` : '';
+        const prefix = ` ${_theme_1.t.accent('◆')} ${_theme_1.t.accent('dockza')} ${_theme_1.t.dim(`v${VERSION}`)}${dv}  `;
+        const prefixLen = (0, format_1.visualLength)(prefix);
+        const sockBudget = Math.max(8, width - prefixLen - rightVisualLen - 4);
+        const sock = this.socketPath ? _theme_1.t.dim((0, format_1.truncateMiddle)(this.socketPath, sockBudget)) : '';
+        return prefix + sock;
+    }
+    buildRight(width) {
+        const counters = `${_theme_1.t.green('●')}${_theme_1.t.fg(String(this.counters.running))} ${_theme_1.t.dim('running')}` +
+            `  ${_theme_1.t.red('●')}${_theme_1.t.fg(String(this.counters.errored))} ${_theme_1.t.dim('err')}` +
+            `  ${_theme_1.t.fg(String(this.counters.stopped))} ${_theme_1.t.dim('stop')}`;
+        const stats = this.stats
+            ? `${_theme_1.t.dim('cpu')} ${_theme_1.t.dim(this.stats.cpuPercent.toFixed(1) + '%')}` +
+                `  ${_theme_1.t.dim('mem')} ${_theme_1.t.dim((0, format_1.humanSizeMB)(this.stats.memUsageMB))}`
+            : '';
+        const pieces = [];
+        if (width >= 120 && stats)
+            pieces.push(stats);
+        if (width >= 95)
+            pieces.push(counters);
+        return pieces.join(SEP) + ' ';
+    }
+}
+exports.TopBar = TopBar;

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VolumesTab = void 0;
+const volumes_1 = require("../../docker/volumes");
+const _theme_1 = require("../../theme");
+const format_1 = require("../../utils/format");
+const resource_list_tab_1 = require("../resource-list-tab");
+class VolumesTab extends resource_list_tab_1.ResourceListTab {
+    constructor(screen, dims) {
+        super(screen, dims, {
+            list: volumes_1.listVolumes,
+            remove: (vol) => (0, volumes_1.removeVolume)(vol.name),
+            getKey: (vol) => vol.name,
+            emptyMessage: 'No volumes',
+            confirmTitle: 'Remove volume?',
+            confirmLabel: (vol) => vol.name,
+            guards: [(vol) => (vol.inUse ? 'Volume in use — cannot delete' : null)],
+            columns: [
+                { header: 'NAME', weight: 0.28, render: (vol, w) => (0, format_1.truncate)(vol.name, w - 1) },
+                { header: 'DRIVER', weight: 0.12, render: (vol, w) => (0, format_1.truncate)(vol.driver, w - 1) },
+                {
+                    header: 'MOUNTPOINT',
+                    weight: 0.3,
+                    render: (vol, w) => _theme_1.t.comment((0, format_1.truncate)(vol.mountpoint, w - 1)),
+                },
+                {
+                    header: 'SIZE',
+                    weight: 0.1,
+                    render: (vol) => (vol.sizeMB > 0 ? (0, format_1.humanSizeMB)(vol.sizeMB) : _theme_1.t.comment('—')),
+                },
+                {
+                    header: 'STATUS',
+                    weight: 0,
+                    render: (vol) => (vol.inUse ? _theme_1.t.green('● in use') : _theme_1.t.red('○ unused')),
+                },
+            ],
+        });
+    }
+}
+exports.VolumesTab = VolumesTab;

package/dist/ui/widgets.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listSelected = listSelected;
+exports.createListWidget = createListWidget;
+exports.createHeaderBar = createHeaderBar;
+exports.createCenteredMessage = createCenteredMessage;
+const neo_blessed_1 = __importDefault(require("neo-blessed"));
+const _theme_1 = require("../theme");
+function listSelected(list) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const raw = list.selected;
+    return typeof raw === 'number' ? raw : 0;
+}
+function createListWidget(parent, opts = {}) {
+    return neo_blessed_1.default.list({
+        parent,
+        top: opts.top ?? 1,
+        left: opts.left ?? 0,
+        width: opts.width ?? '100%',
+        height: opts.height ?? '100%-1',
+        keys: true,
+        mouse: true,
+        vi: true,
+        scrollable: true,
+        scrollbar: { ch: '│', style: { fg: _theme_1.C.comment } },
+        border: { type: 'line' },
+        style: {
+            selected: { bg: _theme_1.C.selection, fg: _theme_1.C.fg },
+            item: { fg: _theme_1.C.fg },
+            border: { fg: _theme_1.C.selection },
+            focus: { border: { fg: _theme_1.C.purple } },
+        },
+        tags: true,
+    });
+}
+function createHeaderBar(parent, hidden = false) {
+    return neo_blessed_1.default.box({
+        parent,
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: 1,
+        tags: true,
+        style: { bg: _theme_1.C.selection },
+        hidden,
+    });
+}
+function createCenteredMessage(parent) {
+    return neo_blessed_1.default.box({
+        parent,
+        top: 'center',
+        left: 'center',
+        width: '60%',
+        height: 1,
+        tags: true,
+        hidden: true,
+    });
+}

package/dist/utils/external-terminal.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openExternalShell = openExternalShell;
+const child_process_1 = require("child_process");
+const os_1 = require("os");
+const SHELL_CMD = (id) => `docker exec -it ${id} sh -c 'command -v bash >/dev/null && exec bash || exec sh'`;
+function which(cmd) {
+    try {
+        const probe = (0, os_1.platform)() === 'win32' ? 'where' : 'which';
+        const r = (0, child_process_1.spawnSync)(probe, [cmd], { stdio: 'ignore' });
+        return r.status === 0;
+    }
+    catch {
+        return false;
+    }
+}
+function launch(cmd, args) {
+    try {
+        const child = (0, child_process_1.spawn)(cmd, args, { detached: true, stdio: 'ignore' });
+        child.on('error', () => { });
+        child.unref();
+        return { ok: true };
+    }
+    catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : String(err) };
+    }
+}
+function openOnMac(id) {
+    const cmd = SHELL_CMD(id).replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+    const script = `tell application "Terminal"\nactivate\ndo script "${cmd}"\nend tell`;
+    return launch('osascript', ['-e', script]);
+}
+function openOnWindows(id) {
+    const cmd = SHELL_CMD(id);
+    if (which('wt'))
+        return launch('wt', ['cmd', '/k', cmd]);
+    return launch('cmd', ['/c', 'start', '""', 'cmd', '/k', cmd]);
+}
+function openOnLinux(id) {
+    const cmd = SHELL_CMD(id);
+    const candidates = [
+        process.env.TERMINAL,
+        'x-terminal-emulator',
+        'gnome-terminal',
+        'konsole',
+        'alacritty',
+        'kitty',
+        'wezterm',
+        'tilix',
+        'xterm',
+    ].filter((t) => Boolean(t));
+    for (const term of candidates) {
+        if (!which(term))
+            continue;
+        const args = term === 'gnome-terminal' || term === 'tilix'
+            ? ['--', 'sh', '-c', cmd]
+            : term === 'wezterm'
+                ? ['start', '--', 'sh', '-c', cmd]
+                : term === 'kitty'
+                    ? ['sh', '-c', cmd]
+                    : ['-e', 'sh', '-c', cmd];
+        return launch(term, args);
+    }
+    return {
+        ok: false,
+        error: 'No terminal emulator found. Set $TERMINAL or install gnome-terminal, konsole, alacritty, kitty, or xterm.',
+    };
+}
+function openExternalShell(containerId) {
+    if (!which('docker')) {
+        return {
+            ok: false,
+            error: "The 'docker' CLI is not on your PATH. Install Docker or make sure it is in PATH to use shell-into-container.",
+        };
+    }
+    switch ((0, os_1.platform)()) {
+        case 'darwin':
+            return openOnMac(containerId);
+        case 'win32':
+            return openOnWindows(containerId);
+        default:
+            return openOnLinux(containerId);
+    }
+}