Add Lovable Stage View prototype (P07)

Group chat scenario: team adds Lovable agent, it builds a Morgan
Collective landing page with live progress cards, then a completion
card with a "View Live Preview" button that opens Teams Stage View —
a full-screen immersive mock website rendered in-shell. Team members
request edits; Lovable posts an updated card in place.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: lambasu

src/App.jsx

@@ -17,6 +17,7 @@ const PROTOTYPE_CHAT = {
   'earned-handoff-to-agency': 38,
   'facilitator-coordinates-agency': 39,
   'emoji-to-deploy': 40,
+  'lovable-stage-view': 44,
 }
 
 export default function App() {

src/components/ChatView.jsx

@@ -23,6 +23,7 @@ import PromptSuggestions from './PromptSuggestions'
 import ChannelThreadRail from './ChannelThreadRail'
 import ChatHeader from './ChatHeader'
 import Compose from './Compose'
+import StageView from './StageView'
 import './ChatView.css'
 
 // Convert a channel post (root + replies) into the message shape MessageRow
@@ -130,6 +131,7 @@ 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)
   const messagesEndRef = useRef(null)
 
   // Reset per-chat ephemeral state when activeChatId changes. Using the
@@ -155,6 +157,7 @@ export default function ChatView({
     setGroupIntelAction(null)
     setP5Action(null)
     setP6State(null)
+    setShowStageView(false)
     setMainTyping(null)
     const intentMatches = navIntent && navIntent.chatId === activeChatId
     const intentHasSession = intentMatches && 'sessionId' in navIntent
@@ -907,7 +910,13 @@ export default function ChatView({
 
   // P4: "Open this in Agency" card action — create a pre-seeded Agency session
   // 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 }) => {
+    if (type === 'open_stage_view') {
+      setShowStageView(true)
+      return
+    }
     if (type !== 'open_in_agency') return
     const nowStr = nowTimeStr()
     const sessionId = `s36-hotfix-${Date.now()}`
@@ -1113,6 +1122,9 @@ export default function ChatView({
           }}
         />
       )}
+      {showStageView && (
+        <StageView onClose={() => setShowStageView(false)} />
+      )}
     </div>
   )
 }

src/components/PrototypeGallery.jsx

@@ -61,6 +61,16 @@ const PROTOTYPES = [
     tag: 'E2E workflow',
     tagColor: '#8250DF',
   },
+  {
+    id: 'lovable-stage-view',
+    number: '07',
+    title: 'Lovable in group chat',
+    description:
+      'Team adds Lovable to a group chat and asks it to build their website. Lovable posts progress cards as it builds, then a completion card with a "View Live Preview" button. Click it to open Teams Stage View — a full-screen immersive preview. Request edits; Lovable updates the card in place.',
+    chat: 'Morgan Collective website',
+    tag: 'Stage View',
+    tagColor: '#FF3B8B',
+  },
 ]
 
 export default function PrototypeGallery({ onLaunch }) {