Merge pull request #46 from programmerShinobi/feat/phase2d-advisor-flow-insights-visuals

[feat](advisor+insights): Fase 2d — interactive step rail, collapsible sections, 21 living Catalog symbols, lens banners

Author: programmerShinobi

CHANGELOG.md

@@ -9,6 +9,23 @@ The decision **model** carries its own version, recorded in the
 
 ## [Unreleased]
 
+### Added / Changed (Fase 2d — guided Advisor flow + visual Insights — 2026-07-17)
+
+- **Advisor journey rail is now interactive** — sticky under the app bar, each step (1–4) is a
+  button that scrolls to its section, and a scroll-spy highlights the step you are on.
+- **Advisor sections are modern collapsible cards** — coin + title + chevron on native
+  `<details>` (`StepSection`), open by default so the guided flow still reads top-to-bottom.
+- **Footer simplified** — one professional identity line (brand glyph + copyright + licenses);
+  browser guidance folded into a hover title (FR-EDGE-4 preserved).
+- **How-it-works step numbers** get breathing room above the art.
+- **Catalog: all 21 architectures now have living symbolic art** (`ArchArt`) — on every Catalog
+  card AND a larger labelled diagram on the detail page (universal mono captions like
+  "EVENT BUS · PUB/SUB"), so newcomers can SEE each idea. Same calm animation utilities as the
+  landing (`aa-anim-*`, frozen under reduced-motion / aurora-static).
+- **Playbook / Review / Library each open with a static explanatory visual** (`LensBanner`)
+  showing what the lens itself is: steps → build, evidence → verdict, the reference shelf.
+
+
 ### 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,

docs/03-blueprint/design-specification.md

@@ -279,7 +279,7 @@ utilities via `tailwind.config.js`); view code references these instead of hardc
 | **Type** | `--aa-fs-2xs..2xl` = 11/12/12.5/13.5/15 px + fluid lg/xl/2xl via `clamp()`; `--aa-lh` 1.6 |
 | **Elevation** | `--aa-shadow-sm/md/lg` over a theme-aware `--aa-shadow-color` |
 | **Touch & focus** | `--aa-touch` 44 px (coarse pointers); `--aa-focus-ring` 2 px info, global `:focus-visible` |
-| **Breakpoints** | canonical (cannot be `var()` in `@media`): **phone ≤ 640 px · tablet 641–1024 px · laptop ≥ 1025 px**. **Navigation chrome switches at ≤ 1024 px** (Fase 2b): phones AND tablets share the compact mobile chrome (bottom tab bar, action bar, settings sheet, compact top bar — brand left + Guide) so the app bar never wraps; content-density rules (`.f-div`, overlay padding, grid columns) keep the 640 px phone tier. Historical `-phone` class names mean "compact tier". |
+| **Breakpoints** | canonical (cannot be `var()` in `@media`): **phone ≤ 640 px · tablet 641–1024 px · laptop ≥ 1025 px**. **Navigation chrome switches at ≤ 1180 px** (Fase 2b, raised Fase 2d: ANY width where the app bar would wrap gets the compact chrome): phones, tablets and small laptops share the compact mobile chrome (bottom tab bar, action bar, settings sheet, compact top bar — brand left + Guide) so the app bar never wraps; content-density rules (`.f-div`, overlay padding, grid columns) keep the 640 px phone tier. Historical `-phone` class names mean "compact tier". |
 
 Base classes: `.aa-page` / `.aa-frame` / `.aa-surface` / `.aa-panel` / `.aa-card` / `.aa-wrap` /
 `.aa-touch`. New classes are namespaced `aa-`; no `!important`.

docs/03-blueprint/mobile-experience-plan.md

@@ -62,7 +62,7 @@ Desktop (≥641px) is unchanged (top nav + header controls as today).
 
 - ~~Phone tier: **≤640px** (canonical, design-spec §6.1). Bottom nav + action bar + settings sheet are
   phone-only; ≥641px keeps the current top-nav desktop layout.~~ **Updated (Fase 2b, 2026-07-16):**
-  the navigation chrome now switches at **≤1024px** — tablets share the phone's bottom nav /
+  the navigation chrome now switches at **≤1180px** (raised Fase 2d) — tablets share the phone's bottom nav /
   action bar / settings sheet / compact top bar so the app bar never wraps; only content-density
   rules stay on the 640px phone tier (design-spec §6.1).
 - Safe area: `padding-bottom: env(safe-area-inset-bottom)` on the fixed bars; the viewport already

