npm - @burdenoff/microfe-vibecontrols - Versions diffs - 2026.1008.2 → 2026.1010.2 - Mend

@burdenoff/microfe-vibecontrols 2026.1008.2 → 2026.1010.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1983) hide show

package/dist/pages/AgentsPage.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"AgentsPage.js","names":[],"sources":["../../src/pages/AgentsPage.tsx"],"sourcesContent":["import { useState, useMemo, useRef, useCallback, useEffect } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { Plus, Bot, Grid, List, RefreshCw, Trash2, CheckSquare, XSquare } from 'lucide-react';\nimport { useEventBus } from '@burdenoff/fe-libs/shared/events';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { AnimatePresence } from 'framer-motion';\nimport {\n Button,\n Input,\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogDescription,\n ResponsiveDialogFooter,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n} from '@burdenoff/fe-libs/ui';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { AgentCard, AgentList, AgentForm } from '@/components/agents';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { useDraftEntityTags } from '@/hooks/useDraftEntityTags';\nimport type { Agent } from '@/components/agents';\nimport {\n PageHeader,\n SearchInput,\n FilterDropdown,\n TagFilter,\n EmptyState,\n LoadingState,\n ErrorState,\n AgentSetupBanner,\n QuotaExhaustedDialog,\n GetHelpButton,\n ConfirmDialog,\n} from '@/components/shared';\nimport { notify } from '@/lib/toast';\nimport { useField } from '@/shared/hooks/useField';\nimport { useTr } from '@/shared/hooks/useTr';\nimport { useVibeControls, useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport {\n useListAgentsQuery,\n useVibecontrolsAgentHealthProbesQuery,\n useVibecontrolsAgentHealthProbesLazyQuery,\n useCreateAgentMutation,\n useUpdateAgentMutation,\n useDeleteAgentMutation,\n useAgentHeartbeatMutation,\n useDeactivateAgentMutation,\n useCreateTargetMutation,\n useAddAgentFromTunnelMutation,\n useStartVibecontrolsAgentMutation,\n useStopVibecontrolsAgentMutation,\n useSetupAgentGatewayAuthMutation,\n useListTargetsQuery,\n} from '@/generated/wspace-operations';\nimport { PermissionButton, AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport { deriveAgentStatus, type AgentHealthProbe } from '@/utils/agentStatus';\nimport {\n isQuotaExhaustedError,\n markQuotaHandledLocally,\n getQuotaDialogContent,\n type QuotaKind,\n} from '@/utils/quotaUtils';\nimport { isOnboardingTimeout } from '@/utils/onboardingUtils';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { useVibeControlsStore } from '@/store/vibeControlsStore';\n\ntype ViewMode = 'grid' | 'list';\n\n/**\n * Agents management page with filtering, search, and CRUD operations\n */\nexport function AgentsPage() {\n const { onAgentSelect, workspaceId } = useVibeControls();\n const handleNavigate = useVibeNavigate();\n const bus = useEventBus();\n const { hasPermission, isLoading: permissionsLoading, permissions } = usePermissions();\n const tr = useTr();\n\n const statusOptions = [\n { value: 'all', label: tr('agentsPage.statusAll', 'All Statuses') },\n { value: 'ACTIVE', label: tr('agentsPage.statusActive', 'Active') },\n { value: 'STOPPED', label: tr('agentsPage.statusStopped', 'Stopped') },\n { value: 'OFFLINE', label: tr('agentsPage.statusOffline', 'Offline') },\n ];\n\n const platformOptions = [\n { value: 'all', label: tr('agentsPage.platformAll', 'All Platforms') },\n { value: 'darwin', label: tr('agentsPage.platformMac', 'macOS') },\n { value: 'linux', label: tr('agentsPage.platformLinux', 'Linux') },\n { value: 'windows', label: tr('agentsPage.platformWindows', 'Windows') },\n ];\n\n // Check permissions\n const canListAgents = hasPermission(VIBE_PERMISSIONS.AGENT_LIST);\n\n const [searchQuery, setSearchQuery] = useState('');\n const [statusFilter, setStatusFilter] = useState('all');\n const [platformFilter, setPlatformFilter] = useState('all');\n const [tagFilter, setTagFilter] = useState('all');\n const [viewMode, setViewMode] = useState<ViewMode>('grid');\n const [showCreateForm, setShowCreateForm] = useState(false);\n const [isCreating, setIsCreating] = useState(false);\n\n // Auto-open Add Agent modal when arriving via /agents/new or /agents?create=true\n // (dashboard widgets, deep links). Strip the param after opening so the back\n // button returns to the previous page instead of re-opening.\n const [searchParams, setSearchParams] = useSearchParams();\n useEffect(() => {\n if (searchParams.get('create') === 'true') {\n setShowCreateForm(true);\n const next = new URLSearchParams(searchParams);\n next.delete('create');\n setSearchParams(next, { replace: true });\n }\n }, [searchParams, setSearchParams]);\n const [editTunnelAgent, setEditTunnelAgent] = useState<Agent | null>(null);\n const [isSavingTunnel, setIsSavingTunnel] = useState(false);\n // Per-agent \"connecting\" overlay shown after Edit Tunnel save while the\n // backend pushes OAuth creds → agent finalize() → /health/ready flips to\n // ok. State lives in the global store (vibeControlsStore) so the overlay\n // survives navigation to AgentDetailsPage and back — the documented\n // recovery path navigates into the details page so pushAgentGatewayAuth\n // auto-recovery can fire, and storing the set in local React state used\n // to discard it on unmount, causing a CONNECTING → DEGRADED → ACTIVE\n // flicker on return.\n const connectingAgents = useVibeControlsStore((s) => s.connectingAgents);\n const markAgentConnecting = useVibeControlsStore((s) => s.markAgentConnecting);\n const clearAgentConnecting = useVibeControlsStore((s) => s.clearAgentConnecting);\n const connectingAgentIds = useMemo(\n () => new Set(Object.keys(connectingAgents)),\n [connectingAgents]\n );\n\n // Delayed refetch timers scheduled after a pending (timed-out) onboarding, so\n // the background-created agent appears on its own. Tracked in a ref and\n // cleared on unmount so they don't fire against a stale query hook (BOFF-6303).\n const onboardingRefetchTimersRef = useRef<ReturnType<typeof setTimeout>[]>([]);\n useEffect(() => {\n const timers = onboardingRefetchTimersRef.current;\n return () => {\n for (const t of timers) clearTimeout(t);\n };\n }, []);\n\n // 30s safety net — if a probe never reports healthy, drop the overlay\n // so the user eventually sees the real DEGRADED state.\n const connectingTimersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());\n useEffect(() => {\n const timers = connectingTimersRef.current;\n for (const agentId of Object.keys(connectingAgents)) {\n if (timers.has(agentId)) continue;\n const timer = setTimeout(() => {\n clearAgentConnecting(agentId);\n timers.delete(agentId);\n }, 30_000);\n timers.set(agentId, timer);\n }\n // Drop timers for agents no longer marked connecting.\n for (const [agentId, timer] of timers.entries()) {\n if (!(agentId in connectingAgents)) {\n clearTimeout(timer);\n timers.delete(agentId);\n }\n }\n return () => {\n for (const timer of timers.values()) clearTimeout(timer);\n timers.clear();\n };\n }, [connectingAgents, clearAgentConnecting]);\n const [disconnectConfirmAgent, setDisconnectConfirmAgent] = useState<Agent | null>(null);\n const [isDisconnecting, setIsDisconnecting] = useState(false);\n const tunnelUrlRef = useRef<HTMLInputElement>(null);\n const tunnelUrlField = useField({\n hint: tr(\n 'agentsPage.tunnelUrlHint',\n 'Leave empty to clear. Agents with auto-tunnel report this automatically on startup.'\n ),\n });\n\n // Bulk selection state\n const [selectedAgentIds, setSelectedAgentIds] = useState<Set<string>>(new Set());\n const [bulkLoading, setBulkLoading] = useState(false);\n const [bulkDeleteConfirmOpen, setBulkDeleteConfirmOpen] = useState(false);\n // Per-kind so the dialog copy (\"Agent Quota Reached\" vs \"Target Quota\n // Reached\") matches what the user just tried to create. The page hosts\n // both the agent-create form and the inline target-create row, so a\n // single boolean would mislabel one of them.\n const [quotaExhaustedKind, setQuotaExhaustedKind] = useState<QuotaKind | null>(null);\n\n const [createAgent] = useCreateAgentMutation({ refetchQueries: ['ListAgents'] });\n const { setDraftTagIds: setAgentDraftTagIds, flushTags: flushAgentTags } =\n useDraftEntityTags('VIBECONTROLS_AGENT');\n const [addAgentFromTunnel] = useAddAgentFromTunnelMutation({ refetchQueries: ['ListAgents'] });\n const [agentHeartbeat] = useAgentHeartbeatMutation({ refetchQueries: ['ListAgents'] });\n const [deactivateAgent] = useDeactivateAgentMutation({ refetchQueries: ['ListAgents'] });\n const [startAgentMutation] = useStartVibecontrolsAgentMutation({\n refetchQueries: ['ListAgents'],\n });\n const [stopAgentMutation] = useStopVibecontrolsAgentMutation({ refetchQueries: ['ListAgents'] });\n const [setupGatewayAuth] = useSetupAgentGatewayAuthMutation({\n refetchQueries: ['ListAgents'],\n });\n\n const { refetch: refetchInitialData } = useCachedInitialData();\n const {\n data: targetsData,\n loading: targetsLoading,\n refetch: refetchTargets,\n } = useListTargetsQuery({\n // Bound the list: this query hydrates per-target agents, so leaving it\n // unbounded was the heaviest contributor to slow Agents/Targets loads (the\n // 25s OPERATION_TIMEOUT class). AgentsPage only needs targets for the\n // \"Add Agent\" picker / hasTargets flag, so a page of 50 is plenty.\n variables: { workspaceId: workspaceId ?? '', limit: 50, offset: 0 },\n skip: !workspaceId,\n fetchPolicy: 'cache-and-network',\n });\n const targetsList = targetsData?.targets?.items ?? [];\n const hasTargets = targetsList.length > 0;\n const [updateAgent] = useUpdateAgentMutation({ refetchQueries: ['ListAgents'] });\n const [deleteAgent] = useDeleteAgentMutation({ refetchQueries: ['ListAgents'] });\n // refetchQueries + awaitRefetchQueries: the inline create flow used to fire\n // refetchInitialData() without awaiting it, so AgentForm closed and\n // re-rendered against stale `cachedTargets` — the new target only appeared\n // on full page reload. Awaiting the underlying queries here makes the\n // mutation resolve only after the initial-data + targets caches are fresh.\n const [createTargetMutation] = useCreateTargetMutation({\n refetchQueries: ['VibeControlsInitialData', 'ListTargets'],\n awaitRefetchQueries: true,\n });\n\n /**\n * Inline DIRECT target creation callback for the AgentForm. Returns\n * the newly created target so the form can auto-select it.\n */\n const handleInlineCreateTarget = useCallback(\n async (targetName: string) => {\n if (!workspaceId || !targetName.trim()) return null;\n try {\n // errorPolicy: 'all' (shell Apollo client) puts server errors on\n // `result.error` instead of rejecting — read both paths so quota\n // errors don't silently fall back to the generic inline copy.\n const result = await createTargetMutation({\n variables: {\n workspaceId,\n input: {\n type: 'DIRECT',\n name: targetName.trim(),\n },\n },\n });\n if (result.error && isQuotaExhaustedError(result.error)) {\n // Open the upgrade-your-plan modal at this level and re-throw\n // so AgentForm's catch sees a quota error rather than a\n // silent null (which it would otherwise render as a vague\n // \"Failed to create target. Please try again.\" inline string).\n markQuotaHandledLocally();\n setQuotaExhaustedKind('target');\n throw result.error;\n }\n const created = result.data?.createTarget;\n if (!created) return null;\n refetchInitialData();\n void refetchTargets();\n return {\n id: created.id,\n name: created.name,\n type: created.type ?? 'DIRECT',\n status: created.status ?? 'unknown',\n };\n } catch (err) {\n if (isQuotaExhaustedError(err)) {\n markQuotaHandledLocally();\n setQuotaExhaustedKind('target');\n throw err;\n }\n return null;\n }\n },\n [createTargetMutation, refetchInitialData, refetchTargets, workspaceId]\n );\n\n // Fetch agents from GraphQL API\n // Skip until a workspace is selected: the resolver requires\n // x-workspace-id and throws \"Workspace context required\" when fired\n // before the auth provider has resolved a workspace (URL with ?org but\n // no &workspace, post-context-switcher self-heal, etc.). Without this\n // skip, the page lands on \"Failed to load agents\" and never recovers\n // because Apollo's errorPolicy: 'all' returns the error and doesn't\n // auto-refetch when workspaceId becomes available.\n const { data, loading, error, refetch } = useListAgentsQuery({\n variables: {\n filter: {\n isActive: statusFilter === 'ACTIVE' ? true : statusFilter === 'OFFLINE' ? false : undefined,\n platform: platformFilter !== 'all' ? platformFilter : undefined,\n },\n pagination: { limit: 100 },\n },\n fetchPolicy: 'cache-first',\n skip: !workspaceId,\n });\n\n // Live deep-health probe — backend hits /health/ready on every agent and\n // returns per-agent { healthy, errorMessage }. Polled every 30s so stale\n // tunnels (cloudflared dead, agent crashed but `isActive` still true)\n // flip the badge to DEGRADED before users hit \"create session\" against\n // an unreachable agent.\n // Query once on mount and poll as the live-enough source. The federated\n // subscription currently fails through the production gateway with\n // SUBREQUEST_HTTP_ERROR (GET/HEAD/OPTIONS request with body), which turns\n // the Agents page into repeated 500 toasts even though the probe query works.\n // The lazy variant is kept solely so the Refresh button can force an\n // immediate fetch without changing the auto-fired hook's variables.\n // Defer the probe query until after first paint so the probe fetch leaves the critical path. The agent list\n // renders immediately (deriveAgentStatus shows REGISTERING while probesLoading)\n // and statuses load in a tick later.\n const [probesDeferred, setProbesDeferred] = useState(false);\n useEffect(() => {\n const t = window.setTimeout(() => setProbesDeferred(true), 0);\n return () => window.clearTimeout(t);\n }, []);\n const probeQuery = useVibecontrolsAgentHealthProbesQuery({\n fetchPolicy: 'cache-and-network',\n nextFetchPolicy: 'cache-first',\n notifyOnNetworkStatusChange: true,\n skip: !workspaceId || !probesDeferred,\n pollInterval: 60_000,\n });\n const [refetchProbes] = useVibecontrolsAgentHealthProbesLazyQuery({\n fetchPolicy: 'network-only',\n });\n // True when no probe data has been delivered for this mount cycle yet.\n // Used by deriveAgentStatus to show REGISTERING for agents we have not\n // yet probed (instead of optimistically ACTIVE).\n const probesLoading = probeQuery.data === undefined;\n const probesById = useMemo(() => {\n const m = new Map<string, AgentHealthProbe>();\n const probes = probeQuery.data?.vibecontrolsAgentHealthProbes ?? [];\n for (const p of probes) {\n m.set(p.agentId, {\n agentId: p.agentId,\n healthy: p.healthy,\n errorMessage: p.errorMessage,\n });\n }\n return m;\n }, [probeQuery.data]);\n\n // Map GraphQL response to Agent type\n const agents: Agent[] = useMemo(() => {\n const rawAgents = data?.vibecontrolsAgents ?? [];\n return rawAgents.map((agent: NonNullable<typeof rawAgents>[number]) => ({\n id: agent.id,\n workspaceId: agent.workspaceId,\n name: agent.name,\n hostname: agent.hostname,\n platform: agent.platform,\n architecture: agent.architecture,\n version: agent.version,\n isActive: agent.isActive,\n status: connectingAgentIds.has(agent.id)\n ? ('CONNECTING' as const)\n : deriveAgentStatus(\n {\n id: agent.id,\n isActive: agent.isActive,\n metadata: agent.metadata as Record<string, unknown> | null,\n },\n probesById,\n { probesLoading }\n ),\n // Prefer the live health probe error. When the live probe didn't run\n // (or returned ok) but the agent's most-recent gateway-auth push\n // failed, surface that instead — otherwise the only signal of a\n // failed onboarding is a yellow Degraded badge with no hover text.\n // `pending` is hidden: it just means the async finalize is still\n // running and the badge already shows the right transient state.\n healthError:\n probesById.get(agent.id)?.errorMessage ??\n (agent.lastGatewayAuthPushStatus === 'failed'\n ? (agent.lastGatewayAuthPushError ?? 'Gateway-auth push failed')\n : null),\n lastHeartbeat: agent.lastHeartbeat || null,\n tunnelUrl: agent.tunnelUrl ?? null,\n tunnelStatus: agent.tunnelStatus ?? null,\n configuration: (agent.configuration as Record<string, unknown>) || {},\n capabilities: Array.isArray(agent.capabilities)\n ? (agent.capabilities as string[])\n : typeof agent.capabilities === 'object' && agent.capabilities !== null\n ? (() => {\n const obj = agent.capabilities as Record<string, unknown>;\n const keys = Object.keys(obj);\n // When capabilities was serialized from an array, keys are numeric (\"0\",\"1\",\"2\")\n // In that case, extract values (the actual capability names) instead of keys\n const hasNumericKeys = keys.length > 0 && keys.every((k) => /^\\d+$/.test(k));\n return hasNumericKeys ? (Object.values(obj) as string[]) : (keys as string[]);\n })()\n : [],\n metadata: (agent.metadata as Record<string, unknown>) || {},\n createdAt: agent.createdAt,\n updatedAt: agent.updatedAt,\n // BOFF-6394 — drives the Private/Shared badge on the card and list row.\n ownerUserId: agent.ownerUserId ?? null,\n visibility: agent.visibility ?? null,\n tagAssignments: (agent.tagAssignments ?? []).map(\n (a: NonNullable<typeof agent.tagAssignments>[number]) => ({\n id: a.id,\n tagId: a.tagId,\n tag: a.tagInfo\n ? {\n id: a.tagInfo.id,\n key: a.tagInfo.key ?? null,\n label: a.tagInfo.label ?? null,\n color: a.tagInfo.color ?? null,\n }\n : null,\n })\n ),\n }));\n }, [data?.vibecontrolsAgents, probesById, probesLoading, connectingAgentIds]);\n\n // Clear CONNECTING overlay only when ALL of these hold:\n // 1. The live probe reports `healthy: true` (deep-health probe, which\n // already gates on session.ok + tunnel.ok + ttyd.ok server-side —\n // see probeAgentHealth in wspace-vibecontrols-svc).\n // 2. The grace-window timestamp stored at markAgentConnecting time has\n // elapsed. This defends against a STALE `healthy:true` probe\n // delivered from the Apollo cache during the in-flight refetch\n // that follows updateAgent — without the grace window, that stale\n // cache hit cleared CONNECTING immediately and the next (fresh,\n // transient) probe landing during cloudflared restart flipped the\n // badge to DEGRADED, producing the CONNECTING → DEGRADED → ACTIVE\n // flicker reported by users.\n //\n // Re-runs on `probesById` updates AND on a one-shot timer per pending\n // agent so the clear fires automatically once the grace window elapses\n // even if no new probe arrives.\n useEffect(() => {\n const pending = Object.keys(connectingAgents);\n if (pending.length === 0) return;\n const now = Date.now();\n let earliestPending = Infinity;\n for (const agentId of pending) {\n const minClearAt = connectingAgents[agentId];\n if (minClearAt === undefined) continue;\n const probe = probesById.get(agentId);\n if (probe?.healthy === true && now >= minClearAt) {\n clearAgentConnecting(agentId);\n } else if (minClearAt < earliestPending) {\n earliestPending = minClearAt;\n }\n }\n if (earliestPending === Infinity) return;\n const wait = Math.max(0, earliestPending - now) + 50;\n const tick = setTimeout(() => {\n // No-op state poke — the dependency on `connectingAgents` causes\n // this effect to re-run when state changes, but a healthy probe\n // arriving BEFORE the grace window elapses needs a re-evaluation\n // when the window finally closes. Re-marking with graceMs=0 is a\n // no-op when the entry is already past its window; if cleared in\n // the meantime, the early `pending.length === 0` short-circuit\n // makes this safe.\n const fresh = useVibeControlsStore.getState().connectingAgents;\n for (const agentId of Object.keys(fresh)) {\n const minClearAt = fresh[agentId];\n if (minClearAt === undefined) continue;\n const probe = probesById.get(agentId);\n if (probe?.healthy === true && Date.now() >= minClearAt) {\n clearAgentConnecting(agentId);\n }\n }\n }, wait);\n return () => clearTimeout(tick);\n }, [probesById, connectingAgents, clearAgentConnecting]);\n\n // Filter agents based on search and tag (client-side filtering).\n // Status / platform filters are applied server-side via the GraphQL filter\n // input above; these client-side filters compose on top of that result set.\n const filteredAgents = useMemo(() => {\n return agents.filter((agent) => {\n // Search filter\n if (searchQuery) {\n const query = searchQuery.toLowerCase();\n const matchesSearch =\n agent.name.toLowerCase().includes(query) ||\n agent.hostname?.toLowerCase().includes(query) ||\n agent.id.toLowerCase().includes(query);\n if (!matchesSearch) return false;\n }\n\n // Tag filter — match against structured tagAssignments (UUIDs).\n // Never falls back to the legacy free-text agent.tags array because\n // those values are not the same as tagFilterIds and would silently\n // produce empty results (the failure mode that got the previous\n // TagFilter implementation removed in commit 4e101ca).\n if (tagFilter !== 'all') {\n const hasTag = (agent.tagAssignments ?? []).some(\n (a: { tagId: string }) => a.tagId === tagFilter\n );\n if (!hasTag) return false;\n }\n\n return true;\n });\n }, [agents, searchQuery, tagFilter]);\n\n const handleAgentSelect = (agent: Agent) => {\n // Navigate to agent details page\n handleNavigate(`/agents/${agent.id}`);\n // Also call the shell callback if provided\n onAgentSelect?.({\n id: agent.id,\n name: agent.name,\n type: agent.platform || 'unknown',\n status: agent.status || (agent.isActive ? 'ACTIVE' : 'OFFLINE'),\n });\n };\n\n const handleCreateAgent = () => {\n setShowCreateForm(true);\n bus.emitCustom('vibecontrols.agent.register_clicked', {\n workspaceId: workspaceId ?? undefined,\n });\n };\n\n const handleCreateAgentSubmit = async (\n formData: Record<string, unknown>\n ): Promise<{ id: string } | { pending: true } | void> => {\n try {\n setIsCreating(true);\n\n const tunnelUrl = (formData.tunnelUrl as string | undefined)?.trim();\n const agentApiKey = (formData.agentApiKey as string | undefined)?.trim();\n\n // Zero-config path: operator pasted the agent's tunnel URL + API key\n // shown in its startup banner. Backend probes the agent, registers it,\n // mints an OAuth app, and pushes credentials — the agent promotes\n // itself to `ready` inside that final POST /api/agent/gateway-auth.\n if (tunnelUrl && agentApiKey) {\n const result = await addAgentFromTunnel({\n variables: {\n input: {\n tunnelUrl,\n apiKey: agentApiKey,\n ...(formData.name ? { name: formData.name as string } : {}),\n ...(formData.targetId ? { targetId: formData.targetId as string } : {}),\n },\n },\n });\n if (result.error) throw result.error;\n const payload = result.data?.addVibecontrolsAgentFromTunnel;\n if (!payload?.success) {\n throw new Error(\n payload?.error || 'Failed to onboard agent — probe or OAuth setup failed.'\n );\n }\n if (payload.agent?.id) {\n await flushAgentTags(payload.agent.id);\n bus.emitCustom('vibecontrols.agent.registered', {\n workspaceId: workspaceId ?? undefined,\n agentId: payload.agent.id,\n });\n bus.emitCustom('vibecontrols.agent.gateway_auth_setup', {\n workspaceId: workspaceId ?? undefined,\n agentId: payload.agent.id,\n });\n return { id: payload.agent.id };\n }\n throw new Error('Agent onboarding returned no agent record.');\n }\n\n // Legacy manual path — operator typed hostname/platform/etc directly.\n const result = await createAgent({\n variables: {\n input: {\n name: formData.name as string,\n hostname: formData.hostname as string,\n platform: formData.platform as string,\n architecture: formData.architecture as string,\n version: formData.version as string,\n ...(formData.targetId ? { targetId: formData.targetId as string } : {}),\n ...(formData.tunnelUrl ? { tunnelUrl: formData.tunnelUrl as string } : {}),\n ...(formData.tunnelStatus ? { tunnelStatus: formData.tunnelStatus as string } : {}),\n },\n },\n });\n\n const createdAgent = result.data?.createVibecontrolsAgent;\n if (createdAgent?.id) {\n await flushAgentTags(createdAgent.id);\n bus.emitCustom('vibecontrols.agent.registered', {\n workspaceId: workspaceId ?? undefined,\n agentId: createdAgent.id,\n });\n return { id: createdAgent.id };\n }\n\n if (result.error) {\n throw result.error;\n }\n\n throw new Error('Agent creation failed — no data returned from the server.');\n } catch (err) {\n if (isQuotaExhaustedError(err)) {\n markQuotaHandledLocally();\n setQuotaExhaustedKind('agent');\n setShowCreateForm(false);\n bus.emitCustom('vibecontrols.quota.agent_limit_hit', {\n workspaceId: workspaceId ?? undefined,\n });\n return;\n }\n\n // Zero-config onboarding can outlive the gateway's operation timeout on a\n // very cold quick tunnel. The agent still provisions in the background and\n // comes online on its own, so surface this as \"still setting up\" rather\n // than a failure and show the form's friendly notice. (BOFF-6303)\n //\n // The agent row is committed slightly AFTER the gateway times out, and\n // this page's ListAgents query does not poll — so a single immediate\n // refetch can return the stale list and the agent would only appear on a\n // manual refresh. Fire a short burst of refetches across the agent's\n // ~90s finalize window so it shows up on its own without user action.\n if (isOnboardingTimeout(err)) {\n void refetch();\n for (const delayMs of [5000, 15000, 30000, 60000, 90000]) {\n const timer = setTimeout(() => {\n void refetch();\n }, delayMs);\n onboardingRefetchTimersRef.current.push(timer);\n }\n return { pending: true as const };\n }\n\n console.error('Failed to create agent:', err);\n throw err;\n } finally {\n setIsCreating(false);\n }\n };\n\n const handleStartAgent = async (agent: Agent) => {\n try {\n const result = await startAgentMutation({ variables: { agentId: agent.id } });\n const payload = result.data?.startVibecontrolsAgent;\n\n // Smart fallback: an agent in bootState=awaiting-config rejects\n // lifecycle/start with \"Agent not yet configured\" because it has\n // no OAuth credentials yet. The right recovery is\n // setupAgentGatewayAuth (the same mutation behind the\n // \"Re-push credentials\" button on the Security tab). Fire it\n // automatically so a single Reconnect click handles both the\n // common case and the awaiting-config case.\n if (!payload?.success) {\n const needsConfig = /not yet configured|awaiting[-\\s_]config/i.test(payload?.error ?? '');\n if (needsConfig) {\n const setupResult = await setupGatewayAuth({\n variables: { input: { agentId: agent.id } },\n });\n const setup = setupResult.data?.setupAgentGatewayAuth;\n if (setup?.error) {\n throw new Error(\n `Agent needs credentials. Auto re-push failed: ${setup.error}. Try \"Re-push credentials\" in Security tab.`\n );\n }\n if (!setup) {\n throw new Error(\n 'Agent needs credentials. Auto re-push returned no result. Try \"Re-push credentials\" in Security tab.'\n );\n }\n // `setupAgentGatewayAuth.error` is null when the OAuth app +\n // devportal app are created successfully, but the credentials\n // PUSH to the agent's tunnel can still fail downstream (the\n // svc records this as `lastGatewayAuthPushStatus: \"failed\"` +\n // `lastGatewayAuthPushError` on the agent row). The push fails\n // when the agent's finalize() hangs trying to authenticate\n // against gateway URLs it can't reach — most commonly when an\n // agent is registered against a workspace whose gateway URLs\n // are dev-local (e.g. *.local.burdenoff.com) and the agent\n // runs on a different machine. Surface that specific failure\n // rather than claiming success.\n const pushStatus = setup.agent?.lastGatewayAuthPushStatus;\n const pushError = setup.agent?.lastGatewayAuthPushError;\n if (pushStatus === 'failed') {\n throw new Error(\n `Credentials created but push to agent tunnel failed: ${\n pushError || 'unknown error'\n }. Check that the agent can reach the workspace's gateway URLs from its host network.`\n );\n }\n // PR #136 review (claude MEDIUM BUG): setupAgentGatewayAuth\n // pushes creds → agent finalize → bootState=ready. But that\n // doesn't call lifecycle/start. If the agent was previously\n // STOPPED (not just awaiting-config), it'd be credentialed\n // but not running, while the toast claimed \"and started\".\n // Retry the original lifecycle/start now that the agent\n // should have left awaiting-config; surface its outcome\n // explicitly so the toast doesn't lie either way.\n const retryResult = await startAgentMutation({\n variables: { agentId: agent.id },\n });\n const retryPayload = retryResult.data?.startVibecontrolsAgent;\n if (!retryPayload?.success) {\n throw new Error(\n `Credentials pushed but lifecycle/start failed: ${\n retryPayload?.error || 'unknown error'\n }. The agent has fresh credentials; try clicking Reconnect again or check vibe status on the host.`\n );\n }\n bus.emitCustom('vibecontrols.agent.gateway_auth_setup', {\n workspaceId: workspaceId ?? undefined,\n agentId: agent.id,\n });\n await agentHeartbeat({ variables: { id: agent.id } });\n notify.success(`Agent \"${agent.name}\" re-credentialed and started.`);\n return;\n }\n throw new Error(payload?.error || 'Failed to start agent');\n }\n\n await agentHeartbeat({ variables: { id: agent.id } });\n notify.success(`Agent \"${agent.name}\" started`);\n } catch (err) {\n console.error('Failed to start agent:', err);\n notify.error(err instanceof Error ? err.message : 'Failed to start agent');\n }\n };\n\n // NOTE: Stop and Disconnect both call deactivateVibecontrolsAgent and produce the same\n // server-side list state (isActive: false). The distinction is that Disconnect additionally\n // clears tunnel fields (tunnelUrl, tunnelStatus). When a dedicated stopVibecontrolsAgent\n // mutation succeeds, we still deactivate in workspace state so the list reflects the agent as offline.\n const handleStopAgent = async (agent: Agent) => {\n try {\n const result = await stopAgentMutation({ variables: { agentId: agent.id } });\n const payload = result.data?.stopVibecontrolsAgent;\n\n if (!payload?.success) {\n throw new Error(payload?.error || 'Failed to stop agent');\n }\n\n await deactivateAgent({ variables: { id: agent.id } });\n notify.success(`Agent \"${agent.name}\" stopped`);\n } catch (err) {\n console.error('Failed to stop agent:', err);\n notify.error(err instanceof Error ? err.message : 'Failed to stop agent');\n }\n };\n\n const handleDisconnectAgent = (agent: Agent) => {\n setDisconnectConfirmAgent(agent);\n };\n\n const handleConfirmDisconnect = async () => {\n if (!disconnectConfirmAgent) return;\n const agent = disconnectConfirmAgent;\n setIsDisconnecting(true);\n // Deactivate + clear tunnel info so the agent appears fully disconnected.\n // Two sequential mutations with refetchQueries suppressed — a single refetch()\n // is called after both complete so the list doesn't flash with stale tunnel fields.\n // A single atomic disconnectVibecontrolsAgent backend mutation that handles\n // both deactivation and tunnel field clearing is tracked in vibecontrols-svc\n // backlog; until then the two-step approach below is the supported flow.\n try {\n await deactivateAgent({ variables: { id: agent.id }, refetchQueries: [] });\n } catch (err) {\n console.error('Failed to deactivate agent:', err);\n notify.error(err instanceof Error ? err.message : 'Failed to disconnect agent');\n setIsDisconnecting(false);\n setDisconnectConfirmAgent(null);\n // Early-return path: refetch here so the list reflects the deactivated state,\n // then return so the bottom refetch below does not also fire.\n await refetch();\n return;\n }\n try {\n // F4 Wave B: `agentApiKey` is no longer part of\n // `UpdateVibecontrolsAgentInput`. Clearing the tunnel fields is\n // enough — the secret is owned by the agent itself, not the svc.\n await updateAgent({\n variables: {\n id: agent.id,\n input: { tunnelUrl: null, tunnelStatus: null },\n },\n refetchQueries: [],\n });\n notify.success(`Agent \"${agent.name}\" disconnected`);\n } catch (err) {\n console.error('Failed to clear tunnel fields:', err);\n notify.error(\n `Agent marked offline, but failed to clear connection fields — clear them manually in Settings.`\n );\n }\n setIsDisconnecting(false);\n setDisconnectConfirmAgent(null);\n // Both updateAgent success and updateAgent failure reach here — single refetch covers both.\n await refetch();\n };\n\n const handleConfigureAgent = (agent: Agent) => {\n // Navigate to agent details page (settings tab)\n handleNavigate(`/agents/${agent.id}`);\n };\n\n const handleEditTunnelUrl = (agent: Agent) => {\n setEditTunnelAgent(agent);\n };\n\n const handleSaveTunnelSettings = async () => {\n if (!editTunnelAgent) return;\n const agentId = editTunnelAgent.id;\n const newUrl = tunnelUrlRef.current?.value?.trim() || '';\n try {\n setIsSavingTunnel(true);\n // TODO(svc): rotate-API-key flow needs a dedicated svc mutation —\n // `UpdateVibecontrolsAgentInput.agentApiKey` was dropped by F4\n // Wave B. The Edit Tunnel dialog only updates the URL now.\n await updateAgent({\n variables: {\n id: agentId,\n input: {\n tunnelUrl: newUrl || null,\n tunnelStatus: newUrl ? 'ACTIVE' : null,\n },\n },\n // Force a fresh probe immediately so the badge resolves to the\n // real state (instead of relying on the 30s subscription cadence).\n refetchQueries: ['ListAgents', 'VibecontrolsAgentHealthProbes'],\n });\n // Begin the \"Connecting…\" overlay BEFORE clearing the dialog so the\n // operator sees an unbroken progress signal: dialog spinner →\n // CONNECTING badge with spinner → ACTIVE / DEGRADED.\n if (newUrl) markAgentConnecting(agentId);\n setEditTunnelAgent(null);\n } catch (err) {\n console.error('Failed to update tunnel settings:', err);\n } finally {\n setIsSavingTunnel(false);\n }\n };\n\n // ── Bulk Selection ─────────────────────────────────────────────────\n const toggleAgentSelection = useCallback((agentId: string) => {\n setSelectedAgentIds((prev) => {\n const next = new Set(prev);\n if (next.has(agentId)) {\n next.delete(agentId);\n } else {\n next.add(agentId);\n }\n return next;\n });\n }, []);\n\n const selectAllAgents = useCallback(() => {\n setSelectedAgentIds(new Set(filteredAgents.map((a) => a.id)));\n }, [filteredAgents]);\n\n const deselectAllAgents = useCallback(() => {\n setSelectedAgentIds(new Set());\n }, []);\n\n const isAllSelected =\n filteredAgents.length > 0 && selectedAgentIds.size === filteredAgents.length;\n const hasSelection = selectedAgentIds.size > 0;\n\n // ── Bulk Delete ──────────────────────────────────────────────────\n // Confirmation happens through the ConfirmDialog rendered below\n // (bulkDeleteConfirmOpen) — this handler runs only after the user\n // confirms there.\n const handleBulkDelete = useCallback(async () => {\n if (selectedAgentIds.size === 0) return;\n\n setBulkLoading(true);\n try {\n const results = await Promise.allSettled(\n Array.from(selectedAgentIds).map((id) => deleteAgent({ variables: { id } }))\n );\n const succeeded = results.filter((r) => r.status === 'fulfilled').length;\n const failed = results.filter((r) => r.status === 'rejected').length;\n if (failed > 0) {\n notify.error(\n `Removed ${succeeded}, failed to remove ${failed} agent${failed !== 1 ? 's' : ''}`\n );\n } else {\n notify.success(`Removed ${succeeded} agent${succeeded !== 1 ? 's' : ''}`);\n }\n setSelectedAgentIds(new Set());\n } catch (err) {\n notify.error(err instanceof Error ? err.message : 'Failed to remove agents');\n } finally {\n setBulkLoading(false);\n setBulkDeleteConfirmOpen(false);\n }\n }, [selectedAgentIds, deleteAgent]);\n\n // Stats\n //\n // \"online\" must mean the same thing the per-agent badge shows. The badge is\n // driven by `deriveAgentStatus` (live /health/ready probe + lifecycleState),\n // not by the persisted `isActive` flag — which is sticky: the backend sets it\n // true on every heartbeat but never flips it false when heartbeats stop, so a\n // stopped/crashed agent stays `isActive: true` indefinitely. Counting\n // `isActive` here is what produced \"2 of 2 agents online\" while both cards\n // showed DEGRADED. Count the derived status instead so the header and the\n // cards can never disagree.\n const stats = {\n total: agents.length,\n active: agents.filter((a) => a.status === 'ACTIVE').length,\n offline: agents.filter((a) => a.status !== 'ACTIVE').length,\n };\n\n // Guard states rendered inside MotionPage to prevent unmount/remount animation replay\n if (permissionsLoading) {\n return (\n <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-full\">\n <LoadingState message={tr('agentsPage.loadingPermissions', 'Loading permissions...')} />\n </MotionPage>\n );\n }\n\n if (permissions && permissions.permissionStrings?.length > 0 && !canListAgents) {\n return (\n <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-full\">\n <AccessDenied\n title={tr('agentsPage.accessDeniedTitle', 'Access Denied')}\n description={tr(\n 'agentsPage.accessDeniedDescription',\n \"You don't have permission to view agents. Contact your workspace administrator for access.\"\n )}\n />\n </MotionPage>\n );\n }\n\n if (error && agents.length === 0) {\n return (\n <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-full\">\n <ErrorState\n title={tr('agentsPage.failedLoad', 'Failed to load agents')}\n message={error.message}\n onRetry={() => refetch()}\n />\n </MotionPage>\n );\n }\n\n return (\n <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-full\">\n <PageHeader\n title={tr('agentsPage.title', 'Agents')}\n description={tr('agentsPage.descriptionOnline', '{{active}} of {{total}} agents online', {\n active: stats.active,\n total: stats.total,\n })}\n actions={\n <div className=\"flex w-full flex-col items-end gap-2 sm:w-auto sm:flex-row sm:items-center\">\n <button\n type=\"button\"\n onClick={() => {\n // Refresh both the agent list AND the live deep-health\n // probe so the badge reflects current state, not a stale\n // initial probe captured while the agent was still\n // booting. Without re-probing here the user clicks the\n // refresh icon and the row's name/tunnel reload but the\n // DEGRADED badge stays stuck until the next 30s tick.\n refetch();\n void refetchProbes();\n }}\n disabled={loading || probeQuery.loading}\n className=\"flex items-center justify-center gap-2 px-3 py-2 max-md:min-h-11 max-md:min-w-11 text-text-secondary hover:bg-bg-sunken hover:text-text-primary rounded-button transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n aria-label={tr('agentsPage.refreshTitle', 'Refresh agents')}\n title={tr('agentsPage.refreshTitle', 'Refresh agents')}\n >\n <RefreshCw\n aria-hidden=\"true\"\n className={`size-4 ${loading || probeQuery.loading ? 'animate-spin' : ''}`}\n />\n </button>\n {hasTargets ? (\n <PermissionButton\n permission={VIBE_PERMISSIONS.AGENT_CREATE}\n deniedBehavior=\"disable\"\n deniedTooltip={tr(\n 'agentsPage.deniedCreateTooltip',\n \"You don't have permission to create agents\"\n )}\n >\n <button\n type=\"button\"\n onClick={handleCreateAgent}\n className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n <Plus className=\"size-4\" />\n {tr('agentsPage.addAgent', 'Add Agent')}\n </button>\n </PermissionButton>\n ) : (\n /* No targets yet — still open Add Agent; the form now\n supports inline target creation. */\n <button\n type=\"button\"\n onClick={handleCreateAgent}\n className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n <Plus className=\"size-4\" />\n {tr('agentsPage.addAgent', 'Add Agent')}\n </button>\n )}\n </div>\n }\n />\n\n <PagePurpose icon={<Bot className=\"size-4\" />}>\n {tr(\n 'agentsPage.purpose',\n 'Agents are the lightweight programs you install on your own machines (laptop, server, CI runner) that let VibeControls securely run terminal sessions and tasks there. Register an agent here, then attach it to a vibe to give that workspace a place to actually execute work — your code never leaves your hardware.'\n )}\n </PagePurpose>\n\n {/* Agent CLI Setup Banner — shown when no agents exist */}\n {agents.length === 0 && !loading && (\n <AgentSetupBanner variant=\"full\" dismissKey=\"vibecontrols-agents-setup-banner\" />\n )}\n\n {/* Compact reminder when agents exist but shown once */}\n {agents.length > 0 && (\n <AgentSetupBanner variant=\"compact\" dismissKey=\"vibecontrols-agents-compact-banner\" />\n )}\n\n {/* Filters Bar */}\n <div className=\"space-y-3\">\n {/* Row 1: Search + View Toggle */}\n <div className=\"flex items-center gap-2\">\n <SearchInput\n value={searchQuery}\n onChange={setSearchQuery}\n placeholder={tr('agentsPage.searchPlaceholder', 'Search agents...')}\n className=\"flex-1 sm:w-64 sm:flex-none\"\n />\n {/* View Toggle */}\n <div className=\"flex items-center gap-1 bg-bg-sunken rounded-button p-1 flex-shrink-0 border border-border-subtle\">\n <button\n type=\"button\"\n onClick={() => {\n setViewMode('grid');\n setSelectedAgentIds(new Set());\n }}\n className={`flex items-center justify-center p-1.5 sm:p-2 max-md:min-h-11 max-md:min-w-11 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${viewMode === 'grid' ? 'bg-[var(--color-accent-soft)] text-text-primary' : 'text-text-secondary hover:bg-bg-surface/60'}`}\n aria-label={tr('agentsPage.gridViewTitle', 'Grid view')}\n aria-pressed={viewMode === 'grid'}\n title={tr('agentsPage.gridViewTitle', 'Grid view')}\n >\n <Grid aria-hidden=\"true\" className=\"size-4 text-text-secondary\" />\n </button>\n <button\n type=\"button\"\n onClick={() => {\n setViewMode('list');\n setSelectedAgentIds(new Set());\n }}\n className={`flex items-center justify-center p-1.5 sm:p-2 max-md:min-h-11 max-md:min-w-11 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${viewMode === 'list' ? 'bg-[var(--color-accent-soft)] text-text-primary' : 'text-text-secondary hover:bg-bg-surface/60'}`}\n aria-label={tr('agentsPage.listViewTitle', 'List view')}\n aria-pressed={viewMode === 'list'}\n title={tr('agentsPage.listViewTitle', 'List view')}\n >\n <List aria-hidden=\"true\" className=\"size-4 text-text-secondary\" />\n </button>\n </div>\n </div>\n\n {/* Row 2: Filters - wrap on all screens */}\n <div className=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\n <FilterDropdown\n label={tr('agentsPage.filterStatus', 'Status')}\n value={statusFilter}\n options={statusOptions}\n onChange={setStatusFilter}\n />\n <FilterDropdown\n label={tr('agentsPage.filterPlatform', 'Platform')}\n value={platformFilter}\n options={platformOptions}\n onChange={setPlatformFilter}\n />\n <TagFilter\n label={tr('agentsPage.filterTag', 'Tag')}\n value={tagFilter}\n onChange={setTagFilter}\n />\n </div>\n </div>\n\n {/* Select All (grid view only — list view renders its own select-all\n affordance via AgentList's header checkbox / mobile button) */}\n {viewMode === 'grid' && filteredAgents.length > 0 && (\n <div className=\"flex justify-end\">\n <button\n type=\"button\"\n onClick={isAllSelected ? deselectAllAgents : selectAllAgents}\n aria-pressed={isAllSelected}\n className=\"flex items-center gap-1.5 px-3 py-1.5 max-md:min-h-11 text-xs text-text-secondary hover:text-text-primary rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n <CheckSquare aria-hidden=\"true\" className=\"size-3.5\" />\n {isAllSelected\n ? tr('agentsPage.deselectAll', 'Deselect All')\n : tr('agentsPage.selectAll', 'Select All')}\n </button>\n </div>\n )}\n\n {/* Bulk Action Bar */}\n {hasSelection && (\n <div className=\"flex flex-col sm:flex-row items-start sm:items-center gap-3 px-4 py-2.5 bg-[var(--color-accent-soft)] border border-border-subtle rounded-card\">\n <span className=\"text-sm font-medium text-text-primary\">\n {tr('agentsPage.selectedCount', '{{count}} agents selected', {\n count: selectedAgentIds.size,\n })}\n </span>\n <div className=\"flex items-center gap-1.5 sm:ml-auto\">\n {/* Hide bulk delete entirely for actors without agent:delete —\n the backend @rbac(action:\"delete\") would 403 anyway, so the\n option should not be shown (BOFF-2688). */}\n <PermissionButton permission={VIBE_PERMISSIONS.AGENT_DELETE} deniedBehavior=\"hide\">\n <button\n type=\"button\"\n onClick={() => setBulkDeleteConfirmOpen(true)}\n disabled={bulkLoading}\n className=\"flex items-center gap-1.5 px-3 py-1.5 max-md:min-h-11 text-xs font-medium text-status-error-text bg-status-error-bg-subtle border border-status-error-border rounded-button hover:bg-status-error-bg-subtle/80 transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n <Trash2 aria-hidden=\"true\" className=\"size-3\" /> {tr('agentsPage.remove', 'Remove')}\n </button>\n </PermissionButton>\n <button\n type=\"button\"\n onClick={deselectAllAgents}\n className=\"flex items-center gap-1.5 px-3 py-1.5 max-md:min-h-11 text-xs text-text-secondary hover:text-text-primary rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n <XSquare aria-hidden=\"true\" className=\"size-3\" />{' '}\n {tr('agentsPage.deselect', 'Deselect')}\n </button>\n </div>\n </div>\n )}\n\n {/* Results Count */}\n {searchQuery || statusFilter !== 'all' || platformFilter !== 'all' ? (\n <p className=\"text-sm text-text-secondary\">\n {tr('agentsPage.showingResults', 'Showing {{filtered}} of {{total}} agents', {\n filtered: filteredAgents.length,\n total: agents.length,\n })}\n {loading && (\n <span className=\"ml-2 text-text-muted\">\n {tr('agentsPage.refreshing', '(refreshing...)')}\n </span>\n )}\n </p>\n ) : null}\n\n {/* Agents Display */}\n {loading && agents.length === 0 ? (\n <PageSkeleton variant=\"rows\" count={6} />\n ) : filteredAgents.length > 0 ? (\n <AnimatePresence mode=\"wait\">\n {viewMode === 'grid' ? (\n <MotionList\n key=\"grid-view\"\n data-tour=\"agents-page-grid-header\"\n stagger={0.04}\n className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n >\n {filteredAgents.map((agent) => (\n <MotionItem key={agent.id} className=\"h-full\">\n <AgentCard\n agent={agent}\n onSelect={handleAgentSelect}\n onStart={handleStartAgent}\n onStop={handleStopAgent}\n onDisconnect={handleDisconnectAgent}\n onConfigure={handleConfigureAgent}\n onEditTunnelUrl={handleEditTunnelUrl}\n selected={selectedAgentIds.has(agent.id)}\n onToggleSelect={() => toggleAgentSelection(agent.id)}\n healthErrorMessage={agent.healthError ?? null}\n />\n </MotionItem>\n ))}\n </MotionList>\n ) : (\n <MotionList key=\"list-view\" stagger={0.04}>\n <MotionItem variant=\"fadeRight\">\n <AgentList\n agents={filteredAgents}\n onSelect={handleAgentSelect}\n onStart={handleStartAgent}\n onStop={handleStopAgent}\n onDisconnect={handleDisconnectAgent}\n onSettings={handleConfigureAgent}\n selectedIds={selectedAgentIds}\n onToggleSelect={toggleAgentSelection}\n onSelectAll={selectAllAgents}\n onDeselectAll={deselectAllAgents}\n />\n </MotionItem>\n </MotionList>\n )}\n </AnimatePresence>\n ) : (\n <EmptyState\n icon={<Bot className=\"size-8 text-text-secondary\" />}\n illustration={\n searchQuery || statusFilter !== 'all' || platformFilter !== 'all'\n ? 'empty-search'\n : 'empty-agents'\n }\n title={\n searchQuery || statusFilter !== 'all' || platformFilter !== 'all'\n ? tr('agentsPage.emptyNoAgentsFound', 'No agents found')\n : tr('agentsPage.emptyNoAgentsConfigured', 'No agents configured')\n }\n description={\n searchQuery || statusFilter !== 'all' || platformFilter !== 'all'\n ? tr('agentsPage.emptyAdjustSearch', 'Try adjusting your search or filters')\n : tr(\n 'agentsPage.emptyNoAgentsDescription',\n 'Install the CLI agent on your machine, then add it here. You can create a target inline while adding the agent.'\n )\n }\n action={\n !searchQuery && statusFilter === 'all' && platformFilter === 'all' ? (\n <div className=\"flex flex-wrap items-center gap-3\">\n {/* Always open Add Agent — the form handles the \"no\n targets yet\" case via inline DIRECT target creation. */}\n <button\n type=\"button\"\n onClick={handleCreateAgent}\n className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n <Plus className=\"size-4\" />\n {tr('agentsPage.addAgent', 'Add Agent')}\n </button>\n <button\n type=\"button\"\n onClick={() => handleNavigate('/getting-started')}\n className=\"flex items-center gap-2 px-4 py-2 border border-border-subtle bg-bg-surface text-text-primary rounded-button hover:bg-bg-sunken hover:border-border-strong transition-all duration-200 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n {tr('agentsPage.setupGuide', 'Setup guide')}\n </button>\n <GetHelpButton prompt=\"What is an Agent in VibeControls and how do I add one?\" />\n </div>\n ) : undefined\n }\n />\n )}\n\n {/* Create Agent Modal */}\n {showCreateForm && (\n <AgentForm\n onSubmit={handleCreateAgentSubmit}\n onCancel={() => setShowCreateForm(false)}\n isLoading={isCreating}\n onNavigate={(path) => {\n setShowCreateForm(false);\n handleNavigate(path);\n }}\n targets={targetsList.map(\n (t: { id: string; name: string; type?: string; status: string }) => ({\n id: t.id,\n name: t.name,\n type: t.type || 'DIRECT',\n status: t.status,\n })\n )}\n targetsLoading={targetsLoading}\n onCreateTarget={handleInlineCreateTarget}\n extraSection={\n <div>\n <h3 className=\"text-sm font-medium text-text-secondary mb-2\">\n {tr('agents.tags', 'Tags')}\n </h3>\n <EntityTagPicker\n entityType=\"VIBECONTROLS_AGENT\"\n onDraftChange={setAgentDraftTagIds}\n />\n </div>\n }\n />\n )}\n\n {/* Disconnect Confirmation Dialog */}\n <ConfirmDialog\n isOpen={disconnectConfirmAgent !== null}\n onClose={() => {\n if (!isDisconnecting) setDisconnectConfirmAgent(null);\n }}\n onConfirm={handleConfirmDisconnect}\n title={tr('agentsPage.disconnectTitle', 'Disconnect Agent')}\n message={\n disconnectConfirmAgent\n ? deriveAgentStatus(disconnectConfirmAgent) === 'OFFLINE'\n ? tr(\n 'agentsPage.disconnectOfflineMessage',\n 'Clear the stored tunnel connection for {{name}}? This will remove the tunnel URL and API key from this offline agent.',\n { name: disconnectConfirmAgent.name }\n )\n : tr(\n 'agentsPage.disconnectActiveMessage',\n 'Mark {{name}} as offline and clear its tunnel connection? The agent process will not be stopped automatically — you may need to stop it manually on the host machine.',\n { name: disconnectConfirmAgent.name }\n )\n : ''\n }\n confirmLabel={tr('agentsPage.disconnectConfirm', 'Disconnect')}\n variant=\"danger\"\n isLoading={isDisconnecting}\n />\n\n {/* Edit Tunnel Dialog */}\n <ResponsiveDialog\n open={editTunnelAgent !== null}\n onOpenChange={(open) => {\n if (!open) setEditTunnelAgent(null);\n }}\n >\n {editTunnelAgent ? (\n <ResponsiveDialogContent className=\"sm:max-w-md\">\n <ResponsiveDialogHeader>\n <ResponsiveDialogTitle>\n {tr('agentsPage.editTunnelTitle', 'Edit Tunnel')}\n </ResponsiveDialogTitle>\n <ResponsiveDialogDescription>\n {tr(\n 'agentsPage.editTunnelDescription',\n 'Configure the cloudflared tunnel URL and API key for {{name}}.',\n {\n name: editTunnelAgent.name,\n }\n )}\n </ResponsiveDialogDescription>\n </ResponsiveDialogHeader>\n <div className=\"py-4\">\n <label\n htmlFor={tunnelUrlField.id}\n className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n >\n {tr('agentsPage.tunnelUrlLabel', 'Tunnel URL')}\n </label>\n <Input\n {...tunnelUrlField.inputProps}\n ref={tunnelUrlRef}\n type=\"url\"\n defaultValue={editTunnelAgent.tunnelUrl || ''}\n placeholder={tr(\n 'agentsPage.tunnelUrlPlaceholder',\n 'https://example.trycloudflare.com'\n )}\n className=\"text-base md:text-sm\"\n />\n <p id={tunnelUrlField.hintId} className=\"mt-1.5 text-xs text-text-muted\">\n {tr(\n 'agentsPage.tunnelUrlHint',\n 'Leave empty to clear. Agents with auto-tunnel report this automatically on startup.'\n )}\n </p>\n {/* F4 Wave B: API key rotation removed from this dialog —\n `UpdateVibecontrolsAgentInput.agentApiKey` was dropped\n by the svc and key rotation now requires a dedicated\n rotate mutation (TODO). The agent's key still surfaces\n on the agent details page via the lazy reveal query. */}\n </div>\n <ResponsiveDialogFooter>\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={() => setEditTunnelAgent(null)}\n className=\"max-md:min-h-11\"\n >\n {tr('agentsPage.cancel', 'Cancel')}\n </Button>\n <Button\n type=\"button\"\n onClick={handleSaveTunnelSettings}\n disabled={isSavingTunnel}\n aria-busy={isSavingTunnel}\n className=\"max-md:min-h-11\"\n >\n {isSavingTunnel\n ? tr('agentsPage.saving', 'Saving...')\n : tr('agentsPage.save', 'Save')}\n </Button>\n </ResponsiveDialogFooter>\n </ResponsiveDialogContent>\n ) : null}\n </ResponsiveDialog>\n\n {/* Bulk Delete Confirmation Dialog (replaces window.confirm) */}\n <ConfirmDialog\n isOpen={bulkDeleteConfirmOpen}\n onClose={() => {\n if (!bulkLoading) setBulkDeleteConfirmOpen(false);\n }}\n onConfirm={handleBulkDelete}\n title={tr('agentsPage.bulkDeleteTitle', 'Remove agents')}\n message={tr(\n 'agentsPage.bulkDeleteConfirm',\n 'Are you sure you want to remove {{count}} agent(s)? This cannot be undone.',\n { count: selectedAgentIds.size }\n )}\n confirmLabel={tr('agentsPage.remove', 'Remove')}\n variant=\"danger\"\n isLoading={bulkLoading}\n />\n\n {/* Quota Exhausted Dialog — copy switches based on the entity the\n user just tried to create (agent vs inline target). */}\n <QuotaExhaustedDialog\n isOpen={quotaExhaustedKind !== null}\n onClose={() => setQuotaExhaustedKind(null)}\n onConfirm={() => {\n setQuotaExhaustedKind(null);\n handleNavigate('/billing/plans');\n }}\n title={getQuotaDialogContent(quotaExhaustedKind ?? 'generic').title}\n message={getQuotaDialogContent(quotaExhaustedKind ?? 'generic').message}\n />\n </MotionPage>\n );\n}\n"],"mappings":"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"}

