### Install and Run tweb Development Server

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

Standard commands for installing dependencies, starting the development server, building for production, and running linters.

```bash
pnpm install
pnpm start          # Dev server on :8080
pnpm build          # Production build → dist/
pnpm test           # Run tests (Vitest)
pnpm lint           # ESLint on src/**/*.ts
```

--------------------------------

### Install Dependencies and Run Commands

Source: https://context7.com/morethanwords/tweb/llms.txt

Install dependencies using pnpm, start the dev server, build for production, run tests, or lint the code. Debug flags can be appended to the URL as query parameters.

```bash
pnpm install

pnpm start

pnpm build

pnpm test

pnpm lint

# Debug flags (append to URL as query params)
# ?test=1          → use Telegram test DCs
# ?debug=1         → verbose logging
# ?noSharedWorker=1 → disable SharedWorker (useful for debugging in one tab)
# ?http=1          → force HTTPS transport instead of WebSocket
```

--------------------------------

### Start Development Web Server

Source: https://github.com/morethanwords/tweb/blob/master/README.md

Run this command to start the local development server with live reloading. Access the application at http://localhost:8080/.

```bash
pnpm start
```

--------------------------------

### Start Snapshot Server App

Source: https://github.com/morethanwords/tweb/blob/master/snapshot-server/README.md

Navigate to the snapshot server directory and start the application. Ensure the port matches your development port or omit it to use the default.

```sh
cd ./snapshot-server

pnpm start --port=8080
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/morethanwords/tweb/blob/master/README.md

Use this command to install all necessary project dependencies before developing. Ensure pnpm is installed globally.

```bash
pnpm install
```

--------------------------------

### Snapshot Server for Local Storage Debugging

Source: https://context7.com/morethanwords/tweb/llms.txt

Instructions for starting the snapshot server and using browser console commands to capture and load IndexedDB/localStorage state for debugging.

```bash
# Start snapshot server (from project root)
node snapshot-server/server.js
# → runs on http://localhost:2000

# In browser dev console on http://localhost:8080:
# Take snapshot and download
window.__snapshot?.takeSnapshot();

# Load snapshot file back into the app
window.__snapshot?.loadSnapshot(snapshotFile);

# Useful for reproducing bugs from a specific state
# without needing to recreate a conversation manually
```

--------------------------------

### Take Local Storage Snapshot

Source: https://context7.com/morethanwords/tweb/llms.txt

Generate a snapshot of the local storage. This functionality requires the snapshot server to be running. Refer to `snapshot-server/README.md` for detailed setup instructions.

```javascript
// Take local storage snapshot (if snapshot server is running)
// See snapshot-server/README.md for details
```

--------------------------------

### Docker: Install Dependencies

Source: https://github.com/morethanwords/tweb/blob/master/README.md

Use this Docker Compose command to install dependencies within a containerized environment for development.

```bash
docker-compose up tweb.dependencies
```

--------------------------------

### Docker: Run Development Container

Source: https://github.com/morethanwords/tweb/blob/master/README.md

This command starts the development container using Docker Compose. Access the application at http://localhost:8080/.

```bash
docker-compose up tweb.develop
```

--------------------------------

### Popup Event Listener Setup

Source: https://github.com/morethanwords/tweb/blob/master/CODE_DUPLICATIONS.md

Standard pattern for adding event listeners within popup elements. Ensure `listenerSetter` and `addEventListener` are correctly implemented in the base class.

```typescript
this.listenerSetter.add(element)('click', callback);
this.addEventListener('show', () => { /* setup */ });
this.addEventListener('closeAfterTimeout', () => { /* cleanup */ });
```

--------------------------------

### Solid.js Component with Class Composition

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

Example of a Solid.js component using the `classNames` helper for dynamic class attribute management. Ensure the `classNames` helper is imported from `@helpers/string/classNames`.

```typescript
import {JSX}
import classNames from '@helpers/string/classNames';

