prompt_objects 0.1.0

data/frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "prompt-objects-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "dependencies": {
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "clsx": "^2.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "remark-gfm": "^4.0.1",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.3"
+  }
+}

data/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

data/frontend/src/App.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react'
+import { useWebSocket } from './hooks/useWebSocket'
+import { useStore, useSelectedPO } from './store'
+import { Header } from './components/Header'
+import { Dashboard } from './components/Dashboard'
+import { PODetail } from './components/PODetail'
+import { MessageBus } from './components/MessageBus'
+import { NotificationPanel } from './components/NotificationPanel'
+import { ThreadsSidebar } from './components/ThreadsSidebar'
+
+export default function App() {
+  const { sendMessage, respondToNotification, createSession, switchSession, switchLLM, createThread } =
+    useWebSocket()
+  const { selectedPO, busOpen, notifications } = useStore()
+  const selectedPOData = useSelectedPO()
+  const [splitView, setSplitView] = useState(true) // Default to split view
+
+  return (
+    <div className="h-screen flex flex-col bg-po-bg">
+      <Header switchLLM={switchLLM} />
+
+      <div className="flex-1 flex overflow-hidden">
+        {/* Split view: Dashboard sidebar on left when PO selected */}
+        {splitView && selectedPO && (
+          <>
+            {/* PO List */}
+            <aside className="w-56 border-r border-po-border bg-po-surface overflow-hidden flex flex-col">
+              <div className="p-3 border-b border-po-border flex items-center justify-between">
+                <h2 className="text-sm font-medium text-gray-400">Prompt Objects</h2>
+                <button
+                  onClick={() => setSplitView(false)}
+                  className="text-xs text-gray-500 hover:text-white"
+                  title="Hide sidebar"
+                >
+                  ✕
+                </button>
+              </div>
+              <div className="flex-1 overflow-auto">
+                <Dashboard compact />
+              </div>
+            </aside>
+
+            {/* Threads List for selected PO */}
+            {selectedPOData && (
+              <aside className="w-56 border-r border-po-border bg-po-bg overflow-hidden">
+                <ThreadsSidebar
+                  po={selectedPOData}
+                  switchSession={switchSession}
+                  createThread={createThread}
+                />
+              </aside>
+            )}
+          </>
+        )}
+
+        {/* Main content */}
+        <main className="flex-1 overflow-hidden flex flex-col">
+          {/* Show expand button when sidebar is hidden */}
+          {!splitView && selectedPO && (
+            <button
+              onClick={() => setSplitView(true)}
+              className="absolute left-2 top-16 z-10 bg-po-surface border border-po-border rounded px-2 py-1 text-xs text-gray-400 hover:text-white hover:border-po-accent transition-colors"
+              title="Show dashboard sidebar"
+            >
+              ☰ POs
+            </button>
+          )}
+
+          {selectedPO ? (
+            <PODetail
+              sendMessage={sendMessage}
+              createSession={createSession}
+              switchSession={switchSession}
+              createThread={createThread}
+            />
+          ) : (
+            <Dashboard />
+          )}
+        </main>
+
+        {/* Message Bus sidebar */}
+        {busOpen && (
+          <aside className="w-80 border-l border-po-border bg-po-surface overflow-hidden">
+            <MessageBus />
+          </aside>
+        )}
+      </div>
+
+      {/* Notification panel */}
+      {notifications.length > 0 && (
+        <NotificationPanel respondToNotification={respondToNotification} />
+      )}
+    </div>
+  )
+}

data/frontend/src/components/CapabilitiesPanel.tsx

