feat: improve UI

apps/landing/src/components/demo/ResultCard.tsx

@@ -289,6 +289,17 @@ function ImagePreview({
   filename: string;
   hasEnhancementOptions?: boolean;
 }) {
+  const [promptExpanded, setPromptExpanded] = useState(false);
+  const [urlCopied, setUrlCopied] = useState(false);
+
+  const copyImageUrl = () => {
+    if (image?.url) {
+      navigator.clipboard.writeText(image.url);
+      setUrlCopied(true);
+      setTimeout(() => setUrlCopied(false), 2000);
+    }
+  };
+
   return (
     <div className="flex-shrink-0">
       <div className="mb-2 flex items-center justify-between gap-2">
@@ -311,29 +322,62 @@ function ImagePreview({
         </div>
       ) : (
         image && (
-          <div className="relative group cursor-pointer">
+          <>
-            <img
+            <div className="relative group cursor-pointer">
-              src={image.url}
+              <img
-              alt={label}
+                src={image.url}
-              className="h-96 w-auto object-contain rounded-lg border border-slate-700"
+                alt={label}
-              onClick={() => onZoom(image.url)}
+                className="h-96 w-auto object-contain rounded-lg border border-slate-700"
-            />
+                onClick={() => onZoom(image.url)}
-            <button
+              />
-              onClick={(e) => {
+              <button
-                e.stopPropagation();
+                onClick={(e) => {
-                onDownload(image.url, filename);
+                  e.stopPropagation();
-              }}
+                  onDownload(image.url, filename);
-              className="absolute top-2 right-2 px-3 py-1.5 bg-black/70 hover:bg-black/90 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
+                }}
-              aria-label={`Download ${label}`}
+                className="absolute top-2 right-2 px-3 py-1.5 bg-black/70 hover:bg-black/90 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
-            >
+                aria-label={`Download ${label}`}
-              Download
+              >
-            </button>
+                Download
-          </div>
+              </button>
+            </div>
+
+            {/* Image URL with Copy Button */}
+            <div className="mt-2 flex items-center gap-2 max-w-sm">
+              <div className="flex-1 px-2 py-1 bg-slate-800/50 border border-slate-700 rounded text-xs text-gray-400 font-mono truncate">
+                {image.url}
+              </div>
+              <button
+                onClick={copyImageUrl}
+                className="px-2 py-1 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded text-xs text-gray-300 hover:text-white transition-colors whitespace-nowrap"
+                aria-label="Copy image URL"
+              >
+                {urlCopied ? '✓ Copied' : 'Copy URL'}
+              </button>
+            </div>
+          </>
         )
       )}
 
+      {/* Prompt with Truncation */}
       <div className="mt-2 flex items-start gap-2 max-w-sm">
-        <p className="flex-1 text-sm text-gray-300 leading-relaxed">{prompt}</p>
+        <div className="flex-1">
+          <p
+            className={`text-sm text-gray-300 leading-relaxed ${
+              !promptExpanded ? 'line-clamp-4' : ''
+            }`}
+          >
+            {prompt}
+          </p>
+          {prompt.length > 150 && (
+            <button
+              onClick={() => setPromptExpanded(!promptExpanded)}
+              className="mt-1 text-xs text-amber-400 hover:text-amber-300 transition-colors"
+            >
+              {promptExpanded ? 'Show less' : 'Show more...'}
+            </button>
+          )}
+        </div>
         <PromptReuseButton prompt={prompt} onReuse={onReusePrompt} label={label} />
       </div>
     </div>