@muhammedaksam/easiarr 0.6.2 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muhammedaksam/easiarr",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "TUI tool for generating docker-compose files for the *arr media ecosystem with 41 apps, TRaSH Guides best practices, VPN routing, and Traefik reverse proxy support",
   "module": "src/index.ts",
   "type": "module",

package/src/api/portainer-api.ts

@@ -228,4 +228,115 @@ export class PortainerApiClient {
       return false
     }
   }
+
+  // ==========================================
+  // Container Management Methods
+  // ==========================================
+
+  /**
+   * Get list of Docker endpoints
+   */
+  async getEndpoints(): Promise<PortainerEndpoint[]> {
+    return this.request<PortainerEndpoint[]>("/endpoints")
+  }
+
+  /**
+   * Get all containers for an endpoint
+   */
+  async getContainers(endpointId: number = 1): Promise<PortainerContainer[]> {
+    return this.request<PortainerContainer[]>(`/endpoints/${endpointId}/docker/containers/json?all=true`)
+  }
+
+  /**
+   * Start a container by ID
+   */
+  async startContainer(containerId: string, endpointId: number = 1): Promise<void> {
+    await this.request(`/endpoints/${endpointId}/docker/containers/${containerId}/start`, {
+      method: "POST",
+    })
+  }
+
+  /**
+   * Stop a container by ID
+   */
+  async stopContainer(containerId: string, endpointId: number = 1): Promise<void> {
+    await this.request(`/endpoints/${endpointId}/docker/containers/${containerId}/stop`, {
+      method: "POST",
+    })
+  }
+
+  /**
+   * Restart a container by ID
+   */
+  async restartContainer(containerId: string, endpointId: number = 1): Promise<void> {
+    await this.request(`/endpoints/${endpointId}/docker/containers/${containerId}/restart`, {
+      method: "POST",
+    })
+  }
+
+  /**
+   * Get container logs
+   */
+  async getContainerLogs(
+    containerId: string,
+    endpointId: number = 1,
+    options: { stdout?: boolean; stderr?: boolean; tail?: number } = {}
+  ): Promise<string> {
+    const { stdout = true, stderr = true, tail = 100 } = options
+    const params = new URLSearchParams({
+      stdout: String(stdout),
+      stderr: String(stderr),
+      tail: String(tail),
+    })
+    return this.request<string>(`/endpoints/${endpointId}/docker/containers/${containerId}/logs?${params}`)
+  }
+
+  /**
+   * Get container stats (CPU, Memory usage)
+   */
+  async getContainerStats(containerId: string, endpointId: number = 1): Promise<PortainerContainerStats> {
+    return this.request<PortainerContainerStats>(
+      `/endpoints/${endpointId}/docker/containers/${containerId}/stats?stream=false`
+    )
+  }
+}
+
+// ==========================================
+// Additional Type Definitions
+// ==========================================
+
+export interface PortainerEndpoint {
+  Id: number
+  Name: string
+  Type: number
+  Status: number
+  URL: string
+}
+
+export interface PortainerContainer {
+  Id: string
+  Names: string[]
+  Image: string
+  State: string
+  Status: string
+  Ports: Array<{
+    IP?: string
+    PrivatePort: number
+    PublicPort?: number
+    Type: string
+  }>
+  Labels: Record<string, string>
+  Created: number
+}
+
+export interface PortainerContainerStats {
+  cpu_stats: {
+    cpu_usage: { total_usage: number }
+    system_cpu_usage: number
+    online_cpus: number
+  }
+  memory_stats: {
+    usage: number
+    limit: number
+  }
 }

package/src/docker/client.ts

@@ -127,3 +127,138 @@ export async function isDockerAvailable(): Promise<boolean> {
     return false
   }
 }
