chore: release v6.6.0

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

.github/workflows/deploy.yml

@@ -29,9 +29,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v4
+        uses: actions/setup-go@v5
         with:
-          go-version: 1.20.x
+          go-version: 1.22.x
+          check-latest: true
       - name: Checkout code
         uses: actions/checkout@v4
       - name: Run Go Tests with Coverage
@@ -66,7 +67,7 @@ jobs:
             *.cache-to=type=gha,mode=max
       - name: Run Playwright tests
         run: docker compose up --exit-code-from playwright
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
@@ -83,14 +84,14 @@ jobs:
         with:
           images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+        uses: docker/setup-buildx-action@d70bba72b1f3fd22344832f00baa16ece964efeb # v3.3.0
       - name: Login to DockerHub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push
-        uses: docker/build-push-action@v5.0.0
+        uses: docker/build-push-action@v5.3.0
         with:
           push: true
           platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8

.github/workflows/dev.yml

@@ -18,14 +18,14 @@ jobs:
         with:
           images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+        uses: docker/setup-buildx-action@d70bba72b1f3fd22344832f00baa16ece964efeb # v3.3.0
       - name: Login to DockerHub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push
-        uses: docker/build-push-action@v5.0.0
+        uses: docker/build-push-action@v5.3.0
         with:
           push: true
           platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8

.github/workflows/pages.yml

@@ -1,5 +1,3 @@
-# Sample workflow for building and deploying a VitePress site to GitHub Pages
-#
 name: Deploy VitePress site to Pages
 
 on:
@@ -36,7 +34,7 @@ jobs:
           node-version: latest
           cache: pnpm # or pnpm / yarn
       - name: Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v5
       - name: Install dependencies
         run: pnpm install
       - name: Build with VitePress
@@ -44,7 +42,7 @@ jobs:
           pnpm docs:build
           touch docs/.vitepress/dist/.nojekyll
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: docs/.vitepress/dist
 
@@ -59,4 +57,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/test.yml

@@ -52,13 +52,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v4
+        uses: actions/setup-go@v5
         with:
-          go-version: 1.20.x
+          go-version: 1.22.x
+          check-latest: true
       - name: Checkout code
         uses: actions/checkout@v4
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
+      - name: Stactic checker
+        uses: dominikh/staticcheck-action@v1.3.1
+        with:
+          install-go: false
   int-test:
     name: Integration Tests
     timeout-minutes: 60
@@ -89,7 +94,7 @@ jobs:
             *.cache-to=type=gha,mode=max
       - name: Run Playwright tests
         run: docker compose up --exit-code-from playwright
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

.gitignore

@@ -1,5 +1,5 @@
 certs
-data
+/data
 dist
 node_modules
 .cache

.reflex

@@ -1 +1 @@
--r '\.(go)$' -R 'node_modules' -G '\*\_test.go' -s -- go run main.go --level debug
+-r '\.(go)$' -R 'node_modules' -G '\*\_test.go' -s -- go run -race main.go --level debug

Dockerfile

@@ -1,5 +1,5 @@
 # Build assets
-FROM --platform=$BUILDPLATFORM node:21-alpine as node
+FROM --platform=$BUILDPLATFORM node:21.7.3-alpine as node
 
 RUN corepack enable
 
@@ -14,7 +14,7 @@ COPY package.json ./
 RUN pnpm install --offline --ignore-scripts --no-optional
 
 # Copy assets and translations to build
-COPY .* *.config.ts *.config.js ./
+COPY .* *.config.ts *.config.js *.config.cjs ./
 COPY assets ./assets
 COPY locales ./locales
 COPY public ./public
@@ -22,7 +22,7 @@ COPY public ./public
 # Build assets
 RUN pnpm build
 
-FROM --platform=$BUILDPLATFORM golang:1.21.3-alpine AS builder
+FROM --platform=$BUILDPLATFORM golang:1.22.3-alpine AS builder
 
 RUN apk add --no-cache ca-certificates && mkdir /dozzle
 

Makefile

@@ -15,7 +15,7 @@ fake_assets:
 
 .PHONY: test
 test: fake_assets
-	go test -cover ./...
+	go test -cover -race ./...
 
 .PHONY: build
 build: dist

README.md

@@ -15,29 +15,27 @@ https://user-images.githubusercontent.com/260667/227634771-9ebbe381-16a8-465a-b2
 - Search logs using regex 🔦
 - Small memory footprint 🏎
 - Split screen for viewing multiple logs
-- Download logs easy
+- Download logs easily
 - Live stats with memory and CPU usage
-- Authentication with username and password 🚨
+- Multi-user authentication with support for proxy forward authorization 🚨
 
-Dozzle should work for most. It has been tested with hundreds of containers. However, it doesn't support offline searching. Products like [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana) are more suited for full search capabilities.
+Dozzle has been tested with hundreds of containers. However, it doesn't support offline searching. Products like [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana) are more suited for full search capabilities.
 
-Dozzle doesn't cost any money and aims to focus on real-time debugging.
+## Getting Started
 
-## Getting Dozzle
-
-Dozzle is a very small Docker container (4 MB compressed). Pull the latest release from the index:
+Dozzle is a small container (4 MB compressed). Pull the latest release with:
 
     $ docker pull amir20/dozzle:latest
 
-## Using Dozzle
+### Running Dozzle
 
 The simplest way to use dozzle is to run the docker container. Also, mount the Docker Unix socket with `--volume` to `/var/run/docker.sock`:
 
-    $ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:8080 amir20/dozzle:latest
+    $ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock:ro -p 8888:8080 amir20/dozzle:latest
 
