chore: release v8.7.2

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

.dockerignore

@@ -6,3 +6,4 @@ dist
 .git
 e2e
 docs
+internal/agent/pb/

.github/ISSUE_TEMPLATE/0_bug_report.yml

@@ -0,0 +1,63 @@
+name: 🐛 Bug Report
+labels: ["bug"]
+description: |
+  Use this template if something is not working as expected.
+body:
+  - type: markdown
+    attributes:
+      value: |
+        I get an overwhelming of issues which I don't have time to investigate. Most often, they are due to configuration issues. For this reason, I ask you to help me by providing as much information as possible. For issues with `docker-socket-proxy` I may not be able to help as those are not related to Dozzle.
+  - type: checkboxes
+    attributes:
+      label: 🔍 Check for existing issues
+      description: Check the backlog of issues to reduce the chances of creating duplicates; if an issue already exists, place a `+1` (👍) on it.
+      options:
+        - label: Completed
+          required: true
+  - type: dropdown
+    attributes:
+      label: How is Dozzle deployed?
+      description: Select the components that you are using.
+      options:
+        - Standalone Deployment
+        - Agents
+        - Remote Hosts
+        - Swarm Mode
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: 📦 Dozzle version
+      description: Run `docker run amir20/dozzle --version` or `curl http://<host>/api/version`.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: ✅ Command used to run Dozzle
+      description: Please provide the command used to run Dozzle. Provide docker-compose.yml if applicable.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: 🐛 Describe the bug / provide steps to reproduce it
+      description: A clear and concise description of what the bug is.
+    validations:
+      required: true
+  - type: textarea
+    id: environment
+    attributes:
+      label: 💻 Environment
+      description: Run `docker system info` and paste the output in the field below..
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: 📸 If applicable, add screenshots to help explain your bug
+      description: Drag issues into the text input below
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: 📜 If applicable, attach your Dozzle logs. You many need to enable debug mode. See https://dozzle.dev/guide/debugging.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/1_feature_request.yml

@@ -0,0 +1,20 @@
+name: 🚀 Feature Request
+labels: ["enhancement"]
+description: |
+  Use this template if you have a feature request or an idea for a new feature.
+body:
+  - type: textarea
+    attributes:
+      label: Describe the feature you would like to see
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Describe how you would like to see this feature implemented
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Describe any alternatives you've considered
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/2_peformance_report.yml

@@ -0,0 +1,52 @@
+name: 🚤 Performance Issue
+labels: ["performance"]
+description: |
+  Use this template if you are seeing performance issues such as slow loading times or high CPU usage.
+body:
+  - type: checkboxes
+    attributes:
+      label: Check for existing issues
+      description: Check the backlog of issues to reduce the chances of creating duplicates; if an issue already exists, place a `+1` (👍) on it.
+      options:
+        - label: Completed
+          required: true
+  - type: dropdown
+    attributes:
+      label: How is Dozzle deployed?
+      description: Select the components that you are using.
+      options:
+        - Standalone Deployment
+        - Agents
+        - Remote Hosts
+        - Swarm Mode
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Dozzle version
+      description: Can be found in logs or settings page.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: ✅ Command used to run Dozzle
+      description: Please provide the command used to run Dozzle. Provide docker-compose.yml if applicable.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Describe the performance issue you are seeing
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: How many containers, hosts, agents, etc. are you using?
+      description: Any details to reproduce the issue would be helpful. If related to volume of logs, please provide a guesstimate of how many logs are being generated.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Screenshots, videos, or logs
+      description: Drag issues into the text input below
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,33 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ""
-labels: ""
-assignees: amir20
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
-
-- OS: [e.g. iOS, Windows or Mac Os]
-- Docker version [e.g. `docker version`'s output]
-- Browser & version [e.g. chrome, safari]
-- Version [e.g. 1.26.1. Can be found at `<Dozzle-host>/version`]
-
-**If applicable include logs with `--level debug` and browser logs**

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: 💁🏼 Common Issues
+    url: https://dozzle.dev/guide/faq
+    about: Check the FAQ for common issues.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,19 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ""
-labels: enhancement
-assignees: amir20
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/renovate.json

@@ -1,5 +1,5 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:base", "schedule:weekly", "group:allNonMajor", ":automergeMinor"],
+  "extends": ["config:recommended", "schedule:weekly", "group:allNonMajor", ":automergeMinor"],
   "rangeStrategy": "bump"
 }

.github/workflows/deploy.yml

@@ -35,8 +35,14 @@ jobs:
           check-latest: true
       - name: Checkout code
         uses: actions/checkout@v4
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
+      - name: Install gRPC and Go
+        run: |
+          go install google.golang.org/grpc/cmd/protoc-gen-go-grpc@latest
+          go install google.golang.org/protobuf/cmd/protoc-gen-go@latest
       - name: Run Go Tests with Coverage
-        run: make test SKIP_ASSET=1
+        run: make test
   int-test:
     name: Integration Tests
     timeout-minutes: 60
@@ -58,8 +64,12 @@ jobs:
         run: pnpm install
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
+      - name: Writing certs to file
+        run: |
+          echo "${{ secrets.TTL_KEY }}" > shared_key.pem
+          echo "${{ secrets.TTL_CERT }}" > shared_cert.pem
       - name: Build
-        uses: docker/bake-action@v4
+        uses: docker/bake-action@v5
         with:
           load: true
           set: |
@@ -78,22 +88,29 @@ jobs:
     name: Release
     runs-on: ubuntu-latest
     steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@c47758b77c9736f4b2ef4073d4d51994fabfe349 # v3.7.1
+      - name: Login to DockerHub
+        uses: docker/login-action@v3.3.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Checkout
+        uses: actions/checkout@v4
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v5
         with:
           images: amir20/dozzle
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@d70bba72b1f3fd22344832f00baa16ece964efeb # v3.3.0
-      - name: Login to DockerHub
-        uses: docker/login-action@v3.1.0
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Writing certs to file
+        run: |
+          echo "${{ secrets.TTL_KEY }}" > shared_key.pem
+          echo "${{ secrets.TTL_CERT }}" > shared_cert.pem
       - name: Build and push
-        uses: docker/build-push-action@v5.3.0
+        uses: docker/build-push-action@v6.9.0
         with:
           push: true
+          context: .
           platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8
           tags: ${{ steps.meta.outputs.tags }}
           build-args: TAG=${{ steps.meta.outputs.version }}

.github/workflows/dev.yml

@@ -12,21 +12,28 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ !github.event.repository.fork && !github.event.pull_request.head.repo.fork && (github.event_name == 'push' || github.event.pull_request.head.repo.full_name == 'amir20/dozzle') }}
     steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@c47758b77c9736f4b2ef4073d4d51994fabfe349 # v3.7.1
+      - name: Login to DockerHub
+        uses: docker/login-action@v3.3.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Checkout
+        uses: actions/checkout@v4
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v5
         with:
           images: amir20/dozzle
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@d70bba72b1f3fd22344832f00baa16ece964efeb # v3.3.0
-      - name: Login to DockerHub
-        uses: docker/login-action@v3.1.0
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Writing certs to file
+        run: |
+          echo "${{ secrets.TTL_KEY }}" > shared_key.pem
+          echo "${{ secrets.TTL_CERT }}" > shared_cert.pem
       - name: Build and push
-        uses: docker/build-push-action@v5.3.0
+        uses: docker/build-push-action@v6.9.0
         with:
+          context: .
           push: true
           platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8
           tags: ${{ steps.meta.outputs.tags }}

.github/workflows/test.yml

@@ -54,16 +54,32 @@ jobs:
       - name: Install Go
         uses: actions/setup-go@v5
         with:
-          go-version: 1.22.x
+          go-version: "1.23"
           check-latest: true
       - name: Checkout code
         uses: actions/checkout@v4
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Install gRPC and Go
+        run: |
+          go install google.golang.org/grpc/cmd/protoc-gen-go-grpc@latest
+          go install google.golang.org/protobuf/cmd/protoc-gen-go@latest
       - name: Run Go Tests with Coverage
-        run: make test SKIP_ASSET=1
+        run: make test
+  staticcheck:
+    runs-on: ubuntu-latest
+    name: Go Staticcheck
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Generate dependencies
+        run: make fake_assets shared_key.pem shared_cert.pem
       - name: Stactic checker
         uses: dominikh/staticcheck-action@v1.3.1
         with:
-          install-go: false
+          version: "latest"
   int-test:
     name: Integration Tests
     timeout-minutes: 60
@@ -85,8 +101,10 @@ jobs:
         run: pnpm install
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
+      - name: Generate certs
+        run: make shared_key.pem shared_cert.pem
       - name: Build
-        uses: docker/bake-action@v4
+        uses: docker/bake-action@v5
         with:
           load: true
           set: |

.gitignore

@@ -12,3 +12,5 @@ coverage.out
 /test-results/
 /playwright-report/
 /playwright/.cache/
+*.pem
+*.csr

.npmrc

@@ -1,3 +1,4 @@
 shared-workspace-lockfile=false
 include-workspace-root=true
 ignore-workspace-root-check=true
+

.reflex.agent

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

.vscode/launch.json

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

.vscode/settings.json

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

Dockerfile

@@ -1,5 +1,5 @@
 # Build assets
-FROM --platform=$BUILDPLATFORM node:21.7.3-alpine as node
+FROM --platform=$BUILDPLATFORM node:23.1.0-alpine AS node
 
 RUN corepack enable
 
@@ -22,9 +22,13 @@ COPY public ./public
 # Build assets
 RUN pnpm build
 
-FROM --platform=$BUILDPLATFORM golang:1.22.3-alpine AS builder
+FROM --platform=$BUILDPLATFORM golang:1.23.2-alpine AS builder
 
-RUN apk add --no-cache ca-certificates && mkdir /dozzle
+# install gRPC dependencies
+RUN apk add --no-cache ca-certificates protoc protobuf-dev\
+    && mkdir /dozzle \
+    && go install google.golang.org/protobuf/cmd/protoc-gen-go@latest \
+    && go install google.golang.org/grpc/cmd/protoc-gen-go-grpc@latest
 
 WORKDIR /dozzle
 
@@ -32,25 +36,29 @@ WORKDIR /dozzle
 COPY go.* ./
 RUN go mod download
 
-# Copy assets built with node
-COPY --from=node /build/dist ./dist
-
 # Copy all other files
 COPY internal ./internal
 COPY main.go ./
+COPY protos ./protos
+COPY shared_key.pem shared_cert.pem ./
+
+# Copy assets built with node
+COPY --from=node /build/dist ./dist
 
 # Args
 ARG TAG=dev
 ARG TARGETOS TARGETARCH
 
+# Generate protos
+RUN go generate
+
 # Build binary
-RUN GOOS=$TARGETOS GOARCH=$TARGETARCH CGO_ENABLED=0 go build -ldflags "-s -w -X main.version=$TAG"  -o dozzle
+RUN GOOS=$TARGETOS GOARCH=$TARGETARCH CGO_ENABLED=0 go build -ldflags "-s -w -X github.com/amir20/dozzle/internal/support/cli.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