src/App.tsx

@@ -13,6 +13,7 @@ import { PrintReport } from './components/overlays/PrintReport';
 import { Collapsible } from './components/advisor/Collapsible';
 import { GuidedBanner } from './components/chrome/GuidedBanner';
 import { StepTracker } from './components/chrome/StepTracker';
+import { StepSection } from './components/chrome/StepSection';
 import { PresetBar } from './components/advisor/PresetBar';
 import { Toolbar } from './components/chrome/Toolbar';
 import { C4Preview } from './components/advisor/C4Preview';
@@ -295,45 +296,41 @@ export default function App() {
 
         <div className="f-div" />
 
-        {/* Step 1 — project factors + derived priorities */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '14px' }}>
-          <span className="f-num">1</span>
-          <span style={{ fontSize: '15px', fontWeight: 500 }}>
-            <span className="guided-only">{t('step1.g')}</span>
-            <span className="expert-only">{t('step1.e')}</span>
-          </span>
-        </div>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: '18px' }}>
+        {/* Step 1 — project factors (its own dropdown section; owner feedback: factors and
+            priorities must be SEPARATE so nobody gets confused). */}
+        <StepSection id="aa-sec-1" n="1" titleG="step1.g" titleE="step1.e">
           <FactorInputs levels={levels} onChange={setLevels} />
-          {/* The adjust editor opens RIGHT under the priorities card (owner feedback: it used to
-              land far below the tall factor column, so nobody connected it to "Adjust"). */}
-          <div style={{ display: 'grid', gap: '14px', alignContent: 'start' }}>
-            <PrioritiesCard weights={weights} onAdjust={() => setEditWeights((v) => !v)} editing={mode === 'expert' && editWeights} />
-            {mode === 'expert' && editWeights && <QaOverridePanel weights={weights} overrides={overrides} onChange={setOverrides} />}
+        </StepSection>
+
+        <div className="f-div" />
+
+        {/* Step 2 — derived quality priorities; the adjust editor opens right underneath.
+            Ungated (Fase 2d rev.3, owner): guided users can customise weights too — the
+            plain-language adjuster is newcomer-safe. */}
+        <StepSection id="aa-sec-2" n="2" titleG="step2.g" titleE="step2.e">
+          <div style={{ display: 'grid', gap: '14px' }}>
+            <PrioritiesCard weights={weights} onAdjust={() => setEditWeights((v) => !v)} editing={editWeights} />
+            {editWeights && <QaOverridePanel weights={weights} overrides={overrides} onChange={setOverrides} />}
           </div>
-        </div>
+        </StepSection>
 
         <div className="f-div" />
 
-        {/* Step 3 — recommendation across dimensions */}
-        <div id="adv-plan" style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '13px', scrollMarginTop: '12px' }}>
-          <span className="f-num">3</span>
-          <span style={{ fontSize: '15px', fontWeight: 500 }}>
-            <span className="guided-only">{t('results.title.g')}</span>
-            <span className="expert-only">{t('results.title.e')}</span>
-          </span>
-        </div>
-        <DimensionCards rankings={rankings} current={currentDim} onSelect={setCurrentDim} />
-        <DimensionDetail dim={currentDim} ranked={rankings[currentDim]} weights={weights} />
-        <RadarPanel weights={weights} mode={mode} />
+        {/* Step 3 — recommendation across dimensions (collapsible card, Fase 2d). */}
+        <div id="adv-plan" style={{ scrollMarginTop: '132px' }} />
+        <StepSection id="aa-sec-3" n="3" titleG="results.title.g" titleE="results.title.e">
+          <DimensionCards rankings={rankings} current={currentDim} onSelect={setCurrentDim} />
+          <DimensionDetail dim={currentDim} ranked={rankings[currentDim]} weights={weights} />
+          <RadarPanel weights={weights} mode={mode} />
 
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(250px,1fr))', gap: '14px', marginTop: '16px' }}>
-          <SensitivityCard flips={flips} levels={levels} />
-          <MigrationCard value={migKey} onChange={setMigKey} />
-        </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(250px,1fr))', gap: '14px', marginTop: '16px' }}>
+            <SensitivityCard flips={flips} levels={levels} />
+            <MigrationCard value={migKey} onChange={setMigKey} />
+          </div>
 
