Skip to content

Commit 69f8ef4

Browse files
involvexinvolvex
committed
feat(ui): add banner utilities and branding assets
- Add ASCII banner utilities for CLI display with help banner - Add documentation and web branding images (favicon, logo, banner)
1 parent 2a894f5 commit 69f8ef4

11 files changed

Lines changed: 97 additions & 17 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# @involvex/super-agent-cli
22

3-
A conversational AI CLI tool powered by Super Agent with intelligent text editor capabilities and tool usage.
3+
![Super Agent CLI Banner](docs/banner.png)
44

5-
<img width="980" height="435" alt="Screenshot 2025-07-21 at 13 35 41" src="assets/splash.png" />
5+
A conversational AI CLI tool powered by Super Agent with intelligent text editor capabilities and tool usage.
66

77
## Features
88

‎docs/banner.png‎

512 KB
Loading

‎docs/favicon.png‎

647 KB
Loading

‎docs/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
/>
2525
<meta
2626
property="og:image"
27-
content="https://involvex.github.io/super-agent-cli/assets/splash.png"
27+
content="https://involvex.github.io/super-agent-cli/banner.png"
2828
/>
2929
<meta name="twitter:card" content="summary_large_image" />
3030
<meta name="twitter:title" content="@involvex/super-agent-cli" />
@@ -39,6 +39,8 @@
3939
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap"
4040
rel="stylesheet"
4141
/>
42+
<link rel="icon" type="image/png" href="favicon.png" />
43+
<link rel="apple-touch-icon" href="logo.png" />
4244
<link rel="stylesheet" href="css/styles.css" />
4345
<title>@involvex/super-agent-cli | AI-Powered Terminal Assistant</title>
4446
</head>

‎docs/logo.png‎

414 KB
Loading

‎src/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,6 +402,10 @@ program
402402
// Interactive mode: launch UI
403403
// Pass apiKey even if undefined, SuperAgent should handle it or fail gracefully later
404404
const agent = new SuperAgent(apiKey || "", baseURL, model, maxToolRounds);
405+
406+
// Display ASCII banner
407+
const { BANNER } = await import("./utils/banner");
408+
console.log(BANNER);
405409
console.log("🤖 Starting Super Agent CLI Conversational Assistant...\n");
406410

407411
ensureUserSettingsDirectory();

‎src/utils/banner.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export const BANNER = `
2+
╔═══════════════════════════════════════════════════════════════╗
3+
║ ║
4+
║ ███████╗██╗ ██╗██████╗ ███████╗██████╗ ║
5+
║ ██╔════╝██║ ██║██╔══██╗██╔════╝██╔══██╗ ║
6+
║ ███████╗██║ ██║██████╔╝█████╗ ██████╔╝ ║
7+
║ ╚════██║██║ ██║██╔═══╝ ██╔══╝ ██╔══██╗ ║
8+
║ ███████║╚██████╔╝██║ ███████╗██║ ██║ ║
9+
║ ╚══════╝ ╚═════╝ ╚═╝ ╚══════╝╚═╝ ╚═╝ ║
10+
║ ║
11+
║ █████╗ ██████╗ ███████╗███╗ ██╗████████╗ ║
12+
║ ██╔══██╗██╔════╝ ██╔════╝████╗ ██║╚══██╔══╝ ║
13+
║ ███████║██║ ███╗█████╗ ██╔██╗ ██║ ██║ ║
14+
║ ██╔══██║██║ ██║██╔══╝ ██║╚██╗██║ ██║ ║
15+
║ ██║ ██║╚██████╔╝███████╗██║ ╚████║ ██║ ║
16+
║ ╚═╝ ╚═╝ ╚═════╝ ╚══════╝╚═╝ ╚═══╝ ╚═╝ ║
17+
║ ║
18+
║ 🤖 AI-Powered Terminal Assistant ║
19+
║ ║
20+
╚═══════════════════════════════════════════════════════════════╝
21+
`;
22+
23+
export const HELP_BANNER = `
24+
╔═══════════════════════════════════════════╗
25+
║ 🤖 SUPER AGENT - Help & Usage ║
26+
╚═══════════════════════════════════════════╝
27+
`;

‎src/web/client/app.js‎

Lines changed: 41 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,19 @@ const SLASH_COMMANDS = [
2222
{ cmd: "/help", desc: "Show help" },
2323
];
2424

