@joewinke/jatui 0.1.0

package/src/lib/utils/dateFormatters.ts

@@ -0,0 +1,153 @@
+/**
+ * Date formatting utilities for consistent date/time display.
+ *
+ * UTC/ISO Timestamp Handling:
+ * Database timestamps are often stored without timezone info (e.g., "2024-11-21 15:30:00").
+ * These utilities normalize timestamps to ensure correct UTC parsing.
+ */
+
+/**
+ * Normalize a timestamp string to proper ISO 8601 format.
+ * Handles database timestamps that may lack 'T' separator or 'Z' suffix.
+ */
+export function normalizeTimestamp(timestamp: string): string {
+	if (!timestamp) return timestamp;
+
+	if (timestamp.includes('T')) {
+		if (timestamp.endsWith('Z')) return timestamp;
+		if (/[+-]\d{2}:\d{2}$/.test(timestamp)) return timestamp;
+		return timestamp + 'Z';
+	}
+
+	return timestamp.replace(' ', 'T') + 'Z';
+}
+
+/**
+ * Parse a potentially non-standard timestamp into a Date object.
+ */
+export function parseTimestamp(timestamp: string | null | undefined): Date | null {
+	if (!timestamp) return null;
+
+	const normalized = normalizeTimestamp(timestamp);
+	const date = new Date(normalized);
+
+	return isNaN(date.getTime()) ? null : date;
+}
+
+/**
+ * Format relative time (e.g., "2d", "3mo", "1y").
+ * Compact format suitable for tables and compact UIs.
+ */
+export function formatRelativeTime(dateStr: string | null | undefined): string {
+	if (!dateStr) return '-';
+
+	const date = parseTimestamp(dateStr);
+	if (!date) return '-';
+
+	const now = new Date();
+	const diffMs = now.getTime() - date.getTime();
+	const diffMins = Math.floor(diffMs / (1000 * 60));
+	const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+	const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+	const diffWeeks = Math.floor(diffDays / 7);
+	const diffMonths = Math.floor(diffDays / 30);
+	const diffYears = Math.floor(diffDays / 365);
+
+	if (diffMins < 1) return 'now';
+	if (diffMins < 60) return `${diffMins}m`;
+	if (diffHours < 24) return `${diffHours}h`;
+	if (diffDays < 7) return `${diffDays}d`;
+	if (diffWeeks < 4) return `${diffWeeks}w`;
+	if (diffMonths < 12) return `${diffMonths}mo`;
+	return `${diffYears}y`;
+}
+
+/**
+ * Format full date and time for tooltips and detailed views.
+ */
+export function formatFullDate(dateStr: string | null | undefined): string {
+	if (!dateStr) return '';
+
+	const date = parseTimestamp(dateStr);
+	if (!date) return '';
+
+	return date.toLocaleString('en-US', {
+		month: 'short',
+		day: 'numeric',
+		year: 'numeric',
+		hour: '2-digit',
+		minute: '2-digit'
+	});
+}
+
+/**
+ * Format short date for compact displays (e.g., date range picker).
+ */
+export function formatShortDate(dateStr: string | null | undefined): string {
+	if (!dateStr) return '';
+
+	const date = parseTimestamp(dateStr);
+	if (!date) return '';
+
+	return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+/**
+ * Format last activity time for agent cards.
+ * Shows "Just now", "Xm ago", "Xh ago", or "Xd ago".
+ */
+export function formatLastActivity(timestamp: string | null | undefined): string {
+	if (!timestamp) return 'Never';
+
+	const date = parseTimestamp(timestamp);
+	if (!date) return 'Never';
+
+	const now = new Date();
+	const diffMs = now.getTime() - date.getTime();
+	const diffMins = Math.floor(diffMs / 60000);
+	const diffHours = Math.floor(diffMs / 3600000);
+	const diffDays = Math.floor(diffMs / 86400000);
+
+	if (diffMins < 1) return 'Just now';
+	if (diffMins < 60) return `${diffMins}m ago`;
+	if (diffHours < 24) return `${diffHours}h ago`;
+	return `${diffDays}d ago`;
+}
+
+/**
+ * Format date for display (simple locale string).
+ */
+export function formatDate(dateString: string | null | undefined): string {
+	if (!dateString) return 'N/A';
+
+	const date = parseTimestamp(dateString);
+	if (!date) return 'N/A';
+
+	return date.toLocaleString();
+}
+
+/**
+ * Get milliseconds since timestamp (for calculations).
+ */
+export function getTimeSinceMs(timestamp: string | null | undefined): number {
+	if (!timestamp) return Infinity;
+
+	const date = parseTimestamp(timestamp);
+	if (!date) return Infinity;
+
+	return Date.now() - date.getTime();
+}
+
+/**
+ * Get minutes since timestamp.
+ */
+export function getTimeSinceMinutes(timestamp: string | null | undefined): number {
+	return getTimeSinceMs(timestamp) / 60000;
+}
+
+/**
+ * Check if timestamp is within a given number of minutes.
+ */
+export function isWithinMinutes(timestamp: string | null | undefined, minutes: number): boolean {
+	return getTimeSinceMinutes(timestamp) < minutes;
+}

package/src/lib/utils/mentionParser.ts

@@ -0,0 +1,188 @@
+/**
+ * Mention Parser Utilities
+ *
+ * Handles parsing and rendering of @-mentions in messages.
+ * Format: [@Display Name](type:id) -> clickable links
+ *
+ * The URL generator is configurable — consuming apps provide their own
+ * routing via the `urlGenerator` parameter or by setting a default.
+ */
+
+export interface MentionMatch {
+	type: string
+	id: string
+	displayName: string
+	url: string
+	startIndex: number
+	endIndex: number
+	fullMatch: string
+}
+
+export type MentionUrlGenerator = (type: string, id: string) => string
+
+// Regex to match mention pattern: [@Display Name](type:id)
+const MENTION_REGEX = /\[@([^\]]+)\]\(([^:]+):([^)]+)\)/g
+
+// Default URL generator (apps can override)
+let defaultUrlGenerator: MentionUrlGenerator = (type, id) => `#${type}/${id}`
+
+/**
+ * Set the default URL generator for mentions.
+ * Call this once at app startup to configure mention link routing.
+ */
+export function setMentionUrlGenerator(generator: MentionUrlGenerator): void {
+	defaultUrlGenerator = generator
+}
+
+/**
+ * Parse message content and extract all mentions
+ */
+export function parseMentions(
+	content: string,
+	urlGenerator?: MentionUrlGenerator
+): MentionMatch[] {
+	const mentions: MentionMatch[] = []
+	const gen = urlGenerator ?? defaultUrlGenerator
+	let match
+
+	MENTION_REGEX.lastIndex = 0
+
+	while ((match = MENTION_REGEX.exec(content)) !== null) {
+		const [fullMatch, displayName, type, id] = match
+
+		mentions.push({
+			type,
+			id,
+			displayName,
+			url: gen(type, id),
+			startIndex: match.index,
+			endIndex: match.index + fullMatch.length,
+			fullMatch
+		})
+	}
+
+	return mentions
+}
+
+/**
+ * Convert message content with mentions to HTML
+ */
+export function renderMentionsAsHTML(
+	content: string,
+	urlGenerator?: MentionUrlGenerator
+): string {
+	const mentions = parseMentions(content, urlGenerator)
+
+	if (mentions.length === 0) {
+		return escapeHTML(content)
+	}
+
+	let result = ''
+	let lastIndex = 0
+
+	mentions.forEach((mention) => {
+		result += escapeHTML(content.substring(lastIndex, mention.startIndex))
+		result += `<a href="${mention.url}" class="mention-link mention-${mention.type}" data-mention-type="${mention.type}" data-mention-id="${mention.id}">@${escapeHTML(mention.displayName)}</a>`
+		lastIndex = mention.endIndex
+	})
+
+	result += escapeHTML(content.substring(lastIndex))
+	return result
+}
+
+/**
+ * Create a mention string for insertion into message input
+ */
+export function createMentionString(type: string, id: string, displayName: string): string {
+	return `[@${displayName}](${type}:${id})`
+}
+
+/**
+ * Extract plain text from message content (remove mention markup)
+ */
+export function extractPlainText(content: string): string {
+	MENTION_REGEX.lastIndex = 0
+	return content.replace(MENTION_REGEX, '@$1')
+}
+
+/**
+ * Check if cursor is inside a mention
+ */
+export function findMentionAtCursor(content: string, cursorPosition: number): MentionMatch | null {
+	const mentions = parseMentions(content)
+	return (
+		mentions.find(
+			(mention) => cursorPosition >= mention.startIndex && cursorPosition <= mention.endIndex
+		) || null
+	)
+}
+
+/**
+ * Find @ symbol and following text that could be a mention being typed.
+ * Supported symbols: @ $ # ! ~ / +
+ */
+export function findPartialMention(
+	content: string,
+	cursorPosition: number
+): { start: number; query: string } | null {
+	const mentionSymbols = ['@', '$', '#', '!', '~', '/', '+']
+	let symbolIndex = -1
+
+	for (let i = cursorPosition - 1; i >= 0; i--) {
+		const char = content[i]
+
+		if (mentionSymbols.includes(char)) {
+			symbolIndex = i
+			break
+		}
+
+		if (char === ' ' || char === '\n' || char === ']' || char === ')') {
+			break
+		}
+	}
+
+	if (symbolIndex === -1) return null
+
+	const query = content.substring(symbolIndex + 1, cursorPosition).trim()
+
+	const existingMention = findMentionAtCursor(content, symbolIndex)
+	if (existingMention) return null
+
+	return { start: symbolIndex, query }
+}
+
+/**
+ * Replace partial mention with complete mention string
+ */
+export function replaceMentionInContent(
+	content: string,
+	startIndex: number,
+	endIndex: number,
+	mentionString: string
+): { newContent: string; newCursorPosition: number } {
+	const before = content.substring(0, startIndex)
+	const after = content.substring(endIndex)
+	const newContent = before + mentionString + after
+	const newCursorPosition = startIndex + mentionString.length
+
+	return { newContent, newCursorPosition }
+}
+
+/**
+ * Simple HTML escape function
+ */
+export function escapeHTML(text: string): string {
+	return text
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#039;')
+}
+
+/**
+ * Count mentions in content
+ */
+export function countMentions(content: string): number {
+	return parseMentions(content).length
+}

