prompt_objects 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 92cf8b8492d42dee0adb37a4fb41692e6b228ab7a364f9176444c60cd81eb63d
-  data.tar.gz: 45e8828d53f7b9c4893fb6374535bbb099c77e92371a3e111bda07d9e35db93e
+  metadata.gz: 6dd3c14942ef80d1979ded542802ad9d1a24b32cd479aa4ba0a08bb0bf2e349d
+  data.tar.gz: 3642d5424aa827754dfefde82a9e9e5c770935ebf08e36cfc429d8f86e5e8502
 SHA512:
-  metadata.gz: 123244bee715f744b7b377bbf4e2912ed28cbb966ce6b92bb7d43a5ea053bf2460e7bb10c35acf09ab5f4cfa8f0afeeb78198be62acfbde44b86f3c5f0559deb
-  data.tar.gz: 15ee859102e87e971df1e38b756d776a0f913148554974fc2fe9ae79b12853cf9028793aadfaabb92aa1d74961739c97a51c258c0e9e2a38cbf77fb5f931b46d
+  metadata.gz: f4e4449d2a8764a762c13ea14b6ccac17b07d1ae06a053a94e5b66ce7ebf38b8ca2903c140f0bb06810e09fa830bdac1dcfb8485d2f6f7fe32f7b0dffdf374bb
+  data.tar.gz: 1faa31a8c32f067cdfb133c06e6c3d45e55fec3381d86f649e8845b9d2c58bc367e2bed3821cbec4a92a18776b723ccf69c276f9e913347198816005c4608353

data/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to PromptObjects are documented in this file.
 
+## [0.5.0] - 2026-02-13
+
+### Added
+
+- **Smalltalk System Browser redesign** — Complete frontend overhaul replacing the chat-app UI with a multi-pane object browser. POs are treated as live objects in a running image: permanent ObjectList (left pane), multi-pane Inspector with MethodList + SourcePane, REPL-style Workspace, and bottom Transcript. Warm charcoal + amber palette with Geist fonts. All panels resizable via drag handles.
+- **Collapsible inspector top pane** — The Methods + Source pane has a thin header bar with a collapse/expand toggle. When collapsed, the Workspace fills the full inspector height. Collapse state persists across PO switches.
+- **Source entry in method list** — A "Source" entry at the top of the method list provides a clear way to navigate back to the PO's prompt after inspecting a capability.
+- **Dynamic Ollama model discovery** — LLM config now queries the Ollama API for installed models instead of using a static list.
+
+### Fixed
+
+- **Capabilities disappearing on file save** — `po_modified` events were sending capabilities as plain string names instead of rich objects, overwriting the store. All serialization paths now emit consistent `{name, description, parameters}` objects.
+- **Centralized PO serialization** — Moved duplicated state/message/session serialization from WebSocketHandler and API routes into `PromptObject` (`to_state_hash`, `to_summary_hash`, `to_inspect_hash`). Eliminates inconsistent serialization as a class of bug.
+- **Missing items field in array tool schemas** — LLM APIs reject array parameters without an `items` field. Added a defensive sanitizer in `Capability#descriptor` as a fallback.
+- **OpenAI adapter error details** — 4xx errors from Ollama now surface the actual rejection reason instead of just "status 400".
+- **All WebSocket message types handled** — Added frontend handlers for `prompt_updated`, `llm_error`, `session_created`, and `session_switched`. Removed defensive normalization workarounds.
+
 ## [0.4.0] - 2026-02-11
 
 ### Added

data/CLAUDE.md

@@ -6,17 +6,21 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 **PromptObjects** is a Ruby framework where markdown files with LLM-backed behavior act as first-class autonomous entities. The core insight: **everything is a capability**—primitives (Ruby code) and Prompt-Objects (markdown files) share the same interface, differing only in interpretation complexity.
 
