Add Group Intelligence prototype (Prototype 3)

Classifier-driven agent triggering without @mention: Jira detects
a relevant message mid-standup (82% confidence), sends a targeted
private message to the user with Yes/Skip actions, and on confirm
posts a group response with the ticket link card.

Includes: contact 35 (Northwind sprint sync), seeded standup messages,
ClassifierBadge, MonitoringIndicator, targeted action buttons, and
scripted group-response flow in ChatView. FRE updated with Group
Intelligence narrative.

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(23)
-  const [readChatIds, setReadChatIds] = useState(() => new Set([23]))
+  const [activeChatId, setActiveChatId] = useState(35)
+  const [readChatIds, setReadChatIds] = useState(() => new Set([35]))
   const [sessions, setSessions] = useState(initialSessions)
   const [dynamicSessionMessages, setDynamicSessionMessages] = useState({})
   // Activity feed: persist which events the user has opened so unread decorations clear.
@@ -115,49 +115,51 @@ export default function App() {
       </div>
       {showFre && (
         <FreModal
-          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."
+          title="Group intelligence for Teams agents"
+          subtitle="Agents monitor group conversations and decide when to engage — without waiting to be @mentioned."
           onDismiss={dismissFre}
         >
           <h3 className="fre-section-title">Today</h3>
           <p>
-            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.
+            Agents in Teams only respond when explicitly @mentioned. In a
+            real standup or sprint sync, the right information often surfaces
+            mid-conversation — not because someone called for it, but because
+            context made it relevant. Requiring an @mention means value gets
+            missed every time someone forgets to invoke the right agent.
           </p>
 
           <h3 className="fre-section-title">Problem</h3>
           <p>
-            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.
+            Teams with multiple agents create a coordination burden: users
+            must remember which agent owns which domain, and manually invoke
+            each one at the right moment. Agents are passive by default —
+            capable only when called.
           </p>
 
           <h3 className="fre-section-title">Solution</h3>
           <p>
-            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.
+            A classifier-driven decision layer runs continuously on group chat
+            messages. Each agent registers its own topic scope. When a message
+            arrives, the classifier scores it for relevance — no LLM required.
+            High confidence: agent responds directly. "Maybe" band: agent sends
+            a <strong>targeted message</strong> (visible only to the relevant
+            user) asking for confirmation before engaging the group.
           </p>
           <p>
-            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.
+            Open the <strong>Northwind sprint sync</strong> chat. Scroll to the
+            bottom: Olivia @mentioned Jira earlier to create a ticket. A few
+            messages later, James asks about the bug without any @mention. Jira's
+            classifier detected the relevance — confidence 82% — and sent James
+            a private targeted message asking whether to respond to the group.
           </p>
 
           <h3 className="fre-section-title">What this unlocks</h3>
           <p>
-            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.
+            Agents become ambient collaborators that surface help at the right
+            moment without spamming or requiring user-initiated prompts. The
+            targeted message pattern gives users control over when the agent
+            engages — graceful uncertainty handling that keeps the experience
+            from feeling intrusive.
           </p>
         </FreModal>
       )}

src/components/ChatView.css

@@ -823,3 +823,143 @@
   color: #424242;
   font-weight: 500;
 }
+
+/* ── Classifier badge (group intelligence targeted messages) ─────────── */
+.classifier-badge {
+  background: #F0F4FF;
+  border: 1px solid #C8D0F0;
+  border-radius: 6px;
+  padding: 8px 10px;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.classifier-badge-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.classifier-icon {
+  color: #5B5FC7;
+  flex-shrink: 0;
+}
+
+.classifier-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #5B5FC7;
+  flex: 1;
+}
+
+.classifier-confidence {
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.classifier-bar-track {
+  height: 3px;
+  background: #D8DCF0;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.classifier-bar-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.classifier-meta {
+  font-size: 11px;
+  color: #707070;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+  align-items: baseline;
+}
+
+.classifier-keyword {
+  color: #4448B3;
+  font-weight: 500;
+}
+
+.classifier-context {
+  color: #888;
+}
+
+/* ── Targeted action buttons ─────────────────────────────────────────── */
+.targeted-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.targeted-action-btn {
+  padding: 5px 14px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background 0.1s, border-color 0.1s;
+}
+
+.targeted-action-btn-primary {
+  background: #5B5FC7;
+  color: #fff;
+  border-color: #5B5FC7;
+}
+
+.targeted-action-btn-primary:hover {
+  background: #4448B3;
+  border-color: #4448B3;
+}
+
+.targeted-action-btn-secondary {
+  background: transparent;
+  color: #424242;
+  border-color: #C8C8C8;
+}
+
+.targeted-action-btn-secondary:hover {
+  background: #F0F0F0;
+}
+
+/* ── Agent monitoring indicator ──────────────────────────────────────── */
+.monitoring-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 16px;
+  background: #F5F5FF;
+  border-top: 1px solid #E8E8F0;
+  font-size: 11.5px;
+  color: #616161;
+}
+
+.monitoring-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #5B5FC7;
+  flex-shrink: 0;
+  animation: monitoring-pulse 2.5s ease-in-out infinite;
+}
+
+@keyframes monitoring-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+
+.monitoring-agents {
+  font-weight: 600;
+  color: #5B5FC7;
+}
+
+.monitoring-label {
+  color: #888;
+}

