fixxxeeess

frontend/src/main.js

@@ -16,7 +16,8 @@ const state = {
     selectedRunId: null,
     currentView: 'dashboard', // 'dashboard' or 'task'
     isEditing: false,
-    token: localStorage.getItem('auth_token')
+    token: localStorage.getItem('auth_token'),
+    refreshToken: localStorage.getItem('refresh_token')
 };
 
 // DOM elements
@@ -67,7 +68,24 @@ async function fetchWithAuth(url, options = {}) {
         'Authorization': `Bearer ${state.token}`
     };
 
-    const response = await fetch(url, { ...options, headers });
+    let response = await fetch(url, { ...options, headers });
+
+    if (response.status === 401 && state.refreshToken) {
+        // Try to refresh token
+        try {
+            const success = await attemptTokenRefresh();
+            if (success) {
+                // Retry original request with new token
+                const newHeaders = {
+                    ...options.headers,
+                    'Authorization': `Bearer ${state.token}`
+                };
+                response = await fetch(url, { ...options, headers: newHeaders });
+            }
+        } catch (error) {
+            console.error('Token refresh failed:', error);
+        }
+    }
 
     if (response.status === 401) {
         logout();
@@ -77,6 +95,32 @@ async function fetchWithAuth(url, options = {}) {
     return response;
 }
 
+async function attemptTokenRefresh() {
+    try {
+        const response = await fetch(`${API_URL}/auth/refresh`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ refresh_token: state.refreshToken })
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            if (data.access_token) {
+                state.token = data.access_token;
+                localStorage.setItem('auth_token', data.access_token);
+                if (data.refresh_token) {
+                    state.refreshToken = data.refresh_token;
+                    localStorage.setItem('refresh_token', data.refresh_token);
+                }
+                return true;
+            }
+        }
+    } catch (error) {
+        console.error('Error during token refresh:', error);
+    }
+    return false;
+}
+
 async function fetchTasks() {
     try {
         const response = await fetchWithAuth(`${API_URL}/tasks`);
@@ -134,10 +178,10 @@ async function fetchRecentRuns() {
 function renderTaskList() {
     const sortedTasks = [...state.tasks].sort((a, b) => {
         const aDate = a.runs && a.runs.length > 0
-            ? new Date(a.runs[a.runs.length - 1].created_at)
+            ? new Date(a.runs[0].created_at)
             : new Date(a.created_at);
         const bDate = b.runs && b.runs.length > 0
-            ? new Date(b.runs[b.runs.length - 1].created_at)
+            ? new Date(b.runs[0].created_at)
             : new Date(b.created_at);
         return bDate - aDate;
     });
@@ -145,7 +189,7 @@ function renderTaskList() {
     taskListEl.innerHTML = sortedTasks
         .map((task) => {
             const latestRun = task.runs && task.runs.length > 0
-                ? task.runs[task.runs.length - 1]
+                ? task.runs[0]
                 : null;
             const status = latestRun ? latestRun.status : 'pending';
             const date = latestRun ? new Date(latestRun.created_at) : new Date(task.created_at);
@@ -192,8 +236,6 @@ function selectTask(id, runId = null) {
 
 function renderRunHistory(task) {
     runListEl.innerHTML = task.runs
-        .slice()
-        .reverse()
         .map(
             (run, index) => `
         <li class="run-item ${state.selectedRunId === run.id ? 'active' : ''}" data-id="${run.id}">
@@ -250,7 +292,7 @@ function showTaskView(task) {
     dashboardViewEl.classList.add('hidden');
     taskViewEl.classList.remove('hidden');
 
-    const run = task.runs.find(r => r.id === state.selectedRunId) || task.runs[task.runs.length - 1];
+    const run = task.runs.find(r => r.id === state.selectedRunId) || task.runs[0];
 
     viewGoalEl.textContent = task.goal;
 
@@ -473,7 +515,9 @@ async function showLogin() {
 
 async function logout() {
     state.token = null;
+    state.refreshToken = null;
     localStorage.removeItem('auth_token');
+    localStorage.removeItem('refresh_token');
     showLogin();
 }
 
@@ -493,6 +537,10 @@ async function handleCallback() {
         if (data.access_token) {
             state.token = data.access_token;
             localStorage.setItem('auth_token', data.access_token);
+            if (data.refresh_token) {
+                state.refreshToken = data.refresh_token;
+                localStorage.setItem('refresh_token', data.refresh_token);
+            }
             callbackOverlay.classList.add('hidden');
             appEl.classList.remove('hidden');
             initializeApp();

frontend/src/style.css

@@ -87,7 +87,7 @@ body {
 
 .dashboard-content {
   flex: 1;
-  overflow: hidden;
+  overflow-y: auto;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
@@ -246,7 +246,7 @@ body {
   display: flex;
   gap: 24px;
   flex: 1;
-  overflow: hidden;
+  min-height: 0;
 }
 
 .run-history {
@@ -272,6 +272,7 @@ body {
 
 #run-list {
   list-style: none;
+  flex: 1;
   overflow-y: auto;
   padding: 8px;
 }