dockza.app 0.2.0

package/dist/ui/help-overlay.js

@@ -0,0 +1,122 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelpOverlay = void 0;
+const neo_blessed_1 = __importDefault(require("neo-blessed"));
+const _theme_1 = require("../theme");
+class HelpOverlay {
+    screen;
+    box;
+    visible = false;
+    hideHandlers = [];
+    handleClose = () => {
+        if (!this.visible)
+            return;
+        this.hide();
+    };
+    constructor(screen) {
+        this.screen = screen;
+        this.box = neo_blessed_1.default.box({
+            parent: screen,
+            top: 'center',
+            left: 'center',
+            width: '70%',
+            height: '85%',
+            tags: true,
+            scrollable: true,
+            alwaysScroll: true,
+            mouse: true,
+            keys: true,
+            vi: true,
+            border: { type: 'line' },
+            style: {
+                bg: _theme_1.C.bgSoft,
+                border: { fg: _theme_1.C.accent },
+            },
+            hidden: true,
+        });
+        screen.append(this.box);
+    }
+    on(event, handler) {
+        if (event === 'hide')
+            this.hideHandlers.push(handler);
+    }
+    show() {
+        this.visible = true;
+        this.box.setContent(this.buildContent());
+        this.box.show();
+        this.box.setFront();
+        this.box.focus();
+        this.screen.key(['escape'], this.handleClose);
+        this.screen.render();
+    }
+    hide() {
+        this.visible = false;
+        this.box.hide();
+        this.screen.removeKey('escape', this.handleClose);
+        this.hideHandlers.forEach((h) => h());
+        this.screen.render();
+    }
+    isVisible() {
+        return this.visible;
+    }
+    buildContent() {
+        const KW = 18;
+        const row = (key, desc) => `  ${_theme_1.t.aqua(key.padEnd(KW))}${_theme_1.t.fg(desc)}`;
+        const section = (name) => `\n  ${_theme_1.t.accent(name)}\n`;
+        return [
+            `  {bold}${_theme_1.t.accent('dockza — key bindings')}{/bold}`,
+            section('Navigation'),
+            row('1 … 5', 'Jump to Stacks / Containers / Images / Volumes / Networks'),
+            row('Tab / Shift+Tab', 'Cycle views'),
+            row('h', 'Toggle this help'),
+            row('q / Ctrl+C', 'Quit'),
+            section('Stacks view'),
+            row('↑ ↓ / j k', 'Navigate the tree'),
+            row('→', 'Expand the selected stack'),
+            row('←', 'Collapse the selected stack (or jump to its header)'),
+            row('Enter', 'On a stack: toggle expansion. On a service: open detail.'),
+            row('l', 'Open log viewer for the selected service'),
+            row('x', "Open an external terminal exec'd into the service"),
+            row('s / r / k', 'Stop / restart / kill the running service (confirm dialog)'),
+            row('S', 'Start a stopped service'),
+            row('d', 'Remove a stopped service (confirm dialog)'),
+            row('/', 'Filter stacks and services (Esc cancels)'),
+            section('Containers view'),
+            row('↑ ↓ / j k', 'Navigate list'),
+            row('Enter', 'Open detail panel'),
+            row('l', 'Open log viewer'),
+            row('x', 'Shell into container'),
+            row('s / r / k', 'Stop / restart / kill running container'),
+            row('S', 'Start stopped container'),
+            row('d', 'Remove stopped container'),
+            section('Detail panel'),
+            row('e', 'Toggle environment variables'),
+            row('l', 'Open log viewer'),
+            row('s / r / k', 'Stop / restart / kill running container (confirm)'),
+            row('S', 'Start stopped container'),
+            row('d', 'Remove stopped container (confirm)'),
+            row('x', 'Shell into running container'),
+            row('↑ ↓', 'Scroll detail content'),
+            row('Esc', 'Close detail panel'),
+            section('Log viewer'),
+            row('f', 'Toggle follow mode'),
+            row('g', 'Scroll to top'),
+            row('G', 'Scroll to bottom (re-enables follow)'),
+            row('↑ / k', 'Scroll up (disables follow)'),
+            row('Esc', 'Close log viewer'),
+            section('Help overlay'),
+            row('h', 'Toggle this help (open or close)'),
+            row('Esc', 'Close this help'),
+            section('Images, Volumes & Networks'),
+            row('↑ ↓ / j k', 'Navigate list'),
+            row('d', 'Delete unused item'),
+            section('Confirm dialog'),
+            row('y / Y', 'Confirm action'),
+            row('n / N / Esc', 'Cancel'),
+        ].join('\n');
+    }
+}
+exports.HelpOverlay = HelpOverlay;

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagesTab = void 0;
+const images_1 = require("../../docker/images");
+const _theme_1 = require("../../theme");
+const format_1 = require("../../utils/format");
+const resource_list_tab_1 = require("../resource-list-tab");
+class ImagesTab extends resource_list_tab_1.ResourceListTab {
+    constructor(screen, dims) {
+        super(screen, dims, {
+            list: images_1.listImages,
+            remove: (img) => (0, images_1.removeImage)(img.id),
+            getKey: (img) => img.id,
+            emptyMessage: 'No images',
+            confirmTitle: 'Remove image?',
+            confirmLabel: (img) => `${img.repository}:${img.tag}`,
+            guards: [(img) => (img.inUse ? 'Image in use — cannot delete' : null)],
+            columns: [
+                { header: 'REPOSITORY', weight: 0.25, render: (img, w) => (0, format_1.truncate)(img.repository, w - 1) },
+                { header: 'TAG', weight: 0.12, render: (img, w) => _theme_1.t.cyan((0, format_1.truncate)(img.tag, w - 1)) },
+                {
+                    header: 'ID',
+                    weight: 0.1,
+                    render: (img) => _theme_1.t.comment(img.id.replace('sha256:', '').slice(0, 12)),
+                },
+                { header: 'CREATED', weight: 0.15, render: (img) => _theme_1.t.comment((0, format_1.relativeTime)(img.created)) },
+                { header: 'SIZE', weight: 0.1, render: (img) => (0, format_1.humanSizeMB)(img.sizeMB) },
+                {
+                    header: 'STATUS',
+                    weight: 0,
+                    render: (img) => (img.inUse ? _theme_1.t.green('● in use') : _theme_1.t.red('○ unused')),
+                },
+            ],
+        });
+    }
+}
+exports.ImagesTab = ImagesTab;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NetworksTab = void 0;
+const networks_1 = require("../../docker/networks");
+const _theme_1 = require("../../theme");
+const format_1 = require("../../utils/format");
+const resource_list_tab_1 = require("../resource-list-tab");
+class NetworksTab extends resource_list_tab_1.ResourceListTab {
+    constructor(screen, dims) {
+        super(screen, dims, {
+            list: networks_1.listNetworks,
+            remove: (net) => (0, networks_1.removeNetwork)(net.id),
+            getKey: (net) => net.id,
+            emptyMessage: 'No networks',
+            confirmTitle: 'Remove network?',
+            confirmLabel: (net) => net.name,
+            guards: [
+                (net) => (net.builtin ? 'Built-in network — cannot delete' : null),
+                (net) => (net.inUse ? 'Network in use — cannot delete' : null),
+            ],
+            columns: [
+                { header: 'NAME', weight: 0.22, render: (net, w) => (0, format_1.truncate)(net.name, w - 1) },
+                { header: 'DRIVER', weight: 0.12, render: (net, w) => (0, format_1.truncate)(net.driver, w - 1) },
+                { header: 'SCOPE', weight: 0.1, render: (net, w) => _theme_1.t.comment((0, format_1.truncate)(net.scope, w - 1)) },
+                { header: 'ID', weight: 0.14, render: (net) => _theme_1.t.comment(net.id.slice(0, 12)) },
+                {
+                    header: 'CTNRS',
+                    weight: 0.09,
+                    render: (net) => (net.containerCount > 0 ? String(net.containerCount) : _theme_1.t.faint('0')),
+                },
+                {
+                    header: 'CREATED',
+                    weight: 0.15,
+                    render: (net) => net.created.getTime() > 0 ? _theme_1.t.comment((0, format_1.relativeTime)(net.created)) : _theme_1.t.comment('—'),
+                },
+                {
+                    header: 'STATUS',
+                    weight: 0,
+                    render: (net) => (net.inUse ? _theme_1.t.green('● in use') : _theme_1.t.red('○ unused')),
+                },
+            ],
+        });
+    }
+}
+exports.NetworksTab = NetworksTab;

