fixes tests

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.air.toml

@@ -35,7 +35,7 @@ pre_cmd = []
 rerun = false
 rerun_delay = 500
 send_interrupt = true
-stop_on_error = false
+stop_on_error = true
 
 [color]
 app = ""

.github/ISSUE_TEMPLATE/0_bug_report.yml

@@ -23,6 +23,7 @@ body:
         - Agents
         - Remote Hosts
         - Swarm Mode
+        - Kubernetes
     validations:
       required: true
   - type: input
@@ -47,17 +48,18 @@ body:
     id: environment
     attributes:
       label: 💻 Environment
-      description: Run `docker system info` and paste the output in the field below..
+      description: Run `docker system info` and paste the output in the field below.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: 📜 Dozzle logs are required for debugging purposes. You may need to enable debug mode. See https://dozzle.dev/guide/debugging.
+      description: Drag log files or paste the logs into the text input below
     validations:
       required: true
   - type: textarea
     attributes:
       label: 📸 If applicable, add screenshots to help explain your bug
-      description: Drag issues into the text input below
-    validations:
-      required: false
-  - type: textarea
-    attributes:
-      label: 📜 If applicable, attach your Dozzle logs. You many need to enable debug mode. See https://dozzle.dev/guide/debugging.
+      description: Drag screenshots into the text input below
     validations:
       required: false

.github/funding.yml

@@ -0,0 +1 @@
+buy_me_a_coffee: amirraminfar

.github/workflows/deploy.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Install Go
         uses: actions/setup-go@v5
         with:
-          go-version: 1.22.x
+          go-version: 1.24.2
           check-latest: true
       - name: Checkout code
         uses: actions/checkout@v4
@@ -90,14 +90,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@6524bf65af31da8d45b59e8c27de4bd072b392f5 # v3.8.0
+        uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3.10.0
       - name: Login to DockerHub
-        uses: docker/login-action@v3.3.0
+        uses: docker/login-action@v3.4.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Log in to the Container registry
-        uses: docker/login-action@v3.3.0
+        uses: docker/login-action@v3.4.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -111,12 +111,17 @@ jobs:
           images: |
             amir20/dozzle
             ghcr.io/amir20/dozzle
+          tags: |
+            type=raw,value=latest
+            type=semver,pattern={{version}},prefix=v
+            type=semver,pattern={{major}}.{{minor}},prefix=v
+            type=semver,pattern={{major}},prefix=v
       - name: Writing certs to file
         run: |
           echo "${{ secrets.TTL_KEY }}" > shared_key.pem
           echo "${{ secrets.TTL_CERT }}" > shared_cert.pem
       - name: Build and push
-        uses: docker/build-push-action@v6.11.0
+        uses: docker/build-push-action@v6.16.0
         with:
           push: true
           context: .

.github/workflows/dev.yml

@@ -13,14 +13,14 @@ jobs:
     if: ${{ !github.event.repository.fork && !github.event.pull_request.head.repo.fork && (github.event_name == 'push' || github.event.pull_request.head.repo.full_name == 'amir20/dozzle') }}
     steps:
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@6524bf65af31da8d45b59e8c27de4bd072b392f5 # v3.8.0
+        uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3.10.0
       - name: Login to DockerHub
-        uses: docker/login-action@v3.3.0
+        uses: docker/login-action@v3.4.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Log in to the Container registry
-        uses: docker/login-action@v3.3.0
+        uses: docker/login-action@v3.4.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -39,7 +39,7 @@ jobs:
           echo "${{ secrets.TTL_KEY }}" > shared_key.pem
           echo "${{ secrets.TTL_CERT }}" > shared_cert.pem
       - name: Build and push
-        uses: docker/build-push-action@v6.11.0
+        uses: docker/build-push-action@v6.16.0
         with:
           context: .
           push: true

.github/workflows/test.yml

@@ -54,7 +54,7 @@ jobs:
       - name: Install Go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.23"
+          go-version: "1.24.2"
           check-latest: true
       - name: Checkout code
         uses: actions/checkout@v4
@@ -77,7 +77,7 @@ jobs:
       - name: Setup Go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.23"
+          go-version: "1.24.2"
           check-latest: true
       - name: Generate dependencies
         run: make fake_assets shared_key.pem shared_cert.pem

.vscode/launch.json

@@ -1,16 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Debug test",
-      "type": "go",
-      "request": "launch",
-      "mode": "auto",
-      "program": "${workspaceFolder}/main.go",
-      "args": ["test"]
-    }
-  ]
-}

.vscode/settings.json

@@ -1,7 +0,0 @@
-{
-  "i18n-ally.localesPaths": ["locales"],
-  "i18n-ally.keystyle": "nested",
-  "cSpell.words": ["healthcheck", "orderedmap", "Retriable", "stdcopy", "Warnf"],
-  "editor.formatOnSave": true,
-  "i18n-ally.extract.autoDetect": true
-}

Dockerfile

@@ -1,5 +1,5 @@
 # Build assets
-FROM --platform=$BUILDPLATFORM node:23.6.0-alpine AS node
+FROM --platform=$BUILDPLATFORM node:23.11.0-alpine AS node
 
 RUN corepack enable
 
@@ -22,7 +22,7 @@ COPY public ./public
 # Build assets
 RUN pnpm build
 
-FROM --platform=$BUILDPLATFORM golang:1.23.4-alpine AS builder
+FROM --platform=$BUILDPLATFORM golang:1.24-alpine AS builder
 
 # install gRPC dependencies
 RUN apk add --no-cache ca-certificates protoc protobuf-dev\
@@ -61,6 +61,7 @@ RUN mkdir /data
 FROM scratch
 
 COPY --from=builder /data /data
+COPY --from=builder /tmp /tmp
 COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
 COPY --from=builder /dozzle/dozzle /dozzle
 

Makefile

@@ -43,7 +43,7 @@ int:
 	docker compose up --build --force-recreate --exit-code-from playwright
 
 shared_key.pem:
-	@openssl genpkey -algorithm RSA -out shared_key.pem -pkeyopt rsa_keygen_bits:2048
+	@openssl genpkey -algorithm Ed25519 -out shared_key.pem
 
 shared_cert.pem: shared_key.pem
 	@openssl req -new -key shared_key.pem -out shared_request.csr -subj "/C=US/ST=California/L=San Francisco/O=Dozzle"

README.md

