McRitchie Studio

← All Tasks

Sizing

Pretty JSON wider drawer

Archived

pretty-json-wider-drawer

Created

Jul 01, 15:02

Started

Jul 01, 15:04

Completed

Jul 01, 15:46

DevOps handoff

Type

Feature

Shape

ui-only

Worktree Slug

pretty-json-wider-drawer

Repositories

mcritchie-studio

Release Slug

—

Branch

feat/pretty-json-wider-drawer

Pull Request

https://github.com/amcritchie/mcritchie-studio/pull/315

Local URL

http://localhost:3049/alex/heartbeat

QA URL

—

Production URL

—

Acceptance Criteria

Drawer INPUT and OUTPUT render as formatted JSON
Escaped newlines render as real line breaks
Drawer width roughly doubled for readability
Non-JSON payloads still render safely

Expected Test Plan

unit
integration

Checks Run

[unit] heartbeat_pretty_json indents JSON + real newlines
[unit] heartbeat_pretty_json returns non-JSON/blank untouched
[component] per-action drawer pretty-prints JSON input
[component] per-action drawer renders non-JSON output raw
[suite] full-suite-check green (2343 runs, 0 failures); rubocop clean
[full-suite@1cc7e134d885068a132419c934f6e28284d826bd] bin/rails test green
[rubocop@1cc7e134d885068a132419c934f6e28284d826bd] bin/rubocop clean

Agent Context

In the /alex/heartbeat drill-down drawer (click an action → drawer shows INPUT and OUTPUT), the tool input/output currently render as a raw ESCAPED JSON string (e.g. {"type":"text","file":{...,"content":"<%# ...\n ..."}}). Make them PRETTY: parse the JSON and render formatted (2-space indent, real newlines instead of \n, keys/values readable) inside a monospace <pre> that wraps/scrolls. If a payload is not valid JSON, fall back to the raw string safely (never error). ALSO double the drawer/slide-over WIDTH so the formatted JSON is easy to read (find the current drawer width class/style and ~2x it; keep it capped so it doesn't cover the whole viewport). This is view-only — do NOT touch the controller data or the aggregation (a sibling backend task is populating tokens/cost in parallel; the Tokens/Cost drawer ROWS already exist, leave them). Mind Alpine/Tailwind gotchas (x-data double-quotes, x-show owns display). Files: app/views/heartbeat/_drawer.html.erb, _event_drawer.html.erb, and the drawer width (likely a Tailwind width class in show.html.erb or the partial, or app/assets app.css). Pretty-printing can be server-side (JSON.pretty_generate in a helper) or client-side (Alpine) — prefer server-side helper for testability. Tests: component/integration asserting the drawer renders indented JSON + real newlines for a JSON payload and raw text for a non-JSON payload. Part of narrated-events epic — project_opsd_learning_layer.

Stage Timeline

Who handled each stage, the time it took (measured), and the model / tokens / cost reported (best-effort) — plus who's on it right now. — means the agent didn't report that metric.

Sizing Avi · PO SMALL Dev SMALL Actual LARGE ≠ forecast

Created → Designed

C
Caterpie

Model

—

Duration

—

Tokens

—

Cost

—

Completed Jul 01, 15:02 · 7 days ago

api
Designed → Building

C
Caterpie

Model

claude-opus-4-8

Duration

2 minutes

Tokens

3,680,099

Cost

~$7.13

Started Jul 01, 15:02

Completed Jul 01, 15:04 · 7 days ago

cli
Building → Submitted

C
Caterpie

Model

claude-opus-4-8

Duration

15 minutes

Tokens

—

Cost

—

Started Jul 01, 15:04

Completed Jul 01, 15:19 · 7 days ago

cli
Submitted → Reviewed Review Activity

S
Shannon primary

J
Jasper light

Model

claude-opus-4-8

Duration

1 minute

Tokens

806,529

Cost

~$0.52

Started Jul 01, 15:19

Completed Jul 01, 15:20 · 7 days ago

cli
Reviewed → Assembled

S
Steffon

Model

claude-opus-4-8

Duration

under a minute

Tokens

813,753

Cost

~$0.55

Started Jul 01, 15:20

Completed Jul 01, 15:20 · 7 days ago
Assembled → Shipped

A
Avi

Model

claude-opus-4-8

Duration

25 minutes

Tokens

7,865,972

Cost

~$5.03

Started Jul 01, 15:20

Completed Jul 01, 15:46 · 7 days ago
Shipped → Archived

—

Model

—

Duration

2 days

Tokens

—

Cost

—

Started Jul 01, 15:46

Completed Jul 04, 03:23 · 4 days ago