# Abnabot — twenty Telegram Mini App concepts

Twenty independently designed, Persian-first mobile apps, built from `REDESIGN_BRIEF.md`. Every app starts with subscriptions. Plain HTML, CSS and JavaScript modules; no build or installation required.

**[Atelier admin](http://127.0.0.1:8765/admin-atelier/)** is the matching staff Mini App from `REDESIGN_BRIEF_ADMIN.md`, with customer management, revenue analysis, catalog, payments, communications, bulk jobs and setup. It uses the same persisted world as the customer concepts. See [admin documentation](admin-atelier/README.md).

**[Atelier admin II](http://127.0.0.1:8765/admin-atelier-v2/)** adapts the existing production admin layout into Atelier's visual style. It preserves the nine sections and nested editors, and uses the same shared world. See [version II documentation](admin-atelier-v2/README.md).

| Folder | Direction |
| --- | --- |
| [01-tide](01-tide/) | Pale mineral canvas, deep teal subscription card, segmented usage dial |
| [02-atelier](02-atelier/) | Dark charcoal, apricot actions, precise membership passes |
| [03-signal](03-signal/) | Cobalt control center, compact service tickets, clear status bands |
| [04-orbit](04-orbit/) | Midnight navy, lime controls, radial allowance instrument |
| [05-paper](05-paper/) | Warm paper, oxblood accents, ruled subscription receipts |
| [06-fluid](06-fluid/) | Whole-screen liquid allowance canvas and swipeable subscription selection |
| [07-relay](07-relay/) | Compact native inbox with inline expansion and contextual actions |
| [08-prism](08-prism/) | Spatial dashboard with vertical navigation and asymmetric data tiles |
| [09-fold](09-fold/) | Expandable subscription folios with animated unfolding |
| [10-tempo](10-tempo/) | Expiry timeline with a prominent date axis and progressive meters |
| [11-mosaic](11-mosaic/) | Asymmetric color-block workspace and framed control windows |
| [12-ribbon](12-ribbon/) | Panoramic subscription strips and full-height edge drawers |
| [13-vector](13-vector/) | Flat command console and top-attached command palettes |
| [14-bloom](14-bloom/) | Organic account petals and soft centered dialog panels |
| [15-ledger](15-ledger/) | Indexed notebook pages and full-screen ledger dialogs |
| [16-sprint](16-sprint/) | Data scoreboard lanes and angular action stages |
| [17-haze](17-haze/) | Glass split view and translucent dialog scenes |
| [18-stamp](18-stamp/) | Perforated stamp collection and printed receipt dialogs |
| [19-circuit](19-circuit/) | Account ownership diagram and structured inspection windows |
| [20-pulse](20-pulse/) | Subscription control deck and layered player panels |

Tide and Atelier use the Refero skill's bundled typography, color and interaction references. Live Refero tools were unavailable. The other eighteen were designed independently, as requested. Each folder has its own `DESIGN.md`. Graphics are native SVG/CSS data visualizations; there are no generated bitmap assets.

The second set changes the interaction structure as well as the visual language. Optional shell and action hooks allow whole-screen paging, inbox expansion, a navigation rail, unfolding folios and chronological browsing. Motion respects reduced-motion preferences; usage graphics are derived from actual mock data.

The third set also gives each app its own dialog composition. Optional `renderDialog` and `afterDialog` hooks preserve the shared fields, operations, validation and confirmation behavior while changing geometry, content grouping, controls and motion. The comparison's Details, Renewal plans, Checkout, QR and Settings controls let you inspect all ten dialog systems together without confirming a transaction.

## Run

Serve this entire directory from one origin (keep `shared/` beside the twenty concepts). On this machine the preview server is:

**http://127.0.0.1:8765/**

To start it again from this directory:

```powershell
python -m http.server 8765 --bind 127.0.0.1
```

The root opens Tide. Open any numbered folder directly, or use **Settings → Explore all twenty concepts**. Do not open HTML with `file://`; ES modules require HTTP. For Telegram, serve this folder at your existing HTTPS static mount and point the bot's Mini App URL at a concept's `index.html`.

**[Latest ten — apps and dialogs](http://127.0.0.1:8765/compare-round3.html)**.

[Previous five — live comparison](http://127.0.0.1:8765/compare-new.html) · [Original five — live comparison](http://127.0.0.1:8765/compare.html).

## One shared world

`shared/api.js` is the customer data boundary and owns the single persisted world, simulated request latency, ownership checks, financial ledger, subscriptions, plan offers, panel state, commitments and error behavior. The staff boundary, `shared/admin-api.js`, extends that same world. UI code never reads the store. `shared/api.d.ts` and `shared/admin-api.d.ts` document the public APIs. `shared/app.js` implements common customer workflows; each concept supplies its own layout and styles.

All twenty concepts share one browser-storage world. Buying, renewing, renaming, revoking and deleting in one concept is reflected in the others. Wallet balances are computed from completed ledger entries. Writes are serialized with Web Locks where supported and roll back on failure. Read requests do not rewrite unchanged state, avoiding cross-tab refresh loops.

## Explore the demo

Open the settings icon in any header. No sign-in or password is needed.

| Demo account | World |
| --- | --- |
| `normal` | Three subscriptions: active, expired and missing from panel; 215,500 Toman |
| `partner` | 140 subscriptions; separate wallets of 3,487,250 and 12,040,000 Toman |
| `newcomer` | No subscriptions; zero balance; commitment purchase refusal |
| `staff-as-partner` | The partner's world; permanent deletion unavailable |

You can also launch with `?account=partner`, `?account=newcomer`, or `?account=staff-as-partner`. `?lang=en` / `?lang=fa` selects language; the header control persists the selection. Theme follows Telegram when hosted; settings offers a light/dark preview.

**Settings → Demo scenarios & recovery** exposes selling/renewal/session switches, one-shot failures, bulk partial success, clipboard and QR failures, all eight renewal strategies, a five-minute clock advance and reset. Select a scenario, close settings and perform the corresponding action. API failures consume the next data request; the settings themselves are local demo controls.

Useful cases:

- Normal expired account: permanent deletion intentionally fails once, then succeeds on retry without a refund.
- Partner: search `salman_h_p_1008` for usage error, `salman_h_p_1009` for unavailable usage, `salman_h_p_1007` for no link; `salman_h_p_1004` expires four minutes after seeding.
- Category 2: purchases and renewals paused. Category 4: normal-only; direct access as partner returns no plans.
- Category 5: partner has 650,000 Toman commitment credit with two days remaining. It is unpaid for the normal user.
- Category 6: partner's commitment is in a one-day grace window; paying renews it and reveals plans.
- Bulk scenarios: choose partner, choose the partial-success scenario, then buy ten units in Germany with `branch-{n}`. The result lists exact successful names and charges only those units.
- A second renewal within twenty seconds returns the busy message without charging.
- Wallet search and filters apply to loaded rows. Clearing them resumes history loading. CSV exports every row in the selected wallet with UTF-8 BOM, quoted values and CRLF.

The brief specifies both an up-front total-balance check and a seven-of-ten insufficient-balance result. The demo preserves the total-balance check and provides an explicit injected mid-purchase balance-failure scenario for the latter.

## Mock versus production

This is a functional prototype with simulated finances, provisioning, usage and bot delivery. Example subscription links are deliberately fictional. No real money moves and no Telegram messages are sent. Clipboard, QR encoding, CSV downloads, share sheets and VPN-app deep links use browser/platform capabilities. App imports offer a download fallback if the app does not open.

For production, replace the data boundary with your authenticated HTTP transport while preserving the typed contract. The current mock records request-header shapes and acting-as semantics; it does not validate Telegram signatures. Supply your real server endpoint and bot integration there. Host behavior follows the [Telegram Mini Apps documentation](https://core.telegram.org/bots/webapps).

## Verification

```powershell
node --test shared/api.test.mjs
```

The suite checks seed balances and audience scoping, purchases and partial successes, renewal strategies and locks, trial usage, atomic rollback, commitments, deletion, naming, headers and time progression. Browser workflow scripts and screenshots are in `output/playwright/`; they exercise the actual UI. Run a script with an installed Playwright CLI:

```powershell
npx --yes --package @playwright/cli playwright-cli -s=review open http://127.0.0.1:8765/
npx --yes --package @playwright/cli playwright-cli -s=review run-code --filename=output/playwright/flows.js
```

Bundled assets: [Vazirmatn](https://github.com/rastikerdar/vazirmatn) (SIL Open Font License), [qrcode-generator](https://github.com/kazuhikoarase/qrcode-generator) (MIT). The QR vendor file has a single added ES-module default export; it produces actual QR codes with correction level M.