cmoriarty/trog

Fork 0

Studio UI top bar cleanup #30

New issue

Closed

opened 2026-07-27 11:51:05 -04:00 by cmoriarty · 2 comments

cmoriarty commented

2026-07-27 11:51:05 -04:00

Owner

Aesthetic pass on the studio top bar (studio/src/App.tsx, studio/src/styles.css).

1. Drop the AEGRA status indicator

Remove the trailing link/link-dot span (label and light) from the header. Its
signal is folded into the new wordmark flame status (task 3), so aegra reachability is
still visible — just not as its own widget. Drop the now-dead .link* CSS with it.

2. Pin the activity label, park the lights on the right

The three dancing pixels (<Pulse />) currently sit before the activity text, so
the label shifts sideways every time it changes width (idle → run · node → seat
names). Move <Pulse /> after the text and give the readout a fixed anchor
(right-align the .activity span / reserve the pulse's width) so the label text never
moves as activity changes.

3. Wordmark flame becomes the system status light

Replace the red ▲ (.wordmark-flame) to the left of trog with a status light with two states:

up — green (reuse the old .link-up green so it reads like the light it replaces)
not up — grey

Health check design

"Up" must mean the system, not just aegra. App.tsx already polls all three backends
on the single status tick, so composing this costs no extra requests:

service	probe	already polled
aegra	`client.assistants.search()` (sets `status.online`)	yes
orchestrator	`GET /orch/health`	yes (result discarded on failure)
brain	`GET /brain/running`	yes (result discarded on failure)

Extend Status with per-service booleans (online stays aegra's), then:

all three OK → green
any down, or still on the first tick (null) → grey

Tooltip on the flame should name what is down (e.g. brain down · orchestrator down) so
the removed AEGRA label loses no information. Grey covers both "down" and "unknown" —
one dim state, no third colour.

Notes

Same-origin fetches, no CORS: /orch and /brain are already proxied by both the
vite dev proxy and the prod nginx conf.
Verify in the browser preview: npm run dev --prefix studio, then check green with
the stack up and grey with a service stopped.

Aesthetic pass on the studio top bar (`studio/src/App.tsx`, `studio/src/styles.css`). ## 1. Drop the AEGRA status indicator Remove the trailing `link`/`link-dot` span (label *and* light) from the header. Its signal is folded into the new wordmark flame status (task 3), so aegra reachability is still visible — just not as its own widget. Drop the now-dead `.link*` CSS with it. ## 2. Pin the activity label, park the lights on the right The three dancing pixels (`<Pulse />`) currently sit **before** the activity text, so the label shifts sideways every time it changes width (`idle` → `run · node` → seat names). Move `<Pulse />` after the text and give the readout a fixed anchor (right-align the `.activity` span / reserve the pulse's width) so the label text never moves as activity changes. ## 3. Wordmark flame becomes the system status light Replace the red `▲` (`.wordmark-flame`) to the left of `trog` with a status light with two states: - **up** — green (reuse the old `.link-up` green so it reads like the light it replaces) - **not up** — grey ### Health check design "Up" must mean *the system*, not just aegra. `App.tsx` already polls all three backends on the single status tick, so composing this costs no extra requests: | service | probe | already polled | |---|---|---| | aegra | `client.assistants.search()` (sets `status.online`) | yes | | orchestrator | `GET /orch/health` | yes (result discarded on failure) | | brain | `GET /brain/running` | yes (result discarded on failure) | Extend `Status` with per-service booleans (`online` stays aegra's), then: - all three OK → green - any down, or still on the first tick (`null`) → grey Tooltip on the flame should name what is down (e.g. `brain down · orchestrator down`) so the removed AEGRA label loses no information. Grey covers both "down" and "unknown" — one dim state, no third colour. ### Notes - Same-origin fetches, no CORS: `/orch` and `/brain` are already proxied by both the vite dev proxy and the prod nginx conf. - Verify in the browser preview: `npm run dev --prefix studio`, then check green with the stack up and grey with a service stopped.

cmoriarty added this to the v1 - single user autonomous milestone

2026-07-27 11:51:05 -04:00

cmoriarty added the

enhancement

label

2026-07-27 11:51:05 -04:00

cmoriarty referenced this issue from a commit

2026-07-27 12:01:15 -04:00

feat: top bar system light replaces the aegra indicator

cmoriarty commented

2026-07-27 12:01:42 -04:00

Author

Owner

Done in 6cacef5.

1. AEGRA indicator gone — the trailing link/link-dot span is removed from the header and the whole .link* block is out of styles.css. No dangling references left in the tree.

2. Pulse parked right — <Pulse /> now renders after the activity text inside the right-pinned .activity span, so the text grows leftward and the lights hold the same pixel. Measured: swapping the readout from idle to swapping brain · qwen3.6-27b · image gen · animate moved the pulse's left edge by 0px (x=1242 both times).

3. Wordmark status light — the red ▲ is replaced by .sys-dot, a 7px pixel square in the wordmark:

green (--green) only when aegra and orchestrator and brain all answered on the same status tick
grey (--ink-faint) when any is down or the first tick hasn't landed — one dim state, no third colour
tooltip / aria-label carries the detail: trog up · aegra · orchestrator · brain when green, orchestrator down (etc., ·-joined) when grey

Status gained orch and brain tri-states; online still means aegra alone. No new requests — snapshot() already fetched /orch/health and /brain/running every tick and simply discarded the result on failure; now it records res.ok.

Verification

check	result
all services up	`sys-dot sys-dot-up`, `rgb(56,183,100)`, title `trog up · aegra · orchestrator · brain`
orchestrator forced to fail (patched `fetch`, one poll tick)	grey `rgb(86,108,134)`, title `orchestrator down`
unpatched	back to green on the next tick

tsc --noEmit and vite build clean. e2e/smoke.spec.ts asserted on .link, so its topbar case was rewritten to assert the green dot and the trog up title — it is now a whole-stack check rather than an aegra-only one; 3/3 smoke tests pass.

Done in 6cacef5. **1. AEGRA indicator gone** — the trailing `link`/`link-dot` span is removed from the header and the whole `.link*` block is out of `styles.css`. No dangling references left in the tree. **2. Pulse parked right** — `<Pulse />` now renders *after* the activity text inside the right-pinned `.activity` span, so the text grows leftward and the lights hold the same pixel. Measured: swapping the readout from `idle` to `swapping brain · qwen3.6-27b · image gen · animate` moved the pulse's left edge by **0px** (x=1242 both times). **3. Wordmark status light** — the red `▲` is replaced by `.sys-dot`, a 7px pixel square in the wordmark: - green (`--green`) only when aegra **and** orchestrator **and** brain all answered on the same status tick - grey (`--ink-faint`) when any is down or the first tick hasn't landed — one dim state, no third colour - tooltip / `aria-label` carries the detail: `trog up · aegra · orchestrator · brain` when green, `orchestrator down` (etc., ` · `-joined) when grey `Status` gained `orch` and `brain` tri-states; `online` still means aegra alone. No new requests — `snapshot()` already fetched `/orch/health` and `/brain/running` every tick and simply discarded the result on failure; now it records `res.ok`. ### Verification | check | result | |---|---| | all services up | `sys-dot sys-dot-up`, `rgb(56,183,100)`, title `trog up · aegra · orchestrator · brain` | | orchestrator forced to fail (patched `fetch`, one poll tick) | grey `rgb(86,108,134)`, title `orchestrator down` | | unpatched | back to green on the next tick | `tsc --noEmit` and `vite build` clean. `e2e/smoke.spec.ts` asserted on `.link`, so its topbar case was rewritten to assert the green dot and the `trog up` title — it is now a whole-stack check rather than an aegra-only one; 3/3 smoke tests pass.

cmoriarty commented

2026-07-27 15:20:55 -04:00

Author

Owner

Closing — all three items shipped in 6cacef5 and confirmed still correct on the live stack today.

What shipped

AEGRA indicator gone. The trailing link/link-dot span left the header and the whole .link* block left the stylesheet; no references remain anywhere in the tree.
Lights parked right of the label. <Pulse /> renders after the activity text inside the right-pinned .activity span, so the text grows leftward and the pixels hold their place.
Wordmark flame became the system light. The red ▲ is now .sys-dot, green when the critical services answer and grey when they don't or haven't yet, with the detail in its tooltip.

Amended afterwards (from #31)

The brain is no longer a criterion for green. Asset generation stops the brain to take its GPUs, so gating on it painted the light grey for every image job — the system working as designed, reported as the system being down. Green now means aegra + orchestrator; the brain's state still rides in the tooltip, e.g. trog up · aegra · orchestrator · brain swapped out for the seats.
The readout gained a warm-but-idle line (idle · image gen warm), shown without animation, so a keep-warm seat is visible without claiming work is happening.

Verified today against the deployed studio

check	result
AEGRA widget	absent (`.link` gone)
system light	`sys-dot sys-dot-up`, `rgb(56,183,100)` = `--green`
tooltip	`trog up · aegra · orchestrator · brain up`
pulse anchoring, 1280×720	left edge at 1242px for `idle`, `image gen`, `idle · image gen warm`, and `swapping brain · qwen3.6-27b · image gen · animate` — no movement
pulse anchoring, 860×720	822px, 822px, 823px — fixed to within sub-pixel rounding
smoke suite vs :2027	3/3 pass (its topbar case now asserts the green dot and the `trog up` tooltip)

One measurement worth recording: below ~1280px the page scrolls horizontally, but the top bar is not the cause — at 1024px body.scrollWidth is 1280 while the header's own scrollWidth equals its client width. That floor comes from the dock panes and predates this ticket, so it stays out of scope here.

Working tree clean, CI green for HEAD, 147 unit tests and tsc --noEmit passing.

Closing — all three items shipped in 6cacef5 and confirmed still correct on the live stack today. ## What shipped 1. **AEGRA indicator gone.** The trailing `link`/`link-dot` span left the header and the whole `.link*` block left the stylesheet; no references remain anywhere in the tree. 2. **Lights parked right of the label.** `<Pulse />` renders after the activity text inside the right-pinned `.activity` span, so the text grows leftward and the pixels hold their place. 3. **Wordmark flame became the system light.** The red `▲` is now `.sys-dot`, green when the critical services answer and grey when they don't or haven't yet, with the detail in its tooltip. ## Amended afterwards (from #31) - **The brain is no longer a criterion for green.** Asset generation *stops* the brain to take its GPUs, so gating on it painted the light grey for every image job — the system working as designed, reported as the system being down. Green now means aegra + orchestrator; the brain's state still rides in the tooltip, e.g. `trog up · aegra · orchestrator · brain swapped out for the seats`. - The readout gained a **warm-but-idle line** (`idle · image gen warm`), shown without animation, so a keep-warm seat is visible without claiming work is happening. ## Verified today against the deployed studio | check | result | |---|---| | AEGRA widget | absent (`.link` gone) | | system light | `sys-dot sys-dot-up`, `rgb(56,183,100)` = `--green` | | tooltip | `trog up · aegra · orchestrator · brain up` | | pulse anchoring, 1280×720 | left edge at 1242px for `idle`, `image gen`, `idle · image gen warm`, and `swapping brain · qwen3.6-27b · image gen · animate` — **no movement** | | pulse anchoring, 860×720 | 822px, 822px, 823px — fixed to within sub-pixel rounding | | smoke suite vs :2027 | 3/3 pass (its topbar case now asserts the green dot and the `trog up` tooltip) | One measurement worth recording: below ~1280px the page scrolls horizontally, but the top bar is not the cause — at 1024px `body.scrollWidth` is 1280 while the header's own `scrollWidth` equals its client width. That floor comes from the dock panes and predates this ticket, so it stays out of scope here. Working tree clean, CI green for HEAD, 147 unit tests and `tsc --noEmit` passing.

cmoriarty closed this issue

2026-07-27 15:20:56 -04:00