chore: release v4.11.2

* feat: allows containers to be pinned

* adds animation

* clean up

* updates int test

* fixes tests

.dockerignore

@@ -5,4 +5,4 @@ node_modules
 dist
 .git
 e2e
-
+docs

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
+title: ""
+labels: ""
 assignees: amir20
-
 ---
 
 **Describe the bug**
@@ -12,6 +11,7 @@ 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 '....'
@@ -24,9 +24,10 @@ A clear and concise description of what you expected to happen.
 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`]
+
+- 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/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
+title: ""
 labels: enhancement
 assignees: amir20
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/renovate.json

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

.github/workflows/deploy.yml

@@ -8,40 +8,70 @@ 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@v3
+      - uses: actions/setup-node@v3
+        name: Install Node
         with:
-          version: 6.20.1
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          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@v4
         with:
-          go-version: 1.19.x
+          go-version: 1.20.x
       - name: Checkout code
         uses: actions/checkout@v3
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
   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@v3
+      - uses: actions/setup-node@v3
+        name: Install Node
+        with:
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Build
+        uses: docker/bake-action@v3
+        with:
+          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@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
   buildx:
     needs: [go-test, npm-test, int-test]
     name: Release
@@ -53,22 +83,22 @@ jobs:
         with:
           images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.2.1
+        uses: docker/setup-buildx-action@v2.9.1
       - name: Login to DockerHub
-        uses: docker/login-action@v2.1.0
+        uses: docker/login-action@v2.2.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push
-        uses: docker/build-push-action@v3.2.0
+        uses: docker/build-push-action@v4.1.1
         with:
           push: true
           platforms: linux/amd64,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
@@ -80,13 +110,7 @@ jobs:
           fetch-depth: 0
       - 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
       - 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

@@ -18,19 +18,19 @@ jobs:
         with:
           images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.2.1
+        uses: docker/setup-buildx-action@v2.9.1
       - name: Login to DockerHub
-        uses: docker/login-action@v2.1.0
+        uses: docker/login-action@v2.2.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push
-        uses: docker/build-push-action@v3.2.0
+        uses: docker/build-push-action@v4.1.1
         with:
           push: true
           platforms: linux/amd64,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/test.yml

@@ -7,66 +7,91 @@ on:
       - master
 name: Test
 jobs:
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        name: Install Node
+        with:
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --prefer-offline
+      - name: Run Typecheck
+        run: pnpm run typecheck
   npm-test:
     name: JavaScript Tests
     runs-on: ubuntu-latest
     steps:
-      - 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@v3
+      - uses: actions/setup-node@v3
+        name: Install Node
         with:
-          version: 6.20.1
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          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@v4
         with:
-          go-version: 1.19.x
+          go-version: 1.20.x
       - name: Checkout code
         uses: actions/checkout@v3
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
   int-test:
     name: Integration Tests
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        name: Install Node
         with:
-          fetch-depth: 2
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: Install dependencies
+        run: pnpm install
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@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@v2
+      - name: Build
+        uses: docker/bake-action@v3
         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
+          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@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -1,4 +1,4 @@
-
+certs
 dist
 node_modules
 .cache
@@ -6,4 +6,8 @@ static
 dozzle
 coverage
 .pnpm-debug.log
-.vscode
+coverage.out
+.netlify
+/test-results/
+/playwright-report/
+/playwright/.cache/

.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,3 @@
+shared-workspace-lockfile=false
+include-workspace-root=true
+ignore-workspace-root-check=true

.prettierignore

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

.reflex

@@ -1 +1 @@
--r '\.(go)$' -R 'node_modules' -G '*_test.go' -s -- go run main.go --level debug
+-r '\.(go)$' -R 'node_modules' -G '\*\_test.go' -s -- go run main.go --level debug --remote-host tcp://64.225.88.189:2376|clashleaders.com

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "i18n-ally.localesPaths": ["locales"],
+  "i18n-ally.keystyle": "nested",
+  "cSpell.words": ["healthcheck"],
+  "editor.formatOnSave": true
+}

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,28 +1,28 @@
 # Build assets
-FROM --platform=$BUILDPLATFORM node:19-alpine as node
-
-RUN npm install -g pnpm
+FROM --platform=$BUILDPLATFORM node:20-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 .* vite.config.ts ./
 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.21.0-alpine AS builder
 
 RUN apk add --no-cache ca-certificates && mkdir /dozzle
 

Makefile

@@ -31,4 +31,4 @@ 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

README.md

@@ -2,7 +2,7 @@
 
 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://user-images.githubusercontent.com/260667/227634771-9ebbe381-16a8-465a-b28a-450c5cd20c94.mp4
 
 [![Go Report Card](https://goreportcard.com/badge/github.com/amir20/dozzle)](https://goreportcard.com/report/github.com/amir20/dozzle)
 [![Docker Pulls](https://img.shields.io/docker/pulls/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
@@ -37,16 +37,7 @@ The simplest way to use dozzle is to run the docker container. Also, mount the D
 
 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`.
 
-### With Docker swarm
-
-    docker service create \
-    --name=dozzle \
-    --publish=8888:8080 \
-    --constraint=node.role==manager \
-    --mount=type=bind,src=/var/run/docker.sock,dst=/var/run/docker.sock \
-    amir20/dozzle:latest
-
-### With Docker compose
+### Connecting with Docker compose
 
     version: "3"
     services:
@@ -58,7 +49,35 @@ Dozzle will be available at [http://localhost:8888/](http://localhost:8888/). Yo
         ports:
           - 9999:8080
 
-### Enabling health check
+### Connecting to remote hosts
+
+Dozzle supports connecting to multiple remote hosts via `tcp://` using TLS or without. Appropriate certs need to be mounted for Dozzle to be able to successfully connect. At this point, `ssh://` is not supported because Dozzle docker image does not ship with any ssh clients.
+
+To configure remote hosts, `--remote-host` or `DOZZLE_REMOTE_HOST` need to provided and the `pem` files need to be mounted to `/cert` directory. The `/cert` directory expects to have `/certs/{ca,cert,key}.pem` or `/certs/{host}/{ca,cert,key}.pem` in case of multiple hosts.
+
+Below are examples of using `--remote-host` via CLI:
+
+    $ docker run -v /var/run/docker.sock:/var/run/docker.sock -v /path/to/certs:/certs -p 8080:8080 amir20/dozzle --remote-host tcp://167.99.1.1:2376
+
+Multiple `--remote-host` flags can be used to specify multiple hosts.
+
+Or to use compose:
+
+    version: "3"
+    services:
+      dozzle:
+        image: amir20/dozzle:latest
+        volumes:
+          - /var/run/docker.sock:/var/run/docker.sock
+          - /path/to/certs:/certs
+        ports:
+          - 8080:8080
+        environment:
+          DOZZLE_REMOTE_HOST: tcp://167.99.1.1:2376,tcp://167.99.1.2:2376
+
+You need to make sure appropriate certs are provided in `/certs/167.99.1.1/{ca,cert,key}.pem` and `/certs/167.99.1.2/{ca,cert,key}.pem` for both hosts to work.
+
+### Adding health check
 
 Dozzle doesn't enable healthcheck by default as it adds extra CPU usage. `healthcheck` can be enabled manually.
 
@@ -129,6 +148,7 @@ Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can
 | `--usernamefile` | `DOZZLE_USERNAME_FILE` | `""`    |
 | `--passwordfile` | `DOZZLE_PASSWORD_FILE` | `""`    |
 | `--no-analytics` | `DOZZLE_NO_ANALYTICS`  | false   |
+| `--remote-host`  | `DOZZLE_REMOTE_HOST`   |         |
 
 ## Troubleshooting and FAQs
 

analytics/types.go

@@ -1,17 +1,18 @@
 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"`
+	ClientId         string `json:"-"`
+	Version          string `json:"version"`
+	FilterLength     int    `json:"filterLength"`
+	RemoteHostLength int    `json:"remoteHostLength"`
+	CustomAddress    bool   `json:"customAddress"`
+	CustomBase       bool   `json:"customBase"`
+	Protected        bool   `json:"protected"`
+	HasHostname      bool   `json:"hasHostname"`
 }
 
 type RequestEvent struct {
-	ClientId         string `json:"-"`
-	TotalContainers  int    `json:"totalContainers"`
+	ClientId          string `json:"-"`
+	TotalContainers   int    `json:"totalContainers"`
 	RunningContainers int    `json:"runningContainers"`
 }

assets/auto-imports.d.ts

