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 0000000..75ed13f Binary files /dev/null and b/public/assets/favicon.png differ diff --git a/public/assets/pages/dashboard.js b/public/assets/pages/dashboard.js new file mode 100644 index 0000000..c345c7f --- /dev/null +++ b/public/assets/pages/dashboard.js @@ -0,0 +1,212 @@ +/* ===================================================================== + PULSE — Dashboard page (WP-C) + Owns DOM id prefix `dash-` and action namespace `dash:*`. + ===================================================================== */ +'use strict'; + +(function () { + const esc = Pulse.esc; + const fmt = Pulse.fmt; + + let _executions = []; + let _workers = []; + + 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 isAutomated(exec) { + const by = String((exec && exec.started_by) || ''); + return by.indexOf('gandalf:') === 0 || by.indexOf('scheduler:') === 0; + } + + /* ------------------------------------------------------------------- + Stats + ------------------------------------------------------------------- */ + function renderStats(workers, runningTotal) { + const total = workers.length; + const online = workers.filter(w => 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 %>
+ <% } %> +