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/ComponentDetailPage.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ComponentDetailPage.js","names":[],"sources":["../../src/pages/ComponentDetailPage.tsx"],"sourcesContent":["import { useState, useCallback, useMemo } from 'react';\nimport { useParams } from 'react-router';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport {\n ArrowLeft,\n Box,\n BookOpen,\n BarChart3,\n FileText,\n Settings,\n RefreshCw,\n FileCode,\n Layers,\n Upload,\n Trash2,\n Tag,\n Plus,\n X,\n Share2,\n} from 'lucide-react';\nimport {\n PageHeader,\n Card,\n StatCard,\n EmptyState,\n ErrorState,\n QuotaExhaustedDialog,\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, NextSteps } from '@burdenoff/fe-libs/ui';\n\nimport { DocsTabPanel } from '@/components/docs';\nimport { ScorecardPanel } from '@/components/scorecard';\nimport { CatalogCard } from '@/components/catalog';\nimport type { CatalogCardData } from '@/components/catalog';\nimport { ComponentForm, DependencyGraphTab } from '@/components/idp-components';\nimport type { ComponentFormData } from '@/components/idp-components';\nimport { PublishTemplateForm } from '@/components/templates';\nimport type { PublishTemplateFormData } from '@/components/templates';\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 { isQuotaExhaustedError, markQuotaHandledLocally } from '@/utils/quotaUtils';\nimport {\n useGetComponentQuery,\n useUpdateComponentMutation,\n useDeleteComponentMutation,\n usePublishComponentAsTemplateMutation,\n useAddComponentToCatalogMutation,\n useListCatalogsQuery,\n} from '@/generated/wspace-operations';\nimport type { VibecontrolsTemplateCategory } from '@/generated/wspace-types';\n\ntype ComponentTab =\n 'overview' | 'catalogs' | 'scorecard' | 'docs' | 'dependencies' | 'template' | 'settings';\nconst COMPONENT_TABS: readonly ComponentTab[] = [\n 'overview',\n 'catalogs',\n 'scorecard',\n 'docs',\n 'dependencies',\n 'template',\n 'settings',\n];\n\nexport function ComponentDetailPage() {\n const { t } = useI18n();\n const { id } = useParams<{ id: string }>();\n const navigate = useVibeNavigate();\n const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n const canReadComponent = hasPermission(VIBE_PERMISSIONS.COMPONENT_READ);\n const canUpdateComponent = hasPermission(VIBE_PERMISSIONS.COMPONENT_UPDATE);\n const canDeleteComponent = hasPermission(VIBE_PERMISSIONS.COMPONENT_DELETE);\n const canReadCatalog = hasPermission(VIBE_PERMISSIONS.CATALOG_READ);\n const canUpdateCatalog = hasPermission(VIBE_PERMISSIONS.CATALOG_UPDATE);\n const canUseCatalogPicker = canReadCatalog && canUpdateCatalog;\n const canCreateTemplate = hasPermission(VIBE_PERMISSIONS.TEMPLATE_CREATE);\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<ComponentTab>(COMPONENT_TABS, 'overview');\n const [showEditForm, setShowEditForm] = useState(false);\n const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);\n const [isDeleting, setIsDeleting] = useState(false);\n const [successMessage, setSuccessMessage] = useState<string | null>(null);\n const [showQuotaExhausted, setShowQuotaExhausted] = useState(false);\n const [showPublishForm, setShowPublishForm] = useState(false);\n const [showAddToCatalog, setShowAddToCatalog] = useState(false);\n\n const { data, loading, error, refetch } = useGetComponentQuery({\n variables: { id: id || '' },\n skip: !id || permissionsLoading || !canReadComponent,\n fetchPolicy: 'cache-and-network',\n });\n\n const [updateComponent] = useUpdateComponentMutation({ refetchQueries: ['GetComponent'] });\n const [deleteComponent] = useDeleteComponentMutation({ refetchQueries: ['ListComponents'] });\n const [publishAsTemplate] = usePublishComponentAsTemplateMutation({\n refetchQueries: ['GetComponent'],\n });\n const [addToCatalog] = useAddComponentToCatalogMutation({ refetchQueries: ['GetComponent'] });\n const { data: catalogsData } = useListCatalogsQuery({\n variables: { pagination: { limit: 100, offset: 0 } },\n skip: !showAddToCatalog || !canUseCatalogPicker,\n fetchPolicy: 'cache-and-network',\n });\n\n const component = data?.vibecontrolsComponent ?? null;\n\n const catalogs: CatalogCardData[] = useMemo(() => {\n return (component?.catalogs ?? []).map((entry: Record<string, any>) => {\n const c = entry.catalog || {};\n return {\n id: c.id as string,\n name: c.name as string,\n description: (c.description as string) || null,\n visibility: c.visibility as CatalogCardData['visibility'],\n componentCount: (c.componentCount as number) || 0,\n vibeCount: (c.vibeCount as number) || 0,\n tags: (c.tags as string[]) || [],\n createdAt: c.createdAt as string,\n updatedAt: c.updatedAt as string,\n };\n });\n }, [component?.catalogs]);\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 (!canReadComponent)\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('/components');\n };\n\n const handleCatalogClick = (catalog: CatalogCardData) => {\n navigate(`/catalogs/${catalog.id}`);\n };\n\n const handleUpdateComponent = async (formData: ComponentFormData) => {\n if (!id || !canUpdateComponent) return;\n await updateComponent({\n variables: {\n id,\n input: {\n name: formData.name,\n description: formData.description || undefined,\n type: formData.type,\n lifecycle: formData.lifecycle,\n language: formData.language || undefined,\n framework: formData.framework || undefined,\n version: formData.version || undefined,\n ownerName: formData.ownerName || undefined,\n tags: formData.tags.length > 0 ? formData.tags : undefined,\n repositoryUrl: formData.repositoryUrl || undefined,\n documentationUrl: formData.documentationUrl || undefined,\n dependencies: formData.dependencies ?? undefined,\n sbomData: formData.sbomData ?? undefined,\n },\n },\n });\n setSuccessMessage(tr('component.updatedSuccess', 'Component updated successfully'));\n setTimeout(() => setSuccessMessage(null), 3000);\n };\n\n const handleDeleteComponent = async () => {\n if (!id) return;\n setIsDeleting(true);\n try {\n await deleteComponent({ variables: { id } });\n setShowDeleteConfirm(false);\n navigate('/components');\n } finally {\n setIsDeleting(false);\n }\n };\n\n const handlePublishAsTemplate = async (formData: PublishTemplateFormData) => {\n if (!id || !canCreateTemplate) return;\n try {\n const res = await publishAsTemplate({\n variables: {\n componentId: id,\n input: {\n name: formData.name,\n description: formData.description || undefined,\n category: formData.category as VibecontrolsTemplateCategory,\n version: formData.version || undefined,\n setupInstructions: formData.setupInstructions || undefined,\n variables: formData.variables.length > 0 ? formData.variables : undefined,\n sourceRepositoryUrl: formData.sourceRepositoryUrl,\n },\n },\n });\n if (res.error && isQuotaExhaustedError(res.error)) {\n setShowPublishForm(false);\n setShowQuotaExhausted(true);\n return;\n }\n setShowPublishForm(false);\n setSuccessMessage(tr('component.publishedAsTemplate', 'Published as template successfully'));\n setTimeout(() => setSuccessMessage(null), 3000);\n } catch (err) {\n if (isQuotaExhaustedError(err)) {\n setShowPublishForm(false);\n markQuotaHandledLocally();\n setShowQuotaExhausted(true);\n return;\n }\n throw err;\n }\n };\n\n const lifecycleStyles: Record<string, string> = {\n EXPERIMENTAL: 'bg-status-warning-bg text-status-warning-text',\n ACTIVE: 'bg-status-success-bg text-status-success-text',\n DEPRECATED: 'bg-status-error-bg text-status-error-text',\n END_OF_LIFE: 'bg-status-error-bg text-status-error-text',\n };\n\n const deps = Array.isArray(component?.dependencies)\n ? (component.dependencies as Array<{\n name: string;\n version?: string | null;\n type?: string | null;\n }>)\n : [];\n\n const tabs: { id: ComponentTab; label: string; icon: typeof Box; badge?: string }[] = [\n { id: 'overview', label: tr('nav.overview', 'Overview'), icon: Box },\n {\n id: 'catalogs',\n label: tr('component.catalogs', 'Catalogs'),\n icon: BookOpen,\n badge: `${catalogs.length}`,\n },\n { id: 'scorecard', label: tr('component.scorecard', 'Scorecard'), icon: BarChart3 },\n { id: 'docs', label: tr('component.docs', 'Docs'), icon: FileText },\n {\n id: 'dependencies',\n label: tr('component.dependencies', 'Dependencies'),\n icon: Share2,\n badge: deps.length > 0 ? `${deps.length}` : undefined,\n },\n { id: 'template', label: tr('component.template', 'Template'), icon: FileCode },\n { id: 'settings', label: tr('common.settings', 'Settings'), icon: Settings },\n ];\n\n // Guard states\n if (loading && !component) {\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('component.backToComponents', 'Back to Components')}\n </button>\n <PageSkeleton variant=\"detail\" />\n </MotionPage>\n );\n }\n\n if (error && !component) {\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('component.backToComponents', 'Back to Components')}\n </button>\n <ErrorState\n title={tr('component.failedLoad', 'Failed to load component')}\n message={error.message}\n onRetry={() => refetch()}\n />\n </MotionPage>\n );\n }\n\n if (!component) {\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('component.backToComponents', 'Back to Components')}\n </button>\n <EmptyState\n icon={<Box className=\"size-8 text-text-secondary\" />}\n title={tr('component.notFound', 'Component not found')}\n description={`No component 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('component.backToComponents', 'Back to Components')}\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('component.backToComponents', 'Back to Components')}\n </button>\n\n {/* Header */}\n <PageHeader\n title={component.name}\n description={component.description || tr('component.noDescription', 'No description')}\n actions={\n <div className=\"flex items-center gap-2 flex-wrap\">\n <EntityShareButton\n entity=\"component\"\n resource={{ id: component.id, name: component.name }}\n label={tr('component.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 className=\"inline-flex items-center px-2.5 py-1 text-xs font-medium bg-bg-sunken text-text-secondary rounded\">\n {component.type}\n </span>\n <span\n className={`inline-flex items-center px-2.5 py-1 text-xs font-medium rounded ${lifecycleStyles[component.lifecycle] || 'bg-bg-sunken text-text-secondary'}`}\n >\n {component.lifecycle}\n </span>\n </div>\n }\n />\n\n <PagePurpose icon={<Box className=\"size-4\" />}>\n {tr(\n 'componentDetail.purpose',\n 'This is the record for one component — a single service, app, library or API in your system. From here you see its lifecycle and ownership, the catalogs it belongs to, its dependencies, docs and scorecard, and you can publish it as a reusable template. Come here to understand what something is, who owns it, and how healthy it is.'\n )}\n </PagePurpose>\n\n <NextSteps\n storageKey=\"vibecontrols-component-details\"\n steps={[\n {\n id: 'view-dependencies',\n label: tr('componentDetail.next.dependencies', 'Map its dependencies'),\n description: tr(\n 'componentDetail.next.dependenciesDesc',\n 'See what this component depends on and what depends on it.'\n ),\n icon: <Share2 className=\"size-4\" />,\n onClick: () => setActiveTab('dependencies'),\n },\n {\n id: 'check-scorecard',\n label: tr('componentDetail.next.scorecard', 'Review the scorecard'),\n description: tr(\n 'componentDetail.next.scorecardDesc',\n 'Check health and best-practice scores for this component.'\n ),\n icon: <BarChart3 className=\"size-4\" />,\n onClick: () => setActiveTab('scorecard'),\n },\n {\n id: 'publish-template',\n label: tr('componentDetail.next.template', 'Publish as a template'),\n description: tr(\n 'componentDetail.next.templateDesc',\n 'Turn this setup into a reusable blueprint for new components.'\n ),\n icon: <FileCode className=\"size-4\" />,\n onClick: () => setActiveTab('template'),\n },\n ]}\n />\n\n {/* Stat Cards */}\n <MotionList stagger={0.04} className=\"grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4\">\n <MotionItem>\n <StatCard\n title={tr('component.type', 'Type')}\n value={component.type}\n icon={<Box className=\"size-4\" />}\n />\n </MotionItem>\n <MotionItem>\n <StatCard\n title={tr('component.lifecycle', 'Lifecycle')}\n value={component.lifecycle}\n icon={<Layers className=\"size-4\" />}\n variant={\n component.lifecycle === 'ACTIVE'\n ? 'success'\n : component.lifecycle === 'DEPRECATED' || component.lifecycle === 'END_OF_LIFE'\n ? 'error'\n : 'warning'\n }\n />\n </MotionItem>\n <MotionItem>\n <StatCard\n title={tr('component.version', 'Version')}\n value={component.version || '-'}\n icon={<FileCode className=\"size-4\" />}\n />\n </MotionItem>\n <MotionItem>\n <StatCard\n title={tr('component.catalogs', 'Catalogs')}\n value={catalogs.length}\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('component.tags', 'Tags')}</h3>\n </div>\n <div className=\"p-4\">\n <EntityTagPicker entityType=\"VIBECONTROLS_COMPONENT\" entityId={component.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('component.tabsAriaLabel', 'Component 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 {component.description && (\n <Card>\n <div className=\"p-4\">\n <p className=\"text-text-primary\">{component.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('component.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('component.ownerNameLabel', 'Owner')}</p>\n <p className=\"font-medium text-text-primary\">\n {component.ownerName || tr('common.unset', 'Unset')}\n </p>\n </div>\n <div>\n <p className=\"text-text-secondary\">\n {tr('component.languageLabel', 'Language')}\n </p>\n <p className=\"font-medium text-text-primary\">\n {component.language || tr('common.unset', 'Unset')}\n </p>\n </div>\n <div>\n <p className=\"text-text-secondary\">\n {tr('component.frameworkLabel', 'Framework')}\n </p>\n <p className=\"font-medium text-text-primary\">\n {component.framework || tr('common.unset', 'Unset')}\n </p>\n </div>\n <div>\n <p className=\"text-text-secondary\">{tr('component.versionLabel', 'Version')}</p>\n <p className=\"font-medium text-text-primary\">\n {component.version || tr('common.unset', 'Unset')}\n </p>\n </div>\n {component.repositoryUrl && (\n <div className=\"sm:col-span-2\">\n <p className=\"text-text-secondary\">\n {tr('component.repository', 'Repository')}\n </p>\n <a\n href={component.repositoryUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"font-medium text-action-primary-bg hover:underline break-all\"\n >\n {component.repositoryUrl}\n </a>\n </div>\n )}\n <div>\n <p className=\"text-text-secondary\">{tr('common.created', 'Created')}</p>\n <p className=\"font-medium text-text-primary\">\n {new Date(component.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(component.updatedAt).toLocaleDateString()}\n </p>\n </div>\n </div>\n </div>\n </Card>\n\n {component.tags?.length > 0 && (\n <Card>\n <div className=\"p-4\">\n <h3 className=\"font-semibold text-text-primary mb-3\">\n {tr('component.tags', 'Tags')}\n </h3>\n <div className=\"flex flex-wrap gap-2\">\n {component.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 === 'catalogs' && (\n <motion.div\n key=\"catalogs\"\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 {catalogs.length}{' '}\n {tr('component.catalogsContaining', 'catalogs containing this component')}\n </p>\n {canUseCatalogPicker && (\n <button\n type=\"button\"\n onClick={() => setShowAddToCatalog(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('component.addToCatalog', 'Add to Catalog')}\n </button>\n )}\n </div>\n {catalogs.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 {catalogs.map((catalog) => (\n <MotionItem key={catalog.id}>\n <CatalogCard catalog={catalog} onOpen={handleCatalogClick} />\n </MotionItem>\n ))}\n </MotionList>\n ) : (\n <EmptyState\n icon={<BookOpen className=\"size-8 text-text-secondary\" />}\n title={tr('component.noCatalogs', 'Not in any catalogs')}\n description={tr(\n 'component.noCatalogsDescription',\n 'This component has not been added to any catalogs yet'\n )}\n action={\n canUseCatalogPicker ? (\n <button\n type=\"button\"\n onClick={() => setShowAddToCatalog(true)}\n className=\"flex items-center gap-2 px-4 py-2 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('component.addToCatalog', 'Add to Catalog')}\n </button>\n ) : undefined\n }\n />\n )}\n </motion.div>\n )}\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=\"COMPONENT\" 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=\"COMPONENT\" ownerId={id || ''} />\n </motion.div>\n )}\n\n {activeTab === 'dependencies' && (\n <motion.div\n key=\"dependencies\"\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 <DependencyGraphTab\n componentName={component.name}\n componentType={component.type}\n dependencies={deps}\n />\n </motion.div>\n )}\n\n {activeTab === 'template' && (\n <motion.div\n key=\"template\"\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 {(component.templates?.length ?? 0) === 0 ? (\n <Card padding=\"lg\">\n <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n <FileCode className=\"size-12 text-text-muted mb-4\" />\n <h3 className=\"text-lg font-semibold text-text-primary mb-2\">\n {tr('component.template', 'Publish as Template')}\n </h3>\n <p className=\"text-sm text-text-secondary max-w-md mb-6\">\n {tr(\n 'component.publishDescription',\n 'Turn this component into a reusable template. Others can clone it and fill in configuration variables to create new components.'\n )}\n </p>\n {canCreateTemplate && (\n <button\n type=\"button\"\n onClick={() => setShowPublishForm(true)}\n className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n >\n <Upload className=\"size-4\" />\n {tr('component.publishAsTemplate', 'Publish as Template')}\n </button>\n )}\n </div>\n </Card>\n ) : (\n <Card>\n <div className=\"p-4 border-b border-border-default\">\n <h3 className=\"font-semibold text-text-primary\">Published Templates</h3>\n </div>\n <div className=\"p-4 space-y-3\">\n {component.templates.map((tmpl: Record<string, string>) => (\n <div\n key={tmpl.id}\n className=\"flex items-center justify-between p-3 bg-bg-sunken rounded-lg\"\n >\n <div className=\"flex items-center gap-3\">\n <FileCode className=\"size-5 text-action-primary-bg\" />\n <div>\n <p className=\"text-sm font-medium text-text-primary\">{tmpl.name}</p>\n <p className=\"text-xs text-text-muted\">\n {tmpl.category} · v{tmpl.version || '—'}\n </p>\n </div>\n </div>\n <button\n type=\"button\"\n onClick={() => navigate(`/templates/${tmpl.id}`)}\n className=\"text-xs text-action-primary-bg hover:underline\"\n >\n View Template →\n </button>\n </div>\n ))}\n {canCreateTemplate && (\n <button\n type=\"button\"\n onClick={() => setShowPublishForm(true)}\n className=\"flex items-center gap-2 px-3 py-2 text-sm text-text-secondary border border-dashed border-border-default hover:border-border-strong rounded-lg w-full justify-center transition-colors\"\n >\n <Upload className=\"size-4\" />\n Update template\n </button>\n )}\n </div>\n </Card>\n )}\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 {canUpdateComponent && (\n <Card padding=\"lg\">\n <h3 className=\"font-semibold text-text-primary mb-4\">\n {tr('component.editComponent', 'Edit Component')}\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('component.editDetails', 'Edit Details')}\n </button>\n </Card>\n )}\n {canDeleteComponent && (\n <Card padding=\"lg\">\n <h3 className=\"font-semibold text-status-error-text mb-2\">\n {tr('component.dangerZone', 'Danger Zone')}\n </h3>\n <p className=\"text-sm text-text-secondary mb-4\">\n {tr(\n 'component.deleteWarning',\n 'Deleting this component will remove it from all catalogs and break any templates derived from it. This cannot be undone.'\n )}\n </p>\n <button\n type=\"button\"\n data-testid=\"component-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('component.deleteComponent', 'Delete Component')}\n </button>\n </Card>\n )}\n </div>\n </motion.div>\n )}\n </AnimatePresence>\n\n {/* Edit Form */}\n {canUpdateComponent && (\n <ComponentForm\n isOpen={showEditForm}\n onClose={() => setShowEditForm(false)}\n onSubmit={handleUpdateComponent}\n initialData={{\n name: component.name,\n description: component.description || '',\n type: component.type,\n lifecycle: component.lifecycle,\n language: component.language || '',\n framework: component.framework || '',\n version: component.version || '',\n ownerName: component.ownerName || '',\n tags: component.tags || [],\n repositoryUrl: component.repositoryUrl || '',\n documentationUrl: component.documentationUrl || '',\n dependencies: Array.isArray(component.dependencies) ? component.dependencies : null,\n sbomData:\n component.sbomData && typeof component.sbomData === 'object'\n ? (component.sbomData as Record<string, unknown>)\n : null,\n }}\n title={tr('component.editComponent', 'Edit Component')}\n />\n )}\n\n <ConfirmDialog\n isOpen={showDeleteConfirm}\n onClose={() => setShowDeleteConfirm(false)}\n onConfirm={handleDeleteComponent}\n title={tr('component.deleteComponent', 'Delete Component')}\n message={tr(\n 'component.deleteConfirmMessage',\n `Are you sure you want to delete \"${component.name}\"? This action cannot be undone.`\n )}\n confirmLabel={tr('common.delete', 'Delete')}\n variant=\"danger\"\n isLoading={isDeleting}\n />\n\n <QuotaExhaustedDialog\n isOpen={showQuotaExhausted}\n onClose={() => setShowQuotaExhausted(false)}\n onConfirm={() => {\n setShowQuotaExhausted(false);\n navigate('/billing/plans');\n }}\n title=\"Template Quota Reached\"\n message=\"You've reached the maximum number of published templates on your current plan. Upgrade your plan or purchase an add-on to publish more templates.\"\n />\n\n {showPublishForm && canCreateTemplate && (\n <PublishTemplateForm\n componentName={component.name}\n componentRepositoryUrl={component.repositoryUrl}\n onClose={() => setShowPublishForm(false)}\n onSubmit={handlePublishAsTemplate}\n />\n )}\n\n {showAddToCatalog && canUseCatalogPicker && (\n <div\n className=\"fixed inset-0 flex items-center justify-center z-50 p-4\"\n style={{ backgroundColor: 'rgba(0,0,0,0.55)' }}\n >\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 shadow-xl\"\n >\n <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default\">\n <h2 className=\"text-base font-semibold text-text-primary\">\n {tr('component.addToCatalog', 'Add to Catalog')}\n </h2>\n <button\n type=\"button\"\n onClick={() => setShowAddToCatalog(false)}\n className=\"p-1.5 text-text-secondary hover:text-text-primary rounded-md hover:bg-bg-sunken transition-colors\"\n >\n <X className=\"size-4\" />\n </button>\n </div>\n <div className=\"p-2 max-h-80 overflow-y-auto\">\n {(catalogsData?.vibecontrolsCatalogs?.items ?? []).length === 0 ? (\n <p className=\"text-sm text-text-secondary text-center py-6\">\n No catalogs found.{' '}\n <button\n type=\"button\"\n onClick={() => {\n setShowAddToCatalog(false);\n navigate('/catalogs');\n }}\n className=\"text-action-primary-bg hover:underline\"\n >\n Create one first.\n </button>\n </p>\n ) : (\n (catalogsData?.vibecontrolsCatalogs?.items ?? []).map(\n (cat: { id: string; name: string }) => {\n const alreadyIn = catalogs.some((c) => c.id === cat.id);\n return (\n <button\n type=\"button\"\n key={cat.id}\n disabled={alreadyIn}\n onClick={async () => {\n if (!id || alreadyIn) return;\n try {\n await addToCatalog({\n variables: { catalogId: cat.id, componentId: id },\n });\n setShowAddToCatalog(false);\n setSuccessMessage(`Added to ${cat.name}`);\n setTimeout(() => setSuccessMessage(null), 3000);\n } catch {\n // error shown by Apollo\n }\n }}\n className={`flex items-center justify-between w-full px-3 py-2.5 text-left rounded-md transition-colors ${\n alreadyIn\n ? 'opacity-40 cursor-not-allowed'\n : 'hover:bg-bg-sunken cursor-pointer'\n }`}\n >\n <div className=\"flex items-center gap-2\">\n <BookOpen className=\"size-4 text-action-primary-bg flex-shrink-0\" />\n <span className=\"text-sm text-text-primary\">{cat.name}</span>\n </div>\n {alreadyIn && (\n <span className=\"text-xs text-text-muted\">already added</span>\n )}\n </button>\n );\n }\n )\n )}\n </div>\n </motion.div>\n </div>\n )}\n </MotionPage>\n );\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@

