1.17.1

.air.toml

@@ -1,57 +0,0 @@
-root = "."
-testdata_dir = "testdata"
-tmp_dir = "tmp"
-
-[build]
-args_bin = []
-bin = "./tmp/dozzle"
-cmd = "go build -race -o ./tmp/dozzle ."
-delay = 1000
-exclude_dir = [
-  "assets",
-  "tmp",
-  "data",
-  "node_modules",
-  "docs",
-  "test-results",
-  "dist",
-  "e2e",
-  "examples",
-]
-exclude_file = []
-exclude_regex = ["_test.go"]
-exclude_unchanged = false
-follow_symlink = false
-full_bin = ""
-include_dir = []
-include_ext = ["go", "tpl", "tmpl", "html"]
-include_file = []
-kill_delay = "2s"
-log = "build-errors.log"
-poll = false
-poll_interval = 0
-post_cmd = []
-pre_cmd = []
-rerun = false
-rerun_delay = 500
-send_interrupt = true
-stop_on_error = false
-
-[color]
-app = ""
-build = "yellow"
-main = "magenta"
-runner = "green"
-watcher = "cyan"
-
-[log]
-main_only = false
-silent = false
-time = false
-
-[misc]
-clean_on_exit = false
-
-[screen]
-clear_on_rebuild = false
-keep_scroll = true

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [["@babel/preset-env", { "modules": false }]],
+  "plugins": [["@babel/plugin-transform-runtime", { "regenerator": true }]],
+  "env": {
+    "test": {
+      "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
+    }
+  }
+}

.dockerignore

@@ -1,9 +0,0 @@
-node_modules
-.cache
-.idea
-.github
-dist
-.git
-e2e
-docs
-internal/agent/pb/

.editorconfig

@@ -13,8 +13,5 @@ max_line_length = 120
 indent_style = tab
 indent_size = 4
 
-[Makefile]
-indent_style = tab
-
 [package.json]
 indent_size = 1

.github/ISSUE_TEMPLATE/0_bug_report.yml

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

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

@@ -1,52 +0,0 @@
-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/config.yml

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

.github/funding.yml

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

.github/golang/Dockerfile

@@ -0,0 +1,6 @@
+FROM golang:1.13
+
+COPY entrypoint.sh /entrypoint.sh
+
+ENTRYPOINT ["/entrypoint.sh"]
+CMD [""]

.github/golang/entrypoint.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+set -e
+
+go test -cover ./...

.github/goreleaser/Dockerfile

@@ -0,0 +1,13 @@
+FROM golang:1.13-alpine
+
+RUN apk --no-cache add git nodejs-current nodejs-npm make g++ bash bzr curl docker rpm && \
+  npm i -g npm && \
+  wget https://github.com/goreleaser/goreleaser/releases/latest/download/goreleaser_Linux_x86_64.tar.gz && \
+  tar -xvzf *.tar.gz -C /usr/local/bin && \
+  rm *.gz && \
+  go get -u github.com/gobuffalo/packr/packr
+
+COPY entrypoint.sh /entrypoint.sh
+
+ENTRYPOINT ["/entrypoint.sh"]
+CMD [""]

.github/goreleaser/entrypoint.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+if [ -n "$DOCKER_USERNAME" ] && [ -n "$DOCKER_PASSWORD" ]; then
+    echo "Login to the docker..."
+    docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD $DOCKER_REGISTRY
+fi
+
+# Workaround for github actions when access to different repositories is needed.
+# Github actions provides a GITHUB_TOKEN secret that can only access the current
+# repository and you cannot configure it's value.
+# Access to different repositories is needed by brew for example.
+
+if [ -n "$GORELEASER_GITHUB_TOKEN" ] ; then
+  export GITHUB_TOKEN=$GORELEASER_GITHUB_TOKEN
+fi
+
+npm ci
+goreleaser $@

.github/renovate.json

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

.github/stale.yml

@@ -1,18 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 20
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 3
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - pinned
-  - security
-  - keep
-# Label to use when marking an issue as stale
-staleLabel: wontfix
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false

.github/workflows/deploy.yml

@@ -1,148 +0,0 @@
-on:
-  push:
-    tags:
-      - "v*"
-name: Test and Release
-jobs:
-  npm-test:
-    name: JavaScript Tests
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        name: Install Node
-        with:
-          node-version: latest
-      - run: corepack enable
-      - run: pnpm --version
-      - uses: actions/setup-node@v4
-        with:
-          node-version: latest
-          cache: "pnpm"
-          cache-dependency-path: "**/pnpm-lock.yaml"
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile --prefer-offline
-      - name: Run Tests
-        run: pnpm run test -- --outputTruncateLength=500
-  go-test:
-    name: Go Tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Install Go
-        uses: actions/setup-go@v5
-        with:
-          go-version: 1.22.x
-          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
-  int-test:
-    name: Integration Tests
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        name: Install Node
-        with:
-          node-version: latest
-      - run: corepack enable
-      - run: pnpm --version
-      - uses: actions/setup-node@v4
-        with:
-          node-version: latest
-          cache: "pnpm"
-          cache-dependency-path: "**/pnpm-lock.yaml"
-      - name: Install dependencies
-        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@v6
-        with:
-          source: .
-          load: true
-          set: |
-            *.cache-from=type=gha
-            *.cache-to=type=gha,mode=max
-      - name: Run Playwright tests
-        run: docker compose up --exit-code-from playwright
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30
-  buildx:
-    needs: [go-test, npm-test, int-test]
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3.10.0
-      - name: Login to DockerHub
-        uses: docker/login-action@v3.3.0
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Log in to the Container registry
-        uses: docker/login-action@v3.3.0
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            amir20/dozzle
-            ghcr.io/amir20/dozzle
-          tags: |
-            type=raw,value=latest
-            type=semver,pattern={{version}},prefix=v
-            type=semver,pattern={{major}}.{{minor}},prefix=v
-            type=semver,pattern={{major}},prefix=v
-      - name: Writing certs to file
-        run: |
-          echo "${{ secrets.TTL_KEY }}" > shared_key.pem
-          echo "${{ secrets.TTL_CERT }}" > shared_cert.pem
-      - name: Build and push
-        uses: docker/build-push-action@v6.15.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 }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-  git-release:
-    needs: [buildx]
-    name: Github Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Install Node
-        uses: actions/setup-node@v4
-      - name: Release to Github
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: npx changelogithub

.github/workflows/dev.yml