package/src/lib/utils/phoneFormat.ts

@@ -0,0 +1,74 @@
+/**
+ * Phone number formatting utilities
+ *
+ * Provides consistent phone number formatting as (xxx) xxx-xxxx
+ * Limits input to 10 digits and handles formatting as user types
+ */
+
+/**
+ * Strips all non-numeric characters from a phone number
+ */
+export function stripPhoneNumber(value: string): string {
+	return value.replace(/\D/g, '');
+}
+
+/**
+ * Formats a phone number to (xxx) xxx-xxxx format
+ */
+export function formatPhoneNumber(value: string): string {
+	const digits = stripPhoneNumber(value);
+	const limitedDigits = digits.slice(0, 10);
+
+	if (limitedDigits.length === 0) {
+		return '';
+	} else if (limitedDigits.length <= 3) {
+		return `(${limitedDigits}`;
+	} else if (limitedDigits.length <= 6) {
+		return `(${limitedDigits.slice(0, 3)}) ${limitedDigits.slice(3)}`;
+	} else {
+		return `(${limitedDigits.slice(0, 3)}) ${limitedDigits.slice(3, 6)}-${limitedDigits.slice(6)}`;
+	}
+}
+
+/**
+ * Checks if a phone number has exactly 10 digits
+ */
+export function isCompletePhoneNumber(value: string): boolean {
+	return stripPhoneNumber(value).length === 10;
+}
+
+/**
+ * Validates phone number format (exactly 10 digits)
+ */
+export function isValidPhoneNumber(value: string): boolean {
+	return isCompletePhoneNumber(value);
+}
+
+/**
+ * Handles input formatting with cursor position preservation
+ */
+export function updatePhoneInput(input: HTMLInputElement, newValue: string, oldValue: string): void {
+	const cursorPosition = input.selectionStart || 0;
+	const oldLength = oldValue.length;
+	const newLength = newValue.length;
+
+	input.value = newValue;
+
+	let newCursorPosition = cursorPosition;
+
+	if (newLength > oldLength) {
+		newCursorPosition = cursorPosition + (newLength - oldLength);
+	} else if (newLength < oldLength) {
+		newCursorPosition = Math.max(0, cursorPosition - (oldLength - newLength));
+	}
+
+	if (newCursorPosition === 1 && newValue.startsWith('(')) {
+		newCursorPosition = 1;
+	} else if (newCursorPosition === 4 && newValue.includes(') ')) {
+		newCursorPosition = 6;
+	} else if (newCursorPosition === 9 && newValue.includes('-')) {
+		newCursorPosition = 10;
+	}
+
+	input.setSelectionRange(newCursorPosition, newCursorPosition);
+}