WIP: notificatons

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

.air.toml

@@ -0,0 +1,57 @@
+root = "."
+testdata_dir = "testdata"
+tmp_dir = "tmp"
+
+[build]
+args_bin = []
+bin = "./tmp/dozzle"
+cmd = "GOEXPERIMENT=jsonv2 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 = true
+
+[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

.dockerignore

@@ -5,4 +5,5 @@ node_modules
 dist
 .git
 e2e
-
+docs
+internal/agent/pb/

.github/ISSUE_TEMPLATE/0_bug_report.yml

@@ -0,0 +1,65 @@
+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: 📜 Dozzle logs are required for debugging purposes. You may need to enable debug mode. See https://dozzle.dev/guide/debugging.
+      description: Drag log files or paste the logs into the text input below
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: 📸 If applicable, add screenshots to help explain your bug
+      description: Drag screenshots into the text input below
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/1_feature_request.yml

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

.github/ISSUE_TEMPLATE/2_peformance_report.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/funding.yml

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

.github/renovate.json

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

.github/stale.yml

@@ -6,6 +6,7 @@ daysUntilClose: 3
 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

.github/workflows/claude-code-review.yml

@@ -0,0 +1,57 @@
+name: Claude Code Review
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+    # Optional: Only run on specific file changes
+    # paths:
+    #   - "src/**/*.ts"
+    #   - "src/**/*.tsx"
+    #   - "src/**/*.js"
+    #   - "src/**/*.jsx"
+
+jobs:
+  claude-review:
+    # Optional: Filter by PR author
+    # if: |
+    #   github.event.pull_request.user.login == 'external-contributor' ||
+    #   github.event.pull_request.user.login == 'new-developer' ||
+    #   github.event.pull_request.author_association == 'FIRST_TIME_CONTRIBUTOR'
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code Review
+        id: claude-review
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          prompt: |
+            REPO: ${{ github.repository }}
+            PR NUMBER: ${{ github.event.pull_request.number }}
+
+            Please review this pull request and provide feedback on:
+            - Code quality and best practices
+            - Potential bugs or issues
+            - Performance considerations
+            - Security concerns
+            - Test coverage
+
+            Use the repository's CLAUDE.md for guidance on style and conventions. Be constructive and helpful in your feedback.
+
+            Use `gh pr comment` with your Bash tool to leave your review as a comment on the PR.
+
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://docs.claude.com/en/docs/claude-code/cli-reference for available options
+          claude_args: '--allowed-tools "Bash(gh issue view:*),Bash(gh search:*),Bash(gh issue list:*),Bash(gh pr comment:*),Bash(gh pr diff:*),Bash(gh pr view:*),Bash(gh pr list:*)"'
+

.github/workflows/claude.yml

@@ -0,0 +1,53 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+
+          # This is an optional setting that allows Claude to read CI results on PRs
+          additional_permissions: |
+            actions: read
+
+          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
+          # prompt: 'Update the pull request description to include a summary of changes.'
+
+          # Optional: Add claude_args to customize behavior and configuration
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://docs.claude.com/en/docs/claude-code/cli-reference for available options
+          # claude_args: '--allowed-tools Bash(gh pr:*)'

.github/workflows/deploy.yml

@@ -8,85 +8,147 @@ jobs:
     name: JavaScript Tests
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Install Node
-        uses: actions/setup-node@v3
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+      - uses: actions/setup-node@v6
+        name: Install Node
         with:
-          version: 6.20.1
+          node-version: 24.12.0
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24.12.0
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile --prefer-offline
       - name: Run Tests
-        run: pnpm run test
+        run: pnpm run test -- --outputTruncateLength=500
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v6
         with:
-          go-version: 1.19.x
+          go-version: 1.25.5
+          check-latest: true
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
+      - name: Install gRPC and Go
+        run: |
+          go install google.golang.org/grpc/cmd/protoc-gen-go-grpc@latest
+          go install google.golang.org/protobuf/cmd/protoc-gen-go@latest
       - name: Run Go Tests with Coverage
-        run: make test SKIP_ASSET=1
+        run: make test
   int-test:
     name: Integration Tests
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Build images
-        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml build
-      - name: Run tests
-        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+      - uses: actions/setup-node@v6
+        name: Install Node
+        with:
+          node-version: 24.12.0
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24.12.0
+          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@v6
+        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: Docker meta
-        id: meta
-        uses: docker/metadata-action@v4
-        with:
-          images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.2.1
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
       - name: Login to DockerHub
-        uses: docker/login-action@v2.1.0
+        uses: docker/login-action@v3.6.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3.6.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Checkout
+        uses: actions/checkout@v6
+      - 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@v3.2.0
+        uses: docker/build-push-action@v6.18.0
         with:
           push: true
-          platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
+          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=registry,ref=amir20/dozzle:latest
-          cache-to: type=inline
+          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@v3
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
       - name: Install Node
-        uses: actions/setup-node@v3
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
-        with:
-          version: 6.20.1
-      - name: Install dependencies
-        run: pnpm install
+        uses: actions/setup-node@v6
       - name: Release to Github
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: pnpm run release -- --github.release --no-increment --no-git --ci
+        run: npx changelogithub

.github/workflows/dev.yml

@@ -12,25 +12,40 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ !github.event.repository.fork && !github.event.pull_request.head.repo.fork && (github.event_name == 'push' || github.event.pull_request.head.repo.full_name == 'amir20/dozzle') }}
     steps:
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v4
-        with:
-          images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.2.1
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
       - name: Login to DockerHub
-        uses: docker/login-action@v2.1.0
+        uses: docker/login-action@v3.6.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Build and push
-        uses: docker/build-push-action@v3.2.0
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3.6.0
         with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Checkout
+        uses: actions/checkout@v6
+      - 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.18.0
+        with:
+          context: .
           push: true
-          platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
+          platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8
           tags: ${{ steps.meta.outputs.tags }}
           build-args: TAG=${{ steps.meta.outputs.version }}
           labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=registry,ref=amir20/dozzle:master
-          cache-to: type=inline
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/pages.yml

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

.github/workflows/pr.yml

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

.github/workflows/test.yml

@@ -7,66 +7,122 @@ on:
       - master
 name: Test
 jobs:
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+      - uses: actions/setup-node@v6
+        name: Install Node
+        with:
+          node-version: 24.12.0
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24.12.0
+          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:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Install Node
-        uses: actions/setup-node@v3
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v6
         with:
-          version: 6.20.1
+          node-version: 24.12.0
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile --prefer-offline
       - name: Run Tests
-        run: pnpm run test
+        run: pnpm run test -- --outputTruncateLength=500
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v6
         with:
-          go-version: 1.19.x
+          go-version: "1.25.5"
+          check-latest: true
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Install gRPC and Go
+        run: |
+          go install google.golang.org/grpc/cmd/protoc-gen-go-grpc@latest
+          go install google.golang.org/protobuf/cmd/protoc-gen-go@latest
       - name: Run Go Tests with Coverage
-        run: make test SKIP_ASSET=1
-  int-test:
-    name: Integration Tests
+        run: make test
+  staticcheck:
     runs-on: ubuntu-latest
+    name: Go Staticcheck
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
+      - name: Setup Go
+        uses: actions/setup-go@v6
         with:
-          fetch-depth: 2
+          go-version: "1.25.5"
+          check-latest: true
+      - name: Generate dependencies
+        run: make fake_assets shared_key.pem shared_cert.pem
+      - name: Stactic checker
+        uses: dominikh/staticcheck-action@v1.4.0
+        with:
+          install-go: false
+  int-test:
+    name: Integration Tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+      - uses: actions/setup-node@v6
+        name: Install Node
+        with:
+          node-version: 24.12.0
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24.12.0
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: Install dependencies
+        run: pnpm install
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.2.1
-      - name: Login to DockerHub
-        if: ${{ !github.event.repository.fork && !github.event.pull_request.head.repo.fork }}
-        uses: docker/login-action@v2.1.0
+        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:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Build images
-        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml build --build-arg BUILDKIT_INLINE_CACHE=1
-      - name: Push images
-        if: ${{ !github.event.repository.fork && !github.event.pull_request.head.repo.fork }}
-        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml push
-      - name: Set commit message for push
-        if: github.event_name == 'push'
-        run: |
-          echo "GIT_LOG_MESSAGE<<EOF" >> $GITHUB_ENV
-          git log -1 --pretty=%B ${GITHUB_SHA} >> $GITHUB_ENV
-          echo 'EOF' >> $GITHUB_ENV
-      - name: Set commit message for pull request
-        if: github.event_name == 'pull_request'
-        run: |
-          echo "GIT_LOG_MESSAGE<<EOF" >> $GITHUB_ENV
-          git log -1 --pretty=%B ${{github.event.pull_request.head.sha}} >> $GITHUB_ENV
-          echo 'EOF' >> $GITHUB_ENV
-      - name: Run tests
-        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress
+          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@v6
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -1,4 +1,5 @@
-
+certs
+/data
 dist
 node_modules
 .cache
@@ -6,4 +7,12 @@ static
 dozzle
 coverage
 .pnpm-debug.log
-.vscode
+coverage.out
+.netlify
+/test-results/
+/playwright-report/
+/playwright/.cache/
+*.pem
+*.csr
+tmp
+.claude

.husky/.gitignore

@@ -1 +0,0 @@
-_

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname $0)/_/husky.sh"
-
-pnpm lint-staged

.npmrc

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

.prettierignore

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

.prettierrc.cjs

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

.prettierrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-  printWidth: 120,
-};

.reflex

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

CLAUDE.md

@@ -0,0 +1,253 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Comment Style
+
+**Always use ultra-brief mode for all PR reviews and responses.**
+
+Format:
+
+- Critical issues only (bugs, security, blockers)
+- Brief bullet points, no lengthy explanations
+- Skip verbose sections (no "Strengths", "Summary", etc.)
+- Include file:line references when relevant
+- Maximum ~10-15 lines per response
+
+## Project Overview
+
+Dozzle is a lightweight, web-based Docker log viewer with real-time monitoring capabilities. It's a hybrid application with:
+
+- **Backend**: Go (HTTP server, Docker API client, WebSocket streaming)
+- **Frontend**: Vue 3 (SPA with Vite, TypeScript)
+
+The application supports multiple deployment modes: standalone server, Docker Swarm, and Kubernetes (k8s).
+
+## Development Commands
+
+### Setup
+
+```bash
+# Install dependencies
+pnpm install
+
+# Install Go tools (protobuf, air hot-reloader)
+make tools
+
+# Generate certificates and protobuf files
+make generate
+```
+
+### Development
+
+```bash
+# Run full development environment (backend + frontend with hot reload)
+make dev
+
+# Alternative: Run backend and frontend separately
+pnpm run watch:backend  # Go backend with air (port 3100)
+pnpm run watch:frontend # Vite dev server (port 3100)
+
+# Run in agent mode for development
+pnpm run agent:dev
+```
+
+### Building
+
+```bash
+# Build frontend assets
+pnpm build
+# or
+make dist
+
+# Build entire application (includes frontend build)
+make build
+
+# Build Docker image
+make docker
+```
+
+### Testing
+
+```bash
+# Run Go tests
+make test
+
+# Run frontend tests (Vitest)
+pnpm test
+# Run in watch mode
+TZ=UTC pnpm test --watch
+
+# Type checking
+pnpm typecheck
+```
+
+### Preview & Other
+
+```bash
+# Preview production build locally
+pnpm preview
+# or
+make preview
+
+# Run integration tests (Playwright)
+make int
+```
+
+## Architecture
+
+### Backend (Go)
+
+The Go backend is organized into these key packages:
+
+- **`internal/web/`** - HTTP server and routing layer
+  - Routes defined in `routes.go` using chi router
+  - WebSocket/SSE handlers for log streaming (`logs.go`)
+  - Authentication middleware and token management (`auth.go`)
+  - Container action handlers (`actions.go`)
+
+- **`internal/docker/`** - Docker API client implementation
+  - `client.go`: Main Docker client wrapper with container operations
+  - `log_reader.go`: Streaming container logs
+  - `stats_collector.go`: Real-time container stats collection
+
+- **`internal/agent/`** - gRPC agent for multi-host support
+  - Uses Protocol Buffers (protos defined in `protos/`)
+  - Enables distributed log collection across Docker hosts
+
+- **`internal/k8s/`** - Kubernetes client support
+  - Alternative to Docker client for k8s deployments
+
+- **`internal/support/`** - Support utilities
+  - `cli/`: Command-line argument parsing and validation
+  - `docker/`: Multi-host Docker management and Swarm support
+  - `container/`: Container service abstractions
+  - `web/`: Web service utilities
+
+- **`internal/auth/`** - Authentication providers
+  - Simple file-based auth (`simple.go`)
+  - Forward proxy auth (`proxy.go`)
+  - Role-based authorization (`roles.go`)
+
+- **`internal/container/`** - Container domain models and interfaces
+
+- **`main.go`** - Application entry point with mode switching (server/swarm/k8s)
+
+### Frontend (Vue 3)
+
+The frontend uses file-based routing with these conventions:
+
+- **`assets/pages/`** - File-based routes (unplugin-vue-router)
+  - `container/[id].vue`: Single container view
+  - `merged/[ids].vue`: Multi-container merged view
+  - `host/[id].vue`: Host-level logs
+  - `service/[name].vue`: Swarm service logs
+  - `stack/[name].vue`: Docker stack logs
+  - `group/[name].vue`: Custom grouped logs
+
+- **`assets/components/`** - Vue components (auto-imported)
+  - `LogViewer/`: Core log viewing components
+    - `SimpleLogItem.vue`: Single-line log entries
+    - `ComplexLogItem.vue`: JSON/structured log entries
+    - `GroupedLogItem.vue`: Multi-line grouped log entries
+    - `ContainerEventLogItem.vue`: Container lifecycle events
+    - `SkippedEntriesLogItem.vue`: Placeholder for skipped logs
+    - `LoadMoreLogItem.vue`: Load more historical logs
+  - `ContainerViewer/`: Container-specific UI
+  - `common/`: Reusable UI components
+  - `BarChart.vue`: Lightweight bar chart with automatic downsampling
+  - `HostCard.vue`: Host overview card with metrics
+  - `MetricCard.vue`: Reusable metric display component
+  - `ContainerTable.vue`: Container table with historical stat visualization
+
+- **`assets/stores/`** - Pinia stores (auto-imported)
+  - `config.ts`: App configuration and feature flags
+  - `container.ts`: Container state management
+  - `hosts.ts`: Multi-host state
+  - `settings.ts`: User preferences
+
+- **`assets/composable/`** - Vue composables (auto-imported)
+  - `eventStreams.ts`: SSE connection management
+  - `historicalLogs.ts`: Historical log fetching
+  - `logContext.ts`: Log filtering and search context
+  - `storage.ts`: LocalStorage abstractions
+  - `visible.ts`: Log filtering by visible keys for complex logs
+
+- **`assets/modules/`** - Vue plugins
+  - `router.ts`: Vue Router configuration
+  - `pinia.ts`: Pinia store setup
+  - `i18n.ts`: Internationalization
+
+### Communication Flow
+
+1. **Real-time Logs**: Frontend establishes SSE connections to `/api/hosts/{host}/containers/{id}/logs/stream`
+2. **Container Events**: SSE stream at `/api/events/stream` pushes container lifecycle events
+3. **Stats**: Real-time CPU/memory stats streamed via SSE alongside events
+4. **Actions**: POST to `/api/hosts/{host}/containers/{id}/actions/{action}` (start/stop/restart)
+5. **Terminal**: WebSocket connections for container attach/exec at `/api/hosts/{host}/containers/{id}/attach`
+
+### Build System
+
+- **Frontend**: Vite builds to `dist/` with manifest
+- **Backend**: Embeds `dist/` using Go embed directive
+- **Hot Reload**: In development, `DEV=true` disables embedded assets, `LIVE_FS=true` serves from filesystem
+- **Makefile**: Orchestrates builds and dependency generation
+
+## Important Development Notes
+
+### Frontend
+
+- Auto-imports are configured for Vue composables, components, and Pinia stores (see `vite.config.ts`)
+- Icons use unplugin-icons with multiple icon sets (mdi, carbon, material-symbols, etc.)
+- Tailwind CSS with DaisyUI for styling
+- TypeScript definitions auto-generated in `assets/auto-imports.d.ts` and `assets/components.d.ts`
+- **Log Entry Types**: Three types of log messages supported
+  - `SimpleLogEntry`: Single-line text logs (`string`)
+  - `ComplexLogEntry`: Structured JSON logs (`JSONObject`)
+  - `GroupedLogEntry`: Multi-line grouped logs (`string[]`)
+- **Type consistency**: Use `LogMessage` type alias instead of `string | string[] | JSONObject` for log entry messages
+- **Charts/Visualizations**: Custom lightweight implementations (no D3.js)
+  - `BarChart.vue`: Self-contained bar chart with responsive downsampling
+  - Downsampling algorithm: Averages data into buckets based on available screen width
+  - All stat history tracked in `Container.statsHistory` (max 300 items via rolling window)
+
+### Backend
+
+- The application uses Go 1.25+ with module support
+- Certificate generation is required (`make generate` creates shared_key.pem and shared_cert.pem)
+- Protocol buffer generation happens via `go generate` directive in `main.go`
+- Docker client uses API version negotiation for compatibility
+
+### Authentication
+
+- Three modes: none, simple (file-based users.yml), forward-proxy (e.g., Authelia)
+- JWT tokens for simple auth with configurable TTL
+- User file location: `./data/users.yml` or `./data/users.yaml`
+
+### Testing
+
+- Go tests use standard `testing` package with testify assertions
+- Frontend uses Vitest with `@vue/test-utils`
+- Integration tests with Playwright in `e2e/`
+- Tests must run with `TZ=UTC` for consistent timestamps
+
+### Container Stats & Metrics
+
+- Stats are tracked using exponential moving average (EMA) with alpha=0.2
+- History stored in rolling window (300 items max) via `useSimpleRefHistory`
+- CPU metrics normalized by core count (respects `cpuLimit` or falls back to host `nCPU`)
+- Memory metrics include both percentage and absolute usage (`memoryUsage` vs `memory`)
+- Stats visualization uses adaptive downsampling for performance
+
+### Container Labels
+
+- `dev.dozzle.name`: Custom container display name
+- `dev.dozzle.group`: Group containers together
+- Label-based filtering throughout the application
+
+### Deployment Modes
+
+- **Server mode**: Single or multi-host Docker monitoring
+- **Swarm mode**: Automatic discovery of Swarm nodes via Docker API
+- **K8s mode**: Pod log monitoring in Kubernetes cluster
+- **Agent mode**: Lightweight gRPC agent for remote log collection

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,30 +1,34 @@
 # Build assets
-FROM --platform=$BUILDPLATFORM node:19-alpine as node
-
-RUN npm install -g pnpm
+FROM --platform=$BUILDPLATFORM node:24.12.0-alpine AS node
 
