[jaavid]

Motivation

• Reinstate the previous bilingual Persian-first visual identity and prevent accidental redesign drift.
• Ensure page direction, typography, and flags are stable and local-only so the static docs-site remains consistent across updates.
• Make technical content (URLs, code, Dockerfile, env) reliably LTR inside an RTL page to preserve readability.
• Add automated guards so future changes that remove the identity or introduce CDN dependencies fail the check.

Description

• Added docs/web-ui-identity-contract.md documenting the bilingual rule (Persian primary, English technical), root html direction (lang="fa" dir="rtl"), Handjet brand typography, local-only flags, and no-CDN policy.
• Updated docs-site/src/index.html to set <html lang="fa" dir="rtl" class="dark">, add the Persian-first bilingual header/subtitle/helper line, translate action buttons (Persian-first labels), and mark envOutput, dockerInput, and dockerOutput as dir="ltr" while preserving all existing element IDs and functionality.
• Stabilized fonts and utilities in docs-site/src/input.css to prefer local woff2 (Handjet[wght].woff2), keep Handjet limited to brand via .font-brand, and add reusable classes .ltr, .rtl, and .technical where .technical enforces direction: ltr; text-align: left; unicode-bidi: plaintext;.
• Hardened docs-site/src/app.js to localize status labels for Persian users (ok → سالم, slow → کند, blocked-by-browser → محدودیت مرورگر, failed → ناموفق, untested → بررسی‌نشده) while preserving raw status values in title/aria-label, to render region badges via local flag-icons with support for ir, cn, us, de, gb, fr, nl, jp, ru and safe text fallback, and to mark technical URL/ecosystem text with the .technical class.
• Added regression guard docs-site/scripts/check-ui-contract.mjs that fails if core contract items are missing (root lang/dir, local flag stylesheet, .font-brand, .technical, getRegionBadge() presence, Persian status labels, or forbidden CDN URLs), and exposed it via docs-site/package.json scripts check:ui-contract and test.
• Updated documentation docs/github-pages.md and validation docs/web-v1-validation.md to reference the UI contract, no-CDN rule, and required identity checks.

Testing

• Ran cd docs-site && npm run build which executed the Tailwind build and site copy steps and completed successfully.
• Ran cd docs-site && npm run check:ui-contract which executed docs-site/scripts/check-ui-contract.mjs and reported UI identity contract check passed..
• The combined validation (npm run build && npm run check:ui-contract) was executed and passed in this branch.

---

Codex Task

Summary by CodeRabbit

• New Features

  • Site interface now supports Persian with right-to-left (RTL) layout.
  • Status badges display Persian labels with LTR-preserved technical content.

• Tests

  • Added automated validation script to enforce UI identity contract.

• Documentation

  • Added UI identity contract documentation specifying Persian-first design, RTL requirements, and local-only asset policies.

• Style

  • Updated typography and font styling with Persian-friendly font stack and helper classes.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b4f51a2f-e9bf-4548-844e-bcd86c8e4cf3

📥 Commits

Reviewing files that changed from the base of the PR and between 2806b71 and d86e651.

⛔ Files ignored due to path filters (5)

• docs-site/dist/app.js is excluded by !**/dist/**
• docs-site/dist/assets/fonts/handjet/Handjet-VariableFont.ttf is excluded by !**/dist/**, !**/*.ttf
• docs-site/dist/assets/icons/maven.svg is excluded by !**/dist/**, !**/*.svg
• docs-site/dist/assets/tailwind.css is excluded by !**/dist/**
• docs-site/dist/index.html is excluded by !**/dist/**

📒 Files selected for processing (8)

• docs-site/package.json
• docs-site/scripts/check-ui-contract.mjs
• docs-site/src/app.js
• docs-site/src/index.html
• docs-site/src/input.css
• docs/github-pages.md
• docs/web-ui-identity-contract.md
• docs/web-v1-validation.md

Disabled knowledge base sources:

• Jira integration is disabled

You can enable these sources in your CodeRabbit configuration.

---

📝 Walkthrough

Walkthrough

This PR establishes a UI identity contract for the MirrorToolkit docs-site, locking it to Persian-first RTL layout with local fonts and assets. The contract is defined in a new document, enforced by an automated validation script, implemented across CSS/HTML/JS (fonts, localized strings, RTL markup, component updates), and integrated into the build pipeline and test documentation.

Changes

Persian RTL UI Identity Contract

Layer / File(s)	Summary
UI Identity Contract Specification docs/web-ui-identity-contract.md	Defines the contract: Persian-first bilingual strategy, RTL direction defaults, LTR technical content, Persian-friendly font stack, local-only assets, and stability rules prohibiting redesign drift without updating the contract.
CSS Foundation for RTL and Persian Support docs-site/src/input.css	Extends Handjet font with woff2 support and replaces Tailwind font-sans with an explicit Persian font stack (Vazirmatn, IRANSansX, Noto Sans Arabic, etc.). Adds .ltr, .rtl, and .technical utility classes to control text direction and enforce LTR layout for code blocks within RTL pages.
HTML Localization and RTL Markup docs-site/src/index.html	Converts page from English LTR to Persian RTL by setting lang="fa" and dir="rtl". Translates all UI strings (header, controls, panels) to Persian. Explicitly sets dir="ltr" on code-output textareas to preserve monospace readability.
JS Component Updates for Persian Labels and Styling docs-site/src/app.js	statusBadge() uses Persian label lookup table (بررسی‌نشده, سالم, کند, etc.) instead of hyphen-to-space conversion. getRegionBadge() removes gap-1 class. renderRows() applies technical class to ecosystem labels and updates typography.
Automated UI Contract Enforcement Script docs-site/scripts/check-ui-contract.mjs	Validates built assets for contract compliance: checks index.html for Persian lang="fa", RTL dir="rtl", local flag-icons stylesheet, and forbidden CDN URLs; checks input.css for .font-brand and .technical classes; checks app.js for getRegionBadge() and Persian labels. Exits with code 1 on failure.
Build Pipeline and Publishing Integration docs-site/package.json, docs/github-pages.md	Adds npm scripts check:ui-contract and test (runs build then validation). Updates GitHub Pages publishing docs with required pre-publish commands and explanation that validation protects RTL/Persian labels, brand fonts, local flags, and prevents CDN dependencies.
Validation Test Expectations and Policy docs/web-v1-validation.md	Adds "UI identity contract consistency" to validation scope. Requires npm run check:ui-contract in build workflow. Updates benchmark test expectations from English status labels to Persian equivalents. Adds policy requiring contract updates before any intentional UI identity changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• jaavid/MirrorToolkit#16: Both PRs modify docs-site/src/app.js's status rendering logic; the UI contract's Persian label expectations in this PR are directly coupled to the status-model changes introduced in #16.
• jaavid/MirrorToolkit#12: Both PRs target the docs-site Persian/RTL UI by modifying docs-site/src/app.js (status/region/row rendering) and docs-site/src/index.html (Persian translation and RTL structure) in parallel with i18n changes.
• jaavid/MirrorToolkit#11: The local flag-icons.min.css stylesheet added in #11 is directly required by this PR's validation script, which verifies that index.html references the bundled flag-icons CSS.

Poem

🐰 A Persian tale now graces the web,
With RTL flow and fonts that interweave.
Local flags dance, no CDN thief,
A contract sworn brings visual relief.
Brand and script align in harmony,
Making the docs a joy to see! ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch auto/restore-and-lock-mirrortoolkit-visual-identity

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}