-**Current Status**: Design phase—`design-doc-v2.md` contains the full specification, `IMPLEMENTATION_PLAN.md` has detailed phased build plans. No implementation code exists yet.
+**Current Status**: v0.5.0 — The core framework is fully implemented and functional. The original 6-phase implementation plan is complete. Active development is focused on visualization, developer experience, and exploring new primitives. See `CHANGELOG.md` for release history and `design-doc-v2.md` / `IMPLEMENTATION_PLAN.md` for original design context.
 
 ## Architecture
 
 ```
-ENVIRONMENT
+RUNTIME (Environment)
 ├── CAPABILITY REGISTRY
 │   ├── PRIMITIVES (Ruby) - deterministic interpretation
-│   └── PROMPT-OBJECTS (Markdown) - semantic interpretation via LLM
-├── MESSAGE BUS - routes messages, logs for visualization
-└── TERMINAL UI (Charm) - capability bar, message log, conversation, input
+│   ├── PROMPT-OBJECTS (Markdown) - semantic interpretation via LLM
+│   └── UNIVERSAL CAPABILITIES - available to all POs automatically
+├── MESSAGE BUS - routes messages, logs to SQLite for replay
+├── SESSION STORE (SQLite) - persistent conversation threads, delegation tracking
+├── HUMAN QUEUE - non-blocking ask_human requests
+├── WEB SERVER (Sinatra + WebSocket) - serves React frontend
+└── MCP SERVER - exposes POs as tools via Model Context Protocol
 ```
 
 ### Unified Capability Interface
@@ -53,56 +57,120 @@ You are a careful, thoughtful file reader...
 Available to all Prompt-Objects automatically (no frontmatter declaration needed):
 - `ask_human` - pause for human input/confirmation
 - `think` - internal reasoning (not shown to human)
-- `request_capability` - ask environment for new capability
+- `create_capability` / `add_capability` / `remove_capability` - self-modification
+- `list_capabilities` / `list_primitives` - introspection
+- `create_primitive` / `add_primitive` / `delete_primitive` / `verify_primitive` / `modify_primitive` / `request_primitive` - primitive management
+- `modify_prompt` - rewrite own system prompt at runtime
 
-## Technology Stack
-
-- **Ruby** - core implementation
-- **LLM APIs** - OpenAI, Anthropic, Gemini (adapter pattern)
-- **Charm** - Terminal UI (Bubble Tea for interaction, Lipgloss for styling, Glamour for markdown)
-- **MCP** - Model Context Protocol integration
+### PO-to-PO Delegation
+When a PO calls another PO, the system creates an isolated delegation thread in the target PO. The caller's context is tracked so messages show correct provenance. Delegation start/complete events are broadcast via WebSocket for real-time UI updates.
 
-### TUI Architecture Note
+## Technology Stack
 
-The TUI uses a **single Bubble Tea program** with internal screen states (picker, wizard, main). Do NOT run multiple sequential `Bubbletea.run` calls—this causes terminal state corruption. See `docs/phase-8-environments.md` for details.
+- **Ruby** (>= 3.2, tested through Ruby 4) - core implementation
+- **LLM APIs** - OpenAI, Anthropic, Gemini, Ollama, OpenRouter (adapter pattern via `LLM::Factory`)
+- **Sinatra** - web server for REST API and static file serving
+- **faye-websocket** - real-time WebSocket communication
+- **React + TypeScript** - web frontend (dashboard, chat, capabilities panel)
+- **Three.js** - spatial canvas visualization (force-directed PO graph)
+- **SQLite** - session persistence and event log storage
+- **MCP** - Model Context Protocol server mode
 
