swerner/CLAUDE.md Secret

## CLAUDE.md

      
    Raw
  

              CLAUDE.md
            
          
    CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
Quick Start for New Sessions

Before starting any work, read these files in order:

pair_programming.md - Our workflow process for story-driven development
project_plan_{some_extension}.md - Current progress and next story to work on
technical_considerations.md - Lessons learned and implementation decisions
mcp-browser-architecture.md - Overall architecture and design decisions

For color migration work, also read:
5. color_migration_analysis_report.md - Comprehensive color audit and semantic mapping guide
Key workflow reminders:

Always use the TodoWrite tool to track story progress
Follow the exact human verification format from pair_programming.md
Never run pnpm tauri dev - human handles manual testing
Update technical_considerations.md with lessons learned after each story

Overview

Protocollie is a desktop application built with Tauri 2.0 and React/TypeScript that serves as a comprehensive testing and exploration tool for Model Context Protocol (MCP) servers. It functions similarly to Postman for APIs, allowing developers to connect to multiple MCP servers, explore their capabilities, and test their functionality in real-time.
Development Commands

Frontend Development


pnpm dev - Start development server (runs Vite dev server)
pnpm build - Build the React frontend for production
pnpm preview - Preview production build

Tauri Development


pnpm tauri build - Build the complete desktop application
pnpm tauri build --no-bundle - Build without bundling (faster, good for testing compilation)
pnpm tauri - Access Tauri CLI commands
Note: Do NOT run pnpm tauri dev in automated workflows - human handles manual testing

Package Management


Uses pnpm as the package manager (not npm or yarn)
Lock file: pnpm-lock.yaml

Architecture Overview

Technology Stack


Frontend: React 18 + TypeScript + Vite + Tailwind CSS v4
Backend: Rust with Tauri 2.0
Desktop Framework: Tauri 2.0 (cross-platform desktop apps)
MCP Integration: Direct system Node.js processes with JSON-RPC protocol
Data Storage: SQLite with rusqlite + in-memory + JSON hybrid approach
Process Communication: Direct stdin/stdout IPC with individual MCP server processes

System Node.js MCP Architecture (Implemented)

The application uses direct system Node.js processes for MCP server communication:

Rust/Tauri: Manages desktop app, UI, and individual MCP server process lifecycle
System Node.js: Direct process spawning for each MCP server connection
Communication: Direct stdin/stdout IPC with JSON-RPC protocol per process
Benefits: Simple architecture, universal command support, smaller app size, matches real-world MCP usage

Implementation Status: ✅ Complete - Direct process management, universal command support, enhanced error messaging, JSON-RPC protocol, process lifecycle management, and tool execution all working.
Project Structure Overview

See mcp-browser-architecture.md for detailed component organization. Key locations:

src/ - React frontend with components, hooks, types
src-tauri/src/ - Rust backend with database, MCP process management, and Tauri commands
Documentation files in root directory

MCP Integration Context

This application is specifically designed for MCP (Model Context Protocol) server testing and exploration. The app provides a Postman-like interface for MCP server development and testing with dynamic server connection management, tool execution, and request/response history.
Theme System Notes

IMPORTANT: This app uses a custom theme system, NOT Tailwind's default dark mode.
Key Points for Theme-Aware Components:


Use useTheme() hook: const { resolvedTheme } = useTheme()
Never use dark: prefixes - they don't work with our .light class system
Create conditional styling based on resolvedTheme === 'light' vs 'dark'
See mcp-browser-architecture.md for detailed theme implementation patterns

Common Theme Issues Fixed:


Selection highlighting unreadable in light mode → Use theme-conditional colors
Code/kbd elements unreadable in dark mode → Use theme-aware backgrounds
Badge components using incompatible dark: prefixes → Remove and use theme-neutral colors


## mcp-browser-architecture.md

      
    Raw
  

              mcp-browser-architecture.md
            
          
    Protocollie - Architecture & Design Document

Overview

Protocollie is a desktop application built with Tauri 2.0 that serves as a comprehensive testing and exploration tool for Model Context Protocol servers. Similar to Postman for APIs, it allows developers to connect to multiple MCP servers, explore their capabilities, and test their functionality in real-time.
Target Users

Protocollie is designed for MCP server developers, AI/LLM integration engineers, and technical product managers who need to rapidly prototype, test, and debug MCP implementations. Just as early Postman users were API developers tired of using curl commands, Protocollie serves developers building AI-powered tools who need a professional interface to understand what MCP servers expose, test tool calls with complex arguments, and validate responses before integrating them into production applications.
Core Architecture

Technology Stack


Frontend: React/TypeScript with Tailwind CSS
Backend: Rust with Tauri 2.0
MCP Integration: Direct system Node.js processes with JSON-RPC protocol
Node.js Runtime: System Node.js (users have Node.js installed as MCP developers)
Data Storage: Hybrid approach (SQLite + in-memory + JSON)
IPC: Tauri's command system + direct process stdin/stdout communication

Architecture Decision Rationale

We chose to use direct system Node.js processes instead of bundled sidecars or Rust MCP implementations for several key reasons:

Target Audience Alignment: MCP developers already have Node.js installed for most MCP servers (npx, npm packages)
Simplified Architecture: Direct process spawning is simpler than complex sidecar coordination and bundling
Universal Command Support: Works with any MCP server type - npx, python, ruby, custom binaries
Real-world Usage: Matches how developers actually run MCP servers in development and production
Enhanced Error Messaging: Can provide specific guidance for missing dependencies with installation instructions

High-Level Architecture

┌─────────────────────────────────────────────────────────────┐
│                    Frontend (React/TS)                       │
│                  - Dynamic server management UI              │
│                  - Tool execution and result visualization   │
├─────────────────────────────────────────────────────────────┤
│                    Tauri IPC Bridge                          │
│                  - Type-safe command interface               │
│                  - Server lifecycle management               │
├─────────────────────────────────────────────────────────────┤
│                    Rust Backend (Tauri)                      │
│  ┌─────────────────────────────────────────────────────┐   │
│  │              Core App Manager                        │   │
│  │  ┌─────────────┐  ┌─────────────┐  ┌────────────┐ │   │
│  │  │   MCP       │  │   Session   │  │   Data     │ │   │
│  │  │  Process    │  │   Manager   │  │  Storage   │ │   │
│  │  │  Manager    │  │             │  │ (SQLite)   │ │   │
│  │  └─────────────┘  └─────────────┘  └────────────┘ │   │
│  └─────────────────────────────────────────────────────┘   │
├─────────────────────────────────────────────────────────────┤
│              Multiple MCP Server Processes                   │
│               (One process per server connection)            │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐       │
│  │    node     │  │     npx     │  │   python    │       │
│  │ script.cjs  │  │  @mcp/git   │  │  server.py  │       │
│  │   stdin/    │  │   stdin/    │  │   stdin/    │       │
│  │   stdout    │  │   stdout    │  │   stdout    │       │
│  └─────────────┘  └─────────────┘  └─────────────┘       │
└─────────────────────────────────────────────────────────────┘

