Merge pull request #43 from programmerShinobi/feat/phase2-content-guide-polish

[feat](advisor+ui): Fase 2 — 10 scenario presets, factor examples, full-feature Guide, calm futuristic chrome

Author: programmerShinobi

CHANGELOG.md

@@ -9,6 +9,27 @@ The decision **model** carries its own version, recorded in the
 
 ## [Unreleased]
 
+### Added / Changed (Fase 2 — richer scenarios & guidance, full-feature Guide, calm chrome — 2026-07-16)
+
+- **10 scenario presets** — five new helper scenarios (B2B SaaS, consumer mobile, data platform,
+  legacy modernization, real-time collaboration) marked `calibrated: false`; the five ADR-0002
+  presets stay bit-exact and guard-pinned. `check-app-config.mjs` extended accordingly; a new
+  unit test pins each helper's engine outcome per dimension (drift guard).
+- **Per-level factor examples** — every one of the 14 factors shows a bilingual real-world
+  example for the selected level in guided mode (pure UI copy; the frozen model is untouched).
+- **Guide = full feature map** — section 7 now covers Home, the guided/expert Advisor toolset,
+  all seven Insights lenses, save/export/share, the command palette & shortcuts, EN/ID, themes,
+  mobile chrome, and PWA install/offline.
+- **Calm text gradients** — gradient text ("evidence", "Always explains why") moved to a muted,
+  theme-tuned `--aa-grad-text` (deeper on light, pastel on dark) — decorative fills keep the
+  vivid accent, text never glares.
+- **Modern app bar** — one sticky glass bar: nav tabs (futuristic segmented badges) in the
+  top-left corner, compact controls + brand mark docked right; the app title lives on the Home
+  hero. The guided "New here?" strip is now a slim, calm inline hint with a ⌘K key cap.
+- **Brand mark v5 "compass"** — a minimal monochrome compass on a transparent background:
+  black in the light theme, auto-inverting via `currentColor` (app) and `prefers-color-scheme`
+  (favicon); PWA icons regenerated as a black compass on a soft-white tile.
+
 ### Changed (Fase 1 — "Aurora Glass" borderless evolution + identity — 2026-07-16)
 
 - **Component tree grouped by feature area** — `src/components/` reorganised into

DECISIONS.md

