Skip to content

Commit dd08a62

Browse files
ammar-agentammar-agent
committed
🤖 feat: improve auto-compact UI with draggable threshold
- Add ThresholdSlider component for draggable threshold indicator on Context Usage bar (horizontal and vertical orientations) - Dragging to 100% disables auto-compaction, dragging back enables - Remove AutoCompactionSettings component (replaced by slider) - Unify CompactionWarning styles: both states use subtle right-aligned text; at-threshold state is bold blue instead of large block - Add prependText method to ChatInputAPI for prepending text - Clicking warning text inserts /compact command - Add Storybook coverage for auto-compaction warning state _Generated with mux_
1 parent 45812f7 commit dd08a62

File tree

10 files changed

+435
-92
lines changed

10 files changed

+435
-92
lines changed

‎src/browser/App.stories.tsx‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1487,3 +1487,170 @@ These tables should render cleanly without any disruptive copy or download actio
14871487
return <AppWithTableMocks />;
14881488
},
14891489
};
1490+
1491+
/**
1492+
* Story showing the auto-compaction warning when context usage is approaching the threshold.
1493+
* The warning appears above the chat input when usage is >= 60% (threshold 70% minus 10% warning advance).
1494+
* claude-sonnet-4-5 has max_input_tokens: 200,000, so we set usage to ~130,000 tokens (65%) to trigger warning.
1495+
*/
1496+
export const AutoCompactionWarning: Story = {
1497+
render: () => {
1498+
const workspaceId = "ws-high-usage";
1499+
1500+
const projects = new Map<string, ProjectConfig>([
1501+
[
1502+
"/home/user/projects/my-app",
1503+
{
1504+
workspaces: [
1505+
{ path: "/home/user/.mux/src/my-app/feature", id: workspaceId, name: "main" },
1506+
],
1507+
},
1508+
],
1509+
]);
1510+
1511+
const workspaces: FrontendWorkspaceMetadata[] = [
1512+
{
1513+
id: workspaceId,
1514+
name: "main",
1515+
projectPath: "/home/user/projects/my-app",
1516+
projectName: "my-app",
1517+
namedWorkspacePath: "/home/user/.mux/src/my-app/feature",
1518+
runtimeConfig: DEFAULT_RUNTIME_CONFIG,
1519+
createdAt: new Date(NOW - 3600000).toISOString(),
1520+
},
1521+
];
1522+
1523+
const AppWithHighUsage: React.FC = () => {
1524+
const initialized = useRef(false);
1525+
if (!initialized.current) {
1526+
// Enable auto-compaction for this workspace
1527+
localStorage.setItem(`autoCompaction:${workspaceId}:enabled`, "true");
1528+
localStorage.setItem(`autoCompaction:${workspaceId}:threshold`, "70");
1529+
1530+
setupMockAPI({
1531+
projects,
1532+
workspaces,
1533+
apiOverrides: {
1534+
tokenizer: {
1535+
countTokens: () => Promise.resolve(100),
1536+
countTokensBatch: (_model, texts) => Promise.resolve(texts.map(() => 100)),
1537+
calculateStats: () =>
1538+
Promise.resolve({
1539+
consumers: [],
1540+
totalTokens: 0,
1541+
model: "claude-sonnet-4-5",
1542+
tokenizerName: "claude",
1543+
usageHistory: [],
1544+
}),
1545+
},
1546+
providers: {
1547+
setProviderConfig: () => Promise.resolve({ success: true, data: undefined }),
1548+
setModels: () => Promise.resolve({ success: true, data: undefined }),
1549+
getConfig: () =>
1550+
Promise.resolve(
1551+
{} as Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>
1552+
),
1553+
list: () => Promise.resolve(["anthropic"]),
1554+
},
1555+
workspace: {
1556+
create: (projectPath: string, branchName: string) =>
1557+
Promise.resolve({
1558+
success: true,
1559+
metadata: {
1560+
id: Math.random().toString(36).substring(2, 12),
1561+
name: branchName,
1562+
projectPath,
1563+
projectName: projectPath.split("/").pop() ?? "project",
1564+
namedWorkspacePath: `/mock/workspace/${branchName}`,
1565+
runtimeConfig: DEFAULT_RUNTIME_CONFIG,
1566+
},
1567+
}),
1568+
list: () => Promise.resolve(workspaces),
1569+
rename: (wsId: string) =>
1570+
Promise.resolve({ success: true, data: { newWorkspaceId: wsId } }),
1571+
remove: () => Promise.resolve({ success: true }),
1572+
fork: () => Promise.resolve({ success: false, error: "Not implemented in mock" }),
1573+
openTerminal: () => Promise.resolve(undefined),
1574+
onChat: (wsId, callback) => {
1575+
if (wsId === workspaceId) {
1576+
setTimeout(() => {
1577+
// User message
1578+
callback({
1579+
id: "msg-1",
1580+
role: "user",
1581+
parts: [{ type: "text", text: "Help me with this large codebase" }],
1582+
metadata: {
1583+
historySequence: 1,
1584+
timestamp: STABLE_TIMESTAMP - 60000,
1585+
},
1586+
});
1587+
1588+
// Assistant message with HIGH usage to trigger compaction warning
1589+
// 130,000 tokens = 65% of 200,000 max, which is above 60% warning threshold
1590+
callback({
1591+
id: "msg-2",
1592+
role: "assistant",
1593+
parts: [
1594+
{
1595+
type: "text",
1596+
text: "I've analyzed the codebase. The context window is getting full - notice the compaction warning below!",
1597+
},
1598+
],
1599+
metadata: {
1600+
historySequence: 2,
1601+
timestamp: STABLE_TIMESTAMP,
1602+
model: "claude-sonnet-4-5",
1603+
usage: {
1604+
inputTokens: 125000, // High input to trigger warning
1605+
outputTokens: 5000,
1606+
totalTokens: 130000,
1607+
},
1608+
duration: 5000,
1609+
},
1610+
});
1611+
1612+
callback({ type: "caught-up" });
1613+
}, 100);
1614+
}
1615+
return () => undefined;
1616+
},
1617+
onMetadata: () => () => undefined,
1618+
activity: {
1619+
list: () => Promise.resolve({}),
1620+
subscribe: () => () => undefined,
1621+
},
1622+
sendMessage: () => Promise.resolve({ success: true, data: undefined }),
1623+
resumeStream: () => Promise.resolve({ success: true, data: undefined }),
1624+
interruptStream: () => Promise.resolve({ success: true, data: undefined }),
1625+
clearQueue: () => Promise.resolve({ success: true, data: undefined }),
1626+
truncateHistory: () => Promise.resolve({ success: true, data: undefined }),
1627+
replaceChatHistory: () => Promise.resolve({ success: true, data: undefined }),
1628+
getInfo: () => Promise.resolve(null),
1629+
executeBash: () =>
1630+
Promise.resolve({
1631+
success: true,
1632+
data: { success: true, output: "", exitCode: 0, wall_duration_ms: 0 },
1633+
}),
1634+
},
1635+
},
1636+
});
1637+
1638+
localStorage.setItem(
1639+
"selectedWorkspace",
1640+
JSON.stringify({
1641+
workspaceId: workspaceId,
1642+
projectPath: "/home/user/projects/my-app",
1643+
projectName: "my-app",
1644+
namedWorkspacePath: "/home/user/.mux/src/my-app/feature",
1645+
})
1646+
);
1647+
1648+
initialized.current = true;
1649+
}
1650+
1651+
return <AppLoader />;
1652+
};
1653+
1654+
return <AppWithHighUsage />;
1655+
},
1656+
};

