wip: save App.jsx changes

Author: lambasu

src/App.jsx

@@ -5,10 +5,15 @@ import ChatList from './components/ChatList'
 import ChatView from './components/ChatView'
 import ActivityList from './components/ActivityList'
 import TitleBar from './components/TitleBar'
+import PrototypeGallery from './components/PrototypeGallery'
 import { FreModal } from './components/common'
 import './App.css'
 
+// Map prototype id → initial chat id
+const PROTOTYPE_CHAT = { p1: 23, p2: 34, p3: 35 }
+
 export default function App() {
+  const [selectedPrototype, setSelectedPrototype] = useState(null) // null = gallery
   const [activeView, setActiveView] = useState('chat') // 'chat' | 'activity'
   const [activeChatId, setActiveChatId] = useState(35)
   const [readChatIds, setReadChatIds] = useState(() => new Set([35]))
@@ -28,6 +33,21 @@ export default function App() {
 
   const dismissFre = useCallback(() => setShowFre(false), [])
 
+  const launchPrototype = useCallback((id) => {
+    const chatId = PROTOTYPE_CHAT[id]
+    setSelectedPrototype(id)
+    setActiveChatId(chatId)
+    setReadChatIds(new Set([chatId]))
+    setActiveView('chat')
+    setNavIntent(null)
+    setShowFre(true)
+  }, [])
+
+  const backToGallery = useCallback(() => {
+    setSelectedPrototype(null)
+    setShowFre(false)
+  }, [])
+
   const selectChat = useCallback((chatId) => {
     setActiveChatId(chatId)
     setReadChatIds(prev => (prev.has(chatId) ? prev : new Set(prev).add(chatId)))
@@ -79,9 +99,20 @@ export default function App() {
 
   const activityUnreadCount = activityEvents.reduce((n, e) => n + (e.unread ? 1 : 0), 0)
 
+  if (!selectedPrototype) {
+    return (
+      <div className="app">
+        <TitleBar />
+        <div className="app-body">
+          <PrototypeGallery onLaunch={launchPrototype} />
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="app">
-      <TitleBar onShowFre={() => setShowFre(true)} />
+      <TitleBar onBack={backToGallery} onShowFre={() => setShowFre(true)} />
       <div className="app-body">
         <NavRail
           activeView={activeView}
@@ -113,7 +144,69 @@ export default function App() {
           clearNavIntent={clearNavIntent}
         />
       </div>
-      {showFre && (
+      {showFre && selectedPrototype === 'p1' && (
+        <FreModal
+          title="Day-one agent onboarding"
+          subtitle="Agent joins a group chat and instantly knows who's in the room — no user grounding required."
+          onDismiss={dismissFre}
+        >
+          <h3 className="fre-section-title">The problem</h3>
+          <p>
+            Every time an agent is added to a group chat, someone has to spend
+            time briefing it: who the stakeholders are, what tools the group
+            uses, what files exist, what decisions are in flight. That onboarding
+            tax falls on the user — and it has to happen again for every new chat.
+          </p>
+
+          <h3 className="fre-section-title">The idea</h3>
+          <p>
+            At the moment an agent is added, it reads the existing thread —
+            messages, file shares, @mentions, link cards — and synthesizes a
+            structured brief automatically. The welcome message isn't a generic
+            greeting; it's proof the agent already knows the room.
+          </p>
+
+          <h3 className="fre-section-title">What to look for</h3>
+          <p>
+            Open the <strong>Northwind launch</strong> chat and scroll to the
+            bottom. Claude's welcome card surfaces: the core team with roles,
+            tools already in use (Figma, Jira, GitHub), files shared in the
+            thread, and open items with urgency levels — all derived from the
+            conversation history above.
+          </p>
+        </FreModal>
+      )}
+      {showFre && selectedPrototype === 'p2' && (
+        <FreModal
+          title="Context brief as a pinned tab"
+          subtitle="Agent synthesizes the chat into a living document and pins it where the team can always find it."
+          onDismiss={dismissFre}
+        >
+          <h3 className="fre-section-title">The problem</h3>
+          <p>
+            A welcome card in the thread is useful once, then it gets buried.
+            New members joining later have no way to get up to speed without
+            scrolling through hundreds of messages.
+          </p>
+
+          <h3 className="fre-section-title">The idea</h3>
+          <p>
+            Instead of posting a card, the agent writes a{' '}
+            <strong>context-brief.md</strong> and pins it as a tab to the chat
+            header. The brief is always one click away — a persistent,
+            skimmable source of truth for anyone in the chat.
+          </p>
+
+          <h3 className="fre-section-title">What to look for</h3>
+          <p>
+            Open the <strong>Northwind launch</strong> chat. Notice the pin icon
+            tab next to "Chat" in the header. Click it to open the context brief:
+            team roster, open items with status badges, tools, shared files, and
+            key decisions — all in a document-style panel.
+          </p>
+        </FreModal>
+      )}
+      {showFre && selectedPrototype === 'p3' && (
         <FreModal
           title="Group intelligence for Teams agents"
           subtitle="Agents monitor group conversations and decide when to engage — without waiting to be @mentioned."