Add day-one agent onboarding prototype

- Seed Northwind launch group (contact 23) with rich 6-week thread:
  file shares (Excel checklist, Figma link, Word brief), Jira ticket
  refs, CDN/architecture decisions, clear go/no-go ownership
- System message divider when Claude is added to the group
- Claude's welcome card: stakeholder people grid, tool chips, files
  shared, and three actionable open items — all grounded in the thread
- New card section types: `people` (avatar chip grid) and `chips`
  (tool/tag pill row) in MessageRow
- CSS for system messages, card-people, card-chips in ChatView.css
- FRE modal updated with feature narrative
- Default open chat set to Northwind launch group

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

Author: lambasu

src/App.jsx

@@ -10,8 +10,8 @@ import './App.css'
 
 export default function App() {
   const [activeView, setActiveView] = useState('chat') // 'chat' | 'activity'
-  const [activeChatId, setActiveChatId] = useState(1)
-  const [readChatIds, setReadChatIds] = useState(() => new Set([1]))
+  const [activeChatId, setActiveChatId] = useState(23)
+  const [readChatIds, setReadChatIds] = useState(() => new Set([23]))
   const [sessions, setSessions] = useState(initialSessions)
   const [dynamicSessionMessages, setDynamicSessionMessages] = useState({})
   // Activity feed: persist which events the user has opened so unread decorations clear.
@@ -115,56 +115,49 @@ export default function App() {
       </div>
       {showFre && (
         <FreModal
-          title="Feature name"
-          subtitle="One-sentence pitch for what this feature is and why it matters to the audience watching the demo."
+          title="Day-one agent onboarding"
+          subtitle="An agent added to a group chat already knows who's in the room, what they're working on, and what it can do — before anyone says a word."
           onDismiss={dismissFre}
         >
           <h3 className="fre-section-title">Today</h3>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Describe
-            the current experience the demo audience is familiar with — the
-            workflow, the surfaces, the people involved. Sed do eiusmod tempor
-            incididunt ut labore et dolore magna aliqua, ut enim ad minim
-            veniam, quis nostrud exercitation.
+            When you add an agent to a group chat, the first thing you have to
+            do is brief it. Who's on the team. What the project is. What tools
+            you use. What decisions have already been made. It's a tax the team
+            pays every time — and it scales badly as chats get longer and
+            teams get larger.
           </p>
 
           <h3 className="fre-section-title">Problem</h3>
           <p>
-            Duis aute irure dolor in reprehenderit in voluptate velit esse
-            cillum dolore. Name the friction sharply: what breaks down today,
-            who feels it, and how often. Excepteur sint occaecat cupidatat non
-            proident, sunt in culpa qui officia deserunt mollit anim id est
-            laborum, consectetur adipiscing elit sed do eiusmod.
+            Agents are context-blind on arrival. They can be capable once
+            grounded, but grounding them is manual, inconsistent, and
+            invisible to everyone else in the chat. The agent that arrives
+            asking "how can I help?" puts the burden on the team to narrate
+            work that's already been done.
           </p>
 
           <h3 className="fre-section-title">Solution</h3>
           <p>
-            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-            nisi ut aliquip ex ea commodo consequat. Walk through the new
-            feature you're showing — the surface, the interaction, the moment
-            of delight. Duis aute irure dolor in reprehenderit in voluptate
-            velit esse cillum dolore eu fugiat nulla pariatur.
+            When an agent joins a group chat, it reads the thread first. It
+            surfaces what it learned — stakeholders and their roles, tools
+            already in use, files shared, open decisions — in a single
+            structured welcome message. Every action it proposes is grounded
+            in the actual work happening in the chat, not a generic prompt.
           </p>
           <p>
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-            officia deserunt mollit anim id est laborum. If the feature is
-            best understood through a sequence, list the key beats here so the
-            audience knows what to look for as the demo plays.
+            Open the <strong>Northwind launch</strong> chat in the left panel.
+            Scroll to the bottom: Claude was just added and sent its first
+            message — already knowing the team, the tools, and the one
+            launch-blocking ticket that needs attention right now.
           </p>
 
-          <h3 className="fre-section-title">What this Unlocks</h3>
+          <h3 className="fre-section-title">What this unlocks</h3>
           <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-            accusantium doloremque laudantium. Spell out the downstream wins —
-            what gets faster, easier, or newly possible because of this
-            feature. Totam rem aperiam, eaque ipsa quae ab illo inventore
-            veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-          </p>
-          <p>
-            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
-            aut fugit, sed quia consequuntur magni dolores eos qui ratione
-            voluptatem sequi nesciunt. Close with the audience-specific
-            takeaway — what the viewer should remember after the demo ends.
+            Zero-briefing agent adoption. The team doesn't stop their work to
+            onboard a new tool — the tool onboards itself. And because the
+            agent's first message shows its reasoning, the team can verify
+            what it knows before trusting what it does.
           </p>
         </FreModal>
       )}

src/components/ChatView.css

@@ -722,3 +722,98 @@
 .session-source-banner-link:hover {
   text-decoration: underline;
 }
+
+/* ── System messages (e.g. "Claude was added to the conversation") ──────
+   Centered full-width row with a horizontal rule on each side.           */
+.system-message {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 0 6px;
+  margin: 4px 0;
+}
+
+.system-message::before,
+.system-message::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: #E8E8E8;
+}
+
+.system-message-text {
+  flex-shrink: 0;
+  font-size: 11.5px;
+  color: #888;
+  white-space: nowrap;
+}
+
+/* ── Stakeholder people grid (card section type: people) ────────────── */
+.card-people {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px 10px;
+  margin-top: 2px;
+}
+
+.card-person {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+}
+
+.card-person-avatar {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9.5px;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.02em;
+}
+
+.card-person-text {
+  min-width: 0;
+}
+
+.card-person-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: #242424;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-person-role {
+  font-size: 11px;
+  color: #707070;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Tool / tag chips (card section type: chips) ─────────────────────── */
+.card-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 2px;
+}
+
+.card-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid #D0D0D0;
+  background: #F5F5F5;
+  font-size: 11.5px;
+  color: #424242;
+  font-weight: 500;
+}