package/dist/ui/resource-list-tab.js

@@ -0,0 +1,183 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceListTab = void 0;
+const neo_blessed_1 = __importDefault(require("neo-blessed"));
+const confirm_dialog_1 = require("./containers/confirm-dialog");
+const _theme_1 = require("../theme");
+const format_1 = require("../utils/format");
+const widgets_1 = require("./widgets");
+/**
+ * Shared machinery for the flat "resource list" tabs (Images / Volumes / Networks):
+ * a header bar over a bordered list, `d`-to-delete with a confirm dialog and guards,
+ * selection preservation across polls, and navigate/error events. Concrete tabs supply
+ * only their columns, guards, confirm strings, and list/remove functions via config.
+ */
+class ResourceListTab {
+    config;
+    screen;
+    wrapper;
+    headerBox;
+    list;
+    messageBox;
+    confirmDialog;
+    items = [];
+    active = false;
+    updating = false;
+    errorHandlers = [];
+    navigateHandlers = [];
+    handleD = () => {
+        if (!this.active || this.confirmDialog.isVisible())
+            return;
+        const item = this.items[(0, widgets_1.listSelected)(this.list)];
+        if (!item)
+            return;
+        for (const guard of this.config.guards) {
+            const msg = guard(item);
+            if (msg) {
+                this.emitError(msg);
+                return;
+            }
+        }
+        this.confirmDialog.show({
+            title: this.config.confirmTitle,
+            message: `${this.config.confirmLabel(item)} will be permanently deleted.`,
+            danger: true,
+            onConfirm: () => {
+                void this.config
+                    .remove(item)
+                    .then(() => this.refresh())
+                    .catch((err) => this.emitError(err))
+                    .finally(() => {
+                    this.list.focus();
+                    this.screen.render();
+                });
+            },
+            onCancel: () => {
+                this.list.focus();
+                this.screen.render();
+            },
+        });
+    };
+    constructor(screen, dims, config) {
+        this.config = config;
+        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.headerBox = (0, widgets_1.createHeaderBar)(this.wrapper);
+        this.list = (0, widgets_1.createListWidget)(this.wrapper);
+        this.messageBox = (0, widgets_1.createCenteredMessage)(this.wrapper);
+        this.list.on('select item', (_item, index) => {
+            if (!this.updating) {
+                this.navigateHandlers.forEach((h) => h(this.items[index] ?? null));
+            }
+        });
+        this.confirmDialog = new confirm_dialog_1.ConfirmDialog(screen);
+    }
+    on(event, handler) {
+        if (event === 'error')
+            this.errorHandlers.push(handler);
+        if (event === 'navigate')
+            this.navigateHandlers.push(handler);
+    }
+    isConfirmOpen() {
+        return this.confirmDialog.isVisible();
+    }
+    showLoading() {
+        this.messageBox.setContent(_theme_1.t.comment('  Loading...'));
+        this.messageBox.show();
+    }
+    show() {
+        this.active = true;
+        this.wrapper.show();
+        this.list.focus();
+        this.screen.key(['d'], this.handleD);
+        this.emitNavigate();
+    }
+    hide() {
+        this.active = false;
+        this.wrapper.hide();
+        if (this.confirmDialog.isVisible())
+            this.confirmDialog.hide();
+        this.screen.removeKey('d', this.handleD);
+    }
+    setData(items) {
+        this.updating = true;
+        const prevIdx = (0, widgets_1.listSelected)(this.list);
+        const prev = this.items[prevIdx];
+        const prevKey = prev ? this.config.getKey(prev) : undefined;
+        this.items = items;
+        this.messageBox.hide();
+        const innerWidth = Math.max(10, this.list.width - 2);
+        const widths = this.calcWidths(innerWidth);
+        this.renderHeader(widths);
+        const rows = items.map((item) => this.buildRow(item, widths));
+        this.list.setItems(rows);
+        const foundIdx = prevKey !== undefined ? items.findIndex((it) => this.config.getKey(it) === prevKey) : -1;
+        const targetIdx = Math.min(foundIdx >= 0 ? foundIdx : prevIdx, Math.max(0, items.length - 1));
+        this.list.select(targetIdx);
+        this.updating = false;
+        if (items.length === 0) {
+            this.messageBox.setContent(_theme_1.t.comment(`  ${this.config.emptyMessage}`));
+            this.messageBox.show();
+        }
+        this.emitNavigate();
+    }
+    async refresh() {
+        const items = await this.config.list();
+        this.setData(items);
+    }
+    /** Re-render the current dataset (useful after terminal resize). */
+    redraw() {
+        this.setData(this.items);
+    }
+    emitNavigate() {
+        this.navigateHandlers.forEach((h) => h(this.items[(0, widgets_1.listSelected)(this.list)] ?? null));
+    }
+    emitError(err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        this.errorHandlers.forEach((h) => h(msg));
+    }
+    calcWidths(inner) {
+        const cols = this.config.columns;
+        const widths = [];
+        let used = 0;
+        for (let i = 0; i < cols.length; i++) {
+            if (i === cols.length - 1) {
+                widths.push(Math.max(1, inner - used));
+            }
+            else {
+                const w = Math.floor(inner * cols[i].weight);
+                widths.push(w);
+                used += w;
+            }
+        }
+        return widths;
+    }
+    renderHeader(widths) {
+        const cols = this.config.columns;
+        const parts = cols.map((col, i) => {
+            const w = widths[i];
+            // First column carries a leading space and pads to w+1 (the list body indents
+            // its rows by one), matching the data offset below.
+            if (i === 0)
+                return (0, format_1.padEnd)(_theme_1.t.comment(` ${(0, format_1.truncate)(col.header, w - 1)}`), w + 1);
+            if (i === cols.length - 1)
+                return _theme_1.t.comment((0, format_1.truncate)(col.header, w));
+            return (0, format_1.padEnd)(_theme_1.t.comment((0, format_1.truncate)(col.header, w)), w);
+        });
+        this.headerBox.setContent(parts.join(''));
+    }
+    buildRow(item, widths) {
+        return this.config.columns.map((col, i) => (0, format_1.padEnd)(col.render(item, widths[i]), widths[i])).join('');
+    }
+}
+exports.ResourceListTab = ResourceListTab;

