🛠️ Compaction UI
OpenClaw Control UIで、バックグラウンド
📺 まず動画で見る(YouTube)
▶ 【衝撃】最強のAIエージェント「Claude Code」の最新機能・使い方・プログラミングをAIで効率化する超実践術を解説! ↗
※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。
📜 元の英語説明(参考)
Background memory compaction with auto-trigger, chat summary paragraph, configurable threshold, model selector, settings tab, and result storage for OpenClaw Control UI.
🇯🇵 日本人クリエイター向け解説
OpenClaw Control UIで、バックグラウンド
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o compaction-ui.zip https://jpskill.com/download/4614.zip && unzip -o compaction-ui.zip && rm compaction-ui.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/4614.zip -OutFile "$d\compaction-ui.zip"; Expand-Archive "$d\compaction-ui.zip" -DestinationPath $d -Force; ri "$d\compaction-ui.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
compaction-ui.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
compaction-uiフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-17
- 取得日時
- 2026-05-18
- 同梱ファイル
- 8
💬 こう話しかけるだけ — サンプルプロンプト
- › Compaction UI を使って、最小構成のサンプルコードを示して
- › Compaction UI の主な使い方と注意点を教えて
- › Compaction UI を既存プロジェクトに組み込む方法を教えて
これをClaude Code に貼るだけで、このSkillが自動発動します。
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
[Skill 名] compaction-ui
Compaction UI v2.1.0
OpenClaw Control UI 用のメモリ圧縮システムです。バックグラウンド実行とトースト通知、設定可能なトークンしきい値での自動トリガー、圧縮出力における会話要約段落、モデルセレクター付きの専用設定タブ、および結果履歴を備えています。
ステータス: ✅ アクティブ
| コンポーネント | ステータス |
|---|---|
| コンテキストゲージボタン | ✅ 動作中 |
| バックグラウンド圧縮 (トースト) | ✅ 動作中 |
| 自動圧縮トリガー | ✅ 動作中 |
| 会話要約段落 | ✅ 動作中 |
| 設定タブ (プラグイン登録済み) | ✅ 動作中 |
| モデルセレクター | ✅ 動作中 |
| 最終結果の保存 + ビューアー | ✅ 動作中 |
| 設定の永続化と再読み込み | ✅ 動作中 |
| 認証階層 (OAuth > API > フォールバック) | ✅ 動作中 |
| チャット履歴フィルター | ✅ 動作中 |
| 完全なバックグラウンド分離 (チャット干渉なし) | ✅ 動作中 |
機能
1. コンテキストゲージボタン (app-render.helpers.ts)
チャットツールバーにある円形の SVG プログレスリングで、手動圧縮トリガーとしても機能します。
- 配置:
renderChatControls()内のセッションセレクタードロップダウンの後 - データソース:
sessionsResult.sessions[].totalTokensおよびセッション行からのcontextTokens - 色: 緑 (<60%)、黄 (60-85%)、赤 (≥85%)
- 無効: 利用率が 20% 未満の場合、またはアクティブな圧縮中
- ツールチップ: 「Context: XK / YK tokens (Z%)」と表示
2. バックグラウンド圧縮 (トースト)
クリック時 (または自動トリガー時) に、圧縮は標準の右下トーストシステムを使用してバックグラウンドで実行されます。モーダルはブロックされません。 UI は完全にインタラクティブなままです。
- 実行中のトースト: スピナー付きで「Memory Compaction」と表示
- 完了トースト: チェックマーク付きで「Compacted: XK → YK」と表示 (5秒後に自動的に消えます)
- エラーとトースト: 失敗メッセージを表示 (5秒後に自動的に消えます)
- 他のすべてのバックグラウンドプロセス (cron、知識抽出など) と一貫した
backgroundJobToastsシステムを使用します。
3. 自動圧縮
すべてのチャット応答 (final イベント) の後、UI は設定されたしきい値に対してトークン使用量をチェックします。超過した場合:
- バックグラウンド圧縮が自動的にトリガーされます
- トーストに現在の利用率とともに「Auto-Compacting (X%)」と表示されます
- 5分間のデバウンスにより、繰り返しのトリガーを防ぎます
- 圧縮が成功した後、チャットは自動的に更新されます
- 何も圧縮されなかった場合、トーストはサイレントに削除されます
4. 会話要約段落
すべての圧縮出力は、構造化された ## Goal セクションの前に ## Conversation Summary セクションで始まります。これは、3〜6文の自然言語の段落で、次のことを行います。
- 会話の全体的なトピックを説明します
- 議論の流れと主要な移行を説明します
- 会話がどのように進行したかを要約します
- 物語の概要として過去形で書かれています
実装: カスタム指示は、compact.ts を介してアップストリームの圧縮 LLM 呼び出しに挿入されます。この指示は、ユーザーが提供するカスタム指示 (/compact [instructions]) の前に付加されるため、両方が共存します。
出力例:
## Conversation Summary
The conversation began with the user requesting improvements to the compaction
system, specifically moving from a blocking modal to background toasts. Discussion
then shifted to adding a settings tab with auto-compaction controls. After
implementing and testing those features, the user noticed settings weren't
persisting across tab navigations, which led to a fix for the module-level
state cache. Finally, the user requested adding a narrative summary paragraph
to the compaction output for better context.
## Goal
...
5. 設定タブ (プラグイン登録済み)
Plugin UI アーキテクチャを介して登録された、Agent ナビゲーショングループの下にある専用の圧縮タブです。
登録: plugins-ui.ts → BUILTIN_UI_VIEWS、id: "compaction"、group: "agent"、position: 7、icon: "archive"
カード:
自動圧縮カード
- トグル: 自動圧縮の有効/無効
- しきい値スライダー: 10% から 95% (デフォルト: 60%)
- 色分け: 緑 (<60%)、黄 (60-85%)、赤 (≥85%)
モデルカード
- ドロップダウン: 圧縮用の特定のモデルを選択するか、セッションのデフォルトを使用
- プロバイダー別にグループ化され、コンテキストウィンドウサイズが表示されます
- カスタムモデルが選択された場合の警告コールアウト (API キーのリマインダー)
- フォールバック: カスタムモデルが失敗した場合、自動的にセッションのデフォルトにフォールバック
結果保存カード
- トグル: 圧縮された要約テキストをレビューのために保存するかどうかを選択
最終圧縮カード
- Before/After: 2列グリッドに大きくスタイル設定されたトークン数
- 統計: 保存されたトークン、削減率、トリガータイプ、タイムスタンプ、セッションキー
- 結果の表示: 展開可能な要約ビューアー (保存が有効な場合)
- クリア: 保存された結果をリセット
- ヒント: 保存が無効な場合、「Enable Store Results」メッセージを表示
状態管理:
- モジュールレベルの状態は、セッション内の再レンダリング全体で永続化されます
- 設定は、タブにアクセスするたびにバックエンドから再読み込みされます (2秒の陳腐化しきい値)
resetCompactionSettingsState()はテストおよびタブ切り替え用にエクスポートされます
6. 認証階層
圧縮は getApiKeyForModel を介して resolveApiKeyForProvider を使用します。これはチャットと同じ認証チェーンです。
OAuth → API Key → フォールバック
個別の設定は必要ありません。OAuth (Claude Max) が主要な認証プロファイルとして設定されている場合、圧縮はそれを自動的に使用します。カスタムモデルの選択は、この同じ認証チェーンを独立して使用します。
7. 結果の保存
有効にすると、最新の圧縮結果は {agentDir}/compaction-config.json に永続化されます。
{
"settings": {
"autoEnabled": true,
"autoThresholdPercent": 60,
"storeLastResult": true,
"compactionModel": "anthropic/claude-sonnet-4-6"
},
"lastResult": {
"timestamp": 1709283600000,
"trigger": "manual",
"tokensBefore": 50614,
"tokensAfter": 4766,
"tokensSaved": 45848,
"percentReduction": 91,
"sessionKey": "agent:main:main",
"summary": "## Conversation Summary\nThe conversation focused on...\n\n## Goal\n..."
}
}
保存が有効な場合
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Compaction UI v2.1.0
Memory compaction system for the OpenClaw Control UI — background execution with toast notifications, auto-trigger at configurable token thresholds, conversation summary paragraphs in compacted output, dedicated settings tab with model selector, and result history.
Status: ✅ Active
| Component | Status |
|---|---|
| Context Gauge Button | ✅ Working |
| Background Compaction (toast) | ✅ Working |
| Auto-Compaction Trigger | ✅ Working |
| Conversation Summary Paragraph | ✅ Working |
| Settings Tab (plugin-registered) | ✅ Working |
| Model Selector | ✅ Working |
| Last Result Storage + Viewer | ✅ Working |
| Settings Persistence & Reload | ✅ Working |
| Auth Hierarchy (OAuth > API > Fallback) | ✅ Working |
| Chat History Filters | ✅ Working |
| Full Background Isolation (no chat interference) | ✅ Working |
Features
1. Context Gauge Button (app-render.helpers.ts)
A circular SVG progress ring in the chat toolbar that doubles as the manual compact trigger.
- Placement: After session selector dropdown in
renderChatControls() - Data source:
sessionsResult.sessions[].totalTokensandcontextTokensfrom session rows - Colors: Green (<60%), Yellow (60-85%), Red (≥85%)
- Disabled: When utilization <20% or during active compaction
- Tooltip: Shows "Context: XK / YK tokens (Z%)"
2. Background Compaction (Toast)
On click (or auto-trigger), compaction runs in the background using the standard bottom-right toast system — no blocking modal. The UI remains fully interactive.
- Running toast: Shows "Memory Compaction" with spinner
- Complete toast: Shows "Compacted: XK → YK" with checkmark (auto-dismisses after 5s)
- Error toast: Shows failure message (auto-dismisses after 5s)
- Uses
backgroundJobToastssystem consistent with all other background processes (cron, knowledge extraction, etc.)
3. Auto-Compaction
After every chat response (final event), the UI checks token usage against the configured threshold. If exceeded:
- Background compaction triggers automatically
- Toast shows "Auto-Compacting (X%)" with the current utilization
- 5-minute debounce prevents repeated triggers
- Chat refreshes automatically after successful compaction
- Silent toast removal if nothing was compacted
4. Conversation Summary Paragraph
Every compaction output now begins with a ## Conversation Summary section before the structured ## Goal section. This is a 3-6 sentence natural language paragraph that:
- Describes the overall topic(s) of the conversation
- Explains the flow of discussion and key transitions
- Summarizes how the conversation progressed
- Written in past tense as a narrative overview
Implementation: Custom instructions are injected into the upstream compaction LLM call via compact.ts. The instruction is prepended to any user-provided custom instructions (from /compact [instructions]), so both coexist.
Example output:
## Conversation Summary
The conversation began with the user requesting improvements to the compaction
system, specifically moving from a blocking modal to background toasts. Discussion
then shifted to adding a settings tab with auto-compaction controls. After
implementing and testing those features, the user noticed settings weren't
persisting across tab navigations, which led to a fix for the module-level
state cache. Finally, the user requested adding a narrative summary paragraph
to the compaction output for better context.
## Goal
...
5. Settings Tab (Plugin-Registered)
A dedicated Compaction tab under the Agent navigation group, registered via the Plugin UI architecture.
Registration: plugins-ui.ts → BUILTIN_UI_VIEWS with id: "compaction", group: "agent", position: 7, icon: "archive"
Cards:
Auto-Compaction Card
- Toggle: Enable/disable automatic compaction
- Threshold slider: 10% to 95% (default: 60%)
- Color-coded: Green (<60%), Yellow (60-85%), Red (≥85%)
Model Card
- Dropdown: Select a specific model for compaction or use session default
- Grouped by provider with context window sizes shown
- Warning callout when custom model selected (API key reminder)
- Fallback: If custom model fails, automatically falls back to session default
Result Storage Card
- Toggle: Opt-in to save the compacted summary text for review
Last Compaction Card
- Before/After: Large styled token counts in a 2-column grid
- Stats: Tokens saved, percent reduction, trigger type, timestamp, session key
- View Results: Expandable summary viewer (when storage is enabled)
- Clear: Reset stored result
- Hint: Shows "Enable Store Results" message when storage is off
State Management:
- Module-level state persists across re-renders within a session
- Settings reload from backend every time the tab is visited (2-second staleness threshold)
resetCompactionSettingsState()exported for tests and tab switches
6. Auth Hierarchy
Compaction uses resolveApiKeyForProvider via getApiKeyForModel — the same auth chain as chat:
OAuth → API Key → Fallback
No separate configuration needed. If OAuth (Claude Max) is configured as the primary auth profile, compaction uses it automatically. Custom model selection uses this same auth chain independently.
7. Result Storage
When enabled, the most recent compaction result is persisted to {agentDir}/compaction-config.json:
{
"settings": {
"autoEnabled": true,
"autoThresholdPercent": 60,
"storeLastResult": true,
"compactionModel": "anthropic/claude-sonnet-4-6"
},
"lastResult": {
"timestamp": 1709283600000,
"trigger": "manual",
"tokensBefore": 50614,
"tokensAfter": 4766,
"tokensSaved": 45848,
"percentReduction": 91,
"sessionKey": "agent:main:main",
"summary": "## Conversation Summary\nThe conversation focused on...\n\n## Goal\n..."
}
}
When storage is disabled, metadata (timestamps, token counts) is still saved but the summary text is omitted.
8. Chat History Filters
- NO_REPLY/HEARTBEAT_OK filtering: Skips assistant messages with these exact texts
- Compaction divider: Renders labeled divider line for
__openclaw.kind === "compaction"messages
Architecture
Backend RPCs
| Method | Description |
|---|---|
sessions.compact |
Execute compaction (records result after completion) |
compaction.getSettings |
Read settings from config file |
compaction.saveSettings |
Update settings (threshold auto-clamped 10-95%) |
compaction.getLastResult |
Get stored last compaction result |
compaction.clearLastResult |
Clear stored result |
Files Modified
| File | Purpose |
|---|---|
src/gateway/server-methods/compaction.ts |
Settings RPCs, config I/O, result recording |
src/gateway/server-methods/sessions.ts |
sessions.compact RPC (records result after compaction) |
src/gateway/server-methods/plugins-ui.ts |
Plugin view registration |
src/gateway/server-methods.ts |
Handler wiring |
src/gateway/server-methods-list.ts |
Method registration |
src/gateway/method-scopes.ts |
Scope registration |
src/agents/pi-embedded-runner/compact.ts |
Chat summary instruction injection |
ui/src/ui/app-render.helpers.ts |
Context gauge + background toast trigger |
ui/src/ui/app-gateway.ts |
Auto-compaction check after final event |
ui/src/ui/views/compaction-settings.ts |
Settings tab view |
ui/src/ui/app-render.ts |
View wiring + import |
ui/src/ui/views/chat.ts |
Chat history filters |
Config File
{agentDir}/compaction-config.json — per-agent, created on first settings save.
Plugin Registration
The compaction tab is registered as a builtin plugin view in plugins-ui.ts:
{
id: "compaction",
label: "Compaction",
subtitle: "Memory Management",
icon: "archive",
group: "agent",
position: 7,
pluginId: "compaction-ui",
}
Known Gotchas
- Settings not persisting across tab visits: Fixed in v2.1.0. The module-level
_state.loadedflag was preventing reloads. Now reloads every 2 seconds when re-entering the tab. - Model selector requires API keys: If you select a custom model, make sure the provider's API key is configured. The UI shows a warning callout.
- Compaction model format: Must be
"provider/model"format (e.g."anthropic/claude-sonnet-4-6"). Invalid formats are silently ignored and fall back to session default. - parentId skip-set propagation must be message-only: When filtering memory flush messages from
readSessionMessages, the skip set must ONLY propagate through entries with amessagefield. Non-message protocol entries (type:"custom") bridge between logical turns — if their IDs enter the skip set, the entire remaining conversation gets hidden. The fix: only checkparsed?.messageentries against the skip set, and only add their IDs to it. - No blocking modal — ever: The gauge button in
app-render.helpers.tsmust NEVER render a full-screen overlay modal. Compaction is a background process; all status is communicated via the bottom-right toast system. Remove anyposition:fixed; inset:0overlay conditioned oncompactState.phase. The button may show a spinner icon while running, but must not block the UI.
Changelog
v2.1.0
- Conversation summary paragraph: Compaction output now starts with a
## Conversation Summarynarrative paragraph before structured sections - Model selector: Choose a specific model for compaction or use session default, with provider-grouped dropdown
- Settings reload fix: Tab now reloads settings from backend every 2s instead of caching forever
- Reference files updated: Synced
references/with current source
v2.0.0
- Background compaction: Replaced blocking full-screen modal with background job toast
- Auto-compaction: Triggers after chat response when token usage exceeds threshold (configurable, default 60%, 5-minute debounce)
- Settings tab: Plugin-registered Compaction tab under Agent nav group
- Result recording:
sessions.compactrecords before/after token counts and optional summary - Auth hierarchy: Same OAuth → API → Fallback chain as chat
- Settings RPCs:
compaction.getSettings,compaction.saveSettings,compaction.getLastResult,compaction.clearLastResult
v1.0.0
- Initial release: Context gauge button, blocking modal with animated phases,
sessions.compactRPC with LLM summarization, chat history NO_REPLY/HEARTBEAT_OK filtering, compaction divider lines
同梱ファイル
※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。
- 📄 SKILL.md (10,953 bytes)
- 📎 references/auto-compaction.ts (3,276 bytes)
- 📎 references/chat-filters.diff.md (742 bytes)
- 📎 references/compact-summary-injection.ts (1,012 bytes)
- 📎 references/compaction-rpc.ts (5,851 bytes)
- 📎 references/compaction-settings-view.ts (15,587 bytes)
- 📎 references/context-gauge-ui.diff.md (7,775 bytes)
- 📎 references/sessions-compact-rpc.diff.md (5,499 bytes)