src/components/MessageRow.jsx

@@ -100,6 +100,39 @@ function CardMetrics({ metrics }) {
   )
 }
 
+// People grid — stakeholder chips with initials avatar + name + role.
+function CardPeople({ people }) {
+  return (
+    <div className="card-people">
+      {people.map((person, i) => (
+        <div key={i} className="card-person">
+          <div
+            className="card-person-avatar"
+            style={{ background: person.color || '#6264A7' }}
+          >
+            {person.initials}
+          </div>
+          <div className="card-person-text">
+            <div className="card-person-name">{person.name}</div>
+            <div className="card-person-role">{person.role}</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// Tool / tag chips — a flex-wrap row of pill labels.
+function CardChips({ chips }) {
+  return (
+    <div className="card-chips">
+      {chips.map((chip, i) => (
+        <span key={i} className="card-chip">{chip}</span>
+      ))}
+    </div>
+  )
+}
+
 function CardBars({ bars }) {
   const max = bars.reduce((acc, b) => Math.max(acc, b.value), 0) || 1
   return (
@@ -170,6 +203,14 @@ function ThreadReplyBadge({ reply, onClick }) {
 }
 
 export default function MessageRow({ message, activeContact, onOpenThread }) {
+  if (message.isSystem) {
+    return (
+      <div className="system-message">
+        <span className="system-message-text">{message.text}</span>
+      </div>
+    )
+  }
+
   const isMe = message.senderId === 'me'
   const isMultiParty = activeContact.isGroup || activeContact.isChannel
   const sender = isMe
@@ -255,6 +296,8 @@ export default function MessageRow({ message, activeContact, onOpenThread }) {
                           {section.heading && <div className="card-section-heading">{section.heading}</div>}
                           {section.text && <div className="card-section-text">{section.text}</div>}
                           {section.facts && <CardFacts facts={section.facts} />}
+                          {section.people && <CardPeople people={section.people} />}
+                          {section.chips && <CardChips chips={section.chips} />}
                           {section.bullets && (
                             <ul className="card-bullets">
                               {section.bullets.map((b, k) => <li key={k}>{b}</li>)}

src/data/contacts.js

@@ -97,7 +97,7 @@ export const projectNorthwind = [
   { contactId: 21, bold: true },
   { contactId: 25, bold: true },
   { contactId: 22 },
-  { contactId: 23 },
+  { contactId: 23, bold: true },
   { contactId: 24 },
 ]