docker/nginx-https.conf

@@ -303,6 +303,42 @@ http {
             proxy_set_header X-Forwarded-Proto $scheme;
         }
 
+        location ~ ^/docker(/.*)?$ {
+            proxy_pass http://127.0.0.1:30007;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            proxy_connect_timeout 60s;
+            proxy_send_timeout 300s;
+            proxy_read_timeout 300s;
+        }
+
+        location /docker/console/ {
+            proxy_pass http://127.0.0.1:30008/;
+            proxy_http_version 1.1;
+
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+            proxy_cache_bypass $http_upgrade;
+
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            proxy_read_timeout 86400s;
+            proxy_send_timeout 86400s;
+            proxy_connect_timeout 10s;
+
+            proxy_buffering off;
+            proxy_request_buffering off;
+
+            proxy_next_upstream error timeout invalid_header http_500 http_502 http_503;
+        }
+
         error_page 500 502 503 504 /50x.html;
         location = /50x.html {
             root /usr/share/nginx/html;

docker/nginx.conf

@@ -300,6 +300,42 @@ http {
             proxy_set_header X-Forwarded-Proto $scheme;
         }
 
+        location ~ ^/docker(/.*)?$ {
+            proxy_pass http://127.0.0.1:30007;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            proxy_connect_timeout 60s;
+            proxy_send_timeout 300s;
+            proxy_read_timeout 300s;
+        }
+
+        location /docker/console/ {
+            proxy_pass http://127.0.0.1:30008/;
+            proxy_http_version 1.1;
+
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+            proxy_cache_bypass $http_upgrade;
+
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            proxy_read_timeout 86400s;
+            proxy_send_timeout 86400s;
+            proxy_connect_timeout 10s;
+
+            proxy_buffering off;
+            proxy_request_buffering off;
+
+            proxy_next_upstream error timeout invalid_header http_500 http_502 http_503;
+        }
+
         error_page 500 502 503 504 /50x.html;
         location = /50x.html {
             root /usr/share/nginx/html;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "termix",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "termix",
-      "version": "1.8.1",
+      "version": "1.9.0",
       "dependencies": {
         "@codemirror/autocomplete": "^6.18.7",
         "@codemirror/commands": "^6.3.3",
@@ -16,6 +16,7 @@
         "@hookform/resolvers": "^5.1.1",
         "@monaco-editor/react": "^4.7.0",
         "@radix-ui/react-accordion": "^1.2.11",
+        "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-checkbox": "^1.3.2",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -26,7 +27,7 @@
         "@radix-ui/react-select": "^2.2.5",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slider": "^1.3.6",
-        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-slot": "^1.2.4",
         "@radix-ui/react-switch": "^1.2.5",
         "@radix-ui/react-tabs": "^1.1.12",
         "@radix-ui/react-tooltip": "^1.2.8",
@@ -154,6 +155,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -439,6 +441,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.19.1.tgz",
       "integrity": "sha512-q6NenYkEy2fn9+JyjIxMWcNjzTL/IhwqfzOut1/G3PrIFkrbl4AL7Wkse5tLrQUUyqGoAKU5+Pi5jnnXxH5HGw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/language": "^6.0.0",
         "@codemirror/state": "^6.0.0",
@@ -487,6 +490,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
       "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/autocomplete": "^6.0.0",
         "@codemirror/language": "^6.0.0",
@@ -513,6 +517,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.11.tgz",
       "integrity": "sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/autocomplete": "^6.0.0",
         "@codemirror/lang-css": "^6.0.0",
@@ -540,6 +545,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
       "integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/autocomplete": "^6.0.0",
         "@codemirror/language": "^6.6.0",
@@ -740,6 +746,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.3.tgz",
       "integrity": "sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.23.0",
@@ -816,6 +823,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
       "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@marijn/find-cluster-break": "^1.0.0"
       }
@@ -837,6 +845,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.6.tgz",
       "integrity": "sha512-qiS0z1bKs5WOvHIAC0Cybmv4AJSkAXgX5aD6Mqd2epSLlVJsQl8NG23jCVouIgkh4All/mrbdsf2UOLFnJw0tw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.5.0",
         "crelt": "^1.0.6",
@@ -1164,6 +1173,7 @@
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -1550,7 +1560,6 @@
       "dev": true,
       "license": "BSD-2-Clause",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "cross-dirname": "^0.1.0",
         "debug": "^4.3.4",
@@ -1572,7 +1581,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
@@ -2529,7 +2537,8 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.3.0.tgz",
       "integrity": "sha512-L9X8uHCYU310o99L3/MpJKYxPzXPOS7S0NmBaM7UO/x2Kb2WbmMLSkfvdr1KxRIFYOpbY0Jhn7CfLSUDzL8arQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@lezer/cpp": {
       "version": "1.1.3",
@@ -2569,6 +2578,7 @@
       "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
       "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@lezer/common": "^1.3.0"
       }
@@ -2600,6 +2610,7 @@
       "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz",
       "integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@lezer/common": "^1.2.0",
         "@lezer/highlight": "^1.1.3",
@@ -2622,6 +2633,7 @@
       "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
       "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@lezer/common": "^1.0.0"
       }
@@ -3144,6 +3156,52 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
+      "integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -3253,6 +3311,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -3319,6 +3395,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
@@ -3511,6 +3605,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
@@ -3548,6 +3660,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
@@ -3651,6 +3781,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-progress": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
@@ -3780,6 +3928,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
@@ -3837,9 +4003,9 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.3",
+      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
-      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2"
@@ -3947,6 +4113,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -4845,6 +5029,7 @@
       "integrity": "sha512-NMv9ASNARoKksWtsq/SHakpYAYnhBrQgGD8zkLYk/jaK8jUGn08CfEdTRgYhMypUQAfzSP8W6gNLe0q19/t4VA==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -5002,6 +5187,7 @@
       "resolved": "https://registry.npmjs.org/@types/express/-/express-5.0.5.tgz",
       "integrity": "sha512-LuIQOcb6UmnF7C1PCFmEU1u2hmiHL43fgFQX67sN3H4Z+0Yk0Neo++mFsBjhOAuLzvlQeqAAkeDOZrJs9rzumQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "^5.0.0",
@@ -5124,6 +5310,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.9.2.tgz",
       "integrity": "sha512-uWN8YqxXxqFMX2RqGOrumsKeti4LlmIMIyV0lgut4jx7KQBcBiW6vkDtIBvHnHIquwNfJhk8v2OtmO8zXWHfPA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -5166,6 +5353,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -5176,6 +5364,7 @@
       "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -5343,6 +5532,7 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -5719,7 +5909,8 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
       "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/7zip-bin": {
       "version": "5.2.0",
@@ -5754,6 +5945,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6176,6 +6368,7 @@
       "integrity": "sha512-3yVdyZhklTiNrtg+4WqHpJpFDd+WHTg2oM7UcR80GqL05AOV0xEJzc6qNvFYoEtE+hRp1n9MpN6/+4yhlGkDXQ==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "bindings": "^1.5.0",
         "prebuild-install": "^7.1.1"
@@ -6310,6 +6503,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -7313,6 +7507,7 @@
       "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "env-paths": "^2.2.1",
         "import-fresh": "^3.3.0",
@@ -7389,8 +7584,7 @@
       "integrity": "sha512-+R08/oI0nl3vfPcqftZRpytksBXDzOUveBq/NBVx0sUp1axwzPQrKinNx5yd5sxPu8j1wIy8AfnVQ+5eFdha6Q==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
@@ -7849,6 +8043,7 @@
       "integrity": "sha512-59CAAjAhTaIMCN8y9kD573vDkxbs1uhDcrFLHSgutYdPcGOU35Rf95725snvzEOy4BFB7+eLJ8djCNPmGwG67w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "app-builder-lib": "26.0.12",
         "builder-util": "26.0.11",
@@ -7946,8 +8141,7 @@
       "version": "3.1.7",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz",
       "integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==",
-      "license": "(MPL-2.0 OR Apache-2.0)",
+      "license": "(MPL-2.0 OR Apache-2.0)"
-      "peer": true
     },
     "node_modules/dot-prop": {
       "version": "5.3.0",
@@ -8299,7 +8493,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@electron/asar": "^3.2.1",
         "debug": "^4.1.1",
@@ -8320,7 +8513,6 @@
       "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.1.2",
         "jsonfile": "^4.0.0",
@@ -8336,7 +8528,6 @@
       "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -8347,7 +8538,6 @@
       "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 4.0.0"
       }
@@ -8610,6 +8800,7 @@
       "integrity": "sha512-iy2GE3MHrYTL5lrCtMZ0X1KLEKKUjmK0kzwcnefhR66txcEmXZD2YWgR5GNdcEwkNx3a0siYkSvl0vIC+Svjmg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -10208,6 +10399,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.27.6"
       },
@@ -11749,7 +11941,6 @@
       "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
       "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
@@ -13777,7 +13968,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "commander": "^9.4.0"
       },
@@ -13795,7 +13985,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": "^12.20.0 || >=14"
       }
@@ -14247,6 +14436,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14256,6 +14446,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -14282,6 +14473,7 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.66.0.tgz",
       "integrity": "sha512-xXBqsWGKrY46ZqaHDo+ZUYiMUgi8suYu5kdrS20EG8KiL7VRQitEbNjm+UcrDYrNi1YLyfpmAeGjCZYXLT9YBw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -14429,6 +14621,7 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -14637,7 +14830,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -15958,7 +16152,6 @@
       "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "mkdirp": "^0.5.1",
         "rimraf": "~2.6.2"
@@ -15999,7 +16192,6 @@
       "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "minimist": "^1.2.6"
       },
@@ -16014,7 +16206,6 @@
       "deprecated": "Rimraf versions prior to v4 are no longer supported",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -16119,6 +16310,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -16324,6 +16516,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -16736,6 +16929,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
       "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -16827,6 +17021,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },

package.json

@@ -35,6 +35,7 @@
     "@hookform/resolvers": "^5.1.1",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -45,7 +46,7 @@
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.8",

src/backend/database/db/schema.ts

