Polish Workbench shell after design review

Author: adamziel

packages/playground/website/design-explorations/playground-ui-directions.md

@@ -192,7 +192,7 @@ current site, save state, a short explanation, nearby Playgrounds, and the next
 safe actions. Workbench no longer repeats the current-site status; it points
 back to Current info when the user needs orientation.
 
-### 100 remapping and self-feedback iterations
+### 100-point remapping checklist from the first consolidation pass
 
 1. The user first asks “what am I looking at?” before asking for tools.
 2. The site name by itself is not enough; it needs a container label.
@@ -295,6 +295,64 @@ back to Current info when the user needs orientation.
 99. The approach gives confused users a safe place to start.
 100. The final check is whether a user can point at one place and say: this is the current Playground, this is whether it is saved, and these are my other Playgrounds.
 
+## Post-review Workbench correction pass
+
+The first Current Playground pass was structurally useful but too easy to
+overstate: it grouped concepts, but it had not yet earned the “100 iterations”
+claim. This correction pass treats the prior list as a checklist, then makes
+the UI more concrete and more internally consistent.
+
+### Sources rechecked
+
+- StackBlitz documents a clear split between the menu bar, project identity,
+  editor, sidebar, preview, and console. The important lesson for Playground is
+  not to copy an IDE sidebar; it is to give each surface a single job while
+  keeping the preview/browser surface legible.
+  <https://developer.stackblitz.com/guides/user-guide/ide-whats-on-your-screen>
+- GitHub Codespaces describes a browser development environment as a small set
+  of stable regions: side bar, activity bar, editor, panels, and status bar.
+  The useful pattern is stable mental regions for environment work, not a
+  constantly expanding settings menu.
+  <https://docs.github.com/en/codespaces/developing-in-a-codespace/developing-in-a-codespace?tool=webui>
+- NN/g’s aesthetic/minimalist heuristic says every extra unit competes with
+  relevant information. The Workbench therefore became a task map, not another
+  place to repeat the current site summary.
+  <https://www.nngroup.com/articles/aesthetic-minimalist-design/>
+- NN/g’s system-status heuristic says users need current state to feel in
+  control. That pushed Playground state into the top-left Current Playground
+  cluster and into a state chip inside the Current sheet.
+  <https://www.nngroup.com/articles/visibility-system-status/>
+- NN/g’s recognition-over-recall guidance argues for visible, contextual
+  choices. The Workbench now exposes the major jobs as labeled cards and keeps
+  the full feature surface one click lower.
+  <https://www.nngroup.com/articles/recognition-and-recall/>
+- PR 3655 separates `Autosaved Playground` recovery copies from intentional
+  `Saved Playground` preservation. The prototype now defensively reads future
+  `metadata.persistence` values so the Current sheet and nearby Playground rows
+  can say “Autosaved” when that branch lands.
+  <https://github.com/WordPress/wordpress-playground/pull/3655>
+
+### Concrete design changes from this pass
+
+- The top-left Current Playground control is now a segmented, selected object:
+  site identity on the left, save state/action on the right. It reads more like
+  a browser/workspace title control and less like two unrelated buttons.
+- The Current Playground sheet now has a compact hero, state/runtime/storage
+  chips, and no full-height blank tail. It answers “will I lose this?” without
+  turning into an always-on sidebar.
+- The Workbench hero now asks “What do you need right now?” and explains that
+  it maps actions by what they do to the WordPress site below.
+- The four primary Workbench cards are now the four common user intents:
+  **Environment**, **Work with files**, **Import**, and **Save and share**.
+- “Your Playgrounds” moved into Start or restore, while the current site’s
+  status remains owned by Current Playground.
+- The Workbench no longer routes every preservation action through Share:
+  `Copy link`, `Download ZIP`, and `Export to GitHub` are direct actions in the
+  lower Keep or move group.
+- Visual tokens were tightened into one surface language: blue accent, soft
+  panels, consistent card radius, consistent icon tiles, and fewer competing
+  active styles.
+
 ## PR 3655 fit
 
 The shell treats autosave as recovery and Save as intent:
@@ -303,6 +361,8 @@ The shell treats autosave as recovery and Save as intent:
 - Save is present even when the user is mostly focused on the WordPress site;
 - Current Playground consolidates the site name, save state, Save action, and
   nearby Playgrounds;
+- future `persistence: "autosave"` metadata is read defensively so autosaved
+  recovery copies can be labeled differently from explicitly saved sites;
 - Share explains why Autosaved, Saved, and Unsaved are different states;
 - storage does not become the app's primary navigation model.