← graph

wg-html-redesign

wg html: render wg viz ASCII output in monospace + clickable task ids → side panel

Metadata

Statusdone
Assignedagent-1004
Agent identityf51439356729d112a6c404803d88015d5b44832c6c584c62b96732b63c2b0c7e
Modelclaude:sonnet
Created2026-04-28T22:50:58.157820893+00:00
Started2026-04-28T22:58:53.026558994+00:00
Completed2026-04-28T23:39:14.902918248+00:00
Tagsfix,html,viz, eval-scheduled
Eval score0.89
└ blocking impact0.85
└ completeness0.95
└ constraint fidelity0.85
└ coordination overhead0.90
└ correctness0.95
└ downstream usability0.85
└ efficiency0.75
└ intent fidelity0.90
└ style adherence0.90

Description

Description

User feedback: current HTML graph viz is bad. Don't rebuild as SVG. Instead, render the existing wg viz ASCII output verbatim in a monospace font and add clickability + a side inspector. The user has prior ASCII rendering work in ~/graphwork.github.io (asciinema-style) to reference.

User quote: 'we can just render the ascii art with the right font! we already have the ascii cinema work in ~/graphwork.github.io'

User quote (earlier): 'the graph viz is so so so so so bad. could we have wg viz? like the cli type one. and mirror all the clickability in the ui so that all the logs and evaluations and details can be seen? by clicking and getting some expanded window or side inspector that shows us? nothing crazy. simple design. but high impact.'

Spec — minimal

Render

  • Run wg viz (programmatic API, not subprocess if a library entry exists; otherwise subprocess is fine) and capture its output
  • Embed the output inside a <pre> element with appropriate monospace font + line-height. Reference ~/graphwork.github.io for the font + styling treatment they used for the ascii cinema work — pick the same font stack and tab/whitespace handling for consistency
  • ANSI color codes from wg viz (if it produces them) → translate to inline <span style=color:...> so status colors come through. If it produces plain ASCII, that's fine too — render plain.

Clickability

  • Parse the ASCII output to find task identifiers (kebab-case strings that match known task ids in the graph). Wrap each one in a clickable span with a data-task-id attribute.
  • Click a task id → side panel slides in from the right (responsive: below on narrow screens) populated with:
    • Title, status, executor, model, agent
    • Description (markdown rendered as already done elsewhere)
    • Log entries (truncated reasonably)
    • Eval scores / FLIP scores / dimension breakdown if present
    • Dependency task ids as clickable links that update the panel
  • Plain vanilla JS. No framework. No fetch (write all task data inline as JSON in index.html, OR per-task JSON files alongside the html — implementer picks).

Constraints

  • Output stays static + rsync-friendly. Open in any browser, no server.
  • Existing per-task pages from html-graph-view can stay as deeplink targets — the side panel is a faster inline alternative, not a replacement.
  • The ASCII text itself must be selectable (so users can copy task ids out of the rendering).

Reference

  • ~/graphwork.github.io — the user's prior ascii-cinema work. Read its CSS and any embedded ascii rendering for the font/styling treatment.
  • wg viz --help — confirm what flags produce the layered output the user wants visible.

Validation

  • Live smoke: run wg html --all and visually confirm: - The graph area renders the SAME ASCII layout that wg viz produces in the terminal (not a redrawn SVG) - Monospace font, characters align cleanly into the dependency layers - Status colors visible (if wg viz produces ANSI codes that the renderer translates) - Task ids are clickable; clicking opens a side panel with task details - Clicking a dependency link inside the panel updates the panel (not a navigation) - Side panel shows description, logs, eval scores when present - The ASCII is text-selectable for copy-paste
  • Visual treatment matches the spirit of ~/graphwork.github.io (same monospace stack)
  • cargo build + cargo test pass
  • Permanent smoke scenario added with this task id in owners
  • cargo install --path . was run before claiming done

Depends on

Required by

Log