feat: add incident_id field to ticket model and related components

- Added incident_id to the ticket mapping in app.py.
- Updated csv_data.py to include incident_id when converting CSV rows to tickets.
- Modified operations.py to define incident_id as a CSV ticket field.
- Enhanced the Ticket model in tickets.py to include incident_id.
- Updated usecase_demo.py to accommodate changes in ticket structure.
- Modified CSVTicketTable.jsx to display incident_id in the ticket table.
- Updated TicketList.jsx to filter and display incident_id in the ticket list.
- Enhanced TicketsWithoutAnAssignee.jsx to include incident_id in ticket operations.
- Updated UsecaseDemoPage.jsx to pass matchingTickets to the render function.
- Enhanced demoDefinitions.js to improve prompts for use case demos.
- Added SLA Breach Overview result view in resultViews.jsx to visualize SLA status of tickets.

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

Author: abossard

backend/agents.py

@@ -375,6 +375,7 @@ def _map_mcp_ticket_to_frontend(mcp_ticket: dict) -> dict:
 
     return {
         "id": str(mcp_ticket.get("id", "")),
+        "incident_id": mcp_ticket.get("incident_id"),
         "title": mcp_ticket.get("summary", ""),
         "description": mcp_ticket.get("description", ""),
         "status": status,

backend/app.py

@@ -290,6 +290,7 @@ def csv_row_to_ticket(row: CSVTicketRow) -> Ticket:
 
     return Ticket(
         id=ticket_id,
+        incident_id=row.incident_id or row.entry_id or None,
         summary=row.summary or "No summary",
         description=row.notes or row.summary or "No description",
         status=map_status(row.status or row.status_ppl),

backend/csv_data.py

@@ -21,6 +21,7 @@
 
 
 CSV_TICKET_FIELDS = [
+    {"name": "incident_id", "label": "Incident ID", "type": "string"},
     {"name": "id", "label": "ID", "type": "uuid"},
     {"name": "summary", "label": "Summary", "type": "string"},
     {"name": "status", "label": "Status", "type": "enum"},

backend/operations.py

@@ -159,6 +159,7 @@ class Ticket(BaseModel):
     """
     # Core identifiers
     id: UUID = Field(..., description="Unique ticket identifier")
+    incident_id: Optional[str] = Field(None, description="Original incident ID (INC...)")
 
     # Summary and description
     summary: str = Field(..., max_length=500, description="Short issue summary")

backend/tickets.py

@@ -191,14 +191,13 @@ async def _execute_run(self, run_id: str) -> None:
         # Enforce a predictable output block for table rendering.
         structured_prompt = (
             f"{run.prompt}\n\n"
-            "Zusatzformat:\n"
-            "- Gib zuerst eine kurze Zusammenfassung.\n"
-            "- Füge danach einen JSON-Codeblock mit `rows` hinzu.\n"
-            "- JSON-Schema:\n"
-            "  {\"rows\": [{\"menu_point\": \"...\", \"project_name\": \"...\", "
-            "\"summary\": \"...\", \"agent_prompt\": \"...\", \"ticket_ids\": \"...\", "
-            "\"csv_evidence\": \"...\"}]}\n"
-            "- Falls keine sinnvollen Zeilen existieren, gib `{\"rows\": []}` zurück."
+            "Antwortformat:\n"
+            "- Führe die Anfrage mit möglichst wenigen Tool-Aufrufen aus.\n"
+            "- Nutze kompakte fields und sinnvolle limits.\n"
+            "- Fordere notes/resolution nur bei explizitem Bedarf an.\n"
+            "- Gib einen JSON-Codeblock mit {\"rows\": [...]} zurück.\n"
+            "- Falls keine sinnvollen Zeilen existieren, gib {\"rows\": []} zurück.\n"
+            "- Optional danach: kurze Zusammenfassung in 2-4 Stichpunkten."
         )
 
         try:

backend/usecase_demo.py

@@ -219,7 +219,7 @@ export default function CSVTicketTable() {
 
   // Selected columns
   const [selectedFields, setSelectedFields] = useState([
-    'summary', 'status', 'priority', 'assignee', 'assigned_group', 
+    'incident_id', 'summary', 'status', 'priority', 'assignee', 'assigned_group', 
     'requester_name', 'city', 'created_at'
   ])
 
@@ -313,6 +313,12 @@ export default function CSVTicketTable() {
   const renderCell = (ticket, fieldName) => {
     const value = ticket[fieldName]
 
+    if (fieldName === 'incident_id') {
+      return value ? (
+        <span style={{ fontFamily: 'monospace', fontWeight: 600, letterSpacing: '0.02em' }}>{value}</span>
+      ) : '—'
+    }
+
     if (fieldName === 'status') {
       return getStatusBadge(value)
     }

frontend/src/features/csvtickets/CSVTicketTable.jsx

@@ -291,6 +291,7 @@ function filterTickets(tickets, searchTerm, priorityFilter, statusFilter) {
     const term = searchTerm.toLowerCase()
     filtered = filtered.filter(
       (ticket) =>
+        ticket.incident_id?.toLowerCase().includes(term) ||
         ticket.id?.toLowerCase().includes(term) ||
         ticket.summary?.toLowerCase().includes(term) ||
         ticket.requester_name?.toLowerCase().includes(term) ||
@@ -333,6 +334,18 @@ export default function TicketList() {
 
   // Columns for DataGrid
   const columns = [
+    createTableColumn({
+      columnId: 'incident_id',
+      compare: (a, b) => (a.incident_id || '').localeCompare(b.incident_id || ''),
+      renderHeaderCell: () => 'Incident ID',
+      renderCell: (item) => (
+        <TableCellLayout>
+          <Text style={{ fontFamily: 'monospace', fontSize: tokens.fontSizeBase200, fontWeight: tokens.fontWeightSemibold }}>
+            {item.incident_id || '—'}
+          </Text>
+        </TableCellLayout>
+      ),
+    }),
     createTableColumn({
       columnId: 'summary',
       compare: (a, b) => (a.summary || '').localeCompare(b.summary || ''),
@@ -595,6 +608,11 @@ export default function TicketList() {
               {/* Detail Header */}
               <div className={styles.detailHeader}>
                 <Text className={styles.detailTitle}>{detail.summary}</Text>
+                {detail.incident_id && (
+                  <Text style={{ fontFamily: 'monospace', fontSize: tokens.fontSizeBase200, color: tokens.colorNeutralForeground3, marginBottom: tokens.spacingVerticalXS, display: 'block' }}>
+                    {detail.incident_id}
+                  </Text>
+                )}
                 <div className={styles.detailMeta}>
                   <Badge appearance={getStatusAppearance(detail.status)} className={styles.statusBadge}>
                     {detail.status?.replace('_', ' ')}

frontend/src/features/tickets/TicketList.jsx

@@ -157,7 +157,7 @@ function filterTickets(tickets, searchTerm, priorityFilter) {
     const term = searchTerm.toLowerCase()
     filtered = filtered.filter(
       (ticket) =>
-        ticket.id.toLowerCase().includes(term) ||
+        (ticket.incident_id || ticket.id).toLowerCase().includes(term) ||
         ticket.title.toLowerCase().includes(term) ||
         ticket.description.toLowerCase().includes(term)
     )
@@ -194,12 +194,14 @@ export default function TicketsWithoutAnAssignee() {
   // Columns for DataGrid
   const columns = [
     createTableColumn({
-      columnId: 'id',
-      compare: (a, b) => a.id.localeCompare(b.id),
-      renderHeaderCell: () => 'ID',
+      columnId: 'incident_id',
+      compare: (a, b) => (a.incident_id || a.id).localeCompare(b.incident_id || b.id),
+      renderHeaderCell: () => 'Incident ID',
       renderCell: (item) => (
         <TableCellLayout>
-          <Text weight="semibold">{item.id}</Text>
+          <Text weight="semibold" style={{ fontFamily: 'monospace' }}>
+            {item.incident_id || item.id}
+          </Text>
         </TableCellLayout>
       ),
     }),
@@ -246,7 +248,7 @@ export default function TicketsWithoutAnAssignee() {
 
   const handleReminder = () => {
     if (selectedTicket) {
-      setReminderMessage(`Erinnerung für Ticket ${selectedTicket.id} wurde gesendet.`)
+      setReminderMessage(`Erinnerung für Ticket ${selectedTicket.incident_id || selectedTicket.id} wurde gesendet.`)
       // TODO: Backend integration - send reminder API call
     }
   }
@@ -268,15 +270,15 @@ export default function TicketsWithoutAnAssignee() {
   const handleMarkAsGood = () => {
     if (selectedTicket) {
       setTicketDecisions(prev => ({ ...prev, [selectedTicket.id]: 'GOOD' }))
-      setReminderMessage(`Ticket ${selectedTicket.id} als GOOD markiert.`)
+      setReminderMessage(`Ticket ${selectedTicket.incident_id || selectedTicket.id} als GOOD markiert.`)
       // TODO: Backend integration - update ticket status
     }
   }
 
   const handleMarkAsEscalate = () => {
     if (selectedTicket) {
       setTicketDecisions(prev => ({ ...prev, [selectedTicket.id]: 'ESCALATE' }))
-      setReminderMessage(`Ticket ${selectedTicket.id} zur Eskalation markiert.`)
+      setReminderMessage(`Ticket ${selectedTicket.incident_id || selectedTicket.id} zur Eskalation markiert.`)
       // TODO: Backend integration - escalate ticket
     }
   }
@@ -387,8 +389,10 @@ export default function TicketsWithoutAnAssignee() {
                 </div>
 
                 <div className={styles.detailField}>
-                  <Text className={styles.detailLabel}>Ticket ID</Text>
-                  <Text className={styles.detailValue}>{selectedTicket.id}</Text>
+                  <Text className={styles.detailLabel}>Incident ID</Text>
+                  <Text className={styles.detailValue} style={{ fontFamily: 'monospace', fontWeight: 600 }}>
+                    {selectedTicket.incident_id || selectedTicket.id}
+                  </Text>
                 </div>
 
                 <div className={styles.detailField}>

frontend/src/features/tickets/TicketsWithoutAnAssignee.jsx

@@ -427,7 +427,7 @@ export default function UsecaseDemoPage({ definition }) {
               {config.description && (
                 <Text size={200} className={styles.viewDescription}>{config.description}</Text>
               )}
-              {config.render({ run: currentRun, markdown: visibleResultMarkdown, styles })}
+              {config.render({ run: currentRun, markdown: visibleResultMarkdown, styles, matchingTickets, isLoadingTickets })}
             </div>
           ))
         )}