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>

Author: lambasu

.gitignore

@@ -25,3 +25,5 @@ dist-ssr
 
 # Claude Code config (personal permissions, hooks, agents — not needed by forkers)
 .claude/
+.vercel
+.env*.local

src/components/ChatView.css

@@ -13,6 +13,14 @@
   min-width: 0;
 }
 
+/* Stage View split layout — Stage View panel is on the left; chat
+   becomes a fixed-width right rail so both are visible at once. */
+.chat-view.has-stage-view .chat-view-main {
+  flex: none;
+  width: 440px;
+  border-left: 1px solid #E8E8E8;
+}
+
 /* Header styles live in ChatHeader.css. Compose styles live in Compose.css. */
 
 /* ── Messages ── */

src/components/ChatView.jsx

@@ -131,7 +131,10 @@ export default function ChatView({
   const [groupIntelAction, setGroupIntelAction] = useState(null) // null | 'confirmed' | 'skipped'
   const [p5Action, setP5Action] = useState(null) // null | 'confirmed' | 'skipped'
   const [p6State, setP6State] = useState(null) // null | 'prompted' | 'workflows' | 'agency'
-  const [showStageView, setShowStageView] = useState(false)
+  // P7 — Lovable Stage View: auto-opens for contact 44; tracks which website
+  // version (v1 blue / v2 purple) the preview is showing.
+  const [showStageView, setShowStageView] = useState(activeChatId === 44)
+  const [stageViewVersion, setStageViewVersion] = useState('v1')
   const messagesEndRef = useRef(null)
 
   // Reset per-chat ephemeral state when activeChatId changes. Using the
@@ -157,7 +160,8 @@ export default function ChatView({
     setGroupIntelAction(null)
     setP5Action(null)
     setP6State(null)
-    setShowStageView(false)
+    setShowStageView(activeChatId === 44)
+    setStageViewVersion('v1')
     setMainTyping(null)
     const intentMatches = navIntent && navIntent.chatId === activeChatId
     const intentHasSession = intentMatches && 'sessionId' in navIntent
@@ -912,9 +916,10 @@ export default function ChatView({
   // and navigate there with the fix plan already loaded.
   // P7: "View Live Preview" card action — open Teams Stage View with the
   // Lovable-generated Morgan Collective site.
-  const handleCardAction = ({ type }) => {
+  const handleCardAction = ({ type, version }) => {
     if (type === 'open_stage_view') {
       setShowStageView(true)
+      if (version) setStageViewVersion(version)
       return
     }
     if (type !== 'open_in_agency') return
@@ -959,7 +964,13 @@ export default function ChatView({
   }
 
   return (
-    <div className="chat-view">
+    <div className={`chat-view${showStageView ? ' has-stage-view' : ''}`}>
+      {showStageView && (
+        <StageView
+          version={stageViewVersion}
+          onClose={() => setShowStageView(false)}
+        />
+      )}
       <div className="chat-view-main">
         <ChatHeader
           activeContact={activeContact}
@@ -1122,9 +1133,6 @@ export default function ChatView({
           }}
         />
       )}
-      {showStageView && (
-        <StageView onClose={() => setShowStageView(false)} />
-      )}
     </div>
   )
 }

src/components/MessageRow.jsx

@@ -379,11 +379,12 @@ export default function MessageRow({ message, activeContact, onOpenThread, onTar
                         const label = typeof action === 'string' ? action : action.label
                         const isPrimary = typeof action === 'object' && action.primary
                         const actionType = typeof action === 'object' ? action.type : null
+                        const actionVersion = typeof action === 'object' ? action.version : null
                         return (
                           <button
                             key={j}
                             className={`card-action-btn${isPrimary ? ' card-action-btn-primary' : ''}`}
-                            onClick={actionType ? () => onCardAction?.({ type: actionType }) : undefined}
+                            onClick={actionType ? () => onCardAction?.({ type: actionType, version: actionVersion }) : undefined}
                           >
                             {label}
                           </button>