@zaclinley/dsh-mailharbor 0.4.1 → 0.5.0

package/lib/client.js

@@ -27,6 +27,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   PANEL_ID: () => PANEL_ID,
+  TASKS_PANEL_ID: () => TASKS_PANEL_ID,
   VERSION: () => VERSION,
   apply: () => apply,
   inject: () => inject
@@ -34,7 +35,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  position: relative;\n}\n\n.mailharbor button.active {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\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 rail ---------- */\n\n.mailharbor-ai {\n  display: flex;\n  flex-direction: column;\n  width: 340px;\n  flex: none;\n  min-height: 0;\n  border-left: 1px solid var(--m-line-soft);\n  background: var(--m-bg);\n}\n\n.mailharbor-ai-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 46px;\n  padding: 0 8px 0 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-head strong {\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.mailharbor-ai-confirm {\n  display: inline-flex;\n  gap: 2px;\n}\n\n.mailharbor-ai-context {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 9px 14px 10px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-context strong {\n  font-size: 12.5px;\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-ai-warn {\n  padding: 8px 14px;\n  color: var(--m-warn);\n  background: rgba(221, 134, 41, 0.1);\n  font-size: 12px;\n  flex: none;\n}\n\n.mailharbor-ai-quick {\n  display: flex;\n  gap: 6px;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-quick button {\n  flex: 1;\n  padding: 0 6px;\n}\n\n.mailharbor-ai-list {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 12px 14px;\n}\n\n.mailharbor-ai-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  padding: 30px 12px;\n  text-align: center;\n  color: var(--m-text-3);\n}\n\n.mailharbor-ai-empty .title {\n  color: var(--m-text-2);\n  font-weight: 500;\n  font-size: 12.5px;\n}\n\n.mailharbor-ai-card {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n  overflow: hidden;\n}\n\n.mailharbor-ai-card.generating {\n  opacity: 0.7;\n}\n\n.mailharbor-ai-card-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 8px 7px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-ai-card-head > span:first-child {\n  color: var(--m-text-2);\n  font-weight: 600;\n}\n\n.mailharbor-ai-summary {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 10px 12px;\n}\n\n.mailharbor-ai-summary section h4 {\n  margin: 0 0 3px;\n  font-size: 11px;\n  color: var(--m-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.mailharbor-ai-summary section p {\n  margin: 0;\n  white-space: pre-wrap;\n  font-size: 12.5px;\n  line-height: 1.65;\n  color: var(--m-text);\n}\n\n.mailharbor-ai-text {\n  padding: 10px 12px;\n  max-height: 320px;\n  overflow: auto;\n  white-space: pre-wrap;\n  font-size: 12.5px;\n  line-height: 1.65;\n  color: var(--m-text);\n}\n\n.mailharbor-ai-card-actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n  padding: 6px 8px;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n.mailharbor-ai-card-actions button {\n  height: 26px;\n  padding: 0 8px;\n  font-size: 11.5px;\n}\n\n.mailharbor-ai-ask {\n  display: flex;\n  gap: 6px;\n  padding: 10px 12px;\n  border-top: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-ask input {\n  flex: 1;\n  height: 32px;\n}\n\n.mailharbor-ai-error {\n  color: var(--m-danger);\n  font-size: 12px;\n  padding: 0 2px;\n}\n\n@media (max-width: 1280px) {\n  .mailharbor-ai {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: min(420px, 94%);\n    z-index: 6;\n    border-left: 1px solid var(--m-line);\n    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);\n  }\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/* ---------- composer AI ---------- */\n\n.mailharbor-toolbar button.ai {\n  color: var(--m-accent);\n}\n\n.mailharbor-compose-foot {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  flex-wrap: wrap;\n}\n\n.mailharbor-versions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  padding-top: 8px;\n}\n\n.mailharbor-versions .chip {\n  height: 22px;\n  padding: 0 8px;\n  border: 1px solid var(--m-line);\n  border-radius: 999px;\n  color: var(--m-text-3);\n  font-size: 11px;\n}\n\n.mailharbor-versions .chip.active {\n  background: var(--m-accent-soft);\n  border-color: transparent;\n  color: var(--m-text);\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  background: var(--m-bg);\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  position: relative;\n}\n\n.mailharbor button.active {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\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 rail ---------- */\n\n.mailharbor-ai {\n  display: flex;\n  flex-direction: column;\n  width: 340px;\n  flex: none;\n  min-height: 0;\n  border-left: 1px solid var(--m-line-soft);\n  background: var(--m-bg);\n}\n\n.mailharbor-ai-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 46px;\n  padding: 0 8px 0 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-head strong {\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.mailharbor-ai-confirm {\n  display: inline-flex;\n  gap: 2px;\n}\n\n.mailharbor-ai-context {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 9px 14px 10px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-context strong {\n  font-size: 12.5px;\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-ai-warn {\n  padding: 8px 14px;\n  color: var(--m-warn);\n  background: rgba(221, 134, 41, 0.1);\n  font-size: 12px;\n  flex: none;\n}\n\n.mailharbor-ai-quick {\n  display: flex;\n  gap: 6px;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-quick button {\n  flex: 1;\n  padding: 0 6px;\n}\n\n.mailharbor-ai-list {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 12px 14px;\n}\n\n.mailharbor-ai-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  padding: 30px 12px;\n  text-align: center;\n  color: var(--m-text-3);\n}\n\n.mailharbor-ai-empty .title {\n  color: var(--m-text-2);\n  font-weight: 500;\n  font-size: 12.5px;\n}\n\n.mailharbor-ai-card {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n  overflow: hidden;\n}\n\n.mailharbor-ai-card.generating {\n  opacity: 0.7;\n}\n\n.mailharbor-ai-card-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 8px 7px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-ai-card-head > span:first-child {\n  color: var(--m-text-2);\n  font-weight: 600;\n}\n\n.mailharbor-ai-summary {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 10px 12px;\n}\n\n.mailharbor-ai-summary section h4 {\n  margin: 0 0 3px;\n  font-size: 11px;\n  color: var(--m-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.mailharbor-ai-summary section p {\n  margin: 0;\n  white-space: pre-wrap;\n  font-size: 12.5px;\n  line-height: 1.65;\n  color: var(--m-text);\n}\n\n.mailharbor-ai-text {\n  padding: 10px 12px;\n  max-height: 320px;\n  overflow: auto;\n  white-space: pre-wrap;\n  font-size: 12.5px;\n  line-height: 1.65;\n  color: var(--m-text);\n}\n\n.mailharbor-ai-card-actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n  padding: 6px 8px;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n.mailharbor-ai-card-actions button {\n  height: 26px;\n  padding: 0 8px;\n  font-size: 11.5px;\n}\n\n.mailharbor-ai-ask {\n  display: flex;\n  gap: 6px;\n  padding: 10px 12px;\n  border-top: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-ask input {\n  flex: 1;\n  height: 32px;\n}\n\n.mailharbor-ai-error {\n  color: var(--m-danger);\n  font-size: 12px;\n  padding: 0 2px;\n}\n\n@media (max-width: 1280px) {\n  .mailharbor-ai {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: min(420px, 94%);\n    z-index: 6;\n    border-left: 1px solid var(--m-line);\n    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);\n  }\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 > input,\n.mailharbor-field > select,\n.mailharbor-field > textarea,\n.mailharbor-card > textarea {\n  width: 100%;\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: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 10px;\n  min-width: 0;\n}\n\n.mailharbor-grid.three {\n  grid-template-columns: minmax(0, 2fr) minmax(72px, 90px) auto;\n  align-items: end;\n  min-width: 0;\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/* ---------- selection / extraction ---------- */\n\n.mailharbor-selectbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  margin: 0 12px 8px;\n  border: 1px solid var(--m-accent-soft);\n  border-radius: 9px;\n  background: var(--m-accent-soft);\n}\n\n.mailharbor-selectbar select {\n  height: 28px;\n  max-width: 200px;\n}\n\n.mailharbor-row.selectable input[type='checkbox'] {\n  width: 15px;\n  height: 15px;\n  flex: none;\n  accent-color: var(--m-accent);\n}\n\n.mailharbor-extract-row {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 9px 10px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 9px;\n  background: var(--m-bg-1);\n  cursor: pointer;\n}\n\n.mailharbor-extract-row input {\n  margin-top: 2px;\n  accent-color: var(--m-accent);\n}\n\n.mailharbor-extract-row > span {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  min-width: 0;\n}\n\n.mailharbor-kv {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 6px 12px;\n  margin: 0;\n  font-size: 12.5px;\n}\n\n.mailharbor-kv dt {\n  color: var(--m-text-3);\n}\n\n.mailharbor-kv dd {\n  margin: 0;\n  overflow-wrap: anywhere;\n}\n\n/* ---------- tasks panel ---------- */\n\n.mailharbor .chip {\n  height: 26px;\n  padding: 0 10px;\n  border: 1px solid var(--m-line);\n  border-radius: 999px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor .chip.active {\n  background: var(--m-accent-soft);\n  border-color: transparent;\n  color: var(--m-text);\n}\n\n.tasks-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 18px 20px 48px;\n  width: 100%;\n  max-width: 940px;\n  margin: 0 auto;\n}\n\n.tasks-overview {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));\n  gap: 12px;\n}\n\n.tasks-progress,\n.tasks-project {\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  padding: 12px 14px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n  min-width: 0;\n}\n\n.tasks-progress-head,\n.tasks-project-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  min-width: 0;\n}\n\n.tasks-project-head .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 12.5px;\n  font-weight: 500;\n}\n\n.tasks-bar {\n  height: 6px;\n  border-radius: 999px;\n  background: var(--m-bg-3);\n  overflow: hidden;\n}\n\n.tasks-bar span {\n  display: block;\n  height: 100%;\n  border-radius: 999px;\n  background: var(--m-accent);\n  transition: width 200ms ease;\n}\n\n.tasks-bar.small {\n  height: 4px;\n}\n\n.tasks-filters {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.tasks-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.tasks-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 12px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n}\n\n.tasks-row input[type='checkbox'] {\n  width: 16px;\n  height: 16px;\n  flex: none;\n  accent-color: var(--m-accent);\n}\n\n.tasks-row .tasks-title {\n  flex: 1;\n  min-width: 0;\n  height: auto;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  text-align: left;\n  border: 0;\n  background: transparent;\n}\n\n.tasks-row .tasks-title:hover {\n  background: transparent;\n}\n\n.tasks-row .tasks-title > span:first-child {\n  font-size: 13px;\n  color: var(--m-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n}\n\n.tasks-row.done .tasks-title > span:first-child {\n  color: var(--m-text-3);\n  text-decoration: line-through;\n}\n\n.tasks-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  color: var(--m-text-3);\n}\n\n.tasks-meta .due.overdue {\n  color: var(--m-danger);\n}\n\n.tasks-list-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n/* ---------- markdown ---------- */\n\n.mailharbor-markdown {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  font-size: 12.5px;\n  line-height: 1.68;\n  overflow-wrap: anywhere;\n}\n\n.mailharbor-markdown > *:first-child {\n  margin-top: 0;\n}\n\n.mailharbor-markdown > *:last-child {\n  margin-bottom: 0;\n}\n\n.mailharbor-markdown p {\n  margin: 0;\n  white-space: pre-wrap;\n}\n\n.mailharbor-markdown h1,\n.mailharbor-markdown h2,\n.mailharbor-markdown h3,\n.mailharbor-markdown h4,\n.mailharbor-markdown h5,\n.mailharbor-markdown h6 {\n  margin: 4px 0 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--m-text);\n}\n\n.mailharbor-markdown ul,\n.mailharbor-markdown ol {\n  margin: 0;\n  padding-left: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.mailharbor-markdown li::marker {\n  color: var(--m-text-3);\n}\n\n.mailharbor-markdown a {\n  color: var(--m-accent);\n  text-decoration: none;\n}\n\n.mailharbor-markdown a:hover {\n  text-decoration: underline;\n}\n\n.mailharbor-markdown code {\n  padding: 1px 4px;\n  border-radius: 4px;\n  background: var(--m-bg-2);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11.5px;\n}\n\n.mailharbor-markdown pre {\n  margin: 0;\n  padding: 10px 12px;\n  border-radius: 8px;\n  background: var(--m-bg);\n  border: 1px solid var(--m-line-soft);\n  overflow: auto;\n}\n\n.mailharbor-markdown pre code {\n  padding: 0;\n  background: transparent;\n}\n\n.mailharbor-markdown blockquote {\n  margin: 0;\n  padding-left: 10px;\n  border-left: 2px solid var(--m-line);\n  color: var(--m-text-2);\n}\n\n.mailharbor-markdown hr {\n  width: 100%;\n  margin: 4px 0;\n  border: 0;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n/* ---------- composer AI ---------- */\n\n.mailharbor-toolbar button.ai {\n  color: var(--m-accent);\n}\n\n.mailharbor-compose-foot {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  flex-wrap: wrap;\n}\n\n.mailharbor-versions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  padding-top: 8px;\n}\n\n.mailharbor-versions .chip {\n  height: 22px;\n  padding: 0 8px;\n  border: 1px solid var(--m-line);\n  border-radius: 999px;\n  color: var(--m-text-3);\n  font-size: 11px;\n}\n\n.mailharbor-versions .chip.active {\n  background: var(--m-accent-soft);\n  border-color: transparent;\n  color: var(--m-text);\n}\n\n/* ---------- settings ---------- */\n\n.mailharbor.mailharbor-settings-page {\n  height: auto;\n  min-height: 100%;\n  overflow: visible;\n}\n\n.mailharbor-settings {\n  flex: 0 0 auto;\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  padding: 18px 20px 48px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  overflow-x: hidden;\n}\n\n.mailharbor-settings > * {\n  min-width: 0;\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  min-width: 0;\n  overflow: hidden;\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");
@@ -161,6 +162,46 @@ var api = {
     method: "POST",
     body: JSON.stringify({ accountId: accountId ?? null })
   }),
+  tasks: (accountId, params = {}) => request(
+    `tasks${query({ accountId: accountId ?? null, ...params })}`
+  ),
+  createTask: (payload) => request("tasks", { method: "POST", body: JSON.stringify(payload) }),
+  updateTask: (id, patch) => request(`tasks/${encodeURIComponent(id)}`, {
+    method: "PATCH",
+    body: JSON.stringify(patch)
+  }),
+  deleteTask: (id) => request(`tasks/${encodeURIComponent(id)}`, { method: "DELETE" }),
+  extractTasks: (payload) => request("tasks/extract", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  }),
+  taskCaldav: (accountId) => request(`tasks/caldav${query({ accountId: accountId ?? null })}`),
+  saveTaskCaldav: (payload) => request("tasks/caldav", {
+    method: "PUT",
+    body: JSON.stringify(payload)
+  }),
+  syncTasks: (accountId) => request("tasks/sync", { method: "POST", body: JSON.stringify({ accountId }) }),
+  projects: () => request("projects"),
+  projectFor: (accountId, key) => request(`projects/for${query({ accountId: accountId ?? null, key })}`),
+  createProject: (payload) => request("projects", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  }),
+  addProjectMessage: (id, payload) => request(`projects/${encodeURIComponent(id)}/messages`, {
+    method: "POST",
+    body: JSON.stringify(payload)
+  }),
+  removeProjectMessage: (id, accountId, key) => request(
+    `projects/${encodeURIComponent(id)}/messages${query({ accountId: accountId ?? null, key })}`,
+    { method: "DELETE" }
+  ),
+  transferProject: (id, payload) => request(`projects/${encodeURIComponent(id)}/transfer`, {
+    method: "POST",
+    body: JSON.stringify(payload)
+  }),
+  lookupMessage: (accountId, key) => request(
+    `messages/lookup${query({ accountId: accountId ?? null, key })}`
+  ),
   settings: () => request("settings"),
   saveSettings: (patch) => request("settings", { method: "PATCH", body: JSON.stringify(patch) }),
   backupStatus: (accountId) => request(`backup/status${query({ accountId: accountId ?? null })}`),
@@ -255,65 +296,218 @@ function MailIcon() {
 }
 
 // src/client/panel.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/client/ai-rail.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 
-// src/client/icons.tsx
+// src/client/components.tsx
 var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+function Avatar({ email, size = 26 }) {
+  const letter = (email.trim()[0] ?? "?").toUpperCase();
+  return (0, import_react2.createElement)(
+    "span",
+    {
+      className: "avatar",
+      style: {
+        width: `${String(size)}px`,
+        height: `${String(size)}px`,
+        fontSize: `${String(Math.round(size * 0.42))}px`
+      },
+      "aria-hidden": "true"
+    },
+    letter
+  );
+}
+function Field({
+  label,
+  children,
+  hint
+}) {
+  return (0, import_react2.createElement)(
+    "div",
+    { className: "mailharbor-field" },
+    (0, import_react2.createElement)("label", null, label),
+    children,
+    hint === void 0 ? null : (0, import_react2.createElement)("span", { className: "small muted" }, hint)
+  );
+}
+function Toggle({
+  checked,
+  onChange,
+  label
+}) {
+  return (0, import_react2.createElement)(
+    "label",
+    { className: "mailharbor-toggle" },
+    (0, import_react2.createElement)("input", {
+      type: "checkbox",
+      checked,
+      onChange: (event) => {
+        onChange(event.target.checked);
+      }
+    }),
+    label
+  );
+}
+function portalRoot() {
+  const existing = document.getElementById("mailharbor-portal");
+  if (existing !== null) return existing;
+  const element = document.createElement("div");
+  element.id = "mailharbor-portal";
+  element.className = "mailharbor mailharbor-portal";
+  document.body.append(element);
+  return element;
+}
+function Modal({
+  title,
+  children,
+  footer,
+  onClose,
+  wide = false
+}) {
+  (0, import_react2.useEffect)(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [onClose]);
+  return (0, import_react_dom.createPortal)(
+    (0, import_react2.createElement)(
+      "div",
+      {
+        className: "mailharbor-modal-mask",
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget) onClose();
+        }
+      },
+      (0, import_react2.createElement)(
+        "div",
+        {
+          className: "mailharbor-modal",
+          style: wide ? { width: "min(920px, 100%)" } : void 0,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": title
+        },
+        (0, import_react2.createElement)(
+          "header",
+          null,
+          title,
+          (0, import_react2.createElement)("span", { className: "spacer" }),
+          (0, import_react2.createElement)("button", { className: "subtle", onClick: onClose, "aria-label": "\u5173\u95ED" }, "\u2715")
+        ),
+        (0, import_react2.createElement)("div", { className: "content" }, children),
+        footer === void 0 ? null : (0, import_react2.createElement)("footer", null, footer)
+      )
+    ),
+    portalRoot()
+  );
+}
+function ErrorBar({ message, onDismiss }) {
+  return (0, import_react2.createElement)(
+    "div",
+    { className: "error", role: "alert" },
+    (0, import_react2.createElement)("span", null, message),
+    (0, import_react2.createElement)("span", { className: "spacer" }),
+    (0, import_react2.createElement)("button", { className: "subtle", onClick: onDismiss }, "\u5173\u95ED")
+  );
+}
+function shortDate(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso.slice(0, 16);
+  const now = /* @__PURE__ */ new Date();
+  const sameDay = date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate();
+  const pad = (value) => String(value).padStart(2, "0");
+  if (sameDay) return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  if (date.getFullYear() === now.getFullYear()) return `${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  return `${String(date.getFullYear())}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function longDate(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  return date.toLocaleString(void 0, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function formatBytes(size) {
+  if (!Number.isFinite(size) || size <= 0) return "";
+  if (size < 1024) return `${String(size)} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
+
+// src/client/icons.tsx
+var import_react3 = require("react");
 var PATHS = {
-  refresh: (0, import_react2.createElement)("path", { d: "M20 11a8 8 0 1 0-2.3 5.7M20 5v6h-6" }),
-  plus: (0, import_react2.createElement)("path", { d: "M12 5v14M5 12h14" }),
-  compose: (0, import_react2.createElement)("path", { d: "M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3zM13.5 6.5l3 3" }),
-  archive: (0, import_react2.createElement)(
+  refresh: (0, import_react3.createElement)("path", { d: "M20 11a8 8 0 1 0-2.3 5.7M20 5v6h-6" }),
+  plus: (0, import_react3.createElement)("path", { d: "M12 5v14M5 12h14" }),
+  compose: (0, import_react3.createElement)("path", { d: "M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3zM13.5 6.5l3 3" }),
+  archive: (0, import_react3.createElement)(
     "g",
     null,
-    (0, import_react2.createElement)("rect", { x: 3, y: 4, width: 18, height: 5, rx: 1.5 }),
-    (0, import_react2.createElement)("path", { d: "M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4" })
+    (0, import_react3.createElement)("rect", { x: 3, y: 4, width: 18, height: 5, rx: 1.5 }),
+    (0, import_react3.createElement)("path", { d: "M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4" })
   ),
-  paperclip: (0, import_react2.createElement)("path", {
+  paperclip: (0, import_react3.createElement)("path", {
     d: "M20 11.5 12 19.5a5 5 0 0 1-7-7l8-8a3.3 3.3 0 0 1 4.7 4.7l-8 8a1.7 1.7 0 0 1-2.4-2.4l7.3-7.3"
   }),
-  mail: (0, import_react2.createElement)(
+  mail: (0, import_react3.createElement)(
     "g",
     null,
-    (0, import_react2.createElement)("rect", { x: 3, y: 5, width: 18, height: 14, rx: 2.5 }),
-    (0, import_react2.createElement)("path", { d: "m4 7 7.1 5a1.6 1.6 0 0 0 1.8 0L20 7" })
+    (0, import_react3.createElement)("rect", { x: 3, y: 5, width: 18, height: 14, rx: 2.5 }),
+    (0, import_react3.createElement)("path", { d: "m4 7 7.1 5a1.6 1.6 0 0 0 1.8 0L20 7" })
   ),
-  search: (0, import_react2.createElement)("path", { d: "M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM20 20l-4-4" }),
-  reply: (0, import_react2.createElement)("path", { d: "M9 7 4 12l5 5M4 12h9a6 6 0 0 1 6 6v1" }),
-  replyAll: (0, import_react2.createElement)("path", { d: "m9 7-5 5 5 5M14 7l-5 5 5 5M13 12h5a5 5 0 0 1 5 5" }),
-  forward: (0, import_react2.createElement)("path", { d: "m15 7 5 5-5 5M20 12h-9a6 6 0 0 0-6 6v1" }),
-  check: (0, import_react2.createElement)("path", { d: "m5 13 4 4L19 7" }),
-  image: (0, import_react2.createElement)(
+  search: (0, import_react3.createElement)("path", { d: "M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM20 20l-4-4" }),
+  reply: (0, import_react3.createElement)("path", { d: "M9 7 4 12l5 5M4 12h9a6 6 0 0 1 6 6v1" }),
+  replyAll: (0, import_react3.createElement)("path", { d: "m9 7-5 5 5 5M14 7l-5 5 5 5M13 12h5a5 5 0 0 1 5 5" }),
+  forward: (0, import_react3.createElement)("path", { d: "m15 7 5 5-5 5M20 12h-9a6 6 0 0 0-6 6v1" }),
+  check: (0, import_react3.createElement)("path", { d: "m5 13 4 4L19 7" }),
+  image: (0, import_react3.createElement)(
     "g",
     null,
-    (0, import_react2.createElement)("rect", { x: 3, y: 4, width: 18, height: 16, rx: 2 }),
-    (0, import_react2.createElement)("circle", { cx: 8.5, cy: 9.5, r: 1.5 }),
-    (0, import_react2.createElement)("path", { d: "m4 18 5-5 4 4 3-3 4 4" })
+    (0, import_react3.createElement)("rect", { x: 3, y: 4, width: 18, height: 16, rx: 2 }),
+    (0, import_react3.createElement)("circle", { cx: 8.5, cy: 9.5, r: 1.5 }),
+    (0, import_react3.createElement)("path", { d: "m4 18 5-5 4 4 3-3 4 4" })
   ),
-  close: (0, import_react2.createElement)("path", { d: "M6 6l12 12M18 6 6 18" }),
-  chevronLeft: (0, import_react2.createElement)("path", { d: "m14 6-6 6 6 6" }),
-  chevronRight: (0, import_react2.createElement)("path", { d: "m10 6 6 6-6 6" }),
-  sparkles: (0, import_react2.createElement)(
+  close: (0, import_react3.createElement)("path", { d: "M6 6l12 12M18 6 6 18" }),
+  chevronLeft: (0, import_react3.createElement)("path", { d: "m14 6-6 6 6 6" }),
+  chevronRight: (0, import_react3.createElement)("path", { d: "m10 6 6 6-6 6" }),
+  sparkles: (0, import_react3.createElement)(
     "g",
     null,
-    (0, import_react2.createElement)("path", { d: "m12 3 1.8 4.6L18.5 9l-4.7 1.4L12 15l-1.8-4.6L5.5 9l4.7-1.4z" }),
-    (0, import_react2.createElement)("path", { d: "M18.5 15.5 19.3 18l2.2.8-2.2.7-.8 2.5-.8-2.5-2.2-.7 2.2-.8z" })
+    (0, import_react3.createElement)("path", { d: "m12 3 1.8 4.6L18.5 9l-4.7 1.4L12 15l-1.8-4.6L5.5 9l4.7-1.4z" }),
+    (0, import_react3.createElement)("path", { d: "M18.5 15.5 19.3 18l2.2.8-2.2.7-.8 2.5-.8-2.5-2.2-.7 2.2-.8z" })
   ),
-  trash: (0, import_react2.createElement)(
+  trash: (0, import_react3.createElement)(
     "g",
     null,
-    (0, import_react2.createElement)("path", {
+    (0, import_react3.createElement)("path", {
       d: "M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6.5 7l.8 12a1 1 0 0 0 1 .9h7.4a1 1 0 0 0 1-.9l.8-12"
     }),
-    (0, import_react2.createElement)("path", { d: "M10 11v6M14 11v6" })
+    (0, import_react3.createElement)("path", { d: "M10 11v6M14 11v6" })
   ),
-  send: (0, import_react2.createElement)("path", { d: "m4 4 17 8-17 8 3.6-8z M7.6 12H21" })
+  send: (0, import_react3.createElement)("path", { d: "m4 4 17 8-17 8 3.6-8z M7.6 12H21" }),
+  folder: (0, import_react3.createElement)("path", {
+    d: "M3.5 6.5A1.5 1.5 0 0 1 5 5h4l2 2.5h8A1.5 1.5 0 0 1 20.5 9v8.5A1.5 1.5 0 0 1 19 19H5a1.5 1.5 0 0 1-1.5-1.5z"
+  }),
+  checklist: (0, import_react3.createElement)(
+    "g",
+    null,
+    (0, import_react3.createElement)("path", { d: "M4 6.5 5.5 8 8 5M4 12.5 5.5 14 8 11M4 18.5 5.5 20 8 17" }),
+    (0, import_react3.createElement)("path", { d: "M11 6.5h9M11 12.5h9M11 18.5h9" })
+  )
 };
 function Icon({ name, size = 16 }) {
-  return (0, import_react2.createElement)(
+  return (0, import_react3.createElement)(
     "svg",
     {
       width: size,
@@ -331,6 +525,114 @@ function Icon({ name, size = 16 }) {
   );
 }
 
+// src/client/markdown.tsx
+var import_react4 = require("react");
+var INLINE = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)|\*\*([^*]+)\*\*|__([^_]+)__|`([^`]+)`|~~([^~]+)~~|\*([^*]+)\*|_([^_]+)_/g;
+function inline(text, keyPrefix) {
+  const nodes = [];
+  let last = 0;
+  let index = 0;
+  INLINE.lastIndex = 0;
+  let match;
+  while ((match = INLINE.exec(text)) !== null) {
+    if (match.index > last) nodes.push(text.slice(last, match.index));
+    const key = `${keyPrefix}-${String(index++)}`;
+    if (match[1] !== void 0 && match[2] !== void 0) {
+      nodes.push((0, import_react4.createElement)("a", { key, href: match[2], target: "_blank", rel: "noreferrer noopener" }, match[1]));
+    } else if (match[3] !== void 0) {
+      nodes.push((0, import_react4.createElement)("strong", { key }, match[3]));
+    } else if (match[4] !== void 0) {
+      nodes.push((0, import_react4.createElement)("strong", { key }, match[4]));
+    } else if (match[5] !== void 0) {
+      nodes.push((0, import_react4.createElement)("code", { key }, match[5]));
+    } else if (match[6] !== void 0) {
+      nodes.push((0, import_react4.createElement)("del", { key }, match[6]));
+    } else if (match[7] !== void 0) {
+      nodes.push((0, import_react4.createElement)("em", { key }, match[7]));
+    } else if (match[8] !== void 0) {
+      nodes.push((0, import_react4.createElement)("em", { key }, match[8]));
+    }
+    last = INLINE.lastIndex;
+  }
+  if (last < text.length) nodes.push(text.slice(last));
+  return nodes;
+}
+function Markdown({ text }) {
+  const lines = text.replace(/\r\n/g, "\n").split("\n");
+  const blocks = [];
+  let index = 0;
+  let key = 0;
+  const isBlockStart = (line) => /^```/.test(line) || /^#{1,6}\s+/.test(line) || /^>\s?/.test(line) || /^([-*+]|\d+\.)\s+/.test(line) || /^(-{3,}|\*{3,}|_{3,})$/.test(line);
+  while (index < lines.length) {
+    const line = lines[index] ?? "";
+    const k = `b${String(key++)}`;
+    if (line.trim() === "") {
+      index += 1;
+      continue;
+    }
+    if (/^```/.test(line)) {
+      const code = [];
+      index += 1;
+      while (index < lines.length && !/^```/.test(lines[index] ?? "")) {
+        code.push(lines[index] ?? "");
+        index += 1;
+      }
+      index += 1;
+      blocks.push((0, import_react4.createElement)("pre", { key: k }, (0, import_react4.createElement)("code", null, code.join("\n"))));
+      continue;
+    }
+    if (/^(-{3,}|\*{3,}|_{3,})$/.test(line.trim())) {
+      blocks.push((0, import_react4.createElement)("hr", { key: k }));
+      index += 1;
+      continue;
+    }
+    const heading = /^(#{1,6})\s+(.*)$/.exec(line);
+    if (heading !== null) {
+      const level = Math.min(6, (heading[1] ?? "#").length);
+      blocks.push((0, import_react4.createElement)(`h${String(level)}`, { key: k }, inline(heading[2] ?? "", k)));
+      index += 1;
+      continue;
+    }
+    if (/^>\s?/.test(line)) {
+      const quote = [];
+      while (index < lines.length && /^>\s?/.test(lines[index] ?? "")) {
+        quote.push((lines[index] ?? "").replace(/^>\s?/, ""));
+        index += 1;
+      }
+      blocks.push((0, import_react4.createElement)("blockquote", { key: k }, (0, import_react4.createElement)("p", null, inline(quote.join(" "), k))));
+      continue;
+    }
+    if (/^([-*+]|\d+\.)\s+/.test(line)) {
+      const ordered = /^\d+\.\s+/.test(line);
+      const items = [];
+      while (index < lines.length && /^([-*+]|\d+\.)\s+/.test(lines[index] ?? "")) {
+        items.push((lines[index] ?? "").replace(/^([-*+]|\d+\.)\s+/, ""));
+        index += 1;
+      }
+      blocks.push(
+        (0, import_react4.createElement)(
+          ordered ? "ol" : "ul",
+          { key: k },
+          items.map(
+            (item, itemIndex) => (0, import_react4.createElement)("li", { key: `${k}-${String(itemIndex)}` }, inline(item, `${k}-${String(itemIndex)}`))
+          )
+        )
+      );
+      continue;
+    }
+    const paragraph = [];
+    while (index < lines.length) {
+      const current = lines[index] ?? "";
+      if (current.trim() === "" || paragraph.length > 0 && isBlockStart(current)) break;
+      paragraph.push(current);
+      index += 1;
+    }
+    blocks.push((0, import_react4.createElement)("p", { key: k }, inline(paragraph.join(" "), k)));
+  }
+  if (blocks.length === 0) return null;
+  return (0, import_react4.createElement)("div", { className: "mailharbor-markdown" }, blocks);
+}
+
 // src/client/ai-rail.tsx
 function errorText(error) {
   return error instanceof ApiError || error instanceof Error ? error.message : String(error);
@@ -386,17 +688,23 @@ function AiRail({
   onSaveDraft,
   onNotice
 }) {
-  const [status, setStatus] = (0, import_react3.useState)(null);
-  const [thread, setThread] = (0, import_react3.useState)(null);
-  const [loading, setLoading] = (0, import_react3.useState)(false);
-  const [generating, setGenerating] = (0, import_react3.useState)(null);
-  const [error, setError] = (0, import_react3.useState)("");
-  const [question, setQuestion] = (0, import_react3.useState)("");
-  const [confirmClear, setConfirmClear] = (0, import_react3.useState)(false);
-  const list = (0, import_react3.useRef)(null);
-  const lastNonce = (0, import_react3.useRef)(0);
+  const [status, setStatus] = (0, import_react5.useState)(null);
+  const [thread, setThread] = (0, import_react5.useState)(null);
+  const [loading, setLoading] = (0, import_react5.useState)(false);
+  const [generating, setGenerating] = (0, import_react5.useState)(null);
+  const [error, setError] = (0, import_react5.useState)("");
+  const [question, setQuestion] = (0, import_react5.useState)("");
+  const [confirmClear, setConfirmClear] = (0, import_react5.useState)(false);
+  const [project, setProject] = (0, import_react5.useState)(null);
+  const [projectOpen, setProjectOpen] = (0, import_react5.useState)(false);
+  const [projectName, setProjectName] = (0, import_react5.useState)("");
+  const [projectRoot, setProjectRoot] = (0, import_react5.useState)("");
+  const [projectBusy, setProjectBusy] = (0, import_react5.useState)(false);
+  const [projectWarnings, setProjectWarnings] = (0, import_react5.useState)([]);
+  const list = (0, import_react5.useRef)(null);
+  const lastNonce = (0, import_react5.useRef)(0);
   const key = detail === null ? "" : threadKey(detail, source);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (account === null) return;
     let cancelled = false;
     api.aiStatus(account.id).then((next) => {
@@ -409,7 +717,7 @@ function AiRail({
       cancelled = true;
     };
   }, [account]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (account === null || key === "") {
       setThread(null);
       return;
@@ -427,7 +735,7 @@ function AiRail({
       cancelled = true;
     };
   }, [account, key]);
-  const generate = (0, import_react3.useCallback)(
+  const generate = (0, import_react5.useCallback)(
     async (kind, extra = {}) => {
       if (detail === null || account === null) return;
       setGenerating(kind);
@@ -451,15 +759,85 @@ function AiRail({
     },
     [detail, account, key, source, mailbox]
   );
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (request2 === null || request2.nonce === lastNonce.current) return;
     lastNonce.current = request2.nonce;
     if (detail !== null) void generate(request2.kind);
   }, [request2]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const element = list.current;
     if (element !== null) element.scrollTop = element.scrollHeight;
   }, [thread, generating]);
+  (0, import_react5.useEffect)(() => {
+    if (detail === null || account === null) {
+      setProject(null);
+      return;
+    }
+    let cancelled = false;
+    api.projectFor(detail.accountId, key).then((result) => {
+      if (!cancelled) setProject(result.project);
+    }).catch(() => {
+      if (!cancelled) setProject(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [detail, account, key, thread]);
+  const openProject = async () => {
+    setProjectOpen(true);
+    setProjectWarnings([]);
+    try {
+      const settings = await api.settings();
+      setProjectRoot(settings.projects.root);
+      setProjectName(detail?.subject.replace(/^(re|fwd):\s*/i, "").slice(0, 80) ?? "");
+    } catch {
+    }
+  };
+  const conversation = () => (thread?.cards ?? []).map(
+    (card) => `### ${KIND_LABEL[card.kind] ?? "AI"} \xB7 ${new Date(card.createdAt).toLocaleString()}
+
+${card.output}`
+  ).join("\n\n");
+  const transfer = async () => {
+    if (project === null || detail === null || account === null) return;
+    setProjectBusy(true);
+    setProjectWarnings([]);
+    try {
+      await api.transferProject(project.id, {
+        accountId: account.id,
+        key,
+        conversation: conversation() === "" ? "\uFF08\u6682\u65E0\u65B0\u7684 AI \u8BB0\u5F55\uFF09" : conversation()
+      });
+      onNotice("\u5DF2\u8FFD\u52A0\u5230\u9879\u76EE\u5BF9\u8BDD");
+      setProjectOpen(false);
+    } catch (caught) {
+      setProjectWarnings([errorText(caught)]);
+    } finally {
+      setProjectBusy(false);
+    }
+  };
+  const create = async () => {
+    if (detail === null || account === null) return;
+    setProjectBusy(true);
+    setProjectWarnings([]);
+    try {
+      const result = await api.createProject({
+        accountId: account.id,
+        name: projectName.trim() === "" ? detail.subject : projectName.trim(),
+        root: projectRoot,
+        conversation: conversation() === "" ? "\uFF08\u8FD8\u6CA1\u6709 AI \u8BB0\u5F55\uFF09" : conversation(),
+        message: { key, subject: detail.subject, date: detail.date }
+      });
+      setProject(result.project);
+      setProjectWarnings(result.warnings);
+      onNotice(`\u9879\u76EE\u5DF2\u521B\u5EFA\uFF1A${result.project.path}`);
+      if (result.warnings.length === 0) setProjectOpen(false);
+    } catch (caught) {
+      setProjectWarnings([errorText(caught)]);
+    } finally {
+      setProjectBusy(false);
+    }
+  };
   const replyInit = (card) => {
     const subject = card.meta?.subject ?? (detail === null ? "" : /^re:/i.test(detail.subject) ? detail.subject : `Re: ${detail.subject}`);
     return {
@@ -502,54 +880,58 @@ function AiRail({
   };
   const disabled = status !== null && (!status.available || !status.enabled);
   const cards = thread?.cards ?? [];
-  return (0, import_react3.createElement)(
+  return (0, import_react5.createElement)(
     "aside",
     { className: "mailharbor-ai", "aria-label": "AI \u52A9\u624B" },
-    (0, import_react3.createElement)(
+    (0, import_react5.createElement)(
       "div",
       { className: "mailharbor-ai-head" },
-      (0, import_react3.createElement)(Icon, { name: "sparkles", size: 15 }),
-      (0, import_react3.createElement)("strong", null, "AI \u52A9\u624B"),
-      status === null || status.model === "" ? null : (0, import_react3.createElement)("span", { className: "badge" }, status.model),
-      (0, import_react3.createElement)("span", { className: "spacer" }),
-      confirmClear ? (0, import_react3.createElement)(
+      (0, import_react5.createElement)(Icon, { name: "sparkles", size: 15 }),
+      (0, import_react5.createElement)("strong", null, "AI \u52A9\u624B"),
+      status === null || status.model === "" ? null : (0, import_react5.createElement)("span", { className: "badge" }, status.model),
+      (0, import_react5.createElement)("span", { className: "spacer" }),
+      confirmClear ? (0, import_react5.createElement)(
         "span",
         { className: "mailharbor-ai-confirm" },
-        (0, import_react3.createElement)("button", { className: "subtle", onClick: () => void clear() }, "\u786E\u8BA4\u6E05\u9664"),
-        (0, import_react3.createElement)("button", { className: "subtle", onClick: () => setConfirmClear(false) }, "\u53D6\u6D88")
-      ) : (0, import_react3.createElement)(
+        (0, import_react5.createElement)("button", { className: "subtle", onClick: () => void clear() }, "\u786E\u8BA4\u6E05\u9664"),
+        (0, import_react5.createElement)("button", { className: "subtle", onClick: () => setConfirmClear(false) }, "\u53D6\u6D88")
+      ) : (0, import_react5.createElement)(
         "button",
         {
           className: "subtle icon",
           title: cards.length === 0 ? "\u5173\u95ED" : "\u6E05\u9664\u8FD9\u5C01\u90AE\u4EF6\u7684\u8BB0\u5F55",
           onClick: () => cards.length === 0 ? onClose() : setConfirmClear(true)
         },
-        (0, import_react3.createElement)(Icon, { name: cards.length === 0 ? "close" : "trash", size: 14 })
+        (0, import_react5.createElement)(Icon, { name: cards.length === 0 ? "close" : "trash", size: 14 })
       ),
-      (0, import_react3.createElement)(
+      (0, import_react5.createElement)(
         "button",
         { className: "subtle icon", title: "\u6536\u8D77", onClick: onClose },
-        (0, import_react3.createElement)(Icon, { name: "chevronRight", size: 14 })
+        (0, import_react5.createElement)(Icon, { name: "chevronRight", size: 14 })
       )
     ),
-    detail === null ? (0, import_react3.createElement)(
+    detail === null ? (0, import_react5.createElement)(
       "div",
       { className: "mailharbor-ai-empty" },
-      (0, import_react3.createElement)(Icon, { name: "sparkles", size: 26 }),
-      (0, import_react3.createElement)("div", { className: "title" }, "\u5148\u9009\u4E00\u5C01\u90AE\u4EF6"),
-      (0, import_react3.createElement)("div", { className: "small" }, "\u9009\u4E2D\u90AE\u4EF6\u540E\uFF0C\u53EF\u5728\u8FD9\u91CC\u751F\u6210\u6458\u8981\u3001\u56DE\u590D\u548C\u7FFB\u8BD1\uFF0C\u8BB0\u5F55\u4F1A\u4E00\u76F4\u4FDD\u7559\u3002")
-    ) : (0, import_react3.createElement)(
+      (0, import_react5.createElement)(Icon, { name: "sparkles", size: 26 }),
+      (0, import_react5.createElement)("div", { className: "title" }, "\u5148\u9009\u4E00\u5C01\u90AE\u4EF6"),
+      (0, import_react5.createElement)("div", { className: "small" }, "\u9009\u4E2D\u90AE\u4EF6\u540E\uFF0C\u53EF\u5728\u8FD9\u91CC\u751F\u6210\u6458\u8981\u3001\u56DE\u590D\u548C\u7FFB\u8BD1\uFF0C\u8BB0\u5F55\u4F1A\u4E00\u76F4\u4FDD\u7559\u3002")
+    ) : (0, import_react5.createElement)(
       "div",
       { className: "mailharbor-ai-context" },
-      (0, import_react3.createElement)("span", { className: "small" }, "\u8DDF\u968F\u5F53\u524D\u90AE\u4EF6"),
-      (0, import_react3.createElement)("strong", null, detail.subject),
-      (0, import_react3.createElement)("span", { className: "small muted" }, "AI \u53EA\u770B\u5230\u8FD9\u5C01\u90AE\u4EF6")
+      (0, import_react5.createElement)("span", { className: "small" }, "\u8DDF\u968F\u5F53\u524D\u90AE\u4EF6"),
+      (0, import_react5.createElement)("strong", null, detail.subject),
+      (0, import_react5.createElement)(
+        "span",
+        { className: "small muted" },
+        project === null ? "AI \u53EA\u770B\u5230\u8FD9\u5C01\u90AE\u4EF6" : `\u9879\u76EE\uFF1A${project.name}`
+      )
     ),
-    disabled && detail !== null ? (0, import_react3.createElement)("div", { className: "mailharbor-ai-warn" }, status?.error ?? "AI \u5DF2\u5173\u95ED\uFF0C\u8BF7\u5230\u8BBE\u7F6E\u91CC\u5F00\u542F") : null,
-    detail === null ? null : (0, import_react3.createElement)(
+    disabled && detail !== null ? (0, import_react5.createElement)("div", { className: "mailharbor-ai-warn" }, status?.error ?? "AI \u5DF2\u5173\u95ED\uFF0C\u8BF7\u5230\u8BBE\u7F6E\u91CC\u5F00\u542F") : null,
+    detail === null ? null : (0, import_react5.createElement)(
       "div",
       { className: "mailharbor-ai-quick" },
-      (0, import_react3.createElement)(
+      (0, import_react5.createElement)(
         "button",
         {
           className: "ghost",
@@ -558,7 +940,7 @@ function AiRail({
         },
         generating === "summary" ? "\u603B\u7ED3\u4E2D\u2026" : "\u6458\u8981"
       ),
-      (0, import_react3.createElement)(
+      (0, import_react5.createElement)(
         "button",
         {
           className: "ghost",
@@ -567,7 +949,7 @@ function AiRail({
         },
         generating === "reply" ? "\u8D77\u8349\u4E2D\u2026" : "\u56DE\u590D"
       ),
-      (0, import_react3.createElement)(
+      (0, import_react5.createElement)(
         "button",
         {
           className: "ghost",
@@ -575,58 +957,64 @@ function AiRail({
           onClick: () => void generate("translate", { target: "en" })
         },
         generating === "translate" ? "\u7FFB\u8BD1\u4E2D\u2026" : "\u7FFB\u8BD1"
+      ),
+      (0, import_react5.createElement)(
+        "button",
+        { className: "ghost", onClick: () => void openProject() },
+        (0, import_react5.createElement)(Icon, { name: "folder", size: 13 }),
+        "\u9879\u76EE"
       )
     ),
-    (0, import_react3.createElement)(
+    (0, import_react5.createElement)(
       "div",
       { className: "mailharbor-ai-list", ref: list },
-      loading ? (0, import_react3.createElement)("div", { className: "mailharbor-ai-empty small" }, "\u6B63\u5728\u8BFB\u53D6\u8BB0\u5F55\u2026") : null,
-      !loading && detail !== null && cards.length === 0 && generating === null ? (0, import_react3.createElement)(
+      loading ? (0, import_react5.createElement)("div", { className: "mailharbor-ai-empty small" }, "\u6B63\u5728\u8BFB\u53D6\u8BB0\u5F55\u2026") : null,
+      !loading && detail !== null && cards.length === 0 && generating === null ? (0, import_react5.createElement)(
         "div",
         { className: "mailharbor-ai-empty" },
-        (0, import_react3.createElement)("div", { className: "title" }, "\u8FD9\u5C01\u90AE\u4EF6\u8FD8\u6CA1\u6709 AI \u8BB0\u5F55"),
-        (0, import_react3.createElement)(
+        (0, import_react5.createElement)("div", { className: "title" }, "\u8FD9\u5C01\u90AE\u4EF6\u8FD8\u6CA1\u6709 AI \u8BB0\u5F55"),
+        (0, import_react5.createElement)(
           "div",
           { className: "small" },
           "\u70B9\u4E0A\u9762\u7684\u300C\u6458\u8981\u300D\u5F00\u59CB\uFF1B\u751F\u6210\u7684\u5185\u5BB9\u4F1A\u4FDD\u5B58\u5728\u8FD9\u91CC\uFF0C\u5173\u6389\u9762\u677F\u4E5F\u4E0D\u4F1A\u4E22\u3002"
         )
       ) : null,
       cards.map(
-        (card) => (0, import_react3.createElement)(
+        (card) => (0, import_react5.createElement)(
           "article",
           { className: "mailharbor-ai-card", key: card.id },
-          (0, import_react3.createElement)(
+          (0, import_react5.createElement)(
             "div",
             { className: "mailharbor-ai-card-head" },
-            (0, import_react3.createElement)("span", null, KIND_LABEL[card.kind] ?? "AI"),
-            (0, import_react3.createElement)("span", { className: "muted small" }, new Date(card.createdAt).toLocaleTimeString()),
-            (0, import_react3.createElement)("span", { className: "spacer" }),
-            (0, import_react3.createElement)(
+            (0, import_react5.createElement)("span", null, KIND_LABEL[card.kind] ?? "AI"),
+            (0, import_react5.createElement)("span", { className: "muted small" }, new Date(card.createdAt).toLocaleTimeString()),
+            (0, import_react5.createElement)("span", { className: "spacer" }),
+            (0, import_react5.createElement)(
               "button",
               {
                 className: "subtle icon",
                 title: "\u5220\u9664",
                 onClick: () => void remove(card)
               },
-              (0, import_react3.createElement)(Icon, { name: "close", size: 12 })
+              (0, import_react5.createElement)(Icon, { name: "close", size: 12 })
             )
           ),
-          card.kind === "summary" ? (0, import_react3.createElement)(
+          card.kind === "summary" ? (0, import_react5.createElement)(
             "div",
             { className: "mailharbor-ai-summary" },
             summaryBlocks(card.output).map(
-              (block, index) => (0, import_react3.createElement)(
+              (block, index) => (0, import_react5.createElement)(
                 "section",
                 { key: `${block.title}:${String(index)}` },
-                block.title === "" ? null : (0, import_react3.createElement)("h4", null, block.title),
-                (0, import_react3.createElement)("p", null, block.body)
+                block.title === "" ? null : (0, import_react5.createElement)("h4", null, block.title),
+                (0, import_react5.createElement)(Markdown, { text: block.body })
               )
             )
-          ) : (0, import_react3.createElement)("div", { className: "mailharbor-ai-text" }, card.output),
-          (0, import_react3.createElement)(
+          ) : (0, import_react5.createElement)("div", { className: "mailharbor-ai-text" }, (0, import_react5.createElement)(Markdown, { text: card.output })),
+          (0, import_react5.createElement)(
             "div",
             { className: "mailharbor-ai-card-actions" },
-            card.kind === "summary" ? (0, import_react3.createElement)(
+            card.kind === "summary" ? (0, import_react5.createElement)(
               "button",
               {
                 className: "ghost",
@@ -635,13 +1023,13 @@ function AiRail({
               },
               "\u7528\u8FD9\u4E9B\u8981\u70B9\u56DE\u590D"
             ) : null,
-            card.kind === "reply" || card.kind === "translate" ? (0, import_react3.createElement)(
+            card.kind === "reply" || card.kind === "translate" ? (0, import_react5.createElement)(
               "button",
               { className: "ghost", onClick: () => onInsert(replyInit(card)) },
               card.kind === "translate" ? "\u63D2\u5165\u56DE\u590D" : "\u63D2\u5165\u6B63\u6587"
             ) : null,
-            card.kind === "reply" ? (0, import_react3.createElement)("button", { className: "ghost", onClick: () => onSaveDraft(replyInit(card)) }, "\u5B58\u8349\u7A3F") : null,
-            card.kind === "answer" ? (0, import_react3.createElement)(
+            card.kind === "reply" ? (0, import_react5.createElement)("button", { className: "ghost", onClick: () => onSaveDraft(replyInit(card)) }, "\u5B58\u8349\u7A3F") : null,
+            card.kind === "answer" ? (0, import_react5.createElement)(
               "button",
               {
                 className: "ghost",
@@ -649,196 +1037,125 @@ function AiRail({
               },
               "\u7EE7\u7EED\u8FFD\u95EE"
             ) : null,
-            (0, import_react3.createElement)("span", { className: "spacer" }),
-            (0, import_react3.createElement)("button", { className: "subtle", onClick: () => copy(card) }, "\u590D\u5236")
+            (0, import_react5.createElement)("span", { className: "spacer" }),
+            (0, import_react5.createElement)("button", { className: "subtle", onClick: () => copy(card) }, "\u590D\u5236")
           )
         )
       ),
-      generating !== null ? (0, import_react3.createElement)(
+      generating !== null ? (0, import_react5.createElement)(
         "article",
         { className: "mailharbor-ai-card generating" },
-        (0, import_react3.createElement)("div", { className: "mailharbor-ai-card-head" }, (0, import_react3.createElement)("span", null, KIND_LABEL[generating])),
-        (0, import_react3.createElement)("div", { className: "mailharbor-ai-text muted" }, "\u6B63\u5728\u751F\u6210\u2026")
+        (0, import_react5.createElement)("div", { className: "mailharbor-ai-card-head" }, (0, import_react5.createElement)("span", null, KIND_LABEL[generating])),
+        (0, import_react5.createElement)("div", { className: "mailharbor-ai-text muted" }, "\u6B63\u5728\u751F\u6210\u2026")
       ) : null,
-      error === "" ? null : (0, import_react3.createElement)("div", { className: "mailharbor-ai-error" }, error)
+      error === "" ? null : (0, import_react5.createElement)("div", { className: "mailharbor-ai-error" }, error)
     ),
-    detail === null ? null : (0, import_react3.createElement)(
-      "form",
+    projectOpen ? (0, import_react5.createElement)(
+      Modal,
       {
-        className: "mailharbor-ai-ask",
-        onSubmit: (event) => {
-          event.preventDefault();
-          void ask();
-        }
+        title: project === null ? "\u8F6C\u5230\u9879\u76EE" : `\u9879\u76EE\uFF1A${project.name}`,
+        onClose: () => setProjectOpen(false),
+        footer: (0, import_react5.createElement)(
+          "div",
+          { style: { display: "flex", gap: "8px", width: "100%", alignItems: "center" } },
+          projectWarnings.length === 0 ? (0, import_react5.createElement)(
+            "span",
+            { className: "small muted" },
+            project === null ? "\u628A\u5F53\u524D AI \u8BB0\u5F55\u5E26\u8FDB\u4E00\u4E2A\u65B0\u5DE5\u4F5C\u7A7A\u95F4" : "\u628A\u5F53\u524D AI \u8BB0\u5F55\u8FFD\u52A0\u5230\u9879\u76EE\u5BF9\u8BDD"
+          ) : (0, import_react5.createElement)(
+            "span",
+            { className: "small", style: { color: "var(--m-warn)" } },
+            projectWarnings.join("\uFF1B")
+          ),
+          (0, import_react5.createElement)("span", { className: "spacer" }),
+          (0, import_react5.createElement)("button", { className: "ghost", onClick: () => setProjectOpen(false) }, "\u5173\u95ED"),
+          project === null ? (0, import_react5.createElement)(
+            "button",
+            { className: "primary", disabled: projectBusy, onClick: () => void create() },
+            projectBusy ? "\u521B\u5EFA\u4E2D\u2026" : "\u521B\u5EFA\u9879\u76EE"
+          ) : (0, import_react5.createElement)(
+            "button",
+            { className: "primary", disabled: projectBusy, onClick: () => void transfer() },
+            projectBusy ? "\u8FFD\u52A0\u4E2D\u2026" : "\u8FFD\u52A0\u5F53\u524D\u8BB0\u5F55"
+          )
+        )
       },
-      (0, import_react3.createElement)("input", {
-        value: question,
-        placeholder: "\u95EE\u8FD9\u5C01\u90AE\u4EF6\uFF0C\u4F8B\u5982\uFF1A\u8C01\u9700\u8981\u5728\u4EC0\u4E48\u65F6\u5019\u505A\u4EC0\u4E48\uFF1F",
-        "aria-label": "\u95EE AI",
-        disabled: disabled || generating !== null,
-        onChange: (event) => setQuestion(event.target.value)
-      }),
-      (0, import_react3.createElement)(
-        "button",
-        {
-          className: "primary icon",
-          type: "submit",
-          disabled: disabled || generating !== null || question.trim() === ""
-        },
-        (0, import_react3.createElement)(Icon, { name: "send", size: 14 })
+      project === null ? (0, import_react5.createElement)(
+        "div",
+        { style: { display: "flex", flexDirection: "column", gap: "10px" } },
+        (0, import_react5.createElement)(
+          "div",
+          { className: "mailharbor-field" },
+          (0, import_react5.createElement)("label", null, "\u9879\u76EE\u540D\u79F0"),
+          (0, import_react5.createElement)("input", {
+            value: projectName,
+            onChange: (event) => setProjectName(event.target.value)
+          })
+        ),
+        (0, import_react5.createElement)(
+          "div",
+          { className: "mailharbor-field" },
+          (0, import_react5.createElement)("label", null, "\u9879\u76EE\u76EE\u5F55\uFF08\u9ED8\u8BA4\u53EF\u5728\u8BBE\u7F6E\u91CC\u6539\uFF09"),
+          (0, import_react5.createElement)("input", {
+            value: projectRoot,
+            onChange: (event) => setProjectRoot(event.target.value)
+          })
+        ),
+        (0, import_react5.createElement)(
+          "p",
+          { className: "small muted" },
+          `\u4F1A\u521B\u5EFA\u300C${projectName.trim() === "" ? "\u9879\u76EE" : projectName.trim()}\u300D\u6587\u4EF6\u5939\uFF0C\u5199\u5165 BRIEF.md \u548C\u5F53\u524D ${String(thread?.cards.length ?? 0)} \u6761 AI \u8BB0\u5F55\uFF0C\u5E76\u5728\u4FA7\u680F\u6CE8\u518C\u5DE5\u4F5C\u7A7A\u95F4\u3001\u5F00\u4E00\u4E2A\u4F1A\u8BDD\u3002`
+        )
+      ) : (0, import_react5.createElement)(
+        "div",
+        { style: { display: "flex", flexDirection: "column", gap: "8px" } },
+        (0, import_react5.createElement)(
+          "dl",
+          { className: "mailharbor-kv" },
+          (0, import_react5.createElement)("dt", null, "\u76EE\u5F55"),
+          (0, import_react5.createElement)("dd", null, project.path),
+          (0, import_react5.createElement)("dt", null, "AI \u8BB0\u5F55"),
+          (0, import_react5.createElement)("dd", null, `${String(thread?.cards.length ?? 0)} \u6761`)
+        ),
+        project.sessionId === "" ? (0, import_react5.createElement)("p", { className: "small muted" }, "\u4F1A\u8BDD\u672A\u521B\u5EFA\uFF1A\u5F53\u524D\u7EC4\u5408\u6CA1\u6709 sessions \u670D\u52A1\u3002") : null,
+        (0, import_react5.createElement)(
+          "p",
+          { className: "small muted" },
+          "\u300C\u8FFD\u52A0\u5F53\u524D\u8BB0\u5F55\u300D\u4F1A\u628A\u5DE5\u4F5C\u53F0\u91CC\u7684\u5361\u7247\u5199\u5165\u9879\u76EE\u7684 CONVERSATION.md\u3002"
+        )
       )
-    )
-  );
-}
-
-// src/client/account-form.tsx
-var import_react5 = require("react");
-
-// src/client/components.tsx
-var import_react4 = require("react");
-var import_react_dom = require("react-dom");
-function Avatar({ email, size = 26 }) {
-  const letter = (email.trim()[0] ?? "?").toUpperCase();
-  return (0, import_react4.createElement)(
-    "span",
-    {
-      className: "avatar",
-      style: {
-        width: `${String(size)}px`,
-        height: `${String(size)}px`,
-        fontSize: `${String(Math.round(size * 0.42))}px`
-      },
-      "aria-hidden": "true"
-    },
-    letter
-  );
-}
-function Field({
-  label,
-  children,
-  hint
-}) {
-  return (0, import_react4.createElement)(
-    "div",
-    { className: "mailharbor-field" },
-    (0, import_react4.createElement)("label", null, label),
-    children,
-    hint === void 0 ? null : (0, import_react4.createElement)("span", { className: "small muted" }, hint)
-  );
-}
-function Toggle({
-  checked,
-  onChange,
-  label
-}) {
-  return (0, import_react4.createElement)(
-    "label",
-    { className: "mailharbor-toggle" },
-    (0, import_react4.createElement)("input", {
-      type: "checkbox",
-      checked,
-      onChange: (event) => {
-        onChange(event.target.checked);
-      }
-    }),
-    label
-  );
-}
-function portalRoot() {
-  const existing = document.getElementById("mailharbor-portal");
-  if (existing !== null) return existing;
-  const element = document.createElement("div");
-  element.id = "mailharbor-portal";
-  element.className = "mailharbor mailharbor-portal";
-  document.body.append(element);
-  return element;
-}
-function Modal({
-  title,
-  children,
-  footer,
-  onClose,
-  wide = false
-}) {
-  (0, import_react4.useEffect)(() => {
-    const onKey = (event) => {
-      if (event.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => {
-      window.removeEventListener("keydown", onKey);
-    };
-  }, [onClose]);
-  return (0, import_react_dom.createPortal)(
-    (0, import_react4.createElement)(
-      "div",
+    ) : null,
+    detail === null ? null : (0, import_react5.createElement)(
+      "form",
       {
-        className: "mailharbor-modal-mask",
-        onMouseDown: (event) => {
-          if (event.target === event.currentTarget) onClose();
+        className: "mailharbor-ai-ask",
+        onSubmit: (event) => {
+          event.preventDefault();
+          void ask();
         }
       },
-      (0, import_react4.createElement)(
-        "div",
+      (0, import_react5.createElement)("input", {
+        value: question,
+        placeholder: "\u95EE\u8FD9\u5C01\u90AE\u4EF6\uFF0C\u4F8B\u5982\uFF1A\u8C01\u9700\u8981\u5728\u4EC0\u4E48\u65F6\u5019\u505A\u4EC0\u4E48\uFF1F",
+        "aria-label": "\u95EE AI",
+        disabled: disabled || generating !== null,
+        onChange: (event) => setQuestion(event.target.value)
+      }),
+      (0, import_react5.createElement)(
+        "button",
         {
-          className: "mailharbor-modal",
-          style: wide ? { width: "min(920px, 100%)" } : void 0,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": title
+          className: "primary icon",
+          type: "submit",
+          disabled: disabled || generating !== null || question.trim() === ""
         },
-        (0, import_react4.createElement)(
-          "header",
-          null,
-          title,
-          (0, import_react4.createElement)("span", { className: "spacer" }),
-          (0, import_react4.createElement)("button", { className: "subtle", onClick: onClose, "aria-label": "\u5173\u95ED" }, "\u2715")
-        ),
-        (0, import_react4.createElement)("div", { className: "content" }, children),
-        footer === void 0 ? null : (0, import_react4.createElement)("footer", null, footer)
+        (0, import_react5.createElement)(Icon, { name: "send", size: 14 })
       )
-    ),
-    portalRoot()
-  );
-}
-function ErrorBar({ message, onDismiss }) {
-  return (0, import_react4.createElement)(
-    "div",
-    { className: "error", role: "alert" },
-    (0, import_react4.createElement)("span", null, message),
-    (0, import_react4.createElement)("span", { className: "spacer" }),
-    (0, import_react4.createElement)("button", { className: "subtle", onClick: onDismiss }, "\u5173\u95ED")
+    )
   );
 }
-function shortDate(iso) {
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) return iso.slice(0, 16);
-  const now = /* @__PURE__ */ new Date();
-  const sameDay = date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate();
-  const pad = (value) => String(value).padStart(2, "0");
-  if (sameDay) return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
-  if (date.getFullYear() === now.getFullYear()) return `${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-  return `${String(date.getFullYear())}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-}
-function longDate(iso) {
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) return iso;
-  return date.toLocaleString(void 0, {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit"
-  });
-}
-function formatBytes(size) {
-  if (!Number.isFinite(size) || size <= 0) return "";
-  if (size < 1024) return `${String(size)} B`;
-  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
-  return `${(size / 1024 / 1024).toFixed(1)} MB`;
-}
 
 // src/client/account-form.tsx
+var import_react6 = require("react");
 function domainOf(email) {
   return email.split("@")[1] ?? "example.com";
 }
@@ -849,20 +1166,20 @@ function AddAccountForm({
   onDone,
   onCancel
 }) {
-  const [email, setEmail] = (0, import_react5.useState)("");
-  const [password, setPassword] = (0, import_react5.useState)("");
-  const [label, setLabel] = (0, import_react5.useState)("");
-  const [remember, setRemember] = (0, import_react5.useState)(true);
-  const [advanced, setAdvanced] = (0, import_react5.useState)(false);
-  const [imapHost, setImapHost] = (0, import_react5.useState)("");
-  const [imapPort, setImapPort] = (0, import_react5.useState)("993");
-  const [imapSecure, setImapSecure] = (0, import_react5.useState)(true);
-  const [smtpHost, setSmtpHost] = (0, import_react5.useState)("");
-  const [smtpPort, setSmtpPort] = (0, import_react5.useState)("465");
-  const [smtpSecure, setSmtpSecure] = (0, import_react5.useState)(true);
-  const [fromName, setFromName] = (0, import_react5.useState)("");
-  const [busy, setBusy] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)("");
+  const [email, setEmail] = (0, import_react6.useState)("");
+  const [password, setPassword] = (0, import_react6.useState)("");
+  const [label, setLabel] = (0, import_react6.useState)("");
+  const [remember, setRemember] = (0, import_react6.useState)(true);
+  const [advanced, setAdvanced] = (0, import_react6.useState)(false);
+  const [imapHost, setImapHost] = (0, import_react6.useState)("");
+  const [imapPort, setImapPort] = (0, import_react6.useState)("993");
+  const [imapSecure, setImapSecure] = (0, import_react6.useState)(true);
+  const [smtpHost, setSmtpHost] = (0, import_react6.useState)("");
+  const [smtpPort, setSmtpPort] = (0, import_react6.useState)("465");
+  const [smtpSecure, setSmtpSecure] = (0, import_react6.useState)(true);
+  const [fromName, setFromName] = (0, import_react6.useState)("");
+  const [busy, setBusy] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)("");
   const submit = async () => {
     setBusy(true);
     setError("");
@@ -894,17 +1211,17 @@ function AddAccountForm({
       setBusy(false);
     }
   };
-  return (0, import_react5.createElement)(
+  return (0, import_react6.createElement)(
     "div",
     { className: "mailharbor-card" },
-    (0, import_react5.createElement)("h3", null, "\u6DFB\u52A0\u90AE\u7BB1\u8D26\u53F7"),
-    (0, import_react5.createElement)(
+    (0, import_react6.createElement)("h3", null, "\u6DFB\u52A0\u90AE\u7BB1\u8D26\u53F7"),
+    (0, import_react6.createElement)(
       "div",
       { className: "mailharbor-grid" },
-      (0, import_react5.createElement)(
+      (0, import_react6.createElement)(
         Field,
         { label: "\u90AE\u7BB1\u5730\u5740" },
-        (0, import_react5.createElement)("input", {
+        (0, import_react6.createElement)("input", {
           type: "email",
           value: email,
           placeholder: "you@example.com",
@@ -912,95 +1229,95 @@ function AddAccountForm({
           autoFocus: true
         })
       ),
-      (0, import_react5.createElement)(
+      (0, import_react6.createElement)(
         Field,
         { label: "\u5BC6\u7801 / \u5E94\u7528\u4E13\u7528\u5BC6\u7801" },
-        (0, import_react5.createElement)("input", {
+        (0, import_react6.createElement)("input", {
           type: "password",
           value: password,
           onChange: (event) => setPassword(event.target.value)
         })
       )
     ),
-    (0, import_react5.createElement)(
+    (0, import_react6.createElement)(
       Field,
       { label: "\u663E\u793A\u540D\u79F0\uFF08\u53EF\u9009\uFF09" },
-      (0, import_react5.createElement)("input", {
+      (0, import_react6.createElement)("input", {
         value: label,
         placeholder: "\u5DE5\u4F5C\u90AE\u7BB1",
         onChange: (event) => setLabel(event.target.value)
       })
     ),
-    (0, import_react5.createElement)(Toggle, { checked: remember, onChange: setRemember, label: "\u8BB0\u4F4F\u5BC6\u7801\uFF08\u5199\u5165\u7CFB\u7EDF\u94A5\u5319\u4E32\uFF09" }),
-    (0, import_react5.createElement)(
+    (0, import_react6.createElement)(Toggle, { checked: remember, onChange: setRemember, label: "\u8BB0\u4F4F\u5BC6\u7801\uFF08\u5199\u5165\u7CFB\u7EDF\u94A5\u5319\u4E32\uFF09" }),
+    (0, import_react6.createElement)(
       "button",
       { className: "ghost", onClick: () => setAdvanced(!advanced) },
       advanced ? "\u9690\u85CF\u9AD8\u7EA7\u8BBE\u7F6E" : "\u9AD8\u7EA7\u8BBE\u7F6E\uFF08\u670D\u52A1\u5668\u4E0E\u7AEF\u53E3\uFF09"
     ),
-    advanced ? (0, import_react5.createElement)(
+    advanced ? (0, import_react6.createElement)(
       "div",
       { style: { display: "flex", flexDirection: "column", gap: "10px" } },
-      (0, import_react5.createElement)(
+      (0, import_react6.createElement)(
         "div",
         { className: "mailharbor-grid three" },
-        (0, import_react5.createElement)(
+        (0, import_react6.createElement)(
           Field,
           { label: "IMAP \u4E3B\u673A" },
-          (0, import_react5.createElement)("input", {
+          (0, import_react6.createElement)("input", {
             value: imapHost,
             placeholder: `imap.${domainOf(email)}`,
             onChange: (event) => setImapHost(event.target.value)
           })
         ),
-        (0, import_react5.createElement)(
+        (0, import_react6.createElement)(
           Field,
           { label: "\u7AEF\u53E3" },
-          (0, import_react5.createElement)("input", {
+          (0, import_react6.createElement)("input", {
             value: imapPort,
             inputMode: "numeric",
             onChange: (event) => setImapPort(event.target.value)
           })
         ),
-        (0, import_react5.createElement)(Toggle, { checked: imapSecure, onChange: setImapSecure, label: "TLS" })
+        (0, import_react6.createElement)(Toggle, { checked: imapSecure, onChange: setImapSecure, label: "TLS" })
       ),
-      (0, import_react5.createElement)(
+      (0, import_react6.createElement)(
         "div",
         { className: "mailharbor-grid three" },
-        (0, import_react5.createElement)(
+        (0, import_react6.createElement)(
           Field,
           { label: "SMTP \u4E3B\u673A" },
-          (0, import_react5.createElement)("input", {
+          (0, import_react6.createElement)("input", {
             value: smtpHost,
             placeholder: `smtp.${domainOf(email)}`,
             onChange: (event) => setSmtpHost(event.target.value)
           })
         ),
-        (0, import_react5.createElement)(
+        (0, import_react6.createElement)(
           Field,
           { label: "\u7AEF\u53E3" },
-          (0, import_react5.createElement)("input", {
+          (0, import_react6.createElement)("input", {
             value: smtpPort,
             inputMode: "numeric",
             onChange: (event) => setSmtpPort(event.target.value)
           })
         ),
-        (0, import_react5.createElement)(Toggle, { checked: smtpSecure, onChange: setSmtpSecure, label: "TLS" })
+        (0, import_react6.createElement)(Toggle, { checked: smtpSecure, onChange: setSmtpSecure, label: "TLS" })
       ),
-      (0, import_react5.createElement)(
+      (0, import_react6.createElement)(
         Field,
         { label: "\u53D1\u4EF6\u4EBA\u540D\u79F0\uFF08\u53EF\u9009\uFF09" },
-        (0, import_react5.createElement)("input", {
+        (0, import_react6.createElement)("input", {
           value: fromName,
           onChange: (event) => setFromName(event.target.value)
         })
       )
     ) : null,
-    error === "" ? null : (0, import_react5.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
-    (0, import_react5.createElement)(
+    error === "" ? null : (0, import_react6.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
+    (0, import_react6.createElement)(
       "div",
       { style: { display: "flex", gap: "8px", justifyContent: "flex-end" } },
-      onCancel === void 0 ? null : (0, import_react5.createElement)("button", { className: "ghost", onClick: onCancel }, "\u53D6\u6D88"),
-      (0, import_react5.createElement)(
+      onCancel === void 0 ? null : (0, import_react6.createElement)("button", { className: "ghost", onClick: onCancel }, "\u53D6\u6D88"),
+      (0, import_react6.createElement)(
         "button",
         {
           className: "primary",
@@ -1013,10 +1330,10 @@ function AddAccountForm({
   );
 }
 function LoginForm({ account, onDone }) {
-  const [password, setPassword] = (0, import_react5.useState)("");
-  const [remember, setRemember] = (0, import_react5.useState)(true);
-  const [busy, setBusy] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)("");
+  const [password, setPassword] = (0, import_react6.useState)("");
+  const [remember, setRemember] = (0, import_react6.useState)(true);
+  const [busy, setBusy] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)("");
   const submit = async () => {
     setBusy(true);
     setError("");
@@ -1029,19 +1346,19 @@ function LoginForm({ account, onDone }) {
       setBusy(false);
     }
   };
-  return (0, import_react5.createElement)(
+  return (0, import_react6.createElement)(
     "div",
     { className: "mailharbor-card" },
-    (0, import_react5.createElement)("h3", null, `\u767B\u5F55 ${account.email}`),
-    (0, import_react5.createElement)(
+    (0, import_react6.createElement)("h3", null, `\u767B\u5F55 ${account.email}`),
+    (0, import_react6.createElement)(
       "p",
       { className: "small muted" },
       `${account.imap.host}:${String(account.imap.port)} \xB7 ${account.smtp.host}:${String(account.smtp.port)}`
     ),
-    (0, import_react5.createElement)(
+    (0, import_react6.createElement)(
       Field,
       { label: "\u5BC6\u7801 / \u5E94\u7528\u4E13\u7528\u5BC6\u7801" },
-      (0, import_react5.createElement)("input", {
+      (0, import_react6.createElement)("input", {
         type: "password",
         value: password,
         onChange: (event) => setPassword(event.target.value),
@@ -1051,9 +1368,9 @@ function LoginForm({ account, onDone }) {
         autoFocus: true
       })
     ),
-    (0, import_react5.createElement)(Toggle, { checked: remember, onChange: setRemember, label: "\u8BB0\u4F4F\u5BC6\u7801\uFF08\u5199\u5165\u7CFB\u7EDF\u94A5\u5319\u4E32\uFF09" }),
-    error === "" ? null : (0, import_react5.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
-    (0, import_react5.createElement)(
+    (0, import_react6.createElement)(Toggle, { checked: remember, onChange: setRemember, label: "\u8BB0\u4F4F\u5BC6\u7801\uFF08\u5199\u5165\u7CFB\u7EDF\u94A5\u5319\u4E32\uFF09" }),
+    error === "" ? null : (0, import_react6.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
+    (0, import_react6.createElement)(
       "button",
       { className: "primary", onClick: () => void submit(), disabled: busy || password === "" },
       busy ? "\u767B\u5F55\u4E2D\u2026" : "\u767B\u5F55"
@@ -1064,10 +1381,10 @@ function AddAccountModal({
   onClose,
   onDone
 }) {
-  return (0, import_react5.createElement)(
+  return (0, import_react6.createElement)(
     Modal,
     { title: "\u6DFB\u52A0\u90AE\u7BB1\u8D26\u53F7", onClose },
-    (0, import_react5.createElement)(AddAccountForm, {
+    (0, import_react6.createElement)(AddAccountForm, {
       onDone: (state) => {
         onDone(state);
         onClose();
@@ -1078,7 +1395,7 @@ function AddAccountModal({
 }
 
 // src/client/composer.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 function errorText3(error) {
   return error instanceof ApiError || error instanceof Error ? error.message : String(error);
 }
@@ -1099,29 +1416,29 @@ function Composer({
   onClose,
   onSent
 }) {
-  const [to, setTo] = (0, import_react6.useState)(initial.to);
-  const [cc, setCc] = (0, import_react6.useState)(initial.cc);
-  const [bcc, setBcc] = (0, import_react6.useState)(initial.bcc);
-  const [subject, setSubject] = (0, import_react6.useState)(initial.subject);
-  const [showCc, setShowCc] = (0, import_react6.useState)(initial.cc !== "" || initial.bcc !== "");
-  const [attachments, setAttachments] = (0, import_react6.useState)(initial.attachments ?? []);
-  const [busy, setBusy] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)("");
-  const [confirming, setConfirming] = (0, import_react6.useState)(false);
-  const [draftId, setDraftId] = (0, import_react6.useState)(initial.draftId);
-  const [savedAt, setSavedAt] = (0, import_react6.useState)(null);
-  const [dirty, setDirty] = (0, import_react6.useState)(0);
-  const [translating, setTranslating] = (0, import_react6.useState)(null);
-  const [pendingLang, setPendingLang] = (0, import_react6.useState)(null);
-  const [versions, setVersions] = (0, import_react6.useState)([{ html: initial.html, label: "\u539F\u59CB" }]);
-  const [versionIndex, setVersionIndex] = (0, import_react6.useState)(0);
-  const [aiBusy, setAiBusy] = (0, import_react6.useState)(null);
-  const [aiDraftOpen, setAiDraftOpen] = (0, import_react6.useState)(false);
-  const [aiInstruction, setAiInstruction] = (0, import_react6.useState)("");
-  const [hasBody, setHasBody] = (0, import_react6.useState)(initial.html.trim() !== "");
-  const editor = (0, import_react6.useRef)(null);
-  const closing = (0, import_react6.useRef)(false);
-  (0, import_react6.useEffect)(() => {
+  const [to, setTo] = (0, import_react7.useState)(initial.to);
+  const [cc, setCc] = (0, import_react7.useState)(initial.cc);
+  const [bcc, setBcc] = (0, import_react7.useState)(initial.bcc);
+  const [subject, setSubject] = (0, import_react7.useState)(initial.subject);
+  const [showCc, setShowCc] = (0, import_react7.useState)(initial.cc !== "" || initial.bcc !== "");
+  const [attachments, setAttachments] = (0, import_react7.useState)(initial.attachments ?? []);
+  const [busy, setBusy] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)("");
+  const [confirming, setConfirming] = (0, import_react7.useState)(false);
+  const [draftId, setDraftId] = (0, import_react7.useState)(initial.draftId);
+  const [savedAt, setSavedAt] = (0, import_react7.useState)(null);
+  const [dirty, setDirty] = (0, import_react7.useState)(0);
+  const [translating, setTranslating] = (0, import_react7.useState)(null);
+  const [pendingLang, setPendingLang] = (0, import_react7.useState)(null);
+  const [versions, setVersions] = (0, import_react7.useState)([{ html: initial.html, label: "\u539F\u59CB" }]);
+  const [versionIndex, setVersionIndex] = (0, import_react7.useState)(0);
+  const [aiBusy, setAiBusy] = (0, import_react7.useState)(null);
+  const [aiDraftOpen, setAiDraftOpen] = (0, import_react7.useState)(false);
+  const [aiInstruction, setAiInstruction] = (0, import_react7.useState)("");
+  const [hasBody, setHasBody] = (0, import_react7.useState)(initial.html.trim() !== "");
+  const editor = (0, import_react7.useRef)(null);
+  const closing = (0, import_react7.useRef)(false);
+  (0, import_react7.useEffect)(() => {
     if (editor.current !== null) editor.current.innerHTML = initial.html;
     setHasBody((editor.current?.innerHTML ?? "").trim() !== "");
   }, []);
@@ -1153,7 +1470,7 @@ function Composer({
       return false;
     }
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (dirty === 0) return;
     const timer = window.setTimeout(() => {
       void saveNow();
@@ -1287,30 +1604,30 @@ function Composer({
       setConfirming(false);
     }
   };
-  return (0, import_react6.createElement)(
+  return (0, import_react7.createElement)(
     Modal,
     {
       title: initial.mode === "reply" ? "\u56DE\u590D" : initial.mode === "replyAll" ? "\u5168\u90E8\u56DE\u590D" : initial.mode === "forward" ? "\u8F6C\u53D1" : "\u5199\u90AE\u4EF6",
       onClose: close,
       wide: true,
-      footer: (0, import_react6.createElement)(
+      footer: (0, import_react7.createElement)(
         "div",
         { className: "mailharbor-compose-foot" },
-        (0, import_react6.createElement)("span", { className: "small muted" }, `\u53D1\u4EF6\u4EBA ${account.email}`),
-        savedAt === null ? null : (0, import_react6.createElement)("span", { className: "small muted" }, `\u5DF2\u81EA\u52A8\u4FDD\u5B58 ${savedAt.toLocaleTimeString()}`),
-        (0, import_react6.createElement)("span", { className: "spacer" }),
-        (0, import_react6.createElement)("button", { className: "ghost", onClick: () => void saveDraft(), disabled: busy }, "\u5B58\u8349\u7A3F"),
-        confirming ? (0, import_react6.createElement)(
+        (0, import_react7.createElement)("span", { className: "small muted" }, `\u53D1\u4EF6\u4EBA ${account.email}`),
+        savedAt === null ? null : (0, import_react7.createElement)("span", { className: "small muted" }, `\u5DF2\u81EA\u52A8\u4FDD\u5B58 ${savedAt.toLocaleTimeString()}`),
+        (0, import_react7.createElement)("span", { className: "spacer" }),
+        (0, import_react7.createElement)("button", { className: "ghost", onClick: () => void saveDraft(), disabled: busy }, "\u5B58\u8349\u7A3F"),
+        confirming ? (0, import_react7.createElement)(
           "span",
           { style: { display: "inline-flex", gap: "6px", alignItems: "center" } },
-          (0, import_react6.createElement)("span", { className: "small" }, "\u786E\u5B9A\u53D1\u9001\uFF1F"),
-          (0, import_react6.createElement)(
+          (0, import_react7.createElement)("span", { className: "small" }, "\u786E\u5B9A\u53D1\u9001\uFF1F"),
+          (0, import_react7.createElement)(
             "button",
             { className: "primary", onClick: () => void send(), disabled: busy },
             busy ? "\u53D1\u9001\u4E2D\u2026" : "\u786E\u5B9A"
           ),
-          (0, import_react6.createElement)("button", { className: "ghost", onClick: () => setConfirming(false) }, "\u53D6\u6D88")
-        ) : (0, import_react6.createElement)(
+          (0, import_react7.createElement)("button", { className: "ghost", onClick: () => setConfirming(false) }, "\u53D6\u6D88")
+        ) : (0, import_react7.createElement)(
           "button",
           {
             className: "primary",
@@ -1321,14 +1638,14 @@ function Composer({
         )
       )
     },
-    error === "" ? null : (0, import_react6.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
-    (0, import_react6.createElement)(
+    error === "" ? null : (0, import_react7.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
+    (0, import_react7.createElement)(
       "div",
       { className: "mailharbor-grid" },
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         Field,
         { label: "\u6536\u4EF6\u4EBA" },
-        (0, import_react6.createElement)("input", {
+        (0, import_react7.createElement)("input", {
           value: to,
           onChange: (event) => {
             setTo(event.target.value);
@@ -1337,10 +1654,10 @@ function Composer({
           placeholder: "a@example.com, b@example.com"
         })
       ),
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         Field,
         { label: "\u4E3B\u9898" },
-        (0, import_react6.createElement)("input", {
+        (0, import_react7.createElement)("input", {
           value: subject,
           onChange: (event) => {
             setSubject(event.target.value);
@@ -1350,13 +1667,13 @@ function Composer({
         })
       )
     ),
-    showCc ? (0, import_react6.createElement)(
+    showCc ? (0, import_react7.createElement)(
       "div",
       { className: "mailharbor-grid" },
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         Field,
         { label: "\u6284\u9001" },
-        (0, import_react6.createElement)("input", {
+        (0, import_react7.createElement)("input", {
           value: cc,
           onChange: (event) => {
             setCc(event.target.value);
@@ -1364,10 +1681,10 @@ function Composer({
           }
         })
       ),
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         Field,
         { label: "\u5BC6\u9001" },
-        (0, import_react6.createElement)("input", {
+        (0, import_react7.createElement)("input", {
           value: bcc,
           onChange: (event) => {
             setBcc(event.target.value);
@@ -1375,21 +1692,21 @@ function Composer({
           }
         })
       )
-    ) : (0, import_react6.createElement)(
+    ) : (0, import_react7.createElement)(
       "button",
       { className: "subtle small", style: { alignSelf: "flex-start" }, onClick: () => setShowCc(true) },
       "\u6DFB\u52A0\u6284\u9001 / \u5BC6\u9001"
     ),
-    (0, import_react6.createElement)(
+    (0, import_react7.createElement)(
       "div",
       { className: "mailharbor-toolbar" },
-      (0, import_react6.createElement)("button", { onClick: () => exec("bold"), title: "\u52A0\u7C97" }, "B"),
-      (0, import_react6.createElement)("button", { onClick: () => exec("italic"), title: "\u659C\u4F53" }, "I"),
-      (0, import_react6.createElement)("button", { onClick: () => exec("underline"), title: "\u4E0B\u5212\u7EBF" }, "U"),
-      (0, import_react6.createElement)("button", { onClick: () => exec("insertUnorderedList"), title: "\u65E0\u5E8F\u5217\u8868" }, "\u2022 \u5217\u8868"),
-      (0, import_react6.createElement)("button", { onClick: () => exec("insertOrderedList"), title: "\u6709\u5E8F\u5217\u8868" }, "1. \u5217\u8868"),
-      (0, import_react6.createElement)("button", { onClick: () => exec("formatBlock", "blockquote"), title: "\u5F15\u7528" }, "\u5F15\u7528"),
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)("button", { onClick: () => exec("bold"), title: "\u52A0\u7C97" }, "B"),
+      (0, import_react7.createElement)("button", { onClick: () => exec("italic"), title: "\u659C\u4F53" }, "I"),
+      (0, import_react7.createElement)("button", { onClick: () => exec("underline"), title: "\u4E0B\u5212\u7EBF" }, "U"),
+      (0, import_react7.createElement)("button", { onClick: () => exec("insertUnorderedList"), title: "\u65E0\u5E8F\u5217\u8868" }, "\u2022 \u5217\u8868"),
+      (0, import_react7.createElement)("button", { onClick: () => exec("insertOrderedList"), title: "\u6709\u5E8F\u5217\u8868" }, "1. \u5217\u8868"),
+      (0, import_react7.createElement)("button", { onClick: () => exec("formatBlock", "blockquote"), title: "\u5F15\u7528" }, "\u5F15\u7528"),
+      (0, import_react7.createElement)(
         "button",
         {
           onClick: () => {
@@ -1400,9 +1717,9 @@ function Composer({
         },
         "\u94FE\u63A5"
       ),
-      (0, import_react6.createElement)("button", { onClick: () => exec("removeFormat"), title: "\u6E05\u9664\u683C\u5F0F" }, "\u6E05\u9664"),
-      (0, import_react6.createElement)("span", { className: "spacer" }),
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)("button", { onClick: () => exec("removeFormat"), title: "\u6E05\u9664\u683C\u5F0F" }, "\u6E05\u9664"),
+      (0, import_react7.createElement)("span", { className: "spacer" }),
+      (0, import_react7.createElement)(
         "button",
         {
           className: "ai",
@@ -1410,34 +1727,34 @@ function Composer({
           disabled: aiBusy !== null,
           title: "\u8BA9 AI \u8D77\u8349\u6B63\u6587"
         },
-        (0, import_react6.createElement)(Icon, { name: "sparkles", size: 13 }),
+        (0, import_react7.createElement)(Icon, { name: "sparkles", size: 13 }),
         "\u8D77\u8349"
       ),
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         "button",
         { className: "ai", onClick: () => void runAi("polish"), disabled: aiBusy !== null || !hasBody },
         aiBusy === "polish" ? "\u6DA6\u8272\u4E2D\u2026" : "\u6DA6\u8272"
       ),
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         "button",
         { className: "ai", onClick: () => void runAi("shorten"), disabled: aiBusy !== null || !hasBody },
         aiBusy === "shorten" ? "\u7F29\u77ED\u4E2D\u2026" : "\u7F29\u77ED"
       ),
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         "button",
         { onClick: () => setPendingLang("zh"), disabled: translating !== null, title: "AI \u7FFB\u8BD1\u6210\u4E2D\u6587" },
         translating === "zh" ? "\u2026" : "\u4E2D"
       ),
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         "button",
         { onClick: () => setPendingLang("en"), disabled: translating !== null, title: "AI \u7FFB\u8BD1\u6210\u82F1\u6587" },
         translating === "en" ? "\u2026" : "EN"
       ),
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         "label",
         { className: "mailharbor-toggle small" },
         "\u9644\u4EF6",
-        (0, import_react6.createElement)("input", {
+        (0, import_react7.createElement)("input", {
           type: "file",
           multiple: true,
           style: { display: "none" },
@@ -1448,10 +1765,10 @@ function Composer({
         })
       )
     ),
-    aiDraftOpen ? (0, import_react6.createElement)(
+    aiDraftOpen ? (0, import_react7.createElement)(
       "div",
       { className: "mailharbor-confirm" },
-      (0, import_react6.createElement)("input", {
+      (0, import_react7.createElement)("input", {
         value: aiInstruction,
         placeholder: "\u60F3\u8BA9 AI \u5199\u4EC0\u4E48\uFF1F\u4F8B\u5982\uFF1A\u786E\u8BA4\u6536\u5230\uFF0C\u5468\u4E94\u524D\u7ED9\u7B54\u590D",
         onChange: (event) => setAiInstruction(event.target.value),
@@ -1459,30 +1776,30 @@ function Composer({
           if (event.key === "Enter") void runAi("draft");
         }
       }),
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         "button",
         { className: "primary", onClick: () => void runAi("draft"), disabled: aiBusy !== null },
         aiBusy === "draft" ? "\u751F\u6210\u4E2D\u2026" : "\u751F\u6210"
       ),
-      (0, import_react6.createElement)("button", { className: "ghost", onClick: () => setAiDraftOpen(false) }, "\u53D6\u6D88")
+      (0, import_react7.createElement)("button", { className: "ghost", onClick: () => setAiDraftOpen(false) }, "\u53D6\u6D88")
     ) : null,
-    pendingLang === null ? null : (0, import_react6.createElement)(
+    pendingLang === null ? null : (0, import_react7.createElement)(
       "div",
       { className: "mailharbor-confirm" },
-      (0, import_react6.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_react6.createElement)("span", { className: "spacer" }),
-      (0, import_react6.createElement)("button", { className: "ghost", onClick: () => setPendingLang(null) }, "\u53D6\u6D88"),
-      (0, import_react6.createElement)("button", { className: "primary", onClick: () => void translate(pendingLang) }, "\u7FFB\u8BD1")
+      (0, import_react7.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_react7.createElement)("span", { className: "spacer" }),
+      (0, import_react7.createElement)("button", { className: "ghost", onClick: () => setPendingLang(null) }, "\u53D6\u6D88"),
+      (0, import_react7.createElement)("button", { className: "primary", onClick: () => void translate(pendingLang) }, "\u7FFB\u8BD1")
     ),
-    attachments.length === 0 ? null : (0, import_react6.createElement)(
+    attachments.length === 0 ? null : (0, import_react7.createElement)(
       "div",
       { className: "mailharbor-attachments", style: { padding: 0, border: 0 } },
       attachments.map(
-        (file, index) => (0, import_react6.createElement)(
+        (file, index) => (0, import_react7.createElement)(
           "span",
           { className: "mailharbor-attachment", key: `${file.filename}:${String(index)}` },
-          (0, import_react6.createElement)("span", { className: "name" }, file.filename),
-          (0, import_react6.createElement)(
+          (0, import_react7.createElement)("span", { className: "name" }, file.filename),
+          (0, import_react7.createElement)(
             "button",
             {
               className: "subtle",
@@ -1496,7 +1813,7 @@ function Composer({
         )
       )
     ),
-    (0, import_react6.createElement)("div", {
+    (0, import_react7.createElement)("div", {
       className: "mailharbor-editor",
       ref: editor,
       contentEditable: true,
@@ -1505,12 +1822,12 @@ function Composer({
       spellCheck: true,
       onInput: markDirty
     }),
-    (0, import_react6.createElement)(
+    (0, import_react7.createElement)(
       "div",
       { className: "mailharbor-versions" },
-      (0, import_react6.createElement)("span", { className: "small muted" }, "\u7248\u672C"),
+      (0, import_react7.createElement)("span", { className: "small muted" }, "\u7248\u672C"),
       versions.map(
-        (version, index) => (0, import_react6.createElement)(
+        (version, index) => (0, import_react7.createElement)(
           "button",
           {
             key: `${version.label}:${String(index)}`,
@@ -1521,19 +1838,19 @@ function Composer({
           String(index + 1)
         )
       ),
-      versions.length > 1 ? (0, import_react6.createElement)(
+      versions.length > 1 ? (0, import_react7.createElement)(
         "button",
         { className: "subtle small", onClick: () => restoreVersion(Math.max(0, versionIndex - 1)) },
         "\u6062\u590D\u4E0A\u4E00\u7248"
       ) : null,
-      (0, import_react6.createElement)("span", { className: "spacer" }),
-      (0, import_react6.createElement)("span", { className: "small muted" }, versions[versionIndex]?.label ?? "")
+      (0, import_react7.createElement)("span", { className: "spacer" }),
+      (0, import_react7.createElement)("span", { className: "small muted" }, versions[versionIndex]?.label ?? "")
     )
   );
 }
 
 // src/client/reader.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var IFRAME_STYLE = `
   html, body { margin: 0; padding: 0; }
   body {
@@ -1581,13 +1898,14 @@ function Reader({
   onChanged,
   onReply,
   onAiAction,
+  onExtractTasks,
   onClose
 }) {
-  const [plain, setPlain] = (0, import_react7.useState)(false);
-  const [loadImages, setLoadImages] = (0, import_react7.useState)(false);
-  const [busy, setBusy] = (0, import_react7.useState)(false);
-  const [error, setError] = (0, import_react7.useState)("");
-  const remoteImages = (0, import_react7.useMemo)(() => hasRemoteImages(detail), [detail]);
+  const [plain, setPlain] = (0, import_react8.useState)(false);
+  const [loadImages, setLoadImages] = (0, import_react8.useState)(false);
+  const [busy, setBusy] = (0, import_react8.useState)(false);
+  const [error, setError] = (0, import_react8.useState)("");
+  const remoteImages = (0, import_react8.useMemo)(() => hasRemoteImages(detail), [detail]);
   const html = detail.html !== null && detail.html !== "";
   const toggleRead = async () => {
     setBusy(true);
@@ -1607,22 +1925,22 @@ function Reader({
       setBusy(false);
     }
   };
-  return (0, import_react7.createElement)(
+  return (0, import_react8.createElement)(
     "div",
     { className: "mailharbor-reader" },
-    (0, import_react7.createElement)(
+    (0, import_react8.createElement)(
       "div",
       { className: "mailharbor-reader-head" },
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)(
         "div",
         { className: "mailharbor-reader-title" },
-        onClose === void 0 ? null : (0, import_react7.createElement)(
+        onClose === void 0 ? null : (0, import_react8.createElement)(
           "button",
           { className: "ghost icon", onClick: onClose, "aria-label": "\u8FD4\u56DE\u5217\u8868", title: "\u8FD4\u56DE\u5217\u8868" },
-          (0, import_react7.createElement)(Icon, { name: "chevronLeft" })
+          (0, import_react8.createElement)(Icon, { name: "chevronLeft" })
         ),
-        (0, import_react7.createElement)("h2", { style: { flex: 1 } }, detail.subject),
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)("h2", { style: { flex: 1 } }, detail.subject),
+        (0, import_react8.createElement)(
           "button",
           {
             className: "ghost icon",
@@ -1631,88 +1949,94 @@ function Reader({
             title: detail.unread ? "\u6807\u4E3A\u5DF2\u8BFB" : "\u6807\u4E3A\u672A\u8BFB",
             "aria-label": detail.unread ? "\u6807\u4E3A\u5DF2\u8BFB" : "\u6807\u4E3A\u672A\u8BFB"
           },
-          (0, import_react7.createElement)(Icon, { name: "check" })
+          (0, import_react8.createElement)(Icon, { name: "check" })
         )
       ),
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)(
         "div",
         { className: "mailharbor-reader-meta" },
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           "span",
           { className: "who" },
-          (0, import_react7.createElement)(Avatar, { email: detail.from.address, size: 22 }),
-          (0, import_react7.createElement)("strong", null, detail.from.name !== "" ? detail.from.name : detail.from.address),
-          detail.from.name !== "" ? (0, import_react7.createElement)("span", null, `<${detail.from.address}>`) : null
+          (0, import_react8.createElement)(Avatar, { email: detail.from.address, size: 22 }),
+          (0, import_react8.createElement)("strong", null, detail.from.name !== "" ? detail.from.name : detail.from.address),
+          detail.from.name !== "" ? (0, import_react8.createElement)("span", null, `<${detail.from.address}>`) : null
         ),
-        (0, import_react7.createElement)("span", null, longDate(detail.date)),
-        detail.backedUp === false ? (0, import_react7.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null
+        (0, import_react8.createElement)("span", null, longDate(detail.date)),
+        detail.backedUp === false ? (0, import_react8.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null
       ),
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)(
         "div",
         { className: "mailharbor-reader-meta" },
-        (0, import_react7.createElement)("span", null, `\u6536\u4EF6\u4EBA: ${addressLine(detail.to) || "\u2014"}`),
-        detail.cc.length === 0 ? null : (0, import_react7.createElement)("span", null, `\u6284\u9001: ${addressLine(detail.cc)}`)
+        (0, import_react8.createElement)("span", null, `\u6536\u4EF6\u4EBA: ${addressLine(detail.to) || "\u2014"}`),
+        detail.cc.length === 0 ? null : (0, import_react8.createElement)("span", null, `\u6284\u9001: ${addressLine(detail.cc)}`)
       ),
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)(
         "div",
         { className: "mailharbor-reader-actions" },
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           "button",
           { className: "ghost", onClick: () => onReply("reply") },
-          (0, import_react7.createElement)(Icon, { name: "reply" }),
+          (0, import_react8.createElement)(Icon, { name: "reply" }),
           "\u56DE\u590D"
         ),
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           "button",
           { className: "ghost", onClick: () => onReply("replyAll") },
-          (0, import_react7.createElement)(Icon, { name: "replyAll" }),
+          (0, import_react8.createElement)(Icon, { name: "replyAll" }),
           "\u5168\u90E8\u56DE\u590D"
         ),
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           "button",
           { className: "ghost", onClick: () => onReply("forward") },
-          (0, import_react7.createElement)(Icon, { name: "forward" }),
+          (0, import_react8.createElement)(Icon, { name: "forward" }),
           "\u8F6C\u53D1"
         ),
-        (0, import_react7.createElement)("span", { className: "mailharbor-divider" }),
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)("span", { className: "mailharbor-divider" }),
+        (0, import_react8.createElement)(
           "button",
           { className: "ghost", onClick: () => onAiAction("summary") },
-          (0, import_react7.createElement)(Icon, { name: "sparkles", size: 14 }),
+          (0, import_react8.createElement)(Icon, { name: "sparkles", size: 14 }),
           "AI \u6458\u8981"
         ),
-        (0, import_react7.createElement)("button", { className: "ghost", onClick: () => onAiAction("reply") }, "AI \u56DE\u590D"),
-        (0, import_react7.createElement)("button", { className: "ghost", onClick: () => onAiAction("translate") }, "AI \u7FFB\u8BD1"),
-        (0, import_react7.createElement)("span", { className: "spacer" }),
-        html ? (0, import_react7.createElement)(
+        (0, import_react8.createElement)("button", { className: "ghost", onClick: () => onAiAction("reply") }, "AI \u56DE\u590D"),
+        (0, import_react8.createElement)("button", { className: "ghost", onClick: () => onAiAction("translate") }, "AI \u7FFB\u8BD1"),
+        (0, import_react8.createElement)(
+          "button",
+          { className: "ghost", onClick: onExtractTasks },
+          (0, import_react8.createElement)(Icon, { name: "checklist", size: 14 }),
+          "\u63D0\u53D6\u4EFB\u52A1"
+        ),
+        (0, import_react8.createElement)("span", { className: "spacer" }),
+        html ? (0, import_react8.createElement)(
           "button",
           { className: "subtle", onClick: () => setPlain(!plain) },
           plain ? "\u663E\u793A HTML" : "\u7EAF\u6587\u672C"
         ) : null,
-        remoteImages && !loadImages ? (0, import_react7.createElement)(
+        remoteImages && !loadImages ? (0, import_react8.createElement)(
           "button",
           { className: "subtle", onClick: () => setLoadImages(true) },
-          (0, import_react7.createElement)(Icon, { name: "image", size: 14 }),
+          (0, import_react8.createElement)(Icon, { name: "image", size: 14 }),
           "\u663E\u793A\u56FE\u7247"
         ) : null
       ),
-      error === "" ? null : (0, import_react7.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error)
+      error === "" ? null : (0, import_react8.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error)
     ),
-    (0, import_react7.createElement)(
+    (0, import_react8.createElement)(
       "div",
       { className: "mailharbor-reader-body" },
-      html && !plain ? (0, import_react7.createElement)("iframe", {
+      html && !plain ? (0, import_react8.createElement)("iframe", {
         title: "\u90AE\u4EF6\u6B63\u6587",
         sandbox: "",
         srcDoc: srcDoc(detail, loadImages),
         referrerPolicy: "no-referrer"
-      }) : (0, import_react7.createElement)("pre", null, detail.text !== "" ? detail.text : "\uFF08\u65E0\u6B63\u6587\uFF09")
+      }) : (0, import_react8.createElement)("pre", null, detail.text !== "" ? detail.text : "\uFF08\u65E0\u6B63\u6587\uFF09")
     ),
-    detail.attachments.length === 0 ? null : (0, import_react7.createElement)(
+    detail.attachments.length === 0 ? null : (0, import_react8.createElement)(
       "div",
       { className: "mailharbor-attachments" },
       detail.attachments.map(
-        (file) => (0, import_react7.createElement)(
+        (file) => (0, import_react8.createElement)(
           "a",
           {
             className: "mailharbor-attachment",
@@ -1732,15 +2056,27 @@ function Reader({
             download: file.filename,
             title: file.filename
           },
-          (0, import_react7.createElement)(Icon, { name: "paperclip", size: 14 }),
-          (0, import_react7.createElement)("span", { className: "name" }, file.filename),
-          (0, import_react7.createElement)("span", { className: "muted small" }, formatBytes(file.size))
+          (0, import_react8.createElement)(Icon, { name: "paperclip", size: 14 }),
+          (0, import_react8.createElement)("span", { className: "name" }, file.filename),
+          (0, import_react8.createElement)("span", { className: "muted small" }, formatBytes(file.size))
         )
       )
     )
   );
 }
 
+// src/client/nav.ts
+var pending = null;
+function requestOpenMail(request2) {
+  pending = request2;
+  window.dispatchEvent(new CustomEvent("mailharbor:open-mail", { detail: request2 }));
+}
+function consumeOpenMail() {
+  const value = pending;
+  pending = null;
+  return value;
+}
+
 // src/client/panel.tsx
 var EMPTY_PAGE = { items: [], total: 0, offset: 0, limit: 40 };
 var DRAFTS = "__drafts";
@@ -1755,43 +2091,162 @@ function quoteForReply(detail) {
   return `<p><br></p><p>------------------ \u539F\u59CB\u90AE\u4EF6 ------------------</p><blockquote style="margin:0 0 0 12px;padding-left:12px;border-left:2px solid #d7dbe3;color:#565c67">${body}</blockquote>`;
 }
 function MailPanel() {
-  const [state, setState] = (0, import_react8.useState)(null);
-  const [error, setError] = (0, import_react8.useState)("");
-  const [accountScope, setAccountScope] = (0, import_react8.useState)(null);
-  const [source, setSource] = (0, import_react8.useState)("local");
-  const [mailbox, setMailbox] = (0, import_react8.useState)("all");
-  const [folders, setFolders] = (0, import_react8.useState)([]);
-  const [query2, setQuery] = (0, import_react8.useState)("");
-  const [search, setSearch] = (0, import_react8.useState)("");
-  const [page, setPage] = (0, import_react8.useState)(EMPTY_PAGE);
-  const [drafts, setDrafts] = (0, import_react8.useState)([]);
-  const [limit, setLimit] = (0, import_react8.useState)(40);
-  const [loading, setLoading] = (0, import_react8.useState)(false);
-  const [selected, setSelected] = (0, import_react8.useState)(null);
-  const [compose, setCompose] = (0, import_react8.useState)(null);
-  const [showAdd, setShowAdd] = (0, import_react8.useState)(false);
-  const [showBackup, setShowBackup] = (0, import_react8.useState)(false);
-  const [backup, setBackup] = (0, import_react8.useState)(null);
-  const [toast, setToast] = (0, import_react8.useState)("");
-  const [narrow, setNarrow] = (0, import_react8.useState)(() => matchesNarrow());
-  const [railOpen, setRailOpen] = (0, import_react8.useState)(false);
-  const [aiRequest, setAiRequest] = (0, import_react8.useState)(null);
-  const [tick, setTick] = (0, import_react8.useState)(0);
+  const [state, setState] = (0, import_react9.useState)(null);
+  const [error, setError] = (0, import_react9.useState)("");
+  const [accountScope, setAccountScope] = (0, import_react9.useState)(null);
+  const [source, setSource] = (0, import_react9.useState)("local");
+  const [mailbox, setMailbox] = (0, import_react9.useState)("all");
+  const [folders, setFolders] = (0, import_react9.useState)([]);
+  const [query2, setQuery] = (0, import_react9.useState)("");
+  const [search, setSearch] = (0, import_react9.useState)("");
+  const [page, setPage] = (0, import_react9.useState)(EMPTY_PAGE);
+  const [drafts, setDrafts] = (0, import_react9.useState)([]);
+  const [limit, setLimit] = (0, import_react9.useState)(40);
+  const [loading, setLoading] = (0, import_react9.useState)(false);
+  const [selected, setSelected] = (0, import_react9.useState)(null);
+  const [compose, setCompose] = (0, import_react9.useState)(null);
+  const [showAdd, setShowAdd] = (0, import_react9.useState)(false);
+  const [showBackup, setShowBackup] = (0, import_react9.useState)(false);
+  const [backup, setBackup] = (0, import_react9.useState)(null);
+  const [toast, setToast] = (0, import_react9.useState)("");
+  const [narrow, setNarrow] = (0, import_react9.useState)(() => matchesNarrow());
+  const [railOpen, setRailOpen] = (0, import_react9.useState)(false);
+  const [selectMode, setSelectMode] = (0, import_react9.useState)(false);
+  const [selectedKeys, setSelectedKeys] = (0, import_react9.useState)([]);
+  const [projectOptions, setProjectOptions] = (0, import_react9.useState)([]);
+  const [targetProject, setTargetProject] = (0, import_react9.useState)("");
+  const [extraction, setExtraction] = (0, import_react9.useState)(null);
+  const [extractBusy, setExtractBusy] = (0, import_react9.useState)(false);
+  const [aiRequest, setAiRequest] = (0, import_react9.useState)(null);
+  const [tick, setTick] = (0, import_react9.useState)(0);
   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_react8.useCallback)(() => {
+  const keyOf = (item) => item.messageId !== void 0 && item.messageId !== "" ? `mid:${item.messageId}` : `local:${item.id}`;
+  const openFromRequest = (0, import_react9.useCallback)((detail) => {
+    setAccountScope(detail.accountId);
+    setSource("local");
+    setMailbox(detail.mailbox === "" ? "all" : detail.mailbox);
+    api.activateAccount(detail.accountId).then(() => {
+      setRailOpen(false);
+      return api.message({
+        id: detail.id,
+        accountId: detail.accountId,
+        source: "local",
+        mailbox: detail.mailbox === "" ? "all" : detail.mailbox
+      });
+    }).then((message) => setSelected(message)).catch((caught) => setError(errorText5(caught)));
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    const queued = consumeOpenMail();
+    if (queued !== null) openFromRequest(queued);
+    const onOpen = (event) => {
+      const detail = event.detail;
+      if (detail !== void 0) openFromRequest(detail);
+    };
+    window.addEventListener("mailharbor:open-mail", onOpen);
+    return () => {
+      window.removeEventListener("mailharbor:open-mail", onOpen);
+    };
+  }, [openFromRequest]);
+  const enterSelect = async () => {
+    setSelectMode(true);
+    try {
+      const list = await api.projects();
+      setProjectOptions(list.items);
+      setTargetProject(list.items[0]?.id ?? "");
+    } catch (caught) {
+      setError(errorText5(caught));
+    }
+  };
+  const toggleSelect = (item) => {
+    const key = `${item.accountId}:${item.id}`;
+    setSelectedKeys(
+      (current) => current.includes(key) ? current.filter((entry) => entry !== key) : [...current, key]
+    );
+  };
+  const addSelectedToProject = async () => {
+    if (targetProject === "") {
+      setError("\u5148\u521B\u5EFA\u4E00\u4E2A\u9879\u76EE");
+      return;
+    }
+    const chosen = items.filter((item) => selectedKeys.includes(`${item.accountId}:${item.id}`));
+    if (chosen.length === 0) return;
+    try {
+      for (const item of chosen) {
+        await api.addProjectMessage(targetProject, {
+          accountId: item.accountId,
+          key: keyOf(item),
+          subject: item.subject,
+          date: item.date
+        });
+      }
+      notice(`\u5DF2\u52A0\u5165\u9879\u76EE\uFF1A${String(chosen.length)} \u5C01`);
+      setSelectMode(false);
+      setSelectedKeys([]);
+    } catch (caught) {
+      setError(errorText5(caught));
+    }
+  };
+  const extractTasks = async () => {
+    if (selected === null) return;
+    setExtractBusy(true);
+    try {
+      const result = await api.extractTasks({
+        accountId: selected.accountId,
+        source,
+        id: selected.id,
+        mailbox
+      });
+      if (result.suggestions.length === 0) {
+        notice("\u8FD9\u5C01\u90AE\u4EF6\u6CA1\u6709\u63D0\u53D6\u5230\u660E\u786E\u4EFB\u52A1");
+        return;
+      }
+      setExtraction({ items: result.suggestions, checked: result.suggestions.map(() => true) });
+    } catch (caught) {
+      setError(errorText5(caught));
+    } finally {
+      setExtractBusy(false);
+    }
+  };
+  const saveExtraction = async () => {
+    if (extraction === null || selected === null) return;
+    setExtractBusy(true);
+    try {
+      const key = keyOf(selected);
+      for (const [index, suggestion] of extraction.items.entries()) {
+        if (!extraction.checked[index]) continue;
+        await api.createTask({
+          accountId: selected.accountId,
+          title: suggestion.title,
+          notes: suggestion.notes,
+          due: suggestion.due,
+          priority: suggestion.priority,
+          owner: suggestion.owner,
+          messageKey: key,
+          messageSubject: selected.subject
+        });
+      }
+      setExtraction(null);
+      notice("\u4EFB\u52A1\u5DF2\u4FDD\u5B58\uFF0C\u53EF\u5728\u300C\u4EFB\u52A1\u300D\u9762\u677F\u67E5\u770B");
+    } catch (caught) {
+      setError(errorText5(caught));
+    } finally {
+      setExtractBusy(false);
+    }
+  };
+  const refresh = (0, import_react9.useCallback)(() => {
     setTick((value) => value + 1);
   }, []);
-  const notice = (0, import_react8.useCallback)((message) => {
+  const notice = (0, import_react9.useCallback)((message) => {
     setToast(message);
     window.setTimeout(() => {
       setToast("");
     }, 3200);
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     let cancelled = false;
     api.state().then((next) => {
       if (cancelled) return;
@@ -1805,7 +2260,7 @@ function MailPanel() {
       cancelled = true;
     };
   }, [tick]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (accountScope === null) return;
     let cancelled = false;
     api.folders({ accountId: accountScope, source }).then((result) => {
@@ -1829,16 +2284,16 @@ function MailPanel() {
       cancelled = true;
     };
   }, [accountScope, source, tick]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     setMailbox(source === "local" ? "all" : "INBOX");
     setSelected(null);
     setLimit(state?.settings.render.listLimit ?? 40);
   }, [source]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (accountScope === "all" && source === "server") setSource("local");
     setSelected(null);
   }, [accountScope, source]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (accountScope === null) return;
     let cancelled = false;
     setLoading(true);
@@ -1878,7 +2333,7 @@ function MailPanel() {
       cancelled = true;
     };
   }, [accountScope, source, mailbox, search, limit, tick]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (typeof window.matchMedia !== "function") return;
     const media = window.matchMedia("(max-width: 900px)");
     const onChange = () => setNarrow(media.matches);
@@ -1887,7 +2342,7 @@ function MailPanel() {
       media.removeEventListener("change", onChange);
     };
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!showBackup || accountScope === null || isAll) return;
     let cancelled = false;
     const poll = async () => {
@@ -2055,7 +2510,7 @@ function MailPanel() {
       setError(errorText5(caught));
     }
   };
-  const folderOptions = (0, import_react8.useMemo)(
+  const folderOptions = (0, import_react9.useMemo)(
     () => folders.map((folder) => ({
       value: folder.name,
       label: `${folder.label ?? folder.name}${folder.count > 0 ? ` (${String(folder.count)})` : ""}`
@@ -2063,27 +2518,27 @@ function MailPanel() {
     [folders]
   );
   if (state === null) {
-    return (0, import_react8.createElement)(
+    return (0, import_react9.createElement)(
       "div",
       { className: "mailharbor" },
-      (0, import_react8.createElement)("div", { className: "mailharbor-empty" }, error === "" ? "\u6B63\u5728\u52A0\u8F7D\u90AE\u7BB1\u2026" : error)
+      (0, import_react9.createElement)("div", { className: "mailharbor-empty" }, error === "" ? "\u6B63\u5728\u52A0\u8F7D\u90AE\u7BB1\u2026" : error)
     );
   }
   if (accounts.length === 0) {
-    return (0, import_react8.createElement)(
+    return (0, import_react9.createElement)(
       "div",
       { className: "mailharbor" },
-      (0, import_react8.createElement)(
+      (0, import_react9.createElement)(
         "div",
         { className: "mailharbor-settings" },
-        (0, import_react8.createElement)("h2", null, "\u6B22\u8FCE\u4F7F\u7528 MailHarbor"),
-        (0, import_react8.createElement)(
+        (0, import_react9.createElement)("h2", null, "\u6B22\u8FCE\u4F7F\u7528 MailHarbor"),
+        (0, import_react9.createElement)(
           "p",
           { className: "muted small" },
           "\u628A\u4EFB\u610F IMAP/SMTP \u90AE\u7BB1\u63A5\u8FDB DeepSeek Harness\uFF1A\u672C\u5730\u5907\u4EFD\u3001\u5B9E\u65F6\u8BFB\u4FE1\u3001\u5199\u90AE\u4EF6\u4E0E Agent \u5DE5\u5177\u3002"
         ),
-        error === "" ? null : (0, import_react8.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
-        (0, import_react8.createElement)(AddAccountForm, {
+        error === "" ? null : (0, import_react9.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
+        (0, import_react9.createElement)(AddAccountForm, {
           onDone: (next) => {
             setState(next);
             setAccountScope(next.activeAccountId);
@@ -2097,38 +2552,38 @@ function MailPanel() {
   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_react8.createElement)(
+  return (0, import_react9.createElement)(
     "div",
     { className: narrow ? "mailharbor mailharbor-narrow" : "mailharbor" },
-    (0, import_react8.createElement)(
+    (0, import_react9.createElement)(
       "div",
       { className: "mailharbor-topbar" },
-      (0, import_react8.createElement)(
+      (0, import_react9.createElement)(
         "div",
         { className: "mailharbor-account" },
-        (0, import_react8.createElement)(Avatar, { email: isAll ? "all" : currentAccount?.email ?? "?", size: 26 }),
-        accounts.length > 1 ? (0, import_react8.createElement)(
+        (0, import_react9.createElement)(Avatar, { email: isAll ? "all" : currentAccount?.email ?? "?", size: 26 }),
+        accounts.length > 1 ? (0, import_react9.createElement)(
           "select",
           {
             value: accountScope ?? "",
             onChange: (event) => void switchAccount(event.target.value),
             "aria-label": "\u8D26\u53F7"
           },
-          (0, import_react8.createElement)("option", { key: "all", value: "all" }, "\u5168\u90E8\u8D26\u53F7"),
-          accounts.map((item) => (0, import_react8.createElement)("option", { key: item.id, value: item.id }, item.label))
-        ) : (0, import_react8.createElement)("span", { className: "name" }, currentAccount?.label ?? ""),
-        isAll ? (0, import_react8.createElement)("span", { className: "badge" }, `${String(accounts.length)} \u4E2A\u8D26\u53F7`) : null,
-        !isAll && state.loggedIn === false ? (0, import_react8.createElement)("span", { className: "badge warn" }, "\u672A\u767B\u5F55") : null
+          (0, import_react9.createElement)("option", { key: "all", value: "all" }, "\u5168\u90E8\u8D26\u53F7"),
+          accounts.map((item) => (0, import_react9.createElement)("option", { key: item.id, value: item.id }, item.label))
+        ) : (0, import_react9.createElement)("span", { className: "name" }, currentAccount?.label ?? ""),
+        isAll ? (0, import_react9.createElement)("span", { className: "badge" }, `${String(accounts.length)} \u4E2A\u8D26\u53F7`) : null,
+        !isAll && state.loggedIn === false ? (0, import_react9.createElement)("span", { className: "badge warn" }, "\u672A\u767B\u5F55") : null
       ),
-      (0, import_react8.createElement)(
+      (0, import_react9.createElement)(
         "div",
         { className: "mailharbor-segment", role: "tablist" },
-        (0, import_react8.createElement)(
+        (0, import_react9.createElement)(
           "button",
           { className: source === "local" ? "active" : "", onClick: () => setSource("local"), role: "tab" },
           "\u672C\u5730\u5907\u4EFD"
         ),
-        (0, import_react8.createElement)(
+        (0, import_react9.createElement)(
           "button",
           {
             className: source === "server" ? "active" : "",
@@ -2145,8 +2600,8 @@ function MailPanel() {
           "\u670D\u52A1\u5668\u5B9E\u65F6"
         )
       ),
-      (0, import_react8.createElement)("span", { className: "spacer" }),
-      (0, import_react8.createElement)(
+      (0, import_react9.createElement)("span", { className: "spacer" }),
+      (0, import_react9.createElement)(
         "button",
         {
           className: "ghost icon",
@@ -2154,56 +2609,56 @@ function MailPanel() {
           "aria-label": "\u6DFB\u52A0\u8D26\u53F7",
           onClick: () => setShowAdd(true)
         },
-        (0, import_react8.createElement)(Icon, { name: "plus" })
+        (0, import_react9.createElement)(Icon, { name: "plus" })
       ),
-      (0, import_react8.createElement)(
+      (0, import_react9.createElement)(
         "button",
         { className: "ghost icon", title: "\u5237\u65B0\u5217\u8868", "aria-label": "\u5237\u65B0\u5217\u8868", onClick: refresh },
-        (0, import_react8.createElement)(Icon, { name: "refresh" })
+        (0, import_react9.createElement)(Icon, { name: "refresh" })
       ),
-      (0, import_react8.createElement)(
+      (0, import_react9.createElement)(
         "button",
         {
           className: "ghost",
           onClick: () => void startBackup(),
           title: isAll ? "\u5907\u4EFD\u5F53\u524D\u6D3B\u52A8\u8D26\u53F7" : "\u5907\u4EFD\u8FD9\u4E2A\u8D26\u53F7"
         },
-        (0, import_react8.createElement)(Icon, { name: "archive" }),
+        (0, import_react9.createElement)(Icon, { name: "archive" }),
         "\u5907\u4EFD"
       ),
-      (0, import_react8.createElement)(
+      (0, import_react9.createElement)(
         "button",
         {
           className: railOpen ? "ghost active" : "ghost",
           onClick: () => setRailOpen(!railOpen),
           title: "AI \u5DE5\u4F5C\u53F0"
         },
-        (0, import_react8.createElement)(Icon, { name: "sparkles" }),
+        (0, import_react9.createElement)(Icon, { name: "sparkles" }),
         "AI"
       ),
-      (0, import_react8.createElement)(
+      (0, import_react9.createElement)(
         "button",
         { className: "primary", onClick: () => startCompose("new") },
-        (0, import_react8.createElement)(Icon, { name: "compose" }),
+        (0, import_react9.createElement)(Icon, { name: "compose" }),
         "\u5199\u90AE\u4EF6"
       )
     ),
-    toast === "" ? null : (0, import_react8.createElement)("div", { className: "small", style: { padding: "6px 14px", color: "var(--m-ok)" } }, toast),
-    error === "" ? null : (0, import_react8.createElement)(ErrorBar, { message: error, onDismiss: () => setError("") }),
-    needsLogin ? (0, import_react8.createElement)(
+    toast === "" ? null : (0, import_react9.createElement)("div", { className: "small", style: { padding: "6px 14px", color: "var(--m-ok)" } }, toast),
+    error === "" ? null : (0, import_react9.createElement)(ErrorBar, { message: error, onDismiss: () => setError("") }),
+    needsLogin ? (0, import_react9.createElement)(
       "div",
       { className: "mailharbor-settings" },
-      (0, import_react8.createElement)(LoginForm, { account: currentAccount, onDone: refresh })
-    ) : (0, import_react8.createElement)(
+      (0, import_react9.createElement)(LoginForm, { account: currentAccount, onDone: refresh })
+    ) : (0, import_react9.createElement)(
       "div",
       { className: "mailharbor-body", "data-mode": narrow && selected !== null ? "reader" : "list" },
-      (0, import_react8.createElement)(
+      (0, import_react9.createElement)(
         "div",
         { className: "mailharbor-list" },
-        (0, import_react8.createElement)(
+        (0, import_react9.createElement)(
           "div",
           { className: "mailharbor-filters" },
-          (0, import_react8.createElement)(
+          (0, import_react9.createElement)(
             "select",
             {
               value: mailbox,
@@ -2214,10 +2669,10 @@ function MailPanel() {
               "aria-label": "\u90AE\u7BB1\u6587\u4EF6\u5939"
             },
             folderOptions.map(
-              (option) => (0, import_react8.createElement)("option", { key: option.value, value: option.value }, option.label)
+              (option) => (0, import_react9.createElement)("option", { key: option.value, value: option.value }, option.label)
             )
           ),
-          (0, import_react8.createElement)("input", {
+          (0, import_react9.createElement)("input", {
             type: "search",
             placeholder: showingDrafts ? "\u641C\u7D22\u8349\u7A3F" : "\u641C\u7D22\u90AE\u4EF6",
             "aria-label": "\u641C\u7D22\u90AE\u4EF6",
@@ -2231,7 +2686,24 @@ function MailPanel() {
               }
             }
           }),
-          query2 !== search || search !== "" ? (0, import_react8.createElement)(
+          source === "local" ? (0, import_react9.createElement)(
+            "button",
+            {
+              className: selectMode ? "ghost active" : "ghost",
+              title: "\u9009\u62E9\u591A\u5C01\u90AE\u4EF6\u52A0\u5165\u9879\u76EE",
+              onClick: () => {
+                if (selectMode) {
+                  setSelectMode(false);
+                  setSelectedKeys([]);
+                } else {
+                  void enterSelect();
+                }
+              }
+            },
+            Icon({ name: "checklist", size: 14 }),
+            "\u9009\u62E9"
+          ) : null,
+          query2 !== search || search !== "" ? (0, import_react9.createElement)(
             "button",
             {
               className: "subtle",
@@ -2241,22 +2713,60 @@ function MailPanel() {
                 setSearch("");
               }
             },
-            (0, import_react8.createElement)(Icon, { name: "close", size: 14 })
+            (0, import_react9.createElement)(Icon, { name: "close", size: 14 })
           ) : null
         ),
-        (0, import_react8.createElement)(
+        selectMode ? (0, import_react9.createElement)(
+          "div",
+          { className: "mailharbor-selectbar" },
+          (0, import_react9.createElement)("span", { className: "small" }, `\u5DF2\u9009 ${String(selectedKeys.length)} \u5C01`),
+          (0, import_react9.createElement)("span", { className: "spacer" }),
+          (0, import_react9.createElement)(
+            "select",
+            {
+              value: targetProject,
+              onChange: (event) => setTargetProject(event.target.value),
+              "aria-label": "\u76EE\u6807\u9879\u76EE"
+            },
+            (0, import_react9.createElement)("option", { value: "" }, projectOptions.length === 0 ? "\u8FD8\u6CA1\u6709\u9879\u76EE" : "\u9009\u62E9\u9879\u76EE"),
+            projectOptions.map(
+              (project) => (0, import_react9.createElement)("option", { key: project.id, value: project.id }, project.name)
+            )
+          ),
+          (0, import_react9.createElement)(
+            "button",
+            {
+              className: "primary",
+              disabled: selectedKeys.length === 0 || targetProject === "",
+              onClick: () => void addSelectedToProject()
+            },
+            "\u52A0\u5165\u9879\u76EE"
+          ),
+          (0, import_react9.createElement)(
+            "button",
+            {
+              className: "ghost",
+              onClick: () => {
+                setSelectMode(false);
+                setSelectedKeys([]);
+              }
+            },
+            "\u53D6\u6D88"
+          )
+        ) : null,
+        (0, import_react9.createElement)(
           "div",
           { className: "mailharbor-rows" },
-          loading && items.length === 0 && drafts.length === 0 ? (0, import_react8.createElement)("div", { className: "mailharbor-empty" }, "\u6B63\u5728\u8BFB\u53D6\u2026") : showingDrafts ? drafts.length === 0 ? (0, import_react8.createElement)(
+          loading && items.length === 0 && drafts.length === 0 ? (0, import_react9.createElement)("div", { className: "mailharbor-empty" }, "\u6B63\u5728\u8BFB\u53D6\u2026") : showingDrafts ? drafts.length === 0 ? (0, import_react9.createElement)(
             "div",
             { className: "mailharbor-empty" },
-            (0, import_react8.createElement)(Icon, { name: "compose", size: 28 }),
-            (0, import_react8.createElement)("div", { className: "title" }, "\u6CA1\u6709\u8349\u7A3F"),
-            (0, import_react8.createElement)("div", { className: "small" }, "\u5199\u4FE1\u65F6\u70B9\u300C\u5B58\u8349\u7A3F\u300D\u4F1A\u51FA\u73B0\u5728\u8FD9\u91CC\u3002")
+            (0, import_react9.createElement)(Icon, { name: "compose", size: 28 }),
+            (0, import_react9.createElement)("div", { className: "title" }, "\u6CA1\u6709\u8349\u7A3F"),
+            (0, import_react9.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_react8.createElement)(
+            (draft) => (0, import_react9.createElement)(
               "div",
               {
                 key: draft.id,
@@ -2271,21 +2781,21 @@ function MailPanel() {
                   }
                 }
               },
-              (0, import_react8.createElement)(
+              (0, import_react9.createElement)(
                 "span",
                 { className: "line-1" },
-                (0, import_react8.createElement)(
+                (0, import_react9.createElement)(
                   "span",
                   { className: "from" },
                   `\u8349\u7A3F${draft.to === "" ? "" : ` \xB7 \u6536\u4EF6\u4EBA ${draft.to}`}`
                 ),
-                isAll ? (0, import_react8.createElement)(
+                isAll ? (0, import_react9.createElement)(
                   "span",
                   { className: "badge" },
                   accounts.find((item) => item.id === draft.accountId)?.label ?? ""
                 ) : null,
-                (0, import_react8.createElement)("span", { className: "date" }, shortDate(draft.updatedAt)),
-                (0, import_react8.createElement)(
+                (0, import_react9.createElement)("span", { className: "date" }, shortDate(draft.updatedAt)),
+                (0, import_react9.createElement)(
                   "button",
                   {
                     className: "subtle",
@@ -2295,121 +2805,132 @@ function MailPanel() {
                       void removeDraft(draft.id, draft.accountId);
                     }
                   },
-                  (0, import_react8.createElement)(Icon, { name: "close", size: 13 })
+                  (0, import_react9.createElement)(Icon, { name: "close", size: 13 })
                 )
               ),
-              (0, import_react8.createElement)(
+              (0, import_react9.createElement)(
                 "span",
                 { className: "line-2" },
-                (0, import_react8.createElement)(
+                (0, import_react9.createElement)(
                   "span",
                   { className: "subject" },
                   draft.subject === "" ? "(\u65E0\u4E3B\u9898)" : draft.subject
                 )
               ),
-              draft.html === "" ? null : (0, import_react8.createElement)(
+              draft.html === "" ? null : (0, import_react9.createElement)(
                 "span",
                 { className: "snippet" },
                 draft.html.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim().slice(0, 120)
               )
             )
-          ) : items.length === 0 ? (0, import_react8.createElement)(
+          ) : items.length === 0 ? (0, import_react9.createElement)(
             "div",
             { className: "mailharbor-empty" },
-            (0, import_react8.createElement)(Icon, { name: "mail", size: 28 }),
-            (0, import_react8.createElement)(
+            (0, import_react9.createElement)(Icon, { name: "mail", size: 28 }),
+            (0, import_react9.createElement)(
               "div",
               { className: "title" },
               source === "local" ? "\u672C\u5730\u5907\u4EFD\u91CC\u8FD8\u6CA1\u6709\u90AE\u4EF6" : "\u670D\u52A1\u5668\u4E0A\u6CA1\u6709\u90AE\u4EF6"
             ),
-            (0, import_react8.createElement)(
+            (0, import_react9.createElement)(
               "div",
               { className: "small" },
               source === "local" ? "\u70B9\u9876\u90E8\u300C\u5907\u4EFD\u300D\u628A\u670D\u52A1\u5668\u90AE\u4EF6\u540C\u6B65\u4E0B\u6765\u3002" : "\u6362\u4E00\u4E2A\u6587\u4EF6\u5939\u6216\u7A0D\u540E\u5237\u65B0\u3002"
             )
           ) : items.map(
-            (item) => (0, import_react8.createElement)(
+            (item) => (0, import_react9.createElement)(
               "div",
               {
                 key: `${item.accountId}:${item.id}`,
-                className: `mailharbor-row${item.unread ? " unread" : ""}${selected?.id === item.id && selected?.accountId === item.accountId ? " selected" : ""}`,
+                className: `mailharbor-row${item.unread ? " unread" : ""}${selected?.id === item.id && selected?.accountId === item.accountId ? " selected" : ""}${selectMode ? " selectable" : ""}`,
                 role: "button",
                 tabIndex: 0,
-                onClick: () => void openMessage(item),
+                onClick: () => {
+                  if (selectMode) toggleSelect(item);
+                  else void openMessage(item);
+                },
                 onKeyDown: (event) => {
                   if (event.key === "Enter" || event.key === " ") {
                     event.preventDefault();
-                    void openMessage(item);
+                    if (selectMode) toggleSelect(item);
+                    else void openMessage(item);
                   }
                 }
               },
-              (0, import_react8.createElement)(
+              (0, import_react9.createElement)(
                 "span",
                 { className: "line-1" },
-                item.unread ? (0, import_react8.createElement)("span", { className: "dot" }) : null,
-                (0, import_react8.createElement)(
+                selectMode ? (0, import_react9.createElement)("input", {
+                  type: "checkbox",
+                  checked: selectedKeys.includes(`${item.accountId}:${item.id}`),
+                  "aria-label": "\u9009\u62E9\u90AE\u4EF6",
+                  onClick: (event) => event.stopPropagation(),
+                  onChange: () => toggleSelect(item)
+                }) : item.unread ? (0, import_react9.createElement)("span", { className: "dot" }) : null,
+                (0, import_react9.createElement)(
                   "span",
                   { className: "from" },
                   item.from.name !== "" ? item.from.name : item.from.address
                 ),
-                item.hasAttachments ? (0, import_react8.createElement)(Icon, { name: "paperclip", size: 13 }) : null,
-                isAll ? (0, import_react8.createElement)(
+                item.hasAttachments ? (0, import_react9.createElement)(Icon, { name: "paperclip", size: 13 }) : null,
+                isAll ? (0, import_react9.createElement)(
                   "span",
                   { className: "badge" },
                   accounts.find((entry) => entry.id === item.accountId)?.label ?? ""
                 ) : null,
-                item.backedUp === false ? (0, import_react8.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null,
-                (0, import_react8.createElement)("span", { className: "date" }, shortDate(item.date))
+                item.backedUp === false ? (0, import_react9.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null,
+                (0, import_react9.createElement)("span", { className: "date" }, shortDate(item.date))
               ),
-              (0, import_react8.createElement)(
+              (0, import_react9.createElement)(
                 "span",
                 { className: "line-2" },
-                (0, import_react8.createElement)("span", { className: "subject" }, item.subject)
+                (0, import_react9.createElement)("span", { className: "subject" }, item.subject)
               ),
-              item.snippet === "" ? null : (0, import_react8.createElement)("span", { className: "snippet" }, item.snippet)
+              item.snippet === "" ? null : (0, import_react9.createElement)("span", { className: "snippet" }, item.snippet)
             )
           )
         ),
-        !showingDrafts && items.length > 0 ? (0, import_react8.createElement)(
+        !showingDrafts && items.length > 0 ? (0, import_react9.createElement)(
           "div",
           { className: "mailharbor-list-foot" },
-          (0, import_react8.createElement)("span", null, `${String(items.length)} / ${String(page.total)} \u5C01`),
-          (0, import_react8.createElement)("span", { className: "spacer" }),
-          page.total > items.length ? (0, import_react8.createElement)(
+          (0, import_react9.createElement)("span", null, `${String(items.length)} / ${String(page.total)} \u5C01`),
+          (0, import_react9.createElement)("span", { className: "spacer" }),
+          page.total > items.length ? (0, import_react9.createElement)(
             "button",
             { className: "subtle", onClick: () => setLimit((current) => current + 40) },
             "\u52A0\u8F7D\u66F4\u591A"
           ) : null
-        ) : showingDrafts && drafts.length > 0 ? (0, import_react8.createElement)(
+        ) : showingDrafts && drafts.length > 0 ? (0, import_react9.createElement)(
           "div",
           { className: "mailharbor-list-foot" },
-          (0, import_react8.createElement)("span", null, `${String(drafts.length)} \u5C01\u8349\u7A3F`)
+          (0, import_react9.createElement)("span", null, `${String(drafts.length)} \u5C01\u8349\u7A3F`)
         ) : null
       ),
-      (0, import_react8.createElement)(
+      (0, import_react9.createElement)(
         "div",
         { className: "mailharbor-reader" },
-        selected === null ? (0, import_react8.createElement)(
+        selected === null ? (0, import_react9.createElement)(
           "div",
           { className: "mailharbor-empty" },
-          (0, import_react8.createElement)(Icon, { name: "mail", size: 34 }),
-          (0, import_react8.createElement)("div", { className: "title" }, "\u9009\u62E9\u4E00\u5C01\u90AE\u4EF6\u5F00\u59CB\u9605\u8BFB"),
-          (0, import_react8.createElement)(
+          (0, import_react9.createElement)(Icon, { name: "mail", size: 34 }),
+          (0, import_react9.createElement)("div", { className: "title" }, "\u9009\u62E9\u4E00\u5C01\u90AE\u4EF6\u5F00\u59CB\u9605\u8BFB"),
+          (0, import_react9.createElement)(
             "div",
             { className: "small" },
             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_react8.createElement)(Reader, {
+        ) : (0, import_react9.createElement)(Reader, {
           detail: selected,
           source,
           mailbox,
           onChanged: (patch) => setSelected({ ...selected, ...patch }),
           onReply: (mode) => startCompose(mode),
           onAiAction: requestAi,
+          onExtractTasks: () => void extractTasks(),
           onClose: narrow ? () => setSelected(null) : void 0
         })
       ),
-      railOpen ? (0, import_react8.createElement)(AiRail, {
+      railOpen ? (0, import_react9.createElement)(AiRail, {
         account: accounts.find((item) => item.id === (selected?.accountId ?? accountScope)) ?? currentAccount,
         detail: selected,
         source,
@@ -2421,45 +2942,101 @@ function MailPanel() {
         onNotice: notice
       }) : null
     ),
-    showBackup && backup !== null ? (0, import_react8.createElement)(
+    showBackup && backup !== null ? (0, import_react9.createElement)(
       Modal,
       {
         title: "\u5907\u4EFD",
         onClose: () => setShowBackup(false),
-        footer: (0, import_react8.createElement)(
+        footer: (0, import_react9.createElement)(
           "div",
           { style: { display: "flex", gap: "8px", width: "100%", alignItems: "center" } },
-          (0, import_react8.createElement)("span", { className: "small muted" }, backup.running ? "\u5907\u4EFD\u8FDB\u884C\u4E2D\u2026" : backup.message),
-          (0, import_react8.createElement)("span", { className: "spacer" }),
-          backup.running ? (0, import_react8.createElement)("button", { className: "ghost danger", onClick: () => void stopBackup() }, "\u505C\u6B62\u5907\u4EFD") : (0, import_react8.createElement)("button", { className: "primary", onClick: () => void startBackup() }, "\u5F00\u59CB\u5907\u4EFD"),
-          (0, import_react8.createElement)("button", { className: "ghost", onClick: () => setShowBackup(false) }, "\u5173\u95ED")
+          (0, import_react9.createElement)("span", { className: "small muted" }, backup.running ? "\u5907\u4EFD\u8FDB\u884C\u4E2D\u2026" : backup.message),
+          (0, import_react9.createElement)("span", { className: "spacer" }),
+          backup.running ? (0, import_react9.createElement)("button", { className: "ghost danger", onClick: () => void stopBackup() }, "\u505C\u6B62\u5907\u4EFD") : (0, import_react9.createElement)("button", { className: "primary", onClick: () => void startBackup() }, "\u5F00\u59CB\u5907\u4EFD"),
+          (0, import_react9.createElement)("button", { className: "ghost", onClick: () => setShowBackup(false) }, "\u5173\u95ED")
         )
       },
-      (0, import_react8.createElement)(
+      (0, import_react9.createElement)(
         "div",
         { className: "mailharbor-kv" },
-        (0, import_react8.createElement)("dt", null, "\u5F00\u59CB\u65F6\u95F4"),
-        (0, import_react8.createElement)("dd", null, backup.startedAt ?? "\u2014"),
-        (0, import_react8.createElement)("dt", null, "\u4E0A\u6B21\u6210\u529F"),
-        (0, import_react8.createElement)("dd", null, backup.lastSuccessAt ?? "\u2014"),
-        (0, import_react8.createElement)("dt", null, "\u65B0\u589E"),
-        (0, import_react8.createElement)("dd", null, String(backup.added)),
-        (0, import_react8.createElement)("dt", null, "\u603B\u6570"),
-        (0, import_react8.createElement)("dd", null, String(backup.total))
+        (0, import_react9.createElement)("dt", null, "\u5F00\u59CB\u65F6\u95F4"),
+        (0, import_react9.createElement)("dd", null, backup.startedAt ?? "\u2014"),
+        (0, import_react9.createElement)("dt", null, "\u4E0A\u6B21\u6210\u529F"),
+        (0, import_react9.createElement)("dd", null, backup.lastSuccessAt ?? "\u2014"),
+        (0, import_react9.createElement)("dt", null, "\u65B0\u589E"),
+        (0, import_react9.createElement)("dd", null, String(backup.added)),
+        (0, import_react9.createElement)("dt", null, "\u603B\u6570"),
+        (0, import_react9.createElement)("dd", null, String(backup.total))
       ),
-      (0, import_react8.createElement)(
+      (0, import_react9.createElement)(
         "div",
         { className: "mailharbor-log" },
         backup.output.length === 0 ? "\uFF08\u7B49\u5F85\u8F93\u51FA\u2026\uFF09" : backup.output.join("\n")
       )
     ) : null,
-    compose !== null && composeAccount !== null ? (0, import_react8.createElement)(Composer, {
+    extraction !== null ? (0, import_react9.createElement)(
+      Modal,
+      {
+        title: "\u63D0\u53D6\u4EFB\u52A1",
+        onClose: () => setExtraction(null),
+        footer: (0, import_react9.createElement)(
+          "div",
+          { style: { display: "flex", gap: "8px", width: "100%", alignItems: "center" } },
+          (0, import_react9.createElement)("span", { className: "small muted" }, "\u52FE\u9009\u8981\u4FDD\u5B58\u7684\u4EFB\u52A1\uFF1B\u4FDD\u5B58\u540E\u53EF\u5230\u300C\u4EFB\u52A1\u300D\u9762\u677F\u8DDF\u8FDB\u3002"),
+          (0, import_react9.createElement)("span", { className: "spacer" }),
+          (0, import_react9.createElement)("button", { className: "ghost", onClick: () => setExtraction(null) }, "\u53D6\u6D88"),
+          (0, import_react9.createElement)(
+            "button",
+            {
+              className: "primary",
+              disabled: extractBusy || extraction.checked.every((value) => !value),
+              onClick: () => void saveExtraction()
+            },
+            extractBusy ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58\u4EFB\u52A1"
+          )
+        )
+      },
+      (0, import_react9.createElement)(
+        "div",
+        { style: { display: "flex", flexDirection: "column", gap: "8px" } },
+        extraction.items.map(
+          (item, index) => (0, import_react9.createElement)(
+            "label",
+            { key: `${item.title}:${String(index)}`, className: "mailharbor-extract-row" },
+            (0, import_react9.createElement)("input", {
+              type: "checkbox",
+              checked: extraction.checked[index] ?? false,
+              onChange: () => {
+                const checked = [...extraction.checked];
+                checked[index] = !checked[index];
+                setExtraction({ ...extraction, checked });
+              }
+            }),
+            (0, import_react9.createElement)(
+              "span",
+              null,
+              (0, import_react9.createElement)("strong", null, item.title),
+              (0, import_react9.createElement)(
+                "span",
+                { className: "small muted" },
+                [
+                  item.due === "" ? "" : `\u622A\u6B62 ${item.due}`,
+                  item.owner === "" ? "" : `\u8D1F\u8D23\u4EBA ${item.owner}`,
+                  item.notes
+                ].filter((part) => part !== "").join(" \xB7 ")
+              )
+            )
+          )
+        )
+      )
+    ) : null,
+    compose !== null && composeAccount !== null ? (0, import_react9.createElement)(Composer, {
       account: composeAccount,
       initial: compose,
       onClose: () => setCompose(null),
       onSent: (message) => notice(message)
     }) : null,
-    showAdd ? (0, import_react8.createElement)(AddAccountModal, {
+    showAdd ? (0, import_react9.createElement)(AddAccountModal, {
       onClose: () => setShowAdd(false),
       onDone: (next) => {
         setState(next);
@@ -2471,32 +3048,33 @@ function MailPanel() {
 }
 
 // src/client/settings.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 function errorText6(error) {
   return error instanceof ApiError || error instanceof Error ? error.message : String(error);
 }
 function MailSettings() {
-  const [state, setState] = (0, import_react9.useState)(null);
-  const [settings, setSettings] = (0, import_react9.useState)(null);
-  const [error, setError] = (0, import_react9.useState)("");
-  const [toast, setToast] = (0, import_react9.useState)("");
-  const [signature, setSignature] = (0, import_react9.useState)("");
-  const [markOnOpen, setMarkOnOpen] = (0, import_react9.useState)(true);
-  const [pollSeconds, setPollSeconds] = (0, import_react9.useState)(60);
-  const [listLimit, setListLimit] = (0, import_react9.useState)(40);
-  const [aiEnabled, setAiEnabled] = (0, import_react9.useState)(true);
-  const [aiProvider, setAiProvider] = (0, import_react9.useState)("deepseek-account");
-  const [aiModel, setAiModel] = (0, import_react9.useState)("deepseek-flash");
-  const [aiModels, setAiModels] = (0, import_react9.useState)({ providers: [] });
-  const [aiStatus, setAiStatus] = (0, import_react9.useState)(null);
-  const [styleText, setStyleText] = (0, import_react9.useState)("");
-  const [styleMeta, setStyleMeta] = (0, import_react9.useState)({ updatedAt: "", sampleCount: 0 });
-  const [styleBusy, setStyleBusy] = (0, import_react9.useState)(null);
-  const [editing, setEditing] = (0, import_react9.useState)(null);
-  const [checkResults, setCheckResults] = (0, import_react9.useState)({});
-  const [adding, setAdding] = (0, import_react9.useState)(false);
-  const [tick, setTick] = (0, import_react9.useState)(0);
-  (0, import_react9.useEffect)(() => {
+  const [state, setState] = (0, import_react10.useState)(null);
+  const [settings, setSettings] = (0, import_react10.useState)(null);
+  const [error, setError] = (0, import_react10.useState)("");
+  const [toast, setToast] = (0, import_react10.useState)("");
+  const [signature, setSignature] = (0, import_react10.useState)("");
+  const [markOnOpen, setMarkOnOpen] = (0, import_react10.useState)(true);
+  const [pollSeconds, setPollSeconds] = (0, import_react10.useState)(60);
+  const [listLimit, setListLimit] = (0, import_react10.useState)(40);
+  const [projectRoot, setProjectRoot] = (0, import_react10.useState)("");
+  const [aiEnabled, setAiEnabled] = (0, import_react10.useState)(true);
+  const [aiProvider, setAiProvider] = (0, import_react10.useState)("deepseek-account");
+  const [aiModel, setAiModel] = (0, import_react10.useState)("deepseek-flash");
+  const [aiModels, setAiModels] = (0, import_react10.useState)({ providers: [] });
+  const [aiStatus, setAiStatus] = (0, import_react10.useState)(null);
+  const [styleText, setStyleText] = (0, import_react10.useState)("");
+  const [styleMeta, setStyleMeta] = (0, import_react10.useState)({ updatedAt: "", sampleCount: 0 });
+  const [styleBusy, setStyleBusy] = (0, import_react10.useState)(null);
+  const [editing, setEditing] = (0, import_react10.useState)(null);
+  const [checkResults, setCheckResults] = (0, import_react10.useState)({});
+  const [adding, setAdding] = (0, import_react10.useState)(false);
+  const [tick, setTick] = (0, import_react10.useState)(0);
+  (0, import_react10.useEffect)(() => {
     let cancelled = false;
     Promise.all([api.state(), api.settings()]).then(([appState, view]) => {
       if (cancelled) return;
@@ -2506,6 +3084,7 @@ function MailSettings() {
       setMarkOnOpen(view.read.markOnOpen);
       setPollSeconds(view.read.pollSeconds);
       setListLimit(view.render.listLimit);
+      setProjectRoot(view.projects.root);
       setAiEnabled(view.ai.enabled);
       setAiProvider(view.ai.provider);
       setAiModel(view.ai.model);
@@ -2516,7 +3095,7 @@ function MailSettings() {
       cancelled = true;
     };
   }, [tick]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     let cancelled = false;
     const accountId = settings?.activeAccountId ?? state?.activeAccountId ?? null;
     if (accountId === null) return;
@@ -2559,24 +3138,24 @@ function MailSettings() {
   };
   const account = settings?.accounts.find((item) => item.id === settings.activeAccountId) ?? null;
   if (state === null || settings === null) {
-    return (0, import_react9.createElement)("div", { className: "mailharbor mailharbor-settings" }, error === "" ? "\u6B63\u5728\u52A0\u8F7D\u8BBE\u7F6E\u2026" : error);
+    return (0, import_react10.createElement)("div", { className: "mailharbor mailharbor-settings" }, error === "" ? "\u6B63\u5728\u52A0\u8F7D\u8BBE\u7F6E\u2026" : error);
   }
-  return (0, import_react9.createElement)(
+  return (0, import_react10.createElement)(
     "div",
-    { className: "mailharbor" },
-    (0, import_react9.createElement)(
+    { className: "mailharbor mailharbor-settings-page" },
+    (0, import_react10.createElement)(
       "div",
       { className: "mailharbor-settings" },
-      (0, import_react9.createElement)("h2", null, "MailHarbor"),
-      (0, import_react9.createElement)("p", { className: "small muted" }, "\u591A\u8D26\u53F7 IMAP/SMTP \u90AE\u7BB1\u3001\u672C\u5730\u5907\u4EFD\u3001AI \u4E0E\u4EFB\u52A1\u3002\u8BBE\u7F6E\u4F1A\u7ACB\u5373\u751F\u6548\u3002"),
-      toast === "" ? null : (0, import_react9.createElement)("div", { className: "small", style: { color: "var(--m-ok)" } }, toast),
-      error === "" ? null : (0, import_react9.createElement)(ErrorBar, { message: error, onDismiss: () => setError("") }),
-      (0, import_react9.createElement)(
+      (0, import_react10.createElement)("h2", null, "MailHarbor"),
+      (0, import_react10.createElement)("p", { className: "small muted" }, "\u591A\u8D26\u53F7 IMAP/SMTP \u90AE\u7BB1\u3001\u672C\u5730\u5907\u4EFD\u3001AI \u4E0E\u4EFB\u52A1\u3002\u8BBE\u7F6E\u4F1A\u7ACB\u5373\u751F\u6548\u3002"),
+      toast === "" ? null : (0, import_react10.createElement)("div", { className: "small", style: { color: "var(--m-ok)" } }, toast),
+      error === "" ? null : (0, import_react10.createElement)(ErrorBar, { message: error, onDismiss: () => setError("") }),
+      (0, import_react10.createElement)(
         "div",
         { className: "mailharbor-card" },
-        (0, import_react9.createElement)("h3", null, "\u8D26\u53F7"),
-        settings.accounts.length === 0 ? (0, import_react9.createElement)(AddAccountForm, { onDone: () => reload() }) : settings.accounts.map(
-          (item) => (0, import_react9.createElement)(AccountRow, {
+        (0, import_react10.createElement)("h3", null, "\u8D26\u53F7"),
+        settings.accounts.length === 0 ? (0, import_react10.createElement)(AddAccountForm, { onDone: () => reload() }) : settings.accounts.map(
+          (item) => (0, import_react10.createElement)(AccountRow, {
             key: item.id,
             account: item,
             active: item.id === settings.activeAccountId,
@@ -2621,32 +3200,32 @@ function MailSettings() {
             }
           })
         ),
-        adding ? (0, import_react9.createElement)(AddAccountForm, {
+        adding ? (0, import_react10.createElement)(AddAccountForm, {
           onDone: () => {
             setAdding(false);
             reload();
           },
           onCancel: () => setAdding(false)
-        }) : (0, import_react9.createElement)("button", { className: "ghost", onClick: () => setAdding(true) }, "+ \u6DFB\u52A0\u8D26\u53F7")
+        }) : (0, import_react10.createElement)("button", { className: "ghost", onClick: () => setAdding(true) }, "+ \u6DFB\u52A0\u8D26\u53F7")
       ),
-      (0, import_react9.createElement)(
+      (0, import_react10.createElement)(
         "div",
         { className: "mailharbor-card" },
-        (0, import_react9.createElement)("h3", null, "\u5199\u4FE1\u4E0E\u9605\u8BFB"),
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)("h3", null, "\u5199\u4FE1\u4E0E\u9605\u8BFB"),
+        (0, import_react10.createElement)(
           Field,
           { label: "\u7B7E\u540D\uFF08\u7EAF\u6587\u672C\uFF0C\u53D1\u9001\u65F6\u8FFD\u52A0\u5230\u6B63\u6587\u672B\u5C3E\uFF09" },
-          (0, import_react9.createElement)("textarea", {
+          (0, import_react10.createElement)("textarea", {
             rows: 4,
             value: signature,
             onChange: (event) => setSignature(event.target.value)
           })
         ),
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)(
           "div",
           { style: { display: "flex", gap: "10px", alignItems: "center", flexWrap: "wrap" } },
-          (0, import_react9.createElement)("button", { className: "ghost", onClick: () => void saveGeneral({ signature }) }, "\u4FDD\u5B58\u7B7E\u540D"),
-          (0, import_react9.createElement)(Toggle, {
+          (0, import_react10.createElement)("button", { className: "ghost", onClick: () => void saveGeneral({ signature }) }, "\u4FDD\u5B58\u7B7E\u540D"),
+          (0, import_react10.createElement)(Toggle, {
             checked: markOnOpen,
             onChange: (value) => {
               setMarkOnOpen(value);
@@ -2655,13 +3234,13 @@ function MailSettings() {
             label: "\u6253\u5F00\u90AE\u4EF6\u65F6\u6807\u4E3A\u5DF2\u8BFB"
           })
         ),
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)(
           "div",
           { className: "mailharbor-grid" },
-          (0, import_react9.createElement)(
+          (0, import_react10.createElement)(
             Field,
             { label: "\u5217\u8868\u6BCF\u9875\u6570\u91CF" },
-            (0, import_react9.createElement)("input", {
+            (0, import_react10.createElement)("input", {
               type: "number",
               min: 10,
               max: 200,
@@ -2670,10 +3249,10 @@ function MailSettings() {
               onBlur: () => void saveGeneral({ render: { listLimit } })
             })
           ),
-          (0, import_react9.createElement)(
+          (0, import_react10.createElement)(
             Field,
             { label: "\u672A\u8BFB\u89D2\u6807\u8F6E\u8BE2\uFF08\u79D2\uFF09" },
-            (0, import_react9.createElement)("input", {
+            (0, import_react10.createElement)("input", {
               type: "number",
               min: 15,
               max: 3600,
@@ -2684,11 +3263,38 @@ function MailSettings() {
           )
         )
       ),
-      (0, import_react9.createElement)(
+      (0, import_react10.createElement)(
+        "div",
+        { className: "mailharbor-card" },
+        (0, import_react10.createElement)("h3", null, "\u9879\u76EE"),
+        (0, import_react10.createElement)("p", { className: "small muted" }, "\u4ECE\u90AE\u4EF6\u521B\u5EFA\u9879\u76EE\u65F6\u7684\u9ED8\u8BA4\u76EE\u5F55\uFF1B\u5355\u4E2A\u9879\u76EE\u53EF\u4EE5\u5728\u521B\u5EFA\u65F6\u6539\u3002"),
+        (0, import_react10.createElement)(
+          "div",
+          { className: "mailharbor-grid", style: { gridTemplateColumns: "minmax(0, 1fr) auto" } },
+          (0, import_react10.createElement)(
+            Field,
+            { label: "\u9ED8\u8BA4\u9879\u76EE\u76EE\u5F55" },
+            (0, import_react10.createElement)("input", {
+              value: projectRoot,
+              onChange: (event) => setProjectRoot(event.target.value)
+            })
+          ),
+          (0, import_react10.createElement)(
+            "button",
+            {
+              className: "ghost small",
+              style: { alignSelf: "end" },
+              onClick: () => void saveGeneral({ projects: { root: projectRoot } })
+            },
+            "\u4FDD\u5B58\u76EE\u5F55"
+          )
+        )
+      ),
+      (0, import_react10.createElement)(
         "div",
         { className: "mailharbor-card" },
-        (0, import_react9.createElement)("h3", null, "AI"),
-        (0, import_react9.createElement)(Toggle, {
+        (0, import_react10.createElement)("h3", null, "AI"),
+        (0, import_react10.createElement)(Toggle, {
           checked: aiEnabled,
           onChange: (value) => {
             setAiEnabled(value);
@@ -2696,22 +3302,22 @@ function MailSettings() {
           },
           label: "\u542F\u7528 AI\uFF08\u6458\u8981\u3001AI \u56DE\u590D\u3001\u7FFB\u8BD1\u3001\u5199\u4F5C\u98CE\u683C\uFF09"
         }),
-        aiStatus === null ? null : (0, import_react9.createElement)(
+        aiStatus === null ? null : (0, import_react10.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_react9.createElement)(
+        (0, import_react10.createElement)(
           "div",
           { className: "mailharbor-grid" },
-          (0, import_react9.createElement)(
+          (0, import_react10.createElement)(
             Field,
             { label: "Provider" },
-            aiModels.providers.length === 0 ? (0, import_react9.createElement)("input", {
+            aiModels.providers.length === 0 ? (0, import_react10.createElement)("input", {
               value: aiProvider,
               onChange: (event) => setAiProvider(event.target.value),
               onBlur: () => void saveGeneral({ ai: { provider: aiProvider } })
-            }) : (0, import_react9.createElement)(
+            }) : (0, import_react10.createElement)(
               "select",
               {
                 value: aiProvider,
@@ -2729,20 +3335,20 @@ function MailSettings() {
                 }
               },
               aiModels.providers.map(
-                (item) => (0, import_react9.createElement)("option", { key: item.provider, value: item.provider }, item.name)
+                (item) => (0, import_react10.createElement)("option", { key: item.provider, value: item.provider }, item.name)
               )
             )
           ),
-          (0, import_react9.createElement)(
+          (0, import_react10.createElement)(
             Field,
             { label: "\u6A21\u578B" },
             (() => {
               const provider = aiModels.providers.find((item) => item.provider === aiProvider);
-              return provider === void 0 || provider.models.length === 0 ? (0, import_react9.createElement)("input", {
+              return provider === void 0 || provider.models.length === 0 ? (0, import_react10.createElement)("input", {
                 value: aiModel,
                 onChange: (event) => setAiModel(event.target.value),
                 onBlur: () => void saveGeneral({ ai: { model: aiModel } })
-              }) : (0, import_react9.createElement)(
+              }) : (0, import_react10.createElement)(
                 "select",
                 {
                   value: aiModel,
@@ -2751,37 +3357,37 @@ function MailSettings() {
                     void saveGeneral({ ai: { model: event.target.value } });
                   }
                 },
-                provider.models.map((item) => (0, import_react9.createElement)("option", { key: item.id, value: item.id }, item.name))
+                provider.models.map((item) => (0, import_react10.createElement)("option", { key: item.id, value: item.id }, item.name))
               );
             })()
           )
         ),
-        (0, import_react9.createElement)("hr", null),
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)("hr", null),
+        (0, import_react10.createElement)(
           "div",
           { style: { display: "flex", alignItems: "center", gap: "8px" } },
-          (0, import_react9.createElement)("strong", { style: { fontSize: "12.5px" } }, "\u5199\u4F5C\u98CE\u683C"),
-          (0, import_react9.createElement)(
+          (0, import_react10.createElement)("strong", { style: { fontSize: "12.5px" } }, "\u5199\u4F5C\u98CE\u683C"),
+          (0, import_react10.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_react9.createElement)(
+        (0, import_react10.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_react9.createElement)("textarea", {
+        (0, import_react10.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_react9.createElement)(
+        (0, import_react10.createElement)(
           "div",
           { style: { display: "flex", gap: "8px", flexWrap: "wrap" } },
-          (0, import_react9.createElement)(
+          (0, import_react10.createElement)(
             "button",
             {
               className: "ghost",
@@ -2800,7 +3406,7 @@ function MailSettings() {
             },
             styleBusy === "learn" ? "\u5B66\u4E60\u4E2D\u2026" : "\u4ECE\u5DF2\u53D1\u9001\u90AE\u4EF6\u5B66\u4E60"
           ),
-          (0, import_react9.createElement)(
+          (0, import_react10.createElement)(
             "button",
             {
               className: "primary",
@@ -2819,36 +3425,36 @@ function MailSettings() {
             "\u4FDD\u5B58\u98CE\u683C"
           )
         ),
-        (0, import_react9.createElement)(
+        (0, import_react10.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\uFF1B\u53D1\u9001\u4ECD\u7136\u53EA\u7531\u4F60\u786E\u8BA4\u3002"
         )
       ),
-      (0, import_react9.createElement)(
+      (0, import_react10.createElement)(
         "div",
         { className: "mailharbor-card" },
-        (0, import_react9.createElement)("h3", null, "\u6570\u636E"),
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)("h3", null, "\u6570\u636E"),
+        (0, import_react10.createElement)(
           "dl",
           { className: "mailharbor-kv" },
-          (0, import_react9.createElement)("dt", null, "\u6570\u636E\u76EE\u5F55"),
-          (0, import_react9.createElement)("dd", null, settings.dataDir),
-          (0, import_react9.createElement)("dt", null, "\u914D\u7F6E\u6587\u4EF6"),
-          (0, import_react9.createElement)("dd", null, settings.configFile),
-          (0, import_react9.createElement)("dt", null, "\u5F53\u524D\u8D26\u53F7\u6570\u636E\u5E93"),
-          (0, import_react9.createElement)(
+          (0, import_react10.createElement)("dt", null, "\u6570\u636E\u76EE\u5F55"),
+          (0, import_react10.createElement)("dd", null, settings.dataDir),
+          (0, import_react10.createElement)("dt", null, "\u914D\u7F6E\u6587\u4EF6"),
+          (0, import_react10.createElement)("dd", null, settings.configFile),
+          (0, import_react10.createElement)("dt", null, "\u5F53\u524D\u8D26\u53F7\u6570\u636E\u5E93"),
+          (0, import_react10.createElement)(
             "dd",
             null,
             account === null ? "\u2014" : `${account.dataDir.startsWith("/") ? account.dataDir : `${settings.dataDir}/${account.dataDir}`}/mail.db`
           ),
-          (0, import_react9.createElement)("dt", null, "\u63D2\u4EF6\u7248\u672C"),
-          (0, import_react9.createElement)("dd", null, state.version)
+          (0, import_react10.createElement)("dt", null, "\u63D2\u4EF6\u7248\u672C"),
+          (0, import_react10.createElement)("dd", null, state.version)
         ),
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)(
           "div",
           { style: { display: "flex", gap: "8px", flexWrap: "wrap" } },
-          account === null ? null : (0, import_react9.createElement)(
+          account === null ? null : (0, import_react10.createElement)(
             "button",
             {
               className: "ghost",
@@ -2883,20 +3489,41 @@ function AccountRow({
   onSave,
   onRemove
 }) {
-  const [password, setPassword] = (0, import_react9.useState)("");
-  const [remember, setRemember] = (0, import_react9.useState)(true);
-  const [label, setLabel] = (0, import_react9.useState)(account.label);
-  const [username, setUsername] = (0, import_react9.useState)(account.username);
-  const [imapHost, setImapHost] = (0, import_react9.useState)(account.imap.host);
-  const [imapPort, setImapPort] = (0, import_react9.useState)(String(account.imap.port));
-  const [imapSecure, setImapSecure] = (0, import_react9.useState)(account.imap.secure);
-  const [smtpHost, setSmtpHost] = (0, import_react9.useState)(account.smtp.host);
-  const [smtpPort, setSmtpPort] = (0, import_react9.useState)(String(account.smtp.port));
-  const [smtpSecure, setSmtpSecure] = (0, import_react9.useState)(account.smtp.secure);
-  const [fromName, setFromName] = (0, import_react9.useState)(account.smtp.fromName);
-  const [busy, setBusy] = (0, import_react9.useState)(false);
-  const [checking, setChecking] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [password, setPassword] = (0, import_react10.useState)("");
+  const [remember, setRemember] = (0, import_react10.useState)(true);
+  const [label, setLabel] = (0, import_react10.useState)(account.label);
+  const [username, setUsername] = (0, import_react10.useState)(account.username);
+  const [imapHost, setImapHost] = (0, import_react10.useState)(account.imap.host);
+  const [imapPort, setImapPort] = (0, import_react10.useState)(String(account.imap.port));
+  const [imapSecure, setImapSecure] = (0, import_react10.useState)(account.imap.secure);
+  const [smtpHost, setSmtpHost] = (0, import_react10.useState)(account.smtp.host);
+  const [smtpPort, setSmtpPort] = (0, import_react10.useState)(String(account.smtp.port));
+  const [smtpSecure, setSmtpSecure] = (0, import_react10.useState)(account.smtp.secure);
+  const [fromName, setFromName] = (0, import_react10.useState)(account.smtp.fromName);
+  const [busy, setBusy] = (0, import_react10.useState)(false);
+  const [checking, setChecking] = (0, import_react10.useState)(false);
+  const [caldavUrl, setCaldavUrl] = (0, import_react10.useState)(account.caldav?.url ?? "");
+  const [caldavUser, setCaldavUser] = (0, import_react10.useState)(account.caldav?.username ?? "");
+  const [caldavHref, setCaldavHref] = (0, import_react10.useState)(account.caldav?.calendarHref ?? "");
+  const [caldavPassword, setCaldavPassword] = (0, import_react10.useState)("");
+  const [caldavStatus, setCaldavStatus] = (0, import_react10.useState)("");
+  (0, import_react10.useEffect)(() => {
+    if (!editing) return;
+    let cancelled = false;
+    api.taskCaldav(account.id).then((info) => {
+      if (cancelled) return;
+      setCaldavUrl(info.caldav?.url ?? "");
+      setCaldavUser(info.caldav?.username ?? "");
+      setCaldavHref(info.caldav?.calendarHref ?? "");
+      setCaldavStatus(info.hasPassword ? "\u5DF2\u4FDD\u5B58\u5E94\u7528\u5BC6\u7801" : "\u5C1A\u672A\u4FDD\u5B58\u5E94\u7528\u5BC6\u7801");
+    }).catch(() => {
+      if (!cancelled) setCaldavStatus("\u65E0\u6CD5\u8BFB\u53D6 CalDAV \u914D\u7F6E");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [editing, account.id]);
+  (0, import_react10.useEffect)(() => {
     setLabel(account.label);
     setUsername(account.username);
     setImapHost(account.imap.host);
@@ -2915,24 +3542,24 @@ function AccountRow({
       setBusy(false);
     }
   };
-  return (0, import_react9.createElement)(
+  return (0, import_react10.createElement)(
     "div",
     { className: "mailharbor-card", style: { background: "var(--m-bg-1)" } },
-    (0, import_react9.createElement)(
+    (0, import_react10.createElement)(
       "div",
       { className: "mailharbor-account-row" },
-      (0, import_react9.createElement)(Avatar, { email: account.email, size: 30 }),
-      (0, import_react9.createElement)(
+      (0, import_react10.createElement)(Avatar, { email: account.email, size: 30 }),
+      (0, import_react10.createElement)(
         "div",
         { style: { display: "flex", flexDirection: "column", minWidth: 0 } },
-        (0, import_react9.createElement)("strong", null, account.label),
-        (0, import_react9.createElement)("span", { className: "small muted" }, account.email)
+        (0, import_react10.createElement)("strong", null, account.label),
+        (0, import_react10.createElement)("span", { className: "small muted" }, account.email)
       ),
-      active ? (0, import_react9.createElement)("span", { className: "badge ok" }, "\u5F53\u524D\u8D26\u53F7") : null,
-      loggedIn === false ? (0, import_react9.createElement)("span", { className: "badge warn" }, "\u672A\u767B\u5F55") : null,
-      (0, import_react9.createElement)("span", { className: "spacer" }),
-      active ? null : (0, import_react9.createElement)("button", { className: "ghost small", onClick: () => void wrap(onActivate) }, "\u8BBE\u4E3A\u5F53\u524D"),
-      (0, import_react9.createElement)(
+      active ? (0, import_react10.createElement)("span", { className: "badge ok" }, "\u5F53\u524D\u8D26\u53F7") : null,
+      loggedIn === false ? (0, import_react10.createElement)("span", { className: "badge warn" }, "\u672A\u767B\u5F55") : null,
+      (0, import_react10.createElement)("span", { className: "spacer" }),
+      active ? null : (0, import_react10.createElement)("button", { className: "ghost small", onClick: () => void wrap(onActivate) }, "\u8BBE\u4E3A\u5F53\u524D"),
+      (0, import_react10.createElement)(
         "button",
         {
           className: "ghost small",
@@ -2944,9 +3571,9 @@ function AccountRow({
         },
         checking ? "\u68C0\u67E5\u4E2D\u2026" : "\u68C0\u67E5\u8FDE\u63A5"
       ),
-      (0, import_react9.createElement)("button", { className: "ghost small", onClick: onToggleEdit }, editing ? "\u6536\u8D77" : "\u7F16\u8F91")
+      (0, import_react10.createElement)("button", { className: "ghost small", onClick: onToggleEdit }, editing ? "\u6536\u8D77" : "\u7F16\u8F91")
     ),
-    checkResult === "" ? null : (0, import_react9.createElement)(
+    checkResult === "" ? null : (0, import_react10.createElement)(
       "div",
       {
         className: "mailharbor-check",
@@ -2954,83 +3581,83 @@ function AccountRow({
       },
       checkResult
     ),
-    editing ? (0, import_react9.createElement)(
+    editing ? (0, import_react10.createElement)(
       "div",
       { style: { display: "flex", flexDirection: "column", gap: "10px" } },
-      (0, import_react9.createElement)(
+      (0, import_react10.createElement)(
         "div",
         { className: "mailharbor-grid" },
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)(
           Field,
           { label: "\u663E\u793A\u540D\u79F0" },
-          (0, import_react9.createElement)("input", {
+          (0, import_react10.createElement)("input", {
             value: label,
             onChange: (event) => setLabel(event.target.value)
           })
         ),
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)(
           Field,
           { label: "\u767B\u5F55\u7528\u6237\u540D" },
-          (0, import_react9.createElement)("input", {
+          (0, import_react10.createElement)("input", {
             value: username,
             onChange: (event) => setUsername(event.target.value)
           })
         )
       ),
-      (0, import_react9.createElement)(
+      (0, import_react10.createElement)(
         "div",
         { className: "mailharbor-grid three" },
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)(
           Field,
           { label: "IMAP \u4E3B\u673A" },
-          (0, import_react9.createElement)("input", {
+          (0, import_react10.createElement)("input", {
             value: imapHost,
             onChange: (event) => setImapHost(event.target.value)
           })
         ),
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)(
           Field,
           { label: "\u7AEF\u53E3" },
-          (0, import_react9.createElement)("input", {
+          (0, import_react10.createElement)("input", {
             value: imapPort,
             onChange: (event) => setImapPort(event.target.value)
           })
         ),
-        (0, import_react9.createElement)(Toggle, { checked: imapSecure, onChange: setImapSecure, label: "TLS" })
+        (0, import_react10.createElement)(Toggle, { checked: imapSecure, onChange: setImapSecure, label: "TLS" })
       ),
-      (0, import_react9.createElement)(
+      (0, import_react10.createElement)(
         "div",
         { className: "mailharbor-grid three" },
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)(
           Field,
           { label: "SMTP \u4E3B\u673A" },
-          (0, import_react9.createElement)("input", {
+          (0, import_react10.createElement)("input", {
             value: smtpHost,
             onChange: (event) => setSmtpHost(event.target.value)
           })
         ),
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)(
           Field,
           { label: "\u7AEF\u53E3" },
-          (0, import_react9.createElement)("input", {
+          (0, import_react10.createElement)("input", {
             value: smtpPort,
             onChange: (event) => setSmtpPort(event.target.value)
           })
         ),
-        (0, import_react9.createElement)(Toggle, { checked: smtpSecure, onChange: setSmtpSecure, label: "TLS" })
+        (0, import_react10.createElement)(Toggle, { checked: smtpSecure, onChange: setSmtpSecure, label: "TLS" })
       ),
-      (0, import_react9.createElement)(
+      (0, import_react10.createElement)(
         Field,
         { label: "\u53D1\u4EF6\u4EBA\u540D\u79F0" },
-        (0, import_react9.createElement)("input", {
+        (0, import_react10.createElement)("input", {
           value: fromName,
           onChange: (event) => setFromName(event.target.value)
         })
       ),
-      (0, import_react9.createElement)(
+      (0, import_react10.createElement)(
         "div",
         { style: { display: "flex", gap: "8px", alignItems: "center", flexWrap: "wrap" } },
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)(
           "button",
           {
             className: "primary small",
@@ -3046,7 +3673,7 @@ function AccountRow({
           },
           "\u4FDD\u5B58\u8D26\u53F7"
         ),
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)(
           "button",
           {
             className: "ghost small danger",
@@ -3055,21 +3682,90 @@ function AccountRow({
           "\u79FB\u9664\u8D26\u53F7"
         )
       ),
-      (0, import_react9.createElement)("hr", { style: { border: 0, borderTop: "1px solid var(--m-line)", width: "100%" } }),
-      (0, import_react9.createElement)(
+      (0, import_react10.createElement)("hr", { style: { border: 0, borderTop: "1px solid var(--m-line)", width: "100%" } }),
+      (0, import_react10.createElement)("h4", { style: { margin: 0, fontSize: "12.5px" } }, "CalDAV \u4EFB\u52A1\u540C\u6B65"),
+      (0, import_react10.createElement)(
+        "div",
+        { className: "mailharbor-grid" },
+        (0, import_react10.createElement)(
+          Field,
+          { label: "CalDAV \u5730\u5740" },
+          (0, import_react10.createElement)("input", {
+            value: caldavUrl,
+            placeholder: "https://caldav.example.com/",
+            onChange: (event) => setCaldavUrl(event.target.value)
+          })
+        ),
+        (0, import_react10.createElement)(
+          Field,
+          { label: "\u7528\u6237\u540D" },
+          (0, import_react10.createElement)("input", {
+            value: caldavUser,
+            onChange: (event) => setCaldavUser(event.target.value)
+          })
+        )
+      ),
+      (0, import_react10.createElement)(
+        "div",
+        { className: "mailharbor-grid" },
+        (0, import_react10.createElement)(
+          Field,
+          { label: "\u5E94\u7528\u5BC6\u7801\uFF08\u7559\u7A7A\u8868\u793A\u4E0D\u4FEE\u6539\uFF09" },
+          (0, import_react10.createElement)("input", {
+            type: "password",
+            value: caldavPassword,
+            onChange: (event) => setCaldavPassword(event.target.value)
+          })
+        ),
+        (0, import_react10.createElement)(
+          Field,
+          { label: "\u4EFB\u52A1\u65E5\u5386\u8DEF\u5F84\uFF08\u53EF\u9009\uFF09" },
+          (0, import_react10.createElement)("input", {
+            value: caldavHref,
+            placeholder: "\u81EA\u52A8\u53D1\u73B0",
+            onChange: (event) => setCaldavHref(event.target.value)
+          })
+        )
+      ),
+      (0, import_react10.createElement)(
+        "div",
+        { style: { display: "flex", gap: "8px", alignItems: "center" } },
+        (0, import_react10.createElement)(
+          "button",
+          {
+            className: "ghost small",
+            onClick: () => {
+              setCaldavStatus("\u4FDD\u5B58\u4E2D\u2026");
+              void api.saveTaskCaldav({
+                accountId: account.id,
+                url: caldavUrl,
+                username: caldavUser,
+                ...caldavPassword === "" ? {} : { password: caldavPassword },
+                calendarHref: caldavHref
+              }).then((info) => {
+                setCaldavStatus(info.hasPassword ? "\u5DF2\u4FDD\u5B58" : "\u672A\u4FDD\u5B58\u5BC6\u7801");
+                setCaldavPassword("");
+              }).catch((caught) => setCaldavStatus(errorText6(caught)));
+            }
+          },
+          "\u4FDD\u5B58 CalDAV"
+        ),
+        (0, import_react10.createElement)("span", { className: "small muted" }, caldavStatus)
+      ),
+      (0, import_react10.createElement)(
         Field,
         { label: "\u5BC6\u7801 / \u5E94\u7528\u4E13\u7528\u5BC6\u7801\uFF08\u4E0D\u5199\u5165\u914D\u7F6E\u6587\u4EF6\uFF09" },
-        (0, import_react9.createElement)("input", {
+        (0, import_react10.createElement)("input", {
           type: "password",
           value: password,
           onChange: (event) => setPassword(event.target.value)
         })
       ),
-      (0, import_react9.createElement)(
+      (0, import_react10.createElement)(
         "div",
         { style: { display: "flex", gap: "8px", alignItems: "center" } },
-        (0, import_react9.createElement)(Toggle, { checked: remember, onChange: setRemember, label: "\u8BB0\u4F4F\u5BC6\u7801" }),
-        (0, import_react9.createElement)(
+        (0, import_react10.createElement)(Toggle, { checked: remember, onChange: setRemember, label: "\u8BB0\u4F4F\u5BC6\u7801" }),
+        (0, import_react10.createElement)(
           "button",
           {
             className: "primary small",
@@ -3081,16 +3777,588 @@ function AccountRow({
           },
           "\u767B\u5F55"
         ),
-        (0, import_react9.createElement)("button", { className: "ghost small", onClick: () => void wrap(onLogout) }, "\u9000\u51FA\u767B\u5F55")
+        (0, import_react10.createElement)("button", { className: "ghost small", onClick: () => void wrap(onLogout) }, "\u9000\u51FA\u767B\u5F55")
       )
     ) : null
   );
 }
 
+// src/client/tasks-panel.tsx
+var import_react11 = require("react");
+var FILTERS = [
+  { id: "open", label: "\u5F85\u529E" },
+  { id: "today", label: "\u4ECA\u5929" },
+  { id: "week", label: "\u672C\u5468" },
+  { id: "overdue", label: "\u903E\u671F" },
+  { id: "done", label: "\u5DF2\u5B8C\u6210" },
+  { id: "all", label: "\u5168\u90E8" }
+];
+var STATUS_LABEL = {
+  "NEEDS-ACTION": "\u5F85\u5904\u7406",
+  "IN-PROCESS": "\u8FDB\u884C\u4E2D",
+  COMPLETED: "\u5DF2\u5B8C\u6210",
+  CANCELLED: "\u5DF2\u53D6\u6D88"
+};
+function errorText7(error) {
+  return error instanceof ApiError || error instanceof Error ? error.message : String(error);
+}
+function dateKey(value) {
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${String(value.getFullYear())}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
+}
+function weekEnd() {
+  const now = /* @__PURE__ */ new Date();
+  const end = new Date(now);
+  end.setDate(now.getDate() + (7 - (now.getDay() + 6) % 7));
+  return dateKey(end);
+}
+function dueText(due) {
+  if (due === "") return "";
+  const today = dateKey(/* @__PURE__ */ new Date());
+  if (due.slice(0, 10) < today) return `\u903E\u671F ${due.slice(0, 10)}`;
+  return due.slice(0, 10);
+}
+var EMPTY_TASK = {
+  title: "",
+  notes: "",
+  due: "",
+  priority: 0,
+  status: "NEEDS-ACTION",
+  owner: "",
+  projectId: ""
+};
+function TasksIcon() {
+  const [count, setCount] = (0, import_react11.useState)(0);
+  (0, import_react11.useEffect)(() => {
+    let cancelled = false;
+    const load = async () => {
+      try {
+        const app = await api.state();
+        const accountId = app.settings.activeAccountId;
+        if (accountId === null) return;
+        const result = await api.tasks(accountId);
+        if (!cancelled) {
+          setCount(
+            result.items.filter((task) => task.status !== "COMPLETED" && task.status !== "CANCELLED").length
+          );
+        }
+      } catch {
+      }
+    };
+    void load();
+    const timer = window.setInterval(() => {
+      void load();
+    }, 6e4);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+  }, []);
+  return (0, import_react11.createElement)(
+    "span",
+    {
+      style: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "18px",
+        height: "18px"
+      }
+    },
+    (0, import_react11.createElement)(Icon, { name: "checklist", size: 16 }),
+    count > 0 ? (0, import_react11.createElement)(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          right: "-5px",
+          bottom: "-3px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxSizing: "border-box",
+          minWidth: "13px",
+          height: "13px",
+          padding: "0 3px",
+          borderRadius: "999px",
+          background: "#5686fe",
+          color: "#fff",
+          fontSize: "9px",
+          fontWeight: 600,
+          lineHeight: "13px",
+          boxShadow: "0 0 0 2px var(--dsw-alias-bg-base, #151517)",
+          pointerEvents: "none"
+        }
+      },
+      count > 99 ? "99+" : String(count)
+    ) : null
+  );
+}
+function TasksPanel() {
+  const [state, setState] = (0, import_react11.useState)(null);
+  const [tasks, setTasks] = (0, import_react11.useState)([]);
+  const [projects, setProjects] = (0, import_react11.useState)([]);
+  const [calendar, setCalendar] = (0, import_react11.useState)(null);
+  const [filter, setFilter] = (0, import_react11.useState)("open");
+  const [error, setError] = (0, import_react11.useState)("");
+  const [toast, setToast] = (0, import_react11.useState)("");
+  const [busy, setBusy] = (0, import_react11.useState)(false);
+  const [editing, setEditing] = (0, import_react11.useState)(null);
+  const [creating, setCreating] = (0, import_react11.useState)(false);
+  const [tick, setTick] = (0, import_react11.useState)(0);
+  const accountId = state?.settings.activeAccountId ?? null;
+  (0, import_react11.useEffect)(() => {
+    api.state().then(setState).catch((caught) => setError(errorText7(caught)));
+  }, [tick]);
+  (0, import_react11.useEffect)(() => {
+    if (accountId === null) return;
+    let cancelled = false;
+    Promise.all([api.tasks(accountId), api.projects()]).then(([list, projectList]) => {
+      if (cancelled) return;
+      setTasks(list.items);
+      setCalendar(list.calendar);
+      setProjects(projectList.items);
+    }).catch((caught) => {
+      if (!cancelled) setError(errorText7(caught));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [accountId, tick]);
+  const refresh = (0, import_react11.useCallback)(() => {
+    setTick((value) => value + 1);
+  }, []);
+  const notify = (message) => {
+    setToast(message);
+    window.setTimeout(() => {
+      setToast("");
+    }, 3e3);
+  };
+  const visible = (0, import_react11.useMemo)(() => {
+    const today = dateKey(/* @__PURE__ */ new Date());
+    const end = weekEnd();
+    return tasks.filter((task) => {
+      const done2 = task.status === "COMPLETED" || task.status === "CANCELLED";
+      if (filter === "done") return done2;
+      if (done2) return false;
+      if (filter === "all") return true;
+      if (filter === "overdue") return task.due !== "" && task.due.slice(0, 10) < today;
+      if (filter === "today") return task.due.slice(0, 10) === today;
+      if (filter === "week") return task.due !== "" && task.due.slice(0, 10) <= end;
+      return true;
+    });
+  }, [tasks, filter]);
+  const open = tasks.filter((task) => task.status !== "COMPLETED" && task.status !== "CANCELLED");
+  const done = tasks.length - open.length;
+  const progress = tasks.length === 0 ? 0 : Math.round(done / tasks.length * 100);
+  const byProject = (0, import_react11.useMemo)(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const task of tasks) {
+      const key = task.projectId ?? "";
+      const group = groups.get(key) ?? {
+        project: projects.find((project) => project.id === key) ?? null,
+        total: 0,
+        done: 0
+      };
+      group.total += 1;
+      if (task.status === "COMPLETED" || task.status === "CANCELLED") group.done += 1;
+      groups.set(key, group);
+    }
+    return [...groups.values()].filter((group) => group.project !== null);
+  }, [tasks, projects]);
+  const switchAccount = async (id) => {
+    try {
+      await api.activateAccount(id);
+      refresh();
+    } catch (caught) {
+      setError(errorText7(caught));
+    }
+  };
+  const toggle = async (task) => {
+    try {
+      const next = task.status === "COMPLETED" ? "NEEDS-ACTION" : "COMPLETED";
+      const { task: updated } = await api.updateTask(task.id, { status: next });
+      setTasks((current) => current.map((item) => item.id === task.id ? updated : item));
+    } catch (caught) {
+      setError(errorText7(caught));
+    }
+  };
+  const remove = async (task) => {
+    try {
+      await api.deleteTask(task.id);
+      setTasks((current) => current.filter((item) => item.id !== task.id));
+    } catch (caught) {
+      setError(errorText7(caught));
+    }
+  };
+  const openSource = async (task) => {
+    if (task.messageKey === "") return;
+    try {
+      const found = await api.lookupMessage(task.accountId, task.messageKey);
+      requestOpenMail({ accountId: task.accountId, id: found.id, mailbox: found.mailbox });
+      document.querySelector('button[aria-label="MailHarbor"]')?.click();
+    } catch (caught) {
+      setError(errorText7(caught));
+    }
+  };
+  const sync = async () => {
+    if (accountId === null) return;
+    setBusy(true);
+    setError("");
+    try {
+      const result = await api.syncTasks(accountId);
+      notify(`\u5DF2\u540C\u6B65\uFF1A\u62C9\u53D6 ${String(result.result.pulled)}\uFF0C\u63A8\u9001 ${String(result.result.pushed)}`);
+      refresh();
+    } catch (caught) {
+      setError(errorText7(caught));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const save = async (draft) => {
+    setBusy(true);
+    setError("");
+    try {
+      if (draft.id === void 0) {
+        await api.createTask({
+          accountId,
+          title: draft.title,
+          notes: draft.notes,
+          due: draft.due,
+          priority: draft.priority,
+          status: draft.status,
+          owner: draft.owner,
+          projectId: draft.projectId === "" ? null : draft.projectId
+        });
+      } else {
+        await api.updateTask(draft.id, {
+          title: draft.title,
+          notes: draft.notes,
+          due: draft.due,
+          priority: draft.priority,
+          status: draft.status,
+          owner: draft.owner,
+          projectId: draft.projectId === "" ? null : draft.projectId
+        });
+      }
+      setEditing(null);
+      setCreating(false);
+      refresh();
+    } catch (caught) {
+      setError(errorText7(caught));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (0, import_react11.createElement)(
+    "div",
+    { className: "mailharbor" },
+    (0, import_react11.createElement)(
+      "div",
+      { className: "mailharbor-topbar" },
+      (0, import_react11.createElement)(Icon, { name: "checklist", size: 16 }),
+      (0, import_react11.createElement)("strong", { style: { fontSize: "13px" } }, "\u4EFB\u52A1"),
+      state === null || state.accounts.length < 2 ? null : (0, import_react11.createElement)(
+        "select",
+        {
+          value: accountId ?? "",
+          onChange: (event) => void switchAccount(event.target.value),
+          "aria-label": "\u8D26\u53F7"
+        },
+        state.accounts.map(
+          (account) => (0, import_react11.createElement)("option", { key: account.id, value: account.id }, account.label)
+        )
+      ),
+      (0, import_react11.createElement)("span", { className: "spacer" }),
+      calendar === null ? null : (0, import_react11.createElement)(
+        "span",
+        { className: "small muted" },
+        calendar.lastSync === "" ? "\u672A\u540C\u6B65" : `\u540C\u6B65\u4E8E ${new Date(calendar.lastSync).toLocaleString()}`
+      ),
+      (0, import_react11.createElement)(
+        "button",
+        { className: "ghost", onClick: () => void sync(), disabled: busy },
+        busy ? "\u540C\u6B65\u4E2D\u2026" : "\u540C\u6B65 CalDAV"
+      ),
+      (0, import_react11.createElement)(
+        "button",
+        { className: "primary", onClick: () => setCreating(true) },
+        (0, import_react11.createElement)(Icon, { name: "plus" }),
+        "\u65B0\u5EFA\u4EFB\u52A1"
+      )
+    ),
+    toast === "" ? null : (0, import_react11.createElement)("div", { className: "small", style: { padding: "6px 14px", color: "var(--m-ok)" } }, toast),
+    error === "" ? null : (0, import_react11.createElement)(ErrorBar, { message: error, onDismiss: () => setError("") }),
+    (0, import_react11.createElement)(
+      "div",
+      { className: "tasks-body" },
+      (0, import_react11.createElement)(
+        "div",
+        { className: "tasks-overview" },
+        (0, import_react11.createElement)(
+          "div",
+          { className: "tasks-progress" },
+          (0, import_react11.createElement)(
+            "div",
+            { className: "tasks-progress-head" },
+            (0, import_react11.createElement)("strong", null, "\u603B\u4F53\u8FDB\u5EA6"),
+            (0, import_react11.createElement)(
+              "span",
+              { className: "muted small" },
+              `${String(done)} / ${String(tasks.length)} \xB7 ${String(progress)}%`
+            )
+          ),
+          (0, import_react11.createElement)("div", { className: "tasks-bar" }, (0, import_react11.createElement)("span", { style: { width: `${String(progress)}%` } })),
+          (0, import_react11.createElement)("div", { className: "small muted" }, `\u5F85\u529E ${String(open.length)} \u6761`)
+        ),
+        ...byProject.map(
+          (group) => (0, import_react11.createElement)(
+            "div",
+            { key: group.project?.id ?? "none", className: "tasks-project" },
+            (0, import_react11.createElement)(
+              "div",
+              { className: "tasks-project-head" },
+              (0, import_react11.createElement)("span", { className: "name" }, group.project?.name ?? ""),
+              (0, import_react11.createElement)("span", { className: "muted small" }, `${String(group.done)}/${String(group.total)}`)
+            ),
+            (0, import_react11.createElement)(
+              "div",
+              { className: "tasks-bar small" },
+              (0, import_react11.createElement)("span", {
+                style: {
+                  width: `${String(group.total === 0 ? 0 : Math.round(group.done / group.total * 100))}%`
+                }
+              })
+            )
+          )
+        )
+      ),
+      (0, import_react11.createElement)(
+        "div",
+        { className: "tasks-list-wrap" },
+        (0, import_react11.createElement)(
+          "div",
+          { className: "tasks-filters" },
+          FILTERS.map(
+            (item) => (0, import_react11.createElement)(
+              "button",
+              {
+                key: item.id,
+                className: filter === item.id ? "chip active" : "chip",
+                onClick: () => setFilter(item.id)
+              },
+              item.label
+            )
+          )
+        ),
+        visible.length === 0 ? (0, import_react11.createElement)(
+          "div",
+          { className: "mailharbor-empty" },
+          (0, import_react11.createElement)(Icon, { name: "checklist", size: 28 }),
+          (0, import_react11.createElement)("div", { className: "title" }, "\u6CA1\u6709\u4EFB\u52A1"),
+          (0, import_react11.createElement)("div", { className: "small" }, "\u53EF\u4EE5\u5728\u8FD9\u91CC\u65B0\u5EFA\uFF0C\u6216\u5728\u90AE\u4EF6\u91CC\u7528\u300C\u63D0\u53D6\u4EFB\u52A1\u300D\u3002")
+        ) : (0, import_react11.createElement)(
+          "div",
+          { className: "tasks-list" },
+          visible.map(
+            (task) => (0, import_react11.createElement)(
+              "div",
+              { key: task.id, className: `tasks-row${task.status === "COMPLETED" ? " done" : ""}` },
+              (0, import_react11.createElement)("input", {
+                type: "checkbox",
+                checked: task.status === "COMPLETED",
+                "aria-label": "\u5B8C\u6210\u4EFB\u52A1",
+                onChange: () => void toggle(task)
+              }),
+              (0, import_react11.createElement)(
+                "button",
+                { className: "tasks-title", onClick: () => setEditing(task) },
+                (0, import_react11.createElement)("span", null, task.title),
+                (0, import_react11.createElement)(
+                  "span",
+                  { className: "tasks-meta" },
+                  task.due === "" ? null : (0, import_react11.createElement)(
+                    "span",
+                    {
+                      className: task.due.slice(0, 10) < dateKey(/* @__PURE__ */ new Date()) ? "due overdue" : "due"
+                    },
+                    dueText(task.due)
+                  ),
+                  task.owner === "" ? null : (0, import_react11.createElement)("span", null, task.owner),
+                  (0, import_react11.createElement)("span", { className: "badge" }, STATUS_LABEL[task.status] ?? task.status),
+                  task.projectId === null ? null : (0, import_react11.createElement)(
+                    "span",
+                    { className: "badge" },
+                    projects.find((project) => project.id === task.projectId)?.name ?? "\u9879\u76EE"
+                  )
+                )
+              ),
+              task.messageKey === "" ? null : (0, import_react11.createElement)(
+                "button",
+                {
+                  className: "subtle small",
+                  title: "\u6253\u5F00\u6765\u6E90\u90AE\u4EF6",
+                  onClick: () => void openSource(task)
+                },
+                "\u6765\u6E90"
+              ),
+              (0, import_react11.createElement)(
+                "button",
+                { className: "subtle icon", title: "\u5220\u9664", onClick: () => void remove(task) },
+                (0, import_react11.createElement)(Icon, { name: "trash", size: 13 })
+              )
+            )
+          )
+        )
+      )
+    ),
+    creating || editing !== null ? (0, import_react11.createElement)(TaskEditor, {
+      task: editing,
+      projects,
+      busy,
+      onClose: () => {
+        setCreating(false);
+        setEditing(null);
+      },
+      onSave: (draft) => void save(draft)
+    }) : null
+  );
+}
+function TaskEditor({
+  task,
+  projects,
+  busy,
+  onClose,
+  onSave
+}) {
+  const [draft, setDraft] = (0, import_react11.useState)({
+    ...EMPTY_TASK,
+    ...task === null ? {} : {
+      id: task.id,
+      title: task.title,
+      notes: task.notes,
+      due: task.due.slice(0, 10),
+      priority: task.priority,
+      status: task.status,
+      owner: task.owner,
+      projectId: task.projectId ?? ""
+    }
+  });
+  const set = (patch) => setDraft((current) => ({ ...current, ...patch }));
+  return (0, import_react11.createElement)(
+    Modal,
+    {
+      title: task === null ? "\u65B0\u5EFA\u4EFB\u52A1" : "\u7F16\u8F91\u4EFB\u52A1",
+      onClose,
+      footer: (0, import_react11.createElement)(
+        "div",
+        { style: { display: "flex", gap: "8px", width: "100%", justifyContent: "flex-end" } },
+        (0, import_react11.createElement)("button", { className: "ghost", onClick: onClose }, "\u53D6\u6D88"),
+        (0, import_react11.createElement)(
+          "button",
+          { className: "primary", disabled: busy || draft.title.trim() === "", onClick: () => onSave(draft) },
+          busy ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58"
+        )
+      )
+    },
+    (0, import_react11.createElement)(
+      "div",
+      { className: "mailharbor-field" },
+      (0, import_react11.createElement)("label", null, "\u6807\u9898"),
+      (0, import_react11.createElement)("input", {
+        value: draft.title,
+        autoFocus: true,
+        onChange: (event) => set({ title: event.target.value })
+      })
+    ),
+    (0, import_react11.createElement)(
+      "div",
+      { className: "mailharbor-field" },
+      (0, import_react11.createElement)("label", null, "\u5907\u6CE8"),
+      (0, import_react11.createElement)("textarea", {
+        rows: 3,
+        value: draft.notes,
+        onChange: (event) => set({ notes: event.target.value })
+      })
+    ),
+    (0, import_react11.createElement)(
+      "div",
+      { className: "mailharbor-grid" },
+      (0, import_react11.createElement)(
+        "div",
+        { className: "mailharbor-field" },
+        (0, import_react11.createElement)("label", null, "\u622A\u6B62\u65E5\u671F"),
+        (0, import_react11.createElement)("input", {
+          type: "date",
+          value: draft.due,
+          onChange: (event) => set({ due: event.target.value })
+        })
+      ),
+      (0, import_react11.createElement)(
+        "div",
+        { className: "mailharbor-field" },
+        (0, import_react11.createElement)("label", null, "\u4F18\u5148\u7EA7"),
+        (0, import_react11.createElement)(
+          "select",
+          {
+            value: String(draft.priority),
+            onChange: (event) => set({ priority: Number(event.target.value) })
+          },
+          (0, import_react11.createElement)("option", { value: "0" }, "\u65E0"),
+          (0, import_react11.createElement)("option", { value: "5" }, "\u4E2D"),
+          (0, import_react11.createElement)("option", { value: "9" }, "\u9AD8")
+        )
+      )
+    ),
+    (0, import_react11.createElement)(
+      "div",
+      { className: "mailharbor-grid" },
+      (0, import_react11.createElement)(
+        "div",
+        { className: "mailharbor-field" },
+        (0, import_react11.createElement)("label", null, "\u72B6\u6001"),
+        (0, import_react11.createElement)(
+          "select",
+          {
+            value: draft.status,
+            onChange: (event) => set({ status: event.target.value })
+          },
+          Object.entries(STATUS_LABEL).map(([value, label]) => (0, import_react11.createElement)("option", { key: value, value }, label))
+        )
+      ),
+      (0, import_react11.createElement)(
+        "div",
+        { className: "mailharbor-field" },
+        (0, import_react11.createElement)("label", null, "\u9879\u76EE"),
+        (0, import_react11.createElement)(
+          "select",
+          {
+            value: draft.projectId,
+            onChange: (event) => set({ projectId: event.target.value })
+          },
+          (0, import_react11.createElement)("option", { value: "" }, "\u65E0\u9879\u76EE"),
+          projects.map((project) => (0, import_react11.createElement)("option", { key: project.id, value: project.id }, project.name))
+        )
+      )
+    ),
+    (0, import_react11.createElement)(
+      "div",
+      { className: "mailharbor-field" },
+      (0, import_react11.createElement)("label", null, "\u8D1F\u8D23\u4EBA"),
+      (0, import_react11.createElement)("input", {
+        value: draft.owner,
+        onChange: (event) => set({ owner: event.target.value })
+      })
+    )
+  );
+}
+
 // src/client/index.tsx
-var VERSION = "0.4.1";
+var VERSION = "0.5.0";
 var inject = ["slots"];
 var PANEL_ID = "mailharbor";
+var TASKS_PANEL_ID = "mailharbor-tasks";
 var STYLE_ID = "mailharbor-style";
 function ensureStyles() {
   if (document.getElementById(STYLE_ID) !== null) return;
@@ -3126,6 +4394,19 @@ function apply(ctx) {
       MailIcon
     )
   );
+  ctx.slots.inject("main", () => ctx.slots.register({ name: "main", key: TASKS_PANEL_ID }, TasksPanel));
+  ctx.slots.inject(
+    "sidebar.panellist",
+    () => ctx.slots.register(
+      {
+        name: "sidebar.panellist",
+        id: TASKS_PANEL_ID,
+        order: 21,
+        label: "\u4EFB\u52A1"
+      },
+      TasksIcon
+    )
+  );
 }
 
     return module.exports;