@workspace-agent/react-ui

React components for workspace terminal and code editor with LSP support.

Features

• Terminal Component - Full-featured terminal with xterm.js
• Editor Support - Monaco-based code editor with LSP integration
• React Hooks - useTerminal and useEditor for custom implementations
• Provider Pattern - WorkspaceProvider for shared workspace context
• TypeScript First - Complete type definitions included

Installation

npm install @workspace-agent/react-ui
# or
yarn add @workspace-agent/react-ui
# or
pnpm add @workspace-agent/react-ui
# or
bun add @workspace-agent/react-ui

Peer Dependencies

This package requires React 18 or 19:

npm install react react-dom

Quick Start

import { Terminal, WorkspaceProvider } from '@workspace-agent/react-ui';
import '@workspace-agent/react-ui/styles';

function App() {
  return (
    <WorkspaceProvider
      config={{
        apiBaseUrl: 'http://localhost:18080',
        workspaceId: 'ws-123',
      }}
    >
      <Terminal />
    </WorkspaceProvider>
  );
}

Components

Terminal

A full-featured terminal component powered by xterm.js.

import { Terminal } from '@workspace-agent/react-ui';

<Terminal
  theme={{
    background: '#1e1e1e',
    foreground: '#d4d4d4',
    cursor: '#ffffff',
  }}
  config={{
    fontSize: 14,
    fontFamily: 'Monaco, monospace',
  }}
/>

Hooks

useTerminal

Hook for managing terminal sessions programmatically.

import { useTerminal } from '@workspace-agent/react-ui';

function MyTerminal() {
  const {
    terminalRef,
    isConnected,
    sendInput,
    resize,
  } = useTerminal({
    onData: (data) => console.log('Output:', data),
    onConnect: () => console.log('Connected'),
    onDisconnect: () => console.log('Disconnected'),
  });

  return (
    <div>
      <div ref={terminalRef} style={{ height: 400 }} />
      <button onClick={() => sendInput('ls -la\n')}>List Files</button>
    </div>
  );
}

useEditor

Hook for managing the Monaco editor with LSP support.

import { useEditor } from '@workspace-agent/react-ui';

function MyEditor() {
  const {
    editorRef,
    lspStatus,
    openFile,
    saveFile,
  } = useEditor({
    onDiagnostics: (diagnostics) => console.log('Diagnostics:', diagnostics),
  });

  return <div ref={editorRef} style={{ height: 600 }} />;
}

Provider

WorkspaceProvider

Provides workspace context to all child components.

import { WorkspaceProvider, useWorkspace } from '@workspace-agent/react-ui';

function App() {
  return (
    <WorkspaceProvider
      config={{
        apiBaseUrl: 'http://localhost:18080',
        workspaceId: 'ws-abc123',
      }}
    >
      <MyComponent />
    </WorkspaceProvider>
  );
}

function MyComponent() {
  const { config, workspaceId } = useWorkspace();
  return <div>Connected to workspace: {workspaceId}</div>;
}

Styles

Import the styles in your application entry point:

import '@workspace-agent/react-ui/styles';

Or import in CSS:

@import '@workspace-agent/react-ui/styles';

TypeScript

The package includes complete type definitions:

import type {
  TerminalProps,
  TerminalTheme,
  TerminalConfig,
  EditorTheme,
  EditorConfig,
  WorkspaceConfig,
  UseTerminalOptions,
  UseEditorOptions,
} from '@workspace-agent/react-ui';

Requirements

• React 18.0.0+ or React 19.0.0+
• Workspace Agent API server running

Related Packages

• @workspace-agent/sdk - Core SDK for workspace management

License

MIT