From 71154bc583df36b20159074ab2d454b1ec425116 Mon Sep 17 00:00:00 2001 From: tomdale Date: Sat, 21 Mar 2026 05:23:13 +0000 Subject: [PATCH] =?UTF-8?q?website:=20design=20polish=20-=20=E2=96=B2=20pr?= =?UTF-8?q?ompt,=20Vercel=20badge,=20cleaner=20spacing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace $ prompt with ▲ (Vercel triangle) across all terminal interactions - Add PROMPT constant for consistency - Add fixed Vercel triangle badge in bottom-left corner (subtle, 20% opacity) - Split welcome description into two shorter lines - Remove code example block from welcome for cleaner spacing --- .../components/terminal-parts/agent-command.ts | 2 +- .../app/components/terminal-parts/constants.ts | 1 + .../components/terminal-parts/input-handler.ts | 12 ++++++------ .../app/components/terminal-parts/welcome.ts | 11 ++++------- examples/website/app/globals.css | 15 +++++++++++++++ examples/website/app/page.tsx | 11 +++++++++-- 6 files changed, 36 insertions(+), 16 deletions(-) diff --git a/examples/website/app/components/terminal-parts/agent-command.ts b/examples/website/app/components/terminal-parts/agent-command.ts index eb1a1d3c..95b63c16 100644 --- a/examples/website/app/components/terminal-parts/agent-command.ts +++ b/examples/website/app/components/terminal-parts/agent-command.ts @@ -218,7 +218,7 @@ export function createAgentCommand(term: TerminalWriter) { const cmd = String(args.command).replace(/\t/g, " "); const lines = cmd.split("\n"); // Write each line separately for proper terminal rendering - term.write(`\x1b[36m$ ${lines[0]}\x1b[0m\r\n`); + term.write(`\x1b[36m▲ ${lines[0]}\x1b[0m\r\n`); for (let i = 1; i < lines.length; i++) { term.write(`\x1b[36m${lines[i]}\x1b[0m\r\n`); } diff --git a/examples/website/app/components/terminal-parts/constants.ts b/examples/website/app/components/terminal-parts/constants.ts index 51e38250..6bc93623 100644 --- a/examples/website/app/components/terminal-parts/constants.ts +++ b/examples/website/app/components/terminal-parts/constants.ts @@ -7,6 +7,7 @@ export const ASCII_ART = [ "|__/", ]; +export const PROMPT = "▲ "; export const HISTORY_KEY = "just-bash-history"; export const MAX_HISTORY = 100; export const MAX_TOOL_OUTPUT_LINES = 3; diff --git a/examples/website/app/components/terminal-parts/input-handler.ts b/examples/website/app/components/terminal-parts/input-handler.ts index b3e97bb7..8c1fc318 100644 --- a/examples/website/app/components/terminal-parts/input-handler.ts +++ b/examples/website/app/components/terminal-parts/input-handler.ts @@ -1,6 +1,6 @@ import type { Bash } from "just-bash/browser"; import { track } from "@vercel/analytics"; -import { HISTORY_KEY, MAX_HISTORY } from "./constants"; +import { HISTORY_KEY, MAX_HISTORY, PROMPT } from "./constants"; import { formatMarkdown } from "./markdown"; type Terminal = { @@ -167,7 +167,7 @@ export function createInputHandler(term: Terminal, bash: Bash) { ]; const redrawLine = () => { - term.write("\r$ " + cmd + "\x1b[K"); + term.write("\r" + PROMPT + cmd + "\x1b[K"); const moveBack = cmd.length - cursorPos; if (moveBack > 0) { term.write(`\x1b[${moveBack}D`); @@ -245,7 +245,7 @@ export function createInputHandler(term: Terminal, bash: Bash) { // Show all matches term.writeln(""); term.writeln(matches.join(" ")); - term.write("$ " + cmd); + term.write(PROMPT + cmd); // Reposition cursor const moveBack = cmd.length - cursorPos; if (moveBack > 0) { @@ -282,7 +282,7 @@ export function createInputHandler(term: Terminal, bash: Bash) { cmd = ""; cursorPos = 0; - term.write("$ "); + term.write(PROMPT); }; term.onData(async (e: string) => { @@ -340,7 +340,7 @@ export function createInputHandler(term: Terminal, bash: Bash) { // Ctrl+L - clear screen (keep current line) if (e === "\x0c") { // Clear screen and scrollback, move cursor to home, then redraw prompt - term.write("\x1b[2J\x1b[3J\x1b[H$ " + cmd + "\x1b[K"); + term.write("\x1b[2J\x1b[3J\x1b[H" + PROMPT + cmd + "\x1b[K"); const moveBack = cmd.length - cursorPos; if (moveBack > 0) { term.write(`\x1b[${moveBack}D`); @@ -456,7 +456,7 @@ export function createInputHandler(term: Terminal, bash: Bash) { term.writeln("^C"); cmd = ""; cursorPos = 0; - term.write("$ "); + term.write(PROMPT); return; } diff --git a/examples/website/app/components/terminal-parts/welcome.ts b/examples/website/app/components/terminal-parts/welcome.ts index db0cd002..e48ad4a1 100644 --- a/examples/website/app/components/terminal-parts/welcome.ts +++ b/examples/website/app/components/terminal-parts/welcome.ts @@ -1,4 +1,4 @@ -import { ASCII_ART } from "./constants"; +import { ASCII_ART, PROMPT } from "./constants"; type Terminal = { write: (data: string) => void; @@ -20,14 +20,11 @@ export function showWelcome(term: Terminal) { } term.writeln(""); - term.writeln("\x1b[2mA sandboxed bash interpreter for AI agents. Pure TypeScript with in-memory filesystem. From \x1b]8;;https://vercel.com\x07\x1b[4m\x1b[36mVercel Labs\x1b[0m\x1b[2m\x1b]8;;\x07.\x1b[0m"); + term.writeln("A sandboxed bash interpreter for AI agents."); + term.writeln("Pure TypeScript. In-memory filesystem. From ]8;;https://vercel.comVercel Labs]8;;."); term.writeln(""); term.writeln(" \x1b[1m\x1b[36mnpm install just-bash\x1b[0m"); term.writeln(""); - term.writeln("\x1b[2m import { Bash } from 'just-bash';\x1b[0m"); - term.writeln("\x1b[2m const bash = new Bash();\x1b[0m"); - term.writeln("\x1b[2m const { stdout } = await bash.exec(\n 'echo hello');\x1b[0m"); - term.writeln(""); term.writeln( "\x1b[2mCommands:\x1b[0m \x1b[36mabout\x1b[0m, \x1b[36minstall\x1b[0m, \x1b[36mgithub\x1b[0m, \x1b[36magent\x1b[0m, \x1b[36mhelp\x1b[0m" ); @@ -35,5 +32,5 @@ export function showWelcome(term: Terminal) { "\x1b[2mTry:\x1b[0m \x1b[36mls\x1b[0m | \x1b[36mhead\x1b[0m, \x1b[36mgrep\x1b[0m bash README.md, \x1b[36mtree\x1b[0m, \x1b[36mcat\x1b[0m package.json | \x1b[36mjq\x1b[0m .version" ); term.writeln(""); - term.write("$ "); + term.write(PROMPT); } \ No newline at end of file diff --git a/examples/website/app/globals.css b/examples/website/app/globals.css index 3124c19a..3c49f44f 100644 --- a/examples/website/app/globals.css +++ b/examples/website/app/globals.css @@ -46,6 +46,21 @@ noscript pre { margin: 0 auto; } +/* Vercel badge */ +.vercel-badge { + position: fixed; + bottom: 20px; + left: 20px; + z-index: 10; + color: var(--foreground); + opacity: 0.2; + transition: opacity 0.2s ease; + text-decoration: none; + display: block; + padding: 8px; +} +.vercel-badge:hover { opacity: 0.5; } + /* Lite Terminal styles */ .lite-terminal-input { position: absolute; diff --git a/examples/website/app/page.tsx b/examples/website/app/page.tsx index 3ce4d46d..5c023b3f 100644 --- a/examples/website/app/page.tsx +++ b/examples/website/app/page.tsx @@ -106,8 +106,15 @@ export default function Home() { {mounted ? : null} - + + + );