chore: release v7.0.2

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

.github/workflows/deploy.yml

@@ -9,13 +9,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         name: Install Node
         with:
           node-version: latest
       - run: corepack enable
       - run: pnpm --version
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: latest
           cache: "pnpm"
@@ -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
@@ -42,13 +43,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         name: Install Node
         with:
           node-version: latest
       - run: corepack enable
       - run: pnpm --version
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: latest
           cache: "pnpm"
@@ -56,7 +57,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
       - name: Build
         uses: docker/bake-action@v4
         with:
@@ -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
@@ -79,21 +80,21 @@ jobs:
     steps:
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@885d1462b80bc1c1c7f0b00334ad271f09369c55 # v2.10.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.2.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/v7,linux/arm64/v8
+          platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8
           tags: ${{ steps.meta.outputs.tags }}
           build-args: TAG=${{ steps.meta.outputs.version }}
           labels: ${{ steps.meta.outputs.labels }}
@@ -109,7 +110,7 @@ jobs:
         with:
           fetch-depth: 0
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
       - name: Release to Github
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/dev.yml

@@ -14,21 +14,21 @@ jobs:
     steps:
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@885d1462b80bc1c1c7f0b00334ad271f09369c55 # v2.10.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.2.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/v7,linux/arm64/v8
+          platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8
           tags: ${{ steps.meta.outputs.tags }}
           build-args: TAG=${{ steps.meta.outputs.version }}
           labels: ${{ steps.meta.outputs.labels }}

.github/workflows/pages.yml

@@ -0,0 +1,60 @@
+name: Deploy VitePress site to Pages
+
+on:
+  push:
+    branches: [master]
+
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      - uses: pnpm/action-setup@v2
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
+          cache: pnpm # or pnpm / yarn
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build with VitePress
+        run: |
+          pnpm docs:build
+          touch docs/.vitepress/dist/.nojekyll
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/pr.yml

@@ -0,0 +1,20 @@
+name: "Lint PR"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: read
+
+jobs:
+  main:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -12,13 +12,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         name: Install Node
         with:
           node-version: latest
       - run: corepack enable
       - run: pnpm --version
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: latest
           cache: "pnpm"
@@ -32,13 +32,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         name: Install Node
         with:
           node-version: latest
       - run: corepack enable
       - run: pnpm --version
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: latest
           cache: "pnpm"
@@ -52,26 +52,31 @@ 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
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         name: Install Node
         with:
           node-version: latest
       - run: corepack enable
       - run: pnpm --version
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: latest
           cache: "pnpm"
@@ -79,7 +84,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
       - name: Build
         uses: docker/bake-action@v4
         with:
@@ -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,4 +1,5 @@
 certs
+/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:20-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.1-alpine AS builder
+FROM --platform=$BUILDPLATFORM golang:1.22.3-alpine AS builder
 
 RUN apk add --no-cache ca-certificates && mkdir /dozzle
 
@@ -36,10 +36,7 @@ RUN go mod download
 COPY --from=node /build/dist ./dist
 
 # Copy all other files
-COPY analytics ./analytics
-COPY healthcheck ./healthcheck
-COPY docker ./docker
-COPY web ./web
+COPY internal ./internal
 COPY main.go ./
 
 # Args
@@ -49,11 +46,12 @@ ARG TARGETOS TARGETARCH
 # Build binary
 RUN GOOS=$TARGETOS GOARCH=$TARGETARCH CGO_ENABLED=0 go build -ldflags "-s -w -X main.version=$TAG"  -o dozzle
 
+RUN mkdir /data
 
 FROM scratch
 
 ENV PATH /bin
