@tleblancureta/proto 0.1.0

package/core-web/src/components/widgets/agent/Generative.tsx

@@ -0,0 +1,74 @@
+/**
+ * Recursive renderer for agent-generated UI specs.
+ *
+ * The agent sends a JSON tree via the `render_ui` MCP tool. Each node has
+ * `{ type: 'PrimitiveName', ...props, children?: UINode[] }`. Unknown types
+ * render a muted fallback so the agent can iterate.
+ */
+import type { ComponentType, ReactNode } from 'react'
+import * as P from './Primitives'
+
+export interface UINode {
+  type: string
+  children?: UINode[]
+  [prop: string]: any
+}
+
+const PRIMITIVES: Record<string, ComponentType<any>> = {
+  Stack: P.Stack,
+  Row: P.Row,
+  Grid: P.Grid,
+  Heading: P.Heading,
+  Text: P.Text,
+  Image: P.Image,
+  Badge: P.Badge,
+  Stat: P.Stat,
+  Rating: P.Rating,
+  GoldSupplier: P.GoldSupplier,
+  Card: P.Card,
+  CardBody: P.CardBody,
+  LinkOut: P.LinkOut,
+  Button: P.Button,
+  Table: P.Table,
+}
+
+export const KNOWN_PRIMITIVES = Object.keys(PRIMITIVES)
+
+interface Props {
+  spec: UINode | UINode[] | null | undefined
+  onSendToChat?: (message: string) => void
+}
+
+export function Generative({ spec, onSendToChat }: Props) {
+  if (!spec) return null
+  const nodes = Array.isArray(spec) ? spec : [spec]
+  return <>{nodes.map((n, i) => renderNode(n, i, onSendToChat))}</>
+}
+
+function renderNode(node: UINode, key: number | string, onSendToChat?: (m: string) => void): ReactNode {
+  if (!node || typeof node !== 'object') return null
+  const { type, children, ...props } = node
+  const Cmp = PRIMITIVES[type]
+
+  if (!Cmp) {
+    return (
+      <div key={key} className="text-[10px] text-muted-foreground/60 italic">
+        [unknown primitive: {String(type)}]
+      </div>
+    )
+  }
+
+  // Inject onSendToChat into any primitive that accepts it (Button)
+  const injectedProps = type === 'Button' ? { ...props, onSendToChat } : props
+
+  const renderedChildren =
+    Array.isArray(children) && children.length > 0
+      ? children.map((c, i) => renderNode(c, `${key}-${i}`, onSendToChat))
+      : undefined
+
+  return (
+    <Cmp key={key} {...injectedProps}>
+      {renderedChildren}
+    </Cmp>
+  )
+}

package/core-web/src/components/widgets/agent/Primitives.tsx

