723 / 1002

Bento Terminal

A developer bento with a terminal that types a deploy command, a code diff, a rollout status card, a git graph and a per-region latency heat strip.

~/acme $ hb deploy --prod

From commit to production in under a minute

Push to main and watch it build, check and roll out to every region, with diffs, history and latency in one place.

zsh · acme-web⌥ main

$hb deploy --prod

› Linking acme/web on main at 4f2a91c

› Installing dependencies1.8s

› Building 214 routes4.2s

› Running 1,206 checks6.9s

› Uploading 3.1 MB to 4 regions0.6s

✓ Live at acme.app38s

Builds are cached per route, so most deploys finish before your coffee does.

src/lib/users.ts+4−1

41 export async function getUser(id: string) {

42− const user = await db.user.find(id);

42+ const hit = await kv.get(`user:${id}`);

43+ if (hit) return hit;

44+ const user = await db.user.find(id);

45+ await kv.set(`user:${id}`, user, { ex: 60 });

46 return user;

Rolling out…Readyiad1fra1gru1hnd1

Every deploy maps to a commit you can roll back in one click.

p50 58 ms · p99 184 ms · last 36 hoursfastslow

terminal

npx shadcn@latest add https://hyperblur.dev/r/bento-terminal.json

Works in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-terminal.tsx.

example.tsx

import { BentoTerminal } from "@/components/hyperblur/bento-terminal"

<BentoTerminal eyebrow="acme" command="hb deploy --prod" />

Prop	Type	Default	Description
eyebrow	string	"acme"	Project name used in the prompt line above the title and in the terminal title bar.
title	string	"From commit to production in under a minute"	Section heading.
subtitle	string	"Push to main and watch it build..."	Supporting paragraph under the title.
primaryCta	{ label: string; href: string } \| null	{ label: "Start deploying", href: "#" }	Filled button next to the heading.
secondaryCta	{ label: string; href: string } \| null	{ label: "Read the CLI docs", href: "#" }	Outlined button next to the heading.
command	string	"hb deploy --prod"	Command typed in the terminal.
lines	{ text: string; meta?: string; tone?: "default" \| "success" \| "muted" }[]	6 lines	Terminal output lines, revealed one after another.
commits	{ message: string; sha: string; lane: 0 \| 1 \| 2; tag?: string }[]	6 commits	Commits in the git graph, newest first. Lanes 1 and 2 draw as branches merging into main.
regions	string[]	["iad1", "fra1", "gru1", "hnd1"]	Region codes used in the rollout card and the heat strip rows.
accent	string	"#f59e0b"	Accent color for the prompt, primary button and main branch.
className	string		Extra classes for the section element.
style	React.CSSProperties		Inline styles merged onto the section element.