-        <AntiPatternWarning rules={antiPatterns} mode={mode} />
-        <HowItDecides />
+          <AntiPatternWarning rules={antiPatterns} mode={mode} />
+          <HowItDecides />
+        </StepSection>
 
         {/* Expert-only depth (build-spec features beyond the prototype mockup). Guided mode
             stays faithful to the prototype; experts get the extra analysis. */}
@@ -364,8 +361,11 @@ export default function App() {
           </div>
         </section>
 
-        <div id="adv-save" className="f-div" style={{ scrollMarginTop: '12px' }} />
-        <Toolbar run={run} status={exportStatus} setStatus={setExportStatus} mode={mode} onImport={importScenario} />
+        <div id="adv-save" className="f-div" style={{ scrollMarginTop: '132px' }} />
+        {/* Step 4 — save & share (collapsible card, Fase 2d). */}
+        <StepSection id="aa-sec-4" n="4" titleG="step4.g" titleE="step4.e">
+          <Toolbar run={run} status={exportStatus} setStatus={setExportStatus} mode={mode} onImport={importScenario} />
+        </StepSection>
 
               <p
                 className="f-gloss"
@@ -402,21 +402,27 @@ export default function App() {
               }}
             />
 
-            {/* Global footer — always visible (both Advisor & Insights); browser guidance (FR-EDGE-4 / SRS §2.3)
-                + copyright & identity (Fase 1, DECISIONS.md). Borderless: whitespace, no hairline. */}
+            {/* Global footer (Fase 2d rev.2 — owner: "rapi & simple"): a tidy two-line centered
+                stack — brand line, then one short legal line. Browser guidance (FR-EDGE-4)
+                lives in the hover title. */}
             <footer
               className="screen-only"
+              title={t('footer.browsers')}
               style={{
-                padding: 'var(--aa-space-6) var(--aa-panel-pad) var(--aa-space-4)',
-                fontSize: 'var(--aa-fs-2xs)',
-                color: 'var(--color-text-tertiary)',
+                display: 'grid',
+                justifyItems: 'center',
+                gap: '6px',
+                padding: 'var(--aa-space-7) var(--aa-panel-pad) var(--aa-space-5)',
                 textAlign: 'center',
               }}
             >
-              <div>{t('footer.browsers')}</div>
-              <div style={{ marginTop: 'var(--aa-space-2)' }}>
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', color: 'var(--color-text-secondary)', fontFamily: 'var(--font-display)', fontSize: '12.5px', fontWeight: 600, letterSpacing: '-0.01em' }}>
+                <BrandMark size={15} />
+                {t('app.title')}
+              </span>
+              <span style={{ fontSize: 'var(--aa-fs-2xs)', color: 'var(--color-text-tertiary)' }}>
                 {SITE_COPYRIGHT} · {t('footer.rights')}
-              </div>
+              </span>
             </footer>
           </div>
         </div>

src/components/advisor/PrioritiesCard.tsx

