feat: Add screenshots to documentation and landing page

- Captured screenshots of all main views (Dashboard, List, Thread, Graph)
- Added screenshot gallery section to landing page with hover effects
- Updated README with visual screenshots in table layout
- Created automated screenshot capture script using Playwright
- Updated user guide with actual screenshot descriptions
- Added 4 high-quality screenshots showing real application UI

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

Co-Authored-By: Claude <[email protected]>

Author: milliondreams

README.md

@@ -13,6 +13,46 @@ A comprehensive web-based debugging tool for RusticAI's Redis messaging system.
 - **Thread View**: Track message threads and conversations
 - **Developer Presence**: See which developers are currently monitoring
 
+## Screenshots
+
+<div align="center">
+
+### Dashboard - Guild Overview
+![Dashboard View](docs/src/assets/screenshots/dashboard-guilds.png)
+*Monitor all active guilds with real-time metrics and message rates*
+
+### Debug Views
+
+<table>
+<tr>
+<td width="50%">
+
+#### List View
+![List View](docs/src/assets/screenshots/debug-list-view.png)
+*Chronological message list with filtering*
+
+</td>
+<td width="50%">
+
+#### Thread View
+![Thread View](docs/src/assets/screenshots/debug-thread-view.png)
+*Messages grouped by conversation threads*
+
+</td>
+</tr>
+<tr>
+<td colspan="2">
+
+#### Graph View
+![Graph View](docs/src/assets/screenshots/debug-graph-view.png)
+*Interactive visualization of message flows between agents*
+
+</td>
+</tr>
+</table>
+
+</div>
+
 ## Architecture
 
 This is a monorepo project using PNPM workspaces:

docs/src/assets/screenshots/dashboard-guilds.png

@@ -8,25 +8,26 @@ tags: [screenshots, visual-guide, ui]
 
 Explore the Rustic Debug interface through these annotated screenshots and visual guides.
 
-## Guild Selection Page
+## Dashboard Page
 
-The Guild Selection page is your entry point to debugging. It displays all available RusticAI guilds in your Redis instance.
+The Dashboard page is your entry point to debugging. It displays all available RusticAI guilds in your Redis instance with real-time metrics.
 
-![Guild Selection Page](../assets/screenshots/guilds-page.png)
+![Dashboard Page - Guilds Overview]
 
 **Key Features:**
 - **Guild Cards**: Each guild is displayed as a card showing:
-  - Guild name and ID
-  - Number of active topics
-  - Message count
-  - Last activity timestamp
-  - Health status indicator
-- **Search Bar**: Filter guilds by name or ID
-- **Status Indicators**:
-  - 🟢 Active guilds with recent messages
-  - 🟡 Idle guilds with no recent activity
-  - 🔴 Guilds with errors or issues
-- **Quick Actions**: Direct links to debug specific guilds
+  - Guild name and ID (e.g., "Test Guild" with ID "test_guild_id")
+  - Number of active topics (e.g., "5 Topics")
+  - Active agent count (e.g., "0 Agents" when idle)
+  - Real-time message rate (e.g., "0.0/s")
+  - Active status indicator (green dot)
+- **Summary Statistics Bar**: At the top showing:
+  - Active Guilds: 6/6
+  - Total Topics: 51
+  - Active Agents: 0
+  - Message Rate: 0.0/s
+- **Connection Status**: Top-right indicator showing "Connected (1ms)"
+- **Quick Navigation**: Click any guild card to debug its messages
 
 ## Debug Dashboard
 
@@ -42,28 +43,31 @@ The main debugging interface provides comprehensive tools for message analysis.
 
 ## Message List View
 
-The List View presents messages in a chronological, filterable table format.
+The List View presents messages in a chronological format with topic filtering on the left sidebar.
 
-![List View](../assets/screenshots/list-view.png)
+![List View - Chronological Message Display]
 
 **List View Features:**
 
