openship 0.1.0 → 0.1.1

package/apps/dashboard/src/lib/sseClient.ts

@@ -0,0 +1,241 @@
+/**
+ * SSE Client Utility
+ * Provides helper functions for connecting to SSE endpoints
+ */
+
+import { getApiBaseUrl } from '@/lib/api';
+
+export interface SSEClientOptions {
+  onMessage: (data: string) => void;
+  onConnect?: () => void;
+  onDisconnect?: () => void;
+  onError?: (error: Error) => void;
+  headers?: Record<string, string>;
+}
+
+/**
+ * Custom error for terminal failures that should not be retried
+ */
+export class NoRetryError extends Error {
+  public readonly shouldRetry = false;
+  
+  constructor(message: string) {
+    super(message);
+    this.name = 'NoRetryError';
+  }
+}
+
+/**
+ * Connect to live logs SSE stream (runtime logs via local API)
+ */
+export const connectToLiveLogs = async ({
+  projectId = '',
+  options = {} as SSEClientOptions,
+}) => {
+  const baseUrl = getApiBaseUrl();
+  const url = `${baseUrl}projects/${projectId}/logs/stream`;
+
+  return connectToSSE(url, {
+    ...options,
+    headers: {
+      ...options.headers,
+    },
+  });
+};
+
+/**
+ * Connect to build logs SSE stream (via local API)
+ */
+export const connectToBuildLogs = async (
+  deploymentId: string,
+  options: SSEClientOptions
+) => {
+  const baseUrl = getApiBaseUrl();
+
+  return connectToSSE(
+    `${baseUrl}deployments/${deploymentId}/build`,
+    {
+      ...options,
+    }
+  );
+};
+
+/**
+ * Start a new build via local API
+ */
+export const connectToBuildStream = async (
+  sessionId: string,
+  options: SSEClientOptions
+) => {
+  const baseUrl = getApiBaseUrl();
+
+  const response = await fetch(`${baseUrl}deployments/${sessionId}/build`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      ...options.headers,
+    },
+  });
+
+  // Check content type and handle accordingly
+  const contentType = response.headers.get('content-type');
+  
+  if (contentType?.includes('application/json')) {
+    // Response is JSON - process it as a message
+    const data = await response.json();
+    console.log('[SSEClient] Processing JSON response from build start:', data);
+    
+    // Send the JSON data as SSE format for processing
+    const sseMessage = `data: ${JSON.stringify(data)}\n\n`;
+    
+    options.onMessage(sseMessage);
+    
+    // For other JSON responses, return dummy disconnect
+    return { disconnect: () => {} };
+  }
+
+  return processSSEStream(response, options);
+};
+
+/**
+ * Reconnect to existing build session (attach to SSE log stream)
+ */
+export const reconnectToBuildStream = async (
+  sessionId: string,
+  lastEventId: number | undefined,
+  options: SSEClientOptions
+) => {
+  const baseUrl = getApiBaseUrl();
+
+  // Use the SSE stream endpoint to re-attach to running build logs
+  const url = `${baseUrl}deployments/${sessionId}/stream?sessionId=${sessionId}`;
+
+  return connectToSSE(url, options);
+};
+
+/**
+ * Generic SSE connection function
+ */
+export const connectToSSE = async (
+  url: string,
+  options: SSEClientOptions
+) => {
+  const response = await fetch(url, {
+    method: 'GET',
+    credentials: 'include',
+    headers: {
+      'Accept': 'text/event-stream',
+      ...options.headers,
+    },
+  });
+
+  return processSSEStream(response, options);
+};
+
+/**
+ * Parse SSE message and check for terminal error states
+ */
+const parseSSEMessage = (chunk: string): { hasTerminalError: boolean; data: any } => {
+  try {
+    // SSE format is "data: {...}\n\n"
+    const lines = chunk.split('\n');
+    for (const line of lines) {
+      if (line.startsWith('data: ')) {
+        const dataStr = line.substring(6); // Remove "data: " prefix
+        if (dataStr.trim()) {
+          const data = JSON.parse(dataStr);
+          
+          // Check for terminal error states
+          // 1. type: "complete" with error field
+          if (data.type === 'complete' && data.error) {
+            return { hasTerminalError: true, data };
+          }
+          
+          // 2. phase: "failed" or "error"
+          if (data.phase === 'failed' || data.phase === 'error') {
+            return { hasTerminalError: true, data };
+          }
+          
+          // 3. status: "failed" or "error" with error message
+          if ((data.status === 'failed' || data.status === 'error') && data.error) {
+            return { hasTerminalError: true, data };
+          }
+          
+          return { hasTerminalError: false, data };
+        }
+      }
+    }
+  } catch (e) {
+    // Not JSON or invalid format, continue processing
+  }
+  
+  return { hasTerminalError: false, data: null };
+};
+
+/**
+ * Process SSE stream from response
+ */
+const processSSEStream = async (
+  response: Response,
+  options: SSEClientOptions
+) => {
+  const reader = response.body?.getReader();
+  if (!reader) {
+    throw new Error('No reader available');
+  }
+
+  options.onConnect?.();
+
+  const decoder = new TextDecoder();
+  const abortController = new AbortController();
+  let lastMessageHadError = false;
+
+  const readStream = async () => {
+    try {
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        
+        // Check for terminal error states before passing to onMessage
+        const { hasTerminalError, data } = parseSSEMessage(chunk);
+        
+        // Always send the message to the UI
+        options.onMessage(chunk);
+        
+        // If this message indicates a terminal error, mark it
+        if (hasTerminalError) {
+          lastMessageHadError = true;
+          console.log('[SSEClient] Detected terminal error state in message:', data);
+        }
+      }
+      
+      // Stream ended - check if last message was an error
+      if (lastMessageHadError) {
+        console.log('[SSEClient] Stream ended with terminal error - preventing reconnection');
+        options.onError?.(new NoRetryError('Build completed with error'));
+      } else {
+        options.onDisconnect?.();
+      }
+    } catch (err: any) {
+      if (err.name !== 'AbortError') {
+        options.onError?.(err);
+      } else {
+        options.onDisconnect?.();
+      }
+    }
+  };
+
+  readStream();
+
+  // Return disconnect function
+  return {
+    disconnect: () => {
+      abortController.abort();
+      reader.cancel();
+    },
+  };
+};
+

