Bento Dashboards — Compose Any Interface

Bento dashboards are composable grid layouts where every block is a cell. With 72+ built-in cells and the ability for AI to create new ones, you can build any interface without writing code.

What is a bento dashboard?

A bento dashboard is a 12-column grid layout built on react-grid-layout. Each block in the grid is a cell — the universal rendering unit in Synap. A cell can be a view (table, kanban, calendar), an entity detail panel, a widget (stat card, quick capture form, AI chat), or any custom component. You compose your interface by placing cells on the grid, resizing them, and configuring what each one displays.

The bento layout is the default for Synap's home screen. When you open the app, you see a dashboard of cells showing your recent entities, upcoming events, active tasks, and AI chat — all configurable, all rearrangeable. But bento is not limited to the home screen. Any view can be a bento dashboard, and bento blocks can embed other views, creating nested, composable interfaces.

The cell system

Cells are the fundamental building block. Every piece of UI in Synap is a cell: the entity detail panel, the AI chat window, the calendar widget, the proposals list. Cells are registered in a global cell registry and resolved at render time by their kind and type. This means the same cell renders identically whether it appears full-screen, in a side panel, or inside a bento grid block.

Three host components adapt cells to their container: BentoCellHost (grid block), PanelCellHost (side panel), and PageCellHost (full page). The cell itself does not know or care where it is rendered — the host handles sizing, scrolling, and chrome.

72+ built-in cells

Synap ships with over 72 static cell registrations across 12 packages. Here are the key categories:

View cells

Embed any view type inside a bento block. A kanban board of your tasks, a calendar of upcoming events, a table of deals, a grid of bookmarks — all as cells. View cells are the most powerful blocks because they bring the full filtering, sorting, and grouping capabilities of views into a compact dashboard format.

Entity cells

Display a single entity's detail, document editor, relationships, or properties. Useful for pinning important entities to your dashboard — a key project, a critical deal, or a reference document that you check frequently.

Widget cells

Standalone widgets that display information or provide quick actions:

• Stat card — A single metric with label, value, and optional trend indicator.
• Quick capture — A compact input for capturing thoughts, URLs, or tasks without leaving the dashboard.
• Calendar widget — A mini calendar showing today's events and upcoming schedule.
• Entity gallery — A scrollable strip of entity cards for browsing collections.
• Quote card — A styled text block for displaying quotes or highlights.
• Link grid — A grid of links for quick access to frequently used resources.
• Reading progress — Track your reading queue with progress indicators.
• Entity spotlight — Highlight a single entity with expanded detail.
• Random highlight — Surface a random entity from your collection for rediscovery.

AI cells

AI-powered blocks for intelligence features:

• AI chat — An inline chat interface for quick AI interactions.
• Agent activity — A feed of recent AI actions and proposals.
• Proposals list — Pending AI proposals awaiting your review.
• Service status — Current status of connected intelligence services.

Building a dashboard

To build a dashboard, enter edit mode on a bento view. Click to add a new block, choose the cell kind (view, entity, or widget), then select the specific cell type. Configure the cell's parameters — which view to display, which entity to show, which widget settings to use. Drag to reposition, resize by pulling edges, and the 12-column grid snaps everything into alignment.

Block configuration is stored as JSONB in the view's configuration object. Each block has a position (x, y, width, height in grid units), a kind, a type, and a config payload specific to that cell type. This means dashboards are fully serializable and can be shared, duplicated, or generated by AI.

AI-composed dashboards

Synap's AI can compose dashboards for you. Describe what you want — "a project management dashboard with a kanban of tasks, a calendar of deadlines, and stats on completion rate" — and the AI assembles the right cells, configures them, and lays them out on the grid. This is Capability A of the cell system: composing existing cells into new arrangements.

Capability B goes further: the AI can create entirely new cell types that do not exist yet. New cells run in an iframe sandbox with a postMessage SDK for communicating with the host app. AI-created cells go through the proposal system, so you review and approve them before they become part of your workspace.

Related guides