prompt_objects 0.4.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 92cf8b8492d42dee0adb37a4fb41692e6b228ab7a364f9176444c60cd81eb63d
-  data.tar.gz: 45e8828d53f7b9c4893fb6374535bbb099c77e92371a3e111bda07d9e35db93e
+  metadata.gz: 1e9bb13a5f2b407279723343fe43ce570119e64a3fe2a115e4f427d195ec7040
+  data.tar.gz: fc1300754c1774ec388928752b84dd8a60286659904b8b72053fde457842ea71
 SHA512:
-  metadata.gz: 123244bee715f744b7b377bbf4e2912ed28cbb966ce6b92bb7d43a5ea053bf2460e7bb10c35acf09ab5f4cfa8f0afeeb78198be62acfbde44b86f3c5f0559deb
-  data.tar.gz: 15ee859102e87e971df1e38b756d776a0f913148554974fc2fe9ae79b12853cf9028793aadfaabb92aa1d74961739c97a51c258c0e9e2a38cbf77fb5f931b46d
+  metadata.gz: 56e4a427b43b49fc7520f9268a3e31c4a81d39c50ad0329985ab9d678631a2a88c41d070a7e13d97c01e2328de56e917d59b2b06c078fef9174a5a7fdc5db87b
+  data.tar.gz: a6bb7914d1b58c8c445deae870c2a06c004b9e7604b72107574f89c7ea9da2b8172034c358078b920d52b57eefe24acb68668d7057f16e61ed2e62ee2a85ca95

data/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 All notable changes to PromptObjects are documented in this file.
 
+## [0.6.0] - 2026-02-17
+
+### Added
+
+- **Shared environment data** — 5 new universal capabilities (`store_env_data`, `get_env_data`, `list_env_data`, `update_env_data`, `delete_env_data`) provide a thread-scoped key-value store for delegation chains. Data is scoped to the root thread so separate conversations stay isolated. Entries include a `short_description` for lightweight LLM discovery without fetching full values.
+- **Live environment data pane** — New collapsible pane in the Inspector shows shared env data updating in real-time as POs store and modify entries during delegation chains. WebSocket broadcasting (`env_data_changed`, `env_data_list`), a REST endpoint (`GET /api/sessions/:id/env_data`), and env data rendering in the Thread Explorer.
+- **Delegation context** — POs now receive context about their delegation chain. An expanded system prompt teaches POs about their nature, a delegation preamble prepends caller context to delegated messages, and the full delegation chain is built from thread lineage.
+- **Capability guard** — `execute_tool_calls` now rejects tools not in a PO's allowed set (declared capabilities + universals). Previously the LLM could hallucinate calls to any registered tool and they would execute. Now it receives an error directing it to use `add_capability` first.
+- **Env data in thread exports** — `serialize_tree_for_export` includes env data entries at the root level of exported thread trees. Thread Explorer renders these in an amber-colored section.
+
+### Fixed
+
+- **Root font-size causing undersized text** — Removed a `font-size: 14px` on the root `html` element that made all rem-based Tailwind sizes ~12% smaller than intended (e.g. `text-xs` computed to 10.5px instead of 12px).
+- **Invisible resize handle boundaries** — Added border styling to horizontal and vertical resize handles so pane boundaries are visible without hovering.
+- **Stale MCP tools tests** — Fixed test expectations broken by PO serialization centralization in 0.5.0.
+
+## [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 `docs/archive/` 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 (Falcon + async-websocket) - serves React frontend
+└── MCP SERVER - exposes POs as tools via Model Context Protocol
 ```
 
 ### Unified Capability Interface
@@ -53,56 +57,121 @@ 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
+- `store_env_data` / `get_env_data` / `list_env_data` / `update_env_data` / `delete_env_data` - thread-scoped shared key-value store for delegation chains
 
-## 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`)
+- **Falcon** - async HTTP server for REST API and static file serving
+- **async-websocket** - real-time WebSocket communication
+- **React + TypeScript** - web frontend (Smalltalk System Browser-inspired multi-pane UI)
+- **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/             # SystemBar, ObjectList, Inspector, Workspace, Transcript
+│       ├── 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

@@ -27,8 +27,86 @@ A Ruby framework where:
 - **Markdown files** define autonomous entities (Prompt Objects)
 - **YAML frontmatter** declares capabilities and configuration
 - **Markdown body** becomes identity and behavior (the system prompt)
