# Claude Code — Task Prompt

> Paste the block below into Claude Code (run it from the project root). It is written to
> redesign the RongBerong AI UI into a Fotor-style editor shell **without breaking** the
> existing functionality. Companion files it relies on: `DESIGN.md` and `mockup-editor-shell.html`
> (both in the repo root).

---

```
You are working in my existing Laravel 12 project (RongBerong AI — an AI product-photo/video
studio for f-commerce merchants). I want to REDESIGN THE UI into a Fotor-style 3-zone editor
shell WITHOUT breaking any existing functionality.

READ THESE FIRST, in this order, before writing anything:
1. DESIGN.md            ← the full spec. PART A is a non-negotiable preservation contract.
2. mockup-editor-shell.html  ← the approved visual target (open/inspect it).
3. resources/views/rongberong/index.blade.php
4. public/js/rongberong.js   (~65 KB — this is the app's brain; DO NOT rewrite its logic)
5. public/js/hero-particles.js
6. lang/en.json  and  lang/bn.json
7. app/Http/Controllers/RongBerongController.php
8. routes/web.php

HARD RULES (from DESIGN.md Part A — do not violate):
- Stack stays Laravel + Blade + Tailwind v4 + Vite. NO React/Vue, no new build system.
- DO NOT edit the logic in public/js/rongberong.js. You may add a NEW small file
  public/js/editor-shell.js for rail<->panel switching only.
- Preserve EVERY element ID the JS binds to (full list in DESIGN.md §A.4): mic, transcript,
  vlabel, toggle, outputTypeLabel, file, upload, uploadClear, uph, go, imageUrlInput,
  imageUrlLoad, imageUrlErr, colorInput, accessoriesInput, chips, req, err, stage, stageEmpty,
  motionField, advancedToggle, advancedLabel, advancedContent, presetSave, presets,
  promptToggle, promptToggleLabel, promptArea, promptText, promptCopy, promptCopyLabel,
  promptLib, promptLibSave, approveContainer, approveBtn, hintTip, elapsedVal,
  guideToggle, guideContent.
- Preserve CSS-class / data hooks: .opt, .opts, .opt.sel, [data-v], .field-group,
  .field-group-label, .fg-sel-count, .field, .text-input, .req-cat-hdr, and keep two <button>s
  inside #toggle.
- Keep the bootstrap script (window.__trans, window.__base, window.__hasApiKey) and the
  <meta name="csrf-token"> tag.
- DO NOT change any route, controller method, request field name, or JSON response shape.
  Endpoints must keep working unchanged: /generate, /generate-video, /video-status,
  /fetch-image, /transcribe-voice, /parse-voice, /lang/{locale}.
- All user-facing text via {{ __('key') }} / window.__trans — NO hardcoded strings. New copy
  must be added to BOTH lang/en.json and lang/bn.json AND to the $jsKeys array in
  RongBerongController@index.

APPROACH (lowest risk — restructure in place, do not rewrite the engine):
- Map every ID/class the JS uses, then componentize the Blade into partials under
  resources/views/rongberong/partials/ (topbar, rail, canvas, empty-state,
  config/{upload,describe,product,model,output,generate}.blade.php) and compose them in
  index.blade.php inside the new CSS grid shell (72px rail / 320px panel / fluid canvas,
  64px top bar spanning all). Carry every existing ID/class/data-v/__() into the new partials
  UNCHANGED.
- Keep ALL config sections in the DOM; the rail just toggles which section is visible
  (use a `hidden` class / display), so JS bindings always exist. Move #stage and #go into the
  canvas zone so the result is always visible.
- Restyle .opt/.opts/.field-group/.text-input/#toggle etc. via CSS only — keep class names.
- Apply the brand tokens and visual style from DESIGN.md §B / the mockup (sky-blue #0EA5E9
  accent, Syne/Manrope/Fraunces fonts, soft-blue shadows, subtle doodles, rounded cards).
- Implement responsive behavior from DESIGN.md §B.4 (mobile: rail->bottom tabs,
  panel->bottom sheet, sticky Generate).

WORKFLOW:
- Work in small commits. Don't touch rongberong.js logic.
- After building, run the 12-point ACCEPTANCE CHECKLIST in DESIGN.md §A.8 yourself and report
  pass/fail for each item, testing in BOTH English and বাংলা, desktop and mobile. Confirm the
  network calls to /generate, /generate-video, /video-status, /fetch-image, /transcribe-voice
  still fire with unchanged payloads.
- If any existing binding would have to change, tell me first and propose a wrapper/alias
  instead of editing the engine.

Start by reading the files above and giving me a short plan + the ID/class inventory you found,
BEFORE making changes.
```

---

## How to use this
1. Make sure `DESIGN.md` and `mockup-editor-shell.html` are in the repo root (they are).
2. Open Claude Code in the project root and paste the block above.
3. **Gate 1:** Let it return its plan + the ID/class inventory first. Check the inventory matches §A.4–A.5 of `DESIGN.md` before approving edits.
4. **Gate 2:** After the build, require it to run the §A.8 acceptance checklist (EN + বাংলা, desktop + mobile) and report pass/fail per item.
5. If it ever proposes editing `public/js/rongberong.js`, push back — point it to the wrapper/alias rule.
```