F1 component kit/Utilities/JSON / payload viewerDesktop

JSON / payload viewer

Missing · new35 · json-viewer

Failed jobs, payload audits and replays: pretty JSON with collapse, wrap and copy, UTC times annotated in your zone, the raw unredacted payload for those allowed (Q9c), and the show-once secret (API key) with reveal and copy.

Covers: M11. Exports: JsonViewer.

Whole page:Phone is fixed at comfortable (POWERUPS #15).Laravel · navyDTC · midnight green

Anatomy

The component as it sits in the product: English, compact, real data shapes.

failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
Phone: always wrapped, no horizontal scroll.

States

6 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

expanded
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
Phone: always wrapped, no horizontal scroll.
collapsed
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": { … 14 keys },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
Phone: always wrapped, no horizontal scroll.
wrapped
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
Phone: always wrapped, no horizontal scroll.
show-once secret
Copy this key nowIt is shown once. After you close this panel only its last 4 characters remain.
api-keys.store · show onceCopyReveal
{ "name": "Shanghai print agent",
  "token": ••••••••••••••••••••••••••••a7Q2 }
Phone: always wrapped, no horizontal scroll.
loading
…
                    
                                  
                            
                                        
Phone: always wrapped, no horizontal scroll.
not decodable

Payload couldn’t be decoded

The decoder answered 422: not valid JSON. The raw text is below.

O:23:"App\Jobs\SendWechat"…
Phone: always wrapped, no horizontal scroll.

Density

The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.

comfortable · phone default
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
Phone: always wrapped, no horizontal scroll.

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

en
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
Phone: always wrapped, no horizontal scroll.
中文 · lang=zh-Hans
failed-jobs.show · 原始未脱敏（Q9c）换行全部折叠复制
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
手机：始终换行，无横向滚动。

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds with 0 bytes received (see https://curl.haxx.se/libcurl/c/libcurl-errors.html) for https://print-agent.internal.example/api/v2/jobs/7781/dispatch?retry=3&group=4522-1-2-3"
}
Phone: always wrapped, no horizontal scroll.
permission denied

Not available to your role

Your role is missing view failed jobs. Nothing here is hidden by mistake: the server sends only what you can do.

Phone: always wrapped, no horizontal scroll.

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export
JsonViewer · @rj/admin-kit
Props
value · collapsedDepth · wrap · maskKeys · annotateTimes
States
expanded · collapsed · wrapped · masked · loading · error
shadcn / Radix
Collapsible + Button (copy)
Package underneath
react-json-view-lite (CodeMirror only if search / edit is needed)
Accessibility
tree with aria-expanded per node; Copy announces
API operations
admin.failed-jobs.show · admin.orders.payload-audits.decoded · admin.replays.show · admin.api-request-logs.index · admin.api-keys.store (show once)
Phone variant
always wrapped