-## Planned File Structure
+## File Structure
 
 ```
 prompt_objects/
-├── exe/prompt_objects          # CLI entrypoint
+├── exe/prompt_objects              # CLI entrypoint
 ├── lib/
-│   ├── prompt_objects.rb       # Main entry
+│   ├── prompt_objects.rb           # Main entry, requires all modules
 │   └── prompt_objects/
-│       ├── environment.rb      # Runtime container
-│       ├── capability.rb       # Base interface
-│       ├── prompt_object.rb    # PO implementation
-│       ├── primitive.rb        # Primitive tool wrapper
-│       ├── loader.rb           # Parses frontmatter + body
-│       ├── registry.rb         # Capability registration
-│       ├── message_bus.rb      # Message routing and logging
-│       ├── llm/                # LLM adapters
-│       ├── primitives/         # Built-in primitives (read_file, etc.)
-│       ├── universal/          # Universal capabilities
-│       ├── mcp/                # MCP integration
-│       └── ui/                 # Charm-based terminal UI
-├── objects/                    # Where Prompt-Objects live (.md files)
-└── primitives/                 # Optional user-defined primitives
+│       ├── environment.rb          # Runtime container (registry, bus, LLM, sessions)
+│       ├── capability.rb           # Base capability interface
+│       ├── prompt_object.rb        # PO implementation (LLM conversation loop)
+│       ├── primitive.rb            # Primitive tool wrapper
+│       ├── loader.rb               # Parses frontmatter + body from .md files
+│       ├── registry.rb             # Capability registration and lookup
+│       ├── message_bus.rb          # Message routing, logging, SQLite persistence
+│       ├── human_queue.rb          # Non-blocking human interaction queue
+│       ├── cli.rb                  # CLI command definitions
+│       ├── server.rb               # Web server setup
+│       ├── server/
+│       │   ├── app.rb              # Sinatra application
+│       │   ├── api/routes.rb       # REST API endpoints
+│       │   ├── websocket_handler.rb # WebSocket event handling
+│       │   └── file_watcher.rb     # Live .md file change detection
+│       ├── llm/
+│       │   ├── factory.rb          # Provider/model selection
+│       │   ├── response.rb         # Unified response object
+│       │   ├── pricing.rb          # Token cost calculation
+│       │   ├── openai_adapter.rb   # OpenAI + Ollama + OpenRouter
+│       │   ├── anthropic_adapter.rb
+│       │   └── gemini_adapter.rb
+│       ├── primitives/             # Built-in: read_file, list_files, write_file, http_get
+│       ├── universal/              # 14 universal capabilities (see list above)
+│       ├── connectors/             # Interface adapters (base, mcp)
+│       ├── mcp/                    # MCP server and tool definitions
+│       ├── session/
+│       │   └── store.rb            # SQLite session/thread persistence
+│       └── environment/
+│           ├── manager.rb          # Create/list/clone environments
+│           ├── manifest.rb         # Environment metadata (manifest.yml)
+│           ├── git.rb              # Auto-commit integration
+│           ├── exporter.rb         # Environment export
+│           └── importer.rb         # Environment import
+├── frontend/                       # React + TypeScript web UI
+│   └── src/
+│       ├── App.tsx
+│       ├── components/             # Dashboard, chat, capabilities panel
+│       ├── canvas/                 # Three.js spatial visualization
+│       ├── hooks/                  # WebSocket, state management hooks
+│       ├── store/                  # Frontend state
+│       └── types/                  # TypeScript type definitions
+├── objects/                        # Default POs: greeter, reader, coordinator
+├── templates/                      # Environment templates (basic, developer, writer, arc-agi-1, etc.)
+├── tools/                          # Development tooling
+└── test/                           # Unit and integration tests
 ```
 
-## Implementation Phases
-
-1. **Core Loop**: Capability base, PromptObject, Loader, single LLM adapter, simple REPL
-2. **Primitives & Binding**: Primitive base, built-in primitives, Registry
-3. **Multi-Capability**: Message bus with logging, PO↔PO communication
-4. **Self-Modification**: Universal capabilities including create_capability
-5. **Polish & UI**: Full Charm integration, all UI components
-6. **Demo Ready**: Error handling, testing, practice runs
-
 ## Key Concepts
 
 - **Semantic Binding**: Natural language → capability call (visible in message log)