+RUN corepack enable
 
 WORKDIR /build
 
 # Install dependencies from lock file
-COPY pnpm-lock.yaml ./
-RUN pnpm fetch
+COPY pnpm-*.yaml ./
+RUN pnpm fetch --ignore-scripts --no-optional
 
 # Copy package.json and install dependencies
 COPY package.json ./
-RUN pnpm install -r --offline --ignore-scripts
+RUN pnpm install --offline --ignore-scripts --no-optional
 
 # Copy assets and translations to build
-COPY .* vite.config.ts index.html ./
+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.19.4-alpine AS builder
+FROM --platform=$BUILDPLATFORM golang:1.25-alpine AS builder
 
-RUN apk add --no-cache ca-certificates && mkdir /dozzle
+# install gRPC dependencies
+RUN apk add --no-cache ca-certificates protoc protobuf-dev\
+  && mkdir /dozzle \
+  && go install google.golang.org/protobuf/cmd/protoc-gen-go@latest \
+  && go install google.golang.org/grpc/cmd/protoc-gen-go-grpc@latest
 
 WORKDIR /dozzle
 
@@ -32,28 +36,32 @@ WORKDIR /dozzle
 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
 
-# Copy all other files
-COPY analytics ./analytics
-COPY healthcheck ./healthcheck
-COPY docker ./docker
-COPY web ./web
-COPY main.go ./
-
 # Args
 ARG TAG=dev
 ARG TARGETOS TARGETARCH
 
-# Build binary
-RUN GOOS=$TARGETOS GOARCH=$TARGETARCH CGO_ENABLED=0 go build -ldflags "-s -w -X main.version=$TAG"  -o dozzle
+# Generate protos
+RUN go generate
 
+# Build binary
+RUN GOEXPERIMENT=jsonv2 GOOS=$TARGETOS GOARCH=$TARGETARCH CGO_ENABLED=0 go build -ldflags "-s -w -X github.com/amir20/dozzle/internal/support/cli.Version=$TAG" -o dozzle
+
+RUN mkdir /data
 
 FROM scratch
 
-ENV PATH /bin
-
+COPY --from=builder /data /data
+COPY --from=builder /tmp /tmp
 COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
 COPY --from=builder /dozzle/dozzle /dozzle
 

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Amir Raminfar
+Copyright (c) 2025 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,7 +1,14 @@
+PROTO_DIR := protos
+GEN_DIR := internal/agent/pb
+PROTO_FILES := $(wildcard $(PROTO_DIR)/*.proto)
+GEN_FILES := $(patsubst $(PROTO_DIR)/%.proto,$(GEN_DIR)/%.pb.go,$(PROTO_FILES))
+
 .PHONY: clean
 clean:
 	@rm -rf dist
 	@go clean -i
+	@rm -f shared_key.pem shared_cert.pem
+	@rm -f $(GEN_DIR)/*.pb.go
 
 .PHONY: dist
 dist:
@@ -14,21 +21,50 @@ fake_assets:
 	@echo "assets build was skipped" > dist/index.html
 
 .PHONY: test
-test: fake_assets
-	go test -cover ./...
+test: fake_assets generate
+	go test -cover -race -count 1 -timeout 40s ./...
 
 .PHONY: build
-build: dist
-	CGO_ENABLED=0 go build -ldflags "-s -w"
+build: dist generate
+	CGO_ENABLED=0 go build -ldflags "-s -w -X github.com/amir20/dozzle/internal/support/cli.Version=local"
 
 .PHONY: docker
-docker:
-	@docker build -t amir20/dozzle .
+docker: shared_key.pem shared_cert.pem
+	@docker build  --build-arg TAG=local -t amir20/dozzle .
+
+generate: shared_key.pem shared_cert.pem $(GEN_FILES)
 
 .PHONY: dev
-dev:
+dev: generate fake_assets
 	pnpm dev
 
 .PHONY: int
 int:
-	docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress
+	docker compose up --build --force-recreate --exit-code-from playwright
+
+shared_key.pem:
+	@openssl genpkey -algorithm Ed25519 -out shared_key.pem
+
+shared_cert.pem: shared_key.pem
+	@openssl req -new -key shared_key.pem -out shared_request.csr -subj "/C=US/ST=California/L=San Francisco/O=Dozzle"
+	@openssl x509 -req -in shared_request.csr -signkey shared_key.pem -out shared_cert.pem -days 1825
+	@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,68 +1,52 @@
+<p align="center">
+  <img src="assets/logo.svg" alt="Dozzle Logo" width="200"/>
+</p>
+
 # 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.
 
-![Image](https://github.com/amir20/dozzle/blob/master/.github/demo.gif?raw=true)
+https://github.com/user-attachments/assets/66a7b4b2-d6c9-4fca-ab04-aef6cd7c0c31
 
-[![Go Report Card](https://goreportcard.com/badge/github.com/amir20/dozzle)](https://goreportcard.com/report/github.com/amir20/dozzle)
+[![Docker Image Size (latest by date)](https://img.shields.io/docker/image-size/amir20/dozzle)](https://hub.docker.com/r/amir20/dozzle/)
 [![Docker Pulls](https://img.shields.io/docker/pulls/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
 [![Docker Version](https://img.shields.io/docker/v/amir20/dozzle?sort=semver)](https://hub.docker.com/r/amir20/dozzle/)
 ![Test](https://github.com/amir20/dozzle/workflows/Test/badge.svg)
 
+> [!NOTE]
+> If you like Dozzle, check out [`dtop`](https://github.com/amir20/dtop) which is a top like application for monitoring Docker containers. It integrates with Dozzle to allow for linking directly to container logs.
+
 ## Features
 
 - Intelligent fuzzy search for container names 🤖
 - Search logs using regex 🔦
+- Search logs using [SQL queries](https://dozzle.dev/guide/sql-engine) 📊
 - Small memory footprint 🏎
 - Split screen for viewing multiple logs
-- Download logs easy
 - Live stats with memory and CPU usage
-- Authentication with username and password 🚨
+- Multi-user [authentication](https://dozzle.dev/guide/authentication) with support for proxy forward authorization 🚨
+- [Swarm](https://dozzle.dev/guide/swarm-mode) mode support 🐳
+- [Agent](https://dozzle.dev/guide/agent) mode for monitoring multiple Docker hosts 🕵️‍♂️
+- Dark mode 🌙
 
-Dozzle should work for most. It has been tested with hundreds of containers. However, it doesn't support offline searching. Products like [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana) are more suited for full search capabilities.
+Dozzle has been tested with hundreds of containers. However, it doesn't support offline searching. Products like [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana) are more suited for full search capabilities.
 
-Dozzle doesn't cost any money and aims to focus on real-time debugging.
+## Getting Started
 
-## Getting Dozzle
-
-Dozzle is a very small Docker container (4 MB compressed). Pull the latest release from the index:
+Dozzle is a small container (7 MB compressed). Pull the latest release with:
 
     $ docker pull amir20/dozzle:latest
 
-## Using Dozzle
+### Running Dozzle
 
 The simplest way to use dozzle is to run the docker container. Also, mount the Docker Unix socket with `--volume` to `/var/run/docker.sock`:
 
-    $ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:8080 amir20/dozzle:latest
+    $ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle:latest
 
-Dozzle will be available at [http://localhost:8888/](http://localhost:8888/). You can change `-p 8888:8080` to any port. For example, if you want to view dozzle over port 4040 then you would do `-p 4040:8080`.
+Dozzle will be available at [http://localhost:8080/](http://localhost:8080/).
 
-### With Docker swarm
+Here is the Docker Compose file:
 
-    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
-        volumes:
-          - /var/run/docker.sock:/var/run/docker.sock
-        ports:
-          - 9999:8080
-
-### Enabling health check
-
-Dozzle doesn't enable healthcheck by default as it adds extra CPU usage. `healthcheck` can be enabled manually.
-
-    version: "3"
     services:
       dozzle:
         container_name: dozzle
@@ -71,136 +55,84 @@ Dozzle doesn't enable healthcheck by default as it adds extra CPU usage. `health
           - /var/run/docker.sock:/var/run/docker.sock
         ports:
           - 8080:8080
-        environment:
-          DOZZLE_LEVEL: trace
-        healthcheck:
-          test: [ "CMD", "/dozzle", "healthcheck" ]
-          interval: 3s
-          timeout: 30s
-          retries: 5
-          start_period: 30s
 
-#### Security
+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).
 
-You can control the device Dozzle binds to by passing `--addr` parameter. For example,
+## Swarm Mode
 
-    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --addr localhost:1224
+Dozzle works with Docker Swarm mode. You can run Dozzle as a global service with:
 
-will bind to `localhost` on port `1224`. You can then use a reverse proxy to control who can see dozzle.
+    $ 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
 
-If you wish to restrict the containers shown you can pass the `--filter` parameter. For example,
+See the [Swarm Mode](https://dozzle.dev/guide/swarm-mode) documentation for more details.
 
-    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --filter name=foo
+## Agent Mode
 
-this would then only allow you to view containers with a name starting with "foo". You can use other filters like `status` as well, please check the official docker [command line docs](https://docs.docker.com/engine/reference/commandline/ps/#filtering) for available filters. Multiple `--filter` arguments can be provided.
+Dozzle can be used to monitor multiple Docker hosts. You can run Dozzle in agent mode with:
 
-#### Authentication
+    $ docker run -v /var/run/docker.sock:/var/run/docker.sock -p 7007:7007 amir20/dozzle:latest agent
 
-Dozzle supports a very simple authentication out of the box with just username and password. You should deploy using SSL to keep the credentials safe. See configuration to use `--username` and `--password`. You can also use [docker secrets](https://docs.docker.com/engine/swarm/secrets/) `--usernamefile` and `--passwordfile`.
+See the [Agent Mode](https://dozzle.dev/guide/agent) documentation for more details.
 
-#### Changing base URL
+## Technical 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.
+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/).
 
-    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle:latest --base /foobar
+### Installation on podman
 
-Dozzle will be available at [http://localhost:8080/foobar/](http://localhost:8080/foobar/).
+By default Podman doesn't have a background process but you can enable this for Dozzle to work.
 
-#### Analytics collected
+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
+## 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.
+Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or environment variables. See documentation at [https://dozzle.dev/guide/supported-env-vars](https://dozzle.dev/guide/supported-env-vars) for more details.
 
-| Flag             | Env Variable           | Default |
-| ---------------- | ---------------------- | ------- |
-| `--addr`         | `DOZZLE_ADDR`          | `:8080` |
-| `--base`         | `DOZZLE_BASE`          | `/`     |
-| `--hostname`     | `DOZZLE_HOSTNAME`      | `""`    |
-| `--level`        | `DOZZLE_LEVEL`         | `info`  |
-| `--filter`       | `DOZZLE_FILTER`        | `""`    |
-| `--username`     | `DOZZLE_USERNAME`      | `""`    |
-| `--password`     | `DOZZLE_PASSWORD`      | `""`    |
-| `--usernamefile` | `DOZZLE_USERNAME_FILE` | `""`    |
-| `--passwordfile` | `DOZZLE_PASSWORD_FILE` | `""`    |
-| `--no-analytics` | `DOZZLE_NO_ANALYTICS`  | false   |
+## Support
 
-## Troubleshooting and FAQs
+There are many ways you can support Dozzle:
 
-<details>
- <summary>I installed Dozzle, but logs are slow or they never load. Help!</summary>
+- 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
 
-Dozzle uses Server Sent Events (SSE) which connects to a server using a HTTP stream without closing the connection. If any proxy tries to buffer this connection, then Dozzle never receives the data and hangs forever waiting for the reverse proxy to flush the buffer. Since version `1.23.0`, Dozzle sends the `X-Accel-Buffering: no` header which should stop reverse proxies buffering. However, some proxies may ignore this header. In those cases, you need to explicitly disable any buffering.
-
-Below is an example with nginx and using `proxy_pass` to disable buffering.
-
-```
-    server {
-        ...
-
-        location / {
-            proxy_pass                  http://<dozzle.container.ip.address>:8080;
-        }
-
-        location /api {
-            proxy_pass                  http://<dozzle.container.ip.address>:8080;
-
-            proxy_buffering             off;
-            proxy_cache                 off;
-        }
-    }
-
-```
-
-</details>
-
-<details>
- <summary>What data does Dozzle collect?</summary>
-
-Dozzle does collect some analytics. Analytics is anonymous usage tracking of the features which are used the most. See the section above on how to disable any analytic collection.
-
-In the browser, Dozzle has a [strict](https://github.com/amir20/dozzle/blob/master/web/csp.go#L9) Content Security Policy which only allows the following policies:
-
-- Allow connect to `api.github.com` to fetch most recent version.
-- Only allow `<script>` and `<style>` files from `self`
-
-Dozzle opens all links with `rel="noopener"`.
-
-</details>
-
-<details>
- <summary>We have tools that uses Dozzle when a new container is created. How can I get a direct link to a container by name?</summary>
-
-Dozzle has a [special route](https://github.com/amir20/dozzle/blob/master/assets/pages/Show.vue) that can be used to search containers by name and then forward to that container. For example, if you have a container with name `"foo.bar"` and id `abc123`, you can send your users to `/show?name=foo.bar` which will be forwarded to `/container/abc123`.
-
-</details>
-
-<details>
- <summary>I installed Dozzle but memory consumption doesn't show up!</summary>
-
-_This is an issue specific to ARM devices_
-
-Dozzle uses the Docker API to gather information about the containers' memory usage. If the memory usage is not showing up, then it is likely that the Docker API is not returning the memory usage.
-
-You can verify this by running `docker info`, and you should see the following:
-
-```
-WARNING: No memory limit support
-WARNING: No swap limit support
-```
-
-In this case, you'll need to add the following line to your `/boot/cmdline.txt` file and reboot your device.
-
-```
-cgroup_enable=cpuset cgroup_enable=memory cgroup_memory=1
-```
-
-</details>
+<a href="https://www.buymeacoffee.com/amirraminfar" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
 
 ## License
 
@@ -208,10 +140,10 @@ cgroup_enable=cpuset cgroup_enable=memory cgroup_memory=1
 
 ## Building
 
-To Build and test locally:
+To build and test locally:
 
 1. Install [NodeJs](https://nodejs.org/en/download/) and [pnpm](https://pnpm.io/installation).
 2. Install [Go](https://go.dev/doc/install).
-3. Install [reflex](https://github.com/cespare/reflex) with `go get -u github.com/cespare/reflex` outside of dozzle.
+3. Install tools with `make tools`.
 4. Install node modules `pnpm install`.
-5. Do `pnpm dev`
+5. Run `make dev` to start a development server with hot reload.

SECURITY.md

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

analytics/ga.go

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

analytics/types.go

@@ -1,11 +0,0 @@
-package analytics
-
-type StartEvent struct {
-	ClientId      string `json:"-"`
-	Version       string `json:"version"`
-	FilterLength  int    `json:"filterLength"`
-	CustomAddress bool   `json:"customAddress"`
-	CustomBase    bool   `json:"customBase"`
-	Protected     bool   `json:"protected"`
-	HasHostname   bool   `json:"hasHostname"`
-}

assets/App.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script lang="ts" setup>
+const mode = useColorMode();
 watchEffect(() => {
   if (smallerScrollbars.value) {
     document.documentElement.classList.add("has-custom-scrollbars");
@@ -10,17 +11,42 @@ watchEffect(() => {
     document.documentElement.classList.remove("has-custom-scrollbars");
   }
 
-  switch (lightTheme.value) {
-    case "dark":
-      document.documentElement.setAttribute("data-theme", "dark");
-      break;
-    case "light":
-      document.documentElement.setAttribute("data-theme", "light");
-      break;
-    default:
-      document.documentElement.removeAttribute("data-theme");
+  let theme = lightTheme.value;
+  if (theme === "auto") {
+    theme = mode.value;
   }
+  document.querySelector('meta[name="theme-color"]')?.setAttribute("content", theme == "dark" ? "#121212" : "#F5F5F5");
+  document.documentElement.setAttribute("data-theme", theme);
 });
 </script>
+<style>
+html.has-custom-scrollbars {
+  ::-webkit-scrollbar {
+    width: 8px;
+    display: content;
+  }
 
-<style scoped lang="scss"></style>
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(128, 128, 128, 0.33);
+    outline: 1px solid slategrey;
+    border-radius: 4px;
+  }
+
+  ::-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;
+  }
+}
+</style>

assets/components.d.ts

@@ -1,52 +1,155 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
 
 export {}
 
-declare module '@vue/runtime-core' {
+/* prettier-ignore */
+declare module 'vue' {
   export interface GlobalComponents {
-    CarbonCaretDown: typeof import('~icons/carbon/caret-down')['default']
-    CilColumns: typeof import('~icons/cil/columns')['default']
-    CilFindInPage: typeof import('~icons/cil/find-in-page')['default']
+    Announcements: typeof import('./components/Announcements.vue')['default']
+    BarChart: typeof import('./components/BarChart.vue')['default']
+    'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
+    'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default']
+    'Carbon: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']
-    ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
-    ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
-    DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
-    DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
-    FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
+    ContainerActionsToolbar: typeof import('./components/ContainerViewer/ContainerActionsToolbar.vue')['default']
+    ContainerDropdown: typeof import('./components/ContainerDropdown.vue')['default']
+    ContainerEventLogItem: typeof import('./components/LogViewer/ContainerEventLogItem.vue')['default']
+    ContainerHealth: typeof import('./components/ContainerViewer/ContainerHealth.vue')['default']
+    ContainerLog: typeof import('./components/ContainerViewer/ContainerLog.vue')['default']
+    ContainerPopup: typeof import('./components/ContainerPopup.vue')['default']
+    ContainerStatCell: typeof import('./components/ContainerStatCell.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']
+    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']
-    InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
-    LogActionsToolbar: typeof import('./components/LogViewer/LogActionsToolbar.vue')['default']
-    LogContainer: typeof import('./components/LogViewer/LogContainer.vue')['default']
+    GroupedLog: typeof import('./components/GroupedViewer/GroupedLog.vue')['default']
+    GroupedLogItem: typeof import('./components/LogViewer/GroupedLogItem.vue')['default']
+    GroupMenu: typeof import('./components/GroupMenu.vue')['default']
+    HistoricalContainerLog: typeof import('./components/ContainerViewer/HistoricalContainerLog.vue')['default']
+    HostCard: typeof import('./components/HostCard.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']
+    'Ion:ellipsisVertical': typeof import('~icons/ion/ellipsis-vertical')['default']
+    K8sMenu: typeof import('./components/K8sMenu.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']
+    LoadMoreLogItem: typeof import('./components/LogViewer/LoadMoreLogItem.vue')['default']
+    LogActions: typeof import('./components/LogViewer/LogActions.vue')['default']
+    LogAnalytics: typeof import('./components/LogViewer/LogAnalytics.vue')['default']
     LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
-    LogEventSource: typeof import('./components/LogViewer/LogEventSource.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']
+    LogStd: typeof import('./components/LogViewer/LogStd.vue')['default']
     LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
-    LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default']
-    MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
-    MdiLightChevronDoubleDown: typeof import('~icons/mdi-light/chevron-double-down')['default']
-    MdiLightChevronLeft: typeof import('~icons/mdi-light/chevron-left')['default']
-    MdiLightChevronRight: typeof import('~icons/mdi-light/chevron-right')['default']
-    MdiLightCog: typeof import('~icons/mdi-light/cog')['default']
-    MdiLightLogout: typeof import('~icons/mdi-light/logout')['default']
-    MdiLightMagnify: typeof import('~icons/mdi-light/magnify')['default']
-    MobileMenu: typeof import('./components/MobileMenu.vue')['default']
-    OcticonContainer24: typeof import('~icons/octicon/container24')['default']
-    OcticonDownload24: typeof import('~icons/octicon/download24')['default']
-    OcticonTrash24: typeof import('~icons/octicon/trash24')['default']
-    PastTime: typeof import('./components/PastTime.vue')['default']
-    RelativeTime: typeof import('./components/RelativeTime.vue')['default']
+    'MaterialSymbols:codeBlocksRounded': typeof import('~icons/material-symbols/code-blocks-rounded')['default']
+    'MaterialSymbols:contentCopy': typeof import('~icons/material-symbols/content-copy')['default']
+    'MaterialSymbols:eyeTracking': typeof import('~icons/material-symbols/eye-tracking')['default']
+    'MaterialSymbols:link': typeof import('~icons/material-symbols/link')['default']
+    'MaterialSymbols:logout': typeof import('~icons/material-symbols/logout')['default']
+    'MaterialSymbols:person': typeof import('~icons/material-symbols/person')['default']
+    'MaterialSymbols:terminal': typeof import('~icons/material-symbols/terminal')['default']
+    'MaterialSymbolsLight:collapseAll': typeof import('~icons/material-symbols-light/collapse-all')['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:beer': typeof import('~icons/mdi/beer')['default']
+    'Mdi:check': typeof import('~icons/mdi/check')['default']
+    'Mdi:chevronDoubleDown': typeof import('~icons/mdi/chevron-double-down')['default']
+    'Mdi:chevronDown': typeof import('~icons/mdi/chevron-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:docker': typeof import('~icons/mdi/docker')['default']
+    'Mdi:gauge': typeof import('~icons/mdi/gauge')['default']
+    'Mdi:github': typeof import('~icons/mdi/github')['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:lightningBolt': typeof import('~icons/mdi/lightning-bolt')['default']
+    'Mdi:magnify': typeof import('~icons/mdi/magnify')['default']
+    'Mdi:satelliteVariant': typeof import('~icons/mdi/satellite-variant')['default']
+    MetricCard: typeof import('./components/MetricCard.vue')['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']
+    NamespaceLog: typeof import('./components/K8sViewer/NamespaceLog.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']
+    OwnerLog: typeof import('./components/K8sViewer/OwnerLog.vue')['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: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:stack': typeof import('~icons/ph/stack')['default']
+    'Ph:stackSimple': typeof import('~icons/ph/stack-simple')['default']
+    PhArrowDown: typeof import('~icons/ph/arrow-down')['default']
+    PhArrowUp: typeof import('~icons/ph/arrow-up')['default']
+    Popup: typeof import('./components/Popup.vue')['default']
+    RandomColorTag: typeof import('./components/LogViewer/RandomColorTag.vue')['default']
+    RelativeTime: typeof import('./components/common/RelativeTime.vue')['default']
+    'Ri:terminalWindowFill': typeof import('~icons/ri/terminal-window-fill')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollableView: typeof import('./components/ScrollableView.vue')['default']
     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']
+    Terminal: typeof import('./components/Terminal.vue')['default']
+    TimedButton: typeof import('./components/common/TimedButton.vue')['default']
+    ToastModal: typeof import('./components/common/ToastModal.vue')['default']
+    Toggle: typeof import('./components/common/Toggle.vue')['default']
+    ViewerWithSource: typeof import('./components/LogViewer/ViewerWithSource.vue')['default']
     ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
   }
 }

assets/components/Announcements.vue

@@ -0,0 +1,119 @@
+<template>
+  <Dropdown
+    class="dropdown-end"
+    @click="config.releaseCheckMode === 'manual' && fetchReleases()"
+    @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"><RelativeTime :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"><RelativeTime :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, fetchReleases } = 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/BarChart.vue

@@ -0,0 +1,108 @@
+<template>
+  <div ref="chartContainer" class="flex items-end gap-[2px]" @mousemove="onContainerHover">
+    <div
+      v-for="(dataPoint, i) in downsampledData"
+      :key="i"
+      class="bar min-h-px flex-1 rounded-t-sm"
+      :class="barClass"
+      :style="{ '--height': `${Math.min(dataPoint, 100)}%` }"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.bar {
+  height: var(--height);
+  will-change: height;
+  contain: layout;
+}
+</style>
+
+<script setup lang="ts">
+const { chartData, barClass = "" } = defineProps<{
+  chartData: number[];
+  barClass?: string;
+}>();
+
+const hoverIndex = defineEmit<[startIndex: number, endIndex: number]>();
+
+const chartContainer = ref<HTMLElement | null>(null);
+const { width } = useElementSize(chartContainer);
+
+const BAR_WIDTH = 3;
+const GAP = 2;
+
+const availableBars = computed(() => Math.floor(width.value / (BAR_WIDTH + GAP)));
+const bucketSize = computed(() => Math.ceil(chartData.length / availableBars.value));
+
+const downsampledData = ref<number[]>([]);
+const changeCounter = ref(-1);
+
+// Watch chartData changes
+watch(
+  () => chartData,
+  () => {
+    // If changeCounter is -1, it means this is the first time the data is loaded
+    if (changeCounter.value === -1) {
+      recalculate();
+    }
+    changeCounter.value++;
+    if (changeCounter.value >= bucketSize.value) {
+      // Recalculate when counter reaches bucket size
+      recalculate();
+      changeCounter.value = 0;
+    }
+  },
+);
+
+// Recalculate when width changes
+watch([availableBars, bucketSize], () => {
+  recalculate();
+  changeCounter.value = -1;
+});
+
+function recalculate() {
+  if (chartData.length <= availableBars.value || availableBars.value === 0) {
+    downsampledData.value = [...chartData];
+    return;
+  }
+
+  const size = bucketSize.value;
+  const result = [];
+
+  // Create complete buckets
+  const numCompleteBuckets = Math.floor(chartData.length / size);
+
+  for (let i = 0; i < numCompleteBuckets; i++) {
+    const start = i * size;
+    const end = start + size;
+    const bucket = chartData.slice(start, end);
+    const avg = bucket.reduce((sum, val) => sum + val, 0) / bucket.length;
+    result.push(avg);
+  }
+
+  // Show only the last N bars that fit on screen
+  downsampledData.value = result.slice(-availableBars.value);
+}
+
+function onContainerHover(event: MouseEvent) {
+  if (!chartContainer.value) return;
+
+  const rect = chartContainer.value.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+
+  // Calculate which bar the mouse is over based on position
+  const barWidth = width.value / downsampledData.value.length;
+  const index = Math.floor(x / barWidth);
+
+  // Ensure index is within bounds
+  if (index < 0 || index >= downsampledData.value.length) return;
+
+  // Map downsampled index back to original data index range
+  const numCompleteBuckets = Math.floor(chartData.length / bucketSize.value);
+  const offset = Math.max(0, numCompleteBuckets - availableBars.value);
+  const startIndex = (offset + index) * bucketSize.value;
+  const endIndex = Math.min(startIndex + bucketSize.value - 1, chartData.length - 1);
+  hoverIndex(startIndex, endIndex);
+}
+</script>

assets/components/ContainerDropdown.vue

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

assets/components/ContainerPopup.vue

@@ -0,0 +1,38 @@
+<template>
+  <table class="w-full border-separate border-spacing-x-1">
+    <tbody>
+      <tr>
+        <th class="text-right font-light capitalize">STATE</th>
+        <td class="font-semibold uppercase">{{ container.state }}</td>
+      </tr>
+      <tr v-if="container.startedAt.getFullYear() > 0">
+        <th class="text-right font-light capitalize">STARTED</th>
+        <td class="font-semibold">
+          <RelativeTime :date="container.startedAt" />
+        </td>
+      </tr>
+      <tr v-if="container.state != 'running' && container.finishedAt.getFullYear() > 0">
+        <th class="text-right font-light capitalize">FINISHED</th>
+        <td class="font-semibold">
+          <RelativeTime :date="container.finishedAt" />
+        </td>
+      </tr>
+      <tr v-if="container.state == 'running'">
+        <th class="text-right font-light capitalize">Load</th>
+        <td class="font-semibold">{{ container.stat.cpu.toFixed(2) }}%</td>
+      </tr>
+      <tr v-if="container.state == 'running'">
+        <th class="text-right font-light capitalize">MEM</th>
+        <td class="font-semibold">{{ formatBytes(container.stat.memoryUsage) }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts" setup>
+import { Container } from "@/models/Container";
+
+const { container } = defineProps<{
+  container: Container;
+}>();
+</script>

assets/components/ContainerStatCell.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="flex flex-row items-center gap-2">
+    <BarChart class="h-4 flex-1" :chart-data="chartData" :bar-class="barClass" />
+    <span class="w-fit text-right text-sm">{{ displayValue }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Container } from "@/models/Container";
+import type { Host } from "@/stores/hosts";
+
+const { container, type, host } = defineProps<{
+  container: Container;
+  type: "cpu" | "mem";
+  host: Host;
+}>();
+
+function totalCores(): number {
+  if (container.cpuLimit && container.cpuLimit > 0) {
+    return 1;
+  }
+  return host.nCPU ?? 1;
+}
+
+const chartData = computed(() => {
+  if (type === "cpu") {
+    const cores = totalCores();
+    return container.statsHistory.map((stat) => Math.min(stat.cpu / cores, 100));
+  }
+  return container.statsHistory.map((stat) => Math.min(stat.memory, 100));
+});
+
+const averageValue = computed(() => {
+  if (type === "cpu") {
+    const cores = totalCores();
+    return Math.min(container.movingAverage.cpu / cores, 100);
+  }
+  return container.movingAverage.memory;
+});
+
+const displayValue = computed(() => {
+  if (type === "cpu") {
+    return `${averageValue.value.toFixed(0)}%`;
+  }
+  return formatBytes(container.movingAverage.memoryUsage);
+});
+
+const barClass = computed(() => {
+  const value = averageValue.value;
+  if (value <= 50) return "bg-success";
+  if (value <= 70) return "bg-secondary";
+  if (value <= 90) return "bg-warning";
+  return "bg-error";
+});
+</script>

assets/components/ContainerTable.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-row">
+      <div v-if="Object.keys(hosts).length > 1" class="flex-1">
+        <div role="tablist" class="tabs-boxed tabs block" v-if="Object.keys(hosts).length < 4">
+          <input
+            type="radio"
+            name="host"
+            role="tab"
+            class="tab rounded-sm!"
+            aria-label="Show All"
+            v-model="selectedHost"
+            :value="null"
+          />
+          <input
+            type="radio"
+            name="host"
+            role="tab"
+            class="tab rounded-sm!"
+            :aria-label="host.name"
+            v-for="host in hosts"
+            :value="host.id"
+            :key="host.id"
+            v-model="selectedHost"
+          />
+        </div>
+
+        <DropdownMenu
+          class="btn-sm"
+          v-model="selectedHost"
+          :options="[
+            { label: 'Show All', value: null },
+            ...Object.values(hosts).map((host) => ({ label: host.name, value: host.id })),
+          ]"
+          v-else
+        />
+      </div>
+      <div class="flex-1 text-right" v-show="containers.length > pageSizes[0]">
+        {{ $t("label.per-page") }}
+
+        <DropdownMenu
+          class="dropdown-left btn-xs md:btn-sm"
+          v-model="perPage"
+          :options="pageSizes.map((i) => ({ label: i.toLocaleString(), value: i }))"
+        />
+      </div>
+    </div>
+    <div class="rounded-box border-base-content/10 overflow-x-auto border">
+      <table class="table-md md:table-lg table-zebra table">
+        <thead>
+          <tr :data-direction="direction > 0 ? 'asc' : 'desc'">
+            <th
+              v-for="(value, key) in fields"
+              :key="key"
+              @click.prevent="sort(key)"
+              :class="[value.customClass, { 'selected-sort': key === sortField }]"
+              v-show="isVisible(key)"
+            >
+              <a class="inline-flex cursor-pointer gap-2 text-sm uppercase">
+                <span>{{ $t(value.label) }}</span>
+                <span class="h-4" data-icon>
+                  <mdi:arrow-up />
+                </span>
+              </a>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="bg-base-300/30">
+          <tr v-for="container in paginated" :key="container.id" v-memo="[container.id]" class="hover:bg-base-100/80!">
+            <td v-if="isVisible('name')" class="max-w-80 truncate">
+              <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')">
+              <RelativeTime :date="container.created" />
+            </td>
+            <td v-if="isVisible('cpu')">
+              <ContainerStatCell :container="container" type="cpu" :host="hosts[container.host]" />
+            </td>
+            <td v-if="isVisible('mem')">
+              <ContainerStatCell :container="container" type="mem" :host="hosts[container.host]" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="p-4 text-center">
+      <nav class="join" v-if="isPaginated && totalPages <= 15">
+        <input
+          class="btn btn-square join-item"
+          type="radio"
+          v-model="currentPage"
+          :aria-label="`${i}`"
+          :value="i"
+          v-for="i in totalPages"
+        />
+      </nav>
+      <DropdownMenu
+        v-else-if="isPaginated"
+        class="btn-sm"
+        v-model="currentPage"
+        :options="Array.from({ length: totalPages }, (_, i) => ({ label: `${i + 1}`, value: i + 1 }))"
+      />
+    </div>
+  </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: Record<
+  string,
+  {
+    label: string;
+    sortFunc: (a: Container, b: Container) => number;
+    mobileVisible: boolean;
+    customClass?: string;
+  }
+> = {
+  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,
+    customClass: "w-1",
+  },
+  state: {
+    label: "label.status",
+    sortFunc: (a: Container, b: Container) => a.state.localeCompare(b.state) * direction.value,
+    mobileVisible: false,
+    customClass: "w-1",
+  },
+  created: {
+    label: "label.created",
+    sortFunc: (a: Container, b: Container) => (a.created.getTime() - b.created.getTime()) * direction.value,
+    mobileVisible: true,
+    customClass: "w-1",
+  },
+  cpu: {
+    label: "label.avg-cpu",
+    sortFunc: (a: Container, b: Container) => (a.movingAverage.cpu - b.movingAverage.cpu) * direction.value,
+    mobileVisible: false,
+    customClass: "min-w-48",
+  },
+  mem: {
+    label: "label.avg-mem",
+    sortFunc: (a: Container, b: Container) =>
+      (a.movingAverage.memoryUsage - b.movingAverage.memoryUsage) * direction.value,
+    mobileVisible: false,
+    customClass: "min-w-48",
+  },
+};
+
+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" as keys,
+  direction: -1 as 1 | -1,
+});
+const { column: sortField, direction } = toRefs(storage.value);
+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>
+@reference "@/main.css";
+
+[data-icon] {
+  display: none;
+  transition: transform 0.2s ease-in-out;
+  [data-direction="desc"] & {
+    transform: rotate(180deg);
+  }
+}
+
+th {
+  @apply border-base-200 border-b-2;
+  &.selected-sort {
+    font-weight: bold;
+    @apply border-primary;
+    [data-icon] {
+      display: inline-block;
+    }
+  }
+}
+
+tbody td {
+  white-space: nowrap;
+}
+
+a {
+  @apply hover:text-primary;
+}
+</style>

