npm - @camstack/addon-admin-ui - Versions diffs - 0.1.2 → 0.1.3 - Mend

@camstack/addon-admin-ui 0.1.2 → 0.1.3

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 (127) hide show

package/dist/assets/index-DjELGD4R.css +1 -0
package/dist/assets/index-w55PwKyu.js +598 -0
package/{index.html → dist/index.html} +3 -1
package/dist/server/addon.d.ts +11 -0
package/dist/server/addon.js +50 -0
package/dist/server/addon.js.map +1 -0
package/package.json +4 -1
package/src/App.tsx +0 -71
package/src/components/addons/AddonCard.tsx +0 -355
package/src/components/addons/AddonUploadZone.tsx +0 -69
package/src/components/addons/CapabilityBadge.tsx +0 -55
package/src/components/addons/CapabilityMap.tsx +0 -133
package/src/components/addons/UpdatesList.tsx +0 -108
package/src/components/agents/AgentCard.tsx +0 -281
package/src/components/agents/AgentLogs.tsx +0 -231
package/src/components/agents/ProcessList.tsx +0 -127
package/src/components/agents/ProcessTree.tsx +0 -369
package/src/components/agents/TaskList.tsx +0 -68
package/src/components/cameras/CameraCard.tsx +0 -60
package/src/components/cameras/LiveEventsPanel.tsx +0 -91
package/src/components/cameras/ProviderSection.tsx +0 -50
package/src/components/cameras/StreamArea.tsx +0 -107
package/src/components/cameras/tabs/AddonsTab.tsx +0 -113
package/src/components/cameras/tabs/CameraEventsTab.tsx +0 -129
package/src/components/cameras/tabs/PipelineTab.tsx +0 -118
package/src/components/cameras/tabs/StreamsTab.tsx +0 -114
package/src/components/dashboard/BlockPicker.tsx +0 -54
package/src/components/dashboard/BlockWrapper.tsx +0 -97
package/src/components/dashboard/DashboardGrid.tsx +0 -160
package/src/components/dashboard/block-registry.ts +0 -15
package/src/components/dashboard/blocks/PipelineStagesBlock.tsx +0 -39
package/src/components/dashboard/blocks/StorageBlock.tsx +0 -66
package/src/components/dashboard/blocks/SystemStatusBlock.tsx +0 -67
package/src/components/dashboard/blocks/index.ts +0 -32
package/src/components/device/DeviceHeader.tsx +0 -116
package/src/components/device/FloatingPanel.tsx +0 -132
package/src/components/device/FloatingPanelManager.tsx +0 -167
package/src/components/device/PanelContent.tsx +0 -196
package/src/components/device/QuickConfigWizard.tsx +0 -507
package/src/components/device/tabs/DetectionConfigTab.tsx +0 -96
package/src/components/device/tabs/EventsTab.tsx +0 -19
package/src/components/device/tabs/LogsTab.tsx +0 -22
package/src/components/device/tabs/OverviewTab.tsx +0 -104
package/src/components/device/tabs/ProviderSettingsTab.tsx +0 -34
package/src/components/device/tabs/RecordingTab.tsx +0 -47
package/src/components/device/tabs/ReplTab.tsx +0 -153
package/src/components/device/tabs/TrackTrailTab.tsx +0 -49
package/src/components/device/tabs/ZonesTab.tsx +0 -98
package/src/components/device/zone-editor/ZoneCanvas.tsx +0 -354
package/src/components/device/zone-editor/ZoneForm.tsx +0 -128
package/src/components/device/zone-editor/ZoneList.tsx +0 -150
package/src/components/form-builder/FormBuilder.tsx +0 -135
package/src/components/form-builder/FormField.tsx +0 -732
package/src/components/form-builder/ModelSelector.tsx +0 -239
package/src/components/integrations/AddDeviceDialog.tsx +0 -205
package/src/components/integrations/CompactDeviceCard.tsx +0 -35
package/src/components/integrations/DeviceCard.tsx +0 -29
package/src/components/integrations/DeviceDiscoveryStep.tsx +0 -105
package/src/components/integrations/DeviceGrid.tsx +0 -79
package/src/components/integrations/DeviceGroupHeader.tsx +0 -17
package/src/components/integrations/DiscoveredDeviceCard.tsx +0 -26
package/src/components/integrations/IntegrationCard.tsx +0 -40
package/src/components/integrations/IntegrationWizard.tsx +0 -172
package/src/components/integrations/ProviderConfigForm.tsx +0 -89
package/src/components/integrations/ProviderPicker.tsx +0 -91
package/src/components/integrations/SnapshotPopover.tsx +0 -68
package/src/components/metrics/AgentLoad.tsx +0 -105
package/src/components/metrics/IntegrationUsage.tsx +0 -73
package/src/components/metrics/PipelineStatus.tsx +0 -74
package/src/components/metrics/ProcessResources.tsx +0 -123
package/src/components/pipeline/PhaseSettings.tsx +0 -131
package/src/components/shared/CapabilityBadges.tsx +0 -30
package/src/components/shared/ProviderIcon.tsx +0 -42
package/src/components/shared/StatusBadge.tsx +0 -23
package/src/components/shared/WebRtcPlayer.tsx +0 -211
package/src/components/timeline/EventMarker.tsx +0 -32
package/src/components/timeline/TimelineBar.tsx +0 -131
package/src/components/ui/ConfirmDialog.tsx +0 -115
package/src/components/ui/ToastContainer.tsx +0 -92
package/src/contexts/auth-context.tsx +0 -91
package/src/hooks/useBackendClient.ts +0 -6
package/src/hooks/useTheme.ts +0 -1
package/src/i18n/en.json +0 -164
package/src/i18n/index.ts +0 -29
package/src/i18n/it.json +0 -164
package/src/index.css +0 -63
package/src/layouts/AddonPageLoader.tsx +0 -120
package/src/layouts/AppLayout.tsx +0 -254
package/src/layouts/ProtectedRoute.tsx +0 -25
package/src/lib/addon-page-context.ts +0 -29
package/src/lib/backend.ts +0 -16
package/src/main.tsx +0 -21
package/src/pages/AccessDenied.tsx +0 -22
package/src/pages/Cameras.tsx +0 -127
package/src/pages/Dashboard.tsx +0 -6
package/src/pages/DeviceDetail.tsx +0 -175
package/src/pages/IntegrationDetail.tsx +0 -222
package/src/pages/Integrations.tsx +0 -333
package/src/pages/Login.tsx +0 -106
package/src/pages/Metrics.tsx +0 -18
package/src/pages/PipelineConfig.tsx +0 -282
package/src/pages/Showroom.tsx +0 -351
package/src/pages/Timeline.tsx +0 -269
package/src/pages/system/Addons.tsx +0 -396
package/src/pages/system/Agents.tsx +0 -362
package/src/pages/system/Logs.tsx +0 -131
package/src/pages/system/Models.tsx +0 -102
package/src/pages/system/Processes.tsx +0 -129
package/src/pages/system/Repl.tsx +0 -148
package/src/pages/system/Settings.tsx +0 -168
package/src/pages/system/Users.tsx +0 -174
package/src/server/addon.ts +0 -54
package/src/types/config-ui.ts +0 -28
package/src/types/dashboard.ts +0 -39
package/tsconfig.json +0 -29
package/tsconfig.server.json +0 -16
package/tsup.config.ts +0 -20
package/vite.config.ts +0 -68
/package/{public → dist}/brand/logo-dark.svg +0 -0
/package/{public → dist}/brand/logo-horizontal-dark.svg +0 -0
/package/{public → dist}/brand/logo-horizontal-light.svg +0 -0
/package/{public → dist}/brand/logo-light.svg +0 -0
/package/{public → dist}/brand/logo-wide-dark.svg +0 -0
/package/{public → dist}/brand/logo-wide-light.svg +0 -0
/package/{public → dist}/favicon.svg +0 -0
/package/{public → dist}/vendor/react-jsx-runtime.mjs +0 -0
/package/{public → dist}/vendor/react.mjs +0 -0