-Dozzle will be available at [http://localhost:8888/](http://localhost:8888/). You can change `-p 8888:8080` to any port. For example, if you want to view dozzle over port 4040 then you would do `-p 4040:8080`.
+Dozzle will be available at [http://localhost:8888/](http://localhost:8888/).
 
-### Connecting with Docker compose
+Here is the Docker Compose file:
 
     version: "3"
     services:
@@ -45,182 +43,81 @@ Dozzle will be available at [http://localhost:8888/](http://localhost:8888/). Yo
         container_name: dozzle
         image: amir20/dozzle:latest
         volumes:
-          - /var/run/docker.sock:/var/run/docker.sock
+          - /var/run/docker.sock:/var/run/docker.sock:ro
         ports:
-          - 9999:8080
+          - 8888:8080
 
-### Connecting to remote hosts
+For advanced options like [authentication](https://dozzle.dev/guide/authentication), [remote hosts](https://dozzle.dev/guide/remote-hosts) or common [questions](https://dozzle.dev/guide/faq) see documentation at [dozzle.dev](https://dozzle.dev/guide/getting-started).
 
-Dozzle supports connecting to multiple remote hosts via `tcp://` using TLS or without. Appropriate certs need to be mounted for Dozzle to be able to successfully connect. At this point, `ssh://` is not supported because Dozzle docker image does not ship with any ssh clients.
+## Technical Details
 
-To configure remote hosts, `--remote-host` or `DOZZLE_REMOTE_HOST` need to provided and the `pem` files need to be mounted to `/cert` directory. The `/cert` directory expects to have `/certs/{ca,cert,key}.pem` or `/certs/{host}/{ca,cert,key}.pem` in case of multiple hosts.
+Dozzle users automatic API negotiation which works with most Docker configurations. Dozzle also works with [Colima](https://github.com/abiosoft/colima) and [Podman](https://podman.io/).
 
-Below are examples of using `--remote-host` via CLI:
+### Installation on podman
 
-    $ docker run -v /var/run/docker.sock:/var/run/docker.sock -v /path/to/certs:/certs -p 8080:8080 amir20/dozzle --remote-host tcp://167.99.1.1:2376
+By default Podman doesn't have a background process but you can enable this for Dozzle to work.
 
-Multiple `--remote-host` flags can be used to specify multiple hosts.
+Verify first if your podman installation has enabled remote socket:
 
-Or to use compose:
+```
+podman info
+```
 
-    version: "3"
-    services:
-      dozzle:
-        image: amir20/dozzle:latest
-        volumes:
-          - /var/run/docker.sock:/var/run/docker.sock
-          - /path/to/certs:/certs
-        ports:
-          - 8080:8080
-        environment:
-          DOZZLE_REMOTE_HOST: tcp://167.99.1.1:2376,tcp://167.99.1.2:2376
+When you get under the key remote socket output like this, its already enabled:
 
-You need to make sure appropriate certs are provided in `/certs/167.99.1.1/{ca,cert,key}.pem` and `/certs/167.99.1.2/{ca,cert,key}.pem` for both hosts to work.
+```
+  remoteSocket:
+    exists: true
+    path: /run/user/1000/podman/podman.sock
+```
 
-### Adding health check
+If it's not enabled please follow [this tutorial](https://github.com/containers/podman/blob/main/docs/tutorials/socket_activation.md) to enable it.
 
-Dozzle doesn't enable healthcheck by default as it adds extra CPU usage. `healthcheck` can be enabled manually.
+Once you have the podman remote socket you can run Dozzle on podman.
 
-    version: "3"
-    services:
-      dozzle:
-        container_name: dozzle
-        image: amir20/dozzle:latest
-        volumes:
-          - /var/run/docker.sock:/var/run/docker.sock
-        ports:
-          - 8080:8080
-        environment:
-          DOZZLE_LEVEL: trace
-        healthcheck:
-          test: [ "CMD", "/dozzle", "healthcheck" ]
-          interval: 3s
-          timeout: 30s
-          retries: 5
-          start_period: 30s
+```
+podman run --volume=/run/user/1000/podman/podman.sock:/var/run/docker.sock:ro -d -p 8888:8080 amir20/dozzle:latest
+```
 
-#### Security
+## Security
 
-You can control the device Dozzle binds to by passing `--addr` parameter. For example,
+Dozzle supports file based authentication and forward proxy like [Authelia](https://www.authelia.com/). These are documented at https://dozzle.dev/guide/authentication.
 
-    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --addr localhost:1224
-
-will bind to `localhost` on port `1224`. You can then use a reverse proxy to control who can see dozzle.
-
-If you wish to restrict the containers shown you can pass the `--filter` parameter. For example,
-
-    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --filter name=foo
-
-this would then only allow you to view containers with a name starting with "foo". You can use other filters like `status` as well, please check the official docker [command line docs](https://docs.docker.com/engine/reference/commandline/ps/#filtering) for available filters. Multiple `--filter` arguments can be provided.
-
-#### Authentication
-
-Dozzle supports a very simple authentication out of the box with just username and password. You should deploy using SSL to keep the credentials safe. See configuration to use `--username` and `--password`. You can also use [docker secrets](https://docs.docker.com/engine/swarm/secrets/) `--usernamefile` and `--passwordfile`.
-
-#### Changing base URL
-
-Dozzle by default mounts to "/". If you want to control the base path you can use the `--base` option. For example, if you want to mount at "/foobar",
-then you can override by using `--base /foobar`. See env variables below for using `DOZZLE_BASE` to change this.
-
-    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle:latest --base /foobar
-
-Dozzle will be available at [http://localhost:8080/foobar/](http://localhost:8080/foobar/).
-
-#### Analytics collected
+## Analytics collected
 
 Dozzle collects anonymous user configurations using Google Analytics. Why? Dozzle is an open source project with no funding. As a result, there is no time to do user studies of Dozzle. Analytics is collected to prioritize features and fixes based on how people use Dozzle. This data is completely public and can be viewed live using [ Data Studio dashboard](https://datastudio.google.com/s/naeIu0MiWsY).
 
 If you do not want to be tracked at all, see the `--no-analytics` flag below.
 
-#### Environment variables and configuration
+## 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`  |
-| `--filter`       | `DOZZLE_FILTER`        | `""`    |
-| `--username`     | `DOZZLE_USERNAME`      | `""`    |
-| `--password`     | `DOZZLE_PASSWORD`      | `""`    |
-| `--usernamefile` | `DOZZLE_USERNAME_FILE` | `""`    |
-| `--passwordfile` | `DOZZLE_PASSWORD_FILE` | `""`    |
-| `--no-analytics` | `DOZZLE_NO_ANALYTICS`  | false   |
-| `--remote-host`  | `DOZZLE_REMOTE_HOST`   |         |
+| 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          |
+| `--wait-for-docker-seconds` | `DOZZLE_WAIT_FOR_DOCKER_SECONDS` | 0              |
+| `--filter`                  | `DOZZLE_FILTER`                  | `""`           |
+| `--no-analytics`            | `DOZZLE_NO_ANALYTICS`            | false          |
+| `--remote-host`             | `DOZZLE_REMOTE_HOST`             |                |
 
-## Troubleshooting and FAQs
+## Support
 
-<details>
- <summary>I installed Dozzle, but logs are slow or they never load. Help!</summary>
+There are many ways you can support Dozzle:
 
-Dozzle uses Server Sent Events (SSE) which connects to a server using a HTTP stream without closing the connection. If any proxy tries to buffer this connection, then Dozzle never receives the data and hangs forever waiting for the reverse proxy to flush the buffer. Since version `1.23.0`, Dozzle sends the `X-Accel-Buffering: no` header which should stop reverse proxies buffering. However, some proxies may ignore this header. In those cases, you need to explicitly disable any buffering.
+- Use it! Write about it! Star it! If you love Dozzle, drop me a line and tell me what you love.
+- Blog about Dozzle to spread the word. If you are good at writing send PRs to improve the documentation at [dozzle.dev](https://dozzle.dev/)
+- Sponsor my work at https://www.buymeacoffee.com/amirraminfar
 
-Below is an example with nginx and using `proxy_pass` to disable buffering.
-
-```
-    server {
-        ...
-
-        location / {
-            proxy_pass                  http://<dozzle.container.ip.address>:8080;
-        }
-
-        location /api {
-            proxy_pass                  http://<dozzle.container.ip.address>:8080;
-
-            proxy_buffering             off;
-            proxy_cache                 off;
-        }
-    }
-
-```
-
-</details>
-
-<details>
- <summary>What data does Dozzle collect?</summary>
-
-Dozzle does collect some analytics. Analytics is anonymous usage tracking of the features which are used the most. See the section above on how to disable any analytic collection.
-
-In the browser, Dozzle has a [strict](https://github.com/amir20/dozzle/blob/master/web/csp.go#L9) Content Security Policy which only allows the following policies:
-
-- Allow connect to `api.github.com` to fetch most recent version.
-- Only allow `<script>` and `<style>` files from `self`
-
-Dozzle opens all links with `rel="noopener"`.
-
-</details>
-
-<details>
- <summary>We have tools that uses Dozzle when a new container is created. How can I get a direct link to a container by name?</summary>
-
-Dozzle has a [special route](https://github.com/amir20/dozzle/blob/master/assets/pages/Show.vue) that can be used to search containers by name and then forward to that container. For example, if you have a container with name `"foo.bar"` and id `abc123`, you can send your users to `/show?name=foo.bar` which will be forwarded to `/container/abc123`.
-
-</details>
-
-<details>
- <summary>I installed Dozzle but memory consumption doesn't show up!</summary>
-
-_This is an issue specific to ARM devices_
-
-Dozzle uses the Docker API to gather information about the containers' memory usage. If the memory usage is not showing up, then it is likely that the Docker API is not returning the memory usage.
-
-You can verify this by running `docker info`, and you should see the following:
-
-```
-WARNING: No memory limit support
-WARNING: No swap limit support
-```
-
-In this case, you'll need to add the following line to your `/boot/cmdline.txt` file and reboot your device.
-
-```
-cgroup_enable=cpuset cgroup_enable=memory cgroup_memory=1
-```
-
-</details>
+<a href="https://www.buymeacoffee.com/amirraminfar" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
 
 ## License
 
@@ -232,6 +129,6 @@ To Build and test locally:
 
 1. Install [NodeJs](https://nodejs.org/en/download/) and [pnpm](https://pnpm.io/installation).
 2. Install [Go](https://go.dev/doc/install).
-3. Install [reflex](https://github.com/cespare/reflex) with `go get -u github.com/cespare/reflex` outside of dozzle.
+3. Install [reflex](https://github.com/cespare/reflex) with `go install github.com/cespare/reflex@latest`.
 4. Install node modules `pnpm install`.
 5. Do `pnpm dev`

assets/App.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script lang="ts" setup>
+const mode = useColorMode();
 watchEffect(() => {
   if (smallerScrollbars.value) {
     document.documentElement.classList.add("has-custom-scrollbars");
@@ -10,16 +11,11 @@ watchEffect(() => {
     document.documentElement.classList.remove("has-custom-scrollbars");
   }
 
-  switch (lightTheme.value) {
-    case "dark":
-      document.documentElement.setAttribute("data-theme", "dark");
-      break;
-    case "light":
-      document.documentElement.setAttribute("data-theme", "light");
-      break;
-    default:
-      document.documentElement.removeAttribute("data-theme");
+  let theme = lightTheme.value;
+  if (theme === "auto") {
+    theme = mode.value;
   }
+  document.documentElement.setAttribute("data-theme", theme);
 });
 </script>
 <style lang="postcss">

assets/auto-imports.d.ts

@@ -20,28 +20,28 @@ declare global {
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const automaticRedirect: typeof import('./stores/settings')['automaticRedirect']
   const collapseNav: typeof import('./stores/settings')['collapseNav']
+  const compact: typeof import('./stores/settings')['compact']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
   const config: typeof import('./stores/config')['default']
-  const containerContext: typeof import('./composables/containerContext')['containerContext']
+  const containerContext: typeof import('./composable/containerContext')['containerContext']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
   const createApp: typeof import('vue')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
-  const createGenericProjection: typeof import('@vueuse/math')['createGenericProjection']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createPinia: typeof import('pinia')['createPinia']
-  const createProjection: typeof import('@vueuse/math')['createProjection']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
+  const dateLocale: typeof import('./stores/settings')['dateLocale']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
@@ -56,23 +56,22 @@ declare global {
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const getDeep: typeof import('./utils/index')['getDeep']
-  const globalShowPopup: typeof import('./composables/popup')['globalShowPopup']
+  const globalShowPopup: typeof import('./composable/popup')['globalShowPopup']
   const h: typeof import('vue')['h']
   const hourStyle: typeof import('./stores/settings')['hourStyle']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
   const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDefined: typeof import('@vueuse/core')['isDefined']
-  const isMobile: typeof import('./composables/media')['isMobile']
+  const isMobile: typeof import('./composable/media')['isMobile']
   const isObject: typeof import('./utils/index')['isObject']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const lightTheme: typeof import('./stores/settings')['lightTheme']
-  const logicAnd: typeof import('@vueuse/math')['logicAnd']
-  const logicNot: typeof import('@vueuse/math')['logicNot']
-  const logicOr: typeof import('@vueuse/math')['logicOr']
+  const locale: typeof import('./stores/settings')['locale']
+  const logSearchContext: typeof import('./composable/logSearchContext')['logSearchContext']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const mapActions: typeof import('pinia')['mapActions']
   const mapGetters: typeof import('pinia')['mapGetters']
@@ -102,10 +101,10 @@ declare global {
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
-  const persistentVisibleKeys: typeof import('./composables/storage')['persistentVisibleKeys']
-  const pinnedContainers: typeof import('./composables/storage')['pinnedContainers']
+  const persistentVisibleKeys: typeof import('./composable/storage')['persistentVisibleKeys']
+  const pinnedContainers: typeof import('./composable/storage')['pinnedContainers']
   const provide: typeof import('vue')['provide']
-  const provideContainerContext: typeof import('./composables/containerContext')['provideContainerContext']
+  const provideContainerContext: typeof import('./composable/containerContext')['provideContainerContext']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
@@ -124,10 +123,10 @@ declare global {
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
   const search: typeof import('./stores/settings')['search']
-  const sessionHost: typeof import('./composables/storage')['sessionHost']
+  const sessionHost: typeof import('./composable/storage')['sessionHost']
   const setActivePinia: typeof import('pinia')['setActivePinia']
   const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
-  const setTitle: typeof import('./composables/title')['setTitle']
+  const setTitle: typeof import('./composable/title')['setTitle']
   const settings: typeof import('./stores/settings')['settings']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
@@ -159,7 +158,6 @@ declare global {
   const unref: typeof import('vue')['unref']
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
-  const useAbs: typeof import('@vueuse/math')['useAbs']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
   const useAnimate: typeof import('@vueuse/core')['useAnimate']
   const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
@@ -177,7 +175,6 @@ declare global {
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
-  const useAverage: typeof import('@vueuse/math')['useAverage']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
   const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
@@ -185,13 +182,13 @@ declare global {
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
-  const useCeil: typeof import('@vueuse/math')['useCeil']
-  const useClamp: typeof import('@vueuse/math')['useClamp']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
-  const useContainerContext: typeof import('./composables/containerContext')['useContainerContext']
+  const useContainerActions: typeof import('./composable/containerActions')['useContainerActions']
+  const useContainerContext: typeof import('./composable/containerContext')['useContainerContext']
   const useContainerStore: typeof import('./stores/container')['useContainerStore']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
@@ -226,7 +223,6 @@ declare global {
   const useFetch: typeof import('@vueuse/core')['useFetch']
   const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
   const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
-  const useFloor: typeof import('@vueuse/math')['useFloor']
   const useFocus: typeof import('@vueuse/core')['useFocus']
   const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
   const useFps: typeof import('@vueuse/core')['useFps']
@@ -234,6 +230,7 @@ declare global {
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useHead: typeof import('@vueuse/head')['useHead']
+  const useHosts: typeof import('./stores/hosts')['useHosts']
   const useI18n: typeof import('vue-i18n')['useI18n']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
@@ -245,16 +242,14 @@ declare global {
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
   const useLink: typeof import('vue-router')['useLink']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
-  const useLogStream: typeof import('./composables/eventsource')['useLogStream']
+  const useLogSearchContext: typeof import('./composable/logSearchContext')['useLogSearchContext']
+  const useLogStream: typeof import('./composable/eventsource')['useLogStream']
   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
   const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
-  const useMath: typeof import('@vueuse/math')['useMath']
-  const useMax: typeof import('@vueuse/math')['useMax']
   const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
-  const useMin: typeof import('@vueuse/math')['useMin']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -274,18 +269,17 @@ declare global {
   const usePointer: typeof import('@vueuse/core')['usePointer']
   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
-  const usePrecision: typeof import('@vueuse/math')['usePrecision']
   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
   const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
   const usePrevious: typeof import('@vueuse/core')['usePrevious']
-  const useProjection: typeof import('@vueuse/math')['useProjection']
+  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 useRound: typeof import('@vueuse/math')['useRound']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
@@ -293,10 +287,11 @@ declare global {
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
   const useScroll: typeof import('@vueuse/core')['useScroll']
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
-  const useSearchFilter: typeof import('./composables/search')['useSearchFilter']
+  const useSearchFilter: typeof import('./composable/search')['useSearchFilter']
   const useSeoMeta: typeof import('@vueuse/head')['useSeoMeta']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
+  const useSimpleRefHistory: typeof import('./utils/index')['useSimpleRefHistory']
   const useSlots: typeof import('vue')['useSlots']
   const useSorted: typeof import('@vueuse/core')['useSorted']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
@@ -305,7 +300,6 @@ declare global {
   const useStorage: typeof import('@vueuse/core')['useStorage']
   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
-  const useSum: typeof import('@vueuse/math')['useSum']
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
@@ -323,17 +317,16 @@ declare global {
   const useTitle: typeof import('@vueuse/core')['useTitle']
   const useToNumber: typeof import('@vueuse/core')['useToNumber']
   const useToString: typeof import('@vueuse/core')['useToString']
-  const useToast: typeof import('./composables/toast')['useToast']
+  const useToast: typeof import('./composable/toast')['useToast']
   const useToggle: typeof import('@vueuse/core')['useToggle']
   const useTransition: typeof import('@vueuse/core')['useTransition']
-  const useTrunc: typeof import('@vueuse/math')['useTrunc']
   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
   const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
   const useVModel: typeof import('@vueuse/core')['useVModel']
   const useVModels: typeof import('@vueuse/core')['useVModels']
   const useVibrate: typeof import('@vueuse/core')['useVibrate']
   const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
-  const useVisibleFilter: typeof import('./composables/visible')['useVisibleFilter']
+  const useVisibleFilter: typeof import('./composable/visible')['useVisibleFilter']
   const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
   const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
   const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
@@ -364,10 +357,12 @@ declare global {
 declare global {
   // @ts-ignore
   export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
     readonly $: UnwrapRef<typeof import('vue/macros')['$']>
@@ -384,13 +379,14 @@ declare module 'vue' {
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly automaticRedirect: UnwrapRef<typeof import('./stores/settings')['automaticRedirect']>
     readonly collapseNav: UnwrapRef<typeof import('./stores/settings')['collapseNav']>
+    readonly compact: UnwrapRef<typeof import('./stores/settings')['compact']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
     readonly config: UnwrapRef<typeof import('./stores/config')['default']>
-    readonly containerContext: UnwrapRef<typeof import('./composables/containerContext')['containerContext']>
+    readonly containerContext: UnwrapRef<typeof import('./composable/containerContext')['containerContext']>
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
@@ -404,6 +400,7 @@ declare module 'vue' {
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly dateLocale: UnwrapRef<typeof import('./stores/settings')['dateLocale']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
@@ -418,20 +415,21 @@ declare module 'vue' {
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getDeep: UnwrapRef<typeof import('./utils/index')['getDeep']>
-    readonly globalShowPopup: UnwrapRef<typeof import('./composables/popup')['globalShowPopup']>
+    readonly globalShowPopup: UnwrapRef<typeof import('./composable/popup')['globalShowPopup']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly hourStyle: UnwrapRef<typeof import('./stores/settings')['hourStyle']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
-    readonly isMobile: UnwrapRef<typeof import('./composables/media')['isMobile']>
+    readonly isMobile: UnwrapRef<typeof import('./composable/media')['isMobile']>
     readonly isObject: UnwrapRef<typeof import('./utils/index')['isObject']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
     readonly lightTheme: UnwrapRef<typeof import('./stores/settings')['lightTheme']>
+    readonly locale: UnwrapRef<typeof import('./stores/settings')['locale']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
@@ -461,10 +459,10 @@ declare module 'vue' {
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
-    readonly persistentVisibleKeys: UnwrapRef<typeof import('./composables/storage')['persistentVisibleKeys']>
-    readonly pinnedContainers: UnwrapRef<typeof import('./composables/storage')['pinnedContainers']>
+    readonly persistentVisibleKeys: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeys']>
+    readonly pinnedContainers: UnwrapRef<typeof import('./composable/storage')['pinnedContainers']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    readonly provideContainerContext: UnwrapRef<typeof import('./composables/containerContext')['provideContainerContext']>
+    readonly provideContainerContext: UnwrapRef<typeof import('./composable/containerContext')['provideContainerContext']>
     readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
@@ -483,10 +481,10 @@ declare module 'vue' {
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
     readonly search: UnwrapRef<typeof import('./stores/settings')['search']>
-    readonly sessionHost: UnwrapRef<typeof import('./composables/storage')['sessionHost']>
+    readonly sessionHost: UnwrapRef<typeof import('./composable/storage')['sessionHost']>
     readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
     readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
-    readonly setTitle: UnwrapRef<typeof import('./composables/title')['setTitle']>
+    readonly setTitle: UnwrapRef<typeof import('./composable/title')['setTitle']>
     readonly settings: UnwrapRef<typeof import('./stores/settings')['settings']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
@@ -543,10 +541,12 @@ declare module 'vue' {
     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
-    readonly useContainerContext: UnwrapRef<typeof import('./composables/containerContext')['useContainerContext']>
+    readonly useContainerActions: UnwrapRef<typeof import('./composable/containerActions')['useContainerActions']>
+    readonly useContainerContext: UnwrapRef<typeof import('./composable/containerContext')['useContainerContext']>
     readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
@@ -588,6 +588,7 @@ declare module 'vue' {
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
     readonly useHead: UnwrapRef<typeof import('@vueuse/head')['useHead']>
+    readonly useHosts: UnwrapRef<typeof import('./stores/hosts')['useHosts']>
     readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
@@ -599,7 +600,8 @@ declare module 'vue' {
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
     readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
-    readonly useLogStream: UnwrapRef<typeof import('./composables/eventsource')['useLogStream']>
+    readonly useLogSearchContext: UnwrapRef<typeof import('./composable/logSearchContext')['useLogSearchContext']>
+    readonly useLogStream: UnwrapRef<typeof import('./composable/eventsource')['useLogStream']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
     readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
     readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
@@ -631,8 +633,10 @@ declare module 'vue' {
     readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
     readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
+    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']>
@@ -641,10 +645,11 @@ declare module 'vue' {
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
     readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
-    readonly useSearchFilter: UnwrapRef<typeof import('./composables/search')['useSearchFilter']>
+    readonly useSearchFilter: UnwrapRef<typeof import('./composable/search')['useSearchFilter']>
     readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSimpleRefHistory: UnwrapRef<typeof import('./utils/index')['useSimpleRefHistory']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
@@ -670,7 +675,7 @@ declare module 'vue' {
     readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
     readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
     readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
-    readonly useToast: UnwrapRef<typeof import('./composables/toast')['useToast']>
+    readonly useToast: UnwrapRef<typeof import('./composable/toast')['useToast']>
     readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
     readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
     readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
@@ -679,7 +684,7 @@ declare module 'vue' {
     readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
     readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
     readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
-    readonly useVisibleFilter: UnwrapRef<typeof import('./composables/visible')['useVisibleFilter']>
+    readonly useVisibleFilter: UnwrapRef<typeof import('./composable/visible')['useVisibleFilter']>
     readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
     readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
     readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
@@ -708,6 +713,7 @@ declare module 'vue' {
   }
 }
 declare module '@vue/runtime-core' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
     readonly $: UnwrapRef<typeof import('vue/macros')['$']>
@@ -724,13 +730,14 @@ declare module '@vue/runtime-core' {
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly automaticRedirect: UnwrapRef<typeof import('./stores/settings')['automaticRedirect']>
     readonly collapseNav: UnwrapRef<typeof import('./stores/settings')['collapseNav']>
+    readonly compact: UnwrapRef<typeof import('./stores/settings')['compact']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
     readonly config: UnwrapRef<typeof import('./stores/config')['default']>
-    readonly containerContext: UnwrapRef<typeof import('./composables/containerContext')['containerContext']>
+    readonly containerContext: UnwrapRef<typeof import('./composable/containerContext')['containerContext']>
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
@@ -744,6 +751,7 @@ declare module '@vue/runtime-core' {
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly dateLocale: UnwrapRef<typeof import('./stores/settings')['dateLocale']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
@@ -758,20 +766,21 @@ declare module '@vue/runtime-core' {
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getDeep: UnwrapRef<typeof import('./utils/index')['getDeep']>
-    readonly globalShowPopup: UnwrapRef<typeof import('./composables/popup')['globalShowPopup']>
+    readonly globalShowPopup: UnwrapRef<typeof import('./composable/popup')['globalShowPopup']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly hourStyle: UnwrapRef<typeof import('./stores/settings')['hourStyle']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
-    readonly isMobile: UnwrapRef<typeof import('./composables/media')['isMobile']>
+    readonly isMobile: UnwrapRef<typeof import('./composable/media')['isMobile']>
     readonly isObject: UnwrapRef<typeof import('./utils/index')['isObject']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
     readonly lightTheme: UnwrapRef<typeof import('./stores/settings')['lightTheme']>
+    readonly locale: UnwrapRef<typeof import('./stores/settings')['locale']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
@@ -801,10 +810,10 @@ declare module '@vue/runtime-core' {
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
-    readonly persistentVisibleKeys: UnwrapRef<typeof import('./composables/storage')['persistentVisibleKeys']>
-    readonly pinnedContainers: UnwrapRef<typeof import('./composables/storage')['pinnedContainers']>
+    readonly persistentVisibleKeys: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeys']>
+    readonly pinnedContainers: UnwrapRef<typeof import('./composable/storage')['pinnedContainers']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    readonly provideContainerContext: UnwrapRef<typeof import('./composables/containerContext')['provideContainerContext']>
+    readonly provideContainerContext: UnwrapRef<typeof import('./composable/containerContext')['provideContainerContext']>
     readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
@@ -823,10 +832,10 @@ declare module '@vue/runtime-core' {
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
     readonly search: UnwrapRef<typeof import('./stores/settings')['search']>
-    readonly sessionHost: UnwrapRef<typeof import('./composables/storage')['sessionHost']>
+    readonly sessionHost: UnwrapRef<typeof import('./composable/storage')['sessionHost']>
     readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
     readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
-    readonly setTitle: UnwrapRef<typeof import('./composables/title')['setTitle']>
+    readonly setTitle: UnwrapRef<typeof import('./composable/title')['setTitle']>
     readonly settings: UnwrapRef<typeof import('./stores/settings')['settings']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
@@ -883,10 +892,12 @@ declare module '@vue/runtime-core' {
     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
-    readonly useContainerContext: UnwrapRef<typeof import('./composables/containerContext')['useContainerContext']>
+    readonly useContainerActions: UnwrapRef<typeof import('./composable/containerActions')['useContainerActions']>
+    readonly useContainerContext: UnwrapRef<typeof import('./composable/containerContext')['useContainerContext']>
     readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
@@ -928,6 +939,7 @@ declare module '@vue/runtime-core' {
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
     readonly useHead: UnwrapRef<typeof import('@vueuse/head')['useHead']>
+    readonly useHosts: UnwrapRef<typeof import('./stores/hosts')['useHosts']>
     readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
@@ -939,7 +951,8 @@ declare module '@vue/runtime-core' {
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
     readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
-    readonly useLogStream: UnwrapRef<typeof import('./composables/eventsource')['useLogStream']>
+    readonly useLogSearchContext: UnwrapRef<typeof import('./composable/logSearchContext')['useLogSearchContext']>
+    readonly useLogStream: UnwrapRef<typeof import('./composable/eventsource')['useLogStream']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
     readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
     readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
@@ -971,8 +984,10 @@ declare module '@vue/runtime-core' {
     readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
     readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
+    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']>
@@ -981,10 +996,11 @@ declare module '@vue/runtime-core' {
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
     readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
-    readonly useSearchFilter: UnwrapRef<typeof import('./composables/search')['useSearchFilter']>
+    readonly useSearchFilter: UnwrapRef<typeof import('./composable/search')['useSearchFilter']>
     readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSimpleRefHistory: UnwrapRef<typeof import('./utils/index')['useSimpleRefHistory']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
@@ -1010,7 +1026,7 @@ declare module '@vue/runtime-core' {
     readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
     readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
     readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
-    readonly useToast: UnwrapRef<typeof import('./composables/toast')['useToast']>
+    readonly useToast: UnwrapRef<typeof import('./composable/toast')['useToast']>
     readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
     readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
     readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
@@ -1019,7 +1035,7 @@ declare module '@vue/runtime-core' {
     readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
     readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
     readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
-    readonly useVisibleFilter: UnwrapRef<typeof import('./composables/visible')['useVisibleFilter']>
+    readonly useVisibleFilter: UnwrapRef<typeof import('./composable/visible')['useVisibleFilter']>
     readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
     readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
     readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>

assets/components.d.ts

@@ -1,19 +1,24 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     BarChart: typeof import('./components/BarChart.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:macShift': typeof import('~icons/carbon/mac-shift')['default']
+    'Carbon:play': typeof import('~icons/carbon/play')['default']
+    'Carbon:restart': typeof import('~icons/carbon/restart')['default']
+    'Carbon:searchLocate': typeof import('~icons/carbon/search-locate')['default']
     'Carbon:star': typeof import('~icons/carbon/star')['default']
     'Carbon:starFilled': typeof import('~icons/carbon/star-filled')['default']
+    'Carbon:stopFilledAlt': typeof import('~icons/carbon/stop-filled-alt')['default']
     'Carbon:warning': typeof import('~icons/carbon/warning')['default']
     'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default']
     'Cil:circle': typeof import('~icons/cil/circle')['default']
@@ -21,6 +26,7 @@ declare module 'vue' {
     'Cil:xCircle': typeof import('~icons/cil/x-circle')['default']
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
     ContainerHealth: typeof import('./components/LogViewer/ContainerHealth.vue')['default']
+    ContainerLogViewer: typeof import('./components/LogViewer/ContainerLogViewer.vue')['default']
     ContainerPopup: typeof import('./components/LogViewer/ContainerPopup.vue')['default']
     ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
     ContainerTable: typeof import('./components/ContainerTable.vue')['default']
@@ -29,21 +35,29 @@ declare module 'vue' {
     DistanceTime: typeof import('./components/common/DistanceTime.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
     Dropdown: typeof import('./components/common/Dropdown.vue')['default']
+    DropdownMenu: typeof import('./components/common/DropdownMenu.vue')['default']
     FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
     FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
-    'Ic:sharpFindInPage': typeof import('~icons/ic/sharp-find-in-page')['default']
+    HostList: typeof import('./components/HostList.vue')['default']
     'Ic:sharpKeyboardReturn': typeof import('~icons/ic/sharp-keyboard-return')['default']
     InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
     KeyShortcut: typeof import('./components/common/KeyShortcut.vue')['default']
+    LabeledInput: typeof import('./components/common/LabeledInput.vue')['default']
+    Links: typeof import('./components/Links.vue')['default']
     LogActionsToolbar: typeof import('./components/LogViewer/LogActionsToolbar.vue')['default']
     LogContainer: typeof import('./components/LogViewer/LogContainer.vue')['default']
     LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
     LogEventSource: typeof import('./components/LogViewer/LogEventSource.vue')['default']
     LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default']
+    LogMessageActions: typeof import('./components/LogViewer/LogMessageActions.vue')['default']
     LogStd: typeof import('./components/LogViewer/LogStd.vue')['default']
     LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
     LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default']
+    'MaterialSymbols:collapseAllRounded': typeof import('~icons/material-symbols/collapse-all-rounded')['default']
+    'MaterialSymbols:expandAllRounded': typeof import('~icons/material-symbols/expand-all-rounded')['default']
+    'Mdi:announcement': typeof import('~icons/mdi/announcement')['default']
     'Mdi:arrowUp': typeof import('~icons/mdi/arrow-up')['default']
+    'Mdi:check': typeof import('~icons/mdi/check')['default']
     'Mdi:chevronDoubleDown': typeof import('~icons/mdi/chevron-double-down')['default']
     'Mdi:chevronLeft': typeof import('~icons/mdi/chevron-left')['default']
     'Mdi:chevronRight': typeof import('~icons/mdi/chevron-right')['default']
@@ -51,17 +65,19 @@ declare module 'vue' {
     'Mdi:cog': typeof import('~icons/mdi/cog')['default']
     'Mdi:hamburgerMenu': typeof import('~icons/mdi/hamburger-menu')['default']
     'Mdi:keyboardEsc': typeof import('~icons/mdi/keyboard-esc')['default']
-    'Mdi:logout': typeof import('~icons/mdi/logout')['default']
     'Mdi:magnify': typeof import('~icons/mdi/magnify')['default']
-    'MdiLight:check': typeof import('~icons/mdi/check')['default']
     MobileMenu: typeof import('./components/common/MobileMenu.vue')['default']
     'Octicon:container24': typeof import('~icons/octicon/container24')['default']
     'Octicon:download24': typeof import('~icons/octicon/download24')['default']
     'Octicon:trash24': typeof import('~icons/octicon/trash24')['default']
+    PageWithLinks: typeof import('./components/PageWithLinks.vue')['default']
     'Ph:command': typeof import('~icons/ph/command')['default']
     'Ph:computerTower': typeof import('~icons/ph/computer-tower')['default']
     'Ph:controlBold': typeof import('~icons/ph/control-bold')['default']
+    'Ph:cpu': typeof import('~icons/ph/cpu')['default']
+    'Ph:memory': typeof import('~icons/ph/memory')['default']
     Popup: typeof import('./components/Popup.vue')['default']
+    Releases: typeof import('./components/Releases.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollableView: typeof import('./components/ScrollableView.vue')['default']

assets/components/ContainerTable.vue

@@ -1,5 +1,49 @@
 !
 <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"
+          aria-label="Show All"
+          v-model="selectedHost"
+          :value="null"
+        />
+        <input
+          type="radio"
+          name="host"
+          role="tab"
+          class="tab !rounded"
+          :aria-label="host.name"
+          v-for="host in hosts"
+          :value="host.id"
+          :key="host.id"
+          v-model="selectedHost"
+        />
+      </div>
+      <dropdown-menu
+        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") }}
+      <dropdown-menu
+        class="dropdown-left btn-xs md:btn-sm"
+        v-model="perPage"
+        :options="pageSizes.map((i) => ({ label: i.toLocaleString(), value: i }))"
+      />
+    </div>
+  </div>
+
   <table class="table table-lg bg-base">
     <thead>
       <tr :data-direction="direction > 0 ? 'asc' : 'desc'">
@@ -32,28 +76,28 @@
           <distance-time :date="container.created" strict :suffix="false"></distance-time>
         </td>
         <td v-if="isVisible('cpu')">
-          <bar-chart :value="container.movingAverage.cpu / 100">
-            {{ (container.movingAverage.cpu / 100).toLocaleString(undefined, { style: "percent" }) }}
-          </bar-chart>
+          <progress
+            class="progress progress-primary"
+            :value="container.movingAverage.cpu"
+            :max="100 * hosts[container.host].nCPU"
+          ></progress>
         </td>
         <td v-if="isVisible('mem')">
-          <bar-chart :value="container.movingAverage.memory / 100">
-            {{ (container.movingAverage.memory / 100).toLocaleString(undefined, { style: "percent" }) }}
-          </bar-chart>
+          <progress class="progress progress-primary" :value="container.movingAverage.memory" max="100"></progress>
         </td>
       </tr>
     </tbody>
   </table>
   <div class="p-4 text-center">
     <nav class="join" v-if="isPaginated">
-      <button
+      <input
+        class="btn btn-square join-item"
+        type="radio"
+        v-model="currentPage"
+        :aria-label="`${i}`"
+        :value="i"
         v-for="i in totalPages"
-        class="btn join-item"
-        :class="{ 'btn-primary': i === currentPage }"
-        @click="currentPage = i"
-      >
-        {{ i }}
-      </button>
+      />
     </nav>
   </div>
 </template>
@@ -62,6 +106,9 @@
 import { Container } from "@/models/Container";
 import { toRefs } from "@vueuse/core";
 
+const { hosts } = useHosts();
+const selectedHost = ref(null);
+
 const fields = {
   name: {
     label: "label.container-name",
@@ -95,32 +142,35 @@ const fields = {
   },
 };
 
-const { containers, perPage = 15 } = defineProps<{
+const { containers } = defineProps<{
   containers: Container[];
-  perPage?: number;
 }>();
 type keys = keyof typeof fields;
 
+const perPage = useStorage("DOZZLE_TABLE_PAGE_SIZE", 15);
+const pageSizes = [15, 30, 50, 100];
+
 const storage = useStorage<{ column: keys; direction: 1 | -1 }>("DOZZLE_TABLE_CONTAINERS_SORT", {
   column: "created",
   direction: -1,
 });
 const { column: sortField, direction } = toRefs(storage);
+const counter = useInterval(10000);
+const filteredContainers = computed(() =>
+  containers.filter((c) => selectedHost.value === null || c.host === selectedHost.value),
+);
 const sortedContainers = computedWithControl(
-  () => [containers.length, sortField.value, direction.value],
-  () => {
-    return containers.sort((a, b) => {
-      return fields[sortField.value].sortFunc(a, b);
-    });
-  },
+  () => [filteredContainers.value.length, sortField.value, direction.value, counter.value],
+  () => filteredContainers.value.sort((a, b) => fields[sortField.value].sortFunc(a, b)),
 );
 
-const totalPages = computed(() => Math.ceil(sortedContainers.value.length / perPage));
+const totalPages = computed(() => Math.ceil(sortedContainers.value.length / perPage.value));
 const isPaginated = computed(() => totalPages.value > 1);
 const currentPage = ref(1);
+watch(perPage, () => (currentPage.value = 1));
 const paginated = computed(() => {
-  const start = (currentPage.value - 1) * perPage;
-  const end = start + perPage;
+  const start = (currentPage.value - 1) * perPage.value;
+  const end = start + perPage.value;
 
   return sortedContainers.value.slice(start, end);
 });

assets/components/FuzzySearchModal.spec.ts

@@ -0,0 +1,79 @@
+import { createTestingPinia } from "@pinia/testing";
+import { mount } from "@vue/test-utils";
+
+import FuzzySearchModal from "./FuzzySearchModal.vue";
+
+import { Container } from "@/models/Container";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { createI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { router } from "@/modules/router";
+
+// @ts-ignore
+import EventSource, { sources } from "eventsourcemock";
+
+vi.mock("vue-router");
+
+vi.mock("@/stores/config", () => ({
+  __esModule: true,
+  default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
+  withBase: (path: string) => path,
+}));
+
+function createFuzzySearchModal() {
+  global.EventSource = EventSource;
+  const wrapper = mount(FuzzySearchModal, {
+    global: {
+      plugins: [
+        createI18n({}),
+        createTestingPinia({
+          createSpy: vi.fn,
+          initialState: {
+            container: {
+              containers: [
+                new Container("123", new Date(), "image", "test", "command", "host", {}, "status", "running", []),
+                new Container("345", new Date(), "image", "foo bar", "command", "host", {}, "status", "running", []),
+                new Container("567", new Date(), "image", "baz", "command", "host", {}, "status", "exited", []),
+              ],
+            },
+          },
+        }),
+      ],
+    },
+  });
+  return wrapper;
+}
+
+/**
+ * @vitest-environment jsdom
+ */
+describe("<FuzzySearchModal />", () => {
+  vi.mocked(useRouter).mockReturnValue({
+    ...router,
+    push: vi.fn(),
+  });
+
+  beforeEach(() => {
+    vi.mocked(useRouter().push).mockReset();
+  });
+  test("shows all", async () => {
+    const wrapper = createFuzzySearchModal();
+    expect(wrapper.findAll("li").length).toBe(3);
+  });
+
+  test("search for foo", async () => {
+    const wrapper = createFuzzySearchModal();
+    await wrapper.find("input").setValue("foo");
+    expect(wrapper.findAll("li").length).toBe(1);
+    expect(wrapper.find("ul [data-name]").html()).toMatchInlineSnapshot(
+      `"<span data-v-dc2e8c61="" data-name=""><mark>foo</mark> bar</span>"`,
+    );
+  });
+
+  test("choose baz", async () => {
+    const wrapper = createFuzzySearchModal();
+    await wrapper.find("input").setValue("baz");
+    await wrapper.find("input").trigger("keydown.enter");
+    expect(useRouter().push).toHaveBeenCalledWith({ name: "container-id", params: { id: "567" } });
+  });
+});

assets/components/FuzzySearchModal.vue

@@ -1,36 +1,43 @@
 <template>
   <div class="dropdown dropdown-open w-full">
     <div class="input input-primary flex h-auto items-center">
-      <mdi:magnify class="flex h-8 w-8" />
+      <mdi:magnify class="flex size-8" />
       <input
         tabindex="0"
-        class="input input-ghost input-lg flex-1 px-1"
+        class="input input-lg input-ghost flex-1 px-1"
         ref="input"
-        @keyup.down="selectedIndex = Math.min(selectedIndex + 1, data.length - 1)"
-        @keyup.up="selectedIndex = Math.max(selectedIndex - 1, 0)"
-        @keyup.enter.exact="selected(data[selectedIndex])"
-        @keyup.alt.enter="addColumn(data[selectedIndex])"
+        @keydown.down="selectedIndex = Math.min(selectedIndex + 1, data.length - 1)"
+        @keydown.up="selectedIndex = Math.max(selectedIndex - 1, 0)"
+        @keydown.enter.exact="selected(data[selectedIndex].item)"
+        @keydown.alt.enter="addColumn(data[selectedIndex])"
         v-model="query"
         :placeholder="$t('placeholder.search-containers')"
       />
       <mdi:keyboard-esc class="flex" />
     </div>
-    <ul tabindex="0" class="menu dropdown-content rounded-box !relative mt-2 w-full bg-base-lighter p-2">
-      <li v-for="(item, index) in data">
+    <ul tabindex="0" class="menu dropdown-content !relative mt-2 w-full rounded-box bg-base-lighter p-2">
+      <li v-for="(result, index) in data">
         <a
           class="grid auto-cols-max grid-cols-[min-content,auto] gap-2 py-4"
-          @click.prevent="selected(item)"
+          @click.prevent="selected(result.item)"
           @mouseenter="selectedIndex = index"
           :class="index === selectedIndex ? 'focus' : ''"
         >
-          <div :class="{ 'text-primary': item.state === 'running' }">
+          <div :class="{ 'text-primary': result.item.state === 'running' }">
             <octicon:container-24 />
           </div>
           <div class="truncate">
-            <span class="font-light">{{ item.host }}</span> / {{ item.name }}
+            <template v-if="config.hosts.length > 1">
+              <span class="font-light">{{ result.item.host }}</span> /
+            </template>
+            <span data-name v-html="matchedName(result)"></span>
           </div>
-          <distance-time :date="item.created" class="ml-auto text-xs font-light" />
-          <a @click.stop.prevent="addColumn(item)" :title="$t('tooltip.pin-column')" class="hover:text-secondary">
+          <distance-time :date="result.item.created" class="text-xs font-light" />
+          <a
+            @click.stop.prevent="addColumn(result.item)"
+            :title="$t('tooltip.pin-column')"
+            class="hover:text-secondary"
+          >
             <ic:sharp-keyboard-return v-if="index === selectedIndex" />
             <cil:columns v-else />
           </a>
@@ -42,8 +49,9 @@
 
 <script lang="ts" setup>
 import { useFuse } from "@vueuse/integrations/useFuse";
+import { type FuseResultMatch } from "fuse.js";
 
-const { maxResults: resultLimit = 5 } = defineProps<{
+const { maxResults = 5 } = defineProps<{
   maxResults?: number;
 }>();
 
@@ -58,44 +66,46 @@ const store = useContainerStore();
 const { containers } = storeToRefs(store);
 
 const list = computed(() => {
-  return containers.value.map(({ id, created, name, state, hostLabel: host }) => {
+  return containers.value.map(({ id, created, name, state, labels, hostLabel: host }) => {
     return {
       id,
       created,
       name,
       state,
       host,
+      labels: Object.entries(labels).map(([_, value]) => value),
     };
   });
 });
 
 const { results } = useFuse(query, list, {
   fuseOptions: {
-    keys: ["name", "host"],
+    keys: ["name", "host", "labels"],
     includeScore: true,
     useExtendedSearch: true,
+    threshold: 0.3,
+    includeMatches: true,
   },
-  resultLimit,
+  resultLimit: 10,
   matchAllWhenSearchEmpty: true,
 });
 
 const data = computed(() => {
-  return results.value
+  return [...results.value]
     .sort((a, b) => {
       if (a.score === b.score) {
-        if (a.item.state === "running" && b.item.state !== "running") {
+        if (a.item.state === b.item.state) {
+          return b.item.created - a.item.created;
+        } else if (a.item.state === "running" && b.item.state !== "running") {
           return -1;
         } else {
           return 1;
         }
-      } else if (a.score && b.score) {
-        return a.score - b.score;
       } else {
-        return 0;
+        return a.score - b.score;
       }
     })
-    .map(({ item }) => item)
-    .slice(0, resultLimit);
+    .slice(0, maxResults);
 });
 
 watch(query, (data) => {
@@ -114,6 +124,32 @@ function addColumn(container: { id: string }) {
   store.appendActiveContainer(container);
   close();
 }
+
+function matchedName({ item, matches = [] }: { item: { name: string }; matches?: FuseResultMatch[] }) {
+  const matched = matches.find((match) => match.key === "name");
+  if (matched) {
+    const { indices } = matched;
+    const result = [];
+    let lastIndex = 0;
+    for (const [start, end] of indices) {
+      result.push(item.name.slice(lastIndex, start));
+      result.push(`<mark>${item.name.slice(start, end + 1)}</mark>`);
+      lastIndex = end + 1;
+    }
+    result.push(item.name.slice(lastIndex));
+    return result.join("");
+  } else {
+    return item.name;
+  }
+}
 </script>
 
-<style scoped lang="postcss"></style>
+<style scoped lang="postcss">
+:deep(mark) {
+  @apply bg-transparent text-inherit underline underline-offset-2;
+}
+
+.menu a {
+  @apply transition-none duration-0;
+}
+</style>

assets/components/HostList.vue

@@ -0,0 +1,94 @@
+<template>
+  <ul class="grid gap-4 md:grid-cols-[repeat(auto-fill,minmax(480px,1fr))]">
+    <li v-for="host in hostSummaries" class="card bg-base-lighter">
+      <div class="card-body grid auto-cols-auto grid-flow-col justify-between">
+        <div class="overflow-hidden">
+          <div class="truncate text-xl font-semibold">{{ host.name }}</div>
+          <ul class="flex flex-row gap-4 text-sm md:gap-3">
+            <li><ph:cpu class="inline-block" /> {{ host.nCPU }} <span class="mobile-hidden">CPUs</span></li>
+            <li>
+              <ph:memory class="inline-block" /> {{ formatBytes(host.memTotal) }}
+              <span class="mobile-hidden">total</span>
+            </li>
+          </ul>
+          <div class="text-sm">
+            <octicon:container-24 class="inline-block" /> {{ $t("label.container", host.containers.length) }}
+          </div>
+        </div>
+
+        <div class="flex flex-row gap-8">
+          <div
+            class="radial-progress text-primary"
+            :style="`--value: ${Math.floor((host.totalCPU / (host.nCPU * 100)) * 100)}; --thickness: 0.25em`"
+            role="progressbar"
+          >
+            {{ host.totalCPU.toFixed(0) }}%
+          </div>
+          <div
+            class="radial-progress text-primary"
+            :style="`--value: ${(host.totalMem / host.memTotal) * 100}; --thickness: 0.25em`"
+            role="progressbar"
+          >
+            {{ formatBytes(host.totalMem, 1) }}
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { Container } from "@/models/Container";
+
+const { containers } = defineProps<{
+  containers: Container[];
+}>();
+
+const { hosts } = useHosts();
+type HostSummary = {
+  name: string;
+  containers: Container[];
+  totalCPU: number;
+  totalMem: number;
+  nCPU: number;
+  memTotal: number;
+};
+
+const hostSummaries = computed(() => {
+  const summaries: Record<string, HostSummary> = {};
+  for (const container of containers) {
+    if (!summaries[container.host]) {
+      const host = hosts.value[container.host];
+      summaries[container.host] = reactive({
+        name: host.name,
+        containers: [],
+        totalCPU: 0,
+        totalMem: 0,
+        nCPU: host.nCPU,
+        memTotal: host.memTotal,
+      });
+    }
+    const summary = summaries[container.host];
+    summary.containers.push(container);
+  }
+
+  return Object.values(summaries).sort((a, b) => a.name.localeCompare(b.name));
+});
+
+useIntervalFn(
+  () => {
+    for (const summary of hostSummaries.value) {
+      summary.totalCPU = 0;
+      summary.totalMem = 0;
+      for (const container of summary.containers) {
+        summary.totalCPU += container.stat.cpu;
+        summary.totalMem += container.stat.memoryUsage;
+      }
+    }
+  },
+  1000,
+  { immediate: true },
+);
+</script>
+
+<style scoped></style>

assets/components/Links.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="flex items-center justify-end gap-4">
+    <dropdown class="dropdown-end" @closed="latestTag = latest?.tag ?? config.version">
+      <template #trigger>
+        <mdi:announcement class="size-6 -rotate-12" />
+        <span
+          class="absolute right-px top-0 size-2 rounded-full bg-red"
+          v-if="hasUpdate && latestTag != latest?.tag"
+        ></span>
+      </template>
+      <template #content>
+        <div class="w-72">
+          <releases />
+        </div>
+      </template>
+    </dropdown>
+
+    <router-link
+      :to="{ name: 'settings' }"
+      :aria-label="$t('title.settings')"
+      data-testid="settings"
+      class="btn btn-circle btn-sm"
+    >
+      <mdi:cog class="size-6" />
+    </router-link>
+
+    <dropdown class="dropdown-end" v-if="config.user">
+      <template #trigger>
+        <img
+          class="size-6 max-w-none rounded-full p-px ring-1 ring-base-content/60"
+          :src="withBase('/api/profile/avatar')"
+        />
+      </template>
+      <template #content>
+        <div class="p-2">
+          <div class="font-bold">
+            {{ config.user.name }}
+          </div>
+          <div class="text-sm font-light">
+            {{ config.user.email }}
+          </div>
+        </div>
+        <ul class="menu mt-4 p-0">
+          <li v-if="config.authProvider === 'simple'">
+            <button @click.prevent="logout()" class="p-2 text-primary">{{ $t("button.logout") }}</button>
+          </li>
+        </ul>
+      </template>
+    </dropdown>
+  </div>
+</template>
+<script lang="ts" setup>
+async function logout() {
+  await fetch(withBase("/api/token"), {
+    method: "DELETE",
+  });
+
+  location.reload();
+}
+
+const { hasUpdate, latest } = useReleases();
+const latestTag = useProfileStorage("releaseSeen", config.version);
+</script>

assets/components/LogViewer/ComplexLogItem.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="flex gap-x-2">
+  <div class="group/item relative flex w-full gap-x-2" @click="expandToggle()">
+    <label class="swap swap-rotate invisible absolute -left-4 top-0.5 size-4 group-hover/item:visible">
+      <input type="checkbox" v-model="expanded" @click="expandToggle()" />
+      <material-symbols:expand-all-rounded class="swap-off text-secondary" />
+      <material-symbols:collapse-all-rounded class="swap-on text-secondary" />
+    </label>
     <div v-if="showStd">
       <log-std :std="logEntry.std"></log-std>
     </div>
@@ -10,8 +15,8 @@
       <log-level :level="logEntry.level"></log-level>
     </div>
     <div>
-      <ul class="fields cursor-pointer space-x-4" :class="{ expanded }" @click="expandToggle()">
-        <li v-for="(value, name) in validValues" class="inline-block">
+      <ul class="fields cursor-pointer space-x-4" :class="{ expanded }">
+        <li v-for="(value, name) in validValues" :key="name">
           <span class="text-light">{{ name }}=</span><span class="font-bold" v-if="value === null">&lt;null&gt;</span>
           <template v-else-if="Array.isArray(value)">
             <span class="font-bold" v-html="markSearch(JSON.stringify(value))"> </span>
@@ -22,6 +27,11 @@
       </ul>
       <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
     </div>
+    <log-message-actions
+      class="duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100"
+      :message="() => JSON.stringify(logEntry.message)"
+      :log-entry="logEntry"
+    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -45,19 +55,10 @@ const validValues = computed(() => {
 .text-light {
   @apply text-base-content/70;
 }
-.fields {
-  &:hover {
-    &::after {
-      content: "expand json";
-      @apply ml-2 inline-block text-secondary;
-      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    }
-  }
 
-  &.expanded:hover {
-    &::after {
-      content: "collapse json";
-    }
+.fields {
+  li {
+    @apply inline-flex;
   }
 }
 </style>

assets/components/LogViewer/ContainerHealth.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex h-4 w-4" :health="health" v-if="health" :title="health">
+  <div class="inline-flex size-4" :health="health" v-if="health" :title="health">
     <cil:check-circle v-if="health == 'healthy'" />
     <cil:x-circle v-else-if="health == 'unhealthy'" />
     <cil:circle v-else />

assets/components/LogViewer/ContainerLogViewer.vue

@@ -0,0 +1,39 @@
+<template>
+  <log-viewer :messages="filtered" :last-selected-item="lastSelectedItem" :visible-keys="visibleKeys" />
+</template>
+
+<script lang="ts" setup>
+import { useRouteHash } from "@vueuse/router";
+
+import { type JSONObject, LogEntry } from "@/models/LogEntry";
+
+const props = defineProps<{
+  messages: LogEntry<string | JSONObject>[];
+}>();
+
+const { container } = useContainerContext();
+
+const visibleKeys = persistentVisibleKeys(container);
+
+const { filteredPayload } = useVisibleFilter(visibleKeys);
+const { filteredMessages } = useSearchFilter();
+
+const { messages } = toRefs(props);
+const visible = filteredPayload(messages);
+const filtered = filteredMessages(visible);
+
+const { lastSelectedItem } = useLogSearchContext() as {
+  lastSelectedItem: Ref<LogEntry<string | JSONObject> | undefined>;
+};
+const routeHash = useRouteHash();
+watch(
+  routeHash,
+  (hash) => {
+    if (hash) {
+      document.querySelector(`[data-key="${hash.substring(1)}"]`)?.scrollIntoView({ block: "center" });
+    }
+  },
+  { immediate: true, flush: "post" },
+);
+</script>
+<style scoped lang="postcss"></style>

assets/components/LogViewer/ContainerPopup.vue

@@ -7,7 +7,7 @@
   </div>
   <div>
     <span class="font-light capitalize"> Load </span>
-    <span class="font-semibold"> {{ container.stat.cpu }}% </span>
+    <span class="font-semibold"> {{ container.stat.cpu.toFixed(2) }}% </span>
   </div>
   <div>
     <span class="font-light capitalize"> MEM </span>

assets/components/LogViewer/ContainerStat.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex gap-4" v-if="container.stat">
     <stat-monitor :data="memoryData" label="mem" :stat-value="formatBytes(unref(container.stat).memoryUsage)" />
-    <stat-monitor :data="cpuData" label="load" :stat-value="Math.max(0, unref(container.stat).cpu) + '%'" />
+    <stat-monitor :data="cpuData" label="load" :stat-value="Math.max(0, unref(container.stat).cpu).toFixed(2) + '%'" />
   </div>
 </template>
 
@@ -11,11 +11,11 @@ const { container } = useContainerContext();
 const cpuData = computedWithControl(
   () => container.value.stat,
   () => {
-    const history = container.value.statHistory;
+    const history = container.value.statsHistory;
     const points: Point<unknown>[] = history.map((stat, i) => ({
       x: i,
-      y: Math.max(0, stat.snapshot.cpu),
-      value: Math.max(0, stat.snapshot.cpu) + "%",
+      y: Math.max(0, stat.cpu),
+      value: Math.max(0, stat.cpu).toFixed(2) + "%",
     }));
     return points;
   },
@@ -24,11 +24,11 @@ const cpuData = computedWithControl(
 const memoryData = computedWithControl(
   () => container.value.stat,
   () => {
-    const history = container.value.statHistory;
+    const history = container.value.statsHistory;
     const points: Point<string>[] = history.map((stat, i) => ({
       x: i,
-      y: stat.snapshot.memory,
-      value: formatBytes(stat.snapshot.memoryUsage),
+      y: stat.memory,
+      value: formatBytes(stat.memoryUsage),
     }));
     return points;
   },

assets/components/LogViewer/ContainerTitle.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="flex flex-1 items-center gap-2 truncate">
-    <container-health :health="container.health" v-if="container.health"></container-health>
+  <div class="flex flex-1 gap-1.5 truncate @container 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 font-mono text-sm">
       <div v-if="config.hosts.length > 1" class="mobile-hidden font-thin">
         {{ container.hostLabel }}<span class="mx-2">/</span>
@@ -13,24 +17,22 @@
         {{ container.swarmId }}
       </div>
     </div>
-    <tag class="mobile-hidden font-mono" size="small">{{ container.image.replace(/@sha.*/, "") }}</tag>
-    <label class="swap swap-rotate">
-      <input type="checkbox" v-model="pinned" />
-      <carbon:star-filled class="swap-on text-secondary" />
-      <carbon:star class="swap-off" />
-    </label>
+    <container-health :health="container.health" v-if="container.health"></container-health>
+    <tag class="mobile-hidden hidden font-mono @3xl:block" size="small">
+      {{ container.image.replace(/@sha.*/, "") }}
+    </tag>
   </div>
 </template>
 
 <script lang="ts" setup>
 const { container } = useContainerContext();
 const pinned = computed({
-  get: () => pinnedContainers.value.has(container.value.storageKey),
+  get: () => pinnedContainers.value.has(container.value.name),
   set: (value) => {
     if (value) {
-      pinnedContainers.value.add(container.value.storageKey);
+      pinnedContainers.value.add(container.value.name);
     } else {
-      pinnedContainers.value.delete(container.value.storageKey);
+      pinnedContainers.value.delete(container.value.name);
     }
   },
 });

assets/components/LogViewer/DockerEventLogItem.vue

@@ -5,7 +5,7 @@
       class="alert alert-info mt-8 w-auto text-[1rem] md:mx-auto md:w-1/2"
       v-if="nextContainer && logEntry.event === 'container-stopped'"
     >
-      <carbon:information class="h-6 w-6 shrink-0 stroke-current" />
+      <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 }) }}
@@ -39,15 +39,15 @@ const { container } = useContainerContext();
 
 const nextContainer = computed(
   () =>
-    containers.value
-      .filter(
+    [
+      ...containers.value.filter(
         (c) =>
           c.host === container.value.host &&
           c.created > logEntry.date &&
           c.name === container.value.name &&
           c.state === "running",
-      )
-      .toSorted((a, b) => +a.created - +b.created)[0],
+      ),
+    ].sort((a, b) => +a.created - +b.created)[0],
 );
 
 function redirectNow() {

assets/components/LogViewer/FieldList.vue

@@ -1,6 +1,6 @@
 <template>
   <ul v-if="expanded" ref="root" class="ml-8">
-    <li v-for="(value, name) in fields">
+    <li v-for="(value, name) in fields" :key="name">
       <template v-if="isObject(value)">
         <span class="text-light">{{ name }}=</span>
         <field-list
@@ -11,9 +11,9 @@
         ></field-list>
       </template>
       <template v-else-if="Array.isArray(value)">
-        <a @click="toggleField(name)" class="link-primary cursor-pointer">
-          {{ hasField(name) ? "remove" : "add" }}&nbsp;</a
-        >
+        <a @click.stop="toggleField(name)" class="link-primary mr-2 cursor-pointer">
+          {{ hasField(name) ? "remove" : "add" }}
+        </a>
         <span class="text-light">{{ name }}=</span>[
         <span class="font-bold" v-for="(item, index) in value">
           <span v-html="JSON.stringify(item)"></span><span v-if="index !== value.length - 1">,</span>
@@ -21,9 +21,9 @@
         ]
       </template>
       <template v-else>
-        <a @click="toggleField(name)" class="link-primary cursor-pointer">
-          {{ hasField(name) ? "remove" : "add" }}&nbsp;</a
-        >
+        <a @click.stop="toggleField(name)" class="link-primary mr-2 cursor-pointer">
+          {{ hasField(name) ? "remove" : "add" }}
+        </a>
         <span class="text-light">{{ name }}=</span><span class="font-bold" v-html="value"></span>
       </template>
     </li>

assets/components/LogViewer/LogActionsToolbar.vue

@@ -4,7 +4,7 @@
       <carbon:circle-solid class="w-2.5 text-red" v-if="streamConfig.stderr" />
       <carbon:circle-solid class="w-2.5 text-blue" v-if="streamConfig.stdout" />
     </label>
-    <ul tabindex="0" class="menu dropdown-content rounded-box z-50 w-52 bg-base p-1 shadow">
+    <ul tabindex="0" class="menu dropdown-content z-50 w-52 rounded-box bg-base p-1 shadow">
       <li>
         <a @click.prevent="clear()">
           <octicon:trash-24 /> {{ $t("toolbar.clear") }}
@@ -12,9 +12,7 @@
         </a>
       </li>
       <li>
-        <a :href="`${base}/api/logs/download/${container.host}/${container.id}`" download>
-          <octicon:download-24 /> {{ $t("toolbar.download") }}
-        </a>
+        <a :href="downloadUrl" download> <octicon:download-24 /> {{ $t("toolbar.download") }} </a>
       </li>
       <li>
         <a @click.prevent="showSearch = true">
@@ -30,7 +28,7 @@
             streamConfig.stderr = true;
           "
         >
-          <div class="flex h-4 w-4 gap-0.5">
+          <div class="flex size-4 gap-0.5">
             <template v-if="streamConfig.stderr && streamConfig.stdout">
               <carbon:circle-solid class="w-2 text-red" />
               <carbon:circle-solid class="w-2 text-blue" />
@@ -46,7 +44,7 @@
             streamConfig.stderr = false;
           "
         >
-          <div class="flex h-4 w-4 flex-col gap-1">
+          <div class="flex size-4 flex-col gap-1">
             <carbon:circle-solid class="w-2 text-blue" v-if="!streamConfig.stderr && streamConfig.stdout" />
           </div>
           {{ $t("toolbar.show", { std: "STDOUT" }) }}
@@ -59,23 +57,75 @@
             streamConfig.stderr = true;
           "
         >
-          <div class="flex h-4 w-4 flex-col gap-1">
+          <div class="flex size-4 flex-col gap-1">
             <carbon:circle-solid class="w-2 text-red" v-if="streamConfig.stderr && !streamConfig.stdout" />
           </div>
           {{ $t("toolbar.show", { std: "STDERR" }) }}
         </a>
       </li>
+
+      <!-- Container Actions (Enabled via config) -->
+      <template v-if="enableActions">
+        <li class="line"></li>
+        <li>
+          <button
+            @click="stop()"
+            :disabled="actionStates.stop || actionStates.restart"
+            v-if="container.state == 'running'"
+          >
+            <carbon:stop-filled-alt /> {{ $t("toolbar.stop") }}
+          </button>
+
+          <button
+            @click="start()"
+            :disabled="actionStates.start || actionStates.restart"
+            v-if="container.state != 'running'"
+          >
+            <carbon:play /> {{ $t("toolbar.start") }}
+          </button>
+        </li>
+        <li>
+          <button @click="restart()" :disabled="disableRestart">
+            <carbon:restart
+              :class="{
+                'animate-spin': actionStates.restart,
+                'text-secondary': actionStates.restart,
+              }"
+            />
+            {{ $t("toolbar.restart") }}
+          </button>
+        </li>
+      </template>
     </ul>
   </div>
 </template>
 
 <script lang="ts" setup>
 const { showSearch } = useSearchFilter();
-const { base } = config;
+const { enableActions } = config;
 
 const clear = defineEmit();
 
 const { container, streamConfig } = useContainerContext();
+
+// container context is provided in the parent component: <LogContainer>
+const { actionStates, start, stop, restart } = useContainerActions();
+
+const downloadParams = computed(() =>
+  Object.entries(streamConfig)
+    .filter(([, value]) => value)
+    .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {}),
+);
+
+const downloadUrl = computed(() =>
+  withBase(
+    `/api/hosts/${container.value.host}/containers/${container.value.id}/logs/download?${new URLSearchParams(downloadParams.value).toString()}`,
+  ),
+);
+
+const disableRestart = computed(() => {
+  return actionStates.stop || actionStates.start || actionStates.restart;
+});
 </script>
 
 <style scoped lang="postcss">

assets/components/LogViewer/LogContainer.vue

@@ -1,7 +1,7 @@
 <template>
   <scrollable-view :scrollable="scrollable" v-if="container">
     <template #header v-if="showTitle">
-      <div class="mx-2 flex items-center gap-2">
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
         <container-title @close="$emit('close')" />
         <container-stat class="ml-auto" />
 

assets/components/LogViewer/LogEventSource.spec.ts

@@ -1,15 +1,16 @@
-import { mount } from "@vue/test-utils";
 import { createTestingPinia } from "@pinia/testing";
+import { mount } from "@vue/test-utils";
+import { containerContext } from "@/composable/containerContext";
+import { useSearchFilter } from "@/composable/search";
+import { settings } from "@/stores/settings";
 // @ts-ignore
 import EventSource, { sources } from "eventsourcemock";
-import LogEventSource from "./LogEventSource.vue";
-import LogViewer from "./LogViewer.vue";
-import { settings } from "@/stores/settings";
-import { useSearchFilter } from "@/composables/search";
-import { vi, describe, expect, beforeEach, test, afterEach } from "vitest";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { computed, nextTick } from "vue";
+import { createI18n } from "vue-i18n";
 import { createRouter, createWebHistory } from "vue-router";
-import { containerContext } from "@/composables/containerContext";
+import LogEventSource from "./LogEventSource.vue";
+import ContainerLogViewer from "./ContainerLogViewer.vue";
 
 vi.mock("@/stores/config", () => ({
   __esModule: true,
@@ -68,9 +69,9 @@ describe("<LogEventSource />", () => {
 
     return mount(LogEventSource, {
       global: {
-        plugins: [router, createTestingPinia({ createSpy: vi.fn })],
+        plugins: [router, createTestingPinia({ createSpy: vi.fn }), createI18n({})],
         components: {
-          LogViewer,
+          ContainerLogViewer,
         },
         provide: {
           [containerContext as symbol]: {
@@ -82,14 +83,14 @@ describe("<LogEventSource />", () => {
       },
       slots: {
         default: `
-        <template #scoped="params"><log-viewer :messages="params.messages"></log-viewer></template>
+        <template #scoped="params"><container-log-viewer :messages="params.messages" /></template>
         `,
       },
       props: {},
     });
   }
 
-  const sourceUrl = "/api/logs/stream/localhost/abc?stdout=1&stderr=1";
+  const sourceUrl = "/api/hosts/localhost/containers/abc/logs/stream?stdout=1&stderr=1";
 
   test("renders correctly", async () => {
     const wrapper = createLogEventSource();
@@ -139,19 +140,6 @@ describe("<LogEventSource />", () => {
       expect(wrapper.find("ul.events").html()).toMatchSnapshot();
     });
 
-    test("should render messages with color", async () => {
-      const wrapper = createLogEventSource();
-      sources[sourceUrl].emitOpen();
-      sources[sourceUrl].emitMessage({
-        data: '{"ts":1560336942459,"m":"\\u001b[30mblack\\u001b[37mwhite", "id":1}',
-      });
-
-      vi.runAllTimers();
-      await nextTick();
-
-      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
-    });
-
     test("should render messages with html entities", async () => {
       const wrapper = createLogEventSource();
       sources[sourceUrl].emitOpen();

assets/components/LogViewer/LogLevel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-level="level" :data-position="position" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg"></div>
+  <div :data-level="level" :data-position="position" class="mt-1.5 size-2.5 flex-none rounded-lg"></div>
 </template>
 <script lang="ts" setup>
 import { Position } from "@/models/LogEntry";

assets/components/LogViewer/LogMessageActions.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex gap-2">
+    <div
+      class="flex min-w-[0.98rem] items-start justify-end align-bottom hover:cursor-pointer"
+      v-if="isSupported"
+      :title="t('log_actions.copy_log')"
+    >
+      <span
+        class="rounded bg-slate-800/60 px-1.5 py-1 text-primary hover:bg-slate-700"
+        @click="copyLogMessageToClipBoard()"
+      >
+        <carbon:copy-file />
+      </span>
+    </div>
+    <div
+      class="flex min-w-[0.98rem] items-start justify-end align-bottom hover:cursor-pointer"
+      :title="t('log_actions.jump_to_context')"
+      v-if="isSearching()"
+    >
+      <a
+        class="rounded bg-slate-800/60 px-1.5 py-1 text-primary hover:bg-slate-700"
+        @click="handleJumpLineSelected($event, logEntry)"
+        :href="`#${logEntry.id}`"
+      >
+        <carbon:search-locate />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { LogEntry, JSONObject } from "@/models/LogEntry";
+
+const { message, logEntry } = defineProps<{
+  message: () => string;
+  logEntry: LogEntry<string | JSONObject>;
+}>();
+
+const { showToast } = useToast();
+const { copy, isSupported, copied } = useClipboard();
+const { t } = useI18n();
+
+const { isSearching } = useSearchFilter();
+const { handleJumpLineSelected } = useLogSearchContext();
+
+async function copyLogMessageToClipBoard() {
+  await copy(message());
+
+  if (copied.value) {
+    showToast(
+      {
+        title: t("toasts.copied.title"),
+        message: t("toasts.copied.message"),
+        type: "info",
+      },
+      { expire: 2000 },
+    );
+  }
+}
+</script>

assets/components/LogViewer/LogViewer.vue

@@ -1,63 +1,27 @@
 <template>
-  <ul class="events group py-4" :class="{ 'disable-wrap': !softWrap, [size]: true }">
+  <ul class="events group py-4" :class="{ 'disable-wrap': !softWrap, [size]: true, compact }">
     <li
-      v-for="item in filtered"
+      v-for="item in messages"
       :key="item.id"
       :data-key="item.id"
       :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
+      class="group/entry"
     >
-      <a
-        class="jump-context tooltip-primary tooltip tooltip-right"
-        v-if="isSearching()"
-        data-tip="Jump to Context"
-        @click="handleJumpLineSelected($event, item)"
-        :href="`#${item.id}`"
-      >
-        <ic:sharp-find-in-page />
-      </a>
-      <component :is="item.getComponent()" :log-entry="item" :visible-keys="visibleKeys.value" />
+      <component :is="item.getComponent()" :log-entry="item" :visible-keys="visibleKeys" />
     </li>
   </ul>
 </template>
 
 <script lang="ts" setup>
 import { toRaw } from "vue";
-import { useRouteHash } from "@vueuse/router";
 
 import { type JSONObject, LogEntry } from "@/models/LogEntry";
 
-const props = defineProps<{
+defineProps<{
   messages: LogEntry<string | JSONObject>[];
+  visibleKeys: string[][];
+  lastSelectedItem: LogEntry<string | JSONObject> | undefined;
 }>();
-
-const { container } = useContainerContext();
-
-let visibleKeys = persistentVisibleKeys(container);
-
-const { filteredPayload } = useVisibleFilter(visibleKeys);
-const { filteredMessages, resetSearch, isSearching } = useSearchFilter();
-
-const { messages } = toRefs(props);
-const visible = filteredPayload(messages);
-const filtered = filteredMessages(visible);
-
-let lastSelectedItem: LogEntry<string | JSONObject> | undefined = $ref(undefined);
-
-function handleJumpLineSelected(e: Event, item: LogEntry<string | JSONObject>) {
-  lastSelectedItem = item;
-  resetSearch();
-}
-
-const routeHash = useRouteHash();
-watch(
-  routeHash,
-  (hash) => {
-    if (hash) {
-      document.querySelector(`[data-key="${hash.substring(1)}"]`)?.scrollIntoView({ block: "center" });
-    }
-  },
-  { immediate: true, flush: "post" },
-);
 </script>
 <style scoped lang="postcss">
 .events {
@@ -72,13 +36,13 @@ watch(
     monospace;
 
   > li {
-    @apply flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07];
+    @apply flex break-words px-2 py-1 last:snap-end odd:bg-gray-400/[0.07] md:px-4;
     &:last-child {
       scroll-margin-block-end: 5rem;
     }
 
     .jump-context {
-      @apply mr-2 flex items-center font-sans text-secondary hover:text-secondary-focus;
+      @apply mr-2 flex items-center font-sans text-secondary;
     }
   }
 
@@ -93,5 +57,11 @@ watch(
   &.large {
     @apply text-lg;
   }
+
+  &.compact {
+    > li {
+      @apply py-0;
+    }
+  }
 }
 </style>

assets/components/LogViewer/LogViewerWithSource.vue

@@ -1,6 +1,6 @@
 <template>
   <log-event-source ref="source" #default="{ messages }" @loading-more="loadingMore($event)">
-    <log-viewer :messages="messages"></log-viewer>
+    <container-log-viewer :messages="messages" />
   </log-event-source>
 </template>
 

assets/components/LogViewer/SimpleLogItem.vue

@@ -1,16 +1,31 @@
 <template>
-  <div class="flex items-start gap-x-2">
+  <div class="relative flex w-full items-start gap-x-2">
     <log-std :std="logEntry.std" v-if="showStd" />
     <log-date :date="logEntry.date" v-if="showTimestamp" />
     <log-level class="flex" :level="logEntry.level" :position="logEntry.position" />
-    <div class="whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap" v-html="colorize(logEntry.message)"></div>
+    <div
+      class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"
+      v-html="colorize(logEntry.message)"
+    ></div>
+    <log-message-actions
+      class="duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100"
+      :message="() => decodeXML(stripAnsi(logEntry.message))"
+      :log-entry="logEntry"
+    />
   </div>
 </template>
 <script lang="ts" setup>
 import { SimpleLogEntry } from "@/models/LogEntry";
+import { decodeXML } from "entities";
 import AnsiConvertor from "ansi-to-html";
+import stripAnsi from "strip-ansi";
+
+const ansiConvertor = new AnsiConvertor({
+  escapeXML: false,
+  fg: "var(--base-content-color)",
+  bg: "var(--base-color)",
+});
 
-const ansiConvertor = new AnsiConvertor({ escapeXML: false, fg: "var(--text-color)" });
 defineProps<{
   logEntry: SimpleLogEntry;
 }>();

assets/components/LogViewer/StatMonitor.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="relative hover:text-secondary" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
-    <div class="mobile-hidden flex overflow-hidden rounded-sm border border-primary px-px pb-px pt-1">
+    <div class="hidden overflow-hidden rounded-sm border border-primary px-px pb-px pt-1 md:flex">
       <stat-sparkline :data="data" @selected-point="onSelectedPoint"></stat-sparkline>
     </div>
-    <div class="inline-flex gap-1 rounded bg-base p-px text-xs lg:absolute lg:-left-0.5 lg:-top-2">
+    <div class="inline-flex gap-1 rounded bg-base p-px text-xs md:absolute md:-left-0.5 md:-top-2">
       <div class="font-light uppercase">{{ label }}</div>
       <div class="select-none font-bold">
         {{ mouseOver ? selectedPoint?.value ?? selectedPoint?.y ?? statValue : statValue }}

assets/components/LogViewer/StatSparkline.vue

@@ -12,7 +12,7 @@ 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 x = d3.scaleLinear().range([width, 0]);
+const x = d3.scaleLinear().range([0, width]);
 const y = d3.scaleLinear().range([height, 0]);
 
 const selectedPoint = defineEmit<[value: Point<unknown>]>();

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

@@ -1,105 +1,105 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <!--v-if-->
-    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
+"<ul data-v-2e92daca="" class="events group py-4 medium">
+  <li data-v-2e92daca="" data-key="1" class="group/entry">
+    <div data-v-2e92daca="" class="relative flex w-full items-start gap-x-2" visible-keys="">
       <!--v-if-->
-      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
-        <div class=\\"inline-flex gap-2 whitespace-nowrap text-blue\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" size="small">
+        <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+      </div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+        <!--v-if-->
+        <!--v-if-->
       </div>
-      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
-      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <!--v-if-->
-    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
+"<ul data-v-2e92daca="" class="events group py-4 medium">
+  <li data-v-2e92daca="" data-key="1" class="group/entry">
+    <div data-v-2e92daca="" class="relative flex w-full items-start gap-x-2" visible-keys="">
       <!--v-if-->
-      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
-        <div class=\\"inline-flex gap-2 whitespace-nowrap text-blue\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42</time></div>
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" size="small">
+        <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42</time></div>
+      </div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+        <!--v-if-->
+        <!--v-if-->
       </div>
-      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
-      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <!--v-if-->
-    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
+"<ul data-v-2e92daca="" class="events group py-4 medium">
+  <li data-v-2e92daca="" data-key="1" class="group/entry">
+    <div data-v-2e92daca="" class="relative flex w-full items-start gap-x-2" visible-keys="">
       <!--v-if-->
-      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
-        <div class=\\"inline-flex gap-2 whitespace-nowrap text-blue\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" size="small">
+        <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
-      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
-      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\">This is a message.</div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <!--v-if-->
-    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
-      <!--v-if-->
-      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
-        <div class=\\"inline-flex gap-2 whitespace-nowrap text-blue\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+        <!--v-if-->
+        <!--v-if-->
       </div>
-      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
-      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"\\"><a data-v-2e92daca=\\"\\" class=\\"jump-context tooltip-primary tooltip tooltip-right\\" data-tip=\\"Jump to Context\\" href=\\"#2\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
-        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
-      </svg></a>
-    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
+"<ul data-v-2e92daca="" class="events group py-4 medium">
+  <li data-v-2e92daca="" data-key="2" class="group/entry">
+    <div data-v-2e92daca="" class="relative flex w-full items-start gap-x-2" visible-keys="">
       <!--v-if-->
-      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
-        <div class=\\"inline-flex gap-2 whitespace-nowrap text-blue\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" size="small">
+        <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+      </div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"><mark>test</mark> bar</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+        <!--v-if-->
+        <div class="flex min-w-[0.98rem] items-start justify-end align-bottom hover:cursor-pointer" title="log_actions.jump_to_context"><a class="rounded bg-slate-800/60 px-1.5 py-1 text-primary hover:bg-slate-700" href="#2"><svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
+              <path fill="currentColor" d="m30 28.586l-4.688-4.688a8.028 8.028 0 1 0-1.415 1.414L28.586 30zM19 25a6 6 0 1 1 6-6a6.007 6.007 0 0 1-6 6M2 12h8v2H2zM2 2h16v2H2zm0 5h16v2H2z"></path>
+            </svg></a></div>
       </div>
-      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
-      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\"><mark>test</mark> bar</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <!--v-if-->
-    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
+"<ul data-v-2e92daca="" class="events group py-4 medium">
+  <li data-v-2e92daca="" data-key="1" class="group/entry">
+    <div data-v-2e92daca="" class="relative flex w-full items-start gap-x-2" visible-keys="">
       <!--v-if-->
-      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
-        <div class=\\"inline-flex gap-2 whitespace-nowrap text-blue\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" size="small">
+        <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+      </div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+        <!--v-if-->
+        <!--v-if-->
       </div>
-      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
-      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > renders correctly 1`] = `
-"<div class=\\"flex min-h-[1px] justify-center\\"><span class=\\"loading loading-bars loading-md mt-4 text-primary\\" style=\\"display: none;\\"></span></div>
-<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\"></ul>"
+"<div class="flex min-h-[1px] justify-center"><span class="loading loading-bars loading-md mt-4 text-primary" style="display: none;"></span></div>
+<ul data-v-2e92daca="" class="events group py-4 medium"></ul>"
 `;
 
 exports[`<LogEventSource /> > should parse messages 1`] = `

assets/components/PageWithLinks.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-8 px-4 py-4 md:px-8">
+    <section>
+      <links />
+    </section>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

assets/components/Popup.vue

@@ -4,7 +4,7 @@
     <transition name="fade">
       <div
         v-show="show && (delayedShow || glopbalShow)"
-        class="fixed z-50 rounded border border-secondary/50 bg-base-lighter p-4 shadow"
+        class="fixed z-50 rounded border border-base-content/20 bg-base-lighter p-4 shadow"
         ref="content"
       >
         <slot name="content"></slot>
@@ -14,24 +14,25 @@
 </template>
 
 <script lang="ts" setup>
-import { globalShowPopup } from "@/composables/popup";
+import { globalShowPopup } from "@/composable/popup";
 
 let glopbalShow = globalShowPopup();
 let show = ref(glopbalShow.value);
 let delayedShow = refDebounced(show, 1000);
 
-let content: HTMLElement | null = $ref(null);
+let content = ref<HTMLElement>();
 
 const onMouseEnter = (e: Event) => {
   show.value = true;
   glopbalShow.value = true;
-  if (e.target && content && e.target instanceof Element) {
+
+  if (content.value && e.target instanceof HTMLElement) {
     const { left, top, width } = e.target.getBoundingClientRect();
     const x = left + width + 10;
     const y = top;
 
-    content.style.left = `${x}px`;
-    content.style.top = `${y}px`;
+    content.value.style.left = `${x}px`;
+    content.value.style.top = `${y}px`;
   }
 };
 
@@ -40,7 +41,7 @@ const onMouseLeave = () => {
   glopbalShow.value = false;
 };
 
-const el = useCurrentElement();
+const el: Ref<HTMLElement> = useCurrentElement();
 useEventListener(() => el.value?.nextElementSibling, "mouseenter", onMouseEnter);
 useEventListener(() => el.value?.nextElementSibling, "mouseleave", onMouseLeave);
 </script>

assets/components/Releases.vue

@@ -0,0 +1,74 @@
+<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="self-center stroke-orange" 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="ml-auto bg-red px-1 py-1 text-xs" v-if="release.tag === latest?.tag">
+          {{ $t("releases.latest") }}
+        </tag>
+      </div>
+      <div class="text-sm text-base-content/80">
+        {{ summary(release) }}
+      </div>
+    </li>
+    <li v-else>
+      <div class="text-sm text-base-content/80">
+        {{ $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

@@ -8,7 +8,7 @@
     </header>
     <main :data-scrolling="scrollable ? true : undefined" class="snap-y overflow-auto">
       <div class="invisible mr-28 text-right md:visible" v-show="paused">
-        <scroll-progress :indeterminate="loading" :auto-hide="!loading" class="z-2 !fixed top-16" />
+        <scroll-progress :indeterminate="loading" :auto-hide="!loading" class="!fixed top-16 z-10" />
       </div>
       <div ref="scrollableContent">
         <slot :setLoading="setLoading"></slot>
@@ -20,8 +20,8 @@
     <div class="mr-16 text-right">
       <transition name="fade">
         <button
-          class="fixed bottom-8 rounded bg-primary p-3 text-primary-content shadow transition-colors hover:bg-primary-focus"
-          :class="hasMore ? 'animate-bounce-fast bg-secondary text-secondary-content hover:bg-secondary-focus' : ''"
+          class="btn btn-primary fixed bottom-8 rounded p-3 text-primary-content shadow transition-colors"
+          :class="hasMore ? 'btn-secondary animate-bounce-fast text-secondary-content' : ''"
           @click="scrollToBottom()"
           v-show="paused"
         >

assets/components/Search.vue

@@ -1,29 +1,35 @@
 <template>
-  <div
-    class="fixed -right-px -top-px z-10 flex w-96 items-center gap-4 rounded-bl border border-secondary/20 bg-base-darker p-4 shadow"
-    v-show="showSearch"
-    v-if="search"
-  >
-    <div class="input input-primary flex h-auto items-center">
-      <mdi:magnify />
-      <input
-        class="input flex-1"
-        type="text"
-        placeholder="Find / RegEx"
-        ref="input"
-        v-model="searchFilter"
-        @keyup.esc="resetSearch()"
-      />
+  <transition name="slide">
+    <div
+      class="fixed z-10 flex w-full justify-end p-2"
+      v-show="showSearch"
+      v-if="search"
+      ref="container"
+      :style="style"
+    >
+      <div class="input input-primary flex h-auto items-center !shadow-lg">
+        <mdi:magnify />
+        <input
+          class="input input-ghost w-72 flex-1"
+          type="text"
+          placeholder="Find / RegEx"
+          ref="input"
+          v-model="searchFilter"
+          @keyup.esc="resetSearch()"
+        />
+        <a class="btn btn-circle btn-xs" @click="resetSearch()"> <mdi:close /></a>
+      </div>
     </div>
-
-    <a class="btn btn-circle btn-xs" @click="resetSearch()"> <mdi:close /></a>
-  </div>
+  </transition>
 </template>
 
 <script lang="ts" setup>
 const input = ref<HTMLInputElement>();
+const container = ref<HTMLDivElement>();
 const { searchFilter, showSearch, resetSearch } = useSearchFilter();
 
+const { style } = useDraggable(container);
+
 onKeyStroke("f", (e) => {
   if (e.ctrlKey || e.metaKey) {
     showSearch.value = true;
@@ -32,5 +38,31 @@ onKeyStroke("f", (e) => {
   }
 });
 
+onMounted(() => {
+  onKeyStroke(
+    "f",
+    (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.stopPropagation();
+        resetSearch();
+      }
+    },
+    { target: input.value },
+  );
+});
+
 onUnmounted(() => resetSearch());
 </script>
+
+<style lang="postcss" scoped>
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(-150px);
+  opacity: 0;
+}
+</style>

assets/components/SideMenu.vue

@@ -8,51 +8,55 @@
         </li>
       </ul>
     </div>
+
     <transition :name="sessionHost ? 'slide-left' : 'slide-right'" mode="out-in">
       <ul class="menu p-0" v-if="!sessionHost">
-        <li v-for="host in config.hosts">
-          <a @click.prevent="setHost(host.id)">
+        <li v-for="host in hosts" :key="host.id">
+          <a @click.prevent="setHost(host.id)" :class="{ 'pointer-events-none text-base-content/50': !host.available }">
             <ph:computer-tower />
             {{ host.name }}
+            <span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
           </a>
         </li>
       </ul>
-      <transition-group tag="ul" name="list" class="containers menu p-0 [&_li.menu-title]:px-0" v-else>
-        <li
-          v-for="item in menuItems"
-          :key="item.id"
-          :class="isLabel(item) ? 'menu-title' : item.state"
-          :data-testid="item.id"
-        >
-          <template v-if="isLabel(item)">
-            {{ item.label }}
-          </template>
-          <popup v-else>
-            <router-link
-              :to="{ name: 'container-id', params: { id: item.id } }"
-              active-class="active-primary"
-              :title="item.name"
-            >
-              <div class="truncate">
-                {{ item.name }}<span class="font-light opacity-70" v-if="item.isSwarm">{{ item.swarmId }}</span>
-              </div>
-              <span
-                class="pin"
-                @click.stop.prevent="store.appendActiveContainer(item)"
-                v-show="!activeContainersById[item.id]"
-                :title="$t('tooltip.pin-column')"
-              >
-                <cil:columns />
-              </span>
-
-              <container-health :health="item.health"></container-health>
-            </router-link>
-            <template #content>
-              <container-popup :container="item"></container-popup>
-            </template>
-          </popup>
+      <ul class="containers menu p-0 [&_li.menu-title]:px-0" v-else>
+        <li v-for="{ label, containers, icon } in menuItems" :key="label">
+          <details :open="!collapsedGroups.has(label)" @toggle="updateCollapsedGroups($event, label)">
+            <summary class="font-light text-base-content/80">
+              <component :is="icon" />
+              {{ label.startsWith("label.") ? $t(label) : label }}
+            </summary>
+            <ul>
+              <li v-for="item in containers" :class="item.state" :key="item.id">
+                <popup>
+                  <router-link
+                    :to="{ name: 'container-id', params: { id: item.id } }"
+                    active-class="active-primary"
+                    @click.alt.stop.prevent="store.appendActiveContainer(item)"
+                    :title="item.name"
+                  >
+                    <div class="truncate">
+                      {{ item.name }}<span class="font-light opacity-70" v-if="item.isSwarm">{{ item.swarmId }}</span>
+                    </div>
+                    <container-health :health="item.health"></container-health>
+                    <span
+                      class="pin"
+                      @click.stop.prevent="store.appendActiveContainer(item)"
+                      v-show="!activeContainersById[item.id]"
+                      :title="$t('tooltip.pin-column')"
+                    >
+                      <cil:columns />
+                    </span>
+                  </router-link>
+                  <template #content>
+                    <container-popup :container="item"></container-popup>
+                  </template>
+                </popup>
+              </li>
+            </ul>
+          </details>
         </li>
-      </transition-group>
+      </ul>
     </transition>
   </div>
   <div role="status" class="flex animate-pulse flex-col gap-4" v-else>
@@ -63,72 +67,88 @@
 
 <script lang="ts" setup>
 import { Container } from "@/models/Container";
-import { sessionHost } from "@/composables/storage";
+import { sessionHost } from "@/composable/storage";
 
-const { t } = useI18n();
+// @ts-ignore
+import Pin from "~icons/ph/map-pin-simple";
+// @ts-ignore
+import Stack from "~icons/ph/stack";
+// @ts-ignore
+import Containers from "~icons/octicon/container-24";
 
 const store = useContainerStore();
 
 const { activeContainers, visibleContainers, ready } = storeToRefs(store);
+const { hosts } = useHosts();
 
-function setHost(host: string | null) {
-  sessionHost.value = host;
-}
+const setHost = (host: string | null) => (sessionHost.value = host);
 
-const debouncedIds = debouncedRef(pinnedContainers, 200);
+const collapsedGroups = useProfileStorage("collapsedGroups", new Set<string>());
+const updateCollapsedGroups = (event: Event, label: string) => {
+  const details = event.target as HTMLDetailsElement;
+  if (details.open) {
+    collapsedGroups.value.delete(label);
+  } else {
+    collapsedGroups.value.add(label);
+  }
+};
+
+const debouncedPinnedContainers = debouncedRef(pinnedContainers, 200);
 const sortedContainers = computed(() =>
-  visibleContainers.value
-    .filter((c) => c.host === sessionHost.value)
-    .sort((a, b) => {
-      if (a.state === "running" && b.state !== "running") {
-        return -1;
-      } else if (a.state !== "running" && b.state === "running") {
-        return 1;
-      } else {
-        return a.name.localeCompare(b.name);
-      }
-    }),
+  visibleContainers.value.filter((c) => c.host === sessionHost.value).sort(sorter),
 );
 
-const groupedContainers = computed(() =>
-  sortedContainers.value.reduce(
-    (acc, item) => {
-      if (debouncedIds.value.has(item.storageKey)) {
-        acc.pinned.push(item);
-      } else {
-        acc.unpinned.push(item);
-      }
-      return acc;
-    },
-    { pinned: [] as Container[], unpinned: [] as Container[] },
-  ),
-);
-
-type MenuLabel = { label: string; id: string; state: string };
-const pinnedLabel = { label: t("label.pinned"), id: "pinned", state: "label" } as MenuLabel;
-const allLabel = { label: t("label.containers"), id: "containers", state: "label" } as MenuLabel;
-
-function isLabel(item: Container | MenuLabel): item is MenuLabel {
-  return (item as MenuLabel).label !== undefined;
-}
+const sorter = (a: Container, b: Container) => {
+  if (a.state === "running" && b.state !== "running") {
+    return -1;
+  } else if (a.state !== "running" && b.state === "running") {
+    return 1;
+  } else {
+    return a.name.localeCompare(b.name);
+  }
+};
 
 const menuItems = computed(() => {
-  if (groupedContainers.value.pinned.length > 0) {
-    return [pinnedLabel, ...groupedContainers.value.pinned, allLabel, ...groupedContainers.value.unpinned];
-  } else {
-    return [allLabel, ...groupedContainers.value.unpinned];
-  }
-});
+  const namespaced: Record<string, Container[]> = {};
+  const pinned = [];
+  const singular = [];
 
-const hosts = computed(() =>
-  config.hosts.reduce(
-    (acc, item) => {
-      acc[item.id] = item;
-      return acc;
-    },
-    {} as Record<string, { name: string; id: string }>,
-  ),
-);
+  for (const item of sortedContainers.value) {
+    const namespace = item.labels["com.docker.stack.namespace"] ?? item.labels["com.docker.compose.project"];
+    if (debouncedPinnedContainers.value.has(item.name)) {
+      pinned.push(item);
+    } else if (namespace) {
+      namespaced[namespace] ||= [];
+      namespaced[namespace].push(item);
+    } else {
+      singular.push(item);
+    }
+  }
+
+  const items = [];
+  if (pinned.length) {
+    items.push({ label: "label.pinned", containers: pinned, icon: Pin });
+  }
+  for (const [label, containers] of Object.entries(namespaced).sort(([a], [b]) => a.localeCompare(b))) {
+    if (containers.length > 1) {
+      items.push({ label, containers, icon: Stack });
+    } else {
+      singular.push(containers[0]);
+    }
+  }
+
+  singular.sort(sorter);
+
+  if (singular.length) {
+    items.push({
+      label: showAllContainers.value ? "label.all-containers" : "label.running-containers",
+      containers: singular,
+      icon: Containers,
+    });
+  }
+
+  return items;
+});
 
 const activeContainersById = computed(() =>
   activeContainers.value.reduce(
@@ -145,7 +165,7 @@ const activeContainersById = computed(() =>
   @apply text-[0.95rem];
 }
 .containers a {
-  @apply auto-cols-[auto_max-content];
+  @apply auto-cols-[auto_max-content_max-content];
   .pin {
     display: none;
 

assets/components/SidePanel.vue

@@ -12,33 +12,21 @@
       </small>
     </h1>
 
-    <div class="flex gap-4">
-      <router-link
-        :to="{ name: 'settings' }"
-        :aria-label="$t('title.settings')"
-        data-testid="settings"
-        class="btn btn-circle btn-sm"
-      >
-        <mdi:cog />
-      </router-link>
-      <a :href="`${base}/logout`" :title="$t('button.logout')" v-if="secured" class="btn btn-circle btn-sm">
-        <mdi:logout />
-      </a>
-    </div>
-    <a
+    <button
       class="input input-sm mt-4 inline-flex cursor-pointer items-center gap-2 font-light hover:border-primary"
       @click="$emit('search')"
       :title="$t('tooltip.search')"
+      data-testid="search"
     >
       <mdi:magnify />
-      Search
-      <key-shortcut char="k"></key-shortcut>
-    </a>
+      {{ $t("placeholder.search") }}
+      <key-shortcut char="k" class="text-base-content/70"></key-shortcut>
+    </button>
 
     <side-menu class="mt-4"></side-menu>
   </aside>
 </template>
 
 <script lang="ts" setup>
-const { base, secured, hostname } = config;
+const { hostname } = config;
 </script>

assets/components/common/DateTime.vue

@@ -10,13 +10,30 @@ const props = defineProps<{
   date: Date;
 }>();
 
-const dateFormatter = new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
-const use12Hour = $computed(() => ({ auto: undefined, "12": true, "24": false })[hourStyle.value]);
-const timeFormatter = $computed(
+const dateOverride = computed(() => (dateLocale.value === "auto" ? undefined : dateLocale.value));
+const dateFormatter = computed(
+  () => new Intl.DateTimeFormat(dateOverride.value, { day: "2-digit", month: "2-digit", year: "numeric" }),
+);
+const hourCycle = computed(() => {
+  switch (hourStyle.value) {
+    case "auto":
+      return undefined;
+    case "12":
+      return "h12";
+    case "24":
+      return "h23";
+  }
+});
+const timeFormatter = computed(
   () =>
-    new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: use12Hour }),
+    new Intl.DateTimeFormat(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hourCycle: hourCycle.value,
+    }),
 );
 
-const dateStr = $computed(() => dateFormatter.format(props.date));
-const timeStr = $computed(() => timeFormatter.format(props.date));
+const dateStr = computed(() => dateFormatter.value.format(props.date));
+const timeStr = computed(() => timeFormatter.value.format(props.date));
 </script>

assets/components/common/DistanceTime.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script lang="ts" setup>
-import formatDistanceToNow from "date-fns/formatDistanceToNow";
-import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";
+import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
+import { formatDistanceToNowStrict } from "date-fns/formatDistanceToNowStrict";
 
 const {
   date,

assets/components/common/Dropdown.vue

@@ -1,44 +1,25 @@
 <template>
-  <details class="dropdown" ref="details" v-on-click-outside="close">
-    <summary class="btn btn-primary flex-nowrap" v-bind="$attrs">
-      <slot name="trigger"> {{ values[modelValue] ?? defaultLabel }} <carbon:caret-down /></slot>
-    </summary>
-    <ul class="menu dropdown-content rounded-box z-50 w-52 bg-base p-2 shadow">
-      <slot>
-        <li v-for="item in options">
-          <a @click="modelValue = item.value">
-            <mdi-light:check class="w-4" v-if="modelValue == item.value" />
-            <div v-else class="w-4"></div>
-            {{ item.label }}
-          </a>
-        </li>
-      </slot>
-    </ul>
-  </details>
+  <div class="dropdown">
+    <label tabindex="0" class="btn btn-circle btn-sm" @mousedown="checkAndCloseDropDown($event)" @blur="closed()">
+      <slot name="trigger"></slot>
+    </label>
+    <div
+      tabindex="0"
+      class="dropdown-content z-50 mt-1 min-w-52 rounded-box border border-base-content/20 bg-base p-2 shadow"
+    >
+      <slot name="content"></slot>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup>
-import { vOnClickOutside } from "@vueuse/components";
-type DropdownItem = {
-  label: string;
-  value: string;
-};
-const { options = [], defaultLabel = "" } = defineProps<{ options?: DropdownItem[]; defaultLabel?: string }>();
-const { modelValue } = defineModels<{
-  modelValue: string;
-}>();
-
-const values = computed(() =>
-  options.reduce(
-    (acc, curr) => {
-      acc[curr.value] = curr.label;
-      return acc;
-    },
-    {} as Record<string, string>,
-  ),
-);
-
-const details = ref<HTMLElement | null>(null);
-const close = () => details.value?.removeAttribute("open");
-watch(modelValue, () => close());
+<script setup lang="ts">
+const closed = defineEmit();
+function checkAndCloseDropDown(e: MouseEvent) {
+  const target = e.currentTarget as HTMLElement;
+  if (target?.matches(":focus")) {
+    setTimeout(() => target.blur(), 0);
+  }
+}
 </script>
+
+<style scoped></style>

assets/components/common/DropdownMenu.vue

@@ -0,0 +1,40 @@
+<template>
+  <details class="dropdown" ref="details" v-on-click-outside="close">
+    <summary class="btn btn-primary flex-nowrap" v-bind="$attrs">
+      <slot name="trigger"> {{ label }} <carbon:caret-down /></slot>
+    </summary>
+    <ul class="menu dropdown-content z-50 mt-1 w-52 rounded-box border border-base-content/20 bg-base p-2 shadow">
+      <slot>
+        <li v-for="item in options">
+          <a @click="modelValue = item.value">
+            <mdi:check class="w-4" v-if="modelValue == item.value" />
+            <div v-else class="w-4"></div>
+            {{ item.label }}
+          </a>
+        </li>
+      </slot>
+    </ul>
+  </details>
+</template>
+
+<script lang="ts" setup generic="T">
+import { vOnClickOutside } from "@vueuse/components";
+type DropdownItem = {
+  label: string;
+  value: T;
+};
+
+const { modelValue } = defineModels<{
+  modelValue: T;
+}>();
+
+const { options = [], defaultLabel = "" } = defineProps<{
+  options?: DropdownItem[];
+  defaultLabel?: string;
+}>();
+
+const label = computed(() => options.find((item) => item.value === modelValue.value)?.label ?? defaultLabel);
+const details = ref<HTMLElement | null>(null);
+const close = () => details.value?.removeAttribute("open");
+watch(modelValue, () => close());
+</script>

assets/components/common/KeyShortcut.vue

@@ -4,8 +4,8 @@
       <carbon:mac-shift />
     </template>
     <template v-if="modifiers.includes('meta')">
-      <ph:command v-if="isMac" class="h-4 w-4" />
-      <ph:control-bold v-else class="h-4 w-4" />
+      <ph:command v-if="isMac" class="size-4" />
+      <ph:control-bold v-else class="size-4" />
     </template>
     <kbd class="uppercase">{{ char }}</kbd>
   </div>

assets/components/common/LabeledInput.vue

@@ -0,0 +1,10 @@
+<template>
+  <label class="label cursor-pointer gap-4">
+    <div class="label-text"><slot name="label" /></div>
+    <slot name="input" />
+  </label>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

assets/components/common/MobileMenu.vue

@@ -9,7 +9,7 @@
 
       <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="h-5 w-5" />
+          <mdi:magnify class="size-5" />
         </a>
         <label class="btn btn-circle swap swap-rotate" data-testid="hamburger">
           <input type="checkbox" v-model="show" />
@@ -20,26 +20,20 @@
     </div>
 
     <transition name="fade">
-      <div v-show="show">
+      <div v-show="show" class="h-[calc(100vh-60px)] overflow-auto">
         <div class="mt-4 flex items-center justify-center gap-2">
-          <dropdown
+          <dropdown-menu
             v-model="sessionHost"
             :options="hosts"
             defaultLabel="Hosts"
             class="btn-sm"
             v-if="config.hosts.length > 1"
           />
-          <router-link :to="{ name: 'settings' }" class="btn btn-outline btn-sm">
-            <mdi:cog /> {{ $t("button.settings") }}
-          </router-link>
-          <a class="btn btn-outline btn-sm" :href="`${base}/logout`" :title="$t('button.logout')" v-if="secured">
-            <mdi:logout /> {{ $t("button.logout") }}
-          </a>
         </div>
 
         <ul class="menu">
           <li class="menu-title">{{ $t("label.containers") }}</li>
-          <li v-for="item in sortedContainers" :key="item.id">
+          <li v-for="item in sortedContainers" :key="item.id" :class="item.state">
             <router-link
               :to="{ name: 'container-id', params: { id: item.id } }"
               active-class="active-primary"
@@ -56,8 +50,7 @@
 </template>
 
 <script lang="ts" setup>
-const { base, secured } = config;
-import { sessionHost } from "@/composables/storage";
+import { sessionHost } from "@/composable/storage";
 const store = useContainerStore();
 const route = useRoute();
 const { visibleContainers } = storeToRefs(store);
@@ -85,6 +78,10 @@ const sortedContainers = computed(() =>
 const hosts = computed(() => config.hosts.map(({ id, name }) => ({ value: id, label: name })));
 </script>
 <style scoped lang="postcss">
+li.exited {
+  @apply opacity-50;
+}
+
 .fade-enter-active,
 .fade-leave-active {
   @apply transition-opacity;

assets/components/common/Toggle.vue

@@ -1,8 +1,12 @@
 <template>
-  <label class="label inline-flex cursor-pointer gap-4 font-normal">
-    <input type="checkbox" class="toggle toggle-primary hover:bg-primary-focus" v-model="modelValue" />
-    <slot />
-  </label>
+  <labeled-input>
+    <template #label>
+      <slot />
+    </template>
+    <template #input>
+      <input type="checkbox" class="toggle toggle-primary" v-model="modelValue" />
+    </template>
+  </labeled-input>
 </template>
 
 <script lang="ts" setup>

assets/composable/containerActions.ts

@@ -0,0 +1,45 @@
+type ContainerActions = "start" | "stop" | "restart";
+export const useContainerActions = () => {
+  const { container } = useContainerContext();
+  const { showToast } = useToast();
+
+  const actionStates = reactive({
+    stop: false,
+    restart: false,
+    start: false,
+  });
+
+  async function actionHandler(action: ContainerActions) {
+    const actionUrl = `/api/hosts/${container.value.host}/containers/${container.value.id}/actions/${action}`;
+
+    const errors = {
+      404: "container not found",
+      500: "unable to complete action",
+      400: "invalid action",
+    } as Record<number, string>;
+
+    const defaultError = "something went wrong";
+    const toastTitle = "Action Failed";
+
+    actionStates[action] = true;
+
+    try {
+      const response = await fetch(withBase(actionUrl), { method: "POST" });
+      if (!response.ok) {
+        const message = errors[response.status] ?? defaultError;
+        showToast({ type: "error", message, title: toastTitle });
+      }
+    } catch (error) {
+      showToast({ type: "error", message: defaultError, title: toastTitle });
+    }
+
+    actionStates[action] = false;
+  }
+
+  return {
+    actionStates,
+    start: () => actionHandler("start"),
+    stop: () => actionHandler("stop"),
+    restart: () => actionHandler("restart"),
+  };
+};

assets/composable/eventsource.ts

@@ -85,7 +85,9 @@ export function useLogStream() {
     console.debug(`Connecting to ${containerId} with params`, params);
 
     es = new EventSource(
-      withBase(`/api/logs/stream/${container.value.host}/${containerId}?${new URLSearchParams(params).toString()}`),
+      withBase(
+        `/api/hosts/${container.value.host}/containers/${containerId}/logs/stream?${new URLSearchParams(params).toString()}`,
+      ),
     );
     es.addEventListener("container-stopped", () => {
       close();
@@ -118,7 +120,9 @@ export function useLogStream() {
 
     const logs = await (
       await fetch(
-        withBase(`/api/logs/${container.value.host}/${containerId}?${new URLSearchParams(params).toString()}`),
+        withBase(
+          `/api/hosts/${container.value.host}/containers/${containerId}/logs?${new URLSearchParams(params).toString()}`,
+        ),
       )
     ).text();
     if (logs) {

assets/composable/logSearchContext.ts

@@ -0,0 +1,16 @@
+import { JSONObject, LogEntry } from "@/models/LogEntry";
+
+const lastSelectedItem = ref<LogEntry<string | JSONObject> | undefined>(undefined);
+export const useLogSearchContext = () => {
+  const { resetSearch } = useSearchFilter();
+
+  function handleJumpLineSelected(e: Event, item: LogEntry<string | JSONObject>) {
+    lastSelectedItem.value = item;
+    resetSearch();
+  }
+
+  return {
+    lastSelectedItem,
+    handleJumpLineSelected,
+  };
+};

assets/composable/profileStorage.ts

@@ -0,0 +1,36 @@
+import { Profile } from "@/stores/config";
+
+export function useProfileStorage<K extends keyof Profile>(key: K, defaultValue: NonNullable<Profile[K]>) {
+  const storageKey = "DOZZLE_" + key.toUpperCase();
+  const storage = useStorage<NonNullable<Profile[K]>>(storageKey, defaultValue, undefined, {
+    writeDefaults: false,
+    mergeDefaults: true,
+  });
+
+  if (config.profile?.[key]) {
+    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]>;
+    } else if (config.profile[key] instanceof Array) {
+      storage.value = config.profile[key] as NonNullable<Profile[K]>;
+    } else if (config.profile[key] instanceof Object) {
+      Object.assign(storage.value, config.profile[key]);
+    } else {
+      storage.value = config.profile[key] as NonNullable<Profile[K]>;
+    }
+  }
+
+  if (config.user) {
+    watch(
+      storage,
+      (value) => {
+        fetch(withBase("/api/profile"), {
+          method: "PATCH",
+          body: JSON.stringify({ [key]: value }, (_, value) => (value instanceof Set ? [...value] : value)),
+        });
+      },
+      { deep: true },
+    );
+  }
+
+  return storage;
+}

assets/composable/search.ts

@@ -25,7 +25,7 @@ function matchRecord(record: Record<string, any>, regex: RegExp): boolean {
 export function useSearchFilter() {
   const regex = $computed(() => {
     const isSmartCase = debouncedSearchFilter.value === debouncedSearchFilter.value.toLowerCase();
-    return new RegExp(encodeXML(debouncedSearchFilter.value), isSmartCase ? "i" : undefined);
+    return new RegExp(encodeXML(debouncedSearchFilter.value), isSmartCase ? "ig" : "g");
   });
 
   function filteredMessages(messages: Ref<LogEntry<string | JSONObject>[]>) {

assets/composable/storage.ts

@@ -0,0 +1,24 @@
+import { Container } from "@/models/Container";
+
+const DOZZLE_HOST = "DOZZLE_HOST";
+export const sessionHost = useSessionStorage<string | null>(DOZZLE_HOST, null);
+
+if (config.hosts.length === 1 && !sessionHost.value) {
+  sessionHost.value = config.hosts[0].id;
+}
+
+export function persistentVisibleKeys(container: Ref<Container>): Ref<string[][]> {
+  const storage = useProfileStorage("visibleKeys", {});
+  return computed(() => {
+    if (!(container.value.storageKey in storage.value)) {
+      // Returning a temporary ref here to avoid writing an empty array to storage
+      const visibleKeys = ref<string[][]>([]);
+      watchOnce(visibleKeys, () => (storage.value[container.value.storageKey] = visibleKeys.value), { deep: true });
+      return visibleKeys.value;
+    }
+
+    return storage.value[container.value.storageKey];
+  });
+}
+
+export const pinnedContainers = useProfileStorage("pinned", new Set<string>());

assets/composable/visible.ts

@@ -1,12 +1,12 @@
 import { ComplexLogEntry, type JSONObject, type LogEntry } from "@/models/LogEntry";
-import type { ComputedRef, Ref } from "vue";
+import type { Ref } from "vue";
 
-export function useVisibleFilter(visibleKeys: ComputedRef<Ref<string[][]>>) {
+export function useVisibleFilter(visibleKeys: Ref<string[][]>) {
   function filteredPayload(messages: Ref<LogEntry<string | JSONObject>[]>) {
     return computed(() => {
       return messages.value.map((d) => {
         if (d instanceof ComplexLogEntry) {
-          return ComplexLogEntry.fromLogEvent(d, visibleKeys.value);
+          return ComplexLogEntry.fromLogEvent(d, visibleKeys);
         } else {
           return d;
         }

assets/composables/storage.ts

@@ -1,15 +0,0 @@
-import { Container } from "@/models/Container";
-
-const DOZZLE_HOST = "DOZZLE_HOST";
-export const sessionHost = useSessionStorage<string | null>(DOZZLE_HOST, null);
-
-if (config.hosts.length === 1 && !sessionHost.value) {
-  sessionHost.value = config.hosts[0].id;
-}
-
-export function persistentVisibleKeys(container: Ref<Container>) {
-  return computed(() => useStorage(container.value.storageKey, []));
-}
-
-const DOZZLE_PINNED_CONTAINERS = "DOZZLE_PINNED_CONTAINERS";
-export const pinnedContainers = useStorage(DOZZLE_PINNED_CONTAINERS, new Set<string>());

assets/layouts/default.vue

@@ -1,8 +1,8 @@
 <template>
-  <div v-if="!authorizationNeeded">
-    <mobile-menu v-if="isMobile" @search="showFuzzySearch"></mobile-menu>
+  <div>
+    <mobile-menu v-if="isMobile && !forceMenuHidden" @search="showFuzzySearch"></mobile-menu>
     <splitpanes @resized="onResized($event)">
-      <pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav">
+      <pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav && !forceMenuHidden">
         <side-panel @search="showFuzzySearch"></side-panel>
       </pane>
       <pane min-size="10">
@@ -25,12 +25,12 @@
       </pane>
     </splitpanes>
     <label
-      class="btn btn-circle swap swap-rotate fixed bottom-8 left-4"
-      :class="{ '!-left-3': collapseNav }"
-      v-if="!isMobile"
+      class="btn btn-circle swap btn-neutral swap-rotate fixed -left-12 bottom-4 w-16 transition-all hover:-left-4"
+      :class="{ '!-left-6': collapseNav }"
+      v-if="!isMobile && !forceMenuHidden"
     >
       <input type="checkbox" v-model="collapseNav" />
-      <mdi:chevron-right class="swap-on text-secondary" />
+      <mdi:chevron-right class="swap-on" />
       <mdi:chevron-left class="swap-off" />
     </label>
   </div>
@@ -47,13 +47,18 @@
       class="alert max-w-xl"
       v-for="toast in toasts"
       :key="toast.id"
-      :class="{ 'alert-error': toast.type === 'error', 'alert-info': toast.type === 'info' }"
+      :class="{
+        'alert-error': toast.type === 'error',
+        'alert-info': toast.type === 'info',
+        'alert-warning': toast.type === 'warning',
+      }"
     >
-      <carbon:information class="h-6 w-6 shrink-0 stroke-current" v-if="toast.type === 'info'" />
-      <carbon:warning class="h-6 w-6 shrink-0 stroke-current" v-else-if="toast.type === 'error'" />
+      <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>
-        {{ toast.message }}
+        <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>
@@ -66,7 +71,6 @@
 // @ts-ignore - splitpanes types are not available
 import { Splitpanes, Pane } from "splitpanes";
 import { collapseNav } from "@/stores/settings";
-const { authorizationNeeded } = config;
 
 const containerStore = useContainerStore();
 const { activeContainers } = storeToRefs(containerStore);
@@ -75,6 +79,8 @@ const { toasts, removeToast } = useToast();
 
 const modal = ref<HTMLDialogElement>();
 const open = ref(false);
+const searchParams = new URLSearchParams(window.location.search);
+const forceMenuHidden = ref(searchParams.has("hideMenu"));
 
 watch(open, () => {
   if (open.value) {

assets/layouts/splash.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="hero min-h-screen">
+  <div class="hero min-h-dvh">
     <div class="hero-content">
       <router-view></router-view>
     </div>

assets/main.css

@@ -1,27 +1,5 @@
 @import "splitpanes/dist/splitpanes.css";
 
-@define-mixin light {
-  --base-lighter-color: 0 0% 100%;
-  --base-color: 0 0% 97%;
-  --base-darker-color: 0 0% 90%;
-  --base-content-color: 0 0% 21%;
-  --primary-color: 171 100% 41%;
-  --primary-focus-color: 171 100% 31%;
-  --secondary-color: 34 95% 53%;
-  --secondary-focus-color: 34 95% 43%;
-}
-
-@define-mixin dark {
-  --base-lighter-color: 0 0% 14%;
-  --base-color: 0 0% 7%;
-  --base-darker-color: 0 0% 4%;
-  --base-content-color: 0 0% 86%;
-  --primary-color: 171 100% 41%;
-  --primary-focus-color: 171 100% 31%;
-  --secondary-color: 44 100% 77%;
-  --secondary-focus-color: 44 100% 67%;
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -29,36 +7,39 @@
 @layer base {
   :root {
     --p: var(--primary-color);
-    --pf: var(--primary-focus-color);
-    --pc: 0 0% 100%;
+    --pc: 89.23% 0;
     --s: var(--secondary-color);
-    --sf: var(--secondary-focus-color);
-    --sc: 0 0% 4%;
+    --sc: 14.57% 0 0;
     --b1: var(--base-lighter-color);
     --b2: var(--base-color);
     --b3: var(--base-darker-color);
     --bc: var(--base-content-color);
-    --in: 207 90% 54%;
-    --inc: 207 90% 94%;
-    --er: 4 90% 58%;
-    --erc: 4 90% 98%;
+    --in: 65% 0.171 249.5;
+    --inc: 100% 0 0;
+    --er: 64% 0.218 28.85;
+    --erc: 100% 0 0;
+    --wa: 70% 0.186 48.13;
+    --wac: 100% 0 0;
+    --n: var(--base-lighter-color);
   }
   html[data-theme="dark"] {
-    @mixin dark;
-  }
-  @media (prefers-color-scheme: dark) {
-    html {
-      @mixin dark;
-    }
+    --base-lighter-color: 25% 0 0;
+    --base-color: 18% 0 0;
+    --base-darker-color: 11% 0 0;
+    --base-content-color: 89.23% 0 0;
+    --primary-color: 70.96% 0.143 176.65;
+    --secondary-color: 91.36% 0.11098 90.1243;
   }
+
   html[data-theme="light"] {
-    @mixin light;
-  }
-  @media (prefers-color-scheme: light) {
-    html {
-      @mixin light;
-    }
+    --base-lighter-color: 100% 0 0;
+    --base-color: 97% 0 0;
+    --base-darker-color: 90% 0 0;
+    --base-content-color: 33% 0 0;
+    --primary-color: 79.96% 0.143 176.65;
+    --secondary-color: 82.67% 0.15380739746702807 77.82;
   }
+
   @media screen and (max-device-width: 480px) {
     body {
       -webkit-text-size-adjust: 100%;
@@ -77,7 +58,7 @@
     @apply text-lg;
   }
 
-  mark {
+  .events mark {
     @apply inline-block rounded-sm bg-secondary;
     animation: pops 200ms ease-out;
   }
@@ -94,7 +75,10 @@
 
 @layer components {
   .input {
-    @apply focus:outline-none;
+    @apply !outline-none;
+    &.input-ghost {
+      @apply focus:border-transparent;
+    }
   }
 
   .btn {
@@ -118,4 +102,8 @@
     --nc: var(--pc);
     @apply active;
   }
+
+  .link-primary {
+    @apply underline-offset-4 hover:underline;
+  }
 }

assets/main.ts

@@ -1,4 +1,3 @@
-// import "./styles.scss";
 import "./main.css";
 import { createApp, App as VueApp } from "vue";
 import App from "./App.vue";

assets/models/Container.spec.ts

@@ -18,7 +18,7 @@ describe("Container", () => {
   ];
 
   test.each(names)("name %s should be %s and %s", (name, expectedName, expectedSwarmId) => {
-    const c = new Container("id", new Date(), "image", name!, "command", "host", "status", "created");
+    const c = new Container("id", new Date(), "image", name!, "command", "host", {}, "status", "created", []);
     expect(c.name).toBe(expectedName);
     expect(c.swarmId).toBe(expectedSwarmId);
   });

assets/models/Container.ts

@@ -1,6 +1,5 @@
 import type { ContainerHealth, ContainerStat, ContainerState } from "@/types/Container";
-import type { UseThrottledRefHistoryReturn } from "@vueuse/core";
-import { useExponentialMovingAverage } from "@/utils";
+import { useExponentialMovingAverage, useSimpleRefHistory } from "@/utils";
 import { Ref } from "vue";
 
 type Stat = Omit<ContainerStat, "id">;
@@ -19,7 +18,7 @@ const hosts = computed(() =>
 
 export class Container {
   private _stat: Ref<Stat>;
-  private readonly throttledStatHistory: UseThrottledRefHistoryReturn<Stat, Stat>;
+  private readonly _statsHistory: Ref<Stat[]>;
   public readonly swarmId: string | null = null;
   public readonly isSwarm: boolean = false;
   private readonly movingAverageStat: Ref<Stat>;
@@ -31,12 +30,14 @@ export class Container {
     public readonly name: string,
     public readonly command: string,
     public readonly host: string,
+    public readonly labels = {} as Record<string, string>,
     public status: string,
     public state: ContainerState,
+    stats: Stat[],
     public health?: ContainerHealth,
   ) {
     this._stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
-    this.throttledStatHistory = useThrottledRefHistory(this._stat, { capacity: 300, deep: true, throttle: 1000 });
+    this._statsHistory = useSimpleRefHistory(this._stat, { capacity: 300, deep: true, initial: stats });
     this.movingAverageStat = useExponentialMovingAverage(this._stat, 0.2);
 
     const match = name.match(SWARM_ID_REGEX);
@@ -47,8 +48,8 @@ export class Container {
     }
   }
 
-  get statHistory() {
-    return unref(this.throttledStatHistory.history);
+  get statsHistory() {
+    return unref(this._statsHistory);
   }
 
   get movingAverage() {

assets/models/LogEntry.ts

@@ -9,11 +9,12 @@ export type JSONValue = string | number | boolean | JSONObject | Array<JSONValue
 export type JSONObject = { [x: string]: JSONValue };
 export type Position = "start" | "end" | "middle" | undefined;
 export type Std = "stdout" | "stderr";
+export type Level = "debug" | "info" | "warn" | "error" | "fatal" | "trace" | "unknown";
 export interface LogEvent {
   readonly m: string | JSONObject;
   readonly ts: number;
   readonly id: number;
-  readonly l: string;
+  readonly l: Level;
   readonly p: Position;
   readonly s: "stdout" | "stderr" | "unknown";
 }
@@ -25,7 +26,7 @@ export abstract class LogEntry<T extends string | JSONObject> {
     public readonly id: number,
     public readonly date: Date,
     public readonly std: Std,
-    public readonly level?: string,
+    public readonly level?: Level,
   ) {
     this._message = message;
   }
@@ -42,7 +43,7 @@ export class SimpleLogEntry extends LogEntry<string> {
     message: string,
     id: number,
     date: Date,
-    public readonly level: string,
+    public readonly level: Level,
     public readonly position: Position,
     public readonly std: Std,
   ) {
@@ -60,7 +61,7 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
     message: JSONObject,
     id: number,
     date: Date,
-    public readonly level: string,
+    public readonly level: Level,
     public readonly std: Std,
     visibleKeys?: Ref<string[][]>,
   ) {
@@ -144,7 +145,15 @@ export class SkippedLogsEntry extends LogEntry<string> {
 }
 
 export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
-  if (typeof event.m === "string") {
+  if (isObject(event.m)) {
+    return new ComplexLogEntry(
+      event.m,
+      event.id,
+      new Date(event.ts),
+      event.l,
+      event.s === "unknown" ? "stderr" : event.s ?? "stderr",
+    );
+  } else {
     return new SimpleLogEntry(
       event.m,
       event.id,
@@ -153,13 +162,5 @@ export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
       event.p,
       event.s === "unknown" ? "stderr" : event.s ?? "stderr",
     );
-  } else {
-    return new ComplexLogEntry(
-      event.m,
-      event.id,
-      new Date(event.ts),
-      event.l,
-      event.s === "unknown" ? "stderr" : event.s ?? "stderr",
-    );
   }
 }

assets/modules/i18n.ts

@@ -1,19 +1,23 @@
 import { type App } from "vue";
 import { createI18n } from "vue-i18n";
+import { locale } from "@/stores/settings";
 
 import messages from "@intlify/unplugin-vue-i18n/messages";
 
-const locale = messages?.hasOwnProperty(navigator.language) ? navigator.language : navigator.language.slice(0, 2);
+const defaultLocale = messages?.hasOwnProperty(navigator.language)
+  ? navigator.language
+  : navigator.language.slice(0, 2);
 
 const i18n = createI18n({
   legacy: false,
-  locale: locale,
+  locale: locale.value || defaultLocale,
   fallbackLocale: "en",
   messages,
 });
 
-export const install = (app: App) => {
-  app.use(i18n);
-};
+watch(locale, (value) => {
+  i18n.global.locale.value = value || defaultLocale;
+});
 
+export const install = (app: App) => app.use(i18n);
 export default i18n;

assets/modules/router.ts

@@ -3,13 +3,12 @@ import { createRouter, createWebHistory } from "vue-router";
 import pages from "~pages";
 import { setupLayouts } from "virtual:generated-layouts";
 
+const routes = setupLayouts(pages);
+export const router = createRouter({
+  history: createWebHistory(withBase("/")),
+  routes,
+});
+
 export const install = (app: App) => {
-  const routes = setupLayouts(pages);
-
-  const router = createRouter({
-    history: createWebHistory(withBase("/")),
-    routes,
-  });
-
   app.use(router);
 };

assets/pages/[...all].vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="hero min-h-screen bg-base-200">
-    <div class="hero-content text-center">
-      <div class="max-w-md">
-        <p class="py-6 text-2xl font-bold">{{ $t("error.page-not-found") }}</p>
+  <page-with-links>
+    <div class="hero min-h-screen bg-base-200">
+      <div class="hero-content text-center">
+        <div class="max-w-md">
+          <p class="py-6 text-2xl font-bold">{{ $t("error.page-not-found") }}</p>
+        </div>
       </div>
     </div>
-  </div>
+  </page-with-links>
 </template>
 
 <script lang="ts" setup>

assets/pages/index.vue

@@ -1,89 +1,33 @@
 <template>
-  <div class="flex flex-col gap-16 px-4 pt-8 md:px-8">
-    <section v-if="config.user">
-      <div class="flex items-center justify-end gap-4">
-        <div v-if="config.authProvider === 'simple'">
-          <button @click.prevent="logout()" class="link-primary">{{ $t("button.logout") }}</button>
-        </div>
-        <div>
-          {{ config.user.name ? config.user.name : config.user.email }}
-        </div>
-        <img class="h-10 w-10 rounded-full p-1 ring-2 ring-base-content/50" :src="config.user.avatar" />
-      </div>
-    </section>
+  <page-with-links>
     <section>
-      <div class="stats grid bg-base-lighter shadow">
-        <div class="stat">
-          <div class="stat-value">{{ runningContainers.length }} / {{ containers.length }}</div>
-          <div class="stat-title">{{ $t("label.running") }} / {{ $t("label.total-containers") }}</div>
-        </div>
-        <div class="stat">
-          <div class="stat-value">{{ totalCpu }}%</div>
-          <div class="stat-title">{{ $t("label.total-cpu-usage") }}</div>
-        </div>
-        <div class="stat">
-          <div class="stat-value">{{ formatBytes(totalMem) }}</div>
-          <div class="stat-title">{{ $t("label.total-mem-usage") }}</div>
-        </div>
-
-        <div class="stat">
-          <div class="stat-value">{{ version }}</div>
-          <div class="stat-title">{{ $t("label.dozzle-version") }}</div>
-        </div>
-      </div>
+      <host-list :containers="runningContainers" />
     </section>
 
     <section>
       <container-table :containers="runningContainers"></container-table>
     </section>
-  </div>
+  </page-with-links>
 </template>
 
 <script lang="ts" setup>
 import { Container } from "@/models/Container";
 
 const { t } = useI18n();
-const { version } = config;
+
 const containerStore = useContainerStore();
 const { containers, ready } = storeToRefs(containerStore) as unknown as {
   containers: Ref<Container[]>;
   ready: Ref<boolean>;
 };
 
-const mostRecentContainers = $computed(() => containers.value.toSorted((a, b) => +b.created - +a.created));
-const runningContainers = $computed(() => mostRecentContainers.filter((c) => c.state === "running"));
-
-let totalCpu = $ref(0);
-useIntervalFn(
-  () => {
-    totalCpu = runningContainers.reduce((acc, c) => acc + c.stat.cpu, 0);
-  },
-  1000,
-  { immediate: true },
-);
-
-let totalMem = $ref(0);
-useIntervalFn(
-  () => {
-    totalMem = runningContainers.reduce((acc, c) => acc + c.stat.memoryUsage, 0);
-  },
-  1000,
-  { immediate: true },
-);
+const runningContainers = computed(() => containers.value.filter((c) => c.state === "running"));
 
 watchEffect(() => {
   if (ready.value) {
-    setTitle(t("title.dashboard", { count: runningContainers.length }));
+    setTitle(t("title.dashboard", { count: runningContainers.value.length }));
   }
 });
-
-async function logout() {
-  await fetch(withBase("/api/token"), {
-    method: "DELETE",
-  });
-
-  location.reload();
-}
 </script>
 <style lang="postcss" scoped>
 :deep(tr td) {

assets/pages/login.vue

@@ -17,7 +17,7 @@
         </div>
         <div class="form-control">
           <label class="label">
-            <span class="label-text">Password</span>
+            <span class="label-text">{{ $t("label.password") }}</span>
           </label>
           <input
             class="input input-bordered"
@@ -47,17 +47,21 @@ let error = $ref(false);
 let username = $ref("");
 let password = $ref("");
 let form: HTMLFormElement | undefined = $ref();
+const params = new URLSearchParams(window.location.search);
 
 async function onLogin() {
-  const url = config.authProvider === "simple" ? "/api/token" : "/api/validateCredentials";
-  const response = await fetch(withBase(url), {
+  const response = await fetch(withBase("/api/token"), {
     body: new FormData(form),
     method: "POST",
   });
 
   if (response.status == 200) {
     error = false;
-    window.location.href = withBase("/");
+    if (params.has("redirectUrl")) {
+      window.location.href = withBase(params.get("redirectUrl")!);
+    } else {
+      window.location.href = withBase("/");
+    }
   } else {
     error = true;
   }

assets/pages/settings.vue

@@ -1,79 +1,127 @@
 <template>
-  <div class="mt-10 flex flex-col gap-8 px-4 md:px-8">
+  <page-with-links>
     <section>
       <div class="has-underline">
         <h2>{{ $t("settings.about") }}</h2>
       </div>
 
       <div>
-        <span v-html="$t('settings.using-version', { version: currentVersion })"></span>
+        <span v-html="$t('settings.using-version', { version: config.version })"></span>
         <div
           v-if="hasUpdate"
-          v-html="$t('settings.update-available', { nextVersion: nextRelease.name, href: nextRelease.html_url })"
+          v-html="$t('settings.update-available', { nextVersion: latest?.name, href: latest?.htmlUrl })"
         ></div>
       </div>
     </section>
 
-    <section class="flex flex-col gap-4">
+    <section class="flex flex-col @container">
       <div class="has-underline">
         <h2>{{ $t("settings.display") }}</h2>
       </div>
 
-      <div>
-        <toggle v-model="smallerScrollbars"> {{ $t("settings.small-scrollbars") }} </toggle>
-      </div>
-      <div>
-        <toggle v-model="showTimestamp">{{ $t("settings.show-timesamps") }}</toggle>
-      </div>
-      <div>
-        <toggle v-model="showStd">{{ $t("settings.show-std") }}</toggle>
-      </div>
+      <section class="grid-cols-2 gap-4 @3xl:grid">
+        <div class="flex flex-col gap-2 text-balance @3xl:pr-8">
+          <toggle v-model="compact"> {{ $t("settings.compact") }} </toggle>
 
-      <div>
-        <toggle v-model="softWrap">{{ $t("settings.soft-wrap") }}</toggle>
-      </div>
+          <toggle v-model="smallerScrollbars"> {{ $t("settings.small-scrollbars") }} </toggle>
 
-      <div class="flex items-center gap-6">
-        <dropdown
-          v-model="hourStyle"
-          :options="[
-            { label: 'Auto', value: 'auto' },
-            { label: '12', value: '12' },
-            { label: '24', value: '24' },
-          ]"
+          <toggle v-model="showTimestamp">{{ $t("settings.show-timesamps") }}</toggle>
+
+          <toggle v-model="showStd">{{ $t("settings.show-std") }}</toggle>
+
+          <toggle v-model="softWrap">{{ $t("settings.soft-wrap") }}</toggle>
+
+          <labeled-input>
+            <template #label>
+              {{ $t("settings.locale") }}
+            </template>
+            <template #input>
+              <dropdown-menu
+                v-model="locale"
+                :options="[
+                  { label: 'Auto', value: '' },
+                  ...availableLocales.map((l) => ({ label: l.toLocaleUpperCase(), value: l })),
+                ]"
+              />
+            </template>
+          </labeled-input>
+
+          <labeled-input>
+            <template #label>
+              {{ $t("settings.datetime-format") }}
+            </template>
+            <template #input>
+              <div class="flex gap-2">
+                <dropdown-menu
+                  v-model="dateLocale"
+                  :options="[
+                    { label: 'Auto', value: 'auto' },
+                    { label: 'MM/DD/YYYY', value: 'en-US' },
+                    { label: 'DD/MM/YYYY', value: 'en-GB' },
+                    { label: 'DD.MM.YYYY', value: 'de-DE' },
+                    { label: 'YYYY-MM-DD', value: 'en-CA' },
+                  ]"
+                />
+                <dropdown-menu
+                  v-model="hourStyle"
+                  :options="[
+                    { label: 'Auto', value: 'auto' },
+                    { label: '12', value: '12' },
+                    { label: '24', value: '24' },
+                  ]"
+                />
+              </div>
+            </template>
+          </labeled-input>
+
+          <labeled-input>
+            <template #label>
+              {{ $t("settings.font-size") }}
+            </template>
+            <template #input>
+              <dropdown-menu
+                v-model="size"
+                :options="[
+                  { label: 'Small', value: 'small' },
+                  { label: 'Medium', value: 'medium' },
+                  { label: 'Large', value: 'large' },
+                ]"
+              />
+            </template>
+          </labeled-input>
+
+          <labeled-input>
+            <template #label>
+              {{ $t("settings.color-scheme") }}
+            </template>
+            <template #input>
+              <dropdown-menu
+                v-model="lightTheme"
+                :options="[
+                  { label: 'Auto', value: 'auto' },
+                  { label: 'Dark', value: 'dark' },
+                  { label: 'Light', value: 'light' },
+                ]"
+              />
+            </template>
+          </labeled-input>
+        </div>
+        <log-viewer
+          :messages="fakeMessages"
+          :visible-keys="keys"
+          :last-selected-item="undefined"
+          class="hidden overflow-hidden rounded-lg border border-base-content/50 shadow @3xl:block"
         />
-        {{ $t("settings.12-24-format") }}
-      </div>
-      <div class="flex items-center gap-6">
-        <dropdown
-          v-model="size"
-          :options="[
-            { label: 'Small', value: 'small' },
-            { label: 'Medium', value: 'medium' },
-            { label: 'Large', value: 'large' },
-          ]"
-        />
-        {{ $t("settings.font-size") }}
-      </div>
-      <div class="flex items-center gap-6">
-        <dropdown
-          v-model="lightTheme"
-          :options="[
-            { label: 'Auto', value: 'auto' },
-            { label: 'Dark', value: 'dark' },
-            { label: 'Light', value: 'light' },
-          ]"
-        />
-        {{ $t("settings.color-scheme") }}
-      </div>
+      </section>
     </section>
+
     <section class="flex flex-col gap-2">
       <div class="has-underline">
         <h2>{{ $t("settings.options") }}</h2>
       </div>
       <div>
         <toggle v-model="search">
-          <div>{{ $t("settings.search") }} <key-shortcut char="f" class="align-top"></key-shortcut></div>
+          {{ $t("settings.search") }} <key-shortcut char="f" class="align-top"></key-shortcut>
         </toggle>
       </div>
 
@@ -85,50 +133,69 @@
         <toggle v-model="automaticRedirect">{{ $t("settings.automatic-redirect") }}</toggle>
       </div>
     </section>
-  </div>
+  </page-with-links>
 </template>
 
 <script lang="ts" setup>
+import { ComplexLogEntry, SimpleLogEntry } from "@/models/LogEntry";
+
 import {
-  search,
-  lightTheme,
-  smallerScrollbars,
-  showTimestamp,
-  showStd,
-  hourStyle,
-  showAllContainers,
-  size,
-  softWrap,
   automaticRedirect,
+  compact,
+  hourStyle,
+  dateLocale,
+  lightTheme,
+  search,
+  showAllContainers,
+  showStd,
+  showTimestamp,
+  size,
+  smallerScrollbars,
+  softWrap,
+  locale,
 } from "@/stores/settings";
 
-const { t } = useI18n();
+const { t, availableLocales } = useI18n();
 
 setTitle(t("title.settings"));
+const { latest, hasUpdate } = useReleases();
 
-const currentVersion = config.version;
-let nextRelease = $ref({ html_url: "", name: "" });
-let hasUpdate = $ref(false);
+const keys = ref<string[][]>([]);
+const hoursAgo = (hours: number) => {
+  const date = new Date();
+  date.setHours(date.getHours() - hours);
+  return date;
+};
 
-async function fetchNextRelease() {
-  if (!["dev", "master"].includes(currentVersion)) {
-    const response = await fetch("https://api.github.com/repos/amir20/dozzle/releases/latest");
-    if (response.ok) {
-      const release = await response.json();
-      hasUpdate =
-        release.tag_name.slice(1).localeCompare(currentVersion, undefined, { numeric: true, sensitivity: "base" }) > 0;
-      nextRelease = release;
-    }
-  } else {
-    hasUpdate = true;
-    nextRelease = {
-      html_url: "",
-      name: "master",
-    };
-  }
-}
-
-fetchNextRelease();
+const fakeMessages = [
+  new SimpleLogEntry("This is a preview of the logs", 1, hoursAgo(16), "info", undefined, "stdout"),
+  new SimpleLogEntry("A warning log looks like this", 2, hoursAgo(12), "warn", undefined, "stdout"),
+  new SimpleLogEntry("This is a multi line error message", 3, hoursAgo(7), "error", "start", "stderr"),
+  new SimpleLogEntry("with a second line", 4, hoursAgo(2), "error", "middle", "stderr"),
+  new SimpleLogEntry("and finally third line.", 5, new Date(), "error", "end", "stderr"),
+  new ComplexLogEntry(
+    {
+      message: "This is a complex log entry as json",
+      context: {
+        key: "value",
+        key2: "value2",
+      },
+    },
+    6,
+    new Date(),
+    "info",
+    "stdout",
+    keys,
+  ),
+  new SimpleLogEntry(
+    "This is a very very long message which would wrap by default. Disabling soft wraps would disable this. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
+    7,
+    new Date(),
+    "debug",
+    undefined,
+    "stderr",
+  ),
+];
 </script>
 <style lang="postcss" scoped>
 .has-underline {

assets/stores/config.ts

@@ -1,29 +1,40 @@
 import { type Settings } from "@/stores/settings";
+import { Host } from "@/stores/hosts";
 
 const text = document.querySelector("script#config__json")?.textContent || "{}";
 
-interface Config {
+type HostWithoutAvailable = Omit<Host, "available">;
+
+export interface Config {
   version: string;
   base: string;
-  authorizationNeeded: boolean;
-  secured: boolean;
   maxLogs: number;
   hostname: string;
-  hosts: { name: string; id: string }[];
+  hosts: HostWithoutAvailable[];
   authProvider: "simple" | "none" | "forward-proxy";
+  enableActions: boolean;
   user?: {
     username: string;
     email: string;
     name: string;
-    avatar: string;
   };
-  serverSettings?: Settings;
+  profile?: Profile;
+}
+
+export interface Profile {
+  settings?: Settings;
+  pinned?: Set<string>;
+  visibleKeys?: { [key: string]: string[][] };
+  releaseSeen?: string;
+  collapsedGroups?: Set<string>;
 }
 
 const pageConfig = JSON.parse(text);
 
 const config: Config = {
   maxLogs: 600,
+  version: "v0.0.0",
+  hosts: [],
   ...pageConfig,
 };
 

assets/stores/container.ts

@@ -5,6 +5,7 @@ import { Container } from "@/models/Container";
 import i18n from "@/modules/i18n";
 
 const { showToast } = useToast();
+const { markHostAvailable } = useHosts();
 // @ts-ignore
 const { t } = i18n.global;
 
@@ -64,10 +65,15 @@ export const useContainerStore = defineStore("container", () => {
       const event = JSON.parse((e as MessageEvent).data) as { actorId: string };
       const container = allContainersById.value[event.actorId];
       if (container) {
-        container.state = "dead";
+        container.state = "exited";
       }
     });
 
+    es.addEventListener("host-unavailable", (e) => {
+      const hostId = (e as MessageEvent).data;
+      markHostAvailable(hostId, false);
+    });
+
     es.addEventListener("container-health", (e) => {
       const event = JSON.parse((e as MessageEvent).data) as { actorId: string; health: ContainerHealth };
       const container = allContainersById.value[event.actorId];
@@ -124,8 +130,10 @@ export const useContainerStore = defineStore("container", () => {
           c.name,
           c.command,
           c.host,
+          c.labels,
           c.status,
           c.state,
+          c.stats,
           c.health,
         );
       }),

assets/stores/hosts.ts

@@ -0,0 +1,27 @@
+export type Host = {
+  name: string;
+  id: string;
+  nCPU: number;
+  memTotal: number;
+  available: boolean;
+};
+const hosts = computed(() =>
+  config.hosts.reduce(
+    (acc, item) => {
+      acc[item.id] = { ...item, available: true };
+      return acc;
+    },
+    {} as Record<string, Host>,
+  ),
+);
+
+const markHostAvailable = (id: string, available: boolean) => {
+  hosts.value[id].available = available;
+};
+
+export function useHosts() {
+  return {
+    hosts,
+    markHostAvailable,
+  };
+}

assets/stores/releases.ts

@@ -0,0 +1,29 @@
+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/stores/settings.ts

@@ -1,9 +1,9 @@
 import { toRefs } from "@vueuse/core";
-const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
 
 export type Settings = {
   search: boolean;
   size: "small" | "medium" | "large";
+  compact: boolean;
   menuWidth: number;
   smallerScrollbars: boolean;
   showTimestamp: boolean;
@@ -11,12 +11,15 @@ export type Settings = {
   showAllContainers: boolean;
   lightTheme: "auto" | "dark" | "light";
   hourStyle: "auto" | "24" | "12";
+  dateLocale: "auto" | "en-US" | "en-GB" | "de-DE" | "en-CA";
   softWrap: boolean;
   collapseNav: boolean;
   automaticRedirect: boolean;
+  locale: string;
 };
 export const DEFAULT_SETTINGS: Settings = {
   search: true,
+  compact: false,
   size: "medium",
   menuWidth: 15,
   smallerScrollbars: false,
@@ -25,25 +28,21 @@ export const DEFAULT_SETTINGS: Settings = {
   showAllContainers: false,
   lightTheme: "auto",
   hourStyle: "auto",
+  dateLocale: "auto",
   softWrap: true,
   collapseNav: false,
   automaticRedirect: true,
+  locale: "",
 };
 
-export const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
-settings.value = { ...DEFAULT_SETTINGS, ...settings.value, ...config.serverSettings };
-
-watch(settings, (value) => {
-  fetch(withBase("/api/profile/settings"), {
-    method: "PUT",
-    body: JSON.stringify(value),
-  });
-});
+export const settings = useProfileStorage("settings", DEFAULT_SETTINGS);
 
 export const {
   collapseNav,
+  compact,
   softWrap,
   hourStyle,
+  dateLocale,
   lightTheme,
   showAllContainers,
   showTimestamp,
@@ -52,5 +51,6 @@ export const {
   menuWidth,
   size,
   search,
+  locale,
   automaticRedirect,
 } = toRefs(settings);

assets/types/Container.d.ts

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

assets/utils/index.ts

@@ -51,3 +51,27 @@ export function useExponentialMovingAverage<T extends Record<string, number>>(so
 
   return ema;
 }
+
+interface UseSimpleRefHistoryOptions<T> {
+  capacity: number;
+  deep?: boolean;
+  initial?: T[];
+}
+
+export function useSimpleRefHistory<T>(source: Ref<T>, options: UseSimpleRefHistoryOptions<T>) {
+  const { capacity, deep = true, initial = [] as T[] } = options;
+  const history = ref<T[]>(initial) as Ref<T[]>;
+
+  watch(
+    source,
+    (value) => {
+      history.value.push(value);
+      if (history.value.length > capacity) {
+        history.value.shift();
+      }
+    },
+    { deep },
+  );
+
+  return history;
+}

docker-compose.yml

@@ -3,7 +3,7 @@ services:
   custom_base:
     container_name: custom_base
     volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
+      - /var/run/docker.sock:/var/run/docker.sock:ro
     environment:
       - DOZZLE_FILTER=name=custom_base
       - DOZZLE_BASE=/foobarbase
@@ -12,23 +12,20 @@ services:
       - 8080:8080
     build:
       context: .
-  auth:
-    container_name: auth
+  simple-auth:
+    container_name: simple-auth
     volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+      - ./e2e/data:/data
     environment:
-      - DOZZLE_FILTER=name=auth
-      - DOZZLE_USERNAME=foo
-      - DOZZLE_PASSWORD=bar
+      - DOZZLE_AUTH_PROVIDER=simple
       - DOZZLE_NO_ANALYTICS=1
-    ports:
-      - 9090:8080
     build:
       context: .
   dozzle:
     container_name: dozzle
     volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
+      - /var/run/docker.sock:/var/run/docker.sock:ro
     environment:
       - DOZZLE_FILTER=name=dozzle
       - DOZZLE_NO_ANALYTICS=1
@@ -47,21 +44,28 @@ services:
     build:
       context: .
     depends_on:
-      - proxy
+      proxy:
+        condition: service_healthy
 
   proxy:
     container_name: proxy
     image: tecnativa/docker-socket-proxy
     volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
+      - /var/run/docker.sock:/var/run/docker.sock:ro
     environment:
       - CONTAINERS=1
+    healthcheck:
+      test: ["CMD", "nc", "-z", "127.0.0.1", "2375"]
+      interval: 5s
+      retries: 5
+      start_period: 5s
+      start_interval: 5s
     ports:
       - 2375:2375
 
   playwright:
     container_name: playwright
-    image: mcr.microsoft.com/playwright:v1.39.0-jammy
+    image: mcr.microsoft.com/playwright:v1.44.0-jammy
     working_dir: /app
     volumes:
       - .:/app
@@ -72,5 +76,4 @@ services:
     depends_on:
       - dozzle
       - custom_base
-      - auth
       - remote

docs/.vitepress/config.ts

@@ -68,6 +68,8 @@ export default defineConfig({
           { text: "Healthcheck", link: "/guide/healthcheck" },
           { text: "Hostname", link: "/guide/hostname" },
           { text: "Remote Hosts", link: "/guide/remote-hosts" },
+          { text: "Container Actions", link: "/guide/actions" },
+          { text: "Filters", link: "/guide/filters" },
           { text: "Supported Env Vars", link: "/guide/supported-env-vars" },
           { text: "Logging Files on Disk", link: "/guide/log-files-on-disk" },
           { text: "Analytics", link: "/guide/analytics" },

docs/components.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     BrowserWindow: typeof import('./.vitepress/theme/components/BrowserWindow.vue')['default']

docs/functions/hub.ts

@@ -1,30 +0,0 @@
-import { Handler, HandlerEvent, HandlerContext } from "@netlify/functions";
-
-let cache;
-let cacheTime = 0;
-
-const handler: Handler = async (event: HandlerEvent, context: HandlerContext) => {
-  if (cache && Date.now() - cacheTime < 1000 * 60 * 10) {
-    const headers = {
-      "x-cache": "HIT",
-    };
-    return {
-      headers,
-      statusCode: 200,
-      body: JSON.stringify(cache),
-    };
-  }
-
-  const response = await fetch("https://hub.docker.com/v2/repositories/amir20/dozzle");
-  const data = await response.json();
-  const { full_description, ...rest } = data;
-  cache = rest;
-  cacheTime = Date.now();
-
-  return {
-    statusCode: 200,
-    body: JSON.stringify(rest),
-  };
-};
-
-export { handler };

docs/guide/actions.md

@@ -0,0 +1,32 @@
+---
+title: Container Actions
+---
+
+# Using Container Actions
+
+Dozzle now supports **Container Actions**, which allows you to `start`, `stop` and `restart` container from within the UI in the dropdown menu.
+
+<img title="Container Actions" alt="Container Acions Menu UI" width="250" src="/.vitepress/theme/media/dozzle-ui-actions.png">
+
+This feature is **disabled** by default, which can be enabled by setting environment variable`DOZZLE_ENABLE_ACTIONS` to `true`
+
+::: code-group
+
+```sh
+docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle --enable-actions
+```
+
+```yaml [docker-compose.yml]
+version: "3"
+services:
+  dozzle:
+    image: amir20/dozzle:latest
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    ports:
+      - 8080:8080
+    environment:
+      DOZZLE_ENABLE_ACTIONS: true
+```
+
+:::

docs/guide/analytics.md

@@ -4,11 +4,11 @@ title: Anonymous Analytics
 
 # Data Collection of Analytics
 
-Dozzle collects anonymous user configurations using Google Analytics. _Why?_ Dozzle is an open source project with no funding. As a result, there is no time to do user studies of Dozzle. Analytics is collected to prioritize features and fixes based on how people use Dozzle. This data is completely public and can be viewed live using [dashboard](/guide/usage-dashboard).
+Dozzle collects anonymous user configurations using a simple beacon written in Go. _Why?_ Dozzle is an open source project with no funding. As a result, there is no time to do user studies of Dozzle. Analytics is collected to prioritize features and fixes based on how people use Dozzle.
 
 ## Where is data stored
 
-Dozzle's sends anonymous data to Google Analytics. Retention policy is 14 months which is lowest [possible value for Google Analytics](https://support.google.com/analytics/answer/7667196).
+Dozzle's sends anonymous data to DigitalOcean which is written to a flat file for processing.
 
 ## Opting out
 

docs/guide/authentication.md

@@ -8,6 +8,73 @@ Dozzle support two configurations for authentication. In the first configuration
 
 If you do not have an authentication solution then Dozzle has a simple file based user management solution. Authentication providers are setup using `--auth-provider` flag. In both of these configurations, Dozzle will try to save user settings to disk. This data is written to `/data`.
 
+## 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`.
+
+The content of the file looks like:
+
+```yaml
+users:
+  # "admin" here is username
+  admin:
+    name: "Admin"
+    # Just sha-256 which can be computed with "echo -n password | shasum -a 256"
+    password: "5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8"
+    email: me@email.net
+```
+
+> [!TIP]
+> This file can be generated with `docker run amir20/dozzle generate` with v6.6.x. See [below](#generating-users-yml) for more details.
+
+Dozzle uses `email` to generate avatars using [Gravatar](https://gravatar.com/). It is optional. The password is hashed using `sha256` which can be generated with `echo -n 'secret-password' | shasum -a 256` or `echo -n 'secret-password' | sha256sum` on linux.
+
+You will need to mount this file for Dozzle to find it. Here is an example:
+
+::: code-group
+
+```sh [cli]
+$ docker run -v /var/run/docker.sock:/var/run/docker.sock -v /path/to/dozzle/data:/data -p 8080:8080 amir20/dozzle --auth-provider simple
+```
+
+```yaml [docker-compose.yml]
+version: "3"
+services:
+  dozzle:
+    image: amir20/dozzle:latest
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - /path/to/dozzle/data:/data
+    ports:
+      - 8080:8080
+    environment:
+      DOZZLE_AUTH_PROVIDER: simple
+```
+
+```yaml [users.yml]
+users:
+  # "admin" here is username
+  admin:
+    name: "Admin"
+    # Just sha-256 which can be computed with "echo -n password | shasum -a 256"
+    password: "5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8"
+    email: me@email.net
+```
+
+:::
+
+Dozzle uses [JWT](https://en.wikipedia.org/wiki/JSON_Web_Token) to generate tokens for authentication. This token is saved in a cookie.
+
+### Generating users.yml
+
+Starting with version `v6.6.x`, Dozzle has a builtin `generate` sub-command which can be used to create a `users.yml`.
+
+```sh
+docker run amir20/dozzle generate admin --password password --email test@email.net --name "John Doe" > 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.
+
 ## Forward Proxy
 
 Dozzle can be configured to read proxy headers by setting `--auth-provider` to `forward-proxy`.
@@ -178,103 +245,33 @@ notifier:
 
 Valid SSL keys are required because Authelia only supports SSL.
 
-## File Based User Management
+### Setting up Dozzle with Cloudflare Zero Trust
 
-Dozzle supports multi-user authentication by setting `--auth-provider` to `simple`. In this mode, Dozzle will try to read `/data/users.yml`. The content of the file looks like
-
-```yml
-users:
-  admin:
-    name: "Admin"
-    # Just sha-256 which can be computed with echo -n password | shasum -a 256
-    password: "5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8"
-    email: me@email.net
-```
-
-Dozzle uses `email` to generate avatars using [Gravatar](https://gravatar.com/). It is optional.
-
-The password is hashed using `sha256` which can be generated with `echo -n "secret-password" | shasum -a 256` or `echo -n "secret-password" | sha256sum` on linux.
-
-You will need to mount this file for Dozzle to find it. Here is an example:
-
-::: code-group
-
-```sh [cli]
-$ docker run -v /var/run/docker.sock:/var/run/docker.sock -v /path/to/dozzle/data:/data -p 8080:8080 amir20/dozzle --auth-provider simple
-```
+Cloudflare Zero Trust is a service for authenticated access to selfhosted
+software. This section defines how Dozzle can be setup to use Cloudflare Zero
+Trust for authentication.
 
 ```yaml [docker-compose.yml]
-version: "3"
+version: "3.3"
+
 services:
   dozzle:
     image: amir20/dozzle:latest
+    networks:
+      - net
+    environment:
+      DOZZLE_AUTH_PROVIDER: forward-proxy
+      DOZZLE_AUTH_HEADER_USER: Cf-Access-Authenticated-User-Email
+      DOZZLE_AUTH_HEADER_EMAIL: Cf-Access-Authenticated-User-Email
+      DOZZLE_AUTH_HEADER_NAME: Cf-Access-Authenticated-User-Email
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
-      - /path/to/dozzle/data:/data
-    ports:
-      - 8080:8080
-    environment:
-      DOZZLE_AUTH_PROVIDER: simple
+    expose:
+      - 8080
+    restart: unless-stopped
 ```
 
-:::
-
-Dozzle uses [JWT](https://en.wikipedia.org/wiki/JSON_Web_Token) to generate tokens for authentication. This token is saved in a cookie.
-
-## Single Username/Password
-
-::: danger
-`--username` and `--password` flags will be removed in v6.x in favor of `--auth-provider`.
-:::
-
-Dozzle supports a very simple authentication out of the box with just username and password. You should deploy using SSL to keep the credentials safe. See configuration to use `--username` and `--password`. You can also use docker secrets `--usernamefile` and `--passwordfile`.
-
-::: code-group
-
-```sh [cli]
-$ docker run -v /var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle --username amirraminfar --password supersecretpassword
-```
-
-```yaml [docker-compose.yml]
-version: "3"
-services:
-  dozzle:
-    image: amir20/dozzle:latest
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-    ports:
-      - 8080:8080
-    environment:
-      DOZZLE_USERNAME: amirraminfar
-      DOZZLE_PASSWORD: supersecretpassword
-```
-
-:::
-
-## Setting up authentication with Docker secrets
-
-Dozzle also support path to file for username and password which can be used to with Docker Secrets.
-
-```yaml
-version: "3"
-services:
-  dozzle:
-    image: amir20/dozzle:latest
-    environment:
-      DOZZLE_LEVEL: debug
-      DOZZLE_USERNAME_FILE: /run/secrets/dozzle_user
-      DOZZLE_PASSWORD_FILE: /run/secrets/dozzle_password
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-    secrets:
-      - dozzle_user
-      - dozzle_password
-    ports:
-      - 8080:8080
-
-secrets:
-  dozzle_user:
-    file: dozzle_user.txt
-  dozzle_password:
-    file: dozzle_password.txt
-```
+After running the Dozzle container, configure the Application in Cloudflare Zero
+Trust dashboard by following the
+[guide](https://developers.cloudflare.com/cloudflare-one/applications/configure-apps/self-hosted-apps/)
+here.

docs/guide/changing-base.md

@@ -4,12 +4,12 @@ title: Changing Application Base
 
 # Changing Dozzle Base
 
-Dozzle by default mounts to "/". This can be changed with the `--base` flag. For example, if you want to mount to "/foobar" then you can use `--base foobar` or the env variable `DOZZLE_BASE`.
+Dozzle by default mounts to "/". This can be changed with the `--base` flag. For example, if you want to mount to "/foobar" then you can use `--base /foobar` or the env variable `DOZZLE_BASE`.
 
 ::: code-group
 
 ```sh
-docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle --base foobar
+docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle --base /foobar
 ```
 
 ```yaml [docker-compose.yml]
@@ -22,7 +22,7 @@ services:
     ports:
       - 8080:8080
     environment:
-      DOZZLE_BASE: foobar
+      DOZZLE_BASE: /foobar
 ```
 
 :::
@@ -35,8 +35,6 @@ Here is an example with Nginx and proxy Dozzle with a different base:
 
 ```conf
 location ^~ /foobar/ {
-    include /config/nginx/proxy.conf;
-    include /config/nginx/resolver.conf;
     set $upstream_app dozzle;
     set $upstream_port 8080;
     set $upstream_proto http;

docs/guide/filters.md

@@ -0,0 +1,30 @@
+---
+title: Filter
+---
+
+# Filtering Containers
+
+Dozzle supports conditional filtering similar to Docker's [--filter](https://docs.docker.com/reference/cli/docker/container/ls/#filter) with `DOZZLE_FILTER` or `--filter`. Filters are passed directly to Docker to limit what Dozzle can see. For example, filtering by label is supported with `--filter "label=color"`, which is similar to `docker ps` command with `docker ps --filter "label=color"`.
+
+::: code-group
+
+```sh
+docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle --filter label=color
+```
+
+```yaml [docker-compose.yml]
+version: "3"
+services:
+  dozzle:
+    image: amir20/dozzle:latest
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    ports:
+      - 8080:8080
+    environment:
+      DOZZLE_FILTER: label=color
+```
+
+:::
+
+Common filters are `name` or `label` to limit Dozzle's access to containers.

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

@@ -12,10 +12,32 @@ However, there are workarounds to be able to still access files using mounts.
 
 ## Mounting Local Log Files with Alpine
 
-Dozzle reads any output stream. This can be used in combination with alpine to `tail` a mounted file. An example of this is:
+Dozzle reads any output stream. This can be used in combination with alpine to `tail` a mounted file. An example of this is as follows:
+
+::: code-group
 
 ```sh
 docker run -v /var/log/system.log:/var/log/test.log alpine tail -f /var/log/test.log
 ```
 
+```yaml [docker-compose.yml]
+version: "3"
+services:
+  dozzle-from-file:
+    container_name: dozzle-from-file
+    image: alpine
+    volumes:
+      - /var/log/system.log:/var/log/stream.log
+    command:
+      - tail
+      - -f
+      - /var/log/stream.log     
+    network_mode: none
+    restart: unless-stopped
+```
+
+:::
+
 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 my testing, using alpine only uses about `300KB` 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/supported-env-vars.md

@@ -6,16 +6,18 @@ title: Environment variables and configuration
 
 Configurations can be done with 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`  |
-| `--filter`       | `DOZZLE_FILTER`        | `""`    |
-| `--username`     | `DOZZLE_USERNAME`      | `""`    |
-| `--password`     | `DOZZLE_PASSWORD`      | `""`    |
-| `--usernamefile` | `DOZZLE_USERNAME_FILE` | `""`    |
-| `--passwordfile` | `DOZZLE_PASSWORD_FILE` | `""`    |
-| `--no-analytics` | `DOZZLE_NO_ANALYTICS`  | false   |
-| `--remote-host`  | `DOZZLE_REMOTE_HOST`   |         |
+| 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          |
+| `--wait-for-docker-seconds` | `DOZZLE_WAIT_FOR_DOCKER_SECONDS` | 0              |
+| `--filter`                  | `DOZZLE_FILTER`                  | `""`           |
+| `--no-analytics`            | `DOZZLE_NO_ANALYTICS`            | false          |
+| `--remote-host`             | `DOZZLE_REMOTE_HOST`             |                |

docs/index.md

@@ -6,7 +6,7 @@ title: Home
 
 hero:
   name: "Dozzle"
-  tagline: A lightweight, web-based Docker log viewer that provides real-time monitoring and easy troubleshooting.
+  tagline: Real-time logging and monitoring for Docker in the browser
   actions:
     - theme: brand
       text: Get Started
@@ -16,10 +16,12 @@ hero:
       link: https://github.com/amir20/dozzle
 
 features:
-  - title: Real-time logging
-    details: Allows you to view logs of other Docker containers in real-time. As new log entries are generated, they are streamed to the web interface without needing to refresh the page.
-  - title: Lightweight
-    details: An application written in Go consuming very little memory and CPU. It can be run alongside other containers without causing performance issues.
+  - title: Real-time Logging & Monitoring
+    details: Captures real-time Docker container logs, enabling quick and efficient issue diagnosis.
+  - title: Easy Installation and Use
+    details: Offers a quick, simple setup and minimal configuration, making it user-friendly for those unfamiliar with Docker.
   - title: Multi-host Support
-    details: Dozzle UI support connecting to multiple remote hosts with a simple drop down to choose between different hosts.
+    details: UI support connecting to multiple remote hosts with a simple drop down to choose between different hosts.
+  - title: No Database Required
+    details: Streams logs directly from Docker, remaining lightweight without extra overhead or complexity.
 ---

docs/package.json

@@ -3,12 +3,11 @@
   "type": "module",
   "name": "docs",
   "devDependencies": {
-    "@netlify/functions": "^2.3.0",
-    "@unocss/preset-typography": "^0.57.1",
-    "@unocss/reset": "^0.57.1",
-    "@unocss/transformer-directives": "^0.57.1",
+    "@unocss/preset-typography": "^0.60.0",
+    "@unocss/reset": "^0.60.0",
+    "@unocss/transformer-directives": "^0.60.0",
     "dozzle": "workspace:*",
     "sitemap": "^7.1.1",
-    "unocss": "^0.57.1"
+    "unocss": "^0.60.0"
   }
 }