@gustavobrunodev/ai-tools 1.0.1 → 1.1.0

package/src/components/StatusBadge.tsx

@@ -0,0 +1,45 @@
+import { Box, Text } from 'ink'
+
+import { colors } from '../theme/colors'
+import { symbols } from '../theme/symbols'
+
+export type StatusType = 'installed' | 'update' | 'new' | 'deprecated'
+
+export interface StatusBadgeProps {
+  status: StatusType
+}
+
+const badgeConfig = {
+  installed: { icon: symbols.check, label: 'installed', color: colors.success, bg: '#052e16' },
+  update: { icon: symbols.arrowUp, label: 'update', color: colors.warning, bg: '#422006' },
+  new: { icon: symbols.sparkle, label: 'new', color: colors.accent, bg: '#083344' },
+  deprecated: { icon: symbols.warning, label: 'deprecated', color: colors.warning, bg: '#422006' },
+} as const
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+  const config = badgeConfig[status]
+  if (!config) return null
+
+  return (
+    <Box>
+      <Text backgroundColor={config.bg} color={config.color}>
+        {' '}
+        {config.icon} {config.label}{' '}
+      </Text>
+    </Box>
+  )
+}
+
+export interface AgentBadgeProps {
+  agents: string[]
+}
+
+export function AgentBadge({ agents }: AgentBadgeProps) {
+  if (!agents || agents.length === 0) return null
+
+  return (
+    <Text color={colors.textDim}>
+      <Text color={colors.success}>{symbols.check}</Text> {agents.join(', ')}
+    </Text>
+  )
+}

package/src/components/__tests__/AnimatedTransition.pbt.test.tsx

@@ -0,0 +1,51 @@
+/** @jest-environment jsdom */
+import { afterEach, beforeEach, describe, expect, it, jest } from '@jest/globals'
+import { act, render } from '@testing-library/react'
+import * as fc from 'fast-check'
+
+import { AnimatedTransition } from '../AnimatedTransition'
+
+jest.mock('ink', () => ({
+  Transform: jest.fn(({ transform }) => {
+    const output = transform ? transform('child content') : 'child content'
+    return <div data-testid="ink-transform">{output}</div>
+  }),
+}))
+
+describe('AnimatedTransition - Property-Based Tests', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+    jest.useRealTimers()
+  })
+
+  it('should eventually render empty or full content based on final visibility for ANY duration', () => {
+    fc.assert(
+      fc.property(fc.boolean(), fc.integer({ min: -100, max: 10000 }), (isVisible, duration) => {
+        const { unmount, container } = render(
+          <AnimatedTransition visible={isVisible} duration={duration}>
+            <span>child</span>
+          </AnimatedTransition>,
+        )
+
+        const waitTime = Math.max(duration, 0) + 100
+
+        act(() => {
+          jest.advanceTimersByTime(waitTime)
+        })
+
+        if (isVisible) {
+          expect(container.textContent).toContain('child')
+        } else {
+          expect(container.innerHTML).toBe('')
+        }
+
+        unmount()
+      }),
+      { numRuns: 100 },
+    )
+  })
+})

package/src/components/__tests__/CategoryHeader.pbt.test.tsx

