openship 0.1.1 → 0.1.7

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

@@ -1,176 +0,0 @@
-"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

@@ -1,20 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,286 +0,0 @@
-'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

@@ -1,39 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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>
-  );
-}
-