NodeBench UI planning artifact

From dashboard cards to context graph workflow.

A high-fidelity change plan for turning first-run NodeBench into a product that starts with a real-world context, organizes every note under the right root, runs research in the background, and returns durable reports, claims, sources, notebooks, graph edges, and exports.

Mobile first Capture, query, lock the phone, come back to a saved report.
Laptop deep work Audit claims, edit notebooks, traverse entities, export packets.
Parity lane Capture route -> decompose -> verify -> iterate -> export ui_kit.
1. Product hierarchy

Everything starts from a context root.

NodeBench is not a flat chat log. The product should expose the typed memory graph directly: events, companies, people, products, claims, sources, notebooks, reports, and exports.

Workspace / User / Team

  • Owner-scoped memory
  • Private notes by default
  • Shared public corpus only when explicit
  • Search budget and approval policy

Context Roots

  • Event: Ship Demo Day, school visit, conference
  • Company: Orbital Labs, Mercury, Brex
  • Person: Alex from Orbital Labs
  • Product/topic: voice-agent eval infra
  • Location/date: today, campus, relocation district

Durable Outputs

  • Report and workspace
  • Notebook sections
  • Sources and claim audit
  • Graph map and edge evidence
  • CRM, Notes, Notion, Linear exports

Event Governs

  • Notes, screenshots, voice memos
  • People met and companies mentioned
  • Field-note claims and follow-ups
  • Post-event memo and event corpus

Company Governs

  • People, products, investors
  • Buyers, sellers, partners, competitors
  • Reports, prior chats, event mentions
  • Risks, public signals, watchlist refreshes

Person Governs

  • Current and past affiliations
  • Public footprint and identity evidence
  • Collaborators and relationship context
  • Claims made and meeting follow-ups

Product Governs

  • Maker company and adjacent companies
  • Buyers, sellers, channels, use cases
  • Competitors and market cluster
  • Evidence-backed product claims

Claims Attach To Everything

  • Claim -> entity
  • Claim -> source evidence
  • Claim -> verification state
  • Claim -> graph edge reason

Edges Must Explain Themselves

  • Person works at company
  • Company builds product
  • Product competes with product
  • Source supports or contradicts claim
2. Current screens

Fresh local screenshots from the current app.

These images were captured from `http://127.0.0.1:4186` on 2026-05-02 after restarting the local frontend. They are evidence for what the plan is changing.

Current Home - desktop

current
Current NodeBench Home desktop screenshot

Direction is right: first-impression prompts exist. Target should make the context root and persistence contract even more explicit.

Current Reports - desktop

current
Current NodeBench Reports desktop screenshot

Pipeline panels are present. Target should frame them as one job: start work, monitor run, inspect quality, export packet.

Current Chat - desktop

current
Current NodeBench Chat desktop screenshot

Chat is the universal ask surface. Target should make every answer show target root, source scope, and output destination.

Current Inbox - desktop

current
Current NodeBench Inbox desktop screenshot

Inbox should become the one-list triage surface for captures, confirmations, alerts, and nudges.

Current Me - desktop

current
Current NodeBench Me desktop screenshot

Me should stay focused on preferences, privacy, watched entities, and personal memory boundaries.

Mobile Home

current
Current NodeBench Home mobile screenshot

Target should prioritize one query, one active context, one async status.

Mobile Reports

current
Current NodeBench Reports mobile screenshot

Mobile pipeline parity exists. Target should reduce it to capture -> run -> status -> open report.

Mobile Chat

current
Current NodeBench Chat mobile screenshot

Target should treat chat as a bottom-sheet tool over a context root, not a destination that loses the report.

Mobile Inbox

current
Current NodeBench Inbox mobile screenshot

Target should compress this into capture review, confirmations, and follow-ups.

Mobile Me

current
Current NodeBench Me mobile screenshot

Target should expose privacy, budgets, watched entities, and export defaults without crowding capture flows.

3. Target screens

Proposed high-fidelity product states.

These are HTML mockups inside this planning artifact. They define the intended product shape before any React implementation work.

Target Home - immediate relevance

laptop
NNodeBench AI
Home Reports Chat Inbox Me
Start here

Get the read before you walk in.

Ask about a school, principal, person, company, product, event, or meeting. NodeBench saves the work to a durable context root.

Research Lincoln High and Principal Maya Ortiz before I decide whether to transfer there.

Active context

Relocation research -> Lincoln High -> school culture read

Continues if laptop sleepsserver run
Saves to Reportsauto
Sources and claims trackedrequired
Export readyNotes, Notion, CSV

The first viewport should answer: what can I ask, where will it go, and can I leave while it runs?

Target Reports - async workbench

laptop
NReports
Start Runs Quality Refresh

Start research

One job. Pick context, depth, destination, and budget.

Compare Mercury vs Brex for a banker prep memo.

Running now

Memory search complete0.4s
Entity resolution: Mercury, Brexok
Public refresh queueddeep
Report update streaming42%

Quality gate

Claims: 18 total, 12 verified, 4 needs review, 2 unsupported.

Verdictneeds_review
Brier0.13
Exportpreview first

Reports should expose the whole loop: run, status, quality, evidence, export.

Target mobile capture

phone
NCapture
Ship Demo Day

One input. Routed automatically.

Met Alex from Orbital Labs. Voice-agent eval infra. Wants healthcare design partners.

Detected

Person: Alexnew
Company: Orbital Labsmatch
Claim: healthcare partnersfield

Saved to Ship Demo Day

Private note. 0 paid calls. Enrichment can run later from Reports.

Mobile should not make users choose tables or tabs before saving a field note.

Target entity card

phone
NOrbital Labs
Company

Voice-agent eval infra

Seen in Ship Demo Day. 3 field notes, 5 public sources, 2 follow-ups.

