Luciano Castillo 72a4917941 fix(workspace): UI/UX cleanup for file editor (#51)
* fix(workspace): address PR #47 review feedback

- Use stable keys (item.label) instead of array indices in FileContextMenu
- Add clipboard feedback showing "Copied!" or "Failed" status
- Fix empty catch block in createFile to preserve error context
- Remove duplicate empty line in workspace page
- Remove unused MarkdownViewer component (replaced by FileEditor)

* refactor(workspace): streamline FileEditor layout and enhance responsiveness

- Simplified the FileEditor component by removing unused action buttons and restructuring the layout for better clarity.
- Updated styles for indicators and buttons to improve visual consistency and responsiveness across different screen sizes.
- Adjusted text sizes for better readability in various states (editing, saving, etc.) and ensured proper flex behavior for metadata display.

* style(workspace): update text sizes for indicators in FileEditor

- Increased font sizes for various indicators (Markdown, Editing, Unsaved, Saving, Saved, Save failed) to improve readability.
- Adjusted button visibility logic to only show the Save button when there are unsaved changes, enhancing user experience.

* feat(workspace): add file creation functionality in FileTree and NewFileDialog

- Introduced a button in the FileTree component to create new files within directories.
- Updated NewFileDialog to accept an optional folderPath prop, allowing file creation in specified directories.
- Enhanced WorkspacePage to manage folder paths for new file creation, improving user experience when organizing files.

* style(workspace): update file metadata display color in FileTree

- Modified the text color for file size metadata in the FileTree component to improve visual distinction based on selection state. The color now changes to a lighter shade when the file is selected, enhancing user experience and clarity.

* refactor(workspace): remove redundant editing indicator from FileEditor

- Eliminated the "Editing" mode indicator from the FileEditor component to streamline the UI. This change enhances clarity by focusing on the unsaved changes indicator, improving the overall user experience.

* style(workspace): refine flex properties and text wrapping in FileEditor

- Updated flex properties for various elements in the FileEditor component to enhance layout consistency and responsiveness.
- Improved text wrapping behavior for indicators and content areas, ensuring better readability and visual alignment across different screen sizes.

* style(workspace): update text weight in FileEditor for improved readability

- Changed font weight to 'light' for the text in the FileEditor component, enhancing visual clarity and consistency with the overall design.

* style(workspace): adjust flex properties and text sizes in FileTree

- Updated flex properties to remove redundant 'flex-shrink-0' classes, enhancing layout consistency.
- Increased font size for file metadata display to improve readability.
- Ensured consistent styling for folder and file icons, contributing to a cleaner UI.

* style(monitor): increase font sizes for improved readability across components

- Updated font sizes from 10px to 11px in various components including ActionNode, ExecNode, MobileMonitorToolbar, and others to enhance text clarity.
- Adjusted text sizes in the SettingsPanel and SessionList for consistency and better user experience.
- Ensured uniformity in font sizes across the monitor components to maintain a cohesive design.
2026-02-04 15:22:33 -05:00
2026-02-01 15:24:33 -05:00
2026-01-25 17:47:27 -05:00
2026-01-25 17:47:27 -05:00
2026-01-26 15:13:31 -05:00
2026-02-02 21:10:37 -05:00
2026-01-25 17:47:27 -05:00

🦀 Crabwalk

Real-time companion monitor for OpenClaw (Clawdbot) agents by @luccasveg.

Watch your AI agents work across WhatsApp, Telegram, Discord, and Slack in a live node graph. See thinking states, tool calls, and response chains as they happen.

Crabwalk Home

Crabwalk Monitor

Features

  • Live activity graph - ReactFlow visualization of agent sessions and action chains
  • Multi-platform - Monitor agents across all messaging platforms simultaneously
  • Real-time streaming - WebSocket connection to openclaw gateway
  • Action tracing - Expand nodes to inspect tool args and payloads
  • Session filtering - Filter by platform, search by recipient

Installation

Via OpenClaw Agent

Paste this link to your OpenClaw agent and ask it to install/update Crabwalk:

https://raw.githubusercontent.com/luccast/crabwalk/master/public/skill.md

CLI Install

VERSION=$(curl -s https://api.github.com/repos/luccast/crabwalk/releases/latest | grep '"tag_name"' | cut -d'"' -f4)
mkdir -p ~/.crabwalk ~/.local/bin
curl -sL "https://github.com/luccast/crabwalk/releases/download/${VERSION}/crabwalk-${VERSION}.tar.gz" | tar -xz -C ~/.crabwalk
cp ~/.crabwalk/bin/crabwalk ~/.local/bin/
chmod +x ~/.local/bin/crabwalk

CLI Usage

Commands

crabwalk                    # Start server (default: 0.0.0.0:3000)
crabwalk start --daemon     # Run in background
crabwalk stop               # Stop background server
crabwalk status             # Check if running
crabwalk update             # Update to latest version

Options

-p, --port <port>      Server port (default: 3000)
-H, --host <host>      Bind address (default: 0.0.0.0)
-g, --gateway <url>    Gateway WebSocket URL (default: ws://127.0.0.1:18789)
-t, --token <token>    Gateway auth token
-d, --daemon           Run in background
-v, --version          Show version

Examples

crabwalk -p 8080                           # Custom port
crabwalk -t mytoken123                     # Explicit token
crabwalk -g ws://192.168.1.50:18789        # Remote gateway
crabwalk start -d -p 8080                  # Daemon on port 8080

Auto-detection

The CLI automatically detects your gateway token from ~/.openclaw/openclaw.json - no config needed if you're running OpenClaw locally.

QR Code

On startup, Crabwalk displays a QR code you can scan to open the monitor on your phone. Requires qrencode installed (the installer adds it automatically).

docker run -d \
  -p 3000:3000 \
  -e CLAWDBOT_API_TOKEN=your-token \
  -e CLAWDBOT_URL=ws://host.docker.internal:18789 \
  -v ~/.openclaw/workspace:/root/.openclaw/workspace \
  ghcr.io/luccast/crabwalk:latest

Note: When running Crabwalk in Docker, the OpenClaw gateway typically runs on the host. Use CLAWDBOT_URL=ws://host.docker.internal:18789 so the container can connect. If you're running OpenClaw with bind: loopback and tailscale serve for secure tailnet-only access, you'll need to run the crabwalk container with host networking - replace p:3000:3000 with --network host This allows the container to reach 127.0.0.1:18789 while maintaining the security benefits of loopback-only binding.

Workspace Access

The workspace explorer needs access to your local files. By default, it looks for files at ~/.openclaw/workspace. In Docker, mount your host workspace to the same path in the container:

# Default workspace path (recommended)
docker run -d \
  -p 3000:3000 \
  -e CLAWDBOT_API_TOKEN=your-token \
  -v ~/.openclaw/workspace:/root/.openclaw/workspace \
  ghcr.io/luccast/crabwalk:latest

# Custom workspace path on host
docker run -d \
  -p 3000:3000 \
  -e CLAWDBOT_API_TOKEN=your-token \
  -v /path/to/your/workspace:/root/.openclaw/workspace \
  ghcr.io/luccast/crabwalk:latest

Or with docker-compose:

curl -O https://raw.githubusercontent.com/luccast/crabwalk/master/docker-compose.yml
CLAWDBOT_API_TOKEN=your-token docker-compose up -d

To use a custom workspace path with docker-compose, set the WORKSPACE_HOST_PATH environment variable:

WORKSPACE_HOST_PATH=/path/to/your/workspace CLAWDBOT_API_TOKEN=your-token docker-compose up -d

If gateway is bind: loopback only, you will need to edit the docker-compose.yml to add network_mode: host

From source

git clone https://github.com/luccast/crabwalk.git
cd crabwalk
npm install
CLAWDBOT_API_TOKEN=your-token npm run dev

Open http://localhost:3000/monitor

Configuration

Requires OpenClaw gateway running on the same machine.

Gateway Token

The CLI auto-detects your token from ~/.openclaw/openclaw.json (at gateway.auth.token). No manual config needed for local setups.

To find your token manually:

jq '.gateway.auth.token' ~/.openclaw/openclaw.json

Or set it explicitly:

crabwalk -t your-token
# or
export CLAWDBOT_API_TOKEN=your-token

Stack

TanStack Start, ReactFlow, Framer Motion, tRPC, TanStack DB

S
Description
No description provided
Readme MIT
5.4 MiB
Languages
TypeScript 94.4%
CSS 3.3%
Shell 2.2%
Dockerfile 0.1%