@@ -91,7 +91,6 @@ export const sshData = sqliteTable("ssh_data", {
     .default(false),
   defaultPath: text("default_path"),
   statsConfig: text("stats_config"),
-  dockerConfig: text("docker_config"),
   terminalConfig: text("terminal_config"),
   quickActions: text("quick_actions"),
   createdAt: text("created_at")

src/backend/database/routes/ssh.ts

@@ -241,7 +241,6 @@ router.post(
       jumpHosts,
       quickActions,
       statsConfig,
-      dockerConfig,
       terminalConfig,
       forceKeyboardInteractive,
     } = hostData;
@@ -285,7 +284,6 @@ router.post(
       enableDocker: enableDocker ? 1 : 0,
       defaultPath: defaultPath || null,
       statsConfig: statsConfig ? JSON.stringify(statsConfig) : null,
-      dockerConfig: dockerConfig ? JSON.stringify(dockerConfig) : null,
       terminalConfig: terminalConfig ? JSON.stringify(terminalConfig) : null,
       forceKeyboardInteractive: forceKeyboardInteractive ? "true" : "false",
     };
@@ -349,9 +347,6 @@ router.post(
         statsConfig: createdHost.statsConfig
           ? JSON.parse(createdHost.statsConfig as string)
           : undefined,
-        dockerConfig: createdHost.dockerConfig
-          ? JSON.parse(createdHost.dockerConfig as string)
-          : undefined,
       };
 
       const resolvedHost = (await resolveHostCredentials(baseHost)) || baseHost;
@@ -471,7 +466,6 @@ router.put(
       jumpHosts,
       quickActions,
       statsConfig,
-      dockerConfig,
       terminalConfig,
       forceKeyboardInteractive,
     } = hostData;
@@ -516,7 +510,6 @@ router.put(
       enableDocker: enableDocker ? 1 : 0,
       defaultPath: defaultPath || null,
       statsConfig: statsConfig ? JSON.stringify(statsConfig) : null,
-      dockerConfig: dockerConfig ? JSON.stringify(dockerConfig) : null,
       terminalConfig: terminalConfig ? JSON.stringify(terminalConfig) : null,
       forceKeyboardInteractive: forceKeyboardInteractive ? "true" : "false",
     };
@@ -703,9 +696,6 @@ router.get(
             statsConfig: row.statsConfig
               ? JSON.parse(row.statsConfig as string)
               : undefined,
-            dockerConfig: row.dockerConfig
-              ? JSON.parse(row.dockerConfig as string)
-              : undefined,
             terminalConfig: row.terminalConfig
               ? JSON.parse(row.terminalConfig as string)
               : undefined,

src/backend/ssh/docker-console.ts

@@ -0,0 +1,687 @@
+import { Client as SSHClient } from "ssh2";
+import { WebSocketServer, WebSocket } from "ws";
+import { parse as parseUrl } from "url";
+import { AuthManager } from "../utils/auth-manager.js";
+import { sshData, sshCredentials } from "../database/db/schema.js";
+import { and, eq } from "drizzle-orm";
+import { getDb } from "../database/db/index.js";
+import { SimpleDBOps } from "../utils/simple-db-ops.js";
+import { systemLogger } from "../utils/logger.js";
+import type { SSHHost } from "../../types/index.js";
+
+const dockerConsoleLogger = systemLogger;
+
+interface SSHSession {
+  client: SSHClient;
+  stream: any;
+  isConnected: boolean;
+  containerId?: string;
+  shell?: string;
+}
+
+const activeSessions = new Map<string, SSHSession>();
+
+// WebSocket server on port 30008
+const wss = new WebSocketServer({
+  port: 30008,
+  verifyClient: async (info, callback) => {
+    try {
+      const url = parseUrl(info.req.url || "", true);
+      const token = url.query.token as string;
+
+      if (!token) {
+        dockerConsoleLogger.warn("WebSocket connection rejected: No token", {
+          operation: "ws_verify",
+        });
+        return callback(false, 401, "Authentication required");
+      }
+
+      const authManager = AuthManager.getInstance();
+      const decoded = await authManager.verifyJWTToken(token);
+
+      if (!decoded || !decoded.userId) {
+        dockerConsoleLogger.warn(
+          "WebSocket connection rejected: Invalid token",
+          {
+            operation: "ws_verify",
+          },
+        );
+        return callback(false, 401, "Invalid token");
+      }
+
+      // Store userId in the request for later use
+      (info.req as any).userId = decoded.userId;
+
+      dockerConsoleLogger.info("WebSocket connection verified", {
+        operation: "ws_verify",
+        userId: decoded.userId,
+      });
+
+      callback(true);
+    } catch (error) {
+      dockerConsoleLogger.error("WebSocket verification error", error, {
+        operation: "ws_verify",
+      });
+      callback(false, 500, "Authentication failed");
+    }
+  },
+});
+
+// Helper function to detect available shell in container
+async function detectShell(
+  session: SSHSession,
+  containerId: string,
+): Promise<string> {
+  const shells = ["bash", "sh", "ash"];
+
+  for (const shell of shells) {
+    try {
+      await new Promise<void>((resolve, reject) => {
+        session.client.exec(
+          `docker exec ${containerId} which ${shell}`,
+          (err, stream) => {
+            if (err) return reject(err);
+
+            let output = "";
+            stream.on("data", (data: Buffer) => {
+              output += data.toString();
+            });
+
+            stream.on("close", (code: number) => {
+              if (code === 0 && output.trim()) {
+                resolve();
+              } else {
+                reject(new Error(`Shell ${shell} not found`));
+              }
+            });
+
+            stream.stderr.on("data", () => {
+              // Ignore stderr
+            });
+          },
+        );
+      });
+
+      // If we get here, the shell was found
+      return shell;
+    } catch {
+      // Try next shell
+      continue;
+    }
+  }
+
+  // Default to sh if nothing else works
+  return "sh";
+}
+
+// Helper function to create jump host chain
+async function createJumpHostChain(
+  jumpHosts: any[],
+  userId: string,
+): Promise<SSHClient | null> {
+  if (!jumpHosts || jumpHosts.length === 0) {
+    return null;
+  }
+
+  let currentClient: SSHClient | null = null;
+
+  for (let i = 0; i < jumpHosts.length; i++) {
+    const jumpHostId = jumpHosts[i].hostId;
+
+    // Fetch jump host from database
+    const jumpHostData = await SimpleDBOps.select(
+      getDb()
+        .select()
+        .from(sshData)
+        .where(and(eq(sshData.id, jumpHostId), eq(sshData.userId, userId))),
+      "ssh_data",
+      userId,
+    );
+
+    if (jumpHostData.length === 0) {
+      throw new Error(`Jump host ${jumpHostId} not found`);
+    }
+
+    const jumpHost = jumpHostData[0] as unknown as SSHHost;
+    if (typeof jumpHost.jumpHosts === "string" && jumpHost.jumpHosts) {
+      try {
+        jumpHost.jumpHosts = JSON.parse(jumpHost.jumpHosts);
+      } catch (e) {
+        dockerConsoleLogger.error("Failed to parse jump hosts", e, {
+          hostId: jumpHost.id,
+        });
+        jumpHost.jumpHosts = [];
+      }
+    }
+
+    // Resolve credentials for jump host
+    let resolvedCredentials: any = {
+      password: jumpHost.password,
+      sshKey: jumpHost.key,
+      keyPassword: jumpHost.keyPassword,
+      authType: jumpHost.authType,
+    };
+
+    if (jumpHost.credentialId) {
+      const credentials = await SimpleDBOps.select(
+        getDb()
+          .select()
+          .from(sshCredentials)
+          .where(
+            and(
+              eq(sshCredentials.id, jumpHost.credentialId as number),
+              eq(sshCredentials.userId, userId),
+            ),
+          ),
+        "ssh_credentials",
+        userId,
+      );
+
+      if (credentials.length > 0) {
+        const credential = credentials[0];
+        resolvedCredentials = {
+          password: credential.password,
+          sshKey:
+            credential.private_key || credential.privateKey || credential.key,
+          keyPassword: credential.key_password || credential.keyPassword,
+          authType: credential.auth_type || credential.authType,
+        };
+      }
+    }
+
+    const client = new SSHClient();
+
+    const config: any = {
+      host: jumpHost.ip,
+      port: jumpHost.port || 22,
+      username: jumpHost.username,
+      tryKeyboard: true,
+      readyTimeout: 60000,
+      keepaliveInterval: 30000,
+      keepaliveCountMax: 120,
+      tcpKeepAlive: true,
+      tcpKeepAliveInitialDelay: 30000,
+    };
+
+    // Set authentication
+    if (
+      resolvedCredentials.authType === "password" &&
+      resolvedCredentials.password
+    ) {
+      config.password = resolvedCredentials.password;
+    } else if (
+      resolvedCredentials.authType === "key" &&
+      resolvedCredentials.sshKey
+    ) {
+      const cleanKey = resolvedCredentials.sshKey
+        .trim()
+        .replace(/\r\n/g, "\n")
+        .replace(/\r/g, "\n");
+      config.privateKey = Buffer.from(cleanKey, "utf8");
+      if (resolvedCredentials.keyPassword) {
+        config.passphrase = resolvedCredentials.keyPassword;
+      }
+    }
+
+    // If we have a previous client, use it as the sock
+    if (currentClient) {
+      await new Promise<void>((resolve, reject) => {
+        currentClient!.forwardOut(
+          "127.0.0.1",
+          0,
+          jumpHost.ip,
+          jumpHost.port || 22,
+          (err, stream) => {
+            if (err) return reject(err);
+            config.sock = stream;
+            resolve();
+          },
+        );
+      });
+    }
+
+    await new Promise<void>((resolve, reject) => {
+      client.on("ready", () => resolve());
+      client.on("error", reject);
+      client.connect(config);
+    });
+
+    currentClient = client;
+  }
+
+  return currentClient;
+}
+
+// Handle WebSocket connections
+wss.on("connection", async (ws: WebSocket, req) => {
+  const userId = (req as any).userId;
+  const sessionId = `docker-console-${Date.now()}-${Math.random()}`;
+
+  dockerConsoleLogger.info("Docker console WebSocket connected", {
+    operation: "ws_connect",
+    sessionId,
+    userId,
+  });
+
+  let sshSession: SSHSession | null = null;
+
+  ws.on("message", async (data) => {
+    try {
+      const message = JSON.parse(data.toString());
+
+      switch (message.type) {
+        case "connect": {
+          const { hostConfig, containerId, shell, cols, rows } =
+            message.data as {
+              hostConfig: SSHHost;
+              containerId: string;
+              shell?: string;
+              cols?: number;
+              rows?: number;
+            };
+
+          if (
+            typeof hostConfig.jumpHosts === "string" &&
+            hostConfig.jumpHosts
+          ) {
+            try {
+              hostConfig.jumpHosts = JSON.parse(hostConfig.jumpHosts);
+            } catch (e) {
+              dockerConsoleLogger.error("Failed to parse jump hosts", e, {
+                hostId: hostConfig.id,
+              });
+              hostConfig.jumpHosts = [];
+            }
+          }
+
+          if (!hostConfig || !containerId) {
+            ws.send(
+              JSON.stringify({
+                type: "error",
+                message: "Host configuration and container ID are required",
+              }),
+            );
+            return;
+          }
+
+          // Check if Docker is enabled for this host
+          if (!hostConfig.enableDocker) {
+            ws.send(
+              JSON.stringify({
+                type: "error",
+                message:
+                  "Docker is not enabled for this host. Enable it in Host Settings.",
+              }),
+            );
+            return;
+          }
+
+          try {
+            // Resolve credentials
+            let resolvedCredentials: any = {
+              password: hostConfig.password,
+              sshKey: hostConfig.key,
+              keyPassword: hostConfig.keyPassword,
+              authType: hostConfig.authType,
+            };
+
+            if (hostConfig.credentialId) {
+              const credentials = await SimpleDBOps.select(
+                getDb()
+                  .select()
+                  .from(sshCredentials)
+                  .where(
+                    and(
+                      eq(sshCredentials.id, hostConfig.credentialId as number),
+                      eq(sshCredentials.userId, userId),
+                    ),
+                  ),
+                "ssh_credentials",
+                userId,
+              );
+
+              if (credentials.length > 0) {
+                const credential = credentials[0];
+                resolvedCredentials = {
+                  password: credential.password,
+                  sshKey:
+                    credential.private_key ||
+                    credential.privateKey ||
+                    credential.key,
+                  keyPassword:
+                    credential.key_password || credential.keyPassword,
+                  authType: credential.auth_type || credential.authType,
+                };
+              }
+            }
+
+            // Create SSH client
+            const client = new SSHClient();
+
+            const config: any = {
+              host: hostConfig.ip,
+              port: hostConfig.port || 22,
+              username: hostConfig.username,
+              tryKeyboard: true,
+              readyTimeout: 60000,
+              keepaliveInterval: 30000,
+              keepaliveCountMax: 120,
+              tcpKeepAlive: true,
+              tcpKeepAliveInitialDelay: 30000,
+            };
+
+            // Set authentication
+            if (
+              resolvedCredentials.authType === "password" &&
+              resolvedCredentials.password
+            ) {
+              config.password = resolvedCredentials.password;
+            } else if (
+              resolvedCredentials.authType === "key" &&
+              resolvedCredentials.sshKey
+            ) {
+              const cleanKey = resolvedCredentials.sshKey
+                .trim()
+                .replace(/\r\n/g, "\n")
+                .replace(/\r/g, "\n");
+              config.privateKey = Buffer.from(cleanKey, "utf8");
+              if (resolvedCredentials.keyPassword) {
+                config.passphrase = resolvedCredentials.keyPassword;
+              }
+            }
+
+            // Handle jump hosts if configured
+            if (hostConfig.jumpHosts && hostConfig.jumpHosts.length > 0) {
+              const jumpClient = await createJumpHostChain(
+                hostConfig.jumpHosts,
+                userId,
+              );
+              if (jumpClient) {
+                const stream = await new Promise<any>((resolve, reject) => {
+                  jumpClient.forwardOut(
+                    "127.0.0.1",
+                    0,
+                    hostConfig.ip,
+                    hostConfig.port || 22,
+                    (err, stream) => {
+                      if (err) return reject(err);
+                      resolve(stream);
+                    },
+                  );
+                });
+                config.sock = stream;
+              }
+            }
+
+            // Connect to SSH
+            await new Promise<void>((resolve, reject) => {
+              client.on("ready", () => resolve());
+              client.on("error", reject);
+              client.connect(config);
+            });
+
+            sshSession = {
+              client,
+              stream: null,
+              isConnected: true,
+              containerId,
+            };
+
+            activeSessions.set(sessionId, sshSession);
+
+            // Detect or use provided shell
+            const detectedShell =
+              shell || (await detectShell(sshSession, containerId));
+            sshSession.shell = detectedShell;
+
+            // Create docker exec PTY
+            const execCommand = `docker exec -it ${containerId} /bin/${detectedShell}`;
+
+            client.exec(
+              execCommand,
+              {
+                pty: {
+                  term: "xterm-256color",
+                  cols: cols || 80,
+                  rows: rows || 24,
+                },
+              },
+              (err, stream) => {
+                if (err) {
+                  dockerConsoleLogger.error(
+                    "Failed to create docker exec",
+                    err,
+                    {
+                      operation: "docker_exec",
+                      sessionId,
+                      containerId,
+                    },
+                  );
+
+                  ws.send(
+                    JSON.stringify({
+                      type: "error",
+                      message: `Failed to start console: ${err.message}`,
+                    }),
+                  );
+                  return;
+                }
+
+                sshSession!.stream = stream;
+
+                // Forward stream output to WebSocket
+                stream.on("data", (data: Buffer) => {
+                  if (ws.readyState === WebSocket.OPEN) {
+                    ws.send(
+                      JSON.stringify({
+                        type: "output",
+                        data: data.toString("utf8"),
+                      }),
+                    );
+                  }
+                });
+
+                stream.stderr.on("data", (data: Buffer) => {
+                  if (ws.readyState === WebSocket.OPEN) {
+                    ws.send(
+                      JSON.stringify({
+                        type: "output",
+                        data: data.toString("utf8"),
+                      }),
+                    );
+                  }
+                });
+
+                stream.on("close", () => {
+                  if (ws.readyState === WebSocket.OPEN) {
+                    ws.send(
+                      JSON.stringify({
+                        type: "disconnected",
+                        message: "Console session ended",
+                      }),
+                    );
+                  }
+
+                  // Cleanup
+                  if (sshSession) {
+                    sshSession.client.end();
+                    activeSessions.delete(sessionId);
+                  }
+                });
+
+                ws.send(
+                  JSON.stringify({
+                    type: "connected",
+                    data: { shell: detectedShell },
+                  }),
+                );
+
+                dockerConsoleLogger.info("Docker console session started", {
+                  operation: "console_start",
+                  sessionId,
+                  containerId,
+                  shell: detectedShell,
+                });
+              },
+            );
+          } catch (error) {
+            dockerConsoleLogger.error("Failed to connect to container", error, {
+              operation: "console_connect",
+              sessionId,
+              containerId: message.data.containerId,
+            });
+
+            ws.send(
+              JSON.stringify({
+                type: "error",
+                message:
+                  error instanceof Error
+                    ? error.message
+                    : "Failed to connect to container",
+              }),
+            );
+          }
+          break;
+        }
+
+        case "input": {
+          if (sshSession && sshSession.stream) {
+            sshSession.stream.write(message.data);
+          }
+          break;
+        }
+
+        case "resize": {
+          if (sshSession && sshSession.stream) {
+            const { cols, rows } = message.data;
+            sshSession.stream.setWindow(rows, cols);
+
+            dockerConsoleLogger.debug("Console resized", {
+              operation: "console_resize",
+              sessionId,
+              cols,
+              rows,
+            });
+          }
+          break;
+        }
+
+        case "disconnect": {
+          if (sshSession) {
+            if (sshSession.stream) {
+              sshSession.stream.end();
+            }
+            sshSession.client.end();
+            activeSessions.delete(sessionId);
+
+            dockerConsoleLogger.info("Docker console disconnected", {
+              operation: "console_disconnect",
+              sessionId,
+            });
+
+            ws.send(
+              JSON.stringify({
+                type: "disconnected",
+                message: "Disconnected from container",
+              }),
+            );
+          }
+          break;
+        }
+
+        case "ping": {
+          // Respond with pong to acknowledge keepalive
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: "pong" }));
+          }
+          break;
+        }
+
+        default:
+          dockerConsoleLogger.warn("Unknown message type", {
+            operation: "ws_message",
+            type: message.type,
+          });
+      }
+    } catch (error) {
+      dockerConsoleLogger.error("WebSocket message error", error, {
+        operation: "ws_message",
+        sessionId,
+      });
+
+      ws.send(
+        JSON.stringify({
+          type: "error",
+          message: error instanceof Error ? error.message : "An error occurred",
+        }),
+      );
+    }
+  });
+
+  ws.on("close", () => {
+    dockerConsoleLogger.info("WebSocket connection closed", {
+      operation: "ws_close",
+      sessionId,
+    });
+
+    // Cleanup SSH session if still active
+    if (sshSession) {
+      if (sshSession.stream) {
+        sshSession.stream.end();
+      }
+      sshSession.client.end();
+      activeSessions.delete(sessionId);
+    }
+  });
+
+  ws.on("error", (error) => {
+    dockerConsoleLogger.error("WebSocket error", error, {
+      operation: "ws_error",
+      sessionId,
+    });
+
+    // Cleanup
+    if (sshSession) {
+      if (sshSession.stream) {
+        sshSession.stream.end();
+      }
+      sshSession.client.end();
+      activeSessions.delete(sessionId);
+    }
+  });
+});
+
+dockerConsoleLogger.info(
+  "Docker console WebSocket server started on port 30008",
+  {
+    operation: "startup",
+  },
+);
+
+// Graceful shutdown
+process.on("SIGTERM", () => {
+  dockerConsoleLogger.info("Shutting down Docker console server...", {
+    operation: "shutdown",
+  });
+
+  // Close all active sessions
+  activeSessions.forEach((session, sessionId) => {
+    if (session.stream) {
+      session.stream.end();
+    }
+    session.client.end();
+    dockerConsoleLogger.info("Closed session during shutdown", {
+      operation: "shutdown",
+      sessionId,
+    });
+  });
+
+  activeSessions.clear();
+
+  wss.close(() => {
+    dockerConsoleLogger.info("Docker console server closed", {
+      operation: "shutdown",
+    });
+    process.exit(0);
+  });
+});

