90 lines
4.2 KiB
Markdown
90 lines
4.2 KiB
Markdown
---
|
|
date: 2026-10-19
|
|
pr: pending
|
|
feature: Chat view CYBER pass — single-colour live ring, send-key neon tube, status LED, responsive outline
|
|
impact: 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.
|