package/dist/pages/AnalyticsPage.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"AnalyticsPage.js","names":[],"sources":["../../src/pages/AnalyticsPage.tsx"],"sourcesContent":["import { lazy, Suspense, useCallback, useMemo, useState } from 'react';\nimport { Download, Printer } from 'lucide-react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { GlassCard, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { BarChart3 } from 'lucide-react';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { PageHeader } from '@/components/shared';\nimport { SkeletonLine } from '@/components/shared/PageSkeleton';\nimport {\n AnalyticsBreakdownTable,\n AnalyticsEntityTabs,\n AnalyticsFilterBar,\n AnalyticsKpiGrid,\n SandboxAnalyticsSection,\n getAnalyticsTabConfig,\n getDateRange,\n} from '@/components/analytics';\n\n// Recharts is ~150KB+ gzipped and only mounts on the Analytics page once\n// the user lands on it. Lazy-load both chart components so the recharts\n// bundle is excluded from the initial page-load chunk.\nconst AnalyticsTimeSeriesChart = lazy(() =>\n import('@/components/analytics/AnalyticsTimeSeriesChart').then((m) => ({\n default: m.AnalyticsTimeSeriesChart,\n }))\n);\nconst AnalyticsBreakdownChart = lazy(() =>\n import('@/components/analytics/AnalyticsBreakdownChart').then((m) => ({\n default: m.AnalyticsBreakdownChart,\n }))\n);\n\nconst ChartFallback = () => (\n <div className=\"bg-bg-surface border border-border-seam rounded-lg p-4 shadow-[var(--shadow-pop)]\">\n <SkeletonLine height=\"h-40\" />\n </div>\n);\nimport type { EntityTab, Granularity, TimeRange } from '@/components/analytics';\nimport { useVibecontrolsAnalyticsQuery } from '@/generated/wspace-operations';\nimport { useVibeControls, useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useQueryBackedTab } from '@/hooks/useQueryBackedTab';\n\nconst ANALYTICS_TABS: readonly EntityTab[] = [\n 'overview',\n 'agents',\n 'sessions',\n 'sandbox',\n 'vibes',\n 'actions',\n 'vibedecks',\n 'aievents',\n 'audit',\n 'docs',\n];\n\nconst ANALYTICS_SERIES_COLORS = {\n primary: 'var(--color-text-link)',\n success: 'var(--color-status-success-text)',\n accent: 'var(--color-accent-purple)',\n warning: 'var(--color-status-warning-text)',\n} as const;\n\nexport function AnalyticsPage() {\n const { workspaceId } = useVibeControls();\n const { t } = useI18n();\n const navigate = useVibeNavigate();\n const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n const [timeRange, setTimeRange] = useState<TimeRange>('LAST_7D');\n const [granularity, setGranularity] = useState<Granularity>('DAY');\n const [activeTab, setActiveTab] = useQueryBackedTab<EntityTab>(ANALYTICS_TABS, 'overview');\n\n const tr = useCallback(\n (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n },\n [t]\n );\n\n const { startDate, endDate } = useMemo(() => getDateRange(timeRange), [timeRange]);\n const activeTabConfig = useMemo(() => getAnalyticsTabConfig(activeTab), [activeTab]);\n\n const { data, loading, error, refetch } = useVibecontrolsAnalyticsQuery({\n variables: {\n input: {\n startDate: startDate.toISOString(),\n endDate: endDate.toISOString(),\n granularity,\n entityTypes: activeTabConfig.entityTypes,\n },\n },\n fetchPolicy: 'cache-first',\n nextFetchPolicy: 'cache-first',\n notifyOnNetworkStatusChange: true,\n skip: !workspaceId,\n });\n\n const analytics = data?.vibecontrolsAnalytics;\n\n const handleRefresh = useCallback(() => {\n void refetch();\n }, [refetch]);\n\n const handlePrint = useCallback(() => {\n if (typeof window !== 'undefined') window.print();\n }, []);\n\n const handleExportCsv = useCallback(() => {\n if (!analytics) return;\n const rows = buildCsvRowsForTab(activeTab, analytics);\n if (rows.length === 0) return;\n const csv = rowsToCsv(rows);\n const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n const stamp = new Date().toISOString().slice(0, 10);\n a.download = `vibecontrols-analytics-${activeTab}-${stamp}.csv`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }, [analytics, activeTab]);\n\n const handleCardClick = useCallback(\n (href: string) => {\n navigate(href);\n },\n [navigate]\n );\n\n if (permissionsLoading)\n return (\n <div className=\"flex items-center justify-center min-h-[400px]\">\n <p className=\"text-text-secondary\">Loading permissions…</p>\n </div>\n );\n if (!hasPermission(VIBE_PERMISSIONS.ANALYTICS_READ))\n return (\n <div className=\"flex items-center justify-center min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n <p className=\"text-sm text-text-secondary\">\n You don't have permission to access this page.\n </p>\n </div>\n </div>\n );\n\n if (!workspaceId) {\n return (\n <MotionPage className=\"min-h-screen space-y-6 bg-bg-canvas px-6 lg:px-8 py-6\">\n <PageHeader title={tr('nav.analytics', 'Analytics')} />\n <div className=\"text-sm text-text-secondary\">Waiting for workspace context…</div>\n </MotionPage>\n );\n }\n\n if (error && !analytics) {\n // The wspace-vibecontrols-svc analytics resolver already safe-degrades\n // to an empty payload on its own; when this error path actually fires\n // the failure is upstream (ACA proxy returning \"upstream connect\n // error\" / \"Connection refused\" while the svc is restarting, or a\n // transient gateway hiccup). Show a transient-failure copy instead of\n // the raw Envoy-style message so users don't try to debug a string\n // that's meaningless to them.\n const raw = error.message ?? '';\n const looksTransient =\n raw.includes('upstream connect error') ||\n raw.includes('Connection refused') ||\n raw.includes('disconnect/reset before headers') ||\n raw.includes('Unexpected response');\n return (\n <MotionPage className=\"min-h-screen space-y-6 bg-bg-canvas px-6 lg:px-8 py-6\">\n <PageHeader title={tr('nav.analytics', 'Analytics')} />\n <div className=\"space-y-3 rounded-card border border-status-warning-border bg-status-warning-bg-subtle p-4 text-sm text-text-primary\">\n {looksTransient ? (\n <>\n <p className=\"font-medium\">\n {tr('analyticsPage.transientUnavailable', 'Analytics is temporarily unavailable')}\n </p>\n <p className=\"text-xs text-text-secondary\">\n {tr(\n 'analyticsPage.transientHint',\n 'This is usually brief — please wait a moment and retry. Other VibeControls features are unaffected.'\n )}\n </p>\n </>\n ) : (\n <p>Failed to load analytics: {error.message}</p>\n )}\n <button\n type=\"button\"\n onClick={handleRefresh}\n className=\"rounded-button border border-status-warning-border bg-status-warning-bg-subtle px-3 py-1.5 text-xs font-medium text-status-warning-text transition-colors hover:bg-bg-sunken\"\n >\n {tr('analyticsPage.retry', 'Retry')}\n </button>\n </div>\n </MotionPage>\n );\n }\n\n return (\n <MotionPage className=\"min-h-screen space-y-6 bg-bg-canvas px-6 lg:px-8 py-6 vc-printable\">\n <PageHeader title={tr('nav.analytics', 'Analytics')} />\n\n <PagePurpose icon={<BarChart3 className=\"size-4\" />}>\n {tr(\n 'analytics.purpose',\n 'Analytics turns your activity into trends — how many vibes, sessions and agents you’re running over time, and where usage is concentrated. Use it to spot growth, find idle or overused resources, and decide where to invest, then export or print a snapshot to share with your team.'\n )}\n </PagePurpose>\n\n {/* AnalyticsFilterBar / AnalyticsEntityTabs are custom components that\n don't forward rest props onto a DOM node, so the tour anchors are\n attached to wrapper <div>s (same pattern as VibeDeckSwitcher etc.)\n to keep `[data-tour=\"...\"]` selectors reachable in the DOM. */}\n <div data-tour=\"analytics-filter-bar\">\n <AnalyticsFilterBar\n timeRange={timeRange}\n granularity={granularity}\n onTimeRangeChange={setTimeRange}\n onGranularityChange={setGranularity}\n onRefresh={handleRefresh}\n loading={loading}\n executionTimeMs={analytics?.executionTimeMs}\n cached={analytics?.cached}\n />\n </div>\n\n <div data-tour=\"analytics-entity-tabs\">\n <AnalyticsEntityTabs activeTab={activeTab} onTabChange={setActiveTab} />\n </div>\n\n {/* F11: Per-tab export + print toolbar. Hidden in print output via the\n `vc-print-hide` class. */}\n <div\n data-tour=\"analytics-export-print-actions\"\n className=\"flex flex-wrap items-center justify-end gap-2 vc-print-hide\"\n >\n <button\n type=\"button\"\n onClick={handleExportCsv}\n disabled={loading || !analytics}\n className=\"inline-flex items-center gap-1.5 rounded-md border border-border-default px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-bg-sunken transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n title={tr('analytics.exportCsvTitle', 'Export current tab as CSV')}\n >\n <Download size={14} />\n {tr('analytics.exportCsv', 'Export CSV')}\n </button>\n <button\n type=\"button\"\n onClick={handlePrint}\n className=\"inline-flex items-center gap-1.5 rounded-md border border-border-default px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-bg-sunken transition-colors\"\n title={tr('analytics.printTitle', 'Print this report')}\n >\n <Printer size={14} />\n {tr('analytics.print', 'Print')}\n </button>\n {/* TODO(boff-analytics-png): wire PNG export once html-to-image\n or recharts svg-to-image helper is added to deps. */}\n </div>\n\n <Suspense fallback={<ChartFallback />}>\n <section\n id={`analytics-panel-${activeTab}`}\n role=\"tabpanel\"\n aria-labelledby={`analytics-tab-${activeTab}`}\n className=\"space-y-4\"\n >\n {activeTab === 'overview' ? (\n <div className=\"space-y-4\">\n <AnalyticsKpiGrid data={analytics} loading={loading} onCardClick={handleCardClick} />\n\n <AnalyticsTimeSeriesChart\n title=\"Activity Over Time\"\n datasets={[\n {\n label: 'Sessions',\n data: analytics?.sessions?.createdOverTime,\n color: ANALYTICS_SERIES_COLORS.primary,\n },\n {\n label: 'Executions',\n data: analytics?.actions?.executionsOverTime,\n color: ANALYTICS_SERIES_COLORS.success,\n },\n {\n label: 'AI Events',\n data: analytics?.aiEvents?.eventsOverTime,\n color: ANALYTICS_SERIES_COLORS.accent,\n },\n {\n label: 'Audit Logs',\n data: analytics?.audit?.eventsOverTime,\n color: ANALYTICS_SERIES_COLORS.warning,\n },\n ]}\n />\n\n <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n <AnalyticsBreakdownChart\n title=\"Sessions by Status\"\n data={analytics?.sessions?.byStatus}\n />\n <AnalyticsBreakdownChart\n title=\"Vibes by Status\"\n data={analytics?.vibes?.byStatus}\n />\n </div>\n </div>\n ) : null}\n\n {activeTab === 'agents' && analytics?.agents ? (\n <div className=\"space-y-4\">\n <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n <KpiCard label=\"Total\" value={analytics.agents.total} />\n <KpiCard label=\"Active\" value={analytics.agents.active} variant=\"success\" />\n <KpiCard label=\"Inactive\" value={analytics.agents.inactive} variant=\"warning\" />\n <KpiCard\n label=\"Stale Heartbeat\"\n value={analytics.agents.staleHeartbeatCount}\n variant=\"error\"\n />\n </div>\n\n <AnalyticsTimeSeriesChart\n title=\"Agents Created Over Time\"\n datasets={[\n {\n label: 'Agents',\n data: analytics.agents.createdOverTime,\n color: ANALYTICS_SERIES_COLORS.primary,\n },\n ]}\n height={250}\n />\n\n <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n <AnalyticsBreakdownTable\n title=\"By Platform\"\n data={analytics.agents.byPlatform}\n keyLabel=\"Platform\"\n />\n <AnalyticsBreakdownTable\n title=\"By Architecture\"\n data={analytics.agents.byArchitecture}\n keyLabel=\"Architecture\"\n />\n </div>\n </div>\n ) : null}\n\n {activeTab === 'sessions' && analytics?.sessions ? (\n <div className=\"space-y-4\">\n <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n <KpiCard label=\"Total\" value={analytics.sessions.total} />\n <KpiCard label=\"Running\" value={analytics.sessions.active} variant=\"success\" />\n <KpiCard label=\"Collaborators\" value={analytics.sessions.totalCollaborators} />\n <KpiCard\n label=\"Shares\"\n value={analytics.sessions.totalShares + analytics.sessions.totalShareLinks}\n />\n </div>\n\n {analytics.sessions.avgDurationMs != null ? (\n <div className=\"text-sm text-text-secondary\">\n Average duration:{' '}\n <span className=\"font-medium text-text-primary\">\n {formatDuration(analytics.sessions.avgDurationMs)}\n </span>\n </div>\n ) : null}\n\n <AnalyticsTimeSeriesChart\n title=\"Sessions Created Over Time\"\n datasets={[\n {\n label: 'Sessions',\n data: analytics.sessions.createdOverTime,\n color: ANALYTICS_SERIES_COLORS.primary,\n },\n ]}\n height={250}\n />\n\n <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n <AnalyticsBreakdownChart\n title=\"Sessions by Type\"\n data={analytics.sessions.byType}\n />\n <AnalyticsBreakdownTable\n title=\"Sessions by Status\"\n data={analytics.sessions.byStatus}\n keyLabel=\"Status\"\n />\n </div>\n </div>\n ) : null}\n\n {activeTab === 'sandbox' ? <SandboxAnalyticsSection /> : null}\n\n {activeTab === 'vibes' && analytics?.vibes ? (\n <div className=\"space-y-4\">\n <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n <KpiCard label=\"Total\" value={analytics.vibes.total} />\n <KpiCard label=\"With Agent\" value={analytics.vibes.withAgent} variant=\"success\" />\n <KpiCard label=\"Without Agent\" value={analytics.vibes.withoutAgent} />\n </div>\n\n <AnalyticsTimeSeriesChart\n title=\"Vibes Created Over Time\"\n datasets={[\n {\n label: 'Vibes',\n data: analytics.vibes.createdOverTime,\n color: ANALYTICS_SERIES_COLORS.accent,\n },\n ]}\n height={250}\n />\n\n <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n <AnalyticsBreakdownChart title=\"Vibes by Type\" data={analytics.vibes.byType} />\n <AnalyticsBreakdownChart title=\"Vibes by Status\" data={analytics.vibes.byStatus} />\n </div>\n </div>\n ) : null}\n\n {activeTab === 'actions' && analytics?.actions ? (\n <div className=\"space-y-4\">\n <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n <KpiCard label=\"Total Actions\" value={analytics.actions.total} />\n <KpiCard label=\"Executions\" value={analytics.actions.totalExecutions} />\n <KpiCard\n label=\"Success Rate\"\n value={\n analytics.actions.successRate != null\n ? `${analytics.actions.successRate.toFixed(1)}%`\n : 'N/A'\n }\n variant={\n analytics.actions.successRate != null && analytics.actions.successRate >= 90\n ? 'success'\n : 'warning'\n }\n />\n <KpiCard\n label=\"Avg Duration\"\n value={\n analytics.actions.avgDurationMs != null\n ? formatDuration(analytics.actions.avgDurationMs)\n : 'N/A'\n }\n />\n </div>\n\n <AnalyticsTimeSeriesChart\n title=\"Executions Over Time\"\n datasets={[\n {\n label: 'Executions',\n data: analytics.actions.executionsOverTime,\n color: ANALYTICS_SERIES_COLORS.success,\n },\n ]}\n height={250}\n />\n\n <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n <AnalyticsBreakdownChart\n title=\"By Action Type\"\n data={analytics.actions.byActionType}\n />\n <AnalyticsBreakdownChart\n title=\"Execution Status\"\n data={analytics.actions.executionsByStatus}\n />\n </div>\n\n <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n <AnalyticsBreakdownTable\n title=\"By Trigger Type\"\n data={analytics.actions.byTriggerType}\n keyLabel=\"Trigger\"\n />\n <AnalyticsBreakdownTable\n title=\"By Source Type\"\n data={analytics.actions.bySourceType}\n keyLabel=\"Source\"\n />\n </div>\n </div>\n ) : null}\n\n {activeTab === 'vibedecks' && analytics?.vibeDecks ? (\n <div className=\"space-y-4\">\n <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3\">\n <KpiCard label=\"Decks\" value={analytics.vibeDecks.totalDecks} />\n <KpiCard label=\"Buttons\" value={analytics.vibeDecks.totalButtons} />\n </div>\n\n <AnalyticsBreakdownChart\n title=\"Buttons by Action Type\"\n data={analytics.vibeDecks.buttonsByActionType}\n />\n </div>\n ) : null}\n\n {activeTab === 'aievents' && analytics?.aiEvents ? (\n <div className=\"space-y-4\">\n <KpiCard label=\"Total AI Events\" value={analytics.aiEvents.total} />\n\n <AnalyticsTimeSeriesChart\n title=\"AI Events Over Time\"\n datasets={[\n {\n label: 'Events',\n data: analytics.aiEvents.eventsOverTime,\n color: ANALYTICS_SERIES_COLORS.accent,\n },\n ]}\n height={250}\n />\n\n <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n <AnalyticsBreakdownChart title=\"By Source\" data={analytics.aiEvents.bySource} />\n <AnalyticsBreakdownTable\n title=\"By Event Type\"\n data={analytics.aiEvents.byEventType}\n keyLabel=\"Event Type\"\n />\n </div>\n </div>\n ) : null}\n\n {activeTab === 'audit' && analytics?.audit ? (\n <div className=\"space-y-4\">\n <KpiCard label=\"Total Audit Logs\" value={analytics.audit.total} />\n\n <AnalyticsTimeSeriesChart\n title=\"Audit Events Over Time\"\n datasets={[\n {\n label: 'Events',\n data: analytics.audit.eventsOverTime,\n color: ANALYTICS_SERIES_COLORS.warning,\n },\n ]}\n height={250}\n />\n\n <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n <AnalyticsBreakdownChart title=\"By Action\" data={analytics.audit.byAction} />\n <AnalyticsBreakdownChart title=\"By Status\" data={analytics.audit.byStatus} />\n </div>\n\n <AnalyticsBreakdownTable\n title=\"By Resource Type\"\n data={analytics.audit.byResourceType}\n keyLabel=\"Resource\"\n />\n </div>\n ) : null}\n\n {activeTab === 'docs' && analytics?.docs ? (\n <div className=\"space-y-4\">\n <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n <KpiCard label=\"Sites\" value={analytics.docs.totalSites} />\n <KpiCard label=\"Pages\" value={analytics.docs.totalPages} />\n <KpiCard label=\"Revisions\" value={analytics.docs.totalRevisions} />\n <KpiCard\n label=\"Build Success\"\n value={\n analytics.docs.buildSuccessRate != null\n ? `${analytics.docs.buildSuccessRate.toFixed(1)}%`\n : 'N/A'\n }\n variant={\n analytics.docs.buildSuccessRate != null && analytics.docs.buildSuccessRate >= 90\n ? 'success'\n : 'warning'\n }\n />\n </div>\n\n <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n <AnalyticsBreakdownChart\n title=\"Pages by Status\"\n data={analytics.docs.pagesByStatus}\n />\n <AnalyticsBreakdownChart\n title=\"Revisions by Status\"\n data={analytics.docs.revisionsByStatus}\n />\n </div>\n </div>\n ) : null}\n </section>\n </Suspense>\n </MotionPage>\n );\n}\n\nfunction KpiCard({\n label,\n value,\n variant,\n}: {\n label: string;\n value: number | string;\n variant?: 'success' | 'warning' | 'error';\n}) {\n // Boff UI 2.0: status KPIs keep their semantic tint; the neutral KPI uses the\n // glass \"metric\" treatment (accent wash + seam border + soft pop) for a\n // calm, soft-glow data tile.\n const washClass =\n variant === 'success'\n ? 'bg-status-success-bg-subtle border-status-success-border'\n : variant === 'warning'\n ? 'bg-status-warning-bg-subtle border-status-warning-border'\n : variant === 'error'\n ? 'bg-status-error-bg-subtle border-status-error-border'\n : '';\n\n return (\n <GlassCard\n treatment={variant ? 'plain' : 'metric'}\n className={`p-4 ${variant ? `border ${washClass}` : ''}`}\n >\n <p className=\"text-xs text-text-secondary\">{label}</p>\n <p className=\"mt-1 text-xl font-semibold text-text-primary tabular-nums\">\n {typeof value === 'number' ? value.toLocaleString() : value}\n </p>\n </GlassCard>\n );\n}\n\nfunction formatDuration(milliseconds: number): string {\n if (milliseconds < 1000) {\n return `${Math.round(milliseconds)}ms`;\n }\n\n if (milliseconds < 60000) {\n return `${(milliseconds / 1000).toFixed(1)}s`;\n }\n\n const minutes = Math.floor(milliseconds / 60000);\n const seconds = Math.round((milliseconds % 60000) / 1000);\n return `${minutes}m ${seconds}s`;\n}\n\n// ── F11: CSV serialization for the active analytics tab ──────────────────\n\ntype CsvRow = (string | number)[];\n\nfunction rowsToCsv(rows: CsvRow[]): string {\n return rows\n .map((row) =>\n row\n .map((cell) => {\n const s = cell == null ? '' : String(cell);\n // Escape per RFC4180 — wrap in quotes when the cell contains a\n // separator, quote, or newline; double any internal quotes.\n if (/[\",\\n\\r]/.test(s)) return `\"${s.replace(/\"/g, '\"\"')}\"`;\n return s;\n })\n .join(',')\n )\n .join('\\r\\n');\n}\n\n/**\n * Build the CSV row matrix for an analytics tab. Each tab serialises its\n * primary table data; chart-only tabs fall back to a sparse summary.\n * The first row is always headers.\n */\ntype AnalyticsBreakdownEntry = {\n key?: string | null;\n label?: string | null;\n count?: number | null;\n};\n\ninterface AnalyticsTabSlice {\n total?: number | null;\n active?: number | null;\n inactive?: number | null;\n staleHeartbeatCount?: number | null;\n withAgent?: number | null;\n withoutAgent?: number | null;\n totalExecutions?: number | null;\n successRate?: number | null;\n avgDurationMs?: number | null;\n totalDecks?: number | null;\n totalButtons?: number | null;\n totalSites?: number | null;\n totalPages?: number | null;\n totalRevisions?: number | null;\n buildSuccessRate?: number | null;\n byPlatform?: ReadonlyArray<AnalyticsBreakdownEntry>;\n byType?: ReadonlyArray<AnalyticsBreakdownEntry>;\n}\n\ninterface AnalyticsSnapshot {\n sessions?: AnalyticsTabSlice;\n agents?: AnalyticsTabSlice;\n vibes?: AnalyticsTabSlice;\n actions?: AnalyticsTabSlice;\n aiEvents?: AnalyticsTabSlice;\n audit?: AnalyticsTabSlice;\n docs?: AnalyticsTabSlice;\n vibeDecks?: AnalyticsTabSlice;\n}\n\nfunction buildCsvRowsForTab(tab: EntityTab, analytics: AnalyticsSnapshot): CsvRow[] {\n const rows: CsvRow[] = [];\n if (tab === 'overview') {\n rows.push(['metric', 'value']);\n if (analytics.sessions) rows.push(['sessions.total', analytics.sessions.total ?? 0]);\n if (analytics.agents) rows.push(['agents.total', analytics.agents.total ?? 0]);\n if (analytics.vibes) rows.push(['vibes.total', analytics.vibes.total ?? 0]);\n if (analytics.actions) rows.push(['actions.total', analytics.actions.total ?? 0]);\n return rows;\n }\n if (tab === 'agents' && analytics.agents) {\n rows.push(['metric', 'value']);\n rows.push(['total', analytics.agents.total ?? 0]);\n rows.push(['active', analytics.agents.active ?? 0]);\n rows.push(['inactive', analytics.agents.inactive ?? 0]);\n rows.push(['staleHeartbeat', analytics.agents.staleHeartbeatCount ?? 0]);\n if (Array.isArray(analytics.agents.byPlatform)) {\n rows.push([], ['platform', 'count']);\n for (const e of analytics.agents.byPlatform)\n rows.push([e.key ?? e.label ?? '', e.count ?? 0]);\n }\n return rows;\n }\n if (tab === 'sessions' && analytics.sessions) {\n rows.push(['metric', 'value']);\n rows.push(['total', analytics.sessions.total ?? 0]);\n rows.push(['running', analytics.sessions.active ?? 0]);\n rows.push(['avgDurationMs', analytics.sessions.avgDurationMs ?? '']);\n if (Array.isArray(analytics.sessions.byType)) {\n rows.push([], ['type', 'count']);\n for (const e of analytics.sessions.byType) rows.push([e.key ?? e.label ?? '', e.count ?? 0]);\n }\n return rows;\n }\n if (tab === 'actions' && analytics.actions) {\n rows.push(['metric', 'value']);\n rows.push(['total', analytics.actions.total ?? 0]);\n rows.push(['totalExecutions', analytics.actions.totalExecutions ?? 0]);\n rows.push(['successRate', analytics.actions.successRate ?? '']);\n rows.push(['avgDurationMs', analytics.actions.avgDurationMs ?? '']);\n return rows;\n }\n if (tab === 'vibes' && analytics.vibes) {\n rows.push(['metric', 'value']);\n rows.push(['total', analytics.vibes.total ?? 0]);\n rows.push(['withAgent', analytics.vibes.withAgent ?? 0]);\n rows.push(['withoutAgent', analytics.vibes.withoutAgent ?? 0]);\n return rows;\n }\n if (tab === 'vibedecks' && analytics.vibeDecks) {\n rows.push(['metric', 'value']);\n rows.push(['decks', analytics.vibeDecks.totalDecks ?? 0]);\n rows.push(['buttons', analytics.vibeDecks.totalButtons ?? 0]);\n return rows;\n }\n if (tab === 'aievents' && analytics.aiEvents) {\n rows.push(['metric', 'value']);\n rows.push(['total', analytics.aiEvents.total ?? 0]);\n return rows;\n }\n if (tab === 'audit' && analytics.audit) {\n rows.push(['metric', 'value']);\n rows.push(['total', analytics.audit.total ?? 0]);\n return rows;\n }\n if (tab === 'docs' && analytics.docs) {\n rows.push(['metric', 'value']);\n rows.push(['sites', analytics.docs.totalSites ?? 0]);\n rows.push(['pages', analytics.docs.totalPages ?? 0]);\n rows.push(['revisions', analytics.docs.totalRevisions ?? 0]);\n rows.push(['buildSuccessRate', analytics.docs.buildSuccessRate ?? '']);\n return rows;\n }\n // sandbox + others fall back to a sparse summary\n rows.push(['metric', 'value']);\n rows.push(['note', `No CSV serialiser for ${tab} tab yet`]);\n return rows;\n}\n"],"mappings":"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"}

