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/api.ts

@@ -84,6 +84,25 @@ export const deleteAccount = (taskId: number, accountId: number) =>
 export const cancelAccount = (taskId: number, accountId: number) =>
   api(`/api/tasks/${taskId}/accounts/${accountId}/cancel`, { method: 'POST' })
 
+export interface ProbeSide {
+  ok: boolean
+  folders?: string[]
+  error?: string
+}
+
+export interface ProbeResult {
+  src: ProbeSide
+  dst: ProbeSide
+}
+
+export const probeFolders = (
+  taskId: number,
+  creds: { src_login: string; src_pass: string; dst_login: string; dst_pass: string },
+) => api<ProbeResult>(`/api/tasks/${taskId}/probe`, jsonBody(creds))
+
+export const setFolderMapping = (taskId: number, mapping: Record<string, string>) =>
+  api(`/api/tasks/${taskId}/folder-mapping`, { ...jsonBody({ mapping }), method: 'PUT' })
+
 export const listTasks = () => api<Task[]>('/api/tasks')
 
 export const getTask = (id: number) => api<TaskDetail>(`/api/tasks/${id}`)

web/src/app.css

@@ -314,7 +314,6 @@
 
 .modal-dialog {
   width: 100%;
-  max-width: 440px;
   background: var(--bg-panel-raised);
   border: 1px solid var(--border-bright);
   box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
@@ -323,6 +322,67 @@
   animation: modal-rise 0.14s ease-out;
 }
 
+.modal-md {
+  max-width: 440px;
+}
+
+.modal-lg {
+  max-width: 680px;
+}
+
+/* folder mapping */
+.map-hint {
+  margin: 0 0 16px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--fg-dim);
+}
+
+.map-hint code {
+  color: var(--accent-strong);
+  font-family: var(--font-mono);
+}
+
+.map-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 52vh;
+  overflow-y: auto;
+  margin-bottom: 20px;
+}
+
+.map-row {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto;
+  align-items: center;
+  gap: 10px;
+}
+
+.map-src {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.map-arrow {
+  color: var(--accent);
+}
+
+.map-select {
+  width: 100%;
+}
+
+.map-new {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--info);
+}
+
 .modal-title {
   font-family: var(--font-mono);
   font-size: 12px;

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>

web/src/pages/TaskDetail.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from 'react'
-import { cancelAccount, createAccount, deleteAccount, getTask, importCSV, runTask, testAccounts, type TaskDetail as TaskDetailData } from '../api'
+import { cancelAccount, createAccount, deleteAccount, getTask, importCSV, probeFolders, runTask, setFolderMapping, testAccounts, type TaskDetail as TaskDetailData } from '../api'
 import { connectTaskWS, type TaskEvent } from '../ws'
 import { StatusBadge } from '../components/StatusBadge'
 import { useConfirm } from '../components/ConfirmProvider'
+import { FolderMappingModal } from '../components/FolderMappingModal'
 
 const emptyAccount = { src_login: '', src_pass: '', dst_login: '', dst_pass: '' }
 
@@ -72,7 +73,8 @@ export function TaskDetail({ id }: { id: number }) {
   const [notFound, setNotFound] = useState(false)
   const [log, setLog] = useState<{ type: string; text: string }[]>([])
   const [form, setForm] = useState(emptyAccount)
-  const [busy, setBusy] = useState<'test' | 'run' | 'add' | 'import' | 'delete' | null>(null)
+  const [busy, setBusy] = useState<'test' | 'run' | 'add' | 'import' | 'delete' | 'probe' | null>(null)
+  const [mapState, setMapState] = useState<{ src: string[]; dst: string[]; creds: typeof emptyAccount } | null>(null)
   const confirm = useConfirm()
   const [error, setError] = useState<string | null>(null)
   const [live, setLive] = useState<Record<number, LiveProgress>>({})
@@ -164,11 +166,35 @@ export function TaskDetail({ id }: { id: number }) {
 
   async function submitAccount(e: FormEvent) {
     e.preventDefault()
+    setBusy('probe')
+    setError(null)
+    try {
+      const creds = { ...form }
+      const res = await probeFolders(id, creds)
+      if (!res.src.ok || !res.dst.ok) {
+        const parts: string[] = []
+        if (!res.src.ok) parts.push(`source: ${res.src.error ?? 'login failed'}`)
+        if (!res.dst.ok) parts.push(`destination: ${res.dst.error ?? 'login failed'}`)
+        setError(`Connection test failed — ${parts.join('; ')}`)
+        return
+      }
+      setMapState({ src: res.src.folders ?? [], dst: res.dst.folders ?? [], creds })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to test connections')
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  async function confirmMapping(mapping: Record<string, string>) {
+    if (!mapState) return
     setBusy('add')
     setError(null)
     try {
-      await createAccount(id, form)
+      await createAccount(id, mapState.creds)
+      await setFolderMapping(id, mapping)
       setForm(emptyAccount)
+      setMapState(null)
       reload()
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to add account')
@@ -382,7 +408,7 @@ export function TaskDetail({ id }: { id: number }) {
             </div>
             <div className="btn-row">
               <button className="btn btn-primary" disabled={busy !== null}>
-                {busy === 'add' ? 'Adding…' : 'Add account'}
+                {busy === 'probe' ? 'Testing…' : busy === 'add' ? 'Adding…' : 'Add account'}
               </button>
             </div>
           </form>
@@ -510,6 +536,15 @@ export function TaskDetail({ id }: { id: number }) {
           </table>
         </div>
       </div>
+
+      <FolderMappingModal
+        open={mapState !== null}
+        srcFolders={mapState?.src ?? []}
+        dstFolders={mapState?.dst ?? []}
+        initialMapping={task.folder_mapping ?? {}}
+        onCancel={() => setMapState(null)}
+        onConfirm={confirmMapping}
+      />
     </>
   )
 }