> ## Documentation Index
> Fetch the complete documentation index at: https://docs.woopilot.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Telegram Mini App (TMA) Suite

> A luxury, mobile-native management interface accessible directly within Telegram

# Telegram Mini App (TMA) Suite 📱

The **WooPilot Telegram Mini App** brings desktop-class e-commerce management directly to your smartphone. Launched in 1 tap via the **App** button in the chat menu or via deep-link buttons, TMA provides a fluid, tactile native app experience.

```text theme={null}
┌─────────────────────────────────────────────────────────────────────────────┐
│                          WOOPILOT MINI APP SCREENS                          │
├─────────────────────────────────────────────────────────────────────────────┤
│ ⚡ WooAuto          │ Scenarios & Real-time Reactive Events                │
│ 📊 Artifact Tables  │ Deep-dive interactive data exploration & charts       │
│ 🧭 Visual Diff      │ Staging area for safe 1-click batch mutations         │
│ 🎭 Tone of Voice    │ AI business instructions & multi-select style presets │
│ 👥 Team Management  │ Staff RBAC permissions & single-use invite links      │
│ 💳 Billing & Plans  │ Subscription status, Freemius portal & AI limits      │
└─────────────────────────────────────────────────────────────────────────────┘
```

***

## 🎨 Signature Luxury Dark Design System

The TMA interface is crafted to the highest modern aesthetic standards:

* **Deep Contrast Palette:** Tailored dark slate backgrounds (`#091322` and `#0f1d33`) with vibrant electric blue (`#3b72f6`) and amber gold (`#ddb46b`) accents.
* **Ergonomic 44px+ Touch Targets:** All interactive buttons, switches, and tabs meet Apple Human Interface Guidelines for effortless one-handed mobile use.
* **Tactile Haptic Feedback:** Physical device vibrations accompany toggles, tab switches, and batch mutations via the Telegram WebApp Haptic SDK.
* **Zero Layout Shift:** Rigid Tailwind spacing rules ensure zero jitter and zero zero-padding collapses across all screen sizes.

***

## 🔐 Cryptographic Authentication (`initData`)

Every request from the Mini App to the backend is authenticated via **Telegram `initData` HMAC-SHA256 verification**:

1. The Telegram client signs user metadata (`user_id`, `username`, `auth_date`) with your bot's token.
2. The BFF Gateway validates the signature and timestamp to prevent spoofing and session replay attacks.
3. No passwords, session cookies, or external logins are ever required.


## Related topics

- [WooAuto: The 24/7 Autopilot](/wooauto/overview.md)
- [AI Context & Tone of Voice](/tma/ai-tone-of-voice.md)
- [Visual Diff Staging Table](/tma/diff-table-staging.md)
- [Team Access & Multi-Store Management](/tma/team-access.md)
- [Smart Queries & Interactive Web Tables](/capabilities/smart-queries-tables.md)