use the task title, which is the bpmn name, instead of the name, which is the id

src/routes/TaskList.tsx

@@ -29,6 +29,7 @@ export default function TaskList() {
       return (
         <tr key={rowToUse.id}>
           <td>{rowToUse.process_name}</td>
+          <td>{rowToUse.title}</td>
           <td>{rowToUse.name}</td>
           <td>
             <Link to={taskUrl}>{rowToUse.id}</Link>
@@ -49,7 +50,8 @@ export default function TaskList() {
           <tr>
             <th>Process Model</th>
             <th>Task Name</th>
-            <th>Id</th>
+            <th>Task Id</th>
+            <th>GUID</th>
             <th>Process Instance Id</th>
             <th>Status</th>
             <th>Actions</th>

src/routes/TaskShow.tsx

@@ -144,7 +144,7 @@ export default function TaskShow() {
     return (
       <main>
         {buildTaskNavigation()}
-        <h1>Task: {taskToUse.name}</h1>
+        <h1>Task: {taskToUse.title}</h1>
         <h3>Process Model: {taskToUse.process_name}</h3>
         <h3>status: {taskToUse.state}</h3>
         {formElement(taskToUse)}