From c6fa73c2d28aad3f4f7be2e76df767864dd024fa Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 5 Feb 2026 13:04:18 +0530
Subject: [PATCH 1/5] fix(a11y): make buttons always visible | fix(ui): make
 borders visible

---
 app/components/Terminal/Execute.vue | 2 +-
 app/components/Terminal/Install.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index 0484ef646..19de1bcec 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -70,7 +70,7 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/executecmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70"
+            class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyExecuteCommand"
           >
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index b03a5d6fa..2d99e8605 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -123,7 +123,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/installcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
+            class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyInstallCommand"
           >
@@ -185,7 +185,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/runcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
+              class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
             >
               {{ runCopied ? $t('common.copied') : $t('common.copy') }}
@@ -230,7 +230,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/createcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
+              class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
               :aria-label="$t('package.create.copy_command')"
               @click.stop="copyCreateCommand"
             >

From 8cd1020608a6f7dc43d95ae562483af3981e274b Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 5 Feb 2026 13:04:58 +0530
Subject: [PATCH 2/5] test: update tests for copy command

---
 test/e2e/create-command.spec.ts | 27 ++++-----------------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/test/e2e/create-command.spec.ts b/test/e2e/create-command.spec.ts
index 15f00ee4c..07dd1d16d 100644
--- a/test/e2e/create-command.spec.ts
+++ b/test/e2e/create-command.spec.ts
@@ -62,7 +62,7 @@ test.describe('Create Command', () => {
   })
 
   test.describe('Copy Functionality', () => {
-    test('hovering create command shows copy button', async ({ page, goto }) => {
+    test('copy button is always visible', async ({ page, goto }) => {
       await goto('/package/vite', { waitUntil: 'hydration' })
 
       await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
@@ -75,14 +75,8 @@ test.describe('Create Command', () => {
       const createCommandContainer = page.locator('.group\\/createcmd').first()
       await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
 
-      // Copy button should initially be hidden (opacity-0)
+      // Copy button should always be visible
       const copyButton = createCommandContainer.locator('button')
-      await expect(copyButton).toHaveCSS('opacity', '0')
-
-      // Hover over the container
-      await createCommandContainer.hover()
-
-      // Copy button should become visible
       await expect(copyButton).toHaveCSS('opacity', '1')
     })
 
@@ -104,9 +98,6 @@ test.describe('Create Command', () => {
       const createCommandContainer = page.locator('.group\\/createcmd').first()
       await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
 
-      await createCommandContainer.hover()
-
-      // Click the copy button
       const copyButton = createCommandContainer.locator('button')
       await copyButton.click()
 
@@ -123,21 +114,15 @@ test.describe('Create Command', () => {
   })
 
   test.describe('Install Command Copy', () => {
-    test('hovering install command shows copy button', async ({ page, goto }) => {
+    test('copy button is always visible', async ({ page, goto }) => {
       await goto('/package/is-odd', { waitUntil: 'hydration' })
 
       // Find the install command container
       const installCommandContainer = page.locator('.group\\/installcmd').first()
       await expect(installCommandContainer).toBeVisible()
 
-      // Copy button should initially be hidden
+      // Copy button should always be visible
       const copyButton = installCommandContainer.locator('button')
-      await expect(copyButton).toHaveCSS('opacity', '0')
-
-      // Hover over the container
-      await installCommandContainer.hover()
-
-      // Copy button should become visible
       await expect(copyButton).toHaveCSS('opacity', '1')
     })
 
@@ -151,11 +136,7 @@ test.describe('Create Command', () => {
 
       await goto('/package/is-odd', { waitUntil: 'hydration' })
 
-      // Find and hover over the install command container
       const installCommandContainer = page.locator('.group\\/installcmd').first()
-      await installCommandContainer.hover()
-
-      // Click the copy button
       const copyButton = installCommandContainer.locator('button')
       await copyButton.click()
 

From 1af51fb1b1d8015093ac815f5f94d942880e1705 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 5 Feb 2026 13:10:25 +0530
Subject: [PATCH 3/5] test: add missing run command tests

---
 test/e2e/create-command.spec.ts | 52 +++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/test/e2e/create-command.spec.ts b/test/e2e/create-command.spec.ts
index 07dd1d16d..ad9e6721d 100644
--- a/test/e2e/create-command.spec.ts
+++ b/test/e2e/create-command.spec.ts
@@ -151,4 +151,56 @@ test.describe('Create Command', () => {
       await expect(copyButton).not.toContainText(/copied/i)
     })
   })
+
+  test.describe('Run Command Copy', () => {
+    test('copy button is always visible', async ({ page, goto }) => {
+      await goto('/package/vite', { waitUntil: 'hydration' })
+
+      await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
+
+      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
+        timeout: 15000,
+      })
+
+      // Find the run command container
+      const runCommandContainer = page.locator('.group\\/runcmd').first()
+      await expect(runCommandContainer).toBeVisible({ timeout: 20000 })
+
+      // Copy button should always be visible
+      const copyButton = runCommandContainer.locator('button')
+      await expect(copyButton).toHaveCSS('opacity', '1')
+    })
+
+    test('clicking copy button copies run command and shows confirmation', async ({
+      page,
+      goto,
+      context,
+    }) => {
+      // Grant clipboard permissions
+      await context.grantPermissions(['clipboard-read', 'clipboard-write'])
+
+      await goto('/package/vite', { waitUntil: 'hydration' })
+      await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
+
+      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
+        timeout: 15000,
+      })
+
+      const runCommandContainer = page.locator('.group\\/runcmd').first()
+      await expect(runCommandContainer).toBeVisible({ timeout: 20000 })
+
+      const copyButton = runCommandContainer.locator('button')
+      await copyButton.click()
+
+      // Button text should change to "copied!"
+      await expect(copyButton).toContainText(/copied/i)
+
+      // Verify clipboard content contains the run command
+      const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
+      expect(clipboardContent).toMatch(/vite|npx vite/i)
+
+      await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
+      await expect(copyButton).not.toContainText(/copied/i)
+    })
+  })
 })

From d1a916bed627452af3eb2578519fd7951bb49d66 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 5 Feb 2026 14:00:37 +0530
Subject: [PATCH 4/5] fix(a11y): make copy button always visible

---
 app/components/Package/SkillsModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 8261e378b..cd083b54a 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -133,7 +133,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           </code>
           <button
             type="button"
-            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/cmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70"
+            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyCommand"
           >

From 17c4dd8eaf4fb7643c3f76ea63bfccf0607e17b8 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Thu, 5 Feb 2026 14:06:59 +0530
Subject: [PATCH 5/5] fix(test): exact match the npx command

---
 test/e2e/create-command.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/create-command.spec.ts b/test/e2e/create-command.spec.ts
index ad9e6721d..7b7163fed 100644
--- a/test/e2e/create-command.spec.ts
+++ b/test/e2e/create-command.spec.ts
@@ -197,7 +197,7 @@ test.describe('Create Command', () => {
 
       // Verify clipboard content contains the run command
       const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
-      expect(clipboardContent).toMatch(/vite|npx vite/i)
+      expect(clipboardContent).toMatch(/npx vite/i)
 
       await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
       await expect(copyButton).not.toContainText(/copied/i)