Skip to content

Commit 808f010

Browse files
authored
Merge pull request #636 from rajbos/copilot/add-empty-state-guidance
Add empty-state guidance for first-time users in the Details panel
2 parents 1f21de0 + 9c71386 commit 808f010

2 files changed

Lines changed: 109 additions & 0 deletions

File tree

vscode-extension/src/webview/details/main.ts

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,12 @@ function renderShell(
151151
const footer = el('div', 'footer', `Last updated: ${lastUpdated.toLocaleString()} · Updates every 5 minutes`);
152152

153153
const sections = el('div', 'sections');
154+
155+
const isEmptyState = (stats.today.tokens ?? 0) === 0 && (stats.last30Days.tokens ?? 0) === 0 && (stats.lastMonth.tokens ?? 0) === 0;
156+
if (isEmptyState) {
157+
sections.append(buildEmptyStateSection());
158+
}
159+
154160
sections.append(buildMetricsSection(stats, projections));
155161

156162
const editorSection = buildEditorUsageSection(stats);
@@ -677,6 +683,67 @@ function buildModelUsageSection(stats: DetailedStats): HTMLElement | null {
677683
return section;
678684
}
679685

686+
function buildEmptyStateSection(): HTMLElement {
687+
const section = el('div', 'section');
688+
const inner = el('div', 'empty-state');
689+
690+
const title = el('div', 'empty-state-title', '👋 Welcome to AI Engineering Fluency');
691+
692+
const desc = el('p', 'empty-state-description',
693+
'This extension tracks AI token usage by reading session log files stored locally by supported tools. No token data has been found yet.'
694+
);
695+
696+
const toolsLabel = document.createElement('p');
697+
toolsLabel.className = 'empty-state-description';
698+
const toolsLabelStrong = document.createElement('strong');
699+
toolsLabelStrong.textContent = 'Supported tools & editors:';
700+
toolsLabel.append(toolsLabelStrong);
701+
702+
const toolsList = document.createElement('ul');
703+
toolsList.className = 'empty-state-steps';
704+
const toolsTexts = [
705+
'💙 VS Code / VS Code Insiders / VSCodium — GitHub Copilot Chat extension',
706+
'⚡ Cursor, 🌊 Windsurf — built-in AI chat',
707+
'🖥️ Visual Studio 2022+ — GitHub Copilot Chat extension',
708+
'🟢 OpenCode, 🦀 Crush — terminal-based coding agents',
709+
'🤖 Claude Code — Anthropic\'s CLI coding agent',
710+
'💻 Copilot CLI — GitHub Copilot in the terminal',
711+
];
712+
toolsTexts.forEach(text => {
713+
const li = document.createElement('li');
714+
li.textContent = text;
715+
toolsList.append(li);
716+
});
717+
718+
const stepsLabel = document.createElement('p');
719+
stepsLabel.className = 'empty-state-description';
720+
const stepsLabelStrong = document.createElement('strong');
721+
stepsLabelStrong.textContent = 'To get started:';
722+
stepsLabel.append(stepsLabelStrong);
723+
724+
const steps = document.createElement('ol');
725+
steps.className = 'empty-state-steps';
726+
const stepTexts = [
727+
'Use any of the supported tools or editors listed above to interact with an AI model.',
728+
'For GitHub Copilot in VS Code: open the Copilot Chat panel (Ctrl+Alt+I / Cmd+Alt+I) and start a conversation.',
729+
'For terminal agents (Claude Code, OpenCode, Copilot CLI): run a coding session in your terminal.',
730+
'Click the 🔄 Refresh button above to reload the stats after your first session.',
731+
];
732+
stepTexts.forEach(text => {
733+
const li = document.createElement('li');
734+
li.textContent = text;
735+
steps.append(li);
736+
});
737+
738+
const note = el('div', 'empty-state-note',
739+
'💡 If you have been using one of the supported tools but still see no data, open the Diagnostics panel (🔍 Diagnostics button above) to verify that session files are being discovered correctly.'
740+
);
741+
742+
inner.append(title, desc, toolsLabel, toolsList, stepsLabel, steps, note);
743+
section.append(inner);
744+
return section;
745+
}
746+
680747
function buildEstimatesSection(): HTMLElement {
681748
const section = el('div', 'section');
682749
const heading = el('h3');

vscode-extension/src/webview/details/styles.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,3 +144,45 @@ body {
144144
font-size: 11px;
145145
margin-top: 6px;
146146
}
147+
148+
.empty-state {
149+
display: flex;
150+
flex-direction: column;
151+
gap: 12px;
152+
padding: 20px;
153+
}
154+
155+
.empty-state-title {
156+
font-size: 15px;
157+
font-weight: 700;
158+
color: var(--text-primary);
159+
}
160+
161+
.empty-state-description {
162+
color: var(--text-secondary);
163+
font-size: 13px;
164+
line-height: 1.5;
165+
margin: 0;
166+
}
167+
168+
.empty-state-steps {
169+
margin: 0;
170+
padding-left: 20px;
171+
color: var(--text-secondary);
172+
font-size: 13px;
173+
line-height: 1.6;
174+
}
175+
176+
.empty-state-steps li {
177+
margin: 4px 0;
178+
}
179+
180+
.empty-state-note {
181+
background: var(--bg-tertiary);
182+
border: 1px solid var(--border-subtle);
183+
border-radius: 6px;
184+
padding: 10px 14px;
185+
color: var(--text-secondary);
186+
font-size: 12px;
187+
line-height: 1.5;
188+
}

0 commit comments

Comments
 (0)