+
+
+
- MY APP
+ MY APP
LotusGuild Infrastructure
-
+
+
+
+ Offline
+
+
+
+
+
+
+
+
operator
@@ -83,6 +167,93 @@
Ticket Queue
-
+
+
| @@ -250,14 +473,14 @@ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| - | #123456789 | -P1 Critical | -Storage array link-down on compute-storage-01 | -Open | -Unassigned | -5m ago | -+ | + | #123456789 | +P1 Critical | +Storage array link-down on compute-storage-01 | +Open | +Unassigned | +5m ago | +
View
@@ -267,14 +490,14 @@
- | #987654321 |
- P2 High |
- Switch port flapping on USW-Pro-24 |
- In Progress |
- operator |
- 2h ago |
-
+ |
+ | #987654321 |
+ P2 High |
+ Switch port flapping on USW-Pro-24 |
+ In Progress |
+ operator |
+ 2h ago |
+
@@ -283,14 +506,14 @@
|
- | #111222333 |
- P3 Med |
- Scheduled maintenance: replace SFP+ on large1 |
- Pending |
- admin |
- 1d ago |
-
+ |
+ | #111222333 |
+ P3 Med |
+ Scheduled maintenance: replace SFP+ on large1 |
+ Pending |
+ admin |
+ 1d ago |
+
@@ -299,14 +522,14 @@
|
- | #444555666 |
- P4 Low |
- Update SSL cert on wiki.lotusguild.org |
- Closed |
- operator |
- 3d ago |
-
+ |
+ | #444555666 |
+ P4 Low |
+ Update SSL cert on wiki.lotusguild.org |
+ Closed |
+ operator |
+ 3d ago |
+
@@ -331,7 +554,7 @@
╚
╝
| Open
-
+
@@ -359,7 +582,7 @@
╚
╝
Pending
-
+
P2
@@ -376,7 +599,7 @@
╚
╝
In Progress
-
+
P2
@@ -393,7 +616,7 @@
╚
╝
Closed
-
+
+
+
+
@@ -697,20 +1691,267 @@
-->
-
+
-
+
- -->
+ // Command palette demo commands
+ lt.cmdPalette.init([
+ {
+ group: 'Navigation',
+ items: [
+ { icon: '⌂', label: 'Dashboard', kbd: 'G D', action: () => lt.toast.info('→ Dashboard') },
+ { icon: '⊞', label: 'All Tickets', kbd: 'G T', action: () => lt.toast.info('→ Tickets') },
+ { icon: '★', label: 'Saved Filters', action: () => lt.toast.info('→ Filters') },
+ ]
+ },
+ {
+ group: 'Actions',
+ items: [
+ { icon: '+', label: 'New Ticket', kbd: 'N', action: () => lt.toast.success('New ticket form') },
+ { icon: '⤓', label: 'Export CSV', action: () => lt.modal.open('export-modal') },
+ { icon: '⟳', label: 'Refresh Data', kbd: 'R', action: () => lt.toast.info('Refreshing...') },
+ ]
+ },
+ {
+ group: 'Help',
+ items: [
+ { icon: '?', label: 'Keyboard Shortcuts', kbd: '?', action: () => lt.modal.open('lt-keys-help') },
+ ]
+ },
+ ]);
+
+ // Range slider live value display
+ document.querySelectorAll('input[type="range"].lt-range').forEach(r => {
+ const wrap = r.closest('.lt-range-wrap');
+ const label = wrap && wrap.querySelector('.lt-range-value');
+ if (label) {
+ label.textContent = r.value;
+ r.addEventListener('input', () => { label.textContent = r.value; });
+ }
+ });
+
+ // Animate the demo progress bars on load
+ document.querySelectorAll('.lt-progress-bar[data-width]').forEach(bar => {
+ requestAnimationFrame(() => { bar.style.width = bar.dataset.width; });
+ });
+
+ // Theme toggle button
+ document.getElementById('lt-theme-btn').addEventListener('click', () => lt.theme.toggle());
+
+ // Context menu: register demo menu items
+ lt.contextMenu.register('demo-ctx', [
+ { icon: '📋', label: 'Copy ID', kbd: 'C', action: () => lt.toast.info('ID copied') },
+ { icon: '👁', label: 'View Details', action: () => lt.rightDrawer.open('lt-detail-drawer') },
+ { icon: '✏️', label: 'Edit Ticket', kbd: 'E', action: () => lt.toast.info('Edit…') },
+ { divider: true },
+ { icon: '🗑', label: 'Delete', danger: true, action: () => lt.toast.error('Deleted') },
+ ]);
+ // Programmatic context menu button
+ const demoCtxBtn = document.getElementById('demo-ctx-btn');
+ if (demoCtxBtn) demoCtxBtn.addEventListener('click', e => {
+ const r = demoCtxBtn.getBoundingClientRect();
+ lt.contextMenu.show(r.left, r.bottom + 4, [
+ { icon: '📋', label: 'Copy ID', action: () => lt.toast.info('Copied') },
+ { icon: '✏️', label: 'Edit', action: () => lt.toast.info('Edit') },
+ { divider: true },
+ { icon: '🗑', label: 'Delete', danger: true, action: () => lt.toast.error('Deleted') },
+ ]);
+ });
+
+ // Combobox demo
+ lt.combobox.init(
+ document.getElementById('demo-combobox-input'),
+ [
+ { value: 'worker-01', label: 'worker-01', icon: '🖥' },
+ { value: 'worker-02', label: 'worker-02', icon: '🖥' },
+ { value: 'worker-03', label: 'worker-03', icon: '🖥' },
+ { value: 'gpu-01', label: 'gpu-01', icon: '⚡' },
+ { value: 'gpu-02', label: 'gpu-02', icon: '⚡' },
+ { value: 'storage-01',label: 'storage-01',icon: '💾' },
+ ],
+ { onChange: vals => console.log('[combobox]', vals) }
+ );
+
+ // Typeahead demo
+ lt.typeahead.init(
+ document.getElementById('demo-typeahead-input'),
+ [
+ { value: '001', label: 'Link-down on compute-storage-01', icon: '🔴', meta: 'P1' },
+ { value: '002', label: 'Switch port flapping USW-Pro-24', icon: '🟠', meta: 'P2' },
+ { value: '003', label: 'Scheduled SFP+ replacement large1',icon: '🔵', meta: 'P3' },
+ { value: '004', label: 'SSL cert renewal wiki.lotusguild.org', icon: '🟢', meta: 'P4' },
+ { value: '005', label: 'RAID controller firmware update', icon: '🔴', meta: 'P1' },
+ ],
+ { onSelect: item => lt.toast.info(`Selected: ${item.label}`) }
+ );
+
+ // Split pane demo
+ lt.splitPane.init(document.getElementById('demo-split'), { initial: 0.4, minA: 100, minB: 100 });
+
+ // Demo notification badge initial count
+ lt.notif.set('#lt-notif-bell', 3);
+
+ // Wizard demo
+ lt.wizard.init(document.getElementById('demo-wizard'), {
+ onComplete: data => lt.toast.success('Ticket submitted: ' + (data.title || 'untitled')),
+ validate: (step, data) => {
+ if (step === 1 && !data.title?.trim()) { lt.toast.error('Title is required'); return false; }
+ return true;
+ },
+ });
+
+ // Sortable demo
+ const sortableList = lt.sortable.init(document.getElementById('demo-sortable'), {
+ onSort: (items) => {
+ document.getElementById('demo-sort-order').textContent = 'Order: ' + items.map(el => el.dataset.id).join(', ');
+ },
+ });
+
+ // Kanban drag-and-drop — all four columns share group "kanban"
+ ['kanban-col-open','kanban-col-pending','kanban-col-inprogress','kanban-col-closed'].forEach(id => {
+ const col = document.getElementById(id);
+ if (col) lt.sortable.init(col, { group: 'kanban', onSort: () => {} });
+ });
+
+ // Pagination demo (50 items, 10 per page)
+ lt.pagination.init('#demo-pagination', {
+ total: 50, perPage: 10, page: 2,
+ onChange: p => lt.toast.info('Page ' + p),
+ });
+
+ // Countdown demo — SLA expires 2 hours from now
+ const slaTarget = new Date(Date.now() + 2 * 60 * 60 * 1000);
+ lt.timer.countdown(document.getElementById('demo-countdown'), slaTarget, {
+ urgent: 300,
+ urgentClass: 'lt-text-red lt-countdown-urgent',
+ onExpire: () => lt.toast.error('SLA BREACHED'),
+ });
+
+ // Stopwatch demo
+ const sw = lt.timer.stopwatch(document.getElementById('demo-stopwatch'));
+ let swRunning = true;
+ document.getElementById('sw-pause').addEventListener('click', function() {
+ if (swRunning) { sw.pause(); this.textContent = 'Resume'; } else { sw.resume(); this.textContent = 'Pause'; }
+ swRunning = !swRunning;
+ });
+ document.getElementById('sw-reset').addEventListener('click', () => { sw.reset(); swRunning = true; document.getElementById('sw-pause').textContent = 'Pause'; });
+
+ // Lightbox demo
+ lt.lightbox.init('.lt-lightbox-demo');
+
+ // Markdown demo
+ lt.markdown.init('#demo-markdown');
+
+ // Sidebar submenus (re-init for demo sidebar)
+ lt.sidebarSubmenus.init(document.querySelector('.lt-section-body'));
+
+ // ----- Notification bell dropdown -----
+ (function() {
+ const btn = document.getElementById('lt-notif-bell-btn');
+ const panel = document.getElementById('lt-notif-panel');
+ if (!btn || !panel) return;
+
+ function open() {
+ panel.setAttribute('aria-hidden', 'false');
+ btn.setAttribute('aria-expanded', 'true');
+ // Mark all as read visually
+ }
+ function close() {
+ panel.setAttribute('aria-hidden', 'true');
+ btn.setAttribute('aria-expanded', 'false');
+ }
+
+ btn.addEventListener('click', e => {
+ e.stopPropagation();
+ panel.getAttribute('aria-hidden') === 'false' ? close() : open();
+ });
+
+ // "Mark all read" button
+ const clearBtn = document.getElementById('lt-notif-clear-all');
+ if (clearBtn) clearBtn.addEventListener('click', () => {
+ panel.querySelectorAll('.lt-notif-item--unread').forEach(el => el.classList.remove('lt-notif-item--unread'));
+ panel.querySelectorAll('.lt-notif-dot').forEach(el => { el.classList.remove('lt-notif-dot'); el.classList.add('lt-notif-dot', 'lt-notif-dot--read'); });
+ lt.notif.clear('#lt-notif-bell');
+ lt.toast.info('All notifications marked as read');
+ });
+
+ // Individual item click
+ panel.querySelectorAll('.lt-notif-item').forEach(item => {
+ item.addEventListener('click', () => {
+ item.classList.remove('lt-notif-item--unread');
+ const dot = item.querySelector('.lt-notif-dot');
+ if (dot) { dot.classList.add('lt-notif-dot--read'); }
+ close();
+ });
+ });
+
+ // Close on outside click
+ document.addEventListener('click', e => {
+ if (!document.getElementById('lt-notif-bell').contains(e.target)) close();
+ });
+
+ // Esc close
+ document.addEventListener('keydown', e => { if (e.key === 'Escape') close(); });
+ }());
+
+ // ----- Generic dropdown toggle (Advanced filter + Bulk Actions) -----
+ document.querySelectorAll('.lt-dropdown-trigger').forEach(btn => {
+ const wrap = btn.closest('.lt-dropdown-wrap');
+ const panel = wrap && wrap.querySelector('.lt-dropdown-panel');
+ if (!panel) return;
+
+ btn.addEventListener('click', e => {
+ e.stopPropagation();
+ const isOpen = panel.getAttribute('aria-hidden') === 'false';
+ // Close all other dropdowns first
+ document.querySelectorAll('.lt-dropdown-panel[aria-hidden="false"]').forEach(p => {
+ p.setAttribute('aria-hidden', 'true');
+ const t = p.closest('.lt-dropdown-wrap').querySelector('.lt-dropdown-trigger');
+ if (t) t.setAttribute('aria-expanded', 'false');
+ });
+ if (!isOpen) {
+ panel.setAttribute('aria-hidden', 'false');
+ btn.setAttribute('aria-expanded', 'true');
+ }
+ });
+ });
+
+ // Close dropdowns on outside click / Esc
+ document.addEventListener('click', () => {
+ document.querySelectorAll('.lt-dropdown-panel[aria-hidden="false"]').forEach(p => {
+ p.setAttribute('aria-hidden', 'true');
+ const t = p.closest('.lt-dropdown-wrap').querySelector('.lt-dropdown-trigger');
+ if (t) t.setAttribute('aria-expanded', 'false');
+ });
+ });
+
+ // Tab bar switching
+ document.querySelectorAll('.lt-tab-bar').forEach(bar => {
+ bar.addEventListener('click', e => {
+ const tab = e.target.closest('.lt-tab');
+ if (!tab) return;
+ const targetId = tab.dataset.tabTarget;
+ if (!targetId) return;
+ const panels = bar.nextElementSibling;
+ bar.querySelectorAll('.lt-tab').forEach(t => { t.classList.remove('active'); t.setAttribute('aria-selected', 'false'); });
+ tab.classList.add('active');
+ tab.setAttribute('aria-selected', 'true');
+ if (panels) {
+ panels.querySelectorAll('.lt-tab-panel').forEach(p => p.classList.remove('active'));
+ const target = panels.querySelector('#' + targetId);
+ if (target) target.classList.add('active');
+ }
+ });
+ });
+ });
+
P4
@@ -598,6 +821,757 @@
+
+
+
+
+
+
+
+
+
+
+ Progress Bars
+
+
+
+
+
+
+
+
+ CPU LOAD72%
+
+
+
+ MEMORY45%
+
+
+
+ DISK I/O89%
+
+
+
+ UPTIME100%
+
+ Breadcrumbs / Pagination
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+ Node running at 72% CPU. 12 active processes. Last restart: 3d ago.
+
+
+ eth0: 10.0.0.7 — MTU 1500 — RX 4.2 GB — TX 1.1 GB
+
+
+ 22/tcp ALLOW — 80/tcp ALLOW — 443/tcp ALLOW — */* DENY Alert Banners
+
+
+
+
+
+
+
+ Information Scheduled maintenance window: Sunday 02:00–04:00 UTC.
+
+
+ Warning Disk usage on NODE-03 at 87%. Consider cleanup.
+
+
+ Critical NODE-11 unreachable. Last seen 14m ago.
+
+
+ Success Deployment v2.4.1 completed successfully. Toggles / Range / Tags
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Refresh Interval (s)
+ 30
+
+
+ Code Block
+
+
+
+
+
+
+
+ bash
+
+
+ Data Grid / Stepper
+
+
+
+
+
+
+
+
+ Hostname node-07.prod
+ IP Address 10.0.0.7
+ Status ONLINE
+ Uptime 3d 14h 22m
+ Load Avg 2.14 / 1.87 / 1.60
+ Region US-EAST-1
+
+
+
+
+
+
+ ✓
+ INIT
+
+
+ ✓
+ BUILD
+
+
+ 3
+ DEPLOY
+
+
+ 4
+ VERIFY
+ List Group / Badges
+
+
+
+
+
+
+
+
+
+
+
+ 3
+
+
+
+ 12
+
+
+
+ 5
+
+
+
+
+
+
+
+ Tab Bar
+
+
+
+
+
+
+
+ System overview: all nodes nominal. 14 active sessions.
+
+
+ [03:41:22] nginx: 200 GET /api/nodes (12ms) +[03:41:23] cron: heartbeat OK +[03:41:24] alert: disk 87% on node-03+ CPU avg: 34% — Mem avg: 61% — Net TX: 4.2 Mbps
+ Config last updated: 2026-03-20 by admin@lotusguild.io
+ Tooltips / Divider
+
+
+
+
+
+ ORANGE
+ CYAN (bottom)
+ GREEN
+ RED
+
+ SECTION BREAK
+ CRITICAL ZONE
+ File Dropzone
+
+
+
+
+
+
+
+
+
+ Drop files here or click to browse
+ Accepts .json, .csv, .log — max 10 MB each
+ Command Palette
+
+
+
+ + Press Ctrl+K or click the button below to open the command palette. + + +
+
+
+
+
+ // THEME TOGGLE
+
+
+
+ Dark/light mode with OS preference detection and localStorage persistence. +
+
+
+
+
+ lt.theme.toggle() | .set('light') | .get()
+
+
+
+
+
+ // SKELETON LOADERS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ // EMPTY STATES
+
+
+
+
+
+ No Tickets Found No tickets match your current filters. No Workers Online All workers are offline or unreachable. No Results Try a different search term.
+
+
+
+
+ // AVATARS & NOTIFICATION BADGES
+
+
+
+
+ AB
+ CD
+ EF
+ GH
+
+ JD
+ SK
+ MR
+
+ AA
+ BB
+ CC
+ +4
+
+
+
+
+
+
+
+
+
+
+
+
+ // TIMELINE / ACTIVITY FEED
+
+
+
+
+
+
+
+
+
+
+ CRITICAL: Storage array link-down on
+ compute-storage-01. Ticket auto-created.
+
+
+ Escalated to P1 Critical. Paged on-call team.
+
+
+
+ Confirmed NIC failure. Ordered replacement hardware. ETA 2h.
+
+
+
+ Hardware replaced. Link restored. Monitoring for 30 min.
+
+
+ Resolution Time 2h 33m Events 4 SLA Status Within SLA
+
+
+
+
+ // RIGHT-SIDE DRAWER
+
+
+
+ Detail/inspect panel from the right. Focus trap, ESC close, overlay backdrop, return-focus. +
+
+
+ lt.rightDrawer.open('id') | .close() | .toggle()
+
+
+
+
+
+ // CONTEXT MENU
+
+
+
+ Right-click any element with
+
+
+ Right-click this card ›
+
+
+
+
+
+
+
+ // COMBOBOX & TYPEAHEAD
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ // STICKY TABLE HEADERS
+
+
+
+
+
+
+
+
+
+
+ // CHART CONTAINERS
+
+
+
+
+
+
+
+
+ Ticket Volume (7d)
+
+
+ Open
+ Closed
+
+ [ Plug in Chart.js / D3 here ]
+ MonTueWedThuFriSatSun
+
+
+ Worker Uptime
+
+
+
+
+
+
+ // SPLIT PANE
+
+
+
+
+
+
+
+
+ Panel A
+ Drag the divider to resize. Stacks vertically on mobile. +
+
+ Panel B
+ Both panels maintain independent scrolling. +
+
+
+
+
+
+ // WEBSOCKET & OFFLINE DETECTION
+
+
+
+
+
+ Connected
+ Connecting…
+ Disconnected
+
+
+
+
+ Offline banner + body class auto-applied on
+
+
+
+
+ // WIZARD / MULTI-STEP FORM
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ Details
+
+
+ 2
+ Assign
+
+
+ 3
+ Review
+ Step 1 of 3 + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ // DRAG-TO-REORDER (SORTABLE)
+
+
+
+
+
+
+
+ Drag items to reorder. Uses native HTML5 drag API with pointer-events fallback. +
Order: p1, p2, p3, p4 +
+
+ API: +const s = lt.sortable.init(listEl, {
+ onSort: (items) => console.log(s.getOrder())
+});
+
+
+
+
+
+ // COUNTDOWN & TIMER
+
+
+
+
+
+
+
+ SLA Countdown
+ --:--:--
+ Goes urgent (red) at <5 min
+
+
+ Stopwatch
+ 00:00:00
+
+
+
+
+
+
+ API
+ lt.timer.countdown(el, date, {
+ urgent: 300,
+ onExpire: () => {}
+});
+lt.timer.stopwatch(el);
+
+
+
+
+
+ // IMAGE LIGHTBOX
+
+
+
+ Click any image to open full-screen viewer. Keyboard: ←/→ navigate, Esc closes. +
+
+
+
+
+
+
+ // SIDEBAR SUBMENUS
+
+
+
+
+ ⊞ Dashboard
+ 🎫 Tickets
+
+
+
+
+
+
@@ -675,6 +1649,26 @@
+ // MARKDOWN RENDERER
+
+
+
+
+
+
+
+ Source
+ # Incident Report +**Severity**: P1 Critical + +## Summary +Storage array link-down on `compute-storage-01`. + +- Affected: 3 production services +- Duration: 2h 33m +- Root cause: NIC hardware failure + +> Resolved. Monitoring continues. + +[View Ticket](#001)+
+
+ Rendered
+
+ Built-in micro-renderer (no deps). Drops in |