assets/components/ContainerViewer/ContainerActionsToolbar.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="dropdown dropdown-end dropdown-hover z-20">
+    <label tabindex="0" class="btn btn-ghost btn-sm w-8 gap-0 px-0 md:gap-0.5">
+      <carbon:circle-solid class="text-red w-2 md:w-2.5" v-if="streamConfig.stderr" />
+      <carbon:circle-solid class="text-blue w-2 md:w-2.5" v-if="streamConfig.stdout" />
+    </label>
+    <ul
+      tabindex="0"
+      class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 shadow-sm"
+      @click="hideMenu"
+    >
+      <li v-if="!historical">
+        <a @click="clear()">
+          <octicon:trash-24 /> {{ $t("toolbar.clear") }}
+          <KeyShortcut char="k" :modifiers="['shift', 'meta']" />
+        </a>
+      </li>
+      <li v-if="enableDownload">
+        <a :href="downloadUrl" download>
+          <octicon:download-24 />
+          {{ isFiltered ? $t("toolbar.download-filtered") : $t("toolbar.download") }}
+        </a>
+      </li>
+      <li v-if="!historical">
+        <a @click="showSearch = true">
+          <mdi:magnify /> {{ $t("toolbar.search") }}
+          <KeyShortcut char="f" />
+        </a>
+      </li>
+      <li v-if="hasComplexLogs">
+        <a @click="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 && !historical">
+        <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>
+
+      <template v-if="enableShell && !historical">
+        <li class="line"></li>
+        <li>
+          <a @click="showDrawer(Terminal, { container, action: 'attach' }, 'lg')">
+            <ri:terminal-window-fill />
+            {{ $t("toolbar.attach") }}
+            <KeyShortcut char="a" :modifiers="['shift', 'meta']" />
+          </a>
+        </li>
+        <li>
+          <a @click="showDrawer(Terminal, { container, action: 'exec' }, 'lg')">
+            <material-symbols:terminal />
+            {{ $t("toolbar.shell") }}
+            <KeyShortcut char="e" :modifiers="['shift', 'meta']" />
+          </a>
+        </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";
+import Terminal from "@/components/Terminal.vue";
+
+const { showSearch } = useSearchFilter();
+const { enableActions, enableShell, enableDownload } = config;
+const { streamConfig, hasComplexLogs, levels } = useLoggingContext();
+const showDrawer = useDrawer();
+
+const { container, historical = false } = defineProps<{ container: Container; historical?: boolean }>();
+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();
+    }
+  }
+});
+if (enableShell) {
+  onKeyStroke("a", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+      showDrawer(Terminal, { container, action: "attach" }, "lg");
+      e.preventDefault();
+    }
+  });
+
+  onKeyStroke("e", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+      showDrawer(Terminal, { container, action: "exec" }, "lg");
+      e.preventDefault();
+    }
+  });
+}
+
+const containerRef = computed(() => [container]);
+const { downloadUrl, isFiltered } = useDownloadUrl(containerRef, streamConfig, levels);
+
+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();
+    }
+  },
+});
+
+const hideMenu = (e: MouseEvent) => {
+  if (e.target instanceof HTMLAnchorElement) {
+    setTimeout(() => {
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+    }, 50);
+  }
+};
+</script>
+
+<style scoped>
+@reference "@/main.css";
+
+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

