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
This commit is contained in:
Z User committed
1 parent
7acc0c5451
commit
e45b68bb8b
1089 files changed
+260614
No files matched your search
Executable
+327
@@ -0,0 +1,327 @@
|
||||
---
|
||||
name: Canvas and Device Constraints
|
||||
description: Shared sizing, viewport, device-ratio, and export-surface rules for design artifacts.
|
||||
mode: reference
|
||||
platform: any
|
||||
scenario: canvas-device-constraints
|
||||
preview:
|
||||
type: none
|
||||
default_for:
|
||||
- device size
|
||||
- viewport
|
||||
- canvas
|
||||
- resolution
|
||||
- aspect ratio
|
||||
- phone frame
|
||||
- desktop frame
|
||||
- export size
|
||||
- 尺寸
|
||||
- 分辨率
|
||||
- 画布
|
||||
- 手机比例
|
||||
- 导出尺寸
|
||||
fidelity: system
|
||||
---
|
||||
|
||||
# Canvas and Device Constraints
|
||||
|
||||
Use this shared reference whenever a design artifact includes device previews, fixed export sizes, phone frames, dashboard canvases, deck canvases, social cards, long images, or image-export surfaces.
|
||||
|
||||
Core rule:
|
||||
|
||||
```text
|
||||
Artifact canvas ≠ device screen canvas ≠ export surface
|
||||
```
|
||||
|
||||
A flow diagram may use a wide canvas. A phone preview inside it must still preserve a real phone ratio. A social card may use a fixed image export ratio. A dashboard may use a desktop viewport. Do not stretch everything into generic cards.
|
||||
|
||||
---
|
||||
|
||||
## Extensible size registry
|
||||
|
||||
This file is the canonical place for platform size presets. Do not delete it when simplifying routing. Add new platform presets here instead of scattering dimensions across artifact skills.
|
||||
|
||||
Use this registry for:
|
||||
|
||||
- Xiaohongshu / RED covers, notes, long images, and share cards
|
||||
- WeChat article covers, article images, and long images
|
||||
- Posters, flyers, social cards, and story images
|
||||
- Mobile app, mobile web, and H5 viewports
|
||||
- Desktop web, dashboard, and deck canvases
|
||||
|
||||
When a platform has multiple valid sizes, record them as named presets. Artifact skills should reference these presets instead of hard-coding dimensions.
|
||||
|
||||
Recommended preset marker format:
|
||||
|
||||
```html
|
||||
<section data-platform="xhs" data-preset="cover-3x4" data-export-ratio="3:4">
|
||||
<section data-platform="xhs" data-preset="portrait-4x5" data-export-ratio="4:5">
|
||||
<section data-platform="xhs" data-preset="square" data-export-size="1080x1080">
|
||||
<section data-platform="wechat" data-preset="article-cover">
|
||||
<section data-platform="poster" data-preset="a4-portrait">
|
||||
```
|
||||
|
||||
### Current social/export presets
|
||||
|
||||
```text
|
||||
Social square: 1080 × 1080
|
||||
Social portrait: 1080 × 1350
|
||||
Story / vertical: 1080 × 1920
|
||||
Xiaohongshu cover: 3:4 or 4:5
|
||||
Xiaohongshu square: 1:1, usually 1080 × 1080
|
||||
Xiaohongshu long image: width 1080, height content-driven
|
||||
WeChat long image: width 750 or 1080, height content-driven
|
||||
Poster portrait: ratio-driven, preset required
|
||||
```
|
||||
|
||||
If a user provides a platform-specific size, use the user-provided size and add it to this registry if it is likely to be reused.
|
||||
|
||||
### User-provided Chinese social media presets
|
||||
|
||||
These presets are collected from the user's provided social-media size reference image. Treat them as practical production presets, not as immutable official platform specifications. If a platform updates its recommended sizes, update this section.
|
||||
|
||||
#### Xiaohongshu / RED
|
||||
|
||||
| Preset | Size | Ratio | Use |
|
||||
|---|---:|---:|---|
|
||||
| `xhs-avatar` | 400 × 400 | 1:1 | 头像 |
|
||||
| `xhs-profile-background` | 1000 × 800 | 5:4 | 个人背景图 |
|
||||
| `xhs-note-cover-portrait` | 1242 × 1660 | ~3:4 | 图文封面，竖版 |
|
||||
| `xhs-note-cover-square` | 1080 × 1080 | 1:1 | 图文封面，方版 |
|
||||
| `xhs-note-cover-landscape` | 2560 × 1440 | 16:9 | 图文封面，横版 |
|
||||
| `xhs-video-cover-portrait` | 1080 × 1440 | 3:4 | 视频封面，竖版 |
|
||||
| `xhs-video-cover-landscape-4x3` | 1440 × 1080 | 4:3 | 视频封面，横版；source image labels it as 3:4, but the pixel ratio is 4:3 |
|
||||
| `xhs-video-cover-landscape-16x9` | 1920 × 1080 | 16:9 | 视频封面，横版 / widescreen |
|
||||
|
||||
Recommended markers:
|
||||
|
||||
```html
|
||||
<section data-platform="xhs" data-preset="xhs-note-cover-portrait" data-export-size="1242x1660" data-export-ratio="3:4">
|
||||
<section data-platform="xhs" data-preset="xhs-note-cover-square" data-export-size="1080x1080" data-export-ratio="1:1">
|
||||
<section data-platform="xhs" data-preset="xhs-note-cover-landscape" data-export-size="2560x1440" data-export-ratio="16:9">
|
||||
<section data-platform="xhs" data-preset="xhs-video-cover-portrait" data-export-size="1080x1440" data-export-ratio="3:4">
|
||||
```
|
||||
|
||||
#### Douyin / TikTok China
|
||||
|
||||
| Preset | Size | Ratio | Use |
|
||||
|---|---:|---:|---|
|
||||
| `douyin-avatar` | 400 × 400 | 1:1 | 头像 |
|
||||
| `douyin-profile-background` | 1125 × 633 | ~16:9 | 个人背景图 |
|
||||
| `douyin-cover-portrait-3x4` | 1242 × 1660 | ~3:4 | 封面，竖版 |
|
||||
| `douyin-cover-portrait-9x16` | 1080 × 1920 | 9:16 | 封面，竖版 |
|
||||
| `douyin-cover-landscape-16x9` | 1080 × 608 | ~16:9 | 封面，横版 |
|
||||
|
||||
Recommended markers:
|
||||
|
||||
```html
|
||||
<section data-platform="douyin" data-preset="douyin-cover-portrait-9x16" data-export-size="1080x1920" data-export-ratio="9:16">
|
||||
<section data-platform="douyin" data-preset="douyin-cover-landscape-16x9" data-export-size="1080x608" data-export-ratio="16:9">
|
||||
```
|
||||
|
||||
#### WeChat ecosystem
|
||||
|
||||
| Preset | Size | Ratio | Use |
|
||||
|---|---:|---:|---|
|
||||
| `wechat-official-account-avatar` | 240 × 240 | 1:1 | 公众号头像 |
|
||||
| `wechat-official-account-cover` | 900 × 383 | ~2.35:1 | 公众号封面 |
|
||||
| `wechat-official-account-thumbnail` | 200 × 200 | 1:1 | 公众号小图 |
|
||||
| `wechat-official-account-qrcode-card` | 600 × 600 | 1:1 | 公众号二维码名片 |
|
||||
| `wechat-official-account-guide-image` | 1080 × 300 | 18:5 | 公众号内容引导图 |
|
||||
| `wechat-channels-cover-portrait` | 1080 × 1260 | 6:7 | 视频号封面，竖版 |
|
||||
| `wechat-channels-cover-landscape` | 1080 × 608 | ~16:9 | 视频号封面，横版 |
|
||||
| `wechat-miniprogram-cover` | 520 × 416 | 5:4 | 小程序封面 |
|
||||
| `wechat-moments-cover` | 1280 × 1184 | ~1.08:1 | 朋友圈封面 |
|
||||
|
||||
Recommended markers:
|
||||
|
||||
```html
|
||||
<section data-platform="wechat" data-preset="wechat-official-account-cover" data-export-size="900x383">
|
||||
<section data-platform="wechat" data-preset="wechat-official-account-guide-image" data-export-size="1080x300">
|
||||
<section data-platform="wechat-channels" data-preset="wechat-channels-cover-portrait" data-export-size="1080x1260" data-export-ratio="6:7">
|
||||
<section data-platform="wechat-moments" data-preset="wechat-moments-cover" data-export-size="1280x1184">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Default viewport presets
|
||||
|
||||
```text
|
||||
iOS default: 390 × 844
|
||||
iOS large: 430 × 932
|
||||
iOS small: 375 × 812
|
||||
|
||||
Android default: 360 × 800
|
||||
Android large: 412 × 915
|
||||
|
||||
Mobile web / H5: 390 × 844
|
||||
Tablet: 768 × 1024
|
||||
Desktop web: 1440 × 900
|
||||
Dashboard: 1440 × 1024
|
||||
Deck: 1600 × 900
|
||||
Deck HD: 1920 × 1080
|
||||
|
||||
Social square: 1080 × 1080
|
||||
Social portrait: 1080 × 1350
|
||||
Story / vertical: 1080 × 1920
|
||||
Xiaohongshu cover: 1242 × 1660, 1080 × 1080, 2560 × 1440
|
||||
Douyin cover: 1242 × 1660, 1080 × 1920, 1080 × 608
|
||||
WeChat OA cover: 900 × 383
|
||||
WeChat guide: 1080 × 300
|
||||
WeChat Channels: 1080 × 1260 or 1080 × 608
|
||||
Long image: width 1080, height content-driven
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Scenario defaults
|
||||
|
||||
### Prototype
|
||||
|
||||
- Mobile app and mobile web previews default to `390 × 844`.
|
||||
- Android-specific previews default to `360 × 800`.
|
||||
- Desktop web previews default to `1440 × 900`.
|
||||
- Dashboard previews default to `1440 × 1024`.
|
||||
- Flow diagrams may use a wide canvas.
|
||||
- Screen previews inside flow diagrams must keep device aspect ratio.
|
||||
|
||||
### Tool H5
|
||||
|
||||
- Canonical surface is mobile portrait.
|
||||
- Default mobile viewport: `390 × 844`.
|
||||
- Desktop view should either center a realistic mobile frame or intentionally expand the experience.
|
||||
- Do not leave a mobile column floating in a large empty desktop canvas.
|
||||
- Result/share cards should use explicit export ratios.
|
||||
|
||||
### Content Page
|
||||
|
||||
- Long-form HTML is responsive.
|
||||
- WeChat article layout is mobile-first and editor-safe.
|
||||
- Generic long image uses explicit width and content-driven height when requested.
|
||||
- Xiaohongshu covers, notes, and fixed-card sequences use `social-card.md`, not `content-page.md`.
|
||||
|
||||
### Deck
|
||||
|
||||
- Default deck canvas: `1600 × 900`.
|
||||
- HD deck export: `1920 × 1080`.
|
||||
- Deck viewport should scale to fit the browser, not reflow like a webpage.
|
||||
|
||||
### Landing Page
|
||||
|
||||
- Responsive web first.
|
||||
- Validate at `375px`, `768px`, and `1280px`.
|
||||
- Product screenshots or device mockups must preserve their own viewport ratios.
|
||||
|
||||
---
|
||||
|
||||
## Device frame rules
|
||||
|
||||
When showing mobile screens:
|
||||
|
||||
- preserve aspect ratio
|
||||
- keep safe margins
|
||||
- include status/nav bars only when useful
|
||||
- keep tap targets readable
|
||||
- avoid shrinking full screens until text becomes unreadable
|
||||
- use simplified mini-previews when space is limited
|
||||
- use exact-ratio full previews in screen inventory, prototype, or tool preview sections
|
||||
|
||||
Recommended markers:
|
||||
|
||||
```html
|
||||
<section data-device="ios" data-viewport="390x844">
|
||||
<section data-device="ios-large" data-viewport="430x932">
|
||||
<section data-device="android" data-viewport="360x800">
|
||||
<section data-platform="mobile-web" data-viewport="390x844">
|
||||
<section data-platform="desktop-web" data-viewport="1440x900">
|
||||
<section data-platform="dashboard" data-viewport="1440x1024">
|
||||
<section data-export-size="1080x1920">
|
||||
<section data-export-ratio="3:4">
|
||||
```
|
||||
|
||||
Recommended CSS:
|
||||
|
||||
```css
|
||||
.phone-frame {
|
||||
width: min(390px, 100%);
|
||||
aspect-ratio: 390 / 844;
|
||||
}
|
||||
|
||||
.phone-frame[data-size="ios-large"] {
|
||||
width: min(430px, 100%);
|
||||
aspect-ratio: 430 / 932;
|
||||
}
|
||||
|
||||
.phone-frame[data-size="ios-small"] {
|
||||
width: min(375px, 100%);
|
||||
aspect-ratio: 375 / 812;
|
||||
}
|
||||
|
||||
.phone-frame[data-size="android"] {
|
||||
width: min(360px, 100%);
|
||||
aspect-ratio: 360 / 800;
|
||||
}
|
||||
|
||||
.desktop-frame {
|
||||
aspect-ratio: 1440 / 900;
|
||||
}
|
||||
|
||||
.dashboard-frame {
|
||||
aspect-ratio: 1440 / 1024;
|
||||
}
|
||||
|
||||
.social-card[data-ratio="3:4"] {
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
|
||||
.social-card[data-ratio="4:5"] {
|
||||
aspect-ratio: 4 / 5;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Flow diagram vs screen preview
|
||||
|
||||
For interaction flow diagrams:
|
||||
|
||||
- Use a wide canvas for the overall diagram.
|
||||
- Use abstract nodes for minor actions and state changes.
|
||||
- Use exact-ratio screen previews only for key screens.
|
||||
- Do not draw every state as a full phone screen.
|
||||
- Do not let phone previews become landscape cards.
|
||||
- When the screen preview is too large for the flow diagram, use a compact node plus a separate exact-ratio screen inventory.
|
||||
|
||||
---
|
||||
|
||||
## Export surface rules
|
||||
|
||||
When the artifact is meant to be exported as an image:
|
||||
|
||||
- declare the export size or ratio explicitly
|
||||
- keep important content inside safe margins
|
||||
- test title readability at thumbnail size
|
||||
- avoid tiny captions unless export resolution is high enough
|
||||
- do not rely on browser viewport size for fixed social exports
|
||||
- do not silently redesign during export
|
||||
|
||||
For long images:
|
||||
|
||||
- use stable card boundaries
|
||||
- avoid content blocks that depend on viewport height
|
||||
- keep vertical rhythm consistent
|
||||
- set a clear export width, usually `1080px`
|
||||
|
||||
---
|
||||
|
||||
## Quality checklist
|
||||
|
||||
Before delivery, check:
|
||||
|
||||
- Is the artifact canvas appropriate for the scenario?
|
||||
- Are device previews using realistic viewport ratios?
|
||||
- Are mobile screens locked to phone proportions instead of arbitrary cards?
|
||||
- Is the export surface declared when image export is expected?
|
||||
- Does desktop fallback look intentional, not empty?
|
||||
- Are phone previews readable at their displayed size?
|
||||
- Are flow diagrams using abstract nodes when full device previews would hurt readability?
|
||||
Reference in new issue
Block a user