@danypops/pi-jittor 0.4.0 → 0.5.0

package/extension/src/observability/cache-economics-view.ts

@@ -13,7 +13,7 @@ export interface CacheEconomicsPanelTheme {
 	bold(text: string): string;
 }
 
-type CacheEconomicsPanelAction = "refresh" | "close";
+export type CacheEconomicsPanelAction = "refresh" | "close";
 
 const hostTextMeasure: TextMeasure = { visibleWidth, truncateToWidth };
 
@@ -88,25 +88,47 @@ export function renderCacheEconomicsView(summary: CacheEconomicsSummary): string
 	return lines;
 }
 
+/** Shared by both notify/panel entry points below and the unified /jittor shell, so all three fetch identically. */
+export async function fetchCacheEconomicsSummary(
+	client: CacheEconomicsPanelClient,
+	windowMs: number,
+	now: () => number = Date.now,
+): Promise<CacheEconomicsSummary> {
+	const until = now();
+	const since = Math.max(0, until - windowMs);
+	return (await client.call("cache.economics", { since, until })) as CacheEconomicsSummary;
+}
+
 export async function showCacheEconomicsView(
 	ctx: ExtensionCommandContext,
 	client: CacheEconomicsPanelClient,
 	windowMs: number,
 	now: () => number = Date.now,
 ): Promise<void> {
-	const until = now();
-	const since = Math.max(0, until - windowMs);
-	const summary = (await client.call("cache.economics", { since, until })) as CacheEconomicsSummary;
+	const summary = await fetchCacheEconomicsSummary(client, windowMs, now);
 	ctx.ui.notify(renderCacheEconomicsView(summary).join("\n"), "info");
 }
 
