@ryanfw/prompt-orchestration-pipeline 0.0.1

package/src/ui/public/app.js

@@ -0,0 +1,260 @@
+/**
+ * Frontend application for Pipeline Orchestrator UI
+ * Handles SSE connection, state updates, and UI rendering
+ */
+
+// DOM elements
+const elements = {
+  changeCount: document.getElementById("changeCount"),
+  updatedAt: document.getElementById("updatedAt"),
+  changesList: document.getElementById("changesList"),
+  watchedPaths: document.getElementById("watchedPaths"),
+  connectionStatus: document.getElementById("connectionStatus"),
+};
+
+// Connection state
+let eventSource = null;
+let reconnectTimer = null;
+const RECONNECT_DELAY = 3000;
+
+/**
+ * Format timestamp as relative time
+ */
+function formatRelativeTime(timestamp) {
+  if (!timestamp) return "Never";
+
+  const now = new Date();
+  const then = new Date(timestamp);
+  const diffMs = now - then;
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+
+  if (diffSec < 10) return "Just now";
+  if (diffSec < 60) return `${diffSec} seconds ago`;
+  if (diffMin === 1) return "1 minute ago";
+  if (diffMin < 60) return `${diffMin} minutes ago`;
+  if (diffHour === 1) return "1 hour ago";
+  if (diffHour < 24) return `${diffHour} hours ago`;
+  if (diffDay === 1) return "1 day ago";
+  return `${diffDay} days ago`;
+}
+
+/**
+ * Format absolute timestamp
+ */
+function formatAbsoluteTime(timestamp) {
+  if (!timestamp) return "Never";
+  const date = new Date(timestamp);
+  return date.toLocaleString();
+}
+
+/**
+ * Update connection status indicator
+ */
+function updateConnectionStatus(status) {
+  const statusDot = elements.connectionStatus.querySelector(".status-dot");
+  const statusText = elements.connectionStatus.querySelector(".status-text");
+
+  statusDot.className = "status-dot";
+
+  switch (status) {
+    case "connected":
+      statusDot.classList.add("connected");
+      statusText.textContent = "Connected";
+      break;
+    case "reconnecting":
+      statusDot.classList.add("reconnecting");
+      statusText.textContent = "Reconnecting...";
+      break;
+    case "disconnected":
+      statusDot.classList.add("disconnected");
+      statusText.textContent = "Disconnected";
+      break;
+    default:
+      statusText.textContent = "Connecting...";
+  }
+}
+
+/**
+ * Render the UI with current state
+ */
+function renderState(state) {
+  // Update change count
+  elements.changeCount.textContent = state.changeCount || 0;
+
+  // Update last updated time
+  elements.updatedAt.textContent = formatRelativeTime(state.updatedAt);
+  elements.updatedAt.title = formatAbsoluteTime(state.updatedAt);
+
+  // Update watched paths
+  if (state.watchedPaths && state.watchedPaths.length > 0) {
+    const pathsSpan = elements.watchedPaths.querySelector(".paths");
+    pathsSpan.textContent = state.watchedPaths.join(", ");
+  }
+
+  // Render recent changes
+  if (state.recentChanges && state.recentChanges.length > 0) {
+    elements.changesList.innerHTML = state.recentChanges
+      .map((change) => {
+        const typeClass = `change-type-${change.type}`;
+        const typeLabel =
+          change.type.charAt(0).toUpperCase() + change.type.slice(1);
+        const relativeTime = formatRelativeTime(change.timestamp);
+        const absoluteTime = formatAbsoluteTime(change.timestamp);
+
+        return `
+          <div class="change-item">
+            <div class="change-header">
+              <span class="change-type ${typeClass}">${typeLabel}</span>
+              <span class="change-time" title="${absoluteTime}">${relativeTime}</span>
+            </div>
+            <div class="change-path">${escapeHtml(change.path)}</div>
+          </div>
+        `;
+      })
+      .join("");
+  } else {
+    elements.changesList.innerHTML =
+      '<div class="empty-state">No changes yet. Modify files in watched directories to see updates.</div>';
+  }
+}
+
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * Fetch initial state from API
+ */
+async function fetchInitialState() {
+  try {
+    const response = await fetch("/api/state");
+    if (!response.ok) throw new Error("Failed to fetch state");
+    const state = await response.json();
+    renderState(state);
+  } catch (error) {
+    console.error("Error fetching initial state:", error);
+  }
+}
+
+/**
+ * Connect to SSE endpoint
+ */
+function connectSSE() {
+  // Clean up existing connection
+  if (eventSource) {
+    eventSource.close();
+  }
+
+  // Clear reconnect timer
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+
+  updateConnectionStatus("connecting");
+
+  // Create new EventSource
+  eventSource = new EventSource("/api/events");
+
+  // Handle state updates
+  eventSource.addEventListener("state", (event) => {
+    try {
+      const state = JSON.parse(event.data);
+      renderState(state);
+      updateConnectionStatus("connected");
+    } catch (error) {
+      console.error("Error parsing state event:", error);
+    }
+  });
+
+  // Handle connection open
+  eventSource.addEventListener("open", () => {
+    console.log("SSE connection established");
+    updateConnectionStatus("connected");
+  });
+
+  // Handle errors
+  eventSource.addEventListener("error", (error) => {
+    console.error("SSE connection error:", error);
+
+    if (eventSource.readyState === EventSource.CLOSED) {
+      updateConnectionStatus("disconnected");
+      scheduleReconnect();
+    } else {
+      updateConnectionStatus("reconnecting");
+    }
+  });
+}
+
+/**
+ * Schedule reconnection attempt
+ */
+function scheduleReconnect() {
+  if (reconnectTimer) return;
+
+  updateConnectionStatus("reconnecting");
+
+  reconnectTimer = setTimeout(() => {
+    console.log("Attempting to reconnect...");
+    connectSSE();
+  }, RECONNECT_DELAY);
+}
+
+/**
+ * Initialize the application
+ */
+async function init() {
+  console.log("Initializing Pipeline Orchestrator UI...");
+
+  // Fetch initial state
+  await fetchInitialState();
+
+  // Connect to SSE
+  connectSSE();
+
+  // Update relative times every 10 seconds
+  setInterval(() => {
+    const updatedAt = elements.updatedAt.textContent;
+    if (updatedAt !== "Never") {
+      const timestamp = elements.updatedAt.title;
+      if (timestamp) {
+        elements.updatedAt.textContent = formatRelativeTime(
+          new Date(timestamp)
+        );
+      }
+    }
+
+    // Update change times
+    document.querySelectorAll(".change-time").forEach((el) => {
+      const absoluteTime = el.title;
+      if (absoluteTime) {
+        el.textContent = formatRelativeTime(new Date(absoluteTime));
+      }
+    });
+  }, 10000);
+}
+
+// Start the application when DOM is ready
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+
+// Clean up on page unload
+window.addEventListener("beforeunload", () => {
+  if (eventSource) {
+    eventSource.close();
+  }
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+  }
+});

