Skip to content

feat: Agent Orchestration UI#3

Merged
MattMagg merged 4 commits intomainfrom
003-agent-orchestration-ui
Feb 22, 2026
Merged

feat: Agent Orchestration UI#3
MattMagg merged 4 commits intomainfrom
003-agent-orchestration-ui

Conversation

@MattMagg
Copy link
Owner

Agent Orchestration UI

Overview

This PR implements the core orchestration UI features defined in specs/003-agent-orchestration-ui. It upgrades the Claw Dash application from a linear text interface to a robust, orchestration-aware command center capable of tracing tool executions, delegation, deep reasoning, and approval states.

Key Additions

Orchestration Components

  • <SubAgentDelegationBlock>: Visually tracks and scopes recursive agent handoffs.
  • <DeepThoughtBlock>: Formats extended agent reasoning streams in an accordion component.
  • <ToolExecutionCard>: Surfaces tool executions, inputs, and results.
  • <HitlApprovalCard>: Provides interactivity mapping for gateway human-in-the-loop approvals.

Core Logistics & State

  • Introduced ParsedEvent domain models and AST/regex payload mappers inside normalize-content.ts.
  • Refactored the core transcript.tsx message loop to render ParsedEvent arrays.
  • Implemented an ActiveContextPanel to natively derive executing operations and active sub-agents directly from streaming history inputs.

Refactors

  • Removed the standalone session-list pane in favor of a cohesive, slide-out global SessionSidebar navigation architecture.
  • Upgraded empty states and topology panel nodes with premium glassmorphism bounds and unified typography.

## Context
Refactoring the core navigation and dashboard UI to introduce a unified sidebar layout for sessions, eliminating the disjointed `session-list` component. Additionally, enhancing the topology nodes and empty states with premium UI effects and proper typography.

## Changes

### Layout & Navigation
- **`src/app/sessions/layout.tsx`**: Added global session layout with `SessionSidebar` support.
- **`src/components/sessions/session-sidebar.tsx`**: Created sliding/collapsible sidebar for persistent chat switching.
- **`src/app/sessions/page.tsx`**: Updated to match the new sidebar navigation structure.
- **`src/components/sessions/session-list.tsx`** (DELETED): Subsumed by the new sidebar architecture.
- **`src/components/sessions/new-session-dialog.tsx`** (DELETED): Logic integrated directly into the sidebar flow.

### Premium UI Enhancements
- **`src/components/topology/agent-node.tsx` & `cron-node.tsx`**: Enhanced with glassmorphism, responsive hover states, and dynamic status-based visual rings.
- **`src/components/ui/empty-state.tsx`**: Upgraded empty states with premium gradients, subtle scaling animations, and better typographic hierarchy.
- **`src/components/ui/textarea.tsx`**: Integrated standard textarea component for text inputs.
- **`src/app/page.tsx`, `activity/page.tsx`, `system/page.tsx`**: Applied updated page container wrappers for better padding and aesthetic consistency.
- **`src/components/activity/event-card.tsx`**: Styling refinements for event log readability.
- **`src/components/sessions/controls-bar.tsx`**: Refined input controls and gated button styling for the chat interface.
## Context
Implemented the core Agent Orchestration UI to cleanly render complex agent interactions. The UI now intelligently maps raw tRPC gateway messages into specific semantic components (tools, delegations, reasoning, and human-in-the-loop approvals) instead of dumping them as monolithic string blocks.

## Changes

### Core Rendering
- **`src/lib/normalize-content.ts`**: Introduced `ParsedEvent` domain models and regex/AST logic to parse raw `Message` blocks into structured `ParsedEvent` arrays.
- **`src/components/sessions/transcript.tsx`**: Refactored the main message loops to iterate over `ParsedEvent`s, branching gracefully via `EventRenderer`.

### Component Library
- **`src/components/sessions/orchestration/sub-agent-delegation-block.tsx`**: Visually bounds recursive agent handoffs.
- **`src/components/sessions/orchestration/deep-thought-block.tsx`**: Accordions extensive agent reasoning.
- **`src/components/sessions/orchestration/tool-execution-card.tsx`**: Formats functional tool execution arguments and results.
- **`src/components/sessions/orchestration/hitl-approval-card.tsx`**: Prepares interactive UI mapping for gateway human-in-the-loop approval workflows.

