feat: add OpenHands UI example application

[rbren]

Summary

This adds a full visual clone of the OpenHands web UI at examples/openhands/ that demonstrates how to use the TypeScript client SDK with an OpenHands Agent Server backend.

Features

• Home Page - "Let's start building" title, guide message bar, new conversation input
• Sidebar - OpenHands logo, new project, conversations list, settings, user avatar
• Settings Modal - Agent server URL, LLM model, API key, agent selector, confirmation mode
• Conversation Panel - Lists conversations, loading states, error handling
• Conversation Page - Chat interface, terminal, file browser, tab navigation
• Chat Interface - Message display, typing indicator, status indicator, pause/resume/stop controls
• Terminal - XTerm.js integration for command output
• File Browser - Tree view of workspace files

Technical Details

• Uses the TypeScript client SDK for all backend communication
• Zustand stores for state management (agent, conversation, event, settings)
• React Router for client-side routing
• Tailwind CSS with OpenHands dark theme colors
• HeroUI component library
• 104 SVG icons and branding assets from the reference OpenHands frontend

Design Decisions

• V1 Only: Supports only V1 conversation format (not legacy V0)
• Local Mode Only: No SaaS/authentication features
• Theme: Dark theme matching OpenHands colors (primary: #c9b974, base: #0d0f11)

Project Structure

examples/openhands/
├── src/
│   ├── assets/branding/         # OpenHands logos (6 SVG files)
│   ├── icons/                   # 104 SVG icons from reference
│   ├── components/
│   │   ├── features/            # Feature components
│   │   │   ├── chat/            # ChatInterface, ChatInput, ChatMessage
│   │   │   ├── conversation/    # ConversationPanel
│   │   │   ├── controls/        # TabBar
│   │   │   ├── files/           # FileTree
│   │   │   ├── home/            # HomeHeader, NewConversation
│   │   │   ├── settings/        # SettingsModal
│   │   │   ├── sidebar/         # Sidebar navigation
│   │   │   └── terminal/        # Terminal emulator (XTerm.js)
│   │   ├── layout/              # RootLayout
│   │   └── shared/              # LoadingSpinner, IconButton
│   ├── context/                 # ClientContext for SDK integration
│   ├── pages/                   # Home, Conversation pages
│   ├── stores/                  # Zustand stores
│   └── types/                   # TypeScript types
├── public/                      # Favicons
└── [config files]

Running the Example

cd examples/openhands
npm install
npm run dev

Then open http://localhost:3001, configure settings with an LLM API key, and start a conversation.

Screenshots

The UI includes:

• Dark theme matching OpenHands brand colors
• OpenHands logo in sidebar
• "Let's start building" title
• Settings modal for configuration
• Conversation panel slide-out