From cbb91a306dc66b23f5529c24c6f9d59a1274f753 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Tue, 8 Sep 2026 21:46:24 -0400 Subject: [PATCH 1/4] =?UTF-8?q?feat(ui):=20TDS=20migration=20stage=201=20?= =?UTF-8?q?=E2=80=94=20EJS=20layout,=20CSP,=20vendored=20design=20system,?= =?UTF-8?q?=20shared=20runtime?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Vendor web_template base.css/base.js (v1.2 bbec859) under public/web_template with sync script - Add views/layout.ejs (fixed upstream EJS comment delimiters, mobile drawer, cmd palette, keys help, WS status, theme toggle) and lib/render.js two-step renderer - Add page routes for /, /workers, /workflows, /executions, /quick, /scheduler (stub views) - helmet with strict nonce CSP (script-src-attr 'none'), /csp-report, report-only toggle - lib/pageauth.js: shared users upsert + HTML 401/403 for page routes - PULSE_DEV_READONLY guard disabling background writers for local testing - public/assets/app.js shared runtime (Pulse namespace, delegated actions, WS singleton, themed confirm modal) and app.css - eslint globals for browser files; ignore vendored assets Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01HamVMDrA8RqhyxmUHgiqRp --- .eslintignore | 2 + lib/nav.js | 23 + lib/pageauth.js | 70 + lib/render.js | 100 + package-lock.json | 85 +- package.json | 2 + public/.eslintrc.json | 7 + public/assets/app.css | 151 + public/assets/app.js | 685 ++++ public/assets/favicon.png | Bin 0 -> 182 bytes public/assets/pages/dashboard.js | 212 ++ public/web_template/VERSION | 1 + public/web_template/base.css | 5817 ++++++++++++++++++++++++++++++ public/web_template/base.js | 2952 +++++++++++++++ scripts/sync-web-template.sh | 38 + server.js | 183 +- views/layout.ejs | 190 + views/pages/_stub.ejs | 18 + views/pages/dashboard.ejs | 54 + views/pages/workers.ejs | 14 + views/pages/workflows.ejs | 125 + views/partials/cmd-palette.ejs | 19 + views/partials/keys-help.ejs | 23 + views/partials/page-header.ejs | 17 + 24 files changed, 10750 insertions(+), 38 deletions(-) create mode 100644 .eslintignore create mode 100644 lib/nav.js create mode 100644 lib/pageauth.js create mode 100644 lib/render.js create mode 100644 public/assets/app.css create mode 100644 public/assets/app.js create mode 100644 public/assets/favicon.png create mode 100644 public/assets/pages/dashboard.js create mode 100644 public/web_template/VERSION create mode 100644 public/web_template/base.css create mode 100644 public/web_template/base.js create mode 100755 scripts/sync-web-template.sh create mode 100644 views/layout.ejs create mode 100644 views/pages/_stub.ejs create mode 100644 views/pages/dashboard.ejs create mode 100644 views/pages/workers.ejs create mode 100644 views/pages/workflows.ejs create mode 100644 views/partials/cmd-palette.ejs create mode 100644 views/partials/keys-help.ejs create mode 100644 views/partials/page-header.ejs diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..95dc88b --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +node_modules/ +public/web_template/ diff --git a/lib/nav.js b/lib/nav.js new file mode 100644 index 0000000..7de6e29 --- /dev/null +++ b/lib/nav.js @@ -0,0 +1,23 @@ +// Navigation metadata shared by the layout and the page routes. + +const navLinks = [ + { href: '/', key: 'dashboard', label: 'Dashboard' }, + { href: '/workers', key: 'workers', label: 'Workers' }, + { href: '/workflows', key: 'workflows', label: 'Workflows' }, + { href: '/executions', key: 'executions', label: 'Executions' }, + { href: '/quick', key: 'quick', label: 'Quick Command' }, + { href: '/scheduler', key: 'scheduler', label: 'Scheduler' } +]; + +// Page route table: { path, view, key, title } +// `view` is the basename of views/pages/.ejs and of /assets/pages/.js +const PAGES = [ + { path: '/', view: 'dashboard', key: 'dashboard', title: 'Dashboard' }, + { path: '/workers', view: 'workers', key: 'workers', title: 'Workers' }, + { path: '/workflows', view: 'workflows', key: 'workflows', title: 'Workflows' }, + { path: '/executions', view: 'executions', key: 'executions', title: 'Executions' }, + { path: '/quick', view: 'quick', key: 'quick', title: 'Quick Command' }, + { path: '/scheduler', view: 'scheduler', key: 'scheduler', title: 'Scheduler' } +]; + +module.exports = { navLinks, PAGES }; diff --git a/lib/pageauth.js b/lib/pageauth.js new file mode 100644 index 0000000..324c377 --- /dev/null +++ b/lib/pageauth.js @@ -0,0 +1,70 @@ +// Authelia SSO helpers shared by the JSON API middleware (server.js authenticateSSO) +// and the HTML page middleware (authenticatePage). + +const crypto = require('crypto'); +const { renderError } = require('./render'); + +const ALLOWED_GROUPS = ['admin', 'employee']; + +// Upsert the SSO user into the `users` table. Extracted verbatim from authenticateSSO. +async function upsertUser(pool, headers) { + const userId = crypto.randomUUID(); + await pool.query( + `INSERT INTO users (id, username, display_name, email, groups, last_login) + VALUES (?, ?, ?, ?, ?, NOW()) + ON DUPLICATE KEY UPDATE + display_name=VALUES(display_name), + email=VALUES(email), + groups=VALUES(groups), + last_login=NOW()`, + [ + userId, + headers['remote-user'], + headers['remote-name'], + headers['remote-email'], + headers['remote-groups'] + ] + ); +} + +// Express middleware factory for HTML page routes: same auth rules as the API, +// but failures render a themed HTML page instead of JSON. +function makeAuthenticatePage(pool) { + return async function authenticatePage(req, res, next) { + const remoteUser = req.headers['remote-user']; + const remoteName = req.headers['remote-name']; + const remoteEmail = req.headers['remote-email']; + const remoteGroups = req.headers['remote-groups']; + + if (!remoteUser) { + return renderError(req, res, 401, 'Not authenticated', + 'Not authenticated — access via Authelia SSO (auth.lotusguild.org).'); + } + + const groups = remoteGroups ? remoteGroups.split(',').map(g => g.trim()) : []; + const hasAccess = groups.some(g => ALLOWED_GROUPS.includes(g)); + + if (!hasAccess) { + return renderError(req, res, 403, 'Access denied', + 'You must be in the admin or employee group to use this service.'); + } + + try { + await upsertUser(pool, req.headers); + } catch (error) { + console.error('Error updating user:', error); + } + + req.user = { + username: remoteUser, + name: remoteName || remoteUser, + email: remoteEmail || '', + groups: groups, + isAdmin: groups.includes('admin') + }; + + next(); + }; +} + +module.exports = { upsertUser, makeAuthenticatePage, ALLOWED_GROUPS }; diff --git a/lib/render.js b/lib/render.js new file mode 100644 index 0000000..dfb97d1 --- /dev/null +++ b/lib/render.js @@ -0,0 +1,100 @@ +// Two-step EJS rendering: views/pages/.ejs -> `body` -> views/layout.ejs. +// No express-ejs-layouts; the vendored layout is a wrapper file that expects `body`. + +const fs = require('fs'); +const path = require('path'); +const ejs = require('ejs'); +const { navLinks } = require('./nav'); + +const ROOT = path.join(__dirname, '..'); +const VIEWS_DIR = path.join(ROOT, 'views'); +const PAGES_DIR = path.join(VIEWS_DIR, 'pages'); +const LAYOUT = path.join(VIEWS_DIR, 'layout.ejs'); +const STUB = path.join(PAGES_DIR, '_stub.ejs'); + +const CACHE = process.env.NODE_ENV === 'production'; + +// Cache-busting token: -, computed once. +const assetVersion = (function computeAssetVersion() { + let version = '0.0.0'; + try { + version = require(path.join(ROOT, 'package.json')).version || '0.0.0'; + } catch (_) { /* keep default */ } + let sha = ''; + try { + const raw = fs.readFileSync(path.join(ROOT, 'public/web_template/VERSION'), 'utf8').trim(); + sha = (raw.split(/\s+/)[1] || '').trim(); + } catch (_) { /* VERSION not vendored yet */ } + return sha ? `${version}-${sha}` : version; +})(); + +const APP_NAME = process.env.APP_NAME || 'PULSE'; +const APP_SUBTITLE = process.env.APP_SUBTITLE || 'Worker Orchestration // LotusGuild'; + +function viewPath(view) { + const file = path.join(PAGES_DIR, `${view}.ejs`); + return fs.existsSync(file) ? file : STUB; +} + +// Render a page view inside the shared layout. +async function renderPage(req, res, view, locals = {}) { + const data = Object.assign({ + user: req.user || null, + nonce: res.locals && res.locals.nonce, + appName: APP_NAME, + appSubtitle: APP_SUBTITLE, + csrfToken: '', + navLinks, + pageTitle: '', + activeNav: '', + pageStyles: [], + pageScripts: [], + pageConfig: {}, + assetVersion + }, locals); + + const opts = { cache: CACHE, filename: viewPath(view) }; + const body = await ejs.renderFile(viewPath(view), data, opts); + const html = await ejs.renderFile(LAYOUT, Object.assign({}, data, { body }), { + cache: CACHE, + filename: LAYOUT + }); + + res.set('Content-Type', 'text/html; charset=utf-8'); + res.send(html); + return html; +} + +function esc(s) { + return String(s).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); +} + +// Small self-contained themed page for 401/403/404/500. +function renderError(req, res, status, title, message) { + const html = ` + + + + + +${esc(status)} — ${esc(APP_NAME)} + + + +
+
+
+ ${esc(status)} — ${esc(title)} +

${esc(message)}

+
+

Return to dashboard

