@tleblancureta/proto 0.1.0

package/core-web/src/ProtoApp.tsx

@@ -0,0 +1,163 @@
+/**
+ * ProtoApp — zero-config React app component.
+ *
+ * Wraps Shell with auth, entity management, and standard routing.
+ * The developer only passes their widgets array — everything else
+ * is handled by the framework.
+ *
+ * Usage:
+ *
+ *   import { ProtoApp, defineWidget } from 'proto/web'
+ *
+ *   const widgets = [
+ *     defineWidget({ type: 'items', title: 'Items', ... }),
+ *   ]
+ *
+ *   export default function App() {
+ *     return <ProtoApp widgets={widgets} />
+ *   }
+ */
+import { useState, useCallback, useRef, useMemo } from 'react'
+import Shell, { type CockpitDefinition } from './components/Shell'
+import { useAuth } from './hooks/useAuth'
+import { useTheme } from './hooks/useTheme'
+import { buildWidgetRegistry, type WidgetDefinition } from './lib/define-widget'
+import { protoSocket } from './lib/api'
+import type { EntityDefinition } from '../../core-shared/src/index.js'
+import type { ActiveEntity, WidgetInstance } from './components/shell/types'
+
+export interface ProtoAppProps {
+  /** Widget definitions — the core of your app's UI. */
+  widgets: WidgetDefinition[]
+
+  /** Entity definitions — for cockpit mode (optional). */
+  entities?: EntityDefinition[]
+
+  /** Default widgets shown on first load. If omitted, shows all general widgets. */
+  defaultWidgets?: WidgetInstance[]
+
+  /** Default grid layouts. If omitted, auto-generates a simple grid. */
+  defaultLayouts?: Record<string, unknown[]>
+
+  /** App display name (shown in header). */
+  appName?: string
+
+  /** Login component override. */
+  loginComponent?: React.ComponentType
+}
+
+function DefaultLogin() {
+  return (
+    <div className="flex h-screen items-center justify-center text-muted-foreground">
+      Please sign in.
+    </div>
+  )
+}
+
+export function ProtoApp({
+  widgets: widgetDefs,
+  entities = [],
+  defaultWidgets: defaultWidgetsProp,
+  defaultLayouts: defaultLayoutsProp,
+  appName,
+  loginComponent: LoginComponent = DefaultLogin,
+}: ProtoAppProps) {
+  useTheme()
+
+  const { user, companyId, companies, profile, loading, signOut, setCompanyId } = useAuth()
+  const [refreshKey, setRefreshKey] = useState(0)
+  const chatSendRef = useRef<((msg: string) => void) | null>(null)
+
+  type Entity = { type: string; id: string; label: string }
+  const [activeEntity, setActiveEntity] = useState<Entity | null>(null)
+  const [openEntities, setOpenEntities] = useState<Entity[]>([])
+
+  const widgetRegistry = useMemo(() => buildWidgetRegistry(widgetDefs), [widgetDefs])
+
+  const cockpits = useMemo<Record<string, CockpitDefinition>>(() =>
+    Object.fromEntries(
+      entities
+        .filter(e => !!e.cockpit)
+        .map(e => [e.name, { widgets: e.cockpit!.widgets, layouts: e.cockpit!.layouts }])
+    ), [entities])
+
+  // Auto-generate defaults from general widgets if not provided
+  const defaultWidgets = useMemo(() => {
+    if (defaultWidgetsProp) return defaultWidgetsProp
+    return widgetDefs
+      .filter(w => w.category === 'general')
+      .map((w, i) => ({ id: `${w.type}-${i}`, type: w.type, title: w.title }))
+  }, [widgetDefs, defaultWidgetsProp])
+
+  const defaultLayouts = useMemo(() => {
+    if (defaultLayoutsProp) return defaultLayoutsProp
+    const lg = defaultWidgets.map((w, i) => ({
+      i: w.id, x: (i * 4) % 10, y: Math.floor(i / 2) * 5, w: 4, h: 5, minW: 2, minH: 3,
+    }))
+    return { lg, md: lg, sm: lg }
+  }, [defaultWidgets, defaultLayoutsProp])
+
+  const onSendToChat = useCallback((message: string) => {
+    chatSendRef.current?.(message)
+  }, [])
+
+  const activateEntity = useCallback((e: ActiveEntity) => {
+    setActiveEntity(e as Entity)
+    setOpenEntities(prev => {
+      const exists = prev.find(p => p.type === e.type && p.id === e.id)
+      return exists ? prev : [...prev, e as Entity]
+    })
+  }, [])
+
+  const closeEntityTab = useCallback((e: ActiveEntity) => {
+    setOpenEntities(prev => {
+      const next = prev.filter(p => !(p.type === e.type && p.id === e.id))
+      setActiveEntity(curr =>
+        (curr && curr.type === e.type && curr.id === e.id)
+          ? (next[next.length - 1] || null)
+          : curr
+      )
+      return next
+    })
+  }, [])
+
+  // WebSocket setup
+  const wsSetup = useRef(false)
+  if (!wsSetup.current && user) {
+    wsSetup.current = true
+    protoSocket.connect().catch(() => {})
+    protoSocket.onShellRefresh(() => setRefreshKey(k => k + 1))
+  }
+
+  if (loading) {
+    return <div className="flex h-screen items-center justify-center text-muted-foreground">Loading...</div>
+  }
+
+  if (!user) {
+    return <LoginComponent />
+  }
+
+  const effectiveCompanyId = companyId || user.id
+
+  return (
+    <Shell
+      widgets={widgetRegistry}
+      defaultWidgets={defaultWidgets}
+      defaultLayouts={defaultLayouts}
+      cockpits={cockpits}
+      companyId={effectiveCompanyId}
+      refreshKey={refreshKey}
+      onSendToChat={onSendToChat}
+      activeEntity={activeEntity}
+      onActivateEntity={activateEntity}
+      onDeactivateEntity={() => setActiveEntity(null)}
+      openEntities={openEntities}
+      onCloseTab={closeEntityTab}
+      companies={companies}
+      effectiveCompanyId={effectiveCompanyId}
+      setCompanyId={setCompanyId}
+      onSignOut={signOut}
+      userEmail={profile?.full_name || user.email || ''}
+    />
+  )
+}