-
+COPY --from=builder /data /data
 COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
 COPY --from=builder /dozzle/dozzle /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`

SECURITY.md

@@ -0,0 +1,5 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+Dozzle is checked daily with https://docs.docker.com/scout/ and its dependencies are updated regularly. If you find a security bug, please update to the latest. For vulnerability on latest images please file an issue on Github. 

analytics/ga.go

@@ -1,73 +0,0 @@
-package analytics
-
-import (
-	"bytes"
-	"encoding/json"
-	"fmt"
-	"net/http"
-	"net/http/httputil"
-
-	log "github.com/sirupsen/logrus"
-)
-
-func SendStartEvent(se StartEvent) error {
-	postBody := map[string]interface{}{
-		"client_id": se.ClientId,
-		"events": []map[string]interface{}{
-			{
-				"name":   "start",
-				"params": se,
-			},
-		},
-	}
-
-	return doRequest(postBody)
-}
-
-func SendRequestEvent(re RequestEvent) error {
-	postBody := map[string]interface{}{
-		"client_id": re.ClientId,
-		"events": []map[string]interface{}{
-			{
-				"name":   "request",
-				"params": re,
-			},
-		},
-	}
-
-	return doRequest(postBody)
-}
-
-func doRequest(body map[string]interface{}) error {
-	jsonValue, err := json.Marshal(body)
-	if err != nil {
-		return err
-	}
-
-	req, err := http.NewRequest("POST", "https://www.google-analytics.com/mp/collect", bytes.NewBuffer(jsonValue))
-	if err != nil {
-		return err
-	}
-
-	q := req.URL.Query()
-	q.Add("measurement_id", "G-S6NT05VXK9")
-	q.Add("api_secret", "7FFhe65HQK-bXvujpQMquQ")
-	req.URL.RawQuery = q.Encode()
-
-	response, err := http.DefaultClient.Do(req)
-	if err != nil {
-		return err
-	}
-	defer response.Body.Close()
-
-	if response.StatusCode/100 != 2 {
-		dump, err := httputil.DumpResponse(response, true)
-		if err != nil {
-			return err
-		}
-		log.Debugf("%v", string(dump))
-		return fmt.Errorf("google analytics returned non-2xx status code: %v", response.Status)
-	}
-
-	return nil
-}

analytics/types.go

@@ -1,18 +0,0 @@
-package analytics
-
-type StartEvent struct {
-	ClientId         string `json:"-"`
-	Version          string `json:"version"`
-	FilterLength     int    `json:"filterLength"`
-	RemoteHostLength int    `json:"remoteHostLength"`
-	CustomAddress    bool   `json:"customAddress"`
-	CustomBase       bool   `json:"customBase"`
-	Protected        bool   `json:"protected"`
-	HasHostname      bool   `json:"hasHostname"`
-}
-
-type RequestEvent struct {
-	ClientId          string `json:"-"`
-	TotalContainers   int    `json:"totalContainers"`
-	RunningContainers int    `json:"runningContainers"`
-}

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

@@ -12,36 +12,36 @@ declare global {
   const $ref: typeof import('vue/macros')['$ref']
   const $shallowRef: typeof import('vue/macros')['$shallowRef']
   const $toRef: typeof import('vue/macros')['$toRef']
-  const DEFAULT_SETTINGS: typeof import('./composables/settings')['DEFAULT_SETTINGS']
+  const DEFAULT_SETTINGS: typeof import('./stores/settings')['DEFAULT_SETTINGS']
   const EffectScope: typeof import('vue')['EffectScope']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const arrayEquals: typeof import('./utils/index')['arrayEquals']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
-  const automaticRedirect: typeof import('./composables/settings')['automaticRedirect']
-  const collapseNav: typeof import('./composables/settings')['collapseNav']
+  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,22 +56,23 @@ 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('./composables/settings')['hourStyle']
+  const hashCode: typeof import('./utils/index')['hashCode']
+  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('./composables/settings')['lightTheme']
-  const logicAnd: typeof import('@vueuse/math')['logicAnd']
-  const logicNot: typeof import('@vueuse/math')['logicNot']
-  const logicOr: typeof import('@vueuse/math')['logicOr']
+  const lightTheme: typeof import('./stores/settings')['lightTheme']
+  const locale: typeof import('./stores/settings')['locale']
+  const loggingContextKey: typeof import('./composable/logContext')['loggingContextKey']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const mapActions: typeof import('pinia')['mapActions']
   const mapGetters: typeof import('pinia')['mapGetters']
@@ -79,7 +80,7 @@ declare global {
   const mapStores: typeof import('pinia')['mapStores']
   const mapWritableState: typeof import('pinia')['mapWritableState']
   const markRaw: typeof import('vue')['markRaw']
-  const menuWidth: typeof import('./composables/settings')['menuWidth']
+  const menuWidth: typeof import('./stores/settings')['menuWidth']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
@@ -101,10 +102,12 @@ 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 persistentVisibleKeysForContainer: typeof import('./composable/storage')['persistentVisibleKeysForContainer']
+  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 provideLoggingContext: typeof import('./composable/logContext')['provideLoggingContext']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -121,21 +124,21 @@ declare global {
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
-  const search: typeof import('./composables/settings')['search']
-  const sessionHost: typeof import('./composables/storage')['sessionHost']
+  const search: typeof import('./stores/settings')['search']
+  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 settings: typeof import('./composables/settings')['settings']
+  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']
   const shallowRef: typeof import('vue')['shallowRef']
-  const showAllContainers: typeof import('./composables/settings')['showAllContainers']
-  const showStd: typeof import('./composables/settings')['showStd']
-  const showTimestamp: typeof import('./composables/settings')['showTimestamp']
-  const size: typeof import('./composables/settings')['size']
-  const smallerScrollbars: typeof import('./composables/settings')['smallerScrollbars']
-  const softWrap: typeof import('./composables/settings')['softWrap']
+  const showAllContainers: typeof import('./stores/settings')['showAllContainers']
+  const showStd: typeof import('./stores/settings')['showStd']
+  const showTimestamp: typeof import('./stores/settings')['showTimestamp']
+  const size: typeof import('./stores/settings')['size']
+  const smallerScrollbars: typeof import('./stores/settings')['smallerScrollbars']
+  const softWrap: typeof import('./stores/settings')['softWrap']
   const storeToRefs: typeof import('pinia')['storeToRefs']
   const stripVersion: typeof import('./utils/index')['stripVersion']
   const syncRef: typeof import('@vueuse/core')['syncRef']
@@ -157,7 +160,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']
@@ -175,7 +177,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']
@@ -183,14 +184,15 @@ 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 useContainerStream: typeof import('./composable/eventStreams')['useContainerStream']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
@@ -224,14 +226,15 @@ 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']
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useGroupedStream: typeof import('./composable/eventStreams')['useGroupedStream']
   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']
@@ -243,16 +246,15 @@ 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 useLoggingContext: typeof import('./composable/logContext')['useLoggingContext']
   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 useMergedStream: typeof import('./composable/eventStreams')['useMergedStream']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -269,21 +271,21 @@ declare global {
   const useParentElement: typeof import('@vueuse/core')['useParentElement']
   const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
   const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePinnedLogsStore: typeof import('./stores/pinned')['usePinnedLogsStore']
   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']
@@ -291,20 +293,23 @@ 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 useServiceStream: typeof import('./composable/eventStreams')['useServiceStream']
   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']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStackStream: typeof import('./composable/eventStreams')['useStackStream']
   const useStepper: typeof import('@vueuse/core')['useStepper']
   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 useSwarmStore: typeof import('./stores/swarm')['useSwarmStore']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
@@ -321,17 +326,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']
@@ -356,15 +360,18 @@ declare global {
   const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']
+  const withBase: typeof import('./stores/config')['withBase']
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  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')['$']>
@@ -373,21 +380,21 @@ declare module 'vue' {
     readonly $ref: UnwrapRef<typeof import('vue/macros')['$ref']>
     readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
     readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
-    readonly DEFAULT_SETTINGS: UnwrapRef<typeof import('./composables/settings')['DEFAULT_SETTINGS']>
+    readonly DEFAULT_SETTINGS: UnwrapRef<typeof import('./stores/settings')['DEFAULT_SETTINGS']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly arrayEquals: UnwrapRef<typeof import('./utils/index')['arrayEquals']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
-    readonly automaticRedirect: UnwrapRef<typeof import('./composables/settings')['automaticRedirect']>
-    readonly collapseNav: UnwrapRef<typeof import('./composables/settings')['collapseNav']>
+    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 controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
@@ -401,6 +408,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']>
@@ -415,19 +423,23 @@ 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('./composables/settings')['hourStyle']>
+    readonly hashCode: UnwrapRef<typeof import('./utils/index')['hashCode']>
+    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('./composables/settings')['lightTheme']>
+    readonly lightTheme: UnwrapRef<typeof import('./stores/settings')['lightTheme']>
+    readonly locale: UnwrapRef<typeof import('./stores/settings')['locale']>
+    readonly loggingContextKey: UnwrapRef<typeof import('./composable/logContext')['loggingContextKey']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
@@ -435,7 +447,7 @@ declare module 'vue' {
     readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
     readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
-    readonly menuWidth: UnwrapRef<typeof import('./composables/settings')['menuWidth']>
+    readonly menuWidth: UnwrapRef<typeof import('./stores/settings')['menuWidth']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
@@ -457,10 +469,11 @@ 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 persistentVisibleKeysForContainer: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeysForContainer']>
+    readonly pinnedContainers: UnwrapRef<typeof import('./composable/storage')['pinnedContainers']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    readonly provideContainerContext: UnwrapRef<typeof import('./composables/containerContext')['provideContainerContext']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
+    readonly provideLoggingContext: UnwrapRef<typeof import('./composable/logContext')['provideLoggingContext']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -477,21 +490,21 @@ declare module 'vue' {
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
-    readonly search: UnwrapRef<typeof import('./composables/settings')['search']>
-    readonly sessionHost: UnwrapRef<typeof import('./composables/storage')['sessionHost']>
+    readonly search: UnwrapRef<typeof import('./stores/settings')['search']>
+    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 settings: UnwrapRef<typeof import('./composables/settings')['settings']>
+    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']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
-    readonly showAllContainers: UnwrapRef<typeof import('./composables/settings')['showAllContainers']>
-    readonly showStd: UnwrapRef<typeof import('./composables/settings')['showStd']>
-    readonly showTimestamp: UnwrapRef<typeof import('./composables/settings')['showTimestamp']>
-    readonly size: UnwrapRef<typeof import('./composables/settings')['size']>
-    readonly smallerScrollbars: UnwrapRef<typeof import('./composables/settings')['smallerScrollbars']>
-    readonly softWrap: UnwrapRef<typeof import('./composables/settings')['softWrap']>
+    readonly showAllContainers: UnwrapRef<typeof import('./stores/settings')['showAllContainers']>
+    readonly showStd: UnwrapRef<typeof import('./stores/settings')['showStd']>
+    readonly showTimestamp: UnwrapRef<typeof import('./stores/settings')['showTimestamp']>
+    readonly size: UnwrapRef<typeof import('./stores/settings')['size']>
+    readonly smallerScrollbars: UnwrapRef<typeof import('./stores/settings')['smallerScrollbars']>
+    readonly softWrap: UnwrapRef<typeof import('./stores/settings')['softWrap']>
     readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
     readonly stripVersion: UnwrapRef<typeof import('./utils/index')['stripVersion']>
     readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
@@ -538,11 +551,13 @@ 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 useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
+    readonly useContainerStream: UnwrapRef<typeof import('./composable/eventStreams')['useContainerStream']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
@@ -582,7 +597,9 @@ declare module 'vue' {
     readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useGroupedStream: UnwrapRef<typeof import('./composable/eventStreams')['useGroupedStream']>
     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']>
@@ -594,13 +611,15 @@ 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 useLoggingContext: UnwrapRef<typeof import('./composable/logContext')['useLoggingContext']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
     readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
     readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
     readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
     readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
     readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useMergedStream: UnwrapRef<typeof import('./composable/eventStreams')['useMergedStream']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
     readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
@@ -617,6 +636,7 @@ declare module 'vue' {
     readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
     readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
     readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePinnedLogsStore: UnwrapRef<typeof import('./stores/pinned')['usePinnedLogsStore']>
     readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
     readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
     readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
@@ -626,8 +646,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']>
@@ -636,19 +658,23 @@ 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 useServiceStream: UnwrapRef<typeof import('./composable/eventStreams')['useServiceStream']>
     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']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
+    readonly useStackStream: UnwrapRef<typeof import('./composable/eventStreams')['useStackStream']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
+    readonly useSwarmStore: UnwrapRef<typeof import('./stores/swarm')['useSwarmStore']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
     readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
@@ -665,7 +691,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']>
@@ -674,7 +700,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']>
@@ -699,9 +725,11 @@ declare module 'vue' {
     readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
     readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
     readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
+    readonly withBase: UnwrapRef<typeof import('./stores/config')['withBase']>
   }
 }
 declare module '@vue/runtime-core' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
     readonly $: UnwrapRef<typeof import('vue/macros')['$']>
@@ -710,21 +738,21 @@ declare module '@vue/runtime-core' {
     readonly $ref: UnwrapRef<typeof import('vue/macros')['$ref']>
     readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
     readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
-    readonly DEFAULT_SETTINGS: UnwrapRef<typeof import('./composables/settings')['DEFAULT_SETTINGS']>
+    readonly DEFAULT_SETTINGS: UnwrapRef<typeof import('./stores/settings')['DEFAULT_SETTINGS']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly arrayEquals: UnwrapRef<typeof import('./utils/index')['arrayEquals']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
-    readonly automaticRedirect: UnwrapRef<typeof import('./composables/settings')['automaticRedirect']>
-    readonly collapseNav: UnwrapRef<typeof import('./composables/settings')['collapseNav']>
+    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 controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
@@ -738,6 +766,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']>
@@ -752,19 +781,23 @@ 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('./composables/settings')['hourStyle']>
+    readonly hashCode: UnwrapRef<typeof import('./utils/index')['hashCode']>
+    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('./composables/settings')['lightTheme']>
+    readonly lightTheme: UnwrapRef<typeof import('./stores/settings')['lightTheme']>
+    readonly locale: UnwrapRef<typeof import('./stores/settings')['locale']>
+    readonly loggingContextKey: UnwrapRef<typeof import('./composable/logContext')['loggingContextKey']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
@@ -772,7 +805,7 @@ declare module '@vue/runtime-core' {
     readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
     readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
-    readonly menuWidth: UnwrapRef<typeof import('./composables/settings')['menuWidth']>
+    readonly menuWidth: UnwrapRef<typeof import('./stores/settings')['menuWidth']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
@@ -794,10 +827,11 @@ 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 persistentVisibleKeysForContainer: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeysForContainer']>
+    readonly pinnedContainers: UnwrapRef<typeof import('./composable/storage')['pinnedContainers']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    readonly provideContainerContext: UnwrapRef<typeof import('./composables/containerContext')['provideContainerContext']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
+    readonly provideLoggingContext: UnwrapRef<typeof import('./composable/logContext')['provideLoggingContext']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -814,21 +848,21 @@ declare module '@vue/runtime-core' {
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
-    readonly search: UnwrapRef<typeof import('./composables/settings')['search']>
-    readonly sessionHost: UnwrapRef<typeof import('./composables/storage')['sessionHost']>
+    readonly search: UnwrapRef<typeof import('./stores/settings')['search']>
+    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 settings: UnwrapRef<typeof import('./composables/settings')['settings']>
+    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']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
-    readonly showAllContainers: UnwrapRef<typeof import('./composables/settings')['showAllContainers']>
-    readonly showStd: UnwrapRef<typeof import('./composables/settings')['showStd']>
-    readonly showTimestamp: UnwrapRef<typeof import('./composables/settings')['showTimestamp']>
-    readonly size: UnwrapRef<typeof import('./composables/settings')['size']>
-    readonly smallerScrollbars: UnwrapRef<typeof import('./composables/settings')['smallerScrollbars']>
-    readonly softWrap: UnwrapRef<typeof import('./composables/settings')['softWrap']>
+    readonly showAllContainers: UnwrapRef<typeof import('./stores/settings')['showAllContainers']>
+    readonly showStd: UnwrapRef<typeof import('./stores/settings')['showStd']>
+    readonly showTimestamp: UnwrapRef<typeof import('./stores/settings')['showTimestamp']>
+    readonly size: UnwrapRef<typeof import('./stores/settings')['size']>
+    readonly smallerScrollbars: UnwrapRef<typeof import('./stores/settings')['smallerScrollbars']>
+    readonly softWrap: UnwrapRef<typeof import('./stores/settings')['softWrap']>
     readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
     readonly stripVersion: UnwrapRef<typeof import('./utils/index')['stripVersion']>
     readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
@@ -875,11 +909,13 @@ 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 useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
+    readonly useContainerStream: UnwrapRef<typeof import('./composable/eventStreams')['useContainerStream']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
@@ -919,7 +955,9 @@ declare module '@vue/runtime-core' {
     readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useGroupedStream: UnwrapRef<typeof import('./composable/eventStreams')['useGroupedStream']>
     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']>
@@ -931,13 +969,15 @@ 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 useLoggingContext: UnwrapRef<typeof import('./composable/logContext')['useLoggingContext']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
     readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
     readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
     readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
     readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
     readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useMergedStream: UnwrapRef<typeof import('./composable/eventStreams')['useMergedStream']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
     readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
@@ -954,6 +994,7 @@ declare module '@vue/runtime-core' {
     readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
     readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
     readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePinnedLogsStore: UnwrapRef<typeof import('./stores/pinned')['usePinnedLogsStore']>
     readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
     readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
     readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
@@ -963,8 +1004,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']>
@@ -973,19 +1016,23 @@ 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 useServiceStream: UnwrapRef<typeof import('./composable/eventStreams')['useServiceStream']>
     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']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
+    readonly useStackStream: UnwrapRef<typeof import('./composable/eventStreams')['useStackStream']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
+    readonly useSwarmStore: UnwrapRef<typeof import('./stores/swarm')['useSwarmStore']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
     readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
@@ -1002,7 +1049,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']>
@@ -1011,7 +1058,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']>
@@ -1036,5 +1083,6 @@ declare module '@vue/runtime-core' {
     readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
     readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
     readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
+    readonly withBase: UnwrapRef<typeof import('./stores/config')['withBase']>
   }
 }

assets/components.d.ts

@@ -1,81 +1,109 @@
 /* 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']
     'Cil:columns': typeof import('~icons/cil/columns')['default']
     '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']
-    ContainerPopup: typeof import('./components/LogViewer/ContainerPopup.vue')['default']
-    ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
+    ContainerActionsToolbar: typeof import('./components/ContainerViewer/ContainerActionsToolbar.vue')['default']
+    ContainerHealth: typeof import('./components/ContainerViewer/ContainerHealth.vue')['default']
+    ContainerLog: typeof import('./components/ContainerViewer/ContainerLog.vue')['default']
+    ContainerName: typeof import('./components/LogViewer/ContainerName.vue')['default']
+    ContainerPopup: typeof import('./components/ContainerPopup.vue')['default']
     ContainerTable: typeof import('./components/ContainerTable.vue')['default']
-    ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
+    ContainerTitle: typeof import('./components/ContainerViewer/ContainerTitle.vue')['default']
     DateTime: typeof import('./components/common/DateTime.vue')['default']
     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']
+    EventSource: typeof import('./components/LogViewer/EventSource.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']
+    GroupedLog: typeof import('./components/GroupedViewer/GroupedLog.vue')['default']
+    HostList: typeof import('./components/HostList.vue')['default']
+    HostMenu: typeof import('./components/HostMenu.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']
-    LogActionsToolbar: typeof import('./components/LogViewer/LogActionsToolbar.vue')['default']
-    LogContainer: typeof import('./components/LogViewer/LogContainer.vue')['default']
+    LabeledInput: typeof import('./components/common/LabeledInput.vue')['default']
+    Links: typeof import('./components/Links.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']
+    LogList: typeof import('./components/LogViewer/LogList.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']
     'Mdi:close': typeof import('~icons/mdi/close')['default']
+    '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:lightChevronDoubleDown': typeof import('~icons/mdi-light/chevron-double-down')['default']
-    'Mdi:lightChevronLeft': typeof import('~icons/mdi-light/chevron-left')['default']
-    'Mdi:lightChevronRight': typeof import('~icons/mdi-light/chevron-right')['default']
-    'Mdi:lightCog': typeof import('~icons/mdi-light/cog')['default']
-    'Mdi:lightLogout': typeof import('~icons/mdi-light/logout')['default']
-    'Mdi:lightMagnify': typeof import('~icons/mdi-light/magnify')['default']
-    'MdiLight:check': typeof import('~icons/mdi-light/check')['default']
+    'Mdi:magnify': typeof import('~icons/mdi/magnify')['default']
     MobileMenu: typeof import('./components/common/MobileMenu.vue')['default']
+    MultiContainerLog: typeof import('./components/MultiContainerViewer/MultiContainerLog.vue')['default']
+    MultiContainerStat: typeof import('./components/LogViewer/MultiContainerStat.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:arrowsMerge': typeof import('~icons/ph/arrows-merge')['default']
+    'Ph:boundingBoxFill': typeof import('~icons/ph/bounding-box-fill')['default']
+    'Ph:circlesFour': typeof import('~icons/ph/circles-four')['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']
+    'Ph:stack': typeof import('~icons/ph/stack')['default']
+    'Ph:stackSimple': typeof import('~icons/ph/stack-simple')['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']
     ScrollProgress: typeof import('./components/ScrollProgress.vue')['default']
     Search: typeof import('./components/Search.vue')['default']
+    ServiceLog: typeof import('./components/ServiceViewer/ServiceLog.vue')['default']
     SideMenu: typeof import('./components/SideMenu.vue')['default']
     SidePanel: typeof import('./components/SidePanel.vue')['default']
     SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default']
     SkippedEntriesLogItem: typeof import('./components/LogViewer/SkippedEntriesLogItem.vue')['default']
+    SlideTransition: typeof import('./components/common/SlideTransition.vue')['default']
+    StackLog: typeof import('./components/StackViewer/StackLog.vue')['default']
     StatMonitor: typeof import('./components/LogViewer/StatMonitor.vue')['default']
     StatSparkline: typeof import('./components/LogViewer/StatSparkline.vue')['default']
+    SwarmMenu: typeof import('./components/SwarmMenu.vue')['default']
     Tag: typeof import('./components/common/Tag.vue')['default']
     TimedButton: typeof import('./components/common/TimedButton.vue')['default']
     Toggle: typeof import('./components/common/Toggle.vue')['default']
+    ViewerWithSource: typeof import('./components/LogViewer/ViewerWithSource.vue')['default']
     ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
   }
 }

assets/components/BarChart.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="relative">
-    <div class="bar h-7 origin-left rounded-br rounded-tr bg-primary transition-transform"></div>
-    <div class="absolute inset-0 flex flex-col justify-center px-2 text-sm">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const { value } = defineProps<{ value: number }>();
-
-const minValue = computed(() => Math.min(value, 1));
-</script>
-
-<style scoped>
-.bar {
-  transform: scaleX(v-bind(minValue));
-}
-</style>

assets/components/ContainerPopup.vue

@@ -2,12 +2,12 @@
   <div>
     <span class="font-light capitalize"> RUNNING </span>
     <span class="font-semibold">
-      <distance-time :date="container.created" strict :suffix="false"></distance-time>
+      <DistanceTime :date="container.created" strict :suffix="false" />
     </span>
   </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/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,34 @@
           <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>
+          <div class="flex flex-row items-center gap-1">
+            <progress
+              class="progress progress-primary"
+              :value="Math.min(container.movingAverage.cpu, 100)"
+              :max="100"
+            ></progress>
+            <span class="text-sm">{{ container.movingAverage.cpu.toFixed(0) }}%</span>
+          </div>
         </td>
         <td v-if="isVisible('mem')">
-          <bar-chart :value="container.movingAverage.memory / 100">
-            {{ (container.movingAverage.memory / 100).toLocaleString(undefined, { style: "percent" }) }}
-          </bar-chart>
+          <div class="flex flex-row items-center gap-1">
+            <progress class="progress progress-primary" :value="container.movingAverage.memory" max="100"></progress>
+            <span class="text-sm">{{ container.movingAverage.memory.toFixed(0) }}%</span>
+          </div>
         </td>
       </tr>
     </tbody>
   </table>
   <div class="p-4 text-center">
     <nav class="join" v-if="isPaginated">
-      <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 +112,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 +148,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/ContainerViewer/ContainerActionsToolbar.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="dropdown dropdown-end dropdown-hover">
+    <label tabindex="0" class="btn btn-ghost btn-sm gap-0.5 px-2">
+      <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 z-50 w-52 rounded-box bg-base p-1 shadow">
+      <li>
+        <a @click.prevent="clear()">
+          <octicon:trash-24 /> {{ $t("toolbar.clear") }}
+          <KeyShortcut char="k" :modifiers="['shift', 'meta']" />
+        </a>
+      </li>
+      <li>
+        <a :href="downloadUrl" download> <octicon:download-24 /> {{ $t("toolbar.download") }} </a>
+      </li>
+      <li>
+        <a @click.prevent="showSearch = true">
+          <mdi:magnify /> {{ $t("toolbar.search") }}
+          <KeyShortcut char="f" />
+        </a>
+      </li>
+      <li class="line"></li>
+      <li>
+        <a
+          @click="
+            streamConfig.stdout = true;
+            streamConfig.stderr = true;
+          "
+        >
+          <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" />
+            </template>
+          </div>
+          {{ $t("toolbar.show-all") }}
+        </a>
+      </li>
+      <li>
+        <a
+          @click="
+            streamConfig.stdout = true;
+            streamConfig.stderr = false;
+          "
+        >
+          <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" }) }}
+        </a>
+      </li>
+      <li>
+        <a
+          @click="
+            streamConfig.stdout = false;
+            streamConfig.stderr = true;
+          "
+        >
+          <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>
+import { Container } from "@/models/Container";
+
+const { showSearch } = useSearchFilter();
+const { enableActions } = config;
+
+const clear = defineEmit();
+
+const { streamConfig } = useLoggingContext();
+
+const { container } = defineProps<{ container: Container }>();
+
+const { actionStates, start, stop, restart } = useContainerActions(toRef(() => container));
+
+const downloadParams = computed(() =>
+  Object.entries(streamConfig)
+    .filter(([, value]) => value)
+    .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {}),
+);
+
+const downloadUrl = computed(() =>
+  withBase(
+    `/api/hosts/${container.host}/containers/${container.id}/logs/download?${new URLSearchParams(downloadParams.value).toString()}`,
+  ),
+);
+
+const disableRestart = computed(() => {
+  return actionStates.stop || actionStates.start || actionStates.restart;
+});
+</script>
+
+<style scoped lang="postcss">
+li.line {
+  @apply h-px bg-base-content/20;
+}
+
+a {
+  @apply whitespace-nowrap;
+}
+</style>

assets/components/ContainerViewer/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/ContainerViewer/ContainerLog.vue

@@ -0,0 +1,52 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="container">
+    <template #header v-if="showTitle">
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <ContainerTitle :container="container" />
+        <MultiContainerStat class="ml-auto" :containers="[container]" />
+
+        <ContainerActionsToolbar @clear="viewer?.clear()" class="mobile-hidden" :container="container" />
+        <a class="btn btn-circle btn-xs" @click="close()" v-if="closable">
+          <mdi:close />
+        </a>
+      </div>
+    </template>
+    <template #default="{ setLoading }">
+      <ViewerWithSource
+        ref="viewer"
+        @loading-more="setLoading($event)"
+        :stream-source="useContainerStream"
+        :entity="container"
+        :visible-keys="visibleKeys"
+        :show-container-name="false"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+import { ComponentExposed } from "vue-component-type-helpers";
+
+const {
+  id,
+  showTitle = false,
+  scrollable = false,
+  closable = false,
+} = defineProps<{
+  id: string;
+  showTitle?: boolean;
+  scrollable?: boolean;
+  closable?: boolean;
+}>();
+
+const close = defineEmit();
+
+const store = useContainerStore();
+const container = store.currentContainer($$(id));
+const visibleKeys = persistentVisibleKeysForContainer(container);
+
+const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
+
+provideLoggingContext(toRef(() => [container.value]));
+</script>

assets/components/ContainerViewer/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,24 @@
         {{ 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>
+    <ContainerHealth :health="container.health" v-if="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();
+import { Container } from "@/models/Container";
+
+const { container } = defineProps<{ container: Container }>();
 const pinned = computed({
-  get: () => pinnedContainers.value.has(container.value.storageKey),
+  get: () => pinnedContainers.value.has(container.name),
   set: (value) => {
     if (value) {
-      pinnedContainers.value.add(container.value.storageKey);
+      pinnedContainers.value.add(container.name);
     } else {
-      pinnedContainers.value.delete(container.value.storageKey);
+      pinnedContainers.value.delete(container.name);
     }
   },
 });

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:light-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">
+          <DistanceTime :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;
 }>();
 
@@ -54,48 +62,51 @@ const input = ref<HTMLInputElement>();
 const selectedIndex = ref(0);
 
 const router = useRouter();
-const store = useContainerStore();
-const { containers } = storeToRefs(store);
+const containerStore = useContainerStore();
+const pinnedStore = usePinnedLogsStore();
+const { containers } = storeToRefs(containerStore);
 
 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) => {
@@ -111,9 +122,35 @@ function selected({ id }: { id: string }) {
   close();
 }
 function addColumn(container: { id: string }) {
-  store.appendActiveContainer(container);
+  pinnedStore.pinContainer(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/GroupedViewer/GroupedLog.vue

@@ -0,0 +1,46 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="group.containers.length && ready">
+    <template #header>
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <div class="flex flex-1 gap-1.5 truncate @container md:gap-2">
+          <div class="inline-flex font-mono text-sm">
+            <div class="font-semibold">{{ group.containers.length }} containers</div>
+          </div>
+        </div>
+        <MultiContainerStat class="ml-auto" :containers="group.containers" />
+      </div>
+    </template>
+    <template #default="{ setLoading }">
+      <ViewerWithSource
+        ref="viewer"
+        @loading-more="setLoading($event)"
+        :stream-source="useGroupedStream"
+        :entity="group"
+        :visible-keys="visibleKeys"
+        :show-container-name="true"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+import { GroupedContainers } from "@/models/Container";
+
+const { name, scrollable = false } = defineProps<{
+  name: string;
+  scrollable?: boolean;
+}>();
+
+const containerStore = useContainerStore();
+
+const { ready } = storeToRefs(containerStore);
+
+const swarmStore = useSwarmStore();
+const { customGroups } = storeToRefs(swarmStore);
+
+const group = computed(() => customGroups.value.find((g) => g.name === name) ?? new GroupedContainers("", []));
+
+const visibleKeys = ref<string[][]>([]);
+provideLoggingContext(toRef(() => group.value.containers));
+</script>

assets/components/HostList.vue

@@ -0,0 +1,99 @@
+<template>
+  <ul class="grid gap-4 md:grid-cols-[repeat(auto-fill,minmax(480px,1fr))]">
+    <li v-for="host in hosts" class="card bg-base-lighter">
+      <div class="card-body grid auto-cols-auto grid-flow-col justify-between gap-4">
+        <div class="overflow-hidden">
+          <div class="truncate text-xl font-semibold">
+            {{ host.name }} <span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
+          </div>
+          <ul class="flex flex-row gap-2 text-sm md:gap-4">
+            <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", hostContainers[host.id]?.length) }}
+          </div>
+        </div>
+
+        <div class="flex flex-row gap-4 md:gap-8" v-if="weightedStats[host.id]">
+          <div
+            class="radial-progress text-sm text-primary [--size:4rem] [--thickness:0.25em] md:text-[1rem] md:[--size:5rem]"
+            :style="`--value: ${Math.floor((weightedStats[host.id].weighted.totalCPU / (host.nCPU * 100)) * 100)};  `"
+            role="progressbar"
+          >
+            {{ weightedStats[host.id].weighted.totalCPU.toFixed(0) }}%
+          </div>
+          <div
+            class="radial-progress text-sm text-primary [--size:4rem] [--thickness:0.25em] md:text-[1rem] md:[--size:5rem]"
+            :style="`--value: ${(weightedStats[host.id].weighted.totalMem / host.memTotal) * 100};`"
+            role="progressbar"
+          >
+            {{ formatBytes(weightedStats[host.id].weighted.totalMem, 1) }}
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { Container } from "@/models/Container";
+
+const containerStore = useContainerStore();
+const { containers } = storeToRefs(containerStore) as unknown as {
+  containers: Ref<Container[]>;
+};
+
+const runningContainers = computed(() => containers.value.filter((container) => container.state === "running"));
+
+const { hosts } = useHosts();
+const hostContainers = computed(() => {
+  const results: Record<string, Container[]> = {};
+  for (const container of runningContainers.value) {
+    if (!results[container.host]) {
+      results[container.host] = [];
+    }
+    results[container.host].push(container);
+  }
+  return results;
+});
+
+type TotalStat = {
+  totalCPU: number;
+  totalMem: number;
+};
+const weightedStats: Record<string, { mostRecent: TotalStat; weighted: TotalStat }> = {};
+const initWeightedStats = () => {
+  for (const [host, containers] of Object.entries(hostContainers.value)) {
+    const mostRecent = ref<TotalStat>({ totalCPU: 0, totalMem: 0 });
+    for (const container of containers) {
+      mostRecent.value.totalCPU += container.stat.cpu;
+      mostRecent.value.totalMem += container.stat.memoryUsage;
+    }
+    weightedStats[host] = reactive({ mostRecent, weighted: useExponentialMovingAverage(mostRecent) });
+  }
+};
+
+watchOnce(hostContainers, initWeightedStats);
+initWeightedStats();
+
+useIntervalFn(
+  () => {
+    for (const [host, containers] of Object.entries(hostContainers.value)) {
+      const stat = { totalCPU: 0, totalMem: 0 };
+      for (const container of containers) {
+        stat.totalCPU += container.stat.cpu;
+        stat.totalMem += container.stat.memoryUsage;
+      }
+      weightedStats[host].mostRecent = stat;
+    }
+  },
+  1000,
+  { immediate: true },
+);
+</script>
+
+<style scoped></style>

assets/components/HostMenu.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="breadcrumbs">
+    <ul>
+      <li><a @click.prevent="setHost(null)" class="link-primary">Hosts</a></li>
+      <li v-if="sessionHost && hosts[sessionHost]" class="cursor-default">
+        {{ hosts[sessionHost].name }}
+      </li>
+    </ul>
+  </div>
+
+  <SlideTransition :slide-right="!!sessionHost">
+    <template #left>
+      <ul class="menu p-0">
+        <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>
+    </template>
+    <template #right>
+      <ul class="containers menu p-0 [&_li.menu-title]:px-0">
+        <li v-for="{ label, containers, icon } in menuItems" :key="label">
+          <!-- @vue-ignore -->
+          <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 }}
+
+              <router-link
+                :to="{
+                  name: 'merged-name',
+                  query: { id: containers.map(({ id }) => id) },
+                  params: { name: label.replace('label.', '') },
+                }"
+                class="btn btn-square btn-outline btn-primary btn-xs"
+                active-class="btn-active"
+                title="Merge all containers into one view"
+              >
+                <ph:arrows-merge />
+              </router-link>
+            </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="pinnedStore.pinContainer(item)"
+                    :title="item.name"
+                    class="group auto-cols-[auto_max-content_max-content]"
+                  >
+                    <div class="truncate">
+                      {{ item.name }}<span class="font-light opacity-70" v-if="item.isSwarm">.{{ item.swarmId }}</span>
+                    </div>
+                    <ContainerHealth :health="item.health" />
+                    <span
+                      class="hidden hover:text-secondary group-hover:inline-block"
+                      @click.stop.prevent="pinnedStore.pinContainer(item)"
+                      v-show="!pinnedStore.isPinned(item)"
+                      :title="$t('tooltip.pin-column')"
+                    >
+                      <cil:columns />
+                    </span>
+                  </router-link>
+                  <template #content>
+                    <ContainerPopup :container="item" />
+                  </template>
+                </Popup>
+              </li>
+            </ul>
+          </details>
+        </li>
+      </ul>
+    </template>
+  </SlideTransition>
+</template>
+
+<script lang="ts" setup>
+import { Container } from "@/models/Container";
+import { sessionHost } from "@/composable/storage";
+
+// @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 containerStore = useContainerStore();
+const { visibleContainers } = storeToRefs(containerStore);
+
+const pinnedStore = usePinnedLogsStore();
+
+const { hosts } = useHosts();
+
+const setHost = (host: string | null) => (sessionHost.value = host);
+
+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(sorter),
+);
+
+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(() => {
+  const namespaced: Record<string, Container[]> = {};
+  const pinned = [];
+  const singular = [];
+
+  for (const item of sortedContainers.value) {
+    const namespace = item.namespace;
+    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;
+});
+</script>
+<style scoped lang="postcss">
+.menu {
+  @apply text-[0.95rem];
+}
+
+li.exited {
+  @apply opacity-50;
+}
+</style>

assets/components/InfiniteLoader.vue

@@ -14,6 +14,7 @@ const isLoading = ref(false);
 const root = ref<HTMLElement>();
 
 const observer = new IntersectionObserver(async (entries) => {
+  // console.log(entries, entries[0].intersectionRatio);
   if (entries[0].intersectionRatio <= 0) return;
   if (onLoadMore && enabled) {
     const scrollingParent = root.value?.closest("[data-scrolling]") || document.documentElement;

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,17 +1,25 @@
 <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="showContainerName">
+      <ContainerName :id="logEntry.containerID" />
+    </div>
     <div v-if="showStd">
-      <log-std :std="logEntry.std"></log-std>
+      <LogStd :std="logEntry.std" />
     </div>
     <div v-if="showTimestamp">
-      <log-date :date="logEntry.date"></log-date>
+      <LogDate :date="logEntry.date" />
     </div>
     <div class="flex">
-      <log-level :level="logEntry.level"></log-level>
+      <LogLevel :level="logEntry.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>
@@ -20,8 +28,13 @@
         </li>
         <li class="text-light" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
       </ul>
-      <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
+      <FieldList :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys" />
     </div>
+    <LogMessageActions
+      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>
@@ -29,9 +42,10 @@ import { type ComplexLogEntry } from "@/models/LogEntry";
 
 const { markSearch } = useSearchFilter();
 
-const { logEntry } = defineProps<{
+const { logEntry, showContainerName = false } = defineProps<{
   logEntry: ComplexLogEntry;
   visibleKeys: string[][];
+  showContainerName?: boolean;
 }>();
 
 const [expanded, expandToggle] = useToggle();
@@ -45,19 +59,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/ContainerName.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="grid w-40 overflow-hidden rounded text-center text-sm text-white">
+    <div class="random-color col-start-1 row-start-1 brightness-75"></div>
+    <div class="col-start-1 row-start-1 truncate px-2 brightness-100 [direction:rtl]">{{ containerNames[id] }}</div>
+  </div>
+</template>
+<script lang="ts">
+const colors = [
+  "#4B0082",
+  "#FF00FF",
+  "#FF7F00",
+  "#FFFF00",
+  "#00FF00",
+  "#00FFFF",
+  "#FF0000",
+  "#0000FF",
+  "#FF007F",
+  "#32CD32",
+  "#40E0D0",
+  "#E6E6FA",
+  "#800080",
+  "#FFD700",
+  "#FF4040",
+] as const;
+</script>
+<script lang="ts" setup>
+const containerStore = useContainerStore();
+const { containerNames } = storeToRefs(containerStore);
+
+const { id } = defineProps<{
+  id: string;
+}>();
+
+const color = computed(() => colors[Math.abs(hashCode(id)) % colors.length]);
+</script>
+
+<style lang="postcss" scoped>
+.random-color {
+  background-color: v-bind(color);
+}
+</style>

assets/components/LogViewer/ContainerStat.vue

@@ -1,36 +0,0 @@
-<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="unref(container.stat).cpu + '%'" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-const { container } = useContainerContext();
-
-const cpuData = computedWithControl(
-  () => container.value.stat,
-  () => {
-    const history = container.value.statHistory;
-    const points: Point<unknown>[] = history.map((stat, i) => ({
-      x: i,
-      y: Math.max(0, stat.snapshot.cpu),
-      value: Math.max(0, stat.snapshot.cpu) + "%",
-    }));
-    return points;
-  },
-);
-
-const memoryData = computedWithControl(
-  () => container.value.stat,
-  () => {
-    const history = container.value.statHistory;
-    const points: Point<string>[] = history.map((stat, i) => ({
-      x: i,
-      y: stat.snapshot.memory,
-      value: formatBytes(stat.snapshot.memoryUsage),
-    }));
-    return points;
-  },
-);
-</script>

assets/components/LogViewer/DockerEventLogItem.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="flex-1 font-sans text-[0.9rem]">
-    <span class="whitespace-pre-wrap" :data-event="logEntry.event" v-html="logEntry.message"></span>
-    <div
-      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" />
+  <div class="flex w-full flex-col">
+    <div class="relative flex items-start gap-x-2">
+      <ContainerName class="flex-none" :id="logEntry.containerID" v-if="showContainerName" />
+      <LogDate :date="logEntry.date" v-if="showTimestamp" />
+      <LogLevel class="flex" />
+      <div class="whitespace-pre-wrap" :data-event="logEntry.event" v-html="logEntry.message"></div>
+    </div>
+    <div class="alert alert-info mt-8 w-auto flex-none font-sans text-[1rem] md:mx-auto md:w-1/2" v-if="followEligible">
+      <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 }) }}
@@ -31,35 +33,46 @@ const { t } = useI18n();
 
 const { logEntry } = defineProps<{
   logEntry: DockerEventLogEntry;
+  showContainerName?: boolean;
 }>();
 
+const { containers } = useLoggingContext();
+
 const store = useContainerStore();
-const { containers } = storeToRefs(store);
-const { container } = useContainerContext();
+
+const { containers: allContainers } = storeToRefs(store);
 
 const nextContainer = computed(
   () =>
-    containers.value
-      .filter(
+    [
+      ...allContainers.value.filter(
         (c) =>
-          c.host === container.value.host &&
+          c.host === containers.value[0].host &&
           c.created > logEntry.date &&
-          c.name === container.value.name &&
+          c.name === containers.value[0].name &&
           c.state === "running",
-      )
-      .toSorted((a, b) => +a.created - +b.created)[0],
+      ),
+    ].sort((a, b) => +a.created - +b.created)[0],
+);
+
+const followEligible = computed(
+  () =>
+    router.currentRoute.value.name === "container-id" &&
+    logEntry.event === "container-stopped" &&
+    containers.value.length === 1 &&
+    nextContainer.value !== undefined,
 );
 
 function redirectNow() {
   showToast(
     {
       title: t("alert.redirected.title"),
-      message: t("alert.redirected.message", { containerId: nextContainer.value.id }),
+      message: t("alert.redirected.message", { containerId: nextContainer.value?.id }),
       type: "info",
     },
     { expire: 5000 },
   );
-  router.push({ name: "container-id", params: { id: nextContainer.value.id } });
+  router.push({ name: "container-id", params: { id: nextContainer.value?.id } });
 }
 </script>
 

assets/components/LogViewer/EventSource.spec.ts

@@ -1,25 +1,27 @@
-import { mount } from "@vue/test-utils";
 import { createTestingPinia } from "@pinia/testing";
+import { mount } from "@vue/test-utils";
+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 "@/composables/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 { default as Component } from "./EventSource.vue";
+import LogViewer from "@/components/LogViewer/LogViewer.vue";
+import { Container } from "@/models/Container";
 
 vi.mock("@/stores/config", () => ({
   __esModule: true,
   default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
+  withBase: (path: string) => path,
 }));
 
 /**
  * @vitest-environment jsdom
  */
-describe("<LogEventSource />", () => {
+describe("<ContainerEventSource />", () => {
   const search = useSearchFilter();
 
   beforeEach(() => {
@@ -65,32 +67,35 @@ describe("<LogEventSource />", () => {
       ],
     });
 
-    return mount(LogEventSource, {
+    return mount(Component<Container>, {
       global: {
-        plugins: [router, createTestingPinia({ createSpy: vi.fn })],
+        plugins: [router, createTestingPinia({ createSpy: vi.fn }), createI18n({})],
         components: {
           LogViewer,
         },
         provide: {
-          [containerContext as symbol]: {
-            container: computed(() => ({ id: "abc", image: "test:v123", host: "localhost" })),
+          scrollingPaused: computed(() => false),
+          [loggingContextKey as symbol]: {
+            containers: computed(() => [{ id: "abc", image: "test:v123", host: "localhost" }]),
             streamConfig: reactive({ stdout: true, stderr: true }),
           },
-          scrollingPaused: computed(() => false),
         },
       },
       slots: {
         default: `
