Azure costs are estimated with persistent volumes. Actual billing depends on runtime.
+
+ Hourly
+ {estimate.cost.currency} {estimate.cost.hourly.toFixed(2)}
+
+
+ Daily
+ {estimate.cost.currency} {estimate.cost.daily.toFixed(2)}
+
+
+ Monthly
+ {estimate.cost.currency} {estimate.cost.monthly.toFixed(2)}
+
+
+
+ 💡 Estimated costs include persistent storage. Actual billing based on runtime.
+
+
Adjust options to see cost estimate.
)}
diff --git a/apps/web/components/ui/dialog.tsx b/apps/web/components/ui/dialog.tsx
new file mode 100644
index 0000000..e3960a3
--- /dev/null
+++ b/apps/web/components/ui/dialog.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { X } from "lucide-react";
+import { Button } from "./button";
+
+export interface DialogProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ children: React.ReactNode;
+}
+
+export function Dialog({ open, onOpenChange, children }: DialogProps) {
+ React.useEffect(() => {
+ if (!open) return;
+
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ onOpenChange(false);
+ }
+ };
+
+ document.addEventListener("keydown", handleEscape);
+ return () => document.removeEventListener("keydown", handleEscape);
+ }, [open, onOpenChange]);
+
+ if (!open) return null;
+
+ return (
+
+ {/* Backdrop */}
+
onOpenChange(false)}
+ />
+
+ {/* Dialog */}
+
{children}
+
+ );
+}
+
+export interface DialogContentProps {
+ className?: string;
+ children: React.ReactNode;
+ showClose?: boolean;
+ onClose?: () => void;
+}
+
+export function DialogContent({
+ className,
+ children,
+ showClose = true,
+ onClose,
+}: DialogContentProps) {
+ return (
+
+ {showClose && (
+
+ )}
+ {children}
+
+ );
+}
+
+export interface DialogHeaderProps {
+ className?: string;
+ children: React.ReactNode;
+}
+
+export function DialogHeader({ className, children }: DialogHeaderProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export interface DialogTitleProps {
+ className?: string;
+ children: React.ReactNode;
+}
+
+export function DialogTitle({ className, children }: DialogTitleProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export interface DialogDescriptionProps {
+ className?: string;
+ children: React.ReactNode;
+}
+
+export function DialogDescription({
+ className,
+ children,
+}: DialogDescriptionProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export interface DialogFooterProps {
+ className?: string;
+ children: React.ReactNode;
+}
+
+export function DialogFooter({ className, children }: DialogFooterProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+// Confirmation Dialog Helper
+export interface ConfirmDialogProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ title: string;
+ description: string;
+ confirmLabel?: string;
+ cancelLabel?: string;
+ variant?: "default" | "destructive";
+ onConfirm: () => void;
+}
+
+export function ConfirmDialog({
+ open,
+ onOpenChange,
+ title,
+ description,
+ confirmLabel = "Confirm",
+ cancelLabel = "Cancel",
+ variant = "default",
+ onConfirm,
+}: ConfirmDialogProps) {
+ return (
+
+ );
+}
diff --git a/apps/web/components/ui/empty-state.tsx b/apps/web/components/ui/empty-state.tsx
new file mode 100644
index 0000000..86deeb9
--- /dev/null
+++ b/apps/web/components/ui/empty-state.tsx
@@ -0,0 +1,103 @@
+import { cn } from "@/lib/utils";
+import { Button } from "./button";
+
+export interface EmptyStateProps {
+ icon?: React.ReactNode;
+ title: string;
+ description?: string;
+ action?: {
+ label: string;
+ onClick: () => void;
+ };
+ className?: string;
+}
+
+export function EmptyState({
+ icon,
+ title,
+ description,
+ action,
+ className,
+}: EmptyStateProps) {
+ return (
+
+ {icon && (
+
+ {icon}
+
+ )}
+
{title}
+ {description && (
+
+ {description}
+
+ )}
+ {action && (
+
+ )}
+
+ );
+}
+
+// Preset empty states
+export function NoWorkspacesEmpty({ onCreate }: { onCreate: () => void }) {
+ return (
+
🚀}
+ title="No workspaces yet"
+ description="Create your first cloud workspace and start coding in seconds. Choose your preferred setup and we'll handle the rest."
+ action={{
+ label: "Create Workspace",
+ onClick: onCreate,
+ }}
+ />
+ );
+}
+
+export function NoResultsEmpty() {
+ return (
+ 🔍}
+ title="No results found"
+ description="We couldn't find anything matching your search. Try adjusting your filters or search terms."
+ />
+ );
+}
+
+export function ErrorStateEmpty({ onRetry }: { onRetry?: () => void }) {
+ return (
+ ❌}
+ title="Something went wrong"
+ description="We encountered an error while loading your data. Please try again or contact support if the problem persists."
+ action={
+ onRetry
+ ? {
+ label: "Try Again",
+ onClick: onRetry,
+ }
+ : undefined
+ }
+ />
+ );
+}
+
+export function ComingSoonEmpty() {
+ return (
+ 🚧}
+ title="Coming Soon"
+ description="We're working hard to bring you this feature. Stay tuned for updates!"
+ />
+ );
+}
diff --git a/apps/web/components/ui/progress.tsx b/apps/web/components/ui/progress.tsx
new file mode 100644
index 0000000..afec3ec
--- /dev/null
+++ b/apps/web/components/ui/progress.tsx
@@ -0,0 +1,126 @@
+import { cn } from "@/lib/utils";
+
+export interface ProgressProps {
+ value: number;
+ max?: number;
+ className?: string;
+ indicatorClassName?: string;
+ showLabel?: boolean;
+ variant?: "default" | "success" | "warning" | "error";
+ size?: "sm" | "md" | "lg";
+}
+
+const variantStyles = {
+ default: "bg-gradient-to-r from-primary to-secondary",
+ success: "bg-gradient-to-r from-accent to-accent/80",
+ warning: "bg-gradient-to-r from-warning to-warning/80",
+ error: "bg-gradient-to-r from-destructive to-destructive/80",
+};
+
+const sizeStyles = {
+ sm: "h-1.5",
+ md: "h-2.5",
+ lg: "h-4",
+};
+
+export function Progress({
+ value,
+ max = 100,
+ className,
+ indicatorClassName,
+ showLabel = false,
+ variant = "default",
+ size = "md",
+}: ProgressProps) {
+ const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+ return (
+
+
+ {showLabel && (
+
+ {value} / {max}
+ {percentage.toFixed(0)}%
+
+ )}
+
+
+ {showLabel && (
+
+ {percentage.toFixed(0)}%
+
+ )}
+
+ {Array.from({ length: count }).map((_, i) => (
+
+ ))}
+
+
+ {Array.from({ length: cols }).map((_, i) => (
+
+ ))}
+
+ {Array.from({ length: rows }).map((_, i) => (
+
+ {Array.from({ length: cols }).map((_, j) => (
+
+ ))}
+
+ ))}
+
+
+
{variantIcons[variant]}
+
+ {title &&
{title}
}
+ {description && (
+
{description}
+ )}
+
+
+
+
+ {children}
+
+ );
+}
+
+// Toast manager hook
+type ToastType = Omit;
+
+export function useToast() {
+ const [toasts, setToasts] = React.useState([]);
+ const timeoutsRef = React.useRef>(new Map());
+
+ // Cleanup all timeouts on unmount
+ React.useEffect(() => {
+ return () => {
+ timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+ timeoutsRef.current.clear();
+ };
+ }, []);
+
+ const addToast = React.useCallback((toast: ToastType) => {
+ const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+ const duration = toast.duration || 5000;
+
+ const newToast: ToastProps = {
+ ...toast,
+ id,
+ onClose: (id: string) => {
+ // Clear timeout if exists
+ const timeout = timeoutsRef.current.get(id);
+ if (timeout) {
+ clearTimeout(timeout);
+ timeoutsRef.current.delete(id);
+ }
+ setToasts((prev) => prev.filter((t) => t.id !== id));
+ },
+ };
+
+ setToasts((prev) => [...prev, newToast]);
+
+ // Auto remove after duration
+ const timeout = setTimeout(() => {
+ timeoutsRef.current.delete(id);
+ setToasts((prev) => prev.filter((t) => t.id !== id));
+ }, duration);
+
+ timeoutsRef.current.set(id, timeout);
+
+ return id;
+ }, []);
+
+ const removeToast = React.useCallback((id: string) => {
+ setToasts((prev) => prev.filter((t) => t.id !== id));
+ }, []);
+
+ return {
+ toasts,
+ addToast,
+ removeToast,
+ success: (title: string, description?: string) =>
+ addToast({ title, description, variant: "success" }),
+ error: (title: string, description?: string) =>
+ addToast({ title, description, variant: "error" }),
+ warning: (title: string, description?: string) =>
+ addToast({ title, description, variant: "warning" }),
+ info: (title: string, description?: string) =>
+ addToast({ title, description, variant: "info" }),
+ };
+}
diff --git a/apps/web/lib/jwt.ts b/apps/web/lib/jwt.ts
index dc48f64..4e3ddb5 100644
--- a/apps/web/lib/jwt.ts
+++ b/apps/web/lib/jwt.ts
@@ -40,5 +40,7 @@ export function extractTokenFromHeader(authHeader: string): string {
if (!authHeader) throw new Error('Authorization header is missing');
const parts = authHeader.split(' ');
if (parts.length !== 2 || parts[0] !== 'Bearer') throw new Error('Invalid authorization header format');
- return parts[1];
+ const token = parts[1];
+ if (!token) throw new Error('Token is missing from authorization header');
+ return token;
}
diff --git a/apps/web/lib/permissions.ts b/apps/web/lib/permissions.ts.skip
similarity index 100%
rename from apps/web/lib/permissions.ts
rename to apps/web/lib/permissions.ts.skip