package/core-web/src/components/Shell.tsx

@@ -0,0 +1,276 @@
+import { useState, useCallback, useRef, useMemo, type ReactNode } from 'react'
+import { useMountEffect } from '../hooks/useMountEffect'
+import { ResponsiveGridLayout, type Layout } from 'react-grid-layout'
+import 'react-grid-layout/css/styles.css'
+import { XIcon } from 'lucide-react'
+import { loadShellState, saveShellState, clearShellState } from './shell/persistence'
+import { Toolbar } from './shell/Toolbar'
+import { FocusView } from './shell/FocusView'
+import { EmptyState } from './shell/EmptyState'
+import type { ActiveEntity, WidgetInstance, WidgetType } from './shell/types'
+import type { ShellContext, WidgetRegistry } from '../lib/define-widget'
+
+export type { WidgetType, ActiveEntity } from './shell/types'
+
+function useContainerWidth(ref: React.RefObject<HTMLDivElement | null>) {
+  const [width, setWidth] = useState(800)
+  useMountEffect(() => {
+    if (!ref.current) return
+    const observer = new ResizeObserver(entries => {
+      for (const entry of entries) setWidth(entry.contentRect.width)
+    })
+    observer.observe(ref.current)
+    setWidth(ref.current.clientWidth)
+    return () => observer.disconnect()
+  })
+  return width
+}
+
+export interface CockpitDefinition {
+  widgets: WidgetInstance[]
+  layouts: any
+}
+
+interface Props {
+  // Widget registry + layouts (app-provided)
+  widgets: WidgetRegistry
+  defaultWidgets: WidgetInstance[]
+  defaultLayouts: any
+  /** Cockpit definitions keyed by activeEntity.type. */
+  cockpits?: Record<string, CockpitDefinition>
+
+  // Framework context fields
+  companyId: string
+  refreshKey: number
+  onSendToChat: (message: string) => void
+  agentView?: { spec: any; title?: string } | null
+  onAgentDismiss?: () => void
+  activeEntity?: ActiveEntity | null
+  onActivateEntity?: (e: ActiveEntity) => void
+  onDeactivateEntity?: () => void
+  openEntities?: ActiveEntity[]
+  onCloseTab?: (e: ActiveEntity) => void
+
+  // Toolbar
+  role?: string | null
+  companies?: Array<{ id: string; name: string }>
+  effectiveCompanyId?: string
+  setCompanyId?: (id: string) => void
+  onSignOut?: () => void
+  userEmail?: string
+  onOpenSettings?: () => void
+  toolbarExtras?: ReactNode
+
+  /** App-specific ShellContext fields — merged into the ctx passed to widget.render. */
+  contextExtras?: Record<string, unknown>
+  /** App-owned overlays (modals, floating buttons) rendered as Shell children. */
+  overlays?: ReactNode
+}
+
+export default function Shell({
+  widgets: widgetRegistry,
+  defaultWidgets,
+  defaultLayouts,
+  cockpits,
+  companyId, refreshKey, onSendToChat,
+  agentView, onAgentDismiss,
+  activeEntity, onActivateEntity, onDeactivateEntity,
+  openEntities, onCloseTab,
+  role, companies, effectiveCompanyId, setCompanyId, onSignOut, userEmail,
+  onOpenSettings, toolbarExtras,
+  contextExtras, overlays,
+}: Props) {
+  const focusMode = !!agentView
+  const activeCockpit = activeEntity ? cockpits?.[activeEntity.type] : undefined
+  const cockpitMode = !!activeCockpit && !focusMode
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const containerWidth = useContainerWidth(containerRef)
+
+  const [localRefresh, setLocalRefresh] = useState(0)
+  const effectiveRefreshKey = refreshKey + localRefresh
+
+  const saved = loadShellState()
+  const [widgets, setWidgets] = useState<WidgetInstance[]>(saved?.widgets || defaultWidgets)
+  const [layouts, setLayouts] = useState<any>(saved?.layouts || { ...defaultLayouts })
+
+  const addWidget = useCallback((type: WidgetType) => {
+    const id = `${type}-${Date.now()}`
+    const def = widgetRegistry.get(type)
+    const size = def?.defaultSize || { w: 3, h: 4, minW: 2, minH: 3 }
+    const widget: WidgetInstance = { id, type, title: def?.title || type }
+
+    setWidgets(prev => [...prev, widget])
+    setLayouts((prev: any) => {
+      const next = { ...prev, lg: [...(prev.lg || []), { i: id, x: 0, y: Infinity, ...size }] }
+      return next
+    })
+  }, [widgetRegistry])
+
+  const removeWidget = useCallback((id: string) => {
+    setWidgets(prev => prev.filter(w => w.id !== id))
+    setLayouts((prev: any) => ({
+      ...prev,
+      lg: (prev.lg || []).filter((l: any) => l.i !== id),
+    }))
+  }, [])
+
+  const resetShell = useCallback(() => {
+    clearShellState()
+    setWidgets([...defaultWidgets])
+    setLayouts({ ...defaultLayouts })
+  }, [defaultWidgets, defaultLayouts])
+
+  const widgetsRef = useRef(widgets)
+  widgetsRef.current = widgets
+  const layoutsRef = useRef(layouts)
+  layoutsRef.current = layouts
+
+  const persistState = useCallback(() => {
+    saveShellState(widgetsRef.current, layoutsRef.current)
+  }, [])
+
+  const prevWidgetCount = useRef(widgets.length)
+  if (widgets.length !== prevWidgetCount.current) {
+    prevWidgetCount.current = widgets.length
+    persistState()
+  }
+
+  function onLayoutChange(_layout: any, allLayouts: any) {
+    setLayouts(allLayouts)
+    saveShellState(widgetsRef.current, allLayouts)
+  }
+
+  const triggerLocalRefresh = useCallback(() => setLocalRefresh(k => k + 1), [])
+
+  const shellCtx = useMemo<ShellContext>(() => ({
+    companyId,
+    refreshKey: effectiveRefreshKey,
+    activeEntity: activeEntity || null,
+    onSendToChat,
+    onActivateEntity,
+    onDeactivateEntity,
+    onCloseTab,
+    triggerLocalRefresh,
+    ...(contextExtras || {}),
+  } as ShellContext), [
+    companyId, effectiveRefreshKey, activeEntity,
+    onSendToChat, onActivateEntity, onDeactivateEntity, onCloseTab,
+    triggerLocalRefresh, contextExtras,
+  ])
+
+  function renderWidget(widget: WidgetInstance) {
+    const def = widgetRegistry.get(widget.type)
+    if (!def) {
+      return <p className="text-xs text-muted-foreground p-2">Widget "{widget.type}" not found.</p>
+    }
+    return def.render(widget, shellCtx)
+  }
+
+  const widgetCatalog = useMemo(
+    () => Array.from(widgetRegistry.values())
+      .filter(w => w.category === 'general')
+      .map(w => ({ type: w.type, title: w.title, icon: w.icon || '▦' })),
+    [widgetRegistry]
+  )
+
+  return (
+    <div ref={containerRef} id="shell-root" className="h-full overflow-y-auto scrollbar-thin bg-background dotted-bg relative">
+      <Toolbar
+        widgetCount={widgets.length}
+        cockpitMode={cockpitMode}
+        activeEntity={activeEntity}
+        onDeactivateEntity={onDeactivateEntity}
+        onReset={resetShell}
+        onAddWidget={addWidget}
+        widgetCatalog={widgetCatalog}
+        onOpenSettings={onOpenSettings}
+        openEntities={openEntities}
+        onSelectEntity={(e) => onActivateEntity?.(e)}
+        onCloseTab={onCloseTab}
+        role={role}
+        companies={companies}
+        effectiveCompanyId={effectiveCompanyId}
+        setCompanyId={setCompanyId}
+        onSignOut={onSignOut}
+        userEmail={userEmail}
+        rightActions={toolbarExtras}
+      />
+
+      {focusMode && agentView && (
+        <FocusView
+          spec={agentView.spec}
+          title={agentView.title}
+          widgets={widgets}
+          onDismiss={onAgentDismiss}
+          onSendToChat={onSendToChat}
+        />
+      )}
+
+      {cockpitMode && activeCockpit && (
+        <ResponsiveGridLayout
+          className="p-2"
+          width={containerWidth - 16}
+          breakpoints={{ lg: 800, md: 600, sm: 0 }}
+          cols={{ lg: 10, md: 6, sm: 4 }}
+          rowHeight={60}
+          layouts={activeCockpit.layouts}
+          dragConfig={{ enabled: false, bounded: false }}
+          resizeConfig={{ enabled: false }}
+          margin={[8, 8]}
+        >
+          {activeCockpit.widgets.map(widget => (
+            <div key={widget.id} className="bg-card border border-primary/20 rounded-lg overflow-hidden flex flex-col shadow-sm shadow-primary/5">
+              <div className="flex items-center justify-between px-3 py-1.5 border-b border-border/50 bg-gradient-to-r from-primary/5 to-transparent">
+                <span className="text-sm font-medium text-muted-foreground">{widget.title}</span>
+              </div>
+              <div className="flex-1 overflow-y-auto scrollbar-thin p-2 shell-content">
+                {renderWidget(widget)}
+              </div>
+            </div>
+          ))}
+        </ResponsiveGridLayout>
+      )}
+
+      {!focusMode && widgets.length === 0 && !cockpitMode && (
+        <EmptyState onAddWidget={addWidget} widgetCatalog={widgetCatalog} />
+      )}
+
+      {!focusMode && (
+        <div className={cockpitMode ? 'hidden' : ''}>
+          <ResponsiveGridLayout
+            className="p-2"
+            width={containerWidth - 16}
+            breakpoints={{ lg: 800, md: 600, sm: 0 }}
+            cols={{ lg: 10, md: 6, sm: 4 }}
+            rowHeight={60}
+            layouts={layouts}
+            onLayoutChange={onLayoutChange}
+            dragConfig={{ enabled: true, handle: '.widget-drag-handle', bounded: false }}
+            margin={[8, 8]}
+          >
+            {widgets.map(widget => (
+              <div key={widget.id} className="bg-card border border-border rounded-lg overflow-hidden flex flex-col">
+                <div className="widget-drag-handle flex items-center justify-between px-3 py-1.5 border-b border-border/50 bg-card cursor-grab active:cursor-grabbing">
+                  <span className="text-sm font-medium text-muted-foreground select-none">{widget.title}</span>
+                  <button
+                    onClick={() => removeWidget(widget.id)}
+                    className="p-1 -m-1 text-muted-foreground/40 hover:text-foreground transition-colors"
+                    aria-label="Cerrar widget"
+                  >
+                    <XIcon className="w-4 h-4" />
+                  </button>
+                </div>
+                <div className="flex-1 overflow-y-auto scrollbar-thin p-2 shell-content">
+                  {renderWidget(widget)}
+                </div>
+              </div>
+            ))}
+          </ResponsiveGridLayout>
+        </div>
+      )}
+
+      {overlays}
+    </div>
+  )
+}