-        <template #scoped="params"><log-viewer :messages="params.messages"></log-viewer></template>
+        <template #scoped="params"><LogViewer :messages="params.messages" :show-container-name="false" :visible-keys="[]" /></template>
         `,
       },
-      props: {},
+      props: {
+        streamSource: useContainerStream,
+        entity: new Container("abc", new Date(), "image", "name", "command", "localhost", {}, "status", "created", []),
+      },
     });
   }
 
-  const sourceUrl = "/api/logs/stream/localhost/abc?lastEventId=&stdout=1&stderr=1";
+  const sourceUrl = "/api/hosts/localhost/containers/abc/logs/stream?stdout=1&stderr=1";
 
-  test("renders correctly", async () => {
+  test("renders loading correctly", async () => {
     const wrapper = createLogEventSource();
     expect(wrapper.html()).toMatchSnapshot();
   });
@@ -138,19 +143,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/EventSource.vue

@@ -0,0 +1,28 @@
+<template>
+  <InfiniteLoader :onLoadMore="fetchMore" :enabled="messages.length > 50"></InfiniteLoader>
+  <slot :messages="messages"></slot>
+</template>
+
+<script lang="ts" setup generic="T">
+import { LogStreamSource } from "@/composable/eventStreams";
+
+const loadingMore = defineEmit<[value: boolean]>();
+
+const props = defineProps<{
+  streamSource: (t: Ref<T>) => LogStreamSource;
+  entity: T;
+}>();
+
+const { entity, streamSource } = toRefs(props);
+
+const { messages, loadOlderLogs } = streamSource.value(entity);
+
+const beforeLoading = () => loadingMore(true);
+const afterLoading = () => loadingMore(false);
+
+defineExpose({
+  clear: () => (messages.value = []),
+});
+
+const fetchMore = () => loadOlderLogs({ beforeLoading, afterLoading });
+</script>

assets/components/LogViewer/FieldList.vue

@@ -1,19 +1,14 @@
 <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
-          :fields="value"
-          :parent-key="parentKey.concat(name)"
-          :visible-keys="visibleKeys"
-          expanded
-        ></field-list>
+        <FieldList :fields="value" :parent-key="parentKey.concat(name)" :visible-keys="visibleKeys" expanded />
       </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 +16,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

@@ -1,89 +0,0 @@
-<template>
-  <div class="dropdown dropdown-end dropdown-hover">
-    <label tabindex="0" class="btn btn-ghost btn-sm gap-0.5 px-2">
-      <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">
-      <li>
-        <a @click.prevent="clear()">
-          <octicon:trash-24 /> {{ $t("toolbar.clear") }}
-          <key-shortcut char="k" :modifiers="['shift', 'meta']"></key-shortcut>
-        </a>
-      </li>
-      <li>
-        <a :href="`${base}/api/logs/download/${container.host}/${container.id}`" download>
-          <octicon:download-24 /> {{ $t("toolbar.download") }}
-        </a>
-      </li>
-      <li>
-        <a @click.prevent="showSearch = true">
-          <mdi:light-magnify /> {{ $t("toolbar.search") }}
-          <key-shortcut char="f"></key-shortcut>
-        </a>
-      </li>
-      <li class="line"></li>
-      <li>
-        <a
-          @click="
-            streamConfig.stdout = true;
-            streamConfig.stderr = true;
-          "
-        >
-          <div class="flex h-4 w-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" />
-            </template>
-          </div>
-          {{ $t("toolbar.show-all") }}
-        </a>
-      </li>
-      <li>
-        <a
-          @click="
-            streamConfig.stdout = true;
-            streamConfig.stderr = false;
-          "
-        >
-          <div class="flex h-4 w-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" }) }}
-        </a>
-      </li>
-      <li>
-        <a
-          @click="
-            streamConfig.stdout = false;
-            streamConfig.stderr = true;
-          "
-        >
-          <div class="flex h-4 w-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>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const { showSearch } = useSearchFilter();
-const { base } = config;
-
-const clear = defineEmit();
-
-const { container, streamConfig } = useContainerContext();
-</script>
-
-<style scoped lang="postcss">
-li.line {
-  @apply h-px bg-base-content/20;
-}
-
-a {
-  @apply whitespace-nowrap;
-}
-</style>

assets/components/LogViewer/LogContainer.vue

@@ -1,53 +0,0 @@
-<template>
-  <scrollable-view :scrollable="scrollable" v-if="container">
-    <template #header v-if="showTitle">
-      <div class="mx-2 flex items-center gap-2">
-        <container-title @close="$emit('close')" />
-        <container-stat class="ml-auto" />
-
-        <log-actions-toolbar @clear="onClearClicked()" class="mobile-hidden" />
-        <a class="btn btn-circle btn-xs" @click="close()" v-if="closable">
-          <mdi:close />
-        </a>
-      </div>
-    </template>
-    <template #default="{ setLoading }">
-      <log-viewer-with-source ref="viewer" @loading-more="setLoading($event)" />
-    </template>
-  </scrollable-view>
-</template>
-
-<script lang="ts" setup>
-import LogViewerWithSource from "./LogViewerWithSource.vue";
-
-const {
-  id,
-  showTitle = false,
-  scrollable = false,
-  closable = false,
-} = defineProps<{
-  id: string;
-  showTitle?: boolean;
-  scrollable?: boolean;
-  closable?: boolean;
-}>();
-
-const close = defineEmit();
-
-const store = useContainerStore();
-const container = store.currentContainer($$(id));
-provideContainerContext(container);
-
-const viewer = ref<InstanceType<typeof LogViewerWithSource>>();
-
-function onClearClicked() {
-  viewer.value?.clear();
-}
-
-onKeyStroke("k", (e) => {
-  if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
-    onClearClicked();
-    e.preventDefault();
-  }
-});
-</script>

assets/components/LogViewer/LogDate.vue

@@ -1,7 +1,7 @@
 <template>
-  <tag size="small">
-    <date-time :date="date" class="whitespace-nowrap text-blue"></date-time>
-  </tag>
+  <Tag size="small">
+    <DateTime :date="date" class="whitespace-nowrap text-blue" />
+  </Tag>
 </template>
 <script lang="ts" setup>
 defineProps<{

assets/components/LogViewer/LogEventSource.vue

@@ -1,20 +0,0 @@
-<template>
-  <infinite-loader :onLoadMore="fetchMore" :enabled="messages.length > 100"></infinite-loader>
-  <slot :messages="messages"></slot>
-</template>
-
-<script lang="ts" setup>
-const loadingMore = defineEmit<[value: boolean]>();
-
-const { container, streamConfig } = useContainerContext();
-const { messages, loadOlderLogs } = useLogStream(container, streamConfig);
-
-const beforeLoading = () => loadingMore(true);
-const afterLoading = () => loadingMore(false);
-
-defineExpose({
-  clear: () => (messages.value = []),
-});
-
-const fetchMore = () => loadOlderLogs({ beforeLoading, afterLoading });
-</script>

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/LogList.vue

@@ -0,0 +1,80 @@
+<template>
+  <ul
+    class="events group py-4"
+    :class="{ 'disable-wrap': !softWrap, [size]: true, compact }"
+    v-if="messages.length > 0"
+  >
+    <li
+      v-for="item in messages"
+      :key="item.id"
+      :data-key="item.id"
+      :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
+      class="group/entry"
+    >
+      <component
+        :is="item.getComponent()"
+        :log-entry="item"
+        :visible-keys="visibleKeys"
+        :show-container-name="showContainerName"
+      />
+    </li>
+  </ul>
+  <div v-else class="m-4 text-center">
+    <span class="loading loading-ring loading-md text-primary"></span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { toRaw } from "vue";
+
+import { type JSONObject, LogEntry } from "@/models/LogEntry";
+
+defineProps<{
+  messages: LogEntry<string | JSONObject>[];
+  visibleKeys: string[][];
+  lastSelectedItem: LogEntry<string | JSONObject> | undefined;
+  showContainerName: boolean;
+}>();
+</script>
+<style scoped lang="postcss">
+.events {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Consolas,
+    Liberation Mono,
+    monaco,
+    Menlo,
+    monospace;
+
+  > li {
+    @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;
+    }
+  }
+
+  &.small {
+    @apply text-[0.7em];
+  }
+
+  &.medium {
+    @apply text-[0.8em];
+  }
+
+  &.large {
+    @apply text-lg;
+  }
+
+  &.compact {
+    > li {
+      @apply py-0;
+    }
+  }
+}
+</style>

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/LogStd.vue

@@ -1,7 +1,7 @@
 <template>
-  <tag size="small" :std="std">
+  <Tag size="small" :std="std">
     {{ std }}
-  </tag>
+  </Tag>
 </template>
 
 <script lang="ts" setup>

assets/components/LogViewer/LogViewer.vue

@@ -1,53 +1,34 @@
 <template>
-  <ul class="events group py-4" :class="{ 'disable-wrap': !softWrap, [size]: true }">
-    <li
-      v-for="item in filtered"
-      :key="item.id"
-      :data-key="item.id"
-      :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
-    >
-      <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" />
-    </li>
-  </ul>
+  <LogList
+    :messages="filtered"
+    :last-selected-item="lastSelectedItem"
+    :visible-keys="visibleKeys"
+    :show-container-name="showContainerName"
+  />
 </template>
 
 <script lang="ts" setup>
-import { toRaw } from "vue";
 import { useRouteHash } from "@vueuse/router";
 
 import { type JSONObject, LogEntry } from "@/models/LogEntry";
 
 const props = defineProps<{
   messages: LogEntry<string | JSONObject>[];
+  visibleKeys: string[][];
+  showContainerName: boolean;
 }>();
 
-const { container } = useContainerContext();
-
-let visibleKeys = persistentVisibleKeys(container);
+const { messages, visibleKeys } = toRefs(props);
 
 const { filteredPayload } = useVisibleFilter(visibleKeys);
-const { filteredMessages, resetSearch, isSearching } = useSearchFilter();
+const { filteredMessages } = 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 { lastSelectedItem } = useLogSearchContext() as {
+  lastSelectedItem: Ref<LogEntry<string | JSONObject> | undefined>;
+};
 const routeHash = useRouteHash();
 watch(
   routeHash,
@@ -59,39 +40,4 @@ watch(
   { immediate: true, flush: "post" },
 );
 </script>
-<style scoped lang="postcss">
-.events {
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    SF Mono,
-    Consolas,
-    Liberation Mono,
-    monaco,
-    Menlo,
-    monospace;
-
-  > li {
-    @apply flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07];
-    &:last-child {
-      scroll-margin-block-end: 5rem;
-    }
-
-    .jump-context {
-      @apply mr-2 flex items-center font-sans text-secondary hover:text-secondary-focus;
-    }
-  }
-
-  &.small {
-    @apply text-[0.7em];
-  }
-
-  &.medium {
-    @apply text-[0.8em];
-  }
-
-  &.large {
-    @apply text-lg;
-  }
-}
-</style>
+<style scoped lang="postcss"></style>

assets/components/LogViewer/LogViewerWithSource.vue

@@ -1,18 +0,0 @@
-<template>
-  <log-event-source ref="source" #default="{ messages }" @loading-more="loadingMore($event)">
-    <log-viewer :messages="messages"></log-viewer>
-  </log-event-source>
-</template>
-
-<script lang="ts" setup>
-import LogEventSource from "./LogEventSource.vue";
-
-const loadingMore = defineEmit<[value: boolean]>();
-const source = $ref<InstanceType<typeof LogEventSource>>();
-function clear() {
-  source?.clear();
-}
-defineExpose({
-  clear,
-});
-</script>

assets/components/LogViewer/MultiContainerStat.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="flex gap-4">
+    <StatMonitor :data="memoryData" label="mem" :stat-value="formatBytes(totalStat.memoryUsage)" />
+    <StatMonitor :data="cpuData" label="load" :stat-value="Math.max(0, totalStat.cpu).toFixed(2) + '%'" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Stat } from "@/models/Container";
+import { Container } from "@/models/Container";
+
+const { containers } = defineProps<{
+  containers: Container[];
+}>();
+
+const totalStat = ref<Stat>({ cpu: 0, memory: 0, memoryUsage: 0 });
+const { history, reset } = useSimpleRefHistory(totalStat, { capacity: 300 });
+
+watch(
+  () => containers,
+  () => {
+    const initial: Stat[] = [];
+    for (let i = 1; i <= 300; i++) {
+      const stat = containers.reduce(
+        (acc, { statsHistory }) => {
+          const item = statsHistory.at(-i);
+          if (!item) {
+            return acc;
+          }
+          return {
+            cpu: acc.cpu + item.cpu,
+            memory: acc.memory + item.memory,
+            memoryUsage: acc.memoryUsage + item.memoryUsage,
+          };
+        },
+        { cpu: 0, memory: 0, memoryUsage: 0 },
+      );
+      initial.push(stat);
+    }
+    reset({ initial: initial.reverse() });
+  },
+  { immediate: true },
+);
+
+useIntervalFn(() => {
+  totalStat.value = containers.reduce(
+    (acc, { stat }) => {
+      return {
+        cpu: acc.cpu + stat.cpu,
+        memory: acc.memory + stat.memory,
+        memoryUsage: acc.memoryUsage + stat.memoryUsage,
+      };
+    },
+    { cpu: 0, memory: 0, memoryUsage: 0 },
+  );
+}, 1000);
+
+const cpuData = computed(() =>
+  history.value.map((stat, i) => ({
+    x: i,
+    y: Math.max(0, stat.cpu),
+    value: Math.max(0, stat.cpu).toFixed(2) + "%",
+  })),
+);
+
+const memoryData = computed(() =>
+  history.value.map((stat, i) => ({
+    x: i,
+    y: stat.memoryUsage,
+    value: formatBytes(stat.memoryUsage),
+  })),
+);
+</script>

assets/components/LogViewer/SimpleLogItem.vue

@@ -1,18 +1,35 @@
 <template>
-  <div class="flex 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="relative flex w-full items-start gap-x-2">
+    <LogStd :std="logEntry.std" v-if="showStd" />
+    <ContainerName class="flex-none" :id="logEntry.containerID" v-if="showContainerName" />
+    <LogDate :date="logEntry.date" v-if="showTimestamp" />
+    <LogLevel class="flex" :level="logEntry.level" :position="logEntry.position" />
+    <div
+      class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"
+      v-html="colorize(logEntry.message)"
+    ></div>
+    <LogMessageActions
+      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(--text-color)" });
-defineProps<{
+const ansiConvertor = new AnsiConvertor({
+  escapeXML: false,
+  fg: "var(--base-content-color)",
+  bg: "var(--base-color)",
+});
+
+const { showContainerName = false } = defineProps<{
   logEntry: SimpleLogEntry;
+  showContainerName?: boolean;
 }>();
 
 const { markSearch } = useSearchFilter();

assets/components/LogViewer/SkippedEntriesLogItem.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="my-4 flex-1 text-center">
     <div class="relative">
-      <zig-zag class="absolute inset-0 mt-2"></zig-zag>
-      <span class="relative whitespace-pre-wrap bg-base px-4 py-2 font-bold">{{
-        $t("error.logs-skipped", { total: logEntry.totalSkipped })
-      }}</span>
+      <ZigZag class="absolute inset-0 mt-2" />
+      <span class="relative whitespace-pre-wrap bg-base px-4 py-2 font-bold">
+        {{ $t("error.logs-skipped", { total: logEntry.totalSkipped }) }}
+      </span>
     </div>
   </div>
 </template>

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">
-      <stat-sparkline :data="data" @selected-point="onSelectedPoint"></stat-sparkline>
+    <div class="hidden overflow-hidden rounded-sm border border-primary px-px pb-px pt-1 md:flex">
+      <StatSparkline :data="data" @selected-point="onSelectedPoint" />
     </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/ViewerWithSource.vue

@@ -0,0 +1,38 @@
+<template>
+  <EventSource
+    ref="source"
+    #default="{ messages }"
+    @loading-more="loadingMore($event)"
+    :stream-source="streamSource"
+    :entity="props.entity"
+  >
+    <LogViewer :messages="messages" :visible-keys="visibleKeys" :show-container-name="showContainerName" />
+  </EventSource>
+</template>
+
+<script lang="ts" setup generic="T">
+import LogEventSource from "@/components/ContainerViewer/LogEventSource.vue";
+import { LogStreamSource } from "@/composable/eventStreams";
+
+const props = defineProps<{
+  streamSource: (t: Ref<T>) => LogStreamSource;
+  visibleKeys: string[][];
+  showContainerName: boolean;
+  entity: T;
+}>();
+
+const loadingMore = defineEmit<[value: boolean]>();
+
+const source = $ref<InstanceType<typeof LogEventSource>>();
+
+defineExpose({
+  clear: () => source?.clear(),
+});
+
+onKeyStroke("k", (e) => {
+  if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+    source?.clear();
+    e.preventDefault();
+  }
+});
+</script>

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

@@ -0,0 +1,120 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<ContainerEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
+"<ul data-v-cf9ff940="" class="events group py-4 medium">
+  <li data-v-cf9ff940="" data-key="1" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+      <!--v-if-->
+      <!--v-if-->
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em]" 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>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
+"<ul data-v-cf9ff940="" class="events group py-4 medium">
+  <li data-v-cf9ff940="" data-key="1" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+      <!--v-if-->
+      <!--v-if-->
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em]" 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>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > render html correctly > should render messages 1`] = `
+"<ul data-v-cf9ff940="" class="events group py-4 medium">
+  <li data-v-cf9ff940="" data-key="1" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+      <!--v-if-->
+      <!--v-if-->
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em]" 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">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>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > render html correctly > should render messages with filter 1`] = `
+"<ul data-v-cf9ff940="" class="events group py-4 medium">
+  <li data-v-cf9ff940="" data-key="2" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+      <!--v-if-->
+      <!--v-if-->
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em]" 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>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > render html correctly > should render messages with html entities 1`] = `
+"<ul data-v-cf9ff940="" class="events group py-4 medium">
+  <li data-v-cf9ff940="" data-key="1" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+      <!--v-if-->
+      <!--v-if-->
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em]" 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>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > renders loading 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>
+<div data-v-cf9ff940="" class="m-4 text-center"><span data-v-cf9ff940="" class="loading loading-ring loading-md text-primary"></span></div>"
+`;
+
+exports[`<ContainerEventSource /> > should parse messages 1`] = `
+SimpleLogEntry {
+  "_message": "This is a message.",
+  "containerID": undefined,
+  "date": 2019-06-12T10:55:42.459Z,
+  "id": 1,
+  "level": undefined,
+  "position": undefined,
+  "std": "stderr",
+}
+`;

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

