compaction-ui-enhancements_skill

Overview

This skill adds a manual memory compaction control and context utilization gauge to the OpenClaw Control UI chat toolbar. It provides a circular progress ring that shows tokens used vs available and doubles as a click-to-compact button. Clicking triggers an LLM-based summarization compaction flow and shows an animated modal with phases and before/after token reporting. The UI also renders compaction divider lines in chat history and filters NO_REPLY/HEARTBEAT_OK assistant messages.

How this skill works

The gauge reads token counts from session rows (totalTokens and contextTokens) and colors the ring by utilization (green/yellow/red). When the user clicks the gauge it calls sessions.compact, which runs compactEmbeddedPiSession (LLM summarization), aborts any active run, updates the session store, and returns token delta info. A modal overlay animates progress through phases, shows tokens before/after, holds the "complete" state for 2s, then refreshes chat. The chat renderer filters exact assistant messages matching NO_REPLY or HEARTBEAT_OK and renders synthetic compaction divider messages when messages carry __openclaw.kind === "compaction".

When to use it

• Add a manual compaction control to the OpenClaw web dashboard.
• Upgrade an existing toolbar with a visual context utilization indicator.
• Provide operators an explicit way to trigger LLM-based summarization compaction.
• Improve chat history UX by clearly marking compaction events.
• Filter noise messages (NO_REPLY/HEARTBEAT_OK) from rendered assistant output.

Best practices

• Only enable compaction when utilization makes sense; the gauge disables below 20% and during active compaction.
• Ensure gateway config includes LLM provider/apiKey since compaction calls live models (expect 10–30s).
• Gracefully abort active agent runs before compacting to avoid data races.
• Keep the modal unobtrusive: use the 2s complete pause before refreshing the chat to avoid flicker.
• Populate session rows (totalTokens/contextTokens) after each agent turn so the gauge reflects live state.

Example use cases

• Operator sees context at 92% (red) and clicks the gauge to summarize and reduce tokens.
• Admin upgrades the toolbar to show utilization colors and prevent hitting model context limits.
• Developer debugs compaction flow: modal shows each phase and token delta after LLM summarization.
• Support team filters out HEARTBEAT_OK assistant messages to keep chat history clean.
• Audit session JSONL: compaction entries are converted into UI divider messages labeled as compaction.