- {"version":3,"file":"ComponentDocsPage.js","names":[],"sources":["../../src/pages/ComponentDocsPage.tsx"],"sourcesContent":["import { useParams } from 'react-router';\nimport { useVibeControls } from '@/providers/VibeControlsProvider';\nimport { DocsFullScreenViewer } from '@/components/docs/DocsFullScreenViewer';\n\nexport function ComponentDocsPage() {\n const { id: componentId } = useParams<{ id: string }>();\n const { basePath } = useVibeControls();\n const base = basePath || '';\n\n return (\n <DocsFullScreenViewer\n ownerType=\"COMPONENT\"\n ownerId={componentId || ''}\n backLabel=\"Back to Component\"\n backPath={`${base}/components/${componentId}`}\n editPath={`${base}/components/${componentId}?tab=docs`}\n />\n );\n}\n"],"mappings":";;;;;AAIA,SAAgB,IAAoB;CAClC,IAAM,EAAE,IAAI,MAAgB,GAA2B,EACjD,EAAE,gBAAa,GAAiB,EAChC,IAAO,KAAY;AAEzB,QACE,kBAAC,GAAD;EACE,WAAU;EACV,SAAS,KAAe;EACxB,WAAU;EACV,UAAU,GAAG,EAAK,cAAc;EAChC,UAAU,GAAG,EAAK,cAAc,EAAY;EAC5C,CAAA"}

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

@@ -1 +0,0 @@