-### Message Table
-- **Columns**:
-  - Timestamp (with millisecond precision)
-  - Message ID (GemstoneID format)
-  - Topic
-  - Agent Tag
-  - Status (success/error/pending)
-  - Content preview
-  - Actions (inspect, replay, export)
-
-### Filtering Panel
-- **Time Range**: Last hour, day, week, or custom range
-- **Status Filter**: All, Success, Error, Pending
-- **Topic Filter**: Multi-select dropdown
-- **Agent Filter**: Filter by specific agents
-- **Search**: Full-text search in message content
+### Topic Sidebar (Left)
+- **Topic List** with message counts:
+  - 📥 initiator (16 messages)
+  - 📥 responder (14 messages)
+  - heartbeat (54 messages)
+  - default topic (107 messages)
+  - 📥 local test (7 messages)
+- Selected topic is highlighted with dark background
+
+### Message Cards (Center)
+- **Agent Information**:
+  - Circular avatar with initial (e.g., "I" for Initiator Agent)
+  - Agent name and exact timestamp
+- **Message Details**:
+  - Status badge (green "completed" badge)
+  - Message type (e.g., "SelfReadyNotification")
+  - JSON payload with syntax highlighting
+  - Message ID and priority at the bottom
+- **Search Bar**: "Search messages, agents, IDs..." for quick filtering
 
 ### Message Inspector
 When you click on a message, the inspector panel opens:
@@ -87,82 +91,67 @@ When you click on a message, the inspector panel opens:
 
 ## Thread View
 
-The Thread View visualizes conversation flows and message chains.
+The Thread View groups related messages by conversation thread for easier tracking.
 
-![Thread View](../assets/screenshots/thread-view.png)
+![Thread View - Grouped by Conversation]
 
 **Thread Visualization:**
 
-### Thread Timeline
-- **Vertical Timeline**: Messages arranged chronologically
-- **Thread Connections**: Lines connecting related messages
-- **Branch Points**: Where conversations diverge
-- **Color Coding**:
-  - Blue: User messages
-  - Green: System responses
-  - Yellow: Processing messages
-  - Red: Error messages
-
-### Thread Inspector
-- **Thread Metadata**:
-  - Thread ID
-  - Start time
-  - Duration
-  - Message count
-  - Participating agents
-- **Thread Actions**:
-  - Export thread
-  - Replay thread
-  - Share thread link
-
-### Thread Statistics
-- **Performance Metrics**:
-  - Total thread duration
-  - Average response time
-  - Number of retries
-  - Error rate
+### Thread Headers
+- **Thread Identifier**: Shows truncated thread ID (e.g., "Thread: 958614409581... (1 messages)")
+- **Message Count**: Number of messages in each thread
+- **Thread Count Indicator**: "16 messages" and "16 threads" shown at the top
+
+### Thread Content
+- **Compact Message Display**: Each thread shows:
+  - Agent avatar and name
+  - Timestamp (time only for same-day messages)
+  - Message type (e.g., "SelfReadyNotification")
+  - JSON payload preview
+- **Chronological Ordering**: Threads are arranged by timestamp
+- **Visual Separation**: Each thread is clearly separated for easy scanning
+
+### Benefits of Thread View
+- **Context Preservation**: Related messages stay together
+- **Conversation Tracking**: Easy to follow request-response patterns
+- **Debugging Workflows**: Identify where conversations break or fail
+- **Performance Analysis**: See thread durations at a glance
 
 ## Graph View
 
-The Graph View provides an interactive visualization of message flows between topics and agents.
+The Graph View provides an interactive visualization of message flows using a node-based graph.
 
-![Graph View](../assets/screenshots/graph-view.png)
+![Graph View - Interactive Message Flow Visualization]
 
 **Graph Visualization Components:**
 
