prompt_objects 0.1.0

data/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

data/frontend/src/store/index.ts

@@ -0,0 +1,246 @@
+import { create } from 'zustand'
+import { useShallow } from 'zustand/react/shallow'
+import type {
+  PromptObject,
+  BusMessage,
+  Notification,
+  Environment,
+  Message,
+  LLMConfig,
+} from '../types'
+
+interface Store {
+  // Connection state
+  connected: boolean
+  setConnected: (connected: boolean) => void
+
+  // Environment
+  environment: Environment | null
+  setEnvironment: (env: Environment) => void
+
+  // Prompt Objects
+  promptObjects: Record<string, PromptObject>
+  setPromptObject: (name: string, state: Partial<PromptObject>) => void
+  removePromptObject: (name: string) => void
+  updatePromptObjectStatus: (name: string, status: PromptObject['status']) => void
+  addMessageToPO: (poName: string, message: Message) => void
+  updateSessionMessages: (poName: string, sessionId: string, messages: Message[]) => void
+  switchPOSession: (poName: string, sessionId: string) => void
+
+  // Navigation
+  selectedPO: string | null
+  selectPO: (name: string | null) => void
+  activeTab: 'chat' | 'sessions' | 'capabilities' | 'prompt'
+  setActiveTab: (tab: Store['activeTab']) => void
+
+  // Message Bus
+  busMessages: BusMessage[]
+  addBusMessage: (message: BusMessage) => void
+  busOpen: boolean
+  toggleBus: () => void
+
+  // Notifications
+  notifications: Notification[]
+  addNotification: (notification: Notification) => void
+  removeNotification: (id: string) => void
+
+  // Streaming
+  streamingContent: Record<string, string>
+  appendStreamChunk: (poName: string, chunk: string) => void
+  clearStream: (poName: string) => void
+
+  // Response handling
+  pendingResponse: Record<string, string>
+  setPendingResponse: (poName: string, content: string) => void
+  clearPendingResponse: (poName: string) => void
+
+  // LLM Config
+  llmConfig: LLMConfig | null
+  setLLMConfig: (config: LLMConfig) => void
+  updateCurrentLLM: (provider: string, model: string) => void
+}
+
+export const useStore = create<Store>((set) => ({
+  // Connection
+  connected: false,
+  setConnected: (connected) => set({ connected }),
+
+  // Environment
+  environment: null,
+  setEnvironment: (environment) => set({ environment }),
+
+  // Prompt Objects
+  promptObjects: {},
+  setPromptObject: (name, state) =>
+    set((s) => ({
+      promptObjects: {
+        ...s.promptObjects,
+        [name]: {
+          ...s.promptObjects[name],
+          ...state,
+          name, // Ensure name is always set
+        } as PromptObject,
+      },
+    })),
+  removePromptObject: (name) =>
+    set((s) => {
+      const { [name]: _, ...rest } = s.promptObjects
+      // If we're viewing this PO, deselect it
+      const selectedPO = s.selectedPO === name ? null : s.selectedPO
+      return { promptObjects: rest, selectedPO }
+    }),
+  updatePromptObjectStatus: (name, status) =>
+    set((s) => ({
+      promptObjects: {
+        ...s.promptObjects,
+        [name]: {
+          ...s.promptObjects[name],
+          status,
+        },
+      },
+    })),
+  addMessageToPO: (poName, message) =>
+    set((s) => {
+      const po = s.promptObjects[poName]
+      if (!po) return s
+
+      // Handle case where current_session doesn't exist yet (new POs)
+      const currentMessages = po.current_session?.messages || []
+      return {
+        promptObjects: {
+          ...s.promptObjects,
+          [poName]: {
+            ...po,
+            current_session: {
+              id: po.current_session?.id || 'pending',
+              messages: [...currentMessages, message],
+            },
+          },
+        },
+      }
+    }),
+  updateSessionMessages: (poName, sessionId, messages) =>
+    set((s) => {
+      const po = s.promptObjects[poName]
+      if (!po) return s
+
+      // Update current_session if it matches the sessionId, OR if current_session is null
+      // (handles newly created POs that didn't have session info yet)
+      if (po.current_session?.id === sessionId || !po.current_session) {
+        return {
+          promptObjects: {
+            ...s.promptObjects,
+            [poName]: {
+              ...po,
+              current_session: {
+                id: sessionId,
+                messages,
+              },
+            },
+          },
+        }
+      }
+
+      // Otherwise, just update the session in the sessions list (message count)
+      // The full messages will be loaded when the user switches to that session
+      return s
+    }),
+  switchPOSession: (poName, sessionId) =>
+    set((s) => {
+      const po = s.promptObjects[poName]
+      if (!po) return s
+
+      // Switch to a new session - clear messages until session_updated arrives
+      return {
+        promptObjects: {
+          ...s.promptObjects,
+          [poName]: {
+            ...po,
+            current_session: {
+              id: sessionId,
+              messages: [], // Will be populated by session_updated
+            },
+          },
+        },
+      }
+    }),
+
+  // Navigation
+  selectedPO: null,
+  selectPO: (name) => set({ selectedPO: name, activeTab: 'chat' }),
+  activeTab: 'chat',
+  setActiveTab: (activeTab) => set({ activeTab }),
+
+  // Message Bus
+  busMessages: [],
+  addBusMessage: (message) =>
+    set((s) => ({
+      busMessages: [...s.busMessages.slice(-99), message], // Keep last 100
+    })),
+  busOpen: false,
+  toggleBus: () => set((s) => ({ busOpen: !s.busOpen })),
+
+  // Notifications
+  notifications: [],
+  addNotification: (notification) =>
+    set((s) => ({
+      notifications: [...s.notifications, notification],
+    })),
+  removeNotification: (id) =>
+    set((s) => ({
+      notifications: s.notifications.filter((n) => n.id !== id),
+    })),
+
+  // Streaming
+  streamingContent: {},
+  appendStreamChunk: (poName, chunk) =>
+    set((s) => ({
+      streamingContent: {
+        ...s.streamingContent,
+        [poName]: (s.streamingContent[poName] || '') + chunk,
+      },
+    })),
+  clearStream: (poName) =>
+    set((s) => {
+      const { [poName]: _, ...rest } = s.streamingContent
+      return { streamingContent: rest }
+    }),
+
+  // Response handling
+  pendingResponse: {},
+  setPendingResponse: (poName, content) =>
+    set((s) => ({
+      pendingResponse: {
+        ...s.pendingResponse,
+        [poName]: content,
+      },
+    })),
+  clearPendingResponse: (poName) =>
+    set((s) => {
+      const { [poName]: _, ...rest } = s.pendingResponse
+      return { pendingResponse: rest }
+    }),
+
+  // LLM Config
+  llmConfig: null,
+  setLLMConfig: (config) => set({ llmConfig: config }),
+  updateCurrentLLM: (provider, model) =>
+    set((s) => ({
+      llmConfig: s.llmConfig
+        ? { ...s.llmConfig, current_provider: provider, current_model: model }
+        : null,
+    })),
+}))
+
+// Selectors - use useShallow to prevent infinite re-renders with derived arrays
+export const usePromptObjects = () =>
+  useStore(useShallow((s) => Object.values(s.promptObjects)))
+
+export const useSelectedPO = () =>
+  useStore((s) => (s.selectedPO ? s.promptObjects[s.selectedPO] : null))
+
+export const useNotificationCount = () =>
+  useStore((s) => s.notifications.length)
+
+export const usePONotifications = (poName: string) =>
+  useStore(useShallow((s) => s.notifications.filter((n) => n.po_name === poName)))

