@camstack/addon-admin-ui 0.1.1

package/src/components/device/FloatingPanel.tsx

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,167 @@
+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

@@ -0,0 +1,196 @@
+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>
+  )
+}