opendocker 0.1.1 → 0.1.3

package/docker-compose.yml

@@ -0,0 +1,24 @@
+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/package.json

@@ -1,17 +1,17 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "name": "opendocker",
   "type": "module",
   "private": false,
   "bin": {
     "opendocker": "./dist/main.js"
   },
-  "files": ["dist/", "package.json", "README.md"],
+  "file": ["dist/", "package.json", "README.md"],
   "scripts": {
+    "build": "bun build ./src/main.tsx --outdir ./dist --target bun",
     "start": "bun run dist/main.js",
-    "dev": "bun --watch run src/main.tsx",
-    "build": "bun build ./src/main.tsx --outdir ./dist --target bun --minify"
+    "dev": "bun --watch run src/main.tsx"
   },
   "devDependencies": {
     "@types/bun": "latest"
@@ -20,8 +20,8 @@
     "typescript": "^5"
   },
   "dependencies": {
-    "@opentui/core": "^0.1.34",
-    "@opentui/react": "^0.1.34",
+    "@opentui/core": "^0.1.46",
+    "@opentui/react": "^0.1.46",
     "zustand": "^5.0.8"
   }
 }

package/src/components/Border.tsx

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,146 @@
+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) => {
+            const transformed = dockerContainers.map(container => ({
+                name: container.Names[0].replace("/", ""),
+                status: container.Status,
+                state: container.State,
+                health: container.Health,
+            }));
+
+            setContainers(transformed);
+
+            if (transformed.length === 0) {
+                setActiveContainer(undefined);
+            }
+
+            // Get the CURRENT active container from store, not from stale closure
+            const currentActive = useContainerStore.getState().activeContainer;
+            
+            if (currentActive) {
+                const updatedContainer = transformed.find((c) => c.name === currentActive.name);
+                if (updatedContainer) {
+                    setActiveContainer(updatedContainer);
+                    return;
+                }
+            }
+
+            if (transformed.length > 0) {
+                setActiveContainer(transformed[0]);
+            }
+        });
+    }, [paneActive]);
+
+    useKeyboard((key) => {
+        if (!paneActive) {
+            return;
+        }
+
+        if (key.name === "left") {
+            setActivePane("volumes");
+        }
+
+        if (key.name === "right") {
+            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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,132 @@
+import { useState, useEffect, useRef, useMemo } from "react";
+import { colors, termColors } from "../utils/styling";
+import { RGBA, TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import Pane from "./Pane";
+import { useContainerStore } from "../stores/containers";
+import { useApplicationStore } from "../stores/application";
+import { Shimmer } from "./ui/Shimmer";
+
+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;
+        };
+
+        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?.name, activeContainer?.state])
+
+    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 && activeContainer?.state === "created") {
+            return <Shimmer text="Container starting..." color={RGBA.fromHex(colors.text)} />
+        }
+
+        if (logs.length === 0) {
+            return <text fg={colors.textMuted}>No logs available</text>;
+        }
+
+        return logs.map((log, index) => (
+            <text
+                key={index}
+            >
+                {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 || "None"}</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

@@ -0,0 +1,34 @@
+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}
+            >
+                {title && <text marginBottom={1} attributes={TextAttributes.BOLD}>{title}</text>}
+                {children}
+            </box>
+        </box>
+    )
+}

package/src/components/VolumesPanes.tsx

@@ -0,0 +1,84 @@
+ 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>
+    )
+}

package/src/components/ui/Shimmer.tsx

@@ -0,0 +1,64 @@
+import { RGBA } from "@opentui/core"
+import { useTimeline } from "@opentui/react"
+import { useState, useEffect } from "react"
+
+export type ShimmerProps = {
+    text: string
+    color: RGBA
+}
+
+const DURATION = 2_500
+
+export function Shimmer(props: ShimmerProps) {
+    const timeline = useTimeline({
+        duration: DURATION,
+        loop: true,
+    })
+    const characters = props.text.split("")
+    const color = props.color
+
+    const [shimmerValues, setShimmerValues] = useState<number[]>(() => 
+        characters.map(() => 0.4)
+    )
+
+    useEffect(() => {
+        characters.forEach((_, i) => {
+            const target = {
+                shimmer: shimmerValues[i],
+                setShimmer: (value: number) => {
+                    setShimmerValues(prev => {
+                        const newValues = [...prev]
+                        newValues[i] = value
+                        return newValues
+                    })
+                },
+            }
+
+            timeline!.add(
+                target,
+                {
+                    shimmer: 1,
+                    duration: DURATION / (props.text.length + 1),
+                    ease: "linear",
+                    alternate: true,
+                    loop: 2,
+                    onUpdate: () => {
+                        target.setShimmer(target.shimmer)
+                    },
+                },
+                (i * (DURATION / (props.text.length + 1))) / 2,
+            )
+        })
+    }, [timeline, props.text.length])
+
+    return (
+        <text>
+            {characters.map((ch, i) => {
+                const shimmer = shimmerValues[i]
+                const fg = RGBA.fromInts(color.r * 255, color.g * 255, color.b * 255, shimmer * 255)
+                return <span key={i} style={{ fg }}>{ch}</span>
+            })}
+        </text>
+    )
+}
+

package/src/layouts/BaseLayout.tsx

@@ -0,0 +1,60 @@
+
+import { useTerminalDimensions } from "@opentui/react";
+import { useState, useEffect } from "react";
+import { colors, padding } from "../utils/styling";
+import { TextAttributes } from "@opentui/core";
+import { useApplicationStore } from "../stores/application";
+import { SplitBorder } from "../components/Border";
+
+export default function BaseLayout({ children }: { children: React.ReactNode }) {
+    const { activePane, setActivePane } = useApplicationStore((state) => state);
+    const dimensions = useTerminalDimensions();
+    const [pwd, setPwd] = useState<string>("");
+    const version = "v0.1.3";
+
+    useEffect(() => {
+        Bun.$`pwd`.quiet().then(result => setPwd(result.text()));
+        setActivePane("containers");
+    }, [setActivePane]);
+
+    return (
+        <box 
+            width={dimensions.width}
+            height={dimensions.height}
+            backgroundColor={colors.background}
+        >
+            <box
+                flexDirection="row"
+                gap={1}
+                width="100%"
+                {...padding}
+            >
+                {children}
+            </box>
+            <box
+                height={1}
+                backgroundColor={colors.backgroundPanel}
+                flexDirection="row"
+                justifyContent="space-between"
+                flexShrink={0}
+            >
+                <box flexDirection="row">
+                    <box flexDirection="row" backgroundColor={colors.backgroundElement} paddingLeft={1} paddingRight={1}>
+                        <text fg={colors.textMuted}>open</text>
+                        <text attributes={TextAttributes.BOLD}>docker </text>
+                        <text fg={colors.textMuted}>{version}</text>
+                    </box>
+                    <box paddingLeft={1} paddingRight={1}>
+                        <text fg={colors.textMuted}>~{pwd}</text>
+                    </box>
+                </box>
+                <box flexDirection="row" gap={1}>
+                    {/* <text fg={colors.textMuted}>tab</text> */}
+                    <box backgroundColor={colors.accent} paddingLeft={1} paddingRight={1} {...SplitBorder} borderColor={colors.backgroundPanel}>
+                        <text fg={colors.backgroundPanel} attributes={TextAttributes.BOLD}>{activePane}</text>
+                    </box>
+                </box>
+            </box>
+        </box>
+    )
+}