Backend Design

Core Components

1. MCP Process Manager (Rust)

See mcp_process.rs for implementation. Key methods:

MCPProcess::start(command, args) - Spawn MCP server with stdio pipes
send_initialize() - MCP protocol handshake
execute_mcp_tool(tool_name, arguments) - Execute tools via JSON-RPC
list_mcp_tools() - Discover available tools
Enhanced Node.js detection with helpful error messages

2. Global Process Registry

See mcp_process.rs:279 - Central management using HashMap<String, MCPProcess>
3. Tauri Commands

See server_commands.rs for all Tauri command implementations:

connect_server(), disconnect_server() - Server lifecycle
list_tools(), execute_tool() - Tool operations
add_server(), update_server(), delete_server() - Configuration management

4. Data Storage Layer

See db.rs for SQLite implementation with servers, history, collections, and preferences tables.
Distribution Strategy

No bundling required:

Application uses system Node.js directly
No platform-specific binaries to generate or maintain
Smaller app distribution size
Simpler build process

System requirements:

Node.js installed for Node.js-based MCP servers (node, npx commands)
Python installed for Python-based MCP servers
Other runtimes as needed by specific MCP servers

User guidance:

Clear error messages when dependencies are missing
Installation instructions for Node.js/Python/other runtimes
Links to official installation guides
Platform-specific package manager commands

Frontend Design

Component Structure

See src/components/ for implementation:

ui/ - Reusable UI primitives (Modal, Button, Input, Card, ErrorBoundary)
forms/ - Form-specific components with validation logic (AddServerForm, EditServerForm)
layout/ - Layout and navigation components:

Layout - Three-panel layout structure with resizable panels
Header - Enhanced header with branding, theme toggle, and navigation
Sidebar - Sectioned navigation with server management
MainContent - Dynamic content area with breadcrumb navigation and contextual rendering
ToolSelector - Tool selection dropdown with search and filtering
ToolDisplay - Tool execution interface with parameter forms
RightPanel - Contextual information panel (expandable for future features)


hooks/ - Custom hooks for state management and side effects
types/ - TypeScript interfaces and type definitions

Key Features Implemented


Professional Three-Panel Layout - Resizable panels with sidebar, main content, and right panel
Enhanced Header - Branding, theme toggle, and workspace selector
Organized Sidebar Navigation - Sectioned design with server management and search
Dynamic Main Content - Context-aware content with breadcrumb navigation
Tool Selection Interface - Dropdown with search, filtering, and metadata display
Server Management - Add/edit/remove server configurations with real-time connection status
Tool Discovery - Dynamic tool listing with parameter information and search
Tool Execution - Complex parameter forms with validation and execution tracking
Request History - Comprehensive execution tracking with contextual filtering and detailed inspection
Context-Aware Right Panel - Tool documentation, filtered execution history, and server information

Key Benefits of System Node.js Architecture

1. Target Audience Alignment


MCP developers already have Node.js installed for most servers
No additional dependencies - users need Node.js anyway for npx commands
Smaller app distribution size (no bundled Node.js binaries)
Matches real-world development workflows

2. Universal Command Support


Works with any MCP server type: node, npx, python, ruby, custom binaries
Enhanced error messaging with specific installation guidance
Support for the entire MCP ecosystem out of the box
No restrictions based on runtime or language

3. Simplified Architecture


Direct process spawning - no complex sidecar coordination
One process per MCP server with independent stdio communication
Easier debugging and maintenance
Clean JSON-RPC protocol implementation

4. True Process Isolation


Each MCP server runs in its own OS process
Crashes don't affect other servers or the main app
Individual process lifecycle management
Clean resource cleanup and management

Development Phases

Phase 1: Core MVP ✅ (41/41 stories completed)


Basic stdio transport support ✅
Server connection management ✅
Tool exploration and execution ✅
Request history tracking ✅

Phase 2: Enhanced Tool Execution UX & Professional Design ✅ (22/22 stories completed)

Goal: Transform from functional MVP to polished professional dev tool
Phase 2.0: Professional Layout Foundation ✅ (6/6 stories completed)

Three-panel layout structure ✅
Enhanced header with navigation ✅
Redesigned left sidebar navigation ✅
Tool selection dropdown in main panel ✅
Dynamic main content area ✅
Right panel context system ✅

Phase 2a: Enhanced Tool Execution Interface ✅ (4/4 stories completed)

Advanced parameter input forms with Monaco Editor ✅
Syntax highlighting for results ✅
Tool execution templates ✅
Request history enhancement ✅

Phase 2b: Professional UI/UX Design System ✅ (5/5 stories completed)

Comprehensive design system ✅
Enhanced dark/light theme system ✅
Professional header and navigation ✅
Enhanced server management UI ✅
Tool discovery and organization ✅

Phase 2c: Developer Experience Enhancements ✅ (2/2 stories completed)

Code editor integration with Monaco ✅
Response viewer enhancement ✅

Phase 2e: Visual Polish and Branding ✅ (5/5 stories completed)

Professional branding ✅
Onboarding and help system ✅
Accessibility enhancements ✅
Responsive design ✅
Help modal improvements ✅

Key achievements:

Professional three-panel layout with responsive design
Monaco Editor integration for complex parameter input
Comprehensive syntax highlighting for all response types
Advanced tool organization with favorites and recent usage
Professional branding and onboarding system
Full accessibility support with keyboard navigation
Enhanced server management with health monitoring

Phase 3: Enhanced Features & Content Types ⏳ (0/25 stories completed)

Goal: Extend MCP protocol support and add advanced organization features
Phase 3a: Enhanced Error Handling & User Feedback (0/7 stories)

