agent-stage 0.2.15 → 0.2.17

package/template/src/components/PageRenderer.tsx

@@ -1,108 +0,0 @@
-import { useEffect, useState } from 'react'
-import type { Spec } from '@agentstage/render'
-import { Renderer, defineRegistry, defineCatalog, schema } from '@agentstage/render'
-import { shadcnComponents, shadcnComponentDefinitions } from '@agentstage/render/shadcn'
-import type { Bridge } from '../lib/bridge'
-import { BridgeStateProvider } from './bridge-state-provider'
-
-interface PageRendererProps {
-  pageId: string
-  bridge: Bridge
-}
-
-// Create catalog with all shadcn components
-const catalog = defineCatalog(schema, {
-  components: {
-    Card: shadcnComponentDefinitions.Card,
-    Button: shadcnComponentDefinitions.Button,
-    Input: shadcnComponentDefinitions.Input,
-    Stack: shadcnComponentDefinitions.Stack,
-    Text: shadcnComponentDefinitions.Text,
-    Heading: shadcnComponentDefinitions.Heading,
-    Badge: shadcnComponentDefinitions.Badge,
-    Separator: shadcnComponentDefinitions.Separator,
-    Dialog: shadcnComponentDefinitions.Dialog,
-    Tabs: shadcnComponentDefinitions.Tabs,
-    Table: shadcnComponentDefinitions.Table,
-  },
-  actions: {},
-})
-
-// Create registry
-const { registry } = defineRegistry(catalog, {
-  components: {
-    Card: shadcnComponents.Card,
-    Button: shadcnComponents.Button,
-    Input: shadcnComponents.Input,
-    Stack: shadcnComponents.Stack,
-    Text: shadcnComponents.Text,
-    Heading: shadcnComponents.Heading,
-    Badge: shadcnComponents.Badge,
-    Separator: shadcnComponents.Separator,
-    Dialog: shadcnComponents.Dialog,
-    Tabs: shadcnComponents.Tabs,
-    Table: shadcnComponents.Table,
-  },
-})
-
-export function PageRenderer({ pageId, bridge }: PageRendererProps) {
-  const [uiSpec, setUiSpec] = useState<Spec | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    // Load ui.json
-    fetch(`/src/pages/${pageId}/ui.json`)
-      .then((res) => {
-        if (!res.ok) throw new Error(`Failed to load ui.json: ${res.status}`)
-        return res.json()
-      })
-      .then((spec) => {
-        setUiSpec(spec)
-        setLoading(false)
-      })
-      .catch((err) => {
-        setError(err.message)
-        setLoading(false)
-      })
-  }, [pageId])
-
-  // Connect to bridge
-  useEffect(() => {
-    bridge.connect().then((result: { storeId: string }) => {
-      console.log('Connected to bridge:', result.storeId)
-    })
-  }, [bridge])
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="animate-pulse text-muted-foreground">Loading UI...</div>
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-destructive">Error: {error}</div>
-      </div>
-    )
-  }
-
-  if (!uiSpec) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-muted-foreground">No UI spec found</div>
-      </div>
-    )
-  }
-
-  return (
-    <BridgeStateProvider bridge={bridge}>
-      <div className="min-h-screen bg-background p-8">
-        <Renderer spec={uiSpec} registry={registry} />
-      </div>
-    </BridgeStateProvider>
-  )
-}

package/template/src/components/bridge-state-provider.tsx

