@zaclinley/dsh-mailharbor 0.2.1 → 0.3.0

package/lib/client.js

@@ -34,7 +34,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/client/styles.css
-var styles_default = "/* MailHarbor panel + settings.\n   Tokens come from the DSH shell (dark by default); fallbacks match the\n   default dark theme so the panel also renders in a bare host page.\n   Component rules are all scoped under `.mailharbor` and the generic element\n   reset lives in `:where()` so it cannot outrank a component class. */\n\n.mailharbor {\n  --m-bg: var(--dsw-alias-bg-base, #151517);\n  --m-bg-1: var(--dsw-alias-bg-layer-1, #232324);\n  --m-bg-2: var(--dsw-alias-bg-layer-2, #2c2c2e);\n  --m-bg-3: var(--dsw-alias-bg-layer-3, #353638);\n  --m-line: var(--dsw-alias-border-l2, #ffffff1f);\n  --m-line-soft: var(--dsw-alias-border-l1, #ffffff0f);\n  --m-line-strong: var(--dsw-alias-border-l3, #ffffff29);\n  --m-text: var(--dsw-alias-label-primary, #f9fafb);\n  --m-text-2: var(--dsw-alias-label-secondary, #cfd3d6);\n  --m-text-3: var(--dsw-alias-label-tertiary, #adb2b8);\n  --m-caption: var(--dsw-alias-label-caption, #81858c);\n  --m-accent: #5686fe;\n  --m-accent-soft: rgba(86, 134, 254, 0.14);\n  --m-primary-bg: var(--dsw-alias-brand-primary, #f9fafb);\n  --m-primary-fg: var(--dsw-alias-label-primary-foreground, #0f1115);\n  --m-hover: var(--dsw-alias-interactive-bg-hover, #ffffff14);\n  --m-danger: #f25a5a;\n  --m-ok: #3fbf7f;\n  --m-warn: var(--dsw-alias-state-warn-label, #dd8629);\n  --m-radius: 8px;\n  --m-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);\n\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--m-bg);\n  color: var(--m-text);\n  font-size: 13px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n}\n\n.mailharbor *,\n.mailharbor *::before,\n.mailharbor *::after {\n  box-sizing: border-box;\n}\n\n/* ---------- base controls ---------- */\n\n.mailharbor :where(button) {\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.mailharbor button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 30px;\n  padding: 0 12px;\n  border-radius: var(--m-radius);\n  border: 1px solid transparent;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  font-weight: 500;\n  white-space: nowrap;\n  transition:\n    background 120ms ease,\n    color 120ms ease,\n    border-color 120ms ease;\n}\n\n.mailharbor button:hover:not(:disabled) {\n  background: var(--m-hover);\n  color: var(--m-text);\n}\n\n.mailharbor button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n\n.mailharbor button.primary {\n  background: var(--m-primary-bg);\n  color: var(--m-primary-fg);\n  border-color: transparent;\n}\n\n.mailharbor button.primary:hover:not(:disabled) {\n  background: var(--m-primary-bg);\n  filter: brightness(0.94);\n  color: var(--m-primary-fg);\n}\n\n.mailharbor button.ghost {\n  border-color: var(--m-line);\n  color: var(--m-text-2);\n}\n\n.mailharbor button.ghost:hover:not(:disabled) {\n  border-color: var(--m-line-strong);\n  color: var(--m-text);\n}\n\n.mailharbor button.subtle {\n  color: var(--m-text-3);\n  padding: 0 8px;\n}\n\n.mailharbor button.icon {\n  width: 30px;\n  padding: 0;\n}\n\n.mailharbor button.danger {\n  color: var(--m-danger);\n}\n\n.mailharbor input,\n.mailharbor select,\n.mailharbor textarea {\n  font: inherit;\n  color: var(--m-text);\n  background: var(--m-bg-1);\n  border: 1px solid var(--m-line);\n  border-radius: var(--m-radius);\n  padding: 0 10px;\n  height: 32px;\n  min-width: 0;\n}\n\n.mailharbor textarea {\n  height: auto;\n  padding: 8px 10px;\n  resize: vertical;\n  line-height: 1.6;\n}\n\n.mailharbor select {\n  padding-right: 26px;\n  appearance: none;\n  background-image:\n    linear-gradient(45deg, transparent 50%, var(--m-text-3) 50%),\n    linear-gradient(135deg, var(--m-text-3) 50%, transparent 50%);\n  background-position:\n    calc(100% - 15px) 14px,\n    calc(100% - 10px) 14px;\n  background-size:\n    5px 5px,\n    5px 5px;\n  background-repeat: no-repeat;\n}\n\n.mailharbor ::placeholder {\n  color: var(--m-caption);\n}\n\n.mailharbor input:focus-visible,\n.mailharbor select:focus-visible,\n.mailharbor textarea:focus-visible,\n.mailharbor button:focus-visible,\n.mailharbor [contenteditable='true']:focus-visible {\n  outline: 2px solid rgba(86, 134, 254, 0.55);\n  outline-offset: -1px;\n}\n\n.mailharbor .spacer {\n  flex: 1;\n}\n\n.mailharbor .muted {\n  color: var(--m-text-3);\n}\n\n.mailharbor .small {\n  font-size: 12px;\n}\n\n.mailharbor .badge {\n  display: inline-flex;\n  align-items: center;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 999px;\n  font-size: 10.5px;\n  font-weight: 500;\n  background: var(--m-bg-3);\n  color: var(--m-text-2);\n}\n\n.mailharbor .badge.ok {\n  background: rgba(63, 191, 127, 0.16);\n  color: var(--m-ok);\n}\n\n.mailharbor .badge.warn {\n  background: rgba(221, 134, 41, 0.16);\n  color: var(--m-warn);\n}\n\n.mailharbor .error {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  color: var(--m-danger);\n  background: rgba(242, 90, 90, 0.1);\n  border-bottom: 1px solid rgba(242, 90, 90, 0.2);\n  font-size: 12.5px;\n}\n\n/* ---------- shell ---------- */\n\n.mailharbor-topbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  height: 52px;\n  padding: 0 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-account {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  max-width: 220px;\n  padding: 4px 8px 4px 4px;\n  border-radius: 999px;\n  border: 1px solid transparent;\n  cursor: default;\n}\n\n.mailharbor-account:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-account .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 500;\n}\n\n.mailharbor-account select {\n  height: 26px;\n  background: transparent;\n  border-color: transparent;\n  font-weight: 500;\n}\n\n.mailharbor-body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n}\n\n.mailharbor-list {\n  display: flex;\n  flex-direction: column;\n  width: 360px;\n  flex: none;\n  border-right: 1px solid var(--m-line-soft);\n  min-height: 0;\n}\n\n.mailharbor-reader {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@media (max-width: 1000px) {\n  .mailharbor-list {\n    width: 300px;\n  }\n}\n\n.mailharbor-narrow .mailharbor-body[data-mode='reader'] .mailharbor-list {\n  display: none;\n}\n\n.mailharbor-narrow .mailharbor-body[data-mode='list'] .mailharbor-reader {\n  display: none;\n}\n\n/* ---------- segmented control ---------- */\n\n.mailharbor-segment {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 2px;\n  border-radius: 9px;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-segment button {\n  height: 26px;\n  padding: 0 12px;\n  border-radius: 7px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor-segment button:hover:not(.active) {\n  color: var(--m-text-2);\n  background: transparent;\n}\n\n.mailharbor-segment button.active {\n  background: var(--m-bg-3);\n  color: var(--m-text);\n}\n\n/* ---------- list ---------- */\n\n.mailharbor-filters {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-filters select {\n  width: 128px;\n  flex: none;\n  font-size: 12px;\n}\n\n.mailharbor-filters input[type='search'] {\n  flex: 1;\n  height: 30px;\n  font-size: 12.5px;\n}\n\n.mailharbor-rows {\n  flex: 1;\n  overflow: auto;\n  min-height: 0;\n}\n\n.mailharbor-row {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  width: 100%;\n  padding: 10px 14px;\n  border: 0;\n  border-bottom: 1px solid var(--m-line-soft);\n  border-left: 2px solid transparent;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  text-align: left;\n  cursor: pointer;\n  user-select: none;\n}\n\n.mailharbor-row:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-row.selected {\n  background: var(--m-accent-soft);\n  border-left-color: var(--m-accent);\n}\n\n.mailharbor-row .line-1,\n.mailharbor-row .line-2 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  width: 100%;\n}\n\n.mailharbor-row .from {\n  font-weight: 600;\n  font-size: 12.5px;\n  color: var(--m-text-2);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-row .date {\n  margin-left: auto;\n  color: var(--m-caption);\n  font-size: 11px;\n  flex: none;\n}\n\n.mailharbor-row .subject {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n}\n\n.mailharbor-row .snippet {\n  color: var(--m-caption);\n  font-size: 11.5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.mailharbor-row.unread .from,\n.mailharbor-row.unread .subject {\n  color: var(--m-text);\n}\n\n.mailharbor-row .dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--m-accent);\n  flex: none;\n}\n\n.mailharbor-row .paperclip {\n  color: var(--m-caption);\n  flex: none;\n  display: inline-flex;\n}\n\n.mailharbor-list-foot {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-top: 1px solid var(--m-line-soft);\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  flex: none;\n}\n\n.mailharbor-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 48px 24px;\n  color: var(--m-text-3);\n  text-align: center;\n}\n\n.mailharbor-empty svg {\n  opacity: 0.5;\n}\n\n.mailharbor-empty .title {\n  color: var(--m-text-2);\n  font-size: 13px;\n  font-weight: 500;\n}\n\n/* ---------- reader ---------- */\n\n.mailharbor-reader-head {\n  padding: 16px 20px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.mailharbor-reader-title {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n\n.mailharbor-reader-title h2 {\n  margin: 0;\n  font-size: 17px;\n  line-height: 1.35;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  word-break: break-word;\n}\n\n.mailharbor-reader-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px 10px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor-reader-meta .who {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--m-text-2);\n}\n\n.mailharbor-reader-meta .who strong {\n  color: var(--m-text);\n  font-weight: 600;\n}\n\n.mailharbor-reader-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.mailharbor-reader-body {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 14px 18px 18px;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-reader-body iframe {\n  flex: 1;\n  width: 100%;\n  border: 0;\n  border-radius: 10px;\n  background: #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n\n.mailharbor-reader-body pre {\n  flex: 1;\n  overflow: auto;\n  margin: 0;\n  padding: 20px 22px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  background: #fff;\n  border-radius: 10px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n  color: #171a21;\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 12.5px;\n  line-height: 1.7;\n}\n\n.mailharbor-attachments {\n  padding: 10px 18px;\n  border-top: 1px solid var(--m-line-soft);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  flex: none;\n  background: var(--m-bg);\n}\n\n.mailharbor-attachment {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 30px;\n  padding: 0 10px;\n  border: 1px solid var(--m-line);\n  border-radius: var(--m-radius);\n  font-size: 12px;\n  text-decoration: none;\n  color: var(--m-text-2);\n  max-width: 260px;\n  background: var(--m-bg-1);\n}\n\n.mailharbor-attachment:hover {\n  border-color: var(--m-line-strong);\n  color: var(--m-text);\n}\n\n.mailharbor-attachment .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ---------- modal / forms ---------- */\n\n.mailharbor-portal {\n  position: fixed;\n  inset: 0;\n  z-index: 80;\n  height: auto;\n  background: transparent;\n  pointer-events: none;\n}\n\n.mailharbor-portal .mailharbor-modal-mask {\n  pointer-events: auto;\n}\n\n.mailharbor-modal-mask {\n  position: fixed;\n  inset: 0;\n  z-index: 60;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  background: rgba(0, 0, 0, 0.55);\n  backdrop-filter: blur(2px);\n}\n\n.mailharbor-modal {\n  display: flex;\n  flex-direction: column;\n  width: min(720px, 100%);\n  max-height: 86vh;\n  overflow: hidden;\n  border: 1px solid var(--m-line);\n  border-radius: 14px;\n  background: var(--m-bg-1);\n  color: var(--m-text);\n  box-shadow: var(--m-shadow);\n}\n\n.mailharbor-modal > header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 52px;\n  padding: 0 14px 0 18px;\n  border-bottom: 1px solid var(--m-line-soft);\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.mailharbor-modal .content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 18px;\n  overflow: auto;\n}\n\n.mailharbor-modal > footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n.mailharbor-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  min-width: 0;\n}\n\n.mailharbor-field > label {\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n}\n\n.mailharbor-grid.three {\n  grid-template-columns: 2fr 90px auto;\n  align-items: end;\n}\n\n.mailharbor-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.mailharbor-toggle input[type='checkbox'] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--m-accent);\n}\n\n/* ---------- composer ---------- */\n\n.mailharbor-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-wrap: wrap;\n  padding: 6px;\n  border: 1px solid var(--m-line-soft);\n  border-bottom: 0;\n  border-radius: 10px 10px 0 0;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-toolbar button {\n  height: 26px;\n  padding: 0 9px;\n  border-radius: 6px;\n  color: var(--m-text-2);\n  font-size: 12px;\n}\n\n.mailharbor-toolbar button:hover {\n  background: var(--m-bg-3);\n  color: var(--m-text);\n}\n\n.mailharbor-editor {\n  min-height: 240px;\n  max-height: 44vh;\n  overflow: auto;\n  padding: 14px 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 0 0 10px 10px;\n  background: #fff;\n  color: #171a21;\n  outline: none;\n  font-size: 13.5px;\n  line-height: 1.7;\n}\n\n.mailharbor-editor:empty::before {\n  content: attr(data-placeholder);\n  color: #9aa0ab;\n}\n\n/* ---------- settings ---------- */\n\n.mailharbor-settings {\n  padding: 20px 24px 48px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 880px;\n}\n\n.mailharbor-settings h2 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n\n.mailharbor-settings h3 {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--m-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.mailharbor-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n}\n\n.mailharbor-account-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.mailharbor-account-row .meta {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.mailharbor-account-row .meta strong {\n  font-weight: 600;\n}\n\n.mailharbor-account-row .meta span {\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mailharbor .avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  border-radius: 50%;\n  background: var(--m-accent-soft);\n  color: var(--m-accent);\n  font-weight: 600;\n}\n\n.mailharbor-log {\n  padding: 10px 12px;\n  border-radius: 8px;\n  background: var(--m-bg);\n  border: 1px solid var(--m-line-soft);\n  color: var(--m-text-2);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11px;\n  line-height: 1.6;\n  max-height: 220px;\n  overflow: auto;\n  white-space: pre-wrap;\n}\n\n.mailharbor-kv {\n  display: grid;\n  grid-template-columns: minmax(120px, 170px) 1fr;\n  gap: 6px 14px;\n  font-size: 12px;\n  margin: 0;\n}\n\n.mailharbor-kv dt {\n  color: var(--m-text-3);\n}\n\n.mailharbor-kv dd {\n  margin: 0;\n  color: var(--m-text-2);\n  word-break: break-all;\n}\n\n.mailharbor hr {\n  border: 0;\n  border-top: 1px solid var(--m-line-soft);\n  margin: 2px 0;\n}\n";
+var styles_default = "/* MailHarbor panel + settings.\n   Tokens come from the DSH shell (dark by default); fallbacks match the\n   default dark theme so the panel also renders in a bare host page.\n   Component rules are all scoped under `.mailharbor` and the generic element\n   reset lives in `:where()` so it cannot outrank a component class. */\n\n.mailharbor {\n  --m-bg: var(--dsw-alias-bg-base, #151517);\n  --m-bg-1: var(--dsw-alias-bg-layer-1, #232324);\n  --m-bg-2: var(--dsw-alias-bg-layer-2, #2c2c2e);\n  --m-bg-3: var(--dsw-alias-bg-layer-3, #353638);\n  --m-line: var(--dsw-alias-border-l2, #ffffff1f);\n  --m-line-soft: var(--dsw-alias-border-l1, #ffffff0f);\n  --m-line-strong: var(--dsw-alias-border-l3, #ffffff29);\n  --m-text: var(--dsw-alias-label-primary, #f9fafb);\n  --m-text-2: var(--dsw-alias-label-secondary, #cfd3d6);\n  --m-text-3: var(--dsw-alias-label-tertiary, #adb2b8);\n  --m-caption: var(--dsw-alias-label-caption, #81858c);\n  --m-accent: #5686fe;\n  --m-accent-soft: rgba(86, 134, 254, 0.14);\n  --m-primary-bg: var(--dsw-alias-brand-primary, #f9fafb);\n  --m-primary-fg: var(--dsw-alias-label-primary-foreground, #0f1115);\n  --m-hover: var(--dsw-alias-interactive-bg-hover, #ffffff14);\n  --m-danger: #f25a5a;\n  --m-ok: #3fbf7f;\n  --m-warn: var(--dsw-alias-state-warn-label, #dd8629);\n  --m-radius: 8px;\n  --m-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);\n\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--m-bg);\n  color: var(--m-text);\n  font-size: 13px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n}\n\n.mailharbor *,\n.mailharbor *::before,\n.mailharbor *::after {\n  box-sizing: border-box;\n}\n\n/* ---------- base controls ---------- */\n\n.mailharbor :where(button) {\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.mailharbor button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 30px;\n  padding: 0 12px;\n  border-radius: var(--m-radius);\n  border: 1px solid transparent;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  font-weight: 500;\n  white-space: nowrap;\n  transition:\n    background 120ms ease,\n    color 120ms ease,\n    border-color 120ms ease;\n}\n\n.mailharbor button:hover:not(:disabled) {\n  background: var(--m-hover);\n  color: var(--m-text);\n}\n\n.mailharbor button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n\n.mailharbor button.primary {\n  background: var(--m-primary-bg);\n  color: var(--m-primary-fg);\n  border-color: transparent;\n}\n\n.mailharbor button.primary:hover:not(:disabled) {\n  background: var(--m-primary-bg);\n  filter: brightness(0.94);\n  color: var(--m-primary-fg);\n}\n\n.mailharbor button.ghost {\n  border-color: var(--m-line);\n  color: var(--m-text-2);\n}\n\n.mailharbor button.ghost:hover:not(:disabled) {\n  border-color: var(--m-line-strong);\n  color: var(--m-text);\n}\n\n.mailharbor button.subtle {\n  color: var(--m-text-3);\n  padding: 0 8px;\n}\n\n.mailharbor button.icon {\n  width: 30px;\n  padding: 0;\n}\n\n.mailharbor button.danger {\n  color: var(--m-danger);\n}\n\n.mailharbor input,\n.mailharbor select,\n.mailharbor textarea {\n  font: inherit;\n  color: var(--m-text);\n  background: var(--m-bg-1);\n  border: 1px solid var(--m-line);\n  border-radius: var(--m-radius);\n  padding: 0 10px;\n  height: 32px;\n  min-width: 0;\n}\n\n.mailharbor textarea {\n  height: auto;\n  padding: 8px 10px;\n  resize: vertical;\n  line-height: 1.6;\n}\n\n.mailharbor select {\n  padding-right: 26px;\n  appearance: none;\n  background-image:\n    linear-gradient(45deg, transparent 50%, var(--m-text-3) 50%),\n    linear-gradient(135deg, var(--m-text-3) 50%, transparent 50%);\n  background-position:\n    calc(100% - 15px) 14px,\n    calc(100% - 10px) 14px;\n  background-size:\n    5px 5px,\n    5px 5px;\n  background-repeat: no-repeat;\n}\n\n.mailharbor ::placeholder {\n  color: var(--m-caption);\n}\n\n.mailharbor input:focus-visible,\n.mailharbor select:focus-visible,\n.mailharbor textarea:focus-visible,\n.mailharbor button:focus-visible,\n.mailharbor [contenteditable='true']:focus-visible {\n  outline: 2px solid rgba(86, 134, 254, 0.55);\n  outline-offset: -1px;\n}\n\n.mailharbor .spacer {\n  flex: 1;\n}\n\n.mailharbor .muted {\n  color: var(--m-text-3);\n}\n\n.mailharbor .small {\n  font-size: 12px;\n}\n\n.mailharbor .badge {\n  display: inline-flex;\n  align-items: center;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 999px;\n  font-size: 10.5px;\n  font-weight: 500;\n  background: var(--m-bg-3);\n  color: var(--m-text-2);\n}\n\n.mailharbor .badge.ok {\n  background: rgba(63, 191, 127, 0.16);\n  color: var(--m-ok);\n}\n\n.mailharbor .badge.warn {\n  background: rgba(221, 134, 41, 0.16);\n  color: var(--m-warn);\n}\n\n.mailharbor .error {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  color: var(--m-danger);\n  background: rgba(242, 90, 90, 0.1);\n  border-bottom: 1px solid rgba(242, 90, 90, 0.2);\n  font-size: 12.5px;\n}\n\n/* ---------- shell ---------- */\n\n.mailharbor-topbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  height: 52px;\n  padding: 0 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-account {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  max-width: 220px;\n  padding: 4px 8px 4px 4px;\n  border-radius: 999px;\n  border: 1px solid transparent;\n  cursor: default;\n}\n\n.mailharbor-account:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-account .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 500;\n}\n\n.mailharbor-account select {\n  height: 26px;\n  background: transparent;\n  border-color: transparent;\n  font-weight: 500;\n}\n\n.mailharbor-body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n}\n\n.mailharbor-list {\n  display: flex;\n  flex-direction: column;\n  width: 360px;\n  flex: none;\n  border-right: 1px solid var(--m-line-soft);\n  min-height: 0;\n}\n\n.mailharbor-reader {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@media (max-width: 1000px) {\n  .mailharbor-list {\n    width: 300px;\n  }\n}\n\n.mailharbor-narrow .mailharbor-body[data-mode='reader'] .mailharbor-list {\n  display: none;\n}\n\n.mailharbor-narrow .mailharbor-body[data-mode='list'] .mailharbor-reader {\n  display: none;\n}\n\n/* ---------- segmented control ---------- */\n\n.mailharbor-segment {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 2px;\n  border-radius: 9px;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-segment button {\n  height: 26px;\n  padding: 0 12px;\n  border-radius: 7px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor-segment button:hover:not(.active) {\n  color: var(--m-text-2);\n  background: transparent;\n}\n\n.mailharbor-segment button.active {\n  background: var(--m-bg-3);\n  color: var(--m-text);\n}\n\n/* ---------- list ---------- */\n\n.mailharbor-filters {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-filters select {\n  width: 128px;\n  flex: none;\n  font-size: 12px;\n}\n\n.mailharbor-filters input[type='search'] {\n  flex: 1;\n  height: 30px;\n  font-size: 12.5px;\n}\n\n.mailharbor-rows {\n  flex: 1;\n  overflow: auto;\n  min-height: 0;\n}\n\n.mailharbor-row {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  width: 100%;\n  padding: 10px 14px;\n  border: 0;\n  border-bottom: 1px solid var(--m-line-soft);\n  border-left: 2px solid transparent;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  text-align: left;\n  cursor: pointer;\n  user-select: none;\n}\n\n.mailharbor-row:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-row.selected {\n  background: var(--m-accent-soft);\n  border-left-color: var(--m-accent);\n}\n\n.mailharbor-row .line-1,\n.mailharbor-row .line-2 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  width: 100%;\n}\n\n.mailharbor-row .from {\n  font-weight: 600;\n  font-size: 12.5px;\n  color: var(--m-text-2);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-row .date {\n  margin-left: auto;\n  color: var(--m-caption);\n  font-size: 11px;\n  flex: none;\n}\n\n.mailharbor-row .subject {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n}\n\n.mailharbor-row .snippet {\n  color: var(--m-caption);\n  font-size: 11.5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.mailharbor-row.unread .from,\n.mailharbor-row.unread .subject {\n  color: var(--m-text);\n}\n\n.mailharbor-row .dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--m-accent);\n  flex: none;\n}\n\n.mailharbor-row .paperclip {\n  color: var(--m-caption);\n  flex: none;\n  display: inline-flex;\n}\n\n.mailharbor-list-foot {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-top: 1px solid var(--m-line-soft);\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  flex: none;\n}\n\n.mailharbor-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 48px 24px;\n  color: var(--m-text-3);\n  text-align: center;\n}\n\n.mailharbor-empty svg {\n  opacity: 0.5;\n}\n\n.mailharbor-empty .title {\n  color: var(--m-text-2);\n  font-size: 13px;\n  font-weight: 500;\n}\n\n/* ---------- reader ---------- */\n\n.mailharbor-reader-head {\n  padding: 16px 20px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.mailharbor-reader-title {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n\n.mailharbor-reader-title h2 {\n  margin: 0;\n  font-size: 17px;\n  line-height: 1.35;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  word-break: break-word;\n}\n\n.mailharbor-reader-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px 10px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor-reader-meta .who {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--m-text-2);\n}\n\n.mailharbor-reader-meta .who strong {\n  color: var(--m-text);\n  font-weight: 600;\n}\n\n.mailharbor-reader-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.mailharbor-reader-body {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 14px 18px 18px;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-reader-body iframe {\n  flex: 1;\n  width: 100%;\n  border: 0;\n  border-radius: 10px;\n  background: #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n\n.mailharbor-reader-body pre {\n  flex: 1;\n  overflow: auto;\n  margin: 0;\n  padding: 20px 22px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  background: #fff;\n  border-radius: 10px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n  color: #171a21;\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 12.5px;\n  line-height: 1.7;\n}\n\n.mailharbor-attachments {\n  padding: 10px 18px;\n  border-top: 1px solid var(--m-line-soft);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  flex: none;\n  background: var(--m-bg);\n}\n\n.mailharbor-attachment {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 30px;\n  padding: 0 10px;\n  border: 1px solid var(--m-line);\n  border-radius: var(--m-radius);\n  font-size: 12px;\n  text-decoration: none;\n  color: var(--m-text-2);\n  max-width: 260px;\n  background: var(--m-bg-1);\n}\n\n.mailharbor-attachment:hover {\n  border-color: var(--m-line-strong);\n  color: var(--m-text);\n}\n\n.mailharbor-attachment .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ---------- AI summary ---------- */\n\n.mailharbor-divider {\n  width: 1px;\n  height: 18px;\n  margin: 0 4px;\n  background: var(--m-line);\n}\n\n.mailharbor-summary {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.mailharbor-summary section h4 {\n  margin: 0 0 6px;\n  font-size: 11.5px;\n  font-weight: 600;\n  color: var(--m-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.mailharbor-summary section p {\n  margin: 0;\n  white-space: pre-wrap;\n  line-height: 1.75;\n  color: var(--m-text);\n}\n\n/* ---------- modal / forms ---------- */\n\n.mailharbor-portal {\n  position: fixed;\n  inset: 0;\n  z-index: 80;\n  height: auto;\n  background: transparent;\n  pointer-events: none;\n}\n\n.mailharbor-portal .mailharbor-modal-mask {\n  pointer-events: auto;\n}\n\n.mailharbor-modal-mask {\n  position: fixed;\n  inset: 0;\n  z-index: 60;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  background: rgba(0, 0, 0, 0.55);\n  backdrop-filter: blur(2px);\n}\n\n.mailharbor-modal {\n  display: flex;\n  flex-direction: column;\n  width: min(720px, 100%);\n  max-height: 86vh;\n  overflow: hidden;\n  border: 1px solid var(--m-line);\n  border-radius: 14px;\n  background: var(--m-bg-1);\n  color: var(--m-text);\n  box-shadow: var(--m-shadow);\n}\n\n.mailharbor-modal > header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 52px;\n  padding: 0 14px 0 18px;\n  border-bottom: 1px solid var(--m-line-soft);\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.mailharbor-modal .content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 18px;\n  overflow: auto;\n}\n\n.mailharbor-modal > footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n.mailharbor-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  min-width: 0;\n}\n\n.mailharbor-field > label {\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n}\n\n.mailharbor-grid.three {\n  grid-template-columns: 2fr 90px auto;\n  align-items: end;\n}\n\n.mailharbor-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.mailharbor-toggle input[type='checkbox'] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--m-accent);\n}\n\n/* ---------- composer ---------- */\n\n.mailharbor-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-wrap: wrap;\n  padding: 6px;\n  border: 1px solid var(--m-line-soft);\n  border-bottom: 0;\n  border-radius: 10px 10px 0 0;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-toolbar button {\n  height: 26px;\n  padding: 0 9px;\n  border-radius: 6px;\n  color: var(--m-text-2);\n  font-size: 12px;\n}\n\n.mailharbor-toolbar button:hover {\n  background: var(--m-bg-3);\n  color: var(--m-text);\n}\n\n.mailharbor-editor {\n  min-height: 240px;\n  max-height: 44vh;\n  overflow: auto;\n  padding: 14px 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 0 0 10px 10px;\n  background: #fff;\n  color: #171a21;\n  outline: none;\n  font-size: 13.5px;\n  line-height: 1.7;\n}\n\n.mailharbor-editor:empty::before {\n  content: attr(data-placeholder);\n  color: #9aa0ab;\n}\n\n/* ---------- inline confirm ---------- */\n\n.mailharbor-confirm {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 8px;\n  border: 1px solid var(--m-line);\n  background: var(--m-bg-2);\n  color: var(--m-text-2);\n  font-size: 12.5px;\n}\n\n/* ---------- settings ---------- */\n\n.mailharbor-settings {\n  padding: 20px 24px 48px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 880px;\n}\n\n.mailharbor-settings h2 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n\n.mailharbor-settings h3 {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--m-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.mailharbor-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n}\n\n.mailharbor-account-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.mailharbor-account-row .meta {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.mailharbor-account-row .meta strong {\n  font-weight: 600;\n}\n\n.mailharbor-account-row .meta span {\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mailharbor .avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  border-radius: 50%;\n  background: var(--m-accent-soft);\n  color: var(--m-accent);\n  font-weight: 600;\n}\n\n.mailharbor-log {\n  padding: 10px 12px;\n  border-radius: 8px;\n  background: var(--m-bg);\n  border: 1px solid var(--m-line-soft);\n  color: var(--m-text-2);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11px;\n  line-height: 1.6;\n  max-height: 220px;\n  overflow: auto;\n  white-space: pre-wrap;\n}\n\n.mailharbor-kv {\n  display: grid;\n  grid-template-columns: minmax(120px, 170px) 1fr;\n  gap: 6px 14px;\n  font-size: 12px;\n  margin: 0;\n}\n\n.mailharbor-kv dt {\n  color: var(--m-text-3);\n}\n\n.mailharbor-kv dd {\n  margin: 0;\n  color: var(--m-text-2);\n  word-break: break-all;\n}\n\n.mailharbor hr {\n  border: 0;\n  border-top: 1px solid var(--m-line-soft);\n  margin: 2px 0;\n}\n";
 
 // src/client/icon.tsx
 var import_react = require("react");
@@ -123,6 +123,29 @@ var api = {
   }),
   logout: (id) => request(`accounts/${encodeURIComponent(id)}/logout`, { method: "POST" }),
   check: (id) => request(`accounts/${encodeURIComponent(id)}/check`, { method: "POST" }),
+  aiStatus: (accountId) => request(`ai/status${query({ accountId: accountId ?? null })}`),
+  aiModels: () => request("ai/models"),
+  aiSummary: (payload) => request("ai/summary", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  }),
+  aiReply: (payload) => request("ai/reply", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  }),
+  aiTranslate: (payload) => request("ai/translate", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  }),
+  aiStyle: (accountId) => request(`ai/style${query({ accountId: accountId ?? null })}`),
+  aiSaveStyle: (accountId, profile) => request(`ai/style${query({ accountId: accountId ?? null })}`, {
+    method: "PUT",
+    body: JSON.stringify({ accountId, profile })
+  }),
+  aiLearnStyle: (accountId) => request(`ai/style/learn${query({ accountId: accountId ?? null })}`, {
+    method: "POST",
+    body: JSON.stringify({ accountId: accountId ?? null })
+  }),
   settings: () => request("settings"),
   saveSettings: (patch) => request("settings", { method: "PATCH", body: JSON.stringify(patch) }),
   backupStatus: (accountId) => request(`backup/status${query({ accountId: accountId ?? null })}`),
