{/* Accent stripe along the top edge. Uses the type color so the card reads as Standard / Persona Live at a glance. */}

{experience.title || "(untitled)"}

{modeLabel}

{/* Type badge (Standard / Persona Live) — primary visual ID for the card. Status badge moves below. */} {accent.label}

{experience.description || experience.objective || "No description yet."}

{experience.branch_count ?? 0}{" "} {experience.branch_count === 1 ? "branch" : "branches"} • depth {experience.max_depth ?? 0} {experience.updated_at && ( <> • updated {relativeTime(experience.updated_at)} )}

{/* Floating action row (bottom-right), appears on hover/focus so the card's primary intent stays "open editor". Every button stops propagation so clicking them doesn't also open the editor. */}

{/* Delete — ghost icon button. Triggers the parent's confirm modal instead of deleting outright. */} {/* Play — primary pill. */}

); } // ──────────────────────────────────────────────────────────────── // Empty states // ──────────────────────────────────────────────────────────────── function FirstRunEmptyState({ onCreate }: { onCreate: () => void }) { return ( // Onboarding focus: one icon, one headline, one secondary // line, one action. Matches Animate's empty-state rhythm so // both tabs feel like siblings under the HomePilot brand. } title="No projects yet" description="Create your first interactive experience — branching stories, training flows, or lessons." cta={ } size="lg"> Create project } /> ); } function ServiceOffEmptyState({ onCreate }: { onCreate: () => void }) { return ( } title="Your interactive gallery is empty" description={ <> The interactive backend isn't enabled on this server yet. Ask an operator to set{" "}


            INTERACTIVE_ENABLED=true

{" "} and restart the API. Meanwhile, you can still walk through the new-project flow to preview what it looks like. } cta={ } size="lg"> Preview new project flow } /> ); } function AuthRequiredEmptyState({ onRetry }: { onRetry: () => void }) { return ( } title="Sign in to see your interactive projects" description="Projects are owner-scoped, so we need a signed-in user to show them. If you just signed in, retry below — the session cookie sometimes lands a moment late." cta={ }> Try again } /> ); } function HeroEmptyPanel({ icon, title, description, cta, }: { icon: React.ReactNode; title: string; description: React.ReactNode; cta: React.ReactNode; }) { return (

{/* Icon tile picks up a subtle violet tint — matches the purple filmstrip that Animate uses for its empty state, so the two features visibly share a design language. */}

{icon}

{title}

{description}

{cta}

); } function FilteredEmptyState({ onClear }: { onClear: () => void }) { return ( } title="No projects match your filters" description="Try clearing the search query or switching status filters to see more." action={Clear filters} /> ); } // ──────────────────────────────────────────────────────────────── // Loading grid (first paint) // ──────────────────────────────────────────────────────────────── function LoadingGrid() { return (

{Array.from({ length: 6 }).map((_, i) => )}

); } // ──────────────────────────────────────────────────────────────── // Helpers // ──────────────────────────────────────────────────────────────── function humanizeMode(mode: string): string { const map: Record = { sfw_general: "General", sfw_education: "Education", language_learning: "Language learning", enterprise_training: "Enterprise training", social_romantic: "Social / Romantic", mature_gated: "Mature (gated)", }; return map[mode] || mode.replace(/_/g, " "); } function friendlyError(message: string): string { if (!message) return "Unexpected error."; if (/NetworkError|Failed to fetch|Network error/i.test(message)) { return "Couldn't reach the backend. Check your connection or server URL and try again."; } if (/401|not_authenticated/i.test(message)) { return "You're signed out or your API key is missing. Open Settings to fix it."; } if (/503|service_disabled/i.test(message)) { return "The interactive service is currently disabled on this backend."; } return message; } /** A 404 / not_found on /experiences means the interactive router * isn't mounted — INTERACTIVE_ENABLED is off or the backend is an * older build. Distinct from real errors so we can render a * friendly empty state instead of a red alarm. */ function isInteractiveServiceOff(message: string): boolean { return /\b404\b|not[_ ]found/i.test(message); } /** A 401 / not_authenticated means the viewer resolver rejected * the request — cookie missing, expired, or users table has a * profile we can't auto-match. Renders a "sign in" empty state * instead of a raw error. */ function isInteractiveAuthRequired(message: string): boolean { return /\b401\b|not[_ ]authenticated|unauthorized/i.test(message); } function relativeTime(iso: string): string { const then = Date.parse(iso); if (!then || Number.isNaN(then)) return ""; const diffMs = Date.now() - then; const mins = Math.floor(diffMs / 60_000); if (mins < 1) return "just now"; if (mins < 60) return `${mins}m ago`; const hours = Math.floor(mins / 60); if (hours < 24) return `${hours}h ago`; const days = Math.floor(hours / 24); if (days < 30) return `${days}d ago`; const months = Math.floor(days / 30); if (months < 12) return `${months}mo ago`; const years = Math.floor(months / 12); return `${years}y ago`; } export { InteractiveApiError };