@kb-labs/studio-app 0.6.0

package/src/utils/format-date.ts

@@ -0,0 +1,166 @@
+/**
+ * @module @kb-labs/studio-app/utils/format-date
+ * Date formatting utilities for Studio UI
+ */
+
+export interface FormatTimestampOptions {
+  /**
+   * Locale to use for formatting (defaults to browser locale)
+   */
+  locale?: string;
+  /**
+   * Whether to include time (default: true)
+   */
+  includeTime?: boolean;
+  /**
+   * Whether to use 24-hour format (default: true)
+   */
+  hour24?: boolean;
+}
+
+/**
+ * Format ISO timestamp to human-readable string using browser's locale
+ *
+ * @param isoString - ISO 8601 timestamp string (e.g., "2025-12-21T21:05:36.544Z")
+ * @param options - Formatting options
+ * @returns Formatted date string (e.g., "12/21/2025, 21:05:36" for en-US locale)
+ *
+ * @example
+ * ```ts
+ * formatTimestamp("2025-12-21T21:05:36.544Z")
+ * // => "12/21/2025, 21:05:36" (en-US)
+ * // => "21.12.2025, 21:05:36" (de-DE)
+ * // => "2025/12/21 21:05:36" (ja-JP)
+ *
+ * formatTimestamp("2025-12-21T21:05:36.544Z", { includeTime: false })
+ * // => "12/21/2025"
+ *
+ * formatTimestamp(null)
+ * // => "N/A"
+ * ```
+ */
+export function formatTimestamp(
+  isoString: string | null | undefined,
+  options?: FormatTimestampOptions
+): string {
+  if (!isoString) {
+    return 'N/A';
+  }
+
+  try {
+    const date = new Date(isoString);
+
+    // Check if date is valid
+    if (Number.isNaN(date.getTime())) {
+      return isoString;
+    }
+
+    const { locale, includeTime = true, hour24 = true } = options ?? {};
+
+    const formatOptions: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    };
+
+    if (includeTime) {
+      formatOptions.hour = '2-digit';
+      formatOptions.minute = '2-digit';
+      formatOptions.second = '2-digit';
+      formatOptions.hour12 = !hour24;
+    }
+
+    return date.toLocaleString(locale, formatOptions);
+  } catch {
+    return isoString;
+  }
+}
+
+/**
+ * Format duration in milliseconds to human-readable string
+ *
+ * @param ms - Duration in milliseconds
+ * @returns Formatted duration (e.g., "5m 30s", "1h 20m", "45s")
+ *
+ * @example
+ * ```ts
+ * formatDuration(45000)      // => "45s"
+ * formatDuration(330000)     // => "5m 30s"
+ * formatDuration(4800000)    // => "1h 20m"
+ * formatDuration(null)       // => "N/A"
+ * ```
+ */
+export function formatDuration(ms: number | null | undefined): string {
+  if (ms == null || !Number.isFinite(ms)) {
+    return 'N/A';
+  }
+
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+
+  if (hours > 0) {
+    const remainingMinutes = minutes % 60;
+    return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
+  }
+
+  if (minutes > 0) {
+    const remainingSeconds = seconds % 60;
+    return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
+  }
+
+  return `${seconds}s`;
+}
+
+/**
+ * Format relative time (e.g., "2 hours ago", "in 5 minutes")
+ *
+ * @param isoString - ISO 8601 timestamp string
+ * @param locale - Locale to use (defaults to browser locale)
+ * @returns Relative time string
+ *
+ * @example
+ * ```ts
+ * formatRelativeTime("2025-12-21T19:05:36.544Z") // 2 hours ago
+ * // => "2 hours ago" (en-US)
+ * // => "vor 2 Stunden" (de-DE)
+ * ```
+ */
+export function formatRelativeTime(
+  isoString: string | null | undefined,
+  locale?: string
+): string {
+  if (!isoString) {
+    return 'N/A';
+  }
+
+  try {
+    const date = new Date(isoString);
+    if (Number.isNaN(date.getTime())) {
+      return isoString;
+    }
+
+    const now = Date.now();
+    const diff = date.getTime() - now;
+    const absDiff = Math.abs(diff);
+
+    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+
+    if (absDiff < 60_000) {
+      // < 1 minute
+      return rtf.format(Math.floor(diff / 1000), 'second');
+    }
+    if (absDiff < 3600_000) {
+      // < 1 hour
+      return rtf.format(Math.floor(diff / 60_000), 'minute');
+    }
+    if (absDiff < 86400_000) {
+      // < 1 day
+      return rtf.format(Math.floor(diff / 3600_000), 'hour');
+    }
+    // >= 1 day
+    return rtf.format(Math.floor(diff / 86400_000), 'day');
+  } catch {
+    return isoString;
+  }
+}

