Merge pull request 'docs: scaffold agent instruction tree' (#16) from docs/scaffold-agent-instruction-tree into main

Reviewed-on: #16

.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,26 @@
+# 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)
+
+_No cross-context feature docs have been written yet._
+
+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/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 |

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/plugin-development/capabilities.md

@@ -19,11 +19,11 @@ Capabilities protect privileged app surfaces. A plugin must declare a capability
 | `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.                                      |
+| `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.addAudioChannel()`, `channels.addVideoChannel()`, `channels.remove()`, `channels.rename()`              | Mutates channel or channel-section state.                                    |
+| `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.updatePermissions()`, `server.updateSettings()`                                                           | Updates server permissions or settings.                                      |
+| `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.                                                  |

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.*

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/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/ipc/system.ts

@@ -62,6 +62,9 @@ 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',
@@ -399,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;
           }
 
@@ -414,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 {

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.*

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/src/app/app.html

@@ -93,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

toju-app/src/app/app.ts

@@ -38,6 +38,7 @@ 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';
@@ -70,6 +71,7 @@ import {
     DebugConsoleComponent,
     ScreenShareSourcePickerComponent,
     NativeContextMenuComponent,
+    PrivateCallComponent,
     ThemeNodeDirective,
     ThemePickerOverlayComponent
   ],
@@ -265,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/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/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

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

@@ -8,6 +8,8 @@ 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';
@@ -18,7 +20,9 @@ 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';
@@ -72,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);
 
@@ -83,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);
@@ -213,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();
 

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

@@ -2,6 +2,7 @@
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
+  ChangeDetectionStrategy,
   Component,
   computed,
   ElementRef,
@@ -153,6 +154,7 @@ interface MissingPluginEmbedFallback {
   ],
   templateUrl: './chat-message-item.component.html',
   styleUrl: './chat-message-item.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     style: 'display: contents;'
   }

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,6 +153,21 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
     return lookup;
   });
 
+  /**
+   * 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;
@@ -150,12 +177,41 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
   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;
@@ -170,6 +226,36 @@ 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();
@@ -232,7 +318,7 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
     if (!messageId)
       return undefined;
 
-    return this.allMessages().find((message) => message.id === messageId);
+    return this.messagesById().get(messageId);
   }
 
   onScroll(): void {
@@ -252,32 +338,68 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
       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
     });
   }
 
@@ -359,6 +481,8 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
     this.showNewMessagesBar.set(false);
     this.lastMessageCount = 0;
     this.displayLimit.set(this.PAGE_SIZE);
+    this.pendingOlderFetchScrollHeight = null;
+    this.loadingMore.set(false);
   }
 
   private startBottomScrollWatch(): void {

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

@@ -9,6 +9,7 @@ import {
 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,
@@ -38,9 +39,11 @@ export class DirectCallService {
   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'));
@@ -65,6 +68,15 @@ export class DirectCallService {
   });
   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) => {
@@ -92,6 +104,12 @@ export class DirectCallService {
 
       this.audio.stop(AppSound.Call);
     });
+
+    effect(() => {
+      if (this.mobileOverlayCallId() && !this.mobileOverlaySession()) {
+        this.mobileOverlayCallId.set(null);
+      }
+    });
   }
 
   sessionById(callId: string | null | undefined): DirectCallSession | null {
@@ -155,7 +173,7 @@ export class DirectCallService {
     this.currentSession.set(session);
     await this.joinCall(session.callId, false);
     this.sendCallEvent(peerParticipant.userId, 'ring', session);
-    await this.router.navigate(['/call', session.callId]);
+    await this.openCallView(session.callId);
     return session;
   }
 
@@ -186,6 +204,24 @@ export class DirectCallService {
     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);
 

toju-app/src/app/domains/direct-message/feature/dm-chat/dm-chat.component.html

@@ -6,17 +6,39 @@
     appThemeNode="dmChatHeader"
     class="flex h-14 shrink-0 items-center gap-3 border-b border-border px-4"
   >
-    <app-user-avatar
-      [name]="peerName()"
-      [avatarUrl]="peerUser()?.avatarUrl"
-      [status]="peerUser()?.status"
-      [showStatusBadge]="true"
-      size="md"
-    />
-    <div class="min-w-0 flex-1">
-      <h1 class="truncate text-base font-semibold text-foreground">{{ peerName() }}</h1>
-      <p class="text-xs text-muted-foreground">{{ isGroupConversation() ? 'Group Chat' : 'Direct Message' }}</p>
-    </div>
+    @if (peerUser()) {
+      <button
+        type="button"
+        class="flex min-w-0 flex-1 items-center gap-3 rounded-md py-1 pr-2 text-left transition-colors hover:bg-secondary/60 focus:outline-none focus:ring-2 focus:ring-primary/50"
+        [attr.aria-label]="'Open profile for ' + peerName()"
+        [title]="'Open profile for ' + peerName()"
+        (click)="openHeaderProfileCard($event)"
+      >
+        <app-user-avatar
+          [name]="peerName()"
+          [avatarUrl]="peerUser()?.avatarUrl"
+          [status]="peerUser()?.status"
+          [showStatusBadge]="true"
+          size="md"
+        />
+        <div class="min-w-0 flex-1">
+          <h1 class="truncate text-base font-semibold text-foreground">{{ peerName() }}</h1>
+          <p class="text-xs text-muted-foreground">Direct Message</p>
+        </div>
+      </button>
+    } @else {
+      <app-user-avatar
+        [name]="peerName()"
+        [avatarUrl]="peerUser()?.avatarUrl"
+        [status]="peerUser()?.status"
+        [showStatusBadge]="true"
+        size="md"
+      />
+      <div class="min-w-0 flex-1">
+        <h1 class="truncate text-base font-semibold text-foreground">{{ peerName() }}</h1>
+        <p class="text-xs text-muted-foreground">{{ isGroupConversation() ? 'Group Chat' : 'Direct Message' }}</p>
+      </div>
+    }
     @if (showCallButton() && conversation()) {
       <button
         type="button"

toju-app/src/app/domains/direct-message/feature/dm-chat/dm-chat.component.ts

@@ -16,7 +16,11 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
 import { ElectronBridgeService } from '../../../../core/platform/electron/electron-bridge.service';
 import { ViewportService } from '../../../../core/platform';
-import { BottomSheetComponent, UserAvatarComponent } from '../../../../shared';
+import {
+  BottomSheetComponent,
+  ProfileCardService,
+  UserAvatarComponent
+} from '../../../../shared';
 import { DirectCallService } from '../../../direct-call';
 import { Attachment, AttachmentFacade } from '../../../attachment';
 import { ThemeNodeDirective } from '../../../theme';
@@ -82,6 +86,7 @@ export class DmChatComponent {
   private readonly attachments = inject(AttachmentFacade);
   private readonly klipy = inject(KlipyService);
   private readonly linkMetadata = inject(LinkMetadataService);
+  private readonly profileCard = inject(ProfileCardService);
   private readonly viewport = inject(ViewportService);
   private readonly metadataRequestKeys = new Set<string>();
   private openedConversationId: string | null = null;
@@ -309,6 +314,17 @@ export class DmChatComponent {
     }
   }
 
+  openHeaderProfileCard(event: MouseEvent): void {
+    const user = this.peerUser();
+
+    if (!user) {
+      return;
+    }
+
+    event.stopPropagation();
+    this.profileCard.open(event.currentTarget as HTMLElement, user, { editable: false });
+  }
+
   setReplyTo(message: ChatMessageReplyEvent): void {
     this.replyTo.set(message);
   }

toju-app/src/app/domains/direct-message/feature/dm-rail/dm-rail.component.html

@@ -3,7 +3,7 @@
   <div class="group/server relative flex w-full justify-center">
     <button
       type="button"
-      class="relative z-10 flex h-10 w-10 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent text-muted-foreground transition-[border-radius,box-shadow,background-color,color] duration-100 hover:rounded-lg hover:bg-card hover:text-foreground"
+      class="relative z-10 flex h-11 w-11 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent text-muted-foreground transition-[border-radius,box-shadow,background-color,color] duration-100 hover:rounded-lg hover:bg-card hover:text-foreground md:h-10 md:w-10"
       title="Direct Messages"
       aria-label="Direct Messages"
       [ngClass]="isOnDirectMessages() ? 'rounded-lg ring-2 ring-primary/40 bg-primary/10 text-foreground' : 'rounded-xl bg-card'"
@@ -12,7 +12,7 @@
     >
       <ng-icon
         name="lucideMessageCircle"
-        class="h-4 w-4"
+        class="h-[18px] w-[18px] md:h-4 md:w-4"
       />
       @if (directMessages.totalUnreadCount() > 0) {
         <span class="dm-rail-slide-in absolute -right-1 -top-1 h-3 w-3 rounded-full bg-amber-400 ring-2 ring-card"></span>
@@ -24,7 +24,7 @@
     <div class="group/server relative flex w-full justify-center">
       <button
         type="button"
-        class="relative z-10 flex h-10 w-10 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent transition-[border-radius,box-shadow,background-color] duration-100 hover:rounded-lg hover:bg-card"
+        class="relative z-10 flex h-11 w-11 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent transition-[border-radius,box-shadow,background-color] duration-100 hover:rounded-lg hover:bg-card md:h-10 md:w-10"
         [class.dm-rail-slide-in]="!item.isExiting"
         [class.dm-rail-slide-out]="item.isExiting"
         [class.pointer-events-none]="item.isExiting"

toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-conversation-item.component.html

@@ -1,6 +1,6 @@
 <div
   appThemeNode="dmConversationItem"
-  class="group flex w-full items-center gap-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-secondary/60"
+  class="group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-secondary/60"
   [class.bg-primary/10]="isSelected()"
   [class.text-foreground]="isSelected()"
   [attr.aria-current]="isSelected() ? 'page' : null"

toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-conversation-item.component.ts

@@ -4,7 +4,8 @@ import {
   computed,
   effect,
   inject,
-  input
+  input,
+  output
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -48,6 +49,7 @@ export class DmConversationItemComponent {
   private readonly directMessages = inject(DirectMessageService);
   private readonly directCalls = inject(DirectCallService);
   readonly conversation = input.required<DirectMessageConversation>();
+  readonly conversationOpened = output<string>();
   readonly users = this.store.selectSignal(selectAllUsers);
   readonly routeConversationId = toSignal(this.route.paramMap.pipe(map((params) => params.get('conversationId'))), {
     initialValue: this.route.snapshot.paramMap.get('conversationId')
@@ -71,6 +73,7 @@ export class DmConversationItemComponent {
   }
 
   openConversation(): void {
+    this.conversationOpened.emit(this.conversation().id);
     void this.router.navigate(['/dm', this.conversation().id]);
   }
 

toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-conversations-panel.component.html

@@ -1,6 +1,6 @@
 <aside
   appThemeNode="dmConversationsPanel"
-  class="flex min-h-0 overflow-hidden border-r border-border bg-card"
+  class="flex min-h-0 w-full min-w-0 overflow-hidden border-r border-border bg-card"
   [ngStyle]="listPanelStyles()"
 >
   <section class="flex h-full w-full min-w-0 flex-col">
@@ -28,10 +28,12 @@
         <div class="flex h-full items-center justify-center px-4 text-center text-sm text-muted-foreground">No direct messages yet.</div>
       } @else {
         <div class="space-y-1">
-          <app-dm-conversation-item
-            *ngFor="let conversation of directMessages.conversations(); trackBy: trackConversationId"
-            [conversation]="conversation"
-          ></app-dm-conversation-item>
+          @for (conversation of directMessages.conversations(); track trackConversationId($index, conversation)) {
+            <app-dm-conversation-item
+              [conversation]="conversation"
+              (conversationOpened)="conversationSelected.emit($event)"
+            />
+          }
         </div>
       }
     </div>

toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-conversations-panel.component.ts

@@ -2,7 +2,8 @@
 import {
   Component,
   computed,
-  inject
+  inject,
+  output
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NgIcon, provideIcons } from '@ng-icons/core';
@@ -31,6 +32,7 @@ export class DmConversationsPanelComponent {
   private readonly theme = inject(ThemeService);
   readonly directMessages = inject(DirectMessageService);
   readonly listPanelStyles = computed(() => this.theme.getLayoutItemStyles('dmConversationsPanel'));
+  readonly conversationSelected = output<string>();
 
   trackConversationId(index: number, conversation: DirectMessageConversation): string {
     return conversation.id;

toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-workspace.component.html

@@ -13,7 +13,10 @@
       <div class="flex h-full w-full min-h-0 overflow-hidden">
         <app-servers-rail class="block h-full shrink-0" />
         <div class="flex min-h-0 flex-1 overflow-hidden border-l border-border">
-          <app-dm-conversations-panel class="block h-full w-full" />
+          <app-dm-conversations-panel
+            (conversationSelected)="setMobilePage('chat')"
+            class="block h-full w-full"
+          />
         </div>
       </div>
     </swiper-slide>
@@ -32,7 +35,21 @@
               class="h-5 w-5"
             />
           </button>
-          <p class="truncate text-sm font-semibold text-foreground">Direct messages</p>
+          <p class="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">Direct messages</p>
+          @if (activeCall()) {
+            <button
+              type="button"
+              (click)="openActiveCall()"
+              class="grid h-11 w-11 place-items-center rounded-lg text-emerald-600 transition-colors hover:bg-emerald-500/10 hover:text-emerald-500"
+              aria-label="Return to call"
+              title="Return to call"
+            >
+              <ng-icon
+                name="lucidePhoneCall"
+                class="h-5 w-5"
+              />
+            </button>
+          }
         </div>
         <div class="min-h-0 flex-1 overflow-hidden">
           <app-dm-chat-panel class="block h-full w-full" />
@@ -50,4 +67,3 @@
     <app-dm-chat-panel />
   </div>
 }
-

toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-workspace.component.ts

@@ -16,10 +16,11 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideChevronLeft } from '@ng-icons/lucide';
+import { lucideChevronLeft, lucidePhoneCall } from '@ng-icons/lucide';
 import { ServersRailComponent } from '../../../../features/servers/servers-rail/servers-rail.component';
 import { ViewportService } from '../../../../core/platform';
 import { ThemeService } from '../../../theme';
+import { DirectCallService } from '../../../direct-call';
 import { DirectMessageService } from '../../application/services/direct-message.service';
 import { DmChatPanelComponent } from './dm-chat-panel.component';
 import { DmConversationsPanelComponent } from './dm-conversations-panel.component';
@@ -47,7 +48,7 @@ interface SwiperElement extends HTMLElement {
     DmConversationsPanelComponent,
     ServersRailComponent
   ],
-  viewProviders: [provideIcons({ lucideChevronLeft })],
+  viewProviders: [provideIcons({ lucideChevronLeft, lucidePhoneCall })],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: './dm-workspace.component.html'
 })
@@ -57,6 +58,7 @@ export class DmWorkspaceComponent implements OnDestroy {
   private readonly theme = inject(ThemeService);
   private readonly viewport = inject(ViewportService);
   private readonly zone = inject(NgZone);
+  private readonly directCalls = inject(DirectCallService);
   private lastSeenConversationId: string | null = null;
   private swiperListenerAttached: SwiperElement | null = null;
   readonly directMessages = inject(DirectMessageService);
@@ -66,6 +68,12 @@ export class DmWorkspaceComponent implements OnDestroy {
   readonly layoutStyles = computed(() => this.theme.getLayoutContainerStyles('dmLayout'));
   readonly isMobile = this.viewport.isMobile;
   readonly swiperRef = viewChild<ElementRef<SwiperElement>>('swiperEl');
+  readonly activeCall = computed(() => {
+    const currentSession = this.directCalls.currentSession();
+    const visibleSessions = this.directCalls.visibleActiveSessions();
+
+    return visibleSessions.find((session) => session.callId === currentSession?.callId) ?? visibleSessions[0] ?? null;
+  });
 
   /** Active page within the mobile single-pane navigation flow. Ignored on desktop. */
   readonly mobilePage = signal<DmWorkspaceMobilePage>('conversations');
@@ -150,6 +158,14 @@ export class DmWorkspaceComponent implements OnDestroy {
     this.mobilePage.set(page);
   }
 
+  openActiveCall(): void {
+    const call = this.activeCall();
+
+    if (call) {
+      void this.directCalls.openCallView(call.callId);
+    }
+  }
+
   ngOnDestroy(): void {
     this.directMessages.closeConversationView(this.routeConversationId());
   }

toju-app/src/app/domains/plugins/application/services/plugin-client-api.service.ts

@@ -3,6 +3,9 @@ import { Store } from '@ngrx/store';
 import { Subscription } from 'rxjs';
 import { RealtimeSessionFacade } from '../../../../core/realtime';
 import { DatabaseService } from '../../../../infrastructure/persistence';
