Communitygithub.com

ComeOnOliver/skillshub

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.

skillshub とは?

skillshub is a Claude Code agent skill that 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.

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ComeOnOliver/skillshub/tree/HEAD/skills/LeoYeAI/openclaw-master-skills/compaction-ui-enhancements

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

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

ComponentStatus
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[].totalTokens and contextTokens from 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 backgroundJobToasts system 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

MethodDescription
sessions.compactExecute compaction (records result after completion)
compaction.getSettingsRead settings from config file
compaction.saveSettingsUpdate settings (threshold auto-clamped 10-95%)
compaction.getLastResultGet stored last compaction result
compaction.clearLastResultClear stored result

Files Modified

FilePurpose
src/gateway/server-methods/compaction.tsSettings RPCs, config I/O, result recording
src/gateway/server-methods/sessions.tssessions.compact RPC (records result after compaction)
src/gateway/server-methods/plugins-ui.tsPlugin view registration
src/gateway/server-methods.tsHandler wiring
src/gateway/server-methods-list.tsMethod registration
src/gateway/method-scopes.tsScope registration
src/agents/pi-embedded-runner/compact.tsChat summary instruction injection
ui/src/ui/app-render.helpers.tsContext gauge + background toast trigger
ui/src/ui/app-gateway.tsAuto-compaction check after final event
ui/src/ui/views/compaction-settings.tsSettings tab view
ui/src/ui/app-render.tsView wiring + import
ui/src/ui/views/chat.tsChat 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.loaded flag 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 a message field. 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 check parsed?.message entries against the skip set, and only add their IDs to it.
  • No blocking modal — ever: The gauge button in app-render.helpers.ts must NEVER render a full-screen overlay modal. Compaction is a background process; all status is communicated via the bottom-right toast system. Remove any position:fixed; inset:0 overlay conditioned on compactState.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 Summary narrative 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.compact records 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.compact RPC with LLM summarization, chat history NO_REPLY/HEARTBEAT_OK filtering, compaction divider lines

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

ComeOnOliver/skillshub

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

ComeOnOliver/skillshub

Next.js 16+ 和 Turbopack — 增量打包、文件系统缓存、开发速度,以及何时使用 Turbopack 与 webpack。

ComeOnOliver/skillshub

SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices.

ComeOnOliver/skillshub

Next.js 15 애플리케이션을 위한 프론트엔드 개발 가이드라인. React 19, TypeScript, Shadcn/ui, Tailwind CSS를 사용한 모던 패턴. Server Components, Client Components, App Router, 파일 구조, Shadcn/ui 컴포넌트, 성능 최적화, TypeScript 모범 사례 포함. 컴포넌트, 페이지, 기능 생성, 데이터 페칭, 스타일링, 라우팅, 프론트엔드 코드 작업 시 사용.

ComeOnOliver/skillshub

Provides Tamagui patterns for config v4, compiler optimization, styled context, and cross-platform styling. Must use when working with Tamagui projects (tamagui.config.ts, @tamagui imports).

ComeOnOliver/skillshub

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

ComeOnOliver/skillshub

Create high-converting, visually distinctive landing pages. Use when building marketing pages, product launches, SaaS homepages, or any single-page conversion-focused website. Guides section-by-section composition with anti-AI-slop principles.

ComeOnOliver/skillshub

Auto-loaded context for Portfolio Buddy 2 development. Use for ANY task involving: React 19 development, TypeScript, portfolio analysis features, metrics calculations, trading strategy comparison, or working with the Portfolio Buddy 2 codebase. Contains tech stack, known issues, and architectural constraints.

ComeOnOliver/skillshub

Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.

ComeOnOliver/skillshub

Implement UI using Shadcn MCP (atoms/theme) and 21st.dev MCP (complex sections). Use when adding buttons, layouts, or generating landing pages.

ComeOnOliver/skillshub

A conceptual skill for building an API client in Next.js that handles JWT tokens

ComeOnOliver/skillshub

Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project.

ComeOnOliver/skillshub

The Design System, Theme, and UX rules for the Physical AI Hub.

ComeOnOliver/skillshub

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

ComeOnOliver/skillshub

Build Next.js 16 applications with correct patterns and distinctive design. Use when creating pages, layouts, dynamic routes, upgrading from Next.js 15, or implementing proxy.ts. Covers breaking changes (async params/searchParams, Turbopack, cacheComponents) and frontend aesthetics. NOT when building non-React or backend-only applications.

ComeOnOliver/skillshub

Next.js 16+ uses App Router with Server Components by default. Client Components are only used when interactivity is needed (hooks, event handlers, browser APIs).

ComeOnOliver/skillshub

All TypeScript types are defined in `frontend/types/index.ts`. Types match backend API response structure and provide type safety across the frontend application.

ComeOnOliver/skillshub

Use when working with Next.js App Router tasks - creating pages in /app/, setting up dynamic routes ([id]/page.tsx), implementing nested layouts/templates (layout.tsx), optimizing Server/Client components, or building ERP role-based pages (admin/teacher/student dashboards). Auto-use for all /app/ directory operations, dynamic routing, and App Router-specific features.

ComeOnOliver/skillshub

Apple-inspired clean, minimal, premium UI design. Use when building modern interfaces requiring exceptional UX, clean aesthetics, or Apple-like polish. Triggers on: clean UI, modern design, Apple style, minimal, premium, user-friendly, UX.

ComeOnOliver/skillshub

Build interfaces that resonate, not just render. This skill enforces bold, intentional

関連スキル