@@ -1,8 +1,12 @@
-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
 export {}
 declare global {
-  const $$: typeof import('vue/macros')['$$']
   const $: typeof import('vue/macros')['$']
+  const $$: typeof import('vue/macros')['$$']
   const $computed: typeof import('vue/macros')['$computed']
   const $customRef: typeof import('vue/macros')['$customRef']
   const $ref: typeof import('vue/macros')['$ref']
@@ -29,7 +33,9 @@ declare global {
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createPinia: typeof import('pinia')['createPinia']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
@@ -46,6 +52,7 @@ declare global {
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const getDeep: typeof import('./utils/index')['getDeep']
+  const globalShowPopup: typeof import('./composables/popup')['globalShowPopup']
   const h: typeof import('vue')['h']
   const hourStyle: typeof import('./composables/settings')['hourStyle']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
@@ -53,6 +60,7 @@ declare global {
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isMobile: typeof import('./composables/media')['isMobile']
   const isObject: typeof import('./utils/index')['isObject']
+  const isPinnedContainer: typeof import('./composables/storage')['isPinnedContainer']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
@@ -87,7 +95,8 @@ declare global {
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
-  const persistentVisibleKeys: typeof import('./utils/index')['persistentVisibleKeys']
+  const persistentVisibleKeys: typeof import('./composables/storage')['persistentVisibleKeys']
+  const pinnedContainers: typeof import('./composables/storage')['pinnedContainers']
   const provide: typeof import('vue')['provide']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
@@ -103,10 +112,10 @@ declare global {
   const refThrottled: typeof import('@vueuse/core')['refThrottled']
   const refWithControl: typeof import('@vueuse/core')['refWithControl']
   const resolveComponent: typeof import('vue')['resolveComponent']
-  const resolveDirective: typeof import('vue')['resolveDirective']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
   const search: typeof import('./composables/settings')['search']
+  const sessionHost: typeof import('./composables/storage')['sessionHost']
   const setActivePinia: typeof import('pinia')['setActivePinia']
   const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const setTitle: typeof import('./composables/title')['setTitle']
@@ -115,6 +124,7 @@ declare global {
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
   const showAllContainers: typeof import('./composables/settings')['showAllContainers']
+  const showStd: typeof import('./composables/settings')['showStd']
   const showTimestamp: typeof import('./composables/settings')['showTimestamp']
   const size: typeof import('./composables/settings')['size']
   const smallerScrollbars: typeof import('./composables/settings')['smallerScrollbars']
@@ -130,6 +140,8 @@ declare global {
   const toReactive: typeof import('@vueuse/core')['toReactive']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const togglePinnedContainer: typeof import('./composables/storage')['togglePinnedContainer']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -140,14 +152,19 @@ declare global {
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAnimate: typeof import('@vueuse/core')['useAnimate']
+  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
+  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
   const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
@@ -190,6 +207,7 @@ declare global {
   const useEventBus: typeof import('@vueuse/core')['useEventBus']
   const useEventListener: typeof import('@vueuse/core')['useEventListener']
   const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useExponentialMovingAverage: typeof import('./utils/index')['useExponentialMovingAverage']
   const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
   const useFavicon: typeof import('@vueuse/core')['useFavicon']
   const useFetch: typeof import('@vueuse/core')['useFetch']
@@ -233,14 +251,18 @@ declare global {
   const useOnline: typeof import('@vueuse/core')['useOnline']
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
   const useParallax: typeof import('@vueuse/core')['useParallax']
+  const useParentElement: typeof import('@vueuse/core')['useParentElement']
+  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
   const usePermission: typeof import('@vueuse/core')['usePermission']
   const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
   const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePrevious: typeof import('@vueuse/core')['usePrevious']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
@@ -252,6 +274,7 @@ declare global {
   const useScroll: typeof import('@vueuse/core')['useScroll']
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
   const useSearchFilter: typeof import('./composables/search')['useSearchFilter']
+  const useSeoMeta: typeof import('@vueuse/head')['useSeoMeta']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
@@ -300,8 +323,10 @@ declare global {
   const watchArray: typeof import('@vueuse/core')['watchArray']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
   const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchDeep: typeof import('@vueuse/core')['watchDeep']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
   const watchPausable: typeof import('@vueuse/core')['watchPausable']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
@@ -311,6 +336,11 @@ declare global {
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+}
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
@@ -343,7 +373,9 @@ declare module 'vue' {
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
     readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
+    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
@@ -360,6 +392,7 @@ declare module 'vue' {
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getDeep: UnwrapRef<typeof import('./utils/index')['getDeep']>
+    readonly globalShowPopup: UnwrapRef<typeof import('./composables/popup')['globalShowPopup']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly hourStyle: UnwrapRef<typeof import('./composables/settings')['hourStyle']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
@@ -401,7 +434,8 @@ declare module 'vue' {
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
-    readonly persistentVisibleKeys: UnwrapRef<typeof import('./utils/index')['persistentVisibleKeys']>
+    readonly persistentVisibleKeys: UnwrapRef<typeof import('./composables/storage')['persistentVisibleKeys']>
+    readonly pinnedContainers: UnwrapRef<typeof import('./composables/storage')['pinnedContainers']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
@@ -417,10 +451,10 @@ declare module 'vue' {
     readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
     readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
-    readonly resolveDirective: UnwrapRef<typeof import('vue')['resolveDirective']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
     readonly search: UnwrapRef<typeof import('./composables/settings')['search']>
+    readonly sessionHost: UnwrapRef<typeof import('./composables/storage')['sessionHost']>
     readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
     readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
     readonly setTitle: UnwrapRef<typeof import('./composables/title')['setTitle']>
@@ -429,6 +463,7 @@ declare module 'vue' {
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
     readonly showAllContainers: UnwrapRef<typeof import('./composables/settings')['showAllContainers']>
+    readonly showStd: UnwrapRef<typeof import('./composables/settings')['showStd']>
     readonly showTimestamp: UnwrapRef<typeof import('./composables/settings')['showTimestamp']>
     readonly size: UnwrapRef<typeof import('./composables/settings')['size']>
     readonly smallerScrollbars: UnwrapRef<typeof import('./composables/settings')['smallerScrollbars']>
@@ -444,6 +479,8 @@ declare module 'vue' {
     readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
+    readonly togglePinnedContainer: UnwrapRef<typeof import('./composables/storage')['togglePinnedContainer']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
@@ -454,14 +491,19 @@ declare module 'vue' {
     readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
     readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
     readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
+    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
+    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
     readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
     readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
     readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
     readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
+    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
+    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
     readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
     readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
     readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
     readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
+    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
     readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
     readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
@@ -504,6 +546,7 @@ declare module 'vue' {
     readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
     readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
     readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
+    readonly useExponentialMovingAverage: UnwrapRef<typeof import('./utils/index')['useExponentialMovingAverage']>
     readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
     readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
     readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
@@ -547,14 +590,18 @@ declare module 'vue' {
     readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
     readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
     readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
+    readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
+    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
     readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
     readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
+    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
     readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
     readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
     readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
     readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
     readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
     readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
+    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
@@ -566,6 +613,7 @@ declare module 'vue' {
     readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
     readonly useSearchFilter: UnwrapRef<typeof import('./composables/search')['useSearchFilter']>
+    readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
@@ -614,8 +662,343 @@ declare module 'vue' {
     readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
     readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
     readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
+    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
     readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
+    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
+    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
+    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
+    readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
+    readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
+    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
+  }
+}
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
+    readonly $: UnwrapRef<typeof import('vue/macros')['$']>
+    readonly $computed: UnwrapRef<typeof import('vue/macros')['$computed']>
+    readonly $customRef: UnwrapRef<typeof import('vue/macros')['$customRef']>
+    readonly $ref: UnwrapRef<typeof import('vue/macros')['$ref']>
+    readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
+    readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
+    readonly DEFAULT_SETTINGS: UnwrapRef<typeof import('./composables/settings')['DEFAULT_SETTINGS']>
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
+    readonly arrayEquals: UnwrapRef<typeof import('./utils/index')['arrayEquals']>
+    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
+    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
+    readonly collapseNav: UnwrapRef<typeof import('./composables/settings')['collapseNav']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
+    readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
+    readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
+    readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
+    readonly config: UnwrapRef<typeof import('./stores/config')['default']>
+    readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
+    readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
+    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
+    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
+    readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
+    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
+    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
+    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
+    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
+    readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
+    readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly flattenJSON: UnwrapRef<typeof import('./utils/index')['flattenJSON']>
+    readonly formatBytes: UnwrapRef<typeof import('./utils/index')['formatBytes']>
+    readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly getDeep: UnwrapRef<typeof import('./utils/index')['getDeep']>
+    readonly globalShowPopup: UnwrapRef<typeof import('./composables/popup')['globalShowPopup']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly hourStyle: UnwrapRef<typeof import('./composables/settings')['hourStyle']>
+    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
+    readonly isMobile: UnwrapRef<typeof import('./composables/media')['isMobile']>
+    readonly isObject: UnwrapRef<typeof import('./utils/index')['isObject']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly lightTheme: UnwrapRef<typeof import('./composables/settings')['lightTheme']>
+    readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
+    readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
+    readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
+    readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
+    readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
+    readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly menuWidth: UnwrapRef<typeof import('./composables/settings')['menuWidth']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
+    readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
+    readonly persistentVisibleKeys: UnwrapRef<typeof import('./composables/storage')['persistentVisibleKeys']>
+    readonly pinnedContainers: UnwrapRef<typeof import('./composables/storage')['pinnedContainers']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
+    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
+    readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
+    readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
+    readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
+    readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
+    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
+    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
+    readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
+    readonly search: UnwrapRef<typeof import('./composables/settings')['search']>
+    readonly sessionHost: UnwrapRef<typeof import('./composables/storage')['sessionHost']>
+    readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
+    readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
+    readonly setTitle: UnwrapRef<typeof import('./composables/title')['setTitle']>
+    readonly settings: UnwrapRef<typeof import('./composables/settings')['settings']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly showAllContainers: UnwrapRef<typeof import('./composables/settings')['showAllContainers']>
+    readonly showStd: UnwrapRef<typeof import('./composables/settings')['showStd']>
+    readonly showTimestamp: UnwrapRef<typeof import('./composables/settings')['showTimestamp']>
+    readonly size: UnwrapRef<typeof import('./composables/settings')['size']>
+    readonly smallerScrollbars: UnwrapRef<typeof import('./composables/settings')['smallerScrollbars']>
+    readonly softWrap: UnwrapRef<typeof import('./composables/settings')['softWrap']>
+    readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
+    readonly stripVersion: UnwrapRef<typeof import('./utils/index')['stripVersion']>
+    readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
+    readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
+    readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
+    readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
+    readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
+    readonly togglePinnedContainer: UnwrapRef<typeof import('./composables/storage')['togglePinnedContainer']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
+    readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
+    readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
+    readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
+    readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
+    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
+    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
+    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
+    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
+    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
+    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
+    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
+    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
+    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
+    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
+    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
+    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
+    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
+    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
+    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
+    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
+    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
+    readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
+    readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
+    readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
+    readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
+    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
+    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
+    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
+    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
+    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
+    readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
+    readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
+    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
+    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
+    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
+    readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
+    readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
+    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
+    readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
+    readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
+    readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
+    readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
+    readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
+    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
+    readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
+    readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
+    readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
+    readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
+    readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
+    readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
+    readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
+    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
+    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
+    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
+    readonly useExponentialMovingAverage: UnwrapRef<typeof import('./utils/index')['useExponentialMovingAverage']>
+    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
+    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
+    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
+    readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
+    readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
+    readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
+    readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
+    readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
+    readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
+    readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
+    readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useHead: UnwrapRef<typeof import('@vueuse/head')['useHead']>
+    readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
+    readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
+    readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
+    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
+    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
+    readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
+    readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
+    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
+    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
+    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
+    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
+    readonly useLogStream: UnwrapRef<typeof import('./composables/eventsource')['useLogStream']>
+    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
+    readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
+    readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
+    readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
+    readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
+    readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
+    readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
+    readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
+    readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
+    readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
+    readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
+    readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
+    readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
+    readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
+    readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
+    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
+    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
+    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
+    readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
+    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
+    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
+    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
+    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
+    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
+    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
+    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
+    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
+    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
+    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
+    readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
+    readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
+    readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
+    readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
+    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
+    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
+    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
+    readonly useSearchFilter: UnwrapRef<typeof import('./composables/search')['useSearchFilter']>
+    readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
+    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
+    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
+    readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
+    readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
+    readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
+    readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
+    readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
+    readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
+    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
+    readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
+    readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
+    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
+    readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
+    readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
+    readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
+    readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
+    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
+    readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
+    readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
+    readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
+    readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
+    readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
+    readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
+    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
+    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
+    readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
+    readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
+    readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
+    readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
+    readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
+    readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
+    readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
+    readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
+    readonly useVisibleFilter: UnwrapRef<typeof import('./composables/visible')['useVisibleFilter']>
+    readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
+    readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
+    readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
+    readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
+    readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
+    readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
+    readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
+    readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
+    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
+    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
+    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
+    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
     readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
     readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
     readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>

assets/components.d.ts

@@ -1,52 +1,72 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+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']
+    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:macShift': typeof import('~icons/carbon/mac-shift')['default']
+    'Carbon:star': typeof import('~icons/carbon/star')['default']
+    'Carbon:starFilled': typeof import('~icons/carbon/star-filled')['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:findInPage': typeof import('~icons/cil/find-in-page')['default']
+    'Cil:xCircle': typeof import('~icons/cil/x-circle')['default']
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
+    ContainerHealth: typeof import('./components/LogViewer/ContainerHealth.vue')['default']
+    ContainerPopup: typeof import('./components/LogViewer/ContainerPopup.vue')['default']
     ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
+    ContainerTable: typeof import('./components/ContainerTable.vue')['default']
     ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
+    DateTime: typeof import('./components/common/DateTime.vue')['default']
+    DistanceTime: typeof import('./components/common/DistanceTime.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
     DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
     FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
     FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
     InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
+    KeyShortcut: typeof import('./components/KeyShortcut.vue')['default']
     LogActionsToolbar: typeof import('./components/LogViewer/LogActionsToolbar.vue')['default']
     LogContainer: typeof import('./components/LogViewer/LogContainer.vue')['default']
     LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
     LogEventSource: typeof import('./components/LogViewer/LogEventSource.vue')['default']
+    LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default']
+    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']
+    'Mdi:arrowUp': typeof import('~icons/mdi/arrow-up')['default']
+    'Mdi:dotsVertical': typeof import('~icons/mdi/dots-vertical')['default']
+    'Mdi:lightChevronDoubleDown': typeof import('~icons/mdi-light/chevron-double-down')['default']
+    'Mdi:lightChevronLeft': typeof import('~icons/mdi-light/chevron-left')['default']
+    'Mdi:lightChevronRight': typeof import('~icons/mdi-light/chevron-right')['default']
+    'Mdi:lightCog': typeof import('~icons/mdi-light/cog')['default']
+    'Mdi:lightLogout': typeof import('~icons/mdi-light/logout')['default']
+    'Mdi:lightMagnify': typeof import('~icons/mdi-light/magnify')['default']
+    MobileMenu: typeof import('./components/common/MobileMenu.vue')['default']
+    'Octicon:container24': typeof import('~icons/octicon/container24')['default']
+    'Octicon:download24': typeof import('~icons/octicon/download24')['default']
+    'Octicon:trash24': typeof import('~icons/octicon/trash24')['default']
+    'Ph:command': typeof import('~icons/ph/command')['default']
+    'Ph:controlBold': typeof import('~icons/ph/control-bold')['default']
+    Popup: typeof import('./components/Popup.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollableView: typeof import('./components/ScrollableView.vue')['default']
     ScrollProgress: typeof import('./components/ScrollProgress.vue')['default']
     Search: typeof import('./components/Search.vue')['default']
     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']
     StatMonitor: typeof import('./components/LogViewer/StatMonitor.vue')['default']
     StatSparkline: typeof import('./components/LogViewer/StatSparkline.vue')['default']
+    Tag: typeof import('./components/common/Tag.vue')['default']
     ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
   }
 }

assets/components/BarChart.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="is-relative">
+    <div class="bar"></div>
+    <div class="is-overlay">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { value } = defineProps<{ value: number }>();
+
+const minValue = computed(() => Math.min(value, 1));
+</script>
+
+<style scoped>
+.bar {
+  height: 1.5em;
+  background-color: var(--primary-color);
+  transform-origin: left;
+  transform: scaleX(v-bind(minValue));
+  transition: transform 0.2s ease-out;
+  border-top-right-radius: 0.2em;
+  border-bottom-right-radius: 0.2em;
+}
+
+.is-overlay {
+  font-size: 0.9em;
+  padding: 0 0.5em;
+}
+</style>

assets/components/ContainerTable.vue

@@ -0,0 +1,156 @@
+!
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr :data-direction="direction > 0 ? 'asc' : 'desc'">
+        <th
+          v-for="(value, key) in fields"
+          :key="key"
+          @click.prevent="sort(key)"
+          :class="{ 'selected-sort': key === sortField }"
+          v-show="isVisible(key)"
+        >
+          <a>
+            <span class="icon-text">
+              <span>{{ $t(value.label) }}</span>
+              <span class="icon">
+                <mdi:arrow-up />
+              </span>
+            </span>
+          </a>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="container in paginated" :key="container.id">
+        <td v-if="isVisible('name')">
+          <router-link :to="{ name: 'container-id', params: { id: container.id } }" :title="container.name">
+            {{ container.name }}
+          </router-link>
+        </td>
+        <td v-if="isVisible('state')">{{ container.state }}</td>
+        <td v-if="isVisible('created')">
+          <distance-time :date="container.created" strict :suffix="false"></distance-time>
+        </td>
+        <td v-if="isVisible('cpu')">
+          <bar-chart :value="container.movingAverage.cpu / 100">
+            {{ (container.movingAverage.cpu / 100).toLocaleString(undefined, { style: "percent" }) }}
+          </bar-chart>
+        </td>
+        <td v-if="isVisible('mem')">
+          <bar-chart :value="container.movingAverage.memory / 100">
+            {{ (container.movingAverage.memory / 100).toLocaleString(undefined, { style: "percent" }) }}
+          </bar-chart>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <nav class="pagination is-right" role="navigation" aria-label="pagination" v-if="isPaginated">
+    <ul class="pagination-list">
+      <li v-for="i in totalPages">
+        <a class="pagination-link" :class="{ 'is-current': i === currentPage }" @click.prevent="currentPage = i">{{
+          i
+        }}</a>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { Container } from "@/models/Container";
+import { toRefs } from "@vueuse/core";
+
+const fields = {
+  name: {
+    label: "label.container-name",
+    sortFunc: (a: Container, b: Container) => a.name.localeCompare(b.name) * direction.value,
+    mobileVisible: true,
+  },
+  state: {
+    label: "label.status",
+    sortFunc: (a: Container, b: Container) => a.state.localeCompare(b.state) * direction.value,
+    mobileVisible: false,
+  },
+  created: {
+    label: "label.created",
+    sortFunc: (a: Container, b: Container) => (a.created.getTime() - b.created.getTime()) * direction.value,
+    mobileVisible: true,
+  },
+  cpu: {
+    label: "label.avg-cpu",
+    sortFunc: (a: Container, b: Container) => (a.movingAverage.cpu - b.movingAverage.cpu) * direction.value,
+    mobileVisible: false,
+  },
+  mem: {
+    label: "label.avg-mem",
+    sortFunc: (a: Container, b: Container) => (a.movingAverage.memory - b.movingAverage.memory) * direction.value,
+    mobileVisible: false,
+  },
+};
+
+const { containers, perPage = 15 } = defineProps<{
+  containers: Container[];
+  perPage?: number;
+}>();
+type keys = keyof typeof fields;
+
+const storage = useStorage<{ column: keys; direction: 1 | -1 }>("DOZZLE_TABLE_CONTAINERS_SORT", {
+  column: "created",
+  direction: -1,
+});
+const { column: sortField, direction } = toRefs(storage);
+const sortedContainers = computedWithControl(
+  () => [containers.length, sortField.value, direction.value],
+  () => {
+    return containers.sort((a, b) => {
+      return fields[sortField.value].sortFunc(a, b);
+    });
+  },
+);
+
+const totalPages = computed(() => Math.ceil(sortedContainers.value.length / perPage));
+const isPaginated = computed(() => totalPages.value > 1);
+const currentPage = ref(1);
+const paginated = computed(() => {
+  const start = (currentPage.value - 1) * perPage;
+  const end = start + perPage;
+
+  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 lang="scss" scoped>
+.icon {
+  display: none;
+  transition: transform 0.2s ease-in-out;
+  [data-direction="desc"] & {
+    transform: rotate(180deg);
+  }
+}
+.selected-sort {
+  font-weight: bold;
+  border-color: var(--primary-color);
+  .icon {
+    display: inline-block;
+  }
+}
+
+tbody td {
+  max-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

assets/components/DropdownMenu.vue

@@ -1,11 +1,13 @@
 <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>
+      <slot name="trigger">
+        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+          <span class="icon">
+            <mdi:dots-vertical />
+          </span>
+        </button>
+      </slot>
     </div>
     <div class="dropdown-menu" id="dropdown-menu" role="menu">
       <div class="dropdown-content">
@@ -26,12 +28,14 @@
 
   & > .icon {
     height: 100%;
+
     & > svg {
       align-self: flex-start;
       height: 0.85em;
     }
   }
 }
+
 .is-top {
   & .dropdown-menu {
     top: 0;

assets/components/FuzzySearchModal.vue

@@ -14,19 +14,17 @@
         <div class="media">
           <div class="media-left">
             <span class="icon is-small" :class="item.state">
-              <octicon-container-24 />
+              <octicon:container-24 />
             </span>
           </div>
-          <div class="media-content">
-            {{ item.name }}
-          </div>
+          <div class="media-content">{{ item.host }} / {{ item.name }}</div>
           <div class="media-right">
             <span
               class="icon is-small column-icon"
               @click.stop.prevent="addColumn(item)"
               :title="$t('tooltip.pin-column')"
             >
-              <cil-columns />
+              <cil:columns />
             </span>
           </div>
         </div>
@@ -43,9 +41,7 @@ const { maxResults: resultLimit = 20 } = defineProps<{
   maxResults?: number;
 }>();
 
-const emit = defineEmits<{
-  (e: "close"): void;
-}>();
+const close = defineEmit();
 
 const query = ref("");
 const autocomplete = ref<HTMLElement>();
@@ -54,12 +50,13 @@ const store = useContainerStore();
 const { containers } = storeToRefs(store);
 
 const list = computed(() => {
-  return containers.value.map(({ id, created, name, state }) => {
+  return containers.value.map(({ id, created, name, state, host }) => {
     return {
       id,
       created,
       name,
       state,
+      host,
     };
   });
 });
@@ -91,11 +88,11 @@ watchOnce(autocomplete, () => autocomplete.value?.focus());
 
 function selected({ id }: { id: string }) {
   router.push({ name: "container-id", params: { id } });
-  emit("close");
+  close();
 }
 function addColumn(container: Container) {
   store.appendActiveContainer(container);
-  emit("close");
+  close();
 }
 </script>
 
@@ -109,8 +106,8 @@ function addColumn(container: Container) {
   .panel {
     min-height: 200px;
     width: auto;
-    margin-left: 0.25rem!important;
-    margin-right: 0.25rem!important;
+    margin-left: 0.25rem !important;
+    margin-right: 0.25rem !important;
   }
 }
 
@@ -130,9 +127,11 @@ function addColumn(container: Container) {
 
 :deep(a.dropdown-item) {
   padding-right: 1em;
+
   .media-right {
     visibility: hidden;
   }
+
   &:hover .media-right {
     visibility: visible;
   }

assets/components/KeyShortcut.vue

@@ -0,0 +1,25 @@
+<template>
+  <span class="icon-text">
+    <span class="icon mx-0" v-if="modifiers.includes('shift')">
+      <carbon:mac-shift />
+    </span>
+    <span class="icon mx-0" v-if="modifiers.includes('meta')">
+      <ph:command v-if="isMac" />
+      <ph:control-bold v-else />
+    </span>
+    <kbd class="is-uppercase is-family-sans-serif ml-1">{{ char }}</kbd>
+  </span>
+</template>
+
+<script lang="ts">
+const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
+</script>
+<script lang="ts" setup>
+const { modifiers = ["meta"], char } = defineProps<{ char: string; modifiers?: ("^" | "meta" | "shift")[] }>();
+</script>
+
+<style scoped lang="scss">
+.icon {
+  width: unset;
+}
+</style>

assets/components/LogViewer/ComplexLogItem.vue

@@ -1,14 +1,25 @@
 <template>
-  <div class="columns is-1 is-variable">
+  <div class="columns is-1 is-variable is-mobile">
+    <div class="column is-narrow" v-if="showStd">
+      <log-std :std="logEntry.std"></log-std>
+    </div>
     <div class="column is-narrow" v-if="showTimestamp">
       <log-date :date="logEntry.date"></log-date>
     </div>
+    <div class="column is-narrow is-flex">
+      <log-level :level="logEntry.level"></log-level>
+    </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>
+      <ul class="fields" :class="{ expanded }" @click="expandToggle()">
+        <li v-for="(value, name) in validValues">
+          <span class="has-text-grey">{{ name }}=</span
+          ><span class="has-text-weight-bold" v-if="value === null">&lt;null&gt;</span>
+          <template v-else-if="Array.isArray(value)">
+            <span class="has-text-weight-bold" v-html="markSearch(JSON.stringify(value))"> </span>
+          </template>
+          <span class="has-text-weight-bold" v-html="markSearch(value)" v-else></span>
         </li>
+        <li class="has-text-grey" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
       </ul>
       <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
     </div>
@@ -24,11 +35,11 @@ const { logEntry } = defineProps<{
   visibleKeys: string[][];
 }>();
 
-let expanded = $ref(false);
+const [expanded, expandToggle] = useToggle();
 
-function validValues(obj: Record<string, any>) {
-  return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value !== undefined));
-}
+const validValues = computed(() => {
+  return Object.fromEntries(Object.entries(logEntry.message).filter(([_, value]) => value !== undefined));
+});
 </script>
 
 <style lang="scss" scoped>
@@ -38,6 +49,7 @@ function validValues(obj: Record<string, any>) {
 
   &:hover {
     cursor: pointer;
+
     &::after {
       content: "expand json";
       color: var(--secondary-color);
@@ -55,6 +67,7 @@ function validValues(obj: Record<string, any>) {
 
   li {
     display: inline-block;
+
     & + li {
       margin-left: 1em;
     }

assets/components/LogViewer/ContainerHealth.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="icon is-small health" :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 lang="scss" scoped>
+.health {
+  &[health="unhealthy"] {
+    color: var(--red-color);
+  }
+
+  &[health="healthy"] {
+    color: var(--green-color);
+  }
+}
+</style>

assets/components/LogViewer/ContainerPopup.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <span class="has-text-weight-light"> RUNNING </span>
+    <span class="has-text-weight-semibold">
+      <distance-time :date="container.created" strict :suffix="false"></distance-time>
+    </span>
+  </div>
+  <div>
+    <span class="has-text-weight-light"> LOAD </span>
+    <span class="has-text-weight-semibold"> {{ container.stat.cpu }}% </span>
+  </div>
+  <div>
+    <span class="has-text-weight-light"> MEM </span>
+    <span class="has-text-weight-semibold"> {{ formatBytes(container.stat.memoryUsage) }} </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Container } from "@/models/Container";
+
+const { container } = defineProps<{
+  container: Container;
+}>();
+</script>
+
+<style lang="scss" scoped></style>

assets/components/LogViewer/ContainerStat.vue

@@ -4,13 +4,13 @@
       class="column is-narrow"
       :data="memoryData"
       label="mem"
-      :stat-value="formatBytes(container.stat.memoryUsage)"
+      :stat-value="formatBytes(unref(container.stat).memoryUsage)"
     ></stat-monitor>
     <stat-monitor
       class="column is-narrow"
       :data="cpuData"
       label="load"
-      :stat-value="container.stat.cpu + '%'"
+      :stat-value="unref(container.stat).cpu + '%'"
     ></stat-monitor>
   </div>
 </template>
@@ -22,39 +22,33 @@ import { type ComputedRef } from "vue";
 const container = inject("container") as ComputedRef<Container>;
 
 const cpuData = computedWithControl(
-  () => container.value.getLastStat(),
+  () => container.value.stat,
   () => {
-    const history = container.value.getStatHistory();
+    const history = container.value.statHistory;
     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(),
+  () => container.value.stat,
   () => {
-    const history = container.value.getStatHistory();
+    const history = container.value.statHistory;
     const points: Point<string>[] = history.map((stat, i) => ({
       x: i,
       y: stat.snapshot.memory,
       value: formatBytes(stat.snapshot.memoryUsage),
     }));
     return points;
-  }
+  },
 );
 </script>
 
 <style lang="scss" scoped>
-.has-spacer {
-  &::after {
-    content: " ";
-  }
-}
-
 .has-border {
   border: 1px solid var(--primary-color);
   border-radius: 3px;

assets/components/LogViewer/ContainerTitle.vue

@@ -1,9 +1,17 @@
 <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 class="column is-ellipsis">
+      <container-health :health="container.health" v-if="container.health"></container-health>
+      <div class="name">
+        <span>{{ container.name }}</span
+        ><span v-if="container.isSwarm" class="swarm-id">{{ container.swarmId }}</span>
+      </div>
+      <tag class="is-hidden-mobile">{{ container.image.replace(/@sha.*/, "") }}</tag>
+      <span class="icon is-clickable" @click="togglePinnedContainer(container.storageKey)">
+        <carbon:star-filled v-if="pinned" />
+        <carbon:star v-else />
+      </span>
+    </div>
   </div>
 </template>
 
@@ -12,6 +20,29 @@ import { Container } from "@/models/Container";
 import { type ComputedRef } from "vue";
 
 const container = inject("container") as ComputedRef<Container>;
+const pinned = computed(() => pinnedContainers.value.has(container.value.storageKey));
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.icon {
+  vertical-align: middle;
+}
+
+.name {
+  display: inline-flex;
+  .swarm-id {
+    max-width: 0;
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: max-width 0.2s ease-in-out;
+    will-change: max-width;
+  }
+
+  &:hover {
+    .swarm-id {
+      max-width: 400px;
+    }
+  }
+}
+</style>

assets/components/LogViewer/FieldList.vue

@@ -14,14 +14,13 @@
         <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 v-html="JSON.stringify(item)"></span><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>
+        <span class="has-text-grey">{{ name }}=</span><span class="has-text-weight-bold" v-html="value"></span>
       </template>
     </li>
   </ul>

assets/components/LogViewer/LogActionsToolbar.vue

@@ -1,22 +1,31 @@
 <template>
   <dropdown-menu class="is-right">
-    <a class="dropdown-item" @click="onClearClicked">
+    <template #trigger>
+      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+        <span class="icon">
+          <carbon:circle-solid class="is-red is-small" v-if="streamConfig.stderr" />
+          <carbon:circle-solid class="is-blue is-small" v-if="streamConfig.stdout" />
+        </span>
+      </button>
+    </template>
+    <a class="dropdown-item" @click="clear()">
       <div class="level is-justify-content-start">
         <div class="level-left">
           <div class="level-item">
-            <octicon-trash-24 class="mr-4" />
+            <octicon:trash-24 />
           </div>
         </div>
-        <div class="level-right">
+        <div class="level-right is-justify-content-space-between is-flex-grow-1">
           <div class="level-item">{{ $t("toolbar.clear") }}</div>
+          <div class="level-item"><key-shortcut char="k" :modifiers="['shift', 'meta']"></key-shortcut></div>
         </div>
       </div>
     </a>
-    <a class="dropdown-item" :href="`${base}/api/logs/download?id=${container.id}`">
+    <a class="dropdown-item" :href="`${base}/api/logs/download/${container.host}/${container.id}`">
       <div class="level is-justify-content-start">
         <div class="level-left">
           <div class="level-item">
-            <octicon-download-24 class="mr-4" />
+            <octicon:download-24 />
           </div>
         </div>
         <div class="level-right">
@@ -29,11 +38,73 @@
       <div class="level is-justify-content-start">
         <div class="level-left">
           <div class="level-item">
-            <mdi-light-magnify class="mr-4" />
+            <mdi:light-magnify />
+          </div>
+        </div>
+        <div class="level-right is-justify-content-space-between is-flex-grow-1">
+          <div class="level-item">{{ $t("toolbar.search") }}</div>
+          <div class="level-item"><key-shortcut char="f"></key-shortcut></div>
+        </div>
+      </div>
+    </a>
+
+    <hr class="dropdown-divider" />
+    <a
+      class="dropdown-item"
+      @click="
+        streamConfig.stdout = true;
+        streamConfig.stderr = true;
+      "
+    >
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <template v-if="streamConfig.stderr && streamConfig.stdout">
+              <carbon:circle-solid class="is-red is-small" />
+              <carbon:circle-solid class="is-blue is-small" />
+            </template>
           </div>
         </div>
         <div class="level-right">
-          <div class="level-item">{{ $t("toolbar.search") }}</div>
+          {{ $t("toolbar.show-all") }}
+        </div>
+      </div>
+    </a>
+    <a
+      class="dropdown-item"
+      @click="
+        streamConfig.stdout = true;
+        streamConfig.stderr = false;
+      "
+    >
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <carbon:circle-solid class="is-blue is-small" v-if="!streamConfig.stderr && streamConfig.stdout" />
+          </div>
+        </div>
+        <div class="level-right">
+          {{ $t("toolbar.show", { std: "STDOUT" }) }}
+        </div>
+      </div>
+    </a>
+    <a
+      class="dropdown-item"
+      @click="
+        streamConfig.stdout = false;
+        streamConfig.stderr = true;
+      "
+    >
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <carbon:circle-solid class="is-red is-small" v-if="streamConfig.stderr && !streamConfig.stdout" />
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">
+            {{ $t("toolbar.show", { std: "STDERR" }) }}
+          </div>
         </div>
       </div>
     </a>
@@ -47,23 +118,20 @@ import { Container } from "@/models/Container";
 const { showSearch } = useSearchFilter();
 const { base } = config;
 
-const { onClearClicked = (e: Event) => {} } = defineProps<{
-  onClearClicked: (e: Event) => void;
-}>();
+const clear = defineEmit();
 
 const container = inject("container") as ComputedRef<Container>;
+const streamConfig = inject("stream-config") as { stdout: boolean; stderr: boolean };
 </script>
 
 <style lang="scss" scoped>
-#download.button,
-#clear.button {
-  .icon {
-    height: 80%;
-  }
+.level-left .level-item {
+  width: 2.2em;
+  align-items: center;
+  margin-right: 0.5em;
+}
 
-  &:hover {
-    color: var(--primary-color);
-    border-color: var(--primary-color);
-  }
+.is-small {
+  width: 0.6em;
 }
 </style>

assets/components/LogViewer/LogContainer.vue

@@ -1,7 +1,7 @@
 <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="mr-0 columns is-mobile is-vcentered is-marginless has-boxshadow">
         <div class="column is-clipped is-paddingless">
           <container-title @close="$emit('close')" />
         </div>
@@ -9,11 +9,11 @@
           <container-stat />
         </div>
 
-        <div class="mr-2 column is-narrow is-paddingless">
-          <log-actions-toolbar :onClearClicked="onClearClicked" />
+        <div class="mr-2 column is-narrow is-paddingless is-hidden-mobile">
+          <log-actions-toolbar @clear="onClearClicked()" />
         </div>
         <div class="mr-2 column is-narrow is-paddingless" v-if="closable">
-          <button class="delete is-medium" @click="emit('close')"></button>
+          <button class="delete is-medium" @click="close()"></button>
         </div>
       </div>
     </template>
@@ -38,26 +38,34 @@ const {
   closable?: boolean;
 }>();
 
-const emit = defineEmits<{
-  (event: "close"): void;
-}>();
+const close = defineEmit();
 
 const store = useContainerStore();
 
 const container = store.currentContainer($$(id));
+const config = reactive({ stdout: true, stderr: true });
 
 provide("container", container);
+provide("stream-config", config);
 
 const viewer = ref<InstanceType<typeof LogViewerWithSource>>();
 
 function onClearClicked() {
   viewer.value?.clear();
 }
+
+onKeyStroke("k", (e) => {
+  if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+    onClearClicked();
+    e.preventDefault();
+  }
+});
 </script>
 <style lang="scss" scoped>
 button.delete {
   background-color: var(--scheme-main-ter);
   opacity: 0.6;
+
   &:after,
   &:before {
     background-color: var(--text-color);

assets/components/LogViewer/LogDate.vue

@@ -1,5 +1,5 @@
 <template>
-  <relative-time :date="date" class="date"></relative-time>
+  <date-time :date="date" class="date"></date-time>
 </template>
 <script lang="ts" setup>
 defineProps<{

assets/components/LogViewer/LogEventSource.spec.ts

@@ -12,7 +12,7 @@ import { createRouter, createWebHistory } from "vue-router";
 
 vi.mock("@/stores/config", () => ({
   __esModule: true,
-  default: { base: "" },
+  default: { base: "", hosts: ["localhost"] },
 }));
 
 /**
@@ -44,11 +44,11 @@ describe("<LogEventSource />", () => {
       hourStyle = "auto",
     }: { searchFilter?: string | undefined; hourStyle?: "auto" | "24" | "12" } = {
       hourStyle: "auto",
-    }
+    },
   ) {
     settings.value.hourStyle = hourStyle;
     search.searchFilter.value = searchFilter;
-    if(searchFilter){
+    if (searchFilter) {
       search.showSearch.value = true;
     }
 
@@ -71,7 +71,8 @@ describe("<LogEventSource />", () => {
           LogViewer,
         },
         provide: {
-          container: computed(() => ({ id: "abc", image: "test:v123" })),
+          container: computed(() => ({ id: "abc", image: "test:v123", host: "localhost" })),
+          "stream-config": reactive({ stdout: true, stderr: true }),
           scrollingPaused: computed(() => false),
         },
       },
@@ -84,6 +85,8 @@ describe("<LogEventSource />", () => {
     });
   }
 
+  const sourceUrl = "/api/logs/stream/localhost/abc?lastEventId=&stdout=1&stderr=1";
+
   test("renders correctly", async () => {
     const wrapper = createLogEventSource();
     expect(wrapper.html()).toMatchSnapshot();
@@ -91,22 +94,22 @@ describe("<LogEventSource />", () => {
 
   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);
+    sources[sourceUrl].emitOpen();
+    expect(sources[sourceUrl].readyState).toBe(1);
     wrapper.unmount();
   });
 
   test("should close EventSource", async () => {
     const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    sources[sourceUrl].emitOpen();
     wrapper.unmount();
-    expect(sources["/api/logs/stream?id=abc&lastEventId="].readyState).toBe(2);
+    expect(sources[sourceUrl].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({
+    sources[sourceUrl].emitOpen();
+    sources[sourceUrl].emitMessage({
       data: `{"ts":1560336942459, "m":"This is a message.", "id":1}`,
     });
 
@@ -121,8 +124,8 @@ describe("<LogEventSource />", () => {
   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({
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
         data: `{"ts":1560336942459, "m":"This is a message.", "id":1}`,
       });
 
@@ -134,8 +137,8 @@ describe("<LogEventSource />", () => {
 
     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({
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
         data: '{"ts":1560336942459,"m":"\\u001b[30mblack\\u001b[37mwhite", "id":1}',
       });
 
@@ -147,8 +150,8 @@ describe("<LogEventSource />", () => {
 
     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({
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
         data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
       });
 
@@ -160,8 +163,8 @@ describe("<LogEventSource />", () => {
 
     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({
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
         data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
       });
 
@@ -173,8 +176,8 @@ describe("<LogEventSource />", () => {
 
     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({
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
         data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
       });
 
@@ -186,11 +189,11 @@ describe("<LogEventSource />", () => {
 
     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({
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
         data: `{"ts":1560336942459, "m":"foo bar", "id":1}`,
       });
-      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+      sources[sourceUrl].emitMessage({
         data: `{"ts":1560336942459, "m":"test bar", "id":2}`,
       });
 

assets/components/LogViewer/LogEventSource.vue

@@ -7,15 +7,14 @@
 import { Container } from "@/models/Container";
 import { type ComputedRef } from "vue";
 
-const emit = defineEmits<{
-  (e: "loading-more", value: boolean): void;
-}>();
+const loadingMore = defineEmit<[value: boolean]>();
 
 const container = inject("container") as ComputedRef<Container>;
-const { messages, loadOlderLogs } = useLogStream(container);
+const config = inject("stream-config") as { stdout: boolean; stderr: boolean };
+const { messages, loadOlderLogs } = useLogStream(container, config);
 
-const beforeLoading = () => emit("loading-more", true);
-const afterLoading = () => emit("loading-more", false);
+const beforeLoading = () => loadingMore(true);
+const afterLoading = () => loadingMore(false);
 
 defineExpose({
   clear: () => (messages.value = []),

assets/components/LogViewer/LogLevel.vue

@@ -0,0 +1,63 @@
+<template>
+  <div :class="level" :data-position="position"></div>
+</template>
+<script lang="ts" setup>
+import { Position } from "@/models/LogEntry";
+
+defineProps<{
+  level?: string;
+  position?: Position;
+}>();
+</script>
+
+<style lang="scss" scoped>
+div {
+  display: inline-block;
+  width: 0.7em;
+  height: 0.7em;
+  border-radius: 0.5em;
+  align-self: auto;
+  margin-top: 0.4em;
+
+  &[data-position="start"] {
+    border-radius: 0.5em 0.5em 0 0;
+    height: 70%;
+    margin-bottom: -0.2em;
+    margin-top: auto;
+    align-self: flex-end;
+  }
+
+  &[data-position="middle"] {
+    border-radius: 0;
+    height: auto;
+    margin: -0.2em 0;
+    align-self: auto;
+  }
+
+  &[data-position="end"] {
+    border-radius: 0 0 0.5em 0.5em;
+    height: 70%;
+    margin-top: -0.2em;
+    align-self: flex-start;
+  }
+
+  &.debug,
+  &.trace {
+    background-color: var(--purple-color);
+  }
+
+  &.info {
+    background-color: var(--green-color);
+  }
+
+  &.error,
+  &.fatal {
+    background-color: var(--red-color);
+  }
+
+  &.warn,
+  &.warning {
+    background-color: var(--orange-color);
+  }
+}
+</style>

assets/components/LogViewer/LogStd.vue

@@ -0,0 +1,25 @@
+<template>
+  <tag size="small" :std="std">
+    {{ std }}
+  </tag>
+</template>
+
+<script lang="ts" setup>
+import { Std } from "@/models/LogEntry";
+
+defineProps<{
+  std: Std;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.tag {
+  &[std="stdout"] {
+    color: var(--blue-color);
+  }
+
+  &[std="stderr"] {
+    color: var(--red-color);
+  }
+}
+</style>

assets/components/LogViewer/LogViewer.vue

@@ -12,7 +12,7 @@
             <div class="level is-justify-content-start">
               <div class="level-left">
                 <div class="level-item">
-                  <cil-find-in-page class="mr-4" />
+                  <cil:find-in-page class="mr-4" />
                 </div>
               </div>
               <div class="level-right">
@@ -58,24 +58,36 @@ const routeHash = useRouteHash();
 watch(
   routeHash,
   (hash) => {
-    document.querySelector(`[data-key="${hash.substring(1)}"]`)?.scrollIntoView({ block: "center" });
+    if (hash) {
+      document.querySelector(`[data-key="${hash.substring(1)}"]`)?.scrollIntoView({ block: "center" });
+    }
   },
-  { immediate: true, flush: "post" }
+  { immediate: true, flush: "post" },
 );
 </script>
 <style scoped lang="scss">
 .events {
   padding: 1em 0;
-  font-family: SFMono-Regular, Consolas, Liberation Mono, monaco, Menlo, monospace;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    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);
     }

assets/components/LogViewer/LogViewerWithSource.vue

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

assets/components/LogViewer/SimpleLogItem.vue

@@ -1,8 +1,14 @@
 <template>
-  <div class="columns is-1 is-variable">
+  <div class="columns is-1 is-variable is-mobile">
+    <div class="column is-narrow" v-if="showStd">
+      <log-std :std="logEntry.std"></log-std>
+    </div>
     <div class="column is-narrow" v-if="showTimestamp">
       <log-date :date="logEntry.date"></log-date>
     </div>
+    <div class="column is-narrow is-flex">
+      <log-level :level="logEntry.level" :position="logEntry.position"></log-level>
+    </div>
     <div class="text column" v-html="colorize(logEntry.message)"></div>
   </div>
 </template>
@@ -10,7 +16,7 @@
 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(--text-color)" });
 defineProps<{
   logEntry: SimpleLogEntry;
 }>();

assets/components/LogViewer/StatMonitor.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="has-text-centered is-relative host" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
-    <div class="has-border has-boxshadow">
+    <div class="has-border has-boxshadow is-hidden-mobile">
       <stat-sparkline :data="data" @selected-point="onSelectedPoint"></stat-sparkline>
     </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-light">{{ label }}</span>
       <span class="has-text-weight-bold">
         {{ mouseOver ? selectedPoint?.value ?? selectedPoint?.y ?? statValue : statValue }}
       </span>
@@ -15,7 +15,7 @@
 <script lang="ts" setup>
 const { data, label, statValue } = defineProps<{ data: Point<unknown>[]; label: string; statValue: string | number }>();
 
-let selectedPoint: Point<unknown> = $ref();
+let selectedPoint: Point<unknown> | undefined = $ref();
 
 function onSelectedPoint(point: Point<unknown>) {
   selectedPoint = point;
@@ -25,12 +25,6 @@ let mouseOver = $ref(false);
 </script>
 
 <style lang="scss" scoped>
-.has-spacer {
-  &::after {
-    content: " ";
-  }
-}
-
 .has-border {
   border: 1px solid var(--primary-color);
   border-radius: 3px;
@@ -48,9 +42,11 @@ let mouseOver = $ref(false);
   color: var(--secondary-color);
 }
 
-.is-top-left {
-  position: absolute;
-  top: 0;
-  left: 0.75em;
+@media screen and (min-width: 768px) {
+  .is-top-left {
+    position: absolute;
+    top: 0;
+    left: 0.75em;
+  }
 }
 </style>

assets/components/LogViewer/StatSparkline.vue

@@ -15,9 +15,7 @@ const { data, width = 150, height = 30 } = defineProps<{ data: Point<unknown>[];
 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 selectedPoint = defineEmit<[value: Point<unknown>]>();
 
 const shape = d3
   .area<Point<unknown>>()
@@ -28,7 +26,7 @@ const shape = d3
 
 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]);
+  y.domain(d3.extent([...data, { y: 1 }], (d) => d.y) as [number, number]);
 
   return shape(data) ?? "";
 });
@@ -41,7 +39,7 @@ function onMove(e: MouseEvent) {
   const index = Math.round(xValue);
   lineX = x(index);
   const point = data[index];
-  emit("selected-point", point);
+  selectedPoint(point);
 }
 </script>
 

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

@@ -1,200 +1,237 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 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=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><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 data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
                       <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 data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">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 data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <!--v-if-->
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">&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=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><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 data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
                       <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 data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">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 data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <!--v-if-->
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">&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=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><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 data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
                       <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 data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">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 data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <!--v-if-->
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">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=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><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 data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
                       <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 data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">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 data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <!--v-if-->
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\"><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=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><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 data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#2\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
                       <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 data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">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 data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <!--v-if-->
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\"><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=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><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 data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
                       <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 data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">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 data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <!--v-if-->
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">&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 data-v-1cd63c6e=\\"\\" class=\\"infinte-loader\\">
+  <div data-v-1cd63c6e=\\"\\" class=\\"spinner\\" style=\\"display: none;\\">
+    <div data-v-1cd63c6e=\\"\\" class=\\"bounce1\\"></div>
+    <div data-v-1cd63c6e=\\"\\" class=\\"bounce2\\"></div>
+    <div data-v-1cd63c6e=\\"\\" class=\\"bounce3\\"></div>
   </div>
 </div>
-<ul class=\\"events medium\\" data-v-2e92daca=\\"\\"></ul>"
+
+<ul data-v-2e92daca=\\"\\" class=\\"events medium\\"></ul>"
 `;
 
 exports[`<LogEventSource /> > should parse messages 1`] = `
@@ -202,5 +239,8 @@ SimpleLogEntry {
   "_message": "This is a message.",
   "date": 2019-06-12T10:55:42.459Z,
   "id": 1,
+  "level": undefined,
+  "position": undefined,
+  "std": "stderr",
 }
 `;

assets/components/PastTime.vue

@@ -1,19 +0,0 @@
-<template>
-  <time :datetime="date.toISOString()">{{ text }}</time>
-</template>
-
-<script lang="ts" setup>
-import formatDistance from "date-fns/formatDistance";
-
-const { date } = defineProps<{
-  date: Date;
-}>();
-
-const text = ref<string>();
-function updateFromNow() {
-  text.value = formatDistance(date, new Date(), {
-    addSuffix: true,
-  });
-}
-useIntervalFn(updateFromNow, 30_000, { immediateCallback: true });
-</script>

assets/components/Popup.vue

@@ -0,0 +1,51 @@
+<template>
+  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" ref="trigger"><slot></slot></div>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-show="show && (delayedShow || glopbalShow)" class="content" ref="content">
+        <slot name="content"></slot>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { globalShowPopup } from "@/composables/popup";
+
+let glopbalShow = globalShowPopup();
+let show = ref(glopbalShow.value);
+let delayedShow = refDebounced(show, 1000);
+
+let content: HTMLElement | null = $ref(null);
+let trigger: HTMLElement | null = $ref(null);
+
+function onMouseEnter(e: MouseEvent) {
+  show.value = true;
+  glopbalShow.value = true;
+  if (e.target && content && e.target instanceof Element) {
+    const { left, top, width } = e.target.getBoundingClientRect();
+    const x = left + width + 10;
+    const y = top;
+
+    content.style.left = `${x}px`;
+    content.style.top = `${y}px`;
+  }
+}
+
+function onMouseLeave() {
+  show.value = false;
+  glopbalShow.value = false;
+}
+</script>
+
+<style scoped>
+.content {
+  position: fixed;
+  z-index: 9999;
+  background: var(--scheme-main-ter);
+  border-radius: 0.5em;
+  padding: 1em;
+  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
+  border: 1px solid var(--border-color);
+}
+</style>

assets/components/RelativeTime.vue

@@ -1,21 +0,0 @@
-<template>
-  <time :datetime="date.toISOString()">{{ format(date) }}</time>
-</template>
-
-<script lang="ts" setup>
-defineProps<{
-  date: Date;
-}>();
-
-const dateFormatter = new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
-const use12Hour = $computed(() => ({ auto: undefined, "12": true, "24": false }[hourStyle.value]));
-const timeFormatter = $computed(
-  () => new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit", hour12: use12Hour })
-);
-
-function format(date: Date) {
-  const dateStr = dateFormatter.format(date);
-  const timeStr = timeFormatter.format(date);
-  return `${dateStr} ${timeStr}`;
-}
-</script>

assets/components/ScrollProgress.vue

@@ -1,20 +1,22 @@
 <template>
-  <div class="scroll-progress" ref="root">
-    <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
-      <circle r="44" cx="50" cy="50" />
-    </svg>
-    <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
-      <template v-if="indeterminate">
-        <div class="column is-narrow is-paddingless is-size-2">&#8734;</div>
-      </template>
-      <template v-else>
-        <span class="column is-narrow is-paddingless is-size-2">
-          {{ Math.ceil(scrollProgress * 100) }}
-        </span>
-        <span class="column is-narrow is-paddingless"> % </span>
-      </template>
+  <transition name="fade">
+    <div class="scroll-progress" ref="root" v-show="!autoHide || show">
+      <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
+        <circle r="44" cx="50" cy="50" />
+      </svg>
+      <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
+        <template v-if="indeterminate">
+          <div class="column is-narrow is-paddingless is-size-2">&#8734;</div>
+        </template>
+        <template v-else-if="!isNaN(scrollProgress)">
+          <span class="column is-narrow is-paddingless is-size-2">
+            {{ Math.ceil(scrollProgress * 100) }}
+          </span>
+          <span class="column is-narrow is-paddingless"> % </span>
+        </template>
+      </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script lang="ts" setup>
@@ -24,12 +26,12 @@ const { indeterminate = false, autoHide = false } = defineProps<{
 }>();
 
 const scrollProgress = ref(0);
-const animation = ref({ cancel: () => {} });
 const root = ref<HTMLElement>();
 const store = useContainerStore();
 const { activeContainers } = storeToRefs(store);
 const scrollElement = ref<HTMLElement | Document>((root.value?.closest("[data-scrolling]") as HTMLElement) ?? document);
-const { y: scrollY } = useScroll(scrollElement, { throttle: 100 });
+const { y: scrollY } = useScroll(scrollElement as Ref<HTMLElement | Document>, { throttle: 100 });
+const show = autoResetRef(false, 2000);
 
 onMounted(() => {
   watch(
@@ -37,7 +39,7 @@ onMounted(() => {
     () => {
       scrollElement.value = (root.value?.closest("[data-scrolling]") as HTMLElement) ?? document;
     },
-    { immediate: true, flush: "post" }
+    { immediate: true, flush: "post" },
   );
 });
 
@@ -46,18 +48,9 @@ watchPostEffect(() => {
     scrollElement.value === document
       ? (scrollElement.value as Document).documentElement
       : (scrollElement.value as HTMLElement);
-  scrollProgress.value = scrollY.value / (parent.scrollHeight - parent.clientHeight);
-  animation.value.cancel();
-  if (autoHide && root.value) {
-    animation.value = root.value.animate(
-      { opacity: [1, 0] },
-      {
-        duration: 500,
-        delay: 2000,
-        fill: "both",
-        easing: "ease-out",
-      }
-    );
+  scrollProgress.value = Math.max(0, Math.min(1, scrollY.value / (parent.scrollHeight - parent.clientHeight)));
+  if (autoHide) {
+    show.value = true;
   }
 });
 </script>
@@ -119,4 +112,12 @@ watchPostEffect(() => {
     transform: rotate(360deg);
   }
 }
+
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

assets/components/ScrollableView.vue

@@ -5,7 +5,7 @@
     </header>
     <main :data-scrolling="scrollable ? true : undefined">
       <div class="is-scrollbar-progress is-hidden-mobile">
-        <scroll-progress v-show="paused" :indeterminate="loading" :auto-hide="!loading"></scroll-progress>
+        <scroll-progress v-if="paused" :indeterminate="loading" :auto-hide="!loading"></scroll-progress>
       </div>
       <div ref="scrollableContent">
         <slot :setLoading="setLoading"></slot>
@@ -22,7 +22,7 @@
           @click="scrollToBottom()"
           v-show="paused"
         >
-          <mdi-light-chevron-double-down />
+          <mdi:light-chevron-double-down />
         </button>
       </transition>
     </div>
@@ -45,7 +45,8 @@ const mutationObserver = new MutationObserver((e) => {
     scrollToBottom();
   } else {
     const record = e[e.length - 1];
-    if (record.target.children[record.target.children.length - 1] == record.addedNodes[record.addedNodes.length - 1]) {
+    const children = (record.target as HTMLElement).children;
+    if (children[children.length - 1] == record.addedNodes[record.addedNodes.length - 1]) {
       hasMore = true;
     }
   }
@@ -81,6 +82,10 @@ section {
     background: var(--body-background-color);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     z-index: 1;
+
+    @media screen and (max-width: 768px) {
+      top: 70px;
+    }
   }
 
   &.is-full-height-scrollable {
@@ -97,6 +102,7 @@ section {
   .is-scrollbar-progress {
     text-align: right;
     margin-right: 110px;
+
     .scroll-progress {
       position: fixed;
       top: 60px;
@@ -111,6 +117,7 @@ section {
   .is-scrollbar-notification {
     text-align: right;
     margin-right: 65px;
+
     button {
       position: fixed;
       bottom: 30px;
@@ -138,9 +145,11 @@ section {
     100% {
       transform: translateY(0);
     }
+
     40% {
       transform: translateY(-30px);
     }
+
     60% {
       transform: translateY(-15px);
     }
@@ -148,11 +157,20 @@ section {
 
   .fade-enter-active,
   .fade-leave-active {
-    transition: opacity 0.15s ease-in;
+    transition: opacity 0.2s ease-out !important;
   }
+
   .fade-enter,
   .fade-leave-to {
     opacity: 0;
   }
 }
 </style>
+
+<style>
+@media screen and (max-width: 768px) {
+  .splitpanes__pane {
+    overflow: unset !important;
+  }
+}
+</style>

assets/components/Search.vue

@@ -11,7 +11,7 @@
           @keyup.esc="resetSearch()"
         />
         <span class="icon is-left">
-          <mdi-light-magnify />
+          <mdi:light-magnify />
         </span>
       </p>
     </div>
@@ -46,12 +46,15 @@ onUnmounted(() => resetSearch());
   right: 0;
   border-radius: 0 0 0 5px;
   z-index: 10;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24);
 
   button.delete {
     margin-left: 1em;
     background-color: var(--scheme-main-ter);
     opacity: 0.6;
+
     &:after,
     &:before {
       background-color: var(--text-color);
@@ -68,6 +71,7 @@ onUnmounted(() => resetSearch());
 
   .input {
     color: var(--body-color);
+
     &::placeholder {
       color: var(--border-color);
     }

assets/components/SideMenu.vue

@@ -1,130 +1,213 @@
 <template>
-  <aside>
-    <div class="columns is-marginless">
-      <div class="column is-paddingless">
-        <h1>
-          <router-link :to="{ name: 'index' }">
-            <svg class="logo">
-              <use href="#logo"></use>
-            </svg>
-          </router-link>
-          <small class="subtitle is-6 is-block mb-4" v-if="hostname">
-            {{ hostname }}
-          </small>
-        </h1>
-      </div>
-    </div>
-    <div class="columns is-marginless">
-      <div class="column is-narrow py-0 pl-0 pr-1">
-        <button class="button is-rounded is-small" @click="$emit('search')" :title="$t('tooltip.search')">
-          <span class="icon">
-            <mdi-light-magnify />
-          </span>
-        </button>
-      </div>
-      <div class="column is-narrow py-0" :class="secured ? 'pl-0 pr-1' : 'px-0'">
-        <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded is-small">
-          <span class="icon">
-            <mdi-light-cog />
-          </span>
-        </router-link>
-      </div>
-      <div class="column is-narrow py-0 px-0" v-if="secured">
-        <a class="button is-rounded is-small" :href="`${base}/logout`" :title="$t('button.logout')">
-          <span class="icon">
-            <mdi-light-logout />
-          </span>
-        </a>
-      </div>
-    </div>
-    <p class="menu-label is-hidden-mobile">{{ $t("label.containers") }}</p>
-    <ul class="menu-list is-hidden-mobile" v-if="ready">
-      <li v-for="item in visibleContainers" :key="item.id" :class="item.state">
-        <router-link
-          :to="{ name: 'container-id', params: { id: item.id } }"
-          active-class="is-active"
-          :title="item.name"
-        >
-          <div class="container is-flex is-align-items-center">
-            <div class="is-flex-grow-1 is-ellipsis">
-              {{ item.name }}
-            </div>
-            <div class="is-flex-shrink-1 column-icon">
-              <span
-                class="icon is-small"
-                @click.stop.prevent="store.appendActiveContainer(item)"
-                v-show="!activeContainersById[item.id]"
-                :title="$t('tooltip.pin-column')"
-              >
-                <cil-columns />
-              </span>
-            </div>
+  <div v-if="ready">
+    <nav class="breadcrumb menu-label" aria-label="breadcrumbs">
+      <ul v-if="sessionHost">
+        <li>
+          <a href="#" @click.prevent="setHost(null)">{{ hosts[sessionHost].name }}</a>
+        </li>
+      </ul>
+      <ul v-else>
+        <li>Hosts</li>
+      </ul>
+    </nav>
+    <transition :name="sessionHost ? 'slide-left' : 'slide-right'" mode="out-in">
+      <ul class="menu-list" v-if="!sessionHost">
+        <li v-for="host in config.hosts">
+          <a @click.prevent="setHost(host.id)">{{ host.name }}</a>
+        </li>
+      </ul>
+      <transition-group tag="ul" name="list" class="menu-list" v-else>
+        <li v-for="item in menuItems" :key="item.id" :class="item.state" :data-label="item.id">
+          <div class="menu-label mt-4 mb-3" v-if="isLabel(item)">
+            {{ item.label }}
           </div>
-        </router-link>
-      </li>
-    </ul>
-    <ul class="menu-list is-hidden-mobile loading" v-else>
-      <li v-for="index in 7" class="my-4"><o-skeleton animated size="large" :key="index"></o-skeleton></li>
-    </ul>
-  </aside>
+          <popup v-else>
+            <router-link
+              :to="{ name: 'container-id', params: { id: item.id } }"
+              active-class="is-active"
+              :title="item.name"
+            >
+              <div class="container is-flex is-align-items-center">
+                <div class="is-flex-grow-1 is-ellipsis">
+                  <span>{{ item.name }}</span
+                  ><span class="has-text-weight-light has-light-opacity" v-if="item.isSwarm">{{ item.swarmId }}</span>
+                </div>
+                <div class="is-flex-shrink-1 is-flex icons">
+                  <div
+                    class="icon is-small pin"
+                    @click.stop.prevent="store.appendActiveContainer(item)"
+                    v-show="!activeContainersById[item.id]"
+                    :title="$t('tooltip.pin-column')"
+                  >
+                    <cil:columns />
+                  </div>
+
+                  <container-health :health="item.health"></container-health>
+                </div>
+              </div>
+            </router-link>
+            <template #content>
+              <container-popup :container="item"></container-popup>
+            </template>
+          </popup>
+        </li>
+      </transition-group>
+    </transition>
+  </div>
+  <ul class="menu-list is-hidden-mobile has-light-opacity" v-else>
+    <li v-for="index in 7" class="my-4"><o-skeleton animated size="large" :key="index"></o-skeleton></li>
+  </ul>
 </template>
 
 <script lang="ts" setup>
 import { Container } from "@/models/Container";
+import { sessionHost } from "@/composables/storage";
+
+const { t } = useI18n();
 
-const { base, secured, hostname } = config;
 const store = useContainerStore();
 
 const { activeContainers, visibleContainers, ready } = storeToRefs(store);
 
+function setHost(host: string | null) {
+  sessionHost.value = host;
+}
+
+const debouncedIds = debouncedRef(pinnedContainers, 200);
+const sortedContainers = computed(() =>
+  visibleContainers.value
+    .filter((c) => c.host === sessionHost.value)
+    .sort((a, b) => {
+      if (a.state === "running" && b.state !== "running") {
+        return -1;
+      } else if (a.state !== "running" && b.state === "running") {
+        return 1;
+      } else {
+        return a.name.localeCompare(b.name);
+      }
+    }),
+);
+
+const groupedContainers = computed(() =>
+  sortedContainers.value.reduce(
+    (acc, item) => {
+      if (debouncedIds.value.has(item.storageKey)) {
+        acc.pinned.push(item);
+      } else {
+        acc.unpinned.push(item);
+      }
+      return acc;
+    },
+    { pinned: [] as Container[], unpinned: [] as Container[] },
+  ),
+);
+
+type MenuLabel = { label: string; id: string; state: string };
+const pinnedLabel = { label: t("label.pinned"), id: "pinned", state: "label" } as MenuLabel;
+const allLabel = { label: t("label.containers"), id: "all", state: "label" } as MenuLabel;
+
+function isLabel(item: Container | MenuLabel): item is MenuLabel {
+  return (item as MenuLabel).label !== undefined;
+}
+
+const menuItems = computed(() => {
+  if (groupedContainers.value.pinned.length > 0) {
+    return [pinnedLabel, ...groupedContainers.value.pinned, allLabel, ...groupedContainers.value.unpinned];
+  } else {
+    return [allLabel, ...groupedContainers.value.unpinned];
+  }
+});
+
+const hosts = computed(() =>
+  config.hosts.reduce(
+    (acc, item) => {
+      acc[item.id] = item;
+      return acc;
+    },
+    {} as Record<string, { name: string; id: string }>,
+  ),
+);
+
 const activeContainersById = computed(() =>
-  activeContainers.value.reduce((acc, item) => {
-    acc[item.id] = item;
-    return acc;
-  }, {} as Record<string, Container>)
+  activeContainers.value.reduce(
+    (acc, item) => {
+      acc[item.id] = item;
+      return acc;
+    },
+    {} as Record<string, Container>,
+  ),
 );
 </script>
 <style scoped lang="scss">
-aside {
-  padding: 1em;
-  height: 100vh;
-  overflow: auto;
-  position: fixed;
-  width: inherit;
-
-  .is-hidden-mobile.is-active {
-    display: block !important;
-  }
-}
-
-.loading {
+.has-light-opacity {
   opacity: 0.5;
 }
 
-li.exited a {
+li.exited a,
+li.dead a {
   color: #777;
 }
 
-.logo {
-  width: 122px;
-  height: 54px;
-  fill: var(--logo-color);
+.icons {
+  column-gap: 0.35em;
+  align-items: baseline;
 }
+a {
+  .pin {
+    display: none;
 
-.menu-list li {
-  .column-icon {
-    visibility: hidden;
-
-    & > span {
-      vertical-align: middle;
-    }
-  }
-
-  &:hover .column-icon {
-    visibility: visible;
     &:hover {
       color: var(--secondary-color);
     }
   }
+
+  &:hover {
+    .pin {
+      display: block;
+    }
+  }
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.19s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.list-leave-active {
+  position: absolute;
 }
 </style>

assets/components/SidePanel.vue

@@ -0,0 +1,71 @@
+<template>
+  <aside>
+    <div class="columns is-marginless">
+      <div class="column is-paddingless">
+        <h1>
+          <router-link :to="{ name: 'index' }">
+            <svg class="logo">
+              <use href="#logo"></use>
+            </svg>
+          </router-link>
+
+          <small class="subtitle is-6 is-block mb-4" v-if="hostname">
+            {{ hostname }}
+          </small>
+        </h1>
+      </div>
+    </div>
+    <div class="columns is-marginless">
+      <div class="column is-narrow py-0 pl-0 pr-1">
+        <button class="button is-rounded is-small" @click="$emit('search')" :title="$t('tooltip.search')">
+          <span class="icon">
+            <mdi:light-magnify />
+          </span>
+        </button>
+      </div>
+      <div class="column is-narrow py-0" :class="secured ? 'pl-0 pr-1' : 'px-0'">
+        <router-link
+          :to="{ name: 'settings' }"
+          active-class="is-active"
+          class="button is-rounded is-small"
+          :aria-label="$t('title.settings')"
+        >
+          <span class="icon">
+            <mdi:light-cog />
+          </span>
+        </router-link>
+      </div>
+      <div class="column is-narrow py-0 px-0" v-if="secured">
+        <a class="button is-rounded is-small" :href="`${base}/logout`" :title="$t('button.logout')">
+          <span class="icon">
+            <mdi:light-logout />
+          </span>
+        </a>
+      </div>
+    </div>
+    <side-menu class="mt-4"></side-menu>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+const { base, secured, hostname } = config;
+</script>
+<style scoped lang="scss">
+aside {
+  padding: 1em;
+  height: 100vh;
+  overflow: auto;
+  position: fixed;
+  width: inherit;
+
+  .is-hidden-mobile.is-active {
+    display: block !important;
+  }
+}
+
+.logo {
+  width: 122px;
+  height: 54px;
+  fill: var(--logo-color);
+}
+</style>

assets/components/common/DateTime.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <time :datetime="date.toISOString()" class="is-hidden-mobile">{{ dateStr }}</time>
+    <time :datetime="date.toISOString()">{{ timeStr }}</time>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  date: Date;
+}>();
+
+const dateFormatter = new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
+const use12Hour = $computed(() => ({ auto: undefined, "12": true, "24": false })[hourStyle.value]);
+const timeFormatter = $computed(
+  () =>
+    new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit", hour12: use12Hour }),
+);
+
+const dateStr = $computed(() => dateFormatter.format(props.date));
+const timeStr = $computed(() => timeFormatter.format(props.date));
+</script>

assets/components/common/DistanceTime.vue

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

assets/components/common/MobileMenu.vue

@@ -8,9 +8,6 @@
           </svg>
         </router-link>
       </div>
-      <div class="column ml-4 is-family-monospace is-ellipsis" v-if="$route.name == 'container'">
-        {{ allContainersById[route.params.id].name }}
-      </div>
 
       <div class="column is-narrow push-right">
         <a
@@ -25,11 +22,28 @@
     </div>
 
     <div class="menu-label level is-mobile is-hidden-mobile" :class="{ 'is-active': showNav }">
+      <div v-if="config.hosts.length > 1">
+        <o-dropdown v-model="sessionHost" aria-role="list">
+          <template #trigger>
+            <o-button variant="primary" type="button" size="small">
+              <span>{{ sessionHost ? hosts[sessionHost].name : "" }}</span>
+              <span class="icon">
+                <carbon:caret-down />
+              </span>
+            </o-button>
+          </template>
+
+          <o-dropdown-item :value="value.id" aria-role="listitem" v-for="value in config.hosts" :key="value">
+            <span>{{ value.name }}</span>
+          </o-dropdown-item>
+        </o-dropdown>
+      </div>
+
       <div class="level-item has-text-centered">
         <div>
           <button class="button is-small is-rounded" @click="$emit('search')" :title="$t('tooltip.search')">
             <span class="icon">
-              <mdi-light-magnify />
+              <mdi:light-magnify />
             </span>
           </button>
         </div>
@@ -38,7 +52,7 @@
         <div>
           <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-small is-rounded">
             <span class="icon">
-              <mdi-light-cog />
+              <mdi:light-cog />
             </span>
           </router-link>
         </div>
@@ -47,7 +61,7 @@
         <div>
           <a class="button is-small is-rounded" :href="`${base}/logout`" :title="$t('button.logout')">
             <span class="icon">
-              <mdi-light-logout />
+              <mdi:light-logout />
             </span>
           </a>
         </div>
@@ -56,7 +70,7 @@
 
     <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">{{ $t("label.containers") }}</p>
     <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
-      <li v-for="item in visibleContainers" :key="item.id">
+      <li v-for="item in sortedContainers" :key="item.id">
         <router-link
           :to="{ name: 'container-id', params: { id: item.id } }"
           active-class="is-active"
@@ -73,15 +87,40 @@
 
 <script lang="ts" setup>
 const { base, secured } = config;
+import { sessionHost } from "@/composables/storage";
 const store = useContainerStore();
 const route = useRoute();
-const { visibleContainers, allContainersById } = storeToRefs(store);
+const { visibleContainers } = storeToRefs(store);
 
 let showNav = $ref(false);
 
 watch(route, () => {
   showNav = false;
 });
+
+const sortedContainers = computed(() =>
+  visibleContainers.value
+    .filter((c) => c.host === sessionHost.value)
+    .sort((a, b) => {
+      if (a.state === "running" && b.state !== "running") {
+        return -1;
+      } else if (a.state !== "running" && b.state === "running") {
+        return 1;
+      } else {
+        return a.name.localeCompare(b.name);
+      }
+    }),
+);
+
+const hosts = computed(() =>
+  config.hosts.reduce(
+    (acc, item) => {
+      acc[item.id] = item;
+      return acc;
+    },
+    {} as Record<string, { name: string; id: string }>,
+  ),
+);
 </script>
 <style scoped lang="scss">
 aside {

assets/components/common/Tag.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="tag" :size="size">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { size = undefined } = defineProps<{ size?: "small" | undefined }>();
+</script>
+
+<style scoped lang="scss">
+.tag {
+  background-color: var(--scheme-main-ter);
+  border: 1px solid var(--border-color);
+  &[size="small"] {
+    font-size: 0.61rem;
+  }
+}
+</style>

assets/composables/eventsource.ts

@@ -1,4 +1,5 @@
 import { type ComputedRef, type Ref } from "vue";
+import { encodeXML } from "entities";
 import debounce from "lodash.debounce";
 import {
   type LogEvent,
@@ -11,11 +12,21 @@ import {
 import { Container } from "@/models/Container";
 
 function parseMessage(data: string): LogEntry<string | JSONObject> {
-  const e = JSON.parse(data) as LogEvent;
+  const e = JSON.parse(data, (key, value) => {
+    if (typeof value === "string") {
+      return encodeXML(value);
+    }
+    return value;
+  }) as LogEvent;
   return asLogEntry(e);
 }
 
-export function useLogStream(container: ComputedRef<Container>) {
+type LogStreamConfig = {
+  stdout: boolean;
+  stderr: boolean;
+};
+
+export function useLogStream(container: ComputedRef<Container>, streamConfig: LogStreamConfig) {
   let messages: LogEntry<string | JSONObject>[] = $ref([]);
   let buffer: LogEntry<string | JSONObject>[] = $ref([]);
   const scrollingPaused = $ref(inject("scrollingPaused") as Ref<boolean>);
@@ -58,7 +69,22 @@ export function useLogStream(container: ComputedRef<Container>) {
       lastEventId = "";
     }
 
-    es = new EventSource(`${config.base}/api/logs/stream?id=${container.value.id}&lastEventId=${lastEventId}`);
+    const params = {
+      lastEventId,
+    } as { lastEventId: string; stdout?: string; stderr?: string };
+
+    if (streamConfig.stdout) {
+      params.stdout = "1";
+    }
+    if (streamConfig.stderr) {
+      params.stderr = "1";
+    }
+
+    es = new EventSource(
+      `${config.base}/api/logs/stream/${container.value.host}/${container.value.id}?${new URLSearchParams(
+        params,
+      ).toString()}`,
+    );
     es.addEventListener("container-stopped", () => {
       es?.close();
       es = null;
@@ -85,8 +111,25 @@ export function useLogStream(container: ComputedRef<Container>) {
     const last = messages[299].date;
     const delta = to.getTime() - last.getTime();
     const from = new Date(to.getTime() + delta);
+
+    const params = {
+      from: from.toISOString(),
+      to: to.toISOString(),
+    } as { from: string; to: string; stdout?: string; stderr?: string };
+
+    if (streamConfig.stdout) {
+      params.stdout = "1";
+    }
+    if (streamConfig.stderr) {
+      params.stderr = "1";
+    }
+
     const logs = await (
-      await fetch(`${config.base}/api/logs?id=${container.value.id}&from=${from.toISOString()}&to=${to.toISOString()}`)
+      await fetch(
+        `${config.base}/api/logs/${container.value.host}/${container.value.id}?${new URLSearchParams(
+          params,
+        ).toString()}`,
+      )
     ).text();
     if (logs) {
       const newMessages = logs
@@ -106,7 +149,7 @@ export function useLogStream(container: ComputedRef<Container>) {
         buffer.push(new DockerEventLogEntry("Container started", new Date(), "container-started"));
         connect({ clear: false });
       }
-    }
+    },
   );
 
   onUnmounted(() => {
@@ -118,8 +161,10 @@ export function useLogStream(container: ComputedRef<Container>) {
   watch(
     () => container.value.id,
     () => connect(),
-    { immediate: true }
+    { immediate: true },
   );
 
+  watch(streamConfig, () => connect());
+
   return { ...$$({ messages }), loadOlderLogs };
 }

assets/composables/popup.ts

@@ -0,0 +1,13 @@
+const show = ref(false);
+const debouncedShow = debouncedRef(show, 1000);
+
+const delayedShow = computed({
+  set(newVal: boolean) {
+    show.value = newVal;
+  },
+  get() {
+    return debouncedShow.value;
+  },
+});
+
+export const globalShowPopup = () => delayedShow;

assets/composables/search.ts

@@ -1,5 +1,6 @@
 import { type Ref } from "vue";
 import { type LogEntry, type JSONObject, SimpleLogEntry, ComplexLogEntry } from "@/models/LogEntry";
+import { encodeXML } from "entities";
 
 const searchFilter = ref<string>("");
 const debouncedSearchFilter = useDebounce(searchFilter);
@@ -11,6 +12,9 @@ function matchRecord(record: Record<string, any>, regex: RegExp): boolean {
     if (typeof value === "string" && regex.test(value)) {
       return true;
     }
+    if (isObject(value) && regex.test(JSON.stringify(value))) {
+      return true;
+    }
     if (Array.isArray(value) && matchRecord(value, regex)) {
       return true;
     }
@@ -19,9 +23,9 @@ function matchRecord(record: Record<string, any>, regex: RegExp): boolean {
 }
 
 export function useSearchFilter() {
-  const regex = computed(() => {
+  const regex = $computed(() => {
     const isSmartCase = debouncedSearchFilter.value === debouncedSearchFilter.value.toLowerCase();
-    return isSmartCase ? new RegExp(debouncedSearchFilter.value, "i") : new RegExp(debouncedSearchFilter.value);
+    return new RegExp(encodeXML(debouncedSearchFilter.value), isSmartCase ? "i" : undefined);
   });
 
   function filteredMessages(messages: Ref<LogEntry<string | JSONObject>[]>) {
@@ -30,9 +34,9 @@ export function useSearchFilter() {
         try {
           return messages.value.filter((d) => {
             if (d instanceof SimpleLogEntry) {
-              return regex.value.test(d.message);
+              return regex.test(d.message);
             } else if (d instanceof ComplexLogEntry) {
-              return matchRecord(d.message, regex.value);
+              return matchRecord(d.message, regex);
             }
             return false;
           });
@@ -59,7 +63,7 @@ export function useSearchFilter() {
       return log.map((d) => markSearch(d));
     }
 
-    return log.toString().replace(regex.value, (match) => `<mark>${match}</mark>`);
+    return log.toString().replace(regex, (match) => `<mark>${match}</mark>`);
   }
 
   function resetSearch() {

assets/composables/settings.ts

@@ -1,3 +1,4 @@
+import { toRefs } from "@vueuse/core";
 const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
 
 export const DEFAULT_SETTINGS: {
@@ -6,6 +7,7 @@ export const DEFAULT_SETTINGS: {
   menuWidth: number;
   smallerScrollbars: boolean;
   showTimestamp: boolean;
+  showStd: boolean;
   showAllContainers: boolean;
   lightTheme: "auto" | "dark" | "light";
   hourStyle: "auto" | "24" | "12";
@@ -17,6 +19,7 @@ export const DEFAULT_SETTINGS: {
   menuWidth: 15,
   smallerScrollbars: false,
   showTimestamp: true,
+  showStd: false,
   showAllContainers: false,
   lightTheme: "auto",
   hourStyle: "auto",
@@ -24,68 +27,19 @@ export const DEFAULT_SETTINGS: {
   collapseNav: false,
 };
 
-const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
+export const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
 settings.value = { ...DEFAULT_SETTINGS, ...settings.value };
 
-const search = computed({
-  get: () => settings.value.search,
-  set: (value) => (settings.value.search = value),
-});
-
-const size = computed({
-  get: () => settings.value.size,
-  set: (value) => (settings.value.size = value),
-});
-
-const menuWidth = computed({
-  get: () => settings.value.menuWidth,
-  set: (value) => (settings.value.menuWidth = value),
-});
-const smallerScrollbars = computed({
-  get: () => settings.value.smallerScrollbars,
-  set: (value) => (settings.value.smallerScrollbars = value),
-});
-
-const showTimestamp = computed({
-  get: () => settings.value.showTimestamp,
-  set: (value) => (settings.value.showTimestamp = value),
-});
-
-const showAllContainers = computed({
-  get: () => settings.value.showAllContainers,
-  set: (value) => (settings.value.showAllContainers = value),
-});
-
-const lightTheme = computed({
-  get: () => settings.value.lightTheme,
-  set: (value) => (settings.value.lightTheme = value),
-});
-
-const hourStyle = computed({
-  get: () => settings.value.hourStyle,
-  set: (value) => (settings.value.hourStyle = value),
-});
-
-const softWrap = computed({
-  get: () => settings.value.softWrap,
-  set: (value) => (settings.value.softWrap = value),
-});
-
-const collapseNav = computed({
-  get: () => settings.value.collapseNav,
-  set: (value) => (settings.value.collapseNav = value),
-});
-
-export {
+export const {
   collapseNav,
   softWrap,
   hourStyle,
   lightTheme,
   showAllContainers,
   showTimestamp,
+  showStd,
   smallerScrollbars,
   menuWidth,
   size,
   search,
-  settings
-};
+} = toRefs(settings);

assets/composables/storage.ts

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

assets/layouts/default.vue

@@ -3,7 +3,7 @@
     <mobile-menu v-if="isMobile" @search="showFuzzySearch"></mobile-menu>
     <splitpanes @resized="onResized($event)">
       <pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav">
-        <side-menu @search="showFuzzySearch"></side-menu>
+        <side-panel @search="showFuzzySearch"></side-panel>
       </pane>
       <pane min-size="10">
         <splitpanes>
@@ -32,10 +32,10 @@
       v-if="!isMobile"
     >
       <span class="icon ml-2" v-if="collapseNav">
-        <mdi-light-chevron-right />
+        <mdi:light-chevron-right />
       </span>
       <span class="icon" v-else>
-        <mdi-light-chevron-left />
+        <mdi:light-chevron-left />
       </span>
     </button>
   </main>
@@ -58,7 +58,7 @@ watchEffect(() => {
 });
 
 onKeyStroke("k", (e) => {
-  if (e.ctrlKey || e.metaKey) {
+  if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
     showFuzzySearch();
     e.preventDefault();
   }
@@ -87,6 +87,7 @@ function onResized(e: any) {
 :deep(.splitpanes--vertical > .splitpanes__splitter) {
   min-width: 3px;
   background: var(--border-color);
+
   &:hover {
     background: var(--border-hover-color);
   }
@@ -110,6 +111,7 @@ function onResized(e: any) {
   position: fixed;
   left: 10px;
   bottom: 10px;
+
   &.collapsed {
     left: -40px;
     width: 60px;

assets/main.ts

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

assets/models/Container.spec.ts

@@ -0,0 +1,19 @@
+import { describe, expect, test } from "vitest";
+import { Container } from "./Container";
+describe("Container", () => {
+  const names = [
+    [
+      "foo.gb1cto7gaq68fp4refnsr5hep.byqr1prci82zyfoos6gx1yhz0",
+      "foo",
+      ".gb1cto7gaq68fp4refnsr5hep.byqr1prci82zyfoos6gx1yhz0",
+    ],
+    ["bar.gb1cto7gaq68fp4refnsr5hep", "bar", ".gb1cto7gaq68fp4refnsr5hep"],
+    ["baz", "baz", null],
+  ];
+
+  test.each(names)("name %s should be %s and %s", (name, expectedName, expectedSwarmId) => {
+    const c = new Container("id", new Date(), "image", name!, "command", "host", "status", "created");
+    expect(c.name).toBe(expectedName);
+    expect(c.swarmId).toBe(expectedSwarmId);
+  });
+});

assets/models/Container.ts

@@ -1,31 +1,64 @@
-import type { ContainerStat, ContainerState } from "@/types/Container";
+import type { ContainerHealth, ContainerStat, ContainerState } from "@/types/Container";
 import type { UseThrottledRefHistoryReturn } from "@vueuse/core";
+import { useExponentialMovingAverage } from "@/utils";
 import { Ref } from "vue";
 
 type Stat = Omit<ContainerStat, "id">;
 
+const SWARM_ID_REGEX = /(\.[a-z0-9]{25})+$/i;
+
 export class Container {
-  public stat: Ref<Stat>;
+  private _stat: Ref<Stat>;
   private readonly throttledStatHistory: UseThrottledRefHistoryReturn<Stat, Stat>;
+  public readonly swarmId: string | null = null;
+  public readonly isSwarm: boolean = false;
+  private readonly movingAverageStat: Ref<Stat>;
 
   constructor(
     public readonly id: string,
-    public readonly created: number,
+    public readonly created: Date,
     public readonly image: string,
     public readonly name: string,
     public readonly command: string,
+    public readonly host: string,
     public status: string,
-    public state: ContainerState
+    public state: ContainerState,
+    public health?: ContainerHealth,
   ) {
-    this.stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
-    this.throttledStatHistory = useThrottledRefHistory(this.stat, { capacity: 300, deep: true, throttle: 1000 });
+    this._stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
+    this.throttledStatHistory = useThrottledRefHistory(this._stat, { capacity: 300, deep: true, throttle: 1000 });
+    this.movingAverageStat = useExponentialMovingAverage(this._stat, 0.2);
+
+    const match = name.match(SWARM_ID_REGEX);
+    if (match) {
+      this.swarmId = match[0];
+      this.name = name.replace(`${this.swarmId}`, "");
+      this.isSwarm = true;
+    }
   }
 
-  public getStatHistory() {
+  get statHistory() {
     return unref(this.throttledStatHistory.history);
   }
 
-  public getLastStat() {
-    return unref(this.throttledStatHistory.last);
+  get movingAverage() {
+    return unref(this.movingAverageStat);
+  }
+
+  get stat() {
+    return unref(this._stat);
+  }
+
+  get storageKey() {
+    return `${stripVersion(this.image)}:${this.command}`;
+  }
+
+  public updateStat(stat: Stat) {
+    if (isRef(this._stat)) {
+      this._stat.value = stat;
+    } else {
+      // @ts-ignore
+      this._stat = stat;
+    }
   }
 }

assets/models/LogEntry.ts

@@ -11,16 +11,26 @@ export interface HasComponent {
 
 export type JSONValue = string | number | boolean | JSONObject | Array<JSONValue>;
 export type JSONObject = { [x: string]: JSONValue };
-
+export type Position = "start" | "end" | "middle" | undefined;
+export type Std = "stdout" | "stderr";
 export interface LogEvent {
   readonly m: string | JSONObject;
   readonly ts: number;
   readonly id: number;
+  readonly l: string;
+  readonly p: Position;
+  readonly s: "stdout" | "stderr" | "unknown";
 }
 
 export abstract class LogEntry<T extends string | JSONObject> implements HasComponent {
   protected readonly _message: T;
-  constructor(message: T, public readonly id: number, public readonly date: Date) {
+  constructor(
+    message: T,
+    public readonly id: number,
+    public readonly date: Date,
+    public readonly std: Std,
+    public readonly level?: string,
+  ) {
     this._message = message;
   }
 
@@ -32,6 +42,16 @@ export abstract class LogEntry<T extends string | JSONObject> implements HasComp
 }
 
 export class SimpleLogEntry extends LogEntry<string> {
+  constructor(
+    message: string,
+    id: number,
+    date: Date,
+    public readonly level: string,
+    public readonly position: Position,
+    public readonly std: Std,
+  ) {
+    super(message, id, date, std, level);
+  }
   getComponent(): Component {
     return SimpleLogItem;
   }
@@ -40,8 +60,15 @@ export class SimpleLogEntry extends LogEntry<string> {
 export class ComplexLogEntry extends LogEntry<JSONObject> {
   private readonly filteredMessage: ComputedRef<JSONObject>;
 
-  constructor(message: JSONObject, id: number, date: Date, visibleKeys?: Ref<string[][]>) {
-    super(message, id, date);
+  constructor(
+    message: JSONObject,
+    id: number,
+    date: Date,
+    public readonly level: string,
+    public readonly std: Std,
+    visibleKeys?: Ref<string[][]>,
+  ) {
+    super(message, id, date, std, level);
     if (visibleKeys) {
       this.filteredMessage = computed(() => {
         if (!visibleKeys.value.length) {
@@ -67,13 +94,17 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
   }
 
   static fromLogEvent(event: ComplexLogEntry, visibleKeys: Ref<string[][]>): ComplexLogEntry {
-    return new ComplexLogEntry(event._message, event.id, event.date, visibleKeys);
+    return new ComplexLogEntry(event._message, event.id, event.date, event.level, event.std, visibleKeys);
   }
 }
 
 export class DockerEventLogEntry extends LogEntry<string> {
-  constructor(message: string, date: Date, public readonly event: string) {
-    super(message, date.getTime(), date);
+  constructor(
+    message: string,
+    date: Date,
+    public readonly event: string,
+  ) {
+    super(message, date.getTime(), date, "stderr", "info");
   }
   getComponent(): Component {
     return DockerEventLogItem;
@@ -88,9 +119,9 @@ export class SkippedLogsEntry extends LogEntry<string> {
     date: Date,
     totalSkipped: number,
     public readonly firstSkipped: LogEntry<string | JSONObject>,
-    lastSkipped: LogEntry<string | JSONObject>
+    lastSkipped: LogEntry<string | JSONObject>,
   ) {
-    super("", date.getTime(), date);
+    super("", date.getTime(), date, "stderr", "info");
     this._totalSkipped = totalSkipped;
     this.lastSkipped = lastSkipped;
   }
@@ -110,12 +141,29 @@ export class SkippedLogsEntry extends LogEntry<string> {
   public get totalSkipped(): number {
     return this._totalSkipped;
   }
+
+  public get lastSkippedItem(): LogEntry<string | JSONObject> {
+    return this.lastSkipped;
+  }
 }
 
 export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
   if (typeof event.m === "string") {
-    return new SimpleLogEntry(event.m, event.id, new Date(event.ts));
+    return new SimpleLogEntry(
+      event.m,
+      event.id,
+      new Date(event.ts),
+      event.l,
+      event.p,
+      event.s === "unknown" ? "stderr" : event.s ?? "stderr",
+    );
   } else {
-    return new ComplexLogEntry(event.m, event.id, new Date(event.ts));
+    return new ComplexLogEntry(
+      event.m,
+      event.id,
+      new Date(event.ts),
+      event.l,
+      event.s === "unknown" ? "stderr" : event.s ?? "stderr",
+    );
   }
 }

assets/modules/i18n.ts

@@ -7,8 +7,8 @@ export const install = (app: App) => {
       ([key, value]) => {
         const yaml = key.endsWith(".yaml");
         return [key.slice(14, yaml ? -5 : -4), value.default];
-      }
-    )
+      },
+    ),
   );
   const i18n = createI18n({
     legacy: false,

assets/modules/oruga.ts

@@ -1,16 +1,5 @@
 import { type App } from "vue";
-import {
-  Autocomplete,
-  Button,
-  Dropdown,
-  Switch,
-  Radio,
-  Skeleton,
-  Field,
-  Tooltip,
-  Modal,
-  Config,
-} from "@oruga-ui/oruga-next";
+import { Autocomplete, Button, Dropdown, Switch, Skeleton, Field, Table, Modal, Config } from "@oruga-ui/oruga-next";
 import { bulmaConfig } from "@oruga-ui/theme-bulma";
 
 export const install = (app: App) => {
@@ -19,10 +8,9 @@ export const install = (app: App) => {
     .use(Button)
     .use(Dropdown)
     .use(Switch)
-    .use(Tooltip)
     .use(Modal)
-    .use(Radio)
     .use(Field)
     .use(Skeleton)
+    .use(Table)
     .use(Config, bulmaConfig);
 };

assets/modules/pinia.ts

@@ -1,8 +1,7 @@
 import { type App } from "vue";
 import { createPinia } from "pinia";
 
-
-export const install = (app:App) => {
+export const install = (app: App) => {
   const pinia = createPinia();
   app.use(pinia);
 };

assets/pages/container/[id].vue

@@ -1,14 +1,20 @@
 <template>
   <search></search>
-  <log-container :id="id" show-title :scrollable="activeContainers.length > 0"> </log-container>
+  <log-container :id="id" show-title :scrollable="activeContainers.length > 0" v-if="currentContainer"></log-container>
+  <div v-else-if="ready" class="notification is-warning is-light m-6">
+    <h1 class="title">
+      {{ $t("error.container-not-found") }}
+    </h1>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import search from "@/components/Search.vue";
 const store = useContainerStore();
 const { id } = defineProps<{ id: string }>();
 
 const currentContainer = store.currentContainer($$(id));
-const { activeContainers } = storeToRefs(store);
+const { activeContainers, ready } = storeToRefs(store);
 
 setTitle("loading");
 

assets/pages/index.vue

@@ -1,163 +1,100 @@
 <template>
-  <div>
-    <section class="level section pb-0-is-mobile">
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title">{{ containers.length }}</p>
-          <p class="heading">{{ $t("label.total-containers") }}</p>
-        </div>
-      </div>
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title">{{ runningContainers.length }}</p>
-          <p class="heading">{{ $t("label.running") }}</p>
-        </div>
-      </div>
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title" data-ci-skip>{{ totalCpu }}%</p>
-          <p class="heading">{{ $t("label.total-cpu-usage") }}</p>
-        </div>
-      </div>
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title" data-ci-skip>{{ formatBytes(totalMem) }}</p>
-          <p class="heading">{{ $t("label.total-mem-usage") }}</p>
-        </div>
-      </div>
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title">{{ version }}</p>
-          <p class="heading">{{ $t("label.dozzle-version") }}</p>
-        </div>
-      </div>
-    </section>
-
-    <section class="columns is-centered section is-marginless pt-0-is-mobile">
-      <div class="column is-12-mobile is-6-tablet is-5-desktop is-4-fullhd">
-        <div class="panel">
-          <p class="panel-heading">{{ $t("label.containers") }}</p>
-          <div class="panel-block">
-            <p class="control has-icons-left">
-              <input
-                class="input"
-                type="text"
-                :placeholder="$t('placeholder.search-containers')"
-                v-model="query"
-                @keyup.esc="query = ''"
-                @keyup.enter="onEnter()"
-              />
-              <span class="icon is-left">
-                <search-icon />
-              </span>
-            </p>
+  <div class="section tile is-ancestor">
+    <div class="tile is-parent">
+      <div class="tile is-child box">
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="title">{{ runningContainers.length }} / {{ containers.length }}</p>
+            <p class="heading">{{ $t("label.running") }} / {{ $t("label.total-containers") }}</p>
           </div>
-          <p class="panel-tabs" v-if="query === ''">
-            <a :class="{ 'is-active': sort === 'running' }" @click="sort = 'running'">{{ $t("label.running") }}</a>
-            <a :class="{ 'is-active': sort === 'all' }" @click="sort = 'all'">{{ $t("label.all") }}</a>
-          </p>
-          <router-link
-            :to="{ name: 'container-id', params: { id: item.id } }"
-            v-for="item in data.slice(0, 10)"
-            :key="item.id"
-            class="panel-block"
-          >
-            <span class="name">{{ item.name }}</span>
-
-            <div class="subtitle is-7 status">
-              <past-time :date="new Date(item.created * 1000)"></past-time>
-            </div>
-          </router-link>
         </div>
       </div>
-    </section>
+    </div>
+    <div class="tile is-parent">
+      <div class="tile is-child box">
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="title">{{ totalCpu }}%</p>
+            <p class="heading">{{ $t("label.total-cpu-usage") }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <div class="tile is-child box">
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="title">{{ formatBytes(totalMem) }}</p>
+            <p class="heading">{{ $t("label.total-mem-usage") }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <div class="tile is-child box">
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="title">{{ version }}</p>
+            <p class="heading">{{ $t("label.dozzle-version") }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
+
+  <section class="section table-container">
+    <div class="box">
+      <container-table :containers="runningContainers"></container-table>
+    </div>
+  </section>
 </template>
 
 <script lang="ts" setup>
-import SearchIcon from "~icons/mdi-light/magnify";
-import { useFuse } from "@vueuse/integrations/useFuse";
+import { Container } from "@/models/Container";
 
 const { version } = config;
 const containerStore = useContainerStore();
-const { containers } = storeToRefs(containerStore);
-const router = useRouter();
+const { containers } = storeToRefs(containerStore) as { containers: unknown } as { containers: Ref<Container[]> };
 
-const sort = $ref("running");
-const query = ref("");
-
-const mostRecentContainers = $computed(() => [...containers.value].sort((a, b) => b.created - a.created));
+const mostRecentContainers = $computed(() => [...containers.value].sort((a, b) => +b.created - +a.created));
 const runningContainers = $computed(() => mostRecentContainers.filter((c) => c.state === "running"));
 
-const list = computed(() => {
-  return containers.value.map(({ id, created, name, state }) => {
-    return {
-      id,
-      created,
-      name,
-      state,
-    };
-  });
-});
-
-const { results } = useFuse(query, list, {
-  fuseOptions: { keys: ["name"] },
-  matchAllWhenSearchEmpty: false,
-});
-
-const data = computed(() => {
-  if (results.value.length) {
-    return results.value.map(({ item }) => item);
-  }
-  switch (sort) {
-    case "all":
-      return mostRecentContainers;
-    case "running":
-      return runningContainers;
-    default:
-      throw `Invalid sort order: ${sort}`;
-  }
-});
-
 let totalCpu = $ref(0);
 useIntervalFn(
   () => {
-    totalCpu = runningContainers.reduce((acc, c) => acc + (c.stat?.cpu ?? 0), 0);
+    totalCpu = runningContainers.reduce((acc, c) => acc + c.stat.cpu, 0);
   },
   1000,
-  { immediate: true }
+  { immediate: true },
 );
 
 let totalMem = $ref(0);
 useIntervalFn(
   () => {
-    totalMem = runningContainers.reduce((acc, c) => acc + (c.stat?.memoryUsage ?? 0), 0);
+    totalMem = runningContainers.reduce((acc, c) => acc + c.stat.memoryUsage, 0);
   },
   1000,
-  { immediate: true }
+  { immediate: true },
 );
-
-function onEnter() {
-  if (data.value.length > 0) {
-    const item = data.value[0];
-    router.push({ name: "container-id", params: { id: item.id } });
-  }
-}
 </script>
 <style lang="scss" scoped>
 .panel {
   border: 1px solid var(--border-color);
+
   .panel-block,
   .panel-tabs {
     border-color: var(--border-color);
+
     .is-active {
       border-color: var(--border-hover-color);
     }
+
     .name {
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
     }
+
     .status {
       margin-left: auto;
       white-space: nowrap;
@@ -178,4 +115,21 @@ function onEnter() {
 .icon {
   padding: 10px 3px;
 }
+
+.bar-chart {
+  height: 1.5em;
+  .bar-text {
+    font-size: 0.9em;
+    padding: 0 0.5em;
+  }
+}
+
+:deep(tr td) {
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+.section + .section {
+  padding-top: 0;
+}
 </style>

assets/pages/login.vue

@@ -57,7 +57,7 @@ setTitle(t("title.login"));
 let error = $ref(false);
 let username = $ref("");
 let password = $ref("");
-let form: HTMLFormElement = $ref();
+let form: HTMLFormElement | undefined = $ref();
 
 async function onLogin() {
   const response = await fetch(`${config.base}/api/validateCredentials`, {

assets/pages/settings.vue

@@ -25,6 +25,9 @@
       <div class="item">
         <o-switch v-model="showTimestamp"> {{ $t("settings.show-timesamps") }} </o-switch>
       </div>
+      <div class="item">
+        <o-switch v-model="showStd"> {{ $t("settings.show-std") }} </o-switch>
+      </div>
 
       <div class="item">
         <o-switch v-model="softWrap"> {{ $t("settings.soft-wrap") }}</o-switch>
@@ -39,7 +42,7 @@
                   <o-button variant="primary" type="button">
                     <span class="is-capitalized">{{ hourStyle }}</span>
                     <span class="icon">
-                      <carbon-caret-down />
+                      <carbon:caret-down />
                     </span>
                   </o-button>
                 </template>
@@ -64,7 +67,7 @@
                   <o-button variant="primary" type="button">
                     <span class="is-capitalized">{{ size }}</span>
                     <span class="icon">
-                      <carbon-caret-down />
+                      <carbon:caret-down />
                     </span>
                   </o-button>
                 </template>
@@ -92,7 +95,7 @@
                   <o-button variant="primary" type="button">
                     <span class="is-capitalized">{{ lightTheme }}</span>
                     <span class="icon">
-                      <carbon-caret-down />
+                      <carbon:caret-down />
                     </span>
                   </o-button>
                 </template>
@@ -119,7 +122,7 @@
 
       <div class="item">
         <o-switch v-model="search">
-          <span v-html="$t('settings.search')"></span>
+          <span>{{ $t("settings.search") }} <key-shortcut char="f"></key-shortcut></span>
         </o-switch>
       </div>
 
@@ -131,12 +134,12 @@
 </template>
 
 <script lang="ts" setup>
-import gt from "semver/functions/gt";
 import {
   search,
   lightTheme,
   smallerScrollbars,
   showTimestamp,
+  showStd,
   hourStyle,
   showAllContainers,
   size,
@@ -147,7 +150,7 @@ const { t } = useI18n();
 
 setTitle(t("title.settings"));
 
-const currentVersion = $ref(config.version);
+const currentVersion = config.version;
 let nextRelease = $ref({ html_url: "", name: "" });
 let hasUpdate = $ref(false);
 
@@ -156,7 +159,8 @@ async function fetchNextRelease() {
     const response = await fetch("https://api.github.com/repos/amir20/dozzle/releases/latest");
     if (response.ok) {
       const release = await response.json();
-      hasUpdate = gt(release.tag_name, currentVersion);
+      hasUpdate =
+        release.tag_name.slice(1).localeCompare(currentVersion, undefined, { numeric: true, sensitivity: "base" }) > 0;
       nextRelease = release;
     }
   } else {
@@ -177,6 +181,7 @@ fetchNextRelease();
 
 a.next-release {
   text-decoration: underline;
+
   &:hover {
     text-decoration: none;
   }

assets/stores/config.ts

@@ -3,10 +3,11 @@ const text = document.querySelector("script#config__json")?.textContent || "{}";
 interface Config {
   version: string;
   base: string;
-  authorizationNeeded: boolean | "false" | "true";
-  secured: boolean | "false" | "true";
+  authorizationNeeded: boolean;
+  secured: boolean;
   maxLogs: number;
   hostname: string;
+  hosts: { name: string; id: string }[];
 }
 
 const pageConfig = JSON.parse(text);
@@ -16,16 +17,6 @@ const config: Config = {
   ...pageConfig,
 };
 
-if (config.version == "{{ .Version }}") {
-  config.version = "master";
-  config.base = "";
-  config.authorizationNeeded = false;
-  config.secured = false;
-  config.hostname = "localhost";
-} else {
-  config.version = config.version.replace(/^v/, "");
-  config.authorizationNeeded = config.authorizationNeeded === "true";
-  config.secured = config.secured === "true";
-}
+config.version = config.version.replace(/^v/, "");
 
-export default config as Config;
+export default config;

assets/stores/container.ts

@@ -1,17 +1,22 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { Ref, UnwrapNestedRefs } from "vue";
-import type { ContainerJson, ContainerStat } from "@/types/Container";
+import type { ContainerHealth, ContainerJson, ContainerStat } from "@/types/Container";
 import { Container } from "@/models/Container";
 
 export const useContainerStore = defineStore("container", () => {
   const containers: Ref<Container[]> = ref([]);
   const activeContainerIds: Ref<string[]> = ref([]);
+  let es: EventSource | null = null;
+  const ready = ref(false);
 
   const allContainersById = computed(() =>
-    containers.value.reduce((acc, container) => {
-      acc[container.id] = container;
-      return acc;
-    }, {} as Record<string, Container>)
+    containers.value.reduce(
+      (acc, container) => {
+        acc[container.id] = container;
+        return acc;
+      },
+      {} as Record<string, Container>,
+    ),
   );
 
   const visibleContainers = computed(() => {
@@ -21,36 +26,70 @@ export const useContainerStore = defineStore("container", () => {
 
   const activeContainers = computed(() => activeContainerIds.value.map((id) => allContainersById.value[id]));
 
-  const es = new EventSource(`${config.base}/api/events/stream`);
-  es.addEventListener("containers-changed", (e: Event) =>
-    setContainers(JSON.parse((e as MessageEvent).data) as ContainerJson[])
-  );
-  es.addEventListener("container-stat", (e) => {
-    const stat = JSON.parse((e as MessageEvent).data) as ContainerStat;
-    const container = allContainersById.value[stat.id] as unknown as UnwrapNestedRefs<Container>;
-    if (container) {
-      const { id, ...rest } = stat;
-      container.stat = rest;
-    }
-  });
-  es.addEventListener("container-die", (e) => {
-    const event = JSON.parse((e as MessageEvent).data) as { actorId: string };
-    const container = allContainersById.value[event.actorId];
-    if (container) {
-      container.state = "dead";
-    }
-  });
+  function connect() {
+    es?.close();
+    ready.value = false;
+    es = new EventSource(`${config.base}/api/events/stream`);
 
-  const setContainers = (newContainers: ContainerJson[]) => {
-    containers.value = newContainers.map((c) => {
-      const existing = allContainersById.value[c.id];
-      if (existing) {
-        existing.status = c.status;
-        existing.state = c.state;
-        return existing;
+    es.addEventListener("containers-changed", (e: Event) =>
+      updateContainers(JSON.parse((e as MessageEvent).data) as ContainerJson[]),
+    );
+    es.addEventListener("container-stat", (e) => {
+      const stat = JSON.parse((e as MessageEvent).data) as ContainerStat;
+      const container = allContainersById.value[stat.id] as unknown as UnwrapNestedRefs<Container>;
+      if (container) {
+        const { id, ...rest } = stat;
+        container.updateStat(rest);
       }
-      return new Container(c.id, c.created, c.image, c.name, c.command, c.status, c.state);
     });
+    es.addEventListener("container-die", (e) => {
+      const event = JSON.parse((e as MessageEvent).data) as { actorId: string };
+      const container = allContainersById.value[event.actorId];
+      if (container) {
+        container.state = "dead";
+      }
+    });
+
+    es.addEventListener("container-health", (e) => {
+      const event = JSON.parse((e as MessageEvent).data) as { actorId: string; health: ContainerHealth };
+      const container = allContainersById.value[event.actorId];
+      if (container) {
+        container.health = event.health;
+      }
+    });
+
+    watchOnce(containers, () => (ready.value = true));
+  }
+
+  connect();
+
+  const updateContainers = (containersPayload: ContainerJson[]) => {
+    const existingContainers = containersPayload.filter((c) => allContainersById.value[c.id]);
+    const newContainers = containersPayload.filter((c) => !allContainersById.value[c.id]);
+
+    existingContainers.forEach((c) => {
+      const existing = allContainersById.value[c.id];
+      existing.status = c.status;
+      existing.state = c.state;
+      existing.health = c.health;
+    });
+
+    containers.value = [
+      ...containers.value,
+      ...newContainers.map((c) => {
+        return new Container(
+          c.id,
+          new Date(c.created * 1000),
+          c.image,
+          c.name,
+          c.command,
+          c.host,
+          c.status,
+          c.state,
+          c.health,
+        );
+      }),
+    ];
   };
 
   const currentContainer = (id: Ref<string>) => computed(() => allContainersById.value[id.value]);
@@ -58,9 +97,6 @@ export const useContainerStore = defineStore("container", () => {
   const removeActiveContainer = ({ id }: Container) =>
     activeContainerIds.value.splice(activeContainerIds.value.indexOf(id), 1);
 
-  const ready = ref(false);
-  watchOnce(containers, () => (ready.value = true));
-
   return {
     containers,
     activeContainerIds,

assets/styles.scss

@@ -24,17 +24,17 @@ $panel-heading-color: var(--panel-heading-color);
 
 $link: $turquoise;
 $link-active: $grey-dark;
+$link-hover: $yellow;
 
 $dark-toolbar-color: rgba($black-bis, 0.7);
 $light-toolbar-color: rgba($grey-darker, 0.7);
 
-@import "bulma/bulma.sass";
+@import "bulma/bulma";
 @import "@oruga-ui/theme-bulma/dist/scss/components/utils/all.scss";
 @import "@oruga-ui/theme-bulma/dist/scss/components/autocomplete.scss";
 @import "@oruga-ui/theme-bulma/dist/scss/components/button.scss";
 @import "@oruga-ui/theme-bulma/dist/scss/components/modal.scss";
 @import "@oruga-ui/theme-bulma/dist/scss/components/switch.scss";
-@import "@oruga-ui/theme-bulma/dist/scss/components/tooltip.scss";
 @import "@oruga-ui/theme-bulma/dist/scss/components/dropdown.scss";
 @import "@oruga-ui/theme-bulma/dist/scss/components/skeleton.scss";
 @import "splitpanes/dist/splitpanes.css";
@@ -117,6 +117,34 @@ $light-toolbar-color: rgba($grey-darker, 0.7);
   }
 }
 
+:root {
+  --green-color: #00b5ad;
+  --red-color: #f44336;
+  --purple-color: #9c27b0;
+  --orange-color: #ff9800;
+  --blue-color: #2196f3;
+}
+
+.is-red {
+  color: var(--red-color);
+}
+
+.is-green {
+  color: var(--green-color);
+}
+
+.is-purple {
+  color: var(--purple-color);
+}
+
+.is-orange {
+  color: var(--orange-color);
+}
+
+.is-blue {
+  color: var(--blue-color);
+}
+
 html {
   overflow-x: unset;
   overflow-y: unset;
@@ -177,6 +205,9 @@ html.has-custom-scrollbars {
 
 .modal {
   z-index: 1000;
+  .modal-background {
+    backdrop-filter: blur(10px);
+  }
 }
 
 .button .button-wrapper > span {
@@ -188,7 +219,9 @@ html.has-custom-scrollbars {
 }
 
 .has-boxshadow {
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  box-shadow:
+    0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1);
 }
 
 mark {
@@ -211,3 +244,7 @@ mark {
   color: var(--text-strong-color);
   background: var(--scheme-main-ter);
 }
+
+a {
+  transition: color 0.2s ease-in-out;
+}

assets/types/Container.d.ts

@@ -13,6 +13,9 @@ export type ContainerJson = {
   readonly command: string;
   readonly status: string;
   readonly state: ContainerState;
+  readonly host: string;
+  readonly health?: ContainerHealth;
 };
 
 export type ContainerState = "created" | "running" | "exited" | "dead" | "paused" | "restarting";
+export type ContainerHealth = "healthy" | "unhealthy" | "starting";

assets/utils/index.ts

@@ -1,7 +1,3 @@
-import { Container } from "@/models/Container";
-import { useStorage } from "@vueuse/core";
-import { computed, ComputedRef } from "vue";
-
 export function formatBytes(bytes: number, decimals = 2) {
   if (bytes === 0) return "0 Bytes";
   const k = 1024;
@@ -37,11 +33,21 @@ export function arrayEquals(a: string[], b: string[]): boolean {
   return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]);
 }
 
-export function persistentVisibleKeys(container: ComputedRef<Container>) {
-  return computed(() => useStorage(stripVersion(container.value.image) + ":" + container.value.command, []));
-}
-
 export function stripVersion(label: string) {
   const [name, _] = label.split(":");
   return name;
 }
+
+export function useExponentialMovingAverage<T extends Record<string, number>>(source: Ref<T>, alpha: number = 0.2) {
+  const ema = ref<T>(source.value) as Ref<T>;
+
+  watch(source, (value) => {
+    const newValue = {} as Record<string, number>;
+    for (const key in value) {
+      newValue[key] = alpha * value[key] + (1 - alpha) * ema.value[key];
+    }
+    ema.value = newValue as T;
+  });
+
+  return ema;
+}

docker-compose.yml

@@ -0,0 +1,76 @@
+version: "3.4"
+services:
+  custom_base:
+    container_name: custom_base
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - DOZZLE_FILTER=name=custom_base
+      - DOZZLE_BASE=/foobarbase
+      - DOZZLE_NO_ANALYTICS=1
+    ports:
+      - 8080:8080
+    build:
+      context: .
+  auth:
+    container_name: auth
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - DOZZLE_FILTER=name=auth
+      - DOZZLE_USERNAME=foo
+      - DOZZLE_PASSWORD=bar
+      - DOZZLE_NO_ANALYTICS=1
+    ports:
+      - 9090:8080
+    build:
+      context: .
+  dozzle:
+    container_name: dozzle
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - DOZZLE_FILTER=name=dozzle
+      - DOZZLE_NO_ANALYTICS=1
+    ports:
+      - 7070:8080
+    build:
+      context: .
+  remote:
+    container_name: remote
+    environment:
+      - DOZZLE_REMOTE_HOST=tcp://proxy:2375
+      - DOZZLE_FILTER=name=dozzle
+      - DOZZLE_NO_ANALYTICS=1
+    ports:
+      - 5050:8080
+    build:
+      context: .
+    depends_on:
+      - proxy
+
+  proxy:
+    container_name: proxy
+    image: tecnativa/docker-socket-proxy
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - CONTAINERS=1
+    ports:
+      - 2375:2375
+
+  playwright:
+    container_name: playwright
+    image: mcr.microsoft.com/playwright:v1.37.1-jammy
+    working_dir: /app
+    volumes:
+      - .:/app
+    command: npx --yes playwright test
+    environment:
+      - PWTEST_SKIP_TEST_OUTPUT=1
+      - CI=1
+    depends_on:
+      - dozzle
+      - custom_base
+      - auth
+      - remote

docker/client.go

@@ -5,6 +5,8 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
+	"path/filepath"
+	"regexp"
 	"sort"
 	"strconv"
 	"strings"
@@ -14,15 +16,33 @@ import (
 	"github.com/docker/docker/api/types/events"
 	"github.com/docker/docker/api/types/filters"
 	"github.com/docker/docker/client"
+
 	log "github.com/sirupsen/logrus"
 )
 
-type dockerClient struct {
-	cli     dockerProxy
-	filters filters.Args
+type StdType int
+
+const (
+	UNKNOWN StdType = 1 << iota
+	STDOUT
+	STDERR
+)
+const STDALL = STDOUT | STDERR
+
+func (s StdType) String() string {
+	switch s {
+	case STDOUT:
+		return "stdout"
+	case STDERR:
+		return "stderr"
+	case STDALL:
+		return "all"
+	default:
+		return "unknown"
+	}
 }
 
-type dockerProxy interface {
+type DockerCLI interface {
 	ContainerList(context.Context, types.ContainerListOptions) ([]types.Container, error)
 	ContainerLogs(context.Context, string, types.ContainerLogsOptions) (io.ReadCloser, error)
 	Events(context.Context, types.EventsOptions) (<-chan events.Message, <-chan error)
@@ -31,19 +51,18 @@ type dockerProxy interface {
 	Ping(ctx context.Context) (types.Ping, error)
 }
 
-// Client is a proxy around the docker client
-type Client interface {
-	ListContainers() ([]Container, error)
-	FindContainer(string) (Container, error)
-	ContainerLogs(context.Context, string, string) (io.ReadCloser, error)
-	Events(context.Context) (<-chan ContainerEvent, <-chan error)
-	ContainerLogsBetweenDates(context.Context, string, time.Time, time.Time) (io.ReadCloser, error)
-	ContainerStats(context.Context, string, chan<- ContainerStat) error
-	Ping(context.Context) (types.Ping, error)
+type Client struct {
+	cli     DockerCLI
+	filters filters.Args
+	host    *Host
+}
+
+func NewClient(cli DockerCLI, filters filters.Args, host *Host) *Client {
+	return &Client{cli, filters, host}
 }
 
 // NewClientWithFilters creates a new instance of Client with docker filters
-func NewClientWithFilters(f map[string][]string) Client {
+func NewClientWithFilters(f map[string][]string) (*Client, error) {
 	filterArgs := filters.NewArgs()
 	for key, values := range f {
 		for _, value := range values {
@@ -56,13 +75,49 @@ func NewClientWithFilters(f map[string][]string) Client {
 	cli, err := client.NewClientWithOpts(client.FromEnv, client.WithAPIVersionNegotiation())
 
 	if err != nil {
-		log.Fatal(err)
+		return nil, err
 	}
 
-	return &dockerClient{cli, filterArgs}
+	return NewClient(cli, filterArgs, &Host{Name: "localhost", ID: "localhost"}), nil
 }
 
-func (d *dockerClient) FindContainer(id string) (Container, error) {
+func NewClientWithTlsAndFilter(f map[string][]string, host Host) (*Client, error) {
+	filterArgs := filters.NewArgs()
+	for key, values := range f {
+		for _, value := range values {
+			filterArgs.Add(key, value)
+		}
+	}
+
+	log.Debugf("filterArgs = %v", filterArgs)
+
+	if host.URL.Scheme != "tcp" {
+		log.Fatal("Only tcp scheme is supported")
+	}
+
+	opts := []client.Opt{
+		client.WithHost(host.URL.String()),
+	}
+
+	if host.ValidCerts {
+		log.Debugf("Using TLS client config with certs at: %s", filepath.Dir(host.CertPath))
+		opts = append(opts, client.WithTLSClientConfig(host.CACertPath, host.CertPath, host.KeyPath))
+	} else {
+		log.Debugf("No valid certs found, using plain TCP")
+	}
+
+	opts = append(opts, client.WithAPIVersionNegotiation())
+
+	cli, err := client.NewClientWithOpts(opts...)
+
+	if err != nil {
+		return nil, err
+	}
+
+	return NewClient(cli, filterArgs, &host), nil
+}
+
+func (d *Client) FindContainer(id string) (Container, error) {
 	var container Container
 	containers, err := d.ListContainers()
 	if err != nil {
@@ -81,10 +136,16 @@ func (d *dockerClient) FindContainer(id string) (Container, error) {
 		return container, fmt.Errorf("unable to find container with id: %s", id)
 	}
 
+	if json, err := d.cli.ContainerInspect(context.Background(), container.ID); err == nil {
+		container.Tty = json.Config.Tty
+	} else {
+		return container, err
+	}
+
 	return container, nil
 }
 
-func (d *dockerClient) ListContainers() ([]Container, error) {
+func (d *Client) ListContainers() ([]Container, error) {
 	containerListOptions := types.ContainerListOptions{
 		Filters: d.filters,
 		All:     true,
@@ -106,6 +167,8 @@ func (d *dockerClient) ListContainers() ([]Container, error) {
 			Created: c.Created,
 			State:   c.State,
 			Status:  c.Status,
+			Host:    d.host.ID,
+			Health:  findBetweenParentheses(c.Status),
 		}
 		containers = append(containers, container)
 	}
@@ -117,7 +180,7 @@ func (d *dockerClient) ListContainers() ([]Container, error) {
 	return containers, nil
 }
 
-func (d *dockerClient) ContainerStats(ctx context.Context, id string, stats chan<- ContainerStat) error {
+func (d *Client) ContainerStats(ctx context.Context, id string, stats chan<- ContainerStat) error {
 	response, err := d.cli.ContainerStats(ctx, id, true)
 
 	if err != nil {
@@ -169,8 +232,8 @@ func (d *dockerClient) ContainerStats(ctx context.Context, id string, stats chan
 	return nil
 }
 
-func (d *dockerClient) ContainerLogs(ctx context.Context, id string, since string) (io.ReadCloser, error) {
-	log.WithField("id", id).WithField("since", since).Debug("streaming logs for container")
+func (d *Client) ContainerLogs(ctx context.Context, id string, since string, stdType StdType) (io.ReadCloser, error) {
+	log.WithField("id", id).WithField("since", since).WithField("stdType", stdType).Debug("streaming logs for container")
 
 	if since != "" {
 		if millis, err := strconv.ParseInt(since, 10, 64); err == nil {
@@ -181,34 +244,26 @@ func (d *dockerClient) ContainerLogs(ctx context.Context, id string, since strin
 	}
 
 	options := types.ContainerLogsOptions{
-		ShowStdout: true,
-		ShowStderr: true,
+		ShowStdout: stdType&STDOUT != 0,
+		ShowStderr: stdType&STDERR != 0,
 		Follow:     true,
 		Tail:       "300",
 		Timestamps: true,
 		Since:      since,
 	}
 
-	log.Debugf("streaming logs from Docker with option: %+v", options)
 	reader, err := d.cli.ContainerLogs(ctx, id, options)
 	if err != nil {
 		return nil, err
 	}
 
-	containerJSON, err := d.cli.ContainerInspect(ctx, id)
-	if err != nil {
-		return nil, err
-	}
-
-	return newLogReader(reader, containerJSON.Config.Tty), nil
+	return reader, nil
 }
 
-func (d *dockerClient) Events(ctx context.Context) (<-chan ContainerEvent, <-chan error) {
+func (d *Client) Events(ctx context.Context, messages chan<- ContainerEvent) <-chan error {
 	dockerMessages, errors := d.cli.Events(ctx, types.EventsOptions{})
-	messages := make(chan ContainerEvent)
 
 	go func() {
-		defer close(messages)
 
 		for {
 			select {
@@ -223,19 +278,20 @@ func (d *dockerClient) Events(ctx context.Context) (<-chan ContainerEvent, <-cha
 					messages <- ContainerEvent{
 						ActorID: message.Actor.ID[:12],
 						Name:    message.Action,
+						Host:    d.host.ID,
 					}
 				}
 			}
 		}
 	}()
 
-	return messages, errors
+	return errors
 }
 
-func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string, from time.Time, to time.Time) (io.ReadCloser, error) {
+func (d *Client) ContainerLogsBetweenDates(ctx context.Context, id string, from time.Time, to time.Time, stdType StdType) (io.ReadCloser, error) {
 	options := types.ContainerLogsOptions{
-		ShowStdout: true,
-		ShowStderr: true,
+		ShowStdout: stdType&STDOUT != 0,
+		ShowStderr: stdType&STDERR != 0,
 		Timestamps: true,
 		Since:      from.Format(time.RFC3339),
 		Until:      to.Format(time.RFC3339),
@@ -244,19 +300,26 @@ func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string,
 	log.Debugf("fetching logs from Docker with option: %+v", options)
 
 	reader, err := d.cli.ContainerLogs(ctx, id, options)
-
 	if err != nil {
 		return nil, err
 	}
 
-	containerJSON, err := d.cli.ContainerInspect(ctx, id)
-	if err != nil {
-		return nil, err
-	}
-
-	return newLogReader(reader, containerJSON.Config.Tty), nil
+	return reader, nil
 }
 
-func (d *dockerClient) Ping(ctx context.Context) (types.Ping, error) {
+func (d *Client) Ping(ctx context.Context) (types.Ping, error) {
 	return d.cli.Ping(ctx)
 }
+
+func (d *Client) Host() *Host {
+	return d.host
+}
+
+var PARENTHESIS_RE = regexp.MustCompile(`\(([a-zA-Z]+)\)`)
+
+func findBetweenParentheses(s string) string {
+	if results := PARENTHESIS_RE.FindStringSubmatch(s); results != nil {
+		return results[1]
+	}
+	return ""
+}

docker/client_test.go

@@ -6,8 +6,7 @@ import (
 	"encoding/binary"
 	"errors"
 	"io"
-	"io/ioutil"
-	"strings"
+
 	"testing"
 
 	"github.com/docker/docker/api/types"
@@ -20,7 +19,7 @@ import (
 
 type mockedProxy struct {
 	mock.Mock
-	dockerProxy
+	DockerCLI
 }
 
 func (m *mockedProxy) ContainerList(context.Context, types.ContainerListOptions) ([]types.Container, error) {
@@ -44,12 +43,7 @@ func (m *mockedProxy) ContainerLogs(ctx context.Context, id string, options type
 
 func (m *mockedProxy) ContainerInspect(ctx context.Context, containerID string) (types.ContainerJSON, error) {
 	args := m.Called(ctx, containerID)
-	json, ok := args.Get(0).(types.ContainerJSON)
-	if !ok && args.Get(0) != nil {
-		panic("proxies return value is not of type types.ContainerJSON")
-	}
-
-	return json, args.Error(1)
+	return args.Get(0).(types.ContainerJSON), args.Error(1)
 }
 
 func (m *mockedProxy) ContainerStats(ctx context.Context, containerID string, stream bool) (types.ContainerStats, error) {
@@ -59,7 +53,7 @@ func (m *mockedProxy) ContainerStats(ctx context.Context, containerID string, st
 func Test_dockerClient_ListContainers_null(t *testing.T) {
 	proxy := new(mockedProxy)
 	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(nil, nil)
-	client := &dockerClient{proxy, filters.NewArgs()}
+	client := &Client{proxy, filters.NewArgs(), &Host{ID: "localhost"}}
 
 	list, err := client.ListContainers()
 	assert.Empty(t, list, "list should be empty")
@@ -71,7 +65,7 @@ func Test_dockerClient_ListContainers_null(t *testing.T) {
 func Test_dockerClient_ListContainers_error(t *testing.T) {
 	proxy := new(mockedProxy)
 	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(nil, errors.New("test"))
-	client := &dockerClient{proxy, filters.NewArgs()}
+	client := &Client{proxy, filters.NewArgs(), &Host{ID: "localhost"}}
 
 	list, err := client.ListContainers()
 	assert.Nil(t, list, "list should be nil")
@@ -94,7 +88,7 @@ func Test_dockerClient_ListContainers_happy(t *testing.T) {
 
 	proxy := new(mockedProxy)
 	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(containers, nil)
-	client := &dockerClient{proxy, filters.NewArgs()}
+	client := &Client{proxy, filters.NewArgs(), &Host{ID: "localhost"}}
 
 	list, err := client.ListContainers()
 	require.NoError(t, err, "error should not return an error.")
@@ -104,11 +98,13 @@ func Test_dockerClient_ListContainers_happy(t *testing.T) {
 			ID:    "1234567890_a",
 			Name:  "a_test_container",
 			Names: []string{"/a_test_container"},
+			Host:  "localhost",
 		},
 		{
 			ID:    "abcdefghijkl",
 			Name:  "z_test_container",
 			Names: []string{"/z_test_container"},
+			Host:  "localhost",
 		},
 	})
 
@@ -125,40 +121,15 @@ func Test_dockerClient_ContainerLogs_happy(t *testing.T) {
 	binary.BigEndian.PutUint32(b[4:], uint32(len(expected)))
 	b = append(b, []byte(expected)...)
 
-	reader := ioutil.NopCloser(bytes.NewReader(b))
+	reader := io.NopCloser(bytes.NewReader(b))
 	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "300", Timestamps: true, Since: "since"}
 	proxy.On("ContainerLogs", mock.Anything, id, options).Return(reader, nil)
 
-	json := types.ContainerJSON{Config: &container.Config{Tty: false}}
-	proxy.On("ContainerInspect", mock.Anything, id).Return(json, nil)
-
-	client := &dockerClient{proxy, filters.NewArgs()}
-	logReader, _ := client.ContainerLogs(context.Background(), id, "since")
-
-	actual, _ := ioutil.ReadAll(logReader)
-	assert.Equal(t, expected, string(actual), "message doesn't match expected")
-	proxy.AssertExpectations(t)
-}
-
-func Test_dockerClient_ContainerLogs_happy_with_tty(t *testing.T) {
-	id := "123456"
-
-	proxy := new(mockedProxy)
-	expected := "INFO Testing logs..."
-
-	reader := ioutil.NopCloser(strings.NewReader(expected))
-	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "300", Timestamps: true}
-	proxy.On("ContainerLogs", mock.Anything, id, options).Return(reader, nil)
-
-	json := types.ContainerJSON{Config: &container.Config{Tty: true}}
-	proxy.On("ContainerInspect", mock.Anything, id).Return(json, nil)
-
-	client := &dockerClient{proxy, filters.NewArgs()}
-	logReader, _ := client.ContainerLogs(context.Background(), id, "")
-
-	actual, _ := ioutil.ReadAll(logReader)
-	assert.Equal(t, expected, string(actual), "message doesn't match expected")
+	client := &Client{proxy, filters.NewArgs(), &Host{ID: "localhost"}}
+	logReader, _ := client.ContainerLogs(context.Background(), id, "since", STDALL)
 
+	actual, _ := io.ReadAll(logReader)
+	assert.Equal(t, string(b), string(actual), "message doesn't match expected")
 	proxy.AssertExpectations(t)
 }
 
@@ -168,9 +139,9 @@ func Test_dockerClient_ContainerLogs_error(t *testing.T) {
 
 	proxy.On("ContainerLogs", mock.Anything, id, mock.Anything).Return(nil, errors.New("test"))
 
-	client := &dockerClient{proxy, filters.NewArgs()}
+	client := &Client{proxy, filters.NewArgs(), &Host{ID: "localhost"}}
 
-	reader, err := client.ContainerLogs(context.Background(), id, "")
+	reader, err := client.ContainerLogs(context.Background(), id, "", STDALL)
 
 	assert.Nil(t, reader, "reader should be nil")
 	assert.Error(t, err, "error should have been returned")
@@ -191,7 +162,11 @@ func Test_dockerClient_FindContainer_happy(t *testing.T) {
 
 	proxy := new(mockedProxy)
 	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(containers, nil)
-	client := &dockerClient{proxy, filters.NewArgs()}
+
+	json := types.ContainerJSON{Config: &container.Config{Tty: false}}
+	proxy.On("ContainerInspect", mock.Anything, "abcdefghijkl").Return(json, nil)
+
+	client := &Client{proxy, filters.NewArgs(), &Host{ID: "localhost"}}
 
 	container, err := client.FindContainer("abcdefghijkl")
 	require.NoError(t, err, "error should not be thrown")
@@ -200,6 +175,8 @@ func Test_dockerClient_FindContainer_happy(t *testing.T) {
 		ID:    "abcdefghijkl",
 		Name:  "z_test_container",
 		Names: []string{"/z_test_container"},
+		Host:  "localhost",
+		Tty:   false,
 	})
 
 	proxy.AssertExpectations(t)
@@ -218,7 +195,7 @@ func Test_dockerClient_FindContainer_error(t *testing.T) {
 
 	proxy := new(mockedProxy)
 	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(containers, nil)
-	client := &dockerClient{proxy, filters.NewArgs()}
+	client := &Client{proxy, filters.NewArgs(), &Host{ID: "localhost"}}
 
 	_, err := client.FindContainer("not_valid")
 	require.Error(t, err, "error should be thrown")

docker/event_generator.go

@@ -0,0 +1,198 @@
+package docker
+
+import (
+	"bufio"
+	"bytes"
+	"encoding/binary"
+	"encoding/json"
+	"fmt"
+	"hash/fnv"
+	"io"
+	"strings"
+	"sync"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+)
+
+type EventGenerator struct {
+	Events chan *LogEvent
+	Errors chan error
+	reader *bufio.Reader
+	next   *LogEvent
+	buffer chan *LogEvent
+	tty    bool
+	wg     sync.WaitGroup
+}
+
+var bufPool = sync.Pool{
+	New: func() any {
+		return new(bytes.Buffer)
+	},
+}
+
+var BadHeaderErr = fmt.Errorf("dozzle/docker: unable to read header")
+
+func NewEventGenerator(reader io.Reader, tty bool) *EventGenerator {
+	generator := &EventGenerator{
+		reader: bufio.NewReader(reader),
+		buffer: make(chan *LogEvent, 100),
+		Errors: make(chan error, 1),
+		Events: make(chan *LogEvent),
+		tty:    tty,
+	}
+	generator.wg.Add(2)
+	go generator.consumeReader()
+	go generator.processBuffer()
+	return generator
+}
+
+func (g *EventGenerator) processBuffer() {
+	var current, next *LogEvent
+
+	for {
+		if g.next != nil {
+			current = g.next
+			g.next = nil
+			next = g.peek()
+		} else {
+			event, ok := <-g.buffer
+			if !ok {
+				close(g.Events)
+				break
+			}
+
+			current = event
+			next = g.peek()
+		}
+
+		checkPosition(current, next)
+
+		g.Events <- current
+	}
+	g.wg.Done()
+}
+
+func (g *EventGenerator) consumeReader() {
+	for {
+		message, streamType, readerError := readEvent(g.reader, g.tty)
+		if message != "" {
+			logEvent := createEvent(message, streamType)
+			logEvent.Level = guessLogLevel(logEvent)
+			g.buffer <- logEvent
+		}
+
+		if readerError != nil {
+			if readerError != BadHeaderErr {
+				g.Errors <- readerError
+			}
+			close(g.buffer)
+			break
+		}
+	}
+	g.wg.Done()
+}
+
+func (g *EventGenerator) peek() *LogEvent {
+	if g.next != nil {
+		return g.next
+	}
+	select {
+	case event := <-g.buffer:
+		g.next = event
+		return g.next
+	case <-time.After(50 * time.Millisecond):
+		return nil
+	}
+}
+
+func readEvent(reader *bufio.Reader, tty bool) (string, StdType, error) {
+	header := []byte{0, 0, 0, 0, 0, 0, 0, 0}
+	buffer := bufPool.Get().(*bytes.Buffer)
+	buffer.Reset()
+	defer bufPool.Put(buffer)
+	var streamType StdType = STDOUT
+	if tty {
+		message, err := reader.ReadString('\n')
+		if err != nil {
+			return message, streamType, err
+		}
+		return message, streamType, nil
+	} else {
+		n, err := reader.Read(header)
+		if err != nil {
+			return "", streamType, err
+		}
+		if n != 8 {
+			return "", streamType, BadHeaderErr
+		}
+
+		switch header[0] {
+		case 1:
+			streamType = STDOUT
+		case 2:
+			streamType = STDERR
+		default:
+			log.Warnf("unknown stream type %d", header[0])
+		}
+
+		count := binary.BigEndian.Uint32(header[4:])
+		if count == 0 {
+			return "", streamType, nil
+		}
+		_, err = io.CopyN(buffer, reader, int64(count))
+		if err != nil {
+			return "", streamType, err
+		}
+		return buffer.String(), streamType, nil
+	}
+}
+
+func createEvent(message string, streamType StdType) *LogEvent {
+	h := fnv.New32a()
+	h.Write([]byte(message))
+	logEvent := &LogEvent{Id: h.Sum32(), Message: message, Stream: streamType.String()}
+	if index := strings.IndexAny(message, " "); index != -1 {
+		logId := message[:index]
+		if timestamp, err := time.Parse(time.RFC3339Nano, logId); err == nil {
+			logEvent.Timestamp = timestamp.UnixMilli()
+			message = strings.TrimSuffix(message[index+1:], "\n")
+			logEvent.Message = message
+			if json.Valid([]byte(message)) {
+				var data map[string]interface{}
+				if err := json.Unmarshal([]byte(message), &data); err != nil {
+					log.Warnf("unable to parse json logs - error was \"%v\" while trying unmarshal \"%v\"", err.Error(), message)
+				} else {
+					logEvent.Message = data
+				}
+			}
+		}
+	}
+	return logEvent
+}
+
+func checkPosition(currentEvent *LogEvent, nextEvent *LogEvent) {
+	currentLevel := guessLogLevel(currentEvent)
+	if nextEvent != nil {
+		if currentEvent.IsCloseToTime(nextEvent) && currentLevel != "" && !nextEvent.HasLevel() {
+			currentEvent.Position = START
+			nextEvent.Position = MIDDLE
+		}
+
+		// If next item is not close to current item or has level, set current item position to end
+		if currentEvent.Position == MIDDLE && (nextEvent.HasLevel() || !currentEvent.IsCloseToTime(nextEvent)) {
+			currentEvent.Position = END
+		}
+
+		// If next item is close to current item and has no level, set next item position to middle
+		if currentEvent.Position == MIDDLE && !nextEvent.HasLevel() && currentEvent.IsCloseToTime(nextEvent) {
+			nextEvent.Position = MIDDLE
+		}
+		// Set next item level to current item level
+		if currentEvent.Position == START || currentEvent.Position == MIDDLE {
+			nextEvent.Level = currentEvent.Level
+		}
+	} else if currentEvent.Position == MIDDLE {
+		currentEvent.Position = END
+	}
+}

docker/event_generator_test.go

@@ -0,0 +1,149 @@
+package docker
+
+import (
+	"bufio"
+	"bytes"
+	"encoding/binary"
+	"reflect"
+	"strings"
+	"sync"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+func TestEventGenerator_Events_tty(t *testing.T) {
+	input := "example input"
+	reader := bufio.NewReader(strings.NewReader(input))
+
+	g := NewEventGenerator(reader, true)
+	event := <-g.Events
+
+	require.NotNil(t, event, "Expected event to not be nil, but got nil")
+	assert.Equal(t, input, event.Message)
+}
+
+func TestEventGenerator_Events_non_tty(t *testing.T) {
+	input := "example input"
+	reader := bytes.NewReader(makeMessage(input, STDOUT))
+
+	g := NewEventGenerator(reader, false)
+	event := <-g.Events
+
+	require.NotNil(t, event, "Expected event to not be nil, but got nil")
+	assert.Equal(t, input, event.Message)
+}
+
+func TestEventGenerator_Events_non_tty_close_channel(t *testing.T) {
+	input := "example input"
+	reader := bytes.NewReader(makeMessage(input, STDOUT))
+
+	g := NewEventGenerator(reader, false)
+	<-g.Events
+	_, ok := <-g.Events
+
+	assert.False(t, ok, "Expected channel to be closed")
+}
+
+func TestEventGenerator_Events_routines_done(t *testing.T) {
+	input := "example input"
+	reader := bytes.NewReader(makeMessage(input, STDOUT))
+
+	g := NewEventGenerator(reader, false)
+	<-g.Events
+	assert.False(t, waitTimeout(&g.wg, 1*time.Second), "Expected routines to be done")
+}
+
+func makeMessage(message string, stream StdType) []byte {
+	data := make([]byte, 8)
+	binary.BigEndian.PutUint32(data[4:], uint32(len(message)))
+	data[0] = byte(stream / 2)
+	data = append(data, []byte(message)...)
+
+	return data
+}
+
+func waitTimeout(wg *sync.WaitGroup, timeout time.Duration) bool {
+	c := make(chan struct{})
+	go func() {
+		defer close(c)
+		wg.Wait()
+	}()
+	select {
+	case <-c:
+		return false // completed normally
+	case <-time.After(timeout):
+		return true // timed out
+	}
+}
+
+func Test_createEvent(t *testing.T) {
+	type args struct {
+		message    string
+		streamType StdType
+	}
+	tests := []struct {
+		name string
+		args args
+		want *LogEvent
+	}{
+		{
+			name: "empty message",
+			args: args{
+				message: "",
+			},
+			want: &LogEvent{
+				Message: "",
+			},
+		}, {
+			name: "simple json message",
+			args: args{
+				message: "2020-05-13T18:55:37.772853839Z {\"key\": \"value\"}",
+			},
+			want: &LogEvent{
+				Message: map[string]interface{}{
+					"key": "value",
+				},
+			},
+		},
+		{
+			name: "invalid json message",
+			args: args{
+				message: "2020-05-13T18:55:37.772853839Z {\"key\"}",
+			},
+			want: &LogEvent{
+				Message: "{\"key\"}",
+			},
+		},
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := createEvent(tt.args.message, STDOUT); !reflect.DeepEqual(got.Message, tt.want.Message) {
+				t.Errorf("createEvent() = %v, want %v", got.Message, tt.want.Message)
+			}
+		})
+	}
+}
+
+type mockReadCloser struct {
+	bytes []byte
+}
+
+func (m mockReadCloser) Read(p []byte) (int, error) {
+	return copy(p, m.bytes), nil
+}
+
+func Benchmark_readEvent(b *testing.B) {
+	b.ReportAllocs()
+
+	data := makeMessage("2020-05-13T18:55:37.772853839Z {\"key\": \"value\"}\n", STDOUT)
+
+	reader := bufio.NewReader(mockReadCloser{bytes: data})
+
+	for i := 0; i < b.N; i++ {
+		readEvent(reader, true)
+		// println(message, stream)
+	}
+}

docker/host.go

@@ -0,0 +1,68 @@
+package docker
+
+import (
+	"fmt"
+	"log"
+	"net/url"
+	"os"
+	"path/filepath"
+	"strings"
+)
+
+type Host struct {
+	Name       string   `json:"name"`
+	ID         string   `json:"id"`
+	URL        *url.URL `json:"-"`
+	CertPath   string   `json:"-"`
+	CACertPath string   `json:"-"`
+	KeyPath    string   `json:"-"`
+	ValidCerts bool     `json:"-"`
+}
+
+func ParseConnection(connection string) (Host, error) {
+	parts := strings.Split(connection, "|")
+	if len(parts) > 2 {
+		return Host{}, fmt.Errorf("invalid connection string: %s", connection)
+	}
+
+	remoteUrl, err := url.Parse(parts[0])
+	if err != nil {
+		return Host{}, err
+	}
+
+	name := remoteUrl.Hostname()
+	if len(parts) == 2 {
+		name = parts[1]
+	}
+
+	basePath, err := filepath.Abs("./certs")
+	if err != nil {
+		log.Fatalf("error converting certs path to absolute: %s", err)
+	}
+
+	host := remoteUrl.Hostname()
+	if _, err := os.Stat(filepath.Join(basePath, host)); !os.IsNotExist(err) {
+		basePath = filepath.Join(basePath, host)
+	}
+
+	cacertPath := filepath.Join(basePath, "ca.pem")
+	certPath := filepath.Join(basePath, "cert.pem")
+	keyPath := filepath.Join(basePath, "key.pem")
+
+	hasCerts := true
+	if _, err := os.Stat(cacertPath); os.IsNotExist(err) {
+		cacertPath = ""
+		hasCerts = false
+	}
+
+	return Host{
+		ID:         strings.ReplaceAll(remoteUrl.String(), "/", ""),
+		Name:       name,
+		URL:        remoteUrl,
+		CertPath:   certPath,
+		CACertPath: cacertPath,
+		KeyPath:    keyPath,
+		ValidCerts: hasCerts,
+	}, nil
+
+}

docker/level_guesser.go

@@ -0,0 +1,41 @@
+package docker
+
+import (
+	"regexp"
+	"strings"
+)
+
+var KEY_VALUE_REGEX = regexp.MustCompile(`level=(\w+)`)
+var ANSI_COLOR_REGEX = regexp.MustCompile(`\x1b\[[0-9;]*m`)
+
+func guessLogLevel(logEvent *LogEvent) string {
+	switch value := logEvent.Message.(type) {
+	case string:
+		levels := []string{"error", "warn", "warning", "info", "debug", "trace", "fatal"}
+		stripped := ANSI_COLOR_REGEX.ReplaceAllString(value, "") // remove ansi color codes
+		for _, level := range levels {
+			if match, _ := regexp.MatchString("(?i)^"+level+"[^a-z]", stripped); match {
+				return level
+			}
+
+			if strings.Contains(value, "["+strings.ToUpper(level)+"]") {
+				return level
+			}
+
+			if strings.Contains(value, " "+strings.ToUpper(level)+" ") {
+				return level
+			}
+		}
+
+		if matches := KEY_VALUE_REGEX.FindStringSubmatch(value); matches != nil {
+			return matches[1]
+		}
+
+	case map[string]interface{}:
+		if level, ok := value["level"].(string); ok {
+			return level
+		}
+	}
+
+	return ""
+}

docker/reader.go

@@ -1,49 +0,0 @@
-package docker
-
-import (
-	"bytes"
-	"encoding/binary"
-	"io"
-)
-
-type logReader struct {
-	readerCloser io.ReadCloser
-	tty          bool
-	lastHeader   []byte
-	buffer       bytes.Buffer
-}
-
-func newLogReader(reader io.ReadCloser, tty bool) io.ReadCloser {
-	return &logReader{
-		reader,
-		tty,
-		make([]byte, 8),
-		bytes.Buffer{},
-	}
-}
-
-func (r *logReader) Read(p []byte) (n int, err error) {
-	if r.tty {
-		return r.readerCloser.Read(p)
-	} else {
-		if r.buffer.Len() > 0 {
-			return r.buffer.Read(p)
-		} else {
-			r.buffer.Reset()
-			_, err := r.readerCloser.Read(r.lastHeader)
-			if err != nil {
-				return 0, err
-			}
-			count := binary.BigEndian.Uint32(r.lastHeader[4:])
-			_, err = io.CopyN(&r.buffer, r.readerCloser, int64(count))
-			if err != nil {
-				return 0, err
-			}
-			return r.buffer.Read(p)
-		}
-	}
-}
-
-func (r *logReader) Close() error {
-	return r.readerCloser.Close()
-}

docker/types.go

@@ -1,5 +1,9 @@
 package docker
 
+import (
+	"math"
+)
+
 // Container represents an internal representation of docker containers
 type Container struct {
 	ID      string   `json:"id"`
@@ -11,6 +15,9 @@ type Container struct {
 	Created int64    `json:"created"`
 	State   string   `json:"state"`
 	Status  string   `json:"status"`
+	Health  string   `json:"health,omitempty"`
+	Host    string   `json:"host,omitempty"`
+	Tty     bool     `json:"-"`
 }
 
 // ContainerStat represent stats instant for a container
@@ -25,10 +32,30 @@ type ContainerStat struct {
 type ContainerEvent struct {
 	ActorID string `json:"actorId"`
 	Name    string `json:"name"`
+	Host    string `json:"host"`
 }
 
+type LogPosition string
+
+const (
+	START  LogPosition = "start"
+	MIDDLE LogPosition = "middle"
+	END    LogPosition = "end"
+)
+
 type LogEvent struct {
-	Message   any    `json:"m,omitempty"`
-	Timestamp int64  `json:"ts"`
-	Id        uint32 `json:"id,omitempty"`
+	Message   any         `json:"m,omitempty"`
+	Timestamp int64       `json:"ts"`
+	Id        uint32      `json:"id,omitempty"`
+	Level     string      `json:"l,omitempty"`
+	Position  LogPosition `json:"p,omitempty"`
+	Stream    string      `json:"s,omitempty"`
+}
+
+func (l *LogEvent) HasLevel() bool {
+	return l.Level != ""
+}
+
+func (l *LogEvent) IsCloseToTime(other *LogEvent) bool {
+	return math.Abs(float64(l.Timestamp-other.Timestamp)) < 10
 }

docs/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+.vite-ssg-dist
+.vite-ssg-temp
+*.local
+dist
+dist-ssr
+node_modules
+.idea/
+*.log
+!.vscode

docs/.vitepress/.gitignore

@@ -0,0 +1,2 @@
+dist
+cache

docs/.vitepress/config.ts

@@ -0,0 +1,119 @@
+import { createRequire } from "module";
+import { defineConfig } from "vitepress";
+import { createWriteStream } from "node:fs";
+import { resolve } from "node:path";
+import { SitemapStream, streamToPromise } from "sitemap";
+
+const require = createRequire(import.meta.url);
+const pkg = require("dozzle/package.json");
+
+const links = [] as { url: string; lastmod?: number }[];
+
+export default defineConfig({
+  lang: "en-US",
+  title: "Dozzle",
+  description: "A lightweight, open-source, and secure log viewer for Docker.",
+
+  lastUpdated: true,
+  cleanUrls: true,
+
+  head: [
+    [
+      "script",
+      {
+        async: "",
+        src: "https://www.googletagmanager.com/gtag/js?id=G-X3Z4496XFK",
+      },
+    ],
+    [
+      "script",
+      {},
+      `function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-X3Z4496XFK")`,
+    ],
+  ],
+  themeConfig: {
+    editLink: {
+      pattern: "https://github.com/amir20/dozzle/edit/master/docs/:path",
+    },
+    nav: [
+      { text: "Home", link: "/" },
+      { text: "Guide", link: "/guide/what-is-dozzle", activeMatch: "/guide/" },
+      {
+        text: `v${pkg.version}`,
+        items: [
+          {
+            text: "Releases",
+            link: "https://github.com/amir20/dozzle/releases",
+          },
+          {
+            text: "New Issue",
+            link: "https://github.com/amir20/dozzle/issues/new/choose",
+          },
+        ],
+      },
+    ],
+    sidebar: [
+      {
+        text: "Introduction",
+        items: [
+          { text: "What is Dozzle?", link: "/guide/what-is-dozzle" },
+          { text: "Getting Started", link: "/guide/getting-started" },
+        ],
+      },
+      {
+        text: "Advanced Configuration",
+        items: [
+          { text: "Authentication", link: "/guide/authentication" },
+          { text: "Healthcheck", link: "/guide/healthcheck" },
+          { text: "Remote Hosts", link: "/guide/remote-hosts" },
+          { text: "Supported Env Vars", link: "/guide/supported-env-vars" },
+          { text: "Logging Files on Disk", link: "/guide/log-files-on-disk" },
+          { text: "Analytics", link: "/guide/analytics" },
+        ],
+      },
+      {
+        text: "Troubleshooting",
+        items: [
+          { text: "FAQ", link: "/guide/faq" },
+          { text: "Debugging", link: "/guide/debugging" },
+        ],
+      },
+    ],
+
+    footer: {
+      message: "Released under the MIT License. Open sourced and sponsored by Docker OSS.",
+      copyright: "Copyright © 2019-present <a href='https://amirraminfar.me'>Amir Raminfar</a>",
+    },
+
+    socialLinks: [
+      { icon: "github", link: "https://github.com/amir20/dozzle" },
+      {
+        icon: {
+          svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21.81 10.25c-.06-.04-.56-.43-1.64-.43c-.28 0-.56.03-.84.08c-.21-1.4-1.38-2.11-1.43-2.14l-.29-.17l-.18.27c-.24.36-.43.77-.51 1.19c-.2.8-.08 1.56.33 2.21c-.49.28-1.29.35-1.46.35H2.62c-.34 0-.62.28-.62.63c0 1.15.18 2.3.58 3.38c.45 1.19 1.13 2.07 2 2.61c.98.6 2.59.94 4.42.94c.79 0 1.61-.07 2.42-.22c1.12-.2 2.2-.59 3.19-1.16A8.3 8.3 0 0 0 16.78 16c1.05-1.17 1.67-2.5 2.12-3.65h.19c1.14 0 1.85-.46 2.24-.85c.26-.24.45-.53.59-.87l.08-.24l-.19-.14m-17.96.99h1.76c.08 0 .16-.07.16-.16V9.5c0-.08-.07-.16-.16-.16H3.85c-.09 0-.16.07-.16.16v1.58c.01.09.07.16.16.16m2.43 0h1.76c.08 0 .16-.07.16-.16V9.5c0-.08-.07-.16-.16-.16H6.28c-.09 0-.16.07-.16.16v1.58c.01.09.07.16.16.16m2.47 0h1.75c.1 0 .17-.07.17-.16V9.5c0-.08-.06-.16-.17-.16H8.75c-.08 0-.15.07-.15.16v1.58c0 .09.06.16.15.16m2.44 0h1.77c.08 0 .15-.07.15-.16V9.5c0-.08-.06-.16-.15-.16h-1.77c-.08 0-.15.07-.15.16v1.58c0 .09.07.16.15.16M6.28 9h1.76c.08 0 .16-.09.16-.18V7.25c0-.09-.07-.16-.16-.16H6.28c-.09 0-.16.06-.16.16v1.57c.01.09.07.18.16.18m2.47 0h1.75c.1 0 .17-.09.17-.18V7.25c0-.09-.06-.16-.17-.16H8.75c-.08 0-.15.06-.15.16v1.57c0 .09.06.18.15.18m2.44 0h1.77c.08 0 .15-.09.15-.18V7.25c0-.09-.07-.16-.15-.16h-1.77c-.08 0-.15.06-.15.16v1.57c0 .09.07.18.15.18m0-2.28h1.77c.08 0 .15-.07.15-.16V5c0-.1-.07-.17-.15-.17h-1.77c-.08 0-.15.06-.15.17v1.56c0 .08.07.16.15.16m2.46 4.52h1.76c.09 0 .16-.07.16-.16V9.5c0-.08-.07-.16-.16-.16h-1.76c-.08 0-.15.07-.15.16v1.58c0 .09.07.16.15.16"/></svg>`,
+        },
+        link: "https://hub.docker.com/r/amir20/dozzle",
+      },
+    ],
+  },
+
+  transformHtml: (_, id, { pageData }) => {
+    if (!/[\\/]404\.html$/.test(id))
+      links.push({
+        // you might need to change this if not using clean urls mode
+        url: pageData.relativePath.replace(/((^|\/)index)?\.md$/, "$2"),
+        lastmod: pageData.lastUpdated,
+      });
+  },
+
+  buildEnd: async ({ outDir }) => {
+    const sitemap = new SitemapStream({
+      hostname: "https://dozzle.dev/",
+    });
+    const writeStream = createWriteStream(resolve(outDir, "sitemap.xml"));
+    sitemap.pipe(writeStream);
+    links.forEach((link) => sitemap.write(link));
+    const promise = streamToPromise(sitemap);
+    sitemap.end();
+    await promise;
+  },
+});

docs/.vitepress/theme/components/BrowserWindow.vue

@@ -0,0 +1,14 @@
+<script setup></script>
+
+<template>
+  <div border="~ solid rounded light-100 dark:dark-50" bg="[#eee] dark:[#222]">
+    <div flex gap="2" p-2>
+      <div circle-red />
+      <div circle-yellow />
+      <div circle-green />
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/components/HeroVideo.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { useMutationObserver } from "@vueuse/core";
+import { onMounted, onUnmounted, ref } from "vue";
+
+const isDark = ref(false);
+onMounted(() => {
+  isDark.value = document.documentElement.classList.contains("dark");
+  useMutationObserver(
+    document.documentElement,
+    (mutations) => {
+      isDark.value = document.documentElement.classList.contains("dark");
+    },
+    {
+      attributes: true,
+      attributeFilter: ["class"],
+    },
+  );
+});
+
+onMounted(() => {
+  document.documentElement.classList.add("home");
+});
+
+onUnmounted(() => {
+  document.documentElement.classList.remove("home");
+});
+</script>
+
+<template>
+  <browser-window drop-shadow-md>
+    <video muted loop autoplay playsinline poster="../media/poster.png" v-if="isDark">
+      <source src="../media/dozzle-dark.webm" type="video/webm" />
+      <source src="../media/dozzle-dark.mp4" type="video/mp4" />
+      <img src="../media/poster.png" alt="" />
+    </video>
+    <video muted loop autoplay playsinline poster="../media/poster.png" v-else>
+      <source src="../media/dozzle-light.webm" type="video/webm" />
+      <source src="../media/dozzle-light.mp4" type="video/mp4" />
+      <img src="../media/poster.png" alt="" />
+    </video>
+  </browser-window>
+</template>
+
+<style scoped></style>

docs/.vitepress/theme/index.ts

@@ -0,0 +1,16 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from "vue";
+import Theme from "vitepress/theme";
+import "uno.css";
+import "./style.css";
+import HeroVideo from "./components/HeroVideo.vue";
+
+export default {
+  ...Theme,
+  Layout: () => {
+    return h(Theme.Layout, null, {
+      "home-hero-image": () => h(HeroVideo),
+    });
+  },
+  enhanceApp({ app, router, siteData }) {},
+};