docs: scaffold agent instruction tree

Add AGENTS.md, CLAUDE.md, and the agents-docs/ tree (workflow, lessons,
engineering standards, context map, ADR seed, feature template) plus a
domain-bearing CONTEXT.md for each of the six subdomains: toju-app,
electron, server, e2e, website, docs-site.

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

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

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

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

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

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

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

@@ -90,10 +90,7 @@ test.describe('Direct private calls', () => {
         })
         .toBeGreaterThan(0);
 
-      await scenario.bob.page.getByRole('button', { name: 'Open private call' }).click();
-      await expect(scenario.bob.page).toHaveURL(/\/call\//, { timeout: 20_000 });
-      await scenario.bob.page.getByRole('button', { name: 'Join call' }).click();
-      await expect(scenario.bob.page.getByRole('button', { name: 'Leave call' })).toBeVisible({ timeout: 20_000 });
+      await answerIncomingCall(scenario.bob.page);
       await expect(scenario.bob.page.locator('[data-testid^="server-rail-call-"]')).toHaveCount(1, { timeout: 20_000 });
 
       await expect
@@ -176,10 +173,7 @@ test.describe('Direct private calls', () => {
         })
         .toBeGreaterThan(0);
 
-      await charlie.page.getByRole('button', { name: 'Open private call' }).click();
-      await expect(charlie.page).toHaveURL(/\/call\//, { timeout: 20_000 });
-      await charlie.page.getByRole('button', { name: 'Join call' }).click();
-      await expect(charlie.page.getByRole('button', { name: 'Leave call' })).toBeVisible({ timeout: 20_000 });
+      await answerIncomingCall(charlie.page);
       await expect(charlie.page.locator('app-private-call aside app-dm-chat').getByText(privateOnlyMessage)).toHaveCount(0);
 
       await waitForConnectedPeerCount(scenario.alice.page, 2, 45_000);
@@ -345,12 +339,7 @@ test.describe('Direct private calls', () => {
         })
         .toBeGreaterThan(charliePlayCountBeforeGroupCall);
 
-      await scenario.bob.page
-        .getByRole('button', { name: 'Open private call' })
-        .last()
-        .click();
-
-      await scenario.bob.page.getByRole('button', { name: 'Join call' }).click();
+      await answerIncomingCall(scenario.bob.page);
       await expect
         .poll(async () => await getActiveCallAudioLoops(scenario.bob.page), {
           timeout: 10_000,
@@ -358,12 +347,7 @@ test.describe('Direct private calls', () => {
         })
         .toBe(0);
 
-      await scenario.charlie.page
-        .getByRole('button', { name: 'Open private call' })
-        .last()
-        .click();
-
-      await scenario.charlie.page.getByRole('button', { name: 'Join call' }).click();
+      await answerIncomingCall(scenario.charlie.page);
       await expect
         .poll(async () => await getActiveCallAudioLoops(scenario.charlie.page), {
           timeout: 10_000,
@@ -378,10 +362,7 @@ test.describe('Direct private calls', () => {
 
     await test.step('Alice starts a private call and Bob joins', async () => {
       await startCallFromSearch(scenario.alice.page, scenario.bobUserId, 'Bob');
-      await scenario.bob.page.getByRole('button', { name: 'Open private call' }).click();
-      await expect(scenario.bob.page).toHaveURL(/\/call\//, { timeout: 20_000 });
-      await scenario.bob.page.getByRole('button', { name: 'Join call' }).click();
-      await expect(scenario.bob.page.getByRole('button', { name: 'Leave call' })).toBeVisible({ timeout: 20_000 });
+      await answerIncomingCall(scenario.bob.page);
 
       await waitForConnectedPeerCount(scenario.alice.page, 1, 45_000);
       await waitForConnectedPeerCount(scenario.bob.page, 1, 45_000);
@@ -413,12 +394,11 @@ test.describe('Direct private calls', () => {
 
     await test.step('Caller leaving before answer clears recipient call route and rail icon', async () => {
       await startCallFromSearch(scenario.alice.page, scenario.bobUserId, 'Bob');
-      await scenario.bob.page.getByRole('button', { name: 'Open private call' }).click();
-      await expect(scenario.bob.page).toHaveURL(/\/call\//, { timeout: 20_000 });
+      await expect(incomingCallDialog(scenario.bob.page)).toBeVisible({ timeout: 20_000 });
 
       await scenario.alice.page.getByRole('button', { name: 'Leave call' }).click();
       await expect(scenario.alice.page).toHaveURL(/\/dm\//, { timeout: 20_000 });
-      await expect(scenario.bob.page).toHaveURL(/\/dm\//, { timeout: 20_000 });
+      await expect(incomingCallDialog(scenario.bob.page)).toHaveCount(0, { timeout: 20_000 });
       await expect(scenario.bob.page.getByRole('button', { name: 'Open private call' })).toHaveCount(0);
       await expect(scenario.bob.page.locator('[data-testid^="server-rail-call-"]')).toHaveCount(0);
       await expect
@@ -431,9 +411,7 @@ test.describe('Direct private calls', () => {
 
     await test.step('Leaving an answered call clears local ringing and returns to DM', async () => {
       await startCallFromSearch(scenario.alice.page, scenario.bobUserId, 'Bob');
-      await scenario.bob.page.getByRole('button', { name: 'Open private call' }).click();
-      await scenario.bob.page.getByRole('button', { name: 'Join call' }).click();
-      await expect(scenario.bob.page.getByRole('button', { name: 'Leave call' })).toBeVisible({ timeout: 20_000 });
+      await answerIncomingCall(scenario.bob.page);
 
       await scenario.bob.page.getByRole('button', { name: 'Leave call' }).click();
       await expect(scenario.bob.page).toHaveURL(/\/dm\//, { timeout: 20_000 });
@@ -633,6 +611,30 @@ async function startCallFromSearch(page: Page, userId: string, displayName: stri
   await expect(page).toHaveURL(/\/call\//, { timeout: 20_000 });
 }
 
+function incomingCallDialog(page: Page) {
+  return page.getByRole('dialog', { name: /is calling/ });
+}
+
+async function answerIncomingCall(page: Page): Promise<void> {
+  const dialog = incomingCallDialog(page);
+
+  if (await dialog.isVisible({ timeout: 5_000 }).catch(() => false)) {
+    await dialog.getByRole('button', { name: 'Answer' }).click();
+  } else {
+    await page.getByRole('button', { name: 'Open private call' }).last().click();
+    await expect(page).toHaveURL(/\/call\//, { timeout: 20_000 });
+
+    const joinButton = page.getByRole('button', { name: 'Join call' });
+
+    if (await joinButton.isVisible({ timeout: 5_000 }).catch(() => false)) {
+      await joinButton.click();
+    }
+  }
+
+  await expect(page).toHaveURL(/\/call\//, { timeout: 20_000 });
+  await expect(page.getByRole('button', { name: 'Leave call' })).toBeVisible({ timeout: 20_000 });
+}
+
 async function getCurrentUserId(page: Page): Promise<string> {
   return await page.evaluate(() => localStorage.getItem('metoyou_currentUserId') ?? '');
 }

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 {

package-lock.json

@@ -50,6 +50,7 @@
         "rxjs": "~7.8.0",
         "simple-peer": "^9.11.1",
         "sql.js": "^1.13.0",
+        "swiper": "^12.1.4",
         "tslib": "^2.3.0",
         "typeorm": "^0.3.28",
         "uuid": "^13.0.0",
@@ -31843,6 +31844,25 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/swiper": {
+      "version": "12.1.4",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.4.tgz",
+      "integrity": "sha512-bihiwoKMOQwW8FfdUbo1DgkVH25E+4ZELIq0oopL1KTKBteLuaTMi/wwFjMxtlhTkk45k3XQ89D1Fvv0spSqBA==",
+      "funding": [
+        {
+          "type": "custom",
+          "url": "https://sponsors.nolimits4web.com"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nolimits4web"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/swrv": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/swrv/-/swrv-1.2.0.tgz",

package.json

@@ -101,6 +101,7 @@
     "rxjs": "~7.8.0",
     "simple-peer": "^9.11.1",
     "sql.js": "^1.13.0",
+    "swiper": "^12.1.4",
     "tslib": "^2.3.0",
     "typeorm": "^0.3.28",
     "uuid": "^13.0.0",

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

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

toju-app/src/app/app.ts

@@ -30,7 +30,7 @@ import { ServerDirectoryFacade } from './domains/server-directory';
 import { NotificationsFacade } from './domains/notifications';
 import { TimeSyncService } from './core/services/time-sync.service';
 import { VoiceSessionFacade } from './domains/voice-session';
-import { ExternalLinkService } from './core/platform';
+import { ExternalLinkService, ViewportService } from './core/platform';
 import { SettingsModalService } from './core/services/settings-modal.service';
 import { ElectronBridgeService } from './core/platform/electron/electron-bridge.service';
 import { UserStatusService } from './core/services/user-status.service';
@@ -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
   ],
@@ -99,6 +101,8 @@ export class App implements OnInit, OnDestroy {
   readonly theme = inject(ThemeService);
   readonly voiceSession = inject(VoiceSessionFacade);
   readonly externalLinks = inject(ExternalLinkService);
+  readonly viewport = inject(ViewportService);
+  readonly isMobile = this.viewport.isMobile;
   readonly electronBridge = inject(ElectronBridgeService);
   readonly userStatus = inject(UserStatusService);
   readonly gameActivity = inject(GameActivityService);
@@ -263,11 +267,22 @@ export class App implements OnInit, OnDestroy {
 
     if (!currentUserId) {
       if (!this.isPublicRoute(currentUrl)) {
-        this.router.navigate(['/login'], {
-          queryParams: {
-            returnUrl: currentUrl
-          }
-        }).catch(() => {});
+        // On mobile, new/unauthenticated visitors landing on the app root or
+        // /search should stay on /search (which already exposes a login CTA).
+        // The login form has no mobile chrome / back button, so dropping new
+        // users straight onto it leaves them with no way to navigate away.
+        const currentPath = this.getRoutePath(currentUrl);
+        const isSearchLanding = currentPath === '/' || currentPath === '/search';
+
+        if (this.isMobile() && isSearchLanding) {
+          this.router.navigate(['/search'], { replaceUrl: true }).catch(() => {});
+        } else {
+          this.router.navigate(['/login'], {
+            queryParams: {
+              returnUrl: currentUrl
+            }
+          }).catch(() => {});
+        }
       }
     } else {
       this.store.dispatch(UsersActions.loadCurrentUser());

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

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

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

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

toju-app/src/app/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
@@ -40,31 +43,43 @@
   </div>
 
   @if (showKlipyGifPicker()) {
-    <div
-      class="fixed inset-0 z-[89]"
-      (click)="closeKlipyGifPicker()"
-      (keydown.enter)="closeKlipyGifPicker()"
-      (keydown.space)="closeKlipyGifPicker()"
-      tabindex="0"
-      role="button"
-      aria-label="Close GIF picker"
-      style="-webkit-app-region: no-drag"
-    ></div>
-
-    <div class="pointer-events-none fixed inset-0 z-[90]">
+    @if (isMobile()) {
+      <app-bottom-sheet (dismissed)="closeKlipyGifPicker()">
+        <div appThemeNode="chatGifPickerSurface">
+          <app-klipy-gif-picker
+            [signalSource]="currentRoom()"
+            (gifSelected)="handleKlipyGifSelected($event)"
+            (closed)="closeKlipyGifPicker()"
+          />
+        </div>
+      </app-bottom-sheet>
+    } @else {
       <div
-        appThemeNode="chatGifPickerSurface"
-        class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
-        [style.bottom.px]="composerBottomPadding() + 8"
-        [style.right.px]="klipyGifPickerAnchorRight()"
-      >
-        <app-klipy-gif-picker
-          [signalSource]="currentRoom()"
-          (gifSelected)="handleKlipyGifSelected($event)"
-          (closed)="closeKlipyGifPicker()"
-        />
+        class="fixed inset-0 z-[89]"
+        (click)="closeKlipyGifPicker()"
+        (keydown.enter)="closeKlipyGifPicker()"
+        (keydown.space)="closeKlipyGifPicker()"
+        tabindex="0"
+        role="button"
+        aria-label="Close GIF picker"
+        style="-webkit-app-region: no-drag"
+      ></div>
+
+      <div class="pointer-events-none fixed inset-0 z-[90]">
+        <div
+          appThemeNode="chatGifPickerSurface"
+          class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
+          [style.bottom.px]="composerBottomPadding() + 8"
+          [style.right.px]="klipyGifPickerAnchorRight()"
+        >
+          <app-klipy-gif-picker
+            [signalSource]="currentRoom()"
+            (gifSelected)="handleKlipyGifSelected($event)"
+            (closed)="closeKlipyGifPicker()"
+          />
+        </div>
       </div>
-    </div>
+    }
   }
 
   <app-chat-message-overlays

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

@@ -8,15 +8,21 @@ import {
   inject,
   signal
 } from '@angular/core';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { switchMap } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { ElectronBridgeService } from '../../../../core/platform/electron/electron-bridge.service';
+import { ViewportService } from '../../../../core/platform';
+import { BottomSheetComponent } from '../../../../shared';
 import { RealtimeSessionFacade } from '../../../../core/realtime';
 import { Attachment, AttachmentFacade } from '../../../attachment';
 import { KlipyGif, KlipyService } from '../../application/services/klipy.service';
 import { MessagesActions } from '../../../../store/messages/messages.actions';
 import {
   selectAllMessages,
+  selectConversationExhausted,
   selectMessagesLoading,
+  selectMessagesLoadingOlder,
   selectMessagesSyncing
 } from '../../../../store/messages/messages.selectors';
 import { selectCurrentUser, selectIsCurrentUserAdmin } from '../../../../store/users/users.selectors';
@@ -45,6 +51,7 @@ import {
     KlipyGifPickerComponent,
     ChatMessageListComponent,
     ChatMessageOverlaysComponent,
+    BottomSheetComponent,
     ThemeNodeDirective
   ],
   templateUrl: './chat-messages.component.html',
@@ -59,6 +66,9 @@ export class ChatMessagesComponent {
   private readonly webrtc = inject(RealtimeSessionFacade);
   private readonly attachmentsSvc = inject(AttachmentFacade);
   private readonly klipy = inject(KlipyService);
+  private readonly viewport = inject(ViewportService);
+
+  readonly isMobile = this.viewport.isMobile;
 
   readonly allMessages = this.store.selectSignal(selectAllMessages);
   private readonly activeChannelId = this.store.selectSignal(selectActiveChannelId);
@@ -66,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);
 
@@ -77,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);
@@ -207,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.html

@@ -6,6 +6,10 @@
   [attr.data-message-id]="msg.id"
   class="group relative flex gap-3 rounded-lg p-2 transition-colors hover:bg-secondary/30"
   [class.opacity-50]="msg.isDeleted"
+  (touchstart)="onMessageTouchStart($event)"
+  (touchend)="onMessageTouchEnd()"
+  (touchmove)="onMessageTouchEnd()"
+  (touchcancel)="onMessageTouchEnd()"
 >
   <div
     appThemeNode="chatMessageAvatar"
@@ -469,7 +473,7 @@
     }
   </div>
 
-  @if (!msg.isDeleted) {
+  @if (!msg.isDeleted && !isMobile()) {
     <div
       appThemeNode="chatMessageActions"
       class="absolute right-2 top-2 flex items-center gap-1 rounded-lg border border-border bg-card shadow-lg opacity-0 transition-opacity group-hover:opacity-100"
@@ -534,4 +538,83 @@
       }
     </div>
   }
+
+  <ng-template #mobileSheetTpl>
+    <app-bottom-sheet
+      title="Message"
+      ariaLabel="Message actions"
+      (dismissed)="closeMobileActions()"
+    >
+      <div class="flex flex-col py-1">
+        <div class="px-3 pb-2 pt-1">
+          <p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">React</p>
+          <div class="mt-2 grid grid-cols-8 gap-1">
+            @for (emoji of commonEmojis; track emoji) {
+              <button
+                type="button"
+                class="rounded p-1 text-xl transition-colors hover:bg-secondary"
+                (click)="onMobileReact(emoji)"
+              >
+                {{ emoji }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <div class="my-1 h-px bg-border"></div>
+
+        <button
+          type="button"
+          class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-foreground transition-colors hover:bg-secondary"
+          (click)="onMobileReply()"
+        >
+          <ng-icon
+            name="lucideReply"
+            class="h-5 w-5 text-muted-foreground"
+          />
+          <span>Reply</span>
+        </button>
+
+        <button
+          type="button"
+          class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-foreground transition-colors hover:bg-secondary"
+          (click)="onMobileCopy()"
+        >
+          <ng-icon
+            name="lucideCopy"
+            class="h-5 w-5 text-muted-foreground"
+          />
+          <span>Copy message content</span>
+        </button>
+
+        @if (isOwnMessage()) {
+          <button
+            type="button"
+            class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-foreground transition-colors hover:bg-secondary"
+            (click)="onMobileEdit()"
+          >
+            <ng-icon
+              name="lucideEdit"
+              class="h-5 w-5 text-muted-foreground"
+            />
+            <span>Edit</span>
+          </button>
+        }
+
+        @if (isOwnMessage() || isAdmin()) {
+          <button
+            type="button"
+            class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-destructive transition-colors hover:bg-destructive/10"
+            (click)="onMobileDelete()"
+          >
+            <ng-icon
+              name="lucideTrash2"
+              class="h-5 w-5"
+            />
+            <span>Delete</span>
+          </button>
+        }
+      </div>
+    </app-bottom-sheet>
+  </ng-template>
 </div>

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

@@ -2,21 +2,28 @@
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
+  ChangeDetectionStrategy,
   Component,
   computed,
   ElementRef,
   effect,
   inject,
   input,
+  OnDestroy,
   output,
   signal,
-  ViewChild
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef
 } from '@angular/core';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
 import { Router } from '@angular/router';
 
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
   lucideCheck,
+  lucideCopy,
   lucideDownload,
   lucideEdit,
   lucideExpand,
@@ -34,7 +41,7 @@ import {
   MAX_BROWSER_INLINE_MEDIA_SIZE_BYTES,
   MAX_AUTO_SAVE_SIZE_BYTES
 } from '../../../../../attachment';
-import { PlatformService } from '../../../../../../core/platform';
+import { PlatformService, ViewportService } from '../../../../../../core/platform';
 import { ElectronBridgeService } from '../../../../../../core/platform/electron/electron-bridge.service';
 import {
   ExperimentalMediaSettingsService
@@ -52,6 +59,7 @@ import { PluginRenderHostComponent } from '../../../../../plugins/feature/plugin
 import { PluginRequirementStateService, PluginUiRegistryService } from '../../../../../plugins';
 
 import {
+  BottomSheetComponent,
   ChatAudioPlayerComponent,
   ChatVideoPlayerComponent,
   ProfileCardService,
@@ -125,11 +133,13 @@ interface MissingPluginEmbedFallback {
     UserAvatarComponent,
     PluginRenderHostComponent,
     ExperimentalVlcPlayerComponent,
-    ThemeNodeDirective
+    ThemeNodeDirective,
+    BottomSheetComponent
   ],
   viewProviders: [
     provideIcons({
       lucideCheck,
+      lucideCopy,
       lucideDownload,
       lucideEdit,
       lucideExpand,
@@ -144,12 +154,14 @@ interface MissingPluginEmbedFallback {
   ],
   templateUrl: './chat-message-item.component.html',
   styleUrl: './chat-message-item.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     style: 'display: contents;'
   }
 })
-export class ChatMessageItemComponent {
+export class ChatMessageItemComponent implements OnDestroy {
   @ViewChild('editTextareaRef') editTextareaRef?: ElementRef<HTMLTextAreaElement>;
+  @ViewChild('mobileSheetTpl') mobileSheetTpl?: TemplateRef<unknown>;
 
   private readonly attachmentsSvc = inject(AttachmentFacade);
   private readonly klipy = inject(KlipyService);
@@ -160,6 +172,13 @@ export class ChatMessageItemComponent {
   private readonly experimentalMedia = inject(ExperimentalMediaSettingsService);
   private readonly profileCard = inject(ProfileCardService);
   private readonly router = inject(Router);
+  private readonly viewport = inject(ViewportService);
+  private readonly overlay = inject(Overlay);
+  private readonly viewContainerRef = inject(ViewContainerRef);
+  private mobileSheetOverlayRef: OverlayRef | null = null;
+  private longPressTimer: number | null = null;
+  readonly isMobile = this.viewport.isMobile;
+  readonly mobileSheetOpen = signal(false);
   private readonly attachmentVersion = signal(this.attachmentsSvc.updated());
   private readonly experimentalPlayerAttachmentId = signal<string | null>(null);
   private readonly mediaSupportCache = new Map<string, boolean>();
@@ -360,6 +379,116 @@ export class ChatMessageItemComponent {
     this.deleteRequested.emit(this.message());
   }
 
+  onMessageTouchStart(event: TouchEvent): void {
+    if (!this.isMobile() || this.message().isDeleted) {
+      return;
+    }
+
+    if (event.touches.length !== 1) {
+      this.clearLongPressTimer();
+      return;
+    }
+
+    if (this.isEditableTarget(event.target)) {
+      this.clearLongPressTimer();
+      return;
+    }
+
+    this.clearLongPressTimer();
+    this.longPressTimer = window.setTimeout(() => {
+      this.longPressTimer = null;
+      this.openMobileSheet();
+    }, 500);
+  }
+
+  onMessageTouchEnd(): void {
+    this.clearLongPressTimer();
+  }
+
+  private clearLongPressTimer(): void {
+    if (this.longPressTimer !== null) {
+      window.clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+  }
+
+  private isEditableTarget(target: EventTarget | null): boolean {
+    if (!(target instanceof Element)) {
+      return false;
+    }
+
+    return target.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]') !== null;
+  }
+
+  closeMobileActions(): void {
+    this.detachMobileSheet();
+  }
+
+  private openMobileSheet(): void {
+    if (this.mobileSheetOverlayRef || !this.mobileSheetTpl) {
+      this.mobileSheetOpen.set(true);
+      return;
+    }
+
+    const overlayRef = this.overlay.create({
+      positionStrategy: this.overlay.position().global(),
+      scrollStrategy: this.overlay.scrollStrategies.block(),
+      hasBackdrop: false,
+      panelClass: 'metoyou-chat-actions-sheet-pane'
+    });
+    const portal = new TemplatePortal(this.mobileSheetTpl, this.viewContainerRef);
+
+    overlayRef.attach(portal);
+    this.mobileSheetOverlayRef = overlayRef;
+    this.mobileSheetOpen.set(true);
+  }
+
+  private detachMobileSheet(): void {
+    this.mobileSheetOpen.set(false);
+
+    if (this.mobileSheetOverlayRef) {
+      this.mobileSheetOverlayRef.dispose();
+      this.mobileSheetOverlayRef = null;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.clearLongPressTimer();
+    this.detachMobileSheet();
+  }
+
+  onMobileReact(emoji: string): void {
+    this.addReaction(emoji);
+    this.closeMobileActions();
+  }
+
+  onMobileReply(): void {
+    this.requestReply();
+    this.closeMobileActions();
+  }
+
+  onMobileEdit(): void {
+    this.startEdit();
+    this.closeMobileActions();
+  }
+
+  onMobileDelete(): void {
+    this.requestDelete();
+    this.closeMobileActions();
+  }
+
+  async onMobileCopy(): Promise<void> {
+    const text = this.message().content;
+
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      // Clipboard API unavailable; silently ignore.
+    }
+
+    this.closeMobileActions();
+  }
+
   removeEmbed(url: string): void {
     this.embedRemoved.emit({
       messageId: this.message().id,

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/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html

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

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

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

toju-app/src/app/domains/direct-call/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"
@@ -97,29 +119,40 @@
     </div>
 
     @if (showGifPicker()) {
-      <div
-        class="fixed inset-0 z-[89]"
-        tabindex="0"
-        role="button"
-        aria-label="Close GIF picker"
-        (click)="closeGifPicker()"
-        (keydown.enter)="closeGifPicker()"
-        (keydown.space)="closeGifPicker()"
-      ></div>
-
-      <div class="pointer-events-none fixed inset-0 z-[90]">
+      @if (isMobile()) {
+        <app-bottom-sheet (dismissed)="closeGifPicker()">
+          <div appThemeNode="chatGifPickerSurface">
+            <app-klipy-gif-picker
+              (gifSelected)="handleGifSelected($event)"
+              (closed)="closeGifPicker()"
+            />
+          </div>
+        </app-bottom-sheet>
+      } @else {
         <div
-          appThemeNode="chatGifPickerSurface"
-          class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
-          [style.bottom.px]="composerBottomPadding() + 8"
-          [style.right.px]="gifPickerAnchorRight()"
-        >
-          <app-klipy-gif-picker
-            (gifSelected)="handleGifSelected($event)"
-            (closed)="closeGifPicker()"
-          />
+          class="fixed inset-0 z-[89]"
+          tabindex="0"
+          role="button"
+          aria-label="Close GIF picker"
+          (click)="closeGifPicker()"
+          (keydown.enter)="closeGifPicker()"
+          (keydown.space)="closeGifPicker()"
+        ></div>
+
+        <div class="pointer-events-none fixed inset-0 z-[90]">
+          <div
+            appThemeNode="chatGifPickerSurface"
+            class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
+            [style.bottom.px]="composerBottomPadding() + 8"
+            [style.right.px]="gifPickerAnchorRight()"
+          >
+            <app-klipy-gif-picker
+              (gifSelected)="handleGifSelected($event)"
+              (closed)="closeGifPicker()"
+            />
+          </div>
         </div>
-      </div>
+      }
     }
 
     <app-chat-message-overlays

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

@@ -15,7 +15,12 @@ import { Store } from '@ngrx/store';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
 import { ElectronBridgeService } from '../../../../core/platform/electron/electron-bridge.service';
-import { UserAvatarComponent } from '../../../../shared';
+import { ViewportService } from '../../../../core/platform';
+import {
+  BottomSheetComponent,
+  ProfileCardService,
+  UserAvatarComponent
+} from '../../../../shared';
 import { DirectCallService } from '../../../direct-call';
 import { Attachment, AttachmentFacade } from '../../../attachment';
 import { ThemeNodeDirective } from '../../../theme';
@@ -61,6 +66,7 @@ interface DmStatusLabel {
     ChatMessageListComponent,
     ChatMessageOverlaysComponent,
     KlipyGifPickerComponent,
+    BottomSheetComponent,
     NgIcon,
     ThemeNodeDirective,
     UserAvatarComponent
@@ -80,8 +86,11 @@ 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;
+  readonly isMobile = this.viewport.isMobile;
   readonly directCalls = inject(DirectCallService);
   readonly directMessages = inject(DirectMessageService);
   readonly currentUser = this.store.selectSignal(selectCurrentUser);
@@ -305,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-chat-panel.component.html

@@ -1,6 +1,6 @@
 <main
   appThemeNode="dmChatPanel"
-  class="relative min-h-0 min-w-0 overflow-hidden bg-background"
+  class="relative h-full min-h-0 w-full min-w-0 overflow-hidden bg-background"
   [ngStyle]="chatPanelStyles()"
 >
   <app-dm-chat />

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

@@ -1,7 +1,69 @@
-<div
-  class="grid h-full min-h-0 overflow-hidden bg-background"
-  [ngStyle]="layoutStyles()"
->
-  <app-dm-conversations-panel />
-  <app-dm-chat-panel />
-</div>
+@if (isMobile()) {
+  <!-- Mobile: Swiper-driven page stack (conversations -> chat) -->
+  <swiper-container
+    #swiperEl
+    class="block h-full min-h-0 w-full bg-background"
+    slides-per-view="1"
+    space-between="0"
+    initial-slide="0"
+    threshold="10"
+    resistance-ratio="0"
+  >
+    <swiper-slide class="block h-full w-full">
+      <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
+            (conversationSelected)="setMobilePage('chat')"
+            class="block h-full w-full"
+          />
+        </div>
+      </div>
+    </swiper-slide>
+
+    <swiper-slide class="block h-full w-full">
+      <div class="flex h-full w-full min-h-0 flex-col overflow-hidden">
+        <div class="flex shrink-0 items-center gap-2 border-b border-border bg-card px-3 py-2">
+          <button
+            type="button"
+            (click)="setMobilePage('conversations')"
+            class="grid h-11 w-11 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+            aria-label="Back to conversations"
+          >
+            <ng-icon
+              name="lucideChevronLeft"
+              class="h-5 w-5"
+            />
+          </button>
+          <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" />
+        </div>
+      </div>
+    </swiper-slide>
+  </swiper-container>
+} @else {
+  <!-- Desktop: theme-driven 2-pane grid layout -->
+  <div
+    class="grid h-full min-h-0 overflow-hidden bg-background"
+    [ngStyle]="layoutStyles()"
+  >
+    <app-dm-conversations-panel />
+    <app-dm-chat-panel />
+  </div>
+}

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

@@ -1,46 +1,107 @@
 /* eslint-disable @typescript-eslint/member-ordering */
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   Component,
+  ElementRef,
+  NgZone,
+  OnDestroy,
   computed,
   effect,
   inject,
-  OnDestroy
+  signal,
+  viewChild
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 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, 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';
 
+/** Mobile-only page identifier within the DM workspace flow. */
+export type DmWorkspaceMobilePage = 'conversations' | 'chat';
+
+const PAGE_TO_INDEX: Record<DmWorkspaceMobilePage, number> = {
+  conversations: 0,
+  chat: 1
+};
+const INDEX_TO_PAGE: DmWorkspaceMobilePage[] = ['conversations', 'chat'];
+
+interface SwiperElement extends HTMLElement {
+  swiper?: { activeIndex: number; slideTo: (index: number, speed?: number) => void };
+}
+
 @Component({
   selector: 'app-dm-workspace',
   standalone: true,
   imports: [
     CommonModule,
+    NgIcon,
     DmChatPanelComponent,
-    DmConversationsPanelComponent
+    DmConversationsPanelComponent,
+    ServersRailComponent
   ],
+  viewProviders: [provideIcons({ lucideChevronLeft, lucidePhoneCall })],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: './dm-workspace.component.html'
 })
 export class DmWorkspaceComponent implements OnDestroy {
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
   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);
   readonly routeConversationId = toSignal(this.route.paramMap.pipe(map((params) => params.get('conversationId'))), {
     initialValue: this.route.snapshot.paramMap.get('conversationId')
   });
   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');
 
   constructor() {
     effect(() => {
       const conversationId = this.routeConversationId();
+      const isMobile = this.isMobile();
 
       if (conversationId) {
         void this.directMessages.openConversation(conversationId);
+
+        // Only auto-advance to the chat page when the conversation actually changes.
+        // Without this, pressing Back to the conversations list immediately bounces
+        // us forward again because the conversation id is still the same.
+        if (isMobile && conversationId !== this.lastSeenConversationId) {
+          this.mobilePage.set('chat');
+        }
+
+        this.lastSeenConversationId = conversationId;
+        return;
+      }
+
+      this.lastSeenConversationId = null;
+
+      // On mobile, stay on the conversations list and let the user pick one explicitly.
+      if (isMobile) {
+        this.mobilePage.set('conversations');
         return;
       }
 
@@ -50,9 +111,63 @@ export class DmWorkspaceComponent implements OnDestroy {
         void this.router.navigate(['/dm', firstConversation.id], { replaceUrl: true });
       }
     });
+
+    // Mirror `mobilePage` into the Swiper instance so route-driven page changes and the
+    // header back button actually slide the carousel.
+    effect(() => {
+      const el = this.swiperRef()?.nativeElement;
+      const targetIndex = PAGE_TO_INDEX[this.mobilePage()];
+
+      if (el?.swiper && el.swiper.activeIndex !== targetIndex) {
+        el.swiper.slideTo(targetIndex);
+      }
+    });
+
+    // Bridge Swiper's slidechange event back into `mobilePage`.
+    effect((onCleanup) => {
+      const el = this.swiperRef()?.nativeElement;
+
+      if (!el || el === this.swiperListenerAttached) {
+        return;
+      }
+
+      const handler = (event: Event) => {
+        const detail = (event as CustomEvent).detail;
+        const swiper = Array.isArray(detail) ? detail[0] : detail;
+        const index = swiper?.activeIndex ?? 0;
+        const page = INDEX_TO_PAGE[index] ?? 'conversations';
+
+        this.zone.run(() => this.mobilePage.set(page));
+      };
+
+      el.addEventListener('swiperslidechange', handler);
+      this.swiperListenerAttached = el;
+
+      onCleanup(() => {
+        el.removeEventListener('swiperslidechange', handler);
+
+        if (this.swiperListenerAttached === el) {
+          this.swiperListenerAttached = null;
+        }
+      });
+    });
+  }
+
+  /** Set the active mobile page. No-op on desktop. */
+  setMobilePage(page: DmWorkspaceMobilePage): void {
+    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-action-menu/plugin-action-menu.service.ts

@@ -15,6 +15,7 @@ import {
   fromEvent
 } from 'rxjs';
 import { PluginActionMenuComponent } from './plugin-action-menu.component';
+import { ViewportService } from '../../../../core/platform';
 
 const GAP = 10;
 const VIEWPORT_MARGIN = 8;
@@ -28,6 +29,7 @@ const POSITIONS: ConnectedPosition[] = [
 @Injectable({ providedIn: 'root' })
 export class PluginActionMenuService {
   private readonly overlay = inject(Overlay);
+  private readonly viewport = inject(ViewportService);
   private currentOrigin: HTMLElement | null = null;
   private overlayRef: OverlayRef | null = null;
   private overlaySubscriptions: Subscription | null = null;
@@ -47,20 +49,38 @@ export class PluginActionMenuService {
     }
 
     const elementRef = origin instanceof ElementRef ? origin : new ElementRef(origin);
+    const isMobile = this.viewport.isMobile();
 
     this.currentOrigin = rawEl;
 
-    const positionStrategy = this.overlay
-      .position()
-      .flexibleConnectedTo(elementRef)
-      .withPositions(POSITIONS)
-      .withViewportMargin(VIEWPORT_MARGIN)
-      .withPush(true);
+    if (isMobile) {
+      const positionStrategy = this.overlay
+        .position()
+        .global()
+        .left('0')
+        .right('0')
+        .bottom('0');
 
-    this.overlayRef = this.overlay.create({
-      positionStrategy,
-      scrollStrategy: this.overlay.scrollStrategies.noop()
-    });
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+        scrollStrategy: this.overlay.scrollStrategies.block(),
+        hasBackdrop: true,
+        backdropClass: 'cdk-overlay-dark-backdrop',
+        panelClass: 'metoyou-bottom-sheet-panel'
+      });
+    } else {
+      const positionStrategy = this.overlay
+        .position()
+        .flexibleConnectedTo(elementRef)
+        .withPositions(POSITIONS)
+        .withViewportMargin(VIEWPORT_MARGIN)
+        .withPush(true);
+
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+        scrollStrategy: this.overlay.scrollStrategies.noop()
+      });
+    }
 
     this.syncThemeVars();
 
@@ -68,6 +88,14 @@ export class PluginActionMenuService {
     const subscriptions = new Subscription();
 
     subscriptions.add(componentRef.instance.closed.subscribe(() => this.close()));
+
+    if (isMobile) {
+      subscriptions.add(this.overlayRef.backdropClick().subscribe(() => this.close()));
+      this.overlaySubscriptions = subscriptions;
+
+      return;
+    }
+
     subscriptions.add(fromEvent<PointerEvent>(document, 'pointerdown')
       .pipe(
         filter((event) => {

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

@@ -1,6 +1,56 @@
 <div class="flex h-full min-h-0 flex-col">
   <div class="border-b border-border px-3 py-3">
-    <div class="flex flex-col gap-2 md:flex-row md:items-center">
+    <!--
+      Mobile-only header row:
+        [Back] ----- Search ----- [Settings]
+      Hidden on >=md where the original inline header (search bar + buttons) is used.
+    -->
+    <div class="mb-2 flex items-center gap-2 md:hidden">
+      <button
+        type="button"
+        aria-label="Back to server view"
+        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"
+        [class.invisible]="!canGoBack()"
+        [disabled]="!canGoBack()"
+        (click)="goBack()"
+      >
+        <ng-icon
+          name="lucideArrowLeft"
+          class="h-5 w-5"
+        />
+      </button>
+
+      <h1 class="min-w-0 flex-1 truncate text-center text-base font-semibold text-foreground">Search</h1>
+
+      @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">
       <div class="relative min-w-0 flex-1">
         <ng-icon
           name="lucideSearch"
@@ -16,6 +66,7 @@
         />
       </div>
 
+      <!-- Create button is shown inline next to the search input on all sizes; Settings is desktop-only here (mobile uses the top header row above). -->
       <div class="flex shrink-0 items-center gap-2">
         <button
           type="button"
@@ -27,12 +78,12 @@
             name="lucidePlus"
             class="h-4 w-4"
           />
-          Create
+          <span>Create</span>
         </button>
 
         <button
           type="button"
-          class="grid h-10 w-10 place-items-center rounded-lg border border-border bg-secondary transition-colors hover:bg-secondary/80"
+          class="hidden h-10 w-10 place-items-center rounded-lg border border-border bg-secondary transition-colors hover:bg-secondary/80 md:grid"
           title="Settings"
           (click)="openSettings()"
         >
@@ -60,13 +111,51 @@
     }
   </div>
 
+  <!-- Mobile tab strip: toggle between People and Servers panes (hidden on >=md) -->
+  <div
+    role="tablist"
+    aria-label="Search results"
+    class="flex border-b border-border md:hidden"
+  >
+    <button
+      type="button"
+      role="tab"
+      [attr.aria-selected]="mobileTab() === 'people'"
+      class="flex-1 px-3 py-2.5 text-sm font-medium transition-colors border-b-2"
+      [class.border-primary]="mobileTab() === 'people'"
+      [class.text-foreground]="mobileTab() === 'people'"
+      [class.border-transparent]="mobileTab() !== 'people'"
+      [class.text-muted-foreground]="mobileTab() !== 'people'"
+      (click)="mobileTab.set('people')"
+    >
+      People
+    </button>
+    <button
+      type="button"
+      role="tab"
+      [attr.aria-selected]="mobileTab() === 'servers'"
+      class="flex-1 px-3 py-2.5 text-sm font-medium transition-colors border-b-2"
+      [class.border-primary]="mobileTab() === 'servers'"
+      [class.text-foreground]="mobileTab() === 'servers'"
+      [class.border-transparent]="mobileTab() !== 'servers'"
+      [class.text-muted-foreground]="mobileTab() !== 'servers'"
+      (click)="mobileTab.set('servers')"
+    >
+      Servers ({{ searchResults().length }})
+    </button>
+  </div>
+
   <div class="grid min-h-0 flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[minmax(300px,380px)_1fr]">
     <app-user-search-list
       class="min-h-0 overflow-y-auto border-b border-border lg:border-b-0 lg:border-r"
+      [class.hidden]="isMobile() && mobileTab() !== 'people'"
       [searchQuery]="searchQuery"
     />
 
-    <section class="min-h-0 overflow-y-auto">
+    <section
+      class="min-h-0 overflow-y-auto"
+      [class.hidden]="isMobile() && mobileTab() !== 'servers'"
+    >
       <div class="sticky top-0 z-10 flex items-center justify-between border-b border-border bg-background/95 px-3 py-2 backdrop-blur">
         <div>
           <h3 class="text-sm font-semibold text-foreground">Servers</h3>
@@ -215,7 +304,7 @@
                   } @else {
                     <button
                       type="button"
-                      class="pointer-events-none scale-95 rounded-md bg-primary px-2.5 py-1.5 text-xs font-semibold text-primary-foreground opacity-0 transition-[opacity,transform] duration-75 ease-out hover:scale-100 hover:opacity-100 group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:scale-100 group-focus-within:opacity-100"
+                      class="rounded-md bg-primary px-2.5 py-1.5 text-xs font-semibold text-primary-foreground transition-[opacity,transform] duration-75 ease-out md:pointer-events-none md:scale-95 md:opacity-0 md:hover:scale-100 md:hover:opacity-100 md:group-hover:pointer-events-auto md:group-hover:scale-100 md:group-hover:opacity-100 md:group-focus-within:pointer-events-auto md:group-focus-within:scale-100 md:group-focus-within:opacity-100"
                       [attr.aria-label]="'Join ' + server.name"
                       (click)="joinServer(server)"
                     >

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

@@ -18,6 +18,7 @@ import {
 } from 'rxjs';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
+  lucideArrowLeft,
   lucideExternalLink,
   lucideFileText,
   lucideSearch,
@@ -26,7 +27,8 @@ import {
   lucideGlobe,
   lucidePlus,
   lucideSettings,
-  lucideChevronDown
+  lucideChevronDown,
+  lucideLogIn
 } from '@ng-icons/lucide';
 
 import { RoomsActions } from '../../../../store/rooms/rooms.actions';
@@ -34,14 +36,15 @@ import {
   selectSearchResults,
   selectIsSearching,
   selectRoomsError,
-  selectSavedRooms
+  selectSavedRooms,
+  selectCurrentRoom
 } from '../../../../store/rooms/rooms.selectors';
 import {
   Room,
   User,
   type PluginRequirementSummary
 } from '../../../../shared-kernel';
-import { ExternalLinkService } from '../../../../core/platform';
+import { ExternalLinkService, ViewportService } from '../../../../core/platform';
 import { SettingsModalService } from '../../../../core/services/settings-modal.service';
 import { DatabaseService } from '../../../../infrastructure/persistence';
 import { type ServerInfo } from '../../domain/models/server-directory.model';
@@ -83,6 +86,7 @@ interface JoinPluginConsentDialog {
   ],
   viewProviders: [
     provideIcons({
+      lucideArrowLeft,
       lucideExternalLink,
       lucideFileText,
       lucideSearch,
@@ -91,7 +95,8 @@ interface JoinPluginConsentDialog {
       lucideGlobe,
       lucidePlus,
       lucideSettings,
-      lucideChevronDown
+      lucideChevronDown,
+      lucideLogIn
     })
   ],
   templateUrl: './server-search.component.html'
@@ -110,14 +115,22 @@ export class ServerSearchComponent implements OnInit {
   private webrtc = inject(RealtimeSessionFacade);
   private pluginRequirements = inject(PluginRequirementService);
   private pluginStore = inject(PluginStoreService);
+  private viewport = inject(ViewportService);
   private searchSubject = new Subject<string>();
   private banLookupRequestVersion = 0;
 
+  /** True on mobile breakpoints. Drives the tabbed mobile layout. */
+  readonly isMobile = this.viewport.isMobile;
+
+  /** Active mobile tab. Ignored on desktop where both panes are visible side-by-side. */
+  readonly mobileTab = signal<'people' | 'servers'>('servers');
+
   searchQuery = '';
   searchResults = this.store.selectSignal(selectSearchResults);
   isSearching = this.store.selectSignal(selectIsSearching);
   error = this.store.selectSignal(selectRoomsError);
   savedRooms = this.store.selectSignal(selectSavedRooms);
+  currentRoom = this.store.selectSignal(selectCurrentRoom);
   currentUser = this.store.selectSignal(selectCurrentUser);
   activeEndpoints = this.serverDirectory.activeServers;
   bannedServerLookup = signal<Record<string, boolean>>({});
@@ -235,6 +248,29 @@ 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
+   * joined any servers.
+   */
+  goBack(): void {
+    const target = this.currentRoom() ?? this.savedRooms()[0] ?? null;
+
+    if (target) {
+      this.store.dispatch(RoomsActions.viewServer({ room: target }));
+    }
+  }
+
+  /** True when the back button has a destination (user is in or has joined at least one server). */
+  canGoBack(): boolean {
+    return !!this.currentRoom() || this.savedRooms().length > 0;
+  }
+
   /** Join a previously saved room by converting it to a ServerInfo payload. */
   joinSavedRoom(room: Room): void {
     this.openJoinedRoom(room);

toju-app/src/app/domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component.html

@@ -63,17 +63,19 @@
           />
         </button>
 
-        <button
-          (click)="toggleScreenShare()"
-          type="button"
-          [class]="getCompactScreenShareClass()"
-          title="Toggle Screen Share"
-        >
-          <ng-icon
-            [name]="isScreenSharing() ? 'lucideMonitorOff' : 'lucideMonitor'"
-            class="w-4 h-4"
-          />
-        </button>
+        @if (!isMobile()) {
+          <button
+            (click)="toggleScreenShare()"
+            type="button"
+            [class]="getCompactScreenShareClass()"
+            title="Toggle Screen Share"
+          >
+            <ng-icon
+              [name]="isScreenSharing() ? 'lucideMonitorOff' : 'lucideMonitor'"
+              class="w-4 h-4"
+            />
+          </button>
+        }
 
         <app-debug-console
           launcherVariant="compact"

toju-app/src/app/domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component.ts

@@ -24,6 +24,7 @@ import { loadVoiceSettingsFromStorage, saveVoiceSettingsToStorage } from '../../
 import { VoiceConnectionFacade } from '../../../../domains/voice-connection';
 import { VoicePlaybackService } from '../../../../domains/voice-connection';
 import { ScreenShareFacade, ScreenShareQuality } from '../../../../domains/screen-share';
+import { ViewportService } from '../../../../core/platform';
 import { UsersActions } from '../../../../store/users/users.actions';
 import { selectCurrentUser } from '../../../../store/users/users.selectors';
 import { DebugConsoleComponent, ScreenShareQualityDialogComponent } from '../../../../shared';
@@ -59,6 +60,8 @@ import { ThemeNodeDirective } from '../../../../domains/theme';
 export class FloatingVoiceControlsComponent implements OnInit {
   private readonly webrtcService = inject(VoiceConnectionFacade);
   private readonly screenShareService = inject(ScreenShareFacade);
+  private readonly viewport = inject(ViewportService);
+  readonly isMobile = this.viewport.isMobile;
   private readonly voiceSessionService = inject(VoiceSessionFacade);
   private readonly voicePlayback = inject(VoicePlaybackService);
   private readonly store = inject(Store);

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

@@ -1,71 +1,203 @@
 <div class="flex h-full flex-col bg-background">
   @if (currentRoom()) {
-    <div
-      class="grid min-h-0 flex-1 overflow-hidden"
-      [ngStyle]="roomLayoutStyles()"
-    >
-      <aside
-        appThemeNode="chatRoomChannelsPanel"
-        class="flex min-h-0 overflow-hidden border-r border-border bg-card"
-        [ngStyle]="channelsPanelLayoutStyles()"
+    @if (isMobile()) {
+      <!-- Mobile: Swiper-driven page stack (channels -> main -> members) -->
+      <swiper-container
+        #swiperEl
+        class="block min-h-0 w-full flex-1"
+        slides-per-view="1"
+        space-between="0"
+        initial-slide="0"
+        threshold="10"
+        resistance-ratio="0"
       >
-        <app-rooms-side-panel
-          panelMode="channels"
-          class="block h-full w-full"
-        />
-      </aside>
-
-      <main
-        appThemeNode="chatRoomMainPanel"
-        class="relative min-h-0 min-w-0 overflow-hidden bg-background"
-        [ngStyle]="mainPanelLayoutStyles()"
-      >
-        @if (!isVoiceWorkspaceExpanded()) {
-          @if (hasTextChannels()) {
-            <div class="h-full overflow-hidden">
-              <app-chat-messages />
+        <swiper-slide class="block h-full w-full">
+          <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 bg-card">
+              <app-rooms-side-panel
+                panelMode="channels"
+                (textChannelSelected)="setMobilePage('main')"
+                class="block h-full w-full"
+              />
             </div>
-          } @else {
-            <div
-              appThemeNode="chatRoomEmptyState"
-              class="flex h-full items-center justify-center px-6"
-            >
-              <div class="max-w-md text-center text-muted-foreground">
-                <div
-                  data-theme-slot="icon"
-                  class="theme-icon-slot mx-auto mb-4 h-14 w-14 items-center justify-center rounded-3xl border border-border/70 bg-secondary/70 bg-center bg-cover bg-no-repeat text-sm font-semibold uppercase tracking-[0.18em] text-foreground"
-                ></div>
+          </div>
+        </swiper-slide>
+
+        <swiper-slide class="block h-full w-full">
+          <div class="flex h-full w-full min-h-0 flex-col overflow-hidden bg-background">
+            <div class="flex shrink-0 items-center gap-2 border-b border-border bg-card px-3 py-2">
+              <button
+                type="button"
+                (click)="setMobilePage('channels')"
+                class="grid h-11 w-11 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                aria-label="Back to channels"
+              >
                 <ng-icon
-                  name="lucideHash"
-                  class="mx-auto mb-4 h-16 w-16 opacity-30"
+                  name="lucideChevronLeft"
+                  class="h-5 w-5"
                 />
-                <h2
-                  data-theme-slot="text"
-                  class="mb-2 text-xl font-medium text-foreground"
-                >
-                  No text channels
-                </h2>
-                <p class="text-sm">There are no existing text channels currently.</p>
+              </button>
+              <div class="min-w-0 flex-1">
+                @if (activeChannel(); as channel) {
+                  <p class="flex min-w-0 items-center gap-1 truncate text-sm font-semibold text-foreground">
+                    @if (channel.type === 'text') {
+                      <ng-icon
+                        name="lucideHash"
+                        class="h-4 w-4 shrink-0 text-muted-foreground"
+                      />
+                    }
+                    <span class="truncate">{{ channel.name }}</span>
+                  </p>
+                } @else {
+                  <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')"
+                class="grid h-11 w-11 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                aria-label="Show members"
+              >
+                <ng-icon
+                  name="lucideUsers"
+                  class="h-5 w-5"
+                />
+              </button>
             </div>
-          }
-        }
 
-        <app-voice-workspace />
-      </main>
+            <main class="relative min-h-0 min-w-0 flex-1 overflow-hidden bg-background">
+              @if (!isVoiceWorkspaceExpanded()) {
+                @if (hasTextChannels()) {
+                  <div class="h-full overflow-hidden">
+                    <app-chat-messages />
+                  </div>
+                } @else {
+                  <div class="flex h-full items-center justify-center px-6">
+                    <div class="max-w-md text-center text-muted-foreground">
+                      <ng-icon
+                        name="lucideHash"
+                        class="mx-auto mb-4 h-16 w-16 opacity-30"
+                      />
+                      <h2 class="mb-2 text-xl font-medium text-foreground">No text channels</h2>
+                      <p class="text-sm">There are no existing text channels currently.</p>
+                    </div>
+                  </div>
+                }
+              }
 
-      <aside
-        appThemeNode="chatRoomMembersPanel"
-        class="flex min-h-0 overflow-hidden border-l border-border bg-card"
-        [ngStyle]="membersPanelLayoutStyles()"
+              <app-voice-workspace />
+            </main>
+          </div>
+        </swiper-slide>
+
+        <swiper-slide class="block h-full w-full">
+          <div class="flex h-full w-full min-h-0 flex-col overflow-hidden bg-card">
+            <div class="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2">
+              <button
+                type="button"
+                (click)="setMobilePage('main')"
+                class="grid h-11 w-11 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                aria-label="Back to chat"
+              >
+                <ng-icon
+                  name="lucideChevronLeft"
+                  class="h-5 w-5"
+                />
+              </button>
+              <p class="truncate text-sm font-semibold text-foreground">Members</p>
+            </div>
+            <app-rooms-side-panel
+              panelMode="users"
+              [showVoiceControls]="false"
+              class="block h-full w-full"
+            />
+          </div>
+        </swiper-slide>
+      </swiper-container>
+    } @else {
+      <!-- Desktop: theme-driven 3-pane grid layout -->
+      <div
+        class="grid min-h-0 flex-1 overflow-hidden"
+        [ngStyle]="roomLayoutStyles()"
       >
-        <app-rooms-side-panel
-          panelMode="users"
-          [showVoiceControls]="false"
-          class="block h-full w-full"
-        />
-      </aside>
-    </div>
+        <aside
+          appThemeNode="chatRoomChannelsPanel"
+          class="flex min-h-0 overflow-hidden border-r border-border bg-card"
+          [ngStyle]="channelsPanelLayoutStyles()"
+        >
+          <app-rooms-side-panel
+            panelMode="channels"
+            class="block h-full w-full"
+          />
+        </aside>
+
+        <main
+          appThemeNode="chatRoomMainPanel"
+          class="relative min-h-0 min-w-0 overflow-hidden bg-background"
+          [ngStyle]="mainPanelLayoutStyles()"
+        >
+          @if (!isVoiceWorkspaceExpanded()) {
+            @if (hasTextChannels()) {
+              <div class="h-full overflow-hidden">
+                <app-chat-messages />
+              </div>
+            } @else {
+              <div
+                appThemeNode="chatRoomEmptyState"
+                class="flex h-full items-center justify-center px-6"
+              >
+                <div class="max-w-md text-center text-muted-foreground">
+                  <div
+                    data-theme-slot="icon"
+                    class="theme-icon-slot mx-auto mb-4 h-14 w-14 items-center justify-center rounded-3xl border border-border/70 bg-secondary/70 bg-center bg-cover bg-no-repeat text-sm font-semibold uppercase tracking-[0.18em] text-foreground"
+                  ></div>
+                  <ng-icon
+                    name="lucideHash"
+                    class="mx-auto mb-4 h-16 w-16 opacity-30"
+                  />
+                  <h2
+                    data-theme-slot="text"
+                    class="mb-2 text-xl font-medium text-foreground"
+                  >
+                    No text channels
+                  </h2>
+                  <p class="text-sm">There are no existing text channels currently.</p>
+                </div>
+              </div>
+            }
+          }
+
+          <app-voice-workspace />
+        </main>
+
+        <aside
+          appThemeNode="chatRoomMembersPanel"
+          class="flex min-h-0 overflow-hidden border-l border-border bg-card"
+          [ngStyle]="membersPanelLayoutStyles()"
+        >
+          <app-rooms-side-panel
+            panelMode="users"
+            [showVoiceControls]="false"
+            class="block h-full w-full"
+          />
+        </aside>
+      </div>
+    }
   } @else {
     <div
       appThemeNode="chatRoomEmptyState"

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

@@ -1,9 +1,14 @@
 /* eslint-disable @typescript-eslint/member-ordering */
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   Component,
+  ElementRef,
+  NgZone,
   computed,
+  effect,
   inject,
-  signal
+  signal,
+  viewChild
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Store } from '@ngrx/store';
@@ -15,18 +20,44 @@ import {
   lucideUsers,
   lucideMenu,
   lucideX,
-  lucideChevronLeft
+  lucideChevronLeft,
+  lucidePhoneCall
 } from '@ng-icons/lucide';
 
 import { ChatMessagesComponent } from '../../../domains/chat/feature/chat-messages/chat-messages.component';
 import { RoomsSidePanelComponent } from '../rooms-side-panel/rooms-side-panel.component';
 import { VoiceWorkspaceComponent } from '../voice-workspace/voice-workspace.component';
+import { ServersRailComponent } from '../../servers/servers-rail/servers-rail.component';
 
-import { selectCurrentRoom, selectTextChannels } from '../../../store/rooms/rooms.selectors';
+import {
+  selectActiveChannelId,
+  selectCurrentRoom,
+  selectTextChannels
+} from '../../../store/rooms/rooms.selectors';
 import { SettingsModalService } from '../../../core/services/settings-modal.service';
+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';
+
+const PAGE_TO_INDEX: Record<ChatRoomMobilePage, number> = {
+  channels: 0,
+  main: 1,
+  members: 2
+};
+const INDEX_TO_PAGE: ChatRoomMobilePage[] = [
+  'channels',
+  'main',
+  'members'
+];
+
+interface SwiperElement extends HTMLElement {
+  swiper?: { activeIndex: number; slideTo: (index: number, speed?: number) => void };
+}
 
 @Component({
   selector: 'app-chat-room',
@@ -37,6 +68,7 @@ import { ThemeNodeDirective, ThemeService } from '../../../domains/theme';
     ChatMessagesComponent,
     VoiceWorkspaceComponent,
     RoomsSidePanelComponent,
+    ServersRailComponent,
     ThemeNodeDirective
   ],
   viewProviders: [
@@ -47,32 +79,154 @@ import { ThemeNodeDirective, ThemeService } from '../../../domains/theme';
       lucideUsers,
       lucideMenu,
       lucideX,
-      lucideChevronLeft
+      lucideChevronLeft,
+      lucidePhoneCall
     })
   ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: './chat-room.component.html'
 })
 /**
  * Main chat room view combining the messages panel, side panels, and admin controls.
+ *
+ * On desktop the three panels (channels | main | members) are rendered side-by-side via the
+ * theme-driven grid layout. On mobile the same panels are rendered as Swiper slides
+ * (channels -> main -> members) so the user can swipe between them. `mobilePage`
+ * remains the source of truth and stays in sync with the active slide.
  */
 export class ChatRoomComponent {
   private readonly store = inject(Store);
   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;
+  private lastSeenRoomId: string | null = null;
+  private swiperListenerAttached: SwiperElement | null = null;
   showMenu = signal(false);
   showAdminPanel = signal(false);
 
+  /** Active page within the mobile single-pane navigation flow. Ignored on desktop. */
+  readonly mobilePage = signal<ChatRoomMobilePage>('channels');
+  readonly isMobile = this.viewport.isMobile;
+  readonly swiperRef = viewChild<ElementRef<SwiperElement>>('swiperEl');
+
   currentRoom = this.store.selectSignal(selectCurrentRoom);
   isAdmin = this.store.selectSignal(selectIsCurrentUserAdmin);
   textChannels = this.store.selectSignal(selectTextChannels);
+  activeChannelId = this.store.selectSignal(selectActiveChannelId);
+  /**
+   * Resolved channel object for `activeChannelId`. Used on mobile to title the main pane
+   * with the selected channel name instead of the room name.
+   */
+  activeChannel = computed(() => {
+    const id = this.activeChannelId();
+
+    if (!id) {
+      return null;
+    }
+
+    return this.currentRoom()?.channels?.find((channel) => channel.id === id) ?? null;
+  });
   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'));
   membersPanelLayoutStyles = computed(() => this.theme.getLayoutItemStyles('chatRoomMembersPanel'));
 
+  constructor() {
+    // When entering a server, always land on the channels list ("first page") on mobile, even
+    // if a default channel is pre-selected. Once inside the server, *changing* channels
+    // (i.e. user taps a channel in the list) advances to the main pane so the user sees the chat.
+    effect(() => {
+      const channelId = this.activeChannelId();
+      const roomId = this.currentRoom()?.id ?? null;
+      const isRoomChange = roomId !== this.lastSeenRoomId;
+
+      this.lastSeenRoomId = roomId;
+
+      if (!this.isMobile()) {
+        this.lastSeenChannelId = channelId ?? null;
+        return;
+      }
+
+      if (isRoomChange) {
+        // New server: show the channels list and don't auto-advance.
+        this.lastSeenChannelId = channelId ?? null;
+        this.mobilePage.set('channels');
+        return;
+      }
+
+      if (channelId && channelId !== this.lastSeenChannelId) {
+        this.mobilePage.set('main');
+      }
+
+      this.lastSeenChannelId = channelId ?? null;
+    });
+
+    // Mirror `mobilePage` into the Swiper instance so back-button taps and the
+    // channel-selected auto-advance actually slide the carousel.
+    effect(() => {
+      const el = this.swiperRef()?.nativeElement;
+      const targetIndex = PAGE_TO_INDEX[this.mobilePage()];
+
+      if (el?.swiper && el.swiper.activeIndex !== targetIndex) {
+        el.swiper.slideTo(targetIndex);
+      }
+    });
+
+    // Bridge Swiper's slidechange event back into `mobilePage`.
+    effect((onCleanup) => {
+      const el = this.swiperRef()?.nativeElement;
+
+      if (!el || el === this.swiperListenerAttached) {
+        return;
+      }
+
+      const handler = (event: Event) => {
+        const detail = (event as CustomEvent).detail;
+        const swiper = Array.isArray(detail) ? detail[0] : detail;
+        const index = swiper?.activeIndex ?? 0;
+        const page = INDEX_TO_PAGE[index] ?? 'channels';
+
+        this.zone.run(() => this.mobilePage.set(page));
+      };
+
+      el.addEventListener('swiperslidechange', handler);
+      this.swiperListenerAttached = el;
+
+      onCleanup(() => {
+        el.removeEventListener('swiperslidechange', handler);
+
+        if (this.swiperListenerAttached === el) {
+          this.swiperListenerAttached = null;
+        }
+      });
+    });
+  }
+
+  /** Set the active mobile page. No-op on desktop. */
+  setMobilePage(page: ChatRoomMobilePage): void {
+    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();
@@ -82,3 +236,4 @@ export class ChatRoomComponent {
     }
   }
 }
+

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/room/voice-workspace/voice-workspace.component.html

@@ -257,6 +257,7 @@
                     <button
                       type="button"
                       class="inline-flex items-center gap-2 rounded-full bg-primary px-5 py-2.5 font-medium text-primary-foreground transition hover:bg-primary/90"
+                      [class.hidden]="isMobile()"
                       (click)="toggleScreenShare()"
                     >
                       <ng-icon

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

@@ -43,6 +43,7 @@ import {
   ScreenShareQuality,
   ScreenShareStartOptions
 } from '../../../domains/screen-share';
+import { ViewportService } from '../../../core/platform';
 import { selectCurrentRoom } from '../../../store/rooms/rooms.selectors';
 import { UsersActions } from '../../../store/users/users.actions';
 import { selectCurrentUser, selectOnlineUsers } from '../../../store/users/users.selectors';
@@ -90,6 +91,8 @@ export class VoiceWorkspaceComponent {
   private readonly store = inject(Store);
   private readonly webrtc = inject(VoiceConnectionFacade);
   private readonly screenShare = inject(ScreenShareFacade);
+  private readonly viewport = inject(ViewportService);
+  readonly isMobile = this.viewport.isMobile;
   private readonly voicePlayback = inject(VoicePlaybackService);
   private readonly workspacePlayback = inject(VoiceWorkspacePlaybackService);
   private readonly voiceSession = inject(VoiceSessionFacade);

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/features/settings/settings-modal/settings-modal.component.html

@@ -1,8 +1,8 @@
 <!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->
 @if (isOpen() && !isThemeStudioFullscreen()) {
-  <!-- Backdrop -->
+  <!-- Backdrop (hidden on mobile where the modal is full-screen) -->
   <div
-    class="fixed inset-0 z-[90] bg-black/80 backdrop-blur-sm transition-opacity duration-200"
+    class="fixed inset-0 z-[90] hidden bg-black/80 backdrop-blur-sm transition-opacity duration-200 md:block"
     [class.opacity-100]="animating()"
     [class.opacity-0]="!animating()"
     (click)="onBackdropClick()"
@@ -13,15 +13,14 @@
     aria-label="Close settings"
   ></div>
 
-  <!-- Modal -->
-  <div class="fixed inset-0 z-[91] flex items-center justify-center p-4 pointer-events-none">
+  <!-- Modal: full-screen page on mobile, centered dialog on desktop -->
+  <div class="fixed inset-0 z-[91] flex pointer-events-none md:items-center md:justify-center md:p-4">
     <div
       appThemeNode="settingsModalSurface"
-      class="pointer-events-auto relative flex w-full max-w-5xl overflow-hidden rounded-lg border border-border bg-card shadow-lg transition-all duration-200"
-      style="height: min(720px, 88vh)"
+      class="pointer-events-auto relative flex h-full w-full overflow-hidden bg-card transition-all duration-200 md:h-[min(720px,88vh)] md:max-w-5xl md:rounded-lg md:border md:border-border md:shadow-lg"
       [class.scale-100]="animating()"
       [class.opacity-100]="animating()"
-      [class.scale-95]="!animating()"
+      [class.md:scale-95]="!animating()"
       [class.opacity-0]="!animating()"
       (click)="$event.stopPropagation()"
       (keydown.enter)="$event.stopPropagation()"
@@ -31,18 +30,32 @@
       aria-labelledby="settings-modal-title"
       tabindex="-1"
     >
-      <!-- Side Navigation -->
+      <!-- Side Navigation: persistent on desktop; full-width "menu" page on mobile -->
       <nav
         appThemeNode="settingsModalNav"
-        class="flex w-56 flex-shrink-0 flex-col border-r border-border bg-card"
+        class="flex w-full flex-shrink-0 flex-col border-r border-border bg-card md:w-56"
+        [class.hidden]="isMobile() && mobilePage() !== 'menu'"
       >
-        <div class="border-b border-border px-3 py-3">
+        <div class="flex items-center justify-between border-b border-border px-3 py-3">
           <h2
             id="settings-modal-title"
             class="text-lg font-semibold text-foreground"
           >
             Settings
           </h2>
+          @if (isMobile()) {
+            <button
+              (click)="close()"
+              type="button"
+              aria-label="Close settings"
+              class="grid h-9 w-9 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground md:hidden"
+            >
+              <ng-icon
+                name="lucideX"
+                class="w-5 h-5"
+              />
+            </button>
+          }
         </div>
 
         <div class="flex-1 overflow-y-auto py-2">
@@ -52,8 +65,8 @@
             <button
               (click)="navigate(page.id)"
               type="button"
-              class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors"
-              [class.bg-secondary]="activePage() === page.id"
+              class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-2.5 text-sm transition-colors md:py-1.5"
+              [class.bg-secondary]="activePage() === page.id && !isMobile()"
               [class.text-foreground]="activePage() === page.id"
               [class.font-medium]="activePage() === page.id"
               [class.text-muted-foreground]="activePage() !== page.id"
@@ -92,8 +105,8 @@
                   <button
                     (click)="navigate(page.id)"
                     type="button"
-                    class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors"
-                    [class.bg-secondary]="activePage() === page.id"
+                    class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-2.5 text-sm transition-colors md:py-1.5"
+                    [class.bg-secondary]="activePage() === page.id && !isMobile()"
                     [class.text-foreground]="activePage() === page.id"
                     [class.font-medium]="activePage() === page.id"
                     [class.text-muted-foreground]="activePage() !== page.id"
@@ -123,66 +136,85 @@
         </div>
       </nav>
 
-      <!-- Content -->
-      <div class="flex-1 flex flex-col min-w-0">
+      <!-- Content: shown alongside nav on desktop; full-width "detail" page on mobile -->
+      <div
+        class="flex flex-1 flex-col min-w-0"
+        [class.hidden]="isMobile() && mobilePage() !== 'detail'"
+      >
         <!-- Header -->
         <div
           appThemeNode="settingsModalHeader"
-          class="flex items-center justify-between border-b border-border px-5 py-3 flex-shrink-0"
+          class="flex items-center justify-between border-b border-border px-3 py-3 flex-shrink-0 md:px-5"
         >
-          <h3 class="text-lg font-semibold text-foreground">
-            @switch (activePage()) {
-              @case ('general') {
-                General
-              }
-              @case ('plugins') {
-                Client Plugins
-              }
-              @case ('network') {
-                Network
-              }
-              @case ('theme') {
-                Theme Studio
-              }
-              @case ('notifications') {
-                Notifications
-              }
-              @case ('voice') {
-                Voice & Audio
-              }
-              @case ('updates') {
-                Updates
-              }
-              @case ('localApi') {
-                Local API
-              }
-              @case ('data') {
-                Data
-              }
-              @case ('debugging') {
-                Debugging
-              }
-              @case ('server') {
-                Server Settings
-              }
-              @case ('serverPlugins') {
-                Server Plugins
-              }
-              @case ('members') {
-                Members
-              }
-              @case ('bans') {
-                Bans
-              }
-              @case ('permissions') {
-                Permissions
-              }
+          <div class="flex min-w-0 items-center gap-1">
+            @if (isMobile()) {
+              <button
+                (click)="backToMenu()"
+                type="button"
+                aria-label="Back to settings menu"
+                class="grid h-9 w-9 shrink-0 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground md:hidden"
+              >
+                <ng-icon
+                  name="lucideChevronLeft"
+                  class="w-5 h-5"
+                />
+              </button>
             }
-          </h3>
+            <h3 class="truncate text-lg font-semibold text-foreground">
+              @switch (activePage()) {
+                @case ('general') {
+                  General
+                }
+                @case ('plugins') {
+                  Client Plugins
+                }
+                @case ('network') {
+                  Network
+                }
+                @case ('theme') {
+                  Theme Studio
+                }
+                @case ('notifications') {
+                  Notifications
+                }
+                @case ('voice') {
+                  Voice & Audio
+                }
+                @case ('updates') {
+                  Updates
+                }
+                @case ('localApi') {
+                  Local API
+                }
+                @case ('data') {
+                  Data
+                }
+                @case ('debugging') {
+                  Debugging
+                }
+                @case ('server') {
+                  Server Settings
+                }
+                @case ('serverPlugins') {
+                  Server Plugins
+                }
+                @case ('members') {
+                  Members
+                }
+                @case ('bans') {
+                  Bans
+                }
+                @case ('permissions') {
+                  Permissions
+                }
+              }
+            </h3>
+          </div>
           <div class="flex items-center gap-2">
             <button
               (click)="close()"
               type="button"
+              aria-label="Close settings"
               class="grid h-9 w-9 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
             >
               <ng-icon

toju-app/src/app/features/settings/settings-modal/settings-modal.component.ts

@@ -17,6 +17,7 @@ import {
   lucideX,
   lucideBug,
   lucideBell,
+  lucideChevronLeft,
   lucideDownload,
   lucideGlobe,
   lucideAudioLines,
@@ -30,6 +31,7 @@ import {
 } from '@ng-icons/lucide';
 
 import { SettingsModalService, SettingsPage } from '../../../core/services/settings-modal.service';
+import { ViewportService } from '../../../core/platform';
 import { RealtimeSessionFacade } from '../../../core/realtime';
 import { selectSavedRooms, selectCurrentRoom } from '../../../store/rooms/rooms.selectors';
 import { selectCurrentUser } from '../../../store/users/users.selectors';
@@ -83,6 +85,7 @@ import {
       lucideX,
       lucideBug,
       lucideBell,
+      lucideChevronLeft,
       lucideDownload,
       lucideGlobe,
       lucideAudioLines,
@@ -103,9 +106,21 @@ export class SettingsModalComponent {
   private webrtc = inject(RealtimeSessionFacade);
   private theme = inject(ThemeService);
   private themeLibrary = inject(ThemeLibraryService);
+  private viewport = inject(ViewportService);
   readonly thirdPartyLicenses: readonly ThirdPartyLicense[] = THIRD_PARTY_LICENSES;
   private lastRequestedServerId: string | null = null;
 
+  /** True on mobile breakpoints. Drives the full-screen, page-stack layout. */
+  readonly isMobile = this.viewport.isMobile;
+
+  /**
+   * Active mobile sub-page within the settings flow.
+   * 'menu'   -> the section list (nav)
+   * 'detail' -> the selected page content
+   * Ignored on desktop.
+   */
+  readonly mobilePage = signal<'menu' | 'detail'>('menu');
+
   private permissionsComponent = viewChild<PermissionsSettingsComponent>('permissionsComp');
 
   savedRooms = this.store.selectSignal(selectSavedRooms);
@@ -299,6 +314,11 @@ export class SettingsModalComponent {
       }
 
       this.animating.set(true);
+
+      // On mobile, always start on the section list so the user picks the page first.
+      if (this.isMobile()) {
+        this.mobilePage.set('menu');
+      }
     });
 
     effect(() => {
@@ -360,6 +380,12 @@ export class SettingsModalComponent {
     }
 
     if (this.isOpen()) {
+      // On mobile, Escape on the detail page just navigates back to the menu.
+      if (this.isMobile() && this.mobilePage() === 'detail') {
+        this.backToMenu();
+        return;
+      }
+
       this.close();
     }
   }
@@ -386,6 +412,16 @@ export class SettingsModalComponent {
 
   navigate(page: SettingsPage): void {
     this.modal.navigate(page);
+
+    // On mobile, advance to the detail page so the user sees the selected pane.
+    if (this.isMobile()) {
+      this.mobilePage.set('detail');
+    }
+  }
+
+  /** Go back to the section list on mobile. No-op on desktop. */
+  backToMenu(): void {
+    this.mobilePage.set('menu');
   }
 
   openThemeStudio(): void {

toju-app/src/app/features/shell/native-context-menu/native-context-menu.component.ts

@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { ElectronBridgeService } from '../../../core/platform/electron/electron-bridge.service';
+import { ViewportService } from '../../../core/platform/viewport.service';
 import { ContextMenuComponent } from '../../../shared';
 import type { ContextMenuParams } from '../../../core/platform/electron/electron-api.models';
 
@@ -55,11 +56,19 @@ export class NativeContextMenuComponent implements OnInit, OnDestroy {
 
   private readonly document = inject(DOCUMENT);
   private readonly electronBridge = inject(ElectronBridgeService);
+  private readonly viewport = inject(ViewportService);
   private cleanup: (() => void) | null = null;
   private selectionSnapshot: ContextMenuSelectionSnapshot | null = null;
 
   @HostListener('document:contextmenu', ['$event'])
   onDocumentContextMenu(event: MouseEvent): void {
+    // On mobile (non-Electron), let the OS-native context menu handle text inputs,
+    // selection, links, and images. Intercepting here suppresses the OS menu and
+    // leaves the user without copy/paste/select-all affordances.
+    if (this.viewport.isMobile() && !this.electronBridge.isAvailable) {
+      return;
+    }
+
     this.captureSelectionSnapshot(event);
 
     if (this.electronBridge.isAvailable) {

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/bottom-sheet/bottom-sheet.component.html

@@ -0,0 +1,46 @@
+<!-- Dimmed backdrop. Tap to dismiss. -->
+<div
+  class="fixed inset-0 z-[140] bg-black/40 backdrop-blur-sm"
+  (click)="onBackdropClick()"
+  (keydown.enter)="onBackdropClick()"
+  (keydown.space)="onBackdropClick()"
+  role="button"
+  tabindex="0"
+  aria-label="Close"
+></div>
+
+<!--
+  Bottom sheet panel. Slides up from the bottom of the viewport. Drag the top handle downward
+  beyond 80px to dismiss. Inner content is projected by the parent component.
+-->
+<div
+  appThemeNode="bottomSheetSurface"
+  class="bottom-sheet-panel fixed inset-x-0 bottom-0 z-[141] flex max-h-[85vh] flex-col rounded-t-2xl border-x border-t border-border bg-card text-foreground shadow-2xl"
+  [style.transform]="'translateY(' + translateY() + 'px)'"
+  [style.transition]="translateY() === 0 ? 'transform 200ms ease-out' : 'none'"
+  [attr.aria-label]="title() || ariaLabel()"
+  role="dialog"
+  aria-modal="true"
+>
+  <!-- Drag handle + optional title -->
+  <div
+    class="flex shrink-0 cursor-grab touch-none flex-col items-center gap-2 px-4 pb-2 pt-3 active:cursor-grabbing"
+    (touchstart)="onHandleTouchStart($event)"
+    (touchmove)="onHandleTouchMove($event)"
+    (touchend)="onHandleTouchEnd()"
+    (touchcancel)="onHandleTouchEnd()"
+  >
+    <span
+      aria-hidden="true"
+      class="h-1.5 w-10 rounded-full bg-muted-foreground/40"
+    ></span>
+    @if (title()) {
+      <h3 class="text-sm font-semibold text-foreground">{{ title() }}</h3>
+    }
+  </div>
+
+  <!-- Scrollable content area -->
+  <div class="min-h-0 flex-1 overflow-y-auto px-1 pb-[max(env(safe-area-inset-bottom),1rem)]">
+    <ng-content />
+  </div>
+</div>

toju-app/src/app/shared/components/bottom-sheet/bottom-sheet.component.scss

@@ -0,0 +1,27 @@
+/*
+ * Bottom sheet slide-up animation. Applied on initial mount so the panel slides into view.
+ * Drag offsets are applied inline via [style.transform], which override this animation.
+ */
+:host {
+  display: contents;
+}
+
+.bottom-sheet-panel {
+  animation: bottom-sheet-slide-up 220ms ease-out;
+}
+
+@keyframes bottom-sheet-slide-up {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bottom-sheet-panel {
+    animation: none;
+  }
+}

toju-app/src/app/shared/components/bottom-sheet/bottom-sheet.component.ts

@@ -0,0 +1,102 @@
+import {
+  Component,
+  HostListener,
+  computed,
+  input,
+  output,
+  signal
+} from '@angular/core';
+import { ThemeNodeDirective } from '../../../domains/theme';
+
+/**
+ * Mobile bottom-sheet container.
+ *
+ * Renders a backdrop + a panel anchored to the bottom of the viewport that slides up from below.
+ * Intended for use on phone-sized viewports where context menus, action sheets, and confirmation
+ * dialogs are better presented as bottom sheets than as floating popovers or centered modals.
+ *
+ * The component is layout-only: callers project their content via `<ng-content>` and listen for
+ * the `dismissed` output to close themselves. Drag-to-dismiss is supported via touch gestures.
+ *
+ * Desktop callers should not render this component; use the original popover/modal layout instead.
+ *
+ * @example
+ * ```html
+ * @if (isMobile()) {
+ *   <app-bottom-sheet (dismissed)="close()">
+ *     <my-menu-items />
+ *   </app-bottom-sheet>
+ * }
+ * ```
+ */
+@Component({
+  selector: 'app-bottom-sheet',
+  standalone: true,
+  imports: [ThemeNodeDirective],
+  templateUrl: './bottom-sheet.component.html',
+  styleUrl: './bottom-sheet.component.scss'
+})
+export class BottomSheetComponent {
+  /** Optional title rendered at the top of the sheet. Omit for an unlabeled action sheet. */
+  readonly title = input<string | null>(null);
+
+  /** Optional ARIA label when no visible title is provided. */
+  readonly ariaLabel = input<string>('Menu');
+
+  /** Emits when the user dismisses the sheet (backdrop tap, swipe-down, or Escape). */
+  readonly dismissed = output<undefined>();
+
+  /** Pixels the sheet is currently dragged downward. Drives the translate transform. */
+  protected readonly dragOffset = signal(0);
+
+  /** Visible transform offset in CSS pixels (only positive values move the sheet down). */
+  protected readonly translateY = computed(() => Math.max(0, this.dragOffset()));
+
+  private touchStartY: number | null = null;
+
+  @HostListener('document:keydown.escape')
+  protected onEscape(): void {
+    this.dismissed.emit(undefined);
+  }
+
+  protected onBackdropClick(): void {
+    this.dismissed.emit(undefined);
+  }
+
+  protected onHandleTouchStart(event: TouchEvent): void {
+    const touch = event.touches[0];
+
+    if (!touch) {
+      return;
+    }
+
+    this.touchStartY = touch.clientY;
+  }
+
+  protected onHandleTouchMove(event: TouchEvent): void {
+    if (this.touchStartY === null) {
+      return;
+    }
+
+    const touch = event.touches[0];
+
+    if (!touch) {
+      return;
+    }
+
+    const delta = touch.clientY - this.touchStartY;
+
+    // Only allow dragging downward; ignore upward drags.
+    this.dragOffset.set(Math.max(0, delta));
+  }
+
+  protected onHandleTouchEnd(): void {
+    // Dismiss if the user dragged the sheet down by more than 80px; otherwise snap back.
+    if (this.dragOffset() > 80) {
+      this.dismissed.emit(undefined);
+    }
+
+    this.touchStartY = null;
+    this.dragOffset.set(0);
+  }
+}

toju-app/src/app/shared/components/confirm-dialog/confirm-dialog.component.html

@@ -1,46 +1,85 @@
-<!-- Backdrop -->
-<div
-  class="fixed inset-0 z-40 bg-black/30"
-  (click)="cancelled.emit(undefined)"
-  (keydown.enter)="cancelled.emit(undefined)"
-  (keydown.space)="cancelled.emit(undefined)"
-  role="button"
-  tabindex="0"
-  aria-label="Close dialog"
-></div>
-
-<!-- Dialog -->
-<div
-  appThemeNode="confirmDialogSurface"
-  class="fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg shadow-lg"
-  [class]="widthClass()"
->
-  <div class="p-4">
-    <h4 class="font-semibold text-foreground mb-2">{{ title() }}</h4>
-    <div class="text-sm text-muted-foreground">
+<!--
+  Two presentations:
+  - Mobile: rendered through `app-bottom-sheet` so confirmations slide up from the bottom.
+  - Desktop: original centered modal with backdrop.
+-->
+@if (isMobile()) {
+  <app-bottom-sheet
+    [title]="title()"
+    [ariaLabel]="title()"
+    (dismissed)="cancelled.emit(undefined)"
+  >
+    <div class="px-4 pb-3 pt-1 text-sm text-muted-foreground">
       <ng-content />
     </div>
+    <div class="flex gap-2 border-t border-border p-3">
+      <button
+        (click)="cancelled.emit(undefined)"
+        type="button"
+        class="min-h-11 flex-1 rounded-lg bg-secondary px-3 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
+      >
+        {{ cancelLabel() }}
+      </button>
+      <button
+        (click)="confirmed.emit(undefined)"
+        type="button"
+        class="min-h-11 flex-1 rounded-lg px-3 py-2 text-sm transition-colors"
+        [class.bg-primary]="variant() === 'primary'"
+        [class.text-primary-foreground]="variant() === 'primary'"
+        [class.hover:bg-primary/90]="variant() === 'primary'"
+        [class.bg-destructive]="variant() === 'danger'"
+        [class.text-destructive-foreground]="variant() === 'danger'"
+        [class.hover:bg-destructive/90]="variant() === 'danger'"
+      >
+        {{ confirmLabel() }}
+      </button>
+    </div>
+  </app-bottom-sheet>
+} @else {
+  <!-- Backdrop -->
+  <div
+    class="fixed inset-0 z-40 bg-black/30"
+    (click)="cancelled.emit(undefined)"
+    (keydown.enter)="cancelled.emit(undefined)"
+    (keydown.space)="cancelled.emit(undefined)"
+    role="button"
+    tabindex="0"
+    aria-label="Close dialog"
+  ></div>
+
+  <!-- Dialog -->
+  <div
+    appThemeNode="confirmDialogSurface"
+    class="fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg shadow-lg"
+    [class]="widthClass()"
+  >
+    <div class="p-4">
+      <h4 class="font-semibold text-foreground mb-2">{{ title() }}</h4>
+      <div class="text-sm text-muted-foreground">
+        <ng-content />
+      </div>
+    </div>
+    <div class="flex gap-2 p-3 border-t border-border">
+      <button
+        (click)="cancelled.emit(undefined)"
+        type="button"
+        class="flex-1 px-3 py-2 bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors text-sm"
+      >
+        {{ cancelLabel() }}
+      </button>
+      <button
+        (click)="confirmed.emit(undefined)"
+        type="button"
+        class="flex-1 px-3 py-2 rounded-lg transition-colors text-sm"
+        [class.bg-primary]="variant() === 'primary'"
+        [class.text-primary-foreground]="variant() === 'primary'"
+        [class.hover:bg-primary/90]="variant() === 'primary'"
+        [class.bg-destructive]="variant() === 'danger'"
+        [class.text-destructive-foreground]="variant() === 'danger'"
+        [class.hover:bg-destructive/90]="variant() === 'danger'"
+      >
+        {{ confirmLabel() }}
+      </button>
+    </div>
   </div>
-  <div class="flex gap-2 p-3 border-t border-border">
-    <button
-      (click)="cancelled.emit(undefined)"
-      type="button"
-      class="flex-1 px-3 py-2 bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors text-sm"
-    >
-      {{ cancelLabel() }}
-    </button>
-    <button
-      (click)="confirmed.emit(undefined)"
-      type="button"
-      class="flex-1 px-3 py-2 rounded-lg transition-colors text-sm"
-      [class.bg-primary]="variant() === 'primary'"
-      [class.text-primary-foreground]="variant() === 'primary'"
-      [class.hover:bg-primary/90]="variant() === 'primary'"
-      [class.bg-destructive]="variant() === 'danger'"
-      [class.text-destructive-foreground]="variant() === 'danger'"
-      [class.hover:bg-destructive/90]="variant() === 'danger'"
-    >
-      {{ confirmLabel() }}
-    </button>
-  </div>
-</div>
+}

toju-app/src/app/shared/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,15 +1,18 @@
 import {
   Component,
+  HostListener,
+  inject,
   input,
-  output,
-  HostListener
+  output
 } from '@angular/core';
 import { ThemeNodeDirective } from '../../../domains/theme';
+import { ViewportService } from '../../../core/platform';
+import { BottomSheetComponent } from '../bottom-sheet/bottom-sheet.component';
 
 @Component({
   selector: 'app-confirm-dialog',
   standalone: true,
-  imports: [ThemeNodeDirective],
+  imports: [ThemeNodeDirective, BottomSheetComponent],
   templateUrl: './confirm-dialog.component.html',
   host: {
     style: 'display: contents;'
@@ -24,6 +27,8 @@ export class ConfirmDialogComponent {
   confirmed = output<undefined>();
   cancelled = output<undefined>();
 
+  readonly isMobile = inject(ViewportService).isMobile;
+
   @HostListener('document:keydown.escape')
   onEscape(): void {
     this.cancelled.emit(undefined);

toju-app/src/app/shared/components/context-menu/context-menu.component.html

@@ -1,23 +1,40 @@
-<!-- Invisible backdrop that captures clicks outside -->
-<div
-  class="fixed inset-0 z-40"
-  (click)="closed.emit(undefined)"
-  (contextmenu)="$event.preventDefault(); closed.emit(undefined)"
-  (keydown.enter)="closed.emit(undefined)"
-  (keydown.space)="closed.emit(undefined)"
-  role="button"
-  tabindex="0"
-  aria-label="Close menu"
-></div>
-<!-- Positioned menu panel -->
-<div
-  #panel
-  appThemeNode="contextMenuSurface"
-  class="fixed z-50 bg-card border border-border rounded-lg shadow-lg py-1"
-  [class]="widthPx() ? '' : width()"
-  [style.left.px]="clampedX()"
-  [style.top.px]="clampedY()"
-  [style.width.px]="widthPx() || null"
->
-  <ng-content />
-</div>
+<!--
+  ContextMenu has two presentations:
+  - On phone-sized viewports the menu opens as a bottom sheet anchored to the bottom of the screen.
+  - On desktop it remains an absolutely-positioned popover at the requested (x, y) coordinates.
+-->
+@if (isMobile()) {
+  <app-bottom-sheet
+    [title]="sheetTitle()"
+    [ariaLabel]="sheetTitle() || 'Menu'"
+    (dismissed)="closed.emit(undefined)"
+  >
+    <div class="flex flex-col py-1">
+      <ng-content />
+    </div>
+  </app-bottom-sheet>
+} @else {
+  <!-- Invisible backdrop that captures clicks outside -->
+  <div
+    class="fixed inset-0 z-40"
+    (click)="closed.emit(undefined)"
+    (contextmenu)="$event.preventDefault(); closed.emit(undefined)"
+    (keydown.enter)="closed.emit(undefined)"
+    (keydown.space)="closed.emit(undefined)"
+    role="button"
+    tabindex="0"
+    aria-label="Close menu"
+  ></div>
+  <!-- Positioned menu panel -->
+  <div
+    #panel
+    appThemeNode="contextMenuSurface"
+    class="fixed z-50 bg-card border border-border rounded-lg shadow-lg py-1"
+    [class]="widthPx() ? '' : width()"
+    [style.left.px]="clampedX()"
+    [style.top.px]="clampedY()"
+    [style.width.px]="widthPx() || null"
+  >
+    <ng-content />
+  </div>
+}

toju-app/src/app/shared/components/context-menu/context-menu.component.ts

@@ -7,14 +7,17 @@ import {
   ViewChild,
   ElementRef,
   AfterViewInit,
-  OnInit
+  OnInit,
+  inject
 } from '@angular/core';
 import { ThemeNodeDirective } from '../../../domains/theme';
+import { ViewportService } from '../../../core/platform';
+import { BottomSheetComponent } from '../bottom-sheet/bottom-sheet.component';
 
 @Component({
   selector: 'app-context-menu',
   standalone: true,
-  imports: [ThemeNodeDirective],
+  imports: [ThemeNodeDirective, BottomSheetComponent],
   templateUrl: './context-menu.component.html',
   styleUrl: './context-menu.component.scss'
 })
@@ -24,19 +27,32 @@ export class ContextMenuComponent implements OnInit, AfterViewInit {
   y = input.required<number>();
   width = input<string>('w-48');
   widthPx = input<number | null>(null);
+  /** Optional title shown when the menu is presented as a mobile bottom sheet. */
+  sheetTitle = input<string | null>(null);
   closed = output<undefined>();
 
-  @ViewChild('panel', { static: true }) panelRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('panel', { static: false }) panelRef?: ElementRef<HTMLDivElement>;
+
+  private readonly viewport = inject(ViewportService);
+  readonly isMobile = this.viewport.isMobile;
 
   clampedX = signal(0);
   clampedY = signal(0);
 
   ngOnInit(): void {
+    if (this.isMobile()) {
+      return;
+    }
+
     this.clampedX.set(this.clampX(this.x(), this.estimateWidth()));
     this.clampedY.set(this.clampY(this.y(), 80));
   }
 
   ngAfterViewInit(): void {
+    if (this.isMobile() || !this.panelRef) {
+      return;
+    }
+
     const rect = this.panelRef.nativeElement.getBoundingClientRect();
 
     this.clampedX.set(this.clampX(this.x(), rect.width));

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

@@ -0,0 +1,253 @@
+<div
+  appThemeNode="profileCardSurface"
+  class="flex w-full flex-col bg-card text-foreground"
+>
+  @let profileUser = displayedUser();
+  @let statusColor = currentStatusColor();
+  @let statusLabel = currentStatusLabel();
+  @let self = isSelf();
+  @let friend = isFriend();
+  @let isEditable = editable();
+  @let activeField = editingField();
+
+  <div
+    appThemeNode="profileCardBanner"
+    class="h-24 bg-gradient-to-r from-primary/30 to-primary/10"
+  ></div>
+
+  <div class="-mt-16 flex flex-col items-center px-6">
+    <div class="relative">
+      <button
+        type="button"
+        class="rounded-full"
+        [disabled]="!isEditable || avatarSaving()"
+        (click)="pickAvatar(avatarInput)"
+      >
+        <app-user-avatar
+          [name]="profileUser.displayName"
+          [avatarUrl]="profileUser.avatarUrl"
+          size="2xl"
+          [status]="profileUser.status"
+          [showStatusBadge]="true"
+          ringClass="ring-4 ring-card"
+        />
+      </button>
+      @if (isEditable) {
+        <span
+          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-4 w-4"
+          />
+        </span>
+      }
+      <input
+        #avatarInput
+        type="file"
+        class="hidden"
+        [accept]="avatarAccept"
+        (change)="onAvatarSelected($event)"
+      />
+    </div>
+
+    <div class="mt-3 w-full text-center">
+      @if (isEditable && activeField === 'displayName') {
+        <input
+          type="text"
+          class="w-full rounded-lg border border-border bg-background/70 px-3 py-2 text-center text-lg font-semibold text-foreground outline-none focus:border-primary/70"
+          [value]="displayNameDraft()"
+          (input)="onDisplayNameInput($event)"
+          (blur)="finishEdit('displayName')"
+        />
+      } @else if (isEditable) {
+        <button
+          type="button"
+          class="w-full text-center text-xl font-semibold text-foreground hover:underline"
+          (click)="startEdit('displayName')"
+        >
+          {{ profileUser.displayName }}
+        </button>
+      } @else {
+        <h2 class="text-center text-xl font-semibold text-foreground">{{ profileUser.displayName }}</h2>
+      }
+    </div>
+
+    @if (profileUser.username && profileUser.username !== profileUser.displayName) {
+      <p class="mt-0.5 text-sm text-muted-foreground">{{ '@' + profileUser.username }}</p>
+    }
+
+    @if (isEditable) {
+      <div class="relative mt-3 w-full max-w-[14rem]">
+        <button
+          type="button"
+          class="flex w-full items-center gap-2 rounded-full border border-border bg-secondary/40 px-3 py-1.5 text-sm transition-colors hover:bg-secondary"
+          (click)="toggleStatusMenu()"
+        >
+          <span
+            class="h-2 w-2 rounded-full"
+            [class]="statusColor"
+          ></span>
+          <span class="flex-1 text-left text-foreground">{{ statusLabel }}</span>
+          <ng-icon
+            name="lucideChevronDown"
+            class="h-3.5 w-3.5 text-muted-foreground"
+          />
+        </button>
+
+        @if (showStatusMenu()) {
+          <div class="absolute left-0 right-0 top-full z-10 mt-1 rounded-lg border border-border bg-card py-1 shadow-lg">
+            @for (opt of statusOptions; track opt.label) {
+              <button
+                type="button"
+                class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-secondary"
+                [class.bg-secondary]="isStatusOptionSelected(opt.value)"
+                [class.text-foreground]="isStatusOptionSelected(opt.value)"
+                [class.text-muted-foreground]="!isStatusOptionSelected(opt.value)"
+                (click)="setStatus(opt.value)"
+              >
+                <span
+                  class="h-2 w-2 rounded-full"
+                  [class]="opt.color"
+                ></span>
+                <span class="flex-1">{{ opt.label }}</span>
+                @if (isStatusOptionSelected(opt.value)) {
+                  <ng-icon
+                    name="lucideCheck"
+                    class="h-4 w-4 text-primary"
+                  />
+                }
+              </button>
+            }
+          </div>
+        }
+      </div>
+    } @else {
+      <div class="mt-2 inline-flex items-center gap-1.5 rounded-full bg-secondary/40 px-2.5 py-1 text-xs text-muted-foreground">
+        <span
+          class="h-2 w-2 rounded-full"
+          [class]="statusColor"
+        ></span>
+        <span>{{ statusLabel }}</span>
+      </div>
+    }
+  </div>
+
+  <div class="mt-4 space-y-3 px-6 pb-2">
+    @if (isEditable) {
+      @if (activeField === 'description') {
+        <textarea
+          rows="3"
+          class="w-full resize-none rounded-lg border border-border bg-background/70 px-3 py-2 text-sm leading-5 text-foreground outline-none focus:border-primary/70"
+          [value]="descriptionDraft()"
+          placeholder="Add a description"
+          (input)="onDescriptionInput($event)"
+          (blur)="finishEdit('description')"
+        ></textarea>
+      } @else {
+        <button
+          type="button"
+          class="block w-full rounded-lg border border-dashed border-border/70 bg-background/30 px-3 py-2 text-left text-sm leading-5"
+          (click)="startEdit('description')"
+        >
+          @if (profileUser.description) {
+            <span class="whitespace-pre-line text-muted-foreground">{{ profileUser.description }}</span>
+          } @else {
+            <span class="text-muted-foreground/70">Add a description</span>
+          }
+        </button>
+      }
+    } @else if (profileUser.description) {
+      <p class="whitespace-pre-line text-center text-sm leading-5 text-muted-foreground">
+        {{ profileUser.description }}
+      </p>
+    }
+
+    @if (avatarError()) {
+      <div class="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-xs text-red-200">
+        {{ avatarError() }}
+      </div>
+    }
+
+    @if (profileUser.gameActivity; as activity) {
+      <button
+        type="button"
+        class="flex w-full items-center gap-3 rounded-xl border border-border bg-background/40 px-3 py-2 text-left"
+        [disabled]="!activity.store?.url"
+        (click)="openGameStore($event)"
+      >
+        @if (activity.iconUrl) {
+          <img
+            class="h-10 w-10 shrink-0 rounded-md object-cover"
+            [src]="activity.iconUrl"
+            alt=""
+          />
+        } @else {
+          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+            <ng-icon
+              name="lucideGamepad2"
+              class="h-5 w-5"
+            />
+          </div>
+        }
+        <div class="min-w-0 flex-1">
+          <p class="truncate text-sm font-medium text-foreground">Playing {{ activity.name }}</p>
+          <p class="truncate text-xs text-muted-foreground">{{ gameActivityElapsed() }}</p>
+        </div>
+      </button>
+    }
+  </div>
+
+  @if (!self) {
+    <div class="grid grid-cols-1 gap-2 px-6 pb-6 pt-4">
+      <button
+        type="button"
+        class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60"
+        [disabled]="busy()"
+        (click)="startChat()"
+      >
+        <ng-icon
+          name="lucideMessageCircle"
+          class="h-5 w-5"
+        />
+        <span>Start chat</span>
+      </button>
+
+      <button
+        type="button"
+        class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-border bg-secondary/40 px-4 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+        [disabled]="busy()"
+        (click)="startCall()"
+      >
+        <ng-icon
+          name="lucidePhone"
+          class="h-5 w-5"
+        />
+        <span>Call</span>
+      </button>
+
+      <button
+        type="button"
+        class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-border bg-secondary/20 px-4 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+        [disabled]="busy()"
+        (click)="toggleFriend()"
+      >
+        @if (friend) {
+          <ng-icon
+            name="lucideUserMinus"
+            class="h-5 w-5"
+          />
+          <span>Remove friend</span>
+        } @else {
+          <ng-icon
+            name="lucideUserPlus"
+            class="h-5 w-5"
+          />
+          <span>Add friend</span>
+        }
+      </button>
+    </div>
+  } @else {
+    <div class="px-6 pb-6 pt-2"></div>
+  }
+</div>

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

@@ -0,0 +1,378 @@
+/* eslint-disable @typescript-eslint/member-ordering */
+import {
+  Component,
+  computed,
+  effect,
+  inject,
+  OnDestroy,
+  output,
+  signal
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+  lucideCamera,
+  lucideCheck,
+  lucideChevronDown,
+  lucideGamepad2,
+  lucideMessageCircle,
+  lucidePhone,
+  lucideUserMinus,
+  lucideUserPlus
+} from '@ng-icons/lucide';
+import { UserAvatarComponent } from '../user-avatar/user-avatar.component';
+import { ThemeNodeDirective } from '../../../domains/theme';
+import { User, UserStatus } from '../../../shared-kernel';
+import { selectCurrentUser, selectUsersEntities } from '../../../store/users/users.selectors';
+import { UsersActions } from '../../../store/users/users.actions';
+import { DirectMessageService } from '../../../domains/direct-message/application/services/direct-message.service';
+import { FriendService } from '../../../domains/direct-message/application/services/friend.service';
+import { DirectCallService } from '../../../domains/direct-call/application/services/direct-call.service';
+import { formatGameActivityElapsed } from '../../../domains/game-activity';
+import { ExternalLinkService } from '../../../core/platform/external-link.service';
+import { UserStatusService } from '../../../core/services/user-status.service';
+import {
+  EditableProfileAvatarSource,
+  PROFILE_AVATAR_ACCEPT_ATTRIBUTE,
+  ProcessedProfileAvatar,
+  ProfileAvatarEditorService,
+  ProfileAvatarFacade
+} from '../../../domains/profile-avatar';
+
+@Component({
+  selector: 'app-profile-card-mobile',
+  standalone: true,
+  imports: [
+    CommonModule,
+    NgIcon,
+    UserAvatarComponent,
+    ThemeNodeDirective
+  ],
+  viewProviders: [
+    provideIcons({
+      lucideCamera,
+      lucideCheck,
+      lucideChevronDown,
+      lucideGamepad2,
+      lucideMessageCircle,
+      lucidePhone,
+      lucideUserMinus,
+      lucideUserPlus
+    })
+  ],
+  templateUrl: './profile-card-mobile.component.html'
+})
+export class ProfileCardMobileComponent implements OnDestroy {
+  readonly user = signal<User>({ id: '', oderId: '', username: '', displayName: '', status: 'offline', role: 'member', joinedAt: 0 });
+  readonly editable = signal(false);
+  readonly closed = output<undefined>();
+
+  readonly avatarAccept = PROFILE_AVATAR_ACCEPT_ATTRIBUTE;
+  readonly avatarError = signal<string | null>(null);
+  readonly avatarSaving = signal(false);
+  readonly editingField = signal<'displayName' | 'description' | null>(null);
+  readonly displayNameDraft = signal('');
+  readonly descriptionDraft = signal('');
+  readonly showStatusMenu = signal(false);
+
+  readonly statusOptions: { value: UserStatus | null; label: string; color: string }[] = [
+    { value: null, label: 'Online', color: 'bg-green-500' },
+    { value: 'away', label: 'Away', color: 'bg-yellow-500' },
+    { value: 'busy', label: 'Do Not Disturb', color: 'bg-red-500' },
+    { value: 'offline', label: 'Invisible', color: 'bg-gray-500' }
+  ];
+
+  private readonly store = inject(Store);
+  private readonly router = inject(Router);
+  private readonly directMessages = inject(DirectMessageService);
+  private readonly directCalls = inject(DirectCallService);
+  private readonly friendsService = inject(FriendService);
+  private readonly externalLinks = inject(ExternalLinkService);
+  private readonly userStatus = inject(UserStatusService);
+  private readonly profileAvatar = inject(ProfileAvatarFacade);
+  private readonly profileAvatarEditor = inject(ProfileAvatarEditorService);
+  private readonly users = this.store.selectSignal(selectUsersEntities);
+  private readonly currentUser = this.store.selectSignal(selectCurrentUser);
+
+  readonly displayedUser = computed(() => {
+    const snapshot = this.user();
+    const entities = this.users();
+    const liveUser = entities[snapshot.id] ?? entities[snapshot.oderId];
+
+    return liveUser ? { ...snapshot, ...liveUser } : snapshot;
+  });
+
+  readonly isSelf = computed(() => {
+    const me = this.currentUser();
+    const them = this.displayedUser();
+
+    if (!me)
+      return false;
+
+    return me.id === them.id || me.oderId === them.oderId;
+  });
+
+  readonly isFriend = computed(() => this.friendsService.friendIds().has(this.displayedUser().id));
+  readonly activityNow = signal(Date.now());
+  readonly busy = signal(false);
+
+  private readonly activityTimer = setInterval(() => this.activityNow.set(Date.now()), 1_000);
+  private readonly syncProfileDrafts = effect(
+    () => {
+      const user = this.displayedUser();
+      const editingField = this.editingField();
+
+      if (editingField !== 'displayName') {
+        this.displayNameDraft.set(user.displayName || '');
+      }
+
+      if (editingField !== 'description') {
+        this.descriptionDraft.set(user.description || '');
+      }
+    },
+    { allowSignalWrites: true }
+  );
+
+  ngOnDestroy(): void {
+    clearInterval(this.activityTimer);
+  }
+
+  currentStatusColor(): string {
+    switch (this.displayedUser().status) {
+      case 'online':
+        return 'bg-green-500';
+      case 'away':
+        return 'bg-yellow-500';
+      case 'busy':
+        return 'bg-red-500';
+      default:
+        return 'bg-gray-500';
+    }
+  }
+
+  currentStatusLabel(): string {
+    switch (this.displayedUser().status) {
+      case 'online':
+        return 'Online';
+      case 'away':
+        return 'Away';
+      case 'busy':
+        return 'Do Not Disturb';
+      case 'offline':
+        return 'Invisible';
+      case 'disconnected':
+        return 'Offline';
+      default:
+        return 'Online';
+    }
+  }
+
+  gameActivityElapsed(): string {
+    const activity = this.displayedUser().gameActivity;
+
+    return activity ? formatGameActivityElapsed(activity.startedAt, this.activityNow()) : '';
+  }
+
+  openGameStore(event: Event): void {
+    event.stopPropagation();
+    const url = this.displayedUser().gameActivity?.store?.url;
+
+    if (url) {
+      this.externalLinks.open(url);
+    }
+  }
+
+  toggleStatusMenu(): void {
+    this.showStatusMenu.update((open) => !open);
+  }
+
+  setStatus(status: UserStatus | null): void {
+    this.userStatus.setManualStatus(status);
+    this.showStatusMenu.set(false);
+  }
+
+  isStatusOptionSelected(status: UserStatus | null): boolean {
+    const currentStatus = this.displayedUser().status;
+
+    return status === null ? currentStatus === 'online' : currentStatus === status;
+  }
+
+  onDisplayNameInput(event: Event): void {
+    this.displayNameDraft.set((event.target as HTMLInputElement).value);
+  }
+
+  onDescriptionInput(event: Event): void {
+    this.descriptionDraft.set((event.target as HTMLTextAreaElement).value);
+  }
+
+  startEdit(field: 'displayName' | 'description'): void {
+    if (!this.editable() || this.editingField() === field) {
+      return;
+    }
+
+    this.editingField.set(field);
+  }
+
+  finishEdit(field: 'displayName' | 'description'): void {
+    if (this.editingField() !== field) {
+      return;
+    }
+
+    this.commitProfileDrafts();
+    this.editingField.set(null);
+  }
+
+  pickAvatar(fileInput: HTMLInputElement): void {
+    if (!this.editable() || this.avatarSaving()) {
+      return;
+    }
+
+    this.avatarError.set(null);
+    fileInput.click();
+  }
+
+  async onAvatarSelected(event: Event): Promise<void> {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+
+    let source: EditableProfileAvatarSource | null = null;
+
+    input.value = '';
+
+    if (!file) {
+      return;
+    }
+
+    const validationError = this.profileAvatar.validateFile(file);
+
+    if (validationError) {
+      this.avatarError.set(validationError);
+      return;
+    }
+
+    try {
+      source = await this.profileAvatar.prepareEditableSource(file);
+      const avatar = await this.profileAvatarEditor.open(source);
+
+      if (!avatar) {
+        return;
+      }
+
+      await this.applyAvatar(avatar);
+    } catch {
+      this.avatarError.set('Failed to open selected image.');
+    } finally {
+      this.profileAvatar.releaseEditableSource(source);
+    }
+  }
+
+  async applyAvatar(avatar: ProcessedProfileAvatar): Promise<void> {
+    const currentUser = this.displayedUser();
+
+    this.avatarSaving.set(true);
+    this.avatarError.set(null);
+
+    try {
+      await this.profileAvatar.persistProcessedAvatar(currentUser, avatar);
+
+      const updates = this.profileAvatar.buildAvatarUpdates(avatar);
+
+      this.store.dispatch(UsersActions.updateCurrentUserAvatar({ avatar: updates }));
+      this.user.update((user) => ({
+        ...user,
+        ...updates
+      }));
+    } catch {
+      this.avatarError.set('Failed to save profile image.');
+    } finally {
+      this.avatarSaving.set(false);
+    }
+  }
+
+  async startChat(): Promise<void> {
+    if (this.busy() || this.isSelf())
+      return;
+
+    this.busy.set(true);
+
+    try {
+      const conversation = await this.directMessages.createConversation(this.displayedUser());
+
+      await this.router.navigate(['/dm', conversation.id]);
+      this.closed.emit(undefined);
+    } finally {
+      this.busy.set(false);
+    }
+  }
+
+  async startCall(): Promise<void> {
+    if (this.busy() || this.isSelf())
+      return;
+
+    this.busy.set(true);
+
+    try {
+      await this.directCalls.startCall(this.displayedUser());
+      this.closed.emit(undefined);
+    } finally {
+      this.busy.set(false);
+    }
+  }
+
+  async toggleFriend(): Promise<void> {
+    if (this.busy() || this.isSelf())
+      return;
+
+    this.busy.set(true);
+
+    try {
+      await this.friendsService.toggleFriend(this.displayedUser().id);
+    } finally {
+      this.busy.set(false);
+    }
+  }
+
+  private commitProfileDrafts(): void {
+    if (!this.editable()) {
+      return;
+    }
+
+    const displayName = this.normalizeDisplayName(this.displayNameDraft());
+
+    if (!displayName) {
+      this.displayNameDraft.set(this.user().displayName || '');
+      return;
+    }
+
+    const user = this.displayedUser();
+    const description = this.normalizeDescription(this.descriptionDraft());
+
+    if (displayName === this.normalizeDisplayName(user.displayName) && description === this.normalizeDescription(user.description)) {
+      return;
+    }
+
+    const profile = {
+      displayName,
+      description,
+      profileUpdatedAt: Date.now()
+    };
+
+    this.store.dispatch(UsersActions.updateCurrentUserProfile({ profile }));
+    this.user.update((user) => ({
+      ...user,
+      ...profile
+    }));
+  }
+
+  private normalizeDisplayName(value: string | undefined): string {
+    return value?.trim().replace(/\s+/g, ' ') || '';
+  }
+
+  private normalizeDescription(value: string | undefined): string | undefined {
+    const normalized = value?.trim();
+
+    return normalized || undefined;
+  }
+}

toju-app/src/app/shared/components/profile-card/profile-card.service.ts

@@ -15,7 +15,9 @@ import {
   fromEvent
 } from 'rxjs';
 import { ProfileCardComponent } from './profile-card.component';
+import { ProfileCardMobileComponent } from './profile-card-mobile.component';
 import { PROFILE_AVATAR_EDITOR_OVERLAY_CLASS } from '../../../domains/profile-avatar';
+import { ViewportService } from '../../../core/platform';
 import { User } from '../../../shared-kernel';
 
 export type ProfileCardPlacement = 'above' | 'left' | 'auto';
@@ -57,6 +59,7 @@ function positionsFor(placement: ProfileCardPlacement): ConnectedPosition[] {
 @Injectable({ providedIn: 'root' })
 export class ProfileCardService {
   private readonly overlay = inject(Overlay);
+  private readonly viewport = inject(ViewportService);
   private overlayRef: OverlayRef | null = null;
   private currentOrigin: HTMLElement | null = null;
   private outsideClickSub: Subscription | null = null;
@@ -76,23 +79,57 @@ export class ProfileCardService {
 
     const elementRef = origin instanceof ElementRef ? origin : new ElementRef(origin);
     const placement = options.placement ?? 'auto';
+    const isMobile = this.viewport.isMobile();
 
     this.currentOrigin = rawEl;
 
-    const positionStrategy = this.overlay
-      .position()
-      .flexibleConnectedTo(elementRef)
-      .withPositions(positionsFor(placement))
-      .withViewportMargin(VIEWPORT_MARGIN)
-      .withPush(true);
+    if (isMobile) {
+      const positionStrategy = this.overlay
+        .position()
+        .global()
+        .left('0')
+        .right('0')
+        .bottom('0');
 
-    this.overlayRef = this.overlay.create({
-      positionStrategy,
-      scrollStrategy: this.overlay.scrollStrategies.noop()
-    });
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+        scrollStrategy: this.overlay.scrollStrategies.block(),
+        hasBackdrop: true,
+        backdropClass: 'cdk-overlay-dark-backdrop',
+        panelClass: 'metoyou-bottom-sheet-panel'
+      });
+    } else {
+      const positionStrategy = this.overlay
+        .position()
+        .flexibleConnectedTo(elementRef)
+        .withPositions(positionsFor(placement))
+        .withViewportMargin(VIEWPORT_MARGIN)
+        .withPush(true);
+
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+        scrollStrategy: this.overlay.scrollStrategies.noop()
+      });
+    }
 
     this.syncThemeVars();
 
+    if (isMobile) {
+      const portal = new ComponentPortal(ProfileCardMobileComponent);
+      const ref = this.overlayRef.attach(portal);
+
+      ref.instance.user.set(user);
+      ref.instance.editable.set(options.editable ?? false);
+
+      const subscription = new Subscription();
+
+      subscription.add(ref.instance.closed.subscribe(() => this.close()));
+      subscription.add(this.overlayRef.backdropClick().subscribe(() => this.close()));
+      this.outsideClickSub = subscription;
+
+      return;
+    }
+
     const portal = new ComponentPortal(ProfileCardComponent);
     const ref = this.overlayRef.attach(portal);
 

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/shared/index.ts

@@ -2,6 +2,7 @@
  * Shared reusable UI components barrel.
  */
 export { ContextMenuComponent } from './components/context-menu/context-menu.component';
+export { BottomSheetComponent } from './components/bottom-sheet/bottom-sheet.component';
 export { UserAvatarComponent } from './components/user-avatar/user-avatar.component';
 export { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component';
 export { LeaveServerDialogComponent } from './components/leave-server-dialog/leave-server-dialog.component';