package/core-web/src/components/shell/EmptyState.tsx

@@ -0,0 +1,33 @@
+import { PlusIcon } from 'lucide-react'
+import { Button } from '../ui/button'
+import type { WidgetType } from './types'
+
+interface CatalogEntry {
+  type: WidgetType
+  title: string
+  icon: string
+}
+
+interface Props {
+  onAddWidget: (type: WidgetType) => void
+  widgetCatalog: CatalogEntry[]
+}
+
+export function EmptyState({ onAddWidget, widgetCatalog }: Props) {
+  return (
+    <div className="flex flex-col items-center justify-center h-[calc(100%-40px)] text-center px-4">
+      <div className="w-12 h-12 rounded-xl border-2 border-dashed border-border flex items-center justify-center mb-3">
+        <PlusIcon className="w-5 h-5 text-muted-foreground/30" />
+      </div>
+      <p className="text-sm text-muted-foreground/60 mb-1">Shell vacio</p>
+      <p className="text-xs text-muted-foreground/30 mb-4">Agrega widgets para ver tus datos.</p>
+      <div className="flex flex-wrap gap-1.5 justify-center">
+        {widgetCatalog.map(w => (
+          <Button key={w.type} variant="outline" size="sm" className="h-7 text-xs gap-1.5" onClick={() => onAddWidget(w.type)}>
+            <span>{w.icon}</span> {w.title}
+          </Button>
+        ))}
+      </div>
+    </div>
+  )
+}