package/{index.html → dist/index.html} RENAMED Viewed

@@ -6,6 +6,7 @@
     <title>CamStack Admin</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <!-- Import map: allows addon page bundles to import 'react' and get the host instance -->
     <script type="importmap">
     {
       "imports": {
@@ -14,9 +15,10 @@
       }
     }
     </script>
+    <script type="module" crossorigin src="/assets/index-w55PwKyu.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DjELGD4R.css">
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/dist/server/addon.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { ICamstackAddon, AddonManifest, AddonContext, CapabilityProviderMap } from '@camstack/types';
+declare class AdminUIAddon implements ICamstackAddon {
+    readonly id = "admin-ui";
+    readonly manifest: AddonManifest;
+    initialize(_ctx: AddonContext): Promise<void>;
+    shutdown(): Promise<void>;
+    getCapabilityProvider<K extends keyof CapabilityProviderMap>(name: K): CapabilityProviderMap[K] | null;
+}
+export { AdminUIAddon, AdminUIAddon as default };

package/dist/server/addon.js ADDED Viewed

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+// src/server/addon.ts
+import path from "path";
+import { fileURLToPath } from "url";
+var __dirname = path.dirname(fileURLToPath(import.meta.url));
+function resolveAdminUiDistDir() {
+  return path.resolve(__dirname, "..");
+}
+__name(resolveAdminUiDistDir, "resolveAdminUiDistDir");
+var AdminUIAddon = class {
+  static {
+    __name(this, "AdminUIAddon");
+  }
+  id = "admin-ui";
+  manifest = {
+    id: "admin-ui",
+    name: "CamStack Admin UI",
+    version: "0.1.0",
+    packageName: "@camstack/addon-admin-ui",
+    description: "Web-based administration interface for CamStack",
+    capabilities: [
+      {
+        name: "admin-ui",
+        mode: "singleton"
+      }
+    ]
+  };
+  async initialize(_ctx) {
+  }
+  async shutdown() {
+  }
+  getCapabilityProvider(name) {
+    if (name === "admin-ui") {
+      const provider = {
+        getStaticDir: /* @__PURE__ */ __name(() => resolveAdminUiDistDir(), "getStaticDir"),
+        getVersion: /* @__PURE__ */ __name(() => this.manifest.version, "getVersion")
+      };
+      return provider;
+    }
+    return null;
+  }
+};
+var addon_default = AdminUIAddon;
+export {
+  AdminUIAddon,
+  addon_default as default
+};
+//# sourceMappingURL=addon.js.map

