devglide 0.1.1

package/src/apps/log/node_modules/.bin/tsserver

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/_work/devglide/devglide/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/_work/devglide/devglide/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/_work/devglide/devglide/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/_work/devglide/devglide/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/_work/devglide/devglide/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/_work/devglide/devglide/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
+fi

package/src/apps/log/node_modules/.bin/tsx

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/_work/devglide/devglide/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/_work/devglide/devglide/node_modules/.pnpm/tsx@4.21.0/node_modules:/home/runner/_work/devglide/devglide/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/_work/devglide/devglide/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/_work/devglide/devglide/node_modules/.pnpm/tsx@4.21.0/node_modules:/home/runner/_work/devglide/devglide/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../tsx/dist/cli.mjs" "$@"
+else
+  exec node  "$basedir/../tsx/dist/cli.mjs" "$@"
+fi

package/src/apps/log/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@devglide/log",
+  "version": "0.1.0",
+  "description": "Browser console capture and log monitoring",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "devglide-log": "./dist/index.js"
+  },
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@devglide/mcp-utils": "workspace:*",
+    "chokidar": "^4.0.3",
+    "@modelcontextprotocol/sdk": "^1.12.1",
+    "cors": "^2.8.5",
+    "express": "^5.2.1",
+    "@devglide/project-context": "workspace:*",
+    "zod": "^3.25.49"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/express": "^5.0.0",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/apps/log/public/console-sniffer.js

