task execution flow.

src/lib/helpers/types.js

@@ -131,7 +131,7 @@
  */
 
 /**
- * @typedef {Object} AgentTaskViewModel
+ * @typedef {Object} AgentTaskModel
  * @property {string} id - Task id.
  * @property {string} name - Task name.
  * @property {string} description - Description.
@@ -141,6 +141,7 @@
  * @property {Date} updated_datetime
  * @property {string} agent_id - Description.
  * @property {string} agent_name - Task detail.
+ * @property {string} direct_agent_id - Run task directly in this agent.
  */
 
 

src/lib/services/api-endpoints.js

@@ -25,6 +25,7 @@ export const endpoints = {
 
     // agent task
     agentTaskListUrl: `${host}/agent/tasks`,
+    agentTaskDetailUrl: `${host}/agent/{agentId}/task/{taskId}`,
 
     // agent instruct
     instructCompletionUrl: `${host}/instruct/{agentId}`,

src/lib/services/task-service.js

@@ -15,4 +15,16 @@ export async function getAgentTasks(filter) {
         }
     });
     return response.data;
+}
+
+/**
+ * Get task detail
+ * @param {string} agentId 
+ * @param {string} taskid 
+ * @returns {Promise<import('$types').AgentTaskModel>}
+ */
+export async function getAgentTaskDetail(agentId, taskid) {
+    const url = replaceUrl(endpoints.agentTaskDetailUrl, { agentId: agentId, taskId: taskid });
+    var response = await axios.get(url);
+    return response.data;
 }

src/routes/page/task/+page.svelte

@@ -28,7 +28,7 @@
 	const firstPage = 1;
 	const pageSize = 10;
 
-    /** @type {import('$types').PagedItems<import('$types').AgentTaskViewModel>} */
+    /** @type {import('$types').PagedItems<import('$types').AgentTaskModel>} */
     let tasks = { count: 0, items: [] };
 
 	/** @type {import('$types').AgentTaskFilter} */
@@ -198,7 +198,7 @@
 								<th scope="col">Name</th>
 								<th scope="col">Description</th>
 								<th scope="col">Agent</th>
-								<th scope="col">Content</th>
+								<th scope="col">Details</th>
 								<th scope="col">Updated Date</th>
 								<th scope="col">Status</th>
 								<th scope="col">Action</th>
@@ -217,6 +217,11 @@
 								<td><span class="badge bg-success">{task.enabled ? "Enabled" : "Disabled"}</span></td>
 								<td>
 									<ul class="list-unstyled hstack gap-1 mb-0">
+										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Execute">
+											<a href="page/task/{task.id}?agentId={task.agent_id}" target="_blank" class="btn btn-sm btn-soft-danger">
+                                                <i class="mdi mdi-eye-outline" />
+                                            </a>
+										</li>
 										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
 											<Button on:click={() => openDeleteModal(task.id)} class="btn btn-sm btn-soft-danger">
                                                 <i class="mdi mdi-delete-outline" />

src/routes/page/task/[taskId]/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+    import { onMount } from 'svelte';
+    import ExecutionFlow from './execution-flow.svelte';
+    import { page } from '$app/stores';
+    const params = $page.params;
+    const agentId = $page.url.searchParams.get('agentId')
+    const taskId = params.taskId;
+
+    onMount(async () => {
+        const container = document.getElementById("drawflow");
+        if (container) {
+
+        }
+        
+    }); 
+</script>
+
+<ExecutionFlow />