@@ -0,0 +1,107 @@
+/** @jest-environment jsdom */
+import { render } from '@testing-library/react'
+import * as fc from 'fast-check'
+
+import { CategoryHeader } from '../CategoryHeader'
+
+jest.mock('../../services/badge-format', () => ({
+  formatCategoryBadge: (installed: number, total: number) => (installed > 0 ? `(${installed}/${total})` : `(${total})`),
+}))
+
+jest.mock('../../services/category-colors', () => ({
+  getColorForCategory: () => '#64748b',
+}))
+
+jest.mock('../../theme', () => ({
+  colors: {
+    accent: '#06b6d4',
+    primaryLight: '#60a5fa',
+    text: '#f8fafc',
+    textMuted: '#64748b',
+    textDim: '#94a3b8',
+    success: '#22c55e',
+  },
+  symbols: {
+    bullet: '\u25B8',
+    dot: '\u00B7',
+  },
+}))
+
+jest.mock('ink', () => ({
+  Box: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => {
+    const { flexDirection, width, marginTop, marginBottom, ...validProps } = props
+    void flexDirection
+    void width
+    void marginTop
+    void marginBottom
+    return (
+      <div data-testid="box" {...validProps}>
+        {children}
+      </div>
+    )
+  },
+  Text: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => {
+    const { bold, underline, ...validProps } = props
+    void bold
+    void underline
+    return (
+      <span data-testid="text" {...validProps}>
+        {children}
+      </span>
+    )
+  },
+}))
+
+describe('CategoryHeader property tests', () => {
+  it('should display correct badge format for any valid skill counts', () => {
+    fc.assert(
+      fc.property(fc.nat({ max: 100 }), fc.nat({ max: 100 }), (installed, total) => {
+        const validInstalled = Math.min(installed, total)
+        const { container, unmount } = render(
+          <CategoryHeader name="Test" totalCount={total} installedCount={validInstalled} />,
+        )
+        const text = container.textContent ?? ''
+
+        if (validInstalled > 0) {
+          expect(text).toContain(`(${validInstalled}/${total})`)
+        } else {
+          expect(text).toContain(`(${total})`)
+        }
+        unmount()
+      }),
+      { numRuns: 200 },
+    )
+  })
+
+  it('should update badge immediately when installed count changes', () => {
+    fc.assert(
+      fc.property(fc.nat({ max: 50 }), fc.nat({ max: 50 }), (countA, countB) => {
+        const total = 50
+        const installedA = Math.min(countA, total)
+        const installedB = Math.min(countB, total)
+
+        const { container, rerender, unmount } = render(
+          <CategoryHeader name="Test" totalCount={total} installedCount={installedA} />,
+        )
+
+        const textBefore = container.textContent ?? ''
+        if (installedA > 0) {
+          expect(textBefore).toContain(`(${installedA}/${total})`)
+        } else {
+          expect(textBefore).toContain(`(${total})`)
+        }
+
+        rerender(<CategoryHeader name="Test" totalCount={total} installedCount={installedB} />)
+
+        const textAfter = container.textContent ?? ''
+        if (installedB > 0) {
+          expect(textAfter).toContain(`(${installedB}/${total})`)
+        } else {
+          expect(textAfter).toContain(`(${total})`)
+        }
+        unmount()
+      }),
+      { numRuns: 200 },
+    )
+  })
+})

package/src/components/__tests__/CategoryHeader.test.tsx

@@ -0,0 +1,105 @@
+/** @jest-environment jsdom */
+import { render, screen } from '@testing-library/react'
+
+import { CategoryHeader } from '../CategoryHeader'
+
+jest.mock('../../services/badge-format', () => ({
+  formatCategoryBadge: (installed: number, total: number) => (installed > 0 ? `(${installed}/${total})` : `(${total})`),
+}))
+
+jest.mock('../../services/category-colors', () => ({
+  getColorForCategory: (id: string) => (id === 'web' ? '#3b82f6' : '#64748b'),
+}))
+
+jest.mock('../../theme', () => ({
+  colors: {
+    accent: '#06b6d4',
+    primaryLight: '#60a5fa',
+    text: '#f8fafc',
+    textMuted: '#64748b',
+    textDim: '#94a3b8',
+    success: '#22c55e',
+  },
+  symbols: {
+    bullet: '\u25B8',
+    dot: '\u00B7',
+  },
+}))
+
+jest.mock('ink', () => ({
+  Box: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => {
+    const { flexDirection, width, marginTop, marginBottom, ...validProps } = props
+    void flexDirection
+    void width
+    void marginTop
+    void marginBottom
+    return (
+      <div data-testid="box" {...validProps}>
+        {children}
+      </div>
+    )
+  },
+  Text: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => {
+    const { bold, underline, ...validProps } = props
+    void bold
+    void underline
+    return (
+      <span data-testid="text" {...validProps}>
+        {children}
+      </span>
+    )
+  },
+}))
+
+describe('CategoryHeader', () => {
+  it('renders category name', () => {
+    render(<CategoryHeader name="Web" totalCount={5} />)
+    expect(screen.getByText('Web')).toBeTruthy()
+  })
+
+  it('displays badge with total only when no installed skills', () => {
+    const { container } = render(<CategoryHeader name="Web" totalCount={8} installedCount={0} />)
+    expect(container.textContent).toContain('(8)')
+    expect(container.textContent).not.toContain('/')
+  })
+
+  it('displays badge with installed/total when skills are installed', () => {
+    const { container } = render(<CategoryHeader name="Web" totalCount={8} installedCount={3} />)
+    expect(container.textContent).toContain('(3/8)')
+  })
+
+  it('shows expand hint when collapsed and focused', () => {
+    const { container } = render(<CategoryHeader name="Web" totalCount={5} isExpanded={false} isFocused={true} />)
+    expect(container.textContent).toContain('press space to expand')
+  })
+
+  it('hides expand hint when expanded', () => {
+    const { container } = render(<CategoryHeader name="Web" totalCount={5} isExpanded={true} isFocused={true} />)
+    expect(container.textContent).not.toContain('press space to expand')
+  })
+
+  it('hides expand hint when not focused', () => {
+    const { container } = render(<CategoryHeader name="Web" totalCount={5} isExpanded={false} isFocused={false} />)
+    expect(container.textContent).not.toContain('press space to expand')
+  })
+
+  it('shows collapsed chevron when not expanded', () => {
+    const { container } = render(<CategoryHeader name="Web" totalCount={5} isExpanded={false} />)
+    expect(container.textContent).toContain('\u25B8')
+  })
+
+  it('shows expanded chevron when expanded', () => {
+    const { container } = render(<CategoryHeader name="Web" totalCount={5} isExpanded={true} />)
+    expect(container.textContent).toContain('\u25BE')
+  })
+
+  it('uses category-specific color via categoryId', () => {
+    const { container } = render(<CategoryHeader name="Web" categoryId="web" totalCount={5} />)
+    expect(container.textContent).toContain('Web')
+  })
+
+  it('highlights badge in success color when installed count > 0', () => {
+    const { container } = render(<CategoryHeader name="Web" totalCount={10} installedCount={5} />)
+    expect(container.textContent).toContain('(5/10)')
+  })
+})

package/src/components/__tests__/KeyboardShortcutsOverlay.pbt.test.tsx

@@ -0,0 +1,155 @@
+/** @jest-environment jsdom */
+import { afterEach, beforeEach, describe, expect, it, jest } from '@jest/globals'
+import { act, render } from '@testing-library/react'
+import * as fc from 'fast-check'
+
+import { KeyboardShortcutsOverlay } from '../KeyboardShortcutsOverlay'
+
+jest.mock('../../theme', () => ({
+  colors: {
+    primary: '#3b82f6',
+    primaryLight: '#60a5fa',
+    accent: '#06b6d4',
+    text: '#f8fafc',
+    textDim: '#94a3b8',
+    textMuted: '#64748b',
+    border: '#334155',
+    bg: '#0f172a',
+    bgLight: '#1e293b',
+    success: '#22c55e',
+    error: '#ef4444',
+  },
+  symbols: {
+    sparkle: '✦',
+    diamond: '◆',
+    arrow: '›',
+    dot: '·',
+    bullet: '▸',
+    cross: '✗',
+    info: 'ℹ',
+    arrowDown: '↓',
+    arrowUp: '↑',
+    bar: '│',
+  },
+}))
+
+jest.mock('../AnimatedTransition', () => ({
+  AnimatedTransition: ({ children, visible }: { children: React.ReactNode; visible: boolean }) =>
+    visible ? <div data-testid="overlay">{children}</div> : null,
+}))
+
+const mockUseInput = jest.fn()
+
+jest.mock('ink', () => {
+  return {
+    useInput: (handler: (input: string, key: Record<string, boolean>) => void, options: Record<string, unknown>) =>
+      mockUseInput(handler, options),
+    Box: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => {
+      const {
+        flexDirection,
+        justifyContent,
+        borderStyle,
+        borderColor,
+        paddingLeft,
+        paddingRight,
+        marginTop,
+        marginBottom,
+        width,
+        height,
+        gap,
+        ...validProps
+      } = props
+      void flexDirection
+      void justifyContent
+      void borderStyle
+      void borderColor
+      void paddingLeft
+      void paddingRight
+      void marginTop
+      void marginBottom
+      void width
+      void height
+      void gap
+      return (
+        <div data-testid="box" {...validProps}>
+          {children}
+        </div>
+      )
+    },
+    Text: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => {
+      const { bold, underline, ...validProps } = props
+      void bold
+      void underline
+      return (
+        <span data-testid="text" {...validProps}>
+          {children}
+        </span>
+      )
+    },
+  }
+})
+
+const defaultShortcuts = [
+  { key: 'space', description: 'Toggle selection' },
+  { key: 'enter', description: 'Confirm' },
+]
+
+describe('KeyboardShortcutsOverlay - Property-Based Tests', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+    mockUseInput.mockClear()
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+    jest.useRealTimers()
+  })
+
+  it('should dismiss on ANY random key press when visible', () => {
+    fc.assert(
+      fc.property(
+        // Generate random key inputs
+        fc.record({
+          input: fc.string(),
+          key: fc.record({
+            return: fc.boolean(),
+            escape: fc.boolean(),
+            ctrl: fc.boolean(),
+            meta: fc.boolean(),
+            shift: fc.boolean(),
+            tab: fc.boolean(),
+            backspace: fc.boolean(),
+            delete: fc.boolean(),
+            upArrow: fc.boolean(),
+            downArrow: fc.boolean(),
+            leftArrow: fc.boolean(),
+            rightArrow: fc.boolean(),
+            pageDown: fc.boolean(),
+            pageUp: fc.boolean(),
+          }),
+        }),
+        (keyEvent) => {
+          const onDismiss = jest.fn()
+          mockUseInput.mockClear()
+
+          const { unmount } = render(
+            <KeyboardShortcutsOverlay visible={true} onDismiss={onDismiss} shortcuts={defaultShortcuts} />,
+          )
+
+          if (mockUseInput.mock.calls.length > 0) {
+            const handler = mockUseInput.mock.calls[0][0] as (input: string, key: unknown) => void
+
+            act(() => {
+              handler(keyEvent.input, keyEvent.key)
+            })
+
+            expect(onDismiss).toHaveBeenCalled()
+          }
+
+          unmount()
+        },
+      ),
+      { numRuns: 100 },
+    )
+  })
+})

package/src/components/__tests__/KeyboardShortcutsOverlay.test.tsx

@@ -0,0 +1,136 @@
+/** @jest-environment jsdom */
+import { act, render, screen } from '@testing-library/react'
+
+import { KeyboardShortcutsOverlay } from '../KeyboardShortcutsOverlay'
+
+jest.mock('../../theme', () => ({
+  colors: {
+    primary: '#3b82f6',
+    primaryLight: '#60a5fa',
+    accent: '#06b6d4',
+    text: '#f8fafc',
+    textDim: '#94a3b8',
+    textMuted: '#64748b',
+    border: '#334155',
+    bg: '#0f172a',
+    bgLight: '#1e293b',
+    success: '#22c55e',
+    error: '#ef4444',
+  },
+  symbols: {
+    sparkle: '✦',
+    diamond: '◆',
+    arrow: '›',
+    dot: '·',
+    bullet: '▸',
+    cross: '✗',
+    info: 'ℹ',
+    arrowDown: '↓',
+    arrowUp: '↑',
+    bar: '│',
+  },
+}))
+
+jest.mock('../AnimatedTransition', () => ({
+  AnimatedTransition: ({ children, visible }: { children: React.ReactNode; visible: boolean }) =>
+    visible ? <div data-testid="overlay">{children}</div> : null,
+}))
+
+const mockUseInput = jest.fn()
+
+jest.mock('ink', () => {
+  return {
+    useInput: (handler: (input: string, key: Record<string, boolean>) => void, options: Record<string, unknown>) =>
+      mockUseInput(handler, options),
+    Box: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => {
+      const {
+        flexDirection,
+        justifyContent,
+        borderStyle,
+        borderColor,
+        paddingLeft,
+        paddingRight,
+        marginTop,
+        marginBottom,
+        width,
+        height,
+        gap,
+        ...validProps
+      } = props
+      void flexDirection
+      void justifyContent
+      void borderStyle
+      void borderColor
+      void paddingLeft
+      void paddingRight
+      void marginTop
+      void marginBottom
+      void width
+      void height
+      void gap
+
+      return (
+        <div data-testid="box" {...validProps}>
+          {children}
+        </div>
+      )
+    },
+    Text: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => {
+      const { bold, underline, ...validProps } = props
+      void bold
+      void underline
+      return (
+        <span data-testid="text" {...validProps}>
+          {children}
+        </span>
+      )
+    },
+  }
+})
+
+const defaultShortcuts = [
+  { key: 'space', description: 'Toggle selection' },
+  { key: 'enter', description: 'Confirm' },
+]
+
+describe('KeyboardShortcutsOverlay', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+    mockUseInput.mockClear()
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+    jest.useRealTimers()
+  })
+
+  it('renders correctly when visible', () => {
+    render(<KeyboardShortcutsOverlay visible={true} onDismiss={() => {}} shortcuts={defaultShortcuts} />)
+    expect(screen.getByTestId('overlay')).toBeTruthy()
+  })
+
+  it('auto-dismisses after 8 seconds', () => {
+    const onDismiss = jest.fn()
+    render(<KeyboardShortcutsOverlay visible={true} onDismiss={onDismiss} shortcuts={defaultShortcuts} />)
+
+    act(() => {
+      jest.advanceTimersByTime(8000)
+    })
+
+    expect(onDismiss).toHaveBeenCalled()
+  })
+
+  it('dismisses on any key press', () => {
+    const onDismiss = jest.fn()
+    render(<KeyboardShortcutsOverlay visible={true} onDismiss={onDismiss} shortcuts={defaultShortcuts} />)
+
+    expect(mockUseInput).toHaveBeenCalled()
+    const handler = mockUseInput.mock.calls[0][0] as (input: string, key: Record<string, boolean>) => void
+
+    act(() => {
+      handler('a', { return: false })
+    })
+
+    expect(onDismiss).toHaveBeenCalled()
+  })
+})