data/frontend/src/types/index.ts

@@ -0,0 +1,146 @@
+// Core types for PromptObjects frontend
+
+export interface Message {
+  role: 'user' | 'assistant' | 'tool'
+  content: string | null
+  from?: string
+  tool_calls?: ToolCall[]
+  results?: ToolResult[]
+}
+
+export interface ToolCall {
+  id: string
+  name: string
+  arguments: Record<string, unknown>
+}
+
+export interface ToolResult {
+  tool_call_id: string
+  content: string
+}
+
+export type ThreadType = 'root' | 'continuation' | 'delegation' | 'fork'
+
+export interface Session {
+  id: string
+  name: string | null
+  message_count: number
+  updated_at?: string
+  // Thread fields
+  parent_session_id?: string
+  parent_po?: string
+  thread_type: ThreadType
+}
+
+export interface ThreadTree {
+  session: Session
+  children: ThreadTree[]
+}
+
+export interface CurrentSession {
+  id: string
+  messages: Message[]
+}
+
+export interface PromptObject {
+  name: string
+  description: string
+  status: 'idle' | 'thinking' | 'calling_tool'
+  capabilities: string[]
+  current_session: CurrentSession | null
+  sessions: Session[]
+  prompt?: string  // The markdown body/prompt
+  config?: Record<string, unknown>  // The YAML frontmatter config
+}
+
+export interface BusMessage {
+  from: string
+  to: string
+  content: string
+  timestamp: string
+}
+
+export interface Notification {
+  id: string
+  po_name: string
+  type: string
+  message: string
+  options: string[]
+}
+
+export interface Environment {
+  name: string
+  path: string
+  po_count: number
+  primitive_count: number
+}
+
+// LLM Provider configuration
+export interface LLMProvider {
+  name: string
+  models: string[]
+  default_model: string
+  available: boolean
+}
+
+export interface LLMConfig {
+  current_provider: string
+  current_model: string
+  providers: LLMProvider[]
+}
+
+// WebSocket message types
+export type WSMessageType =
+  | 'environment'
+  | 'po_state'
+  | 'po_response'
+  | 'po_added'
+  | 'po_modified'
+  | 'po_removed'
+  | 'stream'
+  | 'stream_end'
+  | 'bus_message'
+  | 'notification'
+  | 'notification_resolved'
+  | 'session_created'
+  | 'session_switched'
+  | 'session_updated'
+  | 'thread_created'
+  | 'thread_tree'
+  | 'llm_config'
+  | 'llm_switched'
+  | 'error'
+  | 'pong'
+
+export interface WSMessage<T = unknown> {
+  type: WSMessageType
+  payload: T
+}
+
+// Client -> Server message types
+export interface SendMessagePayload {
+  target: string
+  content: string
+  new_thread?: boolean  // If true, create a new thread before sending
+}
+
+export interface RespondToNotificationPayload {
+  id: string
+  response: string
+}
+
+export interface CreateSessionPayload {
+  target: string
+  name?: string
+}
+
+export interface SwitchSessionPayload {
+  target: string
+  session_id: string
+}
+
+export interface CreateThreadPayload {
+  target: string
+  name?: string
+  thread_type?: ThreadType
+}

