superintent 0.0.1

package/dist/ui/components/knowledge.js

@@ -0,0 +1,238 @@
+// Knowledge-related UI components
+import { escapeHtml } from './utils.js';
+// Helper to render knowledge view
+export function renderKnowledgeView() {
+    return `
+    <div class="flex flex-col lg:flex-row gap-4 lg:gap-6">
+      <aside class="w-full lg:w-64 shrink-0 lg:sticky lg:top-4 lg:self-start">
+        <h2 class="text-2xl font-bold text-gray-800 mb-4">Filters</h2>
+        <div class="grid grid-cols-2 lg:grid-cols-1 gap-2 lg:gap-4 lg:space-y-0 bg-white rounded-lg shadow-card p-3 lg:p-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
+            <select name="k-status" class="w-full border rounded-lg px-3 py-2 text-sm bg-white"
+                    hx-get="/partials/knowledge-list"
+                    hx-trigger="change"
+                    hx-target="#knowledge-list"
+                    hx-include="[name='k-category'],[name='k-namespace'],[name='k-scope'],[name='k-origin']">
+              <option value="active">Active</option>
+              <option value="inactive">Inactive</option>
+              <option value="all">All</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
+            <select name="k-category" class="w-full border rounded-lg px-3 py-2 text-sm bg-white"
+                    hx-get="/partials/knowledge-list"
+                    hx-trigger="change"
+                    hx-target="#knowledge-list"
+                    hx-include="[name='k-status'],[name='k-namespace'],[name='k-scope'],[name='k-origin']">
+              <option value="">All</option>
+              <option value="pattern">Pattern</option>
+              <option value="truth">Truth</option>
+              <option value="principle">Principle</option>
+              <option value="architecture">Architecture</option>
+              <option value="gotcha">Gotcha</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Scope</label>
+            <select name="k-scope" class="w-full border rounded-lg px-3 py-2 text-sm bg-white"
+                    hx-get="/partials/knowledge-list"
+                    hx-trigger="change"
+                    hx-target="#knowledge-list"
+                    hx-include="[name='k-status'],[name='k-category'],[name='k-namespace'],[name='k-origin']">
+              <option value="">All</option>
+              <option value="global">Global</option>
+              <option value="new-only">New Only</option>
+              <option value="backward-compatible">Backward Compatible</option>
+              <option value="legacy-frozen">Legacy Frozen</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Source</label>
+            <select name="k-origin" class="w-full border rounded-lg px-3 py-2 text-sm bg-white"
+                    hx-get="/partials/knowledge-list"
+                    hx-trigger="change"
+                    hx-target="#knowledge-list"
+                    hx-include="[name='k-status'],[name='k-category'],[name='k-namespace'],[name='k-scope']">
+              <option value="">All</option>
+              <option value="ticket">Ticket</option>
+              <option value="discovery">Discovery</option>
+              <option value="manual">Manual</option>
+            </select>
+          </div>
+        </div>
+      </aside>
+
+      <main class="flex-1">
+        <h1 class="text-2xl font-bold text-gray-800 mb-4">Knowledge Base</h1>
+        <div id="knowledge-list" hx-get="/partials/knowledge-list" hx-trigger="load, poll-refresh" hx-swap="innerHTML">
+        </div>
+      </main>
+    </div>
+  `;
+}
+// Helper to render knowledge list
+export function renderKnowledgeList(items) {
+    if (items.length === 0) {
+        return '<p class="text-gray-500 text-center py-8">No knowledge entries found</p>';
+    }
+    const categoryColors = {
+        pattern: 'purple',
+        truth: 'green',
+        principle: 'orange',
+        architecture: 'blue',
+        gotcha: 'red',
+    };
+    return `
+    <div class="space-y-3">
+      ${items.map(k => {
+        const color = categoryColors[k.category || ''] || 'gray';
+        const inactiveClass = !k.active ? 'opacity-60 border-dashed' : '';
+        return `
+          <div class="bg-white rounded-lg shadow-card p-4 hover:shadow-card-hover transition-shadow cursor-pointer ${inactiveClass}"
+               hx-get="/partials/knowledge-modal/${encodeURIComponent(k.id)}"
+               hx-target="#modal-content"
+               hx-trigger="click"
+               onclick="showModal()">
+            <div class="text-xs font-mono text-gray-400 mb-1">${escapeHtml(k.id)}</div>
+            <div class="flex items-start justify-between">
+              <div class="flex-1">
+                <div class="flex items-center gap-2">
+                  <div class="text-sm font-medium text-gray-800">${escapeHtml(k.title)}</div>
+                  ${!k.active ? '<span class="px-2 py-0.5 text-xs rounded bg-gray-200 text-gray-600">Inactive</span>' : ''}
+                </div>
+                <p class="text-sm text-gray-600 mt-1 line-clamp-2">${escapeHtml(k.content.slice(0, 200))}${k.content.length > 200 ? '...' : ''}</p>
+              </div>
+              <div class="text-right flex-shrink-0 ml-4">
+                <div class="text-sm font-medium text-gray-600">${Math.round(k.confidence * 100)}%</div>
+                <div class="text-xs text-gray-400">confidence</div>
+              </div>
+            </div>
+            <div class="flex items-center mt-3 text-xs text-gray-500 gap-3">
+              <span><span class="text-gray-400">Namespace:</span> ${escapeHtml(k.namespace)}</span>
+              <span><span class="text-gray-400">Source:</span> ${k.source || 'manual'}${k.source === 'ticket' && k.origin_ticket_type ? ` (${k.origin_ticket_type})` : ''}</span>
+              ${k.category ? `<span><span class="text-gray-400">Category:</span> <span class="text-${color}-600 font-medium">${k.category}</span></span>` : ''}
+              <span><span class="text-gray-400">Scope:</span> ${k.decision_scope}</span>
+            </div>
+          </div>
+        `;
+    }).join('')}
+    </div>
+  `;
+}
+// Helper to render knowledge modal
+export function renderKnowledgeModal(knowledge) {
+    const categoryColors = {
+        pattern: 'purple',
+        truth: 'green',
+        principle: 'orange',
+        architecture: 'blue',
+        gotcha: 'red',
+    };
+    const color = categoryColors[knowledge.category || ''] || 'gray';
+    return `
+    <div class="p-6">
+      <div class="flex items-start justify-between mb-4">
+        <div>
+          <div class="flex items-center gap-2 mb-1">
+            <span class="text-xs font-mono text-gray-400">${escapeHtml(knowledge.id)}</span>
+            <button type="button"
+                    class="p-0.5 text-gray-400 hover:text-blue-600 rounded transition-colors"
+                    title="Copy knowledge ID"
+                    onclick="navigator.clipboard.writeText('${escapeHtml(knowledge.id)}').then(() => { const svg = this.querySelector('svg'); const originalPath = svg.innerHTML; svg.innerHTML = '<path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M5 13l4 4L19 7&quot;></path>'; this.classList.add('text-green-600'); setTimeout(() => { svg.innerHTML = originalPath; this.classList.remove('text-green-600'); }, 1500); })">
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+              </svg>
+            </button>
+            <span class="px-2 py-0.5 text-xs font-medium rounded ${knowledge.active ? 'bg-green-100 text-green-700' : 'bg-gray-200 text-gray-600'}">${knowledge.active ? 'Active' : 'Inactive'}</span>
+            ${knowledge.category ? `<span class="px-2 py-0.5 text-xs font-medium rounded bg-${color}-100 text-${color}-700">${knowledge.category}</span>` : ''}
+          </div>
+          <h2 class="text-xl font-bold text-gray-800">${escapeHtml(knowledge.title)}</h2>
+        </div>
+        <button onclick="hideModal()" class="text-gray-400 hover:text-gray-600 p-1">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        </button>
+      </div>
+
+      <!-- Confidence & Usage Stats -->
+      <div class="mb-4 grid grid-cols-2 gap-4">
+        <div class="bg-gray-50 rounded-lg p-3">
+          <div class="text-xs text-gray-500 mb-1">Confidence</div>
+          <div class="text-xl font-semibold text-${color}-600 mb-2">${Math.round(knowledge.confidence * 100)}%</div>
+          <div class="w-full bg-gray-200 rounded-full h-1.5">
+            <div class="bg-${color}-500 h-1.5 rounded-full transition-all" style="width: ${Math.round(knowledge.confidence * 100)}%"></div>
+          </div>
+        </div>
+        <div class="bg-gray-50 rounded-lg p-3">
+          <div class="text-xs text-gray-500 mb-1">Usage</div>
+          <div class="text-xl font-semibold text-gray-700">${knowledge.usage_count || 0} <span class="text-sm font-normal text-gray-500">times</span></div>
+          <div class="text-xs text-gray-400 mt-1">${knowledge.last_used_at ? 'Last used ' + knowledge.last_used_at.split('T')[0] : 'Never used'}</div>
+        </div>
+      </div>
+
+      <!-- Content -->
+      <div class="mb-4">
+        <h3 class="text-sm font-semibold text-gray-700 mb-2">Content</h3>
+        <div class="text-sm text-gray-700 bg-gray-50 rounded-lg p-4 leading-relaxed markdown-content" data-markdown>${escapeHtml(knowledge.content)}</div>
+      </div>
+
+      <!-- Metadata -->
+      <div class="mb-4">
+        <h3 class="text-sm font-semibold text-gray-700 mb-2">Metadata</h3>
+        <div class="text-sm text-gray-600 space-y-1">
+          <div><span class="text-gray-400">Namespace:</span> ${escapeHtml(knowledge.namespace)}</div>
+          <div><span class="text-gray-400">Scope:</span> ${knowledge.decision_scope}</div>
+          <div><span class="text-gray-400">Source:</span> ${knowledge.source}${knowledge.source === 'ticket' && knowledge.origin_ticket_type ? ` (${knowledge.origin_ticket_type})` : ''}</div>
+        </div>
+      </div>
+
+      ${knowledge.origin_ticket_id ? `
+        <div class="mb-4">
+          <h3 class="text-sm font-semibold text-gray-700 mb-2">Origin Ticket</h3>
+          <span class="inline-flex items-center px-2 py-1 text-xs rounded-lg bg-yellow-50 text-yellow-700 hover:bg-yellow-100 cursor-pointer font-mono font-medium"
+                hx-get="/partials/ticket-modal/${encodeURIComponent(knowledge.origin_ticket_id)}"
+                hx-target="#modal-content"
+                hx-trigger="click">
+            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+            </svg>
+            ${escapeHtml(knowledge.origin_ticket_id)}
+          </span>
+        </div>
+      ` : ''}
+
+      <!-- Tags -->
+      ${knowledge.tags?.length ? `
+        <div class="mb-4">
+          <h3 class="text-sm font-semibold text-gray-700 mb-2">Tags</h3>
+          <div class="flex flex-wrap gap-2">
+            ${knowledge.tags.map(t => `<span class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-700">${escapeHtml(t)}</span>`).join('')}
+          </div>
+        </div>
+      ` : ''}
+
+      <!-- Actions & Metadata Footer -->
+      <div class="mt-6 pt-4 border-t flex items-center justify-between">
+        <div class="text-xs text-gray-400">
+          <span>Created: ${knowledge.created_at || 'N/A'}</span>
+          <span class="ml-4">Updated: ${knowledge.updated_at || 'N/A'}</span>
+        </div>
+        <button type="button"
+                class="px-3 py-1.5 text-xs font-medium ${knowledge.active ? 'text-gray-700 bg-gray-100 hover:bg-gray-200' : 'text-green-700 bg-green-50 hover:bg-green-100'} rounded transition-colors"
+                hx-patch="/api/knowledge/${knowledge.id}/active"
+                hx-vals='{"active": ${!knowledge.active}}'
+                hx-target="#modal-content"
+                hx-swap="innerHTML"
+                hx-on::after-request="htmx.trigger('#knowledge-list', 'poll-refresh')">
+          ${knowledge.active ? 'Deactivate' : 'Activate'}
+        </button>
+      </div>
+    </div>
+  `;
+}