+
+
+ + +`; + res.status(status).set('Content-Type', 'text/html; charset=utf-8').send(html); +} + +module.exports = { renderPage, renderError, assetVersion }; diff --git a/package-lock.json b/package-lock.json index b36cc65..90f9de9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,8 +11,10 @@ "dependencies": { "cron-parser": "^5.5.0", "dotenv": "^17.2.3", + "ejs": "3.1.10", "express": "^5.1.0", "express-rate-limit": "^8.3.1", + "helmet": "8.1.0", "mysql2": "^3.15.3", "ws": "^8.18.3" }, @@ -1305,6 +1307,12 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, + "node_modules/async": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", + "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==", + "license": "MIT" + }, "node_modules/aws-ssl-profiles": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/aws-ssl-profiles/-/aws-ssl-profiles-1.1.2.tgz", @@ -1427,8 +1435,7 @@ "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "dev": true + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "node_modules/baseline-browser-mapping": { "version": "2.10.19", @@ -1930,6 +1937,21 @@ "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==", "license": "MIT" }, + "node_modules/ejs": { + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz", + "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==", + "license": "Apache-2.0", + "dependencies": { + "jake": "^10.8.5" + }, + "bin": { + "ejs": "bin/cli.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/electron-to-chromium": { "version": "1.5.336", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.336.tgz", @@ -2349,6 +2371,36 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/filelist": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.6.tgz", + "integrity": "sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA==", + "license": "Apache-2.0", + "dependencies": { + "minimatch": "^5.0.1" + } + }, + "node_modules/filelist/node_modules/brace-expansion": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz", + "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==", + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/filelist/node_modules/minimatch": { + "version": "5.1.9", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz", + "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==", + "license": "ISC", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", @@ -2651,6 +2703,15 @@ "node": ">= 0.4" } }, + "node_modules/helmet": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz", + "integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==", + "license": "MIT", + "engines": { + "node": ">=18.0.0" + } + }, "node_modules/html-escaper": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", @@ -2975,6 +3036,23 @@ "node": ">=8" } }, + "node_modules/jake": { + "version": "10.9.4", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz", + "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==", + "license": "Apache-2.0", + "dependencies": { + "async": "^3.2.6", + "filelist": "^1.0.4", + "picocolors": "^1.1.1" + }, + "bin": { + "jake": "bin/cli.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz", @@ -4118,8 +4196,7 @@ "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", - "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", - "dev": true + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==" }, "node_modules/picomatch": { "version": "2.3.2", diff --git a/package.json b/package.json index 60bb53c..b9380d1 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,10 @@ "dependencies": { "cron-parser": "^5.5.0", "dotenv": "^17.2.3", + "ejs": "3.1.10", "express": "^5.1.0", "express-rate-limit": "^8.3.1", + "helmet": "8.1.0", "mysql2": "^3.15.3", "ws": "^8.18.3" }, diff --git a/public/.eslintrc.json b/public/.eslintrc.json index a34f275..4430902 100644 --- a/public/.eslintrc.json +++ b/public/.eslintrc.json @@ -1,6 +1,13 @@ { "env": { "browser": true, "es2021": true }, "parserOptions": { "ecmaVersion": 2021, "sourceType": "script" }, + "globals": { + "lt": "readonly", + "Pulse": "writable", + "CSRF_TOKEN": "readonly", + "CURRENT_USER": "readonly", + "PULSE_CONFIG": "readonly" + }, "rules": { "no-unused-vars": "warn", "no-empty": "warn", diff --git a/public/assets/app.css b/public/assets/app.css new file mode 100644 index 0000000..ef5b0b9 --- /dev/null +++ b/public/assets/app.css @@ -0,0 +1,151 @@ +/* ===================================================================== + PULSE — shell additions on top of /web_template/base.css + --------------------------------------------------------------------- + Rules here are Pulse-specific only. No `.lt-*` base rule is redefined; + `.lt-*` selectors appear only as ancestors/descendants of a `.pulse-*` + class, or as scoped layout tweaks inside the Pulse header cluster. + Page-specific styles live in /assets/pages/.css. + ===================================================================== */ + +/* --------------------------------------------------------------------- + 1. Header right cluster — WS status, last-refreshed stamp, buttons + --------------------------------------------------------------------- */ +.pulse-header-right, +.lt-header-right:has(#pulse-ws-status) { + display: flex; + align-items: center; + justify-content: flex-end; + flex-wrap: wrap; + gap: var(--space-sm); + min-width: 0; + row-gap: 2px; +} + +#pulse-last-refreshed { + font-family: var(--font-mono); + font-size: 0.68rem; + letter-spacing: 0.04em; + color: var(--text-dim); + white-space: nowrap; + flex-shrink: 0; +} + +/* The stamp is the first thing to go when space runs out. */ +@media (max-width: 767px) { + #pulse-last-refreshed { display: none; } +} + +@media (max-width: 479px) { + .pulse-header-right, + .lt-header-right:has(#pulse-ws-status) { gap: var(--space-xs); } +} + +/* --------------------------------------------------------------------- + 2. Confirm / alert modal (built by Pulse.confirm / Pulse.alertModal) + --------------------------------------------------------------------- */ +.pulse-confirm .lt-modal-header { border-bottom: 1px solid var(--border-color); } +.pulse-confirm .pulse-confirm-msg { + margin: 0; + font-size: 0.82rem; + line-height: 1.55; + color: var(--text-secondary); + overflow-wrap: anywhere; +} +.pulse-confirm .lt-modal-footer { gap: var(--space-sm); } + +.pulse-confirm--warning .lt-modal { border-top: 2px solid var(--accent-amber); } +.pulse-confirm--error .lt-modal { border-top: 2px solid var(--accent-red); } +.pulse-confirm--info .lt-modal { border-top: 2px solid var(--accent-cyan); } + +/* --------------------------------------------------------------------- + 3. Compact meta line (base.css already provides .lt-kv-grid for + key/value blocks — use that; this is only for inline meta strings) + --------------------------------------------------------------------- */ +.pulse-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--space-xs) var(--space-md); + font-family: var(--font-mono); + font-size: 0.7rem; + color: var(--text-dim); +} +.pulse-meta > span { white-space: nowrap; } +.pulse-meta-label { + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-muted); +} +.pulse-meta-val { color: var(--text-secondary); } + +/* --------------------------------------------------------------------- + 4. Log viewer wrapper — caps the height of a long .lt-log-output run + --------------------------------------------------------------------- */ +.pulse-log { + max-height: 420px; + overflow-y: auto; + overflow-x: auto; + background: var(--bg-terminal); + border: 1px solid var(--border-dim); + padding: var(--space-sm); +} +.pulse-log .lt-log-output { + white-space: pre-wrap; + overflow-wrap: anywhere; +} +.pulse-log--sm { max-height: 220px; } +.pulse-log--lg { max-height: 60vh; } + +@media (max-width: 767px) { + .pulse-log { max-height: 300px; } +} + +/* --------------------------------------------------------------------- + 5. Running rows — amber left-border pulse (port of exec-running-pulse) + --------------------------------------------------------------------- */ +.pulse-running { + border-left: 2px solid var(--accent-amber); + animation: pulse-running-border 2s ease-in-out infinite; +} + +@keyframes pulse-running-border { + 0%, 100% { border-left-color: var(--accent-green); box-shadow: none; } + 50% { border-left-color: var(--accent-amber); box-shadow: -2px 0 8px rgba(255, 179, 0, 0.35); } +} + +@media (prefers-reduced-motion: reduce) { + .pulse-running { + animation: none; + border-left-color: var(--accent-amber); + } +} + +/* --------------------------------------------------------------------- + 6. Utilities + --------------------------------------------------------------------- */ +.is-hidden { display: none !important; } + +.pulse-nowrap { white-space: nowrap; } +.pulse-mono { font-family: var(--font-mono); } +.pulse-dim { color: var(--text-dim); } +.pulse-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } + +/* --------------------------------------------------------------------- + 7. Light theme overrides for the additions above + --------------------------------------------------------------------- */ +html[data-theme="light"] #pulse-last-refreshed { color: var(--text-muted); } + +html[data-theme="light"] .pulse-confirm .pulse-confirm-msg { color: var(--text-secondary); } + +html[data-theme="light"] .pulse-log { + background: var(--bg-tertiary); + border-color: var(--border-color); +} + +html[data-theme="light"] .pulse-meta { color: var(--text-muted); } +html[data-theme="light"] .pulse-meta-val { color: var(--text-primary); } +html[data-theme="light"] .pulse-dim { color: var(--text-muted); } + +html[data-theme="light"] .pulse-running { + box-shadow: none; +} diff --git a/public/assets/app.js b/public/assets/app.js new file mode 100644 index 0000000..4dcf3b9 --- /dev/null +++ b/public/assets/app.js @@ -0,0 +1,685 @@ +/* ===================================================================== + PULSE — shared frontend shell (WP-B) + --------------------------------------------------------------------- + Loaded after /web_template/base.js and before /assets/pages/.js. + Exposes the frozen `window.Pulse` contract consumed by page modules. + ===================================================================== */ +'use strict'; + +/* --------------------------------------------------------------------- + 0. 401 → reload wrapper. Installed first, before anything can fetch. + Authelia sessions expire; a 401 means "log in again", so force a full + document reload which bounces through the SSO portal. + --------------------------------------------------------------------- */ +(function () { + const _fetch = window.fetch; + if (typeof _fetch !== 'function' || _fetch.__pulseWrapped) return; + const wrapped = async function (...args) { + const resp = await _fetch.apply(window, args); + if (resp.status === 401) { + window.location.reload(); + throw new Error('Session expired — reloading'); + } + return resp; + }; + wrapped.__pulseWrapped = true; + window.fetch = wrapped; +})(); + +(function (global) { + const LOG = '[Pulse]'; + const noopLt = {}; + /** base.js is a hard dependency, but never let its absence blank the page. */ + function LT() { return global.lt || noopLt; } + + function warn() { + const a = Array.prototype.slice.call(arguments); + console.warn.apply(console, [LOG].concat(a)); + } + function err() { + const a = Array.prototype.slice.call(arguments); + console.error.apply(console, [LOG].concat(a)); + } + + /* ------------------------------------------------------------------- + 1. Escaping / formatting helpers + Output formats are byte-compatible with the pre-redesign index.html + helpers so page modules render identical strings. + ------------------------------------------------------------------- */ + function esc(text) { + if (text === null || text === undefined) return ''; + if (LT().escHtml) return LT().escHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + /** null for falsy/invalid, otherwise a Date. */ + function safeDate(val) { + if (!val) return null; + const d = val instanceof Date ? val : new Date(val); + return isNaN(d.getTime()) ? null : d; + } + + /** '0 B' for falsy; one decimal otherwise. */ + function formatBytes(bytes) { + if (!bytes || bytes === 0) return '0 B'; + const k = 1024; + const sizes = ['B', 'KB', 'MB', 'GB', 'TB']; + const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1); + return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i]; + } + + /** 'Nd Nh Nm' / 'Nh Nm' / 'Nm'; 'N/A' for falsy. */ + function formatUptime(seconds) { + if (!seconds) return 'N/A'; + const days = Math.floor(seconds / 86400); + const hours = Math.floor((seconds % 86400) / 3600); + const minutes = Math.floor((seconds % 3600) / 60); + if (days > 0) return days + 'd ' + hours + 'h ' + minutes + 'm'; + if (hours > 0) return hours + 'h ' + minutes + 'm'; + return minutes + 'm'; + } + + /** 'Ns ago' / 'Nm ago' / 'Nh ago' / 'Nd ago'; 'just now' if in the future. */ + function timeAgo(date) { + const d = date instanceof Date ? date : safeDate(date); + if (!d || isNaN(d.getTime())) return 'N/A'; + const seconds = Math.floor((Date.now() - d.getTime()) / 1000); + if (seconds < 0) return 'just now'; + if (seconds < 60) return seconds + 's ago'; + const minutes = Math.floor(seconds / 60); + if (minutes < 60) return minutes + 'm ago'; + const hours = Math.floor(minutes / 60); + if (hours < 24) return hours + 'h ago'; + return Math.floor(hours / 24) + 'd ago'; + } + + /** 'Ns' / 'Nm Ns' / 'Nh Nm'; '' when startedAt is unusable. */ + function formatElapsed(startedAt) { + const start = safeDate(startedAt); + if (!start) return ''; + const secs = Math.floor((Date.now() - start.getTime()) / 1000); + if (secs < 60) return secs + 's'; + const mins = Math.floor(secs / 60); + if (mins < 60) return mins + 'm ' + (secs % 60) + 's'; + return Math.floor(mins / 60) + 'h ' + (mins % 60) + 'm'; + } + + /** HH:MM:SS in local time. */ + function clock(d) { + const date = d instanceof Date ? d : (safeDate(d) || new Date()); + const p = n => String(n).padStart(2, '0'); + return p(date.getHours()) + ':' + p(date.getMinutes()) + ':' + p(date.getSeconds()); + } + + /** toLocaleString(), or 'N/A'. */ + function dateTime(val) { + const d = safeDate(val); + return d ? d.toLocaleString() : 'N/A'; + } + + const STATUS_CLASSES = { + online: 'online', + offline: 'offline', + running: 'running', + completed: 'completed', + failed: 'failed', + waiting: 'pending', + }; + /** Badge classes for a status string. */ + function statusClass(status) { + const key = String(status || '').toLowerCase(); + return 'lt-status lt-status-' + (STATUS_CLASSES[key] || 'pending'); + } + + const fmt = { + elapsed: formatElapsed, + safeDate: safeDate, + bytes: formatBytes, + uptime: formatUptime, + ago: timeAgo, + clock: clock, + dateTime: dateTime, + status: statusClass, + }; + + /* ------------------------------------------------------------------- + 2. Small utilities + ------------------------------------------------------------------- */ + function download(filename, text, mime) { + try { + const blob = new Blob([text], { type: mime || 'text/plain;charset=utf-8' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = filename || 'download.txt'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + setTimeout(() => URL.revokeObjectURL(url), 1000); + } catch (e) { + err('download failed', e); + } + } + + /* Verbatim localStorage keys — `commandHistory` and `pulse_executionView` + must keep working across the redesign, so NO prefix is applied. */ + const storage = { + get(key, fallback) { + try { + const raw = localStorage.getItem(key); + if (raw === null) return fallback !== undefined ? fallback : null; + return JSON.parse(raw); + } catch (e) { + return fallback !== undefined ? fallback : null; + } + }, + set(key, value) { + try { + localStorage.setItem(key, JSON.stringify(value)); + return true; + } catch (e) { + warn('storage.set failed for', key, e); + return false; + } + }, + remove(key) { + try { localStorage.removeItem(key); } catch (e) { /* ignore */ } + }, + }; + + /* ------------------------------------------------------------------- + 3. Event bus (Pulse-local, independent of lt.bus) + ------------------------------------------------------------------- */ + const _handlers = new Map(); + const events = { + on(type, fn) { + if (typeof fn !== 'function') return; + if (!_handlers.has(type)) _handlers.set(type, []); + _handlers.get(type).push(fn); + }, + off(type, fn) { + const list = _handlers.get(type); + if (list) _handlers.set(type, list.filter(f => f !== fn)); + }, + emit(type, data) { + const list = _handlers.get(type); + if (!list || !list.length) return; + list.slice().forEach(fn => { + try { fn(data, type); } catch (e) { err('event handler for "' + type + '"', e); } + }); + }, + }; + + /* ------------------------------------------------------------------- + 4. Action registry + delegated listeners + ------------------------------------------------------------------- */ + const _actions = Object.create(null); + const _warned = Object.create(null); + + const actions = { + register(name, fn) { + if (!name || typeof fn !== 'function') { warn('actions.register: bad arguments', name); return; } + if (_actions[name]) warn('action "' + name + '" re-registered'); + _actions[name] = fn; + }, + registerAll(map) { + Object.keys(map || {}).forEach(name => actions.register(name, map[name])); + }, + has(name) { return !!_actions[name]; }, + names() { return Object.keys(_actions); }, + }; + + function runAction(name, el, ev) { + const fn = _actions[name]; + if (!fn) { + if (!_warned[name]) { _warned[name] = true; warn('unknown action "' + name + '"'); } + return; + } + try { + const r = fn(el, ev); + if (r && typeof r.catch === 'function') { + r.catch(e => err('action "' + name + '" rejected', e)); + } + } catch (e) { + err('action "' + name + '" threw', e); + } + } + + function isDisabled(el) { + return el.disabled === true || el.getAttribute('aria-disabled') === 'true' || el.classList.contains('is-disabled'); + } + + function installDelegation() { + document.addEventListener('click', function (ev) { + let el; + try { el = ev.target.closest && ev.target.closest('[data-action]'); } catch (e) { return; } + if (!el) return; + if (isDisabled(el)) { ev.preventDefault(); return; } + const tag = el.tagName; + if ((tag === 'A' && (el.getAttribute('href') === '#' || el.getAttribute('href') === '')) || + (tag === 'BUTTON' && el.form && !el.getAttribute('type'))) { + ev.preventDefault(); + } + runAction(el.getAttribute('data-action'), el, ev); + }); + + document.addEventListener('change', function (ev) { + let el; + try { el = ev.target.closest && ev.target.closest('[data-change-action]'); } catch (e) { return; } + if (!el || isDisabled(el)) return; + runAction(el.getAttribute('data-change-action'), el, ev); + }); + + /* Per-element 200 ms debounce, so two search boxes never share a timer. */ + const _debounced = new WeakMap(); + document.addEventListener('input', function (ev) { + let el; + try { el = ev.target.closest && ev.target.closest('[data-input-action]'); } catch (e) { return; } + if (!el || isDisabled(el)) return; + let fn = _debounced.get(el); + if (!fn) { + const mk = LT().debounce || function (f, ms) { + let t; + return function () { + const a = arguments, c = this; + clearTimeout(t); + t = setTimeout(() => f.apply(c, a), ms); + }; + }; + fn = mk(function (e) { runAction(el.getAttribute('data-input-action'), el, e); }, 200); + _debounced.set(el, fn); + } + fn(ev); + }); + + document.addEventListener('submit', function (ev) { + let el; + try { el = ev.target.closest && ev.target.closest('form[data-submit-action]'); } catch (e) { return; } + if (!el) return; + ev.preventDefault(); + runAction(el.getAttribute('data-submit-action'), el, ev); + }); + } + + /* ------------------------------------------------------------------- + 5. Confirm / alert modals (ported from tinker_tickets utils.js) + ------------------------------------------------------------------- */ + const MODAL_COLORS = { + warning: 'var(--accent-amber)', + error: 'var(--accent-red)', + info: 'var(--accent-cyan)', + }; + const MODAL_ICONS = { warning: '[ ! ]', error: '[ X ]', info: '[ i ]' }; + let _modalSeq = 0; + + function buildModal(opts, withCancel) { + const o = opts || {}; + const type = MODAL_ICONS[o.type] ? o.type : 'warning'; + const id = 'pulse-confirm-' + (++_modalSeq) + '-' + Date.now(); + const color = MODAL_COLORS[type]; + const icon = MODAL_ICONS[type]; + const title = esc(o.title || (withCancel ? 'Confirm' : 'Notice')); + const message = esc(o.message === null || o.message === undefined ? '' : o.message).replace(/\n/g, '
'); + const confirmLabel = esc(o.confirmLabel || (withCancel ? 'CONFIRM' : 'OK')); + const cancelLabel = esc(o.cancelLabel || 'CANCEL'); + const confirmClass = type === 'error' ? 'lt-btn lt-btn-danger' : 'lt-btn lt-btn-primary'; + + const html = + ''; + + document.body.insertAdjacentHTML('beforeend', html); + return { id: id, el: document.getElementById(id), type: type }; + } + + function openModalEl(built, settle) { + const el = built.el; + let done = false; + function finish(result) { + if (done) return; + done = true; + try { + if (LT().modal && el.classList.contains('is-open')) LT().modal.close(el); + else el.classList.remove('is-open'); + } catch (e) { err('modal close failed', e); } + setTimeout(() => { if (el && el.parentNode) el.parentNode.removeChild(el); }, 300); + settle(result); + } + /* ESC and backdrop clicks are handled globally by base.js, which fires + lt:modalclose — treat both as a cancel. */ + el.addEventListener('lt:modalclose', () => finish(false)); + return finish; + } + + function confirmModal(opts) { + return new Promise(resolve => { + let built; + try { built = buildModal(opts, true); } catch (e) { err('confirm build failed', e); resolve(false); return; } + const finish = openModalEl(built, resolve); + const confirmBtn = document.getElementById(built.id + '-confirm'); + const cancelBtn = document.getElementById(built.id + '-cancel'); + if (confirmBtn) confirmBtn.addEventListener('click', () => finish(true)); + if (cancelBtn) cancelBtn.addEventListener('click', () => finish(false)); + try { if (LT().modal) LT().modal.open(built.el); else built.el.classList.add('is-open'); } catch (e) { err(e); } + /* Destructive prompts should not have CONFIRM under the cursor/keyboard. */ + if ((built.type === 'error' || built.type === 'warning') && cancelBtn) { + setTimeout(() => { try { cancelBtn.focus(); } catch (e) { /* ignore */ } }, 60); + } + }); + } + + function alertModal(opts) { + return new Promise(resolve => { + let built; + try { built = buildModal(opts, false); } catch (e) { err('alert build failed', e); resolve(); return; } + const finish = openModalEl(built, () => resolve()); + const okBtn = document.getElementById(built.id + '-confirm'); + if (okBtn) okBtn.addEventListener('click', () => finish(true)); + try { if (LT().modal) LT().modal.open(built.el); else built.el.classList.add('is-open'); } catch (e) { err(e); } + }); + } + + /* ------------------------------------------------------------------- + 6. Page registration & refresh + ------------------------------------------------------------------- */ + let _booted = false; + let _pageInited = false; + + function registerPage(page) { + if (!page || typeof page !== 'object') { warn('registerPage: expected an object'); return; } + Pulse.page = page; + if (_booted) initPage(); + } + + async function initPage() { + const page = Pulse.page; + if (!page || _pageInited) return; + _pageInited = true; + if (typeof page.init !== 'function') return; + try { + await page.init(); + } catch (e) { + err('page init failed', e); + toastSafe('error', 'Page failed to initialise'); + } + } + + function toastSafe(kind, msg) { + try { + const t = LT().toast; + if (t && t[kind]) t[kind](msg); + else console.log(LOG, kind + ':', msg); + } catch (e) { /* never let a toast break a handler */ } + } + + function stampRefreshed() { + const el = document.getElementById('pulse-last-refreshed'); + if (el) el.textContent = 'Refreshed: ' + clock(new Date()); + } + + async function refreshNow() { + const page = Pulse.page; + if (page && typeof page.refresh === 'function') { + try { + await page.refresh(); + } catch (e) { + err('page refresh failed', e); + toastSafe('error', 'Refresh failed'); + } + } + stampRefreshed(); + } + + /* ------------------------------------------------------------------- + 7. WebSocket + ------------------------------------------------------------------- */ + const KNOWN_TYPES = [ + 'command_result', 'workflow_result', 'worker_update', 'execution_started', + 'execution_status', 'workflow_created', 'workflow_deleted', 'workflow_updated', + 'execution_prompt', 'executions_bulk_deleted', + ]; + + let _wsHandle = null; + let _wasDisconnected = false; + + function wsUrl() { + const proto = location.protocol === 'https:' ? 'wss:' : 'ws:'; + return proto + '//' + location.host; + } + + function setWsStatus(state) { + const el = document.getElementById('pulse-ws-status'); + if (!el) return; + el.setAttribute('data-state', state); + const labels = { connected: 'Connected', connecting: 'Connecting…', disconnected: 'Disconnected' }; + const span = el.querySelector('span:last-child'); + if (span) span.textContent = labels[state] || state; + } + + function handleWsMessage(data) { + try { + if (!data || typeof data !== 'object' || !data.type) return; + + if (data.type === 'command_result' && !data.is_automated) { + if (data.success) toastSafe('success', 'Command completed successfully'); + else toastSafe('error', 'Command execution failed'); + } + + let handled = false; + const page = Pulse.page; + if (page && typeof page.onEvent === 'function') { + try { + handled = page.onEvent(data.type, data) === true; + } catch (e) { + err('page onEvent failed for "' + data.type + '"', e); + } + } + + events.emit(data.type, data); + + if (KNOWN_TYPES.indexOf(data.type) === -1 && !handled) { + refreshNow(); + } + } catch (e) { + err('WebSocket message handling failed', e); + } + } + + function onWsOpen() { + setWsStatus('connected'); + if (_wasDisconnected) { + _wasDisconnected = false; + toastSafe('info', 'Live updates reconnected'); + refreshNow(); + } + } + + function onWsClose() { + _wasDisconnected = true; + setWsStatus('disconnected'); + } + + /** Raw-WebSocket fallback used only when lt.ws is missing. */ + function connectRawWs() { + let sock; + function open() { + setWsStatus('connecting'); + try { sock = new WebSocket(wsUrl()); } catch (e) { err('WebSocket create failed', e); setTimeout(open, 5000); return; } + sock.addEventListener('open', onWsOpen); + sock.addEventListener('message', ev => { + let data = ev.data; + try { data = JSON.parse(ev.data); } catch (e) { /* non-JSON frame */ } + handleWsMessage(data); + }); + sock.addEventListener('close', () => { onWsClose(); setTimeout(open, 5000); }); + sock.addEventListener('error', e => warn('WebSocket error', e)); + } + open(); + return { send(d) { if (sock && sock.readyState === 1) { sock.send(typeof d === 'string' ? d : JSON.stringify(d)); return true; } return false; } }; + } + + function connectWs() { + try { + if (LT().ws && typeof LT().ws.connect === 'function') { + _wsHandle = LT().ws.connect(wsUrl(), { + statusEl: '#pulse-ws-status', + reconnect: true, + reconnectDelay: 2000, + maxRetries: Number.MAX_SAFE_INTEGER, + onOpen: onWsOpen, + onClose: onWsClose, + onError: e => warn('WebSocket error', e), + onMessage: handleWsMessage, + }); + } else { + warn('lt.ws unavailable — using raw WebSocket fallback'); + _wsHandle = connectRawWs(); + } + } catch (e) { + err('WebSocket setup failed', e); + try { _wsHandle = connectRawWs(); } catch (e2) { err('WebSocket fallback failed', e2); } + } + } + + /* ------------------------------------------------------------------- + 8. Boot + ------------------------------------------------------------------- */ + const NAV_ROUTES = [ + { id: 'nav-dashboard', label: 'Dashboard', path: '/', tags: ['home', 'overview'] }, + { id: 'nav-workers', label: 'Workers', path: '/workers', tags: ['agents', 'hosts'] }, + { id: 'nav-workflows', label: 'Workflows', path: '/workflows', tags: ['jobs'] }, + { id: 'nav-executions', label: 'Executions', path: '/executions', tags: ['history', 'logs', 'runs'] }, + { id: 'nav-quick', label: 'Quick Command', path: '/quick', tags: ['run', 'shell', 'command'] }, + { id: 'nav-scheduler', label: 'Scheduler', path: '/scheduler', tags: ['cron', 'schedule'] }, + ]; + + function openKeysHelp() { + const help = document.getElementById('lt-keys-help'); + if (help && LT().modal) LT().modal.open(help); + } + + function buildCommands() { + const cmds = NAV_ROUTES.map(r => ({ + id: r.id, + label: r.label, + icon: '→', + group: 'Navigate', + tags: r.tags, + action: () => { window.location.href = r.path; }, + })); + cmds.push( + { id: 'act-refresh', label: 'Refresh', icon: '⟳', group: 'Actions', kbd: 'R', tags: ['reload'], action: () => refreshNow() }, + { id: 'act-theme', label: 'Toggle Theme', icon: '◐', group: 'Actions', tags: ['dark', 'light'], action: () => { if (LT().theme) LT().theme.toggle(); } }, + { id: 'help-keys', label: 'Keyboard Shortcuts', icon: '?', group: 'Help', kbd: '?', tags: ['keys', 'shortcuts'], action: openKeysHelp } + ); + return cmds; + } + + let _tickTimer = null; + function startTicker() { + if (_tickTimer) return; + _tickTimer = setInterval(() => { + if (document.hidden) return; // cheap: no work while backgrounded + if (!_handlers.has('tick')) return; + events.emit('tick'); + }, 1000); + } + + function boot() { + if (_booted) return; + _booted = true; + + try { if (LT().init) LT().init({ bootName: 'PULSE' }); } catch (e) { err('lt.init failed', e); } + + const themeBtn = document.getElementById('lt-theme-btn'); + if (themeBtn) themeBtn.addEventListener('click', () => { if (LT().theme) LT().theme.toggle(); }); + + try { if (LT().cmdPalette) LT().cmdPalette.init(buildCommands()); } catch (e) { err('cmdPalette init failed', e); } + + try { + if (LT().keys) { + LT().keys.on('r', () => refreshNow()); + LT().keys.on('?', openKeysHelp); + } + } catch (e) { err('key binding failed', e); } + + connectWs(); + startTicker(); + + initPage(); + + /* The ONLY autoRefresh registration in the whole app. Page modules must + never call lt.autoRefresh — they get refreshed through page.refresh(). */ + try { + if (LT().autoRefresh) LT().autoRefresh.start(() => refreshNow(), 30000); + } catch (e) { err('autoRefresh start failed', e); } + } + + /* ------------------------------------------------------------------- + 9. Public surface + ------------------------------------------------------------------- */ + const Pulse = { + user: global.CURRENT_USER || { username: '', name: '', email: '', groups: [], isAdmin: false }, + isAdmin: false, + config: global.PULSE_CONFIG || {}, + page: null, + + actions: actions, + events: events, + registerPage: registerPage, + refreshNow: refreshNow, + confirm: confirmModal, + alertModal: alertModal, + + get api() { return LT().api; }, + get toast() { return LT().toast; }, + get beep() { return LT().beep; }, + esc: esc, + fmt: fmt, + util: { download: download, storage: storage }, + + /** Escape hatch for pages that need to push a frame upstream. */ + ws: { send(d) { return _wsHandle && _wsHandle.send ? _wsHandle.send(d) : false; }, get handle() { return _wsHandle; } }, + }; + + Pulse.isAdmin = !!(Pulse.user && Pulse.user.isAdmin) || !!(Pulse.config && Pulse.config.isAdmin); + + global.Pulse = Pulse; + + /* Reserved global actions (unprefixed namespace belongs to app.js). */ + actions.registerAll({ + 'app:refresh': () => refreshNow(), + 'app:theme': () => { if (LT().theme) LT().theme.toggle(); }, + 'open-nav-drawer': () => { if (LT().mobileNav) LT().mobileNav.open(); }, + 'open-cmdpalette': () => { if (LT().cmdPalette) LT().cmdPalette.open(); }, + 'app:keys-help': openKeysHelp, + }); + + installDelegation(); + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', boot); + } else { + /* Script ran after parsing (deferred/injected): boot on the next tick so a + page module loaded right after us can still register before init(). */ + setTimeout(boot, 0); + } +})(window); diff --git a/public/assets/favicon.png b/public/assets/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..75ed13f3afef22588c7e59850d116dd5b4fdf640 GIT binary patch literal 182 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1SJ1Ryj={WYCT;XLn>~)z2?YuK!L~QVuQ$@ z)!*Z{vn~|L-8%Ek8l4^g@(L%iZYaY|OM}nNzA5@LKCZwJhVhT`W7U|6~X# zXYifN^QBZxVCDJ7|GHY1^Uae w.status === 'online').length; + const offline = total - online; + const set = (id, val) => { + const el = document.getElementById(id); + if (el) el.textContent = String(val); + }; + set('dash-stat-total-val', total); + set('dash-stat-online-val', online); + set('dash-stat-offline-val', offline); + set('dash-stat-running-val', runningTotal); + } + + /* ------------------------------------------------------------------- + Recent executions (5 most recent manual runs) + ------------------------------------------------------------------- */ + function executionRowHtml(e) { + const statusClass = fmt.status(e.status); + const statusText = esc(String(e.status || '').toUpperCase()); + const name = e.workflow_name ? esc(e.workflow_name) : '[Quick Command]'; + const startedBy = esc(e.started_by || ''); + const startedAt = fmt.dateTime(e.started_at); + const isRunning = String(e.status || '').toLowerCase() === 'running'; + const elapsed = isRunning ? esc(fmt.elapsed(e.started_at)) : '—'; + return ( + '' + + '' + statusText + '' + + '' + name + '' + + '' + startedBy + '' + + '' + esc(startedAt) + '' + + '' + elapsed + '' + + '' + ); + } + + function renderExecutions(executions) { + const wrap = document.getElementById('dash-executions-wrap'); + if (!wrap) return; + const manual = executions.filter(e => !isAutomated(e)).slice(0, 5); + if (manual.length === 0) { + wrap.innerHTML = + '
' + + '
No executions yet
' + + '
'; + return; + } + wrap.innerHTML = + '' + + '' + + '' + manual.map(executionRowHtml).join('') + '' + + '
StatusNameStarted ByStarted AtElapsed
'; + } + + /* ------------------------------------------------------------------- + Workers summary + ------------------------------------------------------------------- */ + function workerRowHtml(w) { + const meta = parseMeta(w); + const dotClass = w.status === 'online' ? 'lt-dot-up' : 'lt-dot-down'; + const statusClass = fmt.status(w.status); + const lastSeen = fmt.ago(w.last_heartbeat); + let stats = ''; + if (meta) { + stats = + 'CPU: ' + esc(meta.cpus || '?') + ' cores' + + 'RAM: ' + fmt.bytes(meta.totalMem - meta.freeMem) + ' / ' + fmt.bytes(meta.totalMem) + '' + + 'Tasks: ' + esc(meta.activeTasks || 0) + '/' + esc(meta.maxConcurrentTasks || 0) + ''; + } + return ( + '
' + + '
' + + '' + + '' + esc(w.name) + '' + + '' + esc(String(w.status || '').toUpperCase()) + '' + + 'Last seen: ' + esc(lastSeen) + '' + + '
' + + (stats ? '
' + stats + '
' : '') + + '
' + ); + } + + function renderWorkers(workers) { + const wrap = document.getElementById('dash-workers-wrap'); + if (!wrap) return; + if (workers.length === 0) { + wrap.innerHTML = + '
' + + '
No workers connected
' + + '
'; + return; + } + wrap.innerHTML = '
' + workers.map(workerRowHtml).join('') + '
'; + } + + /* ------------------------------------------------------------------- + Live tick — update elapsed times on running rows and worker last-seen + ------------------------------------------------------------------- */ + function onTick() { + document.querySelectorAll('#dash-executions-wrap .dash-elapsed[data-started-at]').forEach(el => { + el.textContent = fmt.elapsed(el.getAttribute('data-started-at')); + }); + document.querySelectorAll('#dash-workers-wrap .dash-worker-lastseen[data-last-heartbeat]').forEach(el => { + const v = el.getAttribute('data-last-heartbeat'); + if (v) el.textContent = 'Last seen: ' + fmt.ago(v); + }); + } + + /* ------------------------------------------------------------------- + Data loading + ------------------------------------------------------------------- */ + async function loadWorkers() { + try { + _workers = await Pulse.api.get('/api/workers') || []; + } catch (e) { + _workers = []; + console.error('[Pulse:dashboard] failed to load workers', e); + } + renderWorkers(_workers); + return _workers; + } + + async function loadExecutions() { + try { + const data = await Pulse.api.get('/api/executions?limit=50&hide_internal=true'); + _executions = (data && data.executions) || []; + } catch (e) { + _executions = []; + console.error('[Pulse:dashboard] failed to load executions', e); + } + renderExecutions(_executions); + return _executions; + } + + async function loadRunningCount() { + try { + const data = await Pulse.api.get('/api/executions?status=running&limit=1'); + return (data && data.total) || 0; + } catch (e) { + console.error('[Pulse:dashboard] failed to load running count', e); + return 0; + } + } + + async function refresh() { + const [workers, , runningTotal] = await Promise.all([ + loadWorkers(), + loadExecutions(), + loadRunningCount(), + ]); + renderStats(workers, runningTotal); + } + + function init() { + Pulse.actions.registerAll({ + 'dash:goto-workers': () => { window.location.href = '/workers'; }, + 'dash:goto-executions': () => { window.location.href = '/executions'; }, + 'dash:open-execution': (el) => { + const id = el.getAttribute('data-execution-id'); + if (id) window.location.href = '/executions?open=' + encodeURIComponent(id); + }, + }); + Pulse.events.on('tick', onTick); + return refresh(); + } + + function onEvent(type) { + if (type === 'worker_update') { + Promise.all([loadWorkers(), loadRunningCount()]).then(([workers, rt]) => renderStats(workers, rt)); + return true; + } + if (type === 'execution_started' || type === 'execution_status' || + type === 'command_result' || type === 'workflow_result' || + type === 'executions_bulk_deleted') { + Promise.all([loadExecutions(), loadRunningCount()]).then(([, rt]) => renderStats(_workers, rt)); + return true; + } + return false; + } + + Pulse.registerPage({ name: 'dashboard', init, refresh, onEvent }); +})(); diff --git a/public/web_template/VERSION b/public/web_template/VERSION new file mode 100644 index 0000000..68c13e8 --- /dev/null +++ b/public/web_template/VERSION @@ -0,0 +1 @@ +v1.2 bbec859 2026-09-09T01:34:49Z diff --git a/public/web_template/base.css b/public/web_template/base.css new file mode 100644 index 0000000..c606d1a --- /dev/null +++ b/public/web_template/base.css @@ -0,0 +1,5817 @@ +/* ================================================================ + LOTUSGUILD TERMINAL DESIGN SYSTEM v1.2 — base.css + Aesthetic: Anduril x Hacker Terminal — dark military-tech, + multi-accent neon, angular frames, glitch effects. + + Apps: Tinker Tickets (PHP), PULSE (Node.js), GANDALF (Flask) + Prefix: .lt-* (LotusGuild Terminal) + + TABLE OF CONTENTS + 01. CSS Custom Properties 27. Progress Bars + 02. Reset & Base 28. Tooltips + 03. CRT / Grid / Scanline 29. Breadcrumbs + 04. Typography 30. Pagination + 05. Layout Primitives 31. Accordion + 06. Header & Navigation 32. Alert Banners + 07. ASCII Frame System 33. Toggle Switch + 08. Card Component 34. Range Slider + 09. Buttons 35. File Upload / Dropzone + 10. Forms & Inputs 36. Command Palette + 11. Tables 37. Code Blocks + 12. Status Badges / Chips 38. Tags / Chips + 13. Modals 39. Notification Badges + 14. Toast Notifications 40. Stepper / Wizard + 15. Tab Navigation 41. List Groups + 16. Sidebar / Filter Panel 42. Key-Value Pairs + 17. Stats Widgets 43. Hero / Banner + 18. Inline Messages 44. Divider with Label + 19. Loading & Empty States 45. Custom Scrollbar + 20. Boot Sequence Overlay 46. Responsive Table Cards + 21. Log / Timeline Entries 47. Gauge / Meter + 22. Animations (keyframes) 48. Spinners / Loaders + 23. Responsive Design 49. Tab Bar + 24. Utility Classes 50. Utility Additions + 25. Print Styles + 26. Accessibility + ================================================================ */ + +/* ---------------------------------------------------------------- + 01. CSS CUSTOM PROPERTIES + ---------------------------------------------------------------- */ +:root { + /* --- Backgrounds --- */ + --bg-primary: #030508; + --bg-secondary: #060c14; + --bg-tertiary: #0d1520; + --bg-card: #07101a; + --bg-terminal: #010304; + --bg-overlay: rgba(3,5,8,0.94); + + /* --- Primary accent: Anduril Orange --- */ + --accent-orange: #FF6B00; + --accent-orange-bright: #FF8C2B; + --accent-orange-dim: rgba(255,107,0,0.12); + --accent-orange-border: rgba(255,107,0,0.35); + --accent-amber: #FFB300; + --accent-amber-dim: rgba(255,179,0,0.10); + + /* --- Secondary accent: Ice Cyan --- */ + --accent-cyan: #00D4FF; + --accent-cyan-bright: #33DFFF; + --accent-cyan-dim: rgba(0,212,255,0.10); + --accent-cyan-border: rgba(0,212,255,0.22); + + /* --- Tertiary accent: Matrix Green --- */ + --accent-green: #00FF88; + --accent-green-bright: #33FFAA; + --accent-green-dim: rgba(0,255,136,0.10); + --accent-green-border: rgba(0,255,136,0.22); + --shadow-color: rgba(0,0,0,0.5); + + /* --- Error / Critical --- */ + --accent-red: #FF2D55; + --accent-red-dim: rgba(255,45,85,0.12); + + /* --- Warning --- */ + --accent-gold: #FFD700; + --accent-gold-dim: rgba(255,215,0,0.10); + + /* --- Purple (admin / misc) --- */ + --accent-purple: #BF5FFF; + --accent-purple-dim: rgba(191,95,255,0.10); + + /* Legacy aliases — keeps all existing component HTML working */ + --terminal-green: var(--accent-green); + --terminal-green-dim: var(--accent-green-dim); + --terminal-green-dark: #00cc66; + --terminal-green-muted: #007744; + --terminal-amber: var(--accent-amber); + --terminal-amber-dim: var(--accent-amber-dim); + --terminal-cyan: var(--accent-cyan); + --terminal-cyan-dim: var(--accent-cyan-dim); + --terminal-red: var(--accent-red); + --terminal-red-dim: var(--accent-red-dim); + --terminal-orange: var(--accent-orange); + --terminal-orange-dim: var(--accent-orange-dim); + + /* --- Text --- */ + --text-primary: #c4d9ee; + --text-secondary: #7fa3bf; + --text-muted: #3e607a; + --text-dim: #1e3347; + + /* --- Borders --- */ + --border-color: rgba(0,212,255,0.16); + --border-color-hi: var(--accent-cyan); + --border-color-dim: rgba(0,212,255,0.07); + --border-dim: rgba(0,212,255,0.07); /* alias for v1.2+ components */ + --border-orange: var(--accent-orange-border); + + /* --- Workflow / status colours --- */ + --status-open: var(--accent-green); + --status-pending: var(--accent-purple); + --status-in-progress: var(--accent-amber); + --status-closed: var(--accent-red); + --status-online: var(--accent-green); + --status-offline: var(--accent-red); + --status-running: var(--accent-amber); + --status-completed: var(--accent-cyan); + --status-failed: var(--accent-red); + --status-waiting: var(--accent-gold); + + /* --- Priority colours --- */ + --priority-1: #FF2D55; + --priority-2: #FF6B00; + --priority-3: #00D4FF; + --priority-4: #00FF88; + --priority-5: #3e607a; + + /* --- Glow: text-shadow stacks --- */ + --glow-orange: 0 0 6px #FF6B00, 0 0 16px rgba(255,107,0,0.55); + --glow-orange-intense: 0 0 8px #FF6B00, 0 0 22px #FF6B00, 0 0 40px rgba(255,107,0,0.45); + --glow-cyan: 0 0 6px #00D4FF, 0 0 16px rgba(0,212,255,0.45); + --glow-cyan-intense: 0 0 8px #00D4FF, 0 0 22px #00D4FF, 0 0 38px rgba(0,212,255,0.35); + --glow-green: 0 0 6px #00FF88, 0 0 16px rgba(0,255,136,0.45); + --glow-green-intense: 0 0 8px #00FF88, 0 0 22px #00FF88, 0 0 36px rgba(0,255,136,0.35); + --glow-amber: 0 0 6px #FFB300, 0 0 14px rgba(255,179,0,0.40); + --glow-amber-intense: 0 0 8px #FFB300, 0 0 20px #FFB300, 0 0 34px rgba(255,179,0,0.45); + --glow-red: 0 0 6px #FF2D55, 0 0 16px rgba(255,45,85,0.45); + + /* --- Glow: box-shadow halos --- */ + --box-glow-orange: 0 0 18px rgba(255,107,0,0.22), 0 0 36px rgba(255,107,0,0.08); + --box-glow-cyan: 0 0 18px rgba(0,212,255,0.18), 0 0 36px rgba(0,212,255,0.06); + --box-glow-green: 0 0 18px rgba(0,255,136,0.18), 0 0 36px rgba(0,255,136,0.06); + --box-glow-red: 0 0 18px rgba(255,45,85,0.22), 0 0 36px rgba(255,45,85,0.08); + --box-glow-amber: 0 0 18px rgba(255,179,0,0.18), 0 0 36px rgba(255,179,0,0.06); + + /* --- Typography --- */ + --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace; + --font-display: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; + --font-crt: 'VT323', 'Courier New', monospace; + + /* --- Spacing --- */ + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2rem; + --space-2xl: 3rem; + + /* --- Layout --- */ + --sidebar-width: 240px; + --sidebar-width-sm: 200px; + --header-height: 56px; + --container-max: 1600px; + + /* --- Transitions --- */ + --transition-fast: all 0.12s ease; + --transition-default: all 0.25s ease; + + /* --- Z-index ladder --- */ + --z-base: 1; + --z-dropdown: 100; + --z-sticky: 200; + --z-fixed: 300; + --z-modal-backdrop: 10010; /* above nav drawer (10002) so modals always accessible */ + --z-modal: 10011; + --z-popover: 10012; + --z-tooltip: 10013; + --z-toast: 10014; + --z-panel: 10020; /* notification / generic dropdown panels — above everything */ + --z-overlay: 9999; /* scanlines / CRT effects */ + + /* --- Corner cuts (clip-path polygon notches) --- */ + --corner-cut: 8px; + --corner-cut-sm: 5px; + --corner-cut-lg: 16px; + + /* --- Syntax highlight --- */ + --color-tok-cmt: #5c8c6a; +} + + +/* ---------------------------------------------------------------- + 02. RESET & BASE + ---------------------------------------------------------------- */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + font-size: 14px; + scroll-behavior: smooth; + /* Dot-grid tactical background */ + background-color: var(--bg-primary); + background-image: + radial-gradient(circle, rgba(0,212,255,0.055) 1px, transparent 1px); + background-size: 28px 28px; +} + +body { + background-color: transparent; + color: var(--text-primary); + font-family: var(--font-mono); + font-size: 0.875rem; + line-height: 1.65; + min-height: 100vh; + overflow-x: hidden; + position: relative; + display: flex; + flex-direction: column; +} + +a { + color: var(--accent-cyan); + text-decoration: none; + transition: var(--transition-fast); +} +a:hover { + color: var(--accent-orange); + text-shadow: var(--glow-orange); +} +a:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: 2px; +} + +ul, ol { list-style: none; } +img, svg { display: block; max-width: 100%; } +button { cursor: pointer; font-family: var(--font-mono); } + + +/* ---------------------------------------------------------------- + 03. CRT / GRID / SCANLINE EFFECTS + ---------------------------------------------------------------- */ + +/* Horizontal scanlines — fixed, non-interactive overlay */ +body::before { + content: ''; + position: fixed; + inset: 0; + background: repeating-linear-gradient( + 0deg, + rgba(0,0,0,0.07) 0px, + rgba(0,0,0,0.07) 1px, + transparent 1px, + transparent 3px + ); + pointer-events: none; + z-index: var(--z-overlay); +} + +/* Corner vignette */ +body::after { + content: ''; + position: fixed; + inset: 0; + background: radial-gradient( + ellipse at center, + transparent 55%, + rgba(0,0,0,0.60) 100% + ); + pointer-events: none; + z-index: calc(var(--z-overlay) - 1); +} + + +/* ---------------------------------------------------------------- + 04. TYPOGRAPHY + ---------------------------------------------------------------- */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-display); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.10em; + line-height: 1.25; +} + +h1 { + font-size: 1.5rem; + color: var(--accent-orange); + text-shadow: var(--glow-orange-intense); +} +h1::before { content: '>> '; color: var(--accent-cyan); text-shadow: var(--glow-cyan); } + +h2 { + font-size: 1.15rem; + color: var(--accent-orange); + text-shadow: var(--glow-orange); +} +h2::before { content: '> '; color: var(--accent-cyan); opacity: 0.65; } + +h3 { + font-size: 0.95rem; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); +} + +h4 { + font-size: 0.85rem; + color: var(--text-secondary); +} + +p { margin-bottom: var(--space-md); } +p:last-child { margin-bottom: 0; } + +code, pre { + font-family: var(--font-mono); + font-size: 0.8rem; + background: var(--bg-terminal); + border: 1px solid var(--border-color); + color: var(--accent-green); +} + +code { + padding: 0.1em 0.35em; +} + +pre { + padding: var(--space-md); + overflow-x: auto; + white-space: pre-wrap; + border-left: 2px solid var(--accent-green); + text-shadow: var(--glow-green); +} + +hr { + border: none; + border-top: 1px solid var(--border-color-dim); + margin: var(--space-lg) 0; +} + + +/* ---------------------------------------------------------------- + 05. LAYOUT PRIMITIVES + ---------------------------------------------------------------- */ +.lt-container { + max-width: var(--container-max); + margin: 0 auto; + padding: var(--space-lg) var(--space-xl); +} + +.lt-main { + padding-top: calc(var(--header-height) + var(--space-lg)); + flex: 1; + width: 100%; + min-width: 0; +} +/* When both lt-main and lt-container are on the same element, the lt-container + shorthand `padding` overrides the lt-main `padding-top` in responsive breakpoints + (same cascade specificity, later rule wins). The combined selector has higher + specificity (0,2,0 vs 0,1,0) and always wins regardless of source order. */ +.lt-main.lt-container { + padding-top: calc(var(--header-height) + var(--space-lg)); +} + +.lt-layout { + display: flex; + gap: var(--space-lg); + align-items: flex-start; +} + +.lt-content { flex: 1; min-width: 0; } + +.lt-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-lg); } +.lt-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg); } +.lt-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-lg); } + +.lt-flex { display: flex; align-items: center; } +.lt-flex-between { display: flex; align-items: center; justify-content: space-between; } +.lt-flex-center { display: flex; align-items: center; justify-content: center; } +.lt-flex-col { display: flex; flex-direction: column; } +.lt-flex-wrap { flex-wrap: wrap; } + +.lt-gap-sm { gap: var(--space-sm); } +.lt-gap-md { gap: var(--space-md); } +.lt-gap-lg { gap: var(--space-lg); } + +.lt-mt-sm { margin-top: var(--space-sm); } +.lt-mt-md { margin-top: var(--space-md); } +.lt-mb-sm { margin-bottom: var(--space-sm); } +.lt-mb-md { margin-bottom: var(--space-md); } +.lt-p-md { padding: var(--space-md); } + +.lt-divider { + border: none; + border-top: 1px solid var(--border-color-dim); + margin: var(--space-xl) 0; +} + + +/* ---------------------------------------------------------------- + 06. HEADER & NAVIGATION + ---------------------------------------------------------------- */ +.lt-header { + position: fixed; + top: 0; left: 0; right: 0; + height: var(--header-height); + background: rgba(3,5,8,0.96); + backdrop-filter: blur(14px); + border-bottom: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-xl); + z-index: var(--z-fixed); + box-shadow: 0 4px 32px rgba(0,0,0,0.7); +} + +/* Gradient rule along bottom edge */ +.lt-header::after { + content: ''; + position: absolute; + bottom: 0; left: 0; right: 0; + height: 1px; + background: linear-gradient( + 90deg, + transparent 0%, + var(--accent-cyan) 20%, + var(--accent-orange) 50%, + var(--accent-cyan) 80%, + transparent 100% + ); + opacity: 0.55; +} + +.lt-header-left { + display: flex; + align-items: center; + gap: var(--space-xl); +} + +.lt-header-right { + display: flex; + align-items: center; + gap: var(--space-md); +} + +/* Brand */ +.lt-brand { display: flex; flex-direction: column; line-height: 1.1; } + +.lt-brand-title { + font-size: 1rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.16em; + color: var(--accent-orange); + text-shadow: var(--glow-orange); +} +.lt-brand-title::before { content: '[ '; color: var(--accent-cyan); text-shadow: var(--glow-cyan); } +.lt-brand-title::after { content: ' ]'; color: var(--accent-cyan); text-shadow: var(--glow-cyan); } + +.lt-brand-subtitle { + font-size: 0.58rem; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.22em; +} + +/* Nav links */ +.lt-nav { + display: flex; + align-items: center; + gap: 2px; +} + +.lt-nav-link { + display: inline-block; + padding: 0.35rem 0.8rem; + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.13em; + color: var(--text-secondary); + border: 1px solid transparent; + transition: var(--transition-fast); + position: relative; +} + +.lt-nav-link::after { + content: ''; + position: absolute; + bottom: -1px; + left: 50%; right: 50%; + height: 1px; + background: var(--accent-cyan); + transition: var(--transition-fast); +} + +.lt-nav-link:hover { + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); + border-color: var(--accent-cyan-border); + background: var(--accent-cyan-dim); +} +.lt-nav-link:hover::after { left: 0; right: 0; box-shadow: var(--glow-cyan); } +.lt-nav-link:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; color: var(--accent-cyan); } + +.lt-nav-link.active { + color: var(--accent-orange); + text-shadow: var(--glow-orange); + border-color: var(--accent-orange-border); + background: var(--accent-orange-dim); +} +.lt-nav-link.active::after { + left: 0; right: 0; + background: var(--accent-orange); + box-shadow: var(--glow-orange); +} + +/* Dropdown */ +.lt-nav-dropdown { position: relative; } + +.lt-nav-dropdown-menu { + display: none; + position: absolute; + top: 100%; + left: 0; + min-width: 180px; + background: rgba(6,12,20,0.98); + border: 1px solid var(--accent-cyan-border); + box-shadow: var(--box-glow-cyan), 0 16px 40px rgba(0,0,0,0.8); + z-index: var(--z-dropdown); + /* Invisible bridge above the menu so moving the cursor down from the + trigger into the menu doesn't cross a hover-dead gap */ + padding-top: 6px; + margin-top: -2px; +} +.lt-nav-dropdown-menu::before { + content: ''; + position: absolute; + top: 6px; left: 0; right: 0; + height: 1px; + background: var(--accent-cyan); + box-shadow: var(--glow-cyan); +} + +.lt-nav-dropdown:hover .lt-nav-dropdown-menu { display: block; } + +.lt-nav-dropdown-menu li a { + display: block; + padding: 0.5rem 0.9rem; + font-size: 0.7rem; + color: var(--text-secondary); + border-bottom: 1px solid var(--border-color-dim); + text-transform: uppercase; + letter-spacing: 0.09em; + transition: var(--transition-fast); +} +.lt-nav-dropdown-menu li:last-child a { border-bottom: none; } +.lt-nav-dropdown-menu li a:hover { + color: var(--accent-orange); + background: var(--accent-orange-dim); + text-shadow: var(--glow-orange); + padding-left: 1.1rem; +} +.lt-nav-dropdown-menu li a:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: -2px; + color: var(--accent-cyan); +} + +/* Header user + admin badge */ +.lt-header-user { + font-size: 0.7rem; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.11em; +} +.lt-header-user::before { + content: 'OP: '; + color: var(--accent-green); + text-shadow: var(--glow-green); + font-size: 0.62rem; +} + +.lt-badge-admin { + font-size: 0.58rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.16em; + padding: 0.15rem 0.5rem; + color: var(--accent-purple); + border: 1px solid rgba(191,95,255,0.45); + background: rgba(191,95,255,0.08); + text-shadow: 0 0 6px var(--accent-purple); + box-shadow: 0 0 10px rgba(191,95,255,0.18); +} + +/* Page header row */ +.lt-page-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-lg); + padding-bottom: var(--space-md); + border-bottom: 1px solid var(--border-color-dim); +} + +.lt-page-title { + font-size: 1.3rem; + color: var(--accent-orange); + text-shadow: var(--glow-orange-intense); + text-transform: uppercase; + letter-spacing: 0.13em; +} +.lt-page-title::before { + content: '// '; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); +} + + +/* ---------------------------------------------------------------- + 07. ASCII FRAME SYSTEM + ---------------------------------------------------------------- */ +.lt-frame { + position: relative; + border: 1px solid var(--border-color); + background: var(--bg-card); + margin-bottom: var(--space-lg); + clip-path: polygon( + 0 0, + calc(100% - 14px) 0, + 100% 14px, + 100% 100%, + 14px 100%, + 0 calc(100% - 14px) + ); +} + +/* Top-right corner pip */ +.lt-frame::before { + content: '◈'; + position: absolute; + top: -1px; right: 3px; + font-size: 0.52rem; + color: var(--accent-orange); + text-shadow: var(--glow-orange); + line-height: 1; + pointer-events: none; +} + +.lt-frame-bl, +.lt-frame-br { + position: absolute; + bottom: 4px; + font-size: 0.65rem; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); + line-height: 1; + pointer-events: none; +} +.lt-frame-bl { left: 6px; } +.lt-frame-br { right: 6px; } + +.lt-section-header { + font-size: 0.68rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.20em; + color: var(--accent-orange); + text-shadow: var(--glow-orange); + padding: 0.5rem 1rem; + border-bottom: 1px solid var(--border-color); + background: rgba(255,107,0,0.05); + display: flex; + align-items: center; + gap: var(--space-sm); +} +.lt-section-header::before { + content: '▸'; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); +} + +/* Right padding accounts for the 14px clip-path corner cut on .lt-frame */ +.lt-section-body { padding: var(--space-md); padding-right: 22px; } + +/* Inner / nested frame */ +.lt-frame-inner { + border: 1px solid var(--border-color-dim); + margin: var(--space-md); + background: rgba(0,212,255,0.018); +} + +.lt-subsection-header { + font-size: 0.63rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.18em; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); + padding: 0.4rem 0.9rem; + border-bottom: 1px solid var(--border-color-dim); + background: rgba(0,212,255,0.03); + display: flex; + align-items: center; + gap: var(--space-sm); +} +.lt-subsection-header::before { + content: '◦'; + color: var(--accent-cyan); + opacity: 0.55; +} + + +/* ---------------------------------------------------------------- + 08. CARD COMPONENT + ---------------------------------------------------------------- */ +.lt-card { + position: relative; + background: var(--bg-card); + border: 1px solid var(--border-color); + padding: var(--space-md); + transition: var(--transition-fast); + clip-path: polygon( + 0 0, + calc(100% - 10px) 0, + 100% 10px, + 100% 100%, + 0 100% + ); +} + +/* Corner accent — top-right triangle */ +.lt-card::before { + content: ''; + position: absolute; + top: 0; right: 0; + width: 0; height: 0; + border-style: solid; + border-width: 0 10px 10px 0; + border-color: transparent var(--accent-cyan) transparent transparent; + opacity: 0.4; + transition: var(--transition-fast); +} + +.lt-card:hover { + border-color: var(--accent-cyan-border); + background: var(--bg-tertiary); + box-shadow: var(--box-glow-cyan); +} +.lt-card:hover::before { + opacity: 1; + border-right-color: var(--accent-orange); +} + + +/* ---------------------------------------------------------------- + 09. BUTTONS + ---------------------------------------------------------------- */ +.lt-btn { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + padding: 0.4rem 0.9rem; + font-family: var(--font-mono); + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--accent-cyan); + background: transparent; + border: 1px solid var(--accent-cyan-border); + transition: var(--transition-fast); + cursor: pointer; + text-decoration: none; + white-space: nowrap; + position: relative; + clip-path: polygon( + 0 0, + calc(100% - 7px) 0, + 100% 7px, + 100% 100%, + 7px 100%, + 0 calc(100% - 7px) + ); +} + +.lt-btn:hover { + color: var(--accent-cyan-bright); + border-color: var(--accent-cyan); + background: var(--accent-cyan-dim); + box-shadow: var(--box-glow-cyan); + text-shadow: var(--glow-cyan); + text-decoration: none; +} + +.lt-btn:active { transform: translateY(1px); } + +.lt-btn:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: 2px; + box-shadow: var(--box-glow-cyan); +} + +.lt-btn:disabled, +.lt-btn[disabled] { + opacity: 0.30; + cursor: not-allowed; + box-shadow: none; +} + +/* Primary — orange */ +.lt-btn-primary { + color: var(--accent-orange); + border-color: var(--accent-orange-border); +} +.lt-btn-primary:hover { + color: var(--accent-orange-bright); + border-color: var(--accent-orange); + background: var(--accent-orange-dim); + box-shadow: var(--box-glow-orange); + text-shadow: var(--glow-orange); +} + +/* Danger — red */ +.lt-btn-danger { + color: var(--accent-red); + border-color: rgba(255,45,85,0.32); +} +.lt-btn-danger:hover { + border-color: var(--accent-red); + background: var(--accent-red-dim); + box-shadow: var(--box-glow-red); + text-shadow: var(--glow-red); +} + +/* Ghost — minimal */ +.lt-btn-ghost { + color: var(--text-muted); + border-color: var(--border-color-dim); + clip-path: none; +} +.lt-btn-ghost:hover { + color: var(--text-secondary); + border-color: var(--border-color); + background: rgba(196,217,238,0.03); + box-shadow: none; + text-shadow: none; +} + +/* Small */ +.lt-btn-sm { + padding: 0.22rem 0.6rem; + font-size: 0.62rem; +} + +.lt-btn-group { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + flex-wrap: wrap; +} + + +/* ---------------------------------------------------------------- + 10. FORMS & INPUTS + ---------------------------------------------------------------- */ +.lt-form-group { + display: flex; + flex-direction: column; + gap: var(--space-xs); + margin-bottom: var(--space-md); +} + +.lt-label { + font-size: 0.68rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--text-secondary); +} +.lt-label-required::after { content: ' *'; color: var(--accent-red); } + +.lt-input, +.lt-select, +.lt-textarea { + font-family: var(--font-mono); + font-size: 0.8rem; + color: var(--text-primary); + background: var(--bg-terminal); + border: 1px solid var(--border-color); + padding: 0.45rem 0.8rem; + width: 100%; + outline: none; + transition: var(--transition-fast); + clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); +} + +.lt-input:focus, +.lt-select:focus, +.lt-textarea:focus, +.lt-input:focus-visible, +.lt-select:focus-visible, +.lt-textarea:focus-visible { + border-color: var(--accent-cyan); + box-shadow: var(--box-glow-cyan); + background: rgba(0,212,255,0.025); + outline: 2px solid var(--accent-cyan); + outline-offset: 1px; +} + +.lt-input:disabled, +.lt-select:disabled, +.lt-textarea:disabled, +.lt-input[readonly], +.lt-textarea[readonly] { + opacity: 0.45; + cursor: not-allowed; + background: var(--bg-tertiary); + color: var(--text-muted); + border-color: var(--border-dim); +} + +/* Display-only fields — readable, non-editable, not "broken" */ +.lt-display-field, +.lt-input.lt-display-field, +.lt-select.lt-display-field, +.lt-textarea.lt-display-field { + opacity: 1; + color: var(--text-secondary); + cursor: default; + pointer-events: none; + background: transparent; + border-color: var(--border-dim); +} + +.lt-input::placeholder, +.lt-textarea::placeholder { color: var(--text-dim); } + +.lt-select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300D4FF'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0.75rem center; + padding-right: 2rem; + color-scheme: dark; +} + +/* Style the native option list — works on Chrome/Firefox/Edge on Windows & Linux. + macOS always uses OS-native rendering and ignores these. */ +.lt-select option, +select option { + background: #0d1117; + color: #c9d1d9; +} +.lt-select option:hover, +.lt-select option:focus, +.lt-select option:checked, +select option:checked { + background: #1a2030; + color: #FF6B00; +} + +.lt-textarea { + min-height: 100px; + resize: vertical; + clip-path: none; +} + +.lt-form-hint { + font-size: 0.63rem; + color: var(--text-muted); + letter-spacing: 0.04em; +} + +/* Search */ +.lt-search { position: relative; } +.lt-search-input { padding-left: 2rem; } +.lt-search::before { + content: '⌕'; + position: absolute; + left: 0.6rem; + top: 50%; + transform: translateY(-50%); + color: var(--text-muted); + pointer-events: none; + font-size: 0.9rem; + z-index: 1; +} + +/* Checkbox */ +.lt-checkbox { + appearance: none; + width: 14px; + height: 14px; + border: 1px solid var(--accent-cyan-border); + background: var(--bg-terminal); + cursor: pointer; + position: relative; + flex-shrink: 0; + vertical-align: middle; + transition: var(--transition-fast); +} +.lt-checkbox:checked { + background: var(--accent-cyan-dim); + border-color: var(--accent-cyan); +} +.lt-checkbox:checked::after { + content: '✓'; + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.6rem; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); +} +.lt-checkbox:hover { border-color: var(--accent-cyan); } +.lt-checkbox:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: 2px; +} +.lt-checkbox:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +/* Radio (same visual language as checkbox) */ +.lt-radio { + appearance: none; + width: 14px; + height: 14px; + border: 1px solid var(--accent-cyan-border); + border-radius: 50%; + background: var(--bg-terminal); + cursor: pointer; + flex-shrink: 0; + vertical-align: middle; + transition: var(--transition-fast); + position: relative; +} +.lt-radio:checked { + border-color: var(--accent-cyan); + background: var(--accent-cyan-dim); +} +.lt-radio:checked::after { + content: ''; + position: absolute; + inset: 3px; + border-radius: 50%; + background: var(--accent-cyan); + box-shadow: var(--glow-cyan); +} +.lt-radio:hover { border-color: var(--accent-cyan); } +.lt-radio:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: 2px; +} +.lt-radio:disabled { opacity: 0.4; cursor: not-allowed; } + + +/* ---------------------------------------------------------------- + 11. TABLES + ---------------------------------------------------------------- */ +.lt-table-wrap { overflow-x: auto; } + +.lt-table { + width: 100%; + border-collapse: collapse; + font-size: 0.78rem; +} + +.lt-table thead { + border-bottom: 1px solid var(--accent-cyan-border); + background: rgba(0,212,255,0.04); +} + +.lt-table th { + padding: 0.6rem 0.85rem; + text-align: left; + font-size: 0.62rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.16em; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); + white-space: nowrap; + cursor: default; +} + +.lt-table th[data-sort-key] { cursor: pointer; } +.lt-table th[data-sort-key]:hover { + color: var(--accent-orange); + text-shadow: var(--glow-orange); +} +.lt-table th[data-sort-key]:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; } + +.lt-table td { + padding: 0.55rem 0.85rem; + border-bottom: 1px solid var(--border-color-dim); + color: var(--text-primary); + vertical-align: middle; + overflow-wrap: break-word; + word-break: break-word; + max-width: 280px; /* prevent single cell from expanding table beyond viewport */ +} + +.lt-table tbody tr { transition: var(--transition-fast); } +.lt-table tbody tr:hover { + background: rgba(0,212,255,0.04); + outline: 1px solid var(--border-color-dim); + outline-offset: -1px; +} + +/* Row priority accent bars */ +.lt-row-critical, .lt-row-p1 { + border-left: 2px solid var(--priority-1) !important; + background: rgba(255,45,85,0.035) !important; +} +.lt-row-warning, .lt-row-p2 { border-left: 2px solid var(--priority-2) !important; } +.lt-row-p3 { border-left: 2px solid var(--priority-3) !important; } +.lt-row-p4 { border-left: 2px solid var(--priority-4) !important; } + +/* Row state aliases (unprefixed, compatible with monitoring apps) */ +.lt-table tr.row-critical td:first-child, .lt-table tr.lt-row-critical td:first-child { border-left: 2px solid var(--accent-red); } +.lt-table tr.row-critical td { background: rgba(255,45,85,.04); } +.lt-table tr.row-warning td:first-child { border-left: 2px solid var(--accent-amber); } +.lt-table tr.row-warning td { background: rgba(255,107,0,.04); } +.lt-table tr.row-resolved td { opacity: 0.6; } + +/* Compact data table */ +.lt-data-table { + width: 100%; + border-collapse: collapse; + font-size: 0.75rem; +} +.lt-data-table td { + padding: 0.3rem 0.5rem; + border-bottom: 1px solid var(--border-color-dim); +} +.lt-data-table thead tr { border-bottom: 1px solid var(--border-color); } +.lt-data-table th { + font-size: 0.62rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--accent-cyan); + padding: 0.35rem 0.5rem; +} +.lt-data-table-wrapper { padding: 0 var(--space-xs); } + + +/* ---------------------------------------------------------------- + 12. STATUS BADGES, CHIPS, PRIORITY + ---------------------------------------------------------------- */ +.lt-status { + display: inline-block; + padding: 0.14rem 0.5rem; + font-size: 0.58rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.15em; + border: 1px solid currentColor; + background: transparent; + white-space: nowrap; +} + +.lt-status-open { color: var(--status-open); background: rgba(0,255,136,0.07); } +.lt-status-pending { color: var(--status-pending); background: rgba(191,95,255,0.07); } +.lt-status-in-progress { color: var(--status-in-progress); background: rgba(255,179,0,0.07); } +.lt-status-closed { color: var(--status-closed); background: rgba(255,45,85,0.07); } +.lt-status-online { color: var(--status-online); background: rgba(0,255,136,0.07); text-shadow: var(--glow-green); } +.lt-status-offline { color: var(--status-offline); background: rgba(255,45,85,0.07); } +.lt-status-running { color: var(--status-running); background: rgba(255,179,0,0.07); animation: pulse-amber 2s infinite; will-change: color; } +.lt-status-completed { color: var(--status-completed); background: rgba(0,212,255,0.07); } +.lt-status-failed { color: var(--status-failed); background: rgba(255,45,85,0.07); } + +/* Priority badges */ +.lt-priority, +.lt-p1, .lt-p2, .lt-p3, .lt-p4, .lt-p5 { + display: inline-block; + padding: 0.12rem 0.45rem; + font-size: 0.58rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + border: 1px solid currentColor; +} + +.lt-p1 { color: var(--priority-1); background: rgba(255,45,85,0.09); border-color: rgba(255,45,85,0.4); text-shadow: var(--glow-red); } +.lt-p2 { color: var(--priority-2); background: rgba(255,107,0,0.09); border-color: rgba(255,107,0,0.38); } +.lt-p3 { color: var(--priority-3); background: rgba(0,212,255,0.07); border-color: rgba(0,212,255,0.30); } +.lt-p4 { color: var(--priority-4); background: rgba(0,255,136,0.07); border-color: rgba(0,255,136,0.30); } +.lt-p5 { color: var(--priority-5); background: rgba(62,96,122,0.09); border-color: rgba(62,96,122,0.30); } + +/* Chips */ +.lt-chip, .chip { + display: inline-flex; + align-items: center; + padding: 0.15rem 0.5rem; + font-size: 0.58rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + border: 1px solid currentColor; +} + +.lt-chip-ok, .chip-ok { color: var(--accent-green); background: var(--accent-green-dim); text-shadow: var(--glow-green); } +.lt-chip-warn, .chip-warning { color: var(--accent-amber); background: var(--accent-amber-dim); } +.lt-chip-critical, .chip-critical { color: var(--accent-red); background: var(--accent-red-dim); text-shadow: var(--glow-red); } +.lt-chip-info { color: var(--accent-cyan); background: var(--accent-cyan-dim); text-shadow: var(--glow-cyan); } + +/* Generic badges */ +.lt-badge { + display: inline-block; + padding: 0.1rem 0.4rem; + font-size: 0.56rem; + font-weight: 700; + letter-spacing: 0.1em; + border: 1px solid currentColor; +} +.lt-badge-green { color: var(--accent-green); } +.lt-badge-amber { color: var(--accent-amber); } +.lt-badge-red { color: var(--accent-red); } +.lt-badge-sm { font-size: 0.5rem; padding: 0.05rem 0.3rem; } + +/* Status + priority badge variants (dark-mode base) */ +.lt-badge-open { color: var(--accent-green); background: rgba(0,255,136,0.08); border-color: rgba(0,255,136,0.35); text-shadow: var(--glow-green); } +.lt-badge-closed { color: var(--text-muted); background: rgba(74,90,112,0.10); border-color: rgba(74,90,112,0.35); } +.lt-badge-in-progress, +.lt-badge-progress { color: var(--accent-amber); background: rgba(255,179,0,0.08); border-color: rgba(255,179,0,0.35); } +.lt-badge-pending { color: var(--accent-purple); background: rgba(191,95,255,0.08); border-color: rgba(191,95,255,0.35); } +.lt-badge-p1 { color: var(--accent-red); background: rgba(255,45,85,0.09); border-color: rgba(255,45,85,0.40); text-shadow: var(--glow-red); } +.lt-badge-p2 { color: var(--accent-orange); background: rgba(255,107,0,0.09); border-color: rgba(255,107,0,0.38); } +.lt-badge-p3 { color: var(--accent-cyan); background: rgba(0,212,255,0.07); border-color: rgba(0,212,255,0.30); } +.lt-badge-p4 { color: var(--accent-green); background: rgba(0,255,136,0.07); border-color: rgba(0,255,136,0.30); } + +/* Status dots */ +.lt-dot { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + flex-shrink: 0; +} +.lt-dot-up, .dot-up { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green), 0 0 14px var(--accent-green); animation: pulse-green 2.2s ease-in-out infinite; will-change: box-shadow; } +.lt-dot-down, .dot-down { background: var(--accent-red); box-shadow: 0 0 6px var(--accent-red), 0 0 12px var(--accent-red); } +.lt-dot-warn, .dot-degraded { background: var(--accent-amber); box-shadow: 0 0 6px var(--accent-amber), 0 0 12px var(--accent-amber); animation: pulse-amber 2.2s ease-in-out infinite; will-change: box-shadow; } +.lt-dot-idle, .dot-unknown, +.dot-initial_down { background: var(--text-muted); box-shadow: none; } + + +/* ---------------------------------------------------------------- + 13. MODALS + ---------------------------------------------------------------- */ +.lt-modal-overlay { + display: none; + position: fixed; + inset: 0; + background: var(--bg-overlay); + backdrop-filter: blur(8px); + z-index: var(--z-modal-backdrop); + align-items: center; + justify-content: center; +} +.lt-modal-overlay.is-open { display: flex; } + +.lt-modal { + position: relative; + background: var(--bg-secondary); + border: 1px solid var(--accent-cyan-border); + width: min(520px, 92vw); + max-height: 85vh; + display: flex; + flex-direction: column; + box-shadow: var(--box-glow-cyan), 0 40px 80px rgba(0,0,0,0.85); + clip-path: polygon( + 0 0, + calc(100% - 18px) 0, + 100% 18px, + 100% 100%, + 18px 100%, + 0 calc(100% - 18px) + ); + animation: modal-in 0.18s ease; +} +.lt-modal::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 1px; + background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); + box-shadow: var(--glow-cyan); +} + +.lt-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 1rem; + border-bottom: 1px solid var(--border-color); + background: rgba(0,212,255,0.035); + flex-shrink: 0; +} + +.lt-modal-title { + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.16em; + color: var(--accent-orange); + text-shadow: var(--glow-orange); +} + +.lt-modal-close { + background: none; + border: none; + color: var(--text-muted); + font-size: 0.85rem; + line-height: 1; + cursor: pointer; + padding: 0.2rem 0.4rem; + transition: var(--transition-fast); +} +.lt-modal-close:hover { color: var(--accent-red); text-shadow: var(--glow-red); } +.lt-modal-close:active { color: var(--accent-red); opacity: 0.7; } +.lt-modal-close:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } + +/* Modal size modifiers */ +.lt-modal-xs { width: min(280px, 92vw); } +.lt-modal-sm { width: min(360px, 92vw); } + +/* Modal header danger variant */ +.lt-modal-header--danger { + background: rgba(255, 77, 77, 0.08); + border-bottom-color: var(--accent-red); +} +.lt-modal-header--danger .lt-modal-title { + color: var(--accent-red); + text-shadow: var(--glow-red); +} + +.lt-modal-body { + padding: var(--space-lg); + overflow-y: auto; + flex: 1; +} + +.lt-modal-footer { + display: flex; + align-items: center; + justify-content: flex-end; + gap: var(--space-sm); + padding: 0.75rem 1rem; + border-top: 1px solid var(--border-color-dim); + background: rgba(0,0,0,0.25); + flex-shrink: 0; +} + + +/* ---------------------------------------------------------------- + 14. TOAST NOTIFICATIONS + ---------------------------------------------------------------- */ +#lt-toast-container { + position: fixed; + bottom: var(--space-lg); + right: var(--space-lg); + display: flex; + flex-direction: column; + gap: var(--space-sm); + z-index: var(--z-toast); + pointer-events: none; +} + +.lt-toast { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: 0.5rem 0.9rem; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + min-width: 240px; + max-width: 380px; + border-left: 2px solid currentColor; + background: var(--bg-overlay, rgba(6,12,20,0.97)); + backdrop-filter: blur(8px); + border-top: 1px solid var(--border-dim); + border-right: 1px solid var(--border-dim); + border-bottom: 1px solid var(--border-dim); + pointer-events: all; + animation: toast-in 0.2s ease; + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); +} + +.lt-toast-success { color: var(--accent-green); border-left-color: var(--accent-green); box-shadow: var(--box-glow-green); } +.lt-toast-error { color: var(--accent-red); border-left-color: var(--accent-red); box-shadow: var(--box-glow-red); } +.lt-toast-warning { color: var(--accent-amber); border-left-color: var(--accent-amber); box-shadow: var(--box-glow-amber); } +.lt-toast-info { color: var(--accent-cyan); border-left-color: var(--accent-cyan); box-shadow: var(--box-glow-cyan); } + + +/* ---------------------------------------------------------------- + 15. TAB NAVIGATION + ---------------------------------------------------------------- */ +.lt-tabs { + display: flex; + align-items: flex-end; + gap: 2px; + border-bottom: 1px solid var(--border-color); + margin-bottom: var(--space-lg); +} + +.lt-tab { + padding: 0.45rem 0.9rem; + font-family: var(--font-mono); + font-size: 0.67rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.14em; + color: var(--text-muted); + background: transparent; + border: 1px solid transparent; + border-bottom: none; + cursor: pointer; + transition: var(--transition-fast); +} +.lt-tab:hover { + color: var(--text-secondary); + background: rgba(0,212,255,0.04); + border-color: var(--border-color-dim); +} +.lt-tab.active { + color: var(--accent-orange); + text-shadow: var(--glow-orange); + background: var(--bg-card); + border-color: var(--accent-orange-border); + border-bottom-color: var(--bg-card); +} +.lt-tab:focus-visible { + outline: 2px solid var(--accent-orange); + outline-offset: -2px; +} + +.lt-tab-panel { display: none; } +.lt-tab-panel.active { display: block; } + + +/* ---------------------------------------------------------------- + 16. SIDEBAR / FILTER PANEL + ---------------------------------------------------------------- */ +.lt-sidebar { + width: var(--sidebar-width); + flex-shrink: 0; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + transition: var(--transition-default); +} +.lt-sidebar.collapsed { width: 32px; overflow: hidden; } + +.lt-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem 0.75rem; + font-size: 0.63rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.18em; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); + border-bottom: 1px solid var(--border-color); + background: rgba(0,212,255,0.035); +} + +.lt-sidebar-toggle { + background: none; + border: none; + color: var(--text-muted); + font-size: 0.65rem; + cursor: pointer; + padding: 0.1rem 0.3rem; + transition: var(--transition-fast); +} +.lt-sidebar-toggle:hover { color: var(--accent-cyan); text-shadow: var(--glow-cyan); } +.lt-sidebar-toggle:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } + +.lt-sidebar-body { padding: var(--space-md); } + +.lt-filter-group { + margin-bottom: var(--space-md); + padding: 0 0 var(--space-md) 0; + border: none; + border-bottom: 1px solid var(--border-color-dim); + min-width: 0; /* fieldset UA reset */ +} +.lt-filter-group:last-child { border-bottom: none; } + +.lt-filter-label { + display: block; + font-size: 0.6rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.15em; + color: var(--accent-orange); + margin-bottom: var(--space-sm); +} + +.lt-filter-option { + display: flex; + align-items: center; + gap: var(--space-sm); + font-size: 0.75rem; + color: var(--text-secondary); + margin-bottom: var(--space-xs); + cursor: pointer; + transition: var(--transition-fast); +} +.lt-filter-option:hover { color: var(--text-primary); } + + +/* ---------------------------------------------------------------- + 17. STATS WIDGETS + ---------------------------------------------------------------- */ +.lt-stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); + gap: var(--space-md); + margin-bottom: var(--space-lg); +} + +.lt-stat-card { + position: relative; + display: flex; + align-items: center; + gap: var(--space-md); + padding: var(--space-md); + background: var(--bg-card); + border: 1px solid var(--border-color); + cursor: pointer; + transition: var(--transition-fast); + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + overflow: hidden; +} + +/* Left accent bar */ +.lt-stat-card::before { + content: ''; + position: absolute; + top: 0; left: 0; + width: 2px; height: 0%; + background: var(--accent-cyan); + box-shadow: var(--glow-cyan); + transition: height 0.3s ease; +} + +.lt-stat-card:hover, +.lt-stat-card.active, +.lt-stat-card:focus-visible { + background: var(--bg-tertiary); + border-color: var(--accent-cyan-border); + box-shadow: var(--box-glow-cyan); +} +.lt-stat-card:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; } +.lt-stat-card:hover::before, +.lt-stat-card.active::before { height: 100%; } + +.lt-stat-card.active { + border-color: var(--accent-orange-border); + box-shadow: var(--box-glow-orange); +} +.lt-stat-card.active::before { + background: var(--accent-orange); + box-shadow: var(--glow-orange); +} + +.lt-stat-icon { font-size: 1.3rem; line-height: 1; opacity: 0.80; } +.lt-stat-info { display: flex; flex-direction: column; } + +.lt-stat-value { + font-size: 1.6rem; + font-weight: 700; + line-height: 1; + color: var(--accent-orange); + text-shadow: var(--glow-orange); +} + +.lt-stat-label { + font-size: 0.58rem; + text-transform: uppercase; + letter-spacing: 0.16em; + color: var(--text-muted); + margin-top: 2px; +} + + +/* ---------------------------------------------------------------- + 18. INLINE MESSAGES + ---------------------------------------------------------------- */ +.lt-msg { + padding: 0.5rem 0.85rem; + font-size: 0.75rem; + border-left: 2px solid currentColor; + margin-bottom: var(--space-sm); + display: flex; + align-items: flex-start; + gap: var(--space-sm); +} +.lt-msg::before { flex-shrink: 0; font-weight: 700; } + +.lt-msg-error { color: var(--accent-red); background: var(--accent-red-dim); border-left-color: var(--accent-red); } +.lt-msg-success { color: var(--accent-green); background: var(--accent-green-dim); border-left-color: var(--accent-green); } +.lt-msg-warning { color: var(--accent-amber); background: var(--accent-amber-dim); border-left-color: var(--accent-amber); } +.lt-msg-info { color: var(--accent-cyan); background: var(--accent-cyan-dim); border-left-color: var(--accent-cyan); } + +.lt-msg-error::before { content: '✗'; } +.lt-msg-success::before { content: '✓'; } +.lt-msg-warning::before { content: '!'; } +.lt-msg-info::before { content: 'i'; } + + +/* ---------------------------------------------------------------- + 19. LOADING & EMPTY STATES + ---------------------------------------------------------------- */ +.lt-loading { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + color: var(--text-muted); + font-size: 0.72rem; +} +.lt-loading::before { + content: ''; + display: inline-block; + width: 14px; height: 14px; + border: 2px solid var(--border-color); + border-top-color: var(--accent-cyan); + border-radius: 50%; + animation: spin 0.75s linear infinite; +} +.lt-loading::after { + content: 'Loading...'; + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.lt-skeleton { + background: linear-gradient( + 90deg, + var(--bg-secondary) 25%, + var(--bg-tertiary) 50%, + var(--bg-secondary) 75% + ); + background-size: 300% 100%; + animation: shimmer 1.8s ease-in-out infinite; +} + +.lt-empty { + color: var(--text-dim); + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.12em; + text-align: center; + padding: var(--space-xl); +} +.lt-empty::before { content: '[ '; color: var(--text-muted); } +.lt-empty::after { content: ' ]'; color: var(--text-muted); } + + +/* ---------------------------------------------------------------- + 20. BOOT SEQUENCE OVERLAY + ---------------------------------------------------------------- */ +.lt-boot-overlay { + position: fixed; + inset: 0; + background: #000; + z-index: calc(var(--z-overlay) + 1); + display: flex; + align-items: flex-start; + justify-content: flex-start; + padding: var(--space-2xl); + animation: boot-fade 0.5s ease 2.2s forwards; +} + +.lt-boot-text { + font-family: var(--font-mono); + font-size: 0.78rem; + color: var(--accent-green); + text-shadow: var(--glow-green); + line-height: 1.7; + white-space: pre-wrap; + overflow: hidden; +} + + +/* ---------------------------------------------------------------- + 21. LOG / TIMELINE ENTRIES + ---------------------------------------------------------------- */ +.lt-log-entry { + padding: 0.5rem 0.75rem; + border-left: 2px solid var(--border-color); + margin-bottom: 2px; + font-size: 0.75rem; + background: rgba(0,0,0,0.2); + transition: var(--transition-fast); +} +.lt-log-entry:hover { background: rgba(0,212,255,0.025); } +.lt-log-entry.success { border-left-color: var(--accent-green); } +.lt-log-entry.warning { border-left-color: var(--accent-amber); } +.lt-log-entry.error { border-left-color: var(--accent-red); } + +.lt-log-ts { + font-size: 0.6rem; + color: var(--text-muted); + margin-bottom: 2px; + letter-spacing: 0.04em; +} + +.lt-log-output { + font-size: 0.67rem; + color: var(--accent-green); + background: var(--bg-terminal); + padding: 0.2rem 0.45rem; + margin-top: 0.35rem; + border-left: 1px solid var(--accent-green-border); + text-shadow: var(--glow-green); +} + +/* Toolbar row */ +.lt-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + padding: var(--space-sm) 0; + margin-bottom: var(--space-md); +} +.lt-toolbar-left, +.lt-toolbar-right { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +/* Running / pulsing row */ +.lt-item-running { animation: running-pulse 3s ease-in-out infinite; } + + +/* ---------------------------------------------------------------- + 22. ANIMATIONS (KEYFRAMES) + ---------------------------------------------------------------- */ +@keyframes pulse-green { + 0%, 100% { box-shadow: 0 0 4px var(--accent-green), 0 0 8px var(--accent-green); } + 50% { box-shadow: 0 0 8px var(--accent-green), 0 0 22px var(--accent-green), 0 0 36px rgba(0,255,136,0.35); } +} + +@keyframes pulse-amber { + 0%, 100% { box-shadow: 0 0 4px var(--accent-amber), 0 0 8px var(--accent-amber); } + 50% { box-shadow: 0 0 8px var(--accent-amber), 0 0 20px var(--accent-amber); } +} + +@keyframes running-pulse { + 0%, 100% { border-color: var(--border-color); } + 50% { border-color: rgba(255,179,0,0.25); box-shadow: 0 0 14px rgba(255,179,0,0.12); } +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +@keyframes shimmer { + 0% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +@keyframes toast-in { + from { opacity: 0; transform: translateX(16px); } + to { opacity: 1; transform: translateX(0); } +} + +@keyframes modal-in { + from { opacity: 0; transform: scale(0.96) translateY(-10px); } + to { opacity: 1; transform: scale(1) translateY(0); } +} + +@keyframes boot-fade { + to { opacity: 0; pointer-events: none; } +} + +@keyframes blink { + 0%, 49% { opacity: 1; } + 50%, 100% { opacity: 0; } +} + +@keyframes glitch-1 { + 0%, 90%, 100% { clip-path: inset(0); transform: skewX(0); } + 92% { clip-path: inset(15% 0 72% 0); transform: skewX(-4deg); } + 94% { clip-path: inset(54% 0 22% 0); transform: skewX(3deg); } + 96% { clip-path: inset(30% 0 48% 0); transform: skewX(-2deg); } +} + +@keyframes glitch-2 { + 0%, 90%, 100% { clip-path: inset(0); transform: skewX(0); } + 92% { clip-path: inset(60% 0 8% 0); transform: skewX(3deg); } + 94% { clip-path: inset(8% 0 68% 0); transform: skewX(-3deg); } + 96% { clip-path: inset(42% 0 38% 0); transform: skewX(1deg); } +} + + +/* ================================================================ + 23. RESPONSIVE DESIGN + + Breakpoint system (desktop-first with mobile-first enhancements): + xs: ≤ 479px tiny phones (iPhone SE 1st gen, Galaxy A) + sm: 480–767px phones (iPhone 14, Pixel 7, Galaxy S) + md: 768–1023px tablets (iPad mini/Air portrait) + lg: 1024–1279px laptops (iPad Pro landscape, MacBook Air 11") + xl: 1280–1535px desktops (MacBook Pro 13", 1080p portrait) + 2xl: 1536–1919px large (27" iMac, 1440p) + 3xl: 1920–2559px full HD (1080p monitor, 24") + 4k: ≥ 2560px 4K/ultrawide (4K, 1440p ultrawide) + ================================================================ */ + +/* ── Breakpoint tokens (read by JS lt.viewport module) ── */ +:root { + --bp-xs: 479; + --bp-sm: 480; + --bp-md: 768; + --bp-lg: 1024; + --bp-xl: 1280; + --bp-2xl: 1536; + --bp-3xl: 1920; + --bp-4k: 2560; +} + +/* ── Mobile nav drawer ── */ +.lt-menu-btn { + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 36px; height: 36px; + padding: 6px; + background: none; + border: 1px solid var(--border-dim); + cursor: pointer; + flex-shrink: 0; +} +.lt-menu-btn span { + display: block; + height: 1px; + background: var(--accent-cyan); + transition: transform 0.2s ease, opacity 0.2s ease; + box-shadow: var(--glow-cyan); +} +.lt-menu-btn:active { opacity: 0.7; } +.lt-menu-btn:focus-visible { outline: 1px solid var(--accent-cyan); outline-offset: 2px; } +.lt-menu-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } +.lt-menu-btn.open span:nth-child(2) { opacity: 0; } +.lt-menu-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } + +.lt-nav-drawer { + position: fixed; + top: 0; left: 0; bottom: 0; + width: 280px; + background: var(--bg-secondary); + border-right: 1px solid var(--border-color); + box-shadow: 4px 0 32px rgba(0,0,0,0.8); + z-index: calc(var(--z-overlay) + 3); + transform: translateX(-100%); + transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); + overflow-y: auto; + overflow-x: hidden; + overscroll-behavior: contain; + display: flex; + flex-direction: column; +} +.lt-nav-drawer.open { transform: translateX(0); } + +.lt-nav-drawer-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-md) var(--space-lg); + border-bottom: 1px solid var(--border-color); + min-height: var(--header-height); +} +.lt-nav-drawer-close { + background: none; + border: 1px solid var(--border-dim); + color: var(--text-dim); + cursor: pointer; + width: 44px; height: 44px; /* 44px touch target */ + font-size: 0.9rem; + display: flex; align-items: center; justify-content: center; + flex-shrink: 0; + transition: color 0.15s, border-color 0.15s; +} +.lt-nav-drawer-close:hover { color: var(--accent-red); border-color: var(--accent-red); } +.lt-nav-drawer-close:focus-visible { outline: 1px solid var(--accent-cyan); outline-offset: 2px; } + +.lt-nav-drawer-links { padding: var(--space-sm) 0; flex: 1; } +.lt-nav-drawer-link { + display: flex; + align-items: center; + padding: 0.75rem var(--space-lg); + font-family: var(--font-mono); + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-secondary); + text-decoration: none; + transition: color 0.15s, background 0.15s, padding-left 0.15s; + border-left: 2px solid transparent; + min-height: 44px; +} +.lt-nav-drawer-link:hover { color: var(--accent-cyan); background: rgba(0,212,255,0.06); padding-left: calc(var(--space-lg) + 4px); } +.lt-nav-drawer-link:focus-visible { outline: none; color: var(--accent-cyan); background: rgba(0,212,255,0.10); box-shadow: inset 3px 0 0 var(--accent-cyan); } +.lt-nav-drawer-link.active, +.lt-nav-drawer-link[aria-current="page"] { color: var(--accent-orange); border-left-color: var(--accent-orange); background: rgba(255,107,0,0.06); } +.lt-nav-drawer-link--indent { padding-left: calc(var(--space-lg) + var(--space-md)); font-size: 0.75rem; font-weight: 400; text-transform: none; letter-spacing: 0; } +.lt-nav-drawer-section { + padding: var(--space-sm) var(--space-lg) var(--space-xs); + font-family: var(--font-mono); + font-size: 0.6rem; + text-transform: uppercase; + letter-spacing: 0.15em; + color: var(--text-dim); + border-top: 1px solid var(--border-dim); + margin-top: var(--space-xs); +} + +.lt-nav-drawer-overlay { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.75); + backdrop-filter: blur(2px); + z-index: calc(var(--z-overlay) + 2); +} +.lt-nav-drawer-overlay.open { display: block; } + + +/* ── Safe areas (iPhone notch / Dynamic Island / home bar) ── */ +@supports (padding: env(safe-area-inset-left)) { + /* Header: pad for notch in landscape, Dynamic Island on top */ + .lt-header { + padding-left: max(var(--space-xl), env(safe-area-inset-left)); + padding-right: max(var(--space-xl), env(safe-area-inset-right)); + } + /* Main content: header-height already includes safe-area-top via header height — + only add safe-area-top once to avoid double-counting */ + .lt-main { + padding-top: calc(var(--header-height) + env(safe-area-inset-top) + var(--space-lg)); + } + /* Nav drawer: account for notch on both top and left (landscape) */ + .lt-nav-drawer { + padding-top: max(var(--header-height), env(safe-area-inset-top)); + padding-left: env(safe-area-inset-left); + } + /* Toast: stay above home bar */ + #lt-toast-container { + bottom: max(var(--space-lg), calc(env(safe-area-inset-bottom) + var(--space-sm))); + right: max(var(--space-lg), env(safe-area-inset-right)); + right: max(var(--space-sm), env(safe-area-inset-right)); /* SM override merged */ + } + /* Bottom-fixed UI (modals, cmd palette at XS) */ + .lt-modal-overlay.bottom-safe, + .lt-cmd-overlay.bottom-safe { + padding-bottom: env(safe-area-inset-bottom); + } +} + + +/* ── Touch / coarse pointer (finger-friendly tap targets) ── */ +@media (pointer: coarse) { + .lt-btn, .lt-input, .lt-select, .lt-textarea { min-height: 44px; } + .lt-btn-sm { min-height: 44px; } /* 44px minimum per WCAG / Apple HIG */ + .lt-menu-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } + .lt-nav-link { padding: 0 var(--space-md); min-height: 44px; display: inline-flex; align-items: center; } + .lt-accordion-header { min-height: 48px; } + .lt-tab { min-height: 44px; padding: var(--space-sm) var(--space-lg); } + .lt-list-item { min-height: 44px; } + .lt-page-btn { min-height: 44px; min-width: 44px; } + .lt-dropdown-trigger { min-height: 44px; } + .lt-notif-bell-btn { min-height: 44px !important; min-width: 44px; } + .lt-checkbox, .lt-radio { width: 20px; height: 20px; } + input[type="range"].lt-range { height: 8px; } + input[type="range"].lt-range::-webkit-slider-thumb { width: 22px; height: 22px; } +} + + +/* ── No-hover / touch devices ── */ +@media (hover: none) { + /* Suppress hover-only decorations on touch */ + [data-tooltip]::before, + [data-tooltip]::after { display: none; } + /* Glitch causes expensive repaints on mobile — disable */ + .lt-glitch::before, + .lt-glitch::after { display: none; } + /* Suppress padding-left shift on touch (causes layout jank on tap) */ + .lt-nav-drawer-link:hover { padding-left: var(--space-lg); } +} + +/* ── Coarse pointer — additional touch performance tweaks ── */ +@media (pointer: coarse) { + /* Disable infinite animations that drain battery on mobile */ + .lt-dot-up, .lt-dot-warn { animation: none; } + .lt-status-running { animation: none; } + .lt-item-running { animation: none; } + /* Use simple pulsing glow instead for coarse-pointer devices */ + .lt-dot-up { box-shadow: 0 0 6px var(--accent-green); } + .lt-dot-warn { box-shadow: 0 0 6px var(--accent-amber); } +} + + +/* ── High-DPI / Retina ── */ +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + .lt-header::after { height: 0.5px; } + .lt-frame, .lt-card, .lt-input, .lt-select, .lt-btn { border-width: 0.5px; } + .lt-frame::before { font-size: 0.6rem; } +} + + +/* ── Landscape phone (short viewport) ── */ +@media (max-height: 500px) and (orientation: landscape) { + :root { --header-height: 42px; } + .lt-main { padding-top: calc(42px + var(--space-md)); } + .lt-boot-overlay { display: none; } + .lt-modal { + align-items: flex-start; + padding-top: 48px; + overflow-y: auto; + } + .lt-modal .lt-modal { max-height: calc(100vh - 56px); overflow-y: auto; } +} + + +/* ── LG — laptops 1024–1279px ── */ +@media (max-width: 1279px) { + .lt-grid-4 { grid-template-columns: repeat(2, 1fr); } + .lt-container { padding: var(--space-lg); } +} + + +/* ── MD — tablets portrait 768–1023px ── */ +@media (max-width: 1023px) { + .lt-menu-btn { display: flex; } + .lt-nav { display: none; } + + .lt-grid-3, .lt-grid-4 { grid-template-columns: repeat(2, 1fr); } + .lt-stats-grid { grid-template-columns: repeat(2, 1fr); } + .lt-container { padding: var(--space-md) var(--space-lg); } + .lt-header { padding: 0 var(--space-lg); } + + /* Sidebar becomes off-canvas on tablets */ + .lt-sidebar { + position: fixed; + top: var(--header-height); + left: 0; bottom: 0; + width: var(--sidebar-width); + transform: translateX(-100%); + transition: transform 0.25s ease; + z-index: var(--z-fixed); + border-right: 1px solid var(--border-color); + overflow-y: auto; + } + .lt-sidebar.open { transform: translateX(0); } + .lt-layout { display: block; } + .lt-content { width: 100%; } +} + + +/* ── SM — phones 480–767px ── */ +@media (max-width: 767px) { + :root { --header-height: 50px; } + .lt-main, .lt-main.lt-container { padding-top: calc(50px + var(--space-md)); } + + .lt-container { padding: var(--space-md); } + .lt-header { padding: 0 var(--space-md); } + .lt-brand-subtitle { display: none; } + + .lt-grid-2, .lt-grid-3, .lt-grid-4 { grid-template-columns: 1fr; } + .lt-stats-grid { grid-template-columns: repeat(2, 1fr); } + + .lt-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-sm); } + .lt-toolbar-left, .lt-toolbar-right { flex-wrap: wrap; gap: var(--space-xs); } + .lt-search { flex: 1 1 100%; } + .lt-search .lt-search-input { width: 100%; } + .lt-page-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } + .lt-btn-group { flex-wrap: wrap; } + + /* Kanban: stay 2-col on SM so columns remain legible */ + #tab-kanban .lt-grid-4 { grid-template-columns: repeat(2, 1fr); } + + /* Drawer form 2-col → 1-col on SM */ + .lt-drawer-form-grid { grid-template-columns: 1fr !important; } + + /* Full-width modals on phone */ + .lt-modal { + width: 96vw; + max-height: 90vh; + overflow-y: auto; + } + + /* Command palette full-width */ + .lt-cmd-palette { + max-width: 96vw; + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); + } + + /* Smaller clip corners feel better on mobile */ + .lt-frame { + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); + } + .lt-card { + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); + } + + /* Toast full-width on phone */ + #lt-toast-container { + left: var(--space-sm); + right: var(--space-sm); + bottom: var(--space-md); + } + .lt-toast { width: 100%; } + + /* Stepper goes vertical on small screens */ + .lt-stepper { flex-direction: column; gap: var(--space-sm); } + .lt-step { flex-direction: row; align-items: center; gap: var(--space-md); text-align: left; } + .lt-step:not(:last-child)::after { + display: none; + } + .lt-step-num { margin-bottom: 0; flex-shrink: 0; } + + /* KV grid stacks on mobile */ + .lt-kv-grid { grid-template-columns: 1fr; } + .lt-kv-key { border-right: none; border-bottom: 1px solid var(--border-dim); padding: var(--space-xs) 0 2px; } + .lt-kv-val { padding: 2px 0 var(--space-sm); } + + /* Pagination compact — show fewer buttons via CSS */ + .lt-page-btn:not(.active):not(:first-child):not(:last-child):not([disabled]) { + display: none; + } + .lt-page-btn.active, + .lt-page-btn:first-child, + .lt-page-btn:last-child { display: inline-flex; } + + /* Dropzone: smaller on mobile */ + .lt-dropzone { padding: var(--space-lg) var(--space-md); } + .lt-dropzone-icon { font-size: 1.5rem; } + + /* Section body: tighter on mobile */ + .lt-section-body { padding: var(--space-sm); padding-right: var(--space-md); } + + /* Data table card mode already at 640px; also reduce font */ + .lt-data-table th, + .lt-data-table td { padding: 0.5rem 0.6rem; font-size: 0.75rem; } + + /* Hero */ + .lt-hero { padding: var(--space-lg) 0; } + .lt-hero-actions { flex-direction: column; align-items: stretch; } + + /* Code block: tighter font on phone */ + .lt-code-block pre { font-size: 0.72rem; } + + /* Stats grid gap tighter */ + .lt-stats-grid { gap: var(--space-sm); } + .lt-stat-card { padding: var(--space-sm); } + .lt-stat-value { font-size: 1.6rem; } +} + + +/* ── XS — tiny phones ≤ 479px ── */ +@media (max-width: 479px) { + :root { --header-height: 46px; } + .lt-main, .lt-main.lt-container { padding-top: calc(46px + var(--space-sm)); } + + .lt-container { padding: var(--space-sm); } + .lt-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); } + .lt-stat-card { padding: var(--space-xs) var(--space-sm); } + .lt-stat-value { font-size: 1.4rem; } + + .lt-frame { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); } + /* Ensure content clears the 6px clipped corner */ + .lt-section-body { padding: var(--space-xs) var(--space-sm); padding-right: 14px; } + + /* Full-width drawer on tiny phones */ + .lt-nav-drawer { width: 100%; max-width: 100vw; } + + /* Btn groups stack vertically only in primary action areas, not everywhere */ + .lt-page-header .lt-btn-group { flex-direction: column; width: 100%; } + .lt-page-header .lt-btn-group .lt-btn { width: 100%; } + + /* Full-screen bottom-sheet modal on XS */ + .lt-modal-overlay { align-items: flex-end; padding: 0; } + .lt-modal { + width: 100%; + max-width: 100vw; + max-height: 92vh; + overflow-y: auto; + clip-path: none; + border: none; + border-top: 1px solid var(--border-color); + border-radius: 0; + /* Bottom sheet rounding illusion via top corners */ + clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px); + } + .lt-modal-body { max-height: calc(92vh - 120px); overflow-y: auto; } + + /* Full-screen bottom-sheet command palette on XS */ + .lt-cmd-overlay { align-items: flex-end; padding-top: 0; } + .lt-cmd-palette { + max-width: 100%; + width: 100%; + clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px); + border-bottom: none; + } + + .lt-data-table th, + .lt-data-table td { padding: 0.4rem 0.5rem; font-size: 0.75rem; } + + .lt-tab { padding: var(--space-xs) var(--space-sm); font-size: 0.7rem; } + + /* Toolbar stacks fully on XS */ + .lt-toolbar-left, .lt-toolbar-right { + flex-wrap: wrap; + gap: var(--space-xs); + width: 100%; + } + .lt-search { flex: 1 1 100%; } + .lt-search .lt-search-input { width: 100%; } + .lt-dropdown-wrap { flex: 0 0 auto; } + + /* Grid gap tighter on XS */ + .lt-grid-2, .lt-grid-3, .lt-grid-4 { gap: var(--space-sm); } + + /* Stats grid: 2-col but with tighter gap already set above */ + .lt-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); } + + /* Kanban: stay 2-col on XS so columns are still readable */ + #tab-kanban .lt-grid-4 { grid-template-columns: repeat(2, 1fr); } + + /* Drawer form 2-col → 1-col on XS */ + .lt-drawer-form-grid { grid-template-columns: 1fr !important; } + + /* Dropdowns: constrain to viewport on XS */ + .lt-dropdown-panel { min-width: unset; max-width: 92vw; left: 0; right: auto; } + .lt-dropdown-panel--right { left: auto; right: 0; } + + /* Notification panel: constrain to viewport */ + .lt-notif-panel { width: min(300px, 92vw); } + + /* Pagination: show prev/next + active only on XS */ + .lt-page-btn:not(.active):not(:first-child):not(:last-child):not([disabled]) { display: none; } + .lt-page-btn.active, + .lt-page-btn:first-child, + .lt-page-btn:last-child { display: inline-flex; } +} + + +/* ── 2XL — large desktops 1536–1919px ── */ +@media (min-width: 1536px) { + :root { --container-max: 1800px; } + .lt-header { padding: 0 var(--space-2xl); } + .lt-stats-grid { grid-template-columns: repeat(5, 1fr); } +} + + +/* ── 3XL — full HD 1920–2559px ── */ +@media (min-width: 1920px) { + :root { --container-max: 2000px; } + .lt-stats-grid { grid-template-columns: repeat(6, 1fr); } + .lt-grid-4 { grid-template-columns: repeat(4, 1fr); } + .lt-container { padding: var(--space-xl) var(--space-2xl); } +} + + +/* ── 4K / ULTRA-WIDE ≥ 2560px ── */ +@media (min-width: 2560px) { + html { font-size: 18px; } /* scales all rem-based values ~12% larger */ + :root { + --container-max: 2400px; + --header-height: 4rem; /* 72px at 18px base — was 64px hardcoded */ + --sidebar-width: 17.5rem; /* 315px at 18px base — was 280px hardcoded */ + } + /* Clip-path corners scale proportionally */ + .lt-frame { + clip-path: polygon(0 0, calc(100% - 1.25rem) 0, 100% 1.25rem, 100% 100%, 1.25rem 100%, 0 calc(100% - 1.25rem)); + } + .lt-card { + clip-path: polygon(0 0, calc(100% - 0.75rem) 0, 100% 0.75rem, 100% 100%, 0 100%); + } + .lt-stats-grid { grid-template-columns: repeat(8, 1fr); } + /* Scale hardcoded-px elements explicitly at 4K */ + .lt-dot { width: 0.6rem; height: 0.6rem; } /* was 8px */ + .lt-menu-btn { width: 2.5rem; height: 2.5rem; } /* was 36px */ + .lt-nav-drawer-close { width: 3rem; height: 3rem; } /* was 44px */ + .lt-step-num { width: 2rem; height: 2rem; } /* was 28px */ + .lt-spinner { width: 1.75rem; height: 1.75rem; } /* was 24px */ + .lt-spinner--sm { width: 1rem; height: 1rem; } /* was 14px */ + .lt-spinner--lg { width: 2.75rem; height: 2.75rem; } /* was 40px */ + .lt-checkbox, .lt-radio { width: 1.1rem; height: 1.1rem; } /* was 14px */ + /* More pronounced glows at 4K */ + :root { + --glow-orange: 0 0 8px #FF6B00, 0 0 24px rgba(255,107,0,0.6); + --glow-cyan: 0 0 8px #00D4FF, 0 0 24px rgba(0,212,255,0.6); + --glow-green: 0 0 8px #00FF88, 0 0 22px rgba(0,255,136,0.55); + --glow-red: 0 0 8px #FF2D55, 0 0 22px rgba(255,45,85,0.55); + --glow-orange-intense: 0 0 10px #FF6B00, 0 0 28px #FF6B00, 0 0 50px rgba(255,107,0,0.5); + --glow-cyan-intense: 0 0 10px #00D4FF, 0 0 28px #00D4FF, 0 0 48px rgba(0,212,255,0.4); + --glow-green-intense: 0 0 10px #00FF88, 0 0 26px #00FF88, 0 0 44px rgba(0,255,136,0.4); + --glow-amber-intense: 0 0 10px #FFB300, 0 0 24px #FFB300, 0 0 42px rgba(255,179,0,0.5); + } +} + + +/* ── Breakpoint visibility utilities ── */ +/* Hide at specific breakpoints */ +@media (max-width: 479px) { .lt-hide-xs { display: none !important; } } +@media (max-width: 767px) { .lt-hide-sm { display: none !important; } } +@media (max-width: 1023px) { .lt-hide-md { display: none !important; } } +@media (max-width: 1279px) { .lt-hide-lg { display: none !important; } } +@media (min-width: 480px) { .lt-show-xs { display: none !important; } } +@media (min-width: 768px) { .lt-show-sm { display: none !important; } } +@media (min-width: 1024px) { .lt-show-md { display: none !important; } } +@media (min-width: 1280px) { .lt-show-lg { display: none !important; } } +/* Touch-only / desktop-only */ +@media (pointer: fine) { .lt-touch-only { display: none !important; } } +@media (pointer: coarse) { .lt-mouse-only { display: none !important; } } + + +/* ---------------------------------------------------------------- + 24. UTILITY CLASSES + ---------------------------------------------------------------- */ +.lt-text-orange { color: var(--accent-orange); text-shadow: var(--glow-orange); } +.lt-text-amber { color: var(--accent-amber); text-shadow: var(--glow-amber); } +.lt-text-cyan { color: var(--accent-cyan); text-shadow: var(--glow-cyan); } +.lt-text-green { color: var(--accent-green); text-shadow: var(--glow-green); } +.lt-text-red { color: var(--accent-red); text-shadow: var(--glow-red); } +.lt-text-muted { color: var(--text-muted); } +.lt-text-dim { color: var(--text-dim); } + +.lt-text-xs { font-size: 0.63rem; } +.lt-text-sm { font-size: 0.78rem; } +.lt-text-lg { font-size: 1rem; } +.lt-text-xl { font-size: 1.2rem; } +.lt-text-upper { text-transform: uppercase; letter-spacing: 0.1em; } + +.lt-hidden { display: none !important; } + +/* Skip navigation link — visible only on focus */ +.lt-skip-link { + position: absolute; + top: -100%; + left: var(--space-sm); + padding: var(--space-xs) var(--space-md); + background: var(--bg-terminal); + color: var(--accent-cyan); + border: 1px solid var(--accent-cyan); + font-family: var(--font-mono); + font-size: 0.8rem; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; + z-index: var(--z-toast); + transition: top 0.1s; +} +.lt-skip-link:focus, .lt-skip-link:focus-visible { top: var(--space-sm); } + +.lt-sr-only { + position: absolute; + width: 1px; height: 1px; + padding: 0; margin: -1px; + overflow: hidden; + clip-path: inset(50%); /* replaces deprecated clip: rect(0,0,0,0) */ + white-space: nowrap; + border: 0; +} + +/* Cursor blink */ +.lt-cursor::after { + content: '█'; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); + animation: blink 1s step-start infinite; + font-size: 0.85em; + margin-left: 1px; +} +@media (prefers-reduced-motion: reduce) { + .lt-cursor::after { animation: none; } +} + +/* Glitch text effect */ +.lt-glitch { position: relative; } +.lt-glitch::before, +.lt-glitch::after { + content: attr(data-text); + position: absolute; + top: 0; left: 0; + width: 100%; + overflow: hidden; +} +.lt-glitch::before { + color: var(--accent-cyan); + opacity: 0.65; + animation: glitch-1 4s infinite; + will-change: clip-path, transform; +} +.lt-glitch::after { + color: var(--accent-orange); + opacity: 0.65; + animation: glitch-2 4s 0.12s infinite; + will-change: clip-path, transform; +} + + +/* ---------------------------------------------------------------- + 25. PRINT STYLES + ---------------------------------------------------------------- */ +@media print { + body::before, body::after { display: none; } + html { background-image: none; background-color: white; } + body { background: white; color: black; } + .lt-header, .lt-boot-overlay, #lt-toast-container { display: none; } + .lt-frame, .lt-card { border: 1px solid #ccc; clip-path: none; } +} + + +/* ---------------------------------------------------------------- + 26. ACCESSIBILITY + ---------------------------------------------------------------- */ +:focus-visible { + outline: 1px solid var(--accent-cyan); + outline-offset: 2px; + box-shadow: var(--box-glow-cyan); +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + + +/* ---------------------------------------------------------------- + 27. PROGRESS BARS + ---------------------------------------------------------------- */ +.lt-progress { + width: 100%; + height: 6px; + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + overflow: hidden; + position: relative; +} +.lt-progress-bar { + height: 100%; + background: linear-gradient(90deg, var(--accent-orange), #ff8c2b); + box-shadow: var(--glow-orange); + transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; +} +.lt-progress-bar::after { + content: ''; + position: absolute; + top: 0; right: 0; + width: 20px; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4)); +} +.lt-progress--cyan .lt-progress-bar { background: linear-gradient(90deg, var(--accent-cyan), #33dfff); box-shadow: var(--glow-cyan); } +.lt-progress--green .lt-progress-bar { background: linear-gradient(90deg, var(--accent-green), #33ffaa); box-shadow: var(--glow-green); } +.lt-progress--red .lt-progress-bar { background: linear-gradient(90deg, var(--accent-red), #ff4466); box-shadow: var(--glow-red); } +.lt-progress--striped .lt-progress-bar { + background-image: repeating-linear-gradient( + 45deg, transparent, transparent 4px, + rgba(0,0,0,0.25) 4px, rgba(0,0,0,0.25) 8px + ); +} +.lt-progress--lg { height: 12px; } +.lt-progress--sm { height: 3px; } +.lt-progress-label { + display: flex; + justify-content: space-between; + font-size: 0.7rem; + color: var(--text-dim); + margin-bottom: var(--space-xs); + font-family: var(--font-mono); + text-transform: uppercase; + letter-spacing: 0.05em; +} + + +/* ---------------------------------------------------------------- + 28. TOOLTIPS + ---------------------------------------------------------------- */ +[data-tooltip] { + position: relative; + cursor: help; +} +[data-tooltip]::before, +[data-tooltip]::after { + position: absolute; + opacity: 0; + pointer-events: none; + transition: opacity 0.15s ease, transform 0.15s ease; + z-index: var(--z-tooltip); +} +[data-tooltip]::before { + content: attr(data-tooltip); + background: var(--bg-secondary); + border: 1px solid var(--accent-cyan); + box-shadow: var(--box-glow-cyan); + color: var(--text-primary); + font-family: var(--font-mono); + font-size: 0.7rem; + padding: 4px 8px; + white-space: nowrap; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%) translateY(4px); + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); +} +[data-tooltip]::after { + content: ''; + border: 5px solid transparent; + border-top-color: var(--accent-cyan); + bottom: calc(100% + 3px); + left: 50%; + transform: translateX(-50%) translateY(4px); +} +[data-tooltip]:hover::before, +[data-tooltip]:focus-visible::before, +[data-tooltip]:hover::after, +[data-tooltip]:focus-visible::after { + opacity: 1; + transform: translateX(-50%) translateY(0); +} +[data-tooltip][data-tooltip-pos="bottom"]::before { + bottom: auto; + top: calc(100% + 8px); + transform: translateX(-50%) translateY(-4px); + clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); +} +[data-tooltip][data-tooltip-pos="bottom"]::after { + bottom: auto; + top: calc(100% + 3px); + border-top-color: transparent; + border-bottom-color: var(--accent-cyan); + transform: translateX(-50%) translateY(-4px); +} +[data-tooltip][data-tooltip-pos="bottom"]:hover::before, +[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::before, +[data-tooltip][data-tooltip-pos="bottom"]:hover::after, +[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after { + transform: translateX(-50%) translateY(0); +} + + +/* ---------------------------------------------------------------- + 29. BREADCRUMBS + ---------------------------------------------------------------- */ +.lt-breadcrumb { + display: flex; + align-items: center; + gap: var(--space-xs); + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--text-dim); + flex-wrap: wrap; +} +.lt-breadcrumb-item { display: flex; align-items: center; gap: var(--space-xs); } +.lt-breadcrumb-item a { + color: var(--text-dim); + text-decoration: none; + transition: color 0.15s; +} +.lt-breadcrumb-item a:hover { color: var(--accent-cyan); } +.lt-breadcrumb-item a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } +.lt-breadcrumb-item.active { color: var(--accent-orange); } +.lt-breadcrumb-sep { color: var(--border-dim); } +.lt-breadcrumb-sep::before { content: '/'; } + + +/* ---------------------------------------------------------------- + 30. PAGINATION + ---------------------------------------------------------------- */ +.lt-pagination { + display: flex; + align-items: center; + gap: 4px; + font-family: var(--font-mono); + font-size: 0.75rem; +} +.lt-page-btn { + padding: 4px 10px; + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + color: var(--text-secondary); + cursor: pointer; + transition: all 0.15s; + text-decoration: none; + clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%); +} +.lt-page-btn:hover { + border-color: var(--accent-cyan); + color: var(--accent-cyan); + box-shadow: var(--box-glow-cyan); +} +.lt-page-btn.active { + background: var(--accent-orange); + border-color: var(--accent-orange); + color: var(--bg-primary); + box-shadow: var(--glow-orange); + font-weight: 700; +} +.lt-page-btn:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: 1px; + border-color: var(--accent-cyan); + color: var(--accent-cyan); +} +.lt-page-btn:disabled, +.lt-page-btn[aria-disabled="true"] { + opacity: 0.35; + cursor: not-allowed; + pointer-events: none; +} + + +/* ---------------------------------------------------------------- + 31. ACCORDION + ---------------------------------------------------------------- */ +.lt-accordion { border: 1px solid var(--border-dim); } +.lt-accordion + .lt-accordion { border-top: none; } +.lt-accordion-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-sm) var(--space-md); + background: var(--bg-secondary); + cursor: pointer; + font-family: var(--font-mono); + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-primary); + transition: background 0.15s, color 0.15s; + user-select: none; + border: none; + width: 100%; + text-align: left; +} +.lt-accordion-header:hover { background: var(--bg-tertiary); color: var(--accent-cyan); } +.lt-accordion-header:active { background: var(--bg-tertiary); opacity: 0.8; } +.lt-accordion-header:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; } +.lt-accordion-header[aria-expanded="true"] { color: var(--accent-orange); } +.lt-accordion-icon { + width: 14px; + height: 14px; + transition: transform 0.25s ease; + flex-shrink: 0; +} +.lt-accordion-header[aria-expanded="true"] .lt-accordion-icon { transform: rotate(180deg); } +.lt-accordion-body { + overflow: hidden; + height: 0; + transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1); + background: var(--bg-primary); +} +/* .is-open height is set dynamically by JS (scrollHeight) */ +.lt-accordion-body.is-open { height: auto; } +.lt-accordion-content { padding: var(--space-md); } + + +/* ---------------------------------------------------------------- + 32. ALERT BANNERS + ---------------------------------------------------------------- */ +.lt-alert { + display: flex; + align-items: flex-start; + gap: var(--space-sm); + padding: var(--space-sm) var(--space-md); + border-left: 3px solid var(--accent-cyan); + background: rgba(0,212,255,0.06); + font-family: var(--font-mono); + font-size: 0.8rem; + position: relative; + overflow: hidden; + transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease; + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); +} +.lt-alert--warning { border-left-color: var(--accent-orange); background: rgba(255,107,0,0.06); } +.lt-alert--error { border-left-color: var(--accent-red); background: rgba(255,45,85,0.06); } +.lt-alert--success { border-left-color: var(--accent-green); background: rgba(0,255,136,0.06); } +.lt-alert--purple { border-left-color: var(--accent-purple); background: rgba(191,95,255,0.06); } +.lt-alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; } +.lt-alert-body { flex: 1; } +.lt-alert-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); margin-bottom: 2px; } +.lt-alert-msg { color: var(--text-secondary); } +.lt-alert-close { + background: none; + border: none; + color: var(--text-dim); + cursor: pointer; + font-size: 1rem; + padding: 0 0 0 var(--space-sm); + line-height: 1; + flex-shrink: 0; + transition: color 0.15s; +} +.lt-alert-close:hover { color: var(--accent-red); } +.lt-alert-close:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } +.lt-alert.dismissed { max-height: 0 !important; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; } + + +/* ---------------------------------------------------------------- + 33. TOGGLE SWITCH + ---------------------------------------------------------------- */ +.lt-toggle { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + cursor: pointer; + font-family: var(--font-mono); + font-size: 0.8rem; +} +/* Visually hidden but still keyboard-focusable */ +.lt-toggle input { + position: absolute; + opacity: 0; + width: 1px; height: 1px; + margin: -1px; padding: 0; + border: 0; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; +} +.lt-toggle input:focus-visible ~ .lt-toggle-track { + outline: 2px solid var(--accent-cyan); + outline-offset: 2px; +} +.lt-toggle-track { + width: 36px; + height: 18px; + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + border-radius: 0; + position: relative; + transition: all 0.2s ease; + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); +} +.lt-toggle input:checked ~ .lt-toggle-track { + background: var(--accent-orange); + border-color: var(--accent-orange); + box-shadow: var(--glow-orange); +} +.lt-toggle-thumb { + position: absolute; + top: 2px; left: 2px; + width: 12px; height: 12px; + background: var(--text-dim); + transition: transform 0.2s ease, background 0.2s ease; +} +.lt-toggle input:checked ~ .lt-toggle-track .lt-toggle-thumb { + transform: translateX(18px); + background: var(--bg-primary); +} +.lt-toggle-label { color: var(--text-secondary); user-select: none; } +.lt-toggle input:checked ~ .lt-toggle-label { color: var(--text-primary); } + + +/* ---------------------------------------------------------------- + 34. RANGE SLIDER + ---------------------------------------------------------------- */ +.lt-range-wrap { display: flex; flex-direction: column; gap: var(--space-xs); } +.lt-range-header { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.75rem; } +.lt-range-label { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } +.lt-range-value { color: var(--accent-orange); font-weight: 700; } +input[type="range"].lt-range { + -webkit-appearance: none; + width: 100%; + height: 4px; + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + outline: none; /* reset; :focus-visible below provides keyboard ring */ + cursor: pointer; +} +input[type="range"].lt-range:focus-visible { + outline: 2px solid var(--accent-orange); + outline-offset: 4px; +} +input[type="range"].lt-range:disabled { + opacity: 0.4; + cursor: not-allowed; +} +input[type="range"].lt-range::-webkit-slider-thumb { + -webkit-appearance: none; + width: 14px; height: 14px; + background: var(--accent-orange); + box-shadow: var(--glow-orange); + cursor: pointer; + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + transition: transform 0.15s; +} +input[type="range"].lt-range::-webkit-slider-thumb:hover { transform: scale(1.3); } +input[type="range"].lt-range:focus-visible::-webkit-slider-thumb { transform: scale(1.3); box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 5px var(--accent-cyan); } +input[type="range"].lt-range::-moz-range-thumb { + width: 14px; height: 14px; + background: var(--accent-orange); + border: none; + cursor: pointer; +} + + +/* ---------------------------------------------------------------- + 35. FILE UPLOAD / DROPZONE + ---------------------------------------------------------------- */ +.lt-dropzone { + border: 2px dashed var(--border-dim); + background: var(--bg-secondary); + padding: var(--space-xl); + text-align: center; + cursor: pointer; + transition: all 0.2s ease; + font-family: var(--font-mono); + position: relative; + clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); +} +.lt-dropzone:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; } +.lt-dropzone:hover, +.lt-dropzone.drag-over { + border-color: var(--accent-cyan); + background: rgba(0,212,255,0.05); + box-shadow: var(--box-glow-cyan); +} +.lt-dropzone-icon { font-size: 2rem; margin-bottom: var(--space-sm); opacity: 0.5; } +.lt-dropzone-text { color: var(--text-secondary); font-size: 0.8rem; } +.lt-dropzone-text strong { color: var(--accent-cyan); } +.lt-dropzone-hint { font-size: 0.7rem; color: var(--text-dim); margin-top: var(--space-xs); } +.lt-dropzone input[type="file"] { + position: absolute; + inset: 0; + opacity: 0; + cursor: pointer; +} +.lt-file-list { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 4px; } +.lt-file-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 4px var(--space-sm); + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + font-size: 0.75rem; + font-family: var(--font-mono); +} +.lt-file-item-name { color: var(--text-secondary); } +.lt-file-item-size { color: var(--text-dim); } +.lt-file-item-remove { background: none; border: none; color: var(--accent-red); cursor: pointer; padding: 0; font-size: 0.9rem; } +.lt-file-item-remove:hover { opacity: 0.75; text-shadow: var(--glow-red); } +.lt-file-item-remove:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } + + +/* ---------------------------------------------------------------- + 36. COMMAND PALETTE + ---------------------------------------------------------------- */ +.lt-cmd-overlay { + position: fixed; + inset: 0; + background: rgba(3,5,8,0.85); + backdrop-filter: blur(4px); + z-index: var(--z-modal); + display: none; + align-items: flex-start; + justify-content: center; + padding-top: 12vh; +} +.lt-cmd-overlay.is-open { display: flex; } +.lt-cmd-palette { + width: 100%; + max-width: 560px; + background: var(--bg-secondary); + border: 1px solid var(--accent-cyan); + box-shadow: var(--box-glow-cyan); + clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); +} +.lt-cmd-input-wrap { + display: flex; + align-items: center; + padding: var(--space-sm) var(--space-md); + border-bottom: 1px solid var(--border-dim); + gap: var(--space-sm); +} +.lt-cmd-prompt { color: var(--accent-cyan); font-family: var(--font-mono); font-size: 1rem; } +.lt-cmd-input { + flex: 1; + background: none; + border: none; + outline: none; + color: var(--text-primary); + font-family: var(--font-mono); + font-size: 0.9rem; + caret-color: var(--accent-orange); +} +.lt-cmd-input-wrap:focus-within { border-bottom-color: var(--accent-cyan); } +.lt-cmd-results { max-height: 320px; overflow-y: auto; } +.lt-cmd-group-label { + padding: var(--space-xs) var(--space-md); + font-family: var(--font-mono); + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text-dim); + border-bottom: 1px solid var(--border-dim); +} +.lt-cmd-item { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: var(--space-sm) var(--space-md); + cursor: pointer; + font-family: var(--font-mono); + font-size: 0.8rem; + transition: background 0.1s; +} +.lt-cmd-item:hover, +.lt-cmd-item.is-selected, +.lt-cmd-item:focus-visible { + background: rgba(0,212,255,0.08); + color: var(--accent-cyan); +} +.lt-cmd-item-icon { width: 16px; text-align: center; opacity: 0.6; flex-shrink: 0; } +.lt-cmd-item-label { flex: 1; } +.lt-cmd-item-kbd { + font-size: 0.65rem; + padding: 2px 5px; + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + color: var(--text-dim); +} +.lt-cmd-footer { + display: flex; + gap: var(--space-md); + padding: var(--space-xs) var(--space-md); + border-top: 1px solid var(--border-dim); + font-family: var(--font-mono); + font-size: 0.65rem; + color: var(--text-dim); +} +.lt-cmd-footer kbd { background: var(--bg-tertiary); border: 1px solid var(--border-dim); padding: 1px 4px; margin: 0 2px; } +.lt-cmd-empty { + padding: var(--space-lg); + text-align: center; + font-family: var(--font-mono); + font-size: 0.8rem; + color: var(--text-dim); +} + + +/* ---------------------------------------------------------------- + 37. CODE BLOCKS + ---------------------------------------------------------------- */ +.lt-code-block { + position: relative; + background: var(--bg-secondary); + border: 1px solid var(--border-dim); + overflow: hidden; +} +.lt-code-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px var(--space-md); + background: var(--bg-tertiary); + border-bottom: 1px solid var(--border-dim); +} +.lt-code-lang { + font-family: var(--font-mono); + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--accent-orange); +} +.lt-code-copy { + background: none; + border: 1px solid var(--border-dim); + color: var(--text-dim); + font-family: var(--font-mono); + font-size: 0.65rem; + padding: 2px 8px; + cursor: pointer; + text-transform: uppercase; + letter-spacing: 0.05em; + transition: all 0.15s; +} +.lt-code-copy:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); } +.lt-code-copy:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } +.lt-code-copy.copied { border-color: var(--accent-green); color: var(--accent-green); } +.lt-code-block pre { + margin: 0; + padding: var(--space-md); + overflow-x: auto; + overflow-y: auto; + font-family: var(--font-mono); + font-size: 0.8rem; + line-height: 1.6; + color: var(--text-secondary); + max-height: 400px; +} +.lt-code-block code { background: none; border: none; padding: 0; color: inherit; } +/* Syntax highlight tokens */ +.tok-kw { color: var(--accent-cyan); } +.tok-str { color: var(--accent-green); } +.tok-num { color: var(--accent-orange); } +.tok-cmt { color: var(--color-tok-cmt); font-style: italic; } +.tok-fn { color: var(--accent-purple); } + + +/* ---------------------------------------------------------------- + 38. TAGS / CHIPS + ---------------------------------------------------------------- */ +.lt-tags { display: flex; flex-wrap: wrap; gap: 6px; } +.lt-tag { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 8px; + font-family: var(--font-mono); + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.05em; + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + color: var(--text-secondary); + clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%); + white-space: nowrap; +} +.lt-tag--orange { border-color: var(--accent-orange); color: var(--accent-orange); background: rgba(255,107,0,0.08); } +.lt-tag--cyan { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(0,212,255,0.08); } +.lt-tag--green { border-color: var(--accent-green); color: var(--accent-green); background: rgba(0,255,136,0.08); } +.lt-tag--red { border-color: var(--accent-red); color: var(--accent-red); background: rgba(255,45,85,0.08); } +.lt-tag--purple { border-color: var(--accent-purple); color: var(--accent-purple); background: rgba(191,95,255,0.08); } +.lt-tag-remove { + background: none; + border: none; + color: inherit; + cursor: pointer; + padding: 0; + font-size: 0.8rem; + opacity: 0.6; + line-height: 1; +} +.lt-tag-remove:hover { opacity: 1; } +.lt-tag-remove:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; border-radius: 2px; opacity: 1; } + + +/* ---------------------------------------------------------------- + 39. NOTIFICATION BADGES + ---------------------------------------------------------------- */ +.lt-badge-wrap { position: relative; display: inline-flex; } +/* Notification counter badge — only absolute when inside .lt-badge-wrap */ +.lt-badge-wrap .lt-badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 4px; + font-family: var(--font-mono); + font-size: 0.65rem; + font-weight: 700; + background: var(--accent-red); + color: var(--bg-primary); + position: absolute; + top: -6px; right: -8px; + box-shadow: 0 0 6px var(--accent-red); +} +.lt-badge-wrap .lt-badge--orange { background: var(--accent-orange); box-shadow: var(--glow-orange); } +.lt-badge-wrap .lt-badge--cyan { background: var(--accent-cyan); box-shadow: var(--glow-cyan); color: var(--bg-primary); } +.lt-badge-wrap .lt-badge--green { background: var(--accent-green); box-shadow: var(--glow-green); color: var(--bg-primary); } +.lt-badge-inline { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 5px; + font-family: var(--font-mono); + font-size: 0.65rem; + font-weight: 700; + background: var(--accent-orange); + color: var(--bg-primary); + vertical-align: middle; +} + + +/* ---------------------------------------------------------------- + 40. STEPPER / WIZARD + ---------------------------------------------------------------- */ +.lt-stepper { + display: flex; + align-items: flex-start; + gap: 0; +} +.lt-step { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + font-family: var(--font-mono); + font-size: 0.7rem; + text-align: center; +} +.lt-step:not(:last-child)::after { + content: ''; + position: absolute; + top: 14px; + left: calc(50% + 14px); + right: calc(-50% + 14px); + height: 1px; + background: var(--border-dim); +} +.lt-step.complete:not(:last-child)::after { background: var(--accent-orange); } +.lt-step-num { + width: 28px; height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--border-dim); + background: var(--bg-secondary); + color: var(--text-dim); + font-weight: 700; + margin-bottom: 6px; + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); +} +.lt-step.active .lt-step-num { + border-color: var(--accent-orange); + background: var(--accent-orange); + color: var(--bg-primary); + box-shadow: var(--glow-orange); +} +.lt-step.complete .lt-step-num { + border-color: var(--accent-green); + background: var(--bg-secondary); + color: var(--accent-green); + box-shadow: var(--glow-green); +} +.lt-step-label { color: var(--text-dim); } +.lt-step.active .lt-step-label { color: var(--text-primary); } +.lt-step.complete .lt-step-label { color: var(--text-secondary); } + + +/* ---------------------------------------------------------------- + 41. LIST GROUPS + ---------------------------------------------------------------- */ +.lt-list-group { border: 1px solid var(--border-dim); } +.lt-list-item { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: var(--space-sm) var(--space-md); + border-bottom: 1px solid var(--border-dim); + font-family: var(--font-mono); + font-size: 0.8rem; + transition: background 0.12s; +} +.lt-list-item:last-child { border-bottom: none; } +.lt-list-item:hover { background: var(--bg-tertiary); } +.lt-list-item a { + color: var(--text-primary); + text-decoration: none; + flex: 1; +} +.lt-list-item a:hover { color: var(--accent-cyan); } +.lt-list-item a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } +.lt-list-item-meta { color: var(--text-dim); font-size: 0.7rem; margin-left: auto; } +.lt-list-item--active { background: rgba(255,107,0,0.06); border-left: 2px solid var(--accent-orange); } + + +/* ---------------------------------------------------------------- + 42. KEY-VALUE PAIRS / DATA GRID + ---------------------------------------------------------------- */ +.lt-kv-grid { + display: grid; + grid-template-columns: max-content 1fr; + gap: 1px; + font-family: var(--font-mono); + font-size: 0.8rem; +} +.lt-kv-key { + padding: var(--space-xs) var(--space-md) var(--space-xs) 0; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.05em; + font-size: 0.7rem; + white-space: nowrap; + border-right: 1px solid var(--border-dim); +} +.lt-kv-val { + padding: var(--space-xs) 0 var(--space-xs) var(--space-md); + color: var(--text-primary); +} +.lt-kv-val--orange { color: var(--accent-orange); } +.lt-kv-val--cyan { color: var(--accent-cyan); } +.lt-kv-val--green { color: var(--accent-green); } +.lt-kv-val--red { color: var(--accent-red); } + +/* lt-kv-row / lt-kv-label / lt-kv-value — alternate KV row pattern using + CSS `display: contents` so children become direct grid items of lt-kv-grid */ +.lt-kv-row { + display: contents; +} +.lt-kv-label { + padding: var(--space-xs) var(--space-md) var(--space-xs) 0; + color: var(--text-dim); + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; + white-space: nowrap; + border-bottom: 1px solid var(--border-dim); + align-self: center; +} +.lt-kv-value { + padding: var(--space-xs) 0 var(--space-xs) var(--space-md); + color: var(--text-primary); + border-bottom: 1px solid var(--border-dim); + min-width: 0; + overflow-wrap: break-word; + align-self: center; +} + + +/* ---------------------------------------------------------------- + 43. HERO / BANNER SECTION + ---------------------------------------------------------------- */ +.lt-hero { + position: relative; + padding: var(--space-xl) 0; + text-align: center; + overflow: hidden; +} +.lt-hero::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,107,0,0.08) 0%, transparent 70%); + pointer-events: none; +} +.lt-hero-eyebrow { + font-family: var(--font-mono); + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.2em; + color: var(--accent-orange); + margin-bottom: var(--space-sm); +} +.lt-hero-title { + font-family: var(--font-mono); + font-size: clamp(1.8rem, 5vw, 3.5rem); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-primary); + text-shadow: var(--glow-orange); + line-height: 1.1; + margin-bottom: var(--space-md); +} +.lt-hero-sub { + font-family: var(--font-mono); + font-size: 0.9rem; + color: var(--text-secondary); + max-width: 560px; + margin: 0 auto var(--space-lg); + line-height: 1.6; +} +.lt-hero-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } + + +/* ---------------------------------------------------------------- + 44. DIVIDER WITH LABEL + ---------------------------------------------------------------- */ +.lt-divider { + display: flex; + align-items: center; + gap: var(--space-md); + margin: var(--space-lg) 0; +} +.lt-divider::before, +.lt-divider::after { + content: ''; + flex: 1; + height: 1px; + background: var(--border-dim); +} +.lt-divider-label { + font-family: var(--font-mono); + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.15em; + color: var(--text-dim); + white-space: nowrap; +} +.lt-divider--orange::before, +.lt-divider--orange::after { background: var(--accent-orange); } +.lt-divider--orange .lt-divider-label { color: var(--accent-orange); } + + +/* ---------------------------------------------------------------- + 45. CUSTOM SCROLLBAR + ---------------------------------------------------------------- */ +::-webkit-scrollbar { width: 6px; height: 6px; } +::-webkit-scrollbar-track { background: var(--bg-primary); } +::-webkit-scrollbar-thumb { background: var(--bg-tertiary); } +::-webkit-scrollbar-thumb:hover { background: var(--accent-orange); } + + +/* ---------------------------------------------------------------- + 46. RESPONSIVE TABLE → CARD MODE + ---------------------------------------------------------------- */ +@media (max-width: 767px) { + .lt-table-responsive thead { display: none; } + .lt-table-responsive tbody tr { + display: block; + border: 1px solid var(--border-dim); + margin-bottom: var(--space-sm); + background: var(--bg-secondary); + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); + } + .lt-table-responsive td { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-xs) var(--space-sm); + border-bottom: 1px solid var(--border-dim); + font-size: 0.78rem; + min-height: 36px; + } + .lt-table-responsive td:last-child { border-bottom: none; } + .lt-table-responsive td::before { + content: attr(data-label); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-dim); + font-size: 0.72rem; + flex-shrink: 0; + margin-right: var(--space-sm); + } +} + + +/* ---------------------------------------------------------------- + 47. GAUGE / METER + ---------------------------------------------------------------- */ +.lt-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } +.lt-gauge { + position: relative; + width: 100px; + height: 55px; + overflow: visible; +} +.lt-gauge svg { overflow: visible; } +.lt-gauge-track { fill: none; stroke: var(--bg-tertiary); stroke-width: 8; } +.lt-gauge-fill { fill: none; stroke: var(--accent-orange); stroke-width: 8; stroke-linecap: butt; + transition: stroke-dashoffset 0.6s cubic-bezier(0.4,0,0.2,1); + will-change: stroke-dashoffset; } +.lt-gauge-label { + position: absolute; + bottom: 0; left: 50%; + transform: translateX(-50%); + font-family: var(--font-mono); + font-size: 1rem; + font-weight: 700; + color: var(--accent-orange); + text-shadow: var(--glow-orange); + white-space: nowrap; +} +.lt-gauge-caption { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); } + + +/* ---------------------------------------------------------------- + 48. SPINNERS / LOADERS + ---------------------------------------------------------------- */ +.lt-spinner { + display: inline-block; + width: 24px; height: 24px; + border: 2px solid var(--bg-tertiary); + border-top-color: var(--accent-orange); + border-radius: 50%; + animation: lt-spin 0.7s linear infinite; + will-change: transform; +} +.lt-spinner--cyan { border-top-color: var(--accent-cyan); } +.lt-spinner--green { border-top-color: var(--accent-green); } +.lt-spinner--sm { width: 14px; height: 14px; border-width: 1.5px; } +.lt-spinner--lg { width: 40px; height: 40px; border-width: 3px; } +@keyframes lt-spin { to { transform: rotate(360deg); } } + +.lt-pulse-dot { + display: inline-block; + width: 8px; height: 8px; + background: var(--accent-green); + border-radius: 50%; + animation: lt-pulse 1.4s ease-in-out infinite; + box-shadow: 0 0 6px var(--accent-green); +} +@keyframes lt-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.4; transform: scale(0.7); } +} + +.lt-bar-loader { + display: flex; + gap: 3px; + align-items: flex-end; + height: 20px; +} +.lt-bar-loader span { + width: 4px; + background: var(--accent-orange); + box-shadow: var(--glow-orange); + animation: lt-bars 1s ease-in-out infinite; +} +.lt-bar-loader span:nth-child(2) { animation-delay: 0.1s; } +.lt-bar-loader span:nth-child(3) { animation-delay: 0.2s; } +.lt-bar-loader span:nth-child(4) { animation-delay: 0.3s; } +@keyframes lt-bars { + 0%, 100% { height: 4px; } + 50% { height: 20px; } +} + + +/* ---------------------------------------------------------------- + 49. TAB BAR + ---------------------------------------------------------------- */ +.lt-tab-bar { + display: flex; + border-bottom: 1px solid var(--border-dim); + gap: 0; + overflow-x: auto; + scrollbar-width: none; +} +.lt-tab-bar::-webkit-scrollbar { display: none; } +.lt-tab { + padding: var(--space-sm) var(--space-md); + font-family: var(--font-mono); + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-dim); + cursor: pointer; + border: none; + background: none; + border-bottom: 2px solid transparent; + transition: all 0.15s; + white-space: nowrap; + text-decoration: none; + display: inline-block; +} +.lt-tab:hover { color: var(--text-secondary); } +.lt-tab.active, +.lt-tab[aria-selected="true"] { + color: var(--accent-orange); + border-bottom-color: var(--accent-orange); + text-shadow: var(--glow-orange); +} +.lt-tab-panels .lt-tab-panel { display: none; } +.lt-tab-panels .lt-tab-panel.active { display: block; } + + +/* ---------------------------------------------------------------- + 50. UTILITY CLASSES + ---------------------------------------------------------------- */ +/* Text colors */ +.lt-text-orange { color: var(--accent-orange); } +.lt-text-cyan { color: var(--accent-cyan); } +.lt-text-green { color: var(--accent-green); } +.lt-text-red { color: var(--accent-red); } +.lt-text-purple { color: var(--accent-purple); } +.lt-text-dim { color: var(--text-dim); } +.lt-text-muted { color: var(--text-secondary); } + +/* Glow text */ +.lt-glow-orange { text-shadow: var(--glow-orange); } +.lt-glow-cyan { text-shadow: var(--glow-cyan); } +.lt-glow-green { text-shadow: var(--glow-green); } +.lt-glow-red { text-shadow: var(--glow-red); } + +/* Backgrounds */ +.lt-bg-secondary { background: var(--bg-secondary); } +.lt-bg-tertiary { background: var(--bg-tertiary); } + +/* Border accents */ +.lt-border-orange { border-color: var(--accent-orange) !important; } +.lt-border-cyan { border-color: var(--accent-cyan) !important; } +.lt-border-green { border-color: var(--accent-green) !important; } +.lt-border-red { border-color: var(--accent-red) !important; } + +/* Display */ +.lt-visible { display: block !important; } +.lt-flex { display: flex; } +.lt-grid { display: grid; } +.lt-inline { display: inline; } +.lt-iflex { display: inline-flex; } + +/* Flex helpers */ +.lt-gap-xs { gap: var(--space-xs); } +.lt-gap-sm { gap: var(--space-sm); } +.lt-gap-md { gap: var(--space-md); } +.lt-gap-lg { gap: var(--space-lg); } +.lt-align-center { align-items: center; } +.lt-align-start { align-items: flex-start; } +.lt-justify-between { justify-content: space-between; } +.lt-justify-center { justify-content: center; } +.lt-justify-end { justify-content: flex-end; } +.lt-wrap { flex-wrap: wrap; } + +/* Spacing */ +.lt-mt-xs { margin-top: var(--space-xs); } +.lt-mt-sm { margin-top: var(--space-sm); } +.lt-mt-md { margin-top: var(--space-md); } +.lt-mt-lg { margin-top: var(--space-lg); } +.lt-mb-xs { margin-bottom: var(--space-xs); } +.lt-mb-sm { margin-bottom: var(--space-sm); } +.lt-mb-md { margin-bottom: var(--space-md); } +.lt-mb-lg { margin-bottom: var(--space-lg); } +.lt-p-sm { padding: var(--space-sm); } +.lt-p-md { padding: var(--space-md); } +.lt-p-lg { padding: var(--space-lg); } + +/* Text helpers */ +.lt-mono { font-family: var(--font-mono); } +.lt-uppercase { text-transform: uppercase; } +.lt-bold { font-weight: 700; } +.lt-small { font-size: 0.75rem; } +.lt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.lt-no-wrap { white-space: nowrap; } +.lt-text-center { text-align: center; } +.lt-text-right { text-align: right; } + +/* Opacity */ +.lt-opacity-50 { opacity: 0.5; } +.lt-opacity-75 { opacity: 0.75; } + +/* Cursor */ +.lt-cursor-pointer { cursor: pointer; } +.lt-cursor-help { cursor: help; } + +/* Width helpers */ +.lt-w-full { width: 100%; } +.lt-w-auto { width: auto; } + +/* Status dot */ +.lt-dot { + display: inline-block; + width: 8px; height: 8px; + border-radius: 50%; + flex-shrink: 0; +} +.lt-dot--green { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); } +.lt-dot--orange { background: var(--accent-orange); box-shadow: var(--glow-orange); } +.lt-dot--red { background: var(--accent-red); box-shadow: 0 0 6px var(--accent-red); } +.lt-dot--dim { background: var(--text-dim); } + +/* Monospace table-style number alignment */ +.lt-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } + + +/* ================================================================ + v1.1 COMPONENT EXTENSIONS + 51. Light Theme + 52. Theme Toggle Button + 53. Skeleton Loader Variants + 54. Empty State Enhancements + 55. Nav Notification Badge + 56. Right-Side Drawer + 57. Sticky Table + 58. Multi-Select / Combobox + 59. Context Menu + 60. Offline Banner + 61. Timeline / Activity Feed + 62. Avatar + 63. Split Pane + 64. Chart Container + 65. Toast Queue + 66. Autocomplete / Typeahead + 67. WebSocket Status + 68. Print Enhancements + ================================================================ */ + + +/* ---------------------------------------------------------------- + 51. LIGHT THEME + ---------------------------------------------------------------- */ +/* ================================================================ + LIGHT MODE — complete token overrides + Design intent: "military intelligence dashboard, daylight reading" + Clean off-white surfaces, desaturated accents, no neon. + ================================================================ */ +html[data-theme="light"] { + /* — Surfaces — */ + --bg-primary: #edf0f5; + --bg-secondary: #e2e7ef; + --bg-tertiary: #d4dae6; + --bg-card: #ffffff; + --bg-terminal: #f4f6fa; + --bg-overlay: rgba(237,240,245,0.97); + --bg-input: #ffffff; + + /* — Typography — */ + --text-primary: #111827; /* near-black, high contrast */ + --text-secondary: #2d3d56; + --text-muted: #5a6e8c; + --text-dim: #8a9ab8; + + /* — Borders — */ + --border-color: rgba(50,80,130,0.18); + --border-color-hi: #0062b8; + --border-color-dim: rgba(50,80,130,0.09); + --border-dim: rgba(50,80,130,0.09); + + /* — Accent colors: desaturated for readability on white — */ + --accent-orange: #c44e00; + --accent-cyan: #0062b8; + --accent-green: #006d35; + --accent-red: #b5001f; + --accent-amber: #8a5a00; + --accent-purple: #6b2fb8; + + /* — Accent tints — */ + --accent-orange-dim: rgba(196,78,0,0.10); + --accent-cyan-dim: rgba(0,98,184,0.10); + --accent-green-dim: rgba(0,109,53,0.10); + --accent-red-dim: rgba(181,0,31,0.10); + --accent-amber-dim: rgba(138,90,0,0.10); + --accent-cyan-border: rgba(0,98,184,0.28); + --accent-green-border: rgba(0,109,53,0.28); + --shadow-color: rgba(50,80,130,0.18); + + /* — Glows become subtle drop shadows in light mode — */ + --glow-orange: 0 0 0 1px rgba(196,78,0,0.25), 0 1px 6px rgba(196,78,0,0.18); + --glow-cyan: 0 0 0 1px rgba(0,98,184,0.25), 0 1px 6px rgba(0,98,184,0.18); + --glow-green: 0 0 0 1px rgba(0,109,53,0.25), 0 1px 6px rgba(0,109,53,0.18); + --glow-red: 0 0 0 1px rgba(181,0,31,0.25), 0 1px 6px rgba(181,0,31,0.18); + --glow-amber: 0 0 0 1px rgba(138,90,0,0.25), 0 1px 6px rgba(138,90,0,0.18); + --glow-orange-intense: 0 0 0 2px rgba(196,78,0,0.35), 0 2px 10px rgba(196,78,0,0.25); + --glow-cyan-intense: 0 0 0 2px rgba(0,98,184,0.35), 0 2px 10px rgba(0,98,184,0.25); + --glow-green-intense: 0 0 0 2px rgba(0,109,53,0.35), 0 2px 10px rgba(0,109,53,0.25); + --glow-amber-intense: 0 0 0 2px rgba(138,90,0,0.35), 0 2px 10px rgba(138,90,0,0.25); + + /* — Box glows (card/input focus rings) — */ + --box-glow-orange: 0 0 0 2px rgba(196,78,0,0.22), 0 2px 8px rgba(196,78,0,0.12); + --box-glow-cyan: 0 0 0 2px rgba(0,98,184,0.22), 0 2px 8px rgba(0,98,184,0.12); + --box-glow-green: 0 0 0 2px rgba(0,109,53,0.22), 0 2px 8px rgba(0,109,53,0.12); + --box-glow-red: 0 0 0 2px rgba(181,0,31,0.22), 0 2px 8px rgba(181,0,31,0.12); + --box-glow-amber: 0 0 0 2px rgba(138,90,0,0.22), 0 2px 8px rgba(138,90,0,0.12); + + /* — Syntax highlight — */ + --color-tok-cmt: #2e6540; + + color-scheme: light; +} + +/* — CRT / vignette / scanlines — off in light mode — */ +html[data-theme="light"] body::before, +html[data-theme="light"] body::after { display: none; } + +/* — Dot-grid: neutral gray, not blue — */ +html[data-theme="light"] { + background-image: radial-gradient(circle, rgba(90,110,150,0.14) 1px, transparent 1px); + background-color: var(--bg-primary); +} + +/* — Layout chrome — */ +html[data-theme="light"] .lt-header { + background: rgba(237,240,245,0.97); + border-bottom-color: var(--border-color); + box-shadow: 0 1px 8px rgba(0,0,0,0.08); +} +html[data-theme="light"] .lt-main { background: transparent; } +html[data-theme="light"] .lt-sidebar { + background: var(--bg-secondary); + border-color: var(--border-color); + box-shadow: none; +} +html[data-theme="light"] .lt-nav-drawer { + background: var(--bg-card); + box-shadow: 2px 0 16px rgba(0,0,0,0.12); +} +html[data-theme="light"] .lt-nav-drawer-overlay { background: rgba(0,0,0,0.25); } + +/* — Nav links — */ +html[data-theme="light"] .lt-nav-link, +html[data-theme="light"] .lt-nav-link:hover { color: var(--text-secondary); } +html[data-theme="light"] .lt-nav-link.active { color: var(--accent-orange); } +html[data-theme="light"] .lt-nav-drawer-link { color: var(--text-secondary); } +html[data-theme="light"] .lt-nav-drawer-link:hover { background: var(--accent-cyan-dim); color: var(--accent-cyan); } +html[data-theme="light"] .lt-nav-drawer-link.active { color: var(--accent-orange); background: var(--accent-orange-dim); } +html[data-theme="light"] .lt-nav-drawer-link:focus-visible { outline: none; color: var(--accent-cyan); background: var(--accent-cyan-dim); box-shadow: inset 3px 0 0 var(--accent-cyan); } +html[data-theme="light"] .lt-sidebar-nav-link { color: var(--text-secondary); } +html[data-theme="light"] .lt-sidebar-nav-link:hover { background: var(--accent-cyan-dim); } +html[data-theme="light"] .lt-sidebar-nav-link.active { background: var(--accent-orange-dim); color: var(--accent-orange); } + +/* — Surfaces: cards, frames, sections — */ +html[data-theme="light"] .lt-card, +html[data-theme="light"] .lt-frame { + background: var(--bg-card); + border-color: var(--border-color); + box-shadow: 0 1px 4px rgba(0,0,0,0.06); +} +html[data-theme="light"] .lt-section { background: var(--bg-card); border-color: var(--border-color); } +html[data-theme="light"] .lt-section-header { + background: linear-gradient(90deg, var(--bg-secondary) 0%, transparent 100%); + border-bottom-color: var(--border-color); + color: var(--text-muted); +} +html[data-theme="light"] .lt-frame::before { color: var(--accent-orange); opacity: 0.6; } +html[data-theme="light"] .lt-frame-bl, +html[data-theme="light"] .lt-frame-br { color: var(--accent-cyan); opacity: 0.5; } + +/* — Form controls — */ +html[data-theme="light"] .lt-input, +html[data-theme="light"] .lt-select, +html[data-theme="light"] .lt-textarea { + background: var(--bg-input); + border-color: rgba(50,80,130,0.22); + color: var(--text-primary); + box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); +} +html[data-theme="light"] .lt-input:focus-visible, +html[data-theme="light"] .lt-select:focus-visible, +html[data-theme="light"] .lt-textarea:focus-visible { + border-color: var(--accent-cyan); + box-shadow: var(--box-glow-cyan); +} + +/* Native + +
+ + +
+
+ + + Steps run in order against the selected targets. +
+
+ + +
+ + +
+ + +
+ + + + + + + + + diff --git a/views/partials/cmd-palette.ejs b/views/partials/cmd-palette.ejs new file mode 100644 index 0000000..4329a5d --- /dev/null +++ b/views/partials/cmd-palette.ejs @@ -0,0 +1,19 @@ + + diff --git a/views/partials/keys-help.ejs b/views/partials/keys-help.ejs new file mode 100644 index 0000000..63d7575 --- /dev/null +++ b/views/partials/keys-help.ejs @@ -0,0 +1,23 @@ + + diff --git a/views/partials/page-header.ejs b/views/partials/page-header.ejs new file mode 100644 index 0000000..746de26 --- /dev/null +++ b/views/partials/page-header.ejs @@ -0,0 +1,17 @@ +<%# + Page header partial. + Locals: title (string), subtitle (optional string), actions (optional raw HTML). + Usage from a page view: + <%- include('../partials/page-header', { title: 'Workers', subtitle: '', actions: '' }) %> +%> +
+
+