package/dist/pages/CatalogDetailPage.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"CatalogDetailPage.js","names":[],"sources":["../../src/pages/CatalogDetailPage.tsx"],"sourcesContent":["import { useState, useCallback, useMemo, useEffect } from 'react';\nimport '@xyflow/react/dist/style.css';\nimport { useParams } from 'react-router';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\n\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport {\n ArrowLeft,\n BookOpen,\n Layers,\n Zap,\n BarChart3,\n FileText,\n Settings,\n RefreshCw,\n Plus,\n Network,\n ArrowRight,\n Package,\n Trash2,\n Tag,\n Box,\n} from 'lucide-react';\nimport {\n ReactFlow,\n Background,\n Controls,\n Handle,\n Position,\n addEdge,\n useNodesState,\n useEdgesState,\n type Node,\n type Edge,\n type Connection,\n type NodeMouseHandler,\n MarkerType,\n BackgroundVariant,\n} from '@xyflow/react';\nimport {\n PageHeader,\n Card,\n StatCard,\n EmptyState,\n LoadingState,\n ErrorState,\n ConfirmDialog,\n} from '@/components/shared';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\n\nimport { DocsTabPanel } from '@/components/docs';\nimport { ScorecardPanel } from '@/components/scorecard';\nimport { ComponentCard } from '@/components/idp-components';\nimport type { ComponentCardData } from '@/components/idp-components';\nimport { CatalogForm } from '@/components/catalog';\nimport type { CatalogFormData } from '@/components/catalog';\nimport { EntityShareButton } from '@/components/sharing';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useQueryBackedTab } from '@/hooks/useQueryBackedTab';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n useGetCatalogQuery,\n useUpdateCatalogMutation,\n useDeleteCatalogMutation,\n useAddComponentToCatalogMutation,\n useRemoveComponentFromCatalogMutation,\n useGetCatalogDependencyGraphQuery,\n useListAllComponentsForCatalogQuery,\n useUpdateComponentMutation,\n type GetCatalogDependencyGraphQuery,\n type ListAllComponentsForCatalogQuery,\n} from '@/generated/wspace-operations';\n\ntype CatalogTab =\n 'overview' | 'components' | 'dependency-graph' | 'scorecard' | 'docs' | 'settings';\n\nconst CATALOG_TABS: readonly CatalogTab[] = [\n 'overview',\n 'components',\n 'dependency-graph',\n 'scorecard',\n 'docs',\n 'settings',\n];\n\nexport function CatalogDetailPage() {\n const { t } = useI18n();\n const { id } = useParams<{ id: string }>();\n const navigate = useVibeNavigate();\n const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n const canReadCatalog = hasPermission(VIBE_PERMISSIONS.CATALOG_READ);\n const canUpdateCatalog = hasPermission(VIBE_PERMISSIONS.CATALOG_UPDATE);\n const canDeleteCatalog = hasPermission(VIBE_PERMISSIONS.CATALOG_DELETE);\n const canReadComponents = hasPermission(VIBE_PERMISSIONS.COMPONENT_READ);\n\n const tr = useCallback(\n (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n },\n [t]\n );\n\n const [activeTab, setActiveTab] = useQueryBackedTab<CatalogTab>(CATALOG_TABS, 'overview');\n const [showEditForm, setShowEditForm] = useState(false);\n const [showAddComponent, setShowAddComponent] = useState(false);\n const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);\n const [isDeleting, setIsDeleting] = useState(false);\n const [successMessage, setSuccessMessage] = useState<string | null>(null);\n\n const { data, loading, error, refetch } = useGetCatalogQuery({\n variables: { id: id || '' },\n skip: !id || permissionsLoading || !canReadCatalog,\n fetchPolicy: 'cache-and-network',\n });\n\n const [updateCatalog] = useUpdateCatalogMutation({ refetchQueries: ['GetCatalog'] });\n const [deleteCatalog] = useDeleteCatalogMutation({ refetchQueries: ['ListCatalogs'] });\n const [addComponentToCatalog] = useAddComponentToCatalogMutation({\n refetchQueries: ['GetCatalog'],\n });\n const [removeComponentFromCatalog] = useRemoveComponentFromCatalogMutation({\n refetchQueries: ['GetCatalog'],\n });\n\n const catalog = data?.vibecontrolsCatalog ?? null;\n\n const components: ComponentCardData[] = useMemo(() => {\n return (catalog?.components ?? []).map((entry: any) => {\n const c = entry.component || {};\n return {\n id: c.id as string,\n name: c.name as string,\n description: (c.description as string) || null,\n type: c.type as ComponentCardData['type'],\n lifecycle: c.lifecycle as ComponentCardData['lifecycle'],\n version: (c.version as string) || null,\n language: (c.language as string) || null,\n framework: (c.framework as string) || null,\n tags: (c.tags as string[]) || [],\n createdAt: c.createdAt as string,\n updatedAt: c.updatedAt as string,\n };\n });\n }, [catalog?.components]);\n\n if (permissionsLoading)\n return (\n <div className=\"flex items-center justify-center min-h-[400px]\">\n <p className=\"text-text-secondary\">Loading permissions…</p>\n </div>\n );\n if (!canReadCatalog)\n return (\n <div className=\"flex items-center justify-center min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n <p className=\"text-sm text-text-secondary\">\n You don't have permission to access this page.\n </p>\n </div>\n </div>\n );\n\n const handleBack = () => {\n navigate('/catalogs');\n };\n\n const handleComponentClick = (component: ComponentCardData) => {\n navigate(`/components/${component.id}`);\n };\n\n const handleUpdateCatalog = async (formData: CatalogFormData) => {\n if (!id || !canUpdateCatalog) return;\n await updateCatalog({\n variables: {\n id,\n input: {\n name: formData.name,\n description: formData.description || undefined,\n visibility: formData.visibility,\n ownerName: formData.owner || undefined,\n tags: formData.tags.length > 0 ? formData.tags : undefined,\n },\n },\n });\n setSuccessMessage(tr('catalog.updatedSuccess', 'Catalog updated successfully'));\n setTimeout(() => setSuccessMessage(null), 3000);\n };\n\n const handleDeleteCatalog = async () => {\n if (!id) return;\n setIsDeleting(true);\n try {\n await deleteCatalog({ variables: { id } });\n setShowDeleteConfirm(false);\n navigate('/catalogs');\n } finally {\n setIsDeleting(false);\n }\n };\n\n const tabs: { id: CatalogTab; label: string; icon: typeof BookOpen; badge?: string }[] = [\n { id: 'overview', label: tr('nav.overview', 'Overview'), icon: BookOpen },\n {\n id: 'components',\n label: tr('catalog.components', 'Components'),\n icon: Layers,\n badge: `${catalog?.componentCount ?? 0}`,\n },\n {\n id: 'dependency-graph',\n label: tr('catalog.dependencyGraph', 'Dependency Graph'),\n icon: Network,\n },\n { id: 'scorecard', label: tr('catalog.scorecard', 'Scorecard'), icon: BarChart3 },\n { id: 'docs', label: tr('catalog.docs', 'Docs'), icon: FileText },\n { id: 'settings', label: tr('common.settings', 'Settings'), icon: Settings },\n ];\n\n // Guard states\n if (loading && !catalog) {\n return (\n <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n <button\n type=\"button\"\n onClick={handleBack}\n className=\"flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"size-4\" />\n {tr('catalog.backToCatalogs', 'Back to Catalogs')}\n </button>\n <PageSkeleton variant=\"detail\" />\n </MotionPage>\n );\n }\n\n if (error && !catalog) {\n return (\n <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n <button\n type=\"button\"\n onClick={handleBack}\n className=\"flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"size-4\" />\n {tr('catalog.backToCatalogs', 'Back to Catalogs')}\n </button>\n <ErrorState\n title={tr('catalog.failedLoad', 'Failed to load catalog')}\n message={error.message}\n onRetry={() => refetch()}\n />\n </MotionPage>\n );\n }\n\n if (!catalog) {\n return (\n <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n <button\n type=\"button\"\n onClick={handleBack}\n className=\"flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"size-4\" />\n {tr('catalog.backToCatalogs', 'Back to Catalogs')}\n </button>\n <EmptyState\n icon={<BookOpen className=\"size-8 text-text-secondary\" />}\n title={tr('catalog.notFound', 'Catalog not found')}\n description={`No catalog with ID \"${id}\" exists`}\n action={\n <button\n type=\"button\"\n onClick={handleBack}\n className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n >\n {tr('catalog.backToCatalogs', 'Back to Catalogs')}\n </button>\n }\n />\n </MotionPage>\n );\n }\n\n return (\n <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n {/* Success Toast */}\n {successMessage && (\n <div className=\"fixed top-4 left-4 right-4 sm:left-auto z-50 bg-status-success-bg text-status-success-text px-4 py-3 rounded-md shadow-lg\">\n {successMessage}\n </div>\n )}\n\n {/* Back Button */}\n <button\n type=\"button\"\n onClick={handleBack}\n className=\"flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"size-4\" />\n {tr('catalog.backToCatalogs', 'Back to Catalogs')}\n </button>\n\n {/* Header */}\n <PageHeader\n title={catalog.name}\n description={catalog.description || tr('catalog.noDescription', 'No description')}\n actions={\n <div className=\"flex items-center gap-2 flex-wrap\">\n <EntityShareButton\n entity=\"catalog\"\n resource={{ id: catalog.id, name: catalog.name }}\n label={tr('catalog.share', 'Share')}\n variant=\"button\"\n />\n <button\n type=\"button\"\n onClick={() => refetch()}\n disabled={loading}\n className=\"flex items-center justify-center p-2 bg-bg-sunken text-text-primary rounded-md hover:bg-action-secondary-bg-hover transition-colors disabled:opacity-50\"\n title={tr('common.refresh', 'Refresh')}\n >\n <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />\n </button>\n <span\n className={`inline-flex items-center px-2.5 py-1 text-xs font-medium rounded ${\n catalog.visibility === 'PUBLIC'\n ? 'bg-status-success-bg text-status-success-text'\n : catalog.visibility === 'INTERNAL'\n ? 'bg-status-warning-bg text-status-warning-text'\n : 'bg-bg-sunken text-text-secondary'\n }`}\n >\n {catalog.visibility}\n </span>\n </div>\n }\n />\n\n <PagePurpose icon={<BookOpen className=\"size-4\" />}>\n {tr(\n 'catalogDetail.purpose',\n 'This catalog groups related components into one curated collection — a domain, a team’s services, or a product area. Use this page to see everything in the catalog, add or remove components, and share it so others can discover the same set. It’s how you keep a meaningful slice of your system organised and findable.'\n )}\n </PagePurpose>\n\n {/* Stat Cards */}\n <MotionList stagger={0.04} className=\"grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4\">\n <MotionItem>\n <StatCard\n title={tr('catalog.components', 'Components')}\n value={catalog.componentCount ?? 0}\n icon={<Layers className=\"size-4\" />}\n />\n </MotionItem>\n <MotionItem>\n <StatCard\n title={tr('catalog.vibes', 'Vibes')}\n value={catalog.vibeCount ?? 0}\n icon={<Zap className=\"size-4\" />}\n />\n </MotionItem>\n <MotionItem>\n <StatCard\n title={tr('catalog.ownerName', 'Owner')}\n value={catalog.ownerNameName || 'Unassigned'}\n icon={<BookOpen className=\"size-4\" />}\n />\n </MotionItem>\n </MotionList>\n\n {/* Universal tags */}\n <Card>\n <div className=\"p-4 border-b border-border-default flex items-center gap-2\">\n <Tag className=\"size-5\" />\n <h3 className=\"font-semibold text-text-primary\">{tr('catalog.tags', 'Tags')}</h3>\n </div>\n <div className=\"p-4\">\n <EntityTagPicker entityType=\"VIBECONTROLS_CATALOG\" entityId={catalog.id} />\n </div>\n </Card>\n\n {/* Tab Navigation */}\n <div className=\"border-b border-border-default\">\n <nav\n className=\"flex gap-1 -mb-px overflow-x-auto pb-1\"\n aria-label={tr('catalog.tabsAriaLabel', 'Catalog tabs')}\n >\n {tabs.map((tab) => {\n const Icon = tab.icon;\n const isActiveTab = activeTab === tab.id;\n return (\n <button\n type=\"button\"\n key={tab.id}\n onClick={() => setActiveTab(tab.id)}\n className={`flex shrink-0 items-center gap-1.5 px-3 py-2.5 text-xs sm:gap-2 sm:px-4 sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${\n isActiveTab\n ? 'border-action-primary-bg text-action-primary-text'\n : 'border-transparent text-text-secondary hover:text-text-primary hover:border-border-default'\n }`}\n aria-selected={isActiveTab}\n role=\"tab\"\n >\n <Icon className=\"size-4\" />\n {tab.label}\n {tab.badge && (\n <span\n className={`hidden rounded-full px-1.5 py-0.5 text-[10px] sm:inline-flex sm:text-xs ${\n isActiveTab\n ? 'bg-[var(--color-accent-soft)] text-text-primary'\n : 'bg-bg-sunken text-text-muted'\n }`}\n >\n {tab.badge}\n </span>\n )}\n </button>\n );\n })}\n </nav>\n </div>\n\n {/* Tab Panels */}\n <AnimatePresence mode=\"wait\">\n {activeTab === 'overview' && (\n <motion.div\n key=\"overview\"\n initial={{ opacity: 0, y: 8 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -8 }}\n transition={{ duration: 0.2 }}\n className=\"space-y-6\"\n >\n {catalog.description && (\n <Card>\n <div className=\"p-4\">\n <p className=\"text-text-primary\">{catalog.description}</p>\n </div>\n </Card>\n )}\n\n <Card>\n <div className=\"p-4 border-b border-border-default\">\n <h3 className=\"font-semibold text-text-primary\">\n {tr('catalog.metadata', 'Metadata')}\n </h3>\n </div>\n <div className=\"p-4\">\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n <div>\n <p className=\"text-text-secondary\">{tr('catalog.ownerNameLabel', 'Owner')}</p>\n <p className=\"font-medium text-text-primary\">\n {catalog.ownerName || tr('common.unset', 'Unset')}\n </p>\n </div>\n <div>\n <p className=\"text-text-secondary\">{tr('catalog.visibility', 'Visibility')}</p>\n <p className=\"font-medium text-text-primary\">{catalog.visibility}</p>\n </div>\n <div>\n <p className=\"text-text-secondary\">{tr('common.created', 'Created')}</p>\n <p className=\"font-medium text-text-primary\">\n {new Date(catalog.createdAt).toLocaleDateString()}\n </p>\n </div>\n <div>\n <p className=\"text-text-secondary\">{tr('common.updated', 'Updated')}</p>\n <p className=\"font-medium text-text-primary\">\n {new Date(catalog.updatedAt).toLocaleDateString()}\n </p>\n </div>\n </div>\n </div>\n </Card>\n\n {catalog.tags?.length > 0 && (\n <Card>\n <div className=\"p-4\">\n <h3 className=\"font-semibold text-text-primary mb-3\">\n {tr('catalog.tags', 'Tags')}\n </h3>\n <div className=\"flex flex-wrap gap-2\">\n {catalog.tags.map((tag: string) => (\n <span\n key={tag}\n className=\"px-2.5 py-1 text-sm bg-bg-sunken text-text-secondary rounded-md\"\n >\n {tag}\n </span>\n ))}\n </div>\n </div>\n </Card>\n )}\n </motion.div>\n )}\n\n {activeTab === 'components' && (\n <motion.div\n key=\"components\"\n initial={{ opacity: 0, y: 8 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -8 }}\n transition={{ duration: 0.2 }}\n className=\"space-y-4\"\n >\n <div className=\"flex items-center justify-between\">\n <p className=\"text-sm text-text-secondary\">\n {components.length}{' '}\n {tr('catalog.componentsInCatalog', 'components in this catalog')}\n </p>\n {canUpdateCatalog && canReadComponents && (\n <button\n type=\"button\"\n onClick={() => setShowAddComponent(true)}\n className=\"flex items-center gap-2 px-3 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n >\n <Plus className=\"size-4\" />\n {tr('catalog.addComponent', 'Add Component')}\n </button>\n )}\n </div>\n {components.length > 0 ? (\n <MotionList\n stagger={0.04}\n className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n >\n {components.map((component) => (\n <MotionItem key={component.id}>\n <ComponentCard component={component} onOpen={handleComponentClick} />\n </MotionItem>\n ))}\n </MotionList>\n ) : (\n <EmptyState\n icon={<Layers className=\"size-8 text-text-secondary\" />}\n title={tr('catalog.noComponents', 'No components')}\n description={tr(\n 'catalog.noComponentsDescription',\n 'Add components to this catalog to track them'\n )}\n />\n )}\n </motion.div>\n )}\n\n {activeTab === 'dependency-graph' && <DependencyGraphTab catalogId={id || ''} tr={tr} />}\n\n {activeTab === 'scorecard' && (\n <motion.div\n key=\"scorecard\"\n initial={{ opacity: 0, y: 8 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -8 }}\n transition={{ duration: 0.2 }}\n className=\"space-y-6\"\n >\n <ScorecardPanel ownerType=\"CATALOG\" ownerId={id || ''} />\n </motion.div>\n )}\n\n {activeTab === 'docs' && (\n <motion.div\n key=\"docs\"\n initial={{ opacity: 0, y: 8 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -8 }}\n transition={{ duration: 0.2 }}\n className=\"space-y-6\"\n >\n <DocsTabPanel ownerType=\"CATALOG\" ownerId={id || ''} />\n </motion.div>\n )}\n\n {activeTab === 'settings' && (\n <motion.div\n key=\"settings\"\n initial={{ opacity: 0, y: 8 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -8 }}\n transition={{ duration: 0.2 }}\n >\n <div className=\"space-y-4\">\n {canUpdateCatalog && (\n <Card padding=\"lg\">\n <h3 className=\"font-semibold text-text-primary mb-4\">\n {tr('catalog.editCatalog', 'Edit Catalog')}\n </h3>\n <button\n type=\"button\"\n onClick={() => setShowEditForm(true)}\n className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n >\n {tr('catalog.editDetails', 'Edit Details')}\n </button>\n </Card>\n )}\n {canDeleteCatalog && (\n <Card padding=\"lg\">\n <h3 className=\"font-semibold text-status-error-text mb-2\">\n {tr('catalog.dangerZone', 'Danger Zone')}\n </h3>\n <p className=\"text-sm text-text-secondary mb-4\">\n {tr(\n 'catalog.deleteWarning',\n 'Deleting this catalog will detach all components and vibes. This cannot be undone.'\n )}\n </p>\n <button\n type=\"button\"\n data-testid=\"catalog-delete-button\"\n onClick={() => setShowDeleteConfirm(true)}\n className=\"inline-flex items-center gap-2 px-4 py-2 bg-status-error-bg text-status-error-text rounded-md hover:opacity-90 transition-opacity\"\n >\n <Trash2 className=\"size-4\" aria-hidden=\"true\" />\n {tr('catalog.deleteCatalog', 'Delete Catalog')}\n </button>\n </Card>\n )}\n </div>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/* Edit Form */}\n {canUpdateCatalog && (\n <CatalogForm\n isOpen={showEditForm}\n onClose={() => setShowEditForm(false)}\n onSubmit={handleUpdateCatalog}\n initialData={{\n name: catalog.name,\n description: catalog.description || '',\n visibility: catalog.visibility,\n owner: catalog.ownerName || '',\n tags: catalog.tags || [],\n }}\n title={tr('catalog.editCatalog', 'Edit Catalog')}\n />\n )}\n\n {/* Add Component Dialog */}\n {showAddComponent && canUpdateCatalog && canReadComponents && (\n <AddComponentDialog\n catalogId={id || ''}\n existingComponentIds={components.map((c) => c.id)}\n onAdd={async (componentId) => {\n await addComponentToCatalog({ variables: { catalogId: id, componentId } });\n setSuccessMessage(tr('catalog.componentAdded', 'Component added to catalog'));\n setTimeout(() => setSuccessMessage(null), 3000);\n setShowAddComponent(false);\n }}\n onClose={() => setShowAddComponent(false)}\n tr={tr}\n />\n )}\n\n <ConfirmDialog\n isOpen={showDeleteConfirm}\n onClose={() => setShowDeleteConfirm(false)}\n onConfirm={handleDeleteCatalog}\n title={tr('catalog.deleteCatalog', 'Delete Catalog')}\n message={tr(\n 'catalog.deleteConfirmMessage',\n `Are you sure you want to delete \"${catalog.name}\"? This action cannot be undone.`\n )}\n confirmLabel={tr('common.delete', 'Delete')}\n variant=\"danger\"\n isLoading={isDeleting}\n />\n </MotionPage>\n );\n}\n\n/* ── Dependency Graph Tab ──────────────────────────────────────────────── */\n\n// ---------------------------------------------------------------------------\n// Catalog Dependency Graph — React Flow canvas\n// ---------------------------------------------------------------------------\n\ninterface CatalogGraphNode {\n id: string;\n name: string;\n type: string;\n version?: string | null;\n}\ninterface CatalogGraphEdge {\n source: string;\n target: string;\n version?: string | null;\n dependencyType?: string | null;\n}\n\n// Custom node renders source/target handles for drag-to-connect\nfunction CatalogComponentNode({ data }: { data: { label: React.ReactNode } }) {\n return (\n <>\n <Handle\n type=\"target\"\n position={Position.Left}\n style={{ width: 8, height: 8, background: 'var(--color-border-strong)' }}\n />\n <div>{data.label}</div>\n <Handle\n type=\"source\"\n position={Position.Right}\n style={{ width: 8, height: 8, background: 'var(--color-action-primary-bg)' }}\n />\n </>\n );\n}\n\n// Must be defined outside component to avoid remount on every render\nconst catalogNodeTypes = { catalog: CatalogComponentNode };\n\nfunction buildCatalogFlowElements(\n nodes: CatalogGraphNode[],\n edges: CatalogGraphEdge[]\n): { nodes: Node[]; edges: Edge[] } {\n const COLS = Math.max(1, Math.ceil(Math.sqrt(nodes.length)));\n const COL_W = 220;\n const ROW_H = 120;\n\n // Map dep name → component ID for resolving cross-catalog edges\n const nameToId = new Map(nodes.map((n) => [n.name, n.id]));\n\n // Only edges where the target dep name resolves to a catalog component\n const internalEdges = edges.filter((e) => nameToId.has(e.target));\n\n const flowNodes: Node[] = nodes.map((n, i) => {\n const col = i % COLS;\n const row = Math.floor(i / COLS);\n const outDegree = internalEdges.filter((e) => e.source === n.id).length;\n return {\n id: n.id,\n type: 'catalog',\n position: { x: col * COL_W + 40, y: row * ROW_H + 40 },\n data: {\n label: (\n <div style={{ lineHeight: 1.4, textAlign: 'center' }}>\n <div\n style={{\n fontWeight: 700,\n fontSize: 12,\n maxWidth: 150,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {n.name}\n </div>\n <div\n style={{\n fontSize: 10,\n color:\n outDegree > 0 ? 'var(--color-action-primary-text)' : 'var(--color-text-muted)',\n marginTop: 2,\n }}\n >\n {n.type}\n {n.version ? ` v${n.version}` : ''}\n </div>\n {outDegree > 0 && (\n <div\n style={{ fontSize: 10, marginTop: 3, color: 'var(--color-action-primary-text)' }}\n >\n {outDegree} dep{outDegree !== 1 ? 's' : ''}\n </div>\n )}\n </div>\n ),\n },\n style: {\n background: outDegree > 0 ? 'var(--color-action-primary-bg)' : 'var(--color-bg-sunken)',\n color: outDegree > 0 ? 'var(--color-action-primary-text)' : 'var(--color-text-primary)',\n border: `1px solid ${outDegree > 0 ? 'transparent' : 'var(--color-border-default)'}`,\n borderRadius: 10,\n padding: '10px 14px',\n width: 180,\n fontSize: 12,\n boxShadow: outDegree > 0 ? 'var(--shadow-elevation-2)' : 'none',\n textAlign: 'center' as const,\n cursor: 'pointer',\n },\n };\n });\n\n const flowEdges: Edge[] = internalEdges.map((e, i) => ({\n id: `e-${i}`,\n source: e.source,\n target: nameToId.get(e.target)!,\n label: e.version || undefined,\n animated: e.dependencyType !== 'dev',\n markerEnd: { type: MarkerType.ArrowClosed },\n style: {\n stroke: 'var(--color-border-strong)',\n strokeWidth: 1.5,\n ...(e.dependencyType === 'dev' ? { strokeDasharray: '4 2' } : {}),\n },\n labelStyle: { fontSize: 10, fill: 'var(--color-text-muted)' },\n labelBgStyle: { fill: 'var(--color-bg-surface)', fillOpacity: 0.85 },\n }));\n\n return { nodes: flowNodes, edges: flowEdges };\n}\n\ninterface CatalogFlowProps {\n graphNodes: CatalogGraphNode[];\n graphEdges: CatalogGraphEdge[];\n onComponentClick?: (nodeId: string) => void;\n onConnect?: (sourceId: string, targetId: string) => void;\n}\n\nfunction CatalogFlow({ graphNodes, graphEdges, onComponentClick, onConnect }: CatalogFlowProps) {\n const { nodes: initNodes, edges: initEdges } = useMemo(\n () => buildCatalogFlowElements(graphNodes, graphEdges),\n [graphNodes, graphEdges]\n );\n const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);\n const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);\n\n useEffect(() => {\n const { nodes: n, edges: e } = buildCatalogFlowElements(graphNodes, graphEdges);\n setNodes(n);\n setEdges(e);\n }, [graphNodes, graphEdges, setNodes, setEdges]);\n\n const rows = Math.ceil(graphNodes.length / Math.max(1, Math.ceil(Math.sqrt(graphNodes.length))));\n const canvasHeight = Math.max(380, Math.min(rows * 140 + 120, 600));\n\n const handleNodeClick: NodeMouseHandler = useCallback(\n (_event, node) => {\n onComponentClick?.(node.id);\n },\n [onComponentClick]\n );\n\n const handleConnect = useCallback(\n (connection: Connection) => {\n if (!connection.source || !connection.target) return;\n setEdges((eds) =>\n addEdge(\n {\n ...connection,\n animated: true,\n markerEnd: { type: MarkerType.ArrowClosed },\n style: { stroke: 'var(--color-border-strong)', strokeWidth: 1.5 },\n },\n eds\n )\n );\n onConnect?.(connection.source, connection.target);\n },\n [onConnect, setEdges]\n );\n\n return (\n <div\n className=\"w-full rounded-lg border border-border-default overflow-hidden\"\n style={{ height: canvasHeight, background: 'var(--color-bg-secondary)' }}\n >\n <ReactFlow\n nodes={nodes}\n edges={edges}\n onNodesChange={onNodesChange}\n onEdgesChange={onEdgesChange}\n onNodeClick={handleNodeClick}\n onConnect={handleConnect}\n nodeTypes={catalogNodeTypes}\n fitView\n fitViewOptions={{ padding: 0.25 }}\n minZoom={0.15}\n maxZoom={3}\n panOnDrag\n panOnScroll={false}\n zoomOnScroll\n proOptions={{ hideAttribution: true }}\n >\n <Background\n variant={BackgroundVariant.Dots}\n gap={20}\n size={1}\n className=\"!fill-text-tertiary/10\"\n />\n <Controls\n showInteractive={false}\n style={{\n background: 'var(--color-bg-primary)',\n border: '1px solid var(--color-border-default)',\n borderRadius: 8,\n }}\n className=\"[&_button]:!bg-[var(--color-bg-primary)] [&_button]:!border-[var(--color-border-default)] [&_button]:!fill-[var(--color-text-secondary)] [&_button:hover]:!bg-[var(--color-bg-sunken)]\"\n />\n </ReactFlow>\n </div>\n );\n}\n\nfunction DependencyGraphTab({\n catalogId,\n tr,\n}: {\n catalogId: string;\n tr: (key: string, fallback: string) => string;\n}) {\n const navigate = useVibeNavigate();\n const { data, loading, error, refetch } = useGetCatalogDependencyGraphQuery({\n variables: { catalogId },\n skip: !catalogId,\n fetchPolicy: 'cache-and-network',\n });\n const [updateComponent] = useUpdateComponentMutation();\n\n const graph: GetCatalogDependencyGraphQuery['vibecontrolsCatalogDependencyGraph'] | undefined =\n data?.vibecontrolsCatalogDependencyGraph;\n\n const handleConnect = useCallback(\n async (sourceId: string, targetId: string) => {\n if (!graph) return;\n const targetNode = graph.nodes.find((n) => n.id === targetId);\n if (!targetNode) return;\n\n // Reconstruct source's full dep list from graph edges (service returns all, not just catalog-internal)\n const currentDeps = graph.edges\n .filter((e) => e.source === sourceId)\n .map((e) => ({\n name: e.target,\n version: e.version ?? null,\n type: e.dependencyType ?? null,\n }));\n\n // Skip if already connected\n if (currentDeps.some((d) => d.name === targetNode.name)) return;\n\n const newDeps = [\n ...currentDeps,\n { name: targetNode.name, version: targetNode.version ?? null, type: 'runtime' },\n ];\n\n try {\n await updateComponent({ variables: { id: sourceId, input: { dependencies: newDeps } } });\n await refetch();\n } catch {\n // Edge was added optimistically; refetch will restore server state\n await refetch();\n }\n },\n [graph, updateComponent, refetch]\n );\n\n return (\n <motion.div\n key=\"dependency-graph\"\n initial={{ opacity: 0, y: 8 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -8 }}\n transition={{ duration: 0.2 }}\n className=\"space-y-4\"\n >\n <div className=\"flex items-center justify-between\">\n <h3 className=\"font-semibold text-text-primary flex items-center gap-2\">\n <Network className=\"size-5\" />\n {tr('catalog.dependencyGraph', 'Dependency Graph')}\n </h3>\n <button\n type=\"button\"\n onClick={() => refetch()}\n disabled={loading}\n className=\"p-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n title={tr('common.refresh', 'Refresh')}\n >\n <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />\n </button>\n </div>\n\n {loading && !graph && (\n <LoadingState message={tr('catalog.loadingGraph', 'Loading dependency graph...')} />\n )}\n {error && !graph && (\n <ErrorState\n title={tr('catalog.graphError', 'Failed to load graph')}\n message={error.message}\n onRetry={() => refetch()}\n />\n )}\n\n {graph && graph.nodes.length === 0 && (\n <EmptyState\n icon={<Network className=\"size-8 text-text-secondary\" />}\n title={tr('catalog.noGraphNodes', 'No components in catalog')}\n description={tr(\n 'catalog.noGraphNodesDesc',\n 'Add components to this catalog to visualize the dependency graph'\n )}\n />\n )}\n\n {graph && graph.nodes.length > 0 && (\n <>\n {/* Stats */}\n <div className=\"grid grid-cols-2 gap-4\">\n <Card padding=\"md\">\n <p className=\"text-sm text-text-secondary\">\n {tr('catalog.graphNodes', 'Components')}\n </p>\n <p className=\"text-2xl font-bold text-text-primary\">{graph.nodes.length}</p>\n </Card>\n <Card padding=\"md\">\n <p className=\"text-sm text-text-secondary\">\n {tr('catalog.graphEdges', 'Dependencies')}\n </p>\n <p className=\"text-2xl font-bold text-text-primary\">{graph.edges.length}</p>\n </Card>\n </div>\n\n {/* React Flow canvas */}\n <CatalogFlow\n graphNodes={graph.nodes}\n graphEdges={graph.edges}\n onComponentClick={(nodeId) => navigate(`/components/${nodeId}`)}\n onConnect={handleConnect}\n />\n\n {graph.edges.length === 0 && (\n <p className=\"text-xs text-text-muted text-center\">\n No inter-component dependencies yet. Drag from a node's right handle to another node\n to create a dependency.\n </p>\n )}\n\n {/* Edge table — only when edges exist */}\n {graph.edges.length > 0 && (\n <Card>\n <div className=\"p-4 border-b border-border-default\">\n <h4 className=\"font-medium text-text-primary\">\n {tr('catalog.graphEdgesList', 'Dependency Edges')}\n </h4>\n </div>\n <div className=\"divide-y divide-border-default\">\n {graph.edges.map((edge, idx) => (\n <div key={idx} className=\"p-3 flex items-center gap-3 text-sm\">\n <span className=\"font-medium text-text-primary truncate max-w-[120px]\">\n {graph.nodes.find((n) => n.id === edge.source)?.name || edge.source}\n </span>\n <ArrowRight className=\"size-4 text-text-muted flex-shrink-0\" />\n <span className=\"text-text-primary truncate max-w-[120px]\">\n {graph.nodes.find((n) => n.id === edge.target)?.name || edge.target}\n </span>\n {edge.version && (\n <span className=\"text-xs text-text-muted ml-auto\">{edge.version}</span>\n )}\n {edge.dependencyType && (\n <span className=\"text-xs bg-bg-sunken text-text-secondary px-1.5 py-0.5 rounded\">\n {edge.dependencyType}\n </span>\n )}\n </div>\n ))}\n </div>\n </Card>\n )}\n </>\n )}\n </motion.div>\n );\n}\n\n/* ── Add Component Dialog ──────────────────────────────────────────────── */\n\nfunction AddComponentDialog({\n catalogId,\n existingComponentIds,\n onAdd,\n onClose,\n tr,\n}: {\n catalogId: string;\n existingComponentIds: string[];\n onAdd: (componentId: string) => Promise<void>;\n onClose: () => void;\n tr: (key: string, fallback: string) => string;\n}) {\n const [adding, setAdding] = useState(false);\n const [search, setSearch] = useState('');\n\n const { data, loading } = useListAllComponentsForCatalogQuery({\n fetchPolicy: 'cache-and-network',\n });\n\n type CatalogComponent =\n ListAllComponentsForCatalogQuery['vibecontrolsComponents']['items'][number];\n const available: Array<CatalogComponent> = useMemo(() => {\n const items = data?.vibecontrolsComponents?.items ?? [];\n const filtered = items.filter((c: CatalogComponent) => !existingComponentIds.includes(c.id));\n if (!search) return filtered;\n const q = search.toLowerCase();\n return filtered.filter(\n (c: CatalogComponent) =>\n c.name.toLowerCase().includes(q) || c.type.toString().toLowerCase().includes(q)\n );\n }, [data, existingComponentIds, search]);\n\n const handleAdd = async (componentId: string) => {\n setAdding(true);\n try {\n await onAdd(componentId);\n } finally {\n setAdding(false);\n }\n };\n\n return (\n <div className=\"fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4\">\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n className=\"bg-bg-surface rounded-lg w-full max-w-md max-h-[70vh] flex flex-col\"\n >\n <div className=\"p-4 border-b border-border-default\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('catalog.addComponentTitle', 'Add Component to Catalog')}\n </h2>\n <div className=\"mt-3\">\n <input\n aria-label=\"control\"\n type=\"text\"\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n placeholder={tr('catalog.searchComponents', 'Search components...')}\n className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder text-sm\"\n />\n </div>\n </div>\n <div className=\"flex-1 overflow-y-auto p-2\">\n {loading && <LoadingState message={tr('common.loading', 'Loading...')} />}\n {!loading && available.length === 0 && (\n <div className=\"p-4 text-center text-text-secondary text-sm\">\n {tr('catalog.noAvailableComponents', 'No available components to add')}\n </div>\n )}\n {available.map((comp) => (\n <button\n type=\"button\"\n key={comp.id}\n onClick={() => handleAdd(comp.id)}\n disabled={adding}\n className=\"w-full flex items-center justify-between p-3 rounded-md hover:bg-bg-sunken transition-colors disabled:opacity-50 text-left\"\n >\n <div>\n <p className=\"font-medium text-text-primary text-sm\">{comp.name}</p>\n <p className=\"text-xs text-text-secondary\">\n {comp.type} · {comp.lifecycle}\n </p>\n </div>\n <Plus className=\"size-4 text-text-secondary\" />\n </button>\n ))}\n </div>\n <div className=\"p-4 border-t border-border-default\">\n <button\n type=\"button\"\n onClick={onClose}\n className=\"w-full px-4 py-2 text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n >\n {tr('common.close', 'Close')}\n </button>\n </div>\n </motion.div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,IAAM,KAAsC;CAC1C;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAgB,IAAoB;CAClC,IAAM,EAAE,SAAM,IAAS,EACjB,EAAE,UAAO,IAA2B,EACpC,IAAW,GAAiB,EAC5B,EAAE,kBAAe,WAAW,MAAuB,IAAgB,EACnE,IAAiB,EAAc,EAAiB,aAAa,EAC7D,IAAmB,EAAc,EAAiB,eAAe,EACjE,KAAmB,EAAc,EAAiB,eAAe,EACjE,IAAoB,EAAc,EAAiB,eAAe,EAElE,IAAK,GACR,GAAa,MAA6B;EACzC,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAEpC,CAAC,EAAE,CACJ,EAEK,CAAC,GAAW,KAAgB,GAA8B,IAAc,WAAW,EACnF,CAAC,GAAc,KAAmB,EAAS,GAAM,EACjD,CAAC,GAAkB,KAAuB,EAAS,GAAM,EACzD,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAY,KAAiB,EAAS,GAAM,EAC7C,CAAC,GAAgB,KAAqB,EAAwB,KAAK,EAEnE,EAAE,UAAM,YAAS,WAAO,gBAAY,EAAmB;EAC3D,WAAW,EAAE,IAAI,KAAM,IAAI;EAC3B,MAAM,CAAC,KAAM,KAAsB,CAAC;EACpC,aAAa;EACd,CAAC,EAEI,CAAC,MAAiB,EAAyB,EAAE,gBAAgB,CAAC,aAAa,EAAE,CAAC,EAC9E,CAAC,MAAiB,EAAyB,EAAE,gBAAgB,CAAC,eAAe,EAAE,CAAC,EAChF,CAAC,MAAyB,EAAiC,EAC/D,gBAAgB,CAAC,aAAa,EAC/B,CAAC,EACI,CAAC,MAA8B,EAAsC,EACzE,gBAAgB,CAAC,aAAa,EAC/B,CAAC,EAEI,IAAU,IAAM,uBAAuB,MAEvC,IAAkC,SAC9B,GAAS,cAAc,EAAE,EAAE,KAAK,MAAe;EACrD,IAAM,IAAI,EAAM,aAAa,EAAE;AAC/B,SAAO;GACL,IAAI,EAAE;GACN,MAAM,EAAE;GACR,aAAc,EAAE,eAA0B;GAC1C,MAAM,EAAE;GACR,WAAW,EAAE;GACb,SAAU,EAAE,WAAsB;GAClC,UAAW,EAAE,YAAuB;GACpC,WAAY,EAAE,aAAwB;GACtC,MAAO,EAAE,QAAqB,EAAE;GAChC,WAAW,EAAE;GACb,WAAW,EAAE;GACd;GACD,EACD,CAAC,GAAS,WAAW,CAAC;AAEzB,KAAI,EACF,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,KAAD;GAAG,WAAU;aAAsB;GAAwB,CAAA;EACvD,CAAA;AAEV,KAAI,CAAC,EACH,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,MAAD;IAAI,WAAU;cAA0C;IAAkB,CAAA,EAC1E,kBAAC,KAAD;IAAG,WAAU;cAA8B;IAEvC,CAAA,CACA;;EACF,CAAA;CAGV,IAAM,UAAmB;AACvB,IAAS,YAAY;IAGjB,MAAwB,MAAiC;AAC7D,IAAS,eAAe,EAAU,KAAK;IAGnC,KAAsB,OAAO,MAA8B;AAC3D,GAAC,KAAM,CAAC,MACZ,MAAM,GAAc,EAClB,WAAW;GACT;GACA,OAAO;IACL,MAAM,EAAS;IACf,aAAa,EAAS,eAAe,KAAA;IACrC,YAAY,EAAS;IACrB,WAAW,EAAS,SAAS,KAAA;IAC7B,MAAM,EAAS,KAAK,SAAS,IAAI,EAAS,OAAO,KAAA;IAClD;GACF,EACF,CAAC,EACF,EAAkB,EAAG,0BAA0B,+BAA+B,CAAC,EAC/E,iBAAiB,EAAkB,KAAK,EAAE,IAAK;IAG3C,KAAsB,YAAY;AACjC,SACL;KAAc,GAAK;AACnB,OAAI;AAGF,IAFA,MAAM,GAAc,EAAE,WAAW,EAAE,OAAI,EAAE,CAAC,EAC1C,EAAqB,GAAM,EAC3B,EAAS,YAAY;aACb;AACR,MAAc,GAAM;;;IAIlB,KAAmF;EACvF;GAAE,IAAI;GAAY,OAAO,EAAG,gBAAgB,WAAW;GAAE,MAAM;GAAU;EACzE;GACE,IAAI;GACJ,OAAO,EAAG,sBAAsB,aAAa;GAC7C,MAAM;GACN,OAAO,GAAG,GAAS,kBAAkB;GACtC;EACD;GACE,IAAI;GACJ,OAAO,EAAG,2BAA2B,mBAAmB;GACxD,MAAM;GACP;EACD;GAAE,IAAI;GAAa,OAAO,EAAG,qBAAqB,YAAY;GAAE,MAAM;GAAW;EACjF;GAAE,IAAI;GAAQ,OAAO,EAAG,gBAAgB,OAAO;GAAE,MAAM;GAAU;EACjE;GAAE,IAAI;GAAY,OAAO,EAAG,mBAAmB,WAAW;GAAE,MAAM;GAAU;EAC7E;AAoED,QAjEI,KAAW,CAAC,IAEZ,kBAAC,GAAD;EAAY,WAAU;YAAtB,CACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAU;aAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,EAC/B,EAAG,0BAA0B,mBAAmB,CAC1C;MACT,kBAAC,IAAD,EAAc,SAAQ,UAAW,CAAA,CACtB;MAIb,MAAS,CAAC,IAEV,kBAAC,GAAD;EAAY,WAAU;YAAtB,CACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAU;aAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,EAC/B,EAAG,0BAA0B,mBAAmB,CAC1C;MACT,kBAAC,GAAD;GACE,OAAO,EAAG,sBAAsB,yBAAyB;GACzD,SAAS,GAAM;GACf,eAAe,IAAS;GACxB,CAAA,CACS;MAIZ,IA8BH,kBAAC,GAAD;EAAY,WAAU;YAAtB;GAEG,KACC,kBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA;GAIR,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;cAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,EAC/B,EAAG,0BAA0B,mBAAmB,CAC1C;;GAGT,kBAAC,GAAD;IACE,OAAO,EAAQ;IACf,aAAa,EAAQ,eAAe,EAAG,yBAAyB,iBAAiB;IACjF,SACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,IAAD;OACE,QAAO;OACP,UAAU;QAAE,IAAI,EAAQ;QAAI,MAAM,EAAQ;QAAM;OAChD,OAAO,EAAG,iBAAiB,QAAQ;OACnC,SAAQ;OACR,CAAA;MACF,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,IAAS;OACxB,UAAU;OACV,WAAU;OACV,OAAO,EAAG,kBAAkB,UAAU;iBAEtC,kBAAC,GAAD,EAAW,WAAW,UAAU,IAAU,iBAAiB,MAAQ,CAAA;OAC5D,CAAA;MACT,kBAAC,QAAD;OACE,WAAW,oEACT,EAAQ,eAAe,WACnB,kDACA,EAAQ,eAAe,aACrB,kDACA;iBAGP,EAAQ;OACJ,CAAA;MACH;;IAER,CAAA;GAEF,kBAAC,IAAD;IAAa,MAAM,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA;cAC/C,EACC,yBACA,+TACD;IACW,CAAA;GAGd,kBAAC,GAAD;IAAY,SAAS;IAAM,WAAU;cAArC;KACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MACE,OAAO,EAAG,sBAAsB,aAAa;MAC7C,OAAO,EAAQ,kBAAkB;MACjC,MAAM,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA;MACnC,CAAA,EACS,CAAA;KACb,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MACE,OAAO,EAAG,iBAAiB,QAAQ;MACnC,OAAO,EAAQ,aAAa;MAC5B,MAAM,kBAAC,IAAD,EAAK,WAAU,UAAW,CAAA;MAChC,CAAA,EACS,CAAA;KACb,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MACE,OAAO,EAAG,qBAAqB,QAAQ;MACvC,OAAO,EAAQ,iBAAiB;MAChC,MAAM,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA;MACrC,CAAA,EACS,CAAA;KACF;;GAGb,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,IAAD,EAAK,WAAU,UAAW,CAAA,EAC1B,kBAAC,MAAD;KAAI,WAAU;eAAmC,EAAG,gBAAgB,OAAO;KAAM,CAAA,CAC7E;OACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KAAiB,YAAW;KAAuB,UAAU,EAAQ;KAAM,CAAA;IACvE,CAAA,CACD,EAAA,CAAA;GAGP,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAU;KACV,cAAY,EAAG,yBAAyB,eAAe;eAEtD,GAAK,KAAK,MAAQ;MACjB,IAAM,IAAO,EAAI,MACX,IAAc,MAAc,EAAI;AACtC,aACE,kBAAC,UAAD;OACE,MAAK;OAEL,eAAe,EAAa,EAAI,GAAG;OACnC,WAAW,iJACT,IACI,sDACA;OAEN,iBAAe;OACf,MAAK;iBAVP;QAYE,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA;QAC1B,EAAI;QACJ,EAAI,SACH,kBAAC,QAAD;SACE,WAAW,2EACT,IACI,oDACA;mBAGL,EAAI;SACA,CAAA;QAEF;SAvBF,EAAI,GAuBF;OAEX;KACE,CAAA;IACF,CAAA;GAGN,kBAAC,IAAD;IAAiB,MAAK;cAAtB;KACG,MAAc,cACb,kBAAC,EAAO,KAAR;MAEE,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG;MAC7B,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG;MAC7B,MAAM;OAAE,SAAS;OAAG,GAAG;OAAI;MAC3B,YAAY,EAAE,UAAU,IAAK;MAC7B,WAAU;gBANZ;OAQG,EAAQ,eACP,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,KAAD;SAAG,WAAU;mBAAqB,EAAQ;SAAgB,CAAA;QACtD,CAAA,EACD,CAAA;OAGT,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,oBAAoB,WAAW;SAChC,CAAA;QACD,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAuB,EAAG,0BAA0B,QAAQ;WAAK,CAAA,EAC9E,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAQ,aAAa,EAAG,gBAAgB,QAAQ;WAC/C,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAuB,EAAG,sBAAsB,aAAa;WAAK,CAAA,EAC/E,kBAAC,KAAD;WAAG,WAAU;qBAAiC,EAAQ;WAAe,CAAA,CACjE,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAuB,EAAG,kBAAkB,UAAU;WAAK,CAAA,EACxE,kBAAC,KAAD;WAAG,WAAU;qBACV,IAAI,KAAK,EAAQ,UAAU,CAAC,oBAAoB;WAC/C,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAuB,EAAG,kBAAkB,UAAU;WAAK,CAAA,EACxE,kBAAC,KAAD;WAAG,WAAU;qBACV,IAAI,KAAK,EAAQ,UAAU,CAAC,oBAAoB;WAC/C,CAAA,CACA,EAAA,CAAA;UACF;;QACF,CAAA,CACD,EAAA,CAAA;OAEN,EAAQ,MAAM,SAAS,KACtB,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,gBAAgB,OAAO;SACxB,CAAA,EACL,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAQ,KAAK,KAAK,MACjB,kBAAC,QAAD;UAEE,WAAU;oBAET;UACI,EAJA,EAIA,CACP;SACE,CAAA,CACF;WACD,CAAA;OAEE;QApEP,WAoEO;KAGd,MAAc,gBACb,kBAAC,EAAO,KAAR;MAEE,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG;MAC7B,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG;MAC7B,MAAM;OAAE,SAAS;OAAG,GAAG;OAAI;MAC3B,YAAY,EAAE,UAAU,IAAK;MAC7B,WAAU;gBANZ,CAQE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,EAAW;SAAQ;SACnB,EAAG,+BAA+B,6BAA6B;SAC9D;WACH,KAAoB,KACnB,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAoB,GAAK;QACxC,WAAU;kBAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA,EAC1B,EAAG,wBAAwB,gBAAgB,CACrC;UAEP;UACL,EAAW,SAAS,IACnB,kBAAC,GAAD;OACE,SAAS;OACT,WAAU;iBAET,EAAW,KAAK,MACf,kBAAC,GAAD,EAAA,UACE,kBAAC,IAAD;QAA0B;QAAW,QAAQ;QAAwB,CAAA,EAC1D,EAFI,EAAU,GAEd,CACb;OACS,CAAA,GAEb,kBAAC,GAAD;OACE,MAAM,kBAAC,GAAD,EAAQ,WAAU,8BAA+B,CAAA;OACvD,OAAO,EAAG,wBAAwB,gBAAgB;OAClD,aAAa,EACX,mCACA,+CACD;OACD,CAAA,CAEO;QA5CP,aA4CO;KAGd,MAAc,sBAAsB,kBAAC,IAAD;MAAoB,WAAW,KAAM;MAAQ;MAAM,CAAA;KAEvF,MAAc,eACb,kBAAC,EAAO,KAAR;MAEE,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG;MAC7B,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG;MAC7B,MAAM;OAAE,SAAS;OAAG,GAAG;OAAI;MAC3B,YAAY,EAAE,UAAU,IAAK;MAC7B,WAAU;gBAEV,kBAAC,IAAD;OAAgB,WAAU;OAAU,SAAS,KAAM;OAAM,CAAA;MAC9C,EARP,YAQO;KAGd,MAAc,UACb,kBAAC,EAAO,KAAR;MAEE,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG;MAC7B,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG;MAC7B,MAAM;OAAE,SAAS;OAAG,GAAG;OAAI;MAC3B,YAAY,EAAE,UAAU,IAAK;MAC7B,WAAU;gBAEV,kBAAC,IAAD;OAAc,WAAU;OAAU,SAAS,KAAM;OAAM,CAAA;MAC5C,EARP,OAQO;KAGd,MAAc,cACb,kBAAC,EAAO,KAAR;MAEE,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG;MAC7B,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG;MAC7B,MAAM;OAAE,SAAS;OAAG,GAAG;OAAI;MAC3B,YAAY,EAAE,UAAU,IAAK;gBAE7B,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,KACC,kBAAC,GAAD;QAAM,SAAQ;kBAAd,CACE,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,uBAAuB,eAAe;SACvC,CAAA,EACL,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAgB,GAAK;SACpC,WAAU;mBAET,EAAG,uBAAuB,eAAe;SACnC,CAAA,CACJ;WAER,MACC,kBAAC,GAAD;QAAM,SAAQ;kBAAd;SACE,kBAAC,MAAD;UAAI,WAAU;oBACX,EAAG,sBAAsB,cAAc;UACrC,CAAA;SACL,kBAAC,KAAD;UAAG,WAAU;oBACV,EACC,yBACA,qFACD;UACC,CAAA;SACJ,kBAAC,UAAD;UACE,MAAK;UACL,eAAY;UACZ,eAAe,EAAqB,GAAK;UACzC,WAAU;oBAJZ,CAME,kBAAC,IAAD;WAAQ,WAAU;WAAS,eAAY;WAAS,CAAA,EAC/C,EAAG,yBAAyB,iBAAiB,CACvC;;SACJ;UAEL;;MACK,EA5CP,WA4CO;KAEC;;GAGjB,KACC,kBAAC,IAAD;IACE,QAAQ;IACR,eAAe,EAAgB,GAAM;IACrC,UAAU;IACV,aAAa;KACX,MAAM,EAAQ;KACd,aAAa,EAAQ,eAAe;KACpC,YAAY,EAAQ;KACpB,OAAO,EAAQ,aAAa;KAC5B,MAAM,EAAQ,QAAQ,EAAE;KACzB;IACD,OAAO,EAAG,uBAAuB,eAAe;IAChD,CAAA;GAIH,KAAoB,KAAoB,KACvC,kBAAC,IAAD;IACE,WAAW,KAAM;IACjB,sBAAsB,EAAW,KAAK,MAAM,EAAE,GAAG;IACjD,OAAO,OAAO,MAAgB;AAI5B,KAHA,MAAM,GAAsB,EAAE,WAAW;MAAE,WAAW;MAAI;MAAa,EAAE,CAAC,EAC1E,EAAkB,EAAG,0BAA0B,6BAA6B,CAAC,EAC7E,iBAAiB,EAAkB,KAAK,EAAE,IAAK,EAC/C,EAAoB,GAAM;;IAE5B,eAAe,EAAoB,GAAM;IACrC;IACJ,CAAA;GAGJ,kBAAC,GAAD;IACE,QAAQ;IACR,eAAe,EAAqB,GAAM;IAC1C,WAAW;IACX,OAAO,EAAG,yBAAyB,iBAAiB;IACpD,SAAS,EACP,gCACA,oCAAoC,EAAQ,KAAK,kCAClD;IACD,cAAc,EAAG,iBAAiB,SAAS;IAC3C,SAAQ;IACR,WAAW;IACX,CAAA;GACS;MA9ZX,kBAAC,GAAD;EAAY,WAAU;YAAtB,CACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAU;aAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,EAC/B,EAAG,0BAA0B,mBAAmB,CAC1C;MACT,kBAAC,GAAD;GACE,MAAM,kBAAC,GAAD,EAAU,WAAU,8BAA+B,CAAA;GACzD,OAAO,EAAG,oBAAoB,oBAAoB;GAClD,aAAa,uBAAuB,EAAG;GACvC,QACE,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;cAET,EAAG,0BAA0B,mBAAmB;IAC1C,CAAA;GAEX,CAAA,CACS;;;AA+ZnB,SAAS,EAAqB,EAAE,WAA8C;AAC5E,QACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GACE,MAAK;GACL,UAAU,EAAS;GACnB,OAAO;IAAE,OAAO;IAAG,QAAQ;IAAG,YAAY;IAA8B;GACxE,CAAA;EACF,kBAAC,OAAD,EAAA,UAAM,EAAK,OAAY,CAAA;EACvB,kBAAC,GAAD;GACE,MAAK;GACL,UAAU,EAAS;GACnB,OAAO;IAAE,OAAO;IAAG,QAAQ;IAAG,YAAY;IAAkC;GAC5E,CAAA;EACD,EAAA,CAAA;;AAKP,IAAM,IAAmB,EAAE,SAAS,GAAsB;AAE1D,SAAS,EACP,GACA,GACkC;CAClC,IAAM,IAAO,KAAK,IAAI,GAAG,KAAK,KAAK,KAAK,KAAK,EAAM,OAAO,CAAC,CAAC,EAKtD,IAAW,IAAI,IAAI,EAAM,KAAK,MAAM,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,EAGpD,IAAgB,EAAM,QAAQ,MAAM,EAAS,IAAI,EAAE,OAAO,CAAC;AA6EjE,QAAO;EAAE,OA3EiB,EAAM,KAAK,GAAG,MAAM;GAC5C,IAAM,IAAM,IAAI,GACV,IAAM,KAAK,MAAM,IAAI,EAAK,EAC1B,IAAY,EAAc,QAAQ,MAAM,EAAE,WAAW,EAAE,GAAG,CAAC;AACjE,UAAO;IACL,IAAI,EAAE;IACN,MAAM;IACN,UAAU;KAAE,GAAG,IAAM,MAAQ;KAAI,GAAG,IAAM,MAAQ;KAAI;IACtD,MAAM,EACJ,OACE,kBAAC,OAAD;KAAK,OAAO;MAAE,YAAY;MAAK,WAAW;MAAU;eAApD;MACE,kBAAC,OAAD;OACE,OAAO;QACL,YAAY;QACZ,UAAU;QACV,UAAU;QACV,UAAU;QACV,cAAc;QACd,YAAY;QACb;iBAEA,EAAE;OACC,CAAA;MACN,kBAAC,OAAD;OACE,OAAO;QACL,UAAU;QACV,OACE,IAAY,IAAI,qCAAqC;QACvD,WAAW;QACZ;iBANH,CAQG,EAAE,MACF,EAAE,UAAU,KAAK,EAAE,YAAY,GAC5B;;MACL,IAAY,KACX,kBAAC,OAAD;OACE,OAAO;QAAE,UAAU;QAAI,WAAW;QAAG,OAAO;QAAoC;iBADlF;QAGG;QAAU;QAAK,MAAc,IAAU,KAAN;QAC9B;;MAEJ;QAET;IACD,OAAO;KACL,YAAY,IAAY,IAAI,mCAAmC;KAC/D,OAAO,IAAY,IAAI,qCAAqC;KAC5D,QAAQ,aAAa,IAAY,IAAI,gBAAgB;KACrD,cAAc;KACd,SAAS;KACT,OAAO;KACP,UAAU;KACV,WAAW,IAAY,IAAI,8BAA8B;KACzD,WAAW;KACX,QAAQ;KACT;IACF;IACD;EAkByB,OAhBD,EAAc,KAAK,GAAG,OAAO;GACrD,IAAI,KAAK;GACT,QAAQ,EAAE;GACV,QAAQ,EAAS,IAAI,EAAE,OAAO;GAC9B,OAAO,EAAE,WAAW,KAAA;GACpB,UAAU,EAAE,mBAAmB;GAC/B,WAAW,EAAE,MAAM,EAAW,aAAa;GAC3C,OAAO;IACL,QAAQ;IACR,aAAa;IACb,GAAI,EAAE,mBAAmB,QAAQ,EAAE,iBAAiB,OAAO,GAAG,EAAE;IACjE;GACD,YAAY;IAAE,UAAU;IAAI,MAAM;IAA2B;GAC7D,cAAc;IAAE,MAAM;IAA2B,aAAa;IAAM;GACrE,EAAE;EAE0C;;AAU/C,SAAS,EAAY,EAAE,eAAY,eAAY,qBAAkB,gBAA+B;CAC9F,IAAM,EAAE,OAAO,GAAW,OAAO,MAAc,QACvC,EAAyB,GAAY,EAAW,EACtD,CAAC,GAAY,EAAW,CACzB,EACK,CAAC,GAAO,GAAU,KAAiB,EAAc,EAAU,EAC3D,CAAC,GAAO,GAAU,KAAiB,EAAc,EAAU;AAEjE,SAAgB;EACd,IAAM,EAAE,OAAO,GAAG,OAAO,MAAM,EAAyB,GAAY,EAAW;AAE/E,EADA,EAAS,EAAE,EACX,EAAS,EAAE;IACV;EAAC;EAAY;EAAY;EAAU;EAAS,CAAC;CAEhD,IAAM,IAAO,KAAK,KAAK,EAAW,SAAS,KAAK,IAAI,GAAG,KAAK,KAAK,KAAK,KAAK,EAAW,OAAO,CAAC,CAAC,CAAC,EAC1F,IAAe,KAAK,IAAI,KAAK,KAAK,IAAI,IAAO,MAAM,KAAK,IAAI,CAAC,EAE7D,IAAoC,GACvC,GAAQ,MAAS;AAChB,MAAmB,EAAK,GAAG;IAE7B,CAAC,EAAiB,CACnB,EAEK,IAAgB,GACnB,MAA2B;AACtB,GAAC,EAAW,UAAU,CAAC,EAAW,WACtC,GAAU,MACR,EACE;GACE,GAAG;GACH,UAAU;GACV,WAAW,EAAE,MAAM,EAAW,aAAa;GAC3C,OAAO;IAAE,QAAQ;IAA8B,aAAa;IAAK;GAClE,EACD,EACD,CACF,EACD,IAAY,EAAW,QAAQ,EAAW,OAAO;IAEnD,CAAC,GAAW,EAAS,CACtB;AAED,QACE,kBAAC,OAAD;EACE,WAAU;EACV,OAAO;GAAE,QAAQ;GAAc,YAAY;GAA6B;YAExE,kBAAC,GAAD;GACS;GACA;GACQ;GACA;GACf,aAAa;GACb,WAAW;GACX,WAAW;GACX,SAAA;GACA,gBAAgB,EAAE,SAAS,KAAM;GACjC,SAAS;GACT,SAAS;GACT,WAAA;GACA,aAAa;GACb,cAAA;GACA,YAAY,EAAE,iBAAiB,IAAM;aAfvC,CAiBE,kBAAC,IAAD;IACE,SAAS,EAAkB;IAC3B,KAAK;IACL,MAAM;IACN,WAAU;IACV,CAAA,EACF,kBAAC,GAAD;IACE,iBAAiB;IACjB,OAAO;KACL,YAAY;KACZ,QAAQ;KACR,cAAc;KACf;IACD,WAAU;IACV,CAAA,CACQ;;EACR,CAAA;;AAIV,SAAS,GAAmB,EAC1B,cACA,SAIC;CACD,IAAM,IAAW,GAAiB,EAC5B,EAAE,SAAM,YAAS,UAAO,eAAY,EAAkC;EAC1E,WAAW,EAAE,cAAW;EACxB,MAAM,CAAC;EACP,aAAa;EACd,CAAC,EACI,CAAC,KAAmB,GAA4B,EAEhD,IACJ,GAAM,oCAEF,IAAgB,EACpB,OAAO,GAAkB,MAAqB;AAC5C,MAAI,CAAC,EAAO;EACZ,IAAM,IAAa,EAAM,MAAM,MAAM,MAAM,EAAE,OAAO,EAAS;AAC7D,MAAI,CAAC,EAAY;EAGjB,IAAM,IAAc,EAAM,MACvB,QAAQ,MAAM,EAAE,WAAW,EAAS,CACpC,KAAK,OAAO;GACX,MAAM,EAAE;GACR,SAAS,EAAE,WAAW;GACtB,MAAM,EAAE,kBAAkB;GAC3B,EAAE;AAGL,MAAI,EAAY,MAAM,MAAM,EAAE,SAAS,EAAW,KAAK,CAAE;EAEzD,IAAM,IAAU,CACd,GAAG,GACH;GAAE,MAAM,EAAW;GAAM,SAAS,EAAW,WAAW;GAAM,MAAM;GAAW,CAChF;AAED,MAAI;AAEF,GADA,MAAM,EAAgB,EAAE,WAAW;IAAE,IAAI;IAAU,OAAO,EAAE,cAAc,GAAS;IAAE,EAAE,CAAC,EACxF,MAAM,GAAS;UACT;AAEN,SAAM,GAAS;;IAGnB;EAAC;EAAO;EAAiB;EAAQ,CAClC;AAED,QACE,kBAAC,EAAO,KAAR;EAEE,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,MAAM;GAAE,SAAS;GAAG,GAAG;GAAI;EAC3B,YAAY,EAAE,UAAU,IAAK;EAC7B,WAAU;YANZ;GAQE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAAd,CACE,kBAAC,GAAD,EAAS,WAAU,UAAW,CAAA,EAC7B,EAAG,2BAA2B,mBAAmB,CAC/C;QACL,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,GAAS;KACxB,UAAU;KACV,WAAU;KACV,OAAO,EAAG,kBAAkB,UAAU;eAEtC,kBAAC,GAAD,EAAW,WAAW,UAAU,IAAU,iBAAiB,MAAQ,CAAA;KAC5D,CAAA,CACL;;GAEL,KAAW,CAAC,KACX,kBAAC,GAAD,EAAc,SAAS,EAAG,wBAAwB,8BAA8B,EAAI,CAAA;GAErF,KAAS,CAAC,KACT,kBAAC,GAAD;IACE,OAAO,EAAG,sBAAsB,uBAAuB;IACvD,SAAS,EAAM;IACf,eAAe,GAAS;IACxB,CAAA;GAGH,KAAS,EAAM,MAAM,WAAW,KAC/B,kBAAC,GAAD;IACE,MAAM,kBAAC,GAAD,EAAS,WAAU,8BAA+B,CAAA;IACxD,OAAO,EAAG,wBAAwB,2BAA2B;IAC7D,aAAa,EACX,4BACA,mEACD;IACD,CAAA;GAGH,KAAS,EAAM,MAAM,SAAS,KAC7B,kBAAA,GAAA,EAAA,UAAA;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAM,SAAQ;gBAAd,CACE,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAG,sBAAsB,aAAa;OACrC,CAAA,EACJ,kBAAC,KAAD;OAAG,WAAU;iBAAwC,EAAM,MAAM;OAAW,CAAA,CACvE;SACP,kBAAC,GAAD;MAAM,SAAQ;gBAAd,CACE,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAG,sBAAsB,eAAe;OACvC,CAAA,EACJ,kBAAC,KAAD;OAAG,WAAU;iBAAwC,EAAM,MAAM;OAAW,CAAA,CACvE;QACH;;IAGN,kBAAC,GAAD;KACE,YAAY,EAAM;KAClB,YAAY,EAAM;KAClB,mBAAmB,MAAW,EAAS,eAAe,IAAS;KAC/D,WAAW;KACX,CAAA;IAED,EAAM,MAAM,WAAW,KACtB,kBAAC,KAAD;KAAG,WAAU;eAAsC;KAG/C,CAAA;IAIL,EAAM,MAAM,SAAS,KACpB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,0BAA0B,mBAAmB;MAC9C,CAAA;KACD,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAM,MAAM,KAAK,GAAM,MACtB,kBAAC,OAAD;MAAe,WAAU;gBAAzB;OACE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAM,MAAM,MAAM,MAAM,EAAE,OAAO,EAAK,OAAO,EAAE,QAAQ,EAAK;QACxD,CAAA;OACP,kBAAC,GAAD,EAAY,WAAU,wCAAyC,CAAA;OAC/D,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAM,MAAM,MAAM,MAAM,EAAE,OAAO,EAAK,OAAO,EAAE,QAAQ,EAAK;QACxD,CAAA;OACN,EAAK,WACJ,kBAAC,QAAD;QAAM,WAAU;kBAAmC,EAAK;QAAe,CAAA;OAExE,EAAK,kBACJ,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAK;QACD,CAAA;OAEL;QAhBI,EAgBJ,CACN;KACE,CAAA,CACD,EAAA,CAAA;IAER,EAAA,CAAA;GAEM;IA/GP,mBA+GO;;AAMjB,SAAS,GAAmB,EAC1B,cACA,yBACA,UACA,YACA,SAOC;CACD,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,CAAC,GAAQ,KAAa,EAAS,GAAG,EAElC,EAAE,SAAM,eAAY,EAAoC,EAC5D,aAAa,qBACd,CAAC,EAII,IAAqC,QAAc;EAEvD,IAAM,KADQ,GAAM,wBAAwB,SAAS,EAAE,EAChC,QAAQ,MAAwB,CAAC,EAAqB,SAAS,EAAE,GAAG,CAAC;AAC5F,MAAI,CAAC,EAAQ,QAAO;EACpB,IAAM,IAAI,EAAO,aAAa;AAC9B,SAAO,EAAS,QACb,MACC,EAAE,KAAK,aAAa,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,UAAU,CAAC,aAAa,CAAC,SAAS,EAAE,CAClF;IACA;EAAC;EAAM;EAAsB;EAAO,CAAC,EAElC,IAAY,OAAO,MAAwB;AAC/C,IAAU,GAAK;AACf,MAAI;AACF,SAAM,EAAM,EAAY;YAChB;AACR,KAAU,GAAM;;;AAIpB,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,EAAO,KAAR;GACE,SAAS;IAAE,SAAS;IAAG,OAAO;IAAM;GACpC,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GACjC,WAAU;aAHZ;IAKE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,6BAA6B,2BAA2B;MACzD,CAAA,EACL,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,SAAD;OACE,cAAW;OACX,MAAK;OACL,OAAO;OACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;OAC1C,aAAa,EAAG,4BAA4B,uBAAuB;OACnE,WAAU;OACV,CAAA;MACE,CAAA,CACF;;IACN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,KAAW,kBAAC,GAAD,EAAc,SAAS,EAAG,kBAAkB,aAAa,EAAI,CAAA;MACxE,CAAC,KAAW,EAAU,WAAW,KAChC,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAG,iCAAiC,iCAAiC;OAClE,CAAA;MAEP,EAAU,KAAK,MACd,kBAAC,UAAD;OACE,MAAK;OAEL,eAAe,EAAU,EAAK,GAAG;OACjC,UAAU;OACV,WAAU;iBALZ,CAOE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAyC,EAAK;QAAS,CAAA,EACpE,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,EAAK;SAAK;SAAW,EAAK;SACzB;UACA,EAAA,CAAA,EACN,kBAAC,GAAD,EAAM,WAAU,8BAA+B,CAAA,CACxC;SAZF,EAAK,GAYH,CACT;MACE;;IACN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAET,EAAG,gBAAgB,QAAQ;MACrB,CAAA;KACL,CAAA;IACK;;EACT,CAAA"}