package/dist/ui/components/layout.d.ts

@@ -0,0 +1 @@
+export declare function getHtml(namespace: string): string;

package/dist/ui/components/layout.js

@@ -0,0 +1,323 @@
+// Main layout component for Superintent Web UI
+import { escapeHtml } from './utils.js';
+// Main HTML shell with navigation, tabs, and JavaScript
+export function getHtml(namespace) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Superintent</title>
+  <link rel="stylesheet" href="/styles.css">
+<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked@17.0.1/lib/marked.umd.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.3.1/dist/purify.min.js"></script>
+  <style>
+    .drag-over { outline: 2px dashed var(--color-blue-500); background: var(--color-blue-50); }
+    .dragging { opacity: 0.5; }
+    .htmx-indicator { display: none; }
+    .htmx-request .htmx-indicator { display: inline-block; }
+    .htmx-request.htmx-indicator { display: inline-block; }
+    .tab-active { color: var(--color-blue-700); }
+    .score-bar { height: 4px; border-radius: 2px; }
+    .modal-content { max-height: 85vh; min-height: 200px; }
+    #modal { opacity: 0; transition: opacity 150ms ease-out; }
+    #modal.show { opacity: 1; }
+    #modal-content { transform: scale(0.95); transition: transform 150ms ease-out; }
+    #modal.show #modal-content { transform: scale(1); }
+    /* Markdown prose styles */
+    .markdown-content h1, .markdown-content h2, .markdown-content h3 { font-weight: 600; margin-top: 1em; margin-bottom: 0.5em; }
+    .markdown-content h1 { font-size: 1.25em; }
+    .markdown-content h2 { font-size: 1.1em; }
+    .markdown-content h3 { font-size: 1em; }
+    .markdown-content p { margin-bottom: 0.75em; }
+    .markdown-content ul, .markdown-content ol { margin-left: 1.5em; margin-bottom: 0.75em; }
+    .markdown-content ul { list-style-type: disc; }
+    .markdown-content ol { list-style-type: decimal; }
+    .markdown-content li { margin-bottom: 0.25em; }
+    .markdown-content code { background: var(--color-gray-200); padding: 0.125em 0.25em; border-radius: 0.25em; font-size: 0.9em; }
+    .markdown-content pre { background: var(--color-gray-800); color: var(--color-gray-100); padding: 0.75em; border-radius: 0.375em; overflow-x: auto; margin-bottom: 0.75em; }
+    .markdown-content pre code { background: none; padding: 0; color: inherit; }
+    .markdown-content strong { font-weight: 600; }
+    .markdown-content a { color: var(--color-blue-600); text-decoration: underline; }
+    .markdown-content blockquote { border-left: 3px solid var(--color-gray-300); padding-left: 1em; color: var(--color-gray-500); margin-bottom: 0.75em; }
+    .markdown-content li:has(> input[type="checkbox"]) { list-style: none; display: flex; align-items: baseline; gap: 0.4em; margin-left: -1.5em; }
+    .markdown-content li > input[type="checkbox"] { margin: 0; pointer-events: none; }
+  </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+  <!-- Navigation -->
+  <nav class="bg-white shadow-sm">
+    <div class="max-w-7xl mx-auto px-4">
+      <div class="flex items-center justify-between h-14">
+        <span class="text-sm sm:text-xl font-bold text-gray-800">Superintent</span>
+        <div class="flex">
+          <button id="tab-ticket" onclick="switchTab('ticket')"
+                  class="px-2 sm:px-4 py-4 text-xs sm:text-sm font-medium text-gray-600 hover:text-gray-900 cursor-pointer tab-active">
+            Ticket
+          </button>
+          <button id="tab-search" onclick="switchTab('search')"
+                  class="px-2 sm:px-4 py-4 text-xs sm:text-sm font-medium text-gray-600 hover:text-gray-900 cursor-pointer">
+            Search
+          </button>
+          <button id="tab-knowledge" onclick="switchTab('knowledge')"
+                  class="px-2 sm:px-4 py-4 text-xs sm:text-sm font-medium text-gray-600 hover:text-gray-900 cursor-pointer">
+            Knowledge
+          </button>
+          <button id="tab-spec" onclick="switchTab('spec')"
+                  class="px-2 sm:px-4 py-4 text-xs sm:text-sm font-medium text-gray-600 hover:text-gray-900 cursor-pointer">
+            Spec
+          </button>
+        </div>
+        <div class="text-xs text-gray-400" id="status-indicator">
+          <span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-1"></span>
+          <span class="hidden sm:inline">${escapeHtml(namespace)}</span>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Main Content -->
+  <main id="main-content" class="p-2 sm:p-4">
+    <!-- Ticket View (default) - full width -->
+    <div id="view-ticket" hx-get="/partials/kanban-view" hx-trigger="load"></div>
+    <!-- Search View -->
+    <div id="view-search" class="hidden max-w-7xl mx-auto" hx-get="/partials/search-view" hx-trigger="revealed"></div>
+    <!-- Knowledge View -->
+    <div id="view-knowledge" class="hidden max-w-7xl mx-auto" hx-get="/partials/knowledge-view" hx-trigger="revealed"></div>
+    <!-- Spec View -->
+    <div id="view-spec" class="hidden max-w-7xl mx-auto" hx-get="/partials/spec-view" hx-trigger="revealed"></div>
+  </main>
+
+  <!-- Modal -->
+  <div id="modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50" onclick="if(event.target===this)hideModal()">
+    <div id="modal-content" class="modal-content bg-white rounded-lg shadow-2xl w-full max-w-2xl overflow-auto m-4">
+      <!-- Modal content loaded via HTMX -->
+    </div>
+  </div>
+
+  <script>
+    // Tab switching with URL hash persistence
+    function switchTab(tab, updateHash = true) {
+      ['ticket', 'search', 'knowledge', 'spec'].forEach(t => {
+        document.getElementById('view-' + t).classList.toggle('hidden', t !== tab);
+        document.getElementById('tab-' + t).classList.toggle('tab-active', t === tab);
+      });
+      // Update URL hash for refresh persistence
+      if (updateHash) {
+        history.replaceState(null, '', '#' + tab);
+      }
+      // Trigger HTMX load for lazy-loaded views
+      htmx.trigger('#view-' + tab, 'revealed');
+    }
+
+    // Restore tab from URL hash on page load
+    (function() {
+      const hash = window.location.hash.slice(1);
+      if (['ticket', 'search', 'knowledge', 'spec'].includes(hash)) {
+        switchTab(hash, false);
+      }
+    })();
+
+    // Markdown rendering with sanitization
+    function renderMarkdown(content) {
+      if (typeof marked !== 'undefined' && typeof DOMPurify !== 'undefined') {
+        const html = marked.parse(content);
+        return DOMPurify.sanitize(html, {
+          ADD_TAGS: ['input'],
+          ADD_ATTR: ['type', 'checked', 'disabled'],
+        });
+      }
+      // Fallback: escape HTML and preserve whitespace
+      return content.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+
+    // Render markdown content in elements with data-markdown attribute
+    function processMarkdownElements() {
+      document.querySelectorAll('[data-markdown]').forEach(function(el) {
+        if (!el.dataset.rendered) {
+          el.innerHTML = renderMarkdown(el.textContent);
+          el.dataset.rendered = 'true';
+        }
+      });
+    }
+
+    // Markdown editor: toggle between write and preview tabs
+    function initMarkdownEditor(editorId) {
+      const editor = document.getElementById(editorId);
+      if (!editor) return;
+      const textarea = editor.querySelector('textarea');
+      const preview = editor.querySelector('[data-md-preview]');
+      const writeTab = editor.querySelector('[data-md-tab="write"]');
+      const previewTab = editor.querySelector('[data-md-tab="preview"]');
+
+      writeTab.addEventListener('click', function() {
+        textarea.classList.remove('hidden');
+        preview.classList.add('hidden');
+        writeTab.classList.add('border-blue-700', 'text-blue-700');
+        writeTab.classList.remove('border-transparent', 'text-gray-500');
+        previewTab.classList.remove('border-blue-700', 'text-blue-700');
+        previewTab.classList.add('border-transparent', 'text-gray-500');
+      });
+
+      previewTab.addEventListener('click', function() {
+        textarea.classList.add('hidden');
+        preview.classList.remove('hidden');
+        previewTab.classList.add('border-blue-700', 'text-blue-700');
+        previewTab.classList.remove('border-transparent', 'text-gray-500');
+        writeTab.classList.remove('border-blue-700', 'text-blue-700');
+        writeTab.classList.add('border-transparent', 'text-gray-500');
+        preview.innerHTML = textarea.value.trim()
+          ? renderMarkdown(textarea.value)
+          : '<p class="text-gray-400 italic">Nothing to preview</p>';
+      });
+    }
+
+    // Modal functions
+    function showModal() {
+      const modal = document.getElementById('modal');
+      // Clear previous content and show loading spinner
+      document.getElementById('modal-content').innerHTML = '<div class="flex justify-center items-center py-16"><div class="animate-spin h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div></div>';
+      modal.classList.remove('hidden');
+      document.body.style.overflow = 'hidden';
+      // Trigger reflow for transition
+      void modal.offsetWidth;
+      modal.classList.add('show');
+    }
+    function hideModal() {
+      const modal = document.getElementById('modal');
+      modal.classList.remove('show');
+      document.body.style.overflow = '';
+      // Wait for transition to finish before hiding
+      setTimeout(() => modal.classList.add('hidden'), 150);
+    }
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') hideModal();
+    });
+
+    // Drag and drop
+    let draggedId = null;
+
+    function onDragStart(e, id) {
+      draggedId = id;
+      e.target.classList.add('dragging');
+      e.dataTransfer.effectAllowed = 'move';
+    }
+
+    function onDragEnd(e) {
+      e.target.classList.remove('dragging');
+      document.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
+    }
+
+    function onDragOver(e) {
+      e.preventDefault();
+      e.currentTarget.classList.add('drag-over');
+    }
+
+    function onDragLeave(e) {
+      e.currentTarget.classList.remove('drag-over');
+    }
+
+    function onDrop(e, newStatus) {
+      e.preventDefault();
+      e.currentTarget.classList.remove('drag-over');
+      if (!draggedId) return;
+
+      fetch('/api/tickets/' + encodeURIComponent(draggedId) + '/status', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: 'status=' + encodeURIComponent(newStatus)
+      })
+      .then(r => r.json())
+      .then(data => {
+        if (data.success) {
+          // Refresh all columns
+          htmx.trigger('#kanban-columns', 'refresh');
+        }
+      });
+      draggedId = null;
+    }
+
+    // HTMX event handlers
+    document.body.addEventListener('htmx:afterRequest', function(e) {
+      if (e.detail.pathInfo.requestPath.includes('/status')) {
+        htmx.trigger('#kanban-columns', 'refresh');
+      }
+    });
+
+    // Process markdown elements after HTMX swaps content
+    document.body.addEventListener('htmx:afterSwap', function(e) {
+      processMarkdownElements();
+    });
+
+    // Auto-refresh polling for Tickets and Knowledge tabs
+    (function() {
+      const POLL_INTERVAL = 5000; // 5 seconds
+      let pollTimer = null;
+      let currentTab = 'ticket';
+      let isPageVisible = true;
+
+      // Start polling for the current tab
+      function startPolling() {
+        stopPolling();
+        if (!isPageVisible) return;
+
+        pollTimer = setInterval(function() {
+          if (!isPageVisible) return;
+
+          if (currentTab === 'ticket') {
+            htmx.trigger('#kanban-columns', 'refresh');
+          } else if (currentTab === 'knowledge') {
+            htmx.trigger('#knowledge-list', 'poll-refresh');
+          } else if (currentTab === 'spec') {
+            htmx.trigger('#spec-list', 'poll-refresh');
+          }
+        }, POLL_INTERVAL);
+      }
+
+      // Stop polling
+      function stopPolling() {
+        if (pollTimer) {
+          clearInterval(pollTimer);
+          pollTimer = null;
+        }
+      }
+
+      // Handle tab switching - update currentTab and restart polling
+      const originalSwitchTab = window.switchTab;
+      window.switchTab = function(tab, updateHash) {
+        currentTab = tab;
+        originalSwitchTab(tab, updateHash);
+        // Only poll for ticket and knowledge tabs
+        if (tab === 'ticket' || tab === 'knowledge' || tab === 'spec') {
+          startPolling();
+        } else {
+          stopPolling();
+        }
+      };
+
+      // Handle page visibility changes
+      document.addEventListener('visibilitychange', function() {
+        isPageVisible = !document.hidden;
+        if (isPageVisible && (currentTab === 'ticket' || currentTab === 'knowledge' || currentTab === 'spec')) {
+          // Immediate refresh when tab becomes visible
+          if (currentTab === 'ticket') {
+            htmx.trigger('#kanban-columns', 'refresh');
+          } else if (currentTab === 'knowledge') {
+            htmx.trigger('#knowledge-list', 'poll-refresh');
+          } else if (currentTab === 'spec') {
+            htmx.trigger('#spec-list', 'poll-refresh');
+          }
+          startPolling();
+        } else {
+          stopPolling();
+        }
+      });
+
+      // Initialize polling for default tab (ticket)
+      startPolling();
+    })();
+  </script>
+</body>
+</html>`;
+}

package/dist/ui/components/search.d.ts

@@ -0,0 +1,15 @@
+export declare function renderSearchView(): string;
+export declare function renderSearchResults(results: {
+    id: string;
+    title: string;
+    content: string;
+    category?: string;
+    namespace: string;
+    source?: string;
+    origin_ticket_type?: string;
+    decision_scope: string;
+    tags?: string[];
+    score: number;
+    confidence: number;
+    active: boolean;
+}[]): string;