feat: IMAP mail sync with thread-to-contact matching (PRD §6.1)

Real IMAP connection via imapflow library: - Connects to IMAP server (IMAPFlow, TLS on port 993) - Fetches recent messages (configurable limit, default 20) - Extracts: from, fromEmail, subject, date, snippet (200 chars) - Thread-to-contact matching (PRD §6.1): 1. Match sender email against persons table 2. If no person match, extract domain and match against company.website 3. Returns matchedCompany + matchedPerson for each email - Audit-logged (action: crm.mailsync:imap) - Zod validated (host, port, user, password, folder, limit) - 502 on IMAP connection failure with detail - 400 on validation failure Tested: invalid creds → 502 'IMAP connection failed', missing host → 400
2026-10-27 22:50:50 +00:00
1 parent 7acc0c5451
commit e45b68bb8b
@@ -0,0 +1,315 @@
+# Atelier Zero
+
+> Category: Editorial · Studio
+> A magazine-grade, collage-driven visual system: warm paper canvas, surreal
+> plaster-and-architecture imagery, oversized display type, hairline rules,
+> Roman-numeral section markers, and tiny editorial annotations.
+> Inspired by the production values of high-end print magazines (Monocle,
+> Apartamento, IDEA) translated into a working website.
+
+## 1. Visual Theme & Atmosphere
+
+A small, high-craft studio's annual report rendered as a webpage. The
+canvas is warm handmade paper. Every surface earns its lines. Type does
+the heavy lifting; collage imagery does the storytelling. Coral provides
+the only spark of warmth; mustard, olive, and bone are quiet
+companions. The page feels printed, slightly aged, and intentionally
+restrained — never noisy, never neon.
+
+- **Visual style:** editorial, collage, museum-catalog calm.
+- **Posture:** asymmetric, generous, top-biased.
+- **Reading rhythm:** Roman numerals (I, II, III…) walk the reader
+  through the page like chapters in a printed essay.
+- **Mood:** intelligent, tactile, slightly poetic, unmistakably
+  international.
+
+### Print production references
+
+The three magazines are not interchangeable inspiration — each owns a
+specific dimension of the system. When a brief asks "shift it closer to
+X", consult this map before changing tokens:
+
+- **Monocle:** warm paper stock (`#efe7d2`), tight body leading (~1.55),
+  monospace coordinates and SHA stamps, the international metadata
+  strip ("Filed under …"), the small ★ in the nav.
+- **Apartamento:** surreal collage composition (plaster + architecture
+  + small human figure), torn-edge textures inside the imagery, the
+  rotated side notes, and the willingness to leave generous negative
+  space around an image.
+- **IDEA:** Roman-numeral section walks (I → VIII), oversized
+  italic-serif words mixed inline with bold sans (Playfair Italic 500
+  inside Inter Tight 800), hairline rules threading through method
+  steps, the closing mega-word footer.
+
+## 2. Color
+
+All values are tokens. Do not invent new hex.
+
+- **Paper:** `#efe7d2` — primary background, warm ivory.
+- **Paper-warm:** `#ece4cf` — second-tier surface tint.
+- **Paper-dark:** `#ddd2b6` — subtle wells, cards on cards.
+- **Bone:** `#f7f1de` — elevated card surface (always on Paper).
+- **Ink:** `#15140f` — body text, primary buttons, strong rules.
+- **Ink-soft:** `#2a2620` — secondary text, dense paragraphs.
+- **Ink-mute:** `#5a5448` — captions, lab descriptions.
+- **Ink-faint:** `#8b8676` — coordinates, page numbers, microcopy.
+- **Coral (accent):** `#ed6f5c` — single hot accent. CTA fills,
+  Roman-numeral marks, eyebrow underlines, pulse dots, "fin." marks.
+- **Coral-soft:** `#f08e7c` — hover/secondary coral states only.
+- **Mustard:** `#e9b94a` — used sparingly: a single ★ in the nav, a
+  highlighted ring in stats, occasional dot on a numbered annotation.
+- **Olive:** `#6e7448` — quiet third accent for tags or partner glyphs.
+
+### Color rules
+
+- One **coral** moment per ~600vh. If two CTAs are coral, the
+  Roman numerals should be ink-faint instead.
+- Mustard is never used for a CTA. It is jewelry.
+- Pure white (`#fff`) only inside the dark "selected work" panel as
+  inverse text. Never on Paper.
+- Pure black is forbidden. The darkest value is `Ink #15140f`.
+
+### Why single-accent (not multi-accent)
+
+Multi-accent editorial systems (e.g. *The New Yorker* using red for
+Opinion and teal for Culture) work when the publication has stable
+content categories and a long-term reader who learns the code. A
+single-shot studio landing page does not have that runway. One coral
+moment per ~600vh forces the agent to pick the single most important
+beat per viewport instead of balancing two chromatic hierarchies, and
+keeps the page calibrated to the warm-paper canvas. Mustard and olive
+exist as **jewelry** (≤1% surface area: a star, a dot, a partner glyph)
+— never as semantic signals, and never as CTA fills.
+
+### Surface noise
+
+Every page MUST overlay a faint paper noise texture using a fixed,
+pointer-events-disabled `::before` pseudo-element with a
+multiply-blend SVG turbulence at ~5–7% opacity, plus two soft
+radial gradients in `rgba(106, 92, 56, 0.06)` to simulate
+hand-pressed paper warmth.
+
+## 3. Typography
+
+### Families
+
+- **Display / sans:** `Inter Tight` 700–900 weights — headlines, section
+  titles, button text. Letter-spacing `-0.025em` to `-0.04em` at
+  display sizes.
+- **Italic emphasis / serif:** `Playfair Display` Italic, weight 500.
+  Used inline inside display headlines on emphasized nouns, on Roman
+  numerals, on testimonial quotes, on the brand mark `Ø`.
+- **Body:** `Inter` 300–500 — paragraph copy, lab descriptions.
+- **Mono:** `JetBrains Mono` 400–500 — code spans, coordinates,
+  SHAs, plate numbers ("FIG. 01 / OD-26").
+
+### Scale (px)
+
+`9.5 · 10.5 · 11 · 13 · 14 · 16 · 17 · 22 · 26 · 38 · 54 · 66 · 78 · 90 · 200`
+
+### Headline construction
+
+Display headlines mix **bold sans** and **italic serif** in the same
+line. The serif italic carries the emotional words; the sans carries
+the structure. End every section H1/H2 with a coral period — `<span
+class="dot">.</span>`.
+
+```
+Designing intelligence with skills, taste, and code.
+^^^^^^^^^                ^^^^^^^^  ^^^^^      ^^^^
+sans bold                serif italic         coral dot
+```
+
+### Microcopy
+
+- **Eyebrow / label:** 11px Inter Tight 600, `letter-spacing: 0.22em`,
+  uppercase, coral, prefixed with an 18px coral hairline.
+- **Coordinates:** 10px JetBrains Mono, `letter-spacing: 0.04em`,
+  ink-faint, e.g. `52.5200° N · 13.4050° E`.
+- **Page-of-pages:** `004 / 008` in Inter Tight 11px ink-faint.
+- **Roman numerals:** Playfair Italic 14px, coral, `I.` `II.` `III.` etc.
+  at the head of every section rule.
+
+## 4. Spacing & Grid
+
+- **Container:** max-width `1360px`, side padding `64px` desktop,
+  `44px` at ≤1280, `32px` at ≤1080, `24px` at ≤880.
+- **Section padding:** `130px` top+bottom desktop, `90px` for
+  tight sections, `80px` ≤560.
+- **Grid:** 12-column conceptual, executed as CSS Grid with
+  task-specific column ratios. Hero is `0.78fr 1.22fr`.
+- **Vertical rhythm:** 8px baseline. Allow 32–48px between
+  paragraph blocks.
+- **Side rails:** Two 36px-wide fixed vertical strips on the left and
+  right edges of the viewport, each containing a single rotated
+  text label in 10px Inter Tight 600 letter-spaced 0.42em.
+
+## 5. Layout & Composition
+
+- **Top metadata strip** is mandatory: a single horizontal bar above
+  the nav containing the volume/issue, a "Filed under …" badge, and a
+  live-status pulse with version + locale. Inter Tight 10.5px,
+  ink-faint, 1px ink-line border-bottom.
+- **Section rule** is mandatory at the top of every section:
+  `[Roman.] · [meta middle] · [page-of-008]`.
+- **Image annotations**: every featured image carries 4 corner
+  brackets (1px hairlines, 22×22), at least 1 plate number
+  ("Plate Nº 08"), and a coordinate or SHA.
+- **Hero must extend above the fold** at 1440×900 minimum. The image
+  fills the viewport vertically (`calc(100vh - 160px)`), aligned to
+  the right edge.
+- **Method sections** must use a 4-step layout with a horizontal
+  hairline running through the step heads at the same Y, with
+  `→` separators between titles.
+
+## 6. Components
+
+### Buttons
+
+- **Primary:** coral fill `#ed6f5c`, white label, `999px` radius,
+  `14px 22px` padding, with a white arrow `↗` SVG at 14px and a
+  coral 0,14,26,-16 rgba shadow.
+- **Ghost:** transparent, `1px solid rgba(21,20,15,0.2)` border,
+  ink label, same radius and padding.
+
+### Cards
+
+- **Bone-fill cards** (`#f7f1de`), 18px radius, 28×26 padding,
+  inset 1px ink-at-6% ring + 30/60/-30/15 ambient shadow.
+- Each card has a `01–04` italic serif num plus a tag eyebrow on
+  the same row.
+- A bottom-right 28px circular arrow mark turns coral on hover.
+
+### Pill filters
+
+- 10×18 padding, 999px, `1px solid line` border, transparent.
+- Active state: coral fill, white label, count separator opacity 0.7.
+
+### Stat rings
+
+- 32–34px circular dashed rings carrying a 2-digit number; one ring
+  per row may be coral-stroked to denote the highlighted stat.
+
+### Page numbers / index card
+
+- Hero artwork carries a small bordered card on the right edge with
+  `01–04` index entries. The current entry uses bold ink; the rest
+  ink-faint. Each item prefixes the digit with a coral `01` token.
+
+### Side rails
+
+- Fixed 36px vertical strips at left + right edges, hidden below
+  1280px. Each contains rotated 10px Inter Tight uppercase text
+  letter-spaced 0.42em, never wraps.
+
+### Roman section rules
+
+Every section opens with a `.sec-rule`: top hairline 1px, then a
+flex row containing `[Roman]`, a centered metadata cluster, and
+the page-of-008 counter on the right.
+
+## 7. Motion & Interaction
+
+- **Pulse dot:** 6×6 coral circle at top metadata bar and footer,
+  `pulse 2.4s ease-in-out infinite` between 1.0 and 0.35 opacity.
+- **Card hover:** translateY(-3px), arrow mark fills coral.
+- **Button hover:** translateY(-1px), darker coral fill.
+- **Pill hover:** ink-at-4% wash.
+- **Transitions:** `0.18s ease` everywhere; never longer than `0.25s`.
+- **No parallax, no scroll-jacking, no auto-rotators.** Editorial
+  pages do not animate themselves at the user.
+
+## 8. Voice & Brand
+
+- Headlines mix declarative and italicized emotional words.
+- Body copy is plain-spoken and specific. Quote real numbers
+  (12 / 31 / 72), real coordinates (52.5200° N · 13.4050° E),
+  real commands (`pnpm tools-dev`).
+- Microcopy uses publication metaphors: "Filed under", "Plate Nº",
+  "Vol. 01 / Issue Nº 26", "FIN.", "MMXXVI", "Edited by".
+- Latin numerals — Roman for sections, Arabic for stats.
+
+## 9. Anti-patterns
+
+- ❌ No drop shadows above 30px blur. No gradients on text.
+- ❌ No emoji in product copy. ★ is allowed once in the nav CTA.
+- ❌ No glassmorphism, no neon, no neumorphism, no rounded
+  corners larger than 24px (except 32px on the dark "Selected Work" panel).
+- ❌ No more than one coral CTA per viewport.
+- ❌ No collage image without corner brackets and at least one
+  monospace annotation.
+- ❌ No Roman numeral skipped — sections must be sequential.
+- ❌ No pure white, no pure black, no pure 100%-saturation accent.
+
+### Anti-patterns specific to AI-generated imagery
+
+This system is paired with `gpt-image-fal` / `gpt-image-azure` via the
+open-design-landing skill. Several common image-model defaults will
+silently break the Atelier Zero aesthetic, so they are forbidden in
+every collage prompt and rejected on visual review:
+
+- ❌ No lens flares, light leaks, bloom, or cinematic post-FX. The
+  paper-and-museum mood is matte, not cinematic.
+- ❌ No glitch, datamosh, RGB-split, or scanline artifacts.
+- ❌ No photorealistic human faces or stock-portrait people. Plaster
+  fragments, busts, and small scale figures only — eyes never look at
+  the viewer.
+- ❌ No visible AI signatures, watermarks, generator logos, or
+  hallucinated model captions. The rendered surface must read as a
+  printed page, not a model output.
+- ❌ No DSLR-style shallow depth-of-field bokeh on the collage
+  fragments — every plane stays in focus.
+
+## 10. Responsive Behavior
+
+- **Desktop ≥ 1280px:** full container, two side rails visible,
+  metadata strip shows all three columns.
+- **Laptop 1080–1279px:** side rails hidden, container 32–44px
+  padding, metadata strip's middle column collapses.
+- **Tablet 880–1079px:** hero / about / capabilities / testimonial
+  / cta grids collapse to 1 column at 50px gap. Method becomes 2×2,
+  the connecting hairline is removed. Nav links + brand-meta hide;
+  brand-mark + CTA remain.
+- **Phone < 560px:** all multi-column grids become 1 col;
+  section padding drops to 80px.
+
+## 11. Imagery
+
+This system is collage-first. Every page-level image must be
+generated to match these constraints:
+
+- **Background:** warm ivory paper with subtle grain, faint vertical
+  folds, drafting registration marks.
+- **Subject:** classical plaster head fragments, brutalist concrete
+  blocks, archways, stairs, tree, sky cutouts, one small human figure.
+- **Color overlay:** restrained — cream, stone, charcoal, washed
+  coral, occasional mustard, pale-blue inside small sky cutouts.
+- **Annotations baked in:** thin hairline circles, crosshairs,
+  dotted matrices, numbered tags. Never typography that conflicts
+  with on-page copy.
+
+For imagery, use a consistent working prompt pack with per-section variants. All renders should be
+at 16:9 (heroes) or 1:1 (cards / about / cta), saved as PNG, ≥1024px
+on the long edge.
+
+## 12. Agent Prompt Guide
+
+When generating against this design system:
+
+- The page is a **printed magazine** that happens to deploy. Lean
+  into print metaphors before web metaphors.
+- Always include the metadata strip, the side rails, the Roman
+  section rules, and a footer with a giant `Open Design.` (or brand)
+  word at clamp(70px, 13vw, 200px).
+- Coral is a single character on stage. If you find yourself
+  reaching for a second coral element in the same viewport, use
+  ink-faint or mustard instead.
+- Italic serif words inside display headlines should always be
+  emotional nouns: *intelligence*, *taste*, *memorable*, *open*,
+  *visually*. Never verbs, never adjectives.
+- If asked for "more dramatic," the lever is **typography size**
+  (clamp top to 90–110px) and **image height** (push to 100vh - nav).
+  Do not reach for color.
+- If asked for "more minimal," remove decorative side notes and
+  reduce annotations to one per image — never remove the Roman
+  rules or the metadata strip.
@@ -0,0 +1,85 @@
+---
+name: atelier-zero
+description: Magazine-grade, collage-driven editorial system: warm paper canvas, surreal plaster-and-architecture imagery, oversized display type, hairline rules, and Roman-numeral section markers.
+license: MIT
+metadata:
+  author: hand-authored
+---
+
+<!-- HAND_AUTHORED_MANAGED_START -->
+# Atelier Zero Design System Skill (Universal)
+
+## Mission
+You are an expert design-system guideline author for Atelier Zero.
+Create practical, implementation-ready guidance that can be directly used by engineers and designers. This system is hand-authored; treat its DESIGN.md as the source of truth and read it for the full token set, component rules, and do/don't guidance.
+
+## Brand
+Atelier Zero — intelligent, tactile, slightly poetic, international.
+
+## Style Foundations
+- Visual style: editorial, collage, museum-catalog calm
+- Typography fonts: primary=Playfair Display, display=Playfair Display, mono=monospace
+- Color palette: coral, mustard, olive, bone, paper
+- Key tokens: paper=#efe7d2, coral=#e8633f, mustard=#c89a3c, olive=#6b6f4a, ink=#1a1a16
+- Spacing / layout: generous editorial rhythm, asymmetric top-biased
+
+## Accessibility
+WCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, reduced-motion support, 44px+ touch targets, high-contrast support.
+
+## Writing Tone
+intelligent, tactile, slightly poetic, international
+
+## Rules: Do
+- prefer semantic tokens over raw values
+- preserve visual hierarchy
+- keep interaction states explicit
+- read DESIGN.md for the authoritative palette, type, and component rules
+
+## Rules: Don't
+- avoid low contrast text
+- avoid inconsistent spacing rhythm
+- avoid ambiguous labels
+- do not invent hex values outside this system's palette
+
+## Expected Behavior
+- Follow the foundations first, then component consistency.
+- When uncertain, prioritize accessibility and clarity over novelty.
+- Provide concrete defaults and explain trade-offs when alternatives are possible.
+- Keep guidance opinionated, concise, and implementation-focused.
+
+## Guideline Authoring Workflow
+1. Restate the design intent in one sentence before proposing rules.
+2. Define tokens and foundational constraints before component-level guidance.
+3. Specify component anatomy, states, variants, and interaction behavior.
+4. Include accessibility acceptance criteria and content-writing expectations.
+5. Add anti-patterns and migration notes for existing inconsistent UI.
+6. End with a QA checklist that can be executed in code review.
+
+## Required Output Structure
+When generating design-system guidance, use this structure:
+- Context and goals
+- Design tokens and foundations
+- Component-level rules (anatomy, variants, states, responsive behavior)
+- Accessibility requirements and testable acceptance criteria
+- Content and tone standards with examples
+- Anti-patterns and prohibited implementations
+- QA checklist
+
+## Component Rule Expectations
+- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
+- Describe interaction behavior for keyboard, pointer, and touch.
+- State spacing, typography, and color-token usage explicitly.
+- Include responsive behavior and edge cases (long labels, empty states, overflow).
+
+## Quality Gates
+- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
+- Every accessibility statement must be testable in implementation.
+- Prefer system consistency over one-off local optimizations.
+- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.
+
+## Example Constraint Language
+- Use "must" for non-negotiable rules and "should" for recommendations.
+- Pair every do-rule with at least one concrete don't-example.
+- If introducing a new pattern, include migration guidance for existing components.
+
+<!-- HAND_AUTHORED_MANAGED_END -->