opendocker 0.1.4 → 0.1.6

package/src/components/ContainersPane.tsx

@@ -1,146 +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) => {
-            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

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

@@ -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}
-            >
-                {title && <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>
-    )
-}

package/src/components/ui/Shimmer.tsx

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

@@ -1,60 +0,0 @@
-
-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.4";
-
-    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>
-    )
-}

package/src/lib/docker.ts

@@ -1,68 +0,0 @@
-
-export class Docker {
-    private socket = "/var/run/docker.sock";
-    
-    private async request(path: string) {
-        try {
-            const process = Bun.spawn([
-                "curl", "-s", "--unix-socket", this.socket, 
-                `http://localhost${path}`
-            ], { stdout: "pipe", stderr: "pipe" });
-
-            const output = await new Response(process.stdout).text();
-            process.kill();
-            
-            return JSON.parse(output);
-        } catch (error) {
-            console.error('Docker socket request failed:', error);
-            throw error;
-        }
-    }
-
-    async getContainers() {
-        return this.request("/v1.41/containers/json?all=true");
-    }
-
-    async watch(callback: (containers: any[]) => void) {
-        try {
-            let containers = await this.getContainers();
-            callback(containers);
-
-            const process = Bun.spawn([
-                "curl", "-s", "--no-buffer", "--unix-socket", this.socket,
-                "http://localhost/v1.41/events"
-            ], { stdout: "pipe", stderr: "pipe" });
-
-            const reader = process.stdout.getReader();
-            const decoder = new TextDecoder();
-            let buffer = "";
-
-            while (true) {
-                const { value, done } = await reader.read();
-                if (done) break;
-
-                buffer += decoder.decode(value, { stream: true });
-                const lines = buffer.split('\n');
-                buffer = lines.pop() || "";
-
-                for (const line of lines) {
-                    if (line.trim()) {
-                        try {
-                            const event = JSON.parse(line);
-                            if (event.Type === "container") {
-                                containers = await this.getContainers();
-                                callback(containers);
-                            }
-                        } catch (parseError) {
-                            console.error('Failed to parse event:', line, parseError);
-                        }
-                    }
-                }
-            }
-            
-        } catch (error) {
-            console.error('Docker watch failed', error);
-            throw error;
-        }
-    }
-}