feat(app): refine agent profile creation (#3680)

Keep profiles as the richer primitive while restoring the familiar star cue and clearer guidance for agent selection. Account for borders in shared field geometry so controls preserve their declared heights across form consumers.

packages/app/src/components/ui/control-geometry.test.ts

@@ -86,23 +86,28 @@ describe("control geometry", () => {
     expect(geometry.formTextInputMd.lineHeight).toBe(20);
   });
 
-  it("derives field padding from line height without changing the control height", () => {
+  it("derives field padding from content and border without changing the control height", () => {
     const geometry = createControlGeometry(theme);
+    const borderWidth = theme.borderWidth[1];
 
     expect(geometry.fieldControlSm.minHeight).toBe(32);
-    expect(geometry.fieldControlSm.paddingVertical).toBe(6);
-    expect(geometry.fieldTextSm.lineHeight + geometry.fieldControlSm.paddingVertical * 2).toBe(
-      geometry.fieldControlSm.minHeight,
-    );
+    expect(geometry.fieldControlSm.paddingVertical).toBe(5);
+    expect(
+      geometry.fieldTextSm.lineHeight +
+        geometry.fieldControlSm.paddingVertical * 2 +
+        borderWidth * 2,
+    ).toBe(geometry.fieldControlSm.minHeight);
 
     expect(geometry.fieldControlMd.minHeight).toBe(44);
-    expect(geometry.fieldControlMd.paddingVertical).toBe(12);
-    expect(geometry.fieldTextMd.lineHeight + geometry.fieldControlMd.paddingVertical * 2).toBe(
-      geometry.fieldControlMd.minHeight,
-    );
+    expect(geometry.fieldControlMd.paddingVertical).toBe(11);
+    expect(
+      geometry.fieldTextMd.lineHeight +
+        geometry.fieldControlMd.paddingVertical * 2 +
+        borderWidth * 2,
+    ).toBe(geometry.fieldControlMd.minHeight);
 
-    expect(geometry.formTextInputSm.paddingVertical).toBe(6);
-    expect(geometry.formTextInputMd.paddingVertical).toBe(12);
+    expect(geometry.formTextInputSm.paddingVertical).toBe(5);
+    expect(geometry.formTextInputMd.paddingVertical).toBe(11);
   });
 
   it("keeps segmented controls ghost with button-radius segments in a button-sized track", () => {

packages/app/src/components/ui/control-geometry.ts

@@ -78,8 +78,12 @@ function fieldLineHeight(fontSize: number): number {
   return Math.round(fontSize * FIELD_TEXT_LINE_HEIGHT_RATIO);
 }
 
-function fieldVerticalPadding(controlHeight: number, lineHeight: number): number {
-  return (controlHeight - lineHeight) / 2;
+function fieldVerticalPadding(
+  controlHeight: number,
+  lineHeight: number,
+  borderWidth: number,
+): number {
+  return (controlHeight - lineHeight - borderWidth * 2) / 2;
 }
 
 export function getControlInteractionPhase(
@@ -111,18 +115,27 @@ export function resolveControlInteractionStyles(
 }
 
 export function createControlGeometry(theme: Theme) {
+  const controlBorderWidth = theme.borderWidth[1];
   const fieldTextSmLineHeight = fieldLineHeight(theme.fontSize.base);
   const fieldTextMdLineHeight = fieldLineHeight(theme.fontSize.base);
   const fieldControlSm = {
     minHeight: CONTROL_HEIGHTS.compact,
     paddingHorizontal: theme.spacing[3],
-    paddingVertical: fieldVerticalPadding(CONTROL_HEIGHTS.compact, fieldTextSmLineHeight),
+    paddingVertical: fieldVerticalPadding(
+      CONTROL_HEIGHTS.compact,
+      fieldTextSmLineHeight,
+      controlBorderWidth,
+    ),
     borderRadius: theme.borderRadius.md,
   };
   const fieldControlMd = {
     minHeight: CONTROL_HEIGHTS.field,
     paddingHorizontal: theme.spacing[4],
-    paddingVertical: fieldVerticalPadding(CONTROL_HEIGHTS.field, fieldTextMdLineHeight),
+    paddingVertical: fieldVerticalPadding(
+      CONTROL_HEIGHTS.field,
+      fieldTextMdLineHeight,
+      controlBorderWidth,
+    ),
     borderRadius: theme.borderRadius.lg,
   };
   const fieldTextSm = {
@@ -182,7 +195,7 @@ export function createControlGeometry(theme: Theme) {
     fieldTextSm,
     fieldTextMd,
     controlRest: {
-      borderWidth: theme.borderWidth[1],
+      borderWidth: controlBorderWidth,
       borderColor: "transparent",
       outlineWidth: 0,
       outlineColor: "transparent",

packages/app/src/components/ui/form-field.tsx

@@ -45,7 +45,7 @@ export function Field({ label, children, hint, error, testID }: FieldProps) {
     }
     if (hint) {
       return (
-        <Text numberOfLines={1} style={styles.hintText} testID={hintTestID}>
+        <Text style={styles.hintText} testID={hintTestID}>
           {hint}
         </Text>
       );