opendocker 0.1.0

package/AGENTS.md

@@ -0,0 +1,22 @@
+# 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/README.md

@@ -0,0 +1,27 @@
+<p align="center">The AI coding agent built for the terminal.</p>
+
+![OpenDocker Terminal UI](src/assets/images/banner.jpg)
+
+## Usage
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun start
+```
+
+## FAQ
+
+### How is this different than Claude Code?
+
+It's very similar to lazydocker in terms of capability. Here are the key differences:
+
+- It looks good
+- It's easier on the eyes
+- It looks good

package/TODO.md

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

@@ -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

@@ -0,0 +1,26 @@
+{
+  "name": "opendocker",
+  "version": "0.1.0",
+  "module": "index.ts",
+  "type": "module",
+  "private": false,
+  "bin": {
+    "opendocker": "./src/main.tsx"
+  },
+  "file": ["src/", "package.json", "README.md"],
+  "scripts": {
+    "start": "bun run src/main.tsx",
+    "dev": "bun --watch run src/main.tsx"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@opentui/core": "^0.1.34",
+    "@opentui/react": "^0.1.34",
+    "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,142 @@
+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

@@ -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,128 @@
+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

@@ -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}
+            >
+                <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/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>("");
+
+    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}>alpha</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

@@ -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,40 @@
+#!/usr/bin/env bun
+
+import { useRenderer, render, useKeyboard } from "@opentui/react";
+import ContainersPane from "./components/ContainersPane";
+import LogsPane from "./components/LogsPane";
+import ImagesPane from "./components/ImagesPane";
+import VolumesPane from "./components/VolumesPanes";
+import BaseLayout from "./layouts/BaseLayout";
+
+function App() {
+    const renderer = useRenderer();
+
+    useKeyboard((key) => {
+        if (key.name === "q") {
+            process.exit(0);
+        }
+
+        if (key.ctrl && key.name === "k") {
+            renderer?.console.toggle()
+            renderer?.toggleDebugOverlay()
+        }
+    })
+
+    return (
+        <BaseLayout>
+            <box
+                flexDirection="column"
+                width="30%"
+                gap={1}
+            >
+                <ContainersPane />
+                <ImagesPane />
+                <VolumesPane />
+            </box>
+            <LogsPane />
+        </BaseLayout>
+    )
+}
+
+render (<App />);

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/*"]
+    }
+  }
+}