@@ -1,7 +1,14 @@
+PROTO_DIR := protos
+GEN_DIR := internal/agent/pb
+PROTO_FILES := $(wildcard $(PROTO_DIR)/*.proto)
+GEN_FILES := $(patsubst $(PROTO_DIR)/%.proto,$(GEN_DIR)/%.pb.go,$(PROTO_FILES))
+
 .PHONY: clean
 clean:
 	@rm -rf dist
 	@go clean -i
+	@rm -f shared_key.pem shared_cert.pem
+	@rm -f $(GEN_DIR)/*.pb.go
 
 .PHONY: dist
 dist:
@@ -14,21 +21,50 @@ fake_assets:
 	@echo "assets build was skipped" > dist/index.html
 
 .PHONY: test
-test: fake_assets
-	go test -cover -race ./...
+test: fake_assets generate
+	go test -cover -race -count 1 -timeout 40s ./...
 
 .PHONY: build
-build: dist
-	CGO_ENABLED=0 go build -ldflags "-s -w"
+build: dist generate
+	CGO_ENABLED=0 go build -ldflags "-s -w -X github.com/amir20/dozzle/internal/support/cli.Version=local"
 
 .PHONY: docker
-docker:
-	@docker build -t amir20/dozzle .
+docker: shared_key.pem shared_cert.pem
+	@docker build  --build-arg TAG=local -t amir20/dozzle .
+
+generate: shared_key.pem shared_cert.pem $(GEN_FILES)
 
 .PHONY: dev
-dev:
+dev: generate fake_assets
 	pnpm dev
 
 .PHONY: int
 int:
 	docker compose up --build --force-recreate --exit-code-from playwright
+
+shared_key.pem:
+	@openssl genpkey -algorithm RSA -out shared_key.pem -pkeyopt rsa_keygen_bits:2048
+
+shared_cert.pem: shared_key.pem
+	@openssl req -new -key shared_key.pem -out shared_request.csr -subj "/C=US/ST=California/L=San Francisco/O=Dozzle"
+	@openssl x509 -req -in shared_request.csr -signkey shared_key.pem -out shared_cert.pem -days 365
+	@rm shared_request.csr
+
+$(GEN_DIR)/%.pb.go: $(PROTO_DIR)/%.proto
+	@go generate
+
+.PHONY: push
+push: docker
+	@docker tag amir20/dozzle:latest amir20/dozzle:local-test
+	@docker push amir20/dozzle:local-test
+
+tools:
+	go install google.golang.org/protobuf/cmd/protoc-gen-go@latest
+	go install google.golang.org/grpc/cmd/protoc-gen-go-grpc@latest
+	go install github.com/cespare/reflex@latest
+
+run: docker
+	docker run -it --rm -p 8080:8080 -v /var/run/docker.sock:/var/run/docker.sock amir20/dozzle:latest
+
+preview: build
+	pnpm preview

README.md

@@ -2,9 +2,9 @@
 
 Dozzle is a small lightweight application with a web based interface to monitor Docker logs. It doesn’t store any log files. It is for live monitoring of your container logs only.
 
-https://user-images.githubusercontent.com/260667/227634771-9ebbe381-16a8-465a-b28a-450c5cd20c94.mp4
+https://github.com/user-attachments/assets/66a7b4b2-d6c9-4fca-ab04-aef6cd7c0c31
 
-[![Go Report Card](https://goreportcard.com/badge/github.com/amir20/dozzle)](https://goreportcard.com/report/github.com/amir20/dozzle)
+[![Docker Image Size (latest by date)](https://img.shields.io/docker/image-size/amir20/dozzle)](https://hub.docker.com/r/amir20/dozzle/)
 [![Docker Pulls](https://img.shields.io/docker/pulls/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
 [![Docker Version](https://img.shields.io/docker/v/amir20/dozzle?sort=semver)](https://hub.docker.com/r/amir20/dozzle/)
 ![Test](https://github.com/amir20/dozzle/workflows/Test/badge.svg)
@@ -13,17 +13,20 @@ https://user-images.githubusercontent.com/260667/227634771-9ebbe381-16a8-465a-b2
 
 - Intelligent fuzzy search for container names 🤖
 - Search logs using regex 🔦
+- Search logs using [SQL queries](https://dozzle.dev/guide/sql-engine) 📊
 - Small memory footprint 🏎
 - Split screen for viewing multiple logs
-- Download logs easily
 - Live stats with memory and CPU usage
-- Multi-user authentication with support for proxy forward authorization 🚨
+- Multi-user [authentication](https://dozzle.dev/guide/authentication) with support for proxy forward authorization 🚨
+- [Swarm](https://dozzle.dev/guide/swarm-mode) mode support 🐳
+- [Agent](https://dozzle.dev/guide/agent) mode for monitoring multiple Docker hosts 🕵️‍♂️
+- Dark mode 🌙
 
 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.
 
 ## Getting Started
 
-Dozzle is a small container (4 MB compressed). Pull the latest release with:
+Dozzle is a small container (7 MB compressed). Pull the latest release with:
 
     $ docker pull amir20/dozzle:latest
 
@@ -31,24 +34,39 @@ Dozzle is a small container (4 MB compressed). Pull the latest release with:
 
 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:ro -p 8888:8080 amir20/dozzle:latest
+    $ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle:latest
 
-Dozzle will be available at [http://localhost:8888/](http://localhost:8888/).
+Dozzle will be available at [http://localhost:8080/](http://localhost:8080/).
 
 Here is the Docker Compose file:
 
-    version: "3"
     services:
       dozzle:
         container_name: dozzle
         image: amir20/dozzle:latest
         volumes:
-          - /var/run/docker.sock:/var/run/docker.sock:ro
+          - /var/run/docker.sock:/var/run/docker.sock
         ports:
-          - 8888:8080
+          - 8080:8080
 
 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).
 
+## Swarm Mode
+
+Dozzle works with Docker Swarm mode. You can run Dozzle as a global service with:
+
+    $ docker service create --name dozzle --env DOZZLE_MODE=swarm --mode global --mount type=bind,source=/var/run/docker.sock,target=/var/run/docker.sock -p 8080:8080 amir20/dozzle:latest
+
+See the [Swarm Mode](https://dozzle.dev/guide/swarm-mode) documentation for more details.
+
+## Agent Mode
+
+Dozzle can be used to monitor multiple Docker hosts. You can run Dozzle in agent mode with:
+
+    $ docker run -v /var/run/docker.sock:/var/run/docker.sock -p 7007:7007 amir20/dozzle:latest agent
+
+See the [Agent Mode](https://dozzle.dev/guide/agent-mode) documentation for more details.
+
 ## Technical Details
 
 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/).
@@ -76,7 +94,7 @@ If it's not enabled please follow [this tutorial](https://github.com/containers/
 Once you have the podman remote socket you can run Dozzle on podman.
 
 ```
-podman run --volume=/run/user/1000/podman/podman.sock:/var/run/docker.sock:ro -d -p 8888:8080 amir20/dozzle:latest
+podman run --volume=/run/user/1000/podman/podman.sock:/var/run/docker.sock -d -p 8080:8080 amir20/dozzle:latest
 ```
 
 ## Security
@@ -93,21 +111,22 @@ If you do not want to be tracked at all, see the `--no-analytics` flag below.
 
 Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or environment variables. The table below outlines all supported options and their respective env vars.
 
-| Flag                        | Env Variable                     | Default        |
-| --------------------------- | -------------------------------- | -------------- |
-| `--addr`                    | `DOZZLE_ADDR`                    | `:8080`        |
-| `--base`                    | `DOZZLE_BASE`                    | `/`            |
-| `--hostname`                | `DOZZLE_HOSTNAME`                | `""`           |
-| `--level`                   | `DOZZLE_LEVEL`                   | `info`         |
-| `--auth-provider`           | `DOZZLE_AUTH_PROVIDER`           | `none`         |
-| `--auth-header-user`        | `DOZZLE_AUTH_HEADER_USER`        | `Remote-User`  |
-| `--auth-header-email`       | `DOZZLE_AUTH_HEADER_EMAIL`       | `Remote-Email` |
-| `--auth-header-name`        | `DOZZLE_AUTH_HEADER_NAME`        | `Remote-Name`  |
-| `--enable-actions`          | `DOZZLE_ENABLE_ACTIONS`          | false          |
-| `--wait-for-docker-seconds` | `DOZZLE_WAIT_FOR_DOCKER_SECONDS` | 0              |
-| `--filter`                  | `DOZZLE_FILTER`                  | `""`           |
-| `--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          |
+| `--filter`            | `DOZZLE_FILTER`            | `""`           |
+| `--no-analytics`      | `DOZZLE_NO_ANALYTICS`      | false          |
+| `--mode`              | `DOZZLE_MODE`              | `server`       |
+| `--remote-host`       | `DOZZLE_REMOTE_HOST`       |                |
+| `--remote-agent`      | `DOZZLE_REMOTE_AGENT`      |                |
 
 ## Support
 
@@ -125,10 +144,10 @@ There are many ways you can support Dozzle:
 
 ## Building
 
-To Build and test locally:
+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 install github.com/cespare/reflex@latest`.
+3. Install tools with `make tools`.
 4. Install node modules `pnpm install`.
-5. Do `pnpm dev`
+5. Run `make dev` to start a development server with hot reload.

assets/auto-imports.d.ts

@@ -3,18 +3,13 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
-  const $: typeof import('vue/macros')['$']
-  const $$: typeof import('vue/macros')['$$']
-  const $computed: typeof import('vue/macros')['$computed']
-  const $customRef: typeof import('vue/macros')['$customRef']
-  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('./stores/settings')['DEFAULT_SETTINGS']
   const EffectScope: typeof import('vue')['EffectScope']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const allLevels: typeof import('./composable/logContext')['allLevels']
   const arrayEquals: typeof import('./utils/index')['arrayEquals']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
@@ -27,10 +22,10 @@ declare global {
   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('./composable/containerContext')['containerContext']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
   const createApp: typeof import('vue')['createApp']
+  const createDrawer: typeof import('./composable/drawer')['createDrawer']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
@@ -47,10 +42,12 @@ declare global {
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
   const defineStore: typeof import('pinia')['defineStore']
+  const drawerContext: typeof import('./composable/drawer')['drawerContext']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const flattenJSON: typeof import('./utils/index')['flattenJSON']
+  const flattenJSONToMap: typeof import('./utils/index')['flattenJSONToMap']
   const formatBytes: typeof import('./utils/index')['formatBytes']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
@@ -101,13 +98,14 @@ declare global {
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const persistentVisibleKeysForContainer: typeof import('./composable/storage')['persistentVisibleKeysForContainer']
   const pinnedContainers: typeof import('./composable/storage')['pinnedContainers']
   const provide: typeof import('vue')['provide']
-  const provideContainerContext: typeof import('./composable/containerContext')['provideContainerContext']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const provideLoggingContext: typeof import('./composable/logContext')['provideLoggingContext']
+  const provideScrollContext: typeof import('./composable/scrollContext')['provideScrollContext']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -124,6 +122,7 @@ declare global {
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const scrollContextKey: typeof import('./composable/scrollContext')['scrollContextKey']
   const search: typeof import('./stores/settings')['search']
   const sessionHost: typeof import('./composable/storage')['sessionHost']
   const setActivePinia: typeof import('pinia')['setActivePinia']
@@ -190,7 +189,6 @@ declare global {
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   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']
@@ -211,7 +209,9 @@ declare global {
   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
   const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDrawer: typeof import('./composable/drawer')['useDrawer']
   const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useDuckDB: typeof import('./composable/duckdb')['useDuckDB']
   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
   const useElementHover: typeof import('@vueuse/core')['useElementHover']
@@ -236,6 +236,7 @@ declare global {
   const useHead: typeof import('@vueuse/head')['useHead']
   const useHosts: typeof import('./stores/hosts')['useHosts']
   const useI18n: typeof import('vue-i18n')['useI18n']
+  const useId: typeof import('vue')['useId']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
@@ -244,9 +245,7 @@ declare global {
   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
-  const useLink: typeof import('vue-router')['useLink']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
-  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']
@@ -255,6 +254,7 @@ declare global {
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
   const useMergedStream: typeof import('./composable/eventStreams')['useMergedStream']
+  const useModel: typeof import('vue')['useModel']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -292,6 +292,7 @@ declare global {
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
   const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollContext: typeof import('./composable/scrollContext')['useScrollContext']
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
   const useSearchFilter: typeof import('./composable/search')['useSearchFilter']
   const useSeoMeta: typeof import('@vueuse/head')['useSeoMeta']
@@ -311,6 +312,7 @@ declare global {
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwarmStore: typeof import('./stores/swarm')['useSwarmStore']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
@@ -373,16 +375,10 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
-    readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
-    readonly $: UnwrapRef<typeof import('vue/macros')['$']>
-    readonly $computed: UnwrapRef<typeof import('vue/macros')['$computed']>
-    readonly $customRef: UnwrapRef<typeof import('vue/macros')['$customRef']>
-    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('./stores/settings')['DEFAULT_SETTINGS']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
+    readonly allLevels: UnwrapRef<typeof import('./composable/logContext')['allLevels']>
     readonly arrayEquals: UnwrapRef<typeof import('./utils/index')['arrayEquals']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
@@ -398,6 +394,7 @@ declare module 'vue' {
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly createDrawer: UnwrapRef<typeof import('./composable/drawer')['createDrawer']>
     readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
@@ -414,10 +411,12 @@ declare module 'vue' {
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
+    readonly drawerContext: UnwrapRef<typeof import('./composable/drawer')['drawerContext']>
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
     readonly flattenJSON: UnwrapRef<typeof import('./utils/index')['flattenJSON']>
+    readonly flattenJSONToMap: UnwrapRef<typeof import('./utils/index')['flattenJSONToMap']>
     readonly formatBytes: UnwrapRef<typeof import('./utils/index')['formatBytes']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
@@ -468,12 +467,14 @@ declare module 'vue' {
     readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly persistentVisibleKeysForContainer: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeysForContainer']>
     readonly pinnedContainers: UnwrapRef<typeof import('./composable/storage')['pinnedContainers']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
     readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly provideLoggingContext: UnwrapRef<typeof import('./composable/logContext')['provideLoggingContext']>
+    readonly provideScrollContext: UnwrapRef<typeof import('./composable/scrollContext')['provideScrollContext']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -490,6 +491,7 @@ 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 scrollContextKey: UnwrapRef<typeof import('./composable/scrollContext')['scrollContextKey']>
     readonly search: UnwrapRef<typeof import('./stores/settings')['search']>
     readonly sessionHost: UnwrapRef<typeof import('./composable/storage')['sessionHost']>
     readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
@@ -576,7 +578,9 @@ declare module 'vue' {
     readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
     readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
     readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
+    readonly useDrawer: UnwrapRef<typeof import('./composable/drawer')['useDrawer']>
     readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
+    readonly useDuckDB: UnwrapRef<typeof import('./composable/duckdb')['useDuckDB']>
     readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
     readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
     readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
@@ -601,6 +605,7 @@ declare module 'vue' {
     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 useId: UnwrapRef<typeof import('vue')['useId']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
     readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
@@ -609,367 +614,7 @@ declare module 'vue' {
     readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
     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 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']>
-    readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
-    readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
-    readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
-    readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
-    readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
-    readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
-    readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
-    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
-    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
-    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
-    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']>
-    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
-    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
-    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
-    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']>
-    readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
-    readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
-    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('./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']>
-    readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
-    readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
-    readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
-    readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
-    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
-    readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
-    readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
-    readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
-    readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
-    readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
-    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('./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']>
-    readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
-    readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
-    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('./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']>
-    readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
-    readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
-    readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
-    readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
-    readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
-    readonly watch: UnwrapRef<typeof import('vue')['watch']>
-    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
-    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
-    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
-    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
-    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
-    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
-    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
-    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
-    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
-    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
-    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
-    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
-    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')['$']>
-    readonly $computed: UnwrapRef<typeof import('vue/macros')['$computed']>
-    readonly $customRef: UnwrapRef<typeof import('vue/macros')['$customRef']>
-    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('./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('./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 controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
-    readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
-    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
-    readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
-    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
-    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
-    readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
-    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
-    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
-    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
-    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']>
-    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
-    readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
-    readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
-    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
-    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
-    readonly flattenJSON: UnwrapRef<typeof import('./utils/index')['flattenJSON']>
-    readonly formatBytes: UnwrapRef<typeof import('./utils/index')['formatBytes']>
-    readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
-    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('./composable/popup')['globalShowPopup']>
-    readonly h: UnwrapRef<typeof import('vue')['h']>
-    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('./composable/media')['isMobile']>
-    readonly isObject: UnwrapRef<typeof import('./utils/index')['isObject']>
-    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
-    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
-    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
-    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
-    readonly lightTheme: UnwrapRef<typeof import('./stores/settings')['lightTheme']>
-    readonly locale: UnwrapRef<typeof import('./stores/settings')['locale']>
-    readonly 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']>
-    readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
-    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('./stores/settings')['menuWidth']>
-    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
-    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
-    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
-    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
-    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
-    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
-    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
-    readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
-    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
-    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
-    readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
-    readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
-    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
-    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
-    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
-    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
-    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
-    readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
-    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
-    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
-    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
-    readonly persistentVisibleKeysForContainer: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeysForContainer']>
-    readonly pinnedContainers: UnwrapRef<typeof import('./composable/storage')['pinnedContainers']>
-    readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    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']>
-    readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
-    readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
-    readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
-    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
-    readonly ref: UnwrapRef<typeof import('vue')['ref']>
-    readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
-    readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
-    readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
-    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
-    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
-    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('./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('./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('./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']>
-    readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
-    readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
-    readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
-    readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
-    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
-    readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
-    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
-    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
-    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
-    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
-    readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
-    readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
-    readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
-    readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
-    readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
-    readonly unref: UnwrapRef<typeof import('vue')['unref']>
-    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
-    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
-    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
-    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
-    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
-    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
-    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
-    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
-    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
-    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
-    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
-    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
-    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
-    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
-    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
-    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
-    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
-    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
-    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
-    readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
-    readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
-    readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
-    readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
-    readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
-    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 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']>
-    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
-    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
-    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
-    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
-    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
-    readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
-    readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
-    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
-    readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
-    readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
-    readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
-    readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
-    readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
-    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
-    readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
-    readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
-    readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
-    readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
-    readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
-    readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
-    readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
-    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
-    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
-    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
-    readonly useExponentialMovingAverage: UnwrapRef<typeof import('./utils/index')['useExponentialMovingAverage']>
-    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
-    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
-    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
-    readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
-    readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
-    readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
-    readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
-    readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
-    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']>
-    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
-    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
-    readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
-    readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
-    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
-    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 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']>
@@ -978,6 +623,7 @@ declare module '@vue/runtime-core' {
     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 useModel: UnwrapRef<typeof import('vue')['useModel']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
     readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
@@ -1015,6 +661,7 @@ declare module '@vue/runtime-core' {
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
     readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
+    readonly useScrollContext: UnwrapRef<typeof import('./composable/scrollContext')['useScrollContext']>
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
     readonly useSearchFilter: UnwrapRef<typeof import('./composable/search')['useSearchFilter']>
     readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
@@ -1034,6 +681,7 @@ declare module '@vue/runtime-core' {
     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 useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
     readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
     readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>

assets/components.d.ts

@@ -14,7 +14,6 @@ declare module 'vue' {
     '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']
@@ -25,6 +24,7 @@ declare module 'vue' {
     'Cil:xCircle': typeof import('~icons/cil/x-circle')['default']
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
     ContainerActionsToolbar: typeof import('./components/ContainerViewer/ContainerActionsToolbar.vue')['default']
+    ContainerEventLogItem: typeof import('./components/LogViewer/ContainerEventLogItem.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']
@@ -33,13 +33,12 @@ declare module 'vue' {
     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']
     GroupedLog: typeof import('./components/GroupedViewer/GroupedLog.vue')['default']
+    HostIcon: typeof import('./components/common/HostIcon.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']
@@ -47,14 +46,15 @@ declare module 'vue' {
     KeyShortcut: typeof import('./components/common/KeyShortcut.vue')['default']
     LabeledInput: typeof import('./components/common/LabeledInput.vue')['default']
     Links: typeof import('./components/Links.vue')['default']
+    LogAnalytics: typeof import('./components/LogViewer/LogAnalytics.vue')['default']
     LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
+    LogDetails: typeof import('./components/LogViewer/LogDetails.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']
-    'MaterialSymbols:collapseAllRounded': typeof import('~icons/material-symbols/collapse-all-rounded')['default']
-    'MaterialSymbols:expandAllRounded': typeof import('~icons/material-symbols/expand-all-rounded')['default']
+    'Mdi:account': typeof import('~icons/mdi/account')['default']
     'Mdi:announcement': typeof import('~icons/mdi/announcement')['default']
     'Mdi:arrowUp': typeof import('~icons/mdi/arrow-up')['default']
     'Mdi:check': typeof import('~icons/mdi/check')['default']
@@ -63,10 +63,17 @@ declare module 'vue' {
     '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:contentCopy': typeof import('~icons/mdi/content-copy')['default']
+    'Mdi:docker': typeof import('~icons/mdi/docker')['default']
+    'Mdi:gauge': typeof import('~icons/mdi/gauge')['default']
     'Mdi:hamburgerMenu': typeof import('~icons/mdi/hamburger-menu')['default']
+    'Mdi:hexagonMultiple': typeof import('~icons/mdi/hexagon-multiple')['default']
+    'Mdi:key': typeof import('~icons/mdi/key')['default']
     'Mdi:keyboardEsc': typeof import('~icons/mdi/keyboard-esc')['default']
     'Mdi:magnify': typeof import('~icons/mdi/magnify')['default']
+    'Mdi:satelliteVariant': typeof import('~icons/mdi/satellite-variant')['default']
     MobileMenu: typeof import('./components/common/MobileMenu.vue')['default']
+    MultiContainerActionToolbar: typeof import('./components/LogViewer/MultiContainerActionToolbar.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']
@@ -80,6 +87,8 @@ declare module 'vue' {
     '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:fileSql': typeof import('~icons/ph/file-sql')['default']
+    'Ph:globeSimple': typeof import('~icons/ph/globe-simple')['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']
@@ -91,11 +100,13 @@ declare module 'vue' {
     ScrollProgress: typeof import('./components/ScrollProgress.vue')['default']
     Search: typeof import('./components/Search.vue')['default']
     ServiceLog: typeof import('./components/ServiceViewer/ServiceLog.vue')['default']
+    SideDrawer: typeof import('./components/common/SideDrawer.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']
+    SQLTable: typeof import('./components/LogViewer/SQLTable.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']

assets/components/ContainerTable.vue

@@ -24,7 +24,8 @@
           v-model="selectedHost"
         />
       </div>
-      <dropdown-menu
+
+      <DropdownMenu
         class="btn-sm"
         v-model="selectedHost"
         :options="[
@@ -36,7 +37,8 @@
     </div>
     <div class="flex-1 text-right" v-show="containers.length > pageSizes[0]">
       {{ $t("label.per-page") }}
-      <dropdown-menu
+
+      <DropdownMenu
         class="dropdown-left btn-xs md:btn-sm"
         v-model="perPage"
         :options="pageSizes.map((i) => ({ label: i.toLocaleString(), value: i }))"
@@ -66,7 +68,7 @@
     <tbody>
       <tr v-for="container in paginated" :key="container.id">
         <td v-if="isVisible('name')">
-          <router-link :to="{ name: 'container-id', params: { id: container.id } }" :title="container.name">
+          <router-link :to="{ name: '/container/[id]', params: { id: container.id } }" :title="container.name">
             {{ container.name }}
           </router-link>
         </td>

assets/components/ContainerViewer/ContainerActionsToolbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dropdown dropdown-end dropdown-hover">
-    <label tabindex="0" class="btn btn-ghost btn-sm gap-0.5 px-2">
+    <label tabindex="0" class="btn btn-ghost btn-sm w-10 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>
@@ -20,48 +20,86 @@
           <KeyShortcut char="f" />
         </a>
       </li>
+      <li v-if="hasComplexLogs">
+        <a @click.prevent="showDrawer(LogAnalytics, { container }, 'lg')">
+          <ph:file-sql /> SQL Analytics
+          <KeyShortcut char="f" :modifiers="['shift', 'meta']" />
+        </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>
+        <details>
+          <summary>
+            <div class="flex w-4">
+              <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" />
+            </div>
+            Streams
+          </summary>
+          <ul class="menu">
+            <li>
+              <a
+                @click="
+                  streamConfig.stdout = true;
+                  streamConfig.stderr = true;
+                "
+              >
+                <mdi:check class="w-4" v-if="streamConfig.stdout == true && streamConfig.stderr == true" />
+                <div v-else class="w-4"></div>
+                {{ $t("toolbar.show-all") }}
+              </a>
+            </li>
+            <li>
+              <a
+                @click="
+                  streamConfig.stdout = true;
+                  streamConfig.stderr = false;
+                "
+              >
+                <mdi:check class="w-4" v-if="streamConfig.stdout == true && streamConfig.stderr == false" />
+                <div v-else class="w-4"></div>
+                {{ $t("toolbar.show", { std: "STDOUT" }) }}
+              </a>
+            </li>
+            <li>
+              <a
+                @click="
+                  streamConfig.stdout = false;
+                  streamConfig.stderr = true;
+                "
+              >
+                <mdi:check class="w-4" v-if="streamConfig.stdout == false && streamConfig.stderr == true" />
+                <div v-else class="w-4"></div>
+                {{ $t("toolbar.show", { std: "STDERR" }) }}
+              </a>
+            </li>
+          </ul>
+        </details>
       </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>
+        <details class="group/details">
+          <summary>
+            <mdi:gauge />
+            Levels
+            <Toggle
+              class="toggle-xs invisible group-open/details:visible"
+              v-model="toggleAllLevels"
+              title="Toggle all levels"
+            />
+          </summary>
+          <ul class="menu">
+            <li v-for="level in allLevels">
+              <a class="capitalize" @click="levels.has(level) ? levels.delete(level) : levels.add(level)">
+                <mdi:check class="w-4" v-if="levels.has(level)" />
+                <div v-else class="w-4"></div>
+
+                <div class="flex">
+                  <div class="badge" :data-level="level">{{ level }}</div>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </details>
       </li>
 
       <!-- Container Actions (Enabled via config) -->
@@ -102,20 +140,29 @@
 
 <script lang="ts" setup>
 import { Container } from "@/models/Container";
+import { allLevels } from "@/composable/logContext";
+import LogAnalytics from "../LogViewer/LogAnalytics.vue";
 
 const { showSearch } = useSearchFilter();
 const { enableActions } = config;
-
-const clear = defineEmit();
-
-const { streamConfig } = useLoggingContext();
+const { streamConfig, hasComplexLogs, levels } = useLoggingContext();
+const showDrawer = useDrawer();
 
 const { container } = defineProps<{ container: Container }>();
-
+const clear = defineEmit();
 const { actionStates, start, stop, restart } = useContainerActions(toRef(() => container));
 
+onKeyStroke("f", (e) => {
+  if (hasComplexLogs.value) {
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+      showDrawer(LogAnalytics, { container }, "lg");
+      e.preventDefault();
+    }
+  }
+});
+
 const downloadParams = computed(() =>
-  Object.entries(streamConfig)
+  Object.entries(toValue(streamConfig))
     .filter(([, value]) => value)
     .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {}),
 );
@@ -126,8 +173,17 @@ const downloadUrl = computed(() =>
   ),
 );
 
-const disableRestart = computed(() => {
-  return actionStates.stop || actionStates.start || actionStates.restart;
+const disableRestart = computed(() => actionStates.stop || actionStates.start || actionStates.restart);
+
+const toggleAllLevels = computed({
+  get: () => levels.value.size === allLevels.length,
+  set: (value) => {
+    if (value) {
+      allLevels.forEach((level) => levels.value.add(level));
+    } else {
+      levels.value.clear();
+    }
+  },
 });
 </script>
 
@@ -139,4 +195,11 @@ li.line {
 a {
   @apply whitespace-nowrap;
 }
+
+.menu li ul {
+  margin-inline-start: 0;
+  &:before {
+    display: none;
+  }
+}
 </style>

assets/components/ContainerViewer/ContainerLog.vue

@@ -11,10 +11,9 @@
         </a>
       </div>
     </template>
-    <template #default="{ setLoading }">
+    <template #default>
       <ViewerWithSource
         ref="viewer"
-        @loading-more="setLoading($event)"
         :stream-source="useContainerStream"
         :entity="container"
         :visible-keys="visibleKeys"
@@ -43,10 +42,9 @@ const {
 const close = defineEmit();
 
 const store = useContainerStore();
-const container = store.currentContainer($$(id));
+const container = store.currentContainer(toRef(() => id));
 const visibleKeys = persistentVisibleKeysForContainer(container);
-
-const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
+const viewer = useTemplateRef<ComponentExposed<typeof ViewerWithSource>>("viewer");
 
 provideLoggingContext(toRef(() => [container.value]));
 </script>

assets/components/ContainerViewer/ContainerTitle.vue

@@ -14,7 +14,7 @@
         class="mobile-hidden max-w-[1.5em] truncate transition-[max-width] hover:max-w-[400px]"
         v-if="container.isSwarm"
       >
-        {{ container.swarmId }}
+        .{{ container.swarmId }}
       </div>
     </div>
     <ContainerHealth :health="container.health" v-if="container.health" />

assets/components/FuzzySearchModal.spec.ts

@@ -31,9 +31,9 @@ function createFuzzySearchModal() {
           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", []),
+                new Container("123", new Date(), "image", "test", "command", "host", {}, "running", []),
+                new Container("345", new Date(), "image", "foo bar", "command", "host", {}, "running", []),
+                new Container("567", new Date(), "image", "baz", "command", "host", {}, "running", []),
               ],
             },
           },
@@ -56,9 +56,10 @@ describe("<FuzzySearchModal />", () => {
   beforeEach(() => {
     vi.mocked(useRouter().push).mockReset();
   });
-  test("shows all", async () => {
+
+  test("shows none initially", async () => {
     const wrapper = createFuzzySearchModal();
-    expect(wrapper.findAll("li").length).toBe(3);
+    expect(wrapper.findAll("li").length).toBe(0);
   });
 
   test("search for foo", async () => {
@@ -74,6 +75,6 @@ describe("<FuzzySearchModal />", () => {
     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" } });
+    expect(useRouter().push).toHaveBeenCalledWith({ name: "/container/[id]", params: { id: "567" } });
   });
 });

assets/components/FuzzySearchModal.vue

@@ -9,104 +9,152 @@
         @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])"
+        @keydown.alt.enter="addColumn(data[selectedIndex].item)"
         v-model="query"
         :placeholder="$t('placeholder.search-containers')"
       />
-      <mdi:keyboard-esc class="flex" />
+      <form method="dialog">
+        <button class="swap swap-rotate hover:swap-active">
+          <mdi:keyboard-esc class="swap-off" />
+          <mdi:close class="swap-on" />
+        </button>
+      </form>
     </div>
-    <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(result.item)"
-          @mouseenter="selectedIndex = index"
-          :class="index === selectedIndex ? 'focus' : ''"
-        >
-          <div :class="{ 'text-primary': result.item.state === 'running' }">
-            <octicon:container-24 />
-          </div>
-          <div class="truncate">
-            <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>
-          <DistanceTime :date="result.item.created" class="text-xs font-light" />
+    <div
+      class="dropdown-content !relative mt-2 max-h-[calc(100dvh-20rem)] w-full overflow-y-scroll rounded-md border-y-8 border-transparent bg-base-lighter px-2"
+      v-if="results.length"
+    >
+      <ul tabindex="0" class="menu">
+        <li v-for="(result, index) in data" ref="listItems">
           <a
-            @click.stop.prevent="addColumn(result.item)"
-            :title="$t('tooltip.pin-column')"
-            class="hover:text-secondary"
+            class="grid auto-cols-max grid-cols-[min-content,auto] gap-2 py-4"
+            @click.prevent="selected(result.item)"
+            :class="index === selectedIndex ? 'focus' : ''"
           >
-            <ic:sharp-keyboard-return v-if="index === selectedIndex" />
-            <cil:columns v-else />
+            <div :class="{ 'text-primary': result.item.state === 'running' }">
+              <template v-if="result.item.type === 'container'">
+                <octicon:container-24 />
+              </template>
+              <template v-else-if="result.item.type === 'service'">
+                <ph:stack-simple />
+              </template>
+              <template v-else-if="result.item.type === 'stack'">
+                <ph:stack />
+              </template>
+            </div>
+            <div class="truncate">
+              <template v-if="config.hosts.length > 1 && result.item.host">
+                <span class="font-light">{{ result.item.host }}</span> /
+              </template>
+              <span data-name v-html="matchedName(result)"></span>
+            </div>
+
+            <DistanceTime :date="result.item.created" class="text-xs font-light" />
+            <span
+              @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-if="result.item.type === 'container'" />
+            </span>
           </a>
-        </a>
-      </li>
-    </ul>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ContainerState } from "@/types/Container";
 import { useFuse } from "@vueuse/integrations/useFuse";
-import { type FuseResultMatch } from "fuse.js";
-
-const { maxResults = 5 } = defineProps<{
-  maxResults?: number;
-}>();
+import { type FuseResult } from "fuse.js";
 
 const close = defineEmit();
 
 const query = ref("");
 const input = ref<HTMLInputElement>();
+const listItems = ref<HTMLInputElement[]>();
 const selectedIndex = ref(0);
 
 const router = useRouter();
 const containerStore = useContainerStore();
 const pinnedStore = usePinnedLogsStore();
-const { containers } = storeToRefs(containerStore);
+const { visibleContainers } = storeToRefs(containerStore);
+
+const swarmStore = useSwarmStore();
+const { stacks, services } = storeToRefs(swarmStore);
+
+type Item = {
+  id: string;
+  created: Date;
+  name: string;
+  state?: ContainerState;
+  host?: string;
+  type: "container" | "service" | "stack";
+};
 
 const list = computed(() => {
-  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 items: Item[] = [];
+
+  for (const container of visibleContainers.value) {
+    items.push({
+      id: container.id,
+      created: container.created,
+      name: container.name,
+      state: container.state,
+      host: container.hostLabel,
+      type: "container",
+    });
+  }
+
+  for (const service of services.value) {
+    items.push({
+      id: service.name,
+      created: service.updatedAt,
+      name: service.name,
+      state: "running",
+      type: "service",
+    });
+  }
+
+  for (const stack of stacks.value) {
+    items.push({
+      id: stack.name,
+      created: stack.updatedAt,
+      name: stack.name,
+      state: "running",
+      type: "stack",
+    });
+  }
+
+  return items;
 });
 
 const { results } = useFuse(query, list, {
   fuseOptions: {
-    keys: ["name", "host", "labels"],
+    keys: ["name", "host"],
     includeScore: true,
     useExtendedSearch: true,
     threshold: 0.3,
     includeMatches: true,
   },
-  resultLimit: 10,
-  matchAllWhenSearchEmpty: true,
 });
 
 const data = computed(() => {
-  return [...results.value]
-    .sort((a, b) => {
-      if (a.score === b.score) {
-        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;
-        }
+  return [...results.value].sort((a: FuseResult<Item>, b: FuseResult<Item>) => {
+    if (a.score === b.score) {
+      if (a.item.state === b.item.state) {
+        return b.item.created.getTime() - a.item.created.getTime();
+      } else if (a.item.state === "running" && b.item.state !== "running") {
+        return -1;
       } else {
-        return a.score - b.score;
+        return 1;
       }
-    })
-    .slice(0, maxResults);
+    } else {
+      return (a.score ?? 0) - (b.score ?? 0);
+    }
+  });
 });
 
 watch(query, (data) => {
@@ -115,10 +163,20 @@ watch(query, (data) => {
   }
 });
 
-onMounted(() => input.value?.focus());
+watch(selectedIndex, () => {
+  listItems.value?.[selectedIndex.value].scrollIntoView({ block: "end" });
+});
 
-function selected({ id }: { id: string }) {
-  router.push({ name: "container-id", params: { id } });
+useFocus(input, { initialValue: true });
+
+function selected(item: Item) {
+  if (item.type === "container") {
+    router.push({ name: "/container/[id]", params: { id: item.id } });
+  } else if (item.type === "service") {
+    router.push({ name: "/service/[name]", params: { name: item.id } });
+  } else if (item.type === "stack") {
+    router.push({ name: "/stack/[name]", params: { name: item.id } });
+  }
   close();
 }
 function addColumn(container: { id: string }) {
@@ -126,13 +184,14 @@ function addColumn(container: { id: string }) {
   close();
 }
 
-function matchedName({ item, matches = [] }: { item: { name: string }; matches?: FuseResultMatch[] }) {
+function matchedName({ item, matches = [] }: FuseResult<Item>) {
   const matched = matches.find((match) => match.key === "name");
   if (matched) {
     const { indices } = matched;
     const result = [];
     let lastIndex = 0;
     for (const [start, end] of indices) {
+      if (lastIndex > start) continue;
       result.push(item.name.slice(lastIndex, start));
       result.push(`<mark>${item.name.slice(start, end + 1)}</mark>`);
       lastIndex = end + 1;
@@ -149,8 +208,4 @@ function matchedName({ item, matches = [] }: { item: { name: string }; matches?:
 :deep(mark) {
   @apply bg-transparent text-inherit underline underline-offset-2;
 }
-
-.menu a {
-  @apply transition-none duration-0;
-}
 </style>

assets/components/GroupedViewer/GroupedLog.vue

@@ -8,15 +8,15 @@
           </div>
         </div>
         <MultiContainerStat class="ml-auto" :containers="group.containers" />
+        <MultiContainerActionToolbar class="mobile-hidden" @clear="viewer?.clear()" />
       </div>
     </template>
-    <template #default="{ setLoading }">
+    <template #default>
       <ViewerWithSource
         ref="viewer"
-        @loading-more="setLoading($event)"
         :stream-source="useGroupedStream"
         :entity="group"
-        :visible-keys="visibleKeys"
+        :visible-keys="new Map<string[], boolean>()"
         :show-container-name="true"
       />
     </template>
@@ -26,6 +26,7 @@
 <script lang="ts" setup>
 import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
 import { GroupedContainers } from "@/models/Container";
+import { ComponentExposed } from "vue-component-type-helpers";
 
 const { name, scrollable = false } = defineProps<{
   name: string;
@@ -33,6 +34,7 @@ const { name, scrollable = false } = defineProps<{
 }>();
 
 const containerStore = useContainerStore();
+const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
 
 const { ready } = storeToRefs(containerStore);
 
@@ -41,6 +43,5 @@ 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

@@ -2,20 +2,39 @@
   <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 class="flex flex-col gap-2 overflow-hidden">
+          <div class="flex items-center gap-1 truncate text-xl font-semibold">
+            <HostIcon :type="host.type" class="flex-none" />
+            <div class="truncate">
+              {{ host.name }}
+            </div>
+
+            <span class="badge badge-error badge-xs gap-2 p-2" v-if="!host.available">
+              <carbon:warning />
+              offline
+            </span>
+            <span
+              class="badge badge-success badge-xs gap-2 p-2"
+              :class="{ 'badge-warning': config.version != host.agentVersion }"
+              v-else-if="host.type == 'agent'"
+              title="Dozzle Agent"
+            >
+              {{ host.agentVersion }}
+            </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) }}
+          <ul class="flex flex-row gap-x-2 text-sm md:gap-3">
+            <li class="flex items-center gap-1"><ph:cpu /> {{ host.nCPU }} <span class="mobile-hidden">CPUs</span></li>
+            <li class="flex items-center gap-1">
+              <ph:memory /> {{ 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>
+          <ul class="flex flex-row flex-wrap gap-x-2 text-sm md:gap-3">
+            <li class="flex items-center gap-1">
+              <octicon:container-24 class="inline-block" /> {{ $t("label.container", hostContainers[host.id]?.length) }}
+            </li>
+            <li class="flex items-center gap-1"><mdi:docker class="inline-block" /> {{ host.dockerVersion }}</li>
+          </ul>
         </div>
 
         <div class="flex flex-row gap-4 md:gap-8" v-if="weightedStats[host.id]">

assets/components/HostMenu.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="breadcrumbs">
     <ul>
-      <li><a @click.prevent="setHost(null)" class="link-primary">Hosts</a></li>
+      <li>
+        <a @click.prevent="setHost(null)" class="link-primary">{{ $t("label.hosts") }}</a>
+      </li>
       <li v-if="sessionHost && hosts[sessionHost]" class="cursor-default">
         {{ hosts[sessionHost].name }}
       </li>
@@ -13,7 +15,7 @@
       <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 />
+            <HostIcon :type="host.type" />
             {{ host.name }}
             <span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
           </a>
@@ -23,7 +25,6 @@
     <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" />
@@ -31,32 +32,32 @@
 
               <router-link
                 :to="{
-                  name: 'merged-name',
-                  query: { id: containers.map(({ id }) => id) },
-                  params: { name: label.replace('label.', '') },
+                  name: '/merged/[ids]',
+                  params: { ids: containers.map(({ id }) => id).join(',') },
                 }"
                 class="btn btn-square btn-outline btn-primary btn-xs"
                 active-class="btn-active"
-                title="Merge all containers into one view"
+                :title="$t('tooltip.merge-containers')"
               >
                 <ph:arrows-merge />
               </router-link>
             </summary>
             <ul>
               <li v-for="item in containers" :class="item.state" :key="item.id">
-                <popup>
+                <Popup>
                   <router-link
-                    :to="{ name: 'container-id', params: { id: item.id } }"
+                    :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>
+                      {{ item.name }}<span class="font-light opacity-70" v-if="item.isSwarm">.{{ item.swarmId }}</span>
                     </div>
                     <ContainerHealth :health="item.health" />
                     <span
-                      class="pin"
+                      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')"
@@ -65,9 +66,9 @@
                     </span>
                   </router-link>
                   <template #content>
-                    <ContainerPopup :container="item" />
+                    <ContainerPopup :container="item as Container" />
                   </template>
-                </popup>
+                </Popup>
               </li>
             </ul>
           </details>
@@ -163,28 +164,28 @@ const menuItems = computed(() => {
 
   return items;
 });
+
+const route = useRoute("/container/[id]");
+
+watchEffect(() => {
+  if (route.name === "/container/[id]") {
+    const container = containerStore.findContainerById(route.params.id);
+    if (container) {
+      setHost(container.host);
+    }
+  }
+});
 </script>
 <style scoped lang="postcss">
 .menu {
   @apply text-[0.95rem];
 }
-.containers a {
-  @apply auto-cols-[auto_max-content_max-content];
-  .pin {
-    display: none;
 
-    &:hover {
-      @apply text-secondary;
-    }
-  }
-
-  &:hover {
-    .pin {
-      display: inline-block;
-    }
-  }
-}
 li.exited {
   @apply opacity-50;
 }
+
+li.deleted {
+  @apply hidden;
+}
 </style>

assets/components/InfiniteLoader.vue

@@ -14,7 +14,6 @@ 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

@@ -1,5 +1,6 @@
 <template>
   <div class="flex items-center justify-end gap-4">
+    <slot name="more-items"></slot>
     <Dropdown class="dropdown-end" @closed="latestTag = latest?.tag ?? config.version">
       <template #trigger>
         <mdi:announcement class="size-6 -rotate-12" />
@@ -16,7 +17,7 @@
     </Dropdown>
 
     <router-link
-      :to="{ name: 'settings' }"
+      :to="{ name: '/settings' }"
       :aria-label="$t('title.settings')"
       data-testid="settings"
       class="btn btn-circle btn-sm"

assets/components/LogViewer/ComplexLogItem.vue

@@ -1,10 +1,5 @@
 <template>
-  <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 class="group/item clickable relative flex w-full gap-x-2" @click="showDrawer(LogDetails, { entry: logEntry })">
     <div v-if="showContainerName">
       <ContainerName :id="logEntry.containerID" />
     </div>
@@ -12,47 +7,39 @@
       <LogStd :std="logEntry.std" />
     </div>
     <div v-if="showTimestamp">
-      <LogDate :date="logEntry.date" />
+      <LogDate :date="logEntry.date" class="select-none" />
     </div>
     <div class="flex">
       <LogLevel :level="logEntry.level" />
     </div>
     <div>
-      <ul class="fields cursor-pointer space-x-4" :class="{ expanded }">
+      <ul class="fields space-x-4">
         <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>
+            <span class="font-bold" v-html="JSON.stringify(value)"> </span>
           </template>
-          <span class="font-bold" v-html="markSearch(value)" v-else></span>
+          <span class="font-bold" v-html="value" v-else></span>
         </li>
         <li class="text-light" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
       </ul>
-      <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>
 import { type ComplexLogEntry } from "@/models/LogEntry";
-
-const { markSearch } = useSearchFilter();
+import LogDetails from "./LogDetails.vue";
 
 const { logEntry, showContainerName = false } = defineProps<{
   logEntry: ComplexLogEntry;
-  visibleKeys: string[][];
   showContainerName?: boolean;
 }>();
 
-const [expanded, expandToggle] = useToggle();
-
 const validValues = computed(() => {
   return Object.fromEntries(Object.entries(logEntry.message).filter(([_, value]) => value !== undefined));
 });
+
+const showDrawer = useDrawer();
 </script>
 
 <style lang="postcss" scoped>

assets/components/LogViewer/ContainerEventLogItem.vue

@@ -0,0 +1,88 @@
+<template>
+  <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 }) }}
+      </div>
+      <div>
+        <TimedButton v-if="automaticRedirect" class="btn-primary btn-sm" @finished="redirectNow()">{{
+          $t("button.cancel")
+        }}</TimedButton>
+        <router-link
+          :to="{ name: '/container/[id]', params: { id: nextContainer.id } }"
+          class="btn btn-primary btn-sm"
+          v-else
+        >
+          {{ $t("button.redirect") }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ContainerEventLogEntry } from "@/models/LogEntry";
+const router = useRouter();
+const { showToast } = useToast();
+const { t } = useI18n();
+
+const { logEntry } = defineProps<{
+  logEntry: ContainerEventLogEntry;
+  showContainerName?: boolean;
+}>();
+
+const { containers } = useLoggingContext();
+
+const store = useContainerStore();
+
+const { containers: allContainers } = storeToRefs(store);
+
+const nextContainer = computed(
+  () =>
+    [
+      ...allContainers.value.filter(
+        (c) =>
+          c.host === containers.value[0].host &&
+          c.created > logEntry.date &&
+          c.name === containers.value[0].name &&
+          c.state === "running",
+      ),
+    ].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 }),
+      type: "info",
+    },
+    { expire: 5000 },
+  );
+  router.push({ name: "/container/[id]", params: { id: nextContainer.value?.id } });
+}
+</script>
+
+<style lang="postcss" scoped>
+[data-event="container-stopped"] {
+  @apply text-red;
+}
+[data-event="container-started"] {
+  @apply text-green;
+}
+</style>

assets/components/LogViewer/ContainerName.vue

@@ -1,19 +1,10 @@
 <template>
-  <div class="relative block w-40 overflow-hidden rounded px-1.5 text-center text-sm text-white">
-    <div class="random-color absolute inset-0 brightness-75"></div>
-    <div class="direction-rtl relative truncate">{{ containerNames[id] }}</div>
+  <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" setup>
-const containerStore = useContainerStore();
-const { containerNames } = storeToRefs(containerStore);
-
-const { id } = defineProps<{
-  id: string;
-}>();
-
-const { containers } = useLoggingContext();
-
+<script lang="ts">
 const colors = [
   "#4B0082",
   "#FF00FF",
@@ -31,19 +22,20 @@ const colors = [
   "#FFD700",
   "#FF4040",
 ] as const;
+</script>
+<script lang="ts" setup>
+const containerStore = useContainerStore();
+const { containerNames } = storeToRefs(containerStore);
 
-const color = computed(() => {
-  const index = containers.value.findIndex((container) => container.id === id);
-  return colors[index % colors.length];
-});
+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);
 }
-
-.direction-rtl {
-  direction: rtl;
-}
 </style>

assets/components/LogViewer/DockerEventLogItem.vue

@@ -1,80 +0,0 @@
-<template>
-  <div class="relative flex w-full 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 text-[1rem] md:mx-auto md:w-1/2"
-    v-if="nextContainer && logEntry.event === 'container-stopped'"
-  >
-    <carbon:information class="size-6 shrink-0 stroke-current" />
-    <div>
-      <h3 class="text-lg font-bold">{{ $t("alert.similar-container-found.title") }}</h3>
-      {{ $t("alert.similar-container-found.message", { containerId: nextContainer.id }) }}
-    </div>
-    <div>
-      <TimedButton
-        v-if="automaticRedirect && containers.length == 1"
-        class="btn-primary btn-sm"
-        @finished="redirectNow()"
-        >Cancel</TimedButton
-      >
-      <router-link
-        :to="{ name: 'container-id', params: { id: nextContainer.id } }"
-        class="btn btn-primary btn-sm"
-        v-else
-      >
-        Redirect
-      </router-link>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { DockerEventLogEntry } from "@/models/LogEntry";
-const router = useRouter();
-const { showToast } = useToast();
-const { t } = useI18n();
-
-const { logEntry } = defineProps<{
-  logEntry: DockerEventLogEntry;
-  showContainerName?: boolean;
-}>();
-
-const { containers } = useLoggingContext();
-
-const nextContainer = computed(
-  () =>
-    [
-      ...containers.value.filter(
-        (c) =>
-          c.host === containers.value[0].host &&
-          c.created > logEntry.date &&
-          c.name === containers.value[0].name &&
-          c.state === "running",
-      ),
-    ].sort((a, b) => +a.created - +b.created)[0],
-);
-
-function redirectNow() {
-  showToast(
-    {
-      title: t("alert.redirected.title"),
-      message: t("alert.redirected.message", { containerId: nextContainer.value.id }),
-      type: "info",
-    },
-    { expire: 5000 },
-  );
-  router.push({ name: "container-id", params: { id: nextContainer.value.id } });
-}
-</script>
-
-<style lang="postcss" scoped>
-[data-event="container-stopped"] {
-  @apply text-red;
-}
-[data-event="container-started"] {
-  @apply text-green;
-}
-</style>

assets/components/LogViewer/EventSource.spec.ts

@@ -11,6 +11,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import { default as Component } from "./EventSource.vue";
 import LogViewer from "@/components/LogViewer/LogViewer.vue";
 import { Container } from "@/models/Container";
+import { Level } from "@/models/LogEntry";
 
 vi.mock("@/stores/config", () => ({
   __esModule: true,
@@ -50,7 +51,7 @@ describe("<ContainerEventSource />", () => {
     },
   ) {
     settings.value.hourStyle = hourStyle;
-    search.searchFilter.value = searchFilter;
+    search.searchQueryFilter.value = searchFilter;
     if (searchFilter) {
       search.showSearch.value = true;
     }
@@ -67,17 +68,22 @@ describe("<ContainerEventSource />", () => {
       ],
     });
 
-    return mount(Component<Container>, {
+    return mount(Component, {
       global: {
         plugins: [router, createTestingPinia({ createSpy: vi.fn }), createI18n({})],
         components: {
           LogViewer,
         },
         provide: {
-          scrollingPaused: computed(() => false),
+          [scrollContextKey as symbol]: {
+            paused: computed(() => false),
+            loading: computed(() => false),
+          },
           [loggingContextKey as symbol]: {
             containers: computed(() => [{ id: "abc", image: "test:v123", host: "localhost" }]),
             streamConfig: reactive({ stdout: true, stderr: true }),
+            hasComplexLogs: ref(false),
+            levels: new Set<Level>(["info"]),
           },
         },
       },
@@ -88,14 +94,14 @@ describe("<ContainerEventSource />", () => {
       },
       props: {
         streamSource: useContainerStream,
-        entity: new Container("abc", new Date(), "image", "name", "command", "localhost", {}, "status", "created", []),
+        entity: new Container("abc", new Date(), "image", "name", "command", "localhost", {}, "created", []),
       },
     });
   }
 
-  const sourceUrl = "/api/hosts/localhost/containers/abc/logs/stream?stdout=1&stderr=1";
+  const sourceUrl = "/api/hosts/localhost/containers/abc/logs/stream?stdout=1&stderr=1&levels=info";
 
-  test("renders correctly", async () => {
+  test("renders loading correctly", async () => {
     const wrapper = createLogEventSource();
     expect(wrapper.html()).toMatchSnapshot();
   });
@@ -143,24 +149,11 @@ describe("<ContainerEventSource />", () => {
       expect(wrapper.find("ul.events").html()).toMatchSnapshot();
     });
 
-    test("should render messages with html entities", async () => {
-      const wrapper = createLogEventSource();
-      sources[sourceUrl].emitOpen();
-      sources[sourceUrl].emitMessage({
-        data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
-      });
-
-      vi.runAllTimers();
-      await nextTick();
-
-      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
-    });
-
     test("should render dates with 12 hour style", async () => {
       const wrapper = createLogEventSource({ hourStyle: "12" });
       sources[sourceUrl].emitOpen();
       sources[sourceUrl].emitMessage({
-        data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
+        data: `{"ts":1560336942459, "m":"foo bar", "id":1}`,
       });
 
       vi.runAllTimers();
@@ -172,25 +165,9 @@ describe("<ContainerEventSource />", () => {
     test("should render dates with 24 hour style", async () => {
       const wrapper = createLogEventSource({ hourStyle: "24" });
       sources[sourceUrl].emitOpen();
-      sources[sourceUrl].emitMessage({
-        data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
-      });
-
-      vi.runAllTimers();
-      await nextTick();
-
-      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
-    });
-
-    test("should render messages with filter", async () => {
-      const wrapper = createLogEventSource({ searchFilter: "test" });
-      sources[sourceUrl].emitOpen();
       sources[sourceUrl].emitMessage({
         data: `{"ts":1560336942459, "m":"foo bar", "id":1}`,
       });
-      sources[sourceUrl].emitMessage({
-        data: `{"ts":1560336942459, "m":"test bar", "id":2}`,
-      });
 
       vi.runAllTimers();
       await nextTick();

assets/components/LogViewer/EventSource.vue

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

assets/components/LogViewer/FieldList.vue

@@ -1,74 +0,0 @@
-<template>
-  <ul v-if="expanded" ref="root" class="ml-8">
-    <li v-for="(value, name) in fields" :key="name">
-      <template v-if="isObject(value)">
-        <span class="text-light">{{ name }}=</span>
-        <FieldList :fields="value" :parent-key="parentKey.concat(name)" :visible-keys="visibleKeys" expanded />
-      </template>
-      <template v-else-if="Array.isArray(value)">
-        <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>
-        </span>
-        ]
-      </template>
-      <template v-else>
-        <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>
-  </ul>
-</template>
-<script lang="ts" setup>
-import { arrayEquals, isObject } from "@/utils";
-
-const {
-  fields,
-  expanded = false,
-  parentKey = [],
-  visibleKeys = [],
-} = defineProps<{
-  fields: Record<string, any>;
-  expanded?: boolean;
-  parentKey?: string[];
-  visibleKeys?: string[][];
-}>();
-
-const root = ref<HTMLElement>();
-
-async function toggleField(field: string) {
-  const index = fieldIndex(field);
-
-  if (index > -1) {
-    visibleKeys.splice(index, 1);
-  } else {
-    visibleKeys.push(parentKey.concat(field));
-  }
-
-  await nextTick();
-
-  root.value?.scrollIntoView({
-    block: "center",
-  });
-}
-
-function hasField(field: string) {
-  return fieldIndex(field) > -1;
-}
-
-function fieldIndex(field: string) {
-  const path = parentKey.concat(field);
-  return visibleKeys.findIndex((keys) => arrayEquals(toRaw(keys), toRaw(path)));
-}
-</script>
-
-<style scoped lang="postcss">
-.text-light {
-  @apply text-base-content/70;
-}
-</style>

assets/components/LogViewer/LogAnalytics.vue

@@ -0,0 +1,97 @@
+<template>
+  <aside>
+    <header class="flex items-center gap-4">
+      <h1 class="mobile-hidden text-2xl">{{ container.name }}</h1>
+      <h2 class="text-sm"><DistanceTime :date="container.created" /></h2>
+    </header>
+
+    <div class="mt-8 flex flex-col gap-2">
+      <section>
+        <label class="form-control">
+          <textarea
+            v-model="query"
+            class="textarea textarea-primary w-full font-mono text-lg"
+            :class="{ 'textarea-error': error }"
+          ></textarea>
+          <div class="label">
+            <span class="label-text-alt text-error" v-if="error">{{ error }}</span>
+            <span class="label-text-alt" v-else>
+              Total {{ results.numRows }} records
+              <template v-if="results.numRows > pageLimit">. Showing first {{ page.numRows }}.</template></span
+            >
+          </div>
+        </label>
+      </section>
+      <SQLTable :table="page" :loading="evaluating || !isReady" />
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { Container } from "@/models/Container";
+import { type Table } from "@apache-arrow/esnext-esm";
+const { container } = defineProps<{ container: Container }>();
+const query = ref("SELECT * FROM logs LIMIT 100");
+const error = ref<string | null>(null);
+const debouncedQuery = debouncedRef(query, 500);
+const evaluating = ref(false);
+const pageLimit = 1000;
+
+const url = withBase(
+  `/api/hosts/${container.host}/containers/${container.id}/logs?stdout=1&stderr=1&everything&jsonOnly`,
+);
+
+const [{ useDuckDB }, response] = await Promise.all([import(`@/composable/duckdb`), fetch(url)]);
+
+if (!response.ok) {
+  console.log("error fetching logs from", url);
+  throw new Error(`Failed to fetch logs: ${response.statusText}`);
+}
+
+const { db, conn } = await useDuckDB();
+const empty = await conn.query<Record<string, any>>(`SELECT 1 LIMIT 0`);
+
+const { isReady } = useAsyncState(
+  async () => {
+    await db.registerFileBuffer("logs.json", new Uint8Array(await response.arrayBuffer()));
+    await conn.query(
+      `CREATE TABLE logs AS SELECT unnest(m) FROM read_json('logs.json', ignore_errors = true, format = 'newline_delimited')`,
+    );
+  },
+  undefined,
+  {
+    onError: (e) => {
+      console.error(e);
+      if (e instanceof Error) {
+        error.value = e.message;
+      }
+    },
+  },
+);
+
+const results = computedAsync(
+  async () => {
+    if (isReady.value) {
+      return await conn.query<Record<string, any>>(debouncedQuery.value);
+    } else {
+      return empty;
+    }
+  },
+  empty,
+  {
+    onError: (e) => {
+      console.error(e);
+      if (e instanceof Error) {
+        error.value = e.message;
+      }
+    },
+    evaluating,
+  },
+);
+
+whenever(evaluating, () => (error.value = null));
+const page = computed(() =>
+  results.value.numRows > pageLimit ? results.value.slice(0, pageLimit) : results.value,
+) as unknown as ComputedRef<Table<Record<string, any>>>;
+</script>
+<style lang="postcss" scoped></style>

assets/components/LogViewer/LogDetails.vue

@@ -0,0 +1,197 @@
+<template>
+  <header class="flex items-center gap-4">
+    <Tag :data-level="entry.level" class="uppercase text-white" v-if="entry.level">{{ entry.level }}</Tag>
+    <h1 class="mobile-hidden text-lg">
+      <DateTime :date="entry.date" />
+    </h1>
+    <h2 class="text-sm"><DistanceTime :date="entry.date" /> on {{ entry.std }}</h2>
+  </header>
+
+  <div class="mt-8 flex flex-col gap-10">
+    <section class="grid grid-cols-3 gap-2">
+      <div>
+        <div class="font-thin">Container Name</div>
+        <div class="truncate text-lg font-bold">{{ container.name }}</div>
+      </div>
+      <div>
+        <div class="font-thin">Host</div>
+        <div class="truncate text-lg font-bold">
+          {{ hosts[container.host].name }}
+        </div>
+      </div>
+      <div>
+        <div class="font-thin">Image</div>
+        <div class="truncate text-lg font-bold">{{ container.image }}</div>
+      </div>
+    </section>
+
+    <section class="flex flex-col gap-2">
+      <div class="flex gap-2 font-thin">
+        Raw JSON
+
+        <UseClipboard v-slot="{ copy, copied }" :source="JSON.stringify(entry.unfilteredMessage)">
+          <button class="swap swap-flip outline-none" @click="copy()" :class="{ 'hover:swap-active': copied }">
+            <mdi:check class="swap-on" />
+            <mdi:content-copy class="swap-off" />
+          </button>
+        </UseClipboard>
+      </div>
+      <div class="max-h-48 overflow-scroll rounded border border-base-lighter bg-base-darker p-2">
+        <pre v-html="syntaxHighlight(entry.unfilteredMessage)"></pre>
+      </div>
+    </section>
+    <table class="table table-pin-rows table-fixed" v-if="entry instanceof ComplexLogEntry">
+      <caption class="caption-bottom">
+        Fields are sortable by dragging and dropping.
+      </caption>
+      <thead class="text-lg">
+        <tr>
+          <th class="w-60">Field</th>
+          <th class="mobile-hidden">Value</th>
+          <th class="w-20">
+            <input type="checkbox" class="toggle toggle-primary" v-model="toggleAllFields" title="Toggle all" />
+          </th>
+        </tr>
+      </thead>
+      <tbody ref="list">
+        <tr v-for="{ key, value, enabled } in fields" :key="key.join('.')" class="hover">
+          <td class="cursor-move break-all font-mono">
+            {{ key.join(".") }}
+          </td>
+          <td class="mobile-hidden truncate">
+            <code v-html="JSON.stringify(value)"></code>
+          </td>
+          <td>
+            <input type="checkbox" class="toggle toggle-primary" :checked="enabled" @change="toggleField(key)" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ComplexLogEntry } from "@/models/LogEntry";
+import { useSortable } from "@vueuse/integrations/useSortable";
+import { UseClipboard } from "@vueuse/components";
+
+const { entry } = defineProps<{ entry: ComplexLogEntry }>();
+const { currentContainer } = useContainerStore();
+const list = ref<HTMLElement>();
+const container = currentContainer(toRef(() => entry.containerID));
+const visibleKeys = persistentVisibleKeysForContainer(container);
+const { hosts } = useHosts();
+
+function toggleField(key: string[]) {
+  if (visibleKeys.value.size === 0) {
+    visibleKeys.value = new Map<string[], boolean>(fields.value.map(({ key }) => [key, true]));
+  }
+
+  const enabled = visibleKeys.value.get(key) ?? true;
+
+  visibleKeys.value.set(key, !enabled);
+}
+
+const fields = computed({
+  get() {
+    const fieldsWithValue: { key: string[]; value: any; enabled: boolean }[] = [];
+    const allFields = flattenJSONToMap(entry.unfilteredMessage);
+    if (visibleKeys.value.size === 0) {
+      for (const [key, value] of allFields) {
+        fieldsWithValue.push({ key, value, enabled: true });
+      }
+    } else {
+      for (const [key, enabled] of visibleKeys.value) {
+        const value = getDeep(entry.unfilteredMessage, key);
+        fieldsWithValue.push({ key, value, enabled });
+      }
+
+      for (const [key, value] of allFields) {
+        if ([...visibleKeys.value.keys()].findIndex((k) => arrayEquals(k, key)) === -1) {
+          fieldsWithValue.push({ key, value, enabled: true });
+        }
+      }
+    }
+
+    return fieldsWithValue;
+  },
+  set(value) {
+    const map = new Map<string[], boolean>();
+    for (const { key, enabled } of value) {
+      map.set(key, enabled);
+    }
+    visibleKeys.value = map;
+  },
+});
+
+const toggleAllFields = computed({
+  get: () => fields.value.every(({ enabled }) => enabled),
+  set(value) {
+    if (visibleKeys.value.size === 0) {
+      visibleKeys.value = new Map<string[], boolean>(fields.value.map(({ key }) => [key, true]));
+    }
+    for (const key of visibleKeys.value.keys()) {
+      visibleKeys.value.set(key, value);
+    }
+
+    for (const field of fields.value) {
+      visibleKeys.value.set(field.key, value);
+    }
+  },
+});
+
+function syntaxHighlight(json: any) {
+  json = JSON.stringify(json, null, 2);
+  return json.replace(
+    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|\b\d+\b)/g,
+    function (match: string) {
+      var cls = "json-number";
+      if (/^"/.test(match)) {
+        if (/:$/.test(match)) {
+          cls = "json-key";
+        } else {
+          cls = "json-string";
+        }
+      } else if (/true|false/.test(match)) {
+        cls = "json-boolean";
+      } else if (/null/.test(match)) {
+        cls = "json-null";
+      }
+      return `<span class="${cls}">${match}</span>`;
+    },
+  );
+}
+
+useSortable(list, fields);
+</script>
+<style lang="postcss" scoped>
+.font-mono {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Consolas,
+    Liberation Mono,
+    monaco,
+    Menlo,
+    monospace;
+}
+
+pre {
+  :deep(.json-key) {
+    @apply text-blue;
+  }
+  :deep(.json-string) {
+    @apply text-green;
+  }
+  :deep(.json-number) {
+    @apply text-orange;
+  }
+  :deep(.json-boolean) {
+    @apply text-purple;
+  }
+  :deep(.json-null) {
+    @apply text-red;
+  }
+}
+</style>

assets/components/LogViewer/LogLevel.vue

@@ -32,23 +32,26 @@ defineProps<{
   margin-top: -0.4em;
   align-self: flex-start;
 }
-
+</style>
+<style lang="postcss">
 [data-level="debug"],
 [data-level="trace"] {
-  @apply bg-purple;
+  @apply !bg-purple;
 }
 
 [data-level="info"] {
-  @apply bg-green;
+  @apply !bg-green;
 }
 
 [data-level="error"],
+[data-level="severe"],
+[data-level="critical"],
 [data-level="fatal"] {
-  @apply bg-red;
+  @apply !bg-red;
 }
 
 [data-level="warn"],
 [data-level="warning"] {
-  @apply bg-orange;
+  @apply !bg-orange;
 }
 </style>

assets/components/LogViewer/LogList.vue

@@ -1,33 +1,62 @@
 <template>
-  <ul class="events group py-4" :class="{ 'disable-wrap': !softWrap, [size]: true, compact }">
+  <ul
+    class="events group pt-4"
+    :class="{ 'disable-wrap': !softWrap, [size]: true, compact }"
+    v-if="messages.length > 0"
+  >
     <li
       v-for="item in messages"
+      ref="list"
       :key="item.id"
       :data-key="item.id"
-      :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
+      :data-time="item.date.getTime()"
       class="group/entry"
     >
-      <component
-        :is="item.getComponent()"
-        :log-entry="item"
-        :visible-keys="visibleKeys"
-        :show-container-name="showContainerName"
-      />
+      <component :is="item.getComponent()" :log-entry="item" :show-container-name="showContainerName" />
     </li>
   </ul>
 </template>
 
 <script lang="ts" setup>
-import { toRaw } from "vue";
-
 import { type JSONObject, LogEntry } from "@/models/LogEntry";
 
-defineProps<{
+const { loading, progress, currentDate } = useScrollContext();
+
+const { messages } = defineProps<{
   messages: LogEntry<string | JSONObject>[];
-  visibleKeys: string[][];
-  lastSelectedItem: LogEntry<string | JSONObject> | undefined;
   showContainerName: boolean;
 }>();
+
+watchEffect(() => {
+  loading.value = messages.length === 0;
+});
+
+const { containers } = useLoggingContext();
+
+const list = ref<HTMLElement[]>([]);
+
+useIntersectionObserver(
+  list,
+  (entries) => {
+    if (containers.value.length != 1) return;
+    const container = containers.value[0];
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        const time = entry.target.getAttribute("data-time");
+        if (time) {
+          const date = new Date(parseInt(time));
+          const diff = new Date().getTime() - container.created.getTime();
+          progress.value = (date.getTime() - container.created.getTime()) / diff;
+          currentDate.value = date;
+        }
+      }
+    }
+  },
+  {
+    rootMargin: "-10% 0px -10% 0px",
+    threshold: 1,
+  },
+);
 </script>
 <style scoped lang="postcss">
 .events {
@@ -42,7 +71,7 @@ defineProps<{
     monospace;
 
   > li {
-    @apply flex break-words px-2 py-1 last:snap-end odd:bg-gray-400/[0.07] md:px-4;
+    @apply flex break-words px-2 py-1 last:snap-end odd:bg-gray-400/[0.07] has-[.clickable]:cursor-pointer has-[.clickable]:hover:bg-primary/10 md:px-4;
     &:last-child {
       scroll-margin-block-end: 5rem;
     }
@@ -68,6 +97,10 @@ defineProps<{
     > li {
       @apply py-0;
     }
+
+    :deep(.tag) {
+      @apply rounded-none;
+    }
   }
 }
 </style>

assets/components/LogViewer/LogMessageActions.vue

@@ -7,31 +7,18 @@
     >
       <span
         class="rounded bg-slate-800/60 px-1.5 py-1 text-primary hover:bg-slate-700"
-        @click="copyLogMessageToClipBoard()"
+        @click.prevent="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<{
+const { message } = defineProps<{
   message: () => string;
   logEntry: LogEntry<string | JSONObject>;
 }>();
@@ -40,9 +27,6 @@ const { showToast } = useToast();
 const { copy, isSupported, copied } = useClipboard();
 const { t } = useI18n();
 
-const { isSearching } = useSearchFilter();
-const { handleJumpLineSelected } = useLogSearchContext();
-
 async function copyLogMessageToClipBoard() {
   await copy(message());
 

assets/components/LogViewer/LogViewer.vue

@@ -1,43 +1,43 @@
 <template>
-  <LogList
-    :messages="filtered"
-    :last-selected-item="lastSelectedItem"
-    :visible-keys="visibleKeys"
-    :show-container-name="showContainerName"
-  />
+  <LogList :messages="visibleMessages" :show-container-name="showContainerName" />
 </template>
 
 <script lang="ts" setup>
-import { useRouteHash } from "@vueuse/router";
-
 import { type JSONObject, LogEntry } from "@/models/LogEntry";
 
 const props = defineProps<{
   messages: LogEntry<string | JSONObject>[];
-  visibleKeys: string[][];
+  visibleKeys: Map<string[], boolean>;
   showContainerName: boolean;
 }>();
 
 const { messages, visibleKeys } = toRefs(props);
 
 const { filteredPayload } = useVisibleFilter(visibleKeys);
-const { filteredMessages } = useSearchFilter();
+const { debouncedSearchFilter } = useSearchFilter();
+const { streamConfig } = useLoggingContext();
 
-const visible = filteredPayload(messages);
-const filtered = filteredMessages(visible);
+const visibleMessages = filteredPayload(messages);
+const router = useRouter();
 
-const { lastSelectedItem } = useLogSearchContext() as {
-  lastSelectedItem: Ref<LogEntry<string | JSONObject> | undefined>;
-};
-const routeHash = useRouteHash();
-watch(
-  routeHash,
-  (hash) => {
-    if (hash) {
-      document.querySelector(`[data-key="${hash.substring(1)}"]`)?.scrollIntoView({ block: "center" });
-    }
-  },
-  { immediate: true, flush: "post" },
-);
+watchEffect(() => {
+  const query = {} as Record<string, string>;
+  if (debouncedSearchFilter.value !== "") {
+    query.search = debouncedSearchFilter.value;
+  }
+
+  if (!streamConfig.value.stderr) {
+    query.stderr = streamConfig.value.stderr.toString();
+  }
+
+  if (!streamConfig.value.stdout) {
+    query.stdout = streamConfig.value.stdout.toString();
+  }
+
+  router.push({
+    query,
+    replace: true,
+  });
+});
 </script>
 <style scoped lang="postcss"></style>

assets/components/LogViewer/MultiContainerActionToolbar.vue

@@ -0,0 +1,83 @@
+<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 @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>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { showSearch } = useSearchFilter();
+
+const clear = defineEmit();
+
+const { streamConfig } = useLoggingContext();
+</script>
+
+<style scoped lang="postcss">
+li.line {
+  @apply h-px bg-base-content/20;
+}
+
+a {
+  @apply whitespace-nowrap;
+}
+</style>

assets/components/LogViewer/MultiContainerStat.vue

@@ -14,7 +14,7 @@ const { containers } = defineProps<{
 }>();
 
 const totalStat = ref<Stat>({ cpu: 0, memory: 0, memoryUsage: 0 });
-let history = useSimpleRefHistory(totalStat, { capacity: 300 });
+const { history, reset } = useSimpleRefHistory(totalStat, { capacity: 300 });
 
 watch(
   () => containers,
@@ -37,8 +37,7 @@ watch(
       );
       initial.push(stat);
     }
-
-    history = useSimpleRefHistory(totalStat, { capacity: 300, initial: initial.reverse() });
+    reset({ initial: initial.reverse() });
   },
   { immediate: true },
 );
@@ -71,8 +70,4 @@ const memoryData = computed(() =>
     value: formatBytes(stat.memoryUsage),
   })),
 );
-
-// watch(memoryData, () => {
-//   console.log(memoryData.value);
-// });
 </script>

assets/components/LogViewer/SQLTable.vue

@@ -0,0 +1,40 @@
+<template>
+  <table class="table table-zebra table-pin-rows table-md" v-if="!loading">
+    <thead>
+      <tr>
+        <th v-for="column in columns" :key="column">{{ column }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="row in table" :key="row">
+        <td v-for="column in columns" :key="column">{{ row[column] }}</td>
+      </tr>
+    </tbody>
+  </table>
+  <table class="table table-md animate-pulse" v-else>
+    <thead>
+      <tr>
+        <th v-for="_ in 3">
+          <div class="h-4 w-20 animate-pulse bg-base-content/50 opacity-50"></div>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="_ in 9">
+        <td v-for="_ in 3">
+          <div class="h-4 w-20 bg-base-content/50 opacity-20"></div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<script lang="ts" setup>
+import { type Table } from "@apache-arrow/esnext-esm";
+
+const { loading, table } = defineProps<{
+  loading: boolean;
+  table: Table<Record<string, any>>;
+}>();
+
+const columns = computed(() => (table.numRows > 0 ? Object.keys(table.get(0) as Record<string, any>) : []));
+</script>

assets/components/LogViewer/SimpleLogItem.vue

@@ -2,11 +2,11 @@
   <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" />
+    <LogDate :date="logEntry.date" v-if="showTimestamp" class="select-none" />
     <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)"
+      class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"
+      v-html="linkify(colorize(logEntry.message))"
     ></div>
     <LogMessageActions
       class="duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100"
@@ -23,8 +23,8 @@ import stripAnsi from "strip-ansi";
 
 const ansiConvertor = new AnsiConvertor({
   escapeXML: false,
-  fg: "var(--base-content-color)",
-  bg: "var(--base-color)",
+  fg: "oklch(var(--base-content-color))",
+  bg: "oklch(var(--base-color))",
 });
 
 const { showContainerName = false } = defineProps<{
@@ -32,6 +32,13 @@ const { showContainerName = false } = defineProps<{
   showContainerName?: boolean;
 }>();
 
-const { markSearch } = useSearchFilter();
-const colorize = (value: string) => markSearch(ansiConvertor.toHtml(value));
+const colorize = (value: string) => ansiConvertor.toHtml(value);
+const urlPattern = /(https?:\/\/[^\s]+)/g;
+const linkify = (text: string) =>
+  text.replace(urlPattern, (url) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`);
 </script>
+<style scoped lang="postcss">
+.log-wrapper :deep(a) {
+  @apply text-primary underline-offset-4 hover:underline;
+}
+</style>

assets/components/LogViewer/ViewerWithSource.vue

@@ -1,37 +1,30 @@
 <template>
-  <EventSource
-    ref="source"
-    #default="{ messages }"
-    @loading-more="loadingMore($event)"
-    :stream-source="streamSource"
-    :entity="props.entity"
-  >
+  <EventSource ref="source" #default="{ messages }" :stream-source="streamSource" :entity="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 EventSource from "@/components/LogViewer/EventSource.vue";
 import { LogStreamSource } from "@/composable/eventStreams";
+import { ComponentExposed } from "vue-component-type-helpers";
 
-const props = defineProps<{
+const { streamSource, visibleKeys, showContainerName, entity } = defineProps<{
   streamSource: (t: Ref<T>) => LogStreamSource;
-  visibleKeys: string[][];
+  visibleKeys: Map<string[], boolean>;
   showContainerName: boolean;
   entity: T;
 }>();
 
-const loadingMore = defineEmit<[value: boolean]>();
-
-const source = $ref<InstanceType<typeof LogEventSource>>();
+const source = useTemplateRef<ComponentExposed<typeof EventSource>>("source");
 
 defineExpose({
-  clear: () => source?.clear(),
+  clear: () => source.value?.clear(),
 });
 
 onKeyStroke("k", (e) => {
   if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
-    source?.clear();
+    source.value?.clear();
     e.preventDefault();
   }
 });

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

@@ -1,18 +1,17 @@
 // 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="">
+"<ul data-v-cf9ff940="" class="events group pt-4 medium">
+  <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
+    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
       <!--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 data-v-961504e7="" data-v-a49e52d4="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" 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-->
+      <div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
+      <div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
       </div>
     </div>
@@ -21,18 +20,17 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
 `;
 
 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="">
+"<ul data-v-cf9ff940="" class="events group pt-4 medium">
+  <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
+    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
       <!--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 data-v-961504e7="" data-v-a49e52d4="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" 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-->
+      <div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
+      <div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
       </div>
     </div>
@@ -41,18 +39,17 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
 `;
 
 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="">
+"<ul data-v-cf9ff940="" class="events group pt-4 medium">
+  <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
+    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
       <!--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 data-v-961504e7="" data-v-a49e52d4="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" 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-->
+      <div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
+      <div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
       </div>
     </div>
@@ -60,51 +57,9 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
 </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 correctly 1`] = `
+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>
-<ul data-v-cf9ff940="" class="events group py-4 medium"></ul>"
+<!--v-if-->"
 `;
 
 exports[`<ContainerEventSource /> > should parse messages 1`] = `

assets/components/MultiContainerViewer/MultiContainerLog.vue

@@ -8,15 +8,15 @@
           </div>
         </div>
         <MultiContainerStat class="ml-auto" :containers="containers" />
+        <MultiContainerActionToolbar class="mobile-hidden" @clear="viewer?.clear()" />
       </div>
     </template>
-    <template #default="{ setLoading }">
+    <template #default>
       <ViewerWithSource
         ref="viewer"
-        @loading-more="setLoading($event)"
         :stream-source="useMergedStream"
         :entity="containers"
-        :visible-keys="visibleKeys"
+        :visible-keys="new Map<string[], boolean>()"
         :show-container-name="true"
       />
     </template>
@@ -25,6 +25,7 @@
 
 <script lang="ts" setup>
 import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+import { ComponentExposed } from "vue-component-type-helpers";
 
 const { ids = [], scrollable = false } = defineProps<{
   ids?: string[];
@@ -32,12 +33,9 @@ const { ids = [], scrollable = false } = defineProps<{
 }>();
 
 const containerStore = useContainerStore();
-
+const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
 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

@@ -1,12 +1,12 @@
 <template>
   <div class="flex flex-col gap-8 px-4 py-4 md:px-8">
     <section>
-      <Links />
+      <Links>
+        <template #more-items>
+          <Tag>{{ config.version }}</Tag>
+        </template>
+      </Links>
     </section>
     <slot></slot>
   </div>
 </template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>

assets/components/Popup.vue

@@ -16,11 +16,10 @@
 <script lang="ts" setup>
 import { globalShowPopup } from "@/composable/popup";
 
-let glopbalShow = globalShowPopup();
-let show = ref(glopbalShow.value);
-let delayedShow = refDebounced(show, 1000);
-
-let content = ref<HTMLElement>();
+const glopbalShow = globalShowPopup();
+const show = ref(glopbalShow.value);
+const delayedShow = refDebounced(show, 1000);
+const content = ref<HTMLElement>();
 
 const onMouseEnter = (e: Event) => {
   show.value = true;

assets/components/ScrollProgress.vue

@@ -1,60 +1,45 @@
 <template>
   <transition name="fadeout">
-    <div class="pointer-events-none relative inline-block" ref="root" v-show="!autoHide || show">
-      <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
-        <circle r="44" cx="50" cy="50" class="fill-base-darker stroke-primary" />
-      </svg>
-      <div class="absolute inset-0 flex items-center justify-center font-light">
-        <template v-if="indeterminate">
-          <div class="text-4xl">&#8734;</div>
-        </template>
-        <template v-else-if="!isNaN(scrollProgress)">
+    <div class="inline-flex flex-col items-end gap-2" ref="root" v-show="!autoHide || show">
+      <div class="relative inline-block">
+        <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
+          <circle r="44" cx="50" cy="50" class="fill-base-darker stroke-primary" />
+        </svg>
+        <div class="absolute inset-0 flex items-center justify-center font-light">
           <span class="text-4xl">
-            {{ Math.ceil(scrollProgress * 100) }}
+            {{ Math.ceil(progress * 100) }}
           </span>
           <span> % </span>
-        </template>
+        </div>
       </div>
+      <DistanceTime :date="date" class="whitespace-nowrap text-sm" />
     </div>
   </transition>
 </template>
 
 <script lang="ts" setup>
-const { indeterminate = false, autoHide = false } = defineProps<{
+const {
+  indeterminate = false,
+  autoHide = false,
+  progress,
+  date = new Date(),
+} = defineProps<{
   indeterminate?: boolean;
   autoHide?: boolean;
+  progress: number;
+  date?: Date;
 }>();
 
-const scrollProgress = ref(0);
-const root = ref<HTMLElement>();
-
-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(
-    pinnedLogs,
-    () => {
-      scrollElement.value = (root.value?.closest("[data-scrolling]") as HTMLElement) ?? document;
-    },
-    { immediate: true, flush: "post" },
-  );
-});
-
-watchPostEffect(() => {
-  const parent =
-    scrollElement.value === document
-      ? (scrollElement.value as Document).documentElement
-      : (scrollElement.value as HTMLElement);
-  scrollProgress.value = Math.max(0, Math.min(1, scrollY.value / (parent.scrollHeight - parent.clientHeight)));
-  if (autoHide) {
-    show.value = true;
-  }
-});
+watch(
+  () => progress,
+  () => {
+    if (autoHide) {
+      show.value = true;
+    }
+  },
+);
 </script>
 <style scoped lang="postcss">
 svg {
@@ -72,7 +57,7 @@ svg {
     transition: stroke-dashoffset 250ms ease-out;
     transform: rotate(-90deg);
     transform-origin: 50% 50%;
-    stroke-dashoffset: calc(276.32px - v-bind(scrollProgress) * 276.32px);
+    stroke-dashoffset: calc(276.32px - v-bind(progress) * 276.32px);
     stroke-dasharray: 276.32px 276.32px;
     stroke-linecap: round;
     stroke-width: 3;

assets/components/ScrollableView.vue

@@ -7,23 +7,37 @@
       <slot name="header"></slot>
     </header>
     <main :data-scrolling="scrollable ? true : undefined" class="snap-y overflow-auto">
-      <div class="invisible mr-28 text-right md:visible" v-show="paused">
-        <ScrollProgress :indeterminate="loading" :auto-hide="!loading" class="!fixed top-16 z-10" />
+      <div class="invisible relative md:visible" v-show="scrollContext.paused">
+        <div class="absolute right-44 top-4">
+          <ScrollProgress
+            :indeterminate="loadingMore"
+            :auto-hide="!loadingMore"
+            :progress="scrollContext.progress"
+            :date="scrollContext.currentDate"
+            class="!fixed z-10 min-w-40"
+          />
+        </div>
       </div>
       <div ref="scrollableContent">
-        <slot :setLoading="setLoading"></slot>
+        <slot></slot>
+        <div v-if="scrollContext.loading" class="m-4 text-center">
+          <span class="loading loading-ring loading-md text-primary"></span>
+        </div>
       </div>
-
+      <div
+        class="animate-background h-1 w-1/2 bg-gradient-radial from-primary to-transparent to-75%"
+        v-show="!scrollContext.paused && !scrollContext.loading"
+      ></div>
       <div ref="scrollObserver" class="h-px"></div>
     </main>
 
     <div class="mr-16 text-right">
       <transition name="fade">
         <button
-          class="btn btn-primary fixed bottom-8 rounded p-3 text-primary-content shadow transition-colors"
+          class="transition-colorsblur-xs dark btn btn-primary fixed bottom-8 rounded p-3 text-primary-content shadow"
           :class="hasMore ? 'btn-secondary animate-bounce-fast text-secondary-content' : ''"
           @click="scrollToBottom()"
-          v-show="paused"
+          v-show="scrollContext.paused"
         >
           <mdi:chevron-double-down />
         </button>
@@ -35,43 +49,38 @@
 <script lang="ts" setup>
 const { scrollable = false } = defineProps<{ scrollable?: boolean }>();
 
-let paused = $ref(false);
-let hasMore = $ref(false);
-let loading = $ref(false);
+const hasMore = ref(false);
 const scrollObserver = ref<HTMLElement>();
 const scrollableContent = ref<HTMLElement>();
 
-provide("scrollingPaused", $$(paused));
+const scrollContext = provideScrollContext();
 
-const mutationObserver = new MutationObserver((e) => {
-  if (!paused) {
-    scrollToBottom();
-  } else {
-    const record = e[e.length - 1];
-    const children = (record.target as HTMLElement).children;
-    if (children[children.length - 1] == record.addedNodes[record.addedNodes.length - 1]) {
-      hasMore = true;
-    }
-  }
-});
+const { loadingMore } = useLoggingContext();
 
-const intersectionObserver = new IntersectionObserver((entries) => (paused = entries[0].intersectionRatio == 0), {
+useIntersectionObserver(scrollObserver, ([entry]) => (scrollContext.paused = entry.intersectionRatio == 0), {
   threshold: [0, 1],
-  rootMargin: "80px 0px",
+  rootMargin: "40px 0px",
 });
 
-onMounted(() => {
-  mutationObserver.observe(scrollableContent.value!, { childList: true, subtree: true });
-  intersectionObserver.observe(scrollObserver.value!);
-});
+useMutationObserver(
+  scrollableContent,
+  (records) => {
+    if (!scrollContext.paused) {
+      scrollToBottom();
+    } else {
+      const record = records[records.length - 1];
+      const children = (record.target as HTMLElement).children;
+      if (children[children.length - 1] == record.addedNodes[record.addedNodes.length - 1]) {
+        hasMore.value = true;
+      }
+    }
+  },
+  { childList: true, subtree: true },
+);
 
 function scrollToBottom(behavior: "auto" | "smooth" = "auto") {
   scrollObserver.value?.scrollIntoView({ behavior });
-  hasMore = false;
-}
-
-function setLoading(value: boolean) {
-  loading = value;
+  hasMore.value = false;
 }
 </script>
 <style scoped lang="postcss">
@@ -84,6 +93,20 @@ function setLoading(value: boolean) {
 .fade-leave-to {
   @apply opacity-0;
 }
+
+.animate-background {
+  animation: gradient-animation 3s ease-out infinite;
+}
+
+@keyframes gradient-animation {
+  0%,
+  100% {
+    transform: translateX(0%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+}
 </style>
 
 <style>

assets/components/Search.vue

@@ -7,14 +7,17 @@
       ref="container"
       :style="style"
     >
-      <div class="input input-primary flex h-auto items-center !shadow-lg">
+      <div
+        class="input input-primary flex h-auto items-center !shadow-lg"
+        :class="!isValidQuery ? 'input-warning' : ''"
+      >
         <mdi:magnify />
         <input
           class="input input-ghost w-72 flex-1"
           type="text"
           placeholder="Find / RegEx"
           ref="input"
-          v-model="searchFilter"
+          v-model="searchQueryFilter"
           @keyup.esc="resetSearch()"
         />
         <a class="btn btn-circle btn-xs" @click="resetSearch()"> <mdi:close /></a>
@@ -26,12 +29,12 @@
 <script lang="ts" setup>
 const input = ref<HTMLInputElement>();
 const container = ref<HTMLDivElement>();
-const { searchFilter, showSearch, resetSearch } = useSearchFilter();
+const { searchQueryFilter, showSearch, resetSearch, isValidQuery } = useSearchFilter();
 
 const { style } = useDraggable(container);
 
 onKeyStroke("f", (e) => {
-  if (e.ctrlKey || e.metaKey) {
+  if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
     showSearch.value = true;
     nextTick(() => input.value?.focus() || input.value?.select());
     e.preventDefault();

assets/components/ServiceViewer/ServiceLog.vue

@@ -11,15 +11,15 @@
           </Tag>
         </div>
         <MultiContainerStat class="ml-auto" :containers="service.containers" />
+        <MultiContainerActionToolbar class="mobile-hidden" @clear="viewer?.clear()" />
       </div>
     </template>
-    <template #default="{ setLoading }">
+    <template #default>
       <ViewerWithSource
         ref="viewer"
-        @loading-more="setLoading($event)"
         :stream-source="useServiceStream"
         :entity="service"
-        :visible-keys="visibleKeys"
+        :visible-keys="new Map<string[], boolean>()"
         :show-container-name="true"
       />
     </template>
@@ -29,14 +29,14 @@
 <script lang="ts" setup>
 import { Service } from "@/models/Stack";
 import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+import { ComponentExposed } from "vue-component-type-helpers";
 
 const { name, scrollable = false } = defineProps<{
   scrollable?: boolean;
   name: string;
 }>();
 
-const visibleKeys = ref<string[][]>([]);
-
+const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
 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("", []));

assets/components/SideMenu.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script lang="ts" setup>
+import { onBeforeRouteLeave } from "vue-router";
 const containerStore = useContainerStore();
 const { ready } = storeToRefs(containerStore);
 
@@ -27,5 +28,13 @@ const swarmStore = useSwarmStore();
 const { services, customGroups } = storeToRefs(swarmStore);
 
 const showSwarm = useSessionStorage<boolean>("DOZZLE_SWARM_MODE", false);
+
+onBeforeRouteLeave((to) => {
+  if (to.meta.swarmMode) {
+    showSwarm.value = true;
+  } else if (to.meta.containerMode) {
+    showSwarm.value = false;
+  }
+});
 </script>
 <style scoped lang="postcss"></style>

assets/components/SidePanel.vue

@@ -1,10 +1,8 @@
 <template>
   <aside class="fixed h-screen w-[inherit] overflow-auto p-3" data-testid="navigation">
     <h1>
-      <router-link :to="{ name: 'index' }">
-        <svg class="h-14 w-28 fill-secondary">
-          <use href="#logo"></use>
-        </svg>
+      <router-link :to="{ name: '/' }">
+        <LogoWithText class="logo h-16 w-40" />
       </router-link>
 
       <small class="mb-4 block text-xs font-light" v-if="hostname">
@@ -28,5 +26,18 @@
 </template>
 
 <script lang="ts" setup>
+import LogoWithText from "@/logo-text.svg";
 const { hostname } = config;
 </script>
+
+<style scoped lang="postcss">
+.logo {
+  :deep(.content-fill) {
+    @apply fill-base-content;
+  }
+
+  :deep(.secondary-fill) {
+    @apply fill-secondary;
+  }
+}
+</style>

assets/components/StackViewer/StackLog.vue

@@ -14,15 +14,15 @@
           </Tag>
         </div>
         <MultiContainerStat class="ml-auto" :containers="stack.containers" />
+        <MultiContainerActionToolbar class="mobile-hidden" @clear="viewer?.clear()" />
       </div>
     </template>
-    <template #default="{ setLoading }">
+    <template #default>
       <ViewerWithSource
         ref="viewer"
-        @loading-more="setLoading($event)"
         :stream-source="useStackStream"
         :entity="stack"
-        :visible-keys="visibleKeys"
+        :visible-keys="new Map<string[], boolean>()"
         :show-container-name="true"
       />
     </template>
@@ -32,14 +32,13 @@
 <script lang="ts" setup>
 import { Stack } from "@/models/Stack";
 import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
-
+import { ComponentExposed } from "vue-component-type-helpers";
 const { name, scrollable = false } = defineProps<{
   scrollable?: boolean;
   name: string;
 }>();
 
-const visibleKeys = ref<string[][]>([]);
-
+const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
 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("", [], []));

assets/components/SwarmMenu.vue

@@ -7,17 +7,20 @@
           {{ name }}
 
           <router-link
-            :to="{ name: 'stack-name', params: { name } }"
+            :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"
+            :title="$t('tooltip.merge-services')"
           >
             <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">
+            <router-link
+              :to="{ name: '/service/[name]', params: { name: service.name } }"
+              active-class="active-primary"
+            >
               <ph:stack-simple />
               <div class="truncate">
                 {{ service.name }}
@@ -36,7 +39,10 @@
         </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">
+            <router-link
+              :to="{ name: '/service/[name]', params: { name: service.name } }"
+              active-class="active-primary"
+            >
               <ph:stack-simple />
               <div class="truncate">
                 {{ service.name }}
@@ -55,7 +61,7 @@
         </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">
+            <router-link :to="{ name: '/group/[name]', params: { name: group.name } }" active-class="active-primary">
               <ph:stack-simple />
               <div class="truncate">
                 {{ group.name }}

assets/components/common/DropdownMenu.vue

@@ -6,7 +6,7 @@
     <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">
+          <a @click="update(item.value as T)">
             <mdi:check class="w-4" v-if="modelValue == item.value" />
             <div v-else class="w-4"></div>
             {{ item.label }}
@@ -24,17 +24,19 @@ type DropdownItem = {
   value: T;
 };
 
-const { modelValue } = defineModels<{
-  modelValue: T;
-}>();
+const model = defineModel<T>();
 
-const { options = [], defaultLabel = "" } = defineProps<{
-  options?: DropdownItem[];
+const { options, defaultLabel = "" } = defineProps<{
+  options: DropdownItem[];
   defaultLabel?: string;
 }>();
 
-const label = computed(() => options.find((item) => item.value === modelValue.value)?.label ?? defaultLabel);
+const label = computed(() => options.find((item) => item.value === model.value)?.label ?? defaultLabel);
 const details = ref<HTMLElement | null>(null);
 const close = () => details.value?.removeAttribute("open");
-watch(modelValue, () => close());
+
+const update = (value: T) => {
+  model.value = value;
+  close();
+};
 </script>

assets/components/common/HostIcon.vue

@@ -0,0 +1,10 @@
+<template>
+  <mdi:satellite-variant v-if="type == 'agent'" />
+  <ph:globe-simple v-else-if="type == 'remote'" />
+  <mdi:hexagon-multiple v-else-if="type == 'swarm'" />
+  <ph:computer-tower v-else />
+</template>
+<script setup lang="ts">
+import { Host } from "@/stores/hosts";
+const { type } = defineProps<{ type: Host["type"] }>();
+</script>

assets/components/common/MobileMenu.vue

@@ -1,10 +1,8 @@
 <template>
   <nav class="fixed top-0 z-10 w-full border-b border-base-content/20 bg-base p-2" data-testid="navigation">
     <div class="flex items-center">
-      <router-link :to="{ name: 'index' }">
-        <svg class="h-14 w-28 fill-secondary">
-          <use href="#logo"></use>
-        </svg>
+      <router-link :to="{ name: '/' }">
+        <Logo class="logo h-8" />
       </router-link>
 
       <div class="ml-auto flex items-center gap-2">
@@ -21,61 +19,20 @@
 
     <transition name="fade">
       <div v-show="show" class="h-[calc(100vh-60px)] overflow-auto">
-        <div class="mt-4 flex items-center justify-center gap-2">
-          <dropdown-menu
-            v-model="sessionHost"
-            :options="hosts"
-            defaultLabel="Hosts"
-            class="btn-sm"
-            v-if="config.hosts.length > 1"
-          />
-        </div>
-
-        <ul class="menu">
-          <li class="menu-title">{{ $t("label.containers") }}</li>
-          <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"
-              class="truncate"
-              :title="item.name"
-            >
-              {{ item.name }}
-            </router-link>
-          </li>
-        </ul>
+        <SideMenu />
       </div>
     </transition>
   </nav>
 </template>
 
 <script lang="ts" setup>
-import { sessionHost } from "@/composable/storage";
-const store = useContainerStore();
+import Logo from "@/logo.svg";
 const route = useRoute();
-const { visibleContainers } = storeToRefs(store);
 
 const show = ref(false);
-
 watch(route, () => {
   show.value = false;
 });
-
-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 hosts = computed(() => config.hosts.map(({ id, name }) => ({ value: id, label: name })));
 </script>
 <style scoped lang="postcss">
 li.exited {
@@ -101,4 +58,10 @@ li.exited {
 .fade-leave-to .menu {
   @apply -translate-y-2;
 }
+
+.logo {
+  :deep(.secondary-fill) {
+    @apply fill-secondary;
+  }
+}
 </style>

assets/components/common/SideDrawer.vue

@@ -0,0 +1,51 @@
+<template>
+  <dialog ref="panel" class="modal-right modal items-start outline-none backdrop:bg-none">
+    <div class="modal-box" :width="width">
+      <form method="dialog">
+        <button class="swap swap-rotate absolute right-4 top-4 outline-none hover:swap-active">
+          <mdi:keyboard-esc class="swap-off" />
+          <mdi:close class="swap-on" />
+        </button>
+      </form>
+      <slot v-if="open"></slot>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+</template>
+<script setup lang="ts">
+import { type DrawerWidth } from "@/composable/drawer";
+const panel = useTemplateRef<HTMLDialogElement>("panel");
+
+const open = ref(false);
+const { width } = defineProps<{
+  width: DrawerWidth;
+}>();
+
+defineExpose({
+  open: () => {
+    open.value = true;
+    panel.value?.showModal();
+  },
+});
+
+useEventListener(panel, "close", () => (open.value = false));
+</script>
+<style scoped lang="postcss">
+.modal-right :where(.modal-box) {
+  @apply fixed right-0 h-lvh max-h-screen translate-x-24 scale-100 rounded-none bg-base-lighter shadow-none;
+
+  &[width="md"] {
+    @apply max-w-3xl;
+  }
+
+  &[width="lg"] {
+    @apply max-w-5xl;
+  }
+}
+
+.modal-right[open] .modal-box {
+  @apply translate-x-0;
+}
+</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]" :size="size">
+  <div class="tag 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

@@ -4,7 +4,7 @@
       <slot />
     </template>
     <template #input>
-      <input type="checkbox" class="toggle toggle-primary" v-model="modelValue" />
+      <input type="checkbox" class="toggle toggle-primary" v-model="modelValue" v-bind="$attrs" />
     </template>
   </LabeledInput>
 </template>

assets/composable/drawer.ts

@@ -0,0 +1,29 @@
+import SideDrawer from "@/components/common/SideDrawer.vue";
+import { Component } from "vue";
+
+export type DrawerWidth = "md" | "xl" | "lg";
+
+export const drawerContext = Symbol("drawer") as InjectionKey<
+  (c: Component, p: Record<string, any>, s?: DrawerWidth) => void
+>;
+
+export const createDrawer = (drawer: Ref<InstanceType<typeof SideDrawer>>) => {
+  const component = shallowRef<Component | null>(null);
+  const properties = shallowRef<Record<string, any>>({});
+  const width = ref<DrawerWidth>("md");
+  const showDrawer = (c: Component, p: Record<string, any>, w: DrawerWidth = "md") => {
+    component.value = c;
+    properties.value = p;
+    width.value = w;
+    drawer.value?.open();
+  };
+
+  provide(drawerContext, showDrawer);
+
+  return { component, properties, showDrawer, width };
+};
+
+export const useDrawer = () =>
+  inject(drawerContext, () => {
+    console.error("No drawer context provided");
+  });

assets/composable/duckdb.ts

@@ -0,0 +1,30 @@
+import * as duckdb from "@duckdb/duckdb-wasm";
+const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
+
+export async function useDuckDB() {
+  let cleanup: (() => void) | undefined;
+  onUnmounted(() => cleanup?.());
+
+  const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
+  const worker_url = URL.createObjectURL(
+    new Blob([`importScripts("${bundle.mainWorker!}");`], { type: "text/javascript" }),
+  );
+
+  // Instantiate the asynchronus version of DuckDB-Wasm
+  const worker = new Worker(worker_url);
+  const logger = new duckdb.ConsoleLogger();
+  const db = new duckdb.AsyncDuckDB(logger, worker);
+
+  await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
+  URL.revokeObjectURL(worker_url);
+  const conn = await db.connect();
+
+  cleanup = async () => {
+    console.log("Cleaning up DuckDB");
+    await conn.close();
+    await db.terminate();
+    worker.terminate();
+  };
+
+  return { db, conn };
+}

assets/composable/eventStreams.ts

@@ -1,140 +1,91 @@
-import { type Ref } from "vue";
-import { encodeXML } from "entities";
+import { ShallowRef, type Ref } from "vue";
+
 import debounce from "lodash.debounce";
 import {
   type LogEvent,
   type JSONObject,
   LogEntry,
   asLogEntry,
-  DockerEventLogEntry,
+  ContainerEventLogEntry,
+  ComplexLogEntry,
   SkippedLogsEntry,
 } from "@/models/LogEntry";
 import { Service, Stack } from "@/models/Stack";
 import { Container, GroupedContainers } from "@/models/Container";
 
+const { isSearching, debouncedSearchFilter } = useSearchFilter();
+
 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;
+  const e = JSON.parse(data) 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()}`,
-    );
-  });
-
+  const url = computed(() => `/api/hosts/${container.value.host}/containers/${container.value.id}/logs/stream`);
+  const loadMoreUrl = computed(() => `/api/hosts/${container.value.host}/containers/${container.value.id}/logs`);
   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);
+  return useLogStream(computed(() => `/api/stacks/${stack.value.name}/logs/stream`));
 }
 
 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);
+  return useLogStream(computed(() => `/api/groups/${group.value.name}/logs/stream`));
 }
 
 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()}`,
-    );
+    const ids = containers.value.map((c) => c.id).join(",");
+    return `/api/hosts/${containers.value[0].host}/logs/mergedStream/${ids}`;
   });
 
   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);
+  return useLogStream(computed(() => `/api/services/${service.value.name}/logs/stream`));
 }
 
 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>);
+  const messages: ShallowRef<LogEntry<string | JSONObject>[]> = shallowRef([]);
+  const buffer: ShallowRef<LogEntry<string | JSONObject>[]> = shallowRef([]);
+  const { paused: scrollingPaused } = useScrollContext();
 
   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);
+    if (messages.value.length + buffer.value.length > config.maxLogs) {
+      if (scrollingPaused.value === true) {
+        if (messages.value.at(-1) instanceof SkippedLogsEntry) {
+          const lastEvent = messages.value.at(-1) as SkippedLogsEntry;
+          const lastItem = buffer.value.at(-1) as LogEntry<string | JSONObject>;
+          lastEvent.addSkippedEntries(buffer.value.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));
+          const firstItem = buffer.value.at(0) as LogEntry<string | JSONObject>;
+          const lastItem = buffer.value.at(-1) as LogEntry<string | JSONObject>;
+
+          messages.value = [
+            ...messages.value,
+            new SkippedLogsEntry(new Date(), buffer.value.length, firstItem, lastItem),
+          ];
         }
-        buffer = [];
+        buffer.value = [];
       } else {
-        messages.push(...buffer);
-        buffer = [];
-        messages = messages.slice(-config.maxLogs);
+        if (buffer.value.length > config.maxLogs / 2) {
+          messages.value = buffer.value.slice(-config.maxLogs / 2);
+        } else {
+          messages.value = [...messages.value, ...buffer.value].slice(-config.maxLogs);
+        }
+        buffer.value = [];
       }
     } else {
-      if (messages.length == 0) {
+      if (messages.value.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());
+        buffer.value.sort((a, b) => a.date.getTime() - b.date.getTime());
       }
-      messages.push(...buffer);
-      buffer = [];
+      messages.value = [...messages.value, ...buffer.value];
+      buffer.value = [];
     }
   }
   const flushBuffer = debounce(flushNow, 250, { maxWait: 1000 });
@@ -149,74 +100,108 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
 
   function clearMessages() {
     flushBuffer.cancel();
-    messages = [];
-    buffer = [];
+    messages.value = [];
+    buffer.value = [];
   }
 
+  const { streamConfig, hasComplexLogs, levels } = useLoggingContext();
+
+  const params = computed(() => {
+    const params = new URLSearchParams();
+    if (streamConfig.value.stdout) params.append("stdout", "1");
+    if (streamConfig.value.stderr) params.append("stderr", "1");
+    if (isSearching.value) params.append("filter", debouncedSearchFilter.value);
+    for (const level of levels.value) {
+      params.append("levels", level);
+    }
+    return params;
+  });
+
+  const urlWithParams = computed(() => withBase(`${url.value}?${params.value.toString()}`));
+
   function connect({ clear } = { clear: true }) {
     close();
+    if (clear) clearMessages();
+    es = new EventSource(urlWithParams.value);
+    es.addEventListener("container-event", (e) => {
+      const event = JSON.parse((e as MessageEvent).data) as { actorId: string; name: string };
+      const containerEvent = new ContainerEventLogEntry(
+        event.name == "container-started" ? "Container started" : "Container stopped",
+        event.actorId,
+        new Date(),
+        event.name as "container-stopped" | "container-started",
+      );
 
-    if (clear) {
-      clearMessages();
-    }
+      buffer.value = [...buffer.value, containerEvent];
 
-    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.addEventListener("logs-backfill", (e) => {
+      const data = JSON.parse((e as MessageEvent).data) as LogEvent[];
+      const logs = data.map((e) => asLogEntry(e));
+      messages.value = [...logs, ...messages.value];
+    });
+
     es.onmessage = (e) => {
       if (e.data) {
-        buffer.push(parseMessage(e.data));
+        buffer.value = [...buffer.value, parseMessage(e.data)];
         flushBuffer();
       }
     };
     es.onerror = () => clearMessages();
   }
 
-  watch(url, () => connect(), { immediate: true });
+  watch(urlWithParams, () => connect(), { immediate: true });
 
-  async function loadOlderLogs({ beforeLoading, afterLoading } = { beforeLoading: () => {}, afterLoading: () => {} }) {
+  const isLoadingMore = ref(false);
+
+  async function loadOlderLogs() {
     if (!loadMoreUrl) return;
-    beforeLoading();
+    if (isLoadingMore.value) return;
 
-    const to = messages[0].date;
-    const last = messages[messages.length - 1].date;
+    const to = messages.value[0].date;
+    const last = messages.value[Math.min(messages.value.length - 1, 300)].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();
-  }
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+    isLoadingMore.value = true;
+    try {
+      const urlWithMoreParams = computed(() => {
+        const loadMoreParams = new URLSearchParams(params.value);
+        loadMoreParams.append("from", from.toISOString());
+        loadMoreParams.append("to", to.toISOString());
+        loadMoreParams.append("minimum", "100");
 
-  // 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 });
-  //     }
-  //   },
-  // );
+        return withBase(`${loadMoreUrl.value}?${loadMoreParams.toString()}`);
+      });
+      const stopWatcher = watchOnce(urlWithMoreParams, () => abortController.abort("stream changed"));
+      const logs = await (await fetch(urlWithMoreParams.value, { signal })).text();
+      stopWatcher();
+
+      if (logs && signal.aborted === false) {
+        const newMessages = logs
+          .trim()
+          .split("\n")
+          .map((line) => parseMessage(line));
+        messages.value = [...newMessages, ...messages.value];
+      }
+    } catch (e) {
+      console.error("Error loading older logs", e);
+    } finally {
+      isLoadingMore.value = false;
+    }
+  }
 
   onScopeDispose(() => close());
 
-  return { ...$$({ messages }), loadOlderLogs };
+  watch(messages, () => {
+    if (messages.value.length > 1) {
+      hasComplexLogs.value = messages.value.some((m) => m instanceof ComplexLogEntry);
+    }
+  });
+
+  return { messages, loadOlderLogs, isLoadingMore, hasComplexLogs };
 }

assets/composable/logContext.ts

@@ -1,23 +1,56 @@
 import { Container } from "@/models/Container";
+import { Level } from "@/models/LogEntry";
 
 type LogContext = {
   streamConfig: { stdout: boolean; stderr: boolean };
-  containers: Ref<Container[]>;
+  containers: Container[];
+  loadingMore: boolean;
+  hasComplexLogs: boolean;
+  levels: Set<Level>;
 };
 
+export const allLevels: Level[] = [
+  "info",
+  "debug",
+  "warn",
+  "error",
+  "fatal",
+  "trace",
+  "warning",
+  "critical",
+  "unknown",
+];
+
+// export for testing
 export const loggingContextKey = Symbol("loggingContext") as InjectionKey<LogContext>;
+const searchParams = new URLSearchParams(window.location.search);
+const stdout = searchParams.has("stdout") ? searchParams.get("stdout") === "true" : true;
+const stderr = searchParams.has("stderr") ? searchParams.get("stderr") === "true" : true;
 
 export const provideLoggingContext = (containers: Ref<Container[]>) => {
-  provide(loggingContextKey, {
-    streamConfig: reactive({ stdout: true, stderr: true }),
-    containers,
-  });
+  provide(
+    loggingContextKey,
+    reactive({
+      streamConfig: { stdout, stderr },
+      containers,
+      loadingMore: false,
+      hasComplexLogs: false,
+      levels: new Set<Level>(allLevels),
+    }),
+  );
 };
 
 export const useLoggingContext = () => {
-  const context = inject(loggingContextKey);
-  if (!context) {
-    throw new Error("No logging context provided");
-  }
-  return context;
+  const context = inject(
+    loggingContextKey,
+    reactive({
+      streamConfig: { stdout: true, stderr: true },
+      containers: [],
+      loadingMore: false,
+      hasComplexLogs: false,
+      levels: new Set<Level>(allLevels),
+    }),
+  );
+
+  return toRefs(context);
 };

assets/composable/logSearchContext.ts

@@ -1,16 +0,0 @@
-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

@@ -1,14 +1,34 @@
 import { Profile } from "@/stores/config";
 
-export function useProfileStorage<K extends keyof Profile>(key: K, defaultValue: NonNullable<Profile[K]>) {
+interface SerializerTransformer<T, U> {
+  from: (raw: U) => T;
+  to: (value: T) => U;
+}
+
+export function useProfileStorage<K extends keyof Profile>(
+  key: K,
+  defaultValue: NonNullable<Profile[K]>,
+  transformer?: SerializerTransformer<NonNullable<Profile[K]>, any>,
+) {
   const storageKey = "DOZZLE_" + key.toUpperCase();
   const storage = useStorage<NonNullable<Profile[K]>>(storageKey, defaultValue, undefined, {
     writeDefaults: false,
     mergeDefaults: true,
+    serializer: transformer
+      ? {
+          read: (raw) => transformer.from(JSON.parse(raw)),
+          write: (value) => JSON.stringify(transformer.to(value)),
+        }
+      : undefined,
+    onError: (e) => {
+      console.error(`Failed to read ${storageKey} from storage`, e);
+    },
   });
 
   if (config.profile?.[key]) {
-    if (storage.value instanceof Set && config.profile[key] instanceof Array) {
+    if (transformer) {
+      storage.value = transformer.from(config.profile[key]);
+    } else if (storage.value instanceof Set && config.profile[key] instanceof Array) {
       storage.value = new Set([...(config.profile[key] as Iterable<any>)]) as unknown as NonNullable<Profile[K]>;
     } else if (config.profile[key] instanceof Array) {
       storage.value = config.profile[key] as NonNullable<Profile[K]>;
@@ -23,9 +43,19 @@ export function useProfileStorage<K extends keyof Profile>(key: K, defaultValue:
     watch(
       storage,
       (value) => {
+        const transformedValue = transformer ? transformer.to(value) : value;
+
         fetch(withBase("/api/profile"), {
           method: "PATCH",
-          body: JSON.stringify({ [key]: value }, (_, value) => (value instanceof Set ? [...value] : value)),
+          body: JSON.stringify({ [key]: transformedValue }, (_, value) => {
+            if (value instanceof Set) {
+              return Array.from(value);
+            } else if (value instanceof Map) {
+              return Array.from(value.entries());
+            } else {
+              return value;
+            }
+          }),
         });
       },
       { deep: true },

assets/composable/scrollContext.ts

@@ -0,0 +1,30 @@
+type ScrollContext = {
+  loading: boolean;
+  paused: boolean;
+  progress: number;
+  currentDate: Date;
+};
+
+// export for testing
+export const scrollContextKey = Symbol("scrollContext") as InjectionKey<ScrollContext>;
+
+export const provideScrollContext = () => {
+  const context = defauleValue();
+  provide(scrollContextKey, context);
+  return context;
+};
+
+export const useScrollContext = () => {
+  const defaultValue = defauleValue();
+  const context = inject(scrollContextKey, defaultValue);
+  return toRefs(context);
+};
+
+function defauleValue() {
+  return reactive({
+    loading: false,
+    paused: false,
+    progress: 1,
+    currentDate: new Date(),
+  });
+}

assets/composable/search.ts

@@ -1,85 +1,34 @@
-import { type Ref } from "vue";
-import { type LogEntry, type JSONObject, SimpleLogEntry, ComplexLogEntry } from "@/models/LogEntry";
-import { encodeXML } from "entities";
-
-const searchFilter = ref<string>("");
-const debouncedSearchFilter = useDebounce(searchFilter);
+const searchQueryFilter = ref<string>("");
+const debouncedSearchFilter = refDebounced(searchQueryFilter);
 const showSearch = ref(false);
 
-function matchRecord(record: Record<string, any>, regex: RegExp): boolean {
-  for (const key in record) {
-    const value = record[key];
-    if (typeof value === "string" && regex.test(value)) {
-      return true;
-    }
-    if (isObject(value) && regex.test(JSON.stringify(value))) {
-      return true;
-    }
-    if (Array.isArray(value) && matchRecord(value, regex)) {
-      return true;
-    }
-  }
-  return false;
+const searchParams = new URLSearchParams(window.location.search);
+if (searchParams.get("search") !== null && searchParams.get("search") !== "") {
+  searchQueryFilter.value = searchParams.get("search") || "";
+  showSearch.value = true;
+}
+function resetSearch() {
+  searchQueryFilter.value = "";
+  showSearch.value = false;
 }
 
+const isSearching = computed(() => showSearch.value && debouncedSearchFilter.value !== "");
+
+const isValidQuery = computed(() => {
+  try {
+    new RegExp(searchQueryFilter.value);
+    return true;
+  } catch (e) {
+    return false;
+  }
+});
+
 export function useSearchFilter() {
-  const regex = $computed(() => {
-    const isSmartCase = debouncedSearchFilter.value === debouncedSearchFilter.value.toLowerCase();
-    return new RegExp(encodeXML(debouncedSearchFilter.value), isSmartCase ? "ig" : "g");
-  });
-
-  function filteredMessages(messages: Ref<LogEntry<string | JSONObject>[]>) {
-    return computed(() => {
-      if (debouncedSearchFilter.value && showSearch.value) {
-        try {
-          return messages.value.filter((d) => {
-            if (d instanceof SimpleLogEntry) {
-              return regex.test(d.message);
-            } else if (d instanceof ComplexLogEntry) {
-              return matchRecord(d.message, regex);
-            }
-            return false;
-          });
-        } catch (e) {
-          if (e instanceof SyntaxError) {
-            console.info(`Ignoring SyntaxError from search.`, e);
-            return messages.value;
-          }
-          throw e;
-        }
-      }
-
-      return messages.value;
-    });
-  }
-
-  function markSearch(log: { toString(): string }): string;
-  function markSearch(log: string[]): string[];
-  function markSearch(log: { toString(): string } | string[]) {
-    if (!debouncedSearchFilter.value) {
-      return log;
-    }
-    if (Array.isArray(log)) {
-      return log.map((d) => markSearch(d));
-    }
-
-    return log.toString().replace(regex, (match) => `<mark>${match}</mark>`);
-  }
-
-  function resetSearch() {
-    searchFilter.value = "";
-    showSearch.value = false;
-  }
-
-  function isSearching() {
-    return showSearch.value && searchFilter.value;
-  }
-
   return {
-    filteredMessages,
-    searchFilter,
+    searchQueryFilter,
+    isValidQuery,
+    debouncedSearchFilter,
     showSearch,
-    markSearch,
     resetSearch,
     isSearching,
   };

assets/composable/storage.ts

@@ -7,17 +7,21 @@ 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];
+const storage = useProfileStorage("visibleKeys", new Map<string, Map<string[], boolean>>(), {
+  from(transformed: [string, [string[], boolean][]][]) {
+    return new Map(transformed.map(([key, value]) => [key, new Map(value)]));
+  },
+  to(value: Map<string, Map<string[], boolean>>) {
+    const outer = Array.from(value.entries());
+    const inner = outer.map(([key, value]) => [key, Array.from(value.entries())]);
+    return inner;
+  },
+});
+export function persistentVisibleKeysForContainer(container: Ref<Container>): Ref<Map<string[], boolean>> {
+  // Computed property to only store to storage when the value changes
+  return computed({
+    get: () => storage.value.get(container.value.storageKey) || new Map<string[], boolean>(),
+    set: (value: Map<string[], boolean>) => storage.value.set(container.value.storageKey, value),
   });
 }
 

assets/composable/visible.ts

@@ -1,16 +1,24 @@
 import { ComplexLogEntry, type JSONObject, type LogEntry } from "@/models/LogEntry";
-import type { Ref } from "vue";
 
-export function useVisibleFilter(visibleKeys: Ref<string[][]>) {
+export function useVisibleFilter(visibleKeys: Ref<Map<string[], boolean>>) {
+  const { isSearching } = useSearchFilter();
   function filteredPayload(messages: Ref<LogEntry<string | JSONObject>[]>) {
     return computed(() => {
-      return messages.value.map((d) => {
-        if (d instanceof ComplexLogEntry) {
-          return ComplexLogEntry.fromLogEvent(d, visibleKeys);
-        } else {
-          return d;
-        }
-      });
+      return messages.value
+        .map((d) => {
+          if (d instanceof ComplexLogEntry) {
+            return ComplexLogEntry.fromLogEvent(d, visibleKeys);
+          } else {
+            return d;
+          }
+        })
+        .filter((d) => {
+          if (isSearching.value && d instanceof ComplexLogEntry) {
+            return Object.values(d.message).some((v) => JSON.stringify(v)?.includes("<mark>"));
+          } else {
+            return true;
+          }
+        });
     });
   }
 

assets/favicon.svg

@@ -1,5 +0,0 @@
-<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="128" height="128" rx="6" fill="#222222"/>
-<path d="M82.3248 94.3863H123V104.093H67.8025V95.3506L106.164 44.3736H68.3808V34.5382H121.072V42.9594L82.3248 94.3863Z" fill="#FFDD57"/>
-<path d="M8 107.107L17.5656 14L43.8372 16.7013C51.9339 17.5338 58.9091 20.0604 64.7629 24.2812C70.6166 28.5019 74.8873 34.0893 77.5749 41.0432C80.3052 48.0016 81.2514 55.7674 80.4137 64.3407L79.8027 70.2877C78.9005 79.0698 76.4053 86.5894 72.3173 92.8468C68.2719 99.1084 62.914 103.684 56.2436 106.574C49.6158 109.468 42.1213 110.529 33.7602 109.755L8 107.107ZM28.8005 25.3655L21.3043 98.3288L34.2164 99.6565C43.6767 100.629 51.3299 98.4435 57.1758 93.0993C63.0644 87.7595 66.5671 79.6542 67.684 68.7832L68.2424 63.3477C69.3286 52.7752 67.6788 44.3123 63.293 37.9592C58.9542 31.5678 52.2295 27.8607 43.1188 26.8377L28.8005 25.3655Z" fill="#FFDD57"/>
-</svg>

assets/layouts/default.vue

@@ -42,6 +42,12 @@
       <button>close</button>
     </form>
   </dialog>
+  <SideDrawer ref="drawer" :width="drawerWidth">
+    <Suspense :timeout="0">
+      <component :is="drawerComponent" v-bind="drawerProperties" />
+      <template #fallback> Loading dependencies... </template>
+    </Suspense>
+  </SideDrawer>
   <div class="toast toast-end whitespace-normal">
     <div
       class="alert max-w-xl"
@@ -71,11 +77,14 @@
 // @ts-ignore - splitpanes types are not available
 import { Splitpanes, Pane } from "splitpanes";
 import { collapseNav } from "@/stores/settings";
+import SideDrawer from "@/components/common/SideDrawer.vue";
 
 const pinnedLogsStore = usePinnedLogsStore();
 const { pinnedLogs } = storeToRefs(pinnedLogsStore);
 
 const { toasts, removeToast } = useToast();
+const drawer = useTemplateRef<InstanceType<typeof SideDrawer>>("drawer") as Ref<InstanceType<typeof SideDrawer>>;
+const { component: drawerComponent, properties: drawerProperties, width: drawerWidth } = createDrawer(drawer);
 
 const modal = ref<HTMLDialogElement>();
 const open = ref(false);

assets/logo-text.svg

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

assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97 76" fill="none"><path class="secondary-fill" d="M70.091 27.16a6.49 6.49 0 0 0-6.488 6.49 6.488 6.488 0 1 0 12.978 0 6.49 6.49 0 0 0-6.49-6.49m-42.836 0a6.49 6.49 0 1 0 0 12.98 6.49 6.49 0 0 0 0-12.98M9.182 18.977a6.5 6.5 0 0 1-1.898-4.592 6.474 6.474 0 0 1 6.49-6.49c1.664 0 3.327.631 4.593 1.896l-1.517 1.12A51.67 51.67 0 0 1 48.672 0C60.671 0 71.7 4.08 80.495 10.911l-1.512-1.115A6.46 6.46 0 0 1 83.575 7.9c1.659 0 3.324.63 4.587 1.897a6.51 6.51 0 0 1 1.893 4.593 6.47 6.47 0 0 1-1.893 4.594l1.515 1.113c21.944 21.942-15.406 31.822-15.406 31.822H23.075c-1.077 0-38.88-8.35-15.406-31.822zM82.897 75.094a7.894 7.894 0 0 1-7.894-7.895 7.893 7.893 0 1 1 15.787 0 7.893 7.893 0 0 1-7.893 7.895M18.038 75.812a7.894 7.894 0 0 1-7.895-7.895 7.894 7.894 0 0 1 7.895-7.894 7.894 7.894 0 0 1 7.896 7.894 7.894 7.894 0 0 1-7.896 7.895M25.055 53.549h47.402s-22.981 7.899-47.402 0"/></svg>

assets/main.css

@@ -17,6 +17,7 @@
     --in: 65% 0.171 249.5;
     --inc: 100% 0 0;
     --er: 64% 0.218 28.85;
+    --su: 56% 0.119722 164.12;
     --erc: 100% 0 0;
     --wa: 70% 0.186 48.13;
     --wac: 100% 0 0;
@@ -28,7 +29,7 @@
     --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;
+    --secondary-color: 81.38% 0.1448 90.1243;
   }
 
   html[data-theme="light"] {

assets/main.ts

@@ -3,8 +3,8 @@ import { createApp, App as VueApp } from "vue";
 import App from "./App.vue";
 
 const app = createApp(App);
-Object.values(import.meta.glob<{ install: (app: VueApp) => void }>("./modules/*.ts", { eager: true })).forEach(
-  (i) => i.install?.(app),
+Object.values(import.meta.glob<{ install: (app: VueApp) => void }>("./modules/*.ts", { eager: true })).forEach((i) =>
+  i.install?.(app),
 );
 
 app.mount("#app");

assets/models/Container.spec.ts

@@ -1,38 +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",
-      [],
-      "group",
-      "healthy",
-    );
-    expect(c.name).toBe(expectedName);
-    expect(c.swarmId).toBe(expectedSwarmId);
-  });
-});

assets/models/Container.ts

@@ -4,8 +4,6 @@ import { Ref } from "vue";
 
 export type Stat = Omit<ContainerStat, "id">;
 
-const SWARM_ID_REGEX = /(\.[a-z0-9]{25})+$/i;
-
 const hosts = computed(() =>
   config.hosts.reduce(
     (acc, item) => {
@@ -26,34 +24,28 @@ export class GroupedContainers {
 export class Container {
   private _stat: Ref<Stat>;
   private readonly _statsHistory: Ref<Stat[]>;
-  public readonly swarmId: string | null = null;
-  public readonly isSwarm: boolean = false;
   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(stats.at(-1) || ({ cpu: 0, memory: 0, memoryUsage: 0 } as Stat));
-    this._statsHistory = useSimpleRefHistory(this._stat, { capacity: 300, deep: true, initial: stats });
+    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 statsHistory() {
@@ -84,6 +76,22 @@ export class Container {
     return this.group;
   }
 
+  get name() {
+    return this.isSwarm
+      ? this.labels["com.docker.swarm.task.name"]
+          .replace(`.${this.labels["com.docker.swarm.task.id"]}`, "")
+          .replace(`.${this.labels["com.docker.swarm.node.id"]}`, "")
+      : this._name;
+  }
+
+  get swarmId() {
+    return this.labels["com.docker.swarm.task.name"].replace(this.name + ".", "");
+  }
+
+  get isSwarm() {
+    return Boolean(this.labels["com.docker.swarm.service.id"]);
+  }
+
   public updateStat(stat: Stat) {
     if (isRef(this._stat)) {
       this._stat.value = stat;

assets/models/LogEntry.ts

@@ -1,15 +1,25 @@
 import { Component, ComputedRef, Ref } from "vue";
-import { flattenJSON, getDeep } from "@/utils";
+import { flattenJSON } from "@/utils";
 import ComplexLogItem from "@/components/LogViewer/ComplexLogItem.vue";
 import SimpleLogItem from "@/components/LogViewer/SimpleLogItem.vue";
-import DockerEventLogItem from "@/components/LogViewer/DockerEventLogItem.vue";
+import ContainerEventLogItem from "@/components/LogViewer/ContainerEventLogItem.vue";
 import SkippedEntriesLogItem from "@/components/LogViewer/SkippedEntriesLogItem.vue";
 
 export type JSONValue = string | number | boolean | JSONObject | Array<JSONValue>;
 export type JSONObject = { [x: string]: JSONValue };
 export type Position = "start" | "end" | "middle" | undefined;
 export type Std = "stdout" | "stderr";
-export type Level = "debug" | "info" | "warn" | "error" | "fatal" | "trace" | "unknown";
+export type Level =
+  | "error"
+  | "warn"
+  | "warning"
+  | "info"
+  | "debug"
+  | "trace"
+  | "severe"
+  | "critical"
+  | "fatal"
+  | "unknown";
 export interface LogEvent {
   readonly m: string | JSONObject;
   readonly ts: number;
@@ -58,7 +68,7 @@ export class SimpleLogEntry extends LogEntry<string> {
 }
 
 export class ComplexLogEntry extends LogEntry<JSONObject> {
-  private readonly filteredMessage: ComputedRef<JSONObject>;
+  private readonly filteredMessage: ComputedRef<Record<string, any>>;
 
   constructor(
     message: JSONObject,
@@ -67,15 +77,26 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
     date: Date,
     public readonly level: Level,
     public readonly std: Std,
-    visibleKeys?: Ref<string[][]>,
+    visibleKeys?: Ref<Map<string[], boolean>>,
   ) {
     super(message, containerID, id, date, std, level);
     if (visibleKeys) {
       this.filteredMessage = computed(() => {
-        if (!visibleKeys.value.length) {
+        if (visibleKeys.value.size === 0) {
           return flattenJSON(message);
         } else {
-          return visibleKeys.value.reduce((acc, attr) => ({ ...acc, [attr.join(".")]: getDeep(message, attr) }), {});
+          const flatJSON = flattenJSON(message);
+          const filteredJSON: Record<string, any> = {};
+          for (const [keys, enabled] of visibleKeys.value.entries()) {
+            const key = keys.join(".");
+            if (!enabled) {
+              delete flatJSON[key];
+              continue;
+            }
+            filteredJSON[key] = flatJSON[key];
+            delete flatJSON[key];
+          }
+          return { ...filteredJSON, ...flatJSON };
         }
       });
     } else {
@@ -86,15 +107,15 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
     return ComplexLogItem;
   }
 
-  public get message(): JSONObject {
-    return this.filteredMessage.value;
+  public get message(): Record<string, any> {
+    return unref(this.filteredMessage);
   }
 
   public get unfilteredMessage(): JSONObject {
     return this._message;
   }
 
-  static fromLogEvent(event: ComplexLogEntry, visibleKeys: Ref<string[][]>): ComplexLogEntry {
+  static fromLogEvent(event: ComplexLogEntry, visibleKeys: Ref<Map<string[], boolean>>): ComplexLogEntry {
     return new ComplexLogEntry(
       event._message,
       event.containerID,
@@ -107,7 +128,7 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
   }
 }
 
-export class DockerEventLogEntry extends LogEntry<string> {
+export class ContainerEventLogEntry extends LogEntry<string> {
   constructor(
     message: string,
     containerID: string,
@@ -117,7 +138,7 @@ export class DockerEventLogEntry extends LogEntry<string> {
     super(message, containerID, date.getTime(), date, "stderr", "info");
   }
   getComponent(): Component {
-    return DockerEventLogItem;
+    return ContainerEventLogItem;
   }
 }
 
@@ -165,7 +186,7 @@ export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
       event.id,
       new Date(event.ts),
       event.l,
-      event.s === "unknown" ? "stderr" : event.s ?? "stderr",
+      event.s === "unknown" ? "stderr" : (event.s ?? "stderr"),
     );
   } else {
     return new SimpleLogEntry(
@@ -175,7 +196,7 @@ export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
       new Date(event.ts),
       event.l,
       event.p,
-      event.s === "unknown" ? "stderr" : event.s ?? "stderr",
+      event.s === "unknown" ? "stderr" : (event.s ?? "stderr"),
     );
   }
 }

assets/models/Stack.ts

@@ -10,6 +10,10 @@ export class Stack {
       service.stack = this;
     }
   }
+
+  get updatedAt() {
+    return this.containers.map((c) => c.created).reduce((acc, date) => (date > acc ? date : acc), new Date(0));
+  }
 }
 
 export class Service {
@@ -19,4 +23,8 @@ export class Service {
   ) {}
 
   stack?: Stack;
+
+  get updatedAt() {
+    return this.containers.map((c) => c.created).reduce((acc, date) => (date > acc ? date : acc), new Date(0));
+  }
 }

assets/modules/i18n.ts

@@ -1,23 +1,56 @@
 import { type App } from "vue";
 import { createI18n } from "vue-i18n";
 import { locale } from "@/stores/settings";
+import type { Locale } from "vue-i18n";
 
-import messages from "@intlify/unplugin-vue-i18n/messages";
+const localesMap = Object.fromEntries(
+  Object.entries(import.meta.glob("../../locales/*.yml")).map(([path, loadLocale]) => [
+    path.match(/([\w-]*)\.yml$/)?.[1],
+    loadLocale,
+  ]),
+) as Record<Locale, () => Promise<{ default: Record<string, string> }>>;
 
-const defaultLocale = messages?.hasOwnProperty(navigator.language)
-  ? navigator.language
-  : navigator.language.slice(0, 2);
+export const availableLocales = Object.keys(localesMap);
 
-const i18n = createI18n({
+function setI18nLanguage(lang: Locale) {
+  i18n.global.locale.value = lang;
+  return lang;
+}
+
+export const i18n = createI18n({
   legacy: false,
-  locale: locale.value || defaultLocale,
+  locale: "",
   fallbackLocale: "en",
-  messages,
+  messages: {},
 });
 
-watch(locale, (value) => {
-  i18n.global.locale.value = value || defaultLocale;
-});
+const loadedLanguages: string[] = [];
+async function loadLanguage(lang: string, setLang = true): Promise<Locale> {
+  if (setLang) {
+    if (i18n.global.locale.value === lang) return setI18nLanguage(lang);
+    if (loadedLanguages.includes(lang)) return setI18nLanguage(lang);
+  }
+
+  const messages = await localesMap[lang]();
+  i18n.global.setLocaleMessage(lang, messages.default);
+  loadedLanguages.push(lang);
+  return setI18nLanguage(lang);
+}
+
+await loadLanguage("en", false); // load default language
+
+const userLocale = computed(
+  () =>
+    locale.value ||
+    [navigator.language, navigator.language.slice(0, 2)].find((l) => availableLocales.includes(l)) ||
+    "en",
+);
+
+if (userLocale.value !== "en") {
+  await loadLanguage(userLocale.value);
+}
+
+watchEffect(() => loadLanguage(userLocale.value));
 
 export const install = (app: App) => app.use(i18n);
 export default i18n;

assets/modules/router.ts

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

assets/pages/container/[id].vue

@@ -11,10 +11,11 @@
 </template>
 
 <script lang="ts" setup>
-const { id } = defineProps<{ id: string }>();
+const route = useRoute("/container/[id]");
+const id = toRef(() => route.params.id);
 
 const containerStore = useContainerStore();
-const currentContainer = containerStore.currentContainer($$(id));
+const currentContainer = containerStore.currentContainer(id);
 const { ready } = storeToRefs(containerStore);
 
 const pinnedLogsStore = usePinnedLogsStore();
@@ -30,3 +31,7 @@ watchEffect(() => {
   }
 });
 </script>
+<route lang="yaml">
+meta:
+  containerMode: true
+</route>

assets/pages/group/[name].vue

@@ -1,10 +1,10 @@
 <template>
   <Search />
-  <GroupedLog :name="name" :scrollable="pinnedLogs.length > 0" />
+  <GroupedLog :name="route.params.name" :scrollable="pinnedLogs.length > 0" />
 </template>
 
 <script lang="ts" setup>
-const { name } = defineProps<{ name: string }>();
+const route = useRoute("/group/[name]");
 
 const swarmStore = useSwarmStore();
 const { customGroups } = storeToRefs(swarmStore);
@@ -12,7 +12,7 @@ const { customGroups } = storeToRefs(swarmStore);
 const pinnedLogsStore = usePinnedLogsStore();
 const { pinnedLogs } = storeToRefs(pinnedLogsStore);
 
-const group = computed(() => customGroups.value.find((g) => g.name === name));
+const group = computed(() => customGroups.value.find((g) => g.name === route.params.name));
 
 watchEffect(() => {
   if (group.value?.name) {
@@ -20,3 +20,7 @@ watchEffect(() => {
   }
 });
 </script>
+<route lang="yaml">
+meta:
+  swarmMode: true
+</route>

assets/pages/login.vue

@@ -1,38 +1,36 @@
 <template>
   <div class="card w-96 flex-shrink-0 bg-base-lighter shadow-2xl">
     <div class="card-body">
-      <form action="" method="post" @submit.prevent="onLogin" ref="form">
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text"> {{ $t("label.username") }} </span>
-          </label>
+      <form action="" method="post" @submit.prevent="onLogin" ref="form" class="flex flex-col gap-8">
+        <label class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary">
+          <mdi:account class="has-[+:focus]:text-primary" />
           <input
-            class="input input-bordered"
             type="text"
+            class="grow"
+            :placeholder="$t('label.username')"
             name="username"
             autocomplete="username"
-            v-model="username"
             autofocus
+            required
           />
-        </div>
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text">{{ $t("label.password") }}</span>
-          </label>
+        </label>
+        <label class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary">
+          <mdi:key class="has-[+:focus]:text-primary" />
           <input
-            class="input input-bordered"
             type="password"
+            class="grow"
+            :placeholder="$t('label.password')"
             name="password"
             autocomplete="current-password"
-            v-model="password"
+            autofocus
+            required
           />
-        </div>
+        </label>
         <label class="label text-red" v-if="error">
           {{ $t("error.invalid-auth") }}
         </label>
-        <div class="form-control mt-6">
-          <button class="btn btn-primary" type="submit">{{ $t("button.login") }}</button>
-        </div>
+
+        <button class="btn btn-primary uppercase" type="submit">{{ $t("button.login") }}</button>
       </form>
     </div>
   </div>
@@ -43,27 +41,25 @@ const { t } = useI18n();
 
 setTitle(t("title.login"));
 
-let error = $ref(false);
-let username = $ref("");
-let password = $ref("");
-let form: HTMLFormElement | undefined = $ref();
+const error = ref(false);
+const form = ref<HTMLFormElement>();
 const params = new URLSearchParams(window.location.search);
 
 async function onLogin() {
   const response = await fetch(withBase("/api/token"), {
-    body: new FormData(form),
+    body: new FormData(form.value),
     method: "POST",
   });
 
   if (response.status == 200) {
-    error = false;
+    error.value = false;
     if (params.has("redirectUrl")) {
       window.location.href = withBase(params.get("redirectUrl")!);
     } else {
       window.location.href = withBase("/");
     }
   } else {
-    error = true;
+    error.value = true;
   }
 }
 </script>

assets/pages/merged/[ids].vue

@@ -7,12 +7,12 @@
 const containerStore = useContainerStore();
 const { ready } = storeToRefs(containerStore);
 
-const route = useRoute();
+const route = useRoute("/merged/[ids]");
 
 const pinnedLogsStore = usePinnedLogsStore();
 const { pinnedLogs } = storeToRefs(pinnedLogsStore);
 
-const ids = route.query.id as string[];
+const ids = toRef(() => route.params.ids.split(","));
 
 watchEffect(() => {
   if (ready.value) {
@@ -20,3 +20,7 @@ watchEffect(() => {
   }
 });
 </script>
+<route lang="yaml">
+meta:
+  containerMode: true
+</route>

assets/pages/service/[name].vue

@@ -1,10 +1,10 @@
 <template>
   <Search />
-  <ServiceLog :name="name" :scrollable="pinnedLogs.length > 0" />
+  <ServiceLog :name="route.params.name" :scrollable="pinnedLogs.length > 0" />
 </template>
 
 <script lang="ts" setup>
-const { name } = defineProps<{ name: string }>();
+const route = useRoute("/service/[name]");
 
 const containerStore = useContainerStore();
 const { ready } = storeToRefs(containerStore);
@@ -14,7 +14,7 @@ const { pinnedLogs } = storeToRefs(pinnedLogsStore);
 
 const stackStore = useSwarmStore();
 const { services } = storeToRefs(stackStore);
-const service = computed(() => services.value.find((s) => s.name === name));
+const service = computed(() => services.value.find((s) => s.name === route.params.name));
 
 watchEffect(() => {
   if (ready.value) {
@@ -26,3 +26,7 @@ watchEffect(() => {
   }
 });
 </script>
+<route lang="yaml">
+meta:
+  swarmMode: true
+</route>

assets/pages/settings.vue

@@ -36,7 +36,7 @@
               {{ $t("settings.locale") }}
             </template>
             <template #input>
-              <dropdown-menu
+              <DropdownMenu
                 v-model="locale"
                 :options="[
                   { label: 'Auto', value: '' },
@@ -52,7 +52,7 @@
             </template>
             <template #input>
               <div class="flex gap-2">
-                <dropdown-menu
+                <DropdownMenu
                   v-model="dateLocale"
                   :options="[
                     { label: 'Auto', value: 'auto' },
@@ -62,7 +62,7 @@
                     { label: 'YYYY-MM-DD', value: 'en-CA' },
                   ]"
                 />
-                <dropdown-menu
+                <DropdownMenu
                   v-model="hourStyle"
                   :options="[
                     { label: 'Auto', value: 'auto' },
@@ -79,7 +79,7 @@
               {{ $t("settings.font-size") }}
             </template>
             <template #input>
-              <dropdown-menu
+              <DropdownMenu
                 v-model="size"
                 :options="[
                   { label: 'Small', value: 'small' },
@@ -95,7 +95,7 @@
               {{ $t("settings.color-scheme") }}
             </template>
             <template #input>
-              <dropdown-menu
+              <DropdownMenu
                 v-model="lightTheme"
                 :options="[
                   { label: 'Auto', value: 'auto' },
@@ -108,7 +108,6 @@
         </div>
         <LogList
           :messages="fakeMessages"
-          :visible-keys="keys"
           :last-selected-item="undefined"
           :show-container-name="false"
           class="hidden overflow-hidden rounded-lg border border-base-content/50 shadow @3xl:block"
@@ -156,49 +155,61 @@ import {
   locale,
 } from "@/stores/settings";
 
-const { t, availableLocales } = useI18n();
+import { availableLocales, i18n } from "@/modules/i18n";
+
+const { t } = useI18n();
 
 setTitle(t("title.settings"));
 const { latest, hasUpdate } = useReleases();
 
-const keys = ref<string[][]>([]);
+const now = new Date();
 const hoursAgo = (hours: number) => {
-  const date = new Date();
+  const date = new Date(now);
   date.setHours(date.getHours() - hours);
   return date;
 };
 
-const fakeMessages = [
-  new SimpleLogEntry("This is a preview of the logs", "123", 1, hoursAgo(16), "info", undefined, "stdout"),
-  new SimpleLogEntry("A warning log looks like this", "123", 2, hoursAgo(12), "warn", undefined, "stdout"),
-  new SimpleLogEntry("This is a multi line error message", "123", 3, hoursAgo(7), "error", "start", "stderr"),
-  new SimpleLogEntry("with a second line", "123", 4, hoursAgo(2), "error", "middle", "stderr"),
-  new SimpleLogEntry("and finally third line.", "123", 5, new Date(), "error", "end", "stderr"),
-  new ComplexLogEntry(
-    {
-      message: "This is a complex log entry as json",
-      context: {
-        key: "value",
-        key2: "value2",
+const fakeMessages = computedWithControl(
+  () => i18n.global.locale.value,
+  () => [
+    new SimpleLogEntry(t("settings.log.preview"), "123", 1, hoursAgo(16), "info", undefined, "stdout"),
+    new SimpleLogEntry(t("settings.log.warning"), "123", 2, hoursAgo(12), "warn", undefined, "stdout"),
+    new SimpleLogEntry(
+      t("settings.log.multi-line-error.start-line"),
+      "123",
+      3,
+      hoursAgo(7),
+      "error",
+      "start",
+      "stderr",
+    ),
+    new SimpleLogEntry(
+      t("settings.log.multi-line-error.middle-line"),
+      "123",
+      4,
+      hoursAgo(2),
+      "error",
+      "middle",
+      "stderr",
+    ),
+    new SimpleLogEntry(t("settings.log.multi-line-error.end-line"), "123", 5, new Date(), "error", "end", "stderr"),
+    new ComplexLogEntry(
+      {
+        message: t("settings.log.complex"),
+        context: {
+          key: "value",
+          key2: "value2",
+        },
       },
-    },
-    "123",
-    6,
-    new Date(),
-    "info",
-    "stdout",
-    keys,
-  ),
-  new SimpleLogEntry(
-    "This is a very very long message which would wrap by default. Disabling soft wraps would disable this. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
-    "123",
-    7,
-    new Date(),
-    "debug",
-    undefined,
-    "stderr",
-  ),
-];
+      "123",
+      6,
+      new Date(),
+      "info",
+      "stdout",
+    ),
+    new SimpleLogEntry(t("settings.log.simple"), "123", 7, new Date(), "debug", undefined, "stderr"),
+  ],
+);
 </script>
 <style lang="postcss" scoped>
 .has-underline {

assets/pages/show.vue

@@ -10,14 +10,14 @@ watch(visibleContainers, (newValue) => {
     if (route.query.name) {
       const [container, _] = visibleContainers.value.filter((c) => c.name == route.query.name);
       if (container) {
-        router.push({ name: "container-id", params: { id: container.id } });
+        router.push({ name: "/container/[id]", params: { id: container.id } });
       } else {
         console.error(`No containers found matching name=${route.query.name}. Redirecting to /`);
-        router.push({ name: "index" });
+        router.push({ name: "/" });
       }
     } else {
       console.error(`Expection query parameter name to be set. Redirecting to /`);
-      router.push({ name: "index" });
+      router.push({ name: "/" });
     }
   }
 });

assets/pages/stack/[name].vue

@@ -1,10 +1,10 @@
 <template>
   <Search />
-  <StackLog :name="name" :scrollable="pinnedLogs.length > 0" />
+  <StackLog :name="route.params.name" :scrollable="pinnedLogs.length > 0" />
 </template>
 
 <script lang="ts" setup>
-const { name } = defineProps<{ name: string }>();
+const route = useRoute("/stack/[name]");
 
 const containerStore = useContainerStore();
 const { ready } = storeToRefs(containerStore);
@@ -14,7 +14,7 @@ const { pinnedLogs } = storeToRefs(pinnedLogsStore);
 
 const stackStore = useSwarmStore();
 const { stacks } = storeToRefs(stackStore);
-const stack = computed(() => stacks.value.find((s) => s.name === name));
+const stack = computed(() => stacks.value.find((s) => s.name === route.params.name));
 
 watchEffect(() => {
   if (ready.value) {
@@ -26,3 +26,7 @@ watchEffect(() => {
   }
 });
 </script>
+<route lang="yaml">
+meta:
+  swarmMode: true
+</route>