25+
// Security: HTML escape utility to prevent XSS
26+
function escapeHtml(unsafe) {
27+
if (typeof unsafe !== "string") {
28+
return "";
29+
}
30+
return unsafe
31+
.replace(/&/g, "&amp;")
32+
.replace(/</g, "&lt;")
33+
.replace(/>/g, "&gt;")
34+
.replace(/"/g, "&quot;")
35+
.replace(/'/g, "&#039;");
36+
}
37+
2538
// Connect to WebSocket
2639
function connect() {
2740
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
@@ -71,10 +84,16 @@ function updateStatus(text, className = "") {
7184
function showUpdateBanner(currentVersion, latestVersion) {
7285
const banner = document.createElement("div");
7386
banner.className = "update-banner";
74-
banner.innerHTML = `
75-
<span>📦 Update available: ${currentVersion} → ${latestVersion}</span>
76-
<button onclick="this.parentElement.remove()">✕</button>
77-
`;
87+
88+
const span = document.createElement("span");
89+
span.textContent = `📦 Update available: ${currentVersion} → ${latestVersion}`;
90+
91+
const button = document.createElement("button");
92+
button.textContent = "✕";
93+
button.onclick = () => banner.remove();
94+
95+
banner.appendChild(span);
96+
banner.appendChild(button);
7897
document.body.insertBefore(banner, document.body.firstChild);
7998
}
8099

@@ -161,18 +180,21 @@ function renderFileTree(tree) {
161180

162181
// Show directories first
163182
directories.slice(0, 50).forEach(dir => {
183+
const safeName = escapeHtml(dir.name);
164184
html += `
165185
<div class="file-item directory">
166-
📁 ${dir.name}
186+
📁 ${safeName}
167187
</div>
168188
`;
169189
});
170190

171191
// Then files
172192
files.slice(0, 100).forEach(file => {
193+
const safeName = escapeHtml(file.name);
194+
const safePath = escapeHtml(file.path);
173195
html += `
174-
<div class="file-item" onclick="viewFile('${file.path}')">
175-
📄 ${file.name}
196+
<div class="file-item" onclick="viewFile('${safePath}')">
197+
📄 ${safeName}
176198
</div>
177199
`;
178200
});
@@ -190,10 +212,15 @@ function renderSessions(sessions) {
190212
let html = "";
191213
sessions.forEach(session => {
192214
const date = new Date(session.lastAccessed).toLocaleDateString();
215+
const safeName = escapeHtml(session.name);
216+
const safeId = escapeHtml(session.id);
217+
const safeCount = escapeHtml(String(session.messageCount || 0));
218+
const safeDate = escapeHtml(date);
219+
193220
html += `
194-
<div class="session-item" onclick="switchSession('${session.id}')">
195-
<div class="session-name">${session.name}</div>
196-
<div class="session-meta">${session.messageCount} messages · ${date}</div>
221+
<div class="session-item" onclick="switchSession('${safeId}')">
222+
<div class="session-name">${safeName}</div>
223+
<div class="session-meta">${safeCount} messages · ${safeDate}</div>
197224
</div>
198225
`;
199226
});
@@ -249,9 +276,11 @@ function handleAutocomplete(input) {
249276

250277
let html = "";
251278
matches.forEach((cmd, index) => {
279+
const safeCmd = escapeHtml(cmd.cmd);
280+
const safeDesc = escapeHtml(cmd.desc);
252281
html += `
253-
<div class="autocomplete-item" data-cmd="${cmd.cmd}" data-index="${index}">
254-
<strong>${cmd.cmd}</strong> - ${cmd.desc}
282+
<div class="autocomplete-item" data-cmd="${safeCmd}" data-index="${index}">
283+
<strong>${safeCmd}</strong> - ${safeDesc}
255284
</div>
256285
`;
257286
});

‎src/web/client/favicon.png‎

647 KB
Loading

‎src/web/client/index.html‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Super Agent - Web Interface</title>
7+
<link rel="icon" type="image/png" href="favicon.png" />
8+
<link rel="apple-touch-icon" href="logo.png" />
79
<link rel="stylesheet" href="styles.css" />
810
</head>
911
<body>
@@ -26,8 +28,24 @@ <h3>💼 Sessions</h3>
2628
<!-- Main Content -->
2729
<div class="main-content">
2830
<header>
29-
<h1>🤖 Super Agent</h1>
30-
<p class="subtitle">AI-Powered Terminal Assistant</p>
31+
<div
32+
style="
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
gap: 20px;
37+
"
38+
>
39+
<img
40+
src="logo.png"
41+
alt="Super Agent Logo"
42+
style="width: 60px; height: 60px"
43+
/>
44+
<div>
45+
<h1>🤖 Super Agent</h1>
46+
<p class="subtitle">AI-Powered Terminal Assistant</p>
47+
</div>
48+
</div>
3149
</header>
3250

3351
<div id="chat-container">

0 commit comments

Comments
 (0)