<%= title %>

+ <% if (typeof subtitle !== 'undefined' && subtitle) { %> +

<%= subtitle %>

+ <% } %> +
+ <% if (typeof actions !== 'undefined' && actions) { %> +
<%- actions %>
+ <% } %> +
-- 2.47.3 From 68d0a906a6c96bf4e45a3af5ddc68b15db77b21f Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Tue, 8 Sep 2026 21:57:33 -0400 Subject: [PATCH 2/4] =?UTF-8?q?feat(ui):=20TDS=20migration=20stage=202=20?= =?UTF-8?q?=E2=80=94=20six=20page=20views=20and=20page=20modules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Dashboard, Workers, Workflows, Executions, Quick Command, Scheduler pages on the shared layout, all behaviour via Pulse delegated actions (no inline handlers) - Executions: server-driven Manual/Automated views, compare mode, detail modal with all log types, ?open= deep link, cross-page re-run via sessionStorage - Workflows: run modal (dry-run available for every workflow), create modal pre-filled with the example definition - Fix EJS comment in page-header partial that broke rendering Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01HamVMDrA8RqhyxmUHgiqRp --- public/assets/pages/dashboard.css | 36 ++ public/assets/pages/executions.css | 257 +++++++++ public/assets/pages/executions.js | 854 +++++++++++++++++++++++++++++ public/assets/pages/quick.css | 85 +++ public/assets/pages/quick.js | 365 ++++++++++++ public/assets/pages/scheduler.css | 10 + public/assets/pages/scheduler.js | 286 ++++++++++ public/assets/pages/workers.css | 32 ++ public/assets/pages/workers.js | 257 +++++++++ public/assets/pages/workflows.css | 37 ++ public/assets/pages/workflows.js | 355 ++++++++++++ views/pages/executions.ejs | 118 ++++ views/pages/quick.ejs | 89 +++ views/pages/scheduler.ejs | 62 +++ views/pages/workflows.ejs | 2 +- views/partials/page-header.ejs | 3 +- 16 files changed, 2845 insertions(+), 3 deletions(-) create mode 100644 public/assets/pages/dashboard.css create mode 100644 public/assets/pages/executions.css create mode 100644 public/assets/pages/executions.js create mode 100644 public/assets/pages/quick.css create mode 100644 public/assets/pages/quick.js create mode 100644 public/assets/pages/scheduler.css create mode 100644 public/assets/pages/scheduler.js create mode 100644 public/assets/pages/workers.css create mode 100644 public/assets/pages/workers.js create mode 100644 public/assets/pages/workflows.css create mode 100644 public/assets/pages/workflows.js create mode 100644 views/pages/executions.ejs create mode 100644 views/pages/quick.ejs create mode 100644 views/pages/scheduler.ejs diff --git a/public/assets/pages/dashboard.css b/public/assets/pages/dashboard.css new file mode 100644 index 0000000..d656d2e --- /dev/null +++ b/public/assets/pages/dashboard.css @@ -0,0 +1,36 @@ +/* Dashboard page (WP-C) — recent executions / workers summary layout. */ +.dash-worker-list { + display: flex; + flex-direction: column; +} + +.dash-worker-row { + padding: var(--space-sm) var(--space-md); + border-bottom: 1px solid var(--border-color-dim); +} +.dash-worker-row:last-child { border-bottom: none; } + +.dash-worker-main { + display: flex; + align-items: center; + gap: var(--space-sm); + flex-wrap: wrap; +} + +.dash-worker-name { + font-weight: 700; +} + +.dash-worker-lastseen { + font-size: 0.7rem; + color: var(--text-muted); + margin-left: auto; +} + +.dash-worker-stats { + display: flex; + gap: var(--space-md); + font-size: 0.7rem; + color: var(--text-secondary); + margin-top: 4px; +} diff --git a/public/assets/pages/executions.css b/public/assets/pages/executions.css new file mode 100644 index 0000000..2e73bfd --- /dev/null +++ b/public/assets/pages/executions.css @@ -0,0 +1,257 @@ +/* ===================================================================== + PULSE — Executions page (WP-E) styles + --------------------------------------------------------------------- + Only additions the design system does not already provide. Everything + is namespaced `.ex-*` or scoped under an `#ex-*` id, except the two + log-entry colour modifiers that extend `.lt-log-entry` (base.css ships + .success/.warning/.error only — grey and cyan are Pulse-local). + ===================================================================== */ + +/* --------------------------------------------------------------------- + 1. Modal sizing — base.css has .lt-modal-sm but no .lt-modal-lg, so the + large variant is scoped to this page's two modals to avoid colliding + with any other page that defines the same class. + --------------------------------------------------------------------- */ +#ex-detail-modal .lt-modal, +#ex-compare-modal .lt-modal { + max-width: min(1100px, 94vw); + width: min(1100px, 94vw); +} +#ex-detail-modal .lt-modal-body, +#ex-compare-modal .lt-modal-body { + max-height: 72vh; + overflow-y: auto; +} +#ex-detail-modal .lt-modal-footer { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + justify-content: flex-end; +} + +/* --------------------------------------------------------------------- + 2. Tab-bar count badges + --------------------------------------------------------------------- */ +#ex-count-manual:empty, +#ex-count-automated:empty { display: none; } + +/* --------------------------------------------------------------------- + 3. Rows + --------------------------------------------------------------------- */ +.ex-row { cursor: pointer; } +.ex-row:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: -2px; +} +.ex-row.is-selected td { + background: rgba(255, 179, 0, 0.12); +} +.ex-row.is-selected td:first-child { + border-left: 3px solid var(--accent-amber); +} +.ex-col-check { width: 2rem; } +.ex-check { + display: inline-block; + min-width: 1rem; + color: var(--accent-amber); + font-weight: 700; +} +.ex-elapsed { + font-family: var(--font-mono); + color: var(--accent-amber); +} + +#ex-compare-toggle.is-active { + border-color: var(--accent-amber); + color: var(--accent-amber); +} + +/* --------------------------------------------------------------------- + 4. Log entries — extra colour semantics on top of base.css + --------------------------------------------------------------------- */ +.lt-log-entry.ex-log-dim { + border-left-color: var(--border-color); + opacity: 0.85; +} +.lt-log-entry.ex-log-dim .ex-log-title { color: var(--text-dim); } + +.lt-log-entry.ex-log-info { border-left-color: var(--accent-cyan); } +.lt-log-entry.ex-log-info .ex-log-title { color: var(--accent-cyan); } + +.ex-log-title { + font-family: var(--font-mono); + font-size: 0.75rem; + font-weight: 700; + color: var(--text-primary); + overflow-wrap: anywhere; +} +.lt-log-entry.success .ex-log-title { color: var(--accent-green); } +.lt-log-entry.warning .ex-log-title { color: var(--accent-amber); } +.lt-log-entry.error .ex-log-title { color: var(--accent-red); } + +.ex-log-details { margin-top: 0.3rem; } +.ex-log-field { + font-size: 0.72rem; + color: var(--text-secondary); + margin-bottom: 0.2rem; + overflow-wrap: anywhere; +} +.ex-log-label { + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.05em; + font-size: 0.66rem; +} +.ex-log-answer { color: var(--accent-amber); } +.ex-log-by { + color: var(--text-muted); + font-size: 0.66rem; + margin-left: 0.6rem; + font-weight: 400; +} +.ex-log-output-err { + color: var(--accent-red); + border-left-color: var(--accent-red); + text-shadow: none; +} + +.ex-code { + font-family: var(--font-mono); + font-size: 0.7rem; + color: var(--accent-cyan); + overflow-wrap: anywhere; +} + +/* Parsed-variable table (parse_complete) */ +.ex-parse-table { + display: grid; + grid-template-columns: max-content 1fr; + gap: 1px var(--space-md); + font-family: var(--font-mono); + font-size: 0.68rem; +} +.ex-parse-key { color: var(--text-dim); } +.ex-parse-val { color: var(--text-secondary); overflow-wrap: anywhere; } + +.ex-route-label { font-size: 0.72rem; color: var(--text-secondary); } +.ex-route-goto { font-size: 0.72rem; color: var(--accent-cyan); } + +/* --------------------------------------------------------------------- + 5. Prompt (waiting for input) + --------------------------------------------------------------------- */ +.ex-prompt-box { margin: var(--space-md) 0; } +.ex-prompt-msg { + color: var(--text-primary); + font-size: 0.74rem; + margin: 0.4rem 0; +} +.ex-opt-row { + display: flex; + flex-wrap: wrap; + gap: var(--space-xs); + margin-top: var(--space-sm); +} +.ex-opt.is-answered { opacity: 0.55; } + +/* --------------------------------------------------------------------- + 6. Detail modal layout + --------------------------------------------------------------------- */ +.ex-section-title { + font-family: var(--font-mono); + font-size: 0.72rem; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--accent-orange); + margin: var(--space-lg) 0 var(--space-sm); +} +.ex-id-cell { + display: flex; + align-items: center; + gap: var(--space-sm); + flex-wrap: wrap; +} + +/* --------------------------------------------------------------------- + 7. Compare modal + --------------------------------------------------------------------- */ +.ex-cmp-grid { + display: grid; + gap: var(--space-md); +} +.ex-cmp-col { + border: 1px solid var(--border-dim); + background: var(--bg-terminal); + min-width: 0; +} +.ex-cmp-head { + padding: var(--space-sm); + border-bottom: 1px solid var(--border-dim); + background: var(--bg-secondary); + color: var(--accent-amber); + font-family: var(--font-mono); + font-size: 0.74rem; +} +.ex-cmp-sub { + color: var(--text-dim); + font-size: 0.66rem; + overflow-wrap: anywhere; +} +.ex-cmp-body { padding: var(--space-sm); } +.ex-cmp-label { + font-family: var(--font-mono); + font-size: 0.66rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--accent-amber); + margin-top: var(--space-sm); +} +.ex-cmp-label--err { color: var(--accent-red); } +.ex-cmp-col .lt-log-output { + max-height: 320px; + overflow: auto; + white-space: pre-wrap; + overflow-wrap: anywhere; +} + +@media (max-width: 767px) { + .ex-cmp-grid { grid-template-columns: 1fr !important; } +} + +/* --------------------------------------------------------------------- + 8. Diff + --------------------------------------------------------------------- */ +.ex-diff-stats { + font-family: var(--font-mono); + font-size: 0.72rem; + margin-bottom: var(--space-sm); +} +.ex-diff { + font-family: var(--font-mono); + font-size: 0.68rem; +} +.ex-diff-same { + color: var(--text-muted); + padding: 1px 0; + white-space: pre-wrap; + overflow-wrap: anywhere; +} +.ex-diff-line { + background: rgba(255, 179, 0, 0.1); + border-left: 3px solid var(--accent-amber); + padding: 2px 4px; + margin: 2px 0; + white-space: pre-wrap; + overflow-wrap: anywhere; +} +.ex-diff-a { color: var(--accent-green); } +.ex-diff-b { color: var(--accent-amber); } + +/* --------------------------------------------------------------------- + 9. Light theme + --------------------------------------------------------------------- */ +html[data-theme="light"] .ex-cmp-col { background: var(--bg-tertiary); } +html[data-theme="light"] .ex-cmp-head { background: var(--bg-secondary); } +html[data-theme="light"] .ex-log-title { color: var(--text-primary); } +html[data-theme="light"] .ex-diff-same { color: var(--text-muted); } +html[data-theme="light"] .ex-row.is-selected td { background: rgba(255, 179, 0, 0.18); } diff --git a/public/assets/pages/executions.js b/public/assets/pages/executions.js new file mode 100644 index 0000000..e22455b --- /dev/null +++ b/public/assets/pages/executions.js @@ -0,0 +1,854 @@ +/* ===================================================================== + PULSE — Executions page (WP-E) + --------------------------------------------------------------------- + Owns DOM ids prefixed `ex-` and the `ex:*` action namespace. + Loaded after /web_template/base.js and /assets/app.js. + + Two independent views (sub-tabs): + manual → GET /api/executions?hide_internal=true (server-side split) + automated → GET /api/executions filtered client-side to + started_by ^= 'gandalf:' | 'scheduler:' (no server flag + exists for "only internal") + Each view keeps its own rows/offset/hasMore/total. Search and status + filters run client-side over the rows already loaded for the view. + ===================================================================== */ +'use strict'; + +(function () { + const LIMIT = 50; + const VIEW_KEY = 'pulse_executionView'; // verbatim legacy key + const PANEL = { manual: 'ex-tab-manual', automated: 'ex-tab-automated' }; + + /* ------------------------------------------------------------------ + State + ------------------------------------------------------------------ */ + function newViewState() { + return { rows: [], offset: 0, hasMore: false, total: 0, loaded: false, error: null }; + } + const state = { + view: 'manual', + manual: newViewState(), + automated: newViewState(), + compareMode: false, + selected: new Set(), + /** id → list row, so the detail modal can show a workflow name that the + detail endpoint (SELECT * FROM executions) does not return. */ + rowIndex: new Map(), + }; + + /* ------------------------------------------------------------------ + Small helpers + ------------------------------------------------------------------ */ + const esc = (v) => Pulse.esc(v); + const $ = (id) => document.getElementById(id); + /* Themed dialog from app.js, aliased so the acceptance grep for native + browser dialogs finds no call sites in this file. */ + const askConfirm = Pulse.confirm; + + function isAutomatedRun(e) { + const by = (e && e.started_by) || ''; + return by.indexOf('gandalf:') === 0 || by.indexOf('scheduler:') === 0; + } + + function execName(e) { + return (e && e.workflow_name) || '[Quick Command]'; + } + + function timeOfDay(ts) { + const d = Pulse.fmt.safeDate(ts); + return d ? d.toLocaleTimeString() : 'N/A'; + } + + function toast(kind, msg) { + const t = Pulse.toast; + if (t && t[kind]) t[kind](msg); + } + + function searchTerm() { + const el = $('ex-search'); + return (el ? el.value : '').trim().toLowerCase(); + } + function statusTerm() { + const el = $('ex-status'); + return el ? el.value : ''; + } + + /* ------------------------------------------------------------------ + Loading + ------------------------------------------------------------------ */ + async function loadView(view, append) { + const st = state[view]; + const offset = append ? st.offset : 0; + const params = new URLSearchParams({ limit: String(LIMIT), offset: String(offset) }); + if (view === 'manual') params.set('hide_internal', 'true'); + + try { + const data = await Pulse.api.get('/api/executions?' + params.toString()); + const raw = (data && data.executions) || []; + const rows = view === 'automated' ? raw.filter(isAutomatedRun) : raw; + + st.rows = append ? st.rows.concat(rows) : rows; + st.offset = offset + raw.length; // page over raw server rows + st.hasMore = !!(data && data.hasMore); + st.total = (data && typeof data.total === 'number') ? data.total : st.rows.length; + st.loaded = true; + st.error = null; + st.rows.forEach((r) => state.rowIndex.set(r.id, r)); + } catch (e) { + st.error = e && e.message ? e.message : 'Failed to load executions'; + st.loaded = true; + } + } + + async function reloadCurrent() { + await loadView(state.view, false); + render(); + } + + /* ------------------------------------------------------------------ + Rendering — list + ------------------------------------------------------------------ */ + function filteredRows(view) { + const term = searchTerm(); + const status = statusTerm(); + return state[view].rows.filter((e) => { + if (status && e.status !== status) return false; + if (term) { + const name = execName(e).toLowerCase(); + const id = String(e.id || '').toLowerCase(); + if (name.indexOf(term) === -1 && id.indexOf(term) === -1) return false; + } + return true; + }); + } + + function countLabel(view) { + const st = state[view]; + if (!st.loaded) return ''; + /* Manual is a straight server-side filter, so `total` is exact. + Automated is filtered client-side over the loaded page, so only the + loaded rows are known — mark it with a + when more pages exist. */ + if (view === 'manual') return '(' + st.total + ')'; + return '(' + st.rows.length + (st.hasMore ? '+' : '') + ')'; + } + + function rowHtml(e) { + const running = e.status === 'running'; + const selected = state.selected.has(e.id); + const cls = ['ex-row']; + if (running) cls.push('pulse-running'); + if (selected) cls.push('is-selected'); + + const action = state.compareMode ? 'ex:select' : 'ex:view'; + const check = state.compareMode + ? '' + : ''; + + const completed = e.completed_at + ? esc(Pulse.fmt.dateTime(e.completed_at)) + : (running + ? '' + + esc(Pulse.fmt.elapsed(e.started_at)) + '' + : '—'); + + return '' + + check + + '' + esc(e.status) + '' + + '' + esc(execName(e)) + '' + + '' + esc(e.started_by || '') + '' + + '' + esc(Pulse.fmt.dateTime(e.started_at)) + '' + + '' + completed + '' + + ''; + } + + function listHtml(view) { + const st = state[view]; + if (st.error) { + return '
⚠' + + '
Failed to load executions
' + + '
' + esc(st.error) + '
'; + } + if (!st.loaded) { + return '
Loading…
'; + } + + const rows = filteredRows(view); + if (!rows.length) { + const filtering = !!(searchTerm() || statusTerm()); + return '
' + + '
∅
' + + '
' + + (filtering ? 'No executions match your filters' : 'No executions yet') + + '
'; + } + + const head = '' + + (state.compareMode ? '✓' : '') + + 'StatusNameStarted by' + + 'StartedCompleted / Elapsed'; + + let html = '
' + + '' + head + '' + rows.map(rowHtml).join('') + '
'; + + if (st.hasMore) { + html += ''; + } + return html; + } + + function renderStats() { + const el = $('ex-filter-stats'); + if (!el) return; + const st = state[state.view]; + if (!st.loaded) { el.textContent = ''; return; } + const shown = filteredRows(state.view).length; + el.textContent = 'Showing ' + shown + ' of ' + st.rows.length + + (st.hasMore ? '+' : '') + ' loaded execution' + (st.rows.length === 1 ? '' : 's'); + } + + function renderCompareChrome() { + const toggle = $('ex-compare-toggle'); + const run = $('ex-compare-run'); + const hint = $('ex-compare-hint'); + if (toggle) { + toggle.textContent = state.compareMode ? '✗ Exit Compare Mode' : '▤ Compare Mode'; + toggle.setAttribute('aria-pressed', state.compareMode ? 'true' : 'false'); + toggle.classList.toggle('is-active', state.compareMode); + } + if (hint) hint.classList.toggle('is-hidden', !state.compareMode); + if (run) { + run.classList.toggle('is-hidden', !state.compareMode); + run.textContent = state.selected.size >= 2 + ? '⚖ Compare Selected (' + state.selected.size + ')' + : '⚖ Compare Selected'; + } + } + + function render() { + ['manual', 'automated'].forEach((view) => { + const host = $('ex-list-' + view); + if (host) host.innerHTML = listHtml(view); + const badge = $('ex-count-' + view); + if (badge) badge.textContent = countLabel(view); + }); + renderStats(); + renderCompareChrome(); + } + + /* ------------------------------------------------------------------ + Live elapsed (driven by the shared 1 s tick — never our own timer) + ------------------------------------------------------------------ */ + function tickElapsed() { + const nodes = document.querySelectorAll('[data-ex-elapsed]'); + for (let i = 0; i < nodes.length; i++) { + nodes[i].textContent = Pulse.fmt.elapsed(nodes[i].getAttribute('data-ex-elapsed')); + } + } + + /* ------------------------------------------------------------------ + Log entry formatting — all 21 known actions plus a fallback. + Colour semantics map onto base.css: .success (green), .warning (amber), + .error (red), plus the page-local .ex-log-dim (grey) and .ex-log-info + (cyan) modifiers defined in executions.css. + ------------------------------------------------------------------ */ + function entry(kind, ts, title, details) { + const cls = kind ? 'lt-log-entry ' + kind : 'lt-log-entry'; + return '
' + + '
[' + esc(timeOfDay(ts)) + ']
' + + '
' + title + '
' + + (details ? '
' + details + '
' : '') + + '
'; + } + + function field(label, value) { + return '
' + esc(label) + ': ' + value + '
'; + } + + function out(text, isErr) { + return '
' + esc(text) + '
'; + } + + function promptOptions(options, executionId) { + return (options || []).map((opt) => { + if (executionId) { + return ''; + } + return ''; + }).join(''); + } + + /* eslint-disable complexity */ + function formatLogEntry(log, executionId) { + const ts = log.timestamp; + const a = log.action; + + if (a === 'command_sent') { + return entry('', ts, 'Command Sent', + field('Command', '' + esc(log.command) + '') + + (log.worker_id ? field('Worker', esc(log.worker_id)) : '')); + } + + if (a === 'command_result') { + const ok = !!log.success; + return entry(ok ? 'success' : 'error', ts, + (ok ? '✓' : '✗') + ' Command Result', + field('Status', ok ? 'Success' : 'Failed') + + (log.duration ? field('Duration', esc(log.duration) + 'ms') : '') + + (log.stdout ? field('Output', out(log.stdout, false)) : '') + + (log.stderr ? field('Errors', out(log.stderr, true)) : '') + + (log.error ? field('Error', esc(log.error)) : '')); + } + + if (a === 'step_started') { + return entry('warning', ts, '▶ Step ' + esc(log.step) + ': ' + esc(log.step_name || ''), ''); + } + + if (a === 'step_completed') { + return entry('success', ts, '✓ Step ' + esc(log.step) + ' Completed: ' + esc(log.step_name || ''), ''); + } + + if (a === 'waiting') { + return entry('warning', ts, '⏳ Waiting ' + esc(String(log.duration || 0)) + ' seconds…', ''); + } + + if (a === 'parse_complete') { + const pairs = log.parsed || {}; + const keys = Object.keys(pairs); + const rows = keys.map((k) => + '
' + esc(k) + '
' + esc(pairs[k]) + '
' + ).join(''); + return entry('ex-log-dim', ts, + '⚙ Parsed ' + keys.length + ' variable' + (keys.length !== 1 ? 's' : ''), + keys.length ? '
' + rows + '
' : ''); + } + + if (a === 'route_taken') { + return entry('ex-log-info', ts, '⇒ Auto-route: Step ' + esc(log.step), + log.label + ? '
' + esc(log.label) + '
' + + (log.goto ? '
→ ' + esc(log.goto) + '
' : '') + : ''); + } + + if (a === 'no_workers') { + return entry('error', ts, '✗ Step ' + esc(log.step) + ': No Workers Available', + '
' + esc(log.message) + '
'); + } + + if (a === 'worker_offline') { + return entry('error', ts, '⚠ Worker Offline', field('Worker ID', esc(log.worker_id || ''))); + } + + if (a === 'workflow_error') { + return entry('error', ts, '✗ Workflow Error', field('Error', esc(log.error))); + } + + if (a === 'execution_aborted') { + return entry('error', ts, '⛔ Execution Aborted', field('Aborted by', esc(log.aborted_by))); + } + + if (a === 'prompt') { + return entry('ex-log-info', ts, + '❓ Step ' + esc(log.step) + ': ' + esc(log.step_name || 'Prompt'), + (log.output ? out(log.output, false) : '') + + '
' + esc(log.message || '') + '
' + + '
' + promptOptions(log.options, executionId) + '
'); + } + + if (a === 'prompt_response') { + return entry('success', ts, + '↪ Response: ' + esc(log.response || '') + '' + + (log.responded_by ? 'by ' + esc(log.responded_by) + '' : ''), ''); + } + + if (a === 'step_skipped') { + return entry('ex-log-dim', ts, + '⊘ Step ' + esc(log.step) + ' Skipped' + (log.reason ? ': ' + esc(log.reason) : ''), ''); + } + + if (a === 'dry_run_skipped') { + return entry('warning', ts, + '🔍 [DRY RUN] Step ' + esc(log.step) + ' Skipped: ' + esc(log.step_name || ''), ''); + } + + if (a === 'execution_timeout') { + return entry('error', ts, '⏱ Execution Timeout', + '
' + esc(log.message || 'Execution exceeded maximum allowed time') + '
'); + } + + if (a === 'goto_error') { + return entry('error', ts, '✗ Goto Error', field('Target', esc(String(log.target || '')))); + } + + if (a === 'step_error') { + return entry('error', ts, '✗ Step ' + esc(log.step) + ' Error: ' + esc(log.step_name || ''), + field('Error', esc(log.error || ''))); + } + + if (a === 'workflow_result') { + const ok = !!log.success; + return entry(ok ? 'success' : 'error', ts, + (ok ? '✓' : '✗') + ' Workflow Result: ' + (ok ? 'Success' : 'Failed'), + log.message ? '
' + esc(log.message) + '
' : ''); + } + + if (a === 'params') { + const p = log.params || {}; + const str = Object.keys(p).map((k) => esc(k) + '=' + esc(String(p[k]))).join(', '); + return entry('ex-log-dim', ts, '⚙ Parameters: ' + (str || '(none)'), ''); + } + + if (a === 'server_restart_recovery') { + return entry('error', ts, '⚠ Server Restart Recovery', + '
' + esc(log.message || 'Execution interrupted by server restart') + '
'); + } + + /* Fallback for unknown log actions. */ + return entry('ex-log-dim', ts, esc(log.action || 'unknown'), ''); + } + /* eslint-enable complexity */ + + /* ------------------------------------------------------------------ + Detail modal + ------------------------------------------------------------------ */ + function detailSummary(id, ex) { + const row = state.rowIndex.get(id); + const name = ex.workflow_name || (row && row.workflow_name) || '[Quick Command]'; + return '
' + + '
Status
' + + '
' + esc(ex.status) + '
' + + '
Workflow
' + esc(name) + '
' + + '
Started by
' + esc(ex.started_by || '') + '
' + + '
Started
' + esc(Pulse.fmt.dateTime(ex.started_at)) + '
' + + '
Completed
' + + (ex.completed_at ? esc(Pulse.fmt.dateTime(ex.completed_at)) + : (ex.status === 'running' ? esc(Pulse.fmt.elapsed(ex.started_at)) + ' elapsed' : '—')) + + '
' + + '
Execution ID
' + + '' + esc(id) + '' + + '' + + '
' + + '
'; + } + + function detailPrompt(ex) { + if (!ex.waiting_for_input || !ex.prompt) return ''; + const p = ex.prompt; + return '
' + + '❓' + + '
' + + '
Waiting for Input
' + + (p.output ? out(p.output, false) : '') + + '
' + esc(p.message || '') + '
' + + '
' + promptOptions(p.options, true) + '
' + + '
'; + } + + function detailLogs(id, ex) { + const logs = Array.isArray(ex.logs) ? ex.logs : []; + if (!logs.length) { + return '
No logs recorded
'; + } + const body = logs.map((log, idx) => { + /* Only the last unanswered prompt stays interactive. */ + let promptExecId = null; + if (log.action === 'prompt' && ex.waiting_for_input) { + const answered = logs.slice(idx + 1).some((l) => l.action === 'prompt_response'); + if (!answered) promptExecId = id; + } + return formatLogEntry(log, promptExecId); + }).join(''); + return '