@@ -1,87 +0,0 @@
-import { createContext, useContext, useState, useEffect, type ReactNode } from 'react'
-import type { Bridge } from '../lib/bridge'
-
-interface BridgeStateContextValue {
-  state: Record<string, unknown>
-  get: (path: string) => unknown
-  set: (path: string, value: unknown) => void
-  update: (updates: Record<string, unknown>) => void
-}
-
-const BridgeStateContext = createContext<BridgeStateContextValue | null>(null)
-
-interface BridgeStateProviderProps {
-  bridge: Bridge
-  children: ReactNode
-}
-
-export function BridgeStateProvider({ bridge, children }: BridgeStateProviderProps) {
-  const [state, setLocalState] = useState(() => bridge.store.getState())
-
-  useEffect(() => {
-    return bridge.store.subscribe((newState) => {
-      setLocalState(newState)
-    })
-  }, [bridge])
-
-  const value: BridgeStateContextValue = {
-    state,
-    get: (path: string) => {
-      const parts = path.split('/').filter(Boolean)
-      let current: unknown = state
-      for (const part of parts) {
-        if (current === null || current === undefined) return undefined
-        current = (current as Record<string, unknown>)[part]
-      }
-      return current
-    },
-    set: (path: string, value: unknown) => {
-      const parts = path.split('/').filter(Boolean)
-      bridge.store.setState((prev) => {
-        const next = { ...prev }
-        let current: Record<string, unknown> = next
-        for (let i = 0; i < parts.length - 1; i++) {
-          const part = parts[i]
-          if (!(part in current) || typeof current[part] !== 'object') {
-            current[part] = {}
-          }
-          current = current[part] as Record<string, unknown>
-        }
-        current[parts[parts.length - 1]] = value
-        return next
-      })
-    },
-    update: (updates: Record<string, unknown>) => {
-      bridge.store.setState((prev) => {
-        const next = { ...prev }
-        for (const [path, value] of Object.entries(updates)) {
-          const parts = path.split('/').filter(Boolean)
-          let current: Record<string, unknown> = next
-          for (let i = 0; i < parts.length - 1; i++) {
-            const part = parts[i]
-            if (!(part in current) || typeof current[part] !== 'object') {
-              current[part] = {}
-            }
-            current = current[part] as Record<string, unknown>
-          }
-          current[parts[parts.length - 1]] = value
-        }
-        return next
-      })
-    },
-  }
-
-  return (
-    <BridgeStateContext.Provider value={value}>
-      {children}
-    </BridgeStateContext.Provider>
-  )
-}
-
-export function useBridgeStateContext(): BridgeStateContextValue {
-  const context = useContext(BridgeStateContext)
-  if (!context) {
-    throw new Error('useBridgeStateContext must be used within BridgeStateProvider')
-  }
-  return context
-}

package/template/src/components/ui/button.tsx

@@ -1,55 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }

package/template/src/components/ui/card.tsx

@@ -1,78 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/template/src/components/ui/input.tsx

@@ -1,24 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }

package/template/src/index.css

@@ -1,59 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/template/src/lib/bridge.ts

@@ -1,53 +0,0 @@
-import { createBridgeStore } from 'agent-stage-bridge/browser'
-import { z } from 'zod'
-import type { ZodSchema } from 'zod'
-
-export interface Bridge {
-  store: {
-    getState: () => Record<string, unknown>
-    subscribe: (callback: (state: Record<string, unknown>) => void) => () => void
-    setState: (updater: (prev: Record<string, unknown>) => Record<string, unknown>) => void
-  }
-  connect: () => Promise<{ storeId: string }>
-  isHydrated: boolean
-  pageId: string
-}
-
-interface CreatePageBridgeOptions {
-  pageId: string
-  schema?: ZodSchema
-  actions?: Record<string, { description: string; payload?: ZodSchema }>
-  events?: Record<string, { description: string }>
-}
-
-// Default schema that accepts any object
-const defaultSchema = z.record(z.unknown())
-
-export function createPageBridge(options: CreatePageBridgeOptions): Bridge {
-  const { pageId, schema = defaultSchema, actions = {}, events = {} } = options
-
-  const bridge = createBridgeStore({
-    pageId,
-    storeKey: 'main',
-    description: {
-      schema,
-      actions,
-      events,
-    },
-    createState: () => ({
-      // Initial state will be loaded from store.json by gateway
-    }),
-  })
-
-  // Mount to window for debugging
-  if (typeof window !== 'undefined') {
-    ;(window as unknown as Record<string, unknown>)[`bridge_${pageId}`] = bridge
-  }
-
-  return bridge as unknown as Bridge
-}
-
-// Legacy export for compatibility
-export const bridge = createPageBridge({
-  pageId: 'counter',
-})

