feat: Enhance ticket handling by adding incident ID support and improve UI components for better user experience

Signed-off-by: Andre Bossard <anbossar@microsoft.com>

Author: abossard

.gitignore

@@ -52,3 +52,4 @@ logs/
 *.db
 csv/*.csv
 screenshots/
+*.png

backend/app.py

@@ -31,34 +31,19 @@
 # Import unified operation system
 
 # Agent Fabric
-from agent_workbench import (
-    AgentDefinitionCreate,
-    AgentDefinitionUpdate,
-    AgentRunCreate,
-    CriteriaType,
-    RunStatus,
-)
-
+from agent_workbench import (AgentDefinitionCreate, AgentDefinitionUpdate,
+                             AgentRunCreate, CriteriaType, RunStatus)
 # Agent service for OpenAI LangGraph agents
 from agents import AgentRequest, AgentResponse, agent_service
 from api_decorators import get_operation, operation
-
 # CSV ticket service
 from csv_data import Ticket, get_csv_ticket_service
-
 # FastMCP client for direct ticket MCP calls (no AI)
 from fastmcp import Client as MCPClient
 from mcp_handler import handle_mcp_request
-from operations import (
-    CSV_TICKET_FIELDS,
-    op_create_task,
-    op_delete_task,
-    op_get_task,
-    op_get_task_stats,
-    op_list_tasks,
-    op_update_task,
-    task_service,
-)
+from operations import (CSV_TICKET_FIELDS, op_create_task, op_delete_task,
+                        op_get_task, op_get_task_stats, op_list_tasks,
+                        op_update_task, task_service)
 from usecase_demo import UsecaseDemoRunCreate, usecase_demo_run_service
 from workbench_integration import _tool_registry, workbench_service
 
@@ -68,9 +53,9 @@
 from pydantic import ValidationError
 from quart import Quart, jsonify, request, send_from_directory
 from quart_cors import cors
-
 # Import Pydantic models and service
-from tasks import Task, TaskCreate, TaskFilter, TaskService, TaskStats, TaskUpdate
+from tasks import (Task, TaskCreate, TaskFilter, TaskService, TaskStats,
+                   TaskUpdate)
 
 # ============================================================================
 # APPLICATION SETUP
@@ -748,17 +733,21 @@ def get_sort_key(ticket: Ticket):
 @app.route("/api/csv-tickets/<ticket_id>", methods=["GET"])
 async def get_csv_ticket(ticket_id: str):
     """
-    Get one CSV ticket by ID.
+    Get one CSV ticket by INC number (e.g. INC000016349327) or UUID.
 
     Query params:
     - fields: optional comma-separated list of fields to include
     """
-    try:
-        parsed_id = UUID(ticket_id)
-    except ValueError:
-        return jsonify({"error": "Invalid ticket ID"}), 400
+    # Try INC number first (primary identifier)
+    if ticket_id.upper().startswith("INC"):
+        ticket = _csv_ticket_service.get_ticket_by_incident_id(ticket_id)
+    else:
+        try:
+            parsed_id = UUID(ticket_id)
+        except ValueError:
+            return jsonify({"error": "Invalid ticket ID. Use an INC number (e.g. INC000016349327) or UUID."}), 400
+        ticket = _csv_ticket_service.get_ticket(parsed_id)
 
-    ticket = _csv_ticket_service.get_ticket(parsed_id)
     if ticket is None:
         return jsonify({"error": "Ticket not found"}), 404
 

backend/csv_data.py

@@ -440,6 +440,7 @@ class CSVTicketService:
 
     def __init__(self):
         self._tickets: dict[UUID, Ticket] = {}
+        self._tickets_by_incident_id: dict[str, Ticket] = {}
         self._loaded_files: set[str] = set()
 
     def load_csv(self, file_path: str | Path) -> int:
@@ -455,13 +456,19 @@ def load_csv(self, file_path: str | Path) -> int:
 
         for ticket in tickets:
             self._tickets[ticket.id] = ticket
+            if ticket.incident_id:
+                self._tickets_by_incident_id[ticket.incident_id] = ticket
 
         self._loaded_files.add(file_key)
         return len(tickets)
 
     def get_ticket(self, ticket_id: UUID) -> Optional[Ticket]:
-        """Get ticket by ID."""
+        """Get ticket by UUID."""
         return self._tickets.get(ticket_id)
+
+    def get_ticket_by_incident_id(self, incident_id: str) -> Optional[Ticket]:
+        """Get ticket by INC number (e.g. INC000016349327)."""
+        return self._tickets_by_incident_id.get(incident_id)
 
     def list_tickets(
         self,

backend/operations.py

@@ -9,17 +9,14 @@
 from typing import Any
 from uuid import UUID
 
-from agent_workbench import AgentDefinitionCreate, AgentDefinitionUpdate, AgentRunCreate
+from agent_workbench import (AgentDefinitionCreate, AgentDefinitionUpdate,
+                             AgentRunCreate)
 from api_decorators import operation
 from csv_data import get_csv_ticket_service
-from tasks import Task, TaskCreate, TaskFilter, TaskService, TaskStats, TaskUpdate
-from tickets import (
-    SlaBreachReport,
-    Ticket,
-    TicketSlaInfo,
-    TicketStatus,
-    get_sla_breach_report,
-)
+from tasks import (Task, TaskCreate, TaskFilter, TaskService, TaskStats,
+                   TaskUpdate)
+from tickets import (SlaBreachReport, Ticket, TicketSlaInfo, TicketStatus,
+                     get_sla_breach_report)
 
 # Service instances shared across interfaces
 _task_service = TaskService()
@@ -198,12 +195,16 @@ async def op_csv_list_tickets(
 
 @operation(
     name="csv_get_ticket",
-    description="Get a single CSV ticket by UUID",
+    description="Get a single CSV ticket by INC number (e.g. INC000016349327) or UUID",
     http_method="GET",
 )
 async def op_csv_get_ticket(ticket_id: str) -> Ticket | None:
-    """Get one CSV ticket."""
+    """Get one CSV ticket by INC number or UUID."""
     _ensure_csv_loaded()
+    # Try INC number first (primary identifier)
+    if ticket_id.upper().startswith("INC"):
+        return _csv_service.get_ticket_by_incident_id(ticket_id)
+    # Fall back to UUID for internal use
     try:
         parsed_id = UUID(ticket_id)
     except ValueError:
@@ -213,7 +214,7 @@ async def op_csv_get_ticket(ticket_id: str) -> Ticket | None:
 
 @operation(
     name="csv_search_tickets",
-    description="Search CSV tickets by text across summary, description, notes, requester and location fields",
+    description="Search CSV tickets by text across incident ID, summary, description, notes, requester and location fields",
     http_method="GET",
 )
 async def op_csv_search_tickets(query: str, limit: int = 50) -> list[Ticket]:
@@ -228,6 +229,7 @@ async def op_csv_search_tickets(query: str, limit: int = 50) -> list[Ticket]:
     for ticket in _csv_service.list_tickets():
         haystack = " ".join(
             [
+                ticket.incident_id or "",
                 ticket.summary or "",
                 ticket.description or "",
                 ticket.notes or "",

frontend/src/features/usecase-demo/UsecaseDemoPage.jsx

@@ -204,7 +204,7 @@ export default function UsecaseDemoPage({ definition }) {
   )
 
   const selectedTicket = useMemo(
-    () => matchingTickets.find((ticket) => ticket.id === selectedTicketId) || null,
+    () => matchingTickets.find((ticket) => ticket.incident_id === selectedTicketId || ticket.id === selectedTicketId) || null,
     [matchingTickets, selectedTicketId]
   )
 
@@ -254,10 +254,10 @@ export default function UsecaseDemoPage({ definition }) {
       const loadedTickets = tickets.filter((ticket) => !ticket._error)
       setMatchingTickets(loadedTickets)
       setSelectedTicketId((previousId) => {
-        if (previousId && loadedTickets.some((ticket) => ticket.id === previousId)) {
+        if (previousId && loadedTickets.some((ticket) => ticket.incident_id === previousId || ticket.id === previousId)) {
           return previousId
         }
-        return loadedTickets[0]?.id || null
+        return loadedTickets[0]?.incident_id || loadedTickets[0]?.id || null
       })
 
       if (!loadedTickets.length) {
@@ -462,31 +462,33 @@ export default function UsecaseDemoPage({ definition }) {
                     </tr>
                   </thead>
                   <tbody>
-                    {matchingTickets.map((ticket, index) => (
-                      <tr key={ticket.id} className={index % 2 ? styles.rowAlt : ''}>
-                        <td className={styles.td}>{ticket.id}</td>
+                    {matchingTickets.map((ticket, index) => {
+                      const ticketKey = ticket.incident_id || ticket.id
+                      return (
+                      <tr key={ticketKey} className={index % 2 ? styles.rowAlt : ''}>
+                        <td className={styles.td}>{ticketKey}</td>
                         <td className={styles.td}>{ticket.summary || '—'}</td>
                         <td className={styles.td}>{ticket.status || '—'}</td>
                         <td className={styles.td}>
                           <Button
                             size="small"
-                            appearance={selectedTicketId === ticket.id ? 'primary' : 'secondary'}
-                            onClick={() => setSelectedTicketId(ticket.id)}
-                            data-testid={`${testIdPrefix}-ticket-open-${ticket.id}`}
+                            appearance={selectedTicketId === ticketKey ? 'primary' : 'secondary'}
+                            onClick={() => setSelectedTicketId(ticketKey)}
+                            data-testid={`${testIdPrefix}-ticket-open-${ticketKey}`}
                           >
                             Open
                           </Button>
                         </td>
                       </tr>
-                    ))}
+                    )})}
                   </tbody>
                 </table>
               </div>
 
               {selectedTicket && (
                 <div className={styles.ticketDetails} data-testid={`${testIdPrefix}-ticket-details`}>
                   <Text weight="semibold">{selectedTicket.summary || 'Ticket Details'}</Text>
-                  <Text>ID: {selectedTicket.id}</Text>
+                  <Text>INC: {selectedTicket.incident_id || '—'}</Text>
                   <Text>Status: {selectedTicket.status || '—'}</Text>
                   <Text>Priority: {selectedTicket.priority || '—'}</Text>
                   <Text>Assignee: {selectedTicket.assignee || '—'}</Text>

frontend/src/features/usecase-demo/demoDefinitions.js

@@ -1,19 +1,19 @@
 const VPN_DEFAULT_PROMPT = `Find VPN issues where you think it's more a skill issue than a technical issue.
 
 For speed:
-- First call csv_search_tickets with fields="id,summary,status,priority,assignee,assigned_group,created_at" and limit=20.
-- Use csv_get_ticket only for the top 3-5 most relevant IDs when deeper context is required.
+- First call csv_search_tickets with fields="incident_id,summary,status,priority,assignee,assigned_group,created_at" and limit=20.
+- Use csv_get_ticket only for the top 3-5 most relevant INC numbers when deeper context is required.
 - Stop after the first sufficient result set; avoid extra tool loops.
 - Do not request notes or resolution by default; only request them when explicitly needed for evidence.`;
 
 const OPS_DEFAULT_PROMPT = `Analysiere Tickets zu "Outlook" oder "E-Mail" und erstelle einen einzigen Operations-Usecase.
 Für schnelle Ausführung:
-- Nutze zuerst csv_search_tickets mit fields="id,summary,status,priority,assigned_group,created_at" und limit=20.
-- Nutze csv_get_ticket nur für wenige ausgewählte Ticket-IDs, wenn Details nötig sind.
+- Nutze zuerst csv_search_tickets mit fields="incident_id,summary,status,priority,assigned_group,created_at" und limit=20.
+- Nutze csv_get_ticket nur für wenige ausgewählte INC-Nummern, wenn Details nötig sind.
 - Beende nach dem ersten ausreichenden Datensatz und vermeide zusätzliche Tool-Schleifen.
 - Fordere notes/resolution nicht standardmäßig an, nur wenn sie für die Aussage zwingend notwendig sind.
 Liefere nur eine kurze, handlungsorientierte Zusammenfassung mit Prioritäten und nächstem Schritt.
-Nutze ausschließlich CSV-Daten und nenne die verwendeten Ticket-IDs in Fließtext.`;
+Nutze ausschließlich CSV-Daten und nenne die verwendeten INC-Nummern in Fließtext.`;
 
 const SLA_BREACH_DEFAULT_PROMPT = `Call csv_sla_breach_tickets with default parameters (unassigned_only=true, include_ok=false).
 
@@ -58,6 +58,7 @@ export const USECASE_DEMO_DEFINITIONS = [
       description:
         "Ticket IDs from the agent result are resolved against CSV data. Click a ticket to inspect details.",
       fields: [
+        "incident_id",
         "id",
         "summary",
         "status",

frontend/src/features/usecase-demo/usecaseDemoUtils.js

@@ -1,58 +1,69 @@
 const UUID_PATTERN =
-  /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi
+  /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi;
+
+const INC_PATTERN = /INC\d{12,15}/gi;
 
 export function formatDateTime(value) {
-  if (!value) return '—'
-  const parsed = new Date(value)
-  if (Number.isNaN(parsed.getTime())) return value
-  return parsed.toLocaleString()
+  if (!value) return "—";
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return value;
+  return parsed.toLocaleString();
 }
 
 export function upsertRun(runs, updatedRun, maxSize = 25) {
-  const index = runs.findIndex((item) => item.id === updatedRun.id)
+  const index = runs.findIndex((item) => item.id === updatedRun.id);
   if (index === -1) {
-    return [updatedRun, ...runs].slice(0, maxSize)
+    return [updatedRun, ...runs].slice(0, maxSize);
   }
 
-  const next = [...runs]
-  next[index] = updatedRun
-  next.sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
-  return next
+  const next = [...runs];
+  next[index] = updatedRun;
+  next.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+  return next;
 }
 
 export function parseTicketIds(rawValue) {
-  if (rawValue == null) return []
+  if (rawValue == null) return [];
 
   const asText = Array.isArray(rawValue)
-    ? rawValue.join(',')
-    : String(rawValue)
+    ? rawValue.join(",")
+    : String(rawValue);
+
+  // Try INC numbers first (primary identifier)
+  const incMatches = asText.match(INC_PATTERN);
+  if (incMatches?.length) {
+    return incMatches.map((value) => value.toUpperCase());
+  }
 
-  const uuidMatches = asText.match(UUID_PATTERN)
+  const uuidMatches = asText.match(UUID_PATTERN);
   if (uuidMatches?.length) {
-    return uuidMatches.map((value) => value.toLowerCase())
+    return uuidMatches.map((value) => value.toLowerCase());
   }
 
   return asText
     .split(/[\n,;\s]+/)
     .map((value) => value.trim())
-    .filter(Boolean)
+    .filter(Boolean);
 }
 
-export function extractTicketIdsFromRows(rows, ticketIdFields = ['ticket_ids', 'ticket_id', 'ticketIds']) {
-  const ids = new Set()
+export function extractTicketIdsFromRows(
+  rows,
+  ticketIdFields = ["ticket_ids", "ticket_id", "ticketIds"],
+) {
+  const ids = new Set();
   for (const row of rows || []) {
-    if (!row || typeof row !== 'object') continue
+    if (!row || typeof row !== "object") continue;
     for (const field of ticketIdFields) {
-      const fieldValue = row[field]
+      const fieldValue = row[field];
       for (const parsedId of parseTicketIds(fieldValue)) {
-        ids.add(parsedId)
+        ids.add(parsedId);
       }
     }
   }
-  return Array.from(ids)
+  return Array.from(ids);
 }
 
 export function sanitizeMarkdownForDisplay(markdown) {
-  if (!markdown) return ''
-  return markdown.replace(/```json[\s\S]*?```/gi, '').trim()
+  if (!markdown) return "";
+  return markdown.replace(/```json[\s\S]*?```/gi, "").trim();
 }

frontend/src/services/api.js

@@ -210,8 +210,8 @@ export async function getCSVTicketStats() {
 }
 
 /**
- * Get one CSV ticket by ID.
- * @param {string} ticketId - Ticket UUID
+ * Get one CSV ticket by INC number (e.g. INC000016349327) or UUID.
+ * @param {string} ticketId - INC number or UUID
  * @param {string[]} fields - Optional field selection
  * @returns {Promise<Object>} Ticket details
  */
@@ -310,7 +310,7 @@ export async function deleteWorkbenchAgent(agentId) {
 
 export async function runWorkbenchAgent(
   agentId,
-  { inputPrompt = "", requiredInputValue = "" } = {}
+  { inputPrompt = "", requiredInputValue = "" } = {},
 ) {
   return fetchJSON(`${API_BASE_URL}/workbench/agents/${agentId}/runs`, {
     method: "POST",