dashboard: msgflow uses shared terminal + backfill via /messages/history

This commit is contained in:
müde 2026-05-17 11:56:29 +02:00
parent f27108aecf
commit 8c186d4fb7
5 changed files with 116 additions and 72 deletions

View file

@ -537,43 +537,28 @@ summary:hover { color: var(--purple); }
.inbox .msg-from { color: var(--amber); }
.inbox .msg-sep { color: var(--muted); }
.inbox .msg-body { color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.msgflow {
background: rgba(24, 24, 37, 0.78);
-webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%);
border: 1px solid var(--border);
padding: 0.8em;
font-size: 0.85em;
line-height: 1.5;
max-height: 32em;
overflow-y: auto;
}
.msgflow .msgrow {
animation: row-fade-in 220ms ease-out both;
}
@keyframes row-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.msgrow { display: grid; grid-template-columns: auto auto auto auto auto 1fr; gap: 0.6em; align-items: baseline; padding: 0.1em 0; }
.msgrow.sent .msg-arrow { color: var(--cyan); }
.msgrow.delivered .msg-arrow { color: var(--green); }
/* `#msgflow` is a shared `.live` pane inside `.terminal-wrap` (see
hive-fr0nt::TERMINAL_CSS). The msgrow / msg-* rules below are
dashboard-specific: each broker event becomes a grid of timestamp +
arrow + from/sep/to + body inside the `.row` shell. */
.live .msgrow { display: grid; grid-template-columns: auto auto auto auto auto 1fr; gap: 0.6em; align-items: baseline; padding: 0.1em 0; }
.live .msgrow.sent .msg-arrow { color: var(--cyan); }
.live .msgrow.delivered .msg-arrow { color: var(--green); }
.msg-ts { color: var(--muted); font-size: 0.85em; }
.msg-arrow { font-weight: bold; }
.msg-from { color: var(--amber); }
.msg-sep { color: var(--muted); }
.msg-to { color: var(--pink); }
.msg-body { color: var(--fg); white-space: pre-wrap; word-break: break-word; }
/* Compose box sits inside `.terminal-wrap`, below the `.live` log. The
dashed separator mirrors the agent terminal's prompt divider. */
.op-compose {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.6em;
margin-top: 0.4em;
padding: 0.55em 0.8em;
background: rgba(24, 24, 37, 0.85);
border: 1px solid var(--border);
border-top: none;
border-top: 1px dashed var(--purple-dim);
}
.op-compose-prompt {
color: var(--purple);