🦞 Clawsome

Clawsome is the featureful user interface I wish OpenClaw had shipped with...

Features

Chat & Conversation

• Tabbed chat panes — open multiple conversations as tabs, drag topics from the sidebar to open in new tabs, [+] button for quick new sessions
• Council Mode — ⌘+Enter sends your message to multiple models at once (configurable 2–10). The best ideas are automatically synthesized into one superior answer, or compare individual responses
• Split-pane multitasking — drag a topic to the edge of a pane to split into two side-by-side conversations. Watch work progress in one pane while you chat in the other
• Vertical Split View — drag to split any chat into two scrollable panes for referencing earlier messages while composing at the bottom
• Conversation branching — edit any message and fork the conversation, with ◀ 1/2 ▶ navigation between branches. Branch-aware auto-titles label each fork
• Voice chat — mic button with real-time transcription. Agent audio responses play back
• Action buttons — clickable response options, generated on the fly, save typing (enable in Settings)
• Suggested follow-ups — clickable follow-up questions after each response, tailored to the conversation (enable in Settings)
• Inline citations — Perplexity-like citations with superscript links that navigate to source URLs
• Thinking panel — expandable reasoning traces per message
• Per-message metrics — token counts, cost estimates, and response timing in message footers
• Streaming responses — real-time token streaming with preview bubbles during generation
• Interject mid-stream — type while the agent is working to steer or add context without waiting for it to finish (Claude Code /btw style); the superseded turn is marked interrupted, and the agent is told the run was cut off so it doesn't misread cancelled work
• Infinite scroll — smooth history loading, no pagination walls
• File attachments — drag-and-drop or paste images and files

Avatars

• Talking 3D avatars — every agent gets a face. Real-time lip-sync to TTS, idle gaze and breathing, brow-furrow concentration while it thinks, eye contact when it speaks. Default rigs ship in the box; bring your own GLB (see docs/AVATAR.md)

Panels & Navigation

• Drag-and-drop panel layout — every tab (Topics, Viewer, Context, Cost) can be dragged between the left and right panels. Reorder tabs within a panel or move them across. Your layout persists between sessions
• Session sidebar — switch between independent topics, see activity indicators, pin important conversations to the top, regenerate titles
• Auto-summarize topics — two-level labels (title + subtitle) generated automatically from conversation content (enable in Settings)
• Full text search — find anything across all conversations, with in-chat highlighting and match navigation arrows
• Multi-agent support — agent picker in header for switching between configured agents. Each agent gets its own session universe with per-agent themes
• Back / forward navigation — browser-style < > buttons to jump between recently visited topics
• Unread notifications — topics are marked as unread when an agent response completes in a session you're not watching
• Draft persistence — unsent messages survive page refresh and topic switches
• Context window — visual infographic showing exactly what's eating your context window (system prompt, tools, skills, conversation)
• Cost tracker — cross-agent spend dashboard with daily bar charts, per-model breakdown with pricing rates, and per-agent totals

Terminal

• Terminal sidebar tab — a real interactive shell as a panel tab. Run vim, htop, tmux, anything that lives in a TTY. Powered by xterm.js + node-pty over a WebSocket bridge. Origin-allowlisted to localhost / Tailnet / Cloudflare-tunnel hosts so casual exposure is safe; do not expose to the open internet without your own auth in front. (Optional dependency — see Requirements below.)

Viewer

• Canvas Viewer — renders HTML, SVGs, Markdown, CSV, code, PDFs, audio, hex, and interactive widgets live. Auto-refreshes on file changes
• URL viewer — click any URL in chat to open it in the Viewer panel as a live iframe. Work interactively with your agent to build websites and watch them progress in the viewer.
• File browser — navigate the workspace without leaving the UI
• File editing — edit text files directly in the Viewer
• Extensible viewer registry — add custom viewers for any file type
• Navigation history — back/forward through files, URLs, and the explorer

Tool Output

• Rich tool output — tables, HTML/SVG previews, ANSI color rendering, long output collapsing. Tool cards show results inline with expand-to-Viewer
• Diff review bar — inline code review UI for agent-produced changes
• Tool call cards — collapsible cards showing tool use are inspectable but don't clutter the conversation. Selectable detail levels (brief/more/full)
• Clickable paths & URLs — file paths in tool output open in the Viewer; URLs open in the Viewer panel
• Inline media — images, YouTube embeds, and audio render directly in the conversation
• Compaction banners — visual indicator when a conversation has been compacted by the gateway

Customization