@@ -279,3 +279,41 @@ commitment the code must match (cross-checked by review, gates, and tests).
   All rights reserved.` — plus the same notice in `site.ts` config, the SEO snapshots, the README
   and the print report. **Scope note:** code stays MIT and docs CC BY 4.0 (unchanged LICENSE
   files); the copyright line asserts *identity/attribution* of the work, it does not re-license it.
+
+## Fase 2 — richer scenarios & factor guidance, full-feature Guide, calm futuristic chrome (2026-07)
+
+Documented **before** implementation (docs-first). The frozen model stays frozen — every point
+below is content or presentation, never scoring.
+
+- **Presets grow 5 → 10; the calibrated five stay bit-exact.** The five ADR-0002 presets are
+  pinned by the frozen guards (`verify-model.mjs` fixtures + `cross-check-docs.mjs`, which assert
+  exactly those five against the Model Data Sheet Section 6) and are NOT touched. Five new
+  **helper scenarios** (B2B SaaS · consumer mobile backend · data/analytics platform · legacy
+  modernization · real-time collaboration) live only in `src/config/presets.ts`, marked
+  `calibrated: false` — they are conveniences that pre-fill the 14 factors, not part of the
+  ratified model. `check-app-config.mjs` (not frozen) is extended: the calibrated five must still
+  match `verify-model.mjs` exactly; helper presets are validated structurally (14 factors, levels
+  0–2). A unit test pins each helper's top pick per dimension so any future drift fails the build.
+- **Factors stay 14 — enriched, not extended.** Adding a scoring factor would change the frozen
+  model (influence matrix, MDS, SRS cross-checks — all guard-pinned), so instead every factor
+  gains bilingual **per-level real-world examples** (`examples`) shown as a hint under the
+  selected level in the Advisor: more relevant guidance per question with zero model impact.
+- **The Guide becomes a full-feature manual.** `ManualBook` gains a "what's in the app" feature
+  map covering everything shipped since it was written: Home landing, Advisor guided/expert flow
+  (presets, priorities/overrides, radar, sensitivity, A/B compare, anti-patterns, migration,
+  risks, fitness functions, C4, exports, share links), Insights' seven lenses, command palette &
+  shortcuts, EN/ID, themes, install/offline (PWA), and the copyright/identity line.
+- **Calm gradients (owner feedback: "terlalu mencolok").** Gradient-filled text (`.lp-grad`
+  "evidence", the eyebrow's "Always explains why", and any sibling accent text) switches to a
+  **muted, theme-tuned** two-stop gradient — deeper/desaturated on light, softer pastel on dark —
+  tuned separately per theme so neither glares.
+- **Modern app bar: nav left, controls right.** The centered nav pill moves to the **top-left
+  corner** as futuristic segmented badges; the header controls (save status, Guide, ⌘K, ?, mode,
+  language, theme) dock to the **right** of the same bar with the brand mark; the title/tagline
+  live on the Home hero + document title (the bar stays one row). The guided "New here?" strip
+  becomes a slimmer, calmer inline hint.
+- **Brand mark v5: monochrome compass.** Per owner direction the glyph becomes a minimal modern
+  **compass** (ring + needle + hub) in a single color on a **transparent** background — black in
+  the light theme (elegant), automatically light in dark contexts via `currentColor` (in-app) and
+  an SVG-embedded `prefers-color-scheme` rule (favicon), so it is never invisible. PWA PNG icons
+  keep a solid tile (maskable requirement): black compass on a soft white tile.

public/favicon.svg

@@ -129,11 +129,26 @@ function mjsPresets() {
   return out;
 }
 {
+  // Fase 2 (DECISIONS.md): the app may ship extra HELPER presets beyond the five calibrated
+  // ones. The calibrated five must still match verify-model.mjs bit-exactly; helpers are
+  // validated structurally (14 factors, levels 0–2) and must be marked `calibrated: false`.
   const app = appPresets(), mjs = mjsPresets();
+  const calibratedIds = Object.keys(mjs);
+  const flags = {};
+  for (const m of noComments(read('src/config/presets.ts')).matchAll(/id:\s*'([a-z-]+)',[\s\S]*?calibrated:\s*(true|false)/g))
+    flags[m[1]] = m[2] === 'true';
   const diff = [];
-  for (const k of new Set([...Object.keys(app), ...Object.keys(mjs)]))
+  for (const k of calibratedIds)
     for (const f of FACT) if (app[k]?.[f] !== mjs[k]?.[f]) diff.push(`${k}.${f}`);
-  diff.length === 0 && Object.keys(app).length === 5 ? ok('preset levels match verify-model.mjs (5 presets × 14)') : bad(`preset levels differ at: ${diff.join(', ') || 'count'}`);
+  const helpers = Object.keys(app).filter((k) => !calibratedIds.includes(k));
+  const badHelpers = helpers.filter((k) => FACT.some((f) => ![0, 1, 2].includes(app[k][f])));
+  const badFlags = [
+    ...calibratedIds.filter((k) => flags[k] !== true).map((k) => `${k} (expect calibrated: true)`),
+    ...helpers.filter((k) => flags[k] !== false).map((k) => `${k} (expect calibrated: false)`),
+  ];
+  diff.length === 0 && badHelpers.length === 0 && badFlags.length === 0
+    ? ok(`preset levels: 5 calibrated match verify-model.mjs exactly; ${helpers.length} helper preset(s) structurally valid (14 × 0–2, flagged)`)
+    : bad(`presets: calibrated diff at [${diff.join(', ')}]; invalid helpers: [${badHelpers.join(', ')}]; wrong flags: [${badFlags.join(', ')}]`);
 }
 
 // ---- 8. anti-pattern ids + severities vs Model Data Sheet Section 5 ----

public/icons/apple-touch-icon.png

@@ -217,40 +217,44 @@ export default function App() {
             canvas; the header/nav are glass. The extra wrapper div is gone with the frame. */}
         <div>
           <div id="f-app" className={mode} style={{ position: 'relative' }}>
-            <Header
-              mode={mode}
-              onToggleMode={setMode}
-              onCmdK={() => setOverlay('palette')}
-              onHelp={() => setOverlay('shortcuts')}
-              onManual={() => setOverlay('manual')}
-              theme={theme}
-              onToggleTheme={toggleTheme}
-              saveSig={saveSig}
-            />
-
-            <nav aria-label={t('m.primaryNav')} className="screen-only aa-topnav aa-glass">
-              {(
-                [
-                  { v: 'home', key: 'nav.home', Icon: IconHome },
-                  { v: 'advisor', key: 'nav.advisor', Icon: IconCompass },
-                  { v: 'learn', key: 'nav.learn', Icon: IconBulb },
-                ] as const
-              ).map(({ v, key, Icon }) => {
-                const active = mainView === v;
-                return (
-                  <button
-                    key={v}
-                    type="button"
-                    aria-current={active ? 'page' : undefined}
-                    onClick={() => navigate(v)}
-                    className={'aa-topnav-tab' + (active ? ' on' : '')}
-                  >
-                    <Icon size={15} aria-hidden />
-                    {t(key)}
-                  </button>
-                );
-              })}
-            </nav>
+            {/* Modern app bar (Fase 2, DECISIONS.md): ONE sticky glass bar — nav tabs in the
+                top-LEFT corner, controls + brand docked RIGHT. The app title lives on the Home
+                hero and the document title, keeping the bar a single calm row. */}
+            <div className="aa-appbar aa-glass">
+              <nav aria-label={t('m.primaryNav')} className="screen-only aa-topnav">
+                {(
+                  [
+                    { v: 'home', key: 'nav.home', Icon: IconHome },
+                    { v: 'advisor', key: 'nav.advisor', Icon: IconCompass },
+                    { v: 'learn', key: 'nav.learn', Icon: IconBulb },
+                  ] as const
+                ).map(({ v, key, Icon }) => {
+                  const active = mainView === v;
+                  return (
+                    <button
+                      key={v}
+                      type="button"
+                      aria-current={active ? 'page' : undefined}
+                      onClick={() => navigate(v)}
+                      className={'aa-topnav-tab' + (active ? ' on' : '')}
+                    >
+                      <Icon size={15} aria-hidden />
+                      {t(key)}
+                    </button>
+                  );
+                })}
+              </nav>
+              <Header
+                mode={mode}
+                onToggleMode={setMode}
+                onCmdK={() => setOverlay('palette')}
+                onHelp={() => setOverlay('shortcuts')}
+                onManual={() => setOverlay('manual')}
+                theme={theme}
+                onToggleTheme={toggleTheme}
+                saveSig={saveSig}
+              />
+            </div>
 
             {mainView === 'home' ? (
               <div className="aa-panel">

public/icons/icon-192.png

@@ -47,6 +47,12 @@ export function FactorField({ factor, level, onChange }: Props) {
           </span>
         ))}
       </div>
+      {/* Real-world example for the SELECTED level (Fase 2) — guided-mode guidance only. */}
+      {factor.examples && (
+        <div className="f-gloss guided-only" style={{ marginTop: '6px' }}>
+          {tr(factor.examples[level] ?? factor.examples[0])}
+        </div>
+      )}
     </div>
   );
 }