Skip to content

Redesign Mapper as a minimal workspace built for analysis - #7

Merged
Yasuui merged 2 commits into
mainfrom
claude/minimalistic-modern-ui-redesign-a7bdd0
Oct 27, 2026
Merged

Yasuui merged 2 commits into
mainfrom
claude/minimalistic-modern-ui-redesign-a7bdd0

Conversation

@Yasuui

@Yasuui Yasuui commented Oct 27, 2026

Copy link
Copy Markdown
Owner

What

A UI/UX redesign of Mapper: a minimal, modern workspace that is easier to start with and more useful for teams who need to analyse a workflow.

  • Visual system. Neutral tokens with light and dark themes that follow the OS, one accent for facts and actions, and a warm colour reserved for friction. The ambient blobs, heavy shadows and floating avatar are gone.
  • Empty state. The intent picker, samples and "I don't have a workflow yet" move out of the composer dock onto a real starting screen. The greeting becomes its intro copy, and the composer stays anchored.
  • Thread. Plain assistant prose, soft user bubbles, a composer that grows as you type, a Stop control while streaming, / to focus the composer and Escape to close the mobile brief.
  • Brief versions. Each brief appears as a card in the thread. Clicking an earlier card restores that version on the canvas.
  • Analysis view. KPI tiles (manual hours, steps mapped and how many have friction, issues found, share of evidence that is fact), section tabs (Overview, Actions, Workflow, Evidence) that track scrolling, a Facts/Assumptions filter on friction and bottlenecks, step references on each issue, and friction steps flagged on the workflow spine.
  • Mobile. The brief slides up full screen with focus on Close. The empty state starts at the top (on main it loaded scrolled to the bottom), and the attach hint hides once a conversation starts.

Why

The previous layout stacked onboarding inside the composer and presented the brief as a long, evenly weighted page. Starting took more reading than it should, and an analyst couldn't see at a glance how big the problem was or how much of the brief rested on facts versus assumptions.

Before / after

Production builds (next build && next start, demo mode) captured with headless Chrome at the same viewports and with the same "Data review" sample.

Before (main) After (this branch)
Before: empty state After: empty state
Before: brief After: brief

Mobile brief (390px):

Before After
Before: mobile brief After: mobile brief

New: dark theme and the evidence view with its fact/assumption filter:

After: dark evidence view

Risk

  • Client UI only. /api/optimize, the agent protocol, analytics events and export formats are unchanged. The analytics calls (mapper_viewed, example_selected, analysis_completed, report_copied, report_downloaded, feedback_submitted, analysis_reset, analysis_validation_failed) fire from the same places.
  • Greeting. The greeting no longer renders as a chat bubble. Its text is the empty-state intro, so it still appears in the pre-rendered HTML.
  • Dark mode is new. It follows prefers-color-scheme. There is no manual toggle.
  • Demo wording. The demo reply still says "brief on the right", which is wrong on mobile. A test pins that phrase, so I left it.
  • README screenshots. docs/screenshots/landing.png and its siblings still show the old UI. The new captures live in docs/screenshots/redesign/.

How it was tested

  • npm run lint: clean.
  • npm test (tsc --noEmit, next build, node --test): 52/52 pass.
  • Headless Chrome against the production build at 1440×900 (light and dark) and 390×844 (mobile): empty state, streamed brief, tab jump to Evidence, and the mobile overlay.
  • Keyboard: after the brief opens on mobile, focus lands on Close and Escape closes it (checked over CDP).

Not verified: live-model mode (only demo mode was run), the attachment flow, actual .md/.pdf downloads after the redesign, and a screen-reader pass.

🤖 Generated with Claude Code

Yasuui and others added 2 commits October 27, 2026 14:16
Quiet neutral tokens with light and dark themes, one accent for facts
and actions, and a warm signal colour reserved for friction.

- Move the intent picker and samples into a real empty state so the
  composer stays anchored; the greeting becomes its intro copy.
- Simplify the thread: plain assistant prose, soft user bubbles, a
  growing composer with a Stop control, "/" to focus, Esc to close.
- Show each brief as a card in the thread; clicking an earlier one
  restores that version on the canvas.
- Give the brief KPI tiles (manual hours, steps, issues, share of
  evidence that is fact), section tabs with scroll tracking, a
  fact/assumption filter on friction, and step references.
- Mobile: brief slides up full screen with focus on Close; the empty
  state starts at the top; the attach hint hides mid-conversation.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Production-build captures of main and this branch: empty state, brief,
mobile brief, plus the dark evidence view and mobile empty state.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
workflow-friction-mapper Ready Ready Preview Oct 27, 2026 6:19pm UTC

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-27T18:20:52.423135Z e7e6aef PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@Yasuui
Yasuui merged commit f163ecf into main Oct 27, 2026
3 checks passed
@Yasuui
Yasuui deleted the claude/minimalistic-modern-ui-redesign-a7bdd0 branch October 27, 2026 18:33

This branch was successfully deployed

1 active deployment
Preview — e7e6aefd Deployed Oct 27, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant