Could not load config
';
- })
- );
+ buildChecklist();
+ } catch (error) {
+ authGrid.innerHTML = 'Could not load auth methods
';
+ hasActiveAuthMethod = null;
+ buildChecklist();
+ if (!isBestEffortOverviewError(error)) {
+ throw error;
+ }
+ }
+ }
+
+ // Overview hydration is best-effort while the local Stack backend is still booting.
+ runAsynchronously(loadAuthMethods());
- // -- Checklist card --
+ // ── Setup checklist (only shown when something is incomplete) ──────────────
const checksCard = h('div', { className: 'sdt-ov-card sdt-ov-card-checks' });
+ const projectId = app.projectId;
+ let checksCardMounted = false;
+
function buildChecklist() {
checksCard.innerHTML = '';
const checks = [
- { ok: !!projectId && projectId !== 'default', label: 'Project' },
- { ok: true, label: 'Provider' },
- { ok: !!currentUser, label: 'Auth' },
+ { ok: !!projectId && projectId !== 'default', label: 'Project configured', hint: null },
+ { ok: hasActiveAuthMethod === true, label: 'Auth method active', hint: hasActiveAuthMethod === null ? 'Still checking project config' : null },
+ { ok: !!currentUser, label: 'Sign in a test user', hint: 'Use \u201cQuick Sign In\u201d above \u2192' },
];
const passCount = checks.filter((c) => c.ok).length;
const allGood = passCount === checks.length;
+
if (allGood) {
- checksCard.classList.add('sdt-ov-card-checks-ok');
- } else {
- checksCard.classList.remove('sdt-ov-card-checks-ok');
+ if (checksCardMounted && checksCard.parentElement) {
+ container.removeChild(checksCard);
+ checksCardMounted = false;
+ }
+ return;
+ }
+
+ if (!checksCardMounted) {
+ container.appendChild(checksCard);
+ checksCardMounted = true;
}
- const header = h('div', { className: 'sdt-ov-checks-header' });
- header.appendChild(h('div', { className: 'sdt-ov-label', style: { marginBottom: '0' } }, 'Setup'));
- header.appendChild(h('span', { className: `sdt-ov-checks-badge ${allGood ? 'sdt-ov-checks-badge-ok' : 'sdt-ov-checks-badge-warn'}` }, allGood ? 'All good' : `${passCount}/${checks.length}`));
- checksCard.appendChild(header);
+ const titleRow = h('div', { className: 'sdt-ov-checks-header' });
+ const titleLabel = h('div', { className: 'sdt-ov-label', style: { marginBottom: '0', color: 'var(--sdt-warning)' } }, 'Setup');
+ const badge = h('span', { className: 'sdt-ov-checks-badge sdt-ov-checks-badge-warn' }, `${passCount}\u200a/\u200a${checks.length}`);
+ titleRow.append(titleLabel, badge);
+ checksCard.appendChild(titleRow);
const bar = h('div', { className: 'sdt-ov-checks-bar' });
const fill = h('div', { className: 'sdt-ov-checks-bar-fill' });
@@ -873,135 +909,61 @@ function createOverviewTab(app: StackClientAppLoading changelog...
';
- changelogCard.appendChild(changelogContent);
- runAsynchronously((async () => {
- let entries: any[] = [];
+ async function refreshUser() {
try {
- const res = await fetch(apiBaseUrl + changelogPath);
- if (res.ok) {
- const data = await res.json();
- entries = data.entries ?? [];
- }
- } catch {}
- if (entries.length === 0) {
- try {
- const res = await fetch('https://api.stack-auth.com' + changelogPath);
- if (res.ok) {
- const data = await res.json();
- entries = data.entries ?? [];
- }
- } catch {}
- }
-
- changelogContent.innerHTML = '';
- if (entries.length === 0) {
- changelogContent.innerHTML = 'Could not load changelog.
';
- return;
- }
-
- const changelogDiv = h('div', { className: 'sdt-ov-changelog' });
- let expandedVersion: string | null = entries[0]?.version ?? null;
-
- function renderEntries() {
- changelogDiv.innerHTML = '';
- for (const entry of entries.slice(0, 5)) {
- const isExpanded = expandedVersion === entry.version;
- const release = h('div', { className: 'sdt-ov-release' });
- const head = h('div', { className: 'sdt-ov-release-head', style: { cursor: 'pointer' } });
- head.textContent = entry.version;
- if (entry.releasedAt) {
- head.appendChild(h('span', { className: 'sdt-ov-release-date' }, entry.releasedAt));
- }
- const arrow = h('span', { style: { marginLeft: 'auto', fontSize: '10px', color: 'var(--sdt-text-tertiary)' } }, isExpanded ? '\u25B2' : '\u25BC');
- head.appendChild(arrow);
- head.addEventListener('click', () => {
- expandedVersion = isExpanded ? null : entry.version;
- renderEntries();
- });
- release.appendChild(head);
-
- if (isExpanded && entry.markdown) {
- const body = h('div', { className: 'sdt-ov-release-body', style: { padding: '4px 0 8px' } });
- const lines = entry.markdown.split('\n');
- for (const line of lines) {
- const trimmedLine = line.trim();
- if (trimmedLine === '') continue;
-
- const image = parseMarkdownImage(trimmedLine);
- if (image) {
- const figure = h('figure', { className: 'sdt-ov-release-image-figure' });
- const imageLink = h('a', {
- className: 'sdt-ov-release-image-link',
- href: image.src,
- target: '_blank',
- rel: 'noopener noreferrer',
- });
- imageLink.appendChild(h('img', {
- className: 'sdt-ov-release-image',
- src: image.src,
- alt: image.alt,
- loading: 'lazy',
- decoding: 'async',
- }));
- figure.appendChild(imageLink);
- if (image.alt !== '') {
- figure.appendChild(h('figcaption', { className: 'sdt-ov-release-image-caption' }, image.alt));
- }
- body.appendChild(figure);
- continue;
- }
+ currentUser = await app.getUser();
- const headingMatch = line.match(/^###\s+(.+)/);
- if (headingMatch) {
- const heading = h('div', { style: { fontWeight: '600', color: 'var(--sdt-text)', marginTop: '8px', marginBottom: '4px', fontSize: '12px' } });
- appendInlineMarkdown(heading, headingMatch[1]);
- body.appendChild(heading);
- continue;
- }
- if (line.startsWith('- ')) {
- const li = h('div', { style: { fontSize: '12px', color: 'var(--sdt-text-secondary)', lineHeight: '1.6', paddingLeft: '12px' } });
- li.appendChild(document.createTextNode('\u2022 '));
- appendInlineMarkdown(li, line.slice(2));
- body.appendChild(li);
- continue;
- }
- const paragraph = h('div', { style: { fontSize: '12px', color: 'var(--sdt-text-secondary)', lineHeight: '1.6' } });
- appendInlineMarkdown(paragraph, line);
- body.appendChild(paragraph);
- }
- release.appendChild(body);
+ if (currentUser) {
+ const initials = (currentUser.displayName || currentUser.primaryEmail || '?')
+ .split(' ').map((s: string) => s[0]).join('').slice(0, 2).toUpperCase();
+ avatar.className = 'sdt-ov-avatar sdt-ov-avatar-active';
+ if (currentUser.profileImageUrl) {
+ avatar.innerHTML = `No logs recorded yet
API calls and auth events will appear here
Loading config...
';
- runAsynchronously(
- app.getProject().then((project: any) => {
- contentArea.innerHTML = '';
- const table = h('table', { className: 'sdt-config-table' });
- const tbody = h('tbody', null);
- const items: [string, string][] = [
- ['Project ID', project.id],
- ['Display Name', project.displayName],
- ['Sign-Up Enabled', String(project.config.signUpEnabled)],
- ['Credential Auth', String(project.config.credentialEnabled)],
- ['Magic Link', String(project.config.magicLinkEnabled)],
- ['Passkey', String(project.config.passkeyEnabled)],
- ['Client Team Creation', String(project.config.clientTeamCreationEnabled)],
- ['Client User Deletion', String(project.config.clientUserDeletionEnabled)],
- ['User API Keys', String(project.config.allowUserApiKeys)],
- ['Team API Keys', String(project.config.allowTeamApiKeys)],
- ['OAuth Providers', project.config.oauthProviders.length > 0 ? project.config.oauthProviders.map((p: any) => p.id).join(', ') : 'None'],
- ];
- for (const [label, value] of items) {
- const tr = h('tr', null);
- tr.appendChild(h('td', null, label));
- const td = h('td', null);
- if (value === 'true') {
- setHtml(td, 'Enabled');
- } else if (value === 'false') {
- setHtml(td, 'Disabled');
- } else {
- td.textContent = value;
- }
- tr.appendChild(td);
- tbody.appendChild(tr);
- }
- table.appendChild(tbody);
- contentArea.appendChild(table);
- }).catch(() => {
- contentArea.innerHTML = 'Could not load config.
';
- })
- );
- }
-
- function renderSubTab() {
- subTabBar.setActive(state.get().consoleSubTab);
- clearBtn.style.display = state.get().consoleSubTab === 'logs' ? '' : 'none';
- if (state.get().consoleSubTab === 'logs') {
+ function maybeLoadOlderLogs() {
+ const mergedLength = getMergedLogs().length;
+ if (visibleLogCount >= mergedLength) return;
+ const distanceFromBottom = contentArea.scrollHeight - contentArea.scrollTop - contentArea.clientHeight;
+ if (distanceFromBottom <= 48) {
+ visibleLogCount = Math.min(visibleLogCount + CONSOLE_LOG_BATCH_SIZE, mergedLength);
renderLogs();
- } else {
- renderConfig();
}
}
- renderSubTab();
+ contentArea.addEventListener('scroll', maybeLoadOlderLogs);
+ renderLogs();
- exportBtn.addEventListener('click', () => {
- const lines: string[] = [];
- lines.push('=== Stack Auth Dev Tool Report ===');
- lines.push(`Generated: ${new Date().toISOString()}`);
- lines.push('');
- for (const log of logStore.apiLogs.slice(0, 50)) {
- const status = log.status !== undefined ? ` [${log.status}]` : '';
- const duration = log.duration !== undefined ? ` ${log.duration}ms` : '';
- lines.push(`${new Date(log.timestamp).toISOString()} ${log.method} ${log.url}${status}${duration}`);
- }
+ copyBtn.addEventListener('click', () => {
runAsynchronously(
- navigator.clipboard.writeText(lines.join('\n')).then(() => {
- exportBtn.textContent = '\u2713 Copied';
+ navigator.clipboard.writeText(formatLogsForExport()).then(() => {
+ copyBtn.textContent = '\u2713 Copied';
setTimeout(() => {
- setHtml(exportBtn, 'Export');
+ setHtml(copyBtn, 'Copy');
}, 1500);
})
);
});
+ exportBtn.addEventListener('click', () => {
+ const blob = new Blob([formatLogsForExport()], { type: 'text/plain;charset=utf-8' });
+ const url = URL.createObjectURL(blob);
+ const link = h('a', { href: url, download: `stack-auth-dev-tool-logs-${new Date().toISOString()}.txt` });
+ document.body.appendChild(link);
+ link.click();
+ link.remove();
+ URL.revokeObjectURL(url);
+ });
+
+ clearBtn.addEventListener('click', () => {
+ visibleLogCount = CONSOLE_LOG_BATCH_SIZE;
+ logStore.clear();
+ });
+
const unsub = logStore.subscribe(() => {
- if (state.get().consoleSubTab === 'logs') {
- renderLogs();
- }
+ renderLogs();
});
- return { element: container, cleanup: unsub };
+ return {
+ element: container,
+ cleanup: () => {
+ contentArea.removeEventListener('scroll', maybeLoadOlderLogs);
+ unsub();
+ },
+ };
}
// ---------------------------------------------------------------------------
@@ -1769,31 +1737,13 @@ function createAITab(app: StackClientApp