src/components/ChatView.jsx

@@ -122,6 +122,9 @@ export default function ChatView({
   const [threadRailOpen, setThreadRailOpen] = useState(false)
   const [highlightMessageId, setHighlightMessageId] = useState(null)
   const [activeTab, setActiveTab] = useState('chat')
+  // Group intelligence demo flow (chat 35): track whether the targeted
+  // message has been acted on so we can replace it with the group response.
+  const [groupIntelAction, setGroupIntelAction] = useState(null) // null | 'confirmed' | 'skipped'
   const messagesEndRef = useRef(null)
 
   // Reset per-chat ephemeral state when activeChatId changes. Using the
@@ -144,6 +147,7 @@ export default function ChatView({
     setThreadRailOpen(false)
     setHighlightMessageId(null)
     setActiveTab('chat')
+    setGroupIntelAction(null)
     const intentMatches = navIntent && navIntent.chatId === activeChatId
     const intentHasSession = intentMatches && 'sessionId' in navIntent
     if (intentHasSession) {
@@ -537,6 +541,42 @@ export default function ChatView({
   const contextBrief = activeContact.contextBriefId ? contextBriefs[activeContact.contextBriefId] : null
   const pinnedTab = contextBrief ? { label: contextBrief.filename } : null
 
+  // Group intelligence: monitoring agents for this chat (ids → contact objects).
+  const monitoringAgentIds = activeContact.monitoringAgents || []
+  const monitoringAgents = monitoringAgentIds.map(id => contacts.find(c => c.id === id)).filter(Boolean)
+
+  const handleTargetedAction = (action) => {
+    if (action.action === 'skip') {
+      setGroupIntelAction('skipped')
+      return
+    }
+    // 'confirm' — Jira responds to the group.
+    setGroupIntelAction('confirmed')
+    const jira = contacts.find(c => c.id === 4)
+    setMainTypingAgentId(activeChatId)
+    setTimeout(() => {
+      setMainTypingAgentId(prev => prev === activeChatId ? null : prev)
+      setExtraMessages(prev => ({
+        ...prev,
+        [activeChatId]: [
+          ...(prev[activeChatId] || []),
+          {
+            id: `gi-response-${Date.now()}`,
+            senderId: 4,
+            text: 'Yes — JIRA-4593 is tracked. Created earlier today, assigned to Kevin Park, P1, due Friday. Kevin has a fix in draft.',
+            link: {
+              source: 'jira',
+              title: 'JIRA-4593 — Guest tenant blank page on expired token re-auth',
+              subtitle: 'In Progress · Kevin Park · P1 · Due Apr 25',
+              url: '#',
+            },
+            time: nowTimeStr(),
+          },
+        ],
+      }))
+    }, 1800)
+  }
+
   return (
     <div className="chat-view">
       <div className="chat-view-main">
@@ -606,7 +646,13 @@ export default function ChatView({
                   Recent context from the conversation has been shared with this session.
                 </div>
               )}
-              {messages.map((msg) => {
+              {messages
+                .filter(msg => {
+                  // Hide the targeted message once the user has acted on it.
+                  if (msg.targetedActions && groupIntelAction !== null) return false
+                  return true
+                })
+                .map((msg) => {
                 const isThreaded = isGroup && msg.replies?.length > 0
                 return (
                   <MessageRow
@@ -622,6 +668,7 @@ export default function ChatView({
                         setThreadRailOpen(true)
                       }
                     } : openJiraThread}
+                    onTargetedAction={msg.targetedActions ? handleTargetedAction : undefined}
                   />
                 )
               })}
@@ -631,10 +678,18 @@ export default function ChatView({
         </div>
         )}
 
+        {monitoringAgents.length > 0 && (
+          <div className="monitoring-indicator">
+            <div className="monitoring-dot" />
+            <span className="monitoring-agents">{monitoringAgents.map(a => a.name).join(' · ')}</span>
+            <span className="monitoring-label">are monitoring this conversation</span>
+          </div>
+        )}
+
         <div className="chat-compose-area">
           {mainTypingAgentId === activeChatId && (
             <TypingIndicator
-              contact={activeContact}
+              contact={contacts.find(c => c.id === 4) || activeContact}
               className="chat-compose-typing"
             />
           )}