MultiMailer WebUI

Standalone React/Vite WebUI for MultiMailer.

Layout

This shell implements the requested layout:

+--------+----------------------------------------------------------------------------------------+
| MSM    | Titlebar with tenant selector                         ? Help    Account selector       |
|        +----------------------------------------------------------------------------------------+
| Icon   | Breadcrumb                                                                             |
|        +---------------+-----------------------------------------------------------------------+
| Icon   | Submenu       | Content                                                               |
|        |               |                                                                       |

Run locally

Start the backend first:

cd multimailer-server/server
source .venv/bin/activate
python -m uvicorn app.main:app --reload --host 127.0.0.1 --port 8000

Start the WebUI:

cd multimailer-webui
npm install
npm run dev

Open:

http://127.0.0.1:5173

Use the development API key:

dev-multimailer-api-key

Current UI scope

Included now:

• screenshot-inspired app shell
• dark left icon rail
• top titlebar with tenant selector, help and account area
• breadcrumb/action bar
• module submenu
• dashboard cards
• campaign workspace
• Create / Review / Send wizard skeletons
• structured editor placeholders
• settings/admin placeholders
• local API key storage

Next steps:

1. Wire campaign list and version detail to backend.
2. Wire version autosave endpoints.
3. Implement Create Wizard data model.
4. Implement fields editor.
5. Implement recipient mapping table.
6. Implement attachment rule editor.
7. Implement review wizard around missing/ambiguous attachments.

Troubleshooting: campaigns response does not render

The server returns campaign lists as:

{
  "campaigns": []
}

The WebUI client normalizes this to an array internally. If the page still shows "No campaigns loaded yet", check:

curl -H "X-API-Key: dev-multimailer-api-key" \
  http://127.0.0.1:8000/api/v1/campaigns

During Vite development, either:

1. leave the WebUI API base URL empty and use the Vite /api proxy, or
2. configure FastAPI CORS and use http://127.0.0.1:8000 as API base URL.

To reset the saved API base URL:

localStorage.removeItem("multimailer.apiSettings.baseUrl")

Login and help shell update

The top line no longer contains the API URL, API key field or Blog link. The URL/API key remain under Settings for development and automation access.

The Help menu includes:

• context-sensitive Help, opened by the Help menu or F1
• User docs placeholder
• Admin docs placeholder
• GitLab link
• About modal

The account selector now opens a login flow. Development login requires the backend auth-session update:

Email: admin@example.local
Password: dev-admin

The tenant selector is currently informational. It becomes actionable once users can have memberships in multiple tenants.