[Phase 2] Design explicit component API surface (props interfaces)

[xingyaoww]

Goal

Define clean, documented TypeScript props interfaces for every top-level component that SaaS will import. Components should receive configuration via props, not by reaching into global env vars or singletons.

Parent epic: #3

Current State

Components read configuration directly from:

• import.meta.env.VITE_* env vars (via agent-server-config.ts)
• Global zustand stores
• Global useConfig() / react-query hooks
• react-router navigation hooks

There is no way to instantiate a conversation UI with explicit configuration like:

<ConversationView
  conversationId="abc"
  serverBaseUrl="http://localhost:8000"
  onNavigate={handleNav}
/>

Top-level component interfaces to design:

1. <ConversationView /> — The main conversation UI (chat + workspace panels)
   • Props: conversationId, serverConfig, onEvent, onNavigate
2. <ConversationList /> — Sidebar conversation panel
   • Props: onSelectConversation, onCreateConversation
3. <SettingsPanel /> — Settings UI
   • Props: settingsConfig, navItems, onSave
4. <AgentServerProvider /> — Configuration context provider
   • Props: baseUrl, sessionApiKey, workingDir, workerUrls

Design principles:

• Props for behavior injection (callbacks instead of router hooks)
• Context provider for shared configuration (server URL, auth, etc.)
• Render props / slots for customizable regions
• Sensible defaults so standalone usage requires minimal config

Acceptance Criteria

• TypeScript interfaces documented for all public components
• Each component works standalone with just props (no implicit globals)
• AgentServerProvider replaces direct import.meta.env reads in components
• Documented in a COMPONENTS.md or JSDoc comments

This issue was created by an AI agent (OpenHands) on behalf of the user.

[openhands-ai]

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

[openhands-ai]

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