@@ -637,6 +660,8 @@ function Composer({
   const [error, setError] = (0, import_react4.useState)("");
   const [confirming, setConfirming] = (0, import_react4.useState)(false);
   const [draftId, setDraftId] = (0, import_react4.useState)(initial.draftId);
+  const [translating, setTranslating] = (0, import_react4.useState)(null);
+  const [pendingLang, setPendingLang] = (0, import_react4.useState)(null);
   const editor = (0, import_react4.useRef)(null);
   (0, import_react4.useEffect)(() => {
     if (editor.current !== null) editor.current.innerHTML = initial.html;
@@ -647,6 +672,24 @@ function Composer({
     editor.current?.focus();
     document.execCommand(command, false, value);
   };
+  const translate = async (target) => {
+    if (editor.current === null) return;
+    if (html().trim() === "") {
+      setError("\u6B63\u6587\u4E3A\u7A7A\uFF0C\u65E0\u6CD5\u7FFB\u8BD1");
+      return;
+    }
+    setPendingLang(null);
+    setTranslating(target);
+    setError("");
+    try {
+      const result = await api.aiTranslate({ accountId: account.id, html: html(), target });
+      editor.current.innerHTML = result.html;
+    } catch (caught) {
+      setError(errorText2(caught));
+    } finally {
+      setTranslating(null);
+    }
+  };
   const addFiles = async (files) => {
     if (files === null || files.length === 0) return;
     setError("");
@@ -817,6 +860,16 @@ function Composer({
       ),
       (0, import_react4.createElement)("button", { onClick: () => exec("removeFormat"), title: "\u6E05\u9664\u683C\u5F0F" }, "\u6E05\u9664"),
       (0, import_react4.createElement)("span", { className: "spacer" }),
+      (0, import_react4.createElement)(
+        "button",
+        { onClick: () => setPendingLang("zh"), disabled: translating !== null, title: "AI \u7FFB\u8BD1\u6210\u4E2D\u6587" },
+        translating === "zh" ? "\u7FFB\u8BD1\u4E2D\u2026" : "\u4E2D"
+      ),
+      (0, import_react4.createElement)(
+        "button",
+        { onClick: () => setPendingLang("en"), disabled: translating !== null, title: "AI \u7FFB\u8BD1\u6210\u82F1\u6587" },
+        translating === "en" ? "\u2026" : "EN"
+      ),
       (0, import_react4.createElement)(
         "label",
         { className: "mailharbor-toggle small" },
@@ -832,6 +885,14 @@ function Composer({
         })
       )
     ),
+    pendingLang === null ? null : (0, import_react4.createElement)(
+      "div",
+      { className: "mailharbor-confirm" },
+      (0, import_react4.createElement)("span", null, pendingLang === "en" ? "\u628A\u6B63\u6587\u7FFB\u8BD1\u6210\u82F1\u6587\uFF1F" : "\u628A\u6B63\u6587\u7FFB\u8BD1\u6210\u4E2D\u6587\uFF1F"),
+      (0, import_react4.createElement)("span", { className: "spacer" }),
+      (0, import_react4.createElement)("button", { className: "ghost", onClick: () => setPendingLang(null) }, "\u53D6\u6D88"),
+      (0, import_react4.createElement)("button", { className: "primary", onClick: () => void translate(pendingLang) }, "\u7FFB\u8BD1")
+    ),
     attachments.length === 0 ? null : (0, import_react4.createElement)(
       "div",
       { className: "mailharbor-attachments", style: { padding: 0, border: 0 } },
@@ -950,25 +1011,43 @@ function srcDoc(detail, allowRemoteImages) {
 function escapeHtml(value) {
   return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
 }
+function textToHtml(text) {
+  return text.split(/\n{2,}/).map(
+    (paragraph) => `<p>${paragraph.trim().replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll("\n", "<br>")}</p>`
+  ).join("");
+}
 function hasRemoteImages(detail) {
   return detail.html !== null && /<img[^>]+src=["']https?:/i.test(detail.html);
 }
 function addressLine(list) {
   return list.map((item) => item.name !== "" ? `${item.name} <${item.address}>` : item.address).join("\u3001");
 }
+function errorText3(error) {
+  return error instanceof Error ? error.message : String(error);
+}
 function Reader({
   detail,
-  account,
   source,
   mailbox,
   onChanged,
   onReply,
+  onAiReply,
   onClose
 }) {
   const [plain, setPlain] = (0, import_react6.useState)(false);
   const [loadImages, setLoadImages] = (0, import_react6.useState)(false);
   const [busy, setBusy] = (0, import_react6.useState)(false);
   const [error, setError] = (0, import_react6.useState)("");
+  const [summaryOpen, setSummaryOpen] = (0, import_react6.useState)(false);
+  const [summaryBusy, setSummaryBusy] = (0, import_react6.useState)(false);
+  const [summaryError, setSummaryError] = (0, import_react6.useState)("");
+  const [summaryBlocks, setSummaryBlocks] = (0, import_react6.useState)([]);
+  const [replyOpen, setReplyOpen] = (0, import_react6.useState)(false);
+  const [replyBusy, setReplyBusy] = (0, import_react6.useState)(false);
+  const [replyError, setReplyError] = (0, import_react6.useState)("");
+  const [replyInstruction, setReplyInstruction] = (0, import_react6.useState)("");
+  const [replyLanguage, setReplyLanguage] = (0, import_react6.useState)("zh");
+  const [replyText, setReplyText] = (0, import_react6.useState)("");
   const remoteImages = (0, import_react6.useMemo)(() => hasRemoteImages(detail), [detail]);
   const html = detail.html !== null && detail.html !== "";
   const toggleRead = async () => {
@@ -977,18 +1056,74 @@ function Reader({
     try {
       const result = await api.setRead({
         id: detail.id,
-        accountId: account.id,
+        accountId: detail.accountId,
         source,
         mailbox,
         read: detail.unread
       });
       onChanged({ unread: !result.read });
     } catch (caught) {
-      setError(caught instanceof Error ? caught.message : String(caught));
+      setError(errorText3(caught));
     } finally {
       setBusy(false);
     }
   };
+  const openSummary = async () => {
+    setSummaryOpen(true);
+    setSummaryBusy(true);
+    setSummaryError("");
+    setSummaryBlocks([]);
+    try {
+      const result = await api.aiSummary({
+        accountId: detail.accountId,
+        source,
+        id: detail.id,
+        mailbox
+      });
+      setSummaryBlocks(result.blocks);
+    } catch (caught) {
+      setSummaryError(errorText3(caught));
+    } finally {
+      setSummaryBusy(false);
+    }
+  };
+  const openReply = () => {
+    setReplyOpen(true);
+    setReplyText("");
+    setReplyError("");
+    setReplyInstruction("");
+    setReplyLanguage("zh");
+  };
+  const generateReply = async () => {
+    setReplyBusy(true);
+    setReplyError("");
+    try {
+      const result = await api.aiReply({
+        accountId: detail.accountId,
+        source,
+        id: detail.id,
+        mailbox,
+        instruction: replyInstruction,
+        language: replyLanguage
+      });
+      setReplyText(result.text);
+    } catch (caught) {
+      setReplyError(errorText3(caught));
+    } finally {
+      setReplyBusy(false);
+    }
+  };
+  const insertReply = () => {
+    const subject = /^re:/i.test(detail.subject) ? detail.subject : `Re: ${detail.subject}`;
+    onAiReply({
+      to: detail.from.address,
+      cc: "",
+      subject,
+      html: textToHtml(replyText),
+      ...detail.messageId === "" ? {} : { inReplyTo: detail.messageId, references: [...detail.references, detail.messageId].join(" ") }
+    });
+    setReplyOpen(false);
+  };
   return (0, import_react6.createElement)(
     "div",
     { className: "mailharbor-reader" },
@@ -1056,6 +1191,9 @@ function Reader({
           (0, import_react6.createElement)(Icon, { name: "forward" }),
           "\u8F6C\u53D1"
         ),
+        (0, import_react6.createElement)("span", { className: "mailharbor-divider" }),
+        (0, import_react6.createElement)("button", { className: "ghost", onClick: () => void openSummary() }, "AI \u6458\u8981"),
+        (0, import_react6.createElement)("button", { className: "ghost", onClick: openReply }, "AI \u56DE\u590D"),
         (0, import_react6.createElement)("span", { className: "spacer" }),
         html ? (0, import_react6.createElement)(
           "button",
@@ -1091,13 +1229,13 @@ function Reader({
             className: "mailharbor-attachment",
             key: file.id,
             href: source === "server" ? api.attachmentUrl({
-              accountId: account.id,
+              accountId: detail.accountId,
               source: "server",
               mailbox,
               uid: detail.uid ?? "",
               part: file.id
             }) : api.attachmentUrl({
-              accountId: account.id,
+              accountId: detail.accountId,
               source: "local",
               emailId: detail.id,
               attachmentId: file.id
@@ -1110,13 +1248,127 @@ function Reader({
           (0, import_react6.createElement)("span", { className: "muted small" }, formatBytes(file.size))
         )
       )
-    )
+    ),
+    summaryOpen ? (0, import_react6.createElement)(
+      Modal,
+      {
+        title: "AI \u6458\u8981",
+        onClose: () => setSummaryOpen(false),
+        footer: (0, import_react6.createElement)(
+          "div",
+          { style: { display: "flex", gap: "8px", width: "100%", justifyContent: "flex-end" } },
+          (0, import_react6.createElement)("button", { className: "ghost", onClick: () => setSummaryOpen(false) }, "\u5173\u95ED"),
+          summaryBlocks.length === 0 ? null : (0, import_react6.createElement)(
+            "button",
+            {
+              className: "primary",
+              onClick: () => {
+                void navigator.clipboard?.writeText(
+                  summaryBlocks.map((block) => `${block.title}
+${block.body}`).join("\n\n")
+                ).then(() => setSummaryOpen(false));
+              }
+            },
+            "\u590D\u5236"
+          )
+        )
+      },
+      summaryBusy ? "\u6B63\u5728\u9605\u8BFB\u5E76\u603B\u7ED3\u2026" : null,
+      summaryError === "" ? null : (0, import_react6.createElement)("div", { style: { color: "var(--m-danger)" } }, summaryError),
+      summaryBlocks.length === 0 ? null : (0, import_react6.createElement)(
+        "div",
+        { className: "mailharbor-summary" },
+        summaryBlocks.map(
+          (block, index) => (0, import_react6.createElement)(
+            "section",
+            { key: `${block.title}:${String(index)}` },
+            block.title === "" ? null : (0, import_react6.createElement)("h4", null, block.title),
+            (0, import_react6.createElement)("p", null, block.body)
+          )
+        )
+      )
+    ) : null,
+    replyOpen ? (0, import_react6.createElement)(
+      Modal,
+      {
+        title: "AI \u56DE\u590D",
+        onClose: () => setReplyOpen(false),
+        footer: (0, import_react6.createElement)(
+          "div",
+          { style: { display: "flex", gap: "8px", width: "100%", alignItems: "center" } },
+          (0, import_react6.createElement)("span", { className: "small muted" }, "\u751F\u6210\u540E\u53EF\u5728\u6B63\u6587\u91CC\u7EE7\u7EED\u4FEE\u6539\uFF0C\u53D1\u9001\u4ECD\u9700\u4F60\u786E\u8BA4"),
+          (0, import_react6.createElement)("span", { className: "spacer" }),
+          (0, import_react6.createElement)("button", { className: "ghost", onClick: () => setReplyOpen(false) }, "\u53D6\u6D88"),
+          (0, import_react6.createElement)(
+            "button",
+            { className: "ghost", onClick: () => void generateReply(), disabled: replyBusy },
+            replyBusy ? "\u751F\u6210\u4E2D\u2026" : replyText === "" ? "\u751F\u6210\u56DE\u590D" : "\u91CD\u65B0\u751F\u6210"
+          ),
+          (0, import_react6.createElement)(
+            "button",
+            {
+              className: "primary",
+              onClick: insertReply,
+              disabled: replyBusy || replyText.trim() === ""
+            },
+            "\u63D2\u5165\u5230\u6B63\u6587"
+          )
+        )
+      },
+      (0, import_react6.createElement)(
+        "div",
+        { className: "mailharbor-grid" },
+        (0, import_react6.createElement)(
+          "div",
+          { className: "mailharbor-field" },
+          (0, import_react6.createElement)("label", null, "\u60F3\u8BA9 AI \u600E\u4E48\u5199\uFF08\u53EF\u7559\u7A7A\uFF09"),
+          (0, import_react6.createElement)("input", {
+            value: replyInstruction,
+            placeholder: "\u4F8B\u5982\uFF1A\u786E\u8BA4\u6536\u5230\uFF0C\u8BF4\u660E\u5468\u4E94\u524D\u7ED9\u7B54\u590D",
+            onChange: (event) => setReplyInstruction(event.target.value)
+          })
+        ),
+        (0, import_react6.createElement)(
+          "div",
+          { className: "mailharbor-field" },
+          (0, import_react6.createElement)("label", null, "\u8BED\u8A00"),
+          (0, import_react6.createElement)(
+            "div",
+            { className: "mailharbor-segment" },
+            (0, import_react6.createElement)(
+              "button",
+              {
+                className: replyLanguage === "zh" ? "active" : "",
+                onClick: () => setReplyLanguage("zh")
+              },
+              "\u4E2D\u6587"
+            ),
+            (0, import_react6.createElement)(
+              "button",
+              {
+                className: replyLanguage === "en" ? "active" : "",
+                onClick: () => setReplyLanguage("en")
+              },
+              "English"
+            )
+          )
+        )
+      ),
+      replyError === "" ? null : (0, import_react6.createElement)("div", { style: { color: "var(--m-danger)" } }, replyError),
+      (0, import_react6.createElement)("textarea", {
+        rows: 12,
+        value: replyText,
+        placeholder: replyBusy ? "\u6B63\u5728\u751F\u6210\u2026" : "\u70B9\u300C\u751F\u6210\u56DE\u590D\u300D\u8BA9 AI \u8D77\u8349\uFF0C\u7ED3\u679C\u4F1A\u663E\u793A\u5728\u8FD9\u91CC",
+        onChange: (event) => setReplyText(event.target.value)
+      })
+    ) : null
   );
 }
 
 // src/client/panel.tsx
 var EMPTY_PAGE = { items: [], total: 0, offset: 0, limit: 40 };
-function errorText3(error) {
+var DRAFTS = "__drafts";
+function errorText4(error) {
   return error instanceof ApiError || error instanceof Error ? error.message : String(error);
 }
 function matchesNarrow() {
@@ -1129,12 +1381,14 @@ function quoteForReply(detail) {
 function MailPanel() {
   const [state, setState] = (0, import_react7.useState)(null);
   const [error, setError] = (0, import_react7.useState)("");
+  const [accountScope, setAccountScope] = (0, import_react7.useState)(null);
   const [source, setSource] = (0, import_react7.useState)("local");
   const [mailbox, setMailbox] = (0, import_react7.useState)("all");
   const [folders, setFolders] = (0, import_react7.useState)([]);
   const [query2, setQuery] = (0, import_react7.useState)("");
   const [search, setSearch] = (0, import_react7.useState)("");
   const [page, setPage] = (0, import_react7.useState)(EMPTY_PAGE);
+  const [drafts, setDrafts] = (0, import_react7.useState)([]);
   const [limit, setLimit] = (0, import_react7.useState)(40);
   const [loading, setLoading] = (0, import_react7.useState)(false);
   const [selected, setSelected] = (0, import_react7.useState)(null);
@@ -1145,8 +1399,11 @@ function MailPanel() {
   const [toast, setToast] = (0, import_react7.useState)("");
   const [narrow, setNarrow] = (0, import_react7.useState)(() => matchesNarrow());
   const [tick, setTick] = (0, import_react7.useState)(0);
-  const account = state?.accounts.find((item) => item.id === state.activeAccountId) ?? null;
-  const accountId = account?.id ?? null;
+  const accounts = state?.accounts ?? [];
+  const isAll = accountScope === "all";
+  const account = accounts.find((item) => item.id === accountScope) ?? null;
+  const composeAccount = accounts.find((item) => item.id === compose?.accountId) ?? account ?? accounts[0] ?? null;
+  const showingDrafts = mailbox === DRAFTS && source === "local";
   const refresh = (0, import_react7.useCallback)(() => {
     setTick((value) => value + 1);
   }, []);
@@ -1159,29 +1416,32 @@ function MailPanel() {
   (0, import_react7.useEffect)(() => {
     let cancelled = false;
     api.state().then((next) => {
-      if (!cancelled) {
-        setState(next);
-        if (next.settings.render.listLimit > 0) setLimit(next.settings.render.listLimit);
-      }
+      if (cancelled) return;
+      setState(next);
+      if (next.settings.render.listLimit > 0) setLimit(next.settings.render.listLimit);
+      setAccountScope((current) => current ?? next.activeAccountId);
     }).catch((caught) => {
-      if (!cancelled) setError(errorText3(caught));
+      if (!cancelled) setError(errorText4(caught));
     });
     return () => {
       cancelled = true;
     };
   }, [tick]);
   (0, import_react7.useEffect)(() => {
-    if (accountId === null) return;
+    if (accountScope === null) return;
     let cancelled = false;
-    api.folders({ accountId, source }).then((result) => {
+    api.folders({ accountId: accountScope, source }).then((result) => {
       if (cancelled) return;
       const items2 = source === "local" ? [
         {
           name: "all",
           label: "\u5168\u90E8\u90AE\u4EF6",
-          count: result.items.reduce((sum, item) => sum + item.count, 0)
+          count: result.items.filter((item) => item.name !== DRAFTS).reduce((sum, item) => sum + item.count, 0)
         },
-        ...result.items.map((item) => ({ ...item, label: item.label ?? item.name }))
+        ...result.items.map((item) => ({
+          ...item,
+          label: item.name === DRAFTS ? "\u8349\u7A3F" : item.label ?? item.name
+        }))
       ] : result.items.map((item) => ({ ...item, label: item.label ?? item.name }));
       setFolders(items2);
     }).catch(() => {
@@ -1190,26 +1450,56 @@ function MailPanel() {
     return () => {
       cancelled = true;
     };
-  }, [accountId, source, tick]);
+  }, [accountScope, source, tick]);
   (0, import_react7.useEffect)(() => {
     setMailbox(source === "local" ? "all" : "INBOX");
     setSelected(null);
+    setLimit(state?.settings.render.listLimit ?? 40);
   }, [source]);
   (0, import_react7.useEffect)(() => {
-    if (accountId === null) return;
+    if (accountScope === "all" && source === "server") setSource("local");
+    setSelected(null);
+  }, [accountScope, source]);
+  (0, import_react7.useEffect)(() => {
+    if (accountScope === null) return;
     let cancelled = false;
     setLoading(true);
-    api.messages({ accountId, source, mailbox, query: search, limit }).then((result) => {
-      if (!cancelled) setPage(result);
+    if (showingDrafts) {
+      const targets = isAll ? accounts : account === null ? [] : [account];
+      Promise.all(
+        targets.map(async (target) => {
+          try {
+            const result = await api.drafts(target.id);
+            return result.items.map((draft) => ({ ...draft, accountId: target.id }));
+          } catch {
+            return [];
+          }
+        })
+      ).then((groups) => {
+        if (cancelled) return;
+        setDrafts(groups.flat().sort((left, right) => right.updatedAt.localeCompare(left.updatedAt)));
+        setPage(EMPTY_PAGE);
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }
+    api.messages({ accountId: accountScope, source, mailbox, query: search, limit }).then((result) => {
+      if (!cancelled) {
+        setPage(result);
+        setDrafts([]);
+      }
     }).catch((caught) => {
-      if (!cancelled) setError(errorText3(caught));
+      if (!cancelled) setError(errorText4(caught));
     }).finally(() => {
       if (!cancelled) setLoading(false);
     });
     return () => {
       cancelled = true;
     };
-  }, [accountId, source, mailbox, search, limit, tick]);
+  }, [accountScope, source, mailbox, search, limit, tick]);
   (0, import_react7.useEffect)(() => {
     if (typeof window.matchMedia !== "function") return;
     const media = window.matchMedia("(max-width: 900px)");
@@ -1220,11 +1510,11 @@ function MailPanel() {
     };
   }, []);
   (0, import_react7.useEffect)(() => {
-    if (!showBackup || accountId === null) return;
+    if (!showBackup || accountScope === null || isAll) return;
     let cancelled = false;
     const poll = async () => {
       try {
-        const status = await api.backupStatus(accountId);
+        const status = await api.backupStatus(accountScope);
         if (!cancelled) setBackup(status);
       } catch {
       }
@@ -1237,16 +1527,17 @@ function MailPanel() {
       cancelled = true;
       window.clearInterval(timer);
     };
-  }, [showBackup, accountId]);
+  }, [showBackup, accountScope, isAll]);
   const openMessage = async (item) => {
-    if (account === null) return;
+    const owner = item.accountId;
+    const ownerSource = source;
     setError("");
     try {
-      const detail = await api.message({ id: item.id, accountId: account.id, source, mailbox });
+      const detail = await api.message({ id: item.id, accountId: owner, source: ownerSource, mailbox });
       setSelected(detail);
       if (detail.unread && state?.settings.read.markOnOpen === true) {
         try {
-          await api.setRead({ id: detail.id, accountId: account.id, source, mailbox, read: true });
+          await api.setRead({ id: detail.id, accountId: owner, source: ownerSource, mailbox, read: true });
           setSelected({ ...detail, unread: false });
           setPage((current) => ({
             ...current,
@@ -1256,14 +1547,15 @@ function MailPanel() {
         }
       }
     } catch (caught) {
-      setError(errorText3(caught));
+      setError(errorText4(caught));
     }
   };
   const startCompose = (mode) => {
-    if (account === null) return;
+    const owner = account ?? accounts.find((item) => item.id === state?.activeAccountId) ?? accounts[0];
+    if (owner === void 0) return;
     const detail = selected;
     if (mode === "new" || detail === null) {
-      setCompose({ mode: "new", to: "", cc: "", bcc: "", subject: "", html: "" });
+      setCompose({ mode: "new", accountId: owner.id, to: "", cc: "", bcc: "", subject: "", html: "" });
       return;
     }
     const subjectPrefix = mode === "forward" ? "Fwd: " : "Re: ";
@@ -1271,6 +1563,7 @@ function MailPanel() {
     if (mode === "forward") {
       setCompose({
         mode,
+        accountId: detail.accountId,
         to: "",
         cc: "",
         bcc: "",
@@ -1281,9 +1574,10 @@ function MailPanel() {
       return;
     }
     const to = detail.from.address;
-    const cc = mode === "replyAll" ? [...detail.to, ...detail.cc].map((item) => item.address).filter((address) => address !== account.email && address !== to).join(", ") : "";
+    const cc = mode === "replyAll" ? [...detail.to, ...detail.cc].map((item) => item.address).filter((address) => address !== owner.email && address !== to).join(", ") : "";
     setCompose({
       mode,
+      accountId: detail.accountId,
       to,
       cc,
       bcc: "",
@@ -1292,32 +1586,58 @@ function MailPanel() {
       ...detail.messageId === "" ? {} : { inReplyTo: detail.messageId, references: [...detail.references, detail.messageId].join(" ") }
     });
   };
+  const openDraft = (draft) => {
+    setCompose({
+      mode: "new",
+      accountId: draft.accountId,
+      to: draft.to,
+      cc: draft.cc,
+      bcc: draft.bcc,
+      subject: draft.subject,
+      html: draft.html,
+      attachments: draft.attachments,
+      draftId: draft.id
+    });
+  };
+  const removeDraft = async (id, accountId) => {
+    try {
+      await api.deleteDraft(id, accountId);
+      setDrafts((current) => current.filter((draft) => draft.id !== id));
+      notice("\u8349\u7A3F\u5DF2\u5220\u9664");
+      refresh();
+    } catch (caught) {
+      setError(errorText4(caught));
+    }
+  };
   const switchAccount = async (id) => {
     try {
-      await api.activateAccount(id);
+      if (id !== "all") await api.activateAccount(id);
+      setAccountScope(id);
       setSelected(null);
+      if (id === "all") setSource("local");
       refresh();
     } catch (caught) {
-      setError(errorText3(caught));
+      setError(errorText4(caught));
     }
   };
   const startBackup = async () => {
-    if (accountId === null) return;
+    const owner = accountScope === null || isAll ? accounts[0] : accounts.find((item) => item.id === accountScope);
+    if (owner === void 0) return;
     try {
-      const result = await api.startBackup(accountId);
+      const result = await api.startBackup(owner.id);
       setBackup(result.status);
       setShowBackup(true);
     } catch (caught) {
-      setError(errorText3(caught));
+      setError(errorText4(caught));
     }
   };
   const stopBackup = async () => {
-    if (accountId === null) return;
+    if (accountScope === null || isAll) return;
     try {
-      const result = await api.stopBackup(accountId);
+      const result = await api.stopBackup(accountScope);
       setBackup(result.status);
     } catch (caught) {
-      setError(errorText3(caught));
+      setError(errorText4(caught));
     }
   };
   const folderOptions = (0, import_react7.useMemo)(
@@ -1334,7 +1654,7 @@ function MailPanel() {
       (0, import_react7.createElement)("div", { className: "mailharbor-empty" }, error === "" ? "\u6B63\u5728\u52A0\u8F7D\u90AE\u7BB1\u2026" : error)
     );
   }
-  if (account === null) {
+  if (accounts.length === 0) {
     return (0, import_react7.createElement)(
       "div",
       { className: "mailharbor" },
@@ -1351,13 +1671,16 @@ function MailPanel() {
         (0, import_react7.createElement)(AddAccountForm, {
           onDone: (next) => {
             setState(next);
+            setAccountScope(next.activeAccountId);
             setSource("local");
           }
         })
       )
     );
   }
-  const needsLogin = source === "server" && state.loggedIn === false;
+  const currentAccount = account ?? accounts[0] ?? null;
+  const loggedIn = isAll ? accounts.some((item) => item.id === state.activeAccountId) : state.loggedIn;
+  const needsLogin = source === "server" && !isAll && state.loggedIn === false;
   const items = page.items;
   return (0, import_react7.createElement)(
     "div",
@@ -1368,17 +1691,19 @@ function MailPanel() {
       (0, import_react7.createElement)(
         "div",
         { className: "mailharbor-account" },
-        (0, import_react7.createElement)(Avatar, { email: account.email, size: 26 }),
-        state.accounts.length > 1 ? (0, import_react7.createElement)(
+        (0, import_react7.createElement)(Avatar, { email: isAll ? "all" : currentAccount?.email ?? "?", size: 26 }),
+        accounts.length > 1 ? (0, import_react7.createElement)(
           "select",
           {
-            value: account.id,
+            value: accountScope ?? "",
             onChange: (event) => void switchAccount(event.target.value),
             "aria-label": "\u8D26\u53F7"
           },
-          state.accounts.map((item) => (0, import_react7.createElement)("option", { key: item.id, value: item.id }, item.label))
-        ) : (0, import_react7.createElement)("span", { className: "name" }, account.label),
-        state.loggedIn === false ? (0, import_react7.createElement)("span", { className: "badge warn" }, "\u672A\u767B\u5F55") : null
+          (0, import_react7.createElement)("option", { key: "all", value: "all" }, "\u5168\u90E8\u8D26\u53F7"),
+          accounts.map((item) => (0, import_react7.createElement)("option", { key: item.id, value: item.id }, item.label))
+        ) : (0, import_react7.createElement)("span", { className: "name" }, currentAccount?.label ?? ""),
+        isAll ? (0, import_react7.createElement)("span", { className: "badge" }, `${String(accounts.length)} \u4E2A\u8D26\u53F7`) : null,
+        !isAll && state.loggedIn === false ? (0, import_react7.createElement)("span", { className: "badge warn" }, "\u672A\u767B\u5F55") : null
       ),
       (0, import_react7.createElement)(
         "div",
@@ -1390,7 +1715,18 @@ function MailPanel() {
         ),
         (0, import_react7.createElement)(
           "button",
-          { className: source === "server" ? "active" : "", onClick: () => setSource("server"), role: "tab" },
+          {
+            className: source === "server" ? "active" : "",
+            onClick: () => {
+              if (isAll) {
+                notice("\u7EDF\u4E00\u6536\u4EF6\u7BB1\u53EA\u652F\u6301\u672C\u5730\u5907\u4EFD\uFF0C\u5207\u6362\u5230\u5355\u4E2A\u8D26\u53F7\u53EF\u4F7F\u7528\u670D\u52A1\u5668\u5B9E\u65F6");
+                return;
+              }
+              setSource("server");
+            },
+            role: "tab",
+            title: isAll ? "\u7EDF\u4E00\u6536\u4EF6\u7BB1\u53EA\u652F\u6301\u672C\u5730\u5907\u4EFD" : "\u8BFB\u53D6\u670D\u52A1\u5668\u4E0A\u7684\u6700\u65B0\u90AE\u4EF6"
+          },
           "\u670D\u52A1\u5668\u5B9E\u65F6"
         )
       ),
@@ -1412,7 +1748,11 @@ function MailPanel() {
       ),
       (0, import_react7.createElement)(
         "button",
-        { className: "ghost", onClick: () => void startBackup() },
+        {
+          className: "ghost",
+          onClick: () => void startBackup(),
+          title: isAll ? "\u5907\u4EFD\u5F53\u524D\u6D3B\u52A8\u8D26\u53F7" : "\u5907\u4EFD\u8FD9\u4E2A\u8D26\u53F7"
+        },
         (0, import_react7.createElement)(Icon, { name: "archive" }),
         "\u5907\u4EFD"
       ),
@@ -1425,7 +1765,11 @@ function MailPanel() {
     ),
     toast === "" ? null : (0, import_react7.createElement)("div", { className: "small", style: { padding: "6px 14px", color: "var(--m-ok)" } }, toast),
     error === "" ? null : (0, import_react7.createElement)(ErrorBar, { message: error, onDismiss: () => setError("") }),
-    needsLogin ? (0, import_react7.createElement)("div", { className: "mailharbor-settings" }, (0, import_react7.createElement)(LoginForm, { account, onDone: refresh })) : (0, import_react7.createElement)(
+    needsLogin ? (0, import_react7.createElement)(
+      "div",
+      { className: "mailharbor-settings" },
+      (0, import_react7.createElement)(LoginForm, { account: currentAccount, onDone: refresh })
+    ) : (0, import_react7.createElement)(
       "div",
       { className: "mailharbor-body", "data-mode": narrow && selected !== null ? "reader" : "list" },
       (0, import_react7.createElement)(
@@ -1450,7 +1794,7 @@ function MailPanel() {
           ),
           (0, import_react7.createElement)("input", {
             type: "search",
-            placeholder: "\u641C\u7D22\u90AE\u4EF6",
+            placeholder: showingDrafts ? "\u641C\u7D22\u8349\u7A3F" : "\u641C\u7D22\u90AE\u4EF6",
             "aria-label": "\u641C\u7D22\u90AE\u4EF6",
             value: query2,
             onChange: (event) => setQuery(event.target.value),
@@ -1478,7 +1822,73 @@ function MailPanel() {
         (0, import_react7.createElement)(
           "div",
           { className: "mailharbor-rows" },
-          loading && items.length === 0 ? (0, import_react7.createElement)("div", { className: "mailharbor-empty" }, "\u6B63\u5728\u8BFB\u53D6\u2026") : items.length === 0 ? (0, import_react7.createElement)(
+          loading && items.length === 0 && drafts.length === 0 ? (0, import_react7.createElement)("div", { className: "mailharbor-empty" }, "\u6B63\u5728\u8BFB\u53D6\u2026") : showingDrafts ? drafts.length === 0 ? (0, import_react7.createElement)(
+            "div",
+            { className: "mailharbor-empty" },
+            (0, import_react7.createElement)(Icon, { name: "compose", size: 28 }),
+            (0, import_react7.createElement)("div", { className: "title" }, "\u6CA1\u6709\u8349\u7A3F"),
+            (0, import_react7.createElement)("div", { className: "small" }, "\u5199\u4FE1\u65F6\u70B9\u300C\u5B58\u8349\u7A3F\u300D\u4F1A\u51FA\u73B0\u5728\u8FD9\u91CC\u3002")
+          ) : drafts.filter(
+            (draft) => search === "" ? true : `${draft.subject} ${draft.to} ${draft.cc}`.toLowerCase().includes(search.toLowerCase())
+          ).map(
+            (draft) => (0, import_react7.createElement)(
+              "div",
+              {
+                key: draft.id,
+                className: "mailharbor-row",
+                role: "button",
+                tabIndex: 0,
+                onClick: () => openDraft(draft),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    openDraft(draft);
+                  }
+                }
+              },
+              (0, import_react7.createElement)(
+                "span",
+                { className: "line-1" },
+                (0, import_react7.createElement)(
+                  "span",
+                  { className: "from" },
+                  `\u8349\u7A3F${draft.to === "" ? "" : ` \xB7 \u6536\u4EF6\u4EBA ${draft.to}`}`
+                ),
+                isAll ? (0, import_react7.createElement)(
+                  "span",
+                  { className: "badge" },
+                  accounts.find((item) => item.id === draft.accountId)?.label ?? ""
+                ) : null,
+                (0, import_react7.createElement)("span", { className: "date" }, shortDate(draft.updatedAt)),
+                (0, import_react7.createElement)(
+                  "button",
+                  {
+                    className: "subtle",
+                    title: "\u5220\u9664\u8349\u7A3F",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      void removeDraft(draft.id, draft.accountId);
+                    }
+                  },
+                  (0, import_react7.createElement)(Icon, { name: "close", size: 13 })
+                )
+              ),
+              (0, import_react7.createElement)(
+                "span",
+                { className: "line-2" },
+                (0, import_react7.createElement)(
+                  "span",
+                  { className: "subject" },
+                  draft.subject === "" ? "(\u65E0\u4E3B\u9898)" : draft.subject
+                )
+              ),
+              draft.html === "" ? null : (0, import_react7.createElement)(
+                "span",
+                { className: "snippet" },
+                draft.html.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim().slice(0, 120)
+              )
+            )
+          ) : items.length === 0 ? (0, import_react7.createElement)(
             "div",
             { className: "mailharbor-empty" },
             (0, import_react7.createElement)(Icon, { name: "mail", size: 28 }),
@@ -1496,8 +1906,8 @@ function MailPanel() {
             (item) => (0, import_react7.createElement)(
               "div",
               {
-                key: item.id,
-                className: `mailharbor-row${item.unread ? " unread" : ""}${selected?.id === item.id ? " selected" : ""}`,
+                key: `${item.accountId}:${item.id}`,
+                className: `mailharbor-row${item.unread ? " unread" : ""}${selected?.id === item.id && selected?.accountId === item.accountId ? " selected" : ""}`,
                 role: "button",
                 tabIndex: 0,
                 onClick: () => void openMessage(item),
@@ -1518,15 +1928,24 @@ function MailPanel() {
                   item.from.name !== "" ? item.from.name : item.from.address
                 ),
                 item.hasAttachments ? (0, import_react7.createElement)(Icon, { name: "paperclip", size: 13 }) : null,
+                isAll ? (0, import_react7.createElement)(
+                  "span",
+                  { className: "badge" },
+                  accounts.find((entry) => entry.id === item.accountId)?.label ?? ""
+                ) : null,
                 item.backedUp === false ? (0, import_react7.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null,
                 (0, import_react7.createElement)("span", { className: "date" }, shortDate(item.date))
               ),
-              (0, import_react7.createElement)("span", { className: "line-2" }, (0, import_react7.createElement)("span", { className: "subject" }, item.subject)),
+              (0, import_react7.createElement)(
+                "span",
+                { className: "line-2" },
+                (0, import_react7.createElement)("span", { className: "subject" }, item.subject)
+              ),
               item.snippet === "" ? null : (0, import_react7.createElement)("span", { className: "snippet" }, item.snippet)
             )
           )
         ),
-        items.length > 0 ? (0, import_react7.createElement)(
+        !showingDrafts && items.length > 0 ? (0, import_react7.createElement)(
           "div",
           { className: "mailharbor-list-foot" },
           (0, import_react7.createElement)("span", null, `${String(items.length)} / ${String(page.total)} \u5C01`),
@@ -1536,6 +1955,10 @@ function MailPanel() {
             { className: "subtle", onClick: () => setLimit((current) => current + 40) },
             "\u52A0\u8F7D\u66F4\u591A"
           ) : null
+        ) : showingDrafts && drafts.length > 0 ? (0, import_react7.createElement)(
+          "div",
+          { className: "mailharbor-list-foot" },
+          (0, import_react7.createElement)("span", null, `${String(drafts.length)} \u5C01\u8349\u7A3F`)
         ) : null
       ),
       (0, import_react7.createElement)(
@@ -1549,15 +1972,25 @@ function MailPanel() {
           (0, import_react7.createElement)(
             "div",
             { className: "small" },
-            state.loggedIn ? "\u5DF2\u767B\u5F55\uFF0C\u53EF\u5207\u6362\u300C\u670D\u52A1\u5668\u5B9E\u65F6\u300D\u67E5\u770B\u6700\u65B0\u90AE\u4EF6\u3002" : "\u6D4F\u89C8\u672C\u5730\u5907\u4EFD\u4E0D\u9700\u8981\u767B\u5F55\u3002"
+            loggedIn ? "\u5DF2\u767B\u5F55\uFF0C\u53EF\u5207\u6362\u300C\u670D\u52A1\u5668\u5B9E\u65F6\u300D\u67E5\u770B\u6700\u65B0\u90AE\u4EF6\u3002" : "\u6D4F\u89C8\u672C\u5730\u5907\u4EFD\u4E0D\u9700\u8981\u767B\u5F55\u3002"
           )
         ) : (0, import_react7.createElement)(Reader, {
           detail: selected,
-          account,
           source,
           mailbox,
           onChanged: (patch) => setSelected({ ...selected, ...patch }),
           onReply: (mode) => startCompose(mode),
+          onAiReply: (init) => setCompose({
+            mode: "reply",
+            accountId: selected.accountId,
+            to: init.to,
+            cc: init.cc,
+            bcc: "",
+            subject: init.subject,
+            html: init.html,
+            inReplyTo: init.inReplyTo,
+            references: init.references
+          }),
           onClose: narrow ? () => setSelected(null) : void 0
         })
       )
@@ -1594,8 +2027,8 @@ function MailPanel() {
         backup.output.length === 0 ? "\uFF08\u7B49\u5F85\u8F93\u51FA\u2026\uFF09" : backup.output.join("\n")
       )
     ) : null,
-    compose !== null ? (0, import_react7.createElement)(Composer, {
-      account,
+    compose !== null && composeAccount !== null ? (0, import_react7.createElement)(Composer, {
+      account: composeAccount,
       initial: compose,
       onClose: () => setCompose(null),
       onSent: (message) => notice(message)
@@ -1604,6 +2037,7 @@ function MailPanel() {
       onClose: () => setShowAdd(false),
       onDone: (next) => {
         setState(next);
+        setAccountScope(next.activeAccountId);
         refresh();
       }
     }) : null
@@ -1612,7 +2046,7 @@ function MailPanel() {
 
 // src/client/settings.tsx
 var import_react8 = require("react");
-function errorText4(error) {
+function errorText5(error) {
   return error instanceof ApiError || error instanceof Error ? error.message : String(error);
 }
 function MailSettings() {
@@ -1627,6 +2061,11 @@ function MailSettings() {
   const [aiEnabled, setAiEnabled] = (0, import_react8.useState)(true);
   const [aiProvider, setAiProvider] = (0, import_react8.useState)("deepseek-account");
   const [aiModel, setAiModel] = (0, import_react8.useState)("deepseek-flash");
+  const [aiModels, setAiModels] = (0, import_react8.useState)({ providers: [] });
+  const [aiStatus, setAiStatus] = (0, import_react8.useState)(null);
+  const [styleText, setStyleText] = (0, import_react8.useState)("");
+  const [styleMeta, setStyleMeta] = (0, import_react8.useState)({ updatedAt: "", sampleCount: 0 });
+  const [styleBusy, setStyleBusy] = (0, import_react8.useState)(null);
   const [editing, setEditing] = (0, import_react8.useState)(null);
   const [checkResult, setCheckResult] = (0, import_react8.useState)("");
   const [adding, setAdding] = (0, import_react8.useState)(false);
@@ -1645,12 +2084,37 @@ function MailSettings() {
       setAiProvider(view.ai.provider);
       setAiModel(view.ai.model);
     }).catch((caught) => {
-      if (!cancelled) setError(errorText4(caught));
+      if (!cancelled) setError(errorText5(caught));
     });
     return () => {
       cancelled = true;
     };
   }, [tick]);
+  (0, import_react8.useEffect)(() => {
+    let cancelled = false;
+    const accountId = settings?.activeAccountId ?? state?.activeAccountId ?? null;
+    if (accountId === null) return;
+    Promise.all([api.aiStatus(accountId), api.aiModels(), api.aiStyle(accountId)]).then(([status, models, style]) => {
+      if (cancelled) return;
+      setAiStatus(status);
+      setAiModels(models);
+      setStyleText(style.style?.profile ?? "");
+      setStyleMeta({
+        updatedAt: style.style?.updatedAt ?? "",
+        sampleCount: style.style?.sampleCount ?? 0
+      });
+      const preferred = models.providers.find((item) => item.provider === status.provider) ?? models.providers[0];
+      if (preferred !== void 0 && status.provider === "") {
+        setAiProvider(preferred.provider);
+        const firstModel = preferred.models[0];
+        if (firstModel !== void 0) setAiModel(firstModel.id);
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [tick, settings?.activeAccountId]);
   const reload = () => setTick((value) => value + 1);
   const notify = (message) => {
     setToast(message);
@@ -1664,7 +2128,7 @@ function MailSettings() {
       setSettings(result.settings);
       notify("\u8BBE\u7F6E\u5DF2\u4FDD\u5B58");
     } catch (caught) {
-      setError(errorText4(caught));
+      setError(errorText5(caught));
     }
   };
   const account = settings?.accounts.find((item) => item.id === settings.activeAccountId) ?? null;
@@ -1716,7 +2180,7 @@ function MailSettings() {
                   `IMAP \u6B63\u5E38\uFF08${String(result.imap.mailboxes.length)} \u4E2A\u6587\u4EF6\u5939\uFF09\xB7 SMTP ${result.smtp.ok ? "\u6B63\u5E38" : `\u5931\u8D25: ${result.smtp.error ?? ""}`}`
                 );
               } catch (caught) {
-                setCheckResult(`\u5931\u8D25: ${errorText4(caught)}`);
+                setCheckResult(`\u5931\u8D25: ${errorText5(caught)}`);
               }
             },
             onSave: async (patch) => {
@@ -1803,34 +2267,135 @@ function MailSettings() {
             setAiEnabled(value);
             void saveGeneral({ ai: { enabled: value } });
           },
-          label: "\u542F\u7528 AI\uFF08\u6458\u8981\u3001\u8D77\u8349\u3001\u6DA6\u8272\u3001\u81EA\u7136\u8BED\u8A00\u641C\u7D22\uFF09"
+          label: "\u542F\u7528 AI\uFF08\u6458\u8981\u3001AI \u56DE\u590D\u3001\u7FFB\u8BD1\u3001\u5199\u4F5C\u98CE\u683C\uFF09"
         }),
+        aiStatus === null ? null : (0, import_react8.createElement)(
+          "div",
+          { className: "small", style: { color: aiStatus.available ? "var(--m-ok)" : "var(--m-warn)" } },
+          aiStatus.available ? `\u6A21\u578B\u670D\u52A1\u53EF\u7528 \xB7 ${aiStatus.provider} / ${aiStatus.model}` : aiStatus.error ?? "\u5F53\u524D DSH \u7EC4\u5408\u6CA1\u6709\u53EF\u7528\u7684\u6A21\u578B\u670D\u52A1"
+        ),
         (0, import_react8.createElement)(
           "div",
           { className: "mailharbor-grid" },
           (0, import_react8.createElement)(
             Field,
             { label: "Provider" },
-            (0, import_react8.createElement)("input", {
+            aiModels.providers.length === 0 ? (0, import_react8.createElement)("input", {
               value: aiProvider,
               onChange: (event) => setAiProvider(event.target.value),
               onBlur: () => void saveGeneral({ ai: { provider: aiProvider } })
-            })
+            }) : (0, import_react8.createElement)(
+              "select",
+              {
+                value: aiProvider,
+                onChange: (event) => {
+                  setAiProvider(event.target.value);
+                  const provider = aiModels.providers.find((item) => item.provider === event.target.value);
+                  const first = provider?.models[0];
+                  if (first !== void 0) setAiModel(first.id);
+                  void saveGeneral({
+                    ai: {
+                      provider: event.target.value,
+                      ...first === void 0 ? {} : { model: first.id }
+                    }
+                  });
+                }
+              },
+              aiModels.providers.map(
+                (item) => (0, import_react8.createElement)("option", { key: item.provider, value: item.provider }, item.name)
+              )
+            )
           ),
           (0, import_react8.createElement)(
             Field,
             { label: "\u6A21\u578B" },
-            (0, import_react8.createElement)("input", {
-              value: aiModel,
-              onChange: (event) => setAiModel(event.target.value),
-              onBlur: () => void saveGeneral({ ai: { model: aiModel } })
-            })
+            (() => {
+              const provider = aiModels.providers.find((item) => item.provider === aiProvider);
+              return provider === void 0 || provider.models.length === 0 ? (0, import_react8.createElement)("input", {
+                value: aiModel,
+                onChange: (event) => setAiModel(event.target.value),
+                onBlur: () => void saveGeneral({ ai: { model: aiModel } })
+              }) : (0, import_react8.createElement)(
+                "select",
+                {
+                  value: aiModel,
+                  onChange: (event) => {
+                    setAiModel(event.target.value);
+                    void saveGeneral({ ai: { model: event.target.value } });
+                  }
+                },
+                provider.models.map((item) => (0, import_react8.createElement)("option", { key: item.id, value: item.id }, item.name))
+              );
+            })()
+          )
+        ),
+        (0, import_react8.createElement)("hr", null),
+        (0, import_react8.createElement)(
+          "div",
+          { style: { display: "flex", alignItems: "center", gap: "8px" } },
+          (0, import_react8.createElement)("strong", { style: { fontSize: "12.5px" } }, "\u5199\u4F5C\u98CE\u683C"),
+          (0, import_react8.createElement)(
+            "span",
+            { className: "small muted" },
+            styleMeta.updatedAt === "" ? "\u8FD8\u6CA1\u6709\u751F\u6210" : `${styleMeta.sampleCount} \u5C01\u5DF2\u53D1\u9001\u90AE\u4EF6 \xB7 ${new Date(styleMeta.updatedAt).toLocaleString()}`
+          )
+        ),
+        (0, import_react8.createElement)(
+          "p",
+          { className: "small muted" },
+          "\u4ECE\u5DF2\u53D1\u9001\u90AE\u4EF6\u5B66\u4E60\u4F60\u7684\u79F0\u547C\u3001\u7ED3\u5C3E\u3001\u8BED\u6C14\u548C\u5E38\u7528\u8868\u8FBE\uFF0CAI \u56DE\u590D\u65F6\u4F1A\u53C2\u8003\u5B83\u3002\u53EA\u4FDD\u5B58\u63D0\u70BC\u540E\u7684\u6863\u6848\uFF0C\u4E0D\u4FDD\u5B58\u90AE\u4EF6\u539F\u6587\u3002"
+        ),
+        (0, import_react8.createElement)("textarea", {
+          rows: 6,
+          value: styleText,
+          placeholder: "\u70B9\u300C\u4ECE\u5DF2\u53D1\u9001\u90AE\u4EF6\u5B66\u4E60\u300D\u751F\u6210\uFF0C\u6216\u76F4\u63A5\u5199\u4E00\u6BB5\u4F60\u7684\u5199\u4F5C\u98CE\u683C",
+          onChange: (event) => setStyleText(event.target.value)
+        }),
+        (0, import_react8.createElement)(
+          "div",
+          { style: { display: "flex", gap: "8px", flexWrap: "wrap" } },
+          (0, import_react8.createElement)(
+            "button",
+            {
+              className: "ghost",
+              disabled: styleBusy !== null,
+              onClick: () => {
+                const accountId = settings.activeAccountId;
+                if (accountId === null) return;
+                setStyleBusy("learn");
+                setError("");
+                api.aiLearnStyle(accountId).then((result) => {
+                  setStyleText(result.style.profile);
+                  setStyleMeta({ updatedAt: result.style.updatedAt, sampleCount: result.style.sampleCount });
+                  notify("\u5DF2\u6839\u636E\u5DF2\u53D1\u9001\u90AE\u4EF6\u751F\u6210\u5199\u4F5C\u98CE\u683C");
+                }).catch((caught) => setError(errorText5(caught))).finally(() => setStyleBusy(null));
+              }
+            },
+            styleBusy === "learn" ? "\u5B66\u4E60\u4E2D\u2026" : "\u4ECE\u5DF2\u53D1\u9001\u90AE\u4EF6\u5B66\u4E60"
+          ),
+          (0, import_react8.createElement)(
+            "button",
+            {
+              className: "primary",
+              disabled: styleBusy !== null || styleText.trim() === "",
+              onClick: () => {
+                const accountId = settings.activeAccountId;
+                if (accountId === null) return;
+                setStyleBusy("save");
+                setError("");
+                api.aiSaveStyle(accountId, styleText).then((result) => {
+                  setStyleMeta({ updatedAt: result.style.updatedAt, sampleCount: result.style.sampleCount });
+                  notify("\u5199\u4F5C\u98CE\u683C\u5DF2\u4FDD\u5B58");
+                }).catch((caught) => setError(errorText5(caught))).finally(() => setStyleBusy(null));
+              }
+            },
+            "\u4FDD\u5B58\u98CE\u683C"
           )
         ),
         (0, import_react8.createElement)(
           "p",
           { className: "small muted" },
-          "AI \u8C03\u7528\u8D70 DSH \u81EA\u5DF1\u7684\u6A21\u578B\u670D\u52A1\uFF0C\u4E0D\u989D\u5916\u4FDD\u5B58\u5BC6\u94A5\u3002AI \u9762\u677F\u529F\u80FD\u5C06\u5728 v0.2 \u63D0\u4F9B\u3002"
+          "AI \u8C03\u7528\u8D70 DSH \u81EA\u5DF1\u7684\u6A21\u578B\u670D\u52A1\uFF0C\u4E0D\u989D\u5916\u4FDD\u5B58\u5BC6\u94A5\uFF1B\u53D1\u9001\u4ECD\u7136\u53EA\u7531\u4F60\u786E\u8BA4\u3002"
         )
       ),
       (0, import_react8.createElement)(
@@ -1845,7 +2410,11 @@ function MailSettings() {
           (0, import_react8.createElement)("dt", null, "\u914D\u7F6E\u6587\u4EF6"),
           (0, import_react8.createElement)("dd", null, settings.configFile),
           (0, import_react8.createElement)("dt", null, "\u5F53\u524D\u8D26\u53F7\u6570\u636E\u5E93"),
-          (0, import_react8.createElement)("dd", null, account === null ? "\u2014" : `${settings.dataDir}/accounts/${account.id}/mail.db`),
+          (0, import_react8.createElement)(
+            "dd",
+            null,
+            account === null ? "\u2014" : `${account.dataDir.startsWith("/") ? account.dataDir : `${settings.dataDir}/${account.dataDir}`}/mail.db`
+          ),
           (0, import_react8.createElement)("dt", null, "\u63D2\u4EF6\u7248\u672C"),
           (0, import_react8.createElement)("dd", null, state.version)
         ),
@@ -1862,7 +2431,7 @@ function MailSettings() {
                   notify(status.status.message === "" ? "\u5907\u4EFD\u5DF2\u5F00\u59CB" : status.status.message);
                   reload();
                 } catch (caught) {
-                  setError(errorText4(caught));
+                  setError(errorText5(caught));
                 }
               }
             },
@@ -2073,7 +2642,7 @@ function AccountRow({
 }
 
 // src/client/index.tsx
-var VERSION = "0.2.1";
+var VERSION = "0.3.0";
 var inject = ["slots"];
 var PANEL_ID = "mailharbor";
 var STYLE_ID = "mailharbor-style";