1120-messages/client/server-ui-refactoring-prompts.md

# Server UI Refactoring: AI Agent Prompts

This document contains a series of prompts to guide an AI agent through refactoring the server page UI for handling 21120/21121 events. Each prompt focuses on a specific aspect of the refactoring process, with detailed instructions and context.

## 1. Analyze Current Architecture

**Prompt:** 
```
Analyze the current server UI architecture for handling 21120/21121 events. Examine the following files and identify the core workflows, component responsibilities, and potential issues:

- 1120_server.html
- src/services/EventDetailsRenderer.ts
- src/services/EventListRenderer.ts
- src/http-response-viewer.ts
- src/services/Nostr21121Service.ts
- src/services/HttpClient.ts
- src/services/HttpService.ts

For each component, identify:
1. Its primary responsibilities
2. How it interacts with other components
3. Any code duplication or tight coupling
4. Areas where separation of concerns could be improved
```

## 2. Design the EventManager Service

**Prompt:**
```
Create a new EventManager service that will centralize event data management. This service should:

1. Maintain a collection of all 21120 and 21121 events
2. Track relationships between request and response events
3. Provide methods for adding, retrieving, and updating events
4. Handle event filtering and searching
5. Manage the selection state of events

Implement this as a TypeScript class in src/services/EventManager.ts with the following features:
- Store events in a Map with event ID as the key
- Track relationships in a separate Map
- Include methods for all necessary event operations
- Implement event filtering capabilities
- Use TypeScript interfaces to define the event data structures

The service should decouple event data management from UI rendering.
```

## 3. Implement Component-Based UI Structure

**Prompt:**
```
Refactor the UI into modular components following these steps:

1. Create a src/components directory to house the new UI components
2. Implement an EventList component (src/components/EventList.ts) that:
   - Renders the list of events in the sidebar
   - Handles event selection
   - Communicates with the EventManager to get event data
   - Supports filtering and searching

3. Implement an EventDetail component (src/components/EventDetail.ts) that:
   - Displays the details of a selected event
   - Manages different view tabs (summary, raw, formatted)
   - Shows related events
   - Provides controls for event actions

4. Update 1120_server.html to use the new component structure

Ensure all components have clean interfaces and minimal dependencies.
```

## 4. Refactor HTTP Request/Response Handling

**Prompt:**
```
Create dedicated components for HTTP request execution and response handling:

1. Implement an HttpRequestExecutor component (src/components/HttpRequestExecutor.ts) that:
   - Extracts HTTP request content from 21120 events
   - Delegates execution to the HttpClient
   - Displays execution progress and errors
   - Triggers the response handling flow

2. Implement a ResponseViewer component (src/components/ResponseViewer.ts) that:
   - Displays HTTP responses in both raw and formatted views
   - Provides an interface for creating 21121 events from responses
   - Handles the relationship between requests and responses

3. Refactor HttpService to eliminate duplicate code and provide a clean API for:
   - Parsing HTTP requests
   - Executing requests
   - Formatting responses

Ensure proper error handling throughout the flow.
```

## 5. Improve Event Relationship Management

**Prompt:**
```
Enhance the handling of relationships between 21120 and 21121 events:

1. Update the EventManager to provide robust methods for:
   - Associating response events with request events
   - Retrieving all responses for a given request
   - Finding the request that a response relates to

2. Implement UI improvements to clearly show relationships:
   - Visual indicators for events with responses
   - Easy navigation between related events
   - Filters to view event chains

3. Create a helper method in the EventManager to validate that a 21121 event correctly references its 21120 parent before saving
```

## 6. Streamline the 21121 Event Creation Flow

