From 7a40d08dce9c247717dbf6b02570e60f612d9ac2 Mon Sep 17 00:00:00 2001
From: Rene Turcios <95189389+CloudCorpRecords@users.noreply.github.com>
Date: Thu, 8 Oct 2026 14:00:48 -0700
Subject: [PATCH] refactor(prompts,resources): use shared Field in args forms

Convert PromptArgsForm and ResourceArgsForm per-argument labels to Field,
dropping the hand-rolled required asterisk and sr-only text. Field supplies
aria-required (true/false) and the required announcement via the shared
common.field.required message, so the now-unused *.args.required locale
keys are removed.

Refs IBM/mcp-context-forge#7007

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Signed-off-by: Rene Turcios <95189389+CloudCorpRecords@users.noreply.github.com>
---
 src/components/prompts/PromptArgsForm.tsx     | 44 ++++++++-----------
 src/components/resources/ResourceArgsForm.tsx | 38 ++++++++--------
 src/i18n/locales/en-US/prompts.json           |  1 -
 src/i18n/locales/en-US/resources.json         |  1 -
 src/i18n/locales/es-ES/prompts.json           |  1 -
 src/i18n/locales/es-ES/resources.json         |  1 -
 src/i18n/locales/pt-BR/prompts.json           |  1 -
 src/i18n/locales/pt-BR/resources.json         |  1 -
 8 files changed, 37 insertions(+), 51 deletions(-)

diff --git a/src/components/prompts/PromptArgsForm.tsx b/src/components/prompts/PromptArgsForm.tsx
index 64d7d966..7b8b5ef5 100644
--- a/src/components/prompts/PromptArgsForm.tsx
+++ b/src/components/prompts/PromptArgsForm.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useId, useMemo } from "react";
 import { useIntl } from "react-intl";
 
+import { Field } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import type { PromptArgument } from "@/generated/types";
 
 export interface PromptArgsFormProps {
@@ -76,30 +76,24 @@ export function PromptArgsForm({ args, schema, onChange }: PromptArgsFormProps)
           const fieldId = `${fieldIdPrefix}-${arg.name}`;
           const required = Boolean(arg.required);
           return (
-            <div key={arg.name} className="space-y-1.5">
-              <Label htmlFor={fieldId} className="inline-flex items-center gap-0.5">
-                <span className="font-mono text-[12px] text-foreground">{arg.name}</span>
-                {required && (
-                  <>
-                    <span className="text-red-500" aria-hidden="true">
-                      *
-                    </span>
-                    <span className="sr-only">
-                      {intl.formatMessage({ id: "prompts.details.code.args.required" })}
-                    </span>
-                  </>
-                )}
-              </Label>
-              <Input
-                id={fieldId}
-                value={args[arg.name] ?? ""}
-                onChange={(event) => handleChange(arg.name, event.target.value)}
-                placeholder={toPlaceholder(arg.description)}
-                required={required}
-                aria-required={required}
-                className="placeholder:text-neutral-400 dark:placeholder:text-neutral-500"
-              />
-            </div>
+            <Field
+              key={arg.name}
+              id={fieldId}
+              label={arg.name}
+              required={required}
+              labelProps={{ className: "font-mono text-[12px] text-foreground" }}
+            >
+              {(controlProps) => (
+                <Input
+                  {...controlProps}
+                  value={args[arg.name] ?? ""}
+                  onChange={(event) => handleChange(arg.name, event.target.value)}
+                  placeholder={toPlaceholder(arg.description)}
+                  required={required}
+                  className="placeholder:text-neutral-400 dark:placeholder:text-neutral-500"
+                />
+              )}
+            </Field>
           );
         })}
       </div>
diff --git a/src/components/resources/ResourceArgsForm.tsx b/src/components/resources/ResourceArgsForm.tsx
index 86615594..3d413395 100644
--- a/src/components/resources/ResourceArgsForm.tsx
+++ b/src/components/resources/ResourceArgsForm.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useId } from "react";
 import { useIntl } from "react-intl";
 
