@oh-my-pi/pi-coding-agent 8.10.13 → 8.12.1

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## [Unreleased]
 
+## [8.11.14] - 2026-01-28
+
+### Changed
+- Rendered /skill command messages as compact skill entries instead of full prompt text
+
 ## [8.8.8] - 2026-01-28
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oh-my-pi/pi-coding-agent",
-	"version": "8.10.13",
+	"version": "8.12.1",
 	"description": "Coding agent CLI with read, bash, edit, write tools and session management",
 	"type": "module",
 	"ompConfig": {
@@ -83,11 +83,11 @@
 		"test": "bun test"
 	},
 	"dependencies": {
-		"@oh-my-pi/omp-stats": "8.10.13",
-		"@oh-my-pi/pi-agent-core": "8.10.13",
-		"@oh-my-pi/pi-ai": "8.10.13",
-		"@oh-my-pi/pi-tui": "8.10.13",
-		"@oh-my-pi/pi-utils": "8.10.13",
+		"@oh-my-pi/omp-stats": "8.12.1",
+		"@oh-my-pi/pi-agent-core": "8.12.1",
+		"@oh-my-pi/pi-ai": "8.12.1",
+		"@oh-my-pi/pi-tui": "8.12.1",
+		"@oh-my-pi/pi-utils": "8.12.1",
 		"@openai/agents": "^0.4.4",
 		"@sinclair/typebox": "^0.34.48",
 		"ajv": "^8.17.1",

package/src/commit/model-selection.ts

@@ -11,9 +11,10 @@ export async function resolvePrimaryModel(
 	},
 ): Promise<{ model: Model<Api>; apiKey: string }> {
 	const available = modelRegistry.getAvailable();
+	const matchPreferences = { usageOrder: settingsManager.getStorage()?.getModelUsageOrder() };
 	const model = override
-		? resolveModelFromString(expandRoleAlias(override, settingsManager), available)
-		: resolveModelFromSettings(settingsManager, available);
+		? resolveModelFromString(expandRoleAlias(override, settingsManager), available, matchPreferences)
+		: resolveModelFromSettings(settingsManager, available, matchPreferences);
 	if (!model) {
 		throw new Error("No model available for commit generation");
 	}
@@ -34,15 +35,16 @@ export async function resolveSmolModel(
 	fallbackApiKey: string,
 ): Promise<{ model: Model<Api>; apiKey: string }> {
 	const available = modelRegistry.getAvailable();
+	const matchPreferences = { usageOrder: settingsManager.getStorage()?.getModelUsageOrder() };
 	const role = settingsManager.getModelRole("smol");
-	const roleModel = role ? resolveModelFromString(role, available) : undefined;
+	const roleModel = role ? resolveModelFromString(role, available, matchPreferences) : undefined;
 	if (roleModel) {
 		const apiKey = await modelRegistry.getApiKey(roleModel);
 		if (apiKey) return { model: roleModel, apiKey };
 	}
 
 	for (const pattern of SMOL_MODEL_PRIORITY) {
-		const candidate = parseModelPattern(pattern, available).model;
+		const candidate = parseModelPattern(pattern, available, matchPreferences).model;
 		if (!candidate) continue;
 		const apiKey = await modelRegistry.getApiKey(candidate);
 		if (apiKey) return { model: candidate, apiKey };
@@ -51,23 +53,35 @@ export async function resolveSmolModel(
 	return { model: fallbackModel, apiKey: fallbackApiKey };
 }
 
-function resolveModelFromSettings(settingsManager: SettingsManager, available: Model<Api>[]): Model<Api> | undefined {
+function resolveModelFromSettings(
+	settingsManager: SettingsManager,
+	available: Model<Api>[],
+	matchPreferences: { usageOrder?: string[] },
+): Model<Api> | undefined {
 	const roles = ["commit", "smol", "default"];
 	for (const role of roles) {
 		const configured = settingsManager.getModelRole(role);
 		if (!configured) continue;
-		const resolved = resolveModelFromString(expandRoleAlias(configured, settingsManager), available);
+		const resolved = resolveModelFromString(
+			expandRoleAlias(configured, settingsManager),
+			available,
+			matchPreferences,
+		);
 		if (resolved) return resolved;
 	}
 	return available[0];
 }
 
-function resolveModelFromString(value: string, available: Model<Api>[]): Model<Api> | undefined {
+function resolveModelFromString(
+	value: string,
+	available: Model<Api>[],
+	matchPreferences: { usageOrder?: string[] },
+): Model<Api> | undefined {
 	const parsed = parseModelString(value);
 	if (parsed) {
 		return available.find(model => model.provider === parsed.provider && model.id === parsed.id);
 	}
-	return parseModelPattern(value, available).model;
+	return parseModelPattern(value, available, matchPreferences).model;
 }
 
 function expandRoleAlias(value: string, settingsManager: SettingsManager): string {

package/src/config/model-resolver.ts

@@ -60,6 +60,76 @@ export function formatModelString(model: Model<Api>): string {
 	return `${model.provider}/${model.id}`;
 }
 
+export interface ModelMatchPreferences {
+	/** Most-recently-used model keys (provider/modelId) to prefer when ambiguous. */
+	usageOrder?: string[];
+	/** Providers to deprioritize when no recent usage is available. */
+	deprioritizeProviders?: string[];
+}
+
+interface ModelPreferenceContext {
+	modelUsageRank: Map<string, number>;
+	providerUsageRank: Map<string, number>;
+	deprioritizedProviders: Set<string>;
+	modelOrder: Map<string, number>;
+}
+
+function buildPreferenceContext(
+	availableModels: Model<Api>[],
+	preferences: ModelMatchPreferences | undefined,
+): ModelPreferenceContext {
+	const modelUsageRank = new Map<string, number>();
+	const providerUsageRank = new Map<string, number>();
+	const usageOrder = preferences?.usageOrder ?? [];
+	for (let i = 0; i < usageOrder.length; i += 1) {
+		const key = usageOrder[i];
+		if (!modelUsageRank.has(key)) {
+			modelUsageRank.set(key, i);
+		}
+		const parsed = parseModelString(key);
+		if (parsed && !providerUsageRank.has(parsed.provider)) {
+			providerUsageRank.set(parsed.provider, i);
+		}
+	}
+
+	const deprioritizedProviders = new Set(preferences?.deprioritizeProviders ?? ["openrouter"]);
+	const modelOrder = new Map<string, number>();
+	for (let i = 0; i < availableModels.length; i += 1) {
+		modelOrder.set(formatModelString(availableModels[i]), i);
+	}
+
+	return { modelUsageRank, providerUsageRank, deprioritizedProviders, modelOrder };
+}
+
+function pickPreferredModel(candidates: Model<Api>[], context: ModelPreferenceContext): Model<Api> {
+	if (candidates.length <= 1) return candidates[0];
+	return [...candidates].sort((a, b) => {
+		const aKey = formatModelString(a);
+		const bKey = formatModelString(b);
+		const aUsage = context.modelUsageRank.get(aKey);
+		const bUsage = context.modelUsageRank.get(bKey);
+		if (aUsage !== undefined || bUsage !== undefined) {
+			return (aUsage ?? Number.POSITIVE_INFINITY) - (bUsage ?? Number.POSITIVE_INFINITY);
+		}
+
+		const aProviderUsage = context.providerUsageRank.get(a.provider);
+		const bProviderUsage = context.providerUsageRank.get(b.provider);
+		if (aProviderUsage !== undefined || bProviderUsage !== undefined) {
+			return (aProviderUsage ?? Number.POSITIVE_INFINITY) - (bProviderUsage ?? Number.POSITIVE_INFINITY);
+		}
+
+		const aDeprioritized = context.deprioritizedProviders.has(a.provider);
+		const bDeprioritized = context.deprioritizedProviders.has(b.provider);
+		if (aDeprioritized !== bDeprioritized) {
+			return aDeprioritized ? 1 : -1;
+		}
+
+		const aOrder = context.modelOrder.get(aKey) ?? 0;
+		const bOrder = context.modelOrder.get(bKey) ?? 0;
+		return aOrder - bOrder;
+	})[0];
+}
+
 /**
  * Helper to check if a model ID looks like an alias (no date suffix)
  * Dates are typically in format: -20241022 or -20250929
@@ -77,7 +147,11 @@ function isAlias(id: string): boolean {
  * Try to match a pattern to a model from the available models list.
  * Returns the matched model or undefined if no match found.
  */
-function tryMatchModel(modelPattern: string, availableModels: Model<Api>[]): Model<Api> | undefined {
+function tryMatchModel(
+	modelPattern: string,
+	availableModels: Model<Api>[],
+	context: ModelPreferenceContext,
+): Model<Api> | undefined {
 	// Check for provider/modelId format (provider is everything before the first /)
 	const slashIndex = modelPattern.indexOf("/");
 	if (slashIndex !== -1) {
@@ -93,9 +167,9 @@ function tryMatchModel(modelPattern: string, availableModels: Model<Api>[]): Mod
 	}
 
 	// Check for exact ID match (case-insensitive)
-	const exactMatch = availableModels.find(m => m.id.toLowerCase() === modelPattern.toLowerCase());
-	if (exactMatch) {
-		return exactMatch;
+	const exactMatches = availableModels.filter(m => m.id.toLowerCase() === modelPattern.toLowerCase());
+	if (exactMatches.length > 0) {
+		return pickPreferredModel(exactMatches, context);
 	}
 
 	// No exact match - fall back to partial matching
@@ -114,14 +188,19 @@ function tryMatchModel(modelPattern: string, availableModels: Model<Api>[]): Mod
 	const datedVersions = matches.filter(m => !isAlias(m.id));
 
 	if (aliases.length > 0) {
-		// Prefer alias - if multiple aliases, pick the one that sorts highest
-		aliases.sort((a, b) => b.id.localeCompare(a.id));
-		return aliases[0];
-	} else {
-		// No alias found, pick latest dated version
-		datedVersions.sort((a, b) => b.id.localeCompare(a.id));
+		return pickPreferredModel(aliases, context);
+	}
+	if (datedVersions.length === 0) return undefined;
+
+	if (datedVersions.length === 1) {
 		return datedVersions[0];
 	}
+
+	const sortedById = [...datedVersions].sort((a, b) => b.id.localeCompare(a.id));
+	const topId = sortedById[0]?.id;
+	if (!topId) return undefined;
+	const topCandidates = sortedById.filter(model => model.id === topId);
+	return pickPreferredModel(topCandidates, context);
 }
 
 export interface ParsedModelResult {
@@ -145,9 +224,13 @@ export interface ParsedModelResult {
  *
  * @internal Exported for testing
  */
-export function parseModelPattern(pattern: string, availableModels: Model<Api>[]): ParsedModelResult {
+function parseModelPatternWithContext(
+	pattern: string,
+	availableModels: Model<Api>[],
+	context: ModelPreferenceContext,
+): ParsedModelResult {
 	// Try exact match first
-	const exactMatch = tryMatchModel(pattern, availableModels);
+	const exactMatch = tryMatchModel(pattern, availableModels, context);
 	if (exactMatch) {
 		return { model: exactMatch, thinkingLevel: undefined, warning: undefined, explicitThinkingLevel: false };
 	}
@@ -164,7 +247,7 @@ export function parseModelPattern(pattern: string, availableModels: Model<Api>[]
 
 	if (isValidThinkingLevel(suffix)) {
 		// Valid thinking level - recurse on prefix and use this level
-		const result = parseModelPattern(prefix, availableModels);
+		const result = parseModelPatternWithContext(prefix, availableModels, context);
 		if (result.model) {
 			// Only use this thinking level if no warning from inner recursion
 			const explicitThinkingLevel = !result.warning;
@@ -179,7 +262,7 @@ export function parseModelPattern(pattern: string, availableModels: Model<Api>[]
 	}
 
 	// Invalid suffix - recurse on prefix and warn
-	const result = parseModelPattern(prefix, availableModels);
+	const result = parseModelPatternWithContext(prefix, availableModels, context);
 	if (result.model) {
 		return {
 			model: result.model,
@@ -191,6 +274,15 @@ export function parseModelPattern(pattern: string, availableModels: Model<Api>[]
 	return result;
 }
 
+export function parseModelPattern(
+	pattern: string,
+	availableModels: Model<Api>[],
+	preferences?: ModelMatchPreferences,
+): ParsedModelResult {
+	const context = buildPreferenceContext(availableModels, preferences);
+	return parseModelPatternWithContext(pattern, availableModels, context);
+}
+
 /**
  * Resolve model patterns to actual Model objects with optional thinking levels
  * Format: "pattern:level" where :level is optional
@@ -202,8 +294,13 @@ export function parseModelPattern(pattern: string, availableModels: Model<Api>[]
  * The algorithm tries to match the full pattern first, then progressively
  * strips colon-suffixes to find a match.
  */
-export async function resolveModelScope(patterns: string[], modelRegistry: ModelRegistry): Promise<ScopedModel[]> {
+export async function resolveModelScope(
+	patterns: string[],
+	modelRegistry: ModelRegistry,
+	preferences?: ModelMatchPreferences,
+): Promise<ScopedModel[]> {
 	const availableModels = modelRegistry.getAvailable();
+	const context = buildPreferenceContext(availableModels, preferences);
 	const scopedModels: ScopedModel[] = [];
 
 	for (const pattern of patterns) {
@@ -245,7 +342,11 @@ export async function resolveModelScope(patterns: string[], modelRegistry: Model
 			continue;
 		}
 
-		const { model, thinkingLevel, warning, explicitThinkingLevel } = parseModelPattern(pattern, availableModels);
+		const { model, thinkingLevel, warning, explicitThinkingLevel } = parseModelPatternWithContext(
+			pattern,
+			availableModels,
+			context,
+		);
 
 		if (warning) {
 			console.warn(chalk.yellow(`Warning: ${warning}`));

package/src/cursor.ts

@@ -194,12 +194,7 @@ export class CursorExecHandlers implements ICursorExecHandlers {
 
 	async shell(args: Parameters<NonNullable<ICursorExecHandlers["shell"]>>[0]) {
 		const toolCallId = decodeToolCallId(args.toolCallId);
-		const timeoutSeconds =
-			args.timeout && args.timeout > 0
-				? args.timeout > 1000
-					? Math.ceil(args.timeout / 1000)
-					: args.timeout
-				: undefined;
+		const timeoutSeconds = args.timeout && args.timeout > 0 ? args.timeout : undefined;
 		const toolResultMessage = await executeTool(this.options, "bash", toolCallId, {
 			command: args.command,
 			workdir: args.workingDirectory || undefined,

package/src/main.ts

@@ -373,7 +373,10 @@ async function buildSessionOptions(
 	// Model from CLI (--model) - uses same fuzzy matching as --models
 	if (parsed.model) {
 		const available = modelRegistry.getAvailable();
-		const { model, warning } = parseModelPattern(parsed.model, available);
+		const modelMatchPreferences = {
+			usageOrder: settingsManager.getStorage()?.getModelUsageOrder(),
+		};
+		const { model, warning } = parseModelPattern(parsed.model, available, modelMatchPreferences);
 		if (warning) {
 			writeStderr(chalk.yellow(`Warning: ${warning}`));
 		}
@@ -652,8 +655,11 @@ export async function main(args: string[]) {
 
 	let scopedModels: ScopedModel[] = [];
 	const modelPatterns = parsed.models ?? settingsManager.getEnabledModels();
+	const modelMatchPreferences = {
+		usageOrder: settingsManager.getStorage()?.getModelUsageOrder(),
+	};
 	if (modelPatterns && modelPatterns.length > 0) {
-		scopedModels = await resolveModelScope(modelPatterns, modelRegistry);
+		scopedModels = await resolveModelScope(modelPatterns, modelRegistry, modelMatchPreferences);
 		time("resolveModelScope");
 	}
 

package/src/modes/components/countdown-timer.ts

@@ -6,6 +6,7 @@ import type { TUI } from "@oh-my-pi/pi-tui";
 export class CountdownTimer {
 	private intervalId: ReturnType<typeof setInterval> | undefined;
 	private remainingSeconds: number;
+	private readonly initialMs: number;
 
 	constructor(
 		timeoutMs: number,
@@ -13,6 +14,7 @@ export class CountdownTimer {
 		private onTick: (seconds: number) => void,
 		private onExpire: () => void,
 	) {
+		this.initialMs = timeoutMs;
 		this.remainingSeconds = Math.ceil(timeoutMs / 1000);
 		this.onTick(this.remainingSeconds);
 
@@ -28,6 +30,13 @@ export class CountdownTimer {
 		}, 1000);
 	}
 
+	/** Reset the countdown to its initial value */
+	reset(): void {
+		this.remainingSeconds = Math.ceil(this.initialMs / 1000);
+		this.onTick(this.remainingSeconds);
+		this.tui?.requestRender();
+	}
+
 	dispose(): void {
 		if (this.intervalId) {
 			clearInterval(this.intervalId);

package/src/modes/components/hook-selector.ts

@@ -84,6 +84,9 @@ export class HookSelectorComponent extends Container {
 	}
 
 	handleInput(keyData: string): void {
+		// Reset countdown on any interaction
+		this.countdown?.reset();
+
 		if (matchesKey(keyData, "up") || keyData === "k") {
 			this.selectedIndex = Math.max(0, this.selectedIndex - 1);
 			this.updateList();

package/src/modes/components/skill-message.ts

@@ -0,0 +1,92 @@
+import type { TextContent } from "@oh-my-pi/pi-ai";
+import type { Component } from "@oh-my-pi/pi-tui";
+import { Box, Container, Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { CustomMessage, SkillPromptDetails } from "../../session/messages";
+
+export class SkillMessageComponent extends Container {
+	private message: CustomMessage<SkillPromptDetails>;
+	private box: Box;
+	private contentComponent?: Component;
+	private _expanded = false;
+
+	constructor(message: CustomMessage<SkillPromptDetails>) {
+		super();
+		this.message = message;
+		this.addChild(new Spacer(1));
+
+		this.box = new Box(1, 1, t => theme.bg("customMessageBg", t));
+		this.rebuild();
+	}
+
+	setExpanded(expanded: boolean): void {
+		if (this._expanded !== expanded) {
+			this._expanded = expanded;
+			this.rebuild();
+		}
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.rebuild();
+	}
+
+	private rebuild(): void {
+		if (this.contentComponent) {
+			this.removeChild(this.contentComponent);
+			this.contentComponent = undefined;
+		}
+
+		this.removeChild(this.box);
+		this.addChild(this.box);
+		this.box.clear();
+
+		const label = theme.fg("customMessageLabel", theme.bold("[skill]"));
+		this.box.addChild(new Text(label, 0, 0));
+		this.box.addChild(new Spacer(1));
+
+		const details = this.message.details;
+		const args = details?.args?.trim();
+		const infoLines = [
+			`Skill: ${details?.name ?? "unknown"}`,
+			args ? `Args: ${args}` : undefined,
+			details?.path ? `Path: ${details.path}` : undefined,
+			typeof details?.lineCount === "number" ? `Prompt: ${details.lineCount} lines` : undefined,
+		].filter((line): line is string => Boolean(line));
+
+		this.box.addChild(
+			new Markdown(infoLines.join("\n"), 0, 0, getMarkdownTheme(), {
+				color: (value: string) => theme.fg("customMessageText", value),
+			}),
+		);
+
+		if (!this._expanded) {
+			return;
+		}
+
+		const text = this.extractText();
+		if (!text) {
+			return;
+		}
+
+		this.box.addChild(new Spacer(1));
+		const promptHeader = theme.fg("customMessageLabel", theme.bold("Prompt"));
+		this.box.addChild(new Text(promptHeader, 0, 0));
+		this.box.addChild(new Spacer(1));
+
+		this.contentComponent = new Markdown(text, 0, 0, getMarkdownTheme(), {
+			color: (value: string) => theme.fg("customMessageText", value),
+		});
+		this.box.addChild(this.contentComponent);
+	}
+
+	private extractText(): string {
+		if (typeof this.message.content === "string") {
+			return this.message.content;
+		}
+		return this.message.content
+			.filter((c): c is TextContent => c.type === "text")
+			.map(c => c.text)
+			.join("\n");
+	}
+}

package/src/modes/controllers/input-controller.ts

@@ -7,6 +7,7 @@ import { nanoid } from "nanoid";
 import { theme } from "../../modes/theme/theme";
 import type { InteractiveModeContext } from "../../modes/types";
 import type { AgentSessionEvent } from "../../session/agent-session";
+import { SKILL_PROMPT_MESSAGE_TYPE, type SkillPromptDetails } from "../../session/messages";
 import { readImageFromClipboard } from "../../utils/clipboard";
 import { resizeImage } from "../../utils/image-resize";
 import { generateSessionTitle, setTerminalTitle } from "../../utils/title-generator";
@@ -329,7 +330,22 @@ export class InputController {
 							metaLines.push(`User: ${args}`);
 						}
 						const message = `${body}\n\n---\n\n${metaLines.join("\n")}`;
-						await this.ctx.session.prompt(message, { streamingBehavior: "followUp" });
+						const skillName = commandName.slice("skill:".length);
+						const details: SkillPromptDetails = {
+							name: skillName || commandName,
+							path: skillPath,
+							args: args || undefined,
+							lineCount: body ? body.split("\n").length : 0,
+						};
+						await this.ctx.session.promptCustomMessage(
+							{
+								customType: SKILL_PROMPT_MESSAGE_TYPE,
+								content: message,
+								display: true,
+								details,
+							},
+							{ streamingBehavior: "followUp" },
+						);
 					} catch (err) {
 						this.ctx.showError(`Failed to load skill: ${err instanceof Error ? err.message : String(err)}`);
 					}

package/src/modes/utils/ui-helpers.ts

@@ -9,11 +9,12 @@ import { CustomMessageComponent } from "../../modes/components/custom-message";
 import { DynamicBorder } from "../../modes/components/dynamic-border";
 import { PythonExecutionComponent } from "../../modes/components/python-execution";
 import { ReadToolGroupComponent } from "../../modes/components/read-tool-group";
+import { SkillMessageComponent } from "../../modes/components/skill-message";
 import { ToolExecutionComponent } from "../../modes/components/tool-execution";
 import { UserMessageComponent } from "../../modes/components/user-message";
 import { theme } from "../../modes/theme/theme";
 import type { CompactionQueuedMessage, InteractiveModeContext } from "../../modes/types";
-import type { CustomMessage } from "../../session/messages";
+import { type CustomMessage, SKILL_PROMPT_MESSAGE_TYPE, type SkillPromptDetails } from "../../session/messages";
 import type { SessionContext } from "../../session/session-manager";
 
 type TextBlock = { type: "text"; text: string };
@@ -94,9 +95,17 @@ export class UiHelpers {
 			case "hookMessage":
 			case "custom": {
 				if (message.display) {
+					if (message.customType === SKILL_PROMPT_MESSAGE_TYPE) {
+						const component = new SkillMessageComponent(message as CustomMessage<SkillPromptDetails>);
+						component.setExpanded(this.ctx.toolOutputExpanded);
+						this.ctx.chatContainer.addChild(component);
+						break;
+					}
 					const renderer = this.ctx.session.extensionRunner?.getMessageRenderer(message.customType);
 					// Both HookMessage and CustomMessage have the same structure, cast for compatibility
-					this.ctx.chatContainer.addChild(new CustomMessageComponent(message as CustomMessage<unknown>, renderer));
+					const component = new CustomMessageComponent(message as CustomMessage<unknown>, renderer);
+					component.setExpanded(this.ctx.toolOutputExpanded);
+					this.ctx.chatContainer.addChild(component);
 				}
 				break;
 			}

package/src/prompts/agents/designer.md

@@ -0,0 +1,75 @@
+---
+name: designer
+description: UI/UX specialist for design implementation, review, and visual refinement
+spawns: explore
+model: google-gemini-cli/gemini-3-pro, gemini-3-pro, gemini-3, pi/default
+---
+
+<role>Senior design engineer with 10+ years shipping production interfaces. You implement UI, conduct design reviews, and refine components. Your work is distinctive—never generic.</role>
+
+<critical>
+You CAN and SHOULD make file edits, create components, and run commands. This is your primary function.
+Before implementing: identify the aesthetic direction, existing patterns, and design tokens in use.
+</critical>
+
+<strengths>
+- Translating design intent into working UI code
+- Identifying UX issues: unclear states, missing feedback, poor hierarchy
+- Accessibility: contrast, focus states, semantic markup, screen reader compatibility
+- Visual consistency: spacing, typography, color usage, component patterns
+- Responsive design and layout structure
+</strengths>
+
+<procedure>
+## Implementation
+1. Read existing components, tokens, and patterns—reuse before inventing
+2. Identify the aesthetic direction (minimal, bold, editorial, etc.)
+3. Implement with explicit states: loading, empty, error, disabled, hover, focus
+4. Verify accessibility: contrast, focus rings, semantic HTML
+5. Test responsive behavior
+
+## Review
+1. Read the files under review
+2. Check for UX issues, accessibility gaps, visual inconsistencies
+3. Cite file, line, and concrete issue—no vague feedback
+4. Suggest specific fixes with code when applicable
+</procedure>
+
+<directives>
+- Prefer edits to existing files over creating new ones
+- Keep changes minimal and consistent with existing code style
+- NEVER create documentation files (*.md) unless explicitly requested
+- Be concise. No filler or ceremony.
+- Follow the main agent's instructions.
+</directives>
+
+<avoid>
+## AI Slop Patterns
+These are fingerprints of generic AI-generated interfaces. Avoid them:
+- **Glassmorphism everywhere**: blur effects, glass cards, glow borders used decoratively
+- **Cyan-on-dark with purple gradients**: the 2024 AI color palette
+- **Gradient text on metrics/headings**: decorative without meaning
+- **Card grids with identical cards**: icon + heading + text, repeated endlessly
+- **Cards nested inside cards**: visual noise, flatten the hierarchy
+- **Large rounded-corner icons above every heading**: templated, adds no value
+- **Hero metric layouts**: big number, small label, gradient accent—overused
+- **Same spacing everywhere**: no rhythm, monotonous
+- **Center-aligned everything**: left-align with asymmetry feels more designed
+- **Modals for everything**: lazy pattern, rarely the best solution
+- **Overused fonts**: Inter, Roboto, Open Sans, system defaults
+- **Pure black (#000) or pure white (#fff)**: always tint neutrals
+- **Gray text on colored backgrounds**: use a shade of the background instead
+- **Bounce/elastic easing**: dated, tacky—use exponential easing (ease-out-quart/expo)
+
+## UX Anti-Patterns
+- Missing states (loading, empty, error)
+- Redundant information (heading restates intro text)
+- Every button styled as primary—hierarchy matters
+- Empty states that just say "nothing here" instead of guiding the user
+</avoid>
+
+<critical>
+Every interface should make someone ask "how was this made?" not "which AI made this?"
+Commit to a clear aesthetic direction and execute with precision.
+Keep going until the implementation is complete. This matters.
+</critical>