# BrainList

> Zekra-style list of AI brains as a table or cards with status, access, memory and source counts, members, tags and last activity, plus search, filters, bulk select and loading and empty states.

Source: https://docs.nasaqui.com/components/brain-list

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/brain-list.json
```

A shared-memory workspace list. Each brain shows its mark, name and description, whether it is ready, indexing,
paused or in error, who can reach it (private, team, public), how many memories, sources and chats it holds, its
members and when it was last used. It is `EntityList` with the columns, cards and filters set up, plus a
standalone `BrainCard`.

## When to use

- A page that lists the brains (knowledge bases, agents) of a workspace.
- `BrainCard` alone in a dashboard, a picker or a search result.

## When not to use

- Chatting with a brain: use [`CopilotChat`](https://docs.nasaqui.com/components/copilot-chat).
- Other records: build on [`EntityList`](https://docs.nasaqui.com/components/entity-list).

## Import

```tsx
import { BrainCard, BrainList } from "@fadymondy/nasaq/web";
```

## Quick start

```tsx
import { BrainList, type BrainSummary } from "@fadymondy/nasaq/web";

const brains: BrainSummary[] = [
  { id: "1", name: "Company handbook", description: "Policies and guides.", avatar: "📘", status: "ready", visibility: "team", memories: 1842, sources: 6, chats: 412 },
];

export function Brains() {
  return <BrainList brains={brains} onRowClick={(b) => open(b.id)} />;
}
```

## Anatomy

`BrainList` renders `EntityList`. Columns: name (mark, name, description), status, access, memories, sources, chats
(hidden by default), members, model (hidden by default), tags (hidden by default), last active. Facets: status,
access, tag. The card view renders `BrainCard`.

## API

`BrainListProps` extends the `EntityList` props (`view`, `defaultView`, `pageSize`, `selectable`, `toolbar`,
`bulkActions`, `rowActions`, `onRowClick`, `loading`, `error`, `onRetry`, `empty`, `defaultSort`, `className`).

| Prop | Type | Description |
| --- | --- | --- |
| `brains` | `BrainSummary[]` | `{ id, name, description?, avatar?, status, visibility, memories, sources, chats?, model?, members?, tags?, lastActive? }`. |
| `label` | `string` | Accessible name. Default "Brains" / "العقول". |
| `labels` | `Partial<BrainListLabels>` | Override any string, including `statuses` and `visibilities`. |

`BrainCard` takes `brain`, `footer` (extra content such as buttons), `labels` and `className`.

`avatar` is an emoji or an image URL (`https://`, `/` or `data:`); without one a brain icon is shown.

## Examples

**Cards only, with an Open button**

```tsx
<BrainList brains={brains} defaultView="cards" views={["cards"]} />
```

**A card in a dashboard**

```tsx
<BrainCard brain={brain} footer={<Button size="sm">Open</Button>} />
```

## Accessibility

Inherited from `EntityList`. Status and access are text plus an icon, never colour alone. The brain mark is
decorative; the name is the accessible label of the row and the card.

## RTL & i18n

- English and Arabic strings ship, including status and access names. Counts and dates follow the locale.
- The model name is set left-to-right. Card counts and members flow from the inline start.

## Styling & tokens

- Status tones come from `Status`; the access chip is an outline `Badge`. Surfaces use `bg-secondary` and `border-border`.

## Do / Don't

- Do keep `memories` and `sources` as plain counts; the component formats them (compact on cards).
- Don't rely on `avatar` for meaning; the name always carries it.

## Related