‎src/browser/components/AIView.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,11 @@ const AIViewInner: React.FC<AIViewProps> = ({
217217
chatInputAPI.current?.appendText(note);
218218
}, []);
219219

220+
// Handler for manual compaction from CompactionWarning click
221+
const handleCompactClick = useCallback(() => {
222+
chatInputAPI.current?.prependText("/compact\n");
223+
}, []);
224+
220225
// Thinking level state from context
221226
const { thinkingLevel: currentWorkspaceThinking, setThinkingLevel } = useThinking();
222227

@@ -573,6 +578,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
573578
<CompactionWarning
574579
usagePercentage={autoCompactionResult.usagePercentage}
575580
thresholdPercentage={autoCompactionResult.thresholdPercentage}
581+
onCompactClick={handleCompactClick}
576582
/>
577583
)}
578584
<ChatInput

‎src/browser/components/ChatInput/index.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,15 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
260260
[setInput]
261261
);
262262

263+
// Method to prepend text to input (used by manual compact trigger)
264+
const prependText = useCallback(
265+
(text: string) => {
266+
setInput((prev) => text + prev);
267+
focusMessageInput();
268+
},
269+
[focusMessageInput, setInput]
270+
);
271+
263272
// Method to restore images to input (used by queued message edit)
264273
const restoreImages = useCallback((images: ImagePart[]) => {
265274
const attachments: ImageAttachment[] = images.map((img, index) => ({
@@ -277,10 +286,19 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
277286
focus: focusMessageInput,
278287
restoreText,
279288
appendText,
289+
prependText,
280290
restoreImages,
281291
});
282292
}
283-
}, [props.onReady, focusMessageInput, restoreText, appendText, restoreImages, props]);
293+
}, [
294+
props.onReady,
295+
focusMessageInput,
296+
restoreText,
297+
appendText,
298+
prependText,
299+
restoreImages,
300+
props,
301+
]);
284302