@@ -97,9 +97,9 @@ Once you have the podman remote socket you can run Dozzle on podman.
 podman run --volume=/run/user/1000/podman/podman.sock:/var/run/docker.sock -d -p 8080:8080 docker.io/amir20/dozzle:latest
 ```
 
-Additionally you have to create a fake engine-id to prevent ```host not found``` errors. Podman doesn't generate an engine-id like Docker by itself due to its daemonless architecture.
+Additionally you have to create a fake engine-id to prevent `host not found` errors. Podman doesn't generate an engine-id like Docker by itself due to its daemonless architecture.
 
-Under ```/var/lib/docker``` create a file named ```engine-id```. On a system with Podman you will have to create the folder path as well. Inside the file place the UUID, for instance using ```uuidgen > engine-id```. After that the file should have an identifier that looks like this: ```b9f1d7fc-b459-4b6e-9f7a-e3d1cd2e14a9```.
+Under `/var/lib/docker` create a file named `engine-id`. On a system with Podman you will have to create the folder path as well. Inside the file place the UUID, for instance using `uuidgen > engine-id`. After that the file should have an identifier that looks like this: `b9f1d7fc-b459-4b6e-9f7a-e3d1cd2e14a9`.
 
 For more details check [Podman Infos](docs/guide/podman.md) or the [FAQ](docs/guide/faq.md#i-am-seeing-host-not-found-error-in-the-logs-how-do-i-fix-it)
 
@@ -115,24 +115,7 @@ If you do not want to be tracked at all, see the `--no-analytics` flag below.
 
 ## Environment variables and configuration
 
-Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or environment variables. The table below outlines all supported options and their respective env vars.
-
-| Flag                  | Env Variable               | Default        |
-| --------------------- | -------------------------- | -------------- |
-| `--addr`              | `DOZZLE_ADDR`              | `:8080`        |
-| `--base`              | `DOZZLE_BASE`              | `/`            |
-| `--hostname`          | `DOZZLE_HOSTNAME`          | `""`           |
-| `--level`             | `DOZZLE_LEVEL`             | `info`         |
-| `--auth-provider`     | `DOZZLE_AUTH_PROVIDER`     | `none`         |
-| `--auth-header-user`  | `DOZZLE_AUTH_HEADER_USER`  | `Remote-User`  |
-| `--auth-header-email` | `DOZZLE_AUTH_HEADER_EMAIL` | `Remote-Email` |
-| `--auth-header-name`  | `DOZZLE_AUTH_HEADER_NAME`  | `Remote-Name`  |
-| `--enable-actions`    | `DOZZLE_ENABLE_ACTIONS`    | false          |
-| `--filter`            | `DOZZLE_FILTER`            | `""`           |
-| `--no-analytics`      | `DOZZLE_NO_ANALYTICS`      | false          |
-| `--mode`              | `DOZZLE_MODE`              | `server`       |
-| `--remote-host`       | `DOZZLE_REMOTE_HOST`       |                |
-| `--remote-agent`      | `DOZZLE_REMOTE_AGENT`      |                |
+Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or environment variables. See documentation at [https://dozzle.dev/guide/supported-env-vars](https://dozzle.dev/guide/supported-env-vars) for more details.
 
 ## Support
 

assets/App.vue

@@ -15,6 +15,7 @@ watchEffect(() => {
   if (theme === "auto") {
     theme = mode.value;
   }
+  document.querySelector('meta[name="theme-color"]')?.setAttribute("content", theme == "dark" ? "#121212" : "#F5F5F5");
   document.documentElement.setAttribute("data-theme", theme);
 });
 </script>

assets/auto-imports.d.ts

@@ -31,6 +31,7 @@ declare global {
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createPinia: typeof import('pinia')['createPinia']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createRef: typeof import('@vueuse/core')['createRef']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
@@ -162,6 +163,7 @@ declare global {
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
   const useAnimate: typeof import('@vueuse/core')['useAnimate']
+  const useAnnouncements: typeof import('./stores/announcements')['useAnnouncements']
   const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
@@ -192,6 +194,7 @@ declare global {
   const useContainerActions: typeof import('./composable/containerActions')['useContainerActions']
   const useContainerStore: typeof import('./stores/container')['useContainerStore']
   const useContainerStream: typeof import('./composable/eventStreams')['useContainerStream']
+  const useCountdown: typeof import('@vueuse/core')['useCountdown']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
@@ -287,7 +290,6 @@ declare global {
   const useProfileStorage: typeof import('./composable/profileStorage')['useProfileStorage']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
-  const useReleases: typeof import('./stores/releases')['useReleases']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
@@ -371,7 +373,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
   // @ts-ignore
   export type { DrawerWidth } from './composable/drawer'
@@ -420,6 +422,7 @@ declare module 'vue' {
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
     readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createRef: UnwrapRef<typeof import('@vueuse/core')['createRef']>
     readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
@@ -551,6 +554,7 @@ declare module 'vue' {
     readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
     readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
     readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
+    readonly useAnnouncements: UnwrapRef<typeof import('./stores/announcements')['useAnnouncements']>
     readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
     readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
     readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
@@ -581,6 +585,7 @@ declare module 'vue' {
     readonly useContainerActions: UnwrapRef<typeof import('./composable/containerActions')['useContainerActions']>
     readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
     readonly useContainerStream: UnwrapRef<typeof import('./composable/eventStreams')['useContainerStream']>
+    readonly useCountdown: UnwrapRef<typeof import('@vueuse/core')['useCountdown']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
@@ -676,7 +681,6 @@ declare module 'vue' {
     readonly useProfileStorage: UnwrapRef<typeof import('./composable/profileStorage')['useProfileStorage']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
-    readonly useReleases: UnwrapRef<typeof import('./stores/releases')['useReleases']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>

assets/components.d.ts

@@ -2,15 +2,18 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Announcements: typeof import('./components/Announcements.vue')['default']
     'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
     'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default']
     'Carbon:copyFile': typeof import('~icons/carbon/copy-file')['default']
     'Carbon:information': typeof import('~icons/carbon/information')['default']
+    'Carbon:logoKubernetes': typeof import('~icons/carbon/logo-kubernetes')['default']
     'Carbon:macShift': typeof import('~icons/carbon/mac-shift')['default']
     'Carbon:play': typeof import('~icons/carbon/play')['default']
     'Carbon:restart': typeof import('~icons/carbon/restart')['default']
@@ -26,6 +29,7 @@ declare module 'vue' {
     'Cil:xCircle': typeof import('~icons/cil/x-circle')['default']
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
     ContainerActionsToolbar: typeof import('./components/ContainerViewer/ContainerActionsToolbar.vue')['default']
+    ContainerDropdown: typeof import('./components/ContainerDropdown.vue')['default']
     ContainerEventLogItem: typeof import('./components/LogViewer/ContainerEventLogItem.vue')['default']
     ContainerHealth: typeof import('./components/ContainerViewer/ContainerHealth.vue')['default']
     ContainerLog: typeof import('./components/ContainerViewer/ContainerLog.vue')['default']
@@ -39,6 +43,7 @@ declare module 'vue' {
     EventSource: typeof import('./components/LogViewer/EventSource.vue')['default']
     FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
     GroupedLog: typeof import('./components/GroupedViewer/GroupedLog.vue')['default']
+    GroupMenu: typeof import('./components/GroupMenu.vue')['default']
     HostIcon: typeof import('./components/common/HostIcon.vue')['default']
     HostList: typeof import('./components/HostList.vue')['default']
     HostLog: typeof import('./components/HostViewer/HostLog.vue')['default']
@@ -58,6 +63,7 @@ declare module 'vue' {
     LogMessageActions: typeof import('./components/LogViewer/LogMessageActions.vue')['default']
     LogStd: typeof import('./components/LogViewer/LogStd.vue')['default']
     LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
+    'MaterialSymbols:terminal': typeof import('~icons/material-symbols/terminal')['default']
     'Mdi:account': typeof import('~icons/mdi/account')['default']
     'Mdi:announcement': typeof import('~icons/mdi/announcement')['default']
     'Mdi:arrowUp': typeof import('~icons/mdi/arrow-up')['default']
@@ -99,7 +105,7 @@ declare module 'vue' {
     'Ph:stackSimple': typeof import('~icons/ph/stack-simple')['default']
     Popup: typeof import('./components/Popup.vue')['default']
     RandomColorTag: typeof import('./components/LogViewer/RandomColorTag.vue')['default']
-    Releases: typeof import('./components/Releases.vue')['default']
+    'Ri:terminalWindowFill': typeof import('~icons/ri/terminal-window-fill')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollableView: typeof import('./components/ScrollableView.vue')['default']
@@ -118,7 +124,9 @@ declare module 'vue' {
     StatSparkline: typeof import('./components/LogViewer/StatSparkline.vue')['default']
     SwarmMenu: typeof import('./components/SwarmMenu.vue')['default']
     Tag: typeof import('./components/common/Tag.vue')['default']
+    Terminal: typeof import('./components/Terminal.vue')['default']
     TimedButton: typeof import('./components/common/TimedButton.vue')['default']
+    ToastModal: typeof import('./components/common/ToastModal.vue')['default']
     Toggle: typeof import('./components/common/Toggle.vue')['default']
     ViewerWithSource: typeof import('./components/LogViewer/ViewerWithSource.vue')['default']
     ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']

assets/components/Announcements.vue

@@ -0,0 +1,115 @@
+<template>
+  <Dropdown class="dropdown-end" @closed="releaseSeen = mostRecent?.tag ?? config.version">
+    <template #trigger>
+      <mdi:announcement class="size-6 -rotate-12" />
+      <template v-if="announcements.length > 0 && releaseSeen != mostRecent?.tag">
+        <span class="bg-red absolute top-0 right-px size-2 animate-ping rounded-full opacity-75"></span>
+        <span class="bg-red absolute top-0 right-px size-2 rounded-full"></span>
+      </template>
+    </template>
+    <template #content>
+      <div class="w-72">
+        <ul class="space-y-4 p-2">
+          <li v-for="release in announcements" v-if="announcements.length > 0">
+            <template v-if="release.announcement">
+              <div class="flex items-baseline gap-1">
+                <carbon:information class="text-info self-center" />
+                <a
+                  :href="release.htmlUrl"
+                  class="link-primary text-lg font-bold"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  {{ release.name }}
+                </a>
+                <span class="ml-1 text-xs"><distance-time :date="release.createdAt" /></span>
+              </div>
+              <div class="text-base-content/80 text-sm">
+                {{ release.body }}
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-baseline gap-1">
+                <carbon:warning class="stroke-orange self-center" v-if="release.breaking > 0" />
+                <a
+                  :href="release.htmlUrl"
+                  class="link-primary text-lg font-bold"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  {{ release.name }}
+                </a>
+                <span class="ml-1 text-xs"><distance-time :date="release.createdAt" /></span>
+                <Tag class="bg-red ml-auto px-1 py-1 text-xs" v-if="release.latest">
+                  {{ $t("releases.latest") }}
+                </Tag>
+              </div>
+              <div class="text-base-content/80 text-sm">
+                {{ summary(release) }}
+              </div>
+            </template>
+          </li>
+          <li v-else>
+            <div class="text-base-content/80 text-sm">
+              {{ $t("releases.no_releases") }}
+            </div>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </Dropdown>
+</template>
+
+<script setup lang="ts">
+import { useAnnouncements } from "@/stores/announcements";
+
+const { announcements, mostRecent } = useAnnouncements();
+const { t } = useI18n();
+
+const releaseSeen = useProfileStorage("releaseSeen", config.version);
+
+function summary(release: { features: number; bugFixes: number; breaking: number }) {
+  if (release.features > 0 && release.bugFixes > 0 && release.breaking > 0) {
+    return t("releases.three_parts", {
+      first: t("releases.breaking", { count: release.breaking }),
+      second: t("releases.features", { count: release.features }),
+      third: t("releases.bugFixes", { count: release.bugFixes }),
+    });
+  }
+
+  if (release.features > 0 && release.bugFixes > 0) {
+    return t("releases.two_parts", {
+      first: t("releases.features", { count: release.features }),
+      second: t("releases.bugFixes", { count: release.bugFixes }),
+    });
+  }
+
+  if (release.features > 0 && release.breaking > 0) {
+    return t("releases.two_parts", {
+      first: t("releases.features", { count: release.features }),
+      second: t("releases.breaking", { count: release.breaking }),
+    });
+  }
+
+  if (release.bugFixes > 0 && release.breaking > 0) {
+    return t("releases.two_parts", {
+      first: t("releases.bugFixes", { count: release.bugFixes }),
+      second: t("releases.breaking", { count: release.breaking }),
+    });
+  }
+
+  if (release.features > 0) {
+    return t("releases.features", { count: release.features });
+  }
+
+  if (release.bugFixes > 0) {
+    return t("releases.bugFixes", { count: release.bugFixes });
+  }
+
+  if (release.breaking > 0) {
+    return t("releases.breaking", { count: release.breaking });
+  }
+}
+</script>
+
+<style scoped></style>

assets/components/ContainerDropdown.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="dropdown">
+    <button tabindex="0" role="button" class="btn btn-xs md:btn-sm"><slot /> <carbon:caret-down /></button>
+    <ul tabindex="0" class="dropdown-content menu rounded-box bg-base-100 shadow-sm">
+      <li v-for="other in containers">
+        <router-link :to="{ name: '/container/[id]', params: { id: other.id } }" class="text-nowrap">
+          <div
+            class="status data-[state=exited]:status-error data-[state=running]:status-success"
+            :data-state="other.state"
+          ></div>
+          {{ other.name }}
+          <div v-if="other.state === 'running'">running</div>
+          <DistanceTime :date="other.created" strict class="text-base-content/70 text-xs" v-else />
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type Container } from "@/models/Container";
+const { containers } = defineProps<{
+  containers: Container[];
+}>();
+</script>

assets/components/ContainerTable.vue

@@ -1,112 +1,118 @@
-!
 <template>
-  <div class="flex flex-row">
-    <div v-if="Object.keys(hosts).length > 1" class="flex-1">
-      <div role="tablist" class="tabs-boxed tabs block" v-if="Object.keys(hosts).length < 4">
-        <input
-          type="radio"
-          name="host"
-          role="tab"
-          class="tab rounded-sm!"
-          aria-label="Show All"
-          v-model="selectedHost"
-          :value="null"
-        />
-        <input
-          type="radio"
-          name="host"
-          role="tab"
-          class="tab rounded-sm!"
-          :aria-label="host.name"
-          v-for="host in hosts"
-          :value="host.id"
-          :key="host.id"
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-row">
+      <div v-if="Object.keys(hosts).length > 1" class="flex-1">
+        <div role="tablist" class="tabs-boxed tabs block" v-if="Object.keys(hosts).length < 4">
+          <input
+            type="radio"
+            name="host"
+            role="tab"
+            class="tab rounded-sm!"
+            aria-label="Show All"
+            v-model="selectedHost"
+            :value="null"
+          />
+          <input
+            type="radio"
+            name="host"
+            role="tab"
+            class="tab rounded-sm!"
+            :aria-label="host.name"
+            v-for="host in hosts"
+            :value="host.id"
+            :key="host.id"
+            v-model="selectedHost"
+          />
+        </div>
+
+        <DropdownMenu
+          class="btn-sm"
           v-model="selectedHost"
+          :options="[
+            { label: 'Show All', value: null },
+            ...Object.values(hosts).map((host) => ({ label: host.name, value: host.id })),
+          ]"
+          v-else
         />
       </div>
+      <div class="flex-1 text-right" v-show="containers.length > pageSizes[0]">
+        {{ $t("label.per-page") }}
 
-      <DropdownMenu
-        class="btn-sm"
-        v-model="selectedHost"
-        :options="[
-          { label: 'Show All', value: null },
-          ...Object.values(hosts).map((host) => ({ label: host.name, value: host.id })),
-        ]"
-        v-else
-      />
+        <DropdownMenu
+          class="dropdown-left btn-xs md:btn-sm"
+          v-model="perPage"
+          :options="pageSizes.map((i) => ({ label: i.toLocaleString(), value: i }))"
+        />
+      </div>
     </div>
-    <div class="flex-1 text-right" v-show="containers.length > pageSizes[0]">
-      {{ $t("label.per-page") }}
-
-      <DropdownMenu
-        class="dropdown-left btn-xs md:btn-sm"
-        v-model="perPage"
-        :options="pageSizes.map((i) => ({ label: i.toLocaleString(), value: i }))"
-      />
+    <div class="rounded-box border-base-content/10 overflow-x-auto border">
+      <table class="table-md md:table-lg table-zebra table">
+        <thead>
+          <tr :data-direction="direction > 0 ? 'asc' : 'desc'">
+            <th
+              v-for="(value, key) in fields"
+              :key="key"
+              @click.prevent="sort(key)"
+              :class="{ 'selected-sort': key === sortField }"
+              v-show="isVisible(key)"
+            >
+              <a class="inline-flex cursor-pointer gap-2 text-sm uppercase">
+                <span>{{ $t(value.label) }}</span>
+                <span class="h-4" data-icon>
+                  <mdi:arrow-up />
+                </span>
+              </a>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="bg-base-300/30">
+          <tr v-for="container in paginated" :key="container.id" class="hover:bg-base-100/80!">
+            <td v-if="isVisible('name')">
+              <router-link :to="{ name: '/container/[id]', params: { id: container.id } }" :title="container.name">
+                {{ container.name }}
+              </router-link>
+            </td>
+            <td v-if="isVisible('host')">{{ container.hostLabel }}</td>
+            <td v-if="isVisible('state')">{{ container.state }}</td>
+            <td v-if="isVisible('created')">
+              <distance-time :date="container.created" strict :suffix="false"></distance-time>
+            </td>
+            <td v-if="isVisible('cpu')">
+              <div class="flex flex-row items-center gap-1">
+                <progress
+                  class="progress progress-primary"
+                  :value="Math.min(container.movingAverage.cpu, 100)"
+                  :max="100"
+                ></progress>
+                <span class="text-sm">{{ container.movingAverage.cpu.toFixed(0) }}%</span>
+              </div>
+            </td>
+            <td v-if="isVisible('mem')">
+              <div class="flex flex-row items-center gap-1">
+                <progress
+                  class="progress progress-primary"
+                  :value="container.movingAverage.memory"
+                  max="100"
+                ></progress>
+                <span class="text-sm">{{ container.movingAverage.memory.toFixed(0) }}%</span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="p-4 text-center">
+      <nav class="join" v-if="isPaginated">
+        <input
+          class="btn btn-square join-item"
+          type="radio"
+          v-model="currentPage"
+          :aria-label="`${i}`"
+          :value="i"
+          v-for="i in totalPages"
+        />
+      </nav>
     </div>
-  </div>
-
-  <table class="table-lg bg-base-200 table">
-    <thead>
-      <tr :data-direction="direction > 0 ? 'asc' : 'desc'">
-        <th
-          v-for="(value, key) in fields"
-          :key="key"
-          @click.prevent="sort(key)"
-          :class="{ 'selected-sort': key === sortField }"
-          v-show="isVisible(key)"
-        >
-          <a class="inline-flex cursor-pointer gap-2 text-sm uppercase">
-            <span>{{ $t(value.label) }}</span>
-            <span class="h-4" data-icon>
-              <mdi:arrow-up />
-            </span>
-          </a>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="container in paginated" :key="container.id">
-        <td v-if="isVisible('name')">
-          <router-link :to="{ name: '/container/[id]', params: { id: container.id } }" :title="container.name">
-            {{ container.name }}
-          </router-link>
-        </td>
-        <td v-if="isVisible('host')">{{ container.hostLabel }}</td>
-        <td v-if="isVisible('state')">{{ container.state }}</td>
-        <td v-if="isVisible('created')">
-          <distance-time :date="container.created" strict :suffix="false"></distance-time>
-        </td>
-        <td v-if="isVisible('cpu')">
-          <div class="flex flex-row items-center gap-1">
-            <progress
-              class="progress progress-primary"
-              :value="Math.min(container.movingAverage.cpu, 100)"
-              :max="100"
-            ></progress>
-            <span class="text-sm">{{ container.movingAverage.cpu.toFixed(0) }}%</span>
-          </div>
-        </td>
-        <td v-if="isVisible('mem')">
-          <div class="flex flex-row items-center gap-1">
-            <progress class="progress progress-primary" :value="container.movingAverage.memory" max="100"></progress>
-            <span class="text-sm">{{ container.movingAverage.memory.toFixed(0) }}%</span>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <div class="p-4 text-center">
-    <nav class="join" v-if="isPaginated">
-      <input
-        class="btn btn-square join-item"
-        type="radio"
-        v-model="currentPage"
-        :aria-label="`${i}`"
-        :value="i"
-        v-for="i in totalPages"
-      />
-    </nav>
   </div>
 </template>
 
@@ -197,7 +203,7 @@ function isVisible(field: keys) {
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 [data-icon] {
   display: none;
@@ -208,7 +214,7 @@ function isVisible(field: keys) {
 }
 
 th {
-  @apply border-base-100 border-b-2;
+  @apply border-base-200 border-b-2;
   &.selected-sort {
     font-weight: bold;
     @apply border-primary;

assets/components/ContainerViewer/ContainerActionsToolbar.vue

@@ -134,6 +134,22 @@
           </button>
         </li>
       </template>
+
+      <template v-if="enableShell">
+        <li class="line"></li>
+        <li>
+          <a @click.prevent="showDrawer(Terminal, { container, action: 'attach' }, 'lg')">
+            <ri:terminal-window-fill /> Attach
+            <KeyShortcut char="a" :modifiers="['shift', 'meta']" />
+          </a>
+        </li>
+        <li>
+          <a @click.prevent="showDrawer(Terminal, { container, action: 'exec' }, 'lg')">
+            <material-symbols:terminal /> Shell
+            <KeyShortcut char="e" :modifiers="['shift', 'meta']" />
+          </a>
+        </li>
+      </template>
     </ul>
   </div>
 </template>
@@ -142,9 +158,10 @@
 import { Container } from "@/models/Container";
 import { allLevels } from "@/composable/logContext";
 import LogAnalytics from "../LogViewer/LogAnalytics.vue";
+import Terminal from "@/components/Terminal.vue";
 
 const { showSearch } = useSearchFilter();
-const { enableActions } = config;
+const { enableActions, enableShell } = config;
 const { streamConfig, hasComplexLogs, levels } = useLoggingContext();
 const showDrawer = useDrawer();
 
@@ -160,6 +177,21 @@ onKeyStroke("f", (e) => {
     }
   }
 });
+if (enableShell) {
+  onKeyStroke("a", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+      showDrawer(Terminal, { container, action: "attach" }, "lg");
+      e.preventDefault();
+    }
+  });
+
+  onKeyStroke("e", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+      showDrawer(Terminal, { container, action: "exec" }, "lg");
+      e.preventDefault();
+    }
+  });
+}
 
 const downloadParams = computed(() =>
   Object.entries(toValue(streamConfig))
@@ -169,7 +201,7 @@ const downloadParams = computed(() =>
 
 const downloadUrl = computed(() =>
   withBase(
-    `/api/containers/${container.host}:${container.id}/download?${new URLSearchParams(downloadParams.value).toString()}`,
+    `/api/containers/${container.host}~${container.id}/download?${new URLSearchParams(downloadParams.value).toString()}`,
   ),
 );
 
@@ -188,7 +220,7 @@ const toggleAllLevels = computed({
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 li.line {
   @apply bg-base-content/20 h-px;

assets/components/ContainerViewer/ContainerHealth.vue

@@ -15,7 +15,7 @@ defineProps<{
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [health="unhealthy"] {
   @apply text-red;
 }

assets/components/ContainerViewer/ContainerTitle.vue

@@ -1,44 +1,45 @@
 <template>
-  <div class="@container flex flex-1 items-center gap-1.5 truncate md:gap-2">
+  <div class="@container flex flex-1 items-center gap-1.5 md:gap-2">
     <label class="swap swap-rotate size-4">
       <input type="checkbox" v-model="pinned" />
       <carbon:star-filled class="swap-on text-secondary" />
       <carbon:star class="swap-off" />
     </label>
     <div class="inline-flex items-center text-sm">
-      <div class="breadcrumbs p-0">
+      <div class="breadcrumbs overflow-x-visible p-0 font-mono">
         <ul>
           <li v-if="config.hosts.length > 1" class="font-thin max-md:hidden">
             {{ container.hostLabel }}
           </li>
           <li>
-            <div v-if="otherContainers.length === 0" class="font-mono">{{ container.name }}</div>
-            <div class="wrapper" ref="wrapper" v-else>
-              <button popovertarget="popover-container-list" class="btn btn-xs md:btn-sm anchor font-mono">
-                {{ container.name }} <carbon:caret-down />
-              </button>
-
-              <ul popover id="popover-container-list" class="dropdown menu rounded-box bg-base-100 tethered shadow-sm">
-                <li v-for="other in otherContainers">
-                  <router-link :to="{ name: '/container/[id]', params: { id: other.id } }">
-                    <div
-                      class="status data-[state=exited]:status-error data-[state=running]:status-success"
-                      :data-state="other.state"
-                    ></div>
-                    <div class="font-mono" v-if="other.isSwarm">{{ other.swarmId }}</div>
-                    <div class="font-mono" v-else>{{ other.name }}</div>
-                    <div v-if="other.state === 'running'">running</div>
-                    <DistanceTime :date="other.created" strict class="text-base-content/70 text-xs" v-else />
-                  </router-link>
-                </li>
-              </ul>
+            <template v-if="otherContainers.length === 0">{{ container.name }}</template>
+            <div v-else>
+              <div class="dropdown">
+                <button tabindex="0" role="button" class="btn btn-xs md:btn-sm">
+                  {{ container.name }} <carbon:caret-down />
+                </button>
+                <ul tabindex="0" class="dropdown-content menu rounded-box bg-base-100 shadow-sm">
+                  <li v-for="other in otherContainers">
+                    <router-link :to="{ name: '/container/[id]', params: { id: other.id } }">
+                      <div
+                        class="status data-[state=exited]:status-error data-[state=running]:status-success"
+                        :data-state="other.state"
+                      ></div>
+                      <div v-if="other.isSwarm">{{ other.swarmId }}</div>
+                      <div v-else>{{ other.name }}</div>
+                      <div v-if="other.state === 'running'">running</div>
+                      <DistanceTime :date="other.created" strict class="text-base-content/70 text-xs" v-else />
+                    </router-link>
+                  </li>
+                </ul>
+              </div>
             </div>
           </li>
         </ul>
       </div>
     </div>
     <ContainerHealth :health="container.health" v-if="container.health" />
-    <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
+    <Tag class="hidden! font-mono @xl:block!" size="small">
       {{ container.image.replace(/@sha.*/, "") }}
     </Tag>
   </div>
@@ -62,38 +63,10 @@ const store = useContainerStore();
 const { containers: allContainers } = storeToRefs(store);
 
 const otherContainers = computed(() =>
-  [...allContainers.value.filter((c) => c.name === container.name && c.id !== container.id)].sort(
-    (a, b) => +b.created - +a.created,
-  ),
+  allContainers.value
+    .filter((c) => c.name === container.name && c.id !== container.id)
+    .sort((a, b) => +b.created - +a.created),
 );
-const wrapper = useTemplateRef("wrapper");
-
-onMounted(async () => {
-  if (!("anchorName" in document.documentElement.style)) {
-    // @ts-ignore
-    const module = await import("@oddbird/css-anchor-positioning/fn");
-    // @ts-ignore
-    await module.default([wrapper.value]);
-  }
-});
 </script>
 
-<style scoped>
-/* https://github.com/oddbird/css-anchor-positioning/issues/282 */
-.wrapper {
-  anchor-scope: --anchor;
-}
-
-.anchor {
-  anchor-name: --anchor;
-}
-
-.tethered {
-  margin: 0;
-  padding: 0;
-  position-anchor: --anchor;
-  position: absolute;
-  top: anchor(bottom);
-  left: anchor(left);
-}
-</style>
+<style scoped></style>

assets/components/FuzzySearchModal.spec.ts

@@ -42,6 +42,8 @@ function createFuzzySearchModal() {
                   "host",
                   {},
                   "running",
+                  0,
+                  0,
                   [],
                 ),
                 new Container(
@@ -55,6 +57,8 @@ function createFuzzySearchModal() {
                   "host",
                   {},
                   "running",
+                  0,
+                  0,
                   [],
                 ),
                 new Container(
@@ -68,6 +72,8 @@ function createFuzzySearchModal() {
                   "host",
                   {},
                   "running",
+                  0,
+                  0,
                   [],
                 ),
               ],

assets/components/FuzzySearchModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown dropdown-open w-full">
+  <div class="dropdown dropdown-open w-full shadow-md">
     <div class="input input-xl input-primary flex w-full items-center">
       <mdi:magnify class="flex size-8" />
       <input
@@ -13,8 +13,11 @@
         v-model="query"
         :placeholder="$t('placeholder.search-containers')"
       />
-      <form method="dialog">
-        <button class="swap hover:swap-active">
+      <form method="dialog" class="flex">
+        <button v-if="isMobile">
+          <mdi:close />
+        </button>
+        <button v-else class="swap hover:swap-active outline-hidden">
           <mdi:keyboard-esc class="swap-off" />
           <mdi:close class="swap-on" />
         </button>
@@ -30,7 +33,7 @@
           <a
             class="grid auto-cols-max grid-cols-[min-content_auto] gap-2 py-4"
             @click.prevent="selected(result.item)"
-            :class="index === selectedIndex ? 'menu-focus' : ''"
+            :class="{ 'menu-focus': index === selectedIndex }"
           >
             <div :class="{ 'text-primary': result.item.state === 'running' }">
               <template v-if="result.item.type === 'container'">
@@ -214,7 +217,7 @@ function matchedName({ item, matches = [] }: FuseResult<Item>) {
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 :deep(mark) {
   @apply bg-transparent text-inherit underline underline-offset-2;
 }

assets/components/GroupMenu.vue

@@ -0,0 +1,29 @@
+<template>
+  <ul class="menu w-full p-0 text-[0.95rem]">
+    <li v-if="customGroups.length > 0">
+      <details open>
+        <summary class="text-base-content/80 font-light">
+          <ph:bounding-box-fill />
+          {{ $t("label.group-menu") }}
+        </summary>
+        <ul>
+          <li v-for="group in customGroups" :key="group.name">
+            <router-link :to="{ name: '/group/[name]', params: { name: group.name } }" active-class="menu-active">
+              <ph:stack-simple />
+              <div class="truncate">
+                {{ group.name }}
+              </div>
+            </router-link>
+          </li>
+        </ul>
+      </details>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+const store = useSwarmStore();
+
+const { customGroups } = storeToRefs(store);
+</script>
+<style scoped></style>

assets/components/GroupedViewer/GroupedLog.vue

@@ -2,11 +2,9 @@
   <ScrollableView :scrollable="scrollable" v-if="group.containers.length && ready">
     <template #header>
       <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="@container flex flex-1 gap-1.5 truncate md:gap-2">
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ $t("label.container", group.containers.length) }}</div>
-          </div>
-        </div>
+        <ContainerDropdown :containers="group.containers">
+          {{ $t("label.container", group.containers.length) }}
+        </ContainerDropdown>
         <MultiContainerStat class="ml-auto" :containers="group.containers" />
         <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
       </div>

assets/components/HostList.vue

@@ -31,7 +31,8 @@
           </ul>
           <ul class="flex flex-row flex-wrap gap-x-2 text-sm md:gap-3">
             <li class="flex items-center gap-1">
-              <octicon:container-24 class="inline-block" /> {{ $t("label.container", hostContainers[host.id]?.length) }}
+              <octicon:container-24 class="inline-block" />
+              {{ $t("label.container", hostContainers[host.id]?.length ?? 0) }}
             </li>
             <li class="flex items-center gap-1"><mdi:docker class="inline-block" /> {{ host.dockerVersion }}</li>
           </ul>
@@ -50,7 +51,7 @@
             :style="`--value: ${Math.floor((weightedStats[host.id].weighted.totalMem / host.memTotal) * 100)};`"
             role="progressbar"
           >
-            {{ formatBytes(weightedStats[host.id].weighted.totalMem, 1) }}
+            {{ formatBytes(weightedStats[host.id].weighted.totalMem, { decimals: 1, short: true }) }}
           </div>
         </div>
       </div>
@@ -107,7 +108,10 @@ useIntervalFn(
         stat.totalCPU += container.stat.cpu;
         stat.totalMem += container.stat.memoryUsage;
       }
-      weightedStats[host].mostRecent = stat;
+      if (weightedStats[host]) {
+        // TODO fix this init
+        weightedStats[host].mostRecent = stat;
+      }
     }
   },
   1000,

assets/components/HostViewer/HostLog.vue

@@ -2,7 +2,7 @@
   <ScrollableView :scrollable="scrollable" v-if="host">
     <template #header>
       <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="flex flex-1 gap-1.5 truncate md:gap-2">
+        <div class="flex flex-1 items-center gap-1.5 truncate md:gap-2">
           <ph:computer-tower />
           <div class="inline-flex font-mono text-sm">
             <div class="font-semibold">{{ host.name }}</div>

assets/components/Links.vue

@@ -1,20 +1,7 @@
 <template>
   <div class="flex items-center justify-end gap-4">
     <slot name="more-items"></slot>
-    <Dropdown class="dropdown-end" @closed="latestTag = latest?.tag ?? config.version">
-      <template #trigger>
-        <mdi:announcement class="size-6 -rotate-12" />
-        <span
-          class="bg-red absolute top-0 right-px size-2 rounded-full"
-          v-if="hasUpdate && latestTag != latest?.tag"
-        ></span>
-      </template>
-      <template #content>
-        <div class="w-72">
-          <Releases />
-        </div>
-      </template>
-    </Dropdown>
+    <Announcements />
 
     <router-link
       :to="{ name: '/settings' }"
@@ -58,7 +45,4 @@ async function logout() {
 
   location.reload();
 }
-
-const { hasUpdate, latest } = useReleases();
-const latestTag = useProfileStorage("releaseSeen", config.version);
 </script>

assets/components/LogViewer/ComplexLogItem.vue

@@ -30,7 +30,7 @@ const showDrawer = useDrawer();
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .text-light {
   @apply text-base-content/70;
 }

assets/components/LogViewer/ContainerEventLogItem.vue

@@ -2,84 +2,18 @@
   <LogItem :logEntry>
     <div class="whitespace-pre-wrap" :data-event="logEntry.event" v-html="logEntry.message"></div>
   </LogItem>
-
-  <div
-    class="alert alert-info my-4 w-auto flex-none font-sans text-[1rem] md:mx-auto md:w-1/2"
-    v-if="followEligible && showCard"
-  >
-    <carbon:information class="size-6 shrink-0 stroke-current" />
-    <div>
-      <h3 class="text-lg font-bold">{{ $t("alert.similar-container-found.title") }}</h3>
-      {{ $t("alert.similar-container-found.message", { containerId: nextContainer.id }) }}
-    </div>
-    <div>
-      <TimedButton
-        v-if="automaticRedirect"
-        class="btn-primary btn-sm"
-        @finished="redirectNow()"
-        @click="showCard = false"
-      >
-        {{ $t("button.cancel") }}
-      </TimedButton>
-      <router-link
-        :to="{ name: '/container/[id]', params: { id: nextContainer.id } }"
-        class="btn btn-primary btn-sm"
-        v-else
-      >
-        {{ $t("button.redirect") }}
-      </router-link>
-    </div>
-  </div>
 </template>
 <script lang="ts" setup>
 import { ContainerEventLogEntry } from "@/models/LogEntry";
-const router = useRouter();
-const { showToast } = useToast();
-const { t } = useI18n();
 
 const { logEntry } = defineProps<{
   logEntry: ContainerEventLogEntry;
   showContainerName?: boolean;
 }>();
-
-const showCard = ref(true);
-const { containers } = useLoggingContext();
-const store = useContainerStore();
-const { containers: allContainers } = storeToRefs(store);
-
-const nextContainer = computed(
-  () =>
-    [
-      ...allContainers.value.filter(
-        (c) => c.created > containers.value[0].created && c.name === containers.value[0].name,
-      ),
-    ].sort((a, b) => +a.created - +b.created)[0],
-);
-
-const followEligible = computed(
-  () =>
-    router.currentRoute.value.name === "/container/[id]" && // we are on a container page
-    logEntry.event === "container-stopped" && // container was stopped
-    containers.value.length === 1 && // only one container
-    Date.now() - +logEntry.date < 5 * 60 * 1000 && // was stopped in the last 5 minutes
-    nextContainer.value !== undefined, // there is a next container
-);
-
-function redirectNow() {
-  showToast(
-    {
-      title: t("alert.redirected.title"),
-      message: t("alert.redirected.message", { containerId: nextContainer.value?.id }),
-      type: "info",
-    },
-    { expire: 5000 },
-  );
-  router.push({ name: "/container/[id]", params: { id: nextContainer.value?.id } });
-}
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [data-event="container-stopped"] {
   @apply text-red;
 }

assets/components/LogViewer/EventSource.spec.ts

@@ -105,6 +105,8 @@ describe("<ContainerEventSource />", () => {
           "localhost",
           {},
           "created",
+          0,
+          0,
           [],
         ),
       },

assets/components/LogViewer/EventSource.vue

@@ -45,11 +45,25 @@ const fetchMore = async () => {
   }
 };
 
-const shuffle = (items: any[]) => {
-  return items.sort(() => Math.random() - 0.5);
-};
-
-const sizes = computedWithControl(eventSourceURL, () =>
-  shuffle(["w-3/5", "w-2/3", "w-9/12", "w-1/2", "w-1/3", "w-3/4"]),
-);
+const sizes = computedWithControl(eventSourceURL, () => {
+  const sizeOptions = [
+    "w-2/12",
+    "w-3/12",
+    "w-4/12",
+    "w-5/12",
+    "w-6/12",
+    "w-7/12",
+    "w-8/12",
+    "w-9/12",
+    "w-10/12",
+    "w-11/12",
+    "w-full",
+  ];
+  const result = [];
+  const iterations = 18;
+  for (let i = 0; i < iterations; i++) {
+    result.push(sizeOptions[Math.floor(Math.random() * sizeOptions.length)]);
+  }
+  return result;
+});
 </script>

assets/components/LogViewer/LogAnalytics.vue

@@ -11,18 +11,26 @@
           <textarea
             v-model="query"
             class="textarea textarea-primary w-full font-mono text-lg"
-            :class="{ 'textarea-error': error }"
+            :class="{ 'textarea-error!': error }"
+            :disabled="state === 'downloading'"
           ></textarea>
-          <div class="label max-h-48 overflow-y-auto pr-2">
-            <span class="label-text-alt text-error" v-if="error">{{ error }}</span>
-            <span class="label-text-alt" v-else>
-              Total {{ results.numRows }} records
-              <template v-if="results.numRows > pageLimit"> . Showing first {{ page.numRows }}. </template>
+          <div class="mt-2">
+            <span class="text-error" v-if="error">{{ error }}</span>
+            <span v-else-if="state === 'initializing'">{{ $t("analytics.creating_table") }}</span>
+            <span v-else-if="state === 'downloading'">{{
+              $t("analytics.downloading", { size: formatBytes(bytes, { decimals: 1 }) })
+            }}</span>
+            <span v-else-if="evaluating">{{ $t("analytics.evaluating_query") }}</span>
+            <span v-else>
+              {{ $t("analytics.total_records", { count: results.numRows.toLocaleString() }) }}
+              <template v-if="results.numRows > pageLimit">{{
+                $t("analytics.showing_first", { count: page.numRows.toLocaleString() })
+              }}</template>
             </span>
           </div>
         </label>
       </section>
-      <SQLTable :table="page" :loading="evaluating || !isReady" />
+      <SQLTable :table="page" :loading="evaluating || state !== 'ready'" />
     </div>
   </aside>
 </template>
@@ -30,12 +38,15 @@
 <script setup lang="ts">
 import { Container } from "@/models/Container";
 import { type Table } from "@apache-arrow/esnext-esm";
+
 const { container } = defineProps<{ container: Container }>();
 const query = ref("SELECT * FROM logs LIMIT 100");
 const error = ref<string | null>(null);
 const debouncedQuery = debouncedRef(query, 500);
 const evaluating = ref(false);
 const pageLimit = 1000;
+const state = ref<"downloading" | "ready" | "initializing">("downloading");
+const bytes = ref(0);
 
 const url = withBase(
   `/api/hosts/${container.host}/containers/${container.id}/logs?stdout=1&stderr=1&everything&jsonOnly`,
@@ -51,27 +62,49 @@ if (!response.ok) {
 const { db, conn } = await useDuckDB();
 const empty = await conn.query<Record<string, any>>(`SELECT 1 LIMIT 0`);
 
-const { isReady } = useAsyncState(
-  async () => {
-    await db.registerFileBuffer("logs.json", new Uint8Array(await response.arrayBuffer()));
+onMounted(async () => {
+  try {
+    state.value = "downloading";
+
+    const reader = response.body?.getReader();
+    if (!reader) throw new Error("No reader available from stream");
+
+    const chunks: Uint8Array[] = [];
+    bytes.value = 0;
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      chunks.push(value);
+      bytes.value += value.length;
+    }
+
+    const arrayBuffer = new Uint8Array(bytes.value);
+    let position = 0;
+    for (const chunk of chunks) {
+      arrayBuffer.set(chunk, position);
+      position += chunk.length;
+    }
+
+    await db.registerFileBuffer("logs.json", arrayBuffer);
+
+    state.value = "initializing";
     await conn.query(
       `CREATE TABLE logs AS SELECT unnest(m) FROM read_json('logs.json', ignore_errors = true, format = 'newline_delimited')`,
     );
-  },
-  undefined,
-  {
-    onError: (e) => {
-      console.error(e);
-      if (e instanceof Error) {
-        error.value = e.message;
-      }
-    },
-  },
-);
+
+    state.value = "ready";
+  } catch (e) {
+    console.error(e);
+    if (e instanceof Error) {
+      error.value = e.message;
+    }
+  }
+});
 
 const results = computedAsync(
   async () => {
-    if (isReady.value) {
+    if (state.value === "ready") {
       return await conn.query<Record<string, any>>(debouncedQuery.value);
     } else {
       return empty;
@@ -89,7 +122,10 @@ const results = computedAsync(
   },
 );
 
-whenever(evaluating, () => (error.value = null));
+whenever(evaluating, () => {
+  error.value = null;
+  state.value = "ready";
+});
 const page = computed(() =>
   results.value.numRows > pageLimit ? results.value.slice(0, pageLimit) : results.value,
 ) as unknown as ComputedRef<Table<Record<string, any>>>;

assets/components/LogViewer/LogDetails.vue

@@ -72,7 +72,6 @@
 
 <script setup lang="ts">
 import { ComplexLogEntry } from "@/models/LogEntry";
-import { useSortable } from "@vueuse/integrations/useSortable";
 import { UseClipboard } from "@vueuse/components";
 
 const { entry } = defineProps<{ entry: ComplexLogEntry }>();
@@ -82,6 +81,8 @@ const container = currentContainer(toRef(() => entry.containerID));
 const visibleKeys = persistentVisibleKeysForContainer(container);
 const { hosts } = useHosts();
 
+const { useSortable } = await import("@vueuse/integrations/useSortable");
+
 function toggleField(key: string[]) {
   if (visibleKeys.value.size === 0) {
     visibleKeys.value = new Map<string[], boolean>(fields.value.map(({ key }) => [key, true]));
@@ -146,8 +147,8 @@ function syntaxHighlight(json: any) {
     /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|\b\d+\b)/g,
     function (match: string) {
       var cls = "json-number";
-      if (/^"/.test(match)) {
-        if (/:$/.test(match)) {
+      if (match.startsWith('"')) {
+        if (match.endsWith(":")) {
           cls = "json-key";
         } else {
           cls = "json-string";
@@ -165,7 +166,7 @@ function syntaxHighlight(json: any) {
 useSortable(list, fields);
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .font-mono {
   font-family:
     ui-monospace,

assets/components/LogViewer/LogItem.vue

@@ -1,9 +1,17 @@
 <template>
   <div class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
     <LogStd :std="logEntry.std" class="shrink-0 select-none" v-if="showStd" />
-    <RandomColorTag class="shrink-0 select-none" :value="host.name" v-if="showHostname" />
-    <RandomColorTag class="shrink-0 select-none" :value="container.name" v-if="showContainerName" />
-    <LogDate :date="logEntry.date" v-if="showTimestamp" class="shrink-0 select-none" />
+
+    <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[>_*:nth-of-type(2)]:flex-col-reverse md:flex-row!">
+      <RandomColorTag class="w-30 shrink-0 select-none md:w-40" :value="host.name" v-if="showHostname" />
+      <RandomColorTag
+        class="w-30 shrink-0 select-none group-[.compact]:flex-1 md:w-40"
+        :value="container.name"
+        v-if="showContainerName"
+        truncateRight
+      />
+      <LogDate :date="logEntry.date" v-if="showTimestamp" class="shrink-0 select-none" />
+    </div>
     <LogLevel
       class="flex select-none"
       :level="logEntry.level"

assets/components/LogViewer/LogLevel.vue

@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [data-position="start"] {
   border-radius: 0.5em 0.5em 0 0;
   height: 70%;
@@ -35,7 +35,7 @@ defineProps<{
 }
 </style>
 <style>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [data-level="debug"],
 [data-level="trace"] {
   @apply !bg-purple;

assets/components/LogViewer/LogList.vue

@@ -54,7 +54,7 @@ useIntersectionObserver(
 );
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .events {
   font-family:
     ui-monospace,

assets/components/LogViewer/LogStd.vue

@@ -13,7 +13,7 @@ defineProps<{
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [std="stdout"] {
   @apply text-blue;
 }

assets/components/LogViewer/MultiContainerActionToolbar.vue

@@ -97,13 +97,13 @@ const downloadParams = computed(() =>
 
 const downloadUrl = computed(() =>
   withBase(
-    `/api/containers/${containers.value.map((c) => c.host + ":" + c.id).join(",")}/download?${new URLSearchParams(downloadParams.value).toString()}`,
+    `/api/containers/${containers.value.map((c) => c.host + "~" + c.id).join(",")}/download?${new URLSearchParams(downloadParams.value).toString()}`,
   ),
 );
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 li.line {
   @apply bg-base-content/20 h-px;
 }

assets/components/LogViewer/MultiContainerStat.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="flex gap-4">
-    <StatMonitor :data="memoryData" label="mem" :stat-value="formatBytes(totalStat.memoryUsage)" />
-    <StatMonitor :data="cpuData" label="load" :stat-value="Math.max(0, totalStat.cpu).toFixed(2) + '%'" />
+    <StatMonitor
+      :data="memoryData"
+      label="mem"
+      :stat-value="formatBytes(totalStat.memoryUsage)"
+      :limit="formatBytes(limits.memory, { short: true, decimals: 1 })"
+    />
+    <StatMonitor
+      :data="cpuData"
+      label="load"
+      :stat-value="Math.max(0, totalStat.cpu).toFixed(2) + '%'"
+      :limit="roundCPU(limits.cpu) + ' CPU'"
+    />
   </div>
 </template>
 
@@ -15,6 +25,9 @@ const { containers } = defineProps<{
 
 const totalStat = ref<Stat>({ cpu: 0, memory: 0, memoryUsage: 0 });
 const { history, reset } = useSimpleRefHistory(totalStat, { capacity: 300 });
+const { hosts } = useHosts();
+
+const roundCPU = (num: number) => (Number.isInteger(num) ? num.toFixed(0) : num.toFixed(1));
 
 watch(
   () => containers,
@@ -42,6 +55,43 @@ watch(
   { immediate: true },
 );
 
+const limits = computed(() => {
+  const hostLimits = new Map<string, { cpu: number; memory: number }>();
+
+  for (const container of containers) {
+    if (!hostLimits.has(container.host)) {
+      hostLimits.set(container.host, {
+        cpu: 0,
+        memory: 0,
+      });
+    }
+    if (hostLimits.get(container.host)!.cpu < hosts.value[container.host].nCPU) {
+      if (container.cpuLimit == 0) {
+        hostLimits.get(container.host)!.cpu = hosts.value[container.host].nCPU;
+      } else {
+        hostLimits.get(container.host)!.cpu = hostLimits.get(container.host)!.cpu + container.cpuLimit;
+      }
+    }
+    if (hostLimits.get(container.host)!.memory < hosts.value[container.host].memTotal) {
+      if (container.memoryLimit == 0) {
+        hostLimits.get(container.host)!.memory = hosts.value[container.host].memTotal;
+      } else {
+        hostLimits.get(container.host)!.memory = hostLimits.get(container.host)!.memory + container.memoryLimit;
+      }
+    }
+  }
+
+  return hostLimits.values().reduce(
+    (acc, { cpu, memory }) => {
+      return {
+        cpu: acc.cpu + cpu,
+        memory: acc.memory + memory,
+      };
+    },
+    { cpu: 0, memory: 0 },
+  );
+});
+
 useIntervalFn(() => {
   totalStat.value = containers.reduce(
     (acc, { stat }) => {

assets/components/LogViewer/RandomColorTag.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="tag grid w-40 overflow-hidden rounded-sm text-center text-sm text-white">
+  <div class="tag grid overflow-hidden rounded-sm text-center text-sm text-white">
     <div class="random-color col-start-1 row-start-1 brightness-75"></div>
-    <div class="col-start-1 row-start-1 truncate px-2 brightness-100 [direction:rtl]">{{ value }}</div>
+    <div class="col-start-1 row-start-1 truncate px-2 brightness-100" :class="truncateRight ? '[direction:rtl]' : ''">
+      {{ value }}
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -29,8 +31,9 @@ const colors = [
 ] as const;
 </script>
 <script lang="ts" setup>
-const { value } = defineProps<{
+const { value, truncateRight = false } = defineProps<{
   value: string;
+  truncateRight?: boolean;
 }>();
 
 const color = computed(() => colors[Math.abs(hashCode(value)) % colors.length]);

assets/components/LogViewer/SimpleLogItem.vue

@@ -19,8 +19,8 @@ import stripAnsi from "strip-ansi";
 
 const ansiConvertor = new AnsiConvertor({
   escapeXML: false,
-  fg: "oklch(var(--base-content-color))",
-  bg: "oklch(var(--base-color))",
+  fg: "var(--color-base-content)",
+  bg: "var(--color-base-100)",
 });
 
 defineProps<{
@@ -29,13 +29,13 @@ defineProps<{
 
 const colorize = (value: string) => ansiConvertor.toHtml(value);
 const urlPattern =
-  /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b[-a-zA-Z0-9()@:%_+.~#?&\/=]*/g;
+  /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b[-a-zA-Z0-9()@:%_+.~#?&/=]*/g;
 const linkify = (text: string) =>
   text.replace(urlPattern, (url) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`);
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .log-wrapper :deep(a) {
   @apply text-primary underline-offset-4 hover:underline;
 }

