> ## Documentation Index
> Fetch the complete documentation index at: https://piyushvyas.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Multi-Tab Workflows

> Manage multiple browser tabs with tab-new, tab-select, and cross-tab patterns.

## Tab Management Commands

| Command               | Description                                    |
| --------------------- | ---------------------------------------------- |
| `bap tab-new [url]`   | Open a new tab, optionally navigating to a URL |
| `bap tab-select <id>` | Switch to a specific tab                       |
| `bap tab-close [id]`  | Close a tab (defaults to active tab)           |
| `bap tabs`            | List all open tabs                             |

## Basic Multi-Tab Workflow

```bash theme={null}
# Open first tab
bap goto https://docs.example.com

# Open second tab
bap tab-new https://app.example.com

# List tabs to see IDs
bap tabs
# Output:
# page-1: https://docs.example.com (active: false)
# page-2: https://app.example.com (active: true)

# Switch back to first tab
bap tab-select page-1

# Close second tab
bap tab-close page-2
```

## Cross-Tab Data Transfer

A common pattern is extracting data from one tab and using it in another:

```bash theme={null}
# Tab 1: Extract product data
bap goto https://catalog.example.com/product/123
bap extract --fields="name,sku,price"
# Output: { "name": "Widget Pro", "sku": "WP-123", "price": 29.99 }

# Tab 2: Fill order form with extracted data
bap tab-new https://orders.example.com/new
bap act fill:label:"SKU"="WP-123" fill:label:"Product Name"="Widget Pro" fill:label:"Price"="29.99"
```

## TypeScript SDK

```typescript theme={null}
// Create pages in different contexts or the same context
const page1 = await client.createPage({ url: "https://docs.example.com" });
const page2 = await client.createPage({ url: "https://app.example.com" });

// List all pages
const pages = await client.listPages();
for (const page of pages) {
  console.log(`${page.pageId}: ${page.url}`);
}

// Switch active page
await client.activatePage(page1.pageId);

// Perform actions on the active page
await client.click(role("button", "Submit"));

// Close a specific page
await client.closePage(page2.pageId);
```

## Tab-Per-Task Pattern

For agents handling multiple concurrent tasks, dedicate a tab to each:

```typescript theme={null}
// Research tab
const research = await client.createPage({ url: "https://search.example.com" });
await client.fill(label("Search"), "competitive analysis");
await client.click(role("button", "Search"));
const results = await client.extract({
  instruction: "Extract search results",
  schema: {
    type: "array",
    items: { type: "object", properties: { title: { type: "string" }, url: { type: "string" } } },
  },
  mode: "list",
});

// Report tab
const report = await client.createPage({ url: "https://docs.example.com/new" });
await client.activatePage(report.pageId);
await client.fill(label("Title"), "Competitive Analysis");
// Use extracted data...

// Clean up
await client.closePage(research.pageId);
```

## Isolated Contexts

For tabs that need separate authentication or cookie state, use browser contexts:

```typescript theme={null}
// Context 1: Admin user
const adminCtx = await client.createContext({ contextId: "admin" });
await client.createPage({ url: "https://app.example.com", contextId: "admin" });
// Login as admin...

// Context 2: Regular user
const userCtx = await client.createContext({ contextId: "user" });
await client.createPage({ url: "https://app.example.com", contextId: "user" });
// Login as regular user...

// Each context has independent cookies, localStorage, and session state
```

<Note>
  Pages in different browser contexts are fully isolated -- they share no cookies, localStorage, or
  session data. Pages in the same context share state.
</Note>