285303
useEffect(() => {
286304
const handleGlobalKeyDown = (event: KeyboardEvent) => {

‎src/browser/components/ChatInput/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export interface ChatInputAPI {
66
focus: () => void;
77
restoreText: (text: string) => void;
88
appendText: (text: string) => void;
9+
prependText: (text: string) => void;
910
restoreImages: (images: ImagePart[]) => void;
1011
}
1112

‎src/browser/components/CompactionWarning.tsx‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,43 @@
11
import React from "react";
22

33
/**
4-
* Warning banner shown when context usage is approaching the compaction threshold.
4+
* Warning indicator shown when context usage is approaching the compaction threshold.
55
*
6-
* Displays progressive warnings:
7-
* - Below threshold: "Context left until Auto-Compact: X% remaining" (where X = threshold - current)
8-
* - At/above threshold: "Approaching context limit. Next message will trigger auto-compaction."
6+
* Displays as subtle right-aligned text:
7+
* - Below threshold: "Auto-Compact in X% usage" (where X = threshold - current)
8+
* - At/above threshold: Bold "Next message will Auto-Compact"
99
*
10-
* Displayed above ChatInput when:
11-
* - Token usage >= (threshold - 10%) of model's context window
12-
* - Not currently compacting (user can still send messages)
10+
* Both states are clickable to insert /compact command.
1311
*
1412
* @param usagePercentage - Current token usage as percentage (0-100)
1513
* @param thresholdPercentage - Auto-compaction trigger threshold (0-100, default 70)
14+
* @param onCompactClick - Callback when user clicks to trigger manual compaction
1615
*/
1716
export const CompactionWarning: React.FC<{
1817
usagePercentage: number;
1918
thresholdPercentage: number;
19+
onCompactClick?: () => void;
2020
}> = (props) => {
2121
// At threshold or above, next message will trigger compaction
2222
const willCompactNext = props.usagePercentage >= props.thresholdPercentage;
23+
const remaining = props.thresholdPercentage - props.usagePercentage;
2324

24-
// Urgent warning at/above threshold - prominent blue box
25-
if (willCompactNext) {
26-
return (
27-
<div className="text-plan-mode bg-plan-mode/10 mx-4 my-4 rounded-sm px-4 py-3 text-center text-xs font-medium">
28-
⚠️ Context limit reached. Next message will trigger Auto-Compaction.
29-
</div>
30-
);
31-
}
25+
const text = willCompactNext
26+
? "Next message will Auto-Compact"
27+
: `Auto-Compact in ${Math.round(remaining)}% usage`;
3228

33-
// Countdown warning below threshold - subtle grey text, right-aligned
34-
const remaining = props.thresholdPercentage - props.usagePercentage;
3529
return (
36-
<div className="text-muted mx-4 mt-2 mb-1 text-right text-[10px]">
37-
Context left until Auto-Compact: {Math.round(remaining)}%
30+
<div className="mx-4 mt-2 mb-1 text-right text-[10px]">
31+
<button
32+
type="button"
33+
onClick={props.onCompactClick}
34+
className={`cursor-pointer hover:underline ${
35+
willCompactNext ? "text-plan-mode font-semibold" : "text-muted"
36+
}`}
37+
title="Click to insert /compact command"
38+
>
39+
{text}
40+
</button>
3841
</div>
3942
);
4043
};

‎src/browser/components/RightSidebar.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { usePersistedState } from "@/browser/hooks/usePersistedState";
33
import { useWorkspaceUsage } from "@/browser/stores/WorkspaceStore";
44
import { useProviderOptions } from "@/browser/hooks/useProviderOptions";
55
import { useResizeObserver } from "@/browser/hooks/useResizeObserver";
6+
import { useAutoCompactionSettings } from "@/browser/hooks/useAutoCompactionSettings";
67
import { CostsTab } from "./RightSidebar/CostsTab";
78
import { VerticalTokenMeter } from "./RightSidebar/VerticalTokenMeter";
89
import { ReviewPanel } from "./RightSidebar/CodeReview/ReviewPanel";
@@ -127,6 +128,12 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
127128
const { options } = useProviderOptions();
128129
const use1M = options.anthropic?.use1MContext ?? false;
129130
const chatAreaSize = useResizeObserver(chatAreaRef);
131+
const {
132+
enabled: autoCompactEnabled,
133+
setEnabled: setAutoCompactEnabled,
134+
threshold: autoCompactThreshold,
135+
setThreshold: setAutoCompactThreshold,
136+
} = useAutoCompactionSettings(workspaceId);
130137

131138
const baseId = `right-sidebar-${workspaceId}`;
132139
const costsTabId = `${baseId}-tab-costs`;
@@ -184,7 +191,18 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
184191
// Single render point for VerticalTokenMeter
185192
// Shows when: (1) collapsed, OR (2) Review tab is active
186193
const showMeter = showCollapsed || selectedTab === "review";
187-
const verticalMeter = showMeter ? <VerticalTokenMeter data={verticalMeterData} /> : null;
194+
const autoCompactionProps = React.useMemo(
195+
() => ({
196+
enabled: autoCompactEnabled,
197+
threshold: autoCompactThreshold,
198+
setEnabled: setAutoCompactEnabled,
199+
setThreshold: setAutoCompactThreshold,
200+
}),
201+
[autoCompactEnabled, autoCompactThreshold, setAutoCompactEnabled, setAutoCompactThreshold]
202+
);
203+
const verticalMeter = showMeter ? (
204+
<VerticalTokenMeter data={verticalMeterData} autoCompaction={autoCompactionProps} />
205+
) : null;
188206

189207
return (
190208
<SidebarContainer

0 commit comments

Comments
 (0)