import * as vscode from 'vscode';
import type { VSCodeController } from '../controller/VSCodeController.js';
import { MODEL_COLORS, MODEL_LABELS, type ModelId } from '{{PACKAGE_SCOPE}}/core/shared/types.js';
export class WelcomeProvider {
private panel?: vscode.WebviewPanel;
constructor(
private readonly extensionUri: vscode.Uri,
private readonly controller: VSCodeController,
) {}
createPanel(): void {
if (this.panel) {
this.panel.reveal();
return;
}
this.panel = vscode.window.createWebviewPanel(
'{{PROJECT_NAME}}.welcome',
'Fragment',
vscode.ViewColumn.One,
{ enableScripts: false },
);
this.panel.webview.html = this.getHtml();
this.panel.onDidDispose(() => {
this.panel = undefined;
});
}
private getHtml(): string {
const state = this.controller.getState();
const models = (['claude', 'codex', 'gemini'] as ModelId[]).map((m) => {
const conn = state.models[m];
const color = MODEL_COLORS[m];
const dot = conn.status === 'connected'
? `●`
: `○`;
return `${dot} ${MODEL_LABELS[m]}`;
}).join(' ');
return `
Fragment
Taming the fragmented agentic ecosystem
v${state.version}
${models}
`;
}
}