Fix DB schema (#135)

src/components/CreateCustomModelDialog.tsx

@@ -27,8 +27,8 @@ export function CreateCustomModelDialog({
   onSuccess,
   providerId,
 }: CreateCustomModelDialogProps) {
-  const [id, setId] = useState("");
-  const [name, setName] = useState("");
+  const [apiName, setApiName] = useState("");
+  const [displayName, setDisplayName] = useState("");
   const [description, setDescription] = useState("");
   const [maxOutputTokens, setMaxOutputTokens] = useState<string>("");
   const [contextWindow, setContextWindow] = useState<string>("");
@@ -38,8 +38,8 @@ export function CreateCustomModelDialog({
   const mutation = useMutation({
     mutationFn: async () => {
       const params = {
-        id,
-        name,
+        apiName,
+        displayName,
         providerId,
         description: description || undefined,
         maxOutputTokens: maxOutputTokens
@@ -48,8 +48,9 @@ export function CreateCustomModelDialog({
         contextWindow: contextWindow ? parseInt(contextWindow, 10) : undefined,
       };
 
-      if (!params.id) throw new Error("Model ID is required");
-      if (!params.name) throw new Error("Model Name is required");
+      if (!params.apiName) throw new Error("Model API name is required");
+      if (!params.displayName)
+        throw new Error("Model display name is required");
       if (maxOutputTokens && isNaN(params.maxOutputTokens ?? NaN))
         throw new Error("Max Output Tokens must be a valid number");
       if (contextWindow && isNaN(params.contextWindow ?? NaN))
@@ -69,8 +70,8 @@ export function CreateCustomModelDialog({
   });
 
   const resetForm = () => {
-    setId("");
-    setName("");
+    setApiName("");
+    setDisplayName("");
     setDescription("");
     setMaxOutputTokens("");
     setContextWindow("");
@@ -105,9 +106,9 @@ export function CreateCustomModelDialog({
               </Label>
               <Input
                 id="model-id"
-                value={id}
+                value={apiName}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setId(e.target.value)
+                  setApiName(e.target.value)
                 }
                 className="col-span-3"
                 placeholder="This must match the model expected by the API"
@@ -121,9 +122,9 @@ export function CreateCustomModelDialog({
               </Label>
               <Input
                 id="model-name"
-                value={name}
+                value={displayName}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setName(e.target.value)
+                  setDisplayName(e.target.value)
                 }
                 className="col-span-3"
                 placeholder="Human-friendly name for the model"

src/components/settings/ModelsSection.tsx

@@ -46,7 +46,7 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
         <div className="mt-4 space-y-3">
           {models.map((model) => (
             <div
-              key={model.name}
+              key={model.apiName}
               className="p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm"
             >
               <div className="flex justify-between items-center">
@@ -56,7 +56,7 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
                 {/* Optional: Add an edit/delete button here later */}
               </div>
               <p className="text-sm text-gray-500 dark:text-gray-400 italic">
-                {model.name}
+                {model.apiName}
               </p>
               {model.description && (
                 <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">