export default function MyComponent(props: {
  class?: string,
  children: JSX.Element
}) {
  return (
    <div class={classNames('my-class', props.class)}>
      {props.children}
    </div>
  );
}
```

--------------------------------

### Extend AppManager for Business Logic

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

An example of extending the AppManager class to implement specific business logic within the application. It shows how to hook into lifecycle methods like `after` for initialization and interact with other managers.

```typescript
import {AppManager} from '@appManagers/manager';

export class AppSomethingManager extends AppManager {
  protected after() {
    // Initialization after state loaded
    this.apiUpdatesManager.addMultipleEventsListeners({...});
  }
}
```

--------------------------------

### Build Production Version

Source: https://github.com/morethanwords/tweb/blob/master/README.md

Execute this command to create a minimized production build of the application. The output will be in the 'public' folder, ready to be copied to a web server.

```bash
node build
```

--------------------------------

### Get All Entries from IndexedDB Store

Source: https://github.com/morethanwords/tweb/blob/master/snapshot-server/public/index.html

Retrieves all key-value pairs from a given IndexedDB object store using a cursor.

```javascript
function getAllEntries(store) {
  return new Promise((resolve, reject) => {
    const entries = [];
    const request = store.openCursor();
    request.onsuccess = (event) => {
      const cursor = event.target.result;
      if(cursor) {
        entries.push({key: cursor.key, value: cursor.value});
        cursor.continue();
      } else {
        resolve(entries);
      }
    };
    request.onerror = () => reject(request.error);
  });
}
```

--------------------------------

### Docker: Build Production Image

Source: https://github.com/morethanwords/tweb/blob/master/README.md

Build a production-ready Docker image for your application. Replace placeholders with your Docker Hub username and desired image name.

```bash
docker build -f ./.docker/Dockerfile_production -t {dockerhub-username}/{imageName}:{latest} .
```

--------------------------------

### Subscribe, Dispatch, and Access Managers with rootScope

Source: https://context7.com/morethanwords/tweb/llms.txt

Demonstrates how to subscribe to and dispatch events using the global `rootScope` event bus. Also shows how to access application managers and global state properties. Ensure `rootScope` is imported before use.

```typescript
import rootScope from '@lib/rootScope';
import {BroadcastEvents} from '@lib/rootScope';

// --- Subscribe to events ---
rootScope.addEventListener('user_auth', ({id}) => {
  console.log('Logged in as', id);
});

rootScope.addEventListener('premium_toggle', (isPremium: boolean) => {
  console.log('Premium status changed:', isPremium);
});

// Listen once
rootScope.addEventListener('managers_ready', () => {
  console.log('All managers initialized');
}, {once: true});

// Remove listener
const handler = (chatId: ChatId) => console.log('Chat updated', chatId)
rootScope.addEventListener('chat_update', handler);
rootScope.removeEventListener('chat_update', handler);

// --- Dispatch events (from inside managers only) ---
rootScope.dispatchEvent('settings_updated', {
  key: 'notifications.sound',
  value: true,
  settings: rootScope.settings
});

// Dispatch without re-broadcasting to worker (single-tab only)
rootScope.dispatchEventSingle('theme_changed');

// --- Access managers (all methods return Promise) ---
const chat = await rootScope.managers.appChatsManager.getChat(chatId);
const user = await rootScope.managers.appUsersManager.getUser(userId);

// --- Global state properties ---
rootScope.myId       // current user's PeerId (NULL_PEERID before login)
rootScope.premium    // boolean: current user has Telegram Premium
rootScope.settings   // StateSettings snapshot (synced from manager)

// Full list of typed broadcast events (key → payload):
// 'chat_update' → ChatId
// 'user_auth' → UserAuth
// 'history_append' → {storageKey, message}
// 'message_sent' → {storageKey, tempId, mid, message}
// 'peer_typings' → {peerId, typings}
// 'connection_status_change' → ConnectionStatusChange
// 'premium_toggle' → boolean
// 'story_new' → {peerId, story, cacheType, maxReadId}
// 'stars_balance' → {balance, ton}
// ... (60+ events total, see BroadcastEvents in rootScope.ts)
```

--------------------------------

### Prefix Git Commands with rtk for Optimization

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

Demonstrates the correct usage of RTK by prefixing Git commands to leverage token optimization. Incorrect usage without the prefix is also shown.

```bash
# ❌ Wrong
git add . && git commit -m "msg" && git push

