Merge pull request #44 from programmerShinobi/feat/phase2b-review-mobile-brand

[fix](ui+i18n): Fase 2b — review sweep, mobile/tablet chrome, calm accents, Guide refresh

Author: programmerShinobi

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** |
+| **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". |
 
 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

@@ -60,8 +60,11 @@ Desktop (≥641px) is unchanged (top nav + header controls as today).
 
 ## 5. Breakpoint & tokens
 
-- 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.
+- ~~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 /
+  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
   uses `viewport-fit=cover`? (verify/set in index.html).
 

e2e/smoke.spec.ts

@@ -15,7 +15,9 @@ async function english(page: Page) {
 test('the four-step flow loads and the recommendation recomputes on a preset', async ({ page }) => {
   await english(page);
 
-  await expect(page.getByText('Architecture Advisor')).toBeVisible();
+  // Two wordmarks exist in the DOM (phone brand left, desktop brand right); the desktop one
+  // renders last and is the visible one at this viewport.
+  await expect(page.getByText('Architecture Advisor').last()).toBeVisible();
   const verdict = page.getByText(VERDICT);
   await expect(verdict).toBeVisible();
   const before = (await verdict.textContent())?.trim();

src/App.tsx

@@ -1,5 +1,6 @@
 import { lazy, Suspense, useEffect, useMemo, useRef, useState } from 'react';
 import { IconBulb, IconCompass, IconHome } from '@tabler/icons-react';
+import { BrandMark } from './components/chrome/BrandMark';
 import { AuroraBackground } from './components/chrome/AuroraBackground';
 import { MobileChrome } from './components/chrome/MobileChrome';
 import { AdvisorMobileBar } from './components/chrome/AdvisorMobileBar';
@@ -221,6 +222,12 @@ export default function App() {
                 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">
+              {/* Phone-only brand (Fase 2b): compass + wordmark on the LEFT — desktop keeps the
+                  brand docked right inside Header; MobileChrome still owns phone navigation. */}
+              <span className="aa-brand-phone" title={t('app.title')}>
+                <BrandMark size={24} />
+                <span className="aa-brand-word">{t('app.title')}</span>
+              </span>
               <nav aria-label={t('m.primaryNav')} className="screen-only aa-topnav">
                 {(
                   [

src/components/chrome/Header.tsx

@@ -106,11 +106,12 @@ export function Header({ mode, onToggleMode, onCmdK, onHelp, onManual, theme, on
         </div>
         </div>
 
-      {/* Brand — far right: monochrome compass (transparent, theme-aware) + wordmark.
-          The wordmark hides on phones (MobileChrome carries navigation labels there). */}
-      <span style={{ display: 'flex', alignItems: 'center', gap: '8px', flex: 'none', color: 'var(--color-text-primary)' }}>
+      {/* Brand — far right on DESKTOP: monochrome compass (transparent, theme-aware) + wordmark.
+          Hidden on phones (the app bar shows the phone brand on the LEFT instead). Layout via
+          .aa-wrap (class, NOT an inline display) so .aa-hide-phone can win on the phone tier. */}
+      <span className="aa-wrap aa-hide-phone" style={{ flex: 'none', color: 'var(--color-text-primary)' }}>
         <BrandMark size={30} />
-        <span className="aa-hide-phone" style={{ fontFamily: 'var(--font-display)', fontSize: '14px', fontWeight: 600, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>
+        <span style={{ fontFamily: 'var(--font-display)', fontSize: '14px', fontWeight: 600, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>
           {t('app.title')}
         </span>
       </span>

src/components/overlays/ManualBook.tsx

@@ -84,16 +84,20 @@ export function ManualBook({ open, onClose, levels, weights }: Props) {
           {/* 1. Overview */}
           {h(L('1 · What this tool is', '1 · Apa itu alat ini'))}
           {p(
-            'Architecture Advisor turns a few questions about your project into a recommended software architecture across five independent dimensions — and shows the full reasoning. It is decision support, not an oracle: every weight is a defensible default you can edit, and every score is traceable.',
-            'Architecture Advisor mengubah beberapa pertanyaan tentang proyek Anda menjadi rekomendasi arsitektur perangkat lunak pada lima dimensi independen — dan menunjukkan seluruh penalarannya. Ini alat bantu keputusan, bukan ramalan: tiap bobot adalah default yang bisa Anda ubah, dan tiap skor dapat ditelusuri.',
+            'Architecture Advisor turns a few questions about your project into a recommended software architecture across five independent dimensions — and shows the full reasoning. It is decision support, not an oracle: every weight is a defensible default you can edit, and every score is traceable. Everything runs 100% in your browser — free, no account, no server, installable, and it keeps working offline.',
+            'Architecture Advisor mengubah beberapa pertanyaan tentang proyek Anda menjadi rekomendasi arsitektur perangkat lunak pada lima dimensi independen — dan menunjukkan seluruh penalarannya. Ini alat bantu keputusan, bukan ramalan: tiap bobot adalah default yang bisa Anda ubah, dan tiap skor dapat ditelusuri. Semuanya berjalan 100% di browser Anda — gratis, tanpa akun, tanpa server, dapat dipasang, dan tetap bekerja offline.',
+          )}
+          {p(
+            'The app has three areas: Home (the landing you saw first), the Advisor (the analysis itself), and Insights (a bilingual learning library over the same 21 architectures — catalog, playbooks, reviews, reference, learning paths, quizzes, and a lab). Section 7 maps every feature.',
+            'Aplikasi punya tiga area: Beranda (halaman depan), Advisor (analisisnya sendiri), dan Wawasan (pustaka belajar dwibahasa atas 21 arsitektur yang sama — katalog, playbook, review, referensi, jalur belajar, kuis, dan lab). Bagian 7 memetakan semua fiturnya.',
           )}
           <span style={code}>{L('PROJECT FACTORS → QUALITY-ATTRIBUTE PRIORITIES → ARCHITECTURE FIT → ANALYSIS', 'FAKTOR PROYEK → PRIORITAS ATRIBUT KUALITAS → KECOCOKAN ARSITEKTUR → ANALISIS')}</span>
 
           {/* 2. The four steps */}
           {h(L('2 · The four steps', '2 · Empat langkah'))}
           {p(
-            '(1) Describe your project with the factors. (2) See the quality-attribute priorities the tool derives. (3) Get the recommendation across all five dimensions, with the trade-off radar and the reasoning. (4) Save or share — export an ADR, a full report, CSV/JSON, or a link.',
-            '(1) Jelaskan proyek Anda lewat faktor. (2) Lihat prioritas atribut kualitas yang diturunkan alat. (3) Dapatkan rekomendasi di kelima dimensi, dengan radar trade-off dan alasannya. (4) Simpan atau bagikan — ekspor ADR, laporan lengkap, CSV/JSON, atau tautan.',
+            '(1) Describe your project with the 14 factors — start from one of the 10 scenario presets if one is close, and use the real-world example shown under each answer. (2) See the quality-attribute priorities the tool derives. (3) Get the recommendation across all five dimensions, with the trade-off radar and the reasoning. (4) Save or share — export an ADR, a full report, CSV/JSON, or a link that reproduces your exact scenario.',
+            '(1) Jelaskan proyek Anda lewat 14 faktor — mulai dari salah satu dari 10 preset skenario bila ada yang mirip, dan manfaatkan contoh nyata di bawah tiap jawaban. (2) Lihat prioritas atribut kualitas yang diturunkan alat. (3) Dapatkan rekomendasi di kelima dimensi, dengan radar trade-off dan alasannya. (4) Simpan atau bagikan — ekspor ADR, laporan lengkap, CSV/JSON, atau tautan yang mereproduksi skenario Anda persis.',
           )}
 
           {/* 3. THE CALCULATION */}