-- **PO↔PO Communication**: Prompt-Objects can call each other as capabilities
-- **Self-Modification**: System can create new Prompt-Objects at runtime (with human approval)
-- **Human-in-the-Loop**: POs ask for confirmation on dangerous actions, clarification when ambiguous
-- **Non-blocking Human Queue**: When POs need human input (`ask_human`), they suspend (via Fibers) and queue a notification. Multiple POs can wait simultaneously. Human responds via notification panel, PO resumes automatically.
+- **PO↔PO Communication**: Prompt-Objects call each other as capabilities through isolated delegation threads
+- **Self-Modification**: POs can create new POs and primitives at runtime (with human approval)
+- **Human-in-the-Loop**: POs use `ask_human` to pause and queue notifications; human responds asynchronously via the web UI
+- **Environments**: Isolated collections of POs with their own sessions, git history, and configuration. Created from templates via CLI.
+- **Thread Export**: Conversation threads (including delegation chains) exportable as Markdown or JSON
+
+## Development
+
+```bash
+# Install dependencies
+bundle install
+cd frontend && npm install && cd ..
+
+# Run tests
+bundle exec rake test
+
+# Serve an environment with web UI
+prompt_objects serve <env-name> --open
+
+# Environment management
+prompt_objects env create <name> --template basic
+prompt_objects env list
+prompt_objects env info <name>
+```
+
+## Releases
+
+Always tag releases. Pushing a version tag triggers the Discord notification workflow (`.github/workflows/discord-release.yml`), which extracts the matching section from `CHANGELOG.md` and posts it.
+
+```bash
+# 1. Update version in prompt_objects.gemspec
+# 2. Add changelog entry under ## [X.Y.Z] - YYYY-MM-DD
+# 3. Commit: "Release vX.Y.Z — short description"
+# 4. Tag and push:
+git tag vX.Y.Z
+git push && git push origin vX.Y.Z
+# 5. Publish gem:
+gem build prompt_objects.gemspec && gem push prompt_objects-X.Y.Z.gem
+```

data/README.md

@@ -12,6 +12,11 @@ Prompt Objects applies this to AI. Instead of treating LLMs as external APIs you
 
 This is a new computing primitive: semantic late binding at runtime, where natural language becomes the interface between intelligent components.
 