@@ -0,0 +1,44 @@
+import type { PromptObject } from '../types'
+
+interface CapabilitiesPanelProps {
+  po: PromptObject
+}
+
+export function CapabilitiesPanel({ po }: CapabilitiesPanelProps) {
+  const capabilities = po.capabilities || []
+
+  return (
+    <div className="h-full overflow-auto p-4">
+      <h3 className="text-lg font-medium text-white mb-4">Capabilities</h3>
+
+      {capabilities.length === 0 ? (
+        <div className="text-gray-500 text-center py-8">
+          No capabilities defined.
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {capabilities.map((cap, index) => (
+            <div
+              key={index}
+              className="bg-po-surface border border-po-border rounded-lg p-3"
+            >
+              <div className="font-mono text-sm text-po-accent">{cap}</div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="mt-6 p-4 bg-po-bg rounded-lg border border-po-border">
+        <h4 className="text-sm font-medium text-gray-400 mb-2">
+          Universal Capabilities
+        </h4>
+        <p className="text-xs text-gray-500">
+          All Prompt Objects automatically have access to universal capabilities
+          like <code className="text-po-accent">ask_human</code>,{' '}
+          <code className="text-po-accent">think</code>, and{' '}
+          <code className="text-po-accent">request_capability</code>.
+        </p>
+      </div>
+    </div>
+  )
+}

data/frontend/src/components/ChatPanel.tsx

@@ -0,0 +1,251 @@
+import { useState, useRef, useEffect } from 'react'
+import { useStore } from '../store'
+import { MarkdownMessage } from './MarkdownMessage'
+import type { PromptObject, Message, ToolCall } from '../types'
+
+interface ChatPanelProps {
+  po: PromptObject
+  sendMessage: (target: string, content: string, newThread?: boolean) => void
+}
+
+export function ChatPanel({ po, sendMessage }: ChatPanelProps) {
+  const [input, setInput] = useState('')
+  const [continueThread, setContinueThread] = useState(false)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const { streamingContent } = useStore()
+
+  const messages = po.current_session?.messages || []
+  const streaming = streamingContent[po.name]
+  const hasMessages = messages.length > 0
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages, streaming])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!input.trim()) return
+
+    const content = input.trim()
+
+    // Determine if we should create a new thread
+    const shouldCreateNewThread = !continueThread && hasMessages
+
+    // Send message to server - it will handle thread creation + message in one operation
+    // Server sends immediate session_updated with user message for instant feedback
+    sendMessage(po.name, content, shouldCreateNewThread)
+    setInput('')
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Messages */}
+      <div className="flex-1 overflow-auto p-4 space-y-4">
+        {messages.length === 0 && !streaming && (
+          <div className="h-full flex items-center justify-center text-gray-500">
+            <div className="text-center">
+              <div className="text-2xl mb-2">💬</div>
+              <div>Start a conversation with {po.name}</div>
+            </div>
+          </div>
+        )}
+
+        {messages.map((message, index) => (
+          <MessageBubble key={index} message={message} />
+        ))}
+
+        {/* Streaming content */}
+        {streaming && (
+          <div className="flex gap-3">
+            <div className="w-8 h-8 rounded-full bg-po-accent flex items-center justify-center text-white text-sm font-medium flex-shrink-0">
+              AI
+            </div>
+            <div className="flex-1 bg-po-surface rounded-lg p-3 text-gray-200">
+              <MarkdownMessage content={streaming} />
+              <span className="inline-block w-2 h-4 bg-po-accent animate-pulse ml-1" />
+            </div>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <form onSubmit={handleSubmit} className="border-t border-po-border p-4">
+        <div className="flex gap-3">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={`Message ${po.name}...`}
+            className="flex-1 bg-po-surface border border-po-border rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-po-accent"
+            disabled={po.status !== 'idle'}
+          />
+          <button
+            type="submit"
+            disabled={!input.trim() || po.status !== 'idle'}
+            className="px-4 py-2 bg-po-accent text-white rounded-lg font-medium hover:bg-po-accent/80 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Send
+          </button>
+        </div>
+
+        {/* Thread toggle - only show when there are existing messages */}
+        {hasMessages && (
+          <div className="flex items-center gap-3 mt-2 text-xs">
+            <button
+              type="button"
+              onClick={() => setContinueThread(false)}
+              className={`px-2 py-1 rounded transition-colors ${
+                !continueThread
+                  ? 'bg-po-accent/20 text-po-accent border border-po-accent'
+                  : 'text-gray-400 hover:text-white'
+              }`}
+            >
+              New thread
+            </button>
+            <button
+              type="button"
+              onClick={() => setContinueThread(true)}
+              className={`px-2 py-1 rounded transition-colors ${
+                continueThread
+                  ? 'bg-po-accent/20 text-po-accent border border-po-accent'
+                  : 'text-gray-400 hover:text-white'
+              }`}
+            >
+              Continue thread
+            </button>
+            <span className="text-gray-500">
+              {continueThread
+                ? 'Will add to current conversation'
+                : 'Will start a fresh conversation'}
+            </span>
+          </div>
+        )}
+      </form>
+    </div>
+  )
+}
+
+function MessageBubble({ message }: { message: Message }) {
+  const isUser = message.role === 'user'
+  const isAssistant = message.role === 'assistant'
+  const isTool = message.role === 'tool'
+
+  if (isTool) {
+    return (
+      <div className="text-xs text-gray-500 bg-po-bg rounded p-2 font-mono">
+        <div className="text-gray-400 mb-1">Tool Result:</div>
+        <div className="whitespace-pre-wrap break-all">
+          {message.content?.slice(0, 500)}
+          {message.content && message.content.length > 500 && '...'}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`flex gap-3 ${isUser ? 'flex-row-reverse' : ''}`}>
+      <div
+        className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium flex-shrink-0 ${
+          isUser ? 'bg-po-border text-white' : 'bg-po-accent text-white'
+        }`}
+      >
+        {isUser ? 'You' : 'AI'}
+      </div>
+      <div
+        className={`flex-1 max-w-[80%] rounded-lg p-3 ${
+          isUser
+            ? 'bg-po-accent text-white'
+            : 'bg-po-surface text-gray-200'
+        }`}
+      >
+        {message.content && (
+          isAssistant ? (
+            <MarkdownMessage content={message.content} />
+          ) : (
+            <div className="whitespace-pre-wrap">{message.content}</div>
+          )
+        )}
+
+        {/* Tool calls */}
+        {isAssistant && message.tool_calls && message.tool_calls.length > 0 && (
+          <div className="mt-2 space-y-2">
+            {message.tool_calls.map((tc) => (
+              <ToolCallDisplay key={tc.id} toolCall={tc} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ToolCallDisplay({ toolCall }: { toolCall: ToolCall }) {
+  const [expanded, setExpanded] = useState(false)
+  const { notifications } = useStore()
+
+  // Special display for ask_human
+  if (toolCall.name === 'ask_human') {
+    const question = toolCall.arguments.question as string
+    const options = toolCall.arguments.options as string[] | undefined
+
+    // Check if there's a pending notification for this (by matching question)
+    const isPending = notifications.some((n) => n.message === question)
+
+    return (
+      <div className="bg-po-warning/10 border border-po-warning/30 rounded-lg p-3">
+        <div className="flex items-center gap-2 mb-2">
+          <span className="text-po-warning text-sm font-medium">
+            Waiting for human input
+          </span>
+          {isPending ? (
+            <span className="text-xs bg-po-warning text-black px-2 py-0.5 rounded animate-pulse">
+              PENDING
+            </span>
+          ) : (
+            <span className="text-xs bg-green-600 text-white px-2 py-0.5 rounded">
+              RESOLVED
+            </span>
+          )}
+        </div>
+        <p className="text-gray-200 text-sm mb-2">{question}</p>
+        {options && options.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {options.map((opt, i) => (
+              <span
+                key={i}
+                className="text-xs bg-po-bg px-2 py-1 rounded text-gray-400"
+              >
+                {opt}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // Default display for other tool calls - expandable
+  return (
+    <div className="text-xs bg-po-bg/50 rounded overflow-hidden">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full px-2 py-1 text-left font-mono flex items-center gap-1 hover:bg-po-bg/70 transition-colors"
+      >
+        <span className="text-gray-500">{expanded ? '▼' : '▶'}</span>
+        <span className="text-po-accent">{toolCall.name}</span>
+        <span className="text-gray-500">
+          ({Object.keys(toolCall.arguments).length} args)
+        </span>
+      </button>
+      {expanded && (
+        <div className="px-2 pb-2 border-t border-po-border/50">
+          <pre className="text-gray-400 whitespace-pre-wrap break-all mt-1 text-[10px] leading-relaxed">
+            {JSON.stringify(toolCall.arguments, null, 2)}
+          </pre>
+        </div>
+      )}
+    </div>
+  )
+}

data/frontend/src/components/Dashboard.tsx

@@ -0,0 +1,83 @@
+import { usePromptObjects, useStore, usePONotifications } from '../store'
+import { POCard } from './POCard'
+import type { PromptObject } from '../types'
+
+interface DashboardProps {
+  compact?: boolean
+}
+
+export function Dashboard({ compact = false }: DashboardProps) {
+  const promptObjects = usePromptObjects()
+
+  if (promptObjects.length === 0) {
+    return (
+      <div className="h-full flex items-center justify-center text-gray-500">
+        <div className="text-center">
+          <div className="text-4xl mb-4">🔮</div>
+          <div className="text-lg">No Prompt Objects loaded</div>
+          <div className="text-sm mt-2">
+            Waiting for environment to connect...
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Compact mode: simple list for sidebar
+  if (compact) {
+    return (
+      <div className="p-2 space-y-1">
+        {promptObjects.map((po) => (
+          <CompactPOItem key={po.name} po={po} />
+        ))}
+      </div>
+    )
+  }
+
+  // Full dashboard view
+  return (
+    <div className="h-full overflow-auto p-6">
+      <h1 className="text-2xl font-semibold text-white mb-6">
+        Prompt Objects
+      </h1>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {promptObjects.map((po) => (
+          <POCard key={po.name} po={po} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function CompactPOItem({ po }: { po: PromptObject }) {
+  const { selectPO, selectedPO } = useStore()
+  const notifications = usePONotifications(po.name)
+  const isSelected = selectedPO === po.name
+
+  const statusColors = {
+    idle: 'bg-gray-500',
+    thinking: 'bg-po-accent animate-pulse',
+    calling_tool: 'bg-po-warning animate-pulse',
+  }
+
+  return (
+    <button
+      onClick={() => selectPO(po.name)}
+      className={`w-full text-left px-3 py-2 rounded transition-colors flex items-center gap-2 ${
+        isSelected
+          ? 'bg-po-accent/20 border border-po-accent'
+          : 'hover:bg-po-bg border border-transparent'
+      }`}
+    >
+      <div className={`w-2 h-2 rounded-full flex-shrink-0 ${statusColors[po.status]}`} />
+      <span className={`flex-1 truncate text-sm ${isSelected ? 'text-white' : 'text-gray-300'}`}>
+        {po.name}
+      </span>
+      {notifications.length > 0 && (
+        <span className="bg-po-warning text-black text-xs font-bold px-1.5 py-0.5 rounded-full">
+          {notifications.length}
+        </span>
+      )}
+    </button>
+  )
+}

data/frontend/src/components/Header.tsx

@@ -0,0 +1,141 @@
+import { useState, useEffect, useRef } from 'react'
+import { useStore, useNotificationCount } from '../store'
+import { ModelSelector } from './ModelSelector'
+
+interface Props {
+  switchLLM: (provider: string, model?: string) => void
+}
+
+export function Header({ switchLLM }: Props) {
+  const { connected, environment, selectedPO, selectPO, toggleBus, busOpen, notifications } =
+    useStore()
+  const notificationCount = useNotificationCount()
+  const [showNotifications, setShowNotifications] = useState(false)
+  const [animate, setAnimate] = useState(false)
+  const prevCount = useRef(notificationCount)
+
+  // Animate badge when count increases
+  useEffect(() => {
+    if (notificationCount > prevCount.current) {
+      setAnimate(true)
+      const timer = setTimeout(() => setAnimate(false), 500)
+      return () => clearTimeout(timer)
+    }
+    prevCount.current = notificationCount
+  }, [notificationCount])
+
+  return (
+    <header className="h-14 bg-po-surface border-b border-po-border flex items-center px-4 gap-4">
+      {/* Logo / Title */}
+      <button
+        onClick={() => selectPO(null)}
+        className="text-lg font-semibold text-white hover:text-po-accent transition-colors"
+      >
+        PromptObjects
+      </button>
+
+      {/* Environment info */}
+      {environment && (
+        <div className="text-sm text-gray-400">
+          <span className="text-gray-500">/</span>
+          <span className="ml-2">{environment.name}</span>
+          <span className="ml-3 text-gray-500">
+            {environment.po_count} POs, {environment.primitive_count} primitives
+          </span>
+        </div>
+      )}
+
+      {/* Breadcrumb for selected PO */}
+      {selectedPO && (
+        <div className="text-sm text-gray-400">
+          <span className="text-gray-500">/</span>
+          <span className="ml-2 text-po-accent">{selectedPO}</span>
+        </div>
+      )}
+
+      <div className="flex-1" />
+
+      {/* Model selector */}
+      <ModelSelector switchLLM={switchLLM} />
+
+      {/* Connection status */}
+      <div className="flex items-center gap-2 text-sm">
+        <div
+          className={`w-2 h-2 rounded-full ${
+            connected ? 'bg-green-500' : 'bg-red-500'
+          }`}
+        />
+        <span className="text-gray-400">
+          {connected ? 'Connected' : 'Disconnected'}
+        </span>
+      </div>
+
+      {/* Notification bell with badge */}
+      <div className="relative">
+        <button
+          onClick={() => setShowNotifications(!showNotifications)}
+          className={`relative p-2 rounded transition-colors ${
+            notificationCount > 0
+              ? 'text-po-warning hover:bg-po-warning/20'
+              : 'text-gray-400 hover:text-white hover:bg-po-border'
+          }`}
+          title={notificationCount > 0 ? `${notificationCount} pending requests` : 'No notifications'}
+        >
+          {/* Bell icon */}
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+          </svg>
+          {/* Badge */}
+          {notificationCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 bg-po-warning text-black text-xs font-bold w-5 h-5 flex items-center justify-center rounded-full ${
+                animate ? 'animate-bounce' : ''
+              }`}
+            >
+              {notificationCount}
+            </span>
+          )}
+        </button>
+
+        {/* Dropdown with notification summaries */}
+        {showNotifications && notifications.length > 0 && (
+          <div className="absolute right-0 top-full mt-2 w-80 bg-po-surface border border-po-border rounded-lg shadow-xl z-50">
+            <div className="p-3 border-b border-po-border">
+              <h3 className="font-medium text-white">Pending Requests</h3>
+            </div>
+            <div className="max-h-64 overflow-auto">
+              {notifications.map((n) => (
+                <div key={n.id} className="p-3 border-b border-po-border last:border-0 hover:bg-po-bg">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-xs bg-po-warning text-black px-1.5 py-0.5 rounded font-medium">
+                      {n.type}
+                    </span>
+                    <span className="text-xs text-po-accent">{n.po_name}</span>
+                  </div>
+                  <p className="text-sm text-gray-300 line-clamp-2">{n.message}</p>
+                </div>
+              ))}
+            </div>
+            <div className="p-2 border-t border-po-border">
+              <p className="text-xs text-gray-500 text-center">
+                Respond in the notification panel below
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Message Bus toggle */}
+      <button
+        onClick={toggleBus}
+        className={`px-3 py-1.5 text-sm rounded transition-colors ${
+          busOpen
+            ? 'bg-po-accent text-white'
+            : 'bg-po-border text-gray-300 hover:bg-po-accent/50'
+        }`}
+      >
+        Bus
+      </button>
+    </header>
+  )
+}