@@ -0,0 +1,221 @@
+(function () {
+  'use strict';
+
+  // ---- 1. Extract config — injected global or script-tag src ----
+
+  var serverOrigin, targetPath, persistent, allowedTypes;
+
+  var _cfg = window.__devglideSnifferConfig;
+  if (_cfg) {
+    serverOrigin = _cfg.serverOrigin;
+    targetPath   = _cfg.targetPath;
+    persistent   = !!_cfg.persistent;
+    allowedTypes = _cfg.allowedTypes || {};
+    delete window.__devglideSnifferConfig;
+  } else {
+    var scriptEl = document.currentScript;
+    if (!scriptEl) {
+      var scripts = document.getElementsByTagName('script');
+      for (var i = 0; i < scripts.length; i++) {
+        var src = scripts[i].getAttribute('src') || '';
+        if (src.indexOf('console-sniffer.js') !== -1) {
+          scriptEl = scripts[i];
+          break;
+        }
+      }
+    }
+
+    if (!scriptEl) {
+      return;
+    }
+
+    var fullSrc = scriptEl.getAttribute('src');
+
+    var originMatch = fullSrc.match(/^(https?:\/\/[^\/]+)/);
+    if (!originMatch) {
+      return;
+    }
+    serverOrigin = originMatch[1];
+
+    targetPath = '';
+    persistent = false;
+    allowedTypes = {};
+    var qIndex = fullSrc.indexOf('?');
+    if (qIndex !== -1) {
+      var query = fullSrc.substring(qIndex + 1);
+      var params = query.split('&');
+      for (var p = 0; p < params.length; p++) {
+        var kv = params[p].split('=');
+        var key = kv[0];
+        var val = decodeURIComponent(kv.slice(1).join('='));
+        if (key === 'targetPath') {
+          targetPath = val;
+        } else if (key === 'persistent') {
+          persistent = (val === 'true');
+        } else if (key === 'levels') {
+          var lvlParts = val.split(',');
+          for (var l = 0; l < lvlParts.length; l++) {
+            var t = lvlParts[l].trim().toUpperCase();
+            if (t) { allowedTypes[t] = true; }
+          }
+        }
+      }
+    }
+  }
+
+  if (!targetPath) {
+    return;
+  }
+
+  // ---- 2. Sniffer module ----
+
+  var apiUrl = serverOrigin + '/api/log';
+  var clearUrl = serverOrigin + '/api/log?targetPath=' + encodeURIComponent(targetPath);
+
+  function generateSessionId() {
+    if (typeof crypto !== 'undefined' && crypto.getRandomValues) {
+      var arr = new Uint32Array(1);
+      crypto.getRandomValues(arr);
+      return ('00000000' + arr[0].toString(16)).slice(-8);
+    }
+    return ('00000000' + Math.floor(Math.random() * 0xFFFFFFFF).toString(16)).slice(-8);
+  }
+
+  var sessionId = generateSessionId();
+  var seqCounter = 0;
+
+  if (!persistent) {
+    try {
+      fetch(clearUrl, { method: 'DELETE' }).catch(function () {});
+    } catch (e) {}
+  }
+
+  try {
+    fetch(apiUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      keepalive: true,
+      body: JSON.stringify({
+        type:       'SESSION_START',
+        session:    sessionId,
+        seq:        seqCounter++,
+        ts:         new Date().toISOString(),
+        url:        window.location.href,
+        ua:         navigator.userAgent,
+        targetPath: targetPath,
+        persistent: persistent
+      })
+    }).catch(function () {});
+  } catch (e) {}
+
+  function formatArgs(args) {
+    var parts = [];
+    for (var i = 0; i < args.length; i++) {
+      var arg = args[i];
+      if (arg === null) {
+        parts.push('null');
+      } else if (arg === undefined) {
+        parts.push('undefined');
+      } else if (typeof arg === 'object') {
+        try {
+          parts.push(JSON.stringify(arg));
+        } catch (e) {
+          parts.push('[object Object]');
+        }
+      } else {
+        parts.push(String(arg));
+      }
+    }
+    return parts.join(' ');
+  }
+
+  function sendLog(type, message, extra) {
+    if (Object.keys(allowedTypes).length > 0 && !allowedTypes[type]) {
+      seqCounter++;   // keep seq monotonic; gaps in file indicate filtered events
+      return;
+    }
+    try {
+      var payload = {
+        type:       type,
+        session:    sessionId,
+        seq:        seqCounter++,
+        ts:         new Date().toISOString(),
+        targetPath: targetPath
+      };
+      if (message !== undefined && message !== null) {
+        payload.message = message;
+      }
+      if (extra) {
+        if (extra.source !== undefined && extra.source !== null && extra.source !== '') payload.source = extra.source;
+        if (extra.line   !== undefined && extra.line   !== null)                        payload.line   = extra.line;
+        if (extra.col    !== undefined && extra.col    !== null)                        payload.col    = extra.col;
+        if (extra.stack  !== undefined && extra.stack  !== null && extra.stack !== '')  payload.stack  = extra.stack;
+      }
+      fetch(apiUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        keepalive: true,
+        body: JSON.stringify(payload)
+      }).catch(function () {});
+    } catch (e) {}
+  }
+
+  function captureStack() {
+    try {
+      var raw = new Error().stack || '';
+      var lines = raw.split('\n').filter(function (l) {
+        return l.trim() !== '' && l.trim() !== 'Error'
+            && l.indexOf('console-sniffer.js') === -1;
+      });
+      return lines.length > 0 ? lines.join('\n') : undefined;
+    } catch (e) {
+      return undefined;
+    }
+  }
+
+  var levelMap = {
+    log:   'LOG',
+    warn:  'WARN',
+    error: 'ERROR',
+    info:  'INFO',
+    debug: 'DEBUG'
+  };
+
+  Object.keys(levelMap).forEach(function (method) {
+    var original = console[method].bind(console);
+    console[method] = function () {
+      original.apply(console, arguments);
+      var stack = captureStack();
+      sendLog(levelMap[method], formatArgs(arguments), stack ? { stack: stack } : undefined);
+    };
+  });
+
+  var previousOnError = window.onerror;
+  window.onerror = function (message, source, lineno, colno, error) {
+    sendLog('WINDOW_ERROR', String(message), {
+      source: source  || undefined,
+      line:   lineno  || undefined,
+      col:    colno   || undefined,
+      stack:  (error && error.stack) ? error.stack : undefined
+    });
+    if (typeof previousOnError === 'function') {
+      return previousOnError.apply(this, arguments);
+    }
+    return false;
+  };
+
+  window.addEventListener('unhandledrejection', function (event) {
+    var reason = event.reason;
+    var msg;
+    var stack;
+    if (reason instanceof Error) {
+      msg   = reason.message;
+      stack = reason.stack || undefined;
+    } else {
+      try { msg = JSON.stringify(reason); } catch (e) { msg = String(reason); }
+      stack = undefined;
+    }
+    sendLog('UNHANDLED_REJECTION', msg, { stack: stack });
+  });
+
+})();

package/src/apps/log/public/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" fill="#1c2128"/>
+  <rect width="32" height="32" fill="none" stroke="#7ee787" stroke-width="1.5"/>
+  <path d="M8 10h6a6 6 0 0 1 0 12H8V10z" fill="#7ee787"/>
+  <rect x="18" y="10" width="6" height="4" fill="#7ee787" opacity="0.6"/>
+  <rect x="18" y="18" width="6" height="4" fill="#7ee787" opacity="0.6"/>
+</svg>