+Blog Posts
+==========
+
+- [What if we took message passing seriously?](https://worksonmymachine.ai/p/what-if-we-took-message-passing-seriously) — The origin story and motivation behind Prompt Objects.
+
 Who
 ===
 

data/frontend/index.html

@@ -4,9 +4,13 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <link href="https://cdn.jsdelivr.net/fontsource/fonts/geist@latest/latin-400-normal.woff2" as="font" type="font/woff2" crossorigin />
+    <link href="https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-sans/style.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-mono/style.css" rel="stylesheet" />
     <title>PromptObjects</title>
   </head>
-  <body class="bg-po-bg text-gray-100">
+  <body class="bg-po-bg text-po-text-primary font-ui">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

data/frontend/src/App.tsx

@@ -1,12 +1,11 @@
-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 { useResize } from './hooks/useResize'
+import { SystemBar } from './components/SystemBar'
+import { ObjectList } from './components/ObjectList'
+import { Inspector } from './components/Inspector'
+import { Transcript } from './components/Transcript'
 import { NotificationPanel } from './components/NotificationPanel'
-import { ThreadsSidebar } from './components/ThreadsSidebar'
 import { UsagePanel } from './components/UsagePanel'
 import { CanvasView } from './canvas/CanvasView'
 
@@ -15,89 +14,82 @@ export default function App() {
     useWebSocket()
   const { selectedPO, busOpen, notifications, usageData, clearUsageData, currentView } = useStore()
   const selectedPOData = useSelectedPO()
-  const [splitView, setSplitView] = useState(true) // Default to split view
+
+  const objectListResize = useResize({
+    direction: 'horizontal',
+    initialSize: 192,
+    minSize: 120,
+    maxSize: 320,
+  })
+
+  const transcriptResize = useResize({
+    direction: 'vertical',
+    initialSize: 180,
+    minSize: 80,
+    maxSize: 400,
+    inverted: true,
+  })
 
   return (
     <div className="h-screen flex flex-col bg-po-bg">
-      <Header switchLLM={switchLLM} />
+      <SystemBar switchLLM={switchLLM} />
 
-      <div className="flex-1 flex overflow-hidden">
-        {currentView === 'canvas' ? (
-          <CanvasView />
-        ) : (
-          <>
-            {/* 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}
-                      requestUsage={requestUsage}
-                      exportThread={exportThread}
-                    />
-                  </aside>
-                )}
-              </>
-            )}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Main view area */}
+        <div className="flex-1 flex overflow-hidden">
+          {currentView === 'canvas' ? (
+            <CanvasView />
+          ) : (
+            <>
+              {/* Object List - resizable */}
+              <div style={{ width: objectListResize.size }} className="flex-shrink-0">
+                <ObjectList />
+              </div>
 
-            {/* 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>
-              )}
+              {/* Resize handle */}
+              <div
+                className="resize-handle"
+                onMouseDown={objectListResize.onMouseDown}
+              />
 
-              {selectedPO ? (
-                <PODetail
-                  sendMessage={sendMessage}
-                  createSession={createSession}
-                  switchSession={switchSession}
-                  createThread={createThread}
-                  updatePrompt={updatePrompt}
-                />
-              ) : (
-                <Dashboard />
-              )}
-            </main>
-          </>
-        )}
+              {/* Main content */}
+              <main className="flex-1 overflow-hidden flex flex-col">
+                {selectedPO && selectedPOData ? (
+                  <Inspector
+                    po={selectedPOData}
+                    sendMessage={sendMessage}
+                    createSession={createSession}
+                    switchSession={switchSession}
+                    createThread={createThread}
+                    updatePrompt={updatePrompt}
+                    requestUsage={requestUsage}
+                    exportThread={exportThread}
+                  />
+                ) : (
+                  <div className="h-full flex items-center justify-center text-po-text-ghost">
+                    <span className="font-mono text-xs">Select an object</span>
+                  </div>
+                )}
+              </main>
+            </>
+          )}
+        </div>
 
-        {/* Message Bus sidebar */}
+        {/* Transcript - resizable bottom pane, visible in both views */}
         {busOpen && (
-          <aside className="w-80 flex-shrink-0 border-l border-po-border bg-po-surface overflow-hidden">
-            <MessageBus />
-          </aside>
+          <>
+            <div
+              className="resize-handle-h"
+              onMouseDown={transcriptResize.onMouseDown}
+            />
+            <div style={{ height: transcriptResize.size }} className="flex-shrink-0">
+              <Transcript />
+            </div>
+          </>
         )}
       </div>
 
-      {/* Notification panel */}
+      {/* Notification panel - floating */}
       {notifications.length > 0 && (
         <NotificationPanel respondToNotification={respondToNotification} />
       )}

data/frontend/src/canvas/CanvasView.tsx

@@ -83,17 +83,17 @@ export function CanvasView() {
       <div className="absolute top-3 left-3 flex gap-2 z-10">
         <button
           onClick={() => sceneRef.current?.fitAll()}
-          className="px-3 py-1.5 text-sm bg-po-surface/80 backdrop-blur border border-po-border rounded hover:border-po-accent transition-colors text-gray-300 hover:text-white"
+          className="px-2.5 py-1 text-xs bg-po-surface-2/80 backdrop-blur border border-po-border rounded hover:border-po-accent transition-colors duration-150 text-po-text-secondary hover:text-po-text-primary"
           title="Fit all nodes (F)"
         >
           Fit All
         </button>
         <button
           onClick={toggleLabels}
-          className={`px-3 py-1.5 text-sm backdrop-blur border rounded transition-colors ${
+          className={`px-2.5 py-1 text-xs backdrop-blur border rounded transition-colors duration-150 ${
             showLabels
-              ? 'bg-po-accent/20 border-po-accent text-white'
-              : 'bg-po-surface/80 border-po-border text-gray-300 hover:text-white'
+              ? 'bg-po-accent-wash border-po-accent text-po-accent'
+              : 'bg-po-surface-2/80 border-po-border text-po-text-secondary hover:text-po-text-primary'
           }`}
           title="Toggle labels"
         >
@@ -102,7 +102,7 @@ export function CanvasView() {
       </div>
 
       {/* Help hint */}
-      <div className="absolute bottom-3 left-3 text-xs text-gray-500 z-10">
+      <div className="absolute bottom-3 left-3 text-2xs text-po-text-ghost z-10 font-mono">
         Scroll to zoom · Shift+drag to pan · F to fit · Click node to inspect
       </div>
 

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