Skip to content

Commit 401bdbf

Browse files
lambasuclaude
andcommitted
Rework P07 Stage View as persistent left panel with chat on right
- Stage View auto-opens when contact 44 is active; no longer a fixed overlay - Split layout: Stage View fills left, chat becomes 440px right rail - Build animation: sections fade/slide in sequentially on mount (simulates live building) - Progress bar sweeps across on open, settles when done - "Building…" badge pulses orange → flips to green "Live" when complete - "View Live Preview" on v1 card keeps v1 (blue accent); on v2 card transitions website to purple accent + updated headline with smooth CSS transitions - Version context flows: message action → MessageRow → onCardAction → ChatView state Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 49bd768 commit 401bdbf

7 files changed

Lines changed: 270 additions & 161 deletions

File tree

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,5 @@ dist-ssr
2525

2626
# Claude Code config (personal permissions, hooks, agents — not needed by forkers)
2727
.claude/
28+
.vercel
29+
.env*.local

src/components/ChatView.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,14 @@
1313
min-width: 0;
1414
}
1515

16+
/* Stage View split layout — Stage View panel is on the left; chat
17+
becomes a fixed-width right rail so both are visible at once. */
18+
.chat-view.has-stage-view .chat-view-main {
19+
flex: none;
20+
width: 440px;
21+
border-left: 1px solid #E8E8E8;
22+
}
23+
1624
/* Header styles live in ChatHeader.css. Compose styles live in Compose.css. */
1725

1826
/* ── Messages ── */

src/components/ChatView.jsx

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,10 @@ export default function ChatView({
131131
const [groupIntelAction, setGroupIntelAction] = useState(null) // null | 'confirmed' | 'skipped'
132132
const [p5Action, setP5Action] = useState(null) // null | 'confirmed' | 'skipped'
133133
const [p6State, setP6State] = useState(null) // null | 'prompted' | 'workflows' | 'agency'
134-
const [showStageView, setShowStageView] = useState(false)
134+
// P7 — Lovable Stage View: auto-opens for contact 44; tracks which website
135+
// version (v1 blue / v2 purple) the preview is showing.
136+
const [showStageView, setShowStageView] = useState(activeChatId === 44)
137+
const [stageViewVersion, setStageViewVersion] = useState('v1')
135138
const messagesEndRef = useRef(null)
136139

137140
// Reset per-chat ephemeral state when activeChatId changes. Using the
@@ -157,7 +160,8 @@ export default function ChatView({
157160
setGroupIntelAction(null)
158161
setP5Action(null)
159162
setP6State(null)
160-
setShowStageView(false)
163+
setShowStageView(activeChatId === 44)
164+
setStageViewVersion('v1')
161165
setMainTyping(null)
162166
const intentMatches = navIntent && navIntent.chatId === activeChatId
163167
const intentHasSession = intentMatches && 'sessionId' in navIntent
@@ -912,9 +916,10 @@ export default function ChatView({
912916
// and navigate there with the fix plan already loaded.
913917
// P7: "View Live Preview" card action — open Teams Stage View with the
914918
// Lovable-generated Morgan Collective site.
915-
const handleCardAction = ({ type }) => {
919+
const handleCardAction = ({ type, version }) => {
916920
if (type === 'open_stage_view') {
917921
setShowStageView(true)
922+
if (version) setStageViewVersion(version)
918923
return
919924
}
920925
if (type !== 'open_in_agency') return
@@ -959,7 +964,13 @@ export default function ChatView({
959964
}
960965

961966
return (
962-
<div className="chat-view">
967+
<div className={`chat-view${showStageView ? ' has-stage-view' : ''}`}>
968+
{showStageView && (
969+
<StageView
970+
version={stageViewVersion}
971+
onClose={() => setShowStageView(false)}
972+
/>
973+
)}
963974
<div className="chat-view-main">
964975
<ChatHeader
965976
activeContact={activeContact}
@@ -1122,9 +1133,6 @@ export default function ChatView({
11221133
}}
11231134
/>
11241135
)}
1125-
{showStageView && (
1126-
<StageView onClose={() => setShowStageView(false)} />
1127-
)}
11281136
</div>
11291137
)
11301138
}

src/components/MessageRow.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -379,11 +379,12 @@ export default function MessageRow({ message, activeContact, onOpenThread, onTar
379379
const label = typeof action === 'string' ? action : action.label
380380
const isPrimary = typeof action === 'object' && action.primary
381381
const actionType = typeof action === 'object' ? action.type : null
382+
const actionVersion = typeof action === 'object' ? action.version : null
382383
return (
383384
<button
384385
key={j}
385386
className={`card-action-btn${isPrimary ? ' card-action-btn-primary' : ''}`}
386-
onClick={actionType ? () => onCardAction?.({ type: actionType }) : undefined}
387+
onClick={actionType ? () => onCardAction?.({ type: actionType, version: actionVersion }) : undefined}
387388
>
388389
{label}
389390
</button>

0 commit comments

Comments
 (0)