openship 0.1.1 → 0.1.7

package/apps/dashboard/src/app/(dashboard)/library/components/RepositoryList.tsx

@@ -1,292 +0,0 @@
-"use client";
-
-import React, { useState, useMemo } from "react";
-import { useRouter } from "next/navigation";
-import {
-  Search,
-  Lock,
-  Globe,
-  Star,
-  GitFork,
-  ArrowRight,
-  ChevronDown,
-} from "lucide-react";
-import type { GitHubRepo } from "@/context/GitHubContext";
-import { encodeRepoSlug } from "@/utils/repoSlug";
-import type { VisibilityFilter, SortBy } from "../types";
-import { LANG_COLORS } from "@/constants/lang-colors";
-
-/* ── Helpers ─────────────────────────────────────────────────────── */
-
-function timeAgo(dateStr: string): string {
-  const diff = Date.now() - new Date(dateStr).getTime();
-  const mins = Math.floor(diff / 60_000);
-  if (mins < 1) return "just now";
-  if (mins < 60) return `${mins}m ago`;
-  const hrs = Math.floor(mins / 60);
-  if (hrs < 24) return `${hrs}h ago`;
-  const days = Math.floor(hrs / 24);
-  if (days < 30) return `${days}d ago`;
-  return `${Math.floor(days / 30)}mo ago`;
-}
-
-/* ── Component ────────────────────────────────────────────────────── */
-
-interface Account {
-  login: string;
-  avatar_url: string;
-}
-
-interface RepositoryListProps {
-  repos: GitHubRepo[];
-  accounts: Account[];
-  selectedOwner: string;
-  setSelectedOwner: (login: string) => void;
-  loading: boolean;
-  loadingRepos: boolean;
-}
-
-export function RepositoryList({
-  repos,
-  accounts,
-  selectedOwner,
-  setSelectedOwner,
-  loading,
-  loadingRepos,
-}: RepositoryListProps) {
-  const router = useRouter();
-  const [search, setSearch] = useState("");
-  const [visibility, setVisibility] = useState<VisibilityFilter>("all");
-  const [sortBy, setSortBy] = useState<SortBy>("updated");
-
-  const filtered = useMemo(() => {
-    if (!Array.isArray(repos)) return [];
-    let list = repos;
-
-    if (search) {
-      const q = search.toLowerCase();
-      list = list.filter(
-        (r) =>
-          r.name?.toLowerCase().includes(q) ||
-          r.description?.toLowerCase().includes(q)
-      );
-    }
-    if (visibility === "public") list = list.filter((r) => !r.private);
-    if (visibility === "private") list = list.filter((r) => r.private);
-
-    list = [...list].sort((a, b) => {
-      if (sortBy === "name") return a.name.localeCompare(b.name);
-      if (sortBy === "stars")
-        return (b.stars ?? b.stargazers_count ?? 0) - (a.stars ?? a.stargazers_count ?? 0);
-      return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime();
-    });
-
-    return list;
-  }, [repos, search, visibility, sortBy]);
-
-  const handleDeploy = (ownerLogin: string, repoName: string) => {
-    const slug = encodeRepoSlug(ownerLogin, repoName);
-    router.push(`/deploy/${slug}`);
-  };
-
-  const getOwnerLogin = (owner: { login: string } | string): string =>
-    typeof owner === "string" ? owner : owner.login;
-
-  return (
-    <div className="bg-card rounded-2xl border border-border/50">
-      {/* ── Card header: account selector + search ──── */}
-      <div className="px-5 py-4 border-b border-border/50">
-        {/* ── Accounts row ──────────────────────────────── */}
-        {accounts.length > 0 && (
-          <div className="flex items-center gap-1.5 mb-4 overflow-x-auto no-scrollbar">
-            {accounts.map((acc) => (
-              <button
-                key={acc.login}
-                onClick={() => setSelectedOwner(acc.login)}
-                className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-[13px] font-medium transition-all whitespace-nowrap ${
-                  selectedOwner === acc.login
-                    ? "bg-primary/10 text-primary"
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
-                }`}
-              >
-                <img
-                  src={acc.avatar_url}
-                  alt=""
-                  className="w-5 h-5 rounded-full"
-                />
-                {acc.login}
-              </button>
-            ))}
-          </div>
-        )}
-
-        {/* ── Search + filter row ───────────────────────── */}
-        <div className="flex items-center gap-2">
-          <div className="relative flex-1">
-            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-            <input
-              type="text"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search repositories..."
-              className="w-full pl-10 pr-4 py-2.5 bg-muted/40 border border-border/50 rounded-xl text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:bg-background transition-all"
-            />
-          </div>
-
-          {/* Visibility pills */}
-          <div className="hidden sm:flex items-center bg-muted/40 border border-border/50 rounded-xl p-0.5">
-            {(["all", "public", "private"] as VisibilityFilter[]).map((v) => (
-              <button
-                key={v}
-                onClick={() => setVisibility(v)}
-                className={`px-3.5 py-2 rounded-lg text-xs font-medium capitalize transition-all ${
-                  visibility === v
-                    ? "bg-foreground text-background shadow-sm"
-                    : "text-muted-foreground hover:text-foreground"
-                }`}
-              >
-                {v}
-              </button>
-            ))}
-          </div>
-
-          {/* Sort */}
-          <div className="relative">
-            <select
-              value={sortBy}
-              onChange={(e) => setSortBy(e.target.value as SortBy)}
-              className="appearance-none pl-3.5 pr-8 py-2.5 bg-muted/40 border border-border/50 rounded-xl text-xs font-medium text-foreground cursor-pointer hover:bg-muted/70 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all"
-            >
-              <option value="updated">Recent</option>
-              <option value="name">Name</option>
-              <option value="stars">Stars</option>
-            </select>
-            <ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground pointer-events-none" />
-          </div>
-        </div>
-      </div>
-
-      {/* ── Repo list ────────────────────────────────────── */}
-      {loadingRepos ? (
-        <div className="divide-y divide-border/50">
-          {[...Array(5)].map((_, i) => (
-            <div key={i} className="px-5 py-4 flex items-center gap-4 animate-pulse">
-              <div className="w-10 h-10 bg-muted rounded-xl" />
-              <div className="flex-1 space-y-2">
-                <div className="h-4 w-32 bg-muted rounded" />
-                <div className="h-3 w-48 bg-muted rounded" />
-              </div>
-            </div>
-          ))}
-        </div>
-      ) : filtered.length === 0 ? (
-        <div className="px-6 py-12 text-center">
-          <div className="relative mx-auto w-48 h-32 mb-4">
-            <svg className="w-full h-full" viewBox="0 0 200 130" fill="none">
-              <rect x="50" y="25" width="100" height="75" rx="12" fill="var(--th-sf-04)" />
-              <rect x="40" y="15" width="100" height="75" rx="12" fill="var(--th-sf-03)" stroke="var(--th-bd-subtle)" strokeWidth="1" />
-              <rect x="30" y="5" width="100" height="75" rx="12" fill="var(--th-card-bg)" stroke="var(--th-bd-default)" strokeWidth="1" />
-              <rect x="30" y="5" width="100" height="22" rx="12" fill="var(--th-sf-05)" />
-              <circle cx="44" cy="16" r="3" fill="#ef4444" fillOpacity="0.6" />
-              <circle cx="54" cy="16" r="3" fill="#eab308" fillOpacity="0.6" />
-              <circle cx="64" cy="16" r="3" fill="#22c55e" fillOpacity="0.6" />
-              <rect x="42" y="36" width="40" height="4" rx="2" fill="var(--th-on-12)" />
-              <rect x="42" y="45" width="68" height="3" rx="1.5" fill="var(--th-on-08)" />
-              <rect x="42" y="53" width="52" height="3" rx="1.5" fill="var(--th-on-08)" />
-              <circle cx="170" cy="65" r="18" fill="var(--th-on-05)" />
-              <circle cx="170" cy="65" r="13" fill="var(--th-card-bg)" stroke="var(--th-on-20)" strokeWidth="1.5" strokeDasharray="3 2" />
-              <path d="M170 58v14M163 65h14" stroke="var(--th-on-40)" strokeWidth="1.5" strokeLinecap="round" />
-              <circle cx="15" cy="40" r="3" fill="var(--th-on-10)" />
-              <circle cx="185" cy="25" r="2.5" fill="var(--th-on-12)" />
-              <path d="M130 60 Q 148 58 155 65" stroke="var(--th-on-12)" strokeWidth="1" strokeDasharray="3 3" fill="none" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-medium text-foreground/80 mb-2">
-            {search ? "No matching repositories" : "No repositories found"}
-          </h3>
-          <p className="text-sm text-muted-foreground max-w-sm mx-auto leading-relaxed">
-            {search
-              ? "Try a different search term or adjust your filters"
-              : "This account doesn\u2019t have any repositories yet"}
-          </p>
-        </div>
-      ) : (
-        <>
-          <div className="divide-y divide-border/50">
-            {filtered.map((repo) => {
-              const ownerLogin = getOwnerLogin(repo.owner);
-              const stars = repo.stars ?? repo.stargazers_count ?? 0;
-              const forks = repo.forks ?? repo.forks_count ?? 0;
-              return (
-                <div
-                  key={repo.id ?? repo.full_name ?? `${ownerLogin}/${repo.name}`}
-                  className="px-5 py-3.5 flex items-center gap-4 hover:bg-muted/40 transition-colors cursor-pointer group"
-                  onClick={() => handleDeploy(ownerLogin, repo.name)}
-                >
-                  <div className="w-10 h-10 rounded-xl bg-muted/60 flex items-center justify-center shrink-0 group-hover:bg-muted transition-colors">
-                    {repo.private ? (
-                      <Lock className="size-[18px] text-muted-foreground" />
-                    ) : (
-                      <Globe className="size-[18px] text-muted-foreground" />
-                    )}
-                  </div>
-
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <p className="text-sm font-medium text-foreground truncate">
-                        {repo.name}
-                      </p>
-                      {repo.private && (
-                        <span className="px-1.5 py-0.5 rounded-md bg-muted text-[10px] font-medium text-muted-foreground">
-                          Private
-                        </span>
-                      )}
-                    </div>
-                    <div className="flex items-center gap-2 mt-0.5">
-                      {repo.description && (
-                        <p className="text-xs text-muted-foreground truncate">{repo.description}</p>
-                      )}
-                      {repo.description && <span className="text-muted-foreground/40">·</span>}
-                      <span className="text-xs text-muted-foreground shrink-0">{timeAgo(repo.updated_at)}</span>
-                    </div>
-                  </div>
-
-                  <div className="flex items-center gap-3 shrink-0">
-                    {repo.language && (
-                      <span className="hidden sm:flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <span
-                          className="w-2.5 h-2.5 rounded-full"
-                          style={{ backgroundColor: LANG_COLORS[repo.language] ?? "#888" }}
-                        />
-                        {repo.language}
-                      </span>
-                    )}
-                    {stars > 0 && (
-                      <span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground">
-                        <Star className="size-3" />
-                        {stars}
-                      </span>
-                    )}
-                    {forks > 0 && (
-                      <span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground">
-                        <GitFork className="size-3" />
-                        {forks}
-                      </span>
-                    )}
-                    <ArrowRight className="size-4 text-muted-foreground/40 group-hover:text-muted-foreground transition-colors" />
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-          {filtered.length > 0 && (
-            <div className="px-5 py-3 text-center text-xs text-muted-foreground/50 border-t border-border/30">
-              {filtered.length} repositor{filtered.length === 1 ? "y" : "ies"}
-              {search && ` matching "${search}"`}
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}

package/apps/dashboard/src/app/(dashboard)/library/components/TemplateGrid.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import React from "react";
-import { useRouter } from "next/navigation";
-import { frameworks } from "@/components/import-project/Frameworks";
-import { encodeRepoSlug } from "@/utils/repoSlug";
-
-export function TemplateGrid() {
-  const router = useRouter();
-
-  const handleSelect = (fw: { id: string; name: string }) => {
-    const slug = encodeRepoSlug("openship", `template-${fw.id}`);
-    router.push(`/deploy/${slug}?template=${fw.id}`);
-  };
-
-  return (
-    <div className="bg-card rounded-2xl border border-border/50 p-6">
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-        {frameworks
-          .filter((fw) => fw.id !== "static")
-          .map((fw) => (
-            <button
-              key={fw.id}
-              onClick={() => handleSelect(fw)}
-              className="flex flex-col items-center gap-3 p-5 rounded-xl border border-border/50 bg-background hover:bg-muted/40 hover:border-border transition-all group"
-            >
-              <div className="w-10 h-10 rounded-xl bg-muted/60 flex items-center justify-center group-hover:scale-105 transition-transform">
-                {fw.icon("hsl(var(--foreground))")}
-              </div>
-              <span className="text-sm font-medium text-foreground">{fw.name}</span>
-            </button>
-          ))}
-      </div>
-    </div>
-  );
-}

package/apps/dashboard/src/app/(dashboard)/library/components/UrlImport.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { useRouter } from "next/navigation";
-import { Link2, ArrowRight } from "lucide-react";
-import { encodeRepoSlug } from "@/utils/repoSlug";
-
-export function UrlImport() {
-  const router = useRouter();
-  const [url, setUrl] = useState("");
-  const [error, setError] = useState("");
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-
-    const match = url.match(
-      /(?:https?:\/\/)?(?:www\.)?github\.com\/([^/]+)\/([^/.]+)/
-    );
-    if (!match) {
-      setError("Enter a valid GitHub repository URL");
-      return;
-    }
-
-    const [, owner, repo] = match;
-    const slug = encodeRepoSlug(owner!, repo!);
-    router.push(`/deploy/${slug}`);
-  };
-
-  return (
-    <div className="bg-card rounded-2xl border border-border/50">
-      <div className="p-8">
-        <div className="max-w-lg mx-auto">
-          <div className="w-14 h-14 rounded-2xl bg-foreground/[0.06] flex items-center justify-center mx-auto mb-4">
-            <Link2 className="size-7 text-muted-foreground" />
-          </div>
-          <h3 className="text-base font-semibold text-foreground text-center mb-1.5">
-            Import from Git URL
-          </h3>
-          <p className="text-sm text-muted-foreground text-center mb-6 leading-relaxed">
-            Paste a public repository URL to import. No GitHub connection required.
-          </p>
-
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <input
-                type="url"
-                value={url}
-                onChange={(e) => { setUrl(e.target.value); setError(""); }}
-                placeholder="https://github.com/username/repository"
-                className={`w-full px-4 py-3 bg-background border rounded-xl text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 transition-all ${
-                  error
-                    ? "border-red-500/50 focus:ring-red-500/20"
-                    : "border-border/50 focus:ring-primary/20"
-                }`}
-              />
-              {error && (
-                <p className="text-xs text-red-500 mt-1.5">{error}</p>
-              )}
-            </div>
-            <button
-              type="submit"
-              disabled={!url.trim()}
-              className="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-foreground text-background text-sm font-medium rounded-xl hover:opacity-90 transition-all disabled:opacity-40 disabled:cursor-not-allowed"
-            >
-              Import Repository
-              <ArrowRight className="size-4" />
-            </button>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}

package/apps/dashboard/src/app/(dashboard)/library/page.tsx

@@ -1,121 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { FolderOpen, Github, Link2, Sparkles } from "lucide-react";
-import { useGitHub } from "@/context/GitHubContext";
-import { ConnectPrompt } from "./components/ConnectPrompt";
-import { LoadingSkeleton } from "./components/LoadingSkeleton";
-import { RepositoryList } from "./components/RepositoryList";
-import { LocalProjects } from "./components/LocalProjects";
-import { LibrarySidebar } from "./components/LibrarySidebar";
-import { UrlImport } from "./components/UrlImport";
-import { TemplateGrid } from "./components/TemplateGrid";
-
-type Tab = "local" | "repositories" | "url" | "template";
-
-interface TabItem {
-  key: Tab;
-  label: string;
-  icon: React.ElementType;
-}
-
-export default function LibraryPage() {
-  const {
-    connected,
-    connecting,
-    loading,
-    connect,
-    cliAction,
-    accounts,
-    selectedOwner,
-    setSelectedOwner,
-    repos,
-    loadingRepos,
-    refresh,
-    selfHosted,
-  } = useGitHub();
-
-  const [activeTab, setActiveTab] = useState<Tab>(selfHosted ? "local" : "repositories");
-
-  // Auto-select GitHub tab once connected; hide Local tab if not self-hosted
-  useEffect(() => {
-    if (!selfHosted && activeTab === "local") setActiveTab("repositories");
-    if (connected && activeTab === "local") setActiveTab("repositories");
-  }, [selfHosted, connected]);
-
-  const tabs: TabItem[] = [
-    ...(selfHosted ? [{ key: "local" as Tab, label: "Local", icon: FolderOpen }] : []),
-    { key: "repositories", label: "GitHub", icon: Github },
-    { key: "url", label: "Git URL", icon: Link2 },
-    { key: "template", label: "Template", icon: Sparkles },
-  ];
-
-  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">
-
-        {/* ── Header ───────────────────────────────────────────── */}
-        <div className="mb-6">
-          <h1 className="text-2xl font-medium text-foreground/80" style={{ letterSpacing: "-0.2px" }}>
-            New Project
-          </h1>
-          <p className="text-sm text-muted-foreground/70 mt-1">
-            Import a repository, paste a URL, or start from a template
-          </p>
-        </div>
-
-        {/* ── Tabs ─────────────────────────────────────────────── */}
-        <div className="flex items-center gap-1 mb-6">
-          {tabs.map((tab) => {
-            const Icon = tab.icon;
-            return (
-              <button
-                key={tab.key}
-                onClick={() => setActiveTab(tab.key)}
-                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
-                  activeTab === tab.key
-                    ? "bg-foreground text-background"
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
-                }`}
-              >
-                <Icon className="size-4" />
-                {tab.label}
-              </button>
-            );
-          })}
-        </div>
-
-        {/* ── Main Grid ──────────────────────────────────────────── */}
-        <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-6">
-
-          {/* ── LEFT COLUMN ────────────────────────────────────────── */}
-          <div className="space-y-6 min-w-0">
-            {activeTab === "local" ? (
-              <LocalProjects />
-            ) : activeTab === "url" ? (
-              <UrlImport />
-            ) : activeTab === "template" ? (
-              <TemplateGrid />
-            ) : loading ? (
-              <LoadingSkeleton />
-            ) : !connected ? (
-              <ConnectPrompt connecting={connecting} onConnect={connect} cliAction={cliAction} onRefresh={refresh} />
-            ) : (
-              <RepositoryList
-                repos={repos}
-                accounts={accounts}
-                selectedOwner={selectedOwner}
-                setSelectedOwner={setSelectedOwner}
-                loading={loading}
-                loadingRepos={loadingRepos}
-              />
-            )}
-          </div>
-
-          {/* ── RIGHT COLUMN ───────────────────────────────────────── */}
-          <LibrarySidebar connected={connected} selectedOwner={selectedOwner} repos={repos} onSwitchTab={setActiveTab} />
-        </div>
-      </div>
-    </div>
-  );
-}

package/apps/dashboard/src/app/(dashboard)/library/types.ts

@@ -1,26 +0,0 @@
-export interface Repository {
-  id: number;
-  full_name: string;
-  name: string;
-  description: string;
-  private: boolean;
-  stars: number;
-  forks: number;
-  language: string;
-  updated_at: string;
-  default_branch: string;
-  owner: string;
-  html_url?: string;
-  deployed?: string;
-}
-
-export interface Account {
-  login: string;
-  avatar_url: string;
-  type: "User" | "Organization";
-  name?: string;
-}
-
-export type VisibilityFilter = "all" | "public" | "private";
-export type SortBy = "name" | "updated" | "stars";
-

package/apps/dashboard/src/app/(dashboard)/monitoring/page.tsx

@@ -1,3 +0,0 @@
-export default function MonitoringPage() {
-  return <div />;
-}