Builder

Compose a page out of real sections.

Pick sections from 307 blocks, drag them into order, and theme the lot in one go. What renders below is the actual component, not a picture of it — the same one the 126 pages in the catalog are built from. When it looks right, run it or take the source.

The layout and the theme both live in the address bar, so this page is shareable as a link and needs no account. Every edit is a normal navigation, which makes the back button an undo.

The catalog default. Every section reads its colours from tokens.

Outline

2 / 30

1
Collapsible Thinking TraceAgent Reasoning
Move Collapsible Thinking Trace down Duplicate Collapsible Thinking Trace Remove Collapsible Thinking Trace
2
Retrieved Context ChunksRetrieval & Context
Move Retrieved Context Chunks up Duplicate Retrieved Context Chunks Remove Retrieved Context Chunks

Start overDrag a row, or use the arrows

Canvas

Hover a section to move, duplicate or remove it. Drag it to reorder.

Collapsible Thinking Trace

Thought for 5.1 seconds5 steps

Dropping the largest single cancellation moves the under-20 figure from 6.1% to 5.4%. The pattern holds, so it is a cohort effect and not an outlier.

Retrieved Context Chunks

Retrieved context

4 chunks for “why did northwind not get the volume price”, ranked by similarity

Document: Pricing handbook· §4.2 — Volume breaksStrong match0.910.91
Accounts above 1,200 units per order qualify for the tier-two rate of $8.40, held for the duration of the contract year. The break is applied per order, not per quarter, so a single large order beats two smaller ones of the same total volume.
Support ticket: Ticket #4192· Northwind Retail · resolvedPartial match0.780.78
Customer asked why their November order did not get the tier-two price. Their October and November orders were 700 units each — combined they clear the break, individually they do not. Confirmed with finance that this is working as intended.
Table: warehouse.orders· 2,481 rows scannedPartial match0.640.64
Aggregated order volume by account for the trailing four quarters, filtered to accounts with more than one order in the period.
Web page: supplier.example.com· Lead times · fetched todayWeak match0.410.41
Standard lead time for the winter blend is 21 days from purchase order. Expedited shipping is available at a 15% surcharge and reduces this to 9 days.

Add a section

Every block in the catalog, filtered by what it is. Click to append to the end of the page, or drag one into the outline to place it.

307 sections

Take it with you

1. Install the sections

Writes each block to components/, which is where the page below imports them from.

npx hoverlab add agent-thinking-trace context-chunk-cards

These sections import lucide-react — everything else they use is React and Tailwind.

2. Name the page

Sets the component name and the filename. Optional.

Saves as app/composed-page.tsx

3. Take the source

/**
 * ComposedPage — composed from 2 Hoverlab blocks.
 *
 * Install the sections this file imports:
 *   npx hoverlab add agent-thinking-trace context-chunk-cards
 *
 * Packages the sections need: lucide-react
 *
 * Rebuild or edit this layout: https://hoverlab5.netlify.app/builder?b=agent-thinking-trace,context-chunk-cards
 */

import * as React from 'react'
import { AgentThinkingTrace } from '@/components/agent-thinking-trace'
import { ContextChunkCards } from '@/components/context-chunk-cards'

export default function ComposedPage() {
  return (
    <main className="min-h-screen bg-background text-foreground">
      <AgentThinkingTrace />
      <ContextChunkCards />
    </main>
  )
}