• Themeable — 9 built-in themes (Clawsome, Dracula, Monokai, Tokyo Night, GitHub, Field Notes, Solarized, Nord, Terminal) with live color pickers, custom font selection, and save-your-own. Assign separate themes to different agents
• Font picker — choose from bundled typefaces with automatic scaling in viewer iframes
• Model selector — switch models on the fly from the header bar, with drag-to-reorder priority
• Command palette — ⌘K or / for quick actions (compact, export, model switch, session commands)
• Keyboard shortcuts — clickable cheat sheet has you covered

Mobile

• Responsive layout — full mobile support with touch-friendly controls

Fundamentals

• Markdown rendering — code blocks with syntax highlighting, LaTeX math, tables, blockquotes
• Inline embeds — [embed url="..." title="..." height="480" /] (or ref="cv_<id>") renders an iframe inline in the chat. URLs under /__openclaw__/canvas/<path> are auto-routed through /api/media/~/.openclaw/canvas/<path>; http(s):// URLs pass through. Sandboxed with allow-scripts allow-same-origin allow-popups allow-forms.
• Export — conversations as Markdown or JSON
• Auto-authentication — reads the gateway token from ~/.openclaw/openclaw.json, no manual setup

Stack

• SvelteKit + Svelte 5 (runes)
• Tailwind CSS v4
• Shiki for syntax highlighting
• KaTeX for LaTeX math
• marked for Markdown parsing
• No component library — custom components throughout

Quick Start

git clone https://github.com/mode80/clawsome.git
cd clawsome
npm install
npm run dev

Open http://localhost:3000. That's it.

Requirements

• Node.js 18+
• OpenClaw running locally with the gateway accessible at localhost:18789

The client reads your gateway auth token from ~/.openclaw/openclaw.json automatically — no API keys to configure.

Terminal tab (optional): the Terminal feature uses node-pty, which ships prebuilt binaries for macOS (Intel + Apple Silicon) and Windows. On Linux it has to compile from source, which needs a C++ toolchain:

# Debian / Ubuntu
sudo apt install python3 build-essential

# Fedora / RHEL
sudo dnf install python3 gcc-c++ make

# Arch
sudo pacman -S python base-devel

This dependency is optional — if it can't build, the rest of Clawsome still installs and runs; only the Terminal tab is disabled (it logs a hint to the server console explaining how to enable it).

Optional: Run on Startup

To have Clawsome start automatically when you log in:

./scripts/install-service.sh

This installs a system service (launchd on macOS, systemd on Linux) that builds and runs Clawsome in the background. Logs go to /tmp/clawsome.out.log.

To uninstall, the script prints removal instructions when it runs.

Optional: Auto-Summarize Topics

Clawsome can automatically generate short labels for sidebar topics using your gateway's configured model. This is off by default to avoid unexpected API usage. Enable it in Settings → Auto-summarize topics.

Gateway Configuration

Clawsome connects to the OpenClaw gateway via WebSocket. The default setup works out of the box if your gateway is on localhost:18789.

For remote gateways, set environment variables:

GW_TARGET=ws://your-gateway:18789 npm run dev

Production

Build and run with the production server:

npm run build
node server.js

The production server handles both SvelteKit and WebSocket proxying to the gateway. Configure via environment variables:

Variable	Default	Description
PORT	3000	Server port
HOST	127.0.0.1	Bind address
GW_TARGET	ws://127.0.0.1:18789	Gateway WebSocket URL

Architecture

src/
├── routes/
│   ├── +layout.svelte          # App shell
│   ├── +page.svelte            # Main chat page
│   └── api/                    # Server-side API routes
│       ├── config/             # Gateway config reader
│       ├── history/            # Session history
│       ├── sessions/           # Session management
│       ├── branch/             # Conversation branching
│       ├── cost-summary/       # Cross-agent cost scanner
│       ├── media/              # Media proxy
│       ├── url-title/          # URL metadata extraction
│       └── ...
├── lib/
│   ├── components/             # Svelte components
│   ├── stores/                 # Svelte 5 rune stores
│   ├── services/               # API, markdown, tool parsing
│   └── types.ts
└── app.css                     # Design system

How It Connects

Clawsome talks to OpenClaw through two channels:

1. WebSocket (/gw) — proxied to the gateway for real-time streaming, session management, and tool events
2. Server-side API routes — SvelteKit endpoints that read gateway config and handle session operations

All API calls go through SvelteKit's server-side layer, so there are no CORS issues and the gateway token never needs to be manually configured.

Contributing

Pull requests welcome. The codebase is ~19K lines of TypeScript/Svelte with no test suite yet (PRs for tests especially welcome).

Before submitting:

• npm run check — type checking
• npm run build — verify production build

License

Business Source License 1.1 — free for all use except offering as a competing hosted service. Converts to Apache 2.0 on 2030-03-18.

---

Built for the OpenClaw community. Not affiliated with the OpenClaw project.