6e670c8a72
Without a viewport meta tag, some browsers (notably Firefox with Fingerprinting Protection active) internally read screen.availWidth / screen.availHeight to compute the default viewport size, producing the console warning 'Fingerprinting Protection is altering screen.availWidth and screen.availHeight'. Fix: - Add <meta name="viewport" content="width=device-width, initial-scale=1"> to all five pages that were missing it (dashboard index/flow/logs, agent index/stats). screen.html already had it. - Replace window.innerWidth with document.documentElement.clientWidth in the side-panel drag-resize code in common.js. clientWidth returns the actual CSS layout viewport width and is not rounded by Firefox's Fingerprinting Protection, making the drag calculation correct even with privacy.resistFingerprinting enabled.
86 lines
3.7 KiB
HTML
86 lines
3.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>hyperhive // FL0W</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<link rel="stylesheet" href="/static/common.css">
|
|
<link rel="stylesheet" href="/static/flow.css">
|
|
</head>
|
|
<body class="flow-shell">
|
|
|
|
<!-- Minimal chrome: just a back link. No full tabbar — the main
|
|
dashboard already has the tab strip. The flow page is a
|
|
dedicated full-viewport terminal surface; navigating back
|
|
is the only chrome needed. -->
|
|
<header class="logs-header">
|
|
<a class="logs-back" href="/">← dashboard</a>
|
|
<span class="logs-title">FL0W</span>
|
|
</header>
|
|
|
|
<!-- Operator inbox flyout trigger — count + click → side panel
|
|
(singleton, declared below). Hidden until the inbox is non-
|
|
empty. Mirrors the agent page's header pill pattern. -->
|
|
<button type="button" id="inbox-pill" class="flow-pill" hidden
|
|
title="open operator inbox">
|
|
<span class="flow-pill-icon" aria-hidden="true">📬</span>
|
|
<span class="flow-pill-label">inbox</span>
|
|
<span class="flow-pill-count" id="inbox-pill-count">0</span>
|
|
</button>
|
|
|
|
<!-- Main content: the full-viewport terminal. Padded for the
|
|
overlay header + composer so the first/last rows stay
|
|
reachable. -->
|
|
<main class="flow-main flow-main-slim">
|
|
<div class="terminal-wrap">
|
|
<div id="msgflow" class="live terminal"><div class="meta">connecting…</div></div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Fixed-overlay composer at the bottom. Same frosted treatment
|
|
as the header — symmetric framing, terminal goes edge-to-edge
|
|
between them. -->
|
|
<footer class="flow-composer">
|
|
<div id="op-compose" class="op-compose">
|
|
<span id="op-compose-prompt" class="op-compose-prompt">@—></span>
|
|
<textarea id="op-compose-input" class="op-compose-input"
|
|
placeholder="@agent message… (enter sends, shift+enter newline, tab completes @-mention)"
|
|
rows="1" autocomplete="off"></textarea>
|
|
<div id="op-compose-suggest" class="op-compose-suggest" hidden></div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Inbox rendered offscreen — kept in the DOM so flow.js's
|
|
renderInbox keeps working unchanged. The pill click handler
|
|
opens the side panel which displays a clone of the list. The
|
|
legacy section heading would otherwise be visible; hidden
|
|
here. -->
|
|
<div id="inbox-section" class="flow-inbox-headless" hidden>
|
|
<p class="meta">loading…</p>
|
|
</div>
|
|
|
|
<!-- Slide-in side panel. Singleton — JS swaps the title + body
|
|
and toggles `.open`. On this page only used to surface the
|
|
operator inbox flyout; the dashboard's other panel uses
|
|
(approval diffs, file previews, logs) don't apply here. -->
|
|
<div id="side-panel" class="side-panel" aria-hidden="true">
|
|
<div class="side-panel-backdrop" id="side-panel-backdrop"></div>
|
|
<aside class="side-panel-drawer" role="dialog" aria-modal="true"
|
|
aria-labelledby="side-panel-title">
|
|
<header class="side-panel-head">
|
|
<span class="side-panel-title" id="side-panel-title"></span>
|
|
<button type="button" class="side-panel-close" id="side-panel-close"
|
|
title="close (esc)">✕</button>
|
|
</header>
|
|
<div class="side-panel-body" id="side-panel-body"></div>
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- Flow-specific bundle. Contains the broker terminal init, the
|
|
operator-inbox derived store, the inbox pill flyout, and the
|
|
@-mention composer. Tab renderers etc. live in
|
|
`/static/tabs.js` which /flow.html doesn't load. -->
|
|
<script type="module" src="/static/flow.js" defer></script>
|
|
</body>
|
|
</html>
|