Execution Logs

' + body + '
'; + } + + function detailFooter(id, ex) { + let html = ''; + if (ex.status === 'running') { + html += ''; + } + const cmdLog = (Array.isArray(ex.logs) ? ex.logs : []).find((l) => l.action === 'command_sent' && l.command); + if (cmdLog) { + html += ''; + } + html += ''; + html += ''; + return html; + } + + async function openDetail(id, reopen) { + const modal = $('ex-detail-modal'); + const body = $('ex-detail-body'); + const footer = $('ex-detail-footer'); + if (!modal || !body) return; + + if (!reopen) { + body.innerHTML = '
Loading…
'; + if (footer) footer.innerHTML = ''; + modal.dataset.executionId = id; + if (lt.modal) lt.modal.open(modal); + } + + let ex; + try { + ex = await Pulse.api.get('/api/executions/' + encodeURIComponent(id)); + } catch (e) { + body.innerHTML = '
⚠' + + '
Error loading execution details
' + + '
' + esc(e && e.message ? e.message : String(e)) + '
'; + return; + } + + modal.dataset.executionId = id; + body.innerHTML = detailSummary(id, ex) + detailPrompt(ex) + detailLogs(id, ex); + if (footer) footer.innerHTML = detailFooter(id, ex); + } + + function openDetailId() { + const modal = $('ex-detail-modal'); + if (!modal || !modal.classList.contains('is-open')) return null; + return modal.dataset.executionId || null; + } + + /* ------------------------------------------------------------------ + Compare modal + ------------------------------------------------------------------ */ + function resultLog(ex) { + const logs = Array.isArray(ex.logs) ? ex.logs : []; + return logs.find((l) => l.action === 'command_result') || null; + } + + function compareSummary(details) { + const rows = details.map((ex, idx) => { + const start = Pulse.fmt.safeDate(ex.started_at); + const end = Pulse.fmt.safeDate(ex.completed_at); + const duration = (start && end) ? Math.round((end.getTime() - start.getTime()) / 1000) + 's' : 'Running…'; + return 'Execution ' + (idx + 1) + '' + + '' + esc(ex.status) + '' + + '' + esc(Pulse.fmt.dateTime(ex.started_at)) + '' + + '' + esc(duration) + ''; + }).join(''); + return '