-/** The same content as renderCacheEconomicsView, wrapped in a titled, bordered, scrollable frame -- mirrors optimization/model-selection-panel.ts's renderBenchmarkView/BorderedSelectPanel pattern. */
-export function renderCacheEconomicsPanel(summary: CacheEconomicsSummary, width: number, theme: CacheEconomicsPanelTheme): string[] {
-	const safeWidth = Math.max(1, width);
+/**
+ * The Cache panel's real chrome plus its own r/Esc key handling, wired to `onAction` rather than a
+ * `done` callback directly -- reusable by renderCacheEconomicsPanel/showCacheEconomicsPanel below
+ * and the unified /jittor shell. Defaults to a full-chrome standalone panel (`framed: true`); pass
+ * `framed: false` when nesting this as one tab's content inside another framed container.
+ */
+export function createCacheEconomicsPanel(
+	summary: CacheEconomicsSummary,
+	theme: CacheEconomicsPanelTheme,
+	onAction: (action: CacheEconomicsPanelAction) => void,
+	framed = true,
+): BorderedSelectPanel {
 	const lines = renderCacheEconomicsView(summary);
 	const content = {
 		invalidate: () => {},
 		render: (availableWidth: number): string[] => lines.map((line) => truncateToWidth(line, availableWidth, "…")),
+		handleInput(data: string): void {
+			if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) onAction("close");
+			else if (data === "r") onAction("refresh");
+		},
 	};
 	return new BorderedSelectPanel({
 		title: "Jittor Cache Economics",
@@ -118,7 +140,13 @@ export function renderCacheEconomicsPanel(summary: CacheEconomicsSummary, width:
 			help: (text) => theme.fg("dim", text),
 		},
 		measure: hostTextMeasure,
-	}).render(safeWidth);
+		framed,
+	});
+}
+
+/** The same content as renderCacheEconomicsView, wrapped in a titled, bordered, scrollable frame -- mirrors optimization/model-selection-panel.ts's renderBenchmarkView/BorderedSelectPanel pattern. */
+export function renderCacheEconomicsPanel(summary: CacheEconomicsSummary, width: number, theme: CacheEconomicsPanelTheme): string[] {
+	return createCacheEconomicsPanel(summary, theme, () => undefined).render(Math.max(1, width));
 }
 
 /**
@@ -133,23 +161,19 @@ export async function showCacheEconomicsPanel(
 	now: () => number = Date.now,
 ): Promise<void> {
 	for (;;) {
-		const until = now();
-		const since = Math.max(0, until - windowMs);
-		const summary = (await client.call("cache.economics", { since, until })) as CacheEconomicsSummary;
+		const summary = await fetchCacheEconomicsSummary(client, windowMs, now);
 		if (ctx.mode !== "tui") {
 			ctx.ui.notify(renderCacheEconomicsView(summary).join("\n"), "info");
 			return;
 		}
-		const action = await ctx.ui.custom<CacheEconomicsPanelAction>((_tui, theme, _keybindings, done) => ({
-			invalidate() {},
-			render(width: number): string[] {
-				return renderCacheEconomicsPanel(summary, width, theme);
-			},
-			handleInput(data: string): void {
-				if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) done("close");
-				else if (data === "r") done("refresh");
-			},
-		}));
+		const action = await ctx.ui.custom<CacheEconomicsPanelAction>((_tui, theme, _keybindings, done) => {
+			const panel = createCacheEconomicsPanel(summary, theme, done);
+			return {
+				invalidate: () => panel.invalidate(),
+				render: (width: number) => panel.render(width),
+				handleInput: (data: string) => panel.handleInput(data),
+			};
+		});
 		if (!action || action === "close") return;
 	}
 }

package/extension/src/observability/status.ts

@@ -9,8 +9,10 @@ import {
 	TELEMETRY_STALE_AFTER_MS,
 } from "@danypops/jittor";
 import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
-import { matchesKey, truncateToWidth } from "@earendil-works/pi-tui";
+import { matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { BorderedSelectPanel, type TextMeasure } from "malevich-tui-components";
 import { sessionSecretField } from "../session-identity.ts";
+import { showConfirmDialog, showRouteOverrideMenu } from "../tui-prompts.ts";
 import type { ProviderBudget } from "./footer.ts";
 
 export interface JittorPanelClient {
@@ -32,7 +34,14 @@ export function providerBudgetMetricQuery(status: RouterStatus): MetricQuery | n
 	}
 }
 
-type PanelAction = "pause" | "resume" | "refresh" | "override" | "clear-override" | "close";
+export type PanelAction = "pause" | "resume" | "refresh" | "override" | "clear-override" | "close";
+
+export interface StatusPanelTheme {
+	fg(color: string, text: string): string;
+	bold(text: string): string;
+}
+
+const hostTextMeasure: TextMeasure = { visibleWidth, truncateToWidth };
 
 function latest(
 	rows: StoredMetricObservation[],
@@ -326,10 +335,13 @@ export function buildStatusView(status: RouterStatus, metrics: StoredMetricObser
 	return lines;
 }
 
-async function snapshot(
-	client: JittorPanelClient,
-	sessionId: string,
-): Promise<{ status: RouterStatus; metrics: StoredMetricObservation[] }> {
+export interface StatusPanelSnapshot {
+	status: RouterStatus;
+	metrics: StoredMetricObservation[];
+}
+
+/** Shared by the standalone status panel below and the unified /jittor shell, so both fetch identically. */
+export async function fetchStatusSnapshot(client: JittorPanelClient, sessionId: string): Promise<StatusPanelSnapshot> {
 	const status = (await client.call("router.status", { session_id: sessionId })) as RouterStatus;
 	const query = providerBudgetMetricQuery(status);
 	const metrics = query ? ((await client.call("metrics.query", query)) as StoredMetricObservation[]) : [];
@@ -341,74 +353,113 @@ async function chooseOverride(ctx: ExtensionCommandContext, routes: Route[]): Pr
 		ctx.ui.notify("Pi reports no authenticated routes for the current provider.", "warning");
 		return undefined;
 	}
