feat: UX hardening P0 — Plot Board DnD safety + Writer mode transparency

[qnbs]

User description

Context

Part 1 of a stacked pair addressing user-facing UX/interaction risks from a focused audit. This PR carries the two P0 items (kept separate from P1/P2 so each PR stays under CodeAnt's ~100-file review limit). PR 2 (feat/ux-hardening-p1) is stacked on this branch.

Items

2 · Plot Board drag-and-drop safety (data-integrity)

• handleDragOver previously rewrote a scene's act on every hover frame, so merely passing the cursor over another column reassigned the scene even when the drop was cancelled. It is now highlight-only; the act change commits in handleDragEnd (act-N container, or adopted from the dropped-on card).
• handleAddForAct used setTimeout + sections[sections.length-1] against a stale closure, reassigning the wrong section's act; addManuscriptSection also silently dropped every passed field but title. The reducer now honors the full section payload (act/color/status/summary/position) and add-to-act is a single deterministic dispatch (handleAddSectionForAct).

1 · Writer-Studio mode transparency

• WriterModeBadge: chips for each active non-default mode (Flow/Focus/ProForge/collapsed panels) + a one-click "restore standard layout" (clears focus/collapse/flow and turns ProForge off).
• WriterModeCoachmark + useFirstUseFlag: one-time, localStorage-persisted explainers on first activation of Flow/Focus/ProForge.
• useWriterLayout.resetLayout().

Tests & i18n

• New/updated unit tests: Plot Board DnD determinism + reducer field-honoring; Writer badge visibility, reset dispatch, focus chip.
• i18n: 16 writer.* keys across all 17 locales (+ rebuilt bundles).
• Local gate green: lint, typecheck, i18n:check, targeted vitest, suppressions OK.

🤖 Generated with Claude Code

---

CodeAnt-AI Description

Improve scene board drop behavior and make writer modes easier to understand

What Changed

• Dragging a scene now changes its act only when dropped, so hovering over another column no longer reassigns it by mistake.
• Adding a scene directly to an act now sets the act at creation time, and new scenes keep their full details instead of losing fields.
• Scene board positions for unplaced scenes now stay stable between refreshes instead of jumping around.
• Writer mode now shows a visible badge for active modes, with chips for Flow, Focus, ProForge, and hidden panels, plus one button to restore the default layout.
• First-time Flow, Focus, and ProForge users now see one-time coachmarks explaining each mode.
• Resetting the writer layout now also returns mobile view to the default tab and turns off ProForge.

Impact

✅ Fewer accidental scene moves
✅ Safer add-to-act scenes
✅ Clearer writer mode status

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
worldscript-studio	Ready	Preview, Comment	Jun 20, 2026 9:12pm

[qnbs]

@CodeAnt-AI review

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This diagram shows how the plot board now commits scene act changes only on drop and how the writer studio surfaces active modes with coachmarks plus a single action to restore the standard layout.

sequenceDiagram
    participant User
    participant PlotBoard as Plot board UI
    participant Store as Project store
    participant WriterUI as Writer view UI
    participant Layout as Writer layout manager
    participant LocalStorage

    Note over User,PlotBoard: Plot board drag and drop safety

    User->>PlotBoard: Drag scene card into another act column
    PlotBoard->>PlotBoard: Highlight target act during drag only
    User->>PlotBoard: Drop scene on target column or card
    PlotBoard->>Store: Commit new act for dropped scene based on drop target

    Note over User,WriterUI: Writer modes transparency and reset

    User->>WriterUI: Enable Flow Focus or ProForge mode
    WriterUI->>LocalStorage: Check first use flag for this mode
    WriterUI-->>User: Show mode badge and first use coachmark if needed
    User->>WriterUI: Click restore standard layout
    WriterUI->>Layout: Reset layout and clear non standard modes
    Layout-->>User: Return to default three column writer view

Loading

---

Generated by CodeAnt AI

[qnbs]

@CodeAnt-AI review

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This diagram shows how the Plot Board now commits scene act changes only on drop and adds scenes to a specific act deterministically, and how the Writer Studio surfaces active modes with a reset action and one-time coachmarks stored via a UI flag helper.

sequenceDiagram
    participant User
    participant PlotBoard
    participant StateStore
    participant Writer
    participant WriterStudio
    participant Storage

    User->>PlotBoard: Drop scene onto target act
    PlotBoard->>StateStore: Commit scene act change based on drop target

    User->>PlotBoard: Add new scene to specific act
    PlotBoard->>StateStore: Add section with act and defaults in single dispatch

    Writer->>WriterStudio: Enable Flow, Focus, ProForge or collapse panel
    WriterStudio->>Storage: Check first-use flag and show coachmark if needed

    Writer->>WriterStudio: Click restore standard layout
    WriterStudio->>StateStore: Reset layout and turn off ProForge

Loading

---

Generated by CodeAnt AI

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[qnbs]

@CodeAnt-AI review

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This PR makes Plot Board scene moves act-safe by committing act changes only on drop, and improves Writer Studio transparency with visible mode badges, one-time coachmarks, and a single restore-layout action backed by a UI flag store.

sequenceDiagram
    participant User as Writer
    participant PlotBoard as Plot Board UI
    participant WriterUI as Writer View UI
    participant Store as Project store
    participant Flags as UI flag storage

    User->>PlotBoard: Drag scene card over act lane
    PlotBoard->>PlotBoard: Highlight hovered act lane only
    User->>PlotBoard: Drop scene card
    PlotBoard->>Store: Update scene act based on drop target

    User->>WriterUI: Enable Flow, Focus, or ProForge mode
    WriterUI->>Flags: Read first use flag for mode
    WriterUI-->>User: Show one time coachmark if not seen
    User->>WriterUI: Click Restore standard layout
    WriterUI->>Store: Reset layout and turn off ProForge mode

Loading

---

Generated by CodeAnt AI

[qnbs]

@CodeAnt-AI review

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This PR hardens plot board drag and drop so scene acts change only on drop and new scenes are created directly in a chosen act, and it makes writer modes visible with a resettable layout and one-time coachmarks backed by a UI flag store.

sequenceDiagram
    participant Writer
    participant PlotBoard as Plot Board UI
    participant ProjectStore as Project store
    participant WriterStudio as Writer Studio UI
    participant Layout as Layout manager
    participant UIFlags as UI flag store

    Writer->>PlotBoard: Drag and drop scene card between act lanes
    PlotBoard->>ProjectStore: Commit scene act change only on drop (hover is highlight-only)

    Writer->>PlotBoard: Add new scene in a specific act
    PlotBoard->>ProjectStore: Create new section with that act and default metadata in one dispatch

    Writer->>WriterStudio: Enable Flow/Focus/ProForge or collapse panels
    WriterStudio->>UIFlags: Check first-use flag, show one-time coachmark, mark mode as seen
    WriterStudio-->>Writer: Show mode badge with active mode chips and restore layout action

    Writer->>WriterStudio: Click restore standard layout
    WriterStudio->>Layout: Reset layout to default and turn off ProForge mode in store
    Layout-->>Writer: Render standard three-column writer view without mode badge

Loading

---

Generated by CodeAnt AI

[qnbs]

@CodeAnt-AI review

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This diagram shows how the Plot Board now commits act changes only on drop and how adding a new scene to an act creates the section with its act and defaults in a single deterministic dispatch.

sequenceDiagram
    participant User
    participant SceneBoard
    participant ProjectStore

    User->>SceneBoard: Drag scene card
    SceneBoard->>SceneBoard: handleDragOver highlights target act column only
    User->>SceneBoard: Drop scene over act lane or another card
    SceneBoard->>SceneBoard: handleDragEnd determines target act from drop target
    SceneBoard->>ProjectStore: Dispatch updateManuscriptSection with new act (if changed)
    ProjectStore-->>SceneBoard: Return updated manuscript sections

    User->>SceneBoard: Click add scene for specific act
    SceneBoard->>ProjectStore: Dispatch addManuscriptSection with act and default fields
    ProjectStore-->>SceneBoard: New scene appears already assigned to chosen act

Loading

---

Generated by CodeAnt AI

[qnbs]

@CodeAnt-AI review

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This PR makes Plot Board scene moves deterministic by committing act changes only on drop and adding scenes to a specific act in a single dispatch, and improves Writer Studio mode transparency with a mode badge, reset layout action, and first-use coachmarks persisted via a UI flag store.

sequenceDiagram
    participant User
    participant PlotBoard
    participant ProjectStore
    participant WriterLayout
    participant UIFlagStore

    User->>PlotBoard: Drag scene card across act columns
    PlotBoard->>PlotBoard: Highlight potential target act without changing scene act
    User->>PlotBoard: Drop scene on act lane or another card
    PlotBoard->>ProjectStore: Commit scene act change based on final drop target
    User->>PlotBoard: Click add scene button in a specific act
    PlotBoard->>ProjectStore: Add new scene with act and defaults in one deterministic dispatch

    User->>WriterLayout: Turn on Flow, Focus, or ProForge mode
    WriterLayout->>UIFlagStore: Read first use flag and show mode badge or coachmark
    User->>WriterLayout: Dismiss coachmark or click restore standard layout
    WriterLayout->>UIFlagStore: Persist first use flag and reset layout and ProForge state

Loading

---

Generated by CodeAnt AI