+import { Field } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 
 export interface ResourceArgsFormProps {
   args: Record<string, string>;
@@ -43,25 +43,23 @@ export function ResourceArgsForm({ args, placeholders, onChange }: ResourceArgsF
         {placeholders.map((name) => {
           const fieldId = `${fieldIdPrefix}-${name}`;
           return (
-            <div key={name} className="space-y-1.5">
-              <Label htmlFor={fieldId} className="inline-flex items-center gap-0.5">
-                <span className="font-mono text-[12px] text-foreground">{name}</span>
-                <span className="text-red-500" aria-hidden="true">
-                  *
-                </span>
-                <span className="sr-only">
-                  {intl.formatMessage({ id: "resources.details.code.args.required" })}
-                </span>
-              </Label>
-              <Input
-                id={fieldId}
-                value={args[name] ?? ""}
-                onChange={(event) => handleChange(name, event.target.value)}
-                required
-                aria-required
-                className="placeholder:text-neutral-400 dark:placeholder:text-neutral-500"
-              />
-            </div>
+            <Field
+              key={name}
+              id={fieldId}
+              label={name}
+              required
+              labelProps={{ className: "font-mono text-[12px] text-foreground" }}
+            >
+              {(controlProps) => (
+                <Input
+                  {...controlProps}
+                  value={args[name] ?? ""}
+                  onChange={(event) => handleChange(name, event.target.value)}
+                  required
+                  className="placeholder:text-neutral-400 dark:placeholder:text-neutral-500"
+                />
+              )}
+            </Field>
           );
         })}
       </div>
diff --git a/src/i18n/locales/en-US/prompts.json b/src/i18n/locales/en-US/prompts.json
index bde2985e..163e3284 100644
--- a/src/i18n/locales/en-US/prompts.json
+++ b/src/i18n/locales/en-US/prompts.json
@@ -13,7 +13,6 @@
   "prompts.card.activateAriaLabel": "Activate {name}",
   "prompts.card.deactivateAriaLabel": "Deactivate {name}",
   "prompts.details.code.args.heading": "Arguments",
-  "prompts.details.code.args.required": "Required",
   "prompts.details.code.tab.curl": "curl",
   "prompts.details.code.tab.jsonRpc": "JSON-RPC",
   "prompts.details.code.tab.python": "Python",
diff --git a/src/i18n/locales/en-US/resources.json b/src/i18n/locales/en-US/resources.json
index 9092264c..017f4684 100644
--- a/src/i18n/locales/en-US/resources.json
+++ b/src/i18n/locales/en-US/resources.json
@@ -78,7 +78,6 @@
   "resources.details.resourcePreview": "Resource preview",
   "resources.details.selectResource": "Select resource",
   "resources.details.code.args.heading": "Arguments",
-  "resources.details.code.args.required": "Required",
   "resources.details.code.tab.curl": "curl",
   "resources.details.code.tab.jsonRpc": "JSON-RPC",
   "resources.details.code.tab.python": "Python",
diff --git a/src/i18n/locales/es-ES/prompts.json b/src/i18n/locales/es-ES/prompts.json
index b23871da..a372d71e 100644
--- a/src/i18n/locales/es-ES/prompts.json
+++ b/src/i18n/locales/es-ES/prompts.json
@@ -13,7 +13,6 @@
   "prompts.card.activateAriaLabel": "Activar {name}",
   "prompts.card.deactivateAriaLabel": "Desactivar {name}",
   "prompts.details.code.args.heading": "Argumentos",
-  "prompts.details.code.args.required": "Requerido",
   "prompts.details.code.tab.curl": "curl",
   "prompts.details.code.tab.jsonRpc": "JSON-RPC",
   "prompts.details.code.tab.python": "Python",
diff --git a/src/i18n/locales/es-ES/resources.json b/src/i18n/locales/es-ES/resources.json
index dcc34df4..b219e423 100644
--- a/src/i18n/locales/es-ES/resources.json
+++ b/src/i18n/locales/es-ES/resources.json
@@ -78,7 +78,6 @@
   "resources.details.resourcePreview": "Vista previa del recurso",
   "resources.details.selectResource": "Seleccionar recurso",
   "resources.details.code.args.heading": "Argumentos",
-  "resources.details.code.args.required": "Requerido",
   "resources.details.code.tab.curl": "curl",
   "resources.details.code.tab.jsonRpc": "JSON-RPC",
   "resources.details.code.tab.python": "Python",
diff --git a/src/i18n/locales/pt-BR/prompts.json b/src/i18n/locales/pt-BR/prompts.json
index 5073c38e..af8aacc3 100644
--- a/src/i18n/locales/pt-BR/prompts.json
+++ b/src/i18n/locales/pt-BR/prompts.json
@@ -13,7 +13,6 @@
   "prompts.card.activateAriaLabel": "Ativar {name}",
   "prompts.card.deactivateAriaLabel": "Desativar {name}",
   "prompts.details.code.args.heading": "Argumentos",
-  "prompts.details.code.args.required": "Obrigatório",
   "prompts.details.code.tab.curl": "curl",
   "prompts.details.code.tab.jsonRpc": "JSON-RPC",
   "prompts.details.code.tab.python": "Python",
diff --git a/src/i18n/locales/pt-BR/resources.json b/src/i18n/locales/pt-BR/resources.json
index 2de4eb45..f08dc8b5 100644
--- a/src/i18n/locales/pt-BR/resources.json
+++ b/src/i18n/locales/pt-BR/resources.json
@@ -78,7 +78,6 @@
   "resources.details.resourcePreview": "Pré-visualização do recurso",
   "resources.details.selectResource": "Selecionar recurso",
   "resources.details.code.args.heading": "Argumentos",
-  "resources.details.code.args.required": "Obrigatório",
   "resources.details.code.tab.curl": "curl",
   "resources.details.code.tab.jsonRpc": "JSON-RPC",
   "resources.details.code.tab.python": "Python",