@@ -0,0 +1,26 @@
+<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>
+@reference "@/main.css";
+[health="unhealthy"] {
+  @apply text-red;
+}
+
+[health="healthy"] {
+  @apply text-green;
+}
+</style>

assets/components/ContainerViewer/ContainerLog.vue

@@ -0,0 +1,56 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="container">
+    <template #header v-if="showTitle">
+      <div class="@container mx-2 flex items-center gap-1 md:ml-4 md:gap-2">
+        <ContainerTitle :container="container" />
+        <MultiContainerStat
+          class="ml-auto lg:hidden lg:@3xl:flex"
+          :containers="[container]"
+          v-if="container.state === 'running'"
+        />
+
+        <ContainerActionsToolbar @clear="viewer?.clear()" :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

@@ -0,0 +1,75 @@
+<template>
+  <div class="@container flex flex-1 items-center gap-1.5 md:gap-2">
+    <label class="swap swap-rotate size-4">
+      <input type="checkbox" v-model="pinned" />
+      <carbon:star-filled class="swap-on text-secondary" />
+      <carbon:star class="swap-off" />
+    </label>
+    <div class="inline-flex items-center text-sm">
+      <div class="breadcrumbs overflow-x-visible p-0 font-mono">
+        <ul>
+          <li v-if="config.hosts.length > 1" class="font-thin max-md:hidden">
+            {{ container.hostLabel }}
+          </li>
+          <li>
+            <template v-if="otherContainers.length === 0">{{ container.name }}</template>
+            <div v-else>
+              <div class="dropdown">
+                <button tabindex="0" role="button" class="btn btn-xs md:btn-sm">
+                  {{ container.name }} <carbon:caret-down />
+                </button>
+                <ul
+                  tabindex="0"
+                  class="dropdown-content menu rounded-box bg-base-100 border-base-content/20 border shadow-sm"
+                >
+                  <li v-for="other in otherContainers">
+                    <router-link :to="{ name: '/container/[id]', params: { id: other.id } }">
+                      <div
+                        class="status data-[state=exited]:status-error data-[state=running]:status-success"
+                        :data-state="other.state"
+                      ></div>
+                      <div v-if="other.isSwarm">{{ other.swarmId }}</div>
+                      <div v-else>{{ other.name }}</div>
+                      <div v-if="other.state === 'running'">running</div>
+                      <RelativeTime :date="other.finishedAt" class="text-base-content/70 text-xs" v-else />
+                    </router-link>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <ContainerHealth :health="container.health" v-if="container.health" />
+    <Tag class="hidden! font-mono @xl: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),
+);
+</script>
+
+<style scoped></style>

assets/components/ContainerViewer/HistoricalContainerLog.vue

@@ -0,0 +1,63 @@
+<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" />
+        <router-link
+          :to="{ name: '/container/[id]', params: { id: container.id } }"
+          class="btn btn-secondary btn-sm"
+          v-if="container.state === 'running'"
+        >
+          <mdi:lightning-bolt />
+          Live Logs
+        </router-link>
+
+        <ContainerActionsToolbar class="max-md:hidden" :container="container" historical />
+        <a class="btn btn-circle btn-xs" @click="close()" v-if="closable">
+          <mdi:close />
+        </a>
+      </div>
+    </template>
+    <template #default>
+      <ViewerWithSource
+        ref="viewer"
+        :stream-source="useHistoricalContainerLog"
+        :entity="historicalContainer"
+        :visible-keys="visibleKeys"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+import { HistoricalContainer } from "@/models/Container";
+import { ComponentExposed } from "vue-component-type-helpers";
+
+const {
+  id,
+  showTitle = false,
+  scrollable = false,
+  closable = false,
+  date,
+} = defineProps<{
+  id: string;
+  showTitle?: boolean;
+  scrollable?: boolean;
+  closable?: boolean;
+  date: Date;
+}>();
+
+const close = defineEmit();
+
+const store = useContainerStore();
+const container = store.currentContainer(toRef(() => id));
+const historicalContainer = toRef(() => new HistoricalContainer(container.value, date));
+const visibleKeys = persistentVisibleKeysForContainer(container);
+useTemplateRef<ComponentExposed<typeof ViewerWithSource>>("viewer");
+
+provideLoggingContext(
+  toRef(() => [container.value]),
+  { showContainerName: false, showHostname: false, historical: true },
+);
+</script>

assets/components/DropdownMenu.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="dropdown is-hoverable">
-    <div class="dropdown-trigger">
-      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
-        <span class="icon">
-          <mdi-dots-vertical />
-        </span>
-      </button>
-    </div>
-    <div class="dropdown-menu" id="dropdown-menu" role="menu">
-      <div class="dropdown-content">
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup></script>
-
-<style lang="scss" scoped>
-.minimal .button {
-  background-color: rgba(0, 0, 0, 0);
-  border: none;
-  padding: 0.1em;
-  height: 100%;
-
-  & > .icon {
-    height: 100%;
-    & > svg {
-      align-self: flex-start;
-      height: 0.85em;
-    }
-  }
-}
-.is-top {
-  & .dropdown-menu {
-    top: 0;
-  }
-
-  &.is-last .dropdown-menu {
-    top: -30px;
-  }
-}
-</style>

assets/components/FuzzySearchModal.spec.ts

@@ -0,0 +1,122 @@
+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",
+                  0,
+                  0,
+                  [],
+                ),
+                new Container(
+                  "345",
+                  new Date(),
+                  new Date(),
+                  new Date(),
+                  "image",
+                  "foo bar",
+                  "command",
+                  "host",
+                  {},
+                  "running",
+                  0,
+                  0,
+                  [],
+                ),
+                new Container(
+                  "567",
+                  new Date(),
+                  new Date(),
+                  new Date(),
+                  "image",
+                  "baz",
+                  "command",
+                  "host",
+                  {},
+                  "running",
+                  0,
+                  0,
+                  [],
+                ),
+              ],
+            },
+          },
+        }),
+      ],
+    },
+  });
+  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,144 +1,224 @@
 <template>
-  <div class="panel">
-    <o-autocomplete
-      ref="autocomplete"
-      v-model="query"
-      :placeholder="$t('placeholder.search-containers')"
-      open-on-focus
-      keep-first
-      expanded
-      :data="data"
-      @select="selected"
+  <div class="dropdown dropdown-open w-full shadow-md">
+    <div class="input input-xl input-primary flex w-full items-center">
+      <mdi:magnify class="flex size-8" />
+      <input
+        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" class="flex">
+        <button v-if="isMobile">
+          <mdi:close />
+        </button>
+        <button v-else class="swap hover:swap-active outline-hidden">
+          <mdi:keyboard-esc class="swap-off" />
+          <mdi:close class="swap-on" />
+        </button>
+      </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"
     >
-      <template #default="{ option: item }">
-        <div class="media">
-          <div class="media-left">
-            <span class="icon is-small" :class="item.state">
-              <octicon-container-24 />
-            </span>
-          </div>
-          <div class="media-content">
-            {{ item.name }}
-          </div>
-          <div class="media-right">
+      <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="{ 'menu-focus': index === selectedIndex }"
+          >
+            <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>
+
+            <RelativeTime :date="result.item.created" class="text-xs font-light" />
             <span
-              class="icon is-small column-icon"
-              @click.stop.prevent="addColumn(item)"
+              @click.stop.prevent="addColumn(result.item)"
               :title="$t('tooltip.pin-column')"
+              class="hover:text-secondary"
             >
-              <cil-columns />
+              <ic:sharp-keyboard-return v-if="index === selectedIndex" />
+              <cil:columns v-else-if="result.item.type === 'container'" />
             </span>
-          </div>
-        </div>
-      </template>
-    </o-autocomplete>
+          </a>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { Container } from "@/models/Container";
+import { ContainerState } from "@/types/Container";
 import { useFuse } from "@vueuse/integrations/useFuse";
+import { type FuseResult } from "fuse.js";
 
-const { maxResults: resultLimit = 20 } = defineProps<{
-  maxResults?: number;
-}>();
-
-const emit = defineEmits<{
-  (e: "close"): void;
-}>();
+const close = defineEmit();
 
 const query = ref("");
-const autocomplete = ref<HTMLElement>();
+const input = ref<HTMLInputElement>();
+const listItems = ref<HTMLInputElement[]>();
+const selectedIndex = ref(0);
+
 const router = useRouter();
-const store = useContainerStore();
-const { containers } = storeToRefs(store);
+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(() => {
-  return containers.value.map(({ id, created, name, state }) => {
-    return {
-      id,
-      created,
-      name,
-      state,
-    };
-  });
+  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"], includeScore: true },
-  resultLimit,
-  matchAllWhenSearchEmpty: true,
+  fuseOptions: {
+    keys: ["name", "host"],
+    includeScore: true,
+    useExtendedSearch: true,
+    threshold: 0.3,
+    includeMatches: true,
+  },
 });
 
 const data = computed(() => {
-  return results.value
-    .sort((a, b) => {
-      if (a.score === b.score) {
-        if (a.item.state === "running" && b.item.state !== "running") {
-          return -1;
-        } else {
-          return 1;
-        }
-      } else if (a.score && b.score) {
-        return a.score - b.score;
+  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 0;
+        return 1;
       }
-    })
-    .map(({ item }) => item);
+    } else {
+      return (a.score ?? 0) - (b.score ?? 0);
+    }
+  });
 });
-watchOnce(autocomplete, () => autocomplete.value?.focus());
 
-function selected({ id }: { id: string }) {
-  router.push({ name: "container-id", params: { id } });
-  emit("close");
+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: Container) {
-  store.appendActiveContainer(container);
-  emit("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 lang="scss" scoped>
-.panel {
-  min-height: 400px;
-  width: 580px;
-}
-
-@media screen and (max-width: 768px) {
-  .panel {
-    min-height: 200px;
-    width: auto;
-    margin-left: 0.25rem!important;
-    margin-right: 0.25rem!important;
-  }
-}
-
-.running {
-  color: var(--primary-color);
-}
-
-.exited {
-  color: var(--scheme-main-ter);
-}
-
-.column-icon {
-  &:hover {
-    color: var(--secondary-color);
-  }
-}
-
-:deep(a.dropdown-item) {
-  padding-right: 1em;
-  .media-right {
-    visibility: hidden;
-  }
-  &:hover .media-right {
-    visibility: visible;
-  }
-}
-
-.icon {
-  vertical-align: middle;
+<style scoped>
+@reference "@/main.css";
+:deep(mark) {
+  @apply bg-transparent text-inherit underline underline-offset-2;
 }
 </style>

assets/components/GroupMenu.vue

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

assets/components/GroupedViewer/GroupedLog.vue

@@ -0,0 +1,47 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="group.containers.length && ready">
+    <template #header>
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <ContainerDropdown :containers="group.containers">
+          {{ $t("label.container", group.containers.length) }}
+        </ContainerDropdown>
+        <MultiContainerStat class="ml-auto" :containers="group.containers" />
+        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
+      </div>
+    </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/HostCard.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="card bg-base-100">
+    <div class="card-body flex gap-2 max-md:p-4">
+      <div class="flex flex-row 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="ml-auto flex flex-row flex-wrap gap-x-2 text-sm max-md:text-xs md:gap-3">
+          <li class="flex items-center gap-1">
+            <octicon:container-24 class="inline-block" />
+            {{ $t("label.container", hostContainers.length) }}
+          </li>
+          <li class="flex items-center gap-1"><mdi:docker class="inline-block" /> {{ host.dockerVersion }}</li>
+        </ul>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2 md:gap-3" v-if="stats">
+        <MetricCard
+          :icon="PhCpu"
+          :value="stats.weighted.movingAverage.totalCPU"
+          :chartData="cpuHistory"
+          container-class="border-primary/40 bg-primary/20"
+          text-class="text-primary"
+          bar-class="bg-primary"
+          :formatValue="(value) => `${value.toFixed(1)}%`"
+          :label="`${host.nCPU} CPU`"
+        />
+
+        <MetricCard
+          :icon="PhMemory"
+          :value="stats.weighted.movingAverage.totalMemUsage"
+          :chartData="memHistory"
+          container-class="border-secondary/40 bg-secondary/20"
+          text-class="text-secondary"
+          bar-class="bg-secondary"
+          :formatValue="(value) => formatBytes(value, { decimals: 1 })"
+          :label="formatBytes(host.memTotal, { decimals: 1 })"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Host } from "@/stores/hosts";
+import { Container } from "@/models/Container";
+// @ts-ignore
+import PhCpu from "~icons/ph/cpu";
+// @ts-ignore
+import PhMemory from "~icons/ph/memory";
+
+const props = defineProps<{
+  host: Host;
+}>();
+
+const containerStore = useContainerStore();
+const { containers } = storeToRefs(containerStore) as unknown as {
+  containers: Ref<Container[]>;
+};
+
+const hostContainers = computed(() =>
+  containers.value.filter((container) => container.host === props.host.id && container.state === "running"),
+);
+
+function toContainerCores(container: Container): number {
+  if (container.cpuLimit && container.cpuLimit > 0) {
+    return 1;
+  }
+  return props.host.nCPU ?? 1;
+}
+
+type TotalStat = {
+  totalCPU: number;
+  totalMem: number;
+  totalMemUsage: number;
+};
+
+const totalStat = ref<TotalStat>({ totalCPU: 0, totalMem: 0, totalMemUsage: 0 });
+const { history, reset } = useSimpleRefHistory(totalStat, { capacity: 300 });
+
+const cpuHistory = computed(() =>
+  history.value.map((stat) => ({
+    percent: stat.totalCPU,
+    value: stat.totalCPU,
+  })),
+);
+const memHistory = computed(() =>
+  history.value.map((stat) => ({
+    percent: stat.totalMem,
+    value: stat.totalMemUsage,
+  })),
+);
+
+const stats = reactive({ mostRecent: totalStat, weighted: useExponentialMovingAverage(totalStat) });
+
+watch(
+  () => hostContainers.value,
+  () => {
+    const initial: TotalStat[] = [];
+
+    for (let i = 1; i <= 300; i++) {
+      const stat = hostContainers.value.reduce(
+        (acc, container) => {
+          const item = container.statsHistory.at(-i);
+          if (!item) {
+            return acc;
+          }
+          const cores = toContainerCores(container);
+          return {
+            totalCPU: acc.totalCPU + item.cpu / cores,
+            totalMem: acc.totalMem + item.memory,
+            totalMemUsage: acc.totalMemUsage + item.memoryUsage,
+          };
+        },
+        { totalCPU: 0, totalMem: 0, totalMemUsage: 0 },
+      );
+      initial.push(stat);
+    }
+    reset({ initial: initial.reverse() });
+    stats.weighted.reset(initial.at(-1)!);
+  },
+  { immediate: true },
+);
+
+useIntervalFn(() => {
+  totalStat.value = hostContainers.value.reduce(
+    (acc, container) => {
+      const cores = toContainerCores(container);
+      return {
+        totalCPU: acc.totalCPU + container.stat.cpu / cores,
+        totalMem: acc.totalMem + container.stat.memory,
+        totalMemUsage: acc.totalMemUsage + container.stat.memoryUsage,
+      };
+    },
+    { totalCPU: 0, totalMem: 0, totalMemUsage: 0 },
+  );
+}, 1000);
+</script>

assets/components/HostList.vue

@@ -0,0 +1,11 @@
+<template>
+  <ul class="grid gap-4 md:grid-cols-[repeat(auto-fill,minmax(480px,1fr))]">
+    <li v-for="host in hosts" :key="host.id">
+      <HostCard :host="host" />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+const { hosts } = useHosts();
+</script>

assets/components/HostMenu.vue

@@ -0,0 +1,251 @@
+<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-all')"
+          >
+            <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">
+          <ion:ellipsis-vertical />
+        </label>
+        <ul
+          tabindex="0"
+          class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border 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>
+              {{ $t("label.show-all-containers") }}
+            </a>
+            <a class="text-sm capitalize" @click="collapseAll()">
+              <material-symbols-light:collapse-all class="w-4" />
+              {{ $t("label.collapse-all") }}
+            </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 }} ({{ containers.length }})
+
+              <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-all')"
+              >
+                <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, groupContainers } 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);
+  }
+  if (document.activeElement instanceof HTMLElement) {
+    document.activeElement.blur();
+  }
+};
+
+const collapseAll = () => {
+  menuItems.value.forEach(({ label }) => {
+    collapsedGroups.value.add(label);
+  });
+  if (document.activeElement instanceof HTMLElement) {
+    document.activeElement.blur();
+  }
+};
+
+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))) {
+    const shouldGroup =
+      groupContainers.value === "always" || (groupContainers.value === "at-least-2" && containers.length > 1);
+
+    if (shouldGroup) {
+      items.push({ label, containers, icon: Stack });
+    } else {
+      for (const container of containers) {
+        singular.push(container);
+      }
+    }
+  }
+
+  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

@@ -0,0 +1,43 @@
+<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 items-center gap-1.5 truncate md:gap-2">
+          <ph:computer-tower />
+          <div class="inline-flex font-mono text-sm">
+            <div class="font-semibold">{{ host.name }}</div>
+          </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,73 +0,0 @@
-<template>
-  <div ref="root" class="infinte-loader">
-    <div class="spinner" v-show="isLoading">
-      <div class="bounce1"></div>
-      <div class="bounce2"></div>
-      <div class="bounce3"></div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const { onLoadMore = () => {}, enabled } = defineProps<{
-  onLoadMore: () => 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>
-
-<style scoped lang="scss">
-.infinte-loader {
-  min-height: 1px;
-}
-.spinner {
-  margin: 10px auto 0;
-  width: 70px;
-  text-align: center;
-
-  & > div {
-    width: 12px;
-    height: 12px;
-    background-color: var(--primary-color);
-    border-radius: 100%;
-    display: inline-block;
-    animation: sk-bouncedelay 0.8s infinite ease-in-out both;
-  }
-  & .bounce1 {
-    animation-delay: -0.32s;
-  }
-
-  & .bounce2 {
-    animation-delay: -0.16s;
-  }
-}
-
-@keyframes sk-bouncedelay {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
-  }
-}
-</style>

