openship 0.1.0 → 0.1.1

package/apps/dashboard/src/components/shared/ErrorState.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import {
+  AlertTriangle,
+  GitBranch,
+  Lock,
+  ArrowLeft,
+  Plus,
+  HelpCircle,
+  ExternalLink,
+} from "lucide-react";
+
+/* ── Error type configs ─────────────────────────────────────────────── */
+
+const ERROR_CONFIGS = {
+  "repo-not-found": {
+    icon: GitBranch,
+    iconColor: "text-destructive",
+    iconBg: "bg-destructive/10",
+    title: "Repository Not Found",
+    subtitle: "We couldn't find the repository you're looking for.",
+    hints: [
+      "Repository is private and you haven't granted access",
+      "Repository name or owner is misspelled",
+      "Repository has been deleted or moved",
+      "Your GitHub connection has expired",
+    ],
+    actions: [
+      { label: "Back to Library", icon: ArrowLeft, variant: "secondary" as const, path: "/library" },
+      { label: "Import Repository", icon: Plus, variant: "primary" as const, path: "/library" },
+    ],
+  },
+  "project-not-found": {
+    icon: AlertTriangle,
+    iconColor: "text-destructive",
+    iconBg: "bg-destructive/10",
+    title: "Project Not Found",
+    subtitle: "The project you are looking for does not exist or has been deleted.",
+    hints: [
+      "Project has been deleted",
+      "You don't have access to this project",
+      "The project URL is incorrect",
+    ],
+    actions: [
+      { label: "Back to Dashboard", icon: ArrowLeft, variant: "secondary" as const, path: "/" },
+      { label: "Create New Project", icon: Plus, variant: "primary" as const, path: "/library" },
+    ],
+  },
+  "access-denied": {
+    icon: Lock,
+    iconColor: "text-orange-500",
+    iconBg: "bg-orange-500/10",
+    title: "Access Denied",
+    subtitle: "You don't have permission to access this resource.",
+    hints: [
+      "You are not the project owner",
+      "Your account doesn't have the required permissions",
+      "Your team membership has changed",
+    ],
+    actions: [
+      { label: "Back to Dashboard", icon: ArrowLeft, variant: "secondary" as const, path: "/" },
+    ],
+  },
+} as const;
+
+type ErrorType = keyof typeof ERROR_CONFIGS;
+
+interface ErrorStateProps {
+  type?: ErrorType;
+  error?: {
+    message?: string;
+    details?: string;
+  };
+}
+
+/* ── Component ──────────────────────────────────────────────────────── */
+
+export default function ErrorState({ error = {}, type = "repo-not-found" }: ErrorStateProps) {
+  const router = useRouter();
+  const config = ERROR_CONFIGS[type] ?? ERROR_CONFIGS["repo-not-found"];
+  const Icon = config.icon;
+
+  const title = error.message || config.title;
+  const subtitle = error.details || config.subtitle;
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div className="max-w-xl mx-auto pt-12">
+
+          {/* ── Error card ───────────────────────────────────────── */}
+          <div className="bg-card rounded-2xl border border-border/50">
+            {/* Header */}
+            <div className="px-6 py-5 border-b border-border/50">
+              <div className="flex items-center gap-4">
+                <div className={`w-11 h-11 rounded-xl ${config.iconBg} flex items-center justify-center`}>
+                  <Icon className={`size-5 ${config.iconColor}`} />
+                </div>
+                <div>
+                  <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+                  <p className="text-sm text-muted-foreground/70 mt-0.5">{subtitle}</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Body */}
+            <div className="px-6 py-5 space-y-5">
+              {/* Hints */}
+              {config.hints.length > 0 && (
+                <div>
+                  <h3 className="text-sm font-medium text-foreground mb-2.5">Common causes</h3>
+                  <ul className="space-y-1.5">
+                    {config.hints.map((hint, i) => (
+                      <li key={i} className="flex items-start gap-2.5 text-sm text-muted-foreground">
+                        <span className="mt-1.5 size-1 rounded-full bg-muted-foreground/40 shrink-0" />
+                        {hint}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+
+              {/* Actions */}
+              <div className="flex gap-3 pt-1">
+                {config.actions.map((action, i) => {
+                  const ActionIcon = action.icon;
+                  return (
+                    <button
+                      key={i}
+                      onClick={() => router.push(action.path)}
+                      className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors ${
+                        action.variant === "primary"
+                          ? "bg-foreground text-background hover:bg-foreground/90"
+                          : "bg-muted/60 text-foreground hover:bg-muted"
+                      }`}
+                    >
+                      <ActionIcon className="size-4" />
+                      {action.label}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          {/* ── Help card ────────────────────────────────────────── */}
+          <div className="bg-card rounded-2xl border border-border/50 mt-4 px-5 py-4">
+            <div className="flex items-start gap-3">
+              <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
+                <HelpCircle className="size-[18px] text-primary" />
+              </div>
+              <div>
+                <h3 className="text-sm font-medium text-foreground mb-1">Need help?</h3>
+                <p className="text-xs text-muted-foreground/70 mb-2.5">
+                  Check the documentation or reach out if the issue persists.
+                </p>
+                <div className="flex gap-4">
+                  <a
+                    href="https://openship.org/docs"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs font-medium text-primary hover:text-primary/80 flex items-center gap-1 transition-colors"
+                  >
+                    Documentation <ExternalLink className="size-3" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/dashboard/src/components/shared/FeatureCard.tsx

@@ -0,0 +1,20 @@
+import generateIcon from '@/utils/icons';
+
+interface FeatureCardProps {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+export default function FeatureCard({ icon, title, description }: FeatureCardProps) {
+  return (
+    <div className="bg-white/5 backdrop-blur-[25px] rounded-[20px] p-6 border border-white/10">
+      <div className="mb-4">
+        {generateIcon(icon, 40, 'rgba(255,255,255,0.5)')}
+      </div>
+      <h3 className="text-xl font-bold text-white mb-3">{title}</h3>
+      <p className="text-white/60 leading-relaxed">{description}</p>
+    </div>
+  );
+}
+

package/apps/dashboard/src/components/shared/MDXComponents.tsx

@@ -0,0 +1,24 @@
+import defaultComponents from "fumadocs-ui/mdx";
+import * as TabsComponents from "fumadocs-ui/components/tabs";
+import Image from "next/image";
+
+export const mdxComponents: Record<string, React.ComponentType<any>> = {
+  ...defaultComponents,
+  ...TabsComponents,
+  Figure: ({ src, alt, caption }: { src: string; alt: string; caption?: string }) => (
+    <figure className="my-8">
+      <Image
+        src={src}
+        alt={alt}
+        width={800}
+        height={600}
+        className="rounded-lg"
+      />
+      {caption && (
+        <figcaption className="text-sm text-muted-foreground text-center mt-2">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  ),
+};

package/apps/dashboard/src/components/shared/MachineSettingsModal.tsx

@@ -0,0 +1,286 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { ExternalLink, BookOpen } from 'lucide-react';
+import { Modal } from '@/components/ui/Modal';
+import { useToast } from '@/context/ToastContext';
+import { projectsApi, sandboxApi } from '@/lib/api';
+
+// Resource tier definitions (credits per month)
+const CPU_TIERS = [
+  { value: 1, label: '1 vCPU', credits: 0 },
+  { value: 2, label: '2 vCPU', credits: 500 },
+  { value: 4, label: '4 vCPU', credits: 1500 },
+  { value: 8, label: '8 vCPU', credits: 3500 },
+];
+
+const RAM_TIERS = [
+  { value: 2, label: '2 GB', credits: 0 },
+  { value: 4, label: '4 GB', credits: 500 },
+  { value: 8, label: '8 GB', credits: 1500 },
+  { value: 16, label: '16 GB', credits: 3500 },
+  { value: 32, label: '32 GB', credits: 7500 },
+];
+
+const STORAGE_TIERS = [
+  { value: 20, label: '20 GB', credits: 0 },
+  { value: 50, label: '50 GB', credits: 500 },
+  { value: 100, label: '100 GB', credits: 1200 },
+  { value: 250, label: '250 GB', credits: 2500 },
+];
+
+interface MachineConfig {
+  cpu: number;
+  ram: number;
+  storage: number;
+}
+
+interface MachineSettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  type: 'sandbox' | 'project';
+  resourceId: string;
+  resourceName: string;
+  currentConfig: MachineConfig;
+  onUpdate?: (config: MachineConfig) => void;
+}
+
+const formatCredits = (credits: number): string => {
+  if (credits >= 1000) {
+    return `${(credits / 1000).toFixed(1)}K`;
+  }
+  return credits.toString();
+};
+
+interface ResourceRowProps {
+  label: string;
+  tiers: { value: number; label: string; credits: number }[];
+  currentValue: number;
+  selectedValue: number;
+  onChange: (value: number) => void;
+}
+
+const ResourceRow = ({ label, tiers, currentValue, selectedValue, onChange }: ResourceRowProps) => {
+  return (
+    <div className="flex items-center gap-6">
+      <div className="w-24 shrink-0">
+        <span className="text-sm font-medium text-black/70">{label}</span>
+      </div>
+      <div className="flex-1 flex gap-2">
+        {tiers.map((tier) => {
+          const isSelected = selectedValue === tier.value;
+          const isCurrent = currentValue === tier.value;
+          
+          return (
+            <button
+              key={tier.value}
+              onClick={() => onChange(tier.value)}
+              className={`relative flex-1 py-3 px-2 rounded-xl text-center transition-all border ${
+                isSelected
+                  ? 'bg-black/90 text-white border-black/90'
+                  : 'bg-white text-black/80 border-black/10 hover:border-black/20 hover:bg-black/[0.02]'
+              }`}
+            >
+              <div className="text-sm font-medium">{tier.label}</div>
+              {tier.credits > 0 ? (
+                <div className={`text-xs mt-0.5 ${isSelected ? 'text-white/50' : 'text-black/40'}`}>
+                  +{formatCredits(tier.credits)}
+                </div>
+              ) : (
+                <div className={`text-xs mt-0.5 ${isSelected ? 'text-white/50' : 'text-black/40'}`}>
+                  Base
+                </div>
+              )}
+              {isCurrent && !isSelected && (
+                <div className="absolute -top-1 left-1/2 -translate-x-1/2 px-2 py-0.5 bg-black/5 text-black/50 text-[10px] font-medium rounded-full">
+                  Current
+                </div>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default function MachineSettingsModal({
+  isOpen,
+  onClose,
+  type,
+  resourceId,
+  resourceName,
+  currentConfig,
+  onUpdate,
+}: MachineSettingsModalProps) {
+  const { showToast } = useToast();
+  const [selectedCpu, setSelectedCpu] = useState(currentConfig.cpu);
+  const [selectedRam, setSelectedRam] = useState(currentConfig.ram);
+  const [selectedStorage, setSelectedStorage] = useState(currentConfig.storage);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Reset selections when modal opens with new config
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedCpu(currentConfig.cpu);
+      setSelectedRam(currentConfig.ram);
+      setSelectedStorage(currentConfig.storage);
+    }
+  }, [isOpen, currentConfig]);
+
+  // Calculate credits
+  const getCredits = (tiers: typeof CPU_TIERS, value: number) => 
+    tiers.find(t => t.value === value)?.credits || 0;
+
+  const currentTotal = 
+    getCredits(CPU_TIERS, currentConfig.cpu) + 
+    getCredits(RAM_TIERS, currentConfig.ram) + 
+    getCredits(STORAGE_TIERS, currentConfig.storage);
+
+  const newTotal = 
+    getCredits(CPU_TIERS, selectedCpu) + 
+    getCredits(RAM_TIERS, selectedRam) + 
+    getCredits(STORAGE_TIERS, selectedStorage);
+
+  const creditsDiff = newTotal - currentTotal;
+  const hasChanges = 
+    selectedCpu !== currentConfig.cpu || 
+    selectedRam !== currentConfig.ram || 
+    selectedStorage !== currentConfig.storage;
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    
+    try {
+      const resources = {
+        cpu: selectedCpu,
+        ram: selectedRam,
+        storage: selectedStorage,
+      };
+
+      const response = type === 'sandbox'
+        ? await sandboxApi.updateResources(resourceId, resources)
+        : await projectsApi.updateResources(resourceId, resources);
+
+      if (response.success) {
+        showToast('Machine settings updated', 'success');
+        onUpdate?.({ cpu: selectedCpu, ram: selectedRam, storage: selectedStorage });
+        onClose();
+      } else {
+        showToast(response.message || 'Failed to update settings', 'error');
+      }
+    } catch (error) {
+      console.error('Error updating resources:', error);
+      showToast('Failed to update settings', 'error');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const docsUrl = type === 'sandbox' 
+    ? '/docs/sandbox/configuration' 
+    : '/docs/projects/configuration';
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      maxWidth="48rem"
+      height="auto"
+    >
+      <div className="flex flex-col">
+        {/* Header */}
+        <div className="px-8 py-6 border-b border-black/5 flex items-start justify-between">
+          <div>
+            <h2 className="text-2xl font-semibold text-black" style={{ letterSpacing: '-0.5px' }}>
+              Machine Settings
+            </h2>
+            <p className="text-sm text-black/50 mt-1">
+              Configure compute resources for <span className="font-medium text-black/60">{resourceName}</span>
+            </p>
+          </div>
+          <Link
+            href={docsUrl}
+            className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-black/50 hover:text-black bg-black/5 hover:bg-black/10 rounded-lg transition-all"
+          >
+            <BookOpen className="w-4 h-4" />
+            Docs
+          </Link>
+        </div>
+
+        {/* Content */}
+        <div className="px-8 py-6 space-y-5">
+          <ResourceRow
+            label="CPU"
+            tiers={CPU_TIERS}
+            currentValue={currentConfig.cpu}
+            selectedValue={selectedCpu}
+            onChange={setSelectedCpu}
+          />
+
+          <ResourceRow
+            label="Memory"
+            tiers={RAM_TIERS}
+            currentValue={currentConfig.ram}
+            selectedValue={selectedRam}
+            onChange={setSelectedRam}
+          />
+
+          <ResourceRow
+            label="Storage"
+            tiers={STORAGE_TIERS}
+            currentValue={currentConfig.storage}
+            selectedValue={selectedStorage}
+            onChange={setSelectedStorage}
+          />
+        </div>
+
+        {/* Footer */}
+        <div className="px-8 py-5 border-t border-black/5 flex items-center justify-between">
+          <div>
+            <div className="flex items-baseline gap-2">
+              <span className="text-2xl font-bold text-black/80">{formatCredits(newTotal)}</span>
+              <span className="text-sm text-black/40">credits/month</span>
+            </div>
+            {hasChanges && creditsDiff !== 0 && (
+              <p className={`text-sm ${creditsDiff > 0 ? 'text-black/50' : 'text-emerald-600'}`}>
+                {creditsDiff > 0 ? `+${formatCredits(creditsDiff)}` : `-${formatCredits(Math.abs(creditsDiff))}`} from current
+              </p>
+            )}
+            <Link 
+              href="/pricing" 
+              className="inline-flex items-center gap-1 text-xs text-black/40 hover:text-black/60 mt-1 transition-colors"
+            >
+              View pricing
+              <ExternalLink className="w-3 h-3" />
+            </Link>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <button
+              onClick={onClose}
+              className="px-5 py-2.5 text-sm font-medium text-black/50 hover:text-black transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={!hasChanges || isSaving}
+              className="px-6 py-2.5 text-sm font-medium text-white bg-black/90 rounded-xl hover:bg-black transition-all disabled:opacity-40 disabled:cursor-not-allowed flex items-center gap-2"
+            >
+              {isSaving ? (
+                <>
+                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                  Saving...
+                </>
+              ) : (
+                'Save Changes'
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}

package/apps/dashboard/src/components/shared/Modal.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { X } from 'lucide-react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  maxWidth?: 'sm' | 'md' | 'lg';
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children, maxWidth = 'md' }) => {
+  if (!isOpen) return null;
+
+  const widthClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div className={`bg-white rounded-[24px] ${widthClasses[maxWidth]} w-full shadow-2xl max-h-[90vh] overflow-y-auto`}>
+        <div className="sticky top-0 bg-white border-b border-black/5 px-6 py-4 flex items-center justify-between rounded-t-[24px]">
+          <h3 className="text-lg font-semibold text-black">{title}</h3>
+          <button onClick={onClose} className="text-black/50 hover:text-black transition-colors">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+        <div className="p-6">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
+

package/apps/dashboard/src/components/shared/OTPInput.tsx

@@ -0,0 +1,122 @@
+import React, { useRef, useState, KeyboardEvent, ClipboardEvent } from 'react';
+
+interface OTPInputProps {
+  length?: number;
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  autoFocus?: boolean;
+}
+
+const OTPInput: React.FC<OTPInputProps> = ({
+  length = 6,
+  value,
+  onChange,
+  disabled = false,
+  autoFocus = false,
+}) => {
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(autoFocus ? 0 : null);
+
+  // Initialize refs array
+  if (inputRefs.current.length !== length) {
+    inputRefs.current = Array(length).fill(null);
+  }
+
+  // Split value into array of digits
+  const digits = value.split('').concat(Array(length).fill('')).slice(0, length);
+
+  const focusInput = (index: number) => {
+    if (index >= 0 && index < length) {
+      inputRefs.current[index]?.focus();
+      setFocusedIndex(index);
+    }
+  };
+
+  const handleChange = (index: number, digit: string) => {
+    // Only allow single digit
+    const newDigit = digit.replace(/\D/g, '').slice(-1);
+    
+    const newDigits = [...digits];
+    newDigits[index] = newDigit;
+    const newValue = newDigits.join('').replace(/\s/g, '');
+    
+    onChange(newValue);
+
+    // Auto-focus next input if digit was entered
+    if (newDigit && index < length - 1) {
+      focusInput(index + 1);
+    }
+  };
+
+  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Backspace') {
+      if (!digits[index] && index > 0) {
+        // If current input is empty, focus previous and delete its value
+        const newDigits = [...digits];
+        newDigits[index - 1] = '';
+        onChange(newDigits.join('').replace(/\s/g, ''));
+        focusInput(index - 1);
+      } else if (digits[index]) {
+        // Delete current digit
+        const newDigits = [...digits];
+        newDigits[index] = '';
+        onChange(newDigits.join('').replace(/\s/g, ''));
+      }
+      e.preventDefault();
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      focusInput(index - 1);
+    } else if (e.key === 'ArrowRight' && index < length - 1) {
+      focusInput(index + 1);
+    }
+  };
+
+  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData('text/plain').replace(/\D/g, '').slice(0, length);
+    onChange(pastedData);
+    
+    // Focus the next empty input or last input
+    const nextIndex = Math.min(pastedData.length, length - 1);
+    focusInput(nextIndex);
+  };
+
+  return (
+    <div className="flex gap-2 justify-center">
+      {Array.from({ length }).map((_, index) => (
+        <input
+          key={index}
+          ref={(el) => {
+            if (el) {
+              inputRefs.current[index] = el;
+            }
+          }}
+          type="text"
+          inputMode="numeric"
+          maxLength={1}
+          value={digits[index] || ''}
+          onChange={(e) => handleChange(index, e.target.value)}
+          onKeyDown={(e) => handleKeyDown(index, e)}
+          onPaste={handlePaste}
+          onFocus={() => setFocusedIndex(index)}
+          onBlur={() => setFocusedIndex(null)}
+          disabled={disabled}
+          autoFocus={autoFocus && index === 0}
+          className={`w-12 h-14 text-center text-2xl font-mono font-semibold bg-white border-2 rounded-xl transition-all
+            ${focusedIndex === index 
+              ? 'border-indigo-500 ring-2 ring-indigo-500/20 scale-105' 
+              : digits[index] 
+                ? 'border-indigo-300' 
+                : 'border-black/10'
+            }
+            ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-black/20'}
+            focus:outline-none
+          `}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default OTPInput;
+

package/apps/dashboard/src/components/shared/PageHero.tsx

@@ -0,0 +1,21 @@
+interface PageHeroProps {
+  title: string;
+  description?: string;
+}
+
+export default function PageHero({ title, description }: PageHeroProps) {
+  return (
+    <div className="text-center mb-16 lg:mb-24">
+      <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
+        {title}
+      </h1>
+
+      {description && (
+        <p className="text-lg lg:text-xl text-white/60 max-w-3xl mx-auto leading-relaxed">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}
+