package/dist/pages/CatalogDocsPage.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"CatalogDocsPage.js","names":[],"sources":["../../src/pages/CatalogDocsPage.tsx"],"sourcesContent":["import { useParams } from 'react-router';\nimport { useVibeControls } from '@/providers/VibeControlsProvider';\nimport { DocsFullScreenViewer } from '@/components/docs/DocsFullScreenViewer';\n\nexport function CatalogDocsPage() {\n const { id: catalogId } = useParams<{ id: string }>();\n const { basePath } = useVibeControls();\n const base = basePath || '';\n\n return (\n <DocsFullScreenViewer\n ownerType=\"CATALOG\"\n ownerId={catalogId || ''}\n backLabel=\"Back to Catalog\"\n backPath={`${base}/catalogs/${catalogId}`}\n editPath={`${base}/catalogs/${catalogId}?tab=docs`}\n />\n );\n}\n"],"mappings":";;;;;AAIA,SAAgB,IAAkB;CAChC,IAAM,EAAE,IAAI,MAAc,GAA2B,EAC/C,EAAE,gBAAa,GAAiB,EAChC,IAAO,KAAY;AAEzB,QACE,kBAAC,GAAD;EACE,WAAU;EACV,SAAS,KAAa;EACtB,WAAU;EACV,UAAU,GAAG,EAAK,YAAY;EAC9B,UAAU,GAAG,EAAK,YAAY,EAAU;EACxC,CAAA"}

