Files
Allison Durham 11a988a068 add TypeScript types, React hooks, and UI components for web interface (for sundeep) (#214)
* refactor: reorganize daemon client to mirror Rust architecture

- Split monolithic daemon-client.ts into organized modules:
  - lib/daemon/types.ts: All TypeScript type definitions
  - lib/daemon/client.ts: DaemonClient implementation
  - lib/daemon/errors.ts: Error types
  - lib/daemon/validation.ts: Type guards and validation helpers
  - lib/daemon/index.ts: Controlled public exports
- Matches Rust daemon_client module structure for consistency
- Improves maintainability and separation of concerns

* feat: add React hooks layer for daemon interactions

- useApprovals: Manage approval requests with data enrichment
- useSessions: List and launch Claude Code sessions
- useConversation: View conversation history
- useDaemonConnection: Monitor daemon health
- Includes real-time updates via polling
- Provides loading states, error handling, and refresh functions
- Hooks handle all complexity, components just render

* feat: add UI utilities and type definitions

- UI types: UnifiedApprovalRequest for display-friendly data
- Data enrichment: Join approvals with session context
- Formatting utilities: truncate, formatTimestamp, formatParameters
- Error formatting: Convert technical errors to user-friendly messages
- Separation of UI concerns from protocol implementation

* docs: improve documentation structure and developer guides

- Update README to be concise with development section first
- Add comprehensive documentation:
  - ARCHITECTURE.md: System design with mermaid diagrams
  - DEVELOPER_GUIDE.md: Best practices and do's/don'ts
  - API.md: React hooks reference
- Clear guidance on which layer to use (hooks vs daemon client)
- Examples showing correct usage patterns for frontend developers

* formatting

* feat: add real-time subscription support and example components

- Update daemon client to support event callbacks for subscriptions
- Implement proper real-time updates in useApprovalsWithSubscription hook
- Add ApprovalsPanel component using shadcn/ui components
- Fix linting errors with proper eslint comments
- Update App.tsx imports to use new daemon module path
- Fix TypeScript return types in hooks

* feat(wui): add missing shadcn/ui components

Add card, badge, alert, and collapsible components from shadcn/ui
to resolve TypeScript import errors in ApprovalsPanel

* add react
2025-06-16 12:10:41 -07:00

2.7 KiB

API Reference

React Hooks

useApprovals()

Fetch and manage approval requests.

const {
  approvals,    // UnifiedApprovalRequest[]
  loading,      // boolean
  error,        // string | null
  refresh,      // () => Promise<void>
  approve,      // (callId: string, comment?: string) => Promise<void>
  deny,         // (callId: string, reason: string) => Promise<void>
  respond       // (callId: string, response: string) => Promise<void>
} = useApprovals(sessionId?: string)

useApprovalsWithSubscription()

Same as useApprovals() but with real-time updates (polls every 5 seconds).

useSessions()

List and launch Claude Code sessions.

const {
  sessions, // SessionSummary[]
  loading, // boolean
  error, // string | null
  refresh, // () => Promise<void>
  launchSession, // (request: LaunchSessionRequest) => Promise<{ sessionId, runId }>
} = useSessions()

useSession(sessionId)

Get details for a specific session.

const {
  session,  // SessionState
  loading,  // boolean
  error,    // string | null
  refresh   // () => Promise<void>
} = useSession(sessionId: string)

useConversation(sessionId?, claudeSessionId?)

Fetch conversation history.

const {
  events,   // ConversationEvent[]
  loading,  // boolean
  error,    // string | null
  refresh   // () => Promise<void>
} = useConversation(sessionId?: string, claudeSessionId?: string)

useDaemonConnection()

Monitor daemon connection health.

const {
  connected, // boolean
  connecting, // boolean
  error, // string | null
  version, // string | null
  connect, // () => Promise<void>
  checkHealth, // () => Promise<void>
} = useDaemonConnection()

Types

UnifiedApprovalRequest

UI-friendly approval type that combines FunctionCall and HumanContact.

interface UnifiedApprovalRequest {
  id: string
  callId: string
  runId: string
  type: ApprovalType
  title: string // Formatted for display
  description: string // Full details
  tool?: string // Function name
  parameters?: Record<string, any>
  createdAt: Date
  sessionId?: string // Enriched data
  sessionQuery?: string // Enriched data
  sessionModel?: string // Enriched data
}

LaunchSessionRequest

interface LaunchSessionRequest {
  query: string
  model?: string // 'opus' | 'sonnet'
  working_dir?: string
  max_turns?: number
  // ... see types.ts for all options
}

Utilities

formatTimestamp(date)

Format dates for display (e.g., "5m ago", "2h ago")

truncate(text, maxLength)

Truncate text with ellipsis

formatError(error)

Convert technical errors to user-friendly messages

enrichApprovals(approvals, sessions)

Join approval data with session context