@@ -0,0 +1,225 @@
+/**
+ * Primitive building blocks for agent-generated UIs.
+ *
+ * Each primitive is a simple React component that accepts typed props and
+ * optional `children` (already rendered by Generative). Primitives have no
+ * side effects beyond `onSendToChat` for interactive ones.
+ */
+import { useState, type ReactNode } from 'react'
+import { ExternalLinkIcon, StarIcon, ShieldCheckIcon, Loader2Icon, CheckIcon } from 'lucide-react'
+import { Badge as UIBadge } from '../../ui/badge'
+import { ACTIONS } from './actions'
+
+type OnChat = (message: string) => void
+
+// ---------- Layout ----------
+
+export function Stack({ gap = 2, children }: { gap?: number; children?: ReactNode }) {
+  return <div className={`flex flex-col gap-${Math.min(gap, 6)}`}>{children}</div>
+}
+
+export function Row({ gap = 2, align = 'center', children }: { gap?: number; align?: 'start' | 'center' | 'end' | 'baseline'; children?: ReactNode }) {
+  const a = { start: 'items-start', center: 'items-center', end: 'items-end', baseline: 'items-baseline' }[align]
+  return <div className={`flex flex-row gap-${Math.min(gap, 6)} ${a}`}>{children}</div>
+}
+
+export function Grid({ cols = 3, gap = 2, children }: { cols?: 1 | 2 | 3 | 4; gap?: number; children?: ReactNode }) {
+  // Default to 3 columns. Tight breakpoints so it actually shows 3 at normal shell widths.
+  const c = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+  }[cols] || 'grid-cols-4'
+  return <div className={`grid ${c} gap-${Math.min(gap, 6)}`}>{children}</div>
+}
+
+// ---------- Typography ----------
+
+export function Heading({ text, level = 2 }: { text: string; level?: 1 | 2 | 3 }) {
+  const size = level === 1 ? 'text-lg font-semibold' : level === 2 ? 'text-sm font-semibold' : 'text-xs font-medium text-muted-foreground'
+  return <p className={size}>{text}</p>
+}
+
+export function Text({ text, muted, size = 'sm' }: { text: string; muted?: boolean; size?: 'xs' | 'sm' }) {
+  return <p className={`${size === 'xs' ? 'text-[11px]' : 'text-xs'} ${muted ? 'text-muted-foreground' : ''}`}>{text}</p>
+}
+
+// ---------- Content ----------
+
+export function Image({ src, alt, aspect = 'square', fit = 'contain' }: { src: string; alt?: string; aspect?: 'square' | 'video' | 'auto'; fit?: 'cover' | 'contain' }) {
+  const a = aspect === 'square' ? 'aspect-square max-h-32' : aspect === 'video' ? 'aspect-video' : ''
+  const f = fit === 'contain' ? 'object-contain' : 'object-cover'
+  return (
+    <div className={`${a} bg-muted/20 overflow-hidden rounded-md flex items-center justify-center`}>
+      <img src={src} alt={alt || ''} loading="lazy" className={`w-full h-full ${f}`} />
+    </div>
+  )
+}
+
+export function Badge({ text, variant = 'default' }: { text: string; variant?: 'default' | 'secondary' | 'outline' | 'success' | 'warning' }) {
+  const colors: Record<string, string> = {
+    success: 'bg-emerald-600/15 text-emerald-500 border-emerald-600/30',
+    warning: 'bg-amber-500/15 text-amber-500 border-amber-500/30',
+  }
+  if (colors[variant]) {
+    return <span className={`text-[10px] px-1.5 py-0.5 rounded border ${colors[variant]}`}>{text}</span>
+  }
+  return <UIBadge variant={variant as any} className="text-[10px]">{text}</UIBadge>
+}
+
+export function Stat({ label, value, hint, tone = 'default' }: { label: string; value: string; hint?: string; tone?: 'default' | 'success' | 'warning' | 'danger' }) {
+  const color = { default: '', success: 'text-emerald-500', warning: 'text-amber-500', danger: 'text-red-500' }[tone]
+  return (
+    <div className="bg-accent/40 border border-border/60 rounded-lg p-2.5">
+      <p className="text-[10px] text-muted-foreground uppercase tracking-wide">{label}</p>
+      <p className={`text-base font-semibold ${color}`}>{value}</p>
+      {hint && <p className="text-[10px] text-muted-foreground/60 mt-0.5">{hint}</p>}
+    </div>
+  )
+}
+
+export function Rating({ score, count }: { score: number; count?: number }) {
+  return (
+    <span className="inline-flex items-center gap-0.5 text-[11px]">
+      <StarIcon className="w-3 h-3 text-yellow-500 fill-yellow-500" />
+      {score.toFixed(1)}
+      {count ? <span className="text-muted-foreground/60"> ({count})</span> : null}
+    </span>
+  )
+}
+
+export function GoldSupplier({ years }: { years: number }) {
+  if (!years) return null
+  return (
+    <span className="inline-flex items-center gap-0.5 text-[11px] text-amber-500">
+      <ShieldCheckIcon className="w-3 h-3" /> {years}y Gold
+    </span>
+  )
+}
+
+// ---------- Containers ----------
+
+export function Card({ children }: { children?: ReactNode }) {
+  return (
+    <div className="bg-accent/40 border border-border/60 rounded-lg overflow-hidden flex flex-col hover:border-primary/40 transition-colors">
+      {children}
+    </div>
+  )
+}
+
+export function CardBody({ children }: { children?: ReactNode }) {
+  return <div className="p-2.5 flex flex-col gap-1.5 flex-1">{children}</div>
+}
+
+// ---------- Interactive ----------
+
+export function LinkOut({ href, label }: { href: string; label?: string }) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className="inline-flex items-center gap-1 text-[11px] py-1 px-2 rounded border border-border hover:bg-accent transition-colors"
+    >
+      {label || 'Ver'} <ExternalLinkIcon className="w-2.5 h-2.5" />
+    </a>
+  )
+}
+
+export function Button({
+  label,
+  send,
+  action,
+  actionPayload,
+  variant = 'default',
+  onSendToChat,
+}: {
+  label: string
+  send?: string
+  action?: string
+  actionPayload?: Record<string, any>
+  variant?: 'default' | 'primary' | 'ghost'
+  onSendToChat?: OnChat
+}) {
+  const [state, setState] = useState<'idle' | 'running' | 'done' | 'error'>('idle')
+  const [result, setResult] = useState<string | null>(null)
+
+  const cls =
+    state === 'done'
+      ? 'bg-emerald-600/20 text-emerald-500 border border-emerald-600/30 cursor-default'
+      : variant === 'primary'
+      ? 'bg-emerald-600 hover:bg-emerald-500 text-white'
+      : variant === 'ghost'
+      ? 'hover:bg-accent'
+      : 'border border-border hover:bg-accent'
+
+  async function handle() {
+    if (state === 'running' || state === 'done') return
+    // Direct action takes priority
+    if (action && ACTIONS[action]) {
+      setState('running')
+      try {
+        const msg = await ACTIONS[action](actionPayload || {})
+        setResult(msg)
+        setState('done')
+      } catch (e: any) {
+        setResult(`Error: ${e?.message || String(e)}`)
+        setState('error')
+        setTimeout(() => setState('idle'), 2500)
+      }
+      return
+    }
+    // Fallback: send chat message
+    if (send) onSendToChat?.(send)
+  }
+
+  return (
+    <button
+      onClick={handle}
+      disabled={state === 'running' || state === 'done'}
+      className={`text-[11px] py-1 px-2 rounded transition-colors inline-flex items-center gap-1 ${cls}`}
+    >
+      {state === 'running' && <Loader2Icon className="w-2.5 h-2.5 animate-spin" />}
+      {state === 'done' && <CheckIcon className="w-2.5 h-2.5" />}
+      <span>{state === 'done' ? result || 'Guardado' : state === 'error' ? result || 'Error' : label}</span>
+    </button>
+  )
+}
+
+// ---------- Tabular ----------
+
+export function Table({
+  columns,
+  rows,
+}: {
+  columns: string[]
+  rows: (string | number)[][]
+}) {
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-[11px]">
+        <thead>
+          <tr className="border-b border-border">
+            {columns.map((c, i) => (
+              <th key={i} className="text-left py-1 px-2 font-medium text-muted-foreground">
+                {c}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => (
+            <tr key={i} className="border-b border-border/40 hover:bg-accent/30">
+              {row.map((cell, j) => (
+                <td key={j} className="py-1 px-2">
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/core-web/src/components/widgets/agent/actions.ts

@@ -0,0 +1,52 @@
+/**
+ * Registry of direct frontend actions that agent-rendered Buttons can trigger.
+ * Each action is an async handler that runs in the browser (usually a Supabase
+ * write) and returns a short confirmation label for the button's success state.
+ */
+import { supabase } from '../../../lib/supabase'
+
+export type ActionHandler = (payload: any) => Promise<string>
+
+async function saveAlternative(payload: any): Promise<string> {
+  const {
+    product_id,
+    company_id,
+    supplier,
+    title,
+    url,
+    thumbnail,
+    price,
+    moq,
+    review_score,
+    review_count,
+    gold_supplier_years,
+    country,
+  } = payload || {}
+
+  if (!company_id || !supplier) throw new Error('company_id y supplier requeridos')
+
+  const { error } = await supabase.from('product_alternatives').upsert(
+    {
+      product_id: product_id || null,
+      company_id,
+      supplier,
+      title: title || null,
+      url: url || null,
+      thumbnail: thumbnail || null,
+      price: price || null,
+      moq: moq || null,
+      review_score: review_score ?? null,
+      review_count: review_count ?? null,
+      gold_supplier_years: gold_supplier_years ?? null,
+      country: country || null,
+      source: 'alibaba',
+    },
+    { onConflict: 'product_id,supplier,url' },
+  )
+  if (error) throw error
+  return `✓ ${supplier} guardado como alternativa`
+}
+
+export const ACTIONS: Record<string, ActionHandler> = {
+  save_alternative: saveAlternative,
+}

package/core-web/src/hooks/useAuth.ts

@@ -0,0 +1,80 @@
+import { useState, useEffect, useCallback } from 'react'
+import { supabase } from '../lib/supabase'
+import type { User } from '@supabase/supabase-js'
+
+interface Company {
+  id: string
+  name: string
+}
+
+interface Profile {
+  full_name: string | null
+  role_title: string | null
+  onboarding_completed: boolean
+}
+
+interface AuthState {
+  user: User | null
+  role: 'admin' | 'client' | null
+  companyId: string | null
+  companies: Company[]
+  profile: Profile | null
+  loading: boolean
+}
+
+export function useAuth(): AuthState & { signOut: () => void; setCompanyId: (id: string) => void; reload: () => Promise<void> } {
+  const [state, setState] = useState<AuthState>({
+    user: null, role: null, companyId: null, companies: [], profile: null, loading: true,
+  })
+
+  const loadUser = useCallback(async (user: User | null) => {
+    if (!user) {
+      setState({ user: null, role: null, companyId: null, companies: [], profile: null, loading: false })
+      return
+    }
+
+    const [{ data: owned }, { data: profile }] = await Promise.all([
+      supabase.from('companies').select('id, name').eq('owner_id', user.id),
+      supabase.from('profiles').select('full_name, role_title, onboarding_completed').eq('id', user.id).maybeSingle(),
+    ])
+
+    if (owned && owned.length > 0) {
+      setState({ user, role: 'admin', companyId: owned[0].id, companies: owned, profile: profile || null, loading: false })
+      return
+    }
+
+    const { data: memberships } = await supabase
+      .from('company_users')
+      .select('company_id, companies(id, name)')
+      .eq('user_id', user.id)
+
+    const clientCompanies = (memberships || []).map((m: any) => m.companies).filter(Boolean)
+    setState({
+      user, role: clientCompanies.length > 0 ? 'client' : null,
+      companyId: clientCompanies[0]?.id || null, companies: clientCompanies,
+      profile: profile || null, loading: false,
+    })
+  }, [])
+
+  useEffect(() => {
+    let active = true
+    supabase.auth.getUser().then(({ data: { user } }) => {
+      if (active) loadUser(user)
+    }).catch(() => {})
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_ev, session) => {
+      if (active) loadUser(session?.user || null)
+    })
+    return () => { active = false; subscription.unsubscribe() }
+  }, [loadUser])
+
+  return {
+    ...state,
+    signOut: () => supabase.auth.signOut(),
+    setCompanyId: (id: string) => setState(s => ({ ...s, companyId: id })),
+    reload: async () => {
+      const { data: { user } } = await supabase.auth.getUser()
+      await loadUser(user)
+    },
+  }
+}

package/core-web/src/hooks/useData.ts

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * Minimal data-fetching hook. Replaces the `useEffect(() => fetch().then(setState), [deps])` pattern.
+ * Handles stale closures via an abort flag. Components should never useEffect for fetching.
+ */
+export function useData<T>(
+  fetcher: (signal: AbortSignal) => Promise<T>,
+  deps: readonly unknown[],
+  initial: T,
+): { data: T; loading: boolean; error: Error | null } {
+  const [data, setData] = useState<T>(initial)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+  const mountedRef = useRef(true)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    const controller = new AbortController()
+    setLoading(true)
+    setError(null)
+    fetcher(controller.signal)
+      .then(result => {
+        if (!controller.signal.aborted) {
+          setData(result)
+          setLoading(false)
+        }
+      })
+      .catch(err => {
+        if (!controller.signal.aborted) {
+          setError(err)
+          setLoading(false)
+        }
+      })
+    return () => controller.abort()
+  }, deps)
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => { mountedRef.current = false }
+  }, [])
+
+  return { data, loading, error }
+}

package/core-web/src/hooks/useMountEffect.ts

@@ -0,0 +1,10 @@
+import { useEffect } from 'react'
+
+/**
+ * Run an effect exactly once on mount. The only sanctioned direct useEffect wrapper.
+ * Components must never import useEffect directly — use this or another custom hook.
+ */
+export function useMountEffect(effect: () => void | (() => void)) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(effect, [])
+}

package/core-web/src/hooks/useTheme.ts

@@ -0,0 +1,37 @@
+import { useState, useCallback } from 'react'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+function getStoredTheme(): Theme {
+  return (localStorage.getItem('proto-theme') as Theme) || 'dark'
+}
+
+function applyTheme(theme: Theme) {
+  const root = document.documentElement
+  if (theme === 'system') {
+    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    root.classList.toggle('dark', isDark)
+  } else {
+    root.classList.toggle('dark', theme === 'dark')
+  }
+}
+
+// Apply on load (before React renders)
+applyTheme(getStoredTheme())
+
+// Listen for system theme changes
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+  if (getStoredTheme() === 'system') applyTheme('system')
+})
+
+export function useTheme() {
+  const [theme, setThemeState] = useState<Theme>(getStoredTheme)
+
+  const setTheme = useCallback((t: Theme) => {
+    localStorage.setItem('proto-theme', t)
+    setThemeState(t)
+    applyTheme(t)
+  }, [])
+
+  return { theme, setTheme }
+}