assets/components/K8sMenu.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="flex items-center">
+    <div class="breadcrumbs flex-1">
+      <ul>
+        <li>
+          <a @click.prevent="setNamespace(null)" class="link-primary">{{ $t("label.namespaces") }}</a>
+        </li>
+        <li v-if="selectedNamespace === 'all'">
+          {{ $t("label.all-namespaces") }}
+        </li>
+        <li v-else-if="selectedNamespace" class="cursor-default">
+          <router-link
+            :to="{
+              name: '/namespace/[name]',
+              params: { name: selectedNamespace },
+            }"
+            class="btn btn-outline btn-primary btn-xs"
+            active-class="btn-active"
+          >
+            <ph:arrows-merge />
+            {{ selectedNamespace }}
+          </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 border-base-content/20 z-50 w-52 border p-1 shadow-sm"
+        >
+          <li>
+            <a class="text-sm capitalize" @click="collapseAll()">
+              <material-symbols-light:collapse-all class="w-4" />
+              {{ $t("label.collapse-all") }}
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <SlideTransition :slide-right="selectedNamespace !== null">
+    <template #left>
+      <ul class="menu p-0">
+        <li>
+          <a @click.prevent="setNamespace('all')">
+            <ph:circles-four />
+            {{ $t("label.all-namespaces") }}
+          </a>
+        </li>
+        <li v-for="ns in namespaces" :key="ns.name">
+          <a @click.prevent="setNamespace(ns.name)">
+            <ph:circles-four />
+            {{ ns.name }}
+          </a>
+        </li>
+      </ul>
+    </template>
+    <template #right>
+      <ul class="menu w-full p-0 text-[0.95rem]" ref="menu">
+        <li v-for="{ name, owners } in filteredNamespaces" :key="name">
+          <details open>
+            <summary class="text-base-content/80 font-light">
+              <ph:stack />
+              {{ name }} ({{ owners.length }})
+
+              <router-link
+                :to="{ name: '/namespace/[name]', params: { name } }"
+                class="btn btn-square btn-outline btn-primary btn-xs"
+                active-class="btn-active"
+                :title="$t('tooltip.merge-all')"
+              >
+                <ph:arrows-merge />
+              </router-link>
+            </summary>
+            <ul>
+              <li v-for="owner in owners" :key="`${owner.kind}-${owner.name}`">
+                <router-link :to="{ name: '/owner/[name]', params: { name: owner.name } }" active-class="menu-active">
+                  <ph:stack-simple />
+                  <div class="truncate">{{ owner.kind }}/{{ owner.name }}</div>
+                </router-link>
+              </li>
+            </ul>
+          </details>
+        </li>
+
+        <li v-if="ownersWithoutNamespace.length > 0">
+          <details open>
+            <summary class="text-base-content/80 font-light">
+              <ph:circles-four />
+              {{ $t("label.owners") }} ({{ ownersWithoutNamespace.length }})
+            </summary>
+            <ul>
+              <li v-for="owner in ownersWithoutNamespace" :key="`${owner.kind}-${owner.name}`">
+                <router-link :to="{ name: '/owner/[name]', params: { name: owner.name } }" active-class="menu-active">
+                  <ph:stack-simple />
+                  <div class="truncate">{{ owner.kind }}/{{ owner.name }}</div>
+                </router-link>
+              </li>
+            </ul>
+          </details>
+        </li>
+      </ul>
+    </template>
+  </SlideTransition>
+</template>
+
+<script lang="ts" setup>
+const store = useK8sStore();
+
+const { namespaces, owners } = storeToRefs(store);
+
+const selectedNamespace = ref<string | null>("all");
+
+const setNamespace = (namespace: string | null) => (selectedNamespace.value = namespace);
+
+const filteredNamespaces = computed(() => {
+  if (selectedNamespace.value === null || selectedNamespace.value === "all") {
+    return namespaces.value;
+  }
+  return namespaces.value.filter((ns) => ns.name === selectedNamespace.value);
+});
+
+const ownersWithoutNamespace = computed(() => {
+  const filtered = owners.value.filter((owner) => !owner.namespace);
+  if (selectedNamespace.value === null || selectedNamespace.value === "all") {
+    return filtered;
+  }
+  return [];
+});
+
+const menu = useTemplateRef("menu");
+
+const collapseAll = () => {
+  const details = menu.value?.querySelectorAll("details");
+  details?.forEach((detail) => (detail.open = false));
+};
+</script>

assets/components/K8sViewer/NamespaceLog.vue

@@ -0,0 +1,43 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="namespace.name">
+    <template #header>
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <div class="@container flex flex-1 items-center gap-1.5 md:gap-2">
+          <ph:stack />
+          <div class="font-mono text-sm font-semibold">{{ namespace.name }}</div>
+          <ContainerDropdown :containers="namespace.containers">
+            {{ $t("label.container", namespace.containers.length) }}
+          </ContainerDropdown>
+        </div>
+        <MultiContainerStat class="ml-auto" :containers="namespace.containers" />
+        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
+      </div>
+    </template>
+    <template #default>
+      <ViewerWithSource
+        ref="viewer"
+        :stream-source="useNamespaceStream"
+        :entity="namespace"
+        :visible-keys="new Map<string[], boolean>()"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import { K8sNamespace } from "@/stores/k8s";
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+import { ComponentExposed } from "vue-component-type-helpers";
+
+const { namespace, scrollable = false } = defineProps<{
+  scrollable?: boolean;
+  namespace: K8sNamespace;
+}>();
+
+const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
+
+provideLoggingContext(
+  toRef(() => namespace.containers),
+  { showContainerName: true, showHostname: false },
+);
+</script>

assets/components/K8sViewer/OwnerLog.vue

@@ -0,0 +1,43 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="owner.name">
+    <template #header>
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <div class="@container flex flex-1 items-center gap-1.5 md:gap-2">
+          <ph:stack-simple />
+          <div class="font-mono text-sm font-semibold">{{ owner.kind }}/{{ owner.name }}</div>
+          <ContainerDropdown :containers="owner.containers">
+            {{ $t("label.container", owner.containers.length) }}
+          </ContainerDropdown>
+        </div>
+        <MultiContainerStat class="ml-auto" :containers="owner.containers" />
+        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
+      </div>
+    </template>
+    <template #default>
+      <ViewerWithSource
+        ref="viewer"
+        :stream-source="useOwnerStream"
+        :entity="owner"
+        :visible-keys="new Map<string[], boolean>()"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import { K8sOwner } from "@/stores/k8s";
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+import { ComponentExposed } from "vue-component-type-helpers";
+
+const { owner, scrollable = false } = defineProps<{
+  scrollable?: boolean;
+  owner: K8sOwner;
+}>();
+
+const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
+
+provideLoggingContext(
+  toRef(() => owner.containers),
+  { showContainerName: true, showHostname: false },
+);
+</script>

assets/components/Links.vue

@@ -0,0 +1,62 @@
+<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>
+        <template v-if="config.disableAvatars || !config.user.email">
+          <material-symbols:person class="size-6" />
+        </template>
+        <template v-else>
+          <img
+            class="ring-base-content/60 size-6 max-w-none rounded-full p-px ring-1"
+            :src="withBase('/api/profile/avatar')"
+          />
+        </template>
+      </template>
+      <template #content>
+        <div class="p-2">
+          <div class="font-bold">
+            {{ config.user.name }}
+          </div>
+          <div v-if="config.user.email" class="text-sm font-light">
+            {{ config.user.email }}
+          </div>
+        </div>
+        <ul v-if="config.authProvider === 'simple' || config.logoutUrl" class="menu mt-4 p-0">
+          <li>
+            <button @click.prevent="logout()" class="text-primary p-2">
+              <material-symbols:logout />
+              {{ $t("button.logout") }}
+            </button>
+          </li>
+        </ul>
+      </template>
+    </dropdown>
+  </div>
+</template>
+<script lang="ts" setup>
+const { logoutUrl } = config;
+
+async function logout() {
+  if (logoutUrl) {
+    location.href = logoutUrl;
+  } else {
+    await fetch(withBase("/api/token"), {
+      method: "DELETE",
+    });
+
+    location.reload();
+  }
+}
+</script>

assets/components/LogViewer/ComplexLogItem.vue

@@ -1,63 +1,75 @@
 <template>
-  <div class="columns is-1 is-variable">
-    <div class="column is-narrow" v-if="showTimestamp">
-      <log-date :date="logEntry.date"></log-date>
+  <DefineTemplate v-slot="{ data }">
+    <ul class="inline-flex flex-wrap space-x-4" @click="preventDefaultOnLinks">
+      <li v-for="(value, name) in data" :key="name" v-if="isObject(data)">
+        <span class="key">{{ name }}=</span>
+        <span class="value" v-if="value === null">&lt;null&gt;</span>
+        <ReuseTemplate :data="value" v-else-if="isObject(value) || Array.isArray(value)" />
+        <span v-else class="value" :class="typeof value" v-html="stripAnsi(value.toString())"></span>
+      </li>
+      <li v-else-if="Array.isArray(data)">
+        <ul class="array inline-flex flex-wrap space-x-1">
+          <li
+            v-for="(item, index) in data"
+            :key="index"
+            class="after:text-base-content/70 not-last:after:content-[',']"
+          >
+            <ReuseTemplate :data="item" v-if="isObject(item) || Array.isArray(item)" />
+            <span v-else class="value" :class="typeof item" v-html="stripAnsi(item.toString())"></span>
+          </li>
+        </ul>
+      </li>
+      <li class="key" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
+    </ul>
+  </DefineTemplate>
+  <LogItem :logEntry>
+    <LogLevel class="flex select-none" :level="logEntry.level" />
+    <div @click="containers.length > 0 && showDrawer(LogDetails, { entry: logEntry })" class="cursor-pointer">
+      <ReuseTemplate :data="validValues" />
     </div>
-    <div class="column">
-      <ul class="fields" :class="{ expanded }" @click="expanded = !expanded">
-        <li v-for="(value, name) in validValues(logEntry.message)">
-          <span class="has-text-grey">{{ name }}=</span>
-          <span class="has-text-weight-bold" v-html="markSearch(value)"></span>
-        </li>
-      </ul>
-      <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
-    </div>
-  </div>
+  </LogItem>
 </template>
 <script lang="ts" setup>
+import stripAnsi from "strip-ansi";
 import { type ComplexLogEntry } from "@/models/LogEntry";
-
-const { markSearch } = useSearchFilter();
+import LogDetails from "./LogDetails.vue";
 
 const { logEntry } = defineProps<{
   logEntry: ComplexLogEntry;
-  visibleKeys: string[][];
+  showContainerName?: boolean;
 }>();
 
-let expanded = $ref(false);
+const { containers } = useLoggingContext();
 
-function validValues(obj: Record<string, any>) {
-  return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value !== undefined));
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
+
+const validValues = computed(() => {
+  return Object.fromEntries(Object.entries(logEntry.message).filter(([_, value]) => value !== undefined));
+});
+
+const showDrawer = useDrawer();
+function preventDefaultOnLinks(event: MouseEvent) {
+  if (event.target instanceof HTMLAnchorElement && event.target.rel?.includes("external")) {
+    event.stopImmediatePropagation();
+  }
 }
 </script>
 
-<style lang="scss" scoped>
-.fields {
-  display: inline-block;
-  list-style: none;
+<style scoped>
+@reference "@/main.css";
+.key {
+  @apply text-base-content/70 font-light;
+}
 
-  &:hover {
-    cursor: pointer;
-    &::after {
-      content: "expand json";
-      color: var(--secondary-color);
-      display: inline-block;
-      margin-left: 0.5em;
-      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    }
-  }
+.value {
+  @apply text-base-content font-bold;
+}
 
-  &.expanded:hover {
-    &::after {
-      content: "collapse json";
-    }
-  }
+.array {
+  @apply before:text-base-content/80 after:text-base-content/80 before:content-['['] after:content-[']'];
+}
 
-  li {
-    display: inline-block;
-    & + li {
-      margin-left: 1em;
-    }
-  }
+.string {
+  @apply before:content-['"'] after:content-['"'];
 }
 </style>

assets/components/LogViewer/ContainerEventLogItem.vue

@@ -0,0 +1,23 @@
+<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>
+@reference "@/main.css";
+[data-event="container-stopped"] {
+  @apply text-red;
+}
+[data-event="container-started"] {
+  @apply text-green;
+}
+</style>

assets/components/LogViewer/ContainerStat.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="is-size-7 is-uppercase columns is-marginless is-mobile is-vcentered" v-if="container.stat">
-    <stat-monitor
-      class="column is-narrow"
-      :data="memoryData"
-      label="mem"
-      :stat-value="formatBytes(container.stat.memoryUsage)"
-    ></stat-monitor>
-    <stat-monitor
-      class="column is-narrow"
-      :data="cpuData"
-      label="load"
-      :stat-value="container.stat.cpu + '%'"
-    ></stat-monitor>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Container } from "@/models/Container";
-import { type ComputedRef } from "vue";
-
-const container = inject("container") as ComputedRef<Container>;
-
-const cpuData = computedWithControl(
-  () => container.value.getLastStat(),
-  () => {
-    const history = container.value.getStatHistory();
-    const points: Point<unknown>[] = history.map((stat, i) => ({
-      x: i,
-      y: stat.snapshot.cpu,
-      value: stat.snapshot.cpu + "%",
-    }));
-    return points;
-  }
-);
-
-const memoryData = computedWithControl(
-  () => container.value.getLastStat(),
-  () => {
-    const history = container.value.getStatHistory();
-    const points: Point<string>[] = history.map((stat, i) => ({
-      x: i,
-      y: stat.snapshot.memory,
-      value: formatBytes(stat.snapshot.memoryUsage),
-    }));
-    return points;
-  }
-);
-</script>
-
-<style lang="scss" scoped>
-.has-spacer {
-  &::after {
-    content: " ";
-  }
-}
-
-.has-border {
-  border: 1px solid var(--primary-color);
-  border-radius: 3px;
-  padding: 1px 1px 0 1px;
-  display: flex;
-  overflow: hidden;
-  padding-top: 0.25em;
-}
-
-.has-background-body-color {
-  background-color: var(--body-background-color);
-}
-
-.is-top-left {
-  position: absolute;
-  top: 0;
-  left: 0.75em;
-}
-</style>

assets/components/LogViewer/ContainerTitle.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="columns is-marginless has-text-weight-bold is-family-monospace">
-    <span class="column is-ellipsis">
-      {{ container.name }}
-      <span class="tag is-dark">{{ container.image.replace(/@sha.*/, "") }}</span>
-    </span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Container } from "@/models/Container";
-import { type ComputedRef } from "vue";
-
-const container = inject("container") as ComputedRef<Container>;
-</script>
-
-<style lang="scss" scoped></style>

assets/components/LogViewer/DockerEventLogItem.vue

@@ -1,24 +0,0 @@
-<template>
-  <span class="text" :data-event="logEntry.event" v-html="logEntry.message"></span>
-</template>
-<script lang="ts" setup>
-import { DockerEventLogEntry } from "@/models/LogEntry";
-
-defineProps<{
-  logEntry: DockerEventLogEntry;
-}>();
-</script>
-
-<style lang="scss" scoped>
-span {
-  &[data-event="container-stopped"] {
-    color: #f14668;
-  }
-  &[data-event="container-started"] {
-    color: hsl(141, 53%, 53%);
-  }
-  &.text {
-    white-space: pre-wrap;
-  }
-}
-</style>

assets/components/LogViewer/EventSource.spec.ts

