← graph

wg-html-resizable

wg html: resizable inspector panel — click-drag the edge, persist width across reloads

Metadata

Statusdone
Assignedagent-1301
Agent identityf51439356729d112a6c404803d88015d5b44832c6c584c62b96732b63c2b0c7e
Created2026-04-30T20:25:12.401339374+00:00
Started2026-04-30T20:25:37.476060801+00:00
Completed2026-04-30T20:37:45.339723197+00:00
Tagsfix,html,viz,polish,interactivity, eval-scheduled
Eval score0.84
└ blocking impact0.90
└ completeness0.88
└ constraint fidelity0.25
└ coordination overhead0.85
└ correctness0.85
└ downstream usability0.80
└ efficiency0.76
└ intent fidelity0.84
└ style adherence0.85

Description

Description

The wg html inspector side panel (introduced in wg-html-v2) opens at a fixed width when a task is clicked. User wants it resizable: drag the edge to make it larger or smaller. Persist the chosen width via localStorage so the user's preference survives page reloads.

User quote 2026-04-30: 'make it possible to click and drag the edge of the inspector to make it larger or smaller when it's open, and then to have that kind of be stashed in the page as long as it's open. It's kind of user dependent. I just want to make it so it's a bit more interactive in general, in terms of UI. Frankly, what's there is wonderful. So don't stress about it.'

Spec

Drag handle

  • The left edge of the inspector panel (when on the right) becomes a drag handle
  • Visual: subtle vertical bar / cursor changes to col-resize on hover
  • Drag direction: horizontal — moves the panel's left edge
  • Min width: ~250px (don't let it shrink so small the content is unusable)
  • Max width: ~80% of viewport (don't let it cover everything)
  • On narrow viewports where panel is below: the TOP edge becomes the drag handle, drag is vertical

Persistence

  • localStorage key: wg-html-inspector-width-px (or similar) — store the user's chosen width
  • On panel open: read localStorage value, apply if present + within min/max bounds
  • On drag end: save the new width
  • localStorage scoped to the origin (so different deployed wg html mirrors don't share state, which is the right default)

Smooth interaction

  • Use plain CSS resize handle OR a tiny vanilla-JS resize-on-pointerdown handler
  • No frameworks; this is in spirit with wg-html's no-runtime-deps stance
  • Drag should feel responsive — update width on pointermove, not just pointerup

Validation

  • Failing test or repro: open html, click a task to open inspector. Pre-fix: panel is fixed-width. Post-fix: drag handle visible on the panel edge, drag works smoothly.
  • Width persists across page reload (verify by dragging, reloading, checking it stayed)
  • Min/max bounds enforced (try to drag past either; panel stops)
  • No regression of other inspector behavior (open/close, navigation, theme, etc.)
  • Works in dark + light themes
  • No JS framework added (still vanilla); no runtime fetch
  • cargo build + cargo test pass
  • cargo install --path . was run before claiming done

Process note

User signaled this is polish, not urgent — 'don't stress about it.' Future interactivity tasks (drag-to-rearrange, keyboard shortcuts within panel, etc.) can be filed separately if/when the user has specific needs. This single task captures the immediate ask.

Depends on

Required by

Log