package/core-web/src/index.ts

@@ -0,0 +1,52 @@
+/**
+ * @proto/core-web — framework library for proto SPAs.
+ *
+ * Apps import Shell, defineWidget, hooks, lib helpers, and shadcn primitives
+ * from this barrel. Nothing in here is Hermes-specific.
+ */
+
+// Framework components
+export { default as Shell, type CockpitDefinition } from './components/Shell'
+export { ProtoApp, type ProtoAppProps } from './ProtoApp'
+
+// Extension API
+export {
+  defineWidget,
+  buildWidgetRegistry,
+  type WidgetDefinition,
+  type WidgetRegistry,
+  type WidgetCategory,
+  type WidgetSize,
+  type ShellContext,
+} from './lib/define-widget'
+export type { ActiveEntity, WidgetInstance, WidgetType } from './components/shell/types'
+
+// Hooks
+export { useAuth } from './hooks/useAuth'
+export { useData } from './hooks/useData'
+export { useMountEffect } from './hooks/useMountEffect'
+export { useTheme, type Theme } from './hooks/useTheme'
+
+// Lib
+export * from './lib/api'
+export * from './lib/config'
+export { supabase } from './lib/supabase'
+export { cn } from './lib/utils'
+export * from './lib/drag'
+export * from './lib/widgetCache'
+
+// Agent runtime (render_ui)
+export { Generative } from './components/widgets/agent/Generative'
+
+// UI primitives (shadcn)
+export { Avatar, AvatarFallback } from './components/ui/avatar'
+export { Badge } from './components/ui/badge'
+export { Button } from './components/ui/button'
+export { Card, CardContent, CardFooter, CardHeader } from './components/ui/card'
+export { InlineEdit } from './components/ui/inline-edit'
+export { Input } from './components/ui/input'
+export { ScrollArea } from './components/ui/scroll-area'
+export { Separator } from './components/ui/separator'
+export { ShellDialog } from './components/ui/shell-dialog'
+export { Skeleton } from './components/ui/skeleton'
+export { Textarea } from './components/ui/textarea'