@@ -0,0 +1,215 @@
+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 = class IntersectionObserver {
+      observe = vi.fn();
+      disconnect = vi.fn();
+      unobserve = vi.fn();
+      takeRecords = vi.fn();
+      root = null;
+      rootMargin = "";
+      thresholds = [];
+    } as any;
+    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",
+          },
+        },
+        {
+          name: "/container/[id].time.[datetime]",
+          path: "/container/:id/time/:datetime",
+          component: {
+            template: "Test from createLogEventSource",
+          },
+        },
+      ],
+    });
+
+    return mount(Component, {
+      global: {
+        plugins: [
+          router,
+          createTestingPinia({
+            createSpy: vi.fn,
+            stubActions: false,
+            initialState: {
+              container: { containers: [{ id: "abc", image: "test:v123", host: "localhost" }] },
+            },
+          }),
+          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"]),
+            historical: ref(false),
+          },
+        },
+      },
+      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",
+          0,
+          0,
+          [],
+        ),
+      },
+    });
+  }
+
+  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, "rm": "This is a message.", "c": "abc"}`,
+    });
+
+    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, "rm": "This is a message.", "c": "abc"}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul[data-logs]").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, "rm": "foo bar", "c": "abc"}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul[data-logs]").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, "c": "abc"}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul[data-logs]").html()).toMatchSnapshot();
+    });
+  });
+});

assets/components/LogViewer/EventSource.vue

@@ -0,0 +1,76 @@
+<template>
+  <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">
+    {{ $t("label.no-logs") }}
+  </div>
+  <slot :messages="messages" v-else></slot>
+  <IndeterminateBar :color v-if="!historical" />
+</template>
+
+<script lang="ts" setup generic="T">
+import { LogStreamSource } from "@/composable/eventStreams";
+const route = useRoute();
+
+const { entity, streamSource } = $defineProps<{
+  streamSource: (t: Ref<T>) => LogStreamSource;
+  entity: T;
+}>();
+
+const { historical } = useLoggingContext();
+
+const { messages, opened, loading, error } = streamSource(toRef(() => entity));
+
+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 = []),
+});
+
+if (historical.value && route.query.logId) {
+  watchOnce(messages, async () => {
+    await nextTick();
+    document.getElementById(route.query.logId as string)?.scrollIntoView({ behavior: "instant", block: "center" });
+  });
+}
+
+const sizes = ref<string[]>([]);
+watch(
+  opened,
+  (value) => {
+    if (value) return;
+    const sizeOptions = [
+      "w-2/12",
+      "w-3/12",
+      "w-4/12",
+      "w-5/12",
+      "w-6/12",
+      "w-7/12",
+      "w-8/12",
+      "w-9/12",
+      "w-10/12",
+      "w-11/12",
+      "w-full",
+    ];
+    sizes.value = Array.from({ length: 18 }, () => sizeOptions[Math.floor(Math.random() * sizeOptions.length)]);
+  },
+  {
+    flush: "sync",
+    immediate: true,
+  },
+);
+</script>

assets/components/LogViewer/FieldList.vue

@@ -1,76 +0,0 @@
-<template>
-  <ul v-if="expanded" ref="root">
-    <li v-for="(value, name) in fields">
-      <template v-if="isObject(value)">
-        <span class="has-text-grey">{{ name }}=</span>
-        <field-list
-          :fields="value"
-          :parent-key="parentKey.concat(name)"
-          :visible-keys="visibleKeys"
-          expanded
-        ></field-list>
-      </template>
-      <template v-else-if="Array.isArray(value)">
-        <a @click="toggleField(name)"> {{ hasField(name) ? "remove" : "add" }}&nbsp;</a>
-        <span class="has-text-grey">{{ name }}=</span>[
-        <span class="has-text-weight-bold" v-for="(item, index) in value">
-          {{ item }}
-          <span v-if="index !== value.length - 1">,</span>
-        </span>
-        ]
-      </template>
-      <template v-else>
-        <a @click="toggleField(name)"> {{ hasField(name) ? "remove" : "add" }}&nbsp;</a>
-        <span class="has-text-grey">{{ name }}=</span><span class="has-text-weight-bold">{{ value }}</span>
-      </template>
-    </li>
-  </ul>
-</template>
-<script lang="ts" setup>
-import { arrayEquals, isObject } from "@/utils";
-
-const {
-  fields,
-  expanded = false,
-  parentKey = [],
-  visibleKeys = [],
-} = defineProps<{
-  fields: Record<string, any>;
-  expanded?: boolean;
-  parentKey?: string[];
-  visibleKeys?: string[][];
-}>();
-
-const root = ref<HTMLElement>();
-
-async function toggleField(field: string) {
-  const index = fieldIndex(field);
-
-  if (index > -1) {
-    visibleKeys.splice(index, 1);
-  } else {
-    visibleKeys.push(parentKey.concat(field));
-  }
-
-  await nextTick();
-
-  root.value?.scrollIntoView({
-    block: "center",
-  });
-}
-
-function hasField(field: string) {
-  return fieldIndex(field) > -1;
-}
-
-function fieldIndex(field: string) {
-  const path = parentKey.concat(field);
-  return visibleKeys.findIndex((keys) => arrayEquals(toRaw(keys), toRaw(path)));
-}
-</script>
-
-<style lang="scss" scoped>
-ul {
-  margin-left: 2em;
-}
-</style>

assets/components/LogViewer/GroupedLogItem.vue

@@ -0,0 +1,37 @@
+<template>
+  <LogItem :logEntry>
+    <div class="flex flex-col">
+      <div v-for="(msg, index) in logEntry.message" :key="index" class="flex items-start gap-x-2">
+        <LogLevel class="flex select-none" :level="logEntry.level" :position="getPosition(index)" />
+        <div
+          class="[word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-pre"
+          v-html="colorize(msg)"
+          :class="{ 'min-h-4': msg === '' }"
+        ></div>
+      </div>
+    </div>
+  </LogItem>
+</template>
+<script lang="ts" setup>
+import { GroupedLogEntry, type Position } from "@/models/LogEntry";
+import AnsiConvertor from "ansi-to-html";
+
+const ansiConvertor = new AnsiConvertor({
+  escapeXML: false,
+  fg: "var(--color-base-content)",
+  bg: "var(--color-base-100)",
+});
+
+const { logEntry } = defineProps<{
+  logEntry: GroupedLogEntry;
+}>();
+
+const getPosition = (index: number): Position => {
+  const len = logEntry.message.length;
+  if (index === 0) return "start";
+  if (index === len - 1) return "end";
+  return "middle";
+};
+
+const colorize = (value: string) => ansiConvertor.toHtml(value);
+</script>

assets/components/LogViewer/LoadMoreLogItem.vue

@@ -0,0 +1,31 @@
+<template>
+  <div ref="root" class="flex min-h-[1px] flex-1 content-center justify-center">
+    <span class="loading loading-bars loading-md text-primary m-2" v-show="isLoading"></span>
+  </div>
+</template>
+<script lang="ts" setup>
+import { LoadMoreLogEntry } from "@/models/LogEntry";
+
+const { logEntry } = defineProps<{
+  logEntry: LoadMoreLogEntry;
+}>();
+
+const isLoading = ref(false);
+const root = ref<HTMLElement>();
+
+useIntersectionObserver(root, async (entries) => {
+  if (entries[0].intersectionRatio <= 0) return;
+  if (isLoading.value) return;
+  const scrollingParent = root.value?.closest("[data-scrolling]") || document.documentElement;
+  const previousHeight = scrollingParent.scrollHeight;
+  isLoading.value = true;
+  await logEntry.loadMore();
+  isLoading.value = false;
+  await nextTick();
+  if (logEntry.rememberScrollPosition) {
+    scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight;
+  }
+});
+</script>
+
+<style scoped></style>

assets/components/LogViewer/LogActions.vue

@@ -0,0 +1,169 @@
+<template>
+  <div
+    class="dropdown dropdown-hover absolute -left-2 z-10 font-sans"
+    :class="shouldShowBelow ? 'dropdown-right' : 'dropdown-right dropdown-end'"
+    v-show="container"
+    ref="dropdownRef"
+    @mouseenter="checkDropdownPosition"
+  >
+    <router-link
+      v-if="isSearching"
+      @click="resetSearch()"
+      tabindex="0"
+      class="btn btn-square btn-xs border-base-content/20 bg-base-100 pointer-events-auto! opacity-0 shadow-sm group-hover/entry:opacity-90"
+      :to="{
+        name: '/container/[id].time.[datetime]',
+        params: { id: container.id, datetime: logEntry.date.toISOString() },
+        query: { logId: logEntry.id },
+      }"
+    >
+      <material-symbols:eye-tracking />
+    </router-link>
+    <button
+      tabindex="0"
+      class="btn btn-square btn-xs border-base-content/20 bg-base-100 border opacity-0 shadow-sm group-hover/entry:opacity-90"
+      v-else
+    >
+      <ion:ellipsis-vertical />
+    </button>
+    <ul
+      tabindex="0"
+      class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 text-sm shadow-sm"
+      @click="hideMenu"
+    >
+      <li v-if="isSearching">
+        <router-link
+          @click="resetSearch()"
+          :to="{
+            name: '/container/[id].time.[datetime]',
+            params: { id: container.id, datetime: logEntry.date.toISOString() },
+            query: { logId: logEntry.id },
+          }"
+        >
+          <material-symbols:eye-tracking />
+          {{ $t("action.see-in-context") }}
+        </router-link>
+      </li>
+      <li>
+        <a
+          @click="copyLogMessage()"
+          :disabled="!isSupported"
+          :title="!isSupported ? $t('error.copy-not-supported') : ''"
+          :class="{ 'cursor-not-allowed opacity-50': !isSupported }"
+        >
+          <material-symbols:content-copy />
+          {{ $t("action.copy-log") }}
+        </a>
+      </li>
+      <li>
+        <a
+          @click="copyPermalink()"
+          :disabled="!isSupported"
+          :title="!isSupported ? $t('error.copy-not-supported') : ''"
+          :class="{ 'cursor-not-allowed opacity-50': !isSupported }"
+        >
+          <material-symbols:link />
+          {{ $t("action.copy-link") }}
+        </a>
+      </li>
+
+      <li v-if="logEntry instanceof ComplexLogEntry">
+        <a @click="showDrawer(LogDetails, { entry: logEntry })">
+          <material-symbols:code-blocks-rounded />
+          {{ $t("action.show-details") }}
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import stripAnsi from "strip-ansi";
+import { Container } from "@/models/Container";
+import { LogEntry, SimpleLogEntry, ComplexLogEntry, GroupedLogEntry, JSONObject } from "@/models/LogEntry";
+import LogDetails from "./LogDetails.vue";
+
+const { logEntry, container } = defineProps<{
+  logEntry: LogEntry<string | JSONObject>;
+  container: Container;
+}>();
+
+const { showToast } = useToast();
+const showDrawer = useDrawer();
+const router = useRouter();
+const { isSearching, resetSearch } = useSearchFilter();
+
+const { copy, isSupported, copied } = useClipboard();
+const { t } = useI18n();
+
+async function copyLogMessage() {
+  if (!isSupported.value) {
+    return;
+  }
+
+  if (logEntry instanceof ComplexLogEntry) {
+    await copy(stripAnsi(logEntry.rawMessage));
+  } else if (logEntry instanceof SimpleLogEntry) {
+    await copy(stripAnsi(logEntry.rawMessage));
+  } else if (logEntry instanceof GroupedLogEntry) {
+    await copy(stripAnsi(logEntry.message.join("\n")));
+  }
+
+  if (copied.value) {
+    showToast(
+      {
+        title: t("toasts.copied.title"),
+        message: t("toasts.copied.message"),
+        type: "info",
+      },
+      { expire: 2000 },
+    );
+  }
+}
+
+async function copyPermalink() {
+  if (!isSupported.value) {
+    return;
+  }
+  const url = router.resolve({
+    name: "/container/[id].time.[datetime]",
+    params: { id: container.id, datetime: logEntry.date.toISOString() },
+    query: { logId: logEntry.id },
+  }).href;
+
+  const resolved = new URL(url, window.location.origin);
+
+  await copy(resolved.href);
+
+  if (copied.value) {
+    showToast(
+      {
+        title: t("toasts.copied.title"),
+        message: t("toasts.copied.message"),
+        type: "info",
+      },
+      { expire: 2000 },
+    );
+  }
+}
+
+function hideMenu(e: MouseEvent) {
+  if (e.target instanceof HTMLAnchorElement) {
+    setTimeout(() => {
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+    }, 50);
+  }
+}
+
+const dropdownRef = useTemplateRef<HTMLDivElement>("dropdownRef");
+const shouldShowBelow = ref(false);
+
+function checkDropdownPosition() {
+  if (!dropdownRef.value) return;
+
+  const rect = dropdownRef.value.getBoundingClientRect();
+  shouldShowBelow.value = rect.top < 150;
+}
+</script>

assets/components/LogViewer/LogActionsToolbar.vue

@@ -1,69 +0,0 @@
-<template>
-  <dropdown-menu class="is-right">
-    <a class="dropdown-item" @click="onClearClicked">
-      <div class="level is-justify-content-start">
-        <div class="level-left">
-          <div class="level-item">
-            <octicon-trash-24 class="mr-4" />
-          </div>
-        </div>
-        <div class="level-right">
-          <div class="level-item">{{ $t("toolbar.clear") }}</div>
-        </div>
-      </div>
-    </a>
-    <a class="dropdown-item" :href="`${base}/api/logs/download?id=${container.id}`">
-      <div class="level is-justify-content-start">
-        <div class="level-left">
-          <div class="level-item">
-            <octicon-download-24 class="mr-4" />
-          </div>
-        </div>
-        <div class="level-right">
-          <div class="level-item">{{ $t("toolbar.download") }}</div>
-        </div>
-      </div>
-    </a>
-    <hr class="dropdown-divider" />
-    <a class="dropdown-item" @click="showSearch = true">
-      <div class="level is-justify-content-start">
-        <div class="level-left">
-          <div class="level-item">
-            <mdi-light-magnify class="mr-4" />
-          </div>
-        </div>
-        <div class="level-right">
-          <div class="level-item">{{ $t("toolbar.search") }}</div>
-        </div>
-      </div>
-    </a>
-  </dropdown-menu>
-</template>
-
-<script lang="ts" setup>
-import { type ComputedRef } from "vue";
-import { Container } from "@/models/Container";
-
-const { showSearch } = useSearchFilter();
-const { base } = config;
-
-const { onClearClicked = (e: Event) => {} } = defineProps<{
-  onClearClicked: (e: Event) => void;
-}>();
-
-const container = inject("container") as ComputedRef<Container>;
-</script>
-
-<style lang="scss" scoped>
-#download.button,
-#clear.button {
-  .icon {
-    height: 80%;
-  }
-
-  &:hover {
-    color: var(--primary-color);
-    border-color: var(--primary-color);
-  }
-}
-</style>

assets/components/LogViewer/LogAnalytics.vue

@@ -0,0 +1,133 @@
+<template>
+  <aside>
+    <header class="flex items-center gap-4">
+      <h1 class="text-2xl max-md:hidden">{{ container.name }}</h1>
+      <h2 class="text-sm"><RelativeTime :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 }"
+            :disabled="state === 'downloading'"
+          ></textarea>
+          <div class="mt-2">
+            <span class="text-error" v-if="error">{{ error }}</span>
+            <span v-else-if="state === 'initializing'">{{ $t("analytics.creating_table") }}</span>
+            <span v-else-if="state === 'downloading'">{{
+              $t("analytics.downloading", { size: formatBytes(bytes, { decimals: 1 }) })
+            }}</span>
+            <span v-else-if="evaluating">{{ $t("analytics.evaluating_query") }}</span>
+            <span v-else>
+              {{ $t("analytics.total_records", { count: results.numRows.toLocaleString() }) }}
+              <template v-if="results.numRows > pageLimit">{{
+                $t("analytics.showing_first", { count: page.numRows.toLocaleString() })
+              }}</template>
+            </span>
+          </div>
+        </label>
+      </section>
+      <SQLTable :table="page" :loading="evaluating || state !== 'ready'" />
+    </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 state = ref<"downloading" | "ready" | "initializing">("downloading");
+const bytes = ref(0);
+
+const url = withBase(
+  `/api/hosts/${container.host}/containers/${container.id}/logs?stdout=1&stderr=1&everything&jsonOnly`,
+);
+
+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`);
+
+onMounted(async () => {
+  try {
+    state.value = "downloading";
+
+    const reader = response.body?.getReader();
+    if (!reader) throw new Error("No reader available from stream");
+
+    const chunks: Uint8Array[] = [];
+    bytes.value = 0;
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      chunks.push(value);
+      bytes.value += value.length;
+    }
+
+    const arrayBuffer = new Uint8Array(bytes.value);
+    let position = 0;
+    for (const chunk of chunks) {
+      arrayBuffer.set(chunk, position);
+      position += chunk.length;
+    }
+
+    await db.registerFileBuffer("logs.json", arrayBuffer);
+
+    state.value = "initializing";
+    await conn.query(
+      `CREATE TABLE logs AS SELECT unnest(m) FROM read_json('logs.json', ignore_errors = true, format = 'newline_delimited')`,
+    );
+
+    state.value = "ready";
+  } catch (e) {
+    console.error(e);
+    if (e instanceof Error) {
+      error.value = e.message;
+    }
+  }
+});
+
+const results = computedAsync(
+  async () => {
+    if (state.value === "ready") {
+      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;
+  state.value = "ready";
+});
+const page = computed(() =>
+  results.value.numRows > pageLimit ? results.value.slice(0, pageLimit) : results.value,
+) as unknown as ComputedRef<Table<Record<string, any>>>;
+</script>
+<style scoped></style>

assets/components/LogViewer/LogContainer.vue

@@ -1,70 +0,0 @@
-<template>
-  <scrollable-view :scrollable="scrollable" v-if="container">
-    <template #header v-if="showTitle">
-      <div class="mr-0 columns is-vcentered is-marginless is-hidden-mobile has-boxshadow">
-        <div class="column is-clipped is-paddingless">
-          <container-title @close="$emit('close')" />
-        </div>
-        <div class="column is-narrow is-paddingless">
-          <container-stat />
-        </div>
-
-        <div class="mr-2 column is-narrow is-paddingless">
-          <log-actions-toolbar :onClearClicked="onClearClicked" />
-        </div>
-        <div class="mr-2 column is-narrow is-paddingless" v-if="closable">
-          <button class="delete is-medium" @click="emit('close')"></button>
-        </div>
-      </div>
-    </template>
-    <template #default="{ setLoading }">
-      <log-viewer-with-source ref="viewer" @loading-more="setLoading($event)" />
-    </template>
-  </scrollable-view>
-</template>
-
-<script lang="ts" setup>
-import LogViewerWithSource from "./LogViewerWithSource.vue";
-
-const {
-  id,
-  showTitle = false,
-  scrollable = false,
-  closable = false,
-} = defineProps<{
-  id: string;
-  showTitle?: boolean;
-  scrollable?: boolean;
-  closable?: boolean;
-}>();
-
-const emit = defineEmits<{
-  (event: "close"): void;
-}>();
-
-const store = useContainerStore();
-
-const container = store.currentContainer($$(id));
-
-provide("container", container);
-
-const viewer = ref<InstanceType<typeof LogViewerWithSource>>();
-
-function onClearClicked() {
-  viewer.value?.clear();
-}
-</script>
-<style lang="scss" scoped>
-button.delete {
-  background-color: var(--scheme-main-ter);
-  opacity: 0.6;
-  &:after,
-  &:before {
-    background-color: var(--text-color);
-  }
-
-  &:hover {
-    opacity: 1;
-  }
-}
-</style>

assets/components/LogViewer/LogDate.vue

@@ -1,19 +1,10 @@
 <template>
-  <relative-time :date="date" class="date"></relative-time>
+  <Tag class="items-start!">
+    <DateTime :date="date" class="text-blue whitespace-nowrap" />
+  </Tag>
 </template>
 <script lang="ts" setup>
 defineProps<{
   date: Date;
 }>();
 </script>
-
-<style lang="scss" scoped>
-.date {
-  padding-left: 5px;
-  padding-right: 5px;
-  border-radius: 3px;
-  white-space: nowrap;
-  background-color: var(--scheme-main-ter);
-  color: #258ccd;
-}
-</style>

assets/components/LogViewer/LogDetails.vue

@@ -0,0 +1,200 @@
+<template>
+  <header class="flex items-center gap-4">
+    <Tag :data-level="entry.level" class="show-unknown 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"><RelativeTime :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="entry.rawMessage">
+          <button class="swap outline-hidden" @click="copy()" :class="{ 'hover:swap-active': copied }">
+            <mdi:check class="swap-on" />
+            <material-symbols: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.rawMessage)"></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>{{ 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 { 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();
+
+const { useSortable } = await import("@vueuse/integrations/useSortable");
+
+function toggleField(key: string[]) {
+  if (visibleKeys.value.size === 0) {
+    visibleKeys.value = new Map<string[], boolean>(fields.value.map(({ key }) => [key, true]));
+  }
+
+  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 rawFields = JSON.parse(entry.rawMessage);
+    const allFields = flattenJSONToMap(rawFields);
+    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(rawFields, 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: string) {
+  json = JSON.stringify(JSON.parse(json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")), 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 (match.startsWith('"')) {
+        if (match.endsWith(":")) {
+          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>
+@reference "@/main.css";
+.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/LogEventSource.spec.ts

@@ -1,203 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { createTestingPinia } from "@pinia/testing";
-// @ts-ignore
-import EventSource, { sources } from "eventsourcemock";
-import LogEventSource from "./LogEventSource.vue";
-import LogViewer from "./LogViewer.vue";
-import { settings } from "../../composables/settings";
-import { useSearchFilter } from "@/composables/search";
-import { vi, describe, expect, beforeEach, test, afterEach } from "vitest";
-import { computed, nextTick } from "vue";
-import { createRouter, createWebHistory } from "vue-router";
-
-vi.mock("@/stores/config", () => ({
-  __esModule: true,
-  default: { base: "" },
-}));
-
-/**
- * @vitest-environment jsdom
- */
-describe("<LogEventSource />", () => {
-  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.searchFilter.value = searchFilter;
-    if(searchFilter){
-      search.showSearch.value = true;
-    }
-
-    const router = createRouter({
-      history: createWebHistory("/"),
-      routes: [
-        {
-          path: "/",
-          component: {
-            template: "Test from createLogEventSource",
-          },
-        },
-      ],
-    });
-
-    return mount(LogEventSource, {
-      global: {
-        plugins: [router, createTestingPinia({ createSpy: vi.fn })],
-        components: {
-          LogViewer,
-        },
-        provide: {
-          container: computed(() => ({ id: "abc", image: "test:v123" })),
-          scrollingPaused: computed(() => false),
-        },
-      },
-      slots: {
-        default: `
-        <template #scoped="params"><log-viewer :messages="params.messages"></log-viewer></template>
-        `,
-      },
-      props: {},
-    });
-  }
-
-  test("renders correctly", async () => {
-    const wrapper = createLogEventSource();
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  test("should connect to EventSource", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
-    expect(sources["/api/logs/stream?id=abc&lastEventId="].readyState).toBe(1);
-    wrapper.unmount();
-  });
-
-  test("should close EventSource", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
-    wrapper.unmount();
-    expect(sources["/api/logs/stream?id=abc&lastEventId="].readyState).toBe(2);
-  });
-
-  test("should parse messages", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
-    sources["/api/logs/stream?id=abc&lastEventId="].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["/api/logs/stream?id=abc&lastEventId="].emitOpen();
-      sources["/api/logs/stream?id=abc&lastEventId="].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 messages with color", async () => {
-      const wrapper = createLogEventSource();
-      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
-      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
-        data: '{"ts":1560336942459,"m":"\\u001b[30mblack\\u001b[37mwhite", "id":1}',
-      });
-
-      vi.runAllTimers();
-      await nextTick();
-
-      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
-    });
-
-    test("should render messages with html entities", async () => {
-      const wrapper = createLogEventSource();
-      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
-      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
-        data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
-      });
-
-      vi.runAllTimers();
-      await nextTick();
-
-      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
-    });
-
-    test("should render dates with 12 hour style", async () => {
-      const wrapper = createLogEventSource({ hourStyle: "12" });
-      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
-      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
-        data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
-      });
-
-      vi.runAllTimers();
-      await nextTick();
-
-      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
-    });
-
-    test("should render dates with 24 hour style", async () => {
-      const wrapper = createLogEventSource({ hourStyle: "24" });
-      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
-      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
-        data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
-      });
-
-      vi.runAllTimers();
-      await nextTick();
-
-      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
-    });
-
-    test("should render messages with filter", async () => {
-      const wrapper = createLogEventSource({ searchFilter: "test" });
-      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
-      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
-        data: `{"ts":1560336942459, "m":"foo bar", "id":1}`,
-      });
-      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
-        data: `{"ts":1560336942459, "m":"test bar", "id":2}`,
-      });
-
-      vi.runAllTimers();
-      await nextTick();
-
-      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
-    });
-  });
-});