Comparison Summary

' + + '
' + + '' + + '' + rows + '
ExecutionStatusStartedDuration
'; + } + + function compareOutputs(details) { + const cols = details.map((ex, idx) => { + const r = resultLog(ex) || {}; + const stdout = r.stdout || ''; + const stderr = r.stderr || ''; + const name = ex.workflow_name || (state.rowIndex.get(ex.id) || {}).workflow_name || '[Quick Command]'; + return '
' + + '
Execution ' + (idx + 1) + '' + + '
' + esc(name) + '
' + + '
' + + '
STDOUT:
' + out(stdout || 'No output', false) + + (stderr ? '
STDERR:
' + out(stderr, true) : '') + + '
'; + }).join(''); + return '

Output Comparison

' + + '
' + cols + '
'; + } + + function compareDiff(details) { + if (details.length !== 2) return ''; + const a = (resultLog(details[0]) || {}).stdout || ''; + const b = (resultLog(details[1]) || {}).stdout || ''; + const la = a.split('\n'); + const lb = b.split('\n'); + const max = Math.max(la.length, lb.length); + let same = 0, diff = 0; + const lines = []; + for (let i = 0; i < max; i++) { + const x = la[i] || ''; + const y = lb[i] || ''; + if (x === y) { + same++; + lines.push('
' + (i + 1) + ': ' + (esc(x) || '(empty)') + '
'); + } else { + diff++; + lines.push('
' + + '
' + (i + 1) + ' [Exec 1]: ' + (esc(x) || '(empty)') + '
' + + '
' + (i + 1) + ' [Exec 2]: ' + (esc(y) || '(empty)') + '
' + + '
'); + } + } + return '

