Updated public/index.html with 200 additions
--- a/public/index.html
+++ b/public/index.html
@@ -1,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Incident Assistant</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
+        .container { max-width: 900px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        h1, h2 { color: #0056b3; }
+        .incident-form, .job-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; background-color: #e9ecef; }
+        .incident-form input, .incident-form textarea, .job-form input, .job-form textarea { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
+        .incident-form button, .job-form button, .incident-item button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
+        .incident-form button:hover, .job-form button:hover, .incident-item button:hover { background-color: #0056b3; }
+        .incident-list, .job-list { display: grid; gap: 10px; }
+        .incident-item, .job-item { background-color: #fff; border: 1px solid #ddd; padding: 15px; border-radius: 5px; display: flex; flex-direction: column; gap: 5px; }
+        .incident-item h3, .job-item h3 { margin: 0; color: #333; }
+        .incident-item p, .job-item p { margin: 0; font-size: 0.9em; color: #666; }
+        .incident-item .actions { margin-top: 10px; display: flex; gap: 10px; }
+        .incident-item .summary { margin-top: 10px; padding: 10px; background-color: #f0f8ff; border-left: 5px solid #007bff; }
+        .status-open { color: #dc3545; font-weight: bold; }
+        .status-resolved { color: #28a745; font-weight: bold; }
+        .status-pending { color: #ffc107; font-weight: bold; }
+        .status-completed { color: #28a745; font-weight: bold; }
+        .status-in-progress { color: #17a2b8; font-weight: bold; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>AI Incident Assistant</h1>
+
+        <section>
+            <h2>Create New Incident</h2>
+            <form id="incidentForm" class="incident-form">
+                <input type="text" id="incidentTitle" placeholder="Incident Title" required>
+                <textarea id="incidentDescription" placeholder="Incident Description" rows="4" required></textarea>
+                <button type="submit">Add Incident</button>
+            </form>
+        </section>
+
+        <section>
+            <h2>Incidents</h2>
+            <div id="incidentList" class="incident-list"></div>
+        </section>
+
+        <section>
+            <h2>Create New Job</h2>
+            <form id="jobForm" class="job-form">
+                <input type="text" id="jobTitle" placeholder="Job Title" required>
+                <textarea id="jobDescription" placeholder="Job Description" rows="2"></textarea>
+                <button type="submit">Add Job</button>
+            </form>
+        </section>
+
+        <section>
+            <h2>Jobs</h2>
+            <div id="jobList" class="job-list"></div>
+        </section>
+    </div>
+
+    <script>
+        const ws = new WebSocket(`ws://${window.location.host}`);
+        const incidentForm = document.getElementById('incidentForm');
+        const jobForm = document.getElementById('jobForm');
+        const incidentList = document.getElementById('incidentList');
+        const jobList = document.getElementById('jobList');
+
+        let incidents = [];
+        let jobs = [];
+
+        ws.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            console.log('WebSocket message:', data);
+
+            if (data.type === 'init') {
+                incidents = data.incidents;
+                jobs = data.jobs;
+            } else if (data.type === 'incidentCreated') {
+                incidents.push(data.incident);
+            } else if (data.type === 'incidentUpdated') {
+                const index = incidents.findIndex(inc => inc.id === data.incident.id);
+                if (index !== -1) incidents[index] = data.incident;
+            } else if (data.type === 'incidentDeleted') {
+                incidents = incidents.filter(inc => inc.id !== data.id);
+            } else if (data.type === 'jobCreated') {
+                jobs.push(data.job);
+            } else if (data.type === 'jobUpdated') {
+                const index = jobs.findIndex(job => job.id === data.job.id);
+                if (index !== -1) jobs[index] = data.job;
+            }
+            renderLists();
+        };
+
+        incidentForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const title = document.getElementById('incidentTitle').value;
+            const description = document.getElementById('incidentDescription').value;
+            await fetch('/api/incidents', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ title, description })
+            });
+            incidentForm.reset();
+        });
+
+        jobForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const title = document.getElementById('jobTitle').value;
+            const description = document.getElementById('jobDescription').value;
+            await fetch('/api/jobs', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ title, description })
+            });
+            jobForm.reset();
+        });
+
+        async function summarizeIncident(incidentId, description) {
+            const button = document.querySelector(`button[data-incident-id="${incidentId}"][data-action="summarize"]`);
+            button.disabled = true;
+            button.textContent = 'Summarizing...';
+
+            try {
+                const response = await fetch('/api/assist/summarize', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ text: description })
+                });
+                const data = await response.json();
+                if (response.ok) {
+                    const summaryElement = document.getElementById(`summary-${incidentId}`);
+                    summaryElement.textContent = `AI Summary: ${data.summary}`;
+                } else {
+                    alert(`Error summarizing: ${data.error || response.statusText}`);
+                }
+            } catch (error) {
+                console.error('Error during summarization request:', error);
+                alert('Failed to connect to summarization service.');
+            } finally {
+                button.disabled = false;
+                button.textContent = 'Summarize with AI';
+            }
+        }
+
+        async function updateIncidentStatus(incidentId, status) {
+            await fetch(`/api/incidents/${incidentId}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ status })
+            });
+        }
+
+        async function deleteIncident(incidentId) {
+            if (confirm('Are you sure you want to delete this incident?')) {
+                await fetch(`/api/incidents/${incidentId}`, {
+                    method: 'DELETE'
+                });
+            }
+        }
+
+        function renderLists() {
+            incidentList.innerHTML = '';
+            incidents.forEach(incident => {
+                const incidentItem = document.createElement('div');
+                incidentItem.className = 'incident-item';
+                incidentItem.innerHTML = `
+                    <h3>${incident.title} <span class="status-${incident.status}">(${incident.status})</span></h3>
+                    <p>${incident.description}</p>
+                    <p><em>Created: ${new Date(incident.createdAt).toLocaleString()}</em></p>
+                    ${incident.updatedAt ? `<p><em>Last Updated: ${new Date(incident.updatedAt).toLocaleString()}</em></p>` : ''}
+                    <div class="actions">
+                        <button onclick="updateIncidentStatus('${incident.id}', 'resolved')">Mark Resolved</button>
+                        <button onclick="deleteIncident('${incident.id}')">Delete</button>
+                        <button data-incident-id="${incident.id}" data-action="summarize" onclick="summarizeIncident('${incident.id}', '${incident.description.replace(/\'/g, "\\'").replace(/\"/g, "\\\"")}')">Summarize with AI</button>
+                    </div>
+                    <div id="summary-${incident.id}" class="summary"></div>
+                `;
+                incidentList.appendChild(incidentItem);
+            });
+
+            jobList.innerHTML = '';
+            jobs.forEach(job => {
+                const jobItem = document.createElement('div');
+                jobItem.className = 'job-item';
+                jobItem.innerHTML = `
+                    <h3>${job.title} <span class="status-${job.status}">(${job.status})</span></h3>
+                    <p>${job.description || 'No description'}</p>
+                    <p><em>Created: ${new Date(job.createdAt).toLocaleString()}</em></p>
+                    ${job.completedAt ? `<p><em>Completed: ${new Date(job.completedAt).toLocaleString()}</em></p>` : ''}
+                `;
+                jobList.appendChild(jobItem);
+            });
+        }
+
+        // Initial render
+        renderLists();
+    </script>
+</body>
+</html>
+