@myrialabs/clopen 0.0.1

package/frontend/lib/components/terminal/TerminalView.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import Terminal from './Terminal.svelte';
+	import PageTemplate from '../common/PageTemplate.svelte';
+	import Button from '../common/Button.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { terminalStore } from '$frontend/lib/stores/features/terminal.svelte';
+	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+	
+	// Project-aware state
+	const hasActiveProject = $derived(projectState.currentProject !== null);
+	const projectPath = $derived(projectState.currentProject?.path || '');
+	const projectId = $derived(projectState.currentProject?.id || '');
+	
+	function createNewSession() {
+		terminalStore.createNewSession(undefined, hasActiveProject ? projectPath : undefined, hasActiveProject ? projectId : undefined);
+	}
+</script>
+
+<PageTemplate 
+	title="Terminal" 
+	description="Interactive command-line interface"
+>
+	{#snippet actions()}
+		<Button variant="primary" onclick={createNewSession} disabled={!hasActiveProject} class="rounded-lg px-2 sm:px-4 py-1.5 sm:py-2">
+			<Icon name="lucide:plus" class="w-3.5 h-3.5 sm:w-4 sm:h-4 sm:mr-2" />
+			<span class="hidden sm:inline">New Terminal</span>
+		</Button>
+	{/snippet}
+
+	{#if hasActiveProject}
+		<!-- Terminal content -->
+		<div class="flex flex-col h-full">
+			<div class="flex-1 min-h-0">
+				<Terminal />
+			</div>
+		</div>
+	{:else}
+		<!-- No Active Project Warning -->
+		<div class="flex-1 min-h-0 h-96 sm:h-128 lg:h-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+			<div class="h-full flex items-center justify-center">
+				<div class="text-center p-12">
+					<div class="bg-amber-100 dark:bg-amber-900/30 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
+						<Icon name="lucide:triangle-alert" class="w-10 h-10 text-amber-600 dark:text-amber-400" />
+					</div>
+					<h3 class="text-lg font-bold text-slate-900 dark:text-slate-100 mb-2">
+						No Active Project
+					</h3>
+					<p class="text-sm text-slate-600 dark:text-slate-400 font-medium">
+						Select a project from the sidebar to use the terminal
+					</p>
+				</div>
+			</div>
+		</div>
+	{/if}
+</PageTemplate>

package/frontend/lib/components/tunnel/TunnelActive.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { tunnelStore } from '$frontend/lib/stores/features/tunnel.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import TunnelQRCode from './TunnelQRCode.svelte';
+	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+
+	interface Props {
+		port: number;
+		publicUrl: string;
+		startedAt: string;
+	}
+
+	const { port, publicUrl, startedAt }: Props = $props();
+
+	let showQR = $state(false);
+	let copied = $state(false);
+
+	async function copyUrl() {
+		try {
+			await navigator.clipboard.writeText(publicUrl);
+			copied = true;
+			addNotification({
+				type: 'success',
+				title: 'Success',
+				message: 'URL copied to clipboard'
+			});
+
+			// Reset icon after 2 seconds
+			setTimeout(() => {
+				copied = false;
+			}, 2000);
+		} catch (error) {
+			console.error('Failed to copy:', error);
+			addNotification({
+				type: 'error',
+				title: 'Error',
+				message: 'Failed to copy URL'
+			});
+		}
+	}
+
+	async function handleStopTunnel() {
+		try {
+			await tunnelStore.stopTunnel(port);
+			addNotification({
+				type: 'success',
+				title: 'Success',
+				message: `Tunnel on port ${port} stopped`
+			});
+		} catch (error) {
+			console.error('Failed to stop tunnel:', error);
+			addNotification({
+				type: 'error',
+				title: 'Error',
+				message: 'Failed to stop tunnel'
+			});
+		}
+	}
+
+	function getTimeAgo(startedAt: string): string {
+		const start = new Date(startedAt);
+		const now = new Date();
+		const diffMs = now.getTime() - start.getTime();
+
+		const diffMins = Math.floor(diffMs / 60000);
+		const diffHours = Math.floor(diffMs / 3600000);
+
+		if (diffMins < 1) return 'Just now';
+		if (diffMins < 60) return `${diffMins}m ago`;
+		if (diffHours < 24) return `${diffHours}h ago`;
+		return `${Math.floor(diffHours / 24)}d ago`;
+	}
+</script>
+
+<div class="bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg p-4">
+	<!-- Header -->
+	<div class="flex items-start justify-between gap-3 mb-3">
+		<div class="flex items-center gap-2">
+			<div class="flex items-center gap-1.5">
+				<div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+				<span class="text-sm font-semibold text-slate-900 dark:text-slate-100">Port {port}</span>
+			</div>
+			<span class="text-xs text-slate-500 dark:text-slate-400">{getTimeAgo(startedAt)}</span>
+		</div>
+		<button
+			onclick={handleStopTunnel}
+			class="flex items-center gap-1.5 px-2 py-1 text-xs font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors"
+		>
+			<Icon name="lucide:circle-x" class="w-3.5 h-3.5" />
+			Stop
+		</button>
+	</div>
+
+	<!-- Public URL -->
+	<div class="space-y-3">
+		<div class="flex items-center gap-2">
+			<Icon name="lucide:link" class="w-4 h-4 text-violet-600 dark:text-violet-400 flex-shrink-0" />
+			<a
+				href={publicUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-sm text-violet-600 dark:text-violet-400 hover:underline truncate flex-1 font-medium"
+			>
+				{publicUrl}
+			</a>
+		</div>
+
+		<!-- Action Buttons -->
+		<div class="flex gap-2">
+			<button
+				onclick={copyUrl}
+				class={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors rounded ${
+					copied
+						? 'text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900/20'
+						: 'text-slate-700 dark:text-slate-300 bg-slate-100 dark:bg-slate-700/50 hover:bg-slate-200 dark:hover:bg-slate-700'
+				}`}
+			>
+				{#if copied}
+					<Icon name="lucide:check" class="w-3.5 h-3.5" />
+					Copied!
+				{:else}
+					<Icon name="lucide:copy" class="w-3.5 h-3.5" />
+					Copy
+				{/if}
+			</button>
+			<button
+				onclick={() => (showQR = !showQR)}
+				class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-slate-700 dark:text-slate-300 bg-slate-100 dark:bg-slate-700/50 hover:bg-slate-200 dark:hover:bg-slate-700 rounded transition-colors"
+			>
+				<Icon name="lucide:qr-code" class="w-3.5 h-3.5" />
+				{showQR ? 'Hide' : 'Show'} QR
+			</button>
+		</div>
+
+		<!-- QR Code -->
+		{#if showQR}
+			<div class="pt-2 border-t border-slate-200 dark:border-slate-700">
+				<TunnelQRCode value={publicUrl} />
+			</div>
+		{/if}
+	</div>
+</div>

package/frontend/lib/components/tunnel/TunnelButton.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { tunnelStore } from '$frontend/lib/stores/features/tunnel.svelte';
+
+	interface Props {
+		collapsed?: boolean;
+		onClick: () => void;
+	}
+
+	const { collapsed = false, onClick }: Props = $props();
+
+	const activeTunnels = $derived(tunnelStore.tunnels);
+	const hasActiveTunnels = $derived(activeTunnels.length > 0);
+</script>
+
+{#if collapsed}
+	<!-- Collapsed: Icon Only -->
+	<button
+		type="button"
+		class="flex items-center justify-center w-9 h-9 bg-transparent border-none rounded-lg text-slate-500 cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100 relative"
+		onclick={onClick}
+		aria-label="Public Tunnel"
+		title="Public Tunnel"
+	>
+		<Icon name="lucide:cloud-upload" class="w-5 h-5" />
+		{#if hasActiveTunnels}
+			<span
+				class="absolute top-1 right-1 w-2 h-2 bg-green-500 rounded-full border-2 border-slate-50 dark:border-slate-900/95"
+			></span>
+		{/if}
+	</button>
+{:else}
+	<!-- Expanded: Full Width -->
+	<button
+		type="button"
+		class="flex items-center gap-2.5 w-full py-2.5 px-3 bg-transparent border-none rounded-lg text-slate-500 text-sm cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100"
+		onclick={onClick}
+	>
+		<div class="relative">
+			<Icon name="lucide:cloud-upload" class="w-4 h-4" />
+			{#if hasActiveTunnels}
+				<span
+					class="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full border-2 border-slate-50 dark:border-slate-900/95 animate-pulse"
+				></span>
+			{/if}
+		</div>
+		<span class="flex-1 text-left">Public Tunnel</span>
+		{#if hasActiveTunnels}
+			<span class="text-xs text-green-600 dark:text-green-400 font-semibold">
+				{activeTunnels.length}
+			</span>
+		{/if}
+	</button>
+{/if}

package/frontend/lib/components/tunnel/TunnelInactive.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+	import { tunnelStore } from '$frontend/lib/stores/features/tunnel.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Modal from '$frontend/lib/components/common/Modal.svelte';
+	import Checkbox from '$frontend/lib/components/common/Checkbox.svelte';
+
+	let port = $state(9141);
+	let autoStopMinutes = $state(60);
+	let showWarning = $state(false);
+	let dontShowWarningAgain = $state(false);
+	let errorDismissed = $state(false);
+	let warningMessage = $state<string | null>(null);
+	let warningDismissed = $state(false);
+
+	// Info box visibility - load from localStorage
+	let showInfoBox = $state(
+		typeof window !== 'undefined'
+			? localStorage.getItem('tunnel-info-dismissed') !== 'true'
+			: true
+	);
+
+	async function handleStartTunnel() {
+		// Check if tunnel already exists for this port
+		if (tunnelStore.getTunnel(port)) {
+			warningMessage = `Tunnel already active on port ${port}`;
+			warningDismissed = false;
+			showWarning = false;
+			return;
+		}
+
+		// Save "don't show again" preference
+		if (dontShowWarningAgain) {
+			localStorage.setItem('tunnel-warning-dismissed', 'true');
+		}
+
+		// Close modal immediately
+		showWarning = false;
+
+		try {
+			await tunnelStore.startTunnel(port, autoStopMinutes);
+		} catch (error) {
+			console.error('Failed to start tunnel:', error);
+		}
+	}
+
+	// Get loading and progress state for current port
+	const isLoading = $derived(tunnelStore.isLoading(port));
+	const progress = $derived(tunnelStore.getProgress(port));
+	const error = $derived(tunnelStore.getError(port));
+
+	function openWarningModal() {
+		// Clear any previous warning messages
+		warningMessage = null;
+
+		// Reset error and warning dismissed state when user tries to start again
+		errorDismissed = false;
+		warningDismissed = false;
+
+		// Check if user has dismissed warning permanently
+		const securityWarningDismissed = localStorage.getItem('tunnel-warning-dismissed') === 'true';
+		if (securityWarningDismissed) {
+			// Skip warning and start tunnel directly
+			handleStartTunnel();
+		} else {
+			showWarning = true;
+		}
+	}
+
+	function closeInfoBox() {
+		showInfoBox = false;
+		localStorage.setItem('tunnel-info-dismissed', 'true');
+	}
+
+	function dismissError() {
+		errorDismissed = true;
+	}
+
+	function dismissWarning() {
+		warningDismissed = true;
+	}
+</script>
+
+<div class="space-y-6">
+	<!-- Info Card -->
+	{#if showInfoBox}
+		<div
+			class="p-4 bg-violet-500/5 dark:bg-violet-500/10 border border-violet-500/20 rounded-xl"
+		>
+			<div class="flex gap-3">
+				<Icon name="lucide:info" class="w-5 h-5 text-violet-600 dark:text-violet-400 flex-shrink-0 mt-0.5" />
+				<div class="flex-1 text-sm text-slate-700 dark:text-slate-300">
+					<p class="font-semibold mb-1">What is Public Tunnel?</p>
+					<p class="text-slate-600 dark:text-slate-400">
+						Create a secure HTTPS tunnel to share your local development server with anyone on the
+						internet.
+					</p>
+				</div>
+				<button
+					onclick={closeInfoBox}
+					class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors flex-shrink-0"
+					title="Dismiss"
+				>
+					<Icon name="lucide:x" class="w-5 h-5" />
+				</button>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Input Fields -->
+	<div class="space-y-4">
+		<!-- Port Input -->
+		<div class="space-y-2">
+			<label for="port" class="block text-sm font-semibold text-slate-700 dark:text-slate-300">
+				Local Port
+			</label>
+			<input
+				id="port"
+				type="number"
+				bind:value={port}
+				min="1"
+				max="65535"
+				placeholder="3000"
+				class="block w-full px-3 py-3 border border-slate-300 dark:border-slate-600 rounded-lg transition-colors duration-200 focus:outline-none text-sm font-medium focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-900/20 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500"
+			/>
+			<!-- <p class="text-xs text-slate-500 dark:text-slate-400">
+				Port number where your app is running (e.g., 3000 for Vite, 8080 for API)
+			</p> -->
+		</div>
+
+		<!-- Auto-Stop Timer -->
+		<div class="space-y-2">
+			<label for="autoStop" class="block text-sm font-semibold text-slate-700 dark:text-slate-300">
+				Auto-Stop After
+			</label>
+			<select
+				id="autoStop"
+				bind:value={autoStopMinutes}
+				class="block w-full px-3 py-3 border border-slate-300 dark:border-slate-600 rounded-lg transition-colors duration-200 focus:outline-none text-sm font-medium focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-900/20 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100"
+			>
+				<option value={30}>30 minutes</option>
+				<option value={60}>1 hour</option>
+				<option value={120}>2 hours</option>
+				<option value={180}>3 hours</option>
+			</select>
+			<!-- <p class="text-xs text-slate-500 dark:text-slate-400">
+				Tunnel will automatically stop after this duration
+			</p> -->
+		</div>
+
+		<!-- Start Button -->
+		<button
+			onclick={openWarningModal}
+			disabled={isLoading}
+			class="inline-flex items-center justify-center font-semibold transition-colors duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed w-full px-3 md:px-4 py-2.5 text-sm rounded-lg bg-violet-600 hover:bg-violet-700 text-white gap-2"
+		>
+			{#if isLoading}
+				<div
+					class="animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent"
+				></div>
+				<span>
+					{#if progress.stage === 'checking-binary'}
+						Checking binary...
+					{:else if progress.stage === 'downloading-binary'}
+						Downloading binary...
+					{:else if progress.stage === 'binary-ready'}
+						Binary ready
+					{:else if progress.stage === 'starting-tunnel'}
+						Starting tunnel...
+					{:else if progress.stage === 'generating-url'}
+						Generating URL...
+					{:else if progress.stage === 'connected'}
+						Connected!
+					{:else}
+						Setting up tunnel...
+					{/if}
+				</span>
+			{:else}
+				<Icon name="lucide:cloud-upload" class="w-4 h-4" />
+				<span>Start Public Tunnel</span>
+			{/if}
+		</button>
+
+		<!-- Warning Message (e.g., tunnel already active) -->
+		{#if warningMessage && !warningDismissed}
+			<div
+				class="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 text-sm"
+			>
+				<div class="flex items-start gap-2 text-yellow-600 dark:text-yellow-400">
+					<Icon name="lucide:triangle-alert" class="w-5 h-5 flex-shrink-0 mt-0.5" />
+					<div class="flex-1 space-y-1">
+						<div class="font-semibold">Warning</div>
+						<div class="text-yellow-500 dark:text-yellow-300">
+							{warningMessage}
+						</div>
+					</div>
+					<button
+						onclick={dismissWarning}
+						class="text-yellow-400 hover:text-yellow-600 dark:hover:text-yellow-300 transition-colors flex-shrink-0"
+						title="Dismiss"
+					>
+						<Icon name="lucide:x" class="w-5 h-5" />
+					</button>
+				</div>
+			</div>
+		{/if}
+
+		{#if (error || progress.stage === 'failed') && !errorDismissed}
+			<div
+				class="bg-red-500/10 border border-red-500/20 rounded-lg p-4 text-sm space-y-3"
+			>
+				<div class="flex items-start gap-2 text-red-600 dark:text-red-400">
+					<Icon name="lucide:circle-alert" class="w-5 h-5 flex-shrink-0 mt-0.5" />
+					<div class="flex-1 space-y-1">
+						<div class="font-semibold">Tunnel Failed</div>
+						<div class="text-red-500 dark:text-red-300">
+							{error}
+						</div>
+					</div>
+					<button
+						onclick={dismissError}
+						class="text-red-400 hover:text-red-600 dark:hover:text-red-300 transition-colors flex-shrink-0"
+						title="Dismiss"
+					>
+						<Icon name="lucide:x" class="w-5 h-5" />
+					</button>
+				</div>
+
+				<!-- Common solutions -->
+				<div class="text-xs text-slate-700 dark:text-slate-300 space-y-1 pt-2 border-t border-red-500/20">
+					<div class="font-semibold">Common solutions:</div>
+					<ul class="list-disc list-inside space-y-0.5 text-slate-600 dark:text-slate-400">
+						<li>Ensure your app is running on port {port}</li>
+						<li>Check your internet connection</li>
+						<li>Temporarily disable firewall/antivirus</li>
+					</ul>
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<!-- Warning Modal -->
+{#if showWarning}
+	<Modal isOpen={showWarning} onClose={() => (showWarning = false)} title="Security Warning">
+		<div class="space-y-4">
+			<div class="flex items-start gap-3">
+				<Icon name="lucide:triangle-alert" class="w-8 h-8 text-yellow-500 flex-shrink-0" />
+				<div class="text-sm text-slate-700 dark:text-slate-300">
+					<p class="mb-3">Your project will be publicly accessible on the internet.</p>
+					<p class="font-semibold mb-2">Please ensure:</p>
+					<ul class="list-disc list-inside space-y-1 text-slate-600 dark:text-slate-400">
+						<li>No sensitive data is exposed</li>
+						<li>Environment variables are properly configured</li>
+						<li>This is for <strong class="text-slate-900 dark:text-slate-100">testing only</strong>, not production</li>
+					</ul>
+				</div>
+			</div>
+
+			<!-- Don't show again checkbox -->
+			<div class="pt-2">
+				<Checkbox
+					id="dontShowWarning"
+					bind:checked={dontShowWarningAgain}
+					label="Don't show this warning again"
+				/>
+			</div>
+
+			<div class="flex gap-2 justify-end pt-2">
+				<button
+					onclick={() => (showWarning = false)}
+					class="inline-flex items-center justify-center font-semibold transition-colors duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed px-3 md:px-4 py-2.5 text-sm rounded-lg border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800"
+				>
+					Cancel
+				</button>
+				<button
+					onclick={handleStartTunnel}
+					class="inline-flex items-center justify-center font-semibold transition-colors duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed px-3 md:px-4 py-2.5 text-sm rounded-lg bg-violet-600 hover:bg-violet-700 text-white"
+				>
+					I Understand, Continue
+				</button>
+			</div>
+		</div>
+	</Modal>
+{/if}

package/frontend/lib/components/tunnel/TunnelModal.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import Modal from '$frontend/lib/components/common/Modal.svelte';
+	import TunnelInactive from './TunnelInactive.svelte';
+	import TunnelActive from './TunnelActive.svelte';
+	import { tunnelStore } from '$frontend/lib/stores/features/tunnel.svelte';
+
+	interface Props {
+		isOpen: boolean;
+		onClose: () => void;
+	}
+
+	let { isOpen = $bindable(), onClose }: Props = $props();
+
+	const activeTunnels = $derived(tunnelStore.tunnels);
+
+	// Load tunnels when modal opens
+	$effect(() => {
+		if (isOpen) {
+			tunnelStore.checkStatus();
+		}
+	});
+</script>
+
+<Modal {isOpen} {onClose} title="Public Tunnel" size="md">
+	<div class="space-y-6">
+		<!-- Add new tunnel form -->
+		<TunnelInactive />
+
+		<!-- Active tunnels list -->
+		{#if activeTunnels.length > 0}
+			<div>
+				<div class="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
+					Active Tunnels
+				</div>
+				<div class="space-y-3">
+					{#each activeTunnels as tunnel (tunnel.port)}
+						<TunnelActive
+							port={tunnel.port}
+							publicUrl={tunnel.publicUrl}
+							startedAt={tunnel.startedAt}
+						/>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+</Modal>

package/frontend/lib/components/tunnel/TunnelQRCode.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import QRCode from 'qrcode';
+
+	interface Props {
+		value: string;
+		size?: number;
+	}
+
+	const { value, size = 200 }: Props = $props();
+	let canvas: HTMLCanvasElement;
+
+	onMount(() => {
+		generateQR();
+	});
+
+	$effect(() => {
+		if (value) {
+			generateQR();
+		}
+	});
+
+	async function generateQR() {
+		if (!canvas) return;
+
+		try {
+			await QRCode.toCanvas(canvas, value, {
+				width: size,
+				margin: 2,
+				color: {
+					dark: '#000000',
+					light: '#FFFFFF'
+				}
+			});
+		} catch (error) {
+			console.error('Failed to generate QR code:', error);
+		}
+	}
+</script>
+
+<div class="qr-wrapper flex justify-center p-2">
+	<canvas bind:this={canvas} class="qr-canvas rounded-lg"></canvas>
+</div>
+
+<style>
+	.qr-canvas {
+		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+	}
+</style>