Claims

Builds voice-agent evaluation toolingverified
Seeking healthcare design partnersfield
Cheaper than VectorDockunsupported

Edges

Alex -> Orbital Labs. Orbital Labs -> voice-agent eval. Healthcare buyers -> design partner target.

Entity cards should show claims, changes, contradictions, and edge evidence directly.

Target export handoff

phone
NExport
Preview

Export Ship Demo Day

Choose what leaves NodeBench. Private captures stay excluded unless explicitly selected.

Included

Public company researchon
Verified claims onlyon
Private field notesoff

Exports need a human review gate and a visible private/public boundary.

Target Workspace - event root governs everything

laptop
NShip Demo Day Workspace
Brief Cards Notebook Sources Chat Map

Event root

April 30, 2026. 14 captures, 9 companies, 22 claims, 6 follow-ups.

Public corpusshared
Private notesexcluded

Brief

Strongest follow-up: Orbital Labs because healthcare partner ask matches prior watchlist and claim evidence is specific enough to verify.

3 companies in voice-agent infracluster
5 partner claims need verificationreview
2 exports readydraft

Graph edge evidence

Alex -> Orbitalfield note
Orbital -> Healthcareclaim
VectorDock -> GPU schedulingsource
Northstar -> Benchlingneeds review

Workspace is where the infinite-depth experience belongs: brief, cards, notebook, sources, chat, map.

4. Change plan

Side-by-side product decisions.

These cards translate the mockups into implementation intent without asking the implementer to guess.

Home

CurrentScenario prompts exist, but the hierarchy can still read as a dashboard plus cards.
TargetOne query, one active context root, one background promise, one destination.
  • Lead with "what are you walking into?" examples.
  • Show context root before memory metrics.
  • Keep async save-to-Reports proof visible.
  • Do not remove Convex-backed research run wiring.

Mobile

CurrentMobile parity exists for core surfaces, including Reports pipeline block.
TargetMode-free capture first, then routing/ack/status after save.
  • Prioritize capture/query above browse.
  • Surface active event or entity context as a pill.
  • Show "saved to X" and paid-call posture.
  • Do not let FABs cover primary report controls.

Reports

CurrentPipeline launcher, runs, schedules, and eval panels are present.
TargetMake the loop legible: Start -> Runs -> Quality -> Export/Refresh.
  • Group controls around one workbench job.
  • Make status and output destination scannable.
  • Keep quality scorecard tied to claims/sources.
  • Do not introduce fixture fallback in production paths.

Workspace

CurrentWorkspace is separate from the five-tab operating app.
TargetUse Workspace for deep report detail: Brief, Cards, Notebook, Sources, Chat, Map.
  • Keep Workspace out of web nav.
  • Open it from reports, sources, and graph nodes.
  • Make event/company/person/product roots visible.
  • Attach every graph edge to evidence.
5. Decompose pipeline

Parity Studio workflow for this plan.

Parity Studio is a planning and decomposition lane here, not a hidden production runtime dependency. The goal is to turn each important NodeBench route into a canonical ui_kit and verify it with bounded checks.

1

Capture route

Open the live app route and capture rendered HTML/CSS plus screenshots.

2

Generate standalone

Normalize the route into a self-contained HTML artifact for decomposition.

3

Decompose

Emit `ui_kits/nodebench-*` components, tokens, manifest, QA and API plans.

4

Verify deterministic

Run boolean parity checks for text coverage, structure, budgets, and contracts.

5

Verify visual

Judge rendered output against screenshots with bounded verdicts, not fake scores.

6

Iterate and export

Patch scoped gaps, max two iterations, export a coding-agent-ready ui_kit zip.

Recommended route decomposition commands: parity_platform_to_ui_kit url=http://127.0.0.1:4186/?surface=home&nbPerf=1 projectRoot=. outputZipPath=./nodebench-home-ui-kit.zip parity_platform_to_ui_kit url=http://127.0.0.1:4186/?surface=reports&nbPerf=1 projectRoot=. outputZipPath=./nodebench-reports-ui-kit.zip parity_platform_to_ui_kit url=http://127.0.0.1:4186/?surface=chat&nbPerf=1 projectRoot=. outputZipPath=./nodebench-chat-ui-kit.zip parity_platform_to_ui_kit url=http://127.0.0.1:4186/?surface=inbox&nbPerf=1 projectRoot=. outputZipPath=./nodebench-inbox-ui-kit.zip Target kit folders: ui_kits/nodebench-home/ ui_kits/nodebench-reports/ ui_kits/nodebench-mobile-capture/ ui_kits/nodebench-workspace/
6. QA gates

What must be true before implementation is accepted.

The HTML plan is static, but the product changes it describes need browser proof, runtime proof, and no regression in the live pipeline flow.

Screenshot gate

  • Desktop and mobile Home captured.
  • Desktop and mobile Reports captured.
  • Chat, Inbox, and Me captured.
  • Images embedded in this HTML load without a dev server.

Runtime gate

  • Pipeline launcher remains live-wired.
  • Runs panel shows status and output links.
  • Eval scorecard remains connected.
  • No production fixture fallback for live flows.

Product gate

  • First-time user can start from one real-world question.
  • Mobile user sees save/status after capture.
  • Laptop user can inspect sources, claims, notebooks, and exports.
  • Private notes are visibly excluded from public/shared outputs.
Required follow-up checks after React implementation: npx tsc --noEmit --pretty false targeted Vitest for touched surfaces npm run build npm run live-smoke:mobile npm run dogfood:full:local -- --routeShards 3 Static HTML verification: Open docs/design/NODEBENCH_UI_HIFI_PLAN_2026_05_02.html directly in browser. Confirm all screenshot images load and no text overlaps inside frames.