Add tab-brief prototype (contact 34)

Second prototype: agent joins group chat and pins a context-brief.md
tab instead of posting a welcome card in the thread.

- New group contact 34 "Northwind launch" with contextBriefId
- Messages seed: same Northwind thread, ending with two system messages
  (agent added + agent pinned context-brief.md)
- contextBriefs.js: structured brief data (team, open items, tools,
  files, decisions)
- ContextBriefPanel component: renders brief as a styled markdown-ish
  document (team table, open items with status badges, tool chips,
  file rows, decisions list)
- ChatHeader: pinnedTab prop renders a purple pinned tab alongside
  Chat/Shared/Recap; activeTab + onSelectTab wired through
- ChatView: activeTab state, resets on chat change; renders
  ContextBriefPanel when pinned tab is active
- System message pin icon variant for the "pinned" event

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

Author: lambasu

src/components/ChatHeader.css

@@ -65,6 +65,27 @@
   border-radius: 2px;
 }
 
+.chat-view-tab.tab-pinned {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: #5B5FC7;
+}
+
+.chat-view-tab.tab-pinned:hover {
+  color: #4448B3;
+}
+
+.chat-view-tab.tab-pinned.active {
+  color: #4448B3;
+  font-weight: 600;
+}
+
+.tab-pin-icon {
+  flex-shrink: 0;
+  opacity: 0.75;
+}
+
 .chat-view-tab.tab-add {
   color: #616161;
   padding: 14px 8px;

src/components/ChatHeader.jsx

@@ -14,6 +14,9 @@ export default function ChatHeader({
   onToggleSessions,
   showThreads,
   onToggleThreads,
+  pinnedTab,
+  activeTab = 'chat',
+  onSelectTab,
 }) {
   return (
     <div className="chat-view-header">
@@ -28,7 +31,22 @@ export default function ChatHeader({
             </>
           ) : (
             <>
-              <button className="chat-view-tab active">Chat</button>
+              <button
+                className={`chat-view-tab${activeTab === 'chat' ? ' active' : ''}`}
+                onClick={() => onSelectTab?.('chat')}
+              >Chat</button>
+              {pinnedTab && (
+                <button
+                  className={`chat-view-tab tab-pinned${activeTab === 'pinned' ? ' active' : ''}`}
+                  onClick={() => onSelectTab?.('pinned')}
+                >
+                  <svg width="12" height="12" viewBox="0 0 20 20" fill="currentColor" className="tab-pin-icon" aria-hidden="true">
+                    <path d="M13.5 2a.5.5 0 0 1 .354.146l4 4A.5.5 0 0 1 17.5 7c0 .97-.97 1.97-2.5 2.5L12 14H9.5a.5.5 0 0 1-.354-.854L11 11.293 8.707 9 6.854 10.854A.5.5 0 0 1 6 10.5V8L10.5 5C11.03 3.47 12.03 2.5 13 2.5l.5-.5z"/>
+                    <path d="M3.5 14.5 8 10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" fill="none"/>
+                  </svg>
+                  {pinnedTab.label}
+                </button>
+              )}
               <button className="chat-view-tab">Shared</button>
               <button className="chat-view-tab">Recap</button>
               <button className="chat-view-tab">Storyline</button>

src/components/ChatView.css

@@ -748,6 +748,12 @@
   white-space: nowrap;
 }
 
+.system-message-icon {
+  flex-shrink: 0;
+  color: #5B5FC7;
+  opacity: 0.8;
+}
+
 /* ── Stakeholder people grid (card section type: people) ────────────── */
 .card-people {
   display: grid;

src/components/ChatView.jsx

@@ -12,8 +12,10 @@ import {
   designerAgent,
   pollyAgent,
   breakthuAgent,
+  contextBriefs,
 } from '../data'
 import { TypingIndicator } from './common'
+import ContextBriefPanel from './ContextBriefPanel'
 import MessageRow from './MessageRow'
 import SessionsRail from './SessionsRail'
 import AgentsRail from './AgentsRail'
@@ -119,6 +121,7 @@ export default function ChatView({
   const [channelThreadPostId, setChannelThreadPostId] = useState(null)
   const [threadRailOpen, setThreadRailOpen] = useState(false)
   const [highlightMessageId, setHighlightMessageId] = useState(null)
+  const [activeTab, setActiveTab] = useState('chat')
   const messagesEndRef = useRef(null)
 
   // Reset per-chat ephemeral state when activeChatId changes. Using the
@@ -140,6 +143,7 @@ export default function ChatView({
     setChannelThreadPostId(null)
     setThreadRailOpen(false)
     setHighlightMessageId(null)
+    setActiveTab('chat')
     const intentMatches = navIntent && navIntent.chatId === activeChatId
     const intentHasSession = intentMatches && 'sessionId' in navIntent
     if (intentHasSession) {
@@ -530,6 +534,9 @@ export default function ChatView({
   const agentSuggestions = isAgent ? promptSuggestions[activeChatId] : null
   const showPromptSuggestions = !!agentSuggestions && messages.length === 0 && mainTypingAgentId !== activeChatId
 
+  const contextBrief = activeContact.contextBriefId ? contextBriefs[activeContact.contextBriefId] : null
+  const pinnedTab = contextBrief ? { label: contextBrief.filename } : null
+
   return (
     <div className="chat-view">
       <div className="chat-view-main">
@@ -550,8 +557,14 @@ export default function ChatView({
               setThreadRailOpen(true)
             }
           }}
+          pinnedTab={pinnedTab}
+          activeTab={activeTab}
+          onSelectTab={setActiveTab}
         />
 
+        {activeTab === 'pinned' && contextBrief ? (
+          <ContextBriefPanel brief={contextBrief} />
+        ) : (
         <div className="chat-messages">
           {isChannel ? (
             <div className="messages-container messages-container-channel">
@@ -616,6 +629,7 @@ export default function ChatView({
             </div>
           )}
         </div>
+        )}
 
         <div className="chat-compose-area">
           {mainTypingAgentId === activeChatId && (