# ✅ Correct
rtk git add . && rtk git commit -m "msg" && rtk git push
```

--------------------------------

### Docker Deployment Commands

Source: https://context7.com/morethanwords/tweb/llms.txt

Provides commands for setting up development and production environments using Docker Compose, and building standalone production images.

```bash
# Development (docker-compose)
docker-compose up tweb.dependencies   # install node_modules
docker-compose up tweb.develop        # dev server on :8080
# → Open http://localhost:8080/

# Production (docker-compose)
docker-compose up tweb.production -d  # nginx serving built assets on :80
# → Open http://localhost/

# Standalone production image build
docker build \
  -f ./.docker/Dockerfile_production \
  -t myuser/tweb:latest \
  .

# Run with custom API credentials
docker run -d -p 80:80 \
  -e VITE_API_ID=YOUR_API_ID \
  -e VITE_API_HASH=YOUR_API_HASH \
  myuser/tweb:latest
```

--------------------------------

### Get User and Contacts with AppUsersManager

Source: https://context7.com/morethanwords/tweb/llms.txt

Retrieve user information, manage contacts, and search for users by name. Ensure the user is logged in to access synchronous properties like `myId`.

```typescript
const managers = rootScope.managers;

// Get a user object
const user = await managers.appUsersManager.getUser(userId); // User.user

// Get current user's ID
const myId = rootScope.myId; // PeerId (available synchronously after login)

// Get contacts list
const contacts = await managers.appUsersManager.getContacts('');

// Search contacts by name
const results = await managers.appUsersManager.getContacts('Alice');

// Resolve a username to a peer
const resolved = await managers.appPeersManager.resolveUsername('telegram');
// resolved: { peerId: PeerId, peer: User | Chat }

// Get top peers (frequently messaged)
const topPeers = await managers.appUsersManager.getTopPeers('correspondents');
// returns: MyTopPeer[] = {id: PeerId, rating: number}[]

// Block / unblock a user
await managers.appPrivacyManager.setPrivacy('inputPrivacyKeyStatusTimestamp', [
  {_: 'inputPrivacyValueDisallowUsers', users: [userInput]}
]);

// Check if can message a user
const canMessage = await managers.appUsersManager.canSendToUser(userId);
```

--------------------------------

### Compact Infrastructure Commands

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

RTK streamlines infrastructure command outputs for Docker and kubectl, providing compact lists and deduplicated logs with substantial token savings.

```bash
rtk docker ps           # Compact container list
rtk docker images       # Compact image list
rtk docker logs <c>     # Deduplicated logs
rtk kubectl get         # Compact resource list
rtk kubectl logs        # Deduplicated pod logs
```

--------------------------------

### Get All Entries from IndexedDB Store

Source: https://github.com/morethanwords/tweb/blob/master/public/snapshot.html

Retrieves all key-value pairs from an IndexedDB object store. This function returns a promise that resolves with an array of entries, where each entry is an object containing the key and value.

```javascript
function getAllEntries(store) { return new Promise((resolve, reject) => { const entries = []; const request = store.openCursor(); request.onsuccess = (event) => { const cursor = event.target.result; if(cursor) { entries.push({key: cursor.key, value: cursor.value}); cursor.continue(); } else { resolve(entries); } }; request.onerror = () => reject(request.error); }); }
```

--------------------------------

### Cache with Expiration Implementation

Source: https://github.com/morethanwords/tweb/blob/master/CODE_DUPLICATIONS.md

A cache implementation that stores values and their expiration times. The `get` method checks if the cached value is still valid before returning it, otherwise it fetches and caches a new value.

```typescript
private cache: {[id: string]: CachedType} = {};
private expiration: {[peerId: PeerId]: number} = {};

