fix: correct webhook translation

The MCP add_card_comment and update_card_comment tools send `{ content }`
to Kan API, but the API expects `{ comment }`. This causes a 400 Bad Request
("comment: Required") when trying to add or update card comments.

Fixed by mapping `{ comment: content }` in both tool handlers.

Co-authored-by: Craft Agent <agents-noreply@craft.do>

.dockerignore

@@ -60,3 +60,7 @@ pnpm-debug.log
 
 # Cloud compose (separate deployment)
 cloud/
+
+# Local temporary caches
+.pnpm-store
+v8-compile-cache-0

.env.example

@@ -23,8 +23,8 @@ SMTP_REJECT_UNAUTHORIZED= # set to "false" to accept invalid certs
 NEXT_PUBLIC_DISABLE_EMAIL=
 
 # S3 storage (optional)
-S3_REGION=
-S3_ENDPOINT=
+S3_REGION= # required for AWS S3 (e.g. us-east-1); ignored by most S3-compatible providers — defaults to us-east-1 if unset
+S3_ENDPOINT= # set for S3-compatible providers (MinIO, R2, Spaces, etc.); leave blank for AWS S3
 S3_ACCESS_KEY_ID=
 S3_SECRET_ACCESS_KEY=
 S3_FORCE_PATH_STYLE=

.github/ISSUE_TEMPLATE/feature_request.md

@@ -7,6 +7,9 @@ assignees: ''
 
 ---
 