-### Node Types
-- **Guild Node** (Large circle): Central node representing the guild
-- **Topic Nodes** (Medium circles): Topics within the guild
-- **Agent Nodes** (Small circles): Individual agents
-- **Message Nodes** (Dots): Individual messages (optional)
-
-### Edge Types
-- **Solid Lines**: Direct message flow
-- **Dashed Lines**: Async/delayed messages
-- **Thick Lines**: High-traffic routes
-- **Red Lines**: Error paths
-
-### Interactive Features
-- **Zoom & Pan**: Navigate the graph
-- **Node Selection**: Click to see details
-- **Filter Controls**: Show/hide node types
-- **Layout Options**:
-  - Hierarchical
-  - Force-directed
-  - Circular
-  - Tree
-
-### Graph Statistics Panel
-![Graph Statistics](../assets/screenshots/graph-stats.png)
-
-- **Flow Metrics**:
-  - Messages per second
-  - Average latency
-  - Bottleneck detection
-- **Node Statistics**:
-  - Most active topics
-  - Busiest agents
-  - Error hotspots
+### Layout Controls (Top Bar)
+- **Layout Options**: Toggle between different visualization modes
+  - Tree layout (hierarchical structure)
+  - Timeline layout (temporal arrangement)
+  - Circle layout (radial distribution)
+- **View Mode Icons**: Quick access to different visualization styles
+
+### Interactive Canvas
+- **Node Visualization**: Messages and agents represented as connected nodes
+- **Visual Flow Lines**: Shows message routing and relationships
+- **Canvas Controls** (Bottom-right):
+  - Plus/Minus buttons for zoom in/out
+  - Fit-to-screen button
+  - Fullscreen toggle
+  - Pan controls for navigation
+
+### Graph Features
+- **Real-time Updates**: Graph updates as new messages arrive
+- **Interactive Exploration**: Click and drag to explore the graph
+- **Focus on Context**: Selected topic ("initiator") highlighted in sidebar
+- **Visual Hierarchy**: Node size and color indicate importance and type
+
+### Use Cases for Graph View
+- **System Architecture Visualization**: Understand how agents communicate
+- **Bottleneck Detection**: Identify high-traffic routes
+- **Debug Message Routing**: Trace message paths visually
+- **Performance Analysis**: See which paths have delays or errors
 
 ## Real-time Monitoring
 

docs/src/assets/screenshots/debug-graph-view.png

@@ -219,6 +219,51 @@
             color: #764ba2;
         }
 
+        /* Screenshots Section */
+        .screenshots {
+            background: white;
+            border-radius: 16px;
+            padding: 3rem;
+            margin: 3rem 0;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+        }
+        .screenshots h2 {
+            color: #333;
+            font-size: 2rem;
+            margin-bottom: 2rem;
+            text-align: center;
+        }
+        .screenshot-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+        .screenshot-card {
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            transition: transform 0.3s, box-shadow 0.3s;
+            cursor: pointer;
+        }
+        .screenshot-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+        }
+        .screenshot-card img {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+            object-position: top;
+        }
+        .screenshot-card .caption {
+            padding: 1rem;
+            background: #f8f9fa;
+            font-weight: 600;
+            color: #555;
+            text-align: center;
+        }
+
         /* Footer */
         footer {
             text-align: center;
@@ -294,6 +339,29 @@ <h3>Read-Only Mode</h3>
             </div>
         </div>
 
+        <!-- Screenshots Section -->
+        <div class="screenshots">
+            <h2>📸 See It In Action</h2>
+            <div class="screenshot-grid">
+                <a href="./user-guide/screenshots.html" class="screenshot-card">
+                    <img src="./assets/screenshots/dashboard-guilds.png" alt="Dashboard View">
+                    <div class="caption">Dashboard - Guild Overview</div>
+                </a>
+                <a href="./user-guide/screenshots.html#message-list-view" class="screenshot-card">
+                    <img src="./assets/screenshots/debug-list-view.png" alt="List View">
+                    <div class="caption">List View - Messages</div>
+                </a>
+                <a href="./user-guide/screenshots.html#thread-view" class="screenshot-card">
+                    <img src="./assets/screenshots/debug-thread-view.png" alt="Thread View">
+                    <div class="caption">Thread View - Conversations</div>
+                </a>
+                <a href="./user-guide/screenshots.html#graph-view" class="screenshot-card">
+                    <img src="./assets/screenshots/debug-graph-view.png" alt="Graph View">
+                    <div class="caption">Graph View - Flow Visualization</div>
+                </a>
+            </div>
+        </div>
+
         <!-- Documentation Cards -->
         <div class="docs-section">
             <div class="docs-grid">

docs/src/assets/screenshots/debug-list-view.png

@@ -27,6 +27,8 @@
     "eslint": "8.57.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "playwright": "^1.55.1",
+    "tsx": "^4.7.0",
     "turbo": "^1.11.3"
   }
 }