-- **Capabilities** are shared between primitives (Ruby) and Prompt Objects (markdown)
-- **Environments** isolate collections of objects with their own memory
+- **Capabilities** are shared between primitives (Ruby) and Prompt Objects (markdown) -- everything is a capability
+- **Environments** isolate collections of objects with their own memory, git history, and configuration
+- **PO-to-PO delegation** lets objects call each other through isolated threads with full provenance tracking
+
+### Prompt Object structure
+
+```markdown
+---
+name: reader
+description: Helps people understand files
+capabilities:
+  - read_file
+  - list_files
+---
+
+# Reader
+## Identity
+You are a careful, thoughtful file reader...
+```
+
+### Web UI
+
+The web interface is modeled after the Smalltalk System Browser -- a multi-pane environment for inspecting and interacting with live objects:
+
+- **ObjectList** -- permanent left pane listing all POs in the environment
+- **Inspector** -- split into a MethodList (capabilities) and SourcePane (the prompt markdown or capability source)
+- **Workspace** -- a REPL-style chat pane for sending messages to the selected PO
+- **Transcript** -- bottom pane showing message bus events in real time
+
+All panels are resizable. The inspector's top pane collapses so the Workspace can fill the full height when you just want to talk.
+
+### Spatial Canvas
+
+Navigate to `/canvas` for a Three.js 2D visualization of your environment. POs appear as glowing hexagonal nodes in a force-directed layout. Tool calls show as diamonds. Message arcs animate with traveling particles. Delegation lights up the target PO with a cyan glow. Click any node to inspect it. Keyboard shortcuts: F to fit, Escape to deselect.
+
+### MCP Server mode
+
+Run any environment as an MCP (Model Context Protocol) server for integration with Claude Desktop, Cursor, or any MCP-compatible client:
+
+```bash
+prompt_objects serve my-assistant --mcp
+```
+
+Add to your `claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "my-assistant": {
+      "command": "prompt_objects",
+      "args": ["serve", "--mcp", "my-assistant"]
+    }
+  }
+}
+```
+
+Exposes tools for sending messages, listing POs, inspecting state, getting conversations, and responding to pending `ask_human` requests.
+
+### Multi-provider LLM support
+
+Swap providers with an environment variable. Adapters for:
+
+- **OpenAI** -- GPT-5.2, GPT-4.1, o3-mini, o1
+- **Anthropic** -- Claude Haiku 4.5, Claude Sonnet 4.5, Claude Opus 4
+- **Gemini** -- Gemini 3 Flash, Gemini 2.5 Pro, Gemini 2.5 Flash
+- **Ollama** -- any locally installed model, discovered automatically
+- **OpenRouter** -- access any model through a single API key
+
+### Thread Explorer
+
+A standalone HTML visualizer for exported conversation threads. Open it from the CLI to browse delegation chains, message flow, and tool call sequences:
+
+```bash
+prompt_objects explore my-env
+prompt_objects explore my-env --session abc123
+```
+
+### Note on the TUI
+
+A terminal UI (built with Charm libraries) exists in the codebase but is deprioritized. The web UI is the primary interface for day-to-day use.
 
 How
 ===
@@ -49,25 +127,73 @@ prompt_objects env create my-project --template basic
 prompt_objects serve my-project --open
 ```
 
-### Environment Commands
+### Commands
 
-```bash
-prompt_objects env list              # List all environments
-prompt_objects env create <name>     # Create new environment
-prompt_objects env info <name>       # Show environment details
-prompt_objects env clone <src> <dst> # Clone an environment
+```
+prompt_objects serve <env>                  Start web server (default)
+prompt_objects serve <env> --open           Start and open browser
+prompt_objects serve <env> --mcp            Start as MCP server
+prompt_objects serve <env> --port 4000      Custom port (default: 3000)
+
+prompt_objects repl [name] [objects_dir]    Interactive REPL with a prompt object
+prompt_objects repl --sandbox               REPL in sandbox mode (isolates changes)
+
+prompt_objects message <env> <po> "text"    Send a message and print the response
+prompt_objects message <env> <po> "text" --json     JSON output
+prompt_objects message <env> <po> "text" --events   Include event log
+
+prompt_objects events <env>                 Show recent message bus events
+prompt_objects events <env> --session ID    Events for a specific session
+prompt_objects events <env> --json          JSON output
+
+prompt_objects explore [env]                Open Thread Explorer in browser
+prompt_objects explore <env> --session ID   Visualize a specific thread
+```
+
+### Environment management
+
+```
+prompt_objects env list                     List all environments
+prompt_objects env create <name>            Create new environment
+prompt_objects env create <name> -t <tmpl>  Create from template
+prompt_objects env info <name>              Show environment details
+prompt_objects env clone <src> <dst>        Clone an environment
+prompt_objects env export <name>            Export as .poenv bundle
+prompt_objects env import <file.poenv>      Import from bundle
+prompt_objects env archive <name>           Soft-delete (archive)
+prompt_objects env restore <name>           Restore archived environment
+prompt_objects env delete <name> --permanent  Permanently delete archived env
+prompt_objects env default <name>           Set the default environment
 ```
 
 ### Templates
 
-- `basic` - No capabilities, learns as needed (great for demos)
-- `minimal` - Basic assistant with file reading
-- `developer` - Code review, debugging, testing specialists
-- `writer` - Editor, researcher for content creation
+Create an environment from a template with `prompt_objects env create <name> --template <template>`:
+
+| Template | Description |
+|---|---|
+| `basic` | No capabilities, learns as needed -- great for demos |
+| `minimal` | Basic assistant with file reading |
+| `developer` | Code review, debugging, testing specialists |
+| `writer` | Editor, researcher for content creation |
+| `empty` | Start from scratch with just a bootstrap assistant |
+| `arc-agi-1` | ARC-AGI-1 challenge solver with grid primitives |
 
 Extras
 ======
 
-- **License**: MIT
-- **Ruby**: >= 3.2.0
+### Community
+
+Join the [Discord](https://discord.gg/fcMvcwdrZS) for support, discussion, and updates.
+
+### 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
+- [As complexity grows, architecture](https://worksonmymachine.ai/p/as-complexity-grows-architecture) -- on why the hard problems are structural, not generative
+
+### Links
+
 - **Repository**: https://github.com/works-on-your-machine/prompt_objects
+- **Changelog**: https://github.com/works-on-your-machine/prompt_objects/blob/main/CHANGELOG.md
+- **License**: MIT
+- **Ruby**: >= 3.2.0 (tested through Ruby 4)

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,103 +1,96 @@
-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'
 
 export default function App() {
-  const { sendMessage, respondToNotification, createSession, switchSession, switchLLM, createThread, updatePrompt, requestUsage, exportThread } =
+  const { sendMessage, respondToNotification, createSession, switchSession, switchLLM, createThread, updatePrompt, requestUsage, exportThread, requestEnvData } =
     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}
+                    requestEnvData={requestEnvData}
+                  />
+                ) : (
+                  <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>