-	const labels = routes.map(routeText);
-	const selected = await ctx.ui.select("Override route", labels);
-	const index = selected ? labels.indexOf(selected) : -1;
-	return index >= 0 ? routes[index] : undefined;
+	return showRouteOverrideMenu(ctx, routes, routeText);
+}
+
+/**
+ * The Status panel's real chrome (a BorderedSelectPanel, replacing the hand-rolled border lines
+ * this used to draw directly) plus its own r/p/o/c/Esc key handling, wired to `onAction` rather
+ * than a `done` callback directly -- reusable by the standalone panel below and the unified
+ * /jittor shell. Defaults to a full-chrome standalone panel (`framed: true`); pass `framed: false`
+ * when nesting this as one tab's content inside another framed container.
+ */
+export function createStatusPanel(
+	current: StatusPanelSnapshot,
+	theme: StatusPanelTheme,
+	onAction: (action: PanelAction) => void,
+	framed = true,
+): BorderedSelectPanel {
+	const controls = current.status.paused
+		? "r refresh · p release emergency halt · o override · c clear override · Esc close"
+		: "r refresh · p emergency halt · o override · c clear override · Esc close";
+	const content = {
+		invalidate: () => {},
+		render: (width: number): string[] =>
+			buildStatusView(current.status, current.metrics).map((line) => truncateToWidth(` ${line}`, width, "…")),
+		handleInput(data: string): void {
+			if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) onAction("close");
+			else if (data === "r") onAction("refresh");
+			else if (data === "p") onAction(current.status.paused ? "resume" : "pause");
+			else if (data === "o") onAction("override");
+			else if (data === "c") onAction("clear-override");
+		},
+	};
+	return new BorderedSelectPanel({
+		title: "Jittor",
+		list: content,
+		helpText: controls,
+		theme: {
+			border: (text) => theme.fg("borderMuted", text),
+			title: theme.bold,
+			help: (text) => theme.fg("dim", text),
+		},
+		measure: hostTextMeasure,
+		framed,
+	});
+}
+
+/**
+ * Performs the real side effect for one resolved status action -- confirmations and daemon calls.
+ * A no-op for "close" and "refresh" is handled by the caller (refresh is a plain re-poll with no
+ * confirmation). Shared by the standalone status panel below and the unified /jittor shell.
+ */
+export async function runStatusAction(
+	ctx: ExtensionCommandContext,
+	client: JittorPanelClient,
+	action: PanelAction,
+	current: StatusPanelSnapshot,
+	sessionId: string,
+): Promise<void> {
+	if (action === "close") return;
+	if (action === "refresh") {
+		await client.call("telemetry.poll", {});
+		return;
+	}
+	if (action === "pause" || action === "resume") {
+		if (
+			await showConfirmDialog(
+				ctx,
+				action === "pause" ? "Emergency-halt provider requests?" : "Release emergency halt?",
+				"This changes provider-request enforcement. Use /jittor off to disable blocking entirely.",
+			)
+		) {
+			await client.call(action === "pause" ? "router.pause" : "router.resume", { session_id: sessionId, ...sessionSecretField(sessionId) });
+		}
+		return;
+	}
+	if (action === "clear-override") {
+		if (await showConfirmDialog(ctx, "Clear route override?", "Policy-controlled routing will resume."))
+			await client.call("router.clear_override", { session_id: sessionId, ...sessionSecretField(sessionId) });
+		return;
+	}
+	const route = await chooseOverride(ctx, current.status.availableRoutes);
+	if (route && (await showConfirmDialog(ctx, "Apply route override?", `${routeText(route)} for one hour`))) {
+		await client.call("router.override", {
+			route,
+			expiresAt: Date.now() + 60 * 60 * 1_000,
+			session_id: sessionId,
+			...sessionSecretField(sessionId),
+		});
+	}
 }
 
 export async function showJittorPanel(ctx: ExtensionCommandContext, client: JittorPanelClient): Promise<void> {
 	const session_id = ctx.sessionManager.getSessionId();
 	for (;;) {
-		const current = await snapshot(client, session_id);
+		const current = await fetchStatusSnapshot(client, session_id);
 		if (ctx.mode !== "tui") {
 			ctx.ui.notify(buildStatusView(current.status, current.metrics).join("\n"), "info");
 			return;
 		}
-		const action = await ctx.ui.custom<PanelAction>((_tui, theme, _keybindings, done) => ({
-			invalidate() {},
-			render(width: number): string[] {
-				const border = theme.fg("borderMuted", "─".repeat(Math.max(1, width)));
-				const controls = current.status.paused
-					? "r refresh · p release emergency halt · o override · c clear override · Esc close"
-					: "r refresh · p emergency halt · o override · c clear override · Esc close";
-				return [
-					border,
-					truncateToWidth(theme.bold("Jittor"), width, ""),
-					border,
-					...buildStatusView(current.status, current.metrics).map((line) => truncateToWidth(` ${line}`, width, "…")),
-					border,
-					truncateToWidth(theme.fg("dim", controls), width, "…"),
-					border,
-				];
-			},
-			handleInput(data: string): void {
-				if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) done("close");
-				else if (data === "r") done("refresh");
-				else if (data === "p") done(current.status.paused ? "resume" : "pause");
-				else if (data === "o") done("override");
-				else if (data === "c") done("clear-override");
-			},
-		}));
+		const action = await ctx.ui.custom<PanelAction>((_tui, theme, _keybindings, done) => {
+			const panel = createStatusPanel(current, theme, done);
+			return {
+				invalidate: () => panel.invalidate(),
+				render: (width: number) => panel.render(width),
+				handleInput: (data: string) => panel.handleInput(data),
+			};
+		});
 		if (!action || action === "close") return;
-		if (action === "refresh") {
-			await client.call("telemetry.poll", {});
-			continue;
-		}
-		if (action === "pause" || action === "resume") {
-			if (
-				await ctx.ui.confirm(
-					action === "pause" ? "Emergency-halt provider requests?" : "Release emergency halt?",
-					"This changes provider-request enforcement. Use /jittor off to disable blocking entirely.",
-				)
-			) {
-				await client.call(action === "pause" ? "router.pause" : "router.resume", { session_id, ...sessionSecretField(session_id) });
-			}
-			continue;
-		}
-		if (action === "clear-override") {
-			if (await ctx.ui.confirm("Clear route override?", "Policy-controlled routing will resume."))
-				await client.call("router.clear_override", { session_id, ...sessionSecretField(session_id) });
-			continue;
-		}
-		const route = await chooseOverride(ctx, current.status.availableRoutes);
-		if (route && (await ctx.ui.confirm("Apply route override?", `${routeText(route)} for one hour`))) {
-			await client.call("router.override", {
-				route,
-				expiresAt: Date.now() + 60 * 60 * 1_000,
-				session_id,
-				...sessionSecretField(session_id),
-			});
-		}
+		await runStatusAction(ctx, client, action, current, session_id);
 	}
 }

