Increase MCP guidance limit (#12097)

* Increase MCP guidance limit
Add new controls for Input

* PR feedback

app/components/Input.tsx

@@ -12,6 +12,9 @@ import { undraggableOnDesktop } from "~/styles";
 export const NativeTextarea = styled.textarea<{
   hasIcon?: boolean;
   hasPrefix?: boolean;
+  $autoSize?: boolean;
+  $minHeight?: string;
+  $maxHeight?: string;
 }>`
   border: 0;
   flex: 1;
@@ -21,6 +24,10 @@ export const NativeTextarea = styled.textarea<{
   background: none;
   color: ${s("text")};
 
+  ${(props) => props.$autoSize && `field-sizing: content;`}
+  ${(props) => props.$minHeight && `min-height: ${props.$minHeight};`}
+  ${(props) => props.$maxHeight && `max-height: ${props.$maxHeight};`}
+
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
@@ -122,7 +129,7 @@ export const Outline = styled(Flex)<{
   user-select: none;
 `;
 
-const CharacterCount = styled.span`
+const CharacterCount = styled.span<{ $warning?: boolean }>`
   position: absolute;
   top: 0;
   right: 0;
@@ -130,8 +137,10 @@ const CharacterCount = styled.span`
   line-height: 1;
   padding: 2px 4px;
   border-radius: 0 0 0 2px;
-  background: ${s("inputBorder")};
-  color: ${s("textTertiary")};
+  background: ${(props) =>
+    props.$warning ? props.theme.warning : props.theme.inputBorder};
+  color: ${(props) =>
+    props.$warning ? props.theme.white : props.theme.textTertiary};
   pointer-events: none;
 `;
 
@@ -159,6 +168,14 @@ export interface Props extends Omit<
   icon?: React.ReactNode;
   /** Show a character count near the maxLength limit. Always shown for textareas, opt-in for other types. */
   showCharacterCount?: boolean;
+  /** An optional soft limit below maxLength. When the value exceeds this, the character count is shown in a warning color. */
+  warningLimit?: number;
+  /** For textareas, grow the height to fit content. Use with `maxHeight` to cap the growth. */
+  autoSize?: boolean;
+  /** Minimum height of the textarea as a CSS length value (e.g. "3lh", "80px"). */
+  minHeight?: string;
+  /** Maximum height of the textarea as a CSS length value (e.g. "20lh", "400px"). */
+  maxHeight?: string;
   /** Whether to use a round border-radius (16px) instead of the default (4px). */
   round?: boolean;
   /** Like autoFocus, but also select any text in the input */
@@ -253,6 +270,10 @@ function Input(
     labelHidden,
     maxLength,
     showCharacterCount,
+    warningLimit,
+    autoSize,
+    minHeight,
+    maxHeight,
     onFocus,
     onBlur,
     onChange,
@@ -264,7 +285,11 @@ function Input(
   const showCharCount =
     (type === "textarea" || showCharacterCount) &&
     maxLength !== undefined &&
-    charCount >= maxLength * 0.9;
+    (charCount >= maxLength * 0.9 ||
+      (warningLimit !== undefined && charCount >= warningLimit));
+
+  const overWarningLimit =
+    warningLimit !== undefined && charCount > warningLimit;
 
   const wrappedLabel = <LabelText>{label}</LabelText>;
 
@@ -290,6 +315,9 @@ function Input(
               onFocus={handleFocus}
               hasIcon={!!icon}
               hasPrefix={!!prefix}
+              $autoSize={autoSize}
+              $minHeight={minHeight}
+              $maxHeight={maxHeight}
               {...rest}
               // set it after "rest" to override props from spread.
               maxLength={maxLength}
@@ -316,7 +344,7 @@ function Input(
           )}
           {showCharCount && (
             <Fade>
-              <CharacterCount>
+              <CharacterCount $warning={overWarningLimit}>
                 {charCount}/{maxLength}
               </CharacterCount>
             </Fade>

app/scenes/Settings/Features.tsx

@@ -125,9 +125,12 @@ function Features() {
               <Input
                 id="guidanceMCP"
                 type="textarea"
-                rows={6}
+                autoSize
+                minHeight="6lh"
+                maxHeight="20lh"
                 value={team.guidanceMCP ?? ""}
                 maxLength={TeamValidation.maxGuidanceMCPLength}
+                warningLimit={TeamValidation.warnGuidanceMCPLength}
                 onChange={handleGuidanceMCPChange}
                 onBlur={handleGuidanceMCPBlur}
               />

shared/validations.ts

@@ -139,7 +139,10 @@ export const TeamValidation = {
   maxDomainLength: 255,
 
   /** The maximum length of MCP workspace guidance */
-  maxGuidanceMCPLength: 2000,
+  maxGuidanceMCPLength: 10000,
+
+  /** The recommended length of MCP workspace guidance, beyond which a warning is shown */
+  warnGuidanceMCPLength: 2000,
 };
 
 export const UserValidation = {