@camstack/addon-admin-ui 0.1.2 → 0.1.4

package/src/components/device/DeviceHeader.tsx

@@ -1,116 +0,0 @@
-import { useState } from 'react'
-import { Link } from 'react-router-dom'
-import { ChevronRight, Video, ScrollText, Terminal, Bell, Zap } from 'lucide-react'
-import { StatusBadge } from '../shared/StatusBadge'
-import { ProviderIcon, getProviderLabel } from '../shared/ProviderIcon'
-import { CapabilityBadges } from '../shared/CapabilityBadges'
-import { QuickConfigWizard } from './QuickConfigWizard'
-import type { PanelId } from './FloatingPanelManager'
-
-interface DeviceHeaderProps {
-  deviceId: string
-  name: string
-  status: string
-  provider: string
-  capabilities: string[]
-  activePanel: PanelId | null
-  onTogglePanel: (panel: PanelId) => void
-}
-
-const PANEL_BUTTONS: Array<{
-  id: PanelId
-  icon: React.ComponentType<{ className?: string }>
-  label: string
-}> = [
-  { id: 'stream', icon: Video, label: 'Stream' },
-  { id: 'logs', icon: ScrollText, label: 'Logs' },
-  { id: 'repl', icon: Terminal, label: 'REPL' },
-  { id: 'events', icon: Bell, label: 'Events' },
-]
-
-export function DeviceHeader({
-  deviceId,
-  name,
-  status,
-  provider,
-  capabilities,
-  activePanel,
-  onTogglePanel,
-}: DeviceHeaderProps) {
-  const [wizardOpen, setWizardOpen] = useState(false)
-
-  return (
-    <>
-      <div className="border-b border-border bg-surface px-6 py-4">
-        {/* Breadcrumb */}
-        <nav className="flex items-center gap-1 text-[11px] text-foreground-subtle mb-3">
-          <Link to="/integrations" className="hover:text-foreground transition-colors">
-            Integrations
-          </Link>
-          <ChevronRight className="h-3 w-3" />
-          <span className="text-foreground-subtle">{getProviderLabel(provider)}</span>
-          <ChevronRight className="h-3 w-3" />
-          <span className="text-foreground">{name}</span>
-        </nav>
-
-        {/* Header row */}
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-3 min-w-0">
-            <ProviderIcon type={provider} size="lg" />
-            <div className="min-w-0">
-              <div className="flex items-center gap-2">
-                <h1 className="text-base font-semibold text-foreground truncate">{name}</h1>
-                <StatusBadge status={status} />
-              </div>
-              <div className="mt-1">
-                <CapabilityBadges capabilities={capabilities} />
-              </div>
-            </div>
-          </div>
-
-          {/* Action buttons */}
-          <div className="flex items-center gap-1 flex-shrink-0">
-            {/* Quick Config wizard button */}
-            <button
-              onClick={() => setWizardOpen(true)}
-              title="Quick Config"
-              className="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[11px] font-medium border border-border text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors"
-            >
-              <Zap className="h-3.5 w-3.5" />
-              Quick Config
-            </button>
-
-            {/* Divider */}
-            <div className="h-5 w-px bg-border mx-1" />
-
-            {/* Floating panel toggle buttons */}
-            {PANEL_BUTTONS.map(({ id, icon: Icon, label }) => {
-              const isActive = activePanel === id
-              return (
-                <button
-                  key={id}
-                  onClick={() => onTogglePanel(id)}
-                  title={label}
-                  className={`inline-flex items-center justify-center rounded-lg p-2 transition-colors ${
-                    isActive
-                      ? 'bg-primary/15 text-primary'
-                      : 'text-foreground-subtle hover:text-foreground hover:bg-surface-hover'
-                  }`}
-                >
-                  <Icon className="h-4 w-4" />
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-
-      {/* Quick Config Wizard (modal) */}
-      <QuickConfigWizard
-        open={wizardOpen}
-        onClose={() => setWizardOpen(false)}
-        deviceId={deviceId}
-      />
-    </>
-  )
-}

package/src/components/device/FloatingPanel.tsx

@@ -1,132 +0,0 @@
-import { useRef, useCallback } from 'react'
-import { X, Minimize2, Maximize2, GripHorizontal } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-
-interface FloatingPanelProps {
-  id: string
-  title: string
-  icon: LucideIcon
-  isOpen: boolean
-  isFloating: boolean
-  position?: { x: number; y: number }
-  size?: { w: number; h: number }
-  onClose: () => void
-  onToggleFloat: () => void
-  onPositionChange?: (pos: { x: number; y: number }) => void
-  children: React.ReactNode
-}
-
-export function FloatingPanel({
-  title,
-  icon: Icon,
-  isFloating,
-  position = { x: 80, y: 80 },
-  size = { w: 400, h: 480 },
-  onClose,
-  onToggleFloat,
-  onPositionChange,
-  children,
-}: FloatingPanelProps) {
-  const panelRef = useRef<HTMLDivElement>(null)
-  const dragging = useRef(false)
-  const dragOffset = useRef({ x: 0, y: 0 })
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (!isFloating) return
-      dragging.current = true
-      dragOffset.current = {
-        x: e.clientX - position.x,
-        y: e.clientY - position.y,
-      }
-
-      function onMouseMove(ev: MouseEvent) {
-        if (!dragging.current) return
-        onPositionChange?.({
-          x: ev.clientX - dragOffset.current.x,
-          y: ev.clientY - dragOffset.current.y,
-        })
-      }
-
-      function onMouseUp() {
-        dragging.current = false
-        window.removeEventListener('mousemove', onMouseMove)
-        window.removeEventListener('mouseup', onMouseUp)
-      }
-
-      window.addEventListener('mousemove', onMouseMove)
-      window.addEventListener('mouseup', onMouseUp)
-    },
-    [isFloating, position.x, position.y, onPositionChange],
-  )
-
-  if (isFloating) {
-    return (
-      <div
-        ref={panelRef}
-        className="fixed z-40 flex flex-col rounded-xl border border-border bg-surface shadow-2xl overflow-hidden"
-        style={{
-          left: position.x,
-          top: position.y,
-          width: size.w,
-          height: size.h,
-        }}
-      >
-        {/* Title bar — drag handle */}
-        <div
-          onMouseDown={handleMouseDown}
-          className="flex items-center gap-2 border-b border-border bg-surface-hover px-3 py-2 cursor-grab select-none active:cursor-grabbing flex-shrink-0"
-        >
-          <GripHorizontal className="h-3.5 w-3.5 text-foreground-subtle" />
-          <Icon className="h-3.5 w-3.5 text-primary" />
-          <span className="flex-1 text-xs font-semibold text-foreground">{title}</span>
-          <button
-            onClick={onToggleFloat}
-            title="Dock panel"
-            className="text-foreground-subtle hover:text-foreground transition-colors p-0.5 rounded"
-          >
-            <Minimize2 className="h-3.5 w-3.5" />
-          </button>
-          <button
-            onClick={onClose}
-            title="Close"
-            className="text-foreground-subtle hover:text-danger transition-colors p-0.5 rounded"
-          >
-            <X className="h-3.5 w-3.5" />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto p-3 text-xs">{children}</div>
-      </div>
-    )
-  }
-
-  // Docked mode — rendered by FloatingPanelManager in the right column
-  return (
-    <div className="flex flex-col flex-1 min-h-0 border-b border-border last:border-b-0">
-      {/* Header */}
-      <div className="flex items-center gap-2 border-b border-border bg-surface-hover px-3 py-2 flex-shrink-0">
-        <Icon className="h-3.5 w-3.5 text-primary" />
-        <span className="flex-1 text-xs font-semibold text-foreground">{title}</span>
-        <button
-          onClick={onToggleFloat}
-          title="Detach panel"
-          className="text-foreground-subtle hover:text-foreground transition-colors p-0.5 rounded"
-        >
-          <Maximize2 className="h-3.5 w-3.5" />
-        </button>
-        <button
-          onClick={onClose}
-          title="Close"
-          className="text-foreground-subtle hover:text-danger transition-colors p-0.5 rounded"
-        >
-          <X className="h-3.5 w-3.5" />
-        </button>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto p-3 text-xs">{children}</div>
-    </div>
-  )
-}

package/src/components/device/FloatingPanelManager.tsx

@@ -1,167 +0,0 @@
-import { useState, useCallback } from 'react'
-import { Video, ScrollText, Terminal, Bell } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import { FloatingPanel } from './FloatingPanel'
-import {
-  StreamPanelContent,
-  LogsPanelContent,
-  ReplPanelContent,
-  EventsPanelContent,
-} from './PanelContent'
-
-export type PanelId = 'stream' | 'logs' | 'repl' | 'events'
-
-interface PanelState {
-  isOpen: boolean
-  isFloating: boolean
-  position: { x: number; y: number }
-  size: { w: number; h: number }
-}
-
-interface PanelConfig {
-  id: PanelId
-  title: string
-  icon: LucideIcon
-}
-
-const PANEL_CONFIGS: PanelConfig[] = [
-  { id: 'stream', title: 'Stream', icon: Video },
-  { id: 'logs', title: 'Logs', icon: ScrollText },
-  { id: 'repl', title: 'REPL', icon: Terminal },
-  { id: 'events', title: 'Events', icon: Bell },
-]
-
-const DEFAULT_PANEL_STATE: PanelState = {
-  isOpen: false,
-  isFloating: false,
-  position: { x: 80, y: 80 },
-  size: { w: 400, h: 480 },
-}
-
-function getInitialPanelStates(): Record<PanelId, PanelState> {
-  return {
-    stream: { ...DEFAULT_PANEL_STATE, position: { x: 80, y: 80 } },
-    logs: { ...DEFAULT_PANEL_STATE, position: { x: 120, y: 120 } },
-    repl: { ...DEFAULT_PANEL_STATE, position: { x: 160, y: 160 } },
-    events: { ...DEFAULT_PANEL_STATE, position: { x: 200, y: 200 } },
-  }
-}
-
-interface FloatingPanelManagerProps {
-  deviceId: string
-  /** Externally controlled open panels — toggled from DeviceHeader */
-  openPanelId: PanelId | null
-  onPanelClosed: (id: PanelId) => void
-  children: React.ReactNode
-}
-
-export function FloatingPanelManager({
-  deviceId,
-  openPanelId,
-  onPanelClosed,
-  children,
-}: FloatingPanelManagerProps) {
-  const [panelStates, setPanelStates] = useState<Record<PanelId, PanelState>>(getInitialPanelStates)
-
-  const updatePanel = useCallback((id: PanelId, patch: Partial<PanelState>) => {
-    setPanelStates((prev) => ({
-      ...prev,
-      [id]: { ...prev[id], ...patch },
-    }))
-  }, [])
-
-  function handleClose(id: PanelId) {
-    updatePanel(id, { isOpen: false, isFloating: false })
-    onPanelClosed(id)
-  }
-
-  function handleToggleFloat(id: PanelId) {
-    updatePanel(id, { isFloating: !panelStates[id].isFloating })
-  }
-
-  function handlePositionChange(id: PanelId, pos: { x: number; y: number }) {
-    updatePanel(id, { position: pos })
-  }
-
-  // Determine which panels are visible (open or just toggled open externally)
-  const visiblePanels = PANEL_CONFIGS.filter(({ id }) => {
-    const state = panelStates[id]
-    return state.isOpen || id === openPanelId
-  })
-
-  // Sync external toggle: if openPanelId was set externally and panel isn't already open, open it
-  if (openPanelId !== null && !panelStates[openPanelId].isOpen) {
-    updatePanel(openPanelId, { isOpen: true })
-  }
-
-  const dockedPanels = visiblePanels.filter(({ id }) => !panelStates[id].isFloating)
-  const floatingPanels = visiblePanels.filter(({ id }) => panelStates[id].isFloating)
-
-  function renderPanelContent(id: PanelId) {
-    switch (id) {
-      case 'stream':
-        return <StreamPanelContent deviceId={deviceId} />
-      case 'logs':
-        return <LogsPanelContent />
-      case 'repl':
-        return <ReplPanelContent deviceId={deviceId} />
-      case 'events':
-        return <EventsPanelContent />
-    }
-  }
-
-  return (
-    <>
-      {/* Main layout: tab content + docked panels column */}
-      <div className="flex flex-1 min-h-0 overflow-hidden">
-        {/* Tab content area */}
-        <div className="flex-1 overflow-y-auto p-6">{children}</div>
-
-        {/* Docked panels column */}
-        {dockedPanels.length > 0 && (
-          <div className="w-[360px] flex-shrink-0 border-l border-border bg-surface flex flex-col overflow-hidden">
-            {dockedPanels.map(({ id, title, icon }) => {
-              const state = panelStates[id]
-              return (
-                <FloatingPanel
-                  key={id}
-                  id={id}
-                  title={title}
-                  icon={icon}
-                  isOpen={state.isOpen}
-                  isFloating={false}
-                  onClose={() => handleClose(id)}
-                  onToggleFloat={() => handleToggleFloat(id)}
-                >
-                  {renderPanelContent(id)}
-                </FloatingPanel>
-              )
-            })}
-          </div>
-        )}
-      </div>
-
-      {/* Floating panels (overlays) */}
-      {floatingPanels.map(({ id, title, icon }) => {
-        const state = panelStates[id]
-        return (
-          <FloatingPanel
-            key={id}
-            id={id}
-            title={title}
-            icon={icon}
-            isOpen={state.isOpen}
-            isFloating={true}
-            position={state.position}
-            size={state.size}
-            onClose={() => handleClose(id)}
-            onToggleFloat={() => handleToggleFloat(id)}
-            onPositionChange={(pos) => handlePositionChange(id, pos)}
-          >
-            {renderPanelContent(id)}
-          </FloatingPanel>
-        )
-      })}
-    </>
-  )
-}

package/src/components/device/PanelContent.tsx

@@ -1,196 +0,0 @@
-import { ScrollText, Terminal, Bell, Play, Trash2, ChevronUp } from 'lucide-react'
-import { useState, useRef } from 'react'
-import { useMutation } from '@tanstack/react-query'
-import { useBackendClient } from '../../hooks/useBackendClient'
-import { WebRtcPlayer } from '../shared/WebRtcPlayer'
-
-// ---- Stream Panel ----
-interface StreamPanelContentProps {
-  deviceId: string
-}
-
-export function StreamPanelContent({ deviceId }: StreamPanelContentProps) {
-  const client = useBackendClient()
-  const serverUrl = (client as unknown as { serverUrl?: string }).serverUrl ?? window.location.origin
-
-  return (
-    <div className="flex flex-col h-full gap-2">
-      <WebRtcPlayer
-        serverUrl={serverUrl}
-        streamId={deviceId}
-        className="flex-1 min-h-0 rounded-lg"
-      />
-    </div>
-  )
-}
-
-// ---- Logs Panel ----
-export function LogsPanelContent() {
-  return (
-    <div className="flex flex-col items-center justify-center h-full py-8 text-foreground-subtle">
-      <ScrollText className="h-8 w-8 mb-3 opacity-30" />
-      <p className="text-sm font-medium text-foreground">Device logs</p>
-      <p className="text-xs mt-1 opacity-70 text-center">Coming with backend integration</p>
-    </div>
-  )
-}
-
-// ---- REPL Panel ----
-interface ReplPanelContentProps {
-  deviceId: string
-}
-
-interface HistoryEntry {
-  id: number
-  code: string
-  result: string
-  error: boolean
-  ts: string
-}
-
-let replPanelCounter = 0
-
-export function ReplPanelContent({ deviceId }: ReplPanelContentProps) {
-  const client = useBackendClient()
-  const [code, setCode] = useState('')
-  const [history, setHistory] = useState<HistoryEntry[]>([])
-  const textareaRef = useRef<HTMLTextAreaElement>(null)
-
-  const evalMutation = useMutation({
-    mutationFn: (src: string) =>
-      client.replEval(src, { type: 'device' as const, deviceId }),
-    onSuccess: (data, src) => {
-      const result = typeof data === 'string' ? data : JSON.stringify(data, null, 2)
-      setHistory((prev) => [
-        ...prev,
-        {
-          id: ++replPanelCounter,
-          code: src,
-          result,
-          error: false,
-          ts: new Date().toLocaleTimeString('en-GB', { hour12: false }),
-        },
-      ])
-      setCode('')
-    },
-    onError: (err: unknown, src) => {
-      const result = err instanceof Error ? err.message : String(err)
-      setHistory((prev) => [
-        ...prev,
-        {
-          id: ++replPanelCounter,
-          code: src,
-          result,
-          error: true,
-          ts: new Date().toLocaleTimeString('en-GB', { hour12: false }),
-        },
-      ])
-    },
-  })
-
-  function handleExecute() {
-    const trimmed = code.trim()
-    if (!trimmed) return
-    evalMutation.mutate(trimmed)
-  }
-
-  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
-    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
-      e.preventDefault()
-      handleExecute()
-    }
-  }
-
-  function reuseCode(src: string) {
-    setCode(src)
-    textareaRef.current?.focus()
-  }
-
-  return (
-    <div className="flex flex-col gap-2 h-full">
-      <div className="flex items-center justify-between">
-        <span className="text-[10px] text-foreground-subtle font-mono">
-          device: <span className="text-foreground">{deviceId}</span>
-        </span>
-        {history.length > 0 && (
-          <button
-            onClick={() => setHistory([])}
-            className="inline-flex items-center gap-1 text-[10px] text-foreground-subtle hover:text-foreground"
-          >
-            <Trash2 className="h-3 w-3" />
-            Clear
-          </button>
-        )}
-      </div>
-
-      {/* Input */}
-      <div className="rounded border border-border bg-surface overflow-hidden flex-shrink-0">
-        <div className="flex items-center justify-between border-b border-border px-2 py-1">
-          <span className="text-[10px] text-foreground-subtle font-mono">Ctrl+Enter to run</span>
-          <button
-            onClick={handleExecute}
-            disabled={evalMutation.isPending || !code.trim()}
-            className="inline-flex items-center gap-1 rounded px-2 py-0.5 text-[10px] font-medium bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-          >
-            <Play className="h-3 w-3" />
-            {evalMutation.isPending ? '...' : 'Run'}
-          </button>
-        </div>
-        <textarea
-          ref={textareaRef}
-          value={code}
-          onChange={(e) => setCode(e.target.value)}
-          onKeyDown={handleKeyDown}
-          rows={3}
-          placeholder="// JavaScript..."
-          className="w-full resize-none bg-background p-2 font-mono text-[11px] text-foreground placeholder:text-foreground-subtle focus:outline-none"
-          spellCheck={false}
-        />
-      </div>
-
-      {/* History */}
-      <div className="flex-1 overflow-y-auto space-y-2">
-        {history.length === 0 && (
-          <div className="text-[10px] text-foreground-subtle">No evaluations yet</div>
-        )}
-        {[...history].reverse().map((entry) => (
-          <div key={entry.id} className="rounded border border-border bg-surface overflow-hidden">
-            <div className="flex items-start justify-between gap-1 border-b border-border bg-background px-2 py-1">
-              <pre className="font-mono text-[10px] text-foreground whitespace-pre-wrap break-all flex-1">
-                {entry.code}
-              </pre>
-              <div className="flex items-center gap-1 flex-shrink-0">
-                <span className="text-[9px] text-foreground-subtle">{entry.ts}</span>
-                <button
-                  onClick={() => reuseCode(entry.code)}
-                  title="Reuse"
-                  className="text-foreground-subtle hover:text-foreground"
-                >
-                  <ChevronUp className="h-3 w-3" />
-                </button>
-              </div>
-            </div>
-            <pre
-              className={`px-2 py-1.5 font-mono text-[10px] whitespace-pre-wrap break-all ${
-                entry.error ? 'text-danger' : 'text-success'
-              }`}
-            >
-              {entry.result}
-            </pre>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-// ---- Events Panel ----
-export function EventsPanelContent() {
-  return (
-    <div className="flex flex-col items-center justify-center h-full py-8 text-foreground-subtle">
-      <Bell className="h-8 w-8 mb-3 opacity-30" />
-      <p className="text-sm font-medium text-foreground">No events</p>
-      <p className="text-xs mt-1 opacity-70 text-center">Device events will appear here as they occur</p>
-    </div>
-  )
-}