package/extension/src/optimization/model-selection-panel.ts

@@ -27,7 +27,7 @@ interface BenchmarkTheme {
 	bold(text: string): string;
 }
 
-type BenchmarkPanelAction = "refresh" | "close";
+export type BenchmarkPanelAction = "refresh" | "close";
 
 const COMPONENT_LABELS: Record<UtilityComponentName, string> = { quality: "Q", cost: "$", latency: "L", context: "C", reliability: "R" };
 
@@ -58,8 +58,19 @@ function benchmarkRows(shown: RankedModel[], currentIdentity: string): Record<st
 	});
 }
 
-export function renderBenchmarkView(result: ModelRankingResult, currentIdentity: string, width: number, theme: BenchmarkTheme): string[] {
-	const safeWidth = Math.max(1, width);
+/**
+ * The Benchmarks panel's real chrome plus its own r/Esc key handling, wired to `onAction` rather
+ * than a `done` callback directly -- reusable by renderBenchmarkView/showBenchmarkPanel below and
+ * the unified /jittor shell. Defaults to a full-chrome standalone panel (`framed: true`); pass
+ * `framed: false` when nesting this as one tab's content inside another framed container.
+ */
+export function createBenchmarkPanel(
+	result: ModelRankingResult,
+	currentIdentity: string,
+	theme: BenchmarkTheme,
+	onAction: (action: BenchmarkPanelAction) => void,
+	framed = true,
+): BorderedSelectPanel {
 	const shown = result.ranked.slice(0, BENCHMARK_TUI_MAX_CANDIDATES);
 	const currentIndex = result.ranked.findIndex((item) => item.identity.startsWith(`${currentIdentity}:`));
 	const recommended = result.ranked[0];
@@ -96,6 +107,10 @@ export function renderBenchmarkView(result: ModelRankingResult, currentIdentity:
 				: []),
 			...(result.scopeWarning ? [truncateToWidth(result.scopeWarning, availableWidth, "…")] : []),
 		],
+		handleInput(data: string): void {
+			if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) onAction("close");
+			else if (data === "r") onAction("refresh");
+		},
 	};
 	return new BorderedSelectPanel({
 		title: "Jittor Benchmark Recommendations",
@@ -107,7 +122,40 @@ export function renderBenchmarkView(result: ModelRankingResult, currentIdentity:
 			help: (text) => theme.fg("dim", text),
 		},
 		measure: hostTextMeasure,
-	}).render(safeWidth);
+		framed,
+	});
+}
+
+export function renderBenchmarkView(result: ModelRankingResult, currentIdentity: string, width: number, theme: BenchmarkTheme): string[] {
+	return createBenchmarkPanel(result, currentIdentity, theme, () => undefined).render(Math.max(1, width));
+}
+
+/** Shared by the standalone benchmark panel below and the unified /jittor shell, so both fetch identically. */
+export async function fetchBenchmarkRanking(
+	ctx: ExtensionCommandContext,
+	client: BenchmarkPanelClient,
+	candidates: ModelCandidate[],
+	domain: ModelTaskDomain,
+	type: ModelTaskType,
+): Promise<ModelRankingResult> {
+	const session_id = ctx.sessionManager.getSessionId();
+	return (await client.call("models.rank", {
+		candidates,
+		session_id,
+		...sessionSecretField(session_id),
+		scopeAuthority: "available-models",
+		domain,
+		type,
+		budgetPressure: 0,
+		weights: {
+			quality: MODEL_RANKING_DEFAULT_QUALITY_WEIGHT,
+			cost: MODEL_RANKING_DEFAULT_COST_WEIGHT,
+			latency: MODEL_RANKING_DEFAULT_LATENCY_WEIGHT,
+			context: MODEL_RANKING_DEFAULT_CONTEXT_WEIGHT,
+			reliability: MODEL_RANKING_DEFAULT_RELIABILITY_WEIGHT,
+		},
+		sourceIds: ["openrouter-models", "lmarena-hf", "artificial-analysis-direct", "openrouter-design-arena"],
+	})) as ModelRankingResult;
 }
 
 export async function showBenchmarkPanel(
@@ -119,24 +167,7 @@ export async function showBenchmarkPanel(
 	type: ModelTaskType,
 ): Promise<void> {
 	for (;;) {
-		const session_id = ctx.sessionManager.getSessionId();
-		const result = (await client.call("models.rank", {
-			candidates,
-			session_id,
-			...sessionSecretField(session_id),
-			scopeAuthority: "available-models",
-			domain,
-			type,
-			budgetPressure: 0,
-			weights: {
-				quality: MODEL_RANKING_DEFAULT_QUALITY_WEIGHT,
-				cost: MODEL_RANKING_DEFAULT_COST_WEIGHT,
-				latency: MODEL_RANKING_DEFAULT_LATENCY_WEIGHT,
-				context: MODEL_RANKING_DEFAULT_CONTEXT_WEIGHT,
-				reliability: MODEL_RANKING_DEFAULT_RELIABILITY_WEIGHT,
-			},
-			sourceIds: ["openrouter-models", "lmarena-hf", "artificial-analysis-direct", "openrouter-design-arena"],
-		})) as ModelRankingResult;
+		const result = await fetchBenchmarkRanking(ctx, client, candidates, domain, type);
 		if (ctx.mode !== "tui") {
 			ctx.ui.notify(
 				renderBenchmarkView(result, currentIdentity, 100, { fg: (_color, text) => text, bold: (text) => text }).join("\n"),
@@ -144,16 +175,14 @@ export async function showBenchmarkPanel(
 			);
 			return;
 		}
-		const action = await ctx.ui.custom<BenchmarkPanelAction>((_tui, theme, _keybindings, done) => ({
-			invalidate() {},
-			render(width: number): string[] {
-				return renderBenchmarkView(result, currentIdentity, width, theme);
-			},
-			handleInput(data: string): void {
-				if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) done("close");
-				else if (data === "r") done("refresh");
-			},
-		}));
+		const action = await ctx.ui.custom<BenchmarkPanelAction>((_tui, theme, _keybindings, done) => {
+			const panel = createBenchmarkPanel(result, currentIdentity, theme, done);
+			return {
+				invalidate: () => panel.invalidate(),
+				render: (width: number) => panel.render(width),
+				handleInput: (data: string) => panel.handleInput(data),
+			};
+		});
 		if (!action || action === "close") return;
 		await client.call("benchmark.refresh", { force: true });
 	}

package/extension/src/settings-tui.ts

@@ -3,6 +3,7 @@ import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import { matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { BorderedSelectPanel, Menu, type MenuTheme, type TextMeasure } from "malevich-tui-components";
 import type { CodexRecoveryControl, EnforcementControl, UsageBudgetControl } from "./settings.ts";
+import { showConfirmDialog } from "./tui-prompts.ts";
 
 export interface SettingsSnapshot {
 	enforcementEnabled: boolean;
@@ -16,8 +17,8 @@ interface SettingsTheme {
 	bold(text: string): string;
 }
 
-type SettingsKey = "enforcement" | "footer" | "recovery" | `budget-${UsagePeriod}`;
-type SettingsAction = { kind: "activate"; key: SettingsKey } | { kind: "close" };
+export type SettingsKey = "enforcement" | "footer" | "recovery" | `budget-${UsagePeriod}`;
+export type SettingsAction = { kind: "activate"; key: SettingsKey } | { kind: "close" };
 
 export interface SettingsEffects {
 	setEnforcement(enabled: boolean): void | Promise<void>;
@@ -25,7 +26,21 @@ export interface SettingsEffects {
 	setRecovery(enabled: boolean): void | Promise<void>;
 }
 
-const SETTINGS_KEYS: SettingsKey[] = ["enforcement", "footer", "recovery", ...USAGE_PERIODS.map(({ id }) => `budget-${id}` as const)];
+// Enforcement -> Budget -> Providers -> UI: safety posture (the global kill-switch everything
+// else is downstream of) leads, followed by spend limits, then provider-specific quirks (today,
+// only Codex recovery -- grouped under its own header instead of sitting flat next to global
+// switches, which read as "too Codex-oriented" with nothing to signal its narrower scope), then
+// display preferences last.
+const SETTINGS_KEYS: SettingsKey[] = ["enforcement", ...USAGE_PERIODS.map(({ id }) => `budget-${id}` as const), "recovery", "footer"];
+
+type SettingsCategory = "Enforcement" | "Budget" | "Providers" | "UI";
+
+function categoryOf(key: SettingsKey): SettingsCategory {
+	if (key === "enforcement") return "Enforcement";
+	if (key === "recovery") return "Providers";
+	if (key === "footer") return "UI";
+	return "Budget";
+}
 
 function state(enabled: boolean, theme: SettingsTheme): string {
 	return enabled ? theme.fg("success", "ON") : theme.fg("muted", "OFF");
@@ -69,11 +84,54 @@ function menuTheme(theme: SettingsTheme): MenuTheme {
 	};
 }
 
-function createSettingsPanel(
+/**
+ * Wraps `menu` (already built over `SETTINGS_KEYS` in order, with no `title` of its own) so its
+ * rendered output gets a non-selectable category header line inserted before each contiguous run
+ * of same-category rows. `Menu` has no native header/divider item type, and keeps its selected
+ * index private with no getter, so headers are inserted into the *rendered lines*, never built as
+ * extra selectable items -- `menu`'s own input handling, selection state, and every existing
+ * keybinding stay completely untouched; this only changes what gets displayed.
+ *
+ * With no `title` set, `Menu.render` always returns exactly `[rule, ...itemLines, rule]` (see
+ * malevich-tui-components' Menu/renderFramedPanel). If that ever stops holding -- a future
+ * malevich release changing Menu's own frame shape -- this falls back to Menu's unmodified
+ * output rather than slicing the wrong lines into a garbled view.
+ */
+function groupedSettingsMenu(
+	menu: Menu,
+	theme: SettingsTheme,
+): { invalidate(): void; handleInput(data: string): void; render(width: number): string[] } {
+	return {
+		invalidate: () => menu.invalidate(),
+		handleInput: (data: string) => menu.handleInput(data),
+		render(width: number): string[] {
+			const rendered = menu.render(width);
+			if (rendered.length !== SETTINGS_KEYS.length + 2) return rendered;
+			const itemLines = rendered.slice(1, 1 + SETTINGS_KEYS.length);
+			const out: string[] = [rendered[0]!];
+			let lastCategory: SettingsCategory | undefined;
+			for (const [index, key] of SETTINGS_KEYS.entries()) {
+				const category = categoryOf(key);
+				if (category !== lastCategory) {
+					if (lastCategory !== undefined) out.push("");
+					out.push(theme.bold(theme.fg("dim", category)));
+					lastCategory = category;
+				}
+				out.push(itemLines[index]!);
+			}
+			out.push(rendered.at(-1)!);
+			return out;
+		},
+	};
+}
+
+/** Defaults to a full-chrome standalone panel (`framed: true`); pass `framed: false` when nesting this as one tab's content inside another framed container (e.g. the unified /jittor shell's own outer border). */
+export function createSettingsPanel(
 	snapshot: SettingsSnapshot,
 	theme: SettingsTheme,
 	onAction: (action: SettingsAction) => void,
 	selected = 0,
+	framed = true,
 ): BorderedSelectPanel {
 	const menu = new Menu({
 		items: SETTINGS_KEYS.map((key) => ({ label: rowText(key, snapshot, theme), action: () => onAction({ kind: "activate", key }) })),
@@ -91,7 +149,7 @@ function createSettingsPanel(
 	for (let index = 0; index < selected; index += 1) menu.handleInput("\x1b[B");
 	return new BorderedSelectPanel({
 		title: "Jittor Settings",
-		list: menu,
+		list: groupedSettingsMenu(menu, theme),
 		helpText: "Token budgets are user values; provider quotas remain separate. · ↑/↓ select · Enter edit · Esc close",
 		theme: {
 			border: (text) => theme.fg("borderMuted", text),
@@ -99,6 +157,7 @@ function createSettingsPanel(
 			help: (text) => theme.fg("dim", text),
 		},
 		measure: hostTextMeasure,
+		framed,
 	});
 }
 
@@ -130,6 +189,53 @@ async function editBudget(ctx: ExtensionCommandContext, budgets: UsageBudgetCont
 	ctx.ui.notify(`${label} token budget set to ${tokens.toLocaleString()} tokens.`, "info");
 }
 
+/**
+ * Performs the real side effect for one resolved settings action -- confirmations, effects calls,
+ * budget prompts. A no-op for "close". Shared by the standalone settings panel below and the
+ * unified /jittor shell, so the two interactive surfaces can never drift apart.
+ */
+export async function runSettingsAction(
+	ctx: ExtensionCommandContext,
+	action: SettingsAction,
+	enforcement: EnforcementControl,
+	recovery: CodexRecoveryControl,
+	budgets: UsageBudgetControl,
+	effects: SettingsEffects,
+): Promise<void> {
+	if (action.kind === "close") return;
+	if (action.key === "enforcement") {
+		if (enforcement.isEnabled()) {
+			if (
+				await showConfirmDialog(
+					ctx,
+					"Disable routing enforcement?",
+					"Jittor will remain monitor-only and will no longer block unsafe provider requests.",
+				)
+			)
+				await effects.setEnforcement(false);
+		} else await effects.setEnforcement(true);
+		return;
+	}
+	if (action.key === "footer") {
+		await effects.setFooter(!enforcement.isFooterEnabled());
+		return;
+	}
+	if (action.key === "recovery") {
+		if (!recovery.isCodexRecoveryEnabled()) {
+			if (
+				await showConfirmDialog(
+					ctx,
+					"Enable Codex recovery?",
+					"Jittor may start bounded hidden retries only after transient Codex failures fully settle.",
+				)
+			)
+				await effects.setRecovery(true);
+		} else await effects.setRecovery(false);
+		return;
+	}
+	await editBudget(ctx, budgets, action.key.slice("budget-".length) as UsagePeriod);
+}
+
 export async function showSettingsPanel(
 	ctx: ExtensionCommandContext,
 	enforcement: EnforcementControl,
@@ -160,34 +266,6 @@ export async function showSettingsPanel(
 			};
 		});
 		if (!action || action.kind === "close") return;
-		if (action.key === "enforcement") {
-			if (enforcement.isEnabled()) {
-				if (
-					await ctx.ui.confirm(
-						"Disable routing enforcement?",
-						"Jittor will remain monitor-only and will no longer block unsafe provider requests.",
-					)
-				)
-					await effects.setEnforcement(false);
-			} else await effects.setEnforcement(true);
-			continue;
-		}
-		if (action.key === "footer") {
-			await effects.setFooter(!enforcement.isFooterEnabled());
-			continue;
-		}
-		if (action.key === "recovery") {
-			if (!recovery.isCodexRecoveryEnabled()) {
-				if (
-					await ctx.ui.confirm(
-						"Enable Codex recovery?",
-						"Jittor may start bounded hidden retries only after transient Codex failures fully settle.",
-					)
-				)
-					await effects.setRecovery(true);
-			} else await effects.setRecovery(false);
-			continue;
-		}
-		await editBudget(ctx, budgets, action.key.slice("budget-".length) as UsagePeriod);
+		await runSettingsAction(ctx, action, enforcement, recovery, budgets, effects);
 	}
 }