- [`EntityList`](https://docs.nasaqui.com/components/entity-list)
- [`ProjectList`](https://docs.nasaqui.com/components/project-list)
- [`CopilotChat`](https://docs.nasaqui.com/components/copilot-chat)

## Lab

https://docs.nasaqui.com/?path=/docs/components-ai-agents-brain-list--docs

## Code

### React

```tsx
import { BrainList, type BrainSummary } from "@fadymondy/nasaq/web";

const brains: BrainSummary[] = [
  { id: "1", name: "Company handbook", description: "Policies and guides.", avatar: "📘", status: "ready", visibility: "team", memories: 1842, sources: 6, chats: 412 },
];

export function Brains() {
  return <BrainList brains={brains} onRowClick={(b) => open(b.id)} />;
}
```

### shadcn

```tsx
import { BrainList, type BrainSummary } from "@/components/ui/brain-list";

const brains: BrainSummary[] = [
  { id: "1", name: "Company handbook", description: "Policies and guides.", avatar: "📘", status: "ready", visibility: "team", memories: 1842, sources: 6, chats: 412 },
];

export function Brains() {
  return <BrainList brains={brains} onRowClick={(b) => open(b.id)} />;
}
```

### Vue

```vue
<script setup lang="ts">
import { NqBrainList, type BrainSummary } from "@fadymondy/nasaq/vue";

const brains: BrainSummary[] = [
  { id: "1", name: "Company handbook", description: "Policies and guides.", avatar: "📘", status: "ready", visibility: "team", memories: 1842, sources: 6, chats: 412 },
];
</script>

<template>
  <NqBrainList :brains="brains" :on-row-click="(b: BrainSummary) => console.log(b.id)" />
</template>
```

### Blade

```blade
<x-nq::brain-list :brains="[
    ['id' => '1', 'name' => 'Company handbook', 'description' => 'Policies and guides.', 'avatar' => '📘', 'status' => 'ready', 'visibility' => 'team', 'memories' => 1842, 'sources' => 6, 'chats' => 412],
]" />
{{-- <x-nq::brain-list :brains="$brains" /> Bubbling events: nq-entity-list-row-click { row } (row.id is the brain id). See the component header for the brains shape and labels. --}}
```

### HTML + Alpine

```html
<div data-slot="brain-list" class="min-w-0">
    <div data-slot="entity-list" x-data="nqEntityList(JSON.parse('[{\u0022id\u0022:\u00221\u0022,\u0022name\u0022:\u0022Company handbook\u0022,\u0022status\u0022:\u0022ready\u0022,\u0022statusLabel\u0022:\u0022Ready\u0022,\u0022visibility\u0022:\u0022team\u0022,\u0022visibilityLabel\u0022:\u0022Team\u0022,\u0022memories\u0022:1842,\u0022sources\u0022:6,\u0022memoriesText\u0022:\u00221,842\u0022,\u0022sourcesText\u0022:\u00226\u0022,\u0022tags\u0022:[],\u0022membersText\u0022:\u0022\\u2014\u0022,\u0022lastActive\u0022:\u0022\\u2014\u0022,\u0022card\u0022:\u0022\\u003Cdiv data-slot=\\u0022brain-card\\u0022 class=\\u0022flex min-w-0 flex-col gap-3\\u0022\\u003E\\n    \\u003Cdiv class=\\u0022flex min-w-0 items-start gap-3 pe-(--entity-card-controls)\\u0022\\u003E\\n        \\u003Cspan aria-hidden=\\u0022true\\u0022 class=\\u0022inline-flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-control border border-border bg-secondary text-h3 text-foreground\\u0022\\u003E\\n            \\ud83d\\udcd8\\n                    \\u003C\\\/span\\u003E\\n        \\u003Cdiv class=\\u0022flex min-w-0 flex-1 flex-col gap-0.5\\u0022\\u003E\\n            \\u003Cspan class=\\u0022truncate text-label text-foreground\\u0022\\u003ECompany handbook\\u003C\\\/span\\u003E\\n            \\u003Cspan class=\\u0022line-clamp-2 text-body-sm text-muted-foreground\\u0022\\u003EPolicies and guides.\\u003C\\\/span\\u003E        \\u003C\\\/div\\u003E\\n    \\u003C\\\/div\\u003E\\n    \\u003Cdiv class=\\u0022flex flex-wrap items-center gap-1.5\\u0022\\u003E\\n        \\u003Cspan data-slot=\\u0022status\\u0022 data-tone=\\u0022success\\u0022 class=\\u0022inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground\\u0022\\u003E\\n            \\u003Csvg aria-hidden=\\u0022true\\u0022 class=\\u0022size-3.5 shrink-0 text-nq-success-text\\u0022 xmlns=\\u0022http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\u0022 viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 stroke=\\u0022currentColor\\u0022 stroke-width=\\u00222\\u0022 stroke-linecap=\\u0022round\\u0022 stroke-linejoin=\\u0022round\\u0022\\u003E\\n  \\u003Ccircle cx=\\u002212\\u0022 cy=\\u002212\\u0022 r=\\u002210\\u0022\\\/\\u003E\\n  \\u003Cpath d=\\u0022m9 12 2 2 4-4\\u0022\\\/\\u003E\\n\\u003C\\\/svg\\u003E        \\u003Cspan class=\\u0022truncate\\u0022  title=\\u0022Ready\\u0022 \\u003EReady\\u003C\\\/span\\u003E\\n\\u003C\\\/span\\u003E\\n        \\u003Cspan data-slot=\\u0022badge\\u0022     class=\\u0022inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [\\u0026_svg]:size-3 border-border text-muted-foreground\\u0022\\u003E\\u003Csvg aria-hidden=\\u0022true\\u0022 xmlns=\\u0022http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\u0022 viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 stroke=\\u0022currentColor\\u0022 stroke-width=\\u00222\\u0022 stroke-linecap=\\u0022round\\u0022 stroke-linejoin=\\u0022round\\u0022\\u003E\\n  \\u003Cpath d=\\u0022M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\\u0022\\\/\\u003E\\n  \\u003Cpath d=\\u0022M16 3.128a4 4 0 0 1 0 7.744\\u0022\\\/\\u003E\\n  \\u003Cpath d=\\u0022M22 21v-2a4 4 0 0 0-3-3.87\\u0022\\\/\\u003E\\n  \\u003Ccircle cx=\\u00229\\u0022 cy=\\u00227\\u0022 r=\\u00224\\u0022\\\/\\u003E\\n\\u003C\\\/svg\\u003ETeam\\u003C\\\/span\\u003E\\n    \\u003C\\\/div\\u003E\\n    \\u003Cdl class=\\u0022grid w-full grid-cols-3 gap-1 rounded-control bg-secondary px-1 py-2 text-center\\u0022\\u003E\\n                    \\u003Cdiv class=\\u0022flex min-w-0 flex-col items-center gap-0.5\\u0022\\u003E\\n                \\u003Cdt class=\\u0022flex max-w-full items-center gap-1 text-caption text-muted-foreground\\u0022\\u003E\\u003Cspan class=\\u0022truncate\\u0022 title=\\u0022Memories\\u0022\\u003EMemories\\u003C\\\/span\\u003E\\u003C\\\/dt\\u003E\\n                \\u003Cdd class=\\u0022text-label tabular-nums text-foreground\\u0022\\u003E1.8K\\u003C\\\/dd\\u003E\\n            \\u003C\\\/div\\u003E\\n                    \\u003Cdiv class=\\u0022flex min-w-0 flex-col items-center gap-0.5\\u0022\\u003E\\n                \\u003Cdt class=\\u0022flex max-w-full items-center gap-1 text-caption text-muted-foreground\\u0022\\u003E\\u003Cspan class=\\u0022truncate\\u0022 title=\\u0022Sources\\u0022\\u003ESources\\u003C\\\/span\\u003E\\u003C\\\/dt\\u003E\\n                \\u003Cdd class=\\u0022text-label tabular-nums text-foreground\\u0022\\u003E6\\u003C\\\/dd\\u003E\\n            \\u003C\\\/div\\u003E\\n                    \\u003Cdiv class=\\u0022flex min-w-0 flex-col items-center gap-0.5\\u0022\\u003E\\n                \\u003Cdt class=\\u0022flex max-w-full items-center gap-1 text-caption text-muted-foreground\\u0022\\u003E\\u003Cspan class=\\u0022truncate\\u0022 title=\\u0022Chats\\u0022\\u003EChats\\u003C\\\/span\\u003E\\u003C\\\/dt\\u003E\\n                \\u003Cdd class=\\u0022text-label tabular-nums text-foreground\\u0022\\u003E412\\u003C\\\/dd\\u003E\\n            \\u003C\\\/div\\u003E\\n            \\u003C\\\/dl\\u003E\\n        \\u003Cdiv class=\\u0022flex items-center justify-between gap-2\\u0022\\u003E\\n        \\u003Cspan class=\\u0022text-muted-foreground\\u0022\\u003E\\u2014\\u003C\\\/span\\u003E\\n            \\u003C\\\/div\\u003E\\n\\u003C\\\/div\\u003E\u0022,\u0022nameCell\u0022:\u0022\\u003Cspan class=\\u0022flex min-w-0 items-center gap-3\\u0022\\u003E\\n    \\u003Cspan aria-hidden=\\u0022true\\u0022 class=\\u0022inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-control border border-border bg-secondary text-body text-foreground\\u0022\\u003E\\n        \\ud83d\\udcd8\\n            \\u003C\\\/span\\u003E\\n    \\u003Cspan class=\\u0022flex min-w-0 flex-col\\u0022\\u003E\\n        \\u003Cspan class=\\u0022truncate text-label text-foreground\\u0022\\u003ECompany handbook\\u003C\\\/span\\u003E\\n        \\u003Cspan class=\\u0022truncate text-body-sm text-muted-foreground\\u0022\\u003EPolicies and guides.\\u003C\\\/span\\u003E    \\u003C\\\/span\\u003E\\n\\u003C\\\/span\\u003E\u0022,\u0022statusCell\u0022:\u0022\\u003Cspan data-slot=\\u0022status\\u0022 data-tone=\\u0022success\\u0022 class=\\u0022inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground\\u0022\\u003E\\n            \\u003Csvg aria-hidden=\\u0022true\\u0022 class=\\u0022size-3.5 shrink-0 text-nq-success-text\\u0022 xmlns=\\u0022http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\u0022 viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 stroke=\\u0022currentColor\\u0022 stroke-width=\\u00222\\u0022 stroke-linecap=\\u0022round\\u0022 stroke-linejoin=\\u0022round\\u0022\\u003E\\n  \\u003Ccircle cx=\\u002212\\u0022 cy=\\u002212\\u0022 r=\\u002210\\u0022\\\/\\u003E\\n  \\u003Cpath d=\\u0022m9 12 2 2 4-4\\u0022\\\/\\u003E\\n\\u003C\\\/svg\\u003E        \\u003Cspan class=\\u0022truncate\\u0022  title=\\u0022Ready\\u0022 \\u003EReady\\u003C\\\/span\\u003E\\n\\u003C\\\/span\\u003E\u0022,\u0022visibilityCell\u0022:\u0022\\u003Cspan class=\\u0022inline-flex items-center gap-1.5 text-body-sm\\u0022\\u003E\\u003Csvg aria-hidden=\\u0022true\\u0022 class=\\u0022size-3.5 text-muted-foreground\\u0022 xmlns=\\u0022http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\u0022 viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 stroke=\\u0022currentColor\\u0022 stroke-width=\\u00222\\u0022 stroke-linecap=\\u0022round\\u0022 stroke-linejoin=\\u0022round\\u0022\\u003E\\n  \\u003Cpath d=\\u0022M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\\u0022\\\/\\u003E\\n  \\u003Cpath d=\\u0022M16 3.128a4 4 0 0 1 0 7.744\\u0022\\\/\\u003E\\n  \\u003Cpath d=\\u0022M22 21v-2a4 4 0 0 0-3-3.87\\u0022\\\/\\u003E\\n  \\u003Ccircle cx=\\u00229\\u0022 cy=\\u00227\\u0022 r=\\u00224\\u0022\\\/\\u003E\\n\\u003C\\\/svg\\u003ETeam\\u003C\\\/span\\u003E\u0022,\u0022membersCell\u0022:\u0022\\u003Cspan class=\\u0022text-muted-foreground\\u0022\\u003E\\u2014\\u003C\\\/span\\u003E\u0022,\u0022activityCell\u0022:\u0022\\u003Cspan class=\\u0022text-muted-foreground\\u0022\\u003E\\u2014\\u003C\\\/span\\u003E\u0022,\u0022statusRank\u0022:0,\u0022visibilityRank\u0022:1,\u0022activityTs\u0022:0,\u0022memoriesNum\u0022:1842,\u0022sourcesNum\u0022:6}]'), JSON.parse('[{\u0022id\u0022:\u0022name\u0022,\u0022type\u0022:\u0022html\u0022,\u0022key\u0022:\u0022nameCell\u0022,\u0022sortKey\u0022:\u0022name\u0022,\u0022header\u0022:\u0022Brain\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true},{\u0022id\u0022:\u0022status\u0022,\u0022type\u0022:\u0022html\u0022,\u0022key\u0022:\u0022statusCell\u0022,\u0022sortKey\u0022:\u0022statusRank\u0022,\u0022header\u0022:\u0022Status\u0022,\u0022sortable\u0022:true},{\u0022id\u0022:\u0022visibility\u0022,\u0022type\u0022:\u0022html\u0022,\u0022key\u0022:\u0022visibilityCell\u0022,\u0022sortKey\u0022:\u0022visibilityRank\u0022,\u0022header\u0022:\u0022Access\u0022,\u0022sortable\u0022:true},{\u0022id\u0022:\u0022memories\u0022,\u0022key\u0022:\u0022memoriesText\u0022,\u0022sortKey\u0022:\u0022memoriesNum\u0022,\u0022header\u0022:\u0022Memories\u0022,\u0022align\u0022:\u0022end\u0022,\u0022sortable\u0022:true,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022sources\u0022,\u0022key\u0022:\u0022sourcesText\u0022,\u0022sortKey\u0022:\u0022sourcesNum\u0022,\u0022header\u0022:\u0022Sources\u0022,\u0022align\u0022:\u0022end\u0022,\u0022sortable\u0022:true,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022members\u0022,\u0022type\u0022:\u0022html\u0022,\u0022key\u0022:\u0022membersCell\u0022,\u0022header\u0022:\u0022Members\u0022},{\u0022id\u0022:\u0022lastActive\u0022,\u0022type\u0022:\u0022html\u0022,\u0022key\u0022:\u0022activityCell\u0022,\u0022sortKey\u0022:\u0022activityTs\u0022,\u0022header\u0022:\u0022Last active\u0022,\u0022align\u0022:\u0022end\u0022,\u0022sortable\u0022:true}]'), JSON.parse('{\u0022view\u0022:\u0022table\u0022,\u0022views\u0022:[\u0022table\u0022,\u0022cards\u0022],\u0022facets\u0022:[{\u0022id\u0022:\u0022status\u0022,\u0022title\u0022:\u0022Status\u0022,\u0022key\u0022:\u0022status\u0022,\u0022options\u0022:[{\u0022value\u0022:\u0022ready\u0022,\u0022label\u0022:\u0022Ready\u0022},{\u0022value\u0022:\u0022indexing\u0022,\u0022label\u0022:\u0022Indexing\u0022},{\u0022value\u0022:\u0022paused\u0022,\u0022label\u0022:\u0022Paused\u0022},{\u0022value\u0022:\u0022error\u0022,\u0022label\u0022:\u0022Needs attention\u0022}]},{\u0022id\u0022:\u0022visibility\u0022,\u0022title\u0022:\u0022Access\u0022,\u0022key\u0022:\u0022visibility\u0022,\u0022options\u0022:[{\u0022value\u0022:\u0022private\u0022,\u0022label\u0022:\u0022Private\u0022},{\u0022value\u0022:\u0022team\u0022,\u0022label\u0022:\u0022Team\u0022},{\u0022value\u0022:\u0022public\u0022,\u0022label\u0022:\u0022Public\u0022}]}],\u0022locale\u0022:\u0022en\u0022,\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022results\u0022:\u0022{n} results\u0022,\u0022resultsOne\u0022:\u00221 result\u0022}}'))" x-modelable="rows"
    x-bind:data-view="view" class="flex min-w-0 flex-col gap-3">
    <div data-slot="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                    <button type="button" role="checkbox" data-slot="checkbox" aria-label="Select all on this page" x-on:click="togglePage()" x-show="view === 'cards'" style="display: none"
                x-bind:aria-checked="pageSelection() === 'all' ? 'true' : (pageSelection() === 'some' ? 'mixed' : 'false')"
                x-bind:data-checked="pageSelection() === 'all' ? '' : null" x-bind:data-indeterminate="pageSelection() === 'some' ? '' : null" aria-checked="false" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus after:absolute after:-inset-1 align-middle me-1">
                <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="pageSelection() !== 'none'" style="display: none">
                    <x-lucide-minus aria-hidden="true" x-show="pageSelection() === 'some'" style="display: none" />
                    <x-lucide-check aria-hidden="true" x-show="pageSelection() === 'all'" style="display: none" />
                </span>
            </button>
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search brains…" aria-label="Search brains…" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control-sm ps-8 pe-8 text-body-sm [&::-webkit-search-cancel-button]:hidden">
                <button type="button" x-show="query" aria-label="Clear search" x-on:click="query = ''" style="display: none"
                    class="absolute end-1.5 top-1/2 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                    <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>                </button>
            </div>
                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:class="facetCount(&#039;status&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="status" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 5h20"/>
  <path d="M6 12h12"/>
  <path d="M9 19h6"/>
</svg>                    Status
                    <span data-slot="badge" x-show="facetCount('status')" x-text="facetSummary('status')" style="display: none"
                        class="-me-1 inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium tabular-nums text-muted-foreground"></span></button>
                <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 max-h-80 min-w-48 overflow-y-auto"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|ready&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Ready
</div>
                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|indexing&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Indexing
</div>
                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|paused&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Paused
</div>
                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|error&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Needs attention
</div></div>
                    <div x-show="facetCount('status')" style="display: none">
                        <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="resetFacet(&#039;status&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Reset</div>
                    </div></div>
</template></div>
                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:class="facetCount(&#039;visibility&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="visibility" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 5h20"/>
  <path d="M6 12h12"/>
  <path d="M9 19h6"/>
</svg>                    Access
                    <span data-slot="badge" x-show="facetCount('visibility')" x-text="facetSummary('visibility')" style="display: none"
                        class="-me-1 inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium tabular-nums text-muted-foreground"></span></button>
                <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 max-h-80 min-w-48 overflow-y-auto"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;visibility|private&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Private
</div>
                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;visibility|team&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Team
</div>
                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;visibility|public&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Public
</div></div>
                    <div x-show="facetCount('visibility')" style="display: none">
                        <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="resetFacet(&#039;visibility&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Reset</div>
                    </div></div>
</template></div>
        <button data-slot="entity-list-clear"
     type="button"                         x-show="isFiltered()" x-on:click="clearAll()" style="display: none" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>            Clear filters</button>
        <div class="ms-auto flex flex-wrap items-center gap-2">
                                                    <div x-show="view === 'cards'" style="display: none">
                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="entity-list-sort"
     type="button"                         x-bind="trigger" x-ref="trigger" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m3 16 4 4 4-4"/>
  <path d="M7 20V4"/>
  <path d="m21 8-4-4-4 4"/>
  <path d="M17 4v16"/>
</svg>                            Sort</button>
                        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Sort by</div>
                                                                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="toggleSort(&#039;name&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1">Brain</span>
                                            <span aria-hidden="true" class="text-muted-foreground" x-text="sort?.id === 'name' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span></div>
                                                                                                                                                <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="toggleSort(&#039;status&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1">Status</span>
                                            <span aria-hidden="true" class="text-muted-foreground" x-text="sort?.id === 'status' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span></div>
                                                                                                                                                <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="toggleSort(&#039;visibility&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1">Access</span>
                                            <span aria-hidden="true" class="text-muted-foreground" x-text="sort?.id === 'visibility' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span></div>
                                                                                                                                                <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="toggleSort(&#039;memories&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1">Memories</span>
                                            <span aria-hidden="true" class="text-muted-foreground" x-text="sort?.id === 'memories' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span></div>
                                                                                                                                                <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="toggleSort(&#039;sources&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1">Sources</span>
                                            <span aria-hidden="true" class="text-muted-foreground" x-text="sort?.id === 'sources' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span></div>
                                                                                                                                                                                                                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="toggleSort(&#039;lastActive&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1">Last active</span>
                                            <span aria-hidden="true" class="text-muted-foreground" x-text="sort?.id === 'lastActive' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span></div></div></div>
</template></div>
                </div>
                                        <div role="group" data-slot="toggle-group" aria-label="Layout" class="flex w-fit max-w-full gap-0.5 rounded-control bg-secondary p-0.5">
                                            <button type="button" data-slot="toggle" aria-label="Table view" x-on:click="setView('table')" x-bind:aria-pressed="view === 'table' ? 'true' : 'false'"
                            x-bind:data-pressed="view === 'table' ? '' : null"
                            class="inline-flex h-control-sm min-w-control-sm items-center justify-center rounded-[calc(var(--radius-control)-2px)] px-2 text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-sm [&_svg]:size-4">
                            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 5h.01"/>
  <path d="M3 12h.01"/>
  <path d="M3 19h.01"/>
  <path d="M8 5h13"/>
  <path d="M8 12h13"/>
  <path d="M8 19h13"/>
</svg>                        </button>
                                            <button type="button" data-slot="toggle" aria-label="Card view" x-on:click="setView('cards')" x-bind:aria-pressed="view === 'cards' ? 'true' : 'false'"
                            x-bind:data-pressed="view === 'cards' ? '' : null"
                            class="inline-flex h-control-sm min-w-control-sm items-center justify-center rounded-[calc(var(--radius-control)-2px)] px-2 text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-sm [&_svg]:size-4">
                            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="7" height="7" x="3" y="3" rx="1"/>
  <rect width="7" height="7" x="14" y="3" rx="1"/>
  <rect width="7" height="7" x="14" y="14" rx="1"/>
  <rect width="7" height="7" x="3" y="14" rx="1"/>
</svg>                        </button>
                                    </div>
                    </div>
    </div>
            <div data-slot="data-table-bulk-actions" role="toolbar" x-bind:aria-label="say('selected').replace('{n}', selectedCount())" x-bind:hidden="selectedCount() === 0" hidden
            class="flex flex-wrap items-center gap-2 rounded-control bg-nq-selected py-1 ps-3 pe-1">
            <span aria-live="polite" class="me-auto text-label tabular-nums text-foreground" x-text="say('selected').replace('{n}', selectedCount())"></span>
                        <button type="button" aria-label="Clear selection" x-on:click="clearSelection()" class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
        </div>
    <span role="status" aria-live="polite" class="sr-only" x-text="status()"></span>
        <div x-show="view === 'table'" style="display: none" data-slot="table-container" role="region" tabindex="0" aria-label="Brains"
            class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
            <div data-slot="table" role="table" aria-label="Brains"  style="grid-template-columns: repeat(8, auto)" class="grid w-full min-w-max text-body-sm">
                <div data-slot="table-header" role="rowgroup" class="contents">
                    <div role="row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                        <div role="columnheader" class="flex h-row w-10 items-center"><span class="sr-only">Select all on this page</span></div>                                                    <div role="columnheader" data-slot="table-head"   x-bind:aria-sort="sortState('name')"                                 class="flex h-row items-center px-4 text-caption font-medium whitespace-nowrap text-muted-foreground text-start">
                                                                    <button type="button" x-on:click="toggleSort('name')" class="inline-flex items-center gap-1.5 rounded-control outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        Brain
                                        <span aria-hidden="true" x-text="sort?.id === 'name' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span>
                                    </button>
                                                            </div>
                                                    <div role="columnheader" data-slot="table-head"   x-bind:aria-sort="sortState('status')"                                 class="flex h-row items-center px-4 text-caption font-medium whitespace-nowrap text-muted-foreground text-start">
                                                                    <button type="button" x-on:click="toggleSort('status')" class="inline-flex items-center gap-1.5 rounded-control outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        Status
                                        <span aria-hidden="true" x-text="sort?.id === 'status' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span>
                                    </button>
                                                            </div>
                                                    <div role="columnheader" data-slot="table-head"   x-bind:aria-sort="sortState('visibility')"                                 class="flex h-row items-center px-4 text-caption font-medium whitespace-nowrap text-muted-foreground text-start">
                                                                    <button type="button" x-on:click="toggleSort('visibility')" class="inline-flex items-center gap-1.5 rounded-control outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        Access
                                        <span aria-hidden="true" x-text="sort?.id === 'visibility' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span>
                                    </button>
                                                            </div>
                                                    <div role="columnheader" data-slot="table-head"   x-bind:aria-sort="sortState('memories')"                                 class="flex h-row items-center px-4 text-caption font-medium whitespace-nowrap text-muted-foreground justify-end text-end">
                                                                    <button type="button" x-on:click="toggleSort('memories')" class="inline-flex items-center gap-1.5 rounded-control outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        Memories
                                        <span aria-hidden="true" x-text="sort?.id === 'memories' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span>
                                    </button>
                                                            </div>
                                                    <div role="columnheader" data-slot="table-head"   x-bind:aria-sort="sortState('sources')"                                 class="flex h-row items-center px-4 text-caption font-medium whitespace-nowrap text-muted-foreground justify-end text-end">
                                                                    <button type="button" x-on:click="toggleSort('sources')" class="inline-flex items-center gap-1.5 rounded-control outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        Sources
                                        <span aria-hidden="true" x-text="sort?.id === 'sources' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span>
                                    </button>
                                                            </div>
                                                    <div role="columnheader" data-slot="table-head"                                  class="flex h-row items-center px-4 text-caption font-medium whitespace-nowrap text-muted-foreground text-start">
                                                                    Members
                                                            </div>
                                                    <div role="columnheader" data-slot="table-head"   x-bind:aria-sort="sortState('lastActive')"                                 class="flex h-row items-center px-4 text-caption font-medium whitespace-nowrap text-muted-foreground justify-end text-end">
                                                                    <button type="button" x-on:click="toggleSort('lastActive')" class="inline-flex items-center gap-1.5 rounded-control outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        Last active
                                        <span aria-hidden="true" x-text="sort?.id === 'lastActive' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span>
                                    </button>
                                                            </div>
                                                                    </div>
                </div>
                <div data-slot="table-body" role="rowgroup" class="contents">
                    <template x-for="(row, index) in pageRows" :key="idOf(row)">
                                                    <div role="row" data-row x-bind:data-state="isSelected(row) ? 'selected' : null" x-on:click="openRow(row, $event)"
                                class="group/row col-span-full grid grid-cols-subgrid border-b border-border transition-colors hover:bg-nq-hover data-[state=selected]:bg-nq-selected">
                                    <div role="cell" data-slot="table-cell" class="flex h-row w-10 items-center pe-0">
        <button type="button" role="checkbox" data-slot="checkbox" x-bind:aria-label="say('selectRow', row)" x-on:click="toggleRow(row)" aria-checked="false"
            x-bind:aria-checked="isSelected(row) ? 'true' : 'false'" x-bind:data-checked="isSelected(row) ? '' : null" x-bind:data-unchecked="isSelected(row) ? null : ''" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus after:absolute after:-inset-1 align-middle">
            <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="isSelected(row)" style="display: none"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
        </button>
    </div>
        <div role="cell" data-slot="table-cell" data-cell-col="name"  class="flex h-row items-center px-4 py-3 ">
        <span class="flex min-w-0 items-center gap-1.5 ">
                            <span class="min-w-0" x-html="row['nameCell'] ?? ''"></span>
                    </span>
    </div>
        <div role="cell" data-slot="table-cell" data-cell-col="status"  class="flex h-row items-center px-4 py-3 ">
        <span class="flex min-w-0 items-center gap-1.5 ">
                            <span class="min-w-0" x-html="row['statusCell'] ?? ''"></span>
                    </span>
    </div>
        <div role="cell" data-slot="table-cell" data-cell-col="visibility"  class="flex h-row items-center px-4 py-3 ">
        <span class="flex min-w-0 items-center gap-1.5 ">
                            <span class="min-w-0" x-html="row['visibilityCell'] ?? ''"></span>
                    </span>
    </div>
        <div role="cell" data-slot="table-cell" data-cell-col="memories"  class="flex h-row items-center px-4 py-3 justify-end text-end">
        <span class="flex min-w-0 items-center gap-1.5 justify-end">
                            <span class="truncate" x-text="row['memoriesText'] ?? '—'"></span>
                    </span>
    </div>
        <div role="cell" data-slot="table-cell" data-cell-col="sources"  class="flex h-row items-center px-4 py-3 justify-end text-end">
        <span class="flex min-w-0 items-center gap-1.5 justify-end">
                            <span class="truncate" x-text="row['sourcesText'] ?? '—'"></span>
                    </span>
    </div>
        <div role="cell" data-slot="table-cell" data-cell-col="members"  class="flex h-row items-center px-4 py-3 ">
        <span class="flex min-w-0 items-center gap-1.5 ">
                            <span class="min-w-0" x-html="row['membersCell'] ?? ''"></span>
                    </span>
    </div>
        <div role="cell" data-slot="table-cell" data-cell-col="lastActive"  class="flex h-row items-center px-4 py-3 justify-end text-end">
        <span class="flex min-w-0 items-center gap-1.5 justify-end">
                            <span class="min-w-0" x-html="row['activityCell'] ?? ''"></span>
                    </span>
    </div>
                            </div>
                                            </template>
                </div>
            </div>
        </div>
        <div x-show="view === 'cards'" style="display: none" role="list" aria-label="Brains" class="grid gap-3"
            style="grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); --entity-card-controls: 1.75rem">
            <template x-for="(row, index) in pageRows" :key="idOf(row)">
                                    <div role="listitem" data-card x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" x-bind:data-state="isSelected(row) ? 'selected' : null"
                        x-on:keydown="cardKey($event, row, index)" x-on:click="openRow(row, $event)" x-on:focus="$event.target === $event.currentTarget ? (active = index) : null" class="group/card relative flex min-w-0 flex-col rounded-card border border-border bg-card p-4 text-card-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus data-[state=selected]:border-primary data-[state=selected]:bg-nq-selected">
                        <div class="min-w-0 flex-1"><div x-html="row.card"></div></div>
    <div class="absolute end-2 top-2 flex items-center gap-1">
                    <button type="button" role="checkbox" data-slot="checkbox" x-bind:aria-label="say('selectRow', row)" x-on:click="toggleRow(row)" aria-checked="false"
                x-bind:aria-checked="isSelected(row) ? 'true' : 'false'" x-bind:data-checked="isSelected(row) ? '' : null" x-bind:data-unchecked="isSelected(row) ? null : ''"
                x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus after:absolute after:-inset-1 align-middle">
                <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="isSelected(row)" style="display: none"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
            </button>
                    </div>
                    </div>
                            </template>
        </div>
        <div x-show="! hasRows() && noMatches()" style="display: none">
            <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matching results</p>
                    <p class="text-body-sm text-muted-foreground">Try a different search or clear the filters.</p>
            </div>
            <div class="mt-1 flex flex-wrap items-center justify-center gap-2"><button data-slot="button"
     type="button"                         x-on:click="clearAll()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Clear filters</button></div>
    </div>
        </div>
        <div x-show="rows.length === 0" style="display: none">
            <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border border-dashed border-border px-6 py-12 text-center rounded-card">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 18V5"/>
  <path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"/>
  <path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"/>
  <path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"/>
  <path d="M18 18a4 4 0 0 0 2-7.464"/>
  <path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"/>
  <path d="M6 18a4 4 0 0 1-2-7.464"/>
  <path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No brains yet</p>
                    <p class="text-body-sm text-muted-foreground">Create a brain to give your team a shared memory.</p>
            </div>
    </div>        </div>
    </div>
</div>
```