termcast 1.3.10 → 1.3.16

package/src/examples/simple-navigation.vitest.tsx

@@ -1,22 +1,23 @@
-// node-pty does not work in bun, so we use vitest to run this test
 import { test, expect, afterEach, beforeEach } from 'vitest'
-import { NodeTuiDriver } from 'termcast/src/e2e-node'
+import { launchTerminal, Session } from 'tuistory/src'
 
-let driver: NodeTuiDriver
+let session: Session
 
-beforeEach(() => {
-  driver = new NodeTuiDriver('bun', ['src/examples/simple-navigation.tsx'], {
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/simple-navigation.tsx'],
     cols: 70,
-    rows: 50,
+    rows: 25,
   })
 })
 
 afterEach(() => {
-  driver?.dispose()
+  session?.close()
 })
 
 test('navigation between main and detail views', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
       // wait for main view to show up
       return /Navigation Example/i.test(text)
@@ -24,80 +25,105 @@ test('navigation between main and detail views', async () => {
   })
 
   // Small delay to ensure all items are rendered
-  await driver.waitIdle()
+  await session.waitIdle()
 
-  const initialSnapshot = await driver.text()
+  const initialSnapshot = await session.text()
 
   expect(initialSnapshot).toMatchInlineSnapshot(`
     "
 
+
      Navigation Example ─────────────────────────────────────────────
 
      Main view
 
-
      Items
     ›First Item Navigate to first detail
      Second Item Navigate to second detail
      Third Item Navigate to third detail
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 
   // Navigate to second item
-  await driver.keys.down()
+  await session.press('down')
 
-  const afterDownSnapshot = await driver.text()
+  const afterDownSnapshot = await session.text()
   expect(afterDownSnapshot).toMatchInlineSnapshot(`
     "
 
+
      Navigation Example ─────────────────────────────────────────────
 
      Main view
 
-
      Items
      First Item Navigate to first detail
     ›Second Item Navigate to second detail
      Third Item Navigate to third detail
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
-  `)
 
-  // Press Enter to open actions panel
-  await driver.keys.enter()
 
-  const actionsOpenSnapshot = await driver.text()
-  expect(actionsOpenSnapshot).toMatchInlineSnapshot(`
-    "
 
-     Navigation Example ─────────────────────────────────────────────
 
-     Main view
 
 
-     Items
-     First Item Navigate to first detail
-    ›Second Item Navigate to second detail
-     Third Item Navigate to third detail
 
 
-                                                                 esc
 
-      Search actions...
-     ›Open Details
-      Copy Title
 
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
 
-      ↵ select   ↑↓ navigate"
+  // Press Enter to open actions panel
+  await session.press('enter')
+
+  const actionsOpenSnapshot = await session.text()
+  expect(actionsOpenSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+      Navigation Example ─────────────────────────────────────────────
+
+      Main view
+
+      Items
+    ┃                                                                  ┃
+    ┃                                                            esc   ┃
+    ┃                                                                  ┃
+    ┃   Search actions...                                              ┃
+    ┃                                                                  ┃
+    ┃  ›Open Details                                                   ┃
+    ┃   Copy Title                                                     ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   ↵ select   ↑↓ navigate                                         ┃
+    ┃                                                                  ┃"
   `)
 
   // Press Enter again to select "Open Details" action
-  await driver.keys.enter()
+  await session.press('enter')
 
-  const detailViewSnapshot = await driver.text({
+  const detailViewSnapshot = await session.text({
     waitFor: (text) => {
       // wait for detail view to show up
       return /Detail: Second Item/i.test(text)
@@ -106,173 +132,237 @@ test('navigation between main and detail views', async () => {
   expect(detailViewSnapshot).toMatchInlineSnapshot(`
     "
 
+
      Detail: Second Item ────────────────────────────────────────────
 
      Detail view - Press ESC to go back
 
-
      Details
-    ›This is the detail view for Second Item Press Enter to go back or E
+    ›This is the detail view for Second Item Press Enter to go back
+
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+
+
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 
   // Press ESC to go back to main view
-  await driver.keys.escape()
+  await session.press('esc')
 
-  const backToMainSnapshot = await driver.text({
+  const backToMainSnapshot = await session.text({
     waitFor: (text) => {
       // wait for main view to show up again
       return /Navigation Example/i.test(text)
     },
   })
   expect(backToMainSnapshot).toMatchInlineSnapshot(`
-      "
+    "
+
 
-       Navigation Example ─────────────────────────────────────────────
+     Navigation Example ─────────────────────────────────────────────
+
+     Main view
 
-       Main view
+     Items
+    ›First Item Navigate to first detail
+     Second Item Navigate to second detail
+     Third Item Navigate to third detail
 
 
-       Items
-      ›First Item Navigate to first detail
-       Second Item Navigate to second detail
-       Third Item Navigate to third detail
 
 
-       ↵ select   ↑↓ navigate   ^k actions"
-    `)
 
-  // Navigate down to third item (we're back at first item after ESC)
-  await driver.keys.down()
-  await driver.keys.down()
 
-  const thirdItemSnapshot = await driver.text()
-  expect(thirdItemSnapshot).toMatchInlineSnapshot(`
-      "
 
-       Navigation Example ─────────────────────────────────────────────
 
-       Main view
 
 
-       Items
-       First Item Navigate to first detail
-       Second Item Navigate to second detail
-      ›Third Item Navigate to third detail
 
 
-       ↵ select   ↑↓ navigate   ^k actions"
-    `)
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
 
-  // Open action panel for third item
-  await driver.keys.enter()
+  // Navigate down to third item (we're back at first item after ESC)
+  await session.press('down')
+  await session.press('down')
 
-  const thirdActionsSnapshot = await driver.text()
-  expect(thirdActionsSnapshot).toMatchInlineSnapshot(`
+  const thirdItemSnapshot = await session.text()
+  expect(thirdItemSnapshot).toMatchInlineSnapshot(`
     "
 
+
      Navigation Example ─────────────────────────────────────────────
 
      Main view
 
-
      Items
      First Item Navigate to first detail
      Second Item Navigate to second detail
     ›Third Item Navigate to third detail
 
 
-                                                                 esc
 
-      Search actions...
-     ›Open Details
-      Copy Title
 
 
-      ↵ select   ↑↓ navigate"
+
+
+
+
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
+
+  // Open action panel for third item
+  await session.press('enter')
+
+  const thirdActionsSnapshot = await session.text()
+  expect(thirdActionsSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+      Navigation Example ─────────────────────────────────────────────
+
+      Main view
+
+      Items
+    ┃                                                                  ┃
+    ┃                                                            esc   ┃
+    ┃                                                                  ┃
+    ┃   Search actions...                                              ┃
+    ┃                                                                  ┃
+    ┃  ›Open Details                                                   ┃
+    ┃   Copy Title                                                     ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   ↵ select   ↑↓ navigate                                         ┃
+    ┃                                                                  ┃"
   `)
 
   // Navigate to detail
-  await driver.keys.enter()
+  await session.press('enter')
 
-  const thirdDetailSnapshot = await driver.text({
+  const thirdDetailSnapshot = await session.text({
     waitFor: (text) => {
       return /Detail: Third Item/i.test(text)
     },
   })
   expect(thirdDetailSnapshot).toMatchInlineSnapshot(`
-      "
+    "
 
-       Detail: Third Item ─────────────────────────────────────────────
 
-       Detail view - Press ESC to go back
+     Detail: Third Item ─────────────────────────────────────────────
 
+     Detail view - Press ESC to go back
 
-       Details
-      ›This is the detail view for Third Item Press Enter to go back or ES
+     Details
+    ›This is the detail view for Third Item Press Enter to go back o
 
 
-       ↵ select   ↑↓ navigate   ^k actions"
-    `)
 
-  // Use Enter to open actions and go back
-  await driver.keys.enter()
 
-  const thirdDetailActionsSnapshot = await driver.text()
-  expect(thirdDetailActionsSnapshot).toMatchInlineSnapshot(`
-    "
 
-     Detail: Third Item ─────────────────────────────────────────────
 
-     Detail view - Press ESC to go back
 
 
-     Details
-    ›This is the detail view for Third Item Press Enter to go back or ES
 
 
-     ↵ select   ↑↓ navigate   ^k actions
 
-                                                                 esc
 
-      Search actions...
-     ›Go Back
-      Copy Title
 
 
-      ↵ select   ↑↓ navigate"
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
+
+  // Use Enter to open actions and go back
+  await session.press('enter')
+
+  const thirdDetailActionsSnapshot = await session.text()
+  expect(thirdDetailActionsSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+      Detail: Third Item ─────────────────────────────────────────────
+
+      Detail view - Press ESC to go back
+
+      Details
+    ┃                                                                  ┃
+    ┃                                                            esc   ┃
+    ┃                                                                  ┃
+    ┃   Search actions...                                              ┃
+    ┃                                                                  ┃
+    ┃  ›Go Back                                                        ┃
+    ┃   Copy Title                                                     ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   ↵ select   ↑↓ navigate                                         ┃
+    ┃                                                                  ┃"
   `)
 
   // Select "Go Back" action
-  await driver.keys.enter()
+  await session.press('enter')
 
-  const backFromThirdSnapshot = await driver.text({
+  const backFromThirdSnapshot = await session.text({
     waitFor: (text) => {
       return /Navigation Example/i.test(text)
     },
   })
   expect(backFromThirdSnapshot).toMatchInlineSnapshot(`
-      "
+    "
+
+
+     Navigation Example ─────────────────────────────────────────────
+
+     Main view
+
+     Items
+    ›First Item Navigate to first detail
+     Second Item Navigate to second detail
+     Third Item Navigate to third detail
+
+
+
+
 
-       Navigation Example ─────────────────────────────────────────────
 
-       Main view
 
 
-       Items
-      ›First Item Navigate to first detail
-       Second Item Navigate to second detail
-       Third Item Navigate to third detail
 
 
-       ↵ select   ↑↓ navigate   ^k actions"
-    `)
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
 }, 15000)
 
 test('navigation with actions panel', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
       // wait for main view to show up
       return /Navigation Example/i.test(text)
@@ -280,89 +370,110 @@ test('navigation with actions panel', async () => {
   })
 
   // Open actions panel with ctrl+k
-  await driver.keys.ctrlK()
+  await session.press(['ctrl', 'k'])
 
-  const actionsOpenSnapshot = await driver.text()
+  const actionsOpenSnapshot = await session.text()
   expect(actionsOpenSnapshot).toMatchInlineSnapshot(`
     "
 
-     Navigation Example ─────────────────────────────────────────────
-
-     Main view
-
-
-     Items
-    ›First Item Navigate to first detail
-     Second Item Navigate to second detail
-     Third Item Navigate to third detail
 
+      Navigation Example ─────────────────────────────────────────────
+
+      Main view
+
+      Items
+    ┃                                                                  ┃
+    ┃                                                            esc   ┃
+    ┃                                                                  ┃
+    ┃   Search actions...                                              ┃
+    ┃                                                                  ┃
+    ┃  ›Open Details                                                   ┃
+    ┃   Copy Title                                                     ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   ↵ select   ↑↓ navigate                                         ┃
+    ┃                                                                  ┃"
+  `)
 
-                                                                 esc
+  // Navigate down in actions panel
+  await session.press('down')
 
-      Search actions...
-     ›Open Details
-      Copy Title
+  const secondActionSnapshot = await session.text()
+  expect(secondActionSnapshot).toMatchInlineSnapshot(`
+    "
 
 
-      ↵ select   ↑↓ navigate"
+      Navigation Example ─────────────────────────────────────────────
+
+      Main view
+
+      Items
+    ┃                                                                  ┃
+    ┃                                                            esc   ┃
+    ┃                                                                  ┃
+    ┃   Search actions...                                              ┃
+    ┃                                                                  ┃
+    ┃   Open Details                                                   ┃
+    ┃  ›Copy Title                                                     ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   ↵ select   ↑↓ navigate                                         ┃
+    ┃                                                                  ┃"
   `)
 
-  // Navigate down in actions panel
-  await driver.keys.down()
+  // Select the Copy Title action
+  await session.press('enter')
 
-  const secondActionSnapshot = await driver.text()
-  expect(secondActionSnapshot).toMatchInlineSnapshot(`
+  const afterCopySnapshot = await session.text()
+  expect(afterCopySnapshot).toMatchInlineSnapshot(`
     "
 
+
      Navigation Example ─────────────────────────────────────────────
 
      Main view
 
-
      Items
     ›First Item Navigate to first detail
      Second Item Navigate to second detail
      Third Item Navigate to third detail
 
 
-                                                                 esc
 
-      Search actions...
-      Open Details
-     ›Copy Title
 
 
-      ↵ select   ↑↓ navigate"
-  `)
 
-  // Select the Copy Title action
-  await driver.keys.enter()
 
-  const afterCopySnapshot = await driver.text()
-  expect(afterCopySnapshot).toMatchInlineSnapshot(`
-    "
 
-     Navigation Example ─────────────────────────────────────────────
 
-     Main view
 
 
-     Items
-    ›First Item Navigate to first detail
-     Second Item Navigate to second detail
-     Third Item Navigate to third detail
 
-
-     ┌────────────────────────────────────┐
-     │ ✓ Copied to Clipboard - First Item │
-     └────────────────────────────────────┘"
+     ↵ select  ↑↓ ┌────────────────────────────────────┐
+                  │ ✓ Copied to Clipboard - First Item │
+                  └────────────────────────────────────┘"
   `)
 
   // Navigate to second item and open its detail
-  await driver.keys.down()
-  await driver.keys.enter()
+  await session.press('down')
+  await session.press('enter')
+  await session.press('enter')
 
-  const secondDetailSnapshot = await driver.text({
+  const secondDetailSnapshot = await session.text({
     waitFor: (text) => {
       return /Detail: Second Item/i.test(text)
     },
@@ -370,59 +481,69 @@ test('navigation with actions panel', async () => {
   expect(secondDetailSnapshot).toMatchInlineSnapshot(`
     "
 
-     Navigation Example ─────────────────────────────────────────────
 
-     Main view
+     Detail: Second Item ────────────────────────────────────────────
 
+     Detail view - Press ESC to go back
+
+     Details
+    ›This is the detail view for Second Item Press Enter to go back
 
-     Items
-     First Item Navigate to first detail
-    ›Second Item Navigate to second detail
-     Third Item Navigate to third detail
 
 
-                                                                 esc
 
-      Search actions...
-     ›Open Details
-      Copy Title
 
 
-      ↵ select   ↑↓ navigate"
-  `)
 
-  // Open actions panel in detail view
-  await driver.keys.ctrlK()
 
-  const detailActionsSnapshot = await driver.text()
-  expect(detailActionsSnapshot).toMatchInlineSnapshot(`
-    "
 
-     Navigation Example ─────────────────────────────────────────────
 
-     Main view
 
 
-     Items
-     First Item Navigate to first detail
-    ›Second Item Navigate to second detail
-     Third Item Navigate to third detail
 
 
-                                                                 esc
+     ↵ select  ↑↓ ┌────────────────────────────────────┐
+                  │ ✓ Copied to Clipboard - First Item │
+                  └────────────────────────────────────┘"
+  `)
+
+  // Open actions panel in detail view
+  await session.press(['ctrl', 'k'])
 
-      Search actions...
-     ›Open Details
-      Copy Title
+  const detailActionsSnapshot = await session.text()
+  expect(detailActionsSnapshot).toMatchInlineSnapshot(`
+    "
 
 
-      ↵ select   ↑↓ navigate"
+      Detail: Second Item ────────────────────────────────────────────
+
+      Detail view - Press ESC to go back
+
+      Details
+    ┃                                                                  ┃
+    ┃                                                            esc   ┃
+    ┃                                                                  ┃
+    ┃   Search actions...                                              ┃
+    ┃                                                                  ┃
+    ┃  ›Go Back                                                        ┃
+    ┃   Copy Title                                                     ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   ↵ select   ↑↓ navigate                                         ┃
+    ┃                                                                  ┃"
   `)
 
   // Select Go Back action
-  await driver.keys.enter()
+  await session.press('enter')
 
-  const backViaActionSnapshot = await driver.text({
+  const backViaActionSnapshot = await session.text({
     waitFor: (text) => {
       return /Navigation Example/i.test(text)
     },
@@ -430,21 +551,35 @@ test('navigation with actions panel', async () => {
   expect(backViaActionSnapshot).toMatchInlineSnapshot(`
     "
 
-     Detail: Second Item ────────────────────────────────────────────
 
-     Detail view - Press ESC to go back
+     Navigation Example ─────────────────────────────────────────────
+
+     Main view
+
+     Items
+    ›First Item Navigate to first detail
+     Second Item Navigate to second detail
+     Third Item Navigate to third detail
+
+
+
+
+
+
+
 
 
-     Details
-    ›This is the detail view for Second Item Press Enter to go back or E
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+
+     ↵ select  ↑↓ ┌────────────────────────────────────┐
+                  │ ✓ Copied to Clipboard - First Item │
+                  └────────────────────────────────────┘"
   `)
 }, 15000)
 
 test('search functionality in main and detail views', async () => {
-  await driver.text({
+  await session.text({
     waitFor: (text) => {
       // wait for main view to show up
       return /Main view/i.test(text)
@@ -452,9 +587,9 @@ test('search functionality in main and detail views', async () => {
   })
 
   // Type in search bar
-  await driver.keys.type('second')
+  await session.type('second')
 
-  const searchMainSnapshot = await driver.text({
+  const searchMainSnapshot = await session.text({
     waitFor: (text) => {
       return /second/i.test(text)
     },
@@ -462,6 +597,7 @@ test('search functionality in main and detail views', async () => {
   expect(searchMainSnapshot).toMatchInlineSnapshot(`
     "
 
+
     Navigation Example ─────────────────────────────────────────────
 
     second
@@ -469,103 +605,163 @@ test('search functionality in main and detail views', async () => {
     Second Item Navigate to second detail
 
 
-    ↵ select   ↑↓ navigate   ^k actions"
+
+
+
+
+
+
+
+
+
+
+
+
+
+    ↵ select  ↑↓ navigate  ^k actions"
   `)
 
   // Clear search
-  await driver.keys.backspace()
-  await driver.keys.backspace()
-  await driver.keys.backspace()
-  await driver.keys.backspace()
-  await driver.keys.backspace()
-  await driver.keys.backspace()
-
-  const clearedSearchSnapshot = await driver.text()
+  await session.press('backspace')
+  await session.press('backspace')
+  await session.press('backspace')
+  await session.press('backspace')
+  await session.press('backspace')
+  await session.press('backspace')
+
+  const clearedSearchSnapshot = await session.text()
   expect(clearedSearchSnapshot).toMatchInlineSnapshot(`
-      "
+    "
+
+
+     Navigation Example ─────────────────────────────────────────────
+
+     Main view
+
+     Items
+    ›First Item Navigate to first detail
+     Second Item Navigate to second detail
+     Third Item Navigate to third detail
 
-       Navigation Example ─────────────────────────────────────────────
 
-       Main view
 
 
-       Items
-      ›First Item Navigate to first detail
-       Second Item Navigate to second detail
-       Third Item Navigate to third detail
 
 
-       ↵ select   ↑↓ navigate   ^k actions"
-    `)
+
+
+
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
 
   // Open actions for first item
-  await driver.keys.enter()
+  await session.press('enter')
 
   // Navigate to first item detail
-  await driver.keys.enter()
+  await session.press('enter')
 
-  const firstDetailSnapshot = await driver.text({
+  const firstDetailSnapshot = await session.text({
     waitFor: (text) => {
       return /Detail: First Item/i.test(text)
     },
   })
   expect(firstDetailSnapshot).toMatchInlineSnapshot(`
-      "
+    "
+
+
+     Detail: First Item ─────────────────────────────────────────────
+
+     Detail view - Press ESC to go back
+
+     Details
+    ›This is the detail view for First Item Press Enter to go back o
+
+
+
 
-       Detail: First Item ─────────────────────────────────────────────
 
-       Detail view - Press ESC to go back
 
 
-       Details
-      ›This is the detail view for First Item Press Enter to go back or ES
 
 
-       ↵ select   ↑↓ navigate   ^k actions"
-    `)
+
+
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
 
   // Type in detail view search bar
-  await driver.keys.type('test')
+  await session.type('test')
 
-  const searchDetailSnapshot = await driver.text({
+  const searchDetailSnapshot = await session.text({
     waitFor: (text) => {
       return /test/i.test(text)
     },
   })
   expect(searchDetailSnapshot).toMatchInlineSnapshot(`
-      "
+    "
+
 
-      Detail: First Item ─────────────────────────────────────────────
+    Detail: First Item ─────────────────────────────────────────────
 
-      test
+    test
 
 
 
-      ↵ select   ↑↓ navigate   ^k actions"
-    `)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    ↵ select  ↑↓ navigate  ^k actions"
+  `)
 
   // Press ESC to go back
-  await driver.keys.escape()
+  await session.press('esc')
 
-  const finalMainSnapshot = await driver.text({
+  const finalMainSnapshot = await session.text({
     waitFor: (text) => {
       return /Navigation Example/i.test(text)
     },
   })
   expect(finalMainSnapshot).toMatchInlineSnapshot(`
-      "
+    "
 
-       Navigation Example ─────────────────────────────────────────────
 
-       Main view
+     Navigation Example ─────────────────────────────────────────────
+
+     Main view
+
+     Items
+    ›First Item Navigate to first detail
+     Second Item Navigate to second detail
+     Third Item Navigate to third detail
+
 
 
-       Items
-      ›First Item Navigate to first detail
-       Second Item Navigate to second detail
-       Third Item Navigate to third detail
 
 
-       ↵ select   ↑↓ navigate   ^k actions"
-    `)
+
+
+
+
+
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
 }, 10000)