docs: add cross-context feature docs for auth, presence, access-control, messaging, attachments

Fills the five highest-value gaps under agents-docs/features/ so the index covers
the system's main cross-context contracts. Each doc follows the feature-template
structure and the AGENTS_FEATURES.md contract, with honest TODOs where coverage
or behavior couldn't be confirmed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.claude/skills/document-features/SKILL.md

@@ -0,0 +1,150 @@
+---
+name: document-features
+description: Populate `<docs-dir>/features/<slug>.md` for one, several, or every undocumented feature area by dispatching up to 10 parallel subagents — one per feature. The agent docs directory is discovered from `AGENTS.md` — typically `agents-docs/` (the `setup-agentic-repository` default) but may be elsewhere if `--docs-dir` was used. Use whenever the user wants to document features, fill out feature docs, write up specific features (e.g. "document auth and billing"), document all undocumented features, or follow up on `find-features` discovery. This is the natural sequel to `find-features` — that skill identifies what is missing, this skill writes the docs in parallel.
+metadata:
+  author: Olof Brogeby
+  url: https://github.com/brogeby
+---
+
+# document-features
+
+Write feature documentation for the repository — one populated `<docs-dir>/features/<slug>.md` per requested feature — by dispatching subagents in parallel so an "all" run does not serialize. The agent docs directory (`<docs-dir>`) is discovered in Phase 1; it's typically `agents-docs/` but `setup-agentic-repository` may have written it somewhere else.
+
+This skill is the documentation counterpart to `find-features`. `find-features` discovers what is missing; `document-features` is the focused worker that actually fills the template, in parallel, for the features the user names.
+
+If the user asks "find and document everything", you can start with `find-features` to build the candidate list, then hand that list to this skill. If the user already knows which features they want (e.g. "document auth and billing"), come straight here.
+
+---
+
+## Phase 1 — Verify prerequisites and locate the docs directory
+
+Confirm the repo has been initialized with the Mimas template, and discover where its agent docs actually live. `setup-agentic-repository` writes the agent doc tree to **`agents-docs/`** by default (a sibling of any human-maintained `docs/`), but `--docs-dir <dir>` can override that (e.g. `docs/agents`). Don't assume the path; discover it.
+
+1. Read `AGENTS.md` at the repo root. Every Mimas-generated `AGENTS.md` lists its docs paths in the first block (`<docs-dir>/AGENT_WORKFLOW.md`, `<docs-dir>/AGENTS_FEATURES.md`, etc.) — the directory in those paths is the docs dir for this repo.
+2. If `AGENTS.md` doesn't exist or doesn't reference the contract files, fall back to searching for `AGENTS_FEATURES.md` directly (`find . -maxdepth 3 -name AGENTS_FEATURES.md`). The directory containing it is the docs dir.
+3. Confirm the files this skill needs are there:
+   - `<docs-dir>/AGENTS_FEATURES.md` — feature documentation contract
+   - `<docs-dir>/features/feature-template.md` — canonical template
+   - `<docs-dir>/FEATURES.md` — feature index
+
+If any are missing, tell the user this skill is designed to run after `setup-agentic-repository` and stop. Do not scaffold them yourself.
+
+For the rest of this skill, treat the discovered directory as `<docs-dir>` and use it wherever paths appear. **Critical:** the subagent prompt in Phase 3 is a template — substitute the actual discovered value into it before dispatching each subagent. The subagents do not run this Phase 1 themselves and will not discover the dir on their own.
+
+Read `<docs-dir>/AGENTS_FEATURES.md` and the root `AGENTS.md` (plus any subdomain `CONTEXT.md` files) so you know the contract — what counts as an area-level doc vs. a per-service doc, and which subdomains exist. These files are authoritative; if anything in this skill drifts from them, the files win.
+
+---
+
+## Phase 2 — Decide what to document
+
+The user's request usually contains the answer. Parse what they said:
+
+- **Named features** ("document auth and billing", "write up the search feature") → take that list of slugs
+- **A number** ("document 3 features", "write up the top 5") → take a numeric count of the most significant undocumented features
+- **"all" / "every" / "everything"** → every undocumented feature with meaningful implementation
+- **Ambiguous or empty** → use `AskUserQuestion` with the same options find-features uses (Top 5 / All / Number / Specific names) plus an "Other" free-text fallback
+
+If the user is continuing from a recent `find-features` session, prefer the candidate list that already exists in the conversation over re-asking.
+
+Then quickly inventory `<docs-dir>/features/`:
+
+- Top-level `.md` files (one per documented area, ignoring `feature-template.md`)
+- Subdirectories (areas with per-service docs)
+- Entries in `<docs-dir>/FEATURES.md`
+
+Filter the requested list against the inventory:
+
+- Drop slugs that already have `<docs-dir>/features/<slug>.md`. Tell the user which ones you skipped and why
+- For named features that you cannot locate in the codebase, surface them and ask whether to skip or scaffold a TODO doc. Do not invent feature areas
+
+If the user asked for a number or "all" and you need to identify candidates yourself, scan the subdomains declared in `AGENTS.md` looking for named concepts with dedicated logic — dedicated service layer, non-trivial handler, dedicated tables/migrations, multiple endpoints, real business rules. A single empty route stub is not enough. Rank by significance and trim to the requested count.
+
+---
+
+## Phase 3 — Dispatch one subagent per feature, in parallel
+
+This is the whole point of the skill. Documentation per feature is independent work — one subagent can read the code for `auth` while another reads the code for `billing`. Serializing them throws away the parallelism the harness gives you.
+
+**Cap concurrency at 10 subagents.** If the final list has more than 10 features, dispatch the first batch of 10 in one message, wait for it to complete, then dispatch the next batch. Do not exceed 10 concurrent agents — it overwhelms tooling and the user's review can't keep up.
+
+For each feature in the current batch, spawn one `Agent` call in the **same message** (this is what makes them run in parallel). Use the `general-purpose` subagent unless something more specific fits.
+
+Each subagent gets a self-contained prompt — it has not seen this conversation, so include everything it needs. **Before dispatching, substitute `<docs-dir>` with the value you discovered in Phase 1** (typically `agents-docs`). The subagents do not discover the dir on their own.
+
+```
+You are documenting a single feature area for this repository. The output is one populated markdown file at `<docs-dir>/features/<slug>.md` that follows the project's feature documentation contract.
+
+Feature slug: <slug>
+One-line concept (from discovery, may be rough): <concept>
+
+Authoritative reading order (read these first, in order):
+1. `<docs-dir>/AGENTS_FEATURES.md` — the contract that governs how feature docs are written
+2. `<docs-dir>/features/feature-template.md` — the canonical template. Mirror its section order and headings; do not invent your own structure
+3. `AGENTS.md` and any subdomain `CONTEXT.md` files — for vocabulary and where the code lives
+
+Your task:
+- Locate this feature in the codebase. Confirm it has meaningful implementation (service layer, handler, endpoints, tables, real business rules). If it is only a stub, stop and report that back — do not write a doc for a stub
+- Create `<docs-dir>/features/<slug>.md` from the template
+- Fill in what you can verify from the code: overview, responsibilities, key concepts, endpoint(s), service/handler/repository paths, key types, tests location, related features
+- Set `Area:` to the slug, `Status:` to `Active` for production code or `In Progress` for half-built features, and `Last updated:` to today's date in `YYYY-MM-DD`
+- For sections you cannot confidently fill (performance, security review, undocumented edge cases), keep the template's prompt and add a clear `TODO:` marker. Honest gaps beat invented content
+- If the feature has multiple distinct services or endpoints worth separating, also create `<docs-dir>/features/<slug>/<service>.md` files from the same template and link them from the area doc — but only when complexity actually warrants it. Do not duplicate large sections between area and per-service docs
+- Do not edit `<docs-dir>/FEATURES.md` — the dispatcher will update the index once all features are written, to avoid concurrent edits to the same file
+- Do not commit anything
+
+Report back when done with:
+- Path(s) of the file(s) you created
+- One-line description of the feature (this will be used for the FEATURES.md entry)
+- Which template sections you left as TODO
+- Anything you noticed that needs human judgment
+```
+
+Substitute `<slug>`, `<concept>`, and `<docs-dir>` per feature. Keep the rest verbatim — the subagent depends on having the contract in its own context.
+
+If features turn out to be unrelated to one another (different subdomains, different layers), there's no need to coordinate beyond avoiding the shared `<docs-dir>/FEATURES.md` file. The dispatcher updates the index after the batch returns.
+
+---
+
+## Phase 4 — Update the index and report back
+
+Once a batch completes, collect each subagent's reported one-liner and add entries to `<docs-dir>/FEATURES.md` in alphabetical order, in the form:
+
+```
+- [<slug>](./features/<slug>.md) — one-line description
+```
+
+If `<docs-dir>/FEATURES.md` still contains the placeholder `_No feature areas documented yet. Add entries as you build out the system._`, remove that line as you add the first real entry.
+
+Then, if more features remain (because the original list was >10), dispatch the next batch of up to 10 and repeat.
+
+When everything is written, tell the user:
+
+- Which feature docs were created (full paths), grouped by batch if there were multiple
+- Which requested features were skipped, and why ("already documented at `<docs-dir>/features/<slug>.md`", "could not locate in codebase", "implementation too thin to earn an entry yet")
+- Which sections in the new docs are TODOs that still need human judgment
+- That `<docs-dir>/FEATURES.md` was updated and how many entries were added
+- Any discrepancies you noticed between `<docs-dir>/FEATURES.md` and the filesystem
+
+Do not commit the changes. The user reviews before committing.
+
+---
+
+## Why this is structured around subagents
+
+Documenting one feature is read-heavy and largely independent of documenting another — different files, different services, different endpoints. The slow part is the reading, and parallelizing the reading is the entire reason this skill exists separately from `find-features`. Spawning ten subagents in one message and letting them work concurrently turns a 10-minute sequential run into something closer to a 1–2 minute parallel one, with each subagent producing a focused, faithful doc because its whole context is one feature.
+
+The 10-agent cap is pragmatic, not theoretical: more than that and you risk rate limits, output you can't usefully review at once, and the dispatcher running out of room to track which agent owns which slug. Two batches of ten is fine; ten batches of one is the failure mode this skill is designed to avoid.
+
+---
+
+## What makes a good output
+
+**Faithful to the code.** Endpoint paths, file locations, method names, table names must match what is actually in the repo. If a subagent can't find something, the right move is a `TODO:` marker, not a guess.
+
+**Concept-first for area docs.** The area-level doc explains what the feature is *for* — responsibilities, boundaries, vocabulary. Deep implementation detail belongs in per-service docs once they exist.
+
+**Honest about gaps.** A clear `TODO: describe rate limiting` is more useful than a fabricated rate limit policy. Future sessions can fill these in from real information.
+
+**Proportionate.** A small CRUD endpoint with one handler does not need every section of the template. Trim or skip sections that genuinely do not apply. The template is a checklist of what *might* be relevant, not a contract that every section must be populated.
+
+**Honors the contract.** The structure, headings, and rules in `<docs-dir>/AGENTS_FEATURES.md` and `<docs-dir>/features/feature-template.md` win every time. If this skill's instructions ever drift from those files, the files are authoritative — they live with the project and are what other agents read.

.claude/skills/document-features/evals/evals.json

@@ -0,0 +1,35 @@
+{
+  "skill_name": "document-features",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "find-features just listed auth, billing, and search as undocumented. Please go document all three.",
+      "expected_output": "Skill verifies prerequisites by discovering the agent docs directory (typically agents-docs/, but may be elsewhere — read from AGENTS.md), takes the three named features, inventories <docs-dir>/features/ to confirm none are already documented, dispatches one subagent per feature in a single message (so they run in parallel), substitutes the discovered <docs-dir> value into each subagent prompt before dispatching, then writes <docs-dir>/features/auth.md, <docs-dir>/features/billing.md, <docs-dir>/features/search.md from the template, and appends three entries to <docs-dir>/FEATURES.md (alphabetical). Leaves TODO markers where content cannot be derived from the code. Does not commit.",
+      "files": []
+    },
+    {
+      "id": 2,
+      "prompt": "document every undocumented feature in this repo",
+      "expected_output": "Skill discovers the docs dir, parses 'every' as 'all', identifies undocumented feature areas with meaningful implementation, dispatches subagents in parallel batches capped at 10 per batch (with the discovered <docs-dir> substituted into each subagent prompt), writes one doc per feature, and updates <docs-dir>/FEATURES.md. If there are more than 10 features, runs a second batch after the first finishes. Reports back which features were skipped and why.",
+      "files": []
+    },
+    {
+      "id": 3,
+      "prompt": "write the docs for billing",
+      "expected_output": "Skill discovers the docs dir, treats 'billing' as a single named feature, checks <docs-dir>/features/billing.md does not already exist, locates billing in the codebase, dispatches one subagent to document it (with <docs-dir> substituted into the prompt), writes <docs-dir>/features/billing.md from the template, and adds an entry to <docs-dir>/FEATURES.md. If billing already has a doc or cannot be located, the skill surfaces that instead of silently creating something.",
+      "files": []
+    },
+    {
+      "id": 4,
+      "prompt": "document the top 5 undocumented features",
+      "expected_output": "Skill discovers the docs dir, parses '5' as a numeric limit, identifies undocumented feature areas, ranks by significance, takes the top 5, dispatches 5 subagents in parallel in a single message (each with <docs-dir> substituted), writes 5 docs from the template, and updates <docs-dir>/FEATURES.md with 5 alphabetical entries. Other candidates are listed in the final report as 'not selected this round'.",
+      "files": []
+    },
+    {
+      "id": 5,
+      "prompt": "this repo uses --docs-dir docs/agents for its agent docs. document the auth feature.",
+      "expected_output": "Skill discovers the docs dir is docs/agents/ (from AGENTS.md path references), dispatches a single subagent with docs/agents substituted into the subagent prompt template, writes docs/agents/features/auth.md, and updates docs/agents/FEATURES.md. Does not hardcode agents-docs/ or docs/features/ — uses the discovered path everywhere.",
+      "files": []
+    }
+  ]
+}

.claude/skills/find-features/SKILL.md

@@ -0,0 +1,149 @@
+---
+name: find-features
+description: Discover feature areas in the current repository that are not yet documented under the agent docs `features/` tree (scaffolded by `setup-agentic-repository` — `agents-docs/features/` by default, or wherever `--docs-dir` put it), then create populated feature docs from the canonical template. Use whenever the user wants to find undocumented features, fill out `features/`, catch up on missing feature documentation, document feature X/Y/Z, or mentions "find features". This is the natural follow-up to `setup-agentic-repository`, which scaffolds the empty `features/` tree this skill populates.
+metadata:
+  author: Olof Brogeby
+  url: https://github.com/brogeby
+---
+
+# find-features
+
+Discover feature areas in this repository that are missing from `<docs-dir>/features/`, then create a populated markdown file for each one — following the contract in `<docs-dir>/AGENTS_FEATURES.md` and the template at `<docs-dir>/features/feature-template.md`. The agent docs directory (`<docs-dir>`) is discovered in Phase 1 — it's typically `agents-docs/` but `setup-agentic-repository` may have written it somewhere else.
+
+The Mimas template (`setup-agentic-repository`) scaffolds an empty `<docs-dir>/features/` tree. This skill is the next step — it fills it in.
+
+---
+
+## Phase 1 — Verify prerequisites and locate the docs directory
+
+Confirm the repo has been initialized with the Mimas template, and discover where its agent docs actually live. `setup-agentic-repository` writes the agent doc tree to **`agents-docs/`** by default (a sibling of any human-maintained `docs/`), but `--docs-dir <dir>` can override that (e.g. `docs/agents`). Don't assume the path; discover it.
+
+1. Read `AGENTS.md` at the repo root. Every Mimas-generated `AGENTS.md` lists its docs paths in the first block (`<docs-dir>/AGENT_WORKFLOW.md`, `<docs-dir>/AGENTS_FEATURES.md`, etc.) — the directory in those paths is the docs dir for this repo.
+2. If `AGENTS.md` doesn't exist or doesn't reference the contract files, fall back to searching for `AGENTS_FEATURES.md` directly (`find . -maxdepth 3 -name AGENTS_FEATURES.md`). The directory containing it is the docs dir.
+3. Confirm the files this skill needs are there:
+   - `<docs-dir>/AGENTS_FEATURES.md` — feature documentation contract
+   - `<docs-dir>/features/feature-template.md` — the canonical template
+   - `<docs-dir>/FEATURES.md` — the feature index
+
+If any of those are missing, tell the user this skill is designed to run after `setup-agentic-repository` and stop. Don't try to scaffold them yourself — that is the other skill's job.
+
+For the rest of this skill, treat the discovered directory as `<docs-dir>` and use it wherever paths appear. Don't hardcode `docs/` or `agents-docs/` in your reasoning, prompts, or report.
+
+Read `<docs-dir>/AGENTS_FEATURES.md` and the root `AGENTS.md` (plus any subdomain `CONTEXT.md` files) so you know:
+
+- what counts as a feature area — a named concept with dedicated logic in the codebase, identified by naming and behavior, not folder structure alone
+- the split between area-level docs (`<docs-dir>/features/<area>.md`) and per-service docs (`<docs-dir>/features/<area>/<service>.md`)
+- which subdomains exist and where their code lives
+
+These files define the contract you must satisfy. The whole point of the skill is to produce docs that look like a senior engineer on this project wrote them, following the rules already agreed in `AGENTS_FEATURES.md`.
+
+---
+
+## Phase 2 — Inventory what is already documented
+
+List `<docs-dir>/features/` and capture, before asking the user anything:
+
+- Top-level `.md` files (one per documented area) — ignore `feature-template.md`, it is the template
+- Subdirectories under `<docs-dir>/features/` (areas with per-service docs)
+- The entries listed in `<docs-dir>/FEATURES.md`
+
+You will use this list to filter out features that already have an area doc. Discrepancies between the filesystem and `<docs-dir>/FEATURES.md` are worth flagging in your final report, but don't block on them.
+
+---
+
+## Phase 3 — Ask the user what to discover
+
+Use `AskUserQuestion` to ask how many features (or which ones) to discover. Phrase the question so it accepts a number, "all", or a free-text list of names. The tool always offers an "Other" free-text fallback, so give a few sensible presets and let the user type a specific answer when none fit.
+
+```
+questions:
+  - question: "How many features would you like to discover, or which ones specifically?"
+    header: "Scope"
+    multiSelect: false
+    options:
+      - label: "Top 5 (Recommended)"
+        description: "Discover up to 5 of the most significant undocumented feature areas."
+      - label: "All"
+        description: "Find every undocumented feature area in the codebase."
+      - label: "A specific number (1–10)"
+        description: "I'll tell you a number from 1 to 10."
+      - label: "Specific names"
+        description: "I'll list the feature names I want documented (e.g. 'auth, billing, search')."
+```
+
+Parse whatever they answer with — accept a bare number, the word "all" (any case), or a comma- or space-separated list. Phrases like "find feature x, y, z" or "auth and billing" should yield `["x", "y", "z"]` and `["auth", "billing"]` respectively. Don't be strict about format; pull out the names.
+
+If the user names features you can't locate in the codebase, surface that and ask whether to skip them or create scaffolded TODO docs for them. Do not silently invent them.
+
+---
+
+## Phase 4 — Discover undocumented feature areas
+
+Scan the codebase for feature areas using the definition from `<docs-dir>/AGENTS_FEATURES.md`. Start from the subdomains declared in the root `AGENTS.md` — if there are several large subdomains, **launch one subagent per subdomain in parallel** so discovery doesn't serialize.
+
+For each candidate feature, capture:
+
+- **Slug** — kebab-case, ideally matching how the area is referenced in code or routes (e.g. `auth`, `billing`, `recruitment-content`)
+- **One-sentence concept** — what the feature does, in user-facing terms
+- **Where the code lives** — routes, services, handlers, components, modules
+- **Significance signal** — at least one of: dedicated service layer, non-trivial handler, dedicated DB tables/migrations, multiple endpoints, real business rules. A single empty route stub is not enough
+- **Whether it is already documented** — does `<docs-dir>/features/<slug>.md` exist already?
+
+Then filter:
+
+- Drop anything that already has an area-level doc
+- Drop stubs and scaffolding — `<docs-dir>/AGENTS_FEATURES.md` says an entry must have meaningful implementation. Err on the side of leaving thin features out and noting them as "not yet earning an entry"
+
+Rank what is left by significance (surface area, number of endpoints, depth of business logic), then trim to what the user asked for:
+
+- **Number** → take the top N from the ranked list
+- **"all"** → take everything that survived the filter
+- **Named features** → take only those, matched by slug or close fuzzy match, warning about any that didn't match
+
+---
+
+## Phase 5 — Create the feature docs
+
+For each chosen feature:
+
+1. Read `<docs-dir>/features/feature-template.md` once and use it as the structural template — section order, headings, prompts. Do not invent your own structure.
+2. Create `<docs-dir>/features/<slug>.md` populated from the template:
+   - Fill in what you can verify from the code: overview, responsibilities, key concepts, API endpoint(s), service/handler/repository paths, key types, tests location, related features
+   - Set **`Area:`** to the slug, **`Status:`** to `Active` for production code or `In Progress` for half-built features, and **`Last updated:`** to today's date in `YYYY-MM-DD`
+   - For sections you cannot confidently fill (performance characteristics, security review, edge cases nobody has documented), keep the template's prompt and add a clear TODO marker. Leaving an honest gap is better than inventing content
+3. If the feature has multiple distinct services or endpoints worth separating, also create `<docs-dir>/features/<slug>/` and seed per-service docs (`<docs-dir>/features/<slug>/<service>.md`) from the same template, then link them from the area doc. Only do this when complexity actually warrants it — the contract says don't duplicate large sections between area and per-service docs
+
+After writing each file, add an entry to `<docs-dir>/FEATURES.md` in alphabetical order, in the form:
+
+```
+- [<slug>](./features/<slug>.md) — one-line description
+```
+
+If `<docs-dir>/FEATURES.md` still contains the placeholder `_No feature areas documented yet. Add entries as you build out the system._`, remove that line as you add the first real entry.
+
+---
+
+## Phase 6 — Report back
+
+Tell the user:
+
+- Which feature docs were created (full paths)
+- Which candidates were considered but rejected, and why ("too thin to earn an entry yet", "matches existing doc <name>", etc.)
+- Which sections in the new docs are TODOs that still need human judgment (performance, security, business rules, error scenarios)
+- Whether `<docs-dir>/FEATURES.md` was updated, and any discrepancies you noticed between it and the filesystem
+
+Do not commit the changes. The user reviews before committing.
+
+---
+
+## What makes a good output
+
+**Faithful to the code.** Endpoint paths, file locations, method names, table names must match what is actually in the repo. If you cannot find something, leave the template prompt in place with a TODO — do not guess.
+
+**Concept-first for area docs.** The area-level doc explains what the feature is *for* — responsibilities, boundaries, vocabulary. Implementation detail belongs in per-service docs once they exist.
+
+**Honest about gaps.** A clear `TODO: describe rate limiting` is more useful than a fabricated rate limit policy. Future sessions can fill these in from real information.
+
+**Proportionate.** A small CRUD endpoint with one handler does not need every section of the template. Trim or skip sections that genuinely do not apply (no auth, no caching, no migrations, no feature flags). The template is a checklist of what *might* be relevant, not a contract that every section must be populated.
+
+**Honors the contract.** The structure, headings, and rules in `<docs-dir>/AGENTS_FEATURES.md` and `<docs-dir>/features/feature-template.md` win every time. If this skill's instructions ever drift from those files, the files are authoritative — they live with the project and are what other agents read.

.claude/skills/find-features/evals/evals.json

@@ -0,0 +1,35 @@
+{
+  "skill_name": "find-features",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "I just ran /setup-agentic-repository on this repo and the features folder is empty. Can you find the most important features and write up docs for them?",
+      "expected_output": "Skill verifies prerequisites by discovering the agent docs directory (reading AGENTS.md or searching for AGENTS_FEATURES.md — typically agents-docs/ but may be elsewhere), asks how many/which features (with Top 5 / All / Number / Names options), scans the codebase, creates <docs-dir>/features/<slug>.md files from the template for the chosen features, and appends entries to <docs-dir>/FEATURES.md (alphabetical). Honestly leaves TODO markers where it cannot derive content from the code.",
+      "files": []
+    },
+    {
+      "id": 2,
+      "prompt": "we have some feature docs already but I think auth and billing are missing — can you check and add what's missing?",
+      "expected_output": "Skill discovers the docs dir, inventories the existing <docs-dir>/features/, treats the user's free-text answer 'auth and billing' as the named list, verifies both exist in the codebase (skipping or flagging any that don't), and creates only the missing area docs while leaving already-documented features alone.",
+      "files": []
+    },
+    {
+      "id": 3,
+      "prompt": "find every undocumented feature in this repo and document them all",
+      "expected_output": "Skill interprets 'every' as 'all', discovers every feature area with meaningful implementation that lacks an area doc in the discovered <docs-dir>/features/, filters out stubs, ranks by significance, and creates one doc per area plus <docs-dir>/FEATURES.md entries. Reports back rejected candidates with reasons.",
+      "files": []
+    },
+    {
+      "id": 4,
+      "prompt": "find 3 features that aren't documented yet",
+      "expected_output": "Skill parses '3' as a numeric limit, discovers undocumented features in the discovered docs dir, takes the top 3 by significance, and creates docs and <docs-dir>/FEATURES.md entries for exactly those three. Other candidates are listed in the final report as 'not selected this round'.",
+      "files": []
+    },
+    {
+      "id": 5,
+      "prompt": "the docs are under agents-docs/ in this repo, find any feature areas we haven't written up yet",
+      "expected_output": "Skill reads AGENTS.md (or falls back to searching for AGENTS_FEATURES.md), confirms the docs dir is agents-docs/, uses agents-docs/AGENTS_FEATURES.md as the contract and agents-docs/features/feature-template.md as the template, and writes new docs into agents-docs/features/. Does not hardcode 'docs/' anywhere in the output.",
+      "files": []
+    }
+  ]
+}

.gitignore

@@ -61,7 +61,6 @@ Thumbs.db
 /server/data/variables.json
 dist-server/*
 
-AGENTS.md
 doc/**
 
 metoyou.sqlite*

AGENTS.md

@@ -0,0 +1,101 @@
+# AGENTS.md
+
+Read these files at the start of every session before doing any work:
+
+1. `agents-docs/AGENT_WORKFLOW.md` — workflow and operating rules
+2. `agents-docs/LESSONS.md` — durable rules learned from past corrections; apply any that match this session's work
+3. `agents-docs/AGENTS_FEATURES.md` — when and how to update feature docs
+4. `agents-docs/FEATURES.md` — feature index
+5. `agents-docs/ENGINEERING.md` — engineering standards
+6. `agents-docs/CONTEXT-MAP.md` — index of bounded contexts in this repo
+
+Reference on-demand (when the workflow triggers them — see `agents-docs/AGENT_WORKFLOW.md` §§ 4–5):
+
+- `agents-docs/AGENTS_CONTEXT.md` — contract for updating `CONTEXT.md` / `CONTEXT-MAP.md`
+- `agents-docs/AGENTS_ADRS.md` — contract for writing architecture decision records
+
+When working in a subdomain, also read its `CONTEXT.md` first:
+
+- Product client (Angular 21): `toju-app/CONTEXT.md`
+- Desktop shell (Electron main + preload): `electron/CONTEXT.md`
+- Signaling server (Express + WebSocket): `server/CONTEXT.md`
+- End-to-end tests (Playwright): `e2e/CONTEXT.md`
+- Marketing site (Angular 19): `website/CONTEXT.md`
+- Application documentation (Docusaurus): `docs-site/CONTEXT.md`
+
+---
+
+MetoYou (also called Toju) is a desktop-first, P2P Discord-style chat application managed as an npm-workspaces monorepo. It bundles an Angular 21 product client, an Electron 39 desktop shell with TypeORM + sql.js for local persistence, a small Node/TypeScript Express signaling server with WebSocket-based realtime, a Playwright end-to-end suite, an Angular 19 marketing site, and a Docusaurus app/plugin documentation site that ships inside the Electron build. Voice and screen-share are WebRTC, with RNNoise denoising via a WASM audio worklet.
+
+## CRITICAL — Non-negotiable rules for all agents
+
+### Test-Driven Development (MANDATORY)
+**Write tests before implementation code.**
+
+When creating or changing anything:
+1. STOP — do not write implementation first
+2. Write failing tests (RED)
+3. Run tests and confirm failure (`npm run test` for the product client; `npm run test:e2e` for end-to-end; place spec files colocated with source, suffix `.spec.ts`)
+4. Write minimal code to pass tests (GREEN)
+5. Refactor while keeping tests green
+
+This applies to all code — Angular components and services, NgRx effects/reducers, Electron IPC handlers, server CQRS handlers, websocket message handlers, plugin runtime, and domain logic. If the code lives in a package without a configured test runner (server, website, docs-site), surface that gap before adding logic there.
+
+### Lint correctness (MANDATORY)
+Before completing any task:
+1. Run `npm run lint` from the repo root (ESLint 9 flat config in `eslint.config.js` covers every package)
+2. Fix all errors
+3. Do not consider work complete until it exits with code 0
+
+### Type / build correctness (MANDATORY)
+Type checks live in build scripts:
+
+- Product client (`toju-app/`): `npm run build` (Angular CLI runs `tsc` with strict settings)
+- Electron (`electron/`): `npm run build:electron` (invokes `tsc -p tsconfig.electron.json`)
+- Server (`server/`): `cd server && npm run build` (invokes `tsc`)
+
+If your change touches one of these packages, run the corresponding build and ensure it exits 0 before marking work complete.
+
+## Most important rule
+
+After any change that affects API contracts, schemas, invariants, workflows, or major behavior: update the relevant `agents-docs/features/<slug>.md` as part of the same task — not as a follow-up. New feature area → create `agents-docs/features/<slug>.md` and add an entry to `agents-docs/FEATURES.md` (alphabetical).
+
+The product client already maintains per-domain READMEs under `toju-app/src/app/domains/<name>/README.md`. When the change is fully internal to one of those bounded contexts and its surface stays the same, the domain README is the right place to update; cross-context contracts (websocket envelopes, IPC channels, server routes, plugin manifests) belong in `agents-docs/features/`.
+
+## Structure of further instructions
+
+- **Agent workflow & operating rules:** `agents-docs/AGENT_WORKFLOW.md`
+- **Agent lessons (durable cross-session rules):** `agents-docs/LESSONS.md`
+- **Engineering standards:** `agents-docs/ENGINEERING.md`
+- **Feature documentation contract:** `agents-docs/AGENTS_FEATURES.md`
+- **CONTEXT documentation contract:** `agents-docs/AGENTS_CONTEXT.md`
+- **ADR contract:** `agents-docs/AGENTS_ADRS.md`
+- **Feature index:** `agents-docs/FEATURES.md`
+- **Feature docs:** `agents-docs/features/`
+- **Architecture decisions:** `agents-docs/adr/`
+- **Context map:** `agents-docs/CONTEXT-MAP.md`
+- **Product-client domain:** `toju-app/CONTEXT.md`
+- **Desktop-shell domain:** `electron/CONTEXT.md`
+- **Server domain:** `server/CONTEXT.md`
+- **E2E suite domain:** `e2e/CONTEXT.md`
+- **Marketing-site domain:** `website/CONTEXT.md`
+- **App-docs domain:** `docs-site/CONTEXT.md`
+
+Keep this file minimal. Do not duplicate detailed rules here.
+
+## Completion checklist
+
+Before marking work complete:
+
+- [ ] Tests written before implementation
+- [ ] All tests passing (`npm run test`, plus `npm run test:e2e` if behavior is user-visible)
+- [ ] `npm run lint` passes
+- [ ] Affected package builds: `npm run build` / `npm run build:electron` / `cd server && npm run build`
+- [ ] Naming conventions followed (kebab-case files; domain `*.rules.ts` / `*.model.ts` / `*.component.ts` suffixes)
+- [ ] Errors handled
+- [ ] Feature docs updated if contract/schema/invariant changed (see `agents-docs/AGENTS_FEATURES.md`)
+- [ ] `CONTEXT.md` updated if a domain term was resolved or introduced (see `agents-docs/AGENTS_CONTEXT.md`)
+- [ ] ADR written if a hard-to-reverse decision was made (see `agents-docs/AGENTS_ADRS.md`)
+- [ ] Lesson recorded in `agents-docs/LESSONS.md` if this session produced a correction, revert, or hidden constraint (see triggers in `agents-docs/AGENT_WORKFLOW.md`)
+- [ ] PR opened with summary and linked issues (`Fixes #<n>` / `Relates to #<n>`)
+- [ ] Gitea Workflows checks passing

CLAUDE.md

@@ -0,0 +1 @@
+Read AGENTS.md at the root of this repository at the start of every session before doing any work. It links to all other agent instruction files.

agents-docs/AGENTS_ADRS.md

@@ -0,0 +1,89 @@
+# Agent Instructions: Architecture Decision Records (ADRs)
+
+Architectural decisions live in **`agents-docs/adr/`** as numbered Markdown files (`NNNN-slug.md`).
+
+This document defines how agents must detect, document, and maintain architectural decisions as the codebase grows.
+
+> This file is part of the agent instruction infrastructure.
+> Do NOT create, delete, or modify this file unless explicitly instructed.
+
+---
+
+## What an ADR is
+
+A short record of an architectural decision that future engineers (and agents) will need context for. The format is Nygard short form:
+
+- Title and number (`ADR-NNNN: <slug>`).
+- Required: 1–3 sentences each covering **Context** (why this came up), **Decision** (what was chosen), and **Rationale** (why this option over alternatives).
+- Conventional: `Status` (usually `Accepted` for new ADRs; `Superseded by ADR-MMMM` once overturned).
+- Optional: `Considered Options`, `Consequences` — add only when they genuinely help. Most ADRs won't need them.
+
+See `agents-docs/adr/0001-record-architectural-decisions.md` for the canonical example — a minimal four-section ADR that matches the typical shape.
+
+The value is in recording **that a decision was made** and **why** — not in completing formal sections.
+
+---
+
+## ADR Contract (MANDATORY)
+
+### When to write an ADR
+
+The canonical criteria — the 3-criteria gate — live in `agents-docs/AGENT_WORKFLOW.md` § 5 ADR upkeep. Read those before writing. In short: write an ADR only when the decision is **hard to reverse**, **surprising without context**, and the **result of genuine trade-offs**. If any of the three is missing, don't.
+
+Suitable topics: architectural patterns, integration approaches, significant technology selections, scope boundaries, intentional deviations from standard practices, non-obvious rejections of alternatives.
+
+### Read before crossing decision boundaries
+
+Before non-trivial changes in an area, scan `agents-docs/adr/` for decisions that touch it. If your work would contradict an existing ADR:
+
+- **Surface it explicitly**, don't silently override. Phrase it as: "_Contradicts ADR-NNNN (slug) — but worth reopening because…_"
+- If the contradiction is intentional, write a new ADR that supersedes the old one (see below).
+
+### Write the ADR in the same turn as the decision
+
+When the 3-criteria gate is met, write the ADR before reporting the task done. The `AGENTS.md` completion checklist has a line for this; don't tick the box without it.
+
+### Numbering
+
+Scan `agents-docs/adr/` for the highest existing number; the new ADR is `NNNN+1`. Use 4-digit zero-padded numbers (`0001`, `0002`, …).
+
+Slugs are kebab-case and describe the decision concisely: `0042-postgres-for-write-model.md`, `0043-event-sourced-orders.md`.
+
+### Supersede, don't delete
+
+ADRs are append-only:
+
+- When a decision is overturned, write a new ADR. The old one stays.
+- Add `Superseded by ADR-NNNN` near the top of the old ADR.
+- Add `Supersedes ADR-MMMM` near the top of the new one.
+- Never delete or rewrite history.
+
+---
+
+## Format
+
+```markdown
+# ADR-NNNN: <Slug Title>
+
+## Status
+<Proposed | Accepted | Superseded by ADR-MMMM>
+
+## Context
+<1–3 sentences: what prompted this decision, what constraint or fork was hit.>
+
+## Decision
+<1–3 sentences: what was chosen, plainly stated.>
+
+## Rationale
+<1–3 sentences: why this option over the alternatives.>
+
+<!-- Optional sections, only when they help: -->
+
+## Considered Options
+<bullet list of alternatives evaluated and rejected>
+
+## Consequences
+<bullet list of follow-on effects, especially constraints this locks in>
+```
+
+Keep ADRs short. Three sentences per section beats three paragraphs.

agents-docs/AGENTS_CONTEXT.md

@@ -0,0 +1,81 @@
+# Agent Instructions: CONTEXT.md & CONTEXT-MAP.md
+
+Domain documentation lives in **`CONTEXT.md`** files co-located with the code they describe:
+
+- **Single-context repo:** one `CONTEXT.md` at the root (or at the top of the single subdomain).
+- **Multi-context repo:** one `CONTEXT.md` per subdomain (e.g. `src/CONTEXT.md`, `frontend/CONTEXT.md`), indexed by `agents-docs/CONTEXT-MAP.md`.
+
+This document defines how agents must detect, document, and maintain domain knowledge as the codebase grows.
+
+> This file is part of the agent instruction infrastructure.
+> Do NOT create, delete, or modify this file unless explicitly instructed.
+
+---
+
+## What `CONTEXT.md` is for
+
+A subdomain's `CONTEXT.md` is a **domain artefact**, not an agent-rule file. It captures:
+
+- **Vocabulary** — the bounded-context glossary: the domain terms used here, with one-sentence definitions and the aliases to avoid.
+- **Relationships** — how the domain terms connect (cardinality, ownership).
+- **Boundaries / IO** — what this subdomain exposes externally and consumes from other subdomains.
+- **Invariants** — rules that always hold within this subdomain.
+- **Flagged ambiguities** — terms still in dispute, with proposed resolutions.
+
+Agent-procedural rules (TDD, typecheck, formatter) live in `/AGENTS.md` and `agents-docs/ENGINEERING.md` — never in `CONTEXT.md`.
+
+Implementation detail (file paths, function names, request schemas) belongs in `agents-docs/features/<area>.md` — never in `CONTEXT.md`.
+
+## What `CONTEXT-MAP.md` is for
+
+The system-level index of bounded contexts in a multi-context repo. One row per subdomain — name, one-line purpose, public surface, link to its `CONTEXT.md`. Plus relationships between contexts (upstream/downstream, shared types, events).
+
+Only exists when ≥2 subdomains have their own `CONTEXT.md`. Single-context repos skip it.
+
+---
+
+## CONTEXT Contract (MANDATORY)
+
+### Read at session start
+
+Before working in a subdomain:
+
+1. Read that subdomain's `CONTEXT.md`. If `agents-docs/CONTEXT-MAP.md` exists, start there to locate the right one.
+2. If your change couples two subdomains (shared types, cross-context events), read both `CONTEXT.md`s.
+3. Skip files that don't exist. **Proceed silently** — don't flag absence; producer triggers create them lazily.
+
+### Use the vocabulary verbatim
+
+When your output names a domain concept — in an issue title, a refactor proposal, a hypothesis, a test name, a variable name, an error message — use the term as defined in `CONTEXT.md`. Don't drift to synonyms the glossary explicitly avoids.
+
+### Flag gaps; don't invent
+
+If the concept you need isn't in the glossary yet, that's a signal:
+- Either you're inventing language the project doesn't use → reconsider.
+- Or there's a real gap → add it (see triggers below). Don't silently coin a new term.
+
+### Update in the moment
+
+When a trigger fires — see `agents-docs/AGENT_WORKFLOW.md` § 4 CONTEXT.md upkeep for the canonical trigger list — update the relevant `CONTEXT.md` in the same turn, before reporting work done. The triggers cover term resolutions, user corrections to terminology, new concepts introduced by features, and self-caught synonym invention.
+
+### Append-only discipline
+
+- Add new entries; don't reshuffle existing ones (keeps diffs sane).
+- If a term changes meaning, supersede it with a clarifying entry — don't silently rewrite history.
+- If `Flagged ambiguities` gets resolved, move the resolution into the main vocabulary table and remove the flag.
+
+### Multi-context: keep the map current
+
+When adding a new subdomain `CONTEXT.md`, add a row to `agents-docs/CONTEXT-MAP.md` in the same task. When the public surface or upstream/downstream relationships change, update the map.
+
+---
+
+## Format
+
+The format of an entry is documented at the top of each `CONTEXT.md` so it self-describes. Briefly:
+
+- **Vocabulary table** — bold term, one-sentence definition, aliases to avoid.
+- **Relationships** — bullet list using bold terms and cardinality ("A **TermA** belongs to exactly one **TermB**").
+- **Boundaries / IO** — `Exposes:` and `Consumes:` bullets.
+- **Invariants** — bullet list of constraints that always hold.
+- **Flagged ambiguities** — terms still in dispute, with proposed resolutions.

agents-docs/AGENTS_FEATURES.md

@@ -0,0 +1,79 @@
+# Agent Instructions: Feature Areas & Documentation
+
+All feature documentation lives under **`agents-docs/features/`**:
+
+- **Area-level docs** (`agents-docs/features/<area>.md`): concept-first overview of a feature area — responsibilities, boundaries, key concepts.
+- **Per-service docs** (`agents-docs/features/<area>/<service>.md`): API contracts, request/response schemas, implementation details, changelogs.
+
+This document defines how agents must detect, document, and maintain feature knowledge as the codebase grows.
+
+> This file is part of the agent instruction infrastructure.
+> Do NOT create, delete, or modify this file unless explicitly instructed.
+
+---
+
+## What is a feature area?
+
+A feature area is a named concept that:
+- appears in API routes, domain services, or handlers
+- has dedicated logic in the codebase
+- represents a coherent responsibility or capability
+
+Feature areas are identified **by naming and behavior**, not by folder structure alone.
+
+---
+
+## Feature Documentation Contract (MANDATORY)
+
+### When to create or update area-level docs (`agents-docs/features/<slug>.md`)
+
+- New feature area introduced → create `agents-docs/features/<slug>.md` and add to `agents-docs/FEATURES.md` (alphabetical).
+- Changes to **responsibilities, boundaries, workflows, or high-level behavior** → update the relevant area doc in the same task.
+
+### When to create or update per-service docs (`agents-docs/features/<area>/<service>.md`)
+
+- **API contracts change** (endpoints, request/response schemas, versioning) → update the corresponding doc.
+- **New API or capability** → create a per-service doc and link it from the area doc.
+- **Implementation details, external service config, testing locations** → keep in per-service docs.
+
+### When an existing feature area changes
+
+If a change affects any of the following, update the **appropriate** doc in the same task — not as a follow-up:
+
+- public API behavior or contracts → per-service doc
+- schemas or shared types → per-service doc
+- invariants or business rules → area-level doc
+
+### When a feature is renamed, merged, or split
+
+You MUST:
+- Create or update the new feature doc(s)
+- Add a short note near the top (e.g. "Renamed from …" or "Merged from …")
+- Update `agents-docs/FEATURES.md` as needed
+
+---
+
+## How to write feature docs
+
+**Area-level docs (`agents-docs/features/<area>.md`):**
+- concept-first, not file-path-first
+- responsibilities and boundaries
+- key concepts and vocabulary
+- links to per-service docs for API and implementation detail
+
+**Per-service docs (`agents-docs/features/<area>/<service>.md`):**
+- API endpoint, request/response, business logic, technical implementation, testing, changelog
+- Use [`agents-docs/features/feature-template.md`](./features/feature-template.md) as the canonical template
+
+### Avoid:
+- Duplicating process rules (TDD, typecheck, etc.) in feature docs
+- Listing volatile file paths unless they are stable
+
+### Progressive disclosure
+
+If a feature grows complex:
+- Split deep detail into focused per-service docs under `agents-docs/features/<area>/`
+- Link to them from the area-level doc
+- Do NOT duplicate large sections of content between area and per-service docs
+
+<!-- If you're reading this, you owe Olof a coffee. -->

agents-docs/AGENT_WORKFLOW.md

@@ -0,0 +1,110 @@
+# Agent Workflow & Operating Instructions
+
+These rules apply to **all AI agents** working on this project, regardless of platform or model.
+
+Read this file at the start of every session.
+
+---
+
+## Workflow Orchestration
+
+### 1. Plan Mode Default
+
+- Enter plan mode for ANY non-trivial task (3+ steps or architectural decisions)
+- If something goes sideways, STOP and re-plan immediately — don't keep pushing
+- Use plan mode for verification steps, not just building
+- Write detailed specs upfront to reduce ambiguity
+
+### 2. Subagent Strategy
+
+- Use subagents liberally to keep the main context window clean
+- Offload research, exploration, and parallel analysis to subagents
+- For complex problems, throw more compute at it via subagents
+- One task per subagent for focused execution
+
+### 3. Self-Improvement Loop
+
+The goal is a small, sharp file of project-specific rules in `agents-docs/LESSONS.md` that future sessions read and apply. The format of a lesson is defined at the top of `agents-docs/LESSONS.md` — read it before writing one.
+
+**Read at session start.** Open `agents-docs/LESSONS.md` and apply any rules that match the work you're about to do. This is non-optional; the file exists so the same mistake isn't made twice.
+
+**Triggers — record a lesson when any of these happen.** Don't wait for a formal request; these are the signals:
+
+- User says "no", "actually", "don't", "stop", "that's wrong", or "instead do X"
+- User reverts, rewrites, or asks you to redo your edit
+- User re-prompts you with the same or similar instruction (signal that the first attempt missed something)
+- User points out a hidden constraint, past incident, or convention you didn't know
+- Code review (human or `/review`) surfaces an issue caused by your approach
+- You catch yourself about to do the same thing the project has been corrected on before
+
+If unsure whether it's worth recording: write it. Sharper is better than missing, and grooming the file is cheap.
+
+**Write before reporting done.** A session that produced a correction must produce a lesson — record it in the same turn the work is completed, not "later". The `AGENTS.md` completion checklist has a line for this; don't tick the box without it.
+
+**Groom periodically.** When `agents-docs/LESSONS.md` passes ~20 entries, propose consolidations to the user — merge duplicates, delete rules that no longer apply, shorten anything vague.
+
+### 4. CONTEXT.md upkeep
+
+Read `CONTEXT.md` (or `agents-docs/CONTEXT-MAP.md` → per-subdomain `CONTEXT.md`) when working in a subdomain. Use its vocabulary verbatim **where defined** in code, tests, issues, and commits. If a needed term isn't in the glossary, treat it as a trigger (see below) rather than silently inventing a synonym; the full contract lives in `agents-docs/AGENTS_CONTEXT.md`.
+
+**Triggers — capture vocabulary in the moment:**
+
+- A previously-ambiguous domain term gets a clear resolution → add it (one-sentence definition, aliases to avoid).
+- User corrects your terminology → record the correct term; mark the wrong one as an alias to avoid.
+- A new feature introduces a concept absent from the glossary → add it before claiming the feature done.
+- You catch yourself inventing a synonym because the right term isn't there → flag the gap; don't silently coin a new term.
+
+**Write before reporting done.** Update the relevant `CONTEXT.md` in the same turn the trigger fires. Append-only — add new entries, don't reshuffle existing ones. The format is documented at the top of each `CONTEXT.md`. See `agents-docs/AGENTS_CONTEXT.md` for the full contract.
+
+### 5. ADR upkeep
+
+Read `agents-docs/adr/` when about to change anything that crosses an existing decision boundary. If your work would contradict an ADR, surface it explicitly — never silently override.
+
+**Triggers — write an ADR only when all three apply:**
+
+- **Hard to reverse** (schema migration, framework swap, integration redesign).
+- **Surprising without context** (future engineers will question the approach).
+- **Result of genuine trade-offs** (real alternatives existed and you chose deliberately).
+
+If all three apply: write the ADR in the same turn as the decision. Next number (4-digit zero-padded), kebab-case slug, Nygard short form — see `agents-docs/adr/0001-record-architectural-decisions.md` for the canonical example and `agents-docs/AGENTS_ADRS.md` for the contract. If any of the three is missing: don't write one.
+
+**Supersede, don't delete.** Overturned decisions get a new ADR; the old one stays with a `Superseded by ADR-NNNN` note.
+
+### 6. Verification Before Done
+
+- Never mark a task complete without proving it works
+- Diff behavior between main and your changes when relevant
+- Ask yourself: "Would a staff engineer approve this?"
+- Run tests, check logs, demonstrate correctness
+
+### 7. Demand Elegance (Balanced)
+
+- For non-trivial changes: pause and ask "is there a more elegant way?"
+- If a fix feels hacky: "Knowing everything I know now, implement the elegant solution"
+- Skip this for simple, obvious fixes — don't over-engineer
+- Challenge your own work before presenting it
+
+### 8. Autonomous Bug Fixing
+
+- When given a bug report: just fix it. Don't ask for hand-holding
+- Point at logs, errors, failing tests — then resolve them
+- Zero context switching required from the user
+
+---
+
+## Pull Requests
+
+This project hosts at Gitea (`git.azaaxin.com/myxelium/Toju`). Gitea PRs and issues use GitHub-style syntax.
+
+- Create a feature branch for every change: `<type>/<short-description>` (e.g. `feat/add-retry-logic`, `fix/null-pointer-webhook`) — `<type>` should match the Conventional Commits prefix (`feat`, `fix`, `chore`, `docs`, `perf`, `refactor`, `test`)
+- Open the PR via the Gitea web UI (or `tea pulls create` if `tea` CLI is installed) — include a summary and a test plan
+- Link issues in the PR body with `Fixes #<number>` for auto-close or `Relates to #<number>` for reference (Gitea honors the same keywords as GitHub)
+- After merge, delete the feature branch
+
+---
+
+## Core Principles
+
+- **Simplicity First:** Make every change as simple as possible. Impact minimal code.
+- **No Laziness:** Find root causes. No temporary fixes. Senior developer standards.
+- **Minimal Impact:** Changes should only touch what's necessary. Avoid introducing bugs.

agents-docs/CONTEXT-MAP.md

@@ -0,0 +1,30 @@
+# Context Map
+
+Bounded contexts in this system. Before working in a subdomain, read its `CONTEXT.md`. See `agents-docs/AGENTS_CONTEXT.md` for the contract.
+
+## Contexts
+
+| Context | Purpose | Public surface | CONTEXT.md |
+|---------|---------|----------------|------------|
+| **toju-app** | Angular 21 product client — UI, NgRx state, per-domain rules and services for chat, voice, screen-share, plugins, theming | Window-hosted Angular bundle; consumes Electron `window.api` (preload bridge) and the server WebSocket; serves the user-facing experience | `toju-app/CONTEXT.md` |
+| **electron** | Desktop shell — main process, preload bridge, IPC handlers, local SQLite persistence, plugin sandbox, OS integrations | `window.api.*` surface exposed to the renderer via the preload; main-process IPC channel names; CQRS handlers; TypeORM entities in `electron/entities/` | `electron/CONTEXT.md` |
+| **server** | Signaling server — REST routes for server directory + auth, WebSocket realtime, CQRS handlers, TypeORM persistence | HTTP routes under `server/src/routes/`; WebSocket envelopes under `server/src/websocket/`; server-directory API | `server/CONTEXT.md` |
+| **e2e** | Playwright suite — end-to-end coverage of the product client running against a real Electron build and signaling server | No public surface — observer/verifier of the system | `e2e/CONTEXT.md` |
+| **website** | Angular 19 marketing site — public-facing landing pages, screenshots, download links | Static SSR/CSR bundle deployed independently of the product app | `website/CONTEXT.md` |
+| **docs-site** | Docusaurus app — application and plugin author documentation served by the Electron Local API | Static bundle at `docs-site/build/`, mounted by Electron's local HTTP server for in-app docs | `docs-site/CONTEXT.md` |
+
+## Relationships
+
+- **toju-app** is downstream of **electron** via the `window.api` preload bridge. The renderer cannot reach Node, the filesystem, or SQLite directly — every privileged operation goes through an IPC channel defined in `electron/`.
+- **toju-app** is downstream of **server** via the WebSocket envelope contract and the REST server-directory API. Envelope shape changes require coordinated edits to both sides.
+- **electron** owns the **local** persistence layer (per-user TypeORM + sql.js database). **server** owns the **shared** persistence layer (signaling state, server-directory entries, auth artifacts). They do not share entities — the wire format is the contract.
+- **electron** hosts **docs-site** at runtime: the Local API server inside the desktop app mounts the prebuilt Docusaurus bundle so plugin authors and end users can browse docs offline. Building docs-site is a prerequisite of `npm run build:all`.
+- **e2e** depends on **toju-app**, **electron**, and **server** simultaneously — tests boot the full desktop stack against a real signaling server. Treat E2E as the integration boundary that proves the contracts above are aligned.
+- **website** is independent of the runtime stack. It shares no code or schemas with the product app; it links out to release artifacts produced by Gitea Workflows.
+- **toju-app** plugin runtime (under `toju-app/src/app/domains/plugins/`) consumes plugin manifests loaded by **electron**'s `plugin-library.ts`. The manifest schema is a third coupling axis between the two contexts.
+
+## Rules for agents
+
+- Add a row when a new subdomain gains its own `CONTEXT.md`.
+- Update the public surface or relationships when they change.
+- Keep this file scannable — one row per context, terse purpose strings.

agents-docs/ENGINEERING.md

@@ -0,0 +1,222 @@
+# Engineering Standards & Workflows
+
+This document defines shared engineering practices for **MetoYou / Toju**.
+
+---
+
+## Root README.md policy
+
+`README.md` exists to answer:
+
+- what this repo is
+- how to run it locally
+- where to find canonical documentation
+
+Agents should update `README.md` when dev commands change, ports or startup steps change, or links to docs move.
+
+Agents should **not** describe feature behavior, list API endpoints, or include request/response schemas. Canonical documentation lives under `agents-docs/` and (for product-client bounded contexts) under `toju-app/src/app/domains/<name>/README.md`.
+
+---
+
+## Testing standards
+
+This repo runs two test stacks. Choose by what you're verifying.
+
+### Unit / component tests — Vitest
+
+- **Framework:** Vitest 4.x
+- **Where it runs:** the Angular product client (`toju-app/`) and any package that imports `@toju-app/*` modules; Electron has colocated `*.spec.ts` files that are wired through the same root Vitest config.
+- **Test suffix:** `*.spec.ts`
+- **Location:** colocated with source (`message-rules.ts` ↔ `message-rules.spec.ts`)
+- **Run all:** `npm run test` (from repo root — runs `cd toju-app && vitest run`)
+- **Watch:** `cd toju-app && npx vitest`
+- **Single file:** `cd toju-app && npx vitest run <relative-path>`
+- **Setup file:** `toju-app/src/test-setup.ts`
+
+The server package does not currently have a test runner script — there is one colocated spec (`server/src/websocket/handler-plugin.spec.ts`) but no `test` script in `server/package.json`. If you add server-side tests, wire a `test` script and update this section.
+
+### End-to-end — Playwright
+
+- **Framework:** Playwright 1.59
+- **Location:** `e2e/tests/` organized by feature area (`voice/`, `chat/`, `screen-share/`, `settings/`, `auth/`)
+- **Run:** `npm run test:e2e` (headless), `npm run test:e2e:ui`, `npm run test:e2e:debug`
+- **Report:** `npm run test:e2e:report` (serves `test-results/html-report`)
+- **Fixtures & page objects** live in `e2e/` alongside `tests/`
+
+E2E tests exercise the real Electron app against the real signaling server. The `.agents/skills/playwright-e2e/SKILL.md` describes the convention this repo uses for E2E test design — read it before adding new tests.
+
+### TDD discipline
+
+Write the failing test first. Run it, watch it fail, then write the smallest code that makes it pass. This rule is non-negotiable (see `/AGENTS.md` § CRITICAL).
+
+Integration / cross-package work that needs a real database can rely on Electron's TypeORM + sql.js setup (in-memory by default) — no Testcontainers required.
+
+---
+
+## TypeScript standards
+
+- Strict mode is enabled across all packages
+- Avoid `any` unless absolutely necessary; document why if used
+- Prettier (`.prettierrc.json`: `printWidth: 150`, single quotes, no trailing commas) handles formatting of Angular HTML templates only — ESLint stylistic rules handle TypeScript/JavaScript formatting
+- Angular CLI / `tsc -p tsconfig.electron.json` / `cd server && tsc` perform the actual type checks; there is no single repo-wide `typecheck` script
+- The repository uses npm workspaces (`npm@10.9.2`); cross-package imports go through workspace package names, not relative `../../` paths
+
+---
+
+## Naming conventions
+
+Files and folders are predominantly **kebab-case**, with a few well-established suffixes:
+
+- Angular components: `chat-messages.component.ts`, `user-list.component.html`, `*.component.scss`
+- Angular services: `link-metadata.service.ts`
+- Angular directives: `chat-image-proxy-fallback.directive.ts`
+- Domain rules (pure functions): `message.rules.ts`, `link-embed.rules.ts`
+- Domain models: `chat-messages.model.ts`
+- NgRx slices: `chat.actions.ts`, `chat.reducer.ts`, `chat.effects.ts`, `chat.selectors.ts`
+- CQRS handlers (server and electron): `registerUser.ts`, `deleteServer.ts`, `upsertServer.ts` — **camelCase** for handler files (mirrors the command/query name)
+- Test files: `<name>.spec.ts` (Vitest), `<feature>.spec.ts` (Playwright)
+- Migrations (TypeORM): `<timestamp>-<name>.ts` in `electron/migrations/` and `server/migrations/`
+
+Types, interfaces, classes, and Angular component classes: `PascalCase`. Functions, variables, NgRx action props: `camelCase`. Constants: `SCREAMING_SNAKE_CASE`.
+
+When in doubt, mimic the closest existing file in the same folder.
+
+---
+
+## Error handling
+
+- Use typed errors. Never `throw 'string literal'`
+- Never swallow errors silently — at minimum, log with enough context to find the call site
+- Centralize cross-cutting error handling: Express error middleware on the server, NgRx effect `catchError` in the product client, and IPC error envelopes in Electron handlers
+- Surfacing errors to the user is a UX concern — degrade gracefully (toast, retry button, offline banner) rather than crashing the renderer
+
+---
+
+## Database guidelines
+
+Persistence uses **TypeORM 0.3** with **sql.js / SQLite** in both the Electron desktop shell and the signaling server.
+
+- **Electron data source:** `electron/data-source.ts` — entities in `electron/entities/`, migrations in `electron/migrations/`
+- **Server data source:** wired up under `server/src/db/` — entities in `server/src/entities/`, migrations in `server/src/migrations/`
+- Always write a migration for schema changes. Generate with `npm run migration:generate` (Electron) or the equivalent inside `server/`
+- Run pending migrations: `npm run migration:run` (Electron)
+- Never edit a migration after it has shipped — write a new one
+- Entity classes use TypeORM decorators; keep persistence concerns out of domain `*.rules.ts` files
+- Schema changes are usually **hard to reverse** and **surprising without context** — see `agents-docs/AGENTS_ADRS.md` for when to also write an ADR
+
+---
+
+## Realtime, IPC, and plugins
+
+These are the three cross-context contracts that change most often. Treat each as a public contract that requires `agents-docs/features/` updates when it changes:
+
+- **WebSocket messages** between client and server — schemas live under `server/src/websocket/` and `toju-app/src/app/infrastructure/realtime/`
+- **IPC channels** between Electron preload and renderer — surface defined in `electron/preload.ts` and the `api/` directory
+- **Plugin manifests** consumed by `electron/plugin-library.ts` — the runtime contract that third-party plugins depend on
+
+Behavioral changes to any of these qualify as a feature-doc update under the rule in `/AGENTS.md`.
+
+---
+
+## CI/CD
+
+- CI runs on **Gitea Workflows** (a GitHub Actions–compatible runner) — workflow files in `.gitea/workflows/`:
+  - `release-draft.yml` — queues release builds on push to `main` / `master`
+  - `publish-draft-release.yml` — publishes draft releases
+  - `deploy-web-apps.yml` — deploys the marketing site and Docusaurus docs
+- All checks must pass before merging a PR
+- Workflow status is visible in the Gitea PR view; use the web UI or `tea` CLI to inspect runs
+
+There is **no pre-commit hook** configured (no Husky, no pre-commit, no lefthook). Lint/build are enforced by CI, not by local hooks.
+
+---
+
+## Commit message conventions
+
+Use **Conventional Commits** with no scope. The recent history is consistent on this:
+
+```
+feat: Update how messages load and sync, allow plugins to import messages
+fix: Mobile style fixes and other small ui fixes
+perf: server navigation
+refactor: Remove hardcoded values
+test: Ensure tests work after latest changes
+```
+
+Allowed prefixes (observed across the last 100 commits): `feat`, `fix`, `chore`, `docs`, `perf`, `refactor`, `test`. Subject is sentence case with no trailing period.
+
+If your change resolves a Gitea issue, add `Fixes #<n>` (or `Relates to #<n>`) in the PR body — Gitea supports the same auto-close keywords as GitHub.
+
+---
+
+## Issue linking
+
+- Issues live in the Gitea instance at `git.azaaxin.com/myxelium/Toju`
+- Reference them in PR bodies with `Fixes #<n>` (auto-closes on merge) or `Relates to #<n>` (cross-reference only)
+- Commits themselves do not need issue numbers — keep subjects clean and Conventional
+
+---
+
+## Commands reference
+
+Run these from the repository root unless otherwise noted.
+
+```bash
+# --- setup ---
+npm install                          # install root + workspaces
+cd server && npm install             # server has its own lockfile
+cd website && npm install            # only if working on the marketing site
+cd docs-site && npm install          # only if working on app/plugin docs
+
+# --- common dev flows ---
+npm run dev                          # full stack: server + Angular client + Electron (via dev.sh)
+npm run start                        # Angular product client only (ng serve on :4200)
+npm run electron:dev                 # Angular client + Electron, no signaling server
+npm run server:dev                   # signaling server only (ts-node-dev)
+
+# --- testing ---
+npm run test                         # toju-app Vitest suite
+npm run test:e2e                     # Playwright (headless)
+npm run test:e2e:ui                  # Playwright UI mode
+npm run test:e2e:debug               # Playwright debug
+npm run test:e2e:report              # serve last Playwright HTML report
+
+# --- type / build (also serves as typecheck) ---
+npm run build                        # Angular product client → dist/client
+npm run build:electron               # tsc -p tsconfig.electron.json → dist/electron
+npm run build:docs                   # Docusaurus → docs-site/build
+cd server && npm run build           # server tsc
+npm run build:all                    # all of the above
+
+# --- lint / format ---
+npm run lint                         # eslint .
+npm run lint:fix                     # format + sort:props + eslint --fix
+npm run format                       # prettier on Angular HTML templates only
+npm run format:check                 # prettier --check on HTML templates
+
+# --- database migrations (Electron) ---
+npm run migration:generate           # autogenerate from entity diff
+npm run migration:create             # empty migration scaffold
+npm run migration:run                # apply pending
+npm run migration:revert             # roll back last
+```
+
+---
+
+## Completion checklist
+
+Before marking work complete:
+
+- [ ] Tests written before implementation
+- [ ] All tests passing (`npm run test`, plus `npm run test:e2e` if behavior is user-visible)
+- [ ] `npm run lint` passes
+- [ ] Affected package builds: `npm run build` / `npm run build:electron` / `cd server && npm run build`
+- [ ] Naming conventions followed
+- [ ] Errors handled
+- [ ] Security considered (no secrets in code, no plaintext token logging, no IPC handler accepting arbitrary file paths)
+- [ ] Feature docs updated if contract/schema/invariant changed (see `agents-docs/AGENTS_FEATURES.md`)
+- [ ] `CONTEXT.md` updated if a domain term was resolved or introduced (see `agents-docs/AGENTS_CONTEXT.md`)
+- [ ] ADR written if a hard-to-reverse decision was made (see `agents-docs/AGENTS_ADRS.md`)
+- [ ] Lesson recorded in `agents-docs/LESSONS.md` if this session produced a correction, revert, or hidden constraint (see triggers in `agents-docs/AGENT_WORKFLOW.md`)
+- [ ] PR opened with summary and linked issues
+- [ ] Gitea Workflows checks passing

agents-docs/FEATURES.md

@@ -0,0 +1,35 @@
+# Feature Areas
+
+This index represents the known feature areas in the system.
+
+It must stay accurate as new features are introduced, renamed, merged, or removed.
+
+---
+
+## Feature list (alphabetical)
+
+- [access-control](./features/access-control.md) — Roles, role assignments, channel permission overrides, memberships, invites, bans, and slowmode.
+- [attachments](./features/attachments.md) — P2P chunked file-transfer protocol over the WebRTC chat data channel, storage decisions, auto-download rules.
+- [authentication](./features/authentication.md) — User account REST surface, WebSocket `identify` handshake, heartbeat sweep, and Electron Local API tokens.
+- [ipc-bridge](./features/ipc-bridge.md) — Electron preload `window.electronAPI` surface, IPC channels, and CQRS dispatch.
+- [messaging](./features/messaging.md) — Server-channel chat, direct messages, inventory-sync protocol, delivery state machine.
+- [plugin-system](./features/plugin-system.md) — Plugin manifest contract, renderer runtime, capability grants, and server `plugin-support` API.
+- [presence](./features/presence.md) — Connection lifecycle, availability status, profile metadata propagation, voice membership, and game activity.
+- [server-directory](./features/server-directory.md) — REST surface for server catalog, invites, join requests, and moderation.
+- [voice-signaling](./features/voice-signaling.md) — WebRTC mesh signaling, RNNoise pipeline, and voice / direct-call / screen-share orchestration.
+- [websocket-envelopes](./features/websocket-envelopes.md) — Wire-format contract for every realtime envelope between server and clients.
+
+The product client already documents its bounded contexts at `toju-app/src/app/domains/<name>/README.md` (Access Control, Attachment, Authentication, Chat, Direct Call, Direct Message, Experimental Media, Game Activity, Notifications, Plugins, Profile Avatar, Screen Share, Server Directory, Theme, Voice Connection, Voice Session). Those domain READMEs cover internal product-client behavior.
+
+`agents-docs/features/<slug>.md` is for **cross-context** contracts and feature areas that span more than one subdomain — WebSocket envelopes, IPC channels, plugin manifests, end-to-end flows that touch client + server + Electron together. Add an entry here the first time you write one.
+
+---
+
+## Rules for agents
+
+- Introducing a new feature area requires:
+  - creating `agents-docs/features/<feature>.md` (use `agents-docs/features/feature-template.md`)
+  - adding it to this list (alphabetical)
+- Renaming or merging features requires updating links and notes
+- If the change is fully contained inside one product-client domain, prefer updating `toju-app/src/app/domains/<name>/README.md` over adding a top-level feature doc
+- This file should remain concise and navigable

agents-docs/LESSONS.md

@@ -0,0 +1,38 @@
+# Agent Lessons
+
+Durable rules for AI agents working on this project. Read this file at session start. Append to it when this session produces a correction worth remembering.
+
+## How to use this file
+
+**At session start:** scan the rules below. If any match the work you're about to do, apply them.
+
+**During the session:** if the user corrects you, reverts your edit, or re-prompts with the same instruction — that is a signal to record a lesson before closing the task. See the trigger list in `agents-docs/AGENT_WORKFLOW.md`.
+
+**Format of a lesson:** every entry uses the four-slot template below. Brevity matters — if you can't state the rule in one sentence, the lesson isn't sharp enough yet.
+
+```markdown
+### <short imperative title>
+
+- **Trigger:** what you were about to do that turned out wrong (one line, concrete enough to pattern-match against)
+- **Rule:** what to do instead (one sentence, imperative voice)
+- **Why:** the consequence of getting it wrong — past incident, hidden constraint, user preference
+- **Example:** one concrete instance, ideally a code or command snippet
+```
+
+**Keep lessons sharp.** Tag each rule with one or two tags in square brackets after the title (e.g. `[testing] [migrations]`) so future agents can grep for relevance. If a rule no longer applies, delete it — stale rules drown the real ones.
+
+---
+
+## Lessons
+
+### Verify lint exits 0 before claiming done [verification]
+
+- **Trigger:** about to report a task as complete after running tests but skipping ESLint.
+- **Rule:** run `npm run lint` from the repo root and confirm exit code 0 before any "done" claim.
+- **Why:** `npm run test` only runs the toju-app Vitest suite — it doesn't cover the server, Electron, or website packages. ESLint (flat config in `eslint.config.js`) is the universal check across every package; type-style violations slip through tests and break Gitea Workflows for the next agent.
+- **Example:** `npm run lint && echo OK` — only claim done after seeing `OK`. For Electron type errors specifically, also confirm `npm run build:electron` succeeds (it invokes `tsc -p tsconfig.electron.json`).
+
+<!--
+Add new lessons above this comment, newest at the top.
+Delete this example once the project has accumulated 2-3 real lessons.
+-->

agents-docs/adr/0001-record-architectural-decisions.md

@@ -0,0 +1,13 @@
+# ADR-0001: Record Architectural Decisions
+
+## Status
+Accepted
+
+## Context
+We need a lightweight way to record architectural decisions so that future agents and engineers can understand *why* the system looks the way it does, not just *what* it does. Without ADRs, decisions live in PR descriptions, chat logs, or nowhere — and get re-litigated on every refactor.
+
+## Decision
+We use Architecture Decision Records (ADRs) in the Nygard short form. Each ADR lives at `agents-docs/adr/NNNN-slug.md` with a 4-digit zero-padded number, monotonically increasing. The minimum content is a title plus 1–3 sentences each for Context, Decision, and Rationale. Add `Status`, `Considered Options`, or `Consequences` only when they genuinely help.
+
+## Rationale
+Nygard short form is the lowest-friction format that still captures the *why*. Heavier templates (MADR, full IEEE 1471) routinely don't get written — the bar to start one is too high. ADRs are append-only: a superseded decision gets a new ADR with a `Supersedes ADR-NNNN` note while the old one stays in place. The 3-criteria gate (hard to reverse, surprising without context, genuine trade-offs) keeps the directory from filling with trivia. See `agents-docs/AGENTS_ADRS.md` for the full contract.

agents-docs/features/access-control.md

@@ -0,0 +1,232 @@
+# Access Control
+
+> **Area:** access-control
+> **Status:** Active
+> **Last updated:** 2026-05-25
+
+## Overview
+
+Access control is the **permission engine** under every Toju server: roles and their assignments, per-channel permission overrides, server membership, invites, bans, and slowmode. It runs in two places at once. The signaling server enforces it as the source of truth on REST mutations and on the `join_server` WebSocket gate. The Angular product client maintains a parallel resolution path so the UI can disable controls the user is not allowed to use, but those client-side guards are advisory — the server is authoritative.
+
+Most concepts here were introduced over two migrations: `1000000000001-ServerAccessControl.ts` added memberships, bans, and invites; `1000000000005-ServerRoleAccessControl.ts` introduced first-class roles, role assignments, and per-channel overrides. The client carries a back-compat path that re-derives the legacy `RoomPermissions` booleans from the new role state for older UI code paths.
+
+## Responsibilities
+
+- Define and persist roles, role assignments, and per-channel permission overrides.
+- Decide whether an identity is allowed to enter a server (`authorizeWebSocketJoin`) and, if not yet a member, what step is required (open join, password, invite).
+- Maintain memberships, bans, and invites with their lifecycles (invite expiry, ban expiry).
+- Resolve the effective permission state for a (user, channel) pair via role-position precedence and channel overrides.
+- Hydrate the room model on join so the client can apply the same resolution locally.
+- Guard moderation actions against privilege escalation via role-position checks.
+
+This area does **not** own:
+
+- Server catalog, discoverability, search, or moderation reports → [server-directory](./server-directory.md).
+- Authentication or identity binding → [authentication](./authentication.md).
+- The wire format of `join_server`, `access_denied`, role/ban update envelopes → [websocket-envelopes](./websocket-envelopes.md).
+- Online status, voice presence, game activity → [presence](./presence.md).
+
+## Key concepts
+
+- **Role** — named row in `server_role` with a `position` (higher number = higher precedence) and a `PermissionStatePayload` of per-key overrides (`allow | deny | inherit`).
+- **System role** — bootstrap roles seeded by `1000000000005-ServerRoleAccessControl.ts`: `system-everyone`, `system-moderator`, `system-admin`. `system-everyone` applies to all members; the others are assignable.
+- **RoleAssignment** — (server, user, role) row in `server_user_role`.
+- **ChannelPermissionOverride** — (server, channel, role) row in `server_channel_permission` carrying allow / deny / inherit per permission key on top of the role's base state.
+- **Membership** — (server, user) row in `server_membership` with `createdAt` and optional metadata.
+- **Invite** — single-use or multi-use server invite in `server_invite`; default expiry **10 days** from creation.
+- **Ban** — (server, user) entry in `server_ban` with optional `expiresAt` and `reason`. Persists across reconnects.
+- **Slowmode** — per-channel send interval (`slowModeInterval` on the channel) — currently a client-rendered hint, not enforced server-side (see TODOs).
+
+---
+
+## Permission keys
+
+Defined as a `PermissionStatePayload` in `server/src/cqrs/types.ts`. ~11 keys gate distinct capabilities:
+
+- `manageServer` — edit server metadata (name, icon, settings).
+- `manageChannels` — create / edit / delete channels.
+- `manageRoles` — create / edit / delete roles (subject to role-position guard, see below).
+- `moderateMember` — kick / ban / mute / change-nick on lower-positioned members.
+- `inviteMember` — create invites.
+- `viewChannel` — see a channel exists.
+- `readMessages` — read message history in a channel.
+- `writeMessages` — send messages.
+- `manageMessages` — delete / pin others' messages.
+- `connectVoice` — join a voice room.
+- `speakVoice` — un-mute in a voice room.
+
+Each key may be `allow`, `deny`, or `inherit` on a given role. The default state on `system-everyone` is permissive for "read / view / write" and restrictive for "manage / moderate"; see the migration for the seed values.
+
+### Resolution algorithm
+
+For a (user, channel) lookup:
+
+1. Collect the user's role assignments for the server, plus the implicit `system-everyone`.
+2. Order roles by `position` ascending — **lowest position resolved first**, highest position resolved last (last-writer-wins).
+3. For each role, apply its base `PermissionStatePayload` to a running accumulator: `allow` and `deny` overwrite; `inherit` leaves the prior value intact.
+4. Apply the channel's per-role overrides (`server_channel_permission`) on top, in the same position order.
+5. The accumulator's final value per key is the effective permission.
+
+Because there is no inherent `deny > allow` priority, a higher-positioned role's `allow` will *override* a lower-positioned role's `deny` on the same key. This is the intentional Discord-style "promote to override" model. Document any deviation from this when introducing a new key.
+
+---
+
+## Membership state machine
+
+Entry into a server runs through `joinServerWithAccess` in `server/src/services/server-access.service.ts`:
+
+1. Look up the server. If missing → reject.
+2. Look up the user's membership. If active → fast-path success.
+3. Look up an active ban for `(server, user)`. If present and not expired → reject with `banned`.
+4. If the server is **public** (`isPublic = true`, no password, no invite required) → create membership, return success.
+5. If the server is **password-protected** (`hasPassword = true`) → require the supplied password to hash-match. If mismatch → reject with `password_required` / `bad_password`.
+6. If the server is **invite-only** → require a valid (`server_invite.code`) and non-expired invite. Consume the invite if single-use.
+7. On success → insert a `server_membership` row, return ok.
+
+`authorizeWebSocketJoin` is the lighter gate used on the `join_server` WebSocket envelope: it short-circuits to "allowed" if a membership already exists, otherwise reports the access mode needed. Unlike `joinServerWithAccess`, it does **not** consume invites or process passwords — those flow through dedicated REST routes on the server before the client retries the WebSocket join.
+
+`handleJoinServer` (`server/src/websocket/handler.ts:155`) is the call site: on rejection the server sends `access_denied` with a reason (`banned`, `password_required`, `invite_required`, ...); on success it broadcasts presence (`user_joined`) per the rules documented in [presence](./presence.md).
+
+---
+
+## Moderation actions
+
+Moderation is gated by two helpers in `server/src/services/server-permissions.service.ts`:
+
+- `canManageServerUpdate(actorRoles, requested)` — maps the requested change (rename, icon change, permission edit, role create, invite, etc.) to the permission key it needs, then resolves the actor's effective state.
+- `canModerateServerMember(actorHighestRole, targetHighestRole)` — privilege-escalation guard: the actor's highest-position role must be **strictly greater** than the target's highest-position role. Two moderators at the same position cannot ban each other.
+
+Bans are written via `banServerUser`. The ban entity supports an optional `expiresAt` for time-limited bans and a `reason` string for moderator-facing UI.
+
+Kick is implemented as "delete membership"; the connection is dropped via a subsequent WebSocket close on the next envelope.
+
+---
+
+## Client-side hydration
+
+When the client joins a server, the server sends the room model with normalized access-control fields:
+
+```
+roles:                ServerRolePayload[]
+roleAssignments:      RoleAssignmentPayload[]
+channelPermissions:   ChannelPermissionPayload[]
+permissions:          legacy RoomPermissions bools  (back-compat)
+slowModeInterval:     number | undefined            (per-channel)
+```
+
+`normalizeRoomAccessControl` in `toju-app/src/app/shared-kernel/room.models.ts` is the single normalization helper. It:
+
+- Backfills the legacy `permissions` booleans from the role state so older NgRx selectors keep working.
+- Sorts roles by `position` ascending.
+- De-duplicates assignments by `(userId, roleId)`.
+
+Client-side resolution mirrors the server algorithm and lives under `toju-app/src/app/domains/access-control/domain/rules/`. Selectors expose `canSendMessage(channelId)`, `canManageRole(roleId)`, etc., which UI components consume to disable controls.
+
+`canManageRole` enforces the same privilege-escalation guard as the server: a user cannot edit a role at or above their own highest position.
+
+---
+
+## Invites
+
+`server_invite` rows have:
+
+- `code` — opaque token used in invite URLs.
+- `serverId`, `createdById`.
+- `expiresAt` — default 10 days from creation.
+- `maxUses` / `uses` — single-use or multi-use semantics.
+
+The REST surface for invite creation, lookup, and consumption is part of [server-directory](./server-directory.md). Invite consumption is **transactional**: a single-use invite is decremented before the membership row is created so a race cannot create two memberships off one invite.
+
+---
+
+## Bans
+
+`server_ban` rows carry `userId`, `serverId`, optional `expiresAt`, optional `reason`, and `createdById`. Active bans are matched on `(serverId, userId)` with the expiry filter applied at read time. A ban broadcast envelope notifies connected peers so the client can drop the banned user from the local room model — TODO: confirm whether such an envelope exists today or whether clients only learn of bans on the next `server_users` snapshot.
+
+---
+
+## Slowmode
+
+`slowModeInterval` is a per-channel hint expressed in seconds. The client renders the cooldown UI and is expected to gate the send button locally. The server does **not** enforce slowmode today — a non-cooperating client can ignore the interval. This is a known gap; see TODOs.
+
+---
+
+## Business rules and invariants
+
+- **Server is authoritative.** Client-side `canX` selectors are advisory and exist to prevent UI confusion, not to gate security.
+- **Last-writer-wins by position** — there is no inherent allow/deny priority; a higher-positioned role can override a lower-positioned role's deny.
+- **Privilege escalation is blocked** by requiring strict position-greater on the moderator. Same-position moderation is rejected on both sides.
+- **Invite consumption is atomic** for single-use invites.
+- **Bans persist independently of memberships** — a banned user without a membership row is still banned.
+- **`system-everyone` always applies** at position 0 (or whatever the migration seeds); it cannot be removed.
+- **Channel overrides resolve last** after role base state.
+
+---
+
+## Technical implementation
+
+### Server
+- Services — `server/src/services/server-access.service.ts` (`authorizeWebSocketJoin`, `joinServerWithAccess`, `ensureServerMembership`, `banServerUser`, `leaveServerUser`); `server/src/services/server-permissions.service.ts` (`getServerRoles`, `getServerAssignments`, `resolveRolePermissionState`, `resolveHighestRole`, `canManageServerUpdate`, `canModerateServerMember`).
+- Entities — `server/src/entities/ServerMembershipEntity.ts`, `ServerBanEntity.ts`, `ServerInviteEntity.ts`, `ServerRoleEntity.ts`, `ServerUserRoleEntity.ts`, `ServerChannelPermissionEntity.ts`.
+- Migrations — `1000000000001-ServerAccessControl.ts`, `1000000000005-ServerRoleAccessControl.ts`.
+- CQRS — payload types in `server/src/cqrs/types.ts` (`AccessRolePayload`, `PermissionStatePayload`, `RoleAssignmentPayload`, `ChannelPermissionPayload`); normalization in `server/src/cqrs/relations.ts` (`normalizeServerRoles`, `normalizeServerRoleAssignments`).
+- REST — server / role / invite / ban routes are mounted under `server/src/routes/servers.ts` (catalog endpoints are documented in [server-directory](./server-directory.md)).
+- WS — `server/src/websocket/handler.ts::handleJoinServer` (line 155), `access_denied` emission.
+
+### Product client
+- Domain — `toju-app/src/app/domains/access-control/`.
+- Shared kernel — `toju-app/src/app/shared-kernel/access-control.models.ts`, `moderation.models.ts`, `room.models.ts` (`normalizeRoomAccessControl`).
+- NgRx — access-control reducers / selectors under `toju-app/src/app/store/access-control/`.
+
+---
+
+## Testing
+
+- TODO: no spec was located for `server-access.service.ts` or `server-permissions.service.ts`.
+- TODO: no spec was located for the `authorizeWebSocketJoin` rejection paths.
+- Client-side rule specs likely exist under `toju-app/src/app/domains/access-control/domain/rules/*.spec.ts` — confirm and list when filling in.
+- TODO: E2E coverage for invite consumption, ban enforcement, and role-position escalation.
+
+---
+
+## Security considerations
+
+- **Slowmode is not server-enforced.** A modified client can spam. Treat slowmode as an anti-accident measure, not abuse mitigation.
+- **No server-side channel-permission enforcement on message send** — only role-state is checked at the join gate. TODO: verify whether per-channel overrides are applied on the message-send path.
+- **No audit log** of moderation actions. TODO.
+- **Password-protected servers** rely on the same SHA-256 hashing used for AuthUser passwords — see Security in [authentication](./authentication.md); the same caveats apply.
+- **Position-based escalation guard** works only if positions are well-ordered. Position assignment is on `manageRoles`-bearing users; misconfiguration can produce moderators who can demote each other arbitrarily.
+- **Bans are not always broadcast in real time** — clients may discover an ongoing ban only on the next `server_users` snapshot. TODO: confirm the live ban envelope.
+
+---
+
+## Performance considerations
+
+- Role and assignment lookups are point queries on `server_role` / `server_user_role` indexed by `serverId`.
+- Per-channel override resolution is O(roles × channels) at hydration time; happens once on `join_server` and is cached client-side.
+- `authorizeWebSocketJoin` is O(1) for existing members (single membership lookup), O(1)–O(invites) for invite consumption.
+
+---
+
+## Known issues and limitations
+
+- **No server-side slowmode enforcement.**
+- **No dedicated ban-broadcast envelope** (or unconfirmed).
+- **No audit log** for moderation actions.
+- **Channel-permission overrides may not be applied on the message-send path** server-side — TODO.
+- **Unsalted SHA-256** for password-protected server passwords — same gap as user passwords.
+
+---
+
+## Related features
+
+- **[server-directory](./server-directory.md)** — owns server catalog, discoverability, and the REST surface for invites/bans/roles.
+- **[authentication](./authentication.md)** — provides the `oderId` identity that access-control authorizes.
+- **[presence](./presence.md)** — `user_joined` / `user_left` are emitted only after `authorizeWebSocketJoin` succeeds.
+- **[websocket-envelopes](./websocket-envelopes.md)** — owns the wire shape of `join_server`, `access_denied`, role/ban update envelopes.
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-05-25 | Initial documentation |

agents-docs/features/attachments.md

@@ -0,0 +1,196 @@
+# Attachments
+
+> **Area:** attachments
+> **Status:** Active
+> **Last updated:** 2026-05-25
+
+## Overview
+
+Attachments are pure peer-to-peer in Toju. The signaling server never sees a file byte. A sender announces an attachment on the WebRTC chat data channel; a receiver requests it; the sender streams base64-encoded 64 KiB chunks back; the receiver reassembles and (on Electron) writes the result to disk under a per-conversation folder. If the original sender goes offline mid-transfer, the receiver can re-request from another peer that previously announced the same attachment. There is no inventory protocol, no integrity signature, and no server-side fallback — attachments live entirely on the participants' machines.
+
+This area is the closest sibling of [voice-signaling](./voice-signaling.md): both are P2P protocols that ride the same RTCPeerConnection. The chat events that drive attachments are members of the `ChatEvent` union; they share the data channel with chat messages but are conceptually distinct.
+
+## Responsibilities
+
+- Define the file-transfer envelope set (announce / request / chunk / cancel / not-found) and its sequencing rules.
+- Maintain per-transfer state on both sides — chunk index, in-flight chunk, retry/failover bookkeeping.
+- Decide whether to auto-download (size + media-type heuristic).
+- Decide where to persist (Electron disk vs browser memory).
+- Estimate transfer speed via EWMA so the UI can render a progress bar that doesn't jitter.
+- Pick a failover peer when the current sender disappears.
+
+This area does **not** own:
+
+- The chat message that references the attachment → [messaging](./messaging.md).
+- The peer connection or data channel itself → [voice-signaling](./voice-signaling.md).
+- The IPC channels used to read / write the file on Electron → [ipc-bridge](./ipc-bridge.md).
+- Permission to upload — there is no formal upload gate today; access-control's `writeMessages` is the proxy. See [access-control](./access-control.md).
+
+## Key concepts
+
+- **Attachment** — a file announced and referenced by a chat message. Persisted independently of the message body.
+- **Transfer** — the per-receiver state for a single in-flight attachment.
+- **Bucket** — storage subfolder: `image | video | audio | files`. Determined by MIME type.
+- **Tried-peer set** — the set of peers a receiver has already attempted for a given `${messageId}:${fileId}`; used to drive failover without re-trying the same peer in a loop.
+- **`uploaderPeerId`** — the original announcer; the receiver prefers it over the tried-peer set when (re-)issuing a `file-request`.
+
+---
+
+## Protocol
+
+The five events live in the `ChatEvent` union (`toju-app/src/app/shared-kernel/chat-events.ts`) and ride the WebRTC `chat` data channel. They do **not** flow through the WebSocket signaling server.
+
+- `file-announce` — sender announces an attachment alongside a chat message. Carries `messageId`, `fileId`, `name`, `size`, `mimeType`, optional preview metadata.
+- `file-request` — receiver requests the attachment from a specific peer.
+- `file-chunk` — sender streams `index`, base64-encoded chunk payload, and `total` chunk count.
+- `file-cancel` — either side aborts the in-flight transfer.
+- `file-not-found` — sender responds when asked for an unknown `fileId`.
+
+### Constants
+
+Defined in the attachment domain (`toju-app/src/app/domains/attachment/`):
+
+- `P2P_BASE64_CHUNK_SIZE_BYTES = 64 * 1024` — re-exported as `FILE_CHUNK_SIZE_BYTES`. Shared with the avatar P2P sync path.
+- `MAX_AUTO_SAVE_SIZE_BYTES = 10 * 1024 * 1024` — files at or under 10 MiB are auto-downloaded on receipt.
+- `MAX_BROWSER_INLINE_MEDIA_SIZE_BYTES = 50 * 1024 * 1024` — browser-mode cap on inlined media.
+- **EWMA weights** — previous-weight `0.7`, current-weight `0.3` for transfer-rate smoothing.
+- **Data-channel water marks** — `highWaterMark = 4 MiB`, `lowWaterMark = 1 MiB` for backpressure pacing.
+
+### Flow
+
+1. Sender computes attachment metadata and emits `file-announce` referencing the chat message.
+2. Receiver opens a transfer state. Auto-download triggers if `size ≤ MAX_AUTO_SAVE_SIZE_BYTES` and the MIME type is in the allow-list for the bucket. Larger files require an explicit user click.
+3. Receiver sends `file-request` to `uploaderPeerId`.
+4. Sender streams `file-chunk` events sequentially. **Exactly one chunk is in flight per receiver at a time** — the sender awaits the per-chunk write/ack before queueing the next one. On Electron the receiver writes each chunk to disk; the protocol requires `index === receivedCount` for the next chunk or the transfer aborts.
+5. Receiver reassembles. On Electron, the file lands at:
+   - `{appData}/server/{room}/{bucket}/{id}{.ext}` for server-channel attachments.
+   - `{appData}/direct-messages/{conv}/{bucket}/{id}{.ext}` for DM attachments.
+   - Browser mode keeps the file as a Blob in memory — lost on reload.
+6. Either side may `file-cancel`; the sender returns `file-not-found` if the requested `fileId` is unknown.
+
+### Failover
+
+- Receiver-driven. No inventory protocol.
+- Sequential — tries one peer at a time.
+- The tried-peer set is keyed by `${messageId}:${fileId}`.
+- `uploaderPeerId` is always preferred when reachable; the tried-peer set ensures it isn't re-attempted in a busy loop after a failure.
+- If every available peer is in the tried set, the transfer ends in a not-found state and surfaces a UI prompt.
+
+---
+
+## Storage
+
+### Electron
+
+- `AttachmentEntity` — TypeORM row in the per-user local database. Carries `id`, `messageId`, `roomId` / `conversationId`, `name`, `size`, `mimeType`, `bucket`, `relativePath`, `createdAt`.
+- CQRS commands — `save-attachment`, `delete-attachments-for-message`.
+- CQRS queries — `get-all-attachments`, `get-attachments-for-message`.
+- Filesystem IPC — `read-file-chunk`, `get-file-size`, `write-file`, `append-file`, `get-file-url`, `file-exists`, `delete-file`, `ensure-dir`, `get-app-data-path`.
+
+The renderer never touches Node.js filesystem APIs directly; every read/write is brokered through [ipc-bridge](./ipc-bridge.md).
+
+### Browser
+
+When the desktop shell is not present, attachments stay in-memory as Blob URLs. Reloading the renderer loses them; this is documented behavior, not a bug.
+
+---
+
+## Auto-download heuristic
+
+- Any file with `size ≤ 10 MiB` and a media MIME type (`image/*`, `video/*`, `audio/*`) is auto-downloaded on receipt so the chat UI can render it inline.
+- Files above the cap or in the `files` bucket require an explicit click. The chat UI shows a "Download" affordance with the file size.
+
+---
+
+## Speed estimation (EWMA)
+
+Transfer rate is exposed to the UI via an exponentially-weighted moving average:
+
+```
+rate_t = 0.7 · rate_{t-1} + 0.3 · instantaneous_t
+```
+
+Smooth enough for a stable progress display; responsive enough to surface a stalled transfer within a few seconds.
+
+---
+
+## Business rules and invariants
+
+- Attachments are **pure P2P** — the signaling server never sees an attachment byte.
+- **One chunk in flight per sender → receiver** (`await` per chunk). No parallelism within a single transfer.
+- **Sequential chunk indices on Electron disk receive** — `index === receivedCount` is enforced; mismatches abort.
+- **`PeerDeliveryService` is not on the attachment path.** Attachments use `RealtimeSessionFacade.broadcastMessage` / `sendToPeer` / `sendToPeerBuffered` directly.
+- **Browser mode loses everything on reload** — no IndexedDB persistence today for attachments.
+- **No integrity / signature check** on chunks; no encryption at rest beyond OS file permissions.
+- **Failover is receiver-driven** and tried-peer-set deduplicated.
+
+---
+
+## Technical implementation
+
+### Product client
+- Domain — `toju-app/src/app/domains/attachment/`: manager, transfer state, persistence selection.
+- Contracts — `toju-app/src/app/shared-kernel/attachment-contracts.ts`, `chat-events.ts` (the five envelope types).
+- Realtime send paths — `RealtimeSessionFacade.broadcastMessage` / `sendToPeer` / `sendToPeerBuffered` in the realtime infrastructure tree.
+
+### Electron
+- Entity — `AttachmentEntity` in `electron/entities/`.
+- CQRS handlers — under `electron/src/cqrs/` (or equivalent) for `save-attachment`, `delete-attachments-for-message`, `get-all-attachments`, `get-attachments-for-message`.
+- Filesystem IPC handlers — `electron/ipc/`: `read-file-chunk`, `get-file-size`, `write-file`, `append-file`, `get-file-url`, `file-exists`, `delete-file`, `ensure-dir`, `get-app-data-path`.
+
+### Key types
+- `AttachmentEntity` — local persistence row.
+- `FileChunkEvent`, `FileAnnounceEvent`, `FileRequestEvent`, `FileCancelEvent`, `FileNotFoundEvent` — member shapes of the `ChatEvent` union.
+
+---
+
+## Testing
+
+- TODO: no dedicated `*.spec.ts` files under `toju-app/src/app/domains/attachment/` at time of writing.
+- E2E: `e2e/tests/chat/chat-message-features.spec.ts` includes `test('syncs image and file attachments between users', ...)` which covers happy-path attachment sync.
+- TODO: no E2E coverage for multi-peer failover.
+- TODO: no E2E coverage for `file-cancel`.
+
+---
+
+## Security considerations
+
+- **No integrity signature.** A malicious sender can corrupt a chunk; the receiver assembles whatever arrives.
+- **No encryption at rest** beyond OS-level file permissions on the per-user app-data folder.
+- **No MIME-type sanitation.** The receiver trusts the announced `mimeType` for bucket routing; a misleading MIME does not change the on-disk contents but does affect inline rendering. Browser-side renderers must defend against this.
+- **No size cap server-side.** Caps are receiver-side and advisory: `MAX_AUTO_SAVE_SIZE_BYTES` for auto-download, `MAX_BROWSER_INLINE_MEDIA_SIZE_BYTES` for in-memory media. A sender can announce arbitrarily large files; the receiver simply refuses them.
+- **Receivers expose disk write paths** indirectly: a misbehaving peer cannot escape `{appData}/server/...` or `{appData}/direct-messages/...` because the relative path is computed by the receiver, not transmitted by the sender — but this property must be preserved in any future protocol change.
+
+---
+
+## Performance considerations
+
+- **Base64 overhead.** ~33 % inflation on the wire; a 64 KiB binary chunk is ~86 KiB on the wire.
+- **Single chunk in flight** per (sender, receiver) — caps single-receiver throughput at one round-trip per chunk.
+- **Data-channel water marks** (4 MiB high, 1 MiB low) provide back-pressure pacing without tuning per-NIC.
+- **No FEC, no parallel chunks, no resumption across browser reloads.**
+
+---
+
+## Known issues and limitations
+
+- **No dedicated unit specs** for the attachment domain.
+- **No resume across browser reloads** (Electron writes to disk and survives; browser does not).
+- **No checksum / signed integrity** on chunks.
+- **No encryption at rest** beyond OS file permissions.
+- **No server-side fallback** if every peer is offline — attachments are unreachable until at least one peer with the file returns.
+
+---
+
+## Related features
+
+- **[messaging](./messaging.md)** — chat messages reference attachments; attachments are persisted separately from message bodies.
+- **[voice-signaling](./voice-signaling.md)** — establishes the data channel that attachments ride on.
+- **[ipc-bridge](./ipc-bridge.md)** — exposes the filesystem and CQRS APIs the Electron persistence path uses.
+- **[websocket-envelopes](./websocket-envelopes.md)** — for context only; attachments do not flow through the signaling server.
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-05-25 | Initial documentation |

agents-docs/features/authentication.md

@@ -0,0 +1,194 @@
+# Authentication
+
+> **Area:** authentication
+> **Status:** Active
+> **Last updated:** 2026-05-25
+
+## Overview
+
+User identity in Toju is split into two surfaces. A small **HTTP credential surface** on the signaling server (`/api/users/register`, `/api/users/login`) registers and verifies user accounts persisted in TypeORM. A separate **WebSocket `identify` handshake** binds a *self-asserted* identity (`oderId` + display name + optional description) to a live WebSocket connection so the server can route envelopes. There is no server-issued session token: the client re-asserts identity on every reconnect, and other peers trust the claim as far as the signaling fabric does — i.e. only to the extent that subsequent authorization checks (see [access-control](./access-control.md)) accept it.
+
+The Electron desktop shell adds a third surface — the **Local API token store** in `electron/api/auth-store.ts` — which issues short-lived bearer tokens for the in-process HTTP server that hosts the docs site and OpenAPI bundle. That surface is internal to the desktop process and is documented here only because it shares the "authentication" name.
+
+## Responsibilities
+
+- Register and authenticate user accounts against the signaling server's `users` table.
+- Bind a connection-scoped identity to a WebSocket connection via the `identify` envelope, including profile metadata propagation.
+- Detect dead WebSocket connections via ping/pong sweeps and reap stale `ConnectedUser` rows.
+- Mint and validate short-lived bearer tokens for the Electron Local API server.
+
+This area does **not** own:
+
+- Permissions, roles, bans, or membership state → [access-control](./access-control.md).
+- Online / away / busy status, voice presence, game activity → [presence](./presence.md).
+- The shape of WebSocket envelopes carrying identity claims → [websocket-envelopes](./websocket-envelopes.md).
+- Profile avatar bytes or per-user assets → product-client `profile-avatar` domain.
+
+## Key concepts
+
+- **AuthUser** — server-persisted account: `id` (uuid), `username` (unique), `passwordHash`, `displayName`, `createdAt`. Defined in `server/src/entities/AuthUserEntity.ts`.
+- **oderId** — client-asserted user identifier sent on `identify`. Used as the broadcast routing key. The server **trusts** it; there is no cryptographic binding between an AuthUser row and the `oderId` claimed over WebSocket.
+- **Identify handshake** — first message a client sends on a WebSocket. Carries `oderId`, `displayName`, optional `description`, optional `profileUpdatedAt`, optional `connectionScope`.
+- **Connection scope** — opaque string (typically the signal URL the client connected through). Used together with `oderId` to disambiguate multiple sockets per identity so stale-connection eviction does not loop across signal URLs.
+- **Local API token** — bearer token issued by the Electron desktop process, 24 h TTL, kept in-memory and pruned on access.
+
+---
+
+## HTTP credential surface
+
+Mounted at `/api/users` (see `server/src/routes/index.ts:20`). All payloads are JSON.
+
+### `POST /api/users/register`
+
+**Request:**
+```json
+{
+  "username": "string (required, unique)",
+  "password": "string (required)",
+  "displayName": "string (optional, defaults to username)"
+}
+```
+
+**Response (201):**
+```json
+{ "id": "uuid", "username": "string", "displayName": "string" }
+```
+
+**Errors:**
+- **400** `Missing username/password` — either field absent.
+- **409** `Username taken` — username already exists.
+
+### `POST /api/users/login`
+
+**Request:** `{ "username": "string", "password": "string" }`
+
+**Response (200):** `{ "id": "uuid", "username": "string", "displayName": "string" }`
+
+**Errors:**
+- **401** `Invalid credentials` — no row matches, or stored hash differs.
+
+No session cookie, JWT, or bearer token is issued — the response is purely informational. The client is expected to remember the username and re-present it via the WebSocket `identify` handshake on every reconnect.
+
+---
+
+## WebSocket `identify` handshake
+
+`handleIdentify` (`server/src/websocket/handler.ts:112`) processes the first envelope a client sends. It:
+
+1. Reads `oderId` (falls back to `connectionId` when absent).
+2. Reads `connectionScope` (opaque routing key).
+3. Reads / normalizes `displayName`, `description`, `profileUpdatedAt`.
+4. Mutates the `ConnectedUser` row in `connectedUsers`.
+5. If any of `displayName` / `description` / `profileUpdatedAt` changed, rebroadcasts `user_joined` to every server the user is currently in.
+
+`identify` itself is unauthenticated — the server does not consult `AuthUserEntity` here. Authorization happens later, at `join_server` time, via `authorizeWebSocketJoin` (documented in [access-control](./access-control.md)).
+
+`identify` is the canonical channel for **profile updates**. Renaming yourself or updating your description means resending `identify`; the rebroadcast pushes the new profile to peers without disconnect/reconnect.
+
+---
+
+## Heartbeat and dead-connection sweep
+
+Defined in `server/src/websocket/index.ts:19`–`75`:
+
+- `PING_INTERVAL_MS = 30_000` — server pings every connection every 30 s.
+- `PONG_TIMEOUT_MS = 45_000` — a connection whose `lastPong` is older than 45 s is closed and removed from `connectedUsers`.
+
+`lastPong` is bumped on any inbound frame (not just pong), so an active client cannot be reaped while sending traffic. Eviction triggers `handleLeaveServer` for every server the connection had joined, which in turn emits `user_left` if no other connection of the same `oderId` still holds the server.
+
+---
+
+## Electron Local API token store
+
+`electron/api/auth-store.ts` mints opaque bearer tokens used by the Local API server (`electron/api/router.ts`) to gate calls to `/api/auth/login` and other authenticated routes. Tokens have a 24 h TTL and are kept in-memory only — they do not persist across desktop restarts. Pruning happens lazily on lookup.
+
+This surface is **not** the same identity as the signaling server's AuthUser. It is a desktop-local affordance for the in-process HTTP server that serves docs and plugin APIs; the renderer never sees these tokens.
+
+---
+
+## Business rules and invariants
+
+- Usernames are **unique** at the database level (`@Column('text', { unique: true })` on `AuthUserEntity.username`) AND pre-checked in the route handler. Comparison is **case-sensitive**.
+- Passwords are hashed with **unsalted SHA-256** (`crypto.createHash('sha256')`, `routes/users.ts:8`). There is no salting, no peppering, no iteration count, no Argon2/bcrypt. This is a known weakness — see Security below.
+- The signaling server never issues a session token. Identity is re-asserted on every reconnect via `identify`.
+- The `identify` claim is **not verified** against `AuthUserEntity`. Two clients can claim the same `oderId`; only `(oderId, connectionScope)` is used to deduplicate eviction.
+- `user_joined` is only re-broadcast on `identify` when at least one of `displayName` / `description` / `profileUpdatedAt` actually changed — duplicate identifies are silent.
+- Dead-connection sweep runs continuously. A client that goes silent for ≥ 45 s is treated as disconnected.
+
+---
+
+## Technical implementation
+
+### Server (signaling)
+- HTTP routes: `server/src/routes/users.ts`, mounted at `/api/users` in `server/src/routes/index.ts`.
+- CQRS handlers: `server/src/cqrs/commands/handlers/registerUser.ts`, `server/src/cqrs/queries/handlers/getUserByUsername.ts`, `server/src/cqrs/queries/handlers/getUserById.ts`.
+- Entity: `server/src/entities/AuthUserEntity.ts` (`users` table).
+- Migration: `server/src/migrations/1000000000000-InitialSchema.ts`.
+- WebSocket handshake: `server/src/websocket/handler.ts::handleIdentify` (line 112).
+- `ConnectedUser` shape: `server/src/websocket/types.ts`.
+- Heartbeat sweep: `server/src/websocket/index.ts`.
+
+### Product client
+- Domain: `toju-app/src/app/domains/authentication/`.
+- Service: `authentication.service.ts` (login / register HTTP calls).
+- Components: `login.component.ts`, `register.component.ts`.
+- Model: `authentication.model.ts`.
+
+### Electron
+- Local API token store: `electron/api/auth-store.ts`.
+- Local API router: `electron/api/router.ts` (`/api/auth/login` endpoint).
+
+### Key types
+- `AuthUserEntity` — server account row.
+- `ConnectedUser` — live WebSocket connection state, including `oderId`, `connectionScope`, `lastPong`.
+
+---
+
+## Testing
+
+- E2E: `e2e/tests/auth/user-session-data-isolation.spec.ts` — verifies session-level data isolation between users.
+- TODO: no unit specs were located for `server/src/routes/users.ts`, `handleRegisterUser`, `getUserByUsername`/`getUserById`, `handleIdentify`, the Electron `/api/auth/login` proxy, or the `toju-app` authentication services.
+- TODO: no happy-path login/register E2E exists today.
+
+---
+
+## Security considerations
+
+- **Password hashing is unsalted SHA-256.** Vulnerable to rainbow-table and parallel GPU attacks. Replacing with Argon2id or bcrypt is the obvious upgrade path and is currently a TODO.
+- **No rate limiting on `/login`.** A `users` table with weak hashes is exposed to credential stuffing and online brute-force.
+- **`identify` is unauthenticated.** Any WebSocket can claim any `oderId`. The real authorization gate is `authorizeWebSocketJoin` on `join_server`, which checks membership / invite / password against the access-control tables — until that gate is crossed, an unverified `oderId` cannot do anything meaningful beyond joining the public lobby.
+- **No reuse-prevention on `displayName`.** Two distinct accounts may carry the same display name. UI must therefore disambiguate by `oderId` where identity actually matters.
+- **Local API tokens** never leave the desktop process and have a 24 h TTL — they are not a credential primitive for the signaling server.
+
+---
+
+## Performance considerations
+
+- `/register` and `/login` are O(1) lookups against a `UNIQUE` index on `username`. No caching layer.
+- `identify` is O(serversJoinedByThisConnection) on profile change because of the rebroadcast loop; profile updates are rare so this is negligible.
+- Dead-connection sweep is O(connections) per `PING_INTERVAL_MS`; trivially scalable for a single-process signaling server.
+
+---
+
+## Known issues and limitations
+
+- **Unsalted SHA-256 password hashing.** Highest-priority hardening target.
+- **No password reset, email confirmation, MFA, or account recovery.**
+- **No audit log** of register/login events.
+- **No binding between `AuthUserEntity.id` and the claimed `oderId`.** A future hardening pass should require the client to prove possession of an `AuthUser` credential before the server accepts an `identify` payload that names that user — likely via a signed challenge.
+- **No spec coverage** for the HTTP credential surface or the identify handshake.
+
+---
+
+## Related features
+
+- **[access-control](./access-control.md)** — consumes the `oderId` claimed via `identify` to authorize server joins, role lookups, and moderation actions.
+- **[presence](./presence.md)** — `identify` is the canonical channel for profile-metadata updates that presence broadcasts forward.
+- **[websocket-envelopes](./websocket-envelopes.md)** — owns the wire shape of `identify`, `user_joined`, and `access_denied`.
+- **[ipc-bridge](./ipc-bridge.md)** — the Electron Local API token store lives behind the same IPC boundary as other privileged operations.
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-05-25 | Initial documentation |

agents-docs/features/feature-template.md

@@ -0,0 +1,183 @@
+# [Feature Name]
+
+> **Area:** [area-name]
+> **Status:** Active | In Progress | Deprecated
+> **Last updated:** YYYY-MM-DD
+
+## Overview
+
+One paragraph describing what this feature does and why it exists.
+
+## Responsibilities
+
+- What this feature is responsible for
+- Its boundaries — what it does NOT own
+
+## Key concepts
+
+- **ConceptA**: short definition
+- **ConceptB**: short definition
+
+---
+
+## API Endpoint
+
+### Endpoint Details
+- **Method**: [GET | POST | PUT | PATCH | DELETE]
+- **Path**: `/api/v1/[feature-path]`
+- **Authentication**: [Required | Optional | None]
+- **Rate Limiting**: [Yes — describe | No]
+
+### Request Schema
+
+```json
+{
+  "field": "type — description"
+}
+```
+
+**Required fields:**
+- `field` (type, constraints): description
+
+**Optional fields:**
+- `field` (type): description. Defaults to "X" if not provided.
+
+### Response Schema
+
+```json
+{
+  "field": "type — description"
+}
+```
+
+### Error Responses
+
+- **400 Bad Request**: [specific causes]
+- **401 Unauthorized**: missing or invalid authentication
+- **404 Not Found**: [when this applies]
+- **500 Internal Server Error**: [specific causes]
+
+---
+
+## Business Logic
+
+### Core Functionality
+
+1. **Step 1**: description
+2. **Step 2**: description
+3. **Step 3**: description
+
+### Business Rules
+
+- Rule 1
+- Rule 2
+
+### Data Flow
+
+```
+Input → Validation → [Processing Steps] → Response
+```
+
+### Dependencies
+
+- **Service/Library**: what it's used for
+- **External API**: what it's used for
+- **Database**: what tables/collections are involved
+
+---
+
+## Technical Implementation
+
+### Service Layer
+
+- **Location**: `path/to/service`
+- **Key methods**: `methodName()` — description
+
+### Controller / Handler
+
+- **Location**: `path/to/handler`
+- **Responsibilities**: request validation, service invocation, response formatting
+
+### Repository / Data Access
+
+- **Location**: `path/to/repository`
+- **Tables/Collections**: list the relevant database objects
+- **Migrations**: reference the migration that created/modified the schema
+
+### Key Types
+
+- `TypeName`: description of what it represents
+
+---
+
+## Configuration
+
+### Environment Variables
+
+- `VAR_NAME`: description (required | optional, default: X)
+
+### Feature Flags
+
+- [List any feature flags, or "None"]
+
+---
+
+## Testing
+
+### Unit Tests
+
+- **Location**: `path/to/tests`
+- **Key scenarios**: list the most important test cases
+
+### Integration Tests
+
+- **Location**: `path/to/integration/tests`
+- **Setup**: describe any required infrastructure (database, external services, etc.)
+- **Mocking**: what external services are mocked and how
+
+---
+
+## Error Handling & Edge Cases
+
+### Common Errors
+
+- **Error scenario**: how it's handled
+
+### Edge Cases
+
+- **Edge case**: expected behavior
+
+---
+
+## Security Considerations
+
+- Authentication requirements
+- Authorization / access control
+- Input validation and sanitization
+- Data privacy considerations
+
+---
+
+## Performance Considerations
+
+- Expected response times
+- Known bottlenecks
+- Caching strategy (if any)
+
+---
+
+## Known Issues and Limitations
+
+1. **Limitation**: description
+
+---
+
+## Related Features
+
+- **[Related Feature]**: brief description of relationship
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| YYYY-MM-DD | Initial documentation |

agents-docs/features/ipc-bridge.md

@@ -0,0 +1,178 @@
+# Electron IPC Bridge
+
+> **Area:** ipc-bridge
+> **Status:** Active
+> **Last updated:** 2026-05-25
+
+## Overview
+
+The Electron IPC bridge is the only path through which the Angular renderer can reach the desktop runtime — the filesystem, the local SQLite database, OS APIs, the update flow, plugin loading, and the in-process Local API server. The renderer cannot import `electron`, `node:fs`, TypeORM, or any other privileged module directly; every privileged operation crosses the preload `contextBridge` boundary as a typed IPC call. This area documents the surface itself: how it is registered, how it is consumed, and what guarantees do (or do not) hold.
+
+## Responsibilities
+
+- Expose a frozen, allow-listed set of methods on the renderer's global window object via the preload bridge.
+- Register one `ipcMain` handler per exposed method, grouped by concern (`system`, `window-controls`, `cqrs`).
+- Provide a CQRS abstraction over the local database (commands + queries dispatched through two generic channels).
+- Translate main-process operations into renderer-safe values (file paths → URLs, native errors → structured responses where appropriate).
+
+This area does **not** own:
+
+- The schema or business logic behind any specific command/query (those live in `electron/cqrs/handlers/` and the affected product-client domains).
+- The plugin manifest contract (see [plugin-system](./plugin-system.md)) — only the IPC methods that surface it.
+- WebSocket signaling (see [websocket-envelopes](./websocket-envelopes.md)) — that bypasses Electron entirely.
+
+## Key concepts
+
+- **Preload bridge** — `electron/preload.ts`. The sole place `contextBridge.exposeInMainWorld` runs. Adding a method here requires a matching `ipcMain.handle` / `ipcMain.on` on the main side.
+- **Window surface** — exposed as `window.electronAPI` on the renderer. (Note: `electron/CONTEXT.md` refers to this as `window.api.*` — the documented intent. The literal global today is `electronAPI`. TODO: pick one and align.)
+- **CQRS channel** — two reserved channels `cqrs:command` and `cqrs:query` route every typed `Command`/`Query` through a single dispatch step, instead of one channel per operation.
+- **Handler setup function** — registered once at app boot from `electron/ipc/index.ts`: `setupCqrsHandlers`, `setupSystemHandlers`, `setupWindowControlHandlers`.
+- **Renderer bridge service** — `ElectronBridgeService` in `toju-app/src/app/core/platform/electron/electron-bridge.service.ts` is the Angular-side wrapper; domain services inject it rather than reaching for `window.electronAPI` directly.
+
+---
+
+## Surface catalogue
+
+Defined in `electron/preload.ts`. Approximately 50 methods, grouped below by concern. For exact signatures see the file.
+
+### Window controls (fire-and-forget)
+
+- `minimizeWindow`, `maximizeWindow`, `closeWindow` — channels `window-minimize`, `window-maximize`, `window-close`. Implementation: `electron/ipc/window-controls.ts`. Uses `ipcMain.on` (no return value).
+
+### Screen share & media
+
+- `getSources` — DesktopCapturer source enumeration.
+- Linux audio routing for screen-share monitor capture: `prepareLinuxScreenShareAudioRouting`, `activateLinuxScreenShareAudioRouting`, `deactivateLinuxScreenShareAudioRouting`, `startLinuxScreenShareMonitorCapture`, `stopLinuxScreenShareMonitorCapture`.
+- Event listeners: `onLinuxScreenShareMonitorAudioChunk`, `onLinuxScreenShareMonitorAudioEnded`.
+
+### Process & game detection
+
+- `getRunningProcessNames` (via `electron/process-list.ts`).
+- `getActiveGameCandidate` (via `electron/game-detection/`).
+- `getIgnoredGameProcesses`, `setIgnoredGameProcesses`.
+
+### File system
+
+- `readFile`, `readFileChunk`, `getFileSize`, `writeFile`, `appendFile`, `deleteFile`, `fileExists`, `getFileUrl`, `ensureDir`, `saveFileAs`, `saveExistingFileAs`, `openFilePath`, `readClipboardFiles`.
+- `getFileUrl` is the canonical way for the renderer to display a local file via `file://` — direct path access is forbidden.
+
+### Theme & plugins (filesystem-backed)
+
+- `getSavedThemesPath`, `listSavedThemes`, `readSavedTheme`, `writeSavedTheme`, `deleteSavedTheme`.
+- `getLocalPluginsPath`, `listLocalPluginManifests`. See [plugin-system](./plugin-system.md) for the manifest contract.
+
+### Settings & notifications
+
+- `getDesktopSettings`, `setDesktopSettings`.
+- `showDesktopNotification`, `requestWindowAttention`, `clearWindowAttention`, `onWindowStateChanged`.
+
+### Auto-update
+
+- `getAutoUpdateState`, `getAutoUpdateServerHealth`, `configureAutoUpdateContext`, `checkForAppUpdates`, `restartToApplyUpdate`, `onAutoUpdateStateChanged`.
+
+### Local API & docs
+
+- `getLocalApiStatus`, `openLocalApiDocs`, `openDocusaurusDocs`. The Local API server hosts the prebuilt Docusaurus bundle inside the desktop app — see `electron/api/local-api-server.ts`.
+
+### App & deep links
+
+- `relaunchApp`, `consumePendingDeepLink`, `onDeepLinkReceived`, `getAppDataPath`, `openCurrentDataFolder`.
+
+### Data management
+
+- `exportUserData`, `importUserData`, `eraseUserData`. Backed by `electron/data-archive.ts`.
+
+### Clipboard & context menu
+
+- `copyImageToClipboard`, `onContextMenu`, `contextMenuCommand`.
+
+### Idle state
+
+- `getIdleState`, `onIdleStateChanged`. Backed by `electron/idle/`.
+
+### CQRS (typed database access)
+
+- `command<T>(command: Command) => Promise<T>` → channel `cqrs:command`.
+- `query<T>(query: Query) => Promise<T>` → channel `cqrs:query`.
+- Command and query union types live in `electron/cqrs/types.ts`. Handlers are built dynamically per `DataSource` via `buildCommandHandlers(dataSource)` and `buildQueryHandlers(dataSource)` in `electron/ipc/cqrs.ts`.
+- Current commands: `SaveMessage`, `DeleteMessage`, `UpdateMessage`, `ClearRoomMessages`, `SaveReaction`, `RemoveReaction`, `SaveUser`, `SetCurrentUserId`, `UpdateUser`, `SaveRoom`, `DeleteRoom`, `UpdateRoom`, `SaveBan`, `RemoveBan`, `SaveAttachment`, `DeleteAttachmentsForMessage`, `SavePluginData`, `DeletePluginData`, `SaveMeta`, `ClearAllData`.
+- Current queries: `GetMessages`, `GetMessagesSince`, `GetMessageById`, `GetReactionsForMessage`, `GetUser`, `GetCurrentUser`, `GetCurrentUserId`, `GetUsersByRoom`, `GetRoom`, `GetAllRooms`, `GetBansForRoom`, `IsUserBanned`, `GetAttachmentsForMessage`, `GetAllAttachments`, `GetPluginData`, `GetMeta`.
+- Unknown `type` raises `Error("No command/query handler for type: ${type}")`.
+
+---
+
+## Renderer consumption
+
+- **`ElectronBridgeService`** (`toju-app/src/app/core/platform/electron/electron-bridge.service.ts`) — provides `getApi(): ElectronApi | null` and `requireApi(): ElectronApi`. Domain services inject the bridge service, never `window` directly. This also makes the bridge mockable for spec runs and the website preview (where `window.electronAPI` is absent).
+- **CQRS wrapper**: `toju-app/src/app/infrastructure/persistence/electron-database.service.ts` wraps `api.command()` / `api.query()` with typed helpers; product-client domains use this rather than calling CQRS directly.
+- **Per-domain consumers**: file I/O (`attachment`), theme (`theme`), profile-avatar, notifications, idle (used by presence), and game-activity domains each inject the bridge to reach their respective IPC slice.
+
+---
+
+## Error handling
+
+`electron/CONTEXT.md` says:
+
+> IPC handler errors are translated to typed error envelopes before crossing back into the renderer — the renderer never sees a raw `Error` from main.
+
+In practice today:
+
+- The CQRS layer throws raw `Error` objects on unknown `type` (caller sees the serialized message).
+- Most `electron/ipc/system.ts` handlers catch errors and return structured response objects (e.g. `{ opened: false, reason: string }`), but the shape is per-handler, not centralised.
+- There is no global error-envelope wrapper around `ipcMain.handle`.
+
+**TODO**: reconcile the CONTEXT.md invariant with reality — either introduce a shared error-envelope wrapper or update the invariant to match the per-handler convention. Until then, treat error shapes as a per-method concern.
+
+---
+
+## Technical implementation
+
+- **Preload**: `electron/preload.ts` (single source of truth for the exposed surface).
+- **Registration**: `electron/ipc/index.ts` calls three setup functions at app boot — `setupCqrsHandlers`, `setupSystemHandlers`, `setupWindowControlHandlers`.
+- **System handlers**: `electron/ipc/system.ts` (~40 channels, ~780 lines).
+- **Window controls**: `electron/ipc/window-controls.ts` (3 channels, fire-and-forget).
+- **CQRS handlers**: `electron/ipc/cqrs.ts` plus typed command/query unions in `electron/cqrs/types.ts` and per-handler implementations under `electron/cqrs/handlers/`.
+- **Local SQLite access** is gated behind CQRS — no other channel exposes the database directly. See `electron/data-source.ts` and `electron/entities/`.
+
+## Invariants
+
+- The renderer never imports `electron`, Node APIs, or TypeORM directly. (Enforced by Electron's `contextIsolation` + no `nodeIntegration`.)
+- Every method on `window.electronAPI` has exactly one IPC channel and exactly one main-process handler.
+- Schema mutations go through a TypeORM migration in `electron/migrations/`; raw SQL never crosses the IPC bridge.
+- All file access is path-based on the main side, URL-based on the renderer side (`getFileUrl`).
+
+## Testing
+
+- `electron/plugin-library.spec.ts` — plugin discovery (touches the same IPC path but tests the library, not the channel).
+- `electron/idle/idle-monitor.spec.ts` — idle source unit test.
+- **TODO**: no spec covers `preload.ts` exposure, the system handler set, the CQRS dispatcher, or the error path. Renderer-side `ElectronBridgeService` spec status not verified.
+
+## Security considerations
+
+- `contextIsolation: true` + no `nodeIntegration` in the renderer; `electron/preload.ts` is the only crossing.
+- Adding a channel requires touching both `preload.ts` and `electron/ipc/`. There is no dynamic channel registration.
+- File-system handlers should validate paths against user-data scope — TODO: audit `system.ts` for path-traversal protections beyond what the plugin loader does.
+- Deep-link handling: `consumePendingDeepLink` returns a queued URL; validation lives in renderer routing. TODO: confirm allow-list / scheme filtering on the main side.
+
+## Performance considerations
+
+- IPC traffic is per-call serialization; large payloads (file chunks, attachment imports) go via `readFileChunk` + offsets instead of single `readFile` to avoid blocking the main process.
+- CQRS calls hit the local SQLite database synchronously inside the main process. There is no batching layer.
+
+## Known issues and limitations
+
+- **Documented vs. actual API name** — the `window` global is `electronAPI`, not `api`. CONTEXT.md uses `window.api.*`. Reconcile in a future cleanup.
+- **No typed error envelope** despite the CONTEXT.md invariant.
+- **No preload-surface test** — additions are caught only at runtime / lint.
+
+## Related features
+
+- **[plugin-system](./plugin-system.md)** — surfaces `getLocalPluginsPath`, `listLocalPluginManifests`, and plugin data CQRS commands through this bridge.
+- **[websocket-envelopes](./websocket-envelopes.md)** — the realtime path that bypasses the bridge; included here only to delineate the two surfaces.
+- **[voice-signaling](./voice-signaling.md)** — uses `getSources` and the Linux audio routing methods for screen-share media capture.
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-05-25 | Initial documentation |

agents-docs/features/messaging.md

@@ -0,0 +1,195 @@
+# Messaging
+
+> **Area:** messaging
+> **Status:** Active
+> **Last updated:** 2026-05-25
+
+## Overview
+
+Messaging in Toju covers two transports that share a single domain model. Server-channel chat is broadcast by the signaling server over WebSocket — fire-and-forget, no server-side persistence today. Direct messages (1:1 and group DMs) are peer-to-peer over the WebRTC chat data channel, with a signaling-server fallback when no data channel is open and an offline queue for when neither path is available. On both transports the client maintains a **monotonic delivery state machine** per message and a **chunked inventory-sync protocol** that lets two peers reconcile missing history without flooding the link.
+
+This document is the cross-context contract: envelope names, sync protocol, delivery states, edit/delete rules, and storage decisions. The product-client domain READMEs at `toju-app/src/app/domains/chat/README.md` and `toju-app/src/app/domains/direct-message/README.md` cover internal NgRx state and effects; the wire shapes live in [websocket-envelopes](./websocket-envelopes.md).
+
+## Responsibilities
+
+- Send, edit, and delete server-channel chat messages over WebSocket (`chat_message`, `edit_message`, `delete_message`).
+- Send, edit, and delete direct messages over the WebRTC data channel with signaling fallback.
+- Carry typing indicators on server-channel chat (`user_typing`).
+- Reconcile peer history via the inventory-sync protocol (chunked, capped backfill).
+- Drive a monotonic delivery state machine: `QUEUED → SENT → DELIVERED → ACKNOWLEDGED`.
+- Persist direct messages locally; the server keeps no message store.
+
+This area does **not** own:
+
+- Attachment payloads or the chunked file-transfer protocol → [attachments](./attachments.md).
+- RTC negotiation that brings the data channel up → [voice-signaling](./voice-signaling.md).
+- Permission to send a message (`writeMessages`, `manageMessages`, channel overrides, slowmode hint) → [access-control](./access-control.md).
+- The wire shape of every envelope used here → [websocket-envelopes](./websocket-envelopes.md).
+
+## Key concepts
+
+- **Server-channel message** — broadcast through the signaling server to every connected peer of a server. No server-side persistence in the current build.
+- **Direct message** — point-to-point or group P2P message, persisted locally per-user via Electron CQRS (and via `localStorage` on browser fallback today — TODO confirm).
+- **Conversation** — 1:1 or group DM thread. Group DMs can be created by adding a third participant to a 1:1, which spawns a new conversation while preserving the original.
+- **Inventory event** — peer-to-peer announcement of "here is what I have for this conversation/channel"; the receiver replies with a request for missing pieces.
+- **Sync batch** — chunked response carrying up to 200 messages per envelope, capped at 1000 messages of backfill per inventory exchange.
+- **Delivery state** — monotonic enum on a direct message: `QUEUED (0) → SENT (1) → DELIVERED (2) → ACKNOWLEDGED (3)`. Defined in the chat-events shared kernel; advanced via `advanceDirectMessageStatus`.
+- **Peer-delivery service** — `PeerDeliveryService` (`toju-app/src/app/domains/direct-message/application/services/peer-delivery.service.ts`) — the dispatcher that tries the data channel first, then the signaling forward, then the offline queue.
+
+---
+
+## Transports
+
+### Server-channel chat (WebSocket)
+
+- Client sends `chat_message` to the signaling server; `handleChatMessage` (`server/src/websocket/handler.ts:274`) validates the user is in the target server and broadcasts to every other connection.
+- `edit_message` and `delete_message` follow the same fan-out path.
+- `user_typing` (`handleTyping`, `handler.ts:309`) is broadcast as a transient signal — no persistence, no sync, no delivery state.
+- The server **does not persist** these envelopes. Late joiners do not see chat history older than their join — they can request it from peers via the inventory protocol if any peer present has it stored locally.
+
+### Direct messages (WebRTC data channel)
+
+- DMs ride the `chat`-labelled data channel established alongside each voice peer connection (see [voice-signaling](./voice-signaling.md)).
+- `PeerDeliveryService` is the dispatcher. For each outgoing event it:
+  1. Tries every open data channel to a `recipients`-listed peer.
+  2. If no data channel is available to a recipient, falls back to a signaling-server `forwardPeerMessage` envelope so the server forwards it to that peer's connection.
+  3. If neither path is open, enqueues the event in `OfflineMessageQueueService` and replays on `peerConnected$` / `networkRestored$`.
+- The server **forwards** DM envelopes opaquely — no inspection, no persistence.
+
+### Storage
+
+- **Direct messages** persist via Electron CQRS — see [ipc-bridge](./ipc-bridge.md). Each user has their own local TypeORM database; messages are written via `save-direct-message` / equivalent commands.
+- **Server-channel chat** persists via `DatabaseService` (Electron CQRS) when running on desktop, or in IndexedDB when running purely in browser. TODO: confirm the IndexedDB code path.
+- The signaling server holds **zero** message bytes at rest today. Re-deploys lose nothing because there is nothing to lose.
+
+---
+
+## Inventory / sync protocol
+
+Both transports share the same inventory shape, defined in `toju-app/src/app/shared-kernel/chat-events.ts`:
+
+- `ChatInventoryEvent` — sender broadcasts "for conversation X I have messages with these ids and last-modified timestamps" (capped at 1000 entries).
+- `ChatSyncBatchEvent` — receiver replies with a chunked batch of full message payloads, **up to 200 per envelope**, repeated until the requested set is satisfied or 1000 messages have been returned.
+
+Rules:
+
+- Inventory is **additive** — `mergeIncomingMessage` / `upsertDirectMessage` only insert or update; a sparser peer never wipes a richer peer's history.
+- Reactions and attachment-link changes are reconciled by comparing per-message `lastModifiedAt`; the higher wins.
+- The 1000-message ceiling is per inventory exchange, not per conversation lifetime; an older history can be filled in piecewise across multiple inventory cycles.
+
+The same protocol is reused for the chat domain (server channels) and the direct-message domain. The implementation lives in `toju-app/src/app/domains/chat/domain/rules/message-sync.rules.ts` and is invoked from the direct-message effects via `DirectMessageService.requestSync()`.
+
+---
+
+## Delivery state machine
+
+For DMs, every outgoing message has a `status`:
+
+| Value | Numeric | Meaning |
+|-------|---------|---------|
+| `QUEUED` | 0 | Composed locally; no transport attempt has succeeded yet. |
+| `SENT` | 1 | At least one transport (data channel or signaling forward) has accepted the payload. |
+| `DELIVERED` | 2 | At least one recipient has acknowledged receipt at the application layer. |
+| `ACKNOWLEDGED` | 3 | The full recipient set has acknowledged (1:1: the one recipient; group: every participant). |
+
+Transitions are advanced via `advanceDirectMessageStatus`, which **only advances** — a higher value is never replaced by a lower one. A retried message that succeeds after a queue replay can therefore move `QUEUED → SENT` but never `DELIVERED → SENT`.
+
+Server-channel messages do not carry an application-level delivery state today (the server broadcast is fire-and-forget); the UI treats them as `SENT` once the WebSocket accepts the frame.
+
+---
+
+## Edit and delete
+
+- `edit-message` / `delete-message` events carry the original `messageId`. On both transports, the receiver locates the existing row (by id) and applies the mutation via `applyMutation`.
+- DMs use the same envelope types but ride the data channel / signaling-forward fabric.
+- Edits are last-writer-wins by `editedAt`. A delete removes the message body but keeps a tombstone with `deletedAt` so peers that haven't yet seen the delete can converge on the next inventory sync.
+
+TODO: `applyMutation` does not currently verify the mutation originated from the original author. A non-cooperating client could send `edit-message` for someone else's message and a receiver would accept it. Confirm and either harden client-side or document the trust model.
+
+---
+
+## Typing indicators
+
+- Server-channel only. DMs do not have a typing indicator today.
+- Sent as `user_typing`; broadcast to a server scope.
+- Transient: no persistence, no sync replay, no delivery state.
+
+---
+
+## Business rules and invariants
+
+- The signaling server is **not authoritative** for messaging. `handleChatMessage` only broadcasts; there is no server-side message log.
+- The delivery state machine is **monotonic** — `advanceDirectMessageStatus` never moves status backwards.
+- DM envelopes are **ignored** unless the local user appears in `participants` / `recipients` (or has an existing local conversation matching the id).
+- Inventory merges are **additive** — `mergeIncomingMessage` / `upsertDirectMessage` never delete or downgrade a richer local row.
+- A 1:1 → group upgrade **preserves** the original 1:1 history; the group is a new conversation.
+- Edits / deletes are reconciled by `lastModifiedAt` / `editedAt` / `deletedAt`.
+
+---
+
+## Technical implementation
+
+### Server
+- WS handlers — `server/src/websocket/handler.ts`: `handleChatMessage` (line 274), `handleTyping` (309); DM forwarding via `forwardPeerMessage` / `forwardRtcMessage`.
+- No CQRS, no entities, no migrations: server messaging is broadcast-only.
+
+### Product client
+- Chat domain — `toju-app/src/app/domains/chat/`: services, effects, sync rules at `domain/rules/message-sync.rules.ts`.
+- Direct-message domain — `toju-app/src/app/domains/direct-message/`: `DirectMessageService`, `PeerDeliveryService` (`application/services/peer-delivery.service.ts`), offline queue.
+- Shared kernel — `toju-app/src/app/shared-kernel/chat-events.ts` (`ChatInventoryEvent`, `ChatSyncBatchEvent`, `chat_message`, `edit-message`, `delete-message`, `direct-message-sync`, `direct-message-sync-request`).
+- Persistence — Electron CQRS commands for DMs (see [ipc-bridge](./ipc-bridge.md)); `DatabaseService` for server-channel chat.
+
+### Electron
+- DM persistence — TypeORM entity (likely `MessageEntity` and a DM-specific row) + CQRS handlers. Backup / restore is part of the Electron data-management surface.
+
+---
+
+## Testing
+
+- TODO: chat domain has zero `*.spec.ts` files at time of writing.
+- TODO: no dedicated server-side spec for `handleChatMessage`, `handleTyping`, or `forwardRtcMessage`.
+- TODO: confirm specs for `PeerDeliveryService` and `OfflineMessageQueueService`.
+- E2E: `e2e/tests/chat/chat-message-features.spec.ts` covers happy-path chat and attachment sync between users.
+
+---
+
+## Performance considerations
+
+- Inventory batch cap: **200 messages per envelope**.
+- Inventory backfill cap: **1000 messages per inventory exchange**.
+- `chat_message` broadcast is O(N) over connected peers of the server; no fan-out batching.
+- DMs incur O(recipients) data-channel writes (or signaling forwards) per send; large group DMs amplify per-message cost linearly.
+
+---
+
+## Security considerations
+
+- **No end-to-end encryption.** P2P traffic over the data channel is DTLS-encrypted by WebRTC; signaling-forwarded fallback is plain WebSocket; either way the local TypeORM database stores plaintext.
+- **`applyMutation` does not verify authorship** on incoming `edit-message` / `delete-message` events. TODO above.
+- **No server-side rate limiting** on `chat_message`. A non-cooperating client can flood a server's broadcast.
+
+---
+
+## Known issues and limitations
+
+- **No server-side chat history.** Late joiners depend on peers having local history to replay via inventory sync.
+- **No spec coverage** for the chat domain.
+- **DM authorship is not verified** by `applyMutation`.
+- **No DM typing indicator.**
+- **`OfflineMessageQueueService` retry policy** is currently driven by `peerConnected$` / `networkRestored$` events only — there is no scheduled retry; a stuck queue requires one of those events to fire. TODO: confirm behavior across reconnects.
+
+---
+
+## Related features
+
+- **[websocket-envelopes](./websocket-envelopes.md)** — owns the wire shape of every envelope here.
+- **[attachments](./attachments.md)** — file payloads ride alongside chat events on the data channel.
+- **[voice-signaling](./voice-signaling.md)** — establishes the data channel DMs ride on.
+- **[ipc-bridge](./ipc-bridge.md)** — exposes the CQRS persistence DMs and server chat use.
+- **[access-control](./access-control.md)** — gates write permissions and slowmode.
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-05-25 | Initial documentation |

agents-docs/features/plugin-system.md

@@ -0,0 +1,180 @@
+# Plugin System
+
+> **Area:** plugin-system
+> **Status:** Active
+> **Last updated:** 2026-05-25
+
+## Overview
+
+Plugins extend Toju's renderer with bundled or local ES modules that can publish events into a server, register UI contributions (pages, panels, actions, channel sections, embed renderers), store per-user or per-server data, and exchange messages over P2P. They are described by a typed manifest, gated by an explicit capability grant model, and coordinated across three subdomains: the Electron plugin loader (`electron/plugin-library.ts`), the renderer plugin runtime (`toju-app/src/app/domains/plugins/`), and the server's plugin-support surface (`server/src/routes/plugin-support.ts`). This area documents the contract those three sides share.
+
+## Responsibilities
+
+- Define the canonical plugin manifest shape (`TojuPluginManifest`) and its semantic versioning, dependency, and capability requirements.
+- Discover local plugin manifests from disk in Electron and surface them to the renderer.
+- Load plugin modules — local file://, http(s)://, or bundled — into the renderer and run their lifecycle hooks.
+- Gate every host API call by an explicit capability grant.
+- Persist server-scoped plugin requirements and event definitions on the signaling server, broadcasting changes to connected clients.
+
+This area does **not** own:
+
+- The wire format of `plugin_event` envelopes themselves — those live with [websocket-envelopes](./websocket-envelopes.md); this area defines the **validation rules** applied to them.
+- IPC plumbing for plugin manifest discovery — that's the [ipc-bridge](./ipc-bridge.md) surface.
+- Per-plugin business logic — that lives in the plugin's own code.
+
+## Key concepts
+
+- **Manifest** — `TojuPluginManifest` (`toju-app/src/app/shared-kernel/plugin-system.contracts.ts`). Required: `id`, `title`, `description`, `version`, `apiVersion`, `kind`, `schemaVersion` (fixed `1`), `compatibility.minimumTojuVersion`. Optional: `entrypoint`, `bundle`, `capabilities[]`, `events[]`, `data[]`, `ui`, `settings`, `relationships`, `authors`, `pluginUser`, `scope`, `homepage`, `changelog`, `license`, `readme`, `load.priority`.
+- **Capability** — a string ID (e.g. `messages.send`, `events.server.publish`, `ui.pages`, `storage.local`). Plugins declare what they need in `capabilities[]`; the host enforces grants per plugin.
+- **Plugin event** — a declared `{ eventName, direction, scope, schema?, maxPayloadBytes? }` tuple. `direction` is `clientToServer | serverRelay | p2pHint`; `scope` is `server | channel | user | plugin`.
+- **Capability grant** — an entry in `metoyou_plugin_capability_grants` (localStorage + desktop file) recording user consent for a `(pluginId, capability)` pair.
+- **Activation context** — `TojuPluginActivationContext` — what a plugin module receives in its `activate(context)` hook: `pluginId`, `manifest`, `api` (the capability-gated `TojuClientPluginApi`), and a `subscriptions[]` cleanup list.
+- **Local plugin** — a folder under `${app.getPath('userData')}/plugins/<id>/` containing `toju-plugin.json` (preferred) or `plugin.json` and resolved relative assets.
+
+---
+
+## Manifest contract
+
+Declared in `toju-app/src/app/shared-kernel/plugin-system.contracts.ts` (the source of truth on the renderer side; the Electron loader treats the manifest as `unknown` until the renderer validates it).
+
+Highlights:
+
+- **`schemaVersion: 1`** — fixed; bump only with a coordinated migration.
+- **`apiVersion`** — declares which host API surface the plugin expects.
+- **`kind`** — distinguishes plugin types (currently a string union; see file for exact members).
+- **`bundle.url`** + optional `bundle.entrypointUrl` — for remote / store-installed plugins.
+- **`entrypoint`** — relative path within the local plugin folder; rejected if it escapes `pluginRoot`.
+- **`relationships.{requires,optional,conflicts,before,after}`** — `pluginId` + optional `versionRange`. Resolved at activation; missing required dependencies block activation.
+- **`events[]`** — registered with the server via `plugin-support` when the plugin is required by a server. The server uses these definitions to validate inbound `plugin_event` envelopes.
+- **`data[]`** — `{ key, scope: server|channel|user|plugin, storage: local|serverData, schema? }`.
+- **`load.priority`** — `bootstrap | high | default | low`; controls ordering when several plugins are activated together.
+- **`pluginUser`** — synthetic user identity for messages a plugin posts on its own behalf.
+
+---
+
+## Discovery & loading
+
+### Local discovery (Electron main)
+
+`electron/plugin-library.ts`:
+
+- Scans `${app.getPath('userData')}/plugins/` **one level deep** for plugin folders.
+- For each folder, reads `toju-plugin.json` (preferred) or `plugin.json` as raw JSON. No schema validation at this layer.
+- Resolves relative paths (`entrypoint`, `readme`) against the plugin root, rejecting `..`, absolute paths, or anything that escapes the root via `isPathInside()` realpath check.
+- Returns `LocalPluginDiscoveryResult { plugins, errors, pluginsPath }` where each `plugins[i]` is a `LocalPluginManifestDescriptor` carrying the raw manifest, manifest path, plugin root, plugin-root `file://` URL, optional entrypoint and readme paths, and a `discoveredAt` timestamp.
+
+Exposed to the renderer through the [ipc-bridge](./ipc-bridge.md) as `listLocalPluginManifests` and `getLocalPluginsPath`.
+
+### Renderer runtime
+
+`toju-app/src/app/domains/plugins/`:
+
+- **`PluginHostService`** — orchestrates lifecycle: `discoverLocalPlugins`, `registerLocalManifest`, `activate`, `deactivate`, `reload`, `loadPluginModule`.
+- **`PluginClientApiService`** — constructs the capability-gated facade `TojuClientPluginApi` per plugin. Subsystems: `channels`, `events`, `messages`, `messageBus`, `p2p`, `profile`, `users`, `roles`, `server`, `attachments`, `media`, `storage`, `serverData`, `clientData`, `ui`, `logger`, `context`.
+- **`PluginCapabilityService`** — `grant(pluginId, capability)`, `revoke()`, `grantAll(manifest)`, `assert(pluginId, capability)`. Storage in `metoyou_plugin_capability_grants` (localStorage + desktop file).
+- **`PluginMessageBusService`** — plugin-scoped pub/sub with topic, optional channel/peer targeting, optional message replay.
+- **`PluginStorageService`** — split storage paths for `local` and `serverData` scopes.
+- **`PluginUiRegistryService`** — central registry of UI contributions consumed by `plugin-render-host`, `plugin-page-host`, `plugin-action-menu`.
+- **`PluginRequirementStateService`**, **`PluginDesktopStateService`** — state slices.
+
+### Module loading
+
+- Entrypoint URL is `file://` for local plugins, `http(s)://` for remote, or the `bundle.url` for bundled.
+- Bytes are fetched, wrapped in a `Blob`-backed object URL, then imported via dynamic `import()` so devtools and stack traces resolve.
+- `GuardedPluginMutationObserver` wraps observer callbacks to catch plugin errors and break infinite redispatch loops.
+
+### Lifecycle states
+
+From `plugin-runtime.models.ts`: `discovered → validated → blocked | loading → ready → loaded → failed | unloading → unloaded → disabled`.
+
+### Module contract
+
+```ts
+export interface TojuClientPluginModule {
+  activate?(context: TojuPluginActivationContext): void | Promise<void>;
+  deactivate?(context: TojuPluginActivationContext): void | Promise<void>;
+  ready?(context: TojuPluginActivationContext): void | Promise<void>;
+  onServerRequirementsChanged?(context, snapshot): void | Promise<void>;
+  onPluginDataChanged?(context, event): void | Promise<void>;
+}
+```
+
+---
+
+## Server surface (`server/src/routes/plugin-support.ts`)
+
+Each endpoint scoped to `:serverId`. Permission `manageServer` enforced for mutations via `server-permissions.service.ts`.
+
+- `GET /:serverId/plugins` → `PluginRequirementsSnapshot` — full set of required/optional plugins + event definitions for the server.
+- `PUT /:serverId/plugins/:pluginId/requirement` — upsert a requirement: `status: required | optional | recommended | blocked | incompatible`, `installUrl?`, `sourceUrl?`, `manifest?`, `versionRange?`.
+- `DELETE /:serverId/plugins/:pluginId/requirement` — remove.
+- `PUT /:serverId/plugins/:pluginId/events/:eventName` — register or update an event definition (`direction`, `scope`, `schema?`, `maxPayloadBytes?`).
+- `DELETE /:serverId/plugins/:pluginId/events/:eventName` — delete.
+- `GET|PUT|DELETE /:serverId/plugins/:pluginId/data/:key` — **disabled** on the signaling server (returns HTTP 410). Plugin data on the server is intentionally out of scope.
+
+Identifier patterns:
+
+- `pluginId`: `/^[a-z0-9][a-z0-9.-]{1,126}[a-z0-9]$/`
+- `eventName`: `/^[a-z][a-z0-9.:-]{1,126}[a-z0-9]$/`
+
+Changes broadcast to connected clients via the [websocket-envelopes](./websocket-envelopes.md) — the matching `PluginRequirementsSnapshot` is also delivered as part of the `join_server` and `view_server` responses.
+
+---
+
+## Plugin event validation
+
+`server/src/services/plugin-support.service.ts` exposes `validatePluginEventEnvelope()`. The `plugin_event` envelope handler (`server/src/websocket/handler.ts`) calls it before broadcasting. Validation checks:
+
+- `eventName` is registered for `pluginId` on `serverId`.
+- `direction` permits the source (clientToServer vs p2pHint vs serverRelay).
+- `payload` size ≤ `maxPayloadBytes` (default 64 KB).
+- If `schema` was declared in the manifest, the payload conforms — TODO: confirm the schema dialect (looks like JSON Schema subset).
+
+## Security considerations
+
+- **Plugins run in the renderer's JS context.** There is no true sandbox: plugins have DOM access, can read/write `localStorage`, and can issue `fetch` requests subject to the renderer's CSP.
+- **Capability model is the primary security boundary.** Every method on `TojuClientPluginApi` calls `PluginCapabilityService.assert(pluginId, capability)`. Missing grant → `PluginCapabilityError`.
+- **Path traversal** in the local plugin loader is blocked by `isPathInside()` realpath checks (`electron/plugin-library.ts`).
+- **Payload bounds** on plugin events: default 64 KB, configurable per event definition.
+- **No code signing or integrity verification.** Plugins are trusted to the extent the user granted capabilities. The plugin store flow is documented in `docs-site/docs/plugin-development/`.
+- **TODO**: review whether `bundle.url` fetches go through a CSP / allow-list or are unbounded.
+
+## Configuration
+
+- **Local plugins path**: `${app.getPath('userData')}/plugins/` (Electron). Exposed as `getLocalPluginsPath`.
+- **Capability grants**: `metoyou_plugin_capability_grants` in localStorage; mirrored to a desktop file via `PluginDesktopStateService`.
+- **Server-side persistence**: plugin requirements and event definitions are stored in the server's database; entities and migrations live alongside other server entities (TODO: enumerate the specific entities).
+
+## Testing
+
+- **Electron**: `electron/plugin-library.spec.ts` — covers valid/invalid JSON, path traversal rejection, escaping entrypoints. Uses fixture `TEST_PLUGIN_FIXTURE_DIR`.
+- **Renderer**: `plugin-host.service.spec.ts`, `plugin-store.service.spec.ts`, `local-plugin-discovery.service.spec.ts`.
+- **Server**: `server/src/websocket/handler-plugin.spec.ts` — `plugin_event` validation flow.
+- **E2E**: `e2e/tests/.../plugin-support-api.spec.ts`, `plugin-manager-ui.spec.ts`, `plugin-api-two-users.spec.ts`.
+
+## Known issues and limitations
+
+- **Server-side plugin data is intentionally disabled** (`410 Gone` on `*/data/:key` routes). Plugins must currently treat `serverData` storage as not yet implemented on the signaling server. TODO: clarify whether this is a permanent boundary or scheduled work.
+- **No true sandbox** for plugin execution. The capability model is the only restraint between a plugin and the renderer's globals.
+- **Manifest validation is renderer-side.** The Electron loader treats manifests as raw JSON; malformed or hostile manifests are caught when the renderer registers them.
+- **No host-side plugin allow-list** beyond per-server requirements — a user can install any local plugin.
+
+## Related features
+
+- **[ipc-bridge](./ipc-bridge.md)** — surfaces `listLocalPluginManifests`, `getLocalPluginsPath`, and the plugin CQRS commands (`SavePluginData`, `DeletePluginData`, `GetPluginData`).
+- **[websocket-envelopes](./websocket-envelopes.md)** — defines the `plugin_event` envelope this area validates.
+- **[server-directory](./server-directory.md)** — `join_server` / `view_server` responses include `PluginRequirementsSnapshot` for the joined server.
+
+## Documentation for plugin authors
+
+Author-facing docs ship with the desktop app via Docusaurus:
+
+- `docs-site/docs/plugin-development/create-a-plugin.md`
+- `docs-site/docs/user-guide/plugins.md`
+- `docs-site/docs/developer/llm-plugin-builder-guide.md`
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-05-25 | Initial documentation |

agents-docs/features/presence.md

@@ -0,0 +1,196 @@
+# Presence
+
+> **Area:** presence
+> **Status:** Active
+> **Last updated:** 2026-05-25
+
+## Overview
+
+Presence in Toju covers everything that signals "who is here, where, and doing what" — connection lifecycle (`join_server`, `leave_server`), availability status (`online / away / busy / offline`), profile metadata propagation, voice-room membership, and the current-game indicator. The signaling server **forwards and deduplicates** presence over WebSocket but never persists it: every restart of the server resets all presence state to nothing, and every reconnect of a client re-derives the world from scratch via a `server_users` snapshot.
+
+Several signals contribute. Status comes from idle detection in the renderer (Electron `powerMonitor` or browser fallback) and from explicit user choices. Voice membership is **client-derived** from observed `voice_state` broadcasts — the server never tracks who is in a voice room. Game activity is scanned in the renderer using Electron-IPC process inspection, resolved via the server's RAWG-backed `/games/match` API, and broadcast directly to peers over the WebRTC data channel — it never touches the signaling server.
+
+## Responsibilities
+
+- Track which users are connected to which server and broadcast joins/leaves with multi-device dedup.
+- Carry profile metadata (`displayName`, `description`, `profileUpdatedAt`) so peers can render rich identity without a separate lookup.
+- Propagate availability status (`online / away / busy / offline`) as users choose, idle, or wake.
+- Surface voice-room membership to peers via the `voice_state` envelope.
+- Surface current-game activity to peers via the chat data channel.
+
+This area does **not** own:
+
+- The WebSocket envelope shape — see [websocket-envelopes](./websocket-envelopes.md).
+- RTC negotiation, peer connection lifecycle, RNNoise — see [voice-signaling](./voice-signaling.md).
+- Server-side account records, credentials, or the `identify` handshake's authentication semantics — see [authentication](./authentication.md).
+- Authorization for joining a server (membership / bans / invites) — see [access-control](./access-control.md).
+
+## Key concepts
+
+- **`oderId`** — client-asserted identity. The deduplication key across multiple sockets and devices.
+- **`connectionScope`** — opaque string (typically the signal URL). Used together with `oderId` to coexist multi-URL sockets without an eviction loop.
+- **Status** — `'online' | 'away' | 'busy' | 'offline'`. `VALID_STATUSES` lives in `server/src/websocket/handler.ts`. Client maps incoming `offline` to a local `disconnected` rendering tag.
+- **Manual vs automatic status** — manual user choices override the idle-detector.
+- **Voice presence** — derived client-side from `voice_state` broadcasts; the signaling server has no voice-room model.
+- **Game activity** — currently-detected game; resolved via `/games/match` and announced to peers over the data channel as a `game-activity` chat event.
+- **`ConnectedUser`** — server-side per-connection row (`server/src/websocket/types.ts`); see [authentication](./authentication.md) for the full shape.
+
+---
+
+## Envelopes (consumed and emitted)
+
+Schemas live in [websocket-envelopes](./websocket-envelopes.md). Presence-relevant types:
+
+- `identify` — first envelope a client sends; updates profile metadata. Re-broadcasts `user_joined` per joined server when profile fields change.
+- `join_server` / `leave_server` — connection joins/leaves a specific server scope; gated by `authorizeWebSocketJoin` (see [access-control](./access-control.md)).
+- `server_users` — full peer roster sent to a connection when it joins a server; the only "snapshot" envelope.
+- `user_joined` — broadcast to peers on a server when a new *identity* arrives (i.e. no other connection of the same `oderId` already had this server).
+- `user_left` — broadcast to peers when an identity fully releases a server; payload includes `serverIds` listing the servers the user is still in elsewhere.
+- `status_update` — availability status change (`online / away / busy / offline`).
+- `voice_state` — broadcast to a server when the user enters/leaves voice or toggles mute/deafen. Carries `roomId`, `voiceGateway`, mute/deafen flags. Voice membership is reconstructed from these events client-side.
+- `keepalive` — bumps `lastPong` on the server to keep the connection from being reaped.
+- `access_denied` — server response when authorization for `join_server` fails.
+
+Game activity events ride the WebRTC **chat data channel** as `game-activity` chat events — not as WebSocket envelopes.
+
+---
+
+## Lifecycle
+
+A connection moves through these stages:
+
+1. **WebSocket connect** — server allocates a `ConnectedUser` row keyed by `connectionId`.
+2. **`identify`** — client claims `oderId`, profile metadata, and an optional `connectionScope`. See [authentication](./authentication.md) for the handshake details.
+3. **`join_server`** — gated by `authorizeWebSocketJoin`. On success, the server adds the server to `user.serverIds`, sends a private `server_users` snapshot to the joiner, and broadcasts `user_joined` to other peers on that server *only if* this is a new identity for the server (multi-device dedup).
+4. **Steady state** — `status_update`, `voice_state`, profile-bearing `identify` updates, and chat / RTC envelopes flow. The server bumps `lastPong` on every inbound frame.
+5. **`leave_server` / disconnect** — the server removes the server from `user.serverIds`. `user_left` is broadcast to peers *only* once every connection of the same `oderId` has released the server. The payload's `serverIds` field reports which servers the identity is still in, so clients can distinguish "moved tabs" from "fully left."
+6. **Dead-connection sweep** — every `PING_INTERVAL_MS = 30 000` the server sweeps; any connection with `lastPong` older than `PONG_TIMEOUT_MS = 45 000` is closed and processed as a disconnect (`server/src/websocket/index.ts`).
+
+---
+
+## Multi-device deduplication
+
+`broadcastToServer` (`server/src/websocket/broadcast.ts`) deduplicates fan-out by `oderId`, so a user logged in on two devices sees each peer event once.
+
+`handleJoinServer` (`handler.ts:155`) only emits `user_joined` when the join is a **new identity membership** — i.e. no other connection of the same `oderId` already held the server. Renaming a tab or opening a second window does not produce spurious join notifications.
+
+Symmetrically, `handleLeaveServer` only emits `user_left` when no other connection of the same `oderId` still holds the server. The `serverIds` field on the payload lets clients see "the identity is still in these other servers" rather than treating a tab close as a full logout.
+
+`connectionScope` keeps this stable across multi-signal-URL deployments: an identity that opens connections to two signal URLs is still one identity from the broadcast layer's perspective, but the per-scope stale-eviction does not loop.
+
+---
+
+## Status
+
+Two writers update status:
+
+- **Manual** — the user picks `online / away / busy / offline` from the UI. The chosen value is sent as a `status_update` envelope and persists locally.
+- **Automatic** — `UserStatusService` (`toju-app/src/app/core/services/user-status.service.ts`) listens to Electron `powerMonitor` events (suspend, resume, lock, unlock) when running on desktop, or falls back to a 15-minute idle timer in the browser. It emits `status_update` via `RealtimeSessionFacade.sendRawMessage`.
+
+Manual overrides automatic for the session — explicit user input prevents the idle detector from overwriting `away` back to `online`.
+
+Server-side, `handleStatusUpdate` (`handler.ts:337`) validates the value against `VALID_STATUSES`, mutates `user.status`, and broadcasts the event to every server the user is in.
+
+---
+
+## Game activity
+
+`GameActivityService` (`toju-app/src/app/domains/game-activity/application/game-activity.service.ts`) is the renderer-side scanner:
+
+- Polls every 5–60 seconds (default 10 s).
+- Asks Electron for active and running process names via the IPC bridge (`getActiveGameCandidate`, `getRunningProcessNames` — see [ipc-bridge](./ipc-bridge.md)).
+- Resolves candidates to RAWG metadata via `POST /games/match` on the signaling server.
+- Broadcasts the result to peers as a `game-activity` chat event on the WebRTC chat data channel.
+
+The signaling server is **not** in the broadcast path for game activity — it only matches process names to RAWG entries. Once a peer connection exists, the game-activity envelope flows P2P.
+
+---
+
+## Business rules and invariants
+
+- The signaling server **forwards** presence but **never persists** it. Server restart = full reset; clients rederive via `server_users`.
+- Presence is **per-connection**; identity is reconstructed at broadcast time by collapsing connections that share `oderId`.
+- `user_joined` is emitted **only** on a new-identity membership; `user_left` **only** on full release of a server by an `oderId`.
+- `identify` is the canonical channel for profile-metadata updates. Profile-bearing `identify` envelopes rebroadcast `user_joined` only if at least one of `displayName` / `description` / `profileUpdatedAt` actually changed.
+- **Voice room membership is never server-tracked.** It is client-derived from `voice_state` broadcasts.
+- Manual status overrides automatic status for the session.
+- Reconnection resets all presence state; the joiner's first `server_users` snapshot is authoritative for that server.
+- Dead connections are reaped after 45 s of silence.
+
+---
+
+## Technical implementation
+
+### Server
+- WebSocket envelope handlers — `server/src/websocket/handler.ts`: `handleStatusUpdate` (line 337), `handleIdentify` (112), `handleJoinServer` (155), `handleLeaveServer` (224).
+- Broadcast / dedup — `server/src/websocket/broadcast.ts`: `broadcastToServer`, `sendServerUsers`.
+- Sweep / heartbeat — `server/src/websocket/index.ts` (`PING_INTERVAL_MS`, `PONG_TIMEOUT_MS`).
+- `ConnectedUser` row — `server/src/websocket/types.ts`.
+- Game-match HTTP — `server/src/routes/games.ts`, `server/src/services/game-matching.service.ts`.
+
+### Product client
+- Status writer — `toju-app/src/app/core/services/user-status.service.ts`.
+- Game-activity scanner — `toju-app/src/app/domains/game-activity/application/game-activity.service.ts`.
+- Voice presence — `toju-app/src/app/domains/voice-session/` (see [voice-signaling](./voice-signaling.md)).
+- Presence sync into NgRx — `toju-app/src/app/store/rooms/room-state-sync.effects.ts`, `room-members-sync.effects.ts`.
+- Presence reducers — `toju-app/src/app/store/users/`.
+
+### Electron
+- Process inspection IPC — `electron/preload.ts` (`getActiveGameCandidate`, `getRunningProcessNames`). See [ipc-bridge](./ipc-bridge.md).
+- `powerMonitor` events — wired in `electron/` and surfaced to renderer via IPC events.
+
+---
+
+## Testing
+
+- `server/src/websocket/handler-status.spec.ts` — status validation and broadcast.
+- `toju-app/src/app/store/users/users-status.reducer.spec.ts` — status reducer.
+- `toju-app/src/app/store/rooms/rooms-helpers-status.spec.ts` — room-level status aggregation.
+- `toju-app/src/app/domains/game-activity/application/game-activity.service.spec.ts` — scanner + RAWG match.
+- `toju-app/src/app/infrastructure/realtime/signaling/signaling-message-handler.spec.ts` — presence-relevant handling.
+- TODO: no spec for multi-device `user_left` suppression.
+- TODO: no spec for `identify`-triggered profile rebroadcast.
+- TODO: no spec for pong-timeout reaping.
+- TODO: no spec for client `offline → disconnected` rendering mapping.
+- TODO: no E2E for cross-device presence dedup.
+
+---
+
+## Security considerations
+
+- The `identify` claim is **not verified** — see [authentication](./authentication.md). Presence trust is inherited from that gap: a connection can claim any `oderId` and be broadcast as that user.
+- Game-activity scanning surfaces local process names to the signaling server (via `/games/match`) and to peers (via the data channel). This is privacy-sensitive — there is no per-user opt-out documented today; if a user does not want process names leaving their machine, they need a `closeToTraySetting`-style toggle. TODO: confirm the current opt-out path.
+- Status is self-asserted. `busy` does not enforce anything; it is purely a presence hint.
+
+---
+
+## Performance considerations
+
+- `broadcastToServer` is O(N) per envelope, where N is the number of connections subscribed to the server. There is no fan-out batching.
+- The 30 s ping cadence keeps idle connections cheap; the 45 s reaper keeps `connectedUsers` from leaking on TCP half-closes.
+- `GameActivityService` defaults to a 10 s poll; user-configurable, clamped 5–60 s.
+- `identify` rebroadcast is O(serversJoinedByThisConnection); negligible in practice.
+
+---
+
+## Known issues and limitations
+
+- No server-side voice-room membership model means the only way to enumerate a room's occupants is to replay `voice_state` events client-side.
+- Status idle detection in the browser falls back to a coarse 15-minute timer (no platform idle API).
+- Game-activity opt-out and granularity (per-game blocklist) are not centrally documented; the `gameIgnoreList` setting lives in `electron/desktop-settings.ts` but is undocumented in renderer UX terms — TODO.
+
+---
+
+## Related features
+
+- **[websocket-envelopes](./websocket-envelopes.md)** — owns the wire shape of every envelope this area uses.
+- **[voice-signaling](./voice-signaling.md)** — consumes the `voice_state` broadcasts to drive RTC mesh.
+- **[authentication](./authentication.md)** — owns the `identify` handshake and the heartbeat / reaping policy.
+- **[access-control](./access-control.md)** — gates `join_server`, which precedes any presence broadcast for that server.
+- **[ipc-bridge](./ipc-bridge.md)** — exposes `powerMonitor` events and process-list inspection used by status and game-activity.
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-05-25 | Initial documentation |

agents-docs/features/server-directory.md

@@ -0,0 +1,174 @@
+# Server Directory
+
+> **Area:** server-directory
+> **Status:** Active
+> **Last updated:** 2026-05-25
+
+## Overview
+
+The Server Directory is the public REST surface that lists joinable Toju chat servers, manages invites and join requests, gates membership (passwords, bans, ownership), and exposes moderation actions (kick / ban / unban). It is the only feature where the signaling server holds non-ephemeral, multi-user state: the persistent catalog of servers, their access rules, their memberships, and their pending join requests. The renderer's `server-directory` domain consumes this surface to render the "find a server" experience and to drive the join flow that eventually opens a WebSocket (see [websocket-envelopes](./websocket-envelopes.md)).
+
+## Responsibilities
+
+- Persist the catalog of servers, their access policy (public/private, password, max users), and ownership.
+- Mint invites and accept invite redemptions.
+- Track join requests on private servers and route owner decisions back to the requester.
+- Track memberships and bans; enforce them on join attempts.
+- Provide moderation primitives: kick, ban, unban — gated by role/owner permissions.
+- Emit user-targeted notifications when a join request changes state.
+
+This area does **not** own:
+
+- Realtime presence, chat, or voice — those flow over the WebSocket once a user has joined (see [websocket-envelopes](./websocket-envelopes.md), [voice-signaling](./voice-signaling.md)).
+- Per-channel permissions logic (lives in `server/src/services/server-permissions.service.ts` and is consumed by this area, but is reused beyond it).
+
+## Key concepts
+
+- **Server** — a joinable chat server. Persisted as `ServerEntity` (`servers` table).
+- **Public / private** — `isPrivate` flag. Public servers appear in directory listings; private servers do not.
+- **Invite** — an opaque token (`ServerInviteEntity`) that grants short-lived access to a specific server. Expires after `SERVER_INVITE_EXPIRY_MS` (10 days).
+- **Join request** — a pending request on a private server (`JoinRequestEntity`), `pending → approved | denied`.
+- **Membership** — a `ServerMembershipEntity` row, indexed by `serverId` + `userId`.
+- **Ban** — a `ServerBanEntity` row, optionally `expiresAt`. Auto-pruned on the next join attempt for the banned user.
+- **Heartbeat** — periodic `POST /:id/heartbeat` from the server owner's client that updates `lastSeen` and `currentUsers` on the directory entry.
+
+---
+
+## API Endpoints
+
+All HTTP routes; no auth header — caller identity is supplied per-request in the body (`ownerId`, `actorUserId`, `userId`, `requesterUserId`). Identity is whatever the client claims; authorization is enforced against persisted state. Request body validation is **manual / defensive** (no zod or class-validator).
+
+### `server/src/routes/servers.ts`
+
+| Method | Path | Purpose | Auth |
+|--------|------|---------|------|
+| `GET` | `/` | List public servers. Query: `q`, `tags`, `limit`, `offset`. | None |
+| `POST` | `/` | Create a server. Required body: `name`, `ownerId`, `ownerPublicKey`. | Self-asserted |
+| `GET` | `/:id` | Fetch a single server. 404 if missing. | None |
+| `PUT` | `/:id` | Update a server. Required body: `currentOwnerId`. Permission check via `canManageServerUpdate`. | Owner / role |
+| `POST` | `/:id/join` | Join a server. Required body: `userId`. Optional: `password`, `inviteId`. Returns `signalingUrl`. | Self-asserted + access rules |
+| `POST` | `/:id/invites` | Create an invite. Required body: `requesterUserId`. Delegates to `createServerInvite`. | Role permission |
+| `POST` | `/:id/moderation/kick` | Kick a user. Required: `actorUserId`, `targetUserId`. Permission: `canModerateServerMember`. | Role permission |
+| `POST` | `/:id/moderation/ban` | Ban a user. Required: `actorUserId`, `targetUserId`. Optional: `banId`, `reason`, `expiresAt`. | Role permission |
+| `POST` | `/:id/moderation/unban` | Unban a user. Required: `actorUserId`. Permission: `manageBans`. | Role permission |
+| `POST` | `/:id/leave` | Leave a server. Required body: `userId`. | Self-asserted |
+| `POST` | `/:id/heartbeat` | Update `lastSeen` and `currentUsers`. Optional body: `currentUsers`. | None (TODO: confirm) |
+| `DELETE` | `/:id` | Delete a server. Required body: `ownerId` (must match `server.ownerId`). | Owner |
+| `GET` | `/:id/requests` | List pending join requests. Query: `ownerId`. | Owner |
+
+### `server/src/routes/invites.ts`
+
+- `GET /invites/:id` (API) — fetch invite metadata; `404` for expired or unknown invite.
+- `GET /invites/:id` (page router) — server-rendered HTML preview of the invite (server info, owner, expiry); renders an offline state when the server is unreachable.
+
+### `server/src/routes/join-requests.ts`
+
+- `PUT /requests/:id` — update join-request status. Body: `ownerId`, `status`. Permission: `manageServer`. On success, calls `notifyUser` (WebSocket fan-out, see below).
+
+### Standard error codes
+
+`SERVER_NOT_FOUND`, `MISSING_USER`, `NOT_AUTHORIZED`, `BANNED`, `PASSWORD_REQUIRED`, `INVITE_EXPIRED`, plus 400 for missing required fields.
+
+---
+
+## CQRS handlers
+
+`server/src/cqrs/` backs every mutation; routes are thin adapters around CQRS dispatch.
+
+**Queries** (`server/src/cqrs/queries/handlers/`):
+
+- `getAllPublicServers` — filtered by `isPrivate = 0`, loads relations.
+- `getServerById`
+- `getJoinRequestById`
+- `getPendingRequestsForServer`
+
+**Commands** (`server/src/cqrs/commands/handlers/`):
+
+- `upsertServer` — also calls `replaceServerRelations` to sync `tags`, `channels`, `roles`, `roleAssignments`, `channelPermissions` atomically.
+- `deleteServer`
+- `createJoinRequest`
+- `updateJoinRequestStatus` — emits a `notifyUser` event so the requesting user's client learns the outcome over WebSocket.
+
+All handlers run inside TypeORM transactions where multi-table changes are involved.
+
+---
+
+## Persistence
+
+### Entities (`server/src/entities/`)
+
+- `ServerEntity` (table `servers`) — `id`, `name`, `description`, `ownerId`, `ownerPublicKey`, `passwordHash`, `isPrivate`, `maxUsers`, `currentUsers`, `icon`, `iconUpdatedAt`, `slowModeInterval`, `createdAt`, `lastSeen`.
+- `ServerInviteEntity` (`server_invites`) — `id`, `serverId` (indexed), `createdBy`, `createdByDisplayName`, `createdAt`, `expiresAt` (indexed).
+- `JoinRequestEntity` (`join_requests`) — `id`, `serverId` (indexed), `userId`, `userPublicKey`, `displayName`, `status` (default `pending`), `createdAt`.
+- `ServerMembershipEntity` (`server_memberships`) — `id`, `serverId` (indexed), `userId` (indexed), `joinedAt`, `lastAccessAt`.
+- `ServerBanEntity` (`server_bans`) — `id`, `serverId` (indexed), `userId` (indexed), `bannedBy`, `displayName`, `reason`, `expiresAt` (nullable), `createdAt`.
+
+Related (referenced by `replaceServerRelations`): `ServerChannelEntity`, `ServerRoleEntity`, `ServerUserRoleEntity`, `ServerTagEntity`, `ServerChannelPermissionEntity`.
+
+### Migrations (`server/src/migrations/`)
+
+- `1000000000000-InitialSchema.ts` — `servers`, `users`.
+- `1000000000001-ServerAccessControl.ts` — adds `passwordHash` to `servers`; creates `server_memberships`, `server_invites`, `server_bans` with indices.
+- `1000000000002-ServerChannels.ts` — `server_channels`.
+- `1000000000005-ServerRoleAccessControl.ts` — role/permission tables.
+- TODO: locate the migration that created `join_requests` (not obvious from filenames; likely folded into an earlier migration).
+
+---
+
+## Renderer side
+
+`toju-app/src/app/domains/server-directory/`:
+
+- **API client**: `infrastructure/services/server-directory-api.service.ts` — `ServerDirectoryApiService` exposes `searchServers`, `getServers`, `getServer`, `findServerAcrossActiveEndpoints`, `registerServer`, `updateServer`, `requestJoin`, `createInvite`, `getInvite`, `kickServerMember`, `banServerMember`, `unbanServerMember`, `notifyLeave`, `sendHeartbeat`. Defensive coercion (`getNumberValue` / `getStringValue` / `getBooleanValue`) is used instead of schema validation.
+- **State**: signal-based via `ServerEndpointStateService` (servers, active server) — not NgRx for this slice.
+- **Facade**: `application/services/server-directory.service.ts` plus `application/facades/`.
+- **Multi-endpoint awareness**: Toju supports several federated signaling endpoints; `findServerAcrossActiveEndpoints` queries each and merges results.
+
+---
+
+## Business rules
+
+- **Public-only listing**: `GET /` only returns servers with `isPrivate = 0`. Private servers must be reached by ID + invite.
+- **Owner immutability**: only `currentOwnerId` matching `server.ownerId` may update; only `ownerId` matching `server.ownerId` may delete.
+- **Join order of checks** (on `POST /:id/join`): existence → ban check (auto-prune expired bans) → password check (if `passwordHash`) → invite check (if private and no invite) → membership upsert → return `signalingUrl`.
+- **Invite expiry**: 10 days (`SERVER_INVITE_EXPIRY_MS = 10 * 24 * 60 * 60 * 1000`). Expired invites are pruned on access via `pruneExpiredServerAccessArtifacts()`.
+- **Ban expiry**: optional `expiresAt`; auto-deleted on next join attempt for that user.
+- **Join request notifications**: on `PUT /requests/:id`, after CQRS dispatch, `notifyUser` pushes the new status over WebSocket to any open connection for `userPublicKey` / `userId`.
+
+## Security considerations
+
+- **No authentication header.** All identity is self-asserted in the request body. Authorization is enforced by checking the claimed identity against persisted role/owner state.
+- **Password storage**: `passwordHash` only; never the cleartext. TODO: confirm the hashing algorithm (likely bcrypt / scrypt — verify in `server/src/services/`).
+- **SSRF**: routes in this area do not fetch user-supplied URLs, so the SSRF guard does not apply here (it applies to link-metadata, klipy, proxy).
+- **No rate limiting** on directory or moderation routes — TODO: add brute-force protection on `POST /:id/join` for password attempts.
+- **No CSRF** (REST + JSON body, no cookies in scope), but spam protection on `POST /` (server creation) is also TODO.
+
+## Configuration
+
+- `SERVER_INVITE_EXPIRY_MS` — currently hardcoded at 10 days. Not exposed via `data/variables.json`.
+- Per-server `maxUsers`, `slowModeInterval`, `isPrivate`, `passwordHash` are operator-configurable via `PUT /:id`.
+
+## Testing
+
+- **Server-side**: no direct route specs for `servers.ts`, `invites.ts`, `join-requests.ts`. WebSocket-side handlers (`handler-status.spec.ts`, `handler-plugin.spec.ts`) cover adjacent concerns.
+- **Renderer-side**: `application/services/server-endpoint-state.service.spec.ts`.
+- **E2E**: TODO — verify whether the Playwright suite covers join / invite / moderation end-to-end.
+- **Gap**: routes that mutate persistent state and accept self-asserted identity should ideally have integration tests against a real DB.
+
+## Known issues and limitations
+
+- **OpenAPI coverage is incomplete.** `server/src/routes/openapi-docs.ts` currently documents plugin-support endpoints only; server-directory endpoints are not listed.
+- **No structured request validation library.** Inline manual checks are error-prone; consider zod once the team is ready.
+- **No rate limiting / spam protection** on server creation or join attempts.
+- **`join_requests` migration is undocumented** (file not located by inspection); confirm during the next schema change.
+
+## Related features
+
+- **[websocket-envelopes](./websocket-envelopes.md)** — `join_server` envelope re-uses this area's access rules via `authorizeWebSocketJoin`. `notifyUser` fan-out for join-request decisions is delivered over the same WebSocket.
+- **[plugin-system](./plugin-system.md)** — `join_server` responses include the joined server's `PluginRequirementsSnapshot`.
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-05-25 | Initial documentation |

agents-docs/features/voice-signaling.md

@@ -0,0 +1,177 @@
+# Voice & WebRTC Signaling
+
+> **Area:** voice-signaling
+> **Status:** Active
+> **Last updated:** 2026-05-25
+
+## Overview
+
+Voice and screen-share in Toju are pure WebRTC mesh: peers establish RTCPeerConnections directly, while the signaling server only forwards SDP and ICE messages. This area covers the end-to-end flow — envelope routing, peer election, RTCPeerConnection lifecycle, RNNoise denoising, and the relationships between the three product-client domains involved: `voice-session`, `voice-connection`, and `direct-call`. Screen-share rides on the same peer connection; its UI orchestration is its own domain but the signaling path is shared.
+
+## Responsibilities
+
+- Negotiate WebRTC sessions between peers using `offer` / `answer` / `ice_candidate` envelopes forwarded by the signaling server.
+- Elect an initiator deterministically when multiple peers arrive simultaneously, with a non-initiator fallback timer.
+- Maintain the local audio pipeline: mic capture → optional RNNoise denoising → RTCPeerConnection sender.
+- Track per-peer playback gain, mute, deafen, and speaking-activity state on the receive side.
+- Mirror voice presence (`voice_state`) and direct-call signalling (`direct-call`) to other peers via the WebSocket.
+
+This area does **not** own:
+
+- The WebSocket envelope shape (see [websocket-envelopes](./websocket-envelopes.md)).
+- Screen-share UI orchestration (its own domain at `toju-app/src/app/domains/screen-share/`); only the peer connection plumbing is shared.
+- Persistent user settings beyond `voiceSettingsStorage` (audio device IDs, volumes, bitrate, latency profile, noise-reduction toggle, persisted to localStorage).
+
+## Key concepts
+
+- **Mesh** — every participant holds an `RTCPeerConnection` per other participant. No SFU / MCU.
+- **Voice session** — high-level "user is currently in voice room X" state. Owned by `voice-session` domain.
+- **Voice connection** — low-level transport/peer concerns: speaking detection, per-peer gain, mute / deafen state. Owned by `voice-connection` domain.
+- **Direct call** — 1:1 voice/video call with an optional group-upgrade path. Owned by `direct-call` domain.
+- **Initiator** — the peer responsible for sending the first `offer`. Elected first-peer-wins; non-initiators wait `NON_INITIATOR_GIVE_UP_MS` (≈5 s) before generating their own offer.
+- **Data channel** — `chat`-labelled data channel established alongside each peer connection for P2P chat fallback and direct-message delivery.
+- **Noise suppressor worklet** — RNNoise WASM running in an `AudioWorkletNode` (`NoiseSuppressorWorklet`), loaded from `rnnoise-worklet.js` at the app root.
+
+---
+
+## Signaling envelopes (consumed)
+
+Defined in [websocket-envelopes](./websocket-envelopes.md). Voice-relevant types:
+
+- `offer`, `answer`, `ice_candidate` — forwarded by the server to `targetUserId` without inspection.
+- `direct-call` — forwarded; payload carries call-scoped events (ring, participant join/leave, call end).
+- `voice_state` — broadcast to a server. Payload includes `roomId`, `voiceGateway`, mute/deafen flags.
+- `server_users` — full peer roster on join; seeds the initial offer fan-out.
+- `user_joined` — schedules a fallback offer after a grace delay (`USER_JOINED_FALLBACK_OFFER_DELAY_MS`, ≈1 s).
+- `user_left` — peer teardown, with special handling that preserves peers still under an active voice session.
+- `connected` / `access_denied` — connection lifecycle (server bootstrap and authorization).
+
+The server is **purely signaling**: it does not track which `oderId` is in which voice room. Voice membership is derived client-side from the `voice_state` broadcasts observed on the server.
+
+---
+
+## Session establishment flow
+
+A new participant joining a voice room produces this exchange (initiator perspective; symmetrical when both arrive at once):
+
+1. Local user clicks "Join voice" → `VoiceSessionFacade.startSession()` populates the session model and asks `voice-connection` to ready peer transport.
+2. Server broadcasts `user_joined` to existing peers.
+3. Each existing peer evaluates: am I the elected initiator for the (me, new-peer) pair? If yes, the peer-connection manager calls `doCreateAndSendOffer()`.
+4. Initiator constructs `new RTCPeerConnection({ iceServers })` (`infrastructure/realtime/peer-connection-manager/.../create-peer-connection.ts`), adds local tracks, creates the data channel `chat`, generates an SDP offer, and sends it via the signaling transport.
+5. Responder receives `offer` → `doHandleOffer()` sets remote description, generates SDP answer, sends `answer`.
+6. Initiator receives `answer` → `doHandleAnswer()` sets remote description.
+7. Both sides emit `ice_candidate` as they gather candidates via `onicecandidate`.
+8. `iceConnectionState` reaches `connected` / `completed` → media flows.
+9. Either side may open the `chat` data channel for P2P text payloads (direct messages, etc.).
+
+If the elected initiator never sends an offer within `NON_INITIATOR_GIVE_UP_MS`, the non-initiator promotes itself and initiates instead — preserves liveness across asymmetric drop-outs.
+
+`user_left` is treated carefully: the `signaling-message-handler.spec.ts` covers the case where a peer is still required by an active voice session and must not be torn down, even if other parts of the system think the peer has disconnected.
+
+---
+
+## Domain responsibilities
+
+### `voice-session` (`toju-app/src/app/domains/voice-session/`)
+
+- `VoiceSessionFacade` (`application/facades/voice-session.facade.ts`) — owns the active session metadata (`serverId`, `roomId`, `participantIds`); drives a `showFloatingControls` signal when the user navigates away from the room.
+- `VoiceWorkspaceService` (`application/services/voice-workspace.service.ts`) — UI state for the workspace (hidden / expanded / minimized), focused stream ID, mini-window position.
+- `voiceSettingsStorage` (`infrastructure/util/voice-settings-storage.util.ts`) — localStorage persistence: input/output device IDs, output volume (0–100), bitrate (32–256 kbps), latency profile (`low | balanced | high`), noise-reduction toggle.
+- Joining a new voice target first calls `endSession()` so transitions cannot leak peer connections.
+
+### `voice-connection` (`toju-app/src/app/domains/voice-connection/`)
+
+Bridges the application layer to the low-level WebRTC infrastructure under `toju-app/src/app/infrastructure/realtime/`.
+
+- **`VoiceActivityService`** — RMS-based speaking detection via `AnalyserNode` (fftSize 256, RMS ≥ 0.015, 8-frame grace period).
+- **`VoicePlaybackService`** — per-peer `GainNode` chains (0–200% range), localStorage-persisted; deafen sets all gains to 0.
+- **`VoiceConnectionFacade`** — exposes signals like `isVoiceConnected`, `isMuted`; methods like `toggleMute()`, `toggleNoiseReduction()`, `setOutputVolume()`.
+
+Per the domain README, voice-connection does **not** own RTCPeerConnection construction or signaling — those live in `infrastructure/realtime/peer-connection-manager`.
+
+### `direct-call` (`toju-app/src/app/domains/direct-call/`)
+
+- Initiator flow (`DirectCallService.startCall()`): create/reuse the 1:1 DM, start a call-scoped voice session, send a `direct-call` "ring" envelope via `PeerDeliveryService`.
+- Recipient flow: store incoming session, ring `assets/audio/call.wav` (unless DND), show in-app modal + desktop notification.
+- Group upgrade: adding a third participant spawns a new group conversation; the active call swaps its chat panel to the new conversation but original DM history is preserved.
+- Invariant: incoming `direct-call` events are ignored unless the local user is in `participantIds`.
+
+### Screen share (`toju-app/src/app/domains/screen-share/`)
+
+- Adds dedicated `MediaStreamTrack` senders to the existing peer connection (does not open a new one).
+- Request / response model: a receiver sends `screen-share-request`; the sender attaches the share track; `screen-share-stop` tears it down.
+- Quality presets: `low` / `balanced` / `high` (resolution + FPS).
+- On Electron, `ScreenShareSourcePickerService` drives a Promise-based picker over `getSources` (see [ipc-bridge](./ipc-bridge.md)).
+
+---
+
+## RNNoise pipeline
+
+Manager: `infrastructure/realtime/media/noise-reduction.manager.ts`.
+
+```
+Raw mic → MediaStreamAudioSourceNode → NoiseSuppressorWorklet (AudioWorkletNode) → MediaStreamAudioDestinationNode → clean stream → RTCPeerConnection sender
+```
+
+- AudioContext at 48 kHz.
+- Worklet loaded from `rnnoise-worklet.js` (built from `@timephy/rnnoise-wasm`, output written to `toju-app/public/`).
+- If worklet load fails, the raw stream is passed through unchanged.
+- Mute takes priority — when muted, noise reduction is also disabled.
+
+## Technical implementation
+
+- **Envelope types**: see [websocket-envelopes](./websocket-envelopes.md).
+- **Signaling adapter (renderer)**: `toju-app/src/app/infrastructure/realtime/signaling/signaling-message-handler.ts` (and `signaling-transport-handler.ts`).
+- **Peer-connection manager**: `toju-app/src/app/infrastructure/realtime/peer-connection-manager/` — `create-peer-connection.ts`, recovery (grace timers, reconnect), data-channel plumbing.
+- **Voice settings**: `domains/voice-session/infrastructure/util/voice-settings-storage.util.ts`.
+- **Noise reduction**: `infrastructure/realtime/media/noise-reduction.manager.ts`.
+- **Worklet asset**: `toju-app/public/rnnoise-worklet.js`.
+- **Server side**: signaling only — `server/src/websocket/handler.ts::forwardRtcMessage`.
+
+## Invariants
+
+- The server forwards `offer` / `answer` / `ice_candidate` / `direct-call` envelopes opaquely and never persists media or call state.
+- Switching voice rooms always tears down the prior session before starting the new one.
+- Mute overrides noise reduction (the manager disables the worklet path when muted).
+- Direct-call events with the local user absent from `participantIds` are ignored.
+
+## Testing
+
+- `toju-app/src/app/infrastructure/realtime/signaling/signaling-message-handler.spec.ts` — `user_left` peer preservation under active voice.
+- `toju-app/src/app/infrastructure/realtime/peer-connection-manager/recovery/peer-recovery.spec.ts` — reconnect, grace timers, exponential backoff.
+- `toju-app/src/app/infrastructure/realtime/peer-connection-manager/messaging/data-channel.spec.ts`.
+- `toju-app/src/app/domains/direct-call/application/services/direct-call.service.spec.ts`.
+- E2E: `e2e/tests/voice/multi-signal-eight-user-voice.spec.ts`, `e2e/tests/voice/direct-call.spec.ts` (verify exact filenames in the suite — TODO).
+
+## Security considerations
+
+- WebRTC bypasses the server entirely once connected — peer IPs may be exposed to other participants via ICE candidates. Standard WebRTC privacy caveat.
+- Signaling envelopes are forwarded without verifying that source and target share a server — TODO: confirm whether `forwardRtcMessage` enforces membership.
+- The data channel `chat` carries P2P text payloads; integrity / authentication of those payloads is owned by the chat/direct-message domains, not by this area.
+- RNNoise runs entirely client-side; mic audio never leaves the local AudioContext until it enters the encrypted RTCPeerConnection.
+
+## Performance considerations
+
+- Mesh topology — N×(N-1)/2 peer connections per voice room. Practical ceiling is bound by client CPU and uplink; no documented soft cap.
+- Bitrate is client-controlled (32–256 kbps); no server-enforced QoS.
+- Voice activity detection runs at fftSize 256 with an 8-frame grace period — chosen to minimise CPU while staying responsive to natural speech.
+- The signaling server's only cost is envelope forwarding (O(1) per envelope).
+
+## Known issues and limitations
+
+- **No SFU / MCU.** Large rooms scale linearly with participant count on each client.
+- **No recording or server-side mixing** for voice or screen.
+- **Bitrate is not enforced server-side** — adversarial clients could ignore the suggested range.
+- **No documented call-quality telemetry pipeline.**
+
+## Related features
+
+- **[websocket-envelopes](./websocket-envelopes.md)** — owns the wire types this area consumes.
+- **[ipc-bridge](./ipc-bridge.md)** — `getSources` and the Linux audio-routing methods are used by screen-share.
+- **[plugin-system](./plugin-system.md)** — plugins may participate as observers via `voice_state` broadcasts (subject to capability grants); no direct call control surface today.
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-05-25 | Initial documentation |

agents-docs/features/websocket-envelopes.md

@@ -0,0 +1,164 @@
+# WebSocket Envelopes
+
+> **Area:** websocket-envelopes
+> **Status:** Active
+> **Last updated:** 2026-05-25
+
+## Overview
+
+The WebSocket envelope contract is the realtime wire-format boundary between the signaling server and every connected client. Every realtime concern in Toju — presence, chat broadcasts, typing indicators, voice state, WebRTC offer/answer/ICE forwarding, direct messages, server icon P2P sync, and plugin events — travels as a typed envelope over a single WebSocket connection per client. Drift between the server definition and the client-side mirror is treated as a wire-protocol break.
+
+## Responsibilities
+
+- Define the canonical shape of every realtime message exchanged between `toju-app` (renderer) and `server`.
+- Route incoming envelopes to a single dedicated handler on the server.
+- Provide a stable identity for the connection (`connectionId`, `oderId`, `connectionScope`) and a lazy authorization model on `join_server`.
+- Forward peer-targeted envelopes (WebRTC signaling, direct messages, server-icon peer transfers) without inspecting their payload.
+
+This area does **not** own:
+
+- The HTTP/REST surface (see [server-directory](./server-directory.md)).
+- WebRTC media transport or session orchestration (see [voice-signaling](./voice-signaling.md) — the envelope contract is shared, but session lifecycle lives there).
+- Persistence (server entities are owned by the server subdomain; the envelope is the contract, not the entity).
+
+## Key concepts
+
+- **Envelope** — a `{ type, ...payload }` message routed by `type`. Defined in `server/src/websocket/types.ts`.
+- **ConnectedUser** — server-side state record per WebSocket: `connectionId`, `oderId`, `connectionScope`, `displayName`, `description`, `status`, `serverIds`, `lastPong`.
+- **`oderId`** — opaque user identity. Set by the client in `identify`; falls back to a UUID if absent. Multiple connections may share an `oderId` (e.g. multiple devices) — broadcasts are deduplicated per `oderId`.
+- **`connectionScope`** — typically the signal URL; disambiguates several connections from the same `oderId`.
+- **Handler** — server-side function mapped to one envelope `type` in `server/src/websocket/handler.ts`.
+- **Forwarded envelope** — peer-to-peer envelopes the server relays untouched to a specific `targetUserId` (offer / answer / ice_candidate / direct-call / direct-message family / server_icon_peer_*).
+
+---
+
+## Envelope catalogue
+
+Defined on the server in `server/src/websocket/types.ts` and dispatched by the switch in `server/src/websocket/handler.ts`. Groups below match the dispatch shape, not a literal grouping in code.
+
+### Connection & presence
+
+- `identify` — client → server. Profile + `connectionScope`. Required before any other envelope is meaningful.
+- `connected` — server → client. Sent automatically on connect: `{ connectionId, serverTime }`.
+- `keepalive` — client ↔ server. Resets `lastPong`. See lifecycle below.
+- `status_update` — broadcast presence: `online | away | busy | offline`.
+- `access_denied` — server → client when `join_server` authorization fails.
+
+### Server membership
+
+- `join_server` — client requests membership for a `serverId`. Authorization checked via `authorizeWebSocketJoin` (`server/src/services/server-access.service.ts`). Response includes `server_users` + `plugin_requirements`.
+- `view_server` — client marks a server as viewed (fetch roster + plugin requirements without joining).
+- `leave_server` — client leaves; broadcasts `user_left` to remaining members.
+- `server_users` — server → client. Full peer roster for a joined server (used as the seed for P2P offers).
+- `user_joined` / `user_left` — broadcast presence changes.
+
+### Chat & typing
+
+- `chat_message` — broadcast to a server. Payload: `{ message, senderId, senderName, timestamp }`.
+- `typing` — broadcast: `{ isTyping, channelId, oderId, displayName }`.
+
+### Voice presence
+
+- `voice_state` — broadcast user voice state (mute/deafen/room metadata). Pure signaling — the server does not store voice room membership.
+
+### WebRTC signaling (forwarded)
+
+- `offer` / `answer` / `ice_candidate` — forwarded to `targetUserId` via `forwardRtcMessage()`.
+- `direct-call` — forwarded; semantic call lifecycle lives in the `direct-call` product-client domain.
+
+### Direct messages (forwarded)
+
+- `direct-message`, `direct-message-status`, `direct-message-mutation`, `direct-message-sync`, `direct-message-sync-request` — forwarded to `targetUserId`.
+
+### Server icon P2P sync
+
+- `server_icon_available` — client announces it has an icon at version `iconUpdatedAt`.
+- `server_icon_sync_request` — client asks the server which peers have a newer icon.
+- `server_icon_sync_peers` — server → client. Peer list offering newer icons.
+- `server_icon_peer_request` / `server_icon_peer_data` — P2P transfer, forwarded.
+
+### Plugins
+
+- `plugin_event` — validated against the plugin's registered event schema (see [plugin-system](./plugin-system.md) and `server/src/services/plugin-support.service.ts`), then broadcast within the server scope. Payload: `{ serverId, pluginId, eventName, payload, sourcePluginUserId, sourceUserId, emittedAt }`.
+
+---
+
+## Connection lifecycle
+
+Implemented in `server/src/websocket/index.ts`.
+
+1. Client opens WebSocket → server generates `connectionId` (UUID), creates the `ConnectedUser` record, sends `{ type: 'connected', connectionId, serverTime }`.
+2. Client sends `identify` with `oderId`, `displayName`, `connectionScope`, optional `description` / `profileUpdatedAt`. Server normalizes and stores.
+3. Client sends `join_server` (or `view_server`) per server they care about. Each `join_server` is authorized independently.
+4. Heartbeat: server pings every **30 s** (`PING_INTERVAL_MS`). Any incoming message also refreshes `lastPong`. Connections without a pong for **45 s** (`PONG_TIMEOUT_MS`) are terminated.
+5. On close: server emits `user_left` to every server the connection had joined. Broadcasts are **deduplicated by `oderId`**, so multi-device users only generate one departure event per logical identity.
+
+---
+
+## Authentication model
+
+There is no bearer token or signed envelope. Identity is whatever the client claims in `identify`. Authorization is **per-`join_server`**, evaluated by `authorizeWebSocketJoin` against persisted server access rules (private flag, password hash, bans, invite/join-request state). `access_denied` is returned when authorization fails; the connection itself stays open.
+
+---
+
+## Technical implementation
+
+### Server
+
+- **Types**: `server/src/websocket/types.ts` — `WsMessage` (union over `type`), `ConnectedUser`, `ConnectionScope`.
+- **Dispatcher**: `server/src/websocket/handler.ts` — `handleWebSocketMessage(connectionId, message)`. Single switch (~16 dedicated handler functions plus `forwardRtcMessage`).
+- **Lifecycle**: `server/src/websocket/index.ts` — `ws` server, ping/pong, connection registry, dead-connection reaping.
+- **Plugin event validation**: `server/src/services/plugin-support.service.ts` — async `validatePluginEventEnvelope()` (runtime schema check).
+
+### Client (renderer)
+
+- **Shared types**: `toju-app/src/app/shared-kernel/signaling-contracts.ts` — **stale**, only declares a generic `SignalingMessage` and an obsolete `SignalingMessageType` enum. Not the active wire-format definition.
+- **Active envelope shapes** are defined inline as `IncomingSignalingMessage` in `toju-app/src/app/infrastructure/realtime/signaling/signaling-message-handler.ts`.
+- **Constants**: `toju-app/src/app/infrastructure/realtime/realtime.constants.ts` — every envelope `type` string lives here as `SIGNALING_TYPE_*`.
+- **Transport**: `toju-app/src/app/infrastructure/realtime/signaling/signaling-transport-handler.ts` — socket lifecycle, sends `identify`, `join_server`, raw envelopes.
+- **Coordinator**: `toju-app/src/app/infrastructure/realtime/signaling/server-signaling-coordinator.ts` — maps `serverId` to signal URL (Toju supports multiple federated signaling endpoints).
+- **Inbound dispatch**: `signaling-message-handler.ts` — `handleConnectedSignalingMessage`, `handleServerUsersSignalingMessage`, `handleUserJoinedSignalingMessage`, `handleUserLeftSignalingMessage`, `handleOfferSignalingMessage`, `handleAnswerSignalingMessage`, `handleIceCandidateSignalingMessage`, `handleAccessDeniedSignalingMessage`. Domain envelopes (chat/typing/direct-message/etc.) are consumed in the respective product-client domains, not in this central adapter — TODO: enumerate exact subscription points.
+
+### Versioning
+
+No `version` field on envelopes. No `Accept-Version` header. Drift between server and client is enforced only by code review (per `server/CONTEXT.md` invariants).
+
+---
+
+## Testing
+
+- `server/src/websocket/handler-status.spec.ts` — `status_update` broadcast and profile metadata in `user_joined` / `server_users`.
+- `server/src/websocket/handler-plugin.spec.ts` — `plugin_event` validation and broadcast.
+- `toju-app/src/app/infrastructure/realtime/signaling/signaling-message-handler.spec.ts` — inbound handler unit tests (notably `user_left` preserving peers under voice).
+- **TODO**: no round-trip envelope-shape test between server `WsMessage` and client `IncomingSignalingMessage`. Drift can only be caught by E2E or manual review today.
+
+## Security considerations
+
+- No transport-level auth — identity is self-asserted via `identify`. The server trusts `oderId` for routing but checks authorization on every `join_server`.
+- WebRTC signaling envelopes (`offer` / `answer` / `ice_candidate`) are forwarded **without inspection**. The server does not verify that the sender is a member of the same server as the target — TODO: confirm whether `forwardRtcMessage` enforces server-membership before forwarding.
+- `plugin_event` payloads are bounded by the plugin's declared `maxPayloadBytes` (default 64 KB) and validated against the plugin's declared event schema. See [plugin-system](./plugin-system.md).
+- Multi-connection identities: a single `oderId` may have many open sockets. Broadcasts dedupe by `oderId`, but per-connection state (e.g. `voice_state`) does not — TODO: document the cross-connection invariants.
+
+## Performance considerations
+
+- Single WebSocket per client. No fan-out worker; broadcast is in-process via the in-memory connection map.
+- Ping cadence 30 s / pong timeout 45 s. Reaping is per-connection on next tick.
+- TODO: no documented soft cap on connected users per signaling server.
+
+## Known issues and limitations
+
+- **Stale shared-kernel contract.** `toju-app/src/app/shared-kernel/signaling-contracts.ts` does not enumerate the live envelope set; client code uses `IncomingSignalingMessage` in `signaling-message-handler.ts` instead. Update or replace this file when adjacent work touches the wire format.
+- **No envelope versioning.** Any field rename is an immediate break for older clients.
+- **TODO — operator concerns**: rate limits, max-message-size, and backpressure are not documented.
+
+## Related features
+
+- **[voice-signaling](./voice-signaling.md)** — consumes `offer` / `answer` / `ice_candidate` / `voice_state` / `direct-call`.
+- **[plugin-system](./plugin-system.md)** — defines and validates `plugin_event`.
+- **[server-directory](./server-directory.md)** — REST counterpart for server discovery, joining, and moderation; `join_server` envelope authorization reuses the same access rules.
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-05-25 | Initial documentation |

docs-site/CONTEXT.md

@@ -0,0 +1,44 @@
+# Application Documentation (docs-site)
+
+Owns the Docusaurus-based application and plugin-author documentation. The build output (`docs-site/build/`) is bundled into the Electron app and served by the Local API server at runtime, so documentation is available offline inside the desktop client.
+
+> **Format reference:**
+> - **Vocabulary** — bold term, one-sentence definition, aliases to avoid.
+> - **Relationships** — bullets with bold terms and cardinality.
+> - **Boundaries / IO** — what this subdomain exposes and consumes.
+> - **Invariants** — rules that always hold.
+> - **Flagged ambiguities** — terms in dispute with proposed resolutions.
+>
+> See `agents-docs/AGENTS_CONTEXT.md` for the contract. Update in the same turn a trigger fires (see `agents-docs/AGENT_WORKFLOW.md` § CONTEXT.md upkeep).
+
+## Vocabulary
+
+| Term | Definition | Aliases to avoid |
+|------|------------|------------------|
+| **App docs** | End-user-facing documentation for the MetoYou desktop client. | "manual" |
+| **Plugin docs** | Developer-facing reference for the plugin runtime — manifest format, lifecycle hooks, host APIs. Authoritative source for the plugin contract surface. | "API docs" |
+| **Local API server** | The Electron in-process HTTP server that mounts `docs-site/build/` so the renderer can browse docs offline. Defined under `electron/api/`. | "embedded server" |
+
+## Relationships
+
+- **Plugin docs** describe contracts implemented in `toju-app/src/app/shared-kernel/plugin-system.contracts.ts` (renderer side) and `electron/plugin-library.ts` (host side) — keep them in lockstep with code changes.
+- The **build output** at `docs-site/build/` is a deploy artifact for the **electron** Local API server; `npm run build:all` requires `npm run build:docs` to have run.
+- The site is also deployed publicly via `.gitea/workflows/deploy-web-apps.yml` for browsing outside the app.
+
+## Boundaries / IO
+
+- **Exposes:** static Docusaurus bundle at `docs-site/build/`, mounted by Electron's Local API server and also deployed as a public static site.
+- **Consumes:** Markdown sources under `docs-site/docs/`, plus any code-derived references (e.g. OpenAPI documents from `electron/api/openapi.ts`).
+
+## Invariants
+
+- Plugin-contract documentation must match the code; if the manifest schema or lifecycle changes, **plugin docs** and `agents-docs/features/<plugin-doc>.md` both update in the same task.
+- Build artifacts (`docs-site/build/`) are generated, not committed.
+
+## Flagged ambiguities
+
+- _None recorded yet._
+
+---
+
+*Agent-procedural rules (TDD, lint, build) live in `/AGENTS.md`. This file is the bounded-context domain artefact for the documentation site.*

docs-site/docs/developer/dom-structure.md

@@ -8,18 +8,18 @@ This page maps the app routes and important DOM areas. It is useful for plugin a
 
 ## Angular Routes
 
-| Route | Component | Purpose |
-| --- | --- | --- |
-| `/` | Redirect | Redirects to `/search`. |
-| `/login` | `LoginComponent` | User login. |
-| `/register` | `RegisterComponent` | User registration. |
-| `/invite/:inviteId` | `InviteComponent` | Resolve and accept invite links. |
-| `/search` | `ServerSearchComponent` | Search and join servers. |
-| `/room/:roomId` | `ChatRoomComponent` | Main server page with text, voice, members, and plugin panels. |
-| `/dm` | `DmWorkspaceComponent` | Direct-message workspace. |
-| `/dm/:conversationId` | `DmWorkspaceComponent` | A selected direct-message conversation. |
-| `/settings` | `SettingsComponent` | App, voice, server, plugin, desktop, theme, local API settings. |
-| `/plugin-store` | `PluginStoreComponent` | Browse plugin sources and install/update plugins. |
+| Route                        | Component                 | Purpose                                                               |
+| ---------------------------- | ------------------------- | --------------------------------------------------------------------- |
+| `/`                          | Redirect                  | Redirects to `/search`.                                               |
+| `/login`                     | `LoginComponent`          | User login.                                                           |
+| `/register`                  | `RegisterComponent`       | User registration.                                                    |
+| `/invite/:inviteId`          | `InviteComponent`         | Resolve and accept invite links.                                      |
+| `/search`                    | `ServerSearchComponent`   | Search and join servers.                                              |
+| `/room/:roomId`              | `ChatRoomComponent`       | Main server page with text, voice, members, and plugin panels.        |
+| `/dm`                        | `DmWorkspaceComponent`    | Direct-message workspace.                                             |
+| `/dm/:conversationId`        | `DmWorkspaceComponent`    | A selected direct-message conversation.                               |
+| `/settings`                  | `SettingsComponent`       | App, voice, server, plugin, desktop, theme, local API settings.       |
+| `/plugin-store`              | `PluginStoreComponent`    | Browse plugin sources and install/update plugins.                     |
 | `/plugins/:pluginId/:pageId` | `PluginPageHostComponent` | Host for plugin app pages registered with `api.ui.registerAppPage()`. |
 
 ## Page Shell
@@ -46,6 +46,7 @@ The server page is the most important page for plugins.
     <section>Text Channels</section>
     <section>Voice Channels</section>
     <section data-testid="plugin-room-side-panel">
+      <button>View plugins</button>
       <app-plugin-render-host></app-plugin-render-host>
     </section>
     <section>Members</section>
@@ -135,11 +136,11 @@ Prefer plugin APIs over DOM selectors. When direct DOM mounting is necessary, us
 
 Common targets:
 
-| Selector | Area |
-| --- | --- |
-| `body` | Global overlays or modals. |
-| `app-chat-messages` | Main text channel surface. |
-| `app-rooms-side-panel` | Server side panel. |
-| `[data-testid="plugin-room-side-panel"]` | Plugin side-panel area in the server sidebar. |
+| Selector                                 | Area                                                                                                                  |
+| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| `body`                                   | Global overlays or modals.                                                                                            |
+| `app-chat-messages`                      | Main text channel surface.                                                                                            |
+| `app-rooms-side-panel`                   | Server side panel.                                                                                                    |
+| `[data-testid="plugin-room-side-panel"]` | Plugin side-panel area in the server sidebar, including the View plugins trigger for `registerToolbarAction()` tiles. |
 
-Avoid depending on Tailwind utility classes; they are layout details and may change.
+Avoid depending on Tailwind utility classes; they are layout details and may change.

docs-site/docs/developer/llm-plugin-builder-guide.md

@@ -54,12 +54,12 @@ There are three communication boundaries a plugin author must understand:
 1. Signaling plane
    Angular renderer <-> WebSocket signaling server
    Used for identity, joining servers, presence, typing, plugin requirements,
-   server-relayed plugin events, WebRTC offers, answers, and ICE candidates.
+    server-relayed plugin events, WebRTC offers, answers, and ICE candidates.
 
 2. Peer plane
    Angular renderer <-> WebRTC peer connections <-> other clients
-   Used for media and data-channel events: chat messages, message sync,
-   attachments, voice state, screen/camera state, and plugin message bus data.
+    Used for media and data-channel events: chat messages, message sync,
+    attachments, voice state, screen/camera state, and plugin message bus data.
 
 3. Desktop/local plane
    Angular renderer <-> Electron preload bridge <-> Electron main process
@@ -71,18 +71,18 @@ Plugins run only in the renderer. They do not run in Electron main and do not ru
 
 Choose communication APIs like this:
 
-| Need | Use | Notes |
-| --- | --- | --- |
-| Visible normal chat message | `api.messages.send` | Persists locally, updates chat UI, broadcasts peer chat event. |
-| Visible bot-style message | `api.server.registerPluginUser` plus `api.messages.sendAsPluginUser` | Requires `users.manage` and `messages.send`. |
-| Plugin state sync between connected clients | `api.messageBus.publish` and `api.messageBus.subscribe` | P2P data-channel envelope, not a visible chat message. |
-| Plugin state sync plus recent chat snapshot | `api.messageBus.publish` with `includeLatestMessages` | Also needs `messages.read`. |
-| Metadata through signaling server | `api.events.publishServer` and `api.events.subscribeServer` | Event must be declared in manifest. |
-| Low-level peer data | `api.p2p.broadcastData` or `api.p2p.sendData` | Prefer message bus for structured topics/subscriptions. |
-| Local user preferences | `api.clientData` | User-scoped local storage/database. |
-| Local per-server plugin data | `api.serverData` | User-scoped and current-server-scoped local storage/database. |
-| App UI extension | `api.ui.*` | Prefer registered contributions over DOM mounting. |
-| Audio/video/voice effects | `api.media.*` | Browser media APIs and voice facade. |
+| Need                                        | Use                                                                  | Notes                                                          |
+| ------------------------------------------- | -------------------------------------------------------------------- | -------------------------------------------------------------- |
+| Visible normal chat message                 | `api.messages.send`                                                  | Persists locally, updates chat UI, broadcasts peer chat event. |
+| Visible bot-style message                   | `api.server.registerPluginUser` plus `api.messages.sendAsPluginUser` | Requires `users.manage` and `messages.send`.                   |
+| Plugin state sync between connected clients | `api.messageBus.publish` and `api.messageBus.subscribe`              | P2P data-channel envelope, not a visible chat message.         |
+| Plugin state sync plus recent chat snapshot | `api.messageBus.publish` with `includeLatestMessages`                | Also needs `messages.read`.                                    |
+| Metadata through signaling server           | `api.events.publishServer` and `api.events.subscribeServer`          | Event must be declared in manifest.                            |
+| Low-level peer data                         | `api.p2p.broadcastData` or `api.p2p.sendData`                        | Prefer message bus for structured topics/subscriptions.        |
+| Local user preferences                      | `api.clientData`                                                     | User-scoped local storage/database.                            |
+| Local per-server plugin data                | `api.serverData`                                                     | User-scoped and current-server-scoped local storage/database.  |
+| App UI extension                            | `api.ui.*`                                                           | Prefer registered contributions over DOM mounting.             |
+| Audio/video/voice effects                   | `api.media.*`                                                        | Browser media APIs and voice facade.                           |
 
 ## How The App Looks
 
@@ -122,47 +122,51 @@ Main server page shape:
 
 Important routes:
 
-| Route | Purpose |
-| --- | --- |
-| `/search` | Search and join servers. |
-| `/room/:roomId` | Main server workspace with text, voice, members, and plugin panels. |
-| `/dm` and `/dm/:conversationId` | Direct-message workspace. |
-| `/settings` | App, voice, server, plugin, desktop, theme, and local API settings. |
-| `/plugin-store` | Browse and install plugins. |
-| `/plugins/:pluginId/:pageId` | Host for pages registered with `api.ui.registerAppPage`. |
+| Route                           | Purpose                                                             |
+| ------------------------------- | ------------------------------------------------------------------- |
+| `/search`                       | Search and join servers.                                            |
+| `/room/:roomId`                 | Main server workspace with text, voice, members, and plugin panels. |
+| `/dm` and `/dm/:conversationId` | Direct-message workspace.                                           |
+| `/settings`                     | App, voice, server, plugin, desktop, theme, and local API settings. |
+| `/plugin-store`                 | Browse and install plugins.                                         |
+| `/plugins/:pluginId/:pageId`    | Host for pages registered with `api.ui.registerAppPage`.            |
 
 Direct DOM mounting is a last resort. Route-specific targets may not exist when `activate` runs. If `api.ui.mountElement` cannot find the target, it throws `Plugin mount target not found: <selector>` and plugin activation fails.
 
 Stable direct-mount targets when necessary:
 
-| Selector | Area |
-| --- | --- |
-| `body` | Safest global target for overlays, badges, and modals. It exists during activation. |
-| `app-chat-messages` | Main text channel surface. Use only after checking the element exists. |
+| Selector               | Area                                                                                                                  |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| `body`                 | Safest global target for overlays, badges, and modals. It exists during activation.                                   |
+| `app-chat-messages`    | Main text channel surface. Use only after checking the element exists.                                                |
 | `app-rooms-side-panel` | Server side panel. Use only after checking the element exists. Prefer `registerSidePanel` for plugin sidebar content. |
 
 Do not mount directly into `[data-testid="plugin-room-side-panel"]`. That area is owned by the plugin side-panel registry and is rendered only on the server page. For server sidebar UI, use:
 
 ```js
-context.subscriptions.push(api.ui.registerSidePanel('control-panel', {
-  label: 'Control Panel',
-  order: 20,
-  render: () => {
-    const root = document.createElement('section');
-    const button = document.createElement('button');
+context.subscriptions.push(
+  api.ui.registerSidePanel('control-panel', {
+    label: 'Control Panel',
+    order: 20,
+    render: () => {
+      const root = document.createElement('section');
+      const button = document.createElement('button');
 
-    button.type = 'button';
-    button.textContent = 'Run Action';
-    button.addEventListener('click', () => {
-      api.logger.info('Side-panel action clicked');
-    });
+      button.type = 'button';
+      button.textContent = 'Run Action';
+      button.addEventListener('click', () => {
+        api.logger.info('Side-panel action clicked');
+      });
 
-    root.append(button);
-    return root;
-  }
-}));
+      root.append(button);
+      return root;
+    }
+  })
+);
 ```
 
+For small command-style plugin entries, use `api.ui.registerToolbarAction()`. Those actions appear as icon tiles in the server side panel's View plugins menu and receive `source: 'toolbarAction'` in their action context.
+
 Do not depend on Tailwind classes or internal styling classes.
 
 ## Manifest
@@ -300,10 +304,10 @@ Validation rules:
 
 Scope meanings:
 
-| Scope | Meaning |
-| --- | --- |
-| `client` or omitted | Installed globally for this local user/client. |
-| `server` | Installed for a specific chat server as local client plugin plus server requirement metadata. |
+| Scope               | Meaning                                                                                       |
+| ------------------- | --------------------------------------------------------------------------------------------- |
+| `client` or omitted | Installed globally for this local user/client.                                                |
+| `server`            | Installed for a specific chat server as local client plugin plus server requirement metadata. |
 
 Most generated plugins should use `kind: "client"`. Use `kind: "library"` only for dependency metadata with no executable entrypoint.
 
@@ -326,10 +330,7 @@ interface TojuClientPluginModule {
   ready?: (context: TojuPluginActivationContext) => Promise<void> | void;
   deactivate?: (context: TojuPluginActivationContext) => Promise<void> | void;
   onPluginDataChanged?: (context: TojuPluginActivationContext, event: unknown) => Promise<void> | void;
-  onServerRequirementsChanged?: (
-    context: TojuPluginActivationContext,
-    snapshot: PluginRequirementsSnapshot
-  ) => Promise<void> | void;
+  onServerRequirementsChanged?: (context: TojuPluginActivationContext, snapshot: PluginRequirementsSnapshot) => Promise<void> | void;
 }
 ```
 
@@ -579,9 +580,20 @@ interface ChannelPermissionOverride {
 ## Full Plugin API Types
 
 ```ts
-interface PluginApiProfileUpdate { displayName: string; description?: string }
-interface PluginApiAvatarUpdate { avatarUrl: string; avatarMime: string; avatarHash: string }
-interface PluginApiChannelRequest { name: string; id?: string; position?: number }
+interface PluginApiProfileUpdate {
+  displayName: string;
+  description?: string;
+}
+interface PluginApiAvatarUpdate {
+  avatarUrl: string;
+  avatarMime: string;
+  avatarHash: string;
+}
+interface PluginApiChannelRequest {
+  name: string;
+  id?: string;
+  position?: number;
+}
 interface PluginApiServerSettingsUpdate {
   name?: string;
   description?: string;
@@ -590,10 +602,24 @@ interface PluginApiServerSettingsUpdate {
   password?: string;
   maxUsers?: number;
 }
-interface PluginApiPluginUserRequest { displayName: string; id?: string; avatarUrl?: string }
-interface PluginApiMessageAsPluginUserRequest { pluginUserId: string; content: string; channelId?: string }
-interface PluginApiAudioClipRequest { url: string; volume?: number }
-interface PluginApiCustomStreamRequest { stream: MediaStream; label?: string }
+interface PluginApiPluginUserRequest {
+  displayName: string;
+  id?: string;
+  avatarUrl?: string;
+}
+interface PluginApiMessageAsPluginUserRequest {
+  pluginUserId: string;
+  content: string;
+  channelId?: string;
+}
+interface PluginApiAudioClipRequest {
+  url: string;
+  volume?: number;
+}
+interface PluginApiCustomStreamRequest {
+  stream: MediaStream;
+  label?: string;
+}
 
 type PluginApiActionSource = 'composerAction' | 'toolbarAction' | 'profileAction' | 'manual';
 interface PluginApiActionContext {
@@ -660,13 +686,41 @@ interface PluginApiMessageBusSubscription {
   handler: (event: PluginApiMessageBusEnvelope) => void;
 }
 
-interface PluginApiPageContribution { label: string; path: string; render: () => HTMLElement | string }
-interface PluginApiSettingsPageContribution { label: string; settingsKey?: string; order?: number; render: () => HTMLElement | string }
-interface PluginApiPanelContribution { label: string; order?: number; render: () => HTMLElement | string }
-interface PluginApiChannelSectionContribution { label: string; type?: 'audio' | 'video' | 'custom'; order?: number }
-interface PluginApiActionContribution { label: string; icon?: string; run: (context: PluginApiActionContext) => Promise<void> | void }
-interface PluginApiEmbedRendererContribution { embedType: string; render: (payload: unknown) => HTMLElement | string }
-interface PluginApiDomMountRequest { target: Element | string; element: HTMLElement; position?: InsertPosition }
+interface PluginApiPageContribution {
+  label: string;
+  path: string;
+  render: () => HTMLElement | string;
+}
+interface PluginApiSettingsPageContribution {
+  label: string;
+  settingsKey?: string;
+  order?: number;
+  render: () => HTMLElement | string;
+}
+interface PluginApiPanelContribution {
+  label: string;
+  order?: number;
+  render: () => HTMLElement | string;
+}
+interface PluginApiChannelSectionContribution {
+  label: string;
+  type?: 'audio' | 'video' | 'custom';
+  order?: number;
+}
+interface PluginApiActionContribution {
+  label: string;
+  icon?: string;
+  run: (context: PluginApiActionContext) => Promise<void> | void;
+}
+interface PluginApiEmbedRendererContribution {
+  embedType: string;
+  render: (payload: unknown) => HTMLElement | string;
+}
+interface PluginApiDomMountRequest {
+  target: Element | string;
+  element: HTMLElement;
+  position?: InsertPosition;
+}
 
 interface TojuClientPluginApi {
   readonly context: { getCurrent: () => PluginApiActionContext };
@@ -890,10 +944,7 @@ Capabilities: `messages.read`, `messages.send`, `messages.editOwn`, `messages.de
 ```js
 const visibleMessages = api.messages.readCurrent();
 
-const sent = api.messages.send(
-  'Build completed successfully. Docs are ready for review.',
-  'general'
-);
+const sent = api.messages.send('Build completed successfully. Docs are ready for review.', 'general');
 
 api.messages.edit(sent.id, 'Build completed successfully. Docs and plugin examples are ready.');
 api.messages.delete(sent.id);
@@ -1115,88 +1166,110 @@ Desktop uses Electron's local database when available, with renderer localStorag
 
 Capabilities:
 
-| Method | Required capability |
-| --- | --- |
-| `registerAppPage` | `ui.pages` |
-| `registerSettingsPage` | `ui.settings` |
-| `registerSidePanel` | `ui.sidePanel` |
+| Method                   | Required capability  |
+| ------------------------ | -------------------- |
+| `registerAppPage`        | `ui.pages`           |
+| `registerSettingsPage`   | `ui.settings`        |
+| `registerSidePanel`      | `ui.sidePanel`       |
 | `registerChannelSection` | `ui.channelsSection` |
-| `registerComposerAction` | `ui.pages` |
-| `registerProfileAction` | `ui.pages` |
-| `registerToolbarAction` | `ui.pages` |
-| `registerEmbedRenderer` | `ui.embeds` |
-| `mountElement` | `ui.dom` |
+| `registerComposerAction` | `ui.pages`           |
+| `registerProfileAction`  | `ui.pages`           |
+| `registerToolbarAction`  | `ui.pages`           |
+| `registerEmbedRenderer`  | `ui.embeds`          |
+| `mountElement`           | `ui.dom`             |
 
 Register side panel:
 
 ```js
-context.subscriptions.push(api.ui.registerSidePanel('summary', {
-  label: 'Plugin Summary',
-  order: 10,
-  render: () => {
-    const root = document.createElement('aside');
-    const heading = document.createElement('h2');
-    const text = document.createElement('p');
+context.subscriptions.push(
+  api.ui.registerSidePanel('summary', {
+    label: 'Plugin Summary',
+    order: 10,
+    render: () => {
+      const root = document.createElement('aside');
+      const heading = document.createElement('h2');
+      const text = document.createElement('p');
 
-    heading.textContent = 'Plugin Summary';
-    text.textContent = 'No active tasks.';
-    root.append(heading, text);
-    return root;
-  }
-}));
+      heading.textContent = 'Plugin Summary';
+      text.textContent = 'No active tasks.';
+      root.append(heading, text);
+      return root;
+    }
+  })
+);
 ```
 
 Use `registerSidePanel` for content that belongs in the server sidebar plugin area. Do not query `[data-testid="plugin-room-side-panel"]` and pass it to `mountElement`; that route-specific host may not exist while the plugin activates.
 
+Register toolbar action for the View plugins menu:
+
+```js
+context.subscriptions.push(
+  api.ui.registerToolbarAction('quick-status', {
+    icon: 'QS',
+    label: 'Quick Status',
+    run: (actionContext) => {
+      api.logger.info('Quick Status clicked', {
+        serverId: actionContext.server?.id,
+        source: actionContext.source
+      });
+    }
+  })
+);
+```
+
 Register app page:
 
 ```js
-context.subscriptions.push(api.ui.registerAppPage('dashboard', {
-  label: 'Build Dashboard',
-  path: '/plugins/example.build-dashboard/dashboard',
-  render: () => {
-    const root = document.createElement('section');
-    const title = document.createElement('h1');
-    const button = document.createElement('button');
-    const output = document.createElement('p');
+context.subscriptions.push(
+  api.ui.registerAppPage('dashboard', {
+    label: 'Build Dashboard',
+    path: '/plugins/example.build-dashboard/dashboard',
+    render: () => {
+      const root = document.createElement('section');
+      const title = document.createElement('h1');
+      const button = document.createElement('button');
+      const output = document.createElement('p');
 
-    title.textContent = 'Build Dashboard';
-    button.type = 'button';
-    button.textContent = 'Send status';
-    output.textContent = 'Idle.';
+      title.textContent = 'Build Dashboard';
+      button.type = 'button';
+      button.textContent = 'Send status';
+      output.textContent = 'Idle.';
 
-    button.addEventListener('click', () => {
-      const message = api.messages.send('Build dashboard status: ready.');
-      output.textContent = `Sent message ${message.id}`;
-    });
+      button.addEventListener('click', () => {
+        const message = api.messages.send('Build dashboard status: ready.');
+        output.textContent = `Sent message ${message.id}`;
+      });
 
-    root.append(title, button, output);
-    return root;
-  }
-}));
+      root.append(title, button, output);
+      return root;
+    }
+  })
+);
 ```
 
 Register actions:
 
 ```js
-context.subscriptions.push(api.ui.registerComposerAction('insert-template', {
-  label: 'Insert Template',
-  icon: 'file-text',
-  run: (actionContext) => {
-    api.messages.send(
-      'Template: Please review the latest build notes.',
-      actionContext.textChannel?.id
-    );
-  }
-}));
+context.subscriptions.push(
+  api.ui.registerComposerAction('insert-template', {
+    label: 'Insert Template',
+    icon: 'file-text',
+    run: (actionContext) => {
+      api.messages.send('Template: Please review the latest build notes.', actionContext.textChannel?.id);
+    }
+  })
+);
 
-context.subscriptions.push(api.ui.registerToolbarAction('post-standup', {
-  label: 'Post Standup',
-  icon: 'megaphone',
-  run: () => {
-    api.messages.send('Standup starts now. Join the voice channel when ready.');
-  }
-}));
+context.subscriptions.push(
+  api.ui.registerToolbarAction('post-standup', {
+    label: 'Post Standup',
+    icon: 'megaphone',
+    run: () => {
+      api.messages.send('Standup starts now. Join the voice channel when ready.');
+    }
+  })
+);
 ```
 
 Mount DOM directly:
@@ -1210,11 +1283,13 @@ banner.textContent = 'Plugin banner mounted in chat messages.';
 const target = document.querySelector('app-chat-messages');
 
 if (target) {
-  context.subscriptions.push(api.ui.mountElement('chat-banner', {
-    target,
-    element: banner,
-    position: 'afterbegin'
-  }));
+  context.subscriptions.push(
+    api.ui.mountElement('chat-banner', {
+      target,
+      element: banner,
+      position: 'afterbegin'
+    })
+  );
 }
 ```
 
@@ -1224,56 +1299,58 @@ Global overlay example:
 const badge = document.createElement('div');
 badge.textContent = 'Plugin active';
 
-context.subscriptions.push(api.ui.mountElement('global-badge', {
-  target: 'body',
-  element: badge,
-  position: 'beforeend'
-}));
+context.subscriptions.push(
+  api.ui.mountElement('global-badge', {
+    target: 'body',
+    element: badge,
+    position: 'beforeend'
+  })
+);
 ```
 
 `mountElement` tags the element with plugin ownership metadata, replaces duplicate mounts for the same plugin/id, and removes it on disposal/unload.
 
 ## Capability Cheat Sheet
 
-| API call group | Capabilities |
-| --- | --- |
-| `profile.getCurrent` | `profile.read` |
-| `profile.update`, `profile.updateAvatar` | `profile.write` |
-| `users.getCurrent`, `users.list`, `users.readMembers` | `users.read` |
-| `users.kick`, `users.ban`, `server.registerPluginUser` | `users.manage` |
-| `roles.list` | `roles.read` |
-| `users.setRole`, `roles.setAssignments` | `roles.manage` |
-| `server.getCurrent` | `server.read` |
-| `server.updatePermissions`, `server.updateSettings` | `server.manage` |
-| `channels.list`, `channels.select` | `channels.read` |
-| `channels.addAudioChannel`, `channels.addVideoChannel`, `channels.rename`, `channels.remove` | `channels.manage` |
-| `messages.readCurrent`, `messages.subscribeTyping` | `messages.read` |
-| `messages.send`, `messages.sendAsPluginUser`, `messages.setTyping` | `messages.send` |
-| `messages.edit` | `messages.editOwn` |
-| `messages.delete` | `messages.deleteOwn` |
-| `messages.moderateDelete` | `messages.moderate` |
-| `messages.sync` | `messages.sync` |
-| `events.publishServer` | `events.server.publish` |
-| `events.subscribeServer` | `events.server.subscribe` |
-| `events.publishP2p` | `events.p2p.publish` |
-| `events.subscribeP2p` | `events.p2p.subscribe` |
-| `messageBus.publish` | `events.p2p.publish`, plus `messages.read` when `includeLatestMessages` is true |
-| `messageBus.sendLatestMessages` | `events.p2p.publish`, `messages.read` |
-| `messageBus.subscribe` | `events.p2p.subscribe`, plus `messages.read` when `replayLatest` is true |
-| `p2p.*` | `p2p.data` |
-| `media.playAudioClip` | `media.playAudio` |
-| `media.addCustomAudioStream` | `media.addAudioStream` |
-| `media.addCustomVideoStream` | `media.addVideoStream` |
-| `media.setInputVolume`, `media.setOutputVolume` | `audio.volume` |
-| `clientData.*`, `storage.*` | `storage.local` |
-| `serverData.read` | `storage.serverData.read` |
-| `serverData.write`, `serverData.remove` | `storage.serverData.write` |
-| `ui.registerAppPage`, composer/profile/toolbar actions | `ui.pages` |
-| `ui.registerSettingsPage` | `ui.settings` |
-| `ui.registerSidePanel` | `ui.sidePanel` |
-| `ui.registerChannelSection` | `ui.channelsSection` |
-| `ui.registerEmbedRenderer` | `ui.embeds` |
-| `ui.mountElement` | `ui.dom` |
+| API call group                                                                               | Capabilities                                                                    |
+| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| `profile.getCurrent`                                                                         | `profile.read`                                                                  |
+| `profile.update`, `profile.updateAvatar`                                                     | `profile.write`                                                                 |
+| `users.getCurrent`, `users.list`, `users.readMembers`                                        | `users.read`                                                                    |
+| `users.kick`, `users.ban`, `server.registerPluginUser`                                       | `users.manage`                                                                  |
+| `roles.list`                                                                                 | `roles.read`                                                                    |
+| `users.setRole`, `roles.setAssignments`                                                      | `roles.manage`                                                                  |
+| `server.getCurrent`                                                                          | `server.read`                                                                   |
+| `server.updatePermissions`, `server.updateSettings`                                          | `server.manage`                                                                 |
+| `channels.list`, `channels.select`                                                           | `channels.read`                                                                 |
+| `channels.addAudioChannel`, `channels.addVideoChannel`, `channels.rename`, `channels.remove` | `channels.manage`                                                               |
+| `messages.readCurrent`, `messages.subscribeTyping`                                           | `messages.read`                                                                 |
+| `messages.send`, `messages.sendAsPluginUser`, `messages.setTyping`                           | `messages.send`                                                                 |
+| `messages.edit`                                                                              | `messages.editOwn`                                                              |
+| `messages.delete`                                                                            | `messages.deleteOwn`                                                            |
+| `messages.moderateDelete`                                                                    | `messages.moderate`                                                             |
+| `messages.sync`                                                                              | `messages.sync`                                                                 |
+| `events.publishServer`                                                                       | `events.server.publish`                                                         |
+| `events.subscribeServer`                                                                     | `events.server.subscribe`                                                       |
+| `events.publishP2p`                                                                          | `events.p2p.publish`                                                            |
+| `events.subscribeP2p`                                                                        | `events.p2p.subscribe`                                                          |
+| `messageBus.publish`                                                                         | `events.p2p.publish`, plus `messages.read` when `includeLatestMessages` is true |
+| `messageBus.sendLatestMessages`                                                              | `events.p2p.publish`, `messages.read`                                           |
+| `messageBus.subscribe`                                                                       | `events.p2p.subscribe`, plus `messages.read` when `replayLatest` is true        |
+| `p2p.*`                                                                                      | `p2p.data`                                                                      |
+| `media.playAudioClip`                                                                        | `media.playAudio`                                                               |
+| `media.addCustomAudioStream`                                                                 | `media.addAudioStream`                                                          |
+| `media.addCustomVideoStream`                                                                 | `media.addVideoStream`                                                          |
+| `media.setInputVolume`, `media.setOutputVolume`                                              | `audio.volume`                                                                  |
+| `clientData.*`, `storage.*`                                                                  | `storage.local`                                                                 |
+| `serverData.read`                                                                            | `storage.serverData.read`                                                       |
+| `serverData.write`, `serverData.remove`                                                      | `storage.serverData.write`                                                      |
+| `ui.registerAppPage`, composer/profile/toolbar actions                                       | `ui.pages`                                                                      |
+| `ui.registerSettingsPage`                                                                    | `ui.settings`                                                                   |
+| `ui.registerSidePanel`                                                                       | `ui.sidePanel`                                                                  |
+| `ui.registerChannelSection`                                                                  | `ui.channelsSection`                                                            |
+| `ui.registerEmbedRenderer`                                                                   | `ui.embeds`                                                                     |
+| `ui.mountElement`                                                                            | `ui.dom`                                                                        |
 
 ## Complete Example Plugin
 
@@ -1319,25 +1396,31 @@ export function activate(context) {
 
   api.logger.info('Voice Notes activated');
 
-  context.subscriptions.push(api.messageBus.subscribe({
-    topic: BUS_TOPIC,
-    replayLatest: false,
-    handler: (event) => {
-      api.logger.debug('Received voice notes draft update', event.payload);
-    }
-  }));
+  context.subscriptions.push(
+    api.messageBus.subscribe({
+      topic: BUS_TOPIC,
+      replayLatest: false,
+      handler: (event) => {
+        api.logger.debug('Received voice notes draft update', event.payload);
+      }
+    })
+  );
 
-  context.subscriptions.push(api.ui.registerSidePanel('voice-notes-panel', {
-    label: 'Voice Notes',
-    order: 20,
-    render: () => renderPanel(context)
-  }));
+  context.subscriptions.push(
+    api.ui.registerSidePanel('voice-notes-panel', {
+      label: 'Voice Notes',
+      order: 20,
+      render: () => renderPanel(context)
+    })
+  );
 
-  context.subscriptions.push(api.ui.registerAppPage('voice-notes', {
-    label: 'Voice Notes',
-    path: '/plugins/example.voice-notes/voice-notes',
-    render: () => renderPanel(context)
-  }));
+  context.subscriptions.push(
+    api.ui.registerAppPage('voice-notes', {
+      label: 'Voice Notes',
+      path: '/plugins/example.voice-notes/voice-notes',
+      render: () => renderPanel(context)
+    })
+  );
 }
 
 function renderPanel(context) {
@@ -1352,9 +1435,7 @@ function renderPanel(context) {
 
   const current = api.context.getCurrent();
   heading.textContent = 'Voice Notes';
-  meta.textContent = current.voiceChannel
-    ? `Connected to ${current.voiceChannel.name}`
-    : 'Not connected to a voice channel.';
+  meta.textContent = current.voiceChannel ? `Connected to ${current.voiceChannel.name}` : 'Not connected to a voice channel.';
   textarea.rows = 6;
   textarea.placeholder = 'Write notes from the current voice session.';
   save.type = 'button';
@@ -1363,16 +1444,19 @@ function renderPanel(context) {
   post.textContent = 'Post Notes';
   status.textContent = 'Loading draft...';
 
-  void api.serverData.read(DRAFT_KEY).then((value) => {
-    if (value && typeof value === 'object' && typeof value.text === 'string') {
-      textarea.value = value.text;
-    }
+  void api.serverData
+    .read(DRAFT_KEY)
+    .then((value) => {
+      if (value && typeof value === 'object' && typeof value.text === 'string') {
+        textarea.value = value.text;
+      }
 
-    status.textContent = 'Draft loaded.';
-  }).catch((error) => {
-    api.logger.warn('Could not load voice notes draft', error);
-    status.textContent = 'Could not load draft.';
-  });
+      status.textContent = 'Draft loaded.';
+    })
+    .catch((error) => {
+      api.logger.warn('Could not load voice notes draft', error);
+      status.textContent = 'Could not load draft.';
+    });
 
   save.addEventListener('click', async () => {
     const draft = {
@@ -1429,4 +1513,4 @@ export function deactivate(context) {
 - Local REST API: Developer Guide -> Local REST API.
 - Plugin manifest: Plugin Development -> Manifest Model.
 - Capabilities: Plugin Development -> Capabilities.
-- Focused plugin API examples: Plugin Development -> API Reference and its API subpages.
+- Focused plugin API examples: Plugin Development -> API Reference and its API subpages.

docs-site/docs/plugin-development/api-reference.md

@@ -60,24 +60,24 @@ interface PluginApiAvatarUpdate {
 }
 ```
 
-| Method | Capability | Description |
-| --- | --- | --- |
-| `profile.getCurrent()` | `profile.read` | Returns the current `User` or `null`. |
-| `profile.update(profile)` | `profile.write` | Updates display name and optional description. |
+| Method                         | Capability      | Description                                       |
+| ------------------------------ | --------------- | ------------------------------------------------- |
+| `profile.getCurrent()`         | `profile.read`  | Returns the current `User` or `null`.             |
+| `profile.update(profile)`      | `profile.write` | Updates display name and optional description.    |
 | `profile.updateAvatar(avatar)` | `profile.write` | Updates avatar URL, MIME type, and hash metadata. |
 
 ## Users and Roles
 
-| Method | Capability | Description |
-| --- | --- | --- |
-| `users.getCurrent()` | `users.read` | Returns current `User` or `null`. |
-| `users.list()` | `users.read` | Returns known users. |
-| `users.readMembers()` | `users.read` | Returns active room members. |
-| `users.setRole(userId, role)` | `roles.manage` | Updates a user's role. |
-| `users.kick(userId)` | `users.manage` | Kicks a user. |
-| `users.ban(userId, reason?)` | `users.manage` | Bans a user with optional reason. |
-| `roles.list()` | `roles.read` | Returns room roles. |
-| `roles.setAssignments(assignments)` | `roles.manage` | Replaces role assignments. |
+| Method                              | Capability     | Description                       |
+| ----------------------------------- | -------------- | --------------------------------- |
+| `users.getCurrent()`                | `users.read`   | Returns current `User` or `null`. |
+| `users.list()`                      | `users.read`   | Returns known users.              |
+| `users.readMembers()`               | `users.read`   | Returns active room members.      |
+| `users.setRole(userId, role)`       | `roles.manage` | Updates a user's role.            |
+| `users.kick(userId)`                | `users.manage` | Kicks a user.                     |
+| `users.ban(userId, reason?)`        | `users.manage` | Bans a user with optional reason. |
+| `roles.list()`                      | `roles.read`   | Returns room roles.               |
+| `roles.setAssignments(assignments)` | `roles.manage` | Replaces role assignments.        |
 
 ## Server
 
@@ -98,12 +98,12 @@ interface PluginApiPluginUserRequest {
 }
 ```
 
-| Method | Capability | Description |
-| --- | --- | --- |
-| `server.getCurrent()` | `server.read` | Returns the current `Room` or `null`. |
-| `server.registerPluginUser(request)` | `users.manage` | Adds a plugin-owned user and returns its id. |
-| `server.updatePermissions(permissions)` | `server.manage` | Updates partial room permissions. |
-| `server.updateSettings(settings)` | `server.manage` | Updates room settings. |
+| Method                                  | Capability      | Description                                  |
+| --------------------------------------- | --------------- | -------------------------------------------- |
+| `server.getCurrent()`                   | `server.read`   | Returns the current `Room` or `null`.        |
+| `server.registerPluginUser(request)`    | `users.manage`  | Adds a plugin-owned user and returns its id. |
+| `server.updatePermissions(permissions)` | `server.manage` | Updates partial room permissions.            |
+| `server.updateSettings(settings)`       | `server.manage` | Updates room settings.                       |
 
 ## Channels
 
@@ -115,14 +115,14 @@ interface PluginApiChannelRequest {
 }
 ```
 
-| Method | Capability | Description |
-| --- | --- | --- |
-| `channels.list()` | `channels.read` | Returns current room channels. |
-| `channels.select(channelId)` | `channels.read` | Selects a channel. |
-| `channels.addAudioChannel(request)` | `channels.manage` | Adds a voice channel. |
+| Method                              | Capability        | Description                        |
+| ----------------------------------- | ----------------- | ---------------------------------- |
+| `channels.list()`                   | `channels.read`   | Returns current room channels.     |
+| `channels.select(channelId)`        | `channels.read`   | Selects a channel.                 |
+| `channels.addAudioChannel(request)` | `channels.manage` | Adds a voice channel.              |
 | `channels.addVideoChannel(request)` | `channels.manage` | Registers a video channel section. |
-| `channels.rename(channelId, name)` | `channels.manage` | Renames a channel. |
-| `channels.remove(channelId)` | `channels.manage` | Removes a channel. |
+| `channels.rename(channelId, name)`  | `channels.manage` | Renames a channel.                 |
+| `channels.remove(channelId)`        | `channels.manage` | Removes a channel.                 |
 
 ## Messages
 
@@ -134,17 +134,17 @@ interface PluginApiMessageAsPluginUserRequest {
 }
 ```
 
-| Method | Capability | Description |
-| --- | --- | --- |
-| `messages.readCurrent()` | `messages.read` | Returns current visible messages. |
-| `messages.send(content, channelId?)` | `messages.send` | Sends a message and returns the created `Message`. |
-| `messages.sendAsPluginUser(request)` | `messages.send` | Emits a message from a registered plugin user. |
-| `messages.setTyping(isTyping, channelId?)` | `messages.send` | Broadcasts current typing state for a channel. |
-| `messages.subscribeTyping(handler)` | `messages.read` | Subscribes to peer typing state. |
-| `messages.edit(messageId, content)` | `messages.editOwn` | Edits a plugin message. |
-| `messages.delete(messageId)` | `messages.deleteOwn` | Deletes a plugin message. |
-| `messages.moderateDelete(messageId)` | `messages.moderate` | Performs a moderation delete. |
-| `messages.sync(messages)` | `messages.sync` | Syncs an array of messages into state. |
+| Method                                     | Capability           | Description                                        |
+| ------------------------------------------ | -------------------- | -------------------------------------------------- |
+| `messages.readCurrent()`                   | `messages.read`      | Returns current visible messages.                  |
+| `messages.send(content, channelId?)`       | `messages.send`      | Sends a message and returns the created `Message`. |
+| `messages.sendAsPluginUser(request)`       | `messages.send`      | Emits a message from a registered plugin user.     |
+| `messages.setTyping(isTyping, channelId?)` | `messages.send`      | Broadcasts current typing state for a channel.     |
+| `messages.subscribeTyping(handler)`        | `messages.read`      | Subscribes to peer typing state.                   |
+| `messages.edit(messageId, content)`        | `messages.editOwn`   | Edits a plugin message.                            |
+| `messages.delete(messageId)`               | `messages.deleteOwn` | Deletes a plugin message.                          |
+| `messages.moderateDelete(messageId)`       | `messages.moderate`  | Performs a moderation delete.                      |
+| `messages.sync(messages)`                  | `messages.sync`      | Syncs an array of messages into state.             |
 
 ## Events
 
@@ -167,12 +167,12 @@ interface PluginEventEnvelope<TPayload = unknown> {
 }
 ```
 
-| Method | Capability | Description |
-| --- | --- | --- |
-| `events.publishServer(eventName, payload)` | `events.server.publish` | Sends a declared plugin event through the signaling server. |
-| `events.subscribeServer(subscription)` | `events.server.subscribe` | Subscribes to a declared server plugin event. |
-| `events.publishP2p(eventName, payload)` | `events.p2p.publish` | Sends a declared plugin event over peer paths. |
-| `events.subscribeP2p(subscription)` | `events.p2p.subscribe` | Registers a P2P event subscription. |
+| Method                                     | Capability                | Description                                                 |
+| ------------------------------------------ | ------------------------- | ----------------------------------------------------------- |
+| `events.publishServer(eventName, payload)` | `events.server.publish`   | Sends a declared plugin event through the signaling server. |
+| `events.subscribeServer(subscription)`     | `events.server.subscribe` | Subscribes to a declared server plugin event.               |
+| `events.publishP2p(eventName, payload)`    | `events.p2p.publish`      | Sends a declared plugin event over peer paths.              |
+| `events.subscribeP2p(subscription)`        | `events.p2p.subscribe`    | Registers a P2P event subscription.                         |
 
 ## Message Bus
 
@@ -215,11 +215,11 @@ interface PluginApiMessageBusSubscription {
 }
 ```
 
-| Method | Capability | Description |
-| --- | --- | --- |
-| `messageBus.publish(request)` | `events.p2p.publish`, optionally `messages.read` | Publishes a plugin-bus event, optionally including latest messages. |
-| `messageBus.sendLatestMessages(request?)` | `events.p2p.publish` and `messages.read` | Sends a latest-message snapshot. |
-| `messageBus.subscribe(subscription)` | `events.p2p.subscribe`, optionally `messages.read` | Subscribes to plugin-bus events, optionally replaying latest messages. |
+| Method                                    | Capability                                         | Description                                                            |
+| ----------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------- |
+| `messageBus.publish(request)`             | `events.p2p.publish`, optionally `messages.read`   | Publishes a plugin-bus event, optionally including latest messages.    |
+| `messageBus.sendLatestMessages(request?)` | `events.p2p.publish` and `messages.read`           | Sends a latest-message snapshot.                                       |
+| `messageBus.subscribe(subscription)`      | `events.p2p.subscribe`, optionally `messages.read` | Subscribes to plugin-bus events, optionally replaying latest messages. |
 
 ## P2P and Media
 
@@ -235,30 +235,30 @@ interface PluginApiCustomStreamRequest {
 }
 ```
 
-| Method | Capability | Description |
-| --- | --- | --- |
-| `p2p.connectedPeers()` | `p2p.data` | Returns connected peer ids. |
-| `p2p.broadcastData(eventName, payload)` | `p2p.data` | Broadcasts plugin data. |
-| `p2p.sendData(peerId, eventName, payload)` | `p2p.data` | Sends plugin data targeted to a peer. |
-| `media.playAudioClip(request)` | `media.playAudio` | Plays an audio URL at optional volume. |
-| `media.addCustomAudioStream(request)` | `media.addAudioStream` | Contributes an audio `MediaStream`. |
-| `media.addCustomVideoStream(request)` | `media.addVideoStream` | Registers a video `MediaStream` contribution. |
-| `media.setInputVolume(volume)` | `audio.volume` | Sets local input volume. |
-| `media.setOutputVolume(volume)` | `audio.volume` | Sets local output volume. |
+| Method                                     | Capability             | Description                                   |
+| ------------------------------------------ | ---------------------- | --------------------------------------------- |
+| `p2p.connectedPeers()`                     | `p2p.data`             | Returns connected peer ids.                   |
+| `p2p.broadcastData(eventName, payload)`    | `p2p.data`             | Broadcasts plugin data.                       |
+| `p2p.sendData(peerId, eventName, payload)` | `p2p.data`             | Sends plugin data targeted to a peer.         |
+| `media.playAudioClip(request)`             | `media.playAudio`      | Plays an audio URL at optional volume.        |
+| `media.addCustomAudioStream(request)`      | `media.addAudioStream` | Contributes an audio `MediaStream`.           |
+| `media.addCustomVideoStream(request)`      | `media.addVideoStream` | Registers a video `MediaStream` contribution. |
+| `media.setInputVolume(volume)`             | `audio.volume`         | Sets local input volume.                      |
+| `media.setOutputVolume(volume)`            | `audio.volume`         | Sets local output volume.                     |
 
 ## Storage
 
-| Method | Capability | Description |
-| --- | --- | --- |
-| `clientData.read(key)` | `storage.local` | Reads async plugin-local data. |
-| `clientData.write(key, value)` | `storage.local` | Writes async plugin-local data. |
-| `clientData.remove(key)` | `storage.local` | Removes async plugin-local data. |
-| `serverData.read(key)` | `storage.serverData.read` | Reads local per-user/per-server data. |
-| `serverData.write(key, value)` | `storage.serverData.write` | Writes local per-user/per-server data. |
-| `serverData.remove(key)` | `storage.serverData.write` | Removes local per-user/per-server data. |
-| `storage.get(key)` | `storage.local` | Legacy synchronous local read. |
-| `storage.set(key, value)` | `storage.local` | Legacy synchronous local write. |
-| `storage.remove(key)` | `storage.local` | Legacy synchronous local remove. |
+| Method                         | Capability                 | Description                             |
+| ------------------------------ | -------------------------- | --------------------------------------- |
+| `clientData.read(key)`         | `storage.local`            | Reads async plugin-local data.          |
+| `clientData.write(key, value)` | `storage.local`            | Writes async plugin-local data.         |
+| `clientData.remove(key)`       | `storage.local`            | Removes async plugin-local data.        |
+| `serverData.read(key)`         | `storage.serverData.read`  | Reads local per-user/per-server data.   |
+| `serverData.write(key, value)` | `storage.serverData.write` | Writes local per-user/per-server data.  |
+| `serverData.remove(key)`       | `storage.serverData.write` | Removes local per-user/per-server data. |
+| `storage.get(key)`             | `storage.local`            | Legacy synchronous local read.          |
+| `storage.set(key, value)`      | `storage.local`            | Legacy synchronous local write.         |
+| `storage.remove(key)`          | `storage.local`            | Legacy synchronous local remove.        |
 
 ## UI Contributions
 
@@ -306,24 +306,24 @@ interface PluginApiDomMountRequest {
 }
 ```
 
-| Method | Capability | Description |
-| --- | --- | --- |
-| `ui.registerAppPage(id, contribution)` | `ui.pages` | Adds a plugin app page. |
-| `ui.registerSettingsPage(id, contribution)` | `ui.settings` | Adds a plugin settings page. |
-| `ui.registerSidePanel(id, contribution)` | `ui.sidePanel` | Adds a side panel. |
-| `ui.registerChannelSection(id, contribution)` | `ui.channelsSection` | Adds a channel section. |
-| `ui.registerComposerAction(id, contribution)` | `ui.pages` | Adds a composer action. |
-| `ui.registerProfileAction(id, contribution)` | `ui.pages` | Adds a profile action. |
-| `ui.registerToolbarAction(id, contribution)` | `ui.pages` | Adds a toolbar action. |
-| `ui.registerEmbedRenderer(id, contribution)` | `ui.embeds` | Adds an embed renderer. |
-| `ui.mountElement(id, request)` | `ui.dom` | Mounts plugin-owned DOM into a target element or selector. |
+| Method                                        | Capability           | Description                                                     |
+| --------------------------------------------- | -------------------- | --------------------------------------------------------------- |
+| `ui.registerAppPage(id, contribution)`        | `ui.pages`           | Adds a plugin app page.                                         |
+| `ui.registerSettingsPage(id, contribution)`   | `ui.settings`        | Adds a plugin settings page.                                    |
+| `ui.registerSidePanel(id, contribution)`      | `ui.sidePanel`       | Adds a side panel.                                              |
+| `ui.registerChannelSection(id, contribution)` | `ui.channelsSection` | Adds a channel section.                                         |
+| `ui.registerComposerAction(id, contribution)` | `ui.pages`           | Adds a composer action.                                         |
+| `ui.registerProfileAction(id, contribution)`  | `ui.pages`           | Adds a profile action.                                          |
+| `ui.registerToolbarAction(id, contribution)`  | `ui.pages`           | Adds an action tile to the server side panel View plugins menu. |
+| `ui.registerEmbedRenderer(id, contribution)`  | `ui.embeds`          | Adds an embed renderer.                                         |
+| `ui.mountElement(id, request)`                | `ui.dom`             | Mounts plugin-owned DOM into a target element or selector.      |
 
 ## Context and Logger
 
-| Method | Capability | Description |
-| --- | --- | --- |
-| `context.getCurrent()` | None | Reads current user, server, active text channel, and active voice channel. |
-| `logger.debug(message, data?)` | None | Writes a debug plugin log entry. |
-| `logger.info(message, data?)` | None | Writes an info plugin log entry. |
-| `logger.warn(message, data?)` | None | Writes a warning plugin log entry. |
-| `logger.error(message, data?)` | None | Writes an error plugin log entry. |
+| Method                         | Capability | Description                                                                |
+| ------------------------------ | ---------- | -------------------------------------------------------------------------- |
+| `context.getCurrent()`         | None       | Reads current user, server, active text channel, and active voice channel. |
+| `logger.debug(message, data?)` | None       | Writes a debug plugin log entry.                                           |
+| `logger.info(message, data?)`  | None       | Writes an info plugin log entry.                                           |
+| `logger.warn(message, data?)`  | None       | Writes a warning plugin log entry.                                         |
+| `logger.error(message, data?)` | None       | Writes an error plugin log entry.                                          |

docs-site/docs/plugin-development/api/context-and-logging.md

@@ -37,21 +37,23 @@ Example context shape:
 
 ## Action Context
 
-Composer, toolbar, and profile actions receive context directly.
+Composer, toolbar, and profile actions receive context directly. Toolbar actions are launched from the server side panel's View plugins menu and report `source: 'toolbarAction'`.
 
 ```js
 export function activate(context) {
-  context.subscriptions.push(context.api.ui.registerToolbarAction('where-am-i', {
-    label: 'Where am I?',
-    run: (actionContext) => {
-      context.api.logger.info('Toolbar action context', {
-        source: actionContext.source,
-        serverId: actionContext.server?.id,
-        textChannelId: actionContext.textChannel?.id,
-        voiceChannelId: actionContext.voiceChannel?.id
-      });
-    }
-  }));
+  context.subscriptions.push(
+    context.api.ui.registerToolbarAction('where-am-i', {
+      label: 'Where am I?',
+      run: (actionContext) => {
+        context.api.logger.info('Toolbar action context', {
+          source: actionContext.source,
+          serverId: actionContext.server?.id,
+          textChannelId: actionContext.textChannel?.id,
+          voiceChannelId: actionContext.voiceChannel?.id
+        });
+      }
+    })
+  );
 }
 ```
 
@@ -70,4 +72,4 @@ export function activate(context) {
 }
 ```
 
-Logs are visible in the Plugin Manager. Avoid logging passwords, bearer tokens, or private message contents.
+Logs are visible in the Plugin Manager. Avoid logging passwords, bearer tokens, or private message contents.

docs-site/docs/plugin-development/api/ui.md

@@ -10,17 +10,17 @@ Prefer registered UI contributions over direct DOM mounting. Contribution APIs l
 
 ## Required Capabilities
 
-| Method | Capability |
-| --- | --- |
-| `ui.registerAppPage(id, contribution)` | `ui.pages` |
-| `ui.registerSettingsPage(id, contribution)` | `ui.settings` |
-| `ui.registerSidePanel(id, contribution)` | `ui.sidePanel` |
+| Method                                        | Capability           |
+| --------------------------------------------- | -------------------- |
+| `ui.registerAppPage(id, contribution)`        | `ui.pages`           |
+| `ui.registerSettingsPage(id, contribution)`   | `ui.settings`        |
+| `ui.registerSidePanel(id, contribution)`      | `ui.sidePanel`       |
 | `ui.registerChannelSection(id, contribution)` | `ui.channelsSection` |
-| `ui.registerComposerAction(id, contribution)` | `ui.pages` |
-| `ui.registerProfileAction(id, contribution)` | `ui.pages` |
-| `ui.registerToolbarAction(id, contribution)` | `ui.pages` |
-| `ui.registerEmbedRenderer(id, contribution)` | `ui.embeds` |
-| `ui.mountElement(id, request)` | `ui.dom` |
+| `ui.registerComposerAction(id, contribution)` | `ui.pages`           |
+| `ui.registerProfileAction(id, contribution)`  | `ui.pages`           |
+| `ui.registerToolbarAction(id, contribution)`  | `ui.pages`           |
+| `ui.registerEmbedRenderer(id, contribution)`  | `ui.embeds`          |
+| `ui.mountElement(id, request)`                | `ui.dom`             |
 
 Every registration returns a disposable. Push it into `context.subscriptions`.
 
@@ -28,15 +28,17 @@ Every registration returns a disposable. Push it into `context.subscriptions`.
 
 ```js
 export function activate(context) {
-  context.subscriptions.push(context.api.ui.registerAppPage('dashboard', {
-    label: 'Raid Dashboard',
-    path: '/plugins/example.raid-helper/dashboard',
-    render: () => {
-      const root = document.createElement('section');
-      root.innerHTML = '<h1>Raid Dashboard</h1><p>Tonight: dungeon practice.</p>';
-      return root;
-    }
-  }));
+  context.subscriptions.push(
+    context.api.ui.registerAppPage('dashboard', {
+      label: 'Raid Dashboard',
+      path: '/plugins/example.raid-helper/dashboard',
+      render: () => {
+        const root = document.createElement('section');
+        root.innerHTML = '<h1>Raid Dashboard</h1><p>Tonight: dungeon practice.</p>';
+        return root;
+      }
+    })
+  );
 }
 ```
 
@@ -46,22 +48,24 @@ The page is hosted by `/plugins/:pluginId/:pageId`.
 
 ```js
 export function activate(context) {
-  context.subscriptions.push(context.api.ui.registerSettingsPage('preferences', {
-    label: 'Raid Helper',
-    settingsKey: 'raid-helper',
-    order: 20,
-    render: () => {
-      const wrapper = document.createElement('section');
-      const label = document.createElement('label');
-      const checkbox = document.createElement('input');
+  context.subscriptions.push(
+    context.api.ui.registerSettingsPage('preferences', {
+      label: 'Raid Helper',
+      settingsKey: 'raid-helper',
+      order: 20,
+      render: () => {
+        const wrapper = document.createElement('section');
+        const label = document.createElement('label');
+        const checkbox = document.createElement('input');
 
-      checkbox.type = 'checkbox';
-      checkbox.checked = true;
-      label.append(checkbox, ' Enable ready-check reminders');
-      wrapper.append(label);
-      return wrapper;
-    }
-  }));
+        checkbox.type = 'checkbox';
+        checkbox.checked = true;
+        label.append(checkbox, ' Enable ready-check reminders');
+        wrapper.append(label);
+        return wrapper;
+      }
+    })
+  );
 }
 ```
 
@@ -71,23 +75,26 @@ Use `ui.registerSidePanel` for content that belongs in the server sidebar plugin
 
 ```js
 export function activate(context) {
-  context.subscriptions.push(context.api.ui.registerSidePanel('soundboard', {
-    label: 'Soundboard',
-    order: 10,
-    render: () => {
-      const panel = document.createElement('div');
-      const button = document.createElement('button');
+  context.subscriptions.push(
+    context.api.ui.registerSidePanel('soundboard', {
+      label: 'Soundboard',
+      order: 10,
+      render: () => {
+        const panel = document.createElement('div');
+        const button = document.createElement('button');
 
-      button.type = 'button';
-      button.textContent = 'Play chime';
-      button.onclick = () => context.api.media.playAudioClip({
-        url: 'https://cdn.example.com/chime.wav',
-        volume: 0.6
-      });
-      panel.append(button);
-      return panel;
-    }
-  }));
+        button.type = 'button';
+        button.textContent = 'Play chime';
+        button.onclick = () =>
+          context.api.media.playAudioClip({
+            url: 'https://cdn.example.com/chime.wav',
+            volume: 0.6
+          });
+        panel.append(button);
+        return panel;
+      }
+    })
+  );
 }
 ```
 
@@ -97,11 +104,13 @@ Capabilities required: `ui.sidePanel` and `media.playAudio`.
 
 ```js
 export function activate(context) {
-  context.subscriptions.push(context.api.ui.registerChannelSection('events', {
-    label: 'Event Rooms',
-    type: 'custom',
-    order: 50
-  }));
+  context.subscriptions.push(
+    context.api.ui.registerChannelSection('events', {
+      label: 'Event Rooms',
+      type: 'custom',
+      order: 50
+    })
+  );
 }
 ```
 
@@ -109,16 +118,15 @@ export function activate(context) {
 
 ```js
 export function activate(context) {
-  context.subscriptions.push(context.api.ui.registerComposerAction('insert-standup', {
-    icon: 'ST',
-    label: 'Insert standup prompt',
-    run: (actionContext) => {
-      context.api.messages.send(
-        'Standup: yesterday I..., today I..., blocked by...',
-        actionContext.textChannel?.id
-      );
-    }
-  }));
+  context.subscriptions.push(
+    context.api.ui.registerComposerAction('insert-standup', {
+      icon: 'ST',
+      label: 'Insert standup prompt',
+      run: (actionContext) => {
+        context.api.messages.send('Standup: yesterday I..., today I..., blocked by...', actionContext.textChannel?.id);
+      }
+    })
+  );
 }
 ```
 
@@ -128,45 +136,65 @@ Capabilities required: `ui.pages` and `messages.send`.
 
 ```js
 export function activate(context) {
-  context.subscriptions.push(context.api.ui.registerProfileAction('wave', {
-    label: 'Wave',
-    run: (actionContext) => {
-      context.api.messages.send(`Waving at ${actionContext.user?.displayName ?? 'someone'}!`);
-    }
-  }));
+  context.subscriptions.push(
+    context.api.ui.registerProfileAction('wave', {
+      label: 'Wave',
+      run: (actionContext) => {
+        context.api.messages.send(`Waving at ${actionContext.user?.displayName ?? 'someone'}!`);
+      }
+    })
+  );
 }
 ```
 
 ## Toolbar Action
 
+Toolbar actions are command-style plugin entries shown in the server side panel's View plugins menu. Use them for small actions that should be easy to launch from a server, such as opening a plugin page, sending a status message, starting a timer, or toggling a plugin feature.
+
+The View plugins link appears in `[data-testid="plugin-room-side-panel"]` when the plugin side-panel area is rendered. Opening it shows an overlay menu, positioned like profile-card overlays, with registered actions laid out as plugin icon tiles. The `icon` field can be short text such as `RH`, an emoji, or an image URL; when omitted, MetoYou falls back to initials from the plugin/action labels.
+
+Toolbar action callbacks receive an action context with `source: 'toolbarAction'`, the current user, current server, active text channel, and current voice channel when available.
+
 ```js
 export function activate(context) {
-  context.subscriptions.push(context.api.ui.registerToolbarAction('open-dashboard', {
-    label: 'Raid Helper',
-    run: () => {
-      context.api.logger.info('Open the Raid Helper plugin page from /plugins/example.raid-helper/dashboard');
-    }
-  }));
+  context.subscriptions.push(
+    context.api.ui.registerToolbarAction('open-dashboard', {
+      icon: 'RH',
+      label: 'Raid Helper',
+      run: (actionContext) => {
+        context.api.logger.info('Raid Helper opened', {
+          channelId: actionContext.textChannel?.id,
+          serverId: actionContext.server?.id
+        });
+      }
+    })
+  );
 }
 ```
 
+Capabilities required: `ui.pages`. Add any capability your action uses, such as `messages.send` or `server.read`.
+
+Use `registerSidePanel` instead when the plugin needs persistent sidebar content, and use `registerAppPage` when the plugin needs a full-page workflow.
+
 ## Embed Renderer
 
 ```js
 export function activate(context) {
-  context.subscriptions.push(context.api.ui.registerEmbedRenderer('raid-card', {
-    embedType: 'raid.card',
-    render: (payload) => {
-      const card = document.createElement('article');
-      const title = document.createElement('h3');
-      const body = document.createElement('p');
+  context.subscriptions.push(
+    context.api.ui.registerEmbedRenderer('raid-card', {
+      embedType: 'raid.card',
+      render: (payload) => {
+        const card = document.createElement('article');
+        const title = document.createElement('h3');
+        const body = document.createElement('p');
 
-      title.textContent = payload?.title ?? 'Raid';
-      body.textContent = payload?.description ?? 'No description provided.';
-      card.append(title, body);
-      return card;
-    }
-  }));
+        title.textContent = payload?.title ?? 'Raid';
+        body.textContent = payload?.description ?? 'No description provided.';
+        card.append(title, body);
+        return card;
+      }
+    })
+  );
 }
 ```
 
@@ -202,11 +230,13 @@ export function activate(context) {
   badge.style.color = 'white';
   badge.style.borderRadius = '6px';
 
-  context.subscriptions.push(context.api.ui.mountElement('active-badge', {
-    target: 'body',
-    position: 'beforeend',
-    element: badge
-  }));
+  context.subscriptions.push(
+    context.api.ui.mountElement('active-badge', {
+      target: 'body',
+      position: 'beforeend',
+      element: badge
+    })
+  );
 }
 ```
 
@@ -224,12 +254,14 @@ export function activate(context) {
   const banner = document.createElement('div');
   banner.textContent = 'Raid helper active in this chat.';
 
-  context.subscriptions.push(context.api.ui.mountElement('chat-banner', {
-    target,
-    position: 'afterbegin',
-    element: banner
-  }));
+  context.subscriptions.push(
+    context.api.ui.mountElement('chat-banner', {
+      target,
+      position: 'afterbegin',
+      element: banner
+    })
+  );
 }
 ```
 
-The runtime tags plugin-owned DOM and removes it on unload, but plugins should still keep mounts minimal and accessible.
+The runtime tags plugin-owned DOM and removes it on unload, but plugins should still keep mounts minimal and accessible.

docs-site/docs/plugin-development/capabilities.md

@@ -6,44 +6,44 @@ sidebar_position: 3
 
 Capabilities protect privileged app surfaces. A plugin must declare a capability in its manifest and the user must grant it before the runtime allows the corresponding API call.
 
-| Capability | API areas | Notes |
-| --- | --- | --- |
-| `profile.read` | `profile.getCurrent()` | Reads the current user. |
-| `profile.write` | `profile.update()`, `profile.updateAvatar()` | Updates local profile fields and avatar metadata. |
-| `users.read` | `users.getCurrent()`, `users.list()`, `users.readMembers()` | Reads users and server members. |
-| `users.manage` | `users.kick()`, `users.ban()`, `server.registerPluginUser()` | Can create plugin users and moderate members. |
-| `roles.read` | `roles.list()` | Reads server roles. |
-| `roles.manage` | `roles.setAssignments()`, `users.setRole()` | Changes role assignments or user roles. |
-| `messages.read` | `messages.readCurrent()`, message bus latest snapshots | Reads current channel messages. |
-| `messages.send` | `messages.send()`, `messages.sendAsPluginUser()` | Sends messages as the current user or registered plugin user. |
-| `messages.editOwn` | `messages.edit()` | Edits plugin-owned messages. |
-| `messages.deleteOwn` | `messages.delete()` | Deletes plugin-owned messages. |
-| `messages.moderate` | `messages.moderateDelete()` | Moderation delete path. |
-| `messages.sync` | `messages.sync()` | Syncs message arrays into client state. |
-| `channels.read` | `channels.list()`, `channels.select()` | Reads and selects channels. |
-| `channels.manage` | `channels.addAudioChannel()`, `channels.addVideoChannel()`, `channels.remove()`, `channels.rename()` | Mutates channel or channel-section state. |
-| `server.read` | `server.getCurrent()` | Reads active server. |
-| `server.manage` | `server.updatePermissions()`, `server.updateSettings()` | Updates server permissions or settings. |
-| `p2p.data` | `p2p.connectedPeers()`, `p2p.broadcastData()`, `p2p.sendData()` | Uses plugin peer data paths. |
-| `p2p.media` | Reserved peer media features. | Included for media-facing plugins. |
-| `media.playAudio` | `media.playAudioClip()` | Plays an audio URL locally. |
-| `media.addAudioStream` | `media.addCustomAudioStream()` | Adds a custom stream to voice handling. |
-| `media.addVideoStream` | `media.addCustomVideoStream()` | Registers custom video stream contribution. |
-| `audio.volume` | `media.setInputVolume()`, `media.setOutputVolume()` | Adjusts local voice volume. |
-| `audio.effects` | Reserved audio effect features. | Included for audio processing plugins. |
-| `ui.settings` | `ui.registerSettingsPage()` | Adds settings pages. |
-| `ui.pages` | `ui.registerAppPage()`, `ui.registerComposerAction()`, `ui.registerProfileAction()`, `ui.registerToolbarAction()` | Adds app pages and actions. |
-| `ui.sidePanel` | `ui.registerSidePanel()` | Adds side panels. |
-| `ui.channelsSection` | `ui.registerChannelSection()` | Adds channel sections. |
-| `ui.embeds` | `ui.registerEmbedRenderer()` | Renders custom embeds. |
-| `ui.dom` | `ui.mountElement()` | Mounts plugin-owned DOM into app targets. |
-| `storage.local` | `storage.*`, `clientData.*` | Reads and writes plugin-local data. |
-| `storage.serverData.read` | `serverData.read()` | Reads local per-user/per-server plugin data. |
-| `storage.serverData.write` | `serverData.write()`, `serverData.remove()` | Writes or removes local per-user/per-server plugin data. |
-| `events.server.publish` | `events.publishServer()` | Publishes declared server plugin events. |
-| `events.server.subscribe` | `events.subscribeServer()` | Subscribes to declared server plugin events. |
-| `events.p2p.publish` | `events.publishP2p()`, `messageBus.publish()`, `messageBus.sendLatestMessages()` | Publishes declared P2P/plugin bus events. |
-| `events.p2p.subscribe` | `events.subscribeP2p()`, `messageBus.subscribe()` | Subscribes to declared P2P/plugin bus events. |
+| Capability                 | API areas                                                                                                         | Notes                                                                        |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| `profile.read`             | `profile.getCurrent()`                                                                                            | Reads the current user.                                                      |
+| `profile.write`            | `profile.update()`, `profile.updateAvatar()`                                                                      | Updates local profile fields and avatar metadata.                            |
+| `users.read`               | `users.getCurrent()`, `users.list()`, `users.readMembers()`                                                       | Reads users and server members.                                              |
+| `users.manage`             | `users.kick()`, `users.ban()`, `server.registerPluginUser()`                                                      | Can create plugin users and moderate members.                                |
+| `roles.read`               | `roles.list()`                                                                                                    | Reads server roles.                                                          |
+| `roles.manage`             | `roles.setAssignments()`, `users.setRole()`                                                                       | Changes role assignments or user roles.                                      |
+| `messages.read`            | `messages.readCurrent()`, message bus latest snapshots                                                            | Reads current channel messages.                                              |
+| `messages.send`            | `messages.send()`, `messages.sendAsPluginUser()`                                                                  | Sends messages as the current user or registered plugin user.                |
+| `messages.editOwn`         | `messages.edit()`                                                                                                 | Edits plugin-owned messages.                                                 |
+| `messages.deleteOwn`       | `messages.delete()`                                                                                               | Deletes plugin-owned messages.                                               |
+| `messages.moderate`        | `messages.moderateDelete()`                                                                                       | Moderation delete path.                                                      |
+| `messages.sync`            | `messages.sync()`, `messages.import()`, `attachments.import()`                                                     | Syncs message arrays, imports historical messages locally, or imports files for those messages. |
+| `channels.read`            | `channels.list()`, `channels.select()`                                                                            | Reads and selects channels.                                                  |
+| `channels.manage`          | `channels.addTextChannel()`, `channels.addAudioChannel()`, `channels.addVideoChannel()`, `channels.remove()`, `channels.rename()` | Mutates channel or channel-section state.                                    |
+| `server.read`              | `server.getCurrent()`                                                                                             | Reads active server.                                                         |
+| `server.manage`            | `server.updateIcon()`, `server.updatePermissions()`, `server.updateSettings()`                                    | Updates server icon, permissions, or settings. `server.updateIcon()` resolves when the local icon update has been persisted or rejects if the current user is not allowed to manage the server icon. |
+| `p2p.data`                 | `p2p.connectedPeers()`, `p2p.broadcastData()`, `p2p.sendData()`                                                   | Uses plugin peer data paths.                                                 |
+| `p2p.media`                | Reserved peer media features.                                                                                     | Included for media-facing plugins.                                           |
+| `media.playAudio`          | `media.playAudioClip()`                                                                                           | Plays an audio URL locally.                                                  |
+| `media.addAudioStream`     | `media.addCustomAudioStream()`                                                                                    | Adds a custom stream to voice handling.                                      |
+| `media.addVideoStream`     | `media.addCustomVideoStream()`                                                                                    | Registers custom video stream contribution.                                  |
+| `audio.volume`             | `media.setInputVolume()`, `media.setOutputVolume()`                                                               | Adjusts local voice volume.                                                  |
+| `audio.effects`            | Reserved audio effect features.                                                                                   | Included for audio processing plugins.                                       |
+| `ui.settings`              | `ui.registerSettingsPage()`                                                                                       | Adds settings pages.                                                         |
+| `ui.pages`                 | `ui.registerAppPage()`, `ui.registerComposerAction()`, `ui.registerProfileAction()`, `ui.registerToolbarAction()` | Adds app pages and action entry points, including View plugins menu actions. |
+| `ui.sidePanel`             | `ui.registerSidePanel()`                                                                                          | Adds side panels.                                                            |
+| `ui.channelsSection`       | `ui.registerChannelSection()`                                                                                     | Adds channel sections.                                                       |
+| `ui.embeds`                | `ui.registerEmbedRenderer()`                                                                                      | Renders custom embeds.                                                       |
+| `ui.dom`                   | `ui.mountElement()`                                                                                               | Mounts plugin-owned DOM into app targets.                                    |
+| `storage.local`            | `storage.*`, `clientData.*`                                                                                       | Reads and writes plugin-local data.                                          |
+| `storage.serverData.read`  | `serverData.read()`                                                                                               | Reads local per-user/per-server plugin data.                                 |
+| `storage.serverData.write` | `serverData.write()`, `serverData.remove()`                                                                       | Writes or removes local per-user/per-server plugin data.                     |
+| `events.server.publish`    | `events.publishServer()`                                                                                          | Publishes declared server plugin events.                                     |
+| `events.server.subscribe`  | `events.subscribeServer()`                                                                                        | Subscribes to declared server plugin events.                                 |
+| `events.p2p.publish`       | `events.publishP2p()`, `messageBus.publish()`, `messageBus.sendLatestMessages()`                                  | Publishes declared P2P/plugin bus events.                                    |
+| `events.p2p.subscribe`     | `events.subscribeP2p()`, `messageBus.subscribe()`                                                                 | Subscribes to declared P2P/plugin bus events.                                |
 
 ## Recommended Practice
 

docs-site/docs/plugin-development/create-a-plugin.md

@@ -27,7 +27,7 @@ The manifest file can be named `toju-plugin.json` or `plugin.json`. Entrypoints
   "schemaVersion": 1,
   "id": "example.hello-world",
   "title": "Hello World",
-  "description": "Adds a toolbar action that sends a message.",
+  "description": "Adds a View plugins menu action that sends a message.",
   "version": "1.0.0",
   "kind": "client",
   "scope": "client",
@@ -49,6 +49,7 @@ export function activate(context) {
   api.logger.info('Hello World activated');
 
   const disposable = api.ui.registerToolbarAction('hello', {
+    icon: 'HI',
     label: 'Hello',
     run: () => api.messages.send('Hello from my plugin')
   });
@@ -65,15 +66,17 @@ export function deactivate(context) {
 }
 ```
 
+`registerToolbarAction()` adds an action tile to the server side panel's View plugins menu. Use `icon` for the tile badge and keep the `label` short enough to scan in a grid.
+
 ## Lifecycle Hooks
 
-| Hook | When it runs | Use it for |
-| --- | --- | --- |
-| `activate(context)` | During explicit plugin activation. | Register UI, subscribe to events, initialize state. |
-| `ready(context)` | After the load-order pass has activated ready plugins. | Cross-plugin coordination that needs other plugins loaded. |
-| `deactivate(context)` | During unload or reload. | Flush state and log shutdown. Disposables are also cleaned up by the host. |
-| `onPluginDataChanged(context, event)` | When plugin data changes are observed. | React to plugin-scoped persistence changes. |
-| `onServerRequirementsChanged(context, snapshot)` | When server plugin requirements change. | Adapt to required, optional, blocked, or incompatible server plugins. |
+| Hook                                             | When it runs                                           | Use it for                                                                 |
+| ------------------------------------------------ | ------------------------------------------------------ | -------------------------------------------------------------------------- |
+| `activate(context)`                              | During explicit plugin activation.                     | Register UI, subscribe to events, initialize state.                        |
+| `ready(context)`                                 | After the load-order pass has activated ready plugins. | Cross-plugin coordination that needs other plugins loaded.                 |
+| `deactivate(context)`                            | During unload or reload.                               | Flush state and log shutdown. Disposables are also cleaned up by the host. |
+| `onPluginDataChanged(context, event)`            | When plugin data changes are observed.                 | React to plugin-scoped persistence changes.                                |
+| `onServerRequirementsChanged(context, snapshot)` | When server plugin requirements change.                | Adapt to required, optional, blocked, or incompatible server plugins.      |
 
 ## Cleanup
 

docs-site/docs/plugin-development/examples.md

@@ -13,7 +13,7 @@ sidebar_position: 5
   "schemaVersion": 1,
   "id": "example.toolbar-message",
   "title": "Toolbar Message",
-  "description": "Adds a toolbar action that sends a reusable message.",
+  "description": "Adds a View plugins menu action that sends a reusable message.",
   "version": "1.0.0",
   "kind": "client",
   "scope": "client",
@@ -33,13 +33,18 @@ sidebar_position: 5
 export function activate(context) {
   const { api } = context;
 
-  context.subscriptions.push(api.ui.registerToolbarAction('standup-message', {
-    label: 'Standup',
-    run: () => api.messages.send('Standup: yesterday, today, blocked')
-  }));
+  context.subscriptions.push(
+    api.ui.registerToolbarAction('standup-message', {
+      icon: 'ST',
+      label: 'Standup',
+      run: (actionContext) => api.messages.send('Standup: yesterday, today, blocked', actionContext.textChannel?.id)
+    })
+  );
 }
 ```
 
+The action appears as a tile in the server side panel's View plugins menu and runs with `source: 'toolbarAction'`.
+
 ## Settings Page Plugin
 
 ```json
@@ -67,19 +72,21 @@ export function activate(context) {
 export function activate(context) {
   const { api } = context;
 
-  context.subscriptions.push(api.ui.registerSettingsPage('preferences', {
-    label: 'Example Preferences',
-    render: () => {
-      const root = document.createElement('section');
-      const button = document.createElement('button');
+  context.subscriptions.push(
+    api.ui.registerSettingsPage('preferences', {
+      label: 'Example Preferences',
+      render: () => {
+        const root = document.createElement('section');
+        const button = document.createElement('button');
 
-      button.type = 'button';
-      button.textContent = 'Remember preference';
-      button.onclick = () => api.storage.set('enabled', true);
-      root.append(button);
-      return root;
-    }
-  }));
+        button.type = 'button';
+        button.textContent = 'Remember preference';
+        button.onclick = () => api.storage.set('enabled', true);
+        root.append(button);
+        return root;
+      }
+    })
+  );
 }
 ```
 
@@ -99,13 +106,7 @@ A server-scoped plugin can be installed as a server requirement and auto-install
   "apiVersion": "1.0.0",
   "compatibility": { "minimumTojuVersion": "1.0.0" },
   "entrypoint": "./main.js",
-  "capabilities": [
-    "server.read",
-    "users.manage",
-    "ui.sidePanel",
-    "media.playAudio",
-    "messages.send"
-  ],
+  "capabilities": ["server.read", "users.manage", "ui.sidePanel", "media.playAudio", "messages.send"],
   "pluginUser": {
     "displayName": "Soundboard",
     "label": "Audio helper"
@@ -121,23 +122,25 @@ export function activate(context) {
     displayName: 'Soundboard'
   });
 
-  context.subscriptions.push(api.ui.registerSidePanel('sounds', {
-    label: 'Soundboard',
-    render: () => {
-      const panel = document.createElement('div');
-      const button = document.createElement('button');
+  context.subscriptions.push(
+    api.ui.registerSidePanel('sounds', {
+      label: 'Soundboard',
+      render: () => {
+        const panel = document.createElement('div');
+        const button = document.createElement('button');
 
-      button.type = 'button';
-      button.textContent = 'Play chime';
-      button.onclick = async () => {
-        await api.media.playAudioClip({ url: './chime.wav', volume: 0.7 });
-        api.messages.sendAsPluginUser({ pluginUserId: botId, content: 'Played chime' });
-      };
+        button.type = 'button';
+        button.textContent = 'Play chime';
+        button.onclick = async () => {
+          await api.media.playAudioClip({ url: './chime.wav', volume: 0.7 });
+          api.messages.sendAsPluginUser({ pluginUserId: botId, content: 'Played chime' });
+        };
 
-      panel.append(button);
-      return panel;
-    }
-  }));
+        panel.append(button);
+        return panel;
+      }
+    })
+  );
 }
 ```
 
@@ -162,12 +165,14 @@ export function activate(context) {
 export function activate(context) {
   const { api } = context;
 
-  context.subscriptions.push(api.messageBus.subscribe({
-    topic: 'poll:votes',
-    replayLatest: true,
-    latestMessageLimit: 20,
-    handler: (event) => api.logger.info('Vote received', event.payload)
-  }));
+  context.subscriptions.push(
+    api.messageBus.subscribe({
+      topic: 'poll:votes',
+      replayLatest: true,
+      latestMessageLimit: 20,
+      handler: (event) => api.logger.info('Vote received', event.payload)
+    })
+  );
 
   api.messageBus.publish({
     topic: 'poll:votes',
@@ -192,10 +197,12 @@ export function activate(context) {
   badge.style.right = '1rem';
   badge.style.bottom = '1rem';
 
-  context.subscriptions.push(context.api.ui.mountElement('active-badge', {
-    target: 'body',
-    element: badge
-  }));
+  context.subscriptions.push(
+    context.api.ui.mountElement('active-badge', {
+      target: 'body',
+      element: badge
+    })
+  );
 }
 ```
 

docs-site/docs/user-guide/plugins.md

@@ -8,11 +8,11 @@ Plugins add features to MetoYou. They can add pages, buttons, panels, settings,
 
 ## Types of Plugins
 
-| Type | What it means |
-| --- | --- |
-| Client plugin | Installed for your app. It follows you across servers when active. |
-| Server plugin | Installed for a specific server. It may be required, recommended, optional, blocked, or incompatible. |
-| Library plugin | Shared plugin code used by other plugins. It is not normally something users interact with directly. |
+| Type           | What it means                                                                                         |
+| -------------- | ----------------------------------------------------------------------------------------------------- |
+| Client plugin  | Installed for your app. It follows you across servers when active.                                    |
+| Server plugin  | Installed for a specific server. It may be required, recommended, optional, blocked, or incompatible. |
+| Library plugin | Shared plugin code used by other plugins. It is not normally something users interact with directly.  |
 
 ## Install from the Plugin Store
 
@@ -26,6 +26,10 @@ Plugins add features to MetoYou. They can add pages, buttons, panels, settings,
 
 Server-scoped plugins installed to the server you are currently viewing are enabled and activated automatically after install, so their panels, actions, or embeds can appear immediately.
 
+## Use Plugin Actions
+
+When plugins add quick actions to a server, the server side panel shows a View plugins link in the plugin area. Open it to see a grid of plugin action tiles. Selecting a tile runs that plugin's action in the current server and channel context.
+
 ## Install a Local Plugin
 
 Desktop builds can discover local plugin folders from the app data plugins directory.
@@ -40,12 +44,12 @@ Desktop builds can discover local plugin folders from the app data plugins direc
 
 When a server uses plugins, MetoYou may show a prompt.
 
-| Status | Meaning |
-| --- | --- |
-| Required | You must install the plugin to join or continue using that server. |
-| Recommended | The server suggests the plugin, but you can choose. |
-| Optional | The plugin is available for the server, but not required. |
-| Blocked | The server marks the plugin as not allowed. |
+| Status       | Meaning                                                                           |
+| ------------ | --------------------------------------------------------------------------------- |
+| Required     | You must install the plugin to join or continue using that server.                |
+| Recommended  | The server suggests the plugin, but you can choose.                               |
+| Optional     | The plugin is available for the server, but not required.                         |
+| Blocked      | The server marks the plugin as not allowed.                                       |
 | Incompatible | The plugin version does not work with your app version or the server requirement. |
 
 Required plugins are still installed locally on your device. The signaling server stores requirement metadata only; it does not run plugin code.
@@ -56,13 +60,13 @@ Plugins must ask for capabilities before using sensitive features.
 
 Examples:
 
-| Capability area | Why a plugin might ask |
-| --- | --- |
-| Messages | Send messages, read current messages, moderate messages, or render embeds. |
-| Users and roles | Read member lists, create plugin users, or manage users. |
-| Voice and media | Play audio, add an audio stream, add a video stream, or adjust volume. |
-| UI | Add pages, settings pages, side panels, toolbar buttons, or DOM elements. |
-| Storage | Save plugin preferences locally or per server. |
+| Capability area | Why a plugin might ask                                                     |
+| --------------- | -------------------------------------------------------------------------- |
+| Messages        | Send messages, read current messages, moderate messages, or render embeds. |
+| Users and roles | Read member lists, create plugin users, or manage users.                   |
+| Voice and media | Play audio, add an audio stream, add a video stream, or adjust volume.     |
+| UI              | Add pages, settings pages, side panels, toolbar buttons, or DOM elements.  |
+| Storage         | Save plugin preferences locally or per server.                             |
 
 Only grant capabilities to plugins you trust.
 
@@ -79,4 +83,4 @@ The Plugin Manager lets you:
 
 ## Plugin Safety Notes
 
-Plugins are browser-safe JavaScript modules loaded by the client. They do not run on the signaling server. A plugin can only call privileged MetoYou APIs when its manifest declares the capability and you grant it.
+Plugins are browser-safe JavaScript modules loaded by the client. They do not run on the signaling server. A plugin can only call privileged MetoYou APIs when its manifest declares the capability and you grant it.

e2e/CONTEXT.md

@@ -0,0 +1,50 @@
+# End-to-End Suite (e2e)
+
+Owns Playwright-based end-to-end verification of the desktop product. Tests boot the real Electron application against the real signaling server and exercise user-visible flows across chat, voice, screen-share, settings, plugins, and auth.
+
+> **Format reference:**
+> - **Vocabulary** — bold term, one-sentence definition, aliases to avoid.
+> - **Relationships** — bullets with bold terms and cardinality.
+> - **Boundaries / IO** — what this subdomain exposes and consumes.
+> - **Invariants** — rules that always hold.
+> - **Flagged ambiguities** — terms in dispute with proposed resolutions.
+>
+> See `agents-docs/AGENTS_CONTEXT.md` for the contract. Update in the same turn a trigger fires (see `agents-docs/AGENT_WORKFLOW.md` § CONTEXT.md upkeep).
+
+## Vocabulary
+
+| Term | Definition | Aliases to avoid |
+|------|------------|------------------|
+| **Feature area** | A top-level folder under `tests/` (`auth/`, `chat/`, `voice/`, `screen-share/`, `settings/`, `plugins/`) corresponding to a slice of user-visible behavior. | "category", "section" |
+| **Page object** | A test-side abstraction over a screen or panel that exposes user-intent methods rather than raw selectors. | "page model" |
+| **Fixture** | A Playwright `test.extend(...)` setup that prepares one or more user/app instances before a test runs. | "helper" |
+| **Pair test** | An E2E test that boots two Electron instances simultaneously to verify P2P flows (calls, screen-share, transfers). | "multi-client test" |
+
+## Relationships
+
+- A **Feature area** owns one or more `*.spec.ts` files plus its own **Page objects** and **Fixtures**.
+- A **Pair test** depends on the **server** subdomain being reachable — both clients connect to the same signaling server.
+- **Page objects** depend only on the rendered DOM produced by **toju-app**; if a selector changes, only the page object should need updating.
+- The suite as a whole depends on **electron** (built via `npm run build:electron`) and a usable **server** (`npm run server:dev` or `npm run dev`).
+
+## Boundaries / IO
+
+- **Exposes:** test results (HTML report at `test-results/html-report`, JUnit/JSON output on CI). No production surface.
+- **Consumes:**
+  - The built product (toju-app + electron) — typically launched via Playwright's Electron support.
+  - The signaling server (started before the suite runs).
+  - System resources: audio devices for voice tests, screen-capture for screen-share tests. The `.agents/skills/playwright-e2e/SKILL.md` documents how the suite handles the multi-client setup.
+
+## Invariants
+
+- Tests interact only through **Page objects** and **Fixtures** — no raw `page.click('.css-class-name')` scattered across specs.
+- Tests must clean up state between runs — a flaky run that leaves cruft in the local database or signaling server is a bug, not an environment issue.
+- The suite must run headless on CI (`npm run test:e2e`); the `ui` and `debug` variants exist for local development only.
+
+## Flagged ambiguities
+
+- _None recorded yet — add entries when a test concept (e.g. "pair test" vs "multi-client test") resists clean definition._
+
+---
+
+*Agent-procedural rules (TDD, lint) live in `/AGENTS.md`. Practical patterns for writing Playwright tests on this project live in `.agents/skills/playwright-e2e/SKILL.md`. This file is the bounded-context domain artefact for the E2E suite.*

e2e/helpers/webrtc-helpers.ts

@@ -11,6 +11,7 @@ import { type Page } from '@playwright/test';
 export async function installWebRTCTracking(page: Page): Promise<void> {
   await page.addInitScript(() => {
     const connections: RTCPeerConnection[] = [];
+    const dataChannels: RTCDataChannel[] = [];
     const syntheticMediaResources: {
       audioCtx: AudioContext;
       source?: AudioScheduledSourceNode;
@@ -18,20 +19,40 @@ export async function installWebRTCTracking(page: Page): Promise<void> {
     }[] = [];
 
     (window as any).__rtcConnections = connections;
+    (window as any).__rtcDataChannels = dataChannels;
     (window as any).__rtcRemoteTracks = [] as { kind: string; id: string; readyState: string }[];
     (window as any).__rtcSyntheticMediaResources = syntheticMediaResources;
 
     const OriginalRTCPeerConnection = window.RTCPeerConnection;
+    const trackDataChannel = (channel: RTCDataChannel) => {
+      if (dataChannels.includes(channel)) {
+        return;
+      }
+
+      dataChannels.push(channel);
+    };
 
     (window as any).RTCPeerConnection = function(this: RTCPeerConnection, ...args: any[]) {
       const pc: RTCPeerConnection = new OriginalRTCPeerConnection(...args);
+      const originalCreateDataChannel = pc.createDataChannel.bind(pc);
 
       connections.push(pc);
 
+      pc.createDataChannel = ((label: string, options?: RTCDataChannelInit) => {
+        const channel = originalCreateDataChannel(label, options);
+
+        trackDataChannel(channel);
+        return channel;
+      }) as RTCPeerConnection['createDataChannel'];
+
       pc.addEventListener('connectionstatechange', () => {
         (window as any).__lastRtcState = pc.connectionState;
       });
 
+      pc.addEventListener('datachannel', (event: RTCDataChannelEvent) => {
+        trackDataChannel(event.channel);
+      });
+
       pc.addEventListener('track', (event: RTCTrackEvent) => {
         (window as any).__rtcRemoteTracks.push({
           kind: event.track.kind,
@@ -211,6 +232,66 @@ export async function waitForConnectedPeerCount(page: Page, expectedCount: numbe
   );
 }
 
+/** Returns the number of tracked RTCDataChannels in the open state. */
+export async function getOpenDataChannelCount(page: Page): Promise<number> {
+  return page.evaluate(
+    () => ((window as any).__rtcDataChannels as RTCDataChannel[] | undefined)?.filter(
+      (channel) => channel.readyState === 'open'
+    ).length ?? 0
+  );
+}
+
+/** Wait until the expected number of tracked RTCDataChannels are open. */
+export async function waitForOpenDataChannelCount(page: Page, expectedCount: number, timeout = 45_000): Promise<void> {
+  await page.waitForFunction(
+    (count) => ((window as any).__rtcDataChannels as RTCDataChannel[] | undefined)?.filter(
+      (channel) => channel.readyState === 'open'
+    ).length === count,
+    expectedCount,
+    { timeout }
+  );
+}
+
+/** Close every currently-open RTCDataChannel and return how many were closed. */
+export async function closeOpenDataChannels(page: Page): Promise<number> {
+  return page.evaluate(() => {
+    const channels = ((window as any).__rtcDataChannels as RTCDataChannel[] | undefined) ?? [];
+
+    let closed = 0;
+
+    for (const channel of channels) {
+      if (channel.readyState !== 'open') {
+        continue;
+      }
+
+      channel.close();
+      closed++;
+    }
+
+    return closed;
+  });
+}
+
+/** Dispatch a synthetic data-channel error event on each open channel. */
+export async function dispatchDataChannelErrors(page: Page): Promise<number> {
+  return page.evaluate(() => {
+    const channels = ((window as any).__rtcDataChannels as RTCDataChannel[] | undefined) ?? [];
+
+    let dispatched = 0;
+
+    for (const channel of channels) {
+      if (channel.readyState !== 'open') {
+        continue;
+      }
+
+      channel.dispatchEvent(new Event('error'));
+      dispatched++;
+    }
+
+    return dispatched;
+  });
+}
+
 /**
  * Resume all suspended AudioContext instances created by the synthetic
  * media patch.  Uses CDP `Runtime.evaluate` with `userGesture: true` so

e2e/tests/chat/dm-flow.spec.ts

@@ -35,6 +35,18 @@ test.describe('Direct message flow', () => {
     });
   });
 
+  test('delivers a live DM to the recipient conversation', async ({ createClient }) => {
+    const scenario = await createDmScenario(createClient);
+    const liveMessage = `Live DM ${uniqueName('msg')}`;
+
+    await openDmFromRoomUserCard(scenario.alice.page, 'Bob');
+    await scenario.alice.page.getByTestId('dm-input').fill(liveMessage);
+    await scenario.alice.page.getByTestId('dm-input').press('Enter');
+
+    await openDmFromRoomUserCard(scenario.bob.page, 'Alice');
+    await expect(scenario.bob.page.locator('app-dm-chat').getByText(liveMessage)).toBeVisible({ timeout: 20_000 });
+  });
+
   test('shows friend and message actions on the search people list', async ({ createClient }) => {
     const scenario = await createDmScenario(createClient);
 
@@ -110,6 +122,15 @@ async function registerUser(page: Page, username: string, displayName: string):
   await expect(page).toHaveURL(/\/search/, { timeout: 15_000 });
 }
 
+async function openDmFromRoomUserCard(page: Page, displayName: string): Promise<void> {
+  const userCard = page.locator('[data-testid^="room-user-card-"]', { hasText: displayName }).first();
+
+  await expect(userCard).toBeVisible({ timeout: 20_000 });
+  await userCard.getByRole('button', { name: `Message ${displayName}` }).click();
+  await expect(page).toHaveURL(/\/dm\//, { timeout: 15_000 });
+  await expect(page.getByRole('heading', { name: displayName })).toBeVisible({ timeout: 10_000 });
+}
+
 function uniqueName(prefix: string): string {
   return `${prefix}-${Date.now()}-${Math.random().toString(36)
     .slice(2, 8)}`;

e2e/tests/plugins/plugin-api-two-users.spec.ts

@@ -39,7 +39,6 @@ test.describe('Plugin API multi-user runtime', () => {
       await closeSettingsModal(scenario.bob.page);
       await expect(soundboardComposerButton(scenario.bob.page)).toBeVisible({ timeout: 20_000 });
       await expect(scenario.bob.page.getByText(SOUND_BOARD_TEXT, { exact: true })).toBeVisible({ timeout: 20_000 });
-      await expect(scenario.bob.page.getByTestId('e2e-plugin-owned-dom')).toHaveAttribute('data-plugin-owner', 'e2e.all-api-plugin');
     });
 
     await test.step('Alice opens the plugin soundboard modal and plays a sound to voice', async () => {
@@ -150,7 +149,7 @@ async function installGrantAndActivatePlugin(page: Page, installFromStore: boole
     await page.getByLabel('Plugin source manifest URL').fill(PLUGIN_SOURCE_URL);
     await page.getByRole('button', { name: 'Add Source' }).click();
     await expect(page.getByRole('heading', { name: PLUGIN_TITLE })).toBeVisible({ timeout: 20_000 });
-    await page.getByRole('button', { exact: true, name: /^(Install|Install to Server)$/ }).click();
+    await page.locator('article', { hasText: PLUGIN_TITLE }).getByRole('button', { exact: true, name: /^(Install|Install to Server)$/ }).click();
     await expect(page.getByRole('dialog', { name: PLUGIN_TITLE })).toBeVisible({ timeout: 10_000 });
     await page.getByRole('button', { name: 'Install and Activate' }).click();
     await expect(page.locator('article', { hasText: PLUGIN_TITLE }).getByText('Installed')).toBeVisible({ timeout: 20_000 });

e2e/tests/plugins/plugin-manager-ui.spec.ts

@@ -33,9 +33,11 @@ test.describe('Plugin manager UI', () => {
       await page.getByLabel('Plugin source manifest URL').fill('http://localhost:4200/plugins/e2e-plugin-source.json');
       await page.getByRole('button', { name: 'Add Source' }).click();
       await expect(page.getByRole('heading', { name: 'E2E All API Plugin' })).toBeVisible({ timeout: 15_000 });
-      await page.getByRole('button', { name: 'Readme' }).click();
+      const pluginCard = page.locator('article', { hasText: 'E2E All API Plugin' });
+
+      await pluginCard.getByRole('button', { name: 'Readme' }).click();
       await expect(page.getByText('Fixture plugin for Playwright coverage.')).toBeVisible({ timeout: 10_000 });
-      await page.getByRole('button', { exact: true, name: /^(Install|Install to Server)$/ }).click();
+      await pluginCard.getByRole('button', { exact: true, name: /^(Install|Install to Server)$/ }).click();
       const installDialog = page.getByRole('dialog', { name: 'E2E All API Plugin' });
 
       await expect(installDialog).toBeVisible({ timeout: 10_000 });

e2e/tests/voice/data-channel-recovery.spec.ts

@@ -0,0 +1,181 @@
+import { expect, type Page } from '@playwright/test';
+import { test, type Client } from '../../fixtures/multi-client';
+import {
+  closeOpenDataChannels,
+  dispatchDataChannelErrors,
+  dumpRtcDiagnostics,
+  getOpenDataChannelCount,
+  installAutoResumeAudioContext,
+  installWebRTCTracking,
+  waitForAllPeerAudioFlow,
+  waitForAudioStatsPresent,
+  waitForConnectedPeerCount,
+  waitForOpenDataChannelCount
+} from '../../helpers/webrtc-helpers';
+import { RegisterPage } from '../../pages/register.page';
+import { ServerSearchPage } from '../../pages/server-search.page';
+import { ChatRoomPage } from '../../pages/chat-room.page';
+
+interface VoiceClient extends Client {
+  displayName: string;
+  username: string;
+}
+
+const USER_PASSWORD = 'TestPass123!';
+const VOICE_CHANNEL = 'General';
+
+test.describe('Voice data-channel recovery', () => {
+  test('keeps two users hearing each other after a data-channel error and close', async ({ createClient }) => {
+    test.setTimeout(240_000);
+
+    const clients = await createVoiceScenario(createClient, 2, `DC Recovery Duo ${Date.now()}`);
+    const [alice, bob] = clients;
+
+    await assertMeshAudio(clients, 1, 'initial two-user voice');
+
+    await test.step('A non-fatal data-channel error does not interrupt audio', async () => {
+      const dispatched = await dispatchDataChannelErrors(alice.page);
+
+      expect(dispatched).toBeGreaterThan(0);
+      await waitForOpenDataChannelCount(alice.page, 1, 15_000);
+      await waitForOpenDataChannelCount(bob.page, 1, 15_000);
+      await assertMeshAudio(clients, 1, 'after synthetic data-channel error');
+    });
+
+    await test.step('A closed data channel is rebuilt and audio resumes both ways', async () => {
+      const closed = await closeOpenDataChannels(alice.page);
+
+      expect(closed).toBeGreaterThan(0);
+      await waitForConnectedPeerCount(alice.page, 1, 60_000);
+      await waitForConnectedPeerCount(bob.page, 1, 60_000);
+      await waitForOpenDataChannelCount(alice.page, 1, 60_000);
+      await waitForOpenDataChannelCount(bob.page, 1, 60_000);
+      await assertMeshAudio(clients, 1, 'after data-channel close recovery');
+    });
+  });
+
+  test('heals a three-user voice mesh when one client loses every data channel', async ({ createClient }) => {
+    test.setTimeout(300_000);
+
+    const clients = await createVoiceScenario(createClient, 3, `DC Recovery Trio ${Date.now()}`);
+    const bob = clients[1];
+
+    await assertMeshAudio(clients, 2, 'initial three-user mesh');
+
+    await test.step('Bob loses all control channels and the full mesh recovers', async () => {
+      const closed = await closeOpenDataChannels(bob.page);
+
+      expect(closed).toBe(2);
+
+      for (const client of clients) {
+        await waitForConnectedPeerCount(client.page, 2, 90_000);
+        await waitForOpenDataChannelCount(client.page, 2, 90_000);
+      }
+
+      await assertMeshAudio(clients, 2, 'after full control-channel recovery');
+    });
+  });
+});
+
+async function createVoiceScenario(
+  createClient: () => Promise<Client>,
+  userCount: number,
+  serverName: string
+): Promise<VoiceClient[]> {
+  const clients: VoiceClient[] = [];
+
+  for (let index = 0; index < userCount; index++) {
+    const client = await createClient();
+    const displayName = `DC Voice ${index + 1}`;
+
+    await installDeterministicVoiceSettings(client.page);
+    await installWebRTCTracking(client.page);
+    await installAutoResumeAudioContext(client.page);
+
+    clients.push({
+      ...client,
+      displayName,
+      username: `dc_voice_${Date.now()}_${index + 1}`
+    });
+  }
+
+  await test.step('Register clients', async () => {
+    for (const client of clients) {
+      const registerPage = new RegisterPage(client.page);
+
+      await registerPage.goto();
+      await registerPage.register(client.username, client.displayName, USER_PASSWORD);
+      await expect(client.page).toHaveURL(/\/search/, { timeout: 20_000 });
+    }
+  });
+
+  await test.step('Create and join server', async () => {
+    const hostSearch = new ServerSearchPage(clients[0].page);
+
+    await hostSearch.createServer(serverName, { description: 'Data-channel recovery voice test' });
+    await expect(clients[0].page).toHaveURL(/\/room\//, { timeout: 20_000 });
+
+    for (const client of clients.slice(1)) {
+      const searchPage = new ServerSearchPage(client.page);
+
+      await searchPage.joinServerFromSearch(serverName);
+      await expect(client.page).toHaveURL(/\/room\//, { timeout: 20_000 });
+    }
+  });
+
+  await test.step('Join everyone to voice', async () => {
+    const hostRoom = new ChatRoomPage(clients[0].page);
+
+    await hostRoom.ensureVoiceChannelExists(VOICE_CHANNEL);
+
+    for (const client of clients) {
+      const room = new ChatRoomPage(client.page);
+
+      await room.joinVoiceChannel(VOICE_CHANNEL);
+      await expect(room.voiceControls).toBeVisible({ timeout: 20_000 });
+    }
+
+    const expectedRemotePeers = clients.length - 1;
+
+    for (const client of clients) {
+      await waitForConnectedPeerCount(client.page, expectedRemotePeers, 90_000);
+      await waitForOpenDataChannelCount(client.page, expectedRemotePeers, 90_000);
+      await waitForAudioStatsPresent(client.page, 30_000);
+    }
+  });
+
+  return clients;
+}
+
+async function installDeterministicVoiceSettings(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    localStorage.setItem('metoyou_voice_settings', JSON.stringify({
+      inputVolume: 100,
+      outputVolume: 100,
+      audioBitrate: 96,
+      latencyProfile: 'balanced',
+      includeSystemAudio: false,
+      noiseReduction: false,
+      screenShareQuality: 'balanced',
+      askScreenShareQuality: false
+    }));
+  });
+}
+
+async function assertMeshAudio(
+  clients: readonly VoiceClient[],
+  expectedRemotePeers: number,
+  label: string
+): Promise<void> {
+  for (const client of clients) {
+    try {
+      await waitForAllPeerAudioFlow(client.page, expectedRemotePeers, 60_000);
+    } catch (error) {
+      const dataChannelCount = await getOpenDataChannelCount(client.page);
+
+      console.log(`[${client.displayName} ${label} data channels] ${dataChannelCount}`);
+      console.log(`[${client.displayName} ${label} RTC]\n${await dumpRtcDiagnostics(client.page)}`);
+      throw error;
+    }
+  }
+}

e2e/tests/voice/direct-call.spec.ts

@@ -0,0 +1,745 @@
+import { expect, type Page } from '@playwright/test';
+import { test, type Client } from '../../fixtures/multi-client';
+import {
+  closeOpenDataChannels,
+  dumpRtcDiagnostics,
+  installAutoResumeAudioContext,
+  installWebRTCTracking,
+  waitForAllPeerAudioFlow,
+  waitForAudioFlow,
+  waitForAudioStatsPresent,
+  waitForConnectedPeerCount,
+  waitForOpenDataChannelCount,
+  waitForInboundVideoFlow,
+  waitForOutboundVideoFlow,
+  waitForPeerConnected
+} from '../../helpers/webrtc-helpers';
+import { RegisterPage } from '../../pages/register.page';
+import { ServerSearchPage } from '../../pages/server-search.page';
+import { ChatMessagesPage } from '../../pages/chat-messages.page';
+import { disableLastViewedChatResume } from '../../helpers/seed-test-endpoint';
+
+interface DirectCallScenario {
+  alice: Client;
+  bob: Client;
+  charlie?: Client;
+  aliceUserId: string;
+  bobUserId: string;
+  charlieUserId?: string;
+}
+
+interface AudioFlowDelta {
+  outboundBytesDelta: number;
+  inboundBytesDelta: number;
+  outboundPacketsDelta: number;
+  inboundPacketsDelta: number;
+}
+
+interface VideoFlowDelta {
+  outboundBytesDelta: number;
+  inboundBytesDelta: number;
+  outboundPacketsDelta: number;
+  inboundPacketsDelta: number;
+}
+
+const USER_PASSWORD = 'TestPass123!';
+
+test.describe('Direct private calls', () => {
+  test.describe.configure({ timeout: 240_000 });
+
+  test('two users can ring, answer, chat, see self voice indicators, and exchange audio', async ({ createClient }) => {
+    const scenario = await createDirectCallScenario(createClient, { includeCharlie: true });
+    const callMessage = `Call chat ${uniqueName('msg')}`;
+    const privateOnlyMessage = `Private before group ${uniqueName('msg')}`;
+    const groupMessage = `Group call chat ${uniqueName('msg')}`;
+
+    await test.step('Alice starts a call from the search people card', async () => {
+      await disableLastViewedChatResume(scenario.alice.page);
+      await scenario.alice.page.goto('/search', { waitUntil: 'domcontentloaded' });
+      await expect(scenario.alice.page.locator('app-user-search-list')).toBeVisible({ timeout: 20_000 });
+
+      const bobPeopleCard = scenario.alice.page.locator(`[data-testid="user-card-${scenario.bobUserId}"]`, { hasText: 'Bob' }).first();
+
+      await expect(bobPeopleCard).toBeVisible({ timeout: 20_000 });
+      await bobPeopleCard.hover();
+      await bobPeopleCard.getByRole('button', { name: 'Call Bob' }).click();
+      await expect(scenario.alice.page).toHaveURL(/\/call\//, { timeout: 20_000 });
+      await expect(scenario.alice.page.locator('app-private-call')).toBeVisible({ timeout: 20_000 });
+      await expect(scenario.alice.page.locator('[data-testid^="server-rail-call-"]')).toHaveCount(1, { timeout: 20_000 });
+    });
+
+    await test.step('Alice starts sharing before Bob joins', async () => {
+      await scenario.alice.page.getByRole('button', { name: 'Share screen' }).click();
+      await expect(scenario.alice.page.getByRole('button', { name: 'Stop sharing screen' })).toBeVisible({ timeout: 20_000 });
+      await expect(scenario.alice.page.getByTestId('private-call-focused-stream')).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Bob receives a ringing call and the ring stops when he answers', async () => {
+      await expect
+        .poll(async () => await getCallAudioPlayCount(scenario.bob.page), {
+          timeout: 20_000,
+          intervals: [500, 1_000]
+        })
+        .toBeGreaterThan(0);
+
+      await expect(scenario.bob.page.locator('[data-testid^="server-rail-call-"]')).toHaveCount(1, { timeout: 20_000 });
+      await expect
+        .poll(async () => await getCallNotificationCount(scenario.bob.page), {
+          timeout: 10_000,
+          intervals: [250, 500]
+        })
+        .toBeGreaterThan(0);
+
+      await answerIncomingCall(scenario.bob.page);
+      await expect(scenario.bob.page.locator('[data-testid^="server-rail-call-"]')).toHaveCount(1, { timeout: 20_000 });
+
+      await expect
+        .poll(async () => await getActiveCallAudioLoops(scenario.bob.page), {
+          timeout: 10_000,
+          intervals: [250, 500]
+        })
+        .toBe(0);
+
+      await expect
+        .poll(async () => await getCallAudioPauseCount(scenario.bob.page), {
+          timeout: 10_000,
+          intervals: [250, 500]
+        })
+        .toBeGreaterThan(0);
+    });
+
+    await test.step('WebRTC connects and late-join screen share is visible', async () => {
+      await waitForPeerConnected(scenario.alice.page, 45_000);
+      await waitForPeerConnected(scenario.bob.page, 45_000);
+      await expectParticipantConnected(scenario.alice.page, scenario.aliceUserId);
+      await expectParticipantConnected(scenario.alice.page, scenario.bobUserId);
+      await expectParticipantConnected(scenario.bob.page, scenario.aliceUserId);
+      await expectParticipantConnected(scenario.bob.page, scenario.bobUserId);
+
+      const aliceVideo = await waitForOutboundVideoFlow(scenario.alice.page, 30_000);
+      const bobVideo = await waitForInboundVideoFlow(scenario.bob.page, 30_000);
+
+      if (!isOutboundVideoFlowing(aliceVideo) || !isInboundVideoFlowing(bobVideo)) {
+        console.log('[Alice direct-call RTC]\n' + (await dumpRtcDiagnostics(scenario.alice.page)));
+        console.log('[Bob direct-call RTC]\n' + (await dumpRtcDiagnostics(scenario.bob.page)));
+      }
+
+      expectOutboundVideoFlow(aliceVideo, 'Alice late-join direct call screen share');
+      expectInboundVideoFlow(bobVideo, 'Bob late-join direct call screen share');
+      await expect(scenario.bob.page.getByTestId('private-call-focused-stream')).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Audio flows in both directions', async () => {
+      await waitForAudioStatsPresent(scenario.alice.page, 30_000);
+      await waitForAudioStatsPresent(scenario.bob.page, 30_000);
+
+      const aliceDelta = await waitForAudioFlow(scenario.alice.page, 45_000);
+      const bobDelta = await waitForAudioFlow(scenario.bob.page, 45_000);
+
+      if (!isAudioFlowing(aliceDelta) || !isAudioFlowing(bobDelta)) {
+        console.log('[Alice direct-call RTC]\n' + (await dumpRtcDiagnostics(scenario.alice.page)));
+        console.log('[Bob direct-call RTC]\n' + (await dumpRtcDiagnostics(scenario.bob.page)));
+      }
+
+      expectAudioFlow(aliceDelta, 'Alice direct call');
+      expectAudioFlow(bobDelta, 'Bob direct call');
+    });
+
+    await test.step('Adding a third participant converts the call chat to an empty group chat', async () => {
+      if (!scenario.charlie || !scenario.charlieUserId) {
+        throw new Error('Expected direct-call scenario to include Charlie.');
+      }
+
+      const charlie = scenario.charlie;
+
+      await scenario.alice.page.getByTestId('dm-input').fill(privateOnlyMessage);
+      await scenario.alice.page.getByTestId('dm-input').press('Enter');
+      await expect(scenario.bob.page.locator('app-private-call aside app-dm-chat').getByText(privateOnlyMessage)).toBeVisible({ timeout: 20_000 });
+
+      await scenario.alice.page.getByLabel('Add user to call').selectOption(scenario.charlieUserId);
+      await scenario.alice.page.getByRole('button', { name: 'Add user' }).click();
+
+      await expect(scenario.alice.page.locator('app-private-call aside app-dm-chat').getByText(privateOnlyMessage)).toHaveCount(0, {
+        timeout: 20_000
+      });
+
+      await expect(scenario.alice.page.locator('[data-testid^="dm-rail-item-dm-group-"]')).toHaveCount(0, { timeout: 20_000 });
+      await expect(scenario.alice.page.locator('[data-testid^="server-rail-call-"]')).toHaveCount(1, { timeout: 20_000 });
+
+      await expect
+        .poll(async () => await getCallAudioPlayCount(charlie.page), {
+          timeout: 20_000,
+          intervals: [500, 1_000]
+        })
+        .toBeGreaterThan(0);
+
+      await answerIncomingCall(charlie.page);
+      await expect(charlie.page.locator('app-private-call aside app-dm-chat').getByText(privateOnlyMessage)).toHaveCount(0);
+
+      await waitForConnectedPeerCount(scenario.alice.page, 2, 45_000);
+      await waitForConnectedPeerCount(scenario.bob.page, 2, 45_000);
+      await waitForConnectedPeerCount(charlie.page, 2, 45_000);
+      await Promise.all([
+        waitForAllPeerAudioFlow(scenario.alice.page, 2, 45_000),
+        waitForAllPeerAudioFlow(scenario.bob.page, 2, 45_000),
+        waitForAllPeerAudioFlow(charlie.page, 2, 45_000)
+      ]);
+
+      await expectParticipantConnected(scenario.alice.page, scenario.charlieUserId);
+      await expectParticipantConnected(scenario.bob.page, scenario.charlieUserId);
+      await expectParticipantConnected(charlie.page, scenario.aliceUserId);
+      await expectParticipantConnected(charlie.page, scenario.bobUserId);
+      await expectParticipantConnected(charlie.page, scenario.charlieUserId);
+
+      await scenario.alice.page.getByTestId('dm-input').fill(groupMessage);
+      await scenario.alice.page.getByTestId('dm-input').press('Enter');
+      await expect(scenario.bob.page.locator('app-private-call aside app-dm-chat').getByText(groupMessage)).toBeVisible({ timeout: 20_000 });
+      await expect(charlie.page.locator('app-private-call aside app-dm-chat').getByText(groupMessage)).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Private call streams can switch between all-stream and focused viewing', async () => {
+      await scenario.bob.page.getByRole('button', { name: 'Turn camera on' }).click();
+      await expect(scenario.bob.page.getByRole('button', { name: 'Turn camera off' })).toBeVisible({ timeout: 20_000 });
+
+      await expect
+        .poll(async () => await privateCallGridStreamCount(scenario.bob.page), {
+          timeout: 30_000,
+          intervals: [500, 1_000]
+        })
+        .toBeGreaterThanOrEqual(2);
+
+      await scenario.bob.page
+        .getByTestId('private-call-stream-grid')
+        .locator('app-voice-workspace-stream-tile')
+        .first()
+        .click();
+
+      await expect(scenario.bob.page.getByTestId('private-call-focused-stream')).toBeVisible({ timeout: 20_000 });
+      await expect(scenario.bob.page.getByTestId('private-call-show-all-streams')).toBeVisible({ timeout: 20_000 });
+
+      await assertSustainedMediaFlow(scenario.alice.page, scenario.bob.page, 'direct call screen share and camera');
+
+      await scenario.bob.page.getByTestId('private-call-focused-stream').dblclick();
+      await expect
+        .poll(async () => await hasFullscreenElement(scenario.bob.page), {
+          timeout: 10_000,
+          intervals: [250, 500]
+        })
+        .toBe(true);
+
+      await exitFullscreen(scenario.bob.page);
+
+      await expect
+        .poll(async () => await hasFullscreenElement(scenario.bob.page), {
+          timeout: 10_000,
+          intervals: [250, 500]
+        })
+        .toBe(false);
+
+      await scenario.bob.page.getByTestId('private-call-show-all-streams').click();
+      await expect(scenario.bob.page.getByTestId('private-call-stream-grid')).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Both clients show their own speaking indicator', async () => {
+      await expect(scenario.alice.page.getByTestId(`call-participant-${scenario.aliceUserId}`)).toHaveClass(/ring-emerald-400/, {
+        timeout: 20_000
+      });
+
+      await expect(scenario.bob.page.getByTestId(`call-participant-${scenario.bobUserId}`)).toHaveClass(/ring-emerald-400/, {
+        timeout: 20_000
+      });
+    });
+
+    await test.step('Private call layout does not require vertical scrolling', async () => {
+      await expect
+        .poll(async () => await privateCallMainHasNoVerticalOverflow(scenario.alice.page), {
+          timeout: 10_000,
+          intervals: [250, 500]
+        })
+        .toBe(true);
+
+      await expect
+        .poll(async () => await privateCallMainHasNoVerticalOverflow(scenario.bob.page), {
+          timeout: 10_000,
+          intervals: [250, 500]
+        })
+        .toBe(true);
+
+      await expect(scenario.alice.page.locator('app-private-call article').filter({ hasText: /Connected|Speaking/ })).toHaveCount(0);
+      await expect(scenario.bob.page.locator('app-private-call article').filter({ hasText: /Connected|Speaking/ })).toHaveCount(0);
+      await expect(scenario.alice.page.getByText('No live streams yet')).toHaveCount(0);
+      await expect(scenario.bob.page.getByText('No live streams yet')).toHaveCount(0);
+
+      const originalWidth = await privateCallChatWidth(scenario.alice.page);
+      const resizer = scenario.alice.page.getByTestId('private-call-chat-resizer');
+      const box = await resizer.boundingBox();
+
+      expect(box, 'private call chat resizer should be measurable').not.toBeNull();
+
+      if (box) {
+        await scenario.alice.page.mouse.move(box.x + box.width / 2, box.y + 20);
+        await scenario.alice.page.mouse.down();
+        await scenario.alice.page.mouse.move(box.x - 96, box.y + 20);
+        await scenario.alice.page.mouse.up();
+      }
+
+      await expect
+        .poll(async () => await privateCallChatWidth(scenario.alice.page), {
+          timeout: 10_000,
+          intervals: [250, 500]
+        })
+        .toBeGreaterThan(originalWidth + 40);
+    });
+
+    await test.step('Embedded call chat syncs and does not expose another call button', async () => {
+      await expect(scenario.alice.page.locator('app-private-call aside').getByRole('button', { name: /Call/i })).toHaveCount(0);
+      await expect(scenario.bob.page.locator('app-private-call aside').getByRole('button', { name: /Call/i })).toHaveCount(0);
+
+      await scenario.bob.page.getByTestId('dm-input').fill('typing from Bob');
+      await expect(scenario.alice.page.getByTestId('dm-typing-indicator')).toContainText('Bob is typing', { timeout: 20_000 });
+
+      await scenario.alice.page.getByTestId('dm-input').fill(callMessage);
+      await scenario.alice.page.getByTestId('dm-input').press('Enter');
+      await expect(scenario.bob.page.locator('app-private-call aside app-dm-chat').getByText(callMessage)).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Group chat call button rings every other participant', async () => {
+      if (!scenario.charlie) {
+        throw new Error('Expected direct-call scenario to include Charlie.');
+      }
+
+      await scenario.alice.page.getByRole('button', { name: 'Leave call' }).click();
+      await expect(scenario.alice.page).toHaveURL(/\/dm\//, { timeout: 20_000 });
+      await scenario.bob.page.getByRole('button', { name: 'Leave call' }).click();
+      await expect(scenario.bob.page).toHaveURL(/\/dm\//, { timeout: 20_000 });
+      await scenario.charlie.page.getByRole('button', { name: 'Leave call' }).click();
+      await expect(scenario.charlie.page).toHaveURL(/\/dm\//, { timeout: 20_000 });
+
+      const bobPlayCountBeforeGroupCall = await getCallAudioPlayCount(scenario.bob.page);
+      const charliePlayCountBeforeGroupCall = await getCallAudioPlayCount(scenario.charlie.page);
+
+      await scenario.alice.page
+        .locator('app-dm-chat header')
+        .getByRole('button', { name: /Call/i })
+        .click();
+
+      await expect(scenario.alice.page).toHaveURL(/\/call\/dm-group-/, { timeout: 20_000 });
+
+      await expect
+        .poll(async () => await getCallAudioPlayCount(scenario.bob.page), {
+          timeout: 20_000,
+          intervals: [500, 1_000]
+        })
+        .toBeGreaterThan(bobPlayCountBeforeGroupCall);
+
+      await expect
+        .poll(async () => await getCallAudioPlayCount(scenario.charlie.page), {
+          timeout: 20_000,
+          intervals: [500, 1_000]
+        })
+        .toBeGreaterThan(charliePlayCountBeforeGroupCall);
+
+      await answerIncomingCall(scenario.bob.page);
+      await expect
+        .poll(async () => await getActiveCallAudioLoops(scenario.bob.page), {
+          timeout: 10_000,
+          intervals: [250, 500]
+        })
+        .toBe(0);
+
+      await answerIncomingCall(scenario.charlie.page);
+      await expect
+        .poll(async () => await getActiveCallAudioLoops(scenario.charlie.page), {
+          timeout: 10_000,
+          intervals: [250, 500]
+        })
+        .toBe(0);
+    });
+  });
+
+  test('keeps private-call audio flowing after the data channel closes', async ({ createClient }) => {
+    const scenario = await createDirectCallScenario(createClient);
+
+    await test.step('Alice starts a private call and Bob joins', async () => {
+      await startCallFromSearch(scenario.alice.page, scenario.bobUserId, 'Bob');
+      await answerIncomingCall(scenario.bob.page);
+
+      await waitForConnectedPeerCount(scenario.alice.page, 1, 45_000);
+      await waitForConnectedPeerCount(scenario.bob.page, 1, 45_000);
+      await waitForOpenDataChannelCount(scenario.alice.page, 1, 45_000);
+      await waitForOpenDataChannelCount(scenario.bob.page, 1, 45_000);
+      await waitForAllPeerAudioFlow(scenario.alice.page, 1, 45_000);
+      await waitForAllPeerAudioFlow(scenario.bob.page, 1, 45_000);
+    });
+
+    await test.step('Data-channel recovery keeps the call audible', async () => {
+      const closed = await closeOpenDataChannels(scenario.alice.page);
+
+      expect(closed).toBeGreaterThan(0);
+      await waitForOpenDataChannelCount(scenario.alice.page, 1, 60_000);
+      await waitForOpenDataChannelCount(scenario.bob.page, 1, 60_000);
+      await waitForAllPeerAudioFlow(scenario.alice.page, 1, 60_000);
+      await waitForAllPeerAudioFlow(scenario.bob.page, 1, 60_000);
+    });
+  });
+
+  test('missing and ended private calls do not leave stale call controls behind', async ({ createClient }) => {
+    const scenario = await createDirectCallScenario(createClient);
+
+    await test.step('Unknown call routes render an inert empty state', async () => {
+      await scenario.alice.page.goto('/call/not-a-real-call', { waitUntil: 'domcontentloaded' });
+      await expect(scenario.alice.page.getByText('No active call for this route.')).toBeVisible({ timeout: 20_000 });
+      await expect(scenario.alice.page.getByRole('button', { name: 'Join call' })).toHaveCount(0);
+    });
+
+    await test.step('Caller leaving before answer clears recipient call route and rail icon', async () => {
+      await startCallFromSearch(scenario.alice.page, scenario.bobUserId, 'Bob');
+      await expect(incomingCallDialog(scenario.bob.page)).toBeVisible({ timeout: 20_000 });
+
+      await scenario.alice.page.getByRole('button', { name: 'Leave call' }).click();
+      await expect(scenario.alice.page).toHaveURL(/\/dm\//, { timeout: 20_000 });
+      await expect(incomingCallDialog(scenario.bob.page)).toHaveCount(0, { timeout: 20_000 });
+      await expect(scenario.bob.page.getByRole('button', { name: 'Open private call' })).toHaveCount(0);
+      await expect(scenario.bob.page.locator('[data-testid^="server-rail-call-"]')).toHaveCount(0);
+      await expect
+        .poll(async () => await getActiveCallAudioLoops(scenario.bob.page), {
+          timeout: 10_000,
+          intervals: [250, 500]
+        })
+        .toBe(0);
+    });
+
+    await test.step('Leaving an answered call clears local ringing and returns to DM', async () => {
+      await startCallFromSearch(scenario.alice.page, scenario.bobUserId, 'Bob');
+      await answerIncomingCall(scenario.bob.page);
+
+      await scenario.bob.page.getByRole('button', { name: 'Leave call' }).click();
+      await expect(scenario.bob.page).toHaveURL(/\/dm\//, { timeout: 20_000 });
+      await expect
+        .poll(async () => await getActiveCallAudioLoops(scenario.bob.page), {
+          timeout: 10_000,
+          intervals: [250, 500]
+        })
+        .toBe(0);
+    });
+  });
+});
+
+async function createDirectCallScenario(
+  createClient: () => Promise<Client>,
+  options: { includeCharlie?: boolean } = {}
+): Promise<DirectCallScenario> {
+  const suffix = uniqueName('direct-call');
+  const serverName = `Direct Call Server ${suffix}`;
+  const alice = await createClient();
+  const bob = await createClient();
+  const charlie = options.includeCharlie ? await createClient() : undefined;
+
+  await installDirectCallInstrumentation(alice.page);
+  await installDirectCallInstrumentation(bob.page);
+
+  if (charlie) {
+    await installDirectCallInstrumentation(charlie.page);
+  }
+
+  await registerUser(alice.page, `alice_${suffix}`, 'Alice');
+  await registerUser(bob.page, `bob_${suffix}`, 'Bob');
+
+  if (charlie) {
+    await registerUser(charlie.page, `charlie_${suffix}`, 'Charlie');
+  }
+
+  const aliceUserId = await getCurrentUserId(alice.page);
+  const aliceSearch = new ServerSearchPage(alice.page);
+
+  await aliceSearch.createServer(serverName, { description: 'E2E direct call discovery server' });
+  await expect(alice.page).toHaveURL(/\/room\//, { timeout: 20_000 });
+  await new ChatMessagesPage(alice.page).waitForReady();
+
+  const bobSearch = new ServerSearchPage(bob.page);
+
+  await bobSearch.joinServerFromSearch(serverName);
+  await expect(bob.page).toHaveURL(/\/room\//, { timeout: 20_000 });
+  await new ChatMessagesPage(bob.page).waitForReady();
+
+  if (charlie) {
+    const charlieSearch = new ServerSearchPage(charlie.page);
+
+    await charlieSearch.joinServerFromSearch(serverName);
+    await expect(charlie.page).toHaveURL(/\/room\//, { timeout: 20_000 });
+    await new ChatMessagesPage(charlie.page).waitForReady();
+  }
+
+  const bobRoomCard = alice.page.locator('[data-testid^="room-user-card-"]', { hasText: 'Bob' }).first();
+  const charlieRoomCard = charlie ? alice.page.locator('[data-testid^="room-user-card-"]', { hasText: 'Charlie' }).first() : null;
+
+  await expect(bobRoomCard).toBeVisible({ timeout: 20_000 });
+
+  if (charlieRoomCard) {
+    await expect(charlieRoomCard).toBeVisible({ timeout: 20_000 });
+  }
+
+  const bobUserCardTestId = await bobRoomCard.getAttribute('data-testid');
+  const bobUserId = bobUserCardTestId?.replace('room-user-card-', '');
+  const charlieUserCardTestId = charlieRoomCard ? await charlieRoomCard.getAttribute('data-testid') : null;
+  const charlieUserId = charlieUserCardTestId?.replace('room-user-card-', '');
+
+  if (!aliceUserId || !bobUserId || (charlie && !charlieUserId)) {
+    throw new Error('Expected direct-call scenario users to expose stable ids.');
+  }
+
+  return {
+    alice,
+    bob,
+    charlie,
+    aliceUserId,
+    bobUserId,
+    charlieUserId
+  };
+}
+
+async function installDirectCallInstrumentation(page: Page): Promise<void> {
+  await installWebRTCTracking(page);
+  await installAutoResumeAudioContext(page);
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      'metoyou_voice_settings',
+      JSON.stringify({
+        inputVolume: 100,
+        outputVolume: 100,
+        audioBitrate: 96,
+        latencyProfile: 'balanced',
+        includeSystemAudio: false,
+        noiseReduction: false,
+        screenShareQuality: 'balanced',
+        askScreenShareQuality: false
+      })
+    );
+
+    const OriginalAudio = window.Audio;
+    const callAudioState = {
+      activeLoops: 0,
+      pauseCount: 0,
+      playCount: 0
+    };
+    const callNotificationState = {
+      count: 0,
+      bodies: [] as string[],
+      titles: [] as string[]
+    };
+
+    (window as Window & { __callAudioState?: typeof callAudioState }).__callAudioState = callAudioState;
+    (window as Window & { __callNotificationState?: typeof callNotificationState }).__callNotificationState = callNotificationState;
+
+    function isCallAudio(audio: HTMLAudioElement): boolean {
+      return audio.src.includes('/assets/audio/call.wav') || audio.src.endsWith('assets/audio/call.wav');
+    }
+
+    (window as unknown as { Audio: typeof Audio }).Audio = function(this: HTMLAudioElement, src?: string) {
+      const audio = new OriginalAudio(src);
+      const originalPlay = audio.play.bind(audio);
+      const originalPause = audio.pause.bind(audio);
+
+      audio.play = () => {
+        if (isCallAudio(audio)) {
+          callAudioState.playCount += 1;
+
+          if (audio.loop) {
+            callAudioState.activeLoops += 1;
+          }
+        }
+
+        return originalPlay();
+      };
+
+      audio.pause = () => {
+        if (isCallAudio(audio)) {
+          callAudioState.pauseCount += 1;
+
+          if (audio.loop && callAudioState.activeLoops > 0) {
+            callAudioState.activeLoops -= 1;
+          }
+        }
+
+        return originalPause();
+      };
+
+      return audio;
+    } as typeof Audio;
+
+    window.Audio.prototype = OriginalAudio.prototype;
+    Object.setPrototypeOf(window.Audio, OriginalAudio);
+
+    class MockNotification {
+      static permission: NotificationPermission = 'granted';
+
+      onclick: ((this: Notification, ev: Event) => unknown) | null = null;
+
+      constructor(title: string, options?: NotificationOptions) {
+        callNotificationState.count += 1;
+        callNotificationState.titles.push(title);
+        callNotificationState.bodies.push(options?.body ?? '');
+      }
+
+      static async requestPermission(): Promise<NotificationPermission> {
+        return 'granted';
+      }
+
+      close(): void {}
+    }
+
+    (window as unknown as { Notification: typeof Notification }).Notification = MockNotification as unknown as typeof Notification;
+  });
+}
+
+async function registerUser(page: Page, username: string, displayName: string): Promise<void> {
+  const registerPage = new RegisterPage(page);
+
+  await registerPage.goto();
+  await registerPage.register(username, displayName, USER_PASSWORD);
+  await expect(page).toHaveURL(/\/search/, { timeout: 20_000 });
+}
+
+async function startCallFromSearch(page: Page, userId: string, displayName: string): Promise<void> {
+  await disableLastViewedChatResume(page);
+  await page.goto('/search', { waitUntil: 'domcontentloaded' });
+  const peopleCard = page.locator(`[data-testid="user-card-${userId}"]`, { hasText: displayName }).first();
+
+  await expect(peopleCard).toBeVisible({ timeout: 20_000 });
+  await peopleCard.hover();
+  await peopleCard.getByRole('button', { name: `Call ${displayName}` }).click();
+  await expect(page).toHaveURL(/\/call\//, { timeout: 20_000 });
+}
+
+function incomingCallDialog(page: Page) {
+  return page.getByRole('dialog', { name: /is calling/ });
+}
+
+async function answerIncomingCall(page: Page): Promise<void> {
+  const dialog = incomingCallDialog(page);
+
+  if (await dialog.isVisible({ timeout: 5_000 }).catch(() => false)) {
+    await dialog.getByRole('button', { name: 'Answer' }).click();
+  } else {
+    await page.getByRole('button', { name: 'Open private call' }).last().click();
+    await expect(page).toHaveURL(/\/call\//, { timeout: 20_000 });
+
+    const joinButton = page.getByRole('button', { name: 'Join call' });
+
+    if (await joinButton.isVisible({ timeout: 5_000 }).catch(() => false)) {
+      await joinButton.click();
+    }
+  }
+
+  await expect(page).toHaveURL(/\/call\//, { timeout: 20_000 });
+  await expect(page.getByRole('button', { name: 'Leave call' })).toBeVisible({ timeout: 20_000 });
+}
+
+async function getCurrentUserId(page: Page): Promise<string> {
+  return await page.evaluate(() => localStorage.getItem('metoyou_currentUserId') ?? '');
+}
+
+async function getCallAudioPlayCount(page: Page): Promise<number> {
+  return await page.evaluate(() => (window as Window & { __callAudioState?: { playCount: number } }).__callAudioState?.playCount ?? 0);
+}
+
+async function getCallAudioPauseCount(page: Page): Promise<number> {
+  return await page.evaluate(() => (window as Window & { __callAudioState?: { pauseCount: number } }).__callAudioState?.pauseCount ?? 0);
+}
+
+async function getCallNotificationCount(page: Page): Promise<number> {
+  return await page.evaluate(() => (
+    window as Window & { __callNotificationState?: { count: number } }
+  ).__callNotificationState?.count ?? 0);
+}
+
+async function getActiveCallAudioLoops(page: Page): Promise<number> {
+  return await page.evaluate(() => (window as Window & { __callAudioState?: { activeLoops: number } }).__callAudioState?.activeLoops ?? 0);
+}
+
+async function expectParticipantConnected(page: Page, userId: string | undefined): Promise<void> {
+  if (!userId) {
+    throw new Error('Expected a stable participant id.');
+  }
+
+  await expect(page.getByTestId(`call-participant-${userId}`)).not.toHaveClass(/opacity-55/, { timeout: 20_000 });
+}
+
+async function assertSustainedMediaFlow(senderPage: Page, receiverPage: Page, label: string): Promise<void> {
+  for (let sample = 0; sample < 3; sample++) {
+    const [
+      senderAudio,
+      receiverAudio,
+      outboundVideo,
+      inboundVideo
+    ] = await Promise.all([
+      waitForAudioFlow(senderPage, 30_000),
+      waitForAudioFlow(receiverPage, 30_000),
+      waitForOutboundVideoFlow(senderPage, 30_000),
+      waitForInboundVideoFlow(receiverPage, 30_000)
+    ]);
+
+    expectAudioFlow(senderAudio, `${label} sender sample ${sample + 1}`);
+    expectAudioFlow(receiverAudio, `${label} receiver sample ${sample + 1}`);
+    expectOutboundVideoFlow(outboundVideo, `${label} outbound sample ${sample + 1}`);
+    expectInboundVideoFlow(inboundVideo, `${label} inbound sample ${sample + 1}`);
+  }
+}
+
+async function privateCallMainHasNoVerticalOverflow(page: Page): Promise<boolean> {
+  return await page.locator('app-private-call > section > main').evaluate((main) => main.scrollHeight <= main.clientHeight + 1);
+}
+
+async function privateCallGridStreamCount(page: Page): Promise<number> {
+  return await page
+    .getByTestId('private-call-stream-grid')
+    .locator('app-voice-workspace-stream-tile')
+    .count();
+}
+
+async function privateCallChatWidth(page: Page): Promise<number> {
+  return await page.locator('app-private-call aside').evaluate((aside) => aside.getBoundingClientRect().width);
+}
+
+async function hasFullscreenElement(page: Page): Promise<boolean> {
+  return await page.evaluate(() => document.fullscreenElement !== null);
+}
+
+async function exitFullscreen(page: Page): Promise<void> {
+  await page.evaluate(async () => {
+    if (document.fullscreenElement) {
+      await document.exitFullscreen();
+    }
+  });
+}
+
+function expectAudioFlow(delta: AudioFlowDelta, label: string): void {
+  expect(delta.outboundBytesDelta > 0 || delta.outboundPacketsDelta > 0, `${label} should send audio`).toBe(true);
+  expect(delta.inboundBytesDelta > 0 || delta.inboundPacketsDelta > 0, `${label} should receive audio`).toBe(true);
+}
+
+function expectOutboundVideoFlow(delta: VideoFlowDelta, label: string): void {
+  expect(isOutboundVideoFlowing(delta), `${label} should send video`).toBe(true);
+}
+
+function expectInboundVideoFlow(delta: VideoFlowDelta, label: string): void {
+  expect(isInboundVideoFlowing(delta), `${label} should receive video`).toBe(true);
+}
+
+function isAudioFlowing(delta: AudioFlowDelta): boolean {
+  return (delta.outboundBytesDelta > 0 || delta.outboundPacketsDelta > 0)
+    && (delta.inboundBytesDelta > 0 || delta.inboundPacketsDelta > 0);
+}
+
+function isOutboundVideoFlowing(delta: VideoFlowDelta): boolean {
+  return delta.outboundBytesDelta > 0 || delta.outboundPacketsDelta > 0;
+}
+
+function isInboundVideoFlowing(delta: VideoFlowDelta): boolean {
+  return delta.inboundBytesDelta > 0 || delta.inboundPacketsDelta > 0;
+}
+
+function uniqueName(prefix: string): string {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36)
+    .slice(2, 8)}`;
+}

electron/CONTEXT.md

@@ -0,0 +1,59 @@
+# Desktop Shell (electron)
+
+Owns the desktop runtime: the Electron main process, the preload bridge that exposes `window.api` to the renderer, IPC handlers, the local TypeORM + sql.js database, the plugin loader, OS-integration adapters (window controls, idle detection, game detection, audio), update flow, and the Local API server that hosts the Docusaurus bundle inside the app.
+
+> **Format reference:**
+> - **Vocabulary** — bold term, one-sentence definition, aliases to avoid.
+> - **Relationships** — bullets with bold terms and cardinality.
+> - **Boundaries / IO** — what this subdomain exposes and consumes.
+> - **Invariants** — rules that always hold.
+> - **Flagged ambiguities** — terms in dispute with proposed resolutions.
+>
+> See `agents-docs/AGENTS_CONTEXT.md` for the contract. Update in the same turn a trigger fires (see `agents-docs/AGENT_WORKFLOW.md` § CONTEXT.md upkeep).
+
+## Vocabulary
+
+| Term | Definition | Aliases to avoid |
+|------|------------|------------------|
+| **Preload bridge** | `electron/preload.ts` — the only surface that the renderer can call into Node through; exposes `window.api.*` after `contextBridge.exposeInMainWorld`. | "preloader" |
+| **IPC handler** | A `main`-process function registered against an IPC channel name; lives under `electron/ipc/` (system, window-controls) and `electron/cqrs.ts`. | "rpc handler" |
+| **CQRS handler** | Command or query handler dispatched through `electron/ipc/cqrs.ts`; pattern shared with `server/src/cqrs/`. | "command processor" |
+| **Local API server** | An in-process HTTP server (`electron/api/local-api-server.ts`) that serves the prebuilt Docusaurus docs and OpenAPI views to the renderer over `http://localhost:<port>/`. | "internal API" |
+| **Plugin library** | The plugin loader (`electron/plugin-library.ts`) — resolves manifests, validates entry points, and prepares the sandbox the renderer mounts plugins into. | "plugin manager" |
+| **Data archive** | The export/import format implemented in `electron/data-archive.ts` for moving a user's local database between installs. | "backup" |
+
+## Relationships
+
+- The **Preload bridge** is the only path between the **Renderer** (toju-app) and **Main**; the renderer cannot import Electron, Node, or TypeORM directly.
+- An **IPC channel** maps 1:1 to a method on `window.api.*`. Adding a method on the preload requires registering its handler in `electron/ipc/` or `electron/cqrs.ts`.
+- The **Plugin library** loads manifests at startup and on user action; it owns the contract the renderer's *plugins* domain consumes (defined in `toju-app/src/app/shared-kernel/plugin-system.contracts.ts`).
+- TypeORM **migrations** in `electron/migrations/` are applied on startup against the per-user SQLite file resolved by `electron/runtime-paths.ts`.
+- The **Local API server** serves the Docusaurus bundle built into `docs-site/build/` and the OpenAPI artifacts under `electron/api/openapi.ts`.
+
+## Boundaries / IO
+
+- **Exposes:**
+  - `window.api.*` surface (preload bridge) — the canonical IPC contract for the renderer.
+  - IPC channel names registered in `electron/ipc/index.ts`, `electron/ipc/cqrs.ts`, `electron/ipc/system.ts`, `electron/ipc/window-controls.ts`.
+  - Local API HTTP endpoints (`electron/api/router.ts`) under `http://localhost:<port>/`.
+  - Plugin host contract (`electron/plugin-library.ts`) — defines what plugin manifests must declare and what the plugin runtime can call back into.
+- **Consumes:**
+  - The renderer (toju-app) via IPC `invoke`/`handle` and event emitters.
+  - The local SQLite database via `electron/data-source.ts` and entities under `electron/entities/`.
+  - OS APIs: window controls, idle detection (`electron/idle/`), game detection (`electron/game-detection/`), process list (`electron/process-list.ts`).
+  - The audio worklet bundle (`toju-app/public/rnnoise-worklet.js` built from `@timephy/rnnoise-wasm`).
+
+## Invariants
+
+- The **Renderer** never has direct access to Node, the filesystem, or the database — every privileged operation goes through an IPC handler.
+- Every schema change is accompanied by a **TypeORM migration**; the database is never mutated outside the migration system.
+- IPC handler errors are translated to typed error envelopes before crossing back into the renderer — the renderer never sees a raw `Error` from main.
+- The **Preload bridge** exposes a frozen, allow-listed set of methods; adding a method requires touching both `preload.ts` and the matching handler.
+
+## Flagged ambiguities
+
+- _None recorded yet — add entries when an IPC channel name or plugin contract term resists clean definition._
+
+---
+
+*Agent-procedural rules (TDD, lint, build) live in `/AGENTS.md`. Cross-context contract details (IPC envelope shapes, plugin manifest schema) belong in `agents-docs/features/`. This file is the bounded-context domain artefact for the desktop shell.*

electron/README.md

@@ -16,7 +16,8 @@ Electron main-process package for MetoYou / Toju. This directory owns desktop bo
 | --- | --- |
 | `main.ts` | Electron app bootstrap and process entry point |
 | `preload.ts` | Typed renderer-facing preload bridge |
-| `process-list.ts` | Linux/Windows process-name scan used by now-playing game detection |
+| `process-list.ts` | Linux/Windows process-name scan used as a fallback when foreground detection is unavailable |
+| `game-detection/` | Foreground-window detection (`get-windows` + Hyprland/Sway fallbacks) plus pure heuristics scoring and ignore-list filtering |
 | `app/` | App lifecycle and startup composition |
 | `ipc/` | Renderer-invoked IPC handlers |
 | `cqrs/` | Local database command/query handlers and mappings |

electron/cqrs/queries/handlers/getMessages.ts

@@ -7,20 +7,36 @@ import { getCurrentUserScope } from '../../current-user-scope';
 
 export async function handleGetMessages(query: GetMessagesQuery, dataSource: DataSource) {
   const repo = dataSource.getRepository(MessageEntity);
-  const { roomId, limit = 100, offset = 0 } = query.payload;
+  const { roomId, limit = 100, offset = 0, channelId, beforeTimestamp } = query.payload;
   const currentUserId = await getCurrentUserScope(dataSource);
 
   if (!currentUserId) {
     return [];
   }
 
-  const rows = await repo.find({
-    where: { roomId, ownerUserId: currentUserId },
-    order: { timestamp: 'ASC' },
-    take: limit,
-    skip: offset
-  });
-  const reactionsByMessageId = await loadMessageReactionsMap(dataSource, rows.map((row) => row.id));
+  const rowsQuery = repo.createQueryBuilder('message')
+    .where('message.roomId = :roomId', { roomId })
+    .andWhere('message.ownerUserId = :currentUserId', { currentUserId })
+    .orderBy('message.timestamp', 'DESC')
+    .take(limit)
+    .skip(offset);
 
-  return rows.map((row) => rowToMessage(row, reactionsByMessageId.get(row.id) ?? []));
+  if (channelId === 'general') {
+    rowsQuery.andWhere('(message.channelId = :channelId OR message.channelId IS NULL OR message.channelId = :emptyChannelId)', {
+      channelId,
+      emptyChannelId: ''
+    });
+  } else if (channelId) {
+    rowsQuery.andWhere('message.channelId = :channelId', { channelId });
+  }
+
+  if (typeof beforeTimestamp === 'number') {
+    rowsQuery.andWhere('message.timestamp < :beforeTimestamp', { beforeTimestamp });
+  }
+
+  const rows = await rowsQuery.getMany();
+  const chronologicalRows = [...rows].reverse();
+  const reactionsByMessageId = await loadMessageReactionsMap(dataSource, chronologicalRows.map((row) => row.id));
+
+  return chronologicalRows.map((row) => rowToMessage(row, reactionsByMessageId.get(row.id) ?? []));
 }

electron/cqrs/types.ts

@@ -230,7 +230,16 @@ export type Command =
   | SaveMetaCommand
   | ClearAllDataCommand;
 
-export interface GetMessagesQuery { type: typeof QueryType.GetMessages; payload: { roomId: string; limit?: number; offset?: number } }
+export interface GetMessagesQuery {
+  type: typeof QueryType.GetMessages;
+  payload: {
+    roomId: string;
+    limit?: number;
+    offset?: number;
+    channelId?: string;
+    beforeTimestamp?: number;
+  };
+}
 export interface GetMessagesSinceQuery { type: typeof QueryType.GetMessagesSince; payload: { roomId: string; sinceTimestamp: number } }
 export interface GetMessageByIdQuery { type: typeof QueryType.GetMessageById; payload: { messageId: string } }
 export interface GetReactionsForMessageQuery { type: typeof QueryType.GetReactionsForMessage; payload: { messageId: string } }

electron/db/database.ts

@@ -41,7 +41,14 @@ const RETRYABLE_SAVE_ERROR_CODES = new Set([
   'EBUSY'
 ]);
 
-let saveQueue: Promise<void> = Promise.resolve();
+interface PendingSaveWaiter {
+  reject: (error: unknown) => void;
+  resolve: () => void;
+}
+
+let pendingSaveSnapshot: Buffer | null = null;
+let pendingSaveWaiters: PendingSaveWaiter[] = [];
+let saveInProgress = false;
 
 function wait(ms: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -146,16 +153,51 @@ async function writeDatabaseSnapshot(snapshot: Buffer): Promise<void> {
   }
 }
 
+function settleSaveWaiters(waiters: PendingSaveWaiter[], error?: unknown): void {
+  for (const waiter of waiters) {
+    if (error === undefined) {
+      waiter.resolve();
+    } else {
+      waiter.reject(error);
+    }
+  }
+}
+
+async function drainDatabaseSaveQueue(): Promise<void> {
+  if (saveInProgress) {
+    return;
+  }
+
+  saveInProgress = true;
+
+  try {
+    while (pendingSaveSnapshot) {
+      const snapshot = pendingSaveSnapshot;
+      const waiters = pendingSaveWaiters;
+
+      pendingSaveSnapshot = null;
+      pendingSaveWaiters = [];
+
+      try {
+        await writeDatabaseSnapshot(snapshot);
+        settleSaveWaiters(waiters);
+      } catch (error) {
+        settleSaveWaiters(waiters, error);
+      }
+    }
+  } finally {
+    saveInProgress = false;
+  }
+}
+
 async function atomicSave(data: Uint8Array): Promise<void> {
   const snapshot = Buffer.from(data);
-  const saveTask = saveQueue.then(
-    () => writeDatabaseSnapshot(snapshot),
-    () => writeDatabaseSnapshot(snapshot)
-  );
 
-  saveQueue = saveTask.catch(() => {});
-
-  return saveTask;
+  return new Promise<void>((resolve, reject) => {
+    pendingSaveSnapshot = snapshot;
+    pendingSaveWaiters.push({ resolve, reject });
+    void drainDatabaseSaveQueue();
+  });
 }
 
 export async function initializeDatabase(): Promise<void> {

electron/desktop-settings.ts

@@ -18,6 +18,7 @@ export interface DesktopSettings {
   autoStart: boolean;
   closeToTray: boolean;
   hardwareAcceleration: boolean;
+  ignoredGameProcesses: string[];
   localApi: LocalApiSettings;
   manifestUrls: string[];
   preferredVersion: string | null;
@@ -42,6 +43,7 @@ const DEFAULT_DESKTOP_SETTINGS: DesktopSettings = {
   autoStart: true,
   closeToTray: true,
   hardwareAcceleration: true,
+  ignoredGameProcesses: [],
   localApi: { ...DEFAULT_LOCAL_API_SETTINGS },
   manifestUrls: [],
   preferredVersion: null,
@@ -80,6 +82,31 @@ function normalizeManifestUrls(value: unknown): string[] {
   return manifestUrls;
 }
 
+function normalizeIgnoredGameProcesses(value: unknown): string[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  const ignored: string[] = [];
+
+  for (const entry of value) {
+    if (typeof entry !== 'string') {
+      continue;
+    }
+
+    const trimmed = entry.trim().toLowerCase()
+      .replace(/\.(exe|bin|app|out)$/iu, '');
+
+    if (!trimmed || trimmed.length > 96 || ignored.includes(trimmed)) {
+      continue;
+    }
+
+    ignored.push(trimmed);
+  }
+
+  return ignored.sort();
+}
+
 function normalizePort(value: unknown, fallback: number): number {
   if (typeof value !== 'number' || !Number.isFinite(value)) {
     return fallback;
@@ -171,6 +198,7 @@ export function readDesktopSettings(): DesktopSettings {
       hardwareAcceleration: typeof parsed.hardwareAcceleration === 'boolean'
         ? parsed.hardwareAcceleration
         : DEFAULT_DESKTOP_SETTINGS.hardwareAcceleration,
+      ignoredGameProcesses: normalizeIgnoredGameProcesses(parsed.ignoredGameProcesses),
       localApi: normalizeLocalApiSettings(parsed.localApi),
       manifestUrls: normalizeManifestUrls(parsed.manifestUrls),
       preferredVersion: normalizePreferredVersion(parsed.preferredVersion)
@@ -200,6 +228,7 @@ export function updateDesktopSettings(patch: Partial<DesktopSettings>): DesktopS
     hardwareAcceleration: typeof mergedSettings.hardwareAcceleration === 'boolean'
       ? mergedSettings.hardwareAcceleration
       : DEFAULT_DESKTOP_SETTINGS.hardwareAcceleration,
+    ignoredGameProcesses: normalizeIgnoredGameProcesses(mergedSettings.ignoredGameProcesses),
     localApi: normalizeLocalApiSettings(mergedSettings.localApi),
     manifestUrls: normalizeManifestUrls(mergedSettings.manifestUrls),
     preferredVersion: normalizePreferredVersion(mergedSettings.preferredVersion),

electron/game-detection/active-window.ts

@@ -0,0 +1,268 @@
+import { execFile } from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+import { promisify } from 'util';
+
+const execFileAsync = promisify(execFile);
+
+/**
+ * Structured snapshot of the currently focused window. Returned by
+ * detectActiveWindow() and consumed by the game-detection orchestrator.
+ *
+ * Field availability varies by platform/compositor; consumers must treat all
+ * optional fields as best-effort. `processName` is required because the
+ * heuristic engine refuses to score a candidate without it.
+ */
+export interface ActiveWindowSnapshot {
+  processName: string;
+  executablePath?: string;
+  windowTitle?: string;
+  pid?: number;
+  bounds?: { width: number; height: number };
+  isFullscreen?: boolean;
+  /** Where the snapshot came from, for diagnostics. */
+  source: 'get-windows' | 'hyprctl' | 'swaymsg' | 'xprop';
+}
+
+let cachedDynamicImport: ((specifier: string) => Promise<unknown>) | null = null;
+
+function importEsm<T>(specifier: string): Promise<T> {
+  if (!cachedDynamicImport) {
+    // Built via the Function constructor so the TypeScript compiler does not
+    // down-level the `import()` call to `require()` under module: commonjs.
+    cachedDynamicImport = new Function('s', 'return import(s)') as (specifier: string) => Promise<unknown>;
+  }
+
+  return cachedDynamicImport(specifier) as Promise<T>;
+}
+
+interface GetWindowsModule {
+  activeWindow: (options?: { accessibilityPermission?: boolean; screenRecordingPermission?: boolean }) => Promise<GetWindowsResult | undefined>;
+}
+
+interface GetWindowsResult {
+  platform: 'macos' | 'linux' | 'windows';
+  title: string;
+  id: number;
+  bounds: { x: number; y: number; width: number; height: number };
+  owner: { name: string; processId: number; path: string };
+}
+
+export async function detectActiveWindow(): Promise<ActiveWindowSnapshot | null> {
+  const getWindowsResult = await tryGetWindows();
+
+  if (getWindowsResult) {
+    return getWindowsResult;
+  }
+
+  if (process.platform === 'linux') {
+    return await detectLinuxActiveWindowViaCompositor();
+  }
+
+  return null;
+}
+
+async function tryGetWindows(): Promise<ActiveWindowSnapshot | null> {
+  try {
+    const mod = await importEsm<GetWindowsModule>('get-windows');
+    const result = await mod.activeWindow({
+      accessibilityPermission: false,
+      screenRecordingPermission: false
+    });
+
+    if (!result || !result.owner?.name) {
+      return null;
+    }
+
+    return {
+      processName: result.owner.name,
+      executablePath: result.owner.path || undefined,
+      windowTitle: result.title || undefined,
+      pid: result.owner.processId,
+      bounds: result.bounds
+        ? { width: result.bounds.width, height: result.bounds.height }
+        : undefined,
+      isFullscreen: isFullscreenFromBounds(result.bounds),
+      source: 'get-windows'
+    };
+  } catch {
+    return null;
+  }
+}
+
+function isFullscreenFromBounds(bounds: { x?: number; y?: number; width?: number; height?: number } | undefined): boolean {
+  if (!bounds || typeof bounds.width !== 'number' || typeof bounds.height !== 'number') {
+    return false;
+  }
+
+  // Cheap proxy: anything ≥1920x1080 is treated as fullscreen-ish. This is
+  // intentionally loose because we already gate on focus and exe path.
+  return bounds.width >= 1920 && bounds.height >= 1080;
+}
+
+async function detectLinuxActiveWindowViaCompositor(): Promise<ActiveWindowSnapshot | null> {
+  const hypr = await tryHyprctl();
+
+  if (hypr) {
+    return hypr;
+  }
+
+  const sway = await trySwaymsg();
+
+  if (sway) {
+    return sway;
+  }
+
+  return null;
+}
+
+interface HyprlandActiveWindow {
+  address?: string;
+  pid?: number;
+  title?: string;
+  class?: string;
+  initialClass?: string;
+  fullscreen?: number | boolean;
+  fullscreenClient?: number | boolean;
+  size?: [number, number];
+}
+
+async function tryHyprctl(): Promise<ActiveWindowSnapshot | null> {
+  if (!process.env.HYPRLAND_INSTANCE_SIGNATURE) {
+    return null;
+  }
+
+  try {
+    const { stdout } = await execFileAsync('hyprctl', ['activewindow', '-j'], {
+      timeout: 2_000,
+      maxBuffer: 256 * 1024
+    });
+    const parsed = JSON.parse(stdout) as HyprlandActiveWindow;
+
+    if (!parsed?.pid) {
+      return null;
+    }
+
+    return await snapshotFromPid(parsed.pid, {
+      windowTitle: parsed.title,
+      processNameHint: parsed.class || parsed.initialClass,
+      bounds: parsed.size ? { width: parsed.size[0], height: parsed.size[1] } : undefined,
+      isFullscreen: !!parsed.fullscreen || !!parsed.fullscreenClient,
+      source: 'hyprctl'
+    });
+  } catch {
+    return null;
+  }
+}
+
+interface SwayTreeNode {
+  focused?: boolean;
+  pid?: number;
+  name?: string;
+  app_id?: string;
+  window_properties?: { class?: string };
+  fullscreen_mode?: number;
+  rect?: { width?: number; height?: number };
+  nodes?: SwayTreeNode[];
+  floating_nodes?: SwayTreeNode[];
+}
+
+async function trySwaymsg(): Promise<ActiveWindowSnapshot | null> {
+  if (!process.env.SWAYSOCK && !process.env.I3SOCK) {
+    return null;
+  }
+
+  try {
+    const { stdout } = await execFileAsync('swaymsg', ['-t', 'get_tree'], {
+      timeout: 2_000,
+      maxBuffer: 2 * 1024 * 1024
+    });
+    const tree = JSON.parse(stdout) as SwayTreeNode;
+    const focused = findFocusedSwayNode(tree);
+
+    if (!focused?.pid) {
+      return null;
+    }
+
+    return await snapshotFromPid(focused.pid, {
+      windowTitle: focused.name,
+      processNameHint: focused.app_id || focused.window_properties?.class,
+      bounds: focused.rect
+        ? { width: focused.rect.width ?? 0, height: focused.rect.height ?? 0 }
+        : undefined,
+      isFullscreen: (focused.fullscreen_mode ?? 0) > 0,
+      source: 'swaymsg'
+    });
+  } catch {
+    return null;
+  }
+}
+
+function findFocusedSwayNode(node: SwayTreeNode): SwayTreeNode | null {
+  if (node.focused && node.pid) {
+    return node;
+  }
+
+  for (const child of node.nodes ?? []) {
+    const found = findFocusedSwayNode(child);
+
+    if (found) {
+      return found;
+    }
+  }
+
+  for (const child of node.floating_nodes ?? []) {
+    const found = findFocusedSwayNode(child);
+
+    if (found) {
+      return found;
+    }
+  }
+
+  return null;
+}
+
+interface SnapshotFromPidOptions {
+  windowTitle?: string;
+  processNameHint?: string;
+  bounds?: { width: number; height: number };
+  isFullscreen?: boolean;
+  source: ActiveWindowSnapshot['source'];
+}
+
+async function snapshotFromPid(pid: number, options: SnapshotFromPidOptions): Promise<ActiveWindowSnapshot | null> {
+  let executablePath: string | undefined;
+  let processName = options.processNameHint?.trim() || '';
+
+  try {
+    executablePath = await fs.promises.readlink(`/proc/${pid}/exe`);
+
+    if (!processName) {
+      processName = path.basename(executablePath);
+    }
+  } catch {
+    /* /proc/<pid>/exe is restricted for foreign-uid processes; that's fine. */
+  }
+
+  if (!processName) {
+    try {
+      processName = (await fs.promises.readFile(`/proc/${pid}/comm`, 'utf8')).trim();
+    } catch {
+      /* ignored */
+    }
+  }
+
+  if (!processName) {
+    return null;
+  }
+
+  return {
+    processName,
+    executablePath,
+    windowTitle: options.windowTitle?.trim() || undefined,
+    pid,
+    bounds: options.bounds,
+    isFullscreen: options.isFullscreen,
+    source: options.source
+  };
+}

electron/game-detection/heuristics.ts

@@ -0,0 +1,402 @@
+import * as path from 'path';
+
+/**
+ * Pure scoring/filtering helpers for game detection. Lives in the main process
+ * and is exercised by both the foreground-window detector and the legacy
+ * process-name scanner.
+ *
+ * The goal is to dramatically reduce the false-positive rate compared to the
+ * previous "send every running process name to RAWG" approach by combining
+ * multiple signals (window focus, executable path, engine markers, blacklist,
+ * user-managed ignore list) into a confidence score.
+ */
+
+export interface GameCandidateInput {
+  /** Lower-cased base name without extension (e.g. "stardewvalley"). */
+  processName: string;
+  /** Original process name as reported by the OS (for display). */
+  rawProcessName?: string;
+  executablePath?: string;
+  windowTitle?: string;
+  pid?: number;
+  bounds?: { width: number; height: number } | undefined;
+  isFullscreen?: boolean;
+  source: 'foreground' | 'process-scan';
+  /** User-managed ignore list, already lower-cased. */
+  ignoredProcessNames: ReadonlySet<string>;
+  /** True when an engine signature file was found beside the executable. */
+  hasEngineSignature?: boolean;
+}
+
+export interface ScoredGameCandidate {
+  processName: string;
+  rawProcessName: string;
+  executablePath?: string;
+  windowTitle?: string;
+  pid?: number;
+  isFullscreen: boolean;
+  bounds?: { width: number; height: number };
+  confidence: number;
+  source: 'foreground' | 'process-scan';
+  reasons: string[];
+}
+
+export const MIN_GAME_CONFIDENCE = 55;
+
+/**
+ * Processes that are commonly misclassified as games. Lower-cased base names.
+ * Note: we deliberately blacklist Electron/Chromium/IDE/launcher/comm apps.
+ */
+export const HARDCODED_IGNORED_PROCESSES: ReadonlySet<string> = new Set([
+  '1password',
+  '7zfm',
+  'agent',
+  'audiodg',
+  'bash',
+  'baloo',
+  'baloo_file',
+  'baloorunner',
+  'bluetoothuiservice',
+  'brave',
+  'brave-browser',
+  'chrome',
+  'cmd',
+  'code',
+  'code-insiders',
+  'conhost',
+  'cursor',
+  'csrss',
+  'ctfmon',
+  'dbus',
+  'dbus-daemon',
+  'discord',
+  'discordcanary',
+  'discordptb',
+  'dolphin',
+  'dwm',
+  'electron',
+  'epicgameslauncher',
+  'epicgames',
+  'explorer',
+  'fcitx5',
+  'firefox',
+  'fontdrvhost',
+  'gameoverlayui',
+  'gamemoded',
+  'gamemode-launcher',
+  'gamescopereaper',
+  'gnome-shell',
+  'gnome-software',
+  'gnome-terminal',
+  'init',
+  'java',
+  'javaw',
+  'kdeconnect',
+  'kdeconnectd',
+  'kded5',
+  'kded6',
+  'keepass',
+  'keepassxc',
+  'kernel_task',
+  'krunner',
+  'ksmserver',
+  'lockapp',
+  'logioptionsplus',
+  'logitechg',
+  'login',
+  'metoyou',
+  'msedge',
+  'msedgewebview2',
+  'msteams',
+  'node',
+  'npm',
+  'nvcontainer',
+  'nvidia-broadcast',
+  'nvidia-share',
+  'nvidia-smi',
+  'obs',
+  'obs64',
+  'obs-studio',
+  'pipewire',
+  'plasmashell',
+  'pluma',
+  'powershell',
+  'pwsh',
+  'pulseaudio',
+  'remoteapps-service',
+  'rundll32',
+  'runtimebroker',
+  'screen',
+  'searchapp',
+  'searchhost',
+  'shellexperiencehost',
+  'signal',
+  'slack',
+  'spotify',
+  'spotifywebhelper',
+  'sshd',
+  'startmenuexperiencehost',
+  'steam',
+  'steamservice',
+  'steamwebhelper',
+  'svchost',
+  'system',
+  'systemd',
+  'systemsettings',
+  'systemsoundsservice',
+  'taskhost',
+  'taskhostw',
+  'taskmgr',
+  'teams',
+  'telegram',
+  'telegramdesktop',
+  'textinputhost',
+  'thunderbird',
+  'tracker-miner-fs',
+  'tray',
+  'utilman',
+  'vivaldi',
+  'whatsapp',
+  'wininit',
+  'winlogon',
+  'xdg-desktop-portal',
+  'xorg',
+  'xwayland',
+  'yakuake',
+  'zoom'
+]);
+
+const GENERIC_SUFFIX_NAMES = [
+  'agent',
+  'browser',
+  'daemon',
+  'helper',
+  'indexer',
+  'launcher',
+  'monitor',
+  'renderer',
+  'runner',
+  'service',
+  'tray',
+  'updater',
+  'watcher',
+  'worker',
+  'portal',
+  'sync',
+  'broker',
+  'host'
+].join('|');
+const IGNORE_NAME_PATTERNS: readonly RegExp[] = [
+  new RegExp(`(^|[-_\\s.])(${GENERIC_SUFFIX_NAMES})([-_\\s.]|$)`, 'iu'),
+  /^kworker/i,
+  /^kthread/i,
+  /^kpipefs/i,
+  /^(at-spi|gvfs|ibus|kded|kglobalaccel|knotify|polkit|pulse|systemd)/i
+];
+/** Known game install root markers, case-insensitive substrings of the exe path. */
+const KNOWN_GAME_PATH_MARKERS: readonly RegExp[] = [
+  /[\\/]steamapps[\\/]common[\\/]/i,
+  /[\\/]steamlibrary[\\/]/i,
+  /[\\/]epic games[\\/]/i,
+  /[\\/]epicgameslauncher[\\/]/i,
+  /[\\/]gog galaxy[\\/]games[\\/]/i,
+  /[\\/]gog\.com[\\/]games[\\/]/i,
+  /[\\/]gog games[\\/]/i,
+  /[\\/]ea games[\\/]/i,
+  /[\\/]origin games[\\/]/i,
+  /[\\/]battle\.net[\\/]/i,
+  /[\\/]ubisoft[\\/]/i,
+  /[\\/]riot games[\\/]/i,
+  /[\\/]itch[\\/]apps[\\/]/i,
+  /[\\/]\.itch[\\/]apps[\\/]/i,
+  /[\\/]heroic[\\/]games[\\/]/i,
+  /[\\/]lutris[\\/]/i,
+  /[\\/]games[\\/]/i,
+  // Proton / Wine prefixes used by Steam/Lutris/Heroic
+  /[\\/]proton[\\/]/i,
+  /[\\/]pfx[\\/]drive_c[\\/]/i,
+  /[\\/]\.wine[\\/]drive_c[\\/]program files[\\/]/i
+];
+/** Path segments that strongly indicate the process is NOT a game. */
+const NON_GAME_PATH_MARKERS: readonly RegExp[] = [
+  /[\\/]appdata[\\/]local[\\/]temp[\\/]/i,
+  /[\\/]temp[\\/]/i,
+  /[\\/]node_modules[\\/]/i,
+  /[\\/]chromium[\\/]/i,
+  /[\\/]appdata[\\/]roaming[\\/]discord[\\/]/i,
+  /[\\/]appdata[\\/]roaming[\\/]spotify[\\/]/i,
+  /[\\/]windows[\\/]system32[\\/]/i,
+  /[\\/]windows[\\/]syswow64[\\/]/i,
+  /[\\/]\.cache[\\/]/i,
+  /[\\/]snap[\\/]firefox[\\/]/i,
+  /[\\/]snap[\\/]spotify[\\/]/i
+];
+
+/** File names placed beside a game's executable that reveal its engine. */
+export const ENGINE_SIGNATURE_FILES: readonly string[] = [
+  'UnityPlayer.dll',
+  'libUnityPlayer.so',
+  'UnityCrashHandler64.exe',
+  'UnityCrashHandler32.exe',
+  // Unreal Engine: foo-Win64-Shipping.exe sits in <Game>/Binaries/Win64/
+  'UnrealEditor.exe',
+  'UE4PrereqSetup_x64.exe',
+  'UE4Game.dll',
+  'UE5Game.dll',
+  // Godot
+  'Godot.exe',
+  'libgodot.so',
+  // Source engine
+  'tier0.dll',
+  'engine.dll',
+  'hl2.exe',
+  // RPG Maker
+  'nw.dll',
+  // CryEngine
+  'CryGameSDK.dll'
+];
+
+export function normalizeProcessKey(value: string): string {
+  return path.basename(value.trim())
+    .replace(/\.(exe|bin|app|out)$/iu, '')
+    .replace(/[_-]+/gu, ' ')
+    .replace(/\s+/gu, ' ')
+    .trim()
+    .toLowerCase();
+}
+
+export function shouldIgnoreProcess(
+  processName: string,
+  userIgnored: ReadonlySet<string>
+): boolean {
+  const key = normalizeProcessKey(processName);
+
+  if (!key) {
+    return true;
+  }
+
+  if (userIgnored.has(key) || HARDCODED_IGNORED_PROCESSES.has(key)) {
+    return true;
+  }
+
+  if (/^\d+$/.test(key)) {
+    return true;
+  }
+
+  if (key.length < 4) {
+    return true;
+  }
+
+  return IGNORE_NAME_PATTERNS.some((pattern) => pattern.test(key));
+}
+
+export function pathMatchesKnownGameRoot(executablePath: string | undefined): boolean {
+  if (!executablePath) {
+    return false;
+  }
+
+  return KNOWN_GAME_PATH_MARKERS.some((pattern) => pattern.test(executablePath));
+}
+
+export function pathMatchesNonGameRoot(executablePath: string | undefined): boolean {
+  if (!executablePath) {
+    return false;
+  }
+
+  return NON_GAME_PATH_MARKERS.some((pattern) => pattern.test(executablePath));
+}
+
+interface ConfidenceScore {
+  confidence: number;
+  reasons: string[];
+}
+
+function computeConfidence(input: GameCandidateInput, rawProcessName: string): ConfidenceScore {
+  let confidence = 0;
+
+  const reasons: string[] = [];
+  const add = (points: number, reason: string): void => {
+    confidence += points;
+    reasons.push(reason);
+  };
+
+  if (input.source === 'foreground') {
+    add(35, 'foreground-window');
+  }
+
+  if (pathMatchesKnownGameRoot(input.executablePath)) {
+    add(30, 'known-game-folder');
+  }
+
+  if (input.hasEngineSignature) {
+    add(25, 'engine-signature');
+  }
+
+  if (input.isFullscreen) {
+    add(15, 'fullscreen');
+  }
+
+  const width = input.bounds?.width ?? 0;
+  const height = input.bounds?.height ?? 0;
+
+  if (width >= 800 && height >= 600) {
+    add(5, 'large-window');
+  }
+
+  const title = input.windowTitle?.trim() ?? '';
+
+  if (title.length >= 3 && /[A-Za-z]/u.test(title)) {
+    add(10, 'window-title');
+  }
+
+  if (/[A-Z]/u.test(rawProcessName) && /[a-z]/u.test(rawProcessName)) {
+    add(3, 'mixed-case-name');
+  }
+
+  if (input.executablePath && /\.exe$/iu.test(input.executablePath)) {
+    confidence += 2;
+  }
+
+  return { confidence: Math.min(100, confidence), reasons };
+}
+
+export function scoreCandidate(input: GameCandidateInput): ScoredGameCandidate | null {
+  const rawProcessName = input.rawProcessName ?? input.processName;
+  const normalizedKey = normalizeProcessKey(input.processName);
+
+  if (!normalizedKey) {
+    return null;
+  }
+
+  if (shouldIgnoreProcess(normalizedKey, input.ignoredProcessNames)) {
+    return null;
+  }
+
+  if (pathMatchesNonGameRoot(input.executablePath)) {
+    return null;
+  }
+
+  const { confidence, reasons } = computeConfidence(input, rawProcessName);
+  const title = input.windowTitle?.trim() ?? '';
+
+  // Process-scan candidates must clear a higher bar: without a foreground or
+  // path signal the confidence will stay below the threshold, which is the
+  // whole point - no more silent RAWG lookups for arbitrary processes.
+  return {
+    processName: normalizedKey,
+    rawProcessName,
+    executablePath: input.executablePath,
+    windowTitle: title || undefined,
+    pid: input.pid,
+    isFullscreen: !!input.isFullscreen,
+    bounds: input.bounds,
+    confidence,
+    source: input.source,
+    reasons
+  };
+}
+
+/** Returns whether a confidence score clears the "report to peers" threshold. */
+export function meetsGameConfidence(candidate: ScoredGameCandidate | null): boolean {
+  return !!candidate && candidate.confidence >= MIN_GAME_CONFIDENCE;
+}

electron/game-detection/index.ts

@@ -0,0 +1,119 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { detectActiveWindow } from './active-window';
+import {
+  ENGINE_SIGNATURE_FILES,
+  GameCandidateInput,
+  MIN_GAME_CONFIDENCE,
+  ScoredGameCandidate,
+  scoreCandidate,
+  shouldIgnoreProcess
+} from './heuristics';
+import { listRunningProcessNames } from '../process-list';
+import { readDesktopSettings } from '../desktop-settings';
+
+/**
+ * Public result of a detection scan. The renderer prefers `candidate` and only
+ * falls back to `fallbackProcessNames` when no focused candidate clears the
+ * minimum confidence threshold. The fallback list is intentionally trimmed and
+ * pre-filtered so the renderer never sees obvious non-games like Spotify.
+ */
+export interface GameDetectionResult {
+  candidate: ScoredGameCandidate | null;
+  /**
+   * Filtered list of plausible game process names. Empty when the focused
+   * candidate already crossed the threshold (so the renderer skips fallback
+   * matching). Capped to keep RAWG quota usage predictable.
+   */
+  fallbackProcessNames: string[];
+}
+
+const MAX_FALLBACK_PROCESSES = 8;
+
+export async function detectActiveGame(): Promise<GameDetectionResult> {
+  const ignoredProcessNames = getUserIgnoredProcesses();
+  const active = await detectActiveWindow();
+
+  let candidate: ScoredGameCandidate | null = null;
+
+  if (active) {
+    const hasEngineSignature = await detectEngineSignature(active.executablePath);
+    const input: GameCandidateInput = {
+      processName: active.processName,
+      rawProcessName: active.processName,
+      executablePath: active.executablePath,
+      windowTitle: active.windowTitle,
+      pid: active.pid,
+      bounds: active.bounds,
+      isFullscreen: active.isFullscreen,
+      source: 'foreground',
+      ignoredProcessNames,
+      hasEngineSignature
+    };
+
+    candidate = scoreCandidate(input);
+  }
+
+  if (candidate && candidate.confidence >= MIN_GAME_CONFIDENCE) {
+    return { candidate, fallbackProcessNames: [] };
+  }
+
+  const fallbackProcessNames = await collectFallbackProcessNames(ignoredProcessNames);
+
+  return { candidate, fallbackProcessNames };
+}
+
+async function collectFallbackProcessNames(ignoredProcessNames: ReadonlySet<string>): Promise<string[]> {
+  try {
+    const names = await listRunningProcessNames();
+    const filtered: string[] = [];
+
+    for (const name of names) {
+      if (filtered.length >= MAX_FALLBACK_PROCESSES) {
+        break;
+      }
+
+      if (!shouldIgnoreProcess(name, ignoredProcessNames)) {
+        filtered.push(name);
+      }
+    }
+
+    return filtered;
+  } catch {
+    return [];
+  }
+}
+
+async function detectEngineSignature(executablePath: string | undefined): Promise<boolean> {
+  if (!executablePath) {
+    return false;
+  }
+
+  try {
+    const directory = path.dirname(executablePath);
+    const entries = await fs.promises.readdir(directory).catch(() => []);
+    const lowerEntries = new Set(entries.map((entry) => entry.toLowerCase()));
+
+    if (ENGINE_SIGNATURE_FILES.some((file) => lowerEntries.has(file.toLowerCase()))) {
+      return true;
+    }
+
+    // Unreal Engine ships executables ending in "-Win64-Shipping.exe" or
+    // "-Linux-Shipping" inside <Game>/Binaries/<Platform>/.
+    return entries.some((entry) => /-(win64|win32|linux)-shipping(\.exe)?$/i.test(entry));
+  } catch {
+    return false;
+  }
+}
+
+function getUserIgnoredProcesses(): ReadonlySet<string> {
+  try {
+    const stored = readDesktopSettings().ignoredGameProcesses ?? [];
+
+    return new Set(stored.map((entry) => entry.trim().toLowerCase()).filter(Boolean));
+  } catch {
+    return new Set();
+  }
+}
+
+export type { ScoredGameCandidate } from './heuristics';

electron/ipc/system.ts

@@ -12,9 +12,10 @@ import {
 import * as fs from 'fs';
 import * as fsp from 'fs/promises';
 import * as path from 'path';
-import { fileURLToPath } from 'url';
+import { fileURLToPath, pathToFileURL } from 'url';
 import {
   getDesktopSettingsSnapshot,
+  readDesktopSettings,
   updateDesktopSettings,
   type DesktopSettings
 } from '../desktop-settings';
@@ -58,8 +59,12 @@ import {
   openCurrentDataFolder
 } from '../data-management';
 import { listRunningProcessNames } from '../process-list';
+import { detectActiveGame } from '../game-detection';
 
 const DEFAULT_MIME_TYPE = 'application/octet-stream';
+const MAX_ACTIVE_DESKTOP_NOTIFICATIONS = 20;
+const activeDesktopNotifications = new Set<Notification>();
+const desktopNotificationCleanups = new Map<Notification, () => void>();
 const FILE_CLIPBOARD_FORMATS = [
   'x-special/gnome-copied-files',
   'text/uri-list',
@@ -325,6 +330,18 @@ export function setupSystemHandlers(): void {
 
   ipcMain.handle('get-running-process-names', async () => await listRunningProcessNames());
 
+  ipcMain.handle('get-active-game-candidate', async () => await detectActiveGame());
+
+  ipcMain.handle('get-ignored-game-processes', () => {
+    return readDesktopSettings().ignoredGameProcesses;
+  });
+
+  ipcMain.handle('set-ignored-game-processes', (_event, list: unknown) => {
+    const snapshot = updateDesktopSettings({ ignoredGameProcesses: Array.isArray(list) ? list : [] });
+
+    return snapshot.ignoredGameProcesses;
+  });
+
   ipcMain.handle('prepare-linux-screen-share-audio-routing', async () => {
     return await prepareLinuxScreenShareAudioRouting();
   });
@@ -385,9 +402,16 @@ export function setupSystemHandlers(): void {
           icon: getWindowIconPath(),
           silent: true
         });
-
-        notification.on('click', () => {
+        const cleanup = () => {
+          notification.removeListener('click', handleClick);
+          notification.removeListener('close', cleanup);
+          notification.removeListener('failed', cleanup);
+          activeDesktopNotifications.delete(notification);
+          desktopNotificationCleanups.delete(notification);
+        };
+        const handleClick = () => {
           if (!mainWindow) {
+            cleanup();
             return;
           }
 
@@ -400,7 +424,26 @@ export function setupSystemHandlers(): void {
           }
 
           mainWindow.focus();
-        });
+          cleanup();
+          notification.close();
+        };
+
+        notification.on('click', handleClick);
+        notification.once('close', cleanup);
+        notification.once('failed', cleanup);
+        activeDesktopNotifications.add(notification);
+        desktopNotificationCleanups.set(notification, cleanup);
+
+        while (activeDesktopNotifications.size > MAX_ACTIVE_DESKTOP_NOTIFICATIONS) {
+          const oldestNotification = activeDesktopNotifications.values().next().value;
+
+          if (!oldestNotification) {
+            break;
+          }
+
+          desktopNotificationCleanups.get(oldestNotification)?.();
+          oldestNotification.close();
+        }
 
         notification.show();
       } catch {
@@ -519,12 +562,46 @@ export function setupSystemHandlers(): void {
     }
   });
 
+  ipcMain.handle('get-file-url', async (_event, filePath: string) => {
+    if (typeof filePath !== 'string' || !filePath.trim()) {
+      return null;
+    }
+
+    try {
+      await fsp.access(filePath, fs.constants.F_OK);
+      return pathToFileURL(filePath).toString();
+    } catch {
+      return null;
+    }
+  });
+
   ipcMain.handle('read-file', async (_event, filePath: string) => {
     const data = await fsp.readFile(filePath);
 
     return data.toString('base64');
   });
 
+  ipcMain.handle('read-file-chunk', async (_event, filePath: string, start: number, end: number) => {
+    const fileHandle = await fsp.open(filePath, 'r');
+
+    try {
+      const safeStart = Math.max(0, Math.trunc(start));
+      const safeEnd = Math.max(safeStart, Math.trunc(end));
+      const buffer = Buffer.alloc(safeEnd - safeStart);
+      const result = await fileHandle.read(buffer, 0, buffer.length, safeStart);
+
+      return buffer.subarray(0, result.bytesRead).toString('base64');
+    } finally {
+      await fileHandle.close();
+    }
+  });
+
+  ipcMain.handle('get-file-size', async (_event, filePath: string) => {
+    const stats = await fsp.stat(filePath);
+
+    return stats.size;
+  });
+
   ipcMain.handle('read-clipboard-files', async () => {
     return await readClipboardFiles();
   });
@@ -536,6 +613,13 @@ export function setupSystemHandlers(): void {
     return true;
   });
 
+  ipcMain.handle('append-file', async (_event, filePath: string, base64Data: string) => {
+    const buffer = Buffer.from(base64Data, 'base64');
+
+    await fsp.appendFile(filePath, buffer);
+    return true;
+  });
+
   ipcMain.handle('delete-file', async (_event, filePath: string) => {
     try {
       await fsp.unlink(filePath);
@@ -567,6 +651,60 @@ export function setupSystemHandlers(): void {
       cancelled: false };
   });
 
+  ipcMain.handle('save-existing-file-as', async (_event, sourceFilePath: string, defaultFileName: string) => {
+    if (typeof sourceFilePath !== 'string' || !sourceFilePath.trim()) {
+      return { saved: false,
+        cancelled: false };
+    }
+
+    const stats = await fsp.stat(sourceFilePath);
+
+    if (!stats.isFile()) {
+      return { saved: false,
+        cancelled: false };
+    }
+
+    const result = await dialog.showSaveDialog({
+      defaultPath: defaultFileName || path.basename(sourceFilePath)
+    });
+
+    if (result.canceled || !result.filePath) {
+      return { saved: false,
+        cancelled: true };
+    }
+
+    await fsp.copyFile(sourceFilePath, result.filePath);
+
+    return { saved: true,
+      cancelled: false };
+  });
+
+  ipcMain.handle('open-file-path', async (_event, filePath: string) => {
+    if (typeof filePath !== 'string' || !filePath.trim()) {
+      return { opened: false,
+        reason: 'missing-path' };
+    }
+
+    try {
+      const stats = await fsp.stat(filePath);
+
+      if (!stats.isFile()) {
+        return { opened: false,
+          reason: 'not-a-file' };
+      }
+
+      const error = await shell.openPath(filePath);
+
+      return error
+        ? { opened: false,
+          reason: error }
+        : { opened: true };
+    } catch (error) {
+      return { opened: false,
+        reason: error instanceof Error ? error.message : 'open-failed' };
+    }
+  });
+
   ipcMain.handle('ensure-dir', async (_event, dirPath: string) => {
     await fsp.mkdir(dirPath, { recursive: true });
     return true;

electron/preload.ts

@@ -203,6 +203,24 @@ export interface ContextMenuParams {
   };
 }
 
+export interface ActiveGameCandidate {
+  processName: string;
+  rawProcessName: string;
+  executablePath?: string;
+  windowTitle?: string;
+  pid?: number;
+  isFullscreen: boolean;
+  bounds?: { width: number; height: number };
+  confidence: number;
+  source: 'foreground' | 'process-scan';
+  reasons: string[];
+}
+
+export interface ActiveGameCandidateResult {
+  candidate: ActiveGameCandidate | null;
+  fallbackProcessNames: string[];
+}
+
 export interface ElectronAPI {
   linuxDisplayServer: string;
   minimizeWindow: () => void;
@@ -212,6 +230,9 @@ export interface ElectronAPI {
   openExternal: (url: string) => Promise<boolean>;
   getSources: () => Promise<{ id: string; name: string; thumbnail: string }[]>;
   getRunningProcessNames: () => Promise<string[]>;
+  getActiveGameCandidate: () => Promise<ActiveGameCandidateResult>;
+  getIgnoredGameProcesses: () => Promise<string[]>;
+  setIgnoredGameProcesses: (list: string[]) => Promise<string[]>;
   prepareLinuxScreenShareAudioRouting: () => Promise<LinuxScreenShareAudioRoutingInfo>;
   activateLinuxScreenShareAudioRouting: () => Promise<LinuxScreenShareAudioRoutingInfo>;
   deactivateLinuxScreenShareAudioRouting: () => Promise<boolean>;
@@ -282,9 +303,15 @@ export interface ElectronAPI {
   onDeepLinkReceived: (listener: (url: string) => void) => () => void;
   readClipboardFiles: () => Promise<ClipboardFilePayload[]>;
   readFile: (filePath: string) => Promise<string>;
+  readFileChunk: (filePath: string, start: number, end: number) => Promise<string>;
+  getFileSize: (filePath: string) => Promise<number>;
   writeFile: (filePath: string, data: string) => Promise<boolean>;
+  appendFile: (filePath: string, data: string) => Promise<boolean>;
   saveFileAs: (defaultFileName: string, data: string) => Promise<{ saved: boolean; cancelled: boolean }>;
+  saveExistingFileAs: (sourceFilePath: string, defaultFileName: string) => Promise<{ saved: boolean; cancelled: boolean }>;
+  openFilePath: (filePath: string) => Promise<{ opened: boolean; reason?: string }>;
   fileExists: (filePath: string) => Promise<boolean>;
+  getFileUrl: (filePath: string) => Promise<string | null>;
   deleteFile: (filePath: string) => Promise<boolean>;
   ensureDir: (dirPath: string) => Promise<boolean>;
 
@@ -308,6 +335,9 @@ const electronAPI: ElectronAPI = {
   openExternal: (url) => ipcRenderer.invoke('open-external', url),
   getSources: () => ipcRenderer.invoke('get-sources'),
   getRunningProcessNames: () => ipcRenderer.invoke('get-running-process-names'),
+  getActiveGameCandidate: () => ipcRenderer.invoke('get-active-game-candidate'),
+  getIgnoredGameProcesses: () => ipcRenderer.invoke('get-ignored-game-processes'),
+  setIgnoredGameProcesses: (list) => ipcRenderer.invoke('set-ignored-game-processes', list),
   prepareLinuxScreenShareAudioRouting: () => ipcRenderer.invoke('prepare-linux-screen-share-audio-routing'),
   activateLinuxScreenShareAudioRouting: () => ipcRenderer.invoke('activate-linux-screen-share-audio-routing'),
   deactivateLinuxScreenShareAudioRouting: () => ipcRenderer.invoke('deactivate-linux-screen-share-audio-routing'),
@@ -404,9 +434,15 @@ const electronAPI: ElectronAPI = {
   },
   readClipboardFiles: () => ipcRenderer.invoke('read-clipboard-files'),
   readFile: (filePath) => ipcRenderer.invoke('read-file', filePath),
+  readFileChunk: (filePath, start, end) => ipcRenderer.invoke('read-file-chunk', filePath, start, end),
+  getFileSize: (filePath) => ipcRenderer.invoke('get-file-size', filePath),
   writeFile: (filePath, data) => ipcRenderer.invoke('write-file', filePath, data),
+  appendFile: (filePath, data) => ipcRenderer.invoke('append-file', filePath, data),
   saveFileAs: (defaultFileName, data) => ipcRenderer.invoke('save-file-as', defaultFileName, data),
+  saveExistingFileAs: (sourceFilePath, defaultFileName) => ipcRenderer.invoke('save-existing-file-as', sourceFilePath, defaultFileName),
+  openFilePath: (filePath) => ipcRenderer.invoke('open-file-path', filePath),
   fileExists: (filePath) => ipcRenderer.invoke('file-exists', filePath),
+  getFileUrl: (filePath) => ipcRenderer.invoke('get-file-url', filePath),
   deleteFile: (filePath) => ipcRenderer.invoke('delete-file', filePath),
   ensureDir: (dirPath) => ipcRenderer.invoke('ensure-dir', dirPath),
 

package.json

@@ -90,6 +90,7 @@
     "codemirror": "^6.0.2",
     "cytoscape": "^3.33.1",
     "electron-updater": "^6.6.2",
+    "get-windows": "^9.3.0",
     "mermaid": "^11.12.3",
     "ngx-remark": "^0.2.2",
     "prismjs": "^1.30.0",
@@ -100,6 +101,7 @@
     "rxjs": "~7.8.0",
     "simple-peer": "^9.11.1",
     "sql.js": "^1.13.0",
+    "swiper": "^12.1.4",
     "tslib": "^2.3.0",
     "typeorm": "^0.3.28",
     "uuid": "^13.0.0",
@@ -155,8 +157,13 @@
       "!node_modules",
       "dist/client/**/*",
       "dist/electron/**/*",
-      "node_modules/{ansi-regex,ansi-styles,ansis,app-root-path,applescript,argparse,auto-launch,available-typed-arrays,balanced-match,base64-js,brace-expansion,buffer,builder-util-runtime,call-bind,call-bind-apply-helpers,call-bound,cliui,concat-map,cross-spawn,dayjs,debug,dedent,define-data-property,dotenv,dunder-proto,electron-updater,emoji-regex,es-define-property,es-errors,es-object-atoms,escalade,for-each,foreground-child,fs-extra,function-bind,get-caller-file,get-east-asian-width,get-intrinsic,get-proto,glob,gopd,graceful-fs,has-property-descriptors,has-symbols,has-tostringtag,hasown,ieee754,inherits,is-callable,is-fullwidth-code-point,is-typed-array,isarray,isexe,jackspeak,js-yaml,jsonfile,lazy-val,lodash.escaperegexp,lodash.isequal,lru-cache,math-intrinsics,minimatch,minimist,minipass,mkdirp,ms,package-json-from-dist,path-is-absolute,path-key,path-scurry,possible-typed-array-names,reflect-metadata,safe-buffer,sax,semver,set-function-length,sha.js,shebang-command,shebang-regex,signal-exit,sql-highlight,sql.js,string-width,string-width-cjs,strip-ansi,strip-ansi-cjs,tiny-typed-emitter,to-buffer,tslib,typed-array-buffer,typeorm,universalify,untildify,uuid,which,which-typed-array,winreg,wrap-ansi,wrap-ansi-cjs,y18n,yallist,yargs,yargs-parser}/**/*",
+      "node_modules/{abbrev,agent-base,ansi-regex,ansi-styles,ansis,app-root-path,applescript,aproba,are-we-there-yet,argparse,auto-launch,available-typed-arrays,balanced-match,base64-js,brace-expansion,buffer,builder-util-runtime,cacache,call-bind,call-bind-apply-helpers,call-bound,chownr,cliui,color-support,concat-map,console-control-strings,cross-spawn,dayjs,debug,dedent,define-data-property,delegates,detect-libc,dotenv,dunder-proto,electron-updater,emoji-regex,env-paths,es-define-property,es-errors,es-object-atoms,escalade,exponential-backoff,fdir,for-each,foreground-child,fs-extra,fs-minipass,function-bind,gauge,get-caller-file,get-east-asian-width,get-intrinsic,get-proto,get-windows,glob,gopd,graceful-fs,has-property-descriptors,has-symbols,has-tostringtag,has-unicode,hasown,http-cache-semantics,http-proxy-agent,https-proxy-agent,iconv-lite,ieee754,imurmurhash,inherits,ip-address,is-callable,is-fullwidth-code-point,is-typed-array,isarray,isexe,jackspeak,js-yaml,jsonfile,lazy-val,lodash.escaperegexp,lodash.isequal,lru-cache,make-dir,make-fetch-happen,math-intrinsics,minimatch,minimist,minipass,minipass-collect,minipass-fetch,minipass-flush,minipass-pipeline,minipass-sized,minizlib,mkdirp,ms,negotiator,node-addon-api,node-fetch,node-gyp,nopt,npmlog,object-assign,p-map,package-json-from-dist,path-is-absolute,path-key,path-scurry,picomatch,pify,possible-typed-array-names,proc-log,readable-stream,reflect-metadata,retry,rimraf,safe-buffer,safer-buffer,sax,semver,set-blocking,set-function-length,sha.js,shebang-command,shebang-regex,signal-exit,smart-buffer,socks,socks-proxy-agent,sql-highlight,sql.js,ssri,string-width,string-width-cjs,string_decoder,strip-ansi,strip-ansi-cjs,tar,tiny-typed-emitter,tinyglobby,to-buffer,tr46,tslib,typed-array-buffer,typeorm,unique-filename,unique-slug,universalify,untildify,util-deprecate,uuid,webidl-conversions,whatwg-url,which,which-typed-array,wide-align,winreg,wrap-ansi,wrap-ansi-cjs,y18n,yallist,yargs,yargs-parser}/**/*",
+      "node_modules/@gar/promise-retry/**/*",
       "node_modules/@isaacs/cliui/**/*",
+      "node_modules/@isaacs/fs-minipass/**/*",
+      "node_modules/@mapbox/node-pre-gyp/**/*",
+      "node_modules/@npmcli/agent/**/*",
+      "node_modules/@npmcli/fs/**/*",
       "node_modules/@pkgjs/parseargs/**/*",
       "node_modules/@sqltools/formatter/**/*",
       "!node_modules/**/test/**/*",

server/CONTEXT.md

@@ -0,0 +1,57 @@
+# Signaling Server (server)
+
+Owns the shared, internet-reachable runtime: HTTP routes for server directory / invites / join requests / link metadata, WebSocket signaling between clients (P2P session setup, presence, status), CQRS command and query handlers, and the shared TypeORM + sql.js persistence layer that holds signaling state.
+
+> **Format reference:**
+> - **Vocabulary** — bold term, one-sentence definition, aliases to avoid.
+> - **Relationships** — bullets with bold terms and cardinality.
+> - **Boundaries / IO** — what this subdomain exposes and consumes.
+> - **Invariants** — rules that always hold.
+> - **Flagged ambiguities** — terms in dispute with proposed resolutions.
+>
+> See `agents-docs/AGENTS_CONTEXT.md` for the contract. Update in the same turn a trigger fires (see `agents-docs/AGENT_WORKFLOW.md` § CONTEXT.md upkeep).
+
+## Vocabulary
+
+| Term | Definition | Aliases to avoid |
+|------|------------|------------------|
+| **Envelope** | The on-the-wire shape of a WebSocket message — `type`, `payload`, and routing metadata, typed in `src/websocket/types.ts` and mirrored in `toju-app/src/app/shared-kernel/signaling-contracts.ts`. | "packet", "frame" |
+| **Handler** | A WebSocket message handler registered in `src/websocket/handler.ts`; one per envelope type. | "listener" |
+| **CQRS command/query** | A typed request dispatched through `src/cqrs/` — commands mutate state, queries read it; both return a typed result. | "action" (NgRx term) |
+| **Server directory** | The catalog of joinable chat servers, exposed by `src/routes/servers.ts` plus invite and join-request routes. | "guild list" |
+| **SSRF guard** | The outbound-fetch policy enforced by `src/routes/ssrf-guard.ts` — gates link-metadata and proxy routes that fetch user-supplied URLs. | "proxy filter" |
+| **Variables file** | `data/variables.json` — runtime config (klipy key, server host/protocol, release manifest URL, link-preview toggle) normalized on startup. | "config", ".env" (those are separate) |
+
+## Relationships
+
+- A **WebSocket connection** carries many **Envelopes**; each envelope is routed to exactly one **Handler**.
+- A **Route** (HTTP) may dispatch zero or more **CQRS commands/queries** to mutate or read persistent state.
+- The **Server directory** depends on **Invites** and **Join requests** — listing, accepting, and revoking flows are split across `routes/servers.ts`, `routes/invites.ts`, `routes/join-requests.ts`.
+- **Persistence** entities in `src/entities/` are owned by this subdomain and never shipped to the renderer; the wire envelope is the contract instead.
+- **SSRF guard** is consumed by `link-metadata`, `proxy`, and `klipy` routes that fetch user-supplied URLs.
+
+## Boundaries / IO
+
+- **Exposes:**
+  - HTTP routes under `src/routes/`: `health`, `users`, `servers`, `invites`, `join-requests`, `games`, `klipy`, `link-metadata`, `proxy`, `plugin-support`, `openapi-docs`.
+  - WebSocket envelopes typed in `src/websocket/types.ts` — the realtime contract shared with `toju-app/src/app/shared-kernel/signaling-contracts.ts`.
+  - OpenAPI document served by `openapi-docs` route.
+- **Consumes:**
+  - The shared TypeORM SQLite database via `src/db/` (entities in `src/entities/`, migrations in `src/migrations/`).
+  - `data/variables.json` for runtime configuration; `.env` for `PORT` / SSL toggles.
+  - Optional outbound HTTP for link previews and klipy (all gated by **SSRF guard**).
+
+## Invariants
+
+- Every database schema change ships as a TypeORM **migration**; the live database is never mutated outside the migration system.
+- WebSocket **Envelope** types are defined once in `src/websocket/types.ts` and **must** stay structurally compatible with `toju-app/src/app/shared-kernel/signaling-contracts.ts` — drift between the two is a wire-protocol break.
+- User-supplied URLs are **never** fetched without going through `ssrf-guard.ts`.
+- Secrets (klipy API key, OAuth tokens, signing keys) live in `data/variables.json` or environment variables — never in code, never in logs.
+
+## Flagged ambiguities
+
+- _None recorded yet — add entries when an envelope type or route name resists clean definition._
+
+---
+
+*Agent-procedural rules (TDD, lint, build) live in `/AGENTS.md`. WebSocket envelope schemas and HTTP request/response shapes belong in `agents-docs/features/` when they cross subdomain boundaries. This file is the bounded-context domain artefact for the signaling server.*

server/src/routes/link-metadata.ts

@@ -196,9 +196,8 @@ router.get('/link-metadata', async (req, res) => {
     const cached = metadataCache.get(url);
 
     if (cached) {
-      const { cachedAt, ...metadata } = cached;
+      const { cachedAt: _cachedAt, ...metadata } = cached;
 
-      console.log(`[Link Metadata] Cache hit for ${url} (cached at ${new Date(cachedAt).toISOString()})`);
       return res.json(metadata);
     }
 

server/src/websocket/handler.ts

@@ -286,6 +286,26 @@ function handleChatMessage(user: ConnectedUser, message: WsMessage): void {
   }
 }
 
+function handleVoiceState(user: ConnectedUser, message: WsMessage): void {
+  const serverId = readMessageId(message['serverId']) ?? user.viewedServerId;
+
+  if (!serverId || !user.serverIds.has(serverId)) {
+    return;
+  }
+
+  broadcastToServer(
+    serverId,
+    {
+      ...message,
+      type: 'voice_state',
+      serverId,
+      oderId: user.oderId,
+      displayName: normalizeDisplayName(user.displayName)
+    },
+    user.oderId
+  );
+}
+
 function handleTyping(user: ConnectedUser, message: WsMessage): void {
   const typingSid = (message['serverId'] as string | undefined) ?? user.viewedServerId;
   const channelId = typeof message['channelId'] === 'string' && message['channelId'].trim() ? message['channelId'].trim() : 'general';
@@ -461,6 +481,13 @@ export async function handleWebSocketMessage(connectionId: string, message: WsMe
     case 'offer':
     case 'answer':
     case 'ice_candidate':
+    case 'direct-message':
+    case 'direct-message-status':
+    case 'direct-message-mutation':
+    case 'direct-message-typing':
+    case 'direct-message-sync-request':
+    case 'direct-message-sync':
+    case 'direct-call':
     case 'server_icon_peer_request':
     case 'server_icon_peer_data':
       forwardRtcMessage(user, message);
@@ -470,6 +497,10 @@ export async function handleWebSocketMessage(connectionId: string, message: WsMe
       handleChatMessage(user, message);
       break;
 
+    case 'voice_state':
+      handleVoiceState(user, message);
+      break;
+
     case 'typing':
       handleTyping(user, message);
       break;

skills-lock.json

@@ -5,6 +5,18 @@
       "source": "JuliusBrussee/caveman",
       "sourceType": "github",
       "computedHash": "4d486dd6f9fbb27ce1c51c972c9a5eb25a53236ae05eabf4d076ac1e293f4b7a"
+    },
+    "document-features": {
+      "source": "Grade-AI-Labs/Mimas",
+      "sourceType": "github",
+      "skillPath": "skills/document-features/SKILL.md",
+      "computedHash": "e4df8d900aab6698d2ae65c575ca006a05d13ff99a17d3a7273124858d57051d"
+    },
+    "find-features": {
+      "source": "Grade-AI-Labs/Mimas",
+      "sourceType": "github",
+      "skillPath": "skills/find-features/SKILL.md",
+      "computedHash": "2581a85c49fff668c838068c06611723e233890be7e3cdeaab6c7545ecd85e89"
     }
   }
 }

toju-app/CONTEXT.md

@@ -0,0 +1,51 @@
+# Product Client (toju-app)
+
+Owns the user-facing Angular 21 desktop chat experience: rendering and orchestrating chat, voice, screen-share, plugin UI, theming, and identity flows on top of the Electron `window.api` bridge and the server WebSocket. Houses every bounded context the end user interacts with, organized DDD-style under `src/app/domains/`.
+
+> **Format reference:**
+> - **Vocabulary** — bold term, one-sentence definition, aliases to avoid.
+> - **Relationships** — bullets with bold terms and cardinality.
+> - **Boundaries / IO** — what this subdomain exposes and consumes.
+> - **Invariants** — rules that always hold.
+> - **Flagged ambiguities** — terms in dispute with proposed resolutions.
+>
+> See `agents-docs/AGENTS_CONTEXT.md` for the contract. Update in the same turn a trigger fires (see `agents-docs/AGENT_WORKFLOW.md` § CONTEXT.md upkeep).
+
+## Vocabulary
+
+| Term | Definition | Aliases to avoid |
+|------|------------|------------------|
+| **Domain** | A bounded context under `src/app/domains/<name>/` that owns its own models, services, NgRx slice, and components — e.g. *chat*, *voice-session*, *plugins*. | "module", "feature" (Angular reserves these for different things) |
+| **Shared kernel** | Cross-domain contracts in `src/app/shared-kernel/` — wire-format models, P2P transfer utilities, plugin contracts, signaling contracts — imported by multiple domains. | "common", "core" |
+| **Infrastructure** | Technical-runtime concerns shared by domains: `persistence/` (client-side store wiring) and `realtime/` (WebSocket adapter). Not a domain. | "shared", "lib" |
+| **Rules file** | A pure-function module suffixed `*.rules.ts` that encodes domain logic without Angular or NgRx dependencies — easy to unit-test. | "helpers", "utils" |
+
+## Relationships
+
+- A **Domain** owns zero or more **Components**, **Services**, **NgRx slices**, and **Rules files**.
+- A **Domain** may consume **Shared kernel** contracts but must never import from another **Domain** directly — cross-domain coupling goes through the shared kernel or NgRx events.
+- The **Realtime** infrastructure adapts server WebSocket envelopes (defined in `src/app/shared-kernel/signaling-contracts.ts` and mirrored in `server/src/websocket/types.ts`) into NgRx actions consumed by domains.
+- The **Plugins** domain consumes plugin manifests loaded by Electron's `plugin-library.ts` and exposes a sandboxed runtime that other domains may hook into.
+
+## Boundaries / IO
+
+- **Exposes:** the Angular SPA bundle served at `:4200` in dev (`ng serve`) or mounted by Electron in production; NgRx store events that other domains in this subdomain consume; UI surface to the end user.
+- **Consumes:**
+  - `window.api.*` IPC surface exposed by Electron preload (defined in `electron/preload.ts` and `electron/api/`).
+  - WebSocket envelopes from `server/src/websocket/` (typed by `shared-kernel/signaling-contracts.ts`).
+  - REST endpoints from the server's `server/src/routes/` (server directory, invites, join requests, link metadata, klipy).
+  - Plugin manifests resolved by Electron's plugin library.
+
+## Invariants
+
+- A **Domain** never imports from another **Domain** directly — only through the **Shared kernel** or NgRx actions.
+- **Rules files** stay framework-free (no Angular, no NgRx) so they can be Vitest-tested as plain functions.
+- Wire-format types (anything that crosses the WebSocket or IPC boundary) live in **Shared kernel**, never inside a single domain.
+
+## Flagged ambiguities
+
+- _None recorded yet — add entries when a domain term resists clean definition._
+
+---
+
+*Agent-procedural rules (TDD, lint, etc.) live in `/AGENTS.md`. Per-domain implementation detail lives in `src/app/domains/<name>/README.md`. This file is the bounded-context domain artefact for the product client as a whole.*

toju-app/public/vlcjs/metoyou-vlc-player.js

@@ -0,0 +1,8 @@
+(function registerMetoYouVlcPlaceholder(globalScope) {
+  globalScope.MetoYouVlcJs = {
+    isPlaceholder: true,
+    createPlayer() {
+      throw new Error('Experimental VLC.js playback is enabled, but no VLC.js runtime is bundled. Replace /vlcjs/metoyou-vlc-player.js with a runtime adapter to enable playback.');
+    }
+  };
+})(window);

toju-app/src/app/app.html

@@ -3,14 +3,16 @@
   class="workspace-bright-theme relative h-screen overflow-hidden bg-background text-foreground"
 >
   <div
-    class="grid h-full min-h-0 min-w-0 overflow-hidden"
-    [ngStyle]="appShellLayoutStyles()"
+    class="h-full min-h-0 min-w-0 overflow-hidden"
+    [class.grid]="!isMobile()"
+    [class.flex]="isMobile()"
+    [ngStyle]="isMobile() ? null : appShellLayoutStyles()"
   >
     <aside
       appThemeNode="serversRail"
       class="min-h-0 overflow-hidden bg-transparent"
-      [class.hidden]="isThemeStudioFullscreen()"
-      [ngStyle]="serversRailLayoutStyles()"
+      [class.hidden]="isThemeStudioFullscreen() || isMobile()"
+      [ngStyle]="isMobile() ? null : serversRailLayoutStyles()"
     >
       <app-servers-rail class="block h-full" />
     </aside>
@@ -18,9 +20,12 @@
     <main
       appThemeNode="appWorkspace"
       class="relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-background"
-      [ngStyle]="appWorkspaceShellStyles()"
+      [class.flex-1]="isMobile()"
+      [ngStyle]="isMobile() ? null : appWorkspaceShellStyles()"
     >
-      <app-title-bar class="block shrink-0" />
+      @if (!isMobile()) {
+        <app-title-bar class="block shrink-0" />
+      }
 
       <div class="relative min-h-0 flex-1 overflow-hidden">
         @if (isThemeStudioFullscreen()) {
@@ -88,6 +93,16 @@
     </main>
   </div>
 
+  @if (isMobile() && directCalls.mobileOverlaySession(); as call) {
+    <div class="absolute inset-0 z-[70]">
+      <app-private-call
+        class="block h-full w-full"
+        [callIdInput]="call.callId"
+        [overlayMode]="true"
+      />
+    </div>
+  }
+
   @if (isThemeStudioFullscreen()) {
   <div
     #themeStudioControlsRef
@@ -149,6 +164,7 @@
   <app-floating-voice-controls />
   }
   <app-settings-modal />
+  <app-incoming-call-modal />
   <app-screen-share-source-picker />
   <app-native-context-menu />
   <app-debug-console [showLauncher]="false" />

toju-app/src/app/app.routes.ts

@@ -44,6 +44,21 @@ export const routes: Routes = [
     loadComponent: () =>
       import('./domains/direct-message/feature/dm-workspace/dm-workspace.component').then((module) => module.DmWorkspaceComponent)
   },
+  {
+    path: 'pm',
+    loadComponent: () =>
+      import('./domains/direct-message/feature/dm-workspace/dm-workspace.component').then((module) => module.DmWorkspaceComponent)
+  },
+  {
+    path: 'pm/:conversationId',
+    loadComponent: () =>
+      import('./domains/direct-message/feature/dm-workspace/dm-workspace.component').then((module) => module.DmWorkspaceComponent)
+  },
+  {
+    path: 'call/:callId',
+    loadComponent: () =>
+      import('./features/direct-call/private-call.component').then((module) => module.PrivateCallComponent)
+  },
   {
     path: 'settings',
     loadComponent: () =>

toju-app/src/app/app.ts

@@ -30,12 +30,15 @@ import { ServerDirectoryFacade } from './domains/server-directory';
 import { NotificationsFacade } from './domains/notifications';
 import { TimeSyncService } from './core/services/time-sync.service';
 import { VoiceSessionFacade } from './domains/voice-session';
-import { ExternalLinkService } from './core/platform';
+import { ExternalLinkService, ViewportService } from './core/platform';
 import { SettingsModalService } from './core/services/settings-modal.service';
 import { ElectronBridgeService } from './core/platform/electron/electron-bridge.service';
 import { UserStatusService } from './core/services/user-status.service';
 import { GameActivityService } from './domains/game-activity';
 import { PluginBootstrapService } from './domains/plugins';
+import { DirectCallService } from './domains/direct-call';
+import { IncomingCallModalComponent } from './domains/direct-call/feature/incoming-call-modal/incoming-call-modal.component';
+import { PrivateCallComponent } from './features/direct-call/private-call.component';
 import { ServersRailComponent } from './features/servers/servers-rail/servers-rail.component';
 import { TitleBarComponent } from './features/shell/title-bar/title-bar.component';
 import { FloatingVoiceControlsComponent } from './domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component';
@@ -63,10 +66,12 @@ import {
     ServersRailComponent,
     TitleBarComponent,
     FloatingVoiceControlsComponent,
+    IncomingCallModalComponent,
     SettingsModalComponent,
     DebugConsoleComponent,
     ScreenShareSourcePickerComponent,
     NativeContextMenuComponent,
+    PrivateCallComponent,
     ThemeNodeDirective,
     ThemePickerOverlayComponent
   ],
@@ -96,9 +101,12 @@ export class App implements OnInit, OnDestroy {
   readonly theme = inject(ThemeService);
   readonly voiceSession = inject(VoiceSessionFacade);
   readonly externalLinks = inject(ExternalLinkService);
+  readonly viewport = inject(ViewportService);
+  readonly isMobile = this.viewport.isMobile;
   readonly electronBridge = inject(ElectronBridgeService);
   readonly userStatus = inject(UserStatusService);
   readonly gameActivity = inject(GameActivityService);
+  readonly directCalls = inject(DirectCallService);
   readonly dismissedDesktopUpdateNoticeKey = signal<string | null>(null);
   readonly themeStudioFullscreenComponent = signal<Type<unknown> | null>(null);
   readonly themeStudioControlsPosition = signal<{ x: number; y: number } | null>(null);
@@ -117,7 +125,11 @@ export class App implements OnInit, OnDestroy {
     return this.settingsModal.activePage() === 'theme'
       && this.settingsModal.themeStudioMinimized();
   });
-  readonly isDirectMessageRoute = computed(() => this.getRoutePath(this.currentRouteUrl()).startsWith('/dm'));
+  readonly isDirectMessageRoute = computed(() => {
+    const routePath = this.getRoutePath(this.currentRouteUrl());
+
+    return routePath.startsWith('/dm') || routePath.startsWith('/pm') || routePath.startsWith('/call');
+  });
   readonly desktopUpdateNoticeKey = computed(() => {
     const updateState = this.desktopUpdateState();
 
@@ -255,11 +267,22 @@ export class App implements OnInit, OnDestroy {
 
     if (!currentUserId) {
       if (!this.isPublicRoute(currentUrl)) {
-        this.router.navigate(['/login'], {
-          queryParams: {
-            returnUrl: currentUrl
-          }
-        }).catch(() => {});
+        // On mobile, new/unauthenticated visitors landing on the app root or
+        // /search should stay on /search (which already exposes a login CTA).
+        // The login form has no mobile chrome / back button, so dropping new
+        // users straight onto it leaves them with no way to navigate away.
+        const currentPath = this.getRoutePath(currentUrl);
+        const isSearchLanding = currentPath === '/' || currentPath === '/search';
+
+        if (this.isMobile() && isSearchLanding) {
+          this.router.navigate(['/search'], { replaceUrl: true }).catch(() => {});
+        } else {
+          this.router.navigate(['/login'], {
+            queryParams: {
+              returnUrl: currentUrl
+            }
+          }).catch(() => {});
+        }
       }
     } else {
       this.store.dispatch(UsersActions.loadCurrentUser());

toju-app/src/app/core/platform/electron/electron-api.models.ts

@@ -215,6 +215,24 @@ export interface ContextMenuParams {
   };
 }
 
+export interface ActiveGameCandidate {
+  processName: string;
+  rawProcessName: string;
+  executablePath?: string;
+  windowTitle?: string;
+  pid?: number;
+  isFullscreen: boolean;
+  bounds?: { width: number; height: number };
+  confidence: number;
+  source: 'foreground' | 'process-scan';
+  reasons: string[];
+}
+
+export interface ActiveGameCandidateResult {
+  candidate: ActiveGameCandidate | null;
+  fallbackProcessNames: string[];
+}
+
 export interface ElectronApi {
   linuxDisplayServer: string;
   minimizeWindow: () => void;
@@ -223,6 +241,9 @@ export interface ElectronApi {
   openExternal: (url: string) => Promise<boolean>;
   getSources: () => Promise<{ id: string; name: string; thumbnail: string }[]>;
   getRunningProcessNames: () => Promise<string[]>;
+  getActiveGameCandidate?: () => Promise<ActiveGameCandidateResult>;
+  getIgnoredGameProcesses?: () => Promise<string[]>;
+  setIgnoredGameProcesses?: (list: string[]) => Promise<string[]>;
   prepareLinuxScreenShareAudioRouting: () => Promise<LinuxScreenShareAudioRoutingInfo>;
   activateLinuxScreenShareAudioRouting: () => Promise<LinuxScreenShareAudioRoutingInfo>;
   deactivateLinuxScreenShareAudioRouting: () => Promise<boolean>;
@@ -262,9 +283,15 @@ export interface ElectronApi {
   onDeepLinkReceived: (listener: (url: string) => void) => () => void;
   readClipboardFiles: () => Promise<ClipboardFilePayload[]>;
   readFile: (filePath: string) => Promise<string>;
+  readFileChunk: (filePath: string, start: number, end: number) => Promise<string>;
+  getFileSize: (filePath: string) => Promise<number>;
   writeFile: (filePath: string, data: string) => Promise<boolean>;
+  appendFile: (filePath: string, data: string) => Promise<boolean>;
   saveFileAs: (defaultFileName: string, data: string) => Promise<{ saved: boolean; cancelled: boolean }>;
+  saveExistingFileAs?: (sourceFilePath: string, defaultFileName: string) => Promise<{ saved: boolean; cancelled: boolean }>;
+  openFilePath?: (filePath: string) => Promise<{ opened: boolean; reason?: string }>;
   fileExists: (filePath: string) => Promise<boolean>;
+  getFileUrl: (filePath: string) => Promise<string | null>;
   deleteFile: (filePath: string) => Promise<boolean>;
   ensureDir: (dirPath: string) => Promise<boolean>;
   onContextMenu: (listener: (params: ContextMenuParams) => void) => () => void;

toju-app/src/app/core/platform/index.ts

@@ -1,2 +1,3 @@
 export * from './platform.service';
 export * from './external-link.service';
+export * from './viewport.service';

toju-app/src/app/core/platform/viewport.service.ts

@@ -0,0 +1,69 @@
+import {
+  DestroyRef,
+  Injectable,
+  NgZone,
+  computed,
+  inject,
+  signal
+} from '@angular/core';
+
+/**
+ * Tracks viewport-level UX traits used to switch between desktop and mobile layouts.
+ *
+ * `isMobile` follows the Tailwind `md` breakpoint (max-width: 767.98px). It is the
+ * single source of truth for whether the UI should render in mobile mode - components
+ * and templates should use this signal rather than ad-hoc `window.innerWidth` checks.
+ *
+ * `isTouch` is a best-effort hint indicating coarse pointer / touch capability. It is
+ * stable for the lifetime of the page and does not flip when devices are connected.
+ */
+@Injectable({ providedIn: 'root' })
+export class ViewportService {
+  /** Pixel breakpoint that separates mobile from tablet/desktop layouts. Matches Tailwind `md`. */
+  static readonly MOBILE_MAX_WIDTH = 767.98;
+
+  /** True when the viewport is in mobile mode (width <= MOBILE_MAX_WIDTH). */
+  readonly isMobile = computed(() => this.isMobileSignal());
+  /** True when the primary pointer is coarse (touch screen). */
+  readonly isTouch = computed(() => this.isTouchSignal());
+  /** Convenience: true when running on a non-mobile viewport. */
+  readonly isDesktop = computed(() => !this.isMobileSignal());
+
+  private readonly zone = inject(NgZone);
+  private readonly destroyRef = inject(DestroyRef);
+
+  private readonly mobileQuery: MediaQueryList | null;
+  private readonly touchQuery: MediaQueryList | null;
+
+  private readonly isMobileSignal = signal(false);
+  private readonly isTouchSignal = signal(false);
+
+  constructor() {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      this.mobileQuery = null;
+      this.touchQuery = null;
+      return;
+    }
+
+    this.mobileQuery = window.matchMedia(`(max-width: ${ViewportService.MOBILE_MAX_WIDTH}px)`);
+    this.touchQuery = window.matchMedia('(pointer: coarse)');
+
+    this.isMobileSignal.set(this.mobileQuery.matches);
+    this.isTouchSignal.set(this.touchQuery.matches);
+
+    const onMobileChange = (event: MediaQueryListEvent) => {
+      this.zone.run(() => this.isMobileSignal.set(event.matches));
+    };
+    const onTouchChange = (event: MediaQueryListEvent) => {
+      this.zone.run(() => this.isTouchSignal.set(event.matches));
+    };
+
+    this.mobileQuery.addEventListener('change', onMobileChange);
+    this.touchQuery.addEventListener('change', onTouchChange);
+
+    this.destroyRef.onDestroy(() => {
+      this.mobileQuery?.removeEventListener('change', onMobileChange);
+      this.touchQuery?.removeEventListener('change', onTouchChange);
+    });
+  }
+}

toju-app/src/app/core/services/notification-audio.service.ts

@@ -7,6 +7,7 @@ import { Injectable, signal } from '@angular/core';
  * Each key maps to a file in `src/assets/audio/`.
  */
 export enum AppSound {
+  Call = 'call',
   Joining = 'joining',
   Leave = 'leave',
   Notification = 'notification'
@@ -38,6 +39,8 @@ export class NotificationAudioService {
 
   private readonly sources = new Map<AppSound, string>();
 
+  private readonly activeLoops = new Map<AppSound, HTMLAudioElement>();
+
   /** Reactive notification volume (0 - 1), persisted to localStorage. */
   readonly notificationVolume = signal(this.loadVolume());
 
@@ -142,4 +145,37 @@ export class NotificationAudioService {
       });
     });
   }
+
+  playLoop(sound: AppSound, volumeOverride?: number): void {
+    if (this.dndMuted() || this.activeLoops.has(sound))
+      return;
+
+    const src = this.sources.get(sound) ?? this.resolveAudioUrl(sound);
+    const vol = volumeOverride ?? this.notificationVolume();
+
+    if (vol === 0)
+      return;
+
+    const audio = new Audio(src);
+
+    audio.loop = true;
+    audio.preload = 'auto';
+    audio.volume = Math.max(0, Math.min(1, vol));
+    this.activeLoops.set(sound, audio);
+    audio.play().catch(() => {
+      this.activeLoops.delete(sound);
+    });
+  }
+
+  stop(sound: AppSound): void {
+    const audio = this.activeLoops.get(sound);
+
+    if (!audio)
+      return;
+
+    audio.pause();
+    audio.currentTime = 0;
+    audio.remove();
+    this.activeLoops.delete(sound);
+  }
 }

toju-app/src/app/domains/README.md

@@ -13,7 +13,9 @@ infrastructure adapters and UI.
 | **authentication**   | Login / register HTTP orchestration, user-bar UI                                                                   | `AuthenticationService`                                     |
 | **chat**             | Messaging rules, sync logic, GIF/Klipy integration, chat UI                                                        | `KlipyService`, `canEditMessage()`, `ChatMessagesComponent` |
 | **direct-message**   | One-to-one WebRTC messages, offline queueing, delivery state, and friends                                          | `DirectMessageService`, `FriendService`                     |
-| **game-activity**    | Local game detection, server metadata matching, P2P now-playing sync, and elapsed playtime formatting              | `GameActivityService`, `formatGameActivityElapsed()`        |
+| **direct-call**      | Direct and small-group private calls initiated from people cards and direct messages                               | `DirectCallService`                                         |
+| **experimental-media** | Optional media playback experiments kept isolated from the default attachment path                               | `ExperimentalMediaSettingsService`                          |
+| **game-activity**    | Foreground-window-first game detection with confidence scoring (`MIN_GAME_CONFIDENCE`), server metadata matching, P2P now-playing sync, and elapsed playtime formatting | `GameActivityService`, `formatGameActivityElapsed()`        |
 | **notifications**    | Notification preferences, unread tracking, desktop alert orchestration                                             | `NotificationsFacade`                                       |
 | **plugins**          | Client-only plugin manifests, load ordering, registry state, and signal-server support metadata                    | `PluginHostService`, `PluginRegistryService`                |
 | **profile-avatar**   | Profile picture upload, crop/zoom editing, processing, local persistence, and P2P avatar sync                     | `ProfileAvatarFacade`                                       |
@@ -32,6 +34,8 @@ The larger domains also keep longer design notes in their own folders:
 - [authentication/README.md](authentication/README.md)
 - [chat/README.md](chat/README.md)
 - [direct-message/README.md](direct-message/README.md)
+- [direct-call/README.md](direct-call/README.md)
+- [experimental-media/README.md](experimental-media/README.md)
 - [notifications/README.md](notifications/README.md)
 - [plugins/README.md](plugins/README.md)
 - [profile-avatar/README.md](profile-avatar/README.md)

toju-app/src/app/domains/access-control/domain/rules/role-assignment.rules.spec.ts

@@ -0,0 +1,49 @@
+import type { Room } from '../../../../shared-kernel';
+import { SYSTEM_ROLE_IDS } from '../constants/access-control.constants';
+import { normalizeRoomAccessControl } from './room.rules';
+
+function buildRoom(overrides: Partial<Room> = {}): Room {
+  return {
+    id: 'room-1',
+    name: 'Room',
+    hostId: 'host-1',
+    isPrivate: false,
+    createdAt: 1,
+    userCount: 1,
+    members: [
+      {
+        id: 'user-1',
+        oderId: 'oder-1',
+        username: 'alice',
+        displayName: 'Alice',
+        role: 'admin',
+        joinedAt: 1,
+        lastSeenAt: 1
+      }
+    ],
+    ...overrides
+  };
+}
+
+describe('normalizeRoomRoleAssignments', () => {
+  it('uses legacy member roles when assignments are missing', () => {
+    const room = normalizeRoomAccessControl(buildRoom());
+
+    expect(room.roleAssignments).toEqual([
+      {
+        userId: 'user-1',
+        oderId: 'oder-1',
+        roleIds: [SYSTEM_ROLE_IDS.admin]
+      }
+    ]);
+
+    expect(room.members?.[0]?.role).toBe('admin');
+  });
+
+  it('honors an explicit empty assignment list', () => {
+    const room = normalizeRoomAccessControl(buildRoom({ roleAssignments: [] }));
+
+    expect(room.roleAssignments).toEqual([]);
+    expect(room.members?.[0]?.role).toBe('member');
+  });
+});

toju-app/src/app/domains/access-control/domain/rules/role-assignment.rules.ts

@@ -45,6 +45,7 @@ export function normalizeRoomRoleAssignments(
 ): RoomRoleAssignment[] {
   const validRoleIds = new Set(roles.map((role) => role.id).filter((roleId) => roleId !== SYSTEM_ROLE_IDS.everyone));
   const normalizedByUserKey = new Map<string, RoomRoleAssignment>();
+  const hasExplicitAssignments = Array.isArray(assignments);
 
   for (const assignment of assignments ?? []) {
     if (!assignment || typeof assignment !== 'object') {
@@ -72,7 +73,7 @@ export function normalizeRoomRoleAssignments(
     });
   }
 
-  if (normalizedByUserKey.size > 0) {
+  if (hasExplicitAssignments) {
     return sortAssignments(Array.from(normalizedByUserKey.values()));
   }
 

toju-app/src/app/domains/attachment/README.md

@@ -76,6 +76,8 @@ graph TD
 
 Files move between peers using a request/response pattern over the WebRTC data channel. The sender announces a file, the receiver requests it, and chunks flow back one by one.
 
+When Electron serves a file from disk, the sender reads one chunk at a time and uses the buffered data-channel send path so large saved media does not get loaded into renderer memory or flood the receiver.
+
 ```mermaid
 sequenceDiagram
     participant S as Sender
@@ -90,12 +92,12 @@ sequenceDiagram
 
     loop Every 64 KB chunk
         S->>R: file-chunk (attachmentId, index, data, progress, speed)
-        Note over R: Append to chunk buffer
+        Note over R: Append to chunk buffer, or append media directly to disk on Electron
         Note over R: Update progress + EWMA speed
     end
 
     Note over R: All chunks received
-    Note over R: Reassemble blob
+    Note over R: Reassemble blob, or open completed Electron media from disk
     Note over R: shouldPersistDownloadedAttachment? Save to disk
 ```
 
@@ -131,17 +133,27 @@ When the user navigates to a room, the manager watches the route and decides whi
 
 The decision lives in `shouldAutoRequestWhenWatched()` which calls `isAttachmentMedia()` and checks against `MAX_AUTO_SAVE_SIZE_BYTES`.
 
+Browser chat views render audio/video larger than 50 MB with the same generic file interface as other downloads, even after the bytes are available. Attachments with audio/video MIME types that Chromium reports as unsupported also use the generic file interface instead of a broken native player.
+
+An optional experimental VLC.js adapter can be enabled from General settings. When enabled, unsupported downloaded audio/video files show a manual Play action that lazy-loads `/vlcjs/metoyou-vlc-player.js`. The runtime is intentionally isolated in the experimental media domain and is not part of the default attachment path.
+
 ## Persistence
 
-On Electron, completed downloads are written to the app-data directory. The storage path is resolved per room and bucket:
+On Electron, local audio/video uploads are played through the original filesystem path when Electron exposes one, and received audio/video downloads are appended to an app-data file as chunks arrive. Completed audio/video downloads are then played through a file-backed media URL instead of being reloaded into a renderer `Blob`, which avoids full-file renderer memory pressure during download, startup restore, and playback. The storage path for downloaded server-room files is resolved per room and bucket:
 
 ```
-{appDataPath}/{serverId}/{roomName}/{bucket}/{attachmentId}.{ext?}
+{appDataPath}/server/{roomName}/{bucket}/{attachmentId}.{ext?}
 ```
 
-Room names are sanitised to remove filesystem-unsafe characters. The bucket is either `attachments` or `media` depending on the attachment type. The original filename is kept in attachment metadata for display and downloads, but the stored file uses the attachment ID plus the original extension so two uploads with the same visible name do not overwrite each other.
+Direct-message attachments use the conversation id instead of the server-room path:
 
-`AttachmentPersistenceService` handles startup migration from an older localStorage-based format into the database, and restores attachment metadata from the DB on init. On browser builds, files stay in memory only.
+```
+{appDataPath}/direct-messages/{conversationId}/{bucket}/{attachmentId}.{ext?}
+```
+
+Room and conversation names are sanitised to remove filesystem-unsafe characters. The bucket is `video`, `audio`, `image`, or `files` depending on the attachment type. The original filename is kept in attachment metadata for display and downloads, but the stored file uses the attachment ID plus the original extension so two uploads with the same visible name do not overwrite each other.
+
+`AttachmentPersistenceService` handles startup migration from an older localStorage-based format into the database, and restores attachment metadata from the DB on init. On Electron, saved audio/video records are restored as file-backed URLs; other restored files still need their bytes loaded when a `Blob` URL is required. On browser builds, files stay in memory only.
 
 ## Runtime store
 

toju-app/src/app/domains/attachment/application/services/attachment-manager.service.ts

@@ -35,6 +35,7 @@ export class AttachmentManagerService {
 
   private watchedRoomId: string | null = this.extractWatchedRoomId(this.router.url);
   private isDatabaseInitialised = false;
+  private autoDownloadRequestsByRoom = new Map<string, Promise<void>>();
 
   constructor() {
     effect(() => {
@@ -79,27 +80,23 @@ export class AttachmentManagerService {
   }
 
   async requestAutoDownloadsForRoom(roomId: string): Promise<void> {
-    if (!roomId || !this.isRoomWatched(roomId))
+    if (!roomId || !this.isRoomWatched(roomId) || this.webrtc.getConnectedPeers().length === 0)
       return;
 
-    if (this.database.isReady()) {
-      const messages = await this.database.getMessages(roomId, 500, 0);
+    const activeRequest = this.autoDownloadRequestsByRoom.get(roomId);
 
-      for (const message of messages) {
-        this.runtimeStore.rememberMessageRoom(message.id, message.roomId);
-        await this.requestAutoDownloadsForMessage(message.id);
-      }
-
-      return;
+    if (activeRequest) {
+      return activeRequest;
     }
 
-    for (const [messageId] of this.runtimeStore.getAttachmentEntries()) {
-      const attachmentRoomId = await this.persistence.resolveMessageRoomId(messageId);
-
-      if (attachmentRoomId === roomId) {
-        await this.requestAutoDownloadsForMessage(messageId);
+    const request = this.runAutoDownloadsForRoom(roomId).finally(() => {
+      if (this.autoDownloadRequestsByRoom.get(roomId) === request) {
+        this.autoDownloadRequestsByRoom.delete(roomId);
       }
-    }
+    });
+
+    this.autoDownloadRequestsByRoom.set(roomId, request);
+    return request;
   }
 
   async deleteForMessage(messageId: string): Promise<void> {
@@ -180,6 +177,31 @@ export class AttachmentManagerService {
     await this.transfer.fulfillRequestWithFile(messageId, fileId, targetPeerId, file);
   }
 
+  private async runAutoDownloadsForRoom(roomId: string): Promise<void> {
+    if (!this.isRoomWatched(roomId)) {
+      return;
+    }
+
+    if (this.database.isReady()) {
+      const messages = await this.database.getMessages(roomId, 500, 0);
+
+      for (const message of messages) {
+        this.runtimeStore.rememberMessageRoom(message.id, message.roomId);
+        await this.requestAutoDownloadsForMessage(message.id);
+      }
+
+      return;
+    }
+
+    for (const [messageId] of this.runtimeStore.getAttachmentEntries()) {
+      const attachmentRoomId = await this.persistence.resolveMessageRoomId(messageId);
+
+      if (attachmentRoomId === roomId) {
+        await this.requestAutoDownloadsForMessage(messageId);
+      }
+    }
+  }
+
   private async requestAutoDownloadsForMessage(messageId: string, attachmentId?: string): Promise<void> {
     if (!messageId)
       return;

toju-app/src/app/domains/attachment/application/services/attachment-persistence.service.ts

@@ -70,17 +70,20 @@ export class AttachmentPersistenceService {
     } catch { /* persistence is best-effort */ }
   }
 
-  async saveFileToDisk(attachment: Attachment, blob: Blob): Promise<void> {
+  async saveFileToDisk(attachment: Attachment, blob: Blob): Promise<string | null> {
     try {
-      const roomName = await this.resolveCurrentRoomName();
-      const diskPath = await this.attachmentStorage.saveBlob(attachment, blob, roomName);
+      const storageContainer = await this.resolveStorageContainerName(attachment);
+      const diskPath = await this.attachmentStorage.saveBlob(attachment, blob, storageContainer);
 
       if (!diskPath)
-        return;
+        return null;
 
       attachment.savedPath = diskPath;
       void this.persistAttachmentMeta(attachment);
+      return diskPath;
     } catch { /* disk save is best-effort */ }
+
+    return null;
   }
 
   async initFromDatabase(): Promise<void> {
@@ -120,6 +123,10 @@ export class AttachmentPersistenceService {
     });
   }
 
+  async resolveStorageContainerName(attachment: Pick<Attachment, 'messageId'>): Promise<string> {
+    return this.runtimeStore.getMessageRoomId(attachment.messageId) ?? await this.resolveCurrentRoomName();
+  }
+
   private async loadFromDatabase(): Promise<void> {
     try {
       const allRecords: AttachmentMeta[] = await this.database.getAllAttachments();
@@ -176,6 +183,11 @@ export class AttachmentPersistenceService {
             continue;
 
           if (attachment.savedPath) {
+            if (await this.restoreMediaAttachmentFromFileUrl(attachment, attachment.savedPath)) {
+              hasChanges = true;
+              continue;
+            }
+
             const savedBase64 = await this.attachmentStorage.readFile(attachment.savedPath);
 
             if (savedBase64) {
@@ -186,6 +198,11 @@ export class AttachmentPersistenceService {
           }
 
           if (attachment.filePath) {
+            if (await this.restoreMediaAttachmentFromFileUrl(attachment, attachment.filePath)) {
+              hasChanges = true;
+              continue;
+            }
+
             const originalBase64 = await this.attachmentStorage.readFile(attachment.filePath);
 
             if (originalBase64) {
@@ -222,6 +239,26 @@ export class AttachmentPersistenceService {
     );
   }
 
+  private async restoreMediaAttachmentFromFileUrl(attachment: Attachment, filePath: string): Promise<boolean> {
+    if (!this.isPlayableMedia(attachment)) {
+      return false;
+    }
+
+    const fileUrl = await this.attachmentStorage.getFileUrl(filePath);
+
+    if (!fileUrl) {
+      return false;
+    }
+
+    attachment.objectUrl = fileUrl;
+    attachment.available = true;
+    return true;
+  }
+
+  private isPlayableMedia(attachment: Pick<Attachment, 'mime'>): boolean {
+    return attachment.mime.startsWith('video/') || attachment.mime.startsWith('audio/');
+  }
+
   private async getRetainedSavedPathsForOtherMessages(messageId: string): Promise<Set<string>> {
     const retainedSavedPaths = new Set<string>();
 

toju-app/src/app/domains/attachment/application/services/attachment-transfer-transport.service.ts

@@ -49,6 +49,11 @@ export class AttachmentTransferTransportService {
     diskPath: string,
     isCancelled: () => boolean
   ): Promise<void> {
+    if (this.attachmentStorage.canReadFileChunks()) {
+      await this.streamFileFromDiskChunksToPeer(targetPeerId, messageId, fileId, diskPath, isCancelled);
+      return;
+    }
+
     const base64Full = await this.attachmentStorage.readFile(diskPath);
 
     if (!base64Full)
@@ -78,7 +83,45 @@ export class AttachmentTransferTransportService {
         data: base64Chunk
       };
 
-      this.webrtc.sendToPeer(targetPeerId, fileChunkEvent);
+      await this.webrtc.sendToPeerBuffered(targetPeerId, fileChunkEvent);
+    }
+  }
+
+  private async streamFileFromDiskChunksToPeer(
+    targetPeerId: string,
+    messageId: string,
+    fileId: string,
+    diskPath: string,
+    isCancelled: () => boolean
+  ): Promise<void> {
+    const fileSize = await this.attachmentStorage.getFileSize(diskPath);
+
+    if (fileSize === null)
+      return;
+
+    const totalChunks = Math.ceil(fileSize / FILE_CHUNK_SIZE_BYTES);
+
+    for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
+      if (isCancelled())
+        break;
+
+      const start = chunkIndex * FILE_CHUNK_SIZE_BYTES;
+      const end = Math.min(fileSize, start + FILE_CHUNK_SIZE_BYTES);
+      const base64Chunk = await this.attachmentStorage.readFileChunk(diskPath, start, end);
+
+      if (base64Chunk === null)
+        return;
+
+      const fileChunkEvent: FileChunkEvent = {
+        type: 'file-chunk',
+        messageId,
+        fileId,
+        index: chunkIndex,
+        total: totalChunks,
+        data: base64Chunk
+      };
+
+      await this.webrtc.sendToPeerBuffered(targetPeerId, fileChunkEvent);
     }
   }
 }

toju-app/src/app/domains/attachment/application/services/attachment-transfer.service.ts

@@ -28,6 +28,22 @@ import { AttachmentPersistenceService } from './attachment-persistence.service';
 import { AttachmentRuntimeStore } from './attachment-runtime.store';
 import { AttachmentTransferTransportService } from './attachment-transfer-transport.service';
 
+interface DiskReceiveAssembly {
+  path: string;
+  receivedCount: number;
+  receivedIndexes: Set<number>;
+  total: number;
+}
+
+interface ValidFileChunkPayload {
+  data: string;
+  fileId: string;
+  fromPeerId?: string;
+  index: number;
+  messageId: string;
+  total: number;
+}
+
 @Injectable({ providedIn: 'root' })
 export class AttachmentTransferService {
   private readonly webrtc = inject(RealtimeSessionFacade);
@@ -36,6 +52,9 @@ export class AttachmentTransferService {
   private readonly persistence = inject(AttachmentPersistenceService);
   private readonly transport = inject(AttachmentTransferTransportService);
 
+  private readonly diskReceiveAssemblies = new Map<string, DiskReceiveAssembly>();
+  private readonly diskReceiveChains = new Map<string, Promise<void>>();
+
   getAttachmentMetasForMessages(messageIds: string[]): Record<string, AttachmentMeta[]> {
     const result: Record<string, AttachmentMeta[]> = {};
 
@@ -174,10 +193,19 @@ export class AttachmentTransferService {
       attachments.push(attachment);
       this.runtimeStore.setOriginalFile(`${messageId}:${fileId}`, file);
 
-      try {
-        attachment.objectUrl = URL.createObjectURL(file);
+      const fileUrl = attachment.filePath && this.isPlayableMedia(attachment)
+        ? await this.attachmentStorage.getFileUrl(attachment.filePath)
+        : null;
+
+      if (fileUrl) {
+        attachment.objectUrl = fileUrl;
         attachment.available = true;
-      } catch { /* non-critical */ }
+      } else {
+        try {
+          attachment.objectUrl = URL.createObjectURL(file);
+          attachment.available = true;
+        } catch { /* non-critical */ }
+      }
 
       if (attachment.size <= MAX_AUTO_SAVE_SIZE_BYTES) {
         void this.persistence.saveFileToDisk(attachment, file);
@@ -257,6 +285,19 @@ export class AttachmentTransferService {
     if (!attachment)
       return;
 
+    if (this.shouldReceiveToDisk(attachment)) {
+      this.enqueueDiskFileChunk(attachment, {
+        data,
+        fileId,
+        fromPeerId,
+        index,
+        messageId,
+        total
+      });
+
+      return;
+    }
+
     const decodedBytes = this.transport.decodeBase64(data);
     const assemblyKey = `${messageId}:${fileId}`;
     const requestKey = this.buildRequestKey(messageId, fileId);
@@ -274,7 +315,7 @@ export class AttachmentTransferService {
     this.updateTransferProgress(attachment, decodedBytes, fromPeerId);
 
     this.runtimeStore.touch();
-    this.finalizeTransferIfComplete(attachment, assemblyKey, total);
+    void this.finalizeTransferIfComplete(attachment, assemblyKey, total);
   }
 
   async handleFileRequest(payload: FileRequestPayload): Promise<void> {
@@ -375,6 +416,7 @@ export class AttachmentTransferService {
 
       this.runtimeStore.deleteChunkBuffer(assemblyKey);
       this.runtimeStore.deleteChunkCount(assemblyKey);
+      void this.deleteDiskReceiveAssembly(assemblyKey);
 
       attachment.receivedBytes = 0;
       attachment.speedBps = 0;
@@ -533,11 +575,11 @@ export class AttachmentTransferService {
     attachment.lastUpdateMs = now;
   }
 
-  private finalizeTransferIfComplete(
+  private async finalizeTransferIfComplete(
     attachment: Attachment,
     assemblyKey: string,
     total: number
-  ): void {
+  ): Promise<void> {
     const receivedChunkCount = this.runtimeStore.getChunkCount(assemblyKey) ?? 0;
     const completeBuffer = this.runtimeStore.getChunkBuffer(assemblyKey);
 
@@ -551,16 +593,167 @@ export class AttachmentTransferService {
 
     const blob = new Blob(completeBuffer, { type: attachment.mime });
 
-    attachment.available = true;
-    attachment.objectUrl = URL.createObjectURL(blob);
-
-    if (shouldPersistDownloadedAttachment(attachment)) {
-      void this.persistence.saveFileToDisk(attachment, blob);
-    }
-
     this.runtimeStore.deleteChunkBuffer(assemblyKey);
     this.runtimeStore.deleteChunkCount(assemblyKey);
+
+    if (shouldPersistDownloadedAttachment(attachment)) {
+      const diskPath = await this.persistence.saveFileToDisk(attachment, blob);
+      const fileUrl = diskPath && this.isPlayableMedia(attachment)
+        ? await this.attachmentStorage.getFileUrl(diskPath)
+        : null;
+
+      if (fileUrl) {
+        attachment.objectUrl = fileUrl;
+      } else {
+        attachment.objectUrl = URL.createObjectURL(blob);
+      }
+    } else {
+      attachment.objectUrl = URL.createObjectURL(blob);
+    }
+
+    attachment.available = true;
     this.runtimeStore.touch();
     void this.persistence.persistAttachmentMeta(attachment);
   }
+
+  private isPlayableMedia(attachment: Pick<Attachment, 'mime'>): boolean {
+    return attachment.mime.startsWith('video/') || attachment.mime.startsWith('audio/');
+  }
+
+  private shouldReceiveToDisk(attachment: Attachment): boolean {
+    return this.isPlayableMedia(attachment) && !attachment.filePath && this.attachmentStorage.canWriteFiles();
+  }
+
+  private enqueueDiskFileChunk(
+    attachment: Attachment,
+    payload: ValidFileChunkPayload
+  ): void {
+    const assemblyKey = `${payload.messageId}:${payload.fileId}`;
+    const previous = this.diskReceiveChains.get(assemblyKey) ?? Promise.resolve();
+    const next = previous
+      .catch(() => undefined)
+      .then(() => this.handleDiskFileChunk(attachment, assemblyKey, payload))
+      .catch((error: unknown) => this.handleDiskReceiveFailure(attachment, assemblyKey, error));
+
+    this.diskReceiveChains.set(assemblyKey, next);
+    void next.finally(() => {
+      if (this.diskReceiveChains.get(assemblyKey) === next) {
+        this.diskReceiveChains.delete(assemblyKey);
+      }
+    });
+  }
+
+  private async handleDiskFileChunk(
+    attachment: Attachment,
+    assemblyKey: string,
+    payload: ValidFileChunkPayload
+  ): Promise<void> {
+    const decodedBytes = this.transport.decodeBase64(payload.data);
+    const requestKey = this.buildRequestKey(payload.messageId, payload.fileId);
+
+    this.runtimeStore.deletePendingRequest(requestKey);
+    this.clearAttachmentRequestError(attachment);
+
+    const assembly = await this.getOrCreateDiskReceiveAssembly(attachment, assemblyKey, payload.total);
+
+    if (!assembly) {
+      throw new Error('Could not prepare media download on disk.');
+    }
+
+    if (assembly.receivedIndexes.has(payload.index)) {
+      return;
+    }
+
+    if (payload.index !== assembly.receivedCount) {
+      throw new Error('Received media chunks out of order. Retry the download.');
+    }
+
+    const didAppend = await this.attachmentStorage.appendBase64(assembly.path, payload.data);
+
+    if (!didAppend) {
+      throw new Error('Could not write media download to disk.');
+    }
+
+    assembly.receivedIndexes.add(payload.index);
+    assembly.receivedCount += 1;
+    this.updateTransferProgress(attachment, decodedBytes, payload.fromPeerId);
+    this.runtimeStore.touch();
+
+    if (assembly.receivedCount < assembly.total && (attachment.receivedBytes ?? 0) < attachment.size) {
+      return;
+    }
+
+    const fileUrl = await this.attachmentStorage.getFileUrl(assembly.path);
+
+    if (!fileUrl) {
+      throw new Error('Could not open completed media download from disk.');
+    }
+
+    attachment.savedPath = assembly.path;
+    attachment.objectUrl = fileUrl;
+    attachment.available = true;
+    this.diskReceiveAssemblies.delete(assemblyKey);
+    this.runtimeStore.touch();
+    void this.persistence.persistAttachmentMeta(attachment);
+  }
+
+  private async getOrCreateDiskReceiveAssembly(
+    attachment: Attachment,
+    assemblyKey: string,
+    total: number
+  ): Promise<DiskReceiveAssembly | null> {
+    const existing = this.diskReceiveAssemblies.get(assemblyKey);
+
+    if (existing) {
+      return existing;
+    }
+
+    const storageContainer = await this.persistence.resolveStorageContainerName(attachment);
+    const path = await this.attachmentStorage.createWritableFile(attachment, storageContainer);
+
+    if (!path) {
+      return null;
+    }
+
+    const assembly: DiskReceiveAssembly = {
+      path,
+      receivedCount: 0,
+      receivedIndexes: new Set<number>(),
+      total
+    };
+
+    this.diskReceiveAssemblies.set(assemblyKey, assembly);
+
+    return assembly;
+  }
+
+  private async handleDiskReceiveFailure(
+    attachment: Attachment,
+    assemblyKey: string,
+    error: unknown
+  ): Promise<void> {
+    await this.deleteDiskReceiveAssembly(assemblyKey);
+
+    attachment.available = false;
+    attachment.objectUrl = undefined;
+    attachment.receivedBytes = 0;
+    attachment.speedBps = 0;
+    attachment.startedAtMs = undefined;
+    attachment.lastUpdateMs = undefined;
+    attachment.requestError = error instanceof Error && error.message
+      ? error.message
+      : 'Media download failed. Retry the download.';
+
+    this.runtimeStore.touch();
+  }
+
+  private async deleteDiskReceiveAssembly(assemblyKey: string): Promise<void> {
+    const assembly = this.diskReceiveAssemblies.get(assemblyKey);
+
+    this.diskReceiveAssemblies.delete(assemblyKey);
+
+    if (assembly?.path) {
+      await this.attachmentStorage.deleteFile(assembly.path);
+    }
+  }
 }

toju-app/src/app/domains/attachment/domain/constants/attachment.constants.ts

@@ -1,2 +1,5 @@
 /** Maximum file size (bytes) that is automatically saved or pushed for inline previews. */
 export const MAX_AUTO_SAVE_SIZE_BYTES = 10 * 1024 * 1024; // 10 MB
+
+/** Maximum browser-only audio/video size that renders with an inline media player. */
+export const MAX_BROWSER_INLINE_MEDIA_SIZE_BYTES = 50 * 1024 * 1024; // 50 MB

toju-app/src/app/domains/attachment/infrastructure/services/attachment-storage.service.ts

@@ -7,10 +7,24 @@ import {
   sanitizeAttachmentRoomName
 } from '../util/attachment-storage.util';
 
+const DIRECT_MESSAGE_STORAGE_PREFIX = 'direct-message:';
+
 @Injectable({ providedIn: 'root' })
 export class AttachmentStorageService {
   private readonly electronBridge = inject(ElectronBridgeService);
 
+  canWriteFiles(): boolean {
+    const electronApi = this.electronBridge.getApi();
+
+    return !!electronApi?.appendFile && !!electronApi.writeFile && !!electronApi.getAppDataPath;
+  }
+
+  canReadFileChunks(): boolean {
+    const electronApi = this.electronBridge.getApi();
+
+    return !!electronApi?.readFileChunk && !!electronApi.getFileSize;
+  }
+
   async resolveExistingPath(
     attachment: Pick<Attachment, 'filePath' | 'savedPath'>
   ): Promise<string | null> {
@@ -41,10 +55,73 @@ export class AttachmentStorageService {
     }
   }
 
+  async getFileSize(filePath: string): Promise<number | null> {
+    const electronApi = this.electronBridge.getApi();
+
+    if (!electronApi?.getFileSize || !filePath) {
+      return null;
+    }
+
+    try {
+      return await electronApi.getFileSize(filePath);
+    } catch {
+      return null;
+    }
+  }
+
+  async readFileChunk(filePath: string, start: number, end: number): Promise<string | null> {
+    const electronApi = this.electronBridge.getApi();
+
+    if (!electronApi?.readFileChunk || !filePath) {
+      return null;
+    }
+
+    try {
+      return await electronApi.readFileChunk(filePath, start, end);
+    } catch {
+      return null;
+    }
+  }
+
+  async getFileUrl(filePath: string): Promise<string | null> {
+    const electronApi = this.electronBridge.getApi();
+
+    if (!electronApi?.getFileUrl || !filePath) {
+      return null;
+    }
+
+    try {
+      return await electronApi.getFileUrl(filePath);
+    } catch {
+      return null;
+    }
+  }
+
   async saveBlob(
     attachment: Pick<Attachment, 'id' | 'filename' | 'mime'>,
     blob: Blob,
     roomName: string
+  ): Promise<string | null> {
+    const diskPath = await this.createWritableFile(attachment, roomName);
+
+    if (!diskPath) {
+      return null;
+    }
+
+    try {
+      const arrayBuffer = await blob.arrayBuffer();
+
+      await this.writeBase64(diskPath, this.arrayBufferToBase64(arrayBuffer));
+
+      return diskPath;
+    } catch {
+      return null;
+    }
+  }
+
+  async createWritableFile(
+    attachment: Pick<Attachment, 'id' | 'filename' | 'mime'>,
+    roomName: string
   ): Promise<string | null> {
     const electronApi = this.electronBridge.getApi();
     const appDataPath = await this.resolveAppDataPath();
@@ -54,14 +131,12 @@ export class AttachmentStorageService {
     }
 
     try {
-      const directoryPath = `${appDataPath}/server/${sanitizeAttachmentRoomName(roomName)}/${resolveAttachmentStorageBucket(attachment.mime)}`;
+      const directoryPath = this.resolveStorageDirectoryPath(appDataPath, roomName, attachment.mime);
 
       await electronApi.ensureDir(directoryPath);
-
-      const arrayBuffer = await blob.arrayBuffer();
       const diskPath = `${directoryPath}/${resolveAttachmentStoredFilename(attachment.id, attachment.filename)}`;
 
-      await electronApi.writeFile(diskPath, this.arrayBufferToBase64(arrayBuffer));
+      await this.writeBase64(diskPath, '');
 
       return diskPath;
     } catch {
@@ -69,6 +144,20 @@ export class AttachmentStorageService {
     }
   }
 
+  async appendBase64(filePath: string, base64Data: string): Promise<boolean> {
+    const electronApi = this.electronBridge.getApi();
+
+    if (!electronApi?.appendFile || !filePath) {
+      return false;
+    }
+
+    try {
+      return await electronApi.appendFile(filePath, base64Data);
+    } catch {
+      return false;
+    }
+  }
+
   async deleteFile(filePath: string): Promise<void> {
     const electronApi = this.electronBridge.getApi();
 
@@ -95,6 +184,18 @@ export class AttachmentStorageService {
     }
   }
 
+  private resolveStorageDirectoryPath(appDataPath: string, containerName: string, mime: string): string {
+    const bucket = resolveAttachmentStorageBucket(mime);
+
+    if (containerName.startsWith(DIRECT_MESSAGE_STORAGE_PREFIX)) {
+      const conversationId = containerName.slice(DIRECT_MESSAGE_STORAGE_PREFIX.length);
+
+      return `${appDataPath}/direct-messages/${sanitizeAttachmentRoomName(conversationId)}/${bucket}`;
+    }
+
+    return `${appDataPath}/server/${sanitizeAttachmentRoomName(containerName)}/${bucket}`;
+  }
+
   private async findExistingPath(candidates: (string | null | undefined)[]): Promise<string | null> {
     const electronApi = this.electronBridge.getApi();
 
@@ -117,6 +218,16 @@ export class AttachmentStorageService {
     return null;
   }
 
+  private async writeBase64(filePath: string, base64Data: string): Promise<boolean> {
+    const electronApi = this.electronBridge.getApi();
+
+    if (!electronApi || !filePath) {
+      return false;
+    }
+
+    return await electronApi.writeFile(filePath, base64Data);
+  }
+
   private arrayBufferToBase64(buffer: ArrayBuffer): string {
     let binary = '';
 

toju-app/src/app/domains/chat/README.md

@@ -70,7 +70,7 @@ graph TD
 
 ## Message lifecycle
 
-Messages are created in the composer, broadcast to peers over the data channel, and rendered in the list. Editing and deletion are sender-only operations.
+Messages are created in the composer, broadcast to peers over the data channel, and rendered in the list. Live room chat also emits a narrow `chat_message` signaling fallback so peers can receive text while the data channel is unavailable. Editing and deletion are sender-only operations.
 
 ```mermaid
 sequenceDiagram

toju-app/src/app/domains/chat/domain/rules/message-sync.rules.ts

@@ -1,5 +1,11 @@
-/** Maximum number of recent messages to include in sync inventories. */
-export const INVENTORY_LIMIT = 1000;
+/** Maximum number of messages to include in sync inventories.
+ *
+ * The inventory protocol now ships every message in the room (id, ts, rc, ac)
+ * chunked at `CHUNK_SIZE`, so peers converge on the full history regardless
+ * of how lopsided their message counts are. The constant remains as a safety
+ * ceiling for pathological rooms.
+ */
+export const INVENTORY_LIMIT = 1_000_000;
 
 /** Number of messages per chunk for inventory / batch transfers. */
 export const CHUNK_SIZE = 200;
@@ -14,7 +20,7 @@ export const SYNC_POLL_SLOW_MS = 900_000;
 export const SYNC_TIMEOUT_MS = 5_000;
 
 /** Large limit used for legacy full-sync operations. */
-export const FULL_SYNC_LIMIT = 10_000;
+export const FULL_SYNC_LIMIT = 1_000_000;
 
 /** Inventory item representing a message's sync state. */
 export interface InventoryItem {

toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.html

@@ -11,6 +11,8 @@
     [isAdmin]="isAdmin()"
     [bottomPadding]="composerBottomPadding()"
     [conversationKey]="conversationKey()"
+    [loadingOlder]="loadingOlder()"
+    [conversationExhausted]="conversationExhausted()"
     (replyRequested)="setReplyTo($event)"
     (deleteRequested)="handleDeleteRequested($event)"
     (editSaved)="handleEditSaved($event)"
@@ -20,6 +22,7 @@
     (imageOpened)="openLightbox($event)"
     (imageContextMenuRequested)="openImageContextMenu($event)"
     (embedRemoved)="handleEmbedRemoved($event)"
+    (loadOlderRequested)="handleLoadOlderRequested($event)"
   />
 
   <div
@@ -40,31 +43,43 @@
   </div>
 
   @if (showKlipyGifPicker()) {
-    <div
-      class="fixed inset-0 z-[89]"
-      (click)="closeKlipyGifPicker()"
-      (keydown.enter)="closeKlipyGifPicker()"
-      (keydown.space)="closeKlipyGifPicker()"
-      tabindex="0"
-      role="button"
-      aria-label="Close GIF picker"
-      style="-webkit-app-region: no-drag"
-    ></div>
-
-    <div class="pointer-events-none fixed inset-0 z-[90]">
+    @if (isMobile()) {
+      <app-bottom-sheet (dismissed)="closeKlipyGifPicker()">
+        <div appThemeNode="chatGifPickerSurface">
+          <app-klipy-gif-picker
+            [signalSource]="currentRoom()"
+            (gifSelected)="handleKlipyGifSelected($event)"
+            (closed)="closeKlipyGifPicker()"
+          />
+        </div>
+      </app-bottom-sheet>
+    } @else {
       <div
-        appThemeNode="chatGifPickerSurface"
-        class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
-        [style.bottom.px]="composerBottomPadding() + 8"
-        [style.right.px]="klipyGifPickerAnchorRight()"
-      >
-        <app-klipy-gif-picker
-          [signalSource]="currentRoom()"
-          (gifSelected)="handleKlipyGifSelected($event)"
-          (closed)="closeKlipyGifPicker()"
-        />
+        class="fixed inset-0 z-[89]"
+        (click)="closeKlipyGifPicker()"
+        (keydown.enter)="closeKlipyGifPicker()"
+        (keydown.space)="closeKlipyGifPicker()"
+        tabindex="0"
+        role="button"
+        aria-label="Close GIF picker"
+        style="-webkit-app-region: no-drag"
+      ></div>
+
+      <div class="pointer-events-none fixed inset-0 z-[90]">
+        <div
+          appThemeNode="chatGifPickerSurface"
+          class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
+          [style.bottom.px]="composerBottomPadding() + 8"
+          [style.right.px]="klipyGifPickerAnchorRight()"
+        >
+          <app-klipy-gif-picker
+            [signalSource]="currentRoom()"
+            (gifSelected)="handleKlipyGifSelected($event)"
+            (closed)="closeKlipyGifPicker()"
+          />
+        </div>
       </div>
-    </div>
+    }
   }
 
   <app-chat-message-overlays

toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.ts

@@ -8,15 +8,21 @@ import {
   inject,
   signal
 } from '@angular/core';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { switchMap } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { ElectronBridgeService } from '../../../../core/platform/electron/electron-bridge.service';
+import { ViewportService } from '../../../../core/platform';
+import { BottomSheetComponent } from '../../../../shared';
 import { RealtimeSessionFacade } from '../../../../core/realtime';
 import { Attachment, AttachmentFacade } from '../../../attachment';
 import { KlipyGif, KlipyService } from '../../application/services/klipy.service';
 import { MessagesActions } from '../../../../store/messages/messages.actions';
 import {
   selectAllMessages,
+  selectConversationExhausted,
   selectMessagesLoading,
+  selectMessagesLoadingOlder,
   selectMessagesSyncing
 } from '../../../../store/messages/messages.selectors';
 import { selectCurrentUser, selectIsCurrentUserAdmin } from '../../../../store/users/users.selectors';
@@ -45,6 +51,7 @@ import {
     KlipyGifPickerComponent,
     ChatMessageListComponent,
     ChatMessageOverlaysComponent,
+    BottomSheetComponent,
     ThemeNodeDirective
   ],
   templateUrl: './chat-messages.component.html',
@@ -52,12 +59,16 @@ import {
 })
 export class ChatMessagesComponent {
   @ViewChild(ChatMessageComposerComponent) composer?: ChatMessageComposerComponent;
+  @ViewChild(ChatMessageListComponent) messageList?: ChatMessageListComponent;
 
   private readonly electronBridge = inject(ElectronBridgeService);
   private readonly store = inject(Store);
   private readonly webrtc = inject(RealtimeSessionFacade);
   private readonly attachmentsSvc = inject(AttachmentFacade);
   private readonly klipy = inject(KlipyService);
+  private readonly viewport = inject(ViewportService);
+
+  readonly isMobile = this.viewport.isMobile;
 
   readonly allMessages = this.store.selectSignal(selectAllMessages);
   private readonly activeChannelId = this.store.selectSignal(selectActiveChannelId);
@@ -65,6 +76,7 @@ export class ChatMessagesComponent {
 
   readonly loading = this.store.selectSignal(selectMessagesLoading);
   readonly syncing = this.store.selectSignal(selectMessagesSyncing);
+  readonly loadingOlder = this.store.selectSignal(selectMessagesLoadingOlder);
   readonly currentUser = this.store.selectSignal(selectCurrentUser);
   readonly isAdmin = this.store.selectSignal(selectIsCurrentUserAdmin);
 
@@ -76,6 +88,12 @@ export class ChatMessagesComponent {
   });
 
   readonly conversationKey = computed(() => `${this.currentRoom()?.id ?? 'no-room'}:${this.activeChannelId() ?? 'general'}`);
+  readonly conversationExhausted = toSignal(
+    toObservable(this.conversationKey).pipe(
+      switchMap((key) => this.store.select(selectConversationExhausted(key)))
+    ),
+    { initialValue: false }
+  );
   readonly klipyEnabled = computed(() => this.klipy.isEnabled(this.currentRoom()));
   readonly composerBottomPadding = signal(140);
   readonly klipyGifPickerAnchorRight = signal(16);
@@ -98,6 +116,8 @@ export class ChatMessagesComponent {
   }
 
   handleMessageSubmitted(event: ChatMessageComposerSubmitEvent): void {
+    this.messageList?.scrollToBottomAfterLocalSend();
+
     this.store.dispatch(
       MessagesActions.sendMessage({
         content: event.content,
@@ -204,6 +224,22 @@ export class ChatMessagesComponent {
     );
   }
 
+  handleLoadOlderRequested(event: { beforeTimestamp: number; limit: number }): void {
+    const roomId = this.currentRoom()?.id;
+
+    if (!roomId)
+      return;
+
+    this.store.dispatch(
+      MessagesActions.loadOlderMessages({
+        roomId,
+        channelId: this.activeChannelId() ?? 'general',
+        beforeTimestamp: event.beforeTimestamp,
+        limit: event.limit
+      })
+    );
+  }
+
   toggleKlipyGifPicker(): void {
     const nextState = !this.showKlipyGifPicker();
 
@@ -278,6 +314,19 @@ export class ChatMessagesComponent {
     const electronApi = this.electronBridge.getApi();
 
     if (electronApi) {
+      const diskPath = this.getAttachmentDiskPath(attachment);
+
+      if (diskPath && electronApi.saveExistingFileAs) {
+        try {
+          const result = await electronApi.saveExistingFileAs(diskPath, attachment.filename);
+
+          if (result.saved || result.cancelled)
+            return;
+        } catch {
+          /* fall back to blob/browser download */
+        }
+      }
+
       const blob = await this.getAttachmentBlob(attachment);
 
       if (blob) {
@@ -326,6 +375,9 @@ export class ChatMessagesComponent {
     if (!attachment.objectUrl)
       return null;
 
+    if (attachment.objectUrl.startsWith('file:'))
+      return null;
+
     try {
       const response = await fetch(attachment.objectUrl);
 
@@ -335,6 +387,10 @@ export class ChatMessagesComponent {
     }
   }
 
+  private getAttachmentDiskPath(attachment: Attachment): string | null {
+    return attachment.savedPath || attachment.filePath || null;
+  }
+
   private blobToBase64(blob: Blob): Promise<string> {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.html

@@ -6,6 +6,10 @@
   [attr.data-message-id]="msg.id"
   class="group relative flex gap-3 rounded-lg p-2 transition-colors hover:bg-secondary/30"
   [class.opacity-50]="msg.isDeleted"
+  (touchstart)="onMessageTouchStart($event)"
+  (touchend)="onMessageTouchEnd()"
+  (touchmove)="onMessageTouchEnd()"
+  (touchcancel)="onMessageTouchEnd()"
 >
   <div
     appThemeNode="chatMessageAvatar"
@@ -112,7 +116,8 @@
               type="button"
               class="font-semibold text-primary underline-offset-4 hover:underline"
               (click)="openMissingPluginStore(missingEmbed)"
-              >store</button
+            >
+              store</button
             >.
           </article>
         }
@@ -359,6 +364,30 @@
                             </button>
                           }
                         } @else {
+                          @if (att.canOpenExternally) {
+                            <button
+                              class="inline-flex items-center gap-1.5 rounded bg-secondary px-2 py-1 text-xs text-foreground transition-colors hover:bg-secondary/80"
+                              (click)="openAttachmentExternally(att)"
+                            >
+                              <ng-icon
+                                name="lucideExternalLink"
+                                class="h-3.5 w-3.5"
+                              />
+                              Open
+                            </button>
+                          }
+                          @if (att.canUseExperimentalPlayer) {
+                            <button
+                              class="inline-flex items-center gap-1.5 rounded bg-secondary px-2 py-1 text-xs text-foreground transition-colors hover:bg-secondary/80"
+                              (click)="openExperimentalPlayer(att)"
+                            >
+                              <ng-icon
+                                name="lucidePlay"
+                                class="h-3.5 w-3.5"
+                              />
+                              Play
+                            </button>
+                          }
                           <button
                             class="rounded bg-primary px-2 py-1 text-xs text-primary-foreground"
                             (click)="downloadAttachment(att)"
@@ -368,6 +397,30 @@
                         }
                       } @else {
                         <div class="text-xs text-muted-foreground">Shared from your device</div>
+                        @if (att.canOpenExternally) {
+                          <button
+                            class="inline-flex items-center gap-1.5 rounded bg-secondary px-2 py-1 text-xs text-foreground transition-colors hover:bg-secondary/80"
+                            (click)="openAttachmentExternally(att)"
+                          >
+                            <ng-icon
+                              name="lucideExternalLink"
+                              class="h-3.5 w-3.5"
+                            />
+                            Open
+                          </button>
+                        }
+                        @if (att.canUseExperimentalPlayer) {
+                          <button
+                            class="inline-flex items-center gap-1.5 rounded bg-secondary px-2 py-1 text-xs text-foreground transition-colors hover:bg-secondary/80"
+                            (click)="openExperimentalPlayer(att)"
+                          >
+                            <ng-icon
+                              name="lucidePlay"
+                              class="h-3.5 w-3.5"
+                            />
+                            Play
+                          </button>
+                        }
                       }
                     </div>
                   </div>
@@ -379,6 +432,22 @@
                     </div>
                   }
                 </div>
+                @if (att.experimentalPlayerActive && att.objectUrl) {
+                  @defer {
+                    <app-experimental-vlc-player
+                      [src]="att.objectUrl"
+                      [filename]="att.filename"
+                      [mime]="att.mime"
+                      [sizeLabel]="formatBytes(att.size)"
+                      (closed)="closeExperimentalPlayer()"
+                      (downloadRequested)="downloadAttachment(att)"
+                    />
+                  } @loading {
+                    <div class="mt-2 max-w-xl rounded-md border border-border bg-secondary/20 p-3 text-xs text-muted-foreground">
+                      Loading experimental player...
+                    </div>
+                  }
+                }
               }
             }
           </div>
@@ -404,7 +473,7 @@
     }
   </div>
 
-  @if (!msg.isDeleted) {
+  @if (!msg.isDeleted && !isMobile()) {
     <div
       appThemeNode="chatMessageActions"
       class="absolute right-2 top-2 flex items-center gap-1 rounded-lg border border-border bg-card shadow-lg opacity-0 transition-opacity group-hover:opacity-100"
@@ -469,4 +538,83 @@
       }
     </div>
   }
+
+  <ng-template #mobileSheetTpl>
+    <app-bottom-sheet
+      title="Message"
+      ariaLabel="Message actions"
+      (dismissed)="closeMobileActions()"
+    >
+      <div class="flex flex-col py-1">
+        <div class="px-3 pb-2 pt-1">
+          <p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">React</p>
+          <div class="mt-2 grid grid-cols-8 gap-1">
+            @for (emoji of commonEmojis; track emoji) {
+              <button
+                type="button"
+                class="rounded p-1 text-xl transition-colors hover:bg-secondary"
+                (click)="onMobileReact(emoji)"
+              >
+                {{ emoji }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <div class="my-1 h-px bg-border"></div>
+
+        <button
+          type="button"
+          class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-foreground transition-colors hover:bg-secondary"
+          (click)="onMobileReply()"
+        >
+          <ng-icon
+            name="lucideReply"
+            class="h-5 w-5 text-muted-foreground"
+          />
+          <span>Reply</span>
+        </button>
+
+        <button
+          type="button"
+          class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-foreground transition-colors hover:bg-secondary"
+          (click)="onMobileCopy()"
+        >
+          <ng-icon
+            name="lucideCopy"
+            class="h-5 w-5 text-muted-foreground"
+          />
+          <span>Copy message content</span>
+        </button>
+
+        @if (isOwnMessage()) {
+          <button
+            type="button"
+            class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-foreground transition-colors hover:bg-secondary"
+            (click)="onMobileEdit()"
+          >
+            <ng-icon
+              name="lucideEdit"
+              class="h-5 w-5 text-muted-foreground"
+            />
+            <span>Edit</span>
+          </button>
+        }
+
+        @if (isOwnMessage() || isAdmin()) {
+          <button
+            type="button"
+            class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-destructive transition-colors hover:bg-destructive/10"
+            (click)="onMobileDelete()"
+          >
+            <ng-icon
+              name="lucideTrash2"
+              class="h-5 w-5"
+            />
+            <span>Delete</span>
+          </button>
+        }
+      </div>
+    </app-bottom-sheet>
+  </ng-template>
 </div>

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.ts

@@ -2,25 +2,34 @@
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
+  ChangeDetectionStrategy,
   Component,
   computed,
   ElementRef,
   effect,
   inject,
   input,
+  OnDestroy,
   output,
   signal,
-  ViewChild
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef
 } from '@angular/core';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
 import { Router } from '@angular/router';
 
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
   lucideCheck,
+  lucideCopy,
   lucideDownload,
   lucideEdit,
   lucideExpand,
+  lucideExternalLink,
   lucideImage,
+  lucidePlay,
   lucideReply,
   lucideSmile,
   lucideTrash2,
@@ -29,8 +38,15 @@ import {
 import {
   Attachment,
   AttachmentFacade,
+  MAX_BROWSER_INLINE_MEDIA_SIZE_BYTES,
   MAX_AUTO_SAVE_SIZE_BYTES
 } from '../../../../../attachment';
+import { PlatformService, ViewportService } from '../../../../../../core/platform';
+import { ElectronBridgeService } from '../../../../../../core/platform/electron/electron-bridge.service';
+import {
+  ExperimentalMediaSettingsService
+} from '../../../../../experimental-media';
+import { ExperimentalVlcPlayerComponent } from '../../../../../experimental-media/feature/experimental-vlc-player/experimental-vlc-player.component';
 import { KlipyService } from '../../../../application/services/klipy.service';
 import { hasDedicatedChatEmbed } from '../../../../domain/rules/link-embed.rules';
 import {
@@ -43,6 +59,7 @@ import { PluginRenderHostComponent } from '../../../../../plugins/feature/plugin
 import { PluginRequirementStateService, PluginUiRegistryService } from '../../../../../plugins';
 
 import {
+  BottomSheetComponent,
   ChatAudioPlayerComponent,
   ChatVideoPlayerComponent,
   ProfileCardService,
@@ -81,6 +98,9 @@ const RICH_MARKDOWN_PATTERNS = [
 ];
 
 interface ChatMessageAttachmentViewModel extends Attachment {
+  canOpenExternally: boolean;
+  canUseExperimentalPlayer: boolean;
+  experimentalPlayerActive: boolean;
   isAudio: boolean;
   isUploader: boolean;
   isVideo: boolean;
@@ -112,15 +132,20 @@ interface MissingPluginEmbedFallback {
     ChatLinkEmbedComponent,
     UserAvatarComponent,
     PluginRenderHostComponent,
-    ThemeNodeDirective
+    ExperimentalVlcPlayerComponent,
+    ThemeNodeDirective,
+    BottomSheetComponent
   ],
   viewProviders: [
     provideIcons({
       lucideCheck,
+      lucideCopy,
       lucideDownload,
       lucideEdit,
       lucideExpand,
+      lucideExternalLink,
       lucideImage,
+      lucidePlay,
       lucideReply,
       lucideSmile,
       lucideTrash2,
@@ -129,20 +154,34 @@ interface MissingPluginEmbedFallback {
   ],
   templateUrl: './chat-message-item.component.html',
   styleUrl: './chat-message-item.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     style: 'display: contents;'
   }
 })
-export class ChatMessageItemComponent {
+export class ChatMessageItemComponent implements OnDestroy {
   @ViewChild('editTextareaRef') editTextareaRef?: ElementRef<HTMLTextAreaElement>;
+  @ViewChild('mobileSheetTpl') mobileSheetTpl?: TemplateRef<unknown>;
 
   private readonly attachmentsSvc = inject(AttachmentFacade);
   private readonly klipy = inject(KlipyService);
   private readonly pluginRequirements = inject(PluginRequirementStateService);
   private readonly pluginUi = inject(PluginUiRegistryService);
+  private readonly electronBridge = inject(ElectronBridgeService);
+  private readonly platform = inject(PlatformService);
+  private readonly experimentalMedia = inject(ExperimentalMediaSettingsService);
   private readonly profileCard = inject(ProfileCardService);
   private readonly router = inject(Router);
+  private readonly viewport = inject(ViewportService);
+  private readonly overlay = inject(Overlay);
+  private readonly viewContainerRef = inject(ViewContainerRef);
+  private mobileSheetOverlayRef: OverlayRef | null = null;
+  private longPressTimer: number | null = null;
+  readonly isMobile = this.viewport.isMobile;
+  readonly mobileSheetOpen = signal(false);
   private readonly attachmentVersion = signal(this.attachmentsSvc.updated());
+  private readonly experimentalPlayerAttachmentId = signal<string | null>(null);
+  private readonly mediaSupportCache = new Map<string, boolean>();
 
   readonly message = input.required<Message>();
   readonly repliedMessage = input<Message | undefined>();
@@ -340,6 +379,116 @@ export class ChatMessageItemComponent {
     this.deleteRequested.emit(this.message());
   }
 
+  onMessageTouchStart(event: TouchEvent): void {
+    if (!this.isMobile() || this.message().isDeleted) {
+      return;
+    }
+
+    if (event.touches.length !== 1) {
+      this.clearLongPressTimer();
+      return;
+    }
+
+    if (this.isEditableTarget(event.target)) {
+      this.clearLongPressTimer();
+      return;
+    }
+
+    this.clearLongPressTimer();
+    this.longPressTimer = window.setTimeout(() => {
+      this.longPressTimer = null;
+      this.openMobileSheet();
+    }, 500);
+  }
+
+  onMessageTouchEnd(): void {
+    this.clearLongPressTimer();
+  }
+
+  private clearLongPressTimer(): void {
+    if (this.longPressTimer !== null) {
+      window.clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+  }
+
+  private isEditableTarget(target: EventTarget | null): boolean {
+    if (!(target instanceof Element)) {
+      return false;
+    }
+
+    return target.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]') !== null;
+  }
+
+  closeMobileActions(): void {
+    this.detachMobileSheet();
+  }
+
+  private openMobileSheet(): void {
+    if (this.mobileSheetOverlayRef || !this.mobileSheetTpl) {
+      this.mobileSheetOpen.set(true);
+      return;
+    }
+
+    const overlayRef = this.overlay.create({
+      positionStrategy: this.overlay.position().global(),
+      scrollStrategy: this.overlay.scrollStrategies.block(),
+      hasBackdrop: false,
+      panelClass: 'metoyou-chat-actions-sheet-pane'
+    });
+    const portal = new TemplatePortal(this.mobileSheetTpl, this.viewContainerRef);
+
+    overlayRef.attach(portal);
+    this.mobileSheetOverlayRef = overlayRef;
+    this.mobileSheetOpen.set(true);
+  }
+
+  private detachMobileSheet(): void {
+    this.mobileSheetOpen.set(false);
+
+    if (this.mobileSheetOverlayRef) {
+      this.mobileSheetOverlayRef.dispose();
+      this.mobileSheetOverlayRef = null;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.clearLongPressTimer();
+    this.detachMobileSheet();
+  }
+
+  onMobileReact(emoji: string): void {
+    this.addReaction(emoji);
+    this.closeMobileActions();
+  }
+
+  onMobileReply(): void {
+    this.requestReply();
+    this.closeMobileActions();
+  }
+
+  onMobileEdit(): void {
+    this.startEdit();
+    this.closeMobileActions();
+  }
+
+  onMobileDelete(): void {
+    this.requestDelete();
+    this.closeMobileActions();
+  }
+
+  async onMobileCopy(): Promise<void> {
+    const text = this.message().content;
+
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      // Clipboard API unavailable; silently ignore.
+    }
+
+    this.closeMobileActions();
+  }
+
   removeEmbed(url: string): void {
     this.embedRemoved.emit({
       messageId: this.message().id,
@@ -539,13 +688,51 @@ export class ChatMessageItemComponent {
     this.downloadRequested.emit(attachment);
   }
 
+  openExperimentalPlayer(attachment: Attachment): void {
+    if (!attachment.available || !attachment.objectUrl) {
+      return;
+    }
+
+    this.experimentalPlayerAttachmentId.set(attachment.id);
+  }
+
+  async openAttachmentExternally(attachment: Attachment): Promise<void> {
+    const diskPath = this.getAttachmentDiskPath(attachment);
+    const electronApi = this.electronBridge.getApi();
+
+    if (!diskPath || !electronApi?.openFilePath) {
+      return;
+    }
+
+    await electronApi.openFilePath(diskPath);
+  }
+
+  closeExperimentalPlayer(): void {
+    this.experimentalPlayerAttachmentId.set(null);
+  }
+
   private buildAttachmentViewModel(attachment: Attachment): ChatMessageAttachmentViewModel {
-    const isVideo = this.isVideoAttachment(attachment);
-    const isAudio = this.isAudioAttachment(attachment);
+    const isRawVideo = this.isVideoAttachment(attachment);
+    const isRawAudio = this.isAudioAttachment(attachment);
+    const isRawPlayableMedia = isRawVideo || isRawAudio;
+    const isNativePlayableMedia = this.canPlayMediaType(attachment.mime);
+    const shouldUseDefaultFileInterface = isRawPlayableMedia &&
+      (!isNativePlayableMedia ||
+        (this.platform.isBrowser && attachment.size > MAX_BROWSER_INLINE_MEDIA_SIZE_BYTES));
+    const isVideo = isRawVideo && !shouldUseDefaultFileInterface;
+    const isAudio = isRawAudio && !shouldUseDefaultFileInterface;
     const requiresMediaDownloadAcceptance = (isVideo || isAudio) && attachment.size > MAX_AUTO_SAVE_SIZE_BYTES;
+    const canUseExperimentalPlayer = this.experimentalMedia.vlcJsPlaybackEnabled() &&
+      shouldUseDefaultFileInterface &&
+      isRawPlayableMedia &&
+      attachment.available &&
+      !!attachment.objectUrl;
 
     return {
       ...attachment,
+      canOpenExternally: this.platform.isElectron && attachment.available && !!this.getAttachmentDiskPath(attachment),
+      canUseExperimentalPlayer,
+      experimentalPlayerActive: canUseExperimentalPlayer && this.experimentalPlayerAttachmentId() === attachment.id,
       isAudio,
       isUploader: this.isUploader(attachment),
       isVideo,
@@ -572,6 +759,30 @@ export class ChatMessageItemComponent {
   private getLiveAttachment(attachmentId: string): Attachment | undefined {
     return this.attachmentsSvc.getForMessage(this.message().id).find((attachment) => attachment.id === attachmentId);
   }
+
+  private getAttachmentDiskPath(attachment: Attachment): string | null {
+    return attachment.savedPath || attachment.filePath || null;
+  }
+
+  private canPlayMediaType(mime: string): boolean {
+    if (!mime.startsWith('video/') && !mime.startsWith('audio/')) {
+      return false;
+    }
+
+    const cached = this.mediaSupportCache.get(mime);
+
+    if (cached !== undefined) {
+      return cached;
+    }
+
+    const element = document.createElement(mime.startsWith('video/') ? 'video' : 'audio');
+
+    const canPlay = element.canPlayType(mime) !== '';
+
+    this.mediaSupportCache.set(mime, canPlay);
+
+    return canPlay;
+  }
 }
 
 function parsePluginEmbedToken(content: string): PluginEmbedToken | null {

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-youtube-embed/chat-youtube-embed.component.ts

@@ -5,9 +5,10 @@ import {
   input
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { environment } from '../../../../../../../../environments/environment';
 import { extractYoutubeVideoId } from '../../../../../domain/rules/link-embed.rules';
 
-const YOUTUBE_EMBED_FALLBACK_ORIGIN = 'https://toju.app';
+const YOUTUBE_EMBED_FALLBACK_ORIGIN = environment.publicOrigin;
 
 function resolveYoutubeClientOrigin(): string {
   if (typeof window === 'undefined') {

toju-app/src/app/domains/chat/feature/chat-messages/components/message-list/chat-message-list.component.ts

@@ -2,6 +2,7 @@
 import { CommonModule } from '@angular/common';
 import {
   AfterViewChecked,
+  ChangeDetectionStrategy,
   Component,
   ElementRef,
   OnDestroy,
@@ -48,6 +49,7 @@ declare global {
     ThemeNodeDirective
   ],
   templateUrl: './chat-message-list.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     style: 'display: contents;'
   }
@@ -82,6 +84,16 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
   readonly imageOpened = output<Attachment>();
   readonly imageContextMenuRequested = output<ChatMessageImageContextMenuEvent>();
   readonly embedRemoved = output<ChatMessageEmbedRemoveEvent>();
+  /**
+   * Emitted when the user scrolls up past the in-store window and the
+   * component needs the parent to fetch an older page from the DB.
+   */
+  readonly loadOlderRequested = output<{ beforeTimestamp: number; limit: number }>();
+
+  /** True while a DB-backed older-page fetch dispatched by the parent is in flight. */
+  readonly loadingOlder = input(false);
+  /** True once the parent has paginated all the way back to the start of DB history. */
+  readonly conversationExhausted = input(false);
 
   private readonly PAGE_SIZE = 50;
 
@@ -141,19 +153,65 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
     return lookup;
   });
 
-  private initialScrollObserver: MutationObserver | null = null;
-  private initialScrollTimer: ReturnType<typeof setTimeout> | null = null;
+  /**
+   * O(1) index of messages by id, built once per `allMessages()` change.
+   * Used by `findRepliedMessage` so each rendered row doing a reply lookup
+   * costs a Map.get instead of an Array.find over the full message list.
+   */
+  private readonly messagesById = computed<ReadonlyMap<string, Message>>(() => {
+    const index = new Map<string, Message>();
+
+    for (const message of this.allMessages()) {
+      index.set(message.id, message);
+    }
+
+    return index;
+  });
+
+  private bottomScrollObserver: MutationObserver | null = null;
+  private bottomScrollTimer: ReturnType<typeof setTimeout> | null = null;
   private boundOnImageLoad: (() => void) | null = null;
+  private localSendScrollPending = false;
+  private localSendScrollTimer: ReturnType<typeof setTimeout> | null = null;
   private isAutoScrolling = false;
   private lastMessageCount = 0;
   private initialScrollPending = true;
   private prismHighlightScheduled = false;
+  /**
+   * Set when an older-page DB fetch is in flight. While true, the
+   * `onMessagesChanged` effect treats incoming message-count growth as a
+   * prepend (older history arriving) and preserves the user's scroll
+   * position instead of running sticky-bottom / new-messages-indicator
+   * logic.
+   */
+  private pendingOlderFetchScrollHeight: number | null = null;
 
   private readonly onConversationChanged = effect(() => {
     void this.conversationKey();
     this.resetScrollingState();
   });
 
+  /**
+   * Clears the in-flight older-fetch flag when the parent reports the
+   * load has finished (regardless of how many rows were returned, even
+   * zero). Without this, `loadingMore` would stick on if the DB had no
+   * rows older than the cursor.
+   */
+  private readonly onLoadingOlderChanged = effect(() => {
+    const inFlight = this.loadingOlder();
+
+    if (!inFlight && this.pendingOlderFetchScrollHeight !== null) {
+      // If onMessagesChanged already consumed the pending state because
+      // rows arrived, this is a no-op; otherwise we clear it now.
+      queueMicrotask(() => {
+        if (this.pendingOlderFetchScrollHeight !== null) {
+          this.pendingOlderFetchScrollHeight = null;
+          this.loadingMore.set(false);
+        }
+      });
+    }
+  });
+
   private readonly onMessagesChanged = effect(() => {
     const currentCount = this.channelMessages().length;
     const element = this.messagesContainer?.nativeElement;
@@ -168,12 +226,49 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
       return;
     }
 
+    // Handle older-history backfill: messages were prepended, not appended.
+    // Reveal the new rows by widening the display window, and preserve the
+    // user's visual scroll position across the height change. We skip the
+    // sticky-bottom / new-messages-indicator logic entirely for this path.
+    if (this.pendingOlderFetchScrollHeight !== null && currentCount > this.lastMessageCount) {
+      const previousScrollHeight = this.pendingOlderFetchScrollHeight;
+      const previousScrollTop = element.scrollTop;
+      const newlyLoaded = currentCount - this.lastMessageCount;
+
+      this.pendingOlderFetchScrollHeight = null;
+      this.displayLimit.update((limit) => limit + newlyLoaded);
+
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const container = this.messagesContainer?.nativeElement;
+
+          if (container) {
+            const newScrollHeight = container.scrollHeight;
+
+            container.scrollTop = previousScrollTop + (newScrollHeight - previousScrollHeight);
+          }
+
+          this.loadingMore.set(false);
+        });
+      });
+
+      this.lastMessageCount = currentCount;
+      return;
+    }
+
     const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
     const newMessages = currentCount > this.lastMessageCount;
+    const forceLocalSendScroll = this.shouldForceLocalSendScroll();
 
     if (newMessages) {
-      if (distanceFromBottom <= 300) {
-        this.scheduleScrollToBottomSmooth();
+      if (forceLocalSendScroll || distanceFromBottom <= 300) {
+        if (forceLocalSendScroll) {
+          this.clearLocalSendScrollPending();
+          this.scheduleScrollToBottomAfterRender(true);
+        } else {
+          this.scheduleScrollToBottomSmooth();
+        }
+
         this.showNewMessagesBar.set(false);
       } else {
         queueMicrotask(() => this.showNewMessagesBar.set(true));
@@ -198,7 +293,8 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
           this.isAutoScrolling = false;
         });
 
-        this.startInitialScrollWatch();
+        this.clearLocalSendScrollPending();
+        this.startBottomScrollWatch();
         this.showNewMessagesBar.set(false);
         this.lastMessageCount = this.messages().length;
         this.scheduleCodeHighlight();
@@ -214,14 +310,15 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.stopInitialScrollWatch();
+    this.stopBottomScrollWatch();
+    this.clearLocalSendScrollPending();
   }
 
   findRepliedMessage(messageId?: string | null): Message | undefined {
     if (!messageId)
       return undefined;
 
-    return this.allMessages().find((message) => message.id === messageId);
+    return this.messagesById().get(messageId);
   }
 
   onScroll(): void {
@@ -237,36 +334,72 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
       this.showNewMessagesBar.set(false);
     }
 
-    if (this.initialScrollObserver) {
-      this.stopInitialScrollWatch();
+    if (this.bottomScrollObserver) {
+      this.stopBottomScrollWatch();
     }
 
-    if (element.scrollTop < 150 && this.hasMoreMessages() && !this.loadingMore()) {
-      this.loadMore();
+    if (element.scrollTop < 150 && !this.loadingMore()) {
+      const canFetchOlderFromDb =
+        !this.hasMoreMessages()
+        && !this.conversationExhausted()
+        && !this.loadingOlder()
+        && this.channelMessages().length > 0;
+
+      if (this.hasMoreMessages() || canFetchOlderFromDb) {
+        this.loadMore();
+      }
     }
   }
 
   loadMore(): void {
-    if (this.loadingMore() || !this.hasMoreMessages())
+    if (this.loadingMore())
       return;
 
-    this.loadingMore.set(true);
+    // Case 1: there are still in-store messages above the rendered window.
+    // Just widen the display window and preserve scroll position.
+    if (this.hasMoreMessages()) {
+      this.loadingMore.set(true);
 
-    const element = this.messagesContainer?.nativeElement;
-    const previousScrollHeight = element?.scrollHeight ?? 0;
+      const element = this.messagesContainer?.nativeElement;
+      const previousScrollHeight = element?.scrollHeight ?? 0;
 
-    this.displayLimit.update((limit) => limit + this.PAGE_SIZE);
+      this.displayLimit.update((limit) => limit + this.PAGE_SIZE);
 
-    requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        if (element) {
-          const newScrollHeight = element.scrollHeight;
+        requestAnimationFrame(() => {
+          if (element) {
+            const newScrollHeight = element.scrollHeight;
 
-          element.scrollTop += newScrollHeight - previousScrollHeight;
-        }
+            element.scrollTop += newScrollHeight - previousScrollHeight;
+          }
 
-        this.loadingMore.set(false);
+          this.loadingMore.set(false);
+        });
       });
+
+      return;
+    }
+
+    // Case 2: in-store window is exhausted. Ask the parent to fetch the
+    // next older page from the DB. The parent dispatches loadOlderMessages
+    // and the resulting store update is handled by onMessagesChanged via
+    // pendingOlderFetchScrollHeight (prepend-aware scroll preservation).
+    if (this.loadingOlder() || this.conversationExhausted())
+      return;
+
+    const all = this.channelMessages();
+
+    if (all.length === 0)
+      return;
+
+    const oldest = all[0];
+    const element = this.messagesContainer?.nativeElement;
+
+    this.loadingMore.set(true);
+    this.pendingOlderFetchScrollHeight = element?.scrollHeight ?? 0;
+    this.loadOlderRequested.emit({
+      beforeTimestamp: oldest.timestamp,
+      limit: this.PAGE_SIZE
     });
   }
 
@@ -275,6 +408,13 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
     this.showNewMessagesBar.set(false);
   }
 
+  scrollToBottomAfterLocalSend(): void {
+    this.localSendScrollPending = true;
+    this.showNewMessagesBar.set(false);
+    this.scheduleScrollToBottomAfterRender(true);
+    this.armLocalSendScrollTimeout();
+  }
+
   scrollToMessage(messageId: string): void {
     const container = this.messagesContainer?.nativeElement;
 
@@ -336,54 +476,44 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
 
   private resetScrollingState(): void {
     this.initialScrollPending = true;
-    this.stopInitialScrollWatch();
+    this.stopBottomScrollWatch();
+    this.clearLocalSendScrollPending();
     this.showNewMessagesBar.set(false);
     this.lastMessageCount = 0;
     this.displayLimit.set(this.PAGE_SIZE);
+    this.pendingOlderFetchScrollHeight = null;
+    this.loadingMore.set(false);
   }
 
-  private startInitialScrollWatch(): void {
-    this.stopInitialScrollWatch();
+  private startBottomScrollWatch(): void {
+    this.stopBottomScrollWatch();
 
     const element = this.messagesContainer?.nativeElement;
 
     if (!element)
       return;
 
-    const snapToBottom = () => {
-      const container = this.messagesContainer?.nativeElement;
-
-      if (!container)
-        return;
-
-      this.isAutoScrolling = true;
-      container.scrollTop = container.scrollHeight;
-      requestAnimationFrame(() => {
-        this.isAutoScrolling = false;
-      });
-    };
-
-    this.initialScrollObserver = new MutationObserver(() => {
-      requestAnimationFrame(snapToBottom);
+    this.bottomScrollObserver = new MutationObserver(() => {
+      requestAnimationFrame(() => this.scrollToBottomInstant());
     });
 
-    this.initialScrollObserver.observe(element, {
+    this.bottomScrollObserver.observe(element, {
       childList: true,
       subtree: true,
       attributes: true,
       attributeFilter: ['src']
     });
 
-    this.boundOnImageLoad = () => requestAnimationFrame(snapToBottom);
+    this.boundOnImageLoad = () => requestAnimationFrame(() => this.scrollToBottomInstant());
     element.addEventListener('load', this.boundOnImageLoad, true);
 
-    this.initialScrollTimer = setTimeout(() => this.stopInitialScrollWatch(), 5000);
+    this.bottomScrollTimer = setTimeout(() => this.stopBottomScrollWatch(), 5000);
   }
 
-  private stopInitialScrollWatch(): void {
-    if (this.initialScrollObserver) {
-      this.initialScrollObserver.disconnect();
-      this.initialScrollObserver = null;
+  private stopBottomScrollWatch(): void {
+    if (this.bottomScrollObserver) {
+      this.bottomScrollObserver.disconnect();
+      this.bottomScrollObserver = null;
     }
 
     if (this.boundOnImageLoad && this.messagesContainer) {
@@ -392,12 +522,41 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
       this.boundOnImageLoad = null;
     }
 
-    if (this.initialScrollTimer) {
-      clearTimeout(this.initialScrollTimer);
-      this.initialScrollTimer = null;
+    if (this.bottomScrollTimer) {
+      clearTimeout(this.bottomScrollTimer);
+      this.bottomScrollTimer = null;
     }
   }
 
+  private armLocalSendScrollTimeout(): void {
+    if (this.localSendScrollTimer) {
+      clearTimeout(this.localSendScrollTimer);
+    }
+
+    this.localSendScrollTimer = setTimeout(() => {
+      this.localSendScrollPending = false;
+      this.localSendScrollTimer = null;
+    }, 1000);
+  }
+
+  private clearLocalSendScrollPending(): void {
+    this.localSendScrollPending = false;
+
+    if (this.localSendScrollTimer) {
+      clearTimeout(this.localSendScrollTimer);
+      this.localSendScrollTimer = null;
+    }
+  }
+
+  private shouldForceLocalSendScroll(): boolean {
+    if (!this.localSendScrollPending)
+      return false;
+
+    const latestMessage = this.channelMessages().at(-1);
+
+    return !!latestMessage && latestMessage.senderId === this.currentUserId();
+  }
+
   private getMessageDateTimestamp(message: Message): number {
     return message.timestamp || getMessageTimestamp(message);
   }
@@ -424,6 +583,31 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
     }
   }
 
+  private scrollToBottomInstant(): void {
+    const element = this.messagesContainer?.nativeElement;
+
+    if (!element)
+      return;
+
+    this.isAutoScrolling = true;
+    element.scrollTop = element.scrollHeight;
+    requestAnimationFrame(() => {
+      this.isAutoScrolling = false;
+    });
+  }
+
+  private scheduleScrollToBottomAfterRender(watchForLayoutChanges = false): void {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.scrollToBottomInstant();
+
+        if (watchForLayoutChanges) {
+          this.startBottomScrollWatch();
+        }
+      });
+    });
+  }
+
   private scheduleScrollToBottomSmooth(): void {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => this.scrollToBottomSmooth());

toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html

@@ -4,27 +4,29 @@
   aria-label="KLIPY GIF picker"
   style="background: hsl(var(--background) / 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px)"
 >
-  <div class="flex items-start justify-between gap-4 border-b border-border/70 bg-secondary/15 px-5 py-4">
-    <div>
-      <div class="text-[11px] font-semibold uppercase tracking-[0.28em] text-primary">KLIPY</div>
-      <h3 class="mt-1 text-lg font-semibold text-foreground">Choose a GIF</h3>
-      <p class="mt-1 text-sm text-muted-foreground">
-        {{ searchQuery.trim() ? 'Search results from KLIPY.' : 'Trending GIFs from KLIPY.' }}
-      </p>
-    </div>
+  @if (!isMobile()) {
+    <div class="flex items-start justify-between gap-4 border-b border-border/70 bg-secondary/15 px-5 py-4">
+      <div>
+        <div class="text-[11px] font-semibold uppercase tracking-[0.28em] text-primary">KLIPY</div>
+        <h3 class="mt-1 text-lg font-semibold text-foreground">Choose a GIF</h3>
+        <p class="mt-1 text-sm text-muted-foreground">
+          {{ searchQuery.trim() ? 'Search results from KLIPY.' : 'Trending GIFs from KLIPY.' }}
+        </p>
+      </div>
 
-    <button
-      type="button"
-      (click)="close()"
-      class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/70 bg-secondary/30 text-muted-foreground transition-colors hover:bg-secondary/80 hover:text-foreground"
-      aria-label="Close GIF picker"
-    >
-      <ng-icon
-        name="lucideX"
-        class="h-4 w-4"
-      />
-    </button>
-  </div>
+      <button
+        type="button"
+        (click)="close()"
+        class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/70 bg-secondary/30 text-muted-foreground transition-colors hover:bg-secondary/80 hover:text-foreground"
+        aria-label="Close GIF picker"
+      >
+        <ng-icon
+          name="lucideX"
+          class="h-4 w-4"
+        />
+      </button>
+    </div>
+  }
 
   <div class="border-b border-border/70 bg-secondary/10 px-5 py-4">
     <label class="relative block">
@@ -37,7 +39,7 @@
         type="text"
         [ngModel]="searchQuery"
         (ngModelChange)="onSearchQueryChanged($event)"
-        placeholder="Search KLIPY"
+        [placeholder]="isMobile() ? 'Search KLIPY and add a gif to the chat' : 'Search KLIPY'"
         class="relative z-0 w-full rounded-xl border border-border/80 bg-background/70 px-10 py-3 text-sm text-foreground placeholder:text-muted-foreground shadow-sm backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-primary"
       />
     </label>
@@ -80,12 +82,14 @@
         </div>
       </div>
     } @else {
-      <div class="columns-[12rem] gap-4">
+      <div [class]="isMobile() ? 'grid grid-cols-2 gap-2' : 'columns-[12rem] gap-4'">
         @for (gif of results(); track gif.id) {
           <button
             type="button"
             (click)="selectGif(gif)"
-            class="group mx-auto mb-4 inline-block w-full max-w-[15.5rem] break-inside-avoid align-top overflow-hidden rounded-2xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30"
+            [class]="isMobile()
+              ? 'group block w-full overflow-hidden rounded-xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30'
+              : 'group mx-auto mb-4 inline-block w-full max-w-[15.5rem] break-inside-avoid align-top overflow-hidden rounded-2xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30'"
           >
             <div
               class="relative flex items-center justify-center overflow-hidden bg-secondary/30"
@@ -104,30 +108,55 @@
                 KLIPY
               </span>
             </div>
-            <div class="px-3 py-2">
-              <p class="truncate text-xs font-medium text-foreground">
-                {{ gif.title || 'KLIPY GIF' }}
-              </p>
-              <p class="mt-1 text-[10px] uppercase tracking-[0.22em] text-muted-foreground">Click to select</p>
-            </div>
+            @if (!isMobile()) {
+              <div class="px-3 py-2">
+                <p class="truncate text-xs font-medium text-foreground">
+                  {{ gif.title || 'KLIPY GIF' }}
+                </p>
+                <p class="mt-1 text-[10px] uppercase tracking-[0.22em] text-muted-foreground">Click to select</p>
+              </div>
+            }
           </button>
         }
       </div>
+
+      @if (isMobile() && hasNext()) {
+        <div class="mt-3 flex justify-center">
+          <button
+            type="button"
+            (click)="loadMore()"
+            [disabled]="loading()"
+            class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border/80 bg-background/60 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60"
+            [attr.aria-label]="loading() ? 'Loading more GIFs' : 'Load more GIFs'"
+          >
+            @if (loading()) {
+              <span class="h-4 w-4 animate-spin rounded-full border-2 border-primary/20 border-t-primary"></span>
+            } @else {
+              <ng-icon
+                name="lucideChevronDown"
+                class="h-5 w-5"
+              />
+            }
+          </button>
+        </div>
+      }
     }
   </div>
 
-  <div class="flex items-center justify-between gap-4 border-t border-border/70 bg-secondary/10 px-5 py-4">
-    <p class="text-xs text-muted-foreground">Click a GIF to select it. Powered by KLIPY.</p>
+  @if (!isMobile()) {
+    <div class="flex items-center justify-between gap-4 border-t border-border/70 bg-secondary/10 px-5 py-4">
+      <p class="text-xs text-muted-foreground">Click a GIF to select it. Powered by KLIPY.</p>
 
-    @if (hasNext()) {
-      <button
-        type="button"
-        (click)="loadMore()"
-        [disabled]="loading()"
-        class="rounded-full border border-border/80 bg-background/60 px-4 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
-      >
-        {{ loading() ? 'Loading...' : 'Load more' }}
-      </button>
-    }
-  </div>
+      @if (hasNext()) {
+        <button
+          type="button"
+          (click)="loadMore()"
+          [disabled]="loading()"
+          class="rounded-full border border-border/80 bg-background/60 px-4 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {{ loading() ? 'Loading...' : 'Load more' }}
+        </button>
+      }
+    </div>
+  }
 </div>

toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.ts

@@ -17,6 +17,7 @@ import { FormsModule } from '@angular/forms';
 import { firstValueFrom } from 'rxjs';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
+  lucideChevronDown,
   lucideImage,
   lucideSearch,
   lucideX
@@ -24,6 +25,7 @@ import {
 import { KlipyGif, KlipyService } from '../../application/services/klipy.service';
 import type { RoomSignalSourceInput } from '../../../server-directory';
 import { ChatImageProxyFallbackDirective } from '../chat-image-proxy-fallback.directive';
+import { ViewportService } from '../../../../core/platform';
 
 const KLIPY_CARD_MIN_WIDTH = 140;
 const KLIPY_CARD_MAX_WIDTH = 248;
@@ -42,6 +44,7 @@ const KLIPY_CARD_FALLBACK_SIZE = 160;
   ],
   viewProviders: [
     provideIcons({
+      lucideChevronDown,
       lucideImage,
       lucideSearch,
       lucideX
@@ -58,6 +61,8 @@ export class KlipyGifPickerComponent implements OnInit, AfterViewInit, OnDestroy
   @ViewChild('searchInput') searchInput?: ElementRef<HTMLInputElement>;
 
   private readonly klipy = inject(KlipyService);
+  private readonly viewport = inject(ViewportService);
+  readonly isMobile = this.viewport.isMobile;
   private currentPage = 1;
   private searchTimer: ReturnType<typeof setTimeout> | null = null;
   private requestId = 0;

toju-app/src/app/domains/direct-call/README.md

@@ -0,0 +1,18 @@
+# Direct Call Domain
+
+Direct calls coordinate private voice sessions started from people cards, direct-message headers, or active-call rail icons. The domain owns call session state and call-control events; media capture, camera, screen sharing, playback, and voice activity stay in the existing voice and screen-share domains.
+
+## Flow
+
+1. `DirectCallService.startCall()` creates or reuses the direct-message conversation for a peer, while `startConversationCall()` starts from an existing one-to-one or group conversation. Both paths reuse a live call for the same peer or group before creating a new session.
+2. The caller joins a call-scoped voice session and sends a `direct-call` ring event through `PeerDeliveryService`. Joining a direct call first leaves any other joined call or server voice channel.
+3. The recipient stores the incoming session, loops `assets/audio/call.wav`, shows an in-app answer/decline modal, and shows a desktop notification when permission allows. If the recipient is set to Do Not Disturb (`status: "busy"`), the session is stored silently without call audio, the in-app modal, or a desktop notification. The ring stops when the recipient joins, declines, leaves, or the call ends.
+4. Opening `/call/:callId` shows the private call surface with portraits, voice indicators, media controls, screen/camera tiles, add-user control, and a narrow DM chat panel.
+5. If a third participant is invited, the call creates a fresh empty group conversation and switches the call chat panel to it. Existing one-to-one messages stay in the original PM and are not copied into the group chat.
+6. Starting a call from a group chat uses the group conversation id as the call id and rings every other participant.
+7. Joining, leaving, ending, participant additions, and call chat conversion updates are mirrored as `direct-call` events over the same P2P/signaling fallback path used by direct messages.
+8. The server rail shows call icons only while at least one participant is joined. If a user is viewing a private call after the session ends, the route returns to the call's chat view.
+
+Incoming `direct-call` events are ignored unless the current user is declared in the event's `participantIds` or participant profiles, so only invited PM/group-call participants can receive call audio, the in-app incoming-call modal, or a desktop ring notification.
+
+Two-person calls use the one-to-one direct-message conversation id as their call id. Converted group calls keep the original call id for media routing but point `conversationId` at the new group chat so active streams stay connected while the chat history boundary changes.

toju-app/src/app/domains/direct-call/application/services/direct-call.service.spec.ts

@@ -0,0 +1,598 @@
+import {
+  Injector,
+  runInInjectionContext,
+  signal,
+  ɵChangeDetectionScheduler as ChangeDetectionScheduler,
+  ɵEffectScheduler as EffectScheduler
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Subject } from 'rxjs';
+import { NotificationAudioService, AppSound } from '../../../../core/services/notification-audio.service';
+import {
+  VoiceActivityService,
+  VoiceConnectionFacade,
+  VoicePlaybackService
+} from '../../../voice-connection';
+import { VoiceSessionFacade } from '../../../voice-session';
+import { DirectMessageService, PeerDeliveryService } from '../../../direct-message';
+import { selectAllUsers, selectCurrentUser } from '../../../../store/users/users.selectors';
+import type {
+  ChatEvent,
+  DirectMessageParticipant,
+  User
+} from '../../../../shared-kernel';
+import type { DirectMessageConversation } from '../../../direct-message';
+import type { DirectCallSession } from '../../domain/models/direct-call.model';
+import { DirectCallService } from './direct-call.service';
+
+const alice = createUser('alice', 'Alice');
+const bob = createUser('bob', 'Bob');
+const charlie = createUser('charlie', 'Charlie');
+
+describe('DirectCallService', () => {
+  it('only keeps sessions visible while a participant is joined', () => {
+    const context = createServiceContext({ currentUser: alice, allUsers: [alice, bob] });
+
+    expect(context.service.hasOngoingActivity(createSession('calling', false))).toBe(false);
+    expect(context.service.hasOngoingActivity(createSession('ringing', false))).toBe(false);
+    expect(context.service.hasOngoingActivity(createSession('connected', true))).toBe(true);
+    expect(context.service.hasOngoingActivity(createSession('connected', false))).toBe(false);
+    expect(context.service.hasOngoingActivity(createSession('ended', true))).toBe(false);
+  });
+
+  it('keeps a locally left call visible only until the last peer leaves', async () => {
+    const context = createServiceContext({ currentUser: alice, allUsers: [alice, bob] });
+    const session = createSession('connected', true);
+
+    session.participants.bob.joined = true;
+    (context.service as DirectCallService & { upsertSession: (nextSession: DirectCallSession) => void }).upsertSession(session);
+
+    expect(context.service.visibleActiveSessions()).toHaveLength(1);
+
+    context.service.leaveCall(session.callId);
+
+    expect(context.service.visibleActiveSessions()).toHaveLength(1);
+
+    context.directCallEvents.next(createCallEvent('leave', bob, ['alice', 'bob']));
+
+    await vi.waitFor(() => expect(context.service.visibleActiveSessions()).toHaveLength(0));
+  });
+
+  it('hides an incoming call after the last joined participant leaves before answer', async () => {
+    const context = createServiceContext({ currentUser: bob, allUsers: [alice, bob] });
+
+    context.directCallEvents.next(createCallEvent('ring', alice, ['alice', 'bob']));
+
+    await vi.waitFor(() => expect(context.service.visibleActiveSessions()).toHaveLength(1));
+    await vi.waitFor(() => expect(context.audio.playLoop).toHaveBeenCalledWith(AppSound.Call));
+    expect(context.service.incomingCall()?.callId).toBe('dm-alice-bob');
+
+    context.directCallEvents.next(createCallEvent('leave', alice, ['alice', 'bob']));
+
+    await vi.waitFor(() => expect(context.service.visibleActiveSessions()).toHaveLength(0));
+    expect(context.audio.stop).toHaveBeenCalledWith(AppSound.Call);
+    expect(context.service.incomingCall()).toBeNull();
+  });
+
+  it('suppresses incoming call audio and modal state while do not disturb is active', async () => {
+    const busyBob = { ...bob, status: 'busy' as const };
+    const context = createServiceContext({ currentUser: busyBob, allUsers: [alice, busyBob] });
+
+    context.directCallEvents.next(createCallEvent('ring', alice, ['alice', 'bob']));
+
+    await vi.waitFor(() => expect(context.service.sessionById('dm-alice-bob')).not.toBeNull());
+    expect(context.audio.playLoop).not.toHaveBeenCalled();
+    await vi.waitFor(() => expect(context.audio.stop).toHaveBeenCalledWith(AppSound.Call));
+    expect(context.service.incomingCall()).toBeNull();
+  });
+
+  it('ignores incoming call events when the current user is not a participant', async () => {
+    const context = createServiceContext({ currentUser: charlie, allUsers: [alice, bob, charlie] });
+
+    context.directCallEvents.next(createCallEvent('ring', alice, ['alice', 'bob']));
+
+    await vi.waitFor(() => expect(context.service.sessionById('dm-alice-bob')).toBeNull());
+    expect(context.audio.playLoop).not.toHaveBeenCalled();
+    expect(context.directMessages.createConversation).not.toHaveBeenCalled();
+    expect(context.directMessages.createGroupConversation).not.toHaveBeenCalled();
+  });
+
+  it('answers an incoming call from the modal action', async () => {
+    const context = createServiceContext({ currentUser: bob, allUsers: [alice, bob] });
+
+    context.directCallEvents.next(createCallEvent('ring', alice, ['alice', 'bob']));
+
+    await vi.waitFor(() => expect(context.service.incomingCall()?.callId).toBe('dm-alice-bob'));
+    await context.service.answerIncomingCall('dm-alice-bob');
+
+    expect(context.audio.stop).toHaveBeenCalledWith(AppSound.Call);
+    expect(context.router.navigate).toHaveBeenCalledWith(['/call', 'dm-alice-bob']);
+    expect(context.service.incomingCall()).toBeNull();
+  });
+
+  it('declines an incoming call from the modal action', async () => {
+    const context = createServiceContext({ currentUser: bob, allUsers: [alice, bob] });
+
+    context.directCallEvents.next(createCallEvent('ring', alice, ['alice', 'bob']));
+
+    await vi.waitFor(() => expect(context.service.incomingCall()?.callId).toBe('dm-alice-bob'));
+    context.service.declineIncomingCall('dm-alice-bob');
+
+    expect(context.audio.stop).toHaveBeenCalledWith(AppSound.Call);
+    expect(context.delivery.sendCallEvent).toHaveBeenCalledWith('alice', expect.objectContaining({
+      directCall: expect.objectContaining({
+        action: 'leave',
+        callId: 'dm-alice-bob'
+      }),
+      type: 'direct-call'
+    }));
+
+    expect(context.service.sessionById('dm-alice-bob')?.status).toBe('ended');
+    expect(context.service.incomingCall()).toBeNull();
+  });
+
+  it('rejoins an existing direct call instead of ringing a duplicate after leaving locally', async () => {
+    const context = createServiceContext({ currentUser: alice, allUsers: [alice, bob] });
+    const session = createSession('connected', true);
+
+    session.participants.alice.joined = false;
+    session.participants.bob.joined = true;
+    (context.service as DirectCallService & { upsertSession: (nextSession: DirectCallSession) => void }).upsertSession(session);
+    context.service.joinCall = vi.fn(async () => undefined);
+
+    await context.service.startCall(bob);
+
+    expect(context.service.visibleActiveSessions()).toHaveLength(1);
+    expect(context.service.joinCall).toHaveBeenCalledWith('dm-alice-bob');
+    expect(context.delivery.sendCallEvent).not.toHaveBeenCalled();
+    expect(context.router.navigate).toHaveBeenCalledWith(['/call', 'dm-alice-bob']);
+  });
+
+  it('reuses an existing group call by conversation id instead of creating a duplicate call', async () => {
+    const context = createServiceContext({ currentUser: alice, allUsers: [
+      alice,
+      bob,
+      charlie
+    ] });
+    const session = createGroupSession('dm-original-call', 'dm-group-live', [
+      alice,
+      bob,
+      charlie
+    ]);
+    const conversation = createGroupConversation('dm-group-live', [
+      alice,
+      bob,
+      charlie
+    ]);
+
+    session.participants.alice.joined = false;
+    session.participants.bob.joined = true;
+    (context.service as DirectCallService & { upsertSession: (nextSession: DirectCallSession) => void }).upsertSession(session);
+    context.service.joinCall = vi.fn(async () => undefined);
+
+    await context.service.startConversationCall(conversation);
+
+    expect(context.service.visibleActiveSessions()).toHaveLength(1);
+    expect(context.service.joinCall).toHaveBeenCalledWith('dm-original-call');
+    expect(context.directMessages.createGroupConversation).not.toHaveBeenCalled();
+    expect(context.delivery.sendCallEvent).not.toHaveBeenCalled();
+    expect(context.router.navigate).toHaveBeenCalledWith(['/call', 'dm-original-call']);
+  });
+
+  it('leaves a joined call before joining a different call', async () => {
+    const context = createServiceContext({ currentUser: alice, allUsers: [
+      alice,
+      bob,
+      charlie
+    ] });
+    const firstSession = createSession('connected', true);
+    const nextSession = createDirectSession('dm-alice-charlie', alice, charlie, 'connected', false);
+
+    (context.service as DirectCallService & { upsertSession: (nextSession: DirectCallSession) => void }).upsertSession(firstSession);
+    (context.service as DirectCallService & { upsertSession: (nextSession: DirectCallSession) => void }).upsertSession(nextSession);
+
+    await context.service.joinCall(nextSession.callId);
+
+    expect(context.service.sessionById(firstSession.callId)?.participants.alice.joined).toBe(false);
+    expect(context.delivery.sendCallEvent).toHaveBeenCalledWith('bob', expect.objectContaining({
+      directCall: expect.objectContaining({
+        action: 'leave',
+        callId: firstSession.callId
+      }),
+      type: 'direct-call'
+    }));
+  });
+
+  it('disconnects the current voice channel before joining a call', async () => {
+    const voiceConnectedAlice: User = {
+      ...alice,
+      voiceState: {
+        isConnected: true,
+        isMuted: false,
+        isDeafened: false,
+        roomId: 'voice-room-1',
+        serverId: 'server-1'
+      }
+    };
+    const context = createServiceContext({ currentUser: voiceConnectedAlice, allUsers: [voiceConnectedAlice, bob] });
+    const session = createSession('connected', false);
+
+    session.participants.bob.joined = true;
+    (context.service as DirectCallService & { upsertSession: (nextSession: DirectCallSession) => void }).upsertSession(session);
+
+    await context.service.joinCall(session.callId);
+
+    expect(context.voice.stopVoiceHeartbeat).toHaveBeenCalled();
+    expect(context.voice.disableVoice).toHaveBeenCalled();
+    expect(context.voice.broadcastMessage).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'voice-state',
+      voiceState: expect.objectContaining({
+        isConnected: false,
+        roomId: 'voice-room-1',
+        serverId: 'server-1'
+      })
+    }));
+
+    expect(context.voiceSession.endSession).toHaveBeenCalled();
+  });
+
+  it('starts group calls by keeping the rail-visible call session and ringing every other participant', async () => {
+    const context = createServiceContext({ currentUser: alice, allUsers: [
+      alice,
+      bob,
+      charlie
+    ] });
+    const conversation = createGroupConversation('dm-group-test', [
+      alice,
+      bob,
+      charlie
+    ]);
+
+    context.service.joinCall = vi.fn(async (callId: string) => {
+      const session = context.service.sessionById(callId);
+
+      if (!session) {
+        return;
+      }
+
+      (context.service as DirectCallService & { upsertSession: (nextSession: DirectCallSession) => void }).upsertSession({
+        ...session,
+        status: 'connected',
+        participants: {
+          ...session.participants,
+          alice: {
+            ...session.participants.alice,
+            joined: true
+          }
+        }
+      });
+    });
+
+    await context.service.startConversationCall(conversation);
+
+    expect(context.service.visibleActiveSessions()).toHaveLength(1);
+    expect(context.delivery.sendCallEvent).toHaveBeenCalledWith('bob', expect.objectContaining({
+      directCall: expect.objectContaining({
+        action: 'ring',
+        callId: 'dm-group-test'
+      }),
+      type: 'direct-call'
+    }));
+
+    expect(context.delivery.sendCallEvent).toHaveBeenCalledWith('charlie', expect.objectContaining({
+      directCall: expect.objectContaining({
+        action: 'ring',
+        callId: 'dm-group-test'
+      }),
+      type: 'direct-call'
+    }));
+
+    expect(context.router.navigate).toHaveBeenCalledWith(['/call', 'dm-group-test']);
+  });
+});
+
+interface ServiceContextOptions {
+  allUsers: User[];
+  currentUser: User;
+}
+
+interface ServiceContext {
+  audio: {
+    playLoop: ReturnType<typeof vi.fn>;
+    stop: ReturnType<typeof vi.fn>;
+  };
+  delivery: {
+    sendCallEvent: ReturnType<typeof vi.fn>;
+  };
+  directCallEvents: Subject<ChatEvent>;
+  directMessages: {
+    createConversation: ReturnType<typeof vi.fn>;
+    createGroupConversation: ReturnType<typeof vi.fn>;
+    openConversation: ReturnType<typeof vi.fn>;
+  };
+  router: {
+    navigate: ReturnType<typeof vi.fn>;
+  };
+  service: DirectCallService;
+  voice: {
+    broadcastMessage: ReturnType<typeof vi.fn>;
+    disableVoice: ReturnType<typeof vi.fn>;
+    stopVoiceHeartbeat: ReturnType<typeof vi.fn>;
+  };
+  voiceSession: {
+    endSession: ReturnType<typeof vi.fn>;
+  };
+}
+
+function createServiceContext(options: ServiceContextOptions): ServiceContext {
+  const currentUser = signal<User | null>(options.currentUser);
+  const allUsers = signal<User[]>(options.allUsers);
+  const directCallEvents = new Subject<ChatEvent>();
+  const router = {
+    navigate: vi.fn(async () => true)
+  };
+  const store = {
+    dispatch: vi.fn(),
+    selectSignal: vi.fn((selector: unknown) => {
+      if (selector === selectCurrentUser) {
+        return currentUser;
+      }
+
+      if (selector === selectAllUsers) {
+        return allUsers;
+      }
+
+      throw new Error('Unexpected selector requested by DirectCallService test.');
+    })
+  };
+  const directMessages = {
+    createConversation: vi.fn(async (user: User) => createDirectConversation(options.currentUser, user)),
+    createGroupConversation: vi.fn(async (participants: DirectMessageParticipant[], title?: string, conversationId = 'dm-group-test') => ({
+      ...createGroupConversation(conversationId, participants.map(participantToUser)),
+      title
+    })),
+    openConversation: vi.fn(async () => undefined)
+  };
+  const delivery = {
+    directCallEvents$: directCallEvents.asObservable(),
+    sendCallEvent: vi.fn(() => true)
+  };
+  const audio = {
+    playLoop: vi.fn(),
+    stop: vi.fn()
+  };
+  const voice = {
+    broadcastMessage: vi.fn(),
+    disableVoice: vi.fn(),
+    ensureSignalingConnected: vi.fn(async () => true),
+    isDeafened: vi.fn(() => false),
+    isMuted: vi.fn(() => false),
+    setLocalStream: vi.fn(async () => undefined),
+    startVoiceHeartbeat: vi.fn(),
+    stopVoiceHeartbeat: vi.fn(),
+    syncOutgoingVoiceRouting: vi.fn(),
+    toggleMute: vi.fn()
+  };
+  const voiceSession = {
+    endSession: vi.fn()
+  };
+  const injector = Injector.create({
+    providers: [
+      {
+        provide: ChangeDetectionScheduler,
+        useValue: {
+          notify: vi.fn()
+        }
+      },
+      {
+        provide: EffectScheduler,
+        useValue: {
+          add: vi.fn(),
+          flush: vi.fn(),
+          remove: vi.fn(),
+          schedule: vi.fn()
+        }
+      },
+      {
+        provide: DirectMessageService,
+        useValue: directMessages
+      },
+      {
+        provide: NotificationAudioService,
+        useValue: audio
+      },
+      {
+        provide: PeerDeliveryService,
+        useValue: delivery
+      },
+      {
+        provide: Router,
+        useValue: router
+      },
+      {
+        provide: Store,
+        useValue: store
+      },
+      {
+        provide: VoiceActivityService,
+        useValue: {
+          trackLocalMic: vi.fn(),
+          untrackLocalMic: vi.fn()
+        }
+      },
+      {
+        provide: VoiceConnectionFacade,
+        useValue: voice
+      },
+      {
+        provide: VoiceSessionFacade,
+        useValue: voiceSession
+      },
+      {
+        provide: VoicePlaybackService,
+        useValue: {
+          playPendingStreams: vi.fn(),
+          teardownAll: vi.fn()
+        }
+      }
+    ]
+  });
+
+  return {
+    audio,
+    delivery,
+    directCallEvents,
+    directMessages,
+    router,
+    service: runInInjectionContext(injector, () => new DirectCallService()),
+    voice,
+    voiceSession
+  };
+}
+
+function createCallEvent(action: 'leave' | 'ring', sender: User, participantIds: string[]): ChatEvent {
+  return {
+    type: 'direct-call',
+    directCall: {
+      action,
+      callId: 'dm-alice-bob',
+      conversationId: 'dm-alice-bob',
+      createdAt: 10,
+      sender: toParticipant(sender),
+      participantIds,
+      participants: [alice, bob].map(toParticipant)
+    }
+  };
+}
+
+function createSession(status: DirectCallSession['status'], joined: boolean): DirectCallSession {
+  return {
+    callId: 'dm-alice-bob',
+    conversationId: 'dm-alice-bob',
+    createdAt: 10,
+    initiatorId: 'alice',
+    participantIds: ['alice', 'bob'],
+    participants: {
+      alice: {
+        userId: 'alice',
+        profile: toParticipant(alice),
+        joined
+      },
+      bob: {
+        userId: 'bob',
+        profile: toParticipant(bob),
+        joined: false
+      }
+    },
+    status
+  };
+}
+
+function createDirectSession(
+  callId: string,
+  currentUser: User,
+  peer: User,
+  status: DirectCallSession['status'],
+  joined: boolean
+): DirectCallSession {
+  const currentParticipant = toParticipant(currentUser);
+  const peerParticipant = toParticipant(peer);
+
+  return {
+    callId,
+    conversationId: callId,
+    createdAt: 10,
+    initiatorId: currentParticipant.userId,
+    participantIds: [currentParticipant.userId, peerParticipant.userId],
+    participants: {
+      [currentParticipant.userId]: {
+        userId: currentParticipant.userId,
+        profile: currentParticipant,
+        joined
+      },
+      [peerParticipant.userId]: {
+        userId: peerParticipant.userId,
+        profile: peerParticipant,
+        joined: false
+      }
+    },
+    status
+  };
+}
+
+function createGroupSession(callId: string, conversationId: string, users: User[]): DirectCallSession {
+  const participants = users.map(toParticipant);
+
+  return {
+    callId,
+    conversationId,
+    createdAt: 10,
+    initiatorId: participants[0].userId,
+    participantIds: participants.map((participant) => participant.userId),
+    participants: Object.fromEntries(participants.map((participant) => [
+      participant.userId,
+      {
+        userId: participant.userId,
+        profile: participant,
+        joined: false
+      }
+    ])),
+    status: 'connected'
+  };
+}
+
+function createDirectConversation(currentUser: User, peer: User): DirectMessageConversation {
+  const participants = [toParticipant(currentUser), toParticipant(peer)];
+  const participantIds = participants.map((participant) => participant.userId).sort();
+
+  return {
+    id: `dm-${participantIds.join('-')}`,
+    kind: 'direct',
+    lastMessageAt: 10,
+    messages: [],
+    participantProfiles: Object.fromEntries(participants.map((participant) => [participant.userId, participant])),
+    participants: participantIds,
+    unreadCount: 0
+  };
+}
+
+function createGroupConversation(conversationId: string, users: User[]): DirectMessageConversation {
+  const participants = users.map(toParticipant);
+  const participantIds = participants.map((participant) => participant.userId).sort();
+
+  return {
+    id: conversationId,
+    kind: 'group',
+    lastMessageAt: 10,
+    messages: [],
+    participantProfiles: Object.fromEntries(participants.map((participant) => [participant.userId, participant])),
+    participants: participantIds,
+    title: participants.map((participant) => participant.displayName).join(', '),
+    unreadCount: 0
+  };
+}
+
+function participantToUser(participant: DirectMessageParticipant): User {
+  return createUser(participant.userId, participant.displayName);
+}
+
+function toParticipant(user: User): DirectMessageParticipant {
+  return {
+    userId: user.oderId || user.id,
+    username: user.username,
+    displayName: user.displayName
+  };
+}
+
+function createUser(id: string, displayName: string): User {
+  return {
+    id,
+    oderId: id,
+    username: displayName.toLowerCase(),
+    displayName,
+    status: 'online',
+    role: 'member',
+    joinedAt: 1
+  };
+}

toju-app/src/app/domains/direct-call/application/services/direct-call.service.ts

@@ -0,0 +1,935 @@
+/* eslint-disable @typescript-eslint/member-ordering */
+import {
+  Injectable,
+  computed,
+  effect,
+  inject,
+  signal
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { NotificationAudioService, AppSound } from '../../../../core/services/notification-audio.service';
+import { ViewportService } from '../../../../core/platform';
+import {
+  VoiceActivityService,
+  VoiceConnectionFacade,
+  VoicePlaybackService
+} from '../../../voice-connection';
+import { VoiceSessionFacade } from '../../../voice-session';
+import { DirectMessageService, PeerDeliveryService } from '../../../direct-message';
+import type { DirectMessageConversation } from '../../../direct-message';
+import { selectAllUsers, selectCurrentUser } from '../../../../store/users/users.selectors';
+import { UsersActions } from '../../../../store/users/users.actions';
+import {
+  DirectCallEventPayload,
+  DirectMessageParticipant,
+  User
+} from '../../../../shared-kernel';
+import { DirectCallSession, participantToUser } from '../../domain/models/direct-call.model';
+import { toDirectMessageParticipant } from '../../../direct-message';
+
+@Injectable({ providedIn: 'root' })
+export class DirectCallService {
+  private readonly router = inject(Router);
+  private readonly store = inject(Store);
+  private readonly delivery = inject(PeerDeliveryService);
+  private readonly directMessages = inject(DirectMessageService);
+  private readonly audio = inject(NotificationAudioService);
+  private readonly voice = inject(VoiceConnectionFacade);
+  private readonly voiceSession = inject(VoiceSessionFacade);
+  private readonly voiceActivity = inject(VoiceActivityService);
+  private readonly playback = inject(VoicePlaybackService);
+  private readonly viewport = inject(ViewportService);
+  private readonly currentUser = this.store.selectSignal(selectCurrentUser);
+  private readonly users = this.store.selectSignal(selectAllUsers);
+  private readonly sessionsSignal = signal<DirectCallSession[]>([]);
+  private readonly mobileOverlayCallId = signal<string | null>(null);
+
+  readonly sessions = computed(() => this.sessionsSignal());
+  readonly activeSessions = computed(() => this.sessions().filter((session) => session.status !== 'ended'));
+  readonly visibleActiveSessions = computed(() => this.activeSessions().filter((session) => this.hasOngoingActivity(session)));
+  readonly incomingCall = computed<DirectCallSession | null>(() => {
+    if (this.isDoNotDisturb()) {
+      return null;
+    }
+
+    const meId = this.currentUserId();
+
+    if (!meId) {
+      return null;
+    }
+
+    return [...this.activeSessions()]
+      .sort((left, right) => right.createdAt - left.createdAt)
+      .find((session) => session.status === 'ringing'
+        && this.currentSession()?.callId !== session.callId
+        && !session.participants[meId]?.joined
+        && this.hasConnectedParticipant(session)) ?? null;
+  });
+  readonly currentSession = signal<DirectCallSession | null>(null);
+  readonly hasActiveCall = computed(() => this.visibleActiveSessions().length > 0);
+  readonly mobileOverlaySession = computed(() => {
+    const callId = this.mobileOverlayCallId();
+
+    if (!callId) {
+      return null;
+    }
+
+    return this.visibleActiveSessions().find((session) => session.callId === callId) ?? null;
+  });
+
+  constructor() {
+    this.delivery.directCallEvents$.subscribe((event) => {
+      if (event.directCall) {
+        void this.handleIncomingCallEvent(event.directCall);
+      }
+    });
+
+    effect(() => {
+      const session = this.currentSession();
+
+      if (!session || session.status === 'ended') {
+        return;
+      }
+
+      const peerIds = this.remoteParticipantIds(session);
+
+      this.voice.syncOutgoingVoiceRouting(peerIds);
+    });
+
+    effect(() => {
+      if (this.incomingCall() && !this.isDoNotDisturb()) {
+        return;
+      }
+
+      this.audio.stop(AppSound.Call);
+    });
+
+    effect(() => {
+      if (this.mobileOverlayCallId() && !this.mobileOverlaySession()) {
+        this.mobileOverlayCallId.set(null);
+      }
+    });
+  }
+
+  sessionById(callId: string | null | undefined): DirectCallSession | null {
+    if (!callId) {
+      return null;
+    }
+
+    return this.sessionsSignal().find((session) => session.callId === callId) ?? null;
+  }
+
+  isCallingUser(user: User): boolean {
+    const userId = this.userKey(user);
+
+    return this.visibleActiveSessions().some((session) => session.participantIds.includes(userId));
+  }
+
+  isCallingConversation(conversationId: string | null | undefined): boolean {
+    if (!conversationId) {
+      return false;
+    }
+
+    return this.visibleActiveSessions().some((session) => session.callId === conversationId || session.conversationId === conversationId);
+  }
+
+  hasConnectedParticipant(session: DirectCallSession | null | undefined): boolean {
+    if (!session || session.status === 'ended') {
+      return false;
+    }
+
+    return Object.values(session.participants).some((participant) => participant.joined);
+  }
+
+  hasOngoingActivity(session: DirectCallSession | null | undefined): boolean {
+    return this.hasConnectedParticipant(session);
+  }
+
+  async startCall(user: User): Promise<DirectCallSession> {
+    const conversation = await this.directMessages.createConversation(user);
+    const me = this.requireCurrentUser();
+    const meParticipant = toDirectMessageParticipant(me);
+    const peerParticipant = toDirectMessageParticipant(user);
+    const participantIds = this.uniqueIds([meParticipant.userId, peerParticipant.userId]);
+    const activeSession = this.findLiveSessionForParticipants(participantIds, conversation.id);
+
+    if (activeSession) {
+      return await this.rejoinLiveSession(activeSession);
+    }
+
+    const existing = this.sessionById(conversation.id);
+    const session = existing ?? this.createSession({
+      callId: conversation.id,
+      conversationId: conversation.id,
+      createdAt: Date.now(),
+      initiatorId: meParticipant.userId,
+      participantIds,
+      participants: [meParticipant, peerParticipant],
+      status: 'calling'
+    });
+
+    this.upsertSession(session);
+    this.currentSession.set(session);
+    await this.joinCall(session.callId, false);
+    this.sendCallEvent(peerParticipant.userId, 'ring', session);
+    await this.openCallView(session.callId);
+    return session;
+  }
+
+  async startConversationCall(conversation: DirectMessageConversation): Promise<DirectCallSession> {
+    if (this.isGroupConversation(conversation)) {
+      return await this.startGroupCall(conversation);
+    }
+
+    const meId = this.currentUserId();
+    const peerId = conversation.participants.find((participantId) => participantId !== meId);
+
+    if (!peerId) {
+      throw new Error('Direct message conversation has no recipient to call.');
+    }
+
+    const peer = this.userForParticipant(peerId) ?? participantToUser(this.participantFromConversation(conversation, peerId));
+
+    return await this.startCall(peer);
+  }
+
+  async openCall(callId: string): Promise<void> {
+    const session = this.sessionById(callId);
+
+    if (session?.conversationId) {
+      await this.directMessages.openConversation(session.conversationId);
+    }
+
+    this.currentSession.set(session);
+  }
+
+  async openCallView(callId: string): Promise<void> {
+    if (this.viewport.isMobile()) {
+      await this.openMobileCallOverlay(callId);
+      return;
+    }
+
+    await this.router.navigate(['/call', callId]);
+  }
+
+  async openMobileCallOverlay(callId: string): Promise<void> {
+    await this.openCall(callId);
+    this.mobileOverlayCallId.set(callId);
+  }
+
+  closeMobileCallOverlay(): void {
+    this.mobileOverlayCallId.set(null);
+  }
+
+  async answerIncomingCall(callId: string): Promise<void> {
+    const session = this.sessionById(callId);
+
+    if (!session || session.status === 'ended') {
+      return;
+    }
+
+    this.audio.stop(AppSound.Call);
+    this.currentSession.set(session);
+    await this.joinCall(callId);
+    await this.router.navigate(['/call', callId]);
+  }
+
+  declineIncomingCall(callId: string): void {
+    const session = this.sessionById(callId);
+
+    if (!session || session.status === 'ended') {
+      return;
+    }
+
+    const meId = this.currentUserId();
+    const nextSession = meId
+      ? {
+        ...this.markParticipantJoined(session, meId, false, 'ended'),
+        status: 'ended' as const
+      }
+      : {
+        ...session,
+        status: 'ended' as const
+      };
+
+    this.audio.stop(AppSound.Call);
+
+    if (meId) {
+      this.broadcastCallEvent('leave', session);
+    }
+
+    this.upsertSession(nextSession);
+
+    if (this.currentSession()?.callId === callId) {
+      this.currentSession.set(null);
+    }
+  }
+
+  async joinCall(callId: string, notifyPeers = true): Promise<void> {
+    const session = this.sessionById(callId);
+    const me = this.requireCurrentUser();
+    const meId = this.userKey(me);
+
+    if (!session) {
+      return;
+    }
+
+    this.leaveOtherJoinedCalls(callId);
+    this.leaveCurrentVoiceTargetForCall(callId);
+    this.audio.stop(AppSound.Call);
+
+    const ok = await this.voice.ensureSignalingConnected();
+
+    if (!ok || !navigator.mediaDevices?.getUserMedia) {
+      return;
+    }
+
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: true,
+        noiseSuppression: false
+      }
+    });
+
+    await this.voice.setLocalStream(stream);
+    this.voiceActivity.trackLocalMic(meId, stream);
+    this.voice.startVoiceHeartbeat(session.callId, session.callId);
+    this.updateLocalVoiceState(session, true);
+    this.playback.playPendingStreams({
+      isConnected: true,
+      outputVolume: 1,
+      isDeafened: this.voice.isDeafened()
+    });
+
+    const nextSession = this.markParticipantJoined(session, meId, true, 'connected');
+
+    this.upsertSession(nextSession);
+    this.currentSession.set(nextSession);
+
+    if (notifyPeers) {
+      this.broadcastCallEvent('join', nextSession);
+    }
+  }
+
+  leaveCall(callId: string, endForEveryone = false): void {
+    const session = this.sessionById(callId);
+
+    if (!session) {
+      return;
+    }
+
+    this.leaveJoinedSession(session, endForEveryone);
+  }
+
+  leaveCurrentJoinedCall(exceptCallId?: string): void {
+    for (const session of this.sessionsSignal()) {
+      if (session.callId === exceptCallId || !this.isCurrentUserJoined(session)) {
+        continue;
+      }
+
+      this.leaveJoinedSession(session);
+    }
+  }
+
+  private leaveJoinedSession(session: DirectCallSession, endForEveryone = false): void {
+    const action = endForEveryone ? 'end' : 'leave';
+    const nextSession = this.markCurrentUserLeft(session, endForEveryone);
+
+    this.audio.stop(AppSound.Call);
+    this.broadcastCallEvent(action, nextSession);
+    this.stopLocalMedia(nextSession);
+    this.upsertSession(nextSession);
+
+    this.currentSession.set(null);
+  }
+
+  async inviteUser(callId: string, user: User): Promise<void> {
+    const session = this.sessionById(callId);
+
+    if (!session) {
+      return;
+    }
+
+    const participant = toDirectMessageParticipant(user);
+    const nextSession = this.createSession({
+      ...session,
+      participantIds: this.uniqueIds([...session.participantIds, participant.userId]),
+      participants: [...Object.values(session.participants).map((entry) => entry.profile), participant],
+      status: session.status
+    });
+    const convertedSession = await this.convertToGroupConversationIfNeeded(this.preserveJoinedParticipants(session, nextSession));
+
+    this.upsertSession(convertedSession);
+    this.currentSession.set(convertedSession);
+    this.broadcastCallEvent('update', convertedSession, [participant.userId]);
+    this.sendCallEvent(participant.userId, 'ring', convertedSession);
+  }
+
+  remoteParticipantIds(session: DirectCallSession): string[] {
+    const meId = this.currentUserId();
+
+    return session.participantIds.filter((participantId) => participantId !== meId);
+  }
+
+  userForParticipant(participantId: string): User | null {
+    const known = this.users().find((user) => user.id === participantId || user.oderId === participantId || user.peerId === participantId);
+
+    if (known) {
+      return known;
+    }
+
+    const participant = this.currentSession()?.participants[participantId]?.profile;
+
+    return participant ? participantToUser(participant) : null;
+  }
+
+  private async handleIncomingCallEvent(payload: DirectCallEventPayload): Promise<void> {
+    const meId = this.currentUserId();
+
+    if (!meId || payload.sender.userId === meId) {
+      return;
+    }
+
+    if (!this.callPayloadIncludesParticipant(payload, meId)) {
+      return;
+    }
+
+    const participants = this.callParticipantsFromPayload(payload);
+    const existing = this.sessionById(payload.callId);
+    const incomingSession = this.createSession({
+      callId: payload.callId,
+      conversationId: payload.conversationId,
+      createdAt: payload.createdAt,
+      initiatorId: existing?.initiatorId ?? payload.sender.userId,
+      participantIds: this.uniqueIds([
+        ...payload.participantIds,
+        meId,
+        payload.sender.userId
+      ]),
+      participants,
+      status: this.resolveIncomingStatus(payload.action, existing?.status)
+    });
+    const preservedSession = existing ? this.preserveJoinedParticipants(existing, incomingSession) : incomingSession;
+    const session = this.applyIncomingParticipantState(preservedSession, payload);
+
+    this.upsertSession(session);
+    this.currentSession.set(this.currentSession()?.callId === session.callId ? session : this.currentSession());
+    this.markRemoteVoiceState(payload.sender.userId, session, payload.action === 'join');
+
+    if (payload.action === 'update') {
+      await this.ensureCallConversation(session);
+      return;
+    }
+
+    if (payload.action === 'ring') {
+      await this.ensureCallConversation(session);
+
+      if (this.shouldAlertIncomingCall(session)) {
+        this.audio.playLoop(AppSound.Call);
+      } else {
+        this.audio.stop(AppSound.Call);
+      }
+
+      if (this.shouldAlertIncomingCall(session)) {
+        await this.showIncomingNotification(payload.sender.displayName, payload.callId);
+      }
+
+      return;
+    }
+
+    this.audio.stop(AppSound.Call);
+
+    if (payload.action === 'end') {
+      if (this.currentSession()?.callId === payload.callId) {
+        this.stopLocalMedia(session);
+        this.currentSession.set(null);
+      }
+    }
+  }
+
+  private async startGroupCall(conversation: DirectMessageConversation): Promise<DirectCallSession> {
+    const me = this.requireCurrentUser();
+    const meParticipant = toDirectMessageParticipant(me);
+    const participantIds = this.uniqueIds([...conversation.participants, meParticipant.userId]);
+    const conversationParticipants = participantIds.map((participantId) => this.participantFromConversation(conversation, participantId));
+    const participants = this.uniqueParticipants([meParticipant, ...conversationParticipants]);
+    const activeSession = this.findLiveSessionForParticipants(participantIds, conversation.id);
+
+    if (activeSession) {
+      return await this.rejoinLiveSession(activeSession);
+    }
+
+    const existing = this.sessionById(conversation.id);
+    const session = existing && existing.status !== 'ended'
+      ? existing
+      : this.createSession({
+        callId: conversation.id,
+        conversationId: conversation.id,
+        createdAt: Date.now(),
+        initiatorId: meParticipant.userId,
+        participantIds,
+        participants,
+        status: 'calling'
+      });
+
+    this.upsertSession(session);
+    this.currentSession.set(session);
+    await this.joinCall(session.callId, false);
+    this.broadcastCallEvent('ring', this.sessionById(session.callId) ?? session);
+    await this.router.navigate(['/call', session.callId]);
+    return this.sessionById(session.callId) ?? session;
+  }
+
+  private async rejoinLiveSession(session: DirectCallSession): Promise<DirectCallSession> {
+    this.upsertSession(session);
+    this.currentSession.set(session);
+
+    if (!this.isCurrentUserJoined(session)) {
+      await this.joinCall(session.callId);
+    }
+
+    const nextSession = this.sessionById(session.callId) ?? session;
+
+    await this.router.navigate(['/call', nextSession.callId]);
+    return nextSession;
+  }
+
+  private leaveOtherJoinedCalls(callId: string): void {
+    this.leaveCurrentJoinedCall(callId);
+  }
+
+  private leaveCurrentVoiceTargetForCall(callId: string): void {
+    const user = this.currentUser();
+    const voiceState = user?.voiceState;
+
+    if (!voiceState?.isConnected || (voiceState.roomId === callId && voiceState.serverId === callId)) {
+      return;
+    }
+
+    const userId = user?.id;
+    const userKey = user ? this.userKey(user) : undefined;
+
+    this.voice.stopVoiceHeartbeat();
+
+    if (userKey) {
+      this.voiceActivity.untrackLocalMic(userKey);
+    }
+
+    this.voice.disableVoice();
+    this.playback.teardownAll();
+    this.voiceSession.endSession();
+
+    if (userId) {
+      this.store.dispatch(UsersActions.updateVoiceState({
+        userId,
+        voiceState: {
+          isConnected: false,
+          isMuted: false,
+          isDeafened: false,
+          roomId: undefined,
+          serverId: undefined
+        }
+      }));
+    }
+
+    this.voice.broadcastMessage({
+      type: 'voice-state',
+      oderId: userKey,
+      displayName: user?.displayName || 'User',
+      voiceState: {
+        isConnected: false,
+        isMuted: false,
+        isDeafened: false,
+        roomId: voiceState.roomId,
+        serverId: voiceState.serverId
+      }
+    });
+  }
+
+  private async ensureConversation(sender: DirectMessageParticipant): Promise<void> {
+    await this.directMessages.createConversation(participantToUser(sender));
+  }
+
+  private isGroupConversation(conversation: DirectMessageConversation): boolean {
+    return conversation.kind === 'group' || conversation.participants.length > 2;
+  }
+
+  private participantFromConversation(conversation: DirectMessageConversation, participantId: string): DirectMessageParticipant {
+    const knownUser = this.userForParticipant(participantId);
+    const profile = conversation.participantProfiles[participantId];
+
+    if (knownUser) {
+      return toDirectMessageParticipant(knownUser);
+    }
+
+    return profile ?? {
+      userId: participantId,
+      username: participantId,
+      displayName: participantId
+    };
+  }
+
+  private resolveIncomingStatus(action: DirectCallEventPayload['action'], currentStatus?: DirectCallSession['status']): DirectCallSession['status'] {
+    if (action === 'ring') {
+      return currentStatus === 'connected' ? 'connected' : 'ringing';
+    }
+
+    if (action === 'join') {
+      return 'connected';
+    }
+
+    if (action === 'end') {
+      return 'ended';
+    }
+
+    if (action === 'update') {
+      return currentStatus ?? 'ringing';
+    }
+
+    if (action === 'leave') {
+      return currentStatus === 'ringing' ? 'ringing' : 'connected';
+    }
+
+    return currentStatus ?? 'ringing';
+  }
+
+  private applyIncomingParticipantState(session: DirectCallSession, payload: DirectCallEventPayload): DirectCallSession {
+    if (payload.action === 'ring' || payload.action === 'join') {
+      return this.markParticipantJoined(session, payload.sender.userId, true, payload.action === 'join' ? 'connected' : session.status);
+    }
+
+    if (payload.action === 'leave') {
+      const nextSession = this.markParticipantJoined(session, payload.sender.userId, false, session.status);
+
+      return this.hasConnectedParticipant(nextSession)
+        ? nextSession
+        : {
+          ...nextSession,
+          status: 'ended'
+        };
+    }
+
+    if (payload.action === 'end') {
+      return {
+        ...session,
+        status: 'ended'
+      };
+    }
+
+    return session;
+  }
+
+  private sendCallEvent(recipientId: string, action: DirectCallEventPayload['action'], session: DirectCallSession): void {
+    const me = this.requireCurrentUser();
+
+    this.delivery.sendCallEvent(recipientId, {
+      type: 'direct-call',
+      directCall: {
+        action,
+        callId: session.callId,
+        conversationId: session.conversationId,
+        createdAt: session.createdAt,
+        sender: toDirectMessageParticipant(me),
+        participantIds: session.participantIds,
+        participants: Object.values(session.participants).map((participant) => participant.profile)
+      }
+    });
+  }
+
+  private broadcastCallEvent(action: DirectCallEventPayload['action'], session: DirectCallSession, excludedParticipantIds: string[] = []): void {
+    const excluded = new Set(excludedParticipantIds);
+
+    for (const participantId of this.remoteParticipantIds(session)) {
+      if (excluded.has(participantId)) {
+        continue;
+      }
+
+      this.sendCallEvent(participantId, action, session);
+    }
+  }
+
+  private async convertToGroupConversationIfNeeded(session: DirectCallSession): Promise<DirectCallSession> {
+    if (session.participantIds.length <= 2) {
+      return session;
+    }
+
+    const conversation = await this.directMessages.createGroupConversation(
+      Object.values(session.participants).map((participant) => participant.profile),
+      this.groupConversationTitle(session),
+      session.conversationId.startsWith('dm-group-') ? session.conversationId : undefined
+    );
+
+    return {
+      ...session,
+      conversationId: conversation.id
+    };
+  }
+
+  private preserveJoinedParticipants(previousSession: DirectCallSession, nextSession: DirectCallSession): DirectCallSession {
+    return {
+      ...nextSession,
+      participants: Object.fromEntries(Object.values(nextSession.participants).map((participant) => [
+        participant.userId,
+        {
+          ...participant,
+          joined: previousSession.participants[participant.userId]?.joined ?? participant.joined
+        }
+      ]))
+    };
+  }
+
+  private async ensureCallConversation(session: DirectCallSession): Promise<void> {
+    if (session.participantIds.length > 2) {
+      await this.directMessages.createGroupConversation(
+        Object.values(session.participants).map((participant) => participant.profile),
+        this.groupConversationTitle(session),
+        session.conversationId
+      );
+
+      return;
+    }
+
+    const sender = Object.values(session.participants)
+      .map((participant) => participant.profile)
+      .find((participant) => participant.userId !== this.currentUserId());
+
+    if (sender) {
+      await this.ensureConversation(sender);
+    }
+  }
+
+  private callParticipantsFromPayload(payload: DirectCallEventPayload): DirectMessageParticipant[] {
+    return this.uniqueParticipants([
+      payload.sender,
+      toDirectMessageParticipant(this.requireCurrentUser()),
+      ...(payload.participants ?? []),
+      ...payload.participantIds
+        .map((participantId) => this.userForParticipant(participantId))
+        .filter((user): user is User => !!user)
+        .map((user) => toDirectMessageParticipant(user))
+    ]);
+  }
+
+  private callPayloadIncludesParticipant(payload: DirectCallEventPayload, participantId: string): boolean {
+    return payload.participantIds.includes(participantId)
+      || (payload.participants ?? []).some((participant) => participant.userId === participantId);
+  }
+
+  private groupConversationTitle(session: DirectCallSession): string {
+    const names = Object.values(session.participants)
+      .map((participant) => participant.profile.displayName || participant.profile.username || participant.userId);
+
+    if (names.length <= 3) {
+      return names.join(', ');
+    }
+
+    return `${names.slice(0, 3).join(', ')} +${names.length - 3}`;
+  }
+
+  private createSession(input: {
+    callId: string;
+    conversationId: string;
+    createdAt: number;
+    initiatorId: string;
+    participantIds: string[];
+    participants: DirectMessageParticipant[];
+    status: DirectCallSession['status'];
+  }): DirectCallSession {
+    const participants = Object.fromEntries(this.uniqueParticipants(input.participants).map((participant) => [
+      participant.userId,
+      {
+        userId: participant.userId,
+        profile: participant,
+        joined: input.status === 'connected' && participant.userId === this.currentUserId()
+      }
+    ]));
+
+    return {
+      callId: input.callId,
+      conversationId: input.conversationId,
+      createdAt: input.createdAt,
+      initiatorId: input.initiatorId,
+      participantIds: this.uniqueIds(input.participantIds),
+      participants,
+      status: input.status
+    };
+  }
+
+  private markParticipantJoined(
+    session: DirectCallSession,
+    participantId: string,
+    joined: boolean,
+    status: DirectCallSession['status']
+  ): DirectCallSession {
+    const participant = session.participants[participantId];
+
+    return {
+      ...session,
+      status,
+      participants: {
+        ...session.participants,
+        ...(participant
+          ? {
+            [participantId]: {
+              ...participant,
+              joined
+            }
+          }
+          : {})
+      }
+    };
+  }
+
+  private upsertSession(session: DirectCallSession): void {
+    this.sessionsSignal.update((sessions) => [...sessions.filter((entry) => entry.callId !== session.callId), session]);
+  }
+
+  private markCurrentUserLeft(session: DirectCallSession, endForEveryone: boolean): DirectCallSession {
+    const meId = this.currentUserId();
+    const locallyLeftSession = meId
+      ? this.markParticipantJoined(session, meId, false, session.status)
+      : session;
+
+    return {
+      ...locallyLeftSession,
+      status: endForEveryone || !this.hasConnectedParticipant(locallyLeftSession) ? 'ended' as const : 'connected' as const
+    };
+  }
+
+  private findLiveSessionForParticipants(participantIds: string[], conversationId?: string | null): DirectCallSession | null {
+    const normalizedParticipantIds = this.uniqueIds(participantIds).sort();
+
+    return this.visibleActiveSessions().find((session) => {
+      if (conversationId && (session.callId === conversationId || session.conversationId === conversationId)) {
+        return true;
+      }
+
+      const sessionParticipantIds = this.uniqueIds(session.participantIds).sort();
+
+      return sessionParticipantIds.length === normalizedParticipantIds.length
+        && sessionParticipantIds.every((participantId, index) => participantId === normalizedParticipantIds[index]);
+    }) ?? null;
+  }
+
+  private isCurrentUserJoined(session: DirectCallSession): boolean {
+    const meId = this.currentUserId();
+
+    return !!meId && !!session.participants[meId]?.joined;
+  }
+
+  private stopLocalMedia(session: DirectCallSession): void {
+    const meId = this.currentUserId();
+
+    if (meId) {
+      this.voiceActivity.untrackLocalMic(meId);
+    }
+
+    this.voice.stopVoiceHeartbeat();
+    this.voice.disableVoice();
+    this.playback.teardownAll();
+    this.updateLocalVoiceState(session, false);
+  }
+
+  private updateLocalVoiceState(session: DirectCallSession, connected: boolean): void {
+    const user = this.currentUser();
+
+    if (!user?.id) {
+      return;
+    }
+
+    this.store.dispatch(UsersActions.updateVoiceState({
+      userId: user.id,
+      voiceState: {
+        isConnected: connected,
+        isMuted: connected ? this.voice.isMuted() : false,
+        isDeafened: connected ? this.voice.isDeafened() : false,
+        roomId: connected ? session.callId : undefined,
+        serverId: connected ? session.callId : undefined
+      }
+    }));
+  }
+
+  private markRemoteVoiceState(userId: string, session: DirectCallSession, connected: boolean): void {
+    this.store.dispatch(UsersActions.updateVoiceState({
+      userId,
+      voiceState: {
+        isConnected: connected,
+        isMuted: false,
+        isDeafened: false,
+        roomId: connected ? session.callId : undefined,
+        serverId: connected ? session.callId : undefined
+      }
+    }));
+  }
+
+  private shouldAlertIncomingCall(session: DirectCallSession): boolean {
+    return session.status !== 'connected' && !this.isDoNotDisturb();
+  }
+
+  private isDoNotDisturb(): boolean {
+    return this.currentUser()?.status === 'busy';
+  }
+
+  private async showIncomingNotification(displayName: string, callId: string): Promise<void> {
+    if (typeof Notification === 'undefined') {
+      return;
+    }
+
+    let permission = Notification.permission;
+
+    if (permission === 'default') {
+      permission = await Notification.requestPermission();
+    }
+
+    if (permission !== 'granted') {
+      return;
+    }
+
+    const notification = new Notification('Incoming call', {
+      body: `${displayName} is calling you`
+    });
+
+    notification.onclick = () => {
+      window.focus();
+      void this.router.navigate(['/call', callId]);
+    };
+  }
+
+  private uniqueParticipants(participants: DirectMessageParticipant[]): DirectMessageParticipant[] {
+    const seen = new Set<string>();
+
+    return participants.filter((participant) => {
+      if (seen.has(participant.userId)) {
+        return false;
+      }
+
+      seen.add(participant.userId);
+      return true;
+    });
+  }
+
+  private uniqueIds(ids: string[]): string[] {
+    return ids.filter((id, index) => !!id && ids.indexOf(id) === index);
+  }
+
+  private userKey(user: User): string {
+    return user.oderId || user.id;
+  }
+
+  private currentUserId(): string | null {
+    const user = this.currentUser();
+
+    return user ? this.userKey(user) : null;
+  }
+
+  private requireCurrentUser(): User {
+    const user = this.currentUser();
+
+    if (!user) {
+      throw new Error('Cannot use calls without a current user.');
+    }
+
+    return user;
+  }
+}

toju-app/src/app/domains/direct-call/domain/models/direct-call.model.ts

@@ -0,0 +1,37 @@
+import type { DirectMessageParticipant, User } from '../../../../shared-kernel';
+
+export type DirectCallStatus = 'calling' | 'ringing' | 'connected' | 'ended';
+
+export interface DirectCallParticipant {
+  userId: string;
+  profile: DirectMessageParticipant;
+  joined: boolean;
+}
+
+export interface DirectCallSession {
+  callId: string;
+  conversationId: string;
+  createdAt: number;
+  initiatorId: string;
+  participantIds: string[];
+  participants: Record<string, DirectCallParticipant>;
+  status: DirectCallStatus;
+}
+
+export function participantToUser(participant: DirectMessageParticipant): User {
+  return {
+    id: participant.userId,
+    oderId: participant.userId,
+    username: participant.username,
+    displayName: participant.displayName,
+    description: participant.description,
+    avatarUrl: participant.avatarUrl,
+    avatarHash: participant.avatarHash,
+    avatarMime: participant.avatarMime,
+    avatarUpdatedAt: participant.avatarUpdatedAt,
+    profileUpdatedAt: participant.profileUpdatedAt,
+    status: 'online',
+    role: 'member',
+    joinedAt: Date.now()
+  };
+}

toju-app/src/app/domains/direct-call/feature/incoming-call-modal/incoming-call-modal.component.html

@@ -0,0 +1,73 @@
+@if (session()) {
+  <div class="fixed inset-0 z-[120] bg-black/60 backdrop-blur-sm"></div>
+
+  <div class="pointer-events-none fixed inset-0 z-[121] flex items-center justify-center p-4">
+    <section
+      class="pointer-events-auto w-full max-w-sm rounded-lg border border-border bg-card shadow-2xl"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="incoming-call-title"
+    >
+      <div class="flex flex-col items-center px-6 pb-6 pt-7 text-center">
+        <div class="relative">
+          @if (caller(); as callerUser) {
+            <app-user-avatar
+              [avatarUrl]="callerUser.avatarUrl"
+              [name]="callerUser.displayName || callerUser.username"
+              [showStatusBadge]="true"
+              [status]="callerUser.status"
+              size="xl"
+            />
+          } @else {
+            <div class="grid h-16 w-16 place-items-center rounded-full bg-secondary text-xl font-semibold text-secondary-foreground">
+              {{ callerName().charAt(0).toUpperCase() }}
+            </div>
+          }
+
+          <div class="absolute -bottom-1 -right-1 grid h-7 w-7 place-items-center rounded-full border border-card bg-green-600 text-white shadow-lg">
+            <ng-icon
+              name="lucidePhone"
+              class="h-3.5 w-3.5"
+            />
+          </div>
+        </div>
+
+        <p class="mt-5 text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Incoming call</p>
+        <h2
+          id="incoming-call-title"
+          class="mt-2 text-xl font-semibold text-foreground"
+        >
+          {{ callerName() }} is calling
+        </h2>
+        <p class="mt-1 text-sm text-muted-foreground">{{ callKindLabel() }}</p>
+
+        <div class="mt-6 grid w-full grid-cols-2 gap-3">
+          <button
+            type="button"
+            class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-border bg-secondary px-4 text-sm font-semibold text-foreground transition-colors hover:bg-secondary/80"
+            (click)="decline()"
+          >
+            <ng-icon
+              name="lucidePhoneOff"
+              class="h-4 w-4"
+            />
+            Decline
+          </button>
+
+          <button
+            type="button"
+            class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-green-600 px-4 text-sm font-semibold text-white transition-colors hover:bg-green-500 disabled:cursor-not-allowed disabled:opacity-70"
+            [disabled]="answering()"
+            (click)="answer()"
+          >
+            <ng-icon
+              name="lucidePhone"
+              class="h-4 w-4"
+            />
+            Answer
+          </button>
+        </div>
+      </div>
+    </section>
+  </div>
+}

toju-app/src/app/domains/direct-call/feature/incoming-call-modal/incoming-call-modal.component.ts

@@ -0,0 +1,109 @@
+import {
+  Component,
+  HostListener,
+  computed,
+  inject,
+  signal
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Store } from '@ngrx/store';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucidePhone, lucidePhoneOff } from '@ng-icons/lucide';
+import { UserAvatarComponent } from '../../../../shared';
+import { selectCurrentUser } from '../../../../store/users/users.selectors';
+import { User } from '../../../../shared-kernel';
+import { DirectCallService } from '../../application/services/direct-call.service';
+import { DirectCallSession, participantToUser } from '../../domain/models/direct-call.model';
+
+@Component({
+  selector: 'app-incoming-call-modal',
+  standalone: true,
+  imports: [
+    CommonModule,
+    NgIcon,
+    UserAvatarComponent
+  ],
+  viewProviders: [
+    provideIcons({
+      lucidePhone,
+      lucidePhoneOff
+    })
+  ],
+  templateUrl: './incoming-call-modal.component.html'
+})
+export class IncomingCallModalComponent {
+  readonly calls = inject(DirectCallService);
+  readonly currentUser = inject(Store).selectSignal(selectCurrentUser);
+  readonly session = this.calls.incomingCall;
+  readonly answering = signal(false);
+  readonly caller = computed(() => {
+    const session = this.session();
+
+    if (!session) {
+      return null;
+    }
+
+    const callerId = this.callerIdFor(session);
+    const participant = callerId ? session.participants[callerId]?.profile : null;
+
+    return (callerId ? this.calls.userForParticipant(callerId) : null)
+      ?? (participant ? participantToUser(participant) : null);
+  });
+  readonly callerName = computed(() => this.caller()?.displayName || 'Someone');
+  readonly callKindLabel = computed(() => {
+    const participantCount = this.session()?.participantIds.length ?? 0;
+
+    return participantCount > 2 ? `${participantCount} person call` : 'Direct call';
+  });
+
+  @HostListener('document:keydown.escape')
+  onEscape(): void {
+    this.decline();
+  }
+
+  async answer(): Promise<void> {
+    const session = this.session();
+
+    if (!session || this.answering()) {
+      return;
+    }
+
+    this.answering.set(true);
+
+    try {
+      await this.calls.answerIncomingCall(session.callId);
+    } finally {
+      this.answering.set(false);
+    }
+  }
+
+  decline(): void {
+    const session = this.session();
+
+    if (!session) {
+      return;
+    }
+
+    this.calls.declineIncomingCall(session.callId);
+  }
+
+  private callerIdFor(session: DirectCallSession): string | null {
+    const currentUserId = this.currentUserKey();
+
+    if (session.initiatorId && session.initiatorId !== currentUserId) {
+      return session.initiatorId;
+    }
+
+    return session.participantIds.find((participantId) => participantId !== currentUserId) ?? null;
+  }
+
+  private currentUserKey(): string | null {
+    const user = this.currentUser();
+
+    return user ? this.userKey(user) : null;
+  }
+
+  private userKey(user: User): string {
+    return user.oderId || user.id;
+  }
+}

toju-app/src/app/domains/direct-call/index.ts

@@ -0,0 +1,3 @@
+export * from './application/services/direct-call.service';
+export * from './domain/models/direct-call.model';
+export * from './feature/incoming-call-modal/incoming-call-modal.component';

toju-app/src/app/domains/direct-message/README.md

@@ -1,6 +1,8 @@
 # Direct Message Domain
 
-Direct messages provide local, offline-safe one-to-one messaging over the existing WebRTC data channel.
+Direct messages provide local, offline-safe one-to-one and small-group messaging over the existing WebRTC data channel, with a signaling relay fallback when no peer data channel is available but a route to the recipient is known.
+
+The same `PeerDeliveryService` also exposes direct-call events for the `direct-call` domain so private calls can ring through either an open peer data channel or a known signaling route without adding a second recipient lookup path.
 
 ## Structure
 
@@ -15,10 +17,13 @@ direct-message/
 ## Flow
 
 1. `DirectMessageService.sendMessage()` stores the message locally with `QUEUED`.
-2. `PeerDeliveryService` tries to send a `direct-message` P2P event to the recipient's current peer id.
-3. If the peer is connected, the sender advances to `SENT`; otherwise the message id remains in `OfflineMessageQueueService`.
-4. The recipient persists the message as `DELIVERED` and sends a `direct-message-status` event back.
-5. Opening the conversation marks incoming messages as `ACKNOWLEDGED` and emits a status event.
+2. `PeerDeliveryService` tries to send a `direct-message` P2P event to every other participant's current peer id.
+3. If no data channel is connected, `PeerDeliveryService` tries each participant's known signaling route before leaving the message queued.
+4. If either transport sends, the sender advances to `SENT`; otherwise the message id remains in `OfflineMessageQueueService`.
+5. The recipient persists the message as `DELIVERED` and sends a `direct-message-status` event back.
+6. Opening the conversation marks incoming messages as `ACKNOWLEDGED` and emits a status event.
+
+Incoming PM and group-chat events are ignored unless the current user is declared in the message recipients, participant profiles, or existing local conversation. Sync requests are only answered for conversation participants, so a stray peer route cannot create unread state or expose private history.
 
 Status transitions are monotonic, so a stale `SENT` event cannot overwrite `DELIVERED` or `ACKNOWLEDGED`.
 
@@ -28,6 +33,14 @@ The DM view reuses the chat domain's shared message list, composer, overlays, ma
 
 Message edits, deletions, and reaction changes are stored locally and mirrored to the peer with `direct-message-mutation` events. Delivery state remains direct-message-owned and is exposed separately from the visible shared chat row UI.
 
+When a private call grows beyond two participants, the direct-call domain creates a new empty `group` conversation and points the call chat panel at it. The previous one-to-one conversation remains untouched, so private history is not copied into the group chat. Group conversations reuse the same composer, message list, attachment, GIF, markdown, link-embed, typing, mutation, and sync paths as one-to-one DMs; delivery simply fans out to every participant except the sender.
+
+The DM header and conversation list can start calls from both one-to-one and group conversations. Group calls reuse the group conversation id as the call id and send the same ring notification to every other participant.
+
+Typing state is DM-owned as well. The composer emits `direct-message-typing` events, and the chat view renders the active peer names with a short TTL so the embedded private-call chat has the same typing feedback as a standalone PM.
+
+When a conversation opens, a peer reconnects, or network service is restored, the selected conversation requests a bounded `direct-message-sync` snapshot from the peer. Incoming snapshots merge the newest messages by id instead of replacing local history, which lets clients backfill older PMs when their local stores drift.
+
 ## GIFs
 
 The DM composer reuses the chat domain's KLIPY integration. Availability and GIF search go through the configured signal server API, and selected GIFs are sent as markdown image messages so the same proxy-fallback image rendering path is used in DMs and server chat.

toju-app/src/app/domains/direct-message/application/services/direct-message.service.spec.ts

@@ -1,7 +1,11 @@
 import {
   advanceDirectMessageStatus,
   createDirectConversation,
+  createGroupConversation,
+  directMessageEventIncludesUser,
+  directMessageSyncIncludesUser,
   getDirectConversationId,
+  isGroupDirectConversation,
   updateMessageStatusInConversation,
   upsertDirectMessage
 } from '../../domain/logic/direct-message.logic';
@@ -17,6 +21,11 @@ const bob: DirectMessageParticipant = {
   username: 'bob',
   displayName: 'Bob'
 };
+const charlie: DirectMessageParticipant = {
+  userId: 'charlie',
+  username: 'charlie',
+  displayName: 'Charlie'
+};
 
 describe('DirectMessageService domain flow', () => {
   it('should create conversation', () => {
@@ -44,20 +53,85 @@ describe('DirectMessageService domain flow', () => {
     expect(updatedConversation.messages[0].status).toBe('QUEUED');
   });
 
+  it('should create empty group conversation without direct-message history', () => {
+    const directConversation = upsertDirectMessage(createDirectConversation(alice, bob, 10), createMessage('message-1', 'SENT'), false);
+    const groupConversation = createGroupConversation('dm-group-test', [
+      alice,
+      bob,
+      charlie
+    ], 30, 'Alice, Bob, Charlie');
+
+    expect(isGroupDirectConversation(groupConversation)).toBe(true);
+    expect(groupConversation.id).toBe('dm-group-test');
+    expect(groupConversation.title).toBe('Alice, Bob, Charlie');
+    expect(groupConversation.participants).toEqual([
+      'alice',
+      'bob',
+      'charlie'
+    ]);
+
+    expect(groupConversation.messages).toEqual([]);
+    expect(directConversation.messages).toHaveLength(1);
+  });
+
+  it('should preserve group message recipient metadata', () => {
+    const conversation = createGroupConversation('dm-group-test', [
+      alice,
+      bob,
+      charlie
+    ], 10);
+    const recipientIds = ['bob', 'charlie'];
+    const message = createMessage('message-1', 'QUEUED', conversation.id, recipientIds);
+    const updatedConversation = upsertDirectMessage(conversation, message, false);
+
+    expect(updatedConversation.messages[0].recipientId).toBe('bob');
+    expect(updatedConversation.messages[0].recipientIds).toEqual(recipientIds);
+  });
+
   it('should update status correctly', () => {
     expect(advanceDirectMessageStatus('QUEUED', 'SENT')).toBe('SENT');
     expect(advanceDirectMessageStatus('SENT', 'DELIVERED')).toBe('DELIVERED');
     expect(advanceDirectMessageStatus('DELIVERED', 'SENT')).toBe('DELIVERED');
     expect(advanceDirectMessageStatus('DELIVERED', 'ACKNOWLEDGED')).toBe('ACKNOWLEDGED');
   });
+
+  it('recognises only declared direct-message recipients and participants', () => {
+    const payload = {
+      message: createMessage('message-1', 'SENT', 'dm-group-test', ['bob']),
+      participants: [alice, bob],
+      sender: alice
+    };
+
+    expect(directMessageEventIncludesUser(payload, 'bob')).toBe(true);
+    expect(directMessageEventIncludesUser(payload, 'charlie')).toBe(false);
+  });
+
+  it('recognises only declared sync participants', () => {
+    const payload = {
+      conversationId: 'dm-group-test',
+      messages: [],
+      participants: [alice, bob],
+      sender: alice,
+      syncedAt: 30
+    };
+
+    expect(directMessageSyncIncludesUser(payload, 'alice')).toBe(true);
+    expect(directMessageSyncIncludesUser(payload, 'charlie')).toBe(false);
+  });
 });
 
-function createMessage(id: string, status: DirectMessage['status']): DirectMessage {
+function createMessage(
+  id: string,
+  status: DirectMessage['status'],
+  conversationId = getDirectConversationId('alice', 'bob'),
+  recipientIds = ['bob']
+): DirectMessage {
   return {
     id,
-    conversationId: getDirectConversationId('alice', 'bob'),
+    conversationId,
     senderId: 'alice',
-    recipientId: 'bob',
+    recipientId: recipientIds[0],
+    recipientIds,
     content: 'Hello',
     timestamp: 20,
     status