package/dist/ui/side-rail.js

@@ -0,0 +1,132 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideRail = exports.RAIL_WIDTH = void 0;
+const neo_blessed_1 = __importDefault(require("neo-blessed"));
+const _theme_1 = require("../theme");
+const format_1 = require("../utils/format");
+const VIEWS = [
+    { id: 'stacks', label: 'Stacks', icon: '◰', key: '1' },
+    { id: 'containers', label: 'Containers', icon: '◧', key: '2' },
+    { id: 'images', label: 'Images', icon: '◩', key: '3' },
+    { id: 'volumes', label: 'Volumes', icon: '◪', key: '4' },
+    { id: 'networks', label: 'Networks', icon: '◫', key: '5' },
+];
+exports.RAIL_WIDTH = 28;
+class SideRail {
+    box;
+    activeView = 'stacks';
+    counts = { stacks: 0, containers: 0, images: 0, volumes: 0, networks: 0 };
+    stacks = [];
+    clickable = [];
+    viewChangeHandlers = [];
+    stackJumpHandlers = [];
+    constructor(screen) {
+        this.box = neo_blessed_1.default.box({
+            parent: screen,
+            top: 1,
+            left: 0,
+            width: exports.RAIL_WIDTH,
+            height: '100%-2',
+            tags: true,
+            mouse: true,
+            style: { bg: _theme_1.C.bg, fg: _theme_1.C.fg },
+        });
+        this.box.on('click', (data) => {
+            const top = Number(this.box.atop ?? 1);
+            const relRow = data.y - top;
+            const hit = this.clickable.find((c) => c.row === relRow);
+            if (!hit)
+                return;
+            if (hit.kind === 'view')
+                this.viewChangeHandlers.forEach((h) => h(hit.payload));
+            else if (hit.kind === 'stack')
+                this.stackJumpHandlers.forEach((h) => h(hit.payload));
+        });
+    }
+    on(event, handler) {
+        if (event === 'view-change')
+            this.viewChangeHandlers.push(handler);
+        else if (event === 'stack-jump')
+            this.stackJumpHandlers.push(handler);
+    }
+    setActiveView(id) {
+        this.activeView = id;
+        this.render();
+    }
+    setCounts(counts) {
+        this.counts = counts;
+        this.render();
+    }
+    setStacks(stacks) {
+        this.stacks = stacks;
+        this.render();
+    }
+    getViews() {
+        return VIEWS;
+    }
+    render() {
+        const lines = [];
+        this.clickable = [];
+        lines.push(_theme_1.t.dim(' VIEW'));
+        for (const v of VIEWS) {
+            const idx = lines.length;
+            lines.push(this.renderViewRow(v));
+            this.clickable.push({ row: idx, kind: 'view', payload: v.id });
+        }
+        lines.push('');
+        lines.push(_theme_1.t.dim(' STACKS'));
+        const stackLines = this.renderStacks();
+        for (const sl of stackLines) {
+            const idx = lines.length;
+            lines.push(sl.text);
+            if (sl.stackId)
+                this.clickable.push({ row: idx, kind: 'stack', payload: sl.stackId });
+        }
+        this.box.setContent(lines.join('\n'));
+    }
+    renderViewRow(v) {
+        const count = String(this.counts[v.id]);
+        const isActive = this.activeView === v.id;
+        const labelWidth = exports.RAIL_WIDTH - 7; // 2 indent + icon + space + count budget(3) + trailing
+        const labelRaw = (0, format_1.truncate)(v.label, labelWidth);
+        if (isActive) {
+            const edge = `{${_theme_1.C.accent}-fg}▌{/}`;
+            const inner = ` ${_theme_1.t.accent(v.icon)} ${_theme_1.t.fg(labelRaw)}`;
+            const right = _theme_1.t.dim(count);
+            const padded = (0, format_1.padEnd)(`${edge}${inner}`, exports.RAIL_WIDTH - (0, format_1.visualLength)(right) - 1);
+            return `${padded}${right} `;
+        }
+        const inner = `  ${_theme_1.t.dim(v.icon)} ${_theme_1.t.dim(labelRaw)}`;
+        const right = _theme_1.t.faint(count);
+        const padded = (0, format_1.padEnd)(inner, exports.RAIL_WIDTH - (0, format_1.visualLength)(right) - 1);
+        return `${padded}${right} `;
+    }
+    renderStacks() {
+        if (this.stacks.length === 0) {
+            return [{ text: `  ${_theme_1.t.faint('(none)')}` }];
+        }
+        // Cap the visible stacks list; if there's overflow, show a "+N more" tail.
+        const MAX = 10;
+        const lines = [];
+        const shown = this.stacks.slice(0, MAX);
+        for (const s of shown) {
+            const dot = s.isLive ? _theme_1.t.green('●') : _theme_1.t.faint('○');
+            const labelMax = exports.RAIL_WIDTH - 8;
+            const name = (0, format_1.truncate)(s.id, labelMax);
+            const nameStyled = s.isLive ? _theme_1.t.fg(name) : _theme_1.t.dim(name);
+            const count = _theme_1.t.faint(String(s.services.length));
+            const left = `  ${dot} ${nameStyled}`;
+            const padded = (0, format_1.padEnd)(left, exports.RAIL_WIDTH - (0, format_1.visualLength)(count) - 1);
+            lines.push({ text: `${padded}${count} `, stackId: s.id });
+        }
+        const overflow = this.stacks.length - shown.length;
+        if (overflow > 0) {
+            lines.push({ text: _theme_1.t.faint(`  +${overflow} more…`) });
+        }
+        return lines;
+    }
+}
+exports.SideRail = SideRail;