### Layout State
- **`src/components/sessions/session-workspace.tsx`**: Embedded the `ActiveContextPanel` to statically derive the currently executing tool or uncompleted delegation event directly from recent transcript streaming data.
- **`src/app/sessions/[key]/page.tsx`**: Refactored data fetching and workspace prop passing to support Active Context states.

## Documentation
- **`specs/003-agent-orchestration-ui.md`**: Spec summary documentation.
- **`specs/003-agent-orchestration-ui/`**: All feature design artifacts (plan, spec, model, tasks).
## Context
Checking in the local agent configuration, skills, rules, MCP settings, and initial design documents for the OpenClaw architecture to ensure environment consistency across development setups.

## Changes

### Tools & Configuration
- ** & **: Checked in skill definitions for crawl, extract, research, and search capabilities.
- ** & **: Additional system rules and agentic instructions for consistent AI interactions.
- ****: Checked in Model Context Protocol configuration for tool server integration.
- ****: Lockfile for maintaining deterministic skill versions.

### Documentation
- ****: Added technical design plan for the OpenClaw fresh installation schema.
Repository owner deleted a comment from chatgpt-codex-connector bot Feb 22, 2026
@MattMagg
Copy link
Owner Author

@codex


Role & Context

You are an expert Next.js, React, and OpenClaw engineer conducting a strict Pull Request review for the 003-agent-orchestration-ui branch.
Your objective is to audit the newly implemented Agent Orchestration UI and accompanying layout refactors against the project specifications and the overarching repository constitution.

Pull Request Background

This PR upgrades the Claw Dash application from a linear text chatbot to an orchestration-aware command center capable of handling specialized payload types (agent delegations, reasoning, tool execution, and human-in-the-loop approvals).
It also introduces a global SessionSidebar layout, removing the old session-list pane.

Raw tRPC string streams are now parsed into typed arrays and dispatched through an EventRenderer inside the transcript. An ActiveContextPanel statically derives the currently running background operations.

Core Implementation Files to Audit

Review the diff of the following source files modified or created in this PR:

  • Parser Logic: src/lib/normalize-content.ts (Verify regex/AST integrity and ParsedEvent type safety)
  • Transcript Router: src/components/sessions/transcript.tsx (Verify mapping logic and fallback boundaries)
  • Active State Handling: src/components/sessions/session-workspace.tsx and src/app/sessions/[key]/page.tsx
  • Orchestration UI Components:
    • src/components/sessions/orchestration/sub-agent-delegation-block.tsx
    • src/components/sessions/orchestration/deep-thought-block.tsx
    • src/components/sessions/orchestration/tool-execution-card.tsx
    • src/components/sessions/orchestration/hitl-approval-card.tsx
  • Navigation Refactor: src/components/sessions/session-sidebar.tsx, src/app/sessions/layout.tsx, src/app/sessions/page.tsx

Review Directives

  1. Specification Alignment: Verify that all 15 tasks mapped in specs/003-agent-orchestration-ui/tasks.md are correctly and fully implemented in the codebase.
  2. Type Safety & Data Handling: Ensure there are no unstable any types or unsafe coercions in normalize-content.ts scaling logic. Ensure the UI relies purely on mapping ParsedEvent and GatewayMessageType rather than brittle string matching.
  3. Architectural Consistency: Flag any architectural drift from the project's App Router and tRPC patterns. Confirm the global layout structural switch (using SessionSidebar) does not break existing mobile usability or routing flows.
  4. Code Quality & Simplicity: Point out any over-engineering. Are the regex blocks in normalize-content.ts optimized and safe against unbounded recursive blowups? Is the derived ActiveContextPanel state excessively re-rendering the workspace?
  5. UI Fidelity: Confirm the specialized components (<DeepThoughtBlock>, <SubAgentDelegationBlock>, <ToolExecutionCard>, etc.) and updated Topology nodes strictly adhere to the project's premium aesthetics (glassmorphism boundaries, lucid icons, clean typography, lack of generic shadows).

Output Format

Please provide a structured PR review outputting immediately actionable feedback. If you find architectural flaws, type safety bugs, or unfinished specification requirements, flag them under a Blocking Issues header. For minor improvements or nitpicks (like CSS refactoring), group them under Suggestions. Finally, append a conclusive Ready for Merge? (Yes/No) verdict.

Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: bdc6cc8657

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@MattMagg MattMagg merged commit 246892c into main Feb 22, 2026
@MattMagg MattMagg deleted the 003-agent-orchestration-ui branch February 22, 2026 19:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant