opendocker 0.1.1 → 0.1.3

package/src/lib/docker.ts

@@ -0,0 +1,68 @@
+
+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;
+        }
+    }
+}

package/src/main.tsx

@@ -0,0 +1,43 @@
+#!/usr/bin/env bun
+
+import { createRoot, useKeyboard, useRenderer } from "@opentui/react";
+import { createCliRenderer } from "@opentui/core";
+import ContainersPane from "./components/ContainersPane";
+import LogsPane from "./components/LogsPane";
+import BaseLayout from "./layouts/BaseLayout";
+
+function App() {
+    const renderer = useRenderer();
+
+    useKeyboard((key) => {
+        if (key.name === "q") {
+            process.exit(0);
+        }
+
+        if (key.ctrl && key.name === "d") {
+            renderer?.console.toggle()
+            renderer?.toggleDebugOverlay()
+        }
+    })
+
+    return (
+        <BaseLayout>
+            <box
+                flexDirection="column"
+                width="30%"
+                gap={1}
+            >
+                <ContainersPane />
+            </box>
+            <LogsPane />
+        </BaseLayout>
+    )
+}
+
+async function main() {
+    const renderer = await createCliRenderer();
+  const root = createRoot(renderer);
+  root.render(<App />);
+}
+
+main();

package/src/stores/application.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface ApplicationStore {
+    activePane: string;
+    setActivePane: (activePane: string) => void;
+}
+
+export const useApplicationStore = create<ApplicationStore>((set) => ({
+    activePane: "containers",
+    setActivePane: (activePane) => set({ activePane }),
+}));

package/src/stores/containers.ts

@@ -0,0 +1,22 @@
+import { create } from "zustand";
+
+export type Container = {
+    name: string;
+    status: string;
+    health: string;
+    state: string;
+}
+
+interface ContainerStore {
+    containers: Container[];
+    activeContainer: Container;
+    setContainers: (containers: Container[]) => void;
+    setActiveContainer: (activeContainer: Container) => void;
+}
+
+export const useContainerStore = create<ContainerStore>((set) => ({
+    containers: [],
+    activeContainer: null,
+    setContainers: (containers: Container[]) => set({ containers }),
+    setActiveContainer: (activeContainer) => set({ activeContainer }),
+}));

package/src/stores/images.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+export interface ImageStore {
+    images: string[];
+    setImages: (images: string[]) => void;
+}
+
+export const useImageStore = create<ImageStore>((set) => ({
+  images: [],
+  setImages: (images: string[]) => set({ images }),
+}));

package/src/stores/volumes.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface VolumeStore {
+    volumes: string[];
+    setVolumes: (volumes: string[]) => void;
+}
+
+export const useVolumeStore = create<VolumeStore>((set) => ({
+    volumes: [],
+    setVolumes: (volumes: string[]) => set({ volumes }),
+}));

package/src/utils/styling.ts

@@ -0,0 +1,198 @@
+export const colors = {
+    primary: '#fab283',
+    secondary: '#5c9cf5',
+    accent: '#9d7cd8',
+    error: '#e06c75',
+    warning: '#f5a742',
+    success: '#7fd88f',
+    info: '#56b6c2',
+    text: '#eeeeee',
+    textMuted: '#808080',
+    background: '#0a0a0a',
+    backgroundPanel: '#141414',
+    backgroundElement: '#1e1e1e',
+    border: '#484848',
+    borderActive: '#606060',
+    borderSubtle: '#3c3c3c',
+}
+
+export const padding = {
+    paddingTop: 1,
+    paddingBottom: 1,
+    paddingLeft: 2,
+    paddingRight: 2,
+}
+
+export const termColors = {
+   gray01: "#111111",
+   gray02: "#191919",
+   gray03: "#222222",
+   gray04: "#2a2a2a",
+   gray05: "#313131",
+   gray06: "#3a3a3a",
+   gray07: "#484848",
+   gray08: "#606060",
+   gray09: "#6e6e6e",
+   gray10: "#7b7b7b",
+   gray11: "#b4b4b4",
+   gray12: "#eeeeee",
+   gray13: "#ffffff",
+   gray1: "#0b0b0b",
+   gray00: "#0d0d0d",
+   red01: "#191111",
+   red02: "#201314",
+   red03: "#3b1219",
+   red04: "#500f1c",
+   red05: "#611623",
+   red06: "#72232d",
+   red07: "#8c333a",
+   red08: "#b54548",
+   red09: "#e5484d",
+   red10: "#ec5d5e",
+   red11: "#ff9592",
+   red12: "#ffd1d9",
+   green01: "#0e1512",
+   green02: "#121b17",
+   green03: "#132d21",
+   green04: "#113b29",
+   green05: "#174933",
+   green06: "#20573e",
+   green07: "#28684a",
+   green08: "#2f7c57",
+   green09: "#30a46c",
+   green10: "#33b074",
+   green11: "#3dd68c",
+   green12: "#b1f1cb",
+   blue01: "#0d1520",
+   blue02: "#111927",
+   blue03: "#0d2847",
+   blue04: "#003362",
+   blue05: "#004074",
+   blue06: "#104d87",
+   blue07: "#205d9e",
+   blue08: "#2870bd",
+   blue09: "#0090ff",
+   blue10: "#3b9eff",
+   blue11: "#70b8ff",
+   blue12: "#c2e6ff",
+   orange01: "#17120e",
+   orange02: "#1e160f",
+   orange03: "#331e0b",
+   orange04: "#462100",
+   orange05: "#562800",
+   orange06: "#66350c",
+   orange07: "#7e451d",
+   orange08: "#a35829",
+   orange09: "#f76b15",
+   orange10: "#ff801f",
+   orange11: "#ffa057",
+   orange12: "#ffe0c2",
+   purple01: "#18111b",
+   purple02: "#1e1523",
+   purple03: "#301c3b",
+   purple04: "#3d224e",
+   purple05: "#48295c",
+   purple06: "#54346b",
+   purple07: "#664282",
+   purple08: "#8457aa",
+   purple09: "#8e4ec6",
+   purple10: "#9a5cd0",
+   purple11: "#d19dff",
+   purple12: "#ecd9fa",
+   teal01: "#0d1514",
+   teal02: "#111c1b",
+   teal03: "#0d2d2a",
+   teal04: "#023b37",
+   teal05: "#084843",
+   teal06: "#145750",
+   teal07: "#1c6961",
+   teal08: "#207e73",
+   teal09: "#12a594",
+   teal10: "#0eb39e",
+   teal11: "#0bd8b6",
+   teal12: "#adf0dd",
+   yellow01: "#14120b",
+   yellow02: "#1b180f",
+   yellow03: "#2d2305",
+   yellow04: "#362b00",
+   yellow05: "#433500",
+   yellow06: "#524202",
+   yellow07: "#665417",
+   yellow08: "#836a21",
+   yellow09: "#ffe629",
+   yellow10: "#ffff57",
+   yellow11: "#f5e147",
+   yellow12: "#f6eeb4",
+   pink01: "#191117",
+   pink02: "#21121d",
+   pink03: "#37172f",
+   pink04: "#4b143d",
+   pink05: "#591c47",
+   pink06: "#692955",
+   pink07: "#833869",
+   pink08: "#a84885",
+   pink09: "#d6409f",
+   pink10: "#de51a8",
+   pink11: "#ff8dcc",
+   pink12: "#fdd1ea",
+   brown01: "#12110f",
+   brown02: "#1c1816",
+   brown03: "#28211d",
+   brown04: "#322922",
+   brown05: "#3e3128",
+   brown06: "#4d3c2f",
+   brown07: "#614a39",
+   brown08: "#7c5f46",
+   brown09: "#ad7f58",
+   brown10: "#b88c67",
+   brown11: "#dbb594",
+   brown12: "#f2e1ca",
+   iris01: "#13131e",
+   iris02: "#171625",
+   iris03: "#202248",
+   iris04: "#262a65",
+   iris05: "#303374",
+   iris06: "#3d3e82",
+   iris07: "#4a4a95",
+   iris08: "#5958b1",
+   iris09: "#5b5bd6",
+   iris10: "#6e6ade",
+   iris11: "#b1a9ff",
+   iris12: "#e0dffe",
+   lime01: "#11130c",
+   lime02: "#151a10",
+   lime03: "#1f2917",
+   lime04: "#29371d",
+   lime05: "#334423",
+   lime06: "#3d522a",
+   lime07: "#496231",
+   lime08: "#577538",
+   lime09: "#bdee63",
+   lime10: "#d4ff70",
+   lime11: "#bde56c",
+   lime12: "#e3f7ba",
+   amber01: "#16120c",
+   amber02: "#1d180f",
+   amber03: "#302008",
+   amber04: "#3f2700",
+   amber05: "#4d3000",
+   amber06: "#5c3d05",
+   amber07: "#714f19",
+   amber08: "#8f6424",
+   amber09: "#ffc53d",
+   amber10: "#ffd60a",
+   amber11: "#ffca16",
+   amber12: "#ffe7b3",
+   tomato01: "#181111",
+   tomato02: "#1f1513",
+   tomato03: "#391714",
+   tomato04: "#4e1511",
+   tomato05: "#5e1c16",
+   tomato06: "#6e2920",
+   tomato07: "#853a2d",
+   tomato08: "#ac4d39",
+   tomato09: "#e54d2e",
+   tomato10: "#ec6142",
+   tomato11: "#ff977d",
+   tomato12: "#fbd3cb",
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@tsconfig/bun/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "@opentui/react",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "customConditions": ["browser"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@tui/*": ["./src/cli/cmd/tui/*"]
+    }
+  }
+}