assets/components/LogViewer/StatMonitor.vue

@@ -1,25 +1,31 @@
 <template>
   <div class="hover:text-secondary relative" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
-    <div class="border-primary hidden overflow-hidden rounded-xs border px-px pt-1 pb-px md:flex">
+    <div class="border-primary overflow-hidden rounded-xs border px-px pt-1 pb-px max-md:hidden">
       <StatSparkline :data="data" @selected-point="onSelectedPoint" />
     </div>
     <div class="bg-base-200 inline-flex gap-1 rounded-sm p-px text-xs md:absolute md:-top-2 md:-left-0.5">
       <div class="font-light uppercase">{{ label }}</div>
       <div class="font-bold select-none">
         {{ mouseOver ? (selectedPoint?.value ?? selectedPoint?.y ?? statValue) : statValue }}
+        <span v-if="limit !== -1 && !mouseOver" class="max-md:hidden"> / {{ limit }} </span>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-const { data, label, statValue } = defineProps<{ data: Point<unknown>[]; label: string; statValue: string | number }>();
-
-let selectedPoint: Point<unknown> | undefined = $ref();
-
-function onSelectedPoint(point: Point<unknown>) {
-  selectedPoint = point;
-}
-
-let mouseOver = $ref(false);
+const {
+  data,
+  label,
+  statValue,
+  limit = -1,
+} = defineProps<{
+  data: Point<unknown>[];
+  label: string;
+  statValue: string | number;
+  limit?: string | number;
+}>();
+const selectedPoint = ref<Point<unknown> | undefined>();
+const onSelectedPoint = (point: Point<unknown>) => (selectedPoint.value = point);
+const mouseOver = ref(false);
 </script>

