ATC/ome-cockpit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ATC Team chat, soft identity, and update Present decks.

Browse Source 
Ship team/DM chat with files, avatars, unread alerts, and a first-open identity gate (including Guest); fold Team into Ops desk; clarify Datacenter Engineer vs "Data Plumbers" FDE roles; refresh Present story/tech slides to match.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
root
2026-07-19 01:42:00 +02:00
parent 03e207b46d
commit b4714c70d1
11 changed files with 1953 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/index.html
+115 -29
View File
@@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/styles.css?v=console2" />
<link rel="stylesheet" href="/styles.css?v=team6" />
<link rel="icon" href="/dell.png" type="image/png" />
<link rel="stylesheet" href="/vendor/xterm/xterm.css?v=home1" />
<script>
@@ -41,7 +41,25 @@
<button type="button" class="btn ghost" id="btn-network" title="Fabric map &amp; ATC racks">Network</button>
<button type="button" class="btn console-btn" id="btn-console" title="Live iDRAC console wall">Console</button>
<button type="button" class="btn ghost" id="btn-reports" title="Fleet reports &amp; Dell compliance">Reports</button>
<button type="button" class="btn ghost" id="btn-ops" title="ATC admin tickets">Ops desk</button>
<div class="ops-team-combo" title="Ops desk &amp; team chat">
<button type="button" class="btn ghost" id="btn-ops" title="ATC admin tickets">Ops desk</button>
<button type="button" class="btn team-btn" id="btn-team" title="ATC team chat · files">
<span class="team-btn-label">Team</span>
<span class="team-unread hidden" id="team-unread" aria-label="Unread messages">0</span>
<span class="team-btn-who hidden" id="team-identity-badge" title="Switch identity"></span>
</button>
</div>
<button type="button" class="btn theme-toggle" id="btn-theme" title="Switch theme" aria-label="Switch light or dark theme">
<svg class="theme-ico theme-ico-to-dark" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
<path fill="currentColor" d="M12 3a9 9 0 1 0 9 9c0-.3 0-.6-.05-.9A7 7 0 0 1 12 3z"/>
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.6"/>
</svg>
<svg class="theme-ico theme-ico-to-light" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
<circle cx="12" cy="12" r="4" fill="currentColor"/>
<path fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
d="M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.1 5.1l1.6 1.6M17.3 17.3l1.6 1.6M18.9 5.1l-1.6 1.6M6.7 17.3l-1.6 1.6"/>
</svg>
</button>
<button type="button" class="btn present-btn" id="btn-present" title="Customer presentation · mid or fullscreen slides">Present</button>
<button type="button" class="btn primary" id="btn-chat">Cockpit Copilot</button>
</div>
@@ -242,15 +260,6 @@
</footer>
</div>
<button type="button" class="theme-fab" id="btn-theme" title="Switch theme" aria-label="Switch light or dark theme">
<svg class="theme-ico theme-ico-moon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<path fill="currentColor" d="M21 14.3A8.5 8.5 0 0 1 9.7 3 7 7 0 1 0 21 14.3z"/>
</svg>
<svg class="theme-ico theme-ico-sun" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<path fill="currentColor" d="M12 4.5a1 1 0 0 1 1 1V7a1 1 0 1 1-2 0V5.5a1 1 0 0 1 1-1zm0 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM5.5 11a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h1.5a1 1 0 0 1 1 1zm15.5 0a1 1 0 0 1-1 1H18.5a1 1 0 1 1 0-2H20a1 1 0 0 1 1 1zM6.7 6.7a1 1 0 0 1 0 1.4L5.6 9.2A1 1 0 1 1 4.2 7.8l1.1-1.1a1 1 0 0 1 1.4 0zm11.6 0a1 1 0 0 1 1.4 0l1.1 1.1a1 1 0 1 1-1.4 1.4l-1.1-1.1a1 1 0 0 1 0-1.4zM12 17a1 1 0 0 1 1 1v1.5a1 1 0 1 1-2 0V18a1 1 0 0 1 1-1zm-5.3.3a1 1 0 0 1 1.4 0l1.1 1.1a1 1 0 1 1-1.4 1.4L6.7 18.7a1 1 0 0 1 0-1.4zm11.6 0a1 1 0 0 1 0 1.4l-1.1 1.1a1 1 0 1 1-1.4-1.4l1.1-1.1a1 1 0 0 1 1.4 0z"/>
</svg>
</button>
<!-- Cockpit chat / Copilot -->
<div class="drawer chat-copilot" id="chat-drawer" aria-hidden="true">
<div class="drawer-head">
@@ -301,19 +310,25 @@
<img src="/dell.png" alt="Dell" height="22" />
<span>ATC Ops desk</span>
</div>
<button type="button" class="btn ghost" id="btn-ops-close">Close</button>
<div class="ops-head-actions">
<button type="button" class="btn team-btn compact" id="btn-ops-open-team" title="Open team chat">Team chat</button>
<button type="button" class="btn ghost" id="btn-ops-close">Close</button>
</div>
</div>
<div class="ops-layout">
<div class="ops-side">
<label class="ops-identity">Acting as
<select id="ops-actor">
<optgroup label="ATC Admins">
<option value="jody">Jody van Dongen · Admin</option>
<option value="laurens">Laurens Rammers · Admin</option>
<optgroup label="Datacenter Engineers">
<option value="jody">Jody van Dongen · DC Engineer</option>
<option value="laurens">Laurens Rammers · DC Engineer</option>
</optgroup>
<optgroup label="Data FDE team">
<option value="mo">Mohamed El Kadi · Data FDE</option>
<option value="bart">Bart Sjerps · Data FDE</option>
<option value="mo">Mohamed El Kadi · Data FDE · "Data Plumbers" 😉</option>
<option value="bart">Bart Sjerps · Data FDE · "Data Plumbers" 😉</option>
</optgroup>
<optgroup label="Other">
<option value="guest">Guest · Visitor</option>
</optgroup>
</select>
</label>
@@ -342,20 +357,20 @@
<div class="ops-main" id="ops-main">
<div class="ops-empty" id="ops-empty">
<h3>ATC Ops desk</h3>
<p class="ops-intro">Select a ticket or create one to collaborate across ATC admins and Data Forward Deployed Engineers.</p>
<p class="ops-intro">Select a ticket or create one to collaborate across Datacenter Engineers and Data Forward Deployed Engineers.</p>
<div class="ops-team-grid" id="ops-team-grid">
<section class="ops-team-card admin">
<h4>ATC Admins</h4>
<h4>Datacenter Engineers</h4>
<ul>
<li><strong>Jody van Dongen</strong><span>OME fleet · racks · warranty / compliance</span></li>
<li><strong>Laurens Rammers</strong><span>Datacenter ops · handoffs · escalation</span></li>
<li><strong>Jody van Dongen</strong><span>Datacenter Engineer · storage · servers · network · rack &amp; stack · installs</span></li>
<li><strong>Laurens Rammers</strong><span>Datacenter Engineer · storage · servers · network · rack &amp; stack · installs</span></li>
</ul>
</section>
<section class="ops-team-card fde">
<h4>Data Forward Deployed Engineers</h4>
<ul>
<li><strong>Mohamed El Kadi</strong><span>Data Forward Deployed Engineer · Cockpit · OpenManage AI</span></li>
<li><strong>Bart Sjerps</strong><span>Data Forward Deployed Engineer · FDE cluster · AI workloads</span></li>
<li><strong>Mohamed El Kadi</strong><span>Data FDE · &quot;Data Plumbers&quot; 😉 · Cockpit · OpenManage AI</span></li>
<li><strong>Bart Sjerps</strong><span>Data FDE · &quot;Data Plumbers&quot; 😉 · FDE cluster · AI workloads</span></li>
</ul>
</section>
</div>
@@ -363,9 +378,10 @@
<h4>Quick actions</h4>
<div class="ops-quick-row">
<button type="button" class="btn primary" data-ops-quick="ticket">New ticket</button>
<button type="button" class="btn" data-ops-quick="to-admin">Handoff to admin</button>
<button type="button" class="btn" data-ops-quick="to-admin">Handoff to DC engineer</button>
<button type="button" class="btn" data-ops-quick="to-fde">Ask FDE / AI cluster</button>
<button type="button" class="btn" data-ops-quick="active">Show active tickets</button>
<button type="button" class="btn" data-ops-quick="team">Team chat</button>
<button type="button" class="btn" data-ops-quick="chat">Open Copilot</button>
<button type="button" class="btn" data-ops-quick="reports">Fleet reports</button>
</div>
@@ -501,6 +517,72 @@
<footer class="drawer-credit">OME Cockpit · Data Forward Deployed Engineers <strong>Mohamed El Kadi</strong> &amp; <strong>Bart Sjerps</strong> · Not an official Dell Technologies product</footer>
</div>
<!-- ATC Team Chat -->
<div class="drawer wide team-drawer" id="team-drawer" aria-hidden="true">
<div class="drawer-head team-head">
<div class="drawer-brand">
<img src="/dell.png" alt="Dell" height="22" />
<div>
<span class="team-title">Team chat</span>
<p class="team-sub">Jody · Laurens · Mo · Bart — messages &amp; files</p>
</div>
</div>
<div class="team-head-actions">
<div id="team-presence" class="team-presence"></div>
<button type="button" class="btn ghost" id="btn-team-switch">Switch identity</button>
<button type="button" class="btn ghost" id="btn-team-close">Close</button>
</div>
</div>
<div class="team-body">
<aside class="team-rail">
<div class="team-room-list" id="team-room-list"></div>
</aside>
<section class="team-chat-main" id="team-chat-main">
<header class="team-chat-head">
<div>
<h2 id="team-chat-title">ATC Team</h2>
<p class="modal-sub" id="team-chat-sub">—</p>
</div>
<span id="team-typing" class="team-typing"></span>
</header>
<div class="team-messages" id="team-messages"></div>
<form class="team-composer" id="team-form">
<label class="team-attach btn ghost compact" title="Attach file">
📎
<input type="file" id="team-file" multiple hidden />
</label>
<input type="text" id="team-input" placeholder="Message the team… (drop files anywhere)" autocomplete="off" maxlength="8000" />
<button type="submit" class="btn primary">Send</button>
</form>
</section>
</div>
<footer class="drawer-credit">OME Cockpit · Data Forward Deployed Engineers <strong>Mohamed El Kadi</strong> &amp; <strong>Bart Sjerps</strong> · Not an official Dell Technologies product</footer>
</div>
<div class="identity-gate hidden" id="identity-gate" aria-hidden="true" role="dialog" aria-labelledby="identity-gate-title">
<div class="identity-gate-card">
<img src="/dell.png" alt="Dell" width="48" height="48" />
<p class="modal-kicker">ATC Cockpit</p>
<h2 id="identity-gate-title">Who are you?</h2>
<p class="modal-sub">Select yourself to continue — Team chat, Ops desk, and handoffs use this identity. Guests welcome.</p>
<div class="identity-gate-grid" id="identity-gate-grid"></div>
<div class="identity-avatar-row" id="identity-avatar-row">
<div class="id-avatar-preview" id="identity-avatar-preview" aria-hidden="true">
<img id="identity-avatar-img" alt="" hidden />
<span id="identity-avatar-initials">?</span>
</div>
<div class="identity-avatar-copy">
<strong id="identity-avatar-label">Profile photo</strong>
<p class="modal-sub">JPG, PNG, WebP or GIF · max 5 MB</p>
</div>
<label class="btn ghost compact" id="identity-avatar-btn">
Upload photo
<input type="file" id="identity-avatar-file" accept="image/jpeg,image/png,image/webp,image/gif" hidden />
</label>
</div>
</div>
</div>
<div class="scrim" id="scrim"></div>
<div class="node-tip hidden" id="node-tip" role="tooltip"></div>
@@ -512,7 +594,7 @@
<div>
<p class="modal-kicker">ATC Ops desk</p>
<h2 id="ticket-modal-title">Create ticket</h2>
<p class="modal-sub">Handoff between ATC admins (Jody / Laurens) and Data FDEs (Mo / Bart)</p>
<p class="modal-sub">Handoff between Datacenter Engineers (Jody / Laurens) and Data FDEs (Mo / Bart)</p>
</div>
</div>
<form id="ticket-form" class="ticket-form">
@@ -530,7 +612,7 @@
</label>
<label>Assign to
<select id="ticket-assignee">
<optgroup label="ATC Admins">
<optgroup label="Datacenter Engineers">
<option value="jody">Jody van Dongen</option>
<option value="laurens">Laurens Rammers</option>
</optgroup>
@@ -538,6 +620,9 @@
<option value="mo">Mohamed El Kadi</option>
<option value="bart">Bart Sjerps</option>
</optgroup>
<optgroup label="Other">
<option value="guest">Guest</option>
</optgroup>
</select>
</label>
</div>
@@ -714,13 +799,14 @@
<script src="/vendor/xterm/xterm.min.js?v=home1"></script>
<script src="/vendor/xterm/xterm-addon-fit.min.js?v=home1"></script>
<script src="/app.js?v=power4"></script>
<script src="/ops.js?v=opsfde2"></script>
<script src="/app.js?v=power5"></script>
<script src="/ops.js?v=opsfde6"></script>
<script src="/ssh.js?v=fabric4"></script>
<script src="/rdp.js?v=fabric4"></script>
<script src="/reports.js?v=anctx1"></script>
<script src="/network.js?v=vlanall1"></script>
<script src="/console.js?v=console2"></script>
<script src="/present.js?v=present17"></script>
<script src="/team.js?v=team6"></script>
<script src="/present.js?v=present20"></script>
</body>
</html>