Skip to content

website: ▲ prompt, Vercel badge, cleaner spacing #167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tomdale wants to merge 1 commit into
base: main
Choose a base branch
from
Open

website: ▲ prompt, Vercel badge, cleaner spacing #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/website/app/components/terminal-parts/agent-command.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`);
}
Expand Down
1 change: 1 addition & 0 deletions examples/website/app/components/terminal-parts/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
12 changes: 6 additions & 6 deletions examples/website/app/components/terminal-parts/input-handler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down Expand Up @@ -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`);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -282,7 +282,7 @@ export function createInputHandler(term: Terminal, bash: Bash) {

cmd = "";
cursorPos = 0;
term.write("$ ");
term.write(PROMPT);
};

term.onData(async (e: string) => {
Expand Down Expand Up @@ -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`);
Expand Down Expand Up @@ -456,7 +456,7 @@ export function createInputHandler(term: Terminal, bash: Bash) {
term.writeln("^C");
cmd = "";
cursorPos = 0;
term.write("$ ");
term.write(PROMPT);
return;
}

Expand Down
11 changes: 4 additions & 7 deletions examples/website/app/components/terminal-parts/welcome.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ASCII_ART } from "./constants";
import { ASCII_ART, PROMPT } from "./constants";

type Terminal = {
write: (data: string) => void;
Expand All @@ -20,20 +20,17 @@ 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"
);
term.writeln(
"\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);
}
15 changes: 15 additions & 0 deletions examples/website/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 9 additions & 2 deletions examples/website/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,15 @@ export default function Home() {
</noscript>
<TerminalData />
{mounted ? <TerminalComponent /> : null}
<a href="https://vercel.com" target="_blank" hidden id="credits">
Created by Vercel Labs
<a
href="https://vercel.com"
target="_blank"
rel="noopener noreferrer"
className="vercel-badge"
>
<svg height="16" viewBox="0 0 283 64" fill="currentColor">
Copy link
Copy Markdown

@vercel vercel bot Mar 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<svg height="16" viewBox="0 0 283 64" fill="currentColor">
<svg height="16" viewBox="0 0 74 64" fill="currentColor">

SVG viewBox "0 0 283 64" is sized for the full Vercel logotype (triangle + wordmark) but only the triangle path is present, causing the triangle to render at ~26% of the SVG's width with ~74% invisible dead space.

Fix on Vercel

<path d="M36.95 0L73.9 64H0L36.95 0z" />
</svg>
</a>
</>
);
Expand Down
Loading