package/dist/server/addon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/server/addon.ts"],"sourcesContent":["import path from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport type {\n ICamstackAddon,\n AddonManifest,\n AddonContext,\n IAdminUI,\n CapabilityProviderMap,\n} from '@camstack/types'\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\n\n/**\n * AdminUIAddon — standalone addon that serves the Vite-built frontend.\n * The dist/ directory containing the built React app sits alongside this\n * compiled file in the package output.\n */\n\nfunction resolveAdminUiDistDir(): string {\n // This addon file lives at <package-root>/dist/server/addon.js.\n // Vite assets (index.html, assets/) are at <package-root>/dist/.\n return path.resolve(__dirname, '..')\n}\n\nexport class AdminUIAddon implements ICamstackAddon {\n readonly id = 'admin-ui'\n\n readonly manifest: AddonManifest = {\n id: 'admin-ui',\n name: 'CamStack Admin UI',\n version: '0.1.0',\n packageName: '@camstack/addon-admin-ui',\n description: 'Web-based administration interface for CamStack',\n capabilities: [{ name: 'admin-ui', mode: 'singleton' }],\n }\n\n async initialize(_ctx: AddonContext): Promise<void> {}\n async shutdown(): Promise<void> {}\n\n getCapabilityProvider<K extends keyof CapabilityProviderMap>(\n name: K,\n ): CapabilityProviderMap[K] | null {\n if (name === 'admin-ui') {\n const provider: IAdminUI = {\n getStaticDir: () => resolveAdminUiDistDir(),\n getVersion: () => this.manifest.version,\n }\n return provider as CapabilityProviderMap[K]\n }\n return null\n }\n}\n\nexport default AdminUIAddon\n"],"mappings":";;;;AAAA,OAAOA,UAAU;AACjB,SAASC,qBAAqB;AAS9B,IAAMC,YAAYC,KAAKC,QAAQC,cAAc,YAAYC,GAAG,CAAA;AAQ5D,SAASC,wBAAAA;AAGP,SAAOJ,KAAKK,QAAQN,WAAW,IAAA;AACjC;AAJSK;AAMF,IAAME,eAAN,MAAMA;EAxBb,OAwBaA;;;EACFC,KAAK;EAELC,WAA0B;IACjCD,IAAI;IACJE,MAAM;IACNC,SAAS;IACTC,aAAa;IACbC,aAAa;IACbC,cAAc;MAAC;QAAEJ,MAAM;QAAYK,MAAM;MAAY;;EACvD;EAEA,MAAMC,WAAWC,MAAmC;EAAC;EACrD,MAAMC,WAA0B;EAAC;EAEjCC,sBACET,MACiC;AACjC,QAAIA,SAAS,YAAY;AACvB,YAAMU,WAAqB;QACzBC,cAAc,6BAAMhB,sBAAAA,GAAN;QACdiB,YAAY,6BAAM,KAAKb,SAASE,SAApB;MACd;AACA,aAAOS;IACT;AACA,WAAO;EACT;AACF;AAEA,IAAA,gBAAeb;","names":["path","fileURLToPath","__dirname","path","dirname","fileURLToPath","url","resolveAdminUiDistDir","resolve","AdminUIAddon","id","manifest","name","version","packageName","description","capabilities","mode","initialize","_ctx","shutdown","getCapabilityProvider","provider","getStaticDir","getVersion"]}

package/package.json CHANGED Viewed

@@ -1,9 +1,12 @@
 {
   "name": "@camstack/addon-admin-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "type": "module",
   "description": "CamStack Admin UI — Vite frontend build and server-side addon",
+  "files": [
+    "dist"
+  ],
   "exports": {
     "./server/addon": {
       "types": "./dist/server/addon.d.ts",

package/src/App.tsx DELETED Viewed

@@ -1,71 +0,0 @@
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ThemeProvider } from '@camstack/ui'
-import { AuthProvider } from './contexts/auth-context'
-import { ProtectedRoute } from './layouts/ProtectedRoute'
-import { AppLayout } from './layouts/AppLayout'
-import { LoginPage } from './pages/Login'
-import { AccessDeniedPage } from './pages/AccessDenied'
-import { DashboardPage } from './pages/Dashboard'
-import { CamerasPage } from './pages/Cameras'
-import { IntegrationsPage } from './pages/Integrations'
-import { IntegrationDetailPage } from './pages/IntegrationDetail'
-import { TimelinePage } from './pages/Timeline'
-import { PipelineConfigPage } from './pages/PipelineConfig'
-import { DeviceDetailPage } from './pages/DeviceDetail'
-import { AddonsPage } from './pages/system/Addons'
-import { AgentsPage } from './pages/system/Agents'
-import { LogsPage } from './pages/system/Logs'
-import { UsersPage } from './pages/system/Users'
-import { SettingsPage } from './pages/system/Settings'
-import { ShowroomPage } from './pages/Showroom'
-import { AddonPageLoader } from './layouts/AddonPageLoader'
-import { ConfirmDialogProvider } from './components/ui/ConfirmDialog'
-import { ToastContainer } from './components/ui/ToastContainer'
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-        staleTime: 30_000,
-        retry: false,
-        refetchOnWindowFocus: false,
-      },
-  },
-})
-export function App() {
-  return (
-    <ThemeProvider defaultMode="dark">
-      <QueryClientProvider client={queryClient}>
-        <ConfirmDialogProvider>
-        <AuthProvider>
-          <BrowserRouter>
-            <Routes>
-              <Route path="/login" element={<LoginPage />} />
-              <Route path="/access-denied" element={<AccessDeniedPage />} />
-              <Route path="/showroom" element={<ShowroomPage />} />
-              <Route element={<ProtectedRoute><AppLayout /></ProtectedRoute>}>
-                <Route index element={<Navigate to="/dashboard" replace />} />
-                <Route path="/dashboard" element={<DashboardPage />} />
-                <Route path="/cameras" element={<CamerasPage />} />
-                <Route path="/integrations" element={<IntegrationsPage />} />
-                <Route path="/integrations/:integrationId" element={<IntegrationDetailPage />} />
-                <Route path="/timeline" element={<TimelinePage />} />
-                <Route path="/pipeline" element={<PipelineConfigPage />} />
-                <Route path="/devices/:deviceId" element={<DeviceDetailPage />} />
-                <Route path="/system/agents" element={<ProtectedRoute requiredRole="admin"><AgentsPage /></ProtectedRoute>} />
-                <Route path="/system/logs" element={<ProtectedRoute requiredRole="admin"><LogsPage /></ProtectedRoute>} />
-                <Route path="/system/users" element={<ProtectedRoute requiredRole="admin"><UsersPage /></ProtectedRoute>} />
-                <Route path="/system/settings" element={<ProtectedRoute requiredRole="admin"><SettingsPage /></ProtectedRoute>} />
-                <Route path="/system/addons" element={<ProtectedRoute requiredRole="admin"><AddonsPage /></ProtectedRoute>} />
-                <Route path="/addon/:pagePath" element={<ProtectedRoute requiredRole="admin"><AddonPageLoader /></ProtectedRoute>} />
-              </Route>
-            </Routes>
-          </BrowserRouter>
-          <ToastContainer />
-        </AuthProvider>
-        </ConfirmDialogProvider>
-      </QueryClientProvider>
-    </ThemeProvider>
-  )
-}

