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,6 +322,7 @@ function ImagePreview({
         </div>
       ) : (
         image && (
+          <>
             <div className="relative group cursor-pointer">
               <img
                 src={image.url}
@@ -329,11 +341,43 @@ function ImagePreview({
                 Download
               </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>