diff --git a/src/vs/workbench/contrib/cortexide/browser/react/src/styles.css b/src/vs/workbench/contrib/cortexide/browser/react/src/styles.css
index 65cf2f4916e..3bb0ae3117d 100644
--- a/src/vs/workbench/contrib/cortexide/browser/react/src/styles.css
+++ b/src/vs/workbench/contrib/cortexide/browser/react/src/styles.css
@@ -492,3 +492,65 @@ body.vscode-light .void-scope .btn-submit:not(:disabled):hover {
border: 1px solid color-mix(in srgb, var(--cortex-warning) 30%, transparent);
border-radius: var(--cortex-radius-lg);
}
+
+.void-scope .cortex-composer-toolbar {
+ border-top: 1px solid color-mix(in srgb, var(--cortex-border-weak) 50%, transparent);
+ padding-top: var(--cortex-space-xs);
+ margin-top: var(--cortex-space-xs);
+}
+
+.void-scope .cortex-composer-icon-btn {
+ flex-shrink: 0;
+ padding: var(--cortex-space-sm);
+ border-radius: var(--cortex-radius-sm);
+ color: var(--cortex-text-subtle);
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ transition:
+ background-color var(--cortex-transition-base),
+ color var(--cortex-transition-base);
+}
+
+.void-scope .cortex-composer-icon-btn:not(:disabled):hover {
+ background: var(--cortex-surface-2-alt);
+ color: var(--cortex-text-muted);
+}
+
+.void-scope .cortex-composer-icon-btn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
+.void-scope .cortex-composer-control {
+ font-size: var(--cortex-font-label);
+ color: var(--cortex-text-muted);
+ background: var(--cortex-surface-1);
+ border: 1px solid var(--cortex-border-base);
+ border-radius: var(--cortex-radius-sm);
+ padding: 2px var(--cortex-space-sm);
+}
+
+.void-scope .cortex-tool-header {
+ width: 100%;
+ border: 1px solid var(--cortex-border-base);
+ border-radius: var(--cortex-radius-sm);
+ padding: var(--cortex-space-xs) var(--cortex-space-sm);
+ background: var(--cortex-surface-3);
+ color: var(--cortex-text-muted);
+ overflow: hidden;
+}
+
+.void-scope .cortex-tool-header-bar {
+ display: flex;
+ width: 100%;
+ border-top-left-radius: var(--cortex-radius-lg);
+ border-top-right-radius: var(--cortex-radius-lg);
+ background: var(--cortex-surface-3);
+ color: var(--cortex-text-muted);
+ font-size: var(--cortex-font-label);
+ padding: var(--cortex-space-xs) var(--cortex-space-sm);
+ border-top: 1px solid color-mix(in srgb, var(--cortex-border-weak) 40%, transparent);
+ border-left: 1px solid color-mix(in srgb, var(--cortex-border-weak) 40%, transparent);
+ border-right: 1px solid color-mix(in srgb, var(--cortex-border-weak) 40%, transparent);
+}
diff --git a/src/vs/workbench/contrib/cortexide/test/common/designSystem.test.ts b/src/vs/workbench/contrib/cortexide/test/common/designSystem.test.ts
index b960986f823..5f286890f80 100644
--- a/src/vs/workbench/contrib/cortexide/test/common/designSystem.test.ts
+++ b/src/vs/workbench/contrib/cortexide/test/common/designSystem.test.ts
@@ -78,6 +78,9 @@ const voidOnboardingPath = join(dirname(fileURLToPath(import.meta.url)), '../../
const settingsPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/settings/Settings.tsx');
const sidebarChatPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/sidebar-tsx/SidebarChat.tsx');
const stagingContextChipsPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/sidebar-tsx/composer/StagingContextChips.tsx');
+const voidChatAreaPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/sidebar-tsx/composer/VoidChatArea.tsx');
+const toolHeaderPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/sidebar-tsx/tools/ToolHeader.tsx');
+const commandBarInChatPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/sidebar-tsx/composer/CommandBarInChat.tsx');
suite('designSystem (Phase 1 — void onboarding adoption)', () => {
@@ -138,3 +141,33 @@ suite('designSystem (Phase 1 — sidebar chat shell)', () => {
assert.ok(src.includes('onRemoveAt(idx)'), 'remove button should target clicked chip');
});
});
+
+suite('designSystem (Phase 1 — composer tool headers)', () => {
+
+ test('.cortex-tool-header uses cortex surface tokens', () => {
+ assert.ok(
+ hasRule(/\.void-scope\s+\.cortex-tool-header\s*\{[^}]*background:\s*var\(--cortex-surface-3\)/s),
+ 'expected cortex-tool-header background token',
+ );
+ assert.ok(
+ hasRule(/\.void-scope\s+\.cortex-tool-header-bar\s*\{[^}]*background:\s*var\(--cortex-surface-3\)/s),
+ 'expected cortex-tool-header-bar background token',
+ );
+ });
+
+ test('VoidChatArea composer footer uses design-system controls', () => {
+ const src = readFileSync(voidChatAreaPath, 'utf8');
+ assert.ok(src.includes('cortex-composer-toolbar'), 'expected composer toolbar class');
+ assert.ok(src.includes('cortex-composer-icon-btn'), 'expected composer icon button class');
+ assert.ok(src.includes('cortex-composer-control'), 'expected composer control class');
+ assert.ok(!src.includes('border-void-border-3/50'), 'toolbar should not use legacy void border');
+ });
+
+ test('Tool and command bar headers use cortex-tool-header tokens', () => {
+ const toolHeaderSrc = readFileSync(toolHeaderPath, 'utf8');
+ const commandBarSrc = readFileSync(commandBarInChatPath, 'utf8');
+ assert.ok(toolHeaderSrc.includes('cortex-tool-header'), 'ToolHeaderWrapper should use cortex-tool-header');
+ assert.ok(commandBarSrc.includes('cortex-tool-header-bar'), 'CommandBarInChat should use cortex-tool-header-bar');
+ assert.ok(!commandBarSrc.includes('bg-void-bg-3'), 'CommandBarInChat should not use legacy void background');
+ });
+});