package/src/ui/public/index.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pipeline Orchestrator - File Watcher</title>
+    <link rel="stylesheet" href="/style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <h1>Pipeline Orchestrator</h1>
+        <div class="connection-status" id="connectionStatus">
+          <span class="status-dot"></span>
+          <span class="status-text">Connecting...</span>
+        </div>
+      </header>
+
+      <main>
+        <section class="stats-section">
+          <div class="stat-card">
+            <div class="stat-label">Total Changes</div>
+            <div class="stat-value" id="changeCount">0</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">Last Updated</div>
+            <div class="stat-value stat-time" id="updatedAt">Never</div>
+          </div>
+        </section>
+
+        <section class="changes-section">
+          <h2>Recent Changes</h2>
+          <div class="watched-paths" id="watchedPaths">
+            <span class="label">Watching:</span>
+            <span class="paths">Loading...</span>
+          </div>
+          <div class="changes-list" id="changesList">
+            <div class="empty-state">
+              No changes yet. Modify files in watched directories to see
+              updates.
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <footer>
+        <p>Watching for file changes in real-time via Server-Sent Events</p>
+      </footer>
+    </div>
+
+    <script src="/app.js"></script>
+  </body>
+</html>

package/src/ui/public/style.css

@@ -0,0 +1,341 @@
+/**
+ * Pipeline Orchestrator UI Styles
+ * Modern, clean, dark-mode friendly design
+ */
+
+:root {
+  --bg-primary: #0f172a;
+  --bg-secondary: #1e293b;
+  --bg-tertiary: #334155;
+  --text-primary: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --border-color: #334155;
+  --accent-blue: #3b82f6;
+  --accent-green: #10b981;
+  --accent-yellow: #f59e0b;
+  --accent-red: #ef4444;
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+/* Header */
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 3rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 2px solid var(--border-color);
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+/* Connection Status */
+.connection-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: var(--bg-secondary);
+  border-radius: 0.5rem;
+  border: 1px solid var(--border-color);
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.status-dot.connected {
+  background: var(--accent-green);
+  animation: none;
+}
+
+.status-dot.reconnecting {
+  background: var(--accent-yellow);
+}
+
+.status-dot.disconnected {
+  background: var(--accent-red);
+  animation: none;
+}
+
+.status-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Stats Section */
+.stats-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+}
+
+.stat-card {
+  background: var(--bg-secondary);
+  padding: 2rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.4);
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+}
+
+.stat-value {
+  font-size: 3rem;
+  font-weight: 700;
+  color: var(--accent-blue);
+  line-height: 1;
+}
+
+.stat-value.stat-time {
+  font-size: 1.5rem;
+  color: var(--text-primary);
+}
+
+/* Changes Section */
+.changes-section {
+  background: var(--bg-secondary);
+  padding: 2rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow);
+}
+
+.watched-paths {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-tertiary);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.watched-paths .label {
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.watched-paths .paths {
+  color: var(--accent-blue);
+  font-family: "Monaco", "Courier New", monospace;
+}
+
+/* Changes List */
+.changes-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.empty-state {
+  padding: 3rem 2rem;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+.change-item {
+  background: var(--bg-tertiary);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border-color);
+  transition:
+    background 0.2s ease,
+    transform 0.2s ease;
+  animation: slideIn 0.3s ease;
+}
+
+.change-item:hover {
+  background: #3f4b5e;
+  transform: translateX(4px);
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.change-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.change-type {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.change-type-created {
+  background: rgba(16, 185, 129, 0.2);
+  color: var(--accent-green);
+}
+
+.change-type-modified {
+  background: rgba(59, 130, 246, 0.2);
+  color: var(--accent-blue);
+}
+
+.change-type-deleted {
+  background: rgba(239, 68, 68, 0.2);
+  color: var(--accent-red);
+}
+
+.change-time {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  cursor: help;
+}
+
+.change-path {
+  font-family: "Monaco", "Courier New", monospace;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  word-break: break-all;
+}
+
+/* Footer */
+footer {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--border-color);
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .container {
+    padding: 1rem;
+  }
+
+  header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  .stats-section {
+    grid-template-columns: 1fr;
+  }
+
+  .stat-value {
+    font-size: 2.5rem;
+  }
+
+  .watched-paths {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Light mode support (optional) */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg-primary: #f8fafc;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #f1f5f9;
+    --text-primary: #0f172a;
+    --text-secondary: #475569;
+    --text-muted: #64748b;
+    --border-color: #e2e8f0;
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  }
+
+  .change-item:hover {
+    background: #e2e8f0;
+  }
+}