From c2b75bf96121d8fc83f762c451f07aedb94f0ff2 Mon Sep 17 00:00:00 2001
From: vsxd <sun.xd@hotmail.com>
Date: Fri, 13 Mar 2026 14:44:28 +0800
Subject: [PATCH] Refine skill install command layout

---
 web/src/features/skill/install-command.tsx | 37 +++++++++++++++++++---
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/web/src/features/skill/install-command.tsx b/web/src/features/skill/install-command.tsx
index 2c2157d4..12a18a32 100644
--- a/web/src/features/skill/install-command.tsx
+++ b/web/src/features/skill/install-command.tsx
@@ -1,4 +1,7 @@
-import { CopyButton } from '@/shared/components/copy-button'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Check, Copy } from 'lucide-react'
+import { Button } from '@/shared/ui/button'
 
 interface InstallCommandProps {
   namespace: string
@@ -7,14 +10,40 @@ interface InstallCommandProps {
 }
 
 export function InstallCommand({ namespace, slug, version }: InstallCommandProps) {
+  const { t } = useTranslation()
+  const [copied, setCopied] = useState(false)
   const command = version
     ? `skillhub install ${namespace}/${slug}@${version}`
     : `skillhub install ${namespace}/${slug}`
 
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(command)
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+
   return (
-    <div className="flex items-center gap-2 p-3 bg-muted rounded-lg">
-      <code className="flex-1 text-sm font-mono">{command}</code>
-      <CopyButton text={command} />
+    <div className="relative overflow-hidden rounded-xl border border-border/60 bg-muted/50">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        onClick={handleCopy}
+        title={copied ? t('copyButton.copied') : t('copyButton.copy')}
+        aria-label={copied ? t('copyButton.copied') : t('copyButton.copy')}
+        className="absolute right-2 top-2 z-10 h-8 w-8 rounded-md bg-background/80 backdrop-blur hover:bg-background"
+      >
+        {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+      </Button>
+      <pre className="p-4 pr-14 whitespace-pre-wrap break-words">
+        <code className="font-mono text-sm leading-6 text-foreground whitespace-pre-wrap break-words">
+          {command}
+        </code>
+      </pre>
     </div>
   )
 }