opendocker 0.1.0 → 0.1.1

package/package.json

@@ -1,16 +1,17 @@
 {
+  "$schema": "https://json.schemastore.org/package.json",
+  "version": "0.1.1",
   "name": "opendocker",
-  "version": "0.1.0",
-  "module": "index.ts",
   "type": "module",
   "private": false,
   "bin": {
-    "opendocker": "./src/main.tsx"
+    "opendocker": "./dist/main.js"
   },
-  "file": ["src/", "package.json", "README.md"],
+  "files": ["dist/", "package.json", "README.md"],
   "scripts": {
-    "start": "bun run src/main.tsx",
-    "dev": "bun --watch run src/main.tsx"
+    "start": "bun run dist/main.js",
+    "dev": "bun --watch run src/main.tsx",
+    "build": "bun build ./src/main.tsx --outdir ./dist --target bun --minify"
   },
   "devDependencies": {
     "@types/bun": "latest"

package/AGENTS.md

@@ -1,22 +0,0 @@
-# Agent Development Guide
-
-## Commands
-- **Run**: `bun run src/main.tsx`
-- **Dev**: `bun --watch run src/main.tsx`
-- **Test**: `bun test` (uses `bun:test` imports)
-- **Install**: `bun install`
-
-## Code Style
-- **Framework**: React with @opentui/react for terminal UI
-- **Imports**: Use path aliases `@/*` for src/ and `@tui/*` for src/cli/cmd/tui/
-- **Components**: Default exports, PascalCase naming
-- **Keyboard**: Vim-style navigation (j/k for up/down, q to quit)
-- **Colors**: Use centralized colors from `src/utils/colors.ts`
-- **Error Handling**: Try-catch with state-based error handling
-- **Shell Commands**: Use `Bun.$` for shell execution
-
-## Key Patterns
-- Use `useKeyboard()` hook for terminal input handling
-- Components use flexbox layout with terminal dimensions
-- State management with React hooks (useState, useEffect)
-- Terminal UI elements: `<box>`, `<text>` with styling props

package/TODO.md

@@ -1,53 +0,0 @@
-# OpenDocker TODO List
-
-## Code Quality Improvements
-
-### High Priority
-- [ ] Fix inconsistent component naming (`VolumesPanes.tsx` → `VolumesPane.tsx`)
-- [ ] Add comprehensive error handling and error boundaries
-- [ ] Implement proper null safety checks (especially for `activeContainer`)
-- [ ] Add TypeScript interfaces for Docker API responses
-- [ ] Standardize state management across all components
-
-### Medium Priority
-- [ ] Add loading states to Images and Volumes panes
-- [ ] Implement proper cleanup for processes and event listeners
-- [ ] Add prop type documentation to components
-- [ ] Standardize error message formatting
-
-## Performance & Architecture
-
-### High Priority
-- [ ] Create centralized Docker service layer (abstract CLI calls)
-- [ ] Implement debouncing/throttling for Docker commands
-- [ ] Add process cleanup to prevent memory leaks
-- [ ] Implement data caching mechanism
-
-### Medium Priority
-- [ ] Separate data fetching logic from UI components
-- [ ] Add configuration management (environment variables)
-- [ ] Implement proper logging system
-
-## Testing & Documentation
-
-## Features & UX
-
-### High Priority
-- [ ] Implement filter logs input
-- [ ] Add real-time updates with proper polling mechanism
-- [ ] Create help screen with keyboard shortcuts
-- [ ] Add visual feedback for user actions
-
-### Medium Priority
-- [ ] Implement container management actions (start/stop/remove)
-- [ ] Add confirmation dialogs for destructive operations
-- [ ] Create settings/configuration screen
-- [ ] Add export/import functionality for logs
-
-## Infrastructure
-
-### Medium Priority
-- [ ] Add Docker health checks and connection validation
-- [ ] Implement proper error recovery mechanisms
-- [ ] Add performance monitoring
-- [ ] Create build/development optimization

package/docker-compose.yml

@@ -1,24 +0,0 @@
-version: '3.8'
-
-services:
-  logger1:
-    image: alpine:latest
-    container_name: logger1
-    command: >
-      sh -c '
-      while true; do
-        echo "[$$(date +%Y-%m-%d\ %H:%M:%S)] Container1: $$(openssl rand -hex 8)"
-        sleep 1
-      done'
-    restart: unless-stopped
-
-  logger2:
-    image: alpine:latest
-    container_name: logger2
-    command: >
-      sh -c '
-      while true; do
-        echo "[$$(date +%Y-%m-%d\ %H:%M:%S)] Container2: $$(openssl rand -hex 8)"
-        sleep 1
-      done'
-    restart: unless-stopped

package/src/components/Border.tsx

@@ -1,19 +0,0 @@
-import { colors } from "../utils/styling";
-
-export const SplitBorder = {
-  border: ["left" as const],
-  borderColor: colors.border,
-  customBorderChars: {
-    topLeft: "",
-    bottomLeft: "",
-    vertical: "┃",
-    topRight: "",
-    bottomRight: "",
-    horizontal: "",
-    bottomT: "",
-    topT: "",
-    cross: "",
-    leftT: "",
-    rightT: "",
-  },
-}

package/src/components/ContainersPane.tsx

@@ -1,142 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { useKeyboard } from "@opentui/react";
-import { colors, termColors } from "../utils/styling";
-import Pane from "./Pane";
-import { useContainerStore } from "../stores/containers";
-import { useApplicationStore } from "../stores/application";
-import type { ScrollBoxRenderable } from "@opentui/core";
-import { Docker } from "../lib/docker";
-import { TextAttributes } from "@opentui/core";
-
-export default function ContainersPane() {
-    const { activePane, setActivePane } = useApplicationStore((state) => state);
-    const { containers, setContainers, activeContainer, setActiveContainer } = useContainerStore((state) => state);
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const paneActive = activePane === "containers";
-    const scrollBoxRef = useRef<ScrollBoxRenderable>(null);
-
-    useEffect(() => {
-        if (!paneActive) return;
-        
-        const docker = new Docker();
-
-        docker.watch((dockerContainers) => {
-            console.log(dockerContainers[0]);
-            const transformed = dockerContainers.map(container => ({
-                name: container.Names[0].replace("/", ""),
-                status: container.Status,
-                state: container.State,
-                health: container.Health,
-            }));
-
-            setContainers(transformed);
-
-            // Get the CURRENT active container from store, not from stale closure
-            const currentActive = useContainerStore.getState().activeContainer;
-            
-            if (currentActive) {
-                const stillExists = transformed.find((c) => c.name === currentActive.name);
-                if (stillExists) {
-                    return;
-                }
-            }
-
-            if (transformed.length > 0) {
-                setActiveContainer(transformed[0]);
-            }
-        });
-    }, [paneActive]);
-
-    useKeyboard((key) => {
-        if (!paneActive) {
-            return;
-        }
-
-        if (key.name === "left") {
-            setActivePane("volumes");
-        }
-
-        if (key.name === "right" || key.name === "tab") {
-            setActivePane("images");
-        }
-
-        if (key.name === 'j' || key.name === 'down') {
-            const index = Math.min(selectedIndex + 1, containers.length - 1);
-            setSelectedIndex(index);
-            setActiveContainer(containers[index]);
-        }
-
-         if (key.name === 'k' || key.name === 'up') {
-            const index = Math.max(selectedIndex - 1, 0);
-            setActiveContainer(containers[index]);
-            setSelectedIndex(index);
-        }
-    });
-
-    return (
-        <Pane
-            title="Containers"
-            flexDirection="column"
-            width="100%"
-            active={paneActive}
-        >
-            <scrollbox
-                ref={scrollBoxRef}
-                scrollY={true}
-                stickyScroll={true}
-                stickyStart="bottom"
-                viewportOptions={{
-                    flexGrow: 1
-                }}
-            >
-                {containers.map((item, index) => {
-                    function getStateColor() {
-                        if (paneActive && activeContainer?.name === item.name) {
-                            return colors.backgroundPanel;
-                        }
-
-                        if (item?.state === "running") {
-                            if (item.status.includes("starting")) {
-                                return termColors.orange11;
-                            }
-
-                            if (item.status.includes("unhealthy")) {
-                                return termColors.red11;
-                            }
-
-                            return termColors.green11;
-                        }
-
-                        if (item?.state === "exited") {
-                            return termColors.red11;
-                        }
-
-                        return termColors.blue11;
-                    }
-
-                    return (
-                        <box
-                            key={index}
-                            backgroundColor={paneActive && activeContainer?.name === item.name ? colors.primary : undefined}
-                            flexDirection="row"
-                            justifyContent="space-between"
-                            paddingLeft={1}
-                            paddingRight={1}
-                        >
-                            <text
-                                content={item.name}
-                                fg={paneActive && activeContainer?.name === item.name ? colors.backgroundPanel : colors.textMuted}
-                                attributes={paneActive && activeContainer?.name === item.name && TextAttributes.BOLD}
-                            />
-                            <text
-                                content={item.state}
-                                fg={getStateColor()}
-                            />
-                        </box>
-                    )
-                })}
-                {containers.length < 1 && <text fg={colors.textMuted}>No Containers</text>}
-            </scrollbox>
-        </Pane>
-    )
-}

package/src/components/ImagesPane.tsx

@@ -1,83 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useKeyboard } from "@opentui/react";
-import Pane from "./Pane";
-import { colors } from "../utils/styling";
-import { useImageStore } from "../stores/images";
-import { useApplicationStore } from "../stores/application";
-import type { ScrollBoxRenderable } from "@opentui/core";
-
-export default function ImagesPane() {
-    const { activePane, setActivePane } = useApplicationStore((state) => state);
-    const { images, setImages } = useImageStore();
-    const scrollBoxRef = useRef<ScrollBoxRenderable>(null);
-
-    useEffect(() => {
-        const process = Bun.spawn(
-            ["docker", "images", "--format", "{{.Repository}}"],
-            {stdout: "pipe", stderr: "pipe"},
-        );
-
-        async function read() {
-            try {
-                const reader = process.stdout.getReader();
-
-                while (true) {
-                    const { done, value } = await reader.read();
-                    if (done) break;
-                    const decodedValues = new TextDecoder().decode(value);
-                    const lines = decodedValues.split("\n").filter(Boolean);
-                    setImages(lines);
-                }
-            } catch (error) {
-                console.error(error);
-            }
-        }
-
-        read();
-
-        return () => process.kill();
-    }, []);
-
-    useKeyboard((key) => {
-        if (activePane !== "images") {
-            return;
-        }
-
-        if (key.name === "left") {
-            setActivePane("containers");
-        }
-
-        if (key.name === "right" || key.name === "tab") {
-            setActivePane("volumes");
-        }
-    });
-
-    return (
-        <Pane
-            title="Images"
-            width="100%"
-            active={activePane === "images"}
-            flexDirection="column"
-        >
-            <scrollbox
-                ref={scrollBoxRef}
-                scrollY={true}
-                stickyScroll={true}
-                stickyStart="top"
-            >
-                {images.map((item: string, index: number) => {
-                    return (
-                        <box key={index}> 
-                            <text
-                                key={index}
-                                content={item}
-                                fg={colors.textMuted}
-                            />
-                        </box>
-                     )
-                })}
-                {images.length < 1 && <text fg={colors.textMuted}>No Images</text>}
-            </scrollbox>
-        </Pane>
-    )
-}

package/src/components/LogsPane.tsx

@@ -1,128 +0,0 @@
-import { useState, useEffect, useRef, useMemo } from "react";
-import { colors, termColors } from "../utils/styling";
-import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
-import Pane from "./Pane";
-import { useContainerStore } from "../stores/containers";
-import { useApplicationStore } from "../stores/application";
-
-type LogEntry = {
-    text: string;
-    type: 'stdout' | 'stderr';
-};
-
-export default function LogsPane() {
-    const { activePane } = useApplicationStore((state) => state);
-    const { activeContainer } = useContainerStore((state) => state);
-    const [logs, setLogs] = useState<LogEntry[]>([]);
-    const scrollBoxRef = useRef<ScrollBoxRenderable>(null);
-
-    useEffect(() => {
-        if (!activeContainer || activePane !== "containers") {
-            cleanup();
-            return;
-        };
-
-        setLogs([]);
-        const process = Bun.spawn([
-            "docker",
-            "logs",
-            "--follow",
-            "--tail",
-            "100",
-            activeContainer.name,
-        ], {
-            stdout: "pipe",
-            stderr: "pipe",
-        });
-
-        async function readStream(stream: ReadableStream, type: 'stdout' | 'stderr') {
-            const decoder = new TextDecoder();
-            const reader = stream.getReader();
-
-            try {
-                while (true) {
-                    const { done, value } = await reader.read();
-                    if (done) break;
-
-                    const text = decoder.decode(value, { stream: true });
-                    // Split by newlines and filter out empty lines
-                    const lines = text.split('\n').filter(line => line.trim().length > 0);
-                    
-                    if (lines.length > 0) {
-                        setLogs(prev => {
-                            const newEntries = lines.map(line => ({
-                                text: line,
-                                type
-                            }));
-                            return [...prev, ...newEntries];
-                        });
-                    }
-                }
-            } catch (error) {}
-        }
-
-        readStream(process.stdout, 'stdout');
-        readStream(process.stderr, 'stderr');
-
-        return () => {
-            process.kill();
-            cleanup();
-        }
-    }, [activePane, activeContainer]);
-
-    useEffect(() => {
-        if (scrollBoxRef.current && logs.length > 0) {
-            scrollBoxRef.current.scrollTo({ x: 0, y: scrollBoxRef.current.scrollHeight });
-        }
-    }, [logs]);
-
-    function cleanup() {
-        setLogs([]);
-    }
-
-    const output = useMemo(() => {
-        if (logs.length === 0) {
-            return <text fg={colors.textMuted}>No logs available</text>;
-        }
-
-        return logs.map(log => (
-            <text
-                fg={log.type === 'stderr' ? termColors.red11 : colors.textMuted}
-            >
-                {log.text}
-            </text>
-        ));
-    }, [logs]);
-
-    return (
-        <Pane
-            title="Logs"
-            flexDirection="column"
-            width="70%"
-        >
-            <box flexDirection="column" gap={1} height="100%">
-                <box flexDirection="row" gap={2} height="auto">
-                    <box flexDirection="column" gap={1}>
-                        <text fg={termColors.purple11} attributes={TextAttributes.BOLD}>Container</text>
-                        <text>{activeContainer?.name}</text>
-                    </box>
-                    <box flexDirection="column">
-                        <text fg={termColors.purple11} attributes={TextAttributes.BOLD}>Status</text>
-                        <text>{activeContainer?.status || "None"}</text>
-                    </box>
-                </box>
-                <scrollbox
-                    ref={scrollBoxRef}
-                    scrollY={true}
-                    stickyScroll={true}
-                    stickyStart="bottom"
-                    height="100%"
-                >
-                    <box flexDirection="column" height="auto">
-                        {output}
-                    </box>
-                </scrollbox>
-            </box>
-        </Pane>
-    )
-}

package/src/components/Pane.tsx

@@ -1,34 +0,0 @@
-import { SplitBorder } from "./Border";
-import type { BoxProps } from "@opentui/react";
-import { padding, colors, termColors } from "../utils/styling";
-import { TextAttributes } from "@opentui/core";
-
-interface PaneProps extends BoxProps {
-    title: string;
-    active?: boolean;
-    children: React.ReactNode;
-}
-
-export default function Pane({
-    title,
-    active = false,
-    children,
-    ...props
-}: PaneProps) {
-    return (
-        <box
-            {...SplitBorder}
-            {...props}
-            borderColor={active ? termColors.purple11 : colors.backgroundPanel}
-        >
-            <box
-                flexGrow={1}
-                backgroundColor={colors.backgroundPanel}
-                {...padding}
-            >
-                <text marginBottom={1} attributes={TextAttributes.BOLD}>{title}</text>
-                {children}
-            </box>
-        </box>
-    )
-}

package/src/components/VolumesPanes.tsx

@@ -1,84 +0,0 @@
- import { useEffect, useRef } from "react";
-import { useKeyboard } from "@opentui/react";
-import Pane from "./Pane";
-import { colors } from "../utils/styling";
-import { useVolumeStore } from "../stores/volumes";
-import { useApplicationStore } from "../stores/application";
-import type { ScrollBoxRenderable } from "@opentui/core";
-
-export default function ImagesPane() {
-    const { activePane, setActivePane } = useApplicationStore((state) => state);
-    const { volumes, setVolumes } = useVolumeStore();
-    const scrollBoxRef = useRef<ScrollBoxRenderable>(null);
-
-    useEffect(() => {
-        const process = Bun.spawn(
-            ["docker", "volume", "ls", "--format", "{{.Name}}"],
-            {stdout: "pipe", stderr: "pipe"},
-        );
-
-        async function read() {
-            try {
-                const reader = process.stdout.getReader();
-                
-                while (true) {
-                    const { done, value } = await reader.read();
-                    if (done) break;
-                    const decodedValues = new TextDecoder().decode(value);
-                    const lines = decodedValues.split("\n").filter(Boolean);
-                    setVolumes(lines);
-                }
-            } catch (error) {
-                console.error(error);
-            }
-        }
-
-        read();
-
-        return () => process.kill();
-    }, []);
-
-    useKeyboard((key) => {
-        if (activePane !== "volumes") {
-            return;
-        }
-
-        if (key.name === "left") {
-            setActivePane("images");
-        }
-
-        if (key.name === "right" || key.name === "tab") {
-            setActivePane("containers");
-        }
-    });
-
-    return (
-        <Pane
-            title="Volumes"
-            active={activePane === "volumes"}
-            width="100%"
-            flexDirection="column"
-        >
-            <scrollbox
-                ref={scrollBoxRef}
-                scrollY={true}
-                stickyScroll={true}
-                stickyStart="bottom"
-                viewportOptions={{
-                    flexGrow: 1
-                }}
-            >
-                {volumes.map((item, index) => {
-                    return <box>
-                        <text
-                            key={index}
-                            content={`[*] ${item}`}
-                            fg={colors.textMuted}
-                        />
-                    </box>
-                })}
-                {volumes.length < 1 && <text fg={colors.textMuted}>No Volumes</text>}
-            </scrollbox>
-        </Pane>
-    )
-}