assets/components/LogViewer/StatSparkline.vue

@@ -11,7 +11,7 @@ import { scaleLinear } from "d3-scale";
 import { area, curveStep } from "d3-shape";
 
 const d3 = { extent, scaleLinear, area, curveStep };
-const { data, width = 150, height = 30 } = defineProps<{ data: Point<unknown>[]; width?: number; height?: number }>();
+const { data, width = 175, height = 30 } = defineProps<{ data: Point<unknown>[]; width?: number; height?: number }>();
 const x = d3.scaleLinear().range([0, width]);
 const y = d3.scaleLinear().range([height, 0]);
 

assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap

@@ -5,10 +5,12 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
   <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
     <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
       <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
-        <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+      <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[>_*:nth-of-type(2)]:flex-col-reverse md:flex-row!">
+        <!--v-if-->
+        <!--v-if-->
+        <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
+          <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+        </div>
       </div>
       <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
       <div data-v-a49e52d4="" class="log-wrapper [word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
@@ -25,10 +27,12 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
   <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
     <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
       <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
-        <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42</time></div>
+      <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[>_*:nth-of-type(2)]:flex-col-reverse md:flex-row!">
+        <!--v-if-->
+        <!--v-if-->
+        <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
+          <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42</time></div>
+        </div>
       </div>
       <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
       <div data-v-a49e52d4="" class="log-wrapper [word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
@@ -45,10 +49,12 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
   <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
     <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
       <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
-        <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+      <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[>_*:nth-of-type(2)]:flex-col-reverse md:flex-row!">
+        <!--v-if-->
+        <!--v-if-->
+        <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
+          <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+        </div>
       </div>
       <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
       <div data-v-a49e52d4="" class="log-wrapper [word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>

assets/components/MultiContainerViewer/MultiContainerLog.vue

@@ -2,12 +2,8 @@
   <ScrollableView :scrollable="scrollable" v-if="containers.length && ready">
     <template #header>
       <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="@container flex flex-1 gap-1.5 truncate md:gap-2">
-          <octicon:container-24 />
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ containers.length }} containers</div>
-          </div>
-        </div>
+        <octicon:container-24 />
+        <ContainerDropdown :containers="containers">{{ $t("label.container", containers.length) }}</ContainerDropdown>
         <MultiContainerStat class="ml-auto" :containers="containers" />
         <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
       </div>

assets/components/Popup.vue

@@ -3,7 +3,7 @@
   <teleport to="body">
     <transition name="fade">
       <div
-        v-show="show && (delayedShow || glopbalShow)"
+        v-show="show && (delayedShow || globalShow)"
         class="border-base-content/20 bg-base-100 fixed z-50 rounded-sm border p-4 shadow-sm"
         ref="content"
       >
@@ -16,14 +16,14 @@
 <script lang="ts" setup>
 import { globalShowPopup } from "@/composable/popup";
 