@@ -1,51 +0,0 @@
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-    branches:
-      - master
-name: Push container
-jobs:
-  buildx:
-    name: Push branches and PRs
-    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@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3.10.0
-      - name: Login to DockerHub
-        uses: docker/login-action@v3.3.0
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Log in to the Container registry
-        uses: docker/login-action@v3.3.0
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            amir20/dozzle
-            ghcr.io/amir20/dozzle
-      - name: Writing certs to file
-        run: |
-          echo "${{ secrets.TTL_KEY }}" > shared_key.pem
-          echo "${{ secrets.TTL_CERT }}" > shared_cert.pem
-      - name: Build and push
-        uses: docker/build-push-action@v6.15.0
-        with:
-          context: .
-          push: true
-          platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8
-          tags: ${{ steps.meta.outputs.tags }}
-          build-args: TAG=${{ steps.meta.outputs.version }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max

.github/workflows/pages.yml

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

.github/workflows/pr.yml

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

.github/workflows/push.yml

@@ -0,0 +1,23 @@
+on: push
+name: Build, Test and Release
+jobs:
+  build:
+    name: npm test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - name: npm test
+        uses: actions/setup-node@v1
+      - run: npm it
+      - name: go test
+        uses: ./.github/golang/
+      - name: Release
+        uses: ./.github/goreleaser/
+        env:
+          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          REF: ${{ github. ref }}
+        with:
+          args: release
+        if: contains(github.ref, 'tags')

.github/workflows/test.yml

@@ -1,126 +0,0 @@
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-    branches:
-      - master
-name: Test
-jobs:
-  typecheck:
-    name: Typecheck
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        name: Install Node
-        with:
-          node-version: latest
-      - run: corepack enable
-      - run: pnpm --version
-      - uses: actions/setup-node@v4
-        with:
-          node-version: latest
-          cache: "pnpm"
-          cache-dependency-path: "**/pnpm-lock.yaml"
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile --prefer-offline
-      - name: Run Typecheck
-        run: pnpm run typecheck
-  npm-test:
-    name: JavaScript Tests
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        name: Install Node
-        with:
-          node-version: latest
-      - run: corepack enable
-      - run: pnpm --version
-      - uses: actions/setup-node@v4
-        with:
-          node-version: latest
-          cache: "pnpm"
-          cache-dependency-path: "**/pnpm-lock.yaml"
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile --prefer-offline
-      - name: Run Tests
-        run: pnpm run test -- --outputTruncateLength=500
-  go-test:
-    name: Go Tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Install Go
-        uses: actions/setup-go@v5
-        with:
-          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
-  staticcheck:
-    runs-on: ubuntu-latest
-    name: Go Staticcheck
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-      - name: Setup Go
-        uses: actions/setup-go@v5
-        with:
-          go-version: "1.24"
-          check-latest: true
-      - 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
-  int-test:
-    name: Integration Tests
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        name: Install Node
-        with:
-          node-version: latest
-      - run: corepack enable
-      - run: pnpm --version
-      - uses: actions/setup-node@v4
-        with:
-          node-version: latest
-          cache: "pnpm"
-          cache-dependency-path: "**/pnpm-lock.yaml"
-      - name: Install dependencies
-        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@v6
-        with:
-          source: .
-          load: true
-          set: |
-            *.cache-from=type=gha
-            *.cache-to=type=gha,mode=max
-      - name: Run Playwright tests
-        run: docker compose up --exit-code-from playwright
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30

.gitignore

@@ -1,17 +1,8 @@
-certs
-/data
+
 dist
 node_modules
 .cache
 static
+a_main-packr.go
 dozzle
-coverage
-.pnpm-debug.log
-coverage.out
-.netlify
-/test-results/
-/playwright-report/
-/playwright/.cache/
-*.pem
-*.csr
-tmp
+gin-bin

.goreleaser.yml

@@ -0,0 +1,47 @@
+before:
+  hooks:
+    - npm run clean
+    - npm run build
+    - packr
+builds:
+  - env:
+      - CGO_ENABLED=0
+    goos:
+      - linux
+      - darwin
+    goarch:
+      - amd64
+      - arm
+      - arm64
+archives:
+  - replacements:
+      amd64: 64-bit
+      386: 32-bit
+      arm64: ARM_64-bit
+      arm: ARM_32-bit
+      linux: Linux
+      darwin: Darwin
+checksum:
+  name_template: "checksums.txt"
+snapshot:
+  name_template: "{{ .Tag }}-next"
+changelog:
+  sort: asc
+  filters:
+    exclude:
+      - "^docs:"
+      - "^test:"
+dockers:
+  - image_templates:
+      - "amir20/dozzle:{{ .Tag }}"
+      - "amir20/dozzle:v{{ .Major }}.{{ .Minor }}"
+      - amir20/dozzle:latest
+    build_flag_templates:
+      - "--label=org.label-schema.schema-version=1.0"
+      - "--label=org.label-schema.build-date={{.Date}}"
+      - "--label=org.label-schema.vcs-ref={{.ShortCommit}}"
+      - "--label=org.label-schema.version={{.Version}}"
+      - "--label=org.label-schema.name=Dozzle"
+      - "--label=org.label-schema.url=https://dozzle.dev/"
+      - "--label=org.label-schema.vcs-url=https://github.com/amir20/dozzle"
+      - "--label=org.label-schema.description=Dozzle is a real-time log viewer for docker containers."

.npmrc

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

.prettierignore

@@ -1,5 +0,0 @@
-auto-imports.d.ts
-components.d.ts
-docs/.vitepress/cache
-docs/.vitepress/dist
-dist

.prettierrc.cjs

@@ -1,4 +0,0 @@
-module.exports = {
-  printWidth: 120,
-  plugins: ["prettier-plugin-tailwindcss"],
-};

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

.reflex

@@ -0,0 +1 @@
+-r '\.go$' -R '^node_modules/' -R '^static/' -R '^.cache/' -G '*_test.go' -s -- go run main.go --level debug

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-- Using welcoming and inclusive language
-- Being respectful of differing viewpoints and experiences
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Showing empathy towards other community members
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-- The use of sexualized language or imagery and unwelcome sexual attention or
-  advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
-  professional setting
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
 
 ## Our Responsibilities
 

Dockerfile

@@ -1,69 +1,9 @@
-# Build assets
-FROM --platform=$BUILDPLATFORM node:23.9.0-alpine AS node
-
-RUN corepack enable
-
-WORKDIR /build
-
-# Install dependencies from lock file
-COPY pnpm-*.yaml ./
-RUN pnpm fetch --ignore-scripts --no-optional
-
-# Copy package.json and install dependencies
-COPY package.json ./
-RUN pnpm install --offline --ignore-scripts --no-optional
-
-# Copy assets and translations to build
-COPY .* *.config.ts *.config.js *.config.cjs ./
-COPY assets ./assets
-COPY locales ./locales
-COPY public ./public
-
-# Build assets
-RUN pnpm build
-
-FROM --platform=$BUILDPLATFORM golang:1.24-alpine AS builder
-
-# 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
-
-# Copy go mod files
-COPY go.* ./
-RUN go mod download
-
-# Copy all other files
-COPY internal ./internal
-COPY types ./types
-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 github.com/amir20/dozzle/internal/support/cli.Version=$TAG" -o dozzle
-
-RUN mkdir /data
+FROM alpine:latest as certs
+RUN apk --update add ca-certificates
 
 FROM scratch
-
-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
-
-EXPOSE 8080
-
+ENV PATH=/bin
+ENV DOCKER_API_VERSION 1.38
+COPY --from=certs /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
+COPY dozzle /
 ENTRYPOINT ["/dozzle"]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Amir Raminfar
+Copyright (c) 2018 Amir Raminfar
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Makefile

@@ -1,70 +0,0 @@
-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:
-	@pnpm build
-
-.PHONY: fake_assets
-fake_assets:
-	@echo 'Skipping asset build'
-	@mkdir -p dist
-	@echo "assets build was skipped" > dist/index.html
-
-.PHONY: test
-test: fake_assets generate
-	go test -cover -race -count 1 -timeout 40s ./...
-
-.PHONY: build
-build: dist generate
-	CGO_ENABLED=0 go build -ldflags "-s -w -X github.com/amir20/dozzle/internal/support/cli.Version=local"
-
-.PHONY: docker
-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: 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/air-verse/air@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

@@ -1,150 +1,91 @@
+[![Go Report Card](https://goreportcard.com/badge/github.com/amir20/dozzle)](https://goreportcard.com/report/github.com/amir20/dozzle)
+[![Docker Pulls](https://img.shields.io/docker/pulls/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
+[![Docker Size](https://images.microbadger.com/badges/image/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
+[![Docker Version](https://images.microbadger.com/badges/version/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
+
 # Dozzle - [dozzle.dev](https://dozzle.dev/)
 
-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.
+Dozzle is a real-time log viewer for Docker. It's free. It's small. And it's right in your browser.
 
-https://github.com/user-attachments/assets/66a7b4b2-d6c9-4fca-ab04-aef6cd7c0c31
+While dozzle should work for most, it is not meant to be a full logging solution. For enterprise use, I recommend you look at [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana).
 
-[![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)
+But if you don't want to pay for those services, then you are in luck! Dozzle will be able to capture all logs from your containers and send them in real-time to your browser. Installation is also very easy. Dozzle is not a database. It does not store or save any logs. You can only see live logs while using Dozzle.
 
-## Features
+![Image](demo.gif)
 
-- 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
-- Live stats with memory and CPU usage
-- 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 🌙
+## Getting dozzle
 
-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 (7 MB compressed). Pull the latest release with:
+Dozzle is a very small Docker container (4 MB compressed). Pull the latest release from the index:
 
     $ docker pull amir20/dozzle:latest
 
-### Running Dozzle
+## Using dozzle
 
 The simplest way to use dozzle is to run the docker container. Also, mount the Docker Unix socket with `--volume` to `/var/run/docker.sock`:
 
-    $ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle:latest
+    $ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:8080 amir20/dozzle:latest
 
-Dozzle will be available at [http://localhost:8080/](http://localhost:8080/).
+dozzle will be available at [http://localhost:8888/](http://localhost:8888/). You can change `-p 8888:8080` to any port. For example, if you want to view dozzle over port 4040 then you would do `-p 4040:8080`.
 
-Here is the Docker Compose file:
+### With Docker swarm
 
+    docker service create \
+    --name=dozzle \
+    --publish=8888:8080 \
+    --constraint=node.role==manager \
+    --mount=type=bind,src=/var/run/docker.sock,dst=/var/run/docker.sock \
+    amir20/dozzle:latest
+
+### With Docker compose
+
+    version: "3"
     services:
       dozzle:
         container_name: dozzle
         image: amir20/dozzle:latest
+        environment:
+          - DOZZLE_TAILSIZE=100
         volumes:
           - /var/run/docker.sock:/var/run/docker.sock
         ports:
-          - 8080:8080
+          - 9999: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).
+#### Security
 
-## Swarm Mode
+dozzle doesn't support authentication out of the box. You can control the device dozzle binds to by passing `--addr` parameter. For example,
 
-Dozzle works with Docker Swarm mode. You can run Dozzle as a global service with:
+    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --addr localhost:1224
 
-    $ 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
+will bind to `localhost` on port `1224`. You can then use a reverse proxy to control who can see dozzle.
 
-See the [Swarm Mode](https://dozzle.dev/guide/swarm-mode) documentation for more details.
+If you wish to restrict the containers shown you can pass the `--filter` parameter. For example,
 
-## Agent Mode
+    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --filter name=foo
 
-Dozzle can be used to monitor multiple Docker hosts. You can run Dozzle in agent mode with:
+this would then only allow you to view containers with a name starting with "foo"
 
-    $ docker run -v /var/run/docker.sock:/var/run/docker.sock -p 7007:7007 amir20/dozzle:latest agent
+#### Changing base URL
 
-See the [Agent Mode](https://dozzle.dev/guide/agent) documentation for more details.
+dozzle by default mounts to "/". If you want to control the base path you can use the `--base` option. For example, if you want to mount at "/foobar",
+then you can override by using `--base /foobar`. See env variables below for using `DOZZLE_BASE` to change this.
 
-## Technical Details
+    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle:latest --base /foobar
 
-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/).
+dozzle will be available at [http://localhost:8080/foobar/](http://localhost:8080/foobar/).
 
-### Installation on podman
+#### Environment variables and configuration
 
-By default Podman doesn't have a background process but you can enable this for Dozzle to work.
+Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or enviroment variables. The table below outlines all supported options and their respective env vars.
 
-Verify first if your podman installation has enabled remote socket:
-
-```
-podman info
-```
-
-When you get under the key remote socket output like this, its already enabled:
-
-```
-  remoteSocket:
-    exists: true
-    path: /run/user/1000/podman/podman.sock
-```
-
-If it's not enabled please follow [this tutorial](https://github.com/containers/podman/blob/main/docs/tutorials/socket_activation.md) to enable it.
-
-Once you have the podman remote socket you can run Dozzle on podman.
-
-```
-podman run --volume=/run/user/1000/podman/podman.sock:/var/run/docker.sock -d -p 8080:8080 docker.io/amir20/dozzle:latest
-```
-
-Additionally you have to create a fake engine-id to prevent `host not found` errors. Podman doesn't generate an engine-id like Docker by itself due to its daemonless architecture.
-
-Under `/var/lib/docker` create a file named `engine-id`. On a system with Podman you will have to create the folder path as well. Inside the file place the UUID, for instance using `uuidgen > engine-id`. After that the file should have an identifier that looks like this: `b9f1d7fc-b459-4b6e-9f7a-e3d1cd2e14a9`.
-
-For more details check [Podman Infos](docs/guide/podman.md) or the [FAQ](docs/guide/faq.md#i-am-seeing-host-not-found-error-in-the-logs-how-do-i-fix-it)
-
-## Security
-
-Dozzle supports file based authentication and forward proxy like [Authelia](https://www.authelia.com/). These are documented at https://dozzle.dev/guide/authentication.
-
-## Analytics collected
-
-Dozzle collects anonymous user configurations using Google Analytics. Why? Dozzle is an open source project with no funding. As a result, there is no time to do user studies of Dozzle. Analytics is collected to prioritize features and fixes based on how people use Dozzle. This data is completely public and can be viewed live using [ Data Studio dashboard](https://datastudio.google.com/s/naeIu0MiWsY).
-
-If you do not want to be tracked at all, see the `--no-analytics` flag below.
-
-## Environment variables and configuration
-
-Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or environment variables. The table below outlines all supported options and their respective env vars.
-
-| Flag                  | Env Variable               | Default        |
-| --------------------- | -------------------------- | -------------- |
-| `--addr`              | `DOZZLE_ADDR`              | `:8080`        |
-| `--base`              | `DOZZLE_BASE`              | `/`            |
-| `--hostname`          | `DOZZLE_HOSTNAME`          | `""`           |
-| `--level`             | `DOZZLE_LEVEL`             | `info`         |
-| `--auth-provider`     | `DOZZLE_AUTH_PROVIDER`     | `none`         |
-| `--auth-header-user`  | `DOZZLE_AUTH_HEADER_USER`  | `Remote-User`  |
-| `--auth-header-email` | `DOZZLE_AUTH_HEADER_EMAIL` | `Remote-Email` |
-| `--auth-header-name`  | `DOZZLE_AUTH_HEADER_NAME`  | `Remote-Name`  |
-| `--enable-actions`    | `DOZZLE_ENABLE_ACTIONS`    | `false`        |
-| `--filter`            | `DOZZLE_FILTER`            | `""`           |
-| `--no-analytics`      | `DOZZLE_NO_ANALYTICS`      | `false`        |
-| `--mode`              | `DOZZLE_MODE`              | `server`       |
-| `--remote-host`       | `DOZZLE_REMOTE_HOST`       |                |
-| `--remote-agent`      | `DOZZLE_REMOTE_AGENT`      |                |
-| `--timeout`           | `DOZZLE_TIMEOUT`           | `10s`          |
-| `--namespace`         | `DOZZLE_NAMESPACE`         | `""`           |
-
-## Support
-
-There are many ways you can support Dozzle:
-
-- Use it! Write about it! Star it! If you love Dozzle, drop me a line and tell me what you love.
-- Blog about Dozzle to spread the word. If you are good at writing send PRs to improve the documentation at [dozzle.dev](https://dozzle.dev/)
-- Sponsor my work at https://www.buymeacoffee.com/amirraminfar
-
-<a href="https://www.buymeacoffee.com/amirraminfar" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
+| Flag         | Env Variable         | Default |
+| ------------ | -------------------- | ------- |
+| `--addr`     | `DOZZLE_ADDR`        | `:8080` |
+| `--base`     | `DOZZLE_BASE`        | `/`     |
+| `--level`    | `DOZZLE_LEVEL`       | `info`  |
+| `--showAll`  | `DOZZLE_SHOWALL`     | `false` |
+| n/a          | `DOCKER_API_VERSION` | `1.38`  |
+| `--tailSize` | `DOZZLE_TAILSIZE`    | `300`   |
+| `--filter`   | `DOZZLE_FILTER`      | `""`    |
 
 ## License
 
@@ -152,10 +93,13 @@ 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 tools with `make tools`.
-4. Install node modules `pnpm install`.
-5. Run `make dev` to start a development server with hot reload.
+1. Install NodeJs.
+2. Install Go.
+3. Globally install [packr utility](https://github.com/gobuffalo/packr) with `go get -u github.com/gobuffalo/packr/packr` outside of dozzle directory.
+4. Install [reflex](https://github.com/cespare/reflex) with `get -u github.com/cespare/reflex` outside of dozzle.
+5. Install node modules with `npm install`.
+6. Do `npm start`
+
+Instructions for Github actions can be found [here](.github/goreleaser/Dockerfile) which build and tests Dozzle.

SECURITY.md

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

__snapshots__/dozzle.snapshot

@@ -0,0 +1,85 @@
+/* snapshot: Test_createRoutes_foobar */
+HTTP/1.1 200 OK
+Connection: close
+Content-Type: text/plain; charset=utf-8
+
+foo page
+
+/* snapshot: Test_createRoutes_index */
+HTTP/1.1 200 OK
+Connection: close
+Content-Type: text/plain; charset=utf-8
+
+index page
+
+/* snapshot: Test_createRoutes_redirect */
+HTTP/1.1 301 Moved Permanently
+Connection: close
+Content-Type: text/html; charset=utf-8
+Location: /foobar/
+
+<a href="/foobar/">Moved Permanently</a>.
+
+/* snapshot: Test_createRoutes_version */
+HTTP/1.1 200 OK
+Connection: close
+Content-Type: text/plain; charset=utf-8
+
+dev
+none
+unknown
+
+/* snapshot: Test_handler_listContainers_happy */
+HTTP/1.1 200 OK
+Connection: close
+Content-Type: text/plain; charset=utf-8
+
+[{"id":"1234567890","names":null,"name":"test","image":"image","imageId":"image_id","command":"command","created":0,"state":"state","status":"status"}]
+
+/* snapshot: Test_handler_streamEvents_error */
+HTTP/1.1 200 OK
+Connection: close
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Type: text/event-stream
+
+/* snapshot: Test_handler_streamEvents_error_request */
+HTTP/1.1 200 OK
+Connection: close
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Type: text/event-stream
+
+/* snapshot: Test_handler_streamEvents_happy */
+HTTP/1.1 200 OK
+Connection: close
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Type: text/event-stream
+
+event: containers-changed
+data: start
+
+/* snapshot: Test_handler_streamLogs_error_finding_container */
+HTTP/1.1 500 Internal Server Error
+Connection: close
+Content-Type: text/plain; charset=utf-8
+X-Content-Type-Options: nosniff
+
+error finding container
+
+/* snapshot: Test_handler_streamLogs_error_reading */
+HTTP/1.1 200 OK
+Connection: close
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Type: text/event-stream
+
+/* snapshot: Test_handler_streamLogs_happy */
+HTTP/1.1 200 OK
+Connection: close
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Type: text/event-stream
+
+data: INFO Testing logs...

assets/App.spec.js

@@ -0,0 +1,50 @@
+import EventSource from "eventsourcemock";
+import { shallowMount, RouterLinkStub, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import App from "./App";
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe("<App />", () => {
+  const stubs = { RouterLink: RouterLinkStub, "router-view": true };
+  let store;
+
+  beforeEach(() => {
+    global.BASE_PATH = "";
+    global.EventSource = EventSource;
+    const state = {
+      containers: [
+        { id: "abc", name: "Test 1" },
+        { id: "xyz", name: "Test 2" }
+      ]
+    };
+
+    const actions = {
+      FETCH_CONTAINERS: () => Promise.resolve()
+    };
+
+    store = new Vuex.Store({
+      state,
+      actions
+    });
+  });
+
+  test("is a Vue instance", async () => {
+    const wrapper = shallowMount(App, { stubs, store, localVue });
+    expect(wrapper.isVueInstance()).toBeTruthy();
+  });
+
+  test("has right title", async () => {
+    const wrapper = shallowMount(App, { stubs, store, localVue });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.title).toContain("2 containers");
+  });
+
+  test("renders correctly", async () => {
+    const wrapper = shallowMount(App, { stubs, store, localVue });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

assets/App.vue

@@ -1,51 +1,89 @@
-<template>
-  <router-view></router-view>
+<template lang="html">
+  <div class="columns is-marginless">
+    <side-menu></side-menu>
+    <div class="column is-offset-3-tablet is-offset-2-widescreen is-9-tablet is-10-widescreen is-paddingless">
+      <splitpanes>
+        <pane>
+          <router-view></router-view>
+        </pane>
+        <pane v-for="other in activeContainers" :key="other.id">
+          <scrollable-view>
+            <template v-slot:header>
+              <div class="name columns is-marginless">
+                <span class="column">{{ other.name }}</span>
+                <span class="column is-narrow">
+                  <button class="delete is-medium" @click="removeActiveContainer(other)"></button>
+                </span>
+              </div>
+            </template>
+            <log-viewer-with-source :id="other.id"></log-viewer-with-source>
+          </scrollable-view>
+        </pane>
+      </splitpanes>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup>
-const mode = useColorMode();
-watchEffect(() => {
-  if (smallerScrollbars.value) {
-    document.documentElement.classList.add("has-custom-scrollbars");
-  } else {
-    document.documentElement.classList.remove("has-custom-scrollbars");
-  }
+<script>
+import { mapActions, mapGetters, mapState } from "vuex";
+import { Splitpanes, Pane } from "splitpanes";
 
-  let theme = lightTheme.value;
-  if (theme === "auto") {
-    theme = mode.value;
+import LogViewerWithSource from "./components/LogViewerWithSource";
+import ScrollableView from "./components/ScrollableView";
+import SideMenu from "./components/SideMenu";
+
+export default {
+  name: "App",
+  components: {
+    LogViewerWithSource,
+    SideMenu,
+    ScrollableView,
+    Splitpanes,
+    Pane
+  },
+  data() {
+    return {
+      title: "",
+      showNav: false
+    };
+  },
+  metaInfo() {
+    return {
+      title: this.title,
+      titleTemplate: "%s - Dozzle"
+    };
+  },
+  async created() {
+    await this.fetchContainerList();
+    this.title = `${this.containers.length} containers`;
+  },
+  computed: {
+    ...mapState(["containers", "activeContainers"])
+  },
+  methods: {
+    ...mapActions({
+      fetchContainerList: "FETCH_CONTAINERS",
+      removeActiveContainer: "REMOVE_ACTIVE_CONTAINER"
+    })
+  },
+  watch: {
+    $route(to, from) {
+      this.showNav = false;
+    }
   }
-  document.documentElement.setAttribute("data-theme", theme);
-});
+};
 </script>
-<style>
-html.has-custom-scrollbars {
-  ::-webkit-scrollbar {
-    width: 8px;
-    display: content;
-  }
 
-  ::-webkit-scrollbar-thumb {
-    background-color: rgba(128, 128, 128, 0.33);
-    outline: 1px solid slategrey;
-    border-radius: 4px;
-  }
+<style scoped lang="scss">
+.name {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(0, 0, 0, 0.1);
+  font-weight: bold;
+  font-family: monospace;
+}
 
-  ::-webkit-scrollbar-thumb:active {
-    background-color: #777;
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  ::-webkit-scrollbar-track:hover {
-    background-color: rgba(64, 64, 64, 0.33);
-  }
-
-  section main {
-    scrollbar-color: #353535 transparent;
-    scrollbar-width: thin;
-  }
+::v-deep .splitpanes__splitter {
+  min-width: 4px;
+  background: #666;
 }
 </style>

assets/__snapshots__/App.spec.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<App /> renders correctly 1`] = `
+<div
+  class="columns is-marginless"
+>
+  <side-menu-stub />
+   
+  <div
+    class="column is-offset-3-tablet is-offset-2-widescreen is-9-tablet is-10-widescreen is-paddingless"
+  >
+    <splitpanes-stub
+      dblclicksplitter="true"
+      pushotherpanes="true"
+    >
+      <pane-stub
+        maxsize="100"
+        minsize="0"
+      >
+        <router-view-stub />
+      </pane-stub>
+       
+    </splitpanes-stub>
+  </div>
+</div>
+`;

assets/auto-imports.d.ts

@@ -1,762 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
-// Generated by unplugin-auto-import
-// biome-ignore lint: disable
-export {}
-declare global {
-  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']
-  const automaticRedirect: typeof import('./stores/settings')['automaticRedirect']
-  const collapseNav: typeof import('./stores/settings')['collapseNav']
-  const compact: typeof import('./stores/settings')['compact']
-  const computed: typeof import('vue')['computed']
-  const computedAsync: typeof import('@vueuse/core')['computedAsync']
-  const computedEager: typeof import('@vueuse/core')['computedEager']
-  const computedInject: typeof import('@vueuse/core')['computedInject']
-  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
-  const config: typeof import('./stores/config')['default']
-  const 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']
-  const createPinia: typeof import('pinia')['createPinia']
-  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
-  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
-  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
-  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
-  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
-  const customRef: typeof import('vue')['customRef']
-  const dateLocale: typeof import('./stores/settings')['dateLocale']
-  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
-  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  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']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const getDeep: typeof import('./utils/index')['getDeep']
-  const globalShowPopup: typeof import('./composable/popup')['globalShowPopup']
-  const h: typeof import('vue')['h']
-  const hashCode: typeof import('./utils/index')['hashCode']
-  const hourStyle: typeof import('./stores/settings')['hourStyle']
-  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
-  const inject: typeof import('vue')['inject']
-  const injectLocal: typeof import('@vueuse/core')['injectLocal']
-  const isDefined: typeof import('@vueuse/core')['isDefined']
-  const isMobile: typeof import('./composable/media')['isMobile']
-  const isObject: typeof import('./utils/index')['isObject']
-  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const lightTheme: typeof import('./stores/settings')['lightTheme']
-  const locale: typeof import('./stores/settings')['locale']
-  const loggingContextKey: typeof import('./composable/logContext')['loggingContextKey']
-  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
-  const mapActions: typeof import('pinia')['mapActions']
-  const mapGetters: typeof import('pinia')['mapGetters']
-  const mapState: typeof import('pinia')['mapState']
-  const mapStores: typeof import('pinia')['mapStores']
-  const mapWritableState: typeof import('pinia')['mapWritableState']
-  const markRaw: typeof import('vue')['markRaw']
-  const menuWidth: typeof import('./stores/settings')['menuWidth']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onElementRemoval: typeof import('@vueuse/core')['onElementRemoval']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
-  const onLongPress: typeof import('@vueuse/core')['onLongPress']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  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 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']
-  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
-  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
-  const reactivePick: typeof import('@vueuse/core')['reactivePick']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
-  const refDebounced: typeof import('@vueuse/core')['refDebounced']
-  const refDefault: typeof import('@vueuse/core')['refDefault']
-  const refThrottled: typeof import('@vueuse/core')['refThrottled']
-  const refWithControl: typeof import('@vueuse/core')['refWithControl']
-  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']
-  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
-  const setTitle: typeof import('./composable/title')['setTitle']
-  const settings: typeof import('./stores/settings')['settings']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const showAllContainers: typeof import('./stores/settings')['showAllContainers']
-  const showStd: typeof import('./stores/settings')['showStd']
-  const showTimestamp: typeof import('./stores/settings')['showTimestamp']
-  const size: typeof import('./stores/settings')['size']
-  const smallerScrollbars: typeof import('./stores/settings')['smallerScrollbars']
-  const softWrap: typeof import('./stores/settings')['softWrap']
-  const storeToRefs: typeof import('pinia')['storeToRefs']
-  const stripVersion: typeof import('./utils/index')['stripVersion']
-  const syncRef: typeof import('@vueuse/core')['syncRef']
-  const syncRefs: typeof import('@vueuse/core')['syncRefs']
-  const templateRef: typeof import('@vueuse/core')['templateRef']
-  const throttledRef: typeof import('@vueuse/core')['throttledRef']
-  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
-  const toRaw: typeof import('vue')['toRaw']
-  const toReactive: typeof import('@vueuse/core')['toReactive']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const toValue: typeof import('vue')['toValue']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
-  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
-  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
-  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
-  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
-  const unref: typeof import('vue')['unref']
-  const unrefElement: typeof import('@vueuse/core')['unrefElement']
-  const until: typeof import('@vueuse/core')['until']
-  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
-  const useAnimate: typeof import('@vueuse/core')['useAnimate']
-  const useAnnouncements: typeof import('./stores/announcements')['useAnnouncements']
-  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
-  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
-  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
-  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
-  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
-  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
-  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
-  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
-  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
-  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
-  const useArraySome: typeof import('@vueuse/core')['useArraySome']
-  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
-  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
-  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useBase64: typeof import('@vueuse/core')['useBase64']
-  const useBattery: typeof import('@vueuse/core')['useBattery']
-  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
-  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
-  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
-  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
-  const useCached: typeof import('@vueuse/core')['useCached']
-  const useClipboard: typeof import('@vueuse/core')['useClipboard']
-  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
-  const useCloned: typeof import('@vueuse/core')['useCloned']
-  const useColorMode: typeof import('@vueuse/core')['useColorMode']
-  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
-  const useContainerActions: typeof import('./composable/containerActions')['useContainerActions']
-  const useContainerStore: typeof import('./stores/container')['useContainerStore']
-  const useContainerStream: typeof import('./composable/eventStreams')['useContainerStream']
-  const useCountdown: typeof import('@vueuse/core')['useCountdown']
-  const useCounter: typeof import('@vueuse/core')['useCounter']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVar: typeof import('@vueuse/core')['useCssVar']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
-  const useCycleList: typeof import('@vueuse/core')['useCycleList']
-  const useDark: typeof import('@vueuse/core')['useDark']
-  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
-  const useDebounce: typeof import('@vueuse/core')['useDebounce']
-  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
-  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
-  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
-  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
-  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
-  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
-  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']
-  const useElementSize: typeof import('@vueuse/core')['useElementSize']
-  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
-  const useEventBus: typeof import('@vueuse/core')['useEventBus']
-  const useEventListener: typeof import('@vueuse/core')['useEventListener']
-  const useEventSource: typeof import('@vueuse/core')['useEventSource']
-  const useExponentialMovingAverage: typeof import('./utils/index')['useExponentialMovingAverage']
-  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
-  const useFavicon: typeof import('@vueuse/core')['useFavicon']
-  const useFetch: typeof import('@vueuse/core')['useFetch']
-  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
-  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
-  const useFocus: typeof import('@vueuse/core')['useFocus']
-  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
-  const useFps: typeof import('@vueuse/core')['useFps']
-  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
-  const useGamepad: typeof import('@vueuse/core')['useGamepad']
-  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
-  const useGroupedStream: typeof import('./composable/eventStreams')['useGroupedStream']
-  const useHead: typeof import('@vueuse/head')['useHead']
-  const useHostStream: typeof import('./composable/eventStreams')['useHostStream']
-  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']
-  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
-  const useInterval: typeof import('@vueuse/core')['useInterval']
-  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
-  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
-  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
-  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
-  const useLoggingContext: typeof import('./composable/logContext')['useLoggingContext']
-  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
-  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
-  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
-  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
-  const useMemoize: typeof import('@vueuse/core')['useMemoize']
-  const useMemory: typeof import('@vueuse/core')['useMemory']
-  const 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']
-  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
-  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
-  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
-  const useNetwork: typeof import('@vueuse/core')['useNetwork']
-  const useNow: typeof import('@vueuse/core')['useNow']
-  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
-  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
-  const useOnline: typeof import('@vueuse/core')['useOnline']
-  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
-  const useParallax: typeof import('@vueuse/core')['useParallax']
-  const useParentElement: typeof import('@vueuse/core')['useParentElement']
-  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
-  const usePermission: typeof import('@vueuse/core')['usePermission']
-  const usePinnedLogsStore: typeof import('./stores/pinned')['usePinnedLogsStore']
-  const usePointer: typeof import('@vueuse/core')['usePointer']
-  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
-  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
-  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
-  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
-  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
-  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
-  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
-  const usePreferredReducedTransparency: typeof import('@vueuse/core')['usePreferredReducedTransparency']
-  const usePrevious: typeof import('@vueuse/core')['usePrevious']
-  const useProfileStorage: typeof import('./composable/profileStorage')['useProfileStorage']
-  const useRafFn: typeof import('@vueuse/core')['useRafFn']
-  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
-  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
-  const useRoute: typeof import('vue-router')['useRoute']
-  const useRouter: typeof import('vue-router')['useRouter']
-  const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
-  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
-  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']
-  const useServiceStream: typeof import('./composable/eventStreams')['useServiceStream']
-  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
-  const useShare: typeof import('@vueuse/core')['useShare']
-  const useSimpleRefHistory: typeof import('./utils/index')['useSimpleRefHistory']
-  const useSlots: typeof import('vue')['useSlots']
-  const useSorted: typeof import('@vueuse/core')['useSorted']
-  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
-  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
-  const useStackStream: typeof import('./composable/eventStreams')['useStackStream']
-  const useStepper: typeof import('@vueuse/core')['useStepper']
-  const useStorage: typeof import('@vueuse/core')['useStorage']
-  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
-  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
-  const 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']
-  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
-  const useThrottle: typeof import('@vueuse/core')['useThrottle']
-  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
-  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
-  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
-  const useTimeout: typeof import('@vueuse/core')['useTimeout']
-  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
-  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
-  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
-  const useTitle: typeof import('@vueuse/core')['useTitle']
-  const useToNumber: typeof import('@vueuse/core')['useToNumber']
-  const useToString: typeof import('@vueuse/core')['useToString']
-  const useToast: typeof import('./composable/toast')['useToast']
-  const useToggle: typeof import('@vueuse/core')['useToggle']
-  const useTransition: typeof import('@vueuse/core')['useTransition']
-  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
-  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
-  const useVModel: typeof import('@vueuse/core')['useVModel']
-  const useVModels: typeof import('@vueuse/core')['useVModels']
-  const useVibrate: typeof import('@vueuse/core')['useVibrate']
-  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
-  const useVisibleFilter: typeof import('./composable/visible')['useVisibleFilter']
-  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
-  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
-  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
-  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
-  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
-  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
-  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
-  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
-  const watch: typeof import('vue')['watch']
-  const watchArray: typeof import('@vueuse/core')['watchArray']
-  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
-  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
-  const watchDeep: typeof import('@vueuse/core')['watchDeep']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
-  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
-  const watchOnce: typeof import('@vueuse/core')['watchOnce']
-  const watchPausable: typeof import('@vueuse/core')['watchPausable']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
-  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
-  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
-  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
-  const whenever: typeof import('@vueuse/core')['whenever']
-  const withBase: typeof import('./stores/config')['withBase']
-}
-// for type re-export
-declare global {
-  // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
-  import('vue')
-  // @ts-ignore
-  export type { DrawerWidth } from './composable/drawer'
-  import('./composable/drawer')
-  // @ts-ignore
-  export type { LogStreamSource } from './composable/eventStreams'
-  import('./composable/eventStreams')
-  // @ts-ignore
-  export type { Config, Profile } from './stores/config'
-  import('./stores/config')
-  // @ts-ignore
-  export type { Host } from './stores/hosts'
-  import('./stores/hosts')
-  // @ts-ignore
-  export type { Settings } from './stores/settings'
-  import('./stores/settings')
-}
-
-// for vue template auto import
-import { UnwrapRef } from 'vue'
-declare module 'vue' {
-  interface GlobalComponents {}
-  interface ComponentCustomProperties {
-    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']>
-    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 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']>
-    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 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']>
-    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 onElementRemoval: UnwrapRef<typeof import('@vueuse/core')['onElementRemoval']>
-    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 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']>
-    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 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']>
-    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 useAnnouncements: UnwrapRef<typeof import('./stores/announcements')['useAnnouncements']>
-    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
-    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
-    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
-    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 useCountdown: UnwrapRef<typeof import('@vueuse/core')['useCountdown']>
-    readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
-    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
-    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
-    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 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']>
-    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 useHostStream: UnwrapRef<typeof import('./composable/eventStreams')['useHostStream']>
-    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']>
-    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 useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
-    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 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']>
-    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 usePreferredReducedTransparency: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedTransparency']>
-    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 useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
-    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
-    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
-    readonly useSSRWidth: UnwrapRef<typeof import('@vueuse/core')['useSSRWidth']>
-    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 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']>
-    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 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']>
-    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']>
-  }
-}

assets/components.d.ts

@@ -1,130 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    Announcements: typeof import('./components/Announcements.vue')['default']
-    'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
-    'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default']
-    'Carbon:copyFile': typeof import('~icons/carbon/copy-file')['default']
-    'Carbon:information': typeof import('~icons/carbon/information')['default']
-    'Carbon:logoKubernetes': typeof import('~icons/carbon/logo-kubernetes')['default']
-    'Carbon:macShift': typeof import('~icons/carbon/mac-shift')['default']
-    'Carbon:play': typeof import('~icons/carbon/play')['default']
-    'Carbon:restart': typeof import('~icons/carbon/restart')['default']
-    'Carbon:star': typeof import('~icons/carbon/star')['default']
-    'Carbon:starFilled': typeof import('~icons/carbon/star-filled')['default']
-    'Carbon:stopFilledAlt': typeof import('~icons/carbon/stop-filled-alt')['default']
-    'Carbon:warning': typeof import('~icons/carbon/warning')['default']
-    Carousel: typeof import('./components/common/Carousel.vue')['default']
-    CarouselItem: typeof import('./components/common/CarouselItem.vue')['default']
-    'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default']
-    'Cil:circle': typeof import('~icons/cil/circle')['default']
-    'Cil:columns': typeof import('~icons/cil/columns')['default']
-    'Cil:xCircle': typeof import('~icons/cil/x-circle')['default']
-    ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
-    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']
-    ContainerPopup: typeof import('./components/ContainerPopup.vue')['default']
-    ContainerTable: typeof import('./components/ContainerTable.vue')['default']
-    ContainerTitle: typeof import('./components/ContainerViewer/ContainerTitle.vue')['default']
-    DateTime: typeof import('./components/common/DateTime.vue')['default']
-    DistanceTime: typeof import('./components/common/DistanceTime.vue')['default']
-    Dropdown: typeof import('./components/common/Dropdown.vue')['default']
-    DropdownMenu: typeof import('./components/common/DropdownMenu.vue')['default']
-    EventSource: typeof import('./components/LogViewer/EventSource.vue')['default']
-    FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
-    GroupedLog: typeof import('./components/GroupedViewer/GroupedLog.vue')['default']
-    GroupMenu: typeof import('./components/GroupMenu.vue')['default']
-    HostIcon: typeof import('./components/common/HostIcon.vue')['default']
-    HostList: typeof import('./components/HostList.vue')['default']
-    HostLog: typeof import('./components/HostViewer/HostLog.vue')['default']
-    HostMenu: typeof import('./components/HostMenu.vue')['default']
-    'Ic:sharpKeyboardReturn': typeof import('~icons/ic/sharp-keyboard-return')['default']
-    IndeterminateBar: typeof import('./components/common/IndeterminateBar.vue')['default']
-    InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
-    KeyShortcut: typeof import('./components/common/KeyShortcut.vue')['default']
-    LabeledInput: typeof import('./components/common/LabeledInput.vue')['default']
-    Links: typeof import('./components/Links.vue')['default']
-    LogAnalytics: typeof import('./components/LogViewer/LogAnalytics.vue')['default']
-    LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
-    LogDetails: typeof import('./components/LogViewer/LogDetails.vue')['default']
-    LogItem: typeof import('./components/LogViewer/LogItem.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']
-    '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']
-    'Mdi:chevronDoubleDown': typeof import('~icons/mdi/chevron-double-down')['default']
-    'Mdi:chevronLeft': typeof import('~icons/mdi/chevron-left')['default']
-    'Mdi:chevronRight': typeof import('~icons/mdi/chevron-right')['default']
-    'Mdi:close': typeof import('~icons/mdi/close')['default']
-    'Mdi:cog': typeof import('~icons/mdi/cog')['default']
-    'Mdi: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']
-    'Octicon:download24': typeof import('~icons/octicon/download24')['default']
-    'Octicon:trash24': typeof import('~icons/octicon/trash24')['default']
-    PageWithLinks: typeof import('./components/PageWithLinks.vue')['default']
-    'Ph:arrowsMerge': typeof import('~icons/ph/arrows-merge')['default']
-    'Ph:boundingBoxFill': typeof import('~icons/ph/bounding-box-fill')['default']
-    'Ph:circlesFour': typeof import('~icons/ph/circles-four')['default']
-    'Ph:command': typeof import('~icons/ph/command')['default']
-    'Ph:computerTower': typeof import('~icons/ph/computer-tower')['default']
-    'Ph:controlBold': typeof import('~icons/ph/control-bold')['default']
-    'Ph:cpu': typeof import('~icons/ph/cpu')['default']
-    'Ph:dotsThreeVerticalBold': typeof import('~icons/ph/dots-three-vertical-bold')['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']
-    Popup: typeof import('./components/Popup.vue')['default']
-    RandomColorTag: typeof import('./components/LogViewer/RandomColorTag.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    ScrollableView: typeof import('./components/ScrollableView.vue')['default']
-    ScrollProgress: typeof import('./components/ScrollProgress.vue')['default']
-    Search: typeof import('./components/Search.vue')['default']
-    ServiceLog: typeof import('./components/ServiceViewer/ServiceLog.vue')['default']
-    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']
-    SwarmMenu: typeof import('./components/SwarmMenu.vue')['default']
-    Tag: typeof import('./components/common/Tag.vue')['default']
-    TimedButton: typeof import('./components/common/TimedButton.vue')['default']
-    ToastModal: typeof import('./components/common/ToastModal.vue')['default']
-    Toggle: typeof import('./components/common/Toggle.vue')['default']
-    ViewerWithSource: typeof import('./components/LogViewer/ViewerWithSource.vue')['default']
-    ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
-  }
-}

assets/components/Announcements.vue

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

assets/components/ContainerPopup.vue

@@ -1,34 +0,0 @@
-<template>
-  <div>
-    <span class="font-light capitalize"> STATE </span>
-    <span class="font-semibold uppercase"> {{ container.state }} </span>
-  </div>
-  <div v-if="container.startedAt.getFullYear() > 0">
-    <span class="font-light capitalize"> STARTED </span>
-    <span class="font-semibold">
-      <DistanceTime :date="container.startedAt" strict />
-    </span>
-  </div>
-  <div v-if="container.state != 'running' && container.finishedAt.getFullYear() > 0">
-    <span class="font-light capitalize"> FINISHED </span>
-    <span class="font-semibold">
-      <DistanceTime :date="container.finishedAt" strict />
-    </span>
-  </div>
-  <div v-if="container.state == 'running'">
-    <span class="font-light capitalize"> Load </span>
-    <span class="font-semibold"> {{ container.stat.cpu.toFixed(2) }}% </span>
-  </div>
-  <div v-if="container.state == 'running'">
-    <span class="font-light capitalize"> MEM </span>
-    <span class="font-semibold"> {{ formatBytes(container.stat.memoryUsage) }} </span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Container } from "@/models/Container";
-
-const { container } = defineProps<{
-  container: Container;
-}>();
-</script>

assets/components/ContainerTable.vue

@@ -1,231 +0,0 @@
-!
-<template>
-  <div class="flex flex-row">
-    <div v-if="Object.keys(hosts).length > 1" class="flex-1">
-      <div role="tablist" class="tabs-boxed tabs block" v-if="Object.keys(hosts).length < 4">
-        <input
-          type="radio"
-          name="host"
-          role="tab"
-          class="tab rounded-sm!"
-          aria-label="Show All"
-          v-model="selectedHost"
-          :value="null"
-        />
-        <input
-          type="radio"
-          name="host"
-          role="tab"
-          class="tab rounded-sm!"
-          :aria-label="host.name"
-          v-for="host in hosts"
-          :value="host.id"
-          :key="host.id"
-          v-model="selectedHost"
-        />
-      </div>
-
-      <DropdownMenu
-        class="btn-sm"
-        v-model="selectedHost"
-        :options="[
-          { label: 'Show All', value: null },
-          ...Object.values(hosts).map((host) => ({ label: host.name, value: host.id })),
-        ]"
-        v-else
-      />
-    </div>
-    <div class="flex-1 text-right" v-show="containers.length > pageSizes[0]">
-      {{ $t("label.per-page") }}
-
-      <DropdownMenu
-        class="dropdown-left btn-xs md:btn-sm"
-        v-model="perPage"
-        :options="pageSizes.map((i) => ({ label: i.toLocaleString(), value: i }))"
-      />
-    </div>
-  </div>
-
-  <table class="table-lg bg-base-200 table">
-    <thead>
-      <tr :data-direction="direction > 0 ? 'asc' : 'desc'">
-        <th
-          v-for="(value, key) in fields"
-          :key="key"
-          @click.prevent="sort(key)"
-          :class="{ 'selected-sort': key === sortField }"
-          v-show="isVisible(key)"
-        >
-          <a class="inline-flex cursor-pointer gap-2 text-sm uppercase">
-            <span>{{ $t(value.label) }}</span>
-            <span class="h-4" data-icon>
-              <mdi:arrow-up />
-            </span>
-          </a>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="container in paginated" :key="container.id">
-        <td v-if="isVisible('name')">
-          <router-link :to="{ name: '/container/[id]', params: { id: container.id } }" :title="container.name">
-            {{ container.name }}
-          </router-link>
-        </td>
-        <td v-if="isVisible('host')">{{ container.hostLabel }}</td>
-        <td v-if="isVisible('state')">{{ container.state }}</td>
-        <td v-if="isVisible('created')">
-          <distance-time :date="container.created" strict :suffix="false"></distance-time>
-        </td>
-        <td v-if="isVisible('cpu')">
-          <div class="flex flex-row items-center gap-1">
-            <progress
-              class="progress progress-primary"
-              :value="Math.min(container.movingAverage.cpu, 100)"
-              :max="100"
-            ></progress>
-            <span class="text-sm">{{ container.movingAverage.cpu.toFixed(0) }}%</span>
-          </div>
-        </td>
-        <td v-if="isVisible('mem')">
-          <div class="flex flex-row items-center gap-1">
-            <progress class="progress progress-primary" :value="container.movingAverage.memory" max="100"></progress>
-            <span class="text-sm">{{ container.movingAverage.memory.toFixed(0) }}%</span>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <div class="p-4 text-center">
-    <nav class="join" v-if="isPaginated">
-      <input
-        class="btn btn-square join-item"
-        type="radio"
-        v-model="currentPage"
-        :aria-label="`${i}`"
-        :value="i"
-        v-for="i in totalPages"
-      />
-    </nav>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Container } from "@/models/Container";
-import { toRefs } from "@vueuse/core";
-
-const { hosts } = useHosts();
-const selectedHost = ref(null);
-
-const fields = {
-  name: {
-    label: "label.container-name",
-    sortFunc: (a: Container, b: Container) => a.name.localeCompare(b.name) * direction.value,
-    mobileVisible: true,
-  },
-  host: {
-    label: "label.host",
-    sortFunc: (a: Container, b: Container) => a.hostLabel.localeCompare(b.hostLabel) * direction.value,
-    mobileVisible: false,
-  },
-  state: {
-    label: "label.status",
-    sortFunc: (a: Container, b: Container) => a.state.localeCompare(b.state) * direction.value,
-    mobileVisible: false,
-  },
-  created: {
-    label: "label.created",
-    sortFunc: (a: Container, b: Container) => (a.created.getTime() - b.created.getTime()) * direction.value,
-    mobileVisible: true,
-  },
-  cpu: {
-    label: "label.avg-cpu",
-    sortFunc: (a: Container, b: Container) => (a.movingAverage.cpu - b.movingAverage.cpu) * direction.value,
-    mobileVisible: false,
-  },
-  mem: {
-    label: "label.avg-mem",
-    sortFunc: (a: Container, b: Container) => (a.movingAverage.memory - b.movingAverage.memory) * direction.value,
-    mobileVisible: false,
-  },
-};
-
-const { containers } = defineProps<{
-  containers: Container[];
-}>();
-type keys = keyof typeof fields;
-
-const perPage = useStorage("DOZZLE_TABLE_PAGE_SIZE", 15);
-const pageSizes = [15, 30, 50, 100];
-
-const storage = useStorage<{ column: keys; direction: 1 | -1 }>("DOZZLE_TABLE_CONTAINERS_SORT", {
-  column: "created",
-  direction: -1,
-});
-const { column: sortField, direction } = toRefs(storage);
-const counter = useInterval(10000);
-const filteredContainers = computed(() =>
-  containers.filter((c) => selectedHost.value === null || c.host === selectedHost.value),
-);
-const sortedContainers = computedWithControl(
-  () => [filteredContainers.value.length, sortField.value, direction.value, counter.value],
-  () => filteredContainers.value.sort((a, b) => fields[sortField.value].sortFunc(a, b)),
-);
-
-const totalPages = computed(() => Math.ceil(sortedContainers.value.length / perPage.value));
-const isPaginated = computed(() => totalPages.value > 1);
-const currentPage = ref(1);
-watch(perPage, () => (currentPage.value = 1));
-const paginated = computed(() => {
-  const start = (currentPage.value - 1) * perPage.value;
-  const end = start + perPage.value;
-
-  return sortedContainers.value.slice(start, end);
-});
-
-function sort(field: keys) {
-  if (sortField.value === field) {
-    direction.value *= -1;
-  } else {
-    sortField.value = field;
-    direction.value = 1;
-  }
-}
-function isVisible(field: keys) {
-  return fields[field].mobileVisible || !isMobile.value;
-}
-</script>
-
-<style scoped>
-@import "@/main.css" reference;
-
-[data-icon] {
-  display: none;
-  transition: transform 0.2s ease-in-out;
-  [data-direction="desc"] & {
-    transform: rotate(180deg);
-  }
-}
-
-th {
-  @apply border-base-100 border-b-2;
-  &.selected-sort {
-    font-weight: bold;
-    @apply border-primary;
-    [data-icon] {
-      display: inline-block;
-    }
-  }
-}
-
-tbody td {
-  max-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-a {
-  @apply hover:text-primary;
-}
-</style>

assets/components/ContainerViewer/ContainerActionsToolbar.vue

@@ -1,207 +0,0 @@
-<template>
-  <div class="dropdown dropdown-end dropdown-hover">
-    <label tabindex="0" class="btn btn-ghost btn-sm w-10 gap-0.5 px-2">
-      <carbon:circle-solid class="text-red w-2.5" v-if="streamConfig.stderr" />
-      <carbon:circle-solid class="text-blue w-2.5" v-if="streamConfig.stdout" />
-    </label>
-    <ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 z-50 w-52 p-1 shadow-sm">
-      <li>
-        <a @click.prevent="clear()">
-          <octicon:trash-24 /> {{ $t("toolbar.clear") }}
-          <KeyShortcut char="k" :modifiers="['shift', 'meta']" />
-        </a>
-      </li>
-      <li>
-        <a :href="downloadUrl" download> <octicon:download-24 /> {{ $t("toolbar.download") }} </a>
-      </li>
-      <li>
-        <a @click.prevent="showSearch = true">
-          <mdi:magnify /> {{ $t("toolbar.search") }}
-          <KeyShortcut char="f" />
-        </a>
-      </li>
-      <li 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>
-        <details>
-          <summary>
-            <div class="flex w-4">
-              <carbon:circle-solid class="text-red w-2.5" v-if="streamConfig.stderr" />
-              <carbon:circle-solid class="text-blue w-2.5" 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>
-        <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) -->
-      <template v-if="enableActions">
-        <li class="line"></li>
-        <li>
-          <button
-            @click="stop()"
-            :disabled="actionStates.stop || actionStates.restart"
-            v-if="container.state == 'running'"
-          >
-            <carbon:stop-filled-alt /> {{ $t("toolbar.stop") }}
-          </button>
-
-          <button
-            @click="start()"
-            :disabled="actionStates.start || actionStates.restart"
-            v-if="container.state != 'running'"
-          >
-            <carbon:play /> {{ $t("toolbar.start") }}
-          </button>
-        </li>
-        <li>
-          <button @click="restart()" :disabled="disableRestart">
-            <carbon:restart
-              :class="{
-                'animate-spin': actionStates.restart,
-                'text-secondary': actionStates.restart,
-              }"
-            />
-            {{ $t("toolbar.restart") }}
-          </button>
-        </li>
-      </template>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Container } from "@/models/Container";
-import { allLevels } from "@/composable/logContext";
-import LogAnalytics from "../LogViewer/LogAnalytics.vue";
-
-const { showSearch } = useSearchFilter();
-const { enableActions } = config;
-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(toValue(streamConfig))
-    .filter(([, value]) => value)
-    .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {}),
-);
-
-const downloadUrl = computed(() =>
-  withBase(
-    `/api/containers/${container.host}~${container.id}/download?${new URLSearchParams(downloadParams.value).toString()}`,
-  ),
-);
-
-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>
-
-<style scoped>
-@import "@/main.css" reference;
-
-li.line {
-  @apply bg-base-content/20 h-px;
-}
-
-a {
-  @apply whitespace-nowrap;
-}
-
-.menu li ul {
-  margin-inline-start: 0;
-  &:before {
-    display: none;
-  }
-}
-</style>

assets/components/ContainerViewer/ContainerHealth.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="inline-flex size-4" :health="health" v-if="health" :title="health">
-    <cil:check-circle v-if="health == 'healthy'" />
-    <cil:x-circle v-else-if="health == 'unhealthy'" />
-    <cil:circle v-else />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ContainerHealth } from "@/types/Container";
-
-defineProps<{
-  health: ContainerHealth | undefined;
-}>();
-</script>
-
-<style scoped>
-@import "@/main.css" reference;
-[health="unhealthy"] {
-  @apply text-red;
-}
-
-[health="healthy"] {
-  @apply text-green;
-}
-</style>

assets/components/ContainerViewer/ContainerLog.vue

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

assets/components/ContainerViewer/ContainerTitle.vue

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

assets/components/FuzzySearchModal.spec.ts

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

assets/components/FuzzySearchModal.vue

@@ -1,221 +0,0 @@
-<template>
-  <div class="dropdown dropdown-open w-full">
-    <div class="input input-xl input-primary flex w-full items-center">
-      <mdi:magnify class="flex size-8" />
-      <input
-        tabindex="0"
-        class="input-ghost flex-1 px-1"
-        ref="input"
-        @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].item)"
-        v-model="query"
-        :placeholder="$t('placeholder.search-containers')"
-      />
-      <form method="dialog">
-        <button class="swap hover:swap-active">
-          <mdi:keyboard-esc class="swap-off" />
-          <mdi:close class="swap-on" />
-        </button>
-      </form>
-    </div>
-    <div
-      class="dropdown-content bg-base-100 relative! mt-2 max-h-[calc(100dvh-20rem)] w-full overflow-y-scroll rounded-md border-y-8 border-transparent px-2"
-      tabindex="0"
-      v-if="results.length"
-    >
-      <ul class="menu w-auto">
-        <li v-for="(result, index) in data" ref="listItems">
-          <a
-            class="grid auto-cols-max grid-cols-[min-content_auto] gap-2 py-4"
-            @click.prevent="selected(result.item)"
-            :class="index === selectedIndex ? 'menu-focus' : ''"
-          >
-            <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>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ContainerState } from "@/types/Container";
-import { useFuse } from "@vueuse/integrations/useFuse";
-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 { visibleContainers } = storeToRefs(containerStore);
-
-const swarmStore = useSwarmStore();
-const { stacks, services } = storeToRefs(swarmStore);
-
-onMounted(async () => {
-  const dialog = input.value?.closest("dialog");
-  if (dialog) {
-    const animations = dialog.getAnimations();
-    await Promise.all(animations.map((animation) => animation.finished));
-    input.value?.focus();
-  }
-});
-
-type Item = {
-  id: string;
-  created: Date;
-  name: string;
-  state?: ContainerState;
-  host?: string;
-  type: "container" | "service" | "stack";
-};
-
-const list = computed(() => {
-  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"],
-    includeScore: true,
-    useExtendedSearch: true,
-    threshold: 0.3,
-    includeMatches: true,
-  },
-});
-
-const data = computed(() => {
-  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 1;
-      }
-    } else {
-      return (a.score ?? 0) - (b.score ?? 0);
-    }
-  });
-});
-
-watch(query, (data) => {
-  if (data.length > 0) {
-    selectedIndex.value = 0;
-  }
-});
-
-watch(selectedIndex, () => {
-  listItems.value?.[selectedIndex.value].scrollIntoView({ block: "end" });
-});
-
-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 }) {
-  pinnedStore.pinContainer(container);
-  close();
-}
-
-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;
-    }
-    result.push(item.name.slice(lastIndex));
-    return result.join("");
-  } else {
-    return item.name;
-  }
-}
-</script>
-
-<style scoped>
-@import "@/main.css" reference;
-:deep(mark) {
-  @apply bg-transparent text-inherit underline underline-offset-2;
-}
-</style>

assets/components/GroupMenu.vue

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

assets/components/GroupedViewer/GroupedLog.vue

@@ -1,49 +0,0 @@
-<template>
-  <ScrollableView :scrollable="scrollable" v-if="group.containers.length && ready">
-    <template #header>
-      <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="@container flex flex-1 gap-1.5 truncate md:gap-2">
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ $t("label.container", group.containers.length) }}</div>
-          </div>
-        </div>
-        <MultiContainerStat class="ml-auto" :containers="group.containers" />
-        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
-      </div>
-    </template>
-    <template #default>
-      <ViewerWithSource
-        ref="viewer"
-        :stream-source="useGroupedStream"
-        :entity="group"
-        :visible-keys="new Map<string[], boolean>()"
-      />
-    </template>
-  </ScrollableView>
-</template>
-
-<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;
-  scrollable?: boolean;
-}>();
-
-const containerStore = useContainerStore();
-const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
-
-const { ready } = storeToRefs(containerStore);
-
-const swarmStore = useSwarmStore();
-const { customGroups } = storeToRefs(swarmStore);
-
-const group = computed(() => customGroups.value.find((g) => g.name === name) ?? new GroupedContainers("", []));
-
-provideLoggingContext(
-  toRef(() => group.value.containers),
-  { showContainerName: true, showHostname: false },
-);
-</script>

assets/components/HostList.vue

@@ -1,120 +0,0 @@
-<template>
-  <ul class="grid gap-4 md:grid-cols-[repeat(auto-fill,minmax(480px,1fr))]">
-    <li v-for="host in hosts" class="card bg-base-100">
-      <div class="card-body grid auto-cols-auto grid-flow-col justify-between gap-4">
-        <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-x-2 text-sm md:gap-3">
-            <li class="flex items-center gap-1"><ph:cpu /> {{ host.nCPU }} <span class="max-md:hidden">CPUs</span></li>
-            <li class="flex items-center gap-1">
-              <ph:memory /> {{ formatBytes(host.memTotal) }}
-              <span class="max-md:hidden">total</span>
-            </li>
-          </ul>
-          <ul class="flex flex-row flex-wrap gap-x-2 text-sm md:gap-3">
-            <li class="flex items-center gap-1">
-              <octicon:container-24 class="inline-block" />
-              {{ $t("label.container", hostContainers[host.id]?.length ?? 0) }}
-            </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]">
-          <div
-            class="radial-progress text-primary text-[0.85rem] transition-none [--size:4rem] [--thickness:0.25em] md:text-[0.9rem] md:[--size:5rem]"
-            :style="`--value: ${Math.floor((weightedStats[host.id].weighted.totalCPU / (host.nCPU * 100)) * 100)};`"
-            role="progressbar"
-          >
-            {{ weightedStats[host.id].weighted.totalCPU.toFixed(0) }}%
-          </div>
-          <div
-            class="radial-progress text-primary text-[0.85rem] transition-none [--size:4rem] [--thickness:0.25em] md:text-[0.9rem] md:[--size:5rem]"
-            :style="`--value: ${Math.floor((weightedStats[host.id].weighted.totalMem / host.memTotal) * 100)};`"
-            role="progressbar"
-          >
-            {{ formatBytes(weightedStats[host.id].weighted.totalMem, 1) }}
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
-</template>
-
-<script setup lang="ts">
-import { Container } from "@/models/Container";
-
-const containerStore = useContainerStore();
-const { containers } = storeToRefs(containerStore) as unknown as {
-  containers: Ref<Container[]>;
-};
-
-const runningContainers = computed(() => containers.value.filter((container) => container.state === "running"));
-
-const { hosts } = useHosts();
-const hostContainers = computed(() => {
-  const results: Record<string, Container[]> = {};
-  for (const container of runningContainers.value) {
-    if (!results[container.host]) {
-      results[container.host] = [];
-    }
-    results[container.host].push(container);
-  }
-  return results;
-});
-
-type TotalStat = {
-  totalCPU: number;
-  totalMem: number;
-};
-const weightedStats: Record<string, { mostRecent: TotalStat; weighted: TotalStat }> = {};
-const initWeightedStats = () => {
-  for (const [host, containers] of Object.entries(hostContainers.value)) {
-    const mostRecent = ref<TotalStat>({ totalCPU: 0, totalMem: 0 });
-    for (const container of containers) {
-      mostRecent.value.totalCPU += container.stat.cpu;
-      mostRecent.value.totalMem += container.stat.memoryUsage;
-    }
-    weightedStats[host] = reactive({ mostRecent, weighted: useExponentialMovingAverage(mostRecent) });
-  }
-};
-
-watchOnce(hostContainers, initWeightedStats);
-initWeightedStats();
-
-useIntervalFn(
-  () => {
-    for (const [host, containers] of Object.entries(hostContainers.value)) {
-      const stat = { totalCPU: 0, totalMem: 0 };
-      for (const container of containers) {
-        stat.totalCPU += container.stat.cpu;
-        stat.totalMem += container.stat.memoryUsage;
-      }
-      if (weightedStats[host]) {
-        // TODO fix this init
-        weightedStats[host].mostRecent = stat;
-      }
-    }
-  },
-  1000,
-  { immediate: true },
-);
-</script>

assets/components/HostMenu.vue

@@ -1,228 +0,0 @@
-<template>
-  <div class="flex items-center">
-    <div class="breadcrumbs flex-1">
-      <ul>
-        <li>
-          <a @click.prevent="setHost(null)" class="link-primary">{{ $t("label.hosts") }}</a>
-        </li>
-        <li v-if="sessionHost && hosts[sessionHost]" class="cursor-default">
-          <router-link
-            :to="{
-              name: '/host/[id]',
-              params: { id: hosts[sessionHost].id },
-            }"
-            class="btn btn-outline btn-primary btn-xs"
-            active-class="btn-active"
-            :title="$t('tooltip.merge-hosts')"
-          >
-            <ph:arrows-merge />
-            {{ hosts[sessionHost].name }}
-          </router-link>
-        </li>
-      </ul>
-    </div>
-    <div class="flex-none">
-      <div class="dropdown dropdown-end dropdown-hover">
-        <label tabindex="0" class="btn btn-square btn-ghost btn-sm">
-          <ph:dots-three-vertical-bold />
-        </label>
-        <ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 z-50 w-52 p-1 shadow-sm">
-          <li>
-            <a class="text-sm capitalize" @click="toggleShowAllContainers()">
-              <mdi:check class="w-4" v-if="showAllContainers" />
-              <div v-else class="w-4"></div>
-
-              Show all containers
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-  <SlideTransition :slide-right="!!sessionHost">
-    <template #left>
-      <ul class="menu p-0">
-        <li v-for="host in hosts" :key="host.id">
-          <a @click.prevent="setHost(host.id)" :class="{ 'text-base-content/50 pointer-events-none': !host.available }">
-            <HostIcon :type="host.type" />
-            {{ host.name }}
-            <span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
-          </a>
-        </li>
-      </ul>
-    </template>
-    <template #right>
-      <ul class="containers menu w-full p-0 [&_li.menu-title]:px-0">
-        <li v-for="{ label, containers, icon } in menuItems" :key="label">
-          <details :open="!collapsedGroups.has(label)" @toggle="updateCollapsedGroups($event, label)">
-            <summary class="text-base-content/80 font-light">
-              <component :is="icon" />
-              {{ label.startsWith("label.") ? $t(label) : label }}
-
-              <router-link
-                :to="{
-                  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="$t('tooltip.merge-containers')"
-              >
-                <ph:arrows-merge />
-              </router-link>
-            </summary>
-            <ul>
-              <li v-for="item in containers" :class="item.state" :key="item.id">
-                <Popup>
-                  <router-link
-                    :to="{ name: '/container/[id]', params: { id: item.id } }"
-                    active-class="menu-active"
-                    @click.alt.stop.prevent="pinnedStore.pinContainer(item)"
-                    :title="item.name"
-                    class="group auto-cols-[content_max_auto_max-content_max-content]"
-                  >
-                    <div
-                      class="status data-[state=exited]:status-error data-[state=running]:status-success"
-                      :data-state="item.state"
-                    ></div>
-                    <div class="truncate">
-                      {{ item.name }}
-                    </div>
-                    <ContainerHealth :health="item.health" />
-                    <span
-                      class="hover:text-secondary hidden group-hover:inline-block"
-                      @click.stop.prevent="pinnedStore.pinContainer(item)"
-                      v-show="!pinnedStore.isPinned(item)"
-                      :title="$t('tooltip.pin-column')"
-                    >
-                      <cil:columns />
-                    </span>
-                  </router-link>
-                  <template #content>
-                    <ContainerPopup :container="item" />
-                  </template>
-                </Popup>
-              </li>
-            </ul>
-          </details>
-        </li>
-      </ul>
-    </template>
-  </SlideTransition>
-</template>
-
-<script lang="ts" setup>
-import { Container } from "@/models/Container";
-import { sessionHost } from "@/composable/storage";
-import { showAllContainers } from "@/stores/settings";
-
-// @ts-ignore
-import Pin from "~icons/ph/map-pin-simple";
-// @ts-ignore
-import Stack from "~icons/ph/stack";
-// @ts-ignore
-import Containers from "~icons/octicon/container-24";
-
-const containerStore = useContainerStore();
-const { visibleContainers } = storeToRefs(containerStore);
-
-const pinnedStore = usePinnedLogsStore();
-
-const { hosts } = useHosts();
-
-const setHost = (host: string | null) => (sessionHost.value = host);
-
-const collapsedGroups = useProfileStorage("collapsedGroups", new Set<string>());
-const updateCollapsedGroups = (event: Event, label: string) => {
-  const details = event.target as HTMLDetailsElement;
-  if (details.open) {
-    collapsedGroups.value.delete(label);
-  } else {
-    collapsedGroups.value.add(label);
-  }
-};
-
-const debouncedPinnedContainers = debouncedRef(pinnedContainers, 200);
-const sortedContainers = computed(() =>
-  visibleContainers.value.filter((c) => c.host === sessionHost.value).sort(sorter),
-);
-
-const sorter = (a: Container, b: Container) => {
-  if (a.state === "running" && b.state !== "running") {
-    return -1;
-  } else if (a.state !== "running" && b.state === "running") {
-    return 1;
-  } else {
-    return a.name.localeCompare(b.name);
-  }
-};
-
-const menuItems = computed(() => {
-  const namespaced: Record<string, Container[]> = {};
-  const pinned = [];
-  const singular = [];
-
-  for (const item of sortedContainers.value) {
-    const namespace = item.namespace;
-    if (debouncedPinnedContainers.value.has(item.name)) {
-      pinned.push(item);
-    } else if (namespace) {
-      namespaced[namespace] ||= [];
-      namespaced[namespace].push(item);
-    } else {
-      singular.push(item);
-    }
-  }
-
-  const items = [];
-  if (pinned.length) {
-    items.push({ label: "label.pinned", containers: pinned, icon: Pin });
-  }
-  for (const [label, containers] of Object.entries(namespaced).sort(([a], [b]) => a.localeCompare(b))) {
-    if (containers.length > 1) {
-      items.push({ label, containers, icon: Stack });
-    } else {
-      singular.push(containers[0]);
-    }
-  }
-
-  singular.sort(sorter);
-
-  if (singular.length) {
-    items.push({
-      label: showAllContainers.value ? "label.all-containers" : "label.running-containers",
-      containers: singular,
-      icon: Containers,
-    });
-  }
-
-  return items;
-});
-
-const route = useRoute("/container/[id]");
-
-watchEffect(() => {
-  if (route.name === "/container/[id]") {
-    const container = containerStore.findContainerById(route.params.id);
-    if (container) {
-      setHost(container.host);
-    }
-  }
-});
-
-const toggleShowAllContainers = () => (showAllContainers.value = !showAllContainers.value);
-</script>
-<style scoped>
-.menu {
-  @apply text-[0.95rem];
-}
-
-li.exited {
-  @apply opacity-75;
-}
-
-li.deleted {
-  @apply hidden;
-}
-</style>

assets/components/HostViewer/HostLog.vue

@@ -1,43 +0,0 @@
-<template>
-  <ScrollableView :scrollable="scrollable" v-if="host">
-    <template #header>
-      <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="flex flex-1 gap-1.5 truncate md:gap-2">
-          <ph:computer-tower />
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ host.name }}</div>
-          </div>
-          <Tag class="font-mono max-md:hidden" size="small">
-            {{ $t("label.container", containers.length) }}
-          </Tag>
-        </div>
-        <MultiContainerStat class="ml-auto" :containers="containers" />
-        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
-      </div>
-    </template>
-    <template #default>
-      <ViewerWithSource
-        ref="viewer"
-        :stream-source="useHostStream"
-        :entity="host"
-        :visible-keys="new Map<string[], boolean>()"
-      />
-    </template>
-  </ScrollableView>
-</template>
-
-<script lang="ts" setup>
-import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
-import { ComponentExposed } from "vue-component-type-helpers";
-const { id, scrollable = false } = defineProps<{
-  id: string;
-  scrollable?: boolean;
-}>();
-const store = useContainerStore();
-const { containersByHost } = storeToRefs(store);
-const { hosts } = useHosts();
-const host = computed(() => hosts.value[id]);
-const containers = computed(() => containersByHost.value?.[id]?.filter((c) => c.state === "running") ?? []);
-const viewer = useTemplateRef<ComponentExposed<typeof ViewerWithSource>>("viewer");
-provideLoggingContext(containers, { showContainerName: true, showHostname: false });
-</script>

assets/components/InfiniteLoader.vue

@@ -1,31 +0,0 @@
-<template>
-  <div ref="root" class="flex min-h-[1px] justify-center">
-    <span class="loading loading-bars loading-md text-primary mt-4" v-show="isLoading"></span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const { onLoadMore = () => Promise.resolve(), enabled } = defineProps<{
-  onLoadMore: () => Promise<void>;
-  enabled: boolean;
-}>();
-
-const isLoading = ref(false);
-const root = ref<HTMLElement>();
-
-const observer = new IntersectionObserver(async (entries) => {
-  if (entries[0].intersectionRatio <= 0) return;
-  if (onLoadMore && enabled) {
-    const scrollingParent = root.value?.closest("[data-scrolling]") || document.documentElement;
-    const previousHeight = scrollingParent.scrollHeight;
-    isLoading.value = true;
-    await onLoadMore();
-    isLoading.value = false;
-    await nextTick();
-    scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight;
-  }
-});
-
-onMounted(() => observer.observe(root.value!));
-onUnmounted(() => observer.disconnect());
-</script>

assets/components/Links.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="flex items-center justify-end gap-4">
-    <slot name="more-items"></slot>
-    <Announcements />
-
-    <router-link
-      :to="{ name: '/settings' }"
-      :aria-label="$t('title.settings')"
-      data-testid="settings"
-      class="btn btn-circle btn-sm"
-    >
-      <mdi:cog class="size-6" />
-    </router-link>
-
-    <dropdown class="dropdown-end" v-if="config.user">
-      <template #trigger>
-        <img
-          class="ring-base-content/60 size-6 max-w-none rounded-full p-px ring-1"
-          :src="withBase('/api/profile/avatar')"
-        />
-      </template>
-      <template #content>
-        <div class="p-2">
-          <div class="font-bold">
-            {{ config.user.name }}
-          </div>
-          <div class="text-sm font-light">
-            {{ config.user.email }}
-          </div>
-        </div>
-        <ul class="menu mt-4 p-0">
-          <li v-if="config.authProvider === 'simple'">
-            <button @click.prevent="logout()" class="text-primary p-2">{{ $t("button.logout") }}</button>
-          </li>
-        </ul>
-      </template>
-    </dropdown>
-  </div>
-</template>
-<script lang="ts" setup>
-async function logout() {
-  await fetch(withBase("/api/token"), {
-    method: "DELETE",
-  });
-
-  location.reload();
-}
-</script>

assets/components/LogEventSource.spec.js

@@ -0,0 +1,158 @@
+import EventSource from "eventsourcemock";
+import { sources } from "eventsourcemock";
+import { shallowMount, mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import MockDate from "mockdate";
+import LogEventSource from "./LogEventSource.vue";
+import LogViewer from "./LogViewer.vue";
+
+describe("<LogEventSource />", () => {
+  beforeEach(() => {
+    global.BASE_PATH = "";
+    global.EventSource = EventSource;
+    MockDate.set("6/12/2019", 0);
+    window.scrollTo = jest.fn();
+  });
+
+  afterEach(() => MockDate.reset());
+
+  function createLogEventSource(searchFilter = null) {
+    const localVue = createLocalVue();
+    localVue.use(Vuex);
+
+    localVue.component("log-event-source", LogEventSource);
+    localVue.component("log-viewer", LogViewer);
+
+    const state = { searchFilter };
+
+    const store = new Vuex.Store({
+      state
+    });
+
+    return mount(LogEventSource, {
+      localVue,
+      store,
+      scopedSlots: {
+        default: `
+        <log-viewer :messages="props.messages"></log-viewer>
+        `
+      },
+      propsData: { id: "abc" }
+    });
+  }
+
+  test("is a Vue instance", async () => {
+    const wrapper = shallowMount(LogEventSource);
+    expect(wrapper.isVueInstance()).toBeTruthy();
+  });
+
+  test("renders correctly", async () => {
+    const wrapper = createLogEventSource();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test("should connect to EventSource", async () => {
+    shallowMount(LogEventSource);
+    sources["/api/logs/stream?id=abc"].emitOpen();
+    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(1);
+  });
+
+  test("should close EventSource", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc"].emitOpen();
+    wrapper.destroy();
+    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(2);
+  });
+
+  test("should parse messages", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc"].emitOpen();
+    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
+    const [message, _] = wrapper.vm.messages;
+    const { key, ...messageWithoutKey } = message;
+
+    expect(key).toBeGreaterThanOrEqual(0);
+
+    expect(messageWithoutKey).toMatchInlineSnapshot(`
+      Object {
+        "date": 2019-06-12T10:55:42.459Z,
+        "message": " \\"This is a message.\\"",
+      }
+    `);
+  });
+
+  test("should pass messages to slot", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc"].emitOpen();
+    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
+    const [message, _] = wrapper.find(LogViewer).vm.messages;
+
+    const { key, ...messageWithoutKey } = message;
+
+    expect(key).toBeGreaterThanOrEqual(0);
+
+    expect(messageWithoutKey).toMatchInlineSnapshot(`
+      Object {
+        "date": 2019-06-12T10:55:42.459Z,
+        "message": " \\"This is a message.\\"",
+      }
+    `);
+  });
+
+  test("should render messages", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc"].emitOpen();
+    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
+
+    expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
+      <ul class="events">
+        <li><span class="date">today at 10:55 AM</span> <span class="text"> "This is a message."</span></li>
+      </ul>
+    `);
+  });
+
+  test("should render messages with color", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc"].emitOpen();
+    sources["/api/logs/stream?id=abc"].emitMessage({
+      data: `2019-06-12T10:55:42.459034602Z \x1b[30mblack\x1b[37mwhite`
+    });
+
+    expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
+      <ul class="events">
+        <li><span class="date">today at 10:55 AM</span> <span class="text"> <span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
+      </ul>
+    `);
+  });
+
+  test("should render messages with html entities", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc"].emitOpen();
+    sources["/api/logs/stream?id=abc"].emitMessage({
+      data: `2019-06-12T10:55:42.459034602Z <test>foo bar</test>`
+    });
+
+    expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
+      <ul class="events">
+        <li><span class="date">today at 10:55 AM</span> <span class="text"> &lt;test&gt;foo bar&lt;/test&gt;</span></li>
+      </ul>
+    `);
+  });
+
+  test("should render messages with filter", async () => {
+    const wrapper = createLogEventSource("test");
+    sources["/api/logs/stream?id=abc"].emitOpen();
+    sources["/api/logs/stream?id=abc"].emitMessage({
+      data: `2019-06-11T10:55:42.459034602Z Foo bar`
+    });
+    sources["/api/logs/stream?id=abc"].emitMessage({
+      data: `2019-06-12T10:55:42.459034602Z This is a test <hi></hi>`
+    });
+
+    expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
+      <ul class="events">
+        <li><span class="date">today at 10:55 AM</span> <span class="text"> This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
+      </ul>
+    `);
+  });
+});

assets/components/LogEventSource.vue

@@ -0,0 +1,55 @@
+<template lang="html">
+  <div>
+    <slot v-bind:messages="messages"></slot>
+  </div>
+</template>
+
+<script>
+let nextId = 0;
+function parseMessage(data) {
+  const date = new Date(data.substring(0, 30));
+  const message = data.substring(30);
+  const key = nextId++;
+  return {
+    key,
+    date,
+    message
+  };
+}
+
+export default {
+  props: ["id"],
+  name: "LogEventSource",
+  data() {
+    return {
+      messages: []
+    };
+  },
+  created() {
+    this.es = null;
+    this.loadLogs(this.id);
+  },
+  methods: {
+    loadLogs(id) {
+      if (this.es) {
+        this.es.close();
+        this.messages = [];
+        this.es = null;
+      }
+      this.es = new EventSource(`${BASE_PATH}/api/logs/stream?id=${this.id}`);
+      this.es.onmessage = e => this.messages.push(parseMessage(e.data));
+      this.es.onerror = function(e) {
+        console.log("EventSource failed." + e);
+      };
+      this.$once("hook:beforeDestroy", () => this.es.close());
+    }
+  },
+  watch: {
+    id(newValue, oldValue) {
+      if (oldValue !== newValue) {
+        this.loadLogs(newValue);
+      }
+    }
+  }
+};
+</script>

assets/components/LogViewer.vue

@@ -0,0 +1,94 @@
+<template lang="html">
+  <ul class="events">
+    <li v-for="item in filtered" :key="item.key">
+      <span class="date">{{ item.date | relativeTime }}</span>
+      <span class="text" v-html="colorize(item.message)"></span>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from "vuex";
+import { formatRelative } from "date-fns";
+import AnsiConvertor from "ansi-to-html";
+
+const ansiConvertor = new AnsiConvertor({ escapeXML: true });
+
+export default {
+  props: ["messages"],
+  name: "LogViewer",
+  components: {},
+  data() {
+    return {
+      showSearch: false
+    };
+  },
+  methods: {
+    colorize: function(value) {
+      return ansiConvertor
+        .toHtml(value)
+        .replace("&lt;mark&gt;", "<mark>")
+        .replace("&lt;/mark&gt;", "</mark>");
+    }
+  },
+  computed: {
+    ...mapState(["searchFilter"]),
+    filtered() {
+      const { searchFilter, messages } = this;
+      if (searchFilter) {
+        const isSmartCase = searchFilter === searchFilter.toLowerCase();
+        const regex = isSmartCase ? new RegExp(searchFilter, "i") : new RegExp(searchFilter);
+        return messages
+          .filter(d => d.message.match(regex))
+          .map(d => ({
+            ...d,
+            message: d.message.replace(regex, "<mark>$&</mark>")
+          }));
+      }
+      return messages;
+    }
+  },
+  filters: {
+    relativeTime(date) {
+      return formatRelative(date, new Date());
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.events {
+  padding: 10px;
+  font-family: "Roboto Mono", monaco, monospace;
+
+  & > li {
+    font-size: 13px;
+    line-height: 16px;
+    word-wrap: break-word;
+  }
+}
+
+.date {
+  background-color: #262626;
+  color: #258ccd;
+}
+
+.text {
+  white-space: pre-wrap;
+}
+
+>>> mark {
+  border-radius: 2px;
+  background-color: #ffdd57;
+  animation: pops 0.2s ease-out;
+  display: inline-block;
+}
+
+@keyframes pops {
+  0% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1.05);
+  }
+}
+</style>

assets/components/LogViewer/ComplexLogItem.vue

@@ -1,37 +0,0 @@
-<template>
-  <LogItem :logEntry @click="showDrawer(LogDetails, { entry: logEntry })" class="clickable">
-    <ul class="space-x-4">
-      <li v-for="(value, name) in validValues" :key="name" class="inline-flex">
-        <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="JSON.stringify(value)"> </span>
-        </template>
-        <span class="font-bold" v-html="stripAnsi(value.toString())" v-else></span>
-      </li>
-      <li class="text-light" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
-    </ul>
-  </LogItem>
-</template>
-<script lang="ts" setup>
-import stripAnsi from "strip-ansi";
-import { type ComplexLogEntry } from "@/models/LogEntry";
-import LogDetails from "./LogDetails.vue";
-
-const { logEntry } = defineProps<{
-  logEntry: ComplexLogEntry;
-  showContainerName?: boolean;
-}>();
-
-const validValues = computed(() => {
-  return Object.fromEntries(Object.entries(logEntry.message).filter(([_, value]) => value !== undefined));
-});
-
-const showDrawer = useDrawer();
-</script>
-
-<style scoped>
-@import "@/main.css" reference;
-.text-light {
-  @apply text-base-content/70;
-}
-</style>

assets/components/LogViewer/ContainerEventLogItem.vue

@@ -1,23 +0,0 @@
-<template>
-  <LogItem :logEntry>
-    <div class="whitespace-pre-wrap" :data-event="logEntry.event" v-html="logEntry.message"></div>
-  </LogItem>
-</template>
-<script lang="ts" setup>
-import { ContainerEventLogEntry } from "@/models/LogEntry";
-
-const { logEntry } = defineProps<{
-  logEntry: ContainerEventLogEntry;
-  showContainerName?: boolean;
-}>();
-</script>
-
-<style scoped>
-@import "@/main.css" reference;
-[data-event="container-stopped"] {
-  @apply text-red;
-}
-[data-event="container-started"] {
-  @apply text-green;
-}
-</style>

assets/components/LogViewer/EventSource.spec.ts

@@ -1,190 +0,0 @@
-import { createTestingPinia } from "@pinia/testing";
-import { mount } from "@vue/test-utils";
-import { useSearchFilter } from "@/composable/search";
-import { settings } from "@/stores/settings";
-// @ts-ignore
-import EventSource, { sources } from "eventsourcemock";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { computed, nextTick } from "vue";
-import { createI18n } from "vue-i18n";
-import { createRouter, createWebHistory } from "vue-router";
-import { 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,
-  default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
-  withBase: (path: string) => path,
-}));
-
-/**
- * @vitest-environment jsdom
- */
-describe("<ContainerEventSource />", () => {
-  const search = useSearchFilter();
-
-  beforeEach(() => {
-    global.EventSource = EventSource;
-    // @ts-ignore
-    window.scrollTo = vi.fn();
-    global.IntersectionObserver = vi.fn().mockImplementation(() => ({
-      observe: vi.fn(),
-      disconnect: vi.fn(),
-    }));
-    vi.useFakeTimers();
-    vi.setSystemTime(1560336942459);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    vi.useRealTimers();
-  });
-
-  function createLogEventSource(
-    {
-      searchFilter = "",
-      hourStyle = "auto",
-    }: { searchFilter?: string | undefined; hourStyle?: "auto" | "24" | "12" } = {
-      hourStyle: "auto",
-    },
-  ) {
-    settings.value.hourStyle = hourStyle;
-    search.searchQueryFilter.value = searchFilter;
-    if (searchFilter) {
-      search.showSearch.value = true;
-    }
-
-    const router = createRouter({
-      history: createWebHistory("/"),
-      routes: [
-        {
-          path: "/",
-          component: {
-            template: "Test from createLogEventSource",
-          },
-        },
-      ],
-    });
-
-    return mount(Component, {
-      global: {
-        plugins: [router, createTestingPinia({ createSpy: vi.fn }), createI18n({})],
-        components: {
-          LogViewer,
-        },
-        provide: {
-          [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"]),
-          },
-        },
-      },
-      slots: {
-        default: `
-        <template #scoped="params"><LogViewer :messages="params.messages" :show-container-name="false" :visible-keys="[]" /></template>
-        `,
-      },
-      props: {
-        streamSource: useContainerStream,
-        entity: new Container(
-          "abc",
-          new Date(), // created
-          new Date(), // started
-          new Date(), // finished
-          "image",
-          "name",
-          "command",
-          "localhost",
-          {},
-          "created",
-          [],
-        ),
-      },
-    });
-  }
-
-  const sourceUrl = "/api/hosts/localhost/containers/abc/logs/stream?stdout=1&stderr=1&levels=info";
-
-  test("renders loading correctly", async () => {
-    const wrapper = createLogEventSource();
-    expect(wrapper.find("ul.animate-pulse").exists()).toBe(true);
-  });
-
-  test("should connect to EventSource", async () => {
-    const wrapper = createLogEventSource();
-    sources[sourceUrl].emitOpen();
-    expect(sources[sourceUrl].readyState).toBe(1);
-    wrapper.unmount();
-  });
-
-  test("should close EventSource", async () => {
-    const wrapper = createLogEventSource();
-    sources[sourceUrl].emitOpen();
-    wrapper.unmount();
-    expect(sources[sourceUrl].readyState).toBe(2);
-  });
-
-  test("should parse messages", async () => {
-    const wrapper = createLogEventSource();
-    sources[sourceUrl].emitOpen();
-    sources[sourceUrl].emitMessage({
-      data: `{"ts":1560336942459, "m":"This is a message.", "id":1}`,
-    });
-
-    vi.runAllTimers();
-    await nextTick();
-
-    // @ts-ignore
-    const [message, _] = wrapper.vm.messages;
-    expect(message).toMatchSnapshot();
-  });
-
-  describe("render html correctly", () => {
-    test("should render messages", async () => {
-      const wrapper = createLogEventSource();
-      sources[sourceUrl].emitOpen();
-      sources[sourceUrl].emitMessage({
-        data: `{"ts":1560336942459, "m":"This is a message.", "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":"foo bar", "id":1}`,
-      });
-
-      vi.runAllTimers();
-      await nextTick();
-
-      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
-    });
-
-    test("should render dates with 24 hour style", async () => {
-      const wrapper = createLogEventSource({ hourStyle: "24" });
-      sources[sourceUrl].emitOpen();
-      sources[sourceUrl].emitMessage({
-        data: `{"ts":1560336942459, "m":"foo bar", "id":1}`,
-      });
-
-      vi.runAllTimers();
-      await nextTick();
-
-      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
-    });
-  });
-});

assets/components/LogViewer/EventSource.vue

@@ -1,55 +0,0 @@
-<template>
-  <InfiniteLoader :onLoadMore="fetchMore" :enabled="!loadingMore && messages.length > 10" />
-  <ul class="flex animate-pulse flex-col gap-4 p-4" v-if="loading || (noLogs && waitingForMoreLog)">
-    <div class="flex flex-row gap-2" v-for="size in sizes">
-      <div class="bg-base-content/50 h-3 w-40 shrink-0 rounded-full opacity-50"></div>
-      <div class="bg-base-content/50 h-3 rounded-full opacity-50" :class="size"></div>
-    </div>
-    <span class="sr-only">Loading...</span>
-  </ul>
-  <div v-else-if="noLogs && !waitingForMoreLog" class="p-4">Container has no logs yet</div>
-  <slot :messages="messages" v-else></slot>
-  <IndeterminateBar :color />
-</template>
-
-<script lang="ts" setup generic="T">
-import { LogStreamSource } from "@/composable/eventStreams";
-
-const { entity, streamSource } = $defineProps<{
-  streamSource: (t: Ref<T>) => LogStreamSource;
-  entity: T;
-}>();
-
-const { messages, loadOlderLogs, isLoadingMore, opened, loading, error, eventSourceURL } = streamSource($$(entity));
-const { loadingMore } = useLoggingContext();
-const color = computed(() => {
-  if (error.value) return "error";
-  if (loading.value) return "secondary";
-  if (opened.value) return "primary";
-  return "error";
-});
-
-const noLogs = computed(() => messages.value.length === 0);
-const waitingForMoreLog = refAutoReset(false, 3000);
-watchImmediate(loading, () => (waitingForMoreLog.value = true));
-
-defineExpose({
-  clear: () => (messages.value = []),
-});
-
-const fetchMore = async () => {
-  if (!isLoadingMore.value) {
-    loadingMore.value = true;
-    await loadOlderLogs();
-    loadingMore.value = false;
-  }
-};
-
-const shuffle = (items: any[]) => {
-  return items.sort(() => Math.random() - 0.5);
-};
-
-const sizes = computedWithControl(eventSourceURL, () =>
-  shuffle(["w-3/5", "w-2/3", "w-9/12", "w-1/2", "w-1/3", "w-3/4"]),
-);
-</script>

assets/components/LogViewer/LogAnalytics.vue

@@ -1,97 +0,0 @@
-<template>
-  <aside>
-    <header class="flex items-center gap-4">
-      <h1 class="text-2xl max-md:hidden">{{ 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 max-h-48 overflow-y-auto pr-2">
-            <span class="label-text-alt text-error" v-if="error">{{ error }}</span>
-            <span class="label-text-alt" v-else>
-              Total {{ results.numRows }} records
-              <template v-if="results.numRows > pageLimit"> . Showing first {{ page.numRows }}. </template>
-            </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 scoped></style>

assets/components/LogViewer/LogDate.vue

@@ -1,10 +0,0 @@
-<template>
-  <Tag size="small" class="items-start!">
-    <DateTime :date="date" class="text-blue whitespace-nowrap" />
-  </Tag>
-</template>
-<script lang="ts" setup>
-defineProps<{
-  date: Date;
-}>();
-</script>

assets/components/LogViewer/LogDetails.vue

@@ -1,198 +0,0 @@
-<template>
-  <header class="flex items-center gap-4">
-    <Tag :data-level="entry.level" class="text-white uppercase" v-if="entry.level">{{ entry.level }}</Tag>
-    <h1 class="text-lg max-md:hidden">
-      <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">
-        Raw JSON
-
-        <UseClipboard v-slot="{ copy, copied }" :source="JSON.stringify(entry.unfilteredMessage)">
-          <button class="swap outline-hidden" @click="copy()" :class="{ 'hover:swap-active': copied }">
-            <mdi:check class="swap-on" />
-            <mdi:content-copy class="swap-off" />
-          </button>
-        </UseClipboard>
-      </div>
-      <div class="bg-base-200 max-h-48 overflow-scroll rounded-sm border border-white/20 p-2">
-        <pre v-html="syntaxHighlight(entry.unfilteredMessage)"></pre>
-      </div>
-    </section>
-    <table class="table-pin-rows table 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="max-md: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 font-mono break-all">
-            {{ key.join(".") }}
-          </td>
-          <td class="truncate max-md:hidden">
-            <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 scoped>
-@import "@/main.css" reference;
-.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/LogItem.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
-    <LogStd :std="logEntry.std" class="shrink-0 select-none" v-if="showStd" />
-    <RandomColorTag class="shrink-0 select-none" :value="host.name" v-if="showHostname" />
-    <RandomColorTag class="shrink-0 select-none" :value="container.name" v-if="showContainerName" truncateRight />
-    <LogDate :date="logEntry.date" v-if="showTimestamp" class="shrink-0 select-none" />
-    <LogLevel
-      class="flex select-none"
-      :level="logEntry.level"
-      :position="logEntry instanceof SimpleLogEntry ? logEntry.position : undefined"
-    />
-    <slot />
-  </div>
-</template>
-<script lang="ts" setup>
-import { LogEntry, SimpleLogEntry } from "@/models/LogEntry";
-
-const { logEntry } = defineProps<{
-  logEntry: LogEntry<any>;
-}>();
-const { showHostname, showContainerName } = useLoggingContext();
-
-const { currentContainer } = useContainerStore();
-const { hosts } = useHosts();
-
-const container = currentContainer(toRef(() => logEntry.containerID));
-const host = computed(() => hosts.value[container.value.host]);
-</script>

assets/components/LogViewer/LogLevel.vue

@@ -1,56 +0,0 @@
-<template>
-  <div :data-level="level" :data-position="position" class="mt-1.5 size-2.5 flex-none rounded-lg"></div>
-</template>
-<script lang="ts" setup>
-import { Position } from "@/models/LogEntry";
-
-defineProps<{
-  level?: string;
-  position?: Position;
-}>();
-</script>
-
-<style scoped>
-@import "@/main.css" reference;
-[data-position="start"] {
-  border-radius: 0.5em 0.5em 0 0;
-  height: 70%;
-  margin-bottom: -0.4em;
-  margin-top: auto;
-  align-self: flex-end;
-}
-
-[data-position="middle"] {
-  border-radius: 0;
-  height: auto;
-  margin: -0.4em 0;
-  align-self: stretch;
-}
-
-[data-position="end"] {
-  border-radius: 0 0 0.5em 0.5em;
-  height: 70%;
-  margin-top: -0.4em;
-  align-self: flex-start;
-}
-</style>
-<style>
-@import "@/main.css" reference;
-[data-level="debug"],
-[data-level="trace"] {
-  @apply !bg-purple;
-}
-
-[data-level="info"] {
-  @apply !bg-green;
-}
-
-[data-level="error"],
-[data-level="fatal"] {
-  @apply !bg-red;
-}
-
-[data-level="warn"] {
-  @apply !bg-orange;
-}
-</style>

assets/components/LogViewer/LogList.vue

@@ -1,112 +0,0 @@
-<template>
-  <ul class="events group pt-4" :class="{ 'disable-wrap': !softWrap, [size]: true, compact }">
-    <li
-      v-for="item in messages"
-      ref="list"
-      :key="item.id"
-      :data-key="item.id"
-      :data-time="item.date.getTime()"
-      class="group/entry"
-    >
-      <component :is="item.getComponent()" :log-entry="item" />
-    </li>
-  </ul>
-</template>
-
-<script lang="ts" setup>
-import { type JSONObject, LogEntry } from "@/models/LogEntry";
-
-const { loading, progress, currentDate } = useScrollContext();
-
-const { messages } = defineProps<{
-  messages: LogEntry<string | JSONObject>[];
-}>();
-
-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>
-@import "@/main.css" reference;
-.events {
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    SF Mono,
-    Consolas,
-    Liberation Mono,
-    monaco,
-    Menlo,
-    monospace;
-
-  > li {
-    @apply has-[.clickable]:hover:bg-primary/10 flex px-2 py-1 break-words last:snap-end odd:bg-gray-400/[0.07] has-[.clickable]:cursor-pointer md:px-4;
-    &:last-child {
-      scroll-margin-block-end: 5rem;
-    }
-  }
-
-  &.small {
-    @apply text-[0.7em];
-  }
-
-  &.medium {
-    @apply text-[0.8em];
-  }
-
-  &.large {
-    @apply text-lg;
-  }
-
-  &.compact {
-    > li {
-      @apply py-0;
-    }
-
-    :deep(.tag) {
-      @apply rounded-none;
-    }
-  }
-
-  :deep(mark) {
-    @apply bg-secondary inline-block rounded-xs;
-    animation: pops 200ms ease-out;
-  }
-}
-
-@keyframes pops {
-  0% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1.05);
-  }
-}
-</style>

assets/components/LogViewer/LogMessageActions.vue

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

assets/components/LogViewer/LogStd.vue

@@ -1,24 +0,0 @@
-<template>
-  <Tag size="small" :std="std" class="items-start!">
-    {{ std }}
-  </Tag>
-</template>
-
-<script lang="ts" setup>
-import { Std } from "@/models/LogEntry";
-
-defineProps<{
-  std: Std;
-}>();
-</script>
-
-<style scoped>
-@import "@/main.css" reference;
-[std="stdout"] {
-  @apply text-blue;
-}
-
-[std="stderr"] {
-  @apply text-red;
-}
-</style>

assets/components/LogViewer/LogViewer.vue

@@ -1,42 +0,0 @@
-<template>
-  <LogList :messages="visibleMessages" />
-</template>
-
-<script lang="ts" setup>
-import { type JSONObject, LogEntry } from "@/models/LogEntry";
-
-const props = defineProps<{
-  messages: LogEntry<string | JSONObject>[];
-  visibleKeys: Map<string[], boolean>;
-}>();
-
-const { messages, visibleKeys } = toRefs(props);
-
-const { filteredPayload } = useVisibleFilter(visibleKeys);
-const { debouncedSearchFilter } = useSearchFilter();
-const { streamConfig } = useLoggingContext();
-
-const visibleMessages = filteredPayload(messages);
-const router = useRouter();
-
-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></style>

assets/components/LogViewer/MultiContainerActionToolbar.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="dropdown dropdown-end dropdown-hover">
-    <label tabindex="0" class="btn btn-ghost btn-sm gap-0.5 px-2">
-      <carbon:circle-solid class="text-red w-2.5" v-if="streamConfig.stderr" />
-      <carbon:circle-solid class="text-blue w-2.5" v-if="streamConfig.stdout" />
-    </label>
-    <ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 z-50 w-52 p-1 shadow-sm">
-      <li>
-        <a @click.prevent="clear()">
-          <octicon:trash-24 /> {{ $t("toolbar.clear") }}
-          <KeyShortcut char="k" :modifiers="['shift', 'meta']" />
-        </a>
-      </li>
-      <li>
-        <a :href="downloadUrl" download> <octicon:download-24 /> {{ $t("toolbar.download") }} </a>
-      </li>
-      <li>
-        <a @click.prevent="showSearch = true">
-          <mdi:magnify /> {{ $t("toolbar.search") }}
-          <KeyShortcut char="f" />
-        </a>
-      </li>
-      <li class="line"></li>
-      <li>
-        <a
-          @click="
-            streamConfig.stdout = true;
-            streamConfig.stderr = true;
-          "
-        >
-          <div class="flex size-4 gap-0.5">
-            <template v-if="streamConfig.stderr && streamConfig.stdout">
-              <carbon:circle-solid class="text-red w-2" />
-              <carbon:circle-solid class="text-blue w-2" />
-            </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="text-blue w-2" 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="text-red w-2" v-if="streamConfig.stderr && !streamConfig.stdout" />
-          </div>
-          {{ $t("toolbar.show", { std: "STDERR" }) }}
-        </a>
-      </li>
-      <li class="line"></li>
-      <li>
-        <a @click="showHostname = !showHostname">
-          <mdi:check class="w-4" v-if="showHostname" />
-          <div v-else class="w-4"></div>
-          {{ $t("toolbar.show-hostname") }}
-        </a>
-      </li>
-      <li>
-        <a @click="showContainerName = !showContainerName">
-          <mdi:check class="w-4" v-if="showContainerName" />
-          <div v-else class="w-4"></div>
-          {{ $t("toolbar.show-container-name") }}
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const { showSearch } = useSearchFilter();
-
-const clear = defineEmit();
-
-const { streamConfig, showHostname, showContainerName, containers } = useLoggingContext();
-
-const downloadParams = computed(() =>
-  Object.entries(toValue(streamConfig))
-    .filter(([, value]) => value)
-    .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {}),
-);
-
-const downloadUrl = computed(() =>
-  withBase(
-    `/api/containers/${containers.value.map((c) => c.host + "~" + c.id).join(",")}/download?${new URLSearchParams(downloadParams.value).toString()}`,
-  ),
-);
-</script>
-
-<style scoped>
-@import "@/main.css" reference;
-li.line {
-  @apply bg-base-content/20 h-px;
-}
-
-a {
-  @apply whitespace-nowrap;
-}
-</style>

assets/components/LogViewer/MultiContainerStat.vue

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

assets/components/LogViewer/RandomColorTag.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="tag grid w-40 overflow-hidden rounded-sm text-center text-sm text-white">
-    <div class="random-color col-start-1 row-start-1 brightness-75"></div>
-    <div class="col-start-1 row-start-1 truncate px-2 brightness-100" :class="truncateRight ? '[direction:rtl]' : ''">
-      {{ value }}
-    </div>
-  </div>
-</template>
-<script lang="ts">
-const colors = [
-  "hsl(200, 85%, 65%)", // Vibrant Sky Blue
-  "hsl(150, 85%, 65%)", // Vibrant Mint
-  "hsl(300, 85%, 65%)", // Vibrant Purple
-  "hsl(25, 85%, 65%)", // Vibrant Peach
-  "hsl(270, 85%, 65%)", // Vibrant Lavender
-  "hsl(340, 85%, 65%)", // Vibrant Rose
-  "hsl(170, 85%, 65%)", // Vibrant Aqua
-  "hsl(50, 85%, 65%)", // Vibrant Yellow
-  "hsl(235, 85%, 65%)", // Vibrant Periwinkle
-  "hsl(10, 85%, 65%)", // Vibrant Coral
-  "hsl(180, 85%, 65%)", // Vibrant Turquoise
-  "hsl(320, 85%, 65%)", // Vibrant Orchid
-  "hsl(90, 85%, 65%)", // Vibrant Lime
-  "hsl(260, 85%, 65%)", // Vibrant Amethyst
-  "hsl(30, 85%, 65%)", // Vibrant Orange
-  "hsl(210, 85%, 65%)", // Vibrant Ocean
-  "hsl(290, 85%, 65%)", // Vibrant Mauve
-  "hsl(120, 85%, 65%)", // Vibrant Spring
-  "hsl(350, 85%, 65%)", // Vibrant Strawberry
-  "hsl(190, 85%, 65%)", // Vibrant Azure
-] as const;
-</script>
-<script lang="ts" setup>
-const { value, truncateRight = false } = defineProps<{
-  value: string;
-  truncateRight?: boolean;
-}>();
-
-const color = computed(() => colors[Math.abs(hashCode(value)) % colors.length]);
-</script>
-
-<style scoped>
-.random-color {
-  background-color: v-bind(color);
-}
-</style>

assets/components/LogViewer/SQLTable.vue

@@ -1,40 +0,0 @@
-<template>
-  <table class="table-zebra table-pin-rows table-md table" 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-md table animate-pulse" v-else>
-    <thead>
-      <tr>
-        <th v-for="_ in 3">
-          <div class="bg-base-content/50 h-4 w-20 animate-pulse opacity-50"></div>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="_ in 9">
-        <td v-for="_ in 3">
-          <div class="bg-base-content/50 h-4 w-20 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

@@ -1,42 +0,0 @@
-<template>
-  <LogItem :logEntry>
-    <div
-      class="log-wrapper [word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap"
-      v-html="linkify(colorize(logEntry.message))"
-    ></div>
-    <LogMessageActions
-      class="absolute -right-1 opacity-0 transition-opacity delay-150 duration-250 group-hover/entry:opacity-100"
-      :message="() => decodeXML(stripAnsi(logEntry.message))"
-      :log-entry="logEntry"
-    />
-  </LogItem>
-</template>
-<script lang="ts" setup>
-import { SimpleLogEntry } from "@/models/LogEntry";
-import { decodeXML } from "entities";
-import AnsiConvertor from "ansi-to-html";
-import stripAnsi from "strip-ansi";
-
-const ansiConvertor = new AnsiConvertor({
-  escapeXML: false,
-  fg: "var(--color-base-content)",
-  bg: "var(--color-base-100)",
-});
-
-defineProps<{
-  logEntry: SimpleLogEntry;
-}>();
-
-const colorize = (value: string) => ansiConvertor.toHtml(value);
-const urlPattern =
-  /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b[-a-zA-Z0-9()@:%_+.~#?&\/=]*/g;
-const linkify = (text: string) =>
-  text.replace(urlPattern, (url) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`);
-</script>
-
-<style scoped>
-@import "@/main.css" reference;
-.log-wrapper :deep(a) {
-  @apply text-primary underline-offset-4 hover:underline;
-}
-</style>

assets/components/LogViewer/SkippedEntriesLogItem.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="my-4 flex-1 text-center">
-    <div class="relative">
-      <ZigZag class="absolute inset-0 mt-2" />
-      <span class="bg-base-200 relative px-4 py-2 font-bold whitespace-pre-wrap">
-        {{ $t("error.logs-skipped", { total: logEntry.totalSkipped }) }}
-      </span>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { SkippedLogsEntry } from "@/models/LogEntry";
-
-defineProps<{
-  logEntry: SkippedLogsEntry;
-}>();
-</script>

assets/components/LogViewer/StatMonitor.vue

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

assets/components/LogViewer/StatSparkline.vue

@@ -1,44 +0,0 @@
-<template>
-  <svg :width="width" :height="height" @mousemove="onMove" class="group">
-    <path :d="path" class="fill-primary" />
-    <line :x1="lineX" y1="0" :x2="lineX" :y2="height" class="stroke-secondary invisible stroke-2 group-hover:visible" />
-  </svg>
-</template>
-
-<script lang="ts" setup>
-import { extent } from "d3-array";
-import { scaleLinear } from "d3-scale";
-import { area, curveStep } from "d3-shape";
-
-const d3 = { extent, scaleLinear, area, curveStep };
-const { data, width = 150, height = 30 } = defineProps<{ data: Point<unknown>[]; width?: number; height?: number }>();
-const x = d3.scaleLinear().range([0, width]);
-const y = d3.scaleLinear().range([height, 0]);
-
-const selectedPoint = defineEmit<[value: Point<unknown>]>();
-
-const shape = d3
-  .area<Point<unknown>>()
-  .curve(d3.curveStep)
-  .x((d) => x(d.x))
-  .y0(height)
-  .y1((d) => y(d.y));
-
-const path = computed(() => {
-  x.domain(d3.extent(data, (d) => d.x) as [number, number]);
-  y.domain(d3.extent([...data, { y: 1 }], (d) => d.y) as [number, number]);
-
-  return shape(data) ?? "";
-});
-
-let lineX = $ref(0);
-
-function onMove(e: MouseEvent) {
-  const { offsetX } = e;
-  const xValue = x.invert(offsetX);
-  const index = Math.round(xValue);
-  lineX = x(index);
-  const point = data[index];
-  selectedPoint(point);
-}
-</script>

assets/components/LogViewer/ViewerWithSource.vue

@@ -1,30 +0,0 @@
-<template>
-  <EventSource ref="source" #default="{ messages }" :stream-source="streamSource" :entity="entity">
-    <LogViewer :messages="messages" :visible-keys="visibleKeys" />
-  </EventSource>
-</template>
-
-<script lang="ts" setup generic="T">
-import EventSource from "@/components/LogViewer/EventSource.vue";
-import { LogStreamSource } from "@/composable/eventStreams";
-import { ComponentExposed } from "vue-component-type-helpers";
-
-const { streamSource, visibleKeys, entity } = defineProps<{
-  streamSource: (t: Ref<T>) => LogStreamSource;
-  visibleKeys: Map<string[], boolean>;
-  entity: T;
-}>();
-
-const source = useTemplateRef<ComponentExposed<typeof EventSource>>("source");
-
-defineExpose({
-  clear: () => source.value?.clear(),
-});
-
-onKeyStroke("k", (e) => {
-  if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
-    source.value?.clear();
-    e.preventDefault();
-  }
-});
-</script>

assets/components/LogViewer/ZigZag.vue

@@ -1,11 +0,0 @@
-<template>
-  <svg width="100%" height="8" class="zigzag">
-    <defs>
-      <pattern id="zigzag" x="0" y="0" width="30" height="8" patternUnits="userSpaceOnUse">
-        <line x1="0" y1="0" x2="15" y2="8" class="stroke-primary stroke-1" />
-        <line x1="15" y1="8" x2="30" y2="0" class="stroke-primary stroke-1" />
-      </pattern>
-    </defs>
-    <rect x="0" y="0" width="100%" height="100%" fill="url(#zigzag)"></rect>
-  </svg>
-</template>

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

@@ -1,73 +0,0 @@
-// 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 pt-4 medium" show-container-name="false">
-  <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
-        <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
-      </div>
-      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
-      <div data-v-a49e52d4="" class="log-wrapper [word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
-      <div data-v-a49e52d4="" class="flex gap-2 absolute -right-1 opacity-0 transition-opacity delay-150 duration-250 group-hover/entry:opacity-100">
-        <!--v-if-->
-      </div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<ContainerEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
-"<ul data-v-cf9ff940="" class="events group pt-4 medium" show-container-name="false">
-  <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
-        <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42</time></div>
-      </div>
-      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
-      <div data-v-a49e52d4="" class="log-wrapper [word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
-      <div data-v-a49e52d4="" class="flex gap-2 absolute -right-1 opacity-0 transition-opacity delay-150 duration-250 group-hover/entry:opacity-100">
-        <!--v-if-->
-      </div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<ContainerEventSource /> > render html correctly > should render messages 1`] = `
-"<ul data-v-cf9ff940="" class="events group pt-4 medium" show-container-name="false">
-  <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
-        <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
-      </div>
-      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
-      <div data-v-a49e52d4="" class="log-wrapper [word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
-      <div data-v-a49e52d4="" class="flex gap-2 absolute -right-1 opacity-0 transition-opacity delay-150 duration-250 group-hover/entry:opacity-100">
-        <!--v-if-->
-      </div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<ContainerEventSource /> > should parse messages 1`] = `
-SimpleLogEntry {
-  "_message": "This is a message.",
-  "containerID": undefined,
-  "date": 2019-06-12T10:55:42.459Z,
-  "id": 1,
-  "level": undefined,
-  "position": undefined,
-  "std": "stderr",
-}
-`;

assets/components/LogViewerWithSource.vue

@@ -0,0 +1,19 @@
+<template lang="html">
+  <log-event-source :id="id" v-slot="eventSource">
+    <log-viewer :messages="eventSource.messages"></log-viewer>
+  </log-event-source>
+</template>
+
+<script>
+import LogEventSource from "./LogEventSource";
+import LogViewer from "./LogViewer";
+
+export default {
+  props: ["id"],
+  name: "LogViewerWithSource",
+  components: {
+    LogEventSource,
+    LogViewer
+  }
+};
+</script>

assets/components/MultiContainerViewer/MultiContainerLog.vue

@@ -1,41 +0,0 @@
-<template>
-  <ScrollableView :scrollable="scrollable" v-if="containers.length && ready">
-    <template #header>
-      <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="@container flex flex-1 gap-1.5 truncate md:gap-2">
-          <octicon:container-24 />
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ containers.length }} containers</div>
-          </div>
-        </div>
-        <MultiContainerStat class="ml-auto" :containers="containers" />
-        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
-      </div>
-    </template>
-    <template #default>
-      <ViewerWithSource
-        ref="viewer"
-        :stream-source="useMergedStream"
-        :entity="containers"
-        :visible-keys="new Map<string[], boolean>()"
-      />
-    </template>
-  </ScrollableView>
-</template>
-
-<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[];
-  scrollable?: boolean;
-}>();
-
-const containerStore = useContainerStore();
-const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
-const { allContainersById, ready } = storeToRefs(containerStore);
-const containers = computed(() => ids.map((id) => allContainersById.value[id]));
-
-provideLoggingContext(containers, { showContainerName: true, showHostname: false });
-</script>

assets/components/PageWithLinks.vue

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

assets/components/Popup.vue

@@ -1,58 +0,0 @@
-<template>
-  <slot></slot>
-  <teleport to="body">
-    <transition name="fade">
-      <div
-        v-show="show && (delayedShow || glopbalShow)"
-        class="border-base-content/20 bg-base-100 fixed z-50 rounded-sm border p-4 shadow-sm"
-        ref="content"
-      >
-        <slot name="content"></slot>
-      </div>
-    </transition>
-  </teleport>
-</template>
-
-<script lang="ts" setup>
-import { globalShowPopup } from "@/composable/popup";
-
-const glopbalShow = globalShowPopup();
-const show = ref(glopbalShow.value);
-const delayedShow = refDebounced(show, 1000);
-const content = ref<HTMLElement>();
-
-const onMouseEnter = (e: Event) => {
-  show.value = true;
-  glopbalShow.value = true;
-
-  if (content.value && e.target instanceof HTMLElement) {
-    const { left, top, width } = e.target.getBoundingClientRect();
-    const x = left + width + 10;
-    const y = top;
-
-    content.value.style.left = `${x}px`;
-    content.value.style.top = `${y}px`;
-  }
-};
-
-const onMouseLeave = () => {
-  show.value = false;
-  glopbalShow.value = false;
-};
-
-const el: Ref<HTMLElement> = useCurrentElement();
-useEventListener(() => el.value?.nextElementSibling, "mouseenter", onMouseEnter);
-useEventListener(() => el.value?.nextElementSibling, "mouseleave", onMouseLeave);
-</script>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  @apply transition-opacity;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  @apply opacity-0;
-}
-</style>

assets/components/ScrollProgress.vue

@@ -1,102 +0,0 @@
-<template>
-  <transition name="fadeout">
-    <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-300 stroke-primary" />
-        </svg>
-        <div class="absolute inset-0 flex items-center justify-center font-light">
-          <span class="text-4xl">
-            {{ Math.ceil(progress * 100) }}
-          </span>
-          <span> % </span>
-        </div>
-      </div>
-      <DistanceTime :date="date" class="text-sm whitespace-nowrap" />
-    </div>
-  </transition>
-</template>
-
-<script lang="ts" setup>
-const {
-  indeterminate = false,
-  autoHide = false,
-  progress,
-  date = new Date(),
-} = defineProps<{
-  indeterminate?: boolean;
-  autoHide?: boolean;
-  progress: number;
-  date?: Date;
-}>();
-
-const show = autoResetRef(false, 2000);
-
-watch(
-  () => progress,
-  () => {
-    if (autoHide) {
-      show.value = true;
-    }
-  },
-);
-</script>
-<style scoped>
-svg {
-  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
-  margin-top: 5px;
-  &.indeterminate {
-    animation: 2s linear infinite svg-animation;
-
-    circle {
-      animation: 1.4s ease-in-out infinite both circle-animation;
-    }
-  }
-  circle {
-    fill-opacity: 0.75;
-    transition: stroke-dashoffset 250ms ease-out;
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-    stroke-dashoffset: calc(276.32px - v-bind(progress) * 276.32px);
-    stroke-dasharray: 276.32px 276.32px;
-    stroke-linecap: round;
-    stroke-width: 3;
-    will-change: stroke-dashoffset;
-  }
-}
-
-@keyframes svg-animation {
-  0% {
-    transform: rotateZ(0deg);
-  }
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
-
-@keyframes circle-animation {
-  0%,
-  25% {
-    stroke-dashoffset: 275px;
-    transform: rotate(0);
-  }
-  50%,
-  75% {
-    stroke-dashoffset: 70px;
-    transform: rotate(45deg);
-  }
-
-  100% {
-    stroke-dashoffset: 275px;
-    transform: rotate(360deg);
-  }
-}
-
-.fadeout-leave-active {
-  @apply transition-opacity;
-}
-
-.fadeout-leave-to {
-  opacity: 0;
-}
-</style>

assets/components/ScrollableView.vue

@@ -1,96 +1,89 @@
-<template>
-  <section :class="{ 'h-screen min-h-0': scrollable }" class="flex flex-col">
-    <header
-      v-if="$slots.header"
-      class="border-base-content/10 bg-base-200 sticky top-[55px] z-2 border-b py-2 shadow-[1px_1px_2px_0_rgb(0,0,0,0.05)] md:top-0"
-    >
+<template lang="html">
+  <section>
+    <header v-if="$slots.header">
       <slot name="header"></slot>
     </header>
-    <main :data-scrolling="scrollable ? true : undefined" class="snap-y overflow-auto">
-      <div class="invisible relative md:visible" v-show="scrollContext.paused">
-        <div class="absolute top-4 right-44">
-          <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></slot>
-      </div>
-
-      <div ref="scrollObserver" class="h-px"></div>
+    <main ref="content" @scroll.passive="onScroll">
+      <slot></slot>
     </main>
-
-    <div class="mr-16 text-right">
+    <div class="scroll-bar-notification">
       <transition name="fade">
         <button
-          class="transition-colorsblur-xs dark btn btn-primary text-primary-content fixed bottom-8 rounded-sm p-3 shadow-sm"
-          :class="hasMore ? 'btn-secondary animate-bounce-fast text-secondary-content' : ''"
-          @click="scrollToBottom()"
-          v-show="scrollContext.paused"
+          class="button"
+          :class="hasMore ? 'is-warning' : 'is-primary'"
+          @click="scrollToBottom('smooth')"
+          v-show="paused"
         >
-          <mdi:chevron-double-down />
+          <span class="icon large"> <i class="fas fa-chevron-down"></i> </span>
         </button>
       </transition>
     </div>
   </section>
 </template>
 
-<script lang="ts" setup>
-const { scrollable = false } = defineProps<{ scrollable?: boolean }>();
-
-const hasMore = ref(false);
-const scrollObserver = ref<HTMLElement>();
-const scrollableContent = ref<HTMLElement>();
-
-const scrollContext = provideScrollContext();
-
-const { loadingMore } = useLoggingContext();
-
-useIntersectionObserver(scrollObserver, ([entry]) => (scrollContext.paused = entry.intersectionRatio == 0), {
-  threshold: [0, 1],
-  rootMargin: "40px 0px",
-});
-
-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;
+<script>
+export default {
+  name: "ScrollableView",
+  data() {
+    return {
+      paused: false,
+      hasMore: false
+    };
+  },
+  mounted() {
+    const { content } = this.$refs;
+    new MutationObserver(e => {
+      if (!this.paused) {
+        this.scrollToBottom("instant");
+      } else {
+        this.hasMore = true;
       }
+    }).observe(content, { childList: true, subtree: true });
+  },
+  methods: {
+    scrollToBottom(behavior = "instant") {
+      const { content } = this.$refs;
+      if (typeof content.scroll === "function") {
+        content.scroll({ top: content.scrollHeight, behavior });
+      } else {
+        content.scrollTop = content.scrollHeight;
+      }
+      this.hasMore = false;
+    },
+    onScroll(e) {
+      const { content } = this.$refs;
+      this.paused = content.scrollTop + content.clientHeight + 1 < content.scrollHeight;
     }
   },
-  { childList: true, subtree: true },
-);
-
-function scrollToBottom(behavior: "auto" | "smooth" = "auto") {
-  scrollObserver.value?.scrollIntoView({ behavior });
-  hasMore.value = false;
-}
+  watch: {}
+};
 </script>
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  @apply transition-opacity;
-}
+<style scoped lang="scss">
+section {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 
-.fade-enter-from,
-.fade-leave-to {
-  @apply opacity-0;
-}
-</style>
-
-<style>
-.splitpanes__pane {
-  overflow: unset !important;
+  main {
+    flex: 1;
+    overflow: auto;
+  }
+  .scroll-bar-notification {
+    text-align: right;
+    margin-right: 65px;
+    button {
+      position: fixed;
+      bottom: 30px;
+    }
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.15s ease-in;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
 }
 </style>

assets/components/Search.vue

@@ -1,68 +1,77 @@
-<template>
-  <transition name="slide">
-    <div
-      class="fixed z-10 flex w-full justify-end p-2"
-      v-show="showSearch"
-      v-if="search"
-      ref="container"
-      :style="style"
-    >
-      <div class="input input-primary flex 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="searchQueryFilter"
-          @keyup.esc="resetSearch()"
-        />
-        <a class="btn btn-circle btn-xs" @click="resetSearch()"> <mdi:close /></a>
-      </div>
+<template lang="html">
+  <div class="search columns is-gapless is-vcentered" v-show="showSearch">
+    <div class="column">
+      <p class="control has-icons-left">
+        <input class="input" type="text" placeholder="Filter" ref="filter" v-model="filter" />
+        <span class="icon is-small is-left"><i class="fas fa-search"></i></span>
+      </p>
     </div>
-  </transition>
+    <div class="column is-1 has-text-centered">
+      <button class="delete is-medium" @click="resetSearch()"></button>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup>
-const input = ref<HTMLInputElement>();
-const container = ref<HTMLDivElement>();
-const { searchQueryFilter, showSearch, resetSearch, isValidQuery } = useSearchFilter();
-
-const { style } = useDraggable(container);
-
-onKeyStroke("f", (e) => {
-  if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
-    showSearch.value = true;
-    nextTick(() => input.value?.focus() || input.value?.select());
-    e.preventDefault();
-  }
-});
-
-onMounted(() => {
-  onKeyStroke(
-    "f",
-    (e) => {
-      if (e.ctrlKey || e.metaKey) {
-        e.stopPropagation();
-        resetSearch();
+<script>
+import { mapActions, mapState } from "vuex";
+export default {
+  props: [],
+  name: "Search",
+  data() {
+    return {
+      showSearch: false
+    };
+  },
+  mounted() {
+    window.addEventListener("keydown", this.onKeyDown);
+  },
+  destroyed() {
+    window.removeEventListener("keydown", this.onKeyDown);
+  },
+  methods: {
+    ...mapActions({
+      updateSearchFilter: "SET_SEARCH"
+    }),
+    onKeyDown(e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "f") {
+        this.showSearch = true;
+        this.$nextTick(() => this.$refs.filter.focus());
+        e.preventDefault();
+      } else if (e.key === "Escape") {
+        this.resetSearch();
       }
     },
-    { target: input.value },
-  );
-});
-
-onUnmounted(() => resetSearch());
+    resetSearch() {
+      this.showSearch = false;
+      this.filter = "";
+    }
+  },
+  computed: {
+    ...mapState(["searchFilter"]),
+    filter: {
+      get() {
+        return this.searchFilter;
+      },
+      set(value) {
+        this.updateSearchFilter(value);
+      }
+    }
+  }
+};
 </script>
 
-<style scoped>
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+<style lang="scss" scoped>
+.search {
+  width: 350px;
+  position: fixed;
+  padding: 10px;
+  background: rgba(50, 50, 50, 0.9);
+  top: 0;
+  right: 0;
+  border-radius: 0 0 0 5px;
+  z-index: 10;
 }
-
-.slide-enter-from,
-.slide-leave-to {
-  transform: translateY(-150px);
-  opacity: 0;
+.delete {
+  margin-left: 1em;
 }
 </style>

assets/components/ServiceViewer/ServiceLog.vue

@@ -1,48 +0,0 @@
-<template>
-  <ScrollableView :scrollable="scrollable" v-if="service.name">
-    <template #header>
-      <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="@container flex flex-1 gap-1.5 truncate md:gap-2">
-          <ph:stack-simple />
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ service.name }}</div>
-          </div>
-          <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
-            {{ $t("label.container", service.containers.length) }}
-          </Tag>
-        </div>
-        <MultiContainerStat class="ml-auto" :containers="service.containers" />
-        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
-      </div>
-    </template>
-    <template #default>
-      <ViewerWithSource
-        ref="viewer"
-        :stream-source="useServiceStream"
-        :entity="service"
-        :visible-keys="new Map<string[], boolean>()"
-      />
-    </template>
-  </ScrollableView>
-</template>
-
-<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 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("", []));
-
-provideLoggingContext(
-  toRef(() => service.value.containers),
-  { showContainerName: true, showHostname: false },
-);
-</script>

assets/components/SideMenu.vue

@@ -1,39 +1,126 @@
-<template>
-  <div v-if="ready" data-testid="side-menu" class="flex min-h-0 flex-col">
-    <Carousel v-model="selectedCard" class="flex-1">
-      <CarouselItem :title="$t('label.host-menu')" id="host">
-        <HostMenu />
-      </CarouselItem>
-      <CarouselItem :title="$t('label.group-menu')" v-if="customGroups.length > 0" id="group">
-        <GroupMenu />
-      </CarouselItem>
-      <CarouselItem :title="$t('label.swarm-menu')" v-if="services.length > 0" id="swarm">
-        <SwarmMenu />
-      </CarouselItem>
-    </Carousel>
-  </div>
-  <div role="status" class="flex animate-pulse flex-col gap-4" v-else>
-    <div class="bg-base-content/50 h-3 w-full rounded-full opacity-50" v-for="_ in 9"></div>
-    <span class="sr-only">Loading...</span>
-  </div>
+<template lang="html">
+  <aside class="column menu is-3-tablet is-2-widescreen">
+    <a
+      role="button"
+      class="navbar-burger burger is-white is-hidden-tablet is-pulled-right"
+      @click="showNav = !showNav"
+      :class="{ 'is-active': showNav }"
+    >
+      <span></span> <span></span> <span></span>
+    </a>
+    <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+    <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
+    <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
+      <li v-for="item in containers">
+        <router-link
+          :to="{ name: 'container', params: { id: item.id, name: item.name } }"
+          active-class="is-active"
+          :title="item.name"
+        >
+          <div class="hide-overflow">
+            <span
+              @click.stop.prevent="appendActiveContainer(item)"
+              class="icon is-small will-append-container"
+              :class="{ 'is-active': activeContainersById[item.id] }"
+            >
+              <i class="fas fa-thumbtack"></i>
+            </span>
+            {{ item.name }}
+          </div>
+        </router-link>
+      </li>
+    </ul>
+  </aside>
 </template>
 
-<script lang="ts" setup>
-const containerStore = useContainerStore();
-const { ready } = storeToRefs(containerStore);
-const route = useRoute();
-const swarmStore = useSwarmStore();
-const { services, customGroups } = storeToRefs(swarmStore);
-const selectedCard = ref<"host" | "swarm" | "group">("host");
+<script>
+import { mapActions, mapGetters, mapState } from "vuex";
 
-watch(
-  route,
-  () => {
-    if (route.meta.menu && ["host", "swarm", "group"].includes(route.meta.menu as string)) {
-      selectedCard.value = route.meta.menu as "host" | "swarm" | "group";
+export default {
+  props: [],
+  name: "SideMenu",
+  data() {
+    return {
+      showNav: false
+    };
+  },
+  methods: {
+    colorize: value =>
+      ansiConvertor
+        .toHtml(value)
+        .replace("&lt;mark&gt;", "<mark>")
+        .replace("&lt;/mark&gt;", "</mark>")
+  },
+  computed: {
+    ...mapState(["containers", "activeContainers"]),
+    activeContainersById() {
+      return this.activeContainers.reduce((map, obj) => {
+        map[obj.id] = obj;
+        return map;
+      }, {});
     }
   },
-  { immediate: true },
-);
+  methods: {
+    ...mapActions({
+      appendActiveContainer: "APPEND_ACTIVE_CONTAINER"
+    })
+  }
+};
 </script>
-<style scoped></style>
+<style scoped lang="scss">
+aside {
+  position: fixed;
+  z-index: 2;
+  padding: 1em;
+
+  @media screen and (min-width: 769px) {
+    & {
+      height: 100vh;
+      overflow: auto;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    & {
+      position: sticky;
+      top: 0;
+      left: 0;
+      right: 0;
+      background: #222;
+    }
+
+    .menu-label {
+      margin-top: 1em;
+    }
+  }
+  .hide-overflow {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .burger.is-white {
+    color: #fff;
+  }
+
+  .is-hidden-mobile.is-active {
+    display: block !important;
+  }
+
+  .navbar-burger {
+    height: 2.35rem;
+  }
+}
+
+.will-append-container.icon {
+  transition: transform 0.2s ease-out;
+  &.is-active {
+    transform: rotate(25deg);
+    pointer-events: none;
+    color: #00d1b2;
+  }
+  .router-link-exact-active & {
+    visibility: hidden;
+  }
+}
+</style>

assets/components/SidePanel.vue

@@ -1,33 +0,0 @@
-<template>
-  <aside class="fixed flex h-screen w-[inherit] flex-col gap-4 p-3" data-testid="navigation">
-    <h1>
-      <router-link :to="{ name: '/' }">
-        <LogoWithText class="logo [&_.secondary-fill]:fill-secondary [&_.content-fill]:fill-base-content h-16 w-40" />
-      </router-link>
-
-      <small class="mb-4 block text-xs font-light" v-if="hostname">
-        {{ hostname }}
-      </small>
-    </h1>
-
-    <button
-      class="input input-sm hover:border-primary inline-flex w-auto cursor-pointer items-center gap-2 self-start font-light"
-      @click="$emit('search')"
-      :title="$t('tooltip.search')"
-      data-testid="search"
-    >
-      <mdi:magnify />
-      {{ $t("placeholder.search") }}
-      <key-shortcut char="k" class="text-base-content/70"></key-shortcut>
-    </button>
-
-    <SideMenu class="mt-2 flex-1" />
-  </aside>
-</template>
-
-<script lang="ts" setup>
-import LogoWithText from "@/logo-text.svg";
-const { hostname } = config;
-</script>
-
-<style scoped></style>

assets/components/StackViewer/StackLog.vue

@@ -1,49 +0,0 @@
-<template>
-  <ScrollableView :scrollable="scrollable" v-if="stack.name">
-    <template #header>
-      <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="@container flex flex-1 gap-1.5 truncate md:gap-2">
-          <ph:stack />
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ stack.name }}</div>
-          </div>
-          <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
-            {{ $t("label.container", stack.containers.length) }}
-          </Tag>
-          <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
-            {{ $t("label.service", stack.services.length) }}
-          </Tag>
-        </div>
-        <MultiContainerStat class="ml-auto" :containers="stack.containers" />
-        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
-      </div>
-    </template>
-    <template #default>
-      <ViewerWithSource
-        ref="viewer"
-        :stream-source="useStackStream"
-        :entity="stack"
-        :visible-keys="new Map<string[], boolean>()"
-      />
-    </template>
-  </ScrollableView>
-</template>
-
-<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 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("", [], []));
-provideLoggingContext(
-  toRef(() => stack.value.containers),
-  { showContainerName: true, showHostname: false },
-);
-</script>

assets/components/SwarmMenu.vue

@@ -1,58 +0,0 @@
-<template>
-  <ul class="menu w-full p-0 text-[0.95rem]">
-    <li v-for="{ name, services } in stacks" :key="name">
-      <details open>
-        <summary class="text-base-content/80 font-light">
-          <ph:stack />
-          {{ name }}
-
-          <router-link
-            :to="{ name: '/stack/[name]', params: { name } }"
-            class="btn btn-square btn-outline btn-primary btn-xs"
-            active-class="btn-active"
-            :title="$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="menu-active">
-              <ph:stack-simple />
-              <div class="truncate">
-                {{ service.name }}
-              </div>
-            </router-link>
-          </li>
-        </ul>
-      </details>
-    </li>
-
-    <li v-if="servicesWithoutStacks.length > 0">
-      <details open>
-        <summary class="text-base-content/80 font-light">
-          <ph:circles-four />
-          {{ $t("label.services") }}
-        </summary>
-        <ul>
-          <li v-for="service in servicesWithoutStacks" :key="service.name">
-            <router-link :to="{ name: '/service/[name]', params: { name: service.name } }" active-class="menu-active">
-              <ph:stack-simple />
-              <div class="truncate">
-                {{ service.name }}
-              </div>
-            </router-link>
-          </li>
-        </ul>
-      </details>
-    </li>
-  </ul>
-</template>
-
-<script lang="ts" setup>
-const store = useSwarmStore();
-
-const { stacks, services } = storeToRefs(store);
-
-const servicesWithoutStacks = computed(() => services.value.filter((service) => !service.stack));
-</script>

assets/components/__snapshots__/LogEventSource.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LogEventSource /> renders correctly 1`] = `
+<div>
+  <ul
+    class="events"
+  />
+</div>
+`;

assets/components/common/Carousel.vue

@@ -1,97 +0,0 @@
-<template>
-  <div class="flex min-h-0 flex-col gap-2">
-    <div class="flex min-h-0 flex-1 flex-col overflow-auto overscroll-y-contain">
-      <div
-        ref="container"
-        class="scrollbar-hide flex shrink-0 grow snap-x snap-mandatory overflow-x-auto overscroll-x-contain scroll-smooth"
-      >
-        <component v-for="(card, index) in providedCards" :key="index" :is="card" ref="cards" />
-      </div>
-    </div>
-    <div class="flex flex-col gap-2">
-      <h3 class="text-center text-sm font-thin">
-        {{ cards?.[activeIndex].title }}
-      </h3>
-      <div class="flex flex-none justify-center gap-2" v-if="providedCards.length > 1">
-        <button
-          v-for="(c, index) in providedCards"
-          :key="c.props?.id"
-          @click="scrollToItem(index)"
-          :class="[
-            'size-2 cursor-pointer rounded-full transition-all duration-700',
-            activeIndex === index ? 'bg-primary scale-125' : 'bg-base-content/50 hover:bg-base-content',
-          ]"
-          :aria-label="c.props?.title"
-          :title="c.props?.title"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import CarouselItem from "./CarouselItem.vue";
-const container = useTemplateRef<HTMLDivElement>("container");
-const activeIndex = ref(0);
-const activeId = defineModel<string>();
-const slots = defineSlots<{ default(): VNode[] }>();
-const providedCards = computed(() => slots.default().filter(({ type }) => type === CarouselItem));
-const cards = useTemplateRef<InstanceType<typeof CarouselItem>[]>("cards");
-
-const scrollToItem = (index: number) => {
-  cards.value?.[index].$el.scrollIntoView({
-    behavior: "smooth",
-    inline: "start",
-  });
-};
-
-const { pause, resume } = watchPausable(activeId, (v) => {
-  if (activeId.value) {
-    const index = cards.value?.map((c) => c.id).indexOf(activeId.value) ?? -1;
-    if (index !== -1) {
-      console.log("watching", activeId.value);
-      scrollToItem(index);
-    }
-  }
-});
-
-watchOnce(cards, () => {
-  if (activeId.value) {
-    const index = cards.value?.map((c) => c.id).indexOf(activeId.value) ?? -1;
-    if (index !== -1) {
-      scrollToItem(index);
-    }
-  }
-});
-
-useIntersectionObserver(
-  cards as Ref<InstanceType<typeof CarouselItem>[]>,
-  (entries) => {
-    entries.forEach(({ isIntersecting, target }) => {
-      if (isIntersecting) {
-        const index = cards.value?.map((c) => c.$el).indexOf(target as HTMLDivElement) ?? -1;
-        if (index !== -1) {
-          pause();
-          activeIndex.value = index;
-          activeId.value = cards.value?.[index].id;
-          nextTick(() => resume());
-        }
-      }
-    });
-  },
-  {
-    root: container,
-    threshold: 0.5,
-  },
-);
-</script>
-
-<style scoped>
-.scrollbar-hide {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-</style>

assets/components/common/CarouselItem.vue

@@ -1,16 +0,0 @@
-<template>
-  <div class="w-full min-w-full shrink-0 snap-start snap-always p-0.5">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-const { id, title } = defineProps<{ id: string; title?: string }>();
-
-defineExpose({
-  id,
-  title,
-});
-</script>
-
-<style scoped></style>

assets/components/common/DateTime.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="inline-flex gap-2">
-    <time :datetime="date.toISOString()" class="max-md:hidden">{{ dateStr }}</time>
-    <time :datetime="date.toISOString()">{{ timeStr }}</time>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-  date: Date;
-}>();
-
-const dateOverride = computed(() => (dateLocale.value === "auto" ? undefined : dateLocale.value));
-const dateFormatter = computed(
-  () => new Intl.DateTimeFormat(dateOverride.value, { day: "2-digit", month: "2-digit", year: "numeric" }),
-);
-const hourCycle = computed(() => {
-  switch (hourStyle.value) {
-    case "auto":
-      return undefined;
-    case "12":
-      return "h12";
-    case "24":
-      return "h23";
-  }
-});
-const timeFormatter = computed(
-  () =>
-    new Intl.DateTimeFormat(undefined, {
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      hourCycle: hourCycle.value,
-    }),
-);
-
-const dateStr = computed(() => dateFormatter.value.format(props.date));
-const timeStr = computed(() => timeFormatter.value.format(props.date));
-</script>

assets/components/common/DistanceTime.vue

@@ -1,30 +0,0 @@
-<template>
-  <time :datetime="date.toISOString()" data-ci-skip>{{ text }}</time>
-</template>
-
-<script lang="ts" setup>
-import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
-import { formatDistanceToNowStrict } from "date-fns/formatDistanceToNowStrict";
-
-const {
-  date,
-  strict = false,
-  suffix = true,
-} = defineProps<{
-  date: Date;
-  strict?: boolean;
-  suffix?: boolean;
-}>();
-
-const text = ref<string>();
-
-watch($$(date), updateFromNow, { immediate: true });
-
-function updateFromNow() {
-  const fn = strict ? formatDistanceToNowStrict : formatDistanceToNow;
-  text.value = fn(date, {
-    addSuffix: suffix,
-  });
-}
-useIntervalFn(updateFromNow, 30_000, { immediateCallback: true });
-</script>