src/backend/starter.ts

@@ -102,6 +102,8 @@ import { systemLogger, versionLogger } from "./utils/logger.js";
     await import("./ssh/tunnel.js");
     await import("./ssh/file-manager.js");
     await import("./ssh/server-stats.js");
+    await import("./ssh/docker.js");
+    await import("./ssh/docker-console.js");
     await import("./dashboard.js");
 
     process.on("SIGINT", () => {

src/backend/utils/logger.ts

@@ -36,7 +36,7 @@ const SENSITIVE_FIELDS = [
 
 const TRUNCATE_FIELDS = ["data", "content", "body", "response", "request"];
 
-class Logger {
+export class Logger {
   private serviceName: string;
   private serviceIcon: string;
   private serviceColor: string;

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,155 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

src/types/index.ts

@@ -14,17 +14,6 @@ export interface QuickAction {
   snippetId: number;
 }
 
-export interface DockerConfig {
-  connectionType: "socket" | "tcp" | "tls";
-  socketPath?: string;
-  host?: string;
-  port?: number;
-  tlsVerify?: boolean;
-  tlsCaCert?: string;
-  tlsCert?: string;
-  tlsKey?: string;
-}
-
 export interface SSHHost {
   id: number;
   name: string;
@@ -57,7 +46,6 @@ export interface SSHHost {
   jumpHosts?: JumpHost[];
   quickActions?: QuickAction[];
   statsConfig?: string;
-  dockerConfig?: string;
   terminalConfig?: TerminalConfig;
   createdAt: string;
   updatedAt: string;
@@ -97,7 +85,6 @@ export interface SSHHostData {
   jumpHosts?: JumpHostData[];
   quickActions?: QuickActionData[];
   statsConfig?: string | Record<string, unknown>;
-  dockerConfig?: DockerConfig | string;
   terminalConfig?: TerminalConfig;
 }
 
@@ -687,3 +674,55 @@ export interface RestoreRequestBody {
   backupPath: string;
   targetPath?: string;
 }
+
+// ============================================================================
+// DOCKER TYPES
+// ============================================================================
+
+export interface DockerContainer {
+  id: string;
+  name: string;
+  image: string;
+  status: string;
+  state:
+    | "created"
+    | "running"
+    | "paused"
+    | "restarting"
+    | "removing"
+    | "exited"
+    | "dead";
+  ports: string;
+  created: string;
+  command?: string;
+  labels?: Record<string, string>;
+  networks?: string[];
+  mounts?: string[];
+}
+
+export interface DockerStats {
+  cpu: string;
+  memoryUsed: string;
+  memoryLimit: string;
+  memoryPercent: string;
+  netInput: string;
+  netOutput: string;
+  blockRead: string;
+  blockWrite: string;
+  pids?: string;
+}
+
+export interface DockerLogOptions {
+  tail?: number;
+  timestamps?: boolean;
+  since?: string;
+  until?: string;
+  follow?: boolean;
+}
+
+export interface DockerValidation {
+  available: boolean;
+  version?: string;
+  error?: string;
+  code?: string;
+}

src/ui/desktop/apps/docker/DockerManager.tsx

@@ -1,21 +1,37 @@
 import React from "react";
 import { useSidebar } from "@/components/ui/sidebar.tsx";
 import { Separator } from "@/components/ui/separator.tsx";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs.tsx";
 import { useTranslation } from "react-i18next";
-
+import { toast } from "sonner";
-interface HostConfig {
+import type {
-  id: number;
+  SSHHost,
-  name: string;
+  DockerContainer,
-  ip: string;
+  DockerValidation,
-  username: string;
+} from "@/types/index.js";
-  folder?: string;
+import {
-  enableFileManager?: boolean;
+  connectDockerSession,
-  tunnelConnections?: unknown[];
+  disconnectDockerSession,
-  [key: string]: unknown;
+  listDockerContainers,
-}
+  validateDockerAvailability,
+  keepaliveDockerSession,
+} from "@/ui/main-axios.ts";
+import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
+import { AlertCircle } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert.tsx";
+import { ContainerList } from "./components/ContainerList.tsx";
+import { LogViewer } from "./components/LogViewer.tsx";
+import { ContainerStats } from "./components/ContainerStats.tsx";
+import { ConsoleTerminal } from "./components/ConsoleTerminal.tsx";
+import { ContainerDetail } from "./components/ContainerDetail.tsx";
 
 interface DockerManagerProps {
-  hostConfig?: HostConfig;
+  hostConfig?: SSHHost;
   title?: string;
   isVisible?: boolean;
   isTopbarOpen?: boolean;
@@ -32,10 +48,26 @@ export function DockerManager({
   const { t } = useTranslation();
   const { state: sidebarState } = useSidebar();
   const [currentHostConfig, setCurrentHostConfig] = React.useState(hostConfig);
+  const [sessionId, setSessionId] = React.useState<string | null>(null);
+  const [containers, setContainers] = React.useState<DockerContainer[]>([]);
+  const [selectedContainer, setSelectedContainer] = React.useState<
+    string | null
+  >(null);
+  const [isConnecting, setIsConnecting] = React.useState(false);
+  const [activeTab, setActiveTab] = React.useState("containers");
+  const [dockerValidation, setDockerValidation] =
+    React.useState<DockerValidation | null>(null);
+  const [isValidating, setIsValidating] = React.useState(false);
+  const [viewMode, setViewMode] = React.useState<"list" | "detail">("list");
 
   React.useEffect(() => {
     if (hostConfig?.id !== currentHostConfig?.id) {
       setCurrentHostConfig(hostConfig);
+      setContainers([]);
+      setSelectedContainer(null);
+      setSessionId(null);
+      setDockerValidation(null);
+      setViewMode("list");
     }
   }, [hostConfig?.id]);
 
@@ -77,6 +109,111 @@ export function DockerManager({
       window.removeEventListener("ssh-hosts:changed", handleHostsChanged);
   }, [hostConfig?.id]);
 
+  // SSH session lifecycle
+  React.useEffect(() => {
+    const initSession = async () => {
+      if (!currentHostConfig?.id || !currentHostConfig.enableDocker) {
+        return;
+      }
+
+      setIsConnecting(true);
+      const sid = `docker-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+      try {
+        await connectDockerSession(sid, currentHostConfig.id);
+        setSessionId(sid);
+
+        // Validate Docker availability
+        setIsValidating(true);
+        const validation = await validateDockerAvailability(sid);
+        setDockerValidation(validation);
+        setIsValidating(false);
+
+        if (!validation.available) {
+          toast.error(
+            validation.error || "Docker is not available on this host",
+          );
+        }
+      } catch (error) {
+        toast.error(
+          error instanceof Error ? error.message : "Failed to connect to host",
+        );
+        setIsConnecting(false);
+        setIsValidating(false);
+      } finally {
+        setIsConnecting(false);
+      }
+    };
+
+    initSession();
+
+    return () => {
+      if (sessionId) {
+        disconnectDockerSession(sessionId).catch(() => {
+          // Silently handle disconnect errors
+        });
+      }
+    };
+  }, [currentHostConfig?.id, currentHostConfig?.enableDocker]);
+
+  // Keepalive interval
+  React.useEffect(() => {
+    if (!sessionId || !isVisible) return;
+
+    const keepalive = setInterval(
+      () => {
+        keepaliveDockerSession(sessionId).catch(() => {
+          // Silently handle keepalive errors
+        });
+      },
+      10 * 60 * 1000,
+    ); // Every 10 minutes
+
+    return () => clearInterval(keepalive);
+  }, [sessionId, isVisible]);
+
+  // Refresh containers function
+  const refreshContainers = React.useCallback(async () => {
+    if (!sessionId) return;
+    try {
+      const data = await listDockerContainers(sessionId, true);
+      setContainers(data);
+    } catch (error) {
+      // Silently handle polling errors
+    }
+  }, [sessionId]);
+
+  // Poll containers
+  React.useEffect(() => {
+    if (!sessionId || !isVisible || !dockerValidation?.available) return;
+
+    let cancelled = false;
+
+    const pollContainers = async () => {
+      try {
+        const data = await listDockerContainers(sessionId, true);
+        if (!cancelled) {
+          setContainers(data);
+        }
+      } catch (error) {
+        // Silently handle polling errors
+      }
+    };
+
+    pollContainers(); // Initial fetch
+    const interval = setInterval(pollContainers, 5000); // Poll every 5 seconds
+
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [sessionId, isVisible, dockerValidation?.available]);
+
+  const handleBack = React.useCallback(() => {
+    setViewMode("list");
+    setSelectedContainer(null);
+  }, []);
+
   const topMarginPx = isTopbarOpen ? 74 : 16;
   const leftMarginPx = sidebarState === "collapsed" ? 16 : 8;
   const bottomMarginPx = 8;
@@ -96,6 +233,102 @@ export function DockerManager({
     ? "h-full w-full text-white overflow-hidden bg-transparent"
     : "bg-dark-bg text-white rounded-lg border-2 border-dark-border overflow-hidden";
 
+  // Check if Docker is enabled
+  if (!currentHostConfig?.enableDocker) {
+    return (
+      <div style={wrapperStyle} className={containerClass}>
+        <div className="h-full w-full flex flex-col">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 pt-3 pb-3 gap-3">
+            <div className="flex items-center gap-4 min-w-0">
+              <div className="min-w-0">
+                <h1 className="font-bold text-lg truncate">
+                  {currentHostConfig?.folder} / {title}
+                </h1>
+              </div>
+            </div>
+          </div>
+          <Separator className="p-0.25 w-full" />
+
+          <div className="flex-1 overflow-hidden min-h-0 p-4">
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                Docker is not enabled for this host. Enable it in Host Settings
+                to use Docker features.
+              </AlertDescription>
+            </Alert>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Loading state
+  if (isConnecting || isValidating) {
+    return (
+      <div style={wrapperStyle} className={containerClass}>
+        <div className="h-full w-full flex flex-col">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 pt-3 pb-3 gap-3">
+            <div className="flex items-center gap-4 min-w-0">
+              <div className="min-w-0">
+                <h1 className="font-bold text-lg truncate">
+                  {currentHostConfig?.folder} / {title}
+                </h1>
+              </div>
+            </div>
+          </div>
+          <Separator className="p-0.25 w-full" />
+
+          <div className="flex-1 overflow-hidden min-h-0 p-4 flex items-center justify-center">
+            <div className="text-center">
+              <SimpleLoader size="lg" />
+              <p className="text-gray-400 mt-4">
+                {isValidating
+                  ? "Validating Docker..."
+                  : "Connecting to host..."}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Docker not available
+  if (dockerValidation && !dockerValidation.available) {
+    return (
+      <div style={wrapperStyle} className={containerClass}>
+        <div className="h-full w-full flex flex-col">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 pt-3 pb-3 gap-3">
+            <div className="flex items-center gap-4 min-w-0">
+              <div className="min-w-0">
+                <h1 className="font-bold text-lg truncate">
+                  {currentHostConfig?.folder} / {title}
+                </h1>
+              </div>
+            </div>
+          </div>
+          <Separator className="p-0.25 w-full" />
+
+          <div className="flex-1 overflow-hidden min-h-0 p-4">
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                <div className="font-semibold mb-2">Docker Error</div>
+                <div>{dockerValidation.error}</div>
+                {dockerValidation.code && (
+                  <div className="mt-2 text-xs opacity-70">
+                    Error code: {dockerValidation.code}
+                  </div>
+                )}
+              </AlertDescription>
+            </Alert>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div style={wrapperStyle} className={containerClass}>
       <div className="h-full w-full flex flex-col">
@@ -105,20 +338,51 @@ export function DockerManager({
               <h1 className="font-bold text-lg truncate">
                 {currentHostConfig?.folder} / {title}
               </h1>
+              {dockerValidation?.version && (
+                <p className="text-xs text-gray-400">
+                  Docker v{dockerValidation.version}
+                </p>
+              )}
             </div>
           </div>
         </div>
         <Separator className="p-0.25 w-full" />
 
-        <div className="flex-1 overflow-hidden min-h-0 p-1">
+        <div className="flex-1 overflow-hidden min-h-0">
-          {/* Empty body as requested */}
+          {viewMode === "list" ? (
-          <div className="flex items-center justify-center h-full">
+            <div className="h-full px-4 py-4">
-            <div className="text-center">
+              {sessionId ? (
-              <p className="text-gray-400 text-lg">
+                <ContainerList
-                Docker management UI will be here.
+                  containers={containers}
+                  sessionId={sessionId}
+                  onSelectContainer={(id) => {
+                    setSelectedContainer(id);
+                    setViewMode("detail");
+                  }}
+                  selectedContainerId={selectedContainer}
+                  onRefresh={refreshContainers}
+                />
+              ) : (
+                <div className="text-center py-8">
+                  <p className="text-gray-400">No session available</p>
+                </div>
+              )}
+            </div>
+          ) : sessionId && selectedContainer && currentHostConfig ? (
+            <ContainerDetail
+              sessionId={sessionId}
+              containerId={selectedContainer}
+              containers={containers}
+              hostConfig={currentHostConfig}
+              onBack={handleBack}
+            />
+          ) : (
+            <div className="text-center py-8">
+              <p className="text-gray-400">
+                Select a container to view details
               </p>
             </div>
-          </div>
+          )}
         </div>
       </div>
     </div>

src/ui/desktop/apps/docker/components/ConsoleTerminal.tsx

@@ -0,0 +1,448 @@
+import React from "react";
+import { useXTerm } from "react-xtermjs";
+import { FitAddon } from "@xterm/addon-fit";
+import { ClipboardAddon } from "@xterm/addon-clipboard";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.tsx";
+import { Card, CardContent } from "@/components/ui/card.tsx";
+import { Terminal as TerminalIcon, Power, PowerOff } from "lucide-react";
+import { toast } from "sonner";
+import type { SSHHost } from "@/types/index.js";
+import { getCookie, isElectron } from "@/ui/main-axios.ts";
+import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
+
+interface ConsoleTerminalProps {
+  sessionId: string;
+  containerId: string;
+  containerName: string;
+  containerState: string;
+  hostConfig: SSHHost;
+}
+
+export function ConsoleTerminal({
+  sessionId,
+  containerId,
+  containerName,
+  containerState,
+  hostConfig,
+}: ConsoleTerminalProps): React.ReactElement {
+  const { instance: terminal, ref: xtermRef } = useXTerm();
+  const [isConnected, setIsConnected] = React.useState(false);
+  const [isConnecting, setIsConnecting] = React.useState(false);
+  const [selectedShell, setSelectedShell] = React.useState<string>("bash");
+  const wsRef = React.useRef<WebSocket | null>(null);
+  const fitAddonRef = React.useRef<FitAddon | null>(null);
+  const pingIntervalRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  const getWebSocketBaseUrl = React.useCallback(() => {
+    const isElectronApp = isElectron();
+
+    // Development mode check (similar to Terminal.tsx)
+    const isDev =
+      !isElectronApp &&
+      process.env.NODE_ENV === "development" &&
+      (window.location.port === "3000" ||
+        window.location.port === "5173" ||
+        window.location.port === "");
+
+    if (isDev) {
+      // Development: connect directly to port 30008
+      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      return `${protocol}//localhost:30008`;
+    }
+
+    if (isElectronApp) {
+      // Electron: construct URL from configured server
+      const baseUrl =
+        (window as { configuredServerUrl?: string }).configuredServerUrl ||
+        "http://127.0.0.1:30001";
+      const wsProtocol = baseUrl.startsWith("https://") ? "wss://" : "ws://";
+      const wsHost = baseUrl.replace(/^https?:\/\//, "");
+      // Use nginx path routing, not direct port
+      return `${wsProtocol}${wsHost}/docker/console/`;
+    }
+
+    // Production web: use nginx proxy path (same as Terminal uses /ssh/websocket/)
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    return `${protocol}//${window.location.host}/docker/console/`;
+  }, []);
+
+  // Initialize terminal
+  React.useEffect(() => {
+    if (!terminal) return;
+
+    const fitAddon = new FitAddon();
+    const clipboardAddon = new ClipboardAddon();
+    const webLinksAddon = new WebLinksAddon();
+
+    fitAddonRef.current = fitAddon;
+
+    terminal.loadAddon(fitAddon);
+    terminal.loadAddon(clipboardAddon);
+    terminal.loadAddon(webLinksAddon);
+
+    terminal.options.cursorBlink = true;
+    terminal.options.fontSize = 14;
+    terminal.options.fontFamily = "monospace";
+    terminal.options.theme = {
+      background: "#18181b",
+      foreground: "#c9d1d9",
+    };
+
+    setTimeout(() => {
+      fitAddon.fit();
+    }, 100);
+
+    const resizeHandler = () => {
+      if (fitAddonRef.current) {
+        fitAddonRef.current.fit();
+
+        if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+          const { rows, cols } = terminal;
+          wsRef.current.send(
+            JSON.stringify({
+              type: "resize",
+              data: { rows, cols },
+            }),
+          );
+        }
+      }
+    };
+
+    window.addEventListener("resize", resizeHandler);
+
+    return () => {
+      window.removeEventListener("resize", resizeHandler);
+
+      // Clean up WebSocket before disposing terminal
+      if (wsRef.current) {
+        try {
+          wsRef.current.send(JSON.stringify({ type: "disconnect" }));
+        } catch (error) {
+          // Ignore errors during cleanup
+        }
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+
+      terminal.dispose();
+    };
+  }, [terminal]);
+
+  const disconnect = React.useCallback(() => {
+    if (wsRef.current) {
+      try {
+        wsRef.current.send(JSON.stringify({ type: "disconnect" }));
+      } catch (error) {
+        // WebSocket might already be closed
+      }
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setIsConnected(false);
+    if (terminal) {
+      try {
+        terminal.clear();
+        terminal.write("Disconnected from container console.\r\n");
+      } catch (error) {
+        // Terminal might be disposed
+      }
+    }
+  }, [terminal]);
+
+  const connect = React.useCallback(() => {
+    if (!terminal || containerState !== "running") {
+      toast.error("Container must be running to connect to console");
+      return;
+    }
+
+    setIsConnecting(true);
+
+    try {
+      const token = isElectron()
+        ? localStorage.getItem("jwt")
+        : getCookie("jwt");
+      if (!token) {
+        toast.error("Authentication required");
+        setIsConnecting(false);
+        return;
+      }
+
+      // Ensure terminal is fitted before connecting
+      if (fitAddonRef.current) {
+        fitAddonRef.current.fit();
+      }
+
+      const wsUrl = `${getWebSocketBaseUrl()}?token=${encodeURIComponent(token)}`;
+      const ws = new WebSocket(wsUrl);
+
+      ws.onopen = () => {
+        // Double-check terminal dimensions
+        const cols = terminal.cols || 80;
+        const rows = terminal.rows || 24;
+
+        ws.send(
+          JSON.stringify({
+            type: "connect",
+            data: {
+              hostConfig,
+              containerId,
+              shell: selectedShell,
+              cols,
+              rows,
+            },
+          }),
+        );
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+
+          switch (msg.type) {
+            case "output":
+              terminal.write(msg.data);
+              break;
+
+            case "connected":
+              setIsConnected(true);
+              setIsConnecting(false);
+              toast.success(`Connected to ${containerName}`);
+
+              // Fit terminal and send resize to ensure correct dimensions
+              setTimeout(() => {
+                if (fitAddonRef.current) {
+                  fitAddonRef.current.fit();
+                }
+
+                // Send resize message with correct dimensions
+                if (ws.readyState === WebSocket.OPEN) {
+                  ws.send(
+                    JSON.stringify({
+                      type: "resize",
+                      data: { rows: terminal.rows, cols: terminal.cols },
+                    }),
+                  );
+                }
+              }, 100);
+              break;
+
+            case "disconnected":
+              setIsConnected(false);
+              setIsConnecting(false);
+              terminal.write(
+                `\r\n\x1b[1;33m${msg.message || "Disconnected"}\x1b[0m\r\n`,
+              );
+              if (wsRef.current) {
+                wsRef.current.close();
+                wsRef.current = null;
+              }
+              break;
+
+            case "error":
+              setIsConnecting(false);
+              toast.error(msg.message || "Console error");
+              terminal.write(`\r\n\x1b[1;31mError: ${msg.message}\x1b[0m\r\n`);
+              break;
+          }
+        } catch (error) {
+          console.error("Failed to parse WebSocket message:", error);
+        }
+      };
+
+      ws.onerror = (error) => {
+        console.error("WebSocket error:", error);
+        setIsConnecting(false);
+        setIsConnected(false);
+        toast.error("Failed to connect to console");
+      };
+
+      // Set up periodic ping to keep connection alive
+      if (pingIntervalRef.current) {
+        clearInterval(pingIntervalRef.current);
+      }
+      pingIntervalRef.current = setInterval(() => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: "ping" }));
+        }
+      }, 30000); // Ping every 30 seconds
+
+      ws.onclose = () => {
+        if (pingIntervalRef.current) {
+          clearInterval(pingIntervalRef.current);
+          pingIntervalRef.current = null;
+        }
+        setIsConnected(false);
+        setIsConnecting(false);
+        if (wsRef.current === ws) {
+          wsRef.current = null;
+        }
+      };
+
+      wsRef.current = ws;
+
+      // Handle terminal input
+      terminal.onData((data) => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(
+            JSON.stringify({
+              type: "input",
+              data,
+            }),
+          );
+        }
+      });
+    } catch (error) {
+      setIsConnecting(false);
+      toast.error(
+        `Failed to connect: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    }
+  }, [
+    terminal,
+    containerState,
+    getWebSocketBaseUrl,
+    hostConfig,
+    containerId,
+    selectedShell,
+    containerName,
+  ]);
+
+  // Cleanup WebSocket on unmount (terminal cleanup is handled in the terminal effect)
+  React.useEffect(() => {
+    return () => {
+      if (pingIntervalRef.current) {
+        clearInterval(pingIntervalRef.current);
+        pingIntervalRef.current = null;
+      }
+      if (wsRef.current) {
+        try {
+          wsRef.current.send(JSON.stringify({ type: "disconnect" }));
+        } catch (error) {
+          // Ignore errors during cleanup
+        }
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+      setIsConnected(false);
+    };
+  }, []);
+
+  if (containerState !== "running") {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center space-y-2">
+          <TerminalIcon className="h-12 w-12 text-gray-600 mx-auto" />
+          <p className="text-gray-400 text-lg">Container is not running</p>
+          <p className="text-gray-500 text-sm">
+            Start the container to access the console
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full gap-3">
+      {/* Controls */}
+      <Card className="py-3">
+        <CardContent className="px-3">
+          <div className="flex flex-col sm:flex-row gap-2 items-center sm:items-center">
+            <div className="flex items-center gap-2 flex-1">
+              <TerminalIcon className="h-5 w-5" />
+              <span className="text-base font-medium">Console</span>
+            </div>
+            <Select
+              value={selectedShell}
+              onValueChange={setSelectedShell}
+              disabled={isConnected}
+            >
+              <SelectTrigger className="w-[120px]">
+                <SelectValue placeholder="Select shell" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="bash">Bash</SelectItem>
+                <SelectItem value="sh">Sh</SelectItem>
+                <SelectItem value="ash">Ash</SelectItem>
+              </SelectContent>
+            </Select>
+            <div className="flex gap-2 sm:gap-2">
+              {!isConnected ? (
+                <Button
+                  onClick={connect}
+                  disabled={isConnecting}
+                  className="min-w-[120px]"
+                >
+                  {isConnecting ? (
+                    <>
+                      <div className="h-4 w-4 mr-2 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                      Connecting...
+                    </>
+                  ) : (
+                    <>
+                      <Power className="h-4 w-4 mr-2" />
+                      Connect
+                    </>
+                  )}
+                </Button>
+              ) : (
+                <Button
+                  onClick={disconnect}
+                  variant="destructive"
+                  className="min-w-[120px]"
+                >
+                  <PowerOff className="h-4 w-4 mr-2" />
+                  Disconnect
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Terminal */}
+      <Card className="flex-1 overflow-hidden pt-1 pb-0">
+        <CardContent className="p-0 h-full relative">
+          {/* Terminal container - always rendered */}
+          <div
+            ref={xtermRef}
+            className="h-full w-full"
+            style={{ display: isConnected ? "block" : "none" }}
+          />
+
+          {/* Not connected message */}
+          {!isConnected && !isConnecting && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="text-center space-y-2">
+                <TerminalIcon className="h-12 w-12 text-gray-600 mx-auto" />
+                <p className="text-gray-400">Not connected</p>
+                <p className="text-gray-500 text-sm">
+                  Click Connect to start an interactive shell
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Connecting message */}
+          {isConnecting && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="text-center">
+                <SimpleLoader size="lg" />
+                <p className="text-gray-400 mt-4">
+                  Connecting to {containerName}...
+                </p>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/ui/desktop/apps/docker/components/ContainerCard.tsx

@@ -0,0 +1,446 @@
+import React from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import { Badge } from "@/components/ui/badge.tsx";
+import {
+  Play,
+  Square,
+  RotateCw,
+  Pause,
+  Trash2,
+  PlayCircle,
+} from "lucide-react";
+import { toast } from "sonner";
+import type { DockerContainer } from "@/types/index.js";
+import {
+  startDockerContainer,
+  stopDockerContainer,
+  restartDockerContainer,
+  pauseDockerContainer,
+  unpauseDockerContainer,
+  removeDockerContainer,
+} from "@/ui/main-axios.ts";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip.tsx";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog.tsx";
+
+interface ContainerCardProps {
+  container: DockerContainer;
+  sessionId: string;
+  onSelect?: () => void;
+  isSelected?: boolean;
+  onRefresh?: () => void;
+}
+
+export function ContainerCard({
+  container,
+  sessionId,
+  onSelect,
+  isSelected = false,
+  onRefresh,
+}: ContainerCardProps): React.ReactElement {
+  const [isStarting, setIsStarting] = React.useState(false);
+  const [isStopping, setIsStopping] = React.useState(false);
+  const [isRestarting, setIsRestarting] = React.useState(false);
+  const [isPausing, setIsPausing] = React.useState(false);
+  const [isRemoving, setIsRemoving] = React.useState(false);
+  const [showRemoveDialog, setShowRemoveDialog] = React.useState(false);
+
+  const statusColors = {
+    running: {
+      bg: "bg-green-500/10",
+      border: "border-green-500/20",
+      text: "text-green-400",
+      badge: "bg-green-500/20 text-green-300 border-green-500/30",
+    },
+    exited: {
+      bg: "bg-red-500/10",
+      border: "border-red-500/20",
+      text: "text-red-400",
+      badge: "bg-red-500/20 text-red-300 border-red-500/30",
+    },
+    paused: {
+      bg: "bg-yellow-500/10",
+      border: "border-yellow-500/20",
+      text: "text-yellow-400",
+      badge: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30",
+    },
+    created: {
+      bg: "bg-blue-500/10",
+      border: "border-blue-500/20",
+      text: "text-blue-400",
+      badge: "bg-blue-500/20 text-blue-300 border-blue-500/30",
+    },
+    restarting: {
+      bg: "bg-orange-500/10",
+      border: "border-orange-500/20",
+      text: "text-orange-400",
+      badge: "bg-orange-500/20 text-orange-300 border-orange-500/30",
+    },
+    removing: {
+      bg: "bg-purple-500/10",
+      border: "border-purple-500/20",
+      text: "text-purple-400",
+      badge: "bg-purple-500/20 text-purple-300 border-purple-500/30",
+    },
+    dead: {
+      bg: "bg-gray-500/10",
+      border: "border-gray-500/20",
+      text: "text-gray-400",
+      badge: "bg-gray-500/20 text-gray-300 border-gray-500/30",
+    },
+  };
+
+  const colors = statusColors[container.state] || statusColors.created;
+
+  const handleStart = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsStarting(true);
+    try {
+      await startDockerContainer(sessionId, container.id);
+      toast.success(`Container ${container.name} started`);
+      onRefresh?.();
+    } catch (error) {
+      toast.error(
+        `Failed to start container: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsStarting(false);
+    }
+  };
+
+  const handleStop = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsStopping(true);
+    try {
+      await stopDockerContainer(sessionId, container.id);
+      toast.success(`Container ${container.name} stopped`);
+      onRefresh?.();
+    } catch (error) {
+      toast.error(
+        `Failed to stop container: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsStopping(false);
+    }
+  };
+
+  const handleRestart = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsRestarting(true);
+    try {
+      await restartDockerContainer(sessionId, container.id);
+      toast.success(`Container ${container.name} restarted`);
+      onRefresh?.();
+    } catch (error) {
+      toast.error(
+        `Failed to restart container: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsRestarting(false);
+    }
+  };
+
+  const handlePause = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsPausing(true);
+    try {
+      if (container.state === "paused") {
+        await unpauseDockerContainer(sessionId, container.id);
+        toast.success(`Container ${container.name} unpaused`);
+      } else {
+        await pauseDockerContainer(sessionId, container.id);
+        toast.success(`Container ${container.name} paused`);
+      }
+      onRefresh?.();
+    } catch (error) {
+      toast.error(
+        `Failed to ${container.state === "paused" ? "unpause" : "pause"} container: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsPausing(false);
+    }
+  };
+
+  const handleRemove = async () => {
+    setIsRemoving(true);
+    try {
+      const force = container.state === "running";
+      await removeDockerContainer(sessionId, container.id, force);
+      toast.success(`Container ${container.name} removed`);
+      setShowRemoveDialog(false);
+      onRefresh?.();
+    } catch (error) {
+      toast.error(
+        `Failed to remove container: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsRemoving(false);
+    }
+  };
+
+  const isLoading =
+    isStarting || isStopping || isRestarting || isPausing || isRemoving;
+
+  // Format the created date to be more readable
+  const formatCreatedDate = (dateStr: string): string => {
+    try {
+      // Remove the timezone suffix like "+0000 UTC"
+      const cleanDate = dateStr.replace(/\s*\+\d{4}\s*UTC\s*$/, "").trim();
+      return cleanDate;
+    } catch {
+      return dateStr;
+    }
+  };
+
+  // Parse ports into array of port mappings
+  const parsePorts = (portsStr: string | undefined): string[] => {
+    if (!portsStr || portsStr.trim() === "") return [];
+
+    // Split by comma and clean up
+    return portsStr
+      .split(",")
+      .map((p) => p.trim())
+      .filter((p) => p.length > 0);
+  };
+
+  const portsList = parsePorts(container.ports);
+
+  return (
+    <>
+      <Card
+        className={`cursor-pointer transition-all hover:shadow-lg ${
+          isSelected
+            ? "ring-2 ring-primary border-primary"
+            : `border-2 ${colors.border}`
+        } ${colors.bg} pt-3 pb-0`}
+        onClick={onSelect}
+      >
+        <CardHeader className="pb-2 px-4">
+          <div className="flex items-start justify-between gap-2">
+            <CardTitle className="text-base font-semibold truncate flex-1">
+              {container.name.startsWith("/")
+                ? container.name.slice(1)
+                : container.name}
+            </CardTitle>
+            <Badge className={`${colors.badge} border shrink-0`}>
+              {container.state}
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-3 px-4 pb-3">
+          <div className="space-y-2 text-sm">
+            <div className="flex items-center gap-2">
+              <span className="text-gray-400 min-w-[50px] text-xs">Image:</span>
+              <span className="truncate text-gray-200 text-xs">
+                {container.image}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-gray-400 min-w-[50px] text-xs">ID:</span>
+              <span className="font-mono text-xs text-gray-200">
+                {container.id.substring(0, 12)}
+              </span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-gray-400 min-w-[50px] text-xs shrink-0">
+                Ports:
+              </span>
+              <div className="flex flex-wrap gap-1">
+                {portsList.length > 0 ? (
+                  portsList.map((port, idx) => (
+                    <Badge
+                      key={idx}
+                      variant="outline"
+                      className="text-xs font-mono bg-gray-500/10 text-gray-400 border-gray-500/30"
+                    >
+                      {port}
+                    </Badge>
+                  ))
+                ) : (
+                  <Badge
+                    variant="outline"
+                    className="text-xs bg-gray-500/10 text-gray-400 border-gray-500/30"
+                  >
+                    None
+                  </Badge>
+                )}
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-gray-400 min-w-[50px] text-xs">
+                Created:
+              </span>
+              <span className="text-gray-200 text-xs">
+                {formatCreatedDate(container.created)}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap gap-2 pt-2 border-t border-gray-700/50">
+            <TooltipProvider>
+              {container.state !== "running" && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="h-8"
+                      onClick={handleStart}
+                      disabled={isLoading}
+                    >
+                      {isStarting ? (
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                      ) : (
+                        <Play className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Start</TooltipContent>
+                </Tooltip>
+              )}
+
+              {container.state === "running" && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="h-8"
+                      onClick={handleStop}
+                      disabled={isLoading}
+                    >
+                      {isStopping ? (
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                      ) : (
+                        <Square className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Stop</TooltipContent>
+                </Tooltip>
+              )}
+
+              {(container.state === "running" ||
+                container.state === "paused") && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="h-8"
+                      onClick={handlePause}
+                      disabled={isLoading}
+                    >
+                      {isPausing ? (
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                      ) : container.state === "paused" ? (
+                        <PlayCircle className="h-4 w-4" />
+                      ) : (
+                        <Pause className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {container.state === "paused" ? "Unpause" : "Pause"}
+                  </TooltipContent>
+                </Tooltip>
+              )}
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-8"
+                    onClick={handleRestart}
+                    disabled={isLoading || container.state === "exited"}
+                  >
+                    {isRestarting ? (
+                      <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                    ) : (
+                      <RotateCw className="h-4 w-4" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Restart</TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-8 text-red-400 hover:text-red-300 hover:bg-red-500/20"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setShowRemoveDialog(true);
+                    }}
+                    disabled={isLoading}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Remove</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        </CardContent>
+      </Card>
+
+      <AlertDialog open={showRemoveDialog} onOpenChange={setShowRemoveDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove Container</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to remove container{" "}
+              <span className="font-semibold">
+                {container.name.startsWith("/")
+                  ? container.name.slice(1)
+                  : container.name}
+              </span>
+              ?
+              {container.state === "running" && (
+                <div className="mt-2 text-yellow-400">
+                  Warning: This container is currently running and will be
+                  force-removed.
+                </div>
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isRemoving}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={(e) => {
+                e.preventDefault();
+                handleRemove();
+              }}
+              disabled={isRemoving}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {isRemoving ? "Removing..." : "Remove"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

src/ui/desktop/apps/docker/components/ContainerDetail.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { Button } from "@/components/ui/button.tsx";
+import { Separator } from "@/components/ui/separator.tsx";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs.tsx";
+import { ArrowLeft } from "lucide-react";
+import type { DockerContainer, SSHHost } from "@/types/index.js";
+import { LogViewer } from "./LogViewer.tsx";
+import { ContainerStats } from "./ContainerStats.tsx";
+import { ConsoleTerminal } from "./ConsoleTerminal.tsx";
+
+interface ContainerDetailProps {
+  sessionId: string;
+  containerId: string;
+  containers: DockerContainer[];
+  hostConfig: SSHHost;
+  onBack: () => void;
+}
+
+export function ContainerDetail({
+  sessionId,
+  containerId,
+  containers,
+  hostConfig,
+  onBack,
+}: ContainerDetailProps): React.ReactElement {
+  const [activeTab, setActiveTab] = React.useState("logs");
+
+  const container = containers.find((c) => c.id === containerId);
+
+  if (!container) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center space-y-2">
+          <p className="text-gray-400 text-lg">Container not found</p>
+          <Button onClick={onBack} variant="outline">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to list
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header with back button */}
+      <div className="flex items-center gap-4 px-4 pt-3 pb-3">
+        <Button variant="ghost" onClick={onBack} size="sm">
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back
+        </Button>
+        <div className="min-w-0 flex-1">
+          <h2 className="font-bold text-lg truncate">{container.name}</h2>
+          <p className="text-sm text-gray-400 truncate">{container.image}</p>
+        </div>
+      </div>
+      <Separator className="p-0.25 w-full" />
+
+      {/* Tabs for Logs, Stats, Console */}
+      <div className="flex-1 overflow-hidden min-h-0">
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="h-full flex flex-col"
+        >
+          <div className="px-4 pt-2">
+            <TabsList className="grid w-full grid-cols-3">
+              <TabsTrigger value="logs">Logs</TabsTrigger>
+              <TabsTrigger value="stats">Stats</TabsTrigger>
+              <TabsTrigger value="console">Console</TabsTrigger>
+            </TabsList>
+          </div>
+
+          <TabsContent
+            value="logs"
+            className="flex-1 overflow-auto px-3 pb-3 mt-3"
+          >
+            <LogViewer
+              sessionId={sessionId}
+              containerId={containerId}
+              containerName={container.name}
+            />
+          </TabsContent>
+
+          <TabsContent
+            value="stats"
+            className="flex-1 overflow-auto px-3 pb-3 mt-3"
+          >
+            <ContainerStats
+              sessionId={sessionId}
+              containerId={containerId}
+              containerName={container.name}
+              containerState={container.state}
+            />
+          </TabsContent>
+
+          <TabsContent
+            value="console"
+            className="flex-1 overflow-hidden px-3 pb-3 mt-3"
+          >
+            <ConsoleTerminal
+              sessionId={sessionId}
+              containerId={containerId}
+              containerName={container.name}
+              containerState={container.state}
+              hostConfig={hostConfig}
+            />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

src/ui/desktop/apps/docker/components/ContainerList.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { Input } from "@/components/ui/input.tsx";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.tsx";
+import { Search, Filter } from "lucide-react";
+import type { DockerContainer } from "@/types/index.js";
+import { ContainerCard } from "./ContainerCard.tsx";
+
+interface ContainerListProps {
+  containers: DockerContainer[];
+  sessionId: string;
+  onSelectContainer: (containerId: string) => void;
+  selectedContainerId?: string | null;
+  onRefresh?: () => void;
+}
+
+export function ContainerList({
+  containers,
+  sessionId,
+  onSelectContainer,
+  selectedContainerId = null,
+  onRefresh,
+}: ContainerListProps): React.ReactElement {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [statusFilter, setStatusFilter] = React.useState<string>("all");
+
+  const filteredContainers = React.useMemo(() => {
+    return containers.filter((container) => {
+      const matchesSearch =
+        container.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        container.image.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        container.id.toLowerCase().includes(searchQuery.toLowerCase());
+
+      const matchesStatus =
+        statusFilter === "all" || container.state === statusFilter;
+
+      return matchesSearch && matchesStatus;
+    });
+  }, [containers, searchQuery, statusFilter]);
+
+  const statusCounts = React.useMemo(() => {
+    const counts: Record<string, number> = {};
+    containers.forEach((c) => {
+      counts[c.state] = (counts[c.state] || 0) + 1;
+    });
+    return counts;
+  }, [containers]);
+
+  if (containers.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center space-y-2">
+          <p className="text-gray-400 text-lg">No containers found</p>
+          <p className="text-gray-500 text-sm">
+            Start by creating containers on your server
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full gap-3">
+      {/* Search and Filter Bar */}
+      <div className="flex flex-col sm:flex-row gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+          <Input
+            placeholder="Search by name, image, or ID..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-10"
+          />
+        </div>
+        <div className="flex items-center gap-2 sm:min-w-[200px]">
+          <Filter className="h-4 w-4 text-gray-400" />
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Filter by status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All ({containers.length})</SelectItem>
+              {Object.entries(statusCounts).map(([status, count]) => (
+                <SelectItem key={status} value={status}>
+                  {status.charAt(0).toUpperCase() + status.slice(1)} ({count})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Container Grid */}
+      {filteredContainers.length === 0 ? (
+        <div className="flex items-center justify-center flex-1">
+          <div className="text-center space-y-2">
+            <p className="text-gray-400">No containers match your filters</p>
+            <p className="text-gray-500 text-sm">
+              Try adjusting your search or filter
+            </p>
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 overflow-auto pb-2">
+          {filteredContainers.map((container) => (
+            <ContainerCard
+              key={container.id}
+              container={container}
+              sessionId={sessionId}
+              onSelect={() => onSelectContainer(container.id)}
+              isSelected={selectedContainerId === container.id}
+              onRefresh={onRefresh}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/ui/desktop/apps/docker/components/ContainerStats.tsx

@@ -0,0 +1,242 @@
+import React from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
+import { Progress } from "@/components/ui/progress.tsx";
+import { Cpu, MemoryStick, Network, HardDrive, Activity } from "lucide-react";
+import type { DockerStats } from "@/types/index.js";
+import { getContainerStats } from "@/ui/main-axios.ts";
+import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
+
+interface ContainerStatsProps {
+  sessionId: string;
+  containerId: string;
+  containerName: string;
+  containerState: string;
+}
+
+export function ContainerStats({
+  sessionId,
+  containerId,
+  containerName,
+  containerState,
+}: ContainerStatsProps): React.ReactElement {
+  const [stats, setStats] = React.useState<DockerStats | null>(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const fetchStats = React.useCallback(async () => {
+    if (containerState !== "running") {
+      setError("Container must be running to view stats");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await getContainerStats(sessionId, containerId);
+      setStats(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch stats");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sessionId, containerId, containerState]);
+
+  React.useEffect(() => {
+    fetchStats();
+
+    // Poll stats every 2 seconds
+    const interval = setInterval(fetchStats, 2000);
+
+    return () => clearInterval(interval);
+  }, [fetchStats]);
+
+  if (containerState !== "running") {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center space-y-2">
+          <Activity className="h-12 w-12 text-gray-600 mx-auto" />
+          <p className="text-gray-400 text-lg">Container is not running</p>
+          <p className="text-gray-500 text-sm">
+            Start the container to view statistics
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading && !stats) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center">
+          <SimpleLoader size="lg" />
+          <p className="text-gray-400 mt-4">Loading stats...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center space-y-2">
+          <p className="text-red-400 text-lg">Error loading stats</p>
+          <p className="text-gray-500 text-sm">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!stats) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-gray-400">No stats available</p>
+      </div>
+    );
+  }
+
+  const cpuPercent = parseFloat(stats.cpu) || 0;
+  const memPercent = parseFloat(stats.memoryPercent) || 0;
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 h-full overflow-auto">
+      {/* CPU Usage */}
+      <Card className="py-3">
+        <CardHeader className="pb-2 px-4">
+          <CardTitle className="text-base flex items-center gap-2">
+            <Cpu className="h-5 w-5 text-blue-400" />
+            CPU Usage
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-4 pb-3">
+          <div className="space-y-2">
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-gray-400">Current</span>
+              <span className="font-mono font-semibold text-blue-300">
+                {stats.cpu}
+              </span>
+            </div>
+            <Progress value={Math.min(cpuPercent, 100)} className="h-2" />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Memory Usage */}
+      <Card className="py-3">
+        <CardHeader className="pb-2 px-4">
+          <CardTitle className="text-base flex items-center gap-2">
+            <MemoryStick className="h-5 w-5 text-purple-400" />
+            Memory Usage
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-4 pb-3">
+          <div className="space-y-2">
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-gray-400">Used / Limit</span>
+              <span className="font-mono font-semibold text-purple-300">
+                {stats.memoryUsed} / {stats.memoryLimit}
+              </span>
+            </div>
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-gray-400">Percentage</span>
+              <span className="font-mono text-purple-300">
+                {stats.memoryPercent}
+              </span>
+            </div>
+            <Progress value={Math.min(memPercent, 100)} className="h-2" />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Network I/O */}
+      <Card className="py-3">
+        <CardHeader className="pb-2 px-4">
+          <CardTitle className="text-base flex items-center gap-2">
+            <Network className="h-5 w-5 text-green-400" />
+            Network I/O
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-4 pb-3">
+          <div className="space-y-2">
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-gray-400">Input</span>
+              <span className="font-mono text-green-300">{stats.netInput}</span>
+            </div>
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-gray-400">Output</span>
+              <span className="font-mono text-green-300">
+                {stats.netOutput}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Block I/O */}
+      <Card className="py-3">
+        <CardHeader className="pb-2 px-4">
+          <CardTitle className="text-base flex items-center gap-2">
+            <HardDrive className="h-5 w-5 text-orange-400" />
+            Block I/O
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-4 pb-3">
+          <div className="space-y-2">
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-gray-400">Read</span>
+              <span className="font-mono text-orange-300">
+                {stats.blockRead}
+              </span>
+            </div>
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-gray-400">Write</span>
+              <span className="font-mono text-orange-300">
+                {stats.blockWrite}
+              </span>
+            </div>
+            {stats.pids && (
+              <div className="flex justify-between items-center text-sm">
+                <span className="text-gray-400">PIDs</span>
+                <span className="font-mono text-orange-300">{stats.pids}</span>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Container Info */}
+      <Card className="md:col-span-2 py-3">
+        <CardHeader className="pb-2 px-4">
+          <CardTitle className="text-base flex items-center gap-2">
+            <Activity className="h-5 w-5 text-cyan-400" />
+            Container Information
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-4 pb-3">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
+            <div className="flex justify-between items-center">
+              <span className="text-gray-400">Name:</span>
+              <span className="font-mono text-gray-200">{containerName}</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-gray-400">ID:</span>
+              <span className="font-mono text-sm text-gray-300">
+                {containerId.substring(0, 12)}
+              </span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-gray-400">State:</span>
+              <span className="font-semibold text-green-400 capitalize">
+                {containerState}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/ui/desktop/apps/docker/components/LogViewer.tsx

@@ -0,0 +1,246 @@
+import React from "react";
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.tsx";
+import { Card, CardContent } from "@/components/ui/card.tsx";
+import { Switch } from "@/components/ui/switch.tsx";
+import { Label } from "@/components/ui/label.tsx";
+import { Download, RefreshCw, Filter } from "lucide-react";
+import { toast } from "sonner";
+import type { DockerLogOptions } from "@/types/index.js";
+import { getContainerLogs, downloadContainerLogs } from "@/ui/main-axios.ts";
+import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
+
+interface LogViewerProps {
+  sessionId: string;
+  containerId: string;
+  containerName: string;
+}
+
+export function LogViewer({
+  sessionId,
+  containerId,
+  containerName,
+}: LogViewerProps): React.ReactElement {
+  const [logs, setLogs] = React.useState<string>("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isDownloading, setIsDownloading] = React.useState(false);
+  const [tailLines, setTailLines] = React.useState<string>("100");
+  const [showTimestamps, setShowTimestamps] = React.useState(false);
+  const [autoRefresh, setAutoRefresh] = React.useState(false);
+  const [searchFilter, setSearchFilter] = React.useState("");
+  const logsEndRef = React.useRef<HTMLDivElement>(null);
+
+  const fetchLogs = React.useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const options: DockerLogOptions = {
+        tail: tailLines === "all" ? undefined : parseInt(tailLines, 10),
+        timestamps: showTimestamps,
+      };
+
+      const data = await getContainerLogs(sessionId, containerId, options);
+      setLogs(data.logs);
+    } catch (error) {
+      toast.error(
+        `Failed to fetch logs: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sessionId, containerId, tailLines, showTimestamps]);
+
+  React.useEffect(() => {
+    fetchLogs();
+  }, [fetchLogs]);
+
+  // Auto-refresh
+  React.useEffect(() => {
+    if (!autoRefresh) return;
+
+    const interval = setInterval(() => {
+      fetchLogs();
+    }, 3000); // Refresh every 3 seconds
+
+    return () => clearInterval(interval);
+  }, [autoRefresh, fetchLogs]);
+
+  // Auto-scroll to bottom when new logs arrive
+  React.useEffect(() => {
+    if (autoRefresh && logsEndRef.current) {
+      logsEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [logs, autoRefresh]);
+
+  const handleDownload = async () => {
+    setIsDownloading(true);
+    try {
+      const options: DockerLogOptions = {
+        timestamps: showTimestamps,
+      };
+
+      const blob = await downloadContainerLogs(sessionId, containerId, options);
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${containerName.replace(/[^a-z0-9]/gi, "_")}_logs.txt`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+
+      toast.success("Logs downloaded successfully");
+    } catch (error) {
+      toast.error(
+        `Failed to download logs: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const filteredLogs = React.useMemo(() => {
+    if (!searchFilter.trim()) return logs;
+
+    return logs
+      .split("\n")
+      .filter((line) => line.toLowerCase().includes(searchFilter.toLowerCase()))
+      .join("\n");
+  }, [logs, searchFilter]);
+
+  return (
+    <div className="flex flex-col h-full gap-3">
+      {/* Controls */}
+      <Card className="py-3">
+        <CardContent className="px-3">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
+            {/* Tail Lines */}
+            <div className="flex flex-col">
+              <Label htmlFor="tail-lines" className="mb-1">
+                Lines to show
+              </Label>
+              <Select value={tailLines} onValueChange={setTailLines}>
+                <SelectTrigger id="tail-lines">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="50">Last 50 lines</SelectItem>
+                  <SelectItem value="100">Last 100 lines</SelectItem>
+                  <SelectItem value="500">Last 500 lines</SelectItem>
+                  <SelectItem value="1000">Last 1000 lines</SelectItem>
+                  <SelectItem value="all">All logs</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Timestamps */}
+            <div className="flex flex-col">
+              <Label htmlFor="timestamps" className="mb-1">
+                Show Timestamps
+              </Label>
+              <div className="flex items-center h-10 px-3 border rounded-md">
+                <Switch
+                  id="timestamps"
+                  checked={showTimestamps}
+                  onCheckedChange={setShowTimestamps}
+                />
+                <span className="ml-2 text-sm">
+                  {showTimestamps ? "Enabled" : "Disabled"}
+                </span>
+              </div>
+            </div>
+
+            {/* Auto Refresh */}
+            <div className="flex flex-col">
+              <Label htmlFor="auto-refresh" className="mb-1">
+                Auto Refresh
+              </Label>
+              <div className="flex items-center h-10 px-3 border rounded-md">
+                <Switch
+                  id="auto-refresh"
+                  checked={autoRefresh}
+                  onCheckedChange={setAutoRefresh}
+                />
+                <span className="ml-2 text-sm">
+                  {autoRefresh ? "On" : "Off"}
+                </span>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex flex-col">
+              <Label className="mb-1">Actions</Label>
+              <div className="flex gap-2 h-10">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={fetchLogs}
+                  disabled={isLoading}
+                  className="flex-1 h-full"
+                >
+                  {isLoading ? (
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                  ) : (
+                    <RefreshCw className="h-4 w-4" />
+                  )}
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={handleDownload}
+                  disabled={isDownloading}
+                  className="flex-1 h-full"
+                >
+                  {isDownloading ? (
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                  ) : (
+                    <Download className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Search Filter */}
+          <div className="mt-2">
+            <div className="relative">
+              <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+              <input
+                type="text"
+                placeholder="Filter logs..."
+                value={searchFilter}
+                onChange={(e) => setSearchFilter(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 bg-dark-bg border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Logs Display */}
+      <Card className="flex-1 overflow-hidden py-0">
+        <CardContent className="p-0 h-full">
+          {isLoading && !logs ? (
+            <div className="flex items-center justify-center h-full">
+              <SimpleLoader size="lg" />
+            </div>
+          ) : (
+            <div className="h-full overflow-auto">
+              <pre className="p-4 text-xs font-mono whitespace-pre-wrap break-words text-gray-200 leading-relaxed">
+                {filteredLogs || (
+                  <span className="text-gray-500">No logs available</span>
+                )}
+                <div ref={logsEndRef} />
+              </pre>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/ui/desktop/apps/host-manager/HostManagerEditor.tsx

@@ -567,18 +567,6 @@ export function HostManagerEditor({
         )
         .default([]),
       enableDocker: z.boolean().default(false),
-      dockerConfig: z
-        .object({
-          connectionType: z.enum(["socket", "tcp", "tls"]).default("socket"),
-          socketPath: z.string().optional(),
-          host: z.string().optional(),
-          port: z.coerce.number().min(1).max(65535).optional(),
-          tlsVerify: z.boolean().default(true),
-          tlsCaCert: z.string().optional(),
-          tlsCert: z.string().optional(),
-          tlsKey: z.string().optional(),
-        })
-        .optional(),
     })
     .superRefine((data, ctx) => {
       if (data.authType === "none") {
@@ -672,16 +660,6 @@ export function HostManagerEditor({
       terminalConfig: DEFAULT_TERMINAL_CONFIG,
       forceKeyboardInteractive: false,
       enableDocker: false,
-      dockerConfig: {
-        connectionType: "socket" as const,
-        socketPath: "/var/run/docker.sock",
-        host: "",
-        port: 2375,
-        tlsVerify: true,
-        tlsCaCert: "",
-        tlsCert: "",
-        tlsKey: "",
-      },
     },
   });
 
@@ -736,28 +714,6 @@ export function HostManagerEditor({
 
       parsedStatsConfig = { ...DEFAULT_STATS_CONFIG, ...parsedStatsConfig };
 
-      let parsedDockerConfig = {
-        connectionType: "socket" as const,
-        socketPath: "/var/run/docker.sock",
-        host: "",
-        port: 2375,
-        tlsVerify: true,
-        tlsCaCert: "",
-        tlsCert: "",
-        tlsKey: "",
-      };
-      try {
-        if (cleanedHost.dockerConfig) {
-          const parsed =
-            typeof cleanedHost.dockerConfig === "string"
-              ? JSON.parse(cleanedHost.dockerConfig)
-              : cleanedHost.dockerConfig;
-          parsedDockerConfig = { ...parsedDockerConfig, ...parsed };
-        }
-      } catch (error) {
-        console.error("Failed to parse dockerConfig:", error);
-      }
-
       const formData = {
         name: cleanedHost.name || "",
         ip: cleanedHost.ip || "",
@@ -800,7 +756,6 @@ export function HostManagerEditor({
         },
         forceKeyboardInteractive: Boolean(cleanedHost.forceKeyboardInteractive),
         enableDocker: Boolean(cleanedHost.enableDocker),
-        dockerConfig: parsedDockerConfig,
       };
 
       if (defaultAuthType === "password") {
@@ -853,16 +808,6 @@ export function HostManagerEditor({
         terminalConfig: DEFAULT_TERMINAL_CONFIG,
         forceKeyboardInteractive: false,
         enableDocker: false,
-        dockerConfig: {
-          connectionType: "socket" as const,
-          socketPath: "/var/run/docker.sock",
-          host: "",
-          port: 2375,
-          tlsVerify: true,
-          tlsCaCert: "",
-          tlsCert: "",
-          tlsKey: "",
-        },
       };
 
       form.reset(defaultFormData);
@@ -921,7 +866,6 @@ export function HostManagerEditor({
         overrideCredentialUsername: Boolean(data.overrideCredentialUsername),
         enableTerminal: Boolean(data.enableTerminal),
         enableDocker: Boolean(data.enableDocker),
-        dockerConfig: data.dockerConfig || null,
         enableTunnel: Boolean(data.enableTunnel),
         enableFileManager: Boolean(data.enableFileManager),
         defaultPath: data.defaultPath || "/",
@@ -1043,7 +987,7 @@ export function HostManagerEditor({
       setActiveTab("general");
     } else if (errors.enableTerminal || errors.terminalConfig) {
       setActiveTab("terminal");
-    } else if (errors.enableDocker || errors.dockerConfig) {
+    } else if (errors.enableDocker) {
       setActiveTab("docker");
     } else if (errors.enableTunnel || errors.tunnelConnections) {
       setActiveTab("tunnel");
@@ -2627,267 +2571,6 @@ export function HostManagerEditor({
                       </FormItem>
                     )}
                   />
-
-                  {form.watch("enableDocker") && (
-                    <>
-                      <Alert className="mt-4">
-                        <AlertDescription>
-                          <strong>Docker Configuration</strong>
-                          <div className="mt-2">
-                            Configure connection to Docker daemon on this host.
-                            You can connect via Unix socket, TCP, or secure TLS
-                            connection.
-                          </div>
-                        </AlertDescription>
-                      </Alert>
-
-                      <FormField
-                        control={form.control}
-                        name="dockerConfig.connectionType"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>Connection Type</FormLabel>
-                            <Select
-                              onValueChange={field.onChange}
-                              value={field.value}
-                            >
-                              <FormControl>
-                                <SelectTrigger>
-                                  <SelectValue placeholder="Select connection type" />
-                                </SelectTrigger>
-                              </FormControl>
-                              <SelectContent>
-                                <SelectItem value="socket">
-                                  Unix Socket
-                                </SelectItem>
-                                <SelectItem value="tcp">TCP</SelectItem>
-                                <SelectItem value="tls">
-                                  TCP with TLS
-                                </SelectItem>
-                              </SelectContent>
-                            </Select>
-                            <FormDescription>
-                              Choose how to connect to the Docker daemon
-                            </FormDescription>
-                          </FormItem>
-                        )}
-                      />
-
-                      {form.watch("dockerConfig.connectionType") ===
-                        "socket" && (
-                        <FormField
-                          control={form.control}
-                          name="dockerConfig.socketPath"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>Socket Path</FormLabel>
-                              <FormControl>
-                                <Input
-                                  placeholder="/var/run/docker.sock"
-                                  {...field}
-                                />
-                              </FormControl>
-                              <FormDescription>
-                                Path to the Docker Unix socket (default:
-                                /var/run/docker.sock)
-                              </FormDescription>
-                            </FormItem>
-                          )}
-                        />
-                      )}
-
-                      {(form.watch("dockerConfig.connectionType") === "tcp" ||
-                        form.watch("dockerConfig.connectionType") ===
-                          "tls") && (
-                        <>
-                          <div className="grid grid-cols-12 gap-4">
-                            <FormField
-                              control={form.control}
-                              name="dockerConfig.host"
-                              render={({ field }) => (
-                                <FormItem className="col-span-8">
-                                  <FormLabel>Docker Host</FormLabel>
-                                  <FormControl>
-                                    <Input
-                                      placeholder="localhost or IP address"
-                                      {...field}
-                                    />
-                                  </FormControl>
-                                </FormItem>
-                              )}
-                            />
-
-                            <FormField
-                              control={form.control}
-                              name="dockerConfig.port"
-                              render={({ field }) => (
-                                <FormItem className="col-span-4">
-                                  <FormLabel>Port</FormLabel>
-                                  <FormControl>
-                                    <Input
-                                      type="number"
-                                      placeholder="2375 or 2376"
-                                      {...field}
-                                    />
-                                  </FormControl>
-                                </FormItem>
-                              )}
-                            />
-                          </div>
-                        </>
-                      )}
-
-                      {form.watch("dockerConfig.connectionType") === "tls" && (
-                        <Accordion type="multiple" className="w-full mt-4">
-                          <AccordionItem value="tls-config">
-                            <AccordionTrigger>
-                              TLS Configuration
-                            </AccordionTrigger>
-                            <AccordionContent className="space-y-4 pt-4">
-                              <FormField
-                                control={form.control}
-                                name="dockerConfig.tlsVerify"
-                                render={({ field }) => (
-                                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
-                                    <div className="space-y-0.5">
-                                      <FormLabel>Verify TLS</FormLabel>
-                                      <FormDescription>
-                                        Verify the Docker daemon's certificate
-                                      </FormDescription>
-                                    </div>
-                                    <FormControl>
-                                      <Switch
-                                        checked={field.value}
-                                        onCheckedChange={field.onChange}
-                                      />
-                                    </FormControl>
-                                  </FormItem>
-                                )}
-                              />
-
-                              <FormField
-                                control={form.control}
-                                name="dockerConfig.tlsCaCert"
-                                render={({ field }) => (
-                                  <FormItem>
-                                    <FormLabel>CA Certificate</FormLabel>
-                                    <FormControl>
-                                      <CodeMirror
-                                        value={field.value || ""}
-                                        onChange={field.onChange}
-                                        placeholder="-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----"
-                                        theme={oneDark}
-                                        className="border border-input rounded-md"
-                                        minHeight="120px"
-                                        basicSetup={{
-                                          lineNumbers: true,
-                                          foldGutter: false,
-                                          dropCursor: false,
-                                          allowMultipleSelections: false,
-                                          highlightSelectionMatches: false,
-                                          searchKeymap: false,
-                                          scrollPastEnd: false,
-                                        }}
-                                        extensions={[
-                                          EditorView.theme({
-                                            ".cm-scroller": {
-                                              overflow: "auto",
-                                            },
-                                          }),
-                                        ]}
-                                      />
-                                    </FormControl>
-                                    <FormDescription>
-                                      Certificate Authority certificate (PEM
-                                      format)
-                                    </FormDescription>
-                                  </FormItem>
-                                )}
-                              />
-
-                              <FormField
-                                control={form.control}
-                                name="dockerConfig.tlsCert"
-                                render={({ field }) => (
-                                  <FormItem>
-                                    <FormLabel>Client Certificate</FormLabel>
-                                    <FormControl>
-                                      <CodeMirror
-                                        value={field.value || ""}
-                                        onChange={field.onChange}
-                                        placeholder="-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----"
-                                        theme={oneDark}
-                                        className="border border-input rounded-md"
-                                        minHeight="120px"
-                                        basicSetup={{
-                                          lineNumbers: true,
-                                          foldGutter: false,
-                                          dropCursor: false,
-                                          allowMultipleSelections: false,
-                                          highlightSelectionMatches: false,
-                                          searchKeymap: false,
-                                          scrollPastEnd: false,
-                                        }}
-                                        extensions={[
-                                          EditorView.theme({
-                                            ".cm-scroller": {
-                                              overflow: "auto",
-                                            },
-                                          }),
-                                        ]}
-                                      />
-                                    </FormControl>
-                                    <FormDescription>
-                                      Client certificate (PEM format)
-                                    </FormDescription>
-                                  </FormItem>
-                                )}
-                              />
-
-                              <FormField
-                                control={form.control}
-                                name="dockerConfig.tlsKey"
-                                render={({ field }) => (
-                                  <FormItem>
-                                    <FormLabel>Client Key</FormLabel>
-                                    <FormControl>
-                                      <CodeMirror
-                                        value={field.value || ""}
-                                        onChange={field.onChange}
-                                        placeholder="-----BEGIN RSA PRIVATE KEY-----&#10;...&#10;-----END RSA PRIVATE KEY-----"
-                                        theme={oneDark}
-                                        className="border border-input rounded-md"
-                                        minHeight="120px"
-                                        basicSetup={{
-                                          lineNumbers: true,
-                                          foldGutter: false,
-                                          dropCursor: false,
-                                          allowMultipleSelections: false,
-                                          highlightSelectionMatches: false,
-                                          searchKeymap: false,
-                                          scrollPastEnd: false,
-                                        }}
-                                        extensions={[
-                                          EditorView.theme({
-                                            ".cm-scroller": {
-                                              overflow: "auto",
-                                            },
-                                          }),
-                                        ]}
-                                      />
-                                    </FormControl>
-                                    <FormDescription>
-                                      Client private key (PEM format)
-                                    </FormDescription>
-                                  </FormItem>
-                                )}
-                              />
-                            </AccordionContent>
-                          </AccordionItem>
-                        </Accordion>
-                      )}
-                    </>
-                  )}
                 </TabsContent>
                 <TabsContent value="tunnel">
                   <FormField

src/ui/main-axios.ts

@@ -7,6 +7,10 @@ import type {
   TunnelStatus,
   FileManagerFile,
   FileManagerShortcut,
+  DockerContainer,
+  DockerStats,
+  DockerLogOptions,
+  DockerValidation,
 } from "../types/index.js";
 import {
   apiLogger,
@@ -594,6 +598,9 @@ function initializeApiInstances() {
 
   // Homepage API (port 30006)
   homepageApi = createApiInstance(getApiUrl("", 30006), "HOMEPAGE");
+
+  // Docker Management API (port 30007)
+  dockerApi = createApiInstance(getApiUrl("/docker", 30007), "DOCKER");
 }
 
 // SSH Host Management API (port 30001)
@@ -614,6 +621,9 @@ export let authApi: AxiosInstance;
 // Homepage API (port 30006)
 export let homepageApi: AxiosInstance;
 
+// Docker Management API (port 30007)
+export let dockerApi: AxiosInstance;
+
 function initializeApp() {
   if (isElectron()) {
     getServerConfig()
@@ -3121,3 +3131,239 @@ export async function unlinkOIDCFromPasswordAccount(
     throw handleApiError(error, "unlink OIDC from password account");
   }
 }
+
+// ============================================================================
+// DOCKER MANAGEMENT API
+// ============================================================================
+
+export async function connectDockerSession(
+  sessionId: string,
+  hostId: number,
+): Promise<{ success: boolean; message: string }> {
+  try {
+    const response = await dockerApi.post("/ssh/connect", {
+      sessionId,
+      hostId,
+    });
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "connect to Docker SSH session");
+  }
+}
+
+export async function disconnectDockerSession(
+  sessionId: string,
+): Promise<{ success: boolean; message: string }> {
+  try {
+    const response = await dockerApi.post("/ssh/disconnect", {
+      sessionId,
+    });
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "disconnect from Docker SSH session");
+  }
+}
+
+export async function keepaliveDockerSession(
+  sessionId: string,
+): Promise<{ success: boolean }> {
+  try {
+    const response = await dockerApi.post("/ssh/keepalive", {
+      sessionId,
+    });
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "keepalive Docker SSH session");
+  }
+}
+
+export async function getDockerSessionStatus(
+  sessionId: string,
+): Promise<{ success: boolean; connected: boolean }> {
+  try {
+    const response = await dockerApi.get("/ssh/status", {
+      params: { sessionId },
+    });
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "get Docker session status");
+  }
+}
+
+export async function validateDockerAvailability(
+  sessionId: string,
+): Promise<DockerValidation> {
+  try {
+    const response = await dockerApi.get(`/validate/${sessionId}`);
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "validate Docker availability");
+  }
+}
+
+export async function listDockerContainers(
+  sessionId: string,
+  all: boolean = true,
+): Promise<DockerContainer[]> {
+  try {
+    const response = await dockerApi.get(`/containers/${sessionId}`, {
+      params: { all },
+    });
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "list Docker containers");
+  }
+}
+
+export async function getDockerContainerDetails(
+  sessionId: string,
+  containerId: string,
+): Promise<DockerContainer> {
+  try {
+    const response = await dockerApi.get(
+      `/containers/${sessionId}/${containerId}`,
+    );
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "get Docker container details");
+  }
+}
+
+export async function startDockerContainer(
+  sessionId: string,
+  containerId: string,
+): Promise<{ success: boolean; message: string }> {
+  try {
+    const response = await dockerApi.post(
+      `/containers/${sessionId}/${containerId}/start`,
+    );
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "start Docker container");
+  }
+}
+
+export async function stopDockerContainer(
+  sessionId: string,
+  containerId: string,
+): Promise<{ success: boolean; message: string }> {
+  try {
+    const response = await dockerApi.post(
+      `/containers/${sessionId}/${containerId}/stop`,
+    );
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "stop Docker container");
+  }
+}
+
+export async function restartDockerContainer(
+  sessionId: string,
+  containerId: string,
+): Promise<{ success: boolean; message: string }> {
+  try {
+    const response = await dockerApi.post(
+      `/containers/${sessionId}/${containerId}/restart`,
+    );
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "restart Docker container");
+  }
+}
+
+export async function pauseDockerContainer(
+  sessionId: string,
+  containerId: string,
+): Promise<{ success: boolean; message: string }> {
+  try {
+    const response = await dockerApi.post(
+      `/containers/${sessionId}/${containerId}/pause`,
+    );
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "pause Docker container");
+  }
+}
+
+export async function unpauseDockerContainer(
+  sessionId: string,
+  containerId: string,
+): Promise<{ success: boolean; message: string }> {
+  try {
+    const response = await dockerApi.post(
+      `/containers/${sessionId}/${containerId}/unpause`,
+    );
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "unpause Docker container");
+  }
+}
+
+export async function removeDockerContainer(
+  sessionId: string,
+  containerId: string,
+  force: boolean = false,
+): Promise<{ success: boolean; message: string }> {
+  try {
+    const response = await dockerApi.delete(
+      `/containers/${sessionId}/${containerId}/remove`,
+      {
+        params: { force },
+      },
+    );
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "remove Docker container");
+  }
+}
+
+export async function getContainerLogs(
+  sessionId: string,
+  containerId: string,
+  options?: DockerLogOptions,
+): Promise<{ logs: string }> {
+  try {
+    const response = await dockerApi.get(
+      `/containers/${sessionId}/${containerId}/logs`,
+      {
+        params: options,
+      },
+    );
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "get container logs");
+  }
+}
+
+export async function downloadContainerLogs(
+  sessionId: string,
+  containerId: string,
+  options?: DockerLogOptions,
+): Promise<Blob> {
+  try {
+    const response = await dockerApi.get(
+      `/containers/${sessionId}/${containerId}/logs`,
+      {
+        params: { ...options, download: true },
+        responseType: "blob",
+      },
+    );
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "download container logs");
+  }
+}
+
+export async function getContainerStats(
+  sessionId: string,
+  containerId: string,
+): Promise<DockerStats> {
+  try {
+    const response = await dockerApi.get(
+      `/containers/${sessionId}/${containerId}/stats`,
+    );
+    return response.data;
+  } catch (error) {
+    throw handleApiError(error, "get container stats");
+  }
+}