update

frontend/src/pages/APIKeys.jsx

@@ -277,21 +277,60 @@ export default function APIKeys() {
                         )}
                       </div>
                       <div className="ml-8 space-y-2">
-                        <div className="flex items-center gap-2 text-sm text-slate-500">
-                          <span className="font-mono">{key.key_prefix}</span>
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            onClick={() => toggleKeyVisibility(key.id)}
-                            className="h-6 px-2"
-                          >
-                            {visibleKeys.has(key.id) ? (
-                              <EyeOff className="h-3 w-3" />
-                            ) : (
-                              <Eye className="h-3 w-3" />
-                            )}
-                          </Button>
+                        <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-2 flex-1 min-w-0">
+                            <span className="font-mono text-sm text-slate-500 break-all">
+                              {key.key_prefix}
+                            </span>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              onClick={() => copyToClipboard(key.key_prefix, key.id)}
+                              className="h-6 px-2 flex-shrink-0"
+                              title="Copy prefix"
+                            >
+                              {copiedKeyId === key.id ? (
+                                <Check className="h-3 w-3 text-emerald-600" />
+                              ) : (
+                                <Copy className="h-3 w-3" />
+                              )}
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              onClick={() => toggleKeyVisibility(key.id)}
+                              className="h-6 px-2 flex-shrink-0"
+                              title={visibleKeys.has(key.id) ? "Hide info" : "Show info"}
+                            >
+                              {visibleKeys.has(key.id) ? (
+                                <EyeOff className="h-3 w-3" />
+                              ) : (
+                                <Eye className="h-3 w-3" />
+                              )}
+                            </Button>
+                          </div>
                         </div>
+                        {visibleKeys.has(key.id) && (
+                          <motion.div
+                            initial={{ opacity: 0, height: 0 }}
+                            animate={{ opacity: 1, height: "auto" }}
+                            exit={{ opacity: 0, height: 0 }}
+                            className="mt-2 p-3 bg-amber-50 border border-amber-200 rounded-lg"
+                          >
+                            <div className="flex items-start gap-2">
+                              <AlertCircle className="h-4 w-4 text-amber-600 flex-shrink-0 mt-0.5" />
+                              <div className="flex-1">
+                                <p className="text-xs text-amber-800 font-medium mb-1">
+                                  Full API Key Not Available
+                                </p>
+                                <p className="text-xs text-amber-700">
+                                  For security reasons, the full API key is only shown once when it's created. 
+                                  Only the prefix is stored. If you need the full key, create a new one.
+                                </p>
+                              </div>
+                            </div>
+                          </motion.div>
+                        )}
                         <div className="flex items-center gap-4 text-xs text-slate-400">
                           <div className="flex items-center gap-1">
                             <Clock className="h-3 w-3" />