Add branded header to chat webview
Renders the siGit Code logo + correctly-cased "siGit Code" wordmark at the top of the chat panel. VS Code force-uppercases the platform view header (SIGIT CODE: CHAT) via non-overridable CSS; the webview is the one surface we control, so the brand shows in its real mixed case there. Adds img-src to the webview CSP so the bundled icon can load. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014EUvyohLND97Xxew23jN2d
paydii committed
Jun 25, 2026 at 19:04 UTC
94d23f7afd4c0597e5facc11936ee01d4af0641d
2 files changed
+30
media/main.css
+22
index 8a6804c..348e8b6 100644
--- a/media/main.css
+++ b/media/main.css
@@ -22,6 +22,28 @@ body {
background-color: var(--vscode-sideBar-background);
}
+.brand {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px var(--sigit-gap);
+ border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.brand-logo {
+ width: 20px;
+ height: 20px;
+ border-radius: 4px;
+ flex: none;
+}
+
+.brand-name {
+ font-weight: 600;
+ /* Preserve the brand's mixed case; VS Code uppercases the platform header,
+ but this is our own surface. */
+ text-transform: none;
+}
+
.messages {
flex: 1;
overflow-y: auto;
src/chatView.ts
+8
index 7798993..09249d4 100644
--- a/src/chatView.ts
+++ b/src/chatView.ts
@@ -308,8 +308,12 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
const styleUri = webview.asWebviewUri(
vscode.Uri.joinPath(this.context.extensionUri, "media", "main.css")
);
+ const logoUri = webview.asWebviewUri(
+ vscode.Uri.joinPath(this.context.extensionUri, "media", "icon.png")
+ );
const csp = [
`default-src 'none'`,
+ `img-src ${webview.cspSource}`,
`style-src ${webview.cspSource}`,
`script-src 'nonce-${nonce}'`,
`font-src ${webview.cspSource}`
@@ -325,6 +329,10 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
<title>siGit Chat</title>
</head>
<body>
+ <header class="brand">
+ <img class="brand-logo" src="${logoUri}" alt="" />
+ <span class="brand-name">siGit Code</span>
+ </header>
<div id="messages" class="messages"></div>
<div id="status" class="status"></div>
<form id="composer" class="composer">