-
9
-
-
⬚
+
+
+
+
+
3
+
+
+
+
+
4
+
+
+
+
+
5
+
+
+
+
+
6
+
+
+
+
+
+
diff --git a/sidepanel/sidepanel.js b/sidepanel/sidepanel.js
index 36947f0..d449ca0 100644
--- a/sidepanel/sidepanel.js
+++ b/sidepanel/sidepanel.js
@@ -1,18 +1,24 @@
// sidepanel/sidepanel.js — Side Panel logic
const STATUS_ICONS = {
- pending: '\u2B1A', // ⬚
- running: '\u23F3', // ⏳
- completed: '\u2705', // ✅
- failed: '\u274C', // ❌
+ pending: '',
+ running: '',
+ completed: '\u2713', // ✓
+ failed: '\u2717', // ✗
};
const logArea = document.getElementById('log-area');
const displayOauthUrl = document.getElementById('display-oauth-url');
const displayLocalhostUrl = document.getElementById('display-localhost-url');
const displayStatus = document.getElementById('display-status');
+const statusBar = document.getElementById('status-bar');
const inputEmail = document.getElementById('input-email');
const btnReset = document.getElementById('btn-reset');
+const stepsProgress = document.getElementById('steps-progress');
+const btnAutoRun = document.getElementById('btn-auto-run');
+const btnAutoContinue = document.getElementById('btn-auto-continue');
+const autoContinueBar = document.getElementById('auto-continue-bar');
+const btnClearLog = document.getElementById('btn-clear-log');
// ============================================================
// State Restore on load
@@ -22,7 +28,6 @@ async function restoreState() {
try {
const state = await chrome.runtime.sendMessage({ type: 'GET_STATE', source: 'sidepanel' });
- // Restore data fields
if (state.oauthUrl) {
displayOauthUrl.textContent = state.oauthUrl;
displayOauthUrl.classList.add('has-value');
@@ -35,14 +40,12 @@ async function restoreState() {
inputEmail.value = state.email;
}
- // Restore step statuses
if (state.stepStatuses) {
for (const [step, status] of Object.entries(state.stepStatuses)) {
updateStepUI(Number(step), status);
}
}
- // Restore logs
if (state.logs) {
for (const entry of state.logs) {
appendLog(entry);
@@ -50,6 +53,7 @@ async function restoreState() {
}
updateStatusDisplay(state);
+ updateProgressCounter();
} catch (err) {
console.error('Failed to restore state:', err);
}
@@ -61,23 +65,36 @@ async function restoreState() {
function updateStepUI(step, status) {
const statusEl = document.querySelector(`.step-status[data-step="${step}"]`);
- if (statusEl) statusEl.textContent = STATUS_ICONS[status] || '\u2B1A';
+ const row = document.querySelector(`.step-row[data-step="${step}"]`);
+ const indicator = document.querySelector(`.step-indicator[data-step="${step}"]`);
+
+ if (statusEl) statusEl.textContent = STATUS_ICONS[status] || '';
+ if (row) {
+ row.className = `step-row ${status}`;
+ }
- // Interlock logic
updateButtonStates();
+ updateProgressCounter();
+}
+
+function updateProgressCounter() {
+ let completed = 0;
+ document.querySelectorAll('.step-row').forEach(row => {
+ if (row.classList.contains('completed')) completed++;
+ });
+ stepsProgress.textContent = `${completed} / 9`;
}
function updateButtonStates() {
- // Get all current statuses from DOM
const statuses = {};
- document.querySelectorAll('.step-status').forEach(el => {
- const step = Number(el.dataset.step);
- const icon = el.textContent;
- const status = Object.entries(STATUS_ICONS).find(([, v]) => v === icon)?.[0] || 'pending';
- statuses[step] = status;
+ document.querySelectorAll('.step-row').forEach(row => {
+ const step = Number(row.dataset.step);
+ if (row.classList.contains('completed')) statuses[step] = 'completed';
+ else if (row.classList.contains('running')) statuses[step] = 'running';
+ else if (row.classList.contains('failed')) statuses[step] = 'failed';
+ else statuses[step] = 'pending';
});
- // Find if any step is running
const anyRunning = Object.values(statuses).some(s => s === 'running');
for (let step = 1; step <= 9; step++) {
@@ -85,13 +102,10 @@ function updateButtonStates() {
if (!btn) continue;
if (anyRunning) {
- // When any step is running, disable all buttons
btn.disabled = true;
} else if (step === 1) {
- // Step 1 is always available (unless running)
btn.disabled = false;
} else {
- // Steps 2-9: enabled if previous step completed (or current step failed for retry)
const prevStatus = statuses[step - 1];
const currentStatus = statuses[step];
btn.disabled = !(prevStatus === 'completed' || currentStatus === 'failed' || currentStatus === 'completed');
@@ -101,45 +115,53 @@ function updateButtonStates() {
function updateStatusDisplay(state) {
if (!state || !state.stepStatuses) return;
+
+ statusBar.className = 'status-bar';
+
const running = Object.entries(state.stepStatuses).find(([, s]) => s === 'running');
if (running) {
displayStatus.textContent = `Step ${running[0]} running...`;
- displayStatus.classList.add('has-value');
+ statusBar.classList.add('running');
+ return;
+ }
+
+ const failed = Object.entries(state.stepStatuses).find(([, s]) => s === 'failed');
+ if (failed) {
+ displayStatus.textContent = `Step ${failed[0]} failed`;
+ statusBar.classList.add('failed');
+ return;
+ }
+
+ const lastCompleted = Object.entries(state.stepStatuses)
+ .filter(([, s]) => s === 'completed')
+ .map(([k]) => Number(k))
+ .sort((a, b) => b - a)[0];
+
+ if (lastCompleted === 9) {
+ displayStatus.textContent = 'All steps completed!';
+ statusBar.classList.add('completed');
+ } else if (lastCompleted) {
+ displayStatus.textContent = `Step ${lastCompleted} done`;
} else {
- const lastCompleted = Object.entries(state.stepStatuses)
- .filter(([, s]) => s === 'completed')
- .map(([k]) => Number(k))
- .sort((a, b) => b - a)[0];
- if (lastCompleted === 9) {
- displayStatus.textContent = 'All steps completed!';
- displayStatus.classList.add('has-value');
- } else if (lastCompleted) {
- displayStatus.textContent = `Step ${lastCompleted} done. Ready for step ${lastCompleted + 1}.`;
- displayStatus.classList.add('has-value');
- } else {
- displayStatus.textContent = 'Waiting';
- displayStatus.classList.remove('has-value');
- }
+ displayStatus.textContent = 'Ready';
}
}
function appendLog(entry) {
const time = new Date(entry.timestamp).toLocaleTimeString('en-US', { hour12: false });
- const levelLabel = entry.level.toUpperCase().padEnd(5);
+ const levelLabel = entry.level.toUpperCase();
const line = document.createElement('div');
- line.className = `log-${entry.level}`;
+ line.className = `log-line log-${entry.level}`;
- // Extract step number from message (e.g., "Step 4: ..." or "[vps-panel] Step 1: ...")
const stepMatch = entry.message.match(/Step (\d)/);
const stepNum = stepMatch ? stepMatch[1] : null;
- // Build rich HTML
let html = `
${time} `;
- html += `
[${levelLabel}] `;
+ html += `
${levelLabel} `;
if (stepNum) {
html += `
S${stepNum}`;
}
- html += `
${escapeHtml(entry.message)}`;
+ html += `
${escapeHtml(entry.message)}`;
line.innerHTML = html;
logArea.appendChild(line);
@@ -159,37 +181,23 @@ function escapeHtml(text) {
document.querySelectorAll('.step-btn').forEach(btn => {
btn.addEventListener('click', async () => {
const step = Number(btn.dataset.step);
-
- // Save email if step 3 and email input has value
if (step === 3) {
const email = inputEmail.value.trim();
if (!email) {
appendLog({ message: 'Please paste email address first', level: 'error', timestamp: Date.now() });
return;
}
- await chrome.runtime.sendMessage({
- type: 'EXECUTE_STEP',
- source: 'sidepanel',
- payload: { step, email },
- });
+ await chrome.runtime.sendMessage({ type: 'EXECUTE_STEP', source: 'sidepanel', payload: { step, email } });
} else {
- await chrome.runtime.sendMessage({
- type: 'EXECUTE_STEP',
- source: 'sidepanel',
- payload: { step },
- });
+ await chrome.runtime.sendMessage({ type: 'EXECUTE_STEP', source: 'sidepanel', payload: { step } });
}
});
});
-// Auto Run button
-const btnAutoRun = document.getElementById('btn-auto-run');
-const btnAutoContinue = document.getElementById('btn-auto-continue');
-const autoContinueBar = document.getElementById('auto-continue-bar');
-
+// Auto Run
btnAutoRun.addEventListener('click', async () => {
btnAutoRun.disabled = true;
- btnAutoRun.textContent = 'Running...';
+ btnAutoRun.innerHTML = '
Running...';
await chrome.runtime.sendMessage({ type: 'AUTO_RUN', source: 'sidepanel' });
});
@@ -200,44 +208,41 @@ btnAutoContinue.addEventListener('click', async () => {
return;
}
autoContinueBar.style.display = 'none';
- btnAutoRun.textContent = 'Running...';
- await chrome.runtime.sendMessage({
- type: 'RESUME_AUTO_RUN',
- source: 'sidepanel',
- payload: { email },
- });
+ await chrome.runtime.sendMessage({ type: 'RESUME_AUTO_RUN', source: 'sidepanel', payload: { email } });
});
-// Reset button
+// Reset
btnReset.addEventListener('click', async () => {
if (confirm('Reset all steps and data?')) {
await chrome.runtime.sendMessage({ type: 'RESET', source: 'sidepanel' });
- // Clear UI
- displayOauthUrl.textContent = 'Not obtained';
+ displayOauthUrl.textContent = 'Waiting...';
displayOauthUrl.classList.remove('has-value');
- displayLocalhostUrl.textContent = 'Not captured';
+ displayLocalhostUrl.textContent = 'Waiting...';
displayLocalhostUrl.classList.remove('has-value');
inputEmail.value = '';
- displayStatus.textContent = 'Waiting';
- displayStatus.classList.remove('has-value');
+ displayStatus.textContent = 'Ready';
+ statusBar.className = 'status-bar';
logArea.innerHTML = '';
- document.querySelectorAll('.step-status').forEach(el => el.textContent = '\u2B1A');
+ document.querySelectorAll('.step-row').forEach(row => row.className = 'step-row');
+ document.querySelectorAll('.step-status').forEach(el => el.textContent = '');
btnAutoRun.disabled = false;
- btnAutoRun.textContent = 'Auto Run';
+ btnAutoRun.innerHTML = '
Auto';
autoContinueBar.style.display = 'none';
updateButtonStates();
+ updateProgressCounter();
}
});
-// Save email when user types/pastes
+// Clear log
+btnClearLog.addEventListener('click', () => {
+ logArea.innerHTML = '';
+});
+
+// Save email on change
inputEmail.addEventListener('change', async () => {
const email = inputEmail.value.trim();
if (email) {
- await chrome.runtime.sendMessage({
- type: 'SAVE_EMAIL',
- source: 'sidepanel',
- payload: { email },
- });
+ await chrome.runtime.sendMessage({ type: 'SAVE_EMAIL', source: 'sidepanel', payload: { email } });
}
});
@@ -254,8 +259,19 @@ chrome.runtime.onMessage.addListener((message) => {
case 'STEP_STATUS_CHANGED': {
const { step, status } = message.payload;
updateStepUI(step, status);
- // Update status display
chrome.runtime.sendMessage({ type: 'GET_STATE', source: 'sidepanel' }).then(updateStatusDisplay);
+ if (status === 'completed') {
+ chrome.runtime.sendMessage({ type: 'GET_STATE', source: 'sidepanel' }).then(state => {
+ if (state.oauthUrl) {
+ displayOauthUrl.textContent = state.oauthUrl;
+ displayOauthUrl.classList.add('has-value');
+ }
+ if (state.localhostUrl) {
+ displayLocalhostUrl.textContent = state.localhostUrl;
+ displayLocalhostUrl.classList.add('has-value');
+ }
+ });
+ }
break;
}
@@ -276,16 +292,16 @@ chrome.runtime.onMessage.addListener((message) => {
switch (phase) {
case 'waiting_email':
autoContinueBar.style.display = 'flex';
- btnAutoRun.textContent = 'Waiting...';
+ btnAutoRun.innerHTML = '
Paused';
break;
case 'complete':
btnAutoRun.disabled = false;
- btnAutoRun.textContent = 'Auto Run';
+ btnAutoRun.innerHTML = '
Auto';
autoContinueBar.style.display = 'none';
break;
case 'stopped':
btnAutoRun.disabled = false;
- btnAutoRun.textContent = 'Auto Run';
+ btnAutoRun.innerHTML = '
Auto';
autoContinueBar.style.display = 'none';
break;
}