+> [!IMPORTANT]
+> Wait for a maintainer to approve this issue before opening a PR. We'll signal approval with a comment or label. Feature PRs without an approved issue will be closed.
+
 ## ✨ Feature Request
 
 **Is your feature request related to a problem? Please describe.**

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,24 @@
+## Description
+
+<!-- What does this PR do? Why? -->
+
+## Type of change
+
+- [ ] Bug fix
+- [ ] Feature (requires an approved issue — see below)
+- [ ] Refactor / chore
+- [ ] Documentation
+
+## Checklist
+
+- [ ] I have linked the related issue below
+- [ ] My code follows the existing style and conventions
+- [ ] I have tested my changes locally
+- [ ] I have included screenshots for any UI changes
+
+## Linked issue
+
+Closes #<!-- issue number -->
+
+> **Feature PRs without a linked, approved issue will be closed without review.**
+> Open or comment on a [feature request](https://github.com/kanbn/kan/issues/new?template=feature_request.md) first and wait for maintainer approval before building.

.gitignore

@@ -4,6 +4,9 @@
 node_modules
 .pnp
 .pnp.js
+.pnpm/
+.pnpm-store/
+v8-compile-cache-0/
 
 # testing
 coverage
@@ -54,3 +57,8 @@ i18n.cache
 
 # pgdata
 /apps/web/pgdata
+
+# local scripts
+scripts/
+
+.claude

CONTRIBUTING.md

@@ -1,52 +1,54 @@
 # Contributing to Kan
 
-Thank you for your interest in contributing to Kan! This document provides guidelines and instructions for contributing to the project.
+Thank you for your interest in contributing to Kan!
 
-## Getting Started
+## Before you start
+
+**Open an issue before writing code for a new feature.**
+
+Feature PRs opened without a prior approved issue will be closed without review - not because the idea is bad, but because we can't review code for features we haven't aligned on yet. This protects your time as much as ours.
+
+The process is:
+
+1. Open a [feature request](https://github.com/kanbn/kan/issues/new?template=feature_request.md) and describe what you want to build
+2. Wait for a maintainer to respond and signal approval (we aim to respond within a few days)
+3. Once approved, open a PR that links the issue
+
+Bug fixes and documentation improvements don't need prior approval - just open a PR.
+
+---
+
+## Getting started
 
 1. Fork the repository
 2. Clone your fork: `git clone https://github.com/YOUR-USERNAME/kan.git`
-3. Create a new branch: `git checkout -b feat/your-feature-name`
+3. Create a branch: `git checkout -b feat/your-feature-name` or `fix/your-fix-name`
 4. Install dependencies: `pnpm install`
 5. Copy `.env.example` to `.env` and configure your environment variables
 6. Make your changes
-7. Commit your changes: `git commit -m "feat: description of changes"`
-8. Push to your fork: `git push origin feat/your-feature-name`
-9. Open a Pull Request
+7. Commit using [conventional commits](https://www.conventionalcommits.org/): `git commit -m "feat: description"`
+8. Push and open a Pull Request
 
-## Development Guidelines
+## Pull request expectations
 
-### Code Style
+- Link the related issue (required for features)
+- Write a clear description of what changed and why
+- Include screenshots for any UI changes
+- Keep PRs focused - one feature or fix per PR
+- All CI checks must pass before review
 
-- Follow the existing code style
-- Use meaningful variable and function names
-- Add comments for complex logic
+## Code style
+
+- Follow the existing patterns in the codebase
+- Use meaningful names - avoid comments that just restate what the code does
 - Keep functions focused and concise
 
-### Commits
+## Need help?
 
-- Use clear and descriptive commit messages
-- Reference issue numbers when applicable
-- Keep commits focused on single changes
-
-### Pull Requests
-
-- Provide a clear description of the changes
-- Include screenshots for UI changes
-- Keep PRs focused on a single feature/fix
-
-## Need Help?
-
-- Join our [Discord server](https://discord.gg/e6ejRb6CmT) for questions
-- Check existing issues and pull requests
+- Join our [Discord server](https://discord.gg/e6ejRb6CmT)
+- Check existing issues and PRs before opening new ones
 - Email [henry@kan.bn](mailto:henry@kan.bn) for major concerns
 
-## Code of Conduct
-
-Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
-
-We aim to foster an inclusive and welcoming community. Harassment and abusive behavior will not be tolerated.
-
 ## License
 
 By contributing to Kan, you agree that your contributions will be licensed under the AGPLv3 License.

README.md

@@ -170,53 +170,180 @@ pnpm dev
 
 ## Environment Variables 🔐
 
-| Variable                                  | Description                                               | Required                              | Example                                                     |
-| ----------------------------------------- | --------------------------------------------------------- | ------------------------------------- | ----------------------------------------------------------- |
-| `POSTGRES_URL`                            | PostgreSQL connection URL                                 | To use external database              | `postgres://user:pass@localhost:5432/db`                    |
-| `REDIS_URL`                               | Redis connection URL                                      | For rate limiting (optional)          | `redis://localhost:6379` or `redis://redis:6379` (Docker)   |
-| `EMAIL_FROM`                              | Sender email address                                      | For Email                             | `"Kan <hello@mail.kan.bn>"`                                 |
-| `SMTP_HOST`                               | SMTP server hostname                                      | For Email                             | `smtp.resend.com`                                           |
-| `SMTP_PORT`                               | SMTP server port                                          | For Email                             | `465`                                                       |
-| `SMTP_USER`                               | SMTP username/email                                       | No                                    | `resend`                                                    |
-| `SMTP_PASSWORD`                           | SMTP password/token                                       | No                                    | `re_xxxx`                                                   |
-| `SMTP_SECURE`                             | Use secure SMTP connection (defaults to true if not set)  | For Email                             | `true`                                                      |
-| `SMTP_REJECT_UNAUTHORIZED`                | Reject invalid certificates (defaults to true if not set) | For Email                             | `false`                                                     |
-| `NEXT_PUBLIC_DISABLE_EMAIL`               | To disable all email features                             | For Email                             | `true`                                                      |
-| `NEXT_PUBLIC_BASE_URL`                    | Base URL of your installation                             | Yes                                   | `http://localhost:3000`                                     |
-| `NEXT_API_BODY_SIZE_LIMIT`                | Maximum API request body size (defaults to 1mb)           | No                                    | `50mb`                                                      |
-| `BETTER_AUTH_ALLOWED_DOMAINS`             | Comma-separated list of allowed domains for OIDC logins   | For OIDC/Social login                 | `example.com,subsidiary.com`                                |
-| `BETTER_AUTH_SECRET`                      | Auth encryption secret                                    | Yes                                   | Random 32+ char string                                      |
-| `BETTER_AUTH_TRUSTED_ORIGINS`             | Allowed callback origins                                  | No                                    | `http://localhost:3000,http://localhost:3001`               |
-| `GOOGLE_CLIENT_ID`                        | Google OAuth client ID                                    | For Google login                      | `xxx.apps.googleusercontent.com`                            |
-| `GOOGLE_CLIENT_SECRET`                    | Google OAuth client secret                                | For Google login                      | `xxx`                                                       |
-| `DISCORD_CLIENT_ID`                       | Discord OAuth client ID                                   | For Discord login                     | `xxx`                                                       |
-| `DISCORD_CLIENT_SECRET`                   | Discord OAuth client secret                               | For Discord login                     | `xxx`                                                       |
-| `GITHUB_CLIENT_ID`                        | GitHub OAuth client ID                                    | For GitHub login                      | `xxx`                                                       |
-| `GITHUB_CLIENT_SECRET`                    | GitHub OAuth client secret                                | For GitHub login                      | `xxx`                                                       |
-| `OIDC_CLIENT_ID`                          | Generic OIDC client ID                                    | For OIDC login                        | `xxx`                                                       |
-| `OIDC_CLIENT_SECRET`                      | Generic OIDC client secret                                | For OIDC login                        | `xxx`                                                       |
-| `OIDC_DISCOVERY_URL`                      | OIDC discovery URL                                        | For OIDC login                        | `https://auth.example.com/.well-known/openid-configuration` |
-| `TRELLO_APP_API_KEY`                      | Trello app API key                                        | For Trello import                     | `xxx`                                                       |
-| `TRELLO_APP_API_SECRET`                   | Trello app API secret                                     | For Trello import                     | `xxx`                                                       |
-| `S3_REGION`                               | S3 storage region                                         | For file uploads                      | `WEUR`                                                      |
-| `S3_ENDPOINT`                             | S3 endpoint URL                                           | For file uploads                      | `https://xxx.r2.cloudflarestorage.com`                      |
-| `S3_ACCESS_KEY_ID`                        | S3 access key                                             | For file uploads (optional with IRSA) | `xxx`                                                       |
-| `S3_SECRET_ACCESS_KEY`                    | S3 secret key                                             | For file uploads (optional with IRSA) | `xxx`                                                       |
-| `S3_FORCE_PATH_STYLE`                     | Use path-style URLs for S3                                | For file uploads                      | `true`                                                      |
-| `S3_AVATAR_UPLOAD_LIMIT`                  | Maximum avatar file size in bytes                         | For file uploads                      | `2097152` (2MB)                                             |
-| `NEXT_PUBLIC_STORAGE_URL`                 | Storage service URL                                       | For file uploads                      | `https://storage.kanbn.com`                                 |
-| `NEXT_PUBLIC_STORAGE_DOMAIN`              | Storage domain name                                       | For file uploads                      | `kanbn.com`                                                 |
-| `NEXT_PUBLIC_USE_VIRTUAL_HOSTED_URLS`     | Use virtual-hosted style URLs (bucket.domain.com)         | For file uploads (optional)           | `true`                                                      |
-| `NEXT_PUBLIC_AVATAR_BUCKET_NAME`          | S3 bucket name for avatars                                | For file uploads                      | `avatars`                                                   |
-| `NEXT_PUBLIC_ATTACHMENTS_BUCKET_NAME`     | S3 bucket name for attachments                            | For file uploads                      | `attachments`                                               |
-| `NEXT_PUBLIC_ALLOW_CREDENTIALS`           | Allow email & password login                              | For authentication                    | `true`                                                      |
-| `NEXT_PUBLIC_DISABLE_SIGN_UP`             | Disable sign up                                           | For authentication                    | `false`                                                     |
-| `NEXT_PUBLIC_WHITE_LABEL_HIDE_POWERED_BY` | Hide “Powered by kan.bn” on public boards (self-host)     | For white labelling                   | `true`                                                      |
-| `KAN_ADMIN_API_KEY`                       | Admin API key for stats and admin endpoints               | For admin/monitoring                  | `your-secret-admin-key`                                     |
-| `LOG_LEVEL`                               | Log verbosity level (debug, info, warn, error)            | No (defaults to debug in dev, info in prod) | `info`                                                 |
+| Variable                                  | Description                                               | Required                                    | Example                                                     |
+| ----------------------------------------- | --------------------------------------------------------- | ------------------------------------------- | ----------------------------------------------------------- |
+| `POSTGRES_URL`                            | PostgreSQL connection URL                                 | To use external database                    | `postgres://user:pass@localhost:5432/db`                    |
+| `REDIS_URL`                               | Redis connection URL                                      | For rate limiting (optional)                | `redis://localhost:6379` or `redis://redis:6379` (Docker)   |
+| `EMAIL_FROM`                              | Sender email address                                      | For Email                                   | `"Kan <hello@mail.kan.bn>"`                                 |
+| `SMTP_HOST`                               | SMTP server hostname                                      | For Email                                   | `smtp.resend.com`                                           |
+| `SMTP_PORT`                               | SMTP server port                                          | For Email                                   | `465`                                                       |
+| `SMTP_USER`                               | SMTP username/email                                       | No                                          | `resend`                                                    |
+| `SMTP_PASSWORD`                           | SMTP password/token                                       | No                                          | `re_xxxx`                                                   |
+| `SMTP_SECURE`                             | Use secure SMTP connection (defaults to true if not set)  | For Email                                   | `true`                                                      |
+| `SMTP_REJECT_UNAUTHORIZED`                | Reject invalid certificates (defaults to true if not set) | For Email                                   | `false`                                                     |
+| `NEXT_PUBLIC_DISABLE_EMAIL`               | To disable all email features                             | For Email                                   | `true`                                                      |
+| `NEXT_PUBLIC_BASE_URL`                    | Base URL of your installation                             | Yes                                         | `http://localhost:3000`                                     |
+| `NEXT_API_BODY_SIZE_LIMIT`                | Maximum API request body size (defaults to 1mb)           | No                                          | `50mb`                                                      |
+| `BETTER_AUTH_ALLOWED_DOMAINS`             | Comma-separated list of allowed domains for OIDC logins   | For OIDC/Social login                       | `example.com,subsidiary.com`                                |
+| `BETTER_AUTH_SECRET`                      | Auth encryption secret                                    | Yes                                         | Random 32+ char string                                      |
+| `BETTER_AUTH_TRUSTED_ORIGINS`             | Allowed callback origins                                  | No                                          | `http://localhost:3000,http://localhost:3001`               |
+| `GOOGLE_CLIENT_ID`                        | Google OAuth client ID                                    | For Google login                            | `xxx.apps.googleusercontent.com`                            |
+| `GOOGLE_CLIENT_SECRET`                    | Google OAuth client secret                                | For Google login                            | `xxx`                                                       |
+| `DISCORD_CLIENT_ID`                       | Discord OAuth client ID                                   | For Discord login                           | `xxx`                                                       |
+| `DISCORD_CLIENT_SECRET`                   | Discord OAuth client secret                               | For Discord login                           | `xxx`                                                       |
+| `GITHUB_CLIENT_ID`                        | GitHub OAuth client ID                                    | For GitHub login                            | `xxx`                                                       |
+| `GITHUB_CLIENT_SECRET`                    | GitHub OAuth client secret                                | For GitHub login                            | `xxx`                                                       |
+| `OIDC_CLIENT_ID`                          | Generic OIDC client ID                                    | For OIDC login                              | `xxx`                                                       |
+| `OIDC_CLIENT_SECRET`                      | Generic OIDC client secret                                | For OIDC login                              | `xxx`                                                       |
+| `OIDC_DISCOVERY_URL`                      | OIDC discovery URL                                        | For OIDC login                              | `https://auth.example.com/.well-known/openid-configuration` |
+| `TRELLO_APP_API_KEY`                      | Trello app API key                                        | For Trello import                           | `xxx`                                                       |
+| `TRELLO_APP_API_SECRET`                   | Trello app API secret                                     | For Trello import                           | `xxx`                                                       |
+| `S3_REGION`                               | S3 storage region                                         | For file uploads                            | `WEUR`                                                      |
+| `S3_ENDPOINT`                             | S3 endpoint URL                                           | For file uploads                            | `https://xxx.r2.cloudflarestorage.com`                      |
+| `S3_ACCESS_KEY_ID`                        | S3 access key                                             | For file uploads (optional with IRSA)       | `xxx`                                                       |
+| `S3_SECRET_ACCESS_KEY`                    | S3 secret key                                             | For file uploads (optional with IRSA)       | `xxx`                                                       |
+| `S3_FORCE_PATH_STYLE`                     | Use path-style URLs for S3                                | For file uploads                            | `true`                                                      |
+| `S3_AVATAR_UPLOAD_LIMIT`                  | Maximum avatar file size in bytes                         | For file uploads                            | `2097152` (2MB)                                             |
+| `NEXT_PUBLIC_STORAGE_URL`                 | Storage service URL                                       | For file uploads                            | `https://storage.kanbn.com`                                 |
+| `NEXT_PUBLIC_STORAGE_DOMAIN`              | Storage domain name                                       | For file uploads                            | `kanbn.com`                                                 |
+| `NEXT_PUBLIC_USE_VIRTUAL_HOSTED_URLS`     | Use virtual-hosted style URLs (bucket.domain.com)         | For file uploads (optional)                 | `true`                                                      |
+| `NEXT_PUBLIC_AVATAR_BUCKET_NAME`          | S3 bucket name for avatars                                | For file uploads                            | `avatars`                                                   |
+| `NEXT_PUBLIC_ATTACHMENTS_BUCKET_NAME`     | S3 bucket name for attachments                            | For file uploads                            | `attachments`                                               |
+| `NEXT_PUBLIC_ALLOW_CREDENTIALS`           | Allow email & password login                              | For authentication                          | `true`                                                      |
+| `NEXT_PUBLIC_DISABLE_SIGN_UP`             | Disable sign up                                           | For authentication                          | `false`                                                     |
+| `NEXT_PUBLIC_WHITE_LABEL_HIDE_POWERED_BY` | Hide “Powered by kan.bn” on public boards (self-host)     | For white labelling                         | `true`                                                      |
+| `KAN_ADMIN_API_KEY`                       | Admin API key for stats and admin endpoints               | For admin/monitoring                        | `your-secret-admin-key`                                     |
+| `LOG_LEVEL`                               | Log verbosity level (debug, info, warn, error)            | No (defaults to debug in dev, info in prod) | `info`                                                      |
 
 See `.env.example` for a complete list of supported environment variables.
 
+## MCP Server (AI Control) 🤖
+
+Kan ships with a [Model Context Protocol](https://modelcontextprotocol.io) (MCP) server that lets any MCP-compatible AI client — GitHub Copilot, Claude Desktop, Cursor, Codex, and others — read and control your Kan instance using natural language.
+
+### Prerequisites
+
+- Node.js 18+
+- A running Kan instance (self-hosted or cloud)
+- A Kan API key (Settings → API Keys → Create key)
+
+### Installation
+
+You do **not** need to clone this repository. The recommended way is to use `npx`, which runs the server on-demand and always uses the latest version — no global install required:
+
+```bash
+npx -y @kan/mcp
+```
+
+Alternatively, install it globally:
+
+```bash
+npm install -g @kan/mcp
+kan-mcp
+```
+
+### Configuration
+
+The server is configured via two environment variables:
+
+| Variable        | Description                         | Example                        |
+| --------------- | ----------------------------------- | ------------------------------ |
+| `KAN_BASE_URL`  | Base URL of your Kan instance       | `https://your-kan.example.com` |
+| `KAN_API_TOKEN` | API key from your Kan user settings | `kan_xxxxxxxxxxxx`             |
+
+#### GitHub Copilot (VS Code)
+
+Add the following to your VS Code `mcp.json` (open it via **MCP: Open User MCP Configuration** from the Command Palette):
+
+```json
+{
+  "servers": {
+    "kan": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@kan/mcp"],
+      "env": {
+        "KAN_BASE_URL": "https://your-kan-instance.com",
+        "KAN_API_TOKEN": "kan_your_api_key_here"
+      }
+    }
+  }
+}
+```
+
+Then use Copilot in **Agent mode** to interact with Kan.
+
+#### Claude Desktop
+
+Add to `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) or `%APPDATA%\Claude\claude_desktop_config.json` (Windows):
+
+```json
+{
+  "mcpServers": {
+    "kan": {
+      "command": "npx",
+      "args": ["-y", "@kan/mcp"],
+      "env": {
+        "KAN_BASE_URL": "https://your-kan-instance.com",
+        "KAN_API_TOKEN": "kan_your_api_key_here"
+      }
+    }
+  }
+}
+```
+
+#### Cursor / Codex / other clients
+
+Use the same `command` + `args` + `env` pattern above — all MCP stdio clients follow the same format.
+
+### Example prompts
+
+Once connected, you can ask your AI assistant things like:
+
+**Browsing**
+
+- _"List all my workspaces"_
+- _"Show me all boards in the Marketing workspace"_
+- _"What cards are in the Backlog list of the Q3 Planning board?"_
+- _"Get the full details of card X including comments and checklists"_
+
+**Managing cards**
+
+- _"Create a card called 'Fix login bug' in the To Do list of the Dev board"_
+- _"Move the 'API redesign' card to the In Progress list"_
+- _"Set a due date of next Friday on the 'Write docs' card"_
+- _"Add a comment to the 'Deploy to prod' card saying the deployment is blocked"_
+- _"Duplicate the 'Sprint template' card into the new Sprint 4 list"_
+- _"Mark the 'Setup CI' checklist item as complete"_
+
+**Organisation**
+
+- _"Add the 'urgent' label to all cards assigned to me in the Backend board"_
+- _"Create a 'Release checklist' checklist on the v2.0 card with items: smoke test, update changelog, tag release"_
+- _"What tasks are assigned to @alice in the Mechanics Rework board?"_
+
+**Workspace management**
+
+- _"Create a new workspace called 'Client Projects'"_
+- _"Invite bob@example.com to the Marketing workspace as a member"_
+- _"Create a new board called 'Sprint 5' in the Dev workspace with lists: Backlog, In Progress, Done"_
+- _"Search for anything related to 'authentication' across the Dev workspace"_
+
+### Available tools
+
+The MCP server exposes 46 tools across 7 resource types:
+
+| Resource          | Tools                                                               |
+| ----------------- | ------------------------------------------------------------------- |
+| Workspaces        | list, find by name, get, create, update, delete, search, check slug |
+| Boards            | list, find by name, get, get by slug, create, update, delete        |
+| Lists             | create, update, delete                                              |
+| Cards             | create, get, update, delete, duplicate, get activities              |
+| Card interactions | add/update/delete comment, toggle label, toggle member              |
+| Checklists        | create, update, delete, create item, update item, delete item       |
+| Labels            | get, create, update, delete                                         |
+| Members           | invite, remove, update role, manage invite links                    |
+
 ## Contributing 🤝
 
 We welcome contributions! Please read our [contribution guidelines](CONTRIBUTING.md) before submitting a pull request.
@@ -227,6 +354,12 @@ We welcome contributions! Please read our [contribution guidelines](CONTRIBUTING
   <img src="https://contrib.rocks/image?repo=kanbn/kan" />
 </a>
 
+## Sponsors ❤️
+
+[<img height="100" alt="image" src="https://github.com/user-attachments/assets/e331c71f-ac86-46a6-bceb-ce276de094b0" />](https://www.testmuai.com)
+
+Proudly sponsored by [TestMu AI (formerly LambdaTest)](https://www.testmuai.com) - an AI-native testing cloud platform built for modern engineering teams. Covering everything from autonomous test creation and fast execution to testing AI agents like chatbots and voice assistants. If you're serious about testing, go check them out.
+
 ## License 📝
 
 Kan is licensed under the [AGPLv3 license](LICENSE).

apps/docs/api-reference/introduction.mdx

@@ -11,10 +11,10 @@ https://kan.bn/api/v1
 
 ## Authentication
 
-Most endpoints require authentication using your API key. You can create one in the [settings page](https://kan.bn/settings) of your account. Include this key in the `x-api-key` header of each request.
+Most endpoints require authentication using your API key. You can create one in the [settings page](https://kan.bn/settings) of your account. Include this key as a Bearer token in the `Authorization` header of each request.
 
 ```
-'x-api-key': kan_123456789
+'Authorization': 'Bearer kan_123456789'
 ```
 
 ## Response codes

apps/web/Dockerfile

@@ -11,6 +11,7 @@ RUN apk update && \
     apk add --no-cache libc6-compat && \
     rm -rf /var/cache/apk/* /tmp/* || true && \
     corepack enable && \
+    corepack prepare pnpm@9.14.2 --activate && \
     npm install turbo@2.3.1 --global && \
     pnpm config set store-dir ~/.pnpm-store
 
@@ -109,13 +110,15 @@ ENV PORT=3000
 ENV HOSTNAME=0.0.0.0
 
 # Copy the standalone Next.js server
-COPY --from=builder /app/apps/web/.next/standalone/ ./
+COPY --chown=1000:1000 --from=builder /app/apps/web/.next/standalone/ ./
 # Copy static assets and public files
-COPY --from=builder /app/apps/web/.next/static/ ./apps/web/.next/static/
-COPY --from=builder /app/apps/web/public/ ./apps/web/public/
+COPY --chown=1000:1000 --from=builder /app/apps/web/.next/static/ ./apps/web/.next/static/
+COPY --chown=1000:1000 --from=builder /app/apps/web/public/ ./apps/web/public/
 
 # Copy bootstrap script for runtime env var injection
-COPY apps/web/bootstrap.cjs ./bootstrap.cjs
+COPY --chown=1000:1000 apps/web/bootstrap.cjs ./bootstrap.cjs
+
+USER 1000:1000
 
 EXPOSE 3000
 CMD ["bootstrap.cjs"]

apps/web/i18n.json

@@ -2,7 +2,7 @@
   "version": "1.10",
   "locale": {
     "source": "en",
-    "targets": ["fr", "de", "es", "it", "nl", "ru", "pl", "pt-BR"]
+    "targets": ["fr", "de", "es", "it", "nl", "ru", "pl", "pt-BR", "zh-CN"]
   },
   "buckets": {
     "json": {

apps/web/lingui.config.ts

@@ -3,7 +3,7 @@ import { formatter } from "@lingui/format-json";
 
 
 export default defineConfig({
-  locales: ["en", "fr", "de", "es", "it", "nl", "ru", "pl", "pt-BR"],
+  locales: ["en", "fr", "de", "es", "it", "nl", "ru", "pl", "pt-BR", "zh-CN"],
   sourceLocale: "en",
   catalogs: [
     {

apps/web/next.config.js

@@ -28,6 +28,7 @@ const config = {
     ],
   },
 
+
   /** Enables hot reloading for local packages without a build step */
   transpilePackages: [
     "@kan/api",
@@ -65,6 +66,8 @@ const config = {
       },
     },
   },
+  serverExternalPackages: ["pino"],
+
   experimental: {
     // instrumentationHook: true,
     swcPlugins: [["@lingui/swc-plugin", {}]],

apps/web/package.json

@@ -27,13 +27,13 @@
     "@kan/api": "workspace:*",
     "@kan/auth": "workspace:*",
     "@kan/db": "workspace:^",
+    "@kan/email": "workspace:^",
     "@kan/logger": "workspace:^",
     "@kan/shared": "workspace:^",
     "@lingui/babel-preset-react": "^2.9.2",
     "@lingui/conf": "^5.3.2",
     "@lingui/macro": "^5.3.2",
     "@lingui/react": "^5.3.2",
-    "@novu/api": "^3.11.0",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-query": "catalog:",

apps/web/src/components/AuthForm.tsx

@@ -46,6 +46,7 @@ interface FormValues {
 interface AuthProps {
   setIsMagicLinkSent: (value: boolean, recipient: string) => void;
   isSignUp?: boolean;
+  callbackURL?: string;
 }
 
 const EmailSchema = z.object({
@@ -152,7 +153,11 @@ const availableSocialProviders = {
   },
 };
 
-export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
+export function Auth({
+  setIsMagicLinkSent,
+  isSignUp,
+  callbackURL: callbackURLProp,
+}: AuthProps) {
   const [isCloudEnv, setIsCloudEnv] = useState(false);
   const [isLoginWithProviderPending, setIsLoginWithProviderPending] =
     useState<null | AuthProvider>(null);
@@ -165,7 +170,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
   const passwordRef = useRef<HTMLInputElement | null>(null);
 
   const redirect = useSearchParams().get("next");
-  const callbackURL = redirect ?? "/boards";
+  const callbackURL = callbackURLProp ?? redirect ?? "/boards";
 
   // Safely get environment variables on client side to avoid hydration mismatch
   useEffect(() => {

apps/web/src/components/CommandPallette.tsx

@@ -33,6 +33,7 @@ type SearchResult =
       boardPublicId: string;
       boardName: string;
       listName: string;
+      cardNumber: number | null;
       updatedAt: Date | null;
       createdAt: Date;
       type: "card";
@@ -159,8 +160,17 @@ export default function CommandPallette({
                             )}
                           </div>
                           <div className="min-w-0 flex-1 text-left">
-                            <div className="truncate text-sm font-bold text-light-900 dark:text-dark-900">
-                              {result.title}
+                            <div className="flex items-center gap-2">
+                              <div className="truncate text-sm font-bold text-light-900 dark:text-dark-900">
+                                {result.title}
+                              </div>
+                              {result.type === "card" &&
+                                result.cardNumber != null &&
+                                workspace.cardPrefix && (
+                                  <span className="flex-shrink-0 text-xs text-light-600 dark:text-dark-600">
+                                    {workspace.cardPrefix}-{result.cardNumber}
+                                  </span>
+                                )}
                             </div>
                             {result.type === "card" && (
                               <div className="truncate text-xs text-light-700 dark:text-dark-700">

apps/web/src/components/Dashboard.tsx

@@ -1,3 +1,6 @@
+import { useRouter, useSearchParams } from "next/navigation";
+import { t } from "@lingui/core/macro";
+import { env } from "next-runtime-env";
 import { useTheme } from "next-themes";
 import { useEffect, useRef, useState } from "react";
 import {
@@ -11,8 +14,12 @@ import { authClient } from "@kan/auth/client";
 
 import { useClickOutside } from "~/hooks/useClickOutside";
 import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
 import { useWorkspace, WorkspaceProvider } from "~/providers/workspace";
 import { api } from "~/utils/api";
+import { ChangePasswordFormConfirmation } from "~/views/settings/components/ChangePasswordConfirmation";
+import Button from "./Button";
+import Modal from "./modal";
 import SideNavigation from "./SideNavigation";
 
 interface DashboardProps {
@@ -41,8 +48,11 @@ export default function Dashboard({
   hasRightPanel = false,
 }: DashboardProps) {
   const { resolvedTheme } = useTheme();
-  const { openModal } = useModal();
+  const { openModal, closeModal, modalContentType } = useModal();
   const { availableWorkspaces, hasLoaded } = useWorkspace();
+  const { showPopup } = usePopup();
+  const router = useRouter();
+  const searchParams = useSearchParams();
 
   const { data: session, isPending: sessionLoading } = authClient.useSession();
   const { data: user, isLoading: userLoading } = api.user.getUser.useQuery(
@@ -97,10 +107,65 @@ export default function Dashboard({
   });
 
   useEffect(() => {
-    if (hasLoaded && availableWorkspaces.length === 0) {
-      openModal("NEW_WORKSPACE", undefined, undefined, false);
+    const partnerActivated = searchParams.get("partner_activated");
+    const partnerError = searchParams.get("partner_error");
+
+    if (partnerActivated) {
+      showPopup({
+        header: t`License activated`,
+        message: t`Your license has been activated successfully.`,
+        icon: "success",
+      });
+      const params = new URLSearchParams(searchParams.toString());
+      params.delete("partner_activated");
+      router.replace(`?${params.toString()}`);
+    } else if (partnerError) {
+      const messages: Record<string, string> = {
+        invalid_license: t`That license key could not be found. Please contact support.`,
+        license_inactive: t`Your license is not active. Please check your account.`,
+        missing_license: t`No license key was provided. Please try activating again.`,
+      };
+      showPopup({
+        header: t`License activation failed`,
+        message:
+          messages[partnerError] ??
+          t`Something went wrong during license activation.`,
+        icon: "error",
+      });
+      const params = new URLSearchParams(searchParams.toString());
+      params.delete("partner_error");
+      router.replace(`?${params.toString()}`);
     }
-  }, [hasLoaded, availableWorkspaces.length, openModal]);
+  }, [searchParams, showPopup, router]);
+
+  useEffect(() => {
+    if (hasLoaded && availableWorkspaces.length === 0) {
+      if (env("NEXT_PUBLIC_KAN_ENV") === "cloud") {
+        router.push(
+          `/onboarding/select-plan?returnUrl=${encodeURIComponent(window.location.pathname)}`,
+        );
+      } else {
+        openModal("NEW_WORKSPACE", undefined, undefined, false);
+      }
+    }
+  }, [hasLoaded, availableWorkspaces.length, openModal, router]);
+
+  useEffect(() => {
+    const isCredentialsEnabled =
+      env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
+
+    if (
+      !userLoading &&
+      user &&
+      isCredentialsEnabled &&
+      user.hasMagicLinkAccount &&
+      !user.hasPassword &&
+      !sessionStorage.getItem("set_password_prompted")
+    ) {
+      sessionStorage.setItem("set_password_prompted", "1");
+      openModal("SET_PASSWORD_PROMPT");
+    }
+  }, [user, userLoading, openModal]);
 
   const isDarkMode = resolvedTheme === "dark";
 
@@ -196,6 +261,30 @@ export default function Dashboard({
           </div>
         </div>
       </div>
+
+      <Modal
+        modalSize="sm"
+        isVisible={modalContentType === "SET_PASSWORD_PROMPT"}
+      >
+        {user?.hasPassword ? (
+          <div className="p-5">
+            <h2 className="pb-4 text-base font-medium dark:text-white">{t`Password already set`}</h2>
+            <p className="mb-6 text-sm text-light-900">
+              {t`Your account already has a password. You can change it from your account settings.`}
+            </p>
+            <Button
+              variant="secondary"
+              onClick={closeModal}
+              fullWidth
+              size="lg"
+            >
+              {t`Close`}
+            </Button>
+          </div>
+        ) : (
+          <ChangePasswordFormConfirmation hasPassword={false} />
+        )}
+      </Modal>
     </>
   );
 }

apps/web/src/components/Editor.tsx

@@ -10,6 +10,7 @@ import { t } from "@lingui/core/macro";
 import Link from "@tiptap/extension-link";
 import Mention from "@tiptap/extension-mention";
 import Placeholder from "@tiptap/extension-placeholder";
+import Typography from "@tiptap/extension-typography";
 import {
   BubbleMenu,
   EditorContent,
@@ -17,7 +18,6 @@ import {
   ReactRenderer,
   useEditor,
 } from "@tiptap/react";
-import Typography from "@tiptap/extension-typography";
 import StarterKit from "@tiptap/starter-kit";
 import Suggestion from "@tiptap/suggestion";
 import {
@@ -85,7 +85,7 @@ export interface RenderSuggestionsProps {
 export interface WorkspaceMember {
   publicId: string;
   user: {
-    id: string;
+    id: string | null;
     name: string | null;
     image: string | null;
   } | null;
@@ -180,13 +180,13 @@ const RenderSuggestions = () => {
 
       if (!props.clientRect) return;
 
-      popup[0]?.setProps({
+      popup?.[0]?.setProps({
         getReferenceClientRect: props.clientRect,
       });
     },
     onKeyDown(props: SuggestionKeyDownProps): boolean {
       if (props.event.key === "Escape") {
-        popup[0]?.hide();
+        popup?.[0]?.hide();
         return true;
       }
 
@@ -199,7 +199,7 @@ const RenderSuggestions = () => {
       );
     },
     onExit() {
-      popup[0]?.destroy();
+      popup?.[0]?.destroy();
       reactRenderer.destroy();
     },
   };
@@ -308,11 +308,11 @@ const renderMentionSuggestions = () => {
     onUpdate(props: any) {
       reactRenderer.updateProps(props);
       if (!props.clientRect) return;
-      popup[0]?.setProps({ getReferenceClientRect: props.clientRect });
+      popup?.[0]?.setProps({ getReferenceClientRect: props.clientRect });
     },
     onKeyDown(props: SuggestionKeyDownProps) {
       if (props.event.key === "Escape") {
-        popup[0]?.hide();
+        popup?.[0]?.hide();
         return true;
       }
       return (
@@ -324,7 +324,7 @@ const renderMentionSuggestions = () => {
       );
     },
     onExit() {
-      popup[0]?.destroy();
+      popup?.[0]?.destroy();
       reactRenderer.destroy();
     },
   };
@@ -440,6 +440,7 @@ export default function Editor({
   content,
   onChange,
   onBlur,
+  onSubmit,
   readOnly = false,
   workspaceMembers,
   enableYouTubeEmbed = true,
@@ -449,6 +450,7 @@ export default function Editor({
   content: string | null;
   onChange?: (value: string) => void;
   onBlur?: () => void;
+  onSubmit?: () => void;
   readOnly?: boolean;
   workspaceMembers: WorkspaceMember[];
   enableYouTubeEmbed?: boolean;
@@ -457,6 +459,21 @@ export default function Editor({
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
 
+  // useEditor is created once (empty deps below), so keep the latest callbacks
+  // in refs to avoid the editor capturing stale closures on re-render.
+  const onChangeRef = useRef(onChange);
+  const onBlurRef = useRef(onBlur);
+  const onSubmitRef = useRef(onSubmit);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    onBlurRef.current = onBlur;
+  }, [onBlur]);
+  useEffect(() => {
+    onSubmitRef.current = onSubmit;
+  }, [onSubmit]);
+
   const editor = useEditor(
     {
       extensions: [
@@ -474,12 +491,12 @@ export default function Editor({
           autolink: true,
           linkOnPaste: true,
         }),
-        Markdown,
+        Markdown.configure({ transformPastedText: true }),
         Placeholder.configure({
           placeholder: readOnly
             ? ""
-            : placeholder ??
-              t`Add description... (type '/' to open commands or '@' to mention)`,
+            : (placeholder ??
+              t`Add description... (type '/' to open commands or '@' to mention)`),
         }),
         SlashCommands.configure({
           commandItems: getCommandItems(disableHeadings),
@@ -497,24 +514,26 @@ export default function Editor({
           suggestion: {
             char: "@",
             items: ({ query }: { query: string }) => {
-              const withEmail = workspaceMembers.filter((member) => member.email);
-              
+              const withEmail = workspaceMembers.filter(
+                (member) => member.email,
+              );
+
               const mapped = withEmail.map((member: WorkspaceMember) => ({
                 id: member.publicId,
                 label: member?.user?.name?.trim() || member.email || "",
                 image: member?.user?.image ?? null,
               }));
-              
+
               const all: MentionItem[] = mapped.filter(
                 (item) => item.label && item.label.length > 0,
               );
-              
+
               const q = query.toLowerCase().trim();
-              
+
               if (q === "") {
                 return all;
               }
-              
+
               const filtered = all.filter((u) =>
                 u.label.toLowerCase().includes(q),
               );
@@ -540,20 +559,20 @@ export default function Editor({
           },
         }),
         Typography.configure({
-            openDoubleQuote: false,
-            closeDoubleQuote: false,
-            openSingleQuote: false,
-            closeSingleQuote: false,
-            oneHalf: false,
-            oneQuarter: false,
-            threeQuarters: false,
-            superscriptTwo: false,
-            superscriptThree: false,
+          openDoubleQuote: false,
+          closeDoubleQuote: false,
+          openSingleQuote: false,
+          closeSingleQuote: false,
+          oneHalf: false,
+          oneQuarter: false,
+          threeQuarters: false,
+          superscriptTwo: false,
+          superscriptThree: false,
         }),
         ...(enableYouTubeEmbed ? [YouTubeNode] : []),
       ],
       content,
-      onUpdate: ({ editor }) => onChange?.(editor.getHTML()),
+      onUpdate: ({ editor }) => onChangeRef.current?.(editor.getHTML()),
       onBlur: ({ event }) => {
         if (
           document
@@ -563,13 +582,20 @@ export default function Editor({
           return;
         // Only trigger onBlur if the click was outside both the editor and menu
         if (!containerRef.current?.contains(event.relatedTarget as Node)) {
-          onBlur?.();
+          onBlurRef.current?.();
         }
       },
       editorProps: {
         attributes: {
           class: "outline-none focus:outline-none focus-visible:ring-0",
         },
+        handleKeyDown: (_view, event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            onSubmitRef.current?.();
+            return true;
+          }
+          return false;
+        },
       },
       editable: !readOnly,
       injectCSS: false,
@@ -587,6 +613,16 @@ export default function Editor({
     }
   }, [content, editor]);
 
+  // useEditor captures `readOnly` once at creation time (empty deps above), so
+  // explicitly sync `editable` when the prop changes. Without this the editor
+  // gets stuck read-only when `readOnly` flips from true to false after mount
+  // (e.g. card permissions resolving slower than the card data on first load).
+  useEffect(() => {
+    if (!editor) return;
+    if (editor.isEditable === !readOnly) return;
+    editor.setEditable(!readOnly);
+  }, [editor, readOnly]);
+
   return (
     <div ref={containerRef}>
       <style jsx global>{`

apps/web/src/components/FontSizeSelector.tsx

@@ -0,0 +1,32 @@
+import { t } from "@lingui/core/macro";
+import { HiOutlineAdjustmentsHorizontal } from "react-icons/hi2";
+
+import { useFontSize, type FontSize } from "~/providers/font-size";
+
+const fontSizeOptions: { value: FontSize; label: () => string }[] = [
+  { value: "small", label: () => t`Small` },
+  { value: "medium", label: () => t`Medium` },
+  { value: "large", label: () => t`Large` },
+];
+
+export function FontSizeSelector() {
+  const { fontSize, setFontSize } = useFontSize();
+
+  return (
+    <div className="relative">
+      <HiOutlineAdjustmentsHorizontal className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+      <select
+        id="font-size-select"
+        value={fontSize}
+        onChange={(e) => setFontSize(e.target.value as FontSize)}
+        className="block w-full max-w-[180px] rounded-lg border-0 bg-light-50 pl-10 text-sm shadow-sm ring-1 ring-inset ring-light-300 focus:ring-2 focus:ring-inset focus:ring-light-400 dark:bg-dark-50 dark:text-dark-1000 dark:ring-dark-300 dark:focus:ring-dark-500"
+      >
+        {fontSizeOptions.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label()}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

apps/web/src/components/Input.tsx

@@ -88,7 +88,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             </button>
           )}
           {iconRight && type !== "password" && (
-            <div className="absolute right-3 top-1/2 -translate-y-1/2">
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 leading-[0]">
               {iconRight}
             </div>
           )}

apps/web/src/components/LabelForm.tsx

@@ -39,7 +39,7 @@ export function LabelForm({
       labelPublicId: entityId,
     },
     {
-      enabled: isEdit && !!entityId,
+      enabled: !!isEdit && entityId.length >= 12,
     },
   );
 
@@ -207,7 +207,7 @@ export function LabelForm({
         />
       </div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         {!isEdit && (
           <Toggle
             label={t`Create another`}

apps/web/src/components/NewWorkspaceForm.tsx

@@ -1,21 +1,14 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import {
-  HiBolt,
-  HiCheck,
-  HiCheckBadge,
-  HiInformationCircle,
-  HiXMark,
-} from "react-icons/hi2";
+import { HiCheck, HiXMark } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 
 import Button from "~/components/Button";
 import Input from "~/components/Input";
-import Toggle from "~/components/Toggle";
 import { useDebounce } from "~/hooks/useDebounce";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
@@ -54,7 +47,6 @@ export function NewWorkspaceForm() {
     watch,
     trigger,
     clearErrors,
-    setValue,
   } = useForm<FormValues>({
     resolver: zodResolver(schema),
     defaultValues: {
@@ -67,16 +59,10 @@ export function NewWorkspaceForm() {
 
   const hasAvailableWorkspaces = availableWorkspaces.length > 0;
 
-  const isCloudEnv = env("NEXT_PUBLIC_KAN_ENV") === "cloud";
-
   const slug = watch("slug");
   const [debouncedSlug] = useDebounce(slug, 500);
   const isTyping = slug !== debouncedSlug;
 
-  // Pro toggle state management
-  const [isProToggleEnabled, setIsProToggleEnabled] = useState(false);
-  const [lastAvailableSlug, setLastAvailableSlug] = useState<string>("");
-
   // Validate slug only after debounce
   useEffect(() => {
     if (isTyping) {
@@ -101,7 +87,7 @@ export function NewWorkspaceForm() {
   const isWorkspaceSlugAvailable = checkWorkspaceSlugAvailability.data;
 
   const createWorkspace = api.workspace.create.useMutation({
-    onSuccess: async (values, variables) => {
+    onSuccess: (values) => {
       if (values.publicId && values.name) {
         void utils.workspace.all.invalidate();
         switchWorkspace({
@@ -110,46 +96,11 @@ export function NewWorkspaceForm() {
           description: values.description,
           slug: values.slug,
           plan: values.plan,
+          cardPrefix: values.cardPrefix,
           role: "admin",
           weekStartDay: 1,
         });
 
-        // If in cloud and Pro toggle is enabled, create checkout session for pro
-        if (env("NEXT_PUBLIC_KAN_ENV") === "cloud" && isProToggleEnabled) {
-          try {
-            const response = await fetch(
-              "/api/stripe/create_checkout_session",
-              {
-                method: "POST",
-                headers: {
-                  "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                  slug: slug || undefined,
-                  workspacePublicId: values.publicId,
-                  cancelUrl: "/settings/workspace?upgrade=pro",
-                  successUrl: "/boards",
-                }),
-              },
-            );
-
-            const data = await response.json();
-            const url = (data as { url: string }).url;
-
-            if (url) {
-              window.location.href = url;
-              return; // Don't close modal if redirecting to checkout
-            }
-          } catch (error) {
-            console.error("Error creating checkout session:", error);
-            showPopup({
-              header: t`Error upgrading to Pro`,
-              message: t`Workspace created successfully. You can upgrade later in settings.`,
-              icon: "warning",
-            });
-          }
-        }
-
         closeModal();
       }
     },
@@ -168,57 +119,8 @@ export function NewWorkspaceForm() {
     if (nameElement) nameElement.focus();
   }, []);
 
-  const [shouldShowBenefits, setShouldShowBenefits] = useState(false);
-
   const isValidSlug = slug && slug.length >= 3 && !errors.slug;
 
-  useEffect(() => {
-    if (
-      isCloudEnv &&
-      !checkWorkspaceSlugAvailability.isPending &&
-      isValidSlug
-    ) {
-      const isAvailable = isWorkspaceSlugAvailable?.isAvailable === true;
-      setShouldShowBenefits(isAvailable);
-
-      // Automatically enable Pro toggle when slug is available
-      if (isAvailable) {
-        setIsProToggleEnabled(true);
-        setLastAvailableSlug(slug);
-      }
-    }
-  }, [
-    isValidSlug,
-    isWorkspaceSlugAvailable?.isAvailable,
-    checkWorkspaceSlugAvailability.isPending,
-    slug,
-    isCloudEnv,
-  ]);
-
-  // Reset benefits when slug becomes invalid
-  useEffect(() => {
-    if (!isValidSlug) {
-      setShouldShowBenefits(false);
-    }
-  }, [isValidSlug]);
-
-  // Handle Pro toggle changes
-  const handleProToggleChange = () => {
-    if (isProToggleEnabled) {
-      // Turning off: clear the slug and disable Pro
-      setValue("slug", "");
-      setIsProToggleEnabled(false);
-    } else {
-      // Turning on: restore the last available slug if we have one
-      if (lastAvailableSlug) {
-        setValue("slug", lastAvailableSlug);
-      }
-      setIsProToggleEnabled(true);
-    }
-  };
-
-  const showProBenefits = isProToggleEnabled;
-
   const onSubmit = (values: FormValues) => {
     // Don't submit if slug is provided but not available
     if (values.slug && isWorkspaceSlugAvailable?.isAvailable === false) {
@@ -227,7 +129,7 @@ export function NewWorkspaceForm() {
 
     createWorkspace.mutate({
       name: values.name,
-      slug: !isCloudEnv && values.slug ? values.slug : undefined,
+      slug: values.slug,
     });
   };
 
@@ -290,11 +192,7 @@ export function NewWorkspaceForm() {
                   ? t`This workspace URL is reserved`
                   : undefined)
             }
-            prefix={
-              env("NEXT_PUBLIC_KAN_ENV") === "cloud"
-                ? "kan.bn/"
-                : `${env("NEXT_PUBLIC_BASE_URL")}/`
-            }
+            prefix={`${env("NEXT_PUBLIC_BASE_URL")}/`}
             iconRight={
               slug && slug.length >= 3 && !errors.slug ? (
                 isWorkspaceSlugAvailable?.isAvailable ? (
@@ -311,68 +209,9 @@ export function NewWorkspaceForm() {
               }
             }}
           />
-
-          {slug && slug.length >= 3 && shouldShowBenefits && (
-            <div className="mt-2 flex items-center gap-1">
-              <HiInformationCircle className="h-4 w-4 text-dark-900" />
-              <p className="text-xs text-gray-500 dark:text-dark-900">
-                {t`Custom URLs require upgrading to a Pro plan`}
-              </p>
-            </div>
-          )}
         </div>
-
-        {showProBenefits && (
-          <div className="mt-6">
-            <div className="rounded-md bg-light-100 p-3 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900">
-              <div className="space-y-3">
-                <div className="flex items-center space-x-3">
-                  <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
-                  <div className="flex items-center space-x-2">
-                    <span className="text-xs text-neutral-900 dark:text-dark-1000">
-                      {t`Unlimited members`}
-                    </span>
-                    <span className="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 ring-1 ring-inset ring-emerald-500/20 dark:text-emerald-400 sm:text-[10px]">
-                      {t`Launch offer`}
-                    </span>
-                  </div>
-                </div>
-                <div className="flex items-center space-x-3">
-                  <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
-                  <span className="text-xs text-neutral-900 dark:text-dark-1000">
-                    {t`Custom workspace URL`}
-                  </span>
-                </div>
-                <div className="flex items-center space-x-3">
-                  <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
-                  <div className="flex items-center space-x-2">
-                    <span className="text-xs text-neutral-900 dark:text-dark-1000">
-                      {t`Board analytics`}
-                    </span>
-                    <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-0.5 text-[10px] font-medium text-gray-600 ring-1 ring-inset ring-gray-500/20 dark:text-gray-400 sm:text-[10px]">
-                      {t`Coming soon`}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
       </div>
-      <div
-        className={twMerge(
-          "mt-6 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600",
-          !showProBenefits && "mt-12",
-        )}
-      >
-        {/* Pro Toggle - only show in cloud environment */}
-        {isCloudEnv && (
-          <Toggle
-            isChecked={isProToggleEnabled}
-            onChange={handleProToggleChange}
-            label={t`Upgrade to Pro ($29/month)`}
-          />
-        )}
+      <div className="mt-6 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <div>
           <Button
             type="submit"

apps/web/src/components/PlainTextEditor.tsx

@@ -0,0 +1,130 @@
+import Placeholder from "@tiptap/extension-placeholder";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { useEffect, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface PlainTextEditorProps {
+  content: string;
+  onChange?: (value: string) => void;
+  onBlur?: (value: string) => void;
+  onEnter?: (value: string) => void;
+  onEscape?: () => void;
+  readOnly?: boolean;
+  placeholder?: string;
+  className?: string;
+}
+
+export default function PlainTextEditor({
+  content,
+  onChange,
+  onBlur,
+  onEnter,
+  onEscape,
+  readOnly = false,
+  placeholder,
+  className,
+}: PlainTextEditorProps) {
+  const onEnterRef = useRef(onEnter);
+  const onEscapeRef = useRef(onEscape);
+  const onBlurRef = useRef(onBlur);
+  const onChangeRef = useRef(onChange);
+  const contentRef = useRef(content);
+
+  useEffect(() => {
+    onEnterRef.current = onEnter;
+  }, [onEnter]);
+  useEffect(() => {
+    onEscapeRef.current = onEscape;
+  }, [onEscape]);
+  useEffect(() => {
+    onBlurRef.current = onBlur;
+  }, [onBlur]);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    contentRef.current = content;
+  }, [content]);
+
+  const editor = useEditor(
+    {
+      extensions: [
+        StarterKit.configure({
+          bold: false,
+          italic: false,
+          strike: false,
+          code: false,
+          codeBlock: false,
+          blockquote: false,
+          heading: false,
+          bulletList: false,
+          orderedList: false,
+          listItem: false,
+          horizontalRule: false,
+          hardBreak: false,
+        }),
+        Placeholder.configure({ placeholder }),
+      ],
+      content,
+      editable: !readOnly,
+      onUpdate: ({ editor }) => onChangeRef.current?.(editor.getText()),
+      onBlur: ({ editor }) => onBlurRef.current?.(editor.getText()),
+      editorProps: {
+        handleKeyDown: (view, event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            onEnterRef.current?.(view.state.doc.textContent.trim());
+            return true;
+          }
+          if (event.key === "Escape") {
+            event.preventDefault();
+            // Reset to original content before calling the callback
+            editor?.commands.setContent(contentRef.current, false);
+            editor?.commands.blur();
+            onEscapeRef.current?.();
+            return true;
+          }
+          return false;
+        },
+        attributes: {
+          class: "outline-none focus:outline-none focus-visible:ring-0",
+        },
+      },
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!editor) return;
+    if (content !== editor.getText()) {
+      editor.commands.setContent(content, false);
+    }
+  }, [content, editor]);
+
+  useEffect(() => {
+    if (!editor) return;
+    editor.setEditable(!readOnly);
+  }, [readOnly, editor]);
+
+  return (
+    <>
+      <style jsx global>{`
+        .plain-text-editor p.is-empty::before {
+          content: attr(data-placeholder);
+          float: left;
+          height: 0;
+          pointer-events: none;
+          color: var(--placeholder-color, #9ca3af);
+        }
+        .plain-text-editor .tiptap p {
+          margin: 0 !important;
+        }
+      `}</style>
+      <EditorContent
+        editor={editor}
+        className={twMerge("plain-text-editor", className)}
+      />
+    </>
+  );
+}

apps/web/src/components/SideNavigation.tsx

@@ -4,7 +4,7 @@ import { Button } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
 import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { HiBolt } from "react-icons/hi2";
 import {
   TbLayoutSidebarLeftCollapse,
@@ -28,7 +28,7 @@ import ButtonComponent from "~/components/Button";
 import ReactiveButton from "~/components/ReactiveButton";
 import UserMenu from "~/components/UserMenu";
 import WorkspaceMenu from "~/components/WorkspaceMenu";
-import { useModal } from "~/providers/modal";
+import { useLinguiContext } from "~/providers/lingui";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 
@@ -51,9 +51,9 @@ export default function SideNavigation({
 }: SideNavigationProps) {
   const router = useRouter();
   const { workspace } = useWorkspace();
+  const { locale } = useLinguiContext();
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [isInitialised, setIsInitialised] = useState(false);
-  const { openModal } = useModal();
 
   const { data: workspaceData } = api.workspace.byId.useQuery(
     { workspacePublicId: workspace.publicId },
@@ -94,56 +94,59 @@ export default function SideNavigation({
     href: string;
     icon: object;
     keyboardShortcut: KeyboardShortcut;
-  }[] = [
-    {
-      name: t`Boards`,
-      href: "/boards",
-      icon: isDarkMode ? boardsIconDark : boardsIconLight,
-      keyboardShortcut: {
-        type: "SEQUENCE",
-        strokes: [{ key: "G" }, { key: "B" }],
-        action: () => router.push("/boards"),
-        group: "NAVIGATION",
-        description: t`Go to boards`,
+  }[] = useMemo(
+    () => [
+      {
+        name: t`Boards`,
+        href: "/boards",
+        icon: isDarkMode ? boardsIconDark : boardsIconLight,
+        keyboardShortcut: {
+          type: "SEQUENCE",
+          strokes: [{ key: "G" }, { key: "B" }],
+          action: () => router.push("/boards"),
+          group: "NAVIGATION",
+          description: t`Go to boards`,
+        },
       },
-    },
-    {
-      name: t`Templates`,
-      href: "/templates",
-      icon: isDarkMode ? templatesIconDark : templatesIconLight,
-      keyboardShortcut: {
-        type: "SEQUENCE",
-        strokes: [{ key: "G" }, { key: "T" }],
-        action: () => router.push("/templates"),
-        group: "NAVIGATION",
-        description: t`Go to templates`,
+      {
+        name: t`Templates`,
+        href: "/templates",
+        icon: isDarkMode ? templatesIconDark : templatesIconLight,
+        keyboardShortcut: {
+          type: "SEQUENCE",
+          strokes: [{ key: "G" }, { key: "T" }],
+          action: () => router.push("/templates"),
+          group: "NAVIGATION",
+          description: t`Go to templates`,
+        },
       },
-    },
-    {
-      name: t`Members`,
-      href: "/members",
-      icon: isDarkMode ? membersIconDark : membersIconLight,
-      keyboardShortcut: {
-        type: "SEQUENCE",
-        strokes: [{ key: "G" }, { key: "M" }],
-        action: () => router.push("/members"),
-        group: "NAVIGATION",
-        description: t`Go to members`,
+      {
+        name: t`Members`,
+        href: "/members",
+        icon: isDarkMode ? membersIconDark : membersIconLight,
+        keyboardShortcut: {
+          type: "SEQUENCE",
+          strokes: [{ key: "G" }, { key: "M" }],
+          action: () => router.push("/members"),
+          group: "NAVIGATION",
+          description: t`Go to members`,
+        },
       },
-    },
-    {
-      name: t`Settings`,
-      href: "/settings",
-      icon: isDarkMode ? settingsIconDark : settingsIconLight,
-      keyboardShortcut: {
-        type: "SEQUENCE",
-        strokes: [{ key: "G" }, { key: "S" }],
-        action: () => router.push("/settings"),
-        group: "NAVIGATION",
-        description: t`Go to settings`,
+      {
+        name: t`Settings`,
+        href: "/settings",
+        icon: isDarkMode ? settingsIconDark : settingsIconLight,
+        keyboardShortcut: {
+          type: "SEQUENCE",
+          strokes: [{ key: "G" }, { key: "S" }],
+          action: () => router.push("/settings"),
+          group: "NAVIGATION",
+          description: t`Go to settings`,
+        },
       },
-    },
-  ];
+    ],
+    [isDarkMode, locale, router],
+  );
 
   const toggleCollapse = () => {
     setIsCollapsed(!isCollapsed);
@@ -223,21 +226,19 @@ export default function SideNavigation({
                   <ButtonComponent
                     iconLeft={<HiBolt />}
                     variant="secondary"
-                    href="/settings/workspace?upgrade=pro"
-                    aria-label="Upgrade to Pro"
-                    title="Upgrade to Pro"
+                    href={`/upgrade/select-plan?plan=pro&workspacePublicId=${workspace.publicId}&returnUrl=${encodeURIComponent("/settings/billing")}`}
+                    aria-label={t`Start free trial`}
+                    title={t`Start free trial`}
                     iconOnly
-                    onClick={() => openModal("UPGRADE_TO_PRO")}
                   />
                 ) : (
                   <ButtonComponent
                     iconLeft={<HiBolt />}
                     fullWidth
                     variant="secondary"
-                    href="/settings/workspace?upgrade=pro"
-                    onClick={() => openModal("UPGRADE_TO_PRO")}
+                    href={`/upgrade/select-plan?plan=pro&workspacePublicId=${workspace.publicId}&returnUrl=${encodeURIComponent("/settings/billing")}`}
                   >
-                    {t`Upgrade to Pro`}
+                    {t`Start free trial`}
                   </ButtonComponent>
                 )}
               </div>

apps/web/src/components/Toggle.tsx

@@ -7,15 +7,17 @@ const Toggle = ({
   label,
   disabled,
   showLabel = true,
+  labelPosition = "before",
 }: {
   isChecked: boolean;
   onChange: () => void;
   label: string;
   disabled?: boolean;
   showLabel?: boolean;
+  labelPosition?: "before" | "after";
 }) => (
-  <div className="mr-4 flex items-center justify-end">
-    {showLabel && (
+  <div className="flex items-center">
+    {showLabel && labelPosition === "before" && (
       <span className="mr-2 text-xs text-light-900 dark:text-dark-900">
         {label}
       </span>
@@ -38,6 +40,11 @@ const Toggle = ({
         )}
       />
     </Switch>
+    {showLabel && labelPosition === "after" && (
+      <span className="ml-2 text-xs text-light-900 dark:text-dark-900">
+        {label}
+      </span>
+    )}
   </div>
 );
 

apps/web/src/components/Tooltip.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import type { Root } from "react-dom/client";
-import type { Placement } from "tippy.js";
+import type { Placement, Instance as TippyInstance } from "tippy.js";
 import { useEffect, useRef } from "react";
 import { createRoot } from "react-dom/client";
 import tippy from "tippy.js";
@@ -20,16 +20,16 @@ export function Tooltip({
 }: TooltipProps) {
   const triggerRef = useRef<HTMLDivElement>(null);
   const rootRef = useRef<Root | null>(null);
+  const tippyRef = useRef<TippyInstance | null>(null);
+  const contentRef = useRef(content);
+  contentRef.current = content;
 
   useEffect(() => {
     if (!triggerRef.current) return;
 
-    if (!content) return;
-
     const container = document.createElement("div");
     const root = createRoot(container);
     rootRef.current = root;
-    root.render(content);
 
     const instance = tippy(triggerRef.current, {
       content: container,
@@ -39,12 +39,33 @@ export function Tooltip({
       theme: "tooltip",
       touch: false,
     });
+    tippyRef.current = instance;
+
+    if (contentRef.current) {
+      root.render(contentRef.current);
+    } else {
+      instance.disable();
+    }
 
     return () => {
       instance.destroy();
-      rootRef.current?.unmount();
+      tippyRef.current = null;
+      root.unmount();
+      rootRef.current = null;
     };
-  }, [content, placement, delay]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [placement, delay]);
+
+  useEffect(() => {
+    if (!content) {
+      tippyRef.current?.disable();
+      return;
+    }
+    if (tippyRef.current) {
+      tippyRef.current.enable();
+      rootRef.current?.render(content);
+    }
+  }, [content]);
 
   return (
     <div ref={triggerRef} className="inline-flex">

apps/web/src/components/WorkspaceMenu.tsx

@@ -1,12 +1,16 @@
+import { useRouter } from "next/navigation";
 import { Button, Menu, Transition } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
-import { Fragment, useState } from "react";
+import { env } from "next-runtime-env";
+import { Fragment, useMemo, useState } from "react";
 import { HiCheck, HiMagnifyingGlass } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 
 import { useKeyboardShortcut } from "~/providers/keyboard-shortcuts";
+import { useLinguiContext } from "~/providers/lingui";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
+import { api } from "~/utils/api";
 import CommandPallette from "./CommandPallette";
 import { Tooltip } from "./Tooltip";
 
@@ -17,20 +21,29 @@ export default function WorkspaceMenu({
 }) {
   const { workspace, isLoading, availableWorkspaces, switchWorkspace } =
     useWorkspace();
+  const { locale } = useLinguiContext();
   const { openModal } = useModal();
+  const { data: hasPartnerSlot } =
+    api.workspace.hasAvailablePartnerSlot.useQuery();
+  const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
 
-  const { tooltipContent: commandPaletteShortcutTooltipContent } =
-    useKeyboardShortcut({
-      type: "PRESS",
+  const commandPaletteShortcut = useMemo(
+    () => ({
+      type: "PRESS" as const,
       stroke: {
         key: "k",
-        modifiers: ["META"],
+        modifiers: ["META"] as ("META" | "CONTROL" | "ALT" | "SHIFT")[],
       },
       action: () => setIsOpen(true),
       description: t`Open command menu`,
-      group: "GENERAL",
-    });
+      group: "GENERAL" as const,
+    }),
+    [locale],
+  );
+
+  const { tooltipContent: commandPaletteShortcutTooltipContent } =
+    useKeyboardShortcut(commandPaletteShortcut);
 
   return (
     <>
@@ -147,7 +160,19 @@ export default function WorkspaceMenu({
             <div className="border-t-[1px] border-light-600 p-1 dark:border-dark-500">
               <Menu.Item>
                 <button
-                  onClick={() => openModal("NEW_WORKSPACE")}
+                  onClick={() => {
+                    if (env("NEXT_PUBLIC_KAN_ENV") !== "cloud") {
+                      openModal("NEW_WORKSPACE");
+                    } else if (hasPartnerSlot) {
+                      router.push(
+                        `/onboarding/workspace?partner=1&returnUrl=${encodeURIComponent(window.location.pathname)}`,
+                      );
+                    } else {
+                      router.push(
+                        `/onboarding/select-plan?returnUrl=${encodeURIComponent(window.location.pathname)}`,
+                      );
+                    }
+                  }}
                   className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-xs text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
                 >
                   {t`Create workspace`}

apps/web/src/env.ts

@@ -52,8 +52,9 @@ export const env = createEnv({
     VK_CLIENT_SECRET: z.string().optional(),
     LINKEDIN_CLIENT_ID: z.string().optional(),
     LINKEDIN_CLIENT_SECRET: z.string().optional(),
-    NOVU_API_KEY: z.string().optional(),
-    EMAIL_UNSUBSCRIBE_SECRET: z.string().optional(),
+    SUBSCRIBER_API_URL: z.string().url().optional(),
+    SUBSCRIBER_API_KEY: z.string().optional(),
+    SUBSCRIBER_ENVIRONMENT_ID: z.string().optional(),
     // Generic OIDC Provider
     OIDC_CLIENT_ID: z.string().optional(),
     OIDC_CLIENT_SECRET: z.string().optional(),

apps/web/src/hooks/useLocalisation.ts

@@ -1,6 +1,6 @@
 import type { Locale as DateFnsLocale } from "date-fns";
 import { useLingui } from "@lingui/react";
-import { de, enGB, es, fr, it, nl, pl, ru, ptBR} from "date-fns/locale";
+import { de, enGB, es, fr, it, nl, pl, ptBR, ru, zhCN } from "date-fns/locale";
 
 import type { Locale } from "~/locales";
 import { useLinguiContext } from "~/providers/lingui";
@@ -19,7 +19,8 @@ export function useLocalisation() {
     nl,
     ru,
     pl,
-    "pt-BR": ptBR,
+    ptbr: ptBR,
+    "zh-CN": zhCN,
   };
 
   const currentDateLocale = dateLocaleMap[locale] ?? enGB;

apps/web/src/hooks/useModalFormState.ts

@@ -1,4 +1,5 @@
-import { useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
+
 import { useModal } from "~/providers/modal";
 
 interface UseModalFormStateOptions<T> {
@@ -12,25 +13,43 @@ export function useModalFormState<T extends Record<string, any>>({
   initialValues,
   resetOnClose = false,
 }: UseModalFormStateOptions<T>) {
-  const { modalContentType, isOpen, getModalState, setModalState, clearModalState } = useModal();
-  
+  const {
+    modalContentType,
+    isOpen,
+    getModalState,
+    setModalState,
+    clearModalState,
+  } = useModal();
+
   const isCurrentModal = modalContentType === modalType;
   const savedState = getModalState(modalType) as T | undefined;
-  
+
   // get current form state (using the saved values if available, otherwise the initial values)
   const formState = savedState || initialValues;
 
-  const saveFormState = (state: Partial<T>) => {
-    if (!isCurrentModal) return;
-    
-    const currentState = getModalState(modalType) || initialValues;
-    const newState = { ...currentState, ...state };
-    setModalState(modalType, newState);
-  };
+  // Keep refs so the callbacks below stay stable across re-renders.
+  const modalTypeRef = useRef(modalType);
+  const initialValuesRef = useRef(initialValues);
+  const getModalStateRef = useRef(getModalState);
+  modalTypeRef.current = modalType;
+  initialValuesRef.current = initialValues;
+  getModalStateRef.current = getModalState;
 
-  const clearFormState = () => {
-    clearModalState(modalType);
-  };
+  const saveFormState = useCallback(
+    (state: Partial<T>) => {
+      const type = modalTypeRef.current;
+      const currentState =
+        getModalStateRef.current(type) ?? initialValuesRef.current;
+      const newState = { ...currentState, ...state };
+      setModalState(type, newState);
+    },
+    // setModalState is stable (useCallback with [] deps in ModalProvider)
+    [setModalState],
+  );
+
+  const clearFormState = useCallback(() => {
+    clearModalState(modalTypeRef.current);
+  }, [clearModalState]);
 
   useEffect(() => {
     if (resetOnClose && !isOpen && savedState) {
@@ -45,4 +64,4 @@ export function useModalFormState<T extends Record<string, any>>({
     isCurrentModal,
     hasSavedState: !!savedState,
   };
-} 
+}

apps/web/src/locales/index.ts

@@ -7,12 +7,14 @@ export const locales = [
   "nl",
   "ru",
   "pl",
-  "ptbr"
+  "ptbr",
+  "zh-CN",
 ] as const;
 
 export type Locale = (typeof locales)[number];
 
-export const defaultLocale: Locale = "en";
+// 自托管实例默认使用简体中文，用户仍可在设置中切换其他语言。
+export const defaultLocale: Locale = "zh-CN";
 
 export const localeNames: Record<Locale, string> = {
   en: "English",
@@ -24,4 +26,5 @@ export const localeNames: Record<Locale, string> = {
   ru: "Русский",
   pl: "Polski",
   ptbr: "Português",
+  "zh-CN": "简体中文",
 };

apps/web/src/pages/_app.tsx

@@ -12,6 +12,7 @@ import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
 import { useEffect } from "react";
 
+import { FontSizeProvider } from "~/providers/font-size";
 import { KeyboardShortcutProvider } from "~/providers/keyboard-shortcuts";
 import { LinguiProviderWrapper } from "~/providers/lingui";
 import { ModalProvider } from "~/providers/modal";
@@ -81,23 +82,25 @@ const MyApp: AppType = ({ Component, pageProps }: AppPropsWithLayout) => {
       )}
       <script src="/__ENV.js" />
       <main className="font-sans">
-        <KeyboardShortcutProvider>
-          <LinguiProviderWrapper>
-            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-              <ModalProvider>
-                <PopupProvider>
-                  {posthogKey ? (
-                    <PostHogProvider client={posthog}>
-                      {getLayout(<Component {...pageProps} />)}
-                    </PostHogProvider>
-                  ) : (
-                    getLayout(<Component {...pageProps} />)
-                  )}
-                </PopupProvider>
-              </ModalProvider>
-            </ThemeProvider>
-          </LinguiProviderWrapper>
-        </KeyboardShortcutProvider>
+        <LinguiProviderWrapper>
+          <KeyboardShortcutProvider>
+            <FontSizeProvider>
+              <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+                <ModalProvider>
+                  <PopupProvider>
+                    {posthogKey ? (
+                      <PostHogProvider client={posthog}>
+                        {getLayout(<Component {...pageProps} />)}
+                      </PostHogProvider>
+                    ) : (
+                      getLayout(<Component {...pageProps} />)
+                    )}
+                  </PopupProvider>
+                </ModalProvider>
+              </ThemeProvider>
+            </FontSizeProvider>
+          </KeyboardShortcutProvider>
+        </LinguiProviderWrapper>
       </main>
     </>
   );

apps/web/src/pages/api/download/attatchment.ts

@@ -1,12 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
 
 import { env } from "~/env";
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
     if (req.method !== "GET") {
       return res.status(405).json({ message: "Method not allowed" });
     }
@@ -32,7 +33,9 @@ export default withRateLimit(
       try {
         allowedHost = new URL(s3Endpoint).hostname.toLowerCase();
       } catch {
-        return res.status(500).json({ message: "Storage endpoint misconfigured" });
+        return res
+          .status(500)
+          .json({ message: "Storage endpoint misconfigured" });
       }
 
       if (hostname !== allowedHost && !hostname.endsWith(`.${allowedHost}`)) {
@@ -66,10 +69,7 @@ export default withRateLimit(
       const buffer = await upstream.arrayBuffer();
       return res.send(Buffer.from(buffer));
     } catch (error) {
-      console.error("Error downloading attachment:", error);
-      return res
-        .status(500)
-        .json({ message: "Failed to download attachment" });
+      return res.status(500).json({ message: "Failed to download attachment" });
     }
-  },
+  }),
 );

apps/web/src/pages/api/oss-friends.ts

@@ -1,25 +1,25 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
-  if (req.method !== "GET") {
-    return res.status(405).json({ message: "Method not allowed" });
-  }
-
-  try {
-    const response = await fetch("https://formbricks.com/api/oss-friends");
-    if (!response.ok) {
-      throw new Error("Failed to fetch from Formbricks");
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
+    if (req.method !== "GET") {
+      return res.status(405).json({ message: "Method not allowed" });
     }
-    const data = await response.json();
 
-    return res.status(200).json(data);
-  } catch (error) {
-    console.error("Error fetching OSS friends:", error);
-    return res.status(500).json({ message: "Failed to fetch OSS friends" });
-  }
-  },
+    try {
+      const response = await fetch("https://formbricks.com/api/oss-friends");
+      if (!response.ok) {
+        throw new Error("Failed to fetch from Formbricks");
+      }
+      const data = await response.json();
+
+      return res.status(200).json(data);
+    } catch (error) {
+      return res.status(500).json({ message: "Failed to fetch OSS friends" });
+    }
+  }),
 );

apps/web/src/pages/api/partner/_utils.ts

@@ -0,0 +1,20 @@
+export type WorkspacePlan = "free" | "team" | "pro" | "enterprise";
+
+export interface TierConfig {
+  plan: WorkspacePlan;
+  seats: number | null;
+  unlimitedSeats: boolean;
+  workspaceSlots: number;
+}
+
+const TIER_MAP: Record<number, TierConfig> = {
+  1: { plan: "team", seats: 5, unlimitedSeats: false, workspaceSlots: 1 },
+  2: { plan: "pro", seats: 15, unlimitedSeats: false, workspaceSlots: 2 },
+  3: { plan: "pro", seats: null, unlimitedSeats: true, workspaceSlots: 4 },
+};
+
+export function tierConfig(tier: number): TierConfig {
+  const config = TIER_MAP[tier];
+  if (!config) throw new Error(`Unknown partner tier: ${tier}`);
+  return config;
+}

apps/web/src/pages/api/partner/callback.ts

@@ -0,0 +1,144 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { createNextApiContext } from "@kan/api/trpc";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
+import { withRateLimit } from "@kan/api/utils/rateLimit";
+import * as subscriptionRepo from "@kan/db/repository/subscription.repo";
+import { createLogger } from "@kan/logger";
+
+import { tierConfig } from "./_utils";
+
+const log = createLogger("api");
+
+interface TokenResponse {
+  access_token: string;
+  token_type: string;
+}
+
+interface OAuthLicenseResponse {
+  license_key: string;
+  status: string;
+}
+
+interface LicenseDetailResponse {
+  license_key: string;
+  status: string;
+  tier: number;
+}
+
+async function exchangeCodeForToken(code: string): Promise<TokenResponse> {
+  const tokenUrl = process.env.PARTNER_TOKEN_URL;
+  const clientId = process.env.PARTNER_CLIENT_ID;
+  const clientSecret = process.env.PARTNER_CLIENT_SECRET;
+  const redirectUrl = process.env.PARTNER_REDIRECT_URL;
+  if (!tokenUrl) throw new Error("PARTNER_TOKEN_URL not configured");
+  if (!clientId) throw new Error("PARTNER_CLIENT_ID not configured");
+  if (!clientSecret) throw new Error("PARTNER_CLIENT_SECRET not configured");
+  if (!redirectUrl) throw new Error("PARTNER_REDIRECT_URL not configured");
+
+  const res = await fetch(tokenUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: new URLSearchParams({
+      grant_type: "authorization_code",
+      code,
+      client_id: clientId,
+      client_secret: clientSecret,
+      redirect_uri: redirectUrl,
+    }),
+  });
+
+  if (!res.ok) throw new Error(`Token exchange failed: ${res.status}`);
+  return res.json() as Promise<TokenResponse>;
+}
+
+async function fetchOAuthLicense(
+  accessToken: string,
+): Promise<OAuthLicenseResponse> {
+  const oauthLicenseUrl = process.env.PARTNER_OAUTH_LICENSE_URL;
+  if (!oauthLicenseUrl)
+    throw new Error("PARTNER_OAUTH_LICENSE_URL not configured");
+
+  const res = await fetch(`${oauthLicenseUrl}?access_token=${accessToken}`);
+  if (!res.ok) throw new Error(`OAuth license fetch failed: ${res.status}`);
+  return res.json() as Promise<OAuthLicenseResponse>;
+}
+
+async function fetchLicenseDetail(
+  licenseKey: string,
+): Promise<LicenseDetailResponse> {
+  const licenseApiUrl = process.env.PARTNER_LICENSE_API_URL;
+  const apiKey = process.env.PARTNER_API_KEY;
+  if (!licenseApiUrl) throw new Error("PARTNER_LICENSE_API_URL not configured");
+  if (!apiKey) throw new Error("PARTNER_API_KEY not configured");
+
+  const apiKeyHeader = process.env.PARTNER_API_KEY_HEADER;
+  if (!apiKeyHeader) throw new Error("PARTNER_API_KEY_HEADER not configured");
+
+  const res = await fetch(`${licenseApiUrl}/${licenseKey}`, {
+    headers: { [apiKeyHeader]: apiKey },
+  });
+  if (!res.ok) throw new Error(`License detail fetch failed: ${res.status}`);
+  return res.json() as Promise<LicenseDetailResponse>;
+}
+
+export default withRateLimit(
+  { points: 20, duration: 60 },
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
+    if (req.method !== "GET") {
+      return res.status(405).json({ message: "Method not allowed" });
+    }
+
+    const { code } = req.query;
+
+    if (!code || typeof code !== "string") {
+      return res.status(200).json({ message: "OK" });
+    }
+
+    let license: LicenseDetailResponse;
+
+    try {
+      const tokenData = await exchangeCodeForToken(code);
+      const oauthLicense = await fetchOAuthLicense(tokenData.access_token);
+      license = await fetchLicenseDetail(oauthLicense.license_key);
+    } catch (err) {
+      log.error({ err }, "Partner OAuth flow failed");
+      return res.redirect(`/partner/activate?error=oauth_failed`);
+    }
+
+    const { db, user } = await createNextApiContext(req);
+
+    const cfg = tierConfig(license.tier);
+    const status = license.status === "active" ? "active" : "inactive";
+
+    // Ensure subscription slots exist — webhook may have already created them
+    const existing = await subscriptionRepo.getAllByPartnerLicenseKey(
+      db,
+      license.license_key,
+    );
+    if (existing.length === 0) {
+      await subscriptionRepo.createPartnerLicenseSlots(
+        db,
+        license.license_key,
+        {
+          plan: cfg.plan,
+          status,
+          partnerTier: license.tier,
+          seats: cfg.seats,
+          unlimitedSeats: cfg.unlimitedSeats,
+        },
+        cfg.workspaceSlots,
+      );
+    }
+
+    if (!user) {
+      return res.redirect(
+        `/partner/activate?license_key=${encodeURIComponent(license.license_key)}`,
+      );
+    }
+
+    return res.redirect(
+      `/api/partner/link?license_key=${encodeURIComponent(license.license_key)}`,
+    );
+  }),
+);

apps/web/src/pages/api/partner/link.ts

@@ -0,0 +1,98 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { createNextApiContext } from "@kan/api/trpc";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
+import { withRateLimit } from "@kan/api/utils/rateLimit";
+import * as subscriptionRepo from "@kan/db/repository/subscription.repo";
+import * as workspaceRepo from "@kan/db/repository/workspace.repo";
+
+export default withRateLimit(
+  { points: 20, duration: 60 },
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
+    if (req.method !== "GET") {
+      return res.status(405).json({ message: "Method not allowed" });
+    }
+
+    const { license_key } = req.query;
+
+    if (!license_key || typeof license_key !== "string") {
+      return res.redirect("/boards?partner_error=missing_license");
+    }
+
+    const { db, user } = await createNextApiContext(req);
+
+    if (!user) {
+      return res.redirect(
+        `/login?next=${encodeURIComponent(`/api/partner/link?license_key=${license_key}`)}`,
+      );
+    }
+
+    const allSlots = await subscriptionRepo.getAllByPartnerLicenseKey(
+      db,
+      license_key,
+    );
+
+    if (!allSlots.length) {
+      return res.redirect("/boards?partner_error=invalid_license");
+    }
+
+    const activeSlots = allSlots.filter((s) =>
+      ["active", "trialing"].includes(s.status),
+    );
+
+    if (!activeSlots.length) {
+      return res.redirect("/boards?partner_error=license_inactive");
+    }
+
+    const unlinkedSlot = activeSlots.find((s) => !s.referenceId);
+
+    if (!unlinkedSlot) {
+      return res.redirect("/boards?partner_activated=1");
+    }
+
+    const linkedIds = new Set(
+      activeSlots.filter((s) => s.referenceId).map((s) => s.referenceId!),
+    );
+
+    const memberships = await workspaceRepo.getAllByUserId(db, user.id);
+    const availableWorkspace = memberships
+      .map((m) => m.workspace)
+      .find((w) => w && !w.deletedAt && !linkedIds.has(w.publicId));
+
+    if (!availableWorkspace) {
+      return res.redirect(
+        `/onboarding/workspace?license_key=${encodeURIComponent(license_key)}`,
+      );
+    }
+
+    await subscriptionRepo.updateById(db, unlinkedSlot.id, {
+      referenceId: availableWorkspace.publicId,
+    });
+
+    await workspaceRepo.update(db, availableWorkspace.publicId, {
+      plan: unlinkedSlot.plan as "free" | "team" | "pro" | "enterprise",
+    });
+
+    const remainingUnlinked = activeSlots.filter(
+      (s) => !s.referenceId && s.id !== unlinkedSlot.id,
+    );
+
+    if (remainingUnlinked.length > 0) {
+      const updatedLinkedIds = new Set([
+        ...linkedIds,
+        availableWorkspace.publicId,
+      ]);
+      const hasMoreAvailableWorkspace = memberships
+        .map((m) => m.workspace)
+        .some((w) => w && !w.deletedAt && !updatedLinkedIds.has(w.publicId));
+
+      if (hasMoreAvailableWorkspace) {
+        return res.redirect(
+          `/api/partner/link?license_key=${encodeURIComponent(license_key)}`,
+        );
+      }
+    }
+
+    return res.redirect("/boards?partner_activated=1");
+  }),
+);

apps/web/src/pages/api/partner/webhook.ts

@@ -0,0 +1,418 @@
+import { createHmac, timingSafeEqual } from "crypto";
+import type { NextApiRequest, NextApiResponse } from "next";
+import type { Readable } from "node:stream";
+
+import type { dbClient } from "@kan/db/client";
+import { createNextApiContext } from "@kan/api/trpc";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
+import { cancelWorkspaceAccess } from "@kan/api/utils/workspace";
+import * as subscriptionRepo from "@kan/db/repository/subscription.repo";
+import * as workspaceRepo from "@kan/db/repository/workspace.repo";
+import { createLogger } from "@kan/logger";
+import { getActiveSubscriptions } from "@kan/shared/utils";
+
+import type { TierConfig } from "./_utils";
+import { tierConfig } from "./_utils";
+
+const log = createLogger("api");
+
+async function createAndLinkSlots(
+  db: dbClient,
+  licenseKey: string,
+  cfg: TierConfig,
+  tier: number,
+  alreadyLinkedReferenceIds: Set<string>,
+  count: number,
+) {
+  const linkedId = [...alreadyLinkedReferenceIds][0];
+  let autoLinked = 0;
+
+  if (linkedId) {
+    const linkedWorkspace = await workspaceRepo.getByPublicId(db, linkedId);
+
+    if (linkedWorkspace?.createdBy) {
+      const owned = await workspaceRepo.getAllOwnedByUserId(
+        db,
+        linkedWorkspace.createdBy,
+      );
+
+      const candidates = owned.filter(
+        (w) => !alreadyLinkedReferenceIds.has(w.publicId),
+      );
+
+      if (candidates.length > 0) {
+        const existingSubs =
+          await subscriptionRepo.getAllActivePartnerSubsByWorkspaceIds(
+            db,
+            candidates.map((w) => w.publicId),
+          );
+        const alreadySubscribed = new Set(
+          existingSubs
+            .map((s) => s.referenceId)
+            .filter((id): id is string => !!id),
+        );
+
+        const available = candidates
+          .filter((w) => !alreadySubscribed.has(w.publicId))
+          .slice(0, count);
+
+        if (available.length > 0) {
+          const newSlots = await subscriptionRepo.createPartnerLicenseSlots(
+            db,
+            licenseKey,
+            {
+              plan: cfg.plan,
+              status: "active",
+              partnerTier: tier,
+              seats: cfg.seats,
+              unlimitedSeats: cfg.unlimitedSeats,
+            },
+            available.length,
+          );
+
+          await Promise.all(
+            available.map((workspace, i) => {
+              const slot = newSlots[i];
+              if (!slot) return;
+              return Promise.all([
+                subscriptionRepo.updateById(db, slot.id, {
+                  referenceId: workspace.publicId,
+                }),
+                workspaceRepo.update(db, workspace.publicId, {
+                  plan: cfg.plan,
+                }),
+              ]);
+            }),
+          );
+
+          autoLinked = available.length;
+        }
+      }
+    }
+  }
+
+  const remaining = count - autoLinked;
+  if (remaining > 0) {
+    await subscriptionRepo.createPartnerLicenseSlots(
+      db,
+      licenseKey,
+      {
+        plan: cfg.plan,
+        status: "active",
+        partnerTier: tier,
+        seats: cfg.seats,
+        unlimitedSeats: cfg.unlimitedSeats,
+      },
+      remaining,
+    );
+  }
+}
+
+async function buffer(readable: Readable) {
+  const chunks: Buffer[] = [];
+  for await (const chunk of readable) {
+    chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
+  }
+  return Buffer.concat(chunks);
+}
+
+function verifySignature(
+  rawBody: string,
+  signature: string,
+  timestamp: string,
+): boolean {
+  const secret = process.env.PARTNER_API_KEY;
+  if (!secret) return false;
+
+  const ts = Number(timestamp);
+  if (isNaN(ts) || Date.now() - ts > 300_000) return false;
+
+  const payload = `${timestamp}${rawBody}`;
+  const expected = createHmac("sha256", secret).update(payload).digest("hex");
+
+  try {
+    return timingSafeEqual(Buffer.from(signature), Buffer.from(expected));
+  } catch {
+    return false;
+  }
+}
+
+function hasReferenceId<T extends { referenceId: string | null | undefined }>(
+  s: T,
+): s is T & { referenceId: string } {
+  return !!s.referenceId;
+}
+
+interface WebhookPayload {
+  event:
+    | "purchase"
+    | "activate"
+    | "deactivate"
+    | "upgrade"
+    | "downgrade"
+    | "migrate";
+  license_key: string;
+  license_status: string;
+  tier: number;
+  prev_license_key?: string;
+}
+
+export default withApiLogging(
+  async (req: NextApiRequest, res: NextApiResponse) => {
+    if (req.method !== "POST") {
+      return res.status(405).json({ message: "Method not allowed" });
+    }
+
+    const signatureHeader = process.env.PARTNER_SIGNATURE_HEADER;
+    const timestampHeader = process.env.PARTNER_TIMESTAMP_HEADER;
+
+    if (!signatureHeader || !timestampHeader) {
+      log.error("Webhook signature headers not configured");
+      return res.status(500).json({ message: "Server misconfiguration" });
+    }
+
+    const signature = req.headers[signatureHeader] as string | undefined;
+    const timestamp = req.headers[timestampHeader] as string | undefined;
+
+    if (!signature || !timestamp) {
+      return res.status(400).json({ message: "Missing signature headers" });
+    }
+
+    const buf = await buffer(req as unknown as Readable);
+    const rawBody = buf.toString("utf8");
+
+    if (!verifySignature(rawBody, signature, timestamp)) {
+      return res.status(401).json({ message: "Invalid signature" });
+    }
+
+    const payload = JSON.parse(rawBody) as WebhookPayload;
+    const { event, license_key, license_status, tier, prev_license_key } =
+      payload;
+
+    log.info({ headers: req.headers, payload }, "partner webhook received");
+
+    const { db } = await createNextApiContext(req);
+
+    switch (event) {
+      case "purchase":
+      case "activate": {
+        const cfg = tierConfig(tier);
+        const existing = await subscriptionRepo.getAllByPartnerLicenseKey(
+          db,
+          license_key,
+        );
+        const status = event === "activate" ? "active" : license_status;
+
+        if (existing.length === 0) {
+          await subscriptionRepo.createPartnerLicenseSlots(
+            db,
+            license_key,
+            {
+              plan: cfg.plan,
+              status,
+              partnerTier: tier,
+              seats: cfg.seats,
+              unlimitedSeats: cfg.unlimitedSeats,
+            },
+            cfg.workspaceSlots,
+          );
+        } else {
+          await subscriptionRepo.updateAllByPartnerLicenseKey(db, license_key, {
+            plan: cfg.plan,
+            status,
+            partnerTier: tier,
+            seats: cfg.seats,
+            unlimitedSeats: cfg.unlimitedSeats,
+          });
+        }
+        break;
+      }
+
+      case "deactivate": {
+        const allSlots = await subscriptionRepo.getAllByPartnerLicenseKey(
+          db,
+          license_key,
+        );
+
+        await Promise.all(
+          allSlots.filter(hasReferenceId).map(async (slot) => {
+            const siblingSubs = await subscriptionRepo.getByReferenceId(
+              db,
+              slot.referenceId,
+            );
+            const hasOtherActiveSub = getActiveSubscriptions(siblingSubs).some(
+              (s) => s.id !== slot.id,
+            );
+            if (!hasOtherActiveSub) {
+              await cancelWorkspaceAccess(db, slot.referenceId);
+            }
+          }),
+        );
+
+        await subscriptionRepo.updateAllByPartnerLicenseKey(db, license_key, {
+          plan: "free",
+          status: "canceled",
+          unlimitedSeats: false,
+          seats: null,
+        });
+
+        break;
+      }
+
+      case "upgrade":
+      case "downgrade": {
+        const lookupKey = prev_license_key ?? license_key;
+        const existing = await subscriptionRepo.getAllByPartnerLicenseKey(
+          db,
+          lookupKey,
+        );
+
+        if (existing.length === 0) break;
+
+        const cfg = tierConfig(tier);
+        const newCount = cfg.workspaceSlots;
+
+        // Prefer keeping linked slots; among linked, keep in insertion order (LIFO removal)
+        const preferKeep = [
+          ...existing.filter((s) => s.referenceId),
+          ...existing.filter((s) => !s.referenceId),
+        ];
+
+        const slotsToKeep = preferKeep.slice(0, newCount);
+        const slotsToRemove = preferKeep.slice(newCount);
+
+        await Promise.all([
+          ...slotsToKeep.map((slot) =>
+            subscriptionRepo.updateById(db, slot.id, {
+              plan: cfg.plan,
+              seats: cfg.seats,
+              unlimitedSeats: cfg.unlimitedSeats,
+              partnerTier: tier,
+              status: "active",
+              ...(prev_license_key ? { partnerLicenseKey: license_key } : {}),
+            }),
+          ),
+          ...slotsToKeep
+            .filter(hasReferenceId)
+            .map((s) =>
+              workspaceRepo.update(db, s.referenceId, { plan: cfg.plan }),
+            ),
+        ]);
+
+        if (newCount > existing.length) {
+          const linkedIds = new Set(
+            slotsToKeep.filter(hasReferenceId).map((s) => s.referenceId),
+          );
+          await createAndLinkSlots(
+            db,
+            license_key,
+            cfg,
+            tier,
+            linkedIds,
+            newCount - existing.length,
+          );
+        }
+
+        if (slotsToRemove.length > 0) {
+          await Promise.all([
+            ...slotsToRemove
+              .filter(hasReferenceId)
+              .map((s) => cancelWorkspaceAccess(db, s.referenceId)),
+            ...slotsToRemove.map((s) =>
+              subscriptionRepo.updateById(db, s.id, {
+                plan: "free",
+                status: "inactive",
+                unlimitedSeats: false,
+                seats: null,
+              }),
+            ),
+          ]);
+        }
+
+        break;
+      }
+
+      case "migrate": {
+        if (!prev_license_key) break;
+
+        const existing = await subscriptionRepo.getAllByPartnerLicenseKey(
+          db,
+          prev_license_key,
+        );
+        if (existing.length === 0) break;
+
+        const cfg = tierConfig(tier);
+        const newCount = cfg.workspaceSlots;
+
+        const preferKeep = [
+          ...existing.filter((s) => s.referenceId),
+          ...existing.filter((s) => !s.referenceId),
+        ];
+
+        const slotsToKeep = preferKeep.slice(0, newCount);
+        const slotsToRemove = preferKeep.slice(newCount);
+
+        await Promise.all([
+          ...slotsToKeep.map((slot) =>
+            subscriptionRepo.updateById(db, slot.id, {
+              partnerLicenseKey: license_key,
+              plan: cfg.plan,
+              status: "active",
+              partnerTier: tier,
+              seats: cfg.seats,
+              unlimitedSeats: cfg.unlimitedSeats,
+            }),
+          ),
+          ...slotsToKeep
+            .filter(hasReferenceId)
+            .map((s) =>
+              workspaceRepo.update(db, s.referenceId, { plan: cfg.plan }),
+            ),
+        ]);
+
+        if (newCount > existing.length) {
+          const linkedIds = new Set(
+            slotsToKeep.filter(hasReferenceId).map((s) => s.referenceId),
+          );
+          await createAndLinkSlots(
+            db,
+            license_key,
+            cfg,
+            tier,
+            linkedIds,
+            newCount - existing.length,
+          );
+        }
+
+        if (slotsToRemove.length > 0) {
+          await Promise.all([
+            ...slotsToRemove
+              .filter(hasReferenceId)
+              .map((s) => cancelWorkspaceAccess(db, s.referenceId)),
+            ...slotsToRemove.map((s) =>
+              subscriptionRepo.updateById(db, s.id, {
+                plan: "free",
+                status: "inactive",
+                unlimitedSeats: false,
+                seats: null,
+              }),
+            ),
+          ]);
+        }
+
+        break;
+      }
+
+      default:
+        log.warn({ event }, "Unhandled partner webhook event");
+    }
+
+    return res.status(200).json({ success: true, event });
+  },
+);
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};

apps/web/src/pages/api/stripe/create_billing_session.ts

@@ -2,34 +2,34 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { env } from "next-runtime-env";
 
 import { createNextApiContext } from "@kan/api/trpc";
-import { createStripeClient } from "@kan/stripe";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
+import { createStripeClient } from "@kan/stripe";
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
-  const stripe = createStripeClient();
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
+    const stripe = createStripeClient();
 
-  if (req.method !== "POST") {
-    return res.status(405).json({ error: "Method not allowed" });
-  }
-
-  try {
-    const { user } = await createNextApiContext(req);
-
-    if (!user?.stripeCustomerId) {
-      return res.status(404).json({ error: "No billing account found" });
+    if (req.method !== "POST") {
+      return res.status(405).json({ error: "Method not allowed" });
     }
 
-    const session = await stripe.billingPortal.sessions.create({
-      customer: user.stripeCustomerId,
-      return_url: `${env("NEXT_PUBLIC_BASE_URL")}/settings`,
-    });
+    try {
+      const { user } = await createNextApiContext(req);
 
-    return res.status(200).json({ url: session.url });
-  } catch (error) {
-    console.error("Error:", error);
-    return res.status(500).json({ error: "Error creating portal session" });
-  }
-  },
+      if (!user?.stripeCustomerId) {
+        return res.status(404).json({ error: "No billing account found" });
+      }
+
+      const session = await stripe.billingPortal.sessions.create({
+        customer: user.stripeCustomerId,
+        return_url: `${env("NEXT_PUBLIC_BASE_URL")}/settings`,
+      });
+
+      return res.status(200).json({ url: session.url });
+    } catch (error) {
+      return res.status(500).json({ error: "Error creating portal session" });
+    }
+  }),
 );

apps/web/src/pages/api/stripe/create_checkout_session.ts

@@ -3,10 +3,13 @@ import { env } from "next-runtime-env";
 import { z } from "zod";
 
 import { createNextApiContext } from "@kan/api/trpc";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
+import { assertPermission } from "@kan/api/utils/permissions";
+import { withRateLimit } from "@kan/api/utils/rateLimit";
 import * as subscriptionRepo from "@kan/db/repository/subscription.repo";
 import * as workspaceRepo from "@kan/db/repository/workspace.repo";
+import { generateUID } from "@kan/shared/utils";
 import { createStripeClient } from "@kan/stripe";
-import { withRateLimit } from "@kan/api/utils/rateLimit";
 
 const workspaceSlugSchema = z
   .string()
@@ -17,21 +20,24 @@ const workspaceSlugSchema = z
 interface CheckoutSessionRequest {
   successUrl: string;
   cancelUrl: string;
-  slug: string;
-  workspacePublicId: string;
-  stripeCustomerId: string;
+  plan: "team" | "pro";
+  billing?: string;
+  workspacePublicId?: string;
+  slug?: string;
+  workspaceName?: string;
+  workspaceDescription?: string;
+  workspaceSlug?: string;
 }
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
-  const stripe = createStripeClient();
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
+    const stripe = createStripeClient();
 
-  if (req.method !== "POST") {
-    return res.status(405).json({ error: "Method not allowed" });
-  }
+    if (req.method !== "POST") {
+      return res.status(405).json({ error: "Method not allowed" });
+    }
 
-  try {
     const { user, db } = await createNextApiContext(req);
 
     if (!user) {
@@ -39,81 +45,107 @@ export default withRateLimit(
     }
 
     const body = req.body as CheckoutSessionRequest;
-    const { successUrl, cancelUrl, slug, workspacePublicId } = body;
+    const {
+      successUrl,
+      cancelUrl,
+      plan,
+      billing,
+      workspacePublicId,
+      slug,
+      workspaceName,
+      workspaceDescription,
+      workspaceSlug,
+    } = body;
 
-    if (!successUrl || !cancelUrl || !workspacePublicId) {
+    if (!successUrl || !cancelUrl || !plan) {
       return res.status(400).json({ error: "Missing required fields" });
     }
 
-    if (slug) {
-      const slugResult = workspaceSlugSchema.safeParse(slug);
+    if (!workspacePublicId && !workspaceName) {
+      return res
+        .status(400)
+        .json({ error: "Must provide workspacePublicId or workspaceName" });
+    }
 
+    const resolvedSlug = slug ?? workspaceSlug;
+
+    if (resolvedSlug) {
+      const slugResult = workspaceSlugSchema.safeParse(resolvedSlug);
       if (!slugResult.success) {
-        return new Response(
-          JSON.stringify({ error: "Invalid workspace slug" }),
-          {
-            status: 400,
-            headers: { "Content-Type": "application/json" },
-          },
-        );
+        return res.status(400).json({ error: "Invalid workspace slug" });
       }
     }
 
-    const workspace = await workspaceRepo.getAllByUserId(db, user.id);
+    let resolvedWorkspacePublicId = workspacePublicId;
+    let subscriptionId: number | undefined;
 
-    const isMemberOfWorkspace = workspace.some(
-      ({ workspace }) => workspace.publicId === body.workspacePublicId,
-    );
+    if (workspacePublicId) {
+      // Existing workspace upgrade
+      const workspace = await workspaceRepo.getByPublicId(
+        db,
+        workspacePublicId,
+      );
 
-    if (!isMemberOfWorkspace) {
-      return new Response(JSON.stringify({ error: "Unauthorized" }), {
-        status: 403,
-        headers: { "Content-Type": "application/json" },
+      if (!workspace) {
+        return res.status(404).json({ error: "Workspace not found" });
+      }
+
+      try {
+        await assertPermission(db, user.id, workspace.id, "workspace:manage");
+      } catch {
+        return res.status(403).json({ error: "Unauthorized" });
+      }
+
+      const subscription = await subscriptionRepo.create(db, {
+        plan: plan,
+        referenceId: workspacePublicId,
+        userId: user.id,
+        stripeCustomerId: user.stripeCustomerId ?? "",
+        status: "incomplete",
       });
+
+      subscriptionId = subscription?.id;
+
+      if (!subscriptionId) {
+        return res.status(500).json({ error: "Error creating subscription" });
+      }
+    } else {
+      resolvedWorkspacePublicId = generateUID();
     }
 
-    const subscription = await subscriptionRepo.create(db, {
-      plan: "pro",
-      referenceId: workspacePublicId,
-      userId: user.id,
-      stripeCustomerId: user.stripeCustomerId ?? "",
-      status: "incomplete",
-    });
-
-    const subscriptionId = subscription?.id;
-
-    if (!subscriptionId) {
-      return res.status(500).json({ error: "Error creating subscription" });
-    }
+    const isTeam = body.plan === "team";
+    const annualPriceId = isTeam
+      ? (process.env.STRIPE_TEAM_PLAN_YEARLY_PRICE_ID ??
+        process.env.STRIPE_TEAM_PLAN_MONTHLY_PRICE_ID)
+      : (process.env.STRIPE_PRO_PLAN_YEARLY_PRICE_ID ??
+        process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID);
+    const monthlyPriceId = isTeam
+      ? process.env.STRIPE_TEAM_PLAN_MONTHLY_PRICE_ID
+      : process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID;
+    const priceId = billing === "annual" ? annualPriceId : monthlyPriceId;
 
     const session = await stripe.checkout.sessions.create({
       mode: "subscription",
       payment_method_collection: "always",
-      line_items: [
-        {
-          price: process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID,
-          quantity: 1,
-        },
-      ],
-      subscription_data: {
-        trial_period_days: 14,
-      },
-      success_url: `${env("NEXT_PUBLIC_BASE_URL")}${successUrl}`,
+      line_items: [{ price: priceId, quantity: 1 }],
+      subscription_data: { trial_period_days: 14 },
+      success_url: `${env("NEXT_PUBLIC_BASE_URL")}${successUrl}?workspacePublicId=${resolvedWorkspacePublicId}`,
       cancel_url: `${env("NEXT_PUBLIC_BASE_URL")}${cancelUrl}`,
-      client_reference_id: workspacePublicId,
+      client_reference_id: resolvedWorkspacePublicId,
       customer: user.stripeCustomerId ?? undefined,
       metadata: {
-        ...(slug && { workspaceSlug: slug }),
-        workspacePublicId,
+        workspacePublicId: resolvedWorkspacePublicId!,
         userId: user.id,
-        subscriptionId,
+        userEmail: user.email ?? "",
+        ...(resolvedSlug && { workspaceSlug: resolvedSlug }),
+        ...(workspaceName && { workspaceName }),
+        ...(workspaceDescription && { workspaceDescription }),
+        ...(subscriptionId && { subscriptionId: String(subscriptionId) }),
+        plan: plan,
+        isNewWorkspace: workspaceName ? "true" : "false",
       },
     });
 
     return res.status(200).json({ url: session.url });
-  } catch (error) {
-    console.error("Error:", error);
-    return res.status(500).json({ error: "Error creating checkout session" });
-  }
-  },
+  }),
 );

apps/web/src/pages/api/stripe/webhook.ts

@@ -1,12 +1,14 @@
+import { randomUUID } from "crypto";
 import type { NextApiRequest, NextApiResponse } from "next";
 import type { Readable } from "node:stream";
 
 import { createNextApiContext } from "@kan/api/trpc";
+import * as subscriptionRepo from "@kan/db/repository/subscription.repo";
 import * as workspaceRepo from "@kan/db/repository/workspace.repo";
 import { createLogger } from "@kan/logger";
 import { createStripeClient } from "@kan/stripe";
 
-const log = createLogger("stripe-webhook");
+const log = createLogger("api");
 
 async function buffer(readable: Readable) {
   const chunks = [];
@@ -21,6 +23,9 @@ export default async function handler(
   res: NextApiResponse,
 ) {
   const stripe = createStripeClient();
+  const start = Date.now();
+  const requestId = randomUUID();
+  const procedure = req.url?.split("?")[0] ?? "/api/stripe/webhook";
 
   if (req.method !== "POST") {
     return res.status(405).json({ message: "Method not allowed" });
@@ -44,29 +49,88 @@ export default async function handler(
 
     const { db } = await createNextApiContext(req);
 
-    log.info({ eventType: event.type, eventId: event.id }, "Stripe webhook received");
-
     switch (event.type) {
       case "checkout.session.completed": {
         const checkoutSession = event.data.object;
+        const meta = checkoutSession.metadata;
 
-        const metaData = checkoutSession.metadata;
+        if (!meta?.workspacePublicId) break;
 
-        if (metaData?.workspacePublicId) {
-          await workspaceRepo.update(db, metaData.workspacePublicId, {
-            ...(metaData.workspaceSlug && { slug: metaData.workspaceSlug }),
-            plan: "pro",
+        const plan = meta.plan === "team" ? "team" : ("pro" as const);
+
+        if (
+          meta.isNewWorkspace === "true" &&
+          meta.workspaceName &&
+          meta.userId &&
+          meta.userEmail
+        ) {
+          const existing = await workspaceRepo.getByPublicId(
+            db,
+            meta.workspacePublicId,
+          );
+
+          if (!existing) {
+            const slug = meta.workspaceSlug ?? meta.workspacePublicId;
+
+            await workspaceRepo.create(db, {
+              publicId: meta.workspacePublicId,
+              name: meta.workspaceName,
+              slug,
+              plan,
+              createdBy: meta.userId,
+              createdByEmail: meta.userEmail,
+              ...(meta.workspaceDescription && {
+                description: meta.workspaceDescription,
+              }),
+            });
+
+            await subscriptionRepo.create(db, {
+              plan,
+              referenceId: meta.workspacePublicId,
+              userId: meta.userId,
+              stripeCustomerId: checkoutSession.customer as string,
+              status: "active",
+            });
+          }
+        } else {
+          await workspaceRepo.update(db, meta.workspacePublicId, {
+            plan,
+            ...(plan === "pro" &&
+              meta.workspaceSlug && { slug: meta.workspaceSlug }),
           });
         }
+
         break;
       }
       default:
         log.warn({ eventType: event.type }, "Unhandled Stripe event type");
     }
 
+    log.info(
+      {
+        requestId,
+        procedure,
+        transport: "rest",
+        duration: Date.now() - start,
+        status: 200,
+        input: { eventType: event.type, eventId: event.id },
+      },
+      "API OK",
+    );
+
     return res.status(200).json({ received: true });
   } catch (err) {
-    log.error({ err }, "Stripe webhook handler failed");
+    log.error(
+      {
+        requestId,
+        procedure,
+        transport: "rest",
+        duration: Date.now() - start,
+        status: 400,
+        err,
+      },
+      "API error",
+    );
     return res.status(400).json({ message: "Webhook handler failed" });
   }
 }

apps/web/src/pages/api/trello/authenticate.ts

@@ -1,52 +1,58 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import { addYears } from "date-fns";
 
 import { createNextApiContext } from "@kan/api/trpc";
-import { integrations } from "@kan/db/schema";
-import { addYears } from "date-fns";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
+import { integrations } from "@kan/db/schema";
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
-  if (req.method !== "POST") {
-    return res.status(405).json({ message: "Method not allowed" });
-  }
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
+    if (req.method !== "POST") {
+      return res.status(405).json({ message: "Method not allowed" });
+    }
 
-  const { user } = await createNextApiContext(req);
+    const { user } = await createNextApiContext(req);
 
-  if (!user)
-    return res.status(401).json({ message: "User not authenticated" });
+    if (!user)
+      return res.status(401).json({ message: "User not authenticated" });
 
-  const apiKey = process.env.TRELLO_APP_API_KEY;
+    const apiKey = process.env.TRELLO_APP_API_KEY;
 
-  if (!apiKey)
-    return res.status(500).json({ message: "Trello API key not set in Environment Variables" });
+    if (!apiKey)
+      return res
+        .status(500)
+        .json({ message: "Trello API key not set in Environment Variables" });
 
-  const token = req.body.token;
+    const token = req.body.token;
 
-  if (!token)
-    return res.status(400).json({ message: "No token found" });
+    if (!token) return res.status(400).json({ message: "No token found" });
 
-  try {
-    const { db } = await createNextApiContext(req);
+    try {
+      const { db } = await createNextApiContext(req);
 
-    await db.insert(integrations).values({
-      provider: "trello",
-      userId: user.id,
-      accessToken: token,
-      expiresAt: addYears(new Date(), 1),
-    }).onConflictDoUpdate({
-      set: {
-        accessToken: token,
-        expiresAt: addYears(new Date(), 1),
-      },
-      target: [integrations.userId, integrations.provider],
-    });
+      await db
+        .insert(integrations)
+        .values({
+          provider: "trello",
+          userId: user.id,
+          accessToken: token,
+          expiresAt: addYears(new Date(), 1),
+        })
+        .onConflictDoUpdate({
+          set: {
+            accessToken: token,
+            expiresAt: addYears(new Date(), 1),
+          },
+          target: [integrations.userId, integrations.provider],
+        });
 
-    return res.status(200).json({ message: "Trello authentication successful" });
-  } catch (err) {
-    console.error("Trello authentication error:", err);
-    return res.status(400).json({ message: "Trello authentication failed" });
-  }
-  },
-);
+      return res
+        .status(200)
+        .json({ message: "Trello authentication successful" });
+    } catch (err) {
+      return res.status(400).json({ message: "Trello authentication failed" });
+    }
+  }),
+);

apps/web/src/pages/api/unsubscribe.ts

@@ -1,105 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { Novu } from "@novu/api";
-import { jwtVerify } from "jose";
-import { z } from "zod";
-
-import { env } from "~/env";
-import { withRateLimit } from "@kan/api/utils/rateLimit";
-
-const requestSchema = z.object({
-  token: z.string().min(1),
-});
-
-const tokenPayloadSchema = z.object({
-  subscriberId: z.string(),
-});
-
-type ResponseData =
-  | { success: true }
-  | { success: false; error: string; code?: string };
-
-const textEncoder = new TextEncoder();
-
-export default withRateLimit(
-  { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse<ResponseData>) => {
-  if (process.env.NEXT_PUBLIC_KAN_ENV !== "cloud") {
-    return res.status(404).json({
-      success: false,
-      error: "Unsubscribe endpoint is not available.",
-      code: "UNAVAILABLE",
-    });
-  }
-
-  if (req.method !== "POST") {
-    res.setHeader("Allow", "POST");
-    return res.status(405).json({
-      success: false,
-      error: "Method not allowed.",
-      code: "METHOD_NOT_ALLOWED",
-    });
-  }
-
-  const parsedBody = requestSchema.safeParse(req.body);
-
-  if (!parsedBody.success) {
-    return res.status(400).json({
-      success: false,
-      error: "Invalid request payload.",
-      code: "BAD_REQUEST",
-    });
-  }
-
-  if (!env.EMAIL_UNSUBSCRIBE_SECRET || !env.NOVU_API_KEY) {
-    return res.status(500).json({
-      success: false,
-      error: "Unsubscribe service is not configured.",
-      code: "NOT_CONFIGURED",
-    });
-  }
-
-  let payload: z.infer<typeof tokenPayloadSchema>;
-
-  try {
-    const verified = await jwtVerify(
-      parsedBody.data.token,
-      textEncoder.encode(env.EMAIL_UNSUBSCRIBE_SECRET),
-      {
-        // We intentionally do not use exp/iat claims –
-        // tokens are long-lived and validated only by signature + payload.
-        clockTolerance: "0s",
-      },
-    );
-    payload = tokenPayloadSchema.parse(verified.payload);
-  } catch {
-    return res.status(401).json({
-      success: false,
-      error: "Your unsubscribe link is invalid or has expired.",
-      code: "INVALID_TOKEN",
-    });
-  }
-
-  const novu = new Novu({ secretKey: env.NOVU_API_KEY });
-
-  try {
-    await novu.subscribers.preferences.update(
-      {
-        channels: {
-          email: false,
-        },
-      },
-      payload.subscriberId,
-    );
-  } catch (error) {
-    console.error("Failed to update Novu preferences", error);
-    return res.status(502).json({
-      success: false,
-      error:
-        "We could not update your email preferences right now. Please try again later.",
-      code: "NOVU_ERROR",
-    });
-  }
-
-  return res.status(200).json({ success: true });
-  },
-);

apps/web/src/pages/api/upload/attachment.ts

@@ -2,6 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { Upload } from "@aws-sdk/lib-storage";
 
 import { createNextApiContext } from "@kan/api/trpc";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { assertPermission } from "@kan/api/utils/permissions";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
 import * as cardRepo from "@kan/db/repository/card.repo";
@@ -22,7 +23,7 @@ export const config = {
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
     if (req.method !== "POST") {
       return res.status(405).json({ error: "Method not allowed" });
     }
@@ -36,7 +37,9 @@ export default withRateLimit(
 
       const bucket = env.NEXT_PUBLIC_ATTACHMENTS_BUCKET_NAME;
       if (!bucket) {
-        return res.status(500).json({ error: "Attachments bucket not configured" });
+        return res
+          .status(500)
+          .json({ error: "Attachments bucket not configured" });
       }
 
       const cardPublicId = req.query.cardPublicId;
@@ -55,15 +58,24 @@ export default withRateLimit(
       }
 
       if (!Number.isFinite(contentLength) || contentLength <= 0) {
-        return res.status(400).json({ error: "Missing or invalid content length" });
+        return res
+          .status(400)
+          .json({ error: "Missing or invalid content length" });
       }
 
       if (contentLength > MAX_SIZE_BYTES) {
         return res.status(400).json({ error: "File too large" });
       }
 
-      const originalFilenameHeader =
+      const rawFilenameHeader =
         (req.headers["x-original-filename"] as string | undefined) ?? "file";
+      const originalFilenameHeader = (() => {
+        try {
+          return decodeURIComponent(rawFilenameHeader);
+        } catch {
+          return rawFilenameHeader;
+        }
+      })();
 
       const sanitizedFilename = originalFilenameHeader
         .replace(/[^a-zA-Z0-9._-]/g, "_")
@@ -129,8 +141,7 @@ export default withRateLimit(
 
       return res.status(200).json({ attachment });
     } catch (error) {
-      console.error("Attachment upload failed", error);
       return res.status(500).json({ error: "Internal server error" });
     }
-  },
+  }),
 );

apps/web/src/pages/api/upload/avatar.ts

@@ -2,13 +2,17 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { PutObjectCommand } from "@aws-sdk/client-s3";
 
 import { createNextApiContext } from "@kan/api/trpc";
-import * as userRepo from "@kan/db/repository/user.repo";
-
-import { env } from "~/env";
+import { withApiLogging } from "@kan/api/utils/apiLogging";
 import { withRateLimit } from "@kan/api/utils/rateLimit";
+import * as userRepo from "@kan/db/repository/user.repo";
 import { createS3Client } from "@kan/shared/utils";
 
-const MAX_SIZE_BYTES = parseInt(process.env.S3_AVATAR_UPLOAD_LIMIT || '2097152', 10); // Default 2MB
+import { env } from "~/env";
+
+const MAX_SIZE_BYTES = parseInt(
+  process.env.S3_AVATAR_UPLOAD_LIMIT || "2097152",
+  10,
+); // Default 2MB
 const allowedContentTypes = ["image/jpeg", "image/png", "image/webp"];
 
 export const config = {
@@ -19,7 +23,7 @@ export const config = {
 
 export default withRateLimit(
   { points: 100, duration: 60 },
-  async (req: NextApiRequest, res: NextApiResponse) => {
+  withApiLogging(async (req: NextApiRequest, res: NextApiResponse) => {
     if (req.method !== "POST") {
       return res.status(405).json({ error: "Method not allowed" });
     }
@@ -51,15 +55,24 @@ export default withRateLimit(
       }
 
       if (!Number.isFinite(contentLength) || contentLength <= 0) {
-        return res.status(400).json({ error: "Missing or invalid content length" });
+        return res
+          .status(400)
+          .json({ error: "Missing or invalid content length" });
       }
 
       if (contentLength > MAX_SIZE_BYTES) {
         return res.status(400).json({ error: "File too large" });
       }
 
-      const originalFilenameHeader =
+      const rawFilenameHeader =
         (req.headers["x-original-filename"] as string | undefined) ?? "file";
+      const originalFilenameHeader = (() => {
+        try {
+          return decodeURIComponent(rawFilenameHeader);
+        } catch {
+          return rawFilenameHeader;
+        }
+      })();
 
       const sanitizedFilename = originalFilenameHeader
         .replace(/[^a-zA-Z0-9._-]/g, "_")
@@ -93,9 +106,7 @@ export default withRateLimit(
         user: updatedUser,
       });
     } catch (error) {
-      console.error("Avatar upload failed", error);
       return res.status(500).json({ error: "Internal server error" });
     }
-  },
+  }),
 );
-

apps/web/src/pages/onboarding/select-plan.tsx

@@ -0,0 +1,31 @@
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { env } from "next-runtime-env";
+
+import { authClient } from "@kan/auth/client";
+
+import { PageHead } from "~/components/PageHead";
+import SelectPlanView from "~/views/onboarding/select-plan";
+
+export default function SelectPlanPage() {
+  const router = useRouter();
+  const { data: session, isPending } = authClient.useSession();
+
+  useEffect(() => {
+    if (!isPending && !session?.user) {
+      router.push("/login");
+    }
+    if (!isPending && env("NEXT_PUBLIC_KAN_ENV") !== "cloud") {
+      router.push("/boards");
+    }
+  }, [session, isPending, router]);
+
+  if (isPending || !session?.user) return null;
+
+  return (
+    <>
+      <PageHead title="Select plan | kan.bn" />
+      <SelectPlanView />
+    </>
+  );
+}

apps/web/src/pages/onboarding/workspace.tsx

@@ -0,0 +1,28 @@
+import { useRouter } from "next/navigation";
+import { env } from "next-runtime-env";
+import { useEffect } from "react";
+
+import { authClient } from "@kan/auth/client";
+
+import { PageHead } from "~/components/PageHead";
+import WorkspaceDetailsView from "~/views/onboarding/workspace-details";
+
+export default function WorkspaceDetailsPage() {
+  const router = useRouter();
+  const { data: session, isPending } = authClient.useSession();
+
+  useEffect(() => {
+    if (!isPending && !session?.user) router.push("/login");
+    if (!isPending && env("NEXT_PUBLIC_KAN_ENV") !== "cloud")
+      router.push("/boards");
+  }, [session, isPending, router]);
+
+  if (isPending || !session?.user) return null;
+
+  return (
+    <>
+      <PageHead title="Create workspace | kan.bn" />
+      <WorkspaceDetailsView />
+    </>
+  );
+}

apps/web/src/pages/partner/activate.tsx

@@ -0,0 +1,117 @@
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { env } from "next-runtime-env";
+import { useEffect, useState } from "react";
+
+import { authClient } from "@kan/auth/client";
+
+import { Auth } from "~/components/AuthForm";
+import { PageHead } from "~/components/PageHead";
+import PatternedBackground from "~/components/PatternedBackground";
+
+export default function PartnerActivatePage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const licenseKey = searchParams.get("license_key");
+  const error = searchParams.get("error");
+
+  const partnerName = env("NEXT_PUBLIC_PARTNER_NAME");
+
+  const { data: session, isPending } = authClient.useSession();
+  const [isMagicLinkSent, setIsMagicLinkSent] = useState(false);
+  const [magicLinkRecipient, setMagicLinkRecipient] = useState("");
+
+  useEffect(() => {
+    if (licenseKey) {
+      localStorage.setItem("partnerLicenseKey", licenseKey);
+    }
+  }, [licenseKey]);
+
+  useEffect(() => {
+    if (!isPending && session?.user && licenseKey) {
+      router.push(
+        `/api/partner/link?license_key=${encodeURIComponent(licenseKey)}`,
+      );
+    } else if (!isPending && session?.user && !licenseKey) {
+      router.push("/boards");
+    }
+  }, [session, isPending, licenseKey, router]);
+
+  if (isPending || (session?.user && licenseKey)) return null;
+
+  return (
+    <>
+      <PageHead title={t`Activate | kan.bn`} />
+      <main className="h-screen bg-light-100 pt-20 dark:bg-dark-50 sm:pt-0">
+        <div className="justify-top flex h-full flex-col items-center px-4 sm:justify-center">
+          <div className="z-10 flex w-full flex-col items-center">
+            <Link href="/">
+              <h1 className="mb-6 text-lg font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+                kan.bn
+              </h1>
+            </Link>
+            <p className="mb-2 text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+              {isMagicLinkSent ? t`Check your inbox` : t`Activate your account`}
+            </p>
+            <p className="mb-10 text-sm text-light-800 dark:text-dark-800">
+              {isMagicLinkSent ? (
+                <Trans>We sent a link to {magicLinkRecipient}</Trans>
+              ) : partnerName ? (
+                <Trans>
+                  Sign in or create an account to activate your {partnerName}{" "}
+                  license
+                </Trans>
+              ) : (
+                t`Sign in or create an account to activate your license`
+              )}
+            </p>
+
+            {error && (
+              <div className="mb-4 w-full rounded-md bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-400 sm:max-w-md">
+                {t`Something went wrong during activation. Please try again.`}
+              </div>
+            )}
+
+            {!isMagicLinkSent && (
+              <div className="w-full rounded-lg border border-light-500 bg-light-300 px-4 py-10 dark:border-dark-400 dark:bg-dark-200 sm:max-w-md lg:px-10">
+                <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+                  <Auth
+                    setIsMagicLinkSent={(val, recipient) => {
+                      setIsMagicLinkSent(val);
+                      setMagicLinkRecipient(recipient);
+                    }}
+                    callbackURL={
+                      licenseKey
+                        ? `/api/partner/link?license_key=${encodeURIComponent(licenseKey)}`
+                        : "/boards"
+                    }
+                  />
+                </div>
+              </div>
+            )}
+
+            <p className="mt-4 text-sm text-light-1000 dark:text-dark-1000">
+              <Trans>
+                Already have an account?{" "}
+                <span className="underline">
+                  <Link
+                    href={
+                      licenseKey
+                        ? `/login?next=${encodeURIComponent(`/api/partner/link?license_key=${licenseKey}`)}`
+                        : "/login"
+                    }
+                  >
+                    Sign in
+                  </Link>
+                </span>
+              </Trans>
+            </p>
+          </div>
+          <PatternedBackground />
+        </div>
+      </main>
+    </>
+  );
+}

apps/web/src/pages/unsubscribe/index.tsx

@@ -1,110 +0,0 @@
-import { useRouter } from "next/router";
-import { t } from "@lingui/core/macro";
-import { useEffect, useState } from "react";
-
-import Button from "~/components/Button";
-import { PageHead } from "~/components/PageHead";
-import PatternedBackground from "~/components/PatternedBackground";
-
-type UnsubscribeStatus = "idle" | "processing" | "success" | "error";
-
-export default function UnsubscribePage() {
-  const router = useRouter();
-  const [token, setToken] = useState("");
-  const [status, setStatus] = useState<UnsubscribeStatus>("idle");
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!router.isReady) return;
-    const value = router.query.token;
-    if (typeof value === "string") {
-      setToken(value);
-    } else if (Array.isArray(value)) {
-      setToken(value[0] ?? "");
-    } else {
-      setToken("");
-    }
-  }, [router.isReady, router.query.token]);
-
-  const handleUnsubscribe = async () => {
-    if (!token) {
-      setStatus("error");
-      setErrorMessage(
-        t`Your unsubscribe link is missing a token. Please open the latest email and try again.`,
-      );
-      return;
-    }
-
-    setStatus("processing");
-    setErrorMessage(null);
-
-    try {
-      const response = await fetch("/api/unsubscribe", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ token }),
-      });
-
-      if (!response.ok) {
-        const payload = (await response.json().catch(() => null)) as {
-          error?: string;
-        } | null;
-
-        throw new Error(
-          payload?.error ??
-            "We couldn't update your preferences. Please try again.",
-        );
-      }
-
-      setStatus("success");
-    } catch (error) {
-      setStatus("error");
-      setErrorMessage(
-        t`We couldn't update your preferences. Please try again.`,
-      );
-    }
-  };
-
-  const title = t`Unsubscribe`;
-
-  return (
-    <>
-      <PageHead title={`${title} | kan.bn`} />
-      <div className="relative flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
-        <PatternedBackground />
-        <div className="z-10 w-full max-w-md space-y-6">
-          <div>
-            <h1 className="mt-6 text-center text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
-              {t`Do you want to unsubscribe?`}
-            </h1>
-            <p className="mt-4 text-center text-sm text-light-900 dark:text-dark-800">
-              {t`Confirm your email preferences:`}
-            </p>
-          </div>
-
-          <div className="flex justify-center">
-            <Button
-              onClick={handleUnsubscribe}
-              disabled={status === "success"}
-              isLoading={status === "processing"}
-              variant="primary"
-              size="md"
-            >
-              {t`Unsubscribe`}
-            </Button>
-          </div>
-          {status === "success" && (
-            <p className="text-center text-sm text-light-900 dark:text-dark-800">
-              {t`You have been unsubscribed!`}
-            </p>
-          )}
-          {status === "error" && (
-            <p className="mx-auto max-w-[300px] text-center text-sm font-medium text-red-600 dark:text-red-400">
-              {errorMessage}
-            </p>
-          )}
-        </div>
-      </div>
-    </>
-  );
-}

apps/web/src/pages/upgrade/select-plan.tsx

@@ -0,0 +1,31 @@
+import { useRouter } from "next/navigation";
+import { env } from "next-runtime-env";
+import { useEffect } from "react";
+
+import { authClient } from "@kan/auth/client";
+
+import { PageHead } from "~/components/PageHead";
+import SelectPlanView from "~/views/onboarding/select-plan";
+
+export default function UpgradeSelectPlanPage() {
+  const router = useRouter();
+  const { data: session, isPending } = authClient.useSession();
+
+  useEffect(() => {
+    if (!isPending && !session?.user) {
+      router.push("/login");
+    }
+    if (!isPending && env("NEXT_PUBLIC_KAN_ENV") !== "cloud") {
+      router.push("/boards");
+    }
+  }, [session, isPending, router]);
+
+  if (isPending || !session?.user) return null;
+
+  return (
+    <>
+      <PageHead title="Upgrade | kan.bn" />
+      <SelectPlanView />
+    </>
+  );
+}

apps/web/src/providers/font-size.tsx

@@ -0,0 +1,57 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+export type FontSize = "small" | "medium" | "large";
+
+const fontSizeMap: Record<FontSize, string> = {
+  small: "14px",
+  medium: "16px",
+  large: "18px",
+};
+
+interface FontSizeContextProps {
+  fontSize: FontSize;
+  setFontSize: (size: FontSize) => void;
+}
+
+const FontSizeContext = createContext<FontSizeContextProps | undefined>(
+  undefined,
+);
+
+export const FontSizeProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [fontSize, setFontSizeState] = useState<FontSize>("medium");
+
+  const setFontSize = (size: FontSize) => {
+    document.documentElement.style.fontSize = fontSizeMap[size];
+    localStorage.setItem("fontSize", size);
+    setFontSizeState(size);
+  };
+
+  useEffect(() => {
+    const stored = localStorage.getItem("fontSize") as FontSize | null;
+    const size = stored && fontSizeMap[stored] ? stored : "medium";
+    document.documentElement.style.fontSize = fontSizeMap[size];
+    setFontSizeState(size);
+  }, []);
+
+  return (
+    <FontSizeContext.Provider value={{ fontSize, setFontSize }}>
+      {children}
+    </FontSizeContext.Provider>
+  );
+};
+
+export const useFontSize = (): FontSizeContextProps => {
+  const context = useContext(FontSizeContext);
+  if (!context) {
+    throw new Error("useFontSize must be used within a FontSizeProvider");
+  }
+  return context;
+};

apps/web/src/providers/keyboard-shortcuts.tsx

@@ -20,6 +20,7 @@ import { HiXMark } from "react-icons/hi2";
 
 import { env } from "~/env";
 import { useEventListener } from "~/hooks/useEventListener";
+import { useLinguiContext } from "~/providers/lingui";
 
 const ModifierKey = {
   CONTROL: "CONTROL",
@@ -160,6 +161,7 @@ export function KeyboardShortcutProvider({
   const sequenceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const [isLegendOpen, setIsLegendOpen] = useState(false);
+  const { locale } = useLinguiContext();
 
   const openLegendShortcut: KeyboardShortcut = useMemo(
     () => ({
@@ -172,7 +174,7 @@ export function KeyboardShortcutProvider({
       description: t`Open keyboard shortcuts`,
       group: ShortcutGroup.GENERAL,
     }),
-    [setIsLegendOpen],
+    [locale],
   );
 
   const handleKeyDown = useCallback((event: KeyboardEvent) => {

apps/web/src/providers/lingui.tsx

@@ -35,10 +35,31 @@ function detectBrowserLocale(availableLocales: readonly string[]): Locale {
   const browserLanguages = navigator.languages || [navigator.language];
 
   for (const browserLang of browserLanguages) {
-    const langCode = browserLang.split("-")[0];
+    const normalizedLocale = browserLang.toLowerCase();
+    const exactLocale = availableLocales.find(
+      (availableLocale) => availableLocale.toLowerCase() === normalizedLocale,
+    );
 
-    if (langCode && availableLocales.includes(langCode.toLowerCase())) {
-      return langCode.toLowerCase() as Locale;
+    if (exactLocale) {
+      return exactLocale as Locale;
+    }
+
+    const languageCode = normalizedLocale.split("-")[0];
+
+    if (languageCode === "zh" && availableLocales.includes("zh-CN")) {
+      return "zh-CN";
+    }
+
+    if (languageCode === "pt" && availableLocales.includes("ptbr")) {
+      return "ptbr";
+    }
+
+    const baseLocale = availableLocales.find(
+      (availableLocale) => availableLocale.toLowerCase() === languageCode,
+    );
+
+    if (baseLocale) {
+      return baseLocale as Locale;
     }
   }
 
@@ -49,7 +70,7 @@ export function LinguiProviderWrapper({
   children,
   initialLocale = defaultLocale,
 }: LinguiProviderProps) {
-  const [locale, setLocale] = useState<Locale>(defaultLocale);
+  const [locale, setLocale] = useState<Locale>(initialLocale);
   const [isHydrated, setIsHydrated] = useState(false);
 
   initializeI18n();

apps/web/src/providers/popup.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useState } from "react";
 
 interface PopupContextType {
   isOpen: boolean;
@@ -25,24 +25,27 @@ export const PopupProvider: React.FC<Props> = ({ children }) => {
   const [popupMessage, setPopupMessage] = useState("");
   const [popupIcon, setPopupIcon] = useState("");
 
-  const showPopup = ({
-    header,
-    message,
-    icon,
-  }: {
-    header: string;
-    message: string;
-    icon: string;
-  }) => {
-    setIsOpen(true);
-    setPopupHeader(header);
-    setPopupMessage(message);
-    setPopupIcon(icon);
-  };
+  const showPopup = useCallback(
+    ({
+      header,
+      message,
+      icon,
+    }: {
+      header: string;
+      message: string;
+      icon: string;
+    }) => {
+      setIsOpen(true);
+      setPopupHeader(header);
+      setPopupMessage(message);
+      setPopupIcon(icon);
+    },
+    [],
+  );
 
-  const hidePopup = () => {
+  const hidePopup = useCallback(() => {
     setIsOpen(false);
-  };
+  }, []);
 
   return (
     <PopupContext.Provider

apps/web/src/providers/workspace.tsx

@@ -17,9 +17,10 @@ interface Workspace {
   description: string | null | undefined;
   publicId: string;
   slug: string | undefined;
-  plan: "free" | "pro" | "enterprise" | undefined;
+  plan: "free" | "team" | "pro" | "enterprise" | undefined;
   role: "admin" | "member" | "guest";
   weekStartDay: 0 | 1 | 6;
+  cardPrefix: string;
 }
 
 const initialWorkspace: Workspace = {
@@ -27,9 +28,10 @@ const initialWorkspace: Workspace = {
   description: null,
   publicId: "",
   slug: "",
-  plan: "free",
+  plan: "free" as const,
   role: "member",
   weekStartDay: 1,
+  cardPrefix: "",
 };
 
 const initialAvailableWorkspaces: Workspace[] = [];
@@ -50,7 +52,18 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
 
   const workspacePublicId = useSearchParams().get("workspacePublicId");
 
-  const { data, isLoading } = api.workspace.all.useQuery();
+  const [pendingWorkspaceId, setPendingWorkspaceId] = useState<string | null>(
+    workspacePublicId,
+  );
+  const pollAttemptsRef = React.useRef(0);
+  const MAX_POLL_ATTEMPTS = 5;
+
+  const { data, isLoading, isFetching } = api.workspace.all.useQuery(
+    undefined,
+    {
+      refetchInterval: pendingWorkspaceId ? 2000 : false,
+    },
+  );
   const utils = api.useUtils();
 
   const switchWorkspace = (_workspace: Workspace) => {
@@ -66,7 +79,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
 
   useEffect(() => {
     if (!data?.length) {
-      if (!isLoading) setHasLoaded(true);
+      if (!isLoading && !isFetching) setHasLoaded(true);
       return;
     }
 
@@ -82,6 +95,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
         description: workspace.description,
         plan: workspace.plan,
         weekStartDay: workspace.weekStartDay,
+        cardPrefix: workspace.cardPrefix,
         hasLoaded: true,
       })) as Workspace[];
 
@@ -89,44 +103,72 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
     }
 
     if (storedWorkspaceId !== null) {
-      const newData = data;
-      const selectedWorkspace = newData.find(
+      const selectedWorkspace = data.find(
         ({ workspace }) => workspace.publicId === storedWorkspaceId,
       );
 
-      if (!selectedWorkspace?.workspace) return;
+      if (!selectedWorkspace?.workspace) {
+        if (pendingWorkspaceId) {
+          pollAttemptsRef.current += 1;
+          if (pollAttemptsRef.current >= MAX_POLL_ATTEMPTS) {
+            setPendingWorkspaceId(null);
+            localStorage.removeItem("workspacePublicId");
+          } else {
+            return;
+          }
+        } else {
+          // Clear stale workspacePublicId from localStorage
+          localStorage.removeItem("workspacePublicId");
+        }
+      } else {
+        pollAttemptsRef.current = 0;
+        setPendingWorkspaceId(null);
 
-      setWorkspace({
-        publicId: selectedWorkspace.workspace.publicId,
-        name: selectedWorkspace.workspace.name,
-        slug: selectedWorkspace.workspace.slug,
-        plan: selectedWorkspace.workspace.plan,
-        description: selectedWorkspace.workspace.description,
-        role: selectedWorkspace.role,
-        weekStartDay: selectedWorkspace.workspace.weekStartDay as 0 | 1 | 6,
-      });
+        setWorkspace({
+          publicId: selectedWorkspace.workspace.publicId,
+          name: selectedWorkspace.workspace.name,
+          slug: selectedWorkspace.workspace.slug,
+          plan: selectedWorkspace.workspace.plan,
+          description: selectedWorkspace.workspace.description,
+          role: selectedWorkspace.role as "admin" | "member" | "guest",
+          weekStartDay: selectedWorkspace.workspace.weekStartDay as 0 | 1 | 6,
+          cardPrefix: selectedWorkspace.workspace.cardPrefix,
+        });
 
-      if (workspacePublicId) {
-        router.push(`/boards`);
-        localStorage.setItem("workspacePublicId", workspacePublicId);
+        if (workspacePublicId) {
+          router.push(`/boards`);
+          localStorage.setItem("workspacePublicId", workspacePublicId);
+        }
+
+        setHasLoaded(true);
+        return;
       }
-    } else {
-      const primaryWorkspace = data[0]?.workspace;
-      const primaryWorkspaceRole = data[0]?.role;
-
-      if (!primaryWorkspace || !primaryWorkspaceRole) return;
-      localStorage.setItem("workspacePublicId", primaryWorkspace.publicId);
-      setWorkspace({
-        publicId: primaryWorkspace.publicId,
-        name: primaryWorkspace.name,
-        slug: primaryWorkspace.slug,
-        plan: primaryWorkspace.plan,
-        description: primaryWorkspace.description,
-        role: primaryWorkspaceRole,
-        weekStartDay: primaryWorkspace.weekStartDay as 0 | 1 | 6,
-      });
     }
-  }, [data, isLoading, workspacePublicId, router]);
+
+    const primaryWorkspace = data[0]?.workspace;
+    const primaryWorkspaceRole = data[0]?.role;
+
+    if (!primaryWorkspace || !primaryWorkspaceRole) return;
+    localStorage.setItem("workspacePublicId", primaryWorkspace.publicId);
+    setWorkspace({
+      publicId: primaryWorkspace.publicId,
+      name: primaryWorkspace.name,
+      slug: primaryWorkspace.slug,
+      plan: primaryWorkspace.plan,
+      description: primaryWorkspace.description,
+      role: primaryWorkspaceRole as "admin" | "member" | "guest",
+      weekStartDay: primaryWorkspace.weekStartDay as 0 | 1 | 6,
+      cardPrefix: primaryWorkspace.cardPrefix,
+    });
+    setHasLoaded(true);
+  }, [
+    data,
+    isLoading,
+    isFetching,
+    workspacePublicId,
+    pendingWorkspaceId,
+    router,
+  ]);
 
   return (
     <WorkspaceContext.Provider

apps/web/src/styles/globals.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  font-size: 14px;
+}
+
 [contenteditable="true"]:empty:before {
   content: attr(placeholder);
   display: block;

apps/web/src/utils/helpers.ts

@@ -1,3 +1,5 @@
+import { env } from "next-runtime-env";
+
 export const formatToArray = (
   value: string | string[] | undefined,
 ): string[] => {
@@ -50,5 +52,21 @@ export const getAvatarUrl = (imageOrKey: string | null) => {
     return imageOrKey;
   }
 
+  // Construct URL from S3 key
+  const useVirtualHosted = env("NEXT_PUBLIC_USE_VIRTUAL_HOSTED_URLS") === "true";
+  const storageDomain = env("NEXT_PUBLIC_STORAGE_DOMAIN");
+  const storageUrl = env("NEXT_PUBLIC_STORAGE_URL");
+  const bucket = env("NEXT_PUBLIC_AVATAR_BUCKET_NAME");
+
+  if (useVirtualHosted && storageDomain && bucket) {
+    // Virtual-hosted style: https://{bucket}.{domain}/{key}
+    return `https://${bucket}.${storageDomain}/${imageOrKey}`;
+  }
+
+  if (storageUrl && bucket) {
+    // Path-style: {storageUrl}/{bucket}/{key}
+    return `${storageUrl}/${bucket}/${imageOrKey}`;
+  }
+
   return "";
 };

apps/web/src/utils/i18n.ts

@@ -3,6 +3,7 @@ import { i18n } from "@lingui/core";
 import type { Locale } from "~/locales";
 import { defaultLocale } from "~/locales";
 import { messages as enMessages } from "~/locales/en/messages";
+import { messages as zhCNMessages } from "~/locales/zh-CN/messages";
 
 const loadMessages = async (locale: Locale) => {
   switch (locale) {
@@ -22,8 +23,10 @@ const loadMessages = async (locale: Locale) => {
       return (await import("~/locales/ru/messages")).messages;
     case "pl":
       return (await import("~/locales/pl/messages")).messages;
-    case "pt-BR":
-      return (await import("~/locales/pt-BR/messages")).messages;
+    case "ptbr":
+      return (await import("~/locales/ptbr/messages")).messages;
+    case "zh-CN":
+      return (await import("~/locales/zh-CN/messages")).messages;
     default:
       return enMessages;
   }
@@ -32,11 +35,15 @@ const loadMessages = async (locale: Locale) => {
 let isInitialized = false;
 const loadedLocales = new Set<string>();
 
-export function initializeI18n(locale: Locale = defaultLocale) {
+export function initializeI18n() {
   if (!isInitialized) {
-    i18n.load(defaultLocale, enMessages);
+    // 首屏同步加载中英文，避免默认语言激活前出现中英混排。
+    i18n.load("en", enMessages);
+    i18n.load("zh-CN", zhCNMessages);
     i18n.activate(defaultLocale);
     loadedLocales.add(defaultLocale);
+    loadedLocales.add("en");
+    loadedLocales.add("zh-CN");
     isInitialized = true;
   }
 

apps/web/src/views/auth/login/index.tsx

@@ -26,7 +26,7 @@ export default function LoginPage() {
 
   const { data } = authClient.useSession();
 
-  if (data?.user.id) router.push("/boards");
+  if (data?.user.id) router.push(redirect ?? "/boards");
 
   return (
     <>

apps/web/src/views/auth/signup/index.tsx

@@ -21,7 +21,7 @@ export default function SignUpPage() {
 
   const { data } = authClient.useSession();
 
-  if (data?.user.id) router.push("/boards");
+  if (data?.user.id) router.push(redirect ?? "/boards");
 
   const handleMagicLinkSent = (value: boolean, recipient: string) => {
     setIsMagicLinkSent(value);

apps/web/src/views/board/components/BoardDropdown.tsx

@@ -1,5 +1,7 @@
+import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import {
+  HiArrowRightOnRectangle,
   HiEllipsisHorizontal,
   HiLink,
   HiOutlineDocumentDuplicate,
@@ -29,6 +31,7 @@ export default function BoardDropdown({
   isFavorite?: boolean;
   boardName?: string;
 }) {
+  const router = useRouter();
   const { openModal } = useModal();
   const { showPopup } = usePopup();
   const { canEditBoard, canDeleteBoard, canCreateBoard, canArchiveBoard } =
@@ -47,6 +50,7 @@ export default function BoardDropdown({
             : t`The board has been unarchived.`,
           icon: "success",
         });
+        void router.push(`/boards`);
       } else if (variables.favorite !== undefined) {
         showPopup({
           header: variables.favorite
@@ -85,7 +89,7 @@ export default function BoardDropdown({
   const isArchiveActionPending = updateBoard.isPending;
 
   const items = [
-    ...(isTemplate && canCreateBoard
+    ...(!isTemplate && canCreateBoard
       ? [
         {
           label: t`Make template`,
@@ -116,6 +120,17 @@ export default function BoardDropdown({
         },
       ]
       : []),
+    ...(!isTemplate && canEditBoard
+      ? [
+        {
+          label: t`Move to workspace`,
+          action: () => openModal("MOVE_BOARD"),
+          icon: (
+            <HiArrowRightOnRectangle className="h-[16px] w-[16px] text-dark-900" />
+          ),
+        },
+      ]
+      : []),
     {
       label: isFavorite
         ? t`Remove from favorites`

apps/web/src/views/board/components/Card.tsx

@@ -16,6 +16,7 @@ import { getAvatarUrl } from "~/utils/helpers";
 
 const Card = ({
   title,
+  ticketNumber,
   labels,
   members,
   checklists,
@@ -25,6 +26,7 @@ const Card = ({
   dueDate,
 }: {
   title: string;
+  ticketNumber?: string | null;
   labels: { name: string; colourCode: string | null }[];
   members: {
     publicId: string;
@@ -67,6 +69,11 @@ const Card = ({
 
   return (
     <div className="flex flex-col overflow-hidden rounded-md border border-light-200 bg-light-50 px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300">
+      {ticketNumber && (
+        <span className="mb-1 text-xs text-light-700 dark:text-dark-800">
+          {ticketNumber}
+        </span>
+      )}
       <span className="break-words">{title}</span>
       {labels.length ||
       members.length ||

apps/web/src/views/board/components/CardContextDueDateModal.tsx

@@ -0,0 +1,41 @@
+import { t } from "@lingui/core/macro";
+
+import { useModal } from "~/providers/modal";
+import { api } from "~/utils/api";
+import { DueDateSelector } from "~/views/card/components/DueDateSelector";
+
+export function CardContextDueDateModal() {
+  const { entityId: cardPublicId, closeModal } = useModal();
+
+  const { data: card, isLoading } = api.card.byId.useQuery(
+    { cardPublicId: cardPublicId ?? "" },
+    { enabled: !!cardPublicId && cardPublicId.length >= 12 },
+  );
+
+  if (!cardPublicId) return null;
+
+  return (
+    <div className="p-4">
+      <h2 className="mb-4 text-lg font-semibold text-light-1000 dark:text-dark-1000">
+        {t`Set due date`}
+      </h2>
+      {isLoading ? (
+        <div className="h-10 w-full animate-pulse rounded bg-light-200 dark:bg-dark-300" />
+      ) : (
+        <DueDateSelector
+          cardPublicId={cardPublicId}
+          dueDate={card?.dueDate ?? null}
+        />
+      )}
+      <div className="mt-4 flex justify-end">
+        <button
+          type="button"
+          onClick={closeModal}
+          className="rounded-md border border-light-300 bg-light-50 px-3 py-1.5 text-sm font-medium text-light-1000 hover:bg-light-200 dark:border-dark-400 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300"
+        >
+          {t`Done`}
+        </button>
+      </div>
+    </div>
+  );
+}

apps/web/src/views/board/components/CardContextDuplicateModal.tsx

@@ -0,0 +1,284 @@
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+  Transition,
+} from "@headlessui/react";
+import { t } from "@lingui/core/macro";
+import { useState } from "react";
+import { HiChevronDown } from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+interface CardContextDuplicateModalProps {
+  boardPublicId?: string;
+  isTemplate?: boolean;
+}
+
+export function CardContextDuplicateModal({
+  boardPublicId: boardPublicIdProp,
+  isTemplate: isTemplateProp,
+}: CardContextDuplicateModalProps = {}) {
+  const { entityId: cardPublicId, closeModal, getModalState } = useModal();
+  const { showPopup } = usePopup();
+  const utils = api.useUtils();
+
+  const modalState = getModalState("CARD_CONTEXT_DUPLICATE") as
+    | { boardPublicId: string; isTemplate?: boolean }
+    | undefined;
+  const boardPublicId =
+    boardPublicIdProp ?? modalState?.boardPublicId ?? "";
+  const isTemplate = isTemplateProp ?? modalState?.isTemplate ?? false;
+
+  const [listPublicId, setListPublicId] = useState("");
+  const [copyLabels, setCopyLabels] = useState(true);
+  const [copyMembers, setCopyMembers] = useState(true);
+  const [copyChecklists, setCopyChecklists] = useState(true);
+  const [position, setPosition] = useState<string>("");
+  const [title, setTitle] = useState("");
+
+  const { data: card, isLoading: isCardLoading } = api.card.byId.useQuery(
+    { cardPublicId: cardPublicId ?? "" },
+    { enabled: !!cardPublicId && cardPublicId.length >= 12 },
+  );
+
+  const boardType = isTemplate ? "template" : "regular";
+  const { data: board } = api.board.byId.useQuery(
+    { boardPublicId, type: boardType },
+    { enabled: !!boardPublicId },
+  );
+  const lists = board?.lists ?? [];
+  const listOptions = lists.map((l) => ({ publicId: l.publicId, name: l.name }));
+  const currentListPublicId = card?.list?.publicId;
+  const hasLabels = (card?.labels?.length ?? 0) > 0;
+  const hasMembers = (card?.members?.length ?? 0) > 0;
+  const hasChecklists = (card?.checklists?.length ?? 0) > 0;
+  const hasAnyCopyOption = hasLabels || hasMembers || hasChecklists;
+
+  const duplicateCard = api.card.duplicate.useMutation({
+    onSuccess: () => {
+      showPopup({
+        header: t`Card duplicated`,
+        icon: "success",
+        message: t`The card has been duplicated.`,
+      });
+      closeModal();
+    },
+    onError: () => {
+      showPopup({
+        header: t`Unable to duplicate card`,
+        message: t`Please try again.`,
+        icon: "error",
+      });
+    },
+    onSettled: async () => {
+      await utils.board.byId.invalidate();
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!cardPublicId || !listPublicId) return;
+    const indexNum =
+      position === "" ? undefined : parseInt(position, 10);
+    if (
+      position !== "" &&
+      (indexNum === undefined || isNaN(indexNum) || indexNum < 0)
+    )
+      return;
+    duplicateCard.mutate({
+      cardPublicId,
+      listPublicId,
+      copyLabels,
+      copyMembers,
+      copyChecklists,
+      ...(typeof indexNum === "number" && { index: indexNum }),
+      title: title.trim() || undefined,
+    });
+  };
+
+  if (!cardPublicId) return null;
+
+  return (
+    <form onSubmit={handleSubmit} className="p-4">
+      <h2 className="mb-4 text-lg font-semibold text-light-1000 dark:text-dark-1000">
+        {t`Duplicate card`}
+      </h2>
+
+      <div className="space-y-4">
+        <div>
+          <label className="mb-1 block text-sm font-medium text-light-900 dark:text-dark-900">
+            {t`List`}
+          </label>
+          <Listbox value={listPublicId} onChange={setListPublicId}>
+            <div className="relative">
+              <ListboxButton
+                className={twMerge(
+                  "relative w-full cursor-pointer rounded-md border border-light-300 bg-white py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-light-400 focus:ring-offset-0 dark:border-dark-400 dark:bg-dark-200 dark:text-dark-1000 dark:focus:ring-dark-500",
+                  !listPublicId && "text-light-600 dark:text-dark-600",
+                )}
+              >
+                <span className="block truncate">
+                  {listPublicId
+                    ? listOptions.find((o) => o.publicId === listPublicId)
+                        ?.name
+                    : t`Select a list`}
+                </span>
+                <span className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center">
+                  <HiChevronDown
+                    className="h-4 w-4 text-light-600 dark:text-dark-600"
+                    aria-hidden
+                  />
+                </span>
+              </ListboxButton>
+              <Transition
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <ListboxOptions className="absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-light-200 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-200">
+                  <div className="max-h-60 overflow-y-auto py-1 pr-1 scrollbar scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px] scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-600">
+                    {listOptions.map((option) => {
+                      const isCurrentList =
+                        option.publicId === currentListPublicId;
+                      return (
+                        <ListboxOption
+                          key={option.publicId}
+                          value={option.publicId}
+                          disabled={isCurrentList}
+                          className={({ focus }) =>
+                            twMerge(
+                              "relative select-none py-2 pl-3 pr-9 text-sm",
+                              isCurrentList
+                                ? "cursor-default opacity-50"
+                                : "cursor-pointer",
+                              !isCurrentList && focus
+                                ? "bg-light-200 text-light-1000 dark:bg-dark-400 dark:text-dark-1000"
+                                : "text-light-900 dark:text-dark-900",
+                            )
+                          }
+                        >
+                          {option.name}
+                        </ListboxOption>
+                      );
+                    })}
+                  </div>
+                </ListboxOptions>
+              </Transition>
+            </div>
+          </Listbox>
+        </div>
+
+        <div>
+          <label className="mb-1 block text-sm font-medium text-light-900 dark:text-dark-900">
+            {t`Title (optional)`}
+          </label>
+          <Input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder={card?.title ?? ""}
+            className="w-full"
+          />
+        </div>
+
+        <div>
+          <label className="mb-1 block text-sm font-medium text-light-900 dark:text-dark-900">
+            {t`Position in list (0 = first, leave empty for end)`}
+          </label>
+          <Input
+            type="number"
+            min={0}
+            value={position}
+            onChange={(e) => setPosition(e.target.value)}
+            placeholder={t`End of list`}
+            className="w-full"
+          />
+        </div>
+
+        {hasAnyCopyOption && (
+          <div className="flex flex-col gap-2">
+            {hasLabels && (
+              <div className="flex items-center gap-3">
+                <label className="relative mt-[2px] inline-flex h-[16px] w-[16px] flex-shrink-0 cursor-pointer items-center justify-center">
+                  <input
+                    type="checkbox"
+                    checked={copyLabels}
+                    onChange={(e) => setCopyLabels(e.target.checked)}
+                    className={twMerge(
+                      "h-[16px] w-[16px] appearance-none rounded-md border border-light-500 bg-transparent outline-none ring-0 checked:bg-blue-600 focus:shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none dark:border-dark-500 dark:hover:border-dark-500",
+                      "cursor-pointer",
+                    )}
+                  />
+                </label>
+                <span className="text-sm text-light-900 dark:text-dark-900">
+                  {t`Copy labels`}
+                </span>
+              </div>
+            )}
+            {hasMembers && (
+              <div className="flex items-center gap-3">
+                <label className="relative mt-[2px] inline-flex h-[16px] w-[16px] flex-shrink-0 cursor-pointer items-center justify-center">
+                  <input
+                    type="checkbox"
+                    checked={copyMembers}
+                    onChange={(e) => setCopyMembers(e.target.checked)}
+                    className={twMerge(
+                      "h-[16px] w-[16px] appearance-none rounded-md border border-light-500 bg-transparent outline-none ring-0 checked:bg-blue-600 focus:shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none dark:border-dark-500 dark:hover:border-dark-500",
+                      "cursor-pointer",
+                    )}
+                  />
+                </label>
+                <span className="text-sm text-light-900 dark:text-dark-900">
+                  {t`Copy members`}
+                </span>
+              </div>
+            )}
+            {hasChecklists && (
+              <div className="flex items-center gap-3">
+                <label className="relative mt-[2px] inline-flex h-[16px] w-[16px] flex-shrink-0 cursor-pointer items-center justify-center">
+                  <input
+                    type="checkbox"
+                    checked={copyChecklists}
+                    onChange={(e) => setCopyChecklists(e.target.checked)}
+                    className={twMerge(
+                      "h-[16px] w-[16px] appearance-none rounded-md border border-light-500 bg-transparent outline-none ring-0 checked:bg-blue-600 focus:shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none dark:border-dark-500 dark:hover:border-dark-500",
+                      "cursor-pointer",
+                    )}
+                  />
+                </label>
+                <span className="text-sm text-light-900 dark:text-dark-900">
+                  {t`Copy checklists`}
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="mt-6 flex justify-end gap-2">
+        <Button type="button" variant="secondary" onClick={closeModal}>
+          {t`Cancel`}
+        </Button>
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={
+            !listPublicId ||
+            duplicateCard.isPending ||
+            isCardLoading ||
+            lists.length === 0
+          }
+        >
+          {duplicateCard.isPending ? t`Duplicating…` : t`Duplicate`}
+        </Button>
+      </div>
+    </form>
+  );
+}

apps/web/src/views/board/components/CardContextLabelsModal.tsx

@@ -0,0 +1,53 @@
+import { t } from "@lingui/core/macro";
+
+import { useModal } from "~/providers/modal";
+import { api } from "~/utils/api";
+import LabelIcon from "~/components/LabelIcon";
+import LabelSelector from "~/views/card/components/LabelSelector";
+
+export function CardContextLabelsModal() {
+  const { entityId: cardPublicId, closeModal } = useModal();
+
+  const { data: card, isLoading } = api.card.byId.useQuery(
+    { cardPublicId: cardPublicId ?? "" },
+    { enabled: !!cardPublicId && cardPublicId.length >= 12 },
+  );
+
+  const boardLabels = card?.list?.board?.labels ?? [];
+  const selectedLabels = card?.labels ?? [];
+
+  const formattedLabels = boardLabels.map((label) => ({
+    key: label.publicId,
+    value: label.name,
+    selected: selectedLabels.some((l) => l.publicId === label.publicId),
+    leftIcon: <LabelIcon colourCode={label.colourCode} />,
+  }));
+
+  if (!cardPublicId) return null;
+
+  return (
+    <div className="p-4">
+      <h2 className="mb-4 text-lg font-semibold text-light-1000 dark:text-dark-1000">
+        {t`Labels`}
+      </h2>
+      {isLoading ? (
+        <div className="h-10 w-full animate-pulse rounded bg-light-200 dark:bg-dark-300" />
+      ) : (
+        <LabelSelector
+          cardPublicId={cardPublicId}
+          labels={formattedLabels}
+          isLoading={isLoading}
+        />
+      )}
+      <div className="mt-4 flex justify-end">
+        <button
+          type="button"
+          onClick={closeModal}
+          className="rounded-md border border-light-300 bg-light-50 px-3 py-1.5 text-sm font-medium text-light-1000 hover:bg-light-200 dark:border-dark-400 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300"
+        >
+          {t`Done`}
+        </button>
+      </div>
+    </div>
+  );
+}

apps/web/src/views/board/components/CardContextMembersModal.tsx

@@ -0,0 +1,73 @@
+import { t } from "@lingui/core/macro";
+
+import { useModal } from "~/providers/modal";
+import { api } from "~/utils/api";
+import { formatMemberDisplayName, getAvatarUrl } from "~/utils/helpers";
+import Avatar from "~/components/Avatar";
+import MemberSelector from "~/views/card/components/MemberSelector";
+
+export function CardContextMembersModal() {
+  const { entityId: cardPublicId, closeModal } = useModal();
+
+  const { data: card, isLoading } = api.card.byId.useQuery(
+    { cardPublicId: cardPublicId ?? "" },
+    { enabled: !!cardPublicId && cardPublicId.length >= 12 },
+  );
+
+  const board = card?.list?.board;
+  const workspaceMembers = board?.workspace?.members ?? [];
+  const selectedMembers = card?.members ?? [];
+
+  const formattedMembers = workspaceMembers.map((member) => {
+    const isSelected = selectedMembers.some(
+      (m) => m.publicId === member.publicId,
+    );
+    return {
+      key: member.publicId,
+      value: formatMemberDisplayName(
+        member.user?.name ?? null,
+        member.user?.email ?? member.email,
+      ),
+      imageUrl: member.user?.image ? getAvatarUrl(member.user.image) : undefined,
+      selected: isSelected,
+      leftIcon: (
+        <Avatar
+          size="xs"
+          name={member.user?.name ?? ""}
+          imageUrl={
+            member.user?.image ? getAvatarUrl(member.user.image) : undefined
+          }
+          email={member.user?.email ?? member.email}
+        />
+      ),
+    };
+  });
+
+  if (!cardPublicId) return null;
+
+  return (
+    <div className="p-4">
+      <h2 className="mb-4 text-lg font-semibold text-light-1000 dark:text-dark-1000">
+        {t`Manage members`}
+      </h2>
+      {isLoading ? (
+        <div className="h-10 w-full animate-pulse rounded bg-light-200 dark:bg-dark-300" />
+      ) : (
+        <MemberSelector
+          cardPublicId={cardPublicId}
+          members={formattedMembers}
+          isLoading={isLoading}
+        />
+      )}
+      <div className="mt-4 flex justify-end">
+        <button
+          type="button"
+          onClick={closeModal}
+          className="rounded-md border border-light-300 bg-light-50 px-3 py-1.5 text-sm font-medium text-light-1000 hover:bg-light-200 dark:border-dark-400 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300"
+        >
+          {t`Done`}
+        </button>
+      </div>
+    </div>
+  );
+}

apps/web/src/views/board/components/CardContextMenu.tsx

@@ -0,0 +1,130 @@
+import { t } from "@lingui/core/macro";
+import { useEffect, useRef } from "react";
+import {
+  HiLink,
+  HiOutlineCalendar,
+  HiOutlineDocumentDuplicate,
+  HiOutlineTag,
+  HiOutlineTrash,
+  HiOutlineUserGroup,
+  HiOutlineArrowRightCircle,
+} from "react-icons/hi2";
+
+export type CardContextMenuAction =
+  | "members"
+  | "move"
+  | "labels"
+  | "dueDate"
+  | "copyLink"
+  | "duplicate"
+  | "delete";
+
+interface CardContextMenuProps {
+  x: number;
+  y: number;
+  onClose: () => void;
+  onAction: (action: CardContextMenuAction) => void;
+  canEdit: boolean;
+}
+
+const MENU_ITEMS: {
+  action: CardContextMenuAction;
+  label: string;
+  icon: React.ReactNode;
+  requiresEdit: boolean;
+}[] = [
+  {
+    action: "members",
+    label: t`Manage members`,
+    icon: <HiOutlineUserGroup className="h-4 w-4 shrink-0" />,
+    requiresEdit: true,
+  },
+  {
+    action: "move",
+    label: t`Move to another list`,
+    icon: <HiOutlineArrowRightCircle className="h-4 w-4 shrink-0" />,
+    requiresEdit: true,
+  },
+  {
+    action: "labels",
+    label: t`Add / edit label`,
+    icon: <HiOutlineTag className="h-4 w-4 shrink-0" />,
+    requiresEdit: true,
+  },
+  {
+    action: "dueDate",
+    label: t`Set due date`,
+    icon: <HiOutlineCalendar className="h-4 w-4 shrink-0" />,
+    requiresEdit: true,
+  },
+  {
+    action: "copyLink",
+    label: t`Copy link to card`,
+    icon: <HiLink className="h-4 w-4 shrink-0" />,
+    requiresEdit: false,
+  },
+  {
+    action: "duplicate",
+    label: t`Duplicate card`,
+    icon: <HiOutlineDocumentDuplicate className="h-4 w-4 shrink-0" />,
+    requiresEdit: true,
+  },
+  {
+    action: "delete",
+    label: t`Delete card`,
+    icon: <HiOutlineTrash className="h-4 w-4 shrink-0" />,
+    requiresEdit: true,
+  },
+];
+
+export function CardContextMenu({
+  x,
+  y,
+  onClose,
+  onAction,
+  canEdit,
+}: CardContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose]);
+
+  const items = MENU_ITEMS.filter((item) => !item.requiresEdit || canEdit);
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-[200] min-w-[200px] rounded-md border border-light-200 bg-white py-1 shadow-lg dark:border-dark-400 dark:bg-dark-200"
+      style={{ left: x, top: y }}
+    >
+      {items.map(({ action, label, icon }) => (
+        <button
+          key={action}
+          type="button"
+          onClick={() => {
+            onAction(action);
+            onClose();
+          }}
+          className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
+        >
+          {icon}
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}

apps/web/src/views/board/components/CardContextMoveListModal.tsx

@@ -0,0 +1,101 @@
+import { t } from "@lingui/core/macro";
+
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+import { invalidateCard } from "~/utils/cardInvalidation";
+
+export function CardContextMoveListModal() {
+  const { entityId: cardPublicId, closeModal } = useModal();
+  const { showPopup } = usePopup();
+  const utils = api.useUtils();
+
+  const { data: card, isLoading } = api.card.byId.useQuery(
+    { cardPublicId: cardPublicId ?? "" },
+    { enabled: !!cardPublicId && cardPublicId.length >= 12 },
+  );
+
+  const updateCardList = api.card.update.useMutation({
+    onMutate: async (vars) => {
+      if (!cardPublicId) return undefined;
+      await utils.card.byId.cancel();
+      const previous = utils.card.byId.getData({ cardPublicId });
+      utils.card.byId.setData({ cardPublicId }, (old) => {
+        if (!old) return old;
+        const list = old.list.board?.lists?.find(
+          (l) => l.publicId === vars.listPublicId,
+        );
+        if (!list) return old;
+        return {
+          ...old,
+          list: { ...old.list, publicId: list.publicId, name: list.name },
+        };
+      });
+      return { previous };
+    },
+    onError: (_err, _vars, ctx) => {
+      if (cardPublicId && ctx?.previous) {
+        utils.card.byId.setData({ cardPublicId }, ctx.previous);
+      }
+      showPopup({
+        header: t`Unable to move card`,
+        message: t`Please try again.`,
+        icon: "error",
+      });
+    },
+    onSettled: async () => {
+      if (cardPublicId) {
+        await invalidateCard(utils, cardPublicId);
+        await utils.board.byId.invalidate();
+      }
+    },
+  });
+
+  const lists = card?.list?.board?.lists ?? [];
+  const currentListPublicId = card?.list?.publicId;
+
+  const handleSelectList = (listPublicId: string) => {
+    if (listPublicId === currentListPublicId || !cardPublicId) return;
+    updateCardList.mutate(
+      { cardPublicId, listPublicId, index: 0 },
+      { onSuccess: closeModal },
+    );
+  };
+
+  if (!cardPublicId) return null;
+
+  return (
+    <div className="p-4">
+      <h2 className="mb-4 text-lg font-semibold text-light-1000 dark:text-dark-1000">
+        {t`Move to list`}
+      </h2>
+      {isLoading ? (
+        <div className="space-y-2">
+          {[1, 2, 3].map((i) => (
+            <div
+              key={i}
+              className="h-10 w-full animate-pulse rounded bg-light-200 dark:bg-dark-300"
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="max-h-[60vh] overflow-y-auto pr-1 scrollbar scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px] scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-600">
+          <ul className="space-y-1">
+            {lists.map((list) => (
+              <li key={list.publicId}>
+                <button
+                  type="button"
+                  onClick={() => handleSelectList(list.publicId)}
+                  disabled={list.publicId === currentListPublicId}
+                  className="w-full rounded-md px-3 py-2 text-left text-sm hover:bg-light-200 disabled:opacity-50 dark:hover:bg-dark-400"
+                >
+                  {list.name}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/views/board/components/DeleteBoardConfirmation.tsx

@@ -14,6 +14,7 @@ export function DeleteBoardConfirmation({
 }) {
   const router = useRouter();
   const { closeModal } = useModal();
+  const boardTypeLabel = isTemplate ? t`template` : t`board`;
 
   const deleteBoard = api.board.delete.useMutation({
     onSuccess: () => {
@@ -33,7 +34,7 @@ export function DeleteBoardConfirmation({
     <div className="p-5">
       <div className="flex w-full flex-col justify-between pb-4">
         <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
-          {t`Are you sure you want to delete this ${isTemplate ? "template" : "board"}?`}
+          {t`Are you sure you want to delete this ${boardTypeLabel}?`}
         </h2>
         <p className="text-sm font-medium text-light-900 dark:text-dark-900">
           {t`This action can't be undone.`}

apps/web/src/views/board/components/List.tsx

@@ -95,7 +95,7 @@ export default function List({
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
-          className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-300 dark:bg-dark-100"
+          className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] snap-start rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-300 dark:bg-dark-100 md:snap-align-none"
         >
           <div className="mb-2 flex justify-between">
             <form
@@ -118,7 +118,7 @@ export default function List({
                 }
               >
                 <button
-                  className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-light-400 disabled:opacity-60 disabled:cursor-not-allowed dark:hover:bg-dark-200"
+                  className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-light-400 disabled:cursor-not-allowed disabled:opacity-60 dark:hover:bg-dark-200"
                   onClick={() => openNewCardForm(list.publicId)}
                   disabled={!canCreateCard}
                 >

apps/web/src/views/board/components/MoveBoardForm.tsx

@@ -0,0 +1,113 @@
+import { useRouter } from "next/navigation";
+import { t } from "@lingui/core/macro";
+import { useState } from "react";
+
+import Button from "~/components/Button";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { useWorkspace } from "~/providers/workspace";
+import { api } from "~/utils/api";
+
+export function MoveBoardForm({
+  boardPublicId,
+}: {
+  boardPublicId: string;
+}) {
+  const router = useRouter();
+  const { closeModal } = useModal();
+  const { showPopup } = usePopup();
+  const { workspace, availableWorkspaces, switchWorkspace } = useWorkspace();
+  const [targetWorkspacePublicId, setTargetWorkspacePublicId] = useState("");
+
+  const otherWorkspaces = availableWorkspaces.filter(
+    (ws) => ws.publicId !== workspace.publicId && ws.role !== "guest",
+  );
+
+  const moveBoard = api.board.move.useMutation({
+    onSuccess: () => {
+      const targetWorkspace = availableWorkspaces.find(
+        (ws) => ws.publicId === targetWorkspacePublicId,
+      );
+      closeModal();
+      showPopup({
+        header: t`Board moved`,
+        message: t`The board has been moved to ${targetWorkspace?.name ?? t`the workspace`}.`,
+        icon: "success",
+      });
+      if (targetWorkspace) {
+        switchWorkspace(targetWorkspace);
+      } else {
+        router.push("/boards");
+      }
+    },
+    onError: (error) => {
+      showPopup({
+        header: t`Unable to move board`,
+        message: error.message,
+        icon: "error",
+      });
+    },
+  });
+
+  const handleMoveBoard = () => {
+    if (!targetWorkspacePublicId) return;
+    moveBoard.mutate({
+      boardPublicId,
+      targetWorkspacePublicId,
+    });
+  };
+
+  return (
+    <div className="p-5">
+      <div className="flex w-full flex-col justify-between pb-4">
+        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
+          {t`Move board to another workspace`}
+        </h2>
+        {otherWorkspaces.length === 0 ? (
+          <p className="text-sm font-medium text-light-900 dark:text-dark-900">
+            {t`You don't have any other workspaces to move this board to.`}
+          </p>
+        ) : (
+          <>
+            <label
+              htmlFor="target-workspace"
+              className="mb-2 text-sm font-medium text-light-900 dark:text-dark-900"
+            >
+              {t`Destination workspace`}
+            </label>
+            <select
+              id="target-workspace"
+              value={targetWorkspacePublicId}
+              onChange={(e) => setTargetWorkspacePublicId(e.target.value)}
+              className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-sm shadow-sm ring-1 ring-inset ring-light-600 placeholder:text-dark-800 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:leading-6"
+            >
+              <option value="">{t`Select a workspace`}</option>
+              {otherWorkspaces.map((ws) => (
+                <option key={ws.publicId} value={ws.publicId}>
+                  {ws.name}
+                </option>
+              ))}
+            </select>
+            <p className="mt-3 text-sm text-light-800 dark:text-dark-800">
+              {t`Card member assignments will be cleared when moving to a different workspace.`}
+            </p>
+          </>
+        )}
+      </div>
+      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
+        <Button onClick={() => closeModal()} variant="secondary">
+          {t`Cancel`}
+        </Button>
+        {otherWorkspaces.length > 0 && (
+          <Button
+            onClick={handleMoveBoard}
+            isLoading={moveBoard.isPending}
+            disabled={!targetWorkspacePublicId}
+          >
+            {t`Move board`}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/src/views/board/components/NewCardForm.tsx

@@ -146,6 +146,10 @@ export function NewCardForm({
               listId: 2,
               description: "",
               dueDate: args.dueDate ?? null,
+              cardNumber: null,
+              comments: [],
+              checklists: [],
+              attachments: [],
               labels: oldBoard.labels.filter((label) =>
                 args.labelPublicIds.includes(label.publicId),
               ),
@@ -158,6 +162,9 @@ export function NewCardForm({
                     ...member,
                     deletedAt: null,
                   })) ?? [],
+              comments: [],
+              checklists: [],
+              attachments: [],
               _filteredLabels: labelPublicIds.map((id) => ({ publicId: id })),
               _filteredMembers: memberPublicIds.map((id) => ({ publicId: id })),
               index: position === "start" ? 0 : list.cards.length,
@@ -515,7 +522,7 @@ export function NewCardForm({
         </div>
       </div>
 
-      <div className="mt-5 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-5 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={t`Create another`}
           isChecked={isCreateAnotherEnabled}

apps/web/src/views/board/components/NewListForm.tsx

@@ -136,7 +136,7 @@ export function NewListForm({
           }}
         />
       </div>
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={t`Create another`}
           isChecked={isCreateAnotherEnabled}

apps/web/src/views/board/components/VisibilityButton.tsx

@@ -42,12 +42,13 @@ const VisibilityButton = ({
   }, [visibility]);
 
   const isPublic = stateVisibility === "public";
+  const visibilityLabel = isPublic ? t`public` : t`private`;
 
   const updateBoardVisibility = api.board.update.useMutation({
     onSuccess: () => {
       showPopup({
         header: t`Board visibility updated`,
-        message: t`The visibility of your board has been set to ${isPublic ? "public" : "private"}.`,
+        message: t`The visibility of your board has been set to ${visibilityLabel}.`,
         icon: "success",
       });
     },

apps/web/src/views/board/index.tsx

@@ -4,7 +4,8 @@ import { useParams } from "next/navigation";
 import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import { keepPreviousData } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
+import { env } from "next-runtime-env";
+import { useEffect, useMemo, useState } from "react";
 import { DragDropContext, Draggable } from "react-beautiful-dnd";
 import { useForm } from "react-hook-form";
 import {
@@ -15,6 +16,7 @@ import {
 
 import type { UpdateBoardInput } from "@kan/api/types";
 
+import type { CardContextMenuAction } from "./components/CardContextMenu";
 import Button from "~/components/Button";
 import { DeleteLabelConfirmation } from "~/components/DeleteLabelConfirmation";
 import { LabelForm } from "~/components/LabelForm";
@@ -26,20 +28,28 @@ import { StrictModeDroppable as Droppable } from "~/components/StrictModeDroppab
 import { Tooltip } from "~/components/Tooltip";
 import { EditYouTubeModal } from "~/components/YouTubeEmbed/EditYouTubeModal";
 import { useDragToScroll } from "~/hooks/useDragToScroll";
-import { useScrollRestore } from "~/hooks/useScrollRestore";
 import { usePermissions } from "~/hooks/usePermissions";
+import { useScrollRestore } from "~/hooks/useScrollRestore";
 import { useKeyboardShortcut } from "~/providers/keyboard-shortcuts";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 import { formatToArray } from "~/utils/helpers";
+import { DeleteCardConfirmation } from "~/views/card/components/DeleteCardConfirmation";
 import BoardDropdown from "./components/BoardDropdown";
 import Card from "./components/Card";
+import { CardContextDueDateModal } from "./components/CardContextDueDateModal";
+import { CardContextDuplicateModal } from "./components/CardContextDuplicateModal";
+import { CardContextLabelsModal } from "./components/CardContextLabelsModal";
+import { CardContextMembersModal } from "./components/CardContextMembersModal";
+import { CardContextMenu } from "./components/CardContextMenu";
+import { CardContextMoveListModal } from "./components/CardContextMoveListModal";
 import { DeleteBoardConfirmation } from "./components/DeleteBoardConfirmation";
 import { DeleteListConfirmation } from "./components/DeleteListConfirmation";
 import Filters from "./components/Filters";
 import List from "./components/List";
+import { MoveBoardForm } from "./components/MoveBoardForm";
 import { NewCardForm } from "./components/NewCardForm";
 import { NewListForm } from "./components/NewListForm";
 import { NewTemplateForm } from "./components/NewTemplateForm";
@@ -55,11 +65,18 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
   const utils = api.useUtils();
   const { showPopup } = usePopup();
   const { workspace } = useWorkspace();
-  const { openModal, modalContentType, entityId, isOpen } = useModal();
+  const { openModal, modalContentType, entityId, isOpen, setModalState } =
+    useModal();
   const [selectedPublicListId, setSelectedPublicListId] =
     useState<PublicListId>("");
   const [isInitialLoading, setIsInitialLoading] = useState(true);
 
+  const [contextMenu, setContextMenu] = useState<{
+    x: number;
+    y: number;
+    cardPublicId: string;
+  } | null>(null);
+
   const { ref: scrollRef, onMouseDown } = useDragToScroll({
     enabled: true,
     direction: "horizontal",
@@ -68,21 +85,26 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
   const { canCreateList, canEditList, canEditCard, canEditBoard } =
     usePermissions();
 
-  const { tooltipContent: createListShortcutTooltipContent } =
-    useKeyboardShortcut({
-      type: "PRESS",
-      stroke: { key: "C" },
-      action: () => boardId && canCreateList && openNewListForm(boardId),
-      description: t`Create new list`,
-      group: "ACTIONS",
-    });
-
   const boardId = params?.boardId
     ? Array.isArray(params.boardId)
       ? params.boardId[0]
       : params.boardId
     : null;
 
+  const createListShortcut = useMemo(
+    () => ({
+      type: "PRESS" as const,
+      stroke: { key: "C" },
+      action: () => boardId && canCreateList && openNewListForm(boardId),
+      description: t`Create new list`,
+      group: "ACTIONS" as const,
+    }),
+    [boardId, canCreateList],
+  );
+
+  const { tooltipContent: createListShortcutTooltipContent } =
+    useKeyboardShortcut(createListShortcut);
+
   const updateBoard = api.board.update.useMutation();
 
   const { register, handleSubmit, setValue } = useForm<UpdateBoardInput>({
@@ -134,7 +156,10 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
   // Redirect to 404 if board doesn't exist
   useEffect(() => {
     if (router.isReady && boardId && !isQueryLoading) {
-      if (error?.data?.code === "NOT_FOUND" || (!boardData && !isQueryLoading)) {
+      if (
+        error?.data?.code === "NOT_FOUND" ||
+        (!boardData && !isQueryLoading)
+      ) {
         router.replace("/404");
       }
     }
@@ -152,7 +177,12 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
 
   const isLoading = isInitialLoading || isQueryLoading;
 
-  useScrollRestore(boardId, scrollRef, router, !isLoading && (boardData?.lists.length ?? 0) > 0);
+  useScrollRestore(
+    boardId,
+    scrollRef,
+    router,
+    !isLoading && (boardData?.lists.length ?? 0) > 0,
+  );
 
   const updateListMutation = api.list.update.useMutation({
     onMutate: async (args) => {
@@ -267,6 +297,56 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
     setSelectedPublicListId(publicBoardId);
   };
 
+  const handleCardContextMenuAction = (action: CardContextMenuAction) => {
+    const cardPublicId = contextMenu?.cardPublicId;
+    if (!cardPublicId) return;
+    setContextMenu(null);
+    if (action === "copyLink") {
+      const path = isTemplate
+        ? `/templates/${boardId}/cards/${cardPublicId}`
+        : `/cards/${cardPublicId}`;
+      const url = `${typeof window !== "undefined" ? window.location.origin : ""}${path}`;
+      void navigator.clipboard.writeText(url).then(
+        () => {
+          showPopup({
+            header: t`Link copied`,
+            icon: "success",
+            message: t`Card URL copied to clipboard`,
+          });
+        },
+        () => {
+          showPopup({
+            header: t`Unable to copy link`,
+            icon: "error",
+            message: t`Please try again.`,
+          });
+        },
+      );
+      return;
+    }
+    if (action === "duplicate") {
+      setModalState("CARD_CONTEXT_DUPLICATE", {
+        boardPublicId: boardId ?? "",
+        isTemplate: !!isTemplate,
+      });
+      openModal("CARD_CONTEXT_DUPLICATE", cardPublicId);
+      return;
+    }
+    if (action === "delete") {
+      openModal("DELETE_CARD", cardPublicId);
+      return;
+    }
+    const modalType =
+      action === "members"
+        ? "CARD_CONTEXT_MEMBERS"
+        : action === "move"
+          ? "CARD_CONTEXT_MOVE_LIST"
+          : action === "labels"
+            ? "CARD_CONTEXT_LABELS"
+            : "CARD_CONTEXT_DUE_DATE";
+    openModal(modalType, cardPublicId);
+  };
+
   const onDragEnd = ({
     source: _source,
     destination,
@@ -386,6 +466,13 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
           />
         </Modal>
 
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "MOVE_BOARD"}
+        >
+          <MoveBoardForm boardPublicId={boardId ?? ""} />
+        </Modal>
+
         <Modal
           modalSize="sm"
           isVisible={isOpen && modalContentType === "CREATE_TEMPLATE"}
@@ -403,6 +490,49 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
         >
           <EditYouTubeModal />
         </Modal>
+
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "CARD_CONTEXT_MEMBERS"}
+        >
+          <CardContextMembersModal />
+        </Modal>
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "CARD_CONTEXT_MOVE_LIST"}
+        >
+          <CardContextMoveListModal />
+        </Modal>
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "CARD_CONTEXT_LABELS"}
+        >
+          <CardContextLabelsModal />
+        </Modal>
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "CARD_CONTEXT_DUE_DATE"}
+        >
+          <CardContextDueDateModal />
+        </Modal>
+        <Modal
+          modalSize="md"
+          isVisible={isOpen && modalContentType === "CARD_CONTEXT_DUPLICATE"}
+        >
+          <CardContextDuplicateModal
+            boardPublicId={boardId ?? ""}
+            isTemplate={!!isTemplate}
+          />
+        </Modal>
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "DELETE_CARD"}
+        >
+          <DeleteCardConfirmation
+            cardPublicId={entityId}
+            boardPublicId={boardId ?? ""}
+          />
+        </Modal>
       </>
     );
   };
@@ -410,7 +540,7 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
   return (
     <>
       <PageHead
-        title={`${boardData?.name ?? (isTemplate ? t`Board` : t`Template`)} | ${workspace.name ?? t`Workspace`}`}
+        title={`${boardData?.name ?? (isTemplate ? t`Template` : t`Board`)} | ${workspace.name ?? t`Workspace`}`}
       />
       <div className="relative flex h-full flex-col">
         <PatternedBackground />
@@ -437,7 +567,7 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
           )}
           {!boardData && !isLoading && (
             <p className="order-2 block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem] md:order-1">
-              {t`${isTemplate ? "Template" : "Board"} not found`}
+              {isTemplate ? t`Template not found` : t`Board not found`}
             </p>
           )}
           <div className="order-1 mb-4 flex items-center justify-end space-x-2 md:order-2 md:mb-0">
@@ -517,7 +647,7 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
         <div
           ref={scrollRef}
           onMouseDown={onMouseDown}
-          className={`scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] z-0 flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300`}
+          className={`scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] z-0 flex-1 snap-x snap-mandatory scroll-pl-[10px] overflow-y-hidden overflow-x-scroll overscroll-contain scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300 md:snap-none`}
         >
           {isLoading ? (
             <div className="ml-[2rem] flex">
@@ -564,11 +694,11 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
                   >
                     {(provided) => (
                       <div
-                        className="flex"
+                        className="flex w-max"
                         ref={provided.innerRef}
                         {...provided.droppableProps}
                       >
-                        <div className="min-w-[2rem]" />
+                        <div className="min-w-[10px] md:min-w-[2rem]" />
                         {boardData.lists.map((list, index) => (
                           <List
                             index={index}
@@ -605,24 +735,46 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
                                             )
                                               e.preventDefault();
                                           }}
+                                          onContextMenu={(e) => {
+                                            if (
+                                              card.publicId.startsWith(
+                                                "PLACEHOLDER",
+                                              ) ||
+                                              env("NEXT_PUBLIC_KAN_ENV") ===
+                                                "cloud"
+                                            )
+                                              return;
+                                            e.preventDefault();
+                                            setContextMenu({
+                                              x: e.clientX,
+                                              y: e.clientY,
+                                              cardPublicId: card.publicId,
+                                            });
+                                          }}
                                           key={card.publicId}
                                           href={
                                             isTemplate
                                               ? `/templates/${boardId}/cards/${card.publicId}`
                                               : `/cards/${card.publicId}`
                                           }
-                                          className={`mb-2 flex !cursor-pointer flex-col ${card.publicId.startsWith(
-                                            "PLACEHOLDER",
-                                          )
-                                            ? "pointer-events-none"
-                                            : ""
-                                            }`}
+                                          className={`mb-2 flex !cursor-pointer flex-col ${
+                                            card.publicId.startsWith(
+                                              "PLACEHOLDER",
+                                            )
+                                              ? "pointer-events-none"
+                                              : ""
+                                          }`}
                                           ref={provided.innerRef}
                                           {...provided.draggableProps}
                                           {...provided.dragHandleProps}
                                         >
                                           <Card
                                             title={card.title}
+                                            ticketNumber={
+                                              card.cardNumber != null
+                                                ? `${boardData.workspace.cardPrefix}-${card.cardNumber}`
+                                                : null
+                                            }
                                             labels={card.labels}
                                             members={card.members}
                                             checklists={card.checklists ?? []}
@@ -643,7 +795,7 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
                             </Droppable>
                           </List>
                         ))}
-                        <div className="min-w-[0.75rem]" />
+                        <div className="min-w-[calc(100vw-18rem)] md:min-w-[0.75rem]" />
                         {provided.placeholder}
                       </div>
                     )}
@@ -653,6 +805,15 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
             </>
           ) : null}
         </div>
+        {contextMenu && (
+          <CardContextMenu
+            x={contextMenu.x}
+            y={contextMenu.y}
+            onClose={() => setContextMenu(null)}
+            onAction={handleCardContextMenuAction}
+            canEdit={!!canEditCard}
+          />
+        )}
         {renderModalContent()}
       </div>
     </>

apps/web/src/views/boards/components/BoardsList.tsx

@@ -14,6 +14,8 @@ export function BoardsList({ isTemplate, archived = false }: { isTemplate?: bool
   const { workspace } = useWorkspace();
   const { openModal } = useModal();
   const { canCreateBoard } = usePermissions();
+  const boardTypeLabel = isTemplate ? t`template` : t`board`;
+  const boardLabel = isTemplate ? t`templates` : t`boards`;
 
   const utils = api.useUtils();
   const updateBoard = api.board.update.useMutation({
@@ -60,10 +62,10 @@ export function BoardsList({ isTemplate, archived = false }: { isTemplate?: bool
         <div className="flex flex-col items-center">
           <HiOutlineRectangleStack className="h-10 w-10 text-light-800 dark:text-dark-800" />
           <p className="mb-2 mt-4 text-[14px] font-bold text-light-1000 dark:text-dark-950">
-            {archived ? t`No archived boards` : t`No ${isTemplate ? "templates" : "boards"}`}
+            {archived ? t`No archived boards` : t`No ${boardLabel}`}
           </p>
           <p className="text-[14px] text-light-900 dark:text-dark-900">
-            {archived ? t`Boards you archive will appear here.` : t`Get started by creating a new ${isTemplate ? "template" : "board"}`}
+            {archived ? t`Boards you archive will appear here.` : t`Get started by creating a new ${boardTypeLabel}`}
           </p>
         </div>
         <Tooltip
@@ -77,7 +79,7 @@ export function BoardsList({ isTemplate, archived = false }: { isTemplate?: bool
             }}
             disabled={!canCreateBoard}
           >
-            {t`Create new ${isTemplate ? "template" : "board"}`}
+            {t`Create new ${boardTypeLabel}`}
           </Button>
         </Tooltip>
       </div>

apps/web/src/views/boards/components/ImportBoardsForm.tsx

@@ -184,7 +184,7 @@ const SelectSource = ({
         />
       </div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <div>
           <Button
             type="submit"
@@ -310,7 +310,7 @@ const ImportGithub: React.FC = () => {
     <form onSubmit={handleSubmitProjects(onSubmitProjects)}>
       <div className="h-[105px] overflow-auto px-5">{renderContent()}</div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={t`Select all`}
           isChecked={!!isSelectAllEnabled}
@@ -459,7 +459,7 @@ const ImportTrello: React.FC = () => {
     <form onSubmit={handleSubmitBoards(onSubmitBoards)}>
       <div className="h-[105px] overflow-auto px-5">{renderContent()}</div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={t`Select all`}
           isChecked={!!isSelectAllEnabled}

apps/web/src/views/boards/components/NewBoardForm.tsx

@@ -32,6 +32,7 @@ interface NewBoardInputWithTemplate {
 }
 
 export function NewBoardForm({ isTemplate }: { isTemplate?: boolean }) {
+  const boardTypeLabel = isTemplate ? t`template` : t`board`;
   const utils = api.useUtils();
   const { closeModal } = useModal();
   const router = useRouter();
@@ -117,7 +118,7 @@ export function NewBoardForm({ isTemplate }: { isTemplate?: boolean }) {
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="px-5 pt-5">
         <div className="text-neutral-9000 flex w-full items-center justify-between pb-4 dark:text-dark-1000">
-          <h2 className="text-sm font-bold">{t`New ${isTemplate ? "template" : "board"}`}</h2>
+          <h2 className="text-sm font-bold">{t`New ${boardTypeLabel}`}</h2>
           <button
             type="button"
             className="hover:bg-li ght-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
@@ -148,7 +149,7 @@ export function NewBoardForm({ isTemplate }: { isTemplate?: boolean }) {
         showTemplates={showTemplates}
         customTemplates={formattedTemplates ?? []}
       />
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         {!isTemplate && (
           <Toggle
             label={t`Use template`}
@@ -163,7 +164,7 @@ export function NewBoardForm({ isTemplate }: { isTemplate?: boolean }) {
         )}
         <div>
           <Button type="submit" isLoading={createBoard.isPending}>
-            {t`Create ${isTemplate ? "template" : "board"}`}
+            {t`Create ${boardTypeLabel}`}
           </Button>
         </div>
       </div>

apps/web/src/views/boards/index.tsx

@@ -5,8 +5,12 @@ import {
   ListboxOptions,
 } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
-import { HiArrowDownTray, HiChevronDown, HiOutlinePlusSmall } from "react-icons/hi2";
-import { useState } from "react";
+import { useMemo, useState } from "react";
+import {
+  HiArrowDownTray,
+  HiChevronDown,
+  HiOutlinePlusSmall,
+} from "react-icons/hi2";
 
 import Button from "~/components/Button";
 import FeedbackModal from "~/components/FeedbackModal";
@@ -22,35 +26,41 @@ import { BoardsList } from "./components/BoardsList";
 import { ImportBoardsForm } from "./components/ImportBoardsForm";
 import { NewBoardForm } from "./components/NewBoardForm";
 
-const boardsTabs = [
-  { key: "boards" as const, label: t`Active` },
-  { key: "archived" as const, label: t`Archived` },
-];
-
 export default function BoardsPage({ isTemplate }: { isTemplate?: boolean }) {
   const { openModal, modalContentType, isOpen } = useModal();
   const { workspace } = useWorkspace();
   const [activeTab, setActiveTab] = useState<"boards" | "archived">("boards");
   const { canCreateBoard } = usePermissions();
+  const boardLabel = isTemplate ? t`Templates` : t`Boards`;
+  const boardTypeLabel = isTemplate ? t`template` : t`board`;
+  const boardsTabs = [
+    { key: "boards" as const, label: t`Active` },
+    { key: "archived" as const, label: t`Archived` },
+  ];
 
-  const { tooltipContent: createModalShortcutTooltipContent } =
-    useKeyboardShortcut({
-      type: "PRESS",
+  const createBoardShortcut = useMemo(
+    () => ({
+      type: "PRESS" as const,
       stroke: { key: "C" },
       action: () => canCreateBoard && openModal("NEW_BOARD"),
-      description: t`Create new ${isTemplate ? "template" : "board"}`,
-      group: "ACTIONS",
-    });
+      description: t`Create new ${boardTypeLabel}`,
+      group: "ACTIONS" as const,
+    }),
+    [boardTypeLabel, canCreateBoard, isTemplate, openModal],
+  );
+
+  const { tooltipContent: createModalShortcutTooltipContent } =
+    useKeyboardShortcut(createBoardShortcut);
 
   return (
     <>
       <PageHead
-        title={t`${isTemplate ? "Templates" : "Boards"} | ${workspace.name ?? t`Workspace`}`}
+        title={t`${boardLabel} | ${workspace.name ?? t`Workspace`}`}
       />
       <div className="m-auto h-full max-w-[1100px] p-8 px-5 md:px-28 md:py-12">
         <div className="relative z-10 mb-8 flex w-full items-center justify-between">
           <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
-            {t`${isTemplate ? "Templates" : "Boards"}`}
+            {boardLabel}
           </h1>
           <div className="flex gap-2">
             {!isTemplate && (
@@ -137,7 +147,7 @@ export default function BoardsPage({ isTemplate }: { isTemplate?: boolean }) {
                   onChange={(tab) => setActiveTab(tab)}
                 >
                   <div className="relative mb-4">
-                    <ListboxButton className="w-full appearance-none rounded-md border-0 bg-light-50 py-3 pl-3 pr-10 text-left text-sm font-semibold text-light-1000 shadow-sm ring-1 ring-inset ring-light-300  dark:bg-dark-50 dark:text-dark-1000 dark:ring-dark-300 dark:focus:ring-dark-500">
+                    <ListboxButton className="w-full appearance-none rounded-md border-0 bg-light-50 py-3 pl-3 pr-10 text-left text-sm font-semibold text-light-1000 shadow-sm ring-1 ring-inset ring-light-300 dark:bg-dark-50 dark:text-dark-1000 dark:ring-dark-300 dark:focus:ring-dark-500">
                       {boardsTabs.find((tab) => tab.key === activeTab)?.label ??
                         "Select a tab"}
                       <HiChevronDown
@@ -151,9 +161,10 @@ export default function BoardsPage({ isTemplate }: { isTemplate?: boolean }) {
                           key={tab.key}
                           value={tab.key}
                           className={({ selected }) =>
-                            `relative cursor-pointer select-none py-2 pl-3 pr-9 ${selected
-                              ? "font-bold text-light-1000 dark:text-dark-1000"
-                              : "font-normal text-light-1000 dark:text-dark-1000"
+                            `relative cursor-pointer select-none py-2 pl-3 pr-9 ${
+                              selected
+                                ? "font-bold text-light-1000 dark:text-dark-1000"
+                                : "font-normal text-light-1000 dark:text-dark-1000"
                             }`
                           }
                         >
@@ -175,10 +186,11 @@ export default function BoardsPage({ isTemplate }: { isTemplate?: boolean }) {
                         key={tab.key}
                         type="button"
                         onClick={() => setActiveTab(tab.key)}
-                        className={`whitespace-nowrap px-1 py-0 mt-2 mb-8 text-sm font-semibold transition-colors focus:outline-none ${activeTab === tab.key
-                          ? "border-light-1000 text-light-1000 dark:border-dark-1000 dark:text-dark-1000"
-                          : "border-transparent text-light-900 hover:border-light-950 hover:text-light-950 dark:text-dark-900 dark:hover:border-white/20 dark:hover:text-dark-950"
-                          }`}
+                        className={`mb-8 mt-2 whitespace-nowrap px-1 py-0 text-sm font-semibold transition-colors focus:outline-none ${
+                          activeTab === tab.key
+                            ? "border-light-1000 text-light-1000 dark:border-dark-1000 dark:text-dark-1000"
+                            : "border-transparent text-light-900 hover:border-light-950 hover:text-light-950 dark:text-dark-900 dark:hover:border-white/20 dark:hover:text-dark-950"
+                        }`}
                       >
                         {tab.label}
                       </button>

apps/web/src/views/card/components/ActivityList.tsx

@@ -525,7 +525,6 @@ const ActivityList = ({
               comment={activity.comment?.comment}
               isEdited={!!activity.comment?.updatedAt}
               isAuthor={activity.comment?.createdBy === sessionData?.user.id}
-              isAdmin={isAdmin ?? false}
               isViewOnly={!!isViewOnly}
             />
           );