package/src/apps/log/public/page.css

@@ -0,0 +1,322 @@
+
+  .page-log {
+    font-family: var(--df-font-mono);
+    background: var(--df-color-bg-base);
+    color: var(--df-color-text-primary);
+    -webkit-font-smoothing: antialiased;
+    font-size: var(--df-font-size-md);
+    min-height: 100vh;
+    background-image: none;
+  }
+
+  /* -- Header (app-specific additions) -------------------------------- */
+  .page-log .brand {
+    cursor: pointer;
+  }
+
+  /* -- Badge ---------------------------------------------------------- */
+  .page-log .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    font-size: var(--df-font-size-xs);
+    font-weight: 600;
+    font-family: var(--df-font-mono);
+    background: color-mix(in srgb, var(--df-color-accent-default) 12%, transparent);
+    color: var(--df-color-accent-default);
+    border: 1px solid color-mix(in srgb, var(--df-color-accent-default) 25%, transparent);
+    text-transform: uppercase;
+    letter-spacing: var(--df-letter-spacing-wider);
+  }
+
+  .page-log .source-badge {
+    display: inline-flex;
+    padding: 1px 5px;
+    font-size: var(--df-font-size-xs);
+    font-weight: 700;
+    font-family: var(--df-font-mono);
+    letter-spacing: 0.05em;
+  }
+  .page-log .source-badge.browser { background: color-mix(in srgb, var(--df-color-state-warning) 25%, transparent); color: var(--df-color-state-warning); }
+  .page-log .source-badge.server  { background: color-mix(in srgb, var(--df-color-accent-muted) 25%, transparent); color: var(--df-color-accent-muted); }
+  .page-log .source-badge.file    { background: color-mix(in srgb, var(--df-color-state-success) 25%, transparent); color: var(--df-color-state-success); }
+
+  /* -- Buttons -------------------------------------------------------- */
+  .page-log .btn-danger {
+    padding: 3px 8px;
+    border: 1px solid color-mix(in srgb, var(--df-color-state-error) 40%, transparent);
+    background: color-mix(in srgb, var(--df-color-state-error) 8%, transparent);
+    color: var(--df-color-state-error);
+    font-size: var(--df-font-size-xs);
+    font-weight: 600;
+    cursor: pointer;
+    font-family: var(--df-font-mono);
+    text-transform: uppercase;
+    letter-spacing: var(--df-letter-spacing-wide);
+    transition: background var(--df-duration-fast), border-color var(--df-duration-fast);
+  }
+  .page-log .btn-danger:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--df-color-state-error) 18%, transparent);
+    border-color: color-mix(in srgb, var(--df-color-state-error) 60%, transparent);
+  }
+  .page-log .btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }
+
+  .page-log .btn-secondary {
+    padding: 3px 8px;
+    border: 1px solid var(--df-color-border-default);
+    background: var(--df-color-bg-surface);
+    color: var(--df-color-text-secondary);
+    font-size: var(--df-font-size-xs);
+    font-weight: 600;
+    cursor: pointer;
+    font-family: var(--df-font-mono);
+    text-transform: uppercase;
+    letter-spacing: var(--df-letter-spacing-wide);
+    transition: background var(--df-duration-fast), color var(--df-duration-fast);
+  }
+  .page-log .btn-secondary:hover { background: var(--df-color-bg-raised); color: var(--df-color-text-primary); }
+
+  /* -- Refresh indicator ---------------------------------------------- */
+  .page-log .refresh-indicator {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: var(--df-color-state-success);
+    margin-left: 6px;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+  .page-log .refresh-indicator.flash { opacity: 1; }
+
+  /* -- Layout --------------------------------------------------------- */
+  .page-log main {
+    max-width: var(--df-max-width-md);
+    margin: 0 auto;
+    padding: var(--df-space-6);
+  }
+
+  @media (min-width: 1440px) {
+    .page-log main { max-width: var(--df-max-width-lg); padding: var(--df-space-8); }
+  }
+
+  @media (min-width: 1920px) {
+    .page-log main { max-width: var(--df-max-width-xl); padding: var(--df-space-10); }
+    .page-log .log-entry { grid-template-columns: 22px 100px auto 1fr; }
+  }
+
+  .page-log .section-title {
+    font-size: var(--df-font-size-xs);
+    letter-spacing: var(--df-letter-spacing-wider);
+    text-transform: uppercase;
+    color: var(--df-color-text-secondary);
+    margin-bottom: var(--df-space-3);
+  }
+
+  .page-log .hidden { display: none !important; }
+
+  /* -- Empty state ---------------------------------------------------- */
+  .page-log .empty {
+    background: var(--df-color-bg-surface);
+    border: 1px dashed var(--df-color-border-default);
+    padding: var(--df-space-10);
+    text-align: center;
+    color: var(--df-color-text-secondary);
+    font-size: var(--df-font-size-sm);
+    line-height: var(--df-line-height-loose);
+    text-transform: uppercase;
+    letter-spacing: var(--df-letter-spacing-wide);
+  }
+  .page-log .empty code {
+    color: var(--df-color-accent-default);
+    font-family: var(--df-font-mono);
+    text-transform: none;
+  }
+
+  /* -- File list ------------------------------------------------------ */
+  .page-log .file-list { display: flex; flex-direction: column; gap: var(--df-space-2); }
+
+  .page-log .file-card {
+    background: var(--df-color-bg-surface);
+    border: 1px solid var(--df-color-border-default);
+    clip-path: var(--df-clip-md);
+    padding: var(--df-space-3) var(--df-space-4);
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: start;
+    gap: var(--df-space-3);
+    transition: border-color var(--df-duration-fast);
+    cursor: pointer;
+  }
+  .page-log .file-card:hover {
+    border-color: color-mix(in srgb, var(--df-color-accent-default) 50%, transparent);
+  }
+
+  /* -- Status dots ---------------------------------------------------- */
+  .page-log .status-dot { width: 8px; height: 8px; margin-top: 3px; flex-shrink: 0; }
+  .page-log .status-dot.active { background: var(--df-color-state-success); box-shadow: 0 0 6px var(--df-color-state-success); }
+  .page-log .status-dot.idle   { background: var(--df-color-state-warning); }
+  .page-log .status-dot.stale  { background: var(--df-color-text-secondary); }
+
+  /* -- File content --------------------------------------------------- */
+  .page-log .file-main { min-width: 0; }
+  .page-log .file-name {
+    font-size: var(--df-font-size-sm);
+    color: var(--df-color-text-primary);
+    text-transform: uppercase;
+    letter-spacing: var(--df-letter-spacing-wide);
+    margin-bottom: 2px;
+  }
+  .page-log .file-path {
+    font-size: var(--df-font-size-xs);
+    color: var(--df-color-text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .page-log .file-sources {
+    display: flex;
+    gap: 4px;
+    margin-top: 4px;
+    flex-wrap: wrap;
+  }
+  .page-log .file-source-item {
+    font-size: var(--df-font-size-xs);
+    color: var(--df-color-text-muted);
+    padding: 0 4px;
+    border: 1px solid color-mix(in srgb, var(--df-color-border-default) 60%, transparent);
+  }
+  .page-log .file-source-item.browser { border-color: color-mix(in srgb, var(--df-color-state-warning) 40%, transparent); color: var(--df-color-state-warning); }
+  .page-log .file-source-item.server  { border-color: color-mix(in srgb, var(--df-color-accent-muted) 40%, transparent); color: var(--df-color-accent-muted); }
+  .page-log .file-source-item.file    { border-color: color-mix(in srgb, var(--df-color-state-success) 40%, transparent); color: var(--df-color-state-success); }
+
+  .page-log .file-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
+  .page-log .stat {
+    font-size: var(--df-font-size-xs);
+    color: var(--df-color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: var(--df-letter-spacing-wide);
+  }
+  .page-log .stat.has-errors { color: var(--df-color-state-error); }
+  .page-log .last-seen { font-size: var(--df-font-size-xs); color: var(--df-color-text-muted); }
+
+  /* -- Log Viewer ----------------------------------------------------- */
+  .page-log .viewer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--df-space-3);
+    margin-bottom: var(--df-space-3);
+    flex-wrap: wrap;
+  }
+  .page-log .viewer-header-left {
+    display: flex;
+    align-items: center;
+    gap: var(--df-space-3);
+  }
+  .page-log .viewer-title {
+    font-size: var(--df-font-size-sm);
+    color: var(--df-color-text-primary);
+    text-transform: uppercase;
+    letter-spacing: var(--df-letter-spacing-wide);
+  }
+
+  /* -- Filter pills --------------------------------------------------- */
+  .page-log .filter-bar {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+    margin-bottom: var(--df-space-3);
+  }
+  .page-log .filter-pill {
+    padding: 2px 8px;
+    font-size: var(--df-font-size-xs);
+    font-family: var(--df-font-mono);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border: 1px solid var(--df-color-border-default);
+    background: transparent;
+    color: var(--df-color-text-secondary);
+    cursor: pointer;
+    transition: all var(--df-duration-fast);
+  }
+  .page-log .filter-pill:hover { border-color: var(--df-color-text-secondary); color: var(--df-color-text-secondary); }
+  .page-log .filter-pill.active { border-color: var(--df-color-accent-default); color: var(--df-color-accent-default); background: color-mix(in srgb, var(--df-color-accent-default) 10%, transparent); }
+  .page-log .filter-pill.active.red { border-color: var(--df-color-state-error); color: var(--df-color-state-error); background: color-mix(in srgb, var(--df-color-state-error) 10%, transparent); }
+  .page-log .filter-pill.active.yellow { border-color: var(--df-color-state-warning); color: var(--df-color-state-warning); background: color-mix(in srgb, var(--df-color-state-warning) 10%, transparent); }
+
+  /* -- Source toggle -------------------------------------------------- */
+  .page-log .source-toggle {
+    display: flex;
+    gap: 0;
+    margin-bottom: var(--df-space-3);
+  }
+  .page-log .source-toggle button {
+    padding: 2px 10px;
+    font-size: var(--df-font-size-xs);
+    font-family: var(--df-font-mono);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border: 1px solid var(--df-color-border-default);
+    background: transparent;
+    color: var(--df-color-text-muted);
+    cursor: pointer;
+    transition: all var(--df-duration-fast);
+  }
+  .page-log .source-toggle button:not(:last-child) { border-right: none; }
+  .page-log .source-toggle button:hover { color: var(--df-color-text-secondary); }
+  .page-log .source-toggle button.active { background: color-mix(in srgb, var(--df-color-accent-default) 10%, transparent); color: var(--df-color-accent-default); border-color: var(--df-color-accent-default); }
+
+  /* -- Log entries ----------------------------------------------------- */
+  .page-log .log-entries {
+    background: var(--df-color-bg-surface);
+    border: 1px solid var(--df-color-border-default);
+    max-height: 70vh;
+    overflow-y: auto;
+    font-size: var(--df-font-size-sm);
+    line-height: 1.6;
+  }
+
+  .page-log .log-entry {
+    display: grid;
+    grid-template-columns: 18px 90px auto 1fr;
+    gap: 0 var(--df-space-2, 8px);
+    padding: 2px var(--df-space-2);
+    border-bottom: 1px solid color-mix(in srgb, var(--df-color-border-default) 40%, transparent);
+    align-items: baseline;
+  }
+  .page-log .log-entry:hover { background: color-mix(in srgb, var(--df-color-accent-default) 5%, transparent); }
+
+  .page-log .log-src {
+    font-size: var(--df-font-size-xs);
+    font-weight: 700;
+    text-align: center;
+  }
+  .page-log .log-src.browser { color: var(--df-color-state-warning); }
+  .page-log .log-src.server  { color: var(--df-color-accent-muted); }
+  .page-log .log-src.file    { color: var(--df-color-state-success); }
+
+  .page-log .log-time { color: var(--df-color-text-secondary); font-size: var(--df-font-size-xs); white-space: nowrap; }
+
+  .page-log .log-level {
+    font-size: var(--df-font-size-xs);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0 4px;
+    white-space: nowrap;
+  }
+  .page-log .log-level.LOG, .page-log .log-level.SERVER_LOG, .page-log .log-level.FILE_LOG, .page-log .log-level.INFO, .page-log .log-level.DEBUG, .page-log .log-level.FILE_DEBUG { color: var(--df-color-text-secondary); }
+  .page-log .log-level.WARN, .page-log .log-level.SERVER_WARN, .page-log .log-level.FILE_WARN { color: var(--df-color-state-warning); }
+  .page-log .log-level.ERROR, .page-log .log-level.WINDOW_ERROR, .page-log .log-level.UNHANDLED_REJECTION, .page-log .log-level.SERVER_ERROR, .page-log .log-level.FILE_ERROR { color: var(--df-color-state-error); }
+  .page-log .log-level.SESSION_START, .page-log .log-level.FILE_SESSION_START { color: var(--df-color-accent-default); }
+
+  .page-log .log-message {
+    color: var(--df-color-text-primary);
+    white-space: pre-wrap;
+    word-break: break-all;
+    overflow: hidden;
+  }
+  .page-log .log-entry-error .log-message { color: var(--df-color-state-error); }