Visual Concepts & Before/After Renders

Faithful HTML recreations of the installed shell and proposed interaction variants

These are executable HTML concept renders, not generic wireframes. They mirror the current four-column shell—48px rail, 280–300px left drawer, central mounted Chat, and 280–320px Campaign drawer—using the same dark panels, lavender accent, bordered cards and compact typography visible in the installed widget.

Current vs proposed drawer

Current Notes drawer
N
Notes

Agent tools · always tied to current game

Notes

Nagato can save these during chat.

Topic
Details
Kind
Note ▾
OBJECTIVE
Investigate the floating crystal
Saved cards begin far below the fold.
TidesOfNumenera (TidesOfNumenera.exe)
Sync my current journal with campaign context.
NAGATO
I'll reconcile your current objective and TODOs.
Proposed live viewer
N
Notes

Agent tools · always tied to current game

Notes
All ▾Status ▾
Search cards…
OBJECTIVE
Dracogen's Price
Active main quest
TODO · BLOCKED
Broken Hearts
Tybir may not be in party.
GUIDE
The Bloom route
TidesOfNumenera (TidesOfNumenera.exe)
Sync my current journal with campaign context.
NAGATO
I'll reconcile your current objective and TODOs.
The + button replaces Research/Memory refresh and appears identically in Notes. It inserts an editable typed prompt; cards update live via revisions.

Three trace disclosure variants

A · Inline tail (recommended)

Nagato worked · 4 steps ⌄
◌ reasoning summary available
✓ gtc_search — Severed Child 2413
✓ gtc_scrape — Steam guide
● reconciling campaign records…

Closest to Hermes Desktop: always visible, four fading lines, expands under the bubble.

B · Compact pill

NAGATO
The 2413 sequence begins after…
⌁ 4 tool steps · reasoning available ⌄

Lowest visual weight, but hides useful progress while running.

C · Side inspector

AnswerTrace ●Sources 3
gtc_scrape
Raw · Parsed · Explain
campaign reconciliation
2 validated actions

Best for deep inspection, but awkward in narrow Game Bar widths. Use as expanded destination, not default.

Recommended combined behavior

Use A as the per-message default. Clicking a tool row opens C as an overlay/detail surface with Raw, Parsed and Generated explanation tabs. Use B only on very narrow widths.

Recall card detail concept

14 / 388 Follow latest ○
SAVED · MANUAL
Zerian's Mere — dialogue vignette
qwen3-vl:4b · full-frame preview · selection remains on entry ID during refresh

Responsive rules