prompt_objects 0.4.0 → 0.6.0

data/frontend/src/canvas/constants.ts

@@ -1,46 +1,46 @@
 // Canvas visualization constants
 
-// Colors (hex values matching po-* palette)
+// Colors (hex values matching warm po-* palette)
 export const COLORS = {
   // Node colors
-  background: 0x0f0f1a,
-  surface: 0x1a1a2e,
-  border: 0x2d2d44,
-  accent: 0x7c3aed,
-  accentHover: 0x9061f9,
-  success: 0x22c55e,
-  warning: 0xf59e0b,
-  error: 0xef4444,
+  background: 0x1a1918,
+  surface: 0x222120,
+  border: 0x3d3a37,
+  accent: 0xd4952a,
+  accentHover: 0xe0a940,
+  success: 0x3b9a6e,
+  warning: 0xd4952a,
+  error: 0xc45c4a,
 
   // Status colors
-  statusIdle: 0x6b7280,
-  statusThinking: 0x7c3aed,
-  statusCallingTool: 0xf59e0b,
+  statusIdle: 0x78726a,
+  statusThinking: 0xd4952a,
+  statusCallingTool: 0x3b9a6e,
 
   // Canvas-specific
-  nodeFill: 0x1a1a2e,
-  nodeGlow: 0x7c3aed,
-  toolCallFill: 0x3b82f6,
-  arcColor: 0x7c3aed,
-  particleColor: 0xc084fc,
-  gridColor: 0x1a1a2e,
+  nodeFill: 0x222120,
+  nodeGlow: 0xd4952a,
+  toolCallFill: 0x3b9a6e,
+  arcColor: 0xd4952a,
+  particleColor: 0xe0a940,
+  gridColor: 0x222120,
 } as const
 
 // CSS color strings (for CSS2DRenderer elements)
 export const CSS_COLORS = {
-  accent: '#7c3aed',
-  accentHover: '#9061f9',
-  warning: '#f59e0b',
-  success: '#22c55e',
-  error: '#ef4444',
-  textPrimary: '#ffffff',
-  textSecondary: '#9ca3af',
-  textMuted: '#6b7280',
-  surface: '#1a1a2e',
-  border: '#2d2d44',
-  statusIdle: '#6b7280',
-  statusThinking: '#7c3aed',
-  statusCallingTool: '#f59e0b',
+  accent: '#d4952a',
+  accentHover: '#e0a940',
+  warning: '#d4952a',
+  success: '#3b9a6e',
+  error: '#c45c4a',
+  textPrimary: '#e8e2da',
+  textSecondary: '#a8a29a',
+  textMuted: '#78726a',
+  surface: '#222120',
+  border: '#3d3a37',
+  statusIdle: '#78726a',
+  statusThinking: '#d4952a',
+  statusCallingTool: '#3b9a6e',
 } as const
 
 // Node dimensions

data/frontend/src/canvas/inspector/InspectorPanel.tsx

