@alumbwe/anvil 1.0.0

package/src/components/__tests__/freebuff-takeover-prompt.test.tsx

@@ -0,0 +1,212 @@
+import { afterEach, beforeAll, describe, expect, test } from 'bun:test'
+import { createTestRenderer } from '@opentui/core/testing'
+import { createRoot, flushSync } from '@opentui/react'
+import React from 'react'
+
+import { TakeoverPrompt } from '../freebuff-landing-screen'
+import { initializeThemeStore } from '../../hooks/use-theme'
+
+let cleanupRenderer: (() => void) | undefined
+const originalDateNow = Date.now
+
+beforeAll(() => {
+  initializeThemeStore()
+})
+
+afterEach(() => {
+  Date.now = originalDateNow
+  cleanupRenderer?.()
+  cleanupRenderer = undefined
+})
+
+const mountPrompt = async ({
+  failure = null,
+  onTakeOver = async () => {},
+}: Partial<React.ComponentProps<typeof TakeoverPrompt>> = {}) => {
+  const setup = await createTestRenderer({ width: 90, height: 12 })
+  const root = createRoot(setup.renderer)
+  cleanupRenderer = () => {
+    flushSync(() => root.unmount())
+    setup.renderer.destroy()
+  }
+  flushSync(() =>
+    root.render(<TakeoverPrompt failure={failure} onTakeOver={onTakeOver} />),
+  )
+  await setup.renderOnce()
+  return Object.assign(setup, {
+    rerenderPrompt: async (
+      next: React.ComponentProps<typeof TakeoverPrompt>,
+    ) => {
+      flushSync(() => root.render(<TakeoverPrompt {...next} />))
+      await setup.renderOnce()
+    },
+  })
+}
+
+describe('TakeoverPrompt', () => {
+  test('shows retry status for a retryable timeout', async () => {
+    const setup = await mountPrompt({
+      failure: {
+        type: 'timeout',
+        message: 'runtime-specific abort message',
+        retry: { attempt: 2, retryAtMs: Date.now() + 60_000 },
+        outcomeUnknown: false,
+      },
+    })
+    const frame = setup.captureCharFrame()
+
+    expect(frame).toContain(
+      'The takeover request timed out while Freebuff was busy.',
+    )
+    expect(frame).toContain('Retrying automatically in')
+    expect(frame).toContain('(attempt 2).')
+    expect(frame).toContain('Retry now')
+  })
+
+  test('allows an explicit retry after a takeover timeout with an unknown outcome', async () => {
+    let calls = 0
+    const setup = await mountPrompt({
+      failure: {
+        type: 'timeout',
+        message: 'The operation timed out',
+        retry: null,
+        outcomeUnknown: true,
+      },
+      onTakeOver: async () => {
+        calls++
+      },
+    })
+
+    setup.mockInput.pressEnter()
+    await Promise.resolve()
+
+    const frame = setup.captureCharFrame()
+    const normalizedFrame = frame.replace(/\s+/g, ' ')
+    expect(calls).toBe(1)
+    expect(normalizedFrame).toContain('may have succeeded')
+    expect(frame).toContain('Try takeover again')
+    expect(frame).not.toContain('Retrying automatically')
+  })
+
+  test('turns a 503 response into actionable copy', async () => {
+    const setup = await mountPrompt({
+      failure: {
+        type: 'http',
+        statusCode: 503,
+        message: 'runtime-specific service error',
+        retry: null,
+        outcomeUnknown: false,
+      },
+    })
+    const frame = setup.captureCharFrame()
+
+    expect(frame).toContain(
+      "Freebuff is busy and couldn't complete the takeover yet.",
+    )
+    expect(frame).not.toContain('runtime-specific service error')
+  })
+
+  test('does not render a blank message for an empty unexpected error', async () => {
+    const setup = await mountPrompt({
+      failure: {
+        type: 'other',
+        message: '',
+        retry: null,
+        outcomeUnknown: false,
+      },
+    })
+
+    expect(setup.captureCharFrame()).toContain(
+      'The takeover failed unexpectedly.',
+    )
+  })
+
+  test('submits only once when Enter repeats before React rerenders', async () => {
+    let calls = 0
+    let finishTakeover: (() => void) | undefined
+    const pendingTakeover = new Promise<void>((resolve) => {
+      finishTakeover = resolve
+    })
+    const setup = await mountPrompt({
+      onTakeOver: () => {
+        calls++
+        return pendingTakeover
+      },
+    })
+
+    flushSync(() => {
+      setup.mockInput.pressEnter()
+      setup.mockInput.pressEnter()
+    })
+    await setup.renderOnce()
+
+    expect(calls).toBe(1)
+    expect(setup.captureCharFrame()).toContain('Taking over...')
+
+    finishTakeover!()
+    await pendingTakeover
+  })
+
+  test('lets the user retry immediately during automatic backoff', async () => {
+    let calls = 0
+    const setup = await mountPrompt({
+      failure: {
+        type: 'http',
+        statusCode: 503,
+        message: 'freebuff session POST failed: 503',
+        retry: { attempt: 3, retryAtMs: Date.now() + 30_000 },
+        outcomeUnknown: false,
+      },
+      onTakeOver: async () => {
+        calls++
+      },
+    })
+
+    setup.mockInput.pressEnter()
+    await Promise.resolve()
+
+    expect(calls).toBe(1)
+    expect(setup.captureCharFrame()).toContain('Retry now')
+  })
+
+  test('starts a newly appearing retry countdown from the current time', async () => {
+    let now = 1_000
+    Date.now = () => now
+    const setup = await mountPrompt()
+
+    now += 60 * 60 * 1_000
+    await setup.rerenderPrompt({
+      failure: {
+        type: 'timeout',
+        message: 'request timed out',
+        retry: { attempt: 2, retryAtMs: now + 30_000 },
+        outcomeUnknown: false,
+      },
+    })
+
+    expect(setup.captureCharFrame()).toContain('Retrying automatically in 30s')
+  })
+
+  test('allows an explicit retry when a non-timeout POST result is unknown', async () => {
+    let calls = 0
+    const setup = await mountPrompt({
+      failure: {
+        type: 'other',
+        message: 'fetch failed',
+        retry: null,
+        outcomeUnknown: true,
+      },
+      onTakeOver: async () => {
+        calls++
+      },
+    })
+
+    setup.mockInput.pressEnter()
+    await Promise.resolve()
+
+    const frame = setup.captureCharFrame().replace(/\s+/g, ' ')
+    expect(calls).toBe(1)
+    expect(frame).toContain("couldn't confirm whether the takeover succeeded")
+    expect(frame).toContain('Try takeover again')
+  })
+})