+import { ServerDirectoryFacade } from '../../../server-directory';
+import { resolveRoomPermission } from '../../../access-control';
+import { AttachmentFacade } from '../../../attachment';
 import { VoiceConnectionFacade } from '../../../voice-connection/application/facades/voice-connection.facade';
 import type {
   Channel,
@@ -14,6 +17,7 @@ import type {
   User
 } from '../../../../shared-kernel';
 import { MessagesActions } from '../../../../store/messages/messages.actions';
+import { CHUNK_SIZE, chunkArray } from '../../../../store/messages/messages.helpers';
 import { selectCurrentRoomMessages } from '../../../../store/messages/messages.selectors';
 import { RoomsActions } from '../../../../store/rooms/rooms.actions';
 import {
@@ -24,10 +28,13 @@ import {
 } from '../../../../store/rooms/rooms.selectors';
 import { UsersActions } from '../../../../store/users/users.actions';
 import { selectAllUsers, selectCurrentUser } from '../../../../store/users/users.selectors';
+import { defaultChannels } from '../../../../store/rooms/room-channels.defaults';
+import { isChannelNameTaken, normalizeChannelName } from '../../../../store/rooms/room-channels.rules';
 import type {
   PluginApiAvatarUpdate,
   PluginApiActionContext,
   PluginApiActionSource,
+  PluginApiAttachmentImportRequest,
   PluginApiChannelRequest,
   PluginApiCustomStreamRequest,
   PluginApiMessageAsPluginUserRequest,
@@ -44,11 +51,13 @@ import { PluginUiRegistryService } from './plugin-ui-registry.service';
 
 @Injectable({ providedIn: 'root' })
 export class PluginClientApiService {
+  private readonly attachments = inject(AttachmentFacade);
   private readonly capabilities = inject(PluginCapabilityService);
   private readonly db = inject(DatabaseService);
   private readonly logger = inject(PluginLoggerService);
   private readonly messageBus = inject(PluginMessageBusService);
   private readonly realtime = inject(RealtimeSessionFacade);
+  private readonly serverDirectory = inject(ServerDirectoryFacade);
   private readonly store = inject(Store);
   private readonly storage = inject(PluginStorageService);
   private readonly uiRegistry = inject(PluginUiRegistryService);
@@ -71,7 +80,11 @@ export class PluginClientApiService {
       channels: {
         addAudioChannel: (request) => {
           requireCapability('channels.manage');
-          this.store.dispatch(RoomsActions.addChannel({ channel: createChannel(request, 'voice') }));
+          this.addPluginManagedChannel(pluginId, createChannel(request, 'voice'));
+        },
+        addTextChannel: (request) => {
+          requireCapability('channels.manage');
+          this.addPluginManagedChannel(pluginId, createChannel(request, 'text'));
         },
         addVideoChannel: (request) => {
           requireCapability('channels.manage');
@@ -143,6 +156,15 @@ export class PluginClientApiService {
           await this.storage.writeClientData(pluginId, key, value);
         }
       },
+      attachments: {
+        import: async (request: PluginApiAttachmentImportRequest) => {
+          requireCapability('messages.sync');
+          const roomId = this.requireRoomId();
+
+          this.attachments.rememberMessageRoom(request.messageId, roomId);
+          await this.attachments.publishAttachments(request.messageId, request.files, this.currentUser()?.id);
+        }
+      },
       media: {
         addCustomAudioStream: async (request) => {
           requireCapability('media.addAudioStream');
@@ -190,6 +212,10 @@ export class PluginClientApiService {
           requireCapability('messages.send');
           this.receivePluginUserMessage(pluginId, request);
         },
+        import: async (messages) => {
+          requireCapability('messages.sync');
+          await this.importPluginMessages(pluginId, messages);
+        },
         setTyping: (isTyping, channelId) => {
           requireCapability('messages.send');
           this.setTyping(pluginId, isTyping, channelId);
@@ -301,6 +327,58 @@ export class PluginClientApiService {
 
           return userId;
         },
+        updateIcon: async (icon) => {
+          requireCapability('server.manage');
+          const room = this.currentRoom();
+          const currentUser = this.currentUser();
+
+          if (!room) {
+            throw new Error('Room not found');
+          }
+
+          if (!currentUser) {
+            throw new Error('Not logged in');
+          }
+
+          const isOwner = room.hostId === currentUser.id || room.hostId === currentUser.oderId;
+          const isServerAdmin = currentUser.role === 'admin' || currentUser.role === 'host';
+          const canByRole = resolveRoomPermission(room, currentUser, 'manageIcon');
+
+          if (!isOwner && !isServerAdmin && !canByRole) {
+            throw new Error('Permission denied');
+          }
+
+          const iconUpdatedAt = Date.now();
+
+          await this.db.updateRoom(room.id, { icon, iconUpdatedAt });
+
+          this.store.dispatch(RoomsActions.updateServerIconSuccess({ roomId: room.id, icon, iconUpdatedAt }));
+
+          this.realtime.broadcastMessage({
+            type: 'server-icon-update',
+            roomId: room.id,
+            icon,
+            iconUpdatedAt
+          });
+
+          this.realtime.sendRawMessage({
+            type: 'server_icon_available',
+            serverId: room.id,
+            iconUpdatedAt
+          });
+
+          this.serverDirectory.updateServer(room.id, {
+            actingRole: isOwner ? 'host' : undefined,
+            currentOwnerId: currentUser.id,
+            icon,
+            iconUpdatedAt
+          }, {
+            sourceId: room.sourceId,
+            sourceUrl: room.sourceUrl
+          }).subscribe({
+            error: () => {}
+          });
+        },
         updatePermissions: (permissions) => {
           requireCapability('server.manage');
           this.store.dispatch(RoomsActions.updateRoomPermissions({ roomId: this.requireRoomId(), permissions }));
@@ -648,6 +726,106 @@ export class PluginClientApiService {
     });
   }
 
+  private async importPluginMessages(pluginId: string, messages: Message[]): Promise<void> {
+    const roomId = this.requireRoomId();
+    const normalizedMessages = messages
+      .filter((message) => message.roomId === roomId)
+      .map((message) => ({
+        ...message,
+        channelId: message.channelId ?? this.activeChannelId() ?? 'general',
+        isDeleted: message.isDeleted === true,
+        reactions: message.reactions ?? []
+      }));
+
+    if (normalizedMessages.length === 0) {
+      return;
+    }
+
+    for (const message of normalizedMessages) {
+      await this.db.saveMessage(message);
+    }
+
+    this.store.dispatch(MessagesActions.syncMessages({ messages: normalizedMessages }));
+
+    // Broadcast imported history to peers in CHUNK_SIZE batches so they don't
+    // depend on the inventory-limited background sync to discover bulk imports.
+    for (const chunk of chunkArray(normalizedMessages, CHUNK_SIZE)) {
+      this.voice.broadcastMessage({
+        type: 'chat-sync-batch',
+        roomId,
+        messages: chunk
+      } as unknown as ChatEvent);
+    }
+
+    this.logger.info(pluginId, 'Historical messages imported', { count: normalizedMessages.length });
+  }
+
+  private addPluginManagedChannel(pluginId: string, channel: Channel): void {
+    const room = this.currentRoom();
+    const currentUser = this.currentUser();
+
+    if (!room || !currentUser) {
+      return;
+    }
+
+    const isOwner = room.hostId === currentUser.id || room.hostId === currentUser.oderId;
+    const isServerAdmin = currentUser.role === 'admin' || currentUser.role === 'host';
+    const canManageChannels = resolveRoomPermission(room, currentUser, 'manageChannels');
+
+    if (!isOwner && !isServerAdmin && !canManageChannels) {
+      this.logger.warn(pluginId, 'Plugin channel creation denied by room permissions', {
+        channelId: channel.id,
+        roomId: room.id
+      });
+
+      return;
+    }
+
+    const existingChannels = room.channels ?? defaultChannels();
+    const normalizedName = normalizeChannelName(channel.name);
+    const channelExists = existingChannels.some((entry) => entry.id === channel.id) ||
+      isChannelNameTaken(existingChannels, normalizedName, channel.type);
+
+    if (!normalizedName || channelExists) {
+      return;
+    }
+
+    const channels = [
+      ...existingChannels,
+      { ...channel,
+        name: normalizedName }
+    ];
+
+    this.store.dispatch(RoomsActions.updateRoom({ roomId: room.id,
+      changes: { channels } }));
+
+    void this.db.updateRoom(room.id, { channels }).catch((error: unknown) => {
+      this.logger.warn(pluginId, 'Failed to persist plugin-created channel', error);
+    });
+
+    this.realtime.broadcastMessage({
+      type: 'channels-update',
+      roomId: room.id,
+      channels
+    });
+
+    this.serverDirectory.updateServer(room.id, {
+      actingRole: isOwner ? 'host' : undefined,
+      channels,
+      currentOwnerId: currentUser.id
+    }, {
+      sourceId: room.sourceId,
+      sourceUrl: room.sourceUrl
+    }).subscribe({
+      error: () => {}
+    });
+
+    this.logger.info(pluginId, 'Plugin channel created', {
+      channelId: channel.id,
+      roomId: room.id
+    });
+  }
+
   private persistPluginMessageUpdate(pluginId: string, messageId: string, updates: Partial<Message>): void {
     void this.db.updateMessage(messageId, updates).catch((error: unknown) => {
       this.logger.warn(pluginId, 'Failed to persist plugin message update', error);

toju-app/src/app/domains/plugins/application/services/plugin-store.service.ts

@@ -1107,7 +1107,7 @@ function parsePluginEntry(sourceUrl: string, sourceTitle: string, value: unknown
     githubUrl: resolveOptionalUrl(sourceUrl, readGithubUrl(value)),
     homepageUrl: resolveOptionalUrl(sourceUrl, readString(value, 'homepage', 'homepageUrl', 'website')),
     id,
-    imageUrl: resolveOptionalUrl(sourceUrl, readString(value, 'image', 'imageUrl', 'icon', 'iconUrl', 'banner')),
+    imageUrl: normalizeImageUrl(resolveOptionalUrl(sourceUrl, readString(value, 'image', 'imageUrl', 'icon', 'iconUrl', 'banner'))),
     installUrl: resolveOptionalUrl(sourceUrl, readString(value, 'install', 'installUrl', 'manifest', 'manifestUrl')),
     readmeUrl: resolveOptionalUrl(sourceUrl, readString(value, 'readme', 'readmeUrl')),
     scope: readPluginInstallScope(value),
@@ -1300,6 +1300,44 @@ function normalizeOptionalSourceUrl(rawUrl: string): string | undefined {
   }
 }
 
+/**
+ * Rewrites human-friendly GitHub URLs so the browser can load the underlying
+ * binary asset. Users typically paste links copied from the GitHub web UI which
+ * point at the rendered HTML preview (`github.com/<owner>/<repo>/blob/...`) or
+ * the raw redirector (`github.com/<owner>/<repo>/raw/...`). Both forms must be
+ * mapped to `raw.githubusercontent.com` for `<img>` tags to work.
+ */
+function normalizeImageUrl(rawUrl: string | undefined): string | undefined {
+  if (!rawUrl) {
+    return undefined;
+  }
+
+  let url: URL;
+
+  try {
+    url = new URL(rawUrl);
+  } catch {
+    return rawUrl;
+  }
+
+  if (url.hostname !== 'github.com' && url.hostname !== 'www.github.com') {
+    return rawUrl;
+  }
+
+  const segments = url.pathname.split('/').filter(Boolean);
+  const kindIndex = segments.findIndex((segment) => segment === 'blob' || segment === 'raw');
+
+  if (kindIndex < 2 || kindIndex >= segments.length - 1) {
+    return rawUrl;
+  }
+
+  const owner = segments[0];
+  const repo = segments[1];
+  const ref = segments.slice(kindIndex + 1).join('/');
+
+  return `https://raw.githubusercontent.com/${owner}/${repo}/${ref}${url.search}`;
+}
+
 function resolveOptionalUrl(sourceUrl: string, rawUrl?: string): string | undefined {
   if (!rawUrl) {
     return undefined;

toju-app/src/app/domains/plugins/domain/models/plugin-api.models.ts

@@ -74,6 +74,11 @@ export interface PluginApiAudioClipRequest {
   url: string;
 }
 
+export interface PluginApiAttachmentImportRequest {
+  files: File[];
+  messageId: string;
+}
+
 export interface PluginApiCustomStreamRequest {
   label?: string;
   stream: MediaStream;
@@ -195,6 +200,7 @@ export interface PluginApiUiContributionMap {
 export interface TojuClientPluginApi {
   readonly channels: {
     addAudioChannel: (request: PluginApiChannelRequest) => void;
+    addTextChannel: (request: PluginApiChannelRequest) => void;
     addVideoChannel: (request: PluginApiChannelRequest) => void;
     list: () => Channel[];
     remove: (channelId: string) => void;
@@ -221,6 +227,9 @@ export interface TojuClientPluginApi {
     remove: (key: string) => Promise<void>;
     write: (key: string, value: unknown) => Promise<void>;
   };
+  readonly attachments: {
+    import: (request: PluginApiAttachmentImportRequest) => Promise<void>;
+  };
   readonly media: {
     addCustomAudioStream: (request: PluginApiCustomStreamRequest) => Promise<void>;
     addCustomVideoStream: (request: PluginApiCustomStreamRequest) => Promise<void>;
@@ -235,6 +244,7 @@ export interface TojuClientPluginApi {
     readCurrent: () => Message[];
     send: (content: string, channelId?: string) => Message;
     sendAsPluginUser: (request: PluginApiMessageAsPluginUserRequest) => void;
+    import: (messages: Message[]) => Promise<void>;
     setTyping: (isTyping: boolean, channelId?: string) => void;
     subscribeTyping: (handler: (event: PluginApiTypingEvent) => void) => TojuPluginDisposable;
     sync: (messages: Message[]) => void;
@@ -261,6 +271,7 @@ export interface TojuClientPluginApi {
   readonly server: {
     getCurrent: () => Room | null;
     registerPluginUser: (request: PluginApiPluginUserRequest) => string;
+    updateIcon: (icon: string) => Promise<void>;
     updatePermissions: (permissions: Partial<RoomPermissions>) => void;
     updateSettings: (settings: PluginApiServerSettingsUpdate) => void;
   };

toju-app/src/app/domains/plugins/feature/plugin-manager/plugin-manager.component.html

@@ -1,13 +1,13 @@
 <!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->
 <section
-  class="flex h-full min-h-0 flex-col bg-background text-foreground"
+  class="flex min-h-full flex-col bg-background text-foreground md:h-full md:min-h-0"
   data-testid="plugin-manager"
 >
-  <header class="flex items-center justify-between border-b border-border px-4 py-3">
-    <div class="flex min-w-0 items-center gap-3">
+  <header class="flex flex-col gap-3 border-b border-border px-3 py-3 md:flex-row md:items-center md:justify-between md:px-4">
+    <div class="flex min-w-0 items-center gap-3 md:flex-1">
       <button
         type="button"
-        class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+        class="inline-flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground md:h-8 md:w-8"
         aria-label="Back to settings"
         (click)="close()"
       >
@@ -21,38 +21,40 @@
         <p class="truncate text-xs text-muted-foreground">{{ managerDescription() }}</p>
       </div>
     </div>
-    <button
-      type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md border border-border px-3 text-sm hover:bg-muted disabled:opacity-50"
-      [disabled]="busyAll()"
-      (click)="activateAll()"
-    >
-      <ng-icon
-        name="lucidePlay"
-        size="16"
-      />
-      Activate ready plugins
-    </button>
-    <button
-      type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md border border-border px-3 text-sm hover:bg-muted"
-      (click)="openStore()"
-    >
-      <ng-icon
-        name="lucideStore"
-        size="16"
-      />
-      Open Plugin Store
-    </button>
+    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 md:flex md:flex-shrink-0 md:items-center">
+      <button
+        type="button"
+        class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border border-border px-3 text-sm hover:bg-muted disabled:opacity-50 md:h-8 md:min-h-0"
+        [disabled]="busyAll()"
+        (click)="activateAll()"
+      >
+        <ng-icon
+          name="lucidePlay"
+          size="16"
+        />
+        Activate ready plugins
+      </button>
+      <button
+        type="button"
+        class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border border-border px-3 text-sm hover:bg-muted md:h-8 md:min-h-0"
+        (click)="openStore()"
+      >
+        <ng-icon
+          name="lucideStore"
+          size="16"
+        />
+        Open Plugin Store
+      </button>
+    </div>
   </header>
 
   <nav
-    class="flex gap-2 border-b border-border px-4 py-2"
+    class="no-scrollbar flex gap-2 overflow-x-auto border-b border-border px-3 py-2 md:px-4"
     aria-label="Plugin manager sections"
   >
     <button
       type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm"
+      class="inline-flex h-11 flex-shrink-0 items-center gap-2 rounded-md px-3 text-sm md:h-8"
       [class.bg-muted]="activeTab() === 'installed'"
       (click)="setTab('installed')"
     >
@@ -64,7 +66,7 @@
     </button>
     <button
       type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm"
+      class="inline-flex h-11 flex-shrink-0 items-center gap-2 rounded-md px-3 text-sm md:h-8"
       [class.bg-muted]="activeTab() === 'extensions'"
       (click)="setTab('extensions')"
     >
@@ -76,7 +78,7 @@
     </button>
     <button
       type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm"
+      class="inline-flex h-11 flex-shrink-0 items-center gap-2 rounded-md px-3 text-sm md:h-8"
       [class.bg-muted]="activeTab() === 'requirements'"
       (click)="setTab('requirements')"
     >
@@ -88,7 +90,7 @@
     </button>
     <button
       type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm"
+      class="inline-flex h-11 flex-shrink-0 items-center gap-2 rounded-md px-3 text-sm md:h-8"
       [class.bg-muted]="activeTab() === 'settings'"
       (click)="setTab('settings')"
     >
@@ -100,7 +102,7 @@
     </button>
     <button
       type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm"
+      class="inline-flex h-11 flex-shrink-0 items-center gap-2 rounded-md px-3 text-sm md:h-8"
       [class.bg-muted]="activeTab() === 'docs'"
       (click)="setTab('docs')"
     >
@@ -112,7 +114,7 @@
     </button>
     <button
       type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm"
+      class="inline-flex h-11 flex-shrink-0 items-center gap-2 rounded-md px-3 text-sm md:h-8"
       [class.bg-muted]="activeTab() === 'logs'"
       (click)="setTab('logs')"
     >
@@ -124,7 +126,7 @@
     </button>
   </nav>
 
-  <div class="min-h-0 flex-1 overflow-auto p-4">
+  <div class="min-h-0 flex-1 overflow-auto p-3 md:p-4">
     @switch (activeTab()) {
       @case ('extensions') {
         <div class="space-y-4">
@@ -216,7 +218,7 @@
             @for (entry of entries(); track trackEntry($index, entry)) {
               <button
                 type="button"
-                class="w-full rounded-md border border-border px-3 py-2 text-left text-sm hover:bg-muted"
+                class="min-h-11 w-full rounded-md border border-border px-3 py-2 text-left text-sm hover:bg-muted md:min-h-0"
                 [class.bg-muted]="isSelected(entry)"
                 (click)="selectPlugin(entry.manifest.id)"
               >
@@ -224,7 +226,7 @@
               </button>
             }
           </div>
-          <section class="rounded-lg border border-border bg-card p-4">
+          <section class="rounded-lg border border-border bg-card p-3 md:p-4">
             @if (selectedPlugin(); as plugin) {
               <h3 class="text-sm font-semibold">{{ plugin.manifest.title }} settings</h3>
               @if (selectedSettingsPages().length > 0) {
@@ -255,7 +257,7 @@
             @for (entry of entries(); track trackEntry($index, entry)) {
               <button
                 type="button"
-                class="w-full rounded-md border border-border px-3 py-2 text-left text-sm hover:bg-muted"
+                class="min-h-11 w-full rounded-md border border-border px-3 py-2 text-left text-sm hover:bg-muted md:min-h-0"
                 [class.bg-muted]="isSelected(entry)"
                 (click)="selectPlugin(entry.manifest.id)"
               >
@@ -263,14 +265,14 @@
               </button>
             }
           </div>
-          <section class="rounded-lg border border-border bg-card p-4">
+          <section class="rounded-lg border border-border bg-card p-3 md:p-4">
             @if (selectedPlugin(); as plugin) {
               <h3 class="text-sm font-semibold">{{ plugin.manifest.title }}</h3>
               <p class="mt-2 text-sm text-muted-foreground">{{ plugin.manifest.description }}</p>
               <div class="mt-4 flex flex-wrap gap-2">
                 @for (doc of selectedDocs(); track doc.label) {
                   <a
-                    class="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-muted"
+                    class="inline-flex min-h-11 items-center rounded-md border border-border px-3 py-1.5 text-sm hover:bg-muted md:min-h-0"
                     [href]="doc.url"
                     target="_blank"
                     rel="noreferrer"
@@ -292,7 +294,7 @@
               @for (entry of entries(); track trackEntry($index, entry)) {
                 <button
                   type="button"
-                  class="rounded-md border border-border px-3 py-1 text-sm hover:bg-muted"
+                  class="min-h-11 rounded-md border border-border px-3 py-1 text-sm hover:bg-muted md:min-h-0"
                   [class.bg-muted]="isSelected(entry)"
                   (click)="selectPlugin(entry.manifest.id)"
                 >
@@ -323,7 +325,7 @@
           <div class="space-y-3">
             @if (entries().length === 0) {
               <div
-                class="rounded-lg border border-dashed border-border p-8 text-center"
+                class="rounded-lg border border-dashed border-border p-5 text-center md:p-8"
                 data-testid="plugin-empty-state"
               >
                 <ng-icon
@@ -337,7 +339,7 @@
             } @else {
               @for (entry of entries(); track trackEntry($index, entry)) {
                 <article
-                  class="rounded-lg border border-border bg-card p-4"
+                  class="rounded-lg border border-border bg-card p-3 md:p-4"
                   [class.ring-2]="isSelected(entry)"
                   [class.ring-primary]="isSelected(entry)"
                 >
@@ -351,17 +353,17 @@
                       <p class="mt-1 text-sm text-muted-foreground">{{ entry.manifest.description }}</p>
                       <p class="mt-2 text-xs text-muted-foreground">{{ entry.manifest.id }}</p>
                     </div>
-                    <div class="flex flex-wrap gap-2">
+                    <div class="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:flex-wrap">
                       <button
                         type="button"
-                        class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted md:h-8 md:min-h-0"
                         (click)="selectPlugin(entry.manifest.id)"
                       >
                         Select
                       </button>
                       <button
                         type="button"
-                        class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted md:h-8 md:min-h-0"
                         (click)="setEnabled(entry, !entry.enabled)"
                       >
                         <ng-icon
@@ -372,7 +374,7 @@
                       </button>
                       <button
                         type="button"
-                        class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted disabled:opacity-50"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted disabled:opacity-50 md:h-8 md:min-h-0"
                         [disabled]="busyPluginId() === entry.manifest.id || !entry.enabled || isActive(entry)"
                         (click)="activate(entry)"
                       >
@@ -384,7 +386,7 @@
                       </button>
                       <button
                         type="button"
-                        class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted disabled:opacity-50"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted disabled:opacity-50 md:h-8 md:min-h-0"
                         [disabled]="busyPluginId() === entry.manifest.id"
                         (click)="reload(entry)"
                       >
@@ -396,7 +398,7 @@
                       </button>
                       <button
                         type="button"
-                        class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted disabled:opacity-50"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted disabled:opacity-50 md:h-8 md:min-h-0"
                         [disabled]="busyPluginId() === entry.manifest.id"
                         (click)="unload(entry)"
                       >
@@ -416,7 +418,7 @@
             }
           </div>
 
-          <aside class="rounded-lg border border-border bg-card p-4">
+          <aside class="rounded-lg border border-border bg-card p-3 md:p-4">
             @if (selectedPlugin(); as plugin) {
               <div class="flex items-center gap-2">
                 <ng-icon
@@ -430,14 +432,14 @@
               } @else {
                 <button
                   type="button"
-                  class="mt-3 h-8 rounded-md border border-border px-3 text-sm hover:bg-muted"
+                  class="mt-3 min-h-11 rounded-md border border-border px-3 text-sm hover:bg-muted md:h-8 md:min-h-0"
                   (click)="grantAll(plugin)"
                 >
                   Grant all requested
                 </button>
                 <div class="mt-3 space-y-2">
                   @for (capability of plugin.manifest.capabilities; track trackCapability($index, capability)) {
-                    <label class="flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm">
+                    <label class="flex min-h-11 items-center gap-2 rounded-md border border-border px-3 py-2 text-sm md:min-h-0">
                       <input
                         type="checkbox"
                         class="h-4 w-4"

toju-app/src/app/domains/plugins/feature/plugin-store/plugin-store.component.html

@@ -257,11 +257,13 @@
           @for (plugin of filteredPlugins(); track trackPlugin($index, plugin)) {
             <article class="grid min-w-0 overflow-hidden rounded-lg border border-border bg-background sm:grid-cols-[5.5rem_minmax(0,1fr)]">
               <div class="grid min-h-24 place-items-center bg-secondary text-muted-foreground sm:min-h-full">
-                @if (plugin.imageUrl) {
+                @if (plugin.imageUrl && !hasBrokenImage(plugin)) {
                   <img
                     [src]="plugin.imageUrl"
                     [alt]="plugin.title"
-                    (error)="hideBrokenImage($event)"
+                    (error)="hideBrokenImage($event, plugin)"
+                    loading="lazy"
+                    referrerpolicy="no-referrer"
                     class="h-full w-full object-cover"
                   />
                 } @else {

toju-app/src/app/domains/plugins/feature/plugin-store/plugin-store.component.ts

@@ -155,6 +155,7 @@ export class PluginStoreComponent implements OnInit {
   readonly serverInstallOptional = signal(false);
   readonly serverInstallError = signal<string | null>(null);
   readonly serverInstallBusy = signal(false);
+  readonly brokenImageKeys = signal<Set<string>>(new Set());
 
   private destroyed = false;
   private readonly destroyRef = inject(DestroyRef);
@@ -530,12 +531,26 @@ export class PluginStoreComponent implements OnInit {
     return `${plugin.sourceUrl}:${plugin.id}`;
   }
 
-  hideBrokenImage(event: Event): void {
+  hideBrokenImage(event: Event, plugin: PluginStoreEntry): void {
     const image = event.target as HTMLImageElement | null;
 
     if (image) {
       image.hidden = true;
     }
+
+    const key = this.imageKey(plugin);
+    const next = new Set(this.brokenImageKeys());
+
+    next.add(key);
+    this.brokenImageKeys.set(next);
+  }
+
+  hasBrokenImage(plugin: PluginStoreEntry): boolean {
+    return this.brokenImageKeys().has(this.imageKey(plugin));
+  }
+
+  private imageKey(plugin: PluginStoreEntry): string {
+    return `${plugin.sourceUrl}:${plugin.id}:${plugin.imageUrl ?? ''}`;
   }
 
   trackServer(index: number, server: Room): string {

toju-app/src/app/domains/server-directory/feature/server-search/server-search.component.html

@@ -22,17 +22,32 @@
 
       <h1 class="min-w-0 flex-1 truncate text-center text-base font-semibold text-foreground">Search</h1>
 
-      <button
-        type="button"
-        aria-label="Settings"
-        class="grid h-11 w-11 shrink-0 place-items-center rounded-lg border border-border bg-secondary text-muted-foreground transition-colors hover:bg-secondary/80"
-        (click)="openSettings()"
-      >
-        <ng-icon
-          name="lucideSettings"
-          class="h-5 w-5"
-        />
-      </button>
+      @if (!currentUser()) {
+        <button
+          type="button"
+          aria-label="Log in"
+          class="inline-flex h-11 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+          (click)="goLogin()"
+        >
+          <ng-icon
+            name="lucideLogIn"
+            class="h-5 w-5"
+          />
+          <span>Log in</span>
+        </button>
+      } @else {
+        <button
+          type="button"
+          aria-label="Settings"
+          class="grid h-11 w-11 shrink-0 place-items-center rounded-lg border border-border bg-secondary text-muted-foreground transition-colors hover:bg-secondary/80"
+          (click)="openSettings()"
+        >
+          <ng-icon
+            name="lucideSettings"
+            class="h-5 w-5"
+          />
+        </button>
+      }
     </div>
 
     <div class="flex flex-row items-center gap-2">

toju-app/src/app/domains/server-directory/feature/server-search/server-search.component.ts

@@ -27,7 +27,8 @@ import {
   lucideGlobe,
   lucidePlus,
   lucideSettings,
-  lucideChevronDown
+  lucideChevronDown,
+  lucideLogIn
 } from '@ng-icons/lucide';
 
 import { RoomsActions } from '../../../../store/rooms/rooms.actions';
@@ -94,7 +95,8 @@ interface JoinPluginConsentDialog {
       lucideGlobe,
       lucidePlus,
       lucideSettings,
-      lucideChevronDown
+      lucideChevronDown,
+      lucideLogIn
     })
   ],
   templateUrl: './server-search.component.html'
@@ -246,6 +248,11 @@ export class ServerSearchComponent implements OnInit {
     this.settingsModal.open('network');
   }
 
+  /** Navigate to the login screen, preserving the search route as the return URL. */
+  goLogin(): void {
+    this.router.navigate(['/login'], { queryParams: { returnUrl: '/search' } });
+  }
+
   /**
    * Navigate back from the Search page to the chat-room view (server rail + current server).
    * Prefers the current room; falls back to the first saved room. No-op when the user has not

toju-app/src/app/features/direct-call/private-call-controls.component.html

@@ -1,4 +1,4 @@
-<div class="flex w-full flex-wrap items-center justify-center gap-3 rounded-2xl bg-background/75 px-4 py-3 backdrop-blur">
+<div class="flex w-full flex-wrap items-center justify-center gap-3 px-3 py-3 sm:px-4">
   @if (!connected()) {
     <button
       type="button"

toju-app/src/app/features/direct-call/private-call-participant-card.component.html

@@ -1,11 +1,6 @@
 <article
-  class="flex aspect-square min-w-0 flex-col items-center justify-center overflow-hidden rounded-2xl border border-border/80 bg-card/80 text-center shadow-sm backdrop-blur"
-  [class.w-[11rem]]="compact()"
-  [class.shrink-0]="compact()"
-  [class.p-4]="compact()"
-  [class.sm:w-[12.5rem]]="compact()"
-  [class.w-full]="!compact()"
-  [class.p-[clamp(1rem,4vw,1.5rem)]]="!compact()"
+  class="flex min-w-0 flex-col items-center justify-center overflow-hidden rounded-xl text-center"
+  [ngClass]="compact() ? 'min-h-[9.5rem] w-[12rem] shrink-0 p-3 sm:w-[14rem] sm:p-4' : 'min-h-[14rem] w-full p-3 sm:min-h-[17rem] sm:p-[clamp(1.25rem,4vw,2rem)]'"
 >
   <div
     class="relative h-[var(--participant-avatar-size)] w-[var(--participant-avatar-size)] rounded-full ring-2 transition-all duration-150 sm:h-[var(--participant-avatar-size-sm)] sm:w-[var(--participant-avatar-size-sm)]"
@@ -67,16 +62,9 @@
     @if (connected()) {
       <span
         class="absolute rounded-full border-card"
-        [class.bottom-3]="compact()"
-        [class.right-3]="compact()"
-        [class.h-4]="compact()"
-        [class.w-4]="compact()"
-        [class.border-[3px]]="compact()"
-        [class.bottom-5]="!compact()"
-        [class.right-5]="!compact()"
-        [class.h-5]="!compact()"
-        [class.w-5]="!compact()"
-        [class.border-4]="!compact()"
+        [ngClass]="
+          compact() ? 'bottom-1 right-1 h-4 w-4 border-[3px] sm:bottom-3 sm:right-3' : 'bottom-1 right-1 h-5 w-5 border-4 sm:bottom-5 sm:right-5'
+        "
         [class.bg-emerald-400]="speaking()"
         [class.bg-muted-foreground]="!speaking()"
       ></span>

toju-app/src/app/features/direct-call/private-call-participant-card.component.ts

@@ -20,11 +20,11 @@ export class PrivateCallParticipantCardComponent {
   readonly compact = input(false);
 
   avatarSize(): string {
-    return this.compact() ? '5rem' : 'clamp(4.25rem, 22vw, 10rem)';
+    return this.compact() ? '5.75rem' : 'clamp(6.5rem, 38vw, 13rem)';
   }
 
   avatarSizeSm(): string {
-    return this.compact() ? '6rem' : this.avatarSize();
+    return this.compact() ? '6rem' : 'clamp(4.25rem, 22vw, 10rem)';
   }
 
   participantInitial(): string {

toju-app/src/app/features/direct-call/private-call.component.html

@@ -1,9 +1,30 @@
+@if (isMobile()) {
+  <swiper-container
+    class="block h-full min-h-0 w-full"
+    direction="vertical"
+    slides-per-view="1"
+    space-between="0"
+    initial-slide="1"
+    threshold="10"
+    resistance-ratio="0"
+    (swiperslidechange)="onMobileCallSlideChange($event)"
+  >
+    <swiper-slide class="block h-full w-full" />
+    <swiper-slide class="block h-full w-full">
+      <ng-container *ngTemplateOutlet="privateCallSurface" />
+    </swiper-slide>
+  </swiper-container>
+} @else {
+  <ng-container *ngTemplateOutlet="privateCallSurface" />
+}
+
+<ng-template #privateCallSurface>
 <section
   class="grid h-full min-h-0 bg-background lg:grid-cols-[minmax(0,1fr)_var(--private-call-chat-width)]"
   [style.--private-call-chat-width]="chatWidthPx() + 'px'"
 >
   <main class="flex min-h-0 min-w-0 flex-col overflow-hidden bg-[radial-gradient(circle_at_top,rgba(16,185,129,0.10),transparent_34rem)]">
-    <header class="flex min-h-16 shrink-0 items-center justify-between gap-3 border-b border-border/70 bg-background/80 px-5 backdrop-blur">
+    <header class="flex min-h-16 shrink-0 items-center justify-between gap-3 border-b border-border/70 bg-background/80 px-3 backdrop-blur sm:px-5">
       <div class="flex min-w-0 items-center gap-3">
         <div class="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-emerald-500/10 text-emerald-500">
           <ng-icon
@@ -26,8 +47,22 @@
 
       @if (session()) {
         <div class="flex items-center gap-2">
+          @if (isMobile()) {
+            <button
+              type="button"
+              class="grid h-10 w-10 place-items-center rounded-full bg-secondary text-foreground transition-colors hover:bg-secondary/80"
+              (click)="minimizeCall()"
+              aria-label="Minimize call"
+              title="Minimize call"
+            >
+              <ng-icon
+                name="lucideX"
+                class="h-5 w-5"
+              />
+            </button>
+          }
           <select
-            class="h-9 max-w-44 rounded-md border border-border bg-secondary px-2 text-sm text-foreground"
+            class="hidden h-9 max-w-44 rounded-md border border-border bg-secondary px-2 text-sm text-foreground sm:block"
             [ngModel]="inviteUserId()"
             (ngModelChange)="inviteUserId.set($event)"
             aria-label="Add user to call"
@@ -39,7 +74,7 @@
           </select>
           <button
             type="button"
-            class="grid h-9 w-9 place-items-center rounded-md bg-secondary text-foreground transition-colors hover:bg-secondary/80 disabled:opacity-50"
+            class="hidden h-9 w-9 place-items-center rounded-md bg-secondary text-foreground transition-colors hover:bg-secondary/80 disabled:opacity-50 sm:grid"
             [disabled]="!inviteUserId()"
             (click)="inviteSelectedUser()"
             aria-label="Add user"
@@ -55,8 +90,8 @@
     </header>
 
     @if (session()) {
-      <div class="flex min-h-0 flex-1 flex-col overflow-hidden px-4 py-4 sm:px-5">
-        <div class="relative min-h-0 flex-1 overflow-hidden rounded-2xl border border-border/80 bg-card/45 shadow-sm">
+      <div class="flex min-h-0 flex-1 flex-col overflow-hidden px-3 py-3 sm:px-5 sm:py-4">
+        <div class="relative min-h-0 flex-1 overflow-hidden">
           @if (activeShares().length > 0) {
             @if (focusedShare()) {
               @if (hasMultipleShares()) {
@@ -103,17 +138,18 @@
               </div>
             }
           } @else {
-            <div class="flex h-full min-h-0 items-center justify-center p-4 sm:p-6">
+            <div class="flex h-full min-h-0 items-center justify-center p-1 sm:p-5">
               <div
-                class="grid w-full max-w-5xl grid-cols-[repeat(auto-fit,minmax(min(10rem,100%),1fr))] items-stretch justify-center gap-3 sm:grid-cols-[repeat(auto-fit,minmax(min(13rem,100%),1fr))] sm:gap-5 lg:gap-7"
+                class="grid w-full max-w-7xl grid-cols-[repeat(auto-fit,minmax(min(11rem,100%),1fr))] items-stretch justify-center gap-3 sm:grid-cols-[repeat(auto-fit,minmax(min(16rem,100%),1fr))] sm:gap-5 lg:gap-7"
               >
-                <app-private-call-participant-card
-                  *ngFor="let user of participantUsers(); trackBy: trackUserKey"
-                  [user]="user"
-                  [connected]="isParticipantConnected(user)"
-                  [speaking]="isSpeaking(user)"
-                  [issueLabel]="participantIssueLabel(user)"
-                ></app-private-call-participant-card>
+                @for (user of participantUsers(); track trackUserKey($index, user)) {
+                  <app-private-call-participant-card
+                    [user]="user"
+                    [connected]="isParticipantConnected(user)"
+                    [speaking]="isSpeaking(user)"
+                    [issueLabel]="participantIssueLabel(user)"
+                  />
+                }
               </div>
             </div>
           }
@@ -122,14 +158,15 @@
         @if (activeShares().length > 0) {
           <div class="shrink-0 pt-4">
             <div class="flex w-full items-stretch gap-3 overflow-x-auto pb-1">
-              <app-private-call-participant-card
-                *ngFor="let user of participantUsers(); trackBy: trackUserKey"
-                [user]="user"
-                [connected]="isParticipantConnected(user)"
-                [speaking]="isSpeaking(user)"
-                [issueLabel]="participantIssueLabel(user)"
-                [compact]="true"
-              ></app-private-call-participant-card>
+              @for (user of participantUsers(); track trackUserKey($index, user)) {
+                <app-private-call-participant-card
+                  [user]="user"
+                  [connected]="isParticipantConnected(user)"
+                  [speaking]="isSpeaking(user)"
+                  [issueLabel]="participantIssueLabel(user)"
+                  [compact]="true"
+                />
+              }
 
               @if (hasMultipleShares()) {
                 @for (share of focusedShare() ? thumbnailShares() : activeShares(); track share.id) {
@@ -166,7 +203,7 @@
             (cameraToggled)="toggleCamera()"
             (screenShareToggled)="toggleScreenShare()"
             (leaveRequested)="leave()"
-          ></app-private-call-controls>
+          />
         </div>
       </div>
     } @else {
@@ -191,6 +228,7 @@
     />
   </aside>
 </section>
+</ng-template>
 
 @if (showScreenShareQualityDialog()) {
   <app-screen-share-quality-dialog

toju-app/src/app/features/direct-call/private-call.component.ts

@@ -1,11 +1,13 @@
 /* eslint-disable @typescript-eslint/member-ordering */
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   Component,
   DestroyRef,
   HostListener,
   computed,
   effect,
   inject,
+  input,
   signal,
   untracked
 } from '@angular/core';
@@ -17,6 +19,7 @@ import { Store } from '@ngrx/store';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
   lucidePhone,
+  lucideX,
   lucideUsers,
   lucideUserPlus
 } from '@ng-icons/lucide';
@@ -39,6 +42,7 @@ import {
 } from '../../domains/screen-share';
 import { loadVoiceSettingsFromStorage, saveVoiceSettingsToStorage } from '../../domains/voice-session';
 import { ScreenShareQualityDialogComponent } from '../../shared';
+import { ViewportService } from '../../core/platform';
 import { selectAllUsers, selectCurrentUser } from '../../store/users/users.selectors';
 import { UsersActions } from '../../store/users/users.actions';
 import { User } from '../../shared-kernel';
@@ -60,9 +64,12 @@ import { PrivateCallParticipantCardComponent } from './private-call-participant-
     ScreenShareQualityDialogComponent,
     VoiceWorkspaceStreamTileComponent
   ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  host: { class: 'block h-full w-full' },
   viewProviders: [
     provideIcons({
       lucidePhone,
+      lucideX,
       lucideUsers,
       lucideUserPlus
     })
@@ -79,13 +86,18 @@ export class PrivateCallComponent {
   private readonly voiceActivity = inject(VoiceActivityService);
   private readonly playback = inject(VoicePlaybackService);
   private readonly screenShare = inject(ScreenShareFacade);
+  private readonly viewport = inject(ViewportService);
   private chatResizing = false;
 
   readonly allUsers = this.store.selectSignal(selectAllUsers);
   readonly currentUser = this.store.selectSignal(selectCurrentUser);
-  readonly callId = toSignal(this.route.paramMap.pipe(map((params) => params.get('callId'))), {
+  readonly isMobile = this.viewport.isMobile;
+  readonly callIdInput = input<string | null>(null);
+  readonly overlayMode = input(false);
+  readonly routeCallId = toSignal(this.route.paramMap.pipe(map((params) => params.get('callId'))), {
     initialValue: this.route.snapshot.paramMap.get('callId')
   });
+  readonly callId = computed(() => this.callIdInput() ?? this.routeCallId());
   readonly session = computed(() => this.calls.sessionById(this.callId()));
   readonly participantUsers = computed(() => {
     const session = this.session();
@@ -146,13 +158,11 @@ export class PrivateCallComponent {
     }
 
     for (const user of this.participantUsers()) {
-      const peerKey = this.getPeerKeyCandidates(user).find(
-        (candidate) => candidate !== localPeerKey
-          && (
-            !!this.screenShare.getRemoteScreenShareStream(candidate)
-            || !!this.voice.getRemoteCameraStream(candidate)
-          )
-      ) ?? this.userKey(user);
+      const peerKey =
+        this.getPeerKeyCandidates(user).find(
+          (candidate) =>
+            candidate !== localPeerKey && (!!this.screenShare.getRemoteScreenShareStream(candidate) || !!this.voice.getRemoteCameraStream(candidate))
+        ) ?? this.userKey(user);
 
       if (peerKey === localPeerKey) {
         continue;
@@ -192,9 +202,7 @@ export class PrivateCallComponent {
 
     return null;
   });
-  readonly focusedShare = computed(
-    () => this.activeShares().find((share) => share.id === this.focusedShareId()) ?? null
-  );
+  readonly focusedShare = computed(() => this.activeShares().find((share) => share.id === this.focusedShareId()) ?? null);
   readonly thumbnailShares = computed(() => {
     const focusedShareId = this.focusedShareId();
 
@@ -217,14 +225,31 @@ export class PrivateCallComponent {
       const session = this.session();
 
       if (session && !this.calls.hasOngoingActivity(session)) {
+        if (this.overlayMode()) {
+          untracked(() => this.calls.closeMobileCallOverlay());
+          return;
+        }
+
         untracked(() => void this.router.navigate(['/dm', session.conversationId], { replaceUrl: true }));
       }
     });
 
+    effect(() => {
+      const callId = this.callId();
+      const session = this.session();
+
+      if (callId && session?.conversationId && this.isMobile() && !this.overlayMode()) {
+        untracked(() => {
+          void this.calls.openMobileCallOverlay(callId);
+          void this.router.navigate(['/pm', session.conversationId], { replaceUrl: true });
+        });
+      }
+    });
+
     effect(() => {
       const session = this.session();
       const currentUserId = this.currentUserKey();
-      const peerIds = (session ? this.remoteParticipantPeerIds(session, currentUserId) : []);
+      const peerIds = session ? this.remoteParticipantPeerIds(session, currentUserId) : [];
 
       this.screenShare.syncRemoteScreenShareRequests(peerIds, this.isConnected() && !!session && session.status === 'connected');
     });
@@ -240,13 +265,9 @@ export class PrivateCallComponent {
       this.untrackLocalMic();
     });
 
-    this.screenShare.onRemoteStream
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => this.bumpRemoteStreamRevision());
+    this.screenShare.onRemoteStream.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.bumpRemoteStreamRevision());
 
-    this.screenShare.onPeerDisconnected
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => this.bumpRemoteStreamRevision());
+    this.screenShare.onPeerDisconnected.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.bumpRemoteStreamRevision());
 
     this.destroyRef.onDestroy(() => {
       this.screenShare.syncRemoteScreenShareRequests([], false);
@@ -284,10 +305,38 @@ export class PrivateCallComponent {
     }
 
     this.calls.leaveCall(session.callId);
+    this.calls.closeMobileCallOverlay();
     this.untrackLocalMic();
+
+    if (!this.overlayMode()) {
+      void this.router.navigate(['/dm', session.conversationId]);
+    }
+  }
+
+  minimizeCall(): void {
+    const session = this.session();
+
+    if (!session) {
+      return;
+    }
+
+    if (this.overlayMode()) {
+      this.calls.closeMobileCallOverlay();
+      return;
+    }
+
     void this.router.navigate(['/dm', session.conversationId]);
   }
 
+  onMobileCallSlideChange(event: Event): void {
+    const detail = (event as CustomEvent).detail;
+    const swiper = Array.isArray(detail) ? detail[0] : detail;
+
+    if (this.isMobile() && swiper?.activeIndex === 0) {
+      this.minimizeCall();
+    }
+  }
+
   toggleMute(): void {
     this.voice.toggleMute(!this.isMuted());
     this.broadcastLocalVoiceState();
@@ -378,12 +427,10 @@ export class PrivateCallComponent {
       return false;
     }
 
-    return !!session.participants[userId]?.joined
-      || !!(
-        user.voiceState?.isConnected
-        && user.voiceState.roomId === session.callId
-        && user.voiceState.serverId === session.callId
-      );
+    return (
+      !!session.participants[userId]?.joined ||
+      !!(user.voiceState?.isConnected && user.voiceState.roomId === session.callId && user.voiceState.serverId === session.callId)
+    );
   }
 
   participantIssueLabel(user: User): string | null {
@@ -437,16 +484,18 @@ export class PrivateCallComponent {
       return;
     }
 
-    this.store.dispatch(UsersActions.updateVoiceState({
-      userId: user.id,
-      voiceState: {
-        isConnected: this.isConnected(),
-        isMuted: this.isMuted(),
-        isDeafened: this.isDeafened(),
-        roomId: session.callId,
-        serverId: session.callId
-      }
-    }));
+    this.store.dispatch(
+      UsersActions.updateVoiceState({
+        userId: user.id,
+        voiceState: {
+          isConnected: this.isConnected(),
+          isMuted: this.isMuted(),
+          isDeafened: this.isDeafened(),
+          roomId: session.callId,
+          serverId: session.callId
+        }
+      })
+    );
   }
 
   private remoteParticipantPeerIds(session: DirectCallSession, currentUserId: string): string[] {

toju-app/src/app/features/room/chat-room/chat-room.component.html

@@ -17,6 +17,7 @@
             <div class="flex min-h-0 flex-1 overflow-hidden border-l border-border bg-card">
               <app-rooms-side-panel
                 panelMode="channels"
+                (textChannelSelected)="setMobilePage('main')"
                 class="block h-full w-full"
               />
             </div>
@@ -52,6 +53,20 @@
                   <p class="truncate text-sm font-semibold text-foreground">{{ currentRoom()?.name }}</p>
                 }
               </div>
+              @if (activeCall()) {
+                <button
+                  type="button"
+                  (click)="openActiveCall()"
+                  class="grid h-11 w-11 place-items-center rounded-lg text-emerald-600 transition-colors hover:bg-emerald-500/10 hover:text-emerald-500"
+                  aria-label="Return to call"
+                  title="Return to call"
+                >
+                  <ng-icon
+                    name="lucidePhoneCall"
+                    class="h-5 w-5"
+                  />
+                </button>
+              }
               <button
                 type="button"
                 (click)="setMobilePage('members')"
@@ -208,4 +223,3 @@
     </div>
   }
 </div>
-

toju-app/src/app/features/room/chat-room/chat-room.component.ts

@@ -20,7 +20,8 @@ import {
   lucideUsers,
   lucideMenu,
   lucideX,
-  lucideChevronLeft
+  lucideChevronLeft,
+  lucidePhoneCall
 } from '@ng-icons/lucide';
 
 import { ChatMessagesComponent } from '../../../domains/chat/feature/chat-messages/chat-messages.component';
@@ -38,6 +39,7 @@ import { ViewportService } from '../../../core/platform';
 import { selectIsCurrentUserAdmin } from '../../../store/users/users.selectors';
 import { VoiceWorkspaceService } from '../../../domains/voice-session';
 import { ThemeNodeDirective, ThemeService } from '../../../domains/theme';
+import { DirectCallService } from '../../../domains/direct-call';
 
 /** Mobile-only page identifier within the chat-room view. */
 export type ChatRoomMobilePage = 'channels' | 'main' | 'members';
@@ -77,7 +79,8 @@ interface SwiperElement extends HTMLElement {
       lucideUsers,
       lucideMenu,
       lucideX,
-      lucideChevronLeft
+      lucideChevronLeft,
+      lucidePhoneCall
     })
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -96,6 +99,7 @@ export class ChatRoomComponent {
   private readonly settingsModal = inject(SettingsModalService);
   private readonly theme = inject(ThemeService);
   private readonly viewport = inject(ViewportService);
+  private readonly directCalls = inject(DirectCallService);
   private readonly zone = inject(NgZone);
   private voiceWorkspace = inject(VoiceWorkspaceService);
   private lastSeenChannelId: string | null = null;
@@ -128,6 +132,12 @@ export class ChatRoomComponent {
   });
   isVoiceWorkspaceExpanded = this.voiceWorkspace.isExpanded;
   hasTextChannels = computed(() => this.textChannels().length > 0);
+  activeCall = computed(() => {
+    const currentSession = this.directCalls.currentSession();
+    const visibleSessions = this.directCalls.visibleActiveSessions();
+
+    return visibleSessions.find((session) => session.callId === currentSession?.callId) ?? visibleSessions[0] ?? null;
+  });
   roomLayoutStyles = computed(() => this.theme.getLayoutContainerStyles('roomLayout'));
   channelsPanelLayoutStyles = computed(() => this.theme.getLayoutItemStyles('chatRoomChannelsPanel'));
   mainPanelLayoutStyles = computed(() => this.theme.getLayoutItemStyles('chatRoomMainPanel'));
@@ -209,6 +219,14 @@ export class ChatRoomComponent {
     this.mobilePage.set(page);
   }
 
+  openActiveCall(): void {
+    const call = this.activeCall();
+
+    if (call) {
+      void this.directCalls.openCallView(call.callId);
+    }
+  }
+
   /** Open the settings modal to the Server admin page for the current room. */
   toggleAdminPanel() {
     const room = this.currentRoom();

toju-app/src/app/features/room/rooms-side-panel/rooms-side-panel.component.ts

@@ -5,6 +5,7 @@ import {
   computed,
   input,
   OnDestroy,
+  output,
   signal
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -138,6 +139,7 @@ export class RoomsSidePanelComponent implements OnDestroy {
 
   readonly panelMode = input<PanelMode>('channels');
   readonly showVoiceControls = input(true);
+  readonly textChannelSelected = output<string>();
   showFloatingControls = this.voiceSessionService.showFloatingControls;
   isVoiceWorkspaceExpanded = this.voiceWorkspace.isExpanded;
   onlineUsers = this.store.selectSignal(selectOnlineUsers);
@@ -379,6 +381,7 @@ export class RoomsSidePanelComponent implements OnDestroy {
 
     this.voiceWorkspace.showChat();
     this.store.dispatch(RoomsActions.selectChannel({ channelId }));
+    this.textChannelSelected.emit(channelId);
   }
 
   openChannelContextMenu(evt: MouseEvent, channel: Channel) {

toju-app/src/app/features/room/voice-workspace/voice-workspace-stream-tile/voice-workspace-stream-tile.component.html

@@ -63,15 +63,45 @@
           </div>
         </div>
 
-        @if (!item().isLocal && item().hasAudio) {
+        @if (canControlStreamAudio()) {
+          <div class="flex min-w-32 items-center gap-2 rounded-full border border-white/10 bg-black/35 px-2.5 py-1.5 text-white/75">
+            <button
+              type="button"
+              class="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-white/75 transition hover:bg-white/10 hover:text-white"
+              [title]="muted() ? 'Unmute stream audio' : 'Mute stream audio'"
+              (click)="toggleMuted(); $event.stopPropagation()"
+            >
+              <ng-icon
+                [name]="muted() ? 'lucideVolumeX' : 'lucideVolume2'"
+                class="h-4 w-4"
+              />
+            </button>
+
+            <input
+              type="range"
+              min="0"
+              max="100"
+              [value]="volume()"
+              class="w-20 accent-primary sm:w-28"
+              aria-label="Stream volume"
+              (click)="$event.stopPropagation()"
+              (input)="updateVolume($event)"
+            />
+
+            <span class="w-9 text-right text-xs tabular-nums">{{ muted() ? 'Off' : volume() + '%' }}</span>
+          </div>
+        }
+
+        @if (isMobile() && item().kind === 'screen') {
           <button
             type="button"
             class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-black/45 text-white/75 transition hover:bg-black/60 hover:text-white"
-            [title]="muted() ? 'Unmute stream audio' : 'Mute stream audio'"
-            (click)="toggleMuted(); $event.stopPropagation()"
+            title="Rotate to landscape"
+            aria-label="Rotate to landscape"
+            (click)="enterLandscapeFullscreen($event)"
           >
             <ng-icon
-              [name]="muted() ? 'lucideVolumeX' : 'lucideVolume2'"
+              name="lucideRotateCw"
               class="h-4 w-4"
             />
           </button>
@@ -92,6 +122,72 @@
     </div>
   }
 
+  @if (immersive() && item().kind === 'screen' && !isFullscreen()) {
+    <div class="absolute inset-x-3 bottom-3 z-20 sm:inset-x-5 sm:bottom-5">
+      <div class="mx-auto flex w-full max-w-3xl flex-wrap items-center justify-center gap-2 rounded-2xl border border-white/10 bg-black/55 px-3 py-3 text-white/80 shadow-2xl backdrop-blur-lg sm:gap-3 sm:px-4">
+        @if (canControlStreamAudio()) {
+          <div class="flex min-w-0 flex-1 items-center gap-2 rounded-full bg-white/10 px-2.5 py-2 sm:max-w-md">
+            <button
+              type="button"
+              class="grid h-9 w-9 shrink-0 place-items-center rounded-full text-white/85 transition hover:bg-white/10 hover:text-white"
+              [title]="muted() ? 'Unmute stream audio' : 'Mute stream audio'"
+              [attr.aria-label]="muted() ? 'Unmute stream audio' : 'Mute stream audio'"
+              (click)="toggleMuted(); $event.stopPropagation()"
+            >
+              <ng-icon
+                [name]="muted() ? 'lucideVolumeX' : 'lucideVolume2'"
+                class="h-4 w-4"
+              />
+            </button>
+
+            <input
+              type="range"
+              min="0"
+              max="100"
+              [value]="volume()"
+              class="min-w-0 flex-1 accent-primary"
+              aria-label="Screen share volume"
+              (click)="$event.stopPropagation()"
+              (input)="updateVolume($event)"
+            />
+
+            <span class="w-10 text-right text-xs font-semibold tabular-nums text-white/70">{{ muted() ? 'Off' : volume() + '%' }}</span>
+          </div>
+        } @else {
+          <div class="min-w-0 flex-1 px-2 text-center text-xs font-medium text-white/65 sm:text-left">No screen audio</div>
+        }
+
+        <button
+          type="button"
+          class="grid h-11 w-11 place-items-center rounded-full bg-white/10 text-white transition hover:bg-white/15"
+          [title]="isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'"
+          [attr.aria-label]="isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'"
+          (click)="toggleFullscreen($event)"
+        >
+          <ng-icon
+            name="lucideMaximize"
+            class="h-5 w-5"
+          />
+        </button>
+
+        @if (isMobile()) {
+          <button
+            type="button"
+            class="grid h-11 w-11 place-items-center rounded-full bg-white/10 text-white transition hover:bg-white/15"
+            title="Rotate to landscape"
+            aria-label="Rotate to landscape"
+            (click)="enterLandscapeFullscreen($event)"
+          >
+            <ng-icon
+              name="lucideRotateCw"
+              class="h-5 w-5"
+            />
+          </button>
+        }
+      </div>
+    </div>
+  }
+
   @if (mini()) {
     <div class="absolute inset-x-0 bottom-0 p-2">
       <div class="rounded-xl border border-white/10 bg-black/55 px-2.5 py-2 backdrop-blur-md">

toju-app/src/app/features/room/voice-workspace/voice-workspace-stream-tile/voice-workspace-stream-tile.component.ts

@@ -17,12 +17,14 @@ import {
   lucideMaximize,
   lucideMinimize,
   lucideMonitor,
+  lucideRotateCw,
   lucideVideo,
   lucideVolume2,
   lucideVolumeX
 } from '@ng-icons/lucide';
 
 import { UserAvatarComponent } from '../../../../shared';
+import { ViewportService } from '../../../../core/platform';
 import { VoiceWorkspacePlaybackService } from '../voice-workspace-playback.service';
 import { VoiceWorkspaceStreamItem } from '../voice-workspace.models';
 
@@ -39,6 +41,7 @@ import { VoiceWorkspaceStreamItem } from '../voice-workspace.models';
       lucideMaximize,
       lucideMinimize,
       lucideMonitor,
+      lucideRotateCw,
       lucideVideo,
       lucideVolume2,
       lucideVolumeX
@@ -51,6 +54,7 @@ import { VoiceWorkspaceStreamItem } from '../voice-workspace.models';
 })
 export class VoiceWorkspaceStreamTileComponent implements OnDestroy {
   private readonly workspacePlayback = inject(VoiceWorkspacePlaybackService);
+  private readonly viewport = inject(ViewportService);
   private fullscreenHeaderHideTimeoutId: ReturnType<typeof setTimeout> | null = null;
 
   readonly item = input.required<VoiceWorkspaceStreamItem>();
@@ -64,6 +68,7 @@ export class VoiceWorkspaceStreamTileComponent implements OnDestroy {
   readonly videoRef = viewChild<ElementRef<HTMLVideoElement>>('streamVideo');
 
   readonly isFullscreen = signal(false);
+  readonly isMobile = this.viewport.isMobile;
   readonly showFullscreenHeader = signal(true);
   readonly volume = signal(100);
   readonly muted = signal(false);
@@ -138,6 +143,7 @@ export class VoiceWorkspaceStreamTileComponent implements OnDestroy {
       return;
     }
 
+    this.unlockOrientation();
     this.clearFullscreenHeaderHideTimeout();
     this.showFullscreenHeader.set(true);
   }
@@ -150,6 +156,8 @@ export class VoiceWorkspaceStreamTileComponent implements OnDestroy {
     if (tile && document.fullscreenElement === tile) {
       void document.exitFullscreen().catch(() => {});
     }
+
+    this.unlockOrientation();
   }
 
   canToggleFullscreen(): boolean {
@@ -168,22 +176,38 @@ export class VoiceWorkspaceStreamTileComponent implements OnDestroy {
     event.preventDefault();
     event.stopPropagation();
 
+    await this.toggleFullscreen();
+  }
+
+  async toggleFullscreen(event?: Event): Promise<void> {
+    event?.preventDefault();
+    event?.stopPropagation();
+
     if (!this.canToggleFullscreen()) {
       return;
     }
 
-    const tile = this.tileRef()?.nativeElement;
-
-    if (!tile || !tile.requestFullscreen) {
-      return;
-    }
-
-    if (document.fullscreenElement === tile) {
+    if (this.isFullscreen()) {
       await document.exitFullscreen().catch(() => {});
       return;
     }
 
-    await tile.requestFullscreen().catch(() => {});
+    await this.enterFullscreen();
+  }
+
+  async enterLandscapeFullscreen(event?: Event): Promise<void> {
+    event?.preventDefault();
+    event?.stopPropagation();
+
+    if (!this.canToggleFullscreen()) {
+      return;
+    }
+
+    if (!this.isFullscreen()) {
+      await this.enterFullscreen();
+    }
+
+    await this.lockLandscape();
   }
 
   async exitFullscreen(event?: Event): Promise<void> {
@@ -263,6 +287,41 @@ export class VoiceWorkspaceStreamTileComponent implements OnDestroy {
       : 'Your preview stays muted locally to avoid audio feedback.';
   }
 
+  canControlStreamAudio(): boolean {
+    const item = this.item();
+
+    return !item.isLocal && item.hasAudio;
+  }
+
+  private async enterFullscreen(): Promise<void> {
+    const tile = this.tileRef()?.nativeElement;
+
+    if (tile?.requestFullscreen) {
+      await tile.requestFullscreen().catch(() => {});
+      return;
+    }
+
+    const video = this.videoRef()?.nativeElement as WebKitFullscreenVideoElement | undefined;
+
+    if (video?.webkitSupportsFullscreen && video.webkitEnterFullscreen) {
+      video.webkitEnterFullscreen();
+    }
+  }
+
+  private async lockLandscape(): Promise<void> {
+    if (!this.isMobile()) {
+      return;
+    }
+
+    const orientation = screen.orientation as LockableScreenOrientation | undefined;
+
+    await orientation?.lock?.('landscape').catch(() => {});
+  }
+
+  private unlockOrientation(): void {
+    screen.orientation?.unlock?.();
+  }
+
   private scheduleFullscreenHeaderHide(): void {
     this.clearFullscreenHeaderHideTimeout();
 
@@ -286,3 +345,12 @@ export class VoiceWorkspaceStreamTileComponent implements OnDestroy {
     this.fullscreenHeaderHideTimeoutId = null;
   }
 }
+
+interface WebKitFullscreenVideoElement extends HTMLVideoElement {
+  webkitEnterFullscreen?: () => void;
+  webkitSupportsFullscreen?: boolean;
+}
+
+interface LockableScreenOrientation extends ScreenOrientation {
+  lock?: (orientation: 'landscape') => Promise<void>;
+}

toju-app/src/app/features/servers/servers-rail/servers-rail.component.html

@@ -1,21 +1,19 @@
-<nav class="relative flex h-full w-full flex-col items-center gap-2 border-r border-border bg-secondary/35 px-2 py-3">
+<nav class="relative flex h-full min-w-14 flex-col items-center gap-2 border-r border-border bg-secondary/35 px-0 py-3 md:min-w-0 md:w-full">
   <!-- Create button -->
   <button
     appThemeNode="serversRailCreateButton"
     type="button"
-    class="flex h-10 w-10 items-center justify-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90"
+    class="flex h-11 w-11 items-center justify-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90 md:h-10 md:w-10"
     title="Create Server"
     (click)="createServer()"
   >
     <ng-icon
       name="lucidePlus"
-      class="w-5 h-5"
+      class="h-[22px] w-[22px] md:h-5 md:w-5"
     />
   </button>
 
-  @if (dmRailComponent()) {
-    <ng-container *ngComponentOutlet="dmRailComponent()" />
-  }
+  <app-dm-rail />
 
   @for (call of directCalls.visibleActiveSessions(); track call.callId + ':' + $index) {
     <div class="group/call relative flex w-full justify-center">
@@ -27,7 +25,7 @@
 
       <button
         type="button"
-        class="relative z-10 grid h-10 w-10 place-items-center overflow-hidden rounded-xl transition-colors hover:rounded-lg"
+        class="relative z-10 grid h-11 w-11 place-items-center overflow-hidden rounded-xl transition-colors hover:rounded-lg md:h-10 md:w-10"
         [ngClass]="
           callAvatarUrls(call).length > 0
             ? 'bg-emerald-950 text-white shadow-sm hover:bg-emerald-900'
@@ -61,7 +59,7 @@
 
         <ng-icon
           name="lucidePhone"
-          class="relative z-10 h-5 w-5 drop-shadow"
+          class="relative z-10 h-[22px] w-[22px] drop-shadow md:h-5 md:w-5"
         />
       </button>
     </div>
@@ -83,7 +81,7 @@
         <button
           appThemeNode="serversRailItem"
           type="button"
-          class="relative z-10 flex h-10 w-10 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent transition-[border-radius,box-shadow,background-color] duration-100 hover:rounded-lg hover:bg-card"
+          class="relative z-10 flex h-11 w-11 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent transition-[border-radius,box-shadow,background-color] duration-100 hover:rounded-lg hover:bg-card md:h-10 md:w-10"
           [ngClass]="isSelectedRoom(room) ? 'rounded-lg ring-2 ring-primary/40 bg-primary/10' : 'rounded-xl bg-card'"
           [title]="room.name"
           [attr.aria-current]="isSelectedRoom(room) ? 'page' : null"

toju-app/src/app/features/servers/servers-rail/servers-rail.component.ts

@@ -2,7 +2,6 @@
 import {
   Component,
   DestroyRef,
-  Type,
   computed,
   effect,
   inject,
@@ -36,6 +35,7 @@ import { RoomsActions } from '../../../store/rooms/rooms.actions';
 import { DatabaseService } from '../../../infrastructure/persistence';
 import { NotificationsFacade } from '../../../domains/notifications';
 import { DirectCallService, DirectCallSession } from '../../../domains/direct-call';
+import { DmRailComponent } from '../../../domains/direct-message/feature/dm-rail/dm-rail.component';
 import { type ServerInfo, ServerDirectoryFacade } from '../../../domains/server-directory';
 import { ThemeNodeDirective } from '../../../domains/theme';
 import { hasRoomBanForUser } from '../../../domains/access-control';
@@ -54,6 +54,7 @@ import {
     NgIcon,
     ConfirmDialogComponent,
     ContextMenuComponent,
+    DmRailComponent,
     LeaveServerDialogComponent,
     ThemeNodeDirective,
     UserBarComponent
@@ -71,15 +72,16 @@ export class ServersRailComponent {
   private serverDirectory = inject(ServerDirectoryFacade);
   private destroyRef = inject(DestroyRef);
   private banLookupRequestVersion = 0;
+  private visibleSavedRoomCache: Room[] = [];
   private savedRoomJoinRequests = new Subject<{ room: Room; password?: string }>();
   savedRooms = this.store.selectSignal(selectSavedRooms);
   currentRoom = this.store.selectSignal(selectCurrentRoom);
 
   showMenu = signal(false);
-  dmRailComponent = signal<Type<unknown> | null>(null);
   menuX = signal(72);
   menuY = signal(100);
   contextRoom = signal<Room | null>(null);
+  optimisticSelectedRoomId = signal<string | null>(null);
   showLeaveConfirm = signal(false);
   currentUser = this.store.selectSignal(selectCurrentUser);
   onlineUsers = this.store.selectSignal(selectOnlineUsers);
@@ -94,9 +96,9 @@ export class ServersRailComponent {
   isOnDirectMessage = toSignal(
     this.router.events.pipe(
       filter((navigationEvent): navigationEvent is NavigationEnd => navigationEvent instanceof NavigationEnd),
-      map((navigationEvent) => navigationEvent.urlAfterRedirects.startsWith('/dm/') || navigationEvent.urlAfterRedirects.startsWith('/pm/'))
+      map((navigationEvent) => this.isDirectMessageUrl(navigationEvent.urlAfterRedirects))
     ),
-    { initialValue: this.router.url.startsWith('/dm/') || this.router.url.startsWith('/pm/') }
+    { initialValue: this.isDirectMessageUrl(this.router.url) }
   );
   isOnCall = toSignal(
     this.router.events.pipe(
@@ -138,7 +140,7 @@ export class ServersRailComponent {
   passwordPromptRoom = signal<Room | null>(null);
   joinPassword = signal('');
   joinPasswordError = signal<string | null>(null);
-  visibleSavedRooms = computed(() => this.savedRooms().filter((room) => !this.isRoomMarkedBanned(room)));
+  visibleSavedRooms = computed(() => this.stabilizeVisibleSavedRooms(this.savedRooms().filter((room) => !this.isRoomMarkedBanned(room))));
   voicePresenceByRoom = computed(() => {
     const presence: Record<string, number> = {};
     const seenByRoom = new Map<string, Set<string>>();
@@ -181,10 +183,6 @@ export class ServersRailComponent {
   });
 
   constructor() {
-    void import('../../../domains/direct-message/feature/dm-rail/dm-rail.component').then((module) => {
-      this.dmRailComponent.set(module.DmRailComponent);
-    });
-
     effect(() => {
       const rooms = this.savedRooms();
       const currentUser = this.currentUser();
@@ -192,6 +190,18 @@ export class ServersRailComponent {
       void this.refreshBannedLookup(rooms, currentUser ?? null);
     });
 
+    effect(() => {
+      const optimisticRoomId = this.optimisticSelectedRoomId();
+
+      if (!optimisticRoomId) {
+        return;
+      }
+
+      if (this.currentRoom()?.id === optimisticRoomId && !this.isOnDirectMessage() && !this.isOnCall()) {
+        this.optimisticSelectedRoomId.set(null);
+      }
+    });
+
     this.savedRoomJoinRequests
       .pipe(
         switchMap(({ room, password }) => this.requestJoinInBackground(room, password)),
@@ -214,6 +224,8 @@ export class ServersRailComponent {
   createServer(): void {
     const voiceServerId = this.voiceSession.getVoiceServerId();
 
+    this.optimisticSelectedRoomId.set(null);
+
     if (voiceServerId) {
       this.voiceSession.setViewingVoiceServer(false);
     }
@@ -222,6 +234,7 @@ export class ServersRailComponent {
   }
 
   joinSavedRoom(room: Room): void {
+    const targetRoom = this.savedRooms().find((savedRoom) => savedRoom.id === room.id) ?? room;
     const currentUserId = localStorage.getItem('metoyou_currentUserId');
 
     if (!currentUserId) {
@@ -229,18 +242,20 @@ export class ServersRailComponent {
       return;
     }
 
-    if (this.isRoomMarkedBanned(room)) {
-      this.bannedServerName.set(room.name);
+    if (this.isRoomMarkedBanned(targetRoom)) {
+      this.bannedServerName.set(targetRoom.name);
       this.showBannedDialog.set(true);
       return;
     }
 
-    this.activateSavedRoom(room);
-    this.savedRoomJoinRequests.next({ room });
+    this.optimisticSelectedRoomId.set(targetRoom.id);
+    this.activateSavedRoom(targetRoom);
+    this.savedRoomJoinRequests.next({ room: targetRoom });
   }
 
   openCall(callId: string): void {
-    void this.router.navigate(['/call', callId]);
+    this.optimisticSelectedRoomId.set(null);
+    void this.directCalls.openCallView(callId);
   }
 
   isSelectedCall(callIndex: number): boolean {
@@ -335,6 +350,7 @@ export class ServersRailComponent {
     );
 
     if (isCurrentRoom) {
+      this.optimisticSelectedRoomId.set(null);
       this.router.navigate(['/search']);
     }
 
@@ -378,9 +394,44 @@ export class ServersRailComponent {
       return false;
     }
 
+    const optimisticRoomId = this.optimisticSelectedRoomId();
+
+    if (optimisticRoomId) {
+      return optimisticRoomId === room.id;
+    }
+
     return this.currentRoom()?.id === room.id;
   }
 
+  private stabilizeVisibleSavedRooms(nextRooms: Room[]): Room[] {
+    const previousById = new Map(this.visibleSavedRoomCache.map((room) => [room.id, room]));
+    const stabilizedRooms = nextRooms.map((room) => {
+      const previousRoom = previousById.get(room.id);
+
+      return previousRoom && this.hasSameRailRoomView(previousRoom, room) ? previousRoom : room;
+    });
+
+    if (
+      stabilizedRooms.length === this.visibleSavedRoomCache.length
+      && stabilizedRooms.every((room, index) => room === this.visibleSavedRoomCache[index])
+    ) {
+      return this.visibleSavedRoomCache;
+    }
+
+    this.visibleSavedRoomCache = stabilizedRooms;
+    return stabilizedRooms;
+  }
+
+  private hasSameRailRoomView(previousRoom: Room, nextRoom: Room): boolean {
+    return previousRoom.id === nextRoom.id && previousRoom.name === nextRoom.name && previousRoom.icon === nextRoom.icon;
+  }
+
+  private isDirectMessageUrl(url: string): boolean {
+    const path = url.split(/[?#]/, 1)[0];
+
+    return path === '/dm' || path.startsWith('/dm/') || path === '/pm' || path.startsWith('/pm/');
+  }
+
   private async refreshBannedLookup(rooms: Room[], currentUser: User | null): Promise<void> {
     const requestVersion = ++this.banLookupRequestVersion;
 
@@ -492,6 +543,7 @@ export class ServersRailComponent {
 
     if (errorCode === 'BANNED') {
       this.closePasswordDialog();
+      this.optimisticSelectedRoomId.set(null);
       this.bannedRoomLookup.update((lookup) => ({
         ...lookup,
         [room.id]: true

toju-app/src/app/infrastructure/persistence/README.md

@@ -57,7 +57,7 @@ The persisted `rooms` store is a local cache of room metadata. Channel topology
 
 ### Browser (IndexedDB)
 
-All operations run inside IndexedDB transactions in the renderer thread. The browser backend resolves the active database name from the logged-in user, reusing a legacy shared database only when it already belongs to that same account. Queries like `getMessages` pull all messages for a room via the `roomId` index, sort them by timestamp in JS, then apply limit/offset. Deleted messages are normalised on read (content replaced with a sentinel string).
+All operations run inside IndexedDB transactions in the renderer thread. The browser backend resolves the active database name from the logged-in user, reusing a legacy shared database only when it already belongs to that same account. Queries like `getMessages` pull all messages for a room via the `roomId` index, optionally filter to a text channel, sort them by timestamp in JS, then apply limit/offset. Deleted messages are normalised on read (content replaced with a sentinel string).
 
 ```mermaid
 sequenceDiagram
@@ -66,11 +66,11 @@ sequenceDiagram
     participant BDB as BrowserDatabaseService
     participant IDB as IndexedDB
 
-    Eff->>DB: getMessages(roomId, 50)
-    DB->>BDB: getMessages(roomId, 50)
+    Eff->>DB: getMessages(roomId, 50, 0, channelId?)
+    DB->>BDB: getMessages(roomId, 50, 0, channelId?)
     BDB->>IDB: tx.objectStore("messages")<br/>.index("roomId").getAll(roomId)
     IDB-->>BDB: Message[]
-    Note over BDB: Sort by timestamp, slice, normalise
+    Note over BDB: Optional channel filter, sort, slice, normalise
     BDB-->>DB: Message[]
     DB-->>Eff: Message[]
 ```

toju-app/src/app/infrastructure/persistence/browser-database.service.ts

@@ -66,31 +66,48 @@ export class BrowserDatabaseService {
   }
 
   /**
-   * Retrieve messages for a room, sorted oldest-first.
+    * Retrieve the latest messages for a room, sorted oldest-first for display.
    * @param roomId - Target room.
    * @param limit  - Maximum number of messages to return.
-   * @param offset - Number of messages to skip (for pagination).
+    * @param offset - Number of newer messages to skip (for pagination).
+   * @param channelId - Optional channel scope; 'general' includes null/empty.
+   * @param beforeTimestamp - Optional cursor; only messages strictly older
+   *                          than this timestamp are returned. Used for
+   *                          scroll-up history pagination.
    */
-  async getMessages(roomId: string, limit = 100, offset = 0): Promise<Message[]> {
+  async getMessages(
+    roomId: string,
+    limit = 100,
+    offset = 0,
+    channelId?: string,
+    beforeTimestamp?: number
+  ): Promise<Message[]> {
     const allRoomMessages = await this.getAllFromIndex<Message>(
       STORE_MESSAGES, 'roomId', roomId
     );
+    const scopedMessages = channelId
+      ? allRoomMessages.filter((message) => (message.channelId || 'general') === channelId)
+      : allRoomMessages;
+    const cursorFiltered = beforeTimestamp === undefined
+      ? scopedMessages
+      : scopedMessages.filter((message) => message.timestamp < beforeTimestamp);
+    const sortedMessages = cursorFiltered.sort((first, second) => first.timestamp - second.timestamp);
+    const endIndex = Math.max(sortedMessages.length - offset, 0);
+    const startIndex = Math.max(endIndex - limit, 0);
+    const messages = sortedMessages.slice(startIndex, endIndex);
 
-    return allRoomMessages
-      .sort((first, second) => first.timestamp - second.timestamp)
-      .slice(offset, offset + limit)
-      .map((message) => this.normaliseMessage(message));
+    return this.hydrateMessages(messages);
   }
 
   async getMessagesSince(roomId: string, sinceTimestamp: number): Promise<Message[]> {
     const allRoomMessages = await this.getAllFromIndex<Message>(
       STORE_MESSAGES, 'roomId', roomId
     );
-
-    return allRoomMessages
+    const messages = allRoomMessages
       .filter((message) => message.timestamp > sinceTimestamp)
-      .sort((first, second) => first.timestamp - second.timestamp)
-      .map((message) => this.normaliseMessage(message));
+      .sort((first, second) => first.timestamp - second.timestamp);
+
+    return this.hydrateMessages(messages);
   }
 
   /** Delete a message by its ID. */
@@ -112,7 +129,11 @@ export class BrowserDatabaseService {
   async getMessageById(messageId: string): Promise<Message | null> {
     const message = await this.get<Message>(STORE_MESSAGES, messageId);
 
-    return message ? this.normaliseMessage(message) : null;
+    if (!message) {
+      return null;
+    }
+
+    return (await this.hydrateMessages([message]))[0] ?? null;
   }
 
   /** Remove every message belonging to a room. */
@@ -520,6 +541,47 @@ export class BrowserDatabaseService {
     await this.awaitTransaction(transaction);
   }
 
+  private async hydrateMessages(messages: Message[]): Promise<Message[]> {
+    if (messages.length === 0) {
+      return [];
+    }
+
+    const reactionsByMessageId = await this.loadReactionsForMessages(messages.map((message) => message.id));
+
+    return messages.map((message) => this.normaliseMessage({
+      ...message,
+      reactions: reactionsByMessageId.get(message.id) ?? message.reactions ?? []
+    }));
+  }
+
+  private async loadReactionsForMessages(messageIds: readonly string[]): Promise<Map<string, Reaction[]>> {
+    const messageIdSet = new Set(messageIds.filter((messageId) => messageId.trim().length > 0));
+    const reactionsByMessageId = new Map<string, Reaction[]>();
+
+    if (messageIdSet.size === 0) {
+      return reactionsByMessageId;
+    }
+
+    const allReactions = await this.getAll<Reaction>(STORE_REACTIONS);
+
+    for (const reaction of allReactions) {
+      if (!messageIdSet.has(reaction.messageId)) {
+        continue;
+      }
+
+      const reactions = reactionsByMessageId.get(reaction.messageId) ?? [];
+
+      reactions.push(reaction);
+      reactionsByMessageId.set(reaction.messageId, reactions);
+    }
+
+    for (const reactions of reactionsByMessageId.values()) {
+      reactions.sort((first, second) => first.timestamp - second.timestamp);
+    }
+
+    return reactionsByMessageId;
+  }
+
   private normaliseMessage(message: Message): Message {
     if (message.content === DELETED_MESSAGE_CONTENT) {
       return { ...message,

toju-app/src/app/infrastructure/persistence/database.service.ts

@@ -49,8 +49,19 @@ export class DatabaseService {
   /** Persist a single chat message. */
   saveMessage(message: Message) { return this.backend.saveMessage(message); }
 
-  /** Retrieve messages for a room with optional pagination. */
-  getMessages(roomId: string, limit = 100, offset = 0) { return this.backend.getMessages(roomId, limit, offset); }
+  /** Retrieve the latest messages for a room or channel with optional pagination.
+   *
+   * When `beforeTimestamp` is provided, only messages strictly older than that
+   * timestamp are returned. This is how scroll-up history loading paginates
+   * backwards through the DB without holding the whole history in memory.
+   */
+  getMessages(
+    roomId: string,
+    limit = 100,
+    offset = 0,
+    channelId?: string,
+    beforeTimestamp?: number
+  ) { return this.backend.getMessages(roomId, limit, offset, channelId, beforeTimestamp); }
 
   /** Retrieve messages newer than a given timestamp for a room. */
   getMessagesSince(roomId: string, sinceTimestamp: number) { return this.backend.getMessagesSince(roomId, sinceTimestamp); }

toju-app/src/app/infrastructure/persistence/electron-database.service.ts

@@ -37,14 +37,26 @@ export class ElectronDatabaseService {
   }
 
   /**
-   * Retrieve messages for a room, sorted oldest-first.
+    * Retrieve the latest messages for a room, sorted oldest-first for display.
    *
    * @param roomId - Target room.
    * @param limit  - Maximum number of messages to return.
-   * @param offset - Number of messages to skip (for pagination).
+    * @param offset - Number of newer messages to skip (for pagination).
+   * @param channelId - Optional channel scope; 'general' includes null/empty.
+   * @param beforeTimestamp - Optional cursor; only messages strictly older
+   *                          than this timestamp are returned (scroll-up paging).
    */
-  getMessages(roomId: string, limit = 100, offset = 0): Promise<Message[]> {
-    return this.api.query<Message[]>({ type: 'get-messages', payload: { roomId, limit, offset } });
+  getMessages(
+    roomId: string,
+    limit = 100,
+    offset = 0,
+    channelId?: string,
+    beforeTimestamp?: number
+  ): Promise<Message[]> {
+    return this.api.query<Message[]>({
+      type: 'get-messages',
+      payload: { roomId, limit, offset, channelId, beforeTimestamp }
+    });
   }
 
   getMessagesSince(roomId: string, sinceTimestamp: number): Promise<Message[]> {

toju-app/src/app/infrastructure/realtime/README.md

@@ -250,7 +250,7 @@ Profile avatar sync follows attachment-style chunk transport plus server-icon-st
 
 Every 5 seconds a PING message is sent to each peer. The peer responds with PONG carrying the original timestamp, and the round-trip latency is stored in a signal.
 
-Data-channel failures are treated as control-plane failures, not proof that RTP audio has stopped. When an open channel reports a non-fatal error, the client requests a fresh voice-state snapshot over that same channel. When the channel closes or cannot carry the resync request, the peer manager waits a short grace period so any still-flowing audio is not interrupted by a transient event. If the `RTCPeerConnection` is still connected after that grace period, the elected initiator replaces only the data channel in-place and preserves the media transport. Full peer recreation is reserved for cases where the media transport is no longer connected or the in-place control-channel repair fails.
+Data-channel failures are treated as control-plane failures. When an open channel reports a non-fatal error, the client requests a fresh voice-state snapshot over that same channel. When the channel is already closed there is no recovery on it, so the peer manager acts immediately: the deterministic initiator renegotiates a new `RTCDataChannel` on the existing `RTCPeerConnection` (preserving audio/video transport), the non-initiator briefly waits for that replacement and then forces a full peer rebuild if it does not arrive, and a peer whose `RTCPeerConnection` is no longer in `connected` state is recreated immediately through the normal deterministic reconnect path. A closing-but-not-yet-closed channel still waits a short grace period in case the underlying transport flips back. Either way, the rebuild heals chat, state sync, voice, camera, and screen-share transport together instead of preserving a media connection whose control channel can no longer coordinate peer state.
 
 ## Media pipeline
 

toju-app/src/app/infrastructure/realtime/peer-connection-manager/recovery/peer-recovery.spec.ts

@@ -13,7 +13,7 @@ describe('peer recovery', () => {
     vi.useRealTimers();
   });
 
-  it('waits a short grace period before replacing a closed data channel in place', () => {
+  it('recreates a peer immediately when the data channel is already closed', () => {
     vi.useFakeTimers();
 
     const channel = createDataChannel('closed');
@@ -24,29 +24,28 @@ describe('peer recovery', () => {
 
     scheduleDataChannelRecovery(context, 'bob', channel, 'close', handlers);
 
+    expect(handlers.removePeer).toHaveBeenCalledWith('bob', { preserveReconnectState: true });
+    expect(handlers.createPeerConnection).toHaveBeenCalledWith('bob', true);
+    expect(handlers.createAndSendOffer).toHaveBeenCalledWith('bob');
+    expect(context.state.dataChannelRecoveryTimers.has('bob')).toBe(false);
+  });
+
+  it('waits a short grace period before recreating a peer with a closing data channel', () => {
+    vi.useFakeTimers();
+
+    const channel = createDataChannel('closing');
+    const context = createContext('alice');
+    const handlers = createRecoveryHandlers(context);
+
+    context.state.activePeerConnections.set('bob', createPeerData(channel, 'connected'));
+
+    scheduleDataChannelRecovery(context, 'bob', channel, 'close', handlers);
+
     vi.advanceTimersByTime(DATA_CHANNEL_RECOVERY_GRACE_MS - 1);
     expect(handlers.removePeer).not.toHaveBeenCalled();
     expect(handlers.createPeerConnection).not.toHaveBeenCalled();
 
     vi.advanceTimersByTime(1);
-    expect(handlers.replaceDataChannel).toHaveBeenCalledWith('bob', channel);
-    expect(handlers.removePeer).not.toHaveBeenCalled();
-    expect(handlers.createPeerConnection).not.toHaveBeenCalled();
-    expect(handlers.createAndSendOffer).not.toHaveBeenCalled();
-  });
-
-  it('falls back to full peer recreation when in-place data channel replacement fails', () => {
-    vi.useFakeTimers();
-
-    const channel = createDataChannel('closed');
-    const context = createContext('alice');
-    const handlers = createRecoveryHandlers(context);
-
-    handlers.replaceDataChannel.mockReturnValueOnce(false);
-    context.state.activePeerConnections.set('bob', createPeerData(channel, 'connected'));
-
-    scheduleDataChannelRecovery(context, 'bob', channel, 'close', handlers);
-    vi.advanceTimersByTime(DATA_CHANNEL_RECOVERY_GRACE_MS);
 
     expect(handlers.removePeer).toHaveBeenCalledWith('bob', { preserveReconnectState: true });
     expect(handlers.createPeerConnection).toHaveBeenCalledWith('bob', true);
@@ -56,7 +55,7 @@ describe('peer recovery', () => {
   it('does not recreate a peer when a replacement data channel is adopted before the grace expires', () => {
     vi.useFakeTimers();
 
-    const staleChannel = createDataChannel('closed');
+    const staleChannel = createDataChannel('closing');
     const replacementChannel = createDataChannel(DATA_CHANNEL_STATE_OPEN);
     const context = createContext('alice');
     const handlers = createRecoveryHandlers(context);
@@ -90,7 +89,7 @@ describe('peer recovery', () => {
     expect(handlers.createPeerConnection).not.toHaveBeenCalled();
   });
 
-  it('preserves a connected non-initiator peer while waiting for the remote initiator to replace the channel', () => {
+  it('recreates a connected non-initiator peer and waits for the remote initiator offer', () => {
     vi.useFakeTimers();
 
     const channel = createDataChannel('closed');
@@ -99,11 +98,10 @@ describe('peer recovery', () => {
 
     context.state.activePeerConnections.set('bob', createPeerData(channel, 'connected', false));
     scheduleDataChannelRecovery(context, 'bob', channel, 'close', handlers);
-    vi.advanceTimersByTime(DATA_CHANNEL_RECOVERY_GRACE_MS);
 
-    expect(handlers.removePeer).not.toHaveBeenCalled();
+    expect(handlers.removePeer).toHaveBeenCalledWith('bob', { preserveReconnectState: true });
     expect(handlers.replaceDataChannel).not.toHaveBeenCalled();
-    expect(handlers.createPeerConnection).not.toHaveBeenCalled();
+    expect(handlers.createPeerConnection).toHaveBeenCalledWith('bob', false);
     expect(handlers.createAndSendOffer).not.toHaveBeenCalled();
   });
 

toju-app/src/app/infrastructure/realtime/peer-connection-manager/recovery/peer-recovery.ts

@@ -154,6 +154,18 @@ export function scheduleDataChannelRecovery(
   if (channel.readyState === DATA_CHANNEL_STATE_OPEN)
     return;
 
+  if (channel.readyState === 'closed') {
+    logger.warn('[data-channel] Control channel closed; reconnecting peer immediately', {
+      channelLabel: channel.label,
+      connectionState: peerData.connection.connectionState,
+      peerId,
+      reason
+    });
+
+    repairUnavailableDataChannel(context, peerId, channel, reason, handlers);
+    return;
+  }
+
   if (state.dataChannelRecoveryTimers.has(peerId))
     return;
 
@@ -183,35 +195,42 @@ export function scheduleDataChannelRecovery(
       reason
     });
 
-    if (latestPeerData.connection.connectionState === CONNECTION_STATE_CONNECTED) {
-      if (latestPeerData.isInitiator && handlers.replaceDataChannel(peerId, channel)) {
-        logger.info('[data-channel] Replaced control channel without recreating media transport', {
-          peerId,
-          reason
-        });
-
-        return;
-      }
-
-      if (!latestPeerData.isInitiator) {
-        logger.info('[data-channel] Waiting for initiator to replace control channel; preserving media transport', {
-          peerId,
-          reason
-        });
-
-        return;
-      }
-    }
-
-    trackDisconnectedPeer(state, peerId);
-    handlers.removePeer(peerId, { preserveReconnectState: true });
-    attemptPeerReconnect(context, peerId, handlers);
-    schedulePeerReconnect(context, peerId, handlers);
+    repairUnavailableDataChannel(context, peerId, channel, reason, handlers);
   }, DATA_CHANNEL_RECOVERY_GRACE_MS);
 
   state.dataChannelRecoveryTimers.set(peerId, timer);
 }
 
+function repairUnavailableDataChannel(
+  context: PeerConnectionManagerContext,
+  peerId: string,
+  channel: RTCDataChannel,
+  reason: string,
+  handlers: RecoveryHandlers
+): void {
+  const { logger, state } = context;
+  const peerData = state.activePeerConnections.get(peerId);
+
+  if (!peerData || peerData.dataChannel !== channel)
+    return;
+
+  if (peerData.dataChannel?.readyState === DATA_CHANNEL_STATE_OPEN)
+    return;
+
+  logger.warn('[data-channel] Recreating peer transport after control channel failure', {
+    channelLabel: channel.label,
+    connectionState: peerData.connection.connectionState,
+    peerId,
+    readyState: peerData.dataChannel?.readyState ?? null,
+    reason
+  });
+
+  trackDisconnectedPeer(state, peerId);
+  handlers.removePeer(peerId, { preserveReconnectState: true });
+  attemptPeerReconnect(context, peerId, handlers);
+  schedulePeerReconnect(context, peerId, handlers);
+}
+
 export function schedulePeerDisconnectRecovery(
   context: PeerConnectionManagerContext,
   peerId: string,

toju-app/src/app/shared/components/profile-card/profile-card-mobile.component.html

@@ -15,7 +15,7 @@
     class="h-24 bg-gradient-to-r from-primary/30 to-primary/10"
   ></div>
 
-  <div class="-mt-12 flex flex-col items-center px-6">
+  <div class="-mt-16 flex flex-col items-center px-6">
     <div class="relative">
       <button
         type="button"
@@ -26,7 +26,7 @@
         <app-user-avatar
           [name]="profileUser.displayName"
           [avatarUrl]="profileUser.avatarUrl"
-          size="xl"
+          size="2xl"
           [status]="profileUser.status"
           [showStatusBadge]="true"
           ringClass="ring-4 ring-card"
@@ -34,11 +34,11 @@
       </button>
       @if (isEditable) {
         <span
-          class="pointer-events-none absolute bottom-1 right-1 flex h-7 w-7 items-center justify-center rounded-full border-2 border-card bg-primary text-primary-foreground shadow"
+          class="pointer-events-none absolute bottom-2 right-2 flex h-9 w-9 items-center justify-center rounded-full border-2 border-card bg-primary text-primary-foreground shadow"
         >
           <ng-icon
             name="lucideCamera"
-            class="h-3.5 w-3.5"
+            class="h-4 w-4"
           />
         </span>
       }

toju-app/src/app/shared/components/user-avatar/user-avatar.component.ts

@@ -16,29 +16,42 @@ import { UserStatus } from '../../../shared-kernel';
 export class UserAvatarComponent {
   name = input.required<string>();
   avatarUrl = input<string | undefined | null>();
-  size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('sm');
+  size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>('sm');
   ringClass = input<string>('');
   status = input<UserStatus | undefined>();
   showStatusBadge = input(false);
 
   statusBadgeColor = computed(() => {
     switch (this.status()) {
-      case 'online': return 'bg-green-500';
-      case 'away': return 'bg-yellow-500';
-      case 'busy': return 'bg-red-500';
-      case 'offline': return 'bg-gray-500';
-      case 'disconnected': return 'bg-gray-500';
-      default: return 'bg-gray-500';
+      case 'online':
+        return 'bg-green-500';
+      case 'away':
+        return 'bg-yellow-500';
+      case 'busy':
+        return 'bg-red-500';
+      case 'offline':
+        return 'bg-gray-500';
+      case 'disconnected':
+        return 'bg-gray-500';
+      default:
+        return 'bg-gray-500';
     }
   });
 
   statusBadgeSizeClass = computed(() => {
     switch (this.size()) {
-      case 'xs': return 'w-2 h-2';
-      case 'sm': return 'w-3 h-3';
-      case 'md': return 'w-3.5 h-3.5';
-      case 'lg': return 'w-4 h-4';
-      case 'xl': return 'w-4.5 h-4.5';
+      case 'xs':
+        return 'w-2 h-2';
+      case 'sm':
+        return 'w-3 h-3';
+      case 'md':
+        return 'w-3.5 h-3.5';
+      case 'lg':
+        return 'w-4 h-4';
+      case 'xl':
+        return 'w-4.5 h-4.5';
+      case '2xl':
+        return 'w-6 h-6';
     }
   });
 
@@ -49,31 +62,52 @@ export class UserAvatarComponent {
 
   sizeClasses(): string {
     switch (this.size()) {
-      case 'xs': return 'w-7 h-7';
-      case 'sm': return 'w-8 h-8';
-      case 'md': return 'w-10 h-10';
-      case 'lg': return 'w-12 h-12';
-      case 'xl': return 'w-16 h-16';
+      case 'xs':
+        return 'w-7 h-7';
+      case 'sm':
+        return 'w-8 h-8';
+      case 'md':
+        return 'w-10 h-10';
+      case 'lg':
+        return 'w-12 h-12';
+      case 'xl':
+        return 'w-16 h-16';
+      case '2xl':
+        return 'w-32 h-32';
     }
   }
 
   sizePx(): number {
     switch (this.size()) {
-      case 'xs': return 28;
-      case 'sm': return 32;
-      case 'md': return 40;
-      case 'lg': return 48;
-      case 'xl': return 64;
+      case 'xs':
+        return 28;
+      case 'sm':
+        return 32;
+      case 'md':
+        return 40;
+      case 'lg':
+        return 48;
+      case 'xl':
+        return 64;
+      case '2xl':
+        return 128;
     }
   }
 
   textClass(): string {
     switch (this.size()) {
-      case 'xs': return 'text-xs';
-      case 'sm': return 'text-sm';
-      case 'md': return 'text-base font-semibold';
-      case 'lg': return 'text-lg font-semibold';
-      case 'xl': return 'text-xl font-semibold';
+      case 'xs':
+        return 'text-xs';
+      case 'sm':
+        return 'text-sm';
+      case 'md':
+        return 'text-base font-semibold';
+      case 'lg':
+        return 'text-lg font-semibold';
+      case 'xl':
+        return 'text-xl font-semibold';
+      case '2xl':
+        return 'text-4xl font-semibold';
     }
   }
 }

toju-app/src/app/store/messages/messages-incoming.handlers.spec.ts

@@ -95,7 +95,7 @@ describe('dispatchIncomingMessage room-scoped sync', () => {
 
     expect(getMessages).toHaveBeenCalledWith('room-b', expect.any(Number), 0);
     expect(sendToPeer).toHaveBeenCalledWith('peer-2', {
-      type: 'chat-sync-full',
+      type: 'chat-sync-batch',
       roomId: 'room-b',
       messages: roomBMessages
     });

toju-app/src/app/store/messages/messages-incoming.handlers.ts

@@ -289,6 +289,12 @@ async function processSyncBatch(
   attachments: AttachmentFacade
 ): Promise<Message[]> {
   const toUpsert: Message[] = [];
+  // Yield to the event loop every YIELD_EVERY messages so Angular change
+  // detection and user input aren't starved while a large sync batch
+  // (e.g. from a bulk plugin import) drains serial DB writes.
+  const YIELD_EVERY = 50;
+
+  let processed = 0;
 
   for (const incoming of event.messages) {
     attachments.rememberMessageRoom(incoming.id, incoming.roomId);
@@ -305,6 +311,12 @@ async function processSyncBatch(
 
     if (changed)
       toUpsert.push(message);
+
+    processed += 1;
+
+    if (processed % YIELD_EVERY === 0) {
+      await new Promise<void>((resolve) => setTimeout(resolve, 0));
+    }
   }
 
   if (hasAttachmentMetaMap(event.attachments)) {
@@ -603,13 +615,20 @@ function handleSyncRequest(
   return from(
     (async () => {
       const all = await db.getMessages(targetRoomId, FULL_SYNC_LIMIT, 0);
-      const syncFullEvent: ChatEvent = {
-        type: 'chat-sync-full',
-        roomId: targetRoomId,
-        messages: all
-      };
 
-      webrtc.sendToPeer(fromPeerId, syncFullEvent);
+      // Ship as chunked chat-sync-batch events instead of a single
+      // chat-sync-full payload. A monolithic dump of up to FULL_SYNC_LIMIT
+      // messages can exceed the WebRTC SCTP per-message size ceiling and be
+      // silently dropped - especially after bulk plugin imports.
+      for (const chunk of chunkArray(all, CHUNK_SIZE)) {
+        const syncBatchEvent: ChatEvent = {
+          type: 'chat-sync-batch',
+          roomId: targetRoomId,
+          messages: chunk
+        };
+
+        webrtc.sendToPeer(fromPeerId, syncBatchEvent);
+      }
     })()
   ).pipe(mergeMap(() => EMPTY));
 }

toju-app/src/app/store/messages/messages-sync.effects.ts

@@ -111,40 +111,47 @@ export class MessagesSyncEffects {
       this.actions$.pipe(
         ofType(RoomsActions.joinRoomSuccess, RoomsActions.viewServerSuccess),
         withLatestFrom(this.store.select(selectCurrentRoom)),
-        mergeMap(([{ room }, currentRoom]) => {
-          const activeRoom = currentRoom || room;
+        switchMap(([{ room }, currentRoom]) => {
+          const requestedRoomId = room.id;
 
-          if (!activeRoom)
-            return EMPTY;
+          return timer(75).pipe(
+            withLatestFrom(this.store.select(selectCurrentRoom)),
+            switchMap(([, latestCurrentRoom]) => {
+              const activeRoom = latestCurrentRoom ?? currentRoom ?? room;
+              const peers = this.webrtc.getConnectedPeers();
 
-          return from(
-            this.db.getMessages(activeRoom.id, FULL_SYNC_LIMIT, 0)
-          ).pipe(
-            tap((messages) => {
-              const count = messages.length;
-              const lastUpdated = getLatestTimestamp(messages);
-
-              for (const pid of this.webrtc.getConnectedPeers()) {
-                try {
-                  this.webrtc.sendToPeer(pid, {
-                    type: 'chat-sync-summary',
-                    roomId: activeRoom.id,
-                    count,
-                    lastUpdated
-                  });
-
-                  this.webrtc.sendToPeer(pid, {
-                    type: 'chat-inventory-request',
-                    roomId: activeRoom.id
-                  });
-                } catch (error) {
-                  this.debugging.warn('messages', 'Failed to kick off room sync for peer', {
-                    error,
-                    peerId: pid,
-                    roomId: activeRoom.id
-                  });
-                }
+              if (!activeRoom || activeRoom.id !== requestedRoomId || peers.length === 0) {
+                return EMPTY;
               }
+
+              return from(this.db.getMessages(activeRoom.id, FULL_SYNC_LIMIT, 0)).pipe(
+                tap((messages) => {
+                  const count = messages.length;
+                  const lastUpdated = getLatestTimestamp(messages);
+
+                  for (const pid of peers) {
+                    try {
+                      this.webrtc.sendToPeer(pid, {
+                        type: 'chat-sync-summary',
+                        roomId: activeRoom.id,
+                        count,
+                        lastUpdated
+                      });
+
+                      this.webrtc.sendToPeer(pid, {
+                        type: 'chat-inventory-request',
+                        roomId: activeRoom.id
+                      });
+                    } catch (error) {
+                      this.debugging.warn('messages', 'Failed to kick off room sync for peer', {
+                        error,
+                        peerId: pid,
+                        roomId: activeRoom.id
+                      });
+                    }
+                  }
+                })
+              );
             })
           );
         })

toju-app/src/app/store/messages/messages.actions.ts

@@ -23,6 +23,24 @@ export const MessagesActions = createActionGroup({
     'Load Messages Success': props<{ messages: Message[] }>(),
     'Load Messages Failure': props<{ error: string }>(),
 
+    /**
+     * Fetches a page of messages strictly older than `beforeTimestamp` for a
+     * given conversation (room + channel). Used by the chat scroll-up handler
+     * to backfill history from the local database on demand.
+     */
+    'Load Older Messages': props<{
+      roomId: string;
+      channelId: string;
+      beforeTimestamp: number;
+      limit: number;
+    }>(),
+    'Load Older Messages Success': props<{
+      conversationKey: string;
+      messages: Message[];
+      reachedEnd: boolean;
+    }>(),
+    'Load Older Messages Failure': props<{ error: string }>(),
+
     /** Sends a new chat message to the current room and broadcasts to peers. */
     'Send Message': props<{ content: string; replyToId?: string; channelId?: string }>(),
     'Send Message Success': props<{ message: Message }>(),

toju-app/src/app/store/messages/messages.effects.ts

@@ -43,13 +43,16 @@ import { TimeSyncService } from '../../core/services/time-sync.service';
 import {
   DELETED_MESSAGE_CONTENT,
   Message,
-  Reaction
+  Reaction,
+  Room
 } from '../../shared-kernel';
 import { hydrateMessages } from './messages.helpers';
 import { canEditMessage } from '../../domains/chat/domain/rules/message.rules';
 import { resolveRoomPermission } from '../../domains/access-control';
 import { dispatchIncomingMessage, IncomingMessageContext } from './messages-incoming.handlers';
 
+const INITIAL_ROOM_MESSAGE_LIMIT = 30;
+
 @Injectable()
 export class MessagesEffects {
   private readonly actions$ = inject(Actions);
@@ -65,8 +68,9 @@ export class MessagesEffects {
   loadMessages$ = createEffect(() =>
     this.actions$.pipe(
       ofType(MessagesActions.loadMessages),
-      switchMap(({ roomId }) =>
-        from(this.db.getMessages(roomId)).pipe(
+      withLatestFrom(this.store.select(selectCurrentRoom)),
+      switchMap(([{ roomId }, currentRoom]) =>
+        from(this.loadInitialMessages(roomId, currentRoom)).pipe(
           mergeMap(async (messages) => {
             const hydrated = await hydrateMessages(messages, this.db);
 
@@ -86,6 +90,58 @@ export class MessagesEffects {
     )
   );
 
+  /** Paginates older messages from the local DB for scroll-up history loading. */
+  loadOlderMessages$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(MessagesActions.loadOlderMessages),
+      mergeMap(({ roomId, channelId, beforeTimestamp, limit }) =>
+        from(
+          this.db.getMessages(roomId, limit, 0, channelId, beforeTimestamp)
+        ).pipe(
+          mergeMap(async (messages) => {
+            const hydrated = await hydrateMessages(messages, this.db);
+
+            for (const message of hydrated) {
+              this.attachments.rememberMessageRoom(message.id, message.roomId);
+            }
+
+            return MessagesActions.loadOlderMessagesSuccess({
+              conversationKey: `${roomId}:${channelId}`,
+              messages: hydrated,
+              reachedEnd: hydrated.length < limit
+            });
+          }),
+          catchError((error) =>
+            of(MessagesActions.loadOlderMessagesFailure({ error: error.message }))
+          )
+        )
+      )
+    )
+  );
+
+  private async loadInitialMessages(roomId: string, currentRoom: Room | null): Promise<Message[]> {
+    const textChannels = currentRoom?.id === roomId
+      ? (currentRoom.channels ?? []).filter((channel) => channel.type === 'text')
+      : [];
+
+    if (textChannels.length <= 1) {
+      return this.db.getMessages(roomId, INITIAL_ROOM_MESSAGE_LIMIT, 0, textChannels[0]?.id);
+    }
+
+    const channelMessageSets = await Promise.all(
+      textChannels.map((channel) => this.db.getMessages(roomId, INITIAL_ROOM_MESSAGE_LIMIT, 0, channel.id))
+    );
+    const messagesById = new Map<string, Message>();
+
+    for (const messages of channelMessageSets) {
+      for (const message of messages) {
+        messagesById.set(message.id, message);
+      }
+    }
+
+    return [...messagesById.values()].sort((first, second) => first.timestamp - second.timestamp);
+  }
+
   /** Constructs a new message, persists it locally, and broadcasts to all peers. */
   sendMessage$ = createEffect(() =>
     this.actions$.pipe(

toju-app/src/app/store/messages/messages.helpers.ts

@@ -29,29 +29,33 @@ export type { InventoryItem } from '../../domains/chat/domain/rules/message-sync
 /** Hydrates a single message with its reactions from the database. */
 export async function hydrateMessage(
   msg: Message,
-  db: DatabaseService
+  _db: DatabaseService
 ): Promise<Message> {
   if (msg.isDeleted)
     return normaliseDeletedMessage(msg);
 
-  const reactions = await db.getReactionsForMessage(msg.id);
-
-  return reactions.length > 0 ? { ...msg,
-    reactions } : msg;
+  return msg;
 }
 
 /** Hydrates an array of messages with their reactions. */
 export async function hydrateMessages(
   messages: Message[],
-  db: DatabaseService
+  _db: DatabaseService
 ): Promise<Message[]> {
-  return Promise.all(messages.map((msg) => hydrateMessage(msg, db)));
+  return messages.map((msg) => msg.isDeleted ? normaliseDeletedMessage(msg) : msg);
 }
 
-/** Builds a sync inventory item from a message and its reaction count. */
+/** Builds a sync inventory item from a message and its reaction count.
+ *
+ * Reactions are read from the already-hydrated `msg.reactions` array (the
+ * persistence layer joins them in via `getMessages`), and attachment counts
+ * only come from the in-memory override. We deliberately avoid per-message
+ * DB lookups here so a whole-room inventory stays O(1) DB calls even when
+ * the room contains tens of thousands of messages.
+ */
 export async function buildInventoryItem(
   msg: Message,
-  db: DatabaseService,
+  _db: DatabaseService,
   attachmentCountOverride?: number
 ): Promise<InventoryItem> {
   if (msg.isDeleted) {
@@ -63,50 +67,49 @@ export async function buildInventoryItem(
     };
   }
 
-  const reactions = await db.getReactionsForMessage(msg.id);
-  const attachments =
-    attachmentCountOverride === undefined
-      ? await db.getAttachmentsForMessage(msg.id)
-      : [];
-
-  return { id: msg.id,
+  const item: InventoryItem = {
+    id: msg.id,
     ts: getMessageTimestamp(msg),
-    rc: reactions.length,
-    ac: attachmentCountOverride ?? attachments.length };
+    rc: msg.reactions?.length ?? 0
+  };
+
+  if (attachmentCountOverride !== undefined) {
+    item.ac = attachmentCountOverride;
+  }
+
+  return item;
 }
 
-/** Builds a local map of `{timestamp, reactionCount, attachmentCount}` keyed by message ID. */
+/** Builds a local map of `{timestamp, reactionCount, attachmentCount}` keyed by message ID.
+ *
+ * As with {@link buildInventoryItem}, reactions come from the already-hydrated
+ * `msg.reactions` array and attachment counts only come from the in-memory
+ * override map.
+ */
 export async function buildLocalInventoryMap(
   messages: Message[],
-  db: DatabaseService,
+  _db: DatabaseService,
   attachmentCountOverrides?: ReadonlyMap<string, number>
 ): Promise<Map<string, { ts: number; rc: number; ac: number }>> {
   const map = new Map<string, { ts: number; rc: number; ac: number }>();
 
-  await Promise.all(
-    messages.map(async (msg) => {
-      if (msg.isDeleted) {
-        map.set(msg.id, {
-          ts: getMessageTimestamp(msg),
-          rc: 0,
-          ac: 0
-        });
+  for (const msg of messages) {
+    if (msg.isDeleted) {
+      map.set(msg.id, {
+        ts: getMessageTimestamp(msg),
+        rc: 0,
+        ac: 0
+      });
 
-        return;
-      }
+      continue;
+    }
 
-      const reactions = await db.getReactionsForMessage(msg.id);
-      const attachmentCountOverride = attachmentCountOverrides?.get(msg.id);
-      const attachments =
-        attachmentCountOverride === undefined
-          ? await db.getAttachmentsForMessage(msg.id)
-          : [];
-
-      map.set(msg.id, { ts: getMessageTimestamp(msg),
-        rc: reactions.length,
-        ac: attachmentCountOverride ?? attachments.length });
-    })
-  );
+    map.set(msg.id, {
+      ts: getMessageTimestamp(msg),
+      rc: msg.reactions?.length ?? 0,
+      ac: attachmentCountOverrides?.get(msg.id) ?? 0
+    });
+  }
 
   return map;
 }

toju-app/src/app/store/messages/messages.reducer.ts

@@ -13,10 +13,18 @@ export interface MessagesState extends EntityState<Message> {
   loading: boolean;
   /** Whether a peer-to-peer sync cycle is in progress. */
   syncing: boolean;
+  /** Whether a scroll-up older-page fetch is currently in flight. */
+  loadingOlder: boolean;
   /** Most recent error message from message operations. */
   error: string | null;
   /** ID of the room whose messages are currently loaded. */
   currentRoomId: string | null;
+  /**
+   * Conversation keys (`${roomId}:${channelId}`) that have been paginated
+   * all the way back to the start of the local DB history. Used by the
+   * scroll-up handler to stop issuing further DB pages.
+   */
+  exhaustedConversations: Record<string, true>;
 }
 
 export const messagesAdapter: EntityAdapter<Message> = createEntityAdapter<Message>({
@@ -27,8 +35,10 @@ export const messagesAdapter: EntityAdapter<Message> = createEntityAdapter<Messa
 export const initialState: MessagesState = messagesAdapter.getInitialState({
   loading: false,
   syncing: false,
+  loadingOlder: false,
   error: null,
-  currentRoomId: null
+  currentRoomId: null,
+  exhaustedConversations: {}
 });
 
 export const messagesReducer = createReducer(
@@ -41,7 +51,8 @@ export const messagesReducer = createReducer(
         ...state,
         loading: true,
         error: null,
-        currentRoomId: roomId
+        currentRoomId: roomId,
+        exhaustedConversations: {}
       });
     }
 
@@ -66,6 +77,30 @@ export const messagesReducer = createReducer(
     error
   })),
 
+  // Load older messages - paginate backwards from the DB on scroll-up.
+  on(MessagesActions.loadOlderMessages, (state) => ({
+    ...state,
+    loadingOlder: true,
+    error: null
+  })),
+
+  on(MessagesActions.loadOlderMessagesSuccess, (state, { conversationKey, messages, reachedEnd }) =>
+    messagesAdapter.upsertMany(messages, {
+      ...state,
+      loadingOlder: false,
+      exhaustedConversations: reachedEnd
+        ? { ...state.exhaustedConversations,
+          [conversationKey]: true }
+        : state.exhaustedConversations
+    })
+  ),
+
+  on(MessagesActions.loadOlderMessagesFailure, (state, { error }) => ({
+    ...state,
+    loadingOlder: false,
+    error
+  })),
+
   // Send message
   on(MessagesActions.sendMessage, (state) => ({
     ...state,
@@ -202,7 +237,10 @@ export const messagesReducer = createReducer(
 
     return messagesAdapter.upsertMany(merged, {
       ...state,
-      syncing: false
+      syncing: false,
+      // Peer sync may have inserted messages older than our current oldest;
+      // reopen pagination so the scroll-up handler revisits the DB.
+      exhaustedConversations: {}
     });
   }),
 
@@ -221,7 +259,8 @@ export const messagesReducer = createReducer(
   on(MessagesActions.clearMessages, (state) =>
     messagesAdapter.removeAll({
       ...state,
-      currentRoomId: null
+      currentRoomId: null,
+      exhaustedConversations: {}
     })
   )
 );

toju-app/src/app/store/messages/messages.selectors.ts

@@ -36,6 +36,21 @@ export const selectMessagesSyncing = createSelector(
   (state) => state.syncing
 );
 
+/** Whether a scroll-up older-page DB fetch is currently in flight. */
+export const selectMessagesLoadingOlder = createSelector(
+  selectMessagesState,
+  (state) => state.loadingOlder
+);
+
+/** Whether the given conversation (`${roomId}:${channelId}`) has been
+ * paginated all the way back to the start of the local DB history.
+ */
+export const selectConversationExhausted = (conversationKey: string) =>
+  createSelector(
+    selectMessagesState,
+    (state) => state.exhaustedConversations[conversationKey] === true
+  );
+
 /** Selects the ID of the room whose messages are currently loaded. */
 export const selectCurrentRoomId = createSelector(
   selectMessagesState,

toju-app/src/app/store/rooms/room-members-sync.effects.ts

@@ -340,11 +340,12 @@ export class RoomMembersSyncEffects {
     const role = room.hostId === currentUser.id
       ? 'host'
       : (isCurrentRoom ? currentUser.role : existingMember?.role ?? 'member');
+    const seenAt = existingMember?.lastSeenAt ?? currentUser.joinedAt ?? Date.now();
 
     return {
-      ...roomMemberFromUser(currentUser, Date.now(), role),
+      ...roomMemberFromUser(currentUser, seenAt, role),
       id: existingMember?.id ?? currentUser.id,
-      joinedAt: existingMember?.joinedAt ?? currentUser.joinedAt ?? Date.now(),
+      joinedAt: existingMember?.joinedAt ?? currentUser.joinedAt ?? seenAt,
       avatarUrl: currentUser.avatarUrl ?? existingMember?.avatarUrl,
       role
     };

toju-app/src/app/store/rooms/rooms.effects.ts

@@ -12,7 +12,8 @@ import {
   of,
   from,
   EMPTY,
-  merge
+  merge,
+  timer
 } from 'rxjs';
 import {
   map,
@@ -60,6 +61,8 @@ type BlockedRoomAccessAction =
   | ReturnType<typeof RoomsActions.forgetRoom>
   | ReturnType<typeof RoomsActions.joinRoomFailure>;
 
+const VIEW_SERVER_LOAD_DELAY_MS = 75;
+
 @Injectable()
 export class RoomsEffects {
   private actions$ = inject(Actions);
@@ -608,7 +611,12 @@ export class RoomsEffects {
             navigationRequestVersion
           });
 
-          this.router.navigate(['/room', room.id]);
+          window.setTimeout(() => {
+            if (this.signalingConnection.isCurrentRoomNavigation(room.id, navigationRequestVersion)) {
+              void this.router.navigate(['/room', room.id]);
+            }
+          }, 0);
+
           return of(RoomsActions.viewServerSuccess({ room }));
         };
 
@@ -634,7 +642,9 @@ export class RoomsEffects {
   onViewServerSuccess$ = createEffect(() =>
     this.actions$.pipe(
       ofType(RoomsActions.viewServerSuccess),
-      mergeMap(({ room }) => [MessagesActions.loadMessages({ roomId: room.id }), UsersActions.loadBans()])
+      switchMap(({ room }) => timer(VIEW_SERVER_LOAD_DELAY_MS).pipe(
+        mergeMap(() => [MessagesActions.loadMessages({ roomId: room.id }), UsersActions.loadBans()])
+      ))
     )
   );
 

toju-app/src/app/store/rooms/rooms.reducer.ts

@@ -42,6 +42,20 @@ function getDefaultTextChannelId(room: Room): string {
   return resolveActiveTextChannelId(enrichRoom(room).channels, 'general');
 }
 
+function activateRoomView(state: RoomsState, room: Room, isConnecting: boolean, updateSavedRooms = true): RoomsState {
+  const enriched = enrichRoom(room);
+
+  return {
+    ...state,
+    currentRoom: enriched,
+    savedRooms: updateSavedRooms ? upsertRoom(state.savedRooms, enriched) : state.savedRooms,
+    isConnecting,
+    signalServerCompatibilityError: null,
+    isConnected: true,
+    activeChannelId: getDefaultTextChannelId(enriched)
+  };
+}
+
 /** Upsert a room into a saved-rooms list (add or replace by id) */
 function upsertRoom(savedRooms: Room[], room: Room): Room[] {
   const normalizedRoom = enrichRoom(room);
@@ -220,27 +234,24 @@ export const roomsReducer = createReducer(
   })),
 
   // View server - just switch the viewed room, stay connected
-  on(RoomsActions.viewServer, (state) => ({
-    ...state,
-    isConnecting: true,
-    signalServerCompatibilityError: null,
-    error: null
-  })),
-
-  on(RoomsActions.viewServerSuccess, (state, { room }) => {
-    const enriched = enrichRoom(room);
+  on(RoomsActions.viewServer, (state, { room, skipBanCheck }) => {
+    if (skipBanCheck) {
+      return {
+        ...activateRoomView(state, room, true, false),
+        error: null
+      };
+    }
 
     return {
       ...state,
-      currentRoom: enriched,
-      savedRooms: upsertRoom(state.savedRooms, enriched),
-      isConnecting: false,
+      isConnecting: true,
       signalServerCompatibilityError: null,
-      isConnected: true,
-      activeChannelId: getDefaultTextChannelId(enriched)
+      error: null
     };
   }),
 
+  on(RoomsActions.viewServerSuccess, (state, { room }) => activateRoomView(state, room, false, false)),
+
   // Update room settings
   on(RoomsActions.updateRoomSettings, (state) => ({
     ...state,

toju-app/src/index.html

@@ -10,7 +10,7 @@
     />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; connect-src 'self' blob: ws: wss: http: https:; media-src 'self' blob: file:; img-src 'self' data: blob: http: https:; frame-src https://www.youtube-nocookie.com https://open.spotify.com https://w.soundcloud.com;"
+      content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; connect-src 'self' blob: ws: wss: http: https:; media-src 'self' blob: file:; img-src 'self' data: blob: file: http: https:; frame-src https://www.youtube-nocookie.com https://open.spotify.com https://w.soundcloud.com;"
     />
     <link
       rel="icon"

website/CONTEXT.md

@@ -0,0 +1,42 @@
+# Marketing Site (website)
+
+Owns the public-facing Angular 19 marketing site — landing pages, screenshots, feature highlights, and download links pointing to release artifacts. Independent from the product runtime: shares no code or wire schemas with toju-app, electron, or the signaling server.
+
+> **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 |
+|------|------------|------------------|
+| **Marketing site** | The Angular 19 app under `website/`, served separately from the product client. | "landing page" (it has multiple pages) |
+| **Release manifest** | The release-metadata JSON the marketing site links to for download buttons; produced by `tools/generate-release-manifest.js` and published by Gitea Workflows. | "version manifest" |
+
+## Relationships
+
+- The **Marketing site** links to release artifacts produced by the Gitea Workflows under `.gitea/workflows/release-draft.yml` and `publish-draft-release.yml`.
+- It does **not** consume the signaling server, the product client, or shared kernel types — independent codebase.
+
+## Boundaries / IO
+
+- **Exposes:** the public website bundle, deployed by `.gitea/workflows/deploy-web-apps.yml`.
+- **Consumes:** the release manifest URL and download links; static assets under `website/src/images/`.
+
+## Invariants
+
+- The marketing site has its own `package.json` and its own Angular version — do **not** hoist its dependencies into the root workspace.
+- It must remain functional with no backend (static deploy); any dynamic behavior should fail gracefully.
+
+## Flagged ambiguities
+
+- _None recorded yet._
+
+---
+
+*Agent-procedural rules (TDD, lint) live in `/AGENTS.md`. This file is the bounded-context domain artefact for the marketing site.*