package/dist/pages/CatalogPage.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"CatalogPage.js","names":[],"sources":["../../src/pages/CatalogPage.tsx"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { Plus, BookOpen, RefreshCw } from 'lucide-react';\nimport { CatalogCard } from '@/components/catalog';\nimport type { CatalogCardData } from '@/components/catalog';\nimport { CatalogForm } from '@/components/catalog';\nimport type { CatalogFormData } from '@/components/catalog';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useDraftEntityTags } from '@/hooks/useDraftEntityTags';\nimport {\n PageHeader,\n SearchInput,\n FilterDropdown,\n EmptyState,\n ErrorState,\n GetHelpButton,\n QuotaExhaustedDialog,\n} from '@/components/shared';\nimport { isQuotaExhaustedError } from '@/utils/quotaUtils';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { AnimatePresence } from 'framer-motion';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useListCatalogsQuery, useCreateCatalogMutation } from '@/generated/wspace-operations';\n\nexport function CatalogPage() {\n const navigate = useVibeNavigate();\n const { t } = useI18n();\n const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n const canCreateCatalog = hasPermission(VIBE_PERMISSIONS.CATALOG_CREATE);\n const canReadCatalog = hasPermission(VIBE_PERMISSIONS.CATALOG_READ);\n\n const tr = useCallback(\n (key: string, fallback: string, params?: Record<string, string | number>): string => {\n const translated = t(key, params);\n const template = translated === key ? fallback : translated;\n if (!params) return template;\n return Object.entries(params).reduce(\n (acc, [paramKey, paramValue]) => acc.replace(`{{${paramKey}}}`, String(paramValue)),\n template\n );\n },\n [t]\n );\n\n const visibilityOptions = [\n { value: 'all', label: tr('catalog.allVisibility', 'All Visibility') },\n { value: 'PRIVATE', label: tr('catalog.visibilityPrivate', 'Private') },\n { value: 'INTERNAL', label: tr('catalog.visibilityInternal', 'Internal') },\n { value: 'PUBLIC', label: tr('catalog.visibilityPublic', 'Public') },\n ];\n\n const PAGE_SIZE = 50;\n const [searchQuery, setSearchQuery] = useState('');\n const [visibilityFilter, setVisibilityFilter] = useState('all');\n const [showCreateForm, setShowCreateForm] = useState(false);\n const [showQuotaExhausted, setShowQuotaExhausted] = useState(false);\n const [successMessage, setSuccessMessage] = useState<string | null>(null);\n const [accumulated, setAccumulated] = useState<CatalogCardData[]>([]);\n const [loadingMore, setLoadingMore] = useState(false);\n\n const { data, loading, error, refetch, fetchMore } = useListCatalogsQuery({\n variables: {\n filter: {\n visibility:\n visibilityFilter !== 'all'\n ? (visibilityFilter as 'PRIVATE' | 'INTERNAL' | 'PUBLIC')\n : undefined,\n search: searchQuery || undefined,\n },\n pagination: { limit: PAGE_SIZE, offset: 0 },\n },\n skip: permissionsLoading || !canReadCatalog,\n fetchPolicy: 'cache-and-network',\n notifyOnNetworkStatusChange: true,\n });\n\n const [createCatalog] = useCreateCatalogMutation({ refetchQueries: ['ListCatalogs'] });\n const { setDraftTagIds, flushTags } = useDraftEntityTags('VIBECONTROLS_CATALOG');\n\n const mapItems = useCallback(\n (items: ReadonlyArray<Record<string, unknown>>): CatalogCardData[] =>\n items.map((item) => ({\n id: item.id as string,\n name: item.name as string,\n description: (item.description as string) || null,\n visibility: item.visibility as CatalogCardData['visibility'],\n componentCount: (item.componentCount as number) || 0,\n vibeCount: (item.vibeCount as number) || 0,\n tags: (item.tags as string[]) || [],\n createdAt: item.createdAt as string,\n updatedAt: item.updatedAt as string,\n })),\n []\n );\n\n // Mirror the watched query's items into local state. fetchMore below uses\n // updateQuery to append new pages into the watched data, so this single\n // effect handles both the initial load and load-more cases.\n useEffect(() => {\n const items = data?.vibecontrolsCatalogs?.items ?? [];\n setAccumulated(mapItems(items as ReadonlyArray<Record<string, unknown>>));\n }, [data?.vibecontrolsCatalogs?.items, mapItems]);\n\n const total = data?.vibecontrolsCatalogs?.total ?? 0;\n const hasMore = accumulated.length < total;\n const filteredCatalogs = accumulated;\n const catalogs = accumulated;\n\n const handleLoadMore = useCallback(async () => {\n if (loadingMore || !hasMore) return;\n setLoadingMore(true);\n try {\n await fetchMore({\n variables: { pagination: { limit: PAGE_SIZE, offset: accumulated.length } },\n updateQuery: (prev, { fetchMoreResult }) => {\n if (!fetchMoreResult?.vibecontrolsCatalogs) return prev;\n const prevList = prev.vibecontrolsCatalogs;\n const nextList = fetchMoreResult.vibecontrolsCatalogs;\n return {\n ...prev,\n vibecontrolsCatalogs: {\n ...nextList,\n items: [...(prevList?.items ?? []), ...nextList.items],\n total: nextList.total,\n hasMore: nextList.hasMore,\n },\n };\n },\n });\n } finally {\n setLoadingMore(false);\n }\n }, [fetchMore, accumulated.length, loadingMore, hasMore]);\n\n if (permissionsLoading)\n return (\n <div className=\"flex items-center justify-center min-h-[400px]\">\n <p className=\"text-text-secondary\">Loading permissions…</p>\n </div>\n );\n if (!canReadCatalog)\n return (\n <div className=\"flex items-center justify-center min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <h2 className=\"text-lg font-semibold text-text-primary tracking-tight\">Access Denied</h2>\n <p className=\"text-sm text-text-secondary\">\n You don't have permission to access this page.\n </p>\n </div>\n </div>\n );\n\n const handleCatalogSelect = (catalog: CatalogCardData) => {\n navigate(`/catalogs/${catalog.id}`);\n };\n\n const handleCreateCatalog = async (formData: CatalogFormData) => {\n try {\n const res = await createCatalog({\n variables: {\n input: {\n name: formData.name,\n description: formData.description || undefined,\n visibility: formData.visibility,\n ownerName: formData.owner || undefined,\n tags: formData.tags.length > 0 ? formData.tags : undefined,\n },\n },\n });\n if (res.error && isQuotaExhaustedError(res.error)) {\n setShowCreateForm(false);\n setShowQuotaExhausted(true);\n return;\n }\n const newCatalogId = res.data?.createVibecontrolsCatalog?.id;\n if (!newCatalogId) throw new Error(tr('catalog.failedCreate', 'Failed to create catalog'));\n await flushTags(newCatalogId);\n setShowCreateForm(false);\n setSuccessMessage(tr('catalog.createdSuccess', 'Catalog created successfully'));\n await refetch();\n setTimeout(() => setSuccessMessage(null), 3000);\n } catch (err) {\n if (isQuotaExhaustedError(err)) {\n setShowCreateForm(false);\n setShowQuotaExhausted(true);\n return;\n }\n throw err;\n }\n };\n\n if (error && catalogs.length === 0) {\n return (\n <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n <ErrorState\n title={tr('catalog.failedLoad', 'Failed to load catalogs')}\n message={error.message}\n onRetry={() => refetch()}\n />\n </MotionPage>\n );\n }\n\n return (\n <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n <PageHeader\n title={tr('catalog.title', 'Catalogs')}\n description={tr('catalog.description', '{{total}} catalogs', {\n total: catalogs.length,\n })}\n actions={\n // Boff UI 2.0: single primary CTA (Create), Refresh in the overflow.\n <CTAOverflowMenu\n primary={\n canCreateCatalog\n ? {\n label: tr('catalog.createCatalog', 'Create Catalog'),\n onSelect: () => setShowCreateForm(true),\n icon: <Plus className=\"size-4\" />,\n }\n : undefined\n }\n actions={[\n {\n label: tr('common.refresh', 'Refresh'),\n onSelect: () => void refetch(),\n disabled: loading,\n icon: <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />,\n },\n ]}\n />\n }\n />\n\n <PagePurpose icon={<BookOpen className=\"size-4\" />}>\n {tr(\n 'catalog.purpose',\n 'A catalog is your team’s organised library of software components — services, APIs, jobs and the systems they belong to. Browse a catalog to discover what already exists, see who owns each component and how they fit together, so you reuse instead of rebuild and always know where to look.'\n )}\n </PagePurpose>\n\n {/* Filters — SearchInput / FilterDropdown are custom components that don't\n forward rest props onto a DOM node, so the tour anchors live on\n wrapper <div>s. */}\n <div className=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\n <div data-tour=\"vibecontrols-catalog-search\" className=\"flex-1 sm:w-64 sm:flex-none\">\n <SearchInput\n value={searchQuery}\n onChange={setSearchQuery}\n placeholder={tr('catalog.searchPlaceholder', 'Search catalogs...')}\n className=\"w-full\"\n />\n </div>\n <div data-tour=\"vibecontrols-catalog-visibility-filter\">\n <FilterDropdown\n label={tr('catalog.filterVisibility', 'Visibility')}\n value={visibilityFilter}\n options={visibilityOptions}\n onChange={setVisibilityFilter}\n />\n </div>\n </div>\n\n {/* Results count */}\n <p className=\"text-sm text-text-secondary\">\n {tr('catalog.showingResults', 'Showing {{filtered}} of {{total}} catalogs', {\n filtered: filteredCatalogs.length,\n total,\n })}\n {loading && (\n <span className=\"ml-2 text-text-muted\">{tr('common.refreshing', '(refreshing...)')}</span>\n )}\n </p>\n\n {/* Grid */}\n {loading && catalogs.length === 0 ? (\n <PageSkeleton variant=\"cards\" count={6} />\n ) : filteredCatalogs.length > 0 ? (\n <AnimatePresence mode=\"wait\">\n <MotionList\n key=\"catalog-grid\"\n stagger={0.04}\n className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n data-tour=\"vibecontrols-catalog-grid\"\n >\n {filteredCatalogs.map((catalog) => (\n <MotionItem key={catalog.id}>\n <CatalogCard catalog={catalog} onOpen={handleCatalogSelect} />\n </MotionItem>\n ))}\n </MotionList>\n </AnimatePresence>\n ) : (\n <EmptyState\n icon={<BookOpen className=\"size-6 text-action-primary-bg\" aria-hidden=\"true\" />}\n illustration={searchQuery || visibilityFilter !== 'all' ? 'empty-search' : 'empty-data'}\n title={\n searchQuery || visibilityFilter !== 'all'\n ? tr('catalog.emptyNoResults', 'No catalogs found')\n : tr('catalog.emptyNoCatalogs', 'No catalogs yet')\n }\n description={\n searchQuery || visibilityFilter !== 'all'\n ? tr('catalog.emptyAdjustSearch', 'Try adjusting your search or filters')\n : tr('catalog.emptyCreate', 'Create your first catalog to organize components')\n }\n action={\n !searchQuery && visibilityFilter === 'all' ? (\n <div className=\"flex items-center gap-2\">\n {canCreateCatalog && (\n <button\n type=\"button\"\n onClick={() => setShowCreateForm(true)}\n className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n <Plus className=\"size-4\" />\n {tr('catalog.createCatalog', 'Create Catalog')}\n </button>\n )}\n <GetHelpButton prompt=\"What is a Catalog in VibeControls and how do I create one?\" />\n </div>\n ) : undefined\n }\n />\n )}\n\n {/* Load more */}\n {hasMore && filteredCatalogs.length > 0 && (\n <div className=\"flex justify-center pt-2\">\n <button\n type=\"button\"\n onClick={handleLoadMore}\n disabled={loadingMore}\n className=\"flex items-center gap-2 px-4 py-2 bg-bg-sunken text-text-primary rounded-button border border-border-subtle hover:bg-bg-surface hover:border-border-strong transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n {loadingMore ? tr('common.loading', 'Loading...') : tr('common.loadMore', 'Load more')}\n </button>\n </div>\n )}\n\n {/* Success Toast */}\n {successMessage && (\n <div className=\"fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg-subtle text-status-success-text border border-status-success-border rounded-card shadow-elevation-3 text-sm\">\n {successMessage}\n </div>\n )}\n\n <QuotaExhaustedDialog\n isOpen={showQuotaExhausted}\n onClose={() => setShowQuotaExhausted(false)}\n onConfirm={() => {\n setShowQuotaExhausted(false);\n navigate('/billing/plans');\n }}\n title=\"Catalog Quota Reached\"\n message=\"You've reached the maximum number of catalogs on your current plan. Upgrade your plan or purchase an add-on to create more catalogs.\"\n />\n\n {/* Create Form */}\n <CatalogForm\n isOpen={showCreateForm}\n onClose={() => setShowCreateForm(false)}\n onSubmit={handleCreateCatalog}\n extraSection={\n <div>\n <h3 className=\"text-sm font-medium text-text-secondary mb-2\">\n {tr('catalog.tags', 'Tags')}\n </h3>\n <EntityTagPicker entityType=\"VIBECONTROLS_CATALOG\" onDraftChange={setDraftTagIds} />\n </div>\n }\n />\n </MotionPage>\n );\n}\n"],"mappings":"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"}