singularity-forge/web/components/sf/loading-skeletons.tsx

"use client"

import { Skeleton } from "@/components/ui/skeleton"
import { cn } from "@/lib/utils"

// ─── Dashboard skeletons ──────────────────────────────────────────────────────

function MetricCardSkeleton({ label, icon }: { label: string; icon: React.ReactNode }) {
  return (
    <div className="rounded-md border border-border bg-card p-4">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{label}</p>
          <Skeleton className="mt-2 h-7 w-24" />
          <Skeleton className="mt-1.5 h-3 w-20" />
        </div>
        <div className="shrink-0 rounded-md bg-accent p-2 text-muted-foreground">{icon}</div>
      </div>
    </div>
  )
}

function CurrentUnitCardSkeleton({ icon }: { icon: React.ReactNode }) {
  return (
    <div className="rounded-md border border-border bg-card p-4">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Current Unit</p>
          <Skeleton className="mt-2 h-7 w-20" />
          <Skeleton className="mt-1.5 h-3 w-16" />
        </div>
        <div className="shrink-0 rounded-md bg-accent p-2 text-muted-foreground">{icon}</div>
      </div>
    </div>
  )
}

export function CurrentSliceCardSkeleton() {
  return (
    <div className="rounded-md border border-border bg-card">
      <div className="border-b border-border px-4 py-3">
        <h2 className="text-sm font-semibold">Current Slice</h2>
      </div>
      <div className="space-y-3 p-4">
        {[1, 2, 3].map((i) => (
          <div key={i} className="flex items-center gap-3">
            <Skeleton className="h-4 w-4 shrink-0 rounded-full" />
            <Skeleton className={cn("h-4", i === 1 ? "w-48" : i === 2 ? "w-40" : "w-36")} />
          </div>
        ))}
      </div>
    </div>
  )
}

export function SessionCardSkeleton() {
  return (
    <div className="rounded-md border border-border bg-card">
      <div className="border-b border-border px-4 py-3">
        <h2 className="text-sm font-semibold">Session</h2>
      </div>
      <div className="p-4">
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="flex items-center justify-between text-sm">
              <div className="flex items-center gap-2">
                <Skeleton className="h-3.5 w-3.5 rounded" />
                <span className="text-muted-foreground">{i === 1 ? "Model" : i === 2 ? "Cost" : "Tokens"}</span>
              </div>
              <Skeleton className={cn("h-4", i === 1 ? "w-28" : "w-12")} />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export function RecoveryCardSkeleton() {
  return (
    <div className="rounded-md border border-border bg-card">
      <div className="border-b border-border px-4 py-3">
        <h2 className="text-sm font-semibold">Recovery Summary</h2>
      </div>
      <div className="space-y-4 p-4">
        <div className="space-y-1.5">
          <Skeleton className="h-4 w-44" />
          <Skeleton className="h-3 w-full" />
          <Skeleton className="h-3 w-3/4" />
        </div>
        <div className="space-y-1.5">
          {[1, 2, 3, 4].map((i) => (
            <Skeleton key={i} className={cn("h-3", i % 2 === 0 ? "w-28" : "w-36")} />
          ))}
        </div>
        <Skeleton className="h-9 w-36 rounded-md" />
      </div>
    </div>
  )
}

export function ActivityCardSkeleton() {
  return (
    <div className="rounded-md border border-border bg-card">
      <div className="border-b border-border px-4 py-3">
        <h2 className="text-sm font-semibold">Recent Activity</h2>
      </div>
      <div className="divide-y divide-border">
        {[1, 2, 3, 4].map((i) => (
          <div key={i} className="flex items-center gap-3 px-4 py-2.5">
            <Skeleton className="h-3 w-16 shrink-0" />
            <Skeleton className="h-1.5 w-1.5 shrink-0 rounded-full" />
            <Skeleton className={cn("h-4 flex-1", i % 3 === 0 ? "max-w-xs" : i % 3 === 1 ? "max-w-sm" : "max-w-md")} />
          </div>
        ))}
      </div>
    </div>
  )
}

interface DashboardSkeletonProps {
  icons: {
    Activity: React.ReactNode
    Clock: React.ReactNode
    DollarSign: React.ReactNode
    Zap: React.ReactNode
  }
}

export function DashboardMetricsSkeleton({ icons }: DashboardSkeletonProps) {
  return (
    <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5">
      <CurrentUnitCardSkeleton icon={icons.Activity} />
      <MetricCardSkeleton label="Elapsed Time" icon={icons.Clock} />
      <MetricCardSkeleton label="Total Cost" icon={icons.DollarSign} />
      <MetricCardSkeleton label="Tokens Used" icon={icons.Zap} />
      <MetricCardSkeleton label="Progress" icon={icons.Activity} />
    </div>
  )
}

// ─── Sidebar skeletons ────────────────────────────────────────────────────────

/** Only the data-dependent portion of the sidebar content panel */
export function SidebarDataSkeleton() {
  return (
    <>
      {/* Project path */}
      <Skeleton className="mt-2 h-3 w-36" />

      {/* Scope section */}
      <div className="border-b border-border px-3 py-3">
        <div className="space-y-1.5">
          <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Active scope</p>
          <Skeleton className="h-3.5 w-32" />
          <Skeleton className="h-2.5 w-28" />
        </div>
      </div>

      {/* Milestones list */}
      <div className="flex-1 overflow-y-auto py-1">
        <div className="px-2 py-1.5">
          <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
            Milestones
          </span>
        </div>
        <div className="space-y-0.5 px-1">
          {[1, 2].map((m) => (
            <div key={m}>
              <div className="flex items-center gap-1.5 px-2 py-1.5">
                <Skeleton className="h-4 w-4 shrink-0 rounded" />
                <Skeleton className="h-4 w-4 shrink-0 rounded-full" />
                <Skeleton className={cn("h-4", m === 1 ? "w-40" : "w-32")} />
              </div>
              {m === 1 && (
                <div className="ml-4 space-y-0.5">
                  {[1, 2, 3].map((s) => (
                    <div key={s} className="flex items-center gap-1.5 px-2 py-1.5">
                      <Skeleton className="h-4 w-4 shrink-0 rounded" />
                      <Skeleton className="h-4 w-4 shrink-0 rounded-full" />
                      <Skeleton className={cn("h-3.5", s === 1 ? "w-32" : s === 2 ? "w-28" : "w-24")} />
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </>
  )
}

// ─── Status bar value skeletons ───────────────────────────────────────────────

export function StatusBarValueSkeleton({ width = "w-16" }: { width?: string }) {
  return <Skeleton className={cn("h-3 inline-block", width)} />
}