public get(id) {
  if(this.cache[id] && Date.now() < this.expiration[id.toPeerId()]) {
    return this.cache[id];
  }
  return this.fetchAndCache(id);
}
```

--------------------------------

### Enable Test DCs

Source: https://github.com/morethanwords/tweb/blob/master/README.md

Append `?test=1` to the URL to utilize test data centers for debugging or testing purposes.

```bash
http://localhost:8080/?test=1
```

--------------------------------

### Run All Project Tests

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

Command to execute all tests within the project using pnpm.

```bash
pnpm test
```

--------------------------------

### Path Aliases in Vite Configuration

Source: https://context7.com/morethanwords/tweb/llms.txt

Source imports use path aliases defined in vite.config.ts for cleaner module resolution. This example shows common aliases and how to import MTProto types and local modules.

```typescript
// vite.config.ts alias table (automatically resolved at build time)
// @components  → src/components/
// @helpers     → src/helpers/
// @hooks       → src/hooks/
// @stores      → src/stores/
// @lib         → src/lib/
// @appManagers → src/lib/appManagers/
// @environment → src/environment/
// @config      → src/config/
// @vendor      → src/vendor/
// @layer       → src/layer.d.ts  (MTProto API types, auto-generated 664KB)
// @types       → src/types.d.ts
// @/*          → src/
// solid-js     → src/vendor/solid (custom fork)

import {Message, Chat, User, InputPeer} from '@layer'; // MTProto types
import rootScope from '@lib/rootScope';               // global event bus
import classNames from '@helpers/string/classNames';  // class composition
import {usePeer} from '@stores/peers';                // reactive peer store
```

--------------------------------

### Compact JavaScript/TypeScript Tooling Commands

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

Optimize output for JavaScript and TypeScript package managers like pnpm, npm, and npx, as well as Prisma, with RTK for significant token reduction.

```bash
rtk pnpm list           # Compact dependency tree (70%)
rtk pnpm outdated       # Compact outdated packages (80%)
rtk pnpm install        # Compact install output (90%)
rtk npm run <script>    # Compact npm script output
rtk npx <cmd>           # Compact npx command output
rtk prisma              # Prisma without ASCII art (88%)
```

--------------------------------

### Take Application Snapshot

Source: https://github.com/morethanwords/tweb/blob/master/public/snapshot.html

Captures the current state of the application, including localStorage and IndexedDB data. Optionally skips sensitive authorization data based on a checkbox.

```javascript
const localStorageData = {};
const shouldSaveAuth = saveAuthorization.checked;
for(let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  // Skip keys starting with 'account', 'dc', 't_account' or 't_dc'
  if(!shouldSaveAuth && (key.startsWith('account') || key.startsWith('dc') || key.startsWith('t_account') || key.startsWith('t_dc'))) {
    continue;
  }
  localStorageData[key] = localStorage.getItem(key);
}
const indexedDBData = {};
const dbs = await indexedDB.databases?.() || [];
for(const {name} of dbs) {
  if(!name) continue;
  indexedDBData[name] = {};
  const db = await openDB(name);
  for(const storeName of db.objectStoreNames) {
    const tx = db.transaction(storeName, 'readonly');
    const store = tx.objectStore(storeName);
    const entries = await getAllEntries(store);
    indexedDBData[name][storeName] = entries;
  }
  db.close();
}
return { comment: snapshotComment.innerHTML, localStorage: localStorageData, indexedDB: indexedDBData };
```

--------------------------------

### Load Snapshot from Server

Source: https://github.com/morethanwords/tweb/blob/master/public/snapshot.html

Fetches a specific snapshot from the server by its filename, parses it, and then calls loadSnapshotFile to restore the application state. Prompts user for confirmation before loading.

```javascript
async function loadSnapshot(filename) {
  if(!confirm(`Are you sure you want to load snapshot "${filename}"? This will overwrite your current storage.`)) {
    return;
  }
  const res = await fetch(`/api/snapshots/${filename}`);
  if(!res.ok) {
    alert('Failed to load snapshot');
    return;
  }
  const snapshotText = await res.text();
  const snapshot = JSON.parse(snapshotText, jsonReviver);
  await loadSnapshotFile(snapshot);
}
```

--------------------------------

### Solid.js Store Initialization Pattern

Source: https://github.com/morethanwords/tweb/blob/master/CODE_DUPLICATIONS.md

This pattern is used for initializing Solid.js stores that require authentication awareness. It sets up a signal and attaches event listeners for authentication events to update the store's value.

```typescript
const [value, setValue] = createRoot(() => createSignal(initialValue));
rootScope.addEventListener('event', setValue);
if(rootScope.myId) {
  rootScope.managers.rootScope.getValue().then(setValue);
} else {
  rootScope.addEventListener('user_auth', () => {
    rootScope.managers.rootScope.getValue().then(setValue);
  });
}
export default function useValue() { return value; }
```

--------------------------------

### Peer Storage Initialization Logic

Source: https://github.com/morethanwords/tweb/blob/master/CODE_DUPLICATIONS.md

Common initialization logic for peer storage across managers, involving loading state and storage, saving entities, and setting up peer-related event listeners. Consider extracting to a shared `initializePeerStorage()` method.

```typescript
return Promise.all([
  this.appStateManager.getState(),
  this.appStoragesManager.loadStorage('entityType')
]).then(([state, {results, storage}]) => {
  this.storage = storage;
  this.saveApiEntities(results);
  this.peersStorage.addEventListener('peerNeeded', (peerId) => { ... });
  this.peersStorage.addEventListener('peerUnneeded', (peerId) => { ... });
});
```

--------------------------------

### Load Snapshot from Local File

Source: https://github.com/morethanwords/tweb/blob/master/public/snapshot.html

Allows the user to select a JSON file containing a snapshot and loads its content into the application. Requires user interaction to select a file.

```javascript
const file = await requestFile('application/json');
if(!file) return;
const text = await file.text();
const snapshot = JSON.parse(text, jsonReviver);
await loadSnapshotFile(snapshot);
```

--------------------------------

### Enable Debug Logging

Source: https://github.com/morethanwords/tweb/blob/master/README.md

Add `?debug=1` to the URL to enable additional logging output, which can be helpful for diagnosing issues.

```bash
http://localhost:8080/?debug=1
```

--------------------------------

### Typed Event Emitter with EventListenerBase

Source: https://context7.com/morethanwords/tweb/llms.txt

Demonstrates how to use EventListenerBase for a typed event system. Includes adding, removing, and listening to multiple events.

```typescript
import EventListenerBase from '@helpers/eventListenerBase';

