dashboard: terminal compose with @-mention sticky recipient

new section under MESS4GE FL0W. msgflow already tails only
broker traffic (sent + delivered), which is exactly the
'messages through core' view the operator wants; no
per-agent thinking leaks through. compose box below:

- a prompt span renders the sticky recipient ('@coder>'),
  rendered outside the textarea so it can't be edited
  inadvertently. on submit the recipient gets persisted to
  localStorage so it survives reload.
- start the input with '@name body' to redirect — the parser
  splits at the first whitespace and the new recipient
  becomes sticky.
- typing '@' at the start opens a completion dropdown over
  the textarea pulled from window.__hyperhive_state.containers;
  arrow keys cycle, tab/enter selects, escape closes. clicking
  works too.
- manager swap: agents flagged is_manager are surfaced as
  '@manager' (the broker's recipient string) instead of
  '@hm1nd' (the container name), so the message actually
  routes to the manager's inbox.

backend: new POST /op-send accepts {to, body} and drops a
broker.send({from:'operator', to, body}) — same shape as the
per-agent web UI's OperatorMsg, but lets the operator choose
the recipient explicitly from the main dashboard.
This commit is contained in:
müde 2026-05-16 01:55:00 +02:00
parent 2a6d084718
commit 5208b0112a
4 changed files with 278 additions and 1 deletions

View file

@ -475,6 +475,63 @@ summary:hover { color: var(--purple); }
.msg-sep { color: var(--muted); }
.msg-to { color: var(--pink); }
.msg-body { color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.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;
}
.op-compose-prompt {
color: var(--purple);
text-shadow: 0 0 4px currentColor;
font-weight: bold;
white-space: nowrap;
user-select: none;
padding-top: 0.15em;
}
.op-compose-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--fg);
font: inherit;
font-size: 0.85em;
line-height: 1.5;
resize: none;
overflow: hidden;
min-height: 1.5em;
caret-color: var(--purple);
}
.op-compose-input::placeholder { color: var(--muted); }
.op-compose-suggest {
position: absolute;
bottom: 100%;
left: 0.8em;
margin-bottom: 0.2em;
background: rgba(24, 24, 37, 0.95);
border: 1px solid var(--border);
font-size: 0.85em;
min-width: 12em;
max-height: 12em;
overflow-y: auto;
z-index: 10;
}
.op-compose-suggest .item {
padding: 0.2em 0.8em;
cursor: pointer;
color: var(--fg);
}
.op-compose-suggest .item.active,
.op-compose-suggest .item:hover {
background: rgba(203, 166, 247, 0.18);
color: var(--purple);
}
footer {
margin-top: 4em;
text-align: center;