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
@@ -22,6 +22,28 @@ body {
22
background-color: var(--vscode-sideBar-background);
23
}
24
25
+.brand {
26
+ display: flex;
27
+ align-items: center;
28
+ gap: 8px;
29
+ padding: 8px var(--sigit-gap);
30
+ border-bottom: 1px solid var(--vscode-panel-border);
31
+}
32
+
33
+.brand-logo {
34
+ width: 20px;
35
+ height: 20px;
36
+ border-radius: 4px;
37
+ flex: none;
38
+}
39
+
40
+.brand-name {
41
+ font-weight: 600;
42
+ /* Preserve the brand's mixed case; VS Code uppercases the platform header,
43
+ but this is our own surface. */
44
+ text-transform: none;
45
+}
46
+
47
.messages {
48
flex: 1;
49
overflow-y: auto;
src/chatView.ts
+8
@@ -308,8 +308,12 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
308
const styleUri = webview.asWebviewUri(
309
vscode.Uri.joinPath(this.context.extensionUri, "media", "main.css")
310
);
311
+ const logoUri = webview.asWebviewUri(
312
+ vscode.Uri.joinPath(this.context.extensionUri, "media", "icon.png")
313
+ );
314
const csp = [
315
`default-src 'none'`,
316
+ `img-src ${webview.cspSource}`,
317
`style-src ${webview.cspSource}`,
318
`script-src 'nonce-${nonce}'`,
319
`font-src ${webview.cspSource}`
@@ -325,6 +329,10 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
329
<title>siGit Chat</title>
330
</head>
331
<body>
332
+ <header class="brand">
333
+ <img class="brand-logo" src="${logoUri}" alt="" />
334
+ <span class="brand-name">siGit Code</span>
335
+ </header>
336
<div id="messages" class="messages"></div>
337
<div id="status" class="status"></div>
338
<form id="composer" class="composer">