vibn-frontend/components/project/use-anatomy.ts

"use client";

/**
 * Single-fetch anatomy hook shared by the Product / Hosting tabs.
 * Hardened against silent failure: 10s timeout, error surfacing, and
 * graceful unmount.
 */

import { useEffect, useState } from "react";

export interface Anatomy {
  project: { id: string; name: string; gitea?: string; coolifyProjectUuid?: string };
  codebasesReason?: "no_repo" | "empty_repo";
  product: {
    codebases: Array<{ id: string; label: string; path: string; hint?: string }>;
    images: Array<{
      uuid: string;
      name: string;
      image: string;
      version: string;
      serviceType?: string;
      status?: string;
    }>;
  };
  hosting: {
    live: Array<{
      uuid: string;
      name: string;
      source: "repo" | "image";
      sourceLabel: string;
      status: string;
      fqdn?: string;
      domains: string[];
      branch?: string;
      buildPack?: string;
      lastBuild?: { status: string; finishedAt?: string; commit?: string };
    }>;
    previews: Array<{
      id: string;
      name: string;
      port: number;
      url: string;
      state: string;
      startedAt: string;
    }>;
  };
  infrastructure: { placeholder: true };
}

export interface UseAnatomyResult {
  anatomy: Anatomy | null;
  loading: boolean;
  error: string | null;
  reload: () => void;
}

export function useAnatomy(projectId: string): UseAnatomyResult {
  const [anatomy, setAnatomy] = useState<Anatomy | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [tick, setTick] = useState(0);

  useEffect(() => {
    let cancelled = false;
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 10_000);

    setLoading(true);
    setError(null);

    fetch(`/api/projects/${projectId}/anatomy`, {
      credentials: "include",
      signal: controller.signal,
    })
      .then(async r => {
        let body: unknown = {};
        try { body = await r.json(); } catch { /* keep {} */ }
        if (!r.ok) {
          const msg = (body as { error?: string }).error || `HTTP ${r.status} ${r.statusText}`.trim();
          throw new Error(msg);
        }
        return body as Anatomy;
      })
      .then(data => {
        if (!cancelled) setAnatomy(data);
      })
      .catch(err => {
        if (cancelled) return;
        if (err?.name === "AbortError") setError("Request timed out after 10s.");
        else setError(err?.message || "Failed to load project anatomy");
      })
      .finally(() => {
        clearTimeout(timeout);
        if (!cancelled) setLoading(false);
      });

    return () => {
      cancelled = true;
      controller.abort();
      clearTimeout(timeout);
    };
  }, [projectId, tick]);

  return { anatomy, loading, error, reload: () => setTick(t => t + 1) };
}