refactor: update skill installation commands to use pnpm

- Changed all instances of 'npx' to 'pnpm dlx' for skill installation commands in tests and workflow functions.
- Updated viewport height calculation in EditorLayout to use the correct variable.
- Simplified runtime state initialization in SkillsInterface by using a constant for skill IDs.

Author: BunsDev

__tests__/skills-workflow.test.ts

@@ -11,17 +11,19 @@ describe('skills workflow', () => {
   it('seeds the bundled catalog with superpowers plus find-skills', () => {
     expect(SKILLS_CATALOG).toHaveLength(15)
     expect(getSkillBySlug('brainstorming')?.installCommand).toBe(
-      'npx skills add https://github.com/obra/superpowers --skill brainstorming -g -y',
+      'pnpm dlx skills add https://github.com/obra/superpowers --skill brainstorming -g -y',
     )
     expect(getSkillBySlug('find-skills')?.installCommand).toBe(
-      'npx skills add https://github.com/vercel-labs/skills --skill find-skills -g -y',
+      'pnpm dlx skills add https://github.com/vercel-labs/skills --skill find-skills -g -y',
     )
   })
 
   it('quotes ecosystem search queries for shell execution', () => {
-    expect(buildSkillsFindCommand('react performance')).toBe("npx skills find 'react performance'")
+    expect(buildSkillsFindCommand('react performance')).toBe(
+      "pnpm dlx skills find 'react performance'",
+    )
     expect(buildSkillsFindCommand("author's workflow")).toBe(
-      "npx skills find 'author'\\''s workflow'",
+      "pnpm dlx skills find 'author'\\''s workflow'",
     )
   })
 
@@ -52,15 +54,16 @@ describe('skills workflow', () => {
     expect(installPlan).toMatchObject({
       kind: 'install',
       target: 'terminal',
-      command: 'npx skills add https://github.com/obra/superpowers --skill brainstorming -g -y',
+      command:
+        'pnpm dlx skills add https://github.com/obra/superpowers --skill brainstorming -g -y',
     })
 
     const findPlan = buildExecutionPlan(
       { kind: 'find', query: 'react performance' },
       { preferTerminal: false },
     )
     expect(findPlan?.target).toBe('gateway-chat')
-    expect(findPlan?.message).toContain("npx skills find 'react performance'")
+    expect(findPlan?.message).toContain("pnpm dlx skills find 'react performance'")
   })
 
   it('hydrates runtime state with defaults for every bundled skill', () => {

app/page.tsx

@@ -120,6 +120,7 @@ export default function EditorLayout() {
   const terminalVisible = layout.isVisible('terminal')
   const terminalHeight = layout.getSize('terminal')
   const terminalFloating = layout.isFloating('terminal')
+  const viewportHeight = layout.viewport.height
   const terminalRefreshToken = mode
   const terminalStartupCommand = modeSpec.terminalCenter ? 'openclaw tui' : undefined
 
@@ -654,7 +655,7 @@ export default function EditorLayout() {
                     {
                       '--height': Math.min(
                         Math.max(terminalHeight, 260),
-                        Math.floor(window.innerHeight * 0.72),
+                        Math.floor(viewportHeight * 0.72),
                       ),
                     } as React.CSSProperties
                   }

components/skills/skills-interface.tsx

@@ -26,6 +26,8 @@ import {
   parseSkillSlashCommand,
 } from '@/lib/skills/workflow'
 
+const SKILL_IDS = SKILLS_CATALOG.map((skill) => skill.id)
+
 interface SkillsInterfaceProps {
   variant?: 'page' | 'settings'
 }
@@ -53,10 +55,7 @@ export function SkillsInterface({ variant = 'page' }: SkillsInterfaceProps) {
   const [actionNote, setActionNote] = useState<string | null>(null)
   const [busyAction, setBusyAction] = useState<string | null>(null)
   const [runtimeState, setRuntimeState] = useState<SkillsRuntimeMap>(() =>
-    mergeRuntimeState(
-      SKILLS_CATALOG.map((skill) => skill.id),
-      loadStoredRuntimeState(),
-    ),
+    mergeRuntimeState(SKILL_IDS, loadStoredRuntimeState()),
   )
   const [composer, setComposer] = useState<{ skillId: string | null; request: string }>({
     skillId: null,
@@ -70,12 +69,7 @@ export function SkillsInterface({ variant = 'page' }: SkillsInterfaceProps) {
   }, [runtimeState])
 
   const refreshState = useCallback(() => {
-    setRuntimeState(
-      mergeRuntimeState(
-        SKILLS_CATALOG.map((skill) => skill.id),
-        loadStoredRuntimeState(),
-      ),
-    )
+    setRuntimeState(mergeRuntimeState(SKILL_IDS, loadStoredRuntimeState()))
     setActionNote('Refreshed local skill state.')
   }, [])
 

lib/skills/catalog.ts

@@ -6,7 +6,7 @@ const VERCEL_SKILLS_REPO_URL = 'https://github.com/vercel-labs/skills'
 const VERCEL_SKILLS_PAGE_URL = 'https://skills.sh/vercel-labs/skills'
 
 function buildRepoInstallCommand(repoUrl: string, skillSlug: string): string {
-  return `npx skills add ${repoUrl} --skill ${skillSlug} -g -y`
+  return `pnpm dlx skills add ${repoUrl} --skill ${skillSlug} -g -y`
 }
 
 function superpower(

lib/skills/workflow.ts

@@ -8,6 +8,7 @@ import type {
 } from '@/lib/skills/types'
 
 export const SKILLS_RUNTIME_STORAGE_KEY = 'knot-code:skills:runtime'
+const SKILLS_CLI = 'pnpm dlx skills'
 
 function escapeSingleQuotes(value: string): string {
   return value.replace(/'/g, `'\\''`)
@@ -19,15 +20,15 @@ export function shellQuote(value: string): string {
 }
 
 export function buildSkillsFindCommand(query: string): string {
-  return `npx skills find ${shellQuote(query.trim())}`
+  return `${SKILLS_CLI} find ${shellQuote(query.trim())}`
 }
 
 export function buildSkillsCheckCommand(): string {
-  return 'npx skills check'
+  return `${SKILLS_CLI} check`
 }
 
 export function buildSkillsUpdateCommand(): string {
-  return 'npx skills update'
+  return `${SKILLS_CLI} update`
 }
 
 export function buildSkillInstallCommand(skill: SkillCatalogItem): string {