@@ -18,17 +18,12 @@ export function PrioritiesCard({ weights, onAdjust, editing = false }: Props) {
 
   return (
     <div style={{ border: '0.5px solid var(--color-border-tertiary)', borderRadius: 'var(--border-radius-lg)', padding: '15px 16px' }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '3px' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <span className="f-num">2</span>
-          <span style={{ fontSize: '14px', fontWeight: 500 }}>
-            <span className="guided-only">{t('prio.title.g')}</span>
-            <span className="expert-only">{t('step2.e')}</span>
-          </span>
-        </div>
+      {/* No internal number/title — the StepSection card already shows "2 · …" (owner
+          feedback: factors and priorities are now SEPARATE dropdown sections). */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', marginBottom: '3px' }}>
         <button
           type="button"
-          className="expert-only f-btn"
+          className="f-btn"
           onClick={onAdjust}
           aria-pressed={editing}
           style={

src/components/chrome/StepSection.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import { IconChevronDown } from '@tabler/icons-react';
+import { useI18n } from '../../i18n/I18nContext';
+import type { DictKey } from '../../i18n/dict';
+
+interface Props {
+  /** Anchor id (`aa-sec-N`) — the sticky StepTracker scrolls here and spies on it. */
+  id: string;
+  n: string;
+  titleG: DictKey;
+  titleE: DictKey;
+  children: ReactNode;
+}
+
+// One numbered Advisor section as a modern collapsible card (Fase 2d, owner request):
+// coin + title + chevron on a native <details> (keyboard/screen-reader friendly), open by
+// default so the guided flow still reads top-to-bottom.
+export function StepSection({ id, n, titleG, titleE, children }: Readonly<Props>) {
+  const { t } = useI18n();
+  return (
+    <details id={id} className="aa-sec" open>
+      <summary className="aa-sec-head">
+        <span className="f-num">{n}</span>
+        <span className="aa-sec-title">
+          <span className="guided-only">{t(titleG)}</span>
+          <span className="expert-only">{t(titleE)}</span>
+        </span>
+        <IconChevronDown size={16} className="aa-sec-chev" aria-hidden />
+      </summary>
+      <div className="aa-sec-body">{children}</div>
+    </details>
+  );
+}

src/components/chrome/StepTracker.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useI18n } from '../../i18n/I18nContext';
 import type { DictKey } from '../../i18n/dict';
 
@@ -9,24 +10,52 @@ const STEPS: { n: string; g: DictKey; e: DictKey }[] = [
 ];
 
 // The 4-step journey rail (guided/expert labels swap via .guided-only/.expert-only).
-// Fase 2c redesign: numbered coins on a soft connector rail — modern, calm, and obvious
-// for newcomers ("this is the path you are walking").
+// Fase 2d (owner request): the rail FLOATS (sticky under the app bar), each step is a BUTTON
+// that scrolls to its section, and a scroll-spy highlights WHERE YOU ARE right now.
 export function StepTracker() {
   const { t } = useI18n();
+  const [active, setActive] = useState(1);
+
+  useEffect(() => {
+    let raf = 0;
+    const onScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        let cur = 1;
+        for (let i = 1; i <= STEPS.length; i++) {
+          const el = document.getElementById(`aa-sec-${i}`);
+          if (el && el.getBoundingClientRect().top <= window.innerHeight * 0.4) cur = i;
+        }
+        setActive(cur);
+      });
+    };
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+
+  const go = (i: number) => document.getElementById(`aa-sec-${i}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
   return (
-    <div className="aa-steps">
-      {STEPS.map((s, i) => (
-        <span key={s.n} style={{ display: 'contents' }}>
-          <div className="aa-step">
-            <span className="f-num">{s.n}</span>
-            <span className="aa-step-label">
-              <span className="guided-only">{t(s.g)}</span>
-              <span className="expert-only">{t(s.e)}</span>
-            </span>
-          </div>
-          {i < STEPS.length - 1 && <span className="aa-step-line" aria-hidden />}
-        </span>
-      ))}
-    </div>
+    <nav className="aa-steps aa-glass" aria-label={t('steps.aria')}>
+      {STEPS.map((s, i) => {
+        const on = active === i + 1;
+        return (
+          <span key={s.n} style={{ display: 'contents' }}>
+            <button type="button" className={'aa-step' + (on ? ' on' : '')} aria-current={on ? 'step' : undefined} onClick={() => go(i + 1)}>
+              <span className="f-num">{s.n}</span>
+              <span className="aa-step-label">
+                <span className="guided-only">{t(s.g)}</span>
+                <span className="expert-only">{t(s.e)}</span>
+              </span>
+            </button>
+            {i < STEPS.length - 1 && <span className="aa-step-line" aria-hidden />}
+          </span>
+        );
+      })}
+    </nav>
   );
 }

src/components/chrome/Toolbar.tsx

@@ -56,14 +56,8 @@ export function Toolbar({ run, status, setStatus, mode, onImport }: Props) {
 
   return (
     <div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '11px' }}>
-        <span className="f-num">4</span>
-        <span style={{ fontSize: '15px', fontWeight: 500 }}>
-          <span className="guided-only">{t('export.title.g')}</span>
-          <span className="expert-only">{t('step4.e')}</span>
-        </span>
-      </div>
-
+      {/* No internal heading — the StepSection card already shows "4 · Save & share"
+          (owner feedback: the number was doubled). */}
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: '9px' }}>
         <button
           type="button"