type MyEvents = {
  'data_ready': (data: string[]) => void;
  'error': (err: Error) => void;
  'progress': (pct: number) => void;
};

class MyEmitter extends EventListenerBase<MyEvents> {
  public load() {
    // Simulate async data
    setTimeout(() => {
      this.dispatchEvent('progress', 0.5);
      this.dispatchEvent('data_ready', ['item1', 'item2']);
    }, 100);
  }
}

const emitter = new MyEmitter();

// Add typed listener
emitter.addEventListener('data_ready', (data) => {
  console.log('Got', data.length, 'items');
});

// Once-listener
emitter.addEventListener('error', (err) => {
  console.error('Error:', err.message);
}, {once: true});

// Subscribe to multiple events at once
emitter.addMultipleEventsListeners({
  data_ready: (data) => console.log(data),
  error: (err) => console.error(err)
});

// Remove listener
const progressHandler = (pct: number) => console.log(pct * 100 + '%');
emitter.addEventListener('progress', progressHandler);
emitter.removeEventListener('progress', progressHandler);

emitter.load();
// Output: "Got 2 items"
```

--------------------------------

### Load Snapshots Function

Source: https://github.com/morethanwords/tweb/blob/master/snapshot-server/public/index.html

Fetches the list of available snapshots from the server and dynamically creates UI elements to display them. Each snapshot item includes a 'Load' and 'Delete' button, along with its comment if available.

```javascript
async function loadSnapshots() {
 const res = await fetch('/api/snapshots');
 const snapshots = await res.json();
 snapshotList.innerHTML = '';
 snapshots.forEach(({name, comment}) => {
 const li = document.createElement('div');
 li.classList.add('snapshot-item')
 const nameEl = document.createElement('span');
 nameEl.textContent = name;
 nameEl.classList.add('snapshot-name');
 const commentEl = document.createElement('div');
 commentEl.innerHTML = comment;
 commentEl.classList.add('snapshot-item-comment');
 const loadBtn = document.createElement('button');
 loadBtn.textContent = 'Load';
 loadBtn.onclick = () => loadSnapshot(name);
 const deleteBtn = document.createElement('button');
 deleteBtn.textContent = 'Delete';
 deleteBtn.onclick = async() => {
 const confirmed = confirm('Are you sure you want to delete this snapshot?');
 if(!confirmed) return;
 await fetch(`/api/snapshots/${name}`, {method: 'DELETE'});
 alert('Snapshot successfully deleted');
 loadSnapshots();
 };
 li.appendChild(nameEl)
 li.appendChild(loadBtn);
 li.appendChild(deleteBtn);
 snapshotList.appendChild(li);
 if((comment || '').trim?.()) snapshotList.appendChild(commentEl);
 });
}
window.onload = loadSnapshots;
```

--------------------------------

### Compact File and Search Commands

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

RTK enhances file listing, reading, and searching commands with compact and grouped outputs, offering considerable token savings.

```bash
rtk ls <path>           # Tree format, compact (65%)
rtk read <file>         # Code reading with filtering (60%)
rtk grep <pattern>      # Search grouped by file (75%)
rtk find <pattern>      # Find grouped by directory (70%)
```

--------------------------------

### Managing Application State Settings

Source: https://context7.com/morethanwords/tweb/llms.txt

Shows how to read and update application settings, including nested properties. Changes persist to IndexedDB and sync to the server.

```typescript
import {appSettings, setAppSettings} from '@stores/appSettings';