package/src/components/addons/AddonCard.tsx DELETED Viewed

@@ -1,355 +0,0 @@
-import { useState, useEffect } from 'react'
-import { ChevronDown, ChevronUp, Plus, Trash2, Save, Loader2, Package, Puzzle, Download } from 'lucide-react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { VersionBadge } from '@camstack/ui'
-import { useBackendClient } from '../../hooks/useBackendClient'
-import { useConfirm } from '../ui/ConfirmDialog'
-import { FormBuilder } from '../form-builder/FormBuilder'
-import type { ConfigUISchema } from '../../types/config-ui'
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-export interface AddonManifest {
-  id: string
-  name: string
-  version: string
-  description?: string
-  capabilities: readonly (string | { name: string; mode?: string })[]
-  requiredFeatures?: readonly string[]
-  removable?: boolean
-  protected?: boolean
-  components?: string[]
-  packageName: string
-  packageVersion: string
-}
-export interface AddonListItem {
-  manifest: AddonManifest
-  enabled: boolean
-  hasConfigSchema: boolean
-  group?: 'core' | 'addon' | 'provider' | 'page'
-  source?: 'core' | 'installed' | 'workspace'
-  installedOn?: string[]
-}
-// ---------------------------------------------------------------------------
-// Icon letter
-// ---------------------------------------------------------------------------
-const GROUP_COLORS: Record<string, string> = {
-  core:     'bg-blue-500/20 text-blue-300',
-  addon:    'bg-purple-500/20 text-purple-300',
-  provider: 'bg-green-500/20 text-green-300',
-  page:     'bg-orange-500/20 text-orange-300',
-}
-function AddonIcon({ name, group, isBundle }: { name: string; group?: string; isBundle?: boolean }) {
-  const color = GROUP_COLORS[group ?? 'addon'] ?? GROUP_COLORS['addon']!
-  return (
-    <div className={`flex-shrink-0 h-9 w-9 rounded-lg flex items-center justify-center ${color}`}>
-      {isBundle ? (
-        <Package className="h-4 w-4" />
-      ) : (
-        <Puzzle className="h-4 w-4" />
-      )}
-    </div>
-  )
-}
-// ---------------------------------------------------------------------------
-// AddonCard
-// ---------------------------------------------------------------------------
-export interface AgentInfo {
-  id: string
-  name: string
-  isHub: boolean
-}
-interface AddonCardProps {
-  addon: AddonListItem
-  agents?: AgentInfo[]
-  /** Hide version when addon is part of a package bundle */
-  hideVersion?: boolean
-  /** Latest available version from npm (if update available) */
-  availableUpdate?: string
-  /** Callback when user clicks the update button */
-  onUpdate?: () => void
-}
-export function AddonCard({ addon, agents = [], hideVersion, availableUpdate, onUpdate }: AddonCardProps) {
-  const [expanded, setExpanded] = useState(false)
-  const [agentDropdownOpen, setAgentDropdownOpen] = useState(false)
-  const client = useBackendClient()
-  const queryClient = useQueryClient()
-  const confirm = useConfirm()
-  const { manifest } = addon
-  const installedOn = addon.installedOn ?? []
-  const removable = !manifest.protected && manifest.removable !== false
-  // Only expandable if addon has config, components, or agents to show
-  const hasExpandableContent = addon.hasConfigSchema || (manifest.components && manifest.components.length > 0) || (agents.length >= 2)
-  // Load config schema when expanded and addon has config
-  const { data: configSchema, isLoading: schemaLoading } = useQuery({
-    queryKey: ['addon-config-schema', manifest.id],
-    queryFn: () => client.trpc.addons.getConfigSchema.query({ addonId: manifest.id }) as Promise<ConfigUISchema | null>,
-    enabled: expanded && addon.hasConfigSchema,
-    staleTime: 60_000,
-  })
-  // Load current config values
-  const { data: configValues } = useQuery({
-    queryKey: ['addon-config', manifest.id],
-    queryFn: () => client.trpc.addons.getConfig.query({ addonId: manifest.id }) as Promise<Record<string, unknown> | null>,
-    enabled: expanded && addon.hasConfigSchema,
-    staleTime: 30_000,
-  })
-  // Local state for editing
-  const [editValues, setEditValues] = useState<Record<string, unknown>>({})
-  const [dirty, setDirty] = useState(false)
-  useEffect(() => {
-    if (configValues) {
-      setEditValues(configValues)
-      setDirty(false)
-    }
-  }, [configValues])
-  const handleChange = (values: Record<string, unknown>) => {
-    setEditValues(values)
-    setDirty(true)
-  }
-  // Save config
-  const saveMutation = useMutation({
-    mutationFn: () => client.trpc.addons.updateConfig.mutate({ addonId: manifest.id, config: editValues }),
-    onSuccess: () => {
-      setDirty(false)
-      queryClient.invalidateQueries({ queryKey: ['addon-config', manifest.id] })
-    },
-  })
-  // Uninstall
-  const uninstallMutation = useMutation({
-    mutationFn: () => {
-      console.log(`[AddonCard] Uninstalling ${manifest.packageName}`)
-      return client.trpc.bridgeAddons.uninstallPackage.mutate({ packageName: manifest.packageName })
-    },
-    onSuccess: () => {
-      console.log(`[AddonCard] Uninstalled ${manifest.packageName}`)
-      queryClient.invalidateQueries({ queryKey: ['addons'] })
-      queryClient.invalidateQueries({ queryKey: ['addon-pages'] })
-      queryClient.invalidateQueries({ queryKey: ['capabilities'] })
-    },
-    onError: (err) => {
-      console.error(`[AddonCard] Uninstall failed:`, err)
-    },
-  })
-  return (
-    <div className="rounded-lg border border-border bg-surface overflow-hidden">
-      {/* Header row */}
-      <div
-        className={[
-          'flex items-start gap-3 px-4 py-3 transition-colors',
-          hasExpandableContent ? 'cursor-pointer hover:bg-surface-hover/50' : '',
-        ].join(' ')}
-        onClick={() => hasExpandableContent && setExpanded((e) => !e)}
-      >
-        <AddonIcon name={manifest.name} group={addon.group} isBundle={!!manifest.components && manifest.components.length > 1} />
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-semibold text-foreground truncate">{manifest.name}</span>
-            <span className="text-[10px] text-foreground-subtle font-mono shrink-0">({manifest.packageName})</span>
-            {addon.source === 'workspace' && (
-              <span className="text-[10px] rounded-full bg-orange-500/15 text-orange-400 px-2 py-0.5 font-medium shrink-0">
-                DEV
-              </span>
-            )}
-            {!hideVersion && (
-              <span className="ml-auto shrink-0 inline-flex items-center gap-1.5">
-                {availableUpdate && onUpdate && (
-                  <button
-                    type="button"
-                    onClick={(e) => { e.stopPropagation(); onUpdate() }}
-                    className="rounded-full bg-primary/10 text-primary hover:bg-primary/20 p-1 transition-colors"
-                    title={`Update to v${availableUpdate}`}
-                  >
-                    <Download className="h-3 w-3" />
-                  </button>
-                )}
-                <VersionBadge version={manifest.version} />
-              </span>
-            )}
-          </div>
-          {manifest.description && (
-            <p className="text-[10px] text-foreground-subtle mt-0.5 line-clamp-1">{manifest.description}</p>
-          )}
-        </div>
-        {/* Actions: uninstall + expand chevron */}
-        <div className="flex items-center gap-2 shrink-0 pt-1">
-          {removable && (
-            <button
-              type="button"
-              onClick={async (e) => {
-                e.stopPropagation()
-                console.log('[AddonCard] Confirm dialog opening...')
-                const confirmed = await confirm({
-                  title: `Uninstall ${manifest.name}?`,
-                  message: `This will remove the addon package and all its data. This action cannot be undone.`,
-                  confirmLabel: 'Uninstall',
-                  variant: 'danger',
-                })
-                if (confirmed) uninstallMutation.mutate()
-              }}
-              disabled={uninstallMutation.isPending}
-              className="flex items-center gap-1 rounded-md px-2 py-1 text-[10px] text-red-400 hover:bg-red-500/10 disabled:opacity-50 transition-colors"
-              title={`Uninstall ${manifest.name}`}
-            >
-              <Trash2 className="h-3 w-3" />
-              {uninstallMutation.isPending && 'Removing...'}
-            </button>
-          )}
-          {hasExpandableContent && (
-            expanded ? <ChevronUp className="h-4 w-4 text-foreground-subtle" /> : <ChevronDown className="h-4 w-4 text-foreground-subtle" />
-          )}
-        </div>
-      </div>
-      {/* Expanded: settings inline */}
-      {expanded && (
-        <div className="border-t border-border px-4 py-3 space-y-4">
-          {/* Config form — loaded from backend */}
-          {addon.hasConfigSchema && (
-            <div>
-              {schemaLoading && (
-                <div className="flex items-center gap-2 text-xs text-foreground-subtle py-2">
-                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                  Loading configuration...
-                </div>
-              )}
-              {configSchema && configSchema.sections?.some((s: any) => s.fields?.length > 0) && (
-                <div className="space-y-3">
-                  <FormBuilder
-                    schema={configSchema}
-                    values={editValues}
-                    onChange={handleChange}
-                  />
-                  {dirty && (
-                    <div className="flex items-center justify-between">
-                      <span className="text-[10px] text-orange-400">Unsaved changes</span>
-                      <button
-                        type="button"
-                        onClick={(e) => { e.stopPropagation(); saveMutation.mutate() }}
-                        disabled={saveMutation.isPending}
-                        className="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
-                      >
-                        {saveMutation.isPending ? <Loader2 className="h-3 w-3 animate-spin" /> : <Save className="h-3 w-3" />}
-                        {saveMutation.isPending ? 'Saving...' : 'Save'}
-                      </button>
-                    </div>
-                  )}
-                  {saveMutation.isError && (
-                    <div className="text-[10px] text-red-400">
-                      Save failed: {saveMutation.error instanceof Error ? saveMutation.error.message : 'Unknown error'}
-                    </div>
-                  )}
-                </div>
-              )}
-              {/* No fallback message — addons without config don't show the expander */}
-            </div>
-          )}
-          {/* No message for addons without config — just show other sections */}
-          {/* Components list (for core) */}
-          {manifest.components && manifest.components.length > 0 && (
-            <div>
-              <div className="text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-2">
-                Components ({manifest.components.length})
-              </div>
-              <div className="flex flex-wrap gap-1">
-                {manifest.components.map((comp) => (
-                  <span key={comp} className="text-[10px] rounded bg-background border border-border px-1.5 py-0.5 text-foreground-subtle font-mono">
-                    {comp}
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-          {/* Installed on agents — only show when remote agents exist (2+ total) */}
-          {agents.length >= 2 && (
-            <div>
-              <div className="text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-2">
-                Installed on
-              </div>
-              <div className="flex items-center gap-1.5 flex-wrap">
-                {installedOn.length === 0 && (
-                  <span className="text-[10px] text-foreground-subtle">Hub (local)</span>
-                )}
-                {installedOn.map((agentName) => (
-                  <span
-                    key={agentName}
-                    className="rounded-full bg-surface-hover border border-border px-2 py-0.5 text-[10px] text-foreground-subtle"
-                  >
-                    {agentName}
-                  </span>
-                ))}
-                <div className="relative">
-                  <button
-                    type="button"
-                    onClick={(e) => { e.stopPropagation(); setAgentDropdownOpen((o) => !o) }}
-                    className="inline-flex items-center gap-1 rounded-full border border-dashed border-border px-2 py-0.5 text-[10px] text-foreground-subtle hover:text-foreground hover:border-primary transition-colors"
-                    title="Install on more agents"
-                  >
-                    <Plus className="h-3 w-3" />
-                    Add agent
-                  </button>
-                  {agentDropdownOpen && (
-                    <div className="absolute left-0 top-full mt-1 z-10 min-w-[160px] rounded-md border border-border bg-surface shadow-lg overflow-hidden">
-                      {agents
-                        .filter((a) => !a.isHub && !installedOn.includes(a.name))
-                        .map((agent) => (
-                          <button
-                            key={agent.id}
-                            type="button"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              setAgentDropdownOpen(false)
-                              // TODO: wire up install-on-agent mutation
-                            }}
-                            className="w-full text-left px-3 py-1.5 text-[10px] text-foreground hover:bg-surface-hover transition-colors"
-                          >
-                            {agent.name}
-                          </button>
-                        ))}
-                      {agents.filter((a) => !a.isHub && !installedOn.includes(a.name)).length === 0 && (
-                        <div className="px-3 py-1.5 text-[10px] text-foreground-subtle">
-                          No available agents
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          )}
-          {/* Uninstall button is now inline in the header */}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/addons/AddonUploadZone.tsx DELETED Viewed

@@ -1,69 +0,0 @@
-import { useRef, useCallback, useState } from 'react'
-import { Upload, Loader2 } from 'lucide-react'
-interface AddonUploadZoneProps {
-  onUploadSuccess: () => void
-}
-const ACCEPT_MIME = '.tgz,.tar.gz,.zip'
-export function AddonUploadZone({ onUploadSuccess }: AddonUploadZoneProps) {
-  const [uploading, setUploading] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const uploadFile = useCallback(
-    async (file: File) => {
-      setUploading(true)
-      const formData = new FormData()
-      formData.append('file', file)
-      const token = localStorage.getItem('camstack_admin_token') ?? ''
-      try {
-        const res = await fetch('/api/addons/upload', {
-          method: 'POST',
-          headers: { Authorization: `Bearer ${token}` },
-          body: formData,
-        })
-        const body = await res.json()
-        if (body.success) onUploadSuccess()
-      } finally {
-        setUploading(false)
-      }
-    },
-    [onUploadSuccess],
-  )
-  const handleFileSelect = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const file = e.target.files?.[0]
-      if (file) uploadFile(file)
-      e.target.value = ''
-    },
-    [uploadFile],
-  )
-  return (
-    <>
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept={ACCEPT_MIME}
-        onChange={handleFileSelect}
-        className="hidden"
-      />
-      <button
-        type="button"
-        onClick={() => fileInputRef.current?.click()}
-        disabled={uploading}
-        className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md bg-surface hover:bg-surface-hover border border-border disabled:opacity-50 transition-colors"
-      >
-        {uploading ? (
-          <Loader2 className="w-3.5 h-3.5 animate-spin" />
-        ) : (
-          <Upload className="w-3.5 h-3.5" />
-        )}
-        {uploading ? 'Uploading...' : 'Upload'}
-      </button>
-    </>
-  )
-}

package/src/components/addons/CapabilityBadge.tsx DELETED Viewed

@@ -1,55 +0,0 @@
-const CAPABILITY_COLORS: Record<string, string> = {
-  // detection / vision
-  detection:    'bg-green-500/10 text-green-400',
-  detector:     'bg-green-500/10 text-green-400',
-  // streaming
-  streaming:    'bg-blue-500/10 text-blue-400',
-  decode:       'bg-blue-500/10 text-blue-400',
-  decoder:      'bg-blue-500/10 text-blue-400',
-  // recording
-  recording:    'bg-orange-500/10 text-orange-400',
-  recorder:     'bg-orange-500/10 text-orange-400',
-  // transcoding
-  transcoding:  'bg-purple-500/10 text-purple-400',
-  transcoder:   'bg-purple-500/10 text-purple-400',
-  transcode:    'bg-purple-500/10 text-purple-400',
-  // restream
-  restream:     'bg-cyan-500/10 text-cyan-400',
-  restreamer:   'bg-cyan-500/10 text-cyan-400',
-  // storage
-  storage:      'bg-yellow-500/10 text-yellow-400',
-  // notification
-  notification: 'bg-pink-500/10 text-pink-400',
-  notifier:     'bg-pink-500/10 text-pink-400',
-  // faces
-  faces:        'bg-indigo-500/10 text-indigo-400',
-  // default
-}
-interface CapabilityBadgeProps {
-  /** Capability name (string) or declaration object ({ name, mode }) */
-  capability: string | { name: string; mode?: string }
-  /** Optional mode label shown after a separator (overrides object mode) */
-  mode?: string
-  size?: 'sm' | 'xs'
-}
-export function CapabilityBadge({ capability, mode, size = 'xs' }: CapabilityBadgeProps) {
-  const capName = typeof capability === 'string' ? capability : capability.name
-  const capMode = mode ?? (typeof capability === 'object' ? capability.mode : undefined)
-  const lower = capName.toLowerCase()
-  const color = CAPABILITY_COLORS[lower] ?? 'bg-primary/10 text-primary'
-  const textSize = size === 'sm' ? 'text-xs' : 'text-[10px]'
-  return (
-    <span className={`inline-flex items-center rounded-md px-1.5 py-0.5 font-medium gap-1 ${textSize} ${color}`}>
-      {capName}
-      {capMode && (
-        <>
-          <span className="opacity-40">·</span>
-          <span className="opacity-70">{capMode}</span>
-        </>
-      )}
-    </span>
-  )
-}