assets/components/LogViewer/LogEventSource.vue

@@ -1,25 +0,0 @@
-<template>
-  <infinite-loader :onLoadMore="fetchMore" :enabled="messages.length > 100"></infinite-loader>
-  <slot :messages="messages"></slot>
-</template>
-
-<script lang="ts" setup>
-import { Container } from "@/models/Container";
-import { type ComputedRef } from "vue";
-
-const emit = defineEmits<{
-  (e: "loading-more", value: boolean): void;
-}>();
-
-const container = inject("container") as ComputedRef<Container>;
-const { messages, loadOlderLogs } = useLogStream(container);
-
-const beforeLoading = () => emit("loading-more", true);
-const afterLoading = () => emit("loading-more", false);
-
-defineExpose({
-  clear: () => (messages.value = []),
-});
-
-const fetchMore = () => loadOlderLogs({ beforeLoading, afterLoading });
-</script>

assets/components/LogViewer/LogItem.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
+    <LogActions :logEntry :container />
+
+    <LogStd :std="logEntry.std" class="shrink-0 select-none" v-if="showStd" />
+
+    <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[>_*:nth-of-type(2)]:flex-col-reverse md:flex-row!">
+      <RandomColorTag class="w-30 shrink-0 select-none md:w-40" :value="host.name" v-if="showHostname" />
+      <RandomColorTag
+        v-if="showContainerName"
+        class="w-30 shrink-0 select-none group-[.compact]:flex-1 md:w-40"
+        :value="container.name"
+        truncateRight
+      />
+      <LogDate
+        v-if="showTimestamp"
+        :date="logEntry.date"
+        class="shrink-0 select-none"
+        :class="{ 'bg-secondary': route.query.logId === logEntry.id.toString() }"
+      />
+    </div>
+    <slot />
+  </div>
+</template>
+<script lang="ts" setup>
+import { LogEntry } 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]);
+
+const route = useRoute();
+</script>

assets/components/LogViewer/LogLevel.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    :data-level="level"
+    :data-position="position"
+    class="mt-1.5 size-2.5 flex-none rounded-lg"
+    :class="{ showUnknown }"
+  ></div>
+</template>
+<script lang="ts" setup>
+import { Position, Level } from "@/models/LogEntry";
+
+const {
+  level,
+  position,
+  showUnknown = false,
+} = defineProps<{
+  level?: Level;
+  position?: Position;
+  showUnknown?: boolean;
+}>();
+</script>
+
+<style scoped>
+@reference "@/main.css";
+[data-position="start"],
+[data-position="middle"],
+[data-position="end"] {
+  align-self: stretch;
+  height: auto;
+}
+
+[data-position="start"] {
+  border-radius: 0.375rem 0.375rem 0 0;
+}
+
+[data-position="middle"] {
+  border-radius: 0;
+  margin-top: 0;
+}
+
+[data-position="end"] {
+  border-radius: 0 0 0.375rem 0.375rem;
+  margin-top: 0;
+}
+</style>
+<style>
+@reference "@/main.css";
+[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;
+}
+
+[data-level="unknown"].show-unknown {
+  @apply !bg-base-300;
+}
+</style>

assets/components/LogViewer/LogList.vue

@@ -0,0 +1,116 @@
+<template>
+  <ul class="group pt-4" :class="{ 'disable-wrap': !softWrap, [size]: true, compact }" data-logs>
+    <li
+      v-for="item in messages"
+      ref="list"
+      :key="item.id"
+      :id="item.id.toString()"
+      :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 { progress, currentDate } = useScrollContext();
+
+const { messages } = defineProps<{
+  messages: LogEntry<string | string[] | JSONObject>[];
+}>();
+
+const { containers } = useLoggingContext();
+
+const list = ref<HTMLElement[]>([]);
+
+let previousDate = new Date();
+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));
+          if (+date === +previousDate) break;
+          previousDate = date;
+          const diff = new Date().getTime() - container.created.getTime();
+          progress.value = (date.getTime() - container.created.getTime()) / diff;
+          currentDate.value = date;
+          break;
+        }
+      }
+    }
+  },
+  {
+    rootMargin: "-10% 0px -10% 0px",
+    threshold: 1,
+  },
+);
+</script>
+<style scoped>
+@reference "@/main.css";
+ul {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Consolas,
+    Liberation Mono,
+    monaco,
+    Menlo,
+    monospace;
+
+  > li {
+    @apply flex px-2 py-1 break-words last:snap-end odd:bg-gray-400/[0.07] md:px-4;
+    &:last-child {
+      scroll-margin-block-end: 5rem;
+    }
+  }
+
+  &.small {
+    @apply text-[0.7em];
+  }
+
+  &.medium {
+    @apply text-[0.8em];
+  }
+
+  &.large {
+    @apply text-[1em];
+  }
+
+  &.compact {
+    > li {
+      @apply py-0;
+    }
+
+    :deep(.tag) {
+      @apply rounded-none;
+    }
+  }
+
+  :deep(mark) {
+    @apply bg-secondary inline-block rounded-xs;
+    animation: pops 200ms ease-out;
+  }
+
+  :deep(a[rel~="external"]) {
+    @apply text-primary underline-offset-4 hover:underline;
+  }
+}
+
+@keyframes pops {
+  0% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1.05);
+  }
+}
+</style>

assets/components/LogViewer/LogStd.vue

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

assets/components/LogViewer/LogViewer.vue

@@ -1,106 +1,18 @@
 <template>
-  <ul class="events" ref="events" :class="{ 'disable-wrap': !softWrap, [size]: true }">
-    <li
-      v-for="(item, index) in filtered"
-      :key="item.id"
-      :data-key="item.id"
-      :class="{ selected: toRaw(item) === toRaw(lastSelectedItem) }"
-    >
-      <div class="line-options" v-show="isSearching()">
-        <dropdown-menu :class="{ 'is-last': index === filtered.length - 1 }" class="is-top minimal">
-          <a class="dropdown-item" @click="handleJumpLineSelected($event, item)" :href="`#${item.id}`">
-            <div class="level is-justify-content-start">
-              <div class="level-left">
-                <div class="level-item">
-                  <cil-find-in-page class="mr-4" />
-                </div>
-              </div>
-              <div class="level-right">
-                <div class="level-item">Jump to Context</div>
-              </div>
-            </div>
-          </a>
-        </dropdown-menu>
-      </div>
-      <component :is="item.getComponent()" :log-entry="item" :visible-keys="visibleKeys.value"></component>
-    </li>
-  </ul>
+  <LogList :messages="visibleMessages" />
 </template>
 
 <script lang="ts" setup>
-import { type ComputedRef, toRaw } from "vue";
-import { useRouteHash } from "@vueuse/router";
-import { Container } from "@/models/Container";
 import { type JSONObject, LogEntry } from "@/models/LogEntry";
 
 const props = defineProps<{
-  messages: LogEntry<string | JSONObject>[];
+  messages: LogEntry<string | string[] | JSONObject>[];
+  visibleKeys: Map<string[], boolean>;
 }>();
 
-let visibleKeys = persistentVisibleKeys(inject("container") as ComputedRef<Container>);
+const { messages, visibleKeys } = toRefs(props);
 
 const { filteredPayload } = useVisibleFilter(visibleKeys);
-const { filteredMessages, resetSearch, isSearching } = useSearchFilter();
-
-const { messages } = toRefs(props);
-const visible = filteredPayload(messages);
-const filtered = filteredMessages(visible);
-
-const events = ref<HTMLElement>();
-let lastSelectedItem: LogEntry<string | JSONObject> | undefined = $ref(undefined);
-
-function handleJumpLineSelected(e: Event, item: LogEntry<string | JSONObject>) {
-  lastSelectedItem = item;
-  resetSearch();
-}
-
-const routeHash = useRouteHash();
-watch(
-  routeHash,
-  (hash) => {
-    document.querySelector(`[data-key="${hash.substring(1)}"]`)?.scrollIntoView({ block: "center" });
-  },
-  { immediate: true, flush: "post" }
-);
+const visibleMessages = filteredPayload(messages);
 </script>
-<style scoped lang="scss">
-.events {
-  padding: 1em 0;
-  font-family: SFMono-Regular, Consolas, Liberation Mono, monaco, Menlo, monospace;
-
-  & > li {
-    display: flex;
-    word-wrap: break-word;
-    padding: 0.2em 1em;
-    &:last-child {
-      scroll-snap-align: end;
-      scroll-margin-block-end: 5rem;
-    }
-    &:nth-child(odd) {
-      background-color: rgba(125, 125, 125, 0.08);
-    }
-
-    &.selected {
-      border: 1px var(--secondary-color) solid;
-    }
-
-    & > .line-options {
-      display: flex;
-      flex-direction: row-reverse;
-      margin-right: 1em;
-    }
-  }
-
-  &.small {
-    font-size: 60%;
-  }
-
-  &.medium {
-    font-size: 80%;
-  }
-
-  &.large {
-    font-size: 120%;
-  }
-}
-</style>
+<style scoped></style>

assets/components/LogViewer/LogViewerWithSource.vue

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

assets/components/LogViewer/MultiContainerActionToolbar.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="dropdown dropdown-end dropdown-hover z-20">
+    <label tabindex="0" class="btn btn-ghost btn-sm w-8 gap-0 px-0 md:gap-0.5">
+      <carbon:circle-solid class="text-red w-2 md:w-2.5" v-if="streamConfig.stderr" />
+      <carbon:circle-solid class="text-blue w-2 md:w-2.5" v-if="streamConfig.stdout" />
+    </label>
+    <ul
+      tabindex="0"
+      class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 shadow-sm"
+      @click="hideMenu"
+    >
+      <li>
+        <a @click="clear()">
+          <octicon:trash-24 /> {{ $t("toolbar.clear") }}
+          <KeyShortcut char="k" :modifiers="['shift', 'meta']" />
+        </a>
+      </li>
+      <li v-if="enableDownload">
+        <a :href="downloadUrl" download>
+          <octicon:download-24 />
+          {{ isFiltered ? $t("toolbar.download-filtered") : $t("toolbar.download") }}
+        </a>
+      </li>
+      <li>
+        <a @click="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 { enableDownload } = config;
+const clear = defineEmit();
+
+const { streamConfig, showHostname, showContainerName, containers, levels } = useLoggingContext();
+
+const { downloadUrl, isFiltered } = useDownloadUrl(containers, streamConfig, levels);
+
+const hideMenu = (e: MouseEvent) => {
+  if (e.target instanceof HTMLAnchorElement) {
+    setTimeout(() => {
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+    }, 50);
+  }
+};
+</script>
+
+<style scoped>
+@reference "@/main.css";
+li.line {
+  @apply bg-base-content/20 h-px;
+}
+
+a {
+  @apply whitespace-nowrap;
+}
+</style>

assets/components/LogViewer/MultiContainerStat.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="flex gap-1 md:gap-4">
+    <div class="grid min-w-15 grid-cols-[auto_1fr] items-center gap-0.5 text-xs leading-none max-md:hidden">
+      <PhArrowUp class="text-primary" />
+      <span class="tabular-nums">{{ formatBytes(networkRate.tx, { short: true, decimals: 1 }) }}/s</span>
+      <PhArrowDown class="text-secondary" />
+      <span class="tabular-nums">{{ formatBytes(networkRate.rx, { short: true, decimals: 1 }) }}/s</span>
+    </div>
+    <StatMonitor
+      :data="cpuData"
+      :icon="PhCpu"
+      :stat-value="Math.max(0, totalStat.cpu).toFixed(2) + '%'"
+      :limit="roundCPU(limits.cpu) + ' CPU'"
+      container-class="border-primary/40 bg-primary/20"
+      text-class="hover:text-primary"
+      bar-class="bg-primary"
+      :formatter="(value: number) => value.toFixed(2) + '%'"
+    />
+    <StatMonitor
+      :data="memoryData"
+      :icon="PhMemory"
+      :stat-value="formatBytes(totalStat.memoryUsage)"
+      :limit="formatBytes(limits.memory, { short: true, decimals: 1 })"
+      container-class="border-secondary/40 bg-secondary/20"
+      text-class="hover:text-secondary"
+      bar-class="bg-secondary"
+      :formatter="(value: number) => formatBytes(value)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Stat } from "@/models/Container";
+import { Container } from "@/models/Container";
+// @ts-ignore
+import PhCpu from "~icons/ph/cpu";
+// @ts-ignore
+import PhMemory from "~icons/ph/memory";
+
+const { containers } = defineProps<{
+  containers: Container[];
+}>();
+
+const totalStat = ref<Stat>({ cpu: 0, memory: 0, memoryUsage: 0, networkRxTotal: 0, networkTxTotal: 0 });
+const { history, reset } = useSimpleRefHistory(totalStat, { capacity: 300 });
+const { hosts } = useHosts();
+const networkRate = ref({ rx: 0, tx: 0 });
+
+const roundCPU = (num: number) => (Number.isInteger(num) ? num.toFixed(0) : num.toFixed(1));
+
+function toContainerCores(container: Container): number {
+  if (container.cpuLimit && container.cpuLimit > 0) {
+    return 1;
+  }
+  const hostInfo = hosts.value[container.host];
+  return hostInfo?.nCPU ?? 1;
+}
+
+watch(
+  () => containers,
+  () => {
+    const initial: Stat[] = [];
+    for (let i = 1; i <= 300; i++) {
+      const stat = containers.reduce(
+        (acc, container) => {
+          const item = container.statsHistory.at(-i);
+          if (!item) {
+            return acc;
+          }
+          const cores = toContainerCores(container);
+          return {
+            cpu: acc.cpu + item.cpu / cores,
+            memory: acc.memory + item.memory,
+            memoryUsage: acc.memoryUsage + item.memoryUsage,
+            networkRxTotal: acc.networkRxTotal + item.networkRxTotal,
+            networkTxTotal: acc.networkTxTotal + item.networkTxTotal,
+          };
+        },
+        { cpu: 0, memory: 0, memoryUsage: 0, networkRxTotal: 0, networkTxTotal: 0 },
+      );
+      initial.push(stat);
+    }
+    totalStat.value = initial[0];
+    reset({ initial: initial.reverse() });
+  },
+  { immediate: true },
+);
+
+const limits = computed(() => {
+  // Group containers by host
+  const containersByHost = new Map<string, Container[]>();
+  containers.forEach((container) => {
+    if (!containersByHost.has(container.host)) {
+      containersByHost.set(container.host, []);
+    }
+    containersByHost.get(container.host)!.push(container);
+  });
+
+  let totalCpu = 0;
+  let totalMemory = 0;
+
+  // Process each host independently
+  containersByHost.forEach((hostContainers, hostId) => {
+    const hostInfo = hosts.value[hostId];
+    const hostTotalMemory = hostInfo?.memTotal || 0;
+    const hostTotalCpu = hostInfo?.nCPU || 0;
+
+    // Check if any container lacks limits
+    const hasUnlimitedCpu = hostContainers.some((c) => !c.cpuLimit || c.cpuLimit <= 0);
+    const hasUnlimitedMemory = hostContainers.some((c) => !c.memoryLimit);
+
+    // Calculate CPU for this host
+    if (hasUnlimitedCpu) {
+      // At least one container has no limit, use host total
+      totalCpu += hostTotalCpu;
+    } else {
+      // All containers have limits, sum them up (capped at host total)
+      const sumCpu = hostContainers.reduce((sum, c) => sum + 1, 0);
+      totalCpu += Math.min(sumCpu, hostTotalCpu);
+    }
+
+    // Calculate Memory for this host
+    if (hasUnlimitedMemory) {
+      // At least one container has no limit, use host total
+      totalMemory += hostTotalMemory;
+    } else {
+      // All containers have limits, sum them up (capped at host total)
+      const sumMemory = hostContainers.reduce((sum, c) => sum + (c.memoryLimit || 0), 0);
+      totalMemory += Math.min(sumMemory, hostTotalMemory);
+    }
+  });
+
+  return {
+    cpu: totalCpu,
+    memory: totalMemory,
+  };
+});
+
+useIntervalFn(() => {
+  const previousStat = totalStat.value;
+  totalStat.value = containers.reduce(
+    (acc, container) => {
+      const cores = toContainerCores(container);
+      return {
+        cpu: acc.cpu + container.stat.cpu / cores,
+        memory: acc.memory + container.stat.memory,
+        memoryUsage: acc.memoryUsage + container.stat.memoryUsage,
+        networkRxTotal: acc.networkRxTotal + container.stat.networkRxTotal,
+        networkTxTotal: acc.networkTxTotal + container.stat.networkTxTotal,
+      };
+    },
+    { cpu: 0, memory: 0, memoryUsage: 0, networkRxTotal: 0, networkTxTotal: 0 },
+  );
+
+  networkRate.value = {
+    rx: Math.max(0, totalStat.value.networkRxTotal - previousStat.networkRxTotal),
+    tx: Math.max(0, totalStat.value.networkTxTotal - previousStat.networkTxTotal),
+  };
+}, 1000);
+
+const cpuData = computed(() =>
+  history.value.map((stat, i) => ({
+    x: i,
+    y: Math.max(0, stat.cpu),
+    value: Math.max(0, stat.cpu),
+  })),
+);
+
+const memoryData = computed(() =>
+  history.value.map((stat, i) => ({
+    x: i,
+    y: stat.memory,
+    value: stat.memoryUsage,
+  })),
+);
+</script>