@@ -1,114 +0,0 @@
-// 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=\\"\\">
-      <!--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>
-      <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=\\"\\">
-      <!--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>
-      <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=\\"\\">
-      <!--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>
-      <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>
-      <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=\\"\\">
-      <!--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>
-      <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=\\"\\">
-      <!--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>
-      <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>"
-`;
-
-exports[`<LogEventSource /> > should parse messages 1`] = `
-SimpleLogEntry {
-  "_message": "This is a message.",
-  "date": 2019-06-12T10:55:42.459Z,
-  "id": 1,
-  "level": undefined,
-  "position": undefined,
-  "std": "stderr",
-}
-`;

assets/components/MultiContainerViewer/MultiContainerLog.vue

@@ -0,0 +1,43 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="containers.length && ready">
+    <template #header>
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <div class="flex flex-1 gap-1.5 truncate @container md:gap-2">
+          <div class="inline-flex font-mono text-sm">
+            <div class="font-semibold">{{ containers.length }} containers</div>
+          </div>
+        </div>
+        <MultiContainerStat class="ml-auto" :containers="containers" />
+      </div>
+    </template>
+    <template #default="{ setLoading }">
+      <ViewerWithSource
+        ref="viewer"
+        @loading-more="setLoading($event)"
+        :stream-source="useMergedStream"
+        :entity="containers"
+        :visible-keys="visibleKeys"
+        :show-container-name="true"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+
+const { ids = [], scrollable = false } = defineProps<{
+  ids?: string[];
+  scrollable?: boolean;
+}>();
+
+const containerStore = useContainerStore();
+
+const { allContainersById, ready } = storeToRefs(containerStore);
+
+const containers = computed(() => ids.map((id) => allContainersById.value[id]));
+
+const visibleKeys = ref<string[][]>([]);
+
+provideLoggingContext(containers);
+</script>

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,24 @@
 </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);
+const glopbalShow = globalShowPopup();
+const show = ref(glopbalShow.value);
+const delayedShow = refDebounced(show, 1000);
+const 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 +40,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/ScrollProgress.vue

@@ -27,15 +27,17 @@ const { indeterminate = false, autoHide = false } = defineProps<{
 
 const scrollProgress = ref(0);
 const root = ref<HTMLElement>();
-const store = useContainerStore();
-const { activeContainers } = storeToRefs(store);
+
+const pinnedLogsStore = usePinnedLogsStore();
+const { pinnedLogs } = storeToRefs(pinnedLogsStore);
+
 const scrollElement = ref<HTMLElement | Document>((root.value?.closest("[data-scrolling]") as HTMLElement) ?? document);
 const { y: scrollY } = useScroll(scrollElement as Ref<HTMLElement | Document>, { throttle: 100 });
 const show = autoResetRef(false, 2000);
 
 onMounted(() => {
   watch(
-    activeContainers,
+    pinnedLogs,
     () => {
       scrollElement.value = (root.value?.closest("[data-scrolling]") as HTMLElement) ?? document;
     },

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" />
+        <ScrollProgress :indeterminate="loading" :auto-hide="!loading" class="!fixed top-16 z-10" />
       </div>
       <div ref="scrollableContent">
         <slot :setLoading="setLoading"></slot>
@@ -20,12 +20,12 @@
     <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"
         >
-          <mdi:light-chevron-double-down />
+          <mdi:chevron-double-down />
         </button>
       </transition>
     </div>

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:light-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/ServiceViewer/ServiceLog.vue

@@ -0,0 +1,45 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="service.name">
+    <template #header>
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <div class="flex flex-1 gap-1.5 truncate @container md:gap-2">
+          <div class="inline-flex font-mono text-sm">
+            <div class="font-semibold">{{ service.name }}</div>
+          </div>
+          <Tag class="mobile-hidden hidden font-mono @3xl:block" size="small">
+            {{ $t("label.container", service.containers.length) }}
+          </Tag>
+        </div>
+        <MultiContainerStat class="ml-auto" :containers="service.containers" />
+      </div>
+    </template>
+    <template #default="{ setLoading }">
+      <ViewerWithSource
+        ref="viewer"
+        @loading-more="setLoading($event)"
+        :stream-source="useServiceStream"
+        :entity="service"
+        :visible-keys="visibleKeys"
+        :show-container-name="true"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import { Service } from "@/models/Stack";
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+
+const { name, scrollable = false } = defineProps<{
+  scrollable?: boolean;
+  name: string;
+}>();
+
+const visibleKeys = ref<string[][]>([]);
+
+const store = useSwarmStore();
+const { services } = storeToRefs(store) as unknown as { services: Ref<Service[]> };
+const service = computed(() => services.value.find((s) => s.name === name) ?? new Service("", []));
+
+provideLoggingContext(toRef(() => service.value.containers));
+</script>

assets/components/SideMenu.vue

@@ -1,59 +1,17 @@
 <template>
   <div v-if="ready" data-testid="side-menu">
-    <div class="breadcrumbs">
-      <ul>
-        <li><a @click.prevent="setHost(null)" class="link-primary">Hosts</a></li>
-        <li v-if="sessionHost && hosts[sessionHost]" class="cursor-default">
-          {{ hosts[sessionHost].name }}
-        </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)">
-            <ph:computer-tower />
-            {{ host.name }}
-          </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>
+    <Toggle v-model="showSwarm" v-if="services.length > 0 || customGroups.length > 0">
+      <div class="text-lg font-light">{{ $t("label.swarm-mode") }}</div>
+    </Toggle>
 
-              <container-health :health="item.health"></container-health>
-            </router-link>
-            <template #content>
-              <container-popup :container="item"></container-popup>
-            </template>
-          </popup>
-        </li>
-      </transition-group>
-    </transition>
+    <SlideTransition :slide-right="showSwarm">
+      <template #left>
+        <HostMenu />
+      </template>
+      <template #right>
+        <SwarmMenu />
+      </template>
+    </SlideTransition>
   </div>
   <div role="status" class="flex animate-pulse flex-col gap-4" v-else>
     <div class="h-3 w-full rounded-full bg-base-content/50 opacity-50" v-for="_ in 9"></div>
@@ -62,148 +20,12 @@
 </template>
 
 <script lang="ts" setup>
-import { Container } from "@/models/Container";
-import { sessionHost } from "@/composables/storage";
+const containerStore = useContainerStore();
+const { ready } = storeToRefs(containerStore);
 
-const { t } = useI18n();
+const swarmStore = useSwarmStore();
+const { services, customGroups } = storeToRefs(swarmStore);
 
-const store = useContainerStore();
-
-const { activeContainers, visibleContainers, ready } = storeToRefs(store);
-
-function setHost(host: string | null) {
-  sessionHost.value = host;
-}
-
-const debouncedIds = 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);
-      }
-    }),
-);
-
-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 menuItems = computed(() => {
-  if (groupedContainers.value.pinned.length > 0) {
-    return [pinnedLabel, ...groupedContainers.value.pinned, allLabel, ...groupedContainers.value.unpinned];
-  } else {
-    return [allLabel, ...groupedContainers.value.unpinned];
-  }
-});
-
-const hosts = computed(() =>
-  config.hosts.reduce(
-    (acc, item) => {
-      acc[item.id] = item;
-      return acc;
-    },
-    {} as Record<string, { name: string; id: string }>,
-  ),
-);
-
-const activeContainersById = computed(() =>
-  activeContainers.value.reduce(
-    (acc, item) => {
-      acc[item.id] = item;
-      return acc;
-    },
-    {} as Record<string, Container>,
-  ),
-);
+const showSwarm = useSessionStorage<boolean>("DOZZLE_SWARM_MODE", false);
 </script>
-<style scoped lang="postcss">
-.menu {
-  @apply text-[0.95rem];
-}
-.containers a {
-  @apply auto-cols-[auto_max-content];
-  .pin {
-    display: none;
-
-    &:hover {
-      @apply text-secondary;
-    }
-  }
-
-  &:hover {
-    .pin {
-      display: inline-block;
-    }
-  }
-}
-li.exited {
-  @apply opacity-50;
-}
-
-.slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: all 0.1s ease-out;
-}
-
-.slide-left-enter-from {
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-.slide-right-enter-from {
-  opacity: 0;
-  transform: translateX(-20px);
-}
-
-.slide-left-leave-to {
-  opacity: 0;
-  transform: translateX(-20px);
-}
-
-.slide-right-leave-to {
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-.list-move,
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.19s ease;
-}
-
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-.list-leave-active {
-  position: absolute;
-}
-</style>
+<style scoped lang="postcss"></style>

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:light-cog />
-      </router-link>
-      <a :href="`${base}/logout`" :title="$t('button.logout')" v-if="secured" class="btn btn-circle btn-sm">
-        <mdi:light-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:light-magnify />
-      Search
-      <key-shortcut char="k"></key-shortcut>
-    </a>
+      <mdi:magnify />
+      {{ $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/StackViewer/StackLog.vue

@@ -0,0 +1,47 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="stack.name">
+    <template #header>
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <div class="flex flex-1 gap-1.5 truncate @container md:gap-2">
+          <div class="inline-flex font-mono text-sm">
+            <div class="font-semibold">{{ stack.name }}</div>
+          </div>
+          <Tag class="mobile-hidden hidden font-mono @3xl:block" size="small">
+            {{ $t("label.container", stack.containers.length) }}
+          </Tag>
+          <Tag class="mobile-hidden hidden font-mono @3xl:block" size="small">
+            {{ $t("label.serivce", stack.services.length) }}
+          </Tag>
+        </div>
+        <MultiContainerStat class="ml-auto" :containers="stack.containers" />
+      </div>
+    </template>
+    <template #default="{ setLoading }">
+      <ViewerWithSource
+        ref="viewer"
+        @loading-more="setLoading($event)"
+        :stream-source="useStackStream"
+        :entity="stack"
+        :visible-keys="visibleKeys"
+        :show-container-name="true"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import { Stack } from "@/models/Stack";
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+
+const { name, scrollable = false } = defineProps<{
+  scrollable?: boolean;
+  name: string;
+}>();
+
+const visibleKeys = ref<string[][]>([]);
+
+const store = useSwarmStore();
+const { stacks } = storeToRefs(store) as unknown as { stacks: Ref<Stack[]> };
+const stack = computed(() => stacks.value.find((s) => s.name === name) ?? new Stack("", [], []));
+provideLoggingContext(toRef(() => stack.value.containers));
+</script>

assets/components/SwarmMenu.vue

@@ -0,0 +1,82 @@
+<template>
+  <ul class="menu p-0 text-[0.95rem]">
+    <li v-for="{ name, services } in stacks" :key="name">
+      <details open>
+        <summary class="font-light text-base-content/80">
+          <ph:stack />
+          {{ name }}
+
+          <router-link
+            :to="{ name: 'stack-name', params: { name } }"
+            class="btn btn-square btn-outline btn-primary btn-xs"
+            active-class="btn-active"
+            title="Merge all services into one view"
+          >
+            <ph:arrows-merge />
+          </router-link>
+        </summary>
+        <ul>
+          <li v-for="service in services" :key="service.name">
+            <router-link :to="{ name: 'service-name', params: { name: service.name } }" active-class="active-primary">
+              <ph:stack-simple />
+              <div class="truncate">
+                {{ service.name }}
+              </div>
+            </router-link>
+          </li>
+        </ul>
+      </details>
+    </li>
+
+    <li v-if="serivcesWithoutStacks.length > 0">
+      <details open>
+        <summary class="font-light text-base-content/80">
+          <ph:circles-four />
+          {{ $t("label.services") }}
+        </summary>
+        <ul>
+          <li v-for="service in serivcesWithoutStacks" :key="service.name">
+            <router-link :to="{ name: 'service-name', params: { name: service.name } }" active-class="active-primary">
+              <ph:stack-simple />
+              <div class="truncate">
+                {{ service.name }}
+              </div>
+            </router-link>
+          </li>
+        </ul>
+      </details>
+    </li>
+
+    <li v-if="customGroups.length > 0">
+      <details open>
+        <summary class="font-light text-base-content/80">
+          <ph:bounding-box-fill />
+          {{ $t("label.custom-groups") }}
+        </summary>
+        <ul>
+          <li v-for="group in customGroups" :key="group.name">
+            <router-link :to="{ name: 'group-name', params: { name: group.name } }" active-class="active-primary">
+              <ph:stack-simple />
+              <div class="truncate">
+                {{ group.name }}
+              </div>
+            </router-link>
+          </li>
+        </ul>
+      </details>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+const store = useSwarmStore();
+
+const { stacks, services, customGroups } = storeToRefs(store);
+
+const serivcesWithoutStacks = computed(() => services.value.filter((service) => !service.stack));
+</script>
+<style scoped lang="postcss">
+.menu {
+  @apply text-[0.95rem];
+}
+</style>

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: "numeric", 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:light-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:light-cog /> {{ $t("button.settings") }}
-          </router-link>
-          <a class="btn btn-outline btn-sm" :href="`${base}/logout`" :title="$t('button.logout')" v-if="secured">
-            <mdi:light-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/SlideTransition.vue

@@ -0,0 +1,42 @@
+<template>
+  <transition :name="!slideRight ? 'slide-left' : 'slide-right'" mode="out-in">
+    <div v-if="!slideRight">
+      <slot name="left" />
+    </div>
+    <div v-else>
+      <slot name="right" />
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+const { slideRight } = defineProps<{ slideRight: boolean }>();
+</script>
+<style scoped lang="postcss">
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+</style>

assets/components/common/Tag.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" :size="size">
+  <div class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em]" :size="size">
     <slot></slot>
   </div>
 </template>

assets/components/common/TimedButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button class="btn relative overflow-hidden" @click="cancel()">
     <div class="absolute inset-0 origin-left bg-white/30" ref="progress"></div>
-    <div class="z-10">
+    <div>
       <slot></slot>
     </div>
   </button>
@@ -13,9 +13,13 @@ const finished = defineEmit();
 const cancelled = defineEmit();
 let animation: Animation | undefined;
 
+const { duration = 4000 } = defineProps<{
+  duration?: number;
+}>();
+
 onMounted(async () => {
   animation = progress.value?.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], {
-    duration: 4000,
+    duration: duration,
     easing: "linear",
     fill: "forwards",
   });

assets/components/common/Toggle.vue

@@ -1,19 +1,16 @@
 <template>
-  <label class="label inline-flex cursor-pointer gap-4 font-normal">
-    <input
-      type="checkbox"
-      class="toggle toggle-primary hover:bg-primary-focus"
-      :checked="modelValue"
-      @click="toggle()"
-    />
-    <slot />
-  </label>
+  <LabeledInput>
+    <template #label>
+      <slot />
+    </template>
+    <template #input>
+      <input type="checkbox" class="toggle toggle-primary" v-model="modelValue" />
+    </template>
+  </LabeledInput>
 </template>
 
 <script lang="ts" setup>
 const { modelValue } = defineModels<{
   modelValue: boolean;
 }>();
-
-const toggle = useToggle(modelValue);
 </script>

assets/composable/containerActions.ts

@@ -0,0 +1,46 @@
+import { Container } from "@/models/Container";
+
+type ContainerActions = "start" | "stop" | "restart";
+export const useContainerActions = (container: Ref<Container>) => {
+  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/eventStreams.ts

@@ -0,0 +1,222 @@
+import { type Ref } from "vue";
+import { encodeXML } from "entities";
+import debounce from "lodash.debounce";
+import {
+  type LogEvent,
+  type JSONObject,
+  LogEntry,
+  asLogEntry,
+  DockerEventLogEntry,
+  SkippedLogsEntry,
+} from "@/models/LogEntry";
+import { Service, Stack } from "@/models/Stack";
+import { Container, GroupedContainers } from "@/models/Container";
+
+function parseMessage(data: string): LogEntry<string | JSONObject> {
+  const e = JSON.parse(data, (key, value) => {
+    if (typeof value === "string") {
+      return encodeXML(value);
+    }
+    return value;
+  }) as LogEvent;
+  return asLogEntry(e);
+}
+
+export function useContainerStream(container: Ref<Container>): LogStreamSource {
+  const { streamConfig } = useLoggingContext();
+
+  const url = computed(() => {
+    const params = Object.entries(streamConfig)
+      .filter(([, value]) => value)
+      .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
+    return withBase(
+      `/api/hosts/${container.value.host}/containers/${container.value.id}/logs/stream?${new URLSearchParams(params).toString()}`,
+    );
+  });
+
+  const loadMoreUrl = computed(() => {
+    const params = Object.entries(streamConfig)
+      .filter(([, value]) => value)
+      .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
+    return withBase(
+      `/api/hosts/${container.value.host}/containers/${container.value.id}/logs?${new URLSearchParams(params).toString()}`,
+    );
+  });
+
+  return useLogStream(url, loadMoreUrl);
+}
+
+export function useStackStream(stack: Ref<Stack>): LogStreamSource {
+  const { streamConfig } = useLoggingContext();
+
+  const url = computed(() => {
+    const params = Object.entries(streamConfig)
+      .filter(([, value]) => value)
+      .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
+    return withBase(`/api/stacks/${stack.value.name}/logs/stream?${new URLSearchParams(params).toString()}`);
+  });
+
+  return useLogStream(url);
+}
+
+export function useGroupedStream(group: Ref<GroupedContainers>): LogStreamSource {
+  const { streamConfig } = useLoggingContext();
+
+  const url = computed(() => {
+    const params = Object.entries(streamConfig)
+      .filter(([, value]) => value)
+      .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
+    return withBase(`/api/groups/${group.value.name}/logs/stream?${new URLSearchParams(params).toString()}`);
+  });
+
+  return useLogStream(url);
+}
+
+export function useMergedStream(containers: Ref<Container[]>): LogStreamSource {
+  const { streamConfig } = useLoggingContext();
+
+  const url = computed(() => {
+    const params = [
+      ...Object.entries(streamConfig).map(([key, value]) => [key, value ? "1" : "0"]),
+      ...containers.value.map((c) => ["id", c.id]),
+    ];
+
+    return withBase(
+      `/api/hosts/${containers.value[0].host}/logs/mergedStream?${new URLSearchParams(params).toString()}`,
+    );
+  });
+
+  return useLogStream(url);
+}
+
+export function useServiceStream(service: Ref<Service>): LogStreamSource {
+  const { streamConfig } = useLoggingContext();
+
+  const url = computed(() => {
+    const params = Object.entries(streamConfig)
+      .filter(([, value]) => value)
+      .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
+    return withBase(`/api/services/${service.value.name}/logs/stream?${new URLSearchParams(params).toString()}`);
+  });
+
+  return useLogStream(url);
+}
+
+export type LogStreamSource = ReturnType<typeof useLogStream>;
+
+function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
+  let messages: LogEntry<string | JSONObject>[] = $ref([]);
+  let buffer: LogEntry<string | JSONObject>[] = $ref([]);
+  const scrollingPaused = $ref(inject("scrollingPaused") as Ref<boolean>);
+
+  function flushNow() {
+    if (messages.length > config.maxLogs) {
+      if (scrollingPaused) {
+        console.log("Skipping ", buffer.length, " log items");
+        if (messages.at(-1) instanceof SkippedLogsEntry) {
+          const lastEvent = messages.at(-1) as SkippedLogsEntry;
+          const lastItem = buffer.at(-1) as LogEntry<string | JSONObject>;
+          lastEvent.addSkippedEntries(buffer.length, lastItem);
+        } else {
+          const firstItem = buffer.at(0) as LogEntry<string | JSONObject>;
+          const lastItem = buffer.at(-1) as LogEntry<string | JSONObject>;
+          messages.push(new SkippedLogsEntry(new Date(), buffer.length, firstItem, lastItem));
+        }
+        buffer = [];
+      } else {
+        messages.push(...buffer);
+        buffer = [];
+        messages = messages.slice(-config.maxLogs);
+      }
+    } else {
+      if (messages.length == 0) {
+        // sort the buffer the very first time because of multiple logs in parallel
+        buffer.sort((a, b) => a.date.getTime() - b.date.getTime());
+      }
+      messages.push(...buffer);
+      buffer = [];
+    }
+  }
+  const flushBuffer = debounce(flushNow, 250, { maxWait: 1000 });
+  let es: EventSource | null = null;
+
+  function close() {
+    if (es) {
+      es.close();
+      es = null;
+    }
+  }
+
+  function clearMessages() {
+    flushBuffer.cancel();
+    messages = [];
+    buffer = [];
+  }
+
+  function connect({ clear } = { clear: true }) {
+    close();
+
+    if (clear) {
+      clearMessages();
+    }
+
+    es = new EventSource(url.value);
+
+    es.addEventListener("container-stopped", (e) => {
+      const event = JSON.parse((e as MessageEvent).data) as { actorId: string };
+      buffer.push(new DockerEventLogEntry("Container stopped", event.actorId, new Date(), "container-stopped"));
+
+      flushBuffer();
+      flushBuffer.flush();
+    });
+    es.onmessage = (e) => {
+      if (e.data) {
+        buffer.push(parseMessage(e.data));
+        flushBuffer();
+      }
+    };
+    es.onerror = () => clearMessages();
+  }
+
+  watch(url, () => connect(), { immediate: true });
+
+  async function loadOlderLogs({ beforeLoading, afterLoading } = { beforeLoading: () => {}, afterLoading: () => {} }) {
+    if (!loadMoreUrl) return;
+    beforeLoading();
+
+    const to = messages[0].date;
+    const last = messages[messages.length - 1].date;
+    const delta = to.getTime() - last.getTime();
+    const from = new Date(to.getTime() + delta);
+
+    const logs = await (
+      await fetch(
+        `${loadMoreUrl.value}&${new URLSearchParams({ from: from.toISOString(), to: to.toISOString() }).toString()}`,
+      )
+    ).text();
+    if (logs) {
+      const newMessages = logs
+        .trim()
+        .split("\n")
+        .map((line) => parseMessage(line));
+      messages.unshift(...newMessages);
+    }
+    afterLoading();
+  }
+
+  // TODO this is a hack to connect the event source when the container is started
+  // watch(
+  //   () => container.value.state,
+  //   (newValue, oldValue) => {
+  //     console.log("LogEventSource: container changed", newValue, oldValue);
+  //     if (newValue == "running" && newValue != oldValue) {
+  //       buffer.push(new DockerEventLogEntry("Container started", new Date(), "container-started"));
+  //       connect({ clear: false });
+  //     }
+  //   },
+  // );
+
+  onScopeDispose(() => close());
+
+  return { ...$$({ messages }), loadOlderLogs };
+}

assets/composable/logContext.ts

@@ -0,0 +1,23 @@
+import { Container } from "@/models/Container";
+
+type LogContext = {
+  streamConfig: { stdout: boolean; stderr: boolean };
+  containers: Ref<Container[]>;
+};
+
+export const loggingContextKey = Symbol("loggingContext") as InjectionKey<LogContext>;
+
+export const provideLoggingContext = (containers: Ref<Container[]>) => {
+  provide(loggingContextKey, {
+    streamConfig: reactive({ stdout: true, stderr: true }),
+    containers,
+  });
+};
+
+export const useLoggingContext = () => {
+  const context = inject(loggingContextKey);
+  if (!context) {
+    throw new Error("No logging context provided");
+  }
+  return context;
+};

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 persistentVisibleKeysForContainer(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/containerContext.ts

@@ -1,23 +0,0 @@
-import { Container } from "@/models/Container";
-
-type ContainerContext = {
-  container: Ref<Container>;
-  streamConfig: { stdout: boolean; stderr: boolean };
-};
-
-export const containerContext = Symbol("containerContext") as InjectionKey<ContainerContext>;
-
-export const provideContainerContext = (container: Ref<Container>) => {
-  provide(containerContext, {
-    container,
-    streamConfig: reactive({ stdout: true, stderr: true }),
-  });
-};
-
-export const useContainerContext = () => {
-  const context = inject(containerContext);
-  if (!context) {
-    throw new Error("No container context provided");
-  }
-  return context;
-};

assets/composables/eventsource.ts

@@ -1,170 +0,0 @@
-import { type Ref } from "vue";
-import { encodeXML } from "entities";
-import debounce from "lodash.debounce";
-import {
-  type LogEvent,
-  type JSONObject,
-  LogEntry,
-  asLogEntry,
-  DockerEventLogEntry,
-  SkippedLogsEntry,
-} from "@/models/LogEntry";
-import { Container } from "@/models/Container";
-
-function parseMessage(data: string): LogEntry<string | JSONObject> {
-  const e = JSON.parse(data, (key, value) => {
-    if (typeof value === "string") {
-      return encodeXML(value);
-    }
-    return value;
-  }) as LogEvent;
-  return asLogEntry(e);
-}
-
-type LogStreamConfig = {
-  stdout: boolean;
-  stderr: boolean;
-};
-
-export function useLogStream(container: Ref<Container>, streamConfig: LogStreamConfig) {
-  let messages: LogEntry<string | JSONObject>[] = $ref([]);
-  let buffer: LogEntry<string | JSONObject>[] = $ref([]);
-  const scrollingPaused = $ref(inject("scrollingPaused") as Ref<boolean>);
-
-  function flushNow() {
-    if (messages.length > config.maxLogs) {
-      if (scrollingPaused) {
-        console.log("Skipping ", buffer.length, " log items");
-        if (messages.at(-1) instanceof SkippedLogsEntry) {
-          const lastEvent = messages.at(-1) as SkippedLogsEntry;
-          const lastItem = buffer.at(-1) as LogEntry<string | JSONObject>;
-          lastEvent.addSkippedEntries(buffer.length, lastItem);
-        } else {
-          const firstItem = buffer.at(0) as LogEntry<string | JSONObject>;
-          const lastItem = buffer.at(-1) as LogEntry<string | JSONObject>;
-          messages.push(new SkippedLogsEntry(new Date(), buffer.length, firstItem, lastItem));
-        }
-        buffer = [];
-      } else {
-        messages.push(...buffer);
-        buffer = [];
-        messages = messages.slice(-config.maxLogs);
-      }
-    } else {
-      messages.push(...buffer);
-      buffer = [];
-    }
-  }
-  const flushBuffer = debounce(flushNow, 250, { maxWait: 1000 });
-  let es: EventSource | null = null;
-  let lastEventId = "";
-
-  function connect({ clear } = { clear: true }) {
-    es?.close();
-
-    if (clear) {
-      flushBuffer.cancel();
-      messages = [];
-      buffer = [];
-      lastEventId = "";
-    }
-
-    const params = {
-      lastEventId,
-    } as { lastEventId: string; stdout?: string; stderr?: string };
-
-    if (streamConfig.stdout) {
-      params.stdout = "1";
-    }
-    if (streamConfig.stderr) {
-      params.stderr = "1";
-    }
-
-    es = new EventSource(
-      `${config.base}/api/logs/stream/${container.value.host}/${container.value.id}?${new URLSearchParams(
-        params,
-      ).toString()}`,
-    );
-    es.addEventListener("container-stopped", () => {
-      es?.close();
-      es = null;
-      buffer.push(new DockerEventLogEntry("Container stopped", new Date(), "container-stopped"));
-
-      flushBuffer();
-      flushBuffer.flush();
-    });
-    es.addEventListener("error", (e) => console.error("EventSource failed: " + JSON.stringify(e)));
-    es.onmessage = (e) => {
-      lastEventId = e.lastEventId;
-      if (e.data) {
-        buffer.push(parseMessage(e.data));
-        flushBuffer();
-      }
-    };
-  }
-
-  async function loadOlderLogs({ beforeLoading, afterLoading } = { beforeLoading: () => {}, afterLoading: () => {} }) {
-    if (messages.length < 300) return;
-
-    beforeLoading();
-    const to = messages[0].date;
-    const last = messages[299].date;
-    const delta = to.getTime() - last.getTime();
-    const from = new Date(to.getTime() + delta);
-
-    const params = {
-      from: from.toISOString(),
-      to: to.toISOString(),
-    } as { from: string; to: string; stdout?: string; stderr?: string };
-
-    if (streamConfig.stdout) {
-      params.stdout = "1";
-    }
-    if (streamConfig.stderr) {
-      params.stderr = "1";
-    }
-
-    const logs = await (
-      await fetch(
-        `${config.base}/api/logs/${container.value.host}/${container.value.id}?${new URLSearchParams(
-          params,
-        ).toString()}`,
-      )
-    ).text();
-    if (logs) {
-      const newMessages = logs
-        .trim()
-        .split("\n")
-        .map((line) => parseMessage(line));
-      messages.unshift(...newMessages);
-    }
-    afterLoading();
-  }
-
-  watch(
-    () => container.value.state,
-    (newValue, oldValue) => {
-      console.log("LogEventSource: container changed", newValue, oldValue);
-      if (newValue == "running" && newValue != oldValue) {
-        buffer.push(new DockerEventLogEntry("Container started", new Date(), "container-started"));
-        connect({ clear: false });
-      }
-    },
-  );
-
-  onUnmounted(() => {
-    if (es) {
-      es.close();
-    }
-  });
-
-  watch(
-    () => container.value.id,
-    () => connect(),
-    { immediate: true },
-  );
-
-  watch(streamConfig, () => connect());
-
-  return { ...$$({ messages }), loadOlderLogs };
-}

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">
@@ -11,27 +11,27 @@
             <router-view></router-view>
           </pane>
           <template v-if="!isMobile">
-            <pane v-for="other in activeContainers" :key="other.id">
-              <log-container
+            <pane v-for="other in pinnedLogs" :key="other.id">
+              <ContainerLog
                 :id="other.id"
                 show-title
                 scrollable
                 closable
-                @close="containerStore.removeActiveContainer(other)"
-              ></log-container>
+                @close="pinnedLogsStore.unPinContainer(other)"
+              />
             </pane>
           </template>
         </splitpanes>
       </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:light-chevron-right class="swap-on text-secondary" />
-      <mdi:light-chevron-left class="swap-off" />
+      <mdi:chevron-right class="swap-on" />
+      <mdi:chevron-left class="swap-off" />
     </label>
   </div>
   <dialog ref="modal" class="modal items-start bg-white/20 backdrop:backdrop-blur-sm" @close="open = false">
@@ -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>
@@ -65,16 +70,17 @@
 <script lang="ts" setup>
 // @ts-ignore - splitpanes types are not available
 import { Splitpanes, Pane } from "splitpanes";
-import { collapseNav } from "@/composables/settings";
-const { authorizationNeeded } = config;
+import { collapseNav } from "@/stores/settings";
 
-const containerStore = useContainerStore();
-const { activeContainers } = storeToRefs(containerStore);
+const pinnedLogsStore = usePinnedLogsStore();
+const { pinnedLogs } = storeToRefs(pinnedLogsStore);
 
 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

@@ -1,25 +0,0 @@
-import { describe, expect, test, vi } from "vitest";
-import { Container } from "./Container";
-
-vi.mock("@/stores/config", () => ({
-  __esModule: true,
-  default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
-}));
-
-describe("Container", () => {
-  const names = [
-    [
-      "foo.gb1cto7gaq68fp4refnsr5hep.byqr1prci82zyfoos6gx1yhz0",
-      "foo",
-      ".gb1cto7gaq68fp4refnsr5hep.byqr1prci82zyfoos6gx1yhz0",
-    ],
-    ["bar.gb1cto7gaq68fp4refnsr5hep", "bar", ".gb1cto7gaq68fp4refnsr5hep"],
-    ["baz", "baz", null],
-  ];
-
-  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");
-    expect(c.name).toBe(expectedName);
-    expect(c.swarmId).toBe(expectedSwarmId);
-  });
-});

assets/models/Container.ts

@@ -1,11 +1,8 @@
 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">;
-
-const SWARM_ID_REGEX = /(\.[a-z0-9]{25})+$/i;
+export type Stat = Omit<ContainerStat, "id">;
 
 const hosts = computed(() =>
   config.hosts.reduce(
@@ -17,38 +14,43 @@ const hosts = computed(() =>
   ),
 );
 
+export class GroupedContainers {
+  constructor(
+    public readonly name: string,
+    public readonly containers: Container[],
+  ) {}
+}
+
 export class Container {
   private _stat: Ref<Stat>;
-  private readonly throttledStatHistory: UseThrottledRefHistoryReturn<Stat, Stat>;
-  public readonly swarmId: string | null = null;
-  public readonly isSwarm: boolean = false;
+  private readonly _statsHistory: Ref<Stat[]>;
   private readonly movingAverageStat: Ref<Stat>;
+  private readonly _name: string;
 
   constructor(
     public readonly id: string,
     public readonly created: Date,
     public readonly image: string,
-    public readonly name: string,
+    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 readonly group?: string,
     public health?: ContainerHealth,
   ) {
-    this._stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
-    this.throttledStatHistory = useThrottledRefHistory(this._stat, { capacity: 300, deep: true, throttle: 1000 });
+    this._stat = ref(stats.at(-1) || ({ cpu: 0, memory: 0, memoryUsage: 0 } as Stat));
+    const { history } = useSimpleRefHistory(this._stat, { capacity: 300, deep: true, initial: stats });
+    this._statsHistory = history;
     this.movingAverageStat = useExponentialMovingAverage(this._stat, 0.2);
 
-    const match = name.match(SWARM_ID_REGEX);
-    if (match) {
-      this.swarmId = match[0];
-      this.name = name.replace(`${this.swarmId}`, "");
-      this.isSwarm = true;
-    }
+    this._name = name;
   }
 
-  get statHistory() {
-    return unref(this.throttledStatHistory.history);
+  get statsHistory() {
+    return unref(this._statsHistory);
   }
 
   get movingAverage() {
@@ -67,6 +69,28 @@ export class Container {
     return `${stripVersion(this.image)}:${this.command}`;
   }
 
+  get namespace() {
+    return this.labels["com.docker.stack.namespace"] || this.labels["com.docker.compose.project"];
+  }
+
+  get customGroup() {
+    return this.group;
+  }
+
+  get name() {
+    return this.isSwarm
+      ? this.labels["com.docker.swarm.task.name"].replace(`.${this.labels["com.docker.swarm.task.id"]}`, "")
+      : this._name;
+  }
+
+  get swarmId() {
+    return this.labels["com.docker.swarm.service.id"];
+  }
+
+  get isSwarm() {
+    return Boolean(this.labels["com.docker.swarm.service.id"]);
+  }
+
   public updateStat(stat: Stat) {
     if (isRef(this._stat)) {
       this._stat.value = stat;