Unified Thread Layout — Interactive Wireframe

State 1: Thread (Default View)

Full-width chat thread, centered at max 800px. All content flows as messages + Living Cards.

Assistant

Welcome! I can help you create ads for your products. Select some products below and tell me what you'd like to create.

You

Generate an Instagram post for Tie Bar Wing Nut

Assistant

Here's a professional ad for the Tie Bar Wing Nut, showcasing it on a real construction site:

🖼️

[Generated Image — 1080x1080]
Click to view in split-screen

IMAGE · Instagram · 1080x1080 · 2K

"Secure your formwork with confidence. Tie Bar Wing Nuts — precision-threaded, built to last."

#reinforcement #construction #tiebarwingnut #formwork

✏️ Edit DONE

📋 Copy DONE

⬇ Download DONE

💾 Save NOT WIRED

🔄 Regen NOT WIRED

🎨 AI Canvas DONE

v2 · IG · 1080x1080 · 2K DONE

🕐 History DONE

Type a message or describe what to create...

🎤 DONE

📎 UI ONLY — attachments not sent to agent

▶

TB

Tie Bar ✕

WN

Wing Nut ✕

+

Instagram ▾

Platform NOT sent to agent context

State 2: Split-Screen (Editing / Building)

Chat stays on left (~45%), workspace editor on right (~55%). Resizable divider between them.

Chat Thread (still interactive)

DONE — chat stays interactive

Assistant

Here's your ad. Click Edit to modify.

✏️ Editing in workspace...

EDITING · Image Inspector open

You

Make the background warmer

Type to chat while editing...

▶

DONE — resizable

Image Inspector

✓ Done

🖼️

[Image with edit controls]

Brightness

Contrast

Crop

Filter

All 5 Workspace Types:

Workspace	Trigger	Status
Image Inspector	Click Edit on image card	WIRED
Canvas Editor	Click AI Canvas on image card	WIRED
Carousel Builder	Click Edit in Builder on carousel card	WIRED
Before/After Builder	Click Edit in Builder on B/A card	WIRED
Text Only Mode	Click Edit Variations on copy card	WIRED

State 3: Fullscreen Workspace (AI Canvas)

AI Canvas in fullscreen for pixel-precise editing. Back button returns to split-screen.

← Back to Chat

DONE

✓ Done

🎨

AI Canvas (SAM2 Editor)

Full-screen canvas with brush, eraser, selection tools. SAM2 mask overlay for precise editing.

🖌 Brush

🧹 Eraser

◻ Select

↩ Undo

v3

All 5 Living Card Types

Each card type renders inline in the chat thread. All share the same lifecycle state machine.

Card Type 1: Image Result Card

🖼️ Generated Image

IMAGE · Instagram · 1080x1080 · 2K

"Professional ad copy here..."

#hashtags

✏️ Edit DONE

📋 Copy DONE

⬇ DL DONE

💾 Save NOT WIRED

🔄 Regen NOT WIRED

🎨 Canvas DONE

v1 DONE — version dots

Card Type 2: Carousel Preview Card

CAROUSEL · 7 slides · Instagram

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Caption: "5 reasons steel reinforcement matters..."

✏️ Edit in Builder DONE

⬇ Download ZIP

💾 Save NOT WIRED

v1

Card Type 3: Before/After Preview Card

BEFORE / AFTER · Instagram · 1080x1080

BEFORE

AFTER

"From outdated to energy independence"

✏️ Edit in Builder DONE

⬇ Download

💾 Save NOT WIRED

Card Type 4: Copy Result Card

TEXT-ONLY · LinkedIn

HOOK

"Did you know 73% of contractors waste 2 hours per pour on manual rebar counts?"

BODY

Next Day Steel's pre-cut, labelled reinforcement arrives ready to place...

CTA

Get your free quote at nextdaysteel.co.uk

#reinforcement #construction #nextdaysteel

Hook Score: REMOVED (was in spec) 1247 chars

📋 Copy DONE

✏️ Edit Variations DONE

🔄 Regen NOT WIRED

Card Type 5: Video Card

VIDEO · Instagram Reel · 6s · 1080p

▶️

[Video Player]

⬇ Download

📋 Copy Text

💾 Save NOT WIRED

🔄 Regen NOT WIRED

Card Lifecycle State Machine

Every card goes through these states. Click each to see the visual.

State: GENERATING

Generating image...

DONE — shimmer placeholder renders during generation

State: EXPANDED

🖼️ Full image visible

IMAGE · Instagram

All action buttons visible

✏️ Edit

📋 Copy

⬇ DL

💾 Save

🔄 Regen

🎨 Canvas

✅ Approve

🗑 Scrap

DONE — full card with all actions

State: EDITING

✏️ Editing in workspace...

EDITING — Split-screen open

DONE — badge overlay when workspace open

State: APPROVED (compact)

🖼️

