# Claude Agent Terminal Ts

> Terminal-style React UI for Claude Agent SDK with keyboard navigation, tool approval, and dark theme

- **Type:** Skill
- **Install:** `agentstack add skill-olaservo-mcp-agent-skills-claude-agent-terminal-ts`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [olaservo](https://agentstack.voostack.com/s/olaservo)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [olaservo](https://github.com/olaservo)
- **Source:** https://github.com/olaservo/mcp-agent-skills/tree/main/skills/claude-agent-terminal-ts

## Install

```sh
agentstack add skill-olaservo-mcp-agent-skills-claude-agent-terminal-ts
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Claude Agent Terminal UI

A retro terminal-inspired chat interface for Claude Agent SDK agents.

## Features

- Dark monospace theme (VS Code-inspired colors)
- Input history with arrow key navigation
- Collapsible tool call blocks with status badges
- Inline tool approval prompts (Approve/Reject)
- Auto-scroll to latest message
- SQLite persistence for chat history
- SDK session resumption across page reloads

## Prerequisites

- Node.js 18+
- Claude Agent SDK (`@anthropic-ai/claude-agent-sdk`)
- Claude Code authentication (`claude login`)

## Quick Start

### 1. Install Dependencies

```bash
# Server dependencies
npm install express cors ws @anthropic-ai/claude-agent-sdk better-sqlite3
npm install -D @types/better-sqlite3 @types/express @types/cors @types/ws tsx typescript

# Client dependencies
npm install react react-dom @mantine/core @mantine/hooks @tabler/icons-react
```

### 2. Copy Snippets

Copy these files to your project:

- `client.tsx` and `styles.css` from this skill
- `websocket-server-sqlite.ts` and `websocket-types.ts` from **claude-agent-sdk-ts** skill

```
your-project/
  src/
    client.tsx      # Terminal React component (this skill)
    styles.css      # Terminal theme (this skill)
    server.ts       # WebSocket server (from claude-agent-sdk-ts)
    types.ts        # Shared types (from claude-agent-sdk-ts)
```

### 3. Configure Server

Edit the server CONFIG section:

```typescript
const CONFIG = {
  port: 3001,
  workingDirectory: process.cwd(),
  model: "sonnet",  // opus, sonnet, or haiku
  allowedTools: ["Bash", "Read", "Write", "Edit", "Glob", "Grep"],
  systemPrompt: "You are a helpful AI assistant.",
  dbPath: "./chat.db",
};
```

### 4. Start Server

```bash
npx tsx server.ts
```

### 5. Use Component

```tsx
import { TerminalChat } from './client';
import './styles.css';

function App() {
  return (
    
      
    
  );
}
```

## Architecture

```
React Client          Express Server         Claude Agent SDK
(client.tsx)          (server.ts)
     |                     |                       |
     |-- WebSocket ------> |                       |
     |                     |-- query() ----------> |
     | |                       |
     |                     |-- continue/block ---> |
```

## Snippets

| Snippet | Source | Description |
|---------|--------|-------------|
| `client.tsx` | This skill | Terminal-styled React component |
| `styles.css` | This skill | Dark terminal CSS theme |
| `websocket-server-sqlite.ts` | claude-agent-sdk-ts | Express + WebSocket + SQLite server |
| `websocket-types.ts` | claude-agent-sdk-ts | Shared TypeScript types |

## Keyboard Shortcuts

| Key | Action |
|-----|--------|
| Enter | Send message |
| Shift+Enter | New line |
| Arrow Up | Previous message in history |
| Arrow Down | Next message in history |

## Component Props

### TerminalChat

| Prop | Type | Description |
|------|------|-------------|
| `wsEndpoint` | `string` | WebSocket server URL (e.g., `ws://localhost:3001/ws`) |

## Flexible Container

The `` component fills whatever container it's placed in:

```tsx
// Full page

  

// Sidebar

  
  
    
  

// Fixed height panel

  

```

## WebSocket Protocol

### Server to Client

| Message Type | Description |
|--------------|-------------|
| `connected` | Initial connection confirmation |
| `history` | Chat history on connect |
| `user_message` | Echo of sent message |
| `assistant_message` | Agent response text |
| `tool_use` | Tool call initiated |
| `tool_approval_request` | Awaiting user approval |
| `result` | Request completed with cost |
| `error` | Error occurred |

### Client to Server

| Message Type | Description |
|--------------|-------------|
| `chat` | User message |
| `tool_approval_response` | Approve/reject tool call |

## Customization

### Colors (in styles.css)

| Variable | Default | Usage |
|----------|---------|-------|
| Background | `#1e1e1e` | Main terminal background |
| Header | `#252526` | Header and input area |
| Text | `#d4d4d4` | Default text color |
| User text | `#9cdcfe` | User message color |
| Accent | `#569cd6` | Tool blocks, focus states |
| Success | `#6a9955` | Completed status |
| Error | `#f14c4c` | Error messages |
| Warning | `#ffcc00` | Approval prompts |

### Fonts

The component uses a monospace font stack:
```css
'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'SF Mono', 'Consolas', monospace
```

## Related Skills

| Skill | Description |
|-------|-------------|
| `claude-agent-sdk-ts` | SDK patterns, API reference, and shared server code |
| `claude-agent-ui-ts` | Simpler unstyled UI alternative |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [olaservo](https://github.com/olaservo)
- **Source:** [olaservo/mcp-agent-skills](https://github.com/olaservo/mcp-agent-skills)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-olaservo-mcp-agent-skills-claude-agent-terminal-ts
- Seller: https://agentstack.voostack.com/s/olaservo
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.