botui/ui/suite/index.html

1391 lines
No EOL
81 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chat - General Bots</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="General Bots - AI-powered workspace" />
<meta name="theme-color" content="#d4f505" />
<!-- Critical CSS - minimal styles for shell/layout (loaded sync) -->
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/theme-sentient.css" />
<!-- Non-critical CSS - loaded async for faster initial paint -->
<link rel="stylesheet" href="css/components.css" media="print" onload="this.media='all'" />
<link rel="stylesheet" href="css/partials.css" media="print" onload="this.media='all'" />
<link rel="stylesheet" href="css/apps-extended.css" media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="css/components.css" />
<link rel="stylesheet" href="css/partials.css" />
<link rel="stylesheet" href="css/apps-extended.css" />
</noscript>
<!-- App-specific CSS loaded lazily by each view via CSSLoader -->
<!-- Local Libraries (no external CDN dependencies) -->
<script src="js/vendor/htmx.min.js"></script>
<script src="js/vendor/htmx-ws.js"></script>
<script src="js/vendor/htmx-json-enc.js"></script>
<script src="js/vendor/marked.min.js"></script>
<!-- SECURITY BOOTSTRAP - MUST load immediately after HTMX -->
<!-- This provides centralized auth for ALL apps: HTMX, fetch, XHR -->
<script src="js/security-bootstrap.js?v=20260110"></script>
<!-- i18n -->
<script src="js/i18n.js"></script>
<!-- CSS Lazy Loader - enables per-screen CSS loading -->
<script src="js/css-loader.js"></script>
<!-- Enable HTMX to process inline scripts in swapped content -->
<script>
htmx.config.allowEval = true;
htmx.config.includeIndicatorStyles = false;
htmx.config.timeout = 300000; // 5 minutes for long-running LLM operations
// Global error handler to catch HTMX DOM manipulation errors
window.addEventListener("error", function (event) {
// Catch insertBefore errors from HTMX swap operations
if (
event.message &&
event.message.includes("insertBefore") &&
event.message.includes("null")
) {
console.warn(
"HTMX DOM error caught and suppressed:",
event.message,
);
event.preventDefault();
return true;
}
});
// Handle unhandled promise rejections from HTMX
window.addEventListener("unhandledrejection", function (event) {
if (
event.reason &&
event.reason.message &&
event.reason.message.includes("insertBefore")
) {
console.warn(
"HTMX promise rejection caught:",
event.reason.message,
);
event.preventDefault();
}
});
</script>
</head>
<body data-theme="sentient">
<!-- Loading overlay -->
<div class="loading-overlay" id="loadingOverlay">
<div class="loading-spinner"></div>
</div>
<!-- Floating header -->
<header class="float-header" role="banner">
<!-- Left: Logo + App Tabs -->
<div class="header-left">
<button class="logo-wrapper" hx-get="/suite/home.html" hx-target="#main-content" hx-push-url="/#home"
title="General Bots" aria-label="General Bots - Home">
<svg class="logo-icon" width="32" height="20" viewBox="0 0 140 80" fill="none" stroke="currentColor"
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<!-- Left antenna -->
<line x1="5" y1="40" x2="25" y2="40" />
<line x1="25" y1="28" x2="25" y2="52" />
<!-- Left gear (outer) -->
<circle cx="50" cy="40" r="16" />
<!-- Left gear (inner) -->
<circle cx="50" cy="40" r="6" />
<!-- Left gear teeth -->
<line x1="50" y1="20" x2="50" y2="26" />
<line x1="50" y1="54" x2="50" y2="60" />
<line x1="30" y1="40" x2="36" y2="40" />
<line x1="64" y1="40" x2="70" y2="40" />
<line x1="38" y1="28" x2="42" y2="32" />
<line x1="58" y1="48" x2="62" y2="52" />
<line x1="38" y1="52" x2="42" y2="48" />
<line x1="58" y1="32" x2="62" y2="28" />
<!-- Right gear (outer) -->
<circle cx="90" cy="40" r="16" />
<!-- Right gear (inner) -->
<circle cx="90" cy="40" r="6" />
<!-- Right gear teeth -->
<line x1="90" y1="20" x2="90" y2="26" />
<line x1="90" y1="54" x2="90" y2="60" />
<line x1="70" y1="40" x2="76" y2="40" />
<line x1="104" y1="40" x2="110" y2="40" />
<line x1="78" y1="28" x2="82" y2="32" />
<line x1="98" y1="48" x2="102" y2="52" />
<line x1="78" y1="52" x2="82" y2="48" />
<line x1="98" y1="32" x2="102" y2="28" />
<!-- Right antenna -->
<line x1="115" y1="40" x2="135" y2="40" />
<line x1="115" y1="28" x2="115" y2="52" />
</svg>
</button>
<!-- Main App Tabs -->
<nav class="header-app-tabs">
<!-- SECTION:chat -->
<a class="app-tab active" href="#chat" data-section="chat" hx-get="/suite/chat/chat.html"
hx-target="#main-content" hx-push-url="/#chat">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
</svg>
<span data-i18n="nav-chat">Chat</span>
</a>
<!-- ENDSECTION:chat -->
<!-- SECTION:mail -->
<a class="app-tab" href="#mail" data-section="mail" hx-get="/suite/mail/mail.html"
hx-target="#main-content" hx-push-url="/#mail">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
<polyline points="22,6 12,13 2,6" />
</svg>
<span data-i18n="nav-mail">E-mail</span>
</a>
<!-- ENDSECTION:mail -->
<!-- SECTION:calendar -->
<a class="app-tab" href="#calendar" data-section="calendar" hx-get="/suite/calendar/calendar.html"
hx-target="#main-content" hx-push-url="/#calendar">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
<line x1="16" y1="2" x2="16" y2="6" />
<line x1="8" y1="2" x2="8" y2="6" />
<line x1="3" y1="10" x2="21" y2="10" />
</svg>
<span data-i18n="nav-calendar">Calendário</span>
</a>
<!-- ENDSECTION:calendar -->
<!-- SECTION:drive -->
<a class="app-tab" href="#drive" data-section="drive" hx-get="/suite/drive/drive.html"
hx-target="#main-content" hx-push-url="/#drive">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
</svg>
<span data-i18n="nav-drive">Arquivos</span>
</a>
<!-- ENDSECTION:drive -->
<!-- SECTION:tasks -->
<a class="app-tab" href="#tasks" data-section="tasks" hx-get="/suite/tasks/tasks.html"
hx-target="#main-content" hx-push-url="/#tasks">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 11l3 3L22 4" />
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
</svg>
<span data-i18n="nav-tasks">Tarefas</span>
</a>
<!-- ENDSECTION:tasks -->
<!-- SECTION:crm -->
<a class="app-tab" href="#crm" data-section="crm" hx-get="/suite/crm/crm.html" hx-target="#main-content"
hx-push-url="/#crm">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
<span data-i18n="nav-crm">CRM</span>
</a>
<!-- ENDSECTION:crm -->
<!-- SECTION:docs -->
<a class="app-tab" href="#docs" data-section="docs" hx-get="/suite/docs/docs.html"
hx-target="#main-content" hx-push-url="/#docs">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
<line x1="16" y1="13" x2="8" y2="13" />
<line x1="16" y1="17" x2="8" y2="17" />
</svg>
<span data-i18n="nav-docs">Docs</span>
</a>
<!-- ENDSECTION:docs -->
<!-- SECTION:sheet -->
<a class="app-tab" href="#sheet" data-section="sheet" hx-get="/suite/sheet/sheet.html"
hx-target="#main-content" hx-push-url="/#sheet">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<line x1="3" y1="9" x2="21" y2="9" />
<line x1="3" y1="15" x2="21" y2="15" />
<line x1="9" y1="3" x2="9" y2="21" />
<line x1="15" y1="3" x2="15" y2="21" />
</svg>
<span data-i18n="nav-sheet">Planilhas</span>
</a>
<!-- ENDSECTION:sheet -->
<!-- SECTION:slides -->
<a class="app-tab" href="#slides" data-section="slides" hx-get="/suite/slides/slides.html"
hx-target="#main-content" hx-push-url="/#slides">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
<line x1="8" y1="21" x2="16" y2="21" />
<line x1="12" y1="17" x2="12" y2="21" />
</svg>
<span data-i18n="nav-slides">Apresentações</span>
</a>
<!-- ENDSECTION:slides -->
<!-- SECTION:social -->
<a class="app-tab" href="#social" data-section="social" hx-get="/suite/social/social.html"
hx-target="#main-content" hx-push-url="/#social">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
<span data-i18n="nav-social">Social</span>
</a>
<!-- ENDSECTION:social -->
</nav>
<!-- Apps menu container (button + dropdown) -->
<div class="apps-menu-container" style="position: relative">
<button class="icon-button apps-button" id="appsButton" title="All Applications"
aria-label="Open applications menu" aria-expanded="false" aria-haspopup="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="5" cy="12" r="2.5"></circle>
<circle cx="12" cy="12" r="2.5"></circle>
<circle cx="19" cy="12" r="2.5"></circle>
</svg>
</button>
<!-- Apps dropdown menu -->
<nav class="apps-dropdown" id="appsDropdown" role="menu" aria-label="Applications">
<div class="apps-dropdown-title" data-i18n="nav-all-apps">
All Applications
</div>
<div class="app-grid" role="group">
<!-- =================================== -->
<!-- DYNAMIC ITEMS (Header Tab Apps) -->
<!-- These hide/show based on screen -->
<!-- =================================== -->
<!-- Chat -->
<!-- SECTION:chat -->
<a class="app-item active" href="#chat" data-section="chat" role="menuitem"
aria-label="Chat application" hx-get="/suite/chat/chat.html" hx-target="#main-content"
hx-push-url="/#chat">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
</svg>
</div>
<span data-i18n="nav-chat">Chat</span>
</a>
<!-- ENDSECTION:chat -->
<!-- Mail -->
<!-- SECTION:mail -->
<a class="app-item" href="#mail" data-section="mail" role="menuitem"
aria-label="Mail application" hx-get="/suite/mail/mail.html" hx-target="#main-content"
hx-push-url="/#mail">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
<polyline points="22,6 12,13 2,6" />
</svg>
</div>
<span data-i18n="nav-mail">E-mail</span>
</a>
<!-- ENDSECTION:mail -->
<!-- Calendar -->
<!-- SECTION:calendar -->
<a class="app-item" href="#calendar" data-section="calendar" role="menuitem"
aria-label="Calendar application" hx-get="/suite/calendar/calendar.html"
hx-target="#main-content" hx-push-url="/#calendar">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
<line x1="16" y1="2" x2="16" y2="6" />
<line x1="8" y1="2" x2="8" y2="6" />
<line x1="3" y1="10" x2="21" y2="10" />
</svg>
</div>
<span data-i18n="nav-calendar">Calendário</span>
</a>
<!-- ENDSECTION:calendar -->
<!-- Drive -->
<!-- SECTION:drive -->
<a class="app-item" href="#drive" data-section="drive" role="menuitem"
aria-label="Drive application" hx-get="/suite/drive/drive.html" hx-target="#main-content"
hx-push-url="/#drive">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path
d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
</svg>
</div>
<span data-i18n="nav-drive">Arquivos</span>
</a>
<!-- ENDSECTION:drive -->
<!-- Tasks -->
<!-- SECTION:tasks -->
<a class="app-item" href="#tasks" data-section="tasks" role="menuitem"
aria-label="Tasks application" hx-get="/suite/tasks/tasks.html" hx-target="#main-content"
hx-push-url="/#tasks">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M9 11l3 3L22 4" />
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
</svg>
</div>
<span data-i18n="nav-tasks">Tarefas</span>
</a>
<!-- ENDSECTION:tasks -->
<!-- Docs -->
<!-- SECTION:docs -->
<a class="app-item" href="#docs" data-section="docs" role="menuitem"
aria-label="Docs - Documents" hx-get="/suite/docs/docs.html" hx-target="#main-content"
hx-push-url="/#docs">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
<line x1="16" y1="13" x2="8" y2="13" />
<line x1="16" y1="17" x2="8" y2="17" />
</svg>
</div>
<span data-i18n="nav-docs">Docs</span>
</a>
<!-- ENDSECTION:docs -->
<!-- Sheet -->
<!-- SECTION:sheet -->
<a class="app-item" href="#sheet" data-section="sheet" role="menuitem"
aria-label="Sheet - Spreadsheets" hx-get="/suite/sheet/sheet.html" hx-target="#main-content"
hx-push-url="/#sheet">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<line x1="3" y1="9" x2="21" y2="9" />
<line x1="3" y1="15" x2="21" y2="15" />
<line x1="9" y1="3" x2="9" y2="21" />
<line x1="15" y1="3" x2="15" y2="21" />
</svg>
</div>
<span data-i18n="nav-sheet">Planilhas</span>
</a>
<!-- ENDSECTION:sheet -->
<!-- Slides -->
<!-- SECTION:slides -->
<a class="app-item" href="#slides" data-section="slides" role="menuitem"
aria-label="Slides - Presentations" hx-get="/suite/slides/slides.html"
hx-target="#main-content" hx-push-url="/#slides">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
<line x1="8" y1="21" x2="16" y2="21" />
<line x1="12" y1="17" x2="12" y2="21" />
</svg>
</div>
<span data-i18n="nav-slides">Apresentações</span>
</a>
<!-- ENDSECTION:slides -->
<!-- Social -->
<!-- SECTION:social -->
<a class="app-item" href="#social" data-section="social" role="menuitem"
aria-label="Social Network" hx-get="/suite/social/social.html" hx-target="#main-content"
hx-push-url="/#social">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
</div>
<span data-i18n="nav-social">Social</span>
</a>
<!-- ENDSECTION:social -->
<!-- =================================== -->
<!-- STATIC ITEMS (Always visible) -->
<!-- =================================== -->
<!-- People (Contacts) - First static item after dynamic -->
<!-- SECTION:people -->
<a class="app-item" href="#people" data-section="people" role="menuitem"
aria-label="People - Contacts" hx-get="/suite/people/people.html" hx-target="#main-content"
hx-push-url="/#people">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
</div>
<span data-i18n="nav-people">People</span>
</a>
<!-- ENDSECTION:people -->
<!-- CRM -->
<!-- SECTION:crm -->
<a class="app-item" href="#crm" data-section="crm" role="menuitem"
aria-label="CRM - Customer Relationship Management" hx-get="/suite/crm/crm.html"
hx-target="#main-content" hx-push-url="/#crm">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
<line x1="19" y1="8" x2="19" y2="14" />
<line x1="22" y1="11" x2="16" y2="11" />
</svg>
</div>
<span data-i18n="nav-crm">CRM</span>
</a>
<!-- ENDSECTION:crm -->
<!-- Billing -->
<!-- SECTION:billing -->
<a class="app-item" href="#billing" data-section="billing" role="menuitem"
aria-label="Billing - Invoices & Payments" hx-get="/suite/billing/billing.html"
hx-target="#main-content" hx-push-url="/#billing">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
<line x1="1" y1="10" x2="23" y2="10" />
</svg>
</div>
<span data-i18n="nav-billing">Billing</span>
</a>
<!-- ENDSECTION:billing -->
<!-- Products -->
<!-- SECTION:products -->
<a class="app-item" href="#products" data-section="products" role="menuitem"
aria-label="Products - Product & Service Catalog" hx-get="/suite/products/products.html"
hx-target="#main-content" hx-push-url="/#products">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
<polyline points="3.27 6.96 12 12.01 20.73 6.96" />
<line x1="12" y1="22.08" x2="12" y2="12" />
</svg>
</div>
<span data-i18n="nav-products">Products</span>
</a>
<!-- ENDSECTION:products -->
<!-- Tickets -->
<!-- SECTION:tickets -->
<a class="app-item" href="#tickets" data-section="tickets" role="menuitem"
aria-label="Tickets - Support Cases" hx-get="/suite/tickets/tickets.html"
hx-target="#main-content" hx-push-url="/#tickets">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
<polyline points="14 2 14 8 20 8" />
<line x1="16" y1="13" x2="8" y2="13" />
<line x1="16" y1="17" x2="8" y2="17" />
</svg>
</div>
<span data-i18n="nav-tickets">Tickets</span>
</a>
<!-- ENDSECTION:tickets -->
<!-- Paper -->
<!-- SECTION:paper -->
<a class="app-item" href="#paper" data-section="paper" role="menuitem" aria-label="Paper"
hx-get="/suite/paper/paper.html" hx-target="#main-content" hx-push-url="/#paper">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
<polyline points="14 2 14 8 20 8" />
<line x1="16" y1="13" x2="8" y2="13" />
<line x1="16" y1="17" x2="8" y2="17" />
<line x1="10" y1="9" x2="8" y2="9" />
</svg>
</div>
<span data-i18n="nav-paper">Paper</span>
</a>
<!-- ENDSECTION:paper -->
<!-- Editor -->
<!-- SECTION:editor -->
<a class="app-item" href="#editor" data-section="editor" role="menuitem"
aria-label="Editor - Code & Text" hx-get="/editor.html" hx-target="#main-content"
hx-push-url="/#editor">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polyline points="16 18 22 12 16 6" />
<polyline points="8 6 2 12 8 18" />
<line x1="12" y1="2" x2="12" y2="22" />
</svg>
</div>
<span data-i18n="nav-editor">Editor</span>
</a>
<!-- ENDSECTION:editor -->
<!-- SECTION:research -->
<a class="app-item" href="#research" data-section="research" role="menuitem"
aria-label="Research application" hx-get="/suite/research/research.html"
hx-target="#main-content" hx-push-url="/#research">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.35-4.35" />
<path d="M11 8v6M8 11h6" />
</svg>
</div>
<span data-i18n="nav-research">Pesquisa</span>
</a>
<!-- ENDSECTION:research -->
<!-- Meet -->
<!-- SECTION:meet -->
<a class="app-item" href="#meet" data-section="meet" role="menuitem"
aria-label="Meet application" hx-get="/suite/meet/meet.html" hx-target="#main-content"
hx-push-url="/#meet">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polygon points="23 7 16 12 23 17 23 7" />
<rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
</svg>
</div>
<span data-i18n="nav-meet">Reuniões</span>
</a>
<!-- ENDSECTION:meet -->
<!-- Analytics -->
<!-- SECTION:analytics -->
<a class="app-item" href="#analytics" data-section="analytics" role="menuitem"
aria-label="Analytics Dashboard" hx-get="/suite/analytics/analytics.html"
hx-target="#main-content" hx-push-url="/#analytics">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<line x1="18" y1="20" x2="18" y2="10" />
<line x1="12" y1="20" x2="12" y2="4" />
<line x1="6" y1="20" x2="6" y2="14" />
</svg>
</div>
<span data-i18n="nav-analytics">Analytics</span>
</a>
<!-- ENDSECTION:analytics -->
<!-- Dashboards -->
<!-- SECTION:dashboards -->
<a class="app-item" href="#dashboards" data-section="dashboards" role="menuitem"
aria-label="Custom Dashboards" hx-get="/suite/dashboards/dashboards.html"
hx-target="#main-content" hx-push-url="/#dashboards">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<rect x="3" y="3" width="7" height="7" rx="1" />
<rect x="14" y="3" width="7" height="7" rx="1" />
<rect x="3" y="14" width="7" height="7" rx="1" />
<rect x="14" y="14" width="7" height="7" rx="1" />
</svg>
</div>
<span data-i18n="nav-dashboards">Dashboards</span>
</a>
<!-- ENDSECTION:dashboards -->
<!-- Monitoring -->
<!-- SECTION:monitoring -->
<a class="app-item" href="#monitoring" data-section="monitoring" role="menuitem"
aria-label="System Monitoring" hx-get="/suite/monitoring/monitoring.html"
hx-target="#main-content" hx-push-url="/#monitoring">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<circle cx="12" cy="12" r="10" />
<circle cx="12" cy="12" r="6" />
<circle cx="12" cy="12" r="2" />
</svg>
</div>
<span data-i18n="nav-monitoring">Monitoring</span>
</a>
<!-- ENDSECTION:monitoring -->
<!-- Sources -->
<!-- SECTION:sources -->
<a class="app-item" href="#sources" data-section="sources" role="menuitem"
aria-label="Data Sources" hx-get="/suite/sources/index.html" hx-target="#main-content"
hx-push-url="/#sources">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<ellipse cx="12" cy="5" rx="9" ry="3" />
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
</svg>
</div>
<span data-i18n="nav-sources">Sources</span>
</a>
<!-- ENDSECTION:sources -->
<!-- Security -->
<!-- SECTION:security -->
<a class="app-item" href="#security" data-section="security" role="menuitem"
aria-label="Security" hx-get="/suite/tools/security.html" hx-target="#main-content"
hx-push-url="/#security">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
<path d="M9 12l2 2 4-4" />
</svg>
</div>
<span data-i18n="nav-security">Security</span>
</a>
<!-- ENDSECTION:security -->
<!-- Designer (.bas Editor) -->
<!-- SECTION:designer -->
<a class="app-item" href="#designer" data-section="designer" role="menuitem"
aria-label="Dialog Designer" hx-get="/designer.html" hx-target="#main-content"
hx-push-url="/#designer">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5z" />
<path d="M2 17l10 5 10-5" />
<path d="M2 12l10 5 10-5" />
</svg>
</div>
<span data-i18n="nav-designer">Designer</span>
</a>
<!-- ENDSECTION:designer -->
<!-- Attendant -->
<!-- SECTION:attendant -->
<a class="app-item" href="#attendant" data-section="attendant" role="menuitem"
aria-label="Attendant" hx-get="/suite/attendant/index.html" hx-target="#main-content"
hx-push-url="/#attendant">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
<path d="M12 2v2" />
</svg>
</div>
<span data-i18n="nav-attendant">Attendant</span>
</a>
<!-- ENDSECTION:attendant -->
<!-- Project -->
<!-- SECTION:project -->
<a class="app-item" href="#project" data-section="project" role="menuitem"
aria-label="Project Management" hx-get="/suite/project/project.html"
hx-target="#main-content" hx-push-url="/#project">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<path d="M3 9h18" />
<path d="M9 21V9" />
</svg>
</div>
<span data-i18n="nav-project">Project</span>
</a>
<!-- ENDSECTION:project -->
<!-- Canvas -->
<!-- SECTION:canvas -->
<a class="app-item" href="#canvas" data-section="canvas" role="menuitem"
aria-label="Canvas Whiteboard" hx-get="/suite/canvas/canvas.html" hx-target="#main-content"
hx-push-url="/#canvas">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" />
<path d="M8 12h8" />
<path d="M12 8v8" />
</svg>
</div>
<span data-i18n="nav-canvas">Canvas</span>
</a>
<!-- ENDSECTION:canvas -->
<!-- Goals -->
<!-- SECTION:goals -->
<a class="app-item" href="#goals" data-section="goals" role="menuitem" aria-label="Goals & OKRs"
hx-get="/suite/goals/goals.html" hx-target="#main-content" hx-push-url="/#goals">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<circle cx="12" cy="12" r="10" />
<circle cx="12" cy="12" r="6" />
<circle cx="12" cy="12" r="2" />
</svg>
</div>
<span data-i18n="nav-goals">Goals</span>
</a>
<!-- ENDSECTION:goals -->
<!-- Player -->
<!-- SECTION:player -->
<a class="app-item" href="#player" data-section="player" role="menuitem"
aria-label="Media Player" hx-get="/suite/player/player.html" hx-target="#main-content"
hx-push-url="/#player">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
</div>
<span data-i18n="nav-player">Player</span>
</a>
<!-- ENDSECTION:player -->
<!-- Workspace -->
<!-- SECTION:workspace -->
<a class="app-item" href="#workspace" data-section="workspace" role="menuitem"
aria-label="Workspace" hx-get="/suite/workspace/workspace.html" hx-target="#main-content"
hx-push-url="/#workspace">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
</svg>
</div>
<span data-i18n="nav-workspace">Workspace</span>
</a>
<!-- ENDSECTION:workspace -->
<!-- Video -->
<!-- SECTION:video -->
<a class="app-item" href="#video" data-section="video" role="menuitem" aria-label="Video"
hx-get="/suite/video/video.html" hx-target="#main-content" hx-push-url="/#video">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18" />
<line x1="7" y1="2" x2="7" y2="22" />
<line x1="17" y1="2" x2="17" y2="22" />
<line x1="2" y1="12" x2="22" y2="12" />
</svg>
</div>
<span data-i18n="nav-video">Video</span>
</a>
<!-- ENDSECTION:video -->
<!-- Learn -->
<!-- SECTION:learn -->
<a class="app-item" href="#learn" data-section="learn" role="menuitem" aria-label="Learn"
hx-get="/suite/learn/learn.html" hx-target="#main-content" hx-push-url="/#learn">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
</svg>
</div>
<span data-i18n="nav-learn">Learn</span>
</a>
<!-- ENDSECTION:learn -->
<!-- Settings (last) -->
<!-- SECTION:settings -->
<a class="app-item" href="#settings" data-section="settings" role="menuitem"
aria-label="Settings" hx-get="/suite/settings/index.html" hx-target="#main-content"
hx-push-url="/#settings">
<div class="app-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<circle cx="12" cy="12" r="3" />
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
</div>
<span data-i18n="nav-settings">Settings</span>
</a>
<!-- ENDSECTION:settings -->
</div>
</nav>
</div>
</div>
<!-- Center: Omnibox (Search + Chat) -->
<div class="header-center">
<div class="omnibox" id="omnibox">
<div class="omnibox-input-area">
<svg class="omnibox-icon search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.35-4.35" />
</svg>
<svg class="omnibox-icon bot-icon" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" style="display: none">
<rect x="3" y="11" width="18" height="10" rx="2" />
<circle cx="9" cy="16" r="1" />
<circle cx="15" cy="16" r="1" />
<path d="M8 11V7a4 4 0 0 1 8 0v4" />
</svg>
<input type="text" class="omnibox-input" placeholder="Search or ask anything..." id="omniboxInput"
autocomplete="off" />
<div class="omnibox-hints">
<kbd class="omnibox-shortcut">⌘K</kbd>
<button class="omnibox-mode-toggle" id="omniboxModeToggle" title="Toggle chat mode">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
</svg>
</button>
</div>
</div>
<!-- Expandable Results/Chat Panel -->
<div class="omnibox-panel" id="omniboxPanel">
<!-- Search Results Section -->
<div class="omnibox-results" id="omniboxResults">
<div class="omnibox-section">
<div class="omnibox-section-title">
Quick Actions
</div>
<div class="omnibox-actions" id="omniboxActions">
<button class="omnibox-action" data-action="chat">
<span class="action-icon">💬</span>
<span class="action-text">Chat with Bot</span>
<kbd></kbd>
</button>
<button class="omnibox-action" data-action="navigate" data-target="chat">
<span class="action-icon">📱</span>
<span class="action-text">Open Chat App</span>
</button>
<button class="omnibox-action" data-action="navigate" data-target="tasks">
<span class="action-icon"></span>
<span class="action-text">Go to Tasks</span>
</button>
<button class="omnibox-action" data-action="navigate" data-target="mail">
<span class="action-icon">✉️</span>
<span class="action-text">Go to Mail</span>
</button>
</div>
</div>
<div class="omnibox-section" id="searchResultsSection" style="display: none">
<div class="omnibox-section-title">
Search Results
</div>
<div class="omnibox-search-results" id="searchResultsList"></div>
</div>
</div>
<!-- Chat Section -->
<div class="omnibox-chat" id="omniboxChat" style="display: none">
<div class="omnibox-chat-messages" id="omniboxChatMessages">
<div class="omnibox-chat-welcome">
<div class="welcome-icon">🤖</div>
<div class="welcome-text">
<strong>Hi! I'm your assistant.</strong>
<p>
Ask me anything or tell me what
you'd like to do.
</p>
</div>
</div>
</div>
<div class="omnibox-chat-input-area">
<input type="text" class="omnibox-chat-input" placeholder="Type your message..."
id="omniboxChatInput" />
<button class="omnibox-send-btn" id="omniboxSendBtn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<line x1="22" y1="2" x2="11" y2="13" />
<polygon points="22 2 15 22 11 13 2 9 22 2" />
</svg>
</button>
</div>
<div class="omnibox-chat-footer">
<button class="omnibox-back-btn" id="omniboxBackBtn">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M19 12H5M12 19l-7-7 7-7" />
</svg>
Back to search
</button>
<button class="omnibox-expand-btn" id="omniboxExpandBtn" title="Open full chat">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polyline points="15 3 21 3 21 9" />
<polyline points="9 21 3 21 3 15" />
<line x1="21" y1="3" x2="14" y2="10" />
<line x1="3" y1="21" x2="10" y2="14" />
</svg>
Open full chat
</button>
</div>
</div>
</div>
</div>
<div class="omnibox-backdrop" id="omniboxBackdrop"></div>
</div>
<!-- Right: Notifications + User -->
<div class="header-right">
<!-- Notifications Bell -->
<div class="notifications-menu">
<button class="icon-button" id="notificationsBtn" title="Notifications" aria-expanded="false">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
</svg>
<span class="notifications-badge" id="notificationsBadge" style="display: none">0</span>
</button>
<div class="notifications-panel" id="notificationsPanel">
<div class="notifications-panel-header">
<span class="notifications-panel-title">Notifications</span>
<button class="notifications-clear-btn" id="clearNotificationsBtn">
Clear all
</button>
</div>
<div class="notifications-list" id="notificationsList">
<div class="notifications-empty">
<span>🔔</span>
<p>No notifications</p>
</div>
</div>
</div>
</div>
<button class="icon-button" id="settingsBtn" title="Settings" aria-expanded="false" aria-haspopup="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3" />
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
</button>
<!-- Settings/Theme Panel -->
<div class="settings-panel" id="settingsPanel" role="menu" aria-label="Settings">
<div class="settings-panel-title">Theme</div>
<div class="theme-grid">
<!-- Core Themes -->
<button class="theme-option theme-sentient" data-theme="sentient" title="Sentient">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🤖 Sentient</span>
</button>
<button class="theme-option theme-dark" data-theme="dark" title="Dark">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🌑 Dark</span>
</button>
<button class="theme-option theme-light" data-theme="light" title="Light">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">☀️ Light</span>
</button>
<button class="theme-option theme-blue" data-theme="blue" title="Ocean">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🌊 Ocean</span>
</button>
<button class="theme-option theme-purple" data-theme="purple" title="Violet">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">💜 Violet</span>
</button>
<button class="theme-option theme-green" data-theme="green" title="Forest">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🌲 Forest</span>
</button>
<button class="theme-option theme-orange" data-theme="orange" title="Sunset">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🌅 Sunset</span>
</button>
<!-- Retro Themes -->
<button class="theme-option theme-cyberpunk" data-theme="cyberpunk" title="Cyberpunk">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🌃 Cyberpunk</span>
</button>
<button class="theme-option theme-retrowave" data-theme="retrowave" title="Retrowave">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🌴 Retrowave</span>
</button>
<button class="theme-option theme-vapordream" data-theme="vapordream" title="Vapor Dream">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">💭 Vapor Dream</span>
</button>
<button class="theme-option theme-y2kglow" data-theme="y2kglow" title="Y2K">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">✨ Y2K</span>
</button>
<button class="theme-option theme-arcadeflash" data-theme="arcadeflash" title="Arcade">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🕹️ Arcade</span>
</button>
<button class="theme-option theme-discofever" data-theme="discofever" title="Disco">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🪩 Disco</span>
</button>
<button class="theme-option theme-grungeera" data-theme="grungeera" title="Grunge">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🎸 Grunge</span>
</button>
<!-- Classic Themes -->
<button class="theme-option theme-jazzage" data-theme="jazzage" title="Jazz Age">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🎺 Jazz Age</span>
</button>
<button class="theme-option theme-mellowgold" data-theme="mellowgold" title="Mellow Gold">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🌻 Mellow Gold</span>
</button>
<button class="theme-option theme-midcenturymod" data-theme="midcenturymod" title="Mid Century">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🏠 Mid Century</span>
</button>
<button class="theme-option theme-polaroidmemories" data-theme="polaroidmemories" title="Polaroid">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">📷 Polaroid</span>
</button>
<button class="theme-option theme-saturdaycartoons" data-theme="saturdaycartoons" title="Cartoons">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">📺 Cartoons</span>
</button>
<button class="theme-option theme-seasidepostcard" data-theme="seasidepostcard" title="Seaside">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🏖️ Seaside</span>
</button>
<button class="theme-option theme-typewriter" data-theme="typewriter" title="Typewriter">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">⌨️ Typewriter</span>
</button>
<!-- Tech Themes -->
<button class="theme-option theme-3dbevel" data-theme="3dbevel" title="3D Bevel">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">🔲 3D Bevel</span>
</button>
<button class="theme-option theme-xeroxui" data-theme="xeroxui" title="Xerox UI">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">📠 Xerox UI</span>
</button>
<button class="theme-option theme-xtreegold" data-theme="xtreegold" title="XTree Gold">
<div class="theme-option-inner">
<div class="theme-option-header">
<div class="theme-option-dot"></div>
</div>
<div class="theme-option-body">
<div class="theme-option-line"></div>
</div>
</div>
<span class="theme-option-name">📁 XTree Gold</span>
</button>
</div>
<a class="settings-link" href="#settings" hx-get="/suite/settings/index.html" hx-target="#main-content"
hx-push-url="/#settings">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3" />
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
<span>Settings</span>
</a>
</div>
<!-- User avatar with dropdown -->
<div class="user-avatar-container" style="position: relative">
<button class="user-avatar" id="userAvatar" title="User Account" aria-label="User account menu"
aria-expanded="false" aria-haspopup="true">
<span aria-hidden="true">U</span>
</button>
<!-- User Menu Dropdown -->
<div class="user-menu" id="userMenu" style="display: none">
<div class="user-menu-header">
<div class="user-avatar-large" id="userAvatarLarge">
U
</div>
<div class="user-info">
<div class="user-name" id="userName">User</div>
<div class="user-email" id="userEmail">
user@example.com
</div>
</div>
</div>
<div class="user-menu-divider"></div>
<nav class="user-menu-nav">
<a href="#settings" class="user-menu-item" hx-get="/suite/settings/index.html"
hx-target="#main-content" hx-push-url="/#settings">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span>Profile</span>
</a>
<a href="#settings" class="user-menu-item" hx-get="/suite/settings/index.html"
hx-target="#main-content" hx-push-url="/#settings">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
</path>
</svg>
<span>Settings</span>
</a>
<a href="https://docs.pragmatismo.com.br" target="_blank" class="user-menu-item">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
<span>Help & Support</span>
</a>
</nav>
<div class="user-menu-divider"></div>
<a href="/auth/login.html" class="user-menu-item login-item" id="authAction"
style="margin: 8px; color: var(--primary)">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" id="authIcon">
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
<polyline points="10 17 15 12 10 7"></polyline>
<line x1="15" y1="12" x2="3" y2="12"></line>
</svg>
<span id="authText">Sign in</span>
</a>
</div>
</div>
</div>
</header>
<!-- Main content area -->
<main id="main-content" role="main">
<!-- Sections will be loaded dynamically -->
</main>
<!-- Core scripts (auth handled by security-bootstrap.js in head) -->
<script src="js/api-client.js"></script>
<script src="js/theme-manager.js"></script>
<script src="js/htmx-app.js"></script>
<script src="js/base.js"></script>
<script src="tasks/tasks.js?v=20260102"></script>
<!-- Admin module functions (button handlers for HTMX-loaded admin views) -->
<script src="admin/admin.js"></script>
<script src="admin/admin-functions.js"></script>
<!-- Application initialization -->
<script src="js/suite_app.js"></script>
<script>
(function () {
const FEATURE_MAPPINGS = {
'crm': 'people',
'security': 'tools'
};
fetch('/api/product')
.then(function (r) { return r.json(); })
.then(function (data) {
if (!data.apps) return;
var apps = new Set(data.apps.map(function (a) { return a.toLowerCase(); }));
document.querySelectorAll('[data-section]').forEach(function (el) {
var section = el.getAttribute('data-section').toLowerCase();
if (FEATURE_MAPPINGS[section]) {
section = FEATURE_MAPPINGS[section];
}
if (!apps.has(section)) {
el.style.display = 'none';
}
});
})
.catch(function (e) { console.warn('Feature gating failed:', e); });
})();
</script>
</body>
</html>