intermittent commit

2026-07-14 13:22:11 +02:00
parent 4865de5007
commit b0337b2d26
28 changed files with 2264 additions and 490 deletions
--- a/webui/package-lock.json
+++ b/webui/package-lock.json
@@ -0,0 +1,142 @@
+{
+  "name": "@govoplan/mail-webui",
+  "version": "0.1.8",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@govoplan/mail-webui",
+      "version": "0.1.8",
+      "devDependencies": {
+        "typescript": "^5.7.2"
+      },
+      "peerDependencies": {
+        "@govoplan/core-webui": "^0.1.8",
+        "lucide-react": "^1.23.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-router-dom": "^7.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@govoplan/core-webui": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.24.0.tgz",
+      "integrity": "sha512-YT6mBD8lGKkg4nM39enlm94/sfJIiW0YKUT60fBy4YK8tai31ylg1VhGNWxkpSKHo9UagfnZqwIff3HTDQwXeA==",
+      "license": "ISC",
+      "peer": true,
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
+      "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.7"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.18.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.1.tgz",
+      "integrity": "sha512-GDLgg3i3uM0aeJO3Fm+TCS+sDQ7gu12T6x0qdTEzcwqEfleci7JwugVNIF3U//0FWKnJT7ptG+20B2jfDqnZAg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.18.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.1.tgz",
+      "integrity": "sha512-KaZh+X/6UtEp28x51AUYZDMg9NGoz2ja3dNHa+ta/tk40vCzKhQ/RypCWBMLbmDr6//E24Vv5uPsrqXFozdkAg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "react-router": "7.18.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    }
+  }
+}
--- a/webui/package.json
+++ b/webui/package.json
@@ -26,7 +26,7 @@
    }
  },
  "scripts": {
-    "test:mail-ui": "rm -rf .mail-test-build && mkdir -p .mail-test-build && printf '{\"type\":\"commonjs\"}\\n' > .mail-test-build/package.json && tsc -p tsconfig.mail-tests.json && node .mail-test-build/tests/mailbox-folders.test.js && node .mail-test-build/tests/mail-policy-validation.test.js"
+    "test:mail-ui": "rm -rf .mail-test-build && mkdir -p .mail-test-build && printf '{\"type\":\"commonjs\"}\\n' > .mail-test-build/package.json && tsc -p tsconfig.mail-tests.json && node .mail-test-build/tests/mailbox-folders.test.js && node .mail-test-build/tests/mail-profile-editor-model.test.js && node .mail-test-build/tests/mail-policy-validation.test.js"
  },
  "devDependencies": {
    "typescript": "^5.7.2"
--- a/webui/src/api/client.ts
+++ b/webui/src/api/client.ts
@@ -1 +1 @@
-export { apiFetch, apiUrl, authHeaders, csrfToken, apiDownload } from "@govoplan/core-webui";
+export { apiDownload, apiFetch, apiGetList, apiPath, apiPost, apiPostJson, apiQuery, apiUrl, authHeaders, csrfToken } from "@govoplan/core-webui";
--- a/webui/src/api/mail.ts
+++ b/webui/src/api/mail.ts
@@ -1,62 +1,66 @@
-import type { ApiSettings, DeltaDeletedItem } from "../types";
-import { apiFetch } from "./client";
+import type {
+  ApiSettings,
+  DeltaDeletedItem,
+  MailConnectionTestResponse,
+  MailImapFolderListResponse,
+  MailImapTestPayload,
+  MailProfilePolicy,
+  MailProfilePolicyResponse,
+  MailProfileScope,
+  MailSecurity,
+  MailServerProfile,
+  MailServerProfilePayload,
+  MailSmtpTestPayload,
+  MockMailboxMessage,
+  MockMailboxMessageResponse
+} from "@govoplan/core-webui";
+import { apiFetch, apiGetList, apiPath, apiPost, apiPostJson } from "./client";
+export { mailProfilePatternKeys, mailProfilePolicyLimitKeys } from "@govoplan/core-webui";
+export type {
+  MailConnectionTestResponse,
+  MailCredentialPolicy,
+  MailImapFolderListResponse,
+  MailImapFolderResponse,
+  MailImapTestPayload,
+  MailProfilePatternKey,
+  MailProfilePatternRules,
+  MailProfilePolicy,
+  MailProfilePolicyLimitKey,
+  MailProfilePolicyLimitPermissions,
+  MailProfilePolicyResponse,
+  MailProfileScope,
+  MailSecurity,
+  MailServerProfile,
+  MailServerProfileCredentialsPayload,
+  MailServerProfileListResponse,
+  MailServerProfilePayload,
+  MailSmtpTestPayload,
+  MailTransportCredentialsPayload,
+  MockMailboxMessage,
+  MockMailboxMessageResponse
+} from "@govoplan/core-webui";
+export type { MailPolicySourceStep as PolicySourceStep } from "@govoplan/core-webui";

-export type MailSecurity = "plain" | "tls" | "starttls";
-export type MailProfileScope = "system" | "tenant" | "user" | "group" | "campaign";
-
-export type MailSmtpTestPayload = {
-  host?: string | null;
-  port?: number | null;
-  username?: string | null;
-  password?: string | null;
-  security?: MailSecurity;
-  timeout_seconds?: number;
+export type MailAddressLookupCandidate = {
+  contact_id: string;
+  address_book_id: string;
+  display_name: string;
+  email?: string | null;
+  email_label?: string | null;
+  organization?: string | null;
+  role_title?: string | null;
+  tags: string[];
+  source_kind: string;
+  source_ref?: string | null;
+  source_revision?: string | null;
+  provenance: Record<string, unknown>;
 };

-export type MailImapTestPayload = MailSmtpTestPayload & {
-  sent_folder?: string | null;
+export type MailAddressLookupResponse = {
+  available: boolean;
+  candidates: MailAddressLookupCandidate[];
 };

-export type MailTransportCredentialsPayload = {
-  username?: string | null;
-  password?: string | null;
-};
-
-export type MailServerProfileCredentialsPayload = {
-  smtp?: MailTransportCredentialsPayload;
-  imap?: MailTransportCredentialsPayload;
-};
-
-export type MailConnectionTestResponse = {
-  ok: boolean;
-  protocol: "smtp" | "imap";
-  host?: string | null;
-  port?: number | null;
-  security?: MailSecurity | string | null;
-  message: string;
-  details?: Record<string, unknown>;
-};
-
-export type MailImapFolderResponse = {
-  name: string;
-  flags?: string[];
-  message_count?: number | null;
-  unseen_count?: number | null;
-};
-
-export type MailImapFolderListResponse = {
-  ok: boolean;
-  protocol: "imap";
-  host?: string | null;
-  port?: number | null;
-  security?: MailSecurity | string | null;
-  message: string;
-  folders: MailImapFolderResponse[];
-  detected_sent_folder?: string | null;
-  details?: Record<string, unknown>;
-};
-
-
 export type MailMailboxAttachment = {
  filename?: string | null;
  content_type: string;
@@ -99,9 +103,19 @@ export type MailMailboxMessageListResponse = {
  next_cursor?: string | null;
  cursor_stable?: boolean;
  full?: boolean;
+  from_cache?: boolean;
+  refreshing?: boolean;
+  indexed_at?: string | null;
  messages: MailMailboxMessageSummary[];
 };

+export type MailMailboxBootstrapResponse = {
+  profile_id: string;
+  folder: string;
+  folders: MailImapFolderListResponse;
+  messages: MailMailboxMessageListResponse;
+};
+
 export type MailMailboxMessageResponse = {
  profile_id: string;
  folder: string;
@@ -111,26 +125,6 @@ export type MailMailboxMessageResponse = {
  message: MailMailboxMessageDetail;
 };

-export type MailServerProfile = {
-  id: string;
-  tenant_id?: string | null;
-  scope_type: MailProfileScope;
-  scope_id?: string | null;
-  name: string;
-  slug: string;
-  description?: string | null;
-  is_active: boolean;
-  smtp: MailSmtpTestPayload;
-  imap?: MailImapTestPayload | null;
-  credentials?: MailServerProfileCredentialsPayload | null;
-  smtp_password_configured: boolean;
-  imap_password_configured: boolean;
-  created_at: string;
-  updated_at: string;
-};
-
-export type MailServerProfileListResponse = { profiles: MailServerProfile[] };
-
 export type MailSettingsDeltaResponse = {
  profiles: MailServerProfile[];
  policy?: MailProfilePolicyResponse | null;
@@ -141,92 +135,15 @@ export type MailSettingsDeltaResponse = {
  full: boolean;
 };

-export const mailProfilePatternKeys = [
-  "smtp_hosts",
-  "imap_hosts",
-  "envelope_senders",
-  "from_headers",
-  "recipient_domains"
-] as const;
-
-export type MailProfilePatternKey = typeof mailProfilePatternKeys[number];
-export type MailProfilePatternRules = Partial<Record<MailProfilePatternKey, string[]>>;
-
-export const mailProfilePolicyLimitKeys = [
-  "allowed_profile_ids",
-  "allow_user_profiles",
-  "allow_group_profiles",
-  "allow_campaign_profiles",
-  "smtp_credentials.inherit",
-  "imap_credentials.inherit",
-  "whitelist.smtp_hosts",
-  "whitelist.imap_hosts",
-  "whitelist.envelope_senders",
-  "whitelist.from_headers",
-  "whitelist.recipient_domains",
-  "blacklist.smtp_hosts",
-  "blacklist.imap_hosts",
-  "blacklist.envelope_senders",
-  "blacklist.from_headers",
-  "blacklist.recipient_domains"
-] as const;
-
-export type MailProfilePolicyLimitKey = typeof mailProfilePolicyLimitKeys[number];
-export type MailProfilePolicyLimitPermissions = Partial<Record<MailProfilePolicyLimitKey, boolean>>;
-
-export type MailCredentialPolicy = {
-  inherit?: boolean | null;
-};
-
-export type MailProfilePolicy = {
-  allowed_profile_ids?: string[] | null;
-  allow_user_profiles?: boolean | null;
-  allow_group_profiles?: boolean | null;
-  allow_campaign_profiles?: boolean | null;
-  smtp_credentials?: MailCredentialPolicy | null;
-  imap_credentials?: MailCredentialPolicy | null;
-  whitelist?: MailProfilePatternRules | null;
-  blacklist?: MailProfilePatternRules | null;
-  allow_lower_level_limits?: MailProfilePolicyLimitPermissions | null;
-};
-
-export type PolicySourceStep = {
-  scope_type: string;
-  scope_id?: string | null;
-  label: string;
-  applied_fields?: string[];
-  policy?: MailProfilePolicy | null;
-};
-
-export type MailProfilePolicyResponse = {
-  scope_type: MailProfileScope;
-  scope_id?: string | null;
-  policy: MailProfilePolicy;
-  effective_policy?: MailProfilePolicy | null;
-  parent_policy?: MailProfilePolicy | null;
-  effective_policy_sources?: PolicySourceStep[];
-  parent_policy_sources?: PolicySourceStep[];
-};
-
-export type MailServerProfilePayload = {
-  name: string;
-  slug?: string | null;
-  description?: string | null;
-  is_active?: boolean;
-  scope_type?: MailProfileScope;
-  scope_id?: string | null;
-  smtp: MailSmtpTestPayload;
-  imap?: MailImapTestPayload | null;
-  credentials?: MailServerProfileCredentialsPayload | null;
-};
+export async function lookupMailAddresses(settings: ApiSettings, query: string, limit = 25): Promise<MailAddressLookupResponse> {
+  return apiFetch<MailAddressLookupResponse>(settings, apiPath("/api/v1/mail/address-lookup", { query, limit }));
+}

 export async function listMailServerProfiles(settings: ApiSettings, includeInactive = false, campaignId?: string): Promise<MailServerProfile[]> {
-  const params = new URLSearchParams();
-  if (includeInactive) params.set("include_inactive", "true");
-  if (campaignId) params.set("campaign_id", campaignId);
-  const suffix = params.toString() ? `?${params.toString()}` : "";
-  const response = await apiFetch<MailServerProfileListResponse>(settings, `/api/v1/mail/profiles${suffix}`);
-  return response.profiles ?? [];
+  return apiGetList<MailServerProfile, "profiles">(settings, "/api/v1/mail/profiles", "profiles", {
+    include_inactive: includeInactive ? true : undefined,
+    campaign_id: campaignId
+  });
 }

 export async function fetchMailSettingsDelta(
@@ -240,15 +157,14 @@ export async function fetchMailSettingsDelta(
    limit?: number;
  } = {}
 ): Promise<MailSettingsDeltaResponse> {
-  const search = new URLSearchParams();
-  if (params.scope_type) search.set("scope_type", params.scope_type);
-  if (params.scope_id) search.set("scope_id", params.scope_id);
-  if (params.include_inactive) search.set("include_inactive", "true");
-  if (params.campaign_id) search.set("campaign_id", params.campaign_id);
-  if (params.since) search.set("since", params.since);
-  if (params.limit) search.set("limit", String(params.limit));
-  const suffix = search.toString() ? `?${search.toString()}` : "";
-  return apiFetch<MailSettingsDeltaResponse>(settings, `/api/v1/mail/settings/delta${suffix}`);
+  return apiFetch<MailSettingsDeltaResponse>(settings, apiPath("/api/v1/mail/settings/delta", {
+    scope_type: params.scope_type,
+    scope_id: params.scope_id,
+    include_inactive: params.include_inactive ? true : undefined,
+    campaign_id: params.campaign_id,
+    since: params.since,
+    limit: params.limit
+  }));
 }

 export async function createMailServerProfile(settings: ApiSettings, payload: MailServerProfilePayload): Promise<MailServerProfile> {
@@ -277,11 +193,10 @@ export async function getMailProfilePolicy(
  scopeId?: string | null,
  campaignId?: string | null
 ): Promise<MailProfilePolicyResponse> {
-  const params = new URLSearchParams();
-  if (scopeId) params.set("scope_id", scopeId);
-  if (campaignId) params.set("campaign_id", campaignId);
-  const suffix = params.toString() ? `?${params.toString()}` : "";
-  return apiFetch<MailProfilePolicyResponse>(settings, `/api/v1/mail/policies/${encodeURIComponent(scopeType)}${suffix}`);
+  return apiFetch<MailProfilePolicyResponse>(settings, apiPath(`/api/v1/mail/policies/${encodeURIComponent(scopeType)}`, {
+    scope_id: scopeId,
+    campaign_id: campaignId
+  }));
 }

 export async function updateMailProfilePolicy(
@@ -290,29 +205,45 @@ export async function updateMailProfilePolicy(
  policy: MailProfilePolicy,
  scopeId?: string | null
 ): Promise<MailProfilePolicyResponse> {
-  const params = new URLSearchParams();
-  if (scopeId) params.set("scope_id", scopeId);
-  const suffix = params.toString() ? `?${params.toString()}` : "";
-  return apiFetch<MailProfilePolicyResponse>(settings, `/api/v1/mail/policies/${encodeURIComponent(scopeType)}${suffix}`, {
+  return apiFetch<MailProfilePolicyResponse>(settings, apiPath(`/api/v1/mail/policies/${encodeURIComponent(scopeType)}`, { scope_id: scopeId }), {
    method: "PUT",
    body: JSON.stringify({ policy })
  });
 }

 export async function testMailProfileSmtp(settings: ApiSettings, profileId: string): Promise<MailConnectionTestResponse> {
-  return apiFetch<MailConnectionTestResponse>(settings, `/api/v1/mail/profiles/${encodeURIComponent(profileId)}/test-smtp`, { method: "POST" });
+  return apiPost<MailConnectionTestResponse>(settings, `/api/v1/mail/profiles/${encodeURIComponent(profileId)}/test-smtp`);
 }

 export async function testMailProfileImap(settings: ApiSettings, profileId: string): Promise<MailConnectionTestResponse> {
-  return apiFetch<MailConnectionTestResponse>(settings, `/api/v1/mail/profiles/${encodeURIComponent(profileId)}/test-imap`, { method: "POST" });
+  return apiPost<MailConnectionTestResponse>(settings, `/api/v1/mail/profiles/${encodeURIComponent(profileId)}/test-imap`);
 }

 export async function listMailProfileImapFolders(settings: ApiSettings, profileId: string): Promise<MailImapFolderListResponse> {
-  return apiFetch<MailImapFolderListResponse>(settings, `/api/v1/mail/profiles/${encodeURIComponent(profileId)}/list-imap-folders`, { method: "POST" });
+  return apiPost<MailImapFolderListResponse>(settings, `/api/v1/mail/profiles/${encodeURIComponent(profileId)}/list-imap-folders`);
 }

-export async function listMailboxFolders(settings: ApiSettings, profileId: string): Promise<MailImapFolderListResponse> {
-  return apiFetch<MailImapFolderListResponse>(settings, `/api/v1/mail/profiles/${encodeURIComponent(profileId)}/mailbox/folders`);
+export async function listMailboxFolders(settings: ApiSettings, profileId: string, includeStatus = false, refresh = false): Promise<MailImapFolderListResponse> {
+  return apiFetch<MailImapFolderListResponse>(settings, apiPath(`/api/v1/mail/profiles/${encodeURIComponent(profileId)}/mailbox/folders`, {
+    include_status: includeStatus ? true : undefined,
+    refresh: refresh ? true : undefined
+  }));
+}
+
+export async function bootstrapMailbox(
+  settings: ApiSettings,
+  profileId: string,
+  folder = "INBOX",
+  limit = 50,
+  offset = 0,
+  refresh = false
+): Promise<MailMailboxBootstrapResponse> {
+  return apiFetch<MailMailboxBootstrapResponse>(settings, apiPath(`/api/v1/mail/profiles/${encodeURIComponent(profileId)}/mailbox/bootstrap`, {
+    folder,
+    limit,
+    offset,
+    refresh: refresh ? true : undefined
+  }));
 }

 export async function listMailboxMessages(
@@ -321,11 +252,16 @@ export async function listMailboxMessages(
  folder = "INBOX",
  limit = 50,
  offset = 0,
-  cursor?: string | null
+  cursor?: string | null,
+  refresh = false
 ): Promise<MailMailboxMessageListResponse> {
-  const params = new URLSearchParams({ folder, limit: String(limit), offset: String(offset) });
-  if (cursor) params.set("cursor", cursor);
-  return apiFetch<MailMailboxMessageListResponse>(settings, `/api/v1/mail/profiles/${encodeURIComponent(profileId)}/mailbox/messages?${params.toString()}`);
+  return apiFetch<MailMailboxMessageListResponse>(settings, apiPath(`/api/v1/mail/profiles/${encodeURIComponent(profileId)}/mailbox/messages`, {
+    folder,
+    limit,
+    offset,
+    cursor,
+    refresh: refresh ? true : undefined
+  }));
 }

 export async function getMailboxMessage(
@@ -334,69 +270,34 @@ export async function getMailboxMessage(
  folder: string,
  uid: string
 ): Promise<MailMailboxMessageResponse> {
-  const params = new URLSearchParams({ folder });
-  return apiFetch<MailMailboxMessageResponse>(settings, `/api/v1/mail/profiles/${encodeURIComponent(profileId)}/mailbox/messages/${encodeURIComponent(uid)}?${params.toString()}`);
+  return apiFetch<MailMailboxMessageResponse>(settings, apiPath(`/api/v1/mail/profiles/${encodeURIComponent(profileId)}/mailbox/messages/${encodeURIComponent(uid)}`, { folder }));
 }

 export async function testSmtpSettings(
  settings: ApiSettings,
  payload: MailSmtpTestPayload
 ): Promise<MailConnectionTestResponse> {
-  return apiFetch<MailConnectionTestResponse>(settings, "/api/v1/mail/test-smtp", {
-    method: "POST",
-    body: JSON.stringify(payload)
-  });
+  return apiPostJson<MailConnectionTestResponse>(settings, "/api/v1/mail/test-smtp", payload);
 }

 export async function testImapSettings(
  settings: ApiSettings,
  payload: MailImapTestPayload
 ): Promise<MailConnectionTestResponse> {
-  return apiFetch<MailConnectionTestResponse>(settings, "/api/v1/mail/test-imap", {
-    method: "POST",
-    body: JSON.stringify(payload)
-  });
+  return apiPostJson<MailConnectionTestResponse>(settings, "/api/v1/mail/test-imap", payload);
 }

 export async function listImapFolders(
  settings: ApiSettings,
  payload: MailImapTestPayload
 ): Promise<MailImapFolderListResponse> {
-  return apiFetch<MailImapFolderListResponse>(settings, "/api/v1/mail/list-imap-folders", {
-    method: "POST",
-    body: JSON.stringify(payload)
-  });
+  return apiPostJson<MailImapFolderListResponse>(settings, "/api/v1/mail/list-imap-folders", payload);
 }

-export type MockMailboxMessage = {
-  id: string;
-  kind: "smtp" | "imap_append" | string;
-  created_at: string;
-  envelope_from?: string | null;
-  envelope_recipients?: string[];
-  subject?: string | null;
-  from_header?: string | null;
-  to_header?: string | null;
-  cc_header?: string | null;
-  bcc_header?: string | null;
-  message_id?: string | null;
-  size_bytes?: number;
-  body_preview?: string | null;
-  attachment_count?: number;
-  folder?: string | null;
-  raw_eml?: string | null;
-  headers?: Record<string, string>;
-  attachments?: Array<{ filename?: string | null; content_type?: string | null; size_bytes?: number }>;
-};
-
 export type MockMailboxListResponse = {
  messages: MockMailboxMessage[];
 };

-export type MockMailboxMessageResponse = {
-  message: MockMailboxMessage;
-};
-
 export type MockMailboxFailureConfig = {
  fail_next_smtp?: boolean | null;
  fail_next_imap?: boolean | null;
@@ -404,8 +305,7 @@ export type MockMailboxFailureConfig = {
 };

 export async function listMockMailboxMessages(settings: ApiSettings, kind?: string): Promise<MockMailboxListResponse> {
-  const suffix = kind ? `?kind=${encodeURIComponent(kind)}` : "";
-  return apiFetch<MockMailboxListResponse>(settings, `/api/v1/dev/mailbox/messages${suffix}`);
+  return apiFetch<MockMailboxListResponse>(settings, apiPath("/api/v1/dev/mailbox/messages", { kind }));
 }

 export async function getMockMailboxMessage(settings: ApiSettings, id: string): Promise<MockMailboxMessageResponse> {
--- a/webui/src/features/mail/MailProfileManagement.tsx
+++ b/webui/src/features/mail/MailProfileManagement.tsx
@@ -37,6 +37,16 @@ import { ConfirmDialog } from "@govoplan/core-webui";
 import { Dialog } from "@govoplan/core-webui";
 import { DismissibleAlert } from "@govoplan/core-webui";
 import { FormField, i18nMessage, useUnsavedDraftGuard } from "@govoplan/core-webui";
+import {
+  mailProfileChildDescriptors,
+  mailProfileEditTargetInitialSection,
+  mailProfileEditTargetPanelMode,
+  mailProfileEditTargetShowsProfileFields,
+  mailProfileEditTargetShowsSettingsPanel,
+  mailProfileEditTargetVisibleSections,
+  type MailProfileEditTarget,
+  type MailProfileProtocol
+} from "./mailProfileEditorModel";
 export type MailProfileTargetOption = {
  id: string;
  label: string;
@@ -96,7 +106,8 @@ type PolicyFlagValue = "inherit" | "allow" | "deny";
 type CredentialInheritanceValue = "inherit" | "profile" | "local";
 type MailProfileTreeRow =
 {kind: "profile";id: string;profile: MailServerProfile;} |
-{kind: "credential";id: string;profile: MailServerProfile;protocol: "smtp" | "imap";};
+{kind: "server";id: string;profile: MailServerProfile;protocol: MailProfileProtocol;} |
+{kind: "credential";id: string;profile: MailServerProfile;protocol: MailProfileProtocol;};

 const securityOptions = mailServerSecurityOptions as readonly MailSecurity[];

@@ -135,6 +146,7 @@ export function MailProfileScopeManager({
  const [profiles, setProfiles] = useState<MailServerProfile[]>([]);
  const [selectedTargetId, setSelectedTargetId] = useState(scopeId || targetOptions[0]?.id || "");
  const [editing, setEditing] = useState<EditingProfile>(null);
+  const [editingTarget, setEditingTarget] = useState<MailProfileEditTarget>({ kind: "create" });
  const [deactivating, setDeactivating] = useState<MailServerProfile | null>(null);
  const [draft, setDraft] = useState<ProfileDraft>(emptyProfileDraft());
  const [savedProfileDraftKey, setSavedProfileDraftKey] = useState(profileDraftKey(emptyProfileDraft()));
@@ -233,15 +245,17 @@ export function MailProfileScopeManager({
    const nextDraft = emptyProfileDraft();
    setDraft(nextDraft);
    setSavedProfileDraftKey(profileDraftKey(nextDraft));
+    setEditingTarget({ kind: "create" });
    setEditing("new");
    setError("");
    setSuccess("");
  }

-  function openEdit(profile: MailServerProfile) {
+  function openEdit(profile: MailServerProfile, target: MailProfileEditTarget = { kind: "profile" }) {
    const nextDraft = profileToDraft(profile);
    setDraft(nextDraft);
    setSavedProfileDraftKey(profileDraftKey(nextDraft));
+    setEditingTarget(target);
    setEditing(profile);
    setError("");
    setSuccess("");
@@ -252,6 +266,7 @@ export function MailProfileScopeManager({
    const nextDraft = emptyProfileDraft();
    setDraft(nextDraft);
    setSavedProfileDraftKey(profileDraftKey(nextDraft));
+    setEditingTarget({ kind: "create" });
  }

  async function saveProfile(): Promise<boolean> {
@@ -308,6 +323,8 @@ export function MailProfileScopeManager({
    width: "minmax(260px, 1.4fr)",
    render: (row) => row.kind === "profile" ?
    <div className="connection-tree-main"><strong>{row.profile.name}</strong><div className="connection-tree-muted-line">{row.profile.slug} · {scopeLabel(row.profile)}</div></div> :
+    row.kind === "server" ?
+    <MailServerTreeCell profile={row.profile} protocol={row.protocol} /> :
    <MailCredentialTreeCell profile={row.profile} protocol={row.protocol} />
  },
  {
@@ -322,7 +339,7 @@ export function MailProfileScopeManager({
    id: "policy",
    header: "i18n:govoplan-mail.policy.bb9cf141",
    width: "minmax(150px, 0.8fr)",
-    render: (row) => row.kind === "profile" ? scopeLabel(row.profile) : mailCredentialPolicySummary(profileEffectivePolicy, row.protocol)
+    render: (row) => row.kind === "profile" ? scopeLabel(row.profile) : row.kind === "server" ? row.protocol.toUpperCase() : mailCredentialPolicySummary(profileEffectivePolicy, row.protocol)
  },
  {
    id: "status",
@@ -330,22 +347,33 @@ export function MailProfileScopeManager({
    width: "110px",
    render: (row) => row.kind === "profile" ?
    <span className={`status-badge ${row.profile.is_active ? "success" : "neutral"}`}>{row.profile.is_active ? "i18n:govoplan-mail.active.a733b809" : "i18n:govoplan-mail.inactive.09af574c"}</span> :
+    row.kind === "server" ?
+    <span className={`status-badge ${transportConfigured(row.profile, row.protocol) ? "success" : "neutral"}`}>{transportConfigured(row.profile, row.protocol) ? "i18n:govoplan-core.configured.668c5fff" : "i18n:govoplan-core.not_configured.811931bb"}</span> :
    <span className={`status-badge ${mailCredentialConfigured(row.profile, row.protocol) ? "success" : "neutral"}`}>{mailCredentialConfigured(row.profile, row.protocol) ? "i18n:govoplan-mail.saved.c0ae8f6e" : "i18n:govoplan-mail.local.dc99d54d"}</span>
  }],
  [profileEffectivePolicy]);

  function mailProfileChildren(row: MailProfileTreeRow): MailProfileTreeRow[] {
    if (row.kind !== "profile") return [];
-    const children: MailProfileTreeRow[] = [{ kind: "credential", id: `credential:${row.profile.id}:smtp`, profile: row.profile, protocol: "smtp" }];
-    if (row.profile.imap) children.push({ kind: "credential", id: `credential:${row.profile.id}:imap`, profile: row.profile, protocol: "imap" });
+    const children: MailProfileTreeRow[] = [
+      ...mailProfileChildDescriptors(row.profile).map((child) => ({ ...child, profile: row.profile }))
+    ];
    return children;
  }

  function renderMailProfileActions(row: MailProfileTreeRow) {
+    if (row.kind === "server") {
+      const label = `Edit ${row.protocol.toUpperCase()} server`;
+      return (
+        <div className="admin-icon-actions">
+          <Button type="button" className="admin-icon-button" title={label} aria-label={label} onClick={() => openEdit(row.profile, { kind: "server", protocol: row.protocol })} disabled={!canWriteProfiles || busy}><Pencil size={16} /></Button>
+        </div>);
+
+    }
    if (row.kind === "credential") {
      return (
        <div className="admin-icon-actions">
-          <Button type="button" className="admin-icon-button" title={i18nMessage("i18n:govoplan-mail.edit_value_credentials.1e2dc4f6", { value0: row.protocol.toUpperCase() })} aria-label={i18nMessage("i18n:govoplan-mail.edit_value_credentials.1e2dc4f6", { value0: row.protocol.toUpperCase() })} onClick={() => openEdit(row.profile)} disabled={!canWriteProfiles || busy}><Pencil size={16} /></Button>
+          <Button type="button" className="admin-icon-button" title={i18nMessage("i18n:govoplan-mail.edit_value_credentials.1e2dc4f6", { value0: row.protocol.toUpperCase() })} aria-label={i18nMessage("i18n:govoplan-mail.edit_value_credentials.1e2dc4f6", { value0: row.protocol.toUpperCase() })} onClick={() => openEdit(row.profile, { kind: "credentials", protocol: row.protocol })} disabled={!canWriteProfiles || busy}><Pencil size={16} /></Button>
        </div>);

    }
@@ -411,13 +439,13 @@ export function MailProfileScopeManager({

      <Dialog
        open={editing !== null}
-        title={editing === "new" ? "i18n:govoplan-mail.create_mail_profile.4d2f8f9f" : "i18n:govoplan-mail.edit_mail_profile.95d1af9c"}
-        onClose={() => !busy && setEditing(null)}
+        title={profileDialogTitle(editing, editingTarget)}
+        onClose={() => !busy && closeProfileEditor()}
        className="admin-dialog admin-dialog-wide mail-profile-dialog"
        closeDisabled={busy}
-        footer={<><Button onClick={() => setEditing(null)} disabled={busy}>i18n:govoplan-mail.cancel.77dfd213</Button><Button variant="primary" onClick={() => void saveProfile()} disabled={!canWriteProfiles || busy || !draft.name.trim() || !scopeReady}>{busy ? "i18n:govoplan-mail.saving.56a2285c" : "i18n:govoplan-mail.save_profile.f597c0e8"}</Button></>}>
+        footer={<><Button onClick={closeProfileEditor} disabled={busy}>i18n:govoplan-mail.cancel.77dfd213</Button><Button variant="primary" onClick={() => void saveProfile()} disabled={!canWriteProfiles || busy || !draft.name.trim() || !scopeReady}>{busy ? "i18n:govoplan-mail.saving.56a2285c" : "i18n:govoplan-mail.save_profile.f597c0e8"}</Button></>}>

-        <ProfileForm settings={settings} draft={draft} setDraft={setDraft} editing={editing} busy={busy} canWrite={canWriteProfiles} canManageCredentials={canManageCredentials} effectivePolicy={profileEffectivePolicy} />
+        <ProfileForm settings={settings} draft={draft} setDraft={setDraft} editing={editing} busy={busy} canWrite={canWriteProfiles} canManageCredentials={canManageCredentials} effectivePolicy={profileEffectivePolicy} editTarget={editingTarget} />
      </Dialog>

      <ConfirmDialog
@@ -771,17 +799,9 @@ function ProfileForm({
  busy,
  canWrite,
  canManageCredentials,
-  effectivePolicy
-
-
-
-
-
-
-
-
-
-}: {settings: ApiSettings;draft: ProfileDraft;setDraft: (draft: ProfileDraft) => void;editing: EditingProfile;busy: boolean;canWrite: boolean;canManageCredentials: boolean;effectivePolicy?: MailProfilePolicy | null;}) {
+  effectivePolicy,
+  editTarget
+}: {settings: ApiSettings;draft: ProfileDraft;setDraft: (draft: ProfileDraft) => void;editing: EditingProfile;busy: boolean;canWrite: boolean;canManageCredentials: boolean;effectivePolicy?: MailProfilePolicy | null;editTarget: MailProfileEditTarget;}) {
  const [smtpTestResult, setSmtpTestResult] = useState<MailServerConnectionTestResult | null>(null);
  const [imapTestResult, setImapTestResult] = useState<MailServerConnectionTestResult | null>(null);
  const [folderResult, setFolderResult] = useState<MailServerFolderLookupResult | null>(null);
@@ -790,6 +810,11 @@ function ProfileForm({
  const disabled = busy || !canWrite;
  const credentialDisabled = disabled || !canManageCredentials;
  const existingProfile = editing !== "new" ? editing : null;
+  const initialSection = mailProfileEditTargetInitialSection(editTarget);
+  const settingsPanelMode = mailProfileEditTargetPanelMode(editTarget);
+  const visibleSections = mailProfileEditTargetVisibleSections(editTarget);
+  const showProfileFields = mailProfileEditTargetShowsProfileFields(editTarget);
+  const showSettingsPanel = mailProfileEditTargetShowsSettingsPanel(editTarget);
  const draftHasImap = hasDraftImapSettings(draft);
  const useSavedSmtpTest = Boolean(existingProfile && !draft.smtpPassword && existingProfile.smtp_password_configured);
  const useSavedImapTest = Boolean(existingProfile && !draft.imapPassword && existingProfile.imap_password_configured);
@@ -803,7 +828,7 @@ function ProfileForm({
    setImapTestResult(null);
    setFolderResult(null);
    setMailActionState(null);
-  }, [editing]);
+  }, [editing, editTarget]);

  function patchSmtpSettings(patch: Partial<MailServerSmtpSettings>) {
    setDraft({
@@ -896,12 +921,18 @@ function ProfileForm({

  return (
    <div className="mail-profile-form">
+      {showProfileFields &&
      <div className="admin-form-grid two-columns">
        <FormField label="i18n:govoplan-mail.name.709a2322"><input value={draft.name} disabled={disabled} onChange={(event) => setDraft({ ...draft, name: event.target.value })} /></FormField>
        <FormField label="i18n:govoplan-mail.slug.094da9b9"><input value={draft.slug} disabled={disabled} onChange={(event) => setDraft({ ...draft, slug: event.target.value })} placeholder="i18n:govoplan-mail.generated_from_name.33d69a91" /></FormField>
        <FormField label="i18n:govoplan-mail.status.bae7d5be"><select value={draft.isActive ? "active" : "inactive"} disabled={disabled} onChange={(event) => setDraft({ ...draft, isActive: event.target.value === "active" })}><option value="active">i18n:govoplan-mail.active.a733b809</option><option value="inactive">i18n:govoplan-mail.inactive.09af574c</option></select></FormField>
        <FormField label="i18n:govoplan-mail.description.55f8ebc8"><textarea rows={3} value={draft.description} disabled={disabled} onChange={(event) => setDraft({ ...draft, description: event.target.value })} /></FormField>
      </div>
+      }
+
+      {editTarget.kind === "profile" && existingProfile &&
+      <ProfileTransportSummary profile={existingProfile} />
+      }

      {policyMessages.length > 0 &&
      <DismissibleAlert tone="warning" resetKey={policyMessages.map((item) => `${item.key}:${item.value}`).join("|")} dismissible={false}>
@@ -910,6 +941,7 @@ function ProfileForm({
        </DismissibleAlert>
      }

+      {showSettingsPanel && settingsPanelMode &&
      <MailServerSettingsPanel
        smtp={{ host: draft.smtpHost, port: draft.smtpPort, security: draft.smtpSecurity, timeout_seconds: draft.smtpTimeout }}
        imap={{ host: draft.imapHost, port: draft.imapPort, security: draft.imapSecurity, sent_folder: draft.imapSentFolder, timeout_seconds: draft.imapTimeout }}
@@ -936,7 +968,11 @@ function ProfileForm({
        imapTestResult={imapTestResult}
        folderLookupResult={folderResult}
        onUseDetectedFolder={useDetectedSentFolder}
-        useDetectedFolderDisabled={disabled || !draftHasImap} />
+        useDetectedFolderDisabled={disabled || !draftHasImap}
+        initialSection={initialSection}
+        visibleSections={visibleSections}
+        mode={settingsPanelMode} />
+      }

    </div>);

@@ -992,6 +1028,33 @@ function MailCredentialTreeCell({ profile, protocol }: {profile: MailServerProfi

 }

+function ProfileTransportSummary({ profile }: {profile: MailServerProfile;}) {
+  return (
+    <div className="mail-profile-transport-summary">
+      <div>
+        <span>SMTP server</span>
+        <strong>{transportLabel(profile.smtp)}</strong>
+        <small>{mailCredentialConfigured(profile, "smtp") ? "i18n:govoplan-mail.password_saved.f6fab237" : "i18n:govoplan-mail.no_saved_password.32ce2b16"}</small>
+      </div>
+      <div>
+        <span>IMAP server</span>
+        <strong>{transportLabel(profile.imap)}</strong>
+        <small>{profile.imap ? mailCredentialConfigured(profile, "imap") ? "i18n:govoplan-mail.password_saved.f6fab237" : "i18n:govoplan-mail.no_saved_password.32ce2b16" : "i18n:govoplan-mail.not_configured.811931bb"}</small>
+      </div>
+    </div>);
+
+}
+
+function MailServerTreeCell({ profile, protocol }: {profile: MailServerProfile;protocol: "smtp" | "imap";}) {
+  const transport = protocol === "smtp" ? profile.smtp : profile.imap;
+  return (
+    <div className="connection-tree-main">
+      <strong>{protocol.toUpperCase()} server</strong>
+      <div className="connection-tree-muted-line">{transportLabel(transport)}</div>
+    </div>);
+
+}
+
 function TransportCell({ profile, protocol }: {profile: MailServerProfile;protocol: "smtp" | "imap";}) {
  const transport = protocol === "smtp" ? profile.smtp : profile.imap;
  if (!transport) return <span className="muted">i18n:govoplan-mail.not_configured.811931bb</span>;
@@ -999,6 +1062,11 @@ function TransportCell({ profile, protocol }: {profile: MailServerProfile;protoc
  return <div><strong>{transportLabel(transport)}</strong><div className="muted small-note">i18n:govoplan-mail.password.8be3c943 {hasPassword ? "configured" : "i18n:govoplan-mail.not_configured.67f2141f"}</div></div>;
 }

+function transportConfigured(profile: MailServerProfile, protocol: "smtp" | "imap"): boolean {
+  const transport = protocol === "smtp" ? profile.smtp : profile.imap;
+  return Boolean(transport?.host);
+}
+
 function mailCredentialConfigured(profile: MailServerProfile, protocol: "smtp" | "imap"): boolean {
  return protocol === "smtp" ? profile.smtp_password_configured : profile.imap_password_configured;
 }
@@ -1007,6 +1075,13 @@ function mailCredentialPolicySummary(policy: MailProfilePolicy | null, protocol:
  return credentialInheritanceLabel(protocol === "smtp" ? policy?.smtp_credentials : policy?.imap_credentials);
 }

+function profileDialogTitle(editing: EditingProfile, target: MailProfileEditTarget): string {
+  if (editing === "new") return "i18n:govoplan-mail.create_mail_profile.4d2f8f9f";
+  if (target.kind === "server") return `Edit ${target.protocol.toUpperCase()} server`;
+  if (target.kind === "credentials") return i18nMessage("i18n:govoplan-mail.edit_value_credentials.1e2dc4f6", { value0: target.protocol.toUpperCase() });
+  return "i18n:govoplan-mail.edit_mail_profile.95d1af9c";
+}
+
 function emptyProfileDraft(): ProfileDraft {
  return {
    name: "",
@@ -1112,7 +1187,7 @@ function rawImapPayload(draft: ProfileDraft, preserveBlankPassword: boolean): Ma
 }

 function hasDraftImapSettings(draft: ProfileDraft): boolean {
-  return hasMailImapSettings([draft.imapHost, draft.imapUsername, draft.imapPassword]);
+  return hasMailImapSettings([draft.imapHost]);
 }

 function normalizePolicy(value: MailProfilePolicy | null | undefined): MailProfilePolicy {
--- a/webui/src/features/mail/MailboxPage.tsx
+++ b/webui/src/features/mail/MailboxPage.tsx
@@ -11,8 +11,8 @@ import {
  type ApiSettings
 } from "@govoplan/core-webui";
 import {
+  bootstrapMailbox,
  getMailboxMessage,
-  listMailboxFolders,
  listMailboxMessages,
  listMailServerProfiles,
  type MailImapFolderResponse,
@@ -50,6 +50,7 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
  const messageListRequestRef = useRef(0);
  const messageDetailRequestRef = useRef(0);
  const mailboxPageCursorsRef = useRef<Record<string, string | null>>({});
+  const skipNextMessageLoadRef = useRef(false);

  const selectedProfile = profiles.find((profile) => profile.id === selectedProfileId) ?? null;
  const imapProfiles = useMemo(() => profiles.filter((profile) => profile.is_active && profile.imap), [profiles]);
@@ -70,8 +71,15 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
  useEffect(() => {void loadProfiles();}, [settings.apiBaseUrl, settings.apiKey, settings.accessToken]);
  useEffect(() => {selectedMessageKeyRef.current = selectedMessageKeyState;}, [selectedMessageKeyState]);
  useEffect(() => {if (messagePage > messagePageCount) setMessagePage(messagePageCount);}, [messagePage, messagePageCount]);
-  useEffect(() => {if (selectedProfileId) void loadFolders(selectedProfileId);}, [selectedProfileId]);
-  useEffect(() => {if (selectedProfileId && selectedFolder && foldersReady) void loadMessages(selectedProfileId, selectedFolder, messagePage, messagePageSize);}, [foldersReady, messagePage, messagePageSize, selectedProfileId, selectedFolder]);
+  useEffect(() => {if (selectedProfileId) void loadMailboxBootstrap(selectedProfileId);}, [selectedProfileId]);
+  useEffect(() => {
+    if (!selectedProfileId || !selectedFolder || !foldersReady) return;
+    if (skipNextMessageLoadRef.current) {
+      skipNextMessageLoadRef.current = false;
+      return;
+    }
+    void loadMessages(selectedProfileId, selectedFolder, messagePage, messagePageSize);
+  }, [foldersReady, messagePage, messagePageSize, selectedProfileId, selectedFolder]);

  useEffect(() => {
    const handlePreviewShortcut = (event: KeyboardEvent) => {
@@ -130,6 +138,8 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
        setSelectedMessage(null);
        setSelectedMessageKeyState("");
        setPendingMessageKey("");
+        mailboxPageCursorsRef.current = {};
+        skipNextMessageLoadRef.current = false;
      }
    } catch (err) {
      setError(errorText(err));
@@ -138,52 +148,70 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
    }
  }

-  async function loadFolders(profileId = selectedProfileId) {
+  async function loadMailboxBootstrap(profileId = selectedProfileId, refresh = false) {
    if (!profileId) return;
-    const requestId = ++folderRequestRef.current;
-    messageListRequestRef.current += 1;
+    const folderRequestId = ++folderRequestRef.current;
+    const messageRequestId = ++messageListRequestRef.current;
    messageDetailRequestRef.current += 1;
    setLoadingFolders(true);
+    setLoadingMessages(true);
    setFoldersLoadedForProfile("");
    setMessageTotalCount(null);
    setMessagePage(1);
    setSelectedMessage(null);
    setSelectedMessageKeyState("");
+    selectedMessageKeyRef.current = "";
    setPendingMessageKey("");
    setFolderError("");
    setMessageError("");
    setDetailError("");
    setError("");
    try {
-      const response = await listMailboxFolders(settings, profileId);
-      if (requestId !== folderRequestRef.current) return;
-      if (!response.ok) throw new Error(response.message || "i18n:govoplan-mail.mailbox_folders_could_not_be_loaded.c3e3880e");
-      const loaded = response.folders?.length ? response.folders : [{ name: "INBOX", flags: [] }];
-      setFolders(loaded);
-      setExpandedFolders(new Set());
-      let nextFolder = selectedFolder;
-      if (!nextFolder || !loaded.some((folder) => folder.name === nextFolder)) {
-        nextFolder = loaded.some((folder) => folder.name === "INBOX") ? "INBOX" : response.detected_sent_folder || loaded[0]?.name || "INBOX";
+      const response = await bootstrapMailbox(settings, profileId, selectedFolder || "INBOX", messagePageSize, 0, refresh);
+      if (folderRequestId !== folderRequestRef.current || messageRequestId !== messageListRequestRef.current) return;
+      if (!response.folders.ok) throw new Error(response.folders.message || "i18n:govoplan-mail.mailbox_folders_could_not_be_loaded.c3e3880e");
+      const loadedFolders = response.folders.folders?.length ? response.folders.folders : [{ name: "INBOX", flags: [] }];
+      const loadedMessages = response.messages.messages ?? [];
+      const total = response.messages.total_count ?? loadedMessages.length;
+      let nextFolder = response.folder || response.messages.folder || selectedFolder || "INBOX";
+      if (!loadedFolders.some((folder) => folder.name === nextFolder)) {
+        nextFolder = loadedFolders.some((folder) => folder.name === "INBOX") ? "INBOX" : response.folders.detected_sent_folder || loadedFolders[0]?.name || "INBOX";
      }
+      const foldersWithCounts = loadedFolders.map((folder) => folder.name === nextFolder ? { ...folder, message_count: total } : folder);
+      const cursorKey = mailboxCursorKey(profileId, nextFolder, messagePageSize);
+      mailboxPageCursorsRef.current = {
+        [`${cursorKey}:1`]: null,
+        [`${cursorKey}:2`]: response.messages.next_cursor ?? null
+      };
+      skipNextMessageLoadRef.current = foldersLoadedForProfile !== profileId || nextFolder !== selectedFolder || messagePage !== 1;
+      setFolders(foldersWithCounts);
+      setExpandedFolders(new Set());
      setSelectedFolder(nextFolder);
      setFoldersLoadedForProfile(profileId);
+      setMessages(loadedMessages);
+      setMessageTotalCount(total);
    } catch (err) {
-      if (requestId !== folderRequestRef.current) return;
-      setFolderError(errorText(err));
-      setError(errorText(err));
+      if (folderRequestId !== folderRequestRef.current || messageRequestId !== messageListRequestRef.current) return;
+      const message = errorText(err);
+      skipNextMessageLoadRef.current = false;
+      setFolderError(message);
+      setMessageError(message);
+      setError(message);
      setFolders([]);
      setFoldersLoadedForProfile("");
      setMessages([]);
      setMessageTotalCount(null);
      setSelectedMessage(null);
      setSelectedMessageKeyState("");
+      selectedMessageKeyRef.current = "";
      setPendingMessageKey("");
    } finally {
-      if (requestId === folderRequestRef.current) setLoadingFolders(false);
+      if (folderRequestId === folderRequestRef.current) setLoadingFolders(false);
+      if (messageRequestId === messageListRequestRef.current) setLoadingMessages(false);
    }
  }

-  async function loadMessages(profileId = selectedProfileId, folder = selectedFolder, page = messagePage, pageSize = messagePageSize) {
+  async function loadMessages(profileId = selectedProfileId, folder = selectedFolder, page = messagePage, pageSize = messagePageSize, refresh = false) {
    if (!profileId || !folder) return;
    const requestId = ++messageListRequestRef.current;
    const offset = (Math.max(1, page) - 1) * pageSize;
@@ -194,12 +222,12 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
    setDetailError("");
    setError("");
    try {
-      const response = await listMailboxMessages(settings, profileId, folder, pageSize, offset, cursor);
+      const response = await listMailboxMessages(settings, profileId, folder, pageSize, offset, cursor, refresh);
      if (requestId !== messageListRequestRef.current) return;
      const loaded = response.messages ?? [];
      const total = response.total_count ?? loaded.length;
      if (page <= 1) mailboxPageCursorsRef.current[`${cursorKey}:1`] = null;
-      if (response.next_cursor) mailboxPageCursorsRef.current[`${cursorKey}:${page + 1}`] = response.next_cursor;
+      mailboxPageCursorsRef.current[`${cursorKey}:${page + 1}`] = response.next_cursor ?? null;
      setMessages(loaded);
      setMessageTotalCount(total);
      setFolderMessageCount(folder, total);
@@ -271,6 +299,8 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
    setLoadingFolders(false);
    setLoadingMessages(false);
    setLoadingMessage(false);
+    mailboxPageCursorsRef.current = {};
+    skipNextMessageLoadRef.current = false;
  }

  function openFolderNode(node: MailFolderNode) {
@@ -365,11 +395,11 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
                  <RefreshCw size={16} aria-hidden="true" />
                  i18n:govoplan-mail.profiles.0c2a9300
                </Button>
-                <Button onClick={() => void loadFolders(selectedProfileId)} disabled={!selectedProfileId || loadingFolders} title="i18n:govoplan-mail.refresh_mailbox_folders.d9af9963">
+                <Button onClick={() => void loadMailboxBootstrap(selectedProfileId, true)} disabled={!selectedProfileId || loadingFolders || loadingMessages} title="i18n:govoplan-mail.refresh_mailbox_folders.d9af9963">
                  <RefreshCw size={16} aria-hidden="true" />
                  i18n:govoplan-mail.folders.19adc47b
                </Button>
-                <Button onClick={() => void loadMessages(selectedProfileId, selectedFolder, messagePage, messagePageSize)} disabled={!selectedProfileId || !selectedFolder || !foldersReady || loadingMessages} title="i18n:govoplan-mail.refresh_messages_in_the_current_folder.b6546a2c">
+                <Button onClick={() => void loadMessages(selectedProfileId, selectedFolder, messagePage, messagePageSize, true)} disabled={!selectedProfileId || !selectedFolder || !foldersReady || loadingMessages} title="i18n:govoplan-mail.refresh_messages_in_the_current_folder.b6546a2c">
                  <RefreshCw size={16} aria-hidden="true" />
                  i18n:govoplan-mail.messages.f1702b46
                </Button>
--- a/webui/src/features/mail/mailProfileEditorModel.ts
+++ b/webui/src/features/mail/mailProfileEditorModel.ts
@@ -0,0 +1,60 @@
+export type MailProfileProtocol = "smtp" | "imap";
+export type MailProfileEditSection = MailProfileProtocol | "advanced";
+export type MailProfilePanelMode = "all" | "server" | "credentials";
+
+export type MailProfileEditTarget =
+  | {kind: "create";}
+  | {kind: "profile";}
+  | {kind: "server";protocol: MailProfileProtocol;}
+  | {kind: "credentials";protocol: MailProfileProtocol;};
+
+export type MailProfileTransportLike = {
+  host?: string | null;
+};
+
+export type MailProfileTreeProfileLike = {
+  id: string;
+  imap?: MailProfileTransportLike | null;
+};
+
+export type MailProfileChildDescriptor = {
+  kind: "server" | "credential";
+  id: string;
+  protocol: MailProfileProtocol;
+};
+
+export function mailProfileChildDescriptors(profile: MailProfileTreeProfileLike): MailProfileChildDescriptor[] {
+  const children: MailProfileChildDescriptor[] = [
+    { kind: "server", id: `server:${profile.id}:smtp`, protocol: "smtp" },
+    { kind: "credential", id: `credential:${profile.id}:smtp`, protocol: "smtp" },
+    { kind: "server", id: `server:${profile.id}:imap`, protocol: "imap" }
+  ];
+  if (profile.imap) children.push({ kind: "credential", id: `credential:${profile.id}:imap`, protocol: "imap" });
+  return children;
+}
+
+export function mailProfileEditTargetInitialSection(target: MailProfileEditTarget): MailProfileEditSection {
+  if (target.kind === "server" || target.kind === "credentials") return target.protocol;
+  return "smtp";
+}
+
+export function mailProfileEditTargetPanelMode(target: MailProfileEditTarget): MailProfilePanelMode | null {
+  if (target.kind === "create") return "all";
+  if (target.kind === "server") return "server";
+  if (target.kind === "credentials") return "credentials";
+  return null;
+}
+
+export function mailProfileEditTargetVisibleSections(target: MailProfileEditTarget): MailProfileEditSection[] {
+  if (target.kind === "server" || target.kind === "credentials") return [target.protocol];
+  if (target.kind === "create") return ["smtp", "imap", "advanced"];
+  return [];
+}
+
+export function mailProfileEditTargetShowsProfileFields(target: MailProfileEditTarget): boolean {
+  return target.kind === "create" || target.kind === "profile";
+}
+
+export function mailProfileEditTargetShowsSettingsPanel(target: MailProfileEditTarget): boolean {
+  return target.kind !== "profile";
+}
--- a/webui/src/module.ts
+++ b/webui/src/module.ts
@@ -17,6 +17,7 @@ export const mailModule: PlatformWebModule = {
  label: "i18n:govoplan-mail.mail.92379cbb",
  version: "1.0.0",
  dependencies: ["access"],
+  optionalDependencies: ["addresses"],
  translations,
  navItems: [{ to: "/mail", label: "i18n:govoplan-mail.mail.92379cbb", iconName: "mail", anyOf: mailboxRead, order: 50 }],
  routes: [
--- a/webui/src/styles/mail-profiles.css
+++ b/webui/src/styles/mail-profiles.css
@@ -28,6 +28,39 @@
  gap: 18px;
 }

+.mail-profile-transport-summary {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.mail-profile-transport-summary > div {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding: 10px 12px;
+  border: var(--border-line);
+  border-radius: var(--radius-sm);
+  background: var(--surface-subtle);
+}
+
+.mail-profile-transport-summary span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.mail-profile-transport-summary strong,
+.mail-profile-transport-summary small {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.mail-profile-transport-summary small {
+  color: var(--muted);
+}
+
 .mail-profile-form h3,
 .mail-policy-pattern-grid h4 {
  margin: 0;
@@ -70,7 +103,7 @@
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
-  border: 1px solid var(--line);
+  border: var(--border-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
 }
@@ -141,7 +174,7 @@
 }

 .mail-policy-effective {
-  border-top: 1px solid var(--line);
+  border-top: var(--border-line);
  padding-top: 14px;
 }

@@ -155,7 +188,7 @@
  display: grid;
  gap: 3px;
  padding: 10px 12px;
-  border: 1px solid var(--line);
+  border: var(--border-line);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
 }
@@ -177,14 +210,15 @@
 }

 .status-badge.neutral {
-  background: #e7e4df;
-  color: #666;
+  background: var(--status-neutral-bg);
+  color: var(--text-soft);
 }

@media (max-width: 900px) {
  .admin-form-grid.three-columns,
  .mail-policy-pattern-grid,
  .mail-policy-effective-grid,
+  .mail-profile-transport-summary,
  .mail-policy-row,
  .mail-policy-table.with-effective-column .mail-policy-row,
  .mail-policy-table.with-allow-column .mail-policy-row,
@@ -261,7 +295,7 @@
  gap: 8px;
  align-items: center;
  width: 100%;
-  border: 1px solid var(--line);
+  border: var(--border-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
@@ -356,7 +390,7 @@
  margin: 0;
  padding: 12px;
  overflow: auto;
-  border: 1px solid var(--line);
+  border: var(--border-line);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--text);
@@ -380,7 +414,7 @@
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
-  border: 1px solid var(--line);
+  border: var(--border-line);
  border-radius: var(--radius-sm);
 }

@@ -495,7 +529,7 @@
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 6px;
-  border: 1px solid var(--line);
+  border: var(--border-line);
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--text);
@@ -546,7 +580,7 @@
 }

 .mailbox-message-list-panel {
-  border-right: 1px solid var(--line);
+  border-right: var(--border-line);
 }

 .mailbox-message-table {
@@ -568,7 +602,7 @@
  width: min(430px, 100%);
  min-height: 34px;
  padding: 0 8px;
-  border: 1px solid var(--line);
+  border: var(--border-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
@@ -602,7 +636,7 @@
 }

 .mailbox-error-state {
-  color: var(--danger-text, #8f2e2e);
+  color: var(--danger-text);
 }

 .mailbox-pagination {
@@ -672,7 +706,7 @@
  .mailbox-preview-panel {
    grid-column: 1 / -1;
    min-height: 320px;
-    border-top: 1px solid var(--line);
+    border-top: var(--border-line);
  }
 }

--- a/webui/tests/mail-profile-editor-model.test.ts
+++ b/webui/tests/mail-profile-editor-model.test.ts
@@ -0,0 +1,48 @@
+function assert(condition: unknown, message = "assertion failed"): void {
+  if (!condition) throw new Error(message);
+}
+
+function assertEqual<T>(actual: T, expected: T, message = "values should be equal"): void {
+  if (actual !== expected) throw new Error(`${message}: expected ${String(expected)}, got ${String(actual)}`);
+}
+
+function assertDeepEqual(actual: unknown, expected: unknown, message = "values should be deeply equal"): void {
+  const actualJson = JSON.stringify(actual);
+  const expectedJson = JSON.stringify(expected);
+  if (actualJson !== expectedJson) throw new Error(`${message}: expected ${expectedJson}, got ${actualJson}`);
+}
+
+import {
+  mailProfileChildDescriptors,
+  mailProfileEditTargetInitialSection,
+  mailProfileEditTargetPanelMode,
+  mailProfileEditTargetShowsProfileFields,
+  mailProfileEditTargetShowsSettingsPanel,
+  mailProfileEditTargetVisibleSections
+} from "../src/features/mail/mailProfileEditorModel";
+
+const smtpOnlyChildren = mailProfileChildDescriptors({ id: "profile-1", imap: null });
+assertDeepEqual(
+  smtpOnlyChildren.map((child) => `${child.kind}:${child.protocol}`),
+  ["server:smtp", "credential:smtp", "server:imap"],
+  "SMTP-only profiles expose SMTP server/credentials and an addable IMAP server"
+);
+assert(!smtpOnlyChildren.some((child) => child.kind === "credential" && child.protocol === "imap"), "IMAP credentials are hidden until an IMAP server exists");
+
+const fullChildren = mailProfileChildDescriptors({ id: "profile-1", imap: { host: "imap.example.org" } });
+assertDeepEqual(
+  fullChildren.map((child) => `${child.kind}:${child.protocol}`),
+  ["server:smtp", "credential:smtp", "server:imap", "credential:imap"],
+  "profiles with IMAP expose focused rows for both transports and credentials"
+);
+
+assertEqual(mailProfileEditTargetInitialSection({ kind: "server", protocol: "imap" }), "imap");
+assertEqual(mailProfileEditTargetPanelMode({ kind: "server", protocol: "smtp" }), "server");
+assertEqual(mailProfileEditTargetPanelMode({ kind: "credentials", protocol: "imap" }), "credentials");
+assertEqual(mailProfileEditTargetPanelMode({ kind: "profile" }), null);
+assertDeepEqual(mailProfileEditTargetVisibleSections({ kind: "credentials", protocol: "imap" }), ["imap"]);
+assertEqual(mailProfileEditTargetShowsProfileFields({ kind: "profile" }), true);
+assertEqual(mailProfileEditTargetShowsProfileFields({ kind: "server", protocol: "smtp" }), false);
+assertEqual(mailProfileEditTargetShowsSettingsPanel({ kind: "profile" }), false);
+assertEqual(mailProfileEditTargetShowsSettingsPanel({ kind: "create" }), true);
+
--- a/webui/tsconfig.mail-tests.json
+++ b/webui/tsconfig.mail-tests.json
@@ -18,8 +18,10 @@
  },
  "include": [
    "tests/mailbox-folders.test.ts",
+    "tests/mail-profile-editor-model.test.ts",
    "tests/mail-policy-validation.test.ts",
    "src/features/mail/mailboxFolders.ts",
+    "src/features/mail/mailProfileEditorModel.ts",
    "src/features/mail/mailPolicyValidation.ts"
  ]
 }