package/apps/dashboard/src/lib/sseMessageProcessors.ts

@@ -0,0 +1,323 @@
+/**
+ * SSE Message Processors
+ * 
+ * These processors define how different types of SSE streams should be handled.
+ * Each processor is responsible for parsing and handling messages specific to its use case.
+ */
+
+import { SSEMessage, SSEMessageProcessor } from '@/hooks/useSSEStream';
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+// ============================================================================
+// BUILD MESSAGE PROCESSOR
+// ============================================================================
+
+export interface BuildMessage extends SSEMessage {
+  type: 'log' | 'success' | 'failure' | 'phase' | 'progress' | 'reconnected' | 'complete' | 'end' | 'connected' | 'started' | 'error' | 'cancelled' | 'unknown';
+  data?: string;
+  success?: boolean;
+  message?: string;
+  error?: string;
+  phase?: string;
+  currentStep?: number;
+  progress?: number;
+  eventId?: number;
+  exitCode?: number;
+  running?: boolean;
+}
+
+export interface BuildMessageCallbacks {
+  onLog?: (message: BuildMessage, rawText?: string, rawBytes?: Uint8Array) => void;
+  onSuccess?: (data?: any) => void;
+  onFailure?: (message?: string) => void;
+  onCanceled?: (message?: string) => void;
+  onPhaseChange?: (phase: string) => void;
+  onProgress?: (currentStep: number, progress: number) => void;
+  onReconnected?: () => void;
+  onContainerExit?: (exitCode: number, message?: string) => void;
+}
+
+export const createBuildMessageProcessor = (
+  callbacks: BuildMessageCallbacks = {}
+): SSEMessageProcessor<BuildMessage> => {
+  return {
+    parseMessage: (jsonData: any): BuildMessage => {
+      // Complete message
+      if (jsonData?.type === 'complete') {
+        return { type: 'complete', ...jsonData };
+      }
+
+      // Container stream end message
+      if (jsonData?.type === 'end') {
+        return { type: 'end', ...jsonData };
+      }
+
+      // Container connected message
+      if (jsonData?.type === 'connected') {
+        return { type: 'connected', ...jsonData };
+      }
+
+      // Container error message
+      if (jsonData?.type === 'error' && !jsonData?.success) {
+        return { type: 'error', ...jsonData };
+      }
+
+      // Reconnected message
+      if (jsonData?.type === 'reconnected') {
+        return { type: 'reconnected', ...jsonData };
+      }
+
+      // Canceled message
+      if (jsonData?.type === 'cancelled') {
+        return { type: 'cancelled', ...jsonData };
+      }
+
+      // Started — build acknowledged, NOT a success event
+      if (jsonData?.type === 'started') {
+        return { type: 'started', ...jsonData };
+      }
+
+      // Log message (must be checked before success/failure catch-all)
+      if (jsonData?.type === 'log' && jsonData?.data) {
+        return { type: 'log', ...jsonData };
+      }
+
+      // Progress update (must be before success/failure catch-all)
+      if (jsonData?.type === 'progress') {
+        return { type: 'progress', ...jsonData };
+      }
+
+      // Success message (catch-all for { success: true })
+      if (jsonData?.success === true) {
+        return { type: 'success', ...jsonData };
+      }
+
+      // Failure message (catch-all for { success: false })
+      if (jsonData?.success === false) {
+        return { type: 'failure', ...jsonData };
+      }
+
+      // Phase change
+      if (jsonData?.phase) {
+        return { type: 'phase', ...jsonData };
+      }
+
+      // Progress update (fallback for messages without explicit type)
+      if (jsonData?.currentStep !== undefined || jsonData?.progress !== undefined) {
+        return { type: 'progress', ...jsonData };
+      }
+
+      return { type: 'unknown', ...jsonData };
+    },
+
+    handleMessage: (message, context) => {
+      const { rawText, rawBytes, writeToTerminal } = context;
+
+      switch (message.type) {
+        case 'complete':
+          if (message.success === true) {
+            callbacks.onSuccess?.(message);
+          } else if (message.success === false) {
+            callbacks.onFailure?.(message.message || message.error || 'Build completed with errors');
+          }
+          break;
+
+        case 'reconnected':
+          callbacks.onReconnected?.();
+          break;
+
+        case 'progress':
+          if (message.currentStep !== undefined && message.progress !== undefined) {
+            callbacks.onProgress?.(message.currentStep, message.progress);
+          }
+          // Also write log if it exists
+          if (message.data && rawBytes) {
+            writeToTerminal?.(rawBytes);
+            callbacks.onLog?.(message, rawText, rawBytes);
+          }
+          break;
+
+        case 'success':
+          callbacks.onSuccess?.(message);
+          break;
+
+        case 'failure':
+          callbacks.onFailure?.(message.message || message.error);
+          break;
+
+        case 'cancelled':
+          callbacks.onCanceled?.(message.message || 'Build cancelled by user');
+          break;
+
+        case 'phase':
+          callbacks.onPhaseChange?.(message.phase!);
+          // Phase messages also have log data
+          if (message.data && rawBytes) {
+            writeToTerminal?.(rawBytes);
+            callbacks.onLog?.(message, rawText, rawBytes);
+          }
+          break;
+
+        case 'log':
+          if (message.data && rawBytes) {
+            writeToTerminal?.(rawBytes);
+            callbacks.onLog?.(message, rawText, rawBytes);
+          }
+          break;
+
+        case 'end':
+          // Container stream ended - check exit code
+          if (message.exitCode !== undefined && message.exitCode !== 0) {
+            const exitMessage = message.message || `Container exited with code ${message.exitCode}`;
+            callbacks.onContainerExit?.(message.exitCode, exitMessage);
+          }
+          break;
+
+        case 'connected':
+          // Container connected - check if it's running
+          if (message.running === false && message.exitCode !== undefined && message.exitCode !== 0) {
+            const exitMessage = `Container not running (exit code: ${message.exitCode})`;
+            callbacks.onContainerExit?.(message.exitCode, exitMessage);
+          }
+          break;
+
+        case 'error':
+          const errorMsg = message.error || message.message || 'Container error occurred';
+          callbacks.onFailure?.(errorMsg);
+          break;
+
+        case 'started':
+          // Build acknowledged — nothing to do, logs will follow
+          break;
+      }
+
+      return true; // Continue processing
+    },
+  };
+};
+
+// ============================================================================
+// LIVE LOGS MESSAGE PROCESSOR
+// ============================================================================
+
+export interface LogMessage extends SSEMessage {
+  type: 'log' | 'connected' | 'error' | 'end' | 'unknown';
+  data?: string;
+  message?: string;
+  error?: string;
+  exitCode?: number;
+  running?: boolean;
+}
+
+export interface LogMessageCallbacks {
+  onLog?: (message: LogMessage, rawText?: string, rawBytes?: Uint8Array) => void;
+  onError?: (message: string) => void;
+  onContainerExit?: (exitCode: number, message?: string) => void;
+}
+
+export const createLogMessageProcessor = (
+  callbacks: LogMessageCallbacks = {}
+): SSEMessageProcessor<LogMessage> => {
+  return {
+    parseMessage: (jsonData: any): LogMessage => {
+      // Container connected
+      if (jsonData?.type === 'connected') {
+        return { type: 'connected', ...jsonData };
+      }
+
+      // Container error
+      if (jsonData?.type === 'error') {
+        return { type: 'error', ...jsonData };
+      }
+
+      // Container stream end
+      if (jsonData?.type === 'end') {
+        return { type: 'end', ...jsonData };
+      }
+
+      // Log message (most common)
+      if (jsonData?.type === 'log' || jsonData?.data) {
+        return { type: 'log', ...jsonData };
+      }
+
+      return { type: 'unknown', ...jsonData };
+    },
+
+    handleMessage: (message, context) => {
+      const { rawText, rawBytes, writeToTerminal } = context;
+
+      switch (message.type) {
+        case 'log':
+          if (message.data && rawBytes) {
+            // Base64-encoded binary data — write to terminal
+            writeToTerminal?.(rawBytes);
+            callbacks.onLog?.(message, rawText, rawBytes);
+          } else if (message.message) {
+            // Plain text fallback (no base64 data)
+            const text = message.message;
+            const encoder = new TextEncoder();
+            const bytes = encoder.encode(text);
+            writeToTerminal?.(bytes);
+            callbacks.onLog?.(message, text, bytes);
+          }
+          break;
+
+        case 'connected':
+          // Container connected - check if it's running
+          if (message.running === false && message.exitCode !== undefined && message.exitCode !== 0) {
+            const exitMessage = `Container not running (exit code: ${message.exitCode})`;
+            callbacks.onContainerExit?.(message.exitCode, exitMessage);
+          }
+          break;
+
+        case 'end':
+          // Container stream ended
+          if (message.exitCode !== undefined && message.exitCode !== 0) {
+            const exitMessage = message.message || `Container exited with code ${message.exitCode}`;
+            callbacks.onContainerExit?.(message.exitCode, exitMessage);
+          }
+          break;
+
+        case 'error':
+          const errorMsg = message.error || message.message || 'Container error occurred';
+          callbacks.onError?.(errorMsg);
+          break;
+      }
+
+      return true; // Continue processing
+    },
+  };
+};
+
+// ============================================================================
+// GENERIC/PASSTHROUGH MESSAGE PROCESSOR
+// ============================================================================
+
+export interface GenericMessage extends SSEMessage {
+  type: string;
+  [key: string]: any;
+}
+
+export const createGenericMessageProcessor = (
+  onMessage?: (message: GenericMessage, context: {
+    rawText?: string;
+    rawBytes?: Uint8Array;
+    writeToTerminal?: (bytes: Uint8Array) => void;
+  }) => void
+): SSEMessageProcessor<GenericMessage> => {
+  return {
+    parseMessage: (jsonData: any): GenericMessage => {
+      return {
+        type: jsonData?.type || 'message',
+        ...jsonData,
+      };
+    },
+
+    handleMessage: (message, context) => {
+      onMessage?.(message, context);
+      return true;
+    },
+  };
+};
+