**Prompt:**
```
Improve the process of creating 21121 response events:

1. Create a dedicated Nostr21121Creator component (src/components/Nostr21121Creator.ts) that:
   - Takes an HTTP response and a request event ID as input
   - Handles the creation of properly formatted 21121 events
   - Manages the encryption of response content if needed
   - Publishes the event to appropriate relays

2. Integrate this component with the ResponseViewer to provide a seamless flow:
   - Add a "Create 21121 Event" button in the response viewer
   - Show creation status and results
   - Automatically update the UI when a new response event is created

3. Implement proper validation to ensure:
   - The event references the correct request event
   - The content is properly formatted
   - Required tags are included
```

## 7. Enhance HTTP Content Visualization

**Prompt:**
```
Improve the visualization of HTTP content in both requests and responses:

1. Refactor the HttpFormatter service to provide better formatting for:
   - Headers (with syntax highlighting)
   - JSON bodies (with collapsible sections)
   - HTML bodies (with preview option)
   - Other content types

2. Create a tabbed interface for viewing HTTP content with:
   - Raw view (plain text)
   - Formatted view (with syntax highlighting)
   - Headers-only view
   - Body-only view

3. Add copy buttons for different sections of the content

4. Implement diff highlighting when comparing request and response headers
```

## 8. Implement Event Loading Optimizations

**Prompt:**
```
Optimize the loading and display of events, especially for large numbers:

1. Implement virtual scrolling in the EventList component:
   - Only render events that are visible in the viewport
   - Efficiently handle scrolling through many events
   - Maintain performance with 1000+ events

2. Add progressive loading of event details:
   - Load basic event metadata immediately
   - Load and decrypt content asynchronously
   - Show loading indicators during content processing

3. Implement caching strategies:
   - Store processed events in memory for quick access
   - Persist events to localStorage with expiration
   - Implement a cache invalidation strategy
```

## 9. Improve UI/UX for Event Interaction

**Prompt:**
```
Enhance the overall user experience for interacting with events:

1. Redesign the event list items to:
   - Show more context about each event
   - Clearly distinguish between request and response events
   - Indicate encryption status and related event count
   - Support keyboard navigation

2. Improve the event details view to:
   - Show a breadcrumb trail for navigating related events
   - Provide contextual actions based on event type
   - Include better visualizations of event metadata
   - Support collapsible sections for better space utilization

3. Add search and filter capabilities:
   - Search by content, ID, or metadata
   - Filter by event type, time range, or relationship status
   - Save and recall common filters
```

## 10. Testing and Documentation

**Prompt:**
```
Create comprehensive tests and documentation for the refactored components:

1. Implement unit tests for:
   - EventManager service
   - HTTP-related components
   - UI components (using testing library)

2. Add integration tests for:
   - The complete request/response flow
   - Event relationship management
   - UI interactions

3. Document the new architecture:
   - Create a component diagram showing relationships
   - Document the APIs for each service and component
   - Provide usage examples for each component
   - Include performance considerations and best practices

4. Create user documentation explaining the improved UI
```

## 11. Migration Strategy

**Prompt:**
```
Develop a strategy for migrating from the old implementation to the new one:

1. Create a migration plan that:
   - Identifies components to replace first
   - Establishes temporary adapters between old and new components
   - Defines a sequence for replacing components
   - Includes fallback mechanisms

2. Implement a feature flag system to:
   - Toggle between old and new implementations
   - Enable gradual rollout of new components
   - Support A/B testing of the new UI

3. Design a data migration approach for:
   - Moving cached events to the new structure
   - Preserving user preferences and settings
   - Handling in-flight operations during migration
```

## 12. Final Integration

**Prompt:**
```
Integrate all refactored components into a cohesive system:

1. Update the main application entry point to use the new components:
   - Initialize the EventManager
   - Set up the component hierarchy
   - Configure event handling

2. Ensure proper lifecycle management:
   - Initialize components in the correct order
   - Handle cleanup when components are unmounted
   - Manage resources efficiently

3. Verify the complete flows:
   - Receiving and displaying 21120 events
   - Executing HTTP requests
   - Creating and linking 21121 events
   - Navigating between related events

4. Perform end-to-end testing of all user workflows