agent-stage 0.2.14 → 0.2.17

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"
-}

package/template/src/routeTree.gen.ts

@@ -1,77 +0,0 @@
-/* eslint-disable */
-
-// @ts-nocheck
-
-// noinspection JSUnusedGlobalSymbols
-
-// This file was automatically generated by TanStack Router.
-// You should NOT make any changes in this file as it will be overwritten.
-// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
-import { Route as rootRouteImport } from './routes/__root'
-import { Route as CounterRouteImport } from './routes/counter'
-import { Route as IndexRouteImport } from './routes/index'
-
-const CounterRoute = CounterRouteImport.update({
-  id: '/counter',
-  path: '/counter',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => rootRouteImport,
-} as any)
-
-export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/counter': typeof CounterRoute
-}
-export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/counter': typeof CounterRoute
-}
-export interface FileRoutesById {
-  __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
-  '/counter': typeof CounterRoute
-}
-export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/counter'
-  fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/counter'
-  id: '__root__' | '/' | '/counter'
-  fileRoutesById: FileRoutesById
-}
-export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  CounterRoute: typeof CounterRoute
-}
-
-declare module '@tanstack/react-router' {
-  interface FileRoutesByPath {
-    '/counter': {
-      id: '/counter'
-      path: '/counter'
-      fullPath: '/counter'
-      preLoaderRoute: typeof CounterRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-  }
-}
-
-const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
-  CounterRoute: CounterRoute,
-}
-export const routeTree = rootRouteImport
-  ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>()

package/template/src/routes/__root.tsx

@@ -1,11 +0,0 @@
-import { createRootRoute, Outlet } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-
-export const Route = createRootRoute({
-  component: () => (
-    <>
-      <Outlet />
-      <TanStackRouterDevtools />
-    </>
-  ),
-})

package/template/src/routes/counter.tsx

@@ -1,19 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { useMemo } from 'react'
-import { PageRenderer } from '../components/PageRenderer'
-import { createPageBridge } from '../lib/bridge'
-
-export const Route = createFileRoute('/counter')({
-  component: CounterPage,
-})
-
-function CounterPage() {
-  // Create bridge instance for this page
-  const bridge = useMemo(() => {
-    return createPageBridge({
-      pageId: 'counter',
-    })
-  }, [])
-
-  return <PageRenderer pageId="counter" bridge={bridge} />
-}

package/template/src/routes/index.tsx

@@ -1,46 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { Button } from '../components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card'
-import { Input } from '../components/ui/input'
-
-export const Route = createFileRoute('/')({
-  component: IndexPage,
-})
-
-function IndexPage() {
-  return (
-    <div className="min-h-screen bg-background p-8">
-      <div className="mx-auto max-w-2xl space-y-6">
-        <div className="space-y-2">
-          <h1 className="text-3xl font-bold tracking-tight">Agentstage</h1>
-          <p className="text-muted-foreground">
-            Interactive UI for AI Agents
-          </p>
-        </div>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Welcome</CardTitle>
-            <CardDescription>
-              Your Agentstage app is running. Use the CLI to add pages and components.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex gap-2">
-              <Input placeholder="Type something..." />
-              <Button>Submit</Button>
-            </div>
-            <div className="text-sm text-muted-foreground">
-              <p>Quick commands:</p>
-              <ul className="list-disc list-inside mt-2 space-y-1">
-                <li><code>agentstage add-page counter</code> - Add a new page</li>
-                <li><code>agentstage ls</code> - List connected stores</li>
-                <li><code>agentstage exec {'<storeId>'} setCount 5</code> - Execute action</li>
-              </ul>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}

package/template/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />