diff --git a/AGENTS.md b/AGENTS.md
index d7e0c1b..6fa6630 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -51,7 +51,8 @@ Requires Node 22+, pnpm 11.5.0, the Supabase CLI, and Docker.
 - **Routing:** App Router under `src/app`. Route groups: `(app)` is the authenticated surface (its layout guards on `supabase.auth.getUser()` and redirects to `/login`); `(auth)` holds `login`, `signup`, and `invite/[token]`. `auth/callback/route.ts` exchanges the auth code for a session and accepts invites.
 - **Session handling:** `src/proxy.ts` (Next.js 16 proxy, formerly `middleware.ts`) calls `updateSession` to refresh the Supabase session cookie on each request. Keep the `matcher` in sync if route patterns change.
 - **Supabase clients (`src/lib/supabase`):** use `createSupabaseServerClient()` in Server Components / route handlers, `createSupabaseBrowserClient()` in Client Components, and the `middleware` helper for session refresh. All env access goes through `getSupabaseEnv()` - do not read `process.env` for Supabase keys directly.
-- **Features:** Feature-scoped code lives in `src/features/<feature>`. The main UI is `features/chat/chat-workspace.tsx`. Message list state uses the pure helpers in `features/messages/optimistic.ts` (`mergeIncomingMessage`, `markMessageFailed`, `removeMessage`) - keep these pure and unit-tested.
+- **Features:** Feature-scoped code lives in `src/features/<feature>`. The chat orchestrator is `features/chat/chat-workspace.tsx`; to stay under `max-lines` it delegates to focused units: presentational pieces in `chat-parts.tsx`, the `WorkspaceSidebar`, the `useChannelRealtime` / `useUnread` / `useNotifications` hooks, and pure helpers (`unread.ts`, `notifications.ts`, `status.ts`, `emoji-recents.ts`, `unfurl.ts`). Message list state uses the pure helpers in `features/messages/optimistic.ts` (`mergeIncomingMessage`, `markMessageFailed`, `removeMessage`) - keep all such helpers pure and unit-tested.
+- **Slack-parity features:** message edit/soft-delete, full emoji reactions (frimousse picker + localStorage recents), markdown rendering (`message-body.tsx`, sanitized via `rehype-sanitize`), unread badges/divider (`channel_unread_counts` RPC), the notification bell over the `user:<id>` realtime topic, custom status/presence (`status-control.tsx`), and SSRF-safe link unfurling (`/api/unfurl` + `link_previews`).
 - **Realtime + optimistic UI:** Messages are sent optimistically (marked `pending`), then reconciled when the realtime broadcast echoes back (deduped by id). Preserve this pattern; do not block the UI on the network round-trip.
 - **Types:** UI-facing domain types live in `src/types/chat.ts`; the Supabase schema type is `src/types/database.ts` (`Database`). Supabase clients are typed with `Database`.
 
@@ -59,8 +60,8 @@ Requires Node 22+, pnpm 11.5.0, the Supabase CLI, and Docker.
 
 - Schema, RLS policies, functions, and triggers live in `supabase/migrations/`. Never edit an applied migration - add a new sequentially numbered migration file (e.g. `003_*.sql`).
 - All tables are protected by **row-level security** and scoped per organization via `current_org_id()`. Any new table must enable RLS and define policies; otherwise data is inaccessible to clients.
-- Tables: `organizations`, `profiles`, `channels`, `channel_members`, `messages`, `reactions`, `attachments`, `mentions`, `notifications`, `invites`.
-- Server-side logic prefers Postgres functions/RPCs (`create_invite`, `accept_invite`, `search_messages`) over ad-hoc client queries for privileged operations.
+- Tables: `organizations`, `profiles`, `channels`, `channel_members`, `messages`, `reactions`, `attachments`, `mentions`, `notifications`, `invites`, `link_previews`.
+- Server-side logic prefers Postgres functions/RPCs (`create_invite`, `accept_invite`, `search_messages`, `channel_unread_counts`) over ad-hoc client queries for privileged operations. Notification triggers (mention/thread/dm/reaction) broadcast to each recipient's `user:<id>` private realtime topic, which is read-gated by an RLS policy on `realtime.messages`.
 - After changing the schema, update `src/types/database.ts` to match, and run `supabase db reset` locally to verify migrations apply cleanly.
 - For the full migration + RLS + types workflow, follow the `supabase-migration` skill in [`.factory/skills/supabase-migration/SKILL.md`](./.factory/skills/supabase-migration/SKILL.md).
 
@@ -72,7 +73,7 @@ Requires Node 22+, pnpm 11.5.0, the Supabase CLI, and Docker.
 ## Testing
 
 - **Unit tests (Vitest):** jsdom environment with globals enabled. Test files are `*.test.ts` / `*.test.tsx` colocated with source under `src/` (enforced by the `include` glob in `vitest.config.ts`). Favor fast, pure unit tests for logic (see `features/messages/optimistic.test.ts`); keep business logic in pure functions so it is testable without Supabase or the DOM. Run `pnpm test`.
-- **Coverage thresholds:** `pnpm test:coverage` enforces coverage on the pure logic layer (`src/lib/utils.ts`, `src/features/messages/optimistic.ts`): 100% statements/functions/lines and 90% branches (see `vitest.config.ts`). When you add logic to those modules or extract new pure helpers, add unit tests so the gate stays green. CI runs `pnpm test:ci`, which also fails on a coverage drop.
+- **Coverage thresholds:** `pnpm test:coverage` enforces coverage on the pure logic layer (the `include` list in `vitest.config.ts`: `src/lib/utils.ts`, `src/features/messages/optimistic.ts`, and the chat helpers `unread.ts`, `notifications.ts`, `status.ts`, `emoji-recents.ts`, `unfurl.ts`): 100% statements/functions/lines and 90% branches. When you add logic to those modules or extract new pure helpers, add unit tests so the gate stays green. CI runs `pnpm test:ci`, which also fails on a coverage drop.
 - **Test performance + flaky detection:** `pnpm test:ci` writes a JUnit report to `reports/junit.xml` (per-suite timing) and is uploaded as a CI artifact; Vitest flags tests slower than `slowTestThreshold` (300ms). Vitest retries once locally / twice in CI and Playwright retries twice in CI, so a test that only passes on retry is surfaced as flaky in the JUnit/HTML reports rather than silently masked.
 - **End-to-end tests (Playwright):** specs live in `e2e/*.spec.ts` and are configured in `playwright.config.ts`. The config builds and starts the Next.js production server (`pnpm build && pnpm start`) with dummy `NEXT_PUBLIC_SUPABASE_*` env vars, so tests run against the shipped artifact and the public auth pages plus the auth-guard redirect can be tested without a running Supabase backend. Run `pnpm test:e2e` (or `pnpm test:e2e:ui` for the inspector). E2E specs are excluded from Vitest, and Vitest unit tests are excluded from Playwright.
 - E2E tests that depend on an authenticated session require a running local Supabase stack (`supabase start`) and real credentials; keep those separate from the no-backend smoke tests.
diff --git a/README.md b/README.md
index 8801b8d..8f5e329 100644
--- a/README.md
+++ b/README.md
@@ -16,8 +16,15 @@ Low-latency team chat for a single organization. Flack is a real-time messaging
 
 - Public and private channels, plus direct messages (`channels.type`: `public` | `private` | `dm`)
 - Threaded replies (`messages.parent_id`)
+- Message editing and soft-delete with realtime reconciliation
 - Optimistic message sending with realtime broadcast reconciliation
+- Rich text rendering (sanitized GitHub-flavored markdown)
+- Full emoji reactions via picker with recent-emoji history
 - Mentions with notifications, reactions, and file attachments (Supabase Storage)
+- Unread tracking: per-channel badges (`channel_unread_counts` RPC), new-messages divider, mark-on-read
+- Notification center with a live bell over the `user:<id>` private realtime topic
+- Custom status (emoji/text/expiry) and presence (active/away/do-not-disturb); do-not-disturb suppresses activity toasts
+- SSRF-safe link unfurling (`/api/unfurl`) with `link_previews` caching
 - Full-text message search via the `search_messages` Postgres function
 - Multi-tenant organizations with row-level security (RLS) isolating data per org
 - Invite-based onboarding (`create_invite` / `accept_invite` RPCs)
@@ -132,9 +139,9 @@ playwright.config.ts        # Playwright configuration
 
 Schema lives in `supabase/migrations/`. Core tables (all with RLS, scoped per organization):
 
-`organizations`, `profiles`, `channels`, `channel_members`, `messages`, `reactions`, `attachments`, `mentions`, `notifications`, `invites`.
+`organizations`, `profiles`, `channels`, `channel_members`, `messages`, `reactions`, `attachments`, `mentions`, `notifications`, `invites`, `link_previews`.
 
-Key database functions: `current_org_id()`, `is_admin()`, `is_channel_member()`, `create_invite()`, `accept_invite()`, `search_messages()`. Triggers broadcast message/reaction changes over Supabase Realtime and create mention notifications. A `handle_new_user` trigger provisions a profile when an auth user is created.
+Key database functions: `current_org_id()`, `is_admin()`, `is_channel_member()`, `create_invite()`, `accept_invite()`, `search_messages()`, `channel_unread_counts()`. Triggers broadcast message/reaction changes over Supabase Realtime, create mention/thread/dm/reaction notifications, and broadcast new notifications to each recipient's `user:<id>` private topic. A `handle_new_user` trigger provisions a profile when an auth user is created.
 
 ## Testing
 
diff --git a/package.json b/package.json
index 33dfe73..29c191d 100644
--- a/package.json
+++ b/package.json
@@ -31,11 +31,15 @@
     "@tailwindcss/postcss": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "frimousse": "^0.3.0",
     "lucide-react": "^0.555.0",
     "next": "^16.2.9",
     "pino": "^10.3.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
+    "react-markdown": "^10.1.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c46eb59..648ab46 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -225,6 +225,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      frimousse:
+        specifier: ^0.3.0
+        version: 0.3.0(react@19.2.7)(typescript@5.9.3)
       lucide-react:
         specifier: ^0.555.0
         version: 0.555.0(react@19.2.7)
@@ -240,6 +243,15 @@ importers:
       react-dom:
         specifier: ^19.2.7
         version: 19.2.7(react@19.2.7)
+      react-markdown:
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@19.2.17)(react@19.2.7)
+      rehype-sanitize:
+        specifier: ^6.0.0
+        version: 6.0.0
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
@@ -1258,18 +1270,33 @@ packages:
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
+  '@types/debug@4.1.13':
+    resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
+
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
   '@types/node@24.13.1':
     resolution: {integrity: sha512-RSpUJGmvsJ1ZeBehQZFhIdpsz+bIpES0nIQXko4Ybq+N+kX6XvOq3Jo+iJ82FWLdblFq85AsMikd3m35jgezYg==}
 
@@ -1281,6 +1308,12 @@ packages:
   '@types/react@19.2.17':
     resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==}
 
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
   '@typescript-eslint/eslint-plugin@8.61.0':
     resolution: {integrity: sha512-bFNvl9ZczlVb+wR2Akszf3gHfKVj/8WanXaGJ3UstTA7brNKg0cNdk6X1Psu5V7MZ2oQtzZKOEzIUehaoxbDGw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1340,6 +1373,9 @@ packages:
     resolution: {integrity: sha512-QVLZu3ZPQEE+HICQyAMZ2yLQhxf0meY/wx6Hx14YcTNj13JB3qHlX3lJ02L3fLGHgERRH71kvYDwiXIguT3AjQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@ungap/structured-clone@1.3.1':
+    resolution: {integrity: sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==}
+
   '@unrs/resolver-binding-android-arm-eabi@1.12.2':
     resolution: {integrity: sha512-g5T90pqg1bo/7mytQx6F4iBNC0Wsh9cu+z9veDbFjc7HjpesJFWD7QMS0NGStXM075+7dJPPVvBbpZlnrdpi/w==}
     cpu: [arm]
@@ -1607,6 +1643,9 @@ packages:
   babel-plugin-react-compiler@1.0.0:
     resolution: {integrity: sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==}
 
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1657,6 +1696,9 @@ packages:
   caniuse-lite@1.0.30001797:
     resolution: {integrity: sha512-l8xKG+gwAIExZGl9FrF7KUwuOmk6wbEPC9Xoy/RtnWv1XG0Q4LFlagaLpUv3Kiza3W/wm27zy0yWJEieYKAP6w==}
 
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
   chai@6.2.2:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
@@ -1665,6 +1707,18 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
@@ -1690,6 +1744,9 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -1794,6 +1851,9 @@ packages:
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
+  decode-named-character-reference@1.3.0:
+    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -1805,10 +1865,17 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -1884,6 +1951,10 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
   eslint-config-next@16.2.9:
     resolution: {integrity: sha512-olGtBrs07bQchpaJWeqbk9GaMoU0oGmN/pYNEBXSbfgKngb5uHnPe37X6tVeh6DJfaWFQildvinGEOrolo5fmw==}
     peerDependencies:
@@ -2000,6 +2071,9 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -2014,6 +2088,9 @@ packages:
     resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
     engines: {node: '>=12.0.0'}
 
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -2070,6 +2147,15 @@ packages:
     engines: {node: '>=18.3.0'}
     hasBin: true
 
+  frimousse@0.3.0:
+    resolution: {integrity: sha512-kO6LMoKY/cLAYEhXXtqLRaLIE6L/DagpFPrUZaLv3LsUa1/8Iza3HhwZcgN8eZ+weXnhv69eoclNUPohcCa/IQ==}
+    peerDependencies:
+      react: ^18 || ^19
+      typescript: '>=5.1.0'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2175,6 +2261,15 @@ packages:
     resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
 
+  hast-util-sanitize@5.0.2:
+    resolution: {integrity: sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg==}
+
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
   hermes-estree@0.25.1:
     resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
 
@@ -2188,6 +2283,9 @@ packages:
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
+  html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
+
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -2221,10 +2319,19 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
+
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
   is-array-buffer@3.0.5:
     resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
@@ -2260,6 +2367,9 @@ packages:
     resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
 
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -2280,6 +2390,9 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -2296,6 +2409,10 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
   is-plain-object@5.0.0:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
@@ -2529,6 +2646,9 @@ packages:
     resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
     engines: {node: '>=18'}
 
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -2555,10 +2675,58 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
+  mdast-util-from-markdown@2.0.3:
+    resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
   mdn-data@2.27.1:
     resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
 
@@ -2566,6 +2734,90 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -2708,6 +2960,9 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
   parse5@8.0.1:
     resolution: {integrity: sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==}
 
@@ -2783,6 +3038,9 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  property-information@7.2.0:
+    resolution: {integrity: sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -2801,6 +3059,12 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  react-markdown@10.1.0:
+    resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+
   react@19.2.7:
     resolution: {integrity: sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==}
     engines: {node: '>=0.10.0'}
@@ -2820,6 +3084,21 @@ packages:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
 
+  rehype-sanitize@6.0.0:
+    resolution: {integrity: sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg==}
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
   require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
@@ -2957,6 +3236,9 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
   split2@4.2.0:
     resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
     engines: {node: '>= 10.x'}
@@ -3009,6 +3291,9 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
   strip-ansi@7.2.0:
     resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
     engines: {node: '>=12'}
@@ -3025,6 +3310,12 @@ packages:
     resolution: {integrity: sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==}
     engines: {node: '>=14.16'}
 
+  style-to-js@1.1.21:
+    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
+
+  style-to-object@1.0.14:
+    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
+
   styled-jsx@5.1.6:
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
@@ -3101,6 +3392,12 @@ packages:
     resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
     engines: {node: '>=20'}
 
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
   ts-api-utils@2.5.0:
     resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
     engines: {node: '>=18.12'}
@@ -3156,6 +3453,24 @@ packages:
   undici-types@7.18.2:
     resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
 
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
   unrs-resolver@1.12.2:
     resolution: {integrity: sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==}
 
@@ -3168,6 +3483,12 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
   vite@8.0.16:
     resolution: {integrity: sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3371,6 +3692,9 @@ packages:
   zod@4.4.3:
     resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@acemir/cssom@0.9.31': {}
@@ -4105,14 +4429,32 @@ snapshots:
       '@types/deep-eql': 4.0.2
       assertion-error: 2.0.1
 
+  '@types/debug@4.1.13':
+    dependencies:
+      '@types/ms': 2.1.0
+
   '@types/deep-eql@4.0.2': {}
 
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.9
+
   '@types/estree@1.0.9': {}
 
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/ms@2.1.0': {}
+
   '@types/node@24.13.1':
     dependencies:
       undici-types: 7.18.2
@@ -4125,6 +4467,10 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
   '@typescript-eslint/eslint-plugin@8.61.0(@typescript-eslint/parser@8.61.0(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -4216,6 +4562,8 @@ snapshots:
       '@typescript-eslint/types': 8.61.0
       eslint-visitor-keys: 5.0.1
 
+  '@ungap/structured-clone@1.3.1': {}
+
   '@unrs/resolver-binding-android-arm-eabi@1.12.2':
     optional: true
 
@@ -4469,6 +4817,8 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.7
 
+  bail@2.0.2: {}
+
   balanced-match@1.0.2: {}
 
   balanced-match@4.0.4: {}
@@ -4521,6 +4871,8 @@ snapshots:
 
   caniuse-lite@1.0.30001797: {}
 
+  ccount@2.0.1: {}
+
   chai@6.2.2: {}
 
   chalk@4.1.2:
@@ -4528,6 +4880,14 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
   class-variance-authority@0.7.1:
     dependencies:
       clsx: 2.1.1
@@ -4551,6 +4911,8 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  comma-separated-tokens@2.0.3: {}
+
   commander@7.2.0: {}
 
   concat-map@0.0.1: {}
@@ -4634,6 +4996,10 @@ snapshots:
 
   decimal.js@10.6.0: {}
 
+  decode-named-character-reference@1.3.0:
+    dependencies:
+      character-entities: 2.0.2
+
   deep-is@0.1.4: {}
 
   define-data-property@1.1.4:
@@ -4648,8 +5014,14 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  dequal@2.0.3: {}
+
   detect-libc@2.1.2: {}
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -4784,6 +5156,8 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
+  escape-string-regexp@5.0.0: {}
+
   eslint-config-next@16.2.9(@typescript-eslint/parser@8.61.0(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3):
     dependencies:
       '@next/eslint-plugin-next': 16.2.9
@@ -4987,6 +5361,8 @@ snapshots:
 
   estraverse@5.3.0: {}
 
+  estree-util-is-identifier-name@3.0.0: {}
+
   estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.9
@@ -4997,6 +5373,8 @@ snapshots:
 
   expect-type@1.3.0: {}
 
+  extend@3.0.2: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-glob@3.3.1:
@@ -5051,6 +5429,12 @@ snapshots:
     dependencies:
       fd-package-json: 2.0.0
 
+  frimousse@0.3.0(react@19.2.7)(typescript@5.9.3):
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      typescript: 5.9.3
+
   fsevents@2.3.2:
     optional: true
 
@@ -5151,6 +5535,36 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-sanitize@5.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@ungap/structured-clone': 1.3.1
+      unist-util-position: 5.0.0
+
+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
   hermes-estree@0.25.1: {}
 
   hermes-parser@0.25.1:
@@ -5165,6 +5579,8 @@ snapshots:
 
   html-escaper@2.0.2: {}
 
+  html-url-attributes@3.0.1: {}
+
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.4
@@ -5194,12 +5610,21 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  inline-style-parser@0.2.7: {}
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.4
       side-channel: 1.1.1
 
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
   is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.9
@@ -5244,6 +5669,8 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
+  is-decimal@2.0.1: {}
+
   is-extglob@2.1.1: {}
 
   is-finalizationregistry@1.1.1:
@@ -5266,6 +5693,8 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-hexadecimal@2.0.1: {}
+
   is-map@2.0.3: {}
 
   is-negative-zero@2.0.3: {}
@@ -5277,6 +5706,8 @@ snapshots:
 
   is-number@7.0.0: {}
 
+  is-plain-obj@4.1.0: {}
+
   is-plain-object@5.0.0: {}
 
   is-potential-custom-element-name@1.0.1: {}
@@ -5525,6 +5956,8 @@ snapshots:
       strip-ansi: 7.2.0
       wrap-ansi: 9.0.2
 
+  longest-streak@3.1.0: {}
+
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
@@ -5553,12 +5986,358 @@ snapshots:
     dependencies:
       semver: 7.8.3
 
+  markdown-table@3.0.4: {}
+
   math-intrinsics@1.1.0: {}
 
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  mdast-util-from-markdown@2.0.3:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.1
+
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.1
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.1.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
   mdn-data@2.27.1: {}
 
   merge2@1.4.1: {}
 
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.13
+      debug: 4.4.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -5747,6 +6526,16 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.3.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
   parse5@8.0.1:
     dependencies:
       entities: 8.0.0
@@ -5819,6 +6608,8 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  property-information@7.2.0: {}
+
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
@@ -5832,6 +6623,24 @@ snapshots:
 
   react-is@16.13.1: {}
 
+  react-markdown@10.1.0(@types/react@19.2.17)(react@19.2.7):
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/react': 19.2.17
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.1
+      react: 19.2.7
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
   react@19.2.7: {}
 
   real-require@0.2.0: {}
@@ -5858,6 +6667,45 @@ snapshots:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
+  rehype-sanitize@6.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-sanitize: 5.0.2
+
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
   require-from-string@2.0.2: {}
 
   resolve-from@4.0.0: {}
@@ -6054,6 +6902,8 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  space-separated-tokens@2.0.2: {}
+
   split2@4.2.0: {}
 
   stable-hash@0.0.5: {}
@@ -6131,6 +6981,11 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.2
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
   strip-ansi@7.2.0:
     dependencies:
       ansi-regex: 6.2.2
@@ -6141,6 +6996,14 @@ snapshots:
 
   strip-json-comments@5.0.3: {}
 
+  style-to-js@1.1.21:
+    dependencies:
+      style-to-object: 1.0.14
+
+  style-to-object@1.0.14:
+    dependencies:
+      inline-style-parser: 0.2.7
+
   styled-jsx@5.1.6(@babel/core@7.29.7)(react@19.2.7):
     dependencies:
       client-only: 0.0.1
@@ -6197,6 +7060,10 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
   ts-api-utils@2.5.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
@@ -6271,6 +7138,39 @@ snapshots:
 
   undici-types@7.18.2: {}
 
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
   unrs-resolver@1.12.2:
     dependencies:
       napi-postinstall: 0.3.4
@@ -6308,6 +7208,16 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
   vite@8.0.16(@types/node@24.13.1)(jiti@2.7.0)(yaml@2.9.0):
     dependencies:
       lightningcss: 1.32.0
@@ -6469,3 +7379,5 @@ snapshots:
       zod: 4.4.3
 
   zod@4.4.3: {}
+
+  zwitch@2.0.4: {}
diff --git a/src/app/api/unfurl/route.ts b/src/app/api/unfurl/route.ts
new file mode 100644
index 0000000..9a79e59
--- /dev/null
+++ b/src/app/api/unfurl/route.ts
@@ -0,0 +1,92 @@
+import { NextResponse } from "next/server";
+import { lookup } from "node:dns/promises";
+import { createSupabaseServerClient } from "@/lib/supabase/server";
+import { requestLogger } from "@/lib/logger";
+import { isAllowedUrl, isPrivateHostname, parseOpenGraph, type LinkPreview } from "@/features/chat/unfurl";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const MAX_HTML_BYTES = 500_000;
+const FETCH_TIMEOUT_MS = 5000;
+const MAX_REDIRECTS = 3;
+
+async function hostResolvesPrivate(hostname: string): Promise<boolean> {
+  try {
+    const addresses = await lookup(hostname, { all: true });
+    return addresses.some((address) => isPrivateHostname(address.address));
+  } catch {
+    return true;
+  }
+}
+
+async function safeFetchHtml(initialUrl: string, signal: AbortSignal): Promise<string | null> {
+  let current = initialUrl;
+  for (let hop = 0; hop <= MAX_REDIRECTS; hop += 1) {
+    if (!isAllowedUrl(current) || (await hostResolvesPrivate(new URL(current).hostname))) return null;
+
+    const response = await fetch(current, {
+      signal,
+      redirect: "manual",
+      headers: { "user-agent": "FlackBot/1.0 (+link-preview)", accept: "text/html" }
+    });
+
+    if (response.status >= 300 && response.status < 400) {
+      const location = response.headers.get("location");
+      if (!location) return null;
+      current = new URL(location, current).toString();
+      continue;
+    }
+
+    const contentType = response.headers.get("content-type") ?? "";
+    if (!response.ok || !contentType.includes("text/html")) return null;
+    return (await response.text()).slice(0, MAX_HTML_BYTES);
+  }
+  return null;
+}
+
+export async function POST(request: Request) {
+  const log = requestLogger("unfurl");
+  const supabase = await createSupabaseServerClient();
+  const {
+    data: { user }
+  } = await supabase.auth.getUser();
+  if (!user) return NextResponse.json({ error: "unauthorized" }, { status: 401 });
+
+  let payload: unknown;
+  try {
+    payload = await request.json();
+  } catch {
+    return NextResponse.json({ error: "invalid body" }, { status: 400 });
+  }
+
+  const url =
+    payload && typeof payload === "object" && typeof (payload as { url?: unknown }).url === "string"
+      ? (payload as { url: string }).url
+      : null;
+  if (!url || !isAllowedUrl(url)) return NextResponse.json({ error: "invalid url" }, { status: 400 });
+
+  const { data: cached } = await supabase
+    .from("link_previews")
+    .select("url,title,description,image_url,site_name")
+    .eq("url", url)
+    .maybeSingle();
+  if (cached) return NextResponse.json(cached);
+
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+  let preview: LinkPreview | null = null;
+  try {
+    const html = await safeFetchHtml(url, controller.signal);
+    if (html) preview = parseOpenGraph(html, url);
+  } catch (error) {
+    log.warn({ err: error instanceof Error ? error.message : "unknown" }, "unfurl fetch failed");
+  } finally {
+    clearTimeout(timeout);
+  }
+
+  if (!preview) return NextResponse.json({ error: "no preview" }, { status: 422 });
+
+  await supabase.from("link_previews").upsert({ ...preview, fetched_at: new Date().toISOString() });
+  return NextResponse.json(preview);
+}
diff --git a/src/features/chat/chat-parts.tsx b/src/features/chat/chat-parts.tsx
index 30d2274..db93d4a 100644
--- a/src/features/chat/chat-parts.tsx
+++ b/src/features/chat/chat-parts.tsx
@@ -1,14 +1,19 @@
 "use client";
 
-import type { ReactNode } from "react";
-import { Hash, Lock, MessageSquare, Paperclip, Plus, Search, Send } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { Hash, Lock, MessageSquare, Paperclip, Pencil, Plus, Search, Send, Trash2 } from "lucide-react";
 import type { User } from "@supabase/supabase-js";
 import { Button } from "@/components/ui/button";
 import { Input, Textarea } from "@/components/ui/input";
 import { channelLabel, cn, formatTime, initials } from "@/lib/utils";
 import type { Channel, ChatMessage, Profile, SearchHit } from "@/types/chat";
+import { DEFAULT_EMOJIS } from "@/features/chat/emoji-recents";
+import { ReactionPicker } from "@/features/chat/reaction-picker";
+import { MessageBody } from "@/features/chat/message-body";
+import { LinkPreviewCard } from "@/features/chat/link-preview";
+import { extractUrls } from "@/features/chat/unfurl";
 
-const emojiQuick = ["+1", "eyes", "check"];
+const emojiQuick = DEFAULT_EMOJIS.slice(0, 3);
 
 function displayEmoji(token: string) {
   if (token === "+1") return "👍";
@@ -40,12 +45,15 @@ function ChannelIcon({ channel }: { channel: Channel | null }) {
 export function ChannelButton({
   channel,
   active,
+  unread = 0,
   onClick
 }: {
   channel: Channel;
   active: boolean;
+  unread?: number;
   onClick: () => void;
 }) {
+  const hasUnread = unread > 0 && !active;
   return (
     <button
       onClick={onClick}
@@ -53,11 +61,17 @@ export function ChannelButton({
         "flex h-7 w-full items-center gap-1.5 rounded-[5px] px-1.5 text-left text-xs transition-colors",
         active
           ? "bg-[var(--surface-2)] text-[var(--text)]"
-          : "text-[var(--muted)] hover:bg-[var(--surface-2)] hover:text-[var(--text)]"
+          : "text-[var(--muted)] hover:bg-[var(--surface-2)] hover:text-[var(--text)]",
+        hasUnread && "font-semibold text-[var(--text)]"
       )}
     >
       <ChannelIcon channel={channel} />
       <span className="truncate">{channelLabel(channel.name, channel.type)}</span>
+      {hasUnread ? (
+        <span className="ml-auto grid h-4 min-w-4 place-items-center rounded-full bg-[var(--accent)] px-1 text-[10px] font-medium text-[var(--bg)]">
+          {unread > 99 ? "99+" : unread}
+        </span>
+      ) : null}
     </button>
   );
 }
@@ -137,11 +151,13 @@ export function AdminSetupPanel({
 export function ChannelHeader({
   activeChannel,
   onlineCount,
-  messageCount
+  messageCount,
+  actions
 }: {
   activeChannel: Channel | null;
   onlineCount: number;
   messageCount: number;
+  actions?: ReactNode;
 }) {
   return (
     <header className="flex h-11 items-center justify-between border-b border-[var(--line)] bg-[var(--surface-0)] px-4">
@@ -156,9 +172,12 @@ export function ChannelHeader({
           </span>
         ) : null}
       </div>
-      <div className="flex items-center gap-2 font-mono text-[10px] uppercase tracking-wide text-[var(--faint)]">
-        <span>{onlineCount} online</span>
-        <span>{messageCount} messages</span>
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2 font-mono text-[10px] uppercase tracking-wide text-[var(--faint)]">
+          <span>{onlineCount} online</span>
+          <span>{messageCount} messages</span>
+        </div>
+        {actions}
       </div>
     </header>
   );
@@ -220,6 +239,15 @@ function ChannelEmptyState({
   );
 }
 
+function NewMessagesDivider() {
+  return (
+    <div className="flex items-center gap-2 px-3 py-1">
+      <span className="h-px flex-1 bg-[var(--danger)] opacity-40" />
+      <span className="font-mono text-[10px] uppercase tracking-wide text-[var(--danger)]">New</span>
+    </div>
+  );
+}
+
 export function ChannelBody({
   messages,
   activeChannel,
@@ -227,6 +255,9 @@ export function ChannelBody({
   currentUserId,
   onReact,
   onThread,
+  onEdit,
+  onDelete,
+  firstUnreadId,
   onDraft,
   onPrepareChannel,
   inviteEmail,
@@ -239,6 +270,9 @@ export function ChannelBody({
   currentUserId?: string;
   onReact: (message: ChatMessage, emoji: string) => void;
   onThread: (message: ChatMessage) => void;
+  onEdit?: (message: ChatMessage, nextBody: string) => void;
+  onDelete?: (message: ChatMessage) => void;
+  firstUnreadId?: string | null;
   onDraft: () => void;
   onPrepareChannel: () => void;
   inviteEmail: string;
@@ -260,13 +294,17 @@ export function ChannelBody({
       ) : (
         <div>
           {messages.map((message) => (
-            <MessageRow
-              key={message.id}
-              message={message}
-              currentUserId={currentUserId}
-              onReact={onReact}
-              onThread={onThread}
-            />
+            <div key={message.id}>
+              {message.id === firstUnreadId ? <NewMessagesDivider /> : null}
+              <MessageRow
+                message={message}
+                currentUserId={currentUserId}
+                onReact={onReact}
+                onThread={onThread}
+                onEdit={onEdit}
+                onDelete={onDelete}
+              />
+            </div>
           ))}
         </div>
       )}
@@ -328,27 +366,132 @@ export function SearchOverlay({
   );
 }
 
+function groupReactions(reactions: ChatMessage["reactions"]): Map<string, number> {
+  const grouped = new Map<string, number>();
+  reactions?.forEach((reaction) => grouped.set(reaction.emoji, (grouped.get(reaction.emoji) ?? 0) + 1));
+  return grouped;
+}
+
+function MessageActions({
+  message,
+  isOwn,
+  onReact,
+  onThread,
+  onEdit,
+  onDelete
+}: {
+  message: ChatMessage;
+  isOwn: boolean;
+  onReact: (message: ChatMessage, emoji: string) => void;
+  onThread: (message: ChatMessage) => void;
+  onEdit?: () => void;
+  onDelete?: (message: ChatMessage) => void;
+}) {
+  return (
+    <div className="ml-auto hidden items-center gap-1 group-hover:flex">
+      {emojiQuick.map((emoji) => (
+        <button
+          key={emoji}
+          onClick={() => onReact(message, emoji)}
+          className="grid h-5 w-5 place-items-center rounded-[4px] border border-[var(--line)] text-[11px] text-[var(--muted)] hover:border-[var(--line-strong)] hover:text-[var(--text)]"
+        >
+          {emoji}
+        </button>
+      ))}
+      <ReactionPicker onSelect={(emoji) => onReact(message, emoji)} />
+      <button
+        onClick={() => onThread(message)}
+        className="h-5 rounded-[4px] border border-[var(--line)] px-1.5 font-mono text-[10px] uppercase text-[var(--muted)] hover:border-[var(--line-strong)] hover:text-[var(--text)]"
+      >
+        reply
+      </button>
+      {isOwn && onEdit ? (
+        <button
+          onClick={onEdit}
+          className="grid h-5 w-5 place-items-center rounded-[4px] border border-[var(--line)] text-[var(--muted)] hover:border-[var(--line-strong)] hover:text-[var(--text)]"
+          aria-label="Edit message"
+        >
+          <Pencil size={11} />
+        </button>
+      ) : null}
+      {isOwn && onDelete ? (
+        <button
+          onClick={() => onDelete(message)}
+          className="grid h-5 w-5 place-items-center rounded-[4px] border border-[var(--line)] text-[var(--muted)] hover:border-[var(--danger)] hover:text-[var(--danger)]"
+          aria-label="Delete message"
+        >
+          <Trash2 size={11} />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function MessageEditor({
+  initial,
+  onSave,
+  onCancel
+}: {
+  initial: string;
+  onSave: (value: string) => void;
+  onCancel: () => void;
+}) {
+  const [draft, setDraft] = useState(initial);
+  const save = () => {
+    if (draft.trim()) onSave(draft);
+  };
+
+  return (
+    <div className="mt-1 space-y-1">
+      <Textarea
+        density="compact"
+        autoFocus
+        value={draft}
+        onChange={(event) => setDraft(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") onCancel();
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") save();
+        }}
+        rows={2}
+      />
+      <div className="flex items-center gap-1.5 text-[10px]">
+        <Button size="sm" onClick={save}>
+          Save
+        </Button>
+        <Button size="sm" variant="ghost" onClick={onCancel}>
+          Cancel
+        </Button>
+        <span className="text-[var(--faint)]">Esc to cancel</span>
+      </div>
+    </div>
+  );
+}
+
 export function MessageRow({
   message,
   currentUserId,
   onReact,
   onThread,
+  onEdit,
+  onDelete,
   compact = false
 }: {
   message: ChatMessage;
   currentUserId?: string;
   onReact: (message: ChatMessage, emoji: string) => void;
   onThread: (message: ChatMessage) => void;
+  onEdit?: (message: ChatMessage, nextBody: string) => void;
+  onDelete?: (message: ChatMessage) => void;
   compact?: boolean;
 }) {
   const author =
     message.profiles?.display_name ??
     message.profiles?.email ??
     (message.author_id === currentUserId ? "You" : "Unknown");
-  const groupedReactions = new Map<string, number>();
-  message.reactions?.forEach((reaction) =>
-    groupedReactions.set(reaction.emoji, (groupedReactions.get(reaction.emoji) ?? 0) + 1)
-  );
+  const isOwn = message.author_id === currentUserId;
+  const [editing, setEditing] = useState(false);
+  const previewUrl = extractUrls(message.body)[0];
+  const groupedReactions = groupReactions(message.reactions);
 
   return (
     <article
@@ -366,25 +509,33 @@ export function MessageRow({
           <span className="truncate text-xs font-medium text-[var(--text)]">{author}</span>
           {message.pending ? <span className="font-mono text-[10px] uppercase text-[var(--warn)]">sending</span> : null}
           {message.failed ? <span className="font-mono text-[10px] uppercase text-[var(--danger)]">failed</span> : null}
-          <div className="ml-auto hidden items-center gap-1 group-hover:flex">
-            {emojiQuick.map((emoji) => (
-              <button
-                key={emoji}
-                onClick={() => onReact(message, emoji)}
-                className="h-5 rounded-[4px] border border-[var(--line)] px-1.5 font-mono text-[10px] text-[var(--muted)] hover:border-[var(--line-strong)] hover:text-[var(--text)]"
-              >
-                {displayEmoji(emoji)}
-              </button>
-            ))}
-            <button
-              onClick={() => onThread(message)}
-              className="h-5 rounded-[4px] border border-[var(--line)] px-1.5 font-mono text-[10px] uppercase text-[var(--muted)] hover:border-[var(--line-strong)] hover:text-[var(--text)]"
-            >
-              reply
-            </button>
-          </div>
+          <MessageActions
+            message={message}
+            isOwn={isOwn}
+            onReact={onReact}
+            onThread={onThread}
+            onEdit={onEdit ? () => setEditing(true) : undefined}
+            onDelete={onDelete}
+          />
         </div>
-        <p className="whitespace-pre-wrap break-words text-[13px] leading-5 text-[var(--text)]">{message.body}</p>
+        {editing ? (
+          <MessageEditor
+            initial={message.body}
+            onCancel={() => setEditing(false)}
+            onSave={(value) => {
+              onEdit?.(message, value);
+              setEditing(false);
+            }}
+          />
+        ) : (
+          <>
+            <div className="flex flex-wrap items-baseline">
+              <MessageBody body={message.body} />
+              {message.edited_at ? <span className="ml-1 text-[10px] text-[var(--faint)]">(edited)</span> : null}
+            </div>
+            {!message.pending && previewUrl ? <LinkPreviewCard url={previewUrl} /> : null}
+          </>
+        )}
         {message.attachments?.length ? (
           <div className="mt-1 flex flex-wrap gap-1">
             {message.attachments.map((attachment) => (
diff --git a/src/features/chat/chat-workspace.tsx b/src/features/chat/chat-workspace.tsx
index e004ccf..aa9805b 100644
--- a/src/features/chat/chat-workspace.tsx
+++ b/src/features/chat/chat-workspace.tsx
@@ -2,46 +2,20 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { Hash, LogOut, MessageSquare, Plus, Search, Users, X } from "lucide-react";
+import { X } from "lucide-react";
 import type { RealtimeChannel, User } from "@supabase/supabase-js";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { createSupabaseBrowserClient } from "@/lib/supabase/client";
-import type { Channel, ChatMessage, Profile, SearchHit } from "@/types/chat";
+import type { Channel, ChatMessage, PresenceState, Profile, SearchHit } from "@/types/chat";
 import { markMessageFailed, mergeIncomingMessage, removeMessage } from "@/features/messages/optimistic";
-import {
-  AdminSetupPanel,
-  Avatar,
-  ChannelBody,
-  ChannelButton,
-  ChannelHeader,
-  Composer,
-  CurrentUserBadge,
-  MessageRow,
-  SearchOverlay,
-  SectionTitle
-} from "@/features/chat/chat-parts";
-
-type TypingState = Record<string, { name: string; at: number }>;
-
-type DbMessagePayload = {
-  id: string;
-  channel_id: string;
-  author_id: string;
-  body: string;
-  parent_id: string | null;
-  edited_at: string | null;
-  deleted_at: string | null;
-  created_at: string;
-};
-
-function payloadRecord(payload: { record?: DbMessagePayload; new?: DbMessagePayload; new_record?: DbMessagePayload }) {
-  return payload.record ?? payload.new ?? payload.new_record;
-}
-
-function payloadOldRecord(payload: { old_record?: DbMessagePayload; old?: DbMessagePayload }) {
-  return payload.old_record ?? payload.old;
-}
+import { ChannelBody, ChannelHeader, Composer, MessageRow, SearchOverlay } from "@/features/chat/chat-parts";
+import { useChannelRealtime, type TypingState } from "@/features/chat/use-channel-realtime";
+import { WorkspaceSidebar } from "@/features/chat/workspace-sidebar";
+import { useUnread } from "@/features/chat/use-unread";
+import { firstUnreadId } from "@/features/chat/unread";
+import { useNotifications } from "@/features/chat/use-notifications";
+import { NotificationBell } from "@/features/chat/notification-bell";
+import { StatusControl } from "@/features/chat/status-control";
+import { expiryFromMinutes } from "@/features/chat/status";
 
 function buildOptimisticMessage(args: {
   id: string;
@@ -99,9 +73,20 @@ export function ChatWorkspace() {
   const [inviteEmail, setInviteEmail] = useState("");
   const [inviteLink, setInviteLink] = useState<string | null>(null);
   const [inviteMessage, setInviteMessage] = useState<string | null>(null);
+  const [dividerLastRead, setDividerLastRead] = useState<string | null>(null);
+  const [toast, setToast] = useState<string | null>(null);
   const typingTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const realtimeChannel = useRef<RealtimeChannel | null>(null);
+  const lastReadRef = useRef<Record<string, string | null>>({});
+  const presenceRef = useRef<PresenceState>("active");
   const activeChannel = channels.find((channel) => channel.id === activeChannelId) ?? null;
+  const { unreadCounts, refreshUnread, markChannelRead } = useUnread(supabase, user?.id);
+  const onNotification = useCallback(() => {
+    void refreshUnread();
+    if (presenceRef.current !== "dnd") setToast("New activity");
+  }, [refreshUnread]);
+  const { notifications, markAllRead } = useNotifications(supabase, user?.id, onNotification);
+  const firstUnread = firstUnreadId(messages, dividerLastRead, user?.id);
 
   const fetchChannels = useCallback(async () => {
     const { data, error } = await supabase
@@ -151,16 +136,18 @@ export function ChatWorkspace() {
           return;
         }
 
+        const profileColumns =
+          "id,org_id,email,display_name,avatar_url,status,status_emoji,status_text,status_expires_at,presence,role,last_seen_at";
         const { data: profileData } = await supabase
           .from("profiles")
-          .select("id,org_id,email,display_name,avatar_url,status,role,last_seen_at")
+          .select(profileColumns)
           .eq("id", authUser.id)
           .single();
         const typedProfile = profileData as unknown as Profile | null;
         const { data: memberData } = typedProfile
           ? await supabase
               .from("profiles")
-              .select("id,org_id,email,display_name,avatar_url,status,role,last_seen_at")
+              .select(profileColumns)
               .eq("org_id", typedProfile.org_id)
               .order("display_name", { ascending: true })
           : { data: [] };
@@ -169,6 +156,7 @@ export function ChatWorkspace() {
         setProfile(typedProfile);
         setMembers((memberData ?? []) as unknown as Profile[]);
         await fetchChannels();
+        await refreshUnread();
       } finally {
         if (live) setLoading(false);
       }
@@ -178,96 +166,46 @@ export function ChatWorkspace() {
     return () => {
       live = false;
     };
-  }, [fetchChannels, router, supabase]);
+  }, [fetchChannels, refreshUnread, router, supabase]);
+
+  useEffect(() => {
+    for (const channel of channels) {
+      if (!(channel.id in lastReadRef.current)) {
+        lastReadRef.current[channel.id] =
+          channel.channel_members?.find((member) => member.user_id === user?.id)?.last_read_at ?? null;
+      }
+    }
+  }, [channels, user?.id]);
 
   useEffect(() => {
     if (!activeChannelId) return;
     let live = true;
 
+    setDividerLastRead(lastReadRef.current[activeChannelId] ?? null);
     fetchMessages(activeChannelId).then((data) => {
       if (live) setMessages(data);
     });
 
-    return () => {
-      live = false;
-    };
-  }, [activeChannelId, fetchMessages]);
-
-  useEffect(() => {
-    if (!activeChannelId || !user) return;
-
-    const channel: RealtimeChannel = supabase.channel(`channel:${activeChannelId}`, {
-      config: {
-        private: true,
-        broadcast: { self: true },
-        presence: { key: user.id }
-      }
-    });
-
-    realtimeChannel.current = channel;
-
-    channel
-      .on("broadcast", { event: "INSERT" }, ({ payload }) => {
-        if (payload.table === "reactions") {
-          fetchMessages(activeChannelId).then(setMessages);
-          return;
-        }
-
-        const record = payloadRecord(payload);
-        if (!record || record.channel_id !== activeChannelId || record.parent_id) return;
-        setMessages((current) => mergeIncomingMessage(current, record));
-      })
-      .on("broadcast", { event: "UPDATE" }, ({ payload }) => {
-        if (payload.table === "reactions") {
-          fetchMessages(activeChannelId).then(setMessages);
-          return;
-        }
-
-        const record = payloadRecord(payload);
-        if (!record || record.channel_id !== activeChannelId || record.parent_id) return;
-        setMessages((current) => mergeIncomingMessage(current, record));
-      })
-      .on("broadcast", { event: "DELETE" }, ({ payload }) => {
-        if (payload.table === "reactions") {
-          fetchMessages(activeChannelId).then(setMessages);
-          return;
-        }
-
-        const oldRecord = payloadOldRecord(payload);
-        if (!oldRecord || oldRecord.channel_id !== activeChannelId) return;
-        setMessages((current) => removeMessage(current, oldRecord.id));
-      })
-      .on("broadcast", { event: "typing" }, ({ payload }) => {
-        if (!payload || payload.user_id === user.id) return;
-        setTyping((current) => ({
-          ...current,
-          [payload.user_id]: { name: payload.name ?? "Someone", at: Date.now() }
-        }));
-      })
-      .on("presence", { event: "sync" }, () => {
-        setOnlineCount(Object.keys(channel.presenceState()).length || 1);
-      })
-      .subscribe(async (status) => {
-        if (status === "SUBSCRIBED") {
-          await channel.track({
-            user_id: user.id,
-            name: profile?.display_name ?? user.email,
-            online_at: new Date().toISOString()
-          });
-        }
-      });
-
-    const cleanupTyping = window.setInterval(() => {
-      const now = Date.now();
-      setTyping((current) => Object.fromEntries(Object.entries(current).filter(([, value]) => now - value.at < 3500)));
-    }, 1500);
+    const now = new Date().toISOString();
+    lastReadRef.current[activeChannelId] = now;
+    void markChannelRead(activeChannelId, now);
 
     return () => {
-      window.clearInterval(cleanupTyping);
-      realtimeChannel.current = null;
-      supabase.removeChannel(channel);
+      live = false;
     };
-  }, [activeChannelId, fetchMessages, profile?.display_name, supabase, user]);
+  }, [activeChannelId, fetchMessages, markChannelRead]);
+
+  useChannelRealtime({
+    supabase,
+    activeChannelId,
+    user,
+    displayName: profile?.display_name,
+    fetchMessages,
+    setMessages,
+    setTyping,
+    setOnlineCount,
+    channelRef: realtimeChannel
+  });
 
   useEffect(() => {
     function onKeyDown(event: KeyboardEvent) {
@@ -295,6 +233,16 @@ export function ChatWorkspace() {
     return () => window.clearTimeout(timeout);
   }, [searchQuery, supabase]);
 
+  useEffect(() => {
+    if (!toast) return;
+    const timeout = window.setTimeout(() => setToast(null), 4000);
+    return () => window.clearTimeout(timeout);
+  }, [toast]);
+
+  useEffect(() => {
+    presenceRef.current = profile?.presence ?? "active";
+  }, [profile?.presence]);
+
   async function createChannel(type: "public" | "private") {
     if (!user || !profile) return;
     const name = newChannelName
@@ -448,11 +396,47 @@ export function ChatWorkspace() {
     if (activeChannelId) setMessages(await fetchMessages(activeChannelId));
   }
 
+  async function editMessage(message: ChatMessage, nextBody: string) {
+    const text = nextBody.trim();
+    if (!user || !text || text === message.body) return;
+    const now = new Date().toISOString();
+    const apply = (list: ChatMessage[]) =>
+      list.map((item) => (item.id === message.id ? { ...item, body: text, edited_at: now } : item));
+    setMessages(apply);
+    setThreadMessages(apply);
+    setThreadRoot((current) => (current?.id === message.id ? { ...current, body: text, edited_at: now } : current));
+    await supabase.from("messages").update({ body: text, edited_at: now }).eq("id", message.id);
+  }
+
+  async function deleteMessage(message: ChatMessage) {
+    if (!user) return;
+    setMessages((current) => removeMessage(current, message.id));
+    setThreadMessages((current) => removeMessage(current, message.id));
+    await supabase.from("messages").update({ deleted_at: new Date().toISOString() }).eq("id", message.id);
+  }
+
   async function openThread(message: ChatMessage) {
     setThreadRoot(message);
     setThreadMessages(await fetchMessages(message.channel_id, message.id));
   }
 
+  async function updatePresence(presence: PresenceState) {
+    if (!user || !profile) return;
+    setProfile({ ...profile, presence });
+    await supabase.from("profiles").update({ presence }).eq("id", user.id);
+  }
+
+  async function saveStatus(emoji: string | null, text: string, minutes: number) {
+    if (!user || !profile) return;
+    const next = {
+      status_emoji: emoji,
+      status_text: text || null,
+      status_expires_at: expiryFromMinutes(minutes, Date.now())
+    };
+    setProfile({ ...profile, ...next });
+    await supabase.from("profiles").update(next).eq("id", user.id);
+  }
+
   async function signOut() {
     await supabase.auth.signOut();
     router.refresh();
@@ -471,102 +455,46 @@ export function ChatWorkspace() {
 
   return (
     <main className="grid h-screen grid-cols-[248px_minmax(0,1fr)] overflow-hidden bg-[var(--bg)] text-[var(--text)] lg:grid-cols-[248px_minmax(0,1fr)_360px]">
-      <aside className="flex min-h-0 flex-col border-r border-[var(--line)] bg-[var(--surface)]">
-        <div className="flex h-11 items-center justify-between border-b border-[var(--line)] px-3">
-          <div className="flex min-w-0 items-center gap-2">
-            <span className="h-2 w-2 rounded-sm bg-[var(--accent)]" />
-            <span className="truncate text-sm font-medium tracking-tight">Flack</span>
-          </div>
-          <button
-            onClick={signOut}
-            className="grid h-7 w-7 place-items-center rounded-[5px] text-[var(--muted)] hover:bg-[var(--surface-2)] hover:text-[var(--text)]"
-            aria-label="Sign out"
-          >
-            <LogOut size={14} />
-          </button>
-        </div>
-
-        <div className="border-b border-[var(--line)] p-2">
-          <button
-            onClick={() => setSearchOpen(true)}
-            className="flex h-8 w-full items-center justify-between rounded-[5px] border border-[var(--line)] bg-[var(--surface-0)] px-2 text-xs text-[var(--muted)] hover:border-[var(--line-strong)] hover:text-[var(--text)]"
-          >
-            <span className="flex items-center gap-2">
-              <Search size={13} /> Search
-            </span>
-            <span className="font-mono text-[10px] text-[var(--faint)]">⌘K</span>
-          </button>
-        </div>
-
-        <div className="thin-scrollbar min-h-0 flex-1 overflow-y-auto px-2 py-2">
-          <AdminSetupPanel
-            visible={profile?.role === "admin"}
-            inviteEmail={inviteEmail}
-            onInviteEmail={setInviteEmail}
-            onCreateInvite={createInvite}
-            inviteLink={inviteLink}
-            inviteMessage={inviteMessage}
+      <WorkspaceSidebar
+        profile={profile}
+        user={user}
+        onSignOut={signOut}
+        onOpenSearch={() => setSearchOpen(true)}
+        inviteEmail={inviteEmail}
+        onInviteEmail={setInviteEmail}
+        onCreateInvite={createInvite}
+        inviteLink={inviteLink}
+        inviteMessage={inviteMessage}
+        publicChannels={publicChannels}
+        dms={dms}
+        members={members}
+        activeChannelId={activeChannelId}
+        unreadCounts={unreadCounts}
+        onSelectChannel={setActiveChannelId}
+        newChannelName={newChannelName}
+        onNewChannelName={setNewChannelName}
+        onCreateChannel={() => createChannel("public")}
+        onCreateDm={createDm}
+        footer={
+          <StatusControl
+            profile={profile}
+            user={user}
+            onPresence={updatePresence}
+            onSaveStatus={saveStatus}
+            onClearStatus={() => saveStatus(null, "", 0)}
           />
-
-          <SectionTitle icon={<Hash size={12} />} label="Channels" />
-          <div className="space-y-px">
-            {publicChannels.map((channel) => (
-              <ChannelButton
-                key={channel.id}
-                channel={channel}
-                active={channel.id === activeChannelId}
-                onClick={() => setActiveChannelId(channel.id)}
-              />
-            ))}
-          </div>
-
-          <div className="mt-2 flex gap-1">
-            <Input
-              density="compact"
-              value={newChannelName}
-              onChange={(event) => setNewChannelName(event.target.value)}
-              placeholder="channel"
-            />
-            <Button size="icon" variant="ghost" onClick={() => createChannel("public")} aria-label="Create channel">
-              <Plus size={13} />
-            </Button>
-          </div>
-
-          <SectionTitle className="mt-4" icon={<MessageSquare size={12} />} label="DMs" />
-          <div className="space-y-px">
-            {dms.map((channel) => (
-              <ChannelButton
-                key={channel.id}
-                channel={channel}
-                active={channel.id === activeChannelId}
-                onClick={() => setActiveChannelId(channel.id)}
-              />
-            ))}
-          </div>
-
-          <SectionTitle className="mt-4" icon={<Users size={12} />} label="People" />
-          <div className="space-y-px">
-            {members
-              .filter((member) => member.id !== user?.id)
-              .slice(0, 10)
-              .map((member) => (
-                <button
-                  key={member.id}
-                  onClick={() => createDm(member.id)}
-                  className="flex h-7 w-full items-center gap-2 rounded-[5px] px-1.5 text-left text-xs text-[var(--muted)] hover:bg-[var(--surface-2)] hover:text-[var(--text)]"
-                >
-                  <Avatar name={member.display_name ?? member.email ?? "Member"} size="sm" />
-                  <span className="truncate">{member.display_name ?? member.email}</span>
-                </button>
-              ))}
-          </div>
-        </div>
-
-        <CurrentUserBadge profile={profile} user={user} />
-      </aside>
+        }
+      />
 
       <section className="flex min-w-0 flex-col">
-        <ChannelHeader activeChannel={activeChannel} onlineCount={onlineCount} messageCount={messages.length} />
+        <ChannelHeader
+          activeChannel={activeChannel}
+          onlineCount={onlineCount}
+          messageCount={messages.length}
+          actions={
+            <NotificationBell notifications={notifications} onMarkAllRead={markAllRead} onSelect={setActiveChannelId} />
+          }
+        />
 
         <ChannelBody
           messages={messages}
@@ -575,6 +503,9 @@ export function ChatWorkspace() {
           currentUserId={user?.id}
           onReact={toggleReaction}
           onThread={openThread}
+          onEdit={editMessage}
+          onDelete={deleteMessage}
+          firstUnreadId={firstUnread}
           onDraft={() => setBody("First update: ")}
           onPrepareChannel={() => setNewChannelName("team-updates")}
           inviteEmail={inviteEmail}
@@ -623,6 +554,8 @@ export function ChatWorkspace() {
                   currentUserId={user?.id}
                   onReact={toggleReaction}
                   onThread={openThread}
+                  onEdit={editMessage}
+                  onDelete={deleteMessage}
                   compact
                 />
               ))}
@@ -652,6 +585,12 @@ export function ChatWorkspace() {
           setSearchOpen(false);
         }}
       />
+
+      {toast ? (
+        <div className="pointer-events-none fixed bottom-4 right-4 z-40 rounded-[6px] border border-[var(--line-strong)] bg-[var(--surface)] px-3 py-2 text-xs text-[var(--text)] shadow-xl shadow-black/40">
+          {toast}
+        </div>
+      ) : null}
     </main>
   );
 }
diff --git a/src/features/chat/emoji-recents.test.ts b/src/features/chat/emoji-recents.test.ts
new file mode 100644
index 0000000..9e507ff
--- /dev/null
+++ b/src/features/chat/emoji-recents.test.ts
@@ -0,0 +1,63 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { addRecent, MAX_RECENTS, readRecents, RECENTS_KEY, writeRecents } from "./emoji-recents";
+
+afterEach(() => {
+  window.localStorage.clear();
+  vi.restoreAllMocks();
+});
+
+describe("addRecent", () => {
+  it("prepends a new emoji", () => {
+    expect(addRecent(["👀"], "👍")).toEqual(["👍", "👀"]);
+  });
+
+  it("moves an existing emoji to the front without duplicating", () => {
+    expect(addRecent(["👀", "👍", "🎉"], "👍")).toEqual(["👍", "👀", "🎉"]);
+  });
+
+  it("caps the list at the max length", () => {
+    const many = Array.from({ length: MAX_RECENTS }, (_, index) => `e${index}`);
+    const result = addRecent(many, "new");
+    expect(result).toHaveLength(MAX_RECENTS);
+    expect(result[0]).toBe("new");
+  });
+
+  it("respects a custom max", () => {
+    expect(addRecent(["a", "b", "c"], "d", 2)).toEqual(["d", "a"]);
+  });
+});
+
+describe("readRecents", () => {
+  it("returns an empty array when nothing is stored", () => {
+    expect(readRecents()).toEqual([]);
+  });
+
+  it("returns stored string entries only", () => {
+    window.localStorage.setItem(RECENTS_KEY, JSON.stringify(["👍", 5, "👀"]));
+    expect(readRecents()).toEqual(["👍", "👀"]);
+  });
+
+  it("returns an empty array for non-array JSON", () => {
+    window.localStorage.setItem(RECENTS_KEY, JSON.stringify({ not: "array" }));
+    expect(readRecents()).toEqual([]);
+  });
+
+  it("returns an empty array on invalid JSON", () => {
+    window.localStorage.setItem(RECENTS_KEY, "{not json");
+    expect(readRecents()).toEqual([]);
+  });
+});
+
+describe("writeRecents", () => {
+  it("persists the list", () => {
+    writeRecents(["👍", "👀"]);
+    expect(JSON.parse(window.localStorage.getItem(RECENTS_KEY) ?? "[]")).toEqual(["👍", "👀"]);
+  });
+
+  it("swallows storage errors", () => {
+    vi.spyOn(window.localStorage.__proto__, "setItem").mockImplementation(() => {
+      throw new Error("quota");
+    });
+    expect(() => writeRecents(["👍"])).not.toThrow();
+  });
+});
diff --git a/src/features/chat/emoji-recents.ts b/src/features/chat/emoji-recents.ts
new file mode 100644
index 0000000..467de8e
--- /dev/null
+++ b/src/features/chat/emoji-recents.ts
@@ -0,0 +1,29 @@
+export const RECENTS_KEY = "flack:emoji-recents";
+export const MAX_RECENTS = 8;
+export const DEFAULT_EMOJIS = ["👍", "❤️", "😂", "🎉", "👀", "✅"];
+
+export function addRecent(recents: string[], emoji: string, max = MAX_RECENTS): string[] {
+  return [emoji, ...recents.filter((item) => item !== emoji)].slice(0, max);
+}
+
+export function readRecents(): string[] {
+  /* v8 ignore next */
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = window.localStorage.getItem(RECENTS_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed) ? parsed.filter((item): item is string => typeof item === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+export function writeRecents(recents: string[]) {
+  /* v8 ignore next */
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(RECENTS_KEY, JSON.stringify(recents));
+  } catch {
+    // localStorage may be unavailable; recents are non-critical.
+  }
+}
diff --git a/src/features/chat/link-preview.tsx b/src/features/chat/link-preview.tsx
new file mode 100644
index 0000000..ac15134
--- /dev/null
+++ b/src/features/chat/link-preview.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { LinkPreview } from "@/features/chat/unfurl";
+
+export function LinkPreviewCard({ url }: { url: string }) {
+  const [preview, setPreview] = useState<LinkPreview | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    const controller = new AbortController();
+    void (async () => {
+      try {
+        const response = await fetch("/api/unfurl", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ url }),
+          signal: controller.signal
+        });
+        if (!response.ok) return;
+        const data = (await response.json()) as LinkPreview;
+        if (active) setPreview(data);
+      } catch {
+        // Preview is best-effort; ignore network/parse failures.
+      }
+    })();
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  }, [url]);
+
+  if (!preview || (!preview.title && !preview.description && !preview.image_url)) return null;
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noreferrer noopener"
+      className="mt-1.5 flex max-w-md gap-2 rounded-[6px] border border-[var(--line)] border-l-2 border-l-[var(--accent)] bg-[var(--surface-0)] p-2 hover:border-[var(--line-strong)]"
+    >
+      {preview.image_url ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={preview.image_url} alt="" className="h-12 w-12 shrink-0 rounded-[4px] object-cover" />
+      ) : null}
+      <div className="min-w-0">
+        {preview.site_name ? (
+          <p className="truncate text-[10px] uppercase tracking-wide text-[var(--faint)]">{preview.site_name}</p>
+        ) : null}
+        {preview.title ? <p className="truncate text-xs font-medium text-[var(--text)]">{preview.title}</p> : null}
+        {preview.description ? (
+          <p className="line-clamp-2 text-[11px] text-[var(--muted)]">{preview.description}</p>
+        ) : null}
+      </div>
+    </a>
+  );
+}
diff --git a/src/features/chat/message-body.tsx b/src/features/chat/message-body.tsx
new file mode 100644
index 0000000..bf6a335
--- /dev/null
+++ b/src/features/chat/message-body.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeSanitize from "rehype-sanitize";
+
+const components: Components = {
+  p: (props) => <p className="my-0.5 whitespace-pre-wrap break-words first:mt-0 last:mb-0" {...props} />,
+  a: (props) => (
+    <a
+      className="text-[var(--accent)] underline underline-offset-2"
+      target="_blank"
+      rel="noreferrer noopener"
+      {...props}
+    />
+  ),
+  ul: (props) => <ul className="my-1 list-disc space-y-0.5 pl-5" {...props} />,
+  ol: (props) => <ol className="my-1 list-decimal space-y-0.5 pl-5" {...props} />,
+  code: (props) => (
+    <code
+      className="rounded-[3px] bg-[var(--surface-2)] px-1 py-0.5 font-mono text-[12px] text-[var(--text)]"
+      {...props}
+    />
+  ),
+  pre: (props) => (
+    <pre
+      className="thin-scrollbar my-1 overflow-x-auto rounded-[5px] border border-[var(--line)] bg-[var(--surface-0)] p-2 text-[12px]"
+      {...props}
+    />
+  ),
+  blockquote: (props) => (
+    <blockquote className="my-1 border-l-2 border-[var(--line-strong)] pl-2 text-[var(--muted)]" {...props} />
+  )
+};
+
+export function MessageBody({ body }: { body: string }) {
+  return (
+    <div className="break-words text-[13px] leading-5 text-[var(--text)]">
+      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeSanitize]} components={components}>
+        {body}
+      </ReactMarkdown>
+    </div>
+  );
+}
diff --git a/src/features/chat/notification-bell.tsx b/src/features/chat/notification-bell.tsx
new file mode 100644
index 0000000..dc352c7
--- /dev/null
+++ b/src/features/chat/notification-bell.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Bell } from "lucide-react";
+import { formatTime } from "@/lib/utils";
+import type { AppNotification } from "@/types/chat";
+import { notificationLabel, unreadNotificationCount } from "@/features/chat/notifications";
+
+export function NotificationBell({
+  notifications,
+  onMarkAllRead,
+  onSelect
+}: {
+  notifications: AppNotification[];
+  onMarkAllRead: () => void;
+  onSelect: (channelId: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const unread = unreadNotificationCount(notifications);
+
+  useEffect(() => {
+    if (!open) return;
+    function onMouseDown(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) setOpen(false);
+    }
+    window.addEventListener("mousedown", onMouseDown);
+    return () => window.removeEventListener("mousedown", onMouseDown);
+  }, [open]);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((value) => !value)}
+        aria-label="Notifications"
+        className="relative grid h-7 w-7 place-items-center rounded-[5px] text-[var(--muted)] hover:bg-[var(--surface-2)] hover:text-[var(--text)]"
+      >
+        <Bell size={14} />
+        {unread > 0 ? (
+          <span className="absolute -right-0.5 -top-0.5 grid h-3.5 min-w-3.5 place-items-center rounded-full bg-[var(--accent)] px-0.5 text-[9px] font-medium text-[var(--bg)]">
+            {unread > 9 ? "9+" : unread}
+          </span>
+        ) : null}
+      </button>
+      {open ? (
+        <div className="absolute right-0 z-30 mt-1 w-[320px] rounded-[6px] border border-[var(--line-strong)] bg-[var(--surface)] shadow-xl shadow-black/40">
+          <div className="flex items-center justify-between border-b border-[var(--line)] px-3 py-2">
+            <span className="text-xs font-medium">Notifications</span>
+            {unread > 0 ? (
+              <button onClick={onMarkAllRead} className="text-[10px] uppercase tracking-wide text-[var(--accent)]">
+                Mark all read
+              </button>
+            ) : null}
+          </div>
+          <div className="thin-scrollbar max-h-[60vh] overflow-y-auto">
+            {notifications.length === 0 ? (
+              <p className="p-6 text-center text-xs text-[var(--faint)]">No notifications yet</p>
+            ) : (
+              notifications.map((notification) => (
+                <button
+                  key={notification.id}
+                  onClick={() => {
+                    if (notification.messages?.channel_id) onSelect(notification.messages.channel_id);
+                    setOpen(false);
+                  }}
+                  className="flex w-full flex-col gap-0.5 border-b border-[var(--line)] px-3 py-2 text-left last:border-b-0 hover:bg-[var(--surface-2)]"
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs font-medium text-[var(--text)]">
+                      {notificationLabel(notification.type)}
+                    </span>
+                    <span className="font-mono text-[10px] text-[var(--faint)]">
+                      {formatTime(notification.created_at)}
+                    </span>
+                  </div>
+                  {notification.messages?.body ? (
+                    <span className="truncate text-[11px] text-[var(--muted)]">{notification.messages.body}</span>
+                  ) : null}
+                  {!notification.read_at ? <span className="h-1 w-1 rounded-full bg-[var(--accent)]" /> : null}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/features/chat/notifications.test.ts b/src/features/chat/notifications.test.ts
new file mode 100644
index 0000000..f5fc1b1
--- /dev/null
+++ b/src/features/chat/notifications.test.ts
@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import {
+  markAllNotificationsRead,
+  mergeNotification,
+  notificationLabel,
+  unreadNotificationCount
+} from "./notifications";
+import type { AppNotification } from "@/types/chat";
+
+function notification(id: string, readAt: string | null = null): AppNotification {
+  return { id, user_id: "u1", type: "mention", message_id: "m1", read_at: readAt, created_at: "2026-01-01" };
+}
+
+describe("notificationLabel", () => {
+  it("maps every notification type", () => {
+    expect(notificationLabel("mention")).toBe("Mentioned you");
+    expect(notificationLabel("thread")).toBe("Replied to your thread");
+    expect(notificationLabel("dm")).toBe("Sent you a direct message");
+    expect(notificationLabel("reaction")).toBe("Reacted to your message");
+  });
+});
+
+describe("unreadNotificationCount", () => {
+  it("counts only unread notifications", () => {
+    expect(unreadNotificationCount([notification("a"), notification("b", "2026-01-02"), notification("c")])).toBe(2);
+  });
+});
+
+describe("markAllNotificationsRead", () => {
+  it("sets read_at on unread notifications only", () => {
+    const result = markAllNotificationsRead([notification("a"), notification("b", "earlier")], "2026-06-01");
+    expect(result[0].read_at).toBe("2026-06-01");
+    expect(result[1].read_at).toBe("earlier");
+  });
+});
+
+describe("mergeNotification", () => {
+  it("prepends a new notification", () => {
+    expect(mergeNotification([notification("a")], notification("b")).map((item) => item.id)).toEqual(["b", "a"]);
+  });
+
+  it("deduplicates by id", () => {
+    expect(mergeNotification([notification("a")], notification("a")).map((item) => item.id)).toEqual(["a"]);
+  });
+
+  it("caps to the max length", () => {
+    const list = Array.from({ length: 20 }, (_, index) => notification(`n${index}`));
+    expect(mergeNotification(list, notification("new"))).toHaveLength(20);
+  });
+});
diff --git a/src/features/chat/notifications.ts b/src/features/chat/notifications.ts
new file mode 100644
index 0000000..9ed9bba
--- /dev/null
+++ b/src/features/chat/notifications.ts
@@ -0,0 +1,27 @@
+import type { AppNotification, NotificationType } from "@/types/chat";
+
+export function notificationLabel(type: NotificationType): string {
+  switch (type) {
+    case "mention":
+      return "Mentioned you";
+    case "thread":
+      return "Replied to your thread";
+    case "dm":
+      return "Sent you a direct message";
+    case "reaction":
+      return "Reacted to your message";
+  }
+}
+
+export function unreadNotificationCount(list: AppNotification[]): number {
+  return list.filter((notification) => !notification.read_at).length;
+}
+
+export function markAllNotificationsRead(list: AppNotification[], readAt: string): AppNotification[] {
+  return list.map((notification) => (notification.read_at ? notification : { ...notification, read_at: readAt }));
+}
+
+export function mergeNotification(list: AppNotification[], incoming: AppNotification, max = 20): AppNotification[] {
+  const without = list.filter((notification) => notification.id !== incoming.id);
+  return [incoming, ...without].slice(0, max);
+}
diff --git a/src/features/chat/reaction-picker.tsx b/src/features/chat/reaction-picker.tsx
new file mode 100644
index 0000000..dcb3836
--- /dev/null
+++ b/src/features/chat/reaction-picker.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { SmilePlus } from "lucide-react";
+import { EmojiPicker, type EmojiPickerListCategoryHeaderProps, type EmojiPickerListEmojiProps } from "frimousse";
+import { addRecent, readRecents, writeRecents } from "@/features/chat/emoji-recents";
+
+function EmojiCategoryHeader({ category, ...props }: EmojiPickerListCategoryHeaderProps) {
+  return (
+    <div
+      className="bg-[var(--surface)] px-1 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-[var(--faint)]"
+      {...props}
+    >
+      {category.label}
+    </div>
+  );
+}
+
+function EmojiButton({ emoji, ...props }: EmojiPickerListEmojiProps) {
+  return (
+    <button className="grid h-7 w-7 place-items-center rounded-[4px] text-base hover:bg-[var(--surface-2)]" {...props}>
+      {emoji.emoji}
+    </button>
+  );
+}
+
+export function ReactionPicker({ onSelect }: { onSelect: (emoji: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const [recents, setRecents] = useState<string[]>([]);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const timeout = window.setTimeout(() => setRecents(readRecents()), 0);
+    return () => window.clearTimeout(timeout);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    function onMouseDown(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) setOpen(false);
+    }
+    window.addEventListener("mousedown", onMouseDown);
+    return () => window.removeEventListener("mousedown", onMouseDown);
+  }, [open]);
+
+  function pick(emoji: string) {
+    const next = addRecent(recents, emoji);
+    setRecents(next);
+    writeRecents(next);
+    onSelect(emoji);
+    setOpen(false);
+  }
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((value) => !value)}
+        aria-label="Add reaction"
+        className="grid h-5 w-5 place-items-center rounded-[4px] border border-[var(--line)] text-[var(--muted)] hover:border-[var(--line-strong)] hover:text-[var(--text)]"
+      >
+        <SmilePlus size={12} />
+      </button>
+      {open ? (
+        <div className="absolute right-0 z-30 mt-1 w-[284px] rounded-[6px] border border-[var(--line-strong)] bg-[var(--surface)] p-2 shadow-xl shadow-black/40">
+          {recents.length ? (
+            <div className="mb-1.5 flex flex-wrap gap-1 border-b border-[var(--line)] pb-1.5">
+              {recents.map((emoji) => (
+                <button
+                  key={emoji}
+                  onClick={() => pick(emoji)}
+                  className="grid h-6 w-6 place-items-center rounded-[4px] text-sm hover:bg-[var(--surface-2)]"
+                >
+                  {emoji}
+                </button>
+              ))}
+            </div>
+          ) : null}
+          <EmojiPicker.Root
+            onEmojiSelect={({ emoji }) => pick(emoji)}
+            className="isolate flex h-[260px] w-full flex-col"
+          >
+            <EmojiPicker.Search className="mb-2 h-8 w-full rounded-[5px] border border-[var(--line)] bg-[var(--surface-0)] px-2 text-xs outline-none placeholder:text-[var(--faint)]" />
+            <EmojiPicker.Viewport className="thin-scrollbar relative flex-1 outline-none">
+              <EmojiPicker.Loading className="grid h-full place-items-center text-xs text-[var(--faint)]">
+                Loading…
+              </EmojiPicker.Loading>
+              <EmojiPicker.Empty className="grid h-full place-items-center text-xs text-[var(--faint)]">
+                No emoji found.
+              </EmojiPicker.Empty>
+              <EmojiPicker.List
+                className="select-none pb-1"
+                components={{ CategoryHeader: EmojiCategoryHeader, Emoji: EmojiButton }}
+              />
+            </EmojiPicker.Viewport>
+          </EmojiPicker.Root>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/features/chat/status-control.tsx b/src/features/chat/status-control.tsx
new file mode 100644
index 0000000..a532ac4
--- /dev/null
+++ b/src/features/chat/status-control.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { User } from "@supabase/supabase-js";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import type { PresenceState, Profile } from "@/types/chat";
+import { Avatar } from "@/features/chat/chat-parts";
+import { presenceDotClass, presenceLabel, statusActive, STATUS_DURATIONS } from "@/features/chat/status";
+import { useNow } from "@/features/chat/use-now";
+
+const PRESENCE_OPTIONS: PresenceState[] = ["active", "away", "dnd"];
+
+export function StatusControl({
+  profile,
+  user,
+  onPresence,
+  onSaveStatus,
+  onClearStatus
+}: {
+  profile: Profile | null;
+  user: User | null;
+  onPresence: (presence: PresenceState) => void;
+  onSaveStatus: (emoji: string | null, text: string, minutes: number) => void;
+  onClearStatus: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [emoji, setEmoji] = useState("");
+  const [text, setText] = useState("");
+  const [minutes, setMinutes] = useState(0);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function onMouseDown(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) setOpen(false);
+    }
+    window.addEventListener("mousedown", onMouseDown);
+    return () => window.removeEventListener("mousedown", onMouseDown);
+  }, [open]);
+
+  const now = useNow();
+  const presence = profile?.presence ?? "active";
+  const hasStatus = statusActive(profile, now);
+  const name = profile?.display_name ?? user?.email ?? "Me";
+
+  function openEditor() {
+    setEmoji(profile?.status_emoji ?? "");
+    setText(profile?.status_text ?? "");
+    setMinutes(0);
+    setOpen(true);
+  }
+
+  function save() {
+    onSaveStatus(emoji.trim() || null, text.trim(), minutes);
+    setOpen(false);
+  }
+
+  return (
+    <div ref={ref} className="relative border-t border-[var(--line)] px-2 py-2">
+      <button
+        onClick={openEditor}
+        className="flex w-full items-center gap-2 rounded-[5px] px-1 py-1 text-left hover:bg-[var(--surface-2)]"
+      >
+        <span className="relative">
+          <Avatar name={name} size="sm" />
+          <span
+            className={`absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border border-[var(--surface)] ${presenceDotClass(presence)}`}
+          />
+        </span>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-xs font-medium">{name}</p>
+          <p className="truncate text-[10px] text-[var(--muted)]">
+            {hasStatus
+              ? `${profile?.status_emoji ?? ""} ${profile?.status_text ?? ""}`.trim()
+              : presenceLabel(presence)}
+          </p>
+        </div>
+      </button>
+
+      {open ? (
+        <div className="absolute bottom-full left-2 right-2 z-30 mb-1 rounded-[6px] border border-[var(--line-strong)] bg-[var(--surface)] p-2 shadow-xl shadow-black/40">
+          <p className="mb-1 px-1 text-[10px] font-medium uppercase tracking-wide text-[var(--faint)]">Presence</p>
+          <div className="mb-2 flex gap-1">
+            {PRESENCE_OPTIONS.map((option) => (
+              <button
+                key={option}
+                onClick={() => onPresence(option)}
+                className={`flex flex-1 items-center justify-center gap-1 rounded-[4px] border px-1 py-1 text-[10px] ${
+                  presence === option
+                    ? "border-[var(--line-strong)] text-[var(--text)]"
+                    : "border-[var(--line)] text-[var(--muted)] hover:text-[var(--text)]"
+                }`}
+              >
+                <span className={`h-2 w-2 rounded-full ${presenceDotClass(option)}`} />
+                {presenceLabel(option)}
+              </button>
+            ))}
+          </div>
+
+          <p className="mb-1 px-1 text-[10px] font-medium uppercase tracking-wide text-[var(--faint)]">Status</p>
+          <div className="mb-2 flex gap-1">
+            <Input
+              density="compact"
+              value={emoji}
+              onChange={(event) => setEmoji(event.target.value)}
+              placeholder="😀"
+              className="w-12 text-center"
+            />
+            <Input
+              density="compact"
+              value={text}
+              onChange={(event) => setText(event.target.value)}
+              placeholder="What's your status?"
+            />
+          </div>
+          <select
+            value={minutes}
+            onChange={(event) => setMinutes(Number(event.target.value))}
+            className="mb-2 h-8 w-full rounded-[5px] border border-[var(--line)] bg-[var(--surface-0)] px-2 text-xs outline-none"
+          >
+            {STATUS_DURATIONS.map((duration) => (
+              <option key={duration.minutes} value={duration.minutes}>
+                Clear after: {duration.label}
+              </option>
+            ))}
+          </select>
+          <div className="flex gap-1.5">
+            <Button size="sm" onClick={save}>
+              Save
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => {
+                onClearStatus();
+                setOpen(false);
+              }}
+            >
+              Clear
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/features/chat/status.test.ts b/src/features/chat/status.test.ts
new file mode 100644
index 0000000..d3c081d
--- /dev/null
+++ b/src/features/chat/status.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import { expiryFromMinutes, presenceDotClass, presenceLabel, statusActive } from "./status";
+
+describe("expiryFromMinutes", () => {
+  it("returns null for non-positive durations", () => {
+    expect(expiryFromMinutes(0, 1_000)).toBeNull();
+    expect(expiryFromMinutes(-5, 1_000)).toBeNull();
+  });
+
+  it("returns an ISO timestamp in the future", () => {
+    const now = Date.UTC(2026, 0, 1, 0, 0, 0);
+    expect(expiryFromMinutes(30, now)).toBe(new Date(now + 30 * 60_000).toISOString());
+  });
+});
+
+describe("statusActive", () => {
+  const base = { status_text: "Lunch", status_emoji: "🍔", status_expires_at: null };
+
+  it("is false without a profile", () => {
+    expect(statusActive(null, 0)).toBe(false);
+  });
+
+  it("is false without emoji or text", () => {
+    expect(statusActive({ status_text: null, status_emoji: null, status_expires_at: null }, 0)).toBe(false);
+  });
+
+  it("is true when there is no expiry", () => {
+    expect(statusActive(base, Date.now())).toBe(true);
+  });
+
+  it("respects expiry", () => {
+    const now = 10_000;
+    expect(statusActive({ ...base, status_expires_at: new Date(now + 1000).toISOString() }, now)).toBe(true);
+    expect(statusActive({ ...base, status_expires_at: new Date(now - 1000).toISOString() }, now)).toBe(false);
+  });
+});
+
+describe("presenceLabel", () => {
+  it("maps each presence", () => {
+    expect(presenceLabel("active")).toBe("Active");
+    expect(presenceLabel("away")).toBe("Away");
+    expect(presenceLabel("dnd")).toBe("Do not disturb");
+  });
+});
+
+describe("presenceDotClass", () => {
+  it("returns a distinct class per presence", () => {
+    expect(presenceDotClass("active")).toContain("accent");
+    expect(presenceDotClass("away")).toContain("warn");
+    expect(presenceDotClass("dnd")).toContain("danger");
+  });
+});
diff --git a/src/features/chat/status.ts b/src/features/chat/status.ts
new file mode 100644
index 0000000..3d5e5c4
--- /dev/null
+++ b/src/features/chat/status.ts
@@ -0,0 +1,46 @@
+import type { PresenceState, Profile } from "@/types/chat";
+
+export const STATUS_DURATIONS = [
+  { label: "30 minutes", minutes: 30 },
+  { label: "1 hour", minutes: 60 },
+  { label: "4 hours", minutes: 240 },
+  { label: "Today", minutes: 480 },
+  { label: "Don't clear", minutes: 0 }
+];
+
+export function expiryFromMinutes(minutes: number, nowMs: number): string | null {
+  if (minutes <= 0) return null;
+  return new Date(nowMs + minutes * 60_000).toISOString();
+}
+
+export function statusActive(
+  profile: Pick<Profile, "status_text" | "status_emoji" | "status_expires_at"> | null,
+  nowMs: number
+): boolean {
+  if (!profile) return false;
+  if (!profile.status_text && !profile.status_emoji) return false;
+  if (!profile.status_expires_at) return true;
+  return new Date(profile.status_expires_at).getTime() > nowMs;
+}
+
+export function presenceLabel(presence: PresenceState): string {
+  switch (presence) {
+    case "active":
+      return "Active";
+    case "away":
+      return "Away";
+    case "dnd":
+      return "Do not disturb";
+  }
+}
+
+export function presenceDotClass(presence: PresenceState): string {
+  switch (presence) {
+    case "active":
+      return "bg-[var(--accent)]";
+    case "away":
+      return "bg-[var(--warn)]";
+    case "dnd":
+      return "bg-[var(--danger)]";
+  }
+}
diff --git a/src/features/chat/unfurl.test.ts b/src/features/chat/unfurl.test.ts
new file mode 100644
index 0000000..bb02e7b
--- /dev/null
+++ b/src/features/chat/unfurl.test.ts
@@ -0,0 +1,107 @@
+import { describe, expect, it } from "vitest";
+import { extractUrls, isAllowedUrl, isPrivateHostname, parseOpenGraph } from "./unfurl";
+
+describe("extractUrls", () => {
+  it("extracts http and https urls", () => {
+    expect(extractUrls("see http://a.com and https://b.com/x")).toEqual(["http://a.com", "https://b.com/x"]);
+  });
+
+  it("strips trailing punctuation", () => {
+    expect(extractUrls("visit https://example.com.")).toEqual(["https://example.com"]);
+  });
+
+  it("dedupes repeated urls", () => {
+    expect(extractUrls("https://a.com https://a.com")).toEqual(["https://a.com"]);
+  });
+
+  it("returns empty when there are no urls", () => {
+    expect(extractUrls("no links here")).toEqual([]);
+  });
+});
+
+describe("isPrivateHostname", () => {
+  it("flags loopback and local domains", () => {
+    expect(isPrivateHostname("localhost")).toBe(true);
+    expect(isPrivateHostname("db.local")).toBe(true);
+    expect(isPrivateHostname("svc.internal")).toBe(true);
+    expect(isPrivateHostname("::1")).toBe(true);
+    expect(isPrivateHostname("fd00::1")).toBe(true);
+  });
+
+  it("flags private IPv4 ranges", () => {
+    expect(isPrivateHostname("10.0.0.1")).toBe(true);
+    expect(isPrivateHostname("127.0.0.1")).toBe(true);
+    expect(isPrivateHostname("169.254.1.1")).toBe(true);
+    expect(isPrivateHostname("172.16.5.5")).toBe(true);
+    expect(isPrivateHostname("192.168.1.2")).toBe(true);
+    expect(isPrivateHostname("0.0.0.0")).toBe(true);
+  });
+
+  it("allows public hosts", () => {
+    expect(isPrivateHostname("example.com")).toBe(false);
+    expect(isPrivateHostname("8.8.8.8")).toBe(false);
+    expect(isPrivateHostname("172.32.0.1")).toBe(false);
+  });
+});
+
+describe("isAllowedUrl", () => {
+  it("rejects invalid urls", () => {
+    expect(isAllowedUrl("not a url")).toBe(false);
+  });
+
+  it("rejects non-http protocols", () => {
+    expect(isAllowedUrl("ftp://example.com")).toBe(false);
+    expect(isAllowedUrl("file:///etc/passwd")).toBe(false);
+  });
+
+  it("rejects private hosts", () => {
+    expect(isAllowedUrl("http://localhost:3000")).toBe(false);
+    expect(isAllowedUrl("http://192.168.0.1")).toBe(false);
+  });
+
+  it("allows public http(s) urls", () => {
+    expect(isAllowedUrl("https://example.com/path")).toBe(true);
+  });
+});
+
+describe("parseOpenGraph", () => {
+  it("prefers open graph tags", () => {
+    const html = `
+      <meta property="og:title" content="Title" />
+      <meta property="og:description" content="Desc" />
+      <meta property="og:image" content="https://img" />
+      <meta property="og:site_name" content="Site" />
+    `;
+    expect(parseOpenGraph(html, "https://x.com")).toEqual({
+      url: "https://x.com",
+      title: "Title",
+      description: "Desc",
+      image_url: "https://img",
+      site_name: "Site"
+    });
+  });
+
+  it("falls back to <title> and meta description", () => {
+    const html = `<title> Fallback </title><meta name="description" content="Meta desc">`;
+    const result = parseOpenGraph(html, "https://x.com");
+    expect(result.title).toBe("Fallback");
+    expect(result.description).toBe("Meta desc");
+    expect(result.image_url).toBeNull();
+    expect(result.site_name).toBeNull();
+  });
+
+  it("ignores meta tags without a content attribute", () => {
+    const html = `<meta property="og:title"><title>Real</title>`;
+    expect(parseOpenGraph(html, "https://x.com").title).toBe("Real");
+  });
+
+  it("returns nulls when nothing is present", () => {
+    expect(parseOpenGraph("<html></html>", "https://x.com")).toEqual({
+      url: "https://x.com",
+      title: null,
+      description: null,
+      image_url: null,
+      site_name: null
+    });
+  });
+});
diff --git a/src/features/chat/unfurl.ts b/src/features/chat/unfurl.ts
new file mode 100644
index 0000000..5019b0f
--- /dev/null
+++ b/src/features/chat/unfurl.ts
@@ -0,0 +1,57 @@
+export type LinkPreview = {
+  url: string;
+  title: string | null;
+  description: string | null;
+  image_url: string | null;
+  site_name: string | null;
+};
+
+const URL_REGEX = /\bhttps?:\/\/[^\s<>()]+/gi;
+
+export function extractUrls(text: string): string[] {
+  const matches = text.match(URL_REGEX) ?? [];
+  const cleaned = matches.map((url) => url.replace(/[.,;:!?]+$/, ""));
+  return Array.from(new Set(cleaned));
+}
+
+export function isPrivateHostname(hostname: string): boolean {
+  const host = hostname.toLowerCase().replace(/^\[|\]$/g, "");
+  if (host === "localhost" || host.endsWith(".local") || host.endsWith(".internal")) return true;
+  if (host === "::1" || host.startsWith("fc") || host.startsWith("fd") || host.startsWith("fe80")) return true;
+  const parts = host.split(".");
+  if (parts.length === 4 && parts.every((part) => /^\d+$/.test(part))) {
+    const [a, b] = parts.map(Number);
+    if (a === 0 || a === 10 || a === 127) return true;
+    if (a === 169 && b === 254) return true;
+    if (a === 172 && b >= 16 && b <= 31) return true;
+    if (a === 192 && b === 168) return true;
+  }
+  return false;
+}
+
+export function isAllowedUrl(raw: string): boolean {
+  let url: URL;
+  try {
+    url = new URL(raw);
+  } catch {
+    return false;
+  }
+  if (url.protocol !== "http:" && url.protocol !== "https:") return false;
+  return !isPrivateHostname(url.hostname);
+}
+
+export function parseOpenGraph(html: string, url: string): LinkPreview {
+  const meta = (property: string) => {
+    const tag = html.match(new RegExp(`<meta[^>]+(?:property|name)=["']${property}["'][^>]*>`, "i"))?.[0];
+    if (!tag) return null;
+    return tag.match(/content=["']([^"']*)["']/i)?.[1] ?? null;
+  };
+  const titleTag = html.match(/<title[^>]*>([^<]*)<\/title>/i)?.[1]?.trim() ?? null;
+  return {
+    url,
+    title: meta("og:title") ?? titleTag,
+    description: meta("og:description") ?? meta("description"),
+    image_url: meta("og:image"),
+    site_name: meta("og:site_name")
+  };
+}
diff --git a/src/features/chat/unread.test.ts b/src/features/chat/unread.test.ts
new file mode 100644
index 0000000..5b2d179
--- /dev/null
+++ b/src/features/chat/unread.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { channelLastRead, firstUnreadId, unreadTotal } from "./unread";
+import type { Channel, ChatMessage } from "@/types/chat";
+
+function channel(members: Channel["channel_members"]): Channel {
+  return {
+    id: "c1",
+    org_id: "o1",
+    type: "public",
+    name: "general",
+    topic: null,
+    created_at: "t",
+    channel_members: members
+  };
+}
+
+function message(id: string, createdAt: string, authorId: string): ChatMessage {
+  return {
+    id,
+    channel_id: "c1",
+    author_id: authorId,
+    body: "hi",
+    parent_id: null,
+    edited_at: null,
+    deleted_at: null,
+    created_at: createdAt
+  };
+}
+
+describe("channelLastRead", () => {
+  it("returns null without a channel or user", () => {
+    expect(channelLastRead(undefined, "u1")).toBeNull();
+    expect(channelLastRead(channel([]), undefined)).toBeNull();
+  });
+
+  it("returns the member's last_read_at", () => {
+    const result = channelLastRead(channel([{ user_id: "u1", role: "member", last_read_at: "2026-01-01" }]), "u1");
+    expect(result).toBe("2026-01-01");
+  });
+
+  it("returns null when the member is absent", () => {
+    expect(channelLastRead(channel([{ user_id: "other", role: "member", last_read_at: "x" }]), "u1")).toBeNull();
+  });
+});
+
+describe("firstUnreadId", () => {
+  const messages = [
+    message("a", "2026-01-01", "u2"),
+    message("b", "2026-01-02", "u2"),
+    message("c", "2026-01-03", "u1")
+  ];
+
+  it("returns null when nothing is read yet", () => {
+    expect(firstUnreadId(messages, null, "u1")).toBeNull();
+  });
+
+  it("returns the first message after last read from another author", () => {
+    expect(firstUnreadId(messages, "2026-01-01", "u1")).toBe("b");
+  });
+
+  it("skips the current user's own messages", () => {
+    expect(firstUnreadId(messages, "2026-01-02", "u1")).toBeNull();
+  });
+});
+
+describe("unreadTotal", () => {
+  it("sums all channel counts", () => {
+    expect(unreadTotal({ a: 2, b: 0, c: 5 })).toBe(7);
+  });
+
+  it("returns 0 for an empty map", () => {
+    expect(unreadTotal({})).toBe(0);
+  });
+});
diff --git a/src/features/chat/unread.ts b/src/features/chat/unread.ts
new file mode 100644
index 0000000..84491eb
--- /dev/null
+++ b/src/features/chat/unread.ts
@@ -0,0 +1,20 @@
+import type { Channel, ChatMessage } from "@/types/chat";
+
+export function channelLastRead(channel: Channel | undefined, userId: string | undefined): string | null {
+  if (!channel || !userId) return null;
+  return channel.channel_members?.find((member) => member.user_id === userId)?.last_read_at ?? null;
+}
+
+export function firstUnreadId(
+  messages: ChatMessage[],
+  lastReadAt: string | null,
+  currentUserId: string | undefined
+): string | null {
+  if (!lastReadAt) return null;
+  const found = messages.find((message) => message.created_at > lastReadAt && message.author_id !== currentUserId);
+  return found ? found.id : null;
+}
+
+export function unreadTotal(counts: Record<string, number>): number {
+  return Object.values(counts).reduce((sum, value) => sum + value, 0);
+}
diff --git a/src/features/chat/use-channel-realtime.ts b/src/features/chat/use-channel-realtime.ts
new file mode 100644
index 0000000..65b3418
--- /dev/null
+++ b/src/features/chat/use-channel-realtime.ts
@@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, type Dispatch, type MutableRefObject, type SetStateAction } from "react";
+import type { RealtimeChannel, SupabaseClient, User } from "@supabase/supabase-js";
+import type { Database } from "@/types/database";
+import type { ChatMessage } from "@/types/chat";
+import { mergeIncomingMessage, removeMessage } from "@/features/messages/optimistic";
+
+export type TypingState = Record<string, { name: string; at: number }>;
+
+type DbMessagePayload = {
+  id: string;
+  channel_id: string;
+  author_id: string;
+  body: string;
+  parent_id: string | null;
+  edited_at: string | null;
+  deleted_at: string | null;
+  created_at: string;
+};
+
+function payloadRecord(payload: { record?: DbMessagePayload; new?: DbMessagePayload; new_record?: DbMessagePayload }) {
+  return payload.record ?? payload.new ?? payload.new_record;
+}
+
+function payloadOldRecord(payload: { old_record?: DbMessagePayload; old?: DbMessagePayload }) {
+  return payload.old_record ?? payload.old;
+}
+
+type ChannelRealtimeArgs = {
+  supabase: SupabaseClient<Database>;
+  activeChannelId: string | null;
+  user: User | null;
+  displayName: string | null | undefined;
+  fetchMessages: (channelId: string, parentId?: string | null) => Promise<ChatMessage[]>;
+  setMessages: Dispatch<SetStateAction<ChatMessage[]>>;
+  setTyping: Dispatch<SetStateAction<TypingState>>;
+  setOnlineCount: Dispatch<SetStateAction<number>>;
+  channelRef: MutableRefObject<RealtimeChannel | null>;
+};
+
+export function useChannelRealtime({
+  supabase,
+  activeChannelId,
+  user,
+  displayName,
+  fetchMessages,
+  setMessages,
+  setTyping,
+  setOnlineCount,
+  channelRef
+}: ChannelRealtimeArgs) {
+  useEffect(() => {
+    if (!activeChannelId || !user) return;
+
+    const channel: RealtimeChannel = supabase.channel(`channel:${activeChannelId}`, {
+      config: {
+        private: true,
+        broadcast: { self: true },
+        presence: { key: user.id }
+      }
+    });
+
+    channelRef.current = channel;
+
+    channel
+      .on("broadcast", { event: "INSERT" }, ({ payload }) => {
+        if (payload.table === "reactions") {
+          fetchMessages(activeChannelId).then(setMessages);
+          return;
+        }
+        const record = payloadRecord(payload);
+        if (!record || record.channel_id !== activeChannelId || record.parent_id) return;
+        setMessages((current) => mergeIncomingMessage(current, record));
+      })
+      .on("broadcast", { event: "UPDATE" }, ({ payload }) => {
+        if (payload.table === "reactions") {
+          fetchMessages(activeChannelId).then(setMessages);
+          return;
+        }
+        const record = payloadRecord(payload);
+        if (!record || record.channel_id !== activeChannelId || record.parent_id) return;
+        if (record.deleted_at) {
+          setMessages((current) => removeMessage(current, record.id));
+          return;
+        }
+        setMessages((current) => mergeIncomingMessage(current, record));
+      })
+      .on("broadcast", { event: "DELETE" }, ({ payload }) => {
+        if (payload.table === "reactions") {
+          fetchMessages(activeChannelId).then(setMessages);
+          return;
+        }
+        const oldRecord = payloadOldRecord(payload);
+        if (!oldRecord || oldRecord.channel_id !== activeChannelId) return;
+        setMessages((current) => removeMessage(current, oldRecord.id));
+      })
+      .on("broadcast", { event: "typing" }, ({ payload }) => {
+        if (!payload || payload.user_id === user.id) return;
+        setTyping((current) => ({
+          ...current,
+          [payload.user_id]: { name: payload.name ?? "Someone", at: Date.now() }
+        }));
+      })
+      .on("presence", { event: "sync" }, () => {
+        setOnlineCount(Object.keys(channel.presenceState()).length || 1);
+      })
+      .subscribe(async (status) => {
+        if (status === "SUBSCRIBED") {
+          await channel.track({
+            user_id: user.id,
+            name: displayName ?? user.email,
+            online_at: new Date().toISOString()
+          });
+        }
+      });
+
+    const cleanupTyping = window.setInterval(() => {
+      const now = Date.now();
+      setTyping((current) => Object.fromEntries(Object.entries(current).filter(([, value]) => now - value.at < 3500)));
+    }, 1500);
+
+    return () => {
+      window.clearInterval(cleanupTyping);
+      channelRef.current = null;
+      supabase.removeChannel(channel);
+    };
+  }, [activeChannelId, fetchMessages, displayName, supabase, user, setMessages, setTyping, setOnlineCount, channelRef]);
+}
diff --git a/src/features/chat/use-notifications.ts b/src/features/chat/use-notifications.ts
new file mode 100644
index 0000000..76a85ed
--- /dev/null
+++ b/src/features/chat/use-notifications.ts
@@ -0,0 +1,62 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { SupabaseClient } from "@supabase/supabase-js";
+import type { Database } from "@/types/database";
+import type { AppNotification } from "@/types/chat";
+import { markAllNotificationsRead } from "@/features/chat/notifications";
+
+const NOTIFICATION_COLUMNS = "id,user_id,type,message_id,read_at,created_at,messages(body,channel_id)";
+
+export function useNotifications(
+  supabase: SupabaseClient<Database>,
+  userId: string | undefined,
+  onNotification?: () => void
+) {
+  const [notifications, setNotifications] = useState<AppNotification[]>([]);
+
+  const load = useCallback(async () => {
+    if (!userId) return;
+    const { data } = await supabase
+      .from("notifications")
+      .select(NOTIFICATION_COLUMNS)
+      .eq("user_id", userId)
+      .order("created_at", { ascending: false })
+      .limit(20);
+    if (data) setNotifications(data as unknown as AppNotification[]);
+  }, [supabase, userId]);
+
+  const markAllRead = useCallback(async () => {
+    if (!userId) return;
+    const now = new Date().toISOString();
+    setNotifications((list) => markAllNotificationsRead(list, now));
+    await supabase.from("notifications").update({ read_at: now }).eq("user_id", userId).is("read_at", null);
+  }, [supabase, userId]);
+
+  useEffect(() => {
+    let active = true;
+    void (async () => {
+      await load();
+      if (!active) return;
+    })();
+    return () => {
+      active = false;
+    };
+  }, [load]);
+
+  useEffect(() => {
+    if (!userId) return;
+    const channel = supabase.channel(`user:${userId}`, { config: { private: true } });
+    channel
+      .on("broadcast", { event: "INSERT" }, () => {
+        void load();
+        onNotification?.();
+      })
+      .subscribe();
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, [supabase, userId, load, onNotification]);
+
+  return { notifications, markAllRead };
+}
diff --git a/src/features/chat/use-now.ts b/src/features/chat/use-now.ts
new file mode 100644
index 0000000..73e4f8e
--- /dev/null
+++ b/src/features/chat/use-now.ts
@@ -0,0 +1,12 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function useNow(intervalMs = 60_000) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = window.setInterval(() => setNow(Date.now()), intervalMs);
+    return () => window.clearInterval(id);
+  }, [intervalMs]);
+  return now;
+}
diff --git a/src/features/chat/use-unread.ts b/src/features/chat/use-unread.ts
new file mode 100644
index 0000000..6ec7e59
--- /dev/null
+++ b/src/features/chat/use-unread.ts
@@ -0,0 +1,39 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { SupabaseClient } from "@supabase/supabase-js";
+import type { Database } from "@/types/database";
+
+export function useUnread(supabase: SupabaseClient<Database>, userId: string | undefined) {
+  const [unreadCounts, setUnreadCounts] = useState<Record<string, number>>({});
+
+  const refreshUnread = useCallback(async () => {
+    if (!userId) return;
+    const { data } = await supabase.rpc("channel_unread_counts");
+    if (!data) return;
+    setUnreadCounts(Object.fromEntries(data.map((row) => [row.channel_id, Number(row.unread)])));
+  }, [supabase, userId]);
+
+  const markChannelRead = useCallback(
+    async (channelId: string, readAt: string) => {
+      if (!userId) return;
+      setUnreadCounts((current) => ({ ...current, [channelId]: 0 }));
+      await supabase
+        .from("channel_members")
+        .update({ last_read_at: readAt })
+        .eq("channel_id", channelId)
+        .eq("user_id", userId);
+    },
+    [supabase, userId]
+  );
+
+  useEffect(() => {
+    function onFocus() {
+      void refreshUnread();
+    }
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [refreshUnread]);
+
+  return { unreadCounts, refreshUnread, markChannelRead };
+}
diff --git a/src/features/chat/workspace-sidebar.tsx b/src/features/chat/workspace-sidebar.tsx
new file mode 100644
index 0000000..3e42fb4
--- /dev/null
+++ b/src/features/chat/workspace-sidebar.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type { User } from "@supabase/supabase-js";
+import { Hash, LogOut, MessageSquare, Plus, Search, Users } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import type { Channel, Profile } from "@/types/chat";
+import { AdminSetupPanel, Avatar, ChannelButton, CurrentUserBadge, SectionTitle } from "@/features/chat/chat-parts";
+import { presenceDotClass, statusActive } from "@/features/chat/status";
+import { useNow } from "@/features/chat/use-now";
+
+export function WorkspaceSidebar({
+  profile,
+  user,
+  onSignOut,
+  onOpenSearch,
+  inviteEmail,
+  onInviteEmail,
+  onCreateInvite,
+  inviteLink,
+  inviteMessage,
+  publicChannels,
+  dms,
+  members,
+  activeChannelId,
+  unreadCounts,
+  onSelectChannel,
+  newChannelName,
+  onNewChannelName,
+  onCreateChannel,
+  onCreateDm,
+  footer
+}: {
+  profile: Profile | null;
+  user: User | null;
+  onSignOut: () => void;
+  onOpenSearch: () => void;
+  inviteEmail: string;
+  onInviteEmail: (value: string) => void;
+  onCreateInvite: () => void;
+  inviteLink: string | null;
+  inviteMessage: string | null;
+  publicChannels: Channel[];
+  dms: Channel[];
+  members: Profile[];
+  activeChannelId: string | null;
+  unreadCounts: Record<string, number>;
+  onSelectChannel: (channelId: string) => void;
+  newChannelName: string;
+  onNewChannelName: (value: string) => void;
+  onCreateChannel: () => void;
+  onCreateDm: (targetId: string) => void;
+  footer?: ReactNode;
+}) {
+  const now = useNow();
+  return (
+    <aside className="flex min-h-0 flex-col border-r border-[var(--line)] bg-[var(--surface)]">
+      <div className="flex h-11 items-center justify-between border-b border-[var(--line)] px-3">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="h-2 w-2 rounded-sm bg-[var(--accent)]" />
+          <span className="truncate text-sm font-medium tracking-tight">Flack</span>
+        </div>
+        <button
+          onClick={onSignOut}
+          className="grid h-7 w-7 place-items-center rounded-[5px] text-[var(--muted)] hover:bg-[var(--surface-2)] hover:text-[var(--text)]"
+          aria-label="Sign out"
+        >
+          <LogOut size={14} />
+        </button>
+      </div>
+
+      <div className="border-b border-[var(--line)] p-2">
+        <button
+          onClick={onOpenSearch}
+          className="flex h-8 w-full items-center justify-between rounded-[5px] border border-[var(--line)] bg-[var(--surface-0)] px-2 text-xs text-[var(--muted)] hover:border-[var(--line-strong)] hover:text-[var(--text)]"
+        >
+          <span className="flex items-center gap-2">
+            <Search size={13} /> Search
+          </span>
+          <span className="font-mono text-[10px] text-[var(--faint)]">⌘K</span>
+        </button>
+      </div>
+
+      <div className="thin-scrollbar min-h-0 flex-1 overflow-y-auto px-2 py-2">
+        <AdminSetupPanel
+          visible={profile?.role === "admin"}
+          inviteEmail={inviteEmail}
+          onInviteEmail={onInviteEmail}
+          onCreateInvite={onCreateInvite}
+          inviteLink={inviteLink}
+          inviteMessage={inviteMessage}
+        />
+
+        <SectionTitle icon={<Hash size={12} />} label="Channels" />
+        <div className="space-y-px">
+          {publicChannels.map((channel) => (
+            <ChannelButton
+              key={channel.id}
+              channel={channel}
+              active={channel.id === activeChannelId}
+              unread={unreadCounts[channel.id] ?? 0}
+              onClick={() => onSelectChannel(channel.id)}
+            />
+          ))}
+        </div>
+
+        <div className="mt-2 flex gap-1">
+          <Input
+            density="compact"
+            value={newChannelName}
+            onChange={(event) => onNewChannelName(event.target.value)}
+            placeholder="channel"
+          />
+          <Button size="icon" variant="ghost" onClick={onCreateChannel} aria-label="Create channel">
+            <Plus size={13} />
+          </Button>
+        </div>
+
+        <SectionTitle className="mt-4" icon={<MessageSquare size={12} />} label="DMs" />
+        <div className="space-y-px">
+          {dms.map((channel) => (
+            <ChannelButton
+              key={channel.id}
+              channel={channel}
+              active={channel.id === activeChannelId}
+              unread={unreadCounts[channel.id] ?? 0}
+              onClick={() => onSelectChannel(channel.id)}
+            />
+          ))}
+        </div>
+
+        <SectionTitle className="mt-4" icon={<Users size={12} />} label="People" />
+        <div className="space-y-px">
+          {members
+            .filter((member) => member.id !== user?.id)
+            .slice(0, 10)
+            .map((member) => (
+              <button
+                key={member.id}
+                onClick={() => onCreateDm(member.id)}
+                className="flex h-7 w-full items-center gap-2 rounded-[5px] px-1.5 text-left text-xs text-[var(--muted)] hover:bg-[var(--surface-2)] hover:text-[var(--text)]"
+              >
+                <span className="relative">
+                  <Avatar name={member.display_name ?? member.email ?? "Member"} size="sm" />
+                  <span
+                    className={`absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full border border-[var(--surface)] ${presenceDotClass(member.presence)}`}
+                  />
+                </span>
+                <span className="truncate">{member.display_name ?? member.email}</span>
+                {statusActive(member, now) && member.status_emoji ? (
+                  <span className="ml-auto text-xs">{member.status_emoji}</span>
+                ) : null}
+              </button>
+            ))}
+        </div>
+      </div>
+
+      {footer ?? <CurrentUserBadge profile={profile} user={user} />}
+    </aside>
+  );
+}
diff --git a/src/types/chat.ts b/src/types/chat.ts
index 2804431..45b6f72 100644
--- a/src/types/chat.ts
+++ b/src/types/chat.ts
@@ -1,5 +1,7 @@
 export type ChannelType = "public" | "private" | "dm";
 
+export type PresenceState = "active" | "away" | "dnd";
+
 export type Profile = {
   id: string;
   org_id: string;
@@ -7,6 +9,10 @@ export type Profile = {
   display_name: string | null;
   avatar_url: string | null;
   status: string | null;
+  status_emoji: string | null;
+  status_text: string | null;
+  status_expires_at: string | null;
+  presence: PresenceState;
   role: "admin" | "member";
   last_seen_at: string | null;
 };
@@ -53,6 +59,18 @@ export type ChatMessage = {
   attachments?: Attachment[];
 };
 
+export type NotificationType = "mention" | "thread" | "dm" | "reaction";
+
+export type AppNotification = {
+  id: string;
+  user_id: string;
+  type: NotificationType;
+  message_id: string | null;
+  read_at: string | null;
+  created_at: string;
+  messages?: { body: string; channel_id: string } | null;
+};
+
 export type SearchHit = {
   id: string;
   channel_id: string;
diff --git a/src/types/database.ts b/src/types/database.ts
index a6f490f..cdeec36 100644
--- a/src/types/database.ts
+++ b/src/types/database.ts
@@ -22,6 +22,10 @@ export type Database = {
         display_name: string | null;
         avatar_url: string | null;
         status: string | null;
+        status_emoji: string | null;
+        status_text: string | null;
+        status_expires_at: string | null;
+        presence: "active" | "away" | "dnd";
         role: "admin" | "member";
         last_seen_at: string | null;
         created_at: string;
@@ -93,6 +97,14 @@ export type Database = {
         revoked_at: string | null;
         created_at: string;
       }>;
+      link_previews: Table<{
+        url: string;
+        title: string | null;
+        description: string | null;
+        image_url: string | null;
+        site_name: string | null;
+        fetched_at: string;
+      }>;
     };
     Views: Record<string, never>;
     Functions: {
@@ -100,6 +112,10 @@ export type Database = {
         Args: { invite_token: string };
         Returns: string;
       };
+      channel_unread_counts: {
+        Args: Record<string, never>;
+        Returns: Array<{ channel_id: string; unread: number }>;
+      };
       create_invite: {
         Args: { invite_email: string; invite_role?: "admin" | "member" };
         Returns: Array<{ id: string; token: string; expires_at: string }>;
diff --git a/supabase/migrations/003_tier0_parity.sql b/supabase/migrations/003_tier0_parity.sql
new file mode 100644
index 0000000..ede1c13
--- /dev/null
+++ b/supabase/migrations/003_tier0_parity.sql
@@ -0,0 +1,152 @@
+-- Tier 0 Slack-parity: presence/status, unread counts, notification wiring, link previews.
+
+-- Presence + custom status on profiles
+create type public.presence_state as enum ('active', 'away', 'dnd');
+
+alter table public.profiles
+  add column if not exists status_emoji text,
+  add column if not exists status_text text,
+  add column if not exists status_expires_at timestamptz,
+  add column if not exists presence public.presence_state not null default 'active';
+
+-- Per-channel unread counts for the current user
+create or replace function public.channel_unread_counts()
+returns table (channel_id uuid, unread integer)
+language sql
+stable
+security definer
+set search_path = public
+as $$
+  select cm.channel_id, count(m.id)::int as unread
+  from public.channel_members cm
+  left join public.messages m
+    on m.channel_id = cm.channel_id
+    and m.parent_id is null
+    and m.deleted_at is null
+    and m.author_id <> cm.user_id
+    and (cm.last_read_at is null or m.created_at > cm.last_read_at)
+  where cm.user_id = auth.uid()
+  group by cm.channel_id
+$$;
+
+-- Thread reply notifications: notify the parent author
+create or replace function public.create_thread_notifications()
+returns trigger
+language plpgsql
+security definer
+set search_path = public
+as $$
+declare
+  parent_author uuid;
+begin
+  if new.parent_id is not null then
+    select author_id into parent_author from public.messages where id = new.parent_id;
+    if parent_author is not null and parent_author <> new.author_id then
+      insert into public.notifications (user_id, type, message_id)
+      values (parent_author, 'thread', new.id);
+    end if;
+  end if;
+  return new;
+end;
+$$;
+
+create trigger messages_thread_notify
+after insert on public.messages
+for each row execute function public.create_thread_notifications();
+
+-- DM notifications: notify the other member(s) of a dm channel
+create or replace function public.create_dm_notifications()
+returns trigger
+language plpgsql
+security definer
+set search_path = public
+as $$
+begin
+  insert into public.notifications (user_id, type, message_id)
+  select cm.user_id, 'dm', new.id
+  from public.channel_members cm
+  join public.channels c on c.id = cm.channel_id
+  where cm.channel_id = new.channel_id
+    and c.type = 'dm'
+    and cm.user_id <> new.author_id;
+  return new;
+end;
+$$;
+
+create trigger messages_dm_notify
+after insert on public.messages
+for each row execute function public.create_dm_notifications();
+
+-- Reaction notifications: notify the message author
+create or replace function public.create_reaction_notifications()
+returns trigger
+language plpgsql
+security definer
+set search_path = public
+as $$
+declare
+  msg_author uuid;
+begin
+  select author_id into msg_author from public.messages where id = new.message_id;
+  if msg_author is not null and msg_author <> new.user_id then
+    insert into public.notifications (user_id, type, message_id)
+    values (msg_author, 'reaction', new.message_id);
+  end if;
+  return new;
+end;
+$$;
+
+create trigger reactions_notify
+after insert on public.reactions
+for each row execute function public.create_reaction_notifications();
+
+-- Broadcast new notifications to the recipient's private realtime topic
+create or replace function public.broadcast_notification()
+returns trigger
+language plpgsql
+security definer
+set search_path = public, realtime
+as $$
+begin
+  perform realtime.broadcast_changes(
+    'user:' || new.user_id::text,
+    TG_OP, TG_OP, TG_TABLE_NAME, TG_TABLE_SCHEMA, new, null
+  );
+  return new;
+end;
+$$;
+
+create trigger notifications_broadcast
+after insert on public.notifications
+for each row execute function public.broadcast_notification();
+
+-- Allow a user to subscribe to their own private realtime topic
+create policy "user realtime is self gated"
+on realtime.messages
+for select
+to authenticated
+using (
+  split_part(realtime.topic(), ':', 1) = 'user'
+  and split_part(realtime.topic(), ':', 2) = auth.uid()::text
+);
+
+-- Cached link previews (unfurling)
+create table if not exists public.link_previews (
+  url text primary key,
+  title text,
+  description text,
+  image_url text,
+  site_name text,
+  fetched_at timestamptz not null default now()
+);
+
+alter table public.link_previews enable row level security;
+
+create policy "authenticated read link previews" on public.link_previews
+for select to authenticated using (true);
+
+create policy "authenticated insert link previews" on public.link_previews
+for insert to authenticated with check (true);
+
+create policy "authenticated update link previews" on public.link_previews
+for update to authenticated using (true) with check (true);
diff --git a/vitest.config.ts b/vitest.config.ts
index bceb802..1f53f07 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -18,7 +18,15 @@ export default defineConfig({
       reportsDirectory: "./coverage",
       // Enforce coverage on the pure logic layer. UI components are exercised
       // by the Playwright e2e suite instead of unit coverage.
-      include: ["src/lib/utils.ts", "src/features/messages/optimistic.ts"],
+      include: [
+        "src/lib/utils.ts",
+        "src/features/messages/optimistic.ts",
+        "src/features/chat/emoji-recents.ts",
+        "src/features/chat/unread.ts",
+        "src/features/chat/notifications.ts",
+        "src/features/chat/status.ts",
+        "src/features/chat/unfurl.ts"
+      ],
       thresholds: {
         statements: 100,
         branches: 90,