package/core-web/src/components/shell/FocusView.tsx

@@ -0,0 +1,55 @@
+import { XIcon, SparklesIcon } from 'lucide-react'
+import { Generative } from '../widgets/agent/Generative'
+import type { WidgetInstance } from './types'
+
+interface Props {
+  spec: any
+  title?: string
+  widgets: WidgetInstance[]
+  onDismiss?: () => void
+  onSendToChat: (msg: string) => void
+}
+
+/**
+ * Agent-generated focused view — replaces the normal widget grid while active.
+ * Shows a minimized strip of the original widgets for context so the user can
+ * see they're in a temporary view and not lost their layout.
+ */
+export function FocusView({ spec, title, widgets, onDismiss, onSendToChat }: Props) {
+  return (
+    <div className="p-2">
+      {/* Minimized strip of original widgets */}
+      <div className="flex items-center gap-1.5 mb-2 overflow-x-auto scrollbar-thin pb-1">
+        <span className="text-[10px] text-muted-foreground/60 flex-shrink-0">Widgets:</span>
+        {widgets.map(w => (
+          <span
+            key={w.id}
+            className="flex-shrink-0 text-[10px] px-2 py-0.5 rounded-full border border-border/60 bg-card text-muted-foreground"
+          >
+            {w.title}
+          </span>
+        ))}
+      </div>
+
+      {/* Focused agent widget */}
+      <div className="bg-card border border-primary/30 rounded-lg overflow-hidden flex flex-col shadow-lg shadow-primary/5">
+        <div className="flex items-center justify-between px-3 py-1.5 border-b border-border/50 bg-gradient-to-r from-primary/5 to-transparent">
+          <div className="flex items-center gap-1.5">
+            <SparklesIcon className="w-3 h-3 text-primary" />
+            <span className="text-sm font-medium">{title || 'Vista generada'}</span>
+          </div>
+          <button
+            onClick={onDismiss}
+            className="p-1 -m-1 text-muted-foreground/40 hover:text-foreground transition-colors"
+            aria-label="Cerrar vista"
+          >
+            <XIcon className="w-4 h-4" />
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto scrollbar-thin p-3">
+          <Generative spec={spec} onSendToChat={onSendToChat} />
+        </div>
+      </div>
+    </div>
+  )
+}