-const glopbalShow = globalShowPopup();
-const show = ref(glopbalShow.value);
+const globalShow = globalShowPopup();
+const show = ref(globalShow.value);
 const delayedShow = refDebounced(show, 1000);
 const content = ref<HTMLElement>();
 
 const onMouseEnter = (e: Event) => {
   show.value = true;
-  glopbalShow.value = true;
+  globalShow.value = true;
 
   if (content.value && e.target instanceof HTMLElement) {
     const { left, top, width } = e.target.getBoundingClientRect();
@@ -37,7 +37,7 @@ const onMouseEnter = (e: Event) => {
 
 const onMouseLeave = () => {
   show.value = false;
-  glopbalShow.value = false;
+  globalShow.value = false;
 };
 
 const el: Ref<HTMLElement> = useCurrentElement();

assets/components/Releases.vue

@@ -1,74 +0,0 @@
-<template>
-  <ul class="space-y-4 p-2">
-    <li v-for="release in releases" v-if="releases?.length">
-      <div class="flex items-baseline gap-1">
-        <carbon:warning class="stroke-orange self-center" v-if="release.breaking > 0" />
-        <a :href="release.htmlUrl" class="link-primary text-lg font-bold" target="_blank" rel="noreferrer noopener">
-          {{ release.name }}
-        </a>
-        <span class="ml-1 text-xs"><distance-time :date="new Date(release.createdAt)" /></span>
-        <Tag class="bg-red ml-auto px-1 py-1 text-xs" v-if="release.tag === latest?.tag">
-          {{ $t("releases.latest") }}
-        </Tag>
-      </div>
-      <div class="text-base-content/80 text-sm">
-        {{ summary(release) }}
-      </div>
-    </li>
-    <li v-else>
-      <div class="text-base-content/80 text-sm">
-        {{ $t("releases.no_releases") }}
-      </div>
-    </li>
-  </ul>
-</template>
-
-<script setup lang="ts">
-const { releases, latest } = useReleases();
-const { t } = useI18n();
-
-function summary(release: { features: number; bugFixes: number; breaking: number }) {
-  if (release.features > 0 && release.bugFixes > 0 && release.breaking > 0) {
-    return t("releases.three_parts", {
-      first: t("releases.breaking", { count: release.breaking }),
-      second: t("releases.features", { count: release.features }),
-      third: t("releases.bugFixes", { count: release.bugFixes }),
-    });
-  }
-
-  if (release.features > 0 && release.bugFixes > 0) {
-    return t("releases.two_parts", {
-      first: t("releases.features", { count: release.features }),
-      second: t("releases.bugFixes", { count: release.bugFixes }),
-    });
-  }
-
-  if (release.features > 0 && release.breaking > 0) {
-    return t("releases.two_parts", {
-      first: t("releases.features", { count: release.features }),
-      second: t("releases.breaking", { count: release.breaking }),
-    });
-  }
-
-  if (release.bugFixes > 0 && release.breaking > 0) {
-    return t("releases.two_parts", {
-      first: t("releases.bugFixes", { count: release.bugFixes }),
-      second: t("releases.breaking", { count: release.breaking }),
-    });
-  }
-
-  if (release.features > 0) {
-    return t("releases.features", { count: release.features });
-  }
-
-  if (release.bugFixes > 0) {
-    return t("releases.bugFixes", { count: release.bugFixes });
-  }
-
-  if (release.breaking > 0) {
-    return t("releases.breaking", { count: release.breaking });
-  }
-}
-</script>
-
-<style scoped></style>

assets/components/ScrollableView.vue

@@ -2,7 +2,7 @@
   <section :class="{ 'h-screen min-h-0': scrollable }" class="flex flex-col">
     <header
       v-if="$slots.header"
-      class="border-base-content/10 bg-base-200 sticky top-[55px] z-2 border-b py-2 shadow-[1px_1px_2px_0_rgb(0,0,0,0.05)] md:top-0"
+      class="border-base-content/10 bg-base-200 sticky top-[calc(55px+env(safe-area-inset-top))] z-2 border-b py-2 shadow-[1px_1px_2px_0_rgb(0,0,0,0.05)] md:top-0"
     >
       <slot name="header"></slot>
     </header>
@@ -28,7 +28,7 @@
     <div class="mr-16 text-right">
       <transition name="fade">
         <button
-          class="transition-colorsblur-xs dark btn btn-primary text-primary-content fixed bottom-8 rounded-sm p-3 shadow-sm"
+          class="btn btn-primary text-primary-content fixed bottom-8 rounded-sm p-3 shadow-sm transition-colors"
           :class="hasMore ? 'btn-secondary animate-bounce-fast text-secondary-content' : ''"
           @click="scrollToBottom()"
           v-show="scrollContext.paused"

assets/components/ServiceViewer/ServiceLog.vue

@@ -2,15 +2,8 @@
   <ScrollableView :scrollable="scrollable" v-if="service.name">
     <template #header>
       <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="@container flex flex-1 gap-1.5 truncate md:gap-2">
-          <ph:stack-simple />
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ service.name }}</div>
-          </div>
-          <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
-            {{ $t("label.container", service.containers.length) }}
-          </Tag>
-        </div>
+        <ph:stack-simple />
+        <ContainerDropdown :containers="service.containers">{{ service.name }}</ContainerDropdown>
         <MultiContainerStat class="ml-auto" :containers="service.containers" />
         <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
       </div>

assets/components/SideMenu.vue

@@ -1,10 +1,13 @@
 <template>
   <div v-if="ready" data-testid="side-menu" class="flex min-h-0 flex-col">
     <Carousel v-model="selectedCard" class="flex-1">
-      <CarouselItem title="Hosts and Containers" id="host">
+      <CarouselItem :title="$t('label.host-menu')" id="host">
         <HostMenu />
       </CarouselItem>
-      <CarouselItem title="Services and Stacks" v-if="services.length > 0" id="swarm">
+      <CarouselItem :title="$t('label.group-menu')" v-if="customGroups.length > 0" id="group">
+        <GroupMenu />
+      </CarouselItem>
+      <CarouselItem :title="$t('label.swarm-menu')" v-if="services.length > 0" id="swarm">
         <SwarmMenu />
       </CarouselItem>
     </Carousel>
@@ -20,16 +23,14 @@ const containerStore = useContainerStore();
 const { ready } = storeToRefs(containerStore);
 const route = useRoute();
 const swarmStore = useSwarmStore();
-const { services } = storeToRefs(swarmStore);
-const selectedCard = ref<"host" | "swarm">("host");
+const { services, customGroups } = storeToRefs(swarmStore);
+const selectedCard = ref<"host" | "swarm" | "group">("host");
 
 watch(
   route,
   () => {
-    if (route.meta.swarmMode) {
-      selectedCard.value = "swarm";
-    } else if (route.meta.containerMode) {
-      selectedCard.value = "host";
+    if (route.meta.menu && ["host", "swarm", "group"].includes(route.meta.menu as string)) {
+      selectedCard.value = route.meta.menu as "host" | "swarm" | "group";
     }
   },
   { immediate: true },

assets/components/SidePanel.vue

@@ -1,17 +1,18 @@
 <template>
   <aside class="fixed flex h-screen w-[inherit] flex-col gap-4 p-3" data-testid="navigation">
     <h1>
-      <router-link :to="{ name: '/' }">
-        <LogoWithText class="logo [&_.secondary-fill]:fill-secondary [&_.content-fill]:fill-base-content h-16 w-40" />
+      <router-link :to="{ name: '/' }" class="flex w-full items-center gap-4 overflow-hidden">
+        <Logo class="h-14 w-14 shrink-0" />
+        <span class="bg-gradient-to-r from-[#FFE351] to-[#BF6800] bg-clip-text text-4xl font-thin text-transparent">
+          Dozzle
+        </span>
       </router-link>
 
-      <small class="mb-4 block text-xs font-light" v-if="hostname">
-        {{ hostname }}
-      </small>
+      <small class="mt-4 block text-sm font-light" v-if="hostname">{{ hostname }}</small>
     </h1>
 
     <button
-      class="input input-sm hover:border-primary inline-flex w-auto cursor-pointer items-center gap-2 self-start font-light"
+      class="input input-sm hover:border-primary mt-2 inline-flex w-auto cursor-pointer items-center gap-2 self-start font-light"
       @click="$emit('search')"
       :title="$t('tooltip.search')"
       data-testid="search"
@@ -21,12 +22,12 @@
       <key-shortcut char="k" class="text-base-content/70"></key-shortcut>
     </button>
 
-    <SideMenu class="mt-2 flex-1" />
+    <SideMenu class="flex-1" />
   </aside>
 </template>
 
 <script lang="ts" setup>
-import LogoWithText from "@/logo-text.svg";
+import Logo from "@/logo.svg";
 const { hostname } = config;
 </script>
 

assets/components/StackViewer/StackLog.vue

@@ -2,17 +2,12 @@
   <ScrollableView :scrollable="scrollable" v-if="stack.name">
     <template #header>
       <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="@container flex flex-1 gap-1.5 truncate md:gap-2">
+        <div class="@container flex flex-1 items-center gap-1.5 md:gap-2">
           <ph:stack />
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ stack.name }}</div>
-          </div>
-          <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
+          <div class="font-mono text-sm font-semibold">{{ stack.name }}</div>
+          <ContainerDropdown :containers="stack.containers">
             {{ $t("label.container", stack.containers.length) }}
-          </Tag>
-          <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
-            {{ $t("label.serivce", stack.services.length) }}
-          </Tag>
+          </ContainerDropdown>
         </div>
         <MultiContainerStat class="ml-auto" :containers="stack.containers" />
         <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />

assets/components/SwarmMenu.vue

@@ -28,14 +28,14 @@
       </details>
     </li>
 
-    <li v-if="serivcesWithoutStacks.length > 0">
+    <li v-if="servicesWithoutStacks.length > 0">
       <details open>
         <summary class="text-base-content/80 font-light">
           <ph:circles-four />
           {{ $t("label.services") }}
         </summary>
         <ul>
-          <li v-for="service in serivcesWithoutStacks" :key="service.name">
+          <li v-for="service in servicesWithoutStacks" :key="service.name">
             <router-link :to="{ name: '/service/[name]', params: { name: service.name } }" active-class="menu-active">
               <ph:stack-simple />
               <div class="truncate">
@@ -46,37 +46,13 @@
         </ul>
       </details>
     </li>
-
-    <li v-if="customGroups.length > 0">
-      <details open>
-        <summary class="text-base-content/80 font-light">
-          <ph:bounding-box-fill />
-          {{ $t("label.custom-groups") }}
-        </summary>
-        <ul>
-          <li v-for="group in customGroups" :key="group.name">
-            <router-link :to="{ name: '/group/[name]', params: { name: group.name } }" active-class="menu-active">
-              <ph:stack-simple />
-              <div class="truncate">
-                {{ group.name }}
-              </div>
-            </router-link>
-          </li>
-        </ul>
-      </details>
-    </li>
   </ul>
 </template>
 
 <script lang="ts" setup>
 const store = useSwarmStore();
 
-const { stacks, services, customGroups } = storeToRefs(store);
+const { stacks, services } = storeToRefs(store);
 
-const serivcesWithoutStacks = computed(() => services.value.filter((service) => !service.stack));
+const servicesWithoutStacks = computed(() => services.value.filter((service) => !service.stack));
 </script>
-<style scoped>
-.menu {
-  @apply text-[0.95rem];
-}
-</style>

assets/components/Terminal.vue

@@ -0,0 +1,95 @@
+<template>
+  <aside>
+    <header class="flex items-center gap-4">
+      <material-symbols:terminal class="size-8" />
+      <h1 class="text-2xl max-md:hidden">{{ container.name }}</h1>
+      <h2 class="text-sm">Started <DistanceTime :date="container.created" /></h2>
+    </header>
+
+    <div class="mt-8 flex flex-col gap-2">
+      <section>
+        <div ref="host" class="shell"></div>
+      </section>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { Container } from "@/models/Container";
+import "@xterm/xterm/css/xterm.css";
+const { container, action } = defineProps<{ container: Container; action: "attach" | "exec" }>();
+
+const { Terminal } = await import("@xterm/xterm");
+const { WebLinksAddon } = await import("@xterm/addon-web-links");
+
+const host = useTemplateRef<HTMLDivElement>("host");
+const terminal = new Terminal({
+  cursorBlink: true,
+  cursorStyle: "block",
+});
+terminal.loadAddon(new WebLinksAddon());
+
+let ws: WebSocket | null = null;
+
+onMounted(() => {
+  terminal.open(host.value!);
+  terminal.resize(100, 40);
+  ws = new WebSocket(withBase(`/api/hosts/${container.host}/containers/${container.id}/${action}`));
+  ws.onopen = () => {
+    terminal.writeln(`Attaching to ${container.name} 🚀`);
+    if (action === "attach") {
+      ws?.send("\r");
+    }
+    terminal.onData((data) => {
+      ws?.send(data);
+    });
+    terminal.focus();
+  };
+  ws.onmessage = (event) => terminal.write(event.data);
+  ws.addEventListener("close", () => {
+    terminal.writeln("⚠️ Connection closed");
+  });
+});
+
+onUnmounted(() => {
+  console.log("Closing WebSocket");
+  terminal.dispose();
+  ws?.close();
+});
+</script>
+<style scoped>
+@reference "@/main.css";
+
+.shell {
+  & :deep(.terminal) {
+    @apply overflow-hidden rounded border-1 p-2;
+    &:is(.focus) {
+      @apply border-primary;
+    }
+  }
+
+  & :deep(.xterm-viewport) {
+    @apply bg-base-200!;
+  }
+
+  & :deep(.xterm-rows) {
+    @apply text-base-content;
+  }
+
+  & :deep(.xterm-cursor-block.xterm-cursor-blink) {
+    animation-name: blink !important;
+  }
+}
+
+@keyframes blink {
+  0% {
+    background-color: var(--color-base-content);
+    color: #000000;
+  }
+
+  50% {
+    background-color: inherit;
+    color: var(--color-base-content);
+  }
+}
+</style>

assets/components/common/Carousel.vue

@@ -46,6 +46,16 @@ const scrollToItem = (index: number) => {
 };
 
 const { pause, resume } = watchPausable(activeId, (v) => {
+  if (activeId.value) {
+    const index = cards.value?.map((c) => c.id).indexOf(activeId.value) ?? -1;
+    if (index !== -1) {
+      console.log("watching", activeId.value);
+      scrollToItem(index);
+    }
+  }
+});
+
+watchOnce(cards, () => {
   if (activeId.value) {
     const index = cards.value?.map((c) => c.id).indexOf(activeId.value) ?? -1;
     if (index !== -1) {

assets/components/common/HostIcon.vue

@@ -2,6 +2,7 @@
   <mdi:satellite-variant v-if="type == 'agent'" />
   <ph:globe-simple v-else-if="type == 'remote'" />
   <mdi:hexagon-multiple v-else-if="type == 'swarm'" />
+  <carbon:logo-kubernetes v-else-if="type == 'k8s'" />
   <ph:computer-tower v-else />
 </template>
 <script setup lang="ts">

assets/components/common/MobileMenu.vue

@@ -1,27 +1,29 @@
 <template>
-  <nav class="border-base-content/20 bg-base-200 fixed top-0 z-10 w-full border-b p-2" data-testid="navigation">
-    <div class="flex items-center">
-      <router-link :to="{ name: '/' }">
-        <Logo class="logo [&_.secondary-fill]:fill-secondary h-8" />
-      </router-link>
+  <nav class="border-base-content/20 bg-base-200 pt-safe fixed top-0 z-10 w-full border-b" data-testid="navigation">
+    <div class="p-2">
+      <div class="flex items-center">
+        <router-link :to="{ name: '/' }">
+          <Logo class="h-10" />
+        </router-link>
 
-      <div class="ml-auto flex items-center gap-2">
-        <a class="btn btn-circle flex" @click="$emit('search')" :title="$t('tooltip.search')">
-          <mdi:magnify class="size-5" />
-        </a>
-        <label class="btn btn-circle swap swap-rotate" data-testid="hamburger">
-          <input type="checkbox" v-model="show" />
-          <mdi:close class="swap-on" />
-          <mdi:hamburger-menu class="swap-off" />
-        </label>
+        <div class="ml-auto flex items-center gap-2">
+          <a class="btn btn-circle flex" @click="$emit('search')" :title="$t('tooltip.search')">
+            <mdi:magnify class="size-5" />
+          </a>
+          <label class="btn btn-circle swap swap-rotate" data-testid="hamburger">
+            <input type="checkbox" v-model="show" />
+            <mdi:close class="swap-on" />
+            <mdi:hamburger-menu class="swap-off" />
+          </label>
+        </div>
       </div>
+
+      <transition name="fade">
+        <div v-show="show" class="flex h-[calc(100svh-55px)]">
+          <SideMenu class="flex-1" />
+        </div>
+      </transition>
     </div>
-
-    <transition name="fade">
-      <div v-show="show" class="flex h-[calc(100svh-55px)]">
-        <SideMenu class="flex-1" />
-      </div>
-    </transition>
   </nav>
 </template>
 
@@ -35,7 +37,7 @@ watch(route, () => {
 });
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .fade-enter-active,
 .fade-leave-active {
   @apply transition-opacity;

assets/components/common/SideDrawer.vue

@@ -1,13 +1,18 @@
 <template>
   <dialog ref="panel" class="modal-right modal items-start outline-hidden backdrop:bg-none">
     <div class="modal-box" :width="width">
-      <form method="dialog">
-        <button class="swap swap-rotate hover:swap-active absolute top-4 right-4 outline-hidden">
-          <mdi:keyboard-esc class="swap-off" />
-          <mdi:close class="swap-on" />
-        </button>
-      </form>
-      <slot v-if="open"></slot>
+      <div class="pt-safe relative">
+        <form method="dialog" class="absolute right-0">
+          <button v-if="isMobile">
+            <mdi:close />
+          </button>
+          <button v-else class="swap hover:swap-active outline-hidden">
+            <mdi:keyboard-esc class="swap-off" />
+            <mdi:close class="swap-on" />
+          </button>
+        </form>
+        <slot v-if="open"></slot>
+      </div>
     </div>
     <form method="dialog" class="modal-backdrop">
       <button>close</button>
@@ -33,7 +38,7 @@ defineExpose({
 useEventListener(panel, "close", () => (open.value = false));
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 .modal-right :where(.modal-box) {
   @apply bg-base-100 fixed right-0 h-lvh max-h-screen translate-x-24 scale-100 rounded-none shadow-none;

assets/components/common/ToastModal.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="toast toast-end whitespace-normal max-md:end-auto max-md:m-0 max-md:max-w-full">
+    <div
+      class="alert max-w-xl shadow-sm max-md:rounded-none"
+      v-for="{ toast, options: { timed } } in toasts"
+      :key="toast.id"
+      :class="{
+        'alert-error': toast.type === 'error',
+        'alert-info': toast.type === 'info',
+        'alert-warning': toast.type === 'warning',
+      }"
+    >
+      <carbon:information class="size-6 shrink-0 stroke-current" v-if="toast.type === 'info'" />
+      <carbon:warning class="size-6 shrink-0 stroke-current" v-else-if="toast.type === 'error'" />
+      <carbon:warning class="size-6 shrink-0 stroke-current" v-else-if="toast.type === 'warning'" />
+      <div>
+        <h3 class="text-lg font-bold" v-if="toast.title">{{ toast.title }}</h3>
+        <div v-html="toast.message" class="[&>a]:underline"></div>
+      </div>
+      <div>
+        <TimedButton
+          v-if="timed"
+          class="btn-primary btn-sm"
+          :duration="timed"
+          @finished="
+            removeToast(toast.id);
+            toast.action?.handler();
+          "
+          @cancelled="removeToast(toast.id)"
+        >
+          {{ toast.action?.label }}
+        </TimedButton>
+        <button class="btn btn-circle btn-xs" @click="removeToast(toast.id)" v-else>
+          <mdi:close />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+const { toasts, removeToast } = useToast();
+</script>

assets/composable/profileStorage.ts

@@ -29,7 +29,7 @@ export function useProfileStorage<K extends keyof Profile>(
     if (transformer) {
       storage.value = transformer.from(config.profile[key]);
     } else if (storage.value instanceof Set && config.profile[key] instanceof Array) {
-      storage.value = new Set([...(config.profile[key] as Iterable<any>)]) as unknown as NonNullable<Profile[K]>;
+      storage.value = new Set(config.profile[key] as Iterable<any>) as unknown as NonNullable<Profile[K]>;
     } else if (config.profile[key] instanceof Array) {
       storage.value = config.profile[key] as NonNullable<Profile[K]>;
     } else if (config.profile[key] instanceof Object) {

assets/composable/toast.ts

@@ -4,36 +4,55 @@ type Toast = {
   title?: string;
   message: string;
   type: "success" | "error" | "warning" | "info";
+  action?: {
+    label: string;
+    handler: () => void;
+  };
 };
 
 type ToastOptions = {
   expire?: number;
   once?: boolean;
+  timed?: number;
 };
 
-const toasts = ref<Toast[]>([]);
+const toasts = ref<
+  {
+    toast: Toast;
+    options: ToastOptions;
+  }[]
+>([]);
 
 const showToast = (
   toast: Omit<Toast, "id" | "createdAt"> & { id?: string },
-  { expire = -1, once = false }: ToastOptions = { expire: -1, once: false },
+  { expire = -1, once = false, timed }: ToastOptions = { expire: -1, once: false },
 ) => {
-  if (once && toasts.value.some((t) => t.id === toast.id)) {
+  if (once && !toast.id) {
+    throw new Error("Toast id is required when once is true");
+  }
+  if (once && toasts.value.some((t) => t.toast.id === toast.id)) {
     return;
   }
-  toasts.value.push({
+
+  const toastWithId = {
     id: Date.now().toString(),
-    createdAt: new Date(),
     ...toast,
+    createdAt: new Date(),
+  };
+  toasts.value.push({
+    toast: toastWithId,
+    options: { expire, once, timed },
   });
+
   if (expire > 0) {
     setTimeout(() => {
-      removeToast(toasts.value[0].id);
+      removeToast(toastWithId.id);
     }, expire);
   }
 };
 
 const removeToast = (id: Toast["id"]) => {
-  toasts.value = toasts.value.filter((toast) => toast.id !== id);
+  toasts.value = toasts.value.filter((instance) => instance.toast.id !== id);
 };
 
 export const useToast = () => {

assets/layouts/default.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <mobile-menu v-if="isMobile && !forceMenuHidden" @search="showFuzzySearch"></mobile-menu>
+    <MobileMenu v-if="isMobile && !forceMenuHidden" @search="showFuzzySearch"></MobileMenu>
     <Splitpanes @resized="onResized($event)">
       <Pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav && !forceMenuHidden">
         <SidePanel @search="showFuzzySearch" />
       </Pane>
-      <Pane min-size="10">
+      <Pane min-size="10" :size="100 - menuWidth">
         <Splitpanes>
           <Pane class="router-view min-h-screen">
             <router-view></router-view>
@@ -25,7 +25,7 @@
       </Pane>
     </Splitpanes>
     <label
-      class="btn btn-circle swap bg-base-100 swap-rotate fixed bottom-4 -left-12 w-16 transition-all hover:-left-4"
+      class="btn btn-circle swap bg-base-content/10 swap-rotate border-base-content/20 hover:border-primary fixed bottom-4 -left-12 w-16 shadow-sm transition-all hover:-left-4"
       :class="{ '-left-6!': collapseNav }"
       v-if="!isMobile && !forceMenuHidden"
     >
@@ -34,11 +34,7 @@
       <mdi:chevron-left class="swap-off" />
     </label>
   </div>
-  <dialog
-    ref="modal"
-    class="modal items-start bg-white/20 transition-none backdrop:backdrop-blur-xs"
-    @close="open = false"
-  >
+  <dialog ref="modal" class="modal bg-base-300/50! items-start backdrop-blur-md transition-none!" @close="open = false">
     <div class="modal-box max-w-2xl bg-transparent pt-20 shadow-none">
       <FuzzySearchModal @close="open = false" v-if="open" />
     </div>
@@ -52,29 +48,7 @@
       <template #fallback> Loading dependencies... </template>
     </Suspense>
   </SideDrawer>
-  <div class="toast toast-end whitespace-normal">
-    <div
-      class="alert max-w-xl"
-      v-for="toast in toasts"
-      :key="toast.id"
-      :class="{
-        'alert-error': toast.type === 'error',
-        'alert-info': toast.type === 'info',
-        'alert-warning': toast.type === 'warning',
-      }"
-    >
-      <carbon:information class="size-6 shrink-0 stroke-current" v-if="toast.type === 'info'" />
-      <carbon:warning class="size-6 shrink-0 stroke-current" v-else-if="toast.type === 'error'" />
-      <carbon:warning class="size-6 shrink-0 stroke-current" v-else-if="toast.type === 'warning'" />
-      <div>
-        <h3 class="text-lg font-bold" v-if="toast.title">{{ toast.title }}</h3>
-        <div v-html="toast.message" class="[&>a]:underline"></div>
-      </div>
-      <div>
-        <button class="btn btn-circle btn-xs" @click="removeToast(toast.id)"><mdi:close /></button>
-      </div>
-    </div>
-  </div>
+  <ToastModal />
 </template>
 
 <script lang="ts" setup>
@@ -86,7 +60,6 @@ import SideDrawer from "@/components/common/SideDrawer.vue";
 const pinnedLogsStore = usePinnedLogsStore();
 const { pinnedLogs } = storeToRefs(pinnedLogsStore);
 
-const { toasts, removeToast } = useToast();
 const drawer = useTemplateRef<InstanceType<typeof SideDrawer>>("drawer") as Ref<InstanceType<typeof SideDrawer>>;
 const { component: drawerComponent, properties: drawerProperties, width: drawerWidth } = createDrawer(drawer);
 
@@ -114,18 +87,18 @@ function showFuzzySearch() {
   open.value = true;
 }
 
-function onResized(e: any) {
-  if (e.length == 2) {
-    menuWidth.value = e[0].size;
+function onResized({ panes }: { panes: { size: number }[] }) {
+  if (panes.length == 2) {
+    menuWidth.value = Math.min(panes[0].size, 50);
   }
 }
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 :deep(.splitpanes--vertical > .splitpanes__splitter) {
-  @apply bg-base-100 hover:bg-secondary min-w-[3px];
+  @apply bg-base-100 hover:bg-secondary min-w-[5px];
 }
 
 @media screen and (max-width: 768px) {

assets/layouts/splash.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="hero min-h-dvh">
+  <div class="hero max-h-500:pt-4 min-h-dvh content-start pt-[20dvh]">
     <div class="hero-content">
       <router-view></router-view>
     </div>

assets/logo-text.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 396 114"><path class="secondary-fill" d="M89.408 46.477a6.49 6.49 0 0 0-6.488 6.49 6.488 6.488 0 1 0 12.978 0 6.49 6.49 0 0 0-6.49-6.49m-42.836 0a6.49 6.49 0 1 0 0 12.98 6.49 6.49 0 0 0 0-12.98M28.5 38.295a6.5 6.5 0 0 1-1.897-4.593 6.474 6.474 0 0 1 6.49-6.49c1.663 0 3.327.631 4.592 1.896l-1.517 1.12a51.67 51.67 0 0 1 31.822-10.91c11.999 0 23.028 4.078 31.823 10.91L98.3 29.113a6.47 6.47 0 0 1 4.592-1.897c1.659 0 3.324.63 4.588 1.897a6.52 6.52 0 0 1 1.892 4.593 6.47 6.47 0 0 1-1.892 4.594l1.514 1.113c21.944 21.942-15.406 31.822-15.406 31.822H42.392c-1.077 0-38.88-8.35-15.406-31.822zM102.214 94.411a7.894 7.894 0 0 1-7.894-7.895 7.893 7.893 0 1 1 15.787 0 7.89 7.89 0 0 1-7.893 7.895M37.355 95.13a7.894 7.894 0 0 1-7.895-7.896 7.894 7.894 0 0 1 7.895-7.893 7.894 7.894 0 0 1 7.896 7.893 7.894 7.894 0 0 1-7.896 7.895M44.372 72.866h47.402s-22.981 7.899-47.402 0"/><path class="content-fill" d="M142 79.928V33.446h13.836c3.571 0 6.886.574 9.947 1.786 3.06 1.147 5.675 2.805 7.779 4.846 4.272 4.144 6.822 10.01 6.822 16.514 0 3.379-.637 6.567-1.913 9.5-1.275 2.933-3.06 5.356-5.228 7.396-4.4 4.017-10.648 6.44-17.407 6.44zm4.91-41.89v37.3h8.735c3.889 0 7.332-.83 10.265-2.423 2.997-1.595 5.356-3.762 6.95-6.568 1.658-2.805 2.487-6.057 2.487-9.628 0-5.292-1.977-10.01-5.356-13.39-3.315-3.315-8.48-5.292-14.346-5.292zm86.587 18.554c0 4.4-1.02 8.416-2.997 12.05q-3.06 5.452-8.416 8.608c-3.634 2.104-7.588 3.188-12.051 3.188-3.252 0-6.312-.637-9.245-1.849-2.869-1.211-5.356-2.869-7.397-5.037-2.04-2.04-3.634-4.527-4.845-7.46-1.148-2.933-1.786-5.993-1.786-9.245q0-6.6 3.061-12.051c1.976-3.635 4.782-6.568 8.416-8.672C201.808 34.02 205.825 33 210.224 33c3.252 0 6.313.574 9.246 1.785 2.869 1.276 5.356 2.933 7.396 4.974 2.04 2.168 3.698 4.654 4.846 7.523 1.211 2.934 1.785 5.994 1.785 9.31m-5.037.255c0-5.229-1.913-10.075-5.101-13.581s-7.97-5.739-13.326-5.739c-3.443 0-6.567.893-9.373 2.55-2.805 1.786-4.973 4.081-6.503 6.95q-2.296 4.4-2.296 9.565c0 5.164 1.913 10.074 5.101 13.517 3.188 3.507 7.97 5.739 13.262 5.739 3.444 0 6.568-.893 9.373-2.615 2.87-1.657 5.037-4.017 6.568-6.886 1.53-2.87 2.295-6.057 2.295-9.5m43.932 18.618v4.463h-33.539v-4.463l27.672-37.555H239.81v-4.464h32.454v4.464l-27.8 37.555zm38.192 0v4.463h-33.538v-4.463l27.672-37.555h-26.715v-4.464h32.454v4.464l-27.8 37.555zm8.927 4.463V33.446h4.91v41.891h22.061v4.591zm34.622 0V33.446h29.075v4.527h-24.165v16.068h22.125v4.527h-22.125v16.833h24.42v4.527z"/></svg>

assets/main.css

@@ -11,6 +11,16 @@
   --color-orange: oklch(70% 0.186 48.13);
 }
 
+@utility pt-safe {
+  padding-top: env(safe-area-inset-top);
+}
+
+@custom-variant max-h-500 {
+  @media (max-height: 500px) {
+    @slot;
+  }
+}
+
 @plugin "daisyui/theme" {
   name: "dark";
   default: false;
@@ -107,7 +117,7 @@
 @utility menu-active {
   &,
   &:active {
-    --color-neutral: var(--color-primary);
+    --menu-active-bg: var(--color-primary);
   }
 }
 
@@ -126,3 +136,10 @@
     }
   }
 }
+
+body {
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}

assets/models/Container.ts

@@ -38,6 +38,8 @@ export class Container {
     public readonly host: string,
     public readonly labels = {} as Record<string, string>,
     public state: ContainerState,
+    public readonly cpuLimit: number,
+    public readonly memoryLimit: number,
     stats: Stat[],
     public readonly group?: string,
     public health?: ContainerHealth,

assets/pages/container/[id].vue

@@ -11,15 +11,18 @@
 </template>
 
 <script lang="ts" setup>
+import { type Container } from "@/models/Container";
 const route = useRoute("/container/[id]");
 const id = toRef(() => route.params.id);
-
 const containerStore = useContainerStore();
 const currentContainer = containerStore.currentContainer(id);
 const { ready } = storeToRefs(containerStore);
-
 const pinnedLogsStore = usePinnedLogsStore();
 const { pinnedLogs } = storeToRefs(pinnedLogsStore);
+const { containers: allContainers } = storeToRefs(containerStore) as unknown as { containers: Ref<Container[]> };
+const { showToast } = useToast();
+const { t } = useI18n();
+const router = useRouter();
 
 watchEffect(() => {
   if (ready.value) {
@@ -30,8 +33,50 @@ watchEffect(() => {
     }
   }
 });
+
+const redirectTrigger = ref(false);
+watch(currentContainer, () => (redirectTrigger.value = false));
+
+watchEffect(() => {
+  if (redirectTrigger.value) return;
+  if (!currentContainer.value) return;
+  if (currentContainer.value.state === "running") return;
+  if (Date.now() - +currentContainer.value.finishedAt > 5 * 60 * 1000) return;
+
+  const nextContainer = allContainers.value
+    .filter((c) => c.startedAt > currentContainer.value.startedAt && c.name === currentContainer.value.name)
+    .sort((a, b) => +a.created - +b.created)[0];
+
+  if (!nextContainer) return;
+
+  if (automaticRedirect.value) {
+    redirectTrigger.value = true;
+    showToast(
+      {
+        title: t("alert.similar-container-found.title"),
+        message: t("alert.similar-container-found.message", { containerId: nextContainer.id }),
+        type: "info",
+        action: {
+          label: t("button.cancel"),
+          handler: () => {
+            showToast(
+              {
+                title: t("alert.redirected.title"),
+                message: t("alert.redirected.message", { containerId: nextContainer.id }),
+                type: "info",
+              },
+              { expire: 5000 },
+            );
+            router.push({ name: "/container/[id]", params: { id: nextContainer.id } });
+          },
+        },
+      },
+      { timed: 4000 },
+    );
+  }
+});
 </script>
 <route lang="yaml">
 meta:
-  containerMode: true
+  menu: host
 </route>

assets/pages/group/[name].vue

@@ -22,5 +22,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  swarmMode: true
+  menu: group
 </route>

assets/pages/host/[id].vue

@@ -26,5 +26,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  containerMode: true
+  menu: host
 </route>

assets/pages/login.vue

@@ -4,7 +4,7 @@
       <form action="" method="post" @submit.prevent="onLogin" ref="form" class="flex flex-col gap-8">
         <label class="form-control w-full">
           <label
-            class="input floating-label input-bordered has-[:focus]:input-primary flex items-center gap-2 border-2"
+            class="input input-lg floating-label input-bordered has-[:focus]:input-primary flex w-full items-center gap-2 border-2"
             :class="{ 'input-error': error }"
           >
             <span class="ml-5">{{ $t("label.username") }}</span>
@@ -28,7 +28,7 @@
         </label>
         <label class="form-control w-full">
           <label
-            class="input floating-label input-bordered has-[:focus]:input-primary flex items-center gap-2 border-2"
+            class="input input-lg floating-label input-bordered has-[:focus]:input-primary flex w-full items-center gap-2 border-2"
           >
             <span class="ml-5">{{ $t("label.password") }}</span>
             <mdi:key class="has-[+:focus]:text-primary" />
@@ -44,7 +44,7 @@
           </label>
         </label>
 
-        <button class="btn btn-primary uppercase" type="submit" :disabled="loading">
+        <button class="btn btn-primary mt-2 uppercase" type="submit" :disabled="loading">
           <span class="loading loading-spinner" v-if="loading"></span>
           {{ $t("button.login") }}
         </button>

assets/pages/merged/[ids].vue

@@ -22,5 +22,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  containerMode: true
+  menu: host
 </route>

assets/pages/service/[name].vue

@@ -28,5 +28,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  swarmMode: true
+  menu: swarm
 </route>

assets/pages/settings.vue

@@ -8,8 +8,8 @@
       <div>
         <span v-html="$t('settings.using-version', { version: config.version })"></span>
         <div
-          v-if="hasUpdate"
-          v-html="$t('settings.update-available', { nextVersion: latest?.name, href: latest?.htmlUrl })"
+          v-if="hasRelease"
+          v-html="$t('settings.update-available', { nextVersion: latestRelease?.name, href: latestRelease?.htmlUrl })"
         ></div>
       </div>
     </section>
@@ -154,7 +154,7 @@ import { availableLocales, i18n } from "@/modules/i18n";
 const { t } = useI18n();
 
 setTitle(t("title.settings"));
-const { latest, hasUpdate } = useReleases();
+const { latestRelease, hasRelease } = useAnnouncements();
 
 const now = new Date();
 const hoursAgo = (hours: number) => {
@@ -206,7 +206,7 @@ const fakeMessages = computedWithControl(
 );
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 .has-underline {
   @apply border-base-content/50 mb-4 border-b py-4;

assets/pages/stack/[name].vue

@@ -28,5 +28,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  swarmMode: true
+  menu: swarm
 </route>

assets/stores/announcements.ts

@@ -0,0 +1,37 @@
+type Announcement = {
+  name: string;
+  announcement: boolean;
+  createdAt: Date;
+  body: string;
+  tag: string;
+  htmlUrl: string;
+  latest: boolean;
+  mentionsCount: number;
+  features: number;
+  bugFixes: number;
+  breaking: number;
+};
+
+const { data: releases } = useFetch(withBase("/api/releases")).get().json<Announcement[]>();
+
+const otherAnnouncements = [] as Announcement[];
+
+const announcements = computed(() => {
+  const newReleases =
+    releases.value?.map((release) => ({ ...release, createdAt: new Date(release.createdAt), announcement: false })) ??
+    [];
+  return [...newReleases, ...otherAnnouncements].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+});
+
+const mostRecent = computed(() => announcements.value?.[0]);
+const latestRelease = computed(() => announcements.value?.find((release) => release.latest && !release.announcement));
+const hasRelease = computed(() => latestRelease.value !== undefined);
+
+export function useAnnouncements() {
+  return {
+    mostRecent,
+    announcements,
+    latestRelease,
+    hasRelease,
+  };
+}

assets/stores/config.ts

@@ -11,6 +11,7 @@ export interface Config {
   hosts: Host[];
   authProvider: "simple" | "none" | "forward-proxy";
   enableActions: boolean;
+  enableShell: boolean;
   user?: {
     username: string;
     email: string;

assets/stores/container.ts

@@ -154,6 +154,8 @@ export const useContainerStore = defineStore("container", () => {
           c.host,
           c.labels,
           c.state,
+          c.cpuLimit,
+          c.memoryLimit,
           c.stats,
           c.group,
           c.health,

assets/stores/hosts.ts

@@ -3,7 +3,7 @@ export type Host = {
   name: string;
   nCPU: number;
   memTotal: number;
-  type: "agent" | "local" | "remote" | "swarm";
+  type: "agent" | "local" | "remote" | "swarm" | "k8s";
   endpoint: string;
   available: boolean;
   dockerVersion: string;

assets/stores/releases.ts

@@ -1,29 +0,0 @@
-const { data: releases } = useFetch(withBase("/api/releases")).get().json<
-  {
-    name: string;
-    mentionsCount: number;
-    createdAt: string;
-    body: string;
-    tag: string;
-    htmlUrl: string;
-    latest: boolean;
-    features: number;
-    bugFixes: number;
-    breaking: number;
-  }[]
->();
-
-const hasUpdate = computed(() => {
-  if (!releases.value?.length) return false;
-  return releases.value[0].tag !== config.version;
-});
-
-const latest = computed(() => releases.value?.find((release) => release.latest));
-
-export function useReleases() {
-  return {
-    hasUpdate,
-    latest,
-    releases,
-  };
-}

assets/types/Container.d.ts

@@ -16,6 +16,8 @@ export type ContainerJson = {
   readonly status: string;
   readonly state: ContainerState;
   readonly host: string;
+  readonly cpuLimit: number;
+  readonly memoryLimit: number;
   readonly labels: Record<string, string>;
   readonly stats: ContainerStat[];
   readonly health?: ContainerHealth;

assets/utils/index.ts

@@ -1,10 +1,19 @@
-export function formatBytes(bytes: number, decimals = 2) {
+export function formatBytes(
+  bytes: number,
+  { decimals = 2, short = false }: { decimals?: number; short?: boolean } = { decimals: 2, short: false },
+) {
   if (bytes === 0) return "0 Bytes";
   const k = 1024;
   const dm = decimals < 0 ? 0 : decimals;
   const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+
+  const value = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+  if (short) {
+    return value + sizes[i].charAt(0);
+  } else {
+    return value + " " + sizes[i];
+  }
 }
 
 export function getDeep(obj: Record<string, any>, path: string[]) {

docker-compose.yml

@@ -30,6 +30,7 @@ services:
       - DOZZLE_FILTER=name=dozzle
       - DOZZLE_NO_ANALYTICS=1
       - DOZZLE_HOSTNAME=localhost
+      - DOZZLE_LEVEL=debug
     ports:
       - 7070:8080
     build:
@@ -94,7 +95,7 @@ services:
 
   playwright:
     container_name: playwright
-    image: mcr.microsoft.com/playwright:v1.49.1-jammy
+    image: mcr.microsoft.com/playwright:v1.52.0-jammy
     working_dir: /app
     volumes:
       - .:/app

docs/.vitepress/config.ts

@@ -59,11 +59,20 @@ export default defineConfig({
           { text: "Getting Started", link: "/guide/getting-started" },
         ],
       },
+      {
+        text: "Platforms",
+        items: [
+          { text: "Swarm", link: "/guide/swarm-mode" },
+          { text: "K8s", link: "/guide/k8s" },
+          { text: "Podman", link: "/guide/podman" },
+        ],
+      },
       {
         text: "Advanced Configuration",
         items: [
           { text: "Authentication", link: "/guide/authentication" },
           { text: "Actions", link: "/guide/actions" },
+          { text: "Shell Access", link: "/guide/shell" },
           { text: "Agent Mode", link: "/guide/agent" },
           { text: "Changing Base", link: "/guide/changing-base" },
           { text: "Container Names", link: "/guide/container-names" },
@@ -73,8 +82,6 @@ export default defineConfig({
           { text: "Filters", link: "/guide/filters" },
           { text: "Healthcheck", link: "/guide/healthcheck" },
           { text: "Remote Hosts", link: "/guide/remote-hosts" },
-          { text: "Swarm Mode", link: "/guide/swarm-mode" },
-          { text: "Supported Env Vars", link: "/guide/supported-env-vars" },
           { text: "Logging Files on Disk", link: "/guide/log-files-on-disk" },
           { text: "SQL Engine", link: "/guide/sql-engine" },
         ],
@@ -84,6 +91,7 @@ export default defineConfig({
         items: [
           { text: "FAQ", link: "/guide/faq" },
           { text: "Debugging", link: "/guide/debugging" },
+          { text: "Supported Env Vars", link: "/guide/supported-env-vars" },
         ],
       },
       {

docs/.vitepress/theme/components/Banner.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="banner fixed top-0 right-0 left-0 z-(--vp-z-index-layout-top) flex items-center overflow-hidden bg-[oklch(74%_0.16_232.661)] p-4 font-bold text-gray-800 dark:bg-[oklch(60%_0.126_221.723)] dark:text-white"
+  >
+    <div class="mx-auto flex items-center gap-2 lg:gap-4">
+      <span class="animate-bounce">🚀</span>K8s users, I need your help! I have added K8s support to Dozzle and I need
+      your feedback! 🙏
+      <a
+        href="https://github.com/amir20/dozzle/discussions/3614"
+        target="_blank"
+        class="btn btn-sm btn-primary text-white!"
+      >
+        See the discussion
+      </a>
+    </div>
+    <button class="btn btn-circle btn-ghost btn-xs ml-auto" @click="dismiss">
+      <svg class="swap-on fill-current" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512">
+        <polygon
+          points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+<script setup>
+import { onMounted } from "vue";
+const dismiss = () => {
+  localStorage.setItem("banner-dismissed", (Date.now() + 8.64e7 * 1).toString());
+  document.documentElement.classList.add("banner-dismissed");
+};
+
+onMounted(() => {
+  if (new Date(+localStorage.getItem("banner-dismissed")) > Date.now()) {
+    document.documentElement.classList.add("banner-dismissed");
+  }
+});
+</script>
+<style>
+.banner-dismissed {
+  --vp-layout-top-height: 0px !important;
+}
+@media (min-width: 375px) {
+  html {
+    --vp-layout-top-height: 100px;
+  }
+}
+@media (min-width: 768px) {
+  html {
+    --vp-layout-top-height: 63px;
+  }
+}
+</style>
+<style scoped>
+.banner-dismissed .banner {
+  display: none;
+}
+</style>

docs/.vitepress/theme/components/Stats.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="stats mt-10">
+  <div class="stats stats-horizontal mt-10">
     <div class="stat w-40 border-0!">
-      <div class="stat-title">Github Stars</div>
+      <div class="stat-title text-(--vp-c-text-1)">Github Stars</div>
       <div class="stat-value">
         <Counter :start="0" :end="data.stars" :duration="1000" :formatter="(value) => (value / 1e3).toFixed(1) + 'K'" />
       </div>
     </div>
 
     <div class="stat">
-      <div class="stat-title">Docker Pulls</div>
+      <div class="stat-title text-(--vp-c-text-1)">Docker Pulls</div>
       <div class="stat-value">
         <Counter :start="0" :end="data.pulls" :duration="1000" :formatter="(value) => (value / 1e6).toFixed(0) + 'M'" />
       </div>

docs/.vitepress/theme/index.ts

@@ -7,6 +7,8 @@ import "./style.css";
 import HeroVideo from "./components/HeroVideo.vue";
 import BuyMeCoffee from "./components/BuyMeCoffee.vue";
 import Stats from "./components/Stats.vue";
+import Banner from "./components/Banner.vue";
+import Supported from "./components/Supported.vue";
 
 export default {
   ...DefaultTheme,
@@ -15,6 +17,8 @@ export default {
       "home-hero-image": () => h(HeroVideo),
       "sidebar-nav-after": () => h(BuyMeCoffee),
       "home-hero-actions-after": () => h(Stats),
+      // "layout-top": () => h(Banner),
+      "home-hero-after": () => h(Supported),
     });
   },
   enhanceApp(ctx) {

docs/.vitepress/theme/style.css

@@ -1,6 +1,17 @@
 @import "tailwindcss";
+@variant dark (&:where(.dark, .dark *));
+
 @plugin "daisyui" {
-  include: stat;
+  include: stat, button;
+  themes: light --default;
+}
+@plugin "daisyui/theme" {
+  name: "light";
+  default: true;
+  --depth: 0;
+  --noise: 0;
+  --radius-field: 2rem;
+  --color-primary: var(--vp-button-brand-bg);
 }
 
 /**

docs/components.d.ts

@@ -2,16 +2,19 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Banner: typeof import('./.vitepress/theme/components/Banner.vue')['default']
     BuyMeCoffee: typeof import('./.vitepress/theme/components/BuyMeCoffee.vue')['default']
     Counter: typeof import('./.vitepress/theme/components/Counter.vue')['default']
     HeroVideo: typeof import('./.vitepress/theme/components/HeroVideo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Stats: typeof import('./.vitepress/theme/components/Stats.vue')['default']
+    Supported: typeof import('./.vitepress/theme/components/Supported.vue')['default']
   }
 }

docs/guide/actions.md

@@ -4,9 +4,7 @@ title: Container Actions
 
 # Using Container Actions
 
-Dozzle now supports **Container Actions**, which allows you to `start`, `stop` and `restart` containers from within the UI in the dropdown menu.
-
-This feature is **disabled** by default and can be enabled by setting the environment variable `DOZZLE_ENABLE_ACTIONS` to `true`.
+Dozzle supports container actions, which allows you to `start`, `stop` and `restart` containers from the dropdown menu on the right next to the container stats. This feature is **disabled** by default and can be enabled by setting the environment variable `DOZZLE_ENABLE_ACTIONS` to `true`.
 
 ::: code-group
 

docs/guide/agent.md

@@ -2,7 +2,7 @@
 title: Agent Mode
 ---
 
-# Agent Mode
+# Agent Mode <Badge type="warning" text="Docker Only" />
 
 Dozzle can run in agent mode which can expose Docker hosts to other Dozzle instances. All communication is done over a secured connection using TLS. This means that you can deploy Dozzle on a remote host and connect to it from your local machine.
 
@@ -64,10 +64,21 @@ Note that when connecting remotely, you don't need to mount local Docker socket.
 > [!TIP]
 > You can connect to multiple agents by providing multiple `DOZZLE_REMOTE_AGENT` environment variables. For example, `DOZZLE_REMOTE_AGENT=agent1:7007,agent2:7007`.
 
-> [!WARNING]
-> Dozzle uses the Docker API to gather information about hosts. Each agent needs a unique host ID. They use Docker's system ID or node ID to identify the host. If you are using swarm, then the node ID is used. If you don't see all hosts, then you may have duplicate hosts configured that have the same host ID. To fix this, remove `/var/lib/docker/engine-id` file. See [FAQ](/guide/faq#i-am-seeing-duplicate-hosts-error-in-the-logs-how-do-i-fix-it) for more information.
+## Common Issues
 
-## Setting Up Healthcheck
+### Agent Not Showing Up
+
+If you are seeing `An agent with an existing ID was found. Removing the duplicate host.` then you have two hosts that use the same Server ID.
+
+Dozzle utilizes the Docker API to collect information about hosts. Each agent requires a unique host ID that remains consistent across restarts to ensure proper identification. Currently, agents identify the host using either Docker's system ID or node ID.
+
+If you are operating in a Swarm environment, the node ID will be employed for this purpose. However, if you notice that not all hosts are visible, it may be due to the presence of duplicate hosts configured with the same host ID.
+
+To resolve this issue, you should remove `/var/lib/docker/engine-id` from your system and restart. This action will help eliminate any conflicts caused by duplicate host IDs. For additional information and troubleshooting tips, please refer to the [FAQ](/guide/faq#i-am-seeing-duplicate-hosts-error-in-the-logs-how-do-i-fix-it).
+
+## Advanced Options
+
+### Setting Up Healthcheck
 
 You can set a healthcheck for the agent, similar to the healthcheck for the main Dozzle instance. When running in agent mode, healthcheck checks agent connection to Docker. If Docker is not reachable, the agent will be marked as unhealthy and will not be shown in the UI.
 
@@ -90,7 +101,7 @@ services:
       - 7007:7007
 ```
 
-## Changing Agent's Name
+### Changing Agent's Name
 
 Similar to Dozzle instance, you can change the agent's name by providing the `DOZZLE_HOSTNAME` environment variable. Here is an example:
 
@@ -117,7 +128,7 @@ services:
 
 This will change the agent's name to `my-special-name` and will be reflected on the UI when connecting to the agent.
 
-## Setting Up Filters
+### Setting Up Filters
 
 You can set up filters for the agent to limit the containers it can access. These filters are passed directly to Docker, restricting what Dozzle can view.
 
@@ -134,7 +145,7 @@ services:
 
 This will restrict the agent to displaying only containers with the label `color`. Keep in mind that these filters are combined with the UI filters to narrow down the containers. To learn more about the different types of filters, read the [filters documentation](/guide/filters#ui-agents-and-user-filters).
 
-## Custom Certificates
+### Custom Certificates
 
 By default, Dozzle uses self-signed certificates for communication between agents. This is a private certificate which is only valid to other Dozzle instances. This is secure and recommended for most use cases. However, if Dozzle is exposed externally and an attacker knows exactly which port the agent is running on, then they can set up their own Dozzle instance and connect to the agent. To prevent this, you can provide your own certificates.
 
@@ -169,7 +180,7 @@ This will mount the `cert.pem` and `key.pem` files to the agent. The agent will
 To generate certificates, you can use the following command:
 
 ```sh
-$ openssl genpkey -algorithm RSA -out key.pem -pkeyopt rsa_keygen_bits:2048
+$ openssl genpkey -algorithm Ed25519 -out key.pem
 $ openssl req -new -key key.pem -out request.csr -subj "/C=US/ST=California/L=San Francisco/O=My Company"
 $ openssl x509 -req -in request.csr -signkey key.pem -out cert.pem -days 365
 ```

docs/guide/authentication.md

@@ -10,7 +10,12 @@ If you do not have an authentication solution, then Dozzle has a simple file-bas
 
 ## File-Based User Management
 
-Dozzle supports multi-user authentication by setting `--auth-provider` to `simple`. In this mode, Dozzle will try to read `/data/users.yml`.
+Dozzle supports multi-user authentication by setting `--auth-provider` to `simple`. In this mode, Dozzle will attempt to read the users file from `/data/`, prioritizing `users.yml` over `users.yaml` if both files are present. If only one of the files exists, it will be used. The log will indicate which file is being read (e.g., `Reading users.yml file`).
+
+### Example file paths:
+
+- `/data/users.yml`
+- `/data/users.yaml`
 
 The content of the file looks like:
 
@@ -20,7 +25,7 @@ users:
   admin:
     email: me@email.net
     name: Admin
-    # Generate with docker run amir20/dozzle generate --name Admin --email me@email.net --password secret admin
+    # Generate with docker run run -it --rm amir20/dozzle generate --name Admin --email me@email.net --password secret admin
     password: $2a$11$9ho4vY2LdJ/WBopFcsAS0uORC0x2vuFHQgT/yBqZyzclhHsoaIkzK
     filter:
 ```
@@ -28,7 +33,7 @@ users:
 Dozzle uses `email` to generate avatars using [Gravatar](https://gravatar.com/). It is optional. The password is hashed using `bcrypt` which can be generated using `docker run amir20/dozzle generate`.
 
 > [!WARNING]
-> In previous versions of Dozzle, SHA-256 was used to hash passwords. Bcrypt is now more secure and is recommended for future use. Dozzle will revert to SHA-256 if it does not find a bcrypt hash. It is advisable to update the password hash to bcrypt using `docker run amir20/dozzle generate`. For more details, see [this issue](https://github.com/amir20/dozzle/security/advisories/GHSA-w7qr-q9fh-fj35).
+> In previous versions of Dozzle, SHA-256 was used to hash passwords. Bcrypt is now more secure and is recommended for future use. Dozzle will revert to SHA-256 if it does not find a bcrypt hash. It is advisable to update the password hash to bcrypt using `generate`. For more details, see [this issue](https://github.com/amir20/dozzle/security/advisories/GHSA-w7qr-q9fh-fj35).
 
 You will need to mount this file for Dozzle to find it. Here is an example:
 
@@ -139,10 +144,10 @@ In this example, the `admin` user has no filter, so they can see all containers.
 Dozzle has a built-in `generate` command to generate `users.yml`. Here is an example:
 
 ```sh
-docker run amir20/dozzle generate admin --password password --email test@email.net --name "John Doe" --user-filter name=foo > users.yml
+docker run -it --rm amir20/dozzle generate admin --password password --email test@email.net --name "John Doe" --user-filter name=foo > users.yml
 ```
 
-In this example, `admin` is the username. Email and name are optional but recommended to display accurate avatars. `docker run amir20/dozzle generate --help` displays all options. The `--user-filter` flag is a comma-separated list of filters.
+In this example, `admin` is the username. Email and name are optional but recommended to display accurate avatars. `docker run -it --rm amir20/dozzle generate --help` displays all options. The `--user-filter` flag is a comma-separated list of filters.
 
 ## Forward Proxy
 

docs/guide/changing-base.md

@@ -42,5 +42,8 @@ location ^~ /foobar/ {
     chunked_transfer_encoding off;
     proxy_buffering off;
     proxy_cache off;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
 }
 ```

docs/guide/getting-started.md

@@ -4,9 +4,12 @@ title: Getting Started
 
 # Getting Started
 
-Dozzle supports multiple ways to run the application. You can run it using Docker CLI, Docker Compose, or in Swarm. The following sections will guide you through the process of setting up Dozzle.
+Dozzle supports multiple ways to run the application. You can run it using Docker CLI, Docker Compose, Swarm, or Kubernetes. The following sections will guide you through the process of setting up Dozzle.
 
-## Running with Docker <Badge type="tip" text="Updated" />
+> [!TIP]
+> If Docker Hub is blocked in your network, you can use the [GitHub Container Registry](https://ghcr.io/amir20/dozzle:latest) to pull the image. Use `ghcr.io/amir20/dozzle:latest` instead of `amir20/dozzle:latest`.
+
+## Standalone Docker
 
 The easiest way to set up Dozzle is to use the CLI and mount `docker.sock` file. This file is usually located at `/var/run/docker.sock` and can be mounted with the `--volume` flag. You also need to expose the port to view Dozzle. By default, Dozzle listens on port 8080, but you can change the external port using `-p`. You can also run using compose or as a service in Swarm.
 
@@ -27,6 +30,14 @@ services:
       - 8080:8080
 ```
 
+:::
+
+Dozzle also supports connecting to remote agents to monitor multiple Docker hosts. See [agent](/guide/agent) to learn more.
+
+## Docker Swarm
+
+Dozzle supports running in Swarm mode by deploying it on every node. To run Dozzle in Swarm mode, you can use the following configuration:
+
 ```yaml [dozzle-stack.yml]
 # Run with docker stack deploy -c dozzle-stack.yml <name>
 services:
@@ -47,9 +58,82 @@ networks:
     driver: overlay
 ```
 
-:::
+Then you can deploy the stack using the following command:
 
-See [swarm mode](/guide/swarm-mode) for more information on running Dozzle in Swarm.
+```bash
+docker stack deploy -c dozzle-stack.yml <name>
+```
 
-> [!TIP]
-> If Docker Hub is blocked in your network, you can use the [GitHub Container Registry](https://ghcr.io/amir20/dozzle:latest) to pull the image. Use `ghcr.io/amir20/dozzle:latest` instead of `amir20/dozzle:latest`.
+See [swarm mode](/guide/swarm-mode) for more information.
+
+## K8s <Badge type="tip" text="New" />
+
+Dozzle supports running in Kubernetes. It only needs to be deployed on one node within the cluster.
+
+```yaml [k8s-dozzle.yml]
+# rbac.yaml
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: pod-viewer
+---
+# clusterrole.yaml
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRole
+metadata:
+  name: pod-viewer-role
+rules:
+  - apiGroups: [""]
+    resources: ["pods", "pods/log", "nodes"]
+    verbs: ["get", "list", "watch"]
+  - apiGroups: ["metrics.k8s.io"]
+    resources: ["pods"]
+    verbs: ["get", "list"]
+---
+# clusterrolebinding.yaml
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRoleBinding
+metadata:
+  name: pod-viewer-binding
+subjects:
+  - kind: ServiceAccount
+    name: pod-viewer
+    namespace: default
+roleRef:
+  kind: ClusterRole
+  name: pod-viewer-role
+  apiGroup: rbac.authorization.k8s.io
+---
+# deployment.yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: dozzle
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: dozzle
+  template:
+    metadata:
+      labels:
+        app: dozzle
+    spec:
+      serviceAccountName: pod-viewer
+      containers:
+        - name: dozzle
+          image: amir20/dozzle:latest
+          ports:
+            - containerPort: 8080
+          env:
+            - name: DOZZLE_MODE
+              value: "k8s"
+```
+
+Then apply the configuration using the following command:
+
+```bash
+kubectl apply -f k8s-dozzle.yml
+```
+
+See [Kubernetes mode](/guide/k8s) for more information.

docs/guide/k8s.md

@@ -0,0 +1,174 @@
+---
+title: Kubernetes Support
+---
+
+# Kubernetes Support <Badge type="warning" text="beta" /> <Badge type="tip" text="v8.11.x" />
+
+Dozzle now supports Kubernetes, allowing you to view logs from your Kubernetes pods. This feature is available in `v8.11` version of Dozzle.
+
+## Kubernetes Setup
+
+To set up Dozzle in Kubernetes, you can use the following YAML configuration using `DOZZLE_MODE=k8s`. This configuration includes a deployment and a service to expose Dozzle.
+
+```yaml
+# rbac.yaml
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: pod-viewer
+---
+# clusterrole.yaml
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRole
+metadata:
+  name: pod-viewer-role
+rules:
+  - apiGroups: [""]
+    resources: ["pods", "pods/log", "nodes"]
+    verbs: ["get", "list", "watch"]
+  - apiGroups: ["metrics.k8s.io"]
+    resources: ["pods"]
+    verbs: ["get", "list"]
+---
+# clusterrolebinding.yaml
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRoleBinding
+metadata:
+  name: pod-viewer-binding
+subjects:
+  - kind: ServiceAccount
+    name: pod-viewer
+    namespace: default
+roleRef:
+  kind: ClusterRole
+  name: pod-viewer-role
+  apiGroup: rbac.authorization.k8s.io
+---
+# deployment.yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: dozzle
+spec:
+  selector:
+    matchLabels:
+      app: dozzle
+  template:
+    metadata:
+      labels:
+        app: dozzle
+    spec:
+      serviceAccountName: pod-viewer
+      containers:
+        - name: dozzle
+          image: amir20/dozzle:latest
+          ports:
+            - containerPort: 8080
+          env:
+            - name: DOZZLE_MODE
+              value: "k8s"
+---
+# service.yaml
+apiVersion: v1
+kind: Service
+metadata:
+  name: dozzle-service
+spec:
+  type: ClusterIP
+  selector:
+    app: dozzle
+  ports:
+    - port: 8080
+      targetPort: 8080
+      protocol: TCP
+```
+
+This configuration creates a service account, a cluster role, and a cluster role binding to allow Dozzle to access the necessary Kubernetes resources. It also creates a deployment for Dozzle and exposes it via a service.
+
+All other features are supported as well, including authentication, filtering, and more. You can use the same environment variables as you would in Docker to configure Dozzle in Kubernetes.
+
+> [!NOTE]
+> Dozzle in Kubernetes is a new feature and may have some limitations compared to the Docker version. Please use this [discussion](https://github.com/amir20/dozzle/discussions/3614) to report any issues or suggestions for improvement.
+
+## Metrics API
+
+Dozzle relies on the [Kubernetes Metrics API](https://github.com/kubernetes-sigs/metrics-server) to retrieve resource usage information. The API can be installed using the following command:
+
+```bash
+kubectl apply -f https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/components.yaml
+```
+
+To verify that the API is running, you can run the following command:
+
+```bash
+kubectl top pod
+```
+
+For now this is required to use Dozzle in Kubernetes.
+
+## Namespaces and Filters
+
+### Namespaces
+
+By default, Dozzle will monitor all namespaces in the cluster. If you want to restrict Dozzle to a specific namespace, you can set the `DOZZLE_NAMESPACE` environment variable to the name of the namespace.
+
+```yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: dozzle
+spec:
+  selector:
+    matchLabels:
+      app: dozzle
+  template:
+    metadata:
+      labels:
+        app: dozzle
+    spec:
+      serviceAccountName: pod-viewer
+      containers:
+        - name: dozzle
+          image: amir20/dozzle:latest
+          ports:
+            - containerPort: 8080
+          env:
+            - name: DOZZLE_MODE
+              value: "k8s"
+            - name: DOZZLE_NAMESPACE
+              value: "default"
+```
+
+> [!NOTE]
+> Dozzle supports multiple namespaces, you can set the `DOZZLE_NAMESPACES` environment variable to a comma separated list of namespaces. When multiple namespaces are specified, Dozzle will monitor each namespace separately and combine the results.
+
+### Labels and Filters
+
+`DOZZLE_FILTER` behave similarlty to Docker filters. You can limit the scope of Dozzle using the `DOZZLE_FILTER` environment variable. For example, to scope only to `env=prod`:
+
+```yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: dozzle
+spec:
+  selector:
+    matchLabels:
+      app: dozzle
+  template:
+    metadata:
+      labels:
+        app: dozzle
+    spec:
+      serviceAccountName: pod-viewer
+      containers:
+        - name: dozzle
+          image: amir20/dozzle:latest
+          ports:
+            - containerPort: 8080
+          env:
+            - name: DOZZLE_MODE
+              value: "k8s"
+            - name: DOZZLE_FILTER
+              value: "env=prod"
+```

docs/guide/log-files-on-disk.md

@@ -37,6 +37,6 @@ services:
 
 :::
 
-In the above example, `/var/log/system.log` is mounted from the host and used with `tail -f` to follow the file. `tail` is smart to follow log rotations. During testing, using Alpine only uses about `300KB` of memory.
+In the above example, `/var/log/system.log` is mounted from the host and used with `tail -f` to follow the file. `tail` is smart to follow log rotations. During testing, using Alpine used about `~50KB` of memory.
 
 The second tab shows a `docker-compose` file which is useful if you want the log stream to survive server reboot.

docs/guide/podman.md

@@ -2,6 +2,10 @@
 title: Podman
 ---
 
+# Podman
+
+Dozzle supports Podman. However, there are some issues with Podman that might prevent Dozzle from working properly. One of the main issues is that Podman doesn't create an engine-id like Docker.
+
 ## I am seeing host not found error in the logs. How do I fix it?
 
 This should be mainly a Podman only error: Using Podman doesn't create an engine-id like Docker.

docs/guide/remote-hosts.md

@@ -9,7 +9,7 @@ Dozzle supports connecting to remote Docker hosts. This is useful when running D
 However, with Dozzle agents, you can connect to remote hosts without exposing the Docker socket. See the [agent](/guide/agent) page for more information.
 
 > [!WARNING]
-> Remote hosts have been replaced with agents. Agents provide a more secure way to connect to remote hosts. Although remote hosts are still supported, it is recommended to use agents. See the [agent](/guide/agent) page for more information and examples. For comparison, see the [comparing agents with remote connections](/guide/agent#comparing-agents-with-remote-connection) section.
+> Remote hosts have been replaced with agents. Agents provide a more secure way to connect to remote hosts. Although remote hosts are still supported, it is recommended to use agents. See the [agent](/guide/agent) page for more information and examples. For comparison, see the [comparing agents with remote connections](/guide/agent#comparing-agents-with-remote-connection) section. I won't be able to investigate user's issues with remote hosts as it is very time consuming.
 
 ## Connecting to Remote Hosts with TLS
 
@@ -45,7 +45,7 @@ services:
 If you are in a private network, then you can use [Docker Socket Proxy](https://github.com/Tecnativa/docker-socket-proxy) which exposes `docker.sock` file without the need for TLS. Dozzle will never try to write to Docker but it will need access to list APIs. The following command will start a proxy with minimal access:
 
 ```sh
-docker container run --privileged -e CONTAINERS=1 -e INFO=1 -v /var/run/docker.sock:/var/run/docker.sock -p 2375:2375 tecnativa/docker-socket-proxy
+$ docker container run --privileged -e CONTAINERS=1 -e INFO=1 -v /var/run/docker.sock:/var/run/docker.sock -p 2375:2375 tecnativa/docker-socket-proxy
 ```
 
 > [!TIP]
@@ -53,12 +53,28 @@ docker container run --privileged -e CONTAINERS=1 -e INFO=1 -v /var/run/docker.s
 
 Running Dozzle without any certificates should work. Here is an example:
 
-```sh
-docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle --remote-host tcp://123.1.1.1:2375
+::: code-group
+
+```sh [cli]
+$ docker run -p 8080:8080 amir20/dozzle --remote-host tcp://123.1.1.1:2375
 ```
 
+```yaml [docker-compose.yml]
+services:
+  dozzle:
+    image: amir20/dozzle:latest
+    ports:
+      - 8080:8080
+    environment:
+      DOZZLE_REMOTE_HOST: tcp://123.1.1.1:2375
+```
+
+:::
+
+When using remote host, mounting `/var/run/docker.sock` is optional. You need to have at least one remote host to connect to.
+
 > [!WARNING]
-> Docker Socket Proxy is not recommended for production use. It is only for private networks.
+> Docker Socket Proxy exposes the Docker API to the internet. This can be a security risk if not properly secured.
 
 ## Adding Labels to Hosts