food-cockpit/foodlinkk-command-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SysOps: approved_backup — 2026-08-16 11:01 UTC

Browse Source
This commit is contained in:
sysops
2026-08-16 11:01:58 +00:00
parent 22a17ed048
commit 1dd607b060
46 changed files with 3734 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cockpit/static/css/agents-warroom.css
+175
View File
@@ -0,0 +1,175 @@
/* Foodlinkk War Room */
.wr-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 0.75rem;
min-height: 62vh;
}
.wr-roster {
border-right: 1px solid rgba(255,255,255,0.08);
padding-right: 0.5rem;
max-height: 70vh;
overflow: auto;
}
.wr-roster h3 {
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.7;
margin: 0 0 0.4rem;
}
.wr-room-btn, .wr-agent-btn {
width: 100%;
display: flex;
align-items: center;
gap: 0.55rem;
text-align: left;
background: transparent;
border: 1px solid transparent;
color: inherit;
padding: 0.4rem 0.45rem;
border-radius: 8px;
cursor: pointer;
}
.wr-room-btn:hover, .wr-agent-btn:hover,
.wr-room-btn.active, .wr-agent-btn.active {
background: rgba(255, 215, 0, 0.08);
border-color: rgba(255, 215, 0, 0.25);
}
.wr-agent-meta { display: flex; flex-direction: column; min-width: 0; }
.wr-agent-meta strong { font-size: 0.85rem; }
.wr-agent-meta small { opacity: 0.65; font-size: 0.7rem; }
.wr-roster .agent-char-wrap { width: 34px; height: 34px; flex: 0 0 34px; }
.wr-main { display: flex; flex-direction: column; min-width: 0; min-height: 62vh; }
.wr-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 0.75rem; margin-bottom: 0.5rem;
}
.wr-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: 0.04em; }
.wr-head-actions { display: flex; gap: 0.35rem; }
.wr-log {
flex: 1;
overflow: auto;
background: rgba(0,0,0,0.22);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
padding: 0.75rem;
contain: content;
min-height: 320px;
}
.wr-empty { opacity: 0.6; margin: 0.5rem 0; font-size: 0.9rem; }
.wr-bubble {
display: flex; gap: 0.55rem; margin-bottom: 0.7rem;
contain: layout style;
}
.wr-bubble.is-user { flex-direction: row-reverse; }
.wr-bubble.is-system { opacity: 0.85; }
.wr-avatar { width: 36px; height: 36px; flex: 0 0 36px; }
.wr-avatar img, .wr-avatar .agent-char-wrap {
width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
}
.wr-avatar .agent-char-wrap svg { display: block; width: 36px; height: 36px; }
.wr-avatar-fallback {
display: grid; place-items: center; width: 36px; height: 36px;
border-radius: 50%; background: #1e3a5f; font-size: 0.7rem; font-weight: 700;
}
.wr-bubble-body {
max-width: min(720px, 82%);
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 0.45rem 0.65rem;
}
.wr-bubble.is-user .wr-bubble-body {
background: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.28);
}
.wr-bubble.is-agent .wr-bubble-body {
background: rgba(56, 189, 248, 0.08);
border-color: rgba(56, 189, 248, 0.22);
}
.wr-bubble.is-typing .wr-bubble-body {
border-style: dashed;
opacity: 0.95;
}
.wr-bubble-meta {
font-size: 0.7rem; opacity: 0.7; margin-bottom: 0.15rem;
}
.wr-bubble-text {
white-space: pre-wrap;
word-break: break-word;
font-size: 0.92rem;
line-height: 1.35;
}
.wr-typing-cursor::after {
content: '▍
animation: wrBlink 1s steps(1) infinite;
margin-left: 1px;
}
@keyframes wrBlink { 50% { opacity: 0; } }
.wr-attach-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.wr-attach-card {
display: block; max-width: 220px; text-decoration: none; color: inherit;
border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; overflow: hidden;
background: rgba(0,0,0,0.2);
}
.wr-attach-card img { display: block; width: 100%; max-height: 140px; object-fit: cover; }
.wr-attach-card span {
display: block; padding: 0.3rem 0.45rem; font-size: 0.72rem; opacity: 0.85;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wr-composer {
margin-top: 0.55rem;
display: grid;
grid-template-columns: 1fr auto;
gap: 0.45rem;
align-items: end;
}
.wr-composer-tools {
grid-column: 1 / -1;
display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
}
.wr-pending {
display: flex; flex-wrap: wrap; gap: 0.35rem; grid-column: 1 / -1;
}
.wr-pending-chip {
display: inline-flex; align-items: center; gap: 0.3rem;
font-size: 0.72rem; padding: 0.2rem 0.45rem;
border-radius: 999px; background: rgba(255,255,255,0.08);
}
.wr-pending-chip button {
border: 0; background: transparent; color: inherit; cursor: pointer; opacity: 0.7;
}
.wr-emoji-pop {
display: flex; flex-wrap: wrap; gap: 0.2rem;
max-width: 280px; padding: 0.35rem;
background: #0f172a; border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
}
.wr-emoji-pop button {
border: 0; background: transparent; cursor: pointer; font-size: 1.15rem; line-height: 1;
padding: 0.15rem;
}
.wr-emoji-pop button:hover { transform: scale(1.15); }
.wr-page-header { margin-bottom: 0.75rem; }
.wr-page-header h1 { font-size: 1.35rem; }
.wr-popup-body {
margin: 0; min-height: 100vh;
background: #070b14; color: #e8eef8;
}
.wr-popup-shell { padding: 0.75rem; }
.wr-popup-shell .wr-layout { min-height: calc(100vh - 1.5rem); }
.wr-popup-shell .wr-main { min-height: calc(100vh - 1.5rem); }
.wr-popup-shell .wr-log { min-height: 50vh; }
@media (max-width: 900px) {
.wr-layout { grid-template-columns: 1fr; }
.wr-roster { max-height: 180px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
}
cockpit/static/css/app-sidebar-neo.css
+7 -1
View File
@@ -230,5 +230,11 @@ body.sidebar-resizing iframe {
}
@media (max-width: 768px) {
.app-sidebar-resizer { display: none; }
.app-sidebar-resizer { display: none !important; }
.app-main { margin-left: 0 !important; }
.app-sidebar {
z-index: 1000;
overflow-y: auto;
overflow-x: hidden;
}
}
cockpit/static/css/login.css
+99
View File
@@ -0,0 +1,99 @@
:root {
--bg0: #06090e;
--bg1: #0c121b;
--card: #111821;
--line: rgba(148, 163, 184, 0.18);
--text: #f1f5f9;
--muted: #94a3b8;
--gold: #fbbf24;
--green: #22c55e;
--danger: #f87171;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
.login-body {
min-height: 100%;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
color: var(--text);
background:
radial-gradient(900px 420px at 15% -10%, rgba(251, 191, 36, 0.14), transparent 55%),
radial-gradient(700px 380px at 100% 10%, rgba(34, 197, 94, 0.1), transparent 50%),
linear-gradient(160deg, var(--bg0), var(--bg1) 55%, #0a1018);
}
.login-shell {
min-height: 100%;
display: grid;
place-items: center;
padding: max(1.25rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom));
}
.login-card {
width: min(420px, 100%);
background: rgba(17, 24, 33, 0.92);
border: 1px solid var(--line);
border-radius: 18px;
padding: 1.75rem 1.5rem 1.35rem;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.login-logo {
display: block;
width: min(280px, 100%);
height: auto;
margin: 0 auto 0.75rem;
}
.login-sub {
margin: 0 0 1.25rem;
text-align: center;
color: var(--muted);
font-size: 0.92rem;
}
.login-error {
background: rgba(248, 113, 113, 0.12);
border: 1px solid rgba(248, 113, 113, 0.35);
color: #fecaca;
border-radius: 10px;
padding: 0.65rem 0.75rem;
margin-bottom: 1rem;
font-size: 0.88rem;
}
.login-form { display: grid; gap: 0.85rem; }
.login-label {
display: grid;
gap: 0.35rem;
font-size: 0.8rem;
color: var(--muted);
font-weight: 600;
letter-spacing: 0.02em;
}
.login-input {
width: 100%;
min-height: 46px;
border-radius: 10px;
border: 1px solid var(--line);
background: #0a0f16;
color: var(--text);
padding: 0.65rem 0.8rem;
font-size: 16px;
}
.login-input:focus {
outline: none;
border-color: rgba(251, 191, 36, 0.55);
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
}
.login-btn {
margin-top: 0.35rem;
min-height: 48px;
border: 0;
border-radius: 10px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #111827;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
}
.login-btn:hover { filter: brightness(1.05); }
.login-foot {
margin: 1.1rem 0 0;
text-align: center;
color: #64748b;
font-size: 0.75rem;
}
cockpit/static/css/mobile.css
+61 -16
View File
@@ -1,5 +1,6 @@
/**
* Foodlinkk Command Center — mobile (Android + iOS)
* Must load LAST so it wins over app-sidebar-neo / herman-dashboard.
*/
:root {
--safe-top: env(safe-area-inset-top, 0px);
@@ -32,8 +33,9 @@ body { overflow-x: hidden; padding-bottom: var(--safe-bottom); }
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 998;
backdrop-filter: blur(2px);
z-index: 999;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
@media (max-width: 1024px) {
@@ -87,43 +89,59 @@ body { overflow-x: hidden; padding-bottom: var(--safe-bottom); }
.regs-columns[style*="repeat(3"] { grid-template-columns: 1fr !important; }
.regs-columns { flex-direction: column !important; display: flex !important; }
.pwa-install-bar { display: flex; }
/* Scherper op tablet/mobiel: minder soft blur */
.hm-panel, .hm-chart-panel, .live-digest, .briefing-card,
.ha-panel, .panel {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
@media (max-width: 768px) {
.mobile-menu-btn { display: inline-flex; }
.mobile-menu-btn { display: inline-flex !important; }
.mobile-nav-overlay { display: block; }
body:not(.nav-open) .mobile-nav-overlay { display: none; }
body:not(.nav-open) .mobile-nav-overlay { display: none !important; }
.app-shell {
grid-template-columns: 1fr !important;
display: block !important;
}
.app-main {
margin-left: 0 !important;
width: 100% !important;
max-width: 100vw !important;
}
/* Hard overrides — must beat app-sidebar-neo.css */
.app-sidebar {
position: fixed !important;
top: 0; left: 0; bottom: 0;
width: min(280px, 88vw);
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
width: min(280px, 88vw) !important;
height: 100dvh !important;
z-index: 999;
transform: translateX(-105%);
transition: transform 0.3s ease;
z-index: 1000 !important;
transform: translateX(-105%) !important;
transition: transform 0.3s ease !important;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
padding-top: max(1rem, var(--safe-top));
padding-top: max(1rem, var(--safe-top)) !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
overflow-y: auto;
overflow-x: hidden;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
}
.app-sidebar-resizer { display: none !important; }
.persona-nav {
flex: none;
min-height: auto;
overflow: visible;
padding-bottom: 0;
}
body.nav-open .app-sidebar { transform: translateX(0); }
body.nav-open .app-sidebar { transform: translateX(0) !important; }
body.nav-open { overflow: hidden; }
.app-topbar {
position: sticky; top: 0; z-index: 100;
padding-top: max(0.5rem, var(--safe-top));
@@ -133,16 +151,43 @@ body { overflow-x: hidden; padding-bottom: var(--safe-bottom); }
.retail-actions .btn, .herman-briefing-actions .btn {
min-width: 100%; flex: 1 1 100%;
}
.herman-briefing-actions {
flex-direction: column;
}
.herman-briefing-actions .btn {
width: 100%;
}
}
@media (max-width: 480px) {
.kpi-row, .hm-neo-kpi-row, .hub-kpi-row, .analytics-kpis {
grid-template-columns: 1fr !important;
}
.page-header h1 { font-size: 1.2rem !important; }
}
.pwa-install-bar {
display: none;
position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
position: fixed; bottom: 0; left: 0; right: 0; z-index: 10100;
padding: 0.75rem 1rem;
padding-bottom: max(0.75rem, var(--safe-bottom));
background: rgba(8, 12, 18, 0.95);
background: rgba(8, 12, 18, 0.97);
border-top: 1px solid rgba(148, 163, 184, 0.15);
align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
}
.pwa-install-bar p { margin: 0; font-size: 0.85rem; color: #cbd5e1; flex: 1; }
@media (display-mode: standalone) { .pwa-install-bar { display: none !important; } }
.pwa-install-hint {
display: none;
width: 100%;
margin: 0;
font-size: 0.78rem;
color: #94a3b8;
line-height: 1.35;
}
.pwa-install-bar.is-ios .pwa-install-hint.is-ios-hint { display: block; }
.pwa-install-bar.is-android .pwa-install-hint.is-android-hint { display: block; }
.pwa-install-bar:not(.is-ios):not(.is-android) .pwa-install-hint.is-android-hint { display: block; }
@media (display-mode: standalone), (display-mode: fullscreen) {
.pwa-install-bar { display: none !important; }
}
cockpit/static/css/revenue-cockpit.css
+44
View File
@@ -956,3 +956,47 @@
.rc-visual-toggle { order: 5; flex: 1 1 100%; }
.rc-style-chips { order: 6; flex: 1 1 100%; }
}
/* === MOBILE V2 === */
@media (max-width: 768px) {
.rc-sheet-wrap,
.rc-visual-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.rc-sheet {
min-width: 720px !important; /* scroll inside wrap, don't blow up page */
}
.rc-visual-table {
min-width: 560px !important;
}
.rc-page {
overflow-x: hidden;
}
.rc-header {
flex-direction: column;
align-items: stretch !important;
}
.rc-header-actions {
width: 100%;
}
.rc-header-actions .rc-btn,
.rc-header-actions .rc-dot-btn,
.rc-view-toggle {
min-height: 44px;
}
.rc-summary-strip {
flex-direction: column;
align-items: stretch;
}
.rc-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.rc-filter-chips button,
.rc-toggle-btn {
min-height: 40px;
}
}
cockpit/static/css/user-avatar.css
+147
View File
@@ -0,0 +1,147 @@
/* Topbar identity chip */
.app-user-chip {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-left: 0.65rem;
padding: 0.2rem 0.35rem 0.2rem 0.2rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.75);
border: 1px solid rgba(148, 163, 184, 0.18);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.app-user-chip input[type="file"],
.user-avatar-input {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
.user-avatar-btn {
appearance: none;
border: 0;
padding: 0;
margin: 0;
background: transparent;
cursor: pointer;
border-radius: 50%;
line-height: 0;
flex-shrink: 0;
}
.user-avatar-btn:focus-visible {
outline: 2px solid rgba(251, 191, 36, 0.65);
outline-offset: 2px;
}
.user-avatar-img,
.user-avatar-fallback {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(251, 191, 36, 0.55);
background: linear-gradient(145deg, #1e293b, #0f172a);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.user-avatar-img {
display: block;
}
.user-avatar-fallback {
display: none; /* Alpine x-show zet dit aan indien geen foto */
align-items: center;
justify-content: center;
color: #fbbf24;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Als Alpine display:flex/inline-flex zet via x-show */
.user-avatar-fallback[style*="flex"] {
display: inline-flex !important;
}
.user-avatar-meta {
display: flex;
flex-direction: column;
min-width: 0;
padding-right: 0.15rem;
line-height: 1.15;
}
.user-avatar-name {
font-size: 0.8rem;
font-weight: 600;
color: #e2e8f0;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-avatar-role {
font-size: 0.65rem;
color: #94a3b8;
text-transform: capitalize;
}
.user-logout-btn {
min-height: 30px !important;
padding: 0.2rem 0.65rem !important;
font-size: 0.7rem !important;
border-radius: 999px !important;
margin-right: 0.15rem;
}
@media (max-width: 640px) {
.user-avatar-meta { display: none; }
.app-user-chip {
padding: 0.15rem;
gap: 0.35rem;
}
}
/* Settings list */
.user-card-avatar,
.user-form-avatar-preview {
width: 48px;
height: 48px;
border-radius: 50% !important;
object-fit: cover;
border: 2px solid rgba(251, 191, 36, 0.4);
background: #1e293b;
flex-shrink: 0;
}
.user-card-avatar.fallback,
.user-form-avatar-preview.fallback {
display: inline-flex;
align-items: center;
justify-content: center;
color: #fbbf24;
font-weight: 700;
}
.user-form-avatar-preview {
width: 72px;
height: 72px;
}
.user-form-avatar-row {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 0.85rem;
}
cockpit/static/icons/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

cockpit/static/icons/icon-192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

cockpit/static/icons/icon-512-maskable.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

cockpit/static/icons/icon-512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

cockpit/static/img/foodlinkk-logo.svg
+13
View File
@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 160" role="img" aria-label="Foodlinkk">
<defs>
<linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fbbf24"/>
<stop offset="100%" stop-color="#f59e0b"/>
</linearGradient>
</defs>
<rect x="8" y="24" width="112" height="112" rx="28" fill="#0a0e14" stroke="url(#g)" stroke-width="4"/>
<text x="64" y="102" text-anchor="middle" font-family="system-ui,Segoe UI,sans-serif" font-size="72" font-weight="700" fill="#fbbf24">F</text>
<circle cx="100" cy="44" r="10" fill="#22c55e"/>
<text x="140" y="88" font-family="system-ui,Segoe UI,sans-serif" font-size="52" font-weight="700" fill="#f8fafc" letter-spacing="-0.02em">Foodlinkk</text>
<text x="142" y="122" font-family="system-ui,Segoe UI,sans-serif" font-size="16" font-weight="500" fill="#94a3b8" letter-spacing="0.18em">COMMAND CENTER</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 925 B

cockpit/static/js/agent-avatars.js
+9 -4
View File
@@ -94,15 +94,20 @@ window.AgentAvatars = (function () {
);
}
function paint(el, key, color) {
function paint(el, key, color, force) {
if (!el) return;
el.innerHTML = svgAvatar((key || '').toLowerCase(), color);
var k = (key || '').toLowerCase();
var c = color || '';
var sig = k + '|' + c;
if (!force && el.getAttribute('data-avatar-painted') === sig && el.querySelector('svg')) return;
el.innerHTML = svgAvatar(k, color);
el.setAttribute('data-avatar-painted', sig);
}
function paintAll(root) {
function paintAll(root, force) {
root = root || document;
root.querySelectorAll('[data-agent-avatar]').forEach(function (el) {
paint(el, el.getAttribute('data-agent-avatar'), el.getAttribute('data-agent-color'));
paint(el, el.getAttribute('data-agent-avatar'), el.getAttribute('data-agent-color'), force);
});
}
cockpit/static/js/agents-warroom.js
+426
View File
@@ -0,0 +1,426 @@
/** Foodlinkk War Room — tab + popup (stream, emoji, files) */
window.WarRoomHub = (function () {
var EMOJIS = ['😀','😂','🙂','😉','😍','🤝','👍','👎','🙏','🔥','✅','❌','⚠️','💡','📎','📦','🚀','💬','🧠','☕','💪','🎯','📊','🧾','🇳🇱','🌍'];
function openPopup(roomQuery) {
var url = '/agents/warroom/popup' + (roomQuery || '');
var w = window.open(url, 'flk-warroom', 'width=980,height=780,menubar=no,toolbar=no,location=no,status=no');
if (w) try { w.focus(); } catch (e) {}
return w;
}
function warRoomController(opts) {
opts = opts || {};
return {
popupMode: !!opts.popupMode,
souls: [],
rooms: [],
room: null,
messages: [],
draft: '',
busy: false,
me: { username: '', avatar_url: '', role: '' },
lastId: 0,
_poll: null,
_polling: false,
status: '',
emojiOpen: false,
emojis: EMOJIS,
pendingFiles: [],
typing: null, // { agent_key, display_name, text }
async init() {
await Promise.all([this.loadMe(), this.loadSouls(), this.loadRooms()]);
var params = new URLSearchParams(window.location.search || '');
var want = params.get('room');
if (want) await this.openRoom(parseInt(want, 10));
else {
var wr = (this.rooms || []).find(function (r) { return r.kind === 'warroom'; });
if (wr) await this.openRoom(wr.id);
else if (this.rooms.length) await this.openRoom(this.rooms[0].id);
}
this.startPoll();
},
destroy() {
if (this._poll) clearInterval(this._poll);
},
async loadMe() {
try {
var r = await fetch('/api/auth/me').then(function (x) { return x.json(); });
var u = r.user || r || {};
this.me = {
username: u.username || '',
avatar_url: u.avatar_url || '',
role: u.role || '',
};
} catch (e) {
this.me = { username: '', avatar_url: '', role: '' };
}
},
async loadSouls() {
try {
var r = await fetch('/api/agents/souls').then(function (x) { return x.json(); });
this.souls = (r.items || r.souls || r || []).filter(function (s) { return s.is_active !== false; });
} catch (e) {
this.souls = [];
}
this.$nextTick(function () { this.paintAvatars(); }.bind(this));
},
async loadRooms() {
try {
var r = await fetch('/api/agents/warroom/rooms').then(function (x) { return x.json(); });
this.rooms = r.items || [];
} catch (e) {
this.rooms = [];
}
},
warroomRoom() {
return (this.rooms || []).find(function (r) { return r.kind === 'warroom'; }) || null;
},
async openWarroom() {
var wr = this.warroomRoom();
if (wr) return this.openRoom(wr.id);
await this.loadRooms();
wr = this.warroomRoom();
if (wr) return this.openRoom(wr.id);
},
async openDm(agentKey) {
if (this.busy) return;
this.busy = true;
try {
var r = await Cockpit.api('/api/agents/warroom/rooms/dm/' + encodeURIComponent(agentKey), {
method: 'POST',
body: '{}',
});
await this.loadRooms();
if (r.room) await this.openRoom(r.room.id);
} catch (e) {
if (window.Cockpit) Cockpit.toast(e.message || 'DM openen mislukt', 'error');
}
this.busy = false;
},
async openRoom(id) {
if (!id) return;
this.busy = true;
this.status = '';
this.typing = null;
try {
var r = await fetch('/api/agents/warroom/rooms/' + id + '/messages?limit=120').then(function (x) {
return x.json();
});
this.room = r.room;
this.messages = this.normalizeList(r.items || []);
this.lastId = this.maxId(this.messages);
this.$nextTick(function () {
this.paintAvatars();
this.scrollLog();
}.bind(this));
} catch (e) {
this.status = e.message || 'Laden mislukt';
}
this.busy = false;
},
normalizeList(items) {
return (items || []).map(function (m) {
if (m && typeof m.metadata === 'string') {
try { m.metadata = JSON.parse(m.metadata); } catch (e) { m.metadata = {}; }
}
return m;
});
},
maxId(items) {
var n = 0;
(items || []).forEach(function (m) {
var id = Number(m && m.id);
if (!isNaN(id) && id > n) n = id;
});
return n;
},
paintAvatars() {
if (!window.AgentAvatars) return;
var root = this.$root || document;
root.querySelectorAll('.wr-roster [data-agent-avatar], .wr-log [data-agent-avatar]').forEach(function (el) {
AgentAvatars.paint(el, el.getAttribute('data-agent-avatar'), el.getAttribute('data-agent-color'));
});
},
upsertMessage(msg) {
if (!msg || msg.id == null) return false;
var list = this.messages || [];
var idx = list.findIndex(function (m) { return String(m.id) === String(msg.id); });
if (idx >= 0) {
list[idx] = msg;
this.messages = list.slice();
} else {
this.messages = list.concat([msg]);
}
var idn = Number(msg.id);
if (!isNaN(idn) && idn > (this.lastId || 0)) this.lastId = idn;
return true;
},
mergeMessages(items) {
var changed = false;
var self = this;
this.normalizeList(items || []).forEach(function (m) {
if (self.upsertMessage(m)) changed = true;
});
return changed;
},
scrollLog() {
var el = this.$refs && this.$refs.wrLog;
if (el) el.scrollTop = el.scrollHeight;
},
startPoll() {
var self = this;
if (this._poll) clearInterval(this._poll);
this._poll = setInterval(function () { self.pollNew(); }, 4000);
},
async pollNew() {
// Cruciaal: niet pollen tijdens send/stream → voorkomt dubbele user-bubbles
if (!this.room || this._polling || this.busy) return;
this._polling = true;
try {
var url =
'/api/agents/warroom/rooms/' +
this.room.id +
'/messages?limit=50&after_id=' +
(this.lastId || 0);
var r = await fetch(url).then(function (x) { return x.json(); });
if (this.mergeMessages(r.items || [])) {
this.$nextTick(function () {
this.paintAvatars();
this.scrollLog();
}.bind(this));
}
} catch (e) { /* quiet */ }
this._polling = false;
},
attachmentsOf(m) {
var meta = (m && m.metadata) || {};
return meta.attachments || [];
},
isImage(att) {
var mime = (att && att.mime) || '';
var name = ((att && att.name) || '').toLowerCase();
return mime.indexOf('image/') === 0 || /\.(png|jpe?g|gif|webp)$/.test(name);
},
insertEmoji(em) {
this.draft = (this.draft || '') + em;
this.emojiOpen = false;
},
insertMention(key) {
this.draft = (this.draft || '') + '@' + key + ' ';
},
async onPickFiles(ev) {
var files = Array.prototype.slice.call((ev.target && ev.target.files) || []);
if (ev.target) ev.target.value = '';
for (var i = 0; i < files.length; i++) {
await this.uploadFile(files[i]);
}
},
async uploadFile(file) {
if (!file) return;
this.status = 'Uploaden…';
try {
var fd = new FormData();
fd.append('file', file);
var resp = await fetch('/api/agents/warroom/upload', { method: 'POST', body: fd, credentials: 'same-origin' });
var data = await resp.json().catch(function () { return {}; });
if (!resp.ok) throw new Error(data.detail || data.message || 'Upload mislukt');
this.pendingFiles = (this.pendingFiles || []).concat([{
url: data.url,
name: data.name || file.name,
mime: data.mime || file.type,
size: data.size || file.size || 0,
}]);
this.status = '';
} catch (e) {
this.status = e.message || 'Upload mislukt';
if (window.Cockpit) Cockpit.toast(this.status, 'error');
}
},
removePending(idx) {
this.pendingFiles = (this.pendingFiles || []).filter(function (_, i) { return i !== idx; });
},
canSend() {
return !this.busy && this.room && (((this.draft || '').trim()) || (this.pendingFiles || []).length);
},
async send() {
var text = (this.draft || '').trim();
var files = (this.pendingFiles || []).slice();
if (!this.room || this.busy) return;
if (!text && !files.length) return;
this.busy = true;
this.emojiOpen = false;
this.draft = '';
this.pendingFiles = [];
this.typing = null;
this.status = 'Verzenden…';
try {
var resp = await fetch('/api/agents/warroom/rooms/' + this.room.id + '/messages/stream', {
method: 'POST',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json', Accept: 'text/event-stream' },
body: JSON.stringify({ content: text, attachments: files }),
});
if (!resp.ok) {
var err = await resp.json().catch(function () { return {}; });
throw new Error(err.detail || ('HTTP ' + resp.status));
}
await this.consumeStream(resp);
this.status = '';
} catch (e) {
this.draft = text;
this.pendingFiles = files;
this.status = e.message || 'Verzenden mislukt';
if (window.Cockpit) Cockpit.toast(this.status, 'error');
}
this.typing = null;
this.busy = false;
this.$nextTick(function () {
this.paintAvatars();
this.scrollLog();
}.bind(this));
},
async consumeStream(resp) {
var reader = resp.body.getReader();
var decoder = new TextDecoder();
var buf = '';
while (true) {
var chunk = await reader.read();
if (chunk.done) break;
buf += decoder.decode(chunk.value, { stream: true });
var parts = buf.split('\n\n');
buf = parts.pop() || '';
for (var i = 0; i < parts.length; i++) {
this.handleSseBlock(parts[i]);
}
}
if (buf.trim()) this.handleSseBlock(buf);
},
handleSseBlock(block) {
var lines = (block || '').split('\n');
var dataLines = [];
for (var i = 0; i < lines.length; i++) {
if (lines[i].indexOf('data:') === 0) dataLines.push(lines[i].slice(5).trim());
}
if (!dataLines.length) return;
var raw = dataLines.join('\n');
var ev;
try {
ev = JSON.parse(raw);
} catch (e) {
return;
}
var type = ev.event || '';
if (type === 'user' && ev.message) {
this.upsertMessage(ev.message);
this.status = 'Agent typt…';
this.$nextTick(function () { this.scrollLog(); }.bind(this));
} else if (type === 'typing_start') {
this.typing = {
agent_key: ev.agent_key,
display_name: ev.display_name || ev.agent_key,
text: '',
};
this.status = (this.typing.display_name || 'Agent') + ' typt…';
this.$nextTick(function () { this.scrollLog(); }.bind(this));
} else if (type === 'typing') {
if (!this.typing || this.typing.agent_key !== ev.agent_key) {
this.typing = {
agent_key: ev.agent_key,
display_name: (this.soulFor(ev.agent_key) || {}).display_name || ev.agent_key,
text: '',
};
}
this.typing.text = (this.typing.text || '') + (ev.delta || '');
// force alpine refresh
this.typing = Object.assign({}, this.typing);
this.$nextTick(function () { this.scrollLog(); }.bind(this));
} else if (type === 'agent' && ev.message) {
this.typing = null;
this.upsertMessage(ev.message);
this.$nextTick(function () {
this.paintAvatars();
this.scrollLog();
}.bind(this));
} else if (type === 'system' && ev.message) {
this.typing = null;
this.upsertMessage(ev.message);
} else if (type === 'error') {
this.typing = null;
this.status = ev.detail || 'Streamfout';
if (window.Cockpit) Cockpit.toast(this.status, 'error');
} else if (type === 'done') {
this.typing = null;
}
},
onKey(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
this.send();
}
},
popOut() {
var q = this.room ? '?room=' + this.room.id : '';
openPopup(q);
},
soulFor(key) {
return (this.souls || []).find(function (s) { return s.agent_key === key; }) || null;
},
labelForMessage(m) {
if (m.sender_type === 'user') return m.username || this.me.username || 'Jij';
if (m.sender_type === 'agent') {
var s = this.soulFor(m.agent_key);
return (s && s.display_name) || m.agent_key || 'Agent';
}
return 'Systeem';
},
};
}
return { openPopup: openPopup, controller: warRoomController };
})();
document.addEventListener('alpine:init', function () {
if (window.Alpine && Alpine.data) {
Alpine.data('warRoomHub', function () {
return WarRoomHub.controller({ popupMode: false });
});
Alpine.data('warRoomPopup', function () {
return WarRoomHub.controller({ popupMode: true });
});
}
});
cockpit/static/js/cockpit.js
+4
View File
@@ -30,6 +30,10 @@ window.Cockpit = (function () {
const fetchOpts = Object.assign({}, options, { headers: headers });
if (options.signal) fetchOpts.signal = options.signal;
const res = await fetch(url, fetchOpts);
if (res.status === 401 && !String(url).includes('/api/auth/login')) {
location.href = '/login?next=' + encodeURIComponent(location.pathname + location.search);
throw new Error('Niet ingelogd');
}
let data = null;
try { data = await res.json(); } catch (e) { data = null; }
if (!res.ok) {
cockpit/static/js/herman-assistant.js
+7
View File
@@ -638,6 +638,13 @@ window.HermanAssistant = (function () {
this.busy = false;
},
openWarRoomPopup: function () {
if (window.WarRoomHub && WarRoomHub.openPopup) {
WarRoomHub.openPopup();
return;
}
window.open('/agents/warroom/popup', 'flk-warroom', 'width=980,height=780,menubar=no,toolbar=no,location=no,status=no');
},
formatDelegated: function (meta) {
var d = (meta && meta.delegated) || [];
return d.filter(function (a) { return String(a).toLowerCase() !== 'herman'; }).join(', ');
cockpit/static/js/revenue-cockpit.js
+5 -1
View File
@@ -47,7 +47,11 @@ function revenueCockpit() {
async init() {
localStorage.setItem('foodlinkk-persona', 'ceo');
const saved = localStorage.getItem('rc-visual-mode');
if (saved === 'table' || saved === 'bars' || saved === 'cards') this.visualMode = saved;
if (saved === 'table' || saved === 'bars' || saved === 'cards') {
this.visualMode = saved;
} else if (window.matchMedia('(max-width: 768px)').matches) {
this.visualMode = 'cards';
}
await this.loadLive();
await this.loadDbQuiet();
if (window.CockpitLive) {
cockpit/static/manifest.json
+38 -7
View File
@@ -1,26 +1,57 @@
{
"name": "Cucina · Foodlinkk Command Center",
"id": "/",
"name": "Foodlinkk Command Center",
"short_name": "Foodlinkk",
"description": "CEO Business dashboard · CTO Tech dashboard · CRM · Retail",
"start_url": "/",
"description": "CEO dashboard · Revenue Cockpit · CRM · Retail · Cucina & Foodlinkk",
"start_url": "/?source=pwa",
"scope": "/",
"display": "standalone",
"display_override": ["standalone", "fullscreen", "browser"],
"orientation": "any",
"background_color": "#0a0e14",
"theme_color": "#0a0e14",
"lang": "nl",
"dir": "ltr",
"categories": ["business", "productivity", "finance"],
"prefer_related_applications": false,
"icons": [
{
"src": "/static/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/static/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/static/icons/icon-512-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/static/icons/app-icon.svg",
"sizes": "any",
"type": "image/svg+xml",
"purpose": "any"
}
],
"shortcuts": [
{
"name": "Overzicht",
"short_name": "Home",
"url": "/?source=pwa",
"icons": [{ "src": "/static/icons/icon-192.png", "sizes": "192x192" }]
},
{
"src": "/static/icons/app-icon.svg",
"sizes": "512x512",
"type": "image/svg+xml",
"purpose": "maskable"
"name": "Revenue Cockpit",
"short_name": "Revenue",
"url": "/revenue-cockpit?source=pwa",
"icons": [{ "src": "/static/icons/icon-192.png", "sizes": "192x192" }]
}
]
}
cockpit/static/sw.js
+58 -7
View File
@@ -1,18 +1,69 @@
/* PWA cache disabled — clears legacy caches and unregisters itself */
/* Foodlinkk PWA service worker v6 */
const CACHE = 'foodlinkk-shell-v6';
const PRECACHE = [
'/',
'/static/manifest.json',
'/static/css/mobile.css?v=6',
'/static/css/app-sidebar-neo.css?v=12',
'/static/css/palantir-theme.css?v=4',
'/static/icons/icon-192.png',
'/static/icons/icon-512.png',
'/static/icons/apple-touch-icon.png',
];
self.addEventListener('install', (event) => {
self.skipWaiting();
event.waitUntil(
caches.keys().then((keys) => Promise.all(keys.map((k) => caches.delete(k))))
caches.open(CACHE).then((cache) => cache.addAll(PRECACHE).catch(() => undefined))
);
});
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys()
.then((keys) => Promise.all(keys.map((k) => caches.delete(k))))
.then(() => self.clients.claim())
caches.keys().then((keys) =>
Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
).then(() => self.clients.claim())
);
});
/* Do not intercept fetches — always use network */
self.addEventListener('fetch', () => {});
self.addEventListener('fetch', (event) => {
const req = event.request;
if (req.method !== 'GET') return;
const url = new URL(req.url);
if (url.origin !== self.location.origin) return;
// API / live data: always network
if (url.pathname.startsWith('/api') || url.pathname.includes('/ws')) return;
// Navigations: network-first, fallback to cache
if (req.mode === 'navigate') {
event.respondWith(
fetch(req)
.then((res) => {
const copy = res.clone();
caches.open(CACHE).then((c) => c.put('/', copy)).catch(() => undefined);
return res;
})
.catch(() => caches.match('/') || caches.match(req))
);
return;
}
// Static assets: stale-while-revalidate
if (url.pathname.startsWith('/static/')) {
event.respondWith(
caches.match(req).then((cached) => {
const net = fetch(req)
.then((res) => {
if (res && res.ok) {
const copy = res.clone();
caches.open(CACHE).then((c) => c.put(req, copy)).catch(() => undefined);
}
return res;
})
.catch(() => cached);
return cached || net;
})
);
}
});
cockpit/static/sw.root.js
+69
View File
@@ -0,0 +1,69 @@
/* Foodlinkk PWA service worker v6 */
const CACHE = 'foodlinkk-shell-v6';
const PRECACHE = [
'/',
'/static/manifest.json',
'/static/css/mobile.css?v=6',
'/static/css/app-sidebar-neo.css?v=12',
'/static/css/palantir-theme.css?v=4',
'/static/icons/icon-192.png',
'/static/icons/icon-512.png',
'/static/icons/apple-touch-icon.png',
];
self.addEventListener('install', (event) => {
self.skipWaiting();
event.waitUntil(
caches.open(CACHE).then((cache) => cache.addAll(PRECACHE).catch(() => undefined))
);
});
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then((keys) =>
Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
).then(() => self.clients.claim())
);
});
self.addEventListener('fetch', (event) => {
const req = event.request;
if (req.method !== 'GET') return;
const url = new URL(req.url);
if (url.origin !== self.location.origin) return;
// API / live data: always network
if (url.pathname.startsWith('/api') || url.pathname.includes('/ws')) return;
// Navigations: network-first, fallback to cache
if (req.mode === 'navigate') {
event.respondWith(
fetch(req)
.then((res) => {
const copy = res.clone();
caches.open(CACHE).then((c) => c.put('/', copy)).catch(() => undefined);
return res;
})
.catch(() => caches.match('/') || caches.match(req))
);
return;
}
// Static assets: stale-while-revalidate
if (url.pathname.startsWith('/static/')) {
event.respondWith(
caches.match(req).then((cached) => {
const net = fetch(req)
.then((res) => {
if (res && res.ok) {
const copy = res.clone();
caches.open(CACHE).then((c) => c.put(req, copy)).catch(() => undefined);
}
return res;
})
.catch(() => cached);
return cached || net;
})
);
}
});