@elyx-code/editor-ui 0.0.2

package/src/components/resources/codebase/CodebaseDetails.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { InfrastructureResourceType } from '@elyx-code/definitions';
+import { EditorService } from '../../../services/editor';
+import Button from '../../../lib/button/Button';
+
+interface ICodebaseDetailsProps {
+	onClose: () => void;
+	project: EditorService;
+}
+
+const CodebaseDetails: React.FC<ICodebaseDetailsProps> = ({ project }) => {
+	const codebase = project?.liveResources?.find(
+		(r) => r.resourceType === InfrastructureResourceType.CloudHostedCodebase
+	);
+
+	const details = codebase?.details as any || {};
+
+	return (
+		<div
+			style={{
+				padding: '24px 40px',
+				display: 'flex',
+				flexDirection: 'column',
+				height: 'calc(100% - 90px)',
+				overflowY: 'auto',
+				fontFamily: "'Outfit', 'Inter', sans-serif",
+			}}
+		>
+			<div style={{ marginBottom: '24px' }}>
+				<h2 style={{ margin: '0px', fontSize: '18px', fontWeight: 600 }}>
+					Cloud Hosted Codebase
+				</h2>
+				<span style={{ fontSize: '12px', color: '#666' }}>
+					View and download the compiled codebase deployed in the cloud
+				</span>
+			</div>
+
+			{!codebase ? (
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'center',
+						justifyContent: 'center',
+						padding: '80px 0',
+						border: '1px dashed #ccc',
+						borderRadius: '12px',
+						backgroundColor: '#fafafa',
+						color: '#888',
+					}}
+				>
+					<i className="fa-solid fa-code" style={{ fontSize: '48px', marginBottom: '16px', color: '#ddd' }}></i>
+					<p style={{ margin: '0px', fontSize: '14px' }}>
+						No compiled codebase is hosted for this project.
+					</p>
+				</div>
+			) : (
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						gap: '24px',
+						backgroundColor: '#ffffff',
+						border: '1px solid #e0e0e0',
+						borderRadius: '12px',
+						padding: '32px',
+						boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
+						maxWidth: '600px',
+					}}
+				>
+					<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+						<div
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'center',
+								width: '48px',
+								height: '48px',
+								borderRadius: '8px',
+								backgroundColor: '#f3f0ff',
+								border: '1px solid #dcd3ff',
+							}}
+						>
+							<i className="fa-solid fa-file-zipper" style={{ fontSize: '24px', color: '#7048e8' }}></i>
+						</div>
+						<div>
+							<h3 style={{ margin: '0px', fontSize: '16px', fontWeight: 600, color: '#333' }}>
+								Compiled Codebase
+							</h3>
+							<span style={{ fontSize: '12px', color: '#888' }}>
+								Zipped production bundle
+							</span>
+						</div>
+					</div>
+
+					<hr style={{ border: 'none', borderTop: '1px solid #eee', margin: '0px' }} />
+
+					<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+						<div>
+							<span style={{ fontSize: '11px', fontWeight: 600, color: '#999', textTransform: 'uppercase' }}>
+								Resource Name
+							</span>
+							<p style={{ margin: '4px 0 0 0', fontSize: '14px', color: '#333', fontWeight: 500 }}>
+								{codebase.name || 'Cloud Hosted codebase'}
+							</p>
+						</div>
+
+						<div>
+							<span style={{ fontSize: '11px', fontWeight: 600, color: '#999', textTransform: 'uppercase' }}>
+								Cloud Storage Location
+							</span>
+							<code
+								style={{
+									display: 'block',
+									margin: '4px 0 0 0',
+									padding: '8px 12px',
+									backgroundColor: '#f8f9fa',
+									border: '1px solid #e9ecef',
+									borderRadius: '6px',
+									fontSize: '11px',
+									fontFamily: 'monospace',
+									color: '#495057',
+									wordBreak: 'break-all',
+								}}
+							>
+								{details.permanentPath || 'N/A'}
+							</code>
+						</div>
+					</div>
+
+					{details.permanentDownloadUrl && (
+						<div style={{ marginTop: '12px' }}>
+							<a
+								href={details.permanentDownloadUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								style={{ textDecoration: 'none' }}
+							>
+								<Button
+									variant="solid"
+									color="primary"
+									size="medium"
+									iconStart="fa-solid fa-download"
+								>
+									Download Source ZIP
+								</Button>
+							</a>
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default CodebaseDetails;

package/src/components/resources/cron-job/CronJobsList.tsx

@@ -0,0 +1,532 @@
+import React, { useState } from 'react';
+import { InfrastructureResourceType } from '@elyx-code/definitions';
+import {
+	resolveActionDescriptorNameById,
+	toSentenceCase
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../../../services/editor';
+import Button from '../../../lib/button/Button';
+import UpgradeBanner from '../UpgradeBanner';
+import { useWorkspaceStore } from '../../../store/workspace';
+
+interface ICronJobsListProps {
+	onClose: () => void;
+	project: EditorService;
+}
+
+const mockCronJobs = [
+	{
+		resourceId: 'cron-1111-fake',
+		name: 'cron_nightly_backup',
+		resourceType: InfrastructureResourceType.CronJob,
+		details: {
+			functionName: 'elyx-dev-cron_nightly_backup',
+			scheduleExpression: '0 2 * * *',
+			lastExecution: '2026-05-26T02:00:00.000Z',
+			nextExecution: '2026-05-27T02:00:00.000Z',
+			status: 'Active'
+		}
+	},
+	{
+		resourceId: 'cron-2222-fake',
+		name: 'cron_hourly_metrics_sync',
+		resourceType: InfrastructureResourceType.CronJob,
+		details: {
+			functionName: 'elyx-dev-cron_hourly_metrics_sync',
+			scheduleExpression: '0 * * * *',
+			lastExecution: '2026-05-26T18:00:00.000Z',
+			nextExecution: '2026-05-26T19:00:00.000Z',
+			status: 'Active'
+		}
+	}
+];
+
+const CronJobsList: React.FC<ICronJobsListProps> = ({ project }) => {
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+	const showPaywall = !(activeWorkspace?.features?.logging ?? false);
+
+	const realCronJobs =
+		(project?.liveResources as any[])?.filter(
+			(r) => r.resourceType === InfrastructureResourceType.CronJob
+		) || [];
+
+	const cronJobs = showPaywall ? mockCronJobs : realCronJobs;
+
+	const formatDateTime = (isoString: string | null | undefined) => {
+		if (!isoString) return 'Never';
+		return new Date(isoString).toLocaleString();
+	};
+
+	const formatCronExpression = (expr: string | null | undefined) => {
+		if (!expr) return 'N/A';
+		return expr;
+	};
+
+	// Column resizing state (loaded from UserSettings)
+	const [widths, setWidths] = useState<Record<string, number>>(() => {
+		const saved = project?.userSettings?.columnWidths || {};
+		return {
+			name: saved['cron-col-name'] || 220,
+			schedule: saved['cron-col-schedule'] || 150,
+			lastRun: saved['cron-col-lastRun'] || 160,
+			nextRun: saved['cron-col-nextRun'] || 160,
+			status: saved['cron-col-status'] || 110,
+			actions: saved['cron-col-actions'] || 140
+		};
+	});
+
+	const startResize = (colKey: string, e: React.MouseEvent) => {
+		e.preventDefault();
+		const startX = e.pageX;
+		const startWidth = widths[colKey];
+
+		const handleMouseMove = (moveEvent: MouseEvent) => {
+			const deltaX = moveEvent.pageX - startX;
+			const newWidth = Math.max(80, startWidth + deltaX);
+			setWidths((prev) => ({
+				...prev,
+				[colKey]: newWidth
+			}));
+		};
+
+		const handleMouseUp = (upEvent: MouseEvent) => {
+			window.removeEventListener('mousemove', handleMouseMove);
+			window.removeEventListener('mouseup', handleMouseUp);
+
+			const deltaX = upEvent.pageX - startX;
+			const finalWidth = Math.max(80, startWidth + deltaX);
+			const currentSettings = project?.userSettings?.columnWidths || {};
+			const updatedSettings = {
+				...currentSettings,
+				[`cron-col-${colKey}`]: finalWidth
+			};
+			project?.userSettings?.set('columnWidths', updatedSettings);
+		};
+
+		window.addEventListener('mousemove', handleMouseMove);
+		window.addEventListener('mouseup', handleMouseUp);
+	};
+
+	const thStyle = (width: number): React.CSSProperties => ({
+		padding: '16px 20px',
+		position: 'relative',
+		width: `${width}px`,
+		userSelect: 'none'
+	});
+
+	const resizerStyle: React.CSSProperties = {
+		position: 'absolute',
+		top: 0,
+		right: 0,
+		bottom: 0,
+		width: '6px',
+		cursor: 'col-resize',
+		zIndex: 10
+	};
+
+	return (
+		<div
+			style={{
+				position: 'relative',
+				height: 'calc(100% - 90px)',
+				display: 'flex',
+				flexDirection: 'column'
+			}}
+		>
+			<div
+				style={{
+					padding: '24px 40px',
+					display: 'flex',
+					flexDirection: 'column',
+					height: '100%',
+					overflowY: 'auto',
+					fontFamily: "'Outfit', 'Inter', sans-serif",
+					filter: showPaywall ? 'blur(3px)' : 'none',
+					opacity: showPaywall ? 0.4 : 1,
+					pointerEvents: showPaywall ? 'none' : 'auto',
+					userSelect: showPaywall ? 'none' : 'auto'
+				}}
+			>
+				<div style={{ marginBottom: '24px' }}>
+					<h2
+						style={{
+							margin: '0px',
+							fontSize: '18px',
+							fontWeight: 600
+						}}
+					>
+						Scheduled executions
+					</h2>
+					<span style={{ fontSize: '12px', color: '#666' }}>
+						Inspect deployed scheduled executions, their run
+						schedule and execution logs
+					</span>
+				</div>
+
+				{cronJobs.length === 0 ? (
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							alignItems: 'center',
+							justifyContent: 'center',
+							padding: '80px 0',
+							border: '1px dashed #ccc',
+							borderRadius: '12px',
+							backgroundColor: '#fafafa',
+							color: '#888'
+						}}
+					>
+						<i
+							className="fa-solid fa-clock"
+							style={{
+								fontSize: '48px',
+								marginBottom: '16px',
+								color: '#ddd'
+							}}
+						></i>
+						<p style={{ margin: '0px', fontSize: '14px' }}>
+							No scheduled executions exist in this published
+							version of the project.
+						</p>
+					</div>
+				) : (
+					<div
+						style={{
+							border: '1px solid #e0e0e0',
+							borderRadius: '12px',
+							overflowX: 'auto', // horizontal scroll fallback
+							boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
+							backgroundColor: '#fff'
+						}}
+					>
+						<table
+							style={{
+								width: '100%',
+								borderCollapse: 'collapse',
+								textAlign: 'left',
+								fontSize: '13px',
+								tableLayout: 'fixed', // fixed layout for column sizing
+								minWidth: '950px'
+							}}
+						>
+							<colgroup>
+								<col style={{ width: `${widths.name}px` }} />
+								<col
+									style={{ width: `${widths.schedule}px` }}
+								/>
+								<col style={{ width: `${widths.lastRun}px` }} />
+								<col style={{ width: `${widths.nextRun}px` }} />
+								<col style={{ width: `${widths.status}px` }} />
+								<col style={{ width: `${widths.actions}px` }} />
+							</colgroup>
+							<thead>
+								<tr
+									style={{
+										backgroundColor: '#f8f9fa',
+										borderBottom: '1px solid #e0e0e0',
+										color: '#555',
+										fontWeight: 600
+									}}
+								>
+									<th style={thStyle(widths.name)}>
+										Name
+										<div
+											style={resizerStyle}
+											onMouseDown={(e) =>
+												startResize('name', e)
+											}
+										/>
+									</th>
+									<th style={thStyle(widths.schedule)}>
+										Schedule
+										<div
+											style={resizerStyle}
+											onMouseDown={(e) =>
+												startResize('schedule', e)
+											}
+										/>
+									</th>
+									<th style={thStyle(widths.lastRun)}>
+										Last Run
+										<div
+											style={resizerStyle}
+											onMouseDown={(e) =>
+												startResize('lastRun', e)
+											}
+										/>
+									</th>
+									<th style={thStyle(widths.nextRun)}>
+										Next Run
+										<div
+											style={resizerStyle}
+											onMouseDown={(e) =>
+												startResize('nextRun', e)
+											}
+										/>
+									</th>
+									<th style={thStyle(widths.status)}>
+										Status
+										<div
+											style={resizerStyle}
+											onMouseDown={(e) =>
+												startResize('status', e)
+											}
+										/>
+									</th>
+									<th
+										style={{
+											...thStyle(widths.actions),
+											textAlign: 'right'
+										}}
+									>
+										Actions
+										<div
+											style={resizerStyle}
+											onMouseDown={(e) =>
+												startResize('actions', e)
+											}
+										/>
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{cronJobs.map((job) => {
+									const details = (job.details as any) || {};
+									const functionName =
+										details.functionName || '';
+
+									// Best-effort name resolution
+									const rawName = job.name || '';
+									const readableName =
+										resolveActionDescriptorNameById(
+											rawName
+										) ||
+										toSentenceCase(rawName) ||
+										'Scheduled execution';
+
+									return (
+										<tr
+											key={job.resourceId}
+											style={{
+												borderBottom:
+													'1px solid #f0f0f0',
+												transition: 'background 0.2s'
+											}}
+											onMouseEnter={(e) =>
+												(e.currentTarget.style.backgroundColor =
+													'#fafafa')
+											}
+											onMouseLeave={(e) =>
+												(e.currentTarget.style.backgroundColor =
+													'transparent')
+											}
+										>
+											{/* Name */}
+											<td
+												style={{
+													padding: '16px 20px',
+													fontWeight: 500,
+													color: '#333',
+													overflow: 'hidden',
+													textOverflow: 'ellipsis',
+													whiteSpace: 'nowrap'
+												}}
+											>
+												<div
+													style={{
+														display: 'flex',
+														alignItems: 'center',
+														gap: '8px'
+													}}
+												>
+													<i
+														className="fa-solid fa-clock"
+														style={{
+															color: '#4f46e5'
+														}}
+													></i>
+													{readableName}
+												</div>
+												<div
+													style={{
+														fontSize: '11px',
+														color: '#888',
+														marginTop: '2px'
+													}}
+												>
+													ID:{' '}
+													{job.resourceId?.substring(
+														0,
+														18
+													)}
+													...
+												</div>
+											</td>
+
+											{/* Schedule */}
+											<td
+												style={{
+													padding: '16px 20px',
+													overflow: 'hidden',
+													textOverflow: 'ellipsis',
+													whiteSpace: 'nowrap'
+												}}
+											>
+												<code
+													title={
+														details.scheduleExpression
+													}
+													style={{
+														padding: '4px 8px',
+														backgroundColor:
+															'#f1f3f5',
+														borderRadius: '4px',
+														fontFamily: 'monospace',
+														fontSize: '12px',
+														color: '#495057'
+													}}
+												>
+													{formatCronExpression(
+														details.scheduleExpression
+													)}
+												</code>
+											</td>
+
+											{/* Last Run */}
+											<td
+												style={{
+													padding: '16px 20px',
+													color: '#495057',
+													overflow: 'hidden',
+													textOverflow: 'ellipsis',
+													whiteSpace: 'nowrap'
+												}}
+											>
+												{formatDateTime(
+													details.lastExecution
+												)}
+											</td>
+
+											{/* Next Run */}
+											<td
+												style={{
+													padding: '16px 20px',
+													color: '#495057',
+													fontWeight: 500,
+													overflow: 'hidden',
+													textOverflow: 'ellipsis',
+													whiteSpace: 'nowrap'
+												}}
+											>
+												{formatDateTime(
+													details.nextExecution
+												)}
+											</td>
+
+											{/* Status */}
+											<td
+												style={{
+													padding: '16px 20px',
+													whiteSpace: 'nowrap'
+												}}
+											>
+												<span
+													style={{
+														display: 'inline-flex',
+														alignItems: 'center',
+														gap: '6px',
+														padding: '4px 8px',
+														borderRadius: '12px',
+														backgroundColor:
+															'#e6fcf5',
+														color: '#0ca678',
+														fontSize: '11px',
+														fontWeight: 600
+													}}
+												>
+													<span
+														style={{
+															width: '6px',
+															height: '6px',
+															borderRadius: '50%',
+															backgroundColor:
+																'#0ca678'
+														}}
+													></span>
+													Active
+												</span>
+											</td>
+
+											{/* Actions */}
+											<td
+												style={{
+													padding: '16px 20px',
+													textAlign: 'right',
+													whiteSpace: 'nowrap',
+													display: 'flex',
+													justifyContent: 'end'
+												}}
+											>
+												<Button
+													variant="outlined"
+													size="small"
+													iconStart="fa-solid fa-terminal"
+													onClick={(
+														e: React.MouseEvent
+													) => {
+														// Check if new tab
+														if (
+															e.metaKey ||
+															e.ctrlKey
+														) {
+															// Open same target in new tab
+															window.open(
+																`${project?.editorBasePath}/resources/logs/${functionName}`,
+																'_blank'
+															);
+															return;
+														}
+														EditorService.navigate(
+															`${project?.editorBasePath}/resources/logs/${functionName}`
+														);
+													}}
+												>
+													View Logs
+												</Button>
+											</td>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</div>
+				)}
+			</div>
+
+			{showPaywall && (
+				<div
+					style={{
+						position: 'absolute',
+						top: '50%',
+						left: '50%',
+						transform: 'translate(-50%, -50%)',
+						zIndex: 100,
+						width: '90%',
+						maxWidth: '480px',
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'center',
+						justifyContent: 'center',
+						pointerEvents: 'none',
+						backgroundColor: 'transparent'
+					}}
+				>
+					<UpgradeBanner />
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default CronJobsList;