data/frontend/tailwind.config.js

@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Custom colors for PromptObjects
+        po: {
+          bg: '#0f0f1a',
+          surface: '#1a1a2e',
+          border: '#2d2d44',
+          accent: '#7c3aed',
+          'accent-hover': '#9061f9',
+          success: '#22c55e',
+          warning: '#f59e0b',
+          error: '#ef4444',
+        },
+      },
+    },
+  },
+  plugins: [],
+}

data/frontend/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}

data/frontend/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+
+  // Output to Ruby server's public directory for production
+  build: {
+    outDir: '../lib/prompt_objects/server/public',
+    emptyOutDir: true,
+  },
+
+  // Development proxy to Ruby server
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
+      // WebSocket proxy
+      '/ws': {
+        target: 'ws://localhost:3000',
+        ws: true,
+      },
+    },
+  },
+})

data/lib/prompt_objects/capability.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module PromptObjects
+  # Base class for all capabilities (both primitives and prompt objects).
+  # Everything in the system implements this interface.
+  class Capability
+    attr_reader :name, :description
+    attr_accessor :state
+
+    def initialize
+      @state = :idle
+    end
+
+    # Handle a message and return a response.
+    # @param message [String, Hash] The incoming message
+    # @param context [Context] Execution context with environment reference
+    # @return [String] The response
+    def receive(message, context:)
+      raise NotImplementedError, "#{self.class} must implement #receive"
+    end
+
+    # Generate a tool descriptor for LLM function calling.
+    # @return [Hash] OpenAI-compatible tool descriptor
+    def descriptor
+      {
+        type: "function",
+        function: {
+          name: name,
+          description: description,
+          parameters: parameters
+        }
+      }
+    end
+
+    # Define the parameters this capability accepts.
+    # Override in subclasses for specific parameter schemas.
+    # @return [Hash] JSON Schema for parameters
+    def parameters
+      {
+        type: "object",
+        properties: {},
+        required: []
+      }
+    end
+  end
+end