agent-stage 0.2.0 → 0.2.1

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

@@ -0,0 +1,87 @@
+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/lib/bridge.ts

@@ -0,0 +1,53 @@
+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/pages/counter/store.json

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

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

@@ -0,0 +1,108 @@
+{
+  "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

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

package/template/src/routeTree.gen.ts

@@ -0,0 +1,77 @@
+/* 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,4 +1,4 @@
-import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
+import { createRootRoute, Outlet } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 
 export const Route = createRootRoute({

package/template/src/routes/counter.tsx

@@ -0,0 +1,19 @@
+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/dist/commands/add-page.d.ts

@@ -1,2 +0,0 @@
-import { Command } from 'commander';
-export declare const addPageCommand: Command;

package/dist/commands/add-page.js

@@ -1,132 +0,0 @@
-import { Command } from 'commander';
-import consola from 'consola';
-import c from 'picocolors';
-import { writeFile, mkdir } from 'fs/promises';
-import { existsSync } from 'fs';
-import { join } from 'pathe';
-import { getWorkspaceDir, isInitialized, readRuntimeConfig } from '../utils/paths.js';
-export const addPageCommand = new Command('add-page')
-    .description('Add a new page with Bridge store')
-    .argument('<name>', 'Page name (e.g., counter, about)')
-    .action(async (name) => {
-    // 检查是否已初始化
-    if (!isInitialized()) {
-        consola.error('Project not initialized. Please run `agentstage init` first.');
-        process.exit(1);
-    }
-    if (!/^[a-z0-9-]+$/.test(name)) {
-        consola.error('Page name must be lowercase letters, numbers, and hyphens');
-        process.exit(1);
-    }
-    try {
-        const workspaceDir = await getWorkspaceDir();
-        const config = await readRuntimeConfig();
-        const routesDir = join(workspaceDir, 'src', 'routes');
-        const pageFile = join(routesDir, `${name}.tsx`);
-        // 确保 routes 目录存在
-        await mkdir(routesDir, { recursive: true });
-        if (existsSync(pageFile)) {
-            consola.error(`Page "${name}" already exists at src/routes/${name}.tsx`);
-            process.exit(1);
-        }
-        const pageContent = `import { z } from 'zod';
-import { createFileRoute } from '@tanstack/react-router';
-import { createBridgeStore } from 'agent-stage-bridge/browser';
-import { useEffect } from 'react';
-import { Button } from '../components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
-
-// Define the page state schema
-const StateSchema = z.object({
-  count: z.number().default(0),
-});
-
-type State = z.infer<typeof StateSchema>;
-
-// Create the bridge store for this page
-const bridgeStore = createBridgeStore<State, { increment: { payload?: number }; decrement: {} }>({
-  pageId: '${name}',
-  storeKey: 'main',
-  description: {
-    schema: StateSchema,
-    actions: {
-      increment: {
-        description: 'Increment the counter by a specified amount (default: 1)',
-        payload: z.number().optional(),
-      },
-      decrement: {
-        description: 'Decrement the counter by 1',
-      },
-    },
-  },
-  createState: (set) => ({
-    count: 0,
-    dispatch: (action) => {
-      switch (action.type) {
-        case 'increment':
-          set((state) => ({ count: state.count + (action.payload ?? 1) }));
-          break;
-        case 'decrement':
-          set((state) => ({ count: state.count - 1 }));
-          break;
-      }
-    },
-  }),
-});
-
-export const Route = createFileRoute('/${name}')({
-  component: ${toPascalCase(name)}Page,
-});
-
-function ${toPascalCase(name)}Page() {
-  // Connect to the bridge when the component mounts
-  useEffect(() => {
-    bridgeStore.connect().catch(console.error);
-  }, []);
-
-  return (
-    <div className="min-h-screen bg-background p-8">
-      <div className="mx-auto max-w-2xl">
-        <Card>
-          <CardHeader>
-            <CardTitle>${toTitleCase(name)}</CardTitle>
-            <CardDescription>
-              This page is connected to the Agentstage Bridge.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <p className="text-sm text-muted-foreground">
-              Edit this page at src/routes/${name}.tsx
-            </p>
-            <div className="flex gap-2">
-              <Button variant="outline">Action 1</Button>
-              <Button>Action 2</Button>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}
-`;
-        await writeFile(pageFile, pageContent);
-        consola.success(`Page "${name}" created`);
-        console.log(`  File:     ${c.cyan(`src/routes/${name}.tsx`)}`);
-        const port = config?.port || 3000;
-        console.log(`  URL:      ${c.cyan(`http://localhost:${port}/${name}`)}`);
-        console.log(`  Route:    ${c.gray(`/${name}`)} (file-based, auto-registered by TanStack Router)`);
-        console.log();
-        console.log(`  The route is automatically registered by TanStack Router.`);
-        console.log(`  No manual route configuration needed!`);
-    }
-    catch (error) {
-        consola.error('Failed to create page:', error.message);
-        process.exit(1);
-    }
-});
-function toPascalCase(str) {
-    return str.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
-}
-function toTitleCase(str) {
-    return str.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
-}

package/dist/commands/reset.d.ts

@@ -1,2 +0,0 @@
-import { Command } from 'commander';
-export declare const resetCommand: Command;