+
+// ==========================================
+// Individual Container Operations
+// ==========================================
+
+export interface ContainerDetails {
+  id: string
+  name: string
+  service: string
+  status: "running" | "stopped" | "exited" | "paused"
+  state: string
+  health?: string
+  ports: string
+  uptime?: string
+  image: string
+  createdAt: string
+}
+
+/**
+ * Start a specific container by service name
+ */
+export async function startContainer(service: string): Promise<{ success: boolean; output: string }> {
+  try {
+    const composePath = getComposePath()
+    const result = await $`docker compose -f ${composePath} start ${service}`.text()
+    return { success: true, output: result }
+  } catch (error) {
+    return { success: false, output: String(error) }
+  }
+}
+
+/**
+ * Stop a specific container by service name
+ */
+export async function stopContainer(service: string): Promise<{ success: boolean; output: string }> {
+  try {
+    const composePath = getComposePath()
+    const result = await $`docker compose -f ${composePath} stop ${service}`.text()
+    return { success: true, output: result }
+  } catch (error) {
+    return { success: false, output: String(error) }
+  }
+}
+
+/**
+ * Restart a specific container by service name
+ */
+export async function restartContainer(service: string): Promise<{ success: boolean; output: string }> {
+  try {
+    const composePath = getComposePath()
+    const result = await $`docker compose -f ${composePath} restart ${service}`.text()
+    return { success: true, output: result }
+  } catch (error) {
+    return { success: false, output: String(error) }
+  }
+}
+
+/**
+ * Get detailed info for a specific container
+ */
+export async function getContainerDetails(containerName: string): Promise<ContainerDetails | null> {
+  try {
+    const result =
+      await $`docker inspect ${containerName} --format '{"id":"{{.Id}}","name":"{{.Name}}","state":"{{.State.Status}}","health":"{{if .State.Health}}{{.State.Health.Status}}{{end}}","image":"{{.Config.Image}}","createdAt":"{{.Created}}"}'`.text()
+
+    if (!result.trim()) return null
+
+    const data = JSON.parse(result.trim())
+
+    // Get uptime from Status
+    const statusResult = await $`docker ps --filter "name=${containerName}" --format "{{.Status}}"`.text()
+
+    // Get port mappings
+    const portsResult = await $`docker port ${containerName} 2>/dev/null`.text()
+
+    return {
+      id: data.id.substring(0, 12),
+      name: data.name.replace(/^\//, ""),
+      service: containerName,
+      status: data.state === "running" ? "running" : data.state === "exited" ? "exited" : "stopped",
+      state: data.state,
+      health: data.health || undefined,
+      ports: portsResult.trim() || "-",
+      uptime: statusResult.trim() || undefined,
+      image: data.image,
+      createdAt: data.createdAt,
+    }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Get container logs
+ */
+export async function getContainerLogs(
+  service: string,
+  lines: number = 50
+): Promise<{ success: boolean; output: string }> {
+  try {
+    const composePath = getComposePath()
+    const result = await $`docker compose -f ${composePath} logs ${service} --tail ${lines} --no-color`.text()
+    return { success: true, output: result }
+  } catch (error) {
+    return { success: false, output: String(error) }
+  }
+}
+
+/**
+ * Pull latest image for a specific service
+ */
+export async function pullServiceImage(service: string): Promise<{ success: boolean; output: string }> {
+  try {
+    const composePath = getComposePath()
+    const result = await $`docker compose -f ${composePath} pull ${service}`.text()
+    return { success: true, output: result }
+  } catch (error) {
+    return { success: false, output: String(error) }
+  }
+}
+
+/**
+ * Recreate a specific service (pull + up)
+ */
+export async function recreateService(service: string): Promise<{ success: boolean; output: string }> {
+  try {
+    const composePath = getComposePath()
+    // Pull first, then recreate
+    await $`docker compose -f ${composePath} pull ${service}`.text()
+    const result = await $`docker compose -f ${composePath} up -d --force-recreate ${service}`.text()
+    return { success: true, output: result }
+  } catch (error) {
+    return { success: false, output: String(error) }
+  }
+}

package/src/ui/screens/ContainerControl.ts

@@ -1,10 +1,18 @@
 /**
- * Container Control Screen
- * Start, stop, restart containers
+ * Container Control Screen (Modernized)
+ * Two-panel layout with container list and action panel
+ * Supports individual and bulk container operations
  */
 
-import type { RenderContext, CliRenderer } from "@opentui/core"
-import { BoxRenderable, TextRenderable, SelectRenderable, SelectRenderableEvents } from "@opentui/core"
+import type { RenderContext, CliRenderer, KeyEvent } from "@opentui/core"
+import {
+  BoxRenderable,
+  TextRenderable,
+  SelectRenderable,
+  SelectRenderableEvents,
+  TabSelectRenderable,
+  TabSelectRenderableEvents,
+} from "@opentui/core"
 import type { App } from "../App"
 import type { EasiarrConfig } from "../../config/schema"
 import {
@@ -13,133 +21,559 @@ import {
   composeStop,
   composeRestart,
   getContainerStatuses,
-  isDockerAvailable,
+  pullImages,
+  startContainer,
+  stopContainer,
+  restartContainer as restartSingleContainer,
+  getContainerLogs,
+  recreateService,
+  type ContainerStatus,
 } from "../../docker"
 import { createPageLayout } from "../components/PageLayout"
 
+type Mode = "containers" | "bulk"
+
 export class ContainerControl {
-  private renderer: RenderContext
+  private renderer: CliRenderer
   private container: BoxRenderable
   private app: App
   private config: EasiarrConfig
+  private keyHandler: ((k: KeyEvent) => void) | null = null
+
+  // UI Components
+  private page!: BoxRenderable
+  private modeTabs!: TabSelectRenderable
+  private leftPanel!: BoxRenderable
+  private rightPanel!: BoxRenderable
+  private statusText!: TextRenderable
+
+  // State
+  private mode: Mode = "containers"
+  private containers: ContainerStatus[] = []
+  private selectedIndex = 0
+  private isLoading = false
+  private statusMessage = ""
 
   constructor(renderer: RenderContext, container: BoxRenderable, app: App, config: EasiarrConfig) {
-    this.renderer = renderer
+    this.renderer = renderer as CliRenderer
     this.container = container
     this.app = app
     this.config = config
 
-    this.render()
+    this.init()
   }
 
-  private async render(): Promise<void> {
-    const statuses = await getContainerStatuses()
-    const runningCount = statuses.filter((s) => s.status === "running").length
-    const totalCount = statuses.length
+  private async init(): Promise<void> {
+    await this.loadContainers()
+    this.buildUI()
+    this.attachKeyHandler()
+  }
 
-    // Status in header info?
-    const statusText = `Status: ${runningCount}/${totalCount} Running`
+  private async loadContainers(): Promise<void> {
+    this.isLoading = true
+    this.containers = await getContainerStatuses()
+    this.isLoading = false
+  }
+
+  private buildUI(): void {
+    const runningCount = this.containers.filter((s) => s.status === "running").length
+    const totalCount = this.containers.length
+    const dockerOk = this.containers.length > 0 || !this.isLoading
 
-    // Check Docker availability first to possibly change status
-    const dockerOk = await isDockerAvailable()
-    const finalStepInfo = dockerOk ? statusText : "Internal Error: Docker Unavailable"
+    const statusText = `${runningCount}/${totalCount} Running`
+    const finalStepInfo = dockerOk ? statusText : "Docker Unavailable"
 
-    const { container: page, content } = createPageLayout(this.renderer as CliRenderer, {
+    const { container: page, content } = createPageLayout(this.renderer, {
       title: "Container Control",
       stepInfo: finalStepInfo,
       footerHint: [
-        { type: "key", key: "Enter", value: "Select/Action" },
-        { type: "key", key: "q", value: "Back" },
+        { type: "key", key: "Tab", value: "Switch Tab" },
+        { type: "key", key: "↑↓", value: "Navigate" },
+        { type: "key", key: "Enter", value: "Action" },
+        { type: "separator" },
+        { type: "key", key: "s", value: "Start" },
+        { type: "key", key: "x", value: "Stop" },
+        { type: "key", key: "r", value: "Restart" },
+        { type: "key", key: "l", value: "Logs" },
+        { type: "key", key: "u", value: "Update" },
       ],
     })
+    this.page = page
+
+    // Tab selector
+    this.modeTabs = new TabSelectRenderable(this.renderer, {
+      id: "mode-tabs",
+      width: "100%",
+      options: [
+        { name: "📦 Containers", value: "containers", description: "" },
+        { name: "⚡ Bulk Actions", value: "bulk", description: "" },
+      ],
+      tabWidth: 18,
+      showUnderline: false,
+      showDescription: false,
+      selectedBackgroundColor: "#4a9eff",
+      textColor: "#555555",
+    })
+
+    this.modeTabs.on(TabSelectRenderableEvents.ITEM_SELECTED, (index: number) => {
+      this.mode = index === 0 ? "containers" : "bulk"
+      this.updatePanels()
+    })
+
+    content.add(this.modeTabs)
+    content.add(new TextRenderable(this.renderer, { content: " " }))
+
+    // Two-panel layout
+    const panelRow = new BoxRenderable(this.renderer, {
+      width: "100%",
+      flexGrow: 1,
+      flexDirection: "row",
+    })
+
+    // Left panel - Container list or Bulk options
+    this.leftPanel = new BoxRenderable(this.renderer, {
+      width: "60%",
+      height: "100%",
+      flexDirection: "column",
+      border: true,
+      borderStyle: "single",
+      borderColor: "#4a9eff",
+      title: " Containers ",
+      padding: 1,
+    })
+
+    // Right panel - Actions or Info
+    this.rightPanel = new BoxRenderable(this.renderer, {
+      width: "40%",
+      height: "100%",
+      flexDirection: "column",
+      border: true,
+      borderStyle: "single",
+      borderColor: "#666666",
+      title: " Actions ",
+      padding: 1,
+    })
+
+    panelRow.add(this.leftPanel)
+    panelRow.add(this.rightPanel)
+    content.add(panelRow)
+
+    // Status bar
+    this.statusText = new TextRenderable(this.renderer, {
+      id: "status-bar",
+      content: "",
+      fg: "#f1fa8c",
+    })
+    content.add(this.statusText)
+
+    this.container.add(page)
+    this.updatePanels()
+  }
+
+  private clearPanel(panel: BoxRenderable): void {
+    const children = [...panel.getChildren()]
+    for (const child of children) {
+      if (child.id) panel.remove(child.id)
+    }
+  }
+
+  private updatePanels(): void {
+    if (this.mode === "containers") {
+      this.renderContainerList()
+      this.renderContainerActions()
+    } else {
+      this.renderBulkOptions()
+      this.renderBulkInfo()
+    }
+  }
 
-    if (!dockerOk) {
-      content.add(
+  private renderContainerList(): void {
+    this.clearPanel(this.leftPanel)
+    this.leftPanel.title = " Containers "
+
+    if (this.containers.length === 0) {
+      this.leftPanel.add(
         new TextRenderable(this.renderer, {
-          id: "docker-error",
-          content: "⚠ Docker is not available! Please check your Docker daemon.",
-          fg: "#ff6666",
+          id: "no-containers",
+          content: "No containers found.\nRun 'Start All' in Bulk Actions tab.",
+          fg: "#888888",
         })
       )
+      return
     }
 
-    // Spacer
-    content.add(
-      new TextRenderable(this.renderer, {
-        id: "spacer",
-        content: "",
+    // Render container list with selection highlight
+    this.containers.forEach((container, idx) => {
+      const isSelected = idx === this.selectedIndex
+      const icon = container.status === "running" ? "🟢" : "🔴"
+      const prefix = isSelected ? "▶ " : "  "
+
+      const row = new BoxRenderable(this.renderer, {
+        id: `container-row-${idx}`,
+        width: "100%",
+        flexDirection: "row",
+        backgroundColor: isSelected ? "#2a2a4a" : undefined,
       })
-    )
 
-    // Show container list
-    if (statuses.length > 0) {
-      for (const status of statuses.slice(0, 12)) {
-        // Show a few more since we have space
-        const icon = status.status === "running" ? "🟢" : "🔴"
-        content.add(
+      row.add(
+        new TextRenderable(this.renderer, {
+          id: `container-${idx}`,
+          content: `${prefix}${icon} ${container.name}`,
+          fg: isSelected ? "#ffffff" : container.status === "running" ? "#50fa7b" : "#666666",
+        })
+      )
+
+      // Show port if available
+      if (container.ports) {
+        row.add(
           new TextRenderable(this.renderer, {
-            id: `status-${status.name}`,
-            content: `${icon} ${status.name}`,
-            fg: status.status === "running" ? "#00cc66" : "#666666",
+            id: `port-${idx}`,
+            content: ` (${container.ports.split(",")[0] || ""})`,
+            fg: "#888888",
           })
         )
       }
-    } else if (dockerOk) {
-      content.add(
+
+      this.leftPanel.add(row)
+    })
+  }
+
+  private renderContainerActions(): void {
+    this.clearPanel(this.rightPanel)
+    this.rightPanel.title = " Actions "
+
+    const selected = this.containers[this.selectedIndex]
+    if (!selected) {
+      this.rightPanel.add(
         new TextRenderable(this.renderer, {
-          id: "no-containers",
-          content: "No containers found. Run 'Start All' first.",
+          id: "no-selection",
+          content: "No container selected",
           fg: "#888888",
         })
       )
+      return
     }
 
+    // Container info header
+    this.rightPanel.add(
+      new TextRenderable(this.renderer, {
+        id: "selected-name",
+        content: `📦 ${selected.name}`,
+        fg: "#4a9eff",
+      })
+    )
+    this.rightPanel.add(
+      new TextRenderable(this.renderer, {
+        id: "selected-status",
+        content: `Status: ${selected.status === "running" ? "🟢 Running" : "🔴 Stopped"}`,
+        fg: selected.status === "running" ? "#50fa7b" : "#ff5555",
+      })
+    )
+    this.rightPanel.add(new TextRenderable(this.renderer, { content: "" }))
+
+    // Action buttons based on state
+    const actions =
+      selected.status === "running"
+        ? [
+            { key: "x", label: "Stop Container", action: "stop" },
+            { key: "r", label: "Restart Container", action: "restart" },
+            { key: "l", label: "View Logs", action: "logs" },
+            { key: "u", label: "Update (Pull + Recreate)", action: "update" },
+          ]
+        : [
+            { key: "s", label: "Start Container", action: "start" },
+            { key: "u", label: "Update (Pull + Recreate)", action: "update" },
+          ]
+
+    this.rightPanel.add(
+      new TextRenderable(this.renderer, {
+        id: "actions-header",
+        content: "Keyboard Shortcuts:",
+        fg: "#888888",
+      })
+    )
+
+    actions.forEach(({ key, label }, idx) => {
+      this.rightPanel.add(
+        new TextRenderable(this.renderer, {
+          id: `action-${idx}`,
+          content: ` [${key}] ${label}`,
+          fg: "#f8f8f2",
+        })
+      )
+    })
+  }
+
+  private renderBulkOptions(): void {
+    this.clearPanel(this.leftPanel)
+    this.leftPanel.title = " Bulk Actions "
+
     const menu = new SelectRenderable(this.renderer, {
-      id: "container-menu",
+      id: "bulk-menu",
       width: "100%",
-      height: 8, // Fixed height for actions at bottom
+      height: 10,
       options: [
         { name: "▶ Start All", description: "docker compose up -d" },
         { name: "⏹ Stop All", description: "docker compose stop" },
         { name: "🔄 Restart All", description: "docker compose restart" },
         { name: "⬇ Down (Remove)", description: "docker compose down" },
+        { name: "📥 Pull Updates", description: "docker compose pull" },
         { name: "🔃 Refresh Status", description: "Update container list" },
         { name: "◀ Back to Main Menu", description: "" },
       ],
     })
 
     menu.on(SelectRenderableEvents.ITEM_SELECTED, async (index) => {
-      switch (index) {
-        case 0:
-          await composeUp()
-          break
-        case 1:
-          await composeStop()
-          break
-        case 2:
-          await composeRestart()
-          break
-        case 3:
-          await composeDown()
-          break
-        case 4:
-          // Refresh
-          break
-        case 5:
-          this.app.navigateTo("main")
-          return
-      }
-      // Refresh view - clear all children
-      const children = this.container.getChildren()
-      for (const child of children) {
-        this.container.remove(child.id)
-      }
-      this.render()
+      await this.executeBulkAction(index)
     })
 
-    content.add(menu)
-    menu.focus()
+    this.leftPanel.add(menu)
 
-    this.container.add(page)
+    // Focus the menu when in bulk mode
+    if (this.mode === "bulk") {
+      setTimeout(() => menu.focus(), 10)
+    }
+  }
+
+  private renderBulkInfo(): void {
+    this.clearPanel(this.rightPanel)
+    this.rightPanel.title = " Status "
+
+    const runningCount = this.containers.filter((c) => c.status === "running").length
+    const stoppedCount = this.containers.length - runningCount
+
+    this.rightPanel.add(
+      new TextRenderable(this.renderer, {
+        id: "total-containers",
+        content: `Total: ${this.containers.length} containers`,
+        fg: "#f8f8f2",
+      })
+    )
+    this.rightPanel.add(
+      new TextRenderable(this.renderer, {
+        id: "running-count",
+        content: `🟢 Running: ${runningCount}`,
+        fg: "#50fa7b",
+      })
+    )
+    this.rightPanel.add(
+      new TextRenderable(this.renderer, {
+        id: "stopped-count",
+        content: `🔴 Stopped: ${stoppedCount}`,
+        fg: stoppedCount > 0 ? "#ff5555" : "#666666",
+      })
+    )
+    this.rightPanel.add(new TextRenderable(this.renderer, { content: "" }))
+
+    // List running containers
+    if (runningCount > 0) {
+      this.rightPanel.add(
+        new TextRenderable(this.renderer, {
+          id: "running-header",
+          content: "Running:",
+          fg: "#888888",
+        })
+      )
+      this.containers
+        .filter((c) => c.status === "running")
+        .slice(0, 8)
+        .forEach((c, idx) => {
+          this.rightPanel.add(
+            new TextRenderable(this.renderer, {
+              id: `running-${idx}`,
+              content: ` • ${c.name}`,
+              fg: "#50fa7b",
+            })
+          )
+        })
+    }
+  }
+
+  private async executeBulkAction(index: number): Promise<void> {
+    this.setStatus("Executing...", "#f1fa8c")
+
+    switch (index) {
+      case 0:
+        this.setStatus("Starting all containers...", "#f1fa8c")
+        await composeUp()
+        this.setStatus("✓ All containers started", "#50fa7b")
+        break
+      case 1:
+        this.setStatus("Stopping all containers...", "#f1fa8c")
+        await composeStop()
+        this.setStatus("✓ All containers stopped", "#50fa7b")
+        break
+      case 2:
+        this.setStatus("Restarting all containers...", "#f1fa8c")
+        await composeRestart()
+        this.setStatus("✓ All containers restarted", "#50fa7b")
+        break
+      case 3:
+        this.setStatus("Removing containers...", "#f1fa8c")
+        await composeDown()
+        this.setStatus("✓ Containers removed", "#50fa7b")
+        break
+      case 4:
+        this.setStatus("Pulling latest images...", "#f1fa8c")
+        await pullImages()
+        this.setStatus("✓ Images updated", "#50fa7b")
+        break
+      case 5:
+        this.setStatus("Refreshing...", "#f1fa8c")
+        break
+      case 6:
+        this.cleanup()
+        this.app.navigateTo("main")
+        return
+    }
+
+    await this.loadContainers()
+    this.updatePanels()
+  }
+
+  private async executeContainerAction(action: string): Promise<void> {
+    const selected = this.containers[this.selectedIndex]
+    if (!selected) return
+
+    const serviceName = selected.name
+
+    switch (action) {
+      case "start":
+        this.setStatus(`Starting ${serviceName}...`, "#f1fa8c")
+        await startContainer(serviceName)
+        this.setStatus(`✓ ${serviceName} started`, "#50fa7b")
+        break
+      case "stop":
+        this.setStatus(`Stopping ${serviceName}...`, "#f1fa8c")
+        await stopContainer(serviceName)
+        this.setStatus(`✓ ${serviceName} stopped`, "#50fa7b")
+        break
+      case "restart":
+        this.setStatus(`Restarting ${serviceName}...`, "#f1fa8c")
+        await restartSingleContainer(serviceName)
+        this.setStatus(`✓ ${serviceName} restarted`, "#50fa7b")
+        break
+      case "update":
+        this.setStatus(`Updating ${serviceName}...`, "#f1fa8c")
+        await recreateService(serviceName)
+        this.setStatus(`✓ ${serviceName} updated`, "#50fa7b")
+        break
+      case "logs":
+        await this.showLogs(serviceName)
+        return // Don't refresh after logs
+    }
+
+    await this.loadContainers()
+    this.updatePanels()
+  }
+
+  private async showLogs(serviceName: string): Promise<void> {
+    this.setStatus(`Fetching logs for ${serviceName}...`, "#f1fa8c")
+    const result = await getContainerLogs(serviceName, 25)
+
+    this.clearPanel(this.rightPanel)
+    this.rightPanel.title = ` Logs: ${serviceName} `
+
+    if (!result.success) {
+      this.rightPanel.add(
+        new TextRenderable(this.renderer, {
+          id: "logs-error",
+          content: "Failed to fetch logs",
+          fg: "#ff5555",
+        })
+      )
+      return
+    }
+
+    // Display logs (truncated for UI)
+    const logLines = result.output.split("\n").slice(-20)
+    logLines.forEach((line, idx) => {
+      this.rightPanel.add(
+        new TextRenderable(this.renderer, {
+          id: `log-${idx}`,
+          content: line.substring(0, 60),
+          fg: "#888888",
+        })
+      )
+    })
+
+    this.setStatus("Press any key to close logs", "#4a9eff")
+  }
+
+  private setStatus(message: string, color: string): void {
+    this.statusMessage = message
+    if (this.statusText) {
+      this.statusText.content = message
+      this.statusText.fg = color
+    }
+  }
+
+  private attachKeyHandler(): void {
+    this.keyHandler = (k: KeyEvent) => {
+      if (this.mode === "containers") {
+        this.handleContainerModeKey(k)
+      } else {
+        this.handleBulkModeKey(k)
+      }
+    }
+    this.renderer.keyInput.on("keypress", this.keyHandler)
+  }
+
+  private handleContainerModeKey(k: KeyEvent): void {
+    const maxIndex = this.containers.length - 1
+
+    switch (k.name) {
+      case "up":
+        this.selectedIndex = Math.max(0, this.selectedIndex - 1)
+        this.updatePanels()
+        break
+      case "down":
+        this.selectedIndex = Math.min(maxIndex, this.selectedIndex + 1)
+        this.updatePanels()
+        break
+      case "tab":
+        this.mode = "bulk"
+        this.modeTabs.setSelectedIndex(1)
+        this.updatePanels()
+        break
+      case "s":
+        this.executeContainerAction("start")
+        break
+      case "x":
+        this.executeContainerAction("stop")
+        break
+      case "r":
+        this.executeContainerAction("restart")
+        break
+      case "l":
+        this.executeContainerAction("logs")
+        break
+      case "u":
+        this.executeContainerAction("update")
+        break
+      case "q":
+      case "escape":
+        this.cleanup()
+        this.app.navigateTo("main")
+        break
+    }
+  }
+
+  private handleBulkModeKey(k: KeyEvent): void {
+    if (k.name === "tab") {
+      this.mode = "containers"
+      this.modeTabs.setSelectedIndex(0)
+      this.updatePanels()
+    } else if (k.name === "q" || k.name === "escape") {
+      this.cleanup()
+      this.app.navigateTo("main")
+    }
+  }
+
+  private cleanup(): void {
+    if (this.keyHandler) {
+      this.renderer.keyInput.off("keypress", this.keyHandler)
+      this.keyHandler = null
+    }
   }
 }