Add user prompt text display and agents graph tab

Features:
- User prompt hook now captures and displays actual prompt text
- Added tab switching between Event Feed and Agents Graph
- Created AgentsGraph component with placeholder
- Added CSS styling for agents graph view

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

frontend/src/components/AgentsGraph.tsx

@@ -0,0 +1,19 @@
+// Agents graph component for visualizing agent relationships and activity
+
+import React from 'react';
+
+export const AgentsGraph: React.FC = () => {
+  return (
+    <div className="agents-graph">
+      <div className="graph-placeholder">
+        <div className="placeholder-content">
+          <h3>Agent Activity Graph</h3>
+          <p>This feature will visualize agent relationships and activity over time.</p>
+          <p className="placeholder-hint">Coming soon: Interactive graph showing agent spawning, communication, and completion events.</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AgentsGraph;

frontend/src/components/EventFeed.tsx

@@ -1,8 +1,9 @@
 // Event feed component displaying a list of events
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import EventCard from './EventCard';
 import FilterButtons from './FilterButtons';
+import AgentsGraph from './AgentsGraph';
 import type { Event, FilterType, EventType } from '../types';
 import { EVENT_FILTER_MAP } from '../types';
 
@@ -23,6 +24,8 @@ export const EventFeed: React.FC<EventFeedProps> = ({
   onLoadMore,
   hasMore,
 }) => {
+  const [activeTab, setActiveTab] = useState<'feed' | 'graph'>('feed');
+
   // Filter events by active filter
   const filteredEvents = events.filter((event) => {
     const allowedTypes: EventType[] = EVENT_FILTER_MAP[activeFilter];
@@ -55,29 +58,45 @@ export const EventFeed: React.FC<EventFeedProps> = ({
   return (
     <div className="event-feed-container">
       <div className="tabs">
-        <button className="tab active">📋 EVENT FEED</button>
-        <button className="tab">🌐 AGENTS GRAPH</button>
+        <button
+          className={`tab ${activeTab === 'feed' ? 'active' : ''}`}
+          onClick={() => setActiveTab('feed')}
+        >
+          📋 EVENT FEED
+        </button>
+        <button
+          className={`tab ${activeTab === 'graph' ? 'active' : ''}`}
+          onClick={() => setActiveTab('graph')}
+        >
+          🌐 AGENTS GRAPH
+        </button>
       </div>
 
-      <FilterButtons activeFilter={activeFilter} onFilterChange={onFilterChange} />
+      {activeTab === 'feed' ? (
+        <>
+          <FilterButtons activeFilter={activeFilter} onFilterChange={onFilterChange} />
 
-      <div className="event-feed">
-        {loading && events.length === 0 ? (
-          <div className="loading">Loading events...</div>
-        ) : filteredEvents.length === 0 ? (
-          <div className="empty-state">
-            <p>No events yet</p>
-            <p className="empty-hint">Start using Claude Code to see events appear here in real-time</p>
+          <div className="event-feed">
+            {loading && events.length === 0 ? (
+              <div className="loading">Loading events...</div>
+            ) : filteredEvents.length === 0 ? (
+              <div className="empty-state">
+                <p>No events yet</p>
+                <p className="empty-hint">Start using Claude Code to see events appear here in real-time</p>
+              </div>
+            ) : (
+              <>
+                {filteredEvents.map((event) => (
+                  <EventCard key={event.id} event={event} />
+                ))}
+                {loading && <div className="loading-more">Loading more...</div>}
+              </>
+            )}
           </div>
-        ) : (
-          <>
-            {filteredEvents.map((event) => (
-              <EventCard key={event.id} event={event} />
-            ))}
-            {loading && <div className="loading-more">Loading more...</div>}
-          </>
-        )}
-      </div>
+        </>
+      ) : (
+        <AgentsGraph />
+      )}
     </div>
   );
 };

frontend/src/styles/index.css

@@ -490,3 +490,36 @@ body {
   font-size: 0.9rem;
   color: var(--text-secondary);
 }
+
+/* Agents Graph */
+.agents-graph {
+  height: 600px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.graph-placeholder {
+  text-align: center;
+  max-width: 600px;
+}
+
+.placeholder-content h3 {
+  font-size: 1.5rem;
+  color: var(--cyan);
+  margin-bottom: 1rem;
+  letter-spacing: 0.05em;
+}
+
+.placeholder-content p {
+  color: var(--text-secondary);
+  margin-bottom: 0.8rem;
+  line-height: 1.6;
+}
+
+.placeholder-hint {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  font-style: italic;
+}