feat: Replace homepage with conversation manager using TypeScript SDK

[rbren]

Overview

This PR transforms the example application homepage into a comprehensive conversation manager that demonstrates the full capabilities of the TypeScript SDK for interacting with OpenHands Agent Server conversations.

Changes Made

Homepage Transformation

• Removed most existing homepage content while preserving the settings button
• Replaced with a full-featured conversation manager interface

New ConversationManager React Component

• List View: Display all existing conversations with their current state and latest events
• Create: Form to create new conversations with customizable parameters
• Messaging: Send messages to active conversations and view responses
• Delete: Remove conversations with confirmation
• Real-time Updates: Shows conversation status, latest events, and current state

SDK Enhancements

• Added ConversationManager class for conversation CRUD operations
• Added ConversationSearchRequest and ConversationSearchResponse types
• Added ConversationManagerOptions configuration type
• Updated exports to include new conversation management functionality

Debugging & Investigation (Latest Updates)

• Added comprehensive logging to trace API key/model name confusion causing 401 errors
• HTTP request body logging in http-client.ts to see exact request payload
• Agent object and request logging in remote-conversation.ts to trace data flow
• Investigating where model name is incorrectly being passed as API key in HTTP requests

Technical Implementation

• TypeScript: Full type safety throughout the conversation manager
• React Hooks: Modern React patterns with useState and useEffect
• CSS Styling: Comprehensive styling for a polished user interface
• Error Handling: Robust error handling for API operations
• Loading States: User feedback during async operations

Features Demonstrated

1. Conversation Listing: Browse all conversations with metadata
2. Conversation Creation: Create new conversations with custom settings
3. Message Exchange: Send messages and receive agent responses
4. State Monitoring: View current conversation state and latest events
5. Conversation Management: Delete conversations when no longer needed

Current Status

✅ Completed Features:

• Conversation creation with proper agent configuration
• Conversation listing with pagination support
• Message sending functionality
• Conversation deletion
• Settings integration
• Error handling and user feedback

🔍 Under Investigation:

• 401 authentication errors during conversation creation
• API key/model name field confusion in HTTP requests
• Added debugging logs to trace the issue

Files Modified

• example/src/App.tsx - Updated to use ConversationManager
• example/src/components/ConversationManager.tsx - New React component
• example/src/components/ConversationManager.css - Component styling
• example/vite.config.ts - Updated port configuration
• src/conversation/conversation-manager.ts - New SDK class
• src/conversation/remote-conversation.ts - Added debugging logs
• src/client/http-client.ts - Added request body logging
• src/models/conversation.ts - Added new types
• src/index.ts - Updated exports

Testing

• ✅ TypeScript compilation passes
• ✅ Example application builds successfully
• ✅ All SDK exports are properly typed
• ✅ React component renders without errors
• 🔍 Investigating 401 authentication errors with debugging logs

Usage

The conversation manager provides an intuitive interface for:

• Developers learning the SDK capabilities
• Testing conversation workflows
• Demonstrating OpenHands Agent Server integration

This implementation serves as both a functional tool and a comprehensive example of how to build applications using the TypeScript SDK.

Next Steps

1. Resolve the API key/model name confusion causing 401 errors
2. Remove debugging logs once issue is identified and fixed
3. Add comprehensive error recovery mechanisms
4. Enhance UI/UX based on user feedback

[rbren]

@OpenHands fix

Run npm run format:check

> @openhands/agent-server-typescript-client@0.1.0 format:check
> prettier --check "src/**/*.ts" "examples/**/*.ts"

Checking formatting...
[warn] src/conversation/conversation-manager.ts
[warn] Code style issues found in the above file. Run Prettier with --write to fix.
Error: Process completed with exit code 1.

[openhands-ai]

I'm on it! rbren can track my progress at all-hands.dev

[openhands-ai]

Looks like there are a few issues preventing this PR from being merged!

• GitHub Actions are failing:
  • CI

If you'd like me to help, just leave a comment, like

@OpenHands please fix the failing actions on PR #10 at branch `feature/conversation-manager-homepage`

Feel free to include any additional details that might help me get this PR into a better state.

_{^{You can manage your notification settings}}

[openhands-ai]

Summary

I have successfully fixed the Prettier formatting issue that was causing the CI to fail on PR #10.

Problem: The npm run format:check command was failing due to code style issues in src/conversation/conversation-manager.ts.

Solution:

1. Set up the development environment (Node.js 18.20.8, npm, and project dependencies)
2. Ran npm run format to apply Prettier formatting fixes
3. Committed and pushed the formatting changes to the feature/conversation-manager-homepage branch

Changes Made:

• Applied Prettier formatting to src/conversation/conversation-manager.ts
• Fixed line breaks, indentation, and added proper newline at end of file
• No functional changes, only code style improvements

Verification:

• ✅ npm run format:check now passes without any warnings
• ✅ TypeScript compilation still works correctly
• ✅ ESLint shows only warnings (no errors)

The CI formatting check should now pass, resolving the build failure that was preventing the PR from being merged.

_{View full conversation}