WIP: Staged all changes

frontend/src/lib/Counter.svelte

@@ -0,0 +1,10 @@
+<script>
+  let count = $state(0)
+  const increment = () => {
+    count += 1
+  }
+</script>
+
+<button onclick={increment}>
+  count is {count}
+</button>

frontend/src/lib/api.js

@@ -0,0 +1,55 @@
+import { addToast } from './toasts.js';
+
+const API_BASE_URL = 'http://localhost:8000';
+
+/**
+ * Fetches data from the API.
+ * @param {string} endpoint The API endpoint to fetch data from.
+ * @returns {Promise<any>} The JSON response from the API.
+ */
+async function fetchApi(endpoint) {
+    try {
+        const response = await fetch(`${API_BASE_URL}${endpoint}`);
+        if (!response.ok) {
+            throw new Error(`API request failed with status ${response.status}`);
+        }
+        return await response.json();
+    } catch (error) {
+        console.error(`Error fetching from ${endpoint}:`, error);
+        addToast(error.message, 'error');
+        throw error;
+    }
+}
+
+/**
+ * Posts data to the API.
+ * @param {string} endpoint The API endpoint to post data to.
+ * @param {object} body The data to post.
+ * @returns {Promise<any>} The JSON response from the API.
+ */
+async function postApi(endpoint, body) {
+    try {
+        const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        });
+        if (!response.ok) {
+            throw new Error(`API request failed with status ${response.status}`);
+        }
+        return await response.json();
+    } catch (error) {
+        console.error(`Error posting to ${endpoint}:`, error);
+        addToast(error.message, 'error');
+        throw error;
+    }
+}
+
+export const api = {
+    getPlugins: () => fetchApi('/plugins'),
+    getTasks: () => fetchApi('/tasks'),
+    getTask: (taskId) => fetchApi(`/tasks/${taskId}`),
+    createTask: (pluginId, params) => postApi('/tasks', { plugin_id: pluginId, params }),
+};

frontend/src/lib/stores.js

@@ -0,0 +1,40 @@
+import { writable } from 'svelte/store';
+import { api } from './api.js';
+
+// Store for the list of available plugins
+export const plugins = writable([]);
+
+// Store for the list of tasks
+export const tasks = writable([]);
+
+// Store for the currently selected plugin
+export const selectedPlugin = writable(null);
+
+// Store for the currently selected task
+export const selectedTask = writable(null);
+
+// Store for the logs of the currently selected task
+export const taskLogs = writable([]);
+
+// Function to fetch plugins from the API
+export async function fetchPlugins() {
+    try {
+        const data = await api.getPlugins();
+        console.log('Fetched plugins:', data); // Add console log
+        plugins.set(data);
+    } catch (error) {
+        console.error('Error fetching plugins:', error);
+        // Handle error appropriately in the UI
+    }
+}
+
+// Function to fetch tasks from the API
+export async function fetchTasks() {
+    try {
+        const data = await api.getTasks();
+        tasks.set(data);
+    } catch (error) {
+        console.error('Error fetching tasks:', error);
+        // Handle error appropriately in the UI
+    }
+}

frontend/src/lib/toasts.js

@@ -0,0 +1,13 @@
+import { writable } from 'svelte/store';
+
+export const toasts = writable([]);
+
+export function addToast(message, type = 'info', duration = 3000) {
+    const id = Math.random().toString(36).substr(2, 9);
+    toasts.update(all => [...all, { id, message, type }]);
+    setTimeout(() => removeToast(id), duration);
+}
+
+function removeToast(id) {
+    toasts.update(all => all.filter(t => t.id !== id));
+}