test

frontend/src/main.js

@@ -0,0 +1,149 @@
+const API_URL = 'http://localhost:3000';
+
+const state = {
+    tasks: [],
+    selectedTaskId: null,
+};
+
+// DOM elements
+const taskListEl = document.getElementById('task-list');
+const newTaskBtn = document.getElementById('new-task-btn');
+const modalContainer = document.getElementById('modal-container');
+const newTaskForm = document.getElementById('new-task-form');
+const cancelTaskBtn = document.getElementById('cancel-task');
+const emptyStateEl = document.getElementById('empty-state');
+const taskViewEl = document.getElementById('task-view');
+const logsOutputEl = document.getElementById('logs-output');
+const viewGoalEl = document.getElementById('view-goal');
+const viewStatusEl = document.getElementById('view-status');
+const viewDateEl = document.getElementById('view-date');
+const answerContainerEl = document.getElementById('answer-container');
+const answerOutputEl = document.getElementById('answer-output');
+
+async function fetchTasks() {
+    try {
+        const response = await fetch(`${API_URL}/tasks`);
+        state.tasks = await response.json();
+        renderTaskList();
+
+        // Update current view if a task is selected
+        if (state.selectedTaskId) {
+            const task = state.tasks.find(t => t.id === state.selectedTaskId);
+            if (task) {
+                showTaskView(task);
+            }
+        }
+    } catch (error) {
+        console.error('Error fetching tasks:', error);
+    }
+}
+
+function renderTaskList() {
+    taskListEl.innerHTML = state.tasks
+        .map(
+            (task) => `
+        <li class="task-item ${state.selectedTaskId === task.id ? 'active' : ''}" data-id="${task.id}">
+            <div class="task-item-title">${task.goal}</div>
+            <div class="task-item-meta">
+                <span class="status-dot ${task.status}"></span>
+                <span>${new Date(task.created_at).toLocaleDateString()}</span>
+            </div>
+        </li>
+    `
+        )
+        .join('');
+
+    // Add event listeners
+    document.querySelectorAll('.task-item').forEach((item) => {
+        item.addEventListener('click', () => {
+            selectTask(item.dataset.id);
+        });
+    });
+}
+
+function selectTask(id) {
+    state.selectedTaskId = id;
+    const task = state.tasks.find((t) => t.id === id);
+    if (!task) return;
+
+    renderTaskList();
+    showTaskView(task);
+}
+
+function showTaskView(task) {
+    emptyStateEl.classList.add('hidden');
+    taskViewEl.classList.remove('hidden');
+
+    viewGoalEl.textContent = task.goal;
+    viewStatusEl.textContent = task.status;
+    viewStatusEl.className = `status-badge ${task.status}`;
+    viewDateEl.textContent = new Date(task.created_at).toLocaleDateString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric'
+    });
+
+    if (task.answer) {
+        answerContainerEl.classList.remove('hidden');
+        answerOutputEl.textContent = task.answer;
+    } else {
+        answerContainerEl.classList.add('hidden');
+    }
+
+    // Check if we should auto-scroll
+    const isAtBottom = logsOutputEl.scrollHeight - logsOutputEl.scrollTop <= logsOutputEl.clientHeight + 10;
+    const isFirstLoad = logsOutputEl.innerHTML === '';
+
+    // Simple log format
+    logsOutputEl.innerHTML = task.logs
+        .split('\n')
+        .map((line) => `<div class="log-entry">${escapeHtml(line)}</div>`)
+        .join('');
+
+    if (isAtBottom || isFirstLoad) {
+        logsOutputEl.scrollTop = logsOutputEl.scrollHeight;
+    }
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Event Listeners
+newTaskBtn.addEventListener('click', () => {
+    modalContainer.classList.remove('hidden');
+});
+
+cancelTaskBtn.addEventListener('click', () => {
+    modalContainer.classList.add('hidden');
+});
+
+newTaskForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const formData = new FormData(newTaskForm);
+    const goal = formData.get('goal');
+
+    modalContainer.classList.add('hidden');
+    newTaskForm.reset();
+
+    try {
+        const response = await fetch(`${API_URL}/tasks`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ goal }),
+        });
+        const newTask = await response.json();
+        state.tasks.unshift(newTask);
+        selectTask(newTask.id);
+    } catch (error) {
+        console.error('Error creating task:', error);
+        alert('Failed to execute task. Check console.');
+    }
+});
+
+// Initial load
+fetchTasks();
+// Poll for updates every 5 seconds (simplistic for now)
+setInterval(fetchTasks, 5000);