fix(tui): stop gap={1} from inserting phantom space before caret

Nest value and caret in a gapless Box on agent-modal provider/profile
forms and codex-login profile name so the | caret sits flush after typed
text. Validate trims spaces on save. Closes CL-5342.

Author: TheGreatAxios

src/tui/components/agent-modal.test.ts

@@ -89,4 +89,27 @@ describe("validateProviderForm", () => {
       expect(result.submission.keyless).toBeUndefined();
     }
   });
+
+  test("trims leading and trailing spaces on text fields at save", () => {
+    const result = validateProviderForm(
+      form({
+        name: "  firepass  ",
+        baseURL: "  https://firepass.example/v1  ",
+        apiKey: "  sk-key  ",
+        models: "  fp-large , fp-small  ",
+        defaultModel: "  fp-large  ",
+      }),
+      undefined,
+    );
+    expect(result).toEqual({
+      ok: true,
+      submission: {
+        name: "firepass",
+        baseURL: "https://firepass.example/v1",
+        apiKey: "sk-key",
+        models: ["fp-large", "fp-small"],
+        defaultModel: "fp-large",
+      },
+    });
+  });
 });

src/tui/components/agent-modal.tsx

@@ -961,6 +961,13 @@ export function AgentModal({
             const isCursor = i === formIndex;
             const value = formValues[field];
             const isKeyless = formValues.keyless === "yes";
+            // gap only between label and value — never between value and caret,
+            // or the caret sits after a phantom space the user did not type.
+            const showCaret =
+              isCursor &&
+              field !== "keyless" &&
+              field !== "bifrostVirtualKey" &&
+              !(field === "apiKey" && isKeyless);
             return (
               <Box key={field} flexDirection="row" gap={1}>
                 <Box width={16} flexShrink={0}>
@@ -977,16 +984,16 @@ export function AgentModal({
                 ) : field === "apiKey" && isKeyless ? (
                   <Text color={color("muted")}>(disabled — keyless provider)</Text>
                 ) : (
-                  <Text color={value.length > 0 ? color("text") : color("muted")}>
-                    {value.length > 0
-                      ? maskInput(field, value)
-                      : field === "apiKey" && editingProvider !== undefined
-                        ? "leave blank to keep existing"
-                        : FIELD_HINTS[field]}
-                  </Text>
-                )}
-                {isCursor && field !== "keyless" && field !== "bifrostVirtualKey" && !(field === "apiKey" && isKeyless) && (
-                  <Text color={color("accent")}>|</Text>
+                  <Box>
+                    <Text color={value.length > 0 ? color("text") : color("muted")}>
+                      {value.length > 0
+                        ? maskInput(field, value)
+                        : field === "apiKey" && editingProvider !== undefined
+                          ? "leave blank to keep existing"
+                          : FIELD_HINTS[field]}
+                    </Text>
+                    {showCaret && <Text color={color("accent")}>|</Text>}
+                  </Box>
                 )}
               </Box>
             );
@@ -1052,12 +1059,12 @@ export function AgentModal({
                     {isCursor ? " >" : ""}
                   </Text>
                 ) : (
-                  <>
+                  <Box>
                     <Text color={profileFormValues[field].length > 0 ? color("text") : color("muted")}>
                       {profileFormValues[field].length > 0 ? profileFormValues[field] : PROFILE_FIELD_HINTS[field]}
                     </Text>
                     {isCursor && <Text color={color("accent")}>|</Text>}
-                  </>
+                  </Box>
                 )}
               </Box>
             );

src/tui/components/codex-login-modal.tsx

@@ -255,10 +255,13 @@ export function CodexLoginModal({
         <Box marginTop={1} flexDirection="column">
           <Box flexDirection="row" gap={1}>
             <Text color={color("muted")}>Profile name</Text>
-            <Text color={nameValue.length > 0 ? color("text") : color("muted")}>
-              {nameValue.length > 0 ? nameValue : "personal, work, ..."}
-            </Text>
-            <Text color={color("accent")}>|</Text>
+            {/* Keep value and caret in one Box so gap does not insert a phantom space. */}
+            <Box>
+              <Text color={nameValue.length > 0 ? color("text") : color("muted")}>
+                {nameValue.length > 0 ? nameValue : "personal, work, ..."}
+              </Text>
+              <Text color={color("accent")}>|</Text>
+            </Box>
           </Box>
           {nameError !== null && (
             <Box marginTop={1}>