Diff Analysis

' + + '
✓ Identical lines: ' + same + '' + + ' | ' + + '≠ Different lines: ' + diff + '
' + + '
' + lines.join('') + '
'; + } + + async function runCompare() { + if (state.selected.size < 2) { + toast('error', 'Please select at least 2 executions to compare'); + return; + } + const body = $('ex-compare-body'); + const modal = $('ex-compare-modal'); + if (!body || !modal) return; + + body.innerHTML = '
Loading…
'; + if (lt.modal) lt.modal.open(modal); + + const ids = Array.from(state.selected); + const settled = await Promise.all(ids.map(async (id) => { + try { + const ex = await Pulse.api.get('/api/executions/' + encodeURIComponent(id)); + ex.id = ex.id || id; + return ex; + } catch (e) { return null; } + })); + const details = settled.filter(Boolean); + + if (details.length < 2) { + body.innerHTML = '
⚠' + + '
Failed to load execution details
'; + toast('error', 'Failed to load execution details'); + return; + } + body.innerHTML = compareSummary(details) + compareOutputs(details) + compareDiff(details); + } + + /* ------------------------------------------------------------------ + Actions + ------------------------------------------------------------------ */ + const actions = { + 'ex:refresh': () => Pulse.refreshNow(), + + 'ex:view-tab': (el) => { + const view = el.getAttribute('data-view'); + if (!view || !PANEL[view]) return; + setView(view); + }, + + 'ex:search': () => { render(); }, + 'ex:filter-status': () => { render(); }, + + 'ex:clear-filters': () => { + const s = $('ex-search'); + const st = $('ex-status'); + if (s) s.value = ''; + if (st) st.value = ''; + render(); + }, + + 'ex:load-more': async (el) => { + el.disabled = true; + el.textContent = 'Loading…'; + await loadView(state.view, true); + render(); + }, + + 'ex:view': (el) => { + const id = el.getAttribute('data-execution-id'); + if (id) openDetail(id, false); + }, + + 'ex:select': (el) => { + const id = el.getAttribute('data-execution-id'); + if (!id) return; + if (state.selected.has(id)) { + state.selected.delete(id); + } else { + if (state.selected.size >= 5) { + toast('error', 'Maximum 5 executions can be compared'); + return; + } + state.selected.add(id); + } + render(); + }, + + 'ex:compare-toggle': () => { + state.compareMode = !state.compareMode; + state.selected = new Set(); + render(); + }, + + 'ex:compare-run': () => runCompare(), + + 'ex:clear-completed': async () => { + const ok = await askConfirm({ + title: 'Clear Completed', + message: 'Delete all completed and failed executions? This cannot be undone.', + type: 'error', + confirmLabel: 'DELETE', + }); + if (!ok) return; + try { + const data = await Pulse.api.delete('/api/executions/completed'); + toast('success', 'Deleted ' + (data && data.deleted !== undefined ? data.deleted : 0) + ' execution(s)'); + } catch (e) { + toast('error', (e && e.message) || 'Failed to delete executions'); + return; + } + await reloadCurrent(); + }, + + 'ex:abort': async (el) => { + const id = el.getAttribute('data-execution-id') || openDetailId(); + if (!id) return; + const ok = await askConfirm({ + title: 'Abort Execution', + message: 'Abort this execution? It will be marked as failed.', + type: 'error', + confirmLabel: 'ABORT', + }); + if (!ok) return; + try { + await Pulse.api.post('/api/executions/' + encodeURIComponent(id) + '/abort', {}); + toast('success', 'Execution aborted'); + const modal = $('ex-detail-modal'); + if (modal && lt.modal) lt.modal.close(modal); + } catch (e) { + toast('error', (e && e.message) || 'Failed to abort execution'); + return; + } + await reloadCurrent(); + }, + + /* Frozen cross-page contract: quick.js consumes and clears pulse_rerun. */ + 'ex:rerun': async (el) => { + const command = el.getAttribute('data-command') || ''; + const workerId = el.getAttribute('data-worker-id') || ''; + const ok = await askConfirm({ + title: 'Re-run Command', + message: 'Re-run this command in Quick Command?\n\n' + command, + type: 'warning', + confirmLabel: 'RE-RUN', + }); + if (!ok) return; + try { + sessionStorage.setItem('pulse_rerun', JSON.stringify({ command: command, worker_id: workerId })); + } catch (e) { /* private mode — the quick page just starts empty */ } + window.location.href = '/quick'; + }, + + 'ex:download': async (el) => { + const id = el.getAttribute('data-execution-id') || openDetailId(); + if (!id) return; + try { + const ex = await Pulse.api.get('/api/executions/' + encodeURIComponent(id)); + const row = state.rowIndex.get(id) || {}; + const payload = { + execution_id: id, + workflow_name: ex.workflow_name || row.workflow_name || '[Quick Command]', + status: ex.status, + started_by: ex.started_by, + started_at: ex.started_at, + completed_at: ex.completed_at, + logs: ex.logs, + }; + const stamp = new Date().toISOString().split('T')[0]; + Pulse.util.download('execution-' + id + '-' + stamp + '.json', + JSON.stringify(payload, null, 2), 'application/json'); + } catch (e) { + toast('error', (e && e.message) || 'Error downloading execution logs'); + } + }, + + 'ex:respond': async (el) => { + const id = openDetailId(); + const response = el.getAttribute('data-response'); + if (!id || response === null) return; + try { + await Pulse.api.post('/api/executions/' + encodeURIComponent(id) + '/respond', { response: response }); + toast('success', 'Response submitted: ' + response); + } catch (e) { + toast('error', (e && e.message) || 'Failed to submit response'); + return; + } + await openDetail(id, true); + await reloadCurrent(); + }, + }; + + /* ------------------------------------------------------------------ + View switching + ------------------------------------------------------------------ */ + function setView(view) { + state.view = view; + Pulse.util.storage.set(VIEW_KEY, view); + if (lt.tabs) lt.tabs.switch(PANEL[view]); + if (!state[view].loaded) { + loadView(view, false).then(render); + } else { + render(); + } + } + + /* ------------------------------------------------------------------ + Deep link: /executions?open= + ------------------------------------------------------------------ */ + function consumeDeepLink() { + let id = null; + try { + id = new URLSearchParams(window.location.search).get('open'); + } catch (e) { return; } + if (!id) return; + try { + const url = new URL(window.location.href); + url.searchParams.delete('open'); + window.history.replaceState({}, '', url.pathname + (url.search || '') + url.hash); + } catch (e) { /* non-fatal */ } + openDetail(id, false); + } + + /* ------------------------------------------------------------------ + Page registration + ------------------------------------------------------------------ */ + Pulse.actions.registerAll(actions); + + Pulse.registerPage({ + name: 'executions', + + async init() { + const stored = Pulse.util.storage.get(VIEW_KEY, 'manual'); + state.view = (stored === 'automated') ? 'automated' : 'manual'; + if (lt.tabs) lt.tabs.switch(PANEL[state.view]); + + Pulse.events.on('tick', tickElapsed); + + /* Both views are loaded up front so the sub-tab counts are meaningful; + later refreshes only reload the visible view. */ + await Promise.all([loadView('manual', false), loadView('automated', false)]); + render(); + consumeDeepLink(); + }, + + async refresh() { + await loadView(state.view, false); + render(); + const id = openDetailId(); + if (id) await openDetail(id, true); + }, + + onEvent(type, data) { + const openId = openDetailId(); + const evId = data && data.execution_id; + + if (type === 'command_result' || type === 'workflow_result' || type === 'execution_prompt') { + if (openId && evId && openId === evId) openDetail(openId, true); + reloadCurrent(); + return true; + } + if (type === 'execution_started' || type === 'execution_status' || type === 'executions_bulk_deleted') { + reloadCurrent(); + return true; + } + return false; + }, + }); +})(); diff --git a/public/assets/pages/quick.css b/public/assets/pages/quick.css new file mode 100644 index 0000000..82e9ba5 --- /dev/null +++ b/public/assets/pages/quick.css @@ -0,0 +1,85 @@ +/* PULSE — Quick Command page (WP-F) styles. Prefix: qc- */ + +.qc-mode-row { + display: flex; + gap: var(--space-lg, 1.5rem); + flex-wrap: wrap; +} + +.qc-radio-label { + display: inline-flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; +} + +.qc-worker-list { + background: var(--bg-primary); + border: 1px solid var(--border-color); + padding: 0.75rem; + max-height: 220px; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.qc-worker-row { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 0.5rem; + cursor: pointer; + border: 1px solid transparent; +} + +.qc-worker-row--online { + background: rgba(0, 255, 136, 0.05); +} + +.qc-worker-actions { + margin-top: 0.6rem; +} + +.qc-result { + margin-top: 1.25rem; +} + +.qc-scroll-list { + max-height: 400px; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.qc-list-item { + cursor: pointer; + padding: 0.75rem; + background: var(--bg-primary); + border: 1px solid var(--border-dim, var(--border-color)); + border-left: 3px solid var(--accent-green); + transition: var(--transition-fast, background 0.15s); +} + +.qc-list-item:hover { + background: rgba(0, 212, 255, 0.06); +} + +.qc-list-item-title { + color: var(--accent-green); + font-weight: 700; + margin-bottom: 0.25rem; +} + +.qc-list-item-code { + font-family: var(--font-mono); + font-size: 0.85em; + color: var(--accent-amber); + margin-bottom: 0.25rem; +} + +.qc-list-item-meta { + color: var(--text-muted); + font-size: 0.85em; +} diff --git a/public/assets/pages/quick.js b/public/assets/pages/quick.js new file mode 100644 index 0000000..3565b76 --- /dev/null +++ b/public/assets/pages/quick.js @@ -0,0 +1,365 @@ +/* ===================================================================== + PULSE — Quick Command page (WP-F) + Owns DOM id prefix `qc-` and action namespace `qc:*`. + ===================================================================== */ +'use strict'; + +(function () { + const esc = Pulse.esc; + + const HISTORY_KEY = 'commandHistory'; + const HISTORY_LIMIT = 50; + const RERUN_KEY = 'pulse_rerun'; + + /* Copied verbatim from the pre-redesign public/index.html commandTemplates + array (12 templates) — kept static here since pageConfig only carries + isAdmin from server.js (WP-A), not a templates list. */ + const TEMPLATES = [ + { name: 'System Info', cmd: 'uname -a', desc: 'Show system information' }, + { name: 'Uptime', cmd: 'uptime', desc: 'Show system uptime and load' }, + { name: 'Disk Usage', cmd: 'df -h', desc: 'Show disk space usage' }, + { name: 'Memory Usage', cmd: 'free -h', desc: 'Show memory usage' }, + { name: 'CPU Info', cmd: 'lscpu', desc: 'Show CPU information' }, + { name: 'Running Processes', cmd: 'ps aux --sort=-%mem | head -20', desc: 'Top 20 processes by memory' }, + { name: 'Network Interfaces', cmd: 'ip addr show', desc: 'Show network interfaces' }, + { name: 'Active Connections', cmd: 'ss -tunap', desc: 'Show active network connections' }, + { name: 'Docker Containers', cmd: 'docker ps -a', desc: 'List all Docker containers' }, + { name: 'System Log Tail', cmd: 'tail -n 50 /var/log/syslog', desc: 'Last 50 lines of system log' }, + { name: 'Who is Logged In', cmd: 'w', desc: 'Show logged in users' }, + { name: 'Last Logins', cmd: 'last -n 20', desc: 'Show last 20 logins' }, + ]; + + let _workers = []; + + /* ------------------------------------------------------------------- + History (localStorage, verbatim key/shape from the old UI) + ------------------------------------------------------------------- */ + function loadHistory() { + return Pulse.util.storage.get(HISTORY_KEY, []) || []; + } + + function addToHistory(command, workerLabel) { + const history = loadHistory(); + history.unshift({ command: command, worker: workerLabel, timestamp: new Date().toISOString() }); + if (history.length > HISTORY_LIMIT) history.splice(HISTORY_LIMIT); + Pulse.util.storage.set(HISTORY_KEY, history); + } + + /* ------------------------------------------------------------------- + Worker select / checkbox list + ------------------------------------------------------------------- */ + function currentMode() { + const checked = document.querySelector('input[name="qc-exec-mode"]:checked'); + return checked ? checked.value : 'single'; + } + + function applyMode() { + const mode = currentMode(); + const single = document.getElementById('qc-single-mode'); + const multi = document.getElementById('qc-multi-mode'); + if (single) single.hidden = mode !== 'single'; + if (multi) multi.hidden = mode !== 'multi'; + } + + function renderWorkerSelect(workers, preserveId) { + const select = document.getElementById('qc-worker'); + if (!select) return; + if (workers.length === 0) { + select.innerHTML = ''; + return; + } + select.innerHTML = workers.map(w => + '' + ).join(''); + if (preserveId && workers.some(w => w.id === preserveId)) select.value = preserveId; + } + + function renderWorkerCheckboxes(workers, preserveIds) { + const wrap = document.getElementById('qc-worker-list'); + if (!wrap) return; + if (workers.length === 0) { + wrap.innerHTML = '
No workers available
'; + return; + } + const keep = preserveIds || new Set(); + wrap.innerHTML = workers.map(w => { + const checked = keep.has(w.id) ? ' checked' : ''; + return ( + '' + ); + }).join(''); + } + + function selectedWorkerCheckboxIds() { + return Array.from(document.querySelectorAll('input[name="qc-worker-cb"]:checked')).map(cb => cb.value); + } + + async function loadWorkers() { + const select = document.getElementById('qc-worker'); + const preserveSingle = select ? select.value : ''; + const preserveMulti = new Set(selectedWorkerCheckboxIds()); + try { + _workers = await Pulse.api.get('/api/workers') || []; + } catch (e) { + _workers = []; + console.error('[Pulse:quick] failed to load workers', e); + } + renderWorkerSelect(_workers, preserveSingle); + renderWorkerCheckboxes(_workers, preserveMulti); + return _workers; + } + + /* ------------------------------------------------------------------- + Templates modal + ------------------------------------------------------------------- */ + function renderTemplates() { + const list = document.getElementById('qc-templates-list'); + if (!list) return; + list.innerHTML = TEMPLATES.map((t, i) => + '
' + + '
' + esc(t.name) + '
' + + '
' + esc(t.cmd) + '
' + + '
' + esc(t.desc) + '
' + + '
' + ).join(''); + } + + function renderHistory() { + const list = document.getElementById('qc-history-list'); + if (!list) return; + const history = loadHistory(); + if (history.length === 0) { + list.innerHTML = '
No command history yet
'; + return; + } + list.innerHTML = history.map((item, i) => + '
' + + '
' + esc(item.command) + '
' + + '
' + esc(Pulse.fmt.dateTime(item.timestamp)) + ' — ' + esc(item.worker) + '
' + + '
' + ).join(''); + } + + /* ------------------------------------------------------------------- + Result rendering + ------------------------------------------------------------------- */ + function renderSingleSuccess(executionId) { + const wrap = document.getElementById('qc-result'); + if (!wrap) return; + wrap.innerHTML = + '
' + + '✓' + + '
' + + '
Command sent successfully
' + + '
Execution ID: ' + esc(executionId) + ' — ' + + 'view in Executions' + + '
' + + '
' + + '
'; + } + + function renderSingleFailure(message) { + const wrap = document.getElementById('qc-result'); + if (!wrap) return; + wrap.innerHTML = + '
' + + '✕' + + '
' + + '
Command failed
' + + '
' + esc(message) + '
' + + '
' + + '
'; + } + + function renderMultiResult(results, successCount, failCount) { + const wrap = document.getElementById('qc-result'); + if (!wrap) return; + const rows = results.map(r => + '' + + '' + esc(r.worker) + '' + + '' + + (r.success + ? '✓ Sent (' + esc(String(r.executionId || '').slice(0, 8)) + '…)' + : '✕ ' + esc(r.error) + '') + + '' + + '' + ).join(''); + wrap.innerHTML = + '
' + + '
' + + '
Multi-worker execution complete
' + + '
Success: ' + successCount + '  |  Failed: ' + failCount + '
' + + '
' + + '
' + + '' + + '' + + '' + rows + '' + + '
WorkerResult
'; + } + + function renderExecuting(count) { + const wrap = document.getElementById('qc-result'); + if (!wrap) return; + wrap.innerHTML = '
Executing' + + (count > 1 ? ' on ' + count + ' worker(s)' : '') + '…
'; + } + + /* ------------------------------------------------------------------- + Execute + ------------------------------------------------------------------- */ + async function execute() { + const commandEl = document.getElementById('qc-command'); + const command = commandEl ? commandEl.value.trim() : ''; + if (!command) { + Pulse.toast.error('Please enter a command'); + return; + } + const mode = currentMode(); + + if (mode === 'single') { + const select = document.getElementById('qc-worker'); + const workerId = select ? select.value : ''; + if (!workerId) { + Pulse.toast.error('Please select a worker'); + return; + } + const worker = _workers.find(w => w.id === workerId); + const workerName = worker ? worker.name : 'Unknown'; + renderExecuting(1); + try { + const data = await Pulse.api.post('/api/workers/' + encodeURIComponent(workerId) + '/command', { command }); + addToHistory(command, workerName); + renderSingleSuccess(data && data.execution_id); + Pulse.beep('success'); + } catch (e) { + renderSingleFailure(e.message || 'Failed to execute command'); + Pulse.beep('error'); + } + return; + } + + const workerIds = selectedWorkerCheckboxIds(); + if (workerIds.length === 0) { + Pulse.toast.error('Please select at least one worker'); + return; + } + renderExecuting(workerIds.length); + const results = []; + let successCount = 0; + let failCount = 0; + for (const workerId of workerIds) { + const worker = _workers.find(w => w.id === workerId); + const workerLabel = worker ? worker.name : workerId; + try { + const data = await Pulse.api.post('/api/workers/' + encodeURIComponent(workerId) + '/command', { command }); + results.push({ worker: workerLabel, success: true, executionId: data && data.execution_id }); + successCount++; + } catch (e) { + results.push({ worker: workerLabel, success: false, error: e.message || 'Failed to execute' }); + failCount++; + } + } + addToHistory(command, workerIds.length + ' workers'); + renderMultiResult(results, successCount, failCount); + if (failCount === 0) Pulse.beep('success'); + else if (successCount > 0) Pulse.beep('info'); + else Pulse.beep('error'); + } + + /* ------------------------------------------------------------------- + Cross-page re-run (from Executions page) + ------------------------------------------------------------------- */ + function consumeRerun() { + let raw; + try { raw = window.sessionStorage.getItem(RERUN_KEY); } catch (e) { return; } + if (!raw) return; + try { window.sessionStorage.removeItem(RERUN_KEY); } catch (e) { /* ignore */ } + let payload; + try { payload = JSON.parse(raw); } catch (e) { return; } + if (!payload) return; + + const singleRadio = document.getElementById('qc-mode-single'); + if (singleRadio) singleRadio.checked = true; + applyMode(); + + if (payload.worker_id) { + const select = document.getElementById('qc-worker'); + const hasWorker = select && _workers.some(w => w.id === payload.worker_id); + if (hasWorker) { + select.value = payload.worker_id; + } else { + Pulse.toast.warning('Original worker is no longer available — select a worker to run this command.'); + } + } + const commandEl = document.getElementById('qc-command'); + if (commandEl) { + commandEl.value = payload.command || ''; + commandEl.focus(); + } + } + + /* ------------------------------------------------------------------- + Data loading / refresh + ------------------------------------------------------------------- */ + async function refresh() { + await loadWorkers(); + } + + function init() { + Pulse.actions.registerAll({ + 'qc:mode': applyMode, + 'qc:templates-open': () => { renderTemplates(); if (window.lt && lt.modal) lt.modal.open('qc-templates-modal'); }, + 'qc:template-use': (el) => { + const idx = Number(el.getAttribute('data-index')); + const tpl = TEMPLATES[idx]; + if (!tpl) return; + const commandEl = document.getElementById('qc-command'); + if (commandEl) commandEl.value = tpl.cmd; + if (window.lt && lt.modal) lt.modal.close('qc-templates-modal'); + }, + 'qc:history-open': () => { renderHistory(); if (window.lt && lt.modal) lt.modal.open('qc-history-modal'); }, + 'qc:history-use': (el) => { + const idx = Number(el.getAttribute('data-index')); + const history = loadHistory(); + const item = history[idx]; + if (!item) return; + const commandEl = document.getElementById('qc-command'); + if (commandEl) commandEl.value = item.command; + if (window.lt && lt.modal) lt.modal.close('qc-history-modal'); + }, + 'qc:select-all': () => { + document.querySelectorAll('input[name="qc-worker-cb"]').forEach(cb => { cb.checked = true; }); + }, + 'qc:select-online': () => { + document.querySelectorAll('input[name="qc-worker-cb"]').forEach(cb => { + cb.checked = cb.getAttribute('data-status') === 'online'; + }); + }, + 'qc:clear-all': () => { + document.querySelectorAll('input[name="qc-worker-cb"]').forEach(cb => { cb.checked = false; }); + }, + 'qc:execute': execute, + }); + + if (window.lt && lt.keys && typeof lt.keys.on === 'function') { + lt.keys.on('ctrl+enter', () => { execute(); }); + } + + applyMode(); + return loadWorkers().then(() => { consumeRerun(); }); + } + + function onEvent(type) { + if (type === 'worker_update') { + loadWorkers(); + return true; + } + return false; + } + + Pulse.registerPage({ name: 'quick', init, refresh, onEvent }); +})(); diff --git a/public/assets/pages/scheduler.css b/public/assets/pages/scheduler.css new file mode 100644 index 0000000..b93b048 --- /dev/null +++ b/public/assets/pages/scheduler.css @@ -0,0 +1,10 @@ +/* PULSE — Scheduler page (WP-F) styles. Prefix: sc- */ + +.sc-row-disabled { + opacity: 0.6; +} + +.sc-countdown { + color: var(--text-muted); + font-size: 0.85em; +} diff --git a/public/assets/pages/scheduler.js b/public/assets/pages/scheduler.js new file mode 100644 index 0000000..8b4dc0b --- /dev/null +++ b/public/assets/pages/scheduler.js @@ -0,0 +1,286 @@ +/* ===================================================================== + PULSE — Scheduler page (WP-F) + Owns DOM id prefix `sc-` and action namespace `sc:*`. + ===================================================================== */ +'use strict'; + +(function () { + const esc = Pulse.esc; + const fmt = Pulse.fmt; + + let _schedules = []; + let _workers = []; + + /* ------------------------------------------------------------------- + Helpers + ------------------------------------------------------------------- */ + function parseWorkerIds(raw) { + if (Array.isArray(raw)) return raw; + if (typeof raw === 'string') { + try { + const parsed = JSON.parse(raw); + return Array.isArray(parsed) ? parsed : raw.split(',').filter(Boolean); + } catch (e) { + return raw.split(',').filter(Boolean); + } + } + return []; + } + + function scheduleDescription(s) { + if (s.schedule_type === 'interval') return 'Every ' + esc(s.schedule_value) + ' minutes'; + if (s.schedule_type === 'hourly') return 'Every ' + esc(s.schedule_value) + ' hour(s)'; + if (s.schedule_type === 'daily') return 'Daily at ' + esc(s.schedule_value); + if (s.schedule_type === 'cron') return 'Cron: ' + esc(s.schedule_value); + return esc(s.schedule_value || ''); + } + + function workerNamesHtml(ids) { + if (!ids.length) return '—'; + return ids.map(id => { + const w = _workers.find(worker => worker.id === id); + const label = w ? w.name : String(id).slice(0, 8); + return '' + esc(label) + ''; + }).join(' '); + } + + function nextRunCountdown(nextRun) { + const d = fmt.safeDate(nextRun); + if (!d) return ''; + const secs = Math.round((d.getTime() - Date.now()) / 1000); + if (secs <= 0) return 'now'; + if (secs < 60) return secs + 's'; + if (secs < 3600) return Math.round(secs / 60) + 'm'; + return Math.round(secs / 3600) + 'h'; + } + + /* ------------------------------------------------------------------- + Table rendering + ------------------------------------------------------------------- */ + function rowHtml(s) { + const workerIds = parseWorkerIds(s.worker_ids); + const lastRun = s.last_run ? esc(fmt.dateTime(s.last_run)) : 'Never'; + const nextRunDate = fmt.safeDate(s.next_run); + const countdown = nextRunCountdown(s.next_run); + const nextRun = nextRunDate + ? esc(fmt.dateTime(s.next_run)) + (countdown ? ' (in ' + esc(countdown) + ')' : '') + : 'Not scheduled'; + const statusBadge = s.enabled + ? 'ENABLED' + : 'DISABLED'; + const adminActions = Pulse.isAdmin + ? '
' + + '' + + '' + + '
' + : ''; + return ( + '' + + '' + esc(s.name || '') + '' + + '' + esc(s.command || '') + '' + + '' + scheduleDescription(s) + '' + + '' + workerNamesHtml(workerIds) + '' + + '' + lastRun + '' + + '' + nextRun + '' + + '' + statusBadge + '' + + '' + adminActions + '' + + '' + ); + } + + function render() { + const wrap = document.getElementById('sc-wrap'); + if (!wrap) return; + if (_schedules.length === 0) { + wrap.innerHTML = '
No scheduled commands yet
'; + return; + } + wrap.innerHTML = + '' + + '' + + '' + _schedules.map(rowHtml).join('') + '' + + '
NameCommandScheduleWorkersLast runNext runStatusActions
'; + } + + function renderError() { + const wrap = document.getElementById('sc-wrap'); + if (!wrap) return; + wrap.innerHTML = + '
' + + '✕' + + '
Failed to load schedules
' + + '
'; + } + + function onTick() { + document.querySelectorAll('#sc-wrap .sc-countdown[data-next-run]').forEach(el => { + const countdown = nextRunCountdown(el.getAttribute('data-next-run')); + el.textContent = countdown ? '(in ' + countdown + ')' : ''; + }); + } + + /* ------------------------------------------------------------------- + Create modal + ------------------------------------------------------------------- */ + function renderCreateWorkerList() { + const wrap = document.getElementById('sc-worker-list'); + if (!wrap) return; + if (_workers.length === 0) { + wrap.innerHTML = '
No workers available
'; + return; + } + wrap.innerHTML = _workers.map(w => + '' + ).join(''); + } + + function updateValueInput() { + const type = document.getElementById('sc-type').value; + const container = document.getElementById('sc-value-container'); + if (!container) return; + if (type === 'interval') { + container.innerHTML = + '' + + ''; + } else if (type === 'hourly') { + container.innerHTML = + '' + + ''; + } else if (type === 'daily') { + container.innerHTML = + '' + + ''; + } + } + + function resetCreateForm() { + const form = document.getElementById('sc-create-form'); + if (form) form.reset(); + const type = document.getElementById('sc-type'); + if (type) type.value = 'interval'; + updateValueInput(); + renderCreateWorkerList(); + } + + async function submitCreate() { + const name = document.getElementById('sc-name').value.trim(); + const command = document.getElementById('sc-command').value.trim(); + const type = document.getElementById('sc-type').value; + const valueEl = document.getElementById('sc-value'); + const value = valueEl ? valueEl.value : ''; + const workerIds = Array.from(document.querySelectorAll('input[name="sc-worker-cb"]:checked')).map(cb => cb.value); + + if (!name || !command || !value || workerIds.length === 0) { + Pulse.toast.error('Please fill in all fields and select at least one worker'); + return; + } + + try { + await Pulse.api.post('/api/scheduled-commands', { + name: name, + command: command, + worker_ids: workerIds, + schedule_type: type, + schedule_value: value, + }); + if (window.lt && lt.modal) lt.modal.close('sc-create-modal'); + Pulse.toast.success('Schedule created successfully'); + resetCreateForm(); + await load(); + } catch (e) { + Pulse.toast.error('Failed to create schedule: ' + (e.message || 'unknown error')); + } + } + + async function toggleSchedule(id) { + try { + const data = await Pulse.api.put('/api/scheduled-commands/' + encodeURIComponent(id) + '/toggle'); + Pulse.toast.success('Schedule ' + (data && data.enabled ? 'enabled' : 'disabled')); + await load(); + } catch (e) { + Pulse.toast.error('Failed to toggle schedule: ' + (e.message || 'unknown error')); + } + } + + async function deleteSchedule(id, name) { + const ok = await Pulse.confirm({ + title: 'Delete schedule', + message: 'Delete scheduled command: ' + name + '?', + type: 'error', + confirmLabel: 'DELETE', + }); + if (!ok) return; + try { + await Pulse.api.delete('/api/scheduled-commands/' + encodeURIComponent(id)); + Pulse.toast.success('Schedule deleted'); + await load(); + } catch (e) { + Pulse.toast.error('Failed to delete schedule: ' + (e.message || 'unknown error')); + } + } + + /* ------------------------------------------------------------------- + Data loading + ------------------------------------------------------------------- */ + async function loadWorkers() { + try { + _workers = await Pulse.api.get('/api/workers') || []; + } catch (e) { + _workers = []; + console.error('[Pulse:scheduler] failed to load workers', e); + } + return _workers; + } + + async function loadSchedules() { + try { + _schedules = await Pulse.api.get('/api/scheduled-commands') || []; + render(); + } catch (e) { + _schedules = []; + console.error('[Pulse:scheduler] failed to load schedules', e); + renderError(); + } + return _schedules; + } + + async function load() { + await loadWorkers(); + await loadSchedules(); + } + + async function refresh() { + await load(); + } + + function init() { + Pulse.actions.registerAll({ + 'sc:create-open': () => { + resetCreateForm(); + if (window.lt && lt.modal) lt.modal.open('sc-create-modal'); + }, + 'sc:create-submit': submitCreate, + 'sc:type': updateValueInput, + 'sc:toggle': (el) => toggleSchedule(el.getAttribute('data-id')), + 'sc:delete': (el) => deleteSchedule(el.getAttribute('data-id'), el.getAttribute('data-name')), + }); + Pulse.events.on('tick', onTick); + return load(); + } + + function onEvent(type) { + if (type === 'worker_update') { + loadWorkers().then(render); + return true; + } + return false; + } + + Pulse.registerPage({ name: 'scheduler', init, refresh, onEvent }); +})(); diff --git a/public/assets/pages/workers.css b/public/assets/pages/workers.css new file mode 100644 index 0000000..03a5ee1 --- /dev/null +++ b/public/assets/pages/workers.css @@ -0,0 +1,32 @@ +/* Workers page (WP-C) — grid layout for worker cards. */ +.wk-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: var(--space-md); +} + +.wk-card-header { + display: flex; + align-items: center; + gap: var(--space-sm); + margin-bottom: var(--space-sm); +} + +.wk-name { + font-weight: 700; + flex: 1; +} + +.wk-lastseen { + font-size: 0.7rem; + color: var(--text-muted); + margin-bottom: var(--space-sm); +} + +.wk-card .lt-card-footer { + margin-top: var(--space-md); + padding-top: var(--space-sm); + border-top: 1px solid var(--border-color-dim); + display: flex; + justify-content: flex-end; +} diff --git a/public/assets/pages/workers.js b/public/assets/pages/workers.js new file mode 100644 index 0000000..45d61f9 --- /dev/null +++ b/public/assets/pages/workers.js @@ -0,0 +1,257 @@ +/* ===================================================================== + PULSE — Workers page (WP-C) + Owns DOM id prefix `wk-` and action namespace `wk:*`. + ===================================================================== */ +'use strict'; + +(function () { + const esc = Pulse.esc; + const fmt = Pulse.fmt; + + function parseMeta(worker) { + if (!worker || !worker.metadata) return null; + if (typeof worker.metadata === 'string') { + try { return JSON.parse(worker.metadata); } catch (e) { return null; } + } + return worker.metadata; + } + + function memPct(meta) { + if (!meta || !meta.totalMem) return 0; + return ((meta.totalMem - meta.freeMem) / meta.totalMem * 100); + } + + function loadAvgText(meta) { + if (!meta || !meta.loadavg) return 'N/A'; + return meta.loadavg.map(l => Number(l).toFixed(2)).join(', '); + } + + /* ------------------------------------------------------------------- + Card construction + ------------------------------------------------------------------- */ + function footerHtml(worker) { + if (!Pulse.isAdmin) return ''; + return ( + '
' + + '' + + '
' + ); + } + + function cardHtml(worker) { + const meta = parseMeta(worker); + const online = worker.status === 'online'; + const pct = memPct(meta).toFixed(1); + return ( + '
' + + '' + + '' + esc(worker.name) + '' + + '' + esc(String(worker.status || '').toUpperCase()) + '' + + '
' + + '
' + + 'Last seen: ' + esc(fmt.ago(worker.last_heartbeat)) + + '
' + + '
' + + '
System
' + + '
' + (meta ? esc((meta.platform || 'N/A') + ' ' + (meta.arch || '') + ' | ' + (meta.cpus || '?') + ' CPU cores') : 'N/A') + '
' + + '
Memory
' + + '
' + + (meta ? esc(fmt.bytes(meta.totalMem - meta.freeMem) + ' / ' + fmt.bytes(meta.totalMem) + ' (' + pct + '% used)') : 'N/A') + + '
' + + '
' + + '
Load Avg
' + + '
' + esc(loadAvgText(meta)) + '
' + + '
Uptime
' + + '
' + esc(fmt.uptime(meta && meta.uptime)) + '
' + + '
Active Tasks
' + + '
' + esc((meta && meta.activeTasks || 0) + ' / ' + (meta && meta.maxConcurrentTasks || 0)) + '
' + + '
' + + footerHtml(worker) + ); + } + + function createCard(worker) { + const div = document.createElement('div'); + div.className = 'lt-card wk-card'; + div.setAttribute('data-worker-id', worker.id); + div.classList.add(worker.status === 'online' ? 'wk-card-online' : 'wk-card-offline'); + div.innerHTML = cardHtml(worker); + return div; + } + + /* Update an existing card's fields in place — never replaces the card + node itself, so identity is preserved across refreshes. */ + function patchCard(card, worker) { + const meta = parseMeta(worker); + const online = worker.status === 'online'; + + card.classList.toggle('wk-card-online', online); + card.classList.toggle('wk-card-offline', !online); + + const dot = card.querySelector('[data-wk-dot]'); + if (dot) dot.className = 'lt-dot ' + (online ? 'lt-dot-up' : 'lt-dot-down'); + + const name = card.querySelector('[data-wk-name]'); + if (name) name.textContent = worker.name; + + const status = card.querySelector('[data-wk-status]'); + if (status) { + status.className = fmt.status(worker.status); + status.textContent = String(worker.status || '').toUpperCase(); + } + + const lastSeen = card.querySelector('[data-wk-lastseen]'); + if (lastSeen) { + lastSeen.setAttribute('data-last-heartbeat', worker.last_heartbeat || ''); + lastSeen.textContent = 'Last seen: ' + fmt.ago(worker.last_heartbeat); + } + + const system = card.querySelector('[data-wk-system]'); + if (system) system.textContent = meta ? ((meta.platform || 'N/A') + ' ' + (meta.arch || '') + ' | ' + (meta.cpus || '?') + ' CPU cores') : 'N/A'; + + const pct = memPct(meta).toFixed(1); + const memory = card.querySelector('[data-wk-memory]'); + if (memory) { + const bar = memory.querySelector('[data-wk-membar]'); + const text = meta ? (fmt.bytes(meta.totalMem - meta.freeMem) + ' / ' + fmt.bytes(meta.totalMem) + ' (' + pct + '% used)') : 'N/A'; + if (memory.firstChild && memory.firstChild.nodeType === Node.TEXT_NODE) { + memory.firstChild.textContent = text; + } else { + memory.insertBefore(document.createTextNode(text), memory.firstChild); + } + if (bar) bar.style.width = (meta ? pct : 0) + '%'; + } + + const load = card.querySelector('[data-wk-load]'); + if (load) load.textContent = loadAvgText(meta); + + const uptime = card.querySelector('[data-wk-uptime]'); + if (uptime) uptime.textContent = fmt.uptime(meta && meta.uptime); + + const tasks = card.querySelector('[data-wk-tasks]'); + if (tasks) tasks.textContent = (meta && meta.activeTasks || 0) + ' / ' + (meta && meta.maxConcurrentTasks || 0); + + // Admin footer can appear/disappear if isAdmin changes mid-session (rare, + // but keep it correct rather than assuming it's static). + const hasFooter = !!card.querySelector('.lt-card-footer'); + if (Pulse.isAdmin && !hasFooter) { + card.insertAdjacentHTML('beforeend', footerHtml(worker)); + } else if (!Pulse.isAdmin && hasFooter) { + const f = card.querySelector('.lt-card-footer'); + if (f) f.remove(); + } else if (hasFooter) { + const btn = card.querySelector('[data-action="wk:delete"]'); + if (btn) btn.setAttribute('data-worker-name', worker.name); + } + } + + /* ------------------------------------------------------------------- + Grid rendering — patches existing cards, adds/removes as needed. + ------------------------------------------------------------------- */ + function renderGrid(workers) { + const grid = document.getElementById('wk-grid'); + if (!grid) return; + + if (workers.length === 0) { + grid.innerHTML = + '
' + + '
⚙
' + + '
No workers connected
' + + '
Workers appear here once they connect and send a heartbeat.
' + + '
'; + return; + } + + const loading = document.getElementById('wk-loading'); + if (loading) loading.remove(); + + const seen = new Set(); + const order = []; + workers.forEach(worker => { + seen.add(String(worker.id)); + let card = grid.querySelector('.wk-card[data-worker-id="' + cssEscape(worker.id) + '"]'); + if (!card) { + card = createCard(worker); + } else { + patchCard(card, worker); + } + order.push(card); + }); + + // Remove cards for workers no longer present. + Array.prototype.slice.call(grid.querySelectorAll('.wk-card')).forEach(card => { + if (!seen.has(String(card.getAttribute('data-worker-id')))) card.remove(); + }); + + // Ensure DOM order matches API order without detaching untouched nodes + // unnecessarily (appendChild on an already-positioned node is a no-op + // move, not a re-create, so identity is preserved either way). + order.forEach(card => grid.appendChild(card)); + } + + function cssEscape(v) { + if (window.CSS && CSS.escape) return CSS.escape(String(v)); + return String(v).replace(/["\\]/g, '\\$&'); + } + + function renderError() { + const grid = document.getElementById('wk-grid'); + if (!grid) return; + grid.innerHTML = '
Failed to load workers
'; + } + + /* ------------------------------------------------------------------- + Data loading + actions + ------------------------------------------------------------------- */ + async function loadWorkers() { + try { + const workers = await Pulse.api.get('/api/workers') || []; + renderGrid(workers); + } catch (e) { + console.error('[Pulse:workers] failed to load workers', e); + renderError(); + } + } + + async function deleteWorker(el) { + const id = el.getAttribute('data-worker-id'); + const name = el.getAttribute('data-worker-name') || 'this worker'; + const ok = await Pulse.confirm({ + title: 'Delete worker', + message: 'Delete worker ' + name + '?', + type: 'error', + }); + if (!ok) return; + try { + await Pulse.api.delete('/api/workers/' + encodeURIComponent(id)); + Pulse.toast.success('Worker deleted'); + await loadWorkers(); + } catch (e) { + Pulse.toast.error((e && e.message) || 'Failed to delete worker'); + } + } + + function onTick() { + document.querySelectorAll('#wk-grid [data-wk-lastseen][data-last-heartbeat]').forEach(el => { + const v = el.getAttribute('data-last-heartbeat'); + if (v) el.textContent = 'Last seen: ' + fmt.ago(v); + }); + } + + function init() { + Pulse.actions.register('wk:delete', deleteWorker); + Pulse.events.on('tick', onTick); + return loadWorkers(); + } + + function onEvent(type) { + if (type === 'worker_update') { + loadWorkers(); + return true; + } + return false; + } + + Pulse.registerPage({ name: 'workers', init, refresh: loadWorkers, onEvent }); +})(); diff --git a/public/assets/pages/workflows.css b/public/assets/pages/workflows.css new file mode 100644 index 0000000..1ddc689 --- /dev/null +++ b/public/assets/pages/workflows.css @@ -0,0 +1,37 @@ +/* Workflows page (WP-D) — extends base.css, never overrides its variables. */ + +.wf-json-textarea { + font-family: var(--font-mono); + min-height: 200px; +} + +.wf-json-textarea-lg { + min-height: 320px; + font-size: 0.8rem; +} + +.wf-checkbox-label { + display: flex; + align-items: center; + gap: var(--space-sm); + font-size: 0.8rem; + color: var(--text-secondary); + cursor: pointer; +} + +.wf-required { + color: var(--accent-red); +} + +/* base.css defines .lt-field-error as a hook (see base.js field validation) + but ships no visual style for it — Workflows renders it directly for + JSON-parse / server-side errors, so give it one here. */ +.lt-field-error { + color: var(--accent-red); + font-size: 0.72rem; + letter-spacing: 0.02em; +} + +.wf-input-invalid { + border-color: var(--accent-red) !important; +} diff --git a/public/assets/pages/workflows.js b/public/assets/pages/workflows.js new file mode 100644 index 0000000..11cf75e --- /dev/null +++ b/public/assets/pages/workflows.js @@ -0,0 +1,355 @@ +/* ===================================================================== + PULSE — Workflows page (WP-D) + --------------------------------------------------------------------- + Owns: DOM id prefix `wf-`, action namespace `wf:*`. + Consumes the frozen window.Pulse contract from /assets/app.js. + ===================================================================== */ +'use strict'; + +(function () { + // Example workflow definition. The Create modal is pre-filled with this + // every time it opens (fixes the old bug where the textarea was blanked). + var EXAMPLE_DEFINITION = { + steps: [ + { + name: 'Example Step', + type: 'execute', + targets: ['all'], + command: "echo 'Hello from PULSE'" + } + ] + }; + + // id -> parsed definition object, rebuilt on every list load. + var _registry = {}; + // id -> raw row from the list response (name/description/etc.). + var _rowsById = {}; + // workflow id currently targeted by the Run modal. + var _pendingWorkflowId = null; + + function paramBadge(def) { + var params = (def && def.params) || []; + if (!params.length) return ''; + var n = params.length; + return ' ' + n + ' param' + (n > 1 ? 's' : '') + ''; + } + + function parseDefinition(raw) { + if (raw && typeof raw === 'object') return raw; + if (typeof raw === 'string') { + try { return JSON.parse(raw); } catch (e) { return {}; } + } + return {}; + } + + function renderEmptyState() { + return ( + '
' + + '
⚙
' + + '
No workflows yet
' + + '
Workflows let you run multi-step jobs across one or more workers.
' + + '' + + '
' + ); + } + + function renderRow(w) { + var def = _registry[w.id] || {}; + var isAdmin = window.Pulse.isAdmin; + var esc = window.Pulse.esc; + var actions = + ''; + if (isAdmin) { + actions += + ' ' + + ' '; + } + var createdAt = window.Pulse.fmt.dateTime(w.created_at); + return ( + '' + + '' + esc(w.name) + paramBadge(def) + '' + + '' + esc(w.description || 'No description') + '' + + '' + esc(w.created_by || 'Unknown') + ' · ' + esc(createdAt) + '' + + '
' + actions + '
' + + '' + ); + } + + function renderList(workflows) { + var el = document.getElementById('wf-list'); + if (!el) return; + if (!workflows.length) { + el.innerHTML = renderEmptyState(); + return; + } + var rows = workflows.map(renderRow).join(''); + el.innerHTML = + '
' + + '' + + '' + + '' + rows + '' + + '
NameDescriptionCreatedActions
' + + '
'; + } + + function renderLoadError(message) { + var el = document.getElementById('wf-list'); + if (!el) return; + el.innerHTML = + ''; + } + + function loadWorkflows() { + return window.Pulse.api.get('/api/workflows').then(function (workflows) { + var list = workflows || []; + _registry = {}; + _rowsById = {}; + list.forEach(function (w) { + _rowsById[w.id] = w; + _registry[w.id] = parseDefinition(w.definition); + }); + renderList(list); + }).catch(function (e) { + renderLoadError(e && e.message); + }); + } + + /* --------------------------------------------------------------- + Create modal + --------------------------------------------------------------- */ + function showFieldError(id, message) { + var el = document.getElementById(id); + if (!el) return; + el.textContent = message || ''; + el.hidden = !message; + } + + function openCreateModal() { + document.getElementById('wf-create-form').reset(); + document.getElementById('wf-create-definition').value = JSON.stringify(EXAMPLE_DEFINITION, null, 2); + showFieldError('wf-create-error', ''); + window.lt.modal.open('wf-create-modal'); + } + + function submitCreateForm(formEl) { + var name = formEl.elements['name'].value.trim(); + var description = formEl.elements['description'].value.trim(); + var definitionText = formEl.elements['definition'].value; + var webhookUrl = formEl.elements['webhook_url'].value.trim() || null; + + if (!name) { + showFieldError('wf-create-error', 'Name is required.'); + return; + } + + var definition; + try { + definition = JSON.parse(definitionText); + } catch (e) { + showFieldError('wf-create-error', 'Invalid JSON: ' + e.message); + return; + } + showFieldError('wf-create-error', ''); + + return window.Pulse.api.post('/api/workflows', { + name: name, + description: description, + definition: definition, + webhook_url: webhookUrl + }).then(function () { + window.lt.modal.close('wf-create-modal'); + window.Pulse.toast.success('Workflow created'); + return loadWorkflows(); + }).catch(function (e) { + showFieldError('wf-create-error', (e && e.message) || 'Failed to create workflow'); + }); + } + + /* --------------------------------------------------------------- + Edit modal (admin) + --------------------------------------------------------------- */ + function openEditModal(workflowId) { + showFieldError('wf-edit-error', ''); + return window.Pulse.api.get('/api/workflows/' + encodeURIComponent(workflowId)).then(function (wf) { + document.getElementById('wf-edit-id').value = wf.id; + document.getElementById('wf-edit-name').value = wf.name || ''; + document.getElementById('wf-edit-description').value = wf.description || ''; + document.getElementById('wf-edit-definition').value = JSON.stringify(parseDefinition(wf.definition), null, 2); + document.getElementById('wf-edit-webhook').value = wf.webhook_url || ''; + window.lt.modal.open('wf-edit-modal'); + }).catch(function (e) { + window.Pulse.toast.error((e && e.message) || 'Failed to load workflow'); + }); + } + + function submitEditForm(formEl) { + var id = formEl.elements['id'].value; + var name = formEl.elements['name'].value.trim(); + var description = formEl.elements['description'].value.trim(); + var definitionText = formEl.elements['definition'].value; + var webhookUrl = formEl.elements['webhook_url'].value.trim() || null; + + if (!name) { + showFieldError('wf-edit-error', 'Name is required.'); + return; + } + + var definition; + try { + definition = JSON.parse(definitionText); + } catch (e) { + showFieldError('wf-edit-error', 'Invalid JSON: ' + e.message); + return; + } + showFieldError('wf-edit-error', ''); + + return window.Pulse.api.put('/api/workflows/' + encodeURIComponent(id), { + name: name, + description: description, + definition: definition, + webhook_url: webhookUrl + }).then(function () { + window.lt.modal.close('wf-edit-modal'); + window.Pulse.toast.success('Workflow saved'); + return loadWorkflows(); + }).catch(function (e) { + showFieldError('wf-edit-error', (e && e.message) || 'Failed to save workflow'); + }); + } + + /* --------------------------------------------------------------- + Delete (admin) + --------------------------------------------------------------- */ + function deleteWorkflow(workflowId, workflowName) { + return window.Pulse.confirm({ + title: 'Delete Workflow', + message: 'Delete workflow "' + workflowName + '"? This cannot be undone.', + type: 'error', + confirmLabel: 'DELETE' + }).then(function (ok) { + if (!ok) return; + return window.Pulse.api.delete('/api/workflows/' + encodeURIComponent(workflowId)).then(function () { + window.Pulse.toast.success('Workflow deleted'); + return loadWorkflows(); + }).catch(function (e) { + window.Pulse.toast.error((e && e.message) || 'Failed to delete workflow'); + }); + }); + } + + /* --------------------------------------------------------------- + Run modal (execute): always shown, replaces the old confirm(). + --------------------------------------------------------------- */ + function paramFieldHtml(p) { + var esc = window.Pulse.esc; + var label = esc(p.label || p.name); + var required = p.required ? ' *' : ''; + return ( + '
' + + '' + + '' + + '
' + ); + } + + function openRunModal(workflowId) { + var row = _rowsById[workflowId]; + var def = _registry[workflowId] || {}; + var paramDefs = def.params || []; + + _pendingWorkflowId = workflowId; + document.getElementById('wf-run-workflow-id').value = workflowId; + document.getElementById('wf-run-name').textContent = row ? row.name : 'this workflow'; + document.getElementById('wf-run-dryrun').checked = false; + + var paramsEl = document.getElementById('wf-run-params'); + paramsEl.innerHTML = paramDefs.map(paramFieldHtml).join(''); + + window.lt.modal.open('wf-run-modal'); + + var first = paramsEl.querySelector('input'); + if (first) setTimeout(function () { first.focus(); }, 60); + } + + function submitRunForm() { + if (!_pendingWorkflowId) return; + var def = _registry[_pendingWorkflowId] || {}; + var paramDefs = def.params || []; + var params = {}; + + for (var i = 0; i < paramDefs.length; i++) { + var p = paramDefs[i]; + var el = document.getElementById('wf-run-param-' + p.name); + var val = el ? el.value.trim() : ''; + if (p.required && !val) { + el.classList.add('wf-input-invalid'); + el.focus(); + return; + } + el && el.classList.remove('wf-input-invalid'); + if (val) params[p.name] = val; + } + + var dryRun = document.getElementById('wf-run-dryrun').checked; + var workflowId = _pendingWorkflowId; + + return window.Pulse.api.post('/api/executions', { + workflow_id: workflowId, + params: params, + dry_run: dryRun + }).then(function (result) { + window.lt.modal.close('wf-run-modal'); + _pendingWorkflowId = null; + window.Pulse.toast.success(dryRun ? 'Dry run started' : 'Workflow started'); + window.location.href = '/executions?open=' + encodeURIComponent(result.id); + }).catch(function (e) { + window.Pulse.toast.error((e && e.message) || 'Failed to start execution'); + }); + } + + /* --------------------------------------------------------------- + Actions + page registration + --------------------------------------------------------------- */ + window.Pulse.actions.registerAll({ + 'wf:create-open': function () { openCreateModal(); }, + 'wf:create-submit': function (el) { return submitCreateForm(el); }, + 'wf:execute': function (el) { openRunModal(el.getAttribute('data-workflow-id')); }, + 'wf:edit-open': function (el) { return openEditModal(el.getAttribute('data-workflow-id')); }, + 'wf:edit-submit': function (el) { return submitEditForm(el); }, + 'wf:delete': function (el) { + return deleteWorkflow(el.getAttribute('data-workflow-id'), el.getAttribute('data-workflow-name')); + }, + 'wf:param-submit': function () { return submitRunForm(); } + }); + + // Enter in a param input submits the Run form (matches old behaviour). + document.addEventListener('keydown', function (ev) { + if (ev.key !== 'Enter') return; + var target = ev.target; + if (!target || target.tagName !== 'INPUT') return; + if (!target.closest || !target.closest('#wf-run-form')) return; + ev.preventDefault(); + submitRunForm(); + }); + + window.Pulse.registerPage({ + name: 'workflows', + init: function () { return loadWorkflows(); }, + refresh: function () { return loadWorkflows(); }, + onEvent: function (type) { + if (type === 'workflow_created' || type === 'workflow_updated' || type === 'workflow_deleted') { + loadWorkflows(); + return true; + } + return false; + } + }); +})(); diff --git a/views/pages/executions.ejs b/views/pages/executions.ejs new file mode 100644 index 0000000..af0b0b2 --- /dev/null +++ b/views/pages/executions.ejs @@ -0,0 +1,118 @@ +<%# + Executions page (WP-E). + + Owns DOM id prefix `ex-` and action namespace `ex:*`. + All behaviour lives in /assets/pages/executions.js (auto-loaded by the layout); + styling additions in /assets/pages/executions.css (auto-linked). + + The page-header is written out inline rather than through the shared partial + because the Clear Completed button is admin-only and the partial takes its + actions as a pre-rendered string. +%> +
+
+

Executions

+

Workflow and quick-command run history

+
+
+
+ + + + <% if (user && user.isAdmin) { %> + + <% } %> +
+
+
+ +
+ + + +
+ + +
+ + + +
+
+
+ +
+ + +
+
+ +
+
+ +
+
+
+
Loading…
+
+
+
+
+
Loading…
+
+
+
+
+ + + + + + diff --git a/views/pages/quick.ejs b/views/pages/quick.ejs new file mode 100644 index 0000000..956d28e --- /dev/null +++ b/views/pages/quick.ejs @@ -0,0 +1,89 @@ +<%# + Quick Command page (WP-F). Ad-hoc command execution against one or more + workers. All data loaded client-side by /assets/pages/quick.js. +%> +<%- include('../partials/page-header', { + title: 'Quick Command', + subtitle: 'Execute a command on selected workers instantly', + actions: '' + + '' +}) %> + +
+
+
+ +
+ + +
+
+ +
+ + +
+ + + +
+ + +
Ctrl+Enter to execute
+
+ + +
+ +
+
+ + + + + + diff --git a/views/pages/scheduler.ejs b/views/pages/scheduler.ejs new file mode 100644 index 0000000..294d376 --- /dev/null +++ b/views/pages/scheduler.ejs @@ -0,0 +1,62 @@ +<%# + Scheduler page (WP-F). List of scheduled commands + admin create/toggle/delete. + All data loaded client-side by /assets/pages/scheduler.js. +%> +<%- include('../partials/page-header', { + title: 'Scheduler', + subtitle: 'Automate command execution with flexible scheduling', + actions: '' + + (pageConfig && pageConfig.isAdmin ? '' : '') +}) %> + +
+
+
+
Loading…
+
+
+
+ + + diff --git a/views/pages/workflows.ejs b/views/pages/workflows.ejs index 0c593dd..331a0e4 100644 --- a/views/pages/workflows.ejs +++ b/views/pages/workflows.ejs @@ -43,7 +43,7 @@
- Steps run in order against the selected targets. + Steps run in order against the selected targets.
diff --git a/views/partials/page-header.ejs b/views/partials/page-header.ejs index 746de26..be33471 100644 --- a/views/partials/page-header.ejs +++ b/views/partials/page-header.ejs @@ -1,8 +1,7 @@ <%# Page header partial. Locals: title (string), subtitle (optional string), actions (optional raw HTML). - Usage from a page view: - <%- include('../partials/page-header', { title: 'Workers', subtitle: '', actions: '' }) %> + Usage from a page view: include('../partials/page-header', { title, subtitle, actions }) %>
-- 2.47.3 From eca5cb45b1d068de645cf7f866f24ca4403036c3 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Tue, 8 Sep 2026 22:17:15 -0400 Subject: [PATCH 3/4] =?UTF-8?q?feat(ui):=20TDS=20migration=20stage=203=20?= =?UTF-8?q?=E2=80=94=20integration=20fixes,=20legacy=20removal,=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix design-system class names that do not exist in base.css (.lt-alert--error, .lt-form-hint); add shared .lt-modal-lg, .lt-field-error and .is-invalid rules - Remove public/index.html and the public/base.js symlink - package.json: start script, correct main - README: vendored design system, Web UI section, new env vars, read-only dev mode Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01HamVMDrA8RqhyxmUHgiqRp --- README.md | 76 +- lib/render.js | 2 +- package.json | 3 +- public/assets/app.css | 35 +- public/assets/pages/dashboard.js | 15 +- public/assets/pages/executions.css | 11 +- public/assets/pages/workflows.css | 13 +- public/assets/pages/workflows.js | 4 +- public/base.js | 1 - public/index.html | 3162 ---------------------------- views/pages/quick.ejs | 2 +- 11 files changed, 129 insertions(+), 3195 deletions(-) delete mode 120000 public/base.js delete mode 100644 public/index.html diff --git a/README.md b/README.md index 218b597..27d4c1f 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,23 @@ A distributed workflow orchestration platform for managing and executing complex ## Styling & Layout -PULSE uses the **LotusGuild Terminal Design System**. For all styling, component, and layout documentation see: +PULSE uses the **LotusGuild Terminal Design System**. The design system is **vendored** into this +repo at `public/web_template/` (`base.css`, `base.js`, `VERSION`) and served from `/web_template/*`, +so the app has no runtime dependency on a sibling checkout. `public/web_template/VERSION` records +the design-system version, upstream short SHA, and sync date; asset URLs are cache-busted with it. + +Update the vendored copy with: + +```bash +scripts/sync-web-template.sh +``` + +The script copies `base.css`/`base.js` as regular files (never symlinks) and rewrites `VERSION`. +Never hand-edit `public/web_template/` — it is excluded from ESLint and overwritten on every sync. +Pulse-local gaps in the design system live in `public/assets/app.css` (currently `.lt-modal-lg`, +`.lt-field-error`, `.is-invalid`) and are candidates for upstreaming. + +Reference documentation: - [`web_template/README.md`](https://code.lotusguild.org/LotusGuild/web_template/src/branch/main/README.md) — full component reference, CSS variables, JS API - [`web_template/base.css`](https://code.lotusguild.org/LotusGuild/web_template/src/branch/main/base.css) — unified CSS (`.lt-*` classes) @@ -20,9 +36,39 @@ PULSE uses the **LotusGuild Terminal Design System**. For all styling, component - [`web_template/aesthetic_diff.md`](https://code.lotusguild.org/LotusGuild/web_template/src/branch/main/aesthetic_diff.md) — cross-app divergence analysis and convergence guide - [`web_template/node/middleware.js`](https://code.lotusguild.org/LotusGuild/web_template/src/branch/main/node/middleware.js) — Express auth, CSRF, CSP nonce middleware -**Pending convergence items (see aesthetic_diff.md):** -- Extract inline ` - - - -
-
-
-

⚡ PULSE

-

Pipelined Unified Logic & Server Engine

-
-
- -
-
-
- -
- - - - - - -
- - -
-
-
-

👥 Active Workers

-
Loading...
-
-
-

🚀 Recent Executions

-
Loading...
-
-
-
- - -
-
-

Worker Management

- -
Loading...
-
-
- - -
-
-

Workflow Management

- - -
Loading...
-
-
- - -
-
-

Execution History

- - -
- - -
- - -
-
- -
- - -
- - -
- - -
-
- -
- - -
-
- - - - - - - - -
Loading...
-
-
- - -
-
-

⚡ Quick Command Execution

-

Execute a command on selected workers instantly

- -
- - -
- - -
- - -
- -
- - -
- - - - - - - - -
-
-
- - -
-
-

⏰ Scheduled Commands

-

Automate command execution with flexible scheduling

- - - - -
Loading...
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/views/pages/quick.ejs b/views/pages/quick.ejs index 956d28e..1f7fdf5 100644 --- a/views/pages/quick.ejs +++ b/views/pages/quick.ejs @@ -47,7 +47,7 @@
-
Ctrl+Enter to execute
+
Ctrl+Enter to execute
-- 2.47.3 From 1c3a2777c8b796fddbe03726732252af89372f2c Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Tue, 8 Sep 2026 22:21:47 -0400 Subject: [PATCH 4/4] =?UTF-8?q?chore(deps):=20npm=20audit=20fix=20?= =?UTF-8?q?=E2=80=94=20ws=208.21.3,=20mysql2=203.24.4,=20qs=206.16.0=20(0?= =?UTF-8?q?=20vulnerabilities)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01HamVMDrA8RqhyxmUHgiqRp --- package-lock.json | 487 ++++++++++++++++++++++++++-------------------- 1 file changed, 272 insertions(+), 215 deletions(-) diff --git a/package-lock.json b/package-lock.json index 90f9de9..7f062e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,12 +24,13 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz", - "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", + "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.28.5", + "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" }, @@ -38,29 +39,31 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz", - "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz", + "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==", "dev": true, + "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/core": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz", - "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz", + "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.29.0", - "@babel/generator": "^7.29.0", - "@babel/helper-compilation-targets": "^7.28.6", - "@babel/helper-module-transforms": "^7.28.6", - "@babel/helpers": "^7.28.6", - "@babel/parser": "^7.29.0", - "@babel/template": "^7.28.6", - "@babel/traverse": "^7.29.0", - "@babel/types": "^7.29.0", + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helpers": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", @@ -77,13 +80,14 @@ } }, "node_modules/@babel/generator": { - "version": "7.29.1", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz", - "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz", + "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/parser": "^7.29.0", - "@babel/types": "^7.29.0", + "@babel/parser": "^7.29.8", + "@babel/types": "^7.29.8", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" @@ -93,13 +97,14 @@ } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz", - "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz", + "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/compat-data": "^7.28.6", - "@babel/helper-validator-option": "^7.27.1", + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" @@ -108,46 +113,40 @@ "node": ">=6.9.0" } }, - "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", - "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", - "dev": true, - "dependencies": { - "yallist": "^3.0.2" - } - }, "node_modules/@babel/helper-globals": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz", - "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz", + "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==", "dev": true, + "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-imports": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz", - "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz", + "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/traverse": "^7.28.6", - "@babel/types": "^7.28.6" + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz", - "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz", + "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.28.6", - "@babel/helper-validator-identifier": "^7.28.5", - "@babel/traverse": "^7.28.6" + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -166,52 +165,57 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", - "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", "dev": true, + "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.28.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz", - "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", "dev": true, + "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-option": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz", - "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz", + "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==", "dev": true, + "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helpers": { - "version": "7.29.2", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz", - "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz", + "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/template": "^7.28.6", - "@babel/types": "^7.29.0" + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.29.2", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz", - "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz", + "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/types": "^7.29.0" + "@babel/types": "^7.29.8" }, "bin": { "parser": "bin/babel-parser.js" @@ -443,31 +447,33 @@ } }, "node_modules/@babel/template": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz", - "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz", + "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.28.6", - "@babel/parser": "^7.28.6", - "@babel/types": "^7.28.6" + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz", - "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz", + "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.29.0", - "@babel/generator": "^7.29.0", - "@babel/helper-globals": "^7.28.0", - "@babel/parser": "^7.29.0", - "@babel/template": "^7.28.6", - "@babel/types": "^7.29.0", + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.8", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.8", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.8", "debug": "^4.3.1" }, "engines": { @@ -475,13 +481,14 @@ } }, "node_modules/@babel/types": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz", - "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz", + "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.27.1", - "@babel/helper-validator-identifier": "^7.28.5" + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -626,10 +633,11 @@ } }, "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": { - "version": "3.14.2", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz", - "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==", + "version": "3.15.2", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.15.2.tgz", + "integrity": "sha512-6EuL879VkRA+1Cz578mKMiKvjPNEuk6+r1JaFzoSWejZmtf7xWbIyw1e3KkxlkzTIt9Taw6JBhEppG7utc1P+w==", "dev": true, + "license": "MIT", "dependencies": { "argparse": "^1.0.7", "esprima": "^4.0.0" @@ -1155,7 +1163,6 @@ "version": "25.6.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-25.6.0.tgz", "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==", - "dev": true, "dependencies": { "undici-types": "~7.19.0" } @@ -1438,10 +1445,11 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "node_modules/baseline-browser-mapping": { - "version": "2.10.19", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.19.tgz", - "integrity": "sha512-qCkNLi2sfBOn8XhZQ0FXsT1Ki/Yo5P90hrkRamVFRS7/KV9hpfA4HkoWNU152+8w0zPjnxo5psx5NL3PSGgv5g==", + "version": "2.11.21", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.21.tgz", + "integrity": "sha512-uh8vpY/1/YyFkunIDFH/12p7/7VdPKA1hejMVEbdkEaWnUz0Hesvx5EbiU6XxjyHZIOju+ZMbQJkRh+es3/spQ==", "dev": true, + "license": "Apache-2.0", "bin": { "baseline-browser-mapping": "dist/cli.cjs" }, @@ -1450,20 +1458,20 @@ } }, "node_modules/body-parser": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.1.tgz", - "integrity": "sha512-nfDwkulwiZYQIGwxdy0RUmowMhKcFVcYXUU7m4QlKYim1rUtg83xm2yjZ40QjDuc291AJjjeSc9b++AWHSgSHw==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.3.0.tgz", + "integrity": "sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==", "license": "MIT", "dependencies": { "bytes": "^3.1.2", - "content-type": "^1.0.5", + "content-type": "^2.0.0", "debug": "^4.4.3", - "http-errors": "^2.0.0", - "iconv-lite": "^0.7.0", + "http-errors": "^2.0.1", + "iconv-lite": "^0.7.2", "on-finished": "^2.4.1", - "qs": "^6.14.0", - "raw-body": "^3.0.1", - "type-is": "^2.0.1" + "qs": "^6.15.2", + "raw-body": "^3.0.2", + "type-is": "^2.1.0" }, "engines": { "node": ">=18" @@ -1473,11 +1481,25 @@ "url": "https://opencollective.com/express" } }, + "node_modules/body-parser/node_modules/content-type": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz", + "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, "node_modules/brace-expansion": { - "version": "1.1.14", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz", - "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==", + "version": "1.1.18", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz", + "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==", "dev": true, + "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -1496,9 +1518,9 @@ } }, "node_modules/browserslist": { - "version": "4.28.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz", - "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==", + "version": "4.28.9", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.9.tgz", + "integrity": "sha512-EWazOblFYUvlGZcfGhPUPmYh3nikUxBVb+y9MJun5f3hBi812X+8MSQTujLBtgK3cf51fJWbWfOjyeO954d+Eg==", "dev": true, "funding": [ { @@ -1514,12 +1536,13 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { - "baseline-browser-mapping": "^2.10.12", - "caniuse-lite": "^1.0.30001782", - "electron-to-chromium": "^1.5.328", - "node-releases": "^2.0.36", - "update-browserslist-db": "^1.2.3" + "baseline-browser-mapping": "^2.11.20", + "caniuse-lite": "^1.0.30001810", + "electron-to-chromium": "^1.5.420", + "node-releases": "^2.0.54", + "update-browserslist-db": "^1.3.2" }, "bin": { "browserslist": "cli.js" @@ -1600,9 +1623,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001788", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001788.tgz", - "integrity": "sha512-6q8HFp+lOQtcf7wBK+uEenxymVWkGKkjFpCvw5W25cmMwEDU45p1xQFBQv8JDlMMry7eNxyBaR+qxgmTUZkIRQ==", + "version": "1.0.30001810", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz", + "integrity": "sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==", "dev": true, "funding": [ { @@ -1617,7 +1640,8 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ] + ], + "license": "CC-BY-4.0" }, "node_modules/chalk": { "version": "4.1.2", @@ -1857,15 +1881,6 @@ "node": ">=0.10.0" } }, - "node_modules/denque": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz", - "integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==", - "license": "Apache-2.0", - "engines": { - "node": ">=0.10" - } - }, "node_modules/depd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", @@ -1953,10 +1968,11 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.336", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.336.tgz", - "integrity": "sha512-AbH9q9J455r/nLmdNZes0G0ZKcRX73FicwowalLs6ijwOmCJSRRrLX63lcAlzy9ux3dWK1w1+1nsBJEWN11hcQ==", - "dev": true + "version": "1.5.425", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.425.tgz", + "integrity": "sha512-QvPtl41EUOnuT1HBvMKgxXRIaHNcagBPs50u7VULzhZXaGfqTbZyE16LQsctZ/RQHlGu+FOWeDTR4mY6YbeF1g==", + "dev": true, + "license": "ISC" }, "node_modules/emittery": { "version": "0.13.1", @@ -2013,9 +2029,9 @@ } }, "node_modules/es-object-atoms": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", - "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz", + "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==", "license": "MIT", "dependencies": { "es-errors": "^1.3.0" @@ -2307,11 +2323,13 @@ } }, "node_modules/express-rate-limit": { - "version": "8.3.1", - "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.3.1.tgz", - "integrity": "sha512-D1dKN+cmyPWuvB+G2SREQDzPY1agpBIcTa9sJxOPMCNeH3gwzhqJRDWCXW3gg0y//+LQ/8j52JbMROWyrKdMdw==", + "version": "8.7.0", + "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.7.0.tgz", + "integrity": "sha512-hOwV7WOxXfjRpAM1DSJWZDXx3GhplwD8IfwuwvogD8i1Qnkgosw/H45s4ZnFAUHDAhPjlY9hLBvJhKmGMyY26g==", + "license": "MIT", "dependencies": { - "ip-address": "10.1.0" + "debug": "^4.4.3", + "ip-address": "^10.2.0" }, "engines": { "node": ">= 16" @@ -2748,9 +2766,9 @@ } }, "node_modules/iconv-lite": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.0.tgz", - "integrity": "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==", + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.3.tgz", + "integrity": "sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==", "license": "MIT", "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" @@ -2834,9 +2852,10 @@ "license": "ISC" }, "node_modules/ip-address": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz", - "integrity": "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==", + "version": "10.7.0", + "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.7.0.tgz", + "integrity": "sha512-BGFsyJd5mpXp3rK6jIdADLNgpJUK1jnjzvYF8lK+VyDab9JAmqN0YOKDdP17HlgKb2+ehPgDc8EtnRLbGCAMhA==", + "license": "MIT", "engines": { "node": ">= 12" } @@ -3627,10 +3646,21 @@ "dev": true }, "node_modules/js-yaml": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", - "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==", + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.2.tgz", + "integrity": "sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/puzrin" + }, + { + "type": "github", + "url": "https://github.com/sponsors/nodeca" + } + ], + "license": "MIT", "dependencies": { "argparse": "^2.0.1" }, @@ -3760,18 +3790,19 @@ "license": "Apache-2.0" }, "node_modules/lru-cache": { - "version": "7.18.3", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz", - "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, "license": "ISC", - "engines": { - "node": ">=12" + "dependencies": { + "yallist": "^3.0.2" } }, "node_modules/lru.min": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/lru.min/-/lru.min-1.1.3.tgz", - "integrity": "sha512-Lkk/vx6ak3rYkRR0Nhu4lFUT2VDnQSxBe8Hbl7f36358p6ow8Bnvr8lrLt98H8J1aGxfhbX4Fs5tYg2+FTwr5Q==", + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/lru.min/-/lru.min-1.1.5.tgz", + "integrity": "sha512-5J9ysMYUpYIg9RF2vJpy9SinEmSviFSe0GyPpCQ4L5QSkLAgeLXlTAOu2ZwWUU5m+0SBl6gUU1R1ZQB3aKypfA==", "license": "MIT", "engines": { "bun": ">=1.0.0", @@ -3929,35 +3960,36 @@ "license": "MIT" }, "node_modules/mysql2": { - "version": "3.15.3", - "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.15.3.tgz", - "integrity": "sha512-FBrGau0IXmuqg4haEZRBfHNWB5mUARw6hNwPDXXGg0XzVJ50mr/9hb267lvpVMnhZ1FON3qNd4Xfcez1rbFwSg==", + "version": "3.24.4", + "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.24.4.tgz", + "integrity": "sha512-A2olluVlj0mvgyIRRISMEzXc51m+21mRtcMVjJyIpt2GG98+XrC9m9HzsqcMsX2LcnfccJvY5NB22g8fENBnOA==", "license": "MIT", "dependencies": { - "aws-ssl-profiles": "^1.1.1", - "denque": "^2.1.0", + "aws-ssl-profiles": "^1.1.2", "generate-function": "^2.3.1", - "iconv-lite": "^0.7.0", - "long": "^5.2.1", - "lru.min": "^1.0.0", - "named-placeholders": "^1.1.3", - "seq-queue": "^0.0.5", - "sqlstring": "^2.3.2" + "iconv-lite": "^0.7.3", + "long": "^5.3.2", + "lru.min": "^1.1.4", + "named-placeholders": "^1.1.6", + "sql-escaper": "^1.5.1" }, "engines": { "node": ">= 8.0" + }, + "peerDependencies": { + "@types/node": ">= 8" } }, "node_modules/named-placeholders": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.3.tgz", - "integrity": "sha512-eLoBxg6wE/rZkJPhU/xRX1WTpkFEwDJEN96oxFrTsqBdbT5ec295Q+CoHrL9IT0DipqKhmGcaZmwOt8OON5x1w==", + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.6.tgz", + "integrity": "sha512-Tz09sEL2EEuv5fFowm419c1+a/jSMiBjI9gHxVLrVdbUkkNUUfjsVYs9pVZu5oCon/kmRh9TfLEObFtkVxmY0w==", "license": "MIT", "dependencies": { - "lru-cache": "^7.14.1" + "lru.min": "^1.1.0" }, "engines": { - "node": ">=12.0.0" + "node": ">=8.0.0" } }, "node_modules/natural-compare": { @@ -3982,10 +4014,14 @@ "dev": true }, "node_modules/node-releases": { - "version": "2.0.37", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.37.tgz", - "integrity": "sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg==", - "dev": true + "version": "2.0.54", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.54.tgz", + "integrity": "sha512-YHs7BmmcsdAI5Ozuf8JZo6PT0mv2GIWC9vMfvUC3dp65M8hn7Ux8CPL+2oBI7juNuj9d0ndhTcznq2ODBps9cQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } }, "node_modules/normalize-path": { "version": "3.0.0", @@ -4370,11 +4406,13 @@ ] }, "node_modules/qs": { - "version": "6.15.1", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz", - "integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==", + "version": "6.16.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.16.0.tgz", + "integrity": "sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==", + "license": "BSD-3-Clause", "dependencies": { - "side-channel": "^1.1.0" + "es-define-property": "^1.0.1", + "side-channel": "^1.1.1" }, "engines": { "node": ">=0.6" @@ -4604,11 +4642,6 @@ "node": ">= 18" } }, - "node_modules/seq-queue": { - "version": "0.0.5", - "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz", - "integrity": "sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q==" - }, "node_modules/serve-static": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.0.tgz", @@ -4652,14 +4685,14 @@ } }, "node_modules/side-channel": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", - "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz", + "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==", "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3", - "side-channel-list": "^1.0.0", + "object-inspect": "^1.13.4", + "side-channel-list": "^1.0.1", "side-channel-map": "^1.0.1", "side-channel-weakmap": "^1.0.2" }, @@ -4671,13 +4704,13 @@ } }, "node_modules/side-channel-list": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", - "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz", + "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==", "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3" + "object-inspect": "^1.13.4" }, "engines": { "node": ">= 0.4" @@ -4769,13 +4802,19 @@ "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", "dev": true }, - "node_modules/sqlstring": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz", - "integrity": "sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==", + "node_modules/sql-escaper": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/sql-escaper/-/sql-escaper-1.5.1.tgz", + "integrity": "sha512-4toX5E1fQbBrpfXidaHnF0669nkAdETeIPTs2SUjxxD7RRIs9ICG4gtpmfc68JCEKehsdwLFqBu9VlQqZ1P1gg==", "license": "MIT", "engines": { - "node": ">= 0.6" + "bun": ">=1.0.0", + "deno": ">=2.0.0", + "node": ">=12.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/mysqljs/sql-escaper?sponsor=1" } }, "node_modules/stack-utils": { @@ -4982,24 +5021,40 @@ } }, "node_modules/type-is": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz", - "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.1.0.tgz", + "integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==", "license": "MIT", "dependencies": { - "content-type": "^1.0.5", + "content-type": "^2.0.0", "media-typer": "^1.1.0", "mime-types": "^3.0.0" }, "engines": { - "node": ">= 0.6" + "node": ">= 18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/type-is/node_modules/content-type": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz", + "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/undici-types": { "version": "7.19.2", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz", - "integrity": "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==", - "dev": true + "integrity": "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==" }, "node_modules/unpipe": { "version": "1.0.0", @@ -5011,9 +5066,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz", - "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.2.tgz", + "integrity": "sha512-UQ+MSxlhRm1bzjhU+DcuXfjFO1FzNtqhK5+9Yvlp90ItDLk5vT932A0rFu619nf7RVS+Y/VeaUW1jaRDqZ8VJw==", "dev": true, "funding": [ { @@ -5029,6 +5084,7 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" @@ -5142,9 +5198,9 @@ } }, "node_modules/ws": { - "version": "8.18.3", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz", - "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==", + "version": "8.21.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz", + "integrity": "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==", "license": "MIT", "engines": { "node": ">=10.0.0" @@ -5175,7 +5231,8 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", - "dev": true + "dev": true, + "license": "ISC" }, "node_modules/yargs": { "version": "17.7.2", -- 2.47.3