✅ Approved — Tie Bar Wing Nut Ad

IG · 1080x1080 · v2

⬇ Download

📅 Schedule NOT BUILT

DONE — compact card with checkmark. Schedule button NOT WIRED.

State: SCRAPPED

🗑 Scrapped: Tie Bar Wing Nut Instagram Ad (v1) Restore

DONE — collapsed line with restore

Transition Map

      GENERATING → EXPANDED → EDITING → EXPANDED (new version)

                      │                          │

                      ├→ APPROVED (compact)     ├→ APPROVED

                      └→ SCRAPPED (collapsed)  └→ SCRAPPED

DONE — state machine implemented in CardLifecycle.ts

Unified Input Bar — Detailed View

Single entry point for all interactions. Sticky at bottom.

Full Input Bar Anatomy

Type a message or describe what to create...

🎤

📎

Instagram ▾

▶

TB

Tie Bar ✕

WP

Waler Plate ✕

WN

Wing Nut ✕

+

Feature Status

Feature	Spec Says	Status
Auto-grow textarea	Up to 160px	DONE
Enter to send	Enter sends, Shift+Enter newline	DONE
Product tray	Thumbnails + X to remove + [+] to add. Max 6.	DONE but no max-6 enforcement
Product picker	Popover desktop, full-screen mobile	DONE
Platform selector	5 platforms, persists across messages	DONE but platform NOT sent to agent
Voice input	🎤 button, Web Speech API	DONE
File attach	📎 button, analyze image	UI works, files NOT sent to agent
Send button	Primary color, disabled when empty	DONE
Stop button	Red square during streaming	DONE
Placeholder text	"Type a message or describe what to create..."	Shows "Type your message..." instead
Smart routing	No mode toggle, agent decides	DONE
IdeaBank suggestion chips	Agent sends suggestions when products selected	Auto-trigger removed (was too aggressive). No manual trigger.

Mobile View (<768px)

Full-width cards, compact input bar, bottom sheet for workspace.

Mobile Thread

Assistant

Here's your ad for the Tie Bar Wing Nut.

🖼️

IMAGE · IG

"Secure your formwork..."

✏️ Edit

📋 Copy

⬇ DL

🎨 Canvas

Type...

▶

TB

Tie Bar ✕

+

IG

DONE — full-width cards, compact input

Mobile Workspace (Bottom Sheet)

Chat (dimmed)

Image Inspector

🖼️ Image + Controls

✓ Done

DONE — bottom sheet with drag-to-dismiss

Full Implementation Status

Every feature from the spec, with honest status.

Layout

Feature	Status	Notes
Thread state (default)	DONE	Full-width, 800px centered
Split-screen state	DONE	Resizable divider, 5 workspace types wired
Fullscreen state	DONE	AI Canvas, back button
Mobile bottom sheet	DONE	<768px, drag to dismiss
Tablet 50/50	DONE	768-1023px

Input Bar

Feature	Status	Notes
Auto-grow textarea	DONE
Product tray + picker	DONE	No max-6 enforcement
Platform selector	BROKEN	UI works but platform NOT sent to agent
Voice input	DONE	Web Speech API
File attach	BROKEN	Files analyzed but NOT sent to agent
Send / Stop	DONE
IdeaBank suggestions	PARTIAL	Auto-trigger removed. No replacement.

Living Cards

Feature	Status	Notes
Image card renders in chat	PARTIAL	PR #314 (Living Cards SSE) still open
Carousel card	DONE	Component built, needs SSE wiring too
Before/After card	DONE	Component built
Copy card	PARTIAL	Agent killed headline, caption, hookScore
Video card	DONE	Component built
Lifecycle state machine	DONE	All 5 states
Version dots	DONE
Save to catalog	NOT WIRED	Button disabled "(coming soon)"
Regenerate	NOT WIRED	Button disabled "(coming soon)"
Schedule from approved	NOT BUILT	Not in any card

Agent Integration

Feature	Status	Notes
Send message → agent responds	DONE
Products in agent context	DONE
Platform in agent context	BROKEN	Not sent
Attachments in agent context	BROKEN	Not sent
Brand voice / campaign / audience	NOT BUILT	Hardcoded null
IdeaBank via agent	PARTIAL	Auto-trigger removed, no replacement
Content Planner deep-link	DONE	Prompt/platform/aspectRatio pre-filled

Session Management

Feature	Status	Notes
Session history drawer	DONE
Load old session	DONE
New chat	DONE
Session persistence	DONE	Messages + cards saved to DB

Production Issues

Issue	Status	Notes
Build broken (@reduxjs/toolkit)	BROKEN	Next deploy will fail
4 test failures	BROKEN	LinkedIn tool count + tone tests
Redis not connected	PRE-EXISTING	Sessions in memory only
StudioContext 12 generation fields	CLEANUP NEEDED	Dead fields not removed