// Read settings
const fontSize = appSettings.messagesTextSize; // number (default 14)
const theme = appSettings.theme;               // 'day' | 'night' | 'system'
const sendShortcut = appSettings.sendShortcut; // 'enter' | 'ctrlEnter'
const sound = appSettings.notifications.sound; // boolean

// Update a setting (persists to IndexedDB + server sync)
await setAppSettings('theme', 'night');
await setAppSettings('messagesTextSize', 16);
await setAppSettings('sendShortcut', 'ctrlEnter');
await setAppSettings('notifications', 'sound', true);

// Nested path update
await setAppSettings('stickers', 'suggest', 'installed'); // 'all' | 'installed' | 'none'
await setAppSettings('emoji', 'big', true);

// Auto-download settings per media type + peer type
await setAppSettings('autoDownload', 'photo', {
  contacts: true,
  private: true,
  groups: false,
  channels: false
});

// Lite mode (reduce animations per category)
await setAppSettings('liteMode', 'effects', true);
await setAppSettings('liteMode', 'animations', false);

// Time format
await setAppSettings('timeFormat', 'h12'); // 'h12' | 'h23'
```

--------------------------------

### RTK Cargo Build Command

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

Uses RTK to optimize Cargo build output, aiming for significant savings.

```bash
rtk cargo build
```

--------------------------------

### Transition patterns CSS

Source: https://github.com/morethanwords/tweb/blob/master/CODE_DUPLICATIONS.md

Common CSS transition patterns. Consider creating mixins for opacity and transform transitions.

```scss
transition: opacity var(--transition-standard-in)
```

```scss
transition: transform var(--transition-standard-in)
```

```scss
transition: none !important
```

```scss
transition: opacity .2s ease-in-out
```

--------------------------------

### RTK Meta Commands

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

Manage RTK settings, view usage statistics, and debug RTK itself using these meta commands.

```bash
rtk gain                # View token savings statistics
rtk gain --history      # View command history with savings
rtk discover            # Analyze Claude Code sessions for missed RTK usage
rtk proxy <cmd>         # Run command without filtering (for debugging)
rtk init                # Add RTK instructions to CLAUDE.md
rtk init --global       # Add RTK to ~/.claude/CLAUDE.md
```

--------------------------------

### Create Solid.js Store with Event Listener

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

Defines a Solid.js store using createRoot and createSignal, exporting a hook to access the value. It also sets up an event listener on rootScope to update the store's value.

```typescript
import {createRoot, createSignal} from 'solid-js';
import rootScope from '@lib/rootScope';

