UI Component Library
Relevant source files
The following files were used as context for generating this wiki page:
- AGENTS.md
- apps/server/src/toy-ui.ts
- apps/app/src/react-app/domains/settings/pages/shell-view.tsx
- apps/app/src/react-app/design-system/extension-detail-modal.tsx
- ee/apps/landing/components/landing-trust.tsx
- apps/app/src/react-app/domains/settings/computer-use-config.tsx
- apps/app/src/react-app/domains/onboarding/welcome-page.tsx
OpenWork utilizes a multi-layered UI strategy designed to provide a "practical control surface for agentic work." The library is built primarily on React and Tailwind CSS, with a core preference for shadcn/ui (Base UI) components. The system is designed to be local-first but cloud-ready, ensuring that non-technical users can interact with complex agent workflows through intuitive interfaces.
Sources: AGENTS.md:7-13, AGENTS.md:40-45
Core Tech Stack and Architecture
The UI implementation is split between the main desktop application (React) and a specialized "Toy UI" used for host contract harnessing and testing. The primary application logic leverages TanStack Query for data fetching, Zustand for state management, and Framer Motion for interactive animations.
Design Principles
- Local-first, cloud-ready: Interfaces prioritize local execution but provide seamless transitions to cloud workflows.
- Simplicity: Solutions must be concise and simple, assuming non-technical end users.
- Component Reuse: New components are built using shadcn/ui and Radix-based primitives.
Sources: AGENTS.md:15-20, AGENTS.md:41-55
The diagram shows the relationship between core UI primitives, state management libraries, and the specialized Toy UI used for server interaction.
UI Primitives and Layout Components
The library provides a structured set of layout components to maintain visual consistency across settings and documentation pages.
Layout Hierarchy
The application uses a "LayoutStack" pattern to organize content into logical sections:
- LayoutStack: The primary container for settings views.
- LayoutSection: Represents a high-level grouping of related settings (e.g., Branding, Visibility).
- LayoutSectionItem: A specific interactive row within a section, often containing a title, description, and an action (like a
SwitchorButton).
Sources: apps/app/src/react-app/domains/settings/pages/shell-view.tsx:16-32
Common Primitive Components
| Component | Description | Source |
|---|---|---|
Button | Standardized button with variants (default, outline, destructive). | apps/app/src/react-app/design-system/extension-detail-modal.tsx:18 |
Card | Used for grouped information with Header, Content, and Footer regions. | apps/app/src/react-app/domains/settings/computer-use-config.tsx:28-36 |
Alert | Provides contextual feedback (Info, Warning, Destructive). | apps/app/src/react-app/domains/settings/pages/shell-view.tsx:17 |
Switch | Accessible toggle switch for boolean settings. | apps/app/src/react-app/domains/settings/pages/shell-view.tsx:21 |
Specialized Component Modules
Extension Detail Modal
The ExtensionDetailModal is a complex component designed to display metadata and setup instructions for various OpenWork extensions (MCP Servers, Skills, Plugins).
Key Features:
- Status Indicators: Visual cues (e.g., Green/Checkmark) for connected states.
- Skill Previews: Strips YAML frontmatter from
SKILL.mdfiles to provide a clean markdown content preview. - Manifest Details: Displays declarative setup instructions, resource labels, and contribution labels from extension manifests.
Sources: apps/app/src/react-app/design-system/extension-detail-modal.tsx:26-118
Computer Use Configuration
A specialized setup card for macOS-specific "Computer Use" functionality. It manages local permission checks (Accessibility and Screen Recording) and provides a direct bridge to the desktop app's native capabilities.
Sources: apps/app/src/react-app/domains/settings/computer-use-config.tsx:88-150
This diagram illustrates the flow of permission verification for the Computer Use module.
The Toy UI System
The toy-ui.ts file defines a self-contained HTML/CSS/JS harness served by the openwork-server. It is used for verifying host contracts and interacting with the server via SSE (Server-Sent Events).
Design Tokens (Toy UI)
The Toy UI defines a core set of CSS variables for its dark-themed radial background and functional colors:
--bg:#0b1020--accent:#53b8ff--danger:#ff5b5b--ok:#51d69c
Sources: apps/server/src/toy-ui.ts:1-14
Functional Interface
The Toy UI includes components for:
- Chat Log: Displaying messages and checkpoints.
- SSE Connection Management: Buttons to connect/stop events and clear timelines.
- Workspace Management: Tools for minting tokens, exporting/importing workspaces, and managing MCP servers.
Sources: apps/server/src/toy-ui.ts:135-246
Visual Styles and Landing Primitives
The project includes specific components for landing and legal pages, which utilize a more traditional prose-focused design.
Shared Primitives (Landing)
- SectionHeading: Standardized H2 with specific scroll margins and tracking.
- Bullet: A flex-based list item with a custom rounded bullet point.
- Prose: Optimized paragraph styling for long-form text (14px, leading-relaxed).
Sources: ee/apps/landing/components/landing-trust.tsx:24-42
Advanced Visuals
The onboarding and landing pages leverage advanced shaders like PaperGrainGradient and PaperMeshGradient to create unique, branded backgrounds with configurable intensity, noise, and colors.
Sources: apps/app/src/react-app/domains/onboarding/welcome-page.tsx:163-181, ee/apps/den-web/app/(den)/dashboard/_components/plugin-detail-screen.tsx:64
The UI Component Library effectively bridges the gap between high-level React domain logic and low-level server harnesses, providing a consistent experience across technical debugging tools and non-technical user interfaces.
Sources: AGENTS.md, apps/server/src/toy-ui.ts, apps/app/src/react-app/design-system/extension-detail-modal.tsx