package/apps/dashboard/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/apps/dashboard/src/proxy.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ * Lightweight middleware — checks cookie existence only.
+ *
+ * Does NOT validate the session (no fetch to API).
+ * Actual session validation happens server-side in the
+ * (dashboard) layout via `getSession()`.
+ *
+ * This gives instant redirects for obviously-unauthenticated users
+ * (no cookie at all) without adding latency or API dependency.
+ */
+
+const PUBLIC_ROUTES = [
+  "/login",
+  "/register",
+  "/forgot-password",
+  "/reset-password",
+  "/verify-email",
+  "/authorize",
+];
+
+/** Better Auth stores session in this cookie by default */
+const SESSION_COOKIE = "better-auth.session_token";
+
+export function proxy(req: NextRequest) {
+  const { pathname } = req.nextUrl;
+  const isPublic = PUBLIC_ROUTES.some((r) => pathname.startsWith(r));
+  const hasCookie = req.cookies.has(SESSION_COOKIE);
+
+  // No cookie + protected route → redirect to login
+  if (!hasCookie && !isPublic) {
+    const url = new URL("/login", req.url);
+    url.searchParams.set("from", pathname);
+    return NextResponse.redirect(url);
+  }
+
+  // Cookie + public route → let auth layout handle the redirect
+  // (it validates the session server-side; stale cookies won't loop)
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\..*).*)"],
+};

package/apps/dashboard/src/styles/Toast.module.css

@@ -0,0 +1,92 @@
+.toastContainer {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.toastWrapper {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  max-width: 500px;
+  padding: 12px 16px;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  animation: slideIn 0.3s ease-out forwards;
+  position: relative;
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 300px;
+  max-width: 500px;
+  padding: 12px 16px;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  animation: slideIn 0.3s ease-out forwards;
+  position: relative;
+}
+
+.toastTitle {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 4px 0;
+}
+
+.toastMessage {
+  font-size: 14px;
+  margin: 0;
+  padding-right: 20px;
+}
+
+.success {
+  background-color: #ecfdf5;
+  border-left: 4px solid #10b981;
+  color: #064e3b;
+}
+
+.error {
+  background-color: #fee2e2;
+  border-left: 4px solid #ef4444;
+  color: #7f1d1d;
+}
+
+.closeButton {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: none;
+  border: none;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.closeButton:hover {
+  opacity: 1;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}