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

# Boards Introduction

> Individual contact workspaces with customizable panels

Boards in Pockla are **individual contact workspaces**—a dedicated view for each contact where you can see their profile, take notes, chat with AI, run research, and manage all your interactions in one place.

<Frame caption="Boards overview showing panel interactions">
  <video autoPlay muted loop playsInline className="w-full rounded-lg" src="https://mintlify.s3.us-west-1.amazonaws.com/pockla/videos/panels-overview.mp4" />
</Frame>

## What Is a Board?

Each contact in Pockla has their own board. Think of it as a CRM record on steroids:

* **Draggable, resizable panels** arranged in a grid layout
* **Profile information** at a glance
* **Notes** for tracking interactions
* **AI Chat** for asking questions about the contact
* **Enrichment panels** showing AI-generated research
* **Email** integration for viewing and sending messages

Your panel layout is saved automatically—arrange panels however works best for you.

## Accessing a Board

There are several ways to open a contact's board:

1. **From Contacts**: Click a contact row, then click "View Board" from the actions menu
2. **After creating a contact**: When you add a contact from anywhere except the contacts page, you're taken directly to their board
3. **Direct URL**: Navigate to `/board/{contactId}`

<Frame caption="Contact row with 'View Board' action">
  <video autoPlay muted loop playsInline className="w-full rounded-lg" src="https://mintcdn.com/pockla/v59FtjWM8D6AW9ba/videos/contact-panels.mp4?fit=max&auto=format&n=v59FtjWM8D6AW9ba&q=85&s=5a1800a3b891dfc57e95284f04f27975" data-path="videos/contact-panels.mp4" />
</Frame>

## Default Panels

Every board starts with these core panels:

### Profile Panel

Shows essential contact information at a glance:

* **Avatar** (generated from email)
* **Name and title**
* **Company**
* **Status badge** (Lead, Prospect, Customer, Churned)
* **Quick actions**: Email button, Website link
* **Contact details**: Email, phone

<Frame caption="Profile panel close-up">
  <img src="https://mintcdn.com/pockla/u-3drTgZOvHsZmnh/screenshots/profile-panel.png?fit=max&auto=format&n=u-3drTgZOvHsZmnh&q=85&s=695a336c21cffc92ea6705f4b418f07e" alt="Profile panel" width="4021" height="2160" data-path="screenshots/profile-panel.png" />
</Frame>

### AI Chat Panel

Chat with an AI assistant that knows about this contact. Ask questions, get suggestions for outreach, or brainstorm talking points.

The chat history is saved per-contact, so you can continue conversations across sessions.

<Frame caption="AI Chat panel with conversation">
  <video autoPlay muted loop playsInline className="w-full rounded-lg" src="https://mintcdn.com/pockla/u-3drTgZOvHsZmnh/videos/AI-panel.mp4?fit=max&auto=format&n=u-3drTgZOvHsZmnh&q=85&s=3a3eafb44f796087c2bc1416f46fa7e1" data-path="videos/AI-panel.mp4" />
</Frame>

### Notes Panel

Keep track of your interactions:

* **Add notes** with title and rich text content
* **View all notes** in a list format
* **Click to expand** any note to see full details
* **Edit notes** inline
* **Copy content** with one click

Notes support Markdown formatting and are timestamped automatically.

<Frame caption="Notes panel with multiple notes">
  <video autoPlay muted loop playsInline className="w-full rounded-lg" src="https://mintcdn.com/pockla/v59FtjWM8D6AW9ba/videos/notes-panel.mp4?fit=max&auto=format&n=v59FtjWM8D6AW9ba&q=85&s=5eafb6e018757b1289c1c3da735c50ab" data-path="videos/notes-panel.mp4" />
</Frame>

## Adding Panels

Click the **"+ Add Panel"** button in the board header to add more panels.

<Frame caption="Add Panel modal showing available panel types">
  <img src="https://mintcdn.com/pockla/u-3drTgZOvHsZmnh/screenshots/add-panel.png?fit=max&auto=format&n=u-3drTgZOvHsZmnh&q=85&s=0b66bc5d0b77d9f45f76f846794367e2" alt="Add Panel modal" width="4021" height="2160" data-path="screenshots/add-panel.png" />
</Frame>

### Available Panel Types

| Panel Type     | Description                                      |
| -------------- | ------------------------------------------------ |
| **Profile**    | Contact information (included by default)        |
| **Notes**      | Meeting notes, call logs, interaction history    |
| **Emails**     | Email history and compose (requires email setup) |
| **AI Chat**    | Conversational AI assistant for this contact     |
| **Enrichment** | AI-powered research panels (custom objectives)   |

### Creating an Enrichment Panel

Enrichment panels are powered by the [Research Agent](/data/research-agent). When adding one:

1. Click **"+ Add Panel"**
2. Select **"New Research"**
3. Configure the research:
   * **Title**: What to call this panel (e.g., "Funding News")
   * **Objective**: What you want to learn (e.g., "Find recent funding announcements for {company}")
   * **Output format**: How to structure results (e.g., "Bullet points with sources")
   * **Iterations**: How deep to research (1-10)