@@ -9,14 +9,14 @@ export function InspectorPanel() {
 
   return (
     <aside className="w-80 border-l 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">Inspector</h2>
+      <div className="h-8 bg-po-surface-2 border-b border-po-border flex items-center px-3">
+        <span className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider flex-1">Inspector</span>
         <button
           onClick={() => useCanvasStore.getState().selectNode(null)}
-          className="text-xs text-gray-500 hover:text-white"
+          className="text-2xs text-po-text-ghost hover:text-po-text-secondary transition-colors duration-150"
           title="Close inspector"
         >
-          ✕
+          {'\u2715'}
         </button>
       </div>
       <div className="flex-1 overflow-auto">

data/frontend/src/canvas/inspector/POInspector.tsx

@@ -7,9 +7,9 @@ interface Props {
 }
 
 const statusColors: Record<string, string> = {
-  idle: 'bg-gray-500',
-  thinking: 'bg-po-accent animate-pulse',
-  calling_tool: 'bg-po-warning animate-pulse',
+  idle: 'bg-po-status-idle',
+  thinking: 'bg-po-status-active animate-pulse',
+  calling_tool: 'bg-po-status-calling animate-pulse',
 }
 
 export function POInspector({ poName }: Props) {
@@ -20,7 +20,7 @@ export function POInspector({ poName }: Props) {
 
   if (!po) {
     return (
-      <div className="p-4 text-gray-500 text-sm">
+      <div className="p-4 text-po-text-ghost text-xs font-mono">
         Prompt Object "{poName}" not found.
       </div>
     )
@@ -31,18 +31,18 @@ export function POInspector({ poName }: Props) {
       {/* Header */}
       <div>
         <div className="flex items-center gap-2 mb-1">
-          <h3 className="text-lg font-medium text-white">{po.name}</h3>
+          <h3 className="text-sm font-mono font-medium text-po-text-primary">{po.name}</h3>
           <div className={`w-2 h-2 rounded-full ${statusColors[po.status] || statusColors.idle}`} />
         </div>
-        <p className="text-sm text-gray-400">{po.description}</p>
-        <span className="inline-block mt-1 text-xs text-gray-500 bg-po-bg px-2 py-0.5 rounded">
+        <p className="text-xs text-po-text-secondary">{po.description}</p>
+        <span className="inline-block mt-1 text-2xs text-po-text-ghost bg-po-surface-2 px-1.5 py-0.5 rounded font-mono">
           {po.status}
         </span>
       </div>
 
       {/* Capabilities */}
       <div>
-        <h4 className="text-sm font-medium text-gray-400 mb-2">
+        <h4 className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider mb-2">
           Capabilities ({po.capabilities?.length || 0})
         </h4>
         <div className="space-y-1">
@@ -60,12 +60,12 @@ export function POInspector({ poName }: Props) {
 
       {/* Sessions */}
       <div>
-        <h4 className="text-sm font-medium text-gray-400 mb-2">
+        <h4 className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider mb-2">
           Sessions ({po.sessions?.length || 0})
         </h4>
         {po.current_session && (
-          <div className="text-xs text-gray-500">
-            Current: <span className="text-gray-300 font-mono">{po.current_session.id.slice(0, 8)}...</span>
+          <div className="text-xs text-po-text-tertiary">
+            Current: <span className="text-po-text-secondary font-mono">{po.current_session.id.slice(0, 8)}...</span>
             <span className="ml-2">({po.current_session.messages.length} messages)</span>
           </div>
         )}
@@ -74,7 +74,7 @@ export function POInspector({ poName }: Props) {
       {/* Notifications */}
       {notifications.length > 0 && (
         <div>
-          <h4 className="text-sm font-medium text-po-warning mb-2">
+          <h4 className="text-2xs font-medium text-po-warning uppercase tracking-wider mb-2">
             Pending Requests ({notifications.length})
           </h4>
           <div className="space-y-2">
@@ -95,9 +95,9 @@ export function POInspector({ poName }: Props) {
           selectPO(poName)
           setCurrentView('dashboard')
         }}
-        className="text-sm text-po-accent hover:underline"
+        className="text-xs text-po-accent hover:underline font-mono transition-colors duration-150"
       >
-        Open full detail view
+        Open in browser view
       </button>
     </div>
   )
@@ -107,17 +107,17 @@ function CapabilityItem({ name, description }: { name: string; description: stri
   const [expanded, setExpanded] = useState(false)
 
   return (
-    <div className="bg-po-bg border border-po-border rounded overflow-hidden">
+    <div className="bg-po-surface-2 border border-po-border rounded overflow-hidden">
       <button
         onClick={() => setExpanded(!expanded)}
-        className="w-full px-3 py-1.5 flex items-center justify-between hover:bg-po-surface transition-colors"
+        className="w-full px-2.5 py-1.5 flex items-center justify-between hover:bg-po-surface-3 transition-colors duration-150"
       >
         <span className="font-mono text-xs text-po-accent">{name}</span>
-        <span className="text-gray-500 text-xs">{expanded ? '▼' : '▶'}</span>
+        <span className="text-po-text-ghost text-xs">{expanded ? '\u25BC' : '\u25B8'}</span>
       </button>
       {expanded && (
-        <div className="px-3 py-2 border-t border-po-border bg-po-surface">
-          <p className="text-xs text-gray-400">{description}</p>
+        <div className="px-2.5 py-2 border-t border-po-border bg-po-surface">
+          <p className="text-xs text-po-text-secondary">{description}</p>
         </div>
       )}
     </div>
@@ -152,16 +152,16 @@ function PromptSection({ prompt, onSave }: { prompt: string; onSave: (p: string)
   return (
     <div>
       <div className="flex items-center justify-between mb-2">
-        <h4 className="text-sm font-medium text-gray-400">Prompt</h4>
+        <h4 className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider">Prompt</h4>
         <button
           onClick={() => {
             if (isEditing && edited !== prompt) onSave(edited)
             setIsEditing(!isEditing)
           }}
-          className={`text-xs px-2 py-0.5 rounded transition-colors ${
+          className={`text-2xs px-1.5 py-0.5 rounded transition-colors duration-150 ${
             isEditing
-              ? 'bg-po-accent text-white'
-              : 'bg-po-border text-gray-300 hover:text-white'
+              ? 'bg-po-accent text-po-bg'
+              : 'text-po-text-tertiary hover:text-po-text-primary hover:bg-po-surface-2'
           }`}
         >
           {isEditing ? 'Done' : 'Edit'}
@@ -174,12 +174,12 @@ function PromptSection({ prompt, onSave }: { prompt: string; onSave: (p: string)
             setEdited(e.target.value)
             debouncedSave(e.target.value)
           }}
-          className="w-full h-40 bg-po-bg border border-po-border rounded p-2 text-xs text-gray-200 font-mono resize-none focus:outline-none focus:border-po-accent"
+          className="w-full h-40 bg-po-bg border border-po-border rounded p-2 text-xs text-po-text-primary font-mono resize-none focus:outline-none focus:border-po-accent"
           spellCheck={false}
         />
       ) : (
-        <div className="bg-po-bg border border-po-border rounded p-2 max-h-32 overflow-auto">
-          <pre className="text-xs text-gray-400 font-mono whitespace-pre-wrap">
+        <div className="bg-po-surface-2 border border-po-border rounded p-2 max-h-32 overflow-auto">
+          <pre className="text-xs text-po-text-secondary font-mono whitespace-pre-wrap">
             {prompt || '(no prompt)'}
           </pre>
         </div>
@@ -199,19 +199,19 @@ function NotificationCard({
   const [showCustom, setShowCustom] = useState(false)
 
   return (
-    <div className="bg-po-bg border border-po-border rounded p-2">
-      <span className="text-xs bg-po-warning text-black px-1.5 py-0.5 rounded font-medium">
+    <div className="bg-po-surface-2 border border-po-border rounded p-2">
+      <span className="text-2xs font-mono bg-po-warning text-po-bg px-1.5 py-0.5 rounded font-bold">
         {notification.type}
       </span>
-      <p className="text-xs text-gray-300 mt-1 mb-2">{notification.message}</p>
+      <p className="text-xs text-po-text-primary mt-1.5 mb-2">{notification.message}</p>
 
       {notification.options.length > 0 && (
-        <div className="flex flex-wrap gap-1 mb-1">
+        <div className="flex flex-wrap gap-1.5 mb-1.5">
           {notification.options.map((opt, i) => (
             <button
               key={i}
               onClick={() => onRespond(opt)}
-              className="px-2 py-1 text-xs bg-po-surface border border-po-border rounded hover:border-po-accent transition-colors"
+              className="px-2 py-0.5 text-xs bg-po-surface border border-po-border rounded hover:border-po-accent hover:text-po-accent transition-colors duration-150 text-po-text-secondary"
             >
               {opt}
             </button>
@@ -220,13 +220,13 @@ function NotificationCard({
       )}
 
       {showCustom ? (
-        <div className="flex gap-1 mt-1">
+        <div className="flex gap-1.5 mt-1.5">
           <input
             type="text"
             value={customInput}
             onChange={(e) => setCustomInput(e.target.value)}
             placeholder="Custom response..."
-            className="flex-1 bg-po-surface border border-po-border rounded px-2 py-1 text-xs text-white placeholder-gray-500 focus:outline-none focus:border-po-accent"
+            className="flex-1 bg-po-bg border border-po-border rounded px-2 py-1 text-xs text-po-text-primary placeholder-po-text-ghost focus:outline-none focus:border-po-accent"
             onKeyDown={(e) => {
               if (e.key === 'Enter' && customInput.trim()) {
                 onRespond(customInput.trim())
@@ -244,7 +244,7 @@ function NotificationCard({
                 setShowCustom(false)
               }
             }}
-            className="px-2 py-1 text-xs bg-po-accent text-white rounded"
+            className="px-2 py-1 text-xs bg-po-accent text-po-bg rounded font-medium"
           >
             Send
           </button>
@@ -252,7 +252,7 @@ function NotificationCard({
       ) : (
         <button
           onClick={() => setShowCustom(true)}
-          className="text-xs text-gray-500 hover:text-white mt-1"
+          className="text-2xs text-po-text-ghost hover:text-po-text-secondary transition-colors duration-150 mt-1"
         >
           + Custom
         </button>

data/frontend/src/canvas/inspector/ToolCallInspector.tsx

@@ -7,7 +7,7 @@ interface Props {
 const statusColors: Record<string, string> = {
   active: 'text-po-accent',
   completed: 'text-po-success',
-  error: 'text-red-400',
+  error: 'text-po-error',
 }
 
 export function ToolCallInspector({ toolCallId }: Props) {
@@ -15,7 +15,7 @@ export function ToolCallInspector({ toolCallId }: Props) {
 
   if (!toolCall) {
     return (
-      <div className="p-4 text-gray-500 text-sm">
+      <div className="p-4 text-po-text-ghost text-xs font-mono">
         Tool call not found or has expired.
       </div>
     )
@@ -29,23 +29,23 @@ export function ToolCallInspector({ toolCallId }: Props) {
     <div className="p-4 space-y-4">
       {/* Header */}
       <div>
-        <h3 className="text-lg font-medium text-white font-mono">{toolCall.toolName}</h3>
+        <h3 className="text-sm font-mono font-medium text-po-text-primary">{toolCall.toolName}</h3>
         <div className="flex items-center gap-2 mt-1">
-          <span className={`text-xs font-medium ${statusColors[toolCall.status] || ''}`}>
+          <span className={`text-xs font-mono font-medium ${statusColors[toolCall.status] || ''}`}>
             {toolCall.status}
           </span>
-          <span className="text-xs text-gray-500">{duration}</span>
+          <span className="text-2xs text-po-text-ghost font-mono">{duration}</span>
         </div>
-        <div className="text-xs text-gray-400 mt-1">
-          Called by: <span className="text-po-accent">{toolCall.callerPO}</span>
+        <div className="text-xs text-po-text-tertiary mt-1">
+          Called by: <span className="text-po-accent font-mono">{toolCall.callerPO}</span>
         </div>
       </div>
 
       {/* Parameters */}
       <div>
-        <h4 className="text-sm font-medium text-gray-400 mb-2">Parameters</h4>
-        <div className="bg-po-bg border border-po-border rounded p-3 overflow-auto max-h-48">
-          <pre className="text-xs text-gray-300 font-mono whitespace-pre-wrap">
+        <h4 className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider mb-2">Parameters</h4>
+        <div className="bg-po-surface-2 border border-po-border rounded p-2.5 overflow-auto max-h-48">
+          <pre className="text-xs text-po-text-secondary font-mono whitespace-pre-wrap">
             {JSON.stringify(toolCall.params, null, 2)}
           </pre>
         </div>
@@ -54,9 +54,9 @@ export function ToolCallInspector({ toolCallId }: Props) {
       {/* Result */}
       {toolCall.result && (
         <div>
-          <h4 className="text-sm font-medium text-gray-400 mb-2">Result</h4>
-          <div className="bg-po-bg border border-po-border rounded p-3 overflow-auto max-h-64">
-            <pre className="text-xs text-gray-300 font-mono whitespace-pre-wrap">
+          <h4 className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider mb-2">Result</h4>
+          <div className="bg-po-surface-2 border border-po-border rounded p-2.5 overflow-auto max-h-64">
+            <pre className="text-xs text-po-text-secondary font-mono whitespace-pre-wrap">
               {toolCall.result}
             </pre>
           </div>

data/frontend/src/canvas/nodes/PONode.ts

@@ -63,8 +63,8 @@ const STATUS_CSS_COLORS: Record<POStatus, string> = {
 }
 
 // Color for when this PO is being called by another PO (delegation)
-const DELEGATED_COLOR = 0x06b6d4 // cyan-500
-const DELEGATED_CSS_COLOR = '#06b6d4'
+const DELEGATED_COLOR = 0x5a8fc2 // steel blue (matches po-status-delegated)
+const DELEGATED_CSS_COLOR = '#5a8fc2'
 
 export class PONode {
   readonly id: string

data/frontend/src/components/ContextMenu.tsx

@@ -35,7 +35,6 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
     }
   }, [onClose])
 
-  // Adjust position to stay within viewport
   const adjustedStyle = {
     top: y,
     left: x,
@@ -44,7 +43,7 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
   return (
     <div
       ref={menuRef}
-      className="fixed z-50 bg-po-surface border border-po-border rounded-lg shadow-xl py-1 min-w-[160px]"
+      className="fixed z-50 bg-po-surface-2 border border-po-border rounded shadow-xl py-0.5 min-w-[140px]"
       style={adjustedStyle}
     >
       {items.map((item, idx) => (
@@ -54,8 +53,10 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
             item.onClick()
             onClose()
           }}
-          className={`w-full text-left px-3 py-1.5 text-xs hover:bg-po-bg transition-colors flex items-center gap-2 ${
-            item.danger ? 'text-red-400 hover:text-red-300' : 'text-gray-300 hover:text-white'
+          className={`w-full text-left px-2.5 py-1.5 text-xs transition-colors duration-150 flex items-center gap-1.5 ${
+            item.danger
+              ? 'text-po-error hover:bg-po-surface-3'
+              : 'text-po-text-secondary hover:bg-po-surface-3 hover:text-po-text-primary'
           }`}
         >
           {item.icon && <span>{item.icon}</span>}

data/frontend/src/components/EnvDataPane.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react'
+import { useStore, useEnvData } from '../store'
+import type { EnvDataEntry } from '../types'
+
+interface EnvDataPaneProps {
+  sessionId: string | undefined
+  requestEnvData: (sessionId: string) => void
+}
+
+export function EnvDataPane({ sessionId, requestEnvData }: EnvDataPaneProps) {
+  const sessionRootMap = useStore((s) => s.sessionRootMap)
+  const rootThreadId = sessionId ? sessionRootMap[sessionId] : undefined
+  const entries = useEnvData(rootThreadId)
+  const [expandedKey, setExpandedKey] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (sessionId) {
+      requestEnvData(sessionId)
+    }
+  }, [sessionId, requestEnvData])
+
+  if (entries.length === 0) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <span className="font-mono text-xs text-po-text-ghost">No shared data</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full overflow-auto px-2 py-1">
+      {entries.map((entry) => (
+        <EnvDataRow
+          key={entry.key}
+          entry={entry}
+          expanded={expandedKey === entry.key}
+          onToggle={() => setExpandedKey(expandedKey === entry.key ? null : entry.key)}
+        />
+      ))}
+    </div>
+  )
+}
+
+function EnvDataRow({ entry, expanded, onToggle }: { entry: EnvDataEntry; expanded: boolean; onToggle: () => void }) {
+  return (
+    <div className="border-b border-po-border last:border-b-0">
+      <button
+        onClick={onToggle}
+        className="w-full text-left px-1.5 py-1.5 hover:bg-po-surface-3 transition-colors duration-150 flex items-center gap-2"
+      >
+        <span className="text-2xs text-po-text-ghost">{expanded ? '▼' : '▶'}</span>
+        <span className="font-mono text-sm text-po-accent truncate">{entry.key}</span>
+        <span className="text-xs text-po-text-ghost truncate flex-1">{entry.short_description}</span>
+        <span className="text-xs text-po-text-ghost flex-shrink-0">{entry.stored_by}</span>
+      </button>
+      {expanded && (
+        <div className="px-2 pb-2">
+          <div className="text-xs text-po-text-ghost mb-1">
+            stored by <span className="text-po-text-secondary">{entry.stored_by}</span>
+            {entry.updated_at && <> &middot; {new Date(entry.updated_at).toLocaleTimeString()}</>}
+          </div>
+          <pre className="font-mono text-xs text-po-text-primary bg-po-surface-1 rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all">
+            {typeof entry.value === 'string' ? entry.value : JSON.stringify(entry.value, null, 2)}
+          </pre>
+        </div>
+      )}
+    </div>
+  )
+}