package/src/utils/logger.ts

@@ -0,0 +1,110 @@
+/**
+ * @module Studio Logger
+ * Browser-compatible logger for Studio application
+ * 
+ * For production, consider integrating with @kb-labs/core-sys/logging if browser support is added.
+ */
+
+type Fields = Record<string, unknown>;
+
+export interface StudioLogger {
+  debug(message: string, fields?: Fields): void;
+  info(message: string, fields?: Fields): void;
+  warn(message: string, fields?: Fields): void;
+  error(message: string, fields?: Fields | Error): void;
+}
+
+const sessionTraceId = resolveTraceId();
+const sessionReqId = resolveReqId();
+
+/**
+ * Create Studio logger with scope and context
+ * 
+ * The structured format is maintained for consistency with the new logging system.
+ */
+export function createStudioLogger(scope: string, context: Fields = {}): StudioLogger {
+  const baseFields: Fields = {
+    scope,
+    layer: 'studio',
+    ...context,
+  };
+
+  return {
+    debug(message, fields) {
+      emit('debug', scope, message, baseFields, fields);
+    },
+    info(message, fields) {
+      emit('info', scope, message, baseFields, fields);
+    },
+    warn(message, fields) {
+      emit('warn', scope, message, baseFields, fields);
+    },
+    error(message, fields) {
+      if (fields instanceof Error) {
+        emit('error', scope, message, baseFields, {
+          error: {
+            name: fields.name,
+            message: fields.message,
+            stack: fields.stack,
+          },
+        });
+        return;
+      }
+      emit('error', scope, message, baseFields, fields);
+    },
+  };
+}
+
+/**
+ * Emit structured log to console
+ * Maintains compatibility with new logging system format
+ */
+function emit(
+  level: 'debug' | 'info' | 'warn' | 'error',
+  scope: string,
+  message: string,
+  base: Fields,
+  extra?: Fields
+) {
+  const combinedFields = { ...base, ...(extra ?? {}) };
+  const { traceId: fieldTraceId, reqId: fieldReqId, layer, ...rest } = combinedFields;
+
+  // Structured payload matching LogRecord format from @kb-labs/core-sys/logging
+  const payload = {
+    time: new Date().toISOString(),
+    level,
+    category: `studio:${scope}`,
+    msg: message,
+    traceId: (fieldTraceId as string | undefined) ?? sessionTraceId,
+    reqId: (fieldReqId as string | undefined) ?? sessionReqId,
+    meta: {
+      layer: typeof layer === 'string' ? layer : 'studio',
+      scope,
+      ...rest,
+    },
+  };
+
+  const serialized = JSON.stringify(payload);
+
+  // Use appropriate console method
+  if (level === 'error') {
+    console.error(serialized);
+  } else if (level === 'warn') {
+    console.warn(serialized);
+  } else if (level === 'info') {
+  } else {
+    console.debug(serialized);
+  }
+}
+
+function resolveTraceId(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return `studio-trace-${Math.random().toString(36).slice(2)}`;
+}
+
+function resolveReqId(): string {
+  return `studio-req-${Math.random().toString(36).slice(2)}`;
+}
+

package/tailwind.config.ts

@@ -0,0 +1,13 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+
+export default config;
+

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@kb-labs/studio-ui-core": ["../../packages/studio-ui-core/src"],
+"@kb-labs/studio-data-client": ["../../packages/studio-data-client/src"]
+    }
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/vitest-setup.ts

@@ -0,0 +1 @@
+// Vitest setup for studio app