assets/components/LogViewer/RandomColorTag.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="tag grid overflow-hidden rounded-sm text-center text-sm text-white">
+    <div class="random-color col-start-1 row-start-1 brightness-75"></div>
+    <div class="col-start-1 row-start-1 truncate px-2 brightness-100" :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

@@ -0,0 +1,40 @@
+<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,32 +1,25 @@
 <template>
-  <div class="columns is-1 is-variable">
-    <div class="column is-narrow" v-if="showTimestamp">
-      <log-date :date="logEntry.date"></log-date>
-    </div>
-    <div class="text column" v-html="colorize(logEntry.message)"></div>
-  </div>
+  <LogItem :logEntry>
+    <LogLevel class="flex select-none" :level="logEntry.level" />
+    <div
+      class="[word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-pre"
+      v-html="colorize(logEntry.message)"
+    ></div>
+  </LogItem>
 </template>
 <script lang="ts" setup>
 import { SimpleLogEntry } from "@/models/LogEntry";
 import AnsiConvertor from "ansi-to-html";
 
-const ansiConvertor = new AnsiConvertor({ escapeXML: true });
+const ansiConvertor = new AnsiConvertor({
+  escapeXML: false,
+  fg: "var(--color-base-content)",
+  bg: "var(--color-base-100)",
+});
+
 defineProps<{
   logEntry: SimpleLogEntry;
 }>();
 
-const { markSearch } = useSearchFilter();
-const colorize = (value: string) => markSearch(ansiConvertor.toHtml(value));
+const colorize = (value: string) => ansiConvertor.toHtml(value);
 </script>
-
-<style lang="scss" scoped>
-.disable-wrap {
-  .text {
-    white-space: nowrap;
-  }
-}
-
-.text {
-  white-space: pre-wrap;
-}
-</style>

assets/components/LogViewer/SkippedEntriesLogItem.vue

@@ -1,23 +1,17 @@
 <template>
-  <div class="is-flex-grow-1 has-text-centered my-4">
-    <div class="is-relative">
-      <zig-zag class="is-overlay mt-2"></zig-zag>
-      <span class="text is-relative py-2 px-4">{{ $t("error.logs-skipped", { total: logEntry.totalSkipped }) }}</span>
+  <div class="my-4 flex-1 text-center">
+    <div class="relative">
+      <ZigZag class="absolute inset-0 mt-2" />
+      <button class="btn btn-primary btn-xs relative whitespace-pre-wrap" @click="logEntry.loadSkippedEntries()">
+        {{ $t("error.logs-skipped", { total: logEntry.totalSkipped }) }}
+      </button>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { SkippedLogsEntry } from "@/models/LogEntry";
 
-defineProps<{
+const { logEntry } = defineProps<{
   logEntry: SkippedLogsEntry;
 }>();
 </script>
-
-<style lang="scss" scoped>
-.text {
-  font-weight: bold;
-  white-space: pre-wrap;
-  background-color: var(--body-background-color);
-}
-</style>

assets/components/LogViewer/StatMonitor.vue

@@ -1,56 +1,66 @@
 <template>
-  <div class="has-text-centered is-relative host" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
-    <div class="has-border has-boxshadow">
-      <stat-sparkline :data="data" @selected-point="onSelectedPoint"></stat-sparkline>
+  <div class="relative" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false" :class="textClass">
+    <div class="overflow-hidden rounded-xs border px-px pt-1 pb-px max-md:hidden" :class="containerClass">
+      <BarChart
+        :chart-data="chartData"
+        :bar-class="`${barClass} opacity-70 hover:opacity-100`"
+        class="h-8 w-44"
+        @hover-index="(startIndex: number, endIndex: number) => onHoverIndexChange(startIndex, endIndex)"
+      />
     </div>
-    <div class="has-background-body-color is-top-left">
-      <span class="has-text-weight-light has-spacer">{{ label }}</span>
-      <span class="has-text-weight-bold">
-        {{ mouseOver ? selectedPoint?.value ?? selectedPoint?.y ?? statValue : statValue }}
-      </span>
+    <div class="bg-base-200 flex gap-1 rounded-sm p-px text-xs md:absolute md:-top-2 md:-left-0.5">
+      <component :is="icon" class="text-sm" />
+      <div class="font-bold tabular-nums select-none">
+        {{ displayValue }}
+        <span v-if="limit !== -1 && !mouseOver" class="max-md:hidden"> / {{ limit }} </span>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-const { data, label, statValue } = defineProps<{ data: Point<unknown>[]; label: string; statValue: string | number }>();
+import type { Component } from "vue";
 
-let selectedPoint: Point<unknown> = $ref();
+const {
+  data,
+  icon,
+  statValue,
+  limit = -1,
+  containerClass = "border-primary",
+  textClass = "",
+  barClass = "bg-primary",
+  formatter,
+} = defineProps<{
+  data: Point<unknown>[];
+  icon: Component;
+  statValue: string | number;
+  limit?: string | number;
+  containerClass?: string;
+  textClass?: string;
+  barClass?: string;
+  formatter?: (value: number) => string;
+}>();
 
-function onSelectedPoint(point: Point<unknown>) {
-  selectedPoint = point;
+const chartData = computed(() => data.map((point) => (point.y as number) ?? 0));
+const mouseOver = ref(false);
+const hoveredRange = ref<{ start: number; end: number } | null>(null);
+
+function onHoverIndexChange(startIndex: number, endIndex: number) {
+  hoveredRange.value = { start: startIndex, end: endIndex };
 }
 
-let mouseOver = $ref(false);
-</script>
+const displayValue = computed(() => {
+  if (mouseOver.value && hoveredRange.value !== null) {
+    const { start, end } = hoveredRange.value;
+    const points = data.slice(start, end + 1);
+    const sum = points.reduce((acc, point) => acc + ((point.value as number) ?? (point.y as number) ?? 0), 0);
+    const avg = sum / points.length;
 
-<style lang="scss" scoped>
-.has-spacer {
-  &::after {
-    content: " ";
+    if (formatter) {
+      return formatter(avg);
+    }
+    return avg.toFixed(2);
   }
-}
-
-.has-border {
-  border: 1px solid var(--primary-color);
-  border-radius: 3px;
-  padding: 1px 1px 0 1px;
-  display: flex;
-  overflow: hidden;
-  padding-top: 0.25em;
-}
-
-.has-background-body-color {
-  background-color: var(--body-background-color);
-}
-
-.host:hover span {
-  color: var(--secondary-color);
-}
-
-.is-top-left {
-  position: absolute;
-  top: 0;
-  left: 0.75em;
-}
-</style>
+  return statValue;
+});
+</script>

assets/components/LogViewer/StatSparkline.vue

@@ -1,62 +0,0 @@
-<template>
-  <svg :width="width" :height="height" @mousemove="onMove">
-    <path :d="path" class="area" />
-    <line :x1="lineX" y1="0" :x2="lineX" :y2="height" class="line" />
-  </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([width, 0]);
-const y = d3.scaleLinear().range([height, 0]);
-
-const emit = defineEmits<{
-  (event: "selected-point", value: Point<unknown>): void;
-}>();
-
-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, (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];
-  emit("selected-point", point);
-}
-</script>
-
-<style scoped>
-:deep(.area) {
-  fill: var(--primary-color);
-}
-
-:deep(.line) {
-  stroke: var(--secondary-color);
-  stroke-width: 2;
-  display: none;
-}
-
-svg:hover :deep(.line) {
-  display: unset;
-}
-</style>

assets/components/LogViewer/ViewerWithSource.vue

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

@@ -2,18 +2,10 @@
   <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="line" />
-        <line x1="15" y1="8" x2="30" y2="0" class="line" />
+        <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>
-
-<style lang="scss" scoped>
-.line {
-  stroke: var(--primary-color);
-  stroke-width: 1;
-  stroke-linecap: round;
-}
-</style>

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

@@ -0,0 +1,129 @@
+// 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="group pt-4 medium" data-logs="" show-container-name="false">
+  <li data-v-cf9ff940="" id="1560336942709" data-time="1560336942709" class="group/entry">
+    <div data-v-cf9ff940="" class="flex min-h-[1px] flex-1 content-center justify-center"><span class="loading loading-bars loading-md text-primary m-2" style="display: none;"></span></div>
+  </li>
+  <li data-v-cf9ff940="" id="1" data-time="1560336942459" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
+      <div class="dropdown dropdown-hover absolute -left-2 z-10 font-sans dropdown-right dropdown-end"><button tabindex="0" class="btn btn-square btn-xs border-base-content/20 bg-base-100 border opacity-0 shadow-sm group-hover/entry:opacity-90"><svg viewBox="0 0 512 512" width="1.2em" height="1.2em">
+            <circle cx="256" cy="256" r="48" fill="currentColor"></circle>
+            <circle cx="256" cy="416" r="48" fill="currentColor"></circle>
+            <circle cx="256" cy="96" r="48" fill="currentColor"></circle>
+          </svg></button>
+        <ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 text-sm shadow-sm">
+          <!--v-if-->
+          <li><a disabled="true" title="error.copy-not-supported" class="cursor-not-allowed opacity-50"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
+                <path fill="currentColor" d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V6h2v14h11v2z"></path>
+              </svg> action.copy-log</a></li>
+          <li><a disabled="true" title="error.copy-not-supported" class="cursor-not-allowed opacity-50"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
+                <path fill="currentColor" d="M11 17H7q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h4v2H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h8v2zm5 4v-2h4q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z"></path>
+              </svg> action.copy-link</a></li>
+          <!--v-if-->
+        </ul>
+      </div>
+      <!--v-if-->
+      <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[>_*:nth-of-type(2)]:flex-col-reverse md:flex-row!">
+        <!--v-if-->
+        <!--v-if-->
+        <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none">
+          <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+        </div>
+      </div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
+      <div class="[word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-pre">foo bar</div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
+"<ul data-v-cf9ff940="" class="group pt-4 medium" data-logs="" show-container-name="false">
+  <li data-v-cf9ff940="" id="1560336942709" data-time="1560336942709" class="group/entry">
+    <div data-v-cf9ff940="" class="flex min-h-[1px] flex-1 content-center justify-center"><span class="loading loading-bars loading-md text-primary m-2" style="display: none;"></span></div>
+  </li>
+  <li data-v-cf9ff940="" id="1" data-time="1560336942459" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
+      <div class="dropdown dropdown-hover absolute -left-2 z-10 font-sans dropdown-right dropdown-end"><button tabindex="0" class="btn btn-square btn-xs border-base-content/20 bg-base-100 border opacity-0 shadow-sm group-hover/entry:opacity-90"><svg viewBox="0 0 512 512" width="1.2em" height="1.2em">
+            <circle cx="256" cy="256" r="48" fill="currentColor"></circle>
+            <circle cx="256" cy="416" r="48" fill="currentColor"></circle>
+            <circle cx="256" cy="96" r="48" fill="currentColor"></circle>
+          </svg></button>
+        <ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 text-sm shadow-sm">
+          <!--v-if-->
+          <li><a disabled="true" title="error.copy-not-supported" class="cursor-not-allowed opacity-50"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
+                <path fill="currentColor" d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V6h2v14h11v2z"></path>
+              </svg> action.copy-log</a></li>
+          <li><a disabled="true" title="error.copy-not-supported" class="cursor-not-allowed opacity-50"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
+                <path fill="currentColor" d="M11 17H7q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h4v2H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h8v2zm5 4v-2h4q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z"></path>
+              </svg> action.copy-link</a></li>
+          <!--v-if-->
+        </ul>
+      </div>
+      <!--v-if-->
+      <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[>_*:nth-of-type(2)]:flex-col-reverse md:flex-row!">
+        <!--v-if-->
+        <!--v-if-->
+        <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none">
+          <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42</time></div>
+        </div>
+      </div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
+      <div class="[word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-pre">foo bar</div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > render html correctly > should render messages 1`] = `
+"<ul data-v-cf9ff940="" class="group pt-4 medium" data-logs="" show-container-name="false">
+  <li data-v-cf9ff940="" id="1560336942709" data-time="1560336942709" class="group/entry">
+    <div data-v-cf9ff940="" class="flex min-h-[1px] flex-1 content-center justify-center"><span class="loading loading-bars loading-md text-primary m-2" style="display: none;"></span></div>
+  </li>
+  <li data-v-cf9ff940="" id="1" data-time="1560336942459" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
+      <div class="dropdown dropdown-hover absolute -left-2 z-10 font-sans dropdown-right dropdown-end"><button tabindex="0" class="btn btn-square btn-xs border-base-content/20 bg-base-100 border opacity-0 shadow-sm group-hover/entry:opacity-90"><svg viewBox="0 0 512 512" width="1.2em" height="1.2em">
+            <circle cx="256" cy="256" r="48" fill="currentColor"></circle>
+            <circle cx="256" cy="416" r="48" fill="currentColor"></circle>
+            <circle cx="256" cy="96" r="48" fill="currentColor"></circle>
+          </svg></button>
+        <ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 text-sm shadow-sm">
+          <!--v-if-->
+          <li><a disabled="true" title="error.copy-not-supported" class="cursor-not-allowed opacity-50"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
+                <path fill="currentColor" d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V6h2v14h11v2z"></path>
+              </svg> action.copy-log</a></li>
+          <li><a disabled="true" title="error.copy-not-supported" class="cursor-not-allowed opacity-50"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
+                <path fill="currentColor" d="M11 17H7q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h4v2H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h8v2zm5 4v-2h4q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z"></path>
+              </svg> action.copy-link</a></li>
+          <!--v-if-->
+        </ul>
+      </div>
+      <!--v-if-->
+      <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[>_*:nth-of-type(2)]:flex-col-reverse md:flex-row!">
+        <!--v-if-->
+        <!--v-if-->
+        <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none">
+          <div class="inline-flex gap-2 text-blue whitespace-nowrap"><time datetime="2019-06-12T10:55:42.459Z" class="max-md:hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+        </div>
+      </div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
+      <div class="[word-break:break-word] whitespace-pre-wrap group-[.disable-wrap]:whitespace-pre">This is a message.</div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > should parse messages 1`] = `
+LoadMoreLogEntry {
+  "_message": "",
+  "containerID": "",
+  "date": 2019-06-12T10:55:42.709Z,
+  "id": 1560336942709,
+  "level": undefined,
+  "loader": [Function],
+  "rawMessage": "info",
+  "rememberScrollPosition": true,
+  "std": "stderr",
+}
+`;

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

@@ -1,206 +0,0 @@
-// Vitest Snapshot v1
-
-exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
-"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
-  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
-                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
-                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
-                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
-                    </svg></div>
-                </div>
-                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
-"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
-  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
-                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
-                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
-                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
-                    </svg></div>
-                </div>
-                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42</time></div>
-      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
-"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
-  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
-                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
-                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
-                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
-                    </svg></div>
-                </div>
-                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">This is a message.</div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
-"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
-  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
-                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
-                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
-                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
-                    </svg></div>
-                </div>
-                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"text column\\" data-v-a49e52d4=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
-"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
-  <li data-key=\\"2\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2\\" data-v-2e92daca=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
-                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
-                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
-                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
-                    </svg></div>
-                </div>
-                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"text column\\" data-v-a49e52d4=\\"\\"><mark>test</mark> bar</div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
-"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
-  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
-                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
-                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
-                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
-                    </svg></div>
-                </div>
-                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > renders correctly 1`] = `
-"<div class=\\"infinte-loader\\" data-v-1cd63c6e=\\"\\">
-  <div class=\\"spinner\\" data-v-1cd63c6e=\\"\\" style=\\"display: none;\\">
-    <div class=\\"bounce1\\" data-v-1cd63c6e=\\"\\"></div>
-    <div class=\\"bounce2\\" data-v-1cd63c6e=\\"\\"></div>
-    <div class=\\"bounce3\\" data-v-1cd63c6e=\\"\\"></div>
-  </div>
-</div>
-<ul class=\\"events medium\\" data-v-2e92daca=\\"\\"></ul>"
-`;
-
-exports[`<LogEventSource /> > should parse messages 1`] = `
-SimpleLogEntry {
-  "_message": "This is a message.",
-  "date": 2019-06-12T10:55:42.459Z,
-  "id": 1,
-}
-`;

assets/components/MetricCard.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="rounded-lg border p-2 md:p-3" :class="containerClass">
+    <div class="mb-2 flex items-center gap-1.5 text-sm font-medium" :class="textClass">
+      <component :is="icon" class="text-lg" />
+      <span>{{ label }}</span>
+    </div>
+    <div class="mb-1.5 text-lg font-semibold tabular-nums">{{ formattedValue }}</div>
+    <div class="text-base-content/60 mb-1 text-xs tabular-nums max-md:hidden">
+      avg {{ formatValue(average) }} • pk {{ formatValue(peak) }}
+    </div>
+    <BarChart class="h-8" :chartData="percentData" :barClass="barClass" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from "vue";
+
+export interface MetricDataPoint {
+  percent: number; // value 0 - 100
+  value: number;
+}
+
+const {
+  label,
+  icon,
+  value,
+  chartData,
+  containerClass = "",
+  textClass = "",
+  barClass = "",
+  formatValue = (v: number) => v.toString(),
+} = defineProps<{
+  label: string;
+  icon: Component;
+  value: string | number;
+  chartData: MetricDataPoint[];
+  containerClass?: string;
+  textClass?: string;
+  barClass?: string;
+  formatValue?: (value: number) => string;
+}>();
+
+const percentData = computed(() => chartData.map((d) => d.percent));
+
+const peak = computed(() => (chartData.length > 0 ? Math.max(...chartData.map((d) => d.value)) : 0));
+
+const average = computed(() => {
+  if (chartData.length === 0) return 0;
+  return chartData.reduce((sum, d) => sum + d.value, 0) / chartData.length;
+});
+
+const formattedValue = computed(() => {
+  if (typeof value === "string") return value;
+  return formatValue(value);
+});
+</script>