4. Click **Create**

<Frame caption="Enrichment panel configuration">
  <img src="https://mintcdn.com/pockla/u-3drTgZOvHsZmnh/screenshots/Enrichment-Panel.png?fit=max&auto=format&n=u-3drTgZOvHsZmnh&q=85&s=19ab1d0778780145187c5355ec271934" alt="Enrichment panel configuration" width="4021" height="2160" data-path="screenshots/Enrichment-Panel.png" />
</Frame>

The new panel appears on your board and automatically runs the research.

<Frame caption="Enrichment panel with completed research">
  <img src="https://mintcdn.com/pockla/u-3drTgZOvHsZmnh/screenshots/Enrichment-Results-Panel.png?fit=max&auto=format&n=u-3drTgZOvHsZmnh&q=85&s=b2cb10591dcb45887e438b265c4d3604" alt="Enrichment panel with completed research" width="4021" height="2160" data-path="screenshots/Enrichment-Results-Panel.png" />
</Frame>

## Panel Interactions

### Drag & Drop

Rearrange panels by dragging their header bar:

* Panels snap to a 12-column grid
* Other panels automatically move to make room
* Layout saves automatically

<Frame caption="Dragging panels to rearrange">
  <video autoPlay muted loop playsInline className="w-full rounded-lg" src="https://mintcdn.com/pockla/v59FtjWM8D6AW9ba/videos/drag-panels.mp4?fit=max&auto=format&n=v59FtjWM8D6AW9ba&q=85&s=8226eef3358aeb4bc88fdbfd64ad1c7b" data-path="videos/drag-panels.mp4" />
</Frame>

### Resize

Drag panel edges or corners to resize:

* Minimum size is enforced per panel type
* Grid-based sizing ensures clean layouts

<Frame caption="Resizing a panel">
  <video autoPlay muted loop playsInline className="w-full rounded-lg" src="https://mintcdn.com/pockla/v59FtjWM8D6AW9ba/videos/resize-panel.mp4?fit=max&auto=format&n=v59FtjWM8D6AW9ba&q=85&s=fd766b62fdf9dee53bec5fc00356cd0a" data-path="videos/resize-panel.mp4" />
</Frame>

### Minimize / Maximize

Use the panel header controls:

* **Minimize** (−): Collapse to just the header bar
* **Maximize** (⤢): Expand to fill the board
* **Close** (×): Remove the panel from your board

### Edit Enrichment Panels

For enrichment/research panels:

1. Click the **pencil icon** in the panel header
2. Modify the research configuration
3. Choose to **Save** or **Save & Re-run**

Re-running regenerates the research with new parameters.

## Panel Types in Detail

### Emails Panel

<Note>
  Requires [email integration](/boards/adding-email) to be configured.
</Note>

View email history with this contact:

* See sent and received emails
* Compose new emails directly
* Track opens and clicks

<Frame caption="Emails panel showing email thread">
  <img src="https://mintcdn.com/pockla/u-3drTgZOvHsZmnh/screenshots/Viewing-Emails.png?fit=max&auto=format&n=u-3drTgZOvHsZmnh&q=85&s=aa751cceabd3cdbad72ed6c20ddce411" alt="Emails panel showing email thread" width="4021" height="2160" data-path="screenshots/Viewing-Emails.png" />
</Frame>

### Enrichment Panel

Shows AI-generated research about the contact or their company:

| Status         | Display                                        |
| -------------- | ---------------------------------------------- |
| **Pending**    | "Pending" badge                                |
| **Generating** | Spinner animation                              |
| **Completed**  | Full research content with Markdown formatting |
| **Failed**     | Error message with retry option                |

Click the **refresh icon** to re-run research at any time.

## Board Architecture

Under the hood, boards use:

* **react-grid-layout**: For the draggable/resizable grid
* **Per-user layouts**: Your arrangement is saved and synced
* **Per-contact data**: Notes, chat history, and enrichments are stored per contact
* **Real-time updates**: Changes sync across tabs/devices

## Tips & Best Practices

<AccordionGroup>
  <Accordion title="Arrange panels for your workflow">
    Put frequently-used panels at the top left. Consider a layout like:

    * **Top row**: Profile (narrow) + AI Chat (wide)
    * **Middle row**: Research panels
    * **Bottom row**: Notes + Emails
  </Accordion>

  <Accordion title="Use enrichment panels strategically">
    Create different enrichment panels for different research needs:

    * "Recent News" for keeping up with company updates
    * "Talking Points" for personalized outreach ideas
    * "Competitor Analysis" for sales intelligence
  </Accordion>

  <Accordion title="Take notes after every interaction">
    Build a history of your relationship with each contact. Future you (and teammates) will thank you.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Set Up Email" icon="envelope" href="/boards/adding-email">
    Send emails directly from boards
  </Card>

  <Card title="Research Agent" icon="robot" href="/data/research-agent">
    Configure AI-powered research
  </Card>

  <Card title="Enrich Data" icon="sparkles" href="/data/enriching-data">
    Auto-populate contact data
  </Card>
</CardGroup>
