---
phase: 42-wallpapers-social-format-conversion-voice
plan: 02
subsystem: api
tags: [sharp, svg, llm, puter-inference, wallpaper, social-post, hashtags, carousel, renderers, typescript]

# Dependency graph
requires:
  - phase: 42-wallpapers-social-format-conversion-voice
    plan: 01
    provides: WallpaperBundle, AppIconBundle, SocialPostBundle types in types.ts; stub wallpaper-renderer.ts and social-renderer.ts
  - phase: 41-diagrams-icons-theme-engine
    provides: puterChatComplete helper, icon-renderer.ts as implementation reference, sharp rasterization patterns
provides:
  - renderWallpaper function + PLATFORM_DIMENSIONS constant in wallpaper-renderer.ts
  - renderSocialPost function + PLATFORM_CHAR_LIMITS constant in social-renderer.ts
  - LLM SVG generation via puterChatComplete with system prompt enforcing exact viewBox dimensions
  - Sharp rasterization at exact platform dimensions with density: 300
  - Multi-size app icon bundle (1024/512/256/64/32px)
  - Instagram carousel with per-slide character limits and hashtag suggestions
affects:
  - 42-05 (UI panels for wallpaper and social-post depend on these renderers)
  - 42-06 (UI wiring connects job runner to rendered results)

# Tech tracking
tech-stack:
  added: []
  patterns:
    - "System prompt + user message pattern for LLM: role:system with exact output instructions, role:user with creative prompt"
    - "density: 300 when loading SVG into sharp — prevents blur at large wallpaper dimensions (pitfall from research)"
    - "Robust markdown fence stripping: /```json([\s\S]*?)```/ with fallback to bare /(\{[\s\S]*\})/ extraction"
    - "Conditional bundle type: same renderer returns AppIconBundle for app-icon/favicon, WallpaperBundle for all other platforms"

key-files:
  created: []
  modified:
    - server/src/services/renderers/wallpaper-renderer.ts
    - server/src/services/renderers/social-renderer.ts

key-decisions:
  - "PLATFORM_DIMENSIONS exported as named constant (not magic numbers) — all 12 platforms in one lookup table"
  - "APP_ICON_SIZES = [1024, 512, 256, 64, 32] as const — multi-size bundle returned when platform is app-icon or favicon"
  - "PLATFORM_CHAR_LIMITS exported as named constant — 4 platforms: twitter-x(280), linkedin(3000), instagram-caption(2200), instagram-carousel(300)"
  - "Carousel uses slides[] in SocialPostBundle; all other platforms omit slides field (spread operator conditional)"

patterns-established:
  - "PLATFORM_DIMENSIONS lookup pattern: look up dimensions at render time, throw with available-keys list if not found"
  - "Instagram carousel detection: platform === 'instagram-carousel' switches system prompt to request slides array"
  - "LLM JSON parse: try direct regex extraction before full JSON.parse — handles both fenced and bare object responses"

requirements-completed: [WALL-01, WALL-02, WALL-03, WALL-04, SOCIAL-01, SOCIAL-02, SOCIAL-03]

# Metrics
duration: 5min
completed: 2026-04-04
---

# Phase 42 Plan 02: Wallpaper Renderer and Social Post Renderer

**LLM SVG wallpaper generation rasterized via sharp at 12 platform dimensions, plus platform-aware social post JSON renderer with hashtags and Instagram carousel support**

## Performance

- **Duration:** ~5 min
- **Started:** 2026-04-04T22:11:00Z
- **Completed:** 2026-04-04T22:14:15Z
- **Tasks:** 2
- **Files modified:** 2

## Accomplishments
- Replaced wallpaper-renderer.ts stub with full implementation: PLATFORM_DIMENSIONS constant (12 platforms), APP_ICON_SIZES (5 sizes), LLM SVG generation via puterChatComplete with system prompt, sharp rasterization at density: 300
- App icon/favicon path returns AppIconBundle with 5-size array; all other platforms return WallpaperBundle with single PNG
- Replaced social-renderer.ts stub with full implementation: PLATFORM_CHAR_LIMITS constant (4 platforms), LLM JSON generation, robust markdown fence stripping, Instagram carousel with slides array
- TypeScript compiles cleanly with zero errors across both files

## Task Commits

Each task was committed atomically:

1. **Task 1: Implement wallpaper renderer with PLATFORM_DIMENSIONS** - `f0a3666a` (feat)
2. **Task 2: Implement social post renderer with hashtags and carousel** - `9e39a9ef` (feat)

**Plan metadata:** (docs commit — see below)

## Files Created/Modified
- `server/src/services/renderers/wallpaper-renderer.ts` - Full implementation replacing stub: PLATFORM_DIMENSIONS, APP_ICON_SIZES, renderWallpaper with LLM SVG + sharp rasterization
- `server/src/services/renderers/social-renderer.ts` - Full implementation replacing stub: PLATFORM_CHAR_LIMITS, renderSocialPost with LLM JSON + hashtags/carousel

## Decisions Made
- Removed a dead `raw` variable (unused first LLM call) that was accidentally left in during writing — cleaned before commit as Rule 1 (bug: unnecessary extra LLM call that's discarded)
- Chose spread operator conditional `...(parsed.slides !== undefined ? { slides: parsed.slides } : {})` for optional slides field — keeps SocialPostBundle type correct without `slides: undefined` in JSON output

## Deviations from Plan

### Auto-fixed Issues

**1. [Rule 1 - Bug] Removed dead LLM call in wallpaper-renderer**
- **Found during:** Task 1 (review before commit)
- **Issue:** Initial draft had an unused `const raw = await puterChatComplete(...)` call that was discarded — an unnecessary extra API call
- **Fix:** Removed the dead `generateWallpaperSvg` helper function entirely; the single `puterChatComplete` call in `renderWallpaper` is sufficient
- **Files modified:** server/src/services/renderers/wallpaper-renderer.ts
- **Verification:** tsc --noEmit passes; logic unchanged
- **Committed in:** f0a3666a (part of Task 1 commit)

---

**Total deviations:** 1 auto-fixed (1 bug)
**Impact on plan:** Removed dead code before commit. No scope creep.

## Issues Encountered
None.

## User Setup Required
None - no external service configuration required.

## Next Phase Readiness
- wallpaper-renderer.ts and social-renderer.ts fully implemented; Plans 42-05 (UI panels) and 42-06 (UI wiring) can proceed
- PLATFORM_DIMENSIONS and PLATFORM_CHAR_LIMITS are exported constants ready for UI import
- Plans 42-03 (convert renderer) and 42-04 (voice) are independent and can proceed in parallel

## Self-Check: PASSED
- `server/src/services/renderers/wallpaper-renderer.ts` — FOUND
- `server/src/services/renderers/social-renderer.ts` — FOUND
- Commit `f0a3666a` — FOUND
- Commit `9e39a9ef` — FOUND

---
*Phase: 42-wallpapers-social-format-conversion-voice*
*Completed: 2026-04-04*