Basic error message enhancement
Error classification system
Error recovery suggestions
Basic retry mechanisms
Toast notification system
Enhanced loading states
Enhanced keyboard shortcuts

Phase 3b: MCP Prompts Support (0/5 stories)

Basic prompts discovery
Prompts display and navigation
Basic prompt execution
Prompt parameter input
Prompts history integration

Phase 3c: MCP Resources Support (0/5 stories)

Basic resources discovery
Resources display and navigation
Basic resource content viewing
Resource content formatting
Resources history integration

Phase 3d: Basic Collections and Organization (0/8 stories)

Server grouping interface
Group-based operations
Request favorites system
Enhanced search across content
Basic workspace switching
Workspace data management
Basic export functionality
Basic import functionality

Key goals:

Complete MCP protocol support (tools, prompts, resources)
Professional error handling and user feedback
Basic collections and workspace management
Enhanced organization and search capabilities

Phase 4: Remote Transports


SSE transport implementation
OAuth authentication
WebSocket support
Cloud sync capabilities

Phase 5: Advanced Testing & Automation


Batch tool execution (moved from Phase 2a)
Environment variable management (moved from Phase 2c)
Performance monitoring (moved from Phase 2c)
Request chaining (moved from Phase 2d)
Mock and test data management (moved from Phase 2d)
API documentation generation (moved from Phase 2d)
Integration testing framework (moved from Phase 2d)
Plugin system foundation (moved from Phase 2d)
Workspace management and organization
Automated testing

Future Extensibility

Transport Plugins

#[async_trait]
pub trait TransportAdapter {
    async fn connect(&self, config: &TransportConfig) -> Result<Box<dyn Transport>>;
    fn supported_type(&self) -> TransportType;
}
Export Formats


Postman collections
OpenAPI-like specifications
Custom test suites

Advanced Features


Request chaining
Environment variables and workspace management
Batch tool execution
Pre/post request scripts
Performance testing

Theme System & UI Architecture

Custom Theme Implementation


