Merge development into master: 1.3.2

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

ARCHITECTURE.md

@@ -219,6 +219,56 @@ called `subscribe` for that buffer.
   rather than only watched. The stream itself
   plays in the window over HLS, with its VODs and clips.
 
+- **Twitch** - a streamer's chat over Twitch's IRC service (read with no account, sent through the
+  official API), with emotes (Twitch's own, animated ones, and the channel's whole set in the picker with the ones the
+  account cannot use greyed out; BetterTTV, FrankerFaceZ and 7TV are browser extensions Twitch does not carry, so
+  they are not drawn), badges as pictures, cheers, replies and threads, subscriptions, gifts and
+  raids, raids out, polls and predictions as they happen, moderation, whispers, shoutouts and blocking.
+  One sign-in on twitch.tv gives the account its API token and the website session its player takes, so
+  the stream plays in the window as the person (their Turbo or subscriptions count) with Twitch's ad
+  breaks said and never skipped.
+
+- **Telegram** - MTProto through grammers (a pure-Rust client, pinned), with each account carrying its own
+  `api_id` and `api_hash` from my.telegram.org (moho embeds none, so no install shares a key) and one saved
+  session per account in a private file that is never re-created on a hiccup. Sign-in by phone, code and cloud
+  password. Chats are read from the dialog list and become buffers under Direct Messages, Groups and Channels
+  (a channel the account cannot write in shows the lock message instead of the message box); history, live
+  messages, edits and deletions, formatting both ways, replies and forwards, service messages as cards, media
+  fetched on demand into a cache, reactions, pins, polls, search in a chat or everywhere, members and profiles,
+  threads and a channel's comments, join by @name or link, administrator actions, and a mute that follows the
+  account. Not supported: secret chats, calls, stories, payments; sign-in by QR code, folders, forum topics,
+  drafts and scheduled messages are not done yet. The code is `nobilis/src/backend/telegram/`.
+
+### Notifications are cards
+
+Anything a service *says* rather than somebody *saying* - a join or part, a topic or mode change, a kick,
+a ban, a timeout, a room's slow mode, a removed message, a raid, a gift, a pinned message, a warning, a
+notice from the server itself - is drawn in the window as a **card**: the same plate Kick's and Twitch's
+events use (`KickEventCard.tsx`), with a mark for what it was, its subject in bold, and what happened.
+This holds for every protocol, and **for every protocol added later**; it is a rule of the design and not
+a styling choice of any one backend.
+
+How a backend takes part, which is the whole of its job:
+
+- It sends the line with a kind that is not speech (`system`, `join`, `part`, `topic`, `mode`, `kick`,
+  `moderation`, and so on - `isChatKind` in `lib/util.ts` is the test). The window then draws a
+  `NotificationCard` for it on its own: a mark chosen by kind (`SYSTEM_MARKS` in `MessageRow.tsx`), the
+  line's own words, a warning in red. Nothing else is needed, which is why a new protocol's notifications
+  are cards from its first connection.
+- It may say more by attaching an embed to the line (`kind: "moderation"`, `"raid"`, `"subscribe"`,
+  `"gift-sub"`, `"stream"`, ...) with the subject in `author`, what happened in `title`, who did it in
+  `description` where that is known, and a Material Symbols glyph in `icon`. A penalty (`gavel`,
+  `timer_off`, `delete`, `block`) draws in the danger colour, anything else in the window's accent.
+- It says each thing **once**. What the service already tells the whole room (a timeout, a mode change) is
+  not also written by the client that caused it; only what happens to this account alone is written
+  locally, as a card.
+- A line that is not speech is **never** left as bare grey text, and a card is never used for a person
+  speaking: the divide is whether somebody said it.
+
+A new protocol is not finished until its joins, parts, topic changes, moderation, mode changes and
+service notices come out of it as cards. `scripts/shot-notification-cards.mjs` draws every kind of line
+beside ordinary chat and a moderation card, to check that they are the same sort of thing.
+
 ## On-disk state
 
 | Path | Contents |

CHANGELOG.md

@@ -17,6 +17,83 @@ Each section has two parts:
   that made it, including dependency updates
   (`node scripts/changelog-deps.mjs <previous tag>` lists those).
 
+## [1.3.2]
+
+### Fixes, patches and changes
+
+- Discord is asked for less and more politely, after what Dissent does to avoid being flagged as a third-party client: reads wait out a rate limit and let an empty bucket refill instead of treating a refusal as an answer; no history is fetched at login (a conversation is read the first time it is opened, 30 messages); a member list is subscribed to once a connection and no longer again at every join and leave; our own membership of each server comes from login and is not asked for; a read mark is sent only while the window is in front, never for a conversation whose last word is yours, and not again after another device sent it; text Discord would refuse (over 2,000 characters, 4,000 with Nitro, or empty) is refused before it is sent; the login declares the capabilities of a user client; the first reconnect wait is four seconds ([moho `74f2c47`](https://github.com/Moho-Chat/moho/commit/74f2c47), [nobilis `7943767`](https://github.com/Moho-Chat/nobilis/commit/7943767))
+- The typing notice to Discord is off unless you turn it on in Settings > Discord, and adding a Discord account says plainly that third-party clients are against Discord's terms and what moho does about that ([moho `74f2c47`](https://github.com/Moho-Chat/moho/commit/74f2c47))
+- A reply's quote, in the line over a reply and in the bar over the box, draws what it quotes - emotes, emoji and stickers as pictures instead of their codes - on every service ([moho `df818a1`](https://github.com/Moho-Chat/moho/commit/df818a1))
+
+## [1.3.1]
+
+### Fixes, patches and changes
+
+- Discord is not spoken to first from here: a server where your account has not said anything since it joined, and a conversation with nothing in it, are locked with a note to send the first message from Discord's own app or website, after Discord flagged accounts for exactly that. Whether you have spoken is looked for in what moho keeps and then in Discord's search (one request a server, remembered), the lock lifts by itself once there is a message of yours there, and a message sent from moho does not count ([moho `b04189a`](https://github.com/Moho-Chat/moho/commit/b04189a), [nobilis `b9a79e4`](https://github.com/Moho-Chat/nobilis/commit/b9a79e4))
+- Discord messages carry a nonce and an explicit list of who may be mentioned, as Discord's own clients send them; a file is checked against what the account may upload before any of it is sent, and waits a few seconds after a message instead of following straight on ([moho `b04189a`](https://github.com/Moho-Chat/moho/commit/b04189a), [nobilis `b9a79e4`](https://github.com/Moho-Chat/nobilis/commit/b9a79e4))
+- Taking bold, italic, underline or strikethrough off all of the message box (select all, then the same button or key) works, and undo and redo step over formatting and leave the selection where it was ([moho `5b438be`](https://github.com/Moho-Chat/moho/commit/5b438be))
+
+## [1.3.0]
+
+### Major features
+
+- **Telegram, ported:** your chats, groups, channels and bots in the same window as everything else. Sign in with your phone number, the code Telegram sends and your two-step password if you have one, using your own API id and hash from my.telegram.org (one is enough for every client you use); the session is kept, so a restart does not sign in again.
+- **Telegram conversations:** private chats and bots as direct messages, groups and supergroups on the server rail like Discord's servers, channels with their posts, and a group's forum topics as conversations of their own. A horn marks a broadcast channel and a robot a bot. History loads as you scroll, new messages, edits and deletions arrive live, and messages you send, edit and delete go out the same way.
+- **Telegram messages:** formatting, replies (with the quote shown above and a click to the original, even in another channel), forwards with a link back to where they came from, pictures, videos, files and voice messages drawn as they arrive and fetched when played, link cards, and Instant View articles opened in a window of their own.
+- **Telegram on top of the chat:** reactions, pinned messages, polls (voting and making them), search, comments and thread counts on channel posts, a member list with moderation where you have the rights, muting, joining by link, and the GIF picker with your saved GIFs and Telegram's own search.
+- **Telegram bots:** a bot's inline buttons are drawn under its message and pressed from the window, and the Menu button opens the bot's own command list.
+- **Discord stays signed in:** a restart within a couple of minutes resumes the session Discord is already holding instead of logging in again, only the conversations that have something new are asked about, and a limit on fresh logins (3 an hour, 8 a day) holds the connection and says why, with a Connect anyway button when you mean it.
+- **One video player on every service:** play, seek, a volume slider that opens on hover, elapsed or remaining time, speed, full screen, save, and edit on your own messages.
+
+### Fixes, patches and changes
+
+- Select text in a message or in the message box, right-click it and search the web for it, in your default browser, with the engine chosen in Settings > General: DuckDuckGo, Google, Bing, Brave Search, Startpage, Ecosia, Qwant, Yandex, Kagi, or an address of your own ([moho `4233439`](https://github.com/Moho-Chat/moho/commit/4233439))
+- Formatting in the message box can be taken off again with the same button or key, over a whole run, part of one or a mixed selection, and undo and redo step over each change and leave the selection where it was ([moho `496d18f`](https://github.com/Moho-Chat/moho/commit/496d18f))
+- Discord sends this install's id, language and timezone with its requests, as its own clients do; it still says it is moho ([moho `3a6c8da`](https://github.com/Moho-Chat/moho/commit/3a6c8da), [nobilis `3bf68e7`](https://github.com/Moho-Chat/nobilis/commit/3bf68e7))
+- Discord resumes its session after a restart, asks only about conversations that moved on, posts typing at most every eight seconds and does not repeat a read mark ([moho `ab8f40f`](https://github.com/Moho-Chat/moho/commit/ab8f40f), [nobilis `e8b25d9`](https://github.com/Moho-Chat/nobilis/commit/e8b25d9))
+- Discord limits fresh logins per account, holds the connection when it is over, and lets you through with Connect anyway ([moho `59f978d`](https://github.com/Moho-Chat/moho/commit/59f978d), [nobilis `8a7d733`](https://github.com/Moho-Chat/nobilis/commit/8a7d733), [moho `8f62f44`](https://github.com/Moho-Chat/moho/commit/8f62f44), [nobilis `58bf5ac`](https://github.com/Moho-Chat/nobilis/commit/58bf5ac))
+- Discord's membership-screening dialog is drawn as Discord draws it, with the rules, the questions and the answers sent ([moho `23afcb6`](https://github.com/Moho-Chat/moho/commit/23afcb6), [nobilis `63093e1`](https://github.com/Moho-Chat/nobilis/commit/63093e1))
+- Discord messages made of layout components (containers, sections, text, pictures) are drawn as cards with their buttons ([moho `c64812c`](https://github.com/Moho-Chat/moho/commit/c64812c), [nobilis `41c2780`](https://github.com/Moho-Chat/nobilis/commit/41c2780))
+- Discord's APP mark on bots and applications, a check on verified ones, and OFFICIAL on the platform's own account and its messages; badges sit between the name and the time ([moho `2f4c204`](https://github.com/Moho-Chat/moho/commit/2f4c204), [nobilis `dba7731`](https://github.com/Moho-Chat/nobilis/commit/dba7731), [moho `510627f`](https://github.com/Moho-Chat/moho/commit/510627f), [nobilis `5501675`](https://github.com/Moho-Chat/nobilis/commit/5501675), [moho `5d2d0fe`](https://github.com/Moho-Chat/moho/commit/5d2d0fe))
+- Discord: an emoji picked from another server's section goes in as its token and not the number that names it, and the hover toolbar and recent list no longer show bare numbers ([moho `9a86141`](https://github.com/Moho-Chat/moho/commit/9a86141), [moho `f1bf63a`](https://github.com/Moho-Chat/moho/commit/f1bf63a))
+- Discord reads a backslash before punctuation as an escape in messages, link previews and embed field values ([moho `eb549f7`](https://github.com/Moho-Chat/moho/commit/eb549f7), [moho `a2a8949`](https://github.com/Moho-Chat/moho/commit/a2a8949))
+- Videos go full screen by themselves on every service, filling the screen, with no second expand button and no viewer ([moho `bf5c33d`](https://github.com/Moho-Chat/moho/commit/bf5c33d), [moho `1387907`](https://github.com/Moho-Chat/moho/commit/1387907), [moho `aab10c7`](https://github.com/Moho-Chat/moho/commit/aab10c7), [moho `72d5b83`](https://github.com/Moho-Chat/moho/commit/72d5b83))
+- A left click on the tray icon puts the window away when it is showing and brings it back when it is not ([moho `4ebabb2`](https://github.com/Moho-Chat/moho/commit/4ebabb2))
+- The GIF picker is offered only where a GIF link shows as a picture: not on Steam, Twitch, Sneedchat or IRC ([moho `40505af`](https://github.com/Moho-Chat/moho/commit/40505af), [moho `7a2fda0`](https://github.com/Moho-Chat/moho/commit/7a2fda0))
+
+## [1.2.1]
+
+### Fixes, patches and changes
+
+- Steam signs in as a desktop client of its own, with a machine id and a logon id that belong to the install, instead of as the Steam mobile app (a "phone" reporting a Linux desktop, with no machine id, which Steam raised an account alert about), and waits longer before reconnecting after Steam closes a connection. Sign in to Steam again from Accounts to take on the new identity; the old one stays in Steam's list of devices until you remove it there ([moho `fceec5d`](https://github.com/Moho-Chat/moho/commit/fceec5d), [nobilis `f3de870`](https://github.com/Moho-Chat/nobilis/commit/f3de870))
+
+## [1.2.0]
+
+### Major features
+
+- **Twitch, fully ported:** a streamer's chat beside the stream, in the same window as everything else. Read with no account at all, or sign in once and have chat, video, channel points, moderation and whispers from that single sign-in.
+- **Twitch chat:** messages with name colours, badges, cheers with their pictures, replies and threads, Twitch's own emotes (animated ones move), first-time and returning chatters, and subscriptions, gifts, raids and announcements drawn as cards. The channels you follow are opened the first time you sign in, and the member list counts who is talking.
+- **Twitch video:** the stream plays in the window the way Kick's does, in the conversation, in the corner or in a window of its own, with a resolution menu, captions where the streamer sends them, and Twitch's ad breaks said instead of left to look like a fault. A subscriber's or Turbo account plays without them.
+- **Twitch emotes:** the picker shows the selected channel's whole set with the ones you cannot use greyed out and the usable ones first, then Twitch's own, then a section for each other channel that gives you emotes, each with the channel's picture. What you send leaves as its word and shows as its picture in your own line; an emote that lapses leaves the picker, and an emote that cannot be sent in a conversation is not offered as a recent one on any service.
+- **Twitch channel points:** the balance on a plaque, one panel over the chat that lists a channel's rewards cheapest first and redeems them (Highlight My Message, Choose an Emote to Unlock, Unlock a Random Sub Emote, Modify a Single Emote, and the streamer's own, with the text a reward asks for), and watching a stream in moho now earns points because the player reports that it is being watched, once a minute and only while the picture is playing, with a switch in Settings.
+- **Twitch polls, predictions and raids** as they happen, as cards: vote in a poll and bet on a prediction from the card, and go along with a raid.
+- **Twitch moderation and whispers** from one sign-in: removing messages, timeouts, bans, the room's modes, announcements, shoutouts, blocking, and whispers as conversations of their own, from menus and from slash commands, for the channels where the account has the rights.
+- **Twitch's own sections in the list:** Channels and Direct Messages are fixed headings, and a whisper is a conversation named for the person, with a badge to tell it from a channel.
+- **Kick and Twitch share one rewards panel** for channel points, opened from the plaque over the chat like the quick switcher.
+
+### Fixes, patches and changes
+
+- Every notification a service sends is drawn as a card in the same style, and that is the rule for protocols to come ([moho `9ef8a67`](https://github.com/Moho-Chat/moho/commit/9ef8a67))
+- IRC explains a channel's modes in words when you join and when one changes, so `+Cnrt` is not left for a new user to decode ([moho `34fcddf`](https://github.com/Moho-Chat/moho/commit/34fcddf), [nobilis `28481f3`](https://github.com/Moho-Chat/nobilis/commit/28481f3))
+- Sneedchat greentext is drawn in 4chan's green, and a sent greentext line is matched with the site's coloured echo ([moho `bb2edf5`](https://github.com/Moho-Chat/moho/commit/bb2edf5))
+- Recent emoji are offered only where they can be sent, in every conversation of every service ([moho `aacbde7`](https://github.com/Moho-Chat/moho/commit/aacbde7))
+- The channel list, the member list, the stream above the conversation and the corner panel can be resized by dragging their edges ([moho `d1e39f1`](https://github.com/Moho-Chat/moho/commit/d1e39f1))
+- Kick video plays about 3.5 seconds behind instead of 20, without rebuilding the picture on every new address, and has a resolution menu and live captions ([moho `3aff255`](https://github.com/Moho-Chat/moho/commit/3aff255), [nobilis `9f0ca86`](https://github.com/Moho-Chat/nobilis/commit/9f0ca86))
+- Kick video no longer guesses prefetched segments for streams whose segments differ in length ([moho `a7ef798`](https://github.com/Moho-Chat/moho/commit/a7ef798))
+- Kick shows threads from replies and removed messages, struck through, left out or replaced as chosen ([moho `8e3d110`](https://github.com/Moho-Chat/moho/commit/8e3d110), [nobilis `bb318cf`](https://github.com/Moho-Chat/nobilis/commit/bb318cf))
+- Kick's recently-talking count keeps rising past the length of what is listed ([moho `987644e`](https://github.com/Moho-Chat/moho/commit/987644e), [nobilis `41e93b8`](https://github.com/Moho-Chat/nobilis/commit/41e93b8))
+- Kick's points plaque follows its push, and badge pictures are drawn beside names ([moho `dd44e76`](https://github.com/Moho-Chat/moho/commit/dd44e76), [nobilis `4c17be0`](https://github.com/Moho-Chat/nobilis/commit/4c17be0))
+
 ## [1.1.0]
 
 ### Major features

README.md

@@ -3,13 +3,13 @@
 **Every conversation you're in, in one window.**
 <img width="1545" height="912" alt="showcase-screenshot" src="https://github.com/user-attachments/assets/b9dabddb-bb3c-4a71-b872-9ad167ecd400" />
 
-moho is a desktop chat client that speaks IRC, Discord, Matrix, Kick, Sneedchat, Steam and many more protocols at the
+moho is a desktop chat client that speaks IRC, Discord, Matrix, Kick, Twitch, Sneedchat, Steam and many more protocols at the
 same time. Whether the room is a twenty-year-old IRC channel, a Discord server, an encrypted Matrix room, or a
 stream's chat going past at forty lines a minute you're able to be part of the conversation.
 
 ## What it does
 
-- **Many networks, one place.** IRC, Discord, Matrix, Kick, Sneedchat, Steam and many more protocols soon, side by side, with
+- **Many networks, one place.** IRC, Discord, Matrix, Kick, Twitch, Sneedchat, Steam and many more protocols soon, side by side, with
   the same reply, edit, react, search and tag-someone gestures on each — as far as each
   service actually supports them.
 - **Calls.** Voice, camera and screen sharing on Discord and on Matrix, voice rooms and calls on Steam, including the group
@@ -18,7 +18,7 @@ stream's chat going past at forty lines a minute you're able to be part of the c
   the corner or pop out into a window of its own.
 - **Matrix, properly encrypted.** End-to-end encryption with device verification by emoji or
   QR, cross-signing, key backup, and encrypted attachments.
-- **Kick streams in the window.** Watch the stream beside its chat, in the corner or in a
+- **Kick and Twitch streams in the window.** Watch the stream beside its chat, in the corner or in a
   window of its own, polls, predictions and other interactive methods are functional and at your fingertips. 
 - **Yours.** GPL-3.0, no telemetry, no account with us — your history is a SQLite file on
   your own disk.
@@ -31,6 +31,7 @@ stream's chat going past at forty lines a minute you're able to be part of the c
 | **Matrix** | Supported | Rooms, spaces and direct messages, end-to-end encryption with device verification and key backup, Element Call, and signing in by QR code |
 | **Discord** | Supported | Servers, direct messages, forums and threads, voice, video, screen sharing and Go Live with end-to-end encryption, stages and the soundboard |
 | **Kick** | Supported | A streamer's chat beside the stream, with polls, predictions and its events drawn as cards |
+| **Twitch** | Supported, fully ported | A streamer's chat beside the stream, which plays in the window with a resolution menu and its ad breaks said; emotes (animated, and the channel's whole set with the ones you cannot use greyed out), badges, cheers, replies and threads, its events drawn as cards, channel points with a rewards panel and watch time that earns them, polls, predictions and raids you can answer, and moderation and whispers, all from one sign-in |
 | **Sneedchat** | Supported | The forum's chat rooms, over clearnet or Tor |
 | **Steam** | Supported, fully ported | Friends and direct messages, group chats with rooms, roles and invitations, voice rooms and calls, emoticons, stickers, reactions, pictures and files, friend folders, and signing in by password or by QR code |
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "moho",
-  "version": "1.1.0",
+  "version": "1.3.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "moho",
-      "version": "1.1.0",
+      "version": "1.3.2",
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@electron-toolkit/preload": "^3.0.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moho",
-  "version": "1.1.0",
+  "version": "1.3.2",
   "description": "Unified desktop chat client for IRC, Discord, Sneedchat and Matrix",
   "author": "Salastil <[email protected]>",
   "license": "GPL-3.0-or-later",

scripts/check-composer-format.mjs

@@ -0,0 +1,225 @@
+#!/usr/bin/env node
+/**
+ * Formatting in the message box, in a scratch moho with injected state (nothing is contacted): a format applied
+ * to a selection can be taken off again - by the keyboard shortcut or the strip's button, over the whole run,
+ * over part of it, or over a selection reaching past it - and each step can be undone with the box's own undo.
+ *
+ *   node scripts/check-composer-format.mjs        (SERVICE=sneedchat to try another service's box)
+ */
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const SERVICE = process.env.SERVICE ?? 'discord'
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+const results = []
+const check = (what, ok, detail = '') => {
+  results.push(ok)
+  console.log(ok ? '  ok  ' : '  FAIL', what, ok ? '' : detail)
+}
+const BOX = '.composer-input'
+const html = () => ev(`document.querySelector(${JSON.stringify(BOX)}).innerHTML.replace(/ data-[a-z-]+="[^"]*"/g, (m) => m.startsWith(' data-fmt') ? m : '')`)
+/** The text the box would send, with the markers of what is bold, italic, and so on in it. */
+const marked = () =>
+  ev(`(() => {
+    const mark = { bold: '**', italic: '_', underline: '__', strike: '~~', code: '\`', spoiler: '||', quote: '> ' }
+    const native = { B: 'bold', STRONG: 'bold', I: 'italic', EM: 'italic', U: 'underline', S: 'strike', STRIKE: 'strike' }
+    const walk = (n) => {
+      if (n.nodeType === 3) return n.nodeValue
+      const kind = n instanceof HTMLElement ? (n.dataset.fmt ?? native[n.nodeName]) : null
+      const inner = [...n.childNodes].map(walk).join('')
+      return kind ? (mark[kind] ?? '') + inner + (kind === 'quote' ? '' : mark[kind] ?? '') : inner
+    }
+    return walk(document.querySelector(${JSON.stringify(BOX)}))
+  })()`)
+const type = async (text) => {
+  await ev(`(() => { const b = document.querySelector(${JSON.stringify(BOX)}); b.focus(); b.innerHTML = '' })()`)
+  await page.call('Input.insertText', { text })
+}
+const select = (needle, nth = 0) =>
+  ev(`(() => {
+    const box = document.querySelector(${JSON.stringify(BOX)})
+    const text = []
+    const w = document.createTreeWalker(box, NodeFilter.SHOW_TEXT)
+    for (let n; (n = w.nextNode()); ) text.push(n)
+    const all = text.map((t) => t.nodeValue).join('')
+    let at = -1
+    for (let i = 0; i <= ${nth}; i++) at = all.indexOf(${JSON.stringify(needle)}, at + 1)
+    if (at < 0) return false
+    const locate = (offset) => { let seen = 0; for (const t of text) { if (offset <= seen + t.nodeValue.length) return [t, offset - seen]; seen += t.nodeValue.length } }
+    const [a, ao] = locate(at)
+    const [b, bo] = locate(at + ${JSON.stringify(needle)}.length)
+    const r = document.createRange()
+    r.setStart(a, ao); r.setEnd(b, bo)
+    const s = getSelection(); s.removeAllRanges(); s.addRange(r)
+    box.focus()
+    return true
+  })()`)
+const key = (k, { ctrl = false, commands } = {}) =>
+  page.call('Input.dispatchKeyEvent', { type: 'keyDown', key: k, code: 'Key' + k.toUpperCase(), windowsVirtualKeyCode: k.toUpperCase().charCodeAt(0), modifiers: ctrl ? 2 : 0, commands })
+const bold = () => key('b', { ctrl: true })
+const undo = () => key('z', { ctrl: true, commands: ['undo'] })
+const redo = () => key('z', { ctrl: true, commands: ['redo'] })
+const strip = async (title) => {
+  await sleep(150)
+  return ev(`(() => { const b = [...document.querySelectorAll('.format-bar button')].find((x) => x.title === ${JSON.stringify(title)}); if (!b) return false; b.click(); return true })()`)
+}
+
+try {
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
+  await ev(`(() => {
+    const s = window.__mohoShots.store
+    const acct = { id: '${SERVICE}:me', service: '${SERVICE}', name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, nick: 'me' }
+    const buf = { id: '${SERVICE}:me|chat', accountId: '${SERVICE}:me', kind: 'channel', name: 'chat', lastActivityTs: 5, category: 'Channels', groupId: 'account:${SERVICE}:me' }
+    s.set({ accounts: [acct], groups: [{ id: 'account:${SERVICE}:me', accountId: '${SERVICE}:me', service: '${SERVICE}', kind: 'account', name: 'me', position: 0 }], buffers: [buf], messagesByBuffer: { '${SERVICE}:me|chat': [] }, activeBufferId: '${SERVICE}:me|chat' })
+    s.selectGroup('account:${SERVICE}:me')
+  })()`)
+  await sleep(1200)
+
+  console.log('Applying and taking off')
+  await type('one two three four')
+  await select('two')
+  await bold()
+  check('bold goes on', (await marked()) === 'one **two** three four', await marked())
+  await bold()
+  check('the same key again takes it off', (await marked()) === 'one two three four', await marked())
+  await bold()
+  check('and again puts it back', (await marked()) === 'one **two** three four', await marked())
+
+  console.log('Undo')
+  await undo()
+  check('undo takes the bold back off', (await marked()) === 'one two three four', await marked())
+  await redo()
+  check('redo puts it on again', (await marked()) === 'one **two** three four', await marked())
+  check('redo leaves the word selected, not the whole message', (await ev(`String(getSelection())`)) === 'two', await ev(`String(getSelection())`))
+  await bold()
+  await undo()
+  check('undo puts it back after it was taken off', (await marked()) === 'one **two** three four', await marked())
+  check('and leaves the word selected', (await ev(`String(getSelection())`)) === 'two', await ev(`String(getSelection())`))
+
+  console.log('All of the box')
+  await type('one two three')
+  await ev(`(() => { const b = document.querySelector(${JSON.stringify(BOX)}); b.focus(); getSelection().selectAllChildren(b) })()`)
+  await bold()
+  check('everything goes bold (select all, then the key)', (await marked()) === '**one two three**', await marked())
+  await bold()
+  check('and the key again takes it all off', (await marked()) === 'one two three', await marked())
+  await bold()
+  await undo()
+  check('and undo puts the box back as it was', (await marked()) === 'one two three', await marked())
+  await ev(`(() => { const b = document.querySelector(${JSON.stringify(BOX)}); b.focus(); getSelection().selectAllChildren(b) })()`)
+  await sleep(250)
+  await strip('Bold')
+  await sleep(250)
+  check('everything goes bold from the strip', (await marked()) === '**one two three**', await marked())
+  await strip('Bold')
+  check('and the strip again takes it all off', (await marked()) === 'one two three', await marked())
+  for (const [title, m] of [['Code', '`'], ['Spoiler', '||'], ['Italic', '_']]) {
+    await ev(`(() => { const b = document.querySelector(${JSON.stringify(BOX)}); b.focus(); getSelection().selectAllChildren(b) })()`)
+    await sleep(250)
+    await strip(title)
+    const on = await marked()
+    await sleep(250)
+    await strip(title)
+    check(`${title}: all of the box goes on and comes off again`, on === `${m}one two three${m}` && (await marked()) === 'one two three', `${on} -> ${await marked()}`)
+  }
+
+  console.log('Formats the window makes itself (code, spoiler) undo as well')
+  for (const [title, m] of [['Code', '`'], ['Spoiler', '||']]) {
+    await type('one two three four')
+    await select('two')
+    await sleep(250)
+    await strip(title)
+    const on = await marked()
+    await undo()
+    const off = await marked()
+    const kept = await ev(`String(getSelection())`)
+    await redo()
+    check(`${title}: on, undo takes it off with the word still selected, redo puts it on`, on === `one ${m}two${m} three four` && off === 'one two three four' && kept === 'two' && (await marked()) === on, `${on} | ${off} | ${kept} | ${await marked()}`)
+    await ev(`(() => { const b = document.querySelector(${JSON.stringify(BOX)}); b.focus(); getSelection().selectAllChildren(b) })()`)
+    await sleep(250)
+    await strip(title)
+    await strip(title)
+    await undo()
+    check(`${title}: over all of the box, taken off and undone`, (await marked()).replace(/[\`|]/g, '') === 'one two three four' && (await marked()).includes(m), await marked())
+  }
+
+  console.log('Undo leaves a selection that is safe to type over')
+  await type('one two three four')
+  await select('two')
+  await bold()
+  await undo()
+  check('after undo the word is selected, not the whole message', (await ev(`String(getSelection())`)) === 'two', await ev(`String(getSelection())`))
+
+  console.log('The ends of the box')
+  await type('one two')
+  await select('one')
+  await bold()
+  check('the first word goes bold', (await marked()) === '**one** two', await marked())
+  await bold()
+  check('and comes off', (await marked()) === 'one two', await marked())
+  await select('two')
+  await bold()
+  check('the last word goes bold', (await marked()) === 'one **two**', await marked())
+  await bold()
+  check('and comes off', (await marked()) === 'one two', await marked())
+
+  console.log('Other formats')
+  await type('one two three')
+  await select('two')
+  await key('i', { ctrl: true })
+  check('italic goes on', (await marked()) === 'one _two_ three', await marked())
+  await select('one two thr')
+  await bold()
+  check('bold over italic keeps both', (await marked()) === '**one _two_ thr**ee', await marked())
+  await key('i', { ctrl: true })
+  check('italic over text that is only partly italic makes all of it italic', (await marked()) === '**_one two thr_**ee', await marked())
+  await key('i', { ctrl: true })
+  check('and again takes italic off all of it, leaving the bold', (await marked()) === '**one two thr**ee', await marked())
+
+  console.log('Lines')
+  await type('first line')
+  await page.call('Input.dispatchKeyEvent', { type: 'keyDown', key: 'Enter', code: 'Enter', windowsVirtualKeyCode: 13, modifiers: 8 })
+  await page.call('Input.insertText', { text: 'second line' })
+  if (!(await select('line\nsecond'))) await select('linesecond')
+  await bold()
+  const lines = await ev(`document.querySelector(${JSON.stringify(BOX)}).innerHTML`)
+  check('a selection over two lines is bold, and the break is still there', /<b>|data-fmt="bold"/.test(lines) && (/<br/.test(lines) || /\n/.test(lines)) && (await marked()).replace(/\n/g, '').includes('**'), lines)
+  await bold()
+  check('and comes off whole', !/data-fmt|<b>/.test(await html()), await html())
+
+  console.log('Part of a run')
+  await type('one two three four')
+  await select('two three')
+  await bold()
+  await select('wo th')
+  await bold()
+  check('part of a run is taken off, the rest stays', (await marked()) === 'one **t**wo th**ree** four', await marked())
+
+  console.log('Reaching past a run')
+  await type('one two three four')
+  await select('two')
+  await bold()
+  await select('one two thr')
+  await bold()
+  check('a selection partly bold is made all bold, not doubled', (await marked()) === '**one two thr**ee four', await marked())
+  await bold()
+  check('and the next press takes it all off', (await marked()) === 'one two three four', await marked())
+
+  console.log('The strip')
+  await type('one two three four')
+  await select('three')
+  await sleep(300)
+  check('the strip offers bold', await strip('Bold'))
+  check('and it goes on', (await marked()) === 'one two **three** four', await marked())
+  await sleep(300)
+  check('the strip button again takes it off', (await strip('Bold')) && (await marked()) === 'one two three four', await marked())
+  await undo()
+  check('and undo puts it back', (await marked()) === 'one two **three** four', await marked())
+} catch (e) {
+  console.log('  FAIL', e.message)
+  results.push(false)
+} finally {
+  await stop()
+}
+process.exit(results.every(Boolean) ? 0 : 1)

scripts/check-first-word-lock.mjs

@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+/**
+ * The message box in a Discord server (or conversation) the account has not spoken in: replaced by the reason, in a
+ * scratch moho with injected state (nothing is contacted). The daemon decides the lock; this checks what the window
+ * makes of the `readOnly` it is given.
+ *
+ *   node scripts/check-first-word-lock.mjs [output directory]
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2]
+if (out) fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+const results = []
+const check = (what, ok, detail = '') => {
+  results.push(ok)
+  console.log(ok ? '  ok  ' : '  FAIL', what, ok ? '' : detail)
+}
+const REASON = "Send your first message in this server from Discord's own app or website. Discord flags accounts that start talking in a server from another client."
+try {
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
+  await ev(`(() => {
+    const s = window.__mohoShots.store
+    const acct = { id: 'discord:me', service: 'discord', name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, nick: 'me' }
+    const mk = (name, readOnly) => ({ id: 'discord:me|' + name, accountId: 'discord:me', kind: 'channel', name, lastActivityTs: 5, category: 'Channels', groupId: 'account:discord:me', ...(readOnly ? { readOnly } : {}) })
+    s.set({ accounts: [acct], groups: [{ id: 'account:discord:me', accountId: 'discord:me', service: 'discord', kind: 'account', name: 'me', position: 0 }], buffers: [mk('chasm/#general', ${JSON.stringify(REASON)}), mk('chasm/#open')], messagesByBuffer: { 'discord:me|chasm/#general': [], 'discord:me|chasm/#open': [] }, activeBufferId: 'discord:me|chasm/#general' })
+    s.selectGroup('account:discord:me')
+  })()`)
+  await sleep(1000)
+  check('a locked server shows the reason where the box would be', (await ev(`document.querySelector('.composer-readonly')?.innerText ?? ''`)).includes('first message in this server'))
+  check('with a line saying moho opens it by itself', (await ev(`document.querySelector('.composer-readonly')?.innerText ?? ''`)).includes('opens this up by itself'))
+  check('and no message box to type in', !(await ev(`!!document.querySelector('.composer-input')`)))
+  if (out) {
+    const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+    fs.writeFileSync(path.join(out, 'first-word-lock.png'), Buffer.from(data, 'base64'))
+  }
+  await ev(`(() => { const s = window.__mohoShots.state(); window.__mohoShots.patch({ buffers: s.buffers.map((b) => ({ ...b, readOnly: undefined })) }) })()`)
+  await sleep(500)
+  check('once the lock is lifted the box is back', await ev(`!!document.querySelector('.composer-input')`))
+} catch (e) {
+  console.log('  FAIL', e.message)
+  results.push(false)
+} finally {
+  await stop()
+}
+process.exit(results.every(Boolean) ? 0 : 1)

scripts/check-reply-emotes.mjs

@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+/**
+ * The line above a reply, and the bar over the box while one is written, in a scratch moho with injected state
+ * (nothing is contacted): what the reply quotes is drawn as the original is - an emote or emoji as its picture, not
+ * its code - on every service that has such codes, and text that has none is untouched.
+ *
+ *   node scripts/check-reply-emotes.mjs [output directory]
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2]
+if (out) fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+const results = []
+const check = (what, ok, detail = '') => {
+  results.push(ok)
+  console.log(ok ? '  ok  ' : '  FAIL', what, ok ? '' : detail)
+}
+
+// What each service's stored text carries for a picture, and what must not be left on screen.
+const CASES = [
+  { service: 'kick', body: '[emote:5756632:SUSSY][emote:5756632:SUSSY] lol', code: '[emote:', pictures: 2 },
+  { service: 'discord', body: 'nice <:pog:123456789012345678> yes', code: '<:pog', pictures: 1 },
+  { service: 'twitch', body: '[twitch:emote:25:Kappa] hello', code: '[twitch:', pictures: 1 },
+  // Twitch quotes the parent as plain text, with no word of which are emotes: the original on screen has them.
+  { service: 'twitch', body: '[twitch:emote:25:Kappa] hello', quotedAs: 'Kappa hello', code: '[twitch:', pictures: 1 },
+  { service: 'steam', body: '[steam:emote:steamhappy] hi', code: '[steam:', pictures: 1 },
+  { service: 'sneedchat', body: 'hello :smile: there', code: null, pictures: 0 },
+  { service: 'matrix', body: 'plain 😀 words', code: null, pictures: 0 },
+  { service: 'irc', body: 'plain 😀 words', code: null, pictures: 0 },
+  { service: 'telegram', body: 'plain 😀 words', code: null, pictures: 0 }
+]
+try {
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
+  for (const c of CASES) {
+    console.log(c.service)
+    await ev(`(() => {
+      const s = window.__mohoShots.store
+      const id = ${JSON.stringify(c.service + ':me')}
+      const acct = { id, service: ${JSON.stringify(c.service)}, name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, nick: 'me' }
+      const buf = { id: id + '|room', accountId: id, kind: 'channel', name: 'room', lastActivityTs: 5, category: 'Channels', groupId: 'account:' + id }
+      const t = Math.floor(Date.now() / 1000) - 600
+      const base = { bufferId: buf.id, ts: t, kind: 'chat', isAction: false, isHighlight: false, isOwn: false, edited: false }
+      const messages = [
+        { ...base, id: 'o1', from: 'TAYL31GH', senderId: 't', body: ${JSON.stringify(c.body)} },
+        { ...base, id: 'r1', from: 'RildWandy', senderId: 'r', ts: t + 30, body: 'I shit you not lol', replyTo: { id: 'o1', from: 'TAYL31GH', body: ${JSON.stringify(c.quotedAs ?? c.body)}${c.service === 'telegram' ? ", chat: ''" : ''} } }
+      ]
+      s.set({ accounts: [acct], groups: [{ id: 'account:' + id, accountId: id, service: ${JSON.stringify(c.service)}, kind: 'account', name: 'me', position: 0 }], buffers: [buf], messagesByBuffer: { [buf.id]: messages }, activeBufferId: buf.id })
+      s.selectGroup('account:' + id)
+    })()`)
+    await sleep(900)
+    const preview = await ev(`(() => {
+      const el = document.querySelector('.reply-preview, .tg-quote-body')
+      return el ? { text: el.innerText, pictures: el.querySelectorAll('img.custom-emoji, img.smilie, .custom-emoji-gone').length, html: el.innerHTML.slice(0, 200) } : null
+    })()`)
+    check(`${c.service}: the reply shows what it answers`, !!preview)
+    if (!preview) continue
+    if (c.code) check(`${c.service}: and not the emote's code`, !preview.text.includes(c.code) && !preview.html.includes(c.code), JSON.stringify(preview))
+    if (c.pictures) check(`${c.service}: as ${c.pictures} picture(s)`, preview.pictures === c.pictures, JSON.stringify(preview))
+    else check(`${c.service}: its words are kept`, /plain|hello/.test(preview.text), JSON.stringify(preview))
+    if (c.service === 'kick') {
+      console.log('The bar over the box')
+      await ev(`window.__mohoShots.store.startReply('o1', 'TAYL31GH', '[emote:5756632:SUSSY] lol')`)
+      await sleep(600)
+      const bar = await ev(`(() => { const el = document.querySelector('.composer-reply'); return el ? { text: el.innerText, pictures: el.querySelectorAll('img.custom-emoji, .custom-emoji-gone').length } : null })()`)
+      check('the bar over the box draws the emote too', !!bar && bar.pictures === 1 && !bar.text.includes('[emote:'), JSON.stringify(bar))
+      await ev(`window.__mohoShots.store.set({ replyingTo: null })`)
+    }
+    if (c.service === 'kick' && out) {
+      const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+      fs.writeFileSync(path.join(out, 'reply-emotes-kick.png'), Buffer.from(data, 'base64'))
+    }
+  }
+
+} catch (e) {
+  console.log('  FAIL', e.message)
+  results.push(false)
+} finally {
+  await stop()
+}
+process.exit(results.every(Boolean) ? 0 : 1)

scripts/check-resize.mjs

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+/**
+ * The edges that can be dragged, in a scratch moho with injected state (nothing is contacted): the channel list
+ * and the member list change width and keep it, double-click puts them back, a stream above the conversation
+ * changes height by its bottom edge, and the corner panel changes size from every edge and corner.
+ *
+ *   node scripts/check-resize.mjs <output directory>
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2] ?? '.'
+fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+const shot = async (name) => {
+  const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+  fs.writeFileSync(path.join(out, name), Buffer.from(data, 'base64'))
+}
+const results = []
+const check = (what, ok, detail = '') => {
+  results.push(ok)
+  console.log(ok ? '  ok  ' : '  FAIL', what, detail)
+}
+const mouse = (type, x, y) => page.call('Input.dispatchMouseEvent', { type, x, y, button: 'left', buttons: type === 'mouseReleased' ? 0 : 1, clickCount: 1 })
+const drag = async (from, to) => {
+  await mouse('mouseMoved', from.x, from.y)
+  await mouse('mousePressed', from.x, from.y)
+  for (let i = 1; i <= 6; i++) await mouse('mouseMoved', from.x + ((to.x - from.x) * i) / 6, from.y + ((to.y - from.y) * i) / 6)
+  await mouse('mouseReleased', to.x, to.y)
+  await sleep(300)
+}
+const rect = (sel) => ev(`(() => { const r = document.querySelector(${JSON.stringify(sel)})?.getBoundingClientRect(); return r ? { x: r.left, y: r.top, w: r.width, h: r.height, r: r.right, b: r.bottom } : null })()`)
+const centre = (r) => ({ x: r.x + r.w / 2, y: r.y + r.h / 2 })
+try {
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
+  await ev(`(() => {
+    const s = window.__mohoShots.store
+    const acct = { id: 'twitch:me', service: 'twitch', name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, nick: 'me' }
+    const mk = (name) => ({ id: 'twitch:me|' + name, accountId: 'twitch:me', kind: 'channel', name, lastActivityTs: 5, category: 'Channels', groupId: 'account:twitch:me' })
+    const t = Math.floor(Date.now() / 1000) - 600
+    const messages = Array.from({ length: 8 }, (_, i) => ({ id: 'm' + i, bufferId: 'twitch:me|xqc', from: 'user' + i, body: 'hello ' + i, ts: t + i * 20, kind: 'chat', isAction: false, isHighlight: false, isOwn: false, edited: false }))
+    s.set({ accounts: [acct], groups: [{ id: 'account:twitch:me', accountId: 'twitch:me', service: 'twitch', kind: 'account', name: 'me', position: 0 }], buffers: [mk('xqc'), mk('other')], messagesByBuffer: { 'twitch:me|xqc': messages }, activeBufferId: 'twitch:me|xqc' })
+    s.selectGroup('account:twitch:me')
+  })()`)
+  await sleep(1200)
+
+  console.log('Channel list')
+  let side = await rect('.sidebar')
+  const divider = await rect('.divider-v.resizer')
+  check('the divider beside the channel list can be taken', !!divider, JSON.stringify(divider))
+  const before = side.w
+  await drag(centre(divider), { x: centre(divider).x + 90, y: centre(divider).y })
+  side = await rect('.sidebar')
+  check('dragging it wider widens the channel list', Math.abs(side.w - (before + 90)) <= 2, `${before} -> ${side.w}`)
+  await drag(centre(await rect('.divider-v.resizer')), { x: 5, y: 300 })
+  side = await rect('.sidebar')
+  check('it stops at its narrowest', side.w >= 158 && side.w <= 162, String(side.w))
+  await ev(`document.querySelector('.divider-v.resizer').dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))`)
+  await sleep(300)
+  side = await rect('.sidebar')
+  check('double-click puts it back to its usual width', Math.abs(side.w - 220) <= 2, String(side.w))
+  console.log('Member list')
+  await ev(`window.__mohoShots.store.set({ roster: {} })`)
+  const nick = await rect('.nicklist-pane')
+  if (nick) {
+    const handles = await ev(`[...document.querySelectorAll('.divider-v.resizer')].map((d) => { const r = d.getBoundingClientRect(); return { x: r.left + r.width / 2, y: r.top + r.height / 2 } })`)
+    const right = handles[handles.length - 1]
+    const w0 = nick.w
+    await drag(right, { x: right.x - 70, y: right.y })
+    const w1 = (await rect('.nicklist-pane')).w
+    check('dragging the member list divider left widens the member list', Math.abs(w1 - (w0 + 70)) <= 2, `${w0} -> ${w1}`)
+  } else check('the member list is shown for a channel', false)
+  await shot('columns.png')
+
+  console.log('Stream above the conversation')
+  await ev(`(() => {
+    const s = window.__mohoShots.store
+    s.set({ watching: { bufferId: 'twitch:me|xqc', accountId: 'twitch:me', title: 'xqc' }, kickStreams: { 'twitch:me|xqc': { bufferId: 'twitch:me|xqc', live: true, title: 'a stream', viewers: 5, playbackUrl: '' } } })
+  })()`)
+  await sleep(800)
+  const edge = await rect('.call-stage:not(.pip) .stage-resize')
+  check('the stream has a bottom edge to take', !!edge, JSON.stringify(edge))
+  if (edge) {
+    const h0 = (await rect('.video-stage')).h
+    await drag(centre(edge), { x: centre(edge).x, y: centre(edge).y - 60 })
+    const h1 = (await rect('.video-stage')).h
+    check('dragging it up makes the picture shorter', h1 < h0 - 40, `${h0} -> ${h1}`)
+    await shot('stream-inline.png')
+  }
+
+  console.log('Corner panel')
+  await ev(`window.__mohoShots.store.selectBuffer('twitch:me|other')`)
+  await sleep(800)
+  let pip = await rect('.call-stage.pip')
+  check('the stream goes to a corner when another channel is open', !!pip, JSON.stringify(pip))
+  if (pip) {
+    for (const [dir, dx, dy, bigger] of [['l', -80, 0, true], ['t', 0, -60, true], ['tl', -60, -40, true], ['r', 60, 0, true], ['b', 0, 50, true]]) {
+      const was = (await rect('.call-stage.pip')).w
+      const handle = await rect(`.call-stage.pip .edge-${dir}`)
+      if (!handle) { check(`the ${dir} edge can be taken`, false); continue }
+      const start = centre(handle)
+      await drag(start, { x: start.x + dx, y: start.y + dy })
+      const now = await rect('.call-stage.pip')
+      check(`dragging the ${dir} edge changes the corner panel's size`, bigger ? now.w > was + 20 : now.w < was - 20, `${Math.round(was)} -> ${Math.round(now.w)}`)
+      check(`...and it stays inside the window (${dir})`, now.x >= 0 && now.r <= 1280 && now.y >= 0 && now.b <= 800, JSON.stringify(now))
+    }
+    await shot('pip.png')
+  }
+} finally {
+  await stop()
+  console.log(results.every(Boolean) ? 'ALL OK' : 'SOME FAILED')
+  process.exitCode = results.every(Boolean) ? 0 : 1
+}

scripts/check-rewards-panel.mjs

@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+/**
+ * The channel points panel over the chat, for Twitch and for Kick, in a scratch moho with the daemon's answers
+ * stood in for (nothing is contacted, nothing spent): it opens from the plaque, lists the rewards with their
+ * costs, says why one cannot be pressed, needs a second press to spend, asks for the text a reward wants, and
+ * closes on Escape.
+ *
+ *   node scripts/check-rewards-panel.mjs <output directory>
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2] ?? '.'
+fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+const shot = async (name) => {
+  const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+  fs.writeFileSync(path.join(out, name), Buffer.from(data, 'base64'))
+}
+const results = []
+const check = (what, ok, detail = '') => {
+  results.push(ok)
+  console.log(ok ? '  ok  ' : '  FAIL', what, detail)
+}
+const key = (k) => page.call('Input.dispatchKeyEvent', { type: 'keyDown', key: k, code: k }).then(() => page.call('Input.dispatchKeyEvent', { type: 'keyUp', key: k, code: k }))
+try {
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1200, height: 800, deviceScaleFactor: 1, mobile: false })
+  await ev(`(() => {
+    window.__redeemed = []
+    window.__rpcFixture = {
+      listTwitchRewards: () => ({ points: 600, name: 'Sloths', rewards: [
+        { id: 'r1', title: 'Drink water', cost: 500, description: null, enabled: true, paused: false, needsInput: false },
+        { id: 'r2', title: 'Say a name', cost: 100, description: 'Who?', enabled: true, paused: false, needsInput: true },
+        { id: 'r3', title: 'Dance', cost: 50, description: null, enabled: true, paused: true, needsInput: false },
+        { id: 'r4', title: 'Costly', cost: 9000, description: null, enabled: true, paused: false, needsInput: false },
+        { id: 'a1', title: 'Choose an Emote to Unlock', cost: 480, description: 'Pick a subscriber emote to unlock for 24 hours', enabled: true, paused: false, needsInput: false, choices: [{ id: 'e1', label: 'binxbWut' }, { id: 'e2', label: 'binxbYAP' }] },
+        { id: 'a3', title: 'Modify a Single Emote', cost: 550, description: null, enabled: true, paused: false, needsInput: false, choices: [{ id: 'e1_BW', label: 'binxbWut, black and white', group: 'binxbWut', groupImage: null }, { id: 'e1_SG', label: 'binxbWut, with sunglasses', group: 'binxbWut', groupImage: null }, { id: 'e2_SG', label: 'binxbYAP, with sunglasses', group: 'binxbYAP', groupImage: null }] },
+        { id: 'a2', title: 'Sub-only', cost: 350, description: null, enabled: true, paused: false, needsInput: false, unavailable: 'Send this one from twitch.tv chat box' } ] }),
+      redeemTwitchReward: (p) => { window.__redeemed.push(p); return { points: 600 } },
+      listKickRewards: () => ({ points: 1200, rewards: [ { id: 'k1', title: 'Hydrate', cost: 300, enabled: true, paused: false, needsInput: false }, { id: 'k2', title: 'Type something', cost: 100, enabled: true, paused: false, needsInput: true } ] }),
+      redeemKickReward: (p) => { window.__redeemed.push(p); return { points: 900 } },
+      twitchPoints: () => ({ points: 600, name: 'Sloths' }),
+      kickPoints: () => ({ points: 1200 })
+    }
+    const s = window.__mohoShots.store
+    const pic = 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect width="64" height="64" fill="#7b5cd6"/></svg>')
+    const accts = [
+      { id: 'twitch:me', service: 'twitch', name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, webSession: true, nick: 'me' },
+      { id: 'kick:me', service: 'kick', name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, nick: 'me' }
+    ]
+    const bufs = [
+      { id: 'twitch:me|xqc', accountId: 'twitch:me', kind: 'channel', name: 'xqc', lastActivityTs: 5, avatarUrl: pic, groupId: 'account:twitch:me' },
+      { id: 'kick:me|spreen', accountId: 'kick:me', kind: 'channel', name: 'spreen', lastActivityTs: 5, avatarUrl: pic, groupId: 'account:kick:me' }
+    ]
+    s.set({ accounts: accts, groups: accts.map((a, i) => ({ id: 'account:' + a.id, accountId: a.id, service: a.service, kind: 'account', name: 'me', position: i })), buffers: bufs, activeBufferId: 'twitch:me|xqc', twitchPoints: { 'twitch:me|xqc': { points: 600, name: 'Sloths' } }, kickPointsByBuffer: { 'kick:me|spreen': 1200 } })
+    s.selectGroup('account:twitch:me')
+  })()`)
+  await sleep(1500)
+
+  await ev(`window.__errs = []; window.addEventListener('error', (e) => window.__errs.push(String(e.message))); window.addEventListener('unhandledrejection', (e) => window.__errs.push('rej ' + String(e.reason)))`)
+  console.log('Twitch')
+  const plaque = `document.querySelector('.kick-points-plaque')`
+  check('the plaque shows the balance with the channel\'s name for its points', await ev(`${plaque}?.innerText.includes('600 Sloths')`))
+  await ev(`${plaque}.click()`)
+  await sleep(600)
+  check('a panel opens over the chat', await ev(`!!document.querySelector('.switcher.rewards')`))
+  check('it lists the four rewards, cheapest first within the ones that can be had, then the ones that cannot', await ev(`JSON.stringify([...document.querySelectorAll('.reward-row')].map((r) => r.querySelector('.reward-cost').innerText)) === JSON.stringify(['100', '480', '500', '550', '50', '350', '9,000'])`))
+  check('under two headings', await ev(`JSON.stringify([...document.querySelectorAll('.reward-group')].map((h) => h.innerText.toLowerCase())) === JSON.stringify(['available', 'unavailable'])`))
+  check('a paused reward and an unaffordable one are disabled with the reason', await ev(`(() => { const r = [...document.querySelectorAll('.reward-row')]; return r.slice(0, 4).every((x) => !x.disabled) && r[4].disabled && r[4].innerText.includes('Paused') && r[5].disabled && r[5].innerText.includes('twitch.tv chat box') && r[6].disabled && r[6].innerText.includes('You have 600 of 9,000') })()`))
+  await shot('rewards-twitch.png')
+  await ev(`document.querySelectorAll('.reward-row')[2].click()`)
+  await sleep(300)
+  check('the first press arms it and spends nothing', await ev(`!!document.querySelector('.reward-confirm') && window.__redeemed.length === 0`))
+  await ev(`document.querySelector('.reward-confirm .button.primary').click()`)
+  await sleep(500)
+  check('Redeem spends it', await ev(`window.__redeemed.length === 1 && window.__redeemed[0].rewardId === 'r1'`))
+  await ev(`document.querySelectorAll('.reward-row')[0].click()`)
+  await sleep(300)
+  check('a reward that asks for text shows its field, and Redeem waits for it', await ev(`!!document.querySelector('.reward-confirm input') && document.querySelector('.reward-confirm .button.primary').disabled`))
+  await page.call('Input.insertText', { text: 'Greg' })
+  await sleep(200)
+  await ev(`document.querySelector('.reward-confirm .button.primary').click()`)
+  await sleep(500)
+  check('what was typed goes with it', await ev(`window.__redeemed[1]?.input === 'Greg'`))
+  await ev(`document.querySelectorAll('.reward-row')[1].click()`)
+  await sleep(300)
+  check('an emote unlock shows the emotes to press, with a search, and Redeem waits for one', await ev(`!document.querySelector('.reward-confirm select') && document.querySelectorAll('.reward-confirm .reward-emote').length === 2 && !!document.querySelector('.reward-confirm input[placeholder="Search emotes"]') && document.querySelector('.reward-confirm .button.primary').disabled`))
+  await ev(`document.querySelector('.reward-confirm .reward-emote[title="binxbYAP"]').click()`)
+  await sleep(200)
+  check('pressing one picks it', await ev(`!document.querySelector('.reward-confirm .button.primary').disabled && document.querySelector('.reward-emote.selected')?.title === 'binxbYAP'`))
+  await ev(`document.querySelector('.reward-confirm .button.primary').click()`)
+  await sleep(500)
+  check('the emote picked goes with it', await ev(`window.__redeemed[2]?.rewardId === 'a1' && window.__redeemed[2]?.choice === 'e2'`))
+  await ev(`[...document.querySelectorAll('.reward-row')].find((r) => r.innerText.includes('Modify a Single Emote')).click()`)
+  await sleep(300)
+  check('a change to an emote shows the emotes first', await ev(`[...document.querySelectorAll('.reward-confirm .reward-emote')].map((b) => b.title).join() === 'binxbWut,binxbYAP'`))
+  await ev(`document.querySelector('.reward-confirm .reward-emote[title="binxbWut"]').click()`)
+  await sleep(200)
+  check('then what can be done to the one picked', await ev(`[...document.querySelectorAll('.reward-confirm .reward-emote')].map((b) => b.title).join() === 'binxbWut, black and white,binxbWut, with sunglasses'`))
+  await ev(`document.querySelector('.reward-confirm .reward-emote[title="binxbWut, with sunglasses"]').click()`)
+  await sleep(200)
+  await ev(`document.querySelector('.reward-confirm .button.primary').click()`)
+  await sleep(500)
+  check('the change picked goes with it', await ev(`window.__redeemed[3]?.rewardId === 'a3' && window.__redeemed[3]?.choice === 'e1_SG'`))
+  await key('Escape')
+  await sleep(300)
+  check('Escape closes the panel', await ev(`!document.querySelector('.switcher.rewards')`))
+
+  console.log('Kick')
+  await ev(`window.__mohoShots.store.selectGroup('account:kick:me'); window.__mohoShots.store.selectBuffer('kick:me|spreen', true)`)
+  await sleep(1200)
+  await ev(`document.querySelector('.kick-points-plaque')?.click()`)
+  await sleep(600)
+  check('Kick opens the same panel', await ev(`!!document.querySelector('.switcher.rewards') && document.querySelectorAll('.reward-row').length === 2`))
+  check('a Kick reward that asks for text is disabled with a reason', await ev(`(() => { const r = document.querySelectorAll('.reward-row')[1]; return r.disabled && r.innerText.includes('cannot do') })()`))
+  await shot('rewards-kick.png')
+} finally {
+  await stop()
+}
+console.log(results.every(Boolean) ? 'ALL OK' : `${results.filter((r) => !r).length} FAILED`)

scripts/check-search-menu.mjs

@@ -0,0 +1,149 @@
+#!/usr/bin/env node
+/**
+ * Searching the web for selected text, in a scratch moho with injected state (nothing is contacted): the message
+ * menu offers it for a selection only, names the engine chosen in Settings > General, follows a change of engine,
+ * and Settings shows the drop-down (and the address field for an engine of one's own).
+ *
+ *   node scripts/check-search-menu.mjs [output directory]
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2]
+if (out) fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+const results = []
+const check = (what, ok, detail = '') => {
+  results.push(ok)
+  console.log(ok ? '  ok  ' : '  FAIL', what, ok ? '' : detail)
+}
+const shot = async (name) => {
+  if (!out) return
+  const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+  fs.writeFileSync(path.join(out, name), Buffer.from(data, 'base64'))
+}
+const mouse = (type, x, y, button = 'left') => page.call('Input.dispatchMouseEvent', { type, x, y, button, buttons: type === 'mouseReleased' ? 0 : button === 'right' ? 2 : 1, clickCount: 1 })
+const menuLabels = () => ev(`[...document.querySelectorAll('.context-menu .context-menu-item')].map((e) => e.innerText.trim().split('\\n').pop())`)
+/** Sets a field the way a person's edit does, so the window's own handlers run. */
+const setField = (selector, value, how) => ev(`(async () => {
+  const el = document.querySelector(${JSON.stringify(selector)})
+  if (!el) return false
+  if (${JSON.stringify(how)} === 'input') el.focus()
+  const proto = el instanceof HTMLSelectElement ? HTMLSelectElement.prototype : HTMLInputElement.prototype
+  Object.getOwnPropertyDescriptor(proto, 'value').set.call(el, ${JSON.stringify(value)})
+  el.dispatchEvent(new Event(${JSON.stringify(how)}, { bubbles: true }))
+  // Time for the window to take the edit before the field is left, as it has when a person types.
+  if (${JSON.stringify(how)} === 'input') { await new Promise((r) => setTimeout(r, 200)); el.blur() }
+  return true
+})()`)
+const openGeneral = async () => {
+  await ev(`window.__mohoShots.store.setActivePanel('settings')`)
+  await sleep(500)
+  await ev(`(() => { const b = [...document.querySelectorAll('button, [role=tab], a')].find((e) => e.innerText.trim() === 'General'); b?.click() })()`)
+  await sleep(500)
+}
+const closeMenu = async () => {
+  await page.call('Input.dispatchKeyEvent', { type: 'keyDown', key: 'Escape', code: 'Escape', windowsVirtualKeyCode: 27 })
+  await sleep(200)
+}
+/** Selects `needle` in the first message and right-clicks on it. */
+const rightClickOn = async (needle) => {
+  const at = await ev(`(() => {
+    const body = document.querySelector('.message-body') ?? document.querySelector('[data-msg-id]')
+    const w = document.createTreeWalker(body, NodeFilter.SHOW_TEXT)
+    for (let n; (n = w.nextNode()); ) {
+      const i = n.nodeValue.indexOf(${JSON.stringify(needle)})
+      if (i < 0) continue
+      const r = document.createRange()
+      r.setStart(n, i); r.setEnd(n, i + ${JSON.stringify(needle)}.length)
+      const s = getSelection(); s.removeAllRanges(); s.addRange(r)
+      const b = r.getBoundingClientRect()
+      return { x: b.left + b.width / 2, y: b.top + b.height / 2 }
+    }
+    return null
+  })()`)
+  if (!at) return false
+  await mouse('mouseMoved', at.x, at.y)
+  await mouse('mousePressed', at.x, at.y, 'right')
+  await mouse('mouseReleased', at.x, at.y, 'right')
+  await sleep(400)
+  return true
+}
+try {
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
+  await ev(`(() => {
+    const s = window.__mohoShots.store
+    const acct = { id: 'discord:me', service: 'discord', name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, nick: 'me' }
+    const buf = { id: 'discord:me|chat', accountId: 'discord:me', kind: 'channel', name: 'chat', lastActivityTs: 5, category: 'Channels', groupId: 'account:discord:me' }
+    const t = Math.floor(Date.now() / 1000) - 600
+    const messages = [{ id: 'm1', bufferId: 'discord:me|chat', from: 'ada', body: 'the Antikythera mechanism is older than anyone expected', ts: t, kind: 'chat', isAction: false, isHighlight: false, isOwn: false, edited: false }]
+    s.set({ accounts: [acct], groups: [{ id: 'account:discord:me', accountId: 'discord:me', service: 'discord', kind: 'account', name: 'me', position: 0 }], buffers: [buf], messagesByBuffer: { 'discord:me|chat': messages }, activeBufferId: 'discord:me|chat' })
+    s.selectGroup('account:discord:me')
+  })()`)
+  await sleep(1200)
+
+  console.log('Message menu')
+  check('a message with a word selected', await rightClickOn('Antikythera mechanism'))
+  let labels = await menuLabels()
+  check('offers a search for it, by the default engine', labels.some((l) => l === 'Search DuckDuckGo for “Antikythera mechanism”'), JSON.stringify(labels))
+  await shot('search-menu.png')
+  await closeMenu()
+
+  await openGeneral()
+  check('Settings > General has the engine drop-down', await setField('select[aria-label="Search engine"]', 'google', 'change'))
+  await sleep(300)
+  await ev(`window.__mohoShots.store.setActivePanel('')`)
+  await sleep(500)
+  await rightClickOn('Antikythera mechanism is older')
+  labels = await menuLabels()
+  check('names the engine chosen in Settings, and shortens a long selection', labels.some((l) => /^Search Google for “Antikythera mechanism is ol…”$/.test(l)), JSON.stringify(labels))
+  await closeMenu()
+
+  await openGeneral()
+  await setField('select[aria-label="Search engine"]', 'custom', 'change')
+  await sleep(300)
+  check('an own engine asks for an address', await setField('input[placeholder="https://example.org/search?q=%s"]', 'https://www.example.org/find?q=%s', 'input'))
+  await shot('search-settings.png')
+  await sleep(300)
+  await ev(`window.__mohoShots.store.setActivePanel('')`)
+  await sleep(500)
+  await rightClickOn('Antikythera')
+  labels = await menuLabels()
+  check('an engine of one’s own is named by its host', labels.some((l) => l === 'Search example.org for “Antikythera”'), JSON.stringify(labels))
+  await closeMenu()
+
+  await openGeneral()
+  await setField('input[placeholder="https://example.org/search?q=%s"]', 'nonsense', 'input')
+  await sleep(300)
+  await ev(`window.__mohoShots.store.setActivePanel('')`)
+  await sleep(500)
+  await rightClickOn('Antikythera')
+  labels = await menuLabels()
+  check('an address that cannot be searched is not offered', !labels.some((l) => l.startsWith('Search ')), JSON.stringify(labels))
+  await closeMenu()
+
+  await openGeneral()
+  await setField('select[aria-label="Search engine"]', 'duckduckgo', 'change')
+  await sleep(300)
+  await ev(`window.__mohoShots.store.setActivePanel('')`)
+  await sleep(500)
+  await ev(`getSelection().removeAllRanges()`)
+  const row = await ev(`(() => { const r = document.querySelector('[data-msg-id]').getBoundingClientRect(); return { x: r.right - 20, y: r.top + r.height / 2 } })()`)
+  await mouse('mouseMoved', row.x, row.y)
+  await mouse('mousePressed', row.x, row.y, 'right')
+  await mouse('mouseReleased', row.x, row.y, 'right')
+  await sleep(400)
+  labels = await menuLabels()
+  check('without a selection there is no search entry', labels.length > 0 && !labels.some((l) => l.startsWith('Search ')), JSON.stringify(labels))
+  await closeMenu()
+
+} catch (e) {
+  console.log('  FAIL', e.message)
+  results.push(false)
+} finally {
+  await stop()
+}
+process.exit(results.every(Boolean) ? 0 : 1)

scripts/check-telegram-ui.mjs

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+/**
+ * The Telegram parts of the window, in a scratch moho (nothing is typed into a form that would be sent, so nothing
+ * reaches Telegram): the account picker offers Telegram with its mark, its form asks for the api_id, the api_hash and
+ * the phone number, explains where the first two come from, keeps the button off until all three are given, and
+ * warns about Tor.
+ *
+ *   node scripts/check-telegram-ui.mjs <output directory>
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2] ?? '.'
+fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+const shot = async (name) => {
+  const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+  fs.writeFileSync(path.join(out, name), Buffer.from(data, 'base64'))
+}
+const results = []
+const check = (what, ok, detail = '') => {
+  results.push(ok)
+  console.log(ok ? '  ok  ' : '  FAIL', what, detail)
+}
+try {
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1100, height: 800, deviceScaleFactor: 1, mobile: false })
+  await ev(`window.__mohoShots.store.setActivePanel('accounts')`)
+  await sleep(1200)
+  const chip = await ev(`(() => { const c = [...document.querySelectorAll('.service-chip')].find((x) => x.textContent.includes('Telegram')); return c ? { text: c.textContent.trim(), mark: !!c.querySelector('.mask-icon, img, span[style*="mask"]') } : null })()`)
+  check('the picker offers Telegram', !!chip, JSON.stringify(chip))
+  await ev(`[...document.querySelectorAll('.service-chip')].find((x) => x.textContent.includes('Telegram')).click()`)
+  await sleep(500)
+  const form = await ev(`(() => { const f = document.querySelector('.add-form'); return f ? f.innerText : '' })()`)
+  check('the form says where the api_id comes from', /my\.telegram\.org\/apps/.test(form), form.slice(0, 120))
+  check('it asks for the api_id, the api_hash and the phone number', /api_id/.test(form) && /api_hash/.test(form) && /Phone number/.test(form))
+  const disabled = () => ev(`[...document.querySelectorAll('.add-form button.primary')].find((b) => /Send the code/.test(b.textContent))?.disabled`)
+  check('nothing can be sent while the form is empty', (await disabled()) === true)
+  const fill = (placeholderOrLabel, value) => ev(`(() => {
+    const label = [...document.querySelectorAll('.add-form label.field')].find((l) => l.textContent.includes(${JSON.stringify(placeholderOrLabel)}))
+    const input = label.querySelector('input')
+    const set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set
+    set.call(input, ${JSON.stringify(value)})
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })()`)
+  await fill('api_id', '12345')
+  await fill('api_hash', 'abcdef')
+  check('two of three are not enough', (await disabled()) === true)
+  await fill('Phone number', '+1 555 123 4567')
+  await sleep(200)
+  check('all three turn the button on', (await disabled()) === false)
+  await ev(`document.querySelector('.add-form .switch')?.click()`)
+  await sleep(300)
+  const warning = await ev(`document.querySelector('.add-form .warning-note')?.innerText || ''`)
+  check('routing it says Telegram may challenge a Tor sign-in', /Telegram/.test(warning), warning.slice(0, 80))
+  await shot('telegram-form.png')
+} finally {
+  await stop()
+  console.log(results.every(Boolean) ? 'ALL OK' : 'SOME FAILED')
+  process.exitCode = results.every(Boolean) ? 0 : 1
+}

scripts/check-twitch-integrity.mjs

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+/**
+ * Makes a Twitch integrity token the way the app does when Twitch asks for one - in a hidden page on
+ * twitch.tv, from main - and then uses it for a stream's playback token from outside the page, to show the
+ * token is the kind Twitch's GraphQL takes.
+ *
+ *   node scripts/check-twitch-integrity.mjs
+ */
+import { cdp, freePort, launchApp, sleep } from './lib/harness.mjs'
+
+const inspectPort = await freePort()
+const { stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' }, args: [`--inspect=${inspectPort}`] })
+try {
+  let main = null
+  for (let i = 0; i < 60 && !main; i++) {
+    try {
+      const list = await (await fetch(`http://127.0.0.1:${inspectPort}/json/list`)).json()
+      const target = list.find((t) => t.webSocketDebuggerUrl)
+      if (target) main = cdp(target.webSocketDebuggerUrl)
+    } catch {
+      /* not up yet */
+    }
+    await sleep(500)
+  }
+  if (!main) throw new Error('main never offered its inspector')
+  for (let i = 0; i < 40 && !(await main.evaluate('!!globalThis.__mohoTwitchIntegrity').catch(() => false)); i++) await sleep(500)
+  const device = `check${Math.random().toString(16).slice(2, 14)}`
+  const t0 = Date.now()
+  const made = await main.evaluate(`globalThis.__mohoTwitchIntegrity.mint(${JSON.stringify(device)})`)
+  console.log(`made in ${((Date.now() - t0) / 1000).toFixed(1)}s:`, { prefix: made.token.slice(0, 9), length: made.token.length, goodForHours: +((made.expiration - Date.now()) / 3600000).toFixed(1) })
+  // From outside any page: the player's own token query, with the integrity token and the device it was made for.
+  const res = await fetch('https://gql.twitch.tv/gql', {
+    method: 'POST',
+    headers: { 'Client-ID': 'kimne78kx3ncx6brgo4mv6wki5h1ko', 'Content-Type': 'text/plain;charset=UTF-8', 'X-Device-Id': device, 'Client-Integrity': made.token },
+    body: JSON.stringify({ operationName: 'PlaybackAccessToken', variables: { isLive: true, login: 'xqc', isVod: false, vodID: '', playerType: 'site', platform: 'web' }, extensions: { persistedQuery: { version: 1, sha256Hash: 'ed230aa1e33e07eebb8928504583da78a5173989fadfb1ac94be06a04f3cdbe9' } } })
+  })
+  const body = await res.json()
+  const token = body?.data?.streamPlaybackAccessToken
+  console.log('playback token call', res.status, token ? `token for device ${JSON.parse(token.value).device_id}` : JSON.stringify(body).slice(0, 200))
+} finally {
+  await stop()
+}

scripts/check-twitch-signin-window.mjs

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+/**
+ * Drives the sign-in window of a scratch moho without anybody signing in: after the window opens, a made-up
+ * `auth-token` cookie stands in for the one a real sign-in leaves, and the window is watched to see that it is
+ * taken to Twitch's approval page and kept there when something sends it back to the front page. Nothing real
+ * is typed or approved; the sign-in is cancelled at the end.
+ *
+ *   node scripts/check-twitch-signin-window.mjs
+ */
+import { cdp, launchApp, sleep } from './lib/harness.mjs'
+
+const { page, stop, port } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const say = (...a) => console.log(new Date().toISOString().slice(11, 19), ...a)
+const ev = (code) => page.evaluate(code)
+const targets = async () => (await (await fetch(`http://127.0.0.1:${port}/json/list`)).json()).filter((t) => t.type === 'page' && /twitch\.tv/.test(t.url))
+const clickText = (selector, text) => ev(`(() => { const b = [...document.querySelectorAll(${JSON.stringify(selector)})].find((x) => x.textContent.trim().startsWith(${JSON.stringify(text)})); if (!b) return false; b.click(); return true })()`)
+try {
+  await sleep(2500)
+  await ev(`window.__mohoShots.store.setActivePanel('accounts')`)
+  await sleep(600)
+  await clickText('.service-chip', 'Twitch')
+  await sleep(500)
+  say('sign in', await clickText('button', 'Sign in with Twitch'))
+  let t
+  for (let i = 0; i < 40 && !t; i++) {
+    await sleep(500)
+    t = (await targets())[0]
+  }
+  say('window at', t?.url)
+  const win = cdp(t.webSocketDebuggerUrl)
+  await sleep(3000)
+  await win.call('Network.enable')
+  await win.call('Network.setCookie', { name: 'auth-token', value: 'madeupmadeupmadeup', domain: '.twitch.tv', path: '/', secure: true })
+  say('cookie set')
+  let at = ''
+  for (let i = 0; i < 40 && !/activate/.test(at); i++) {
+    await sleep(500)
+    at = (await targets())[0]?.url ?? ''
+  }
+  say('window now at', at)
+  // Something sends it back to the front page, as a late redirect would.
+  await win.evaluate(`location.href = 'https://www.twitch.tv/'`).catch(() => {})
+  const seen = []
+  for (let i = 0; i < 24; i++) {
+    await sleep(250)
+    const u = (await targets())[0]?.url ?? ''
+    const where = new URL(u).pathname
+    if (seen[seen.length - 1] !== where) seen.push(where)
+  }
+  say('the window went', seen.join(' -> '))
+  await sleep(6000)
+  say('page text', JSON.stringify(await win.evaluate(`document.body.innerText.slice(0, 300)`)))
+  say('inputs', JSON.stringify(await win.evaluate(`[...document.querySelectorAll('input')].map((i) => ({ type: i.type, name: i.name, id: i.id, ph: i.placeholder, max: i.maxLength, value: i.value, shown: i.getClientRects().length > 0 }))`)))
+  win.close()
+} finally {
+  await stop()
+}

scripts/check-twitch-ui.mjs

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+/**
+ * The Twitch parts of the window, in a scratch moho with injected state (nothing is contacted): the list's fixed
+ * headings, whispers' badge, Settings -> Twitch, Ctrl+K finding a Twitch channel, readable name colours, emotes
+ * and cheers drawn as pictures, links, and a signed-in account's composer with no GIF button.
+ *
+ *   node scripts/check-twitch-ui.mjs <output directory>
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2] ?? '.'
+fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+const shot = async (name) => {
+  const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+  fs.writeFileSync(path.join(out, name), Buffer.from(data, 'base64'))
+}
+const results = []
+const check = (what, ok, detail = '') => {
+  results.push(ok)
+  console.log(ok ? '  ok  ' : '  FAIL', what, detail)
+}
+const key = (k, mods = 0) => page.call('Input.dispatchKeyEvent', { type: 'keyDown', key: k, code: k.length === 1 ? 'Key' + k.toUpperCase() : k, modifiers: mods, windowsVirtualKeyCode: k.length === 1 ? k.toUpperCase().charCodeAt(0) : 0 }).then(() => page.call('Input.dispatchKeyEvent', { type: 'keyUp', key: k, modifiers: mods }))
+try {
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1200, height: 800, deviceScaleFactor: 1, mobile: false })
+  await ev(`(() => {
+    const s = window.__mohoShots.store
+    const acct = { id: 'twitch:me', service: 'twitch', name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, webSession: true, moderation: true, nick: 'me' }
+    const pic = 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect width="64" height="64" fill="#7b5cd6"/></svg>')
+    const mk = (name, kind, t, cat) => ({ id: 'twitch:me|' + name, accountId: 'twitch:me', kind, name, lastActivityTs: t, avatarUrl: pic, category: cat, groupId: 'account:twitch:me' })
+    const buffers = [mk('xqc', 'channel', 5, 'Channels'), mk('skitzy_va', 'channel', 4, 'Channels'), mk('@friend', 'dm', 6, 'Direct Messages')]
+    const t = Math.floor(Date.now() / 1000) - 600
+    const m = (i, from, body, extra = {}) => ({ id: 'm' + i, bufferId: 'twitch:me|xqc', from, body, ts: t + i * 20, kind: 'chat', isAction: false, isHighlight: false, isOwn: false, edited: false, ...extra })
+    const messages = [
+      m(1, 'darkblue', 'a very dark colour name', { senderColor: '#0000FF' }),
+      m(2, 'pinkie', 'with an emote [twitch:emote:25:Kappa] and a moving [twitch:aemote:emotesv2_abc:Dance] one'),
+      m(3, 'whale', 'cheered [twitch:cheer:cheer:100] for the stream', {}),
+      m(4, 'linker', 'see https://example.com/page for details'),
+      m(5, 'newbie', 'first message here', { firstMessage: true })
+    ]
+    s.set({ accounts: [acct], groups: [{ id: 'account:twitch:me', accountId: 'twitch:me', service: 'twitch', kind: 'account', name: 'me', position: 0 }], buffers, messagesByBuffer: { 'twitch:me|xqc': messages }, activeBufferId: 'twitch:me|xqc' })
+    s.selectGroup('account:twitch:me')
+  })()`)
+  await sleep(1500)
+
+  console.log('Channel list')
+  const rows = await ev(`[...document.querySelectorAll('.category, .buffer-row')].map((r) => r.innerText.replace(/\\n/g, ' ').trim())`)
+  check('fixed headings with the whisper under Direct Messages', JSON.stringify(rows).includes('DIRECT MESSAGES') && JSON.stringify(rows).includes('CHANNELS'), JSON.stringify(rows))
+  check('the whisper row has the mail badge', await ev(`!!document.querySelector('.avatar-badge')`), await ev(`[...document.querySelectorAll('.buffer-row')].map((r) => r.innerHTML.slice(0, 200)).join(' || ')`))
+
+  console.log('Messages')
+  check('a very dark name colour is made readable', await ev(`(() => { const e = [...document.querySelectorAll('.message-sender, .message-from, .sender')].find((x) => x.textContent.includes('darkblue')); if (!e) return false; const m = getComputedStyle(e).color.match(/\\d+/g).map(Number); return (0.2126 * m[0] + 0.7152 * m[1] + 0.0722 * m[2]) > 90 })()`))
+  check('emotes are pictures', (await ev(`document.querySelectorAll('.message-row img[src*="emoticons"], .message-row img.custom-emoji').length`)) >= 2, String(await ev(`[...document.querySelectorAll('.message-row img')].map((i) => i.src.slice(0, 60)).join(' | ')`)))
+  check('a cheer is drawn with its amount', await ev(`document.body.innerText.includes('100')`))
+  check('a link is a link', await ev(`!!document.querySelector('.message-row a[href^="https://example.com"], .message-row .link')`))
+  await shot('twitch-messages.png')
+
+  console.log('Composer')
+  check('the signed-in composer has an emoji button and no GIF button', await ev(`!!document.querySelector('button[title="Emoji"]') && !document.querySelector('button[title="GIFs"]')`))
+
+  console.log('Ctrl+K')
+  await key('k', 2)
+  await sleep(600)
+  const opened = await ev(`!!document.querySelector('input[placeholder*="Where"], .switcher, [role="dialog"] input')`)
+  check('the quick switcher opens', opened)
+  if (opened) {
+    await ev(`(() => { const i = document.querySelector('.switcher input, [role="dialog"] input, input[placeholder*="Where"]'); i.focus() })()`)
+    await page.call('Input.insertText', { text: 'skitz' })
+    await sleep(500)
+    check('it finds a Twitch channel by name', await ev(`document.body.innerText.includes('skitzy_va')`))
+    await key('Escape')
+    await sleep(300)
+  }
+
+  console.log('Settings')
+  await ev(`window.__mohoShots.store.setActivePanel('settings')`)
+  await sleep(800)
+  const clicked = await ev(`(() => { const b = [...document.querySelectorAll('button, [role=tab], a')].find((x) => x.textContent.trim() === 'Twitch'); if (!b) return false; b.click(); return true })()`)
+  check('Settings has a Twitch page', clicked)
+  await sleep(600)
+  const text = await ev(`document.body.innerText`)
+  for (const want of ['What to show besides chat', 'Badges', 'Watching', 'Polls, predictions and raids', 'Recent messages']) check(`Settings -> Twitch has "${want}"`, text.includes(want))
+  await shot('twitch-settings.png')
+} finally {
+  await stop()
+}
+console.log(results.every(Boolean) ? 'ALL OK' : `${results.filter((r) => !r).length} FAILED`)

scripts/gif-check.mjs

@@ -101,8 +101,18 @@ try {
   const klipy = rows.find((r) => r.text.includes('klipy.com'))
   check(!!klipy && klipy.videos.length === 0, 'a Klipy page nothing could read stays a link', JSON.stringify(klipy))
 
-  // The picker.
-  check(await page.evaluate('!!document.querySelector(\'button[title="GIFs"]\')'), 'a GIF button is offered where there is a Discord account')
+  // The picker. It is offered only where a GIF link shows as a picture - Discord, Matrix, Kick - and none of those can be
+  // stood up here, so the IRC account is shown to the window as a Matrix one: the picker appears, and what it sends still
+  // goes through the daemon to the fake IRC server.
+  check(!(await page.evaluate('!!document.querySelector(\'button[title="GIFs"]\')')), 'no GIF button on an IRC conversation, which would show a GIF link as a link')
+  await page.evaluate(`(() => {
+    const shots = window.__mohoShots
+    const s = shots.state()
+    const account = s.accounts.find((a) => a.id === s.buffers.find((b) => b.id === s.activeBufferId)?.accountId)
+    shots.patch({ accounts: s.accounts.map((a) => (a === account ? { ...a, service: 'matrix' } : a)) })
+  })()`)
+  await sleep(500)
+  check(await page.evaluate('!!document.querySelector(\'button[title="GIFs"]\')'), 'a GIF button is offered where a GIF link shows as a picture')
   await page.evaluate(click('button[title="GIFs"]'))
   await until(page, 'document.querySelector(".gif-picker")', 'the picker')
   check((await page.evaluate('document.querySelectorAll(".gif-cell").length')) === 3, 'it lists what it was given')
@@ -117,7 +127,7 @@ try {
   // Choosing one sends it - to IRC, the file, which anything can show as a link.
   await page.evaluate(`document.querySelector('.gif-cell[title="cat dancing"]').click()`)
   await sleep(1200)
-  check(sent.some((l) => /PRIVMSG #lobby :?http:\/\/127\.0\.0\.1:9\/a\.gif/.test(l)), 'choosing one sends the file to a service that is not Discord', JSON.stringify(sent))
+  check(sent.some((l) => /PRIVMSG #lobby :?http:\/\/127\.0\.0\.1:9\/a\.gif/.test(l)), 'choosing one sends the file to a service that is not Discord (here IRC\'s wire, dressed as Matrix)', JSON.stringify(sent))
   check(!(await page.evaluate('!!document.querySelector(".gif-picker")')), 'and the picker closes')
 } catch (e) {
   console.log('FAIL', e.message)

scripts/lib/hlsprobe.ts

@@ -0,0 +1,99 @@
+// The page the Kick video probe plays in: one hls.js player per configuration, measured while it plays.
+import Hls from 'hls.js'
+import { ivsAbr, ivsLoader } from '../../src/renderer/src/lib/ivsplaylist'
+
+interface Config {
+  name: string
+  url: string
+  seconds: number
+  prefetch: number
+  hls: Record<string, unknown>
+  cap?: number
+}
+
+declare global {
+  interface Window {
+    runProbe: (config: Config) => Promise<Record<string, unknown>>
+  }
+}
+
+window.runProbe = async (cfg) => {
+  // How far this clock is from the server's, from the time the playlist says it was made at.
+  const sent = Date.now()
+  const text = await (await fetch(cfg.url)).text()
+  const received = Date.now()
+  const server = Number(/SERVER-TIME",VALUE="([0-9.]+)"/.exec(text)?.[1] ?? NaN)
+  const offset = server * 1000 - (sent + received) / 2
+  return new Promise((resolve) => {
+    const video = document.getElementById('v') as HTMLVideoElement
+    const hls = new Hls({ ...cfg.hls, ...(cfg.prefetch > 0 ? { loader: ivsLoader(cfg.prefetch), abrController: ivsAbr() } : {}) } as never)
+    const latency: number[] = []
+    const levels = new Set<string>()
+    const fatal: string[] = []
+    let stalls = 0
+    let waits = 0
+    let switches = 0
+    let waitStart = 0
+    let waited = 0
+    let firstFrame = 0
+    const began = Date.now()
+    video.muted = true
+    video.onwaiting = (): void => {
+      waits++
+      if (!waitStart && firstFrame) waitStart = Date.now()
+    }
+    video.onplaying = (): void => {
+      if (!firstFrame) firstFrame = Date.now() - began
+      if (waitStart) {
+        waited += Date.now() - waitStart
+        waitStart = 0
+      }
+    }
+    hls.on(Hls.Events.ERROR, (_e, d) => {
+      if (d.details === 'bufferStalledError') stalls++
+      if (d.fatal) fatal.push(d.details)
+    })
+    hls.on(Hls.Events.LEVEL_SWITCHED, (_e, d) => {
+      switches++
+      levels.add(`${hls.levels[d.level]?.height}p`)
+    })
+    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      if (cfg.cap) {
+        const best = hls.levels.reduce((b, l, i) => (l.height <= (cfg.cap ?? 720) && l.height >= (hls.levels[b]?.height ?? 0) ? i : b), -1)
+        if (best >= 0) hls.autoLevelCapping = best
+      }
+      void video.play().catch(() => {})
+    })
+    hls.attachMedia(video)
+    hls.loadSource(cfg.url)
+    const timer = setInterval(() => {
+      const at = hls.playingDate
+      if (at && !video.paused && firstFrame) latency.push((Date.now() + offset - at.getTime()) / 1000)
+      if (Date.now() - began < cfg.seconds * 1000) return
+      clearInterval(timer)
+      const q = video.getVideoPlaybackQuality()
+      const sorted = [...latency].sort((a, b) => a - b)
+      const pick = (p: number): number => sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * p))] ?? NaN
+      const settled = sorted.slice(Math.floor(sorted.length * 0.2))
+      const mean = settled.length ? settled.reduce((a, b) => a + b, 0) / settled.length : NaN
+      hls.destroy()
+      resolve({
+        name: cfg.name,
+        startedInMs: firstFrame,
+        samples: latency.length,
+        latencyMin: +Math.min(...latency).toFixed(2),
+        latencyMax: +Math.max(...latency).toFixed(2),
+        latencyMedian: +pick(0.5).toFixed(2),
+        latencyP95: +pick(0.95).toFixed(2),
+        latencyMeanAfterSettling: +mean.toFixed(2),
+        rebufferSeconds: +(waited / 1000).toFixed(2),
+        waits,
+        stallErrors: stalls,
+        dropped: `${q.droppedVideoFrames}/${q.totalVideoFrames}`,
+        levelSwitches: switches,
+        levels: [...levels].join(','),
+        fatal: fatal.join(',')
+      })
+    }, 1000)
+  })
+}

scripts/probe-kick-video.mjs

@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+/**
+ * Plays a live Kick stream with several hls.js configurations, one after the other, in the app's own
+ * Chromium, and says for each how far behind the broadcaster it ran, how often it stopped to wait,
+ * and how many frames it dropped. Nothing is signed in: the playlist is public.
+ *
+ *   node scripts/probe-kick-video.mjs [channel] [seconds]      (defaults: spreen, 75)
+ */
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+import { execFileSync } from 'node:child_process'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const channel = process.argv[2] ?? 'spreen'
+const seconds = Number(process.argv[3] ?? 75)
+const root = path.resolve(path.dirname(new URL(import.meta.url).pathname), '..')
+const work = fs.mkdtempSync(path.join(os.tmpdir(), 'kick-video-'))
+execFileSync(path.join(root, 'node_modules/.bin/esbuild'), [path.join(root, 'scripts/lib/hlsprobe.ts'), '--bundle', '--format=iife', `--outfile=${path.join(work, 'probe.js')}`, '--log-level=error'])
+fs.writeFileSync(path.join(work, 'probe.html'), '<!doctype html><body style="margin:0"><video id="v" width="1280" height="720" autoplay muted playsinline></video><script src="probe.js"></script></body>')
+
+const UA = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'
+const playlist = async () => {
+  const r = await fetch(`https://kick.com/api/v2/channels/${channel}/playback-url`, { headers: { 'User-Agent': UA, Accept: 'application/json' } })
+  return (await r.json()).data
+}
+
+const base = { capLevelToPlayerSize: true }
+const configs = [
+  { name: 'as it is now (3 target durations, no prefetch)', prefetch: 0, hls: { ...base, liveSyncDurationCount: 3 } },
+  { name: 'seconds: sync 4s, no prefetch', prefetch: 0, hls: { ...base, liveSyncDuration: 4, liveMaxLatencyDuration: 10 } },
+  { name: 'prefetch 2, sync 4s', prefetch: 2, hls: { ...base, liveSyncDuration: 4, liveMaxLatencyDuration: 10 } },
+  { name: 'prefetch 2, sync 3s, catch-up 1.1', prefetch: 2, hls: { ...base, liveSyncDuration: 3, liveMaxLatencyDuration: 8, maxLiveSyncPlaybackRate: 1.1 } },
+  { name: 'prefetch 1, sync 3s, catch-up 1.1', prefetch: 1, hls: { ...base, liveSyncDuration: 3, liveMaxLatencyDuration: 8, maxLiveSyncPlaybackRate: 1.1 } },
+  { name: 'prefetch 2, sync 5s, catch-up 1.1', prefetch: 2, hls: { ...base, liveSyncDuration: 5, liveMaxLatencyDuration: 10, maxLiveSyncPlaybackRate: 1.1 } }
+]
+if (process.env.LIST === 'steady') {
+  configs.length = 0
+  configs.push(
+    { name: 'prefetch 2, sync 3s', prefetch: 2, hls: { ...base, liveSyncDuration: 3, liveMaxLatencyDuration: 10 } },
+    { name: 'prefetch 2, sync 4s', prefetch: 2, hls: { ...base, liveSyncDuration: 4, liveMaxLatencyDuration: 10 } },
+    { name: 'prefetch 2, sync 5s', prefetch: 2, hls: { ...base, liveSyncDuration: 5, liveMaxLatencyDuration: 10 } }
+  )
+}
+const only = process.env.ONLY ? process.env.ONLY.split(',').map(Number) : null
+
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+try {
+  try {
+    const clients = JSON.parse(execFileSync('hyprctl', ['clients', '-j']).toString())
+    for (const c of clients.filter((c) => /electron|moho/i.test(c.class + c.title))) execFileSync('hyprctl', ['dispatch', 'movetoworkspacesilent', `2,address:${c.address}`])
+  } catch {}
+  await sleep(2500)
+  await page.call('Page.navigate', { url: `file://${path.join(work, 'probe.html')}` })
+  await sleep(1500)
+  for (const [i, cfg] of configs.entries()) {
+    if (only && !only.includes(i)) continue
+    const url = await playlist()
+    const out = await page.evaluate(`window.runProbe(${JSON.stringify({ ...cfg, url, seconds, cap: 720 })})`)
+    console.log(JSON.stringify(out))
+  }
+} finally {
+  await stop()
+}

scripts/shot-kick-badges.mjs

@@ -0,0 +1,19 @@
+import fs from 'node:fs'
+import { execFileSync } from 'node:child_process'
+import { launchApp, sleep } from './lib/harness.mjs'
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (c) => page.evaluate(c)
+try {
+  try { const cl = JSON.parse(execFileSync('hyprctl', ['clients', '-j']).toString()); for (const c of cl.filter((c) => /electron|moho/i.test(c.class + c.title))) execFileSync('hyprctl', ['dispatch', 'movetoworkspacesilent', `2,address:${c.address}`]) } catch {}
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
+  const rpc = (m, p) => ev(`window.moho.rpc(${JSON.stringify(m)}, ${JSON.stringify(p)}).catch((e) => ({ error: String(e.message || e) }))`)
+  const a = await rpc('addKickAccount', {})
+  await rpc('joinBuffer', { accountId: a.accountId, name: 'spreen' })
+  const id = `${a.accountId}|spreen`
+  await ev(`window.__mohoShots.store.selectBuffer(${JSON.stringify(id)})`)
+  await sleep(20000)
+  console.log(await ev(`JSON.stringify({ images: document.querySelectorAll('.sender-badge-image').length, loaded: [...document.querySelectorAll('.sender-badge-image')].filter((i) => i.complete && i.naturalWidth > 0).length, words: [...document.querySelectorAll('.sender-badge')].map((b) => b.textContent).slice(0, 8), titles: [...new Set([...document.querySelectorAll('.sender-badge-image')].map((i) => i.title))].slice(0, 8) })`))
+  const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+  fs.writeFileSync(process.env.HOME + '/.local/share/moho-dev/shots/kick-badges.png', Buffer.from(data, 'base64'))
+} finally { await stop() }

scripts/shot-kick-stream.mjs

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+/**
+ * Watches a real live Kick stream in a scratch moho with no account signed in, and checks what the
+ * player does: that it plays, how far behind it runs, that the resolution menu changes the picture, that
+ * the CC button shows the captions, and that the player is built once and not again as the address is
+ * renewed. Photographs the stream, each menu and the captions.
+ *
+ *   node scripts/shot-kick-stream.mjs <output directory> [channel] [idle seconds]
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { execFileSync } from 'node:child_process'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2] ?? '.'
+const channel = process.argv[3] ?? 'spreen'
+const idle = Number(process.argv[4] ?? 60)
+fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const say = (...a) => console.log(new Date().toISOString().slice(11, 19), ...a)
+const ev = (code) => page.evaluate(code)
+const shot = async (name) => {
+  const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+  fs.writeFileSync(path.join(out, name), Buffer.from(data, 'base64'))
+}
+const click = (selector) => ev(`(() => { const b = document.querySelector(${JSON.stringify(selector)}); if (!b || b.disabled) return false; b.click(); return true })()`)
+const video = (expr) => ev(`(() => { const v = document.querySelector('video.video-tile-picture'); return v ? (${expr}) : null })()`)
+try {
+  try {
+    const clients = JSON.parse(execFileSync('hyprctl', ['clients', '-j']).toString())
+    for (const c of clients.filter((c) => /electron|moho/i.test(c.class + c.title))) execFileSync('hyprctl', ['dispatch', 'movetoworkspacesilent', `2,address:${c.address}`])
+  } catch {}
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
+  const rpc = (m, p) => ev(`window.moho.rpc(${JSON.stringify(m)}, ${JSON.stringify(p)}).catch((e) => ({ error: String(e.message || e) }))`)
+  const added = await rpc('addKickAccount', {})
+  say('account', JSON.stringify(added))
+  say('join', JSON.stringify(await rpc('joinBuffer', { accountId: added.accountId, name: channel })))
+  const id = `${added.accountId}|${channel}`
+  let live = null
+  for (let i = 0; i < 40 && !live?.playbackUrl; i++) {
+    await sleep(1000)
+    live = await ev(`window.__mohoShots.state().kickStreams[${JSON.stringify(id)}] || null`)
+  }
+  say('stream', JSON.stringify({ live: live?.live, hasUrl: !!live?.playbackUrl, expires: live?.playbackExpires, livestreamId: live?.livestreamId }))
+  await ev(`(async () => { await window.__mohoShots.store.selectBuffer(${JSON.stringify(id)}); window.__mohoShots.store.watchStream(${JSON.stringify(id)}) })()`)
+  for (let i = 0; i < 40; i++) {
+    if ((await video('v.readyState >= 3 && v.currentTime > 1')) === true) break
+    await sleep(500)
+  }
+  say('playing', await video('({ t: v.currentTime, w: v.videoWidth, h: v.videoHeight, paused: v.paused })').then(JSON.stringify))
+  await sleep(4000)
+  await shot('stream-playing.png')
+
+  // Resolution.
+  say('quality menu', await click('button[title^="Resolution"]'))
+  await sleep(400)
+  say('quality choices', JSON.stringify(await ev(`[...document.querySelectorAll('.stream-menu .context-menu-item')].map((b) => b.textContent.trim())`)))
+  await shot('stream-quality-menu.png')
+  for (const want of ['480p', 'Auto']) {
+    await ev(`(() => { const b = [...document.querySelectorAll('.stream-menu .context-menu-item')].find((x) => x.textContent.trim().startsWith(${JSON.stringify(want)})); b && b.click() })()`)
+    await sleep(8000)
+    say(`after choosing ${want}`, JSON.stringify(await video('({ h: v.videoHeight, t: +v.currentTime.toFixed(1) })')), JSON.stringify(await ev(`document.querySelector('button[title^="Resolution"]')?.title`)))
+    if (want === '480p') await click('button[title^="Resolution"]')
+  }
+
+  // Captions.
+  say('captions button', await ev(`JSON.stringify({ title: document.querySelector('button[title*="aptions"]')?.title, disabled: document.querySelector('button[title*="aptions"]')?.disabled })`))
+  say('captions menu', await click('button[title*="aptions"]'))
+  await sleep(400)
+  say('caption choices', JSON.stringify(await ev(`[...document.querySelectorAll('.stream-menu .context-menu-item')].map((b) => b.textContent.trim())`)))
+  await shot('stream-captions-menu.png')
+  await ev(`(() => { const b = [...document.querySelectorAll('.stream-menu .context-menu-item')].find((x) => x.textContent.trim() === 'English'); b && b.click() })()`)
+  await sleep(15000)
+  say('text tracks', await video(`JSON.stringify([...v.textTracks].map((t) => ({ lang: t.language, mode: t.mode, cues: t.cues ? t.cues.length : 0 })))`))
+  await shot('stream-captions-on.png')
+  say('captions button now', await ev(`document.querySelector('button[title*="aptions"]')?.title`))
+
+  // Built once.
+  const sources = new Set()
+  const began = Date.now()
+  while (Date.now() - began < idle * 1000) {
+    sources.add(await video('v.src'))
+    await sleep(1000)
+  }
+  const later = await ev(`window.__mohoShots.state().kickStreams[${JSON.stringify(id)}]`)
+  say(`over ${idle}s: ${sources.size} player source(s); address expires`, later?.playbackExpires, 'changed:', later?.playbackUrl !== live?.playbackUrl)
+  say('quality', JSON.stringify(await video('(() => { const q = v.getVideoPlaybackQuality(); return { dropped: q.droppedVideoFrames, total: q.totalVideoFrames } })()')))
+} finally {
+  await stop()
+}

scripts/shot-kick-threads.mjs

@@ -0,0 +1,88 @@
+#!/usr/bin/env node
+/**
+ * Reads a busy live Kick channel in a scratch moho and checks what replies and removals look like: that a
+ * reply carries its thread, that the thread opens from it, and that a removed message is struck through in
+ * red, left out or replaced by a notice according to Settings -> Kick. Removal is the one thing it cannot
+ * wait for, so one is injected through the store the way the daemon's event would arrive.
+ *
+ *   node scripts/shot-kick-threads.mjs <output directory> [channel]
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { execFileSync } from 'node:child_process'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2] ?? '.'
+const channel = process.argv[3] ?? 'xqc'
+fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const say = (...a) => console.log(new Date().toISOString().slice(11, 19), ...a)
+const ev = (code) => page.evaluate(code)
+const shot = async (name) => {
+  const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+  fs.writeFileSync(path.join(out, name), Buffer.from(data, 'base64'))
+}
+try {
+  try {
+    const clients = JSON.parse(execFileSync('hyprctl', ['clients', '-j']).toString())
+    for (const c of clients.filter((c) => /electron|moho/i.test(c.class + c.title))) execFileSync('hyprctl', ['dispatch', 'movetoworkspacesilent', `2,address:${c.address}`])
+  } catch {}
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
+  const rpc = (m, p) => ev(`window.moho.rpc(${JSON.stringify(m)}, ${JSON.stringify(p)}).catch((e) => ({ error: String(e.message || e) }))`)
+  const added = await rpc('addKickAccount', {})
+  say('join', JSON.stringify(await rpc('joinBuffer', { accountId: added.accountId, name: channel })))
+  const id = `${added.accountId}|${channel}`
+  await ev(`window.__mohoShots.store.selectBuffer(${JSON.stringify(id)})`)
+
+  // Replies, as the daemon read them: each should name the thread it belongs to.
+  let replies = []
+  for (let i = 0; i < 120 && replies.length < 2; i++) {
+    await sleep(1000)
+    replies = JSON.parse(await ev(`JSON.stringify((window.__mohoShots.state().messagesByBuffer[${JSON.stringify(id)}] || []).filter((m) => m.replyTo).map((m) => ({ id: m.id, to: m.replyTo.id, root: m.replyTo.threadRoot, thread: m.replyTo.thread })))`))
+  }
+  say('replies seen', replies.length, JSON.stringify(replies.slice(0, 4)))
+  say('every reply has a thread root', replies.every((r) => r.root))
+  await sleep(1500)
+  await shot('kick-replies.png')
+
+  await ev(`document.querySelector('.reply-preview')?.scrollIntoView({ block: 'center' })`)
+  await sleep(500)
+  await shot('kick-reply-row.png')
+  // Open a thread from a reply.
+  say('thread button', await ev(`(() => { const b = document.querySelector('.reply-thread-open'); if (!b) return false; b.click(); return true })()`))
+  await sleep(1200)
+  say('thread panel', await ev(`JSON.stringify({ open: !!document.querySelector('.thread-pane'), rows: document.querySelectorAll('.thread-pane .message-row').length, title: document.querySelector('.thread-header')?.textContent })`))
+  await shot('kick-thread.png')
+  await ev(`window.__mohoShots.store.closeThreadPanel()`)
+  await sleep(300)
+
+  // A removal, as the daemon would announce it, in each of the three ways.
+  const victim = await ev(`(() => { const ms = window.__mohoShots.state().messagesByBuffer[${JSON.stringify(id)}] || []; const m = [...ms].reverse().find((x) => x.kind === 'chat' && x.body && !x.replyTo); return m && m.id })()`)
+  await ev(`window.__mohoShots.store.handleEvent({ event: 'messageModerated', data: { bufferId: ${JSON.stringify(id)}, id: ${JSON.stringify(victim)}, moderated: { ai: true, rules: ['hate'] } } })`)
+  await sleep(500)
+  await ev(`document.querySelector('.message-row.removed')?.scrollIntoView({ block: 'center' })`)
+  await sleep(500)
+  say('removed row (default: strike)', await ev(`(() => { const r = document.querySelector('.message-row.removed .message-body'); if (!r) return null; const s = getComputedStyle(r); return JSON.stringify({ text: r.textContent.slice(0, 40), color: s.color, line: s.textDecorationLine, title: r.title }) })()`))
+  await shot('kick-removed-strike.png')
+
+  for (const [label, name] of [['Replace with notice', 'replace'], ['Delete', 'remove'], ['Strikethrough', 'strike']]) {
+    await ev(`window.__mohoShots.store.setActivePanel('settings')`)
+    await sleep(500)
+    await ev(`[...document.querySelectorAll('.settings-rail-item, .settings-rail button')].find((b) => b.textContent.trim().startsWith('Kick'))?.click()`)
+    await sleep(500)
+    say('setting', label, await ev(`(() => { const b = [...document.querySelectorAll('.setting-segmented button')].find((x) => x.textContent.trim() === ${JSON.stringify(label)}); if (!b) return false; b.click(); return true })()`))
+    await sleep(300)
+    if (name === 'replace') await shot('kick-settings.png')
+    await ev(`window.__mohoShots.store.setActivePanel('')`)
+    await sleep(500)
+    await ev(`window.__mohoShots.store.selectBuffer(${JSON.stringify(id)})`)
+    await sleep(700)
+    say(name, await ev(`JSON.stringify({ removedRows: document.querySelectorAll('.message-row.removed').length, text: document.querySelector('.message-row.removed .message-body')?.textContent.slice(0, 50) })`))
+    await ev(`document.querySelector('.message-row.removed')?.scrollIntoView({ block: 'center' })`)
+    await sleep(300)
+    if (name !== 'strike') await shot(`kick-removed-${name}.png`)
+  }
+} finally {
+  await stop()
+}

scripts/shot-notification-cards.mjs

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+/**
+ * Every kind of line a service writes rather than somebody saying it, beside ordinary chat and a moderation
+ * card, in each layout: they must all be the same sort of card. Messages are injected; nothing is contacted.
+ *
+ *   node scripts/shot-notification-cards.mjs <output directory>
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2] ?? '.'
+fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+try {
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1000, height: 760, deviceScaleFactor: 2, mobile: false })
+  await ev(`(() => {
+    const s = window.__mohoShots.store
+    const acct = { id: 'irc:test', service: 'irc', name: 'test', host: 'irc.example', port: 6667, state: 'connected', hasPassword: false, nick: 'me' }
+    const b = { id: 'irc:test|#room', accountId: 'irc:test', kind: 'channel', name: '#room', lastActivityTs: 5, groupId: 'account:irc:test' }
+    const t = Math.floor(Date.now() / 1000) - 600
+    const m = (i, kind, from, body, extra = {}) => ({ id: 'm' + i, bufferId: b.id, from, body, ts: t + i * 20, kind, isAction: false, isHighlight: false, isOwn: false, edited: false, ...extra })
+    const messages = [
+      m(1, 'join', 'alice', 'alice joined #room'),
+      m(2, 'chat', 'alice', 'hello everyone'),
+      m(3, 'topic', 'bob', 'bob changed the topic to: Release day'),
+      m(4, 'mode', 'ChanServ', 'ChanServ sets mode +o alice'),
+      m(5, 'kick', 'bob', 'bob kicked carol (spamming)'),
+      m(6, 'part', 'carol', 'carol left #room'),
+      m(7, 'system', 'moderation', 'This room is now in slow mode.'),
+      m(8, 'moderation', 'room', 'Slow mode is on: one message every 10 seconds', { embeds: [{ kind: 'moderation', author: 'Slow mode', title: 'is on: one message every 10 seconds', icon: 'timer' }] }),
+      m(9, 'chat', 'bob', 'back to normal chat')
+    ]
+    s.set({ accounts: [acct], groups: [{ id: 'account:irc:test', accountId: 'irc:test', service: 'irc', kind: 'account', name: 'test', position: 0 }], buffers: [b], messagesByBuffer: { [b.id]: messages }, activeBufferId: b.id })
+    s.selectGroup('account:irc:test')
+  })()`)
+  await sleep(1200)
+  for (const mode of ['comfy', 'classic', 'bubbles']) {
+    await ev(`window.moho.rpc && 0; window.__mohoShots.store.setPref && window.__mohoShots.store.setPref('ui.messageLayout', ${JSON.stringify(mode)})`).catch(() => {})
+    await sleep(500)
+    const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+    fs.writeFileSync(path.join(out, `notification-cards-${mode}.png`), Buffer.from(data, 'base64'))
+  }
+  console.log('cards', await ev(`document.querySelectorAll('.kick-event.notification').length`), 'moderation', await ev(`document.querySelectorAll('.kick-event.moderation').length`))
+} finally {
+  await stop()
+}

scripts/shot-sneedchat-greentext.mjs

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+/**
+ * Sneedchat lines that start with ">" in a scratch moho: the site's own coloured echo and a plain one must both
+ * draw as 4chan's greentext (#789922) and not as a quote block. Messages are injected; nothing is contacted.
+ *
+ *   node scripts/shot-sneedchat-greentext.mjs <output directory>
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2] ?? '.'
+fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+try {
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 900, height: 600, deviceScaleFactor: 2, mobile: false })
+  await ev(`(() => {
+    const s = window.__mohoShots.store
+    const acct = { id: 'sneedchat:me', service: 'sneedchat', name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, nick: 'me' }
+    const b = { id: 'sneedchat:me|#room', accountId: 'sneedchat:me', kind: 'channel', name: '#room', lastActivityTs: 5, groupId: 'account:sneedchat:me' }
+    const t = Math.floor(Date.now() / 1000) - 300
+    const m = (i, from, body) => ({ id: 'm' + i, bufferId: b.id, from, body, ts: t + i * 20, kind: 'chat', isAction: false, isHighlight: false, isOwn: false, edited: false })
+    const messages = [
+      m(1, 'alice', 'an ordinary line of chat'),
+      m(2, 'bob', '[color=#72ff72]>archlinuxwoman'),
+      m(3, 'carol', '>be me\\nwalk into a room\\nnobody notices'),
+      m(4, 'bob', 'back to normal')
+    ]
+    s.set({ accounts: [acct], groups: [{ id: 'account:sneedchat:me', accountId: 'sneedchat:me', service: 'sneedchat', kind: 'account', name: 'me', position: 0 }], buffers: [b], messagesByBuffer: { [b.id]: messages }, activeBufferId: b.id })
+    s.selectGroup('account:sneedchat:me')
+  })()`)
+  await sleep(1200)
+  const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+  fs.writeFileSync(path.join(out, 'sneedchat-greentext.png'), Buffer.from(data, 'base64'))
+  console.log('green lines', await ev(`[...document.querySelectorAll('.greentext')].map((e) => e.textContent + ' => ' + getComputedStyle(e).color)`))
+  console.log('quote blocks', await ev(`document.querySelectorAll('.quote-block').length`))
+} finally {
+  await stop()
+}

scripts/shot-twitch-chat.mjs

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+/**
+ * Reads a busy live Twitch channel in a scratch moho with no sign-in, and checks what the window shows:
+ * that the channel joins, messages arrive with their colours, badges and emote pictures, replies carry
+ * their quote, the room's modes are in the header and the chatters are counted.
+ *
+ *   node scripts/shot-twitch-chat.mjs <output directory> [channel] [seconds]
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { execFileSync } from 'node:child_process'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2] ?? '.'
+const channel = process.argv[3] ?? 'xqc'
+const seconds = Number(process.argv[4] ?? 40)
+fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const say = (...a) => console.log(new Date().toISOString().slice(11, 19), ...a)
+const ev = (code) => page.evaluate(code)
+try {
+  try {
+    const clients = JSON.parse(execFileSync('hyprctl', ['clients', '-j']).toString())
+    for (const c of clients.filter((c) => /electron|moho/i.test(c.class + c.title))) execFileSync('hyprctl', ['dispatch', 'movetoworkspacesilent', `2,address:${c.address}`])
+  } catch {}
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
+  const rpc = (m, p) => ev(`window.moho.rpc(${JSON.stringify(m)}, ${JSON.stringify(p)}).catch((e) => ({ error: String(e.message || e) }))`)
+  // HISTORY=1 turns on the third-party recent messages, which is off until a person says so.
+  if (process.env.HISTORY) await ev(`window.moho.prefs.set('twitch.recentHistory', true)`)
+  const added = await rpc('addTwitchAccount', {})
+  say('account', JSON.stringify(added))
+  await sleep(2500)
+  say('accounts', await ev(`JSON.stringify(window.__mohoShots.state().accounts.map((a) => ({ id: a.id, service: a.service, state: a.state, name: a.displayName, hasPassword: a.hasPassword })))`))
+  say('join', JSON.stringify(await rpc('joinBuffer', { accountId: added.accountId, name: channel })))
+  const id = `${added.accountId}|${channel}`
+  await ev(`window.__mohoShots.store.selectBuffer(${JSON.stringify(id)})`)
+  say('a channel that does not exist', JSON.stringify(await rpc('joinBuffer', { accountId: added.accountId, name: 'zzzz_no_such_channel_zzzz' })))
+  if (process.env.HISTORY) {
+    await sleep(6000)
+    say('rows six seconds after opening, with the past', await ev(`(window.__mohoShots.state().messagesByBuffer[${JSON.stringify(id)}] || []).length`))
+  }
+  await sleep(seconds * 1000)
+  say('buffers', await ev(`JSON.stringify(window.__mohoShots.state().buffers.filter((b) => b.accountId === ${JSON.stringify(added.accountId)}).map((b) => ({ id: b.id, modes: b.channelModes })))`))
+  say('page', await ev(`JSON.stringify({
+    rows: document.querySelectorAll('.message-row').length,
+    emotes: document.querySelectorAll('.message-row img.custom-emoji').length,
+    emotesLoaded: [...document.querySelectorAll('.message-row img.custom-emoji')].filter((i) => i.complete && i.naturalWidth > 0).length,
+    badges: [...new Set([...document.querySelectorAll('.message-row .sender-badge')].map((b) => b.textContent))],
+    badgePictures: document.querySelectorAll('.message-row .sender-badge-image').length,
+    badgePicturesLoaded: [...document.querySelectorAll('.message-row .sender-badge-image')].filter((i) => i.complete && i.naturalWidth > 0).length,
+    badgeTitles: [...new Set([...document.querySelectorAll('.message-row .sender-badge-image')].map((i) => i.title))].slice(0, 6),
+    emoteSources: [...new Set([...document.querySelectorAll('.message-row img.custom-emoji')].map((i) => new URL(i.src).hostname))],
+    replies: document.querySelectorAll('.message-row .reply-preview').length,
+    header: document.querySelector('.nicklist-header span')?.textContent,
+    coloured: document.querySelectorAll('.message-row .message-from[style*="color"]').length
+  })`))
+  await shot('twitch-chat.png')
+  async function shot(name) {
+    const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+    fs.writeFileSync(path.join(out, name), Buffer.from(data, 'base64'))
+  }
+} finally {
+  await stop()
+}

scripts/shot-twitch-signin.mjs

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+/**
+ * Opens the Accounts pane in a scratch moho and starts a Twitch sign-in: checks that one window of twitch.tv's
+ * login opens (nothing is typed into it), then closes that window as a person giving up would, and checks the
+ * form comes back with nothing saved. No account is signed in.
+ *
+ *   node scripts/shot-twitch-signin.mjs <output directory>
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { execFileSync } from 'node:child_process'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2] ?? '.'
+fs.mkdirSync(out, { recursive: true })
+const { page, stop, port } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const say = (...a) => console.log(new Date().toISOString().slice(11, 19), ...a)
+const ev = (code) => page.evaluate(code)
+const shot = async (name) => {
+  const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+  fs.writeFileSync(path.join(out, name), Buffer.from(data, 'base64'))
+}
+const clickText = (selector, text) => ev(`(() => { const b = [...document.querySelectorAll(${JSON.stringify(selector)})].find((x) => x.textContent.trim().startsWith(${JSON.stringify(text)})); if (!b) return false; b.click(); return true })()`)
+try {
+  try {
+    const clients = JSON.parse(execFileSync('hyprctl', ['clients', '-j']).toString())
+    for (const c of clients.filter((c) => /electron|moho/i.test(c.class + c.title))) execFileSync('hyprctl', ['dispatch', 'movetoworkspacesilent', `2,address:${c.address}`])
+  } catch {}
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1100, height: 800, deviceScaleFactor: 1, mobile: false })
+  await ev(`window.__mohoShots.store.setActivePanel('accounts')`)
+  await sleep(600)
+  say('twitch chip', await clickText('.service-chip', 'Twitch'))
+  await sleep(500)
+  await shot('twitch-signin-form.png')
+  say('sign in', await clickText('button', 'Sign in with Twitch'))
+  // The sign-in window is another page of the same app, so the debugging port lists it.
+  const targets = async () => (await (await fetch(`http://127.0.0.1:${port}/json/list`)).json()).filter((t) => t.type === 'page' && /twitch\.tv/.test(t.url))
+  let found = []
+  for (let i = 0; i < 40 && found.length === 0; i++) {
+    await sleep(500)
+    found = await targets()
+  }
+  say('sign-in window', JSON.stringify(found.map((t) => t.url)))
+  say('waiting text', await ev(`document.querySelector('.add-form')?.textContent.slice(0, 120)`))
+  await shot('twitch-signin-waiting.png')
+  // Giving up, as a person does by closing it.
+  for (const t of found) await fetch(`http://127.0.0.1:${port}/json/close/${t.id}`)
+  await sleep(2000)
+  say('window gone', (await targets()).length === 0)
+  say('back to the form', await ev(`!!([...document.querySelectorAll('button')].find((b) => b.textContent.trim() === 'Sign in with Twitch'))`))
+  say('accounts saved', await ev(`window.__mohoShots.state().accounts.filter((a) => a.service === 'twitch').length`))
+} finally {
+  await stop()
+}

scripts/shot-twitch-whisper.mjs

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+/**
+ * A Twitch channel and a whisper conversation side by side in the channel list, to see that they can be told
+ * apart. Injects the two buffers; nothing is contacted.
+ *
+ *   node scripts/shot-twitch-whisper.mjs <output directory>
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const out = process.argv[2] ?? '.'
+fs.mkdirSync(out, { recursive: true })
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+try {
+  await sleep(2500)
+  await page.call('Emulation.setDeviceMetricsOverride', { width: 1100, height: 700, deviceScaleFactor: 2, mobile: false })
+  await ev(`(() => {
+    const s = window.__mohoShots.store
+    const acct = { id: 'twitch:me', service: 'twitch', name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, nick: 'me' }
+    const pic = 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect width="64" height="64" fill="#7b5cd6"/><circle cx="32" cy="26" r="12" fill="#fff"/><rect x="14" y="42" width="36" height="16" rx="8" fill="#fff"/></svg>')
+    const buffers = [
+      { id: 'twitch:me|skitzy_va', accountId: 'twitch:me', kind: 'channel', name: 'skitzy_va', lastActivityTs: 5, avatarUrl: pic, category: 'Channels', groupId: 'account:twitch:me' },
+      { id: 'twitch:me|kotbarsik_twt', accountId: 'twitch:me', kind: 'channel', name: 'kotbarsik_twt', lastActivityTs: 4, avatarUrl: pic, category: 'Channels', groupId: 'account:twitch:me' },
+      { id: 'twitch:me|@anon7of10', accountId: 'twitch:me', kind: 'dm', name: '@anon7of10', lastActivityTs: 6, avatarUrl: pic, category: 'Direct Messages', groupId: 'account:twitch:me' }
+    ]
+    s.set({ accounts: [acct], groups: [{ id: 'account:twitch:me', accountId: 'twitch:me', service: 'twitch', kind: 'account', name: 'me', position: 0 }], buffers, activeBufferId: 'twitch:me|skitzy_va' })
+    s.selectGroup('account:twitch:me')
+  })()`)
+  await sleep(800)
+    await sleep(400)
+  const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+  fs.writeFileSync(path.join(out, 'twitch-whisper-vs-channel.png'), Buffer.from(data, 'base64'))
+  console.log('rows', await ev(`[...document.querySelectorAll('.buffer-row')].map((r) => r.innerText.replace(/\\n/g, ' ') + (r.querySelector('.avatar-badge') ? ' [badge]' : ''))`))
+} finally {
+  await stop()
+}

scripts/watch-kick-roster.mjs

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+/**
+ * Reads a busy live Kick channel in a scratch moho and reports how the chatters count grows against the
+ * names listed, and whether drawing a long list holds the window up.
+ *
+ *   node scripts/watch-kick-roster.mjs [channel] [seconds]
+ */
+import { execFileSync } from 'node:child_process'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const channel = process.argv[2] ?? 'spreen'
+const seconds = Number(process.argv[3] ?? 150)
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+try {
+  try {
+    const clients = JSON.parse(execFileSync('hyprctl', ['clients', '-j']).toString())
+    for (const c of clients.filter((c) => /electron|moho/i.test(c.class + c.title))) execFileSync('hyprctl', ['dispatch', 'movetoworkspacesilent', `2,address:${c.address}`])
+  } catch {}
+  await sleep(2500)
+  const rpc = (m, p) => ev(`window.moho.rpc(${JSON.stringify(m)}, ${JSON.stringify(p)}).catch((e) => ({ error: String(e.message || e) }))`)
+  const added = await rpc('addKickAccount', {})
+  await rpc('joinBuffer', { accountId: added.accountId, name: channel })
+  const id = `${added.accountId}|${channel}`
+  await ev(`window.__mohoShots.store.selectBuffer(${JSON.stringify(id)})`)
+  await ev(`(() => { window.__long = 0; window.__longMs = 0; new PerformanceObserver((l) => { for (const e of l.getEntries()) { window.__long++; window.__longMs += e.duration } }).observe({ entryTypes: ['longtask'] }) })()`)
+  const began = Date.now()
+  while (Date.now() - began < seconds * 1000) {
+    await sleep(15000)
+    console.log(await ev(`JSON.stringify({ header: document.querySelector('.nicklist-header span')?.textContent, rows: document.querySelectorAll('.nicklist .member-row, .nicklist-scroll > div > div:not(.nicklist-group)').length, state: (() => { const s = window.__mohoShots.state(); return { listed: (s.presenceByBuffer[${JSON.stringify(id)}] || []).length, total: s.presenceTotalByBuffer[${JSON.stringify(id)}] } })(), longTasks: window.__long, longMs: Math.round(window.__longMs) })`))
+  }
+} finally {
+  await stop()
+}

scripts/watch-kick-stalls.mjs

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+/**
+ * Watches a live Kick stream in a scratch moho and reports every time the picture waits for data: when,
+ * for how long, and how much was buffered ahead of the playhead just before.
+ *
+ *   node scripts/watch-kick-stalls.mjs [channel] [seconds]
+ */
+import { execFileSync } from 'node:child_process'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const channel = process.argv[2] ?? 'spreen'
+const seconds = Number(process.argv[3] ?? 90)
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+try {
+  try {
+    const clients = JSON.parse(execFileSync('hyprctl', ['clients', '-j']).toString())
+    for (const c of clients.filter((c) => /electron|moho/i.test(c.class + c.title))) execFileSync('hyprctl', ['dispatch', 'movetoworkspacesilent', `2,address:${c.address}`])
+  } catch {}
+  await sleep(2500)
+  const rpc = (m, p) => ev(`window.moho.rpc(${JSON.stringify(m)}, ${JSON.stringify(p)}).catch((e) => ({ error: String(e.message || e) }))`)
+  const added = await rpc('addKickAccount', {})
+  await rpc('joinBuffer', { accountId: added.accountId, name: channel })
+  const id = `${added.accountId}|${channel}`
+  for (let i = 0; i < 40; i++) {
+    await sleep(1000)
+    if (await ev(`!!window.__mohoShots.state().kickStreams[${JSON.stringify(id)}]?.playbackUrl`)) break
+  }
+  await ev(`(async () => { await window.__mohoShots.store.selectBuffer(${JSON.stringify(id)}); window.__mohoShots.store.watchStream(${JSON.stringify(id)}) })()`)
+  for (let i = 0; i < 40; i++) {
+    if (await ev(`!!document.querySelector('video.video-tile-picture')`)) break
+    await sleep(500)
+  }
+  await ev(`(() => {
+    const v = document.querySelector('video.video-tile-picture')
+    const log = (window.__stalls = { events: [], samples: [], t0: performance.now() })
+    const at = () => +((performance.now() - log.t0) / 1000).toFixed(1)
+    const ahead = () => { const b = v.buffered; return b.length ? +(b.end(b.length - 1) - v.currentTime).toFixed(2) : 0 }
+    for (const n of ['waiting', 'stalled', 'playing', 'seeking', 'seeked', 'ratechange']) v.addEventListener(n, () => log.events.push({ t: at(), n, ahead: ahead(), rate: v.playbackRate, ct: +v.currentTime.toFixed(2) }))
+    setInterval(() => log.samples.push({ t: at(), ahead: ahead(), ct: +v.currentTime.toFixed(2), rate: v.playbackRate }), 500)
+  })()`)
+  await sleep(seconds * 1000)
+  const r = JSON.parse(await ev('JSON.stringify(window.__stalls)'))
+  const waits = r.events.filter((e) => e.n === 'waiting')
+  console.log(`${waits.length} waiting events in ${seconds}s`)
+  for (const e of r.events) console.log(JSON.stringify(e))
+  const a = r.samples.map((s) => s.ahead)
+  console.log('buffer ahead: min', Math.min(...a), 'max', Math.max(...a), 'mean', +(a.reduce((x, y) => x + y, 0) / a.length).toFixed(2))
+  console.log('rates seen', [...new Set(r.samples.map((s) => s.rate))])
+  console.log('quality', await ev(`JSON.stringify((() => { const q = document.querySelector('video.video-tile-picture').getVideoPlaybackQuality(); return { dropped: q.droppedVideoFrames, total: q.totalVideoFrames } })())`))
+} finally {
+  await stop()
+}

scripts/watch-stream-stalls.mjs

@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+/**
+ * Watches a live stream of either service in a scratch moho and reports how it plays: every time the
+ * picture waits for data, how much was buffered ahead of the playhead, how far behind the stream's own
+ * clock it runs, what rendition it settled on, and whether an ad break was marked.
+ *
+ *   node scripts/watch-stream-stalls.mjs <kick|twitch> <channel> [seconds]
+ */
+import { execFileSync } from 'node:child_process'
+import { launchApp, sleep } from './lib/harness.mjs'
+
+const service = process.argv[2] ?? 'twitch'
+const channel = process.argv[3] ?? 'xqc'
+const seconds = Number(process.argv[4] ?? 90)
+const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
+const ev = (code) => page.evaluate(code)
+try {
+  try {
+    const clients = JSON.parse(execFileSync('hyprctl', ['clients', '-j']).toString())
+    for (const c of clients.filter((c) => /electron|moho/i.test(c.class + c.title))) execFileSync('hyprctl', ['dispatch', 'movetoworkspacesilent', `2,address:${c.address}`])
+  } catch {}
+  await sleep(2500)
+  const rpc = (m, p) => ev(`window.moho.rpc(${JSON.stringify(m)}, ${JSON.stringify(p)}).catch((e) => ({ error: String(e.message || e) }))`)
+  const added = await rpc(service === 'twitch' ? 'addTwitchAccount' : 'addKickAccount', {})
+  const accountId = added.accountId
+  console.log('join', JSON.stringify(await rpc('joinBuffer', { accountId, name: channel })))
+  const id = `${accountId}|${channel}`
+  for (let i = 0; i < 60; i++) {
+    await sleep(1000)
+    if (await ev(`!!window.__mohoShots.state().kickStreams[${JSON.stringify(id)}]?.playbackUrl`)) break
+  }
+  const stream = JSON.parse(await ev(`JSON.stringify((({ live, title, category, viewers, playbackExpires, adFree, playbackError }) => ({ live, title, category, viewers, playbackExpires, adFree, playbackError }))(window.__mohoShots.state().kickStreams[${JSON.stringify(id)}] || {}))`))
+  console.log('stream', JSON.stringify(stream))
+  if (!stream.live) { console.log('not live; nothing to watch'); process.exit(0) }
+  await ev(`(async () => { await window.__mohoShots.store.selectBuffer(${JSON.stringify(id)}); window.__mohoShots.store.watchStream(${JSON.stringify(id)}) })()`)
+  for (let i = 0; i < 40; i++) {
+    if (await ev(`!!document.querySelector('video.video-tile-picture') && window.__mohoHls?.levels?.length > 0`)) break
+    await sleep(500)
+  }
+  // The stream's own clock against ours, from the playlist's session data.
+  const offset = await ev(`(async () => { const u = window.__mohoShots.state().kickStreams[${JSON.stringify(id)}].playbackUrl; const t0 = Date.now(); const r = await fetch(u); const m = /SERVER-TIME",VALUE="([0-9.]+)"/.exec(await r.text()); return m ? Number(m[1]) * 1000 - (t0 + Date.now()) / 2 : null })().catch(() => null)`)
+  console.log('clock offset ms', offset)
+  await ev(`(() => {
+    const v = document.querySelector('video.video-tile-picture')
+    const log = (window.__stalls = { events: [], samples: [], t0: performance.now() })
+    const at = () => +((performance.now() - log.t0) / 1000).toFixed(1)
+    const ahead = () => { const b = v.buffered; return b.length ? +(b.end(b.length - 1) - v.currentTime).toFixed(2) : 0 }
+    for (const n of ['waiting', 'stalled', 'seeking', 'ratechange']) v.addEventListener(n, () => log.events.push({ t: at(), n, ahead: ahead(), ct: +v.currentTime.toFixed(2) }))
+    setInterval(() => {
+      const h = window.__mohoHls
+      log.samples.push({ t: at(), ahead: ahead(), latency: h?.playingDate && ${offset === null ? 'null' : offset} !== null ? +((Date.now() + ${offset ?? 0} - h.playingDate.getTime()) / 1000).toFixed(1) : null, level: h?.currentLevel, height: v.videoHeight, ad: !!document.querySelector('.stream-ad') })
+    }, 500)
+  })()`)
+  if (process.env.SHOT_DIR) {
+    // Photographs the stage, then its resolution menu, part-way through.
+    const fs = await import('node:fs')
+    const shot = async (name) => {
+      const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
+      fs.writeFileSync(`${process.env.SHOT_DIR}/${name}`, Buffer.from(data, 'base64'))
+    }
+    await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
+    await sleep(Math.min(20, seconds / 2) * 1000)
+    await shot(`${service}-stream.png`)
+    await ev(`document.querySelector('button[title^="Resolution"]')?.click()`)
+    await sleep(500)
+    console.log('quality choices', await ev(`JSON.stringify([...document.querySelectorAll('.stream-menu .context-menu-item')].map((b) => b.textContent.trim()))`))
+    await shot(`${service}-stream-quality.png`)
+    await ev(`document.querySelector('.stream-menu-scrim')?.click()`)
+    await sleep((seconds - Math.min(20, seconds / 2)) * 1000 - 500)
+  } else {
+    await sleep(seconds * 1000)
+  }
+  const r = JSON.parse(await ev('JSON.stringify(window.__stalls)'))
+  const waits = r.events.filter((e) => e.n === 'waiting' && e.t > 6)
+  console.log(`${waits.length} waiting events after the first six seconds, over ${seconds}s`)
+  for (const e of r.events.filter((e) => e.t > 6)) console.log(JSON.stringify(e))
+  const a = r.samples.map((s) => s.ahead)
+  const lat = r.samples.map((s) => s.latency).filter((x) => x !== null)
+  console.log('buffer ahead: min', Math.min(...a), 'max', Math.max(...a), 'mean', +(a.reduce((x, y) => x + y, 0) / a.length).toFixed(2))
+  if (lat.length) console.log('behind the stream: min', Math.min(...lat), 'max', Math.max(...lat), 'mean', +(lat.reduce((x, y) => x + y, 0) / lat.length).toFixed(1))
+  console.log('heights', [...new Set(r.samples.map((s) => s.height))], 'ad breaks seen', r.samples.some((s) => s.ad))
+  console.log('quality', await ev(`JSON.stringify((() => { const q = document.querySelector('video.video-tile-picture').getVideoPlaybackQuality(); return { dropped: q.droppedVideoFrames, total: q.totalVideoFrames } })())`))
+} finally {
+  await stop()
+}

src/main/browser-login.ts

@@ -30,7 +30,16 @@ export type Capture =
   /** A request header the page starts sending - Discord's Authorization. */
   | { kind: 'header'; name: string }
   /** A cookie the service sets - the usual shape for forum software. */
-  | { kind: 'cookie'; name: string; url: string }
+  | {
+      kind: 'cookie'
+      name: string
+      url: string
+      /**
+       * Where the same value is to be had if the named cookie is not there: another cookie holding JSON with
+       * the value under a key. Twitch's page-readable `twilight-user` carries the token its `auth-token` cookie does.
+       */
+      fallback?: { name: string; key: string }
+    }
   /** A parameter on a redirect the service lands on - SSO, mostly. */
   | { kind: 'query'; param: string }
   /**
@@ -126,6 +135,17 @@ export const LOGIN_FLOWS: Record<string, LoginFlow> = {
         "(document.querySelector('.p-navgroup-user-linkText') || document.querySelector('.p-navgroup-link--user .p-navgroup-linkText'))?.textContent?.trim() || null"
     }
   },
+  twitch: {
+    label: 'Twitch',
+    url: 'https://www.twitch.tv/login',
+    // Nothing: the credential is a cookie the site sets, not a request to read.
+    watch: [],
+    // The website's own session token, which is what Twitch's player calls accept for playing a stream as the
+    // person who signed in - their Turbo, their subscriptions - and which a token from moho's own sign-in
+    // (made for chat and the official API) is not. It goes straight to the daemon, for the account named.
+    capture: { kind: 'cookie', name: 'auth-token', url: 'https://www.twitch.tv', fallback: { name: 'twilight-user', key: 'authToken' } },
+    finish: { method: 'setTwitchWebToken', param: 'token' }
+  },
   kick: {
     label: 'Kick',
     url: 'https://kick.com/',
@@ -165,7 +185,20 @@ let openWindow: BrowserWindow | null = null
  * be signing in, and the second would inherit the first's half-finished
  * session.
  */
-export async function browserLogin(service: string): Promise<LoginOutcome> {
+export async function browserLogin(
+  service: string,
+  options?: {
+    /**
+     * Keeps the window open once the credential is captured, for a flow that goes on in it: called with the
+     * credential and the window, and the window closes when what it returns settles. Twitch's: signing in on
+     * twitch.tv and then, in the same window and the same session, approving the code that gives the chat
+     * connection its token.
+     */
+    hold?: (value: string, win: BrowserWindow) => Promise<void>
+    /** Said at each step, without any credential in it, for the log. */
+    trace?: (message: string) => void
+  }
+): Promise<LoginOutcome> {
   const flow = LOGIN_FLOWS[service]
   if (!flow) return { ok: false, error: `No browser sign-in is defined for ${service}` }
   if (openWindow && !openWindow.isDestroyed()) {
@@ -219,6 +252,17 @@ export async function browserLogin(service: string): Promise<LoginOutcome> {
     e.preventDefault()
     retitle()
   })
+  if (options?.trace) {
+    const trace = options.trace
+    win.webContents.on('did-navigate', (_e, url) => {
+      try {
+        const u = new URL(url)
+        trace(`the window is at ${u.host}${u.pathname}`)
+      } catch {
+        /* not a URL */
+      }
+    })
+  }
   win.webContents.on('did-navigate', retitle)
   win.webContents.on('did-navigate-in-page', retitle)
   retitle()
@@ -244,7 +288,19 @@ export async function browserLogin(service: string): Promise<LoginOutcome> {
       TIMEOUT_MS
     )
 
+    let holding = false
     watch(ses, win, flow, (value) => {
+      if (options?.hold) {
+        // The credential shows up more than once as cookies change; the flow is told once.
+        if (holding) return
+        holding = true
+        options.trace?.('signed in on twitch.tv; the session was found')
+        void options
+          .hold(value, win)
+          .then(() => finish({ ok: true, value }))
+          .catch((e: Error) => finish({ ok: false, error: e.message }))
+        return
+      }
       // Read before finishing, because finishing destroys the window - and
       // best-effort, because this is a nicety and the credential is not.
       const also = flow.alsoRead
@@ -320,14 +376,31 @@ function watch(ses: Session, win: BrowserWindow, flow: LoginFlow, found: (value:
   }
 
   if (flow.capture.kind === 'cookie') {
-    const { name, url } = flow.capture
+    const { name, url, fallback } = flow.capture
     const check = (): void => {
-      void ses.cookies.get({ url, name }).then((cookies) => {
-        const value = cookies[0]?.value
+      void ses.cookies.get({ url }).then((cookies) => {
+        let value = cookies.find((c) => c.name === name)?.value
+        if (!value && fallback) {
+          const holder = cookies.find((c) => c.name === fallback.name)?.value
+          if (holder) {
+            try {
+              const parsed = JSON.parse(decodeURIComponent(holder)) as Record<string, unknown>
+              const token = parsed[fallback.key]
+              if (typeof token === 'string') value = token
+            } catch {
+              /* not JSON yet; the next change will be */
+            }
+          }
+        }
         if (value) found(value)
       })
     }
     ses.cookies.on('changed', check)
+    // Also after each page, in case the sign-in ended in a redirect that the cookie jar's own events did not announce.
+    if (!win.isDestroyed()) {
+      win.webContents.on('did-navigate', check)
+      win.webContents.on('did-finish-load', check)
+    }
     check()
     return
   }

src/main/index.ts

@@ -29,6 +29,8 @@ import { Notifier } from './notifications'
 import { IdleWatcher } from './idle'
 import { NOTHING_WAITING, trayIconFile, trayMenu, trayTooltip, type TrayState, type TrayStatus } from './tray'
 import { browserLogin, LOGIN_FLOWS } from './browser-login'
+import { feedTwitchSignIn, twitchSignIn } from './twitch-signin'
+import { answerIntegrity, mintIntegrity } from './twitch-integrity'
 import { EDIT_ACTIONS, IPC, POPOUT_FLAG, UI_SHOTS_FLAG, type EditAction, type EditMenuRequest, type PopoutState } from '../shared/ipc'
 import { clearnetLinks } from '../shared/clearnet'
 import { readCapped, pictureNamedIn } from './imagepage'
@@ -354,7 +356,8 @@ function wireEditMenu(win: BrowserWindow): void {
         delete: f.canDelete,
         selectAll: f.canSelectAll
       },
-      hasSelection: params.selectionText.length > 0
+      hasSelection: params.selectionText.length > 0,
+      selection: params.selectionText.slice(0, 1000)
     } satisfies EditMenuRequest)
   })
 }
@@ -617,6 +620,28 @@ function toggleWindow(): void {
   }
 }
 
+/**
+ * What a left click on the tray icon does: put the window away if it is showing, bring it back if it is not.
+ *
+ * By whether it is showing, and not by whether it has focus. Clicking the tray takes the focus off the window first
+ * on most desktops, so asking whether it is focused always said no, and a click could only ever show the window -
+ * never put it away. The hotkey keeps the focus test (see `toggleWindow`): pressed while typing somewhere else it
+ * means "bring moho here", not "hide it".
+ */
+function toggleFromTray(): void {
+  if (!mainWindow) {
+    createWindow()
+    return
+  }
+  if (mainWindow.isVisible() && !mainWindow.isMinimized()) {
+    mainWindow.hide()
+    return
+  }
+  if (mainWindow.isMinimized()) mainWindow.restore()
+  mainWindow.show()
+  mainWindow.focus()
+}
+
 function trayIcon(unread: number): Electron.NativeImage {
   lastTrayIcon = trayIconFile(nativeTheme.shouldUseDarkColors, unread)
   const img = nativeImage.createFromPath(resourcePath('icons', lastTrayIcon))
@@ -698,7 +723,7 @@ function createTray(): void {
   tray = new Tray(trayIcon(0))
   tray.setToolTip('moho')
   refreshTrayMenu()
-  tray.on('click', toggleWindow)
+  tray.on('click', toggleFromTray)
   // The icon is drawn for the panel it sits on, so it is drawn again when the
   // system changes colour scheme.
   nativeTheme.on('updated', () => updateTray(lastTray))
@@ -891,6 +916,38 @@ function wireIpc(): void {
     if (/^(https?|mailto):/i.test(url)) shell.openExternal(url)
   })
 
+  // An article, drawn from a document the daemon built (see nobilis's backend/telegram/instant.rs). It gets a window
+  // of its own that can do nothing but show it: no script, no preload, no way to navigate away - a link opens in the
+  // browser - and the only pictures it may draw are the daemon's cached ones, through moho-media.
+  ipcMain.handle(IPC.openArticle, (_e, title: unknown, html: unknown) => {
+    if (typeof html !== 'string' || html.length > 8_000_000) return
+    const win = new BrowserWindow({
+      width: 900,
+      height: 800,
+      minWidth: 360,
+      minHeight: 300,
+      autoHideMenuBar: true,
+      backgroundColor: '#0e1621',
+      icon: resourcePath('icons', 'moho.png'),
+      title: typeof title === 'string' && title ? title : 'Article',
+      webPreferences: { contextIsolation: true, nodeIntegration: false, sandbox: true, javascript: false }
+    })
+    const external = (url: string): void => {
+      if (/^(https?|mailto):/i.test(url)) shell.openExternal(url)
+    }
+    win.webContents.setWindowOpenHandler(({ url }) => {
+      external(url)
+      return { action: 'deny' }
+    })
+    win.webContents.on('will-navigate', (event, url) => {
+      // A place in the same page is fine; anything else is somewhere else.
+      if (url.startsWith('data:') && url.includes('#')) return
+      event.preventDefault()
+      external(url)
+    })
+    void win.loadURL(`data:text/html;charset=utf-8;base64,${Buffer.from(html, 'utf8').toString('base64')}`)
+  })
+
   // Where to write something the app is about to produce - a key export, so
   // far. Separate from pickFile because the two dialogs ask opposite
   // questions, and a save dialog that cannot name a default file is a save
@@ -1110,6 +1167,13 @@ function wireIpc(): void {
     }
   })
 
+  // Twitch's sign-in, both halves in one window (see twitch-signin.ts). Only whether it worked comes back.
+  ipcMain.handle(IPC.twitchSignIn, (_e, options?: { useTor?: boolean }) =>
+    twitchSignIn((method, params) => client.request(method, params), {
+      useTor: typeof options?.useTor === 'boolean' ? options.useTor : undefined
+    })
+  )
+
   ipcMain.handle(IPC.smiliesDir, () => smiliesPath())
 
   // Chromium's HTTP cache, which Settings reports beside the daemon's.
@@ -1143,7 +1207,7 @@ app.whenReady().then(() => {
     applyPolicy(contents)
     contents.on('console-message', (event) => {
       const message = (event as unknown as { message?: string }).message
-      if (typeof message === 'string' && message.startsWith('[call] ')) log.info(message)
+      if (typeof message === 'string' && (message.startsWith('[call] ') || message.startsWith('[restore] '))) log.info(message)
     })
   })
 
@@ -1179,7 +1243,9 @@ app.whenReady().then(() => {
   // Granted only to this application's own windows, on the default session.
   // A sign-in window loads somebody else's page and runs in a partition of
   // its own, which this handler never sees.
-  const allowed = new Set(['media', 'display-capture', 'audioCapture', 'videoCapture'])
+  // And full screen, which a page asks for with requestFullscreen: a handler that does not name it refuses it, and the
+  // video player's button then did nothing.
+  const allowed = new Set(['media', 'display-capture', 'audioCapture', 'videoCapture', 'fullscreen'])
   session.defaultSession.setPermissionRequestHandler((_contents, permission, callback) => {
     callback(allowed.has(permission))
   })
@@ -1320,6 +1386,13 @@ app.whenReady().then(() => {
     } else if (frame.event === 'netSettings') {
       void applyTunnel((method, params) => client.request(method, params))
       resetRoute()
+    } else if (frame.event.startsWith('twitchLogin')) {
+      feedTwitchSignIn(frame as { event: string; data?: Record<string, unknown> })
+    } else if (frame.event === 'twitchIntegrityNeeded') {
+      // Twitch wants proof that a browser is asking for a stream; only a page of its own can make it.
+      void answerIntegrity(frame.data as { requestId?: string; deviceId?: string; authToken?: string }, (method, params) => client.request(method, params))
+      // Not forwarded: it carries the session, which only main and the daemon are to hold.
+      return
     }
     send(IPC.event, frame)
   })
@@ -1334,6 +1407,7 @@ app.whenReady().then(() => {
   // For the UI harness, which has no way to look inside a tray: what it shows
   // and offers, and the entries themselves to be clicked. Only when it asks.
   if (process.env.MOHO_UI_SHOTS === '1') {
+    ;(globalThis as Record<string, unknown>).__mohoTwitchIntegrity = { mint: mintIntegrity }
     ;(globalThis as Record<string, unknown>).__mohoTray = {
       update: updateTray,
       idle: (v: boolean | null) => idleWatcher.forceForTesting(v),

src/main/media-protocol.ts

@@ -122,6 +122,8 @@ const DAEMON_MEDIA_DIRS = [
   'kick-emotes',
   'discord-stickers',
   'discord-sounds',
+  'telegram-media',
+  'telegram-avatars',
   'transient'
 ]
 

src/main/twitch-integrity.ts

@@ -0,0 +1,81 @@
+import { BrowserWindow, session } from 'electron'
+import { routeSession } from './tunnel'
+
+/**
+ * An integrity token for Twitch's GraphQL, which only a real page on twitch.tv can make.
+ *
+ * Twitch asks, now and then, for proof that the one asking for a stream is a browser and not a program: a
+ * token its own page computes with bot-detection script that nobody else can run. Not asked for today, and
+ * for a week in May 2023 it was. When it is asked for again the daemon cannot make one, so it says so (the
+ * `twitchIntegrityNeeded` event) and this makes it: a window nobody sees, on a throwaway session, that loads
+ * a twitch.tv page, waits for that script to be ready, and calls the same endpoint the page does. The token
+ * comes back valid for about sixteen hours and is for the device id the daemon names.
+ *
+ * Nothing is signed in to, nothing is kept (the session is memory-only and wiped), and it goes through the
+ * route like every other window does.
+ */
+
+/** The Client ID twitch.tv's own pages send; the integrity endpoint answers only to it. */
+const SITE_CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko'
+
+export interface Integrity {
+  token: string
+  /** When it stops being good, in Unix milliseconds. */
+  expiration: number
+}
+
+const sleep = (ms: number): Promise<void> => new Promise((r) => setTimeout(r, ms))
+
+export async function mintIntegrity(deviceId: string, authToken = '', timeoutMs = 45_000): Promise<Integrity> {
+  const partition = `moho-twitch-integrity-${Date.now()}`
+  const ses = session.fromPartition(partition)
+  await routeSession(ses)
+  const win = new BrowserWindow({
+    show: false,
+    width: 900,
+    height: 700,
+    webPreferences: { partition, contextIsolation: true, nodeIntegration: false, sandbox: true, webSecurity: true }
+  })
+  try {
+    // A page with Twitch's own scripts on it: the bot check is one of them, and it patches fetch.
+    await win.loadURL('https://www.twitch.tv/directory')
+    const script = `(async () => {
+      const r = await fetch('https://gql.twitch.tv/integrity', { method: 'POST', headers: { 'Client-ID': ${JSON.stringify(SITE_CLIENT_ID)}, 'X-Device-Id': ${JSON.stringify(deviceId)}${authToken ? `, Authorization: ${JSON.stringify('OAuth ' + authToken)}` : ''} }, credentials: 'omit' })
+      if (r.status !== 200) throw new Error('Twitch answered ' + r.status)
+      const j = await r.json()
+      if (!j.token) throw new Error('Twitch sent no token')
+      return { token: j.token, expiration: j.expiration }
+    })()`
+    const deadline = Date.now() + timeoutMs
+    let last = ''
+    // The script that makes the call valid loads after the page does, so the first tries may be refused.
+    while (Date.now() < deadline) {
+      try {
+        const made = (await win.webContents.executeJavaScript(script, true)) as Integrity
+        if (made?.token) return made
+      } catch (e) {
+        last = (e as Error).message
+      }
+      await sleep(2000)
+    }
+    throw new Error(last || 'the page never became ready')
+  } finally {
+    if (!win.isDestroyed()) win.destroy()
+    void ses.clearStorageData()
+  }
+}
+
+/** Answers the daemon's request: makes the token and hands it over, or says why it could not. */
+export async function answerIntegrity(
+  data: { requestId?: string; deviceId?: string; authToken?: string },
+  request: (method: string, params: Record<string, unknown>) => Promise<unknown>
+): Promise<void> {
+  if (!data.requestId || !data.deviceId) return
+  try {
+    // As the account when it names one: Twitch takes for an account's call only a token made as that account.
+    const made = await mintIntegrity(data.deviceId, data.authToken ?? '')
+    await request('provideTwitchIntegrity', { requestId: data.requestId, token: made.token, expiration: made.expiration })
+  } catch (e) {
+    await request('provideTwitchIntegrity', { requestId: data.requestId, error: (e as Error).message }).catch(() => {})
+  }
+}

src/main/twitch-signin.test.ts

@@ -0,0 +1,64 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// The window itself is Electron's; what is under test is the order of things around it.
+const login = vi.hoisted(() => ({ browserLogin: vi.fn() }))
+vi.mock('./browser-login', () => login)
+vi.mock('./log', () => ({ log: { info: () => undefined } }))
+
+import { feedTwitchSignIn, twitchSignIn } from './twitch-signin'
+
+describe('Twitch sign-in as one action', () => {
+  beforeEach(() => {
+    login.browserLogin.mockReset()
+  })
+
+  it('hands the session to the daemon, takes the same window to the code, and finishes when the code is approved', async () => {
+    const calls: string[] = []
+    const request = vi.fn(async (method: string, params: Record<string, unknown>) => {
+      calls.push(method)
+      if (method === 'startTwitchLogin') {
+        // The code is heard in the time it takes the person to sign in.
+        setTimeout(() => feedTwitchSignIn({ event: 'twitchLoginCode', data: { loginId: 'L1', verificationUri: 'https://www.twitch.tv/activate?device-code=ABCD' } }), 0)
+        return { loginId: 'L1' }
+      }
+      if (method === 'setTwitchLoginWebToken') expect(params).toEqual({ loginId: 'L1', token: 'web-session' })
+      return {}
+    })
+    const loaded: string[] = []
+    login.browserLogin.mockImplementation(async (_service: string, options: { hold: (v: string, w: unknown) => Promise<void> }) => {
+      const win = { loadURL: async (u: string) => void loaded.push(u), webContents: { isLoading: () => false, on: () => undefined } }
+      const held = options.hold('web-session', win)
+      // Approving it on the page.
+      setTimeout(() => feedTwitchSignIn({ event: 'twitchLoginResult', data: { loginId: 'L1', success: true } }), 20)
+      await held
+      return { ok: true }
+    })
+    const outcome = await twitchSignIn(request, {})
+    expect(outcome).toEqual({ ok: true })
+    expect(calls).toEqual(['startTwitchLogin', 'setTwitchLoginWebToken'])
+    expect(loaded).toEqual(['https://www.twitch.tv/activate?device-code=ABCD'])
+    expect(request).toHaveBeenCalledWith('startTwitchLogin', {})
+  })
+
+  it('ends the daemon\'s wait when the window is closed before the code was approved', async () => {
+    const calls: string[] = []
+    const request = vi.fn(async (method: string) => {
+      calls.push(method)
+      return method === 'startTwitchLogin' ? { loginId: 'L2' } : {}
+    })
+    login.browserLogin.mockResolvedValue({ ok: false, error: 'cancelled' })
+    expect(await twitchSignIn(request, {})).toEqual({ ok: false, error: 'cancelled' })
+    expect(calls).toEqual(['startTwitchLogin', 'cancelTwitchLogin'])
+  })
+
+  it('does not run two at once, and says a refused sign-in', async () => {
+    let release: (v: { ok: boolean }) => void = () => {}
+    login.browserLogin.mockImplementation(() => new Promise((r) => (release = r)))
+    const request = vi.fn(async () => ({ loginId: 'L3' }))
+    const first = twitchSignIn(request, {})
+    await new Promise((r) => setTimeout(r, 5))
+    expect(await twitchSignIn(request, {})).toEqual({ ok: false, error: 'A Twitch sign-in is already under way' })
+    release({ ok: true })
+    await first
+  })
+})

src/main/twitch-signin.ts

@@ -0,0 +1,189 @@
+import { browserLogin } from './browser-login'
+import { log } from './log'
+
+/**
+ * Signing in to Twitch: one action that gives the account both things it needs.
+ *
+ * Twitch has two sign-ins that cannot be had from each other. Its official API (chat, sending, follows,
+ * moderation) takes a token made by approving a short code on twitch.tv; its player takes only the session
+ * of someone signed in to twitch.tv itself. Asking a person to do those as two flows was asking them to sign
+ * in twice. Here it is one window: the person signs in to twitch.tv (typed there, never seen by moho), and
+ * the same window, with the session it now holds, is taken to the page that approves the code. Approving it
+ * is Twitch's own consent screen - what moho will be allowed to do is listed there - and is left to the
+ * person; it is the one click that is theirs to make.
+ *
+ * The session found on the way goes straight to the daemon, to be saved with the account the code becomes,
+ * and is never returned to the page that asked.
+ */
+
+type Request = (method: string, params: Record<string, unknown>) => Promise<unknown>
+
+interface Waiting {
+  loginId: string
+  userCode: string
+  gotCode: ((uri: string) => void) | null
+  codePromise: Promise<string>
+  result: ((r: { success: boolean; error?: string }) => void) | null
+  resultPromise: Promise<{ success: boolean; error?: string }>
+  /** The code was approved or the sign-in is over: the window may go where it likes. */
+  finished: boolean
+}
+
+let active: Waiting | null = null
+
+/** Daemon events, offered here by main for the sign-in that is waiting on them. */
+export function feedTwitchSignIn(frame: { event: string; data?: Record<string, unknown> }): void {
+  if (!active || !frame.event.startsWith('twitchLogin')) return
+  const d = frame.data ?? {}
+  // The first events can be heard before the daemon's answer naming the sign-in; nothing else is signing in.
+  if (active.loginId && d.loginId !== active.loginId) return
+  if (frame.event === 'twitchLoginCode' && typeof d.verificationUri === 'string') {
+    if (typeof d.userCode === 'string') active.userCode = d.userCode
+    active.gotCode?.(d.verificationUri)
+  } else if (frame.event === 'twitchLoginResult') {
+    active.result?.({ success: d.success === true, error: typeof d.error === 'string' ? d.error : undefined })
+  }
+}
+
+export interface SignInOutcome {
+  ok: boolean
+  error?: string
+}
+
+export async function twitchSignIn(request: Request, options: { useTor?: boolean }): Promise<SignInOutcome> {
+  if (active) return { ok: false, error: 'A Twitch sign-in is already under way' }
+  let gotCode: (uri: string) => void = () => {}
+  let result: (r: { success: boolean; error?: string }) => void = () => {}
+  const w: Waiting = {
+    loginId: '',
+    userCode: '',
+    gotCode: null,
+    codePromise: new Promise<string>((r) => (gotCode = r)),
+    result: null,
+    finished: false,
+    resultPromise: new Promise((r) => (result = r))
+  }
+  w.gotCode = gotCode
+  w.result = result
+  active = w
+  try {
+    const started = (await request('startTwitchLogin', {
+      ...(typeof options.useTor === 'boolean' ? { useTor: options.useTor } : {})
+    })) as { loginId: string }
+    w.loginId = started.loginId
+
+    const outcome = await browserLogin('twitch', {
+      trace: (m) => log.info(`twitch sign-in: ${m}`),
+      hold: async (token, win) => {
+        // To the daemon, for the account the code is about to become. Never anywhere else.
+        await request('setTwitchLoginWebToken', { loginId: w.loginId, token })
+        let giveUp: NodeJS.Timeout | undefined
+        const uri = await Promise.race([
+          w.codePromise,
+          new Promise<string>((_, no) => (giveUp = setTimeout(() => no(new Error('Twitch sent no code')), 30_000)))
+        ]).finally(() => clearTimeout(giveUp))
+        // Signed in. The page is still on its way somewhere (twitch.tv sends a new login to its front page), so
+        // that is let finish before the same window is taken to the page that approves the code - and brought
+        // back to it if the site's own redirect lands after, which would leave the person on the front page.
+        await settled(win)
+        const go = (): void => {
+          log.info('twitch sign-in: taking the window to the approval page')
+          win.loadURL(uri).catch(() => undefined)
+        }
+        go()
+        let tries = 0
+        const wander = (_e: unknown, url: string): void => {
+          let here = ''
+          try {
+            here = new URL(url).pathname
+          } catch {
+            return
+          }
+          if (!here.startsWith('/activate') && !w.finished && tries < 4) {
+            tries++
+            log.info(`twitch sign-in: the window went to ${here}; back to the approval page (${tries})`)
+            setTimeout(go, 600)
+          }
+        }
+        // Twitch's page does not take the code from the address, so it is typed into the page's field for the
+        // person, and nothing more: pressing Activate and then Authorize on Twitch's own screens is theirs.
+        const filled = (): void => {
+          if (w.finished || !w.userCode || !win.webContents.getURL().includes('/activate')) return
+          void win.webContents
+            .executeJavaScript(fillCode(w.userCode), true)
+            .then((how: unknown) => log.info(`twitch sign-in: the code field: ${String(how)}`))
+            .catch(() => undefined)
+        }
+        win.webContents.on('did-finish-load', filled)
+        win.webContents.on('did-navigate', wander)
+        win.webContents.on('did-navigate-in-page', wander)
+        const done = await w.resultPromise
+        w.finished = true
+        if (!done.success) throw new Error(done.error || 'Twitch sign-in failed')
+      }
+    })
+    if (!outcome.ok) {
+      // The window was closed or timed out before the code was approved: nobody is waiting for it any more.
+      await request('cancelTwitchLogin', { loginId: w.loginId }).catch(() => undefined)
+      return { ok: false, error: outcome.error }
+    }
+    return { ok: true }
+  } catch (e) {
+    if (w.loginId) await request('cancelTwitchLogin', { loginId: w.loginId }).catch(() => undefined)
+    return { ok: false, error: (e as Error).message }
+  } finally {
+    active = null
+  }
+}
+
+/** Waits for the window's page to finish loading and stay quiet for a moment. */
+async function settled(win: { webContents: { isLoading(): boolean } }): Promise<void> {
+  const quiet = 1500
+  let quietFor = 0
+  for (let waited = 0; waited < 15_000 && quietFor < quiet; waited += 250) {
+    await new Promise((r) => setTimeout(r, 250))
+    quietFor = win.webContents.isLoading() ? 0 : quietFor + 250
+  }
+}
+
+/**
+ * A script that finds the code field on Twitch's "Activate your device" page and types the code in, the way a
+ * person would (so the page's own scripts see it). Waits for the page, which draws it after it loads; says what it
+ * found. It presses the page's Activate button, which only submits the code, and nothing after it.
+ */
+export function fillCode(code: string): string {
+  return `(async (code) => {
+    const type = (el, v) => {
+      const set = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), 'value').set
+      el.focus()
+      set.call(el, v)
+      el.dispatchEvent(new Event('input', { bubbles: true }))
+      el.dispatchEvent(new Event('change', { bubbles: true }))
+    }
+    const shown = (el) => el.getClientRects().length > 0 && !el.disabled && !el.readOnly
+    const deadline = Date.now() + 20000
+    while (Date.now() < deadline) {
+      const inputs = [...document.querySelectorAll('input')].filter((i) => ['text', 'tel', 'search', ''].includes(i.type) && shown(i))
+      const boxes = inputs.filter((i) => i.maxLength === 1)
+      if (boxes.length >= code.length) {
+        code.split('').forEach((c, i) => type(boxes[i], c))
+        return 'filled ' + code.length + ' boxes'
+      }
+      const named = inputs.find((i) => /code/i.test([i.name, i.id, i.placeholder, i.getAttribute('aria-label')].join(' ')))
+      const field = named || (inputs.length === 1 ? inputs[0] : null)
+      if (field) {
+        if (field.value !== code) type(field, code)
+        // Submitting the code is the page's own "Activate" button; approving what moho may do, next, is not.
+        const go = field.form && [...field.form.querySelectorAll('button, input[type=submit]')].find((b) => /^activate$/i.test((b.innerText || b.value || '').trim()))
+        if (go && !window.__mohoSubmitted) {
+          window.__mohoSubmitted = true
+          go.click()
+          return 'filled one field and pressed Activate'
+        }
+        return 'filled one field'
+      }
+      await new Promise((r) => setTimeout(r, 400))
+    }
+    return 'no code field found'
+  })(${JSON.stringify(code)})`
+}

src/preload/index.ts

@@ -44,6 +44,11 @@ const api = {
     return ipcRenderer.invoke(IPC.browserLogin, service, accountId, options)
   },
 
+  /** Signs in to Twitch for chat and video at once, in one window. Resolves when it is done or given up. */
+  twitchSignIn(options: { useTor?: boolean }): Promise<{ ok: boolean; error?: string }> {
+    return ipcRenderer.invoke(IPC.twitchSignIn, options)
+  },
+
   onEvent(cb: (frame: NobilisEvent) => void): () => void {
     const handler = (_e: unknown, frame: NobilisEvent): void => cb(frame)
     ipcRenderer.on(IPC.event, handler)
@@ -130,6 +135,9 @@ const api = {
 
   openExternal: (url: string): Promise<void> => ipcRenderer.invoke(IPC.openExternal, url),
 
+  /** A finished document (a Telegram Instant View) in a window of its own. */
+  openArticle: (title: string, html: string): Promise<void> => ipcRenderer.invoke(IPC.openArticle, title, html),
+
   /**
    * Which picture a page is showing, read from its own OpenGraph tag.
    *

src/renderer/src/App.tsx

@@ -12,6 +12,7 @@ import { trayCount } from './lib/traycount'
 import { Composer } from './components/Composer'
 import { MembershipGate } from './components/MembershipGate'
 import { NickList } from './components/NickList'
+import { ColumnResizer, useColumnWidth } from './components/ColumnResizer'
 import { ThreadPanel } from './components/ThreadPanel'
 import { InvitePanel } from './components/InvitePanel'
 import { SteamFriendDialogs } from './components/SteamFriendDialogs'
@@ -85,6 +86,9 @@ export default function App(): JSX.Element {
   const [zoom] = usePref<number>('appearance.zoom', 1)
   const [density] = usePref<string>('appearance.density', 'cozy')
   const [reduceMotion] = usePref<boolean>('appearance.reduceMotion', false)
+  // The two side columns, as they were last dragged.
+  const [sidebarWidth, setSidebarWidth] = useColumnWidth('ui.sidebarWidth', 220)
+  const [nicklistWidth, setNicklistWidth] = useColumnWidth('ui.nicklistWidth', 180)
   const [hourFormat] = usePref<string>('display.hourFormat', '24')
   setHourFormat(hourFormat)
   useEffect(() => window.moho.setZoom(zoom), [zoom])
@@ -196,7 +200,7 @@ export default function App(): JSX.Element {
             : ''
 
   return (
-    <div className="app">
+    <div className="app" style={{ '--sidebar-width': `${sidebarWidth}px`, '--nicklist-width': `${nicklistWidth}px` } as React.CSSProperties}>
       <TitleBar />
 
       <div className="app-body">
@@ -210,7 +214,7 @@ export default function App(): JSX.Element {
             <div className="sidebar">
               <BufferList />
             </div>
-            <div className="divider-v" />
+            <ColumnResizer width={sidebarWidth} onWidth={setSidebarWidth} min={160} max={520} grows="right" label="Channel list width" />
           </>
         )}
 
@@ -308,7 +312,7 @@ export default function App(): JSX.Element {
 
         {!openThread && showNickList && (
           <>
-            <div className="divider-v" />
+            <ColumnResizer width={nicklistWidth} onWidth={setNicklistWidth} min={140} max={420} grows="left" label="Member list width" />
             <div className="nicklist-pane">
               <NickList />
             </div>

src/renderer/src/app.css

@@ -71,6 +71,37 @@
 
 /* --- shell ------------------------------------------------------------ */
 
+/* A divider between columns that can be dragged. Its line stays one pixel; the part that takes the pointer is wider. */
+.divider-v.resizer {
+  position: relative;
+  cursor: col-resize;
+  touch-action: none;
+  z-index: var(--z-raised);
+}
+
+.divider-v.resizer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -4px;
+  right: -4px;
+}
+
+.divider-v.resizer:hover,
+.divider-v.resizer.dragging,
+.divider-v.resizer:focus-visible {
+  background: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
+  outline: none;
+}
+
+/* While a column is being dragged: the cursor stays, and nothing underneath is selected. */
+body.resizing-column {
+  cursor: col-resize;
+  user-select: none;
+}
+
 .app-body {
   display: flex;
   flex: 1;
@@ -949,6 +980,7 @@
  * conversation and people type into a channel while talking in it.
  */
 .call-stage {
+  position: relative;
   display: flex;
   flex-direction: column;
   flex: none;
@@ -1115,6 +1147,35 @@ button.video-tile {
   object-fit: cover;
 }
 
+/* The live captions of a stream, drawn by the video element itself. */
+.video-tile-picture::cue {
+  background: rgba(0, 0, 0, 0.72);
+  color: #fff;
+  font-size: clamp(13px, 2.2vw, 20px);
+  line-height: 1.3;
+}
+
+/* A list over the picture, in place of a menu in the window: a stream popped out is another document. */
+.stream-menu-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+
+.context-menu.stream-menu {
+  position: absolute;
+  top: var(--spacing-s);
+  right: var(--spacing-s);
+  z-index: 3;
+  max-height: calc(100% - 2 * var(--spacing-s));
+  overflow-y: auto;
+  transform-origin: top right;
+}
+
+.stream-menu-title {
+  padding: 2px var(--spacing-s) var(--spacing-xs);
+}
+
 /* Nothing to look at: the name and a face, which is what a call without
    cameras actually is. */
 .video-tile-picture.audio-only {
@@ -2921,8 +2982,8 @@ img.custom-emoji.steam-sticker {
 }
 
 .membership-rules {
-  max-width: 480px;
-  max-height: 70vh;
+  width: min(860px, 94vw);
+  max-height: 80vh;
   overflow-y: auto;
   padding: var(--spacing-l);
   border-radius: var(--corner-radius);
@@ -2931,6 +2992,69 @@ img.custom-emoji.steam-sticker {
   box-shadow: var(--shadow-2);
 }
 
+/* The server on the left and its form on the right, as Discord draws it; one above the other when narrow. */
+.membership-body {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: var(--spacing-xl, 24px);
+  align-items: start;
+}
+@media (max-width: 720px) {
+  .membership-body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+.membership-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: var(--spacing-m);
+  border-radius: var(--corner-radius);
+  background: var(--surface-container);
+  border: 1px solid var(--outline-medium);
+}
+.membership-card-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
+  object-fit: cover;
+}
+.membership-card-name {
+  font-weight: var(--weight-semibold);
+}
+.membership-title {
+  margin: 0 0 4px;
+  font-size: var(--font-size-large);
+  font-weight: var(--weight-semibold);
+}
+.membership-field {
+  margin-top: var(--spacing-m);
+}
+.membership-field-label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: var(--weight-semibold);
+}
+.membership-rules-list {
+  margin: 0 0 var(--spacing-s);
+  padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) 2em;
+  border-radius: var(--corner-radius-small);
+  background: var(--surface-container);
+}
+.membership-rules-list li {
+  padding: 6px 0;
+  white-space: pre-wrap;
+}
+.membership-rules-list li + li {
+  border-top: 1px solid var(--outline-medium);
+}
+.membership-agree {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  margin: 4px 0;
+}
+
 .membership-rules-head {
   font-size: var(--font-size-large);
   font-weight: var(--weight-semibold);
@@ -3447,6 +3571,155 @@ img.smilie {
   margin-top: var(--spacing-s);
 }
 
+/* A link's preview as Telegram draws it: an accent bar, the site in the accent, the title in bold, the picture, and
+   Instant View as a bar along the bottom. */
+.link-card {
+  margin: var(--spacing-xxs) 0;
+  padding: 2px 0 0 var(--spacing-m);
+  border-left: 3px solid var(--primary);
+  max-width: 420px;
+}
+.link-card-site {
+  color: var(--primary);
+  font-weight: var(--weight-semibold);
+  font-size: 0.92em;
+}
+.link-card-title {
+  display: block;
+  font-weight: var(--weight-semibold);
+  color: inherit;
+  text-decoration: none;
+}
+.link-card-desc {
+  color: var(--surface-variant-text);
+  white-space: pre-wrap;
+}
+.link-card-image {
+  display: block;
+  width: 100%;
+  max-height: 320px;
+  margin-top: var(--spacing-xs);
+  border-radius: var(--corner-radius-small);
+  object-fit: cover;
+  cursor: pointer;
+}
+.link-card-instant {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  margin-top: var(--spacing-xs);
+  padding: 6px 0;
+  border: 0;
+  border-radius: var(--corner-radius-small);
+  background: var(--primary-hover);
+  color: var(--primary);
+  font-weight: var(--weight-semibold);
+  letter-spacing: 0.04em;
+  cursor: pointer;
+}
+.link-card-instant:hover {
+  background: var(--primary-selected);
+}
+
+/* The glyph for what kind of conversation it is (a horn for a broadcast channel, a robot for a bot), ahead of its picture. */
+.buffer-kind-icon {
+  flex: none;
+  opacity: 0.85;
+}
+
+/* What a Telegram message answers: an accent bar, who said it, what they said, and the quote mark. */
+.tg-quote {
+  position: relative;
+  display: block;
+  margin: 2px 0 4px;
+  padding: 4px 28px 4px var(--spacing-m);
+  border-left: 3px solid var(--primary);
+  border-radius: 0 var(--corner-radius-small) var(--corner-radius-small) 0;
+  background: var(--primary-hover-light);
+  max-width: 520px;
+  cursor: pointer;
+}
+.tg-quote:hover {
+  background: var(--primary-hover);
+}
+.tg-quote-from {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--primary);
+  font-weight: var(--weight-semibold);
+  font-size: 0.92em;
+}
+.tg-quote-body {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: pre-wrap;
+  color: var(--surface-variant-text);
+}
+.tg-quote-mark {
+  position: absolute;
+  top: 4px;
+  right: 6px;
+  opacity: 0.7;
+  color: var(--primary);
+}
+
+/* Where a forwarded Telegram message came from. */
+.tg-forward {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  margin: 2px 0 2px;
+  padding-left: var(--spacing-m);
+  border-left: 3px solid var(--primary);
+}
+.tg-forward-source {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 0;
+  color: var(--primary);
+  font-weight: var(--weight-semibold);
+  text-decoration: none;
+}
+
+/* Discord's own conversation in the list: the mark beside its name and what it is underneath. */
+.buffer-official-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 6px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: #5865f2;
+  color: #fff;
+  font-size: 10px;
+  font-weight: var(--weight-bold);
+  letter-spacing: 0.04em;
+  vertical-align: middle;
+}
+
+/* A Telegram bot's Menu button, ahead of the message box. */
+.composer-menu-button {
+  flex: none;
+  margin-right: var(--spacing-xs);
+  padding: 4px 14px;
+  border: 0;
+  border-radius: 16px;
+  background: var(--primary-container);
+  color: #fff;
+  font-weight: var(--weight-semibold);
+  cursor: pointer;
+}
+.composer-menu-button:hover {
+  filter: brightness(1.15);
+}
+
 /* --- media embeds ------------------------------------------------------ */
 
 .media-row {
@@ -5587,6 +5860,195 @@ video.lightbox-media {
   opacity: 0;
 }
 
+/* The player: the controls are drawn over the picture and rest out of sight while it plays. */
+.vp {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: var(--corner-radius-small);
+  background: #000;
+}
+.vp.full,
+.vp:fullscreen {
+  /* Full screen is the whole screen, not the shape the video had in the log (which its inline aspect ratio and the
+     embed's size limits would otherwise keep). */
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: none !important;
+  max-height: none !important;
+  aspect-ratio: auto !important;
+  border-radius: 0;
+}
+.vp.full .vp-video,
+.vp:fullscreen .vp-video {
+  width: 100% !important;
+  height: 100% !important;
+  max-width: none !important;
+  max-height: none !important;
+  aspect-ratio: auto !important;
+  object-fit: contain;
+}
+.vp-video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: #000;
+  cursor: pointer;
+}
+.vp-top {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: var(--corner-radius-small);
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.vp-bar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 18px 10px 6px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  opacity: 1;
+  transition: opacity 0.12s;
+}
+/* Out of the way while it plays, back when the pointer is on it or it stops. */
+.vp.playing .vp-bar {
+  opacity: 0;
+}
+.vp:hover .vp-top,
+.vp:hover .vp-bar,
+.vp:focus-within .vp-top,
+.vp:focus-within .vp-bar,
+.vp-bar:has(.vp-speeds) {
+  opacity: 1;
+}
+.vp-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 2px;
+}
+.vp-fill {
+  flex: 1;
+}
+.vp-button {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 4px;
+  border: 0;
+  border-radius: var(--corner-radius-small);
+  background: none;
+  color: #fff;
+  cursor: pointer;
+}
+.vp-button:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+.vp-button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.vp-time {
+  flex: none;
+  white-space: nowrap;
+  padding: 0 8px;
+  border: 0;
+  background: none;
+  color: #fff;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+.vp-rate {
+  margin-left: 2px;
+  font-size: 11px;
+}
+/* The volume: the icon, and the slider that opens out beside it when the pointer is on either. */
+.vp-volume {
+  display: flex;
+  align-items: center;
+}
+.vp-level {
+  width: 0;
+  opacity: 0;
+  margin: 0;
+  transition: width 0.15s, opacity 0.15s, margin 0.15s;
+}
+.vp-volume:hover .vp-level,
+.vp-volume:focus-within .vp-level {
+  width: 70px;
+  margin: 0 6px 0 2px;
+  opacity: 1;
+}
+.vp-seek,
+.vp-level {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  border-radius: 2px;
+  background: linear-gradient(to right, #fff var(--vp-progress, 0%), rgba(255, 255, 255, 0.35) var(--vp-progress, 0%));
+  cursor: pointer;
+}
+.vp-seek {
+  display: block;
+  width: 100%;
+  margin: 0;
+}
+.vp-seek::-webkit-slider-thumb,
+.vp-level::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+}
+.vp-speed {
+  position: relative;
+}
+.vp-speeds {
+  position: absolute;
+  right: 0;
+  bottom: 34px;
+  display: flex;
+  flex-direction: column;
+  min-width: 96px;
+  padding: 4px;
+  border-radius: var(--corner-radius-small);
+  background: rgba(20, 20, 24, 0.96);
+  box-shadow: var(--shadow-2);
+}
+.vp-speed-option {
+  padding: 5px 10px;
+  border: 0;
+  border-radius: var(--corner-radius-small);
+  background: none;
+  color: #fff;
+  text-align: left;
+  cursor: pointer;
+}
+.vp-speed-option:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
+.vp-speed-option.on {
+  color: var(--primary);
+  font-weight: var(--weight-semibold);
+}
+
 .media-embed-wrap.video:hover .video-expand {
   opacity: 1;
 }
@@ -5802,6 +6264,11 @@ video.lightbox-media {
   overflow: hidden;
   white-space: normal;
 }
+/* A held login is explained in full: the time it will connect is at the end. */
+.account-detail.held {
+  -webkit-line-clamp: unset;
+  display: block;
+}
 
 /* --- presence on avatars ---------------------------------------------- */
 
@@ -6119,6 +6586,19 @@ video.lightbox-media {
   letter-spacing: 0.04em;
 }
 
+/* Discord's own pill for a bot or application, in its blurple, whoever's name it sits beside. */
+.sender-badge.app,
+.sender-badge.verified-app,
+.sender-badge.official {
+  margin-left: 6px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: #5865f2;
+  color: #fff;
+  font-size: 10px;
+  line-height: 1.3;
+}
+
 /* The one badge that is a warning rather than a title: this message came
    from a device nobody has vouched for. Coloured like an error and left
    uncoloured nowhere else, because a doubt about who sent something is the
@@ -7056,67 +7536,6 @@ video.lightbox-media {
   text-align: left;
 }
 
-/* Capped and scrolling: a channel may offer more rewards than the window is
-   tall, and a list that runs past the top edge is a list with no top. */
-.kick-rewards {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  max-height: min(60vh, 420px);
-  border: 1px solid var(--outline-medium);
-  border-radius: var(--corner-radius) var(--corner-radius) 0 0;
-  background: var(--surface-container-high);
-  box-shadow: var(--shadow-up);
-  overflow: hidden;
-}
-
-.kick-rewards-head {
-  padding: 8px 10px 4px;
-  flex: none;
-}
-
-.kick-rewards-list {
-  overflow-y: auto;
-  padding-bottom: 4px;
-}
-
-.kick-rewards-empty {
-  padding: 6px 10px 10px;
-}
-
-.kick-reward {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 10px;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.kick-reward:hover:not(:disabled) {
-  background: var(--surface-container-highest);
-}
-
-/* Shown rather than hidden, because the list is also how somebody learns what
-   a channel does - but plainly not pressable. */
-.kick-reward:disabled {
-  cursor: default;
-  opacity: 0.45;
-}
-
-.kick-reward-cost {
-  flex: none;
-  font-variant-numeric: tabular-nums;
-  color: var(--primary);
-}
 
 /* --- Exporting a conversation ----------------------------------------- */
 
@@ -8544,14 +8963,30 @@ video.lightbox-media {
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: -3px;
   z-index: 3;
-  height: 6px;
+  height: 10px;
   cursor: ns-resize;
+  touch-action: none;
 }
 
-.stage-resize:hover {
-  background: var(--overlay-control);
+/* A short bar in the middle of the edge, so it can be seen to be a handle. */
+.stage-resize::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 3px;
+  width: 36px;
+  height: 3px;
+  margin-left: -18px;
+  border-radius: 2px;
+  background: var(--outline-strong);
+  opacity: 0.6;
+}
+
+.stage-resize:hover::after {
+  opacity: 1;
+  background: var(--primary);
 }
 
 /* The line left above the conversation while the call is in its own window. */
@@ -8807,6 +9242,12 @@ video.lightbox-media {
   object-fit: contain;
 }
 
+/* A channel's own picture, as the server rail draws one. */
+.emoji-rail-item img.emoji-rail-avatar {
+  border-radius: 50%;
+  object-fit: cover;
+}
+
 .emoji-footer {
   display: flex;
   align-items: center;
@@ -8919,19 +9360,49 @@ video.lightbox-media {
   line-height: 1;
 }
 
-/* The corner panel's resize grip, in its inside (top-left) corner. */
+/* The corner panel is resized from any edge or corner. The inside (top-left) corner keeps its visible grip. */
 .call-stage.pip .call-stage-resize {
   position: absolute;
-  top: -4px;
-  left: -4px;
   z-index: 2;
-  width: 16px;
-  height: 16px;
-  cursor: nwse-resize;
   touch-action: none;
 }
 
-.call-stage.pip .call-stage-resize::after {
+.call-stage.pip .edge-t,
+.call-stage.pip .edge-b {
+  left: 12px;
+  right: 12px;
+  height: 8px;
+  cursor: ns-resize;
+}
+
+.call-stage.pip .edge-t { top: -4px; }
+.call-stage.pip .edge-b { bottom: -4px; }
+
+.call-stage.pip .edge-l,
+.call-stage.pip .edge-r {
+  top: 12px;
+  bottom: 12px;
+  width: 8px;
+  cursor: ew-resize;
+}
+
+.call-stage.pip .edge-l { left: -4px; }
+.call-stage.pip .edge-r { right: -4px; }
+
+.call-stage.pip .edge-tl,
+.call-stage.pip .edge-tr,
+.call-stage.pip .edge-bl,
+.call-stage.pip .edge-br {
+  width: 16px;
+  height: 16px;
+}
+
+.call-stage.pip .edge-tl { top: -4px; left: -4px; cursor: nwse-resize; }
+.call-stage.pip .edge-br { bottom: -4px; right: -4px; cursor: nwse-resize; }
+.call-stage.pip .edge-tr { top: -4px; right: -4px; cursor: nesw-resize; }
+.call-stage.pip .edge-bl { bottom: -4px; left: -4px; cursor: nesw-resize; }
+
+.call-stage.pip .edge-tl::after {
   content: '';
   position: absolute;
   top: 5px;
@@ -10913,3 +11384,262 @@ html[data-reduce-motion] *::after {
   color: inherit;
   cursor: pointer;
 }
+
+/* A message the service took down, kept so that what it said can still be read. */
+.message-row.removed .message-body,
+.message-row.removed .message-body * {
+  color: var(--danger-text);
+  text-decoration: line-through;
+}
+/* The notice that stands where the words were: nothing to strike through. */
+.message-row.removed.replaced .message-body,
+.message-row.removed.replaced .message-body * {
+  color: var(--text-muted);
+  font-style: italic;
+  text-decoration: none;
+}
+/* The way into a thread from a reply, at the end of the line it quotes. */
+.reply-preview .reply-thread-open {
+  flex: none;
+  margin-left: auto;
+  padding: 0 4px;
+  background: none;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+}
+.reply-preview .reply-thread-open:hover {
+  color: var(--surface-variant-text);
+  background: var(--surface-hover);
+}
+
+/* A badge Kick sends as a picture, at the height of the line's small text. */
+.sender-badge-image {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-left: var(--spacing-xxs);
+  object-fit: contain;
+  vertical-align: middle;
+}
+
+/* Over the picture while the stream is playing one of Twitch's ads: said, because a picture that
+   changes to something else for half a minute with nothing to say why looks like a fault. */
+.stream-ad {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  border-radius: var(--radius-pill);
+  background: rgba(0, 0, 0, 0.7);
+  color: var(--on-accent);
+  pointer-events: auto;
+}
+
+.stream-volume {
+  width: 72px;
+  accent-color: var(--primary, currentColor);
+}
+
+/* The number beside a cheermote, in the colour Twitch draws it. */
+.cheer-amount {
+  margin: 0 4px 0 2px;
+  font-weight: var(--weight-bold);
+  color: var(--mention-edge);
+}
+
+/* The code Twitch's "Activate your device" page asks for, shown in case the page's field has to be filled by hand. */
+.twitch-code {
+  padding: 6px 14px;
+  border: 1px solid var(--surface-variant-text);
+  border-radius: var(--radius-xs);
+  font-family: var(--font-mono);
+  font-size: 22px;
+  letter-spacing: 0.24em;
+  user-select: all;
+}
+
+/* The corner mark on a conversation with a person where the service's channels have pictures too (Twitch's
+   whispers): it says "direct message" where there is no presence dot to say it. */
+.avatar-badge {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--primary);
+  color: var(--on-primary, #fff);
+  border: 2px solid var(--ring, var(--surface-container));
+  box-sizing: content-box;
+}
+
+.header-face .avatar-badge,
+.header-nameplate .avatar-badge {
+  border-color: var(--surface);
+}
+
+/* A notification the service wrote (a join, a topic, a notice): the same card the events are, quieter - a
+   neutral bar and less room - so a long run of them does not outweigh the conversation. */
+.kick-event.notification {
+  --kick-accent: var(--outline-strong);
+  justify-content: flex-start;
+  min-width: 0;
+  padding-top: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+  gap: var(--spacing-m);
+}
+
+.kick-event.notification .kick-event-line {
+  color: var(--text-muted, var(--surface-variant-text));
+  font-style: italic;
+}
+
+.kick-event.notification.warning {
+  --kick-accent: var(--danger);
+}
+
+.kick-event.notification.warning .kick-event-line {
+  color: var(--danger);
+  font-style: normal;
+}
+
+/* A moderation card that is not a penalty - a room's mode, someone let back, a shoutout - takes the accent of
+   the window rather than the red of a ban. */
+.kick-event.moderation.soft {
+  --kick-accent: var(--primary);
+}
+
+/* Sneedchat's greentext: a line that starts with ">" in the green 4chan has always used for it. */
+.greentext {
+  color: #789922;
+}
+
+/* The rewards panel: the quick switcher's card, with a row per reward and what it costs at the right. */
+.rewards .switcher-input {
+  font-size: var(--font-size-medium);
+}
+
+.rewards-balance {
+  flex: none;
+  color: var(--surface-text);
+  white-space: nowrap;
+}
+
+.reward-item.armed {
+  background: var(--surface-container);
+  border-radius: var(--corner-radius-small);
+}
+
+.reward-row.locked {
+  opacity: 0.55;
+}
+
+.reward-image {
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.reward-cost {
+  flex: none;
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: var(--surface-container-highest, var(--surface-container));
+  color: var(--surface-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.reward-confirm {
+  display: flex;
+  gap: var(--spacing-s);
+  align-items: center;
+  padding: var(--spacing-xs) var(--spacing-s) var(--spacing-s) calc(22px + var(--spacing-s) * 2);
+}
+
+.reward-confirm .text-field {
+  flex: 1;
+  min-width: 0;
+}
+
+/* The two groups of the rewards panel, each under its own small heading. */
+.reward-group {
+  padding: var(--spacing-s) var(--spacing-s) 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+
+
+/* The emotes a reward offers, as pictures to press: a scrolling grid under a search, inside the armed reward. */
+.reward-confirm {
+  flex-wrap: wrap;
+}
+
+.reward-chooser {
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.reward-chooser-head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+}
+
+.reward-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
+  gap: 4px;
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 2px;
+}
+
+.reward-emote {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  min-height: 44px;
+  padding: 4px;
+  border-radius: var(--corner-radius-small);
+  background: transparent;
+  color: var(--surface-text);
+}
+
+.reward-emote:hover {
+  background: var(--primary-hover);
+}
+
+.reward-emote.selected {
+  background: var(--primary-hover);
+  box-shadow: inset 0 0 0 2px var(--primary);
+}
+
+.reward-emote img {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+
+.reward-emote-caption {
+  font-size: var(--font-size-xxs);
+  line-height: 1.1;
+  text-align: center;
+}
+
+.reward-picked {
+  padding: 0 2px;
+}

src/renderer/src/assets/telegram-mark.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <!-- Telegram's paper plane as a plain silhouette (Simple Icons, CC0). -->
+  <path fill="#fff" d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
+</svg>

src/renderer/src/assets/twitch-mark.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <!-- Twitch's mark as a plain silhouette: the speech bubble with its two bars. -->
+  <path fill="#fff" d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0 1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143-3.428 3.428h-3.43l-3 3v-3H6.857V1.714h13.714z"/>
+</svg>

src/renderer/src/components/AccountsPanel.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import { Icon, IconButton, ServiceMark } from './Icon'
 import { MatrixAccountTools } from './MatrixAccountTools'
 import { SteamAccountTools } from './SteamAccountTools'
+import { TwitchSignIn } from './TwitchSignIn'
 import { IgnoreList } from './IgnoreList'
 import { TunnelAllSwitch } from './settings/Tunnel'
 import { useChat, useConnectionDetail, useMapPref, usePref, useStore } from '../state/hooks'
@@ -24,7 +25,7 @@ import type { Account } from '../../../shared/wire'
  * that gains a backend appears here as soon as it gains a form, and one the
  * daemon stops offering disappears without this file being touched.
  */
-const FORMS = ['irc', 'discord', 'sneedchat', 'matrix', 'kick', 'steam'] as const
+const FORMS = ['irc', 'discord', 'sneedchat', 'matrix', 'kick', 'steam', 'twitch', 'telegram'] as const
 type AddableService = (typeof FORMS)[number]
 
 /** What `listProtocols` answers with. */
@@ -136,6 +137,8 @@ export function AccountsPanel(): JSX.Element {
         {adding === 'matrix' && <MatrixForm />}
         {adding === 'kick' && <KickForm onDone={() => setAdding(null)} />}
         {adding === 'steam' && <SteamForm onDone={() => setAdding(null)} />}
+        {adding === 'twitch' && <TwitchForm onDone={() => setAdding(null)} />}
+        {adding === 'telegram' && <TelegramForm onDone={() => setAdding(null)} />}
         {adding && (
           <button type="button" className="button subtle small" onClick={() => setAdding(null)}>
             Cancel
@@ -329,6 +332,7 @@ function AccountRow({ account }: { account: Account }): JSX.Element {
   // What the daemon last said about why. Only meaningful while something is
   // wrong, which is exactly when the state line alone explains nothing.
   const detail = useConnectionDetail(account.id)
+  const held = account.service === 'discord' && !!detail?.startsWith('Holding the Discord connection')
 
   const call = (method: string, params: Record<string, unknown>): void => {
     void window.moho
@@ -350,7 +354,20 @@ function AccountRow({ account }: { account: Account }): JSX.Element {
           <div className="small muted">
             {serviceLabel(account.service)} · {account.state}
           </div>
-          {detail && <div className="small muted ellipsis account-detail" title={detail}>{detail}</div>}
+          {detail && <div className={classes('small muted account-detail', held && 'held')} title={detail}>{detail}</div>}
+          {/* Held for having logged in too often (see nobilis's identify_budget): said in full, with the way past it. */}
+          {held && (
+            <div>
+              <button
+                type="button"
+                className="button subtle"
+                title="Many fresh logins can get an account flagged as spam by Discord. This one is counted."
+                onClick={() => call('connectDiscordAnyway', { accountId: account.id })}
+              >
+                Connect anyway
+              </button>
+            </div>
+          )}
         </div>
         <button
           type="button"
@@ -459,6 +476,7 @@ function AccountRow({ account }: { account: Account }): JSX.Element {
           {account.service === 'matrix' && <MatrixAccountTools account={account} />}
 
           {account.service === 'steam' && <SteamAccountTools account={account} />}
+          {account.service === 'twitch' && <TwitchAccountTools account={account} />}
 
           {account.service === 'sneedchat' && (
             <>
@@ -977,6 +995,16 @@ function DiscordForm({ accountId }: { accountId?: string }): JSX.Element {
 
   return (
     <div className="add-form">
+      {/* Said before anything is entered, the way Dissent's README says it: this is the risk, and what moho does and does
+          not do about it. */}
+      {!accountId && (
+        <p className="small muted discord-risk" role="note">
+          Discord does not allow third-party clients, and an account using one can be flagged and logged out, or banned.
+          moho is careful - it says what it is, makes few requests, and will not send the first message to a server or a
+          person - but nothing it does can make that risk nothing. Use an account you can afford to lose, and see the
+          first message in each new place from Discord&apos;s own app.
+        </p>
+      )}
       {!accountId && <TorSwitch service="discord" on={useTor} onChange={setUseTor} />}
       <div className="setting-segmented">
         <button
@@ -1412,9 +1440,10 @@ function SteamForm({ onDone }: { onDone: () => void }): JSX.Element {
     <div className="add-form">
       <p className="small muted">
         Sign in with your Steam account name — the one you type at the Steam login, not the
-        display name your friends see. moho signs in as the Steam mobile app's chat, so it runs
-        beside the Steam launcher without signing it out. Your password goes to Steam and is not
-        kept; moho keeps only the token Steam hands back.
+        display name your friends see. moho signs in as a desktop client of its own, the way other
+        third-party Steam clients do, and shows up in your Steam devices as "moho on" your
+        computer's name. Your password goes to Steam and is not kept; moho keeps only the token
+        Steam hands back.
       </p>
       <TorSwitch service="steam" on={useTor} onChange={setUseTor} />
       <div className="field-row">
@@ -1472,6 +1501,333 @@ function SteamForm({ onDone }: { onDone: () => void }): JSX.Element {
   )
 }
 
+/**
+ * Adding a Telegram account: an api_id and api_hash, a phone number, then the code Telegram sends and, if the account
+ * has one, its cloud password.
+ *
+ * Telegram gives one api_id and api_hash to a phone number's owner, and every client sends them. moho has none of its
+ * own, so the ones typed here are kept with the account, as private as the session is. Nothing typed here is sent
+ * anywhere but Telegram.
+ */
+function TelegramForm({ onDone }: { onDone: () => void }): JSX.Element {
+  const store = useStore()
+  const [apiId, setApiId] = useState('')
+  const [apiHash, setApiHash] = useState('')
+  const [phone, setPhone] = useState('')
+  const [useTor, setUseTor] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [loginId, setLoginId] = useState('')
+  const [detail, setDetail] = useState('')
+  const [needs, setNeeds] = useState<{ step: 'code' | 'password'; hint?: string; error?: string } | null>(null)
+  const [typed, setTyped] = useState('')
+
+  // Held in a ref as well: the first event can be handled before the render that follows the answer that started the
+  // sign-in. Nothing else is signing in from this form, so an event with no id known yet is this one's.
+  const current = useRef('')
+  const setId = (id: string): void => {
+    current.current = id
+    setLoginId(id)
+  }
+
+  useEffect(() => {
+    const off = window.moho.onEvent((e) => {
+      const d = e.data as { loginId?: string; text?: string; step?: 'code' | 'password'; hint?: string; error?: string; success?: boolean }
+      if (!e.event.startsWith('telegramLogin')) return
+      if (current.current && d.loginId !== current.current) return
+      if (e.event === 'telegramLoginStatus') {
+        setDetail(d.text || '')
+      } else if (e.event === 'telegramLoginNeeds') {
+        setNeeds({ step: d.step ?? 'code', hint: d.hint ?? undefined, error: d.error ?? undefined })
+        setTyped('')
+        setDetail('')
+      } else if (e.event === 'telegramLoginResult') {
+        setNeeds(null)
+        setId('')
+        setBusy(false)
+        setDetail('')
+        if (d.success) {
+          setApiHash('')
+          void store.refreshAccounts()
+          onDone()
+        } else {
+          store.toast('error', d.error || 'Telegram sign-in failed')
+        }
+      }
+    })
+    return off
+  }, [onDone, store])
+
+  // Closing the form on a sign-in that is still waiting tells the daemon nobody is.
+  useEffect(
+    () => () => {
+      if (current.current) void window.moho.rpc('cancelTelegramLogin', { loginId: current.current }).catch(() => {})
+    },
+    []
+  )
+
+  const begin = (): void => {
+    setBusy(true)
+    setDetail('')
+    setNeeds(null)
+    current.current = ''
+    void window.moho
+      .rpc<{ loginId: string }>('addTelegramAccount', { apiId: apiId.trim(), apiHash: apiHash.trim(), phone, useTor })
+      .then((r) => setId(r.loginId))
+      .catch((e: Error) => {
+        setBusy(false)
+        store.toast('error', e.message)
+      })
+  }
+
+  const send = (): void => {
+    const value = needs?.step === 'password' ? typed : typed.trim()
+    if (!value || !loginId || !needs) return
+    void window.moho
+      .rpc(needs.step === 'password' ? 'submitTelegramPassword' : 'submitTelegramCode', { loginId, value })
+      .then(() => setDetail('checking'))
+      .catch((e: Error) => store.toast('error', e.message))
+  }
+
+  const cancel = (): void => {
+    if (current.current) void window.moho.rpc('cancelTelegramLogin', { loginId: current.current }).catch(() => {})
+    setId('')
+    setNeeds(null)
+    setDetail('')
+    setBusy(false)
+  }
+
+  if (needs) {
+    const password = needs.step === 'password'
+    return (
+      <div className="add-form">
+        <p>
+          {password
+            ? 'This account has a cloud password.'
+            : 'Telegram sent a code to your other Telegram app, or by SMS.'}
+        </p>
+        <label className="field">
+          <span className="small muted">{password ? `Password${needs.hint ? ` (hint: ${needs.hint})` : ''}` : 'Code'}</span>
+          <input
+            className="text-field"
+            type={password ? 'password' : 'text'}
+            autoFocus
+            autoComplete="off"
+            spellCheck={false}
+            inputMode={password ? undefined : 'numeric'}
+            value={typed}
+            onChange={(e) => setTyped(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') send()
+            }}
+          />
+        </label>
+        {needs.error && (
+          <div className="warning-note">
+            <Icon name="warning" size={16} />
+            <span>{needs.error}</span>
+          </div>
+        )}
+        {detail && <p className="small muted">{detail}…</p>}
+        <div className="field-row">
+          <button type="button" className="button primary" disabled={!typed.trim()} onClick={send}>
+            {password ? 'Submit password' : 'Submit code'}
+          </button>
+          <button type="button" className="button" onClick={cancel}>
+            Cancel sign-in
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  const ready = apiId.trim() !== '' && apiHash.trim() !== '' && phone.trim() !== ''
+  return (
+    <div className="add-form">
+      <p className="small muted">
+        Telegram gives one <strong>api_id</strong> and <strong>api_hash</strong> to the owner of a phone number, at{' '}
+        <a href="https://my.telegram.org/apps" target="_blank" rel="noreferrer">
+          my.telegram.org/apps
+        </a>
+        , and every Telegram app a person uses can share them. moho has none of its own: the ones you type here are kept
+        with the account, as private as the session. Telegram then sends a code, and asks for the account's cloud
+        password if it has one.
+      </p>
+      <TorSwitch service="telegram" on={useTor} onChange={setUseTor} />
+      <div className="field-row">
+        <label className="field">
+          <span className="small muted">api_id</span>
+          <input
+            className="text-field"
+            autoComplete="off"
+            spellCheck={false}
+            inputMode="numeric"
+            value={apiId}
+            disabled={busy}
+            onChange={(e) => setApiId(e.target.value)}
+          />
+        </label>
+        <label className="field">
+          <span className="small muted">api_hash</span>
+          <input
+            className="text-field"
+            type="password"
+            autoComplete="off"
+            spellCheck={false}
+            value={apiHash}
+            disabled={busy}
+            onChange={(e) => setApiHash(e.target.value)}
+          />
+        </label>
+      </div>
+      <label className="field">
+        <span className="small muted">Phone number, with its country code</span>
+        <input
+          className="text-field"
+          autoComplete="off"
+          placeholder="+1 555 123 4567"
+          value={phone}
+          disabled={busy}
+          onChange={(e) => setPhone(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && ready && !busy) begin()
+          }}
+        />
+      </label>
+      <div className="field-row">
+        <button type="button" className="button primary" disabled={busy || !ready} onClick={begin}>
+          {busy ? 'Signing in…' : 'Send the code'}
+        </button>
+        {busy && (
+          <button type="button" className="button" onClick={cancel}>
+            Cancel
+          </button>
+        )}
+      </div>
+      {busy && detail && <p className="small muted">{detail}…</p>}
+    </div>
+  )
+}
+
+/**
+ * Adding a Twitch account: sign in, or only read.
+ *
+ * Twitch's chat is public, so an account that never signs in still reads every
+ * channel it is pointed at - the same choice Kick's form offers. Signing in is
+ * what buys sending, the channels you follow and the emotes you can use.
+ */
+function TwitchForm({ onDone }: { onDone: () => void }): JSX.Element {
+  const store = useStore()
+  const [useTor, setUseTor] = useState(false)
+  const [busy, setBusy] = useState(false)
+
+  const readOnly = (): void => {
+    setBusy(true)
+    void window.moho
+      .rpc('addTwitchAccount', { useTor })
+      .then(() => {
+        void store.refreshAccounts()
+        onDone()
+      })
+      .catch((e: Error) => store.toast('error', e.message))
+      .finally(() => setBusy(false))
+  }
+
+  return (
+    <div className="add-form">
+      <TorSwitch service="twitch" on={useTor} onChange={setUseTor} />
+      <TwitchSignIn useTor={useTor} onDone={onDone}>
+        <button
+          type="button"
+          className="button subtle"
+          disabled={busy}
+          title="Read channels without an account. Twitch's chat is public; sending needs a sign-in."
+          onClick={readOnly}
+        >
+          Read without signing in
+        </button>
+      </TwitchSignIn>
+    </div>
+  )
+}
+
+/**
+ * What a Twitch account can be asked to do from its own card.
+ *
+ * Signing in (for one that only reads, or whose sign-in Twitch has stopped accepting; the new sign-in is a
+ * Twitch account of its own under the login that approved it, so an anonymous reader is left where it
+ * was), opening the channels the account follows.
+ *
+ * Video needs the website's own session, because Twitch's player takes only a token its own website made: the one
+ * moho gets for chat and the official API is refused there. It is not a second sign-in - one window signs in on
+ * twitch.tv and approves the code, and the session it saw on the way is kept with the account (see TwitchSignIn).
+ * It is the person's own website session, and says so - what it can do is what being signed in there can do - and
+ * it is what makes their Turbo or their subscriptions count, so ads they are not meant to see are not shown.
+ */
+function TwitchAccountTools({ account }: { account: Account }): JSX.Element {
+  const store = useStore()
+  const refused = account.state === 'auth_failed'
+  const [busy, setBusy] = useState('')
+
+  const run = (what: string, work: () => Promise<void>): void => {
+    setBusy(what)
+    void work()
+      .catch((e: Error) => store.toast('error', e.message))
+      .finally(() => setBusy(''))
+  }
+
+  const follows = (liveOnly: boolean): void =>
+    run('follows', async () => {
+      const r = await window.moho.rpc<{ count: number }>('syncTwitchFollows', { accountId: account.id, liveOnly })
+      store.toast('info', r.count === 0 ? 'You follow no channels that are on air right now' : `Opening ${r.count} channel${r.count === 1 ? '' : 's'}`)
+    })
+
+  return (
+    <div className="account-tools">
+      {(!account.hasPassword || refused) && (
+        <>
+          <p className="small muted">
+            {refused
+              ? 'Twitch no longer accepts this sign-in. Signing in again keeps its channels and settings.'
+              : 'This account only reads. Sign in to send messages and to see the channels you follow.'}
+          </p>
+          <TwitchSignIn useTor={account.useTor} onDone={() => undefined} label={refused ? 'Sign in again' : 'Sign in'} />
+        </>
+      )}
+      {account.hasPassword && !refused && (
+        <div className="field-row">
+          <button type="button" className="button subtle" disabled={busy !== ''} onClick={() => follows(true)} title="Open the channels you follow that are streaming now">
+            Open followed channels that are live
+          </button>
+          <button type="button" className="button subtle" disabled={busy !== ''} onClick={() => follows(false)} title="Open everyone you follow, up to 200">
+            Open everyone I follow
+          </button>
+        </div>
+      )}
+      {account.hasPassword && !refused && (!account.moderation || !account.webSession) && (
+        <>
+          <p className="small muted">
+            This sign-in was made before {account.moderation ? 'video' : account.webSession ? 'moderation, whispers, shoutouts and blocking' : 'video, moderation, whispers, shoutouts and blocking'}{' '}
+            {account.moderation || account.webSession ? 'was' : 'were'} part of signing in. Signing in again adds {account.moderation || account.webSession ? 'it' : 'them'}, in the same one
+            window; nothing else changes.
+          </p>
+          <TwitchSignIn useTor={account.useTor} onDone={() => undefined} label="Sign in again" />
+        </>
+      )}
+      <p className="small muted">
+        {account.webSession
+          ? 'Video plays as you: signed in on twitch.tv, so your Turbo or your subscriptions count and their ads are not shown.'
+          : 'Video plays without a twitch.tv sign-in, so Twitch puts ads in streams. Signing in again signs in on twitch.tv too, which lets your Turbo or your subscriptions count.'}
+      </p>
+      {account.webSession && (
+        <p className="small muted">
+          It is your twitch.tv login session, so what it can do is what being signed in there can do. Removing this account
+          forgets it here; to end it on Twitch, use Sign out everywhere in twitch.tv's security settings.
+        </p>
+      )}
+    </div>
+  )
+}
+
 /**
  * Whether an account's connections go through Tor or a SOCKS5 proxy.
  *
@@ -1590,6 +1946,9 @@ function TorWarning({ service }: { service: Account['service'] }): JSX.Element |
   } else if (service === 'kick') {
     text =
       "Kick blocks Tor's exit points, so a connection through moho's own Tor will most likely be refused. A SOCKS5 proxy you host yourself may work."
+  } else if (service === 'telegram') {
+    text =
+      "Telegram often challenges or limits a sign-in that comes from Tor or a VPN, and signing in from a new address can put the account's other sessions on alert. Sign in once from your usual connection, then route it if you need to."
   } else if (service === 'irc' || service === 'matrix') {
     text = `Each ${service === 'irc' ? 'network' : 'homeserver'} has its own policy on Tor, and many block its exit points. A SOCKS5 proxy you host yourself may be accepted where Tor is not.`
   } else {

src/renderer/src/components/Avatar.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { useMediaUrl } from '../lib/route'
 import { nickColor } from '../lib/util'
 import { presenceClass, presenceLabel } from '../lib/presence'
+import { Icon } from './Icon'
 
 /**
  * Somebody's face, with a fallback for the many people who have no picture.
@@ -21,12 +22,19 @@ export function Avatar({
   url,
   size = 24,
   status,
+  badge,
   accountId
 }: {
   name: string
   url?: string
   size?: number
   status?: string
+  /**
+   * A glyph in the corner that says what kind of thing this is, for a face that would otherwise look like
+   * a channel's: a conversation with a person on a service whose channels have pictures too, and which
+   * has no presence dot to tell them apart by.
+   */
+  badge?: string
   /** Whose picture: a strictly routed account's is fetched through its route
    *  (#257). Taken from the surrounding conversation when not given. */
   accountId?: string
@@ -60,6 +68,11 @@ export function Avatar({
           {initial(name)}
         </span>
       )}
+      {badge && !status && (
+        <span className="avatar-badge" title="Direct message" aria-label="Direct message">
+          <Icon name={badge} size={Math.max(8, Math.round(size * 0.4))} />
+        </span>
+      )}
       {status && (
         <span className={`presence-dot ${presenceClass(status)}`} title={presenceLabel(status)} />
       )}

src/renderer/src/components/BufferList.tsx

@@ -303,7 +303,7 @@ export function BufferList(): JSX.Element {
   /** The call that sets a mute on the account itself, for a service that keeps one. */
   const accountMute = (accountId: string): string | null => {
     const service = accounts.find((a) => a.id === accountId)?.service
-    return service === 'matrix' ? 'setMatrixRoomMuted' : service === 'discord' ? 'setDiscordChannelMuted' : service === 'steam' ? 'steamSetFriendMuted' : null
+    return service === 'matrix' ? 'setMatrixRoomMuted' : service === 'discord' ? 'setDiscordChannelMuted' : service === 'steam' ? 'steamSetFriendMuted' : service === 'telegram' ? 'setTelegramChatMuted' : null
   }
   const isEffectivelyMuted = (buffer: BufferEntry): boolean =>
     isMutedBuffer(buffer, muted, mutedGroups)
@@ -1045,6 +1045,8 @@ function BufferRow({
   // redraws when it changes and not on every presence update in the window.
   const activity = useChat((s) => dmActivity(buffer, s.presenceByBuffer))
   const comfy = useComfy()
+  // The one conversation Discord itself writes to, which the daemon marks read-only for that reason.
+  const isOfficial = account?.service === 'discord' && !!buffer.readOnly?.includes('official Discord')
   const doing = activity ? activityLabel(activity) : undefined
 
   // Under an account header the row's own kind is what's worth showing (a
@@ -1059,7 +1061,7 @@ function BufferRow({
     // A conversation with a person is headed by that person, whatever
     // protocol they are on: their picture where there is one, their initial
     // where there is not.
-    <Avatar name={buffer.name} url={buffer.avatarUrl} size={22} status={status} accountId={buffer.accountId} />
+    <Avatar name={buffer.name} url={buffer.avatarUrl} size={22} status={account?.service === 'twitch' ? undefined : status} badge="mail" accountId={buffer.accountId} />
   ) : buffer.avatarUrl ? (
     <img className="buffer-avatar" src={media(buffer.avatarUrl)} alt="" />
   ) : buffer.serviceRoom ? (
@@ -1156,8 +1158,23 @@ function BufferRow({
         onDragEnd={onDragEnd}
         title={link ? `${buffer.name} — ${link.detail}` : draggable ? `${buffer.name} — drag onto a heading to file it` : doing ? `${buffer.name} — ${doing}` : buffer.name}
       >
+        {/* What kind of conversation it is, ahead of its picture: a horn for a broadcast channel, a robot for a bot. */}
+        {buffer.nameIcon && <Icon name={buffer.nameIcon} size={15} className="buffer-kind-icon" />}
         {leading}
-        {comfy && activity ? (
+        {isOfficial ? (
+          // Discord's own conversation: marked so a notice that arrives here can be trusted as Discord's, and a message
+          // that merely claims to be Discord's cannot borrow it - the mark belongs to this conversation alone.
+          <span className="buffer-text">
+            <span className="ellipsis buffer-name">
+              {rowName}
+              <span className="buffer-official-mark">
+                <Icon name="check" size={11} />
+                OFFICIAL
+              </span>
+            </span>
+            <span className="small ellipsis">Official Discord Message</span>
+          </span>
+        ) : comfy && activity ? (
           <span className="buffer-text">
             <span className="ellipsis buffer-name">{rowName}</span>
             <ActivityLine activity={activity} />

src/renderer/src/components/ColumnResizer.tsx

@@ -0,0 +1,92 @@
+import { useState, type KeyboardEvent, type PointerEvent } from 'react'
+import { usePref } from '../state/hooks'
+
+/**
+ * A column's width as somebody left it: followed while a drag is under way and written down once, when it ends,
+ * because a preference goes to disk over IPC and a drag is a hundred moves.
+ */
+export function useColumnWidth(key: string, fallback: number): [number, (width: number | null, commit: boolean) => void] {
+  const [saved, setSaved] = usePref<number>(key, fallback)
+  const [live, setLive] = useState<number | null>(null)
+  const apply = (width: number | null, commit: boolean): void => {
+    if (!commit) return setLive(width)
+    setLive(null)
+    setSaved(width ?? fallback)
+  }
+  return [live ?? saved, apply]
+}
+
+/**
+ * The line between two columns, which can be dragged to change the width of one of them.
+ *
+ * `grows` says which way a drag makes the column wider: `right` for a column on the left of the line (the channel
+ * list), `left` for one on its right (the member list). Double-click puts it back to its usual width, and the
+ * arrow keys move it for somebody who is not using a pointer.
+ */
+export function ColumnResizer({
+  width,
+  onWidth,
+  min,
+  max,
+  grows,
+  label
+}: {
+  width: number
+  onWidth: (width: number | null, commit: boolean) => void
+  min: number
+  max: number
+  grows: 'left' | 'right'
+  label: string
+}): JSX.Element {
+  const [dragging, setDragging] = useState(false)
+  const [from, setFrom] = useState<{ x: number; w: number } | null>(null)
+  const fit = (w: number): number => Math.round(Math.min(Math.max(w, min), Math.min(max, window.innerWidth * 0.45)))
+  const at = (x: number, start: { x: number; w: number }): number => fit(start.w + (grows === 'right' ? x - start.x : start.x - x))
+
+  const down = (e: PointerEvent<HTMLDivElement>): void => {
+    setFrom({ x: e.clientX, w: width })
+    setDragging(true)
+    e.currentTarget.setPointerCapture(e.pointerId)
+    document.body.classList.add('resizing-column')
+    e.preventDefault()
+  }
+  const move = (e: PointerEvent<HTMLDivElement>): void => {
+    if (from) onWidth(at(e.clientX, from), false)
+  }
+  const up = (e: PointerEvent<HTMLDivElement>): void => {
+    if (!from) return
+    const done = at(e.clientX, from)
+    setFrom(null)
+    setDragging(false)
+    document.body.classList.remove('resizing-column')
+    e.currentTarget.releasePointerCapture(e.pointerId)
+    onWidth(done, true)
+  }
+  const key = (e: KeyboardEvent<HTMLDivElement>): void => {
+    const step = e.shiftKey ? 40 : 10
+    const toward = (e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0) * (grows === 'right' ? 1 : -1)
+    if (!toward) return
+    e.preventDefault()
+    onWidth(fit(width + toward * step), true)
+  }
+
+  return (
+    <div
+      className={`divider-v resizer${dragging ? ' dragging' : ''}`}
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={label}
+      aria-valuenow={width}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      tabIndex={0}
+      title="Drag to resize · double-click to reset"
+      onPointerDown={down}
+      onPointerMove={move}
+      onPointerUp={up}
+      onPointerCancel={up}
+      onDoubleClick={() => onWidth(null, true)}
+      onKeyDown={key}
+    />
+  )
+}

src/renderer/src/components/Composer.tsx

@@ -1,6 +1,6 @@
 import { FormatBar } from './FormatBar'
 import { formatsFor, serialize, type FormatKind } from '../lib/composeFormat'
-import { applyFormat } from '../lib/composeFormatDom'
+import { applyFormat, restoreSelectionAfterHistory } from '../lib/composeFormatDom'
 import { useMediaUrl } from '../lib/route'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Icon, IconButton, MaskIcon } from './Icon'
@@ -10,6 +10,7 @@ import { PollComposer } from './PollComposer'
 import { Avatar } from './Avatar'
 import { COMMON_EMOJI, emojiToken, EmojiPicker, type StickerEntry } from './EmojiPicker'
 import { GifPicker } from './GifPicker'
+import { ReplyBody } from './ReplyBody'
 import { PlaceField } from './PlaceField'
 import { VoiceRecorder } from './VoiceRecorder'
 import { useActiveBuffer, useChat, useStore } from '../state/hooks'
@@ -51,6 +52,9 @@ interface StagedAttachment {
  */
 const TYPING_REPEAT_MS = 4000
 
+/** The services whose conversations can take a GIF: the picker sends a link, and these show it as the picture. */
+const GIF_SERVICES = new Set(['discord', 'matrix', 'kick'])
+
 /**
  * What the box holds, as the text that will be sent.
  *
@@ -104,7 +108,7 @@ interface TypedCommand {
   description?: string
   /** "Built-in", or the bot that answers it. */
   source?: string
-  kind: 'builtin' | 'application'
+  kind: 'builtin' | 'application' | 'bot'
   /** Discord's own description of the command, handed back to run it. */
   command?: { options?: { name: string; type?: number; required?: boolean }[] }
 }
@@ -136,6 +140,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
   const [stickers, setStickers] = useState<StickerEntry[]>([])
   const [stickerPicker, setStickerPicker] = useState(false)
   const [gifPicker, setGifPicker] = useState(false)
+  const [discordTyping] = usePref<boolean>('discord.sendTyping', false)
   /**
    * What to do with files dropped on the window: they land in the tray, to be
    * looked over and sent with the next message rather than going out on the
@@ -208,6 +213,8 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
    */
   const [commands, setCommands] = useState<TypedCommand[]>([])
   const [commandIndex, setCommandIndex] = useState(0)
+  /** A Telegram bot's Menu, open over the box: the bot's commands, asked for without anything being typed. */
+  const [botMenu, setBotMenu] = useState(false)
   /**
    * The application command whose name has been completed into the box.
    *
@@ -260,7 +267,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
   // here rather than left as the one service where the button is dead.
   // Steam takes a picture or a short video, and says which and how big.
   const supportsAttachments =
-    service === 'discord' || service === 'sneedchat' || service === 'matrix' || service === 'irc' || service === 'steam'
+    service === 'discord' || service === 'sneedchat' || service === 'matrix' || service === 'irc' || service === 'steam' || service === 'telegram'
 
   // Starting a reply puts the cursor in the box: the next thing anybody does
   // is write the answer.
@@ -394,7 +401,9 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
   const typedCommand = /^\/\S*$/.test(text) ? text.slice(1) : null
 
   useEffect(() => {
-    if (typedCommand === null || !buffer) {
+    // The bot's Menu is open: its whole list, whatever is (or is not) in the box.
+    const asking = botMenu ? '' : typedCommand
+    if (asking === null || !buffer) {
       setCommands([])
       return
     }
@@ -402,7 +411,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
       void window.moho
         .rpc<{ commands: TypedCommand[] }>('listCommands', {
           bufferId: buffer.id,
-          query: typedCommand
+          query: asking
         })
         .then((answer) => {
           setCommands(answer.commands || [])
@@ -414,10 +423,21 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
           // complaint about typing a slash.
           setCommands([])
         })
-    }, 200)
+    }, botMenu ? 0 : 200)
     return () => clearTimeout(timer)
-  }, [typedCommand, buffer?.id])
+  }, [typedCommand, buffer?.id, botMenu])
 
+  // The Menu belongs to the conversation it was opened in, and goes when anything else is clicked.
+  useEffect(() => setBotMenu(false), [buffer?.id])
+  useEffect(() => {
+    if (!botMenu) return
+    const away = (e: MouseEvent): void => {
+      const target = e.target as HTMLElement | null
+      if (!target?.closest('.command-picker, .composer-menu-button')) setBotMenu(false)
+    }
+    document.addEventListener('mousedown', away)
+    return () => document.removeEventListener('mousedown', away)
+  }, [botMenu])
 
   if (!buffer) return null
 
@@ -430,6 +450,9 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
    * it on services with no such notion, so there is nothing to check here.
    */
   const noteTyping = (): void => {
+    // Not on Discord unless asked for: its own clients send it, but a third-party client that does is one more thing
+    // Discord can tell it apart by, and Dissent does without it altogether. A setting in Settings > Discord.
+    if (service === 'discord' && !discordTyping) return
     const now = Date.now()
     if (now - typingSentAt.current < TYPING_REPEAT_MS) return
     typingSentAt.current = now
@@ -487,6 +510,9 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
       disabled: !supportsAttachments,
       onClick: pickAndStage
     },
+    ...(service === 'telegram' && !thread
+      ? ([{ label: 'Start a poll', icon: 'ballot', onClick: () => setPolling(true) }] as MenuEntry[])
+      : []),
     ...(service === 'matrix' && !thread
       ? ([
           {
@@ -643,6 +669,15 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
   const takeCommand = (command: TypedCommand): void => {
     const wants = (command.usage ?? '').trim().length > 0
     setCommands([])
+    // A Telegram bot's command is sent the moment it is chosen, as Telegram's own apps do: it is a message to the bot,
+    // and the menu is the bot's own list of what it understands.
+    if (command.kind === 'bot' && buffer) {
+      setBotMenu(false)
+      setText('')
+      if (inputRef.current) inputRef.current.textContent = ''
+      void store.sendMessage(buffer.id, `/${command.name}`)
+      return
+    }
     if (!wants && command.kind === 'application') {
       setPendingCommand(command)
       runCommand(command, `/${command.name}`)
@@ -844,8 +879,11 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
   // Somewhere that can be read and not written in: a channel this account has
   // no permission to send to, or Discord's own notices. A box that every send
   // is refused from is a worse answer than saying so where it would be.
-  if (buffer.readOnly) {
+  // A channel's comments are written to its discussion group, which the channel's own lock says nothing about.
+  if (buffer.readOnly && !(thread && service === 'telegram')) {
     const official = buffer.readOnly.includes('official Discord')
+    // Discord's first-word lock: the daemon opens it by itself once the account has spoken there.
+    const firstWord = buffer.readOnly.includes("Discord's own app")
     return (
       <div className="composer">
         <div className="divider-h" />
@@ -856,6 +894,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
             {official && (
               <span className="small">Discord will never ask you for your password or account token.</span>
             )}
+            {firstWord && <span className="small">moho notices when you have, and opens this up by itself.</span>}
           </div>
         </div>
       </div>
@@ -864,13 +903,13 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
 
   // A Kick account with no sign-in watches; it cannot talk. Offering the
   // box anyway meant typing a message the service was always going to refuse.
-  if (account && account.service === 'kick' && !account.hasPassword) {
+  if (account && (account.service === 'kick' || account.service === 'twitch') && !account.hasPassword) {
     return (
       <div className="composer">
         <div className="divider-h" />
         <div className="composer-watching small muted">
           <Icon name="visibility" size={16} />
-          <span>Watching signed out. Sign in to Kick to talk here.</span>
+          <span>Watching signed out. Sign in to {account.service === 'twitch' ? 'Twitch' : 'Kick'} to talk here.</span>
           <button type="button" className="button" onClick={() => store.setActivePanel('accounts')}>
             Sign in
           </button>
@@ -897,7 +936,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
       {commands.length > 0 && (
         <div className="command-picker" role="listbox" aria-label="Run a command">
           <div className="picker-head small muted">
-            Commands matching /{typedCommand}
+            {botMenu ? 'Commands' : <>Commands matching /{typedCommand}</>}
           </div>
           {commands.map((c, i) => (
             <button
@@ -1008,7 +1047,14 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
           {repliedTo?.avatarUrl && <img className="reply-avatar" src={media(repliedTo.avatarUrl)} alt="" />}
           <span className="ellipsis">
             Replying to <strong>{replyingTo.from}</strong>
-            {replyingTo.body ? <span className="muted">{`: ${replyingTo.body}`}</span> : ''}
+            {replyingTo.body ? (
+              <span className="muted">
+                {': '}
+                <ReplyBody text={replyingTo.body} service={service} />
+              </span>
+            ) : (
+              ''
+            )}
           </span>
           {/* Whether the one answered is told, as Discord's own bar has it.
               Only there: nothing else here can say it. */}
@@ -1048,7 +1094,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
               {/* On the card's corner, and there only while it is pointed at
                   or focused - they would be a dozen buttons otherwise. */}
               <div className="staged-actions">
-                {(service === 'discord' || service === 'steam') && (
+                {(service === 'discord' || service === 'steam' || service === 'telegram') && (
                   <button
                     type="button"
                     className={classes('staged-action', att.spoiler && 'on')}
@@ -1075,6 +1121,19 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
 
       <div className="composer-row">
        <div className="composer-box">
+        {/* The bot's own menu, where Telegram puts it: ahead of the box. Opens the list of what the bot understands. */}
+        {service === 'telegram' && buffer.nameIcon === 'smart_toy' && !thread && (
+          <button
+            type="button"
+            className="composer-menu-button"
+            title="Show this bot's commands"
+            // Opens the list and nothing else: nothing is written into the box, and choosing a command sends it.
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => setBotMenu((open) => !open)}
+          >
+            Menu
+          </button>
+        )}
         {/* Everything that is not typed goes through here, inside the box on
             the left as in Discord. Where there is only the one thing - a
             file - it is that thing, without a menu in between. */}
@@ -1137,6 +1196,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
             aria-multiline="true"
             aria-label={thread ? 'Reply in thread' : `Message ${bufferDisplayName(buffer.name)}`}
             onInput={(e) => {
+              restoreSelectionAfterHistory(e.currentTarget, (e.nativeEvent as InputEvent).inputType)
               setText(composerText(e.currentTarget))
               noteTyping()
               noteMention()
@@ -1168,6 +1228,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
                 if (e.key === 'Escape') {
                   e.preventDefault()
                   setCommands([])
+                  setBotMenu(false)
                   return
                 }
               }
@@ -1232,7 +1293,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
                 !e.altKey &&
                 !e.metaKey &&
                 !text &&
-                (service === 'discord' || service === 'sneedchat' || service === 'matrix')
+                (service === 'discord' || service === 'sneedchat' || service === 'matrix' || service === 'telegram')
               ) {
                 const last = store.lastEditableOwn(buffer.id)
                 if (last) {
@@ -1301,10 +1362,12 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
           <Icon name="mood" size={18} />
         </button>
 
-        {/* GIFs, wherever there is a Discord account to ask for them: the
-            picker borrows that account's way of looking, and what it finds can
-            be sent in any conversation. */}
-        {!thread && service !== 'steam' && accounts.some((a) => a.service === 'discord') && (
+        {/* GIFs, wherever there is a Discord account to ask for them: the picker borrows that account's way of looking.
+            What it finds is sent as a link, so it is offered only on the services that show a link to one as a picture
+            (GIF_SERVICES): not IRC, Steam, Twitch or Sneedchat, which take none. Telegram has GIFs of its own - the account's
+            saved ones and Telegram's GIF search - and gets the picker with those, asking Telegram rather than Discord. A service not on the list is
+            one nobody has checked, and gets no button. */}
+        {!thread && ((GIF_SERVICES.has(service ?? '') && accounts.some((a) => a.service === 'discord')) || service === 'telegram') && (
           <button
             ref={gifButtonRef}
             type="button"
@@ -1346,7 +1409,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
             messages at all: Discord's flag and base64 waveform, and Matrix's
             MSC3245 marker with integers. The daemon speaks both from one
             recording, so this is the same button either way. */}
-        {!thread && (service === 'discord' || service === 'matrix') && <VoiceRecorder bufferId={buffer.id} />}
+        {!thread && (service === 'discord' || service === 'matrix' || service === 'telegram') && <VoiceRecorder bufferId={buffer.id} />}
 
         {/* Sending is the one thing the box does that its own Enter does not
             say, so it is only drawn when there is something to send. */}
@@ -1384,6 +1447,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
           bufferId={buffer.id}
           accountId={buffer.accountId}
           discord={service === 'discord'}
+          telegram={service === 'telegram'}
           onClose={() => setGifPicker(false)}
         />
       )}

src/renderer/src/components/ConversationMenu.tsx

@@ -72,17 +72,17 @@ export function ConversationMenu({ buffer }: { buffer: BufferEntry }): JSX.Eleme
       onTogglePin: () => togglePin(buffer.id),
       onToggleMute: () => {
         toggleMute(buffer.id)
-        if (account?.service === 'matrix' || account?.service === 'steam') {
+        if (account?.service === 'matrix' || account?.service === 'steam' || account?.service === 'telegram') {
           void window.moho
-            .rpc(account.service === 'steam' ? 'steamSetFriendMuted' : 'setMatrixRoomMuted', { bufferId: buffer.id, muted: !isMuted(buffer.id) })
+            .rpc(account.service === 'steam' ? 'steamSetFriendMuted' : account.service === 'telegram' ? 'setTelegramChatMuted' : 'setMatrixRoomMuted', { bufferId: buffer.id, muted: !isMuted(buffer.id) })
             .catch((e: Error) => store.toast('error', e.message))
         }
       },
       onUnmuteAccount:
-        account?.service === 'matrix' || account?.service === 'steam'
+        account?.service === 'matrix' || account?.service === 'steam' || account?.service === 'telegram'
           ? () =>
               void window.moho
-                .rpc(account.service === 'steam' ? 'steamSetFriendMuted' : 'setMatrixRoomMuted', { bufferId: buffer.id, muted: false })
+                .rpc(account.service === 'steam' ? 'steamSetFriendMuted' : account.service === 'telegram' ? 'setTelegramChatMuted' : 'setMatrixRoomMuted', { bufferId: buffer.id, muted: false })
                 .catch((e: Error) => store.toast('error', e.message))
           : undefined,
       onToggleAutojoin:
@@ -167,13 +167,17 @@ export function ConversationMenu({ buffer }: { buffer: BufferEntry }): JSX.Eleme
             name={buffer.name}
             url={buffer.avatarUrl}
             size={24}
-            status={dmStatus(buffer, presence, buffers)}
+            // Twitch has no presence for a whisper's other end; the badge says what it is instead.
+            status={buffer.accountId.startsWith('twitch:') ? undefined : dmStatus(buffer, presence, buffers)}
+            badge={buffer.kind === 'dm' ? 'mail' : undefined}
           />
         ) : null}
         <span className="main-header-title ellipsis">{name}</span>
         {/* What they are doing, beside the name: the game, or a state the dot's
             colour does not tell apart. */}
         {statusText && <span className="header-status small muted ellipsis">{statusText}</span>}
+        {/* A whisper on Twitch is headed like a channel is - a picture and a name - so it says what it is. */}
+        {buffer.kind === 'dm' && buffer.accountId.startsWith('twitch:') && <span className="header-status small muted">Whisper</span>}
       </button>
 
       {buffer.topic && <HeaderTopic topic={buffer.topic} />}

src/renderer/src/components/ConversationTools.tsx

@@ -615,6 +615,7 @@ export function ConversationTools({ buffer }: { buffer: BufferEntry }): JSX.Elem
   // to a name half written.
   const filterMenu = suggestions(query)
   const isMatrix = buffer.accountId.startsWith('matrix:')
+  const isTelegram = buffer.accountId.startsWith('telegram:')
   const isSteam = buffer.accountId.startsWith('steam:')
   const stream = useChat((s) => s.kickStreams)[buffer.id]
   // Whether this window is the one playing this channel. Per window rather
@@ -682,11 +683,11 @@ export function ConversationTools({ buffer }: { buffer: BufferEntry }): JSX.Elem
                 if (filtered) setResults([])
               })
           }
-          if (!isMatrix) return
-          // Then the homeserver, which has what this client never downloaded
+          if (!isMatrix && !isTelegram) return
+          // Then the server, which has what this client never downloaded
           // - including everything said before this account joined.
           return window.moho
-            .rpc<MatrixSearch>('searchMatrixMessages', {
+            .rpc<MatrixSearch>(isTelegram ? 'searchTelegramMessages' : 'searchMatrixMessages', {
               bufferId: buffer.id,
               query: text,
               scope,
@@ -711,15 +712,17 @@ export function ConversationTools({ buffer }: { buffer: BufferEntry }): JSX.Elem
         .finally(() => setSearching(false))
     }, 250)
     return () => clearTimeout(timer)
-  }, [query, buffer.id, store, isMatrix, isDiscord, scope])
+  }, [query, buffer.id, store, isMatrix, isTelegram, isDiscord, scope])
 
   // A viewer count that never moves is worse than none, and Kick pushes a
   // stream starting and stopping but never the count. The followed channels
   // are polled as a group by the daemon; this is the one channel on screen,
   // which may not be followed at all, asked about on its own minute.
   const isKick = buffer.accountId.startsWith('kick:')
+  const isTwitch = buffer.accountId.startsWith('twitch:')
+  const hasStream = isKick || buffer.accountId.startsWith('twitch:')
   useEffect(() => {
-    if (!isKick || buffer.kind !== 'channel') return
+    if (!hasStream || buffer.kind !== 'channel') return
     const tick = (): void => {
       void window.moho.rpc('refreshKickStream', { bufferId: buffer.id }).catch(() => {
         // Nothing to say: the header keeps the last count it had, which is
@@ -728,7 +731,7 @@ export function ConversationTools({ buffer }: { buffer: BufferEntry }): JSX.Elem
     }
     const timer = setInterval(tick, 60_000)
     return () => clearInterval(timer)
-  }, [isKick, buffer.id, buffer.kind])
+  }, [hasStream, buffer.id, buffer.kind])
 
   const rerun = async (): Promise<void> => {
     setSearching(true)
@@ -978,7 +981,7 @@ export function ConversationTools({ buffer }: { buffer: BufferEntry }): JSX.Elem
 
       {isMatrix && buffer.kind !== 'server' && <ThreadList buffer={buffer} />}
       {isDiscord && buffer.kind === 'channel' && <DiscordThreads buffer={buffer} />}
-      {(isMatrix || isDiscord) && buffer.kind !== 'server' && <PinnedMessages buffer={buffer} />}
+      {(isMatrix || isDiscord || buffer.accountId.startsWith('telegram:')) && buffer.kind !== 'server' && <PinnedMessages buffer={buffer} />}
 
       {/* Beside the pins, because it is the same kind of fact about a room:
           something the room keeps, rather than something said in it. */}
@@ -998,8 +1001,8 @@ export function ConversationTools({ buffer }: { buffer: BufferEntry }): JSX.Elem
           have polls and no predictions, IRC has neither, and an icon that
           opens an empty list on a service that could never fill it is an
           icon that says the feature is missing rather than absent. */}
-      {(isKick || isMatrix) && <CardHistory buffer={buffer} kind="poll" icon="help" label="Past polls" />}
-      {isKick && <CardHistory buffer={buffer} kind="prediction" icon="casino" label="Past predictions" />}
+      {(isKick || isMatrix || isTwitch) && <CardHistory buffer={buffer} kind="poll" icon="help" label="Past polls" />}
+      {(isKick || isTwitch) && <CardHistory buffer={buffer} kind="prediction" icon="casino" label="Past predictions" />}
 
       {/* An icon until it is being used. A box wide enough to type into is
           the single widest thing in this row, and a header that always
@@ -1083,7 +1086,7 @@ export function ConversationTools({ buffer }: { buffer: BufferEntry }): JSX.Elem
           {/* Where to look. Only on Matrix, because it is the only protocol
               here whose server will answer the question - and the room is
               often exactly what somebody searching has forgotten. */}
-          {isMatrix && (
+          {(isMatrix || isTelegram) && (
             <div className="search-scope small">
               <button
                 type="button"

src/renderer/src/components/EditMenu.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
 import { ContextMenu, type MenuEntry } from './ContextMenu'
 import type { EditAction, EditMenuRequest } from '../../../shared/ipc'
+import { usePref } from '../state/hooks'
+import { DEFAULT_SEARCH_ENGINE, engineName, searchUrl, shortened } from '../lib/searchengines'
 
 /**
  * The right-click menu for anywhere text is typed: the message box, and every
@@ -14,6 +16,8 @@ import type { EditAction, EditMenuRequest } from '../../../shared/ipc'
 export function EditMenu(): JSX.Element | null {
   const [menu, setMenu] = useState<EditMenuRequest | null>(null)
   const focus = useRef<{ element: HTMLElement | null; range: Range | null }>({ element: null, range: null })
+  const [searchEngine] = usePref<string>('search.engine', DEFAULT_SEARCH_ENGINE)
+  const [searchCustom] = usePref<string>('search.customUrl', '')
 
   useEffect(
     () =>
@@ -79,6 +83,18 @@ export function EditMenu(): JSX.Element | null {
     { separator: true },
     { label: 'Select all', icon: 'select_all', disabled: !menu.can.selectAll, onClick: act('selectAll') }
   )
+  // Looking up what is selected, in the browser the person already uses.
+  const address = searchUrl(menu.selection ?? '', searchEngine, searchCustom)
+  if (address) {
+    entries.push(
+      { separator: true },
+      {
+        label: `Search ${engineName(searchEngine, searchCustom)} for “${shortened(menu.selection)}”`,
+        icon: 'search',
+        onClick: () => void window.moho.openExternal(address)
+      }
+    )
+  }
 
   return <ContextMenu x={menu.x} y={menu.y} entries={entries} onClose={() => setMenu(null)} />
 }

src/renderer/src/components/EmojiPicker.tsx

@@ -1,8 +1,10 @@
 import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useMediaUrl } from '../lib/route'
-import { Icon } from './Icon'
+import { Icon, ServiceMark } from './Icon'
+import { serviceIcon } from '../lib/util'
 import { discordEmojiUrl, emojiPreview, sourcePick, type SmilieEntry } from '../lib/format'
+import { recentsHere } from '../lib/recents'
 import { drawableEmoteUrl, onLocalEmotes } from '../lib/emotecache'
 import { LottieSticker } from './LottieSticker'
 import type { CustomEmoji } from '../../../shared/wire'
@@ -74,6 +76,8 @@ export const COMMON_EMOJI: { emoji: string; name: string }[] = [
 export function emojiToken(e: CustomEmoji): string {
   // Steam's, named rather than numbered: the id carries the service.
   if (e.id.startsWith('steam:')) return `[steam:emote:${e.id.slice(6)}]`
+  // Twitch's, which the daemon names by the token its messages carry: the box draws the picture and Twitch is sent the word.
+  if (e.id.startsWith('[twitch:')) return e.id
   if (e.url) return `[emote:${e.id}:${e.name}]`
   return `<${e.animated ? 'a' : ''}:${e.name}:${e.id}>`
 }
@@ -123,7 +127,9 @@ function stickerKey(s: StickerEntry): string {
 export function readRecent(accountId?: string): string[] {
   try {
     const stored = JSON.parse(localStorage.getItem(recentKey(accountId)) || '[]')
-    return Array.isArray(stored) ? stored : []
+    // Without the bare numbers older builds kept for a custom emoji picked from another server: they were never a
+    // message, and are not worth showing.
+    return Array.isArray(stored) ? stored.filter((r) => !/^\d+$/.test(String(r))) : []
   } catch {
     return []
   }
@@ -262,6 +268,8 @@ export function EmojiPicker({
   // daemon rather than assembled here, because the answer depends on things
   // only it knows - a Nitro subscription, a Kick channel's standing.
   const [sources, setSources] = useState<EmojiSource[]>([])
+  /** Whether the daemon has said yet what can be sent here, which decides what the recent picks may offer. */
+  const [sourcesLoaded, setSourcesLoaded] = useState(false)
   const scroll = useRef<HTMLDivElement>(null)
   const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({})
 
@@ -272,7 +280,10 @@ export function EmojiPicker({
       // An older daemon has no such method; the buffer's own emoji below are
       // what this showed before it asked, so that is what it falls back to.
       .catch(() => [])
-      .then(setSources)
+      .then((list) => {
+        setSources(list)
+        setSourcesLoaded(true)
+      })
   }, [bufferId, stickersOnly])
 
   // The picker is normally opened fresh, but it stays up across a buffer
@@ -407,6 +418,26 @@ export function EmojiPicker({
     return groups
   }, [custom, sources])
 
+  // What can be sent in this conversation, as the text each is picked as. A recent pick is shown only if it is in
+  // here (or is an ordinary Unicode emoji): one from another server, another channel, an unlock that has lapsed or
+  // an account without Nitro is not something this conversation can take, so it is not offered - on every service.
+  // The stored list is left as it is, so a pick comes back where it works again.
+  const onOffer = useMemo(() => {
+    const set = new Set<string>()
+    for (const src of sources) {
+      if (!src.usableHere) continue
+      for (const e of src.emoji) {
+        if (e.locked) continue
+        set.add(sourcePick(src.service, e))
+        set.add(emojiToken({ id: e.id, name: e.name, url: e.url, animated: e.animated } as CustomEmoji))
+      }
+    }
+    for (const e of customEmoji) set.add(emojiToken(e))
+    for (const s of smilies) for (const a of s.aliases ?? []) set.add(a)
+    return set
+  }, [sources, customEmoji, smilies])
+  const recentHere = useMemo(() => recentsHere(recent, onOffer, sourcesLoaded, fixedSet), [recent, onOffer, sourcesLoaded, fixedSet])
+
   const jumpTo = (id: string): void => {
     sectionRefs.current[id]?.scrollIntoView({ block: 'start', behavior: 'smooth' })
   }
@@ -527,12 +558,14 @@ export function EmojiPicker({
         }))
       ]
     : [
-        ...(!q && recent.length > 0 ? [{ id: 'recent', name: 'Recent', icon: <Icon name="schedule" size={20} /> }] : []),
+        ...(!q && recentHere.length > 0 ? [{ id: 'recent', name: 'Recent', icon: <Icon name="schedule" size={20} /> }] : []),
         ...sourceSections.map((src) => ({
           id: src.id,
           name: src.name,
           icon: src.iconUrl ? (
-            <img src={media(src.iconUrl)} alt="" />
+            <img src={media(src.iconUrl)} alt="" className="emoji-rail-avatar" />
+          ) : src.service === 'twitch' && src.name === 'Twitch' ? (
+            <ServiceMark icon={serviceIcon('twitch')} size={20} />
           ) : (
             <span className="emoji-jump-initial">{src.name.slice(0, 1).toUpperCase()}</span>
           )
@@ -742,9 +775,9 @@ export function EmojiPicker({
         }}
       >
         <PickerScroll.Provider value={scroll}>
-        {!stickersOnly && !q && recent.length > 0 && (
+        {!stickersOnly && !q && recentHere.length > 0 && (
           <Section title="Recent" anchorRef={(el) => (sectionRefs.current.recent = el)}>
-            {recent.map((r) => {
+            {recentHere.map((r) => {
               // A recent is stored as the text that gets sent, which for a
               // custom emoji or a shortcode is a stand-in rather than the
               // thing. Resolved back to a picture here, so the row of recents
@@ -782,7 +815,7 @@ export function EmojiPicker({
             title={src.name}
             anchorRef={(el) => (sectionRefs.current[src.id] = el)}
           >
-            {src.emoji.map((e) => {
+            {src.emoji.map((e, at) => {
               // Only one reason left: a source that could not be used here
               // at all was dropped above, so a cell that cannot be pressed is
               // one this account has not paid for - in a room it is reading.
@@ -802,7 +835,7 @@ export function EmojiPicker({
                   : emojiPreview(e.id, smilies)?.src
               return (
                 <button
-                  key={`${src.id}:${e.id}`}
+                  key={`${src.id}:${e.id}:${at}`}
                   type="button"
                   // A cell with no picture shows its name, and the styling
                   // that keeps a name inside its square is `.emoji-cell.

src/renderer/src/components/GifPicker.tsx

@@ -43,6 +43,7 @@ export function GifPicker({
   bufferId,
   accountId,
   discord,
+  telegram,
   onClose
 }: {
   anchor: HTMLElement | null
@@ -50,6 +51,8 @@ export function GifPicker({
   accountId: string
   /** Whether the conversation is on Discord, which decides what is sent. */
   discord: boolean
+  /** Whether the conversation is on Telegram, which has GIFs of its own: the account's saved ones, and its GIF search. */
+  telegram?: boolean
   onClose: () => void
 }): JSX.Element {
   const store = useStore()
@@ -116,7 +119,7 @@ export function GifPicker({
     const wait = setTimeout(
       () => {
         window.moho
-          .rpc<{ gifs: GifEntry[]; categories: GifCategory[] }>('listGifs', { query: query.trim() })
+          .rpc<{ gifs: GifEntry[]; categories: GifCategory[] }>(telegram ? 'listTelegramGifs' : 'listGifs', telegram ? { bufferId, query: query.trim() } : { query: query.trim() })
           .then((answer) => {
             if (!current) return
             setGifs(answer.gifs)
@@ -135,10 +138,15 @@ export function GifPicker({
       current = false
       clearTimeout(wait)
     }
-  }, [query])
+  }, [query, telegram, bufferId])
 
   const pick = (gif: GifEntry): void => {
     onClose()
+    // Telegram's are files on Telegram: sending one is sending that file, not a link to it.
+    if (telegram) {
+      void window.moho.rpc('sendTelegramGif', { bufferId, id: gif.id }).catch((e: Error) => store.toast('error', e.message))
+      return
+    }
     // Discord's own client sends the link, which Discord turns into the GIF.
     // Everything else is sent the file, since a page address would be only
     // that.

src/renderer/src/components/JoinPanel.tsx

@@ -74,6 +74,10 @@ export function JoinPanel(): JSX.Element {
         return <DiscordJoin account={account} />
       case 'kick':
         return <KickJoin account={account} />
+      case 'twitch':
+        return <TwitchJoin account={account} />
+      case 'telegram':
+        return <TelegramJoin account={account} />
       case 'sneedchat':
         return <SneedchatRooms account={account} />
       case 'steam':
@@ -82,7 +86,7 @@ export function JoinPanel(): JSX.Element {
         return <div className="panel muted">Joining isn&apos;t supported for this service yet.</div>
     }
   })()
-  const joinable = all.filter((a) => ['irc', 'matrix', 'discord', 'kick', 'sneedchat', 'steam'].includes(a.service))
+  const joinable = all.filter((a) => ['irc', 'matrix', 'discord', 'kick', 'sneedchat', 'steam', 'twitch', 'telegram'].includes(a.service))
 
   return (
     <div className="join-frame">
@@ -361,6 +365,41 @@ function KickJoin({ account }: { account: Account }): JSX.Element {
   )
 }
 
+function TwitchJoin({ account }: { account: Account }): JSX.Element {
+  const store = useStore()
+  return (
+    <div className="panel join-panel">
+      <SubmitField
+        label="Open a streamer's chat"
+        placeholder="channel name, or a twitch.tv link"
+        onSubmit={(name) => void store.joinAndOpen(account.id, name)}
+      />
+      <p className="small muted">
+        Twitch chat is public, so this works without signing in. Signing in adds talking and the
+        channels you follow. A channel that does not exist is said so and not kept.
+      </p>
+    </div>
+  )
+}
+
+function TelegramJoin({ account }: { account: Account }): JSX.Element {
+  const store = useStore()
+  return (
+    <div className="panel join-panel">
+      <SubmitField
+        label="Join a chat, or open a conversation"
+        placeholder="@name, or a t.me link"
+        onSubmit={(name) => void store.joinAndOpen(account.id, name)}
+      />
+      <p className="small muted">
+        A public group or channel is joined by its @name or t.me link, a private one by the invite link
+        somebody gave you, and a person's @name opens a conversation with them. Telegram may ask an
+        administrator to accept a request to join. Closing a chat in the list leaves it.
+      </p>
+    </div>
+  )
+}
+
 /** One person in a friend request. */
 interface SteamPerson {
   steamid: string

src/renderer/src/components/KickEventCard.tsx

@@ -1,10 +1,14 @@
 import { Icon } from './Icon'
+import { useStore } from '../state/hooks'
 import { embedColor } from '../lib/format'
 import { nickColor } from '../lib/util'
 import type { Embed } from '../../../shared/wire'
 
 /** The embed kinds the daemon draws as these cards instead of as a link preview. */
-export const KICK_EVENT_KINDS = ['kicks', 'gift-sub', 'raid', 'redeem', 'subscribe', 'moderation', 'stream']
+export const KICK_EVENT_KINDS = ['kicks', 'gift-sub', 'raid', 'redeem', 'subscribe', 'moderation', 'stream', 'raid-out']
+
+/** The glyphs of a moderation card that is a penalty: red. The rest (a mode, an unban, a shoutout) are not. */
+const PUNISHING = ['gavel', 'timer_off', 'delete', 'block']
 
 export function isKickEvent(embed: Embed): boolean {
   return !!embed.kind && KICK_EVENT_KINDS.includes(embed.kind)
@@ -30,7 +34,8 @@ function KicksMark({ size = 16 }: { size?: number }): JSX.Element {
  * streamer gave it - a ban, a timeout or a chat cleared, and the stream going
  * live or ending.
  */
-export function KickEventCard({ embed }: { embed: Embed }): JSX.Element | null {
+export function KickEventCard({ embed, bufferId }: { embed: Embed; bufferId?: string }): JSX.Element | null {
+  const store = useStore()
   const who = embed.author
   if (!who) return null
   const name = (colour?: string): JSX.Element => (
@@ -86,6 +91,39 @@ export function KickEventCard({ embed }: { embed: Embed }): JSX.Element | null {
     )
   }
 
+  // Twitch: the channel being watched is sending its viewers to another (the embed's title is how many, its
+  // description the other channel's login), and the card offers to go along.
+  if (embed.kind === 'raid-out') {
+    const account = bufferId ? store.accountFor(bufferId) : undefined
+    return (
+      <div className="kick-event raid selectable">
+        <span className="kick-event-badge lead">
+          <Icon name="groups" size={20} />
+        </span>
+        <div className="kick-event-main">
+          <div className="kick-event-line">
+            <span className="kick-event-verb">Raiding</span>
+            {name()}
+            {embed.title && (
+              <>
+                <span className="kick-event-verb">with</span>
+                <strong className="kick-event-amount">{embed.title}</strong>
+                <span className="kick-event-verb">{embed.title === '1' ? 'viewer.' : 'viewers.'}</span>
+              </>
+            )}
+          </div>
+          {account && embed.description && (
+            <div className="kick-event-message">
+              <button type="button" className="button subtle" onClick={() => void store.joinAndOpen(account.id, embed.description ?? '')}>
+                Open {who}'s chat
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
   if (embed.kind === 'redeem') {
     return (
       <div className="kick-event redeem selectable" style={tint}>
@@ -127,9 +165,9 @@ export function KickEventCard({ embed }: { embed: Embed }): JSX.Element | null {
 
   if (embed.kind === 'moderation') {
     return (
-      <div className="kick-event moderation selectable">
+      <div className={`kick-event moderation selectable${PUNISHING.includes(embed.icon ?? 'gavel') ? '' : ' soft'}`}>
         <span className="kick-event-badge lead">
-          <Icon name="gavel" size={20} />
+          <Icon name={embed.icon || 'gavel'} size={20} />
         </span>
         <div className="kick-event-line">
           <strong className="kick-event-name">{who}</strong>
@@ -192,3 +230,20 @@ export function KickEventCard({ embed }: { embed: Embed }): JSX.Element | null {
     </div>
   )
 }
+
+/**
+ * A line the service wrote rather than somebody saying it - a join, a topic change, a notice about the
+ * conversation - as the same card the events above are, so every protocol's notifications look alike and a
+ * protocol added later gets them by sending a line that is not speech. It carries the words as the log draws
+ * them (links and emoji in place), a mark for what kind of line it was, and takes the red of a warning.
+ */
+export function NotificationCard({ icon, warning, children }: { icon: string; warning?: boolean; children: React.ReactNode }): JSX.Element {
+  return (
+    <div className={`kick-event notification selectable${warning ? ' warning' : ''}`}>
+      <span className="kick-event-badge lead">
+        <Icon name={icon} size={18} />
+      </span>
+      <div className="kick-event-line">{children}</div>
+    </div>
+  )
+}

src/renderer/src/components/KickPoints.tsx

@@ -1,70 +1,33 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Icon } from './Icon'
-import { useStore } from '../state/hooks'
-import { useEscapeLayer } from '../lib/layers'
+import { useChat } from '../state/hooks'
+import { RewardsPanel } from './RewardsPanel'
 
 /**
- * Channel points, and what the streamer will trade them for.
+ * A Kick channel's points, and the way into what the streamer will trade them for.
  *
- * A plaque at the foot of the viewer list, because that is where Kick puts it
- * and because it belongs to the channel rather than to the conversation - it
- * is a fact about standing in this room, like the viewer count above it.
- *
- * The list opens upward. The plaque sits at the bottom of a full-height
- * column, so a pane growing downward from it would be drawn mostly off the
- * window; anchoring it to the plaque's top edge and letting it grow up is the
- * only direction with room. Its height is capped and it scrolls, because a
- * channel may offer more rewards than the window is tall.
+ * A plaque at the foot of the viewer list, because that is where Kick puts it and because it belongs to the
+ * channel rather than to the conversation - it is a fact about standing in this room, like the viewer count
+ * above it. Pressing it opens the rewards panel over the chat (RewardsPanel.tsx), the same one Twitch's plaque
+ * opens, instead of a menu of its own.
  */
-interface Reward {
-  id: string
-  title: string
-  cost: number
-  description?: string
-  enabled: boolean
-  paused: boolean
-  needsInput: boolean
-}
 
 /** How often the balance is asked for while this channel is on screen. */
 const POINTS_INTERVAL_MS = 60_000
 
-interface Answer {
-  rewards: Reward[]
-  points: number | null
-}
-
 export function KickPoints({ bufferId }: { bufferId: string }): JSX.Element | null {
-  const store = useStore()
   const [open, setOpen] = useState(false)
-  const [answer, setAnswer] = useState<Answer | null>(null)
-  const [busy, setBusy] = useState('')
-  const box = useRef<HTMLDivElement>(null)
-
   const [points, setPoints] = useState<number | null>(null)
 
-  const refresh = (): void => {
-    void window.moho
-      .rpc<Answer>('listKickRewards', { bufferId })
-      .then((a) => {
-        setAnswer(a)
-        if (a.points !== null) setPoints(a.points)
-      })
-      .catch(() => setAnswer(null))
-  }
+  // Told by Kick the moment it changes, where the daemon is following it; the timer below is for a channel that
+  // is not live, which is not followed.
+  const pushed = useChat((s) => s.kickPointsByBuffer[bufferId])
+  useEffect(() => {
+    if (pushed !== undefined) setPoints(pushed)
+  }, [pushed])
 
-  // The balance, shown whether or not the pane is open, and kept current
-  // while somebody is actually looking at this channel.
-  //
-  // Only while looking: this component exists only for the conversation on
-  // screen, so a channel scrolled away from stops costing anything the moment
-  // it is closed. A poll per open channel would be a request a minute for
-  // every Kick channel an account watches, forever, to keep numbers nobody is
-  // reading up to date.
-  //
-  // Paused with the window too. A minimised client is not somebody watching,
-  // and points that are a few minutes stale when the window comes back are
-  // corrected by the next tick before anyone could spend them.
+  // The balance, shown whether or not the panel is open, and kept current while somebody is actually looking at
+  // this channel: this component exists only for the conversation on screen, and is paused with the window.
   useEffect(() => {
     let cancelled = false
     const ask = (): void => {
@@ -72,15 +35,12 @@ export function KickPoints({ bufferId }: { bufferId: string }): JSX.Element | nu
       void window.moho
         .rpc<{ points: number }>('kickPoints', { bufferId })
         .then((a) => !cancelled && setPoints(a.points))
-        // A channel that will not say leaves the last number rather than
-        // blanking the plaque - it was true a minute ago, which is closer
-        // than nothing.
+        // A channel that will not say leaves the last number rather than blanking the plaque.
         .catch(() => {})
     }
     setPoints(null)
     ask()
     const timer = setInterval(ask, POINTS_INTERVAL_MS)
-    // Coming back to the window should not wait out the rest of a minute.
     document.addEventListener('visibilitychange', ask)
     return () => {
       cancelled = true
@@ -89,99 +49,17 @@ export function KickPoints({ bufferId }: { bufferId: string }): JSX.Element | nu
     }
   }, [bufferId])
 
-  // The rest - what the points can buy - only when the pane is opened. A
-  // channel's rewards are set up once and edited rarely, so asking for them
-  // every minute would be a request spent on an answer that does not change.
-  useEffect(() => {
-    if (open) refresh()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, bufferId])
-
-  // Closing the channel takes the pane with it, so it cannot be left open
-  // over a conversation it is not about.
+  // Closing the channel takes the panel with it, so it cannot be left open over a conversation it is not about.
   useEffect(() => setOpen(false), [bufferId])
 
-  useEscapeLayer(() => setOpen(false), open)
-
-  useEffect(() => {
-    if (!open) return
-    const away = (e: MouseEvent): void => {
-      if (!box.current?.contains(e.target as Node)) setOpen(false)
-    }
-    document.addEventListener('mousedown', away)
-    return () => {
-      document.removeEventListener('mousedown', away)
-    }
-  }, [open])
-
-
-  const redeem = (reward: Reward): void => {
-    setBusy(reward.id)
-    void window.moho
-      .rpc<{ points: number | null }>('redeemKickReward', { bufferId, rewardId: reward.id })
-      .then((a) => {
-        store.toast('info', `Redeemed ${reward.title}`)
-        // The balance the server now holds, rather than this one minus the
-        // cost - a redeem that was refunded or cost something else should not
-        // leave the plaque disagreeing with Kick.
-        if (a.points !== null) setPoints(a.points)
-      })
-      .catch((e: Error) => store.toast('error', e.message))
-      .finally(() => setBusy(''))
-  }
-
   return (
-    <div className="kick-points" ref={box}>
-      {open && (
-        <div className="kick-rewards" role="menu">
-          <div className="kick-rewards-head small muted">
-            {answer ? `${answer.rewards.length} rewards` : 'Asking Kick…'}
-          </div>
-          <div className="kick-rewards-list">
-            {answer?.rewards.map((r) => {
-              // Shown whatever their state - the list is also how somebody
-              // learns what this channel does - but only one of them can
-              // actually be pressed.
-              const why = !r.enabled
-                ? 'The streamer has this turned off'
-                : r.paused
-                  ? 'Paused right now'
-                  : r.needsInput
-                    ? 'This one asks you to type something, which moho cannot do yet'
-                    : points !== null && points < r.cost
-                      ? `You have ${points.toLocaleString()} of ${r.cost.toLocaleString()}`
-                      : ''
-              return (
-                <button
-                  key={r.id}
-                  type="button"
-                  className={`kick-reward${why ? ' locked' : ''}`}
-                  disabled={!!why || busy === r.id}
-                  title={why || r.description || r.title}
-                  onClick={() => redeem(r)}
-                >
-                  <span className="ellipsis">{r.title}</span>
-                  <span className="kick-reward-cost small">{r.cost.toLocaleString()}</span>
-                </button>
-              )
-            })}
-            {answer?.rewards.length === 0 && (
-              <div className="small muted kick-rewards-empty">This channel offers nothing for points.</div>
-            )}
-          </div>
-        </div>
-      )}
-
-      <button
-        type="button"
-        className={`kick-points-plaque${open ? ' open' : ''}`}
-        title="Channel points, and what they buy"
-        onClick={() => setOpen(!open)}
-      >
+    <div className="kick-points">
+      <button type="button" className={`kick-points-plaque${open ? ' open' : ''}`} title="Channel points, and what they buy" onClick={() => setOpen(true)}>
         <Icon name="toll" size={15} />
         <span className="ellipsis">{points === null ? 'Points' : points.toLocaleString()}</span>
-        <Icon name={open ? 'expand_more' : 'expand_less'} size={15} />
+        <Icon name="redeem" size={15} />
       </button>
+      {open && <RewardsPanel bufferId={bufferId} service="kick" onClose={() => setOpen(false)} onBalance={setPoints} />}
     </div>
   )
 }

src/renderer/src/components/LinkCard.tsx

@@ -0,0 +1,51 @@
+import { useMediaUrl } from '../lib/route'
+import { useStore } from '../state/hooks'
+import { Icon } from './Icon'
+import type { Embed } from '../../../shared/wire'
+
+/**
+ * The preview of a link as Telegram draws it: the site's name, the page's title and description, its picture, and
+ * - where Telegram has made an article of the page - an Instant View button that opens the article in a window of its
+ * own. The same card for any link the service previewed; it is only the button that depends on the article.
+ */
+export function LinkCard({ embed, bufferId, messageId }: { embed: Embed; bufferId: string; messageId: string }): JSX.Element {
+  const store = useStore()
+  const media = useMediaUrl()
+  const instant = embed.kind === 'instant'
+  const openPage = (): void => {
+    if (embed.url) void window.moho.openExternal(embed.url)
+  }
+  const openArticle = (): void => {
+    window.moho
+      .rpc<{ title: string; html: string }>('telegramInstantView', { bufferId, messageId })
+      .then((article) => window.moho.openArticle(article.title, article.html))
+      .catch((e: Error) => store.toast('error', e.message))
+  }
+  return (
+    <div className="link-card selectable">
+      {embed.provider && <div className="link-card-site">{embed.provider}</div>}
+      {embed.title && (
+        <a
+          className="link-card-title"
+          href={embed.url}
+          onClick={(e) => {
+            e.preventDefault()
+            openPage()
+          }}
+        >
+          {embed.title}
+        </a>
+      )}
+      {embed.description && <div className="link-card-desc">{embed.description}</div>}
+      {embed.imageUrl && (
+        <img className="link-card-image" src={media(embed.imageUrl)} alt="" loading="lazy" onClick={instant ? openArticle : openPage} />
+      )}
+      {instant && (
+        <button type="button" className="link-card-instant" onClick={openArticle}>
+          <Icon name="bolt" size={15} />
+          INSTANT VIEW
+        </button>
+      )}
+    </div>
+  )
+}

src/renderer/src/components/LiveCards.tsx

@@ -149,7 +149,7 @@ function Card({ card, reviewing = false }: { card: LiveCard; reviewing?: boolean
           {/* Ending it is the streamer's own gesture, and the service refuses
               it for anybody else - so it is offered and allowed to fail there
               rather than guessed at from a role this client may not know. */}
-          {!reviewing && !isPrediction && open && (
+          {!reviewing && !isPrediction && open && !card.readOnly && !card.noEnd && (
             <IconButton name="delete" size={16} title="End this poll" onClick={() => store.endPoll(card.bufferId, card.id)} />
           )}
           <IconButton
@@ -175,7 +175,7 @@ function Card({ card, reviewing = false }: { card: LiveCard; reviewing?: boolean
             )}
             // A poll row is the vote; a prediction row only chooses what the
             // points go on, because the amount is the other half of a bet.
-            disabled={reviewing || !open || (!isPrediction && card.hasVoted)}
+            disabled={reviewing || !open || card.readOnly || (!isPrediction && card.hasVoted)}
             onClick={() =>
               isPrediction ? setPicked(option.id) : store.votePoll(card.bufferId, option.id)
             }
@@ -216,7 +216,7 @@ function Card({ card, reviewing = false }: { card: LiveCard; reviewing?: boolean
       {/* The bet itself. Only while it is taking them, and only where the
           service says what this account has to spend - offering to bet
           points that cannot be counted is offering a button that fails. */}
-      {isPrediction && !reviewing && open && (
+      {isPrediction && !reviewing && open && !card.readOnly && (
         <div className="poll-bet">
           <input
             className="poll-bet-amount"

src/renderer/src/components/MediaEmbed.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { Icon } from './Icon'
 import { Lightbox, type LightboxSource } from './Lightbox'
 import { registerMedia } from '../lib/gallery'
+import { VideoPlayer } from './VideoPlayer'
 import { VoiceMessage } from './VoiceMessage'
 import { LottieSticker, lottieStickerId } from './LottieSticker'
 import { fullImageFor, knownFullImage } from '../lib/fullimage'
@@ -45,6 +46,8 @@ interface Props {
    * fills the cell and crops to it rather than keeping its own shape.
    */
   tile?: boolean
+  /** Present when the message this is in can be edited by this person: the video's pencil. */
+  onEdit?: () => void
 }
 
 /** What Discord puts at the front of a file name to hide it behind a spoiler. */
@@ -94,7 +97,8 @@ export function MediaEmbed({
   onOpenInDiscord,
   onRefresh,
   onStale,
-  tile
+  tile,
+  onEdit
 }: Props): JSX.Element | null {
   // Through the account's route when it is strictly routed (#257).
   const media = useMediaUrl()
@@ -178,7 +182,8 @@ export function MediaEmbed({
   viewerRef.current = viewerSource
   useEffect(() => {
     const el = wrapRef.current
-    if (!el || (kind !== 'image' && kind !== 'video')) return
+    // Pictures only: a video goes full screen by itself and is not stepped to from the viewer.
+    if (!el || kind !== 'image') return
     return registerMedia(el, () => viewerRef.current())
   }, [kind])
 
@@ -421,6 +426,36 @@ export function MediaEmbed({
     // video/quicktime, which canPlayType refuses outright while the browser
     // then plays the file perfectly well once it looks inside. Letting it try
     // and handling the failure is the honest test.
+    //
+    // A Telegram video is not in the cache until it is fetched, and fetching is
+    // the whole file: a feed of videos would pull hundreds of megabytes just to
+    // be scrolled. So it is drawn as its preview, and fetched when played.
+    const deferred =
+      !attachment?.gif && !!attachment?.thumbnailPath && !previewGone && !playing && /[\\/]telegram-media[\\/]/.test(fullSrc)
+    if (deferred) {
+      return (
+        <span className={classes('media-embed-wrap video', tile && 'tile', hidden && 'spoilered')} style={{ ...ratio, position: 'relative' }} {...reveal}>
+          <img
+            className="media-embed"
+            style={ratio}
+            src={media(previewSrc)}
+            alt={attachment?.filename || ''}
+            loading="lazy"
+            onError={() => setPreviewGone(true)}
+          />
+          <button
+            type="button"
+            className="video-expand"
+            title="Play"
+            style={{ position: 'absolute', inset: 0, margin: 'auto', width: 48, height: 48 }}
+            onClick={() => setPlaying(true)}
+          >
+            <Icon name="play_circle" size={32} />
+          </button>
+          {cover}
+        </span>
+      )
+    }
     return (
       <>
         <span
@@ -429,46 +464,50 @@ export function MediaEmbed({
           style={ratio}
           {...reveal}
         >
-          <video
-            className="media-embed"
-            style={ratio}
-            src={media(fullSrc)}
-            // A GIF is silent, runs on its own and goes round, and has no
-            // player to operate: it plays when it is shown if autoplay is on,
-            // and otherwise while the pointer is over it. Any other video is a
-            // video, with its controls.
-            {...(attachment?.gif
-              ? {
-                  muted: true,
-                  autoPlay: autoplay,
-                  loop: true,
-                  onMouseEnter: (e: React.MouseEvent<HTMLVideoElement>) => !autoplay && void e.currentTarget.play().catch(() => {}),
-                  onMouseLeave: (e: React.MouseEvent<HTMLVideoElement>) => !autoplay && e.currentTarget.pause()
-                }
-              : { controls: true, loop })}
-            // Enough to draw the first frame and know how long it is, without
-            // pulling megabytes for every video in a scrolled-past backlog.
-            preload="metadata"
-            playsInline
-            onError={() => setFailed(true)}
-          />
-          <button
-            type="button"
-            className="video-expand"
-            title="Expand"
-            onClick={() => setExpanded(true)}
-          >
-            <Icon name="fullscreen" size={16} />
-          </button>
+          {attachment?.gif ? (
+            <video
+              className="media-embed"
+              style={ratio}
+              src={media(fullSrc)}
+              // A GIF is silent, runs on its own and goes round, and has no player to operate: it plays when it is
+              // shown if autoplay is on, and otherwise while the pointer is over it.
+              muted
+              autoPlay={autoplay}
+              loop
+              onMouseEnter={(e) => !autoplay && void e.currentTarget.play().catch(() => {})}
+              onMouseLeave={(e) => !autoplay && e.currentTarget.pause()}
+              preload="metadata"
+              playsInline
+              onError={() => setFailed(true)}
+            />
+          ) : (
+            // Any other video is a video, with the one set of controls every service gets.
+            <VideoPlayer
+              src={media(fullSrc)}
+              className="media-embed"
+              style={ratio}
+              loop={loop}
+              autoPlay={playing}
+              filename={shownName}
+              saveFrom={openTarget}
+              onEdit={onEdit}
+              onError={() => setFailed(true)}
+            />
+          )}
+          {/* A video has its own full-screen button in its controls. One without controls (a silent looping clip)
+              has none, so it gets this: the same full screen, never the viewer. */}
+          {attachment?.gif && (
+            <button
+              type="button"
+              className="video-expand"
+              title="Full screen"
+              onClick={(e) => void e.currentTarget.parentElement?.querySelector('video')?.requestFullscreen?.().catch(() => {})}
+            >
+              <Icon name="fullscreen" size={16} />
+            </button>
+          )}
           {cover}
         </span>
-        {expanded && (
-          <Lightbox
-            source={viewerSource()}
-            anchor={wrapRef.current}
-            onClose={() => setExpanded(false)}
-          />
-        )}
       </>
     )
   }

src/renderer/src/components/MembershipGate.tsx

@@ -14,16 +14,52 @@ import type { BufferEntry } from '../state/store'
  *
  * Sits above the composer rather than replacing it. The box still works for
  * every other server, and hiding it here would be one more thing to explain.
+ *
+ * The dialog is the server's own form as Discord's client draws it: the rules
+ * as a numbered list with the agreement under them, and any question the
+ * server added - a line of text, a paragraph, or a choice of answers.
  */
+interface FormField {
+  field_type?: string
+  label?: string
+  description?: string | null
+  required?: boolean
+  values?: string[] | null
+  placeholder?: string | null
+}
+
 interface VerificationForm {
   description?: string | null
-  form_fields?: { field_type?: string; label?: string; description?: string | null }[]
+  form_fields?: FormField[]
+  guild?: {
+    id?: string
+    name?: string
+    icon?: string | null
+    approximate_member_count?: number
+    approximate_presence_count?: number
+  }
+}
+
+/** The daemon's answer - or, in the screenshot harness only, a fixture standing in for it (see RewardsPanel). */
+function ask<T>(method: string, params: Record<string, unknown>): Promise<T> {
+  const w = window as unknown as { __mohoShots?: unknown; __rpcFixture?: Record<string, (p: Record<string, unknown>) => unknown> }
+  const stub = w.__mohoShots ? w.__rpcFixture?.[method] : undefined
+  return stub ? Promise.resolve(stub(params) as T) : window.moho.rpc<T>(method, params)
+}
+
+/** Whether the person has done what this field needs. */
+function answered(field: FormField, answer: unknown): boolean {
+  if (!field.required && field.field_type !== 'TERMS') return true
+  if (field.field_type === 'TERMS') return answer === true
+  if (field.field_type === 'MULTIPLE_CHOICE') return typeof answer === 'number'
+  return typeof answer === 'string' && answer.trim().length > 0
 }
 
 export function MembershipGate({ buffer }: { buffer: BufferEntry }): JSX.Element | null {
   const store = useStore()
   const groups = useChat((s) => s.groups)
   const [rules, setRules] = useState<VerificationForm | null>(null)
+  const [answers, setAnswers] = useState<unknown[]>([])
   const [busy, setBusy] = useState(false)
 
   const group = groups.find((g) => g.id === buffer.groupId)
@@ -32,22 +68,36 @@ export function MembershipGate({ buffer }: { buffer: BufferEntry }): JSX.Element
 
   const open = (): void => {
     setBusy(true)
-    void window.moho
-      .rpc<VerificationForm>('getDiscordMemberVerification', {
+    void ask<VerificationForm>('getDiscordMemberVerification', {
         accountId: group.accountId,
         guildId
       })
       // An empty form still opens the dialog: the server has a gate even if
       // it wrote nothing to explain it, and agreeing is still what lifts it.
-      .then((form) => setRules(form ?? {}))
+      .then((form) => {
+        setAnswers([])
+        setRules(form ?? {})
+      })
       .catch((e: Error) => store.toast('error', e.message))
       .finally(() => setBusy(false))
   }
 
+  const fields = rules?.form_fields ?? []
+  const ready = fields.every((f, i) => answered(f, answers[i]))
+  const answer = (i: number, value: unknown): void =>
+    setAnswers((current) => {
+      const next = [...current]
+      next[i] = value
+      return next
+    })
+
   const accept = (): void => {
     setBusy(true)
-    void window.moho
-      .rpc('acceptDiscordMemberVerification', { accountId: group.accountId, guildId })
+    void ask('acceptDiscordMemberVerification', {
+      accountId: group.accountId,
+      guildId,
+      responses: fields.map((_, i) => answers[i] ?? null)
+    })
       .then(() => {
         setRules(null)
         store.toast('info', `You can talk in ${group.name} now.`)
@@ -56,40 +106,114 @@ export function MembershipGate({ buffer }: { buffer: BufferEntry }): JSX.Element
       .finally(() => setBusy(false))
   }
 
-  // The rules as the server wrote them. Discord keeps them in the TERMS
-  // field's label, with the description above it as a preamble.
-  const terms = rules?.form_fields?.find((f) => f.field_type === 'TERMS') ?? rules?.form_fields?.[0]
+  const guild = rules?.guild
+  const icon = guild?.id && guild.icon ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png?size=128` : group.iconUrl
+  const name = guild?.name || group.name
 
   return (
     <>
       <div className="membership-gate">
         <Icon name="lock" size={16} />
-        <span className="ellipsis">
-          You must complete a few more steps before you can talk in {group.name}.
-        </span>
+        <span className="ellipsis">You must complete a few more steps before you can talk in {group.name}.</span>
         <button type="button" className="button primary" disabled={busy} onClick={open}>
           Complete
         </button>
       </div>
 
       {rules && (
-        <Modal title={group.name} icon="gavel" className="membership-rules" onClose={() => setRules(null)}>
-            {rules.description && <p className="small">{rules.description}</p>}
-            {terms?.label && <p className="small">{terms.label}</p>}
-            {terms?.description && <p className="small muted">{terms.description}</p>}
-            {!rules.description && !terms?.label && (
-              <p className="small muted">
-                This server asks new members to agree to its rules before talking.
-              </p>
-            )}
-            <div className="membership-rules-actions">
-              <button type="button" className="button" onClick={() => setRules(null)} autoFocus>
-                Cancel
-              </button>
-              <button type="button" className="button primary" disabled={busy} onClick={accept}>
-                Agree and continue
-              </button>
+        <Modal title={name} icon="gavel" className="membership-rules" onClose={() => setRules(null)}>
+          <div className="membership-body">
+            <div className="membership-card">
+              {icon ? <img className="membership-card-icon" src={icon} alt="" /> : <Icon name="groups" size={40} />}
+              <div className="membership-card-name">{name}</div>
+              {(guild?.approximate_presence_count || guild?.approximate_member_count) && (
+                <div className="small muted">
+                  {guild.approximate_presence_count ? `${guild.approximate_presence_count.toLocaleString()} online` : ''}
+                  {guild.approximate_presence_count && guild.approximate_member_count ? ' · ' : ''}
+                  {guild.approximate_member_count ? `${guild.approximate_member_count.toLocaleString()} members` : ''}
+                </div>
+              )}
             </div>
+
+            <div className="membership-form">
+              <h2 className="membership-title">Before you can talk here…</h2>
+              <p className="small muted">You&apos;ll need to complete the required steps below.</p>
+              {rules.description && <p className="small">{rules.description}</p>}
+
+              {fields.length === 0 && (
+                <p className="small muted">This server asks new members to agree to its rules before talking.</p>
+              )}
+
+              {fields.map((field, i) => (
+                <div key={i} className="membership-field">
+                  {field.field_type === 'TERMS' ? (
+                    <>
+                      <div className="membership-field-label">{field.label || 'Agree to rules'}</div>
+                      {field.description && <p className="small muted">{field.description}</p>}
+                      {!!field.values?.length && (
+                        <ol className="membership-rules-list">
+                          {field.values.map((rule, k) => (
+                            <li key={k}>{rule}</li>
+                          ))}
+                        </ol>
+                      )}
+                      <label className="membership-agree">
+                        <input type="checkbox" checked={answers[i] === true} onChange={(e) => answer(i, e.target.checked)} />
+                        I have read and agree to the rules
+                      </label>
+                    </>
+                  ) : field.field_type === 'MULTIPLE_CHOICE' ? (
+                    <>
+                      <div className="membership-field-label">
+                        {field.label}
+                        {field.required && <span className="muted"> *</span>}
+                      </div>
+                      {field.description && <p className="small muted">{field.description}</p>}
+                      {(field.values ?? []).map((choice, k) => (
+                        <label key={k} className="membership-agree">
+                          <input type="radio" name={`membership-${i}`} checked={answers[i] === k} onChange={() => answer(i, k)} />
+                          {choice}
+                        </label>
+                      ))}
+                    </>
+                  ) : (
+                    <label className="field">
+                      <span className="membership-field-label">
+                        {field.label}
+                        {field.required && <span className="muted"> *</span>}
+                      </span>
+                      {field.description && <span className="small muted">{field.description}</span>}
+                      {field.field_type === 'PARAGRAPH' ? (
+                        <textarea
+                          className="text-field"
+                          rows={4}
+                          placeholder={field.placeholder ?? ''}
+                          value={typeof answers[i] === 'string' ? (answers[i] as string) : ''}
+                          onChange={(e) => answer(i, e.target.value)}
+                        />
+                      ) : (
+                        <input
+                          className="text-field"
+                          placeholder={field.placeholder ?? ''}
+                          value={typeof answers[i] === 'string' ? (answers[i] as string) : ''}
+                          onChange={(e) => answer(i, e.target.value)}
+                        />
+                      )}
+                    </label>
+                  )}
+                </div>
+              ))}
+
+              <div className="membership-rules-actions">
+                <button type="button" className="button" onClick={() => setRules(null)}>
+                  Cancel
+                </button>
+                <button type="button" className="button primary" disabled={busy || !ready} onClick={accept}>
+                  Submit
+                </button>
+              </div>
+            </div>
+          </div>
         </Modal>
       )}
     </>

src/renderer/src/components/MessageList.tsx

@@ -12,6 +12,7 @@ import { RouteAccount, useStrictRoute } from '../lib/route'
 import { useChat, usePref, useStore } from '../state/hooks'
 import { bufferDisplayName, dayLabel, isChatKind, startsNewDay } from '../lib/util'
 import type { ChannelIndex } from '../lib/format'
+import { applyRemoved, type RemovedMessages } from '../lib/moderation'
 import type { ChatMessage } from '../state/store'
 
 /**
@@ -234,6 +235,8 @@ export function MessageList(): JSX.Element {
   const [showPolls] = usePref<boolean>('kick.showPolls', true)
   const [showStream] = usePref<boolean>('kick.showStreamEvents', true)
   const [showKickMod] = usePref<boolean>('kick.showModeration', true)
+  // What Kick took down: left out, struck through, or replaced by a notice.
+  const [removedMode] = usePref<RemovedMessages>('kick.removedMessages', 'strike')
   const [showReaders] = usePref<boolean>('matrix.showReadReceipts', true)
   const [blockedNicks] = usePref<string[]>('blockedNicks', [])
   const readers = useChat((s) => s.readersByBuffer)[bufferId]
@@ -253,13 +256,16 @@ export function MessageList(): JSX.Element {
    * whose replies are older than the loaded window, which is the honest
    * failure - it says "at least this many", never "none" for a live one.
    */
+  const told = useChat((s) => (bufferId ? s.threadCounts[bufferId] : undefined))
   const threadReplies = useMemo(() => {
-    const counts: Record<string, number> = {}
+    // What the service says wins where it says: a Telegram channel's comments are in another chat altogether.
+    const counts: Record<string, number> = { ...(told ?? {}) }
     for (const m of all) {
-      if (m.replyTo?.thread) counts[m.replyTo.id] = (counts[m.replyTo.id] ?? 0) + 1
+      const root = m.replyTo?.thread ? m.replyTo.id : m.replyTo?.threadRoot
+      if (root && !(told && root in told)) counts[root] = (counts[root] ?? 0) + 1
     }
     return counts
-  }, [all])
+  }, [all, told])
 
   const messages = useMemo(() => {
     const allowed: Record<string, boolean> = {
@@ -279,14 +285,17 @@ export function MessageList(): JSX.Element {
       stream: showStream,
       moderation: showKickMod
     }
-    return all.filter((m) => {
-      if (accountId && blockedNicks.includes(`${accountId}|${m.from}`)) return false
-      const kind = m.kind || 'chat'
-      if (isChatKind(kind) || kind === 'system') return true
-      return allowed[kind] !== false
-    })
+    return applyRemoved(
+      all.filter((m) => {
+        if (accountId && blockedNicks.includes(`${accountId}|${m.from}`)) return false
+        const kind = m.kind || 'chat'
+        if (isChatKind(kind) || kind === 'system') return true
+        return allowed[kind] !== false
+      }),
+      removedMode
+    )
   }, [
-    all, accountId, blockedNicks,
+    all, accountId, blockedNicks, removedMode,
     showJoin, showPart, showNick, showTopic, showMode,
     showMxJoin, showMxInvite, showMxKick, showMxQuit,
     showRedemptions, showSubs, showRaids, showPolls, showStream, showKickMod

src/renderer/src/components/MessageRow.tsx

@@ -8,12 +8,16 @@ import { EventSource } from './EventSource'
 import { ForwardPicker } from './ForwardPicker'
 import { ContextMenu, useContextMenu, type MenuEntry } from './ContextMenu'
 import { MediaEmbed } from './MediaEmbed'
-import { KickEventCard, isKickEvent } from './KickEventCard'
+import { LinkCard } from './LinkCard'
+import { isPlainEmoji } from '../lib/recents'
+import { KickEventCard, NotificationCard, isKickEvent } from './KickEventCard'
 import { COMMON_EMOJI, EmojiPicker, readRecent, type StickerEntry } from './EmojiPicker'
 import { reactionLabel, reactorsSentence } from '../lib/reactions'
 import { UploadMeter } from './UploadMeter'
 import { RichText } from '../lib/richtext'
+import { ReplyBody } from './ReplyBody'
 import { useChat, usePref, useStore } from '../state/hooks'
+import { DEFAULT_SEARCH_ENGINE, engineName, searchUrl, shortened } from '../lib/searchengines'
 import { useTick } from '../lib/clock'
 import { useSniffedTypes, sniffUrl } from '../lib/sniff'
 import { useMediaUrl, useStrictRoute } from '../lib/route'
@@ -36,6 +40,7 @@ import {
   formatMessage,
   normalizeBBCode,
   clearnetLinks,
+  sneedGreentext,
   thumbnailLinks,
   youtubeId,
   stripCodeBlocks,
@@ -58,9 +63,11 @@ import {
   isWarning,
   isReward,
   isWhisper,
-  nickColor
+  nickColor,
+  readableColor
 } from '../lib/util'
 import { useEscapeLayer } from '../lib/layers'
+import { removedReason } from '../lib/moderation'
 
 /**
  * A badge, short enough to sit beside a name.
@@ -71,6 +78,11 @@ import { useEscapeLayer } from '../lib/layers'
  * being dropped - an unfamiliar badge still says the person has one.
  */
 function badgeLabel(badge: MessageBadge): string {
+  return ROLE_WORDS[badge.type] ?? badge.text.slice(0, 3).toUpperCase()
+}
+
+/** The words that stand for the roles worth looking for in a name's badges. */
+const ROLE_WORDS: Record<string, string> = ((): Record<string, string> => {
   const short: Record<string, string> = {
     broadcaster: 'HOST',
     moderator: 'MOD',
@@ -84,10 +96,22 @@ function badgeLabel(badge: MessageBadge): string {
     // Not a title like the rest of these - a warning that whoever sent this
     // was using a device nobody has vouched for. Without its own short form
     // the fallback below would abbreviate the explanation into "SEN".
-    unverified: '⚠'
+    unverified: '⚠',
+    // Twitch's: somebody's first message in a channel, and a message mirrored
+    // from another channel of a shared chat.
+    'first-message': 'NEW',
+    'shared-chat': 'SHARED',
+    // A cheer: bits sent with the message.
+    cheer: 'BITS',
+    // Discord's mark on a bot or application, and on one Discord has verified.
+    app: 'APP',
+    // What Discord's own account sends, so a message that claims to be from Discord can be told from one that is.
+    official: '✓ OFFICIAL',
+    'verified-app': '✓ APP',
+    lead_moderator: 'MOD'
   }
-  return short[badge.type] ?? badge.text.slice(0, 3).toUpperCase()
-}
+  return short
+})()
 
 /** A handful of one-click reactions on the hover toolbar. */
 /** What a line that is not speech is marked with, by the daemon's word for it. */
@@ -109,7 +133,9 @@ const DEFAULT_REACTIONS = ['👍', '❤️', '😂', '🔥']
  * belongs to a server and may not be sendable from wherever the toolbar is.
  */
 function quickReactions(accountId?: string): string[] {
-  const recent = readRecent(accountId).filter((e) => !e.startsWith('<') && !e.startsWith(':'))
+  // Only ordinary emoji: anything with letters or digits in it is a stand-in for one (a custom emoji's token, or the
+  // bare number older builds stored for one), and is not a picture.
+  const recent = readRecent(accountId).filter(isPlainEmoji)
   return [...new Set([...recent, ...DEFAULT_REACTIONS])].slice(0, 4)
 }
 
@@ -350,7 +376,16 @@ function MessageRowBody({
   // preview. The object itself, so the row only re-renders when that one
   // message changes.
   const replyId = message.replyTo && !message.replyTo.thread && !message.replyTo.forwarded ? message.replyTo.id : ''
+  // The thread open beside the room, if any: a reply to its first message has
+  // nothing to say that the panel's own heading does not.
+  const openRoot = useChat((s) => s.openThread?.rootId)
+  const [showBadgePictures] = usePref<boolean>('kick.showBadgePictures', true)
+  const twitchModerator = useChat((s) => s.twitchRights[bufferId] === true)
+  const twitchBlocker = useChat((s) => s.accounts.find((a) => bufferId.startsWith(`${a.id}|`))?.moderation === true)
   const original = useChat((s) => (replyId ? s.messagesByBuffer[bufferId]?.find((m) => m.id === replyId) : undefined))
+  // What a reply quotes. Twitch sends the parent's words as plain text, with no word of which are emotes; where the
+  // original is on screen it has them, as it was drawn, so that is what is quoted.
+  const quoted = service === 'twitch' && original?.body ? original.body : message.replyTo?.body ?? ''
   // Which message is open for editing is the window's, not each row's, so
   // Up arrow in the message box can open the last one.
   const editing = useChat((s) => s.editingId === message.id)
@@ -388,8 +423,12 @@ function MessageRowBody({
   // Discord, Sneedchat and Matrix support editing and deleting your own
   // messages; IRC has no such concept.
   const canEditDelete =
-    !!message.isOwn && (service === 'discord' || service === 'sneedchat' || service === 'matrix')
-  const canReact = service === 'discord' || service === 'matrix' || service === 'steam'
+    !!message.isOwn && (service === 'discord' || service === 'sneedchat' || service === 'matrix' || service === 'telegram')
+  const beginEdit = (): void => {
+    setDraft(message.body)
+    setEditing(true)
+  }
+  const canReact = service === 'discord' || service === 'matrix' || service === 'steam' || service === 'telegram'
   // Steam's stickers, asked for when the reaction picker opens: it reacts with them too.
   const [steamStickers, setSteamStickers] = useState<StickerEntry[]>([])
   useEffect(() => {
@@ -424,6 +463,9 @@ function MessageRowBody({
   // KICKs sent, or subscriptions gifted: the daemon says which and to whom in
   // a card, and the line of text is what a copy or a search finds.
   const kickEvent = (message.embeds ?? []).find(isKickEvent)
+  // Any other line the service wrote rather than somebody saying it - a join, a topic, a notice - is drawn as the
+  // same card the events are, whatever protocol it came from (see ARCHITECTURE.md, "Notifications are cards").
+  const systemCard = isSystem && !kickEvent && !!message.body
   // Both of the modes that draw an avatar column. Bubbles is otherwise
   // nothing like comfy, but it wants the same picture beside the same first
   // line of a group.
@@ -471,7 +513,8 @@ function MessageRowBody({
     // because it is about what this reader's browser can reach, and it has to
     // hold for an edited line and for backlog alike - both of which arrive at
     // this function again and neither of which is re-stored.
-    const raw = clearnetLinks(message.body || '')
+    // Sneedchat's own greentext is put back to the plain ">" first, so it is one thing however it arrived.
+    const raw = isSneedchat ? sneedGreentext(clearnetLinks(message.body || '')) : clearnetLinks(message.body || '')
     const normalized = normalizeBBCode(raw)
     const media = markSpoilered(extractMedia(normalized, {
       contentSniffing,
@@ -482,7 +525,8 @@ function MessageRowBody({
       thumbnails: thumbnailLinks(raw)
     }), normalized)
     const codeBlocks = extractCodeBlocks(normalized)
-    const quoteBlocks = extractQuoteBlocks(stripCodeBlocks(normalized))
+    // Not on Sneedchat, where a line starting with ">" is greentext and stays in the line it is in.
+    const quoteBlocks = isSneedchat ? [] : extractQuoteBlocks(stripCodeBlocks(normalized))
 
     // The page a GIF was linked from is not shown as well as the GIF: it is the
     // same thing said twice, and is how a posted GIF read as an address.
@@ -491,7 +535,7 @@ function MessageRowBody({
       .map((e) => ({ url: e.url!, kind: 'image' as const }))
     let body = stripEmbeddedUrls(normalized, [...media, ...gifPages])
     body = stripCodeBlocks(body)
-    body = stripQuoteBlocks(body)
+    if (!isSneedchat) body = stripQuoteBlocks(body)
 
     return {
       // A sender's own formatting, where the protocol carried any: Matrix
@@ -510,6 +554,7 @@ function MessageRowBody({
           isSneedchat,
           smilies: smilieIndex,
           channels,
+          markdownEscapes: service === 'discord',
           // Only IRC's own traffic is drawn with IRC's codes. Elsewhere they
           // are stripped, which is what the formatter does when not told.
           ircFormatting: service === 'irc' && ircColours ? 'render' : 'strip'
@@ -527,6 +572,12 @@ function MessageRowBody({
   // have let go of the selection.
   const selectedRef = useRef('')
   const selected = selectedRef.current
+  const [searchEngine] = usePref<string>('search.engine', DEFAULT_SEARCH_ENGINE)
+  const [searchCustom] = usePref<string>('search.customUrl', '')
+  const searchAddress = selected ? searchUrl(selected, searchEngine, searchCustom) : null
+  const search = searchAddress
+    ? { url: searchAddress, name: engineName(searchEngine, searchCustom), shown: shortened(selected) }
+    : null
   const canOpenProfile = !!message.from && !isSystem && !message.isOwn
   const openProfile = (): void => store.showProfile(bufferId, message.from, message.senderId)
   // Back to what this answers, bringing it into view first if it is a long
@@ -578,6 +629,12 @@ function MessageRowBody({
     ...(selected
       ? ([{ label: 'Copy', icon: 'content_copy', onClick: () => void window.moho.copyText(selected) }] as MenuEntry[])
       : []),
+    // Looking up what is selected: in the browser the person already uses, with
+    // the engine they chose in Settings. Only for a selection - there is no
+    // sensible thing to search for in a whole message.
+    ...(search
+      ? ([{ label: `Search ${search.name} for “${search.shown}”`, icon: 'search', onClick: () => void window.moho.openExternal(search.url) }] as MenuEntry[])
+      : []),
     ...(message.body && !isSystem
       ? ([{ label: 'Copy text', icon: 'content_copy', onClick: () => void window.moho.copyText(message.body) }] as MenuEntry[])
       : []),
@@ -615,7 +672,7 @@ function MessageRowBody({
     // rather than gated on a power level read here: the server decides, and
     // it refuses in words worth showing - hiding the action from somebody who
     // could have used it is the worse mistake.
-    ...((service === 'matrix' || service === 'discord') && !isSystem
+    ...((service === 'matrix' || service === 'discord' || service === 'telegram') && !isSystem
       ? ([
           {
             label: pinned ? 'Unpin from this conversation' : 'Pin to this conversation',
@@ -686,6 +743,19 @@ function MessageRowBody({
       ? ([{ separator: true } as MenuEntry] as MenuEntry[])
       : []),
     ...moderationEntries(message, permissions, bufferId, store),
+    // Twitch's own block list, for whoever turned those rights on: server side, so it holds in every
+    // app and channel, which the window's own Ignore does not.
+    ...(twitchBlocker && service === 'twitch' && !message.isOwn && !isSystem && message.from
+      ? ([
+          { label: `Block ${message.from} on Twitch`, icon: 'block', danger: true, onClick: () => twitchAct(store, bufferId, message, 'block', {}, `${message.from} is blocked`) },
+          { label: `Unblock ${message.from}`, icon: 'check_circle', onClick: () => twitchAct(store, bufferId, message, 'unblock', {}, `${message.from} is unblocked`) }
+        ] as MenuEntry[])
+      : []),
+    // A Twitch moderator's: only where Twitch said this account is one for the channel, and not for their
+    // own lines. Timing out is by the sender's login; removing a message is by its id.
+    ...(twitchModerator && service === 'twitch' && !message.isOwn && !isSystem && message.from
+      ? twitchModerationEntries(message, bufferId, store)
+      : []),
     // Telling whoever runs the homeserver. Beside the moderation entries and
     // deliberately not gated like them: those need power in the room and this
     // needs none, which is the point of it - it is the answer available to
@@ -804,6 +874,36 @@ function MessageRowBody({
     return { claimed, loose: parts.media.filter((m) => !taken.has(m.url)) }
   }, [message.embeds, parts.media])
 
+  /** The words of the line itself: its text with its links, emoji and marks. */
+  const renderBody = (): React.ReactNode =>
+    parts.html && (
+      <span className="message-body selectable" title={message.moderated && !message.moderated.replaced ? removedReason(message) : undefined}>
+        <RichText
+          html={parts.html}
+          // Ours unless the sender sent their own formatting, which
+          // is the one case where a picture it names is a stranger's
+          // server being told this message was read.
+          ownMarkup={!message.html}
+          onRevealSpoiler={(i) => setRevealed((r) => ({ ...r, [i]: true }))}
+          // Following a channel link moves the rail too: the channel
+          // is usually in the same guild, but a cross-guild link is
+          // exactly the case where landing on a list that isn't
+          // showing it would be baffling.
+          onOpenChannel={(id) => void store.selectBuffer(id, true)}
+          onOpenLink={(url) => store.followDeepLink(url)}
+        />
+        {message.edited && (
+          <span
+            className="edited-tag small muted"
+            title={message.editedTs ? `Edited ${formatFullTime(message.editedTs)}` : 'Edited'}
+          >
+            {' '}
+            (edited)
+          </span>
+        )}
+      </span>
+    )
+
   return (
     <>
       <div
@@ -815,9 +915,10 @@ function MessageRowBody({
           isWarning(message.kind, message.id) && 'warning',
           message.pending && 'pending',
           message.failed && 'failed',
+          message.moderated && (message.moderated.replaced ? 'removed replaced' : 'removed'),
           isSystem && 'system',
           reward && 'reward',
-          kickEvent && 'has-kick-event',
+          (kickEvent || systemCard) && 'has-kick-event',
           grouped && 'grouped',
           fresh && 'fresh',
           comfy && 'comfy',
@@ -860,7 +961,7 @@ function MessageRowBody({
         {/* A join, a part, a topic change: not somebody speaking, so no face -
             but a small mark in the picture's own column, so the line's text
             starts where every other line's does instead of at the edge. */}
-        {mode === 'comfy' && isSystem && !kickEvent && (
+        {mode === 'comfy' && isSystem && !kickEvent && !systemCard && (
           <span className="message-avatar system-mark" aria-hidden>
             <Icon name={SYSTEM_MARKS[message.kind] ?? 'info'} size={16} />
           </span>
@@ -914,13 +1015,38 @@ function MessageRowBody({
             <span className="message-byline">
               <span
                 className={classes('message-from', canOpenProfile && 'clickable')}
-                style={{ color: message.senderColor || nickColor(message.from) }}
+                style={{ color: message.senderColor ? readableColor(message.senderColor) : nickColor(message.from) }}
                 onClick={canOpenProfile ? openProfile : undefined}
                 role={canOpenProfile ? 'button' : undefined}
                 title={canOpenProfile ? `Profile of ${message.from}` : undefined}
               >
                 {message.isAction ? `* ${message.from}` : message.from}
               </span>
+              {/* Beside the name, ahead of the time: a mark on who is talking, as Discord puts its APP pill. */}
+              {message.badges?.map((badge) =>
+                badge.image && showBadgePictures ? (
+                  // The service's own pictures, unless they are turned off. The tooltip
+                  // and the alt text say what it is for anybody who cannot see it.
+                  <img
+                    key={badge.type}
+                    className="sender-badge-image"
+                    src={media(badge.image)}
+                    alt={badge.text}
+                    title={badge.count ? `${badge.text} — ${badge.count} months` : badge.text}
+                    loading="lazy"
+                    draggable={false}
+                  />
+                ) : // Turned off, a badge that has a word for it is that word and one that has none is nothing.
+                badge.image && !(badge.type in ROLE_WORDS) ? null : (
+                  <span
+                    key={badge.type}
+                    className={`sender-badge small ${badge.type}`}
+                    title={badge.count ? `${badge.text} — ${badge.count} months` : badge.text}
+                  >
+                    {badgeLabel(badge)}
+                  </span>
+                )
+              )}
               {/* The time on the name's own line, as Discord does it, in the
                   full form the tooltip also carries. */}
               {mode === 'comfy' && (
@@ -928,15 +1054,6 @@ function MessageRowBody({
                   {timeLabel}
                 </span>
               )}
-              {message.badges?.map((badge) => (
-                <span
-                  key={badge.type}
-                  className={`sender-badge small ${badge.type}`}
-                  title={badge.count ? `${badge.text} — ${badge.count} months` : badge.text}
-                >
-                  {badgeLabel(badge)}
-                </span>
-              ))}
             </span>
           )}
 
@@ -977,6 +1094,7 @@ function MessageRowBody({
               the panel's title already says. */}
           {message.replyTo &&
             !(inThread && message.replyTo.thread) &&
+            !(inThread && message.replyTo.id === openRoot) &&
             (message.replyTo.thread && !inThread ? (
               <button
                 type="button"
@@ -985,8 +1103,79 @@ function MessageRowBody({
               >
                 <Icon name="forum" size={13} />
                 <span>In thread</span>
-                {message.replyTo.body && <span className="ellipsis">{message.replyTo.body}</span>}
+                {message.replyTo.body && (
+                  <span className="ellipsis">
+                    <ReplyBody text={message.replyTo.body} service={service} channels={channels} />
+                  </span>
+                )}
               </button>
+            ) : service === 'telegram' && message.replyTo.forwarded ? (
+              // Where a forwarded message came from, as Telegram says it: "Forwarded from" and the source, which is
+              // somewhere to go when it was a post in a channel this account has open.
+              (() => {
+                const source = message.replyTo
+                const open = source.chat && source.id
+                return (
+                  <div className="tg-forward small">
+                    <span className="muted">Forwarded from </span>
+                    {open ? (
+                      <button
+                        type="button"
+                        className="tg-forward-source link-button"
+                        title="Go to the original"
+                        onClick={() =>
+                          void store.selectBuffer(source.chat!, true).then(() =>
+                            store.jumpToMessage(source.chat!, source.id).then((found) => {
+                              if (found) store.setJumpTarget(source.id)
+                            })
+                          )
+                        }
+                      >
+                        <Icon name="campaign" size={13} />
+                        {source.from}
+                      </button>
+                    ) : (
+                      <span className="tg-forward-source">{source.from}</span>
+                    )}
+                  </div>
+                )
+              })()
+            ) : service === 'telegram' && !message.replyTo.forwarded ? (
+              // As Telegram draws an answer: an accent bar, who said it (and where, when it was another channel), what
+              // they said, and the quote mark. Going to it is a click, to the other channel if that is where it is.
+              <div
+                className="tg-quote selectable"
+                role="button"
+                tabIndex={0}
+                title={message.replyTo.chat ? 'Go to the original' : 'Go to the message'}
+                onClick={() => {
+                  const target = message.replyTo!
+                  if (target.chat) {
+                    void store.selectBuffer(target.chat, true).then(() =>
+                      store.jumpToMessage(target.chat!, target.id).then((found) => {
+                        if (found) store.setJumpTarget(target.id)
+                      })
+                    )
+                  } else jumpToReply()
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    ;(e.currentTarget as HTMLElement).click()
+                  }
+                }}
+              >
+                <div className="tg-quote-from">
+                  {message.replyTo.chat && <Icon name="campaign" size={13} />}
+                  {message.replyTo.from || 'Message'}
+                </div>
+                {message.replyTo.body && (
+                  <div className="tg-quote-body">
+                    <ReplyBody text={message.replyTo.body} service={service} channels={channels} />
+                  </div>
+                )}
+                <Icon name="format_quote" size={16} className="tg-quote-mark" />
+              </div>
             ) : (
               <div
                 className={classes('reply-preview small muted', replyId && 'reply-jump')}
@@ -1018,12 +1207,29 @@ function MessageRowBody({
                   style={
                     message.replyTo.forwarded
                       ? undefined
-                      : { color: original?.senderColor || nickColor(message.replyTo.from) }
+                      : { color: original?.senderColor ? readableColor(original.senderColor) : nickColor(message.replyTo.from) }
                   }
                 >
                   {message.replyTo.from}
                 </span>
-                <span className="ellipsis">{message.replyTo.body}</span>
+                <span className="ellipsis">
+                  <ReplyBody text={quoted} service={service} channels={channels} />
+                </span>
+                {/* Kick groups a chain of replies under the message it began
+                    with; a reply is a way into that conversation. */}
+                {!inThread && message.replyTo.threadRoot && (
+                  <button
+                    type="button"
+                    className="reply-thread-open small"
+                    title="Open the thread"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      void store.openThreadPanel(bufferId, message.replyTo!.threadRoot!)
+                    }}
+                  >
+                    <Icon name="forum" size={13} />
+                  </button>
+                )}
               </div>
             ))}
 
@@ -1091,35 +1297,13 @@ function MessageRowBody({
               )}
             </div>
           ) : kickEvent ? (
-            <KickEventCard embed={kickEvent} />
+            <KickEventCard embed={kickEvent} bufferId={bufferId} />
+          ) : systemCard ? (
+            <NotificationCard icon={SYSTEM_MARKS[message.kind] ?? 'info'} warning={isWarning(message.kind, message.id)}>
+              {renderBody()}
+            </NotificationCard>
           ) : (
-            parts.html && (
-              <span className="message-body selectable">
-                <RichText
-                  html={parts.html}
-                  // Ours unless the sender sent their own formatting, which
-                  // is the one case where a picture it names is a stranger's
-                  // server being told this message was read.
-                  ownMarkup={!message.html}
-                  onRevealSpoiler={(i) => setRevealed((r) => ({ ...r, [i]: true }))}
-                  // Following a channel link moves the rail too: the channel
-                  // is usually in the same guild, but a cross-guild link is
-                  // exactly the case where landing on a list that isn't
-                  // showing it would be baffling.
-                  onOpenChannel={(id) => void store.selectBuffer(id, true)}
-                  onOpenLink={(url) => store.followDeepLink(url)}
-                />
-                {message.edited && (
-                  <span
-                    className="edited-tag small muted"
-                    title={message.editedTs ? `Edited ${formatFullTime(message.editedTs)}` : 'Edited'}
-                  >
-                    {' '}
-                    (edited)
-                  </span>
-                )}
-              </span>
-            )
+            renderBody()
           )}
 
           {parts.quoteBlocks.map((quote, i) => (
@@ -1135,7 +1319,9 @@ function MessageRowBody({
           ))}
 
           {(message.embeds || []).map((embed, i) =>
-            embed.kind === 'gif' || isKickEvent(embed) ? null : (
+            embed.kind === 'gif' || isKickEvent(embed) ? null : service === 'telegram' ? (
+              <LinkCard key={`e${i}`} embed={embed} bufferId={bufferId} messageId={message.id} />
+            ) : (
             <div
               key={`e${i}`}
               className={classes('rich-embed selectable', embed.kind === 'notice' && 'notice')}
@@ -1172,7 +1358,7 @@ function MessageRowBody({
               {embed.description && (
                 <div className="rich-embed-desc small">
                   <RichText
-                    html={formatMessage(embed.description, { channels })}
+                    html={formatMessage(embed.description, { channels, markdownEscapes: service === 'discord' })}
                     ownMarkup
                     onOpenChannel={(id) => void store.selectBuffer(id, true)}
                   onOpenLink={(url) => store.followDeepLink(url)}
@@ -1184,7 +1370,17 @@ function MessageRowBody({
                   {embed.fields.map((f, k) => (
                     <div key={k} className="rich-embed-field">
                       <div className="rich-embed-field-name">{f.name}</div>
-                      <div>{f.value}</div>
+                      {/* Markdown on Discord, like the description above; plain text elsewhere. */}
+                      {service === 'discord' ? (
+                        <RichText
+                          html={formatMessage(f.value, { channels, markdownEscapes: true })}
+                          ownMarkup
+                          onOpenChannel={(id) => void store.selectBuffer(id, true)}
+                          onOpenLink={(url) => store.followDeepLink(url)}
+                        />
+                      ) : (
+                        <div>{f.value}</div>
+                      )}
                     </div>
                   ))}
                 </div>
@@ -1250,6 +1446,7 @@ function MessageRowBody({
                   onOpenInDiscord={(b, m) => void store.openInDiscord(b, m)}
                   onRefresh={(b, m) => store.refreshAttachments(b, m)}
                   onStale={(b, m) => store.resignWhenIdle(b, m)}
+                  onEdit={canEditDelete ? beginEdit : undefined}
                 />
               ))}
             </div>
@@ -1271,6 +1468,7 @@ function MessageRowBody({
                   onOpenInDiscord={(b, m) => void store.openInDiscord(b, m)}
                   onRefresh={(b, m) => store.refreshAttachments(b, m)}
                   onStale={(b, m) => store.resignWhenIdle(b, m)}
+                  onEdit={canEditDelete ? beginEdit : undefined}
                 />
               ))}
               {/* Links someone typed, unfurled from the body. Still needed
@@ -1617,6 +1815,42 @@ function ReactionEmoji({ emoji }: { emoji: string }): JSX.Element {
   return <img className="reaction-emoji" src={media(discordEmojiUrl(custom[2]))} alt={custom[1]} />
 }
 
+function twitchAct(
+  store: ReturnType<typeof useStore>,
+  bufferId: string,
+  message: ChatMessage,
+  action: string,
+  extra: Record<string, unknown> = {},
+  done?: string
+): void {
+  void window.moho
+    .rpc('twitchModerate', { bufferId, action, login: message.from.toLowerCase(), userId: message.senderId, ...extra })
+    .then(() => done && store.toast('info', done))
+    .catch((e: Error) => store.toast('error', e.message))
+}
+
+function twitchModerationEntries(message: ChatMessage, bufferId: string, store: ReturnType<typeof useStore>): MenuEntry[] {
+  const act = (action: string, extra: Record<string, unknown> = {}, done?: string): void => twitchAct(store, bufferId, message, action, extra, done)
+  const timeout = (label: string, seconds: number): MenuEntry => ({
+    label: `Time out ${label}`,
+    icon: 'timer',
+    onClick: () => act('timeout', { seconds }, `${message.from} timed out for ${label}`)
+  })
+  return [
+    { separator: true },
+    ...(message.id
+      ? ([{ label: 'Remove message', icon: 'delete', danger: true, onClick: () => act('delete', { messageId: message.id }) }] as MenuEntry[])
+      : []),
+    timeout('1 minute', 60),
+    timeout('10 minutes', 600),
+    timeout('1 hour', 3600),
+    timeout('1 day', 86400),
+    { label: `Shout out ${message.from}`, icon: 'campaign', onClick: () => act('shoutout', {}, `Shouted out ${message.from}`) },
+    { label: `Ban ${message.from}`, icon: 'gavel', danger: true, onClick: () => act('ban', {}, `${message.from} banned`) },
+    { label: `Unban ${message.from}`, icon: 'lock_open', onClick: () => act('unban', {}, `${message.from} can chat again`) }
+  ] as MenuEntry[]
+}
+
 function moderationEntries(
   message: ChatMessage,
   permissions: { canKick?: boolean; canBan?: boolean; canMute?: boolean },
@@ -1627,12 +1861,15 @@ function moderationEntries(
   // display names collide and can be changed at will.
   const userId = message.senderId
   if (!userId) return []
+  const telegram = store.accountFor(bufferId)?.service === 'telegram'
   const call = (method: string): void => {
     const account = store.accountFor(bufferId)
     if (!account) return
-    void window.moho
-      .rpc(method, { accountId: account.id, bufferId, userId })
-      .catch((e: Error) => store.toast('error', e.message))
+    // Telegram's three are one call that names which.
+    const asked = telegram
+      ? window.moho.rpc('moderateTelegramMember', { bufferId, userId, action: method.replace('MatrixMember', '') })
+      : window.moho.rpc(method, { accountId: account.id, bufferId, userId })
+    void asked.catch((e: Error) => store.toast('error', e.message))
   }
   const out: MenuEntry[] = []
   if (permissions.canMute)
@@ -1643,7 +1880,7 @@ function moderationEntries(
     out.push({ label: 'Ban sender', icon: 'gavel', danger: true, onClick: () => call('banMatrixMember') })
     // Reachable only from here, not the member list: a banned user is no
     // longer a member, so their scrollback is the one place left to find them.
-    out.push({ label: 'Unban sender', icon: 'lock_open', onClick: () => call('unbanMatrixMember') })
+    if (!telegram) out.push({ label: 'Unban sender', icon: 'lock_open', onClick: () => call('unbanMatrixMember') })
   }
   return out
 }

src/renderer/src/components/NickList.tsx

@@ -6,6 +6,7 @@ import { Icon, IconButton } from './Icon'
 import { ContextMenu, useContextMenu, type MenuEntry } from './ContextMenu'
 import { useActiveBuffer, useChat, useComfy, useIdSetPref, useStore } from '../state/hooks'
 import { classes, hasDirectMessages, nickColor } from '../lib/util'
+import { TwitchPoints } from './TwitchPoints'
 import { KickPoints } from './KickPoints'
 import { ReasonPrompt } from './ReasonPrompt'
 import type { Member } from '../../../shared/wire'
@@ -88,10 +89,10 @@ function kickPermissions(members: Member[], me: string): Record<string, boolean>
 /**
  * Why the list says what it says, for the one service where it needs saying.
  */
-function rosterNote(service: string | undefined): string | undefined {
-  return service === 'kick'
-    ? 'Kick has no viewer list — this is everybody who has spoken here recently'
-    : undefined
+function rosterNote(service: string | undefined, total: number, listed: number): string | undefined {
+  if (service !== 'kick' && service !== 'twitch') return undefined
+  const base = `${service === 'twitch' ? 'Twitch' : 'Kick'} has no viewer list — this counts everybody who has spoken here since you opened it`
+  return total > listed ? `${base}. The ${listed.toLocaleString()} most recent are listed.` : base
 }
 
 /**
@@ -140,6 +141,7 @@ export function NickList(): JSX.Element {
   const [query, setQuery] = useState('')
 
   const members = (buffer && presenceByBuffer[buffer.id]) || []
+  const total = useChat((s) => (buffer ? s.presenceTotalByBuffer[buffer.id] : undefined)) ?? members.length
   const account = buffer && accounts.find((a) => a.id === buffer.accountId)
   // Any protocol that reports presence gets the online/offline split.
   const hasPresence = members.some((m) => m.status !== undefined)
@@ -263,8 +265,8 @@ export function NickList(): JSX.Element {
           // Named for what the list actually is. Kick has no viewer list to
           // ask for - it is built from who has spoken - and calling that
           // "members" would claim to know something nobody here can know.
-          <span className="small muted ellipsis" title={rosterNote(account?.service)}>
-            {members.length} {account?.service === 'kick' ? 'recently talking' : 'members'}
+          <span className="small muted ellipsis" title={rosterNote(account?.service, total, members.length)}>
+            {total.toLocaleString()} {account?.service === 'kick' || account?.service === 'twitch' ? 'recently talking' : 'members'}
           </span>
         )}
         <IconButton
@@ -379,6 +381,14 @@ export function NickList(): JSX.Element {
                       .catch((e: Error) => store.toast('error', e.message))
                     return
                   }
+                  if (account.service === 'telegram') {
+                    if (action !== 'kick' && action !== 'ban' && action !== 'mute') return
+                    void window.moho
+                      .rpc('moderateTelegramMember', { bufferId: buffer.id, userId: member.userId, action })
+                      .then(() => store.toast('info', `${action === 'ban' ? 'Banned' : action === 'mute' ? 'Muted for 10 minutes' : 'Removed'} ${member.nick}`))
+                      .catch((e: Error) => store.toast('error', e.message))
+                    return
+                  }
                   if (account.service === 'steam') {
                     const group = steamRoomIds(buffer)?.group
                     if (!group || !member.userId || (action !== 'kick' && action !== 'ban' && action !== 'mute')) return
@@ -478,6 +488,10 @@ export function NickList(): JSX.Element {
       {account?.service === 'kick' && buffer?.kind === 'channel' && buffer && (
         <KickPoints bufferId={buffer.id} />
       )}
+      {/* Twitch's, for an account that has the twitch.tv session that can see them. */}
+      {account?.service === 'twitch' && account.webSession && buffer?.kind === 'channel' && buffer && (
+        <TwitchPoints bufferId={buffer.id} />
+      )}
     </div>
   )
 }

src/renderer/src/components/PinnedBar.tsx

@@ -89,7 +89,7 @@ function PinnedMessagesBanner({ bufferId }: { bufferId: string }): JSX.Element |
   const rows = useChat((s) => s.pinnedRows)[bufferId]
   const [at, setAt] = useState(0)
   const [, redraw] = useState(0)
-  const hasPins = account.startsWith('discord:') || account.startsWith('matrix:')
+  const hasPins = account.startsWith('discord:') || account.startsWith('matrix:') || account.startsWith('telegram:')
 
   useEffect(() => {
     setAt(0)

src/renderer/src/components/PollComposer.tsx

@@ -5,6 +5,8 @@ import { useStore } from '../state/hooks'
 
 /** The spec's own ceiling, so twenty-one answers is refused here not there. */
 const MAX_ANSWERS = 20
+/** Telegram's: ten answers, and a count that can be held back until the poll closes. */
+const TELEGRAM_MAX_ANSWERS = 10
 
 /**
  * Starting a poll.
@@ -18,6 +20,7 @@ const MAX_ANSWERS = 20
  */
 export function PollComposer({ bufferId, onClose }: { bufferId: string; onClose: () => void }): JSX.Element {
   const store = useStore()
+  const max = store.accountFor(bufferId)?.service === 'telegram' ? TELEGRAM_MAX_ANSWERS : MAX_ANSWERS
   const [question, setQuestion] = useState('')
   const [answers, setAnswers] = useState(['', ''])
   const [disclosed, setDisclosed] = useState(true)
@@ -77,7 +80,7 @@ export function PollComposer({ bufferId, onClose }: { bufferId: string; onClose:
           <button
             type="button"
             className="button subtle small"
-            disabled={answers.length >= MAX_ANSWERS}
+            disabled={answers.length >= max}
             onClick={() => setAnswers([...answers, ''])}
           >
             Add an answer

src/renderer/src/components/ReplyBody.tsx

@@ -0,0 +1,18 @@
+import { useMemo } from 'react'
+import { RichText } from '../lib/richtext'
+import { replyPreviewHtml } from '../lib/replypreview'
+import { useChat, usePref } from '../state/hooks'
+import type { ChannelIndex } from '../lib/format'
+
+/**
+ * What a reply is answering, as words: the original's text drawn the way its own line is - its emotes, emoji and
+ * stickers as pictures, not as the codes they travel as.
+ */
+export function ReplyBody({ text, service, channels }: { text: string; service?: string; channels?: ChannelIndex }): JSX.Element {
+  const smilies = useChat((s) => s.smilieIndex)
+  const [ircColours] = usePref<boolean>('irc.renderColours', true)
+  const html = useMemo(() => replyPreviewHtml(text, { service, smilies, channels, ircColours }), [text, service, smilies, channels, ircColours])
+  // Ours: the markup is what the formatter built from the text, so the pictures it names are public emote and emoji
+  // addresses. A link is not followed from here, and a spoiler is not opened.
+  return <RichText html={html} ownMarkup onRevealSpoiler={() => {}} onOpenChannel={() => {}} onOpenLink={() => {}} />
+}

src/renderer/src/components/RewardsPanel.tsx

@@ -0,0 +1,310 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Icon } from './Icon'
+import { useStore } from '../state/hooks'
+import { classes } from '../lib/util'
+import { useEscapeLayer } from '../lib/layers'
+
+/**
+ * What a channel will trade its points for, in a panel over the chat like the quick switcher (Ctrl+K).
+ *
+ * One panel for every service that has channel points - Kick and Twitch - instead of a menu or a dialog of its
+ * own for each. A reward is a row: its name, what it asks, what it costs. Pressing one arms it (a second press,
+ * or the Redeem button, spends the points; Escape takes it back), so an errant click never costs anything. A
+ * reward that asks the person to type something shows its field when it is armed.
+ */
+export interface Reward {
+  id: string
+  title: string
+  cost: number
+  description?: string | null
+  enabled: boolean
+  paused: boolean
+  needsInput: boolean
+  color?: string | null
+  image?: string | null
+  /** Why it cannot be had from here, where that is known beforehand. */
+  unavailable?: string | null
+  /** What it asks the person to pick from: an emote to unlock. */
+  choices?: Choice[]
+}
+
+/** One thing a reward asks the person to pick: an emote, or a change to one. */
+export interface Choice {
+  id: string
+  label: string
+  image?: string | null
+  /** For a change to an emote: the emote, and its picture. */
+  group?: string | null
+  groupImage?: string | null
+}
+
+interface Answer {
+  rewards: Reward[]
+  points: number | null
+  name?: string | null
+}
+
+/** The daemon's answer - or, in the screenshot harness only, a fixture standing in for it (see SteamGroupSettings). */
+function ask<T>(method: string, params: Record<string, unknown>): Promise<T> {
+  const w = window as unknown as { __mohoShots?: unknown; __rpcFixture?: Record<string, (p: Record<string, unknown>) => unknown> }
+  const stub = w.__mohoShots ? w.__rpcFixture?.[method] : undefined
+  return stub ? Promise.resolve(stub(params) as T) : window.moho.rpc<T>(method, params)
+}
+
+/** How each service lists and redeems, named once here so the panel need not know who it is for. */
+const SERVICES = {
+  kick: { list: 'listKickRewards', redeem: 'redeemKickReward', canType: false },
+  twitch: { list: 'listTwitchRewards', redeem: 'redeemTwitchReward', canType: true }
+} as const
+
+/** Why a reward cannot be pressed, in words; empty when it can. */
+export function whyNot(r: Reward, points: number | null, canType: boolean): string {
+  if (r.unavailable) return r.unavailable
+  if (!r.enabled) return 'The streamer has this turned off'
+  if (r.paused) return 'Paused right now'
+  if (r.needsInput && !canType) return 'This one asks you to type something, which moho cannot do for this service yet'
+  if (points !== null && points < r.cost) return `You have ${points.toLocaleString()} of ${r.cost.toLocaleString()}`
+  return ''
+}
+
+/**
+ * The emotes a reward offers, shown as the emotes - pictures to press, with a search - the way the emoji picker shows
+ * them, and not as a list of names. A change to an emote (Modify a Single Emote) is two steps: the emote, then what
+ * to do to it.
+ */
+function EmoteChooser({ choices, picked, onPick }: { choices: Choice[]; picked: string; onPick: (id: string) => void }): JSX.Element {
+  const [filter, setFilter] = useState('')
+  const [base, setBase] = useState<string | null>(null)
+  const grouped = choices.some((c) => c.group)
+  const q = filter.trim().toLowerCase()
+  const bases = useMemo(() => {
+    const seen = new Map<string, string | null | undefined>()
+    for (const c of choices) if (c.group && !seen.has(c.group)) seen.set(c.group, c.groupImage)
+    return [...seen.entries()].map(([name, image]) => ({ name, image }))
+  }, [choices])
+  const cell = (key: string, label: string, image: string | null | undefined, selected: boolean, onClick: () => void, caption?: string): JSX.Element => (
+    <button key={key} type="button" className={classes('reward-emote', selected && 'selected')} title={label} onClick={onClick}>
+      {image ? <img src={image} alt={label} loading="lazy" /> : <span>{label}</span>}
+      {caption && <span className="reward-emote-caption small muted">{caption}</span>}
+    </button>
+  )
+  const inBase = base ? choices.filter((c) => c.group === base) : []
+  return (
+    <div className="reward-chooser">
+      {!(grouped && base) && (
+        <input className="text-field" placeholder="Search emotes" value={filter} spellCheck={false} onChange={(e) => setFilter(e.target.value)} />
+      )}
+      {grouped && base ? (
+        <>
+          <div className="reward-chooser-head small">
+            <button type="button" className="link-button" onClick={() => setBase(null)}>
+              ← {base}
+            </button>
+            <span className="muted">Choose what is done to it</span>
+          </div>
+          <div className="reward-grid">{inBase.map((c) => cell(c.id, c.label, c.image, picked === c.id, () => onPick(c.id), c.label.slice(base.length + 2)))}</div>
+        </>
+      ) : grouped ? (
+        <div className="reward-grid">{bases.filter((b) => !q || b.name.toLowerCase().includes(q)).map((b) => cell(b.name, b.name, b.image, false, () => setBase(b.name)))}</div>
+      ) : (
+        <div className="reward-grid">{choices.filter((c) => !q || c.label.toLowerCase().includes(q)).map((c) => cell(c.id, c.label, c.image, picked === c.id, () => onPick(c.id)))}</div>
+      )}
+      {picked && <div className="small muted reward-picked">{choices.find((c) => c.id === picked)?.label}</div>}
+    </div>
+  )
+}
+
+export function RewardsPanel({
+  bufferId,
+  service,
+  onClose,
+  onBalance
+}: {
+  bufferId: string
+  service: keyof typeof SERVICES
+  onClose: () => void
+  /** The balance after a redeem, for the plaque behind the panel. */
+  onBalance: (points: number) => void
+}): JSX.Element {
+  const store = useStore()
+  const api = SERVICES[service]
+  const [answer, setAnswer] = useState<Answer | null>(null)
+  const [error, setError] = useState('')
+  const [query, setQuery] = useState('')
+  const [index, setIndex] = useState(0)
+  const [armed, setArmed] = useState<string | null>(null)
+  const [typed, setTyped] = useState('')
+  const [picked, setPicked] = useState('')
+  const [busy, setBusy] = useState(false)
+  const input = useRef<HTMLInputElement>(null)
+  const list = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    void ask<Answer>(api.list, { bufferId })
+      .then((a) => !cancelled && setAnswer(a))
+      .catch((e: Error) => !cancelled && setError(e.message))
+    return () => {
+      cancelled = true
+    }
+  }, [api.list, bufferId])
+
+  useEffect(() => input.current?.focus(), [])
+  // Escape takes an armed reward back first, then closes the panel - wherever focus is.
+  useEscapeLayer(() => (armed ? setArmed(null) : onClose()), true)
+
+  // Cheapest first, the ones that can be had now above the ones that cannot (switched off, paused, too dear).
+  const { shown, firstDisabled } = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    const all = answer?.rewards ?? []
+    const found = q ? all.filter((r) => r.title.toLowerCase().includes(q) || (r.description ?? '').toLowerCase().includes(q)) : all
+    const byCost = (a: Reward, b: Reward): number => a.cost - b.cost || a.title.localeCompare(b.title)
+    const pressable = (r: Reward): boolean => !whyNot(r, answer?.points ?? null, api.canType)
+    const active = found.filter(pressable).sort(byCost)
+    const disabled = found.filter((r) => !pressable(r)).sort(byCost)
+    return { shown: [...active, ...disabled], firstDisabled: active.length }
+  }, [answer, query, api.canType])
+
+  useEffect(() => {
+    list.current?.querySelector('.switcher-row.selected')?.scrollIntoView({ block: 'nearest' })
+  }, [index, shown.length])
+
+  const points = answer?.points ?? null
+  const unit = answer?.name || 'points'
+
+  const redeem = (r: Reward): void => {
+    setBusy(true)
+    void ask<{ points: number | null }>(api.redeem, { bufferId, rewardId: r.id, ...(r.needsInput ? { input: typed } : {}), ...(r.choices?.length ? { choice: picked } : {}) })
+      .then((a) => {
+        store.toast('info', `Redeemed ${r.title}`)
+        if (a.points !== null && a.points !== undefined) {
+          setAnswer((cur) => (cur ? { ...cur, points: a.points } : cur))
+          onBalance(a.points)
+        }
+        setArmed(null)
+        setTyped('')
+        setPicked('')
+        // An emote unlock changes what there is left to unlock: asked again.
+        if (r.choices?.length) {
+          void ask<Answer>(api.list, { bufferId }).then(setAnswer).catch(() => undefined)
+        }
+      })
+      .catch((e: Error) => store.toast('error', e.message))
+      .finally(() => setBusy(false))
+  }
+
+  const press = (r: Reward): void => {
+    if (whyNot(r, points, api.canType) || busy) return
+    if (armed === r.id && (!r.needsInput || typed.trim()) && (!r.choices?.length || picked)) redeem(r)
+    else {
+      setArmed(r.id)
+      setTyped('')
+      setPicked('')
+    }
+  }
+
+  return createPortal(
+    <div className="modal-scrim switcher-scrim" onMouseDown={onClose}>
+      <div className="switcher rewards" role="dialog" aria-modal="true" aria-label="Channel points rewards" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="switcher-field">
+          <Icon name="toll" size={18} />
+          <input
+            ref={input}
+            className="switcher-input"
+            placeholder="Spend channel points on…"
+            value={query}
+            spellCheck={false}
+            onChange={(e) => {
+              setQuery(e.target.value)
+              setIndex(0)
+              setArmed(null)
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                e.preventDefault()
+                setIndex((i) => Math.min(shown.length - 1, i + 1))
+                setArmed(null)
+              } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                e.preventDefault()
+                setIndex((i) => Math.max(0, i - 1))
+                setArmed(null)
+              } else if (e.key === 'Enter' && shown[index]) {
+                e.preventDefault()
+                press(shown[index])
+              }
+            }}
+          />
+          <span className="rewards-balance small" title={`Your ${unit} here`}>
+            {points === null ? '' : `${points.toLocaleString()} ${unit === 'points' ? '' : unit}`.trim()}
+          </span>
+        </div>
+        <div className="switcher-list" ref={list} role="listbox">
+          {error && <div className="switcher-empty muted">{error}</div>}
+          {!error && !answer && <div className="switcher-empty muted">Asking {service === 'kick' ? 'Kick' : 'Twitch'}…</div>}
+          {answer && shown.length === 0 && <div className="switcher-empty muted">{answer.rewards.length === 0 ? 'This channel offers nothing for points.' : 'Nothing by that name.'}</div>}
+          {shown.map((r, i) => {
+            const why = whyNot(r, points, api.canType)
+            const isArmed = armed === r.id
+            return (
+              <div key={r.id} className={classes('reward-item', isArmed && 'armed')}>
+                {i === 0 && firstDisabled > 0 && <div className="reward-group small muted">Available</div>}
+                {i === firstDisabled && shown.length > firstDisabled && <div className="reward-group small muted">Unavailable</div>}
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={i === index}
+                  disabled={!!why || busy}
+                  title={why || r.description || r.title}
+                  className={classes('switcher-row', 'reward-row', i === index && 'selected', why && 'locked')}
+                  onMouseMove={() => i !== index && setIndex(i)}
+                  onClick={() => {
+                    setIndex(i)
+                    press(r)
+                  }}
+                >
+                  <span className="switcher-lead">
+                    {r.image ? <img className="reward-image" src={r.image} alt="" /> : <Icon name="redeem" size={16} color={r.color ?? undefined} />}
+                  </span>
+                  <span className="switcher-title ellipsis">{r.title}</span>
+                  <span className="switcher-where muted small ellipsis">{why || r.description || ''}</span>
+                  <span className="reward-cost small">{r.cost.toLocaleString()}</span>
+                </button>
+                {isArmed && (
+                  <div className="reward-confirm">
+                    {r.needsInput && (
+                      <input
+                        className="text-field"
+                        autoFocus
+                        placeholder={r.description || 'What it asks for'}
+                        value={typed}
+                        maxLength={500}
+                        onChange={(e) => setTyped(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' && typed.trim()) redeem(r)
+                        }}
+                      />
+                    )}
+                    {!!r.choices?.length && <EmoteChooser choices={r.choices} picked={picked} onPick={setPicked} />}
+                    <button type="button" className="button primary" disabled={busy || (r.needsInput && !typed.trim()) || (!!r.choices?.length && !picked)} onClick={() => redeem(r)}>
+                      Redeem for {r.cost.toLocaleString()}
+                    </button>
+                    <button type="button" className="button subtle" onClick={() => setArmed(null)}>
+                      Cancel
+                    </button>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+        <div className="switcher-hint muted small">
+          <span>↑↓ to move</span>
+          <span>Enter to choose, again to spend</span>
+          <span>Esc to close</span>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

src/renderer/src/components/ServerRail.tsx

@@ -304,7 +304,7 @@ function RailTile(props: TileProps): JSX.Element {
               ? [
                   { separator: true } as const,
                   {
-                    label: group.kind === 'space' ? 'Leave space' : 'Leave server',
+                    label: group.kind === 'space' ? 'Leave space' : group.service === 'telegram' ? 'Leave group' : 'Leave server',
                     icon: 'logout',
                     danger: true,
                     onClick: props.onLeave

src/renderer/src/components/StreamStage.tsx

@@ -1,14 +1,17 @@
 import { useEffect, useRef, useState } from 'react'
 import Hls from 'hls.js'
-import { IconButton } from './Icon'
+import { Icon, IconButton } from './Icon'
+import { ivsAbr, ivsLoader } from '../lib/ivsplaylist'
+import { autoCeiling, captionTrack, menuOrder, renditionLabel, renditionOf, type CaptionTrack, type Rendition } from '../lib/streamplayer'
+import { useEscapeLayer } from '../lib/layers'
 import { VideoStage } from './VideoStage'
 import { fitTiles } from './CallStage'
-import { useChat, useStore } from '../state/hooks'
+import { useChat, usePref, useStore } from '../state/hooks'
 import { bufferDisplayName } from '../lib/util'
 import { StageWindow, STREAM_WINDOW_NAME } from './stage/StageWindow'
 
 /**
- * A Kick channel's stream, in the surface a call uses.
+ * A Kick or a Twitch channel's stream, in the surface a call uses.
  *
  * The other half of the picture this window can show. A call is real-time
  * media negotiated with somebody and arrives as a `MediaStream` on
@@ -24,8 +27,71 @@ import { StageWindow, STREAM_WINDOW_NAME } from './stage/StageWindow'
  * stream has one picture, and the grid a call draws would be a grid of one.
  */
 
-/** The rendition ceiling. See the comment where it is used. */
-const MAX_HEIGHT = 720
+/** What automatic choice of rendition may go up to: a picture this size beside a chat has no use for more. */
+const AUTO_MAX_HEIGHT = 720
+
+/**
+ * How far behind the newest segment the player settles, in seconds.
+ *
+ * In seconds because hls.js counts the other way in multiples of the playlist's target duration, and Kick's
+ * playlists say six seconds for segments that are two: "three segments" was eighteen seconds behind, which is
+ * where most of the delay between the broadcaster and the picture came from. With the prefetched segments
+ * (see lib/ivsplaylist.ts) this is a few seconds behind the broadcaster, and no catch-up speed: playing a little
+ * fast to close the gap was measured to stall.
+ */
+const LIVE_SYNC_SECONDS = 4
+const LIVE_MAX_LATENCY_SECONDS = 10
+
+/** Where the numbers of captions carried inside the video start, clear of the playlist's own. */
+const IN_VIDEO = 1000
+
+/** The renditions of a player's playlist, as the choices are made from them. */
+function renditionsOf(player: Hls): Rendition[] {
+  return player.levels.map((l) => ({ height: l.height, frameRate: Number(l.attrs?.['FRAME-RATE']) || undefined, bitrate: l.bitrate }))
+}
+
+interface MenuChoice {
+  label: string
+  detail?: string
+  checked: boolean
+  onClick: () => void
+}
+
+/** A short list drawn over the picture, since a popped-out window is a document of its own and a menu in this one would open in the wrong place. */
+function StreamMenu({ title, choices, onClose }: { title: string; choices: MenuChoice[]; onClose: () => void }): JSX.Element {
+  useEscapeLayer(onClose)
+  return (
+    <>
+      <div className="stream-menu-scrim" onClick={onClose} />
+      <div className="context-menu stream-menu" role="menu" aria-label={title}>
+        <div className="stream-menu-title small muted">{title}</div>
+        {choices.map((c) => (
+          <button
+            key={c.label}
+            type="button"
+            role="menuitemradio"
+            aria-checked={c.checked}
+            className="context-menu-item"
+            onClick={() => {
+              c.onClick()
+              onClose()
+            }}
+          >
+            <span className="context-menu-label">{c.label}</span>
+            {c.detail && <span className="small muted">{c.detail}</span>}
+            {c.checked && <Icon name="check" size={16} className="context-menu-check" />}
+          </button>
+        ))}
+      </div>
+    </>
+  )
+}
+
+interface Choice {
+  index: number
+  label: string
+  height: number
+}
 
 export function StreamStage({ mode = 'inline' }: { mode?: 'inline' | 'pip' | 'window' }): JSX.Element | null {
   const store = useStore()
@@ -36,17 +102,46 @@ export function StreamStage({ mode = 'inline' }: { mode?: 'inline' | 'pip' | 'wi
   const video = useRef<HTMLVideoElement>(null)
   const frame = useRef<HTMLDivElement>(null)
   const hls = useRef<Hls | null>(null)
-  /** The newest playback URL, for the error path to reach without being
-   *  rebuilt every time one arrives. */
+  /** The newest playback URL, for a player that has to begin again to reach without being rebuilt every time
+   *  one arrives. */
   const latest = useRef('')
   const [room, setRoom] = useState({ width: 640, height: 260 })
-  const [muted, setMuted] = useState(false)
+  // How tall the picture is above the conversation, as it was left by dragging its bottom edge; none is the default
+  // (nearly half the window, to a limit). Followed while dragging and remembered when it is let go.
+  const [savedHeight, setSavedHeight] = usePref<number | null>('ui.streamHeight', null)
+  const [liveHeight, setLiveHeight] = useState<number | null | undefined>(undefined)
+  const inlineHeight = liveHeight === undefined ? savedHeight : liveHeight
+  // Remembered between channels and between sessions: turning it down for one
+  // stream and being deafened by the next is how a player loses a person.
+  const [muted, setMuted] = usePref<boolean>('stream.muted', false)
+  const [volume, setVolume] = usePref<number>('stream.volume', 1)
+  /** Seconds left of an ad the stream is playing, or null when it is not playing one. */
+  const [ad, setAd] = useState<number | null>(null)
+  const adRanges = useRef<{ start: number; end: number }[]>([])
+  /** What the stream offers, once its playlist has been read. */
+  const [choices, setChoices] = useState<Choice[]>([])
+  const [listed, setListed] = useState<CaptionTrack[]>([])
+  /** Captions carried inside the video itself (CEA-608/708), which hls.js draws as text tracks of its own. */
+  const [inVideo, setInVideo] = useState<CaptionTrack[]>([])
+  const captions = [...listed, ...inVideo]
+  /** What automatic choice is playing now, for the menu to say. */
+  const [playing, setPlaying] = useState('')
+  const [menu, setMenu] = useState<'quality' | 'captions' | null>(null)
+  // Remembered between streams, apart for each service because their ladders differ: 0 is automatic, and an
+  // empty language is captions off.
+  const service = useChat((s) => s.accounts.find((a) => a.id === (watching?.accountId ?? ''))?.service)
+  const [quality, setQuality] = usePref<number>(service === 'twitch' ? 'stream.quality.twitch' : 'stream.quality', 0)
+  const [captionLanguage, setCaptionLanguage] = usePref<string>('stream.captions', '')
 
   const stream = watching ? streams[watching.bufferId] : undefined
-  // The current one rather than the one this started with: the signature in a
-  // playback URL expires, and the refresh already running is what replaces it.
+  // The newest address rather than the one this began with: the signature in it expires, and the daemon asks for
+  // a new one before it does. The player is not rebuilt for it - it is only where a player that has to start
+  // over, after being refused, starts from.
   const url = stream?.playbackUrl ?? ''
   latest.current = url
+  // A different picture is a different stream or a different broadcast; the same one with a new address is not.
+  const picture = `${watching?.bufferId ?? ''}|${stream?.livestreamId ?? ''}`
+  const hasUrl = url !== ''
 
   // The same measuring the call stage does, for the same reason: this is a
   // different shape in a narrow window, a full-screen one, and the corner.
@@ -66,7 +161,7 @@ export function StreamStage({ mode = 'inline' }: { mode?: 'inline' | 'pip' | 'wi
               ? // The corner: as tall as its width makes the picture, so
                 // resizing the panel resizes the picture.
                 (el.clientWidth * 9) / 16
-              : Math.min(view.innerHeight * 0.45, 460)
+              : (inlineHeight ?? Math.min(view.innerHeight * 0.45, 460))
       })
     measure()
     const observer = new ResizeObserver(measure)
@@ -76,51 +171,72 @@ export function StreamStage({ mode = 'inline' }: { mode?: 'inline' | 'pip' | 'wi
       observer.disconnect()
       view.removeEventListener('resize', measure)
     }
-  }, [mode, minimized, watching])
+  }, [mode, minimized, watching, inlineHeight])
 
-  // The player itself, torn down and rebuilt only when the picture changes -
-  // not when the viewer count ticks over, which it does every minute.
+  // The player itself, torn down and rebuilt only when the picture changes - not when the viewer count ticks over,
+  // and not when the address is renewed, which it is every few minutes.
   useEffect(() => {
     const el = video.current
-    if (!el || !url || minimized) return
+    if (!el || !hasUrl || minimized) return
     if (!Hls.isSupported()) {
       store.toast('error', 'This build cannot play a stream')
       return
     }
     const player = new Hls({
-      // Enough buffer to ride out a hiccup, not so much that "live" means two
-      // minutes ago: this is a chat window beside the stream, and people talk
-      // about what just happened.
-      liveSyncDurationCount: 3,
-      // Never fetch a rendition larger than the box it is drawn in.
-      capLevelToPlayerSize: true
+      // Kick's playlists, which list what is being made as well as what is made.
+      loader: ivsLoader(2),
+      abrController: ivsAbr(),
+      // How far behind to play, in seconds: see LIVE_SYNC_SECONDS.
+      liveSyncDuration: LIVE_SYNC_SECONDS,
+      liveMaxLatencyDuration: LIVE_MAX_LATENCY_SECONDS,
+      // Never fetch a rendition larger than the box it is drawn in, when the choice is automatic.
+      capLevelToPlayerSize: true,
+      // A stream that runs for hours must not keep them all.
+      backBufferLength: 20
     })
     hls.current = player
+    // For the harness that measures how far behind the broadcaster the picture runs; see scripts/watch-stream-stalls.mjs.
+    if (window.moho.uiShots) (window as unknown as { __mohoHls: Hls }).__mohoHls = player
     player.attachMedia(el)
-    player.loadSource(url)
+    player.loadSource(latest.current)
 
     player.on(Hls.Events.MANIFEST_PARSED, () => {
-      // 1080p60 is 5.8 Mbps and a real amount of CPU to decode beside a chat
-      // client, and the ladder below it is cheaper for a picture this size.
-      // A ceiling rather than a fixed choice: the bitrate ladder underneath
-      // still adapts to the connection.
-      const ceiling = player.levels.reduce(
-        (best, level, i) => (level.height <= MAX_HEIGHT && level.height >= (player.levels[best]?.height ?? 0) ? i : best),
-        -1
-      )
-      if (ceiling >= 0) player.autoLevelCapping = ceiling
+      setChoices(menuOrder(renditionsOf(player)))
       void el.play().catch(() => {
         /* A picture that will not start is not worth an error dialog. */
       })
     })
+    player.on(Hls.Events.LEVEL_LOADED, (_e, data) => {
+      // Behind by a segment and a half at the least: where they are 5 seconds long, 4 seconds is less than one.
+      const longest = Math.max(0, ...data.details.fragments.map((f) => f.duration))
+      const behind = Math.max(LIVE_SYNC_SECONDS, longest * 1.5)
+      if (player.config.liveSyncDuration !== behind) {
+        player.config.liveSyncDuration = behind
+        player.config.liveMaxLatencyDuration = Math.max(LIVE_MAX_LATENCY_SECONDS, behind * 2.5)
+      }
+    })
+    // Ads Twitch puts into a stream are marked in its playlist as date ranges of their own, with a start and a
+    // length; which of them the picture is playing is worked out against where the playhead is (see below).
+    player.on(Hls.Events.LEVEL_UPDATED, (_e, data) => {
+      adRanges.current = Object.values(data.details.dateRanges)
+        .filter((r) => r && r.class === 'twitch-stitched-ad')
+        .map((r) => ({ start: r!.startDate.getTime(), end: r!.startDate.getTime() + (r!.duration ?? r!.plannedDuration ?? 0) * 1000 }))
+    })
+    player.on(Hls.Events.LEVEL_SWITCHED, (_e, data) => {
+      const level = player.levels[data.level]
+      if (level) setPlaying(renditionLabel({ height: level.height, frameRate: Number(level.attrs?.['FRAME-RATE']) || undefined }))
+    })
+    player.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (_e, data) => {
+      setListed(data.subtitleTracks.map((t) => ({ id: t.id, name: t.name, lang: t.lang })))
+    })
 
     player.on(Hls.Events.ERROR, (_e, data) => {
       if (!data.fatal) return
       if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
-        // A refused segment is an expired token, not a dead stream: the
-        // daemon re-asks Kick about the channel every minute, so the next
-        // playback URL is already on its way and this only has to wait for
-        // it. Reloading the source picks up whichever one is current.
+        // A refused segment is an expired token, not a dead stream: the daemon
+        // renews the address before it expires, so the next one is already
+        // here and this only has to begin from it. Reloading the source picks
+        // up whichever one is current.
         if (latest.current) player.loadSource(latest.current)
         player.startLoad()
         return
@@ -133,11 +249,105 @@ export function StreamStage({ mode = 'inline' }: { mode?: 'inline' | 'pip' | 'wi
       store.stopWatching()
     })
 
+    // Whether the playhead is inside an ad, and how long it has left, said once a second.
+    const adTimer = setInterval(() => {
+      const at = player.playingDate?.getTime()
+      const inside = at === undefined ? undefined : adRanges.current.find((r) => at >= r.start && at < r.end)
+      setAd(inside && at !== undefined ? Math.max(1, Math.ceil((inside.end - at) / 1000)) : null)
+    }, 1000)
+
     return () => {
+      clearInterval(adTimer)
       player.destroy()
       hls.current = null
+      adRanges.current = []
+      setAd(null)
+      setChoices([])
+      setListed([])
+      setInVideo([])
+      setPlaying('')
     }
-  }, [url, minimized, store, watching?.bufferId])
+  }, [hasUrl, picture, minimized, store])
+
+  // Captions inside the picture. Twitch lists none in its playlist; a streamer whose encoder sends them
+  // (none of the busiest channels sampled did) has them in the video, and hls.js turns them into text tracks.
+  // Numbered from where the listed ones can never reach, so one choice means one track.
+  useEffect(() => {
+    const el = video.current
+    if (!el || !hasUrl || minimized) return
+    const scan = (): void => {
+      const found: CaptionTrack[] = []
+      for (let i = 0; i < el.textTracks.length; i++) {
+        const t = el.textTracks[i]
+        if (t.kind === 'captions') found.push({ id: IN_VIDEO + i, name: t.label || `Captions ${found.length + 1}`, lang: t.language || undefined })
+      }
+      setInVideo((was) => (JSON.stringify(was) === JSON.stringify(found) ? was : found))
+    }
+    scan()
+    el.textTracks.addEventListener('addtrack', scan)
+    el.textTracks.addEventListener('removetrack', scan)
+    return () => {
+      el.textTracks.removeEventListener('addtrack', scan)
+      el.textTracks.removeEventListener('removetrack', scan)
+    }
+  }, [hasUrl, picture, minimized])
+
+  // Twitch gives points for time spent watching and counts it from what the website's player reports once a minute,
+  // which a player of our own does not send. Told to the daemon once a minute while this picture is really
+  // playing and showing; a paused, hidden, minimised or closed stage says nothing, and the daemon sends nothing
+  // for a channel that is not live (see backend/twitch/watch.rs).
+  const [reportWatching] = usePref<boolean>('twitch.reportWatching', true)
+  useEffect(() => {
+    if (service !== 'twitch' || !watching || !hasUrl || minimized || !reportWatching) return
+    const bufferId = watching.bufferId
+    const timer = setInterval(() => {
+      const el = video.current
+      if (!el || el.paused || el.ended || el.readyState < 3 || document.visibilityState !== 'visible') return
+      void window.moho.rpc('reportTwitchWatching', { bufferId }).catch(() => {
+        /* Said nowhere: it is points, and the stream is playing either way. */
+      })
+    }, 60_000)
+    return () => clearInterval(timer)
+  }, [service, watching, hasUrl, picture, minimized, reportWatching])
+
+  // The sound as it was left, whenever there is a picture to apply it to.
+  useEffect(() => {
+    const el = video.current
+    if (!el) return
+    el.muted = muted
+    el.volume = Math.min(1, Math.max(0, volume))
+  }, [muted, volume, hasUrl, picture, minimized])
+
+  // Which rendition: automatic, or the height that was chosen when this stream offers it.
+  useEffect(() => {
+    const player = hls.current
+    if (!player || choices.length === 0) return
+    const wanted = quality > 0 ? renditionOf(renditionsOf(player), quality) : -1
+    if (wanted >= 0) {
+      player.autoLevelCapping = -1
+      player.currentLevel = wanted
+    } else {
+      player.currentLevel = -1
+      player.autoLevelCapping = autoCeiling(renditionsOf(player), AUTO_MAX_HEIGHT)
+    }
+  }, [quality, choices])
+
+  // Which captions: none, or the language that was chosen when this stream has captions in it.
+  useEffect(() => {
+    const player = hls.current
+    if (!player) return
+    const track = captionTrack(captions, captionLanguage, navigator.language)
+    const own = track >= IN_VIDEO
+    player.subtitleDisplay = track >= 0 && !own
+    player.subtitleTrack = own ? -1 : track
+    // The ones inside the video are shown or hidden on the element itself.
+    const el = video.current
+    if (el) {
+      for (let i = 0; i < el.textTracks.length; i++) {
+        if (el.textTracks[i].kind === 'captions') el.textTracks[i].mode = track === IN_VIDEO + i ? 'showing' : 'disabled'
+      }
+    }
+  }, [captionLanguage, listed, inVideo])
 
   // A stream that has ended is not a picture any more, and the surface should
   // not sit there showing the last frame of it.
@@ -152,6 +362,7 @@ export function StreamStage({ mode = 'inline' }: { mode?: 'inline' | 'pip' | 'wi
 
   const where = buffers.find((b) => b.id === watching.bufferId)?.name ?? ''
   const fit = fitTiles(1, room.width, room.height, Infinity)
+  const captionsOn = captionTrack(captions, captionLanguage, navigator.language) >= 0
   const watchers = stream?.viewers
   const subtitle = `Live${watchers ? ` · ${watchers.toLocaleString()} watching` : ''}${
     where ? ` · ${bufferDisplayName(where)}` : ''
@@ -170,22 +381,82 @@ export function StreamStage({ mode = 'inline' }: { mode?: 'inline' | 'pip' | 'wi
       endIcon="stop_circle"
       onPopOut={mode === 'window' ? undefined : () => store.setStreamPoppedOut(true)}
       onBringBack={() => store.setStreamPoppedOut(false)}
+      height={Math.round(room.height)}
+      onHeight={(h, commit) => {
+        setLiveHeight(commit ? undefined : h)
+        if (commit) setSavedHeight(h)
+      }}
       controls={
-        <IconButton
-          name={muted ? 'volume_off' : 'volume_up'}
-          title={muted ? 'Unmute' : 'Mute'}
-          className={muted ? 'calling' : undefined}
-          onClick={() => {
-            const next = !muted
-            setMuted(next)
-            if (video.current) video.current.muted = next
-          }}
-        />
+        <>
+          <IconButton
+            name={captionsOn ? 'closed_caption' : 'closed_caption_disabled'}
+            title={captions.length === 0 ? 'No captions for this stream' : captionsOn ? 'Captions on' : 'Captions off'}
+            className={captionsOn ? 'active' : undefined}
+            disabled={captions.length === 0}
+            onClick={() => {
+              if (captions.length === 1) setCaptionLanguage(captionsOn ? '' : captions[0].lang || captions[0].name)
+              else setMenu(menu === 'captions' ? null : 'captions')
+            }}
+          />
+          <IconButton
+            name="high_quality"
+            title={quality > 0 ? `Resolution: ${quality}p` : 'Resolution: automatic'}
+            disabled={choices.length === 0}
+            onClick={() => setMenu(menu === 'quality' ? null : 'quality')}
+          />
+          <IconButton
+            name={muted ? 'volume_off' : 'volume_up'}
+            title={muted ? 'Unmute' : 'Mute'}
+            className={muted ? 'calling' : undefined}
+            onClick={() => setMuted(!muted)}
+          />
+          <input
+            type="range"
+            className="stream-volume"
+            min={0}
+            max={1}
+            step={0.05}
+            value={muted ? 0 : volume}
+            aria-label="Volume"
+            title="Volume"
+            onChange={(e) => {
+              const next = Number(e.target.value)
+              setVolume(next)
+              setMuted(next === 0)
+            }}
+          />
+        </>
       }
     >
       <div className={mode === 'window' ? 'video-stage in-window' : 'video-stage'} ref={frame}>
         <div className="video-tile" style={{ width: `${Math.floor(fit.tileWidth)}px` }}>
           <video ref={video} className="video-tile-picture" autoPlay playsInline />
+          {ad !== null && (
+            <div className="stream-ad small" role="status" title="Twitch plays ads in a stream for an account without Turbo or a subscription to the channel">
+              <Icon name="campaign" size={14} />
+              <span>Ad break · {ad} s</span>
+            </div>
+          )}
+          {menu === 'quality' && (
+            <StreamMenu
+              title="Resolution"
+              onClose={() => setMenu(null)}
+              choices={[
+                { label: 'Auto', detail: quality === 0 && playing ? playing : undefined, checked: quality === 0 || !choices.some((c) => c.height === quality), onClick: () => setQuality(0) },
+                ...choices.map((c) => ({ label: c.label, checked: quality === c.height, onClick: () => setQuality(c.height) }))
+              ]}
+            />
+          )}
+          {menu === 'captions' && (
+            <StreamMenu
+              title="Captions"
+              onClose={() => setMenu(null)}
+              choices={[
+                { label: 'Off', checked: !captionsOn, onClick: () => setCaptionLanguage('') },
+                ...captions.map((t) => ({ label: t.name, checked: captionsOn && captionTrack(captions, captionLanguage, navigator.language) === t.id, onClick: () => setCaptionLanguage(t.lang || t.name) }))
+              ]}
+            />
+          )}
         </div>
       </div>
     </VideoStage>

src/renderer/src/components/ThreadPanel.tsx

@@ -5,6 +5,7 @@ import { IconButton } from './Icon'
 import { Composer } from './Composer'
 import { useChat, usePref, useStore } from '../state/hooks'
 import type { ChatMessage } from '../state/store'
+import { applyRemoved, type RemovedMessages } from '../lib/moderation'
 
 /**
  * A thread, beside the room it belongs to.
@@ -26,6 +27,7 @@ export function ThreadPanel(): JSX.Element | null {
   // to ask for `ui.*`, which nothing writes, so it ignored both.
   const [comfy] = usePref<'classic' | 'comfy' | 'bubbles'>('display.messageMode', 'comfy')
   const [relativeTimestamps] = usePref<boolean>('display.relativeTimestamps', false)
+  const [removedMode] = usePref<RemovedMessages>('kick.removedMessages', 'strike')
   const store = useStore()
   // Before the early return below, as every hook here has to be.
   const shared = useRowContext(thread?.bufferId ?? '')
@@ -36,15 +38,15 @@ export function ThreadPanel(): JSX.Element | null {
   const messages = useMemo((): ChatMessage[] => {
     if (!thread) return []
     const live = (messagesByBuffer[thread.bufferId] || []).filter(
-      (m) => m.id === thread.rootId || (m.replyTo?.thread && m.replyTo.id === thread.rootId)
+      (m) => m.id === thread.rootId || (m.replyTo?.thread && m.replyTo.id === thread.rootId) || m.replyTo?.threadRoot === thread.rootId
     )
     // By id, so a message that is both fetched and live appears once. The
     // live copy wins: it is the one carrying edits and reactions that have
     // happened since the fetch.
     const byId = new Map<string, ChatMessage>()
     for (const m of [...thread.messages, ...live]) byId.set(m.id, m)
-    return [...byId.values()].sort((a, b) => a.ts - b.ts)
-  }, [thread, messagesByBuffer])
+    return applyRemoved([...byId.values()].sort((a, b) => a.ts - b.ts), removedMode)
+  }, [thread, messagesByBuffer, removedMode])
 
   // Opened on, and following, the newest reply: a thread is read from its end.
   const count = messages.length
@@ -53,6 +55,10 @@ export function ThreadPanel(): JSX.Element | null {
     if (el) el.scrollTop = el.scrollHeight
   }, [thread?.rootId, count])
 
+  // Not counting the message it grew from - which is not always here: a thread can outlive the scrollback
+  // its first message was in, and then every message shown is a reply.
+  const replyCount = messages.filter((m) => m.id !== thread?.rootId).length
+
   if (!thread) return null
 
   return (
@@ -60,7 +66,7 @@ export function ThreadPanel(): JSX.Element | null {
       <div className="thread-header">
         <span className="thread-title ellipsis">Thread</span>
         <span className="small muted">
-          {Math.max(0, messages.length - 1) === 1 ? '1 reply' : `${Math.max(0, messages.length - 1)} replies`}
+          {replyCount === 1 ? '1 reply' : `${replyCount} replies`}
         </span>
         <IconButton name="close" title="Close thread" onClick={() => store.closeThreadPanel()} />
       </div>

src/renderer/src/components/TwitchPoints.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react'
+import { Icon } from './Icon'
+import { useChat } from '../state/hooks'
+import { RewardsPanel } from './RewardsPanel'
+
+/**
+ * A Twitch channel's points balance, and the way into the rewards panel (RewardsPanel.tsx) that Kick's plaque opens too.
+ *
+ * At the foot of the viewer list, where Kick's plaque is. Twitch's points are the person's own twitch.tv
+ * session's to see and spend (see nobilis backend/twitch/points.rs), so it is drawn only for an account that has
+ * that session, and the balance is read once a minute while the window is
+ * on this channel. Moho does not claim the bonus chest or send the "watching" reports a points bot would to
+ * earn faster.
+ */
+const REFRESH_MS = 60_000
+
+export function TwitchPoints({ bufferId }: { bufferId: string }): JSX.Element | null {
+  const pushed = useChat((s) => s.twitchPoints[bufferId])
+  const [open, setOpen] = useState(false)
+  const [unavailable, setUnavailable] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    setUnavailable(false)
+    const ask = (): void => {
+      if (document.visibilityState !== 'visible') return
+      void window.moho
+        .rpc('twitchPoints', { bufferId })
+        .catch(() => !cancelled && setUnavailable(true))
+    }
+    ask()
+    const timer = setInterval(ask, REFRESH_MS)
+    document.addEventListener('visibilitychange', ask)
+    return () => {
+      cancelled = true
+      clearInterval(timer)
+      document.removeEventListener('visibilitychange', ask)
+    }
+  }, [bufferId])
+
+  // Closing the channel takes the panel with it.
+  useEffect(() => setOpen(false), [bufferId])
+
+  // A channel with no points (or no way to read them) draws nothing rather than a plaque that says nothing.
+  if (unavailable && !pushed) return null
+  const points = pushed?.points
+  const name = pushed?.name || 'points'
+  return (
+    <div className="kick-points twitch-points">
+      <button type="button" className={`kick-points-plaque${open ? ' open' : ''}`} title={`Your channel ${name} here, and what they buy`} onClick={() => setOpen(true)}>
+        <Icon name="toll" size={15} />
+        <span className="ellipsis">{points === null || points === undefined ? 'Points' : `${points.toLocaleString()} ${name === 'points' ? '' : name}`.trim()}</span>
+        <Icon name="redeem" size={15} />
+      </button>
+      {open && <RewardsPanel bufferId={bufferId} service="twitch" onClose={() => setOpen(false)} onBalance={() => undefined} />}
+    </div>
+  )
+}

src/renderer/src/components/TwitchSignIn.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react'
+import { useStore } from '../state/hooks'
+
+/**
+ * Signing in to Twitch.
+ *
+ * One action. A window of twitch.tv opens; the person signs in there (typed
+ * into Twitch's own page, never seen by moho) and then, in the same window,
+ * approves what moho is asked to be allowed to do. That gives the account both
+ * what Twitch's API takes (chat, follows, moderation) and the session its
+ * player takes (video as the person, with their Turbo or subscriptions) -
+ * see src/main/twitch-signin.ts and nobilis backend/twitch/login.rs. Waiting
+ * can take minutes, so this listens for events while the window is open.
+ */
+interface Scope {
+  scope: string
+  why: string
+}
+
+/** The scopes the sign-in asks for, said before it is started so nobody has to guess. */
+const ASKS: Scope[] = [
+  { scope: 'chat:read', why: 'read chat' },
+  { scope: 'chat:edit', why: 'send messages' },
+  { scope: 'user:write:chat', why: 'hear why Twitch turned a message down' },
+  { scope: 'user:read:follows', why: 'list the channels you follow' },
+  { scope: 'user:read:emotes', why: 'show the emotes you can use' }
+]
+
+/** What moderation, whispers and the rest ask for, said before it is asked. */
+const MODERATION_ASKS: Scope[] = [
+  { scope: 'moderator:manage:banned_users', why: 'time out, ban and unban where you moderate' },
+  { scope: 'moderator:manage:chat_messages', why: 'remove messages where you moderate' },
+  { scope: 'moderator:manage:chat_settings', why: 'change slow, followers-only, subscribers-only and emote-only modes' },
+  { scope: 'moderator:manage:announcements', why: 'make announcements' },
+  { scope: 'user:manage:chat_color', why: 'change your name colour' },
+  { scope: 'user:manage:whispers', why: 'send whispers' },
+  { scope: 'whispers:read', why: 'read whispers sent to you' },
+  { scope: 'moderator:manage:shoutouts', why: 'give shoutouts where you moderate' },
+  { scope: 'user:manage:blocked_users', why: 'block and unblock people' }
+]
+
+export function TwitchSignIn({
+  useTor,
+  onDone,
+  label = 'Sign in with Twitch',
+  children
+}: {
+  useTor: boolean
+  onDone: () => void
+  label?: string
+  /** Other things to offer beside the sign-in button, while nothing is waiting. */
+  children?: React.ReactNode
+}): JSX.Element {
+  const store = useStore()
+  const [busy, setBusy] = useState(false)
+  const [detail, setDetail] = useState('')
+  const [userCode, setUserCode] = useState('')
+  const [scopes, setScopes] = useState<Scope[]>([...ASKS, ...MODERATION_ASKS])
+
+  useEffect(() => {
+    const off = window.moho.onEvent((e) => {
+      if (!busy || !e.event.startsWith('twitchLogin')) return
+      const d = e.data as { detail?: string; scopes?: Scope[]; userCode?: string }
+      if (e.event === 'twitchLoginCode') {
+        if (d.scopes) setScopes(d.scopes)
+        if (d.userCode) setUserCode(d.userCode)
+      }
+      else if (e.event === 'twitchLoginStatus') setDetail(d.detail || '')
+    })
+    return off
+  }, [busy])
+
+  const begin = (): void => {
+    setBusy(true)
+    setDetail('')
+    void window.moho
+      .twitchSignIn({ useTor })
+      .then((r) => {
+        if (r.ok) {
+          store.toast('info', 'Signed in to Twitch for chat and video')
+          void store.refreshAccounts()
+          onDone()
+        } else if (r.error && r.error !== 'cancelled') {
+          store.toast('error', r.error)
+        }
+      })
+      .catch((e: Error) => store.toast('error', e.message))
+      .finally(() => {
+        setBusy(false)
+        setDetail('')
+        setUserCode('')
+        void store.refreshAccounts()
+      })
+  }
+
+  if (busy) {
+    return (
+      <div className="add-form">
+        <p>Sign in on twitch.tv in the window that opened. It then goes to Twitch's "Activate your device" page, where moho types this code in for you; then press Authorize.</p>
+        {userCode && (
+          <div className="field-row">
+            <strong className="twitch-code" aria-label="Your sign-in code">
+              {userCode}
+            </strong>
+            <button type="button" className="button subtle" onClick={() => void window.moho.copyText(userCode)}>
+              Copy code
+            </button>
+          </div>
+        )}
+        <p className="small muted">
+          moho will be allowed to: {scopes.map((s) => s.why).join(', ')}. Twitch lists the same on its own page. You can end it any time at
+          twitch.tv/settings/connections, and removing the account here ends it too. Closing the window cancels the sign-in.
+        </p>
+        {detail && <p className="small muted">{detail}…</p>}
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <p className="small muted">
+        One sign-in on twitch.tv, in a window that opens here: typed on Twitch's own page, never seen by moho. It signs you in for
+        chat and for video together, so video plays as you. It asks to be allowed to: {scopes.map((s) => s.why).join(', ')}.
+      </p>
+      <div className="field-row">
+        <button type="button" className="button primary" onClick={begin}>
+          {label}
+        </button>
+        {children}
+      </div>
+    </>
+  )
+}

src/renderer/src/components/UserFooter.tsx

@@ -58,7 +58,7 @@ export function UserFooter({ account }: { account?: Account }): JSX.Element {
   const detail = details[account.id]
   // A signed-out Kick account is a reader: it has no presence to show, and
   // "Online" claimed one.
-  const watching = account.service === 'kick' && !account.hasPassword && status !== 'connecting' && status !== 'offline'
+  const watching = (account.service === 'kick' || account.service === 'twitch') && !account.hasPassword && status !== 'connecting' && status !== 'offline'
   // Mute and deafen are the whole client's, for whatever call is up - so
   // shown on a service that has calls, or anywhere while one is running,
   // and not beside an IRC or Kick account with nothing to apply them to.

src/renderer/src/components/VideoPlayer.tsx

@@ -0,0 +1,248 @@
+import { useEffect, useRef, useState } from 'react'
+import { Icon } from './Icon'
+import { classes } from '../lib/util'
+import { useStore } from '../state/hooks'
+
+/**
+ * A video with the same controls on every service, drawn over the picture: play, a seek bar, the volume (which opens
+ * out to a slider when the pointer is on it), the time (a click shows what is left instead of what has passed), the
+ * speed, and full screen - which is the player's own, not a viewer's. Down the right at the top: save it, and edit the
+ * message it is in when that message is the person's own.
+ *
+ * Over a real `<video>` element, so the rest of the window still sees a video: the "fetch it again" recovery for a
+ * cached file that has gone listens for that element failing.
+ */
+const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2]
+
+/** The volume one video was left at is the volume of the next. */
+let lastVolume = 1
+let lastMuted = false
+
+function clock(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return '0:00'
+  const whole = Math.floor(seconds)
+  const h = Math.floor(whole / 3600)
+  const m = Math.floor((whole % 3600) / 60)
+  const s = whole % 60
+  return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}` : `${m}:${String(s).padStart(2, '0')}`
+}
+
+export function VideoPlayer({
+  src,
+  className,
+  style,
+  loop,
+  autoPlay,
+  filename,
+  saveFrom,
+  onEdit,
+  onError
+}: {
+  src: string
+  className?: string
+  style?: React.CSSProperties
+  loop: boolean
+  autoPlay: boolean
+  filename?: string
+  /** What to save: the original where there is one, else what is playing. */
+  saveFrom?: string
+  /** Present when the message the video is in can be edited by this person. */
+  onEdit?: () => void
+  onError: () => void
+}): JSX.Element {
+  const store = useStore()
+  const wrap = useRef<HTMLDivElement>(null)
+  const video = useRef<HTMLVideoElement>(null)
+  const [playing, setPlaying] = useState(false)
+  const [time, setTime] = useState(0)
+  const [length, setLength] = useState(0)
+  const [remaining, setRemaining] = useState(false)
+  const [volume, setVolume] = useState(lastVolume)
+  const [muted, setMuted] = useState(lastMuted)
+  const [rate, setRate] = useState(1)
+  const [speeds, setSpeeds] = useState(false)
+  const [full, setFull] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    const v = video.current
+    if (!v) return
+    v.volume = lastVolume
+    v.muted = lastMuted
+  }, [])
+
+  useEffect(() => {
+    const onFull = (): void => setFull(document.fullscreenElement === wrap.current)
+    document.addEventListener('fullscreenchange', onFull)
+    return () => document.removeEventListener('fullscreenchange', onFull)
+  }, [])
+
+  // The speed list closes on a click anywhere else.
+  useEffect(() => {
+    if (!speeds) return
+    const away = (e: MouseEvent): void => {
+      if (!(e.target as HTMLElement | null)?.closest('.vp-speed')) setSpeeds(false)
+    }
+    document.addEventListener('mousedown', away)
+    return () => document.removeEventListener('mousedown', away)
+  }, [speeds])
+
+  const toggle = (): void => {
+    const v = video.current
+    if (!v) return
+    if (v.paused) void v.play().catch(() => {})
+    else v.pause()
+  }
+
+  const seek = (to: number): void => {
+    const v = video.current
+    if (v) v.currentTime = to
+  }
+
+  const setLevel = (level: number): void => {
+    const v = video.current
+    if (!v) return
+    v.volume = level
+    v.muted = level === 0
+    lastVolume = level || lastVolume
+    lastMuted = level === 0
+  }
+
+  const mute = (): void => {
+    const v = video.current
+    if (!v) return
+    v.muted = !v.muted
+    lastMuted = v.muted
+    if (!v.muted && v.volume === 0) v.volume = 1
+  }
+
+  const fullScreen = (): void => {
+    if (document.fullscreenElement) void document.exitFullscreen().catch(() => {})
+    else void wrap.current?.requestFullscreen?.().catch(() => {})
+  }
+
+  const save = (): void => {
+    if (saving) return
+    setSaving(true)
+    void window.moho
+      .downloadMedia(saveFrom || src, filename)
+      .then((res) => store.toast(res.error ? 'error' : 'info', res.error ? `Couldn't save: ${res.error}` : `Saved to ${res.path}`))
+      .catch((e: Error) => store.toast('error', `Couldn't save: ${e.message}`))
+      .finally(() => setSaving(false))
+  }
+
+  const shownVolume = muted ? 0 : volume
+  const progress = length > 0 ? (time / length) * 100 : 0
+
+  return (
+    <div ref={wrap} className={classes('vp', playing && 'playing', full && 'full')} style={style}>
+      <video
+        ref={video}
+        className={classes('vp-video', className)}
+        src={src}
+        loop={loop}
+        autoPlay={autoPlay}
+        // Enough to draw the first frame and know how long it is, without pulling megabytes for every video in a
+        // scrolled-past backlog.
+        preload="metadata"
+        playsInline
+        onClick={toggle}
+        onDoubleClick={fullScreen}
+        onPlay={() => setPlaying(true)}
+        onPause={() => setPlaying(false)}
+        onTimeUpdate={(e) => setTime(e.currentTarget.currentTime)}
+        onDurationChange={(e) => setLength(e.currentTarget.duration)}
+        onLoadedMetadata={(e) => setLength(e.currentTarget.duration)}
+        onVolumeChange={(e) => {
+          setVolume(e.currentTarget.volume)
+          setMuted(e.currentTarget.muted)
+        }}
+        onRateChange={(e) => setRate(e.currentTarget.playbackRate)}
+        onError={onError}
+      />
+
+      <div className="vp-top">
+        {onEdit && (
+          <button type="button" className="vp-button" title="Edit message" onClick={onEdit}>
+            <Icon name="edit" size={18} />
+          </button>
+        )}
+        <button type="button" className="vp-button" title="Save to your downloads folder" disabled={saving} onClick={save}>
+          <Icon name={saving ? 'hourglass_empty' : 'download'} size={18} />
+        </button>
+      </div>
+
+      <div className="vp-bar">
+        <input
+          className="vp-seek"
+          type="range"
+          min={0}
+          max={length || 0}
+          step="any"
+          value={Math.min(time, length || 0)}
+          style={{ ['--vp-progress' as string]: `${progress}%` }}
+          aria-label="Seek"
+          onChange={(e) => seek(Number(e.target.value))}
+        />
+        <div className="vp-controls">
+          <button type="button" className="vp-button" title={playing ? 'Pause' : 'Play'} onClick={toggle}>
+            <Icon name={playing ? 'pause' : 'play_arrow'} size={22} fill />
+          </button>
+          <div className="vp-volume">
+            <button type="button" className="vp-button" title={muted ? 'Unmute' : 'Mute'} onClick={mute}>
+              <Icon name={shownVolume === 0 ? 'volume_off' : shownVolume < 0.5 ? 'volume_down' : 'volume_up'} size={20} fill />
+            </button>
+            <input
+              className="vp-level"
+              type="range"
+              min={0}
+              max={1}
+              step="0.01"
+              value={shownVolume}
+              style={{ ['--vp-progress' as string]: `${shownVolume * 100}%` }}
+              aria-label="Volume"
+              onChange={(e) => setLevel(Number(e.target.value))}
+            />
+          </div>
+          <button
+            type="button"
+            className="vp-time"
+            title={remaining ? 'Showing the time left; click for the time passed' : 'Showing the time passed; click for the time left'}
+            onClick={() => setRemaining((r) => !r)}
+          >
+            {remaining ? `-${clock(Math.max(0, length - time))}` : clock(time)}
+          </button>
+          <span className="vp-fill" />
+          <div className="vp-speed">
+            <button type="button" className="vp-button" title="Playback speed" aria-haspopup="menu" aria-expanded={speeds} onClick={() => setSpeeds((o) => !o)}>
+              <Icon name="speed" size={20} />
+              {rate !== 1 && <span className="vp-rate">{rate}×</span>}
+            </button>
+            {speeds && (
+              <div className="vp-speeds" role="menu">
+                {SPEEDS.map((s) => (
+                  <button
+                    key={s}
+                    type="button"
+                    role="menuitemradio"
+                    aria-checked={rate === s}
+                    className={classes('vp-speed-option', rate === s && 'on')}
+                    onClick={() => {
+                      if (video.current) video.current.playbackRate = s
+                      setSpeeds(false)
+                    }}
+                  >
+                    {s === 1 ? 'Normal' : `${s}×`}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <button type="button" className="vp-button" title={full ? 'Exit full screen' : 'Full screen'} onClick={fullScreen}>
+            <Icon name={full ? 'fullscreen_exit' : 'fullscreen'} size={20} />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/renderer/src/components/VideoStage.tsx

@@ -7,6 +7,12 @@ import { classes } from '../lib/util'
 const EDGE = 4
 /** The narrowest the corner panel may be made: its controls still fit. */
 const MIN_PIP_WIDTH = 240
+/** The tallest and shortest the picture above a conversation may be made. */
+const MIN_INLINE_HEIGHT = 140
+
+/** Which edge or corner of the corner panel is held: top, bottom, left, right and their corners. */
+type Edge = 't' | 'b' | 'l' | 'r' | 'tl' | 'tr' | 'bl' | 'br'
+const EDGES: Edge[] = ['t', 'b', 'l', 'r', 'tl', 'tr', 'bl', 'br']
 
 /**
  * The frame a moving picture lives in, whatever is feeding it.
@@ -42,6 +48,8 @@ export function VideoStage({
   onPopOut,
   /** Back from that window into moho. */
   onBringBack,
+  height,
+  onHeight,
   children
 }: {
   /** Above the conversation, in a corner of the window, or a window of its own. */
@@ -57,6 +65,9 @@ export function VideoStage({
   controls?: ReactNode
   onPopOut?: () => void
   onBringBack?: () => void
+  /** Inline only: how tall the picture is now, and how to change it. `null` puts it back to what it was. */
+  height?: number
+  onHeight?: (height: number | null, commit: boolean) => void
   children: ReactNode
 }): JSX.Element {
   const panel = useRef<HTMLDivElement>(null)
@@ -83,7 +94,8 @@ export function VideoStage({
    */
   const [savedWidth, setSavedWidth] = usePref<number | null>('ui.pipWidth', null)
   const [width, setWidth] = useState(savedWidth)
-  const sizing = useRef<{ x: number; w: number; h: number; right: number; bottom: number } | null>(null)
+  const sizing = useRef<{ x: number; y: number; w: number; dir: Edge; left: number; top: number; right: number; bottom: number } | null>(null)
+  const rise = useRef<{ y: number; h: number } | null>(null)
 
   /**
    * Where the panel may be put, in the coordinates it is positioned in.
@@ -167,15 +179,16 @@ export function VideoStage({
   }
 
   /**
-   * Resizing from the top-left corner - the inside corner, for a panel that
-   * starts in the bottom-right - so the edges against the window stay put and
-   * the panel grows towards the middle of it.
+   * Resizing from any edge or corner. The picture keeps its shape, so every handle changes the width and the
+   * height follows. The side opposite the one held stays where it is: the edges against the window stay put when
+   * the panel is grown from the inside, and the panel grows towards the middle of the window.
    */
-  const startResize = (e: PointerEvent<HTMLDivElement>): void => {
+  const startResize = (e: PointerEvent<HTMLDivElement>, dir: Edge): void => {
     const box = panel.current?.getBoundingClientRect()
     if (!box) return
-    const corner = local(box.right, box.bottom)
-    sizing.current = { x: e.clientX, w: box.width, h: box.height, right: corner.x, bottom: corner.y }
+    const from = local(box.left, box.top)
+    const to = local(box.right, box.bottom)
+    sizing.current = { x: e.clientX, y: e.clientY, w: box.width, dir, left: from.x, top: from.y, right: to.x, bottom: to.y }
     e.currentTarget.setPointerCapture(e.pointerId)
     e.preventDefault()
     e.stopPropagation()
@@ -186,11 +199,22 @@ export function VideoStage({
     if (!from) return
     const room = (panel.current?.offsetParent as HTMLElement | null)?.getBoundingClientRect()
     const largest = Math.max(MIN_PIP_WIDTH, (room?.width ?? window.innerWidth) * 0.9)
-    const w = Math.round(Math.min(Math.max(from.w + (from.x - e.clientX), MIN_PIP_WIDTH), largest))
-    setWidth(w)
+    const sideways = from.dir.includes('r') ? e.clientX - from.x : from.dir.includes('l') ? from.x - e.clientX : 0
+    const upwards = (from.dir.includes('b') ? e.clientY - from.y : from.dir.includes('t') ? from.y - e.clientY : 0) * (16 / 9)
+    // A corner follows whichever way it was pulled further.
+    const grow = Math.abs(sideways) >= Math.abs(upwards) ? sideways : upwards
+    setWidth(Math.round(Math.min(Math.max(from.w + grow, MIN_PIP_WIDTH), largest)))
   }
 
-  // The bottom-right corner stays where it was while the panel is resized.
+  /** Where the panel's top-left goes for the size it came out at, with the far side held. */
+  const anchored = (from: NonNullable<typeof sizing.current>, box: DOMRect): { x: number; y: number } =>
+    clamp(
+      // Held by its left when it was pulled from the right; otherwise by its right (the corner it starts in).
+      from.dir.includes('r') ? from.left : from.right - box.width,
+      from.dir.includes('b') ? from.top : from.bottom - box.height
+    )
+
+  // The far corner stays where it was while the panel is resized.
   // Placed from the size the panel actually came out at, not a guess at it:
   // the title and controls do not grow with the picture, so scaling the whole
   // height drifted the bottom edge up the screen.
@@ -198,7 +222,8 @@ export function VideoStage({
     const from = sizing.current
     const box = panel.current?.getBoundingClientRect()
     if (!from || !box) return
-    setSpot(clamp(from.right - box.width, from.bottom - box.height))
+    setSpot(anchored(from, box))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [width, clamp])
 
   const endResize = (e: PointerEvent<HTMLDivElement>): void => {
@@ -215,13 +240,33 @@ export function VideoStage({
     requestAnimationFrame(() =>
       requestAnimationFrame(() => {
         const box = panel.current?.getBoundingClientRect()
-        const rest = box ? clamp(from.right - box.width, from.bottom - box.height) : null
+        const rest = box ? anchored(from, box) : null
         if (rest) setSpot(rest)
         setSaved(rest)
       })
     )
   }
 
+  // Above a conversation, the picture is resized by its bottom edge.
+  const startRise = (e: PointerEvent<HTMLDivElement>): void => {
+    rise.current = { y: e.clientY, h: height ?? 0 }
+    e.currentTarget.setPointerCapture(e.pointerId)
+    e.preventDefault()
+  }
+  const onRise = (e: PointerEvent<HTMLDivElement>): void => {
+    if (!rise.current || !onHeight) return
+    const view = e.currentTarget.ownerDocument.defaultView ?? window
+    onHeight(Math.round(Math.min(Math.max(rise.current.h + e.clientY - rise.current.y, MIN_INLINE_HEIGHT), view.innerHeight * 0.8)), false)
+  }
+  const endRise = (e: PointerEvent<HTMLDivElement>): void => {
+    if (!rise.current || !onHeight) return
+    const view = e.currentTarget.ownerDocument.defaultView ?? window
+    const done = Math.round(Math.min(Math.max(rise.current.h + e.clientY - rise.current.y, MIN_INLINE_HEIGHT), view.innerHeight * 0.8))
+    rise.current = null
+    e.currentTarget.releasePointerCapture(e.pointerId)
+    onHeight(done, true)
+  }
+
   /** Where it sits: the corner it started in, or where it was put. */
   const placed =
     mode === 'pip'
@@ -254,18 +299,19 @@ export function VideoStage({
 
   return (
     <div className={classes('call-stage', mode === 'pip' && 'pip', mode === 'window' && 'in-window')} ref={panel} style={placed}>
-      {mode === 'pip' && (
-        // A grip in the inside corner, the way a window is resized from its
-        // corner.
-        <div
-          className="call-stage-resize"
-          title="Drag to resize"
-          onPointerDown={startResize}
-          onPointerMove={onResize}
-          onPointerUp={endResize}
-          onPointerCancel={endResize}
-        />
-      )}
+      {mode === 'pip' &&
+        // Any edge or corner, the way a window is resized.
+        EDGES.map((dir) => (
+          <div
+            key={dir}
+            className={`call-stage-resize edge-${dir}`}
+            title="Drag to resize"
+            onPointerDown={(e) => startResize(e, dir)}
+            onPointerMove={onResize}
+            onPointerUp={endResize}
+            onPointerCancel={endResize}
+          />
+        ))}
       {mode === 'window' && (
         // A window of its own has no frame, so this is its title bar: it moves
         // the window, and carries the two things a window is done with.
@@ -300,6 +346,18 @@ export function VideoStage({
 
       {children}
 
+      {mode === 'inline' && onHeight && (
+        <div
+          className="stage-resize"
+          title="Drag to resize · double-click to reset"
+          onPointerDown={startRise}
+          onPointerMove={onRise}
+          onPointerUp={endRise}
+          onPointerCancel={endRise}
+          onDoubleClick={() => onHeight(null, true)}
+        />
+      )}
+
       <div className="call-stage-controls">
         {/* Which conversation this belongs to, because the picture no longer
             sits under it: it outlives looking at something else. */}

src/renderer/src/components/settings/SettingsPanel.tsx

@@ -6,6 +6,7 @@ import {
   DirectorySetting,
   SavedMark,
   SettingsSection,
+  DropdownSetting,
   SelectionSetting,
   StringSetting,
   ToggleSetting,
@@ -17,6 +18,7 @@ import { acceleratorLabel, acceleratorOf } from '../../lib/accelerator'
 import { AccountsPanel } from '../AccountsPanel'
 import { DownloadsPanel } from '../DownloadsPanel'
 import { humanBytes } from '../../lib/util'
+import { DEFAULT_SEARCH_ENGINE, SEARCH_ENGINES, validTemplate } from '../../lib/searchengines'
 import { TunnelAllSwitch, useNetSettings } from './Tunnel'
 import type { Account, DccPrefs } from '../../../../shared/wire'
 
@@ -126,6 +128,8 @@ const CATEGORIES: { id: string; label: string; group: string; icon?: string; ser
   { id: 'discord', label: 'Discord', group: 'Networks', service: 'discord' },
   { id: 'matrix', label: 'Matrix', group: 'Networks', service: 'matrix' },
   { id: 'kick', label: 'Kick', group: 'Networks', service: 'kick' },
+  { id: 'twitch', label: 'Twitch', group: 'Networks', service: 'twitch' },
+  { id: 'telegram', label: 'Telegram', group: 'Networks', service: 'telegram' },
   { id: 'about', label: 'About', group: 'About' }
 ]
 
@@ -244,6 +248,10 @@ function Page({ id }: { id: string }): JSX.Element | null {
       return <DiscordSettings />
     case 'kick':
       return <KickSettings />
+    case 'twitch':
+      return <TwitchSettings />
+    case 'telegram':
+      return <TelegramSettings />
     case 'about':
       return <AboutSettings />
     default:
@@ -840,6 +848,41 @@ function AppearanceSettings(): JSX.Element {
   )
 }
 
+/**
+ * Which search engine "Search for…" uses on selected text. The search opens in
+ * the system's default browser, so moho sends the engine nothing itself - and
+ * neither Tor nor a proxy set up here applies to it.
+ */
+function SearchSettings(): JSX.Element {
+  const [engine] = usePref<string>('search.engine', DEFAULT_SEARCH_ENGINE)
+  const [custom] = usePref<string>('search.customUrl', '')
+  return (
+    <SettingsSection
+      title="Search"
+      description="Select text in a message, right-click it and search for it on the web. The search opens in your default browser, outside moho, so it does not go through Tor or a proxy set here."
+    >
+      <DropdownSetting
+        settingKey="search.engine"
+        label="Search engine"
+        defaultValue={DEFAULT_SEARCH_ENGINE}
+        options={SEARCH_ENGINES.map((e) => ({ label: e.label, value: e.id }))}
+      />
+      {engine === 'custom' && (
+        <StringSetting
+          settingKey="search.customUrl"
+          label="Address"
+          description={
+            custom && !validTemplate(custom)
+              ? 'Not usable yet: it has to start with http:// or https:// and contain %s where the search goes.'
+              : 'A web address with %s where the search goes, for example https://example.org/search?q=%s'
+          }
+          placeholder="https://example.org/search?q=%s"
+        />
+      )}
+    </SettingsSection>
+  )
+}
+
 function GeneralSettings(): JSX.Element {
   const [defaultDir, setDefaultDir] = useState('')
   useEffect(() => {
@@ -885,6 +928,8 @@ function GeneralSettings(): JSX.Element {
         />
       </SettingsSection>
 
+      <SearchSettings />
+
       <SettingsSection title="Media">
         <ToggleSetting
           settingKey="media.autoplay"
@@ -1222,6 +1267,137 @@ function KickSettings(): JSX.Element {
           defaultValue={true}
         />
       </SettingsSection>
+
+      <SettingsSection
+        title="Badges"
+        description="Kick's level, founder and event badges, and a channel's own, drawn as pictures beside a name. Moderator, subscriber and the like stay as words."
+      >
+        <ToggleSetting
+          settingKey="kick.showBadgePictures"
+          label="Show badge pictures"
+          description="Loaded from Kick's servers as they are shown"
+          defaultValue={true}
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        title="Messages Kick removes"
+        description="When a moderator or Kick's automatic moderation takes a message down. The text is kept, so you can still see what was said."
+      >
+        <SelectionSetting
+          settingKey="kick.removedMessages"
+          label="Removed messages"
+          description="Struck through in red keeps what was said beside the fact that it is gone"
+          defaultValue="strike"
+          options={[
+            { label: 'Delete', value: 'remove' },
+            { label: 'Strikethrough', value: 'strike' },
+            { label: 'Replace with notice', value: 'replace' }
+          ]}
+        />
+      </SettingsSection>
+    </>
+  )
+}
+
+/**
+ * Twitch. What is here is what the plan (Gitea issue #55) has built so far:
+ * where a channel's recent past comes from, and what is said about signing in.
+ */
+function TelegramSettings(): JSX.Element {
+  return (
+    <>
+      <SettingsSection
+        title="Telegram"
+        description="Each account signs in with its own api_id and api_hash, which Telegram gives you at my.telegram.org/apps, and one session that moho keeps and reuses. It never asks for a new code just because the connection dropped. Add an account from the Accounts pane."
+      />
+
+      <SettingsSection
+        title="Where moho shows up"
+        description="Telegram lists every session of an account under Settings → Devices in its own apps, named after this computer, for example “moho (linux x86_64)”. Ending it there signs moho out; moho then says so and stops, rather than signing in again."
+      />
+
+      <SettingsSection
+        title="Muting and notifications"
+        description="Muting a chat from its menu is Telegram's own mute for the account, so it holds on your phone as well, and a chat you muted on your phone is muted here."
+      />
+
+      <SettingsSection
+        title="What moho does not do"
+        description="Secret chats, voice and video calls, stories, payments and bots' inline mode are not part of moho. Signing in by QR code, folders, forum topics, drafts and scheduled messages are not done yet."
+      />
+    </>
+  )
+}
+
+function TwitchSettings(): JSX.Element {
+  return (
+    <>
+      <SettingsSection
+        title="Twitch"
+        description="Channels are opened from the Join panel by name. Twitch's chat is public, so an account that never signs in still reads every channel; signing in adds talking and the channels you follow. Add an account from the Accounts pane."
+      />
+
+      <SettingsSection
+        title="What to show besides chat"
+        description="The same choices as Kick's: one setting covers a kind of event on both services."
+      >
+        <ToggleSetting settingKey="kick.showSubscriptions" label="Show subscriptions and gifted subs" defaultValue={true} />
+        <ToggleSetting settingKey="kick.showRaids" label="Show raids" defaultValue={true} />
+        <ToggleSetting
+          settingKey="kick.showModeration"
+          label="Show timeouts and bans"
+          description="What a moderator did, which everybody in the channel can see happening anyway"
+          defaultValue={true}
+        />
+        <SelectionSetting
+          settingKey="kick.removedMessages"
+          label="Removed messages"
+          description="When a moderator takes a message down. The text is kept, so you can still see what was said."
+          defaultValue="strike"
+          options={[
+            { label: 'Delete', value: 'remove' },
+            { label: 'Strikethrough', value: 'strike' },
+            { label: 'Replace with notice', value: 'replace' }
+          ]}
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        title="Badges"
+        description="Twitch's own pictures beside a name: the channel's subscriber badge, moderator, VIP and the rest. With pictures off, the roles that have a short word are shown as that word."
+      >
+        <ToggleSetting
+          settingKey="kick.showBadgePictures"
+          label="Show badge pictures"
+          description="Loaded from Twitch's servers as they are shown. The same switch as Kick's."
+          defaultValue={true}
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        title="Watching"
+        description="Twitch gives channel points for time spent watching, and counts it from a short report its own player sends once a minute. Moho plays the video itself, so while a Twitch stream is playing in the window (not paused, minimised or hidden) and you are signed in, it sends that same report for the channel, once a minute, and nothing when the channel is not live. It claims nothing and sends no more often than that."
+      >
+        <ToggleSetting settingKey="twitch.reportWatching" label="Report watching to Twitch" defaultValue={true} />
+      </SettingsSection>
+
+      <SettingsSection
+        title="Polls, predictions and raids"
+        description="Shown as they happen, for every channel you have open, from the same live service twitch.tv's own pages use, which needs no account. You can vote and bet channel points from here, as your twitch.tv session; each only when you press its button. Moho does not claim the bonus chest and sends nothing to earn points faster."
+      />
+
+      <SettingsSection
+        title="Recent messages"
+        description="Twitch keeps no chat history, so a channel you open starts empty and fills as people speak."
+      >
+        <ToggleSetting
+          settingKey="twitch.recentHistory"
+          label="Fill a channel with its recent messages"
+          description="Asks recent-messages.robotty.de, a service run by a third party that remembers each channel's last few hundred lines. It is told which channel you open, through the account's route. Off until you turn it on."
+          defaultValue={false}
+        />
+      </SettingsSection>
     </>
   )
 }
@@ -1356,6 +1532,18 @@ function DiscordSettings(): JSX.Element {
   }
 
   return (
+    <>
+    <SettingsSection
+      title="Typing"
+      description="Discord's own apps tell others when you are typing. A client that is not Discord's own is told apart from them by exactly this kind of traffic, and accounts using one have been flagged, so moho does not send it unless you turn it on. You still see when other people are typing."
+    >
+      <ToggleSetting
+        settingKey="discord.sendTyping"
+        label="Tell others when I am typing"
+        description="Sends Discord's typing notice, at most once every eight seconds in a conversation."
+        defaultValue={false}
+      />
+    </SettingsSection>
     <SettingsSection
       title="Scrollback"
       description="Re-reads the last 50 messages of every Discord conversation on every account and stores any that are missing here. Nothing already stored is changed. A conversation takes about a third of a second, so a large account takes a few minutes."
@@ -1368,6 +1556,7 @@ function DiscordSettings(): JSX.Element {
       </div>
       {result && <p className="small muted">{result}</p>}
     </SettingsSection>
+    </>
   )
 }
 

src/renderer/src/components/settings/controls.tsx

@@ -158,6 +158,40 @@ export function SelectionSetting({
   )
 }
 
+/** A choice among too many to lay out as buttons: a drop-down of them. */
+export function DropdownSetting({
+  settingKey,
+  label,
+  description,
+  defaultValue,
+  options
+}: {
+  settingKey: string
+  label: string
+  description?: string
+  defaultValue: string
+  options: { label: string; value: string }[]
+}): JSX.Element {
+  const [value, setValue] = usePref<string>(settingKey, defaultValue)
+  return (
+    <div className="setting-row">
+      <div className="setting-text">
+        <div>{label}</div>
+        {description && <div className="small muted">{description}</div>}
+      </div>
+      <div className="setting-actions">
+        <select className="text-field" value={value} aria-label={label} onChange={(e) => setValue(e.target.value)}>
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  )
+}
+
 /**
  * A folder chosen through the system picker, with the platform default shown
  * (and used) until the user overrides it.

src/renderer/src/lib/composeFormat.test.ts

@@ -69,6 +69,21 @@ describe('serialising the box', () => {
   })
 })
 
+describe('what the browser makes in the box', () => {
+  it('reads its own bold, italic, underline and strikethrough as ours', () => {
+    const made = box(el('B', [text('b')]), text(' '), el('I', [text('i')]), text(' '), el('U', [text('u')]), text(' '), el('STRIKE', [text('s')]))
+    expect(serialize(made, 'discord')).toBe('**b** *i* __u__ ~~s~~')
+    expect(serialize(made, 'sneedchat')).toBe('[b]b[/b] [i]i[/i] [u]u[/u] [s]s[/s]')
+  })
+  it('sees through the plain wrapper put round content when a format is taken off', () => {
+    const wrapped = box(el('SPAN', [text('one '), fmt('bold', [text('two')]), text(' three')], { plain: '' }))
+    expect(serialize(wrapped, 'discord')).toBe('one **two** three')
+  })
+  it('does not say bold twice for bold inside bold', () => {
+    expect(serialize(box(el('B', [fmt('bold', [text('x')])])), 'discord')).toBe('**x**')
+  })
+})
+
 describe('markup details', () => {
   it('fences code with more backticks than it holds', () => {
     expect(wrap('discord', 'code', 'a`b')).toBe('``a`b``')
@@ -94,3 +109,13 @@ describe('markup details', () => {
     expect(wrap('sneedchat', 'color', 'g', '#00fc00')).toBe('[color=#00fc00]g[/color]')
   })
 })
+
+describe('Telegram formatting', () => {
+  it('is offered the formats the daemon turns into entities, written as Discord reads them', () => {
+    expect(formatsFor('telegram')).toEqual(['bold', 'italic', 'underline', 'strike', 'code', 'spoiler', 'quote'])
+    expect(wrap('telegram', 'bold', 'x')).toBe('**x**')
+    expect(wrap('telegram', 'underline', 'x')).toBe('__x__')
+    expect(wrap('telegram', 'spoiler', 'x')).toBe('||x||')
+    expect(wrap('telegram', 'quote', 'a\nb')).toBe('\n> a\n> b\n')
+  })
+})

src/renderer/src/lib/composeFormat.ts

@@ -21,6 +21,8 @@ const CAPABILITIES: Record<string, FormatKind[]> = {
   discord: ['bold', 'italic', 'underline', 'strike', 'code', 'spoiler', 'quote'],
   // markup.rs in the daemon: bold, italic, strike and code.
   matrix: ['bold', 'italic', 'strike', 'code'],
+  // Written as Markdown, the way Discord reads it, and turned into Telegram's entities by the daemon (telegram/markup.rs).
+  telegram: ['bold', 'italic', 'underline', 'strike', 'code', 'spoiler', 'quote'],
   sneedchat: ['bold', 'italic', 'underline', 'strike', 'code', 'spoiler', 'quote', 'color'],
   // Quote is left out of IRC: a quote is a line of its own, and a newline
   // reaching IRC is a malformed message.
@@ -129,7 +131,7 @@ export function wrap(service: string | undefined, kind: FormatKind, inner: strin
   const trail = inner.match(/\s*$/)?.[0] ?? ''
   const core = inner.slice(lead.length, inner.length - trail.length)
   const marked = (open: string, close = open): string => `${lead}${open}${core}${close}${trail}`
-  const markdown = service === 'discord' || service === 'matrix'
+  const markdown = service === 'discord' || service === 'matrix' || service === 'telegram'
 
   if (service === 'sneedchat') {
     switch (kind) {
@@ -172,11 +174,11 @@ export function wrap(service: string | undefined, kind: FormatKind, inner: strin
         const [open, close] = codeFence(core)
         return marked(open, close)
       }
-      case 'underline': return service === 'discord' ? marked('__') : inner
-      case 'spoiler': return service === 'discord' ? marked('||') : inner
+      case 'underline': return service === 'discord' || service === 'telegram' ? marked('__') : inner
+      case 'spoiler': return service === 'discord' || service === 'telegram' ? marked('||') : inner
       case 'quote': {
-        if (service !== 'discord') return inner
-        // A quote is a line of its own on Discord, however it was typed.
+        if (service !== 'discord' && service !== 'telegram') return inner
+        // A quote is a line of its own on Discord and Telegram, however it was typed.
         const quoted = core.split('\n').map((line) => `> ${line}`).join('\n')
         return `${lead}\n${quoted}\n${trail}`
       }

src/renderer/src/lib/composeFormatDom.test.ts

@@ -0,0 +1,126 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { textNodes, transformFormat } from './composeFormatDom'
+import type { FormatKind } from './composeFormat'
+
+/** What the box says, with the formats marked as they would be on Discord. */
+function marked(root: Node): string {
+  const mark: Record<string, string> = { bold: '**', italic: '_', underline: '__', strike: '~~', code: '`', spoiler: '||', quote: '> ' }
+  return Array.from(root.childNodes)
+    .map((n) => {
+      if (n.nodeType === 3) return n.nodeValue
+      if (n instanceof HTMLElement && n.dataset.fmt === 'color') return `{${n.dataset.color}:${marked(n)}}`
+      if (n instanceof HTMLElement && n.dataset.fmt) return `${mark[n.dataset.fmt]}${marked(n)}${mark[n.dataset.fmt]}`
+      return marked(n)
+    })
+    .join('')
+}
+
+/** A box holding `html`, with `needle` selected in its text. */
+function box(html: string, needle: string): { root: HTMLElement; range: Range } {
+  const root = document.createElement('div')
+  root.innerHTML = html
+  const nodes = textNodes(root)
+  const all = nodes.map((n) => n.nodeValue).join('')
+  const at = all.indexOf(needle)
+  expect(at).toBeGreaterThanOrEqual(0)
+  const locate = (offset: number, preferEnd: boolean): [Text, number] => {
+    let seen = 0
+    for (const n of nodes) {
+      const len = n.nodeValue!.length
+      if (preferEnd ? offset <= seen + len : offset < seen + len) return [n, offset - seen]
+      seen += len
+    }
+    throw new Error('outside')
+  }
+  const range = document.createRange()
+  range.setStart(...locate(at, false))
+  range.setEnd(...locate(at + needle.length, true))
+  return { root, range }
+}
+
+function run(html: string, needle: string, kind: FormatKind, colour?: string): { text: string; selected: string; done: boolean } {
+  const { root, range } = box(html, needle)
+  const done = transformFormat(root, range, kind, colour)
+  return { text: marked(root), selected: range.toString(), done }
+}
+
+const B = (s: string): string => `<span data-fmt="bold">${s}</span>`
+
+describe('putting a format on', () => {
+  it('wraps the selection and leaves it selected', () => {
+    expect(run('one two three', 'two', 'bold')).toEqual({ text: 'one **two** three', selected: 'two', done: true })
+  })
+
+  it('makes a selection that is partly bold all bold, once', () => {
+    const r = run(`one ${B('two')} three four`, 'one two thr', 'bold')
+    expect(r.text).toBe('**one two thr**ee four')
+    expect(r.selected).toBe('one two thr')
+  })
+
+  it('joins a run that ends where the new one begins', () => {
+    expect(run(`${B('ab')}cd`, 'cd', 'bold').text).toBe('**abcd**')
+    expect(run(`ab${B('cd')}`, 'ab', 'bold').text).toBe('**abcd**')
+  })
+
+  it('stacks on another format without breaking it', () => {
+    const r = run('one <span data-fmt="italic">two three</span> four', 'three four', 'bold')
+    expect(r.text).toBe('one _two _**_three_ four**')
+  })
+
+  it('does nothing with nothing selected', () => {
+    const { root, range } = box('one two', 'two')
+    range.collapse(true)
+    expect(transformFormat(root, range, 'bold')).toBe(false)
+    expect(marked(root)).toBe('one two')
+  })
+})
+
+describe('taking a format off', () => {
+  it('takes it off a whole run', () => {
+    expect(run(`one ${B('two')} three`, 'two', 'bold')).toEqual({ text: 'one two three', selected: 'two', done: true })
+  })
+
+  it('takes it off part of a run and leaves the rest of the run bold', () => {
+    const r = run(`one ${B('two three')} four`, 'wo th', 'bold')
+    expect(r.text).toBe('one **t**wo th**ree** four')
+    expect(r.selected).toBe('wo th')
+  })
+
+  it('takes it off the end of a run', () => {
+    expect(run(`one ${B('two three')}`, 'three', 'bold').text).toBe('one **two **three')
+  })
+
+  it('takes it off from two runs side by side when all of the selection has it', () => {
+    expect(run(`${B('one')}${B('two')}`, 'netw', 'bold').text).toBe('**o**ne' + 'tw' + '**o**')
+  })
+
+  it('does not take it off a selection that reaches a space which is not bold: that is put on instead', () => {
+    expect(run(`${B('one')} ${B('two')}`, 'e t', 'bold').text).toBe('**one two**')
+  })
+
+  it('only the format asked for', () => {
+    const r = run('<span data-fmt="bold"><span data-fmt="italic">two</span></span>', 'two', 'bold')
+    expect(r.text).toBe('_two_')
+  })
+})
+
+describe('colour', () => {
+  it('puts a colour on, and a different one replaces it', () => {
+    const on = box('one two', 'two')
+    expect(transformFormat(on.root, on.range, 'color', '#ff0000')).toBe(true)
+    expect(marked(on.root)).toBe('one {#ff0000:two}')
+    expect(transformFormat(on.root, on.range, 'color', '#00ff00')).toBe(true)
+    expect(marked(on.root)).toBe('one {#00ff00:two}')
+    expect(transformFormat(on.root, on.range, 'color')).toBe(true)
+    expect(marked(on.root)).toBe('one two')
+  })
+
+  it('takes no colour that is not a plain hex value', () => {
+    expect(run('one two', 'two', 'color', 'red; background:url(x)').done).toBe(false)
+  })
+
+  it('has nothing to take off when there is no colour', () => {
+    expect(run('one two', 'two', 'color').done).toBe(false)
+  })
+})

src/renderer/src/lib/composeFormatDom.ts

@@ -1,68 +1,327 @@
 import type { FormatKind } from './composeFormat'
 
-/** The nearest enclosing element in the box that stands for `kind`, if any. */
-function holderOf(node: Node | null, root: HTMLElement, kind: FormatKind): HTMLElement | null {
-  for (let n: Node | null = node; n && n !== root; n = n.parentNode) {
-    if (n instanceof HTMLElement && n.dataset.fmt === kind) return n
-  }
-  return null
-}
-
 /** Colours reach a style attribute, so only a plain hex value gets there. */
 const HEX = /^#[0-9a-fA-F]{6}$/
 
+const isRun = (node: Node | null): node is HTMLElement => node instanceof HTMLElement && node.dataset.fmt !== undefined
+const isKind = (node: Node | null, kind: FormatKind): node is HTMLElement => isRun(node) && node.dataset.fmt === kind
+const isMarker = (node: Node | null): boolean => node instanceof HTMLElement && node.dataset.mark !== undefined
+const sameRun = (a: HTMLElement, b: HTMLElement): boolean => a.dataset.fmt === b.dataset.fmt && a.dataset.color === b.dataset.color
+
+function nearestRun(from: Node, root: Node, kind: FormatKind): HTMLElement | null {
+  for (let n: Node | null = from.parentNode; n && n !== root; n = n.parentNode) {
+    if (isKind(n, kind)) return n
+  }
+  return null
+}
+
+function marker(which: 's' | 'e'): HTMLElement {
+  const m = document.createElement('i')
+  m.dataset.mark = which
+  return m
+}
+
 /**
- * Applies a format to what is selected in the box, or takes it off again if
- * the selection is exactly that format already. Returns whether it did
- * anything.
- *
- * Goes through `insertHTML` rather than rearranging nodes, so the box's own
- * undo still steps back over it.
+ * Takes a marker out of every run of `kind` around it, splitting each run in
+ * two at the marker. A start marker ends up in front of the second half and
+ * an end marker behind the first, so what lies between the two markers is
+ * never inside a run that reaches beyond it.
  */
-export function applyFormat(root: HTMLElement, kind: FormatKind, colour?: string): boolean {
-  const selection = window.getSelection()
-  if (!selection || selection.rangeCount === 0) return false
-  const range = selection.getRangeAt(0)
-  if (range.collapsed || !root.contains(range.commonAncestorContainer)) return false
-  root.focus()
-
-  // The selection can be a whole formatted run (it is, right after one is
-  // applied, so another can be stacked on), which names the run's parent as
-  // its ancestor and the run itself only by position.
-  const whole =
-    range.startContainer === range.endContainer && range.endOffset - range.startOffset === 1
-      ? range.startContainer.childNodes[range.startOffset]
-      : null
-  const holder = holderOf(whole ?? range.commonAncestorContainer, root, kind)
-  if (holder && (kind === 'color' ? !colour : holder.textContent === range.toString())) {
-    const around = document.createRange()
-    around.selectNode(holder)
-    selection.removeAllRanges()
-    selection.addRange(around)
-    document.execCommand('insertHTML', false, holder.innerHTML)
-    return true
+function lift(root: Node, point: HTMLElement, kind: FormatKind, atStart: boolean): void {
+  for (let run = nearestRun(point, root, kind); run; run = nearestRun(point, root, kind)) {
+    const rest = document.createRange()
+    if (atStart) rest.setStartBefore(point)
+    else rest.setStartAfter(point)
+    rest.setEnd(run, run.childNodes.length)
+    const tail = run.cloneNode(false) as HTMLElement
+    tail.append(rest.extractContents())
+    run.after(tail)
+    if (atStart) tail.before(point)
+    else run.after(point)
   }
-  if (kind === 'color' && !(colour && HEX.test(colour))) return false
+}
 
-  const scratch = document.createElement('div')
-  scratch.appendChild(range.cloneContents())
-  const colourAttrs = kind === 'color' ? ` data-color="${colour}" style="color:${colour}"` : ''
-  document.execCommand(
-    'insertHTML',
-    false,
-    `<span data-fmt="${kind}"${colourAttrs} data-new="1">${scratch.innerHTML}</span>`
+/** Every text node under `node`, in document order. */
+export function textNodes(node: Node, into: Text[] = []): Text[] {
+  for (const child of Array.from(node.childNodes)) {
+    if (child.nodeType === 3) into.push(child as Text)
+    else textNodes(child, into)
+  }
+  return into
+}
+
+/** Text between two markers, in document order. */
+function textBetween(root: Node, from: Node, to: Node): Text[] {
+  return textNodes(root).filter(
+    (n) =>
+      n.nodeValue &&
+      from.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING &&
+      to.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_PRECEDING
   )
-  // Left selected, so another format can be stacked on without selecting again.
-  const made = root.querySelector('[data-new]')
-  if (made) {
-    made.removeAttribute('data-new')
-    // The run itself rather than its contents: Chromium replaces the whole
-    // element when what is selected is all of what is inside it, which would
-    // swallow the format just applied.
-    const around = document.createRange()
-    around.selectNode(made)
-    selection.removeAllRanges()
-    selection.addRange(around)
+}
+
+function charactersBefore(root: Node, point: Node): number {
+  return textNodes(root).reduce((sum, n) => sum + (point.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_PRECEDING ? n.nodeValue!.length : 0), 0)
+}
+
+/** The point in the text that `count` characters in: a start prefers the beginning of the next piece, an end the finish of the last. */
+function place(root: Node, count: number, atStart: boolean): [Node, number] {
+  const text = textNodes(root)
+  let seen = 0
+  for (const n of text) {
+    const length = n.nodeValue!.length
+    if (atStart ? count < seen + length : count <= seen + length) return [n, count - seen]
+    seen += length
   }
+  const last = text[text.length - 1]
+  return last ? [last, last.nodeValue!.length] : [root, 0]
+}
+
+function unwrap(run: HTMLElement): void {
+  run.replaceWith(...Array.from(run.childNodes))
+}
+
+/** Splits leave runs and wrappers with nothing in them; they would serialise as stray markers. */
+function dropEmpty(parent: Node): void {
+  for (const child of Array.from(parent.childNodes)) {
+    if (child.nodeType === 3) {
+      if (!child.nodeValue) child.remove()
+    } else if (child instanceof HTMLElement && !isMarker(child)) {
+      dropEmpty(child)
+      if (!child.hasChildNodes() && child.nodeName !== 'BR' && child.nodeName !== 'IMG') child.remove()
+    }
+  }
+}
+
+/** Two runs of one format side by side are one run, or they would be marked up twice. Markers between them stay in order. */
+function mergeRuns(parent: Node): void {
+  let child = parent.firstChild
+  while (child) {
+    if (isRun(child)) {
+      const between: Node[] = []
+      let next = child.nextSibling
+      while (next && (isMarker(next) || (next.nodeType === 3 && !next.nodeValue))) {
+        between.push(next)
+        next = next.nextSibling
+      }
+      if (isRun(next) && sameRun(child, next)) {
+        child.append(...between, ...Array.from(next.childNodes))
+        next.remove()
+        continue
+      }
+    }
+    child = child.nextSibling
+  }
+  for (const element of Array.from(parent.childNodes)) if (element instanceof HTMLElement && !isMarker(element)) mergeRuns(element)
+}
+
+/**
+ * The selection of `range` with `kind` put on - or taken off, if all of it
+ * already has it. Works on `root` (a copy of the box, in practice) and
+ * leaves `range` on the same text afterwards. False when there was nothing
+ * to do.
+ *
+ * Applying over text that is part bold makes all of it bold, once, and
+ * taking it off from the middle of a run leaves the rest of the run as it was;
+ * both come from cutting every run of the kind at the selection's ends first.
+ */
+export function transformFormat(root: HTMLElement, range: Range, kind: FormatKind, colour?: string): boolean {
+  if (kind === 'color' && colour && !HEX.test(colour)) return false
+  const start = marker('s')
+  const end = marker('e')
+  const atEnd = range.cloneRange()
+  atEnd.collapse(false)
+  atEnd.insertNode(end)
+  const atStart = range.cloneRange()
+  atStart.collapse(true)
+  atStart.insertNode(start)
+
+  const leave = (done: boolean): boolean => {
+    start.remove()
+    end.remove()
+    return done
+  }
+  if (textBetween(root, start, end).length === 0) return leave(false)
+
+  lift(root, end, kind, false)
+  lift(root, start, kind, true)
+
+  const text = textBetween(root, start, end)
+  const runs = Array.from(root.querySelectorAll<HTMLElement>(`[data-fmt="${kind}"]`)).filter(
+    (run) => start.compareDocumentPosition(run) & Node.DOCUMENT_POSITION_FOLLOWING && end.compareDocumentPosition(run) & Node.DOCUMENT_POSITION_PRECEDING
+  )
+  const covered = text.every((t) => {
+    for (let n: Node | null = t.parentNode; n && n !== root; n = n.parentNode) if (isKind(n, kind)) return true
+    return false
+  })
+
+  if (kind === 'color' && !colour) {
+    if (runs.length === 0) return leave(false)
+  }
+  // A colour is never toggled by choosing it again: a different one replaces.
+  const off = kind === 'color' ? !colour : covered
+  for (const run of runs) unwrap(run)
+  if (!off) {
+    const around = document.createRange()
+    around.setStartAfter(start)
+    around.setEndBefore(end)
+    const span = document.createElement('span')
+    span.dataset.fmt = kind
+    if (kind === 'color' && colour) {
+      span.dataset.color = colour
+      span.style.color = colour
+    }
+    span.append(around.extractContents())
+    around.insertNode(span)
+  }
+
+  dropEmpty(root)
+  mergeRuns(root)
+
+  // The markers say where the selection was, as a count of characters; the
+  // text nodes are about to be joined, and a count survives that.
+  const from = charactersBefore(root, start)
+  const to = charactersBefore(root, end)
+  start.remove()
+  end.remove()
+  root.normalize()
+  range.setStart(...place(root, from, true))
+  range.setEnd(...place(root, to, false))
   return true
 }
+
+/** The formats the browser can make and unmake itself, and its name for each. */
+const NATIVE: Partial<Record<FormatKind, string>> = { bold: 'bold', italic: 'italic', underline: 'underline', strike: 'strikeThrough' }
+
+/** Where a point in the box is, by child positions from the box down, so it can be found again in a copy. */
+function pathOf(root: Node, node: Node, offset: number): number[] {
+  const path = [offset]
+  for (let n: Node = node; n !== root; n = n.parentNode as Node) {
+    path.unshift(Array.prototype.indexOf.call((n.parentNode as Node).childNodes, n))
+  }
+  return path
+}
+
+function resolve(root: Node, path: number[]): [Node, number] {
+  let node = root
+  for (const index of path.slice(0, -1)) node = node.childNodes[index]
+  return [node, path[path.length - 1]]
+}
+
+/**
+ * Applies a format to what is selected in the box, or takes it off again if
+ * all of the selection already has it. Returns whether it did anything.
+ *
+ * The change is worked out on a copy of the box and put back by replacing the
+ * box's contents with one `insertHTML`, so it is a single step of the box's
+ * own undo - and so the browser's habit of keeping the formatting of what a
+ * replacement lands in cannot put back a format that was just taken off.
+ */
+export function applyFormat(root: HTMLElement, kind: FormatKind, colour?: string): boolean {
+  const native = NATIVE[kind]
+  if (native) {
+    // The browser's own bold, italic, underline and strikethrough: it knows how to take them off again from all of a
+    // selection, part of one or the whole box - the last of which the replacement below cannot do, because the
+    // browser keeps the formatting of what it replaces when that is everything in the box - and its undo steps over
+    // them and puts the selection back by itself. Serialising reads the elements it makes as it does ours.
+    root.focus()
+    document.execCommand('styleWithCSS', false, 'false')
+    return document.execCommand(native)
+  }
+  const before = root.innerHTML
+  const beforeSelection = currentSelection(root)
+  const selection = window.getSelection()
+  if (!selection || selection.rangeCount === 0) return false
+  const picked = selection.getRangeAt(0)
+  if (picked.collapsed || !root.contains(picked.commonAncestorContainer)) return false
+  root.focus()
+
+  const copy = root.cloneNode(true) as HTMLElement
+  // Content that begins with plain text is put in a wrapper of its own. The browser keeps the formatting of whatever
+  // it replaces when the replacement is text and the selection is everything inside one formatted run - so taking a
+  // format off all of the box put it straight back - and does not when the replacement starts with an element.
+  const wrapped = copy.firstChild?.nodeType === 3
+  const shift = (path: number[]): number[] => (wrapped ? [0, ...path] : path)
+  if (wrapped) {
+    const wrapper = document.createElement('span')
+    wrapper.dataset.plain = ''
+    wrapper.append(...Array.from(copy.childNodes))
+    copy.append(wrapper)
+  }
+  const range = document.createRange()
+  range.setStart(...resolve(copy, shift(pathOf(root, picked.startContainer, picked.startOffset))))
+  range.setEnd(...resolve(copy, shift(pathOf(root, picked.endContainer, picked.endOffset))))
+  if (!transformFormat(copy, range, kind, colour)) return false
+
+  const start = pathOf(copy, range.startContainer, range.startOffset)
+  const end = pathOf(copy, range.endContainer, range.endOffset)
+  selection.selectAllChildren(root)
+  document.execCommand('insertHTML', false, copy.innerHTML)
+
+  // Left selected, so another format can be stacked on without selecting again.
+  select(root, { start, end })
+  if (beforeSelection) remember({ before, beforeSelection, after: root.innerHTML, afterSelection: { start, end } })
+  return true
+}
+
+interface Picked {
+  start: number[]
+  end: number[]
+}
+
+/** What the box held and had selected either side of a format, so undo and redo can put the selection back. */
+interface Edit {
+  before: string
+  beforeSelection: Picked
+  after: string
+  afterSelection: Picked
+}
+
+const edits: Edit[] = []
+
+function remember(edit: Edit): void {
+  edits.push(edit)
+  if (edits.length > 100) edits.shift()
+}
+
+function currentSelection(root: HTMLElement): Picked | null {
+  const selection = window.getSelection()
+  if (!selection || selection.rangeCount === 0) return null
+  const range = selection.getRangeAt(0)
+  if (!root.contains(range.startContainer) || !root.contains(range.endContainer)) return null
+  return { start: pathOf(root, range.startContainer, range.startOffset), end: pathOf(root, range.endContainer, range.endOffset) }
+}
+
+function select(root: HTMLElement, picked: Picked): void {
+  const selection = window.getSelection()
+  if (!selection) return
+  try {
+    const range = document.createRange()
+    range.setStart(...resolve(root, picked.start))
+    range.setEnd(...resolve(root, picked.end))
+    selection.removeAllRanges()
+    selection.addRange(range)
+  } catch {
+    /* the contents are not built the way they were; the caret is wherever the browser left it */
+  }
+}
+
+/**
+ * Undo and redo step over a format as the whole box being replaced, and the
+ * browser leaves everything selected afterwards - where the next key typed
+ * would replace the message. Called after either, this puts back the
+ * selection that was there at that point, when the box holds exactly what it
+ * held then.
+ */
+export function restoreSelectionAfterHistory(root: HTMLElement, inputType: string): void {
+  const undo = inputType === 'historyUndo'
+  if (!undo && inputType !== 'historyRedo') return
+  const now = root.innerHTML
+  for (let i = edits.length - 1; i >= 0; i--) {
+    const edit = edits[i]
+    if ((undo ? edit.before : edit.after) === now) {
+      select(root, undo ? edit.beforeSelection : edit.afterSelection)
+      return
+    }
+  }
+}

src/renderer/src/lib/format.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import {
   buildSmilieIndex,
+  cheerUrl,
   discordEmojiUrl,
   embedColor,
   emojiPreview,
@@ -14,6 +15,9 @@ import {
   hostnameOf,
   ircFormat,
   normalizeBBCode,
+  sneedGreentext,
+  sneedSameText,
+  sourcePick,
   stripCodeBlocks,
   stripEmbeddedUrls,
   stripQuoteBlocks,
@@ -307,3 +311,80 @@ describe('the forum\'s own files', () => {
     expect(extractMedia('https://i.ibb.co/JRkN8BFv/photo.avif', {}).map((m) => m.kind)).toEqual(['image'])
   })
 })
+
+describe("Twitch's emotes and cheers in a message", () => {
+  it("draws Twitch's own, still and moving, and reads a stored third-party emote as its word", () => {
+    const html = formatMessage('[twitch:emote:25:Kappa] [twitch:aemote:emotesv2_abc:Dance] [twitch:bttv:a1:OMEGALUL] [twitch:7tv:01AB:GAMBA]')
+    expect(html).toContain('emoticons/v2/25/default/dark/2.0')
+    expect(html).toContain('emoticons/v2/emotesv2_abc/animated/dark/2.0')
+    expect(html).toContain('OMEGALUL GAMBA')
+    expect(html).not.toContain('cdn.7tv.app')
+    expect(html).not.toContain('[twitch:')
+    expect(html).toContain('alt="Kappa"')
+  })
+
+  it('draws a cheer as its picture and its amount, at the tier the amount reaches', () => {
+    const html = formatMessage('[twitch:cheer:cheer:250] [twitch:cheer:kappa:5]')
+    expect(html).toContain('actions/cheer/dark/animated/100/2.gif')
+    expect(html).toContain('actions/kappa/dark/animated/1/2.gif')
+    expect(html).toContain('<span class="cheer-amount">250</span>')
+    expect(cheerUrl('Cheer', 10000)).toContain('/cheer/dark/animated/10000/')
+    expect(cheerUrl('cheer', 999)).toContain('/animated/100/')
+  })
+
+  it('shows what the composer would put for one, and nothing for what is not a token', () => {
+    expect(emojiPreview('[twitch:emote:25:Kappa]')?.label).toBe('Kappa')
+    expect(emojiPreview('[twitch:7tv:01AB:GAMBA]')).toBeNull()
+    expect(emojiPreview('[twitch:nonsense:1:x]')).toBeNull()
+    // An id with a slash in it is not an id, and cannot build another address.
+    expect(formatMessage('[twitch:emote:../x:y]')).not.toContain('emoticons/v2/..')
+  })
+})
+
+describe("Sneedchat's greentext", () => {
+  it('is a line that starts with ">", in 4chan\'s green, on that line only', () => {
+    const html = formatMessage('plain\n>be me\nstill plain', { isSneedchat: true })
+    expect(html).toBe('plain<br><span class="greentext">&gt;be me</span><br>still plain')
+    // Anywhere else it is just a character.
+    expect(formatMessage('>not green')).not.toContain('greentext')
+  })
+
+  it("is the same thing whether the site wrapped it in its own colour or not, and its echo matches what was sent", () => {
+    expect(sneedGreentext('[color=#72ff72]>archlinuxwoman')).toBe('>archlinuxwoman')
+    expect(sneedGreentext('[color=#72ff72]>a\nb')).toBe('>a\nb')
+    expect(sneedGreentext('[color=#72ff72]>wrapped[/color]')).toBe('>wrapped')
+    expect(sneedGreentext('[color=#ff0000]red stays')).toBe('[color=#ff0000]red stays')
+    expect(sneedSameText('>archlinuxwoman', '[color=#72ff72]>archlinuxwoman')).toBe(true)
+    expect(sneedSameText('hello', '[color=#72ff72]>hello')).toBe(false)
+  })
+})
+
+describe('markdown escapes', () => {
+  const on = { markdownEscapes: true }
+  it('drops the backslash of an escaped mark, and keeps the mark as text', () => {
+    expect(formatMessage('The Austin Police \\(APD\\) is aware\\. Call 911\\.', on)).toBe('The Austin Police (APD) is aware. Call 911.')
+    expect(formatMessage('a \\* b \\* c', on)).toBe('a * b * c')
+    expect(formatMessage('one \\\\ backslash', on)).toBe('one \\ backslash')
+    expect(formatMessage('Q \\& A', on)).toBe('Q &amp; A')
+  })
+  it('keeps an escaped asterisk from starting bold', () => {
+    expect(formatMessage('\\*not bold\\*', on)).toBe('*not bold*')
+  })
+  it('leaves backslashes alone where nobody asked', () => {
+    expect(formatMessage('a regex \\d+\\.\\d', {})).toBe('a regex \\d+\\.\\d')
+  })
+  it('leaves a backslash before a letter alone even when asked', () => {
+    expect(formatMessage('C:\\Users\\me', on)).toBe('C:\\Users\\me')
+  })
+})
+
+describe('what a picker section sends back', () => {
+  it("is Discord's own token for a custom emoji, never the bare number that names it", () => {
+    expect(sourcePick('discord', { id: '1413156421880647762', name: 'lettyCrazy' })).toBe('<:lettyCrazy:1413156421880647762>')
+    expect(sourcePick('discord', { id: '99', name: 'dance', animated: true })).toBe('<a:dance:99>')
+  })
+  it('leaves the other services as they were', () => {
+    expect(sourcePick('sneedchat', { id: ':lol:' })).toBe(':lol:')
+    expect(sourcePick('steam', { id: 'steam:steambored' })).toBe('[steam:emote:steambored]')
+  })
+})

src/renderer/src/lib/format.ts

@@ -82,6 +82,27 @@ export function kickEmoteUrl(id: string): string {
   return resolveMediaUrl(drawableEmoteUrl(`https://files.kick.com/emotes/${id}/fullsize`))
 }
 
+/**
+ * The picture for one of Twitch's own emotes, by id.
+ *
+ * Public and built from the id, like Discord's and Kick's, so it draws for an
+ * emote this account cannot use, which is the point of one somebody else sent.
+ * The dark-background version, at twice the size: chat is drawn on a dark
+ * surface and an emote is a row's height at most.
+ */
+export function twitchEmoteUrl(id: string, animated = false): string {
+  return resolveMediaUrl(`https://static-cdn.jtvnw.net/emoticons/v2/${encodeURIComponent(id)}/${animated ? 'animated' : 'default'}/dark/2.0`)
+}
+
+/**
+ * The picture for a Twitch cheermote: the prefix's animated picture of the tier the amount reaches. Twitch
+ * has tiers at 1, 100, 1,000, 5,000 and 10,000 bits.
+ */
+export function cheerUrl(prefix: string, amount: number): string {
+  const tier = [10000, 5000, 1000, 100, 1].find((t) => amount >= t) ?? 1
+  return resolveMediaUrl(`https://d3aqoihi2n8ty8.cloudfront.net/actions/${encodeURIComponent(prefix.toLowerCase())}/dark/animated/${tier}/2.gif`)
+}
+
 /**
  * The picture for one of Steam's emoticons or stickers, by name.
  *
@@ -135,6 +156,8 @@ export function emojiPreview(text: string, smilies: SmilieEntry[] = []): EmojiPr
   if (custom) return { src: discordEmojiUrl(custom[2]), label: `:${custom[1]}:` }
   const kick = text.match(/^\[emote:(\d+):([^\]]{0,64})\]$/)
   if (kick) return { src: kickEmoteUrl(kick[1]), label: `:${kick[2]}:` }
+  const twitch = text.match(/^\[twitch:(a?emote):([A-Za-z0-9_]+):([^\]]{0,64})\]$/)
+  if (twitch) return { src: twitchEmoteUrl(twitch[2], twitch[1] === 'aemote'), label: twitch[3] }
   const steam = steamTokenOf(text)
   if (steam) return { src: steamPictureUrl(steam.kind, steam.name), label: `:${steam.name}:` }
   const smilie = smilies.find((s) => s.aliases?.includes(text))
@@ -149,8 +172,28 @@ export function emojiPreview(text: string, smilies: SmilieEntry[] = []): EmojiPr
  * `steam:name` key, which is no message at all: it was inserted as the words
  * "steam:steambored". It leaves as the emoticon token, which the box draws.
  */
-export function sourcePick(service: string, e: { id: string }): string {
-  return service === 'steam' && e.id.startsWith('steam:') ? `[steam:emote:${e.id.slice(6)}]` : e.id
+export function sourcePick(service: string, e: { id: string; name?: string; animated?: boolean }): string {
+  if (service === 'steam' && e.id.startsWith('steam:')) return `[steam:emote:${e.id.slice(6)}]`
+  // Discord's is named by a number alone, which is no message at all: picked from another server's section it went
+  // into the box (and the recent list) as the bare digits. It leaves as the form Discord parses, which the box draws
+  // as its picture - and which Nitro lets any server take.
+  if (service === 'discord' && /^\d+$/.test(e.id)) return `<${e.animated ? 'a' : ''}:${e.name || 'emoji'}:${e.id}>`
+  return e.id
+}
+
+/**
+ * Sneedchat's own greentext: the site turns a line that starts with ">" into the same line wrapped in a
+ * green colour tag (`[color=#72ff72]>text`), so what comes back is never what was typed. Taken back to the
+ * plain ">text", which is what the window draws green itself (4chan's, see `.greentext`) and what a sent
+ * message is matched against.
+ */
+export function sneedGreentext(body: string): string {
+  return body.replace(/^\[color=#72ff72\](>[^\n]*?)(?:\[\/color\])?$/gim, '$1')
+}
+
+/** Whether a Sneedchat line that came back is the one that was sent, allowing for the site's greentext. */
+export function sneedSameText(sent: string, logged: string): boolean {
+  return sent.trim() === sneedGreentext(logged).trim()
 }
 
 /**
@@ -342,6 +385,14 @@ export interface FormatOptions {
    * bold.
    */
   ircFormatting?: 'render' | 'strip'
+  /**
+   * Whether a backslash in front of a punctuation mark is an escape and goes away, leaving the mark as plain text.
+   *
+   * Discord's markdown works that way, and the text it hands over for a link's preview is escaped for it
+   * (`\(APD\)`, `\.`): drawn as it is, the backslashes show. Not elsewhere - a regular expression or a path pasted
+   * into IRC has backslashes that mean themselves.
+   */
+  markdownEscapes?: boolean
 }
 
 /**
@@ -519,6 +570,12 @@ export function formatMessage(text: string, opts: FormatOptions = {}): string {
 
   let out = text
 
+  // Escapes first, so an escaped mark is never read as markdown by a later pass. What follows a backslash is
+  // already HTML-escaped (a `&` is `&amp;` by now), so those forms are matched whole.
+  if (opts.markdownEscapes) {
+    out = out.replace(/\\(&amp;|&lt;|&gt;|&quot;|&#39;|[!#-%(-\/:-@[-`{-~])/g, (_m, mark: string) => stow(mark))
+  }
+
   // Inline `code` spans, stowed before anything else touches them so backticked
   // content is never reinterpreted as markdown or links, and escaped since code
   // commonly contains < > & that would corrupt the parse.
@@ -556,6 +613,20 @@ export function formatMessage(text: string, opts: FormatOptions = {}): string {
     stow(`<img src="${kickEmoteUrl(id)}" class="custom-emoji" alt=":${name}:">`)
   )
 
+  // Twitch's own emotes, which arrive as `[twitch:emote:25:Kappa]`: the id for
+  // the picture and the name for the words, so a screen reader and a copied
+  // line both read "Kappa". Public and named by the token, like the others.
+  out = out.replace(/\[twitch:(a?emote):([A-Za-z0-9_]+):([^\]]{0,64})\]/g, (_m, kind: string, id: string, name: string) =>
+    stow(`<img src="${twitchEmoteUrl(id, kind === 'aemote')}" class="custom-emoji" alt="${name}" title="${name}">`)
+  )
+  // BetterTTV, FrankerFaceZ and 7TV are not drawn (Twitch does not carry them). A line stored while they were
+  // is read as the words it stands for.
+  out = out.replace(/\[twitch:(?:bttv|ffz|7tv):[A-Za-z0-9_]+:([^\]]{0,64})\]/g, '$1')
+  // A cheer: its picture and the amount beside it, as Twitch's chat draws one.
+  out = out.replace(/\[twitch:cheer:([a-z0-9]+):(\d{1,9})\]/g, (_m, prefix: string, amount: string) =>
+    stow(`<img src="${cheerUrl(prefix, Number(amount))}" class="custom-emoji" alt="${prefix}" title="${prefix} ${amount}"><span class="cheer-amount">${amount}</span>`)
+  )
+
   // Steam's emoticons and stickers, which arrive as `[steam:emote:name]`. Like
   // the two above the picture is public and named by the token, so one that
   // somebody else sent draws whether or not this account has it. A sticker is
@@ -664,6 +735,11 @@ export function formatMessage(text: string, opts: FormatOptions = {}): string {
   // A literal "\n" is just collapsible whitespace in HTML; a structured
   // multi-line message (a relay bot's author/link/stats/footer post) would
   // otherwise render as one run-together line.
+  // Sneedchat's greentext: a line that starts with ">" is the green of 4chan's. The text is escaped by now, so
+  // the mark is "&gt;"; a line is closed inside itself, so the wrap cannot straddle another.
+  if (opts.isSneedchat) {
+    out = out.split('\n').map((line) => (line.startsWith('&gt;') ? `<span class="greentext">${line}</span>` : line)).join('\n')
+  }
   out = out.replace(/\n/g, '<br>')
   return out
 }

src/renderer/src/lib/ivsplaylist.test.ts

@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'vitest'
+import { withPrefetch } from './ivsplaylist'
+
+/** A rendition's playlist as Kick's stream serves one: two-second segments, six-second target, two prefetch lines. */
+const playlist = [
+  '#EXTM3U',
+  '#EXT-X-VERSION:3',
+  '#EXT-X-TARGETDURATION:6',
+  '#EXT-X-MEDIA-SEQUENCE:2939',
+  '#EXT-X-PROGRAM-DATE-TIME:2026-10-13T22:58:41.442Z',
+  '#EXTINF:2.000,live',
+  'https://cdn.example/v1/segment/a',
+  '#EXT-X-PROGRAM-DATE-TIME:2026-10-13T22:58:43.442Z',
+  '#EXTINF:2.000,live',
+  'https://cdn.example/v1/segment/b',
+  '#EXT-X-PREFETCH:https://cdn.example/v1/segment/c',
+  '#EXT-X-PREFETCH:https://cdn.example/v1/segment/d',
+  ''
+].join('\n')
+
+describe('a playlist that lists what is being made', () => {
+  it('has each prefetch line become a segment as long as the last complete one, after the complete ones', () => {
+    const lines = withPrefetch(playlist).split('\n').filter(Boolean)
+    expect(lines.slice(-4)).toEqual(['#EXTINF:2.000,prefetch', 'https://cdn.example/v1/segment/c', '#EXTINF:2.000,prefetch', 'https://cdn.example/v1/segment/d'])
+    expect(lines.some((l) => l.startsWith('#EXT-X-PREFETCH'))).toBe(false)
+    expect(lines.filter((l) => l.startsWith('https://')).length).toBe(4)
+  })
+
+  it('can take only some of them, or none', () => {
+    expect(withPrefetch(playlist, 1).split('\n').filter((l) => l.startsWith('https://'))).toHaveLength(3)
+    expect(withPrefetch(playlist, 0)).toBe(playlist)
+  })
+
+  it('is left as it was when it has none, when it is of a stream that has ended, or when nothing is complete to measure by', () => {
+    const plain = playlist.replace(/#EXT-X-PREFETCH:\S+\n/g, '')
+    expect(withPrefetch(plain)).toBe(plain)
+    const ended = `${playlist}#EXT-X-ENDLIST\n`
+    expect(withPrefetch(ended)).toBe(ended)
+    const none = ['#EXTM3U', '#EXT-X-TARGETDURATION:6', '#EXT-X-PREFETCH:https://cdn.example/v1/segment/c', ''].join('\n')
+    expect(withPrefetch(none)).toBe(none)
+  })
+
+  it('keeps everything else about the playlist, in the order it had it', () => {
+    const out = withPrefetch(playlist).split('\n')
+    expect(out.slice(0, 5)).toEqual(playlist.split('\n').slice(0, 5))
+    expect(out).toContain('#EXT-X-PROGRAM-DATE-TIME:2026-10-13T22:58:43.442Z')
+  })
+})
+
+describe('withPrefetch on segments of uneven length', () => {
+  it('leaves the playlist as it is when the last segment is no guide to the next', () => {
+    const playlist = ['#EXTM3U', '#EXTINF:3.200,live', 'a.ts', '#EXTINF:5.166,live', 'b.ts', '#EXT-X-PREFETCH:c.ts', ''].join('\n')
+    expect(withPrefetch(playlist)).toBe(playlist)
+  })
+})
+
+describe('withPrefetch on a Twitch playlist', () => {
+  const twitch = [
+    '#EXTM3U',
+    '#EXT-X-VERSION:6',
+    '#EXT-X-TARGETDURATION:5',
+    '#EXT-X-MEDIA-SEQUENCE:100',
+    '#EXTINF:2.000,live',
+    'https://cdn.example/a.mp4',
+    '#EXTINF:2.000,live',
+    'https://cdn.example/b.mp4',
+    '#EXT-X-TWITCH-PREFETCH:https://cdn.example/c.mp4',
+    '#EXT-X-TWITCH-PREFETCH:https://cdn.example/d.mp4',
+    ''
+  ].join('\n')
+
+  it('leaves the prefetch lines under Twitch name alone: their address is not the finished segment\'s', () => {
+    // Taken as segments, each would change address in the next refresh and hls.js would reject the playlist.
+    expect(withPrefetch(twitch)).toBe(twitch)
+  })
+
+  it('leaves a playlist with none - an ad is playing, and ads are not prefetched - as it is', () => {
+    const ad = twitch.replace(/#EXT-X-TWITCH-PREFETCH:.*\n/g, '').replace(/live/g, 'Amazon|2474283100494')
+    expect(withPrefetch(ad)).toBe(ad)
+  })
+})

src/renderer/src/lib/ivsplaylist.ts

@@ -0,0 +1,112 @@
+import Hls from 'hls.js'
+
+/**
+ * Amazon IVS's low-latency playlists, which Kick's streams are, list what is already complete and then
+ * what is being made: `#EXT-X-PREFETCH:<address>`, one per segment of the next few seconds. The address
+ * answers as soon as it is asked and sends the segment as it is produced, so asking early is the way to
+ * be seconds nearer the broadcaster. IVS's own player does that. hls.js does not know the tag and
+ * leaves it out, which is why a stream played with it runs several seconds behind one played with
+ * IVS's.
+ *
+ * Here each of those lines becomes a segment of the playlist like any other, the same length as the
+ * last complete one, so hls.js asks for it and plays it as it arrives.
+ *
+ * Twitch's playlists carry the same under another name - `#EXT-X-TWITCH-PREFETCH` - and are NOT read this way,
+ * though they once were. An IVS prefetch address is the address the segment will have when it is complete, so a
+ * segment is the same one in the playlist before and after it is made. Twitch's is not: the prefetch address and
+ * the address of the finished segment are different (measured on summit1g's playlists), so a segment taken from a
+ * prefetch line changes address in the next refresh, hls.js sees "media sequence mismatch" for it on every
+ * refresh, and gives up on the rendition every ten seconds or so, which is a picture that goes black and starts
+ * again. Left as they are, hls.js ignores the lines and plays the finished segments, a few seconds nearer the
+ * past and without a stop.
+ */
+/**
+ * The addresses that were listed as prefetch, which hls.js must not judge the connection by: one of
+ * them is sent as it is made, so it takes as long to arrive as it takes to broadcast (two seconds of
+ * picture in two seconds), and bandwidth worked out from that is the stream's own bitrate. Taken for
+ * the connection's, it moved the picture down a rendition at every other segment.
+ */
+const ahead = new Set<string>()
+
+function remember(address: string): void {
+  ahead.add(address)
+  // Only the last few matter; a stream that runs for hours must not grow this for ever.
+  if (ahead.size > 64) ahead.delete(ahead.values().next().value as string)
+}
+
+/** How far apart, in seconds, the longest and shortest segment may be for the next to be taken as their length. */
+const UNIFORM_WITHIN = 0.25
+
+export function withPrefetch(playlist: string, take = 2): string {
+  if (take <= 0 || !/#EXT-X-PREFETCH:/.test(playlist) || playlist.includes('#EXT-X-ENDLIST')) return playlist
+  const lines = playlist.split('\n')
+  const kept: string[] = []
+  const ahead_: string[] = []
+  let length = ''
+  const lengths: number[] = []
+  for (const line of lines) {
+    const prefetch = /^#EXT-X-PREFETCH:(\S+)/.exec(line.trim())
+    if (prefetch) {
+      ahead_.push(prefetch[1])
+      continue
+    }
+    const segment = /^#EXTINF:([0-9.]+)/.exec(line)
+    if (segment) {
+      length = segment[1]
+      lengths.push(Number(segment[1]))
+    }
+    kept.push(line)
+  }
+  // Nothing to say how long they are if no segment is complete yet.
+  if (!length || ahead_.length === 0) return playlist
+  // How long a segment still being made will turn out to be is a guess from the ones before it, and only a
+  // good one where they are all alike. A broadcaster that is not re-encoded by IVS (one that sends its own
+  // segments) has them of 3 to 5 seconds, and a guess of 3 for a segment of 5 leaves a gap the picture then
+  // stops in, every few seconds.
+  if (Math.max(...lengths) - Math.min(...lengths) > UNIFORM_WITHIN) return playlist
+  while (kept.length > 0 && kept[kept.length - 1].trim() === '') kept.pop()
+  for (const address of ahead_.slice(0, take)) {
+    remember(address)
+    kept.push(`#EXTINF:${length},prefetch`, address)
+  }
+  return `${kept.join('\n')}\n`
+}
+
+/**
+ * hls.js's own judge of the connection, told to leave the prefetch segments out of it. See `ahead`.
+ */
+export function ivsAbr(): typeof Hls.DefaultConfig.abrController {
+  const Base = Hls.DefaultConfig.abrController as unknown as new (hls: unknown) => Record<string, unknown>
+  class Abr extends Base {
+    // Private in hls.js's types and called by each of its three handlers that measure a segment.
+    ignoreFragment(frag: { url?: string }): boolean {
+      const parent = (Base.prototype as { ignoreFragment?: (f: unknown) => boolean }).ignoreFragment
+      return ahead.has(frag.url ?? '') || (parent ? parent.call(this, frag) : false)
+    }
+  }
+  return Abr as unknown as typeof Hls.DefaultConfig.abrController
+}
+
+/**
+ * hls.js's own loader, with the playlist of a rendition read through `withPrefetch`. Everything else it
+ * loads - the master playlist, the segments, the captions - is as it was.
+ */
+export function ivsLoader(take = 2): typeof Hls.DefaultConfig.loader {
+  const Base = Hls.DefaultConfig.loader as unknown as new (config: unknown) => {
+    load(context: Record<string, unknown>, config: unknown, callbacks: Record<string, (...args: unknown[]) => void>): void
+  }
+  class Loader extends Base {
+    load(context: Record<string, unknown>, config: unknown, callbacks: Record<string, (...args: unknown[]) => void>): void {
+      if (context.type !== 'level') return super.load(context, config, callbacks)
+      super.load(context, config, {
+        ...callbacks,
+        onSuccess: (response, stats, ctx, details) => {
+          const r = response as { data?: unknown }
+          if (typeof r.data === 'string') response = { ...r, data: withPrefetch(r.data, take) }
+          callbacks.onSuccess(response, stats, ctx, details)
+        }
+      })
+    }
+  }
+  return Loader as unknown as typeof Hls.DefaultConfig.loader
+}

src/renderer/src/lib/mediarestore.ts

@@ -21,7 +21,7 @@ import { resolveMediaUrl } from './util'
 
 /** The caches the daemon can restore from, by folder. Kick's emotes are
  *  not here: lib/emotecache puts Kick's own picture up at once instead. */
-const RESTORABLE = /[\\/]nobilis[\\/](matrix-media|sneedchat-attachments|sneedchat-avatars|discord-thumbnails|discord-icons)[\\/]/
+const RESTORABLE = /[\\/]nobilis[\\/](matrix-media|sneedchat-attachments|sneedchat-avatars|discord-thumbnails|discord-icons|telegram-media|telegram-avatars)[\\/]/
 
 /** Paths being fetched, so a picture drawn twice asks once. */
 const inFlight = new Map<string, Promise<string | null>>()
@@ -54,8 +54,10 @@ function restore(path: string, bufferId?: string, messageId?: string): Promise<s
 }
 
 /** Lets a failure through to the element's own handler after all. */
-function failAfterAll(el: Media): void {
-  el.dataset.restoreGaveUp = '1'
+function failAfterAll(el: Media, path: string): void {
+  // Of this file, not of the element: a picture that falls back from its preview to the original is the same element
+  // with another file, and that one has not been tried.
+  el.dataset.restoreGaveUp = path
   el.dispatchEvent(new Event('error'))
 }
 
@@ -63,19 +65,27 @@ export function restoreMissingMedia(): () => void {
   const onError = (e: Event): void => {
     const el = e.target
     if (!(el instanceof HTMLImageElement || el instanceof HTMLVideoElement || el instanceof HTMLAudioElement)) return
-    if (el.dataset.restoreGaveUp) return
     const path = cachedPath(el)
-    if (!path) return
+    if (!path) {
+      if ((el.currentSrc || el.src).includes('telegram')) console.info(`[restore] a failed picture is not one the daemon can restore: ${(el.currentSrc || el.src).slice(-90)}`)
+      return
+    }
+    if (el.dataset.restoreGaveUp === path) return
     // Known to be past saving, or already restored once for this element and
     // still failing: let it fail as it always did.
-    if (gone.has(path) || el.dataset.restoreTried === path) return
+    if (gone.has(path) || el.dataset.restoreTried === path) {
+      console.info(`[restore] ${path.split(/[\\/]/).slice(-2).join('/')} failed again, not asked for twice`)
+      return
+    }
     el.dataset.restoreTried = path
     e.stopPropagation()
+    console.info(`[restore] ${path.split(/[\\/]/).slice(-2).join('/')} asked for`)
 
     const row = el.closest<HTMLElement>('[data-msg-id]')
     void restore(path, row?.dataset.bufferId, row?.dataset.msgId).then((restored) => {
+      console.info(`[restore] ${path.split(/[\\/]/).slice(-2).join('/')} ${restored ? 'came back' : 'could not be fetched'}`)
       if (!restored) {
-        failAfterAll(el)
+        failAfterAll(el, path)
         return
       }
       // A new URL for the same file, so nothing serves the failure again

src/renderer/src/lib/moderation.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import type { ChatMessage } from '../state/store'
+import { applyRemoved, removedReason, REMOVED_NOTICE } from './moderation'
+
+const said = (id: string, extra: Partial<ChatMessage> = {}): ChatMessage =>
+  ({ id, bufferId: 'b', from: 'x', body: `text ${id}`, ts: 1, isAction: false, isHighlight: false, kind: 'chat', ...extra }) as ChatMessage
+
+const log = [said('a'), said('b', { moderated: { ai: true, rules: ['hate'] }, html: '<b>x</b>', embeds: [{ kind: 'gif' } as never] }), said('c')]
+
+describe('removed messages', () => {
+  it('are left out when that is chosen', () => {
+    expect(applyRemoved(log, 'remove').map((m) => m.id)).toEqual(['a', 'c'])
+  })
+  it('keep their words when struck through is chosen, and the list is the same one', () => {
+    expect(applyRemoved(log, 'strike')).toBe(log)
+  })
+  it('have a notice put where their words were when that is chosen', () => {
+    const [, removed] = applyRemoved(log, 'replace')
+    expect(removed.body).toBe(REMOVED_NOTICE)
+    expect(removed.html).toBeUndefined()
+    expect(removed.embeds).toEqual([])
+    expect(removed.moderated).toEqual({ ai: true, rules: ['hate'], replaced: true })
+    // And only that one.
+    expect(applyRemoved(log, 'replace')[0].body).toBe('text a')
+  })
+  it('change nothing in a log where nothing was removed', () => {
+    const clean = [said('a')]
+    expect(applyRemoved(clean, 'remove')).toBe(clean)
+    expect(applyRemoved(clean, 'replace')).toBe(clean)
+  })
+  it('say why they were removed when they know', () => {
+    expect(removedReason(log[1])).toBe("Removed by Kick's automatic moderation: hate")
+    expect(removedReason(said('d', { moderated: {} }))).toBe('Removed')
+  })
+})

src/renderer/src/lib/moderation.ts

@@ -0,0 +1,32 @@
+import type { ChatMessage } from '../state/store'
+
+/**
+ * What to do with a message the service has taken down. The daemon keeps the
+ * text and says it is gone; this is the window's say in how that looks.
+ */
+export type RemovedMessages = 'remove' | 'strike' | 'replace'
+
+export const REMOVED_NOTICE = 'This message was removed by moderation'
+
+/** What a removed message says it was removed for, for a tooltip. */
+export function removedReason(m: ChatMessage): string {
+  const rules = m.moderated?.rules ?? []
+  const by = m.moderated?.ai ? "Removed by Kick's automatic moderation" : 'Removed'
+  return rules.length > 0 ? `${by}: ${rules.join(', ')}` : by
+}
+
+/**
+ * The messages to draw, with those that were removed handled as chosen:
+ * left out, kept as they were (the row draws them struck through), or with
+ * what they said swapped for a notice. A list with none removed comes back
+ * as it was, so nothing downstream re-renders for a setting it does not use.
+ */
+export function applyRemoved(messages: ChatMessage[], mode: RemovedMessages): ChatMessage[] {
+  if (mode === 'strike' || !messages.some((m) => m.moderated)) return messages
+  if (mode === 'remove') return messages.filter((m) => !m.moderated)
+  return messages.map((m) =>
+    m.moderated
+      ? { ...m, body: REMOVED_NOTICE, html: undefined, embeds: [], attachments: [], components: [], moderated: { ...m.moderated, replaced: true } }
+      : m
+  )
+}

src/renderer/src/lib/recents.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import { isPlainEmoji, recentsHere } from './recents'
+
+describe('recent emoji', () => {
+  const picks = ['👍', '<:pepe:123>', '[emote:99:KEKW]', '[twitch:emote:25:Kappa]', ':lol:', '😂']
+
+  it('are told apart from the stand-ins for somebody\'s own emoji', () => {
+    expect(picks.map(isPlainEmoji)).toEqual([true, false, false, false, false, true])
+  })
+
+  it('offer only what the open conversation can send, and the ordinary emoji everywhere', () => {
+    const here = new Set(['[emote:99:KEKW]', '[twitch:emote:25:Kappa]'])
+    expect(recentsHere(picks, here, true, false)).toEqual(['👍', '[emote:99:KEKW]', '[twitch:emote:25:Kappa]', '😂'])
+    // A Discord emoji from another server, a lapsed unlock, a smilie of another service: not offered.
+    expect(recentsHere(picks, new Set(), true, false)).toEqual(['👍', '😂'])
+  })
+
+  it('wait for the daemon before offering anything that is not an ordinary emoji', () => {
+    expect(recentsHere(picks, new Set(picks), false, false)).toEqual(['👍', '😂'])
+  })
+
+  it('leave out ordinary emoji where the service takes only its own set', () => {
+    const steam = new Set(['[steam:emote:steambored]'])
+    expect(recentsHere(['👍', '[steam:emote:steambored]', '[steam:emote:gone]'], steam, true, true)).toEqual(['[steam:emote:steambored]'])
+  })
+})

src/renderer/src/lib/recents.ts

@@ -0,0 +1,23 @@
+/**
+ * Which of the emoji somebody picked lately may be offered again in the conversation that is open.
+ *
+ * A recent pick is stored as the text that was sent. An emoji that belongs to somewhere else - another Discord
+ * server's, another Kick channel's, a Twitch emote that was unlocked for a day and has lapsed, one that needs a
+ * subscription this account lacks - is something this conversation cannot take, and offering it is offering
+ * something that will not work. So it is left out, on every service. The stored list itself is not touched, so a
+ * pick comes back where it works again.
+ */
+
+/** Whether a pick is an ordinary Unicode emoji and not a stand-in (`<:name:id>`, `[twitch:...]`, `:shortcode:`). */
+export function isPlainEmoji(pick: string): boolean {
+  return !/[A-Za-z0-9_:<>[\]]/.test(pick)
+}
+
+/**
+ * The recent picks that can be sent here. `onOffer` is the text of everything this conversation can send; until the
+ * daemon has said what that is (`loaded`), only the ordinary emoji are shown, and where the service has a fixed set
+ * of its own (Steam's) ordinary emoji are not accepted at all.
+ */
+export function recentsHere(recent: string[], onOffer: ReadonlySet<string>, loaded: boolean, fixedSet: boolean): string[] {
+  return recent.filter((r) => (isPlainEmoji(r) ? !fixedSet : loaded && onOffer.has(r)))
+}

src/renderer/src/lib/replypreview.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import { replyPreviewHtml } from './replypreview'
+
+describe('what a reply quotes, as words', () => {
+  it('draws a Kick emote as its picture, not its code', () => {
+    const html = replyPreviewHtml('[emote:5756632:SUSSY][emote:5756632:SUSSY]', { service: 'kick' })
+    expect(html).not.toContain('[emote:')
+    expect(html.match(/<img /g)).toHaveLength(2)
+    expect(html).toContain('alt=":SUSSY:"')
+  })
+
+  it('draws a Discord custom emoji', () => {
+    const html = replyPreviewHtml('nice <:pog:123456789012345678> and <a:spin:223456789012345678>', { service: 'discord' })
+    expect(html).not.toContain('&lt;:pog')
+    expect(html.match(/<img /g)).toHaveLength(2)
+  })
+
+  it('draws Twitch and Steam emotes and stickers', () => {
+    expect(replyPreviewHtml('[twitch:emote:25:Kappa] hi', { service: 'twitch' })).toMatch(/<img [^>]*alt="Kappa"/)
+    expect(replyPreviewHtml('[twitch:aemote:300:LUL]', { service: 'twitch' })).toContain('<img ')
+    expect(replyPreviewHtml('[steam:emote:steamhappy]', { service: 'steam' })).toContain('<img ')
+  })
+
+  it('draws a Sneedchat smilie when it is known', () => {
+    const smilies = { regex: /:smile:/, byAlias: { ':smile:': { url: 'x.png' } } } as never
+    expect(replyPreviewHtml(':smile: ok', { service: 'sneedchat', smilies })).toContain('<img src="x.png"')
+  })
+
+  it('leaves plain words plain, and escapes what is not markup', () => {
+    expect(replyPreviewHtml('just words', {})).toBe('just words')
+    expect(replyPreviewHtml('<img src=x onerror=alert(1)>', {})).not.toContain('<img')
+  })
+
+  it('shows a link as its words and keeps a spoiler hidden', () => {
+    const link = replyPreviewHtml('see https://example.org/page now', {})
+    expect(link).not.toContain('<a ')
+    expect(link).toContain('example.org/page')
+    const spoiler = replyPreviewHtml('||secret||', {})
+    expect(spoiler).toContain('spoiler')
+    expect(spoiler).not.toContain('revealed')
+  })
+
+  it('has nothing for nothing', () => {
+    expect(replyPreviewHtml('', {})).toBe('')
+  })
+})

src/renderer/src/lib/replypreview.ts

@@ -0,0 +1,27 @@
+import { formatMessage, normalizeBBCode, type ChannelIndex, type SmilieIndex } from './format'
+
+/**
+ * The words of a message as they read in the line that quotes it - the one above a reply, or in the bar over the
+ * box while one is being written.
+ *
+ * Those lines showed the original's text as it was stored, so an emote was its code (`[emote:5756632:SUSSY]`), a
+ * custom emoji its token, a Steam sticker its name in brackets. Run through the formatter every message is, they
+ * draw as what they are. What is left out is what a quote has no room or use for: a link is its words and not
+ * something to follow (the line is the way to the original), and a hidden spoiler stays hidden.
+ */
+export function replyPreviewHtml(
+  text: string,
+  options: { service?: string; smilies?: SmilieIndex | null; channels?: ChannelIndex | null; ircColours?: boolean } = {}
+): string {
+  if (!text) return ''
+  const sneedchat = options.service === 'sneedchat'
+  const html = formatMessage(sneedchat ? normalizeBBCode(text) : text, {
+    isSneedchat: sneedchat,
+    smilies: options.smilies,
+    channels: options.channels,
+    markdownEscapes: options.service === 'discord',
+    ircFormatting: options.service === 'irc' && options.ircColours ? 'render' : 'strip'
+  })
+  // Anchors that are not spoilers: their words, with no link.
+  return html.replace(/<a href="(?!spoiler:)[^"]*"[^>]*>([\s\S]*?)<\/a>/g, '$1')
+}

src/renderer/src/lib/richtext.tsx

@@ -66,7 +66,9 @@ const ALLOWED_CLASSES = new Set([
   'channel-mention',
   'unknown',
   'custom-emoji',
-  'steam-sticker'
+  'steam-sticker',
+  'cheer-amount',
+  'greentext'
 ])
 
 /** Hex or a plain CSS colour keyword - nothing that could carry a url() or expression. */

src/renderer/src/lib/searchengines.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+import { SEARCH_ENGINES, cleanQuery, engineName, searchUrl, shortened, validTemplate } from './searchengines'
+
+describe('where a search goes', () => {
+  it('encodes the selection into the engine the person chose', () => {
+    expect(searchUrl('hello world & more', 'google')).toBe('https://www.google.com/search?q=hello%20world%20%26%20more')
+    expect(searchUrl('café', 'duckduckgo')).toBe('https://duckduckgo.com/?q=caf%C3%A9')
+    expect(searchUrl('x', 'yandex')).toBe('https://yandex.com/search/?text=x')
+  })
+
+  it('falls back to the first engine for one it does not know', () => {
+    expect(searchUrl('x', 'nonsense')).toBe(searchUrl('x', SEARCH_ENGINES[0].id))
+  })
+
+  it('has every engine ask for the query once', () => {
+    for (const e of SEARCH_ENGINES.filter((e) => e.id !== 'custom')) {
+      expect(e.template.split('%s')).toHaveLength(2)
+      expect(e.template.startsWith('https://')).toBe(true)
+    }
+  })
+
+  it('searches nothing for nothing', () => {
+    expect(searchUrl('   \n ', 'google')).toBeNull()
+  })
+
+  it('keeps a replacement pattern in the query as the text it is', () => {
+    expect(searchUrl('$& $1', 'google')).toBe('https://www.google.com/search?q=%24%26%20%241')
+  })
+})
+
+describe('the query', () => {
+  it('is one line, trimmed', () => {
+    expect(cleanQuery('  two\n\nlines\there ')).toBe('two lines here')
+  })
+
+  it('is cut short rather than sent whole', () => {
+    expect(cleanQuery('a'.repeat(1000)).length).toBe(300)
+  })
+
+  it('is shortened for a menu entry', () => {
+    expect(shortened('short')).toBe('short')
+    expect(shortened('a very long selected sentence that goes on and on')).toMatch(/^a very long.*…$/)
+    expect(shortened('a very long selected sentence that goes on and on').length).toBeLessThanOrEqual(28)
+  })
+})
+
+describe('an engine of the person’s own', () => {
+  it('needs a web address with a place for the query', () => {
+    expect(validTemplate('https://example.org/s?q=%s')).toBe(true)
+    expect(validTemplate('http://example.org/%s')).toBe(true)
+    expect(validTemplate('https://example.org/s')).toBe(false)
+    expect(validTemplate('javascript:alert(%s)')).toBe(false)
+    expect(validTemplate('file:///etc/passwd?%s')).toBe(false)
+    expect(validTemplate('')).toBe(false)
+  })
+
+  it('is used when valid and refuses to send anywhere when not', () => {
+    expect(searchUrl('a b', 'custom', 'https://example.org/s?q=%s')).toBe('https://example.org/s?q=a%20b')
+    expect(searchUrl('a b', 'custom', 'not a url')).toBeNull()
+    expect(searchUrl('a b', 'custom')).toBeNull()
+  })
+
+  it('is named by its host', () => {
+    expect(engineName('custom', 'https://www.example.org/s?q=%s')).toBe('example.org')
+    expect(engineName('custom', 'garbage')).toBe('the web')
+    expect(engineName('google', '')).toBe('Google')
+  })
+})

src/renderer/src/lib/searchengines.ts

@@ -0,0 +1,73 @@
+/**
+ * The web search engines "Search for…" can send selected text to. Each is a
+ * template with `%s` where the (percent-encoded) query goes; the person picks
+ * one in Settings > General, or gives a template of their own.
+ */
+export interface SearchEngine {
+  id: string
+  label: string
+  /** Where the query goes; `%s` is replaced. Empty for the custom entry, whose template is the person's own. */
+  template: string
+}
+
+export const SEARCH_ENGINES: SearchEngine[] = [
+  { id: 'duckduckgo', label: 'DuckDuckGo', template: 'https://duckduckgo.com/?q=%s' },
+  { id: 'google', label: 'Google', template: 'https://www.google.com/search?q=%s' },
+  { id: 'bing', label: 'Bing', template: 'https://www.bing.com/search?q=%s' },
+  { id: 'brave', label: 'Brave Search', template: 'https://search.brave.com/search?q=%s' },
+  { id: 'startpage', label: 'Startpage', template: 'https://www.startpage.com/do/search?q=%s' },
+  { id: 'ecosia', label: 'Ecosia', template: 'https://www.ecosia.org/search?q=%s' },
+  { id: 'qwant', label: 'Qwant', template: 'https://www.qwant.com/?q=%s' },
+  { id: 'yandex', label: 'Yandex', template: 'https://yandex.com/search/?text=%s' },
+  { id: 'kagi', label: 'Kagi', template: 'https://kagi.com/search?q=%s' },
+  { id: 'custom', label: 'Other…', template: '' }
+]
+
+export const DEFAULT_SEARCH_ENGINE = 'duckduckgo'
+
+/** The longest query sent: a whole pasted wall of text is not a search, and a URL has limits. */
+const MAX_QUERY = 300
+
+/** A custom template is usable if it is a web address with a place for the query. */
+export function validTemplate(template: string): boolean {
+  return /^https?:\/\/[^\s%]+/i.test(template.trim()) && template.includes('%s')
+}
+
+/** What the person chose, as a template - or null if it is custom and not (yet) usable. */
+function templateFor(engineId: string, custom: string): string | null {
+  const engine = SEARCH_ENGINES.find((e) => e.id === engineId) ?? SEARCH_ENGINES[0]
+  if (engine.id === 'custom') return validTemplate(custom) ? custom.trim() : null
+  return engine.template
+}
+
+/** The name shown on the menu entry: the engine's, or the custom address's host. */
+export function engineName(engineId: string, custom: string): string {
+  const engine = SEARCH_ENGINES.find((e) => e.id === engineId) ?? SEARCH_ENGINES[0]
+  if (engine.id !== 'custom') return engine.label
+  try {
+    return new URL(custom.trim().replace('%s', 'x')).hostname.replace(/^www\./, '') || 'the web'
+  } catch {
+    return 'the web'
+  }
+}
+
+/** The query as it will be sent: one line, trimmed, and not absurdly long. */
+export function cleanQuery(text: string): string {
+  const one = text.replace(/\s+/g, ' ').trim()
+  return one.length > MAX_QUERY ? one.slice(0, MAX_QUERY).trimEnd() : one
+}
+
+/** The address to open to search for `text`, or null if there is nothing to search for or nowhere to send it. */
+export function searchUrl(text: string, engineId: string, custom = ''): string | null {
+  const query = cleanQuery(text)
+  const template = templateFor(engineId, custom)
+  if (!query || !template) return null
+  // Split rather than replaced: a `$&` in the query is not a replacement pattern.
+  return template.split('%s').join(encodeURIComponent(query))
+}
+
+/** A selection shortened to fit a menu entry. */
+export function shortened(text: string, max = 28): string {
+  const one = cleanQuery(text)
+  return one.length > max ? `${one.slice(0, max - 1).trimEnd()}…` : one
+}

src/renderer/src/lib/streamplayer.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest'
+import { autoCeiling, captionTrack, menuOrder, renditionLabel, renditionOf } from './streamplayer'
+
+const ladder = [
+  { height: 160, frameRate: 30, bitrate: 230000 },
+  { height: 1080, frameRate: 60, bitrate: 8519450 },
+  { height: 720, frameRate: 60, bitrate: 3422999 },
+  { height: 480, frameRate: 30, bitrate: 1427999 },
+  { height: 360, frameRate: 30, bitrate: 630000 }
+]
+
+describe('the renditions a stream offers', () => {
+  it('are named as Kick names them: the height, and the frame rate where it is above thirty', () => {
+    expect(renditionLabel({ height: 720, frameRate: 60 })).toBe('720p60')
+    expect(renditionLabel({ height: 480, frameRate: 30 })).toBe('480p')
+    expect(renditionLabel({ height: 360 })).toBe('360p')
+    expect(renditionLabel({ height: 1080, frameRate: 59.94 })).toBe('1080p60')
+  })
+
+  it('are listed tallest first, with where each is in the player\'s own list, and one to a height', () => {
+    expect(menuOrder(ladder).map((r) => [r.label, r.index])).toEqual([['1080p60', 1], ['720p60', 2], ['480p', 3], ['360p', 4], ['160p', 0]])
+    expect(menuOrder([...ladder, { height: 720, frameRate: 30, bitrate: 1 }]).filter((r) => r.height === 720)).toHaveLength(1)
+  })
+
+  it('are found by the height somebody wants, or by nothing when it is not offered', () => {
+    expect(renditionOf(ladder, 480)).toBe(3)
+    expect(renditionOf(ladder, 900)).toBe(-1)
+  })
+
+  it('have a ceiling for automatic choice: the tallest that fits, the shortest when none does, none when there is no ceiling', () => {
+    expect(autoCeiling(ladder, 720)).toBe(2)
+    expect(autoCeiling(ladder, 1440)).toBe(1)
+    expect(autoCeiling(ladder, 100)).toBe(0)
+    expect(autoCeiling(ladder, 0)).toBe(-1)
+    expect(autoCeiling([], 720)).toBe(-1)
+  })
+})
+
+describe('the captions a stream offers', () => {
+  const tracks = [{ id: 0, name: 'English', lang: 'en' }, { id: 1, name: 'Portuguese', lang: 'pt' }, { id: 2, name: 'Spanish', lang: 'es' }]
+
+  it('are off when nothing is wanted or there is nothing to show', () => {
+    expect(captionTrack(tracks, '')).toBe(-1)
+    expect(captionTrack([], 'en')).toBe(-1)
+  })
+
+  it('are the language that was chosen, however it was written', () => {
+    expect(captionTrack(tracks, 'pt')).toBe(1)
+    expect(captionTrack(tracks, 'PT-BR')).toBe(1)
+  })
+
+  it('fall back to the person\'s own language, and then to the first, when the one chosen is not offered', () => {
+    expect(captionTrack(tracks, 'ja', 'es')).toBe(2)
+    expect(captionTrack(tracks, 'ja', 'xx')).toBe(0)
+    expect(captionTrack(tracks, 'ja')).toBe(0)
+  })
+})
+
+describe('a stream that also offers audio alone', () => {
+  const renditions = [
+    { height: 1080, frameRate: 60, bitrate: 7_700_000 },
+    { height: 720, frameRate: 60, bitrate: 3_300_000 },
+    { height: 360, frameRate: 30, bitrate: 600_000 },
+    { height: 0, bitrate: 200_000 }
+  ]
+
+  it('names it as what it is and lists it last', () => {
+    expect(renditionLabel(renditions[3])).toBe('Audio only')
+    expect(menuOrder(renditions).map((r) => r.label)).toEqual(['1080p60', '720p60', '360p', 'Audio only'])
+  })
+
+  it('never lets automatic choice settle on it, however small the picture it is drawn in', () => {
+    expect(autoCeiling(renditions, 720)).toBe(1)
+    // A ceiling below every picture falls back to the shortest picture, not to sound.
+    expect(autoCeiling(renditions, 100)).toBe(2)
+  })
+})

src/renderer/src/lib/streamplayer.ts

@@ -0,0 +1,78 @@
+/**
+ * The choices a stream's player offers - which rendition, which captions - kept apart from the player so
+ * that what they mean can be said and tested without one.
+ */
+
+/** A rendition as the playlist describes it. */
+export interface Rendition {
+  height: number
+  frameRate?: number
+  bitrate?: number
+}
+
+/** "720p", and "720p60" for one that moves at 60 frames a second, as Kick's own player calls them. */
+export function renditionLabel(r: Rendition): string {
+  // A rendition with no picture is the one Twitch offers for listening: its playlist has no height.
+  if (r.height <= 0) return 'Audio only'
+  const fps = r.frameRate && r.frameRate > 30 ? Math.round(r.frameRate) : 0
+  return `${r.height}p${fps || ''}`
+}
+
+/**
+ * The highest rendition that automatic choice may pick: the tallest that is no taller than `ceiling`, or
+ * the shortest there is when all are taller, since a ceiling below everything would leave nothing to play.
+ * -1 for no ceiling at all.
+ */
+export function autoCeiling(renditions: Rendition[], ceiling: number): number {
+  if (renditions.length === 0 || ceiling <= 0) return -1
+  let best = -1
+  // The shortest picture there is: audio only is not one, and automatic choice never settles on it.
+  let lowest = Math.max(0, renditions.findIndex((r) => r.height > 0))
+  renditions.forEach((r, i) => {
+    if (r.height <= 0) return
+    if (r.height < renditions[lowest].height) lowest = i
+    if (r.height <= ceiling && (best < 0 || r.height > renditions[best].height || (r.height === renditions[best].height && (r.bitrate ?? 0) > (renditions[best].bitrate ?? 0)))) best = i
+  })
+  return best >= 0 ? best : lowest
+}
+
+/** The rendition of a wanted height: the one with the most bits if there are two, -1 if there is none. */
+export function renditionOf(renditions: Rendition[], height: number): number {
+  let found = -1
+  renditions.forEach((r, i) => {
+    if (r.height === height && (found < 0 || (r.bitrate ?? 0) > (renditions[found].bitrate ?? 0))) found = i
+  })
+  return found
+}
+
+/** The renditions as a menu lists them, tallest first, with each one's place in the player's own list. */
+export function menuOrder(renditions: Rendition[]): { index: number; label: string; height: number }[] {
+  const seen = new Set<number>()
+  return renditions
+    .map((r, index) => ({ index, label: renditionLabel(r), height: r.height, bitrate: r.bitrate ?? 0 }))
+    .sort((a, b) => b.height - a.height || b.bitrate - a.bitrate)
+    // Two of one height are one choice.
+    .filter((r) => (seen.has(r.height) ? false : (seen.add(r.height), true)))
+    .map(({ index, label, height }) => ({ index, label, height }))
+}
+
+/** A caption track as the master playlist lists it. */
+export interface CaptionTrack {
+  id: number
+  name: string
+  lang?: string
+}
+
+/**
+ * Which caption track a remembered choice means: its language where there is one, the first track when
+ * what was chosen is not offered here, and none when captions are off.
+ */
+export function captionTrack(tracks: CaptionTrack[], wanted: string, language = ''): number {
+  if (!wanted || tracks.length === 0) return -1
+  const same = (lang: string): number => tracks.findIndex((t) => (t.lang ?? '').toLowerCase().split('-')[0] === lang.toLowerCase().split('-')[0])
+  const chosen = same(wanted)
+  if (chosen >= 0) return tracks[chosen].id
+  // On, but in a language this stream has none of: the person's own language if it is there, else the first.
+  const own = language ? same(language) : -1
+  return tracks[own >= 0 ? own : 0].id
+}

src/renderer/src/lib/util.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import {
+  readableColor,
   bufferDisplayName,
   classes,
   fileNameOf,
@@ -138,3 +139,32 @@ describe('relative times for a column', () => {
     }
   })
 })
+
+describe('readableColor', () => {
+  const ratio = (hex: string): number => {
+    const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4))
+    const l = 0.2126 * r + 0.7152 * g + 0.0722 * b
+    const bg = 0.0057 // #0e1014
+    return (Math.max(l, bg) + 0.05) / (Math.min(l, bg) + 0.05)
+  }
+
+  it('leaves a colour that reads well exactly as it was', () => {
+    expect(readableColor('#FF69B4')).toBe('#FF69B4')
+    expect(readableColor('#FFFFFF')).toBe('#FFFFFF')
+  })
+
+  it('lightens one that would be a dark smear, keeping as much of its hue as it can', () => {
+    const out = readableColor('#0000FF')
+    expect(out).not.toBe('#0000FF')
+    const [r, g, b] = out.match(/\d+/g)!.map(Number)
+    expect(b).toBeGreaterThan(r)
+    const hex = `#${[r, g, b].map((n) => n.toString(16).padStart(2, '0')).join('')}`
+    expect(ratio(hex)).toBeGreaterThanOrEqual(4.4)
+    expect(readableColor('#000000')).toMatch(/^rgb|^#fff/)
+  })
+
+  it('leaves what is not a hex colour alone', () => {
+    expect(readableColor('hsl(120, 60%, 70%)')).toBe('hsl(120, 60%, 70%)')
+    expect(readableColor('')).toBe('')
+  })
+})

src/renderer/src/lib/util.ts

@@ -3,6 +3,8 @@ import sneedchatMark from '../assets/sneedchat.png'
 import matrixSvg from '../assets/matrix-mark.svg'
 import kickSvg from '../assets/kick.svg'
 import steamSvg from '../assets/steam-mark.svg'
+import twitchSvg from '../assets/twitch-mark.svg'
+import telegramSvg from '../assets/telegram-mark.svg'
 
 /**
  * Discord channel buffers are named "GuildName/#channel" internally - that's
@@ -61,7 +63,7 @@ export interface ServiceIcon {
  * the same menus, as "Whisper".
  */
 export function hasDirectMessages(service: string | undefined): boolean {
-  return service === 'irc' || service === 'discord' || service === 'matrix'
+  return service === 'irc' || service === 'discord' || service === 'matrix' || service === 'twitch' || service === 'telegram'
 }
 
 export function serviceIcon(service: string): ServiceIcon {
@@ -72,6 +74,10 @@ export function serviceIcon(service: string): ServiceIcon {
       return { mark: matrixSvg }
     case 'steam':
       return { mark: steamSvg }
+    case 'twitch':
+      return { mark: twitchSvg }
+    case 'telegram':
+      return { mark: telegramSvg }
     case 'irc':
       return { glyph: 'tag' }
     case 'slack':
@@ -105,6 +111,10 @@ export function serviceLabel(service: string): string {
       return 'Kick'
     case 'steam':
       return 'Steam'
+    case 'twitch':
+      return 'Twitch'
+    case 'telegram':
+      return 'Telegram'
     case 'slack':
       return 'Slack'
     case 'jabber':
@@ -214,6 +224,49 @@ export function nickColor(nick: string): string {
   return `hsl(${Math.abs(hash) % 360}, 62%, 68%)`
 }
 
+/**
+ * A name's colour as the service sent it, lightened where it would be hard to read on the dark surface.
+ *
+ * Twitch lets everybody choose theirs and offers pure blue, and a name in #0000FF on near-black is a
+ * dark smear; its own chat adjusts such colours and so does this. A colour that reads well is returned
+ * exactly as it was, and one that cannot be read as a colour (a name, a malformed string) is left alone.
+ * "Reads well" is a contrast ratio of 4.5 against the surface, the usual line for text.
+ */
+export function readableColor(color: string, surface = '#0e1014'): string {
+  const rgb = parseHex(color)
+  const bg = parseHex(surface)
+  if (!rgb || !bg) return color
+  const target = 4.5
+  if (contrast(rgb, bg) >= target) return color
+  // Mixed towards white a little at a time, so the hue stays what the person chose as far as it can.
+  for (let i = 1; i <= 20; i++) {
+    const t = i / 20
+    const lighter: [number, number, number] = [rgb[0] + (255 - rgb[0]) * t, rgb[1] + (255 - rgb[1]) * t, rgb[2] + (255 - rgb[2]) * t]
+    if (contrast(lighter, bg) >= target) return `rgb(${lighter.map(Math.round).join(', ')})`
+  }
+  return '#ffffff'
+}
+
+function parseHex(color: string): [number, number, number] | null {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())
+  if (!m) return null
+  const h = m[1].length === 3 ? m[1].split('').map((c) => c + c).join('') : m[1]
+  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]
+}
+
+function luminance([r, g, b]: [number, number, number]): number {
+  const lin = (c: number): number => {
+    const s = c / 255
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4
+  }
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)
+}
+
+function contrast(a: [number, number, number], b: [number, number, number]): number {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
+  return (hi + 0.05) / (lo + 0.05)
+}
+
 /**
  * nobilis hands back local file:// paths for media it fetched on our behalf
  * (Tor-routed Sneedchat avatars/attachments, Matrix media, the Discord QR).

src/renderer/src/state/store.ts

@@ -25,7 +25,7 @@ import type {
 import { addToast, type ToastAction, type ToastItem } from '../lib/toasts'
 import { ALL_STATUSES, statusesFor, supportsStatus } from '../lib/status'
 import type { SteamGroup, GroupCall } from '../lib/steamgroups'
-import { buildSmilieIndex, steamSameText, type SmilieEntry, type SmilieIndex } from '../lib/format'
+import { buildSmilieIndex, sneedSameText, steamSameText, type SmilieEntry, type SmilieIndex } from '../lib/format'
 import { bufferDisplayName, isChatKind, isImageFile, resolveMediaUrl } from '../lib/util'
 import { runExport } from '../lib/exporter'
 import type { ForumPost } from '../lib/forum'
@@ -262,6 +262,10 @@ export interface LiveCard {
   total?: number | null
   /** What this account stands to get back, where the service says. */
   yourReturn?: number | null
+  /** Shown here but not answerable from it: no vote or bet buttons. Twitch's, for an account with no twitch.tv session. */
+  readOnly?: boolean
+  /** The service gives no way to end it from a viewer's card (Twitch's polls). */
+  noEnd?: boolean
   /** "open", "locked", "resolved" - whatever the service calls it. */
   state?: string | null
   /**
@@ -333,11 +337,22 @@ export interface KickStream {
    * Where the video is: a signed Amazon IVS playlist, good for watching in
    * this window rather than in a browser tab beside it.
    *
-   * Replaced on every refresh, because the signature in it expires - so
-   * whoever is playing it reads the current one rather than the one they
-   * started with.
+   * Replaced shortly before the signature in it expires, which is about every
+   * seven minutes - so whoever is playing it reads the current one rather
+   * than the one they started with, and does not start over for a new one.
    */
   playbackUrl?: string | null
+  /** Unix seconds the address stops being accepted, where it says. */
+  playbackExpires?: number | null
+  /** The broadcast's own id: a different one is a different stream, even in the same channel. */
+  livestreamId?: number | null
+  /** Twitch only: whether Twitch says ads are not for this account (its Turbo, or a subscription). */
+  adFree?: boolean | null
+  /**
+   * Why a live stream has no picture to offer, in words: subscribers only, blocked where this is
+   * watched from. Absent when there is one, or when the channel is not live.
+   */
+  playbackError?: string | null
 }
 
 /** One box on a form a Discord bot sent. */
@@ -535,6 +550,12 @@ export interface ChatState {
   joinPanelAccountId: string
   messagesByBuffer: Record<string, ChatMessage[]>
   presenceByBuffer: Record<string, Member[]>
+  /** Points the signed-in account has in each Kick channel, as Kick last pushed them. */
+  kickPointsByBuffer: Record<string, number>
+  /** A Twitch channel's points as this account last heard: the balance. */
+  twitchPoints: Record<string, { points: number | null; name?: string | null }>
+  /** How many people a roster stands for, where the service says it is more than it lists (Kick). */
+  presenceTotalByBuffer: Record<string, number>
   /** Buffers whose initial backlog fetch has completed. */
   loadedBuffers: Record<string, true>
   loadingMore: Record<string, true>
@@ -561,6 +582,8 @@ export interface ChatState {
    * most of what a viewer wants to know, were nowhere.
    */
   kickStreams: Record<string, KickStream>
+  /** Whether the account may moderate each Twitch channel it has open, as Twitch last said. */
+  twitchRights: Record<string, boolean>
   /** The poll and prediction running in each channel, by `cardSlot`. */
   livePolls: Record<string, LiveCard>
   /**
@@ -577,6 +600,8 @@ export interface ChatState {
   /** Which messages each Matrix room has pinned, newest last. */
   /** Which messages a conversation has pinned, where the service says so. */
   pinnedMessages: Record<string, string[]>
+  /** How many replies or comments a message has, where the service says so (Telegram): by conversation, then message. */
+  threadCounts: Record<string, Record<string, number>>
   /**
    * The pinned messages themselves, once somebody has asked for them. The ids
    * above say that something is pinned; these say what, for the banner over
@@ -786,6 +811,9 @@ const INITIAL: ChatState = {
   joinPanelAccountId: '',
   messagesByBuffer: {},
   presenceByBuffer: {},
+  presenceTotalByBuffer: {},
+  kickPointsByBuffer: {},
+  twitchPoints: {},
   loadedBuffers: {},
   loadingMore: {},
   loadingNewer: {},
@@ -796,10 +824,12 @@ const INITIAL: ChatState = {
   openThread: null,
   matrixPermissions: {},
   kickStreams: {},
+  twitchRights: {},
   livePolls: {},
   pinnedByBuffer: {},
   reviewCard: null,
   pinnedMessages: {},
+  threadCounts: {},
   pinnedRows: {},
   forumPages: {},
   discordFriends: {},
@@ -875,6 +905,7 @@ const INITIAL: ChatState = {
 function echoMatches(echo: ChatMessage, real: Message): boolean {
   if (echo.pendingBody === real.body) return true
   if (real.bufferId.startsWith('steam:') && echo.pendingBody !== undefined && steamSameText(echo.pendingBody, real.body)) return true
+  if (real.bufferId.startsWith('sneedchat:') && echo.pendingBody !== undefined && sneedSameText(echo.pendingBody, real.body)) return true
   // A file is posted as markup the daemon builds - a BBCode image tag on
   // Sneedchat, a bare link on IRC - so what comes back is never what was
   // typed, and usually nothing was typed at all. Matching on the whole body
@@ -1013,7 +1044,7 @@ function applyOwnReaction(list: Reaction[], emoji: string, add: boolean): Reacti
  * backwards through what they do offer.
  */
 function canFetchAround(bufferId: string): boolean {
-  return bufferId.startsWith('discord:') || bufferId.startsWith('matrix:')
+  return bufferId.startsWith('discord:') || bufferId.startsWith('matrix:') || bufferId.startsWith('telegram:')
 }
 
 function bestEffort(work: Promise<unknown>, what: string): void {
@@ -1318,6 +1349,12 @@ export class ChatStore {
     this.set({ activeBufferId: initialBufferId, activeGroupId: initialGroupId })
 
     void this.refreshNetSettings()
+    const looked = (): void => {
+      const id = this.ackPending
+      if (id && id === this.state.activeBufferId && this.windowIsActive()) bestEffort(this.ackRead(id), 'ack read')
+    }
+    window.addEventListener('focus', looked)
+    document.addEventListener('visibilitychange', looked)
     void window.moho.popout.list().then((popouts) => this.set({ popouts }))
     window.moho.popout.onChange((popouts) => this.set({ popouts }))
 
@@ -2574,6 +2611,13 @@ export class ChatStore {
 
   // --- push events ----------------------------------------------------
 
+  /** The conversation to be told is read as soon as the window is looked at. */
+  private ackPending: string | null = null
+
+  private windowIsActive(): boolean {
+    return document.visibilityState === 'visible' && document.hasFocus()
+  }
+
   /**
    * Tells the service a conversation has been read.
    *
@@ -2587,6 +2631,14 @@ export class ChatStore {
    * leave a room read here unread on your phone forever.
    */
   private async ackRead(bufferId: string): Promise<void> {
+    // Only what is being read. A window that is hidden, or is not the one in front, is not reading anything: a
+    // conversation opened at startup behind other windows, or selected from a notification, is not read by anybody.
+    // Said when the window is next looked at (`ackPending`), and only if that is still the conversation on screen.
+    if (!this.windowIsActive()) {
+      this.ackPending = bufferId
+      return
+    }
+    this.ackPending = null
     const prefs = await window.moho.prefs.getAll()
     await window.moho.rpc('markBufferRead', {
       bufferId,
@@ -2603,7 +2655,7 @@ export class ChatStore {
    */
   async openThreadPanel(bufferId: string, rootId: string): Promise<void> {
     const known = (this.state.messagesByBuffer[bufferId] || []).filter(
-      (m) => m.id === rootId || (m.replyTo?.thread && m.replyTo.id === rootId)
+      (m) => m.id === rootId || (m.replyTo?.thread && m.replyTo.id === rootId) || m.replyTo?.threadRoot === rootId
     )
     this.set({ openThread: { bufferId, rootId, messages: known, loading: true } })
     try {
@@ -2632,18 +2684,27 @@ export class ChatStore {
     const open = this.state.openThread
     if (!open || (!body.trim() && !attachment)) return
     const root = open.messages.find((m) => m.id === open.rootId)
+    // Kick answers a message, not a thread, and the daemon quotes whatever it
+    // is told to answer from what it has stored. A thread whose first message
+    // is older than the scrollback still has replies on screen, and answering
+    // the first of those keeps the new one in the same thread.
+    const earliest = !root && this.accountFor(open.bufferId)?.service === 'kick' ? open.messages[0] : undefined
     await this.dispatchSend(
       open.bufferId,
       body,
-      {
-        id: open.rootId,
-        from: root?.from ?? '',
-        body: root?.body ?? '',
-        thread: true
-      },
+      earliest
+        ? { id: earliest.id, from: earliest.from, body: earliest.body }
+        : {
+            id: open.rootId,
+            from: root?.from ?? '',
+            body: root?.body ?? '',
+            thread: true
+          },
       attachment,
       spoilers
     )
+    // A Telegram comment lands in the channel's discussion group, not in this conversation, so the panel asks again.
+    if (this.accountFor(open.bufferId)?.service === 'telegram') void this.openThreadPanel(open.bufferId, open.rootId)
   }
 
   /**
@@ -2894,6 +2955,18 @@ export class ChatStore {
    * and guessing at it would mean showing an answer that never came.
    */
   useComponent(bufferId: string, messageId: string, customId: string, select: boolean, values: string[]): void {
+    // A Telegram bot answers a press with a notice, or an address to open, and no more: whatever else it does arrives
+    // as an edit to the message or a new one.
+    if (this.accountFor(bufferId)?.service === 'telegram') {
+      void window.moho
+        .rpc<{ message?: string | null; alert?: boolean; url?: string | null }>('pressTelegramButton', { bufferId, messageId, customId })
+        .then((answer) => {
+          if (answer.message) this.toast(answer.alert ? 'error' : 'info', answer.message)
+          if (answer.url) void window.moho.openExternal(answer.url)
+        })
+        .catch((e: Error) => this.toast('error', e.message))
+      return
+    }
     void window.moho
       .rpc('useDiscordComponent', { bufferId, messageId, customId, select, values })
       .catch((e: Error) => this.toast('error', e.message))
@@ -2949,6 +3022,10 @@ export class ChatStore {
     const stream = this.state.kickStreams[bufferId]
     const buffer = this.state.buffers.find((b) => b.id === bufferId)
     if (!buffer) return
+    if (stream?.live && !stream.playbackUrl && stream.playbackError) {
+      this.toast('info', `${bufferDisplayName(buffer.name)}: ${stream.playbackError}`)
+      return
+    }
     if (!stream?.live || !stream.playbackUrl) {
       this.toast('info', `${bufferDisplayName(buffer.name)} is not streaming right now`)
       return
@@ -3562,7 +3639,7 @@ export class ChatStore {
       // forward without an author.
       case 'messageReplyRenamed': {
         this.mapMessage(data.bufferId, data.id, (m) =>
-          m.replyTo ? { ...m, replyTo: { ...m.replyTo, from: data.from } } : m
+          m.replyTo ? { ...m, replyTo: { ...m.replyTo, from: data.from, ...(data.body ? { body: data.body } : {}) } } : m
         )
         break
       }
@@ -3592,6 +3669,25 @@ export class ChatStore {
         )
         break
 
+      // Kept rather than removed: the daemon says the service took it down and
+      // leaves the words, and what that looks like is the window's to decide.
+      // Kick says the balance changed: the five-minute earn, a bet, a reward.
+      case 'kickPoints':
+        this.set({ kickPointsByBuffer: { ...this.state.kickPointsByBuffer, [data.bufferId]: data.points } })
+        break
+
+      case 'messageModerated':
+        this.mapMessage(data.bufferId, data.id, (m) => ({ ...m, moderated: data.moderated ?? {} }))
+        break
+
+      case 'threadCount': {
+        const d = data as unknown as { bufferId: string; id: string; count: number }
+        const mine = this.state.threadCounts[d.bufferId] ?? {}
+        if (mine[d.id] === d.count) break
+        this.set({ threadCounts: { ...this.state.threadCounts, [d.bufferId]: { ...mine, [d.id]: d.count } } })
+        break
+      }
+
       case 'reactionsChanged':
         this.mapMessage(data.bufferId, data.id, (m) => ({ ...m, reactions: data.reactions }))
         break
@@ -3936,6 +4032,14 @@ export class ChatStore {
         break
       }
 
+      case 'twitchPoints':
+        this.set({ twitchPoints: { ...this.state.twitchPoints, [data.bufferId]: { points: data.points ?? null, name: data.name ?? null } } })
+        break
+
+      case 'twitchRights':
+        this.set({ twitchRights: { ...this.state.twitchRights, [data.bufferId]: !!data.moderator } })
+        break
+
       case 'kickStream': {
         const stream = data as unknown as KickStream
         this.set({ kickStreams: { ...this.state.kickStreams, [stream.bufferId]: stream } })
@@ -3951,7 +4055,8 @@ export class ChatStore {
 
       case 'presenceChange':
         this.set({
-          presenceByBuffer: { ...this.state.presenceByBuffer, [data.bufferId]: data.members }
+          presenceByBuffer: { ...this.state.presenceByBuffer, [data.bufferId]: data.members },
+          presenceTotalByBuffer: { ...this.state.presenceTotalByBuffer, [data.bufferId]: data.total ?? data.members.length }
         })
         break
 
@@ -4490,12 +4595,13 @@ export class ChatStore {
     void this.refreshMatrixPermissions(bufferId)
 
     const service = this.accountFor(bufferId)?.service
+    if (service === 'twitch') void this.loadTwitchRecent(bufferId)
     if (service === 'sneedchat') void this.fetchSmilies()
     // Both services answer the same question about the open conversation -
     // what can go in a message here that isn't text - so both ask it the same
     // way. Kick's answer also depends on who is asking, since it carries which
     // of the streamer's emotes this account is subscribed to.
-    if (service === 'discord' || service === 'kick') void this.fetchBufferEmoji(bufferId)
+    if (service === 'discord' || service === 'kick' || service === 'twitch') void this.fetchBufferEmoji(bufferId)
   }
 
   /**
@@ -4526,7 +4632,10 @@ export class ChatStore {
   }
 
   private async fetchBufferEmoji(bufferId: string): Promise<void> {
-    if (this.state.bufferEmoji[bufferId]) return
+    // Twitch's tables arrive a moment after the channel is joined, so an empty answer is asked again
+    // the next time the channel is opened; the others' empty answer is the answer.
+    const have = this.state.bufferEmoji[bufferId]
+    if (have && (have.length > 0 || this.accountFor(bufferId)?.service !== 'twitch')) return
     try {
       const emoji = await window.moho.rpc<CustomEmoji[]>('listBufferEmoji', { bufferId })
       this.set({ bufferEmoji: { ...this.state.bufferEmoji, [bufferId]: emoji } })
@@ -4666,6 +4775,31 @@ export class ChatStore {
     this.set({ lastReadTs })
   }
 
+  /** The Twitch channels whose recent past has been asked for this session. */
+  private twitchRecentAsked = new Set<string>()
+
+  /**
+   * A Twitch channel's recent past, once per channel per session, if the person
+   * has said a third-party service may be asked for it (Settings, Twitch).
+   * Twitch keeps no history of its own, so without this a channel opens empty
+   * and fills as people speak. Off by default: it tells somebody else's server
+   * which channel is being opened.
+   */
+  private async loadTwitchRecent(bufferId: string): Promise<void> {
+    if (this.twitchRecentAsked.has(bufferId)) return
+    const prefs = await window.moho.prefs.getAll()
+    if (prefs['twitch.recentHistory'] !== true) return
+    this.twitchRecentAsked.add(bufferId)
+    try {
+      const r = await window.moho.rpc<{ read: number }>('twitchRecentMessages', { bufferId })
+      if (r.read > 0) await this.loadBacklog(bufferId)
+    } catch (e) {
+      // Not worth interrupting anybody over: the channel works, it just starts empty.
+      this.twitchRecentAsked.delete(bufferId)
+      console.debug('twitch recent messages:', (e as Error).message)
+    }
+  }
+
   private async loadBacklog(bufferId: string): Promise<void> {
     try {
       const rows = await window.moho.rpc<Message[]>('getBacklog', { bufferId, before: 0, limit: BACKLOG_PAGE })
@@ -5344,6 +5478,15 @@ export class ChatStore {
       }
       return
     }
+    if (account?.service === 'telegram') {
+      try {
+        const perms = await window.moho.rpc<RoomPermissions>('telegramPermissions', { bufferId })
+        this.set({ matrixPermissions: { ...this.state.matrixPermissions, [bufferId]: perms } })
+      } catch {
+        /* advisory only */
+      }
+      return
+    }
     if (account?.service !== 'matrix') return
     try {
       const perms = await window.moho.rpc<RoomPermissions>('getMatrixRoomPermissions', {

src/shared/ipc.ts

@@ -9,6 +9,7 @@ export const IPC = {
   windowClose: 'moho:window:close',
   windowIsMaximized: 'moho:window:isMaximized',
   openExternal: 'moho:openExternal',
+  openArticle: 'moho:openArticle',
   resolveImagePage: 'moho:resolveImagePage',
   pickFile: 'moho:pickFile',
   pickSavePath: 'moho:pickSavePath',
@@ -39,6 +40,7 @@ export const IPC = {
   screenPicked: 'moho:screenPicked',
   markBufferRead: 'moho:markBufferRead',
   browserLogin: 'moho:browserLogin',
+  twitchSignIn: 'moho:twitchSignIn',
   popoutOpen: 'moho:popout:open',
   popoutClose: 'moho:popout:close',
   popoutList: 'moho:popout:list',
@@ -117,4 +119,6 @@ export interface EditMenuRequest {
   suggestions: string[]
   can: Record<EditAction, boolean>
   hasSelection: boolean
+  /** What is selected, for searching the web for it. */
+  selection: string
 }

src/shared/wire.ts

@@ -3,7 +3,7 @@
 
 export interface Account {
   id: string
-  service: 'irc' | 'discord' | 'sneedchat' | 'matrix' | 'kick' | 'steam' | 'jabber' | 'slack'
+  service: 'irc' | 'discord' | 'sneedchat' | 'matrix' | 'kick' | 'steam' | 'twitch' | 'telegram' | 'jabber' | 'slack'
   displayName: string
   /**
    * How the user is presenting: "online" | "idle". Distinct from
@@ -84,6 +84,16 @@ export interface Account {
    * shared while a login did not exist are not simply lost.
    */
   dehydration?: boolean
+  /**
+   * Twitch only: whether this account holds a twitch.tv website session for playing video as the person
+   * (their Turbo, their subscriptions). A yes or a no; the session itself never leaves the daemon.
+   */
+  webSession?: boolean
+  /**
+   * Twitch only: whether this account was signed in with the rights to moderate (remove messages, time
+   * out, ban, change a room's modes) and to whisper. Off unless the person turned it on.
+   */
+  moderation?: boolean
 }
 
 export interface SneedChatRoom {
@@ -163,6 +173,8 @@ export interface Buffer {
    * refuses, so offering to leave it is offering something that fails.
    */
   serviceRoom?: boolean
+  /** A glyph drawn in front of the name in the list: Telegram's broadcast channels and bots. */
+  nameIcon?: string
   /**
    * Set while the buffer exists but the service has not yet said what is in
    * it - a Matrix room between joining it and its first sync. The list draws
@@ -419,6 +431,31 @@ export interface ReplyPreview {
    * a forward is somebody else's message arriving.
    */
   forwarded?: boolean
+  /**
+   * The message a whole chain of replies grew from, where the service groups
+   * them into a thread (Kick does).
+   *
+   * Unlike `thread`, `id` here is still the message that was answered - this
+   * says which thread that message is part of, and a reply can be both.
+   */
+  threadRoot?: string
+  /** The conversation (a buffer id) the answered message is in, when it is not this one: Telegram can answer a post in another channel. */
+  chat?: string
+}
+
+/**
+ * A message the service took down and the daemon kept.
+ *
+ * Whether to show it, strike it through or put a notice in its place is the
+ * window's choice (`kick.removedMessages`), so the text is still here.
+ */
+export interface Moderated {
+  /** Whether the service's automatic moderation did it, rather than a person. */
+  ai?: boolean
+  /** The rules it was said to break. */
+  rules?: string[]
+  /** Set by the window, never the daemon: this message's text has been swapped for a notice. */
+  replaced?: boolean
 }
 
 /**
@@ -588,6 +625,8 @@ export interface Message {
    * button below it.
    */
   components?: MessageComponent[]
+  /** Present once the service has removed the message. */
+  moderated?: Moderated
   /** Matrix only - the sender's full MXID, for targeting moderation actions. */
   senderId?: string
   /**
@@ -718,6 +757,11 @@ export interface MessageBadge {
   text: string
   /** Months subscribed, for the badges that count. */
   count?: number
+  /**
+   * A picture to draw it with, for the badges Kick sends as one - level,
+   * event and founder badges, a channel's own. Drawn instead of the word.
+   */
+  image?: string
 }
 
 export interface CustomEmoji {