# UI Delta - 2026-05-02 Since 2026-04-26

This document compares the April 26 NodeBench design kit with the current live app implementation.

Baseline used:

- Previous kit: `NodeBench AI Design System (2).zip`, last modified 2026-04-26.
- Checked-in kit reference: `docs/design/nodebench-ai-design-system/`.
- Current app baseline: `origin/main` / local HEAD `6968bd90` (`feat(web): reduce first-run mobile clutter`).
- Prior parity map: `docs/design/UI_KIT_PARITY_2026-04-25.md`.

Product rules still in force:

- Preserve live Convex-backed runtime flows.
- Do not replace production paths with silent fixtures.
- Web nav is `Home - Reports - Chat - Inbox - Me`.
- Workspace remains a separate deployed surface, not a sixth web tab.
- UI kit packets are design targets, not implementation branches.

## Executive Summary

The April 26 packet itself is mostly unchanged. The large deltas are in the live React app.

Since April 26, NodeBench moved from a mostly static design-kit parity shell toward a live, mobile-aware research operating loop:

- Home now sells immediate relevance to first-time users instead of showing a generic dashboard first.
- Reports is now the main async research workbench, not just a report grid.
- Pi-AI pipeline controls, runs, schedules, and eval quality panels are live-wired into Reports.
- Mobile Reports now has compact launcher, runs, and quality parity.
- Chat and evidence affordances moved closer to the kit, with more workflow-specific safety states.
- The first-screen experience was reduced to fewer regions, with secondary dashboard content behind disclosure.
- Async/background task language is now explicit so mobile users can start work and leave.

## Packet-Level Difference

The uploaded April 26 zip and the checked-in design packet are nearly identical.

| Category | Difference |
| --- | --- |
| Changed in checked-in kit | `ui_kits/nodebench-web/TopNav.jsx`, `ui_kits/nodebench-web/nodebench.css`, `ui_kits/nodebench-web/index.html` |
| Repo-only additions | `HANDOFF.md`, `ui_kits/README.md`, `chats/chat1.md`, `chats/chat2.md`, bundled shared assets under `ui_kits/assets/*` |
| Zip-only additions | Uploaded screenshot references under `uploads/pasted-*.png` |

Interpretation: the design packet did not materially evolve after April 26. The product implementation did.

## Commit Window

UI-relevant changes since the April 26 kit landed:

| Commit | Date | Summary |
| --- | --- | --- |
| `6968bd90` | 2026-05-02 | Reduced first-run mobile clutter |
| `ba9a74fd` | 2026-05-01 | Added first-impression Home workflow |
| `b21df62c` | 2026-04-30 | Added Reports performance/product loop |
| `7694b78b` | 2026-04-30 | Cleaned dogfood warnings and performance plan |
| `48772367` | 2026-04-30 | Closed clean-worktree QA gaps |
| `a75e6150` | 2026-04-30 | Restored mobile Reports pipeline parity |
| `2a541037` | 2026-04-30 | Added schedule UI, session ownerKey, MCP HTTP, eval scorecard |
| `2a899ed6` | 2026-04-30 | Added cron schedules, Linkup deep mode, composed pipelines, auth-aware ownerKey |
| `5e52f7ab` | 2026-04-30 | Added Linkup web search, durable workflow, UI launcher |
| `84e48c9f` | 2026-04-30 | Added research pipeline, reactive streaming, document handoff |
| `4f0a4f77` | 2026-04-29 | Added design-gen, trace audit entries, streaming, bundle handoff |
| `e06c8f69` | 2026-04-29 | Added Pi-AI code-gen pipeline scaffold and Reports panel |
| `72b2c812` | 2026-04-29 | Promoted startups and digest spotlights, tightened link matching |
| `ce52bfff` | 2026-04-26 | Closed ExactChatSurface parity gap |
| `986ac9d2` | 2026-04-26 | Completed Tier D live wiring across seed surfaces |
| `91055df1` | 2026-04-26 | Deep-wired Pulse relationships, follow-ups, ActiveEvent, TodayIntel |
| `b01d73e4` | 2026-04-26 | Deep-wired TodayIntel, PulseStrip ledger metrics, ReportDetail sections |
| `c3922707` | 2026-04-26 | Deep-wired recent reports, Pulse counts, Today reports-updated, Avatar watching |

## Surface Delta Map