System: Custom .light class-based theming (not Tailwind's default dark: system)
Provider: React context with useTheme() hook provides resolvedTheme ('light'|'dark')
CSS Variables: Light theme overrides in App.css change Tailwind class colors via CSS variables
Theme Toggle: Automatic system preference detection with manual override capability

Theme-Aware Component Patterns

Components requiring theme support should:

Import useTheme() hook: import { useTheme } from '../../hooks/useTheme'
Get resolved theme: const { resolvedTheme } = useTheme()
Create conditional styling functions that return appropriate classes for each theme
Avoid dark: prefixes - they don't work with the custom theme system

Recent Theme Fixes (Story 3.1)


ServerCard: Fixed selection highlighting readability in light mode
HelpModal: Fixed code/kbd element readability in dark mode
Badge Component: Removed incompatible dark: prefixes
Error Display: Unified theme-neutral error colors for both light/dark modes
CSS Coverage: Enhanced gray class overrides for broader theme compatibility

Appendix: What is MCP?

The Model Context Protocol (MCP) is an open protocol that standardizes how applications provide context to Large Language Models (LLMs). Think of MCP like a USB-C port for AI applications - just as USB-C provides a standardized way to connect devices to various peripherals, MCP provides a standardized way to connect AI models to different data sources and tools.
Key MCP Concepts:

MCP Servers are lightweight programs that expose specific capabilities (tools, prompts, and resources) through the protocol. For example, a Git MCP server might expose tools like git_status, git_commit, and git_diff that an LLM can call.
MCP Clients are applications (like Claude Desktop or IDEs) that connect to MCP servers to access their capabilities. They maintain 1:1 connections with servers.
Core Primitives:

Resources: Data and content that servers expose (files, documents, live data)
Tools: Functions that LLMs can execute through the server (API calls, system commands, calculations)
Prompts: Reusable prompt templates and workflows
Sampling: Allows servers to request LLM completions

Transport Layers: MCP supports multiple transport mechanisms:

stdio: Communication through standard input/output (for local processes)
SSE (Server-Sent Events): For HTTP-based connections
WebSocket: For bidirectional streaming (planned)

The protocol enables LLMs to interact with external systems in a controlled, secure way while maintaining clear boundaries between the AI model and the tools/data it accesses. This standardization means developers can write MCP servers once and have them work with any MCP-compatible client, similar to how REST APIs work with any HTTP client.

  
## pair_programming.md

      
    Raw
  

              pair_programming.md
            
          
    Pair Programming Workflow

Overview

This document outlines our pair programming workflow for building Protocollie. It ensures consistent process, proper testing, and knowledge capture as we work through the project plan.
Story Workflow Process

1. Story Selection & Planning

Claude's Actions:

Pick up the next ⏳ Pending story from the project_plan markdown file
Review the story's acceptance criteria and testing requirements
Create a brief implementation plan (2-3 bullet points)
Confirm plan with human before proceeding

2. Implementation Preparation

Claude's Actions:

After brief plan is approved by human, create a comprehensive implementation plan
Build a detailed todo list for the story implementation using TodoWrite tool
Review CLAUDE.md for project-specific commands and architecture notes
Update todo list to mark story as "in_progress"
Read any relevant existing files to understand current state

3. Implementation

Claude's Actions:

Implement the story following acceptance criteria
Write clean, well-structured code following established patterns
Use proper error handling where needed

4. Testing & Verification

Claude's Actions:

Run specified tests from the story (unit/integration/manual)
Execute build commands to verify no compilation errors:

pnpm build (frontend build)
pnpm tauri build --no-bundle (Rust compilation test)


NEVER run pnpm tauri dev - human handles this for manual testing
Run any other relevant commands (linting, type checking, etc.)

5. Human Verification Request

Claude's Actions:

Summarize what was implemented
List what should be visible/testable in the app
Provide specific testing steps for the human
Prompt human to verify in running app

Required format:

"## Story X.Y Implementation Complete!
Changes made:

[Bulleted list of key changes]

Please verify in the app:

Run pnpm tauri dev to start the development app
[Specific steps to test the functionality]
[Expected behavior/output]

Expected results:

[What should happen if working correctly]
[Any specific UI changes to look for]

Ready for your verification!"

6. Human Testing & Feedback

Human's Actions:

Test the changes in the running app (pnpm tauri dev)
Verify acceptance criteria are met
Provide feedback: "Perfect! That worked!" or describe issues

If Issues Found:

Human describes what went wrong or what's not working
Claude investigates and fixes the issues
Return to step 4 (Testing & Verification) after fixes
Repeat until verification succeeds

7. Story Completion

Claude's Actions (after human confirms success):

Mark story as ✅ Completed in the project_plan markdown file
Update todo list to completed
Update progress tracking in the project_plan markdown file
Update technical_considerations.md with lessons learned

Documentation Updates

During Each Story

Claude should update these files as needed:
CLAUDE.md Updates


Add new commands discovered during implementation
Update architecture notes if patterns change
Document any new dependencies or tools
Note any gotchas or important considerations

technical_considerations.md Updates


Document technical decisions and rationale
Record issues encountered and solutions
Note what works well and what to avoid
Capture performance considerations
Document testing strategies that work

Quality Checks

Before Marking Story Complete


 All acceptance criteria met
 All specified tests pass
 No new console errors or warnings
 Code follows project conventions
 Relevant documentation updated
 Human verification completed

Code Quality Standards


Use TypeScript types properly
Follow React best practices
Use Tailwind classes consistently
Handle errors gracefully
Write clear, self-documenting code
Keep functions small and focused

Communication Patterns

Starting a Story

Claude: "Ready for Story X.Y: [Title]. My plan: [brief plan]. Does this approach sound good?"
During Implementation

Claude: [Work silently through implementation, testing, and verification]
Requesting Verification

Claude: "Story X.Y implementation complete! Changes: [summary]. Please verify: [specific things to check]. Ready for your verification!"
After Human Confirmation

Claude: "Great! Marking Story X.Y as completed. Moving to next story..."
Emergency Procedures

If Story Becomes Too Complex


Break it down into smaller sub-tasks
Document the breakdown in technical_considerations.md
Get human approval for the new approach

If Architecture Changes Needed


Document the change rationale in technical_considerations.md
Update mcp-browser-architecture.md
Get human approval before major changes

If Stuck on Technical Issue


Document the issue in technical_considerations.md
Propose 2-3 alternative approaches
Ask human for guidance

Success Metrics


Stories completed per session
Build success rate (should be 100%)
Quality of human verification feedback
Documentation completeness
Knowledge capture effectiveness


This workflow ensures we maintain quality, capture knowledge, and make steady progress toward our MVP goal.

  
## project_plan_phase_2.md

      
    Raw
  

              project_plan_phase_2.md
            
          
    Protocollie - Phase 2 Project Plan

Overview

Phase 2 transforms Protocollie from a functional MVP into a polished professional development tool. The focus is on enhanced tool execution UX, professional UI/UX design, and developer experience improvements that make it competitive with tools like Postman.
Story Status Legend


⏳ Pending - Not started
🔄 In Progress - Currently being worked on
✅ Completed - Implemented and verified
🧪 Testing - Implementation complete, awaiting verification


Phase 2.0: Professional Layout Foundation

Story 2.0.1: Implement Three-Panel Layout Structure

Status: ✅ Completed
As a developer, I want a professional three-panel layout so that the app feels like a mature development tool.
Acceptance Criteria:

Replace current simple layout with three-panel design
Left sidebar (250-400px, resizable): Server and navigation management
Main content (flex-grow): Primary tool workspace
Right panel (300-500px, resizable, collapsible): Contextual information
Panel resize functionality with drag handles
Responsive behavior for different screen sizes

Technical Implementation:

Create new Layout component with three panels
Use CSS Grid or Flexbox for panel management
Add resize handles between panels with proper cursor states
Implement panel collapse/expand functionality
Add responsive breakpoints for mobile/tablet behavior

Testing:

Manual: Panel resizing works smoothly
Manual: Layout adapts correctly to different window sizes
Manual: Panel collapse/expand maintains state
Visual test: Layout feels professional and familiar


Story 2.0.2: Enhanced Header with Navigation

Status: ✅ Completed
As a developer, I want a professional header so that I can quickly access key functionality.
Acceptance Criteria:

Enhanced header spanning full width above panels
Protocollie branding/logo on left
Workspace selector dropdown (placeholder for now)
Theme toggle button
Settings/preferences access
Connection status indicator

Technical Implementation:

Update existing Header component with new layout
Add workspace selector (initially just shows "Default Workspace")
Implement theme toggle functionality (dark/light)
Add settings dropdown menu
Include global connection status indicator

Testing:

Manual: Header elements are accessible and functional
Manual: Theme toggle works across all components
Manual: Settings dropdown provides appropriate options
Visual test: Header looks professional and branded


Story 2.0.3: Redesigned Left Sidebar Navigation

Status: ✅ Completed
As a developer, I want organized sidebar navigation so that I can efficiently manage servers and workspaces.
Acceptance Criteria:

Sectioned sidebar with clear visual hierarchy
Servers section with current server management
Quick actions section (Add Server, etc.)
Navigation sections for future features (Collections, History, etc.)
Sidebar collapse/expand functionality
Search/filter capability for server list

Technical Implementation:

Create new Sidebar component with sectioned design
Implement collapsible sections with proper state management
Add search functionality for server filtering
Include navigation placeholders for Phase 2 features
Proper keyboard navigation and accessibility

Testing:

Manual: Sidebar sections expand/collapse correctly
Manual: Server search/filter works effectively
Manual: Sidebar collapse doesn't break functionality
Accessibility test: Keyboard navigation works throughout sidebar


Story 2.0.4: Tool Selection Dropdown in Main Panel

Status: ✅ Completed
As a developer, I want a tool selection dropdown so that I can quickly access any tool from connected servers.
Acceptance Criteria:

Dropdown at top of main content panel
Shows all tools from all connected servers
Groups tools by server with clear visual separation
Search/filter functionality within dropdown
Shows tool parameter count and description as preview
Keyboard navigation support (arrow keys, type-to-search)

Technical Implementation:

Create ToolSelector component with dropdown functionality
Aggregate tools from all connected servers
Implement search/filter with fuzzy matching
Add keyboard navigation with proper focus management
Show tool metadata (server, parameter count, description)
Handle empty states (no servers, no tools)

Testing:

Manual: Dropdown shows all available tools correctly
Manual: Search/filter narrows results appropriately
Manual: Keyboard navigation works smoothly
Integration test: Tool selection triggers correct tool display


Story 2.0.5: Dynamic Main Content Area

Status: ✅ Completed
As a developer, I want a dynamic main content area so that I can focus on the selected tool.
Acceptance Criteria:

Main content area responds to tool selection
Shows tool-specific interface when tool is selected
Empty state when no tool is selected
Loading states during tool discovery
Error states for tool loading failures
Breadcrumb navigation showing current context

Technical Implementation:

Create MainContent component with dynamic rendering
Implement tool-specific view rendering
Add breadcrumb navigation component
Handle loading, error, and empty states
Integrate with existing tool execution components
Smooth transitions between different tool views

Testing:

Manual: Main content updates correctly with tool selection
Manual: Empty and loading states display appropriately
Manual: Breadcrumbs show accurate navigation context
Integration test: Tool selection flows work end-to-end


Story 2.0.6: Right Panel Context System

Status: ✅ Completed
As a developer, I want contextual information in the right panel so that I have relevant details at hand.
Acceptance Criteria:

Right panel shows context-sensitive information
Tool documentation and examples when tool is selected
Request history for current tool
Server information and connection details
Collapsible with state persistence
Tabbed interface for different information types

Technical Implementation:

Create RightPanel component with tabbed interface
Implement context-aware content rendering
Add Documentation, History, Server Info tabs
Include panel collapse/expand with state persistence
Responsive behavior (auto-hide on smaller screens)
Loading states for dynamic content

Testing:

Manual: Right panel shows relevant context information
Manual: Tabs switch correctly with appropriate content
Manual: Panel collapse/expand works smoothly
Manual: Context updates appropriately with tool selection


Phase 2a: Enhanced Tool Execution Interface

Story 2.1: Advanced Parameter Input Forms

Status: ✅ Completed
As a developer, I want sophisticated parameter input forms so that I can easily test complex tools.
Acceptance Criteria:

✅ Replace basic text inputs with type-aware form controls
✅ Add JSON schema validation for complex parameter types
✅ Support nested object and array parameter inputs
✅ Add parameter hints and examples from MCP tool descriptions
✅ Form validation with real-time feedback

Implementation Notes:

Enhanced ParameterInput component with type-specific controls
JsonParameterInput component for complex object/array types
Real-time JSON validation with specific error messages
Schema-based example generation for all parameter types
Format JSON and Use Example buttons for improved workflow

Testing:

✅ Manual: Test with tools having complex nested parameters
✅ Manual: Verify JSON schema validation works correctly
✅ Integration test: Complex parameter submission works


Story 2.2: Syntax Highlighting for Results

Status: ✅ Completed
As a developer, I want syntax-highlighted results so that I can easily read tool outputs.
Acceptance Criteria:

✅ Add react-syntax-highlighter or similar library
✅ Detect content type (JSON, XML, YAML, etc.) and apply appropriate highlighting
✅ Support copy-to-clipboard functionality
✅ Add line numbers for long outputs
✅ Theme-aware highlighting (dark/light modes)

Implementation Notes:

Created EnhancedSyntaxHighlighter component with intelligent content type detection
Supports JSON, XML, YAML, CSV, JavaScript, Python, Markdown, and plain text
Added copy-to-clipboard functionality with visual feedback
Line numbers and content size indicators for long outputs
Theme-aware styling using oneDark/oneLight themes
Replaced basic JsonDisplay throughout the application

Testing:

✅ Manual: Execute tools returning different content types
✅ Manual: Verify syntax highlighting renders correctly
✅ Manual: Copy functionality works across different content types


Story 2.3: Tool Execution Templates

Status: ✅ Completed
As a developer, I want to save parameter configurations so that I can quickly re-run common scenarios.
Acceptance Criteria:

✅ Add "Save as Template" button for executed tools
✅ Template naming and description
✅ Quick-load templates from dropdown
⚠️ Edit and delete existing templates (deferred - core functionality complete)
✅ Templates persist in database

Implementation Notes:

Complete database schema with templates table and CRUD operations
SaveTemplateModal component for template creation with name and description
Template dropdown selector in parameter forms with automatic loading
Template parameters populate form fields when selected
Database persistence with server and tool association

Testing:

✅ Manual: Save template, verify it loads correctly
⚠️ Manual: Edit template, verify changes persist (deferred)
✅ Integration test: Template CRUD operations work


Story 2.4: Request History Enhancement

Status: ✅ Completed
As a developer, I want rich execution history so that I can track and replay past requests.
Acceptance Criteria:

✅ Enhanced history view with search and filtering
✅ Group history by server and tool
✅ Show execution trends and statistics
✅ Export history to common formats (JSON, CSV)
✅ History search by tool name, parameters, or response content

Implementation Notes:

Enhanced database backend with get_history_filtered function for advanced filtering
Added get_history_stats function for execution trends and tool usage statistics
Implemented export_history command supporting JSON and CSV formats
Created EnhancedHistoryPanel component with comprehensive search, filtering, and grouping
Three view modes: List view, Grouped view (by server/tool/status), and Statistics view
Real-time filtering by server, tool, status, and global search query
Export functionality with automatic filename generation and browser download
Statistics dashboard showing total executions, success rates, most used tools, and server breakdown
Architectural Fix: Implemented HistoryWrapper component to isolate search input from re-rendering hierarchy
Perfect Search UX: Search input never loses focus or text, maintains stable typing experience

Testing:

✅ Manual: History filtering and search work correctly
✅ Manual: Export functionality produces correct output
✅ Integration test: History operations perform well with large datasets


Story 2.5: Batch Tool Execution

Status: 🔄 Moved to Phase 5 (Advanced Testing & Automation)
As a developer, I want to execute multiple tools in sequence so that I can test workflows.
Note: This story has been moved to Phase 5 as it's more aligned with advanced testing and automation features rather than core tool execution UX.

Phase 2b: Professional UI/UX Design System

Story 2.6: Comprehensive Design System

Status: ✅ Completed
As a developer, I want a cohesive design system so that the app feels professional.
Acceptance Criteria:

Standardize color palette and typography
Create reusable component library
Add consistent spacing and layout patterns
Implement proper focus states and accessibility
Document design system components

Testing:

Manual: Visual consistency across all screens
Accessibility test: Tab navigation and screen reader support
Manual: Components render correctly in different states


Story 2.7: Enhanced Dark/Light Theme System

Status: ✅ Completed
As a developer, I want theme switching so that I can use the app in different lighting conditions.
Acceptance Criteria:

Add theme toggle in header/settings
Comprehensive dark and light theme support
Theme preference persists across sessions
Smooth theme transitions
All components support both themes

Testing:

Manual: Theme switching works across all components
Manual: Theme preference persists after restart
Visual test: Both themes are visually appealing


Story 2.8: Professional Header and Navigation

Status: ✅ Completed
As a developer, I want polished navigation so that the app feels like a professional tool.
Acceptance Criteria:

Enhanced header with branding and navigation
Add breadcrumb navigation for complex views
Quick server switching dropdown
Settings and preferences access
Status indicators for connection health

Testing:

Manual: Navigation works intuitively
Manual: Breadcrumbs update correctly
Manual: Server switching maintains context


Story 2.9: Enhanced Server Management UI

Status: ✅ Completed
As a developer, I want improved server management so that I can efficiently organize connections.
Acceptance Criteria:

✅ Server cards with rich information display
✅ Connection status with detailed metrics
✅ Server grouping and categorization
✅ Bulk operations (connect/disconnect multiple servers)
✅ Server health monitoring and alerts

Implementation Notes:

Created enhanced ServerCard component with comprehensive metrics (tool count, response time, uptime)
Implemented EnhancedServerSection with grouped view (Connected/Disconnected/Connecting/Error)
Added bulk selection with checkboxes and bulk connect/disconnect operations
Built useServerHealth hook for real-time health monitoring with configurable alerts
Created HealthAlerts component with dismissible notifications for system issues
Integrated health monitoring into main application with alert display in sidebar

Testing:

✅ Manual: Server management operations work smoothly
✅ Manual: Status indicators are accurate and timely
✅ Integration test: Bulk operations handle errors gracefully


Story 2.10: Tool Discovery and Organization

Status: ✅ Completed
As a developer, I want organized tool discovery so that I can find tools efficiently.
Acceptance Criteria:

✅ Tool categorization and tagging
✅ Search and filter tools across all servers
✅ Recently used tools quick access
✅ Tool documentation and examples display
✅ Favorite tools bookmarking

Implementation Notes:

Enhanced database schema with tool_favorites, recent_tools, and tool_tags tables
EnhancedToolSelector component with advanced filtering, sorting, and real-time metadata
ToolQuickAccess component providing immediate access to recent/favorite tools
Automatic recent tool tracking integrated into tool execution workflow
Complete CRUD operations via 8 new Tauri commands for tool organization data
Visual indicators (⭐ favorites, 🕐 recent, usage badges) for instant tool context

Testing:

✅ Manual: Tool search and filtering work correctly
✅ Manual: Categories and tags help organization
✅ Manual: Recently used tools update appropriately


Phase 2c: Developer Experience Enhancements

Story 2.11: Code Editor Integration

Status: ✅ Completed
As a developer, I want code editor features so that I can efficiently input complex parameters.
Acceptance Criteria:

✅ Integrate Monaco Editor or CodeMirror for parameter input
✅ JSON schema validation with inline errors
✅ Auto-completion for parameter names and values
✅ Syntax highlighting for JSON input
✅ Format and validate JSON button

Implementation Notes:

Selected Monaco Editor for superior TypeScript support and JSON schema integration
Created CodeEditor component in design system with automatic theme switching
Replaced JsonParameterInput component with enhanced Monaco-based editor
JSON schema generation from MCP ToolParameter definitions for real-time validation
Toolbar with Format JSON, Use Example, and Preview functionality

Testing:

✅ Manual: Code editor provides good developer experience
✅ Manual: JSON validation works correctly
✅ Manual: Auto-completion helps with parameter input


Story 2.12: Response Viewer Enhancement

Status: ✅ Completed
As a developer, I want powerful response viewing so that I can analyze tool outputs.
Acceptance Criteria:

✅ Tabbed view for different response formats (Raw, Formatted, Headers)
✅ JSON path search and navigation
✅ Response size and performance metrics
✅ Download/save response functionality
✅ Response comparison between executions

Implementation Notes:

Created EnhancedResponseViewer component with tabbed interface (Formatted, Raw, Metadata, JSON Path, Compare)
JSON path search with dot notation and array indexing (e.g., data.users[0].name)
Download functionality supporting JSON, Text, and CSV formats for array responses
Response comparison system with side-by-side viewing and statistics
Performance metrics display (execution time, response size, success rates)
Integration with existing template saving functionality
Replaced simple response display with comprehensive analysis tool

Testing:

✅ Manual: Response viewer handles different content types
✅ Manual: JSON navigation works for complex responses
✅ Manual: Performance metrics are accurate


Story 2.13: Environment Variable Management

Status: 🔄 Moved to Phase 5 (Advanced Testing & Automation)
As a developer, I want environment management so that I can test tools in different contexts.
Note: This story has been moved to Phase 5 as it's more aligned with advanced testing and automation features, along with workspace management functionality.

Story 2.14: Performance Monitoring

Status: 🔄 Moved to Phase 5 (Advanced Testing & Automation)
As a developer, I want performance insights so that I can optimize tool usage.
Note: This story has been moved to Phase 5 as it's more aligned with advanced monitoring and testing features.

Phase 2d: Advanced Functionality

Status: 🔄 All stories moved to Phase 5 (Advanced Testing & Automation)
Note: All Phase 2d stories (2.16-2.20) have been moved to Phase 5 as they are more aligned with advanced testing, automation, and extensibility features rather than core professional development tool functionality.
Stories moved to Phase 5:

Story 2.16: Request Chaining
Story 2.17: Mock and Test Data Management
Story 2.18: API Documentation Generation
Story 2.19: Integration Testing Framework
Story 2.20: Plugin System Foundation


Phase 2e: Visual Polish and Branding

Story 2.21: Professional Branding

Status: ✅ Completed
As a user, I want professional branding so that the tool feels trustworthy and polished.
Acceptance Criteria:

✅ Professional logo and brand identity
✅ Consistent brand colors and typography
✅ Loading screens and animations
✅ About page with product information
⚠️ Marketing materials and screenshots (deferred)

Implementation Notes:

Created ProtocollieLogo component with multiple size variants and flexible branding options
Enhanced design system tokens with brand colors, professional typography hierarchy, and animation states
Added LoadingScreen, LoadingSpinner, LoadingDots, and SkeletonLoader components for professional loading states
Implemented AboutModal with comprehensive product information, feature highlights, and system details
Enhanced Modal component with smooth entrance/exit animations using scale and fade transitions
Updated Header component to use the new professional logo system
All components follow consistent brand identity with blue-to-purple gradient theme

Testing:

✅ Manual: Branding is consistent across all screens
✅ Manual: Animations enhance rather than distract
✅ Visual test: Brand identity is professional and memorable


Story 2.22: Onboarding and Help System

Status: ✅ Completed
As a new user, I want guided onboarding so that I can quickly understand the tool.
Acceptance Criteria:

✅ Welcome tour for new users
✅ Interactive tutorials for key features
✅ Contextual help and tooltips
✅ Documentation integration
⚠️ Video tutorials and examples (deferred - comprehensive text-based help implemented)

Implementation Notes:

Created custom WelcomeTour component with smart positioning architecture for large/small elements
Implemented contextual help system with Tooltip and HelpIcon components
Built comprehensive HelpModal with organized documentation, keyboard shortcuts, and troubleshooting guides
Added keyboard shortcuts system supporting global shortcuts (?, Ctrl+D, Ctrl+N, Ctrl+K, Ctrl+Enter)
Integrated first-time user detection with localStorage persistence and tour management
Enhanced server configuration forms with contextual help icons
Architectural Innovation: Dual positioning strategy solves tour positioning for large elements

Testing:

✅ Manual: Onboarding guides users effectively through 7-step tour
✅ Manual: Help system provides relevant information with contextual tooltips
✅ Manual: Keyboard shortcuts work globally without interfering with form input
✅ User test: Tour automatically launches for new users and can be restarted from help modal


Story 2.23: Accessibility Enhancements

Status: ✅ Completed
As a user with disabilities, I want accessible interfaces so that I can use the tool effectively.
Acceptance Criteria:

✅ Full keyboard navigation support with arrow keys, Enter, Escape, and Tab
✅ Screen reader compatibility with comprehensive ARIA labels, roles, and descriptions
✅ High contrast mode support with enhanced color accessibility
✅ Focus indicators and ARIA labels throughout all interactive elements
✅ Accessibility testing and compliance with WCAG guidelines

Implementation Notes:

AccessibilityContext provides centralized accessibility settings management
Enhanced keyboard navigation for ToolSelector dropdown with full arrow key support
High contrast mode with CSS custom properties and yellow focus indicators
Skip navigation component for efficient keyboard-only navigation
Comprehensive ARIA implementation including roles, labels, and live regions
Enhanced focus indicators using design system tokens for consistency
Motion reduction support respecting user system preferences

Testing:

✅ Accessibility test: Screen reader navigation works with proper ARIA labeling
✅ Manual: Keyboard-only navigation is efficient with arrow keys and shortcuts
✅ Compliance test: WCAG guidelines are met with proper contrast ratios and focus management


Story 2.24: Responsive Design

Status: ✅ Completed
As a user, I want responsive design so that the tool works on different screen sizes.
Acceptance Criteria:

✅ Responsive layout for different window sizes
✅ Desktop-focused interface (mobile not applicable for Tauri app)
✅ Adaptive sidebar and panel behavior
✅ Optimal use of screen real estate
✅ Smooth transitions and collapse behaviors

Implementation Notes:

Added automatic sidebar collapse on windows < 1200px width (BREAKPOINT_COLLAPSE_SIDEBAR)
Added automatic right panel hide on windows < 1024px width (BREAKPOINT_HIDE_RIGHT_PANEL)
Implemented collapsed sidebar state with icon-only navigation (60px width)
Added manual toggle buttons for both sidebar and right panel collapse
Enhanced Sidebar component to handle collapsed state with appropriate UI
Added responsive Tailwind classes (px-3 lg:px-6, text-lg lg:text-xl) throughout components
Improved text wrapping and overflow handling to prevent layout breaking

Testing:

✅ Manual: Interface adapts correctly to different desktop window sizes
✅ Manual: All features remain accessible at small desktop sizes (1024px+)
✅ Visual test: Layout is aesthetically pleasing at all supported sizes


Story 2.25: Error Handling and User Feedback

Status: 🔄 Moved to Phase 3 (Enhanced Features & Content Types)
As a user, I want clear error handling so that I understand what went wrong and how to fix it.
Note: This story has been moved to Phase 3 to focus Phase 2 completion on core professional development tool functionality.

Story 2.26: Help Modal Size Improvement

Status: ✅ Completed
As a user, I want a larger help modal so that I can read documentation comfortably.
Acceptance Criteria:

✅ Help modal uses larger size for better readability
✅ Content area provides adequate space for documentation
✅ MCP Docs button links to correct URL (https://modelcontextprotocol.io)

Implementation Notes:

Changed Modal size from default to 'large' (max-w-4xl instead of max-w-md)
Increased content height from h-96 (384px) to h-[32rem] (512px)
Fixed MCP Docs URL using correct Tauri v2 openUrl() API from @tauri-apps/plugin-opener
Updated AboutModal external links: Official Site (protocollie.io), MCP Protocol (modelcontextprotocol.io), Discord (discord.gg/9nxCY26qq7)
Removed GitHub button, changed grid from 2x2 to 1x3 layout
Added all URLs to Tauri capabilities configuration for security

Testing:

✅ Manual: Help modal is significantly larger and more readable
✅ Manual: MCP Docs button opens correct external documentation
✅ Manual: About modal buttons open correct external websites


Development Notes

Phase 2 Technical Dependencies


Syntax Highlighting: react-syntax-highlighter or similar
Code Editor: Monaco Editor or CodeMirror
Icons: Lucide React or Heroicons
Charts: Recharts or Chart.js for performance visualizations
Testing: Jest/Vitest for plugin testing framework

Design System Principles


Maintain Tailwind CSS utility-first approach
Use CSS variables for theme switching
Implement design tokens for consistency
Focus on developer productivity and clarity
Prioritize accessibility from the start

Story Size Guidelines


Each story should be completable in 30-45 minutes (slightly larger than Phase 1)
Stories may have dependencies but should be independently testable
UI stories should include visual regression testing
Performance stories should include benchmarking

Testing Strategy


UI Stories: Manual verification + visual regression testing
UX Stories: User testing + accessibility validation
Performance Stories: Benchmark testing + load testing
Integration Stories: End-to-end testing with real MCP servers


Recent Updates (Post Story 2.3)

Critical UI Infrastructure Fixes Completed

Following user feedback after Story 2.3 completion, several critical UI issues were identified and resolved:


JSON Word Wrapping Issue: Fixed infinite horizontal scrolling in center window

Root Cause: CSS Grid layout allowing content to expand beyond container width
Solution: Added comprehensive width constraints (w-full, minWidth: 0) at all container hierarchy levels


Window Startup Size: Increased default window from 800x600 to 1400x900

Ensures three-panel layout is properly visible on startup
Added minimum constraints (1000x700) for optimal usability


These fixes significantly improve the developer experience and form the foundation for the remaining Phase 2a stories.

Progress Tracking

Phase 2.0 (Layout Foundation): 6/6 stories completed
Phase 2a (Enhanced Tool Execution): 4/4 stories completed (+ critical UI fixes completed, Story 2.5 moved to Phase 5)
Phase 2b (Professional UI/UX): 5/5 stories completed

Phase 2c (Developer Experience): 2/2 stories completed (Stories 2.13 & 2.14 moved to Phase 5)
Phase 2d (Advanced Functionality): All 5 stories moved to Phase 5
Phase 2e (Visual Polish): 5/5 stories completed (Story 2.25 moved to Phase 3, Story 2.26 added for help modal improvements)
Overall Phase 2: 22/22 stories completed (100%) + critical UI infrastructure fixes (8 stories moved to Phase 5, 1 story moved to Phase 3)
Estimated Timeline: 6-8 weeks with dedicated development
Success Metrics

Phase 2 completion will be measured by:

User Experience: Tool feels professional and competitive with Postman
Developer Productivity: Common MCP testing workflows are efficient
Visual Design: Interface is polished and branded appropriately
Performance: Tool remains responsive with complex operations
Accessibility: Tool is usable by developers with different abilities
Extensibility: Plugin system enables customization and community contributions

Phase 2 transforms Protocollie from a functional MVP into a professional development tool that MCP developers actively choose over alternatives.
Known Issues & Bugs

Bug 2.B1: Server Connection UI State Sync Issue

Priority: Medium
Description: When clicking on a disconnected server in the left panel, the main content shows "Server not connected" message. When clicking the "Connect" button and the server successfully connects, the UI doesn't refresh to show the connected state and tool list.
Expected Behavior: After successful connection, the main content should automatically refresh to show the server's tools and update the left panel to reflect the connected state.
Impact: Users must manually refresh or click elsewhere to see the connected server's tools, breaking the expected workflow.

Bug 2.B2: Quick Access Panel Auto-Update Missing

Priority: Medium

Description: When executing tools on a connected server, the Quick Access panel (recent tools, favorites) doesn't automatically update to reflect the new execution.
Expected Behavior: The Quick Access panel should immediately update to show:

Recently used tools list with the newly executed tool at the top
Updated usage counts and last-used timestamps
Real-time synchronization with tool execution activity

Impact: Developers don't see their recent activity reflected in the Quick Access panel until they manually refresh or restart the application, reducing the panel's utility for workflow acceleration.

Bug 2.B3: Adding new server disconnects existing servers

Priority: High
Description: When adding a new MCP server while there are existing connected servers, all previously connected servers get disconnected.
Expected Behavior: Adding a new server should not affect the connection status of existing servers.
Impact: Disruptive to workflow when managing multiple servers simultaneously. Forces users to reconnect all servers after adding a new one.

Note: These bugs will be addressed in a future maintenance sprint once the core Phase 2 features are complete.

  
## technical_considerations.md

      
    Raw
  

              technical_considerations.md
            
          
    Technical Considerations & Decisions

Overview

This directory contains technical decisions, lessons learned, and implementation notes for Protocollie. Each document focuses on a specific aspect of the project to keep information focused and accessible.
Document Index

Development Workflow

Captures our build and testing strategy, story-driven development approach, and effective testing patterns. Includes details on:

Build verification process with pnpm build and pnpm tauri build --no-bundle
Story-driven development methodology for 15-30 minute atomic stories
Testing strategies for different types of features (UI, Database, IPC, MCP)

Architecture Decisions

Major architectural decisions and their rationales. Key topics include:

System Node.js architecture (direct process spawning vs bundled sidecars)
Tailwind CSS v4 content detection challenges and solutions
Database schema design with JSON storage for flexibility
Future scalability considerations

UI/UX Patterns

Comprehensive guide to UI/UX patterns and component decisions. Covers:

Parameter form lifecycle management and best practices
Tool selection and discovery patterns
Professional branding and design system implementation
Enhanced navigation, server management, and accessibility features
Responsive design for desktop applications
Custom title bar and window dragging solutions

Bug Fixes

Documentation of significant bugs and their fixes. Includes:

Server connection state synchronization issues
Quick Access panel auto-update problems
Code coverage profraw file issues in development
Detailed root cause analysis and solution implementations

Color Migration

Complete documentation of the semantic color system migration project:

Comprehensive color usage analysis across 1,100+ hardcoded instances
Semantic color architecture design with accessibility focus
Tailwind CSS v4 integration and CSS variable implementation
Automated migration tooling and mapping references
Critical Tailwind v4 architecture discovery and resolution

Tailwind v4 Color System

🚨 CRITICAL REFERENCE - Definitive guide for Tailwind v4 color implementation:

Tailwind v4 vs v3 architectural differences and requirements
Correct @theme directive implementation patterns
oklch color space usage and light theme overrides
Common pitfalls, silent failure modes, and verification methods
Migration patterns and build verification requirements

Performance & Technical Insights

Key technical insights and performance considerations:

MCP protocol implementation details
Tool execution timing and measurement strategies
Process management pitfalls and solutions
Common development pitfalls and their solutions
Performance optimization patterns

Quick Reference

When starting a new feature or debugging an issue, consult:

Development Workflow - For build and testing approach
Architecture Decisions - For system design rationale
🚨 Tailwind v4 Color System - CRITICAL for any color-related work
UI/UX Patterns - For component implementation patterns
Color Migration - For semantic color usage patterns and migration status
Bug Fixes - To avoid previously encountered issues
Performance & Technical Insights - For optimization strategies

🔥 Critical Reminders


Colors MUST use @theme directive in CSS - JavaScript config approach doesn't work in Tailwind v4
Always verify semantic colors are actually applied - Silent failure mode exists
Use oklch color space for better consistency and modern browser support

Contributing

When adding new technical decisions or lessons learned:

Determine which document category fits best
Add your content to the appropriate file
Keep entries focused and include concrete examples
Update this index if adding new categories
No results found