feat(admin): Saddle Violet, a flat rail, and a Dashboard that leads with a sentence (#153)

[ifahimreza]

Closes #153

What

Saddle's admin gets its own look and a calmer shape: a violet palette, one flat sidebar, and a Dashboard that opens with a sentence instead of a grid of tiles. No behaviour changes — no ability, no permission, no REST route outside the Cookbook removal.

Why

Fahim asked for a brand palette, then for the UX around it: "less border radius… wordpress core design but modern", "sidebar, options, etc make more user friendly", "dashboard make overview cleaner page", "remove cookbook", "no group in sidebar… simple name", "make like apple company ux".

admin/DESIGN-ALIGNMENT.md carried a DECIDED (2026-07-04) that the monochrome identity was deliberate and not to be re-litigated. This reverses it, at Fahim's direction, so that record is replaced rather than contradicted — otherwise the next agent reads it and undoes this.

The palette

Consumer-side --pp-* overrides in Saddle's own stylesheet. Nothing in node_modules or the library is touched; the DS defines its tokens inside :where() (zero specificity), so a plain class selector wins with no !important. Both .pp-app and the body class are targeted because portaled overlays render outside .pp-app.

The rule everything follows: every color has a bright value for FILLS and a darker same-hue value for TEXT. That is not a style choice. Measured on white, violet is 5.84:1 — but lime is 1.98, cyan 2.43, coral 3.67. None of them can carry a label, and the DS derives --pp-tone-text from --pp-tone for status, so a lime --pp-success would have meant lime badge text at 1.9:1 — materially worse than what ships today. The readable partners go back at the tone layer.

Lime, cyan and amber each move one step down their own ramp for the mark tier too: a status dot or a 2px lane rail has to clear 3:1 on a white card to be seen, and at the -500 step they are invisible. Coral already clears it and is used exactly as given.

Warning stays amber rather than folding into coral. Saddle says two different things with those — amber is "powerful, asks first" (the Remove lane, the shield chip), red is "blocked or failed" (a denied call, an error) — and they need opposite reactions.

Also: neutrals warmed onto #FBFBFA / #111111 via the ramp (no DS component reads --pp-n-* directly, so eleven values move the whole neutral system, with lightness steps unchanged); radii to 3/4/6px and elevation flattened; --pp-focus set explicitly, since it is a separate literal no accent file touches — Saddle has been shipping a monochrome accent with a WordPress-blue focus ring this whole time.

One library quirk neutralized: .pp-code--dark reads --pp-code-bg from --pp-action but hard-codes its border, muted and body colors. A violet action token would have left 35 CodeBlock/Snippet instances violet-backed with muted text at 2.26:1. Its ground is pinned back to near-black.

The UX

One flat rail. The three labelled sections were three more things to read before you could read the thing you came for. Pure data change — AppNav takes a mixed array, so only the useMemo return changed. Two things fell out and are cleaned up rather than left half-done: TopBar's group breadcrumb had nothing left to resolve, and the footer was 28 lines of raw <button>s re-implementing the DS's own nav-item markup — the DS supports footer groups natively, which brings aria-current and the collapsed-rail tooltips with it.

Two labels now say what you do there: Guidance → Instructions, Connections → Apps. Routing keys are untouched.

The Dashboard leads with a sentence. It opened with four equal tiles of three different kinds — two counts, a setting, a health state — reading as a metrics dashboard for a question that isn't a metric. The answer was already written, in levelFor(tier).one, and the tiles were paraphrasing it into one word. The Connection tile is gone: it said — on most installs while a real problem already had a callout with an explanation and a fix.

The Cookbook is removed — verified not agent-facing first: Saddle_Cookbook is referenced in exactly three places and has zero hits across includes/abilities/, the system context, the context bundle, skills, playbooks and the MCP transport. (Not Saddle_Recipes, the section recipes behind saddle/list-section-recipes — different system, untouched.)

Breaking

• saddle_cookbook_recipes is removed. A public filter with no consumer in this repo — checked saddle-pro, it does not hook it.
• Nav labels change; routing keys don't, so no link breaks.
• #cookbook no longer resolves (falls back to Dashboard).
• The LEVELS strings in api.js were raw English, never wrapped in __() — including the sentence now used as the Dashboard headline. Fixed; translators see 10 new msgids.

Companion PR

The License moves off the sidebar into Settings — that is Pro-only: plugpressco/saddle-pro#78. Free needs no change; both seams already existed.

Testing

• composer test — 637 tests, 0 failures (was 643; the 6 are the Cookbook's)
• composer lint · npm run lint:js — 0 errors
• npm run build, .pot regenerated (10 new msgids, 91 removed — all Cookbook copy and the retired group labels)
• Verified in a real install, every screen: flat rail with 7 items and 0 group headings; the DS footer group renders <button class="pp-nav__item"> with the title tooltip and aria-current exactly as the hand-rolled version did; #guidance → Instructions and #connect → Apps still route; #cookbook falls back cleanly; code blocks still near-black, not violet; focus rings violet
• Contrast re-checked: white on violet 5.84, violet link 8.48 on page / 7.60 on tint, focus ring 5.64, body text 18.24, each status text 4.82–5.72 on its own tint. Muted text improves 4.40 → 4.50, clearing AA.

CI note: main is red on Saddle_Skills_Test::test_the_playbook_adapts_step_two_to_a_classic_theme (#145, CI-only, green locally). This branch inherits it.

Screenshots

Before/after handed to Fahim in-session — this is a visual change and the diff doesn't show it.