feat: folder mapping UI on account add (probe + map modal)

ADD now probes both connections, lists folders on each side, and opens a
mapping modal to route source->destination folders (e.g. Спам -> Spam) so we
append into the existing folder instead of creating a duplicate.

- store: SetTaskFolderMapping (+ round-trip test)
- httpapi: POST /tasks/{id}/probe (test both, return folder lists),
  PUT /tasks/{id}/folder-mapping
- web: FolderMappingModal (reuses Modal, size=lg), submitAccount probes then
  opens the modal; confirm creates the account and saves the task mapping

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MMHQTtnQtQqL8muAXHr9kd

web/src/components/FolderMappingModal.tsx

@@ -0,0 +1,92 @@
+import { useMemo, useState } from 'react'
+import { Modal } from './Modal'
+
+type Props = {
+  open: boolean
+  srcFolders: string[]
+  dstFolders: string[]
+  initialMapping: Record<string, string>
+  onConfirm: (mapping: Record<string, string>) => void
+  onCancel: () => void
+}
+
+// Pick a sensible default destination for a source folder: an explicit prior
+// mapping, else an exact same-name match on the destination, else keep the name.
+function defaultDst(src: string, dstFolders: string[], initial: Record<string, string>): string {
+  if (initial[src]) return initial[src]
+  if (dstFolders.includes(src)) return src
+  return src
+}
+
+export function FolderMappingModal({ open, srcFolders, dstFolders, initialMapping, onConfirm, onCancel }: Props) {
+  const [choice, setChoice] = useState<Record<string, string>>({})
+
+  // Options per select: all destination folders, plus the source name itself
+  // (marked "create") when it does not already exist on the destination.
+  const options = useMemo(() => {
+    const set = new Set(dstFolders)
+    return (src: string) => {
+      const opts = [...dstFolders]
+      if (!set.has(src)) opts.unshift(src)
+      return opts
+    }
+  }, [dstFolders])
+
+  const valueFor = (src: string) => choice[src] ?? defaultDst(src, dstFolders, initialMapping)
+
+  function confirm() {
+    const mapping: Record<string, string> = { ...initialMapping }
+    for (const src of srcFolders) {
+      const dst = valueFor(src)
+      if (dst === src) delete mapping[src]
+      else mapping[src] = dst
+    }
+    onConfirm(mapping)
+  }
+
+  return (
+    <Modal open={open} title="Map folders (source → destination)" onClose={onCancel} size="lg">
+      <div className="map-body">
+        <p className="map-hint">
+          Route each source folder to an existing destination folder. Leaving a folder mapped to its own name
+          creates it on the destination if missing (e.g. map <code>Спам</code> → <code>Spam</code> to avoid duplicates).
+        </p>
+        <div className="map-grid">
+          {srcFolders.map((src) => {
+            const val = valueFor(src)
+            const creates = !dstFolders.includes(val)
+            return (
+              <div className="map-row" key={src}>
+                <span className="map-src" title={src}>
+                  {src}
+                </span>
+                <span className="map-arrow">→</span>
+                <select
+                  className="map-select"
+                  value={val}
+                  onChange={(e) => setChoice((c) => ({ ...c, [src]: e.target.value }))}
+                >
+                  {options(src).map((f) => (
+                    <option key={f} value={f}>
+                      {f}
+                      {f === src && !dstFolders.includes(src) ? ' (create)' : ''}
+                    </option>
+                  ))}
+                </select>
+                {creates && <span className="map-new">new</span>}
+              </div>
+            )
+          })}
+        </div>
+        <div className="modal-actions">
+          <button type="button" className="btn" onClick={onCancel}>
+            Cancel
+          </button>
+          <button type="button" className="btn btn-primary" data-modal-autofocus onClick={confirm}>
+            Save mapping &amp; add
+          </button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

web/src/components/Modal.tsx

@@ -6,6 +6,7 @@ type ModalProps = {
   title?: string
   onClose: () => void
   children: ReactNode
+  size?: 'md' | 'lg'
 }
 
 function focusable(root: HTMLElement | null): HTMLElement[] {
@@ -19,7 +20,7 @@ function focusable(root: HTMLElement | null): HTMLElement[] {
 // Reusable modal shell: portal to <body>, ESC to close, Tab focus-trap,
 // focus-on-open (prefers [data-modal-autofocus]), focus restore on close,
 // click-on-overlay to close, and body scroll lock while open.
-export function Modal({ open, title, onClose, children }: ModalProps) {
+export function Modal({ open, title, onClose, children, size = 'md' }: ModalProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
   const prevFocus = useRef<HTMLElement | null>(null)
   const onCloseRef = useRef(onClose)
@@ -78,7 +79,7 @@ export function Modal({ open, title, onClose, children }: ModalProps) {
         if (e.target === e.currentTarget) onClose()
       }}
     >
-      <div className="modal-dialog" role="dialog" aria-modal="true" aria-label={title} ref={dialogRef} tabIndex={-1}>
+      <div className={`modal-dialog modal-${size}`} role="dialog" aria-modal="true" aria-label={title} ref={dialogRef} tabIndex={-1}>
         {title && <div className="modal-title">{title}</div>}
         {children}
       </div>