compaction: the surface — settings row, two ruled dividers, summary dialog, send gate (round 14 slice 3)

- settings: compaction.thresholdTokens row on the Agent tab (owner pick)
  in a Context group — CommitInput mirroring the graph budget row, hint
  resolved through the SAME core resolver the trigger reads; PUT rejects
  below the 32k floor with the anti-churn rationale; own section
  (compaction) in SETTINGS_SECTIONS + the settings-signal union
- view fold: one marker → two dividers — the minimal MOMENT divider at
  the marker (retrying-message register, no rule lines) and the longer
  CUT divider emitted immediately before the first kept message
  (phase-divider geometry, chip carries '· Nk tok'); both carry the full
  summary payload; full history stays visible to the user
- components/compaction-divider.tsx: the dividers + summary dialog
  (pure exported body for SSR pins, the delete-dialog pattern; Esc +
  Close dismiss, backdrop does not)
- chat.tsx: compaction-changed SSE flips the running state — composer
  canSend, onSend/doSend/doSteerOrSend, and both docks' submit + hint
  ('compacting session…') gate on it (the server's registry mutex is the
  structural gate; this is the affordance); dialog mounts beside the
  abort dialog
- pins: settings-body (4), view fold (2), divider SSR (4)

components/settings/agent-section.tsx

@@ -57,8 +57,11 @@ import { useSettingsSaved } from "@/components/settings-signal";
 import { defaultOrderLevel, populateLevel } from "@/components/thinking-default";
 import type React from "react";
 import {
+	COMPACTION_THRESHOLD_FLOOR,
 	MODEL_SLOTS,
+	resolveSettings,
 	type AgentSettings,
+	type CompactionSettings,
 	type GraphSettings,
 	type ModelCatalogEntry,
 	type ModelSlotName,
@@ -67,7 +70,7 @@ import {
 import type { ThinkingLevel } from "@earendil-works/pi-agent-core";
 import { prettyModel } from "@/components/usage-format";
 import { cn } from "@/lib/utils";
-import { SettingsGroup, SettingsRow, Toggle } from "./controls.tsx";
+import { SettingsGroup, SettingsRow, Toggle, CommitInput } from "./controls.tsx";
 import { ModelMenuList, ThinkingMenuList } from "./model-menu";
 
 /** One slot's display identity — the tier's roster as the row hint rides
@@ -289,8 +292,10 @@ export function AgentSection({
 	agent,
 	models,
 	graph,
+	compaction,
 	onSectionChange,
 	onModelsChange,
+	onCompactionChange,
 }: {
 	agent: AgentSettings | undefined;
 	/** The `models` section (slot pins — engine-level, PUT /api/settings/models). */
@@ -299,10 +304,15 @@ export function AgentSection({
 	 *  master switch (graph.enabled off dims + disables the row; the
 	 *  effective gate is server-side, per-turn fresh). */
 	graph: GraphSettings | undefined;
+	/** The `compaction` section — its own PUT (the threshold is engine
+	 *  behavior, not an agent-section key; owner round 14, Agent tab). */
+	compaction: CompactionSettings | undefined;
 	/** Writes the composed WHOLE agent section (replace-PUT discipline). */
 	onSectionChange: (next: AgentSettings) => void;
 	/** Writes the composed models section (slots — replace-PUT discipline). */
 	onModelsChange: (next: ModelsSettings) => void;
+	/** Writes the whole compaction section (replace-PUT discipline). */
+	onCompactionChange: (next: CompactionSettings) => void;
 }) {
 	const [catalog, setCatalog] = useState<ModelCatalogEntry[] | null>(null);
 	/** The three tiers' resolved pins — GET /api/models `slots`. The rows'
@@ -599,6 +609,13 @@ export function AgentSection({
 
 
 
+	// Resolved through the SAME core resolver the server's effective
+	// settings use (the GraphSection precedent): the hint and placeholder
+	// report exactly the number the trigger waits for.
+	const resolvedCompaction = resolveSettings(
+		compaction === undefined ? null : { version: 1, compaction },
+	).compaction;
+
 	return (
 		<>
 			<SettingsGroup label="Models" testid="group-models">
@@ -844,6 +861,39 @@ export function AgentSection({
 				})()}
 			</SettingsGroup>
 
+			<SettingsGroup label="Context" testid="group-context">
+				<SettingsRow
+					label="Compaction threshold"
+					hint={`${resolvedCompaction.thresholdTokens} tok`}
+					testid="compaction-row-threshold"
+				>
+					<CommitInput
+						type="number"
+						value={String(compaction?.thresholdTokens ?? "")}
+						placeholder={String(resolvedCompaction.thresholdTokens)}
+						ariaLabel="compaction threshold"
+						testid="input-compaction-threshold"
+						onCommit={(v) => {
+							// Empty = factory default (the budget row's discipline):
+							// absence is the unset for numbers.
+							if (v === "") {
+								onCompactionChange({ ...compaction, thresholdTokens: undefined });
+								return;
+							}
+							const n = Number(v);
+							if (!Number.isFinite(n) || n <= 0) return; // bad input: no write
+							// Mirror the server floor (anti-churn: each compaction
+							// keeps a ~20k-token tail); no ceiling — the effective
+							// trigger is min(threshold, contextWindow − 16k) anyway.
+							onCompactionChange({
+								...compaction,
+								thresholdTokens: Math.max(COMPACTION_THRESHOLD_FLOOR, Math.round(n)),
+							});
+						}}
+					/>
+				</SettingsRow>
+			</SettingsGroup>
+
 			<SettingsGroup label="System prompts" testid="group-prompts">
 				{prompts === null ? (
 					<p className="text-xs text-muted-foreground/70">Loading prompt segments…</p>

components/settings/settings-dialog.tsx

@@ -34,6 +34,7 @@ import {
 	CURRENT_SETTINGS_VERSION,
 	type AgentSettings,
 	type AppearanceSettings,
+	type CompactionSettings,
 	type GraphSettings,
 	type UserSettings,
 } from "@/src/core";
@@ -216,7 +217,7 @@ export function SettingsDialogBody({
 	 *  schema mistake caught by the validation surface). */
 	const write = useCallback(
 		async (
-			section: "general" | "agent" | "models" | "appearance" | "graph",
+			section: "general" | "agent" | "models" | "appearance" | "graph" | "compaction",
 			body: object,
 		) => {
 			setError(null);
@@ -379,12 +380,16 @@ export function SettingsDialogBody({
 										agent={record.agent}
 										models={record.models}
 										graph={record.graph}
+										compaction={record.compaction}
 										onModelsChange={(next: ModelsSettings) =>
 											void write("models", next)
 										}
 										onSectionChange={(next: AgentSettings) =>
 											void write("agent", next)
 										}
+										onCompactionChange={(next: CompactionSettings) =>
+											void write("compaction", next)
+										}
 									/>
 								</SettingsSection>
 							)}