package/template/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/template/src/main.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { RouterProvider, createRouter } from '@tanstack/react-router'
-import './index.css'
-
-// Import the generated route tree
-import { routeTree } from './routeTree.gen'
-
-// Create a new router instance
-const router = createRouter({ routeTree })
-
-// Register the router instance for type safety
-declare module '@tanstack/react-router' {
-  interface Register {
-    router: typeof router
-  }
-}
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <RouterProvider router={router} />
-  </React.StrictMode>,
-)

package/template/src/pages/counter/store.json

@@ -1,8 +0,0 @@
-{
-  "state": {
-    "count": 5
-  },
-  "version": 1,
-  "updatedAt": "2026-02-19T08:00:00.000Z",
-  "pageId": "counter"
-}

package/template/src/pages/counter/ui.json

@@ -1,108 +0,0 @@
-{
-  "root": "container",
-  "elements": {
-    "container": {
-      "type": "Stack",
-      "props": {
-        "direction": "vertical",
-        "gap": "md",
-        "align": "center"
-      },
-      "children": ["header", "card"]
-    },
-    "header": {
-      "type": "Stack",
-      "props": {
-        "direction": "vertical",
-        "gap": "sm",
-        "align": "center"
-      },
-      "children": ["title", "description"]
-    },
-    "title": {
-      "type": "Heading",
-      "props": {
-        "text": "File-based Store Demo",
-        "level": "h1"
-      }
-    },
-    "description": {
-      "type": "Text",
-      "props": {
-        "text": "This page demonstrates the JSON-render architecture. State is persisted to store.json and synced via bridge.",
-        "variant": "muted"
-      }
-    },
-    "card": {
-      "type": "Card",
-      "props": {
-        "title": "Counter",
-        "description": "Try modifying store.json or use CLI to update state"
-      },
-      "children": ["counter-content"]
-    },
-    "counter-content": {
-      "type": "Stack",
-      "props": {
-        "direction": "vertical",
-        "gap": "md",
-        "align": "center"
-      },
-      "children": ["count-display", "buttons", "hint"]
-    },
-    "count-display": {
-      "type": "Text",
-      "props": {
-        "text": { "$state": "/count" },
-        "variant": "lead"
-      }
-    },
-    "buttons": {
-      "type": "Stack",
-      "props": {
-        "direction": "horizontal",
-        "gap": "sm"
-      },
-      "children": ["btn-decrement", "btn-increment"]
-    },
-    "btn-decrement": {
-      "type": "Button",
-      "props": {
-        "label": "-",
-        "variant": "secondary"
-      },
-      "on": {
-        "press": {
-          "action": "setState",
-          "params": {
-            "statePath": "/count",
-            "value": -1
-          }
-        }
-      }
-    },
-    "btn-increment": {
-      "type": "Button",
-      "props": {
-        "label": "+",
-        "variant": "primary"
-      },
-      "on": {
-        "press": {
-          "action": "setState",
-          "params": {
-            "statePath": "/count",
-            "value": 1
-          }
-        }
-      }
-    },
-    "hint": {
-      "type": "Text",
-      "props": {
-        "text": "State is saved to pages/counter/store.json. Try refreshing or editing the file!",
-        "variant": "caption"
-      }
-    }
-  }
-}

package/template/src/pages/test-page/store.json

@@ -1,8 +0,0 @@
-{
-  "state": {
-    "count": 42
-  },
-  "version": 1,
-  "updatedAt": "2026-02-17T11:51:56.723Z",
-  "pageId": "test-page"
-}