Show save confirmation and character-limit indicator in Studio Code instructions settings

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: 2 people

apps/cli/ai/system-prompt.ts

@@ -1,3 +1,4 @@
+import { GLOBAL_INSTRUCTIONS_MAX_LENGTH } from '@studio/common/ai/global-instructions';
 import {
 	getStudioPresentationRulesPrompt,
 	getStudioWidgetPromptManifest,
@@ -27,10 +28,6 @@ export interface BuildSystemPromptOptions {
 	userInstructions?: string;
 }
 
-// Keep the always-injected instructions small enough that they can't crowd out
-// the rest of the system prompt.
-const USER_INSTRUCTIONS_MAX_LENGTH = 16_000;
-
 export function buildSystemPrompt( options?: BuildSystemPromptOptions ): string {
 	const remoteSessionAddendum = options?.remoteSession ? `\n\n${ REMOTE_SESSION_GUIDANCE }` : '';
 	const userInstructionsSection = buildUserInstructionsSection( options?.userInstructions );
@@ -59,10 +56,10 @@ function buildUserInstructionsSection( userInstructions?: string ): string {
 		return '';
 	}
 	const instructions =
-		userInstructions.length > USER_INSTRUCTIONS_MAX_LENGTH
+		userInstructions.length > GLOBAL_INSTRUCTIONS_MAX_LENGTH
 			? `${ userInstructions.slice(
 					0,
-					USER_INSTRUCTIONS_MAX_LENGTH
+					GLOBAL_INSTRUCTIONS_MAX_LENGTH
 			  ) }\n\n[Note: the global instructions file exceeds the size limit and was truncated here. Let the user know they should shorten it in Studio settings.]`
 			: userInstructions;
 	return `

apps/studio/src/modules/user-settings/components/studio-code-tab.tsx

@@ -1,3 +1,4 @@
+import { GLOBAL_INSTRUCTIONS_MAX_LENGTH } from '@studio/common/ai/global-instructions';
 import { getErrorMessage } from '@studio/common/lib/error-formatting';
 import { TextareaControl } from '@wordpress/components';
 import { useI18n } from '@wordpress/react-i18n';
@@ -10,6 +11,7 @@ export function StudioCodeTab() {
 	const [ content, setContent ] = useState< string | null >( null );
 	const [ savedContent, setSavedContent ] = useState( '' );
 	const [ isSaving, setIsSaving ] = useState( false );
+	const [ justSaved, setJustSaved ] = useState( false );
 	const [ error, setError ] = useState< string | null >( null );
 
 	useEffect( () => {
@@ -32,6 +34,14 @@ export function StudioCodeTab() {
 		};
 	}, [] );
 
+	useEffect( () => {
+		if ( ! justSaved ) {
+			return;
+		}
+		const timer = setTimeout( () => setJustSaved( false ), 2500 );
+		return () => clearTimeout( timer );
+	}, [ justSaved ] );
+
 	const handleSave = async () => {
 		if ( content === null ) {
 			return;
@@ -41,13 +51,22 @@ export function StudioCodeTab() {
 		try {
 			await getIpcApi().saveGlobalAgentInstructions( content );
 			setSavedContent( content );
+			setJustSaved( true );
 		} catch ( err ) {
 			setError( getErrorMessage( err ) ?? String( err ) );
 		} finally {
 			setIsSaving( false );
 		}
 	};
 
+	const isDirty = content !== null && content !== savedContent;
+	const showCounter = content !== null && content.length >= GLOBAL_INSTRUCTIONS_MAX_LENGTH * 0.8;
+	const buttonLabel = isSaving
+		? __( 'Saving…' )
+		: justSaved && ! isDirty
+		? __( 'Saved' )
+		: __( 'Save instructions' );
+
 	return (
 		<div className="flex flex-col gap-4 pb-2">
 			{ error && <div className="text-sm text-frame-error">{ error }</div> }
@@ -59,19 +78,25 @@ export function StudioCodeTab() {
 					'Global instructions for the Studio Code agent. They are included in every new conversation, across all sites.'
 				) }
 				rows={ 12 }
+				maxLength={ GLOBAL_INSTRUCTIONS_MAX_LENGTH }
 				value={ content ?? '' }
 				onChange={ setContent }
 				disabled={ content === null }
 				placeholder={ __( 'e.g. Always answer in French. My sites are for restaurants.' ) }
 			/>
 
-			<div className="flex justify-end">
+			<div className="flex items-center justify-end gap-3">
+				{ showCounter && (
+					<span className="text-xs text-frame-text-secondary">
+						{ `${ content.length.toLocaleString() } / ${ GLOBAL_INSTRUCTIONS_MAX_LENGTH.toLocaleString() }` }
+					</span>
+				) }
 				<Button
 					variant="primary"
 					onClick={ handleSave }
-					disabled={ content === null || isSaving || content === savedContent }
+					disabled={ content === null || isSaving || ! isDirty }
 				>
-					{ isSaving ? __( 'Saving…' ) : __( 'Save instructions' ) }
+					{ buttonLabel }
 				</Button>
 			</div>
 		</div>

apps/ui/src/components/settings-view/studio-code-panel.tsx

@@ -1,7 +1,8 @@
+import { GLOBAL_INSTRUCTIONS_MAX_LENGTH } from '@studio/common/ai/global-instructions';
 import { DataForm } from '@wordpress/dataviews';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/ui';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
 	useAgentInstructions,
 	useSaveAgentInstructions,
@@ -36,20 +37,36 @@ export function StudioCodePanel() {
 	const { data: saved } = useAgentInstructions();
 	const saveInstructions = useSaveAgentInstructions();
 	const [ edits, setEdits ] = useState< string | null >( null );
+	const [ justSaved, setJustSaved ] = useState( false );
+
+	useEffect( () => {
+		if ( ! justSaved ) {
+			return;
+		}
+		const timer = setTimeout( () => setJustSaved( false ), 2500 );
+		return () => clearTimeout( timer );
+	}, [ justSaved ] );
 
 	if ( saved === undefined ) {
 		return <div className={ styles.state }>{ __( 'Loading…' ) }</div>;
 	}
 
 	const content = edits ?? saved;
-	const canSubmit = content !== saved && ! saveInstructions.isPending;
+	const isDirty = content !== saved;
+	const canSubmit = isDirty && ! saveInstructions.isPending;
+	const showCounter = content.length >= GLOBAL_INSTRUCTIONS_MAX_LENGTH * 0.8;
 
 	const handleSubmit = ( event: FormEvent ) => {
 		event.preventDefault();
 		if ( ! canSubmit ) {
 			return;
 		}
-		saveInstructions.mutate( content, { onSuccess: () => setEdits( null ) } );
+		saveInstructions.mutate( content, {
+			onSuccess: () => {
+				setEdits( null );
+				setJustSaved( true );
+			},
+		} );
 	};
 
 	return (
@@ -58,14 +75,23 @@ export function StudioCodePanel() {
 				data={ { content } }
 				fields={ FIELDS }
 				form={ FORM }
-				onChange={ ( update ) => setEdits( ( update.content as string ) ?? '' ) }
+				onChange={ ( update ) =>
+					setEdits(
+						( ( update.content as string ) ?? '' ).slice( 0, GLOBAL_INSTRUCTIONS_MAX_LENGTH )
+					)
+				}
 			/>
 			{ saveInstructions.isError && (
 				<p className={ styles.instructionsError }>
 					{ __( 'Saving the instructions failed. Please try again.' ) }
 				</p>
 			) }
 			<div className={ styles.actions }>
+				{ showCounter && (
+					<span className={ styles.instructionsCounter }>
+						{ `${ content.length.toLocaleString() } / ${ GLOBAL_INSTRUCTIONS_MAX_LENGTH.toLocaleString() }` }
+					</span>
+				) }
 				<Button
 					type="submit"
 					variant="solid"
@@ -74,7 +100,7 @@ export function StudioCodePanel() {
 					loading={ saveInstructions.isPending }
 					loadingAnnouncement={ __( 'Saving instructions' ) }
 				>
-					{ __( 'Save instructions' ) }
+					{ justSaved && ! isDirty ? __( 'Saved' ) : __( 'Save instructions' ) }
 				</Button>
 			</div>
 		</form>

apps/ui/src/components/settings-view/style.module.css

@@ -129,8 +129,14 @@
 
 .actions {
 	display: flex;
+	align-items: center;
 	justify-content: flex-end;
-	gap: var(--wpds-dimension-padding-sm);
+	gap: var(--wpds-dimension-padding-md);
+}
+
+.instructionsCounter {
+	font-size: var(--wpds-typography-font-size-sm);
+	color: var(--wpds-color-fg-content-neutral-weak);
 }
 
 .instructionsError {

packages/common/ai/global-instructions.ts

@@ -3,6 +3,11 @@ import path from 'path';
 import { isErrnoException } from '../lib/is-errno-exception';
 import { getGlobalInstructionsPath } from '../lib/well-known-paths';
 
+// Keep the always-injected instructions small enough that they can't crowd out
+// the rest of the system prompt. The prompt builder truncates anything longer;
+// the settings UIs cap their textareas at the same length.
+export const GLOBAL_INSTRUCTIONS_MAX_LENGTH = 16_000;
+
 /**
  * Read the user's global agent instructions (`~/.studio/knowledge/instructions.md`)
  * for injection into the system prompt. Returns `undefined` when the file is