- {"version":3,"file":"ComponentsPage.js","names":[],"sources":["../../src/pages/ComponentsPage.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, Box, RefreshCw, Network, ArrowRight, Grid, List } from 'lucide-react';\nimport { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { ComponentCard } from '@/components/idp-components';\nimport type { ComponentCardData } from '@/components/idp-components';\nimport { ComponentForm } from '@/components/idp-components';\nimport type { ComponentFormData } from '@/components/idp-components';\nimport { ComponentsTable } from '@/components/components';\nimport type { ComponentTableRowData } from '@/components/components';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\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 { useListComponentsQuery, useCreateComponentMutation } from '@/generated/wspace-operations';\nimport type { ListComponentsQuery } from '@/generated/wspace-operations';\n\n/** A single row as the ListComponents query returns it. */\ntype ListedComponent = ListComponentsQuery['vibecontrolsComponents']['items'][number];\n\ntype ViewMode = 'table' | 'grid';\n\nexport function ComponentsPage() {\n const navigate = useVibeNavigate();\n const { t } = useI18n();\n const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n const canCreateComponent = hasPermission(VIBE_PERMISSIONS.COMPONENT_CREATE);\n const canReadComponent = hasPermission(VIBE_PERMISSIONS.COMPONENT_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 typeOptions = [\n { value: 'all', label: tr('component.allTypes', 'All Types') },\n { value: 'SERVICE', label: tr('component.typeService', 'Service') },\n { value: 'FRONTEND', label: tr('component.typeFrontend', 'Frontend') },\n { value: 'LIBRARY', label: tr('component.typeLibrary', 'Library') },\n { value: 'API', label: tr('component.typeApi', 'API') },\n { value: 'MOBILE', label: tr('component.typeMobile', 'Mobile') },\n { value: 'DATABASE', label: tr('component.typeDatabase', 'Database') },\n { value: 'INFRASTRUCTURE', label: tr('component.typeInfrastructure', 'Infrastructure') },\n { value: 'CUSTOM', label: tr('component.typeCustom', 'Custom') },\n ];\n\n const lifecycleOptions = [\n { value: 'all', label: tr('component.allLifecycles', 'All Lifecycles') },\n { value: 'EXPERIMENTAL', label: tr('component.lifecycleExperimental', 'Experimental') },\n { value: 'ACTIVE', label: tr('component.lifecycleActive', 'Active') },\n { value: 'DEPRECATED', label: tr('component.lifecycleDeprecated', 'Deprecated') },\n { value: 'END_OF_LIFE', label: tr('component.lifecycleEndOfLife', 'End of Life') },\n ];\n\n const PAGE_SIZE = 50;\n const [searchQuery, setSearchQuery] = useState('');\n const [typeFilter, setTypeFilter] = useState('all');\n const [lifecycleFilter, setLifecycleFilter] = useState('all');\n const [viewMode, setViewMode] = useState<ViewMode>('table');\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<ComponentTableRowData[]>([]);\n const [loadingMore, setLoadingMore] = useState(false);\n\n const { data, loading, error, refetch, fetchMore } = useListComponentsQuery({\n variables: {\n filter: {\n type: typeFilter !== 'all' ? typeFilter : undefined,\n lifecycle: lifecycleFilter !== 'all' ? lifecycleFilter : undefined,\n search: searchQuery || undefined,\n },\n pagination: { limit: PAGE_SIZE, offset: 0 },\n },\n skip: permissionsLoading || !canReadComponent,\n fetchPolicy: 'cache-and-network',\n notifyOnNetworkStatusChange: true,\n });\n\n const [createComponent] = useCreateComponentMutation({\n refetchQueries: ['ListComponents'],\n awaitRefetchQueries: true,\n });\n const { setDraftTagIds, flushTags } = useDraftEntityTags('VIBECONTROLS_COMPONENT');\n\n const mapItems = useCallback(\n (items: ReadonlyArray<ListedComponent>): ComponentTableRowData[] =>\n items.map((item) => ({\n id: item.id,\n name: item.name,\n description: item.description ?? null,\n // The generated ComponentType/ComponentLifecycle enums carry more\n // members than ComponentCardData's narrower unions (JOB, PACKAGE,\n // TOOL, ...). Both the card and the table look the value up in a\n // Record with a fallback, so an unlisted member degrades to the\n // default icon / neutral badge rather than rendering nothing.\n type: item.type as ComponentTableRowData['type'],\n lifecycle: item.lifecycle as ComponentTableRowData['lifecycle'],\n version: item.version ?? null,\n language: item.language ?? null,\n framework: item.framework ?? null,\n tags: item.tags,\n createdAt: item.createdAt,\n updatedAt: item.updatedAt,\n ownerName: item.ownerName ?? null,\n overallScore: item.scorecard?.overallScore ?? null,\n securityTier: item.scorecard?.securityTier ?? null,\n })),\n []\n );\n\n useEffect(() => {\n setAccumulated(mapItems(data?.vibecontrolsComponents?.items ?? []));\n }, [data?.vibecontrolsComponents?.items, mapItems]);\n\n const total = data?.vibecontrolsComponents?.total ?? 0;\n const hasMore = accumulated.length < total;\n const components = accumulated;\n const filteredComponents = 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?.vibecontrolsComponents) return prev;\n const prevList = prev.vibecontrolsComponents;\n const nextList = fetchMoreResult.vibecontrolsComponents;\n return {\n ...prev,\n vibecontrolsComponents: {\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 (!canReadComponent)\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 handleComponentSelect = (component: ComponentCardData) => {\n navigate(`/components/${component.id}`);\n };\n\n const handleCreateComponent = async (formData: ComponentFormData) => {\n try {\n const result = await createComponent({\n variables: {\n input: {\n name: formData.name,\n description: formData.description || undefined,\n type: formData.type,\n lifecycle: formData.lifecycle,\n language: formData.language || undefined,\n framework: formData.framework || undefined,\n version: formData.version || undefined,\n ownerName: formData.ownerName || undefined,\n tags: formData.tags.length > 0 ? formData.tags : undefined,\n repositoryUrl: formData.repositoryUrl || undefined,\n documentationUrl: formData.documentationUrl || undefined,\n dependencies: formData.dependencies ?? undefined,\n sbomData: formData.sbomData ?? undefined,\n },\n },\n });\n if (result.error && isQuotaExhaustedError(result.error)) {\n setShowCreateForm(false);\n setShowQuotaExhausted(true);\n return;\n }\n if (!result.data?.createVibecontrolsComponent?.id) {\n throw new Error(tr('component.failedCreate', 'Failed to create component'));\n }\n const newComponentId = result.data.createVibecontrolsComponent.id;\n setShowCreateForm(false);\n setSuccessMessage(tr('component.createdSuccess', 'Component created successfully'));\n await flushTags(newComponentId);\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 && components.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('component.failedLoad', 'Failed to load components')}\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('component.title', 'Components')}\n description={\n total > 0\n ? tr('component.description', '{{total}} components in your catalog', {\n total: components.length,\n })\n : tr(\n 'component.descriptionEmpty',\n 'Track every service, frontend, library, and API in your system — dependencies, owners, and lifecycle in one place'\n )\n }\n actions={\n // Boff UI 2.0: single primary CTA (Create), Refresh in the overflow.\n <CTAOverflowMenu\n primary={\n canCreateComponent\n ? {\n label: tr('component.createComponent', 'Create Component'),\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={<Box className=\"size-4\" />}>\n {tr(\n 'component.purpose',\n 'Components are the individual building blocks of your software — each service, frontend, library or API — tracked with its owner, dependencies and lifecycle. Register your components here to build a living map of your system, so anyone can find what something is, who runs it and what it depends on.'\n )}\n </PagePurpose>\n\n {/* Entry point for the Environment Topology matrix (/vibecontrols/environments).\n The shell sidenav has no item for that route — per mockup 29 it is a\n sub-surface of the Components area, reached from here — so this row is\n its only way in. Keep it as the single entry; do not scatter duplicates. */}\n <button\n type=\"button\"\n onClick={() => navigate('/environments')}\n data-tour=\"vibecontrols-component-env-topology\"\n className=\"w-full flex items-center gap-4 text-left px-4 py-3 bg-bg-surface border border-border-seam rounded-card shadow-elevation-1 hover:bg-bg-sunken hover:border-border-strong transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n <span className=\"flex-shrink-0 size-9 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center\">\n <Network className=\"size-4 text-action-primary-bg\" aria-hidden=\"true\" />\n </span>\n <span className=\"min-w-0 flex-1\">\n <span className=\"block text-sm font-medium text-text-primary\">\n {tr('component.envTopologyLink', 'Environment Topology')}\n </span>\n <span className=\"block text-sm text-text-secondary\">\n {tr(\n 'component.envTopologyLinkDescription',\n 'See which version of every component is currently deployed across Development, Staging and Production.'\n )}\n </span>\n </span>\n <ArrowRight className=\"size-4 flex-shrink-0 text-text-muted\" aria-hidden=\"true\" />\n </button>\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=\"space-y-3\">\n <div className=\"flex items-center gap-2\">\n <div data-tour=\"vibecontrols-component-search\" className=\"flex-1 sm:w-64 sm:flex-none\">\n <SearchInput\n value={searchQuery}\n onChange={setSearchQuery}\n placeholder={tr('component.searchPlaceholder', 'Search components...')}\n className=\"w-full\"\n />\n </div>\n {/* View toggle — same control the Targets/Vibes pages ship. */}\n <div\n role=\"group\"\n aria-label={tr('component.viewMode', 'View mode')}\n className=\"flex flex-shrink-0 items-center gap-1 rounded-button border border-border-subtle bg-bg-sunken p-1\"\n >\n <button\n type=\"button\"\n onClick={() => setViewMode('table')}\n aria-pressed={viewMode === 'table'}\n aria-label={tr('component.tableViewTitle', 'Table view')}\n title={tr('component.tableViewTitle', 'Table view')}\n className={`flex size-8 max-md:size-9 items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${viewMode === 'table' ? 'bg-[var(--color-accent-soft)] text-text-primary' : 'text-text-secondary hover:bg-bg-surface/60'}`}\n >\n <List className=\"size-4 text-text-secondary\" aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n onClick={() => setViewMode('grid')}\n aria-pressed={viewMode === 'grid'}\n aria-label={tr('component.gridViewTitle', 'Grid view')}\n title={tr('component.gridViewTitle', 'Grid view')}\n className={`flex size-8 max-md:size-9 items-center justify-center rounded transition-colors 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 >\n <Grid className=\"size-4 text-text-secondary\" aria-hidden=\"true\" />\n </button>\n </div>\n </div>\n <div className=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\n <div data-tour=\"vibecontrols-component-type-filter\">\n <FilterDropdown\n label={tr('component.filterType', 'Type')}\n value={typeFilter}\n options={typeOptions}\n onChange={setTypeFilter}\n />\n </div>\n <div data-tour=\"vibecontrols-component-lifecycle-filter\">\n <FilterDropdown\n label={tr('component.filterLifecycle', 'Lifecycle')}\n value={lifecycleFilter}\n options={lifecycleOptions}\n onChange={setLifecycleFilter}\n />\n </div>\n </div>\n </div>\n\n {/* Results count */}\n <p className=\"text-sm text-text-secondary\">\n {tr('component.showingResults', 'Showing {{filtered}} of {{total}} components', {\n filtered: filteredComponents.length,\n total,\n })}\n {loading && (\n <span className=\"ml-2 text-text-muted\">{tr('common.refreshing', '(refreshing...)')}</span>\n )}\n </p>\n\n {/* Results — table view (mockup 27) or the card grid */}\n {loading && components.length === 0 ? (\n <PageSkeleton variant={viewMode === 'table' ? 'rows' : 'cards'} count={6} />\n ) : filteredComponents.length > 0 ? (\n viewMode === 'table' ? (\n <div data-tour=\"vibecontrols-component-grid\">\n <ComponentsTable components={filteredComponents} onOpen={handleComponentSelect} />\n </div>\n ) : (\n <AnimatePresence mode=\"wait\">\n <MotionList\n key=\"component-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-component-grid\"\n >\n {filteredComponents.map((component) => (\n <MotionItem key={component.id}>\n <ComponentCard component={component} onOpen={handleComponentSelect} />\n </MotionItem>\n ))}\n </MotionList>\n </AnimatePresence>\n )\n ) : (\n <EmptyState\n icon={<Box className=\"size-6 text-action-primary-bg\" aria-hidden=\"true\" />}\n illustration={\n searchQuery || typeFilter !== 'all' || lifecycleFilter !== 'all'\n ? 'empty-search'\n : 'empty-data'\n }\n title={\n searchQuery || typeFilter !== 'all' || lifecycleFilter !== 'all'\n ? tr('component.emptyNoResults', 'No components found')\n : tr('component.emptyNoComponents', 'No components yet')\n }\n description={\n searchQuery || typeFilter !== 'all' || lifecycleFilter !== 'all'\n ? tr('component.emptyAdjustSearch', 'Try adjusting your search or filters')\n : tr(\n 'component.emptyCreate',\n 'A component is any piece of software in your system — a backend service, a frontend app, a shared library, an API. Register one to start tracking its dependencies, owner, and lifecycle stage.'\n )\n }\n action={\n !searchQuery && typeFilter === 'all' && lifecycleFilter === 'all' ? (\n <div className=\"flex items-center gap-2\">\n {canCreateComponent && (\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('component.createComponent', 'Create Component')}\n </button>\n )}\n <GetHelpButton prompt=\"What is a Component in VibeControls and how do I add one?\" />\n </div>\n ) : undefined\n }\n />\n )}\n\n {/* Load more */}\n {hasMore && filteredComponents.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=\"Component Quota Reached\"\n message=\"You've reached the maximum number of components on your current plan. Upgrade your plan or purchase an add-on to register more components.\"\n />\n\n {/* Create Form */}\n <ComponentForm\n isOpen={showCreateForm}\n onClose={() => setShowCreateForm(false)}\n onSubmit={handleCreateComponent}\n extraSection={\n <div>\n <h3 className=\"text-sm font-medium text-text-secondary mb-2\">\n {tr('component.tags', 'Tags')}\n </h3>\n <EntityTagPicker entityType=\"VIBECONTROLS_COMPONENT\" onDraftChange={setDraftTagIds} />\n </div>\n }\n />\n </MotionPage>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,IAAiB;CAC/B,IAAM,IAAW,GAAiB,EAC5B,EAAE,SAAM,IAAS,EACjB,EAAE,kBAAe,WAAW,MAAuB,IAAgB,EACnE,IAAqB,EAAc,EAAiB,iBAAiB,EACrE,IAAmB,EAAc,EAAiB,eAAe,EAEjE,IAAK,GACR,GAAa,GAAkB,MAAqD;EACnF,IAAM,IAAa,EAAE,GAAK,EAAO,EAC3B,IAAW,MAAe,IAAM,IAAW;AAEjD,SADK,IACE,OAAO,QAAQ,EAAO,CAAC,QAC3B,GAAK,CAAC,GAAU,OAAgB,EAAI,QAAQ,KAAK,EAAS,KAAK,OAAO,EAAW,CAAC,EACnF,EACD,GAJmB;IAMtB,CAAC,EAAE,CACJ,EAEK,KAAc;EAClB;GAAE,OAAO;GAAO,OAAO,EAAG,sBAAsB,YAAY;GAAE;EAC9D;GAAE,OAAO;GAAW,OAAO,EAAG,yBAAyB,UAAU;GAAE;EACnE;GAAE,OAAO;GAAY,OAAO,EAAG,0BAA0B,WAAW;GAAE;EACtE;GAAE,OAAO;GAAW,OAAO,EAAG,yBAAyB,UAAU;GAAE;EACnE;GAAE,OAAO;GAAO,OAAO,EAAG,qBAAqB,MAAM;GAAE;EACvD;GAAE,OAAO;GAAU,OAAO,EAAG,wBAAwB,SAAS;GAAE;EAChE;GAAE,OAAO;GAAY,OAAO,EAAG,0BAA0B,WAAW;GAAE;EACtE;GAAE,OAAO;GAAkB,OAAO,EAAG,gCAAgC,iBAAiB;GAAE;EACxF;GAAE,OAAO;GAAU,OAAO,EAAG,wBAAwB,SAAS;GAAE;EACjE,EAEK,IAAmB;EACvB;GAAE,OAAO;GAAO,OAAO,EAAG,2BAA2B,iBAAiB;GAAE;EACxE;GAAE,OAAO;GAAgB,OAAO,EAAG,mCAAmC,eAAe;GAAE;EACvF;GAAE,OAAO;GAAU,OAAO,EAAG,6BAA6B,SAAS;GAAE;EACrE;GAAE,OAAO;GAAc,OAAO,EAAG,iCAAiC,aAAa;GAAE;EACjF;GAAE,OAAO;GAAe,OAAO,EAAG,gCAAgC,cAAc;GAAE;EACnF,EAGK,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAY,KAAiB,EAAS,MAAM,EAC7C,CAAC,GAAiB,KAAsB,EAAS,MAAM,EACvD,CAAC,GAAU,KAAe,EAAmB,QAAQ,EACrD,CAAC,IAAgB,KAAqB,EAAS,GAAM,EACrD,CAAC,IAAoB,KAAyB,EAAS,GAAM,EAC7D,CAAC,GAAgB,KAAqB,EAAwB,KAAK,EACnE,CAAC,GAAa,MAAkB,EAAkC,EAAE,CAAC,EACrE,CAAC,GAAa,KAAkB,EAAS,GAAM,EAE/C,EAAE,SAAM,YAAS,UAAO,YAAS,iBAAc,EAAuB;EAC1E,WAAW;GACT,QAAQ;IACN,MAAM,MAAe,QAAqB,KAAA,IAAb;IAC7B,WAAW,MAAoB,QAA0B,KAAA,IAAlB;IACvC,QAAQ,KAAe,KAAA;IACxB;GACD,YAAY;IAAE,OAAO;IAAW,QAAQ;IAAG;GAC5C;EACD,MAAM,KAAsB,CAAC;EAC7B,aAAa;EACb,6BAA6B;EAC9B,CAAC,EAEI,CAAC,MAAmB,EAA2B;EACnD,gBAAgB,CAAC,iBAAiB;EAClC,qBAAqB;EACtB,CAAC,EACI,EAAE,oBAAgB,kBAAc,GAAmB,yBAAyB,EAE5E,IAAW,GACd,MACC,EAAM,KAAK,OAAU;EACnB,IAAI,EAAK;EACT,MAAM,EAAK;EACX,aAAa,EAAK,eAAe;EAMjC,MAAM,EAAK;EACX,WAAW,EAAK;EAChB,SAAS,EAAK,WAAW;EACzB,UAAU,EAAK,YAAY;EAC3B,WAAW,EAAK,aAAa;EAC7B,MAAM,EAAK;EACX,WAAW,EAAK;EAChB,WAAW,EAAK;EAChB,WAAW,EAAK,aAAa;EAC7B,cAAc,EAAK,WAAW,gBAAgB;EAC9C,cAAc,EAAK,WAAW,gBAAgB;EAC/C,EAAE,EACL,EAAE,CACH;AAED,UAAgB;AACd,KAAe,EAAS,GAAM,wBAAwB,SAAS,EAAE,CAAC,CAAC;IAClE,CAAC,GAAM,wBAAwB,OAAO,EAAS,CAAC;CAEnD,IAAM,IAAQ,GAAM,wBAAwB,SAAS,GAC/C,IAAU,EAAY,SAAS,GAC/B,IAAa,GACb,IAAqB,GAErB,KAAiB,EAAY,YAAY;AACzC,aAAe,CAAC,IACpB;KAAe,GAAK;AACpB,OAAI;AACF,UAAM,EAAU;KACd,WAAW,EAAE,YAAY;MAAE,OAAO;MAAW,QAAQ,EAAY;MAAQ,EAAE;KAC3E,cAAc,GAAM,EAAE,yBAAsB;AAC1C,UAAI,CAAC,GAAiB,uBAAwB,QAAO;MACrD,IAAM,IAAW,EAAK,wBAChB,IAAW,EAAgB;AACjC,aAAO;OACL,GAAG;OACH,wBAAwB;QACtB,GAAG;QACH,OAAO,CAAC,GAAI,GAAU,SAAS,EAAE,EAAG,GAAG,EAAS,MAAM;QACtD,OAAO,EAAS;QAChB,SAAS,EAAS;QACnB;OACF;;KAEJ,CAAC;aACM;AACR,MAAe,GAAM;;;IAEtB;EAAC;EAAW,EAAY;EAAQ;EAAa;EAAQ,CAAC;AAEzD,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;cAAyD;IAAkB,CAAA,EACzF,kBAAC,KAAD;IAAG,WAAU;cAA8B;IAEvC,CAAA,CACA;;EACF,CAAA;CAGV,IAAM,KAAyB,MAAiC;AAC9D,IAAS,eAAe,EAAU,KAAK;;AA4DzC,QAZI,KAAS,EAAW,WAAW,IAE/B,kBAAC,GAAD;EAAY,WAAU;YACpB,kBAAC,IAAD;GACE,OAAO,EAAG,wBAAwB,4BAA4B;GAC9D,SAAS,EAAM;GACf,eAAe,GAAS;GACxB,CAAA;EACS,CAAA,GAKf,kBAAC,GAAD;EAAY,WAAU;YAAtB;GACE,kBAAC,IAAD;IACE,OAAO,EAAG,mBAAmB,aAAa;IAC1C,aACE,IAAQ,IACJ,EAAG,yBAAyB,wCAAwC,EAClE,OAAO,EAAW,QACnB,CAAC,GACF,EACE,8BACA,oHACD;IAEP,SAEE,kBAAC,IAAD;KACE,SACE,IACI;MACE,OAAO,EAAG,6BAA6B,mBAAmB;MAC1D,gBAAgB,EAAkB,GAAK;MACvC,MAAM,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA;MAClC,GACD,KAAA;KAEN,SAAS,CACP;MACE,OAAO,EAAG,kBAAkB,UAAU;MACtC,gBAAgB,KAAK,GAAS;MAC9B,UAAU;MACV,MAAM,kBAAC,IAAD,EAAW,WAAW,UAAU,IAAU,iBAAiB,MAAQ,CAAA;MAC1E,CACF;KACD,CAAA;IAEJ,CAAA;GAEF,kBAAC,IAAD;IAAa,MAAM,kBAAC,GAAD,EAAK,WAAU,UAAW,CAAA;cAC1C,EACC,qBACA,8SACD;IACW,CAAA;GAMd,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAS,gBAAgB;IACxC,aAAU;IACV,WAAU;cAJZ;KAME,kBAAC,QAAD;MAAM,WAAU;gBACd,kBAAC,IAAD;OAAS,WAAU;OAAgC,eAAY;OAAS,CAAA;MACnE,CAAA;KACP,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAG,6BAA6B,uBAAuB;OACnD,CAAA,EACP,kBAAC,QAAD;OAAM,WAAU;iBACb,EACC,wCACA,yGACD;OACI,CAAA,CACF;;KACP,kBAAC,IAAD;MAAY,WAAU;MAAuC,eAAY;MAAS,CAAA;KAC3E;;GAKT,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,aAAU;MAAgC,WAAU;gBACvD,kBAAC,GAAD;OACE,OAAO;OACP,UAAU;OACV,aAAa,EAAG,+BAA+B,uBAAuB;OACtE,WAAU;OACV,CAAA;MACE,CAAA,EAEN,kBAAC,OAAD;MACE,MAAK;MACL,cAAY,EAAG,sBAAsB,YAAY;MACjD,WAAU;gBAHZ,CAKE,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAY,QAAQ;OACnC,gBAAc,MAAa;OAC3B,cAAY,EAAG,4BAA4B,aAAa;OACxD,OAAO,EAAG,4BAA4B,aAAa;OACnD,WAAW,mKAAmK,MAAa,UAAU,oDAAoD;iBAEzP,kBAAC,IAAD;QAAM,WAAU;QAA6B,eAAY;QAAS,CAAA;OAC3D,CAAA,EACT,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAY,OAAO;OAClC,gBAAc,MAAa;OAC3B,cAAY,EAAG,2BAA2B,YAAY;OACtD,OAAO,EAAG,2BAA2B,YAAY;OACjD,WAAW,mKAAmK,MAAa,SAAS,oDAAoD;iBAExP,kBAAC,GAAD;QAAM,WAAU;QAA6B,eAAY;QAAS,CAAA;OAC3D,CAAA,CACL;QACF;QACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,aAAU;gBACb,kBAAC,GAAD;OACE,OAAO,EAAG,wBAAwB,OAAO;OACzC,OAAO;OACP,SAAS;OACT,UAAU;OACV,CAAA;MACE,CAAA,EACN,kBAAC,OAAD;MAAK,aAAU;gBACb,kBAAC,GAAD;OACE,OAAO,EAAG,6BAA6B,YAAY;OACnD,OAAO;OACP,SAAS;OACT,UAAU;OACV,CAAA;MACE,CAAA,CACF;OACF;;GAGN,kBAAC,KAAD;IAAG,WAAU;cAAb,CACG,EAAG,4BAA4B,gDAAgD;KAC9E,UAAU,EAAmB;KAC7B;KACD,CAAC,EACD,KACC,kBAAC,QAAD;KAAM,WAAU;eAAwB,EAAG,qBAAqB,kBAAkB;KAAQ,CAAA,CAE1F;;GAGH,KAAW,EAAW,WAAW,IAChC,kBAAC,IAAD;IAAc,SAAS,MAAa,UAAU,SAAS;IAAS,OAAO;IAAK,CAAA,GAC1E,EAAmB,SAAS,IAC9B,MAAa,UACX,kBAAC,OAAD;IAAK,aAAU;cACb,kBAAC,IAAD;KAAiB,YAAY;KAAoB,QAAQ;KAAyB,CAAA;IAC9E,CAAA,GAEN,kBAAC,IAAD;IAAiB,MAAK;cACpB,kBAAC,GAAD;KAEE,SAAS;KACT,WAAU;KACV,aAAU;eAET,EAAmB,KAAK,MACvB,kBAAC,GAAD,EAAA,UACE,kBAAC,IAAD;MAA0B;MAAW,QAAQ;MAAyB,CAAA,EAC3D,EAFI,EAAU,GAEd,CACb;KACS,EAVP,iBAUO;IACG,CAAA,GAGpB,kBAAC,GAAD;IACE,MAAM,kBAAC,GAAD;KAAK,WAAU;KAAgC,eAAY;KAAS,CAAA;IAC1E,cACE,KAAe,MAAe,SAAS,MAAoB,QACvD,iBACA;IAEN,OACE,KAAe,MAAe,SAAS,MAAoB,QACvD,EAAG,4BAA4B,sBAAsB,GACrD,EAAG,+BAA+B,oBAAoB;IAE5D,aACE,KAAe,MAAe,SAAS,MAAoB,QACvD,EAAG,+BAA+B,uCAAuC,GACzE,EACE,yBACA,kMACD;IAEP,QACE,CAAC,KAAe,MAAe,SAAS,MAAoB,QAC1D,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,KACC,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAkB,GAAK;MACtC,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA,EAC1B,EAAG,6BAA6B,mBAAmB,CAC7C;SAEX,kBAAC,GAAD,EAAe,QAAO,6DAA8D,CAAA,CAChF;SACJ,KAAA;IAEN,CAAA;GAIH,KAAW,EAAmB,SAAS,KACtC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,UAAU;KACV,WAAU;eAET,IAAc,EAAG,kBAAkB,aAAa,GAAG,EAAG,mBAAmB,YAAY;KAC/E,CAAA;IACL,CAAA;GAIP,KACC,kBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA;GAGR,kBAAC,GAAD;IACE,QAAQ;IACR,eAAe,EAAsB,GAAM;IAC3C,iBAAiB;AAEf,KADA,EAAsB,GAAM,EAC5B,EAAS,iBAAiB;;IAE5B,OAAM;IACN,SAAQ;IACR,CAAA;GAGF,kBAAC,IAAD;IACE,QAAQ;IACR,eAAe,EAAkB,GAAM;IACvC,UA9SwB,OAAO,MAAgC;AACnE,SAAI;MACF,IAAM,IAAS,MAAM,GAAgB,EACnC,WAAW,EACT,OAAO;OACL,MAAM,EAAS;OACf,aAAa,EAAS,eAAe,KAAA;OACrC,MAAM,EAAS;OACf,WAAW,EAAS;OACpB,UAAU,EAAS,YAAY,KAAA;OAC/B,WAAW,EAAS,aAAa,KAAA;OACjC,SAAS,EAAS,WAAW,KAAA;OAC7B,WAAW,EAAS,aAAa,KAAA;OACjC,MAAM,EAAS,KAAK,SAAS,IAAI,EAAS,OAAO,KAAA;OACjD,eAAe,EAAS,iBAAiB,KAAA;OACzC,kBAAkB,EAAS,oBAAoB,KAAA;OAC/C,cAAc,EAAS,gBAAgB,KAAA;OACvC,UAAU,EAAS,YAAY,KAAA;OAChC,EACF,EACF,CAAC;AACF,UAAI,EAAO,SAAS,EAAsB,EAAO,MAAM,EAAE;AAEvD,OADA,EAAkB,GAAM,EACxB,EAAsB,GAAK;AAC3B;;AAEF,UAAI,CAAC,EAAO,MAAM,6BAA6B,GAC7C,OAAU,MAAM,EAAG,0BAA0B,6BAA6B,CAAC;MAE7E,IAAM,IAAiB,EAAO,KAAK,4BAA4B;AAK/D,MAJA,EAAkB,GAAM,EACxB,EAAkB,EAAG,4BAA4B,iCAAiC,CAAC,EACnF,MAAM,GAAU,EAAe,EAC/B,MAAM,GAAS,EACf,iBAAiB,EAAkB,KAAK,EAAE,IAAK;cACxC,GAAK;AACZ,UAAI,EAAsB,EAAI,EAAE;AAE9B,OADA,EAAkB,GAAM,EACxB,EAAsB,GAAK;AAC3B;;AAEF,YAAM;;;IAsQJ,cACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,kBAAkB,OAAO;KAC1B,CAAA,EACL,kBAAC,IAAD;KAAiB,YAAW;KAAyB,eAAe;KAAkB,CAAA,CAClF,EAAA,CAAA;IAER,CAAA;GACS"}

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

@@ -1 +0,0 @@

- {"version":3,"file":"EnvTopologyPage.js","names":[],"sources":["../../src/pages/EnvTopologyPage.tsx"],"sourcesContent":["import type { FC, FormEvent } from 'react';\nimport { useMemo, useState } from 'react';\nimport { Network, Plus, ArrowRight, RefreshCw } from 'lucide-react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nimport { PageHeader, Card, LoadingState, ErrorState, EmptyState } from '@/components/shared';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport { notify } from '@/lib/toast';\nimport {\n useGetEnvTopologyQuery,\n useRegisterDeploymentMutation,\n usePromoteDeploymentMutation,\n type GetEnvTopologyQuery,\n} from '@/generated/wspace-operations';\nimport { DeploymentEnvironment } from '@/generated/wspace-types';\n\nconst ENVIRONMENTS: DeploymentEnvironment[] = [\n DeploymentEnvironment.Development,\n DeploymentEnvironment.Staging,\n DeploymentEnvironment.Production,\n];\n\nconst ENV_LABEL: Record<string, string> = {\n DEVELOPMENT: 'Development',\n STAGING: 'Staging',\n PRODUCTION: 'Production',\n};\n\n/**\n * EnvTopologyPage — the environment-topology matrix: every component (rows) and its current deployed\n * version across Development / Staging / Production (columns). Drift is highlighted (a cell whose\n * version differs from Production is amber; matching Production is green). Supports recording a\n * deployment and promoting a version between environments (both audited server-side).\n */\nexport const EnvTopologyPage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const v = t(key);\n return v === key ? fallback : v;\n };\n const { hasPermission } = usePermissions();\n const canEdit = hasPermission(VIBE_PERMISSIONS.VIBE_UPDATE);\n\n const { data, loading, error, refetch } = useGetEnvTopologyQuery({\n fetchPolicy: 'cache-and-network',\n });\n const [registerDeployment, { loading: registering }] = useRegisterDeploymentMutation();\n const [promoteDeployment, { loading: promoting }] = usePromoteDeploymentMutation();\n\n const rows = useMemo<GetEnvTopologyQuery['envTopology']>(() => data?.envTopology ?? [], [data]);\n\n const [modal, setModal] = useState<null | 'register' | 'promote'>(null);\n const [formComponentId, setFormComponentId] = useState('');\n const [formEnv, setFormEnv] = useState<DeploymentEnvironment>(DeploymentEnvironment.Staging);\n const [formFromEnv, setFormFromEnv] = useState<DeploymentEnvironment>(\n DeploymentEnvironment.Staging\n );\n const [formToEnv, setFormToEnv] = useState<DeploymentEnvironment>(\n DeploymentEnvironment.Production\n );\n const [formVersion, setFormVersion] = useState('');\n\n const openRegister = (componentId: string, environment: DeploymentEnvironment): void => {\n setFormComponentId(componentId);\n setFormEnv(environment);\n setFormVersion('');\n setModal('register');\n };\n\n const closeModal = (): void => {\n setModal(null);\n setFormComponentId('');\n setFormVersion('');\n };\n\n const handleRegister = async (e: FormEvent): Promise<void> => {\n e.preventDefault();\n if (!formComponentId || formVersion.trim().length === 0) return;\n try {\n await registerDeployment({\n variables: {\n componentId: formComponentId,\n environment: formEnv,\n version: formVersion.trim(),\n },\n });\n await refetch();\n notify.success(\n tr('envTopology.recorded', 'Deployment recorded'),\n `${formVersion.trim()} → ${ENV_LABEL[formEnv]}`\n );\n closeModal();\n } catch (err) {\n notify.error(\n tr('envTopology.recordFailed', 'Could not record deployment'),\n (err as Error).message\n );\n }\n };\n\n const handlePromote = async (e: FormEvent): Promise<void> => {\n e.preventDefault();\n if (!formComponentId || formFromEnv === formToEnv) return;\n try {\n await promoteDeployment({\n variables: {\n componentId: formComponentId,\n fromEnvironment: formFromEnv,\n toEnvironment: formToEnv,\n },\n });\n await refetch();\n notify.success(\n tr('envTopology.promoted', 'Version promoted'),\n `${ENV_LABEL[formFromEnv]} → ${ENV_LABEL[formToEnv]}`\n );\n closeModal();\n } catch (err) {\n notify.error(tr('envTopology.promoteFailed', 'Could not promote'), (err as Error).message);\n }\n };\n\n const componentOptions = rows.map((r) => ({ id: r.component.id, name: r.component.name }));\n\n return (\n <div className=\"space-y-6\">\n <PageHeader\n title={tr('envTopology.title', 'Environment Topology')}\n description={tr(\n 'envTopology.subtitle',\n 'Current deployed version of every component across Development, Staging and Production.'\n )}\n actions={\n canEdit && rows.length > 0 ? (\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => {\n setFormComponentId(componentOptions[0]?.id ?? '');\n setModal('promote');\n }}\n className=\"flex items-center gap-1.5 px-3 py-2 text-sm rounded-md border border-border-default text-text-primary hover:bg-bg-sunken\"\n >\n <ArrowRight className=\"size-4\" />\n {tr('envTopology.promote', 'Promote version')}\n </button>\n <button\n type=\"button\"\n onClick={() => {\n setFormComponentId(componentOptions[0]?.id ?? '');\n setFormEnv(DeploymentEnvironment.Staging);\n setFormVersion('');\n setModal('register');\n }}\n className=\"flex items-center gap-1.5 px-3 py-2 text-sm rounded-md bg-action-primary-bg text-action-primary-text hover:opacity-90\"\n >\n <Plus className=\"size-4\" />\n {tr('envTopology.record', 'Record deployment')}\n </button>\n </div>\n ) : undefined\n }\n />\n\n <PagePurpose icon={<Network className=\"size-4\" />}>\n {tr(\n 'envTopology.purpose',\n 'This view answers \"what version of each component is running where?\" across Development, Staging and Production at a glance. Use it to confirm a release reached prod, spot environments that have drifted behind, and promote a version forward — so you always know the true state of every deployment.'\n )}\n </PagePurpose>\n\n {loading && rows.length === 0 ? (\n <LoadingState />\n ) : error ? (\n <ErrorState message={error.message} onRetry={() => void refetch()} />\n ) : rows.length === 0 ? (\n <EmptyState\n icon={<Network className=\"size-10\" />}\n title={tr('envTopology.emptyTitle', 'No components yet')}\n description={tr(\n 'envTopology.emptyDesc',\n 'Register components in the catalog, then record their deployments to see version state across environments here.'\n )}\n />\n ) : (\n <Card>\n <div className=\"overflow-x-auto\">\n <table className=\"w-full text-sm\">\n <thead>\n <tr className=\"border-b border-border-default text-left text-text-secondary\">\n <th className=\"px-4 py-3 font-medium\">\n {tr('envTopology.component', 'Component')}\n </th>\n {ENVIRONMENTS.map((env) => (\n <th key={env} className=\"px-4 py-3 font-medium\">\n {ENV_LABEL[env]}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {rows.map((row) => {\n const prod =\n row.environments.find((e) => e.environment === 'PRODUCTION')?.version ?? null;\n return (\n <tr\n key={row.component.id}\n className=\"border-b border-border-subtle last:border-0\"\n >\n <td className=\"px-4 py-3\">\n <div className=\"font-medium text-text-primary\">{row.component.name}</div>\n <div className=\"text-xs text-text-tertiary\">{row.component.type}</div>\n </td>\n {ENVIRONMENTS.map((env) => {\n const cell = row.environments.find((e) => e.environment === env);\n const version = cell?.version ?? null;\n let tone = 'text-text-tertiary';\n let dot = 'bg-border-strong';\n if (version) {\n if (prod && version === prod) {\n tone = 'text-text-primary';\n dot = 'bg-status-success-text';\n } else if (prod && version !== prod) {\n tone = 'text-text-primary';\n dot = 'bg-status-warning-text';\n } else {\n tone = 'text-text-primary';\n dot = 'bg-accent-blue';\n }\n }\n return (\n <td key={env} className=\"px-4 py-3\">\n {version ? (\n <span className={`inline-flex items-center gap-2 font-mono ${tone}`}>\n <span\n className={`inline-block size-2 rounded-full ${dot}`}\n aria-hidden\n />\n {version}\n </span>\n ) : canEdit ? (\n <button\n type=\"button\"\n onClick={() => openRegister(row.component.id, env)}\n className=\"text-text-tertiary hover:text-text-primary\"\n >\n — {tr('envTopology.add', 'add')}\n </button>\n ) : (\n <span className=\"text-text-tertiary\">—</span>\n )}\n </td>\n );\n })}\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n </Card>\n )}\n\n {modal === 'register' && (\n <ModalShell\n title={tr('envTopology.recordTitle', 'Record a deployment')}\n onClose={closeModal}\n >\n <form onSubmit={(e) => void handleRegister(e)} className=\"space-y-3\">\n <LabeledSelect\n label={tr('envTopology.component', 'Component')}\n value={formComponentId}\n onChange={setFormComponentId}\n options={componentOptions.map((c) => ({ value: c.id, label: c.name }))}\n />\n <LabeledSelect\n label={tr('envTopology.environment', 'Environment')}\n value={formEnv}\n onChange={(v) => setFormEnv(v as DeploymentEnvironment)}\n options={ENVIRONMENTS.map((e) => ({ value: e, label: ENV_LABEL[e] ?? e }))}\n />\n <label className=\"block\">\n <span className=\"text-sm text-text-secondary\">\n {tr('envTopology.version', 'Version')}\n </span>\n <input\n value={formVersion}\n onChange={(e) => setFormVersion(e.target.value)}\n placeholder=\"v1.2.3\"\n className=\"mt-1 w-full font-mono text-sm px-3 py-2 rounded-md border border-border-default bg-bg-surface text-text-primary\"\n />\n </label>\n <ModalFooter\n onCancel={closeModal}\n submitLabel={tr('envTopology.record', 'Record deployment')}\n disabled={registering || !formComponentId || formVersion.trim().length === 0}\n />\n </form>\n </ModalShell>\n )}\n\n {modal === 'promote' && (\n <ModalShell\n title={tr('envTopology.promoteTitle', 'Promote a version')}\n onClose={closeModal}\n >\n <form onSubmit={(e) => void handlePromote(e)} className=\"space-y-3\">\n <LabeledSelect\n label={tr('envTopology.component', 'Component')}\n value={formComponentId}\n onChange={setFormComponentId}\n options={componentOptions.map((c) => ({ value: c.id, label: c.name }))}\n />\n <div className=\"flex items-center gap-2\">\n <LabeledSelect\n label={tr('envTopology.from', 'From')}\n value={formFromEnv}\n onChange={(v) => setFormFromEnv(v as DeploymentEnvironment)}\n options={ENVIRONMENTS.map((e) => ({ value: e, label: ENV_LABEL[e] ?? e }))}\n />\n <ArrowRight className=\"size-4 mt-5 text-text-tertiary\" />\n <LabeledSelect\n label={tr('envTopology.to', 'To')}\n value={formToEnv}\n onChange={(v) => setFormToEnv(v as DeploymentEnvironment)}\n options={ENVIRONMENTS.map((e) => ({ value: e, label: ENV_LABEL[e] ?? e }))}\n />\n </div>\n <ModalFooter\n onCancel={closeModal}\n submitLabel={tr('envTopology.promote', 'Promote version')}\n disabled={promoting || !formComponentId || formFromEnv === formToEnv}\n />\n </form>\n </ModalShell>\n )}\n </div>\n );\n};\n\nconst ModalShell: FC<{ title: string; onClose: () => void; children: React.ReactNode }> = ({\n title,\n onClose,\n children,\n}) => (\n <div\n className=\"fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay p-4\"\n onClick={onClose}\n >\n <div\n className=\"w-full max-w-md rounded-card border border-border-subtle bg-bg-elevated p-6 shadow-[var(--shadow-elevation-4)]\"\n onClick={(e) => e.stopPropagation()}\n >\n <h3 className=\"mb-4 text-lg font-semibold text-text-primary\">{title}</h3>\n {children}\n </div>\n </div>\n);\n\nconst LabeledSelect: FC<{\n label: string;\n value: string;\n onChange: (v: string) => void;\n options: Array<{ value: string; label: string }>;\n}> = ({ label, value, onChange, options }) => (\n <label className=\"block flex-1\">\n <span className=\"text-sm text-text-secondary\">{label}</span>\n <select\n value={value}\n onChange={(e) => onChange(e.target.value)}\n className=\"mt-1 w-full text-sm px-3 py-2 rounded-md border border-border-default bg-bg-surface text-text-primary\"\n >\n {options.map((o) => (\n <option key={o.value} value={o.value}>\n {o.label}\n </option>\n ))}\n </select>\n </label>\n);\n\nconst ModalFooter: FC<{ onCancel: () => void; submitLabel: string; disabled: boolean }> = ({\n onCancel,\n submitLabel,\n disabled,\n}) => (\n <div className=\"flex items-center justify-end gap-2 pt-2\">\n <button\n type=\"button\"\n onClick={onCancel}\n className=\"px-3 py-2 text-sm rounded-md text-text-secondary hover:bg-bg-sunken\"\n >\n Cancel\n </button>\n <button\n type=\"submit\"\n disabled={disabled}\n className=\"flex items-center gap-1.5 px-3 py-2 text-sm rounded-md bg-action-primary-bg text-action-primary-text hover:opacity-90 disabled:opacity-50\"\n >\n <RefreshCw className=\"size-4\" />\n {submitLabel}\n </button>\n </div>\n);\n"],"mappings":"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"}

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

@@ -1 +0,0 @@

- {"version":3,"file":"GettingStartedPage.js","names":[],"sources":["../../src/pages/GettingStartedPage.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { Terminal, ExternalLink, Download, Info } from 'lucide-react';\nimport { PageHeader, Card, InstallTabs } from '@/components/shared';\nimport { EmphasisPanel, ShowMore } from '@burdenoff/fe-libs/ui';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { Tabs, type TabItem } from '@burdenoff/fe-libs/chrome';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nconst AGENT_NPM_URL = 'https://www.npmjs.com/package/@vibecontrols/agent';\nconst INSTALL_DOCS_URL = 'https://docs.vibecontrols.com/users/installing-the-agent';\n\n/**\n * Getting Started page — a tabbed guide to installing and running the\n * VibeControls Agent. Two top-level tabs:\n *\n * • Install — shows the global bun / npm install commands via the shared\n * `InstallTabs` component, plus the real connect-and-run flow.\n * • CLI Reference — a compact reference of the agent's `vibe` commands.\n *\n * Bun (or Node >= 18 for npm) is the only machine prerequisite. On first run\n * `vibe start` sets up a Cloudflare tunnel, generates an agentApiKey, and\n * waits for the platform to push OAuth credentials once the agent is\n * connected here.\n *\n * Official docs: https://docs.vibecontrols.com/users/installing-the-agent\n */\nexport function GettingStartedPage() {\n const { t } = useI18n();\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 const [params, setParams] = useSearchParams();\n const tabs: TabItem[] = useMemo(\n () => [\n { id: 'install', label: tr('gettingStarted.installTab', 'Install') },\n { id: 'cli', label: tr('gettingStarted.cliTab', 'CLI Reference') },\n ],\n [tr]\n );\n const activeId = params.get('tab') ?? tabs[0].id;\n const handleTabChange = (id: string) => {\n const next = new URLSearchParams(params);\n if (id === tabs[0].id) next.delete('tab');\n else next.set('tab', id);\n setParams(next, { replace: true });\n };\n\n const [pinnedVersion, setPinnedVersion] = useState('');\n\n return (\n <MotionPage className=\"space-y-8 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n <PageHeader\n title={tr('gettingStarted.title', 'Getting Started')}\n description={tr(\n 'gettingStarted.description',\n 'Install and configure the VibeControls Agent CLI'\n )}\n />\n\n <div className=\"border-b border-border-subtle\">\n <Tabs\n items={tabs}\n activeTabId={activeId}\n onTabChange={handleTabChange}\n variant=\"underline\"\n />\n </div>\n\n {activeId === 'install' && (\n <div className=\"space-y-6\">\n {/* Hero — the single emphasised zone on this page */}\n <EmphasisPanel className=\"sm:p-8\">\n <div className=\"flex items-start gap-4\">\n <div className=\"flex-shrink-0 size-12 rounded-xl bg-[var(--color-accent-soft)] flex items-center justify-center\">\n <Download className=\"size-6 text-accent-purple\" />\n </div>\n <div className=\"flex-1\">\n <h2 className=\"text-lg sm:text-xl font-semibold text-text-primary mb-1\">\n {tr('gettingStarted.installAgent', 'Install the Agent')}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'gettingStarted.installAgentDesc',\n 'Install the agent globally with bun or npm on the machine you want to manage, then run vibe start. Bun (or Node >= 18 for npm) is the only prerequisite.'\n )}\n </p>\n <a\n href={INSTALL_DOCS_URL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"mt-3 inline-flex items-center gap-1.5 text-sm text-text-link hover:text-text-linkHover hover:underline\"\n >\n {tr('gettingStarted.viewInstallDocs', 'View the full install docs')}\n <ExternalLink className=\"size-3.5\" />\n </a>\n </div>\n </div>\n </EmphasisPanel>\n\n {/* Install tabs */}\n <Card padding=\"none\">\n <div className=\"p-5 sm:p-6\">\n <InstallTabs pinnedAgentVersion={pinnedVersion || undefined} />\n\n <div className=\"mt-6 pt-4 border-t border-border-subtle\">\n <label\n htmlFor=\"pinned-version\"\n className=\"text-xs font-medium text-text-secondary flex items-center gap-1.5 mb-1.5\"\n >\n <Info className=\"size-3.5\" />{' '}\n {tr('gettingStarted.pinVersion', 'Pin a specific agent version (optional)')}\n </label>\n <input\n aria-label=\"pinned-version\"\n id=\"pinned-version\"\n type=\"text\"\n placeholder={tr(\n 'gettingStarted.pinVersionPlaceholder',\n 'e.g. 2026.408.1 (leave blank for latest)'\n )}\n value={pinnedVersion}\n onChange={(e) => setPinnedVersion(e.target.value)}\n className=\"w-full max-w-xs px-3 py-2 rounded-input border border-border-default bg-bg-elevated text-sm text-text-primary focus-visible:outline-none focus-visible:border-border-strong focus-visible:shadow-[var(--shadow-focus)]\"\n />\n </div>\n </div>\n </Card>\n\n {/* Next steps */}\n <Card padding=\"none\">\n <div className=\"p-5 sm:p-6\">\n <h3 className=\"text-base font-semibold text-text-primary mb-3\">\n {tr('gettingStarted.nextSteps', 'Next steps')}\n </h3>\n <ol className=\"list-decimal list-inside space-y-2 text-sm text-text-secondary\">\n <li>\n {tr('gettingStarted.nextStep1Prefix', 'Start the agent:')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe start\n </code>{' '}\n {tr(\n 'gettingStarted.nextStep1Suffix',\n '— on first run it establishes a Cloudflare tunnel, generates an agentApiKey, and waits in pre-config mode for the platform.'\n )}\n </li>\n <li>\n {tr('gettingStarted.nextStep2Prefix', 'In this UI, go to')}{' '}\n <strong>\n {tr('gettingStarted.targetsAndAgents', 'Targets & Agents')} →{' '}\n {tr('gettingStarted.addAgent', 'Add Agent')}\n </strong>\n {tr(\n 'gettingStarted.nextStep2Suffix',\n ', create or pick a target, and paste the tunnel URL and agentApiKey that vibe start printed. The platform then pushes OAuth credentials automatically and the agent activates.'\n )}\n </li>\n <li>\n {tr('gettingStarted.nextStep3Prefix', 'Run it as a background service:')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe autostart install\n </code>{' '}\n {tr('gettingStarted.nextStep3Suffix', '(remove later with')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe autostart uninstall\n </code>\n {tr('gettingStarted.nextStep3End', ').')}\n </li>\n <li>\n {tr('gettingStarted.nextStep4Prefix', 'Verify it is running with')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe health\n </code>{' '}\n {tr('gettingStarted.nextStep4And', 'and')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe status\n </code>\n .\n </li>\n </ol>\n <a\n href={INSTALL_DOCS_URL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"mt-4 inline-flex items-center gap-1.5 text-sm text-text-link hover:text-text-linkHover hover:underline\"\n >\n {tr('gettingStarted.viewInstallDocs', 'View the full install docs')}\n <ExternalLink className=\"size-3.5\" />\n </a>\n </div>\n </Card>\n </div>\n )}\n\n {activeId === 'cli' && (\n <Card padding=\"none\">\n <div className=\"p-5 sm:p-6\">\n <h3 className=\"text-base font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Terminal className=\"size-5 text-accent-purple\" />\n {tr('gettingStarted.cliQuickRef', 'CLI Quick Reference')}\n </h3>\n <ShowMore\n collapsedHeight={172}\n label={tr('gettingStarted.showAllCommands', 'Show all commands')}\n >\n <MotionList stagger={0.04} className=\"space-y-2\">\n {[\n {\n cmd: 'vibe start',\n desc: tr(\n 'gettingStarted.cmdVibeStart',\n 'First run: auto-detects deps, picks a port (default 3005), establishes a Cloudflare tunnel, generates an agentApiKey, then waits for the platform'\n ),\n },\n {\n cmd: 'vibe start --profile <name>',\n desc: tr(\n 'gettingStarted.cmdVibeStartProfile',\n 'Run a named profile (e.g. alpha, default) for multiple agent instances'\n ),\n },\n {\n cmd: 'vibe setup',\n desc: tr(\n 'gettingStarted.cmdVibeSetup',\n 'Install missing dependencies (tmux, ttyd, cloudflared)'\n ),\n },\n {\n cmd: 'vibe health',\n desc: tr(\n 'gettingStarted.cmdVibeHealth',\n 'Run an HTTP health check on the agent'\n ),\n },\n {\n cmd: 'vibe status',\n desc: tr('gettingStarted.cmdVibeStatus', 'Show all running agent instances'),\n },\n {\n cmd: 'vibe autostart install',\n desc: tr(\n 'gettingStarted.cmdVibeAutostartInstall',\n 'Run the agent as a background service (daemonize)'\n ),\n },\n {\n cmd: 'vibe autostart uninstall',\n desc: tr(\n 'gettingStarted.cmdVibeAutostartUninstall',\n 'Remove the background service'\n ),\n },\n {\n cmd: 'vibecontrols agents list --active',\n desc: tr(\n 'gettingStarted.cmdAgentsListActive',\n 'Platform CLI — see the connected agent on the backend'\n ),\n },\n ].map((item) => (\n <MotionItem\n key={item.cmd}\n className=\"flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 px-3 py-2 rounded-button hover:bg-bg-sunken transition-colors\"\n >\n <code className=\"text-xs font-mono text-text-primary sm:w-72 flex-shrink-0\">\n $ {item.cmd}\n </code>\n <span className=\"text-xs text-text-muted\">{item.desc}</span>\n </MotionItem>\n ))}\n </MotionList>\n </ShowMore>\n <div className=\"mt-4 pt-4 border-t border-border-seam flex flex-wrap items-center gap-3\">\n <a\n href={AGENT_NPM_URL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"inline-flex items-center gap-2 px-3 py-1.5 text-xs border border-border-default text-text-secondary rounded-button hover:bg-bg-sunken hover:border-border-strong transition-colors\"\n >\n {tr('gettingStarted.agentNpmPackage', 'Agent npm package')}{' '}\n <ExternalLink className=\"size-3\" />\n </a>\n <span className=\"text-xs text-text-muted\">\n {tr('gettingStarted.agentNpmLatest', '@vibecontrols/agent (latest)')}\n </span>\n </div>\n </div>\n </Card>\n )}\n </MotionPage>\n );\n}\n"],"mappings":";;;;;;;;;;;;;AASA,IAAM,IAAgB,qDAChB,IAAmB;AAiBzB,SAAgB,IAAqB;CACnC,IAAM,EAAE,SAAM,GAAS,EACjB,IAAK,GACR,GAAa,MAA6B;EACzC,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAEpC,CAAC,EAAE,CACJ,EACK,CAAC,GAAQ,KAAa,GAAiB,EACvC,IAAkB,QAChB,CACJ;EAAE,IAAI;EAAW,OAAO,EAAG,6BAA6B,UAAU;EAAE,EACpE;EAAE,IAAI;EAAO,OAAO,EAAG,yBAAyB,gBAAgB;EAAE,CACnE,EACD,CAAC,EAAG,CACL,EACK,IAAW,EAAO,IAAI,MAAM,IAAI,EAAK,GAAG,IACxC,KAAmB,MAAe;EACtC,IAAM,IAAO,IAAI,gBAAgB,EAAO;AAGxC,EAFI,MAAO,EAAK,GAAG,KAAI,EAAK,OAAO,MAAM,GACpC,EAAK,IAAI,OAAO,EAAG,EACxB,EAAU,GAAM,EAAE,SAAS,IAAM,CAAC;IAG9B,CAAC,GAAe,KAAoB,EAAS,GAAG;AAEtD,QACE,kBAAC,GAAD;EAAY,WAAU;YAAtB;GACE,kBAAC,GAAD;IACE,OAAO,EAAG,wBAAwB,kBAAkB;IACpD,aAAa,EACX,8BACA,mDACD;IACD,CAAA;GAEF,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACE,OAAO;KACP,aAAa;KACb,aAAa;KACb,SAAQ;KACR,CAAA;IACE,CAAA;GAEL,MAAa,aACZ,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEE,kBAAC,GAAD;MAAe,WAAU;gBACvB,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,EAAU,WAAU,6BAA8B,CAAA;QAC9C,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,MAAD;UAAI,WAAU;oBACX,EAAG,+BAA+B,oBAAoB;UACpD,CAAA;SACL,kBAAC,KAAD;UAAG,WAAU;oBACV,EACC,mCACA,2JACD;UACC,CAAA;SACJ,kBAAC,KAAD;UACE,MAAM;UACN,QAAO;UACP,KAAI;UACJ,WAAU;oBAJZ,CAMG,EAAG,kCAAkC,6BAA6B,EACnE,kBAAC,GAAD,EAAc,WAAU,YAAa,CAAA,CACnC;;SACA;UACF;;MACQ,CAAA;KAGhB,kBAAC,GAAD;MAAM,SAAQ;gBACZ,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAa,oBAAoB,KAAiB,KAAA,GAAa,CAAA,EAE/D,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,SAAD;SACE,SAAQ;SACR,WAAU;mBAFZ;UAIE,kBAAC,GAAD,EAAM,WAAU,YAAa,CAAA;UAAC;UAC7B,EAAG,6BAA6B,0CAA0C;UACrE;YACR,kBAAC,SAAD;SACE,cAAW;SACX,IAAG;SACH,MAAK;SACL,aAAa,EACX,wCACA,2CACD;SACD,OAAO;SACP,WAAW,MAAM,EAAiB,EAAE,OAAO,MAAM;SACjD,WAAU;SACV,CAAA,CACE;UACF;;MACD,CAAA;KAGP,kBAAC,GAAD;MAAM,SAAQ;gBACZ,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,4BAA4B,aAAa;SAC1C,CAAA;QACL,kBAAC,MAAD;SAAI,WAAU;mBAAd;UACE,kBAAC,MAAD,EAAA,UAAA;WACG,EAAG,kCAAkC,mBAAmB;WAAE;WAC3D,kBAAC,QAAD;YAAM,WAAU;sBAA8E;YAEvF,CAAA;WAAC;WACP,EACC,kCACA,8HACD;WACE,EAAA,CAAA;UACL,kBAAC,MAAD,EAAA,UAAA;WACG,EAAG,kCAAkC,oBAAoB;WAAE;WAC5D,kBAAC,UAAD,EAAA,UAAA;YACG,EAAG,mCAAmC,mBAAmB;YAAC;YAAG;YAC7D,EAAG,2BAA2B,YAAY;YACpC,EAAA,CAAA;WACR,EACC,kCACA,iLACD;WACE,EAAA,CAAA;UACL,kBAAC,MAAD,EAAA,UAAA;WACG,EAAG,kCAAkC,kCAAkC;WAAE;WAC1E,kBAAC,QAAD;YAAM,WAAU;sBAA8E;YAEvF,CAAA;WAAC;WACP,EAAG,kCAAkC,qBAAqB;WAAE;WAC7D,kBAAC,QAAD;YAAM,WAAU;sBAA8E;YAEvF,CAAA;WACN,EAAG,+BAA+B,KAAK;WACrC,EAAA,CAAA;UACL,kBAAC,MAAD,EAAA,UAAA;WACG,EAAG,kCAAkC,4BAA4B;WAAE;WACpE,kBAAC,QAAD;YAAM,WAAU;sBAA8E;YAEvF,CAAA;WAAC;WACP,EAAG,+BAA+B,MAAM;WAAE;WAC3C,kBAAC,QAAD;YAAM,WAAU;sBAA8E;YAEvF,CAAA;;WAEJ,EAAA,CAAA;UACF;;QACL,kBAAC,KAAD;SACE,MAAM;SACN,QAAO;SACP,KAAI;SACJ,WAAU;mBAJZ,CAMG,EAAG,kCAAkC,6BAA6B,EACnE,kBAAC,GAAD,EAAc,WAAU,YAAa,CAAA,CACnC;;QACA;;MACD,CAAA;KACH;;GAGP,MAAa,SACZ,kBAAC,GAAD;IAAM,SAAQ;cACZ,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,MAAD;OAAI,WAAU;iBAAd,CACE,kBAAC,GAAD,EAAU,WAAU,6BAA8B,CAAA,EACjD,EAAG,8BAA8B,sBAAsB,CACrD;;MACL,kBAAC,GAAD;OACE,iBAAiB;OACjB,OAAO,EAAG,kCAAkC,oBAAoB;iBAEhE,kBAAC,GAAD;QAAY,SAAS;QAAM,WAAU;kBAClC;SACC;UACE,KAAK;UACL,MAAM,EACJ,+BACA,oJACD;UACF;SACD;UACE,KAAK;UACL,MAAM,EACJ,sCACA,yEACD;UACF;SACD;UACE,KAAK;UACL,MAAM,EACJ,+BACA,yDACD;UACF;SACD;UACE,KAAK;UACL,MAAM,EACJ,gCACA,wCACD;UACF;SACD;UACE,KAAK;UACL,MAAM,EAAG,gCAAgC,mCAAmC;UAC7E;SACD;UACE,KAAK;UACL,MAAM,EACJ,0CACA,oDACD;UACF;SACD;UACE,KAAK;UACL,MAAM,EACJ,4CACA,gCACD;UACF;SACD;UACE,KAAK;UACL,MAAM,EACJ,sCACA,wDACD;UACF;SACF,CAAC,KAAK,MACL,kBAAC,GAAD;SAEE,WAAU;mBAFZ,CAIE,kBAAC,QAAD;UAAM,WAAU;oBAAhB,CAA4E,MACvE,EAAK,IACH;aACP,kBAAC,QAAD;UAAM,WAAU;oBAA2B,EAAK;UAAY,CAAA,CACjD;WAPN,EAAK,IAOC,CACb;QACS,CAAA;OACJ,CAAA;MACX,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QACE,MAAM;QACN,QAAO;QACP,KAAI;QACJ,WAAU;kBAJZ;SAMG,EAAG,kCAAkC,oBAAoB;SAAE;SAC5D,kBAAC,GAAD,EAAc,WAAU,UAAW,CAAA;SACjC;WACJ,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAG,iCAAiC,+BAA+B;QAC/D,CAAA,CACH;;MACF;;IACD,CAAA;GAEE"}

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

@@ -1 +0,0 @@

- {"version":3,"file":"HealthPage.js","names":[],"sources":["../../src/pages/HealthPage.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport {\n AlertTriangle,\n CheckCircle2,\n ChevronDown,\n Eye,\n FileText,\n Plug,\n RefreshCw,\n RotateCw,\n Server,\n Terminal,\n XCircle,\n Zap,\n} from 'lucide-react';\nimport { MotionItem, MotionList, MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n ActionMenu,\n type ActionMenuItem,\n AgentSetupBanner,\n Card,\n PageHeader,\n StatCard,\n} from '@/components/shared';\nimport {\n EmphasisPanel,\n PagePurpose,\n NextSteps,\n IllustratedEmptyState,\n} from '@burdenoff/fe-libs/ui';\nimport {\n useVibecontrolsAgentHealthProbesQuery,\n useStartVibecontrolsAgentMutation,\n} from '@/generated/wspace-operations';\nimport { notify } from '@/lib/toast';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { useVibeControls, useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useListTargetsQuery, type ListTargetsQuery } from '@/generated/wspace-operations';\n\ntype TargetItem = NonNullable<ListTargetsQuery['targets']['items'][number]>;\n\nconst HEALTH_AUTO_REFRESH_MS = 30000;\n\ntype AgentHealthProbe = NonNullable<\n ReturnType<typeof useVibecontrolsAgentHealthProbesQuery>['data']\n>['vibecontrolsAgentHealthProbes'][number];\n\nexport function HealthPage() {\n const { t } = useI18n();\n const { workspaceId } = useVibeControls();\n const navigate = useVibeNavigate();\n const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n const canListAgents = hasPermission(VIBE_PERMISSIONS.AGENT_LIST);\n\n const [isRefreshing, setIsRefreshing] = useState(false);\n const [lastRefresh, setLastRefresh] = useState(new Date());\n const [autoRefresh, setAutoRefresh] = useState(true);\n // Which agents have their error-details section expanded (Health remediation).\n const [expandedAgents, setExpandedAgents] = useState<Record<string, boolean>>({});\n const [reconnectingAgentId, setReconnectingAgentId] = useState<string | null>(null);\n const [startAgentMutation] = useStartVibecontrolsAgentMutation();\n\n const {\n agents: cachedAgents,\n sessions: cachedSessions,\n vibes: cachedVibes,\n refetch,\n } = useCachedInitialData();\n const { data: targetsData, refetch: refetchTargets } = useListTargetsQuery({\n variables: { workspaceId: workspaceId ?? '' },\n skip: !workspaceId,\n fetchPolicy: 'cache-and-network',\n });\n const cachedTargets = targetsData?.targets?.items ?? [];\n\n const healthProbesQuery = useVibecontrolsAgentHealthProbesQuery({\n skip: permissionsLoading || !canListAgents,\n fetchPolicy: 'cache-and-network',\n notifyOnNetworkStatusChange: true,\n });\n const refetchHealthProbes = healthProbesQuery.refetch;\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 healthData = useMemo(() => {\n const probeByAgentId = new Map<string, AgentHealthProbe>(\n (healthProbesQuery.data?.vibecontrolsAgentHealthProbes ?? []).map(\n (probe: AgentHealthProbe) => [probe.agentId, probe]\n )\n );\n\n const agents = cachedAgents.map((agent) => {\n const probe = probeByAgentId.get(agent.id);\n const isActive = probe ? probe.healthy : agent.isActive;\n let status: 'healthy' | 'degraded' | 'offline' = 'offline';\n\n if (probe) {\n status = probe.healthy ? 'healthy' : 'degraded';\n } else if (isActive && agent.lastHeartbeat) {\n const heartbeatAge = Date.now() - new Date(agent.lastHeartbeat).getTime();\n status = heartbeatAge < 5 * 60 * 1000 ? 'healthy' : 'degraded';\n } else if (isActive) {\n status = 'degraded';\n }\n\n return {\n id: agent.id,\n name: agent.name,\n hostname: agent.hostname,\n platform: agent.platform,\n version: probe?.agentVersion || agent.version || 'unknown',\n status,\n lastHeartbeat: agent.lastHeartbeat || null,\n tunnelUrl: probe?.tunnelUrl ?? agent.tunnelUrl ?? null,\n tunnelStatus: agent.tunnelStatus ?? null,\n // Surface the live deep-health failure reason + uptime (previously\n // fetched by the probe query but never rendered) so a degraded/unhealthy\n // agent shows WHY.\n errorMessage: probe?.errorMessage ?? null,\n uptime: probe?.uptime ?? null,\n };\n });\n\n const sessions = cachedSessions.map((session) => ({\n id: session.id,\n name: session.name,\n status: session.status,\n type: session.type || 'TERMINAL',\n }));\n\n const vibes = cachedVibes.map((vibe) => ({\n id: vibe.id,\n name: vibe.name,\n status: vibe.status,\n type: vibe.type || 'PROJECT',\n }));\n\n const targets = cachedTargets.map((target: TargetItem) => ({\n id: target.id,\n name: target.name,\n status: target.status,\n type: target.type || 'DIRECT',\n agentCount: target.agents?.length ?? 0,\n }));\n\n const healthyAgents = agents.filter((agent) => agent.status === 'healthy').length;\n const totalAgents = agents.length;\n const overall =\n totalAgents === 0\n ? 'healthy'\n : healthyAgents === totalAgents\n ? 'healthy'\n : healthyAgents > 0\n ? 'degraded'\n : 'unhealthy';\n\n return { overall, agents, sessions, vibes, targets };\n }, [cachedAgents, cachedSessions, cachedTargets, cachedVibes, healthProbesQuery.data]);\n\n useEffect(() => {\n if (!autoRefresh) {\n return undefined;\n }\n\n const intervalId = window.setInterval(() => {\n void refetch();\n void refetchHealthProbes();\n void refetchTargets();\n setLastRefresh(new Date());\n }, HEALTH_AUTO_REFRESH_MS);\n\n return () => window.clearInterval(intervalId);\n }, [autoRefresh, refetch, refetchHealthProbes, refetchTargets]);\n\n const handleRefresh = useCallback(async () => {\n setIsRefreshing(true);\n try {\n // The three refetches are independent — run them in parallel (matching\n // the auto-refresh interval above) instead of awaiting sequentially.\n await Promise.all([refetch(), refetchHealthProbes(), refetchTargets()]);\n setLastRefresh(new Date());\n } finally {\n setIsRefreshing(false);\n }\n }, [refetch, refetchHealthProbes, refetchTargets]);\n\n // Health remediation — Reconnect / Restart a degraded or offline agent by\n // firing the same startVibecontrolsAgent lifecycle mutation the Agents page\n // uses (kept intentionally simple here: surface success/error and refresh).\n const handleReconnectAgent = useCallback(\n async (agentId: string, agentName: string) => {\n setReconnectingAgentId(agentId);\n try {\n const result = await startAgentMutation({ variables: { agentId } });\n const payload = result.data?.startVibecontrolsAgent;\n if (payload?.success) {\n notify.success(\n tr('health.reconnectSuccess', `Reconnecting agent \"${agentName}\"…`).replace(\n '{name}',\n agentName\n )\n );\n await Promise.all([refetch(), refetchHealthProbes()]);\n } else {\n notify.error(payload?.error || tr('health.reconnectFailed', 'Failed to reconnect agent'));\n }\n } catch (err) {\n notify.error(\n err instanceof Error\n ? err.message\n : tr('health.reconnectFailed', 'Failed to reconnect agent')\n );\n } finally {\n setReconnectingAgentId(null);\n }\n },\n [startAgentMutation, refetch, refetchHealthProbes, tr]\n );\n\n const toggleAgentDetails = useCallback((agentId: string) => {\n setExpandedAgents((prev) => ({ ...prev, [agentId]: !prev[agentId] }));\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 (!canListAgents)\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 getStatusIcon = (status: string) => {\n switch (status) {\n case 'healthy':\n case 'connected':\n case 'RUNNING':\n case 'ACTIVE':\n return <CheckCircle2 className=\"size-5 text-status-success-text\" />;\n case 'degraded':\n case 'STARTING':\n case 'STOPPING':\n return <AlertTriangle className=\"size-5 text-status-warning-text\" />;\n case 'unhealthy':\n case 'ERROR':\n return <XCircle className=\"size-5 text-status-error-text\" />;\n default:\n return <XCircle className=\"size-5 text-text-secondary\" />;\n }\n };\n\n const getStatusColor = (status: string) => {\n switch (status) {\n case 'healthy':\n case 'connected':\n case 'RUNNING':\n case 'ACTIVE':\n return 'bg-status-success-bg-subtle text-status-success-text';\n case 'degraded':\n case 'STARTING':\n case 'STOPPING':\n return 'bg-status-warning-bg-subtle text-status-warning-text';\n case 'unhealthy':\n case 'ERROR':\n return 'bg-status-error-bg-subtle text-status-error-text';\n default:\n return 'bg-bg-sunken text-text-secondary';\n }\n };\n\n const formatTimestamp = (timestamp: string | null) => {\n if (!timestamp) return tr('health.never', 'Never');\n const diff = Date.now() - new Date(timestamp).getTime();\n if (diff < 60000) return tr('health.justNow', 'Just now');\n if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;\n if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;\n return new Date(timestamp).toLocaleString();\n };\n\n // Probe `uptime` is reported in seconds. Render it compactly so a healthy\n // agent surfaces how long it has been up.\n const formatUptime = (seconds: number): string => {\n if (seconds < 60) return `${Math.round(seconds)}s`;\n const minutes = Math.floor(seconds / 60);\n if (minutes < 60) return `${minutes}m`;\n const hours = Math.floor(minutes / 60);\n if (hours < 24) return `${hours}h ${minutes % 60}m`;\n const days = Math.floor(hours / 24);\n return `${days}d ${hours % 24}h`;\n };\n\n const agentStats = {\n healthy: healthData.agents.filter((agent) => agent.status === 'healthy').length,\n degraded: healthData.agents.filter((agent) => agent.status === 'degraded').length,\n total: healthData.agents.length,\n };\n const sessionStats = {\n running: healthData.sessions.filter((session) => session.status === 'RUNNING').length,\n total: healthData.sessions.length,\n };\n const vibeStats = {\n active: healthData.vibes.filter((vibe) => vibe.status === 'ACTIVE' || vibe.status === 'RUNNING')\n .length,\n total: healthData.vibes.length,\n };\n type HealthTarget = {\n id: string;\n name: string;\n status: string;\n type: string;\n agentCount: number;\n };\n const targetStats = {\n healthy: healthData.targets.filter(\n (target: HealthTarget) => target.status === 'ACTIVE' || target.status === 'ONLINE'\n ).length,\n total: healthData.targets.length,\n connections: healthData.targets.reduce(\n (sum: number, target: HealthTarget) => sum + target.agentCount,\n 0\n ),\n };\n\n return (\n <MotionPage className=\"min-h-screen space-y-6 bg-bg-canvas px-6 lg:px-8 py-6\">\n <PageHeader\n title={tr('nav.health', 'Health')}\n description={`${tr('health.lastUpdated', 'Last updated')}: ${lastRefresh.toLocaleTimeString()} · ${tr('health.autoRefreshInterval', 'Auto-refresh every 30s')}`}\n actions={\n <div\n data-tour=\"health-refresh-controls\"\n className=\"flex flex-col items-start gap-3 sm:flex-row sm:items-center\"\n >\n <label className=\"flex items-center gap-2 text-sm text-text-secondary\">\n <input\n aria-label={tr('health.autoRefresh', 'Auto-refresh')}\n type=\"checkbox\"\n checked={autoRefresh}\n onChange={(event) => setAutoRefresh(event.target.checked)}\n className=\"size-4 rounded border-border-default\"\n />\n {tr('health.autoRefresh', 'Auto-refresh')}\n </label>\n <button\n type=\"button\"\n onClick={() => void handleRefresh()}\n disabled={isRefreshing}\n className=\"flex items-center gap-2 rounded-button bg-bg-sunken px-4 py-2 text-text-primary transition-colors hover:bg-action-secondary-bg-hover disabled:opacity-50\"\n >\n <RefreshCw className={`size-4 ${isRefreshing ? 'animate-spin' : ''}`} />\n {tr('common.refresh', 'Refresh')}\n </button>\n </div>\n }\n />\n\n <PagePurpose icon={<Server className=\"size-4\" />}>\n {tr(\n 'health.purpose',\n 'The Health dashboard is your single pane of glass for the live status of every agent, session, vibe and target in this workspace. Use it to spot a degraded or offline agent at a glance, see why it failed, and reconnect or restart it without leaving the page — so you catch problems before they interrupt your work.'\n )}\n </PagePurpose>\n\n <NextSteps\n storageKey=\"vibecontrols-health\"\n steps={[\n {\n id: 'reconnect-degraded',\n label: tr('health.next.reconnect', 'Reconnect a degraded agent'),\n description: tr(\n 'health.next.reconnectDesc',\n 'Any agent below that is degraded or offline can be reconnected from its actions menu.'\n ),\n icon: <Plug className=\"size-4\" />,\n onClick: () => {\n const first = healthData.agents.find((a) => a.status !== 'healthy');\n if (first) void handleReconnectAgent(first.id, first.name);\n else notify.success(tr('health.allHealthy', 'All agents are healthy.'));\n },\n },\n {\n id: 'view-agents',\n label: tr('health.next.manageAgents', 'Manage your agents'),\n description: tr(\n 'health.next.manageAgentsDesc',\n 'Open the Agents page to register, configure or remove agents.'\n ),\n icon: <Server className=\"size-4\" />,\n onClick: () => navigate('/agents'),\n },\n {\n id: 'view-sessions',\n label: tr('health.next.openSessions', 'Review running sessions'),\n description: tr(\n 'health.next.openSessionsDesc',\n 'Jump to Sessions to inspect logs and lifecycle of active work.'\n ),\n icon: <Terminal className=\"size-4\" />,\n onClick: () => navigate('/sessions'),\n },\n ]}\n />\n\n <EmphasisPanel data-tour=\"health-overall-status\">\n <div className=\"flex items-center gap-4\">\n <div\n className={`flex size-16 items-center justify-center rounded-full ${getStatusColor(healthData.overall)}`}\n >\n {getStatusIcon(healthData.overall)}\n </div>\n <div>\n <h2 className=\"text-lg font-bold capitalize text-text-primary sm:text-2xl\">\n {tr('health.systemStatus', 'System')} {healthData.overall}\n </h2>\n <p className=\"text-text-secondary\">\n {agentStats.healthy}/{agentStats.total} agents healthy, {sessionStats.running}{' '}\n sessions running, {vibeStats.active} vibes active, {targetStats.connections} target\n connections\n </p>\n </div>\n </div>\n </EmphasisPanel>\n\n <MotionList\n data-tour=\"health-stat-cards\"\n stagger={0.04}\n className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\"\n >\n <MotionItem>\n <StatCard\n title={tr('health.agents', 'Agents')}\n value={`${agentStats.healthy}/${agentStats.total}`}\n subtitle={\n agentStats.degraded > 0\n ? `${agentStats.degraded} degraded`\n : tr('health.healthy', 'healthy')\n }\n icon={<Server className=\"size-6\" />}\n variant={agentStats.healthy === agentStats.total ? 'success' : 'warning'}\n />\n </MotionItem>\n <MotionItem>\n <StatCard\n title={tr('health.sessions', 'Sessions')}\n value={`${sessionStats.running}/${sessionStats.total}`}\n subtitle={tr('health.running', 'running')}\n icon={<Terminal className=\"size-6\" />}\n variant={sessionStats.running > 0 ? 'success' : 'default'}\n />\n </MotionItem>\n <MotionItem>\n <StatCard\n title={tr('health.vibes', 'Vibes')}\n value={`${vibeStats.active}/${vibeStats.total}`}\n subtitle={tr('health.active', 'active')}\n icon={<Zap className=\"size-6\" />}\n variant={vibeStats.active > 0 ? 'success' : 'default'}\n />\n </MotionItem>\n <MotionItem>\n <StatCard\n title={tr('health.targets', 'Targets')}\n value={`${targetStats.healthy}/${targetStats.total}`}\n subtitle={`${targetStats.connections} connections`}\n icon={<Server className=\"size-6\" />}\n variant={targetStats.healthy > 0 ? 'success' : 'default'}\n />\n </MotionItem>\n </MotionList>\n\n <Card data-tour=\"health-agent-list\">\n <div className=\"border-b border-border-subtle p-4\">\n <h3 className=\"flex items-center gap-2 font-semibold text-text-primary\">\n <Server className=\"size-5\" />\n {tr('health.agentHealth', 'Agent Health')} ({healthData.agents.length})\n </h3>\n </div>\n {healthData.agents.length > 0 ? (\n <MotionList stagger={0.04} className=\"divide-y divide-border-subtle\">\n {healthData.agents.map((agent) => {\n const isUnhealthy = agent.status !== 'healthy';\n const isExpanded = !!expandedAgents[agent.id];\n const agentActions: ActionMenuItem[] = [];\n if (isUnhealthy) {\n agentActions.push({\n key: 'reconnect',\n label:\n agent.status === 'offline'\n ? tr('health.action.restart', 'Restart agent')\n : tr('health.action.reconnect', 'Reconnect'),\n icon: agent.status === 'offline' ? RotateCw : Plug,\n onSelect: () => void handleReconnectAgent(agent.id, agent.name),\n disabled: reconnectingAgentId === agent.id,\n });\n }\n agentActions.push({\n key: 'details',\n label: tr('health.action.viewDetails', 'View details'),\n icon: Eye,\n onSelect: () => navigate(`/agents/${agent.id}`),\n });\n if (agent.errorMessage && isUnhealthy) {\n agentActions.push({\n key: 'error',\n label: isExpanded\n ? tr('health.action.hideError', 'Hide error details')\n : tr('health.action.showError', 'Show error details'),\n icon: AlertTriangle,\n onSelect: () => toggleAgentDetails(agent.id),\n });\n }\n return (\n <MotionItem key={agent.id} className=\"p-4\">\n <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n <div className=\"flex items-center gap-3\">\n {getStatusIcon(agent.status)}\n <div>\n <div className=\"font-medium text-text-primary\">{agent.name}</div>\n <div className=\"text-sm text-text-secondary\">\n {agent.hostname} · {agent.platform} · v{agent.version}\n </div>\n <div className=\"mt-0.5 text-xs text-text-secondary\">\n {tr('health.lastHeartbeat', 'Last heartbeat')}:{' '}\n {formatTimestamp(agent.lastHeartbeat)}\n {agent.uptime != null && (\n <>\n {' · '}\n {tr('health.uptime', 'Uptime')}: {formatUptime(agent.uptime)}\n </>\n )}\n </div>\n {agent.errorMessage && isUnhealthy && (\n <button\n type=\"button\"\n onClick={() => toggleAgentDetails(agent.id)}\n aria-expanded={isExpanded}\n className=\"mt-1 flex items-center gap-1 text-xs text-status-error-text hover:underline\"\n >\n <ChevronDown\n aria-hidden=\"true\"\n className={`size-3 transition-transform ${isExpanded ? 'rotate-180' : ''}`}\n />\n {isExpanded\n ? tr('health.hideErrorDetails', 'Hide error details')\n : tr('health.showErrorDetails', 'Show error details')}\n </button>\n )}\n {agent.errorMessage && isUnhealthy && isExpanded && (\n <pre className=\"mt-1 max-w-prose whitespace-pre-wrap break-words rounded-md bg-status-error-bg-subtle px-2 py-1.5 text-xs text-status-error-text\">\n {agent.errorMessage}\n </pre>\n )}\n </div>\n </div>\n <div className=\"flex items-center gap-3\">\n {agent.tunnelUrl ? (\n <a\n href={agent.tunnelUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-xs text-action-primary-text hover:underline\"\n >\n {tr('health.tunnel', 'Tunnel')}\n </a>\n ) : null}\n <span\n className={`rounded-full px-3 py-1 text-sm capitalize ${getStatusColor(agent.status)}`}\n >\n {agent.status}\n </span>\n <ActionMenu\n items={agentActions}\n ariaLabel={tr('health.agentActions', 'Agent actions')}\n />\n </div>\n </div>\n </MotionItem>\n );\n })}\n </MotionList>\n ) : (\n <div className=\"space-y-4 p-6\">\n <AgentSetupBanner variant=\"compact\" dismissKey=\"vibecontrols-health-setup-banner\" />\n <IllustratedEmptyState\n illustration=\"empty-agents\"\n title={tr('health.noAgentsRegistered', 'No agents registered')}\n description={tr(\n 'health.noAgentsDescription',\n 'Register an agent to start monitoring its health here.'\n )}\n />\n </div>\n )}\n </Card>\n\n <div className=\"grid grid-cols-1 gap-6 xl:grid-cols-2\">\n <Card>\n <div className=\"border-b border-border-subtle p-4\">\n <h3 className=\"flex items-center gap-2 font-semibold text-text-primary\">\n <Terminal className=\"size-5\" />\n {tr('health.sessionStatus', 'Session Status')} ({healthData.sessions.length})\n </h3>\n </div>\n {healthData.sessions.length > 0 ? (\n <MotionList stagger={0.04} className=\"divide-y divide-border-subtle\">\n {healthData.sessions.map((session) => (\n <MotionItem key={session.id} className=\"flex items-center justify-between p-4\">\n <div className=\"flex items-center gap-3\">\n {getStatusIcon(session.status)}\n <div>\n <div className=\"font-medium text-text-primary\">{session.name}</div>\n <div className=\"text-sm text-text-secondary\">{session.type}</div>\n </div>\n </div>\n <div className=\"flex items-center gap-3\">\n <span\n className={`rounded-full px-3 py-1 text-sm ${getStatusColor(session.status)}`}\n >\n {session.status}\n </span>\n <ActionMenu\n items={[\n {\n key: 'logs',\n label: tr('health.action.viewLogs', 'View logs'),\n icon: FileText,\n onSelect: () => navigate(`/sessions/${session.id}`),\n },\n {\n key: 'details',\n label: tr('health.action.viewDetails', 'View details'),\n icon: Eye,\n onSelect: () => navigate(`/sessions/${session.id}`),\n },\n ]}\n ariaLabel={tr('health.sessionActions', 'Session actions')}\n />\n </div>\n </MotionItem>\n ))}\n </MotionList>\n ) : (\n <div className=\"p-6\">\n <IllustratedEmptyState\n illustration=\"empty-sessions\"\n title={tr('health.noSessions', 'No sessions')}\n description={tr(\n 'health.noSessionsDescription',\n 'Active terminal and task sessions will appear here.'\n )}\n />\n </div>\n )}\n </Card>\n\n <Card>\n <div className=\"border-b border-border-subtle p-4\">\n <h3 className=\"flex items-center gap-2 font-semibold text-text-primary\">\n <Zap className=\"size-5\" />\n {tr('health.vibeStatus', 'Vibe Status')} ({healthData.vibes.length})\n </h3>\n </div>\n {healthData.vibes.length > 0 ? (\n <MotionList stagger={0.04} className=\"divide-y divide-border-subtle\">\n {healthData.vibes.map((vibe) => (\n <MotionItem key={vibe.id} className=\"flex items-center justify-between p-4\">\n <div>\n <div className=\"font-medium text-text-primary\">{vibe.name}</div>\n <div className=\"text-sm text-text-secondary\">{vibe.type}</div>\n </div>\n <div className=\"flex items-center gap-3\">\n <span\n className={`rounded-full px-3 py-1 text-sm ${getStatusColor(vibe.status)}`}\n >\n {vibe.status}\n </span>\n <ActionMenu\n items={[\n {\n key: 'details',\n label: tr('health.action.viewDetails', 'View details'),\n icon: Eye,\n onSelect: () => navigate(`/vibes/${vibe.id}`),\n },\n ]}\n ariaLabel={tr('health.vibeActions', 'Vibe actions')}\n />\n </div>\n </MotionItem>\n ))}\n </MotionList>\n ) : (\n <div className=\"p-6\">\n <IllustratedEmptyState\n illustration=\"empty-vibes\"\n title={tr('health.noVibes', 'No vibes')}\n description={tr(\n 'health.noVibesDescription',\n 'Your vibes and their live status will appear here.'\n )}\n />\n </div>\n )}\n </Card>\n </div>\n </MotionPage>\n );\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@

- {"version":3,"file":"LogsPage.js","names":[],"sources":["../../src/pages/LogsPage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { Bot, ScrollText } from 'lucide-react';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { EmptyState, GetHelpButton, PageHeader } from '@/components/shared';\nimport { LogViewer } from '@/components/logs/LogViewer';\nimport { SearchableSelect } from '@/components/shared/SearchableSelect';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { useActiveAgentProfile } from '@/hooks/useActiveAgentProfile';\nimport { useVibeControlsStore } from '@/store/vibeControlsStore';\n\nexport function LogsPage() {\n const { t } = useI18n();\n const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n const { agents: cachedAgents, loading } = useCachedInitialData();\n const [selectedAgentId, setSelectedAgentId] = useState('');\n\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n\n // Phase 5B — store-backed active-profile lookup keyed by agent id. The\n // hook can only be called once at the top level, so the store map is\n // the only safe way to attach a per-row `profile` inside the .map()\n // below. Each agent row will fall back to the literal \"default\" string\n // until the user opens that agent's Profiles tab and the AgentProfile\n // rows for it land in the store.\n const profileMap = useVibeControlsStore((s) => s.activeProfilePerAgent);\n\n // Pre-warm the store for the currently-selected agent so its row shows\n // the correct profile once profiles are loaded.\n useActiveAgentProfile(selectedAgentId || null);\n\n const agents = useMemo(\n () =>\n cachedAgents\n .filter((agent) => agent.tunnelUrl)\n .map((agent) => ({\n id: agent.id,\n name: agent.name || agent.hostname || agent.id,\n isActive: agent.isActive,\n hostname: agent.hostname,\n platform: agent.platform,\n profile: profileMap[agent.id] ?? 'default',\n })),\n [cachedAgents, profileMap]\n );\n\n const selectedAgent = agents.find((agent) => agent.id === selectedAgentId);\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.LOG_LIST))\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 (loading && agents.length === 0) {\n return (\n <MotionPage className=\"flex h-full flex-col gap-6 px-6 lg:px-8 py-6\">\n <PageHeader\n title={tr('nav.logs', 'Logs')}\n description={tr('logs.description', 'Gateway-proxied log streaming from your agents')}\n />\n <PageSkeleton variant=\"rows\" count={6} />\n </MotionPage>\n );\n }\n\n return (\n <MotionPage className=\"flex h-full flex-col gap-6 px-6 lg:px-8 py-6\">\n <PageHeader\n title={tr('nav.logs', 'Logs')}\n description={tr('logs.description', 'Gateway-proxied log streaming from your agents')}\n />\n\n <PagePurpose icon={<ScrollText className=\"size-4\" />}>\n {tr(\n 'logs.purpose',\n 'Logs stream the live output from a chosen agent straight to your browser, proxied securely through the gateway. Pick an agent to watch what it is doing in real time — useful for confirming a session started correctly, debugging a failing command, or just keeping an eye on long-running work.'\n )}\n </PagePurpose>\n\n <div className=\"flex flex-col items-start gap-3 rounded-card border border-border-subtle bg-bg-surface p-4 shadow-elevation-1 sm:flex-row sm:items-center\">\n <label className=\"text-sm font-medium text-text-secondary\">\n {tr('logs.agentLabel', 'Agent:')}\n </label>\n\n {agents.length > 0 ? (\n <div className=\"w-full sm:w-80\">\n <SearchableSelect\n options={agents.map((agent) => ({\n value: agent.id,\n label: agent.name,\n description: `${agent.platform ?? ''} · ${agent.hostname ?? ''}`,\n }))}\n value={selectedAgentId}\n onChange={(value) => setSelectedAgentId(value)}\n placeholder={tr('logs.selectAgent', 'Select an agent...')}\n />\n </div>\n ) : (\n <span className=\"text-sm text-text-tertiary\">\n {tr('logs.noAgentsAvailable', 'No agents with tunnel access available')}\n </span>\n )}\n\n {selectedAgent ? (\n <div className=\"flex items-center gap-1.5 text-xs text-text-tertiary\">\n <div\n className={`size-2 rounded-full ${selectedAgent.isActive ? 'bg-status-success-bg' : 'bg-bg-sunken'}`}\n />\n {selectedAgent.hostname}\n </div>\n ) : null}\n </div>\n\n {selectedAgent ? (\n <LogViewer agentId={selectedAgent.id} profile={selectedAgent.profile} className=\"flex-1\" />\n ) : (\n <EmptyState\n icon={<Bot size={48} />}\n title={tr('logs.noAgentSelected', 'Select an agent to view logs')}\n description={tr(\n 'logs.noAgentSelectedDescription',\n 'Logs are fetched on demand. Choose an agent above to start streaming its gateway-proxied logs.'\n )}\n action={\n <GetHelpButton prompt=\"What are Logs in VibeControls and how do I investigate them?\" />\n }\n />\n )}\n </MotionPage>\n );\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@

- {"version":3,"file":"NoteDetailsPage.js","names":[],"sources":["../../src/pages/NoteDetailsPage.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { ArrowLeft, ExternalLink, FileText, Pin, Tag } from 'lucide-react';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Card, EmptyState, ErrorState, PageHeader } from '@/components/shared';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useGetNoteQuery } from '@/generated/wspace-operations';\nimport { useParams } from 'react-router';\n\nexport function NoteDetailsPage() {\n const { t } = useI18n();\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 const { id } = useParams<{ id: string }>();\n const navigate = useVibeNavigate();\n const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n\n const canReadNote = hasPermission(VIBE_PERMISSIONS.NOTE_READ);\n const { data, loading, error, refetch } = useGetNoteQuery({\n variables: { id: id || '' },\n skip: !id || permissionsLoading || !canReadNote,\n fetchPolicy: 'cache-and-network',\n });\n\n const note = data?.note;\n\n if (permissionsLoading)\n return (\n <div className=\"flex items-center justify-center min-h-[400px]\">\n <p className=\"text-text-secondary\">\n {tr('noteDetails.loadingPermissions', 'Loading permissions...')}\n </p>\n </div>\n );\n if (!canReadNote)\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\">\n {tr('noteDetails.accessDenied', 'Access Denied')}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {tr('noteDetails.accessDeniedDesc', \"You don't have permission to access this page.\")}\n </p>\n </div>\n </div>\n );\n\n if (loading && !note) {\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={() => navigate('/vibes')}\n className=\"flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"size-4\" />\n {tr('noteDetails.back', 'Back')}\n </button>\n <PageSkeleton variant=\"detail\" />\n </MotionPage>\n );\n }\n\n if (error && !note) {\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={() => navigate('/vibes')}\n className=\"flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"size-4\" />\n Back\n </button>\n <ErrorState\n title={tr('noteDetails.failedLoad', 'Failed to load note')}\n message={error.message}\n onRetry={() => refetch()}\n />\n </MotionPage>\n );\n }\n\n if (!note) {\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={() => navigate('/vibes')}\n className=\"flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"size-4\" />\n Back\n </button>\n <EmptyState\n icon={<FileText className=\"size-8 text-text-secondary\" />}\n title={tr('noteDetails.notFound', 'Note not found')}\n description={tr(\n 'noteDetails.notFoundDesc',\n 'This note may have been deleted or you may no longer have access to it.'\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 <PageHeader\n title={note.title}\n description={\n note.vibe\n ? `${tr('noteDetails.attachedTo', 'Attached to')} ${note.vibe.name}`\n : tr('noteDetails.workspaceNote', 'Workspace note')\n }\n actions={\n <div className=\"flex items-center gap-2\">\n {note.vibe && (\n <button\n type=\"button\"\n onClick={() => navigate(`/vibes/${note.vibe?.id}`)}\n className=\"inline-flex items-center gap-2 px-3 py-2 rounded-md border border-border-default bg-bg-surface hover:bg-bg-sunken text-sm text-text-primary transition-colors\"\n >\n <ExternalLink className=\"size-4\" />\n {tr('noteDetails.openVibe', 'Open Vibe')}\n </button>\n )}\n </div>\n }\n />\n\n <div className=\"grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]\">\n <Card>\n <div className=\"p-5 space-y-4\">\n <div className=\"flex flex-wrap items-center gap-2 text-xs text-text-tertiary\">\n {note.isPinned && (\n <span className=\"inline-flex items-center gap-1 rounded-full bg-primary-default/10 px-2 py-1 text-primary-default\">\n <Pin className=\"size-3.5\" />\n {tr('noteDetails.pinned', 'Pinned')}\n </span>\n )}\n <span>\n {tr('noteDetails.created', 'Created')} {new Date(note.createdAt).toLocaleString()}\n </span>\n <span>\n {tr('noteDetails.updated', 'Updated')} {new Date(note.updatedAt).toLocaleString()}\n </span>\n </div>\n\n <div className=\"rounded-lg border border-border-default bg-bg-canvas p-4\">\n <pre className=\"whitespace-pre-wrap break-words text-sm text-text-primary font-sans leading-6\">\n {note.content}\n </pre>\n </div>\n </div>\n </Card>\n\n <div className=\"space-y-6\">\n <Card>\n <div className=\"p-5 space-y-4\">\n <h2 className=\"text-sm font-semibold text-text-primary\">\n {tr('noteDetails.details', 'Details')}\n </h2>\n <div className=\"space-y-3 text-sm\">\n <div>\n <div className=\"text-text-tertiary\">{tr('noteDetails.noteId', 'Note ID')}</div>\n <div className=\"font-mono text-text-primary break-all\">{note.id}</div>\n </div>\n {note.vibe && (\n <div>\n <div className=\"text-text-tertiary\">{tr('noteDetails.vibe', 'Vibe')}</div>\n <button\n type=\"button\"\n onClick={() => navigate(`/vibes/${note.vibe?.id}`)}\n className=\"text-primary-default hover:underline\"\n >\n {note.vibe.name}\n </button>\n </div>\n )}\n </div>\n </div>\n </Card>\n\n <Card>\n <div className=\"p-5 space-y-4\">\n <h2 className=\"text-sm font-semibold text-text-primary\">\n {tr('noteDetails.tags', 'Tags')}\n </h2>\n {note.tags.length > 0 ? (\n <div className=\"flex flex-wrap gap-2\">\n {note.tags.map((tag: string) => (\n <span\n key={tag}\n className=\"inline-flex items-center gap-1 rounded-full bg-bg-sunken px-2 py-1 text-xs text-text-secondary\"\n >\n <Tag className=\"size-3\" />\n {tag}\n </span>\n ))}\n </div>\n ) : (\n <p className=\"text-sm text-text-tertiary\">\n {tr('noteDetails.noTags', 'No tags assigned.')}\n </p>\n )}\n </div>\n </Card>\n </div>\n </div>\n </MotionPage>\n );\n}\n"],"mappings":"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"}