package/src/components/__tests__/grid-layout.integration.test.tsx

@@ -0,0 +1,304 @@
+/**
+ * Integration tests for GridLayout React reconciliation during resize.
+ * 
+ * These tests verify that the unified DOM structure fix properly handles
+ * column transitions (2→1) without losing content during React reconciliation.
+ * 
+ * Unlike the static rendering tests in grid-layout.test.tsx, these tests
+ * simulate actual re-renders with changing props to catch reconciliation bugs.
+ */
+import { describe, test, expect } from 'bun:test'
+import React, { useCallback } from 'react'
+import { renderToString } from 'react-dom/server'
+
+import { GridLayout } from '../grid-layout'
+
+interface TestItem {
+  id: string
+  name: string
+}
+
+const createTestItem = (id: string, name: string): TestItem => ({ id, name })
+
+/**
+ * Test wrapper that simulates resize by rendering at multiple widths
+ * and tracking which items were rendered at each width.
+ */
+interface RenderTracker {
+  renderedItems: Map<number, string[]>  // width -> item names rendered
+  renderCounts: Map<string, number>     // item id -> render count
+}
+
+function createRenderTracker(): RenderTracker {
+  return {
+    renderedItems: new Map(),
+    renderCounts: new Map(),
+  }
+}
+
+/**
+ * Component that renders GridLayout and tracks rendered items.
+ * This simulates what happens during actual React reconciliation.
+ */
+function TrackedGridLayout({
+  items,
+  availableWidth,
+  tracker,
+}: {
+  items: TestItem[]
+  availableWidth: number
+  tracker: RenderTracker
+}) {
+  const renderItem = useCallback(
+    (item: TestItem, _idx: number, _columnWidth: number) => {
+      // Track this item was rendered
+      const currentCount = tracker.renderCounts.get(item.id) || 0
+      tracker.renderCounts.set(item.id, currentCount + 1)
+      
+      // Track items rendered at this width
+      const widthItems = tracker.renderedItems.get(availableWidth) || []
+      if (!widthItems.includes(item.name)) {
+        widthItems.push(item.name)
+        tracker.renderedItems.set(availableWidth, widthItems)
+      }
+      
+      return <text key={item.id}>{item.name}</text>
+    },
+    [availableWidth, tracker],
+  )
+
+  const getItemKey = useCallback((item: TestItem) => item.id, [])
+
+  return (
+    <GridLayout
+      items={items}
+      availableWidth={availableWidth}
+      getItemKey={getItemKey}
+      renderItem={renderItem}
+    />
+  )
+}
+
+describe('GridLayout React Reconciliation', () => {
+  describe('column transition (2→1) reconciliation', () => {
+    test('all items survive rerender when width changes from 120 to 80', () => {
+      const items = [
+        createTestItem('a', 'Alpha'),
+        createTestItem('b', 'Beta'),
+        createTestItem('c', 'Gamma'),
+      ]
+      const tracker = createRenderTracker()
+
+      // First render at 2-column width (120)
+      const markup1 = renderToString(
+        <TrackedGridLayout items={items} availableWidth={120} tracker={tracker} />,
+      )
+
+      // Verify all items rendered at width 120 (order may vary due to round-robin distribution)
+      expect(tracker.renderedItems.get(120)?.sort()).toEqual(['Alpha', 'Beta', 'Gamma'])
+      expect(markup1).toContain('Alpha')
+      expect(markup1).toContain('Beta')
+      expect(markup1).toContain('Gamma')
+
+      // Second render at 1-column width (80) - simulates resize
+      const markup2 = renderToString(
+        <TrackedGridLayout items={items} availableWidth={80} tracker={tracker} />,
+      )
+
+      // Verify all items rendered at width 80
+      expect(tracker.renderedItems.get(80)?.sort()).toEqual(['Alpha', 'Beta', 'Gamma'])
+      expect(markup2).toContain('Alpha')
+      expect(markup2).toContain('Beta')
+      expect(markup2).toContain('Gamma')
+
+      // Verify each item was rendered exactly twice (once per width)
+      expect(tracker.renderCounts.get('a')).toBe(2)
+      expect(tracker.renderCounts.get('b')).toBe(2)
+      expect(tracker.renderCounts.get('c')).toBe(2)
+    })
+
+    test('item order is preserved after 2→1 transition', () => {
+      const items = [
+        createTestItem('1', 'First'),
+        createTestItem('2', 'Second'),
+        createTestItem('3', 'Third'),
+        createTestItem('4', 'Fourth'),
+      ]
+      const tracker = createRenderTracker()
+
+      // Render at 2-column width first
+      renderToString(
+        <TrackedGridLayout items={items} availableWidth={120} tracker={tracker} />,
+      )
+
+      // Then render at 1-column width
+      const markup = renderToString(
+        <TrackedGridLayout items={items} availableWidth={80} tracker={tracker} />,
+      )
+
+      // Check order in final markup
+      const firstPos = markup.indexOf('First')
+      const secondPos = markup.indexOf('Second')
+      const thirdPos = markup.indexOf('Third')
+      const fourthPos = markup.indexOf('Fourth')
+
+      expect(firstPos).toBeLessThan(secondPos)
+      expect(secondPos).toBeLessThan(thirdPos)
+      expect(thirdPos).toBeLessThan(fourthPos)
+    })
+
+    test('multiple rapid width changes preserve all items', () => {
+      const items = [
+        createTestItem('a', 'Apple'),
+        createTestItem('b', 'Banana'),
+        createTestItem('c', 'Cherry'),
+      ]
+      const tracker = createRenderTracker()
+
+      // Simulate rapid resize: 2-col → 1-col → 2-col → 1-col → 2-col
+      const widthSequence = [120, 80, 120, 80, 120]
+
+      for (const width of widthSequence) {
+        const markup = renderToString(
+          <TrackedGridLayout items={items} availableWidth={width} tracker={tracker} />,
+        )
+
+        // Every render should contain all items
+        expect(markup).toContain('Apple')
+        expect(markup).toContain('Banana')
+        expect(markup).toContain('Cherry')
+      }
+
+      // Verify items were rendered correct number of times
+      // 5 renders total, each item should be rendered 5 times
+      expect(tracker.renderCounts.get('a')).toBe(5)
+      expect(tracker.renderCounts.get('b')).toBe(5)
+      expect(tracker.renderCounts.get('c')).toBe(5)
+    })
+
+    test('3→2→1 column transition preserves all items', () => {
+      const items = [
+        createTestItem('a', 'One'),
+        createTestItem('b', 'Two'),
+        createTestItem('c', 'Three'),
+        createTestItem('d', 'Four'),
+        createTestItem('e', 'Five'),
+        createTestItem('f', 'Six'),
+      ]
+      const tracker = createRenderTracker()
+
+      // Start at 3-column width (150+)
+      renderToString(
+        <TrackedGridLayout items={items} availableWidth={180} tracker={tracker} />,
+      )
+      expect(tracker.renderedItems.get(180)?.length).toBe(6)
+
+      // Transition to 2-column width (100-149)
+      renderToString(
+        <TrackedGridLayout items={items} availableWidth={120} tracker={tracker} />,
+      )
+      expect(tracker.renderedItems.get(120)?.length).toBe(6)
+
+      // Transition to 1-column width (<100)
+      const finalMarkup = renderToString(
+        <TrackedGridLayout items={items} availableWidth={80} tracker={tracker} />,
+      )
+      expect(tracker.renderedItems.get(80)?.length).toBe(6)
+
+      // All items present in final render
+      expect(finalMarkup).toContain('One')
+      expect(finalMarkup).toContain('Two')
+      expect(finalMarkup).toContain('Three')
+      expect(finalMarkup).toContain('Four')
+      expect(finalMarkup).toContain('Five')
+      expect(finalMarkup).toContain('Six')
+    })
+
+    test('1→2 column expansion also works correctly', () => {
+      const items = [
+        createTestItem('x', 'Xray'),
+        createTestItem('y', 'Yankee'),
+        createTestItem('z', 'Zulu'),
+      ]
+      const tracker = createRenderTracker()
+
+      // Start at 1-column width
+      renderToString(
+        <TrackedGridLayout items={items} availableWidth={80} tracker={tracker} />,
+      )
+      expect(tracker.renderedItems.get(80)?.sort()).toEqual(['Xray', 'Yankee', 'Zulu'])
+
+      // Expand to 2-column width
+      const expandedMarkup = renderToString(
+        <TrackedGridLayout items={items} availableWidth={120} tracker={tracker} />,
+      )
+      expect(tracker.renderedItems.get(120)?.sort()).toEqual(['Xray', 'Yankee', 'Zulu'])
+
+      // All items present
+      expect(expandedMarkup).toContain('Xray')
+      expect(expandedMarkup).toContain('Yankee')
+      expect(expandedMarkup).toContain('Zulu')
+    })
+  })
+
+  describe('unified DOM structure verification', () => {
+    test('both column layouts produce valid markup', () => {
+      const items = [
+        createTestItem('a', 'Item1'),
+        createTestItem('b', 'Item2'),
+      ]
+
+      // 2-column layout
+      const twoColMarkup = renderToString(
+        <GridLayout
+          items={items}
+          availableWidth={120}
+          getItemKey={(item) => item.id}
+          renderItem={(item) => <text>{item.name}</text>}
+        />,
+      )
+
+      // 1-column layout  
+      const oneColMarkup = renderToString(
+        <GridLayout
+          items={items}
+          availableWidth={80}
+          getItemKey={(item) => item.id}
+          renderItem={(item) => <text>{item.name}</text>}
+        />,
+      )
+
+      // Both should produce valid, non-empty markup
+      expect(twoColMarkup.length).toBeGreaterThan(0)
+      expect(oneColMarkup.length).toBeGreaterThan(0)
+
+      // Both should contain the items
+      expect(twoColMarkup).toContain('Item1')
+      expect(twoColMarkup).toContain('Item2')
+      expect(oneColMarkup).toContain('Item1')
+      expect(oneColMarkup).toContain('Item2')
+    })
+
+    test('no items lost even with dramatic width reduction', () => {
+      const items = Array.from({ length: 10 }, (_, i) =>
+        createTestItem(`item-${i}`, `Content${i}`),
+      )
+      const tracker = createRenderTracker()
+
+      // Start at 4-column width (200+)
+      renderToString(
+        <TrackedGridLayout items={items} availableWidth={250} tracker={tracker} />,
+      )
+
+      // Dramatically reduce to 1-column
+      const finalMarkup = renderToString(
+        <TrackedGridLayout items={items} availableWidth={50} tracker={tracker} />,
+      )
+
+      // All 10 items should be present
+      for (let i = 0; i < 10; i++) {
+        expect(finalMarkup).toContain(`Content${i}`)
+      }
+    })
+  })
+})