hermes-desktop/docs/chat-chain-changes/2026-10-19-chat-cyber-skeleton-pass.md

date, pr, feature, impact

date	pr	feature	impact
2026-10-19	pending	Chat view CYBER pass — single-colour live ring, send-key neon tube, status LED, responsive outline	The chat chain's "machine is working" indicator is now a single lime pulse instead of a six-colour cycle, the send key renders as a neon tube with the standard sweep instead of a flat grey block, the header carries a connection LED and a cyan press-light, and the Outline panel becomes an overlay at ≤1180px. Rendering-layer only — no store logic, no `/chat-run` payload, no markup semantics beyond one decorative status span, no event wiring changed.

Chat view CYBER pass

Follow-up to 2026-10-19-three-colour-semantics.md. That change split the palette by meaning but left several call sites hardcoded, and the chat view was still missing the page-level treatment the rest of the app had.

rainbow-glow collapsed into one keyframe

Three components each carried their own copy of a 44-line rainbow-glow keyframes block and cycled #ff6b6b → #feca57 → #48dbfb → #ff9ff3 → #54a0ff → #5f27cd. Four semantic hues flashing in one animation means the indicator carries no meaning at all — which is exactly what the three-colour rule exists to prevent.

live-ring is now defined once in global.scss and pulses --success (lime) between a dim and a bright ring. All three call sites use it:

• MessageItem.vue — .speech-playing on the message bubble
• SessionListItem.vue — .streaming ring on the agent logo
• GroupMessageItem.vue — .speech-playing on the group-chat bubble

All three are "the machine is doing something right now", which is one meaning, so they share one colour and one animation.

Send key

ChatInput.vue had border: 0 !important and box-shadow: none !important on .send-button, which erased the neon tube that global.scss gives every .arco-btn-primary. The disabled state was also a solid #9f9f9f block — a hardcoded grey outside the palette. Both are gone; the button now inherits the global tube + neon-sheen sweep and uses the standard dimmed-tube disabled treatment.

Added .send-button--stop: while a run is streaming, the same button becomes the stop control, which is a "needs you" action rather than a "system" action, so it turns amber — the same semantic the approval card uses.

Status LED

New .cy-led in global.scss: a 7px dot, lime with a glow and a slow breathe when connected, red and static when not. A dead connection should not look like it is still doing work, so the breathe animation only runs in the connected state. Bound to appStore.connected in the chat header, reusing the existing sidebar.connected / sidebar.disconnected strings.

Session list current item

.session-item.active already had the soft cyan fill; the prototype's defining feature is the 2px glowing left bar. Added via inset box-shadow rather than border-left, which would have shifted the row's content by 2px.

Header press-light

.chat-header gets a radial-gradient cyan wash from the top edge. Radial, not linear — a linear gradient lights the whole strip evenly and loses the "pressed from above" quality.

Responsive

Verified the real implementation had only the 768px tier. Added the one tier that was genuinely missing:

• ≤1180px — OutlinePanel becomes a position: absolute overlay. Below this width the message stream, Outline and tool panel cannot coexist as three columns; the header's Outline button already toggles it, so no extra close control is needed. Below 768px it keeps its existing narrower width.
• ≤900px — the workspace badge hides. The session sidebar deliberately does not hide at this width: it is controlled by the header toggle, and removing the column would leave no way to open it.

Not implemented

Three items in the tracking doc were already done by 2026-10-19-three-colour-semantics.md and are recorded there, not repeated here: bubble role colours (cyan right edge on user, lime left edge on assistant), the approval card's amber zone, and the three-segment context meter.

Verification

npm run harness:check, npm run test and npm run build pass. The LED, the send key's enabled/disabled/stop states, the active session row, and both new breakpoints were checked in a browser.