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.

Built from fresh local screenshots, the April 26 UI delta, the product surface hierarchy, event intelligence model, and the Parity Studio decomposition workflow.

Artifact Static HTML
Date 2026-05-02
Local source 127.0.0.1:4186
Screenshot folder ui-plan-2026-05-02
Runtime dependency None
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

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

### Current Reports - desktop

current

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

### Current Chat - desktop

current

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

### Current Inbox - desktop

current

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

### Current Me - desktop

current

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

### Mobile Home

current

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

### Mobile Reports

current

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

### Mobile Chat

current

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

### Mobile Inbox

current

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

### Mobile Me

current

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
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 sleeps server run
Saves to Reports auto
Sources and claims tracked required
Export ready Notes, 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

#### Start research

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

Compare Mercury vs Brex for a banker prep memo.

#### Running now

Memory search complete 0.4s
Entity resolution: Mercury, Brex ok
Public refresh queued deep
Report update streaming 42%

#### Quality gate

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

Verdict needs_review
Brier 0.13
Export preview 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: Alex new
Company: Orbital Labs match
Claim: healthcare partners field

#### 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 tooling verified
Seeking healthcare design partners field
Cheaper than VectorDock unsupported

#### 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 research on
Verified claims only on
Private field notes off

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

### Target Workspace - event root governs everything

laptop

#### Event root

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

Public corpus shared
Private notes excluded

#### 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 infra cluster
5 partner claims need verification review
2 exports ready draft

#### Graph edge evidence

Alex -> Orbital field note
Orbital -> Healthcare claim
VectorDock -> GPU scheduling source
Northstar -> Benchling needs 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

Current Scenario prompts exist, but the hierarchy can still read as a dashboard plus cards.
Target One 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

Current Mobile parity exists for core surfaces, including Reports pipeline block.
Target Mode-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

Current Pipeline launcher, runs, schedules, and eval panels are present.
Target Make 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

Current Workspace is separate from the five-tab operating app.
Target Use 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.