const [value, setValue] = createRoot(() => createSignal(initialValue));
rootScope.addEventListener('some_event', setValue);

export default function useValue() {
  return value;
}
```

--------------------------------

### RTK Generic Test Wrapper

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

A generic RTK command wrapper for running tests, optimized to show only failures.

```bash
rtk test <cmd>
```

--------------------------------

### Compact Network Commands

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

RTK offers compact output for network tools like curl and wget, reducing token usage for HTTP responses and download progress.

```bash
rtk curl <url>          # Compact HTTP responses (70%)
rtk wget <url>          # Compact download output (65%)
```

--------------------------------

### Form Input Field Initialization

Source: https://github.com/morethanwords/tweb/blob/master/CODE_DUPLICATIONS.md

Boilerplate for creating and configuring form input fields. Consider using a `FormPopup` base class or a form builder utility for consistency.

```typescript
const inputField = new InputField({label: 'Label', maxLength: 64, required: true});
inputField.validate = () => { /* ... */ };
this.listenerSetter.add(inputField.input)('input', onChange);
```

--------------------------------

### Load and Display Saved Snapshots

Source: https://github.com/morethanwords/tweb/blob/master/public/snapshot.html

Fetches a list of saved snapshots from the server and dynamically creates UI elements to display them. Includes 'Load' and 'Delete' buttons for each snapshot.

```javascript
async function loadSnapshots() {
  const res = await fetch('/api/snapshots');
  const snapshots = await res.json();
  snapshotList.innerHTML = '';
  snapshots.forEach(({name, comment}) => {
    const li = document.createElement('div');
    li.classList.add('snapshot-item')
    const nameEl = document.createElement('span');
    nameEl.textContent = name;
    nameEl.classList.add('snapshot-name');
    const commentEl = document.createElement('div');
    commentEl.innerHTML = comment;
    commentEl.classList.add('snapshot-item-comment');
    const loadBtn = document.createElement('button');
    loadBtn.textContent = 'Load';
    loadBtn.onclick = () => loadSnapshot(name);
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Delete';
    deleteBtn.onclick = async() => {
      const confirmed = confirm('Are you sure you want to delete this snapshot?');
      if(!confirmed) return;
      await fetch(`/api/snapshots/${name}`, {method: 'DELETE'});
      alert('Snapshot successfully deleted');
      loadSnapshots();
    };
    li.appendChild(nameEl)
    li.appendChild(loadBtn);
    li.appendChild(deleteBtn);
    snapshotList.appendChild(li);
    if((comment || '').trim?.()) snapshotList.appendChild(commentEl);
  });
}
```

--------------------------------

### RTK Next Build Command

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

Uses RTK to optimize the Next.js build process, including route metrics, with an estimated 87% savings.

```bash
rtk next build
```

--------------------------------

### Compact Git Commands

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

Use RTK for compact output on various Git commands, offering significant token savings. Git passthrough works for all subcommands.

```bash
rtk git status          # Compact status
rtk git log             # Compact log (works with all git flags)
rtk git diff            # Compact diff (80%)
rtk git show            # Compact show (80%)
rtk git add             # Ultra-compact confirmations (59%)
rtk git commit          # Ultra-compact confirmations (59%)
rtk git push            # Ultra-compact confirmations
rtk git pull            # Ultra-compact confirmations
rtk git branch          # Compact branch list
rtk git fetch           # Compact fetch
rtk git stash           # Compact stash
rtk git worktree        # Compact worktree
```

--------------------------------

### Interact with rootScope Event Bus and Managers

Source: https://github.com/morethanwords/tweb/blob/master/CLAUDE.md

Shows how to use the global rootScope for event handling and accessing application managers. Note that all manager methods return Promises, even if they appear synchronous.

```typescript
import rootScope from '@lib/rootScope';

rootScope.addEventListener('premium_toggle', handler);
rootScope.managers.appChatsManager.getChat(chatId);
```