@zaclinley/dsh-mailharbor 0.5.1 → 0.7.0

package/lib/client.js

@@ -35,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  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";
+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\n/* ---------- conversation rows ---------- */\n\n.mailharbor-thread {\n  display: flex;\n  flex-direction: column;\n}\n\n.mailharbor-row.compact {\n  padding-top: 6px;\n  padding-bottom: 6px;\n  padding-left: 34px;\n  background: var(--m-bg);\n}\n\n.mailharbor-row.compact .line-1 {\n  opacity: 0.85;\n}\n\n.mailharbor-row.compact .snippet {\n  -webkit-line-clamp: 1;\n}\n\n.mailharbor .to-label {\n  font-size: 10.5px;\n  color: var(--m-text-3);\n  flex: none;\n}\n\n.mailharbor .thread-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 999px;\n  background: var(--m-bg-3);\n  color: var(--m-text-2);\n  font-size: 10.5px;\n  flex: none;\n}\n\n.mailharbor .thread-count:hover {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\n}\n\n.mailharbor-account {\n  height: auto;\n  padding: 3px 8px 3px 3px;\n  border-radius: 8px;\n  gap: 8px;\n}\n\n.mailharbor-account:hover {\n  background: var(--m-hover);\n}\n\n/* ---------- mailbox sidebar ---------- */\n\n.mailharbor-side {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  width: 214px;\n  flex: none;\n  padding: 10px 8px;\n  overflow: auto;\n  border-right: 1px solid var(--m-line-soft);\n  background: var(--m-bg);\n}\n\n.mailharbor-side-section {\n  padding: 12px 8px 4px;\n  font-size: 10.5px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--m-text-3);\n}\n\n.mailharbor-side-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 32px;\n  padding: 0 8px;\n  border-radius: 8px;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  text-align: left;\n  flex: none;\n}\n\n.mailharbor-side-item:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-side-item.active {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\n}\n\n.mailharbor-side-item .name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-side-item .sub {\n  display: block;\n  font-size: 10.5px;\n  color: var(--m-text-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mailharbor-side-item .count {\n  font-size: 11px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-side-item svg {\n  flex: none;\n  color: var(--m-text-3);\n}\n\n.mailharbor-side-item.active svg {\n  color: var(--m-accent);\n}\n\n@media (max-width: 900px) {\n  .mailharbor-side {\n    display: none;\n  }\n}\n\n/* ---------- task board ---------- */\n\n.tasks-board-wrap {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding: 16px 18px 40px;\n}\n\n.tasks-summary {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 14px 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n}\n\n.tasks-summary-main {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n}\n\n.tasks-summary-labels {\n  display: flex;\n  align-items: baseline;\n  gap: 10px;\n}\n\n.tasks-stats {\n  display: flex;\n  gap: 18px;\n}\n\n.tasks-stat {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 42px;\n}\n\n.tasks-stat strong {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--m-text);\n}\n\n.tasks-stat span {\n  font-size: 11px;\n  color: var(--m-text-3);\n}\n\n.tasks-stat.danger strong {\n  color: var(--m-danger);\n}\n\n.tasks-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.tasks-board {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 14px;\n  align-items: start;\n}\n\n.task-column {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-height: 140px;\n  padding: 8px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n}\n\n.task-column-head {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 2px 4px 6px;\n}\n\n.task-column-head strong {\n  font-size: 12.5px;\n  font-weight: 600;\n}\n\n.task-column-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 999px;\n  background: var(--m-bg-3);\n  color: var(--m-text-3);\n  font-size: 10.5px;\n}\n\n.task-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 999px;\n  background: var(--m-text-3);\n}\n\n.task-dot.NEEDS-ACTION {\n  background: #8a8f98;\n}\n\n.task-dot.IN-PROCESS {\n  background: var(--m-accent);\n}\n\n.task-dot.COMPLETED {\n  background: var(--m-ok);\n}\n\n.task-dot.CANCELLED {\n  background: var(--m-danger);\n  opacity: 0.7;\n}\n\n.task-column-body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-height: 60px;\n}\n\n.task-column-empty {\n  padding: 18px 8px;\n  text-align: center;\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  border: 1px dashed var(--m-line-soft);\n  border-radius: 9px;\n}\n\n.task-card {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 11px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg);\n  cursor: grab;\n  transition:\n    border-color 120ms ease,\n    box-shadow 120ms ease;\n}\n\n.task-card:hover {\n  border-color: var(--m-line);\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);\n}\n\n.task-card.dragging {\n  opacity: 0.5;\n}\n\n.task-card-top {\n  display: flex;\n  align-items: flex-start;\n  gap: 7px;\n}\n\n.task-card-title {\n  flex: 1;\n  min-width: 0;\n  font-size: 12.5px;\n  line-height: 1.45;\n  color: var(--m-text);\n  overflow-wrap: anywhere;\n}\n\n.task-priority {\n  width: 3px;\n  height: 14px;\n  margin-top: 2px;\n  border-radius: 999px;\n  background: transparent;\n  flex: none;\n}\n\n.task-priority.p5 {\n  background: #d9a441;\n}\n\n.task-priority.p9 {\n  background: var(--m-danger);\n}\n\n.task-card-delete {\n  width: 18px;\n  height: 18px;\n  flex: none;\n  border-radius: 5px;\n  color: var(--m-text-3);\n  opacity: 0;\n}\n\n.task-card:hover .task-card-delete {\n  opacity: 1;\n}\n\n.task-card-notes {\n  margin: 0;\n  font-size: 11.5px;\n  line-height: 1.55;\n  color: var(--m-text-3);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.task-card-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  font-size: 10.5px;\n  color: var(--m-text-3);\n}\n\n.task-due,\n.task-owner,\n.task-project,\n.task-priority-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 6px;\n  border-radius: 5px;\n  background: var(--m-bg-2);\n}\n\n.task-due.overdue {\n  color: var(--m-danger);\n  background: rgba(242, 90, 90, 0.12);\n}\n\n.task-project {\n  color: var(--m-accent);\n  background: var(--m-accent-soft);\n}\n\n.task-source {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  height: 22px;\n  padding: 0 6px;\n  border-radius: 5px;\n  color: var(--m-text-3);\n  font-size: 10.5px;\n}\n\n.task-source:hover {\n  background: var(--m-hover);\n  color: var(--m-text-2);\n}\n\n@media (max-width: 1180px) {\n  .tasks-board {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 720px) {\n  .tasks-board {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n\n/* ---------- AI search ---------- */\n\n.mailharbor-ai-search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 12px 8px;\n  padding: 7px 10px;\n  border-radius: 8px;\n  background: var(--m-accent-soft);\n  color: var(--m-text-2);\n  font-size: 12px;\n}\n\n.mailharbor-ai-search.searching {\n  background: var(--m-bg-2);\n  color: var(--m-text-3);\n}\n\n/* ---------- task editor ---------- */\n\n.mailharbor-tasks .mailharbor-modal {\n  max-width: 760px;\n}\n\n.task-editor {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 230px;\n  gap: 18px;\n}\n\n.task-editor-main {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  min-width: 0;\n}\n\n.task-editor-title input {\n  width: 100%;\n  height: 38px;\n  font-size: 15px;\n  font-weight: 500;\n}\n\n.task-editor-section {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.task-editor-section label,\n.task-editor-field label {\n  font-size: 11px;\n  color: var(--m-text-3);\n}\n\n.task-editor-section textarea {\n  width: 100%;\n  resize: vertical;\n}\n\n.task-editor-side {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n  align-self: start;\n}\n\n.task-editor-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  min-width: 0;\n}\n\n.task-editor-field input,\n.task-editor-field select {\n  width: 100%;\n}\n\n.task-priority-picker {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 4px;\n  padding: 3px;\n  border: 1px solid var(--m-line);\n  border-radius: 8px;\n  background: var(--m-bg);\n}\n\n.task-priority-picker button {\n  height: 26px;\n  border-radius: 6px;\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.task-priority-picker button.active {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\n}\n\n.task-editor-foot {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n}\n";
 
 // src/client/icon.tsx
 var import_react = require("react");
@@ -126,6 +126,10 @@ var api = {
   check: (id) => request(`accounts/${encodeURIComponent(id)}/check`, { method: "POST" }),
   aiStatus: (accountId) => request(`ai/status${query({ accountId: accountId ?? null })}`),
   aiModels: () => request("ai/models"),
+  aiSearch: (payload) => request("ai/search", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  }),
   aiThread: (accountId, key) => request(`ai/thread${query({ accountId: accountId ?? null, key })}`),
   aiAddCard: (payload) => request("ai/cards", {
     method: "POST",
@@ -182,6 +186,7 @@ var api = {
   }),
   syncTasks: (accountId) => request("tasks/sync", { method: "POST", body: JSON.stringify({ accountId }) }),
   projects: () => request("projects"),
+  pickDirectory: () => request("projects/pick-directory", { method: "POST" }),
   projectFor: (accountId, key) => request(`projects/for${query({ accountId: accountId ?? null, key })}`),
   createProject: (payload) => request("projects", {
     method: "POST",
@@ -499,6 +504,12 @@ var PATHS = {
   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"
   }),
+  calendar: (0, import_react3.createElement)(
+    "g",
+    null,
+    (0, import_react3.createElement)("rect", { x: 3.5, y: 5, width: 17, height: 15.5, rx: 2 }),
+    (0, import_react3.createElement)("path", { d: "M3.5 9.5h17M8 3.5v3M16 3.5v3" })
+  ),
   checklist: (0, import_react3.createElement)(
     "g",
     null,
@@ -1096,10 +1107,28 @@ ${card.output}`
           "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)(
+            "div",
+            { style: { display: "flex", gap: "6px" } },
+            (0, import_react5.createElement)("input", {
+              value: projectRoot,
+              onChange: (event) => setProjectRoot(event.target.value)
+            }),
+            (0, import_react5.createElement)(
+              "button",
+              {
+                className: "ghost",
+                title: "\u4ECE\u6587\u4EF6\u7BA1\u7406\u5668\u9009\u62E9",
+                onClick: () => {
+                  void api.pickDirectory().then((result) => {
+                    if (result.path !== null) setProjectRoot(result.path);
+                  }).catch((caught) => setProjectWarnings([errorText(caught)]));
+                }
+              },
+              (0, import_react5.createElement)(Icon, { name: "folder", size: 13 }),
+              "\u6D4F\u89C8\u2026"
+            )
+          )
         ),
         (0, import_react5.createElement)(
           "p",
@@ -2080,6 +2109,43 @@ function consumeOpenMail() {
 // src/client/panel.tsx
 var EMPTY_PAGE = { items: [], total: 0, offset: 0, limit: 40 };
 var DRAFTS = "__drafts";
+var folderCache = /* @__PURE__ */ new Map();
+var pageCache = /* @__PURE__ */ new Map();
+var FOLDER_LABELS = {
+  INBOX: "\u6536\u4EF6\u7BB1",
+  "Sent Items": "\u5DF2\u53D1\u9001",
+  Sent: "\u5DF2\u53D1\u9001",
+  Drafts: "\u8349\u7A3F",
+  "Junk E-mail": "\u5783\u573E\u90AE\u4EF6",
+  Junk: "\u5783\u573E\u90AE\u4EF6",
+  Trash: "\u5DF2\u5220\u9664",
+  Deleted: "\u5DF2\u5220\u9664",
+  Archive: "\u5B58\u6863"
+};
+function folderName(name) {
+  return FOLDER_LABELS[name] ?? name;
+}
+function isSentFolder(mailbox) {
+  return /(^|[/.])(sent|sent items|sent mail|已发送|发件箱)/i.test(mailbox);
+}
+function normalizeSubject(subject) {
+  return subject.replace(/^(\s*(re|fw|fwd|回复|转发)\s*[:：]\s*)+/gi, "").replace(/\s+/g, " ").trim().toLowerCase();
+}
+function groupMessages(items) {
+  const map = /* @__PURE__ */ new Map();
+  const order = [];
+  for (const item of items) {
+    const key = normalizeSubject(item.subject) === "" ? `__${item.accountId}:${item.id}` : normalizeSubject(item.subject);
+    const existing = map.get(key);
+    if (existing === void 0) {
+      map.set(key, [item]);
+      order.push(key);
+    } else {
+      existing.push(item);
+    }
+  }
+  return order.map((key) => ({ key, items: map.get(key) ?? [] }));
+}
 function errorText5(error) {
   return error instanceof ApiError || error instanceof Error ? error.message : String(error);
 }
@@ -2094,7 +2160,7 @@ function MailPanel() {
   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 [source, setSource] = (0, import_react9.useState)("server");
   const [mailbox, setMailbox] = (0, import_react9.useState)("all");
   const [folders, setFolders] = (0, import_react9.useState)([]);
   const [query2, setQuery] = (0, import_react9.useState)("");
@@ -2112,11 +2178,21 @@ function MailPanel() {
   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 [sideOpen, setSideOpen] = (0, import_react9.useState)(() => {
+    try {
+      return window.localStorage.getItem("mailharbor.side") !== "0";
+    } catch {
+      return true;
+    }
+  });
+  const [expandedGroups, setExpandedGroups] = (0, import_react9.useState)([]);
   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 [aiInfo, setAiInfo] = (0, import_react9.useState)(null);
+  const [aiSearching, setAiSearching] = (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 ?? [];
@@ -2161,6 +2237,44 @@ function MailPanel() {
       setError(errorText5(caught));
     }
   };
+  const runAiSearch = async () => {
+    const text = query2.trim();
+    if (text === "" || accountScope === null) return;
+    setAiSearching(true);
+    setError("");
+    try {
+      const result = await Promise.race([
+        api.aiSearch({ accountId: accountScope, source, mailbox, query: text }),
+        new Promise((_resolve, reject) => {
+          window.setTimeout(() => reject(new Error("AI \u641C\u7D22\u8D85\u65F6\uFF0C\u5DF2\u6539\u7528\u666E\u901A\u641C\u7D22")), 45e3);
+        })
+      ]);
+      setPage({ items: result.items, total: result.total, offset: 0, limit: result.limit });
+      setDrafts([]);
+      setAiInfo(result.ai);
+      setSearch("");
+    } catch (caught) {
+      setError(errorText5(caught));
+      setAiInfo(null);
+      setSearch(text);
+    } finally {
+      setAiSearching(false);
+    }
+  };
+  const toggleSide = () => {
+    setSideOpen((open) => {
+      try {
+        window.localStorage.setItem("mailharbor.side", open ? "0" : "1");
+      } catch {
+      }
+      return !open;
+    });
+  };
+  const toggleGroup = (key) => {
+    setExpandedGroups(
+      (current) => current.includes(key) ? current.filter((entry) => entry !== key) : [...current, key]
+    );
+  };
   const toggleSelect = (item) => {
     const key = `${item.accountId}:${item.id}`;
     setSelectedKeys(
@@ -2263,6 +2377,9 @@ function MailPanel() {
   (0, import_react9.useEffect)(() => {
     if (accountScope === null) return;
     let cancelled = false;
+    const cacheKey = `${accountScope}:${source}`;
+    const cached = folderCache.get(cacheKey);
+    if (cached !== void 0) setFolders(cached);
     api.folders({ accountId: accountScope, source }).then((result) => {
       if (cancelled) return;
       const items2 = source === "local" ? [
@@ -2277,8 +2394,9 @@ function MailPanel() {
         }))
       ] : result.items.map((item) => ({ ...item, label: item.label ?? item.name }));
       setFolders(items2);
+      folderCache.set(cacheKey, items2);
     }).catch(() => {
-      if (!cancelled) setFolders([]);
+      if (!cancelled && cached === void 0) setFolders([]);
     });
     return () => {
       cancelled = true;
@@ -2287,11 +2405,15 @@ function MailPanel() {
   (0, import_react9.useEffect)(() => {
     setMailbox(source === "local" ? "all" : "INBOX");
     setSelected(null);
+    setAiInfo(null);
+    setSearch("");
     setLimit(state?.settings.render.listLimit ?? 40);
   }, [source]);
   (0, import_react9.useEffect)(() => {
     if (accountScope === "all" && source === "server") setSource("local");
     setSelected(null);
+    setAiInfo(null);
+    setSearch("");
   }, [accountScope, source]);
   (0, import_react9.useEffect)(() => {
     if (accountScope === null) return;
@@ -2308,9 +2430,9 @@ function MailPanel() {
             return [];
           }
         })
-      ).then((groups) => {
+      ).then((groups2) => {
         if (cancelled) return;
-        setDrafts(groups.flat().sort((left, right) => right.updatedAt.localeCompare(left.updatedAt)));
+        setDrafts(groups2.flat().sort((left, right) => right.updatedAt.localeCompare(left.updatedAt)));
         setPage(EMPTY_PAGE);
       }).finally(() => {
         if (!cancelled) setLoading(false);
@@ -2319,10 +2441,28 @@ function MailPanel() {
         cancelled = true;
       };
     }
+    const pageKey = `${accountScope}:${source}:${mailbox}:${search}:${String(limit)}`;
+    const cachedPage = pageCache.get(pageKey);
+    if (cachedPage !== void 0) {
+      setPage(cachedPage);
+      setLoading(false);
+    }
     api.messages({ accountId: accountScope, source, mailbox, query: search, limit }).then((result) => {
       if (!cancelled) {
         setPage(result);
         setDrafts([]);
+        if (source === "server" && mailbox !== "all") {
+          const update = (list) => list.map((folder) => folder.name === mailbox ? { ...folder, count: result.total } : folder);
+          setFolders(update);
+          const key = `${accountScope}:server`;
+          const cachedFolders = folderCache.get(key);
+          if (cachedFolders !== void 0) folderCache.set(key, update(cachedFolders));
+        }
+        pageCache.set(pageKey, result);
+        if (pageCache.size > 12) {
+          const oldest = pageCache.keys().next().value;
+          if (oldest !== void 0) pageCache.delete(oldest);
+        }
       }
     }).catch((caught) => {
       if (!cancelled) setError(errorText5(caught));
@@ -2510,18 +2650,11 @@ function MailPanel() {
       setError(errorText5(caught));
     }
   };
-  const folderOptions = (0, import_react9.useMemo)(
-    () => folders.map((folder) => ({
-      value: folder.name,
-      label: `${folder.label ?? folder.name}${folder.count > 0 ? ` (${String(folder.count)})` : ""}`
-    })),
-    [folders]
-  );
   if (state === null) {
     return (0, import_react9.createElement)(
       "div",
       { className: "mailharbor" },
-      (0, import_react9.createElement)("div", { className: "mailharbor-empty" }, error === "" ? "\u6B63\u5728\u52A0\u8F7D\u90AE\u7BB1\u2026" : error)
+      (0, import_react9.createElement)("div", { className: "mailharbor-settings" }, "\u6B63\u5728\u8BFB\u53D6\u90AE\u7BB1\u2026")
     );
   }
   if (accounts.length === 0) {
@@ -2552,6 +2685,65 @@ 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;
+  const isSent = isSentFolder(mailbox);
+  const groups = groupMessages(items);
+  const renderMessage = (item, meta = {}) => {
+    const sent = isSent && item.to.length > 0;
+    const first = sent ? item.to[0] : item.from;
+    const who = first === void 0 || first === null ? "" : first.name !== "" ? first.name : first.address;
+    const extra = sent && item.to.length > 1 ? ` +${String(item.to.length - 1)}` : "";
+    const isSelected = selected?.id === item.id && selected?.accountId === item.accountId;
+    return (0, import_react9.createElement)(
+      "div",
+      {
+        key: `${item.accountId}:${item.id}`,
+        className: `mailharbor-row${item.unread ? " unread" : ""}${isSelected ? " selected" : ""}${selectMode ? " selectable" : ""}${meta.compact === true ? " compact" : ""}`,
+        role: "button",
+        tabIndex: 0,
+        onClick: () => {
+          if (selectMode) toggleSelect(item);
+          else void openMessage(item);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (selectMode) toggleSelect(item);
+            else void openMessage(item);
+          }
+        }
+      },
+      (0, import_react9.createElement)(
+        "span",
+        { className: "line-1" },
+        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,
+        sent ? (0, import_react9.createElement)("span", { className: "to-label" }, "\u6536\u4EF6\u4EBA ") : null,
+        (0, import_react9.createElement)("span", { className: "from" }, `${who}${extra}`),
+        item.hasAttachments ? (0, import_react9.createElement)(Icon, { name: "paperclip", size: 13 }) : null,
+        source === "local" && item.backedUp === false ? (0, import_react9.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null,
+        meta.groupCount !== void 0 && meta.groupCount > 1 ? (0, import_react9.createElement)(
+          "button",
+          {
+            className: "thread-count",
+            title: meta.expanded === true ? "\u6536\u8D77\u4F1A\u8BDD" : `\u5C55\u5F00\u4F1A\u8BDD\uFF08${String(meta.groupCount)} \u5C01\uFF09`,
+            onClick: (event) => {
+              event.stopPropagation();
+              toggleGroup(meta.groupKey ?? "");
+            }
+          },
+          meta.expanded === true ? "\u2212" : String(meta.groupCount)
+        ) : null,
+        (0, import_react9.createElement)("span", { className: "date" }, shortDate(item.date))
+      ),
+      meta.compact === true ? null : (0, import_react9.createElement)("span", { className: "line-2" }, (0, import_react9.createElement)("span", { className: "subject" }, item.subject)),
+      item.snippet === "" ? null : (0, import_react9.createElement)("span", { className: "snippet" }, item.snippet)
+    );
+  };
   return (0, import_react9.createElement)(
     "div",
     { className: narrow ? "mailharbor mailharbor-narrow" : "mailharbor" },
@@ -2559,21 +2751,21 @@ function MailPanel() {
       "div",
       { className: "mailharbor-topbar" },
       (0, import_react9.createElement)(
-        "div",
-        { className: "mailharbor-account" },
-        (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_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
+        "button",
+        {
+          className: "mailharbor-account",
+          onClick: toggleSide,
+          title: sideOpen ? "\u6536\u8D77\u8D26\u53F7\u4E0E\u6587\u4EF6\u5939" : "\u5C55\u5F00\u8D26\u53F7\u4E0E\u6587\u4EF6\u5939"
+        },
+        (0, import_react9.createElement)(Avatar, { email: currentAccount?.email ?? "?", size: 26 }),
+        (0, import_react9.createElement)(
+          "div",
+          { style: { display: "flex", flexDirection: "column", minWidth: 0 } },
+          (0, import_react9.createElement)("span", { className: "name" }, currentAccount?.label ?? ""),
+          (0, import_react9.createElement)("span", { className: "small muted" }, currentAccount?.email ?? "")
+        ),
+        state.loggedIn === false ? (0, import_react9.createElement)("span", { className: "badge warn" }, "\u672A\u767B\u5F55") : null,
+        (0, import_react9.createElement)(Icon, { name: sideOpen ? "chevronLeft" : "chevronRight", size: 14 })
       ),
       (0, import_react9.createElement)(
         "div",
@@ -2601,16 +2793,6 @@ function MailPanel() {
         )
       ),
       (0, import_react9.createElement)("span", { className: "spacer" }),
-      (0, import_react9.createElement)(
-        "button",
-        {
-          className: "ghost icon",
-          title: "\u6DFB\u52A0\u8D26\u53F7",
-          "aria-label": "\u6DFB\u52A0\u8D26\u53F7",
-          onClick: () => setShowAdd(true)
-        },
-        (0, import_react9.createElement)(Icon, { name: "plus" })
-      ),
       (0, import_react9.createElement)(
         "button",
         { className: "ghost icon", title: "\u5237\u65B0\u5217\u8868", "aria-label": "\u5237\u65B0\u5217\u8868", onClick: refresh },
@@ -2652,37 +2834,75 @@ function MailPanel() {
     ) : (0, import_react9.createElement)(
       "div",
       { className: "mailharbor-body", "data-mode": narrow && selected !== null ? "reader" : "list" },
+      sideOpen ? (0, import_react9.createElement)(
+        "aside",
+        { className: "mailharbor-side" },
+        (0, import_react9.createElement)("div", { className: "mailharbor-side-section" }, "\u8D26\u53F7"),
+        accounts.map(
+          (item) => (0, import_react9.createElement)(
+            "button",
+            {
+              key: item.id,
+              className: `mailharbor-side-item${!isAll && item.id === accountScope ? " active" : ""}`,
+              onClick: () => {
+                void switchAccount(item.id);
+                setSource("server");
+                setMailbox("INBOX");
+              }
+            },
+            (0, import_react9.createElement)(Avatar, { email: item.email, size: 18 }),
+            (0, import_react9.createElement)(
+              "span",
+              { className: "name" },
+              (0, import_react9.createElement)("span", null, item.label),
+              (0, import_react9.createElement)("span", { className: "sub" }, item.email)
+            ),
+            item.enabled === false ? (0, import_react9.createElement)("span", { className: "badge warn" }, "\u505C\u7528") : null
+          )
+        ),
+        (0, import_react9.createElement)(
+          "div",
+          { className: "mailharbor-side-section" },
+          source === "server" ? "\u670D\u52A1\u5668\u6587\u4EF6\u5939" : "\u672C\u5730\u6587\u4EF6\u5939"
+        ),
+        folders.map(
+          (folder) => (0, import_react9.createElement)(
+            "button",
+            {
+              key: folder.name,
+              className: `mailharbor-side-item${mailbox === folder.name ? " active" : ""}`,
+              onClick: () => {
+                setMailbox(folder.name);
+                setSelected(null);
+              }
+            },
+            (0, import_react9.createElement)(Icon, { name: folder.name === DRAFTS ? "compose" : "folder", size: 14 }),
+            (0, import_react9.createElement)("span", { className: "name" }, folderName(folder.label ?? folder.name)),
+            folder.count > 0 ? (0, import_react9.createElement)("span", { className: "count" }, String(folder.count)) : null
+          )
+        )
+      ) : null,
       (0, import_react9.createElement)(
         "div",
         { className: "mailharbor-list" },
         (0, import_react9.createElement)(
           "div",
           { className: "mailharbor-filters" },
-          (0, import_react9.createElement)(
-            "select",
-            {
-              value: mailbox,
-              onChange: (event) => {
-                setMailbox(event.target.value);
-                setSelected(null);
-              },
-              "aria-label": "\u90AE\u7BB1\u6587\u4EF6\u5939"
-            },
-            folderOptions.map(
-              (option) => (0, import_react9.createElement)("option", { key: option.value, value: option.value }, option.label)
-            )
-          ),
           (0, import_react9.createElement)("input", {
             type: "search",
-            placeholder: showingDrafts ? "\u641C\u7D22\u8349\u7A3F" : "\u641C\u7D22\u90AE\u4EF6",
+            placeholder: showingDrafts ? "\u641C\u7D22\u8349\u7A3F" : aiSearching ? "AI \u6B63\u5728\u7406\u89E3\u4F60\u7684\u641C\u7D22\u2026" : "\u641C\u7D22\u90AE\u4EF6\uFF0C\u6216\u63CF\u8FF0\u4F60\u8981\u627E\u4EC0\u4E48\uFF08AI\uFF09",
             "aria-label": "\u641C\u7D22\u90AE\u4EF6",
             value: query2,
             onChange: (event) => setQuery(event.target.value),
             onKeyDown: (event) => {
-              if (event.key === "Enter") setSearch(query2);
+              if (event.key === "Enter") {
+                if (showingDrafts) setSearch(query2);
+                else void runAiSearch();
+              }
               if (event.key === "Escape") {
                 setQuery("");
                 setSearch("");
+                setAiInfo(null);
               }
             }
           }),
@@ -2711,11 +2931,35 @@ function MailPanel() {
               onClick: () => {
                 setQuery("");
                 setSearch("");
+                setAiInfo(null);
               }
             },
             (0, import_react9.createElement)(Icon, { name: "close", size: 14 })
           ) : null
         ),
+        aiInfo === null ? null : (0, import_react9.createElement)(
+          "div",
+          { className: "mailharbor-ai-search" },
+          (0, import_react9.createElement)(Icon, { name: "sparkles", size: 13 }),
+          (0, import_react9.createElement)(
+            "span",
+            null,
+            aiInfo.explanation !== "" ? aiInfo.explanation : `\u5173\u952E\u8BCD\uFF1A${aiInfo.keywords.join("\u3001")}`
+          ),
+          (0, import_react9.createElement)("span", { className: "spacer" }),
+          (0, import_react9.createElement)(
+            "button",
+            {
+              className: "subtle",
+              onClick: () => {
+                setAiInfo(null);
+                setTick((value) => value + 1);
+              }
+            },
+            "\u6E05\u9664"
+          )
+        ),
+        aiSearching ? (0, import_react9.createElement)("div", { className: "mailharbor-ai-search searching" }, "AI \u6B63\u5728\u7406\u89E3\u5E76\u641C\u7D22\u2026") : null,
         selectMode ? (0, import_react9.createElement)(
           "div",
           { className: "mailharbor-selectbar" },
@@ -2826,76 +3070,39 @@ function MailPanel() {
           ) : items.length === 0 ? (0, import_react9.createElement)(
             "div",
             { className: "mailharbor-empty" },
-            (0, import_react9.createElement)(Icon, { name: "mail", size: 28 }),
+            (0, import_react9.createElement)(Icon, { name: aiInfo === null ? "mail" : "sparkles", 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"
+              aiInfo === null ? source === "local" ? "\u672C\u5730\u5907\u4EFD\u91CC\u8FD8\u6CA1\u6709\u90AE\u4EF6" : "\u670D\u52A1\u5668\u4E0A\u6CA1\u6709\u90AE\u4EF6" : "AI \u641C\u7D22\u6CA1\u6709\u627E\u5230\u5339\u914D\u90AE\u4EF6"
             ),
             (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"
+              aiInfo === null ? 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" : "\u6362\u4E2A\u8BF4\u6CD5\uFF0C\u6216\u76F4\u63A5\u8F93\u5165\u5173\u952E\u8BCD\u540E\u6309\u56DE\u8F66\u3002"
             )
-          ) : items.map(
-            (item) => (0, import_react9.createElement)(
+          ) : selectMode ? items.map((item) => renderMessage(item)) : groups.map((group) => {
+            const latest = group.items[0];
+            if (latest === void 0) return null;
+            const expanded = expandedGroups.includes(group.key);
+            return (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" : ""}${selectMode ? " selectable" : ""}`,
-                role: "button",
-                tabIndex: 0,
-                onClick: () => {
-                  if (selectMode) toggleSelect(item);
-                  else void openMessage(item);
-                },
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    if (selectMode) toggleSelect(item);
-                    else void openMessage(item);
-                  }
-                }
-              },
-              (0, import_react9.createElement)(
-                "span",
-                { className: "line-1" },
-                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_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_react9.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null,
-                (0, import_react9.createElement)("span", { className: "date" }, shortDate(item.date))
-              ),
-              (0, import_react9.createElement)(
-                "span",
-                { className: "line-2" },
-                (0, import_react9.createElement)("span", { className: "subject" }, item.subject)
-              ),
-              item.snippet === "" ? null : (0, import_react9.createElement)("span", { className: "snippet" }, item.snippet)
-            )
-          )
+              { className: "mailharbor-thread", key: group.key },
+              renderMessage(latest, {
+                groupCount: group.items.length,
+                groupKey: group.key,
+                expanded
+              }),
+              expanded ? group.items.slice(1).map((item) => renderMessage(item, { compact: true })) : null
+            );
+          })
         ),
         !showingDrafts && items.length > 0 ? (0, import_react9.createElement)(
           "div",
           { className: "mailharbor-list-foot" },
           (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)(
+          page.total > items.length && aiInfo === null ? (0, import_react9.createElement)(
             "button",
             { className: "subtle", onClick: () => setLimit((current) => current + 40) },
             "\u52A0\u8F7D\u66F4\u591A"
@@ -3062,15 +3269,6 @@ function MailSettings() {
   const [pollSeconds, setPollSeconds] = (0, import_react10.useState)(60);
   const [listLimit, setListLimit] = (0, import_react10.useState)(40);
   const [projectRoot, setProjectRoot] = (0, import_react10.useState)("");
-  const [caldavAccountId, setCaldavAccountId] = (0, import_react10.useState)("");
-  const [caldavUrl, setCaldavUrl] = (0, import_react10.useState)("");
-  const [caldavUser, setCaldavUser] = (0, import_react10.useState)("");
-  const [caldavPassword, setCaldavPassword] = (0, import_react10.useState)("");
-  const [caldavHref, setCaldavHref] = (0, import_react10.useState)("");
-  const [caldavHasPassword, setCaldavHasPassword] = (0, import_react10.useState)(false);
-  const [caldavCalendar, setCaldavCalendar] = (0, import_react10.useState)(null);
-  const [caldavMessage, setCaldavMessage] = (0, import_react10.useState)("");
-  const [caldavBusy, setCaldavBusy] = (0, import_react10.useState)(false);
   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");
@@ -3094,9 +3292,6 @@ function MailSettings() {
       setPollSeconds(view.read.pollSeconds);
       setListLimit(view.render.listLimit);
       setProjectRoot(view.projects.root);
-      setCaldavAccountId(
-        (current) => current || view.activeAccountId || appState.settings.activeAccountId || ""
-      );
       setAiEnabled(view.ai.enabled);
       setAiProvider(view.ai.provider);
       setAiModel(view.ai.model);
@@ -3107,23 +3302,6 @@ function MailSettings() {
       cancelled = true;
     };
   }, [tick]);
-  (0, import_react10.useEffect)(() => {
-    let cancelled = false;
-    if (caldavAccountId === "") return;
-    api.taskCaldav(caldavAccountId).then((info) => {
-      if (cancelled) return;
-      setCaldavUrl(info.caldav?.url ?? "");
-      setCaldavUser(info.caldav?.username ?? "");
-      setCaldavHref(info.caldav?.calendarHref ?? "");
-      setCaldavHasPassword(info.hasPassword);
-      setCaldavCalendar(info.calendar);
-    }).catch((caught) => {
-      if (!cancelled) setCaldavMessage(errorText6(caught));
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [caldavAccountId, tick]);
   (0, import_react10.useEffect)(() => {
     let cancelled = false;
     const accountId = settings?.activeAccountId ?? state?.activeAccountId ?? null;
@@ -3309,147 +3487,29 @@ function MailSettings() {
             })
           ),
           (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_react10.createElement)("h3", null, "\u4EFB\u52A1\u4E0E CalDAV"),
-        (0, import_react10.createElement)(
-          "p",
-          { className: "small muted" },
-          "\u4EFB\u52A1\u9762\u677F\u7684\u300C\u540C\u6B65 CalDAV\u300D\u4F7F\u7528\u8FD9\u91CC\u7684\u914D\u7F6E\u3002\u5BC6\u7801\u53EA\u5B58\u7CFB\u7EDF Keychain\uFF0C\u4E0D\u5199\u5165\u914D\u7F6E\u6587\u4EF6\u3002"
-        ),
-        (0, import_react10.createElement)(
-          "div",
-          { className: "mailharbor-grid" },
-          (0, import_react10.createElement)(
-            Field,
-            { label: "\u8D26\u53F7" },
+            "div",
+            { style: { display: "flex", gap: "6px", alignSelf: "end" } },
             (0, import_react10.createElement)(
-              "select",
+              "button",
               {
-                value: caldavAccountId,
-                onChange: (event) => {
-                  setCaldavAccountId(event.target.value);
-                  setCaldavMessage("");
+                className: "ghost small",
+                onClick: () => {
+                  void api.pickDirectory().then((result) => {
+                    if (result.path !== null) setProjectRoot(result.path);
+                  }).catch((caught) => setError(errorText6(caught)));
                 }
               },
-              (settings?.accounts ?? []).map(
-                (item) => (0, import_react10.createElement)("option", { key: item.id, value: item.id }, `${item.label}\uFF08${item.email}\uFF09`)
-              )
-            )
-          ),
-          (0, import_react10.createElement)(
-            Field,
-            { label: "\u72B6\u6001" },
+              "\u6D4F\u89C8\u2026"
+            ),
             (0, import_react10.createElement)(
-              "span",
-              { className: "small", style: { paddingTop: "7px", color: "var(--m-text-3)" } },
-              caldavCalendar === null ? "\u672A\u540C\u6B65" : caldavCalendar.lastSync === "" ? "\u672A\u540C\u6B65" : `\u4E0A\u6B21\u540C\u6B65 ${new Date(caldavCalendar.lastSync).toLocaleString()}`,
-              caldavCalendar?.error ? ` \xB7 \u5931\u8D25\uFF1A${caldavCalendar.error}` : ""
+              "button",
+              {
+                className: "ghost small",
+                onClick: () => void saveGeneral({ projects: { root: projectRoot } })
+              },
+              "\u4FDD\u5B58\u76EE\u5F55"
             )
           )
-        ),
-        (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,
-              placeholder: "\u901A\u5E38\u662F\u90AE\u7BB1\u5730\u5740",
-              onChange: (event) => setCaldavUser(event.target.value)
-            })
-          )
-        ),
-        (0, import_react10.createElement)(
-          "div",
-          { className: "mailharbor-grid" },
-          (0, import_react10.createElement)(
-            Field,
-            { label: caldavHasPassword ? "\u5E94\u7528\u5BC6\u7801\uFF08\u7559\u7A7A\u8868\u793A\u4E0D\u4FEE\u6539\uFF09" : "\u5E94\u7528\u5BC6\u7801" },
-            (0, import_react10.createElement)("input", {
-              type: "password",
-              value: caldavPassword,
-              placeholder: caldavHasPassword ? "\u5DF2\u4FDD\u5B58" : "iCloud / Fastmail \u7B49\u5E94\u7528\u4E13\u7528\u5BC6\u7801",
-              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: "\u7559\u7A7A\u81EA\u52A8\u53D1\u73B0",
-              onChange: (event) => setCaldavHref(event.target.value)
-            })
-          )
-        ),
-        (0, import_react10.createElement)(
-          "div",
-          { style: { display: "flex", gap: "8px", alignItems: "center", flexWrap: "wrap" } },
-          (0, import_react10.createElement)(
-            "button",
-            {
-              className: "primary small",
-              disabled: caldavBusy,
-              onClick: () => {
-                setCaldavBusy(true);
-                setCaldavMessage("\u4FDD\u5B58\u4E2D\u2026");
-                void api.saveTaskCaldav({
-                  accountId: caldavAccountId,
-                  url: caldavUrl,
-                  username: caldavUser,
-                  ...caldavPassword === "" ? {} : { password: caldavPassword },
-                  calendarHref: caldavHref
-                }).then((info) => {
-                  setCaldavHasPassword(info.hasPassword);
-                  setCaldavPassword("");
-                  setCaldavMessage(info.hasPassword ? "\u5DF2\u4FDD\u5B58" : "\u5DF2\u4FDD\u5B58\u5730\u5740\uFF0C\u4F46\u8FD8\u6CA1\u6709\u5BC6\u7801");
-                  setTick((value) => value + 1);
-                }).catch((caught) => setCaldavMessage(errorText6(caught))).finally(() => setCaldavBusy(false));
-              }
-            },
-            caldavBusy ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58 CalDAV"
-          ),
-          (0, import_react10.createElement)(
-            "button",
-            {
-              className: "ghost small",
-              disabled: caldavBusy,
-              onClick: () => {
-                setCaldavBusy(true);
-                setCaldavMessage("\u540C\u6B65\u4E2D\u2026");
-                void api.syncTasks(caldavAccountId).then((result) => {
-                  setCaldavMessage(
-                    `\u540C\u6B65\u5B8C\u6210\uFF1A\u62C9\u53D6 ${String(result.result.pulled)}\uFF0C\u63A8\u9001 ${String(result.result.pushed)}`
-                  );
-                  setTick((value) => value + 1);
-                }).catch((caught) => setCaldavMessage(errorText6(caught))).finally(() => setCaldavBusy(false));
-              }
-            },
-            "\u7ACB\u5373\u540C\u6B65"
-          ),
-          (0, import_react10.createElement)("span", { className: "small muted" }, caldavMessage)
         )
       ),
       (0, import_react10.createElement)(
@@ -3858,19 +3918,18 @@ function AccountRow({
 // src/client/tasks-panel.tsx
 var import_react11 = require("react");
 var FILTERS = [
-  { id: "open", label: "\u5F85\u529E" },
+  { id: "all", label: "\u5168\u90E8" },
   { 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" }
+  { id: "overdue", label: "\u903E\u671F" }
 ];
-var STATUS_LABEL = {
-  "NEEDS-ACTION": "\u5F85\u5904\u7406",
-  "IN-PROCESS": "\u8FDB\u884C\u4E2D",
-  COMPLETED: "\u5DF2\u5B8C\u6210",
-  CANCELLED: "\u5DF2\u53D6\u6D88"
-};
+var COLUMNS = [
+  { status: "NEEDS-ACTION", label: "\u5F85\u5904\u7406", hint: "\u8FD8\u6CA1\u5F00\u59CB" },
+  { status: "IN-PROCESS", label: "\u8FDB\u884C\u4E2D", hint: "\u6B63\u5728\u505A" },
+  { status: "COMPLETED", label: "\u5DF2\u5B8C\u6210", hint: "\u6536\u5C3E" },
+  { status: "CANCELLED", label: "\u7EC8\u6B62", hint: "\u4E0D\u505A\u4E86" }
+];
+var PRIORITY_LABEL = { 0: "\u65E0", 5: "\u4E2D", 9: "\u9AD8" };
 function errorText7(error) {
   return error instanceof ApiError || error instanceof Error ? error.message : String(error);
 }
@@ -3886,11 +3945,13 @@ function weekEnd() {
 }
 function dueText(due) {
   if (due === "") return "";
+  const value = due.slice(0, 10);
   const today = dateKey(/* @__PURE__ */ new Date());
-  if (due.slice(0, 10) < today) return `\u903E\u671F ${due.slice(0, 10)}`;
-  return due.slice(0, 10);
+  if (value < today) return `\u903E\u671F ${value}`;
+  if (value === today) return "\u4ECA\u5929";
+  return value;
 }
-var EMPTY_TASK = {
+var EMPTY = {
   title: "",
   notes: "",
   due: "",
@@ -3971,13 +4032,14 @@ 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 [filter, setFilter] = (0, import_react11.useState)("all");
+  const [projectFilter, setProjectFilter] = (0, import_react11.useState)("");
   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 [creating, setCreating] = (0, import_react11.useState)(null);
+  const [dragging, setDragging] = (0, import_react11.useState)(null);
   const [tick, setTick] = (0, import_react11.useState)(0);
   const accountId = state?.settings.activeAccountId ?? null;
   (0, import_react11.useEffect)(() => {
@@ -3989,7 +4051,6 @@ function TasksPanel() {
     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));
@@ -4007,38 +4068,17 @@ function TasksPanel() {
       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;
+  const matchesFilter = (0, import_react11.useCallback)(
+    (task) => {
+      const today = dateKey(/* @__PURE__ */ new Date());
+      const end = weekEnd();
       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]);
+    },
+    [filter]
+  );
   const switchAccount = async (id) => {
     try {
       await api.activateAccount(id);
@@ -4047,10 +4087,10 @@ function TasksPanel() {
       setError(errorText7(caught));
     }
   };
-  const toggle = async (task) => {
+  const move = async (task, status) => {
+    if (task.status === status) return;
     try {
-      const next = task.status === "COMPLETED" ? "NEEDS-ACTION" : "COMPLETED";
-      const { task: updated } = await api.updateTask(task.id, { status: next });
+      const { task: updated } = await api.updateTask(task.id, { status });
       setTasks((current) => current.map((item) => item.id === task.id ? updated : item));
     } catch (caught) {
       setError(errorText7(caught));
@@ -4060,6 +4100,7 @@ function TasksPanel() {
     try {
       await api.deleteTask(task.id);
       setTasks((current) => current.filter((item) => item.id !== task.id));
+      notify("\u4EFB\u52A1\u5DF2\u5220\u9664");
     } catch (caught) {
       setError(errorText7(caught));
     }
@@ -4074,21 +4115,8 @@ function TasksPanel() {
       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) => {
+    if (accountId === null) return;
     setBusy(true);
     setError("");
     try {
@@ -4115,7 +4143,8 @@ function TasksPanel() {
         });
       }
       setEditing(null);
-      setCreating(false);
+      setCreating(null);
+      notify("\u4EFB\u52A1\u5DF2\u4FDD\u5B58");
       refresh();
     } catch (caught) {
       setError(errorText7(caught));
@@ -4125,7 +4154,7 @@ function TasksPanel() {
   };
   return (0, import_react11.createElement)(
     "div",
-    { className: "mailharbor" },
+    { className: "mailharbor mailharbor-tasks" },
     (0, import_react11.createElement)(
       "div",
       { className: "mailharbor-topbar" },
@@ -4143,72 +4172,21 @@ function TasksPanel() {
         )
       ),
       (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) },
+        { className: "primary", onClick: () => setCreating("NEEDS-ACTION") },
         (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),
+    toast === "" ? null : (0, import_react11.createElement)("div", { className: "small", style: { padding: "6px 18px", color: "var(--m-ok)" } }, toast),
     error === "" ? null : (0, import_react11.createElement)(ErrorBar, { message: error, onDismiss: () => setError("") }),
     (0, import_react11.createElement)(
       "div",
-      { className: "tasks-body" },
+      { className: "tasks-board-wrap" },
       (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" },
+        { className: "tasks-toolbar" },
         (0, import_react11.createElement)(
           "div",
           { className: "tasks-filters" },
@@ -4224,73 +4202,142 @@ function TasksPanel() {
             )
           )
         ),
-        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)(
+        (0, import_react11.createElement)("span", { className: "spacer" }),
+        (0, import_react11.createElement)(
+          "select",
+          {
+            value: projectFilter,
+            onChange: (event) => setProjectFilter(event.target.value),
+            "aria-label": "\u6309\u9879\u76EE\u7B5B\u9009"
+          },
+          (0, import_react11.createElement)("option", { value: "" }, "\u5168\u90E8\u9879\u76EE"),
+          projects.map((project) => (0, import_react11.createElement)("option", { key: project.id, value: project.id }, project.name))
+        ),
+        (0, import_react11.createElement)("span", { className: "small muted" }, "\u62D6\u52A8\u5361\u7247\u53EF\u6539\u53D8\u72B6\u6001")
+      ),
+      (0, import_react11.createElement)(
+        "div",
+        { className: "tasks-board" },
+        COLUMNS.map((column) => {
+          const cards = tasks.filter((task) => task.status === column.status).filter(matchesFilter).filter((task) => projectFilter === "" || task.projectId === projectFilter).sort((left, right) => {
+            const leftDue = left.due === "" ? "9999" : left.due.slice(0, 10);
+            const rightDue = right.due === "" ? "9999" : right.due.slice(0, 10);
+            return leftDue.localeCompare(rightDue);
+          });
+          return (0, import_react11.createElement)(
+            "div",
+            {
+              key: column.status,
+              className: `task-column task-column-${column.status}`,
+              onDragOver: (event) => {
+                event.preventDefault();
+              },
+              onDrop: (event) => {
+                event.preventDefault();
+                const task = tasks.find((item) => item.id === dragging);
+                if (task !== void 0) void move(task, column.status);
+                setDragging(null);
+              }
+            },
+            (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)
-              }),
+              { className: "task-column-head" },
+              (0, import_react11.createElement)("span", { className: `task-dot ${column.status}` }),
+              (0, import_react11.createElement)("strong", null, column.label),
+              (0, import_react11.createElement)("span", { className: "task-column-count" }, String(cards.length)),
+              (0, import_react11.createElement)("span", { className: "spacer" }),
               (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: "subtle icon",
+                  title: `\u5728\u300C${column.label}\u300D\u4E2D\u65B0\u5EFA`,
+                  onClick: () => setCreating(column.status)
+                },
+                (0, import_react11.createElement)(Icon, { name: "plus", size: 14 })
+              )
+            ),
+            (0, import_react11.createElement)(
+              "div",
+              { className: "task-column-body" },
+              cards.length === 0 ? (0, import_react11.createElement)("div", { className: "task-column-empty" }, column.hint) : cards.map(
+                (task) => (0, import_react11.createElement)(
+                  "article",
+                  {
+                    key: task.id,
+                    className: `task-card${dragging === task.id ? " dragging" : ""}`,
+                    draggable: true,
+                    onDragStart: () => setDragging(task.id),
+                    onDragEnd: () => setDragging(null),
+                    onClick: () => setEditing(task)
+                  },
+                  (0, import_react11.createElement)(
+                    "div",
+                    { className: "task-card-top" },
+                    (0, import_react11.createElement)("span", { className: `task-priority p${String(task.priority)}` }),
+                    (0, import_react11.createElement)("span", { className: "task-card-title" }, task.title),
+                    (0, import_react11.createElement)(
+                      "button",
+                      {
+                        className: "task-card-delete",
+                        title: "\u5220\u9664\u4EFB\u52A1",
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          void remove(task);
+                        }
+                      },
+                      (0, import_react11.createElement)(Icon, { name: "close", size: 12 })
+                    )
+                  ),
+                  task.notes === "" ? null : (0, import_react11.createElement)("p", { className: "task-card-notes" }, task.notes),
+                  (0, import_react11.createElement)(
+                    "div",
+                    { className: "task-card-meta" },
+                    task.due === "" ? null : (0, import_react11.createElement)(
+                      "span",
+                      {
+                        className: task.due.slice(0, 10) < dateKey(/* @__PURE__ */ new Date()) && task.status !== "COMPLETED" ? "task-due overdue" : "task-due"
+                      },
+                      (0, import_react11.createElement)(Icon, { name: "calendar", size: 12 }),
+                      dueText(task.due)
+                    ),
+                    task.owner === "" ? null : (0, import_react11.createElement)("span", { className: "task-owner" }, task.owner),
+                    task.projectId === null ? null : (0, import_react11.createElement)(
+                      "span",
+                      { className: "task-project" },
+                      projects.find((project) => project.id === task.projectId)?.name ?? "\u9879\u76EE"
+                    ),
+                    task.priority > 0 ? (0, import_react11.createElement)(
+                      "span",
+                      { className: "task-priority-label" },
+                      `\u4F18\u5148\u7EA7 ${PRIORITY_LABEL[task.priority] ?? String(task.priority)}`
+                    ) : null
+                  ),
+                  task.messageKey === "" ? null : (0, import_react11.createElement)(
+                    "button",
                     {
-                      className: task.due.slice(0, 10) < dateKey(/* @__PURE__ */ new Date()) ? "due overdue" : "due"
+                      className: "task-source",
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        void openSource(task);
+                      }
                     },
-                    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"
+                    (0, import_react11.createElement)(Icon, { name: "mail", size: 12 }),
+                    "\u6765\u6E90\u90AE\u4EF6"
                   )
                 )
-              ),
-              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, {
+    creating !== null || editing !== null ? (0, import_react11.createElement)(TaskEditor, {
       task: editing,
+      status: creating ?? "NEEDS-ACTION",
       projects,
       busy,
       onClose: () => {
-        setCreating(false);
+        setCreating(null);
         setEditing(null);
       },
       onSave: (draft) => void save(draft)
@@ -4299,13 +4346,15 @@ function TasksPanel() {
 }
 function TaskEditor({
   task,
+  status,
   projects,
   busy,
   onClose,
   onSave
 }) {
   const [draft, setDraft] = (0, import_react11.useState)({
-    ...EMPTY_TASK,
+    ...EMPTY,
+    status,
     ...task === null ? {} : {
       id: task.id,
       title: task.title,
@@ -4323,111 +4372,139 @@ function TaskEditor({
     {
       title: task === null ? "\u65B0\u5EFA\u4EFB\u52A1" : "\u7F16\u8F91\u4EFB\u52A1",
       onClose,
+      wide: true,
       footer: (0, import_react11.createElement)(
         "div",
-        { style: { display: "flex", gap: "8px", width: "100%", justifyContent: "flex-end" } },
+        { className: "task-editor-foot" },
+        (0, import_react11.createElement)("span", { className: "small muted" }, "\u63D0\u793A\uFF1A\u4EFB\u52A1\u4F1A\u4FDD\u5B58\u5728\u672C\u5730\uFF0C\u53EF\u5728\u770B\u677F\u4E2D\u62D6\u52A8\u6539\u53D8\u72B6\u6001\u3002"),
+        (0, import_react11.createElement)("span", { className: "spacer" }),
         (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) })
+            className: "primary",
+            disabled: busy || draft.title.trim() === "",
+            onClick: () => onSave(draft)
           },
-          (0, import_react11.createElement)("option", { value: "0" }, "\u65E0"),
-          (0, import_react11.createElement)("option", { value: "5" }, "\u4E2D"),
-          (0, import_react11.createElement)("option", { value: "9" }, "\u9AD8")
+          busy ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58\u4EFB\u52A1"
         )
       )
-    ),
+    },
     (0, import_react11.createElement)(
       "div",
-      { className: "mailharbor-grid" },
+      { className: "task-editor" },
       (0, import_react11.createElement)(
         "div",
-        { className: "mailharbor-field" },
-        (0, import_react11.createElement)("label", null, "\u72B6\u6001"),
+        { className: "task-editor-main" },
         (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))
+          "div",
+          { className: "task-editor-title" },
+          (0, import_react11.createElement)("input", {
+            value: draft.title,
+            autoFocus: true,
+            placeholder: "\u8981\u505A\u4EC0\u4E48\uFF1F",
+            onChange: (event) => set({ title: event.target.value })
+          })
+        ),
+        (0, import_react11.createElement)(
+          "div",
+          { className: "task-editor-section" },
+          (0, import_react11.createElement)("label", null, "\u5907\u6CE8"),
+          (0, import_react11.createElement)("textarea", {
+            rows: 5,
+            value: draft.notes,
+            placeholder: "\u80CC\u666F\u3001\u4E0B\u4E00\u6B65\u3001\u94FE\u63A5\u2026",
+            onChange: (event) => set({ notes: event.target.value })
+          })
+        ),
+        (0, import_react11.createElement)(
+          "div",
+          { className: "task-editor-section" },
+          (0, import_react11.createElement)("label", null, "\u6765\u6E90"),
+          draft.id === void 0 ? (0, import_react11.createElement)("span", { className: "small muted" }, "\u4ECE\u90AE\u4EF6\u63D0\u53D6\u7684\u4EFB\u52A1\u4F1A\u81EA\u52A8\u5173\u8054\u6765\u6E90\u90AE\u4EF6\u3002") : (0, import_react11.createElement)(
+            "span",
+            { className: "small muted" },
+            task?.messageSubject !== void 0 && task.messageSubject !== "" ? `\u6765\u81EA\u90AE\u4EF6\uFF1A${task.messageSubject}` : "\u65E0\u5173\u8054\u90AE\u4EF6"
+          )
         )
       ),
       (0, import_react11.createElement)(
-        "div",
-        { className: "mailharbor-field" },
-        (0, import_react11.createElement)("label", null, "\u9879\u76EE"),
+        "aside",
+        { className: "task-editor-side" },
         (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))
+          "div",
+          { className: "task-editor-field" },
+          (0, import_react11.createElement)("label", null, "\u72B6\u6001"),
+          (0, import_react11.createElement)(
+            "select",
+            {
+              value: draft.status,
+              onChange: (event) => set({ status: event.target.value })
+            },
+            COLUMNS.map((column) => (0, import_react11.createElement)("option", { key: column.status, value: column.status }, column.label))
+          )
+        ),
+        (0, import_react11.createElement)(
+          "div",
+          { className: "task-editor-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: "task-editor-field" },
+          (0, import_react11.createElement)("label", null, "\u4F18\u5148\u7EA7"),
+          (0, import_react11.createElement)(
+            "div",
+            { className: "task-priority-picker" },
+            [0, 5, 9].map(
+              (value) => (0, import_react11.createElement)(
+                "button",
+                {
+                  key: value,
+                  className: draft.priority === value ? "active" : "",
+                  onClick: () => set({ priority: value })
+                },
+                PRIORITY_LABEL[value] ?? String(value)
+              )
+            )
+          )
+        ),
+        (0, import_react11.createElement)(
+          "div",
+          { className: "task-editor-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: "task-editor-field" },
+          (0, import_react11.createElement)("label", null, "\u8D1F\u8D23\u4EBA"),
+          (0, import_react11.createElement)("input", {
+            value: draft.owner,
+            placeholder: "\u53EF\u9009",
+            onChange: (event) => set({ owner: event.target.value })
+          })
         )
       )
-    ),
-    (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.5.1";
+var VERSION = "0.7.0";
 var inject = ["slots"];
 var PANEL_ID = "mailharbor";
 var TASKS_PANEL_ID = "mailharbor-tasks";