| Surface | April 26 Kit | Current App | Delta |
| --- | --- | --- | --- |
| Global shell | Kit top nav and static surface switcher | Product nav, theme/avatar/search affordances, live route host | Current nav order is `Home - Reports - Chat - Inbox - Me`; Workspace remains out of tab bar |
| Home | HomePulse dashboard with composer, pulse stats, recent intelligence cards | First-impression research landing with async query, scenario prompts, persistence/export proof, immediate relevance board | Home now answers "why should I use this right now?" before showing dense memory stats |
| Reports | Report card grid and detail entry points | Research workbench with Start/Runs/Quality/Refresh tabs, pipeline launcher, runs, schedules, eval scorecard, findings | Reports became the primary async work surface |
| Chat | Kit ChatStream, answer packet, right rail concepts | More complete chat stream parity with source/evidence affordances and safety states | Chat moved from single answer/card feel toward ongoing evidence-backed workflow |
| Inbox | NudgeList-style triage | Still uses Inbox as product label; captures/nudges/automation framing remains the target | Inbox is closest structurally, but still needs continued simplification toward one-list triage |
| Me | EntityNotebook/profile/preferences concept | Memory/report-oriented account area with watched entity and report linkage copy | Me is more about accumulated research memory than generic profile settings |
| Mobile Home | Mobile kit had capture/home shell | Current Home is reduced for first-run mobile clutter | Fewer competing cards; secondary dashboard content is deferred |
| Mobile Reports | Kit did not include live compact pipeline workbench parity | Compact Reports pipeline block inside `ExactMobileSurface({ surface: "reports" })` | Major addition: mobile users can start, inspect, and quality-check async research |
| Workspace | Separate workspace kit packet | Still separate deployed surface | No sixth web tab added |

## Home Changes

Primary files:

- `src/features/designKit/exact/ExactKit.tsx`
- `src/features/designKit/exact/exactKit.css`
- `src/features/home/lib/firstImpressionResearch.ts`
- `src/features/home/lib/firstImpressionResearch.test.ts`

Additions and differences:

- New first-screen positioning: `Get the read before you walk in.`
- New use-case framing for teachers, bankers, founders, event operators, and mobile users.
- Query composer shifted from generic prompt entry to "research a person, school, company, product, meeting, or event."
- New async/background affordances:
  - run can continue after phone lock
  - output saves to Reports
  - exports to Apple Notes, Notion, Linear, OneNote, CRM CSV
- New first-impression scenario board:
  - relocation and school culture read
  - one-page meeting prep
  - event intelligence
  - public footprint/person research
  - watchlist and stale source refresh
- New Today / This week / This month relevance tabs.
- Memory pulse and prior intelligence are no longer the only first viewport story.
- Dense dashboard content moved behind progressive disclosure for first-run clarity.
- Error/status feedback added for background research submission.

Net difference from April 26: Home changed from "look at the dashboard" to "ask one urgent real-world question and let NodeBench persist the work."

## Reports Changes

Primary files:

- `src/features/designKit/exact/ExactKit.tsx`
- `src/features/designKit/exact/exactKit.css`
- `src/features/pipelines/views/PipelineLauncher.tsx`
- `src/features/pipelines/views/PipelineRunsPanel.tsx`
- `src/features/pipelines/views/PipelineSchedulesPanel.tsx`
- `src/features/pipelines/views/PipelineEvalScorecard.tsx`

Additions and differences:

- New workbench heading and async framing: start work, check status later.
- New tab model:
  - `Start`
  - `Runs`
  - `Quality`
  - `Refresh`
- New pipeline launcher:
  - primitive pipelines: code-gen, design-gen, research
  - composed pipelines
  - model/depth/spec controls
  - schedule toggle
  - Linkup depth control
  - user/session owner fallback
- New runs panel:
  - recent run status
  - cost
  - verdict
  - stream preview
  - download bundle
  - image preview
  - show-more windowing
- New schedules panel:
  - list
  - pause/resume
  - delete
  - compact count/windowing
- New eval scorecard:
  - verdict accuracy
  - Brier score
  - review/quality counts
  - per-kind breakdown
- Entity findings panel mounted alongside pipeline panels.
- Report cards gained more contextual actions and source/status treatment.

Net difference from April 26: Reports is no longer only a memory browser. It is the main async research execution surface.

## Mobile Reports Parity

Primary files:

- `src/features/designKit/exact/ExactKit.tsx`
- `src/features/designKit/exact/exactKit.css`
- `src/layouts/MobileCaptureFab.tsx`
- `tests/e2e/live-smoke-mobile.spec.ts`

Additions and differences:

- `ExactMobileSurface({ surface: "reports" })` exposes the pipeline workflow.
- Mobile tabs:
  - `Start`
  - `Runs`
  - `Quality`
- Compact `PipelineLauncher`.
- Compact recent `PipelineRunsPanel`.
- Compact `PipelineEvalScorecard`.
- Schedules moved behind a mobile details/disclosure block.
- Mobile capture FAB hidden on Home, Reports, and report detail paths to avoid blocking the main workflow.
- Mobile smoke assertions were added to prevent regression.

Net difference from April 26: a user on a phone can now initiate and inspect the core Reports workflow instead of only browsing static report cards.

## Chat Changes

Primary files:

- `src/features/designKit/exact/ExactKit.tsx`
- `src/features/designKit/exact/exactKit.css`

Additions and differences:

- ChatStream parity was closed after the April kit.
- Evidence/source affordances are more explicit.
- Source panel and right-rail style behavior are closer to the design packet.
- Event-capture and entity-resolution scenarios are reflected in the UI copy.
- Safety states are more visible:
  - uncertain identity resolution
  - source-backed answers
  - claim review
  - private notes boundaries
- Mobile chat layout received overlap and readability fixes.

Net difference from April 26: Chat is closer to a workflow stream with evidence and follow-through, not just a single answer card.

## Inbox Changes

Primary files:

- `src/features/designKit/exact/ExactKit.tsx`
- related inbox/nudge route files

Additions and differences:

- Product label remains `Inbox`, per current surface rules.
- Inbox is still the destination for captures, nudges, unassigned notes, automations, and alerts.
- Compared with the April kit, the desired direction is less dashboard and more one-list triage:
  - Today
  - Later
  - Done
  - one reader/inspector
  - one action bar

Net difference from April 26: Inbox is aligned at the product level, but it still has the clearest remaining opportunity to become simpler and more Superhuman-style.

## Me Changes

Primary files:

- `src/features/designKit/exact/ExactKit.tsx`
- `src/features/designKit/exact/exactKit.css`

Additions and differences:

- More memory/report-oriented copy.
- Watched entities and report relationships are surfaced.
- Settings/profile presentation is less generic.
- Copy makes the accumulated research graph more visible:
  - reports automatically link to entities
  - watched entities compound over time
  - personal/private context remains scoped

Net difference from April 26: Me is now more clearly the user's memory/context/preferences surface.

## Global Shell And Design System Changes

Primary files:

- `src/layouts/ProductTopNav.tsx`
- `src/layouts/ActiveSurfaceHost.tsx`
- `src/layouts/IOSChrome.tsx`
- `src/layouts/MobileCaptureFab.tsx`
- `src/features/designKit/exact/exactKit.css`
- `index.html`
- `src/main.tsx`

Additions and differences:

- Current web nav order is `Home - Reports - Chat - Inbox - Me`.
- Workspace is not a top-level app tab.
- Dark token overrides were expanded for `.nb-kit`, `.nb-mobile-kit`, and workspace-adjacent classes.
- PWA/app-shell wiring was adjusted.
- Mobile chrome spacing and capture button behavior were tightened.
- CSS gained many production-specific classes not present in the April static kit:
  - `.nb-async-proof`
  - `.nb-background-feedback`
  - `.nb-first-board`
  - `.nb-first-tabs`
  - `.nb-research-workbench`
  - `.nb-reports-source-pill`
  - `.nb-deferred-panel`
  - `.m-pipeline-*`
  - `.m-mobile-more`
  - `.m-chat-evidence`
  - `.m-scenario-more`

Net difference from April 26: the implementation now carries production workflow states and mobile behavior beyond the static packet.

## New Pipeline UI Family

This is the largest new UI family since the April 26 packet.

| Component | Purpose |
| --- | --- |
| `PipelineLauncher` | Start primitive or composed pipeline runs, including compact mobile variant |
| `PipelineRunsPanel` | Inspect recent runs, status, verdict, cost, stream, downloads, images |
| `PipelineSchedulesPanel` | Manage scheduled pipeline runs |
| `PipelineEvalScorecard` | Show quality metrics and per-kind pipeline evaluation |

These map to the production loop:

```text
query / capture
-> async pipeline run
-> report update
-> stream/status
-> evidence/output bundle
-> quality score
-> schedule or refresh
```

The April 26 kit did not contain this full live-wired pipeline control layer.

## Product Experience Delta

| Area | April 26 Direction | Current Direction |
| --- | --- | --- |
| First impression | Show pulse/dashboard value | Show immediate user-specific relevance |
| Mobile | Capture and browse | Capture, start async work, inspect results |
| Reports | Browse saved reports | Run, monitor, evaluate, export research |
| Search budget | Mostly implied | More explicit memory/cache/refresh framing |
| Persistence | Implied by reports | Explicit "safe to leave, saved to Reports" language |
| Evidence | Kit source panels | Live source/claim/eval affordances |
| Async workflow | Not central in UI | Central to Home and Reports |
| Design density | Card-heavy dashboard | More progressive disclosure, fewer first-screen regions |

## Verification Added Since April 26

Relevant checks added or updated:

- Home first-impression unit coverage.
- Desktop Home ExactKit parity smoke.
- Mobile Home Playwright smoke.
- Product shell all-five-surfaces smoke.
- Mobile Reports pipeline parity smoke.
- Reports/product loop dogfood checks.

These do not replace manual screenshot review. They protect against the biggest product regressions.

## Remaining Design Kit Sync Gaps

These are not necessarily product blockers, but they are the remaining cleanup items if the design kit is meant to stay canonical.

| Gap | Why It Matters | Recommended Action |
| --- | --- | --- |
| Design packet does not include current pipeline workbench | Current Reports UI has major production functionality absent from kit | Add Reports pipeline screens to the design packet |
| Design packet does not fully reflect first-impression Home | Current Home is now scenario-led, not pure dashboard-led | Add first-impression Home reference screens |
| Mobile Reports kit is behind implementation | Current mobile Reports has compact pipeline parity | Add mobile Reports Start/Runs/Quality screens |
| Inbox still needs simplification | It remains the most likely clutter risk | Move toward one-list triage plus one inspector |
| Current screenshots need a formal side-by-side | We have code and smoke coverage, but not a persisted visual delta packet | Capture desktop/mobile screenshots into `docs/design/screenshots/ui-delta-2026-05-02/` |
| Design packet has stale nav-order assumptions in older docs | Current product rule is Reports before Chat | Normalize docs to `Home - Reports - Chat - Inbox - Me` |

## Suggested Screenshot Set

Capture these before the next design kit refresh:

| Screenshot | Route |
| --- | --- |
| Desktop Home first impression | `/?surface=home&nbPerf=1` |
| Mobile Home first impression | `/?surface=home&nbPerf=1` at mobile viewport |
| Desktop Reports Start | `/?surface=reports&nbPerf=1` |
| Desktop Reports Runs | `/?surface=reports&nbPerf=1` after selecting Runs |
| Desktop Reports Quality | `/?surface=reports&nbPerf=1` after selecting Quality |
| Mobile Reports Start | `/?surface=reports&nbPerf=1` at mobile viewport |
| Mobile Reports Runs | `/?surface=reports&nbPerf=1` at mobile viewport |
| Chat with evidence/source panel | `/?surface=chat&nbPerf=1` |
| Inbox triage | `/?surface=inbox&nbPerf=1` |
| Me memory/context | `/?surface=me&nbPerf=1` |

## Source File Inventory

Most relevant implementation files for this delta:

- `src/features/designKit/exact/ExactKit.tsx`
- `src/features/designKit/exact/exactKit.css`
- `src/features/home/lib/firstImpressionResearch.ts`
- `src/features/home/lib/firstImpressionResearch.test.ts`
- `src/features/pipelines/views/PipelineLauncher.tsx`
- `src/features/pipelines/views/PipelineRunsPanel.tsx`
- `src/features/pipelines/views/PipelineSchedulesPanel.tsx`
- `src/features/pipelines/views/PipelineEvalScorecard.tsx`
- `src/layouts/ActiveSurfaceHost.tsx`
- `src/layouts/ProductTopNav.tsx`
- `src/layouts/IOSChrome.tsx`
- `src/layouts/MobileCaptureFab.tsx`
- `tests/e2e/live-smoke-mobile.spec.ts`
- `tests/e2e/product-shell-smoke.spec.ts`
- `tests/e2e/full-ui-dogfood.spec.ts`

## Bottom Line

The April 26 kit gave NodeBench the visual language and five-surface shell.

The current app adds the missing product loop:

```text
ask or capture
-> run async research
-> persist to Reports
-> inspect sources and claims
-> evaluate quality
-> export or schedule refresh
```

The next design-system task is not another broad redesign. It is to refresh the design packet so it includes the current first-impression Home, live Reports pipeline workbench, compact mobile Reports flow, and simplified Inbox direction.
