openclaw - 💡(How to fix) Fix [Feature]: Improve Control UI for Multi-Agent + Subagent Orchestration (Hierarchy, Bulk Ops, and Scalability) [1 participants]

// OrchestrationPanel.js
import React, { useState, useEffect } from 'react';

const OrchestrationPanel = () => {
  const [agents, setAgents] = useState([]);
  const [filteredSessions, setFilteredSessions] = useState([]);

  useEffect(() => {
    // Fetch agents and sessions from API
    fetchAgentsAndSessions();
  }, []);

  const fetchAgentsAndSessions = async () => {
    const response = await fetch('/api/agents');
    const data = await response.json();
    setAgents(data.agents);
  };

  const handleFilterChange = (filter) => {
    // Filter sessions based on the selected filter
    const filteredSessions = agents.flatMap((agent) => agent.sessions).filter((session) => {
      if (filter === 'running') return session.status === 'running';
      if (filter === 'failed') return session.status === 'failed';
      if (filter === 'completed') return session.status === 'completed';
      return true;
    });
    setFilteredSessions(filteredSessions);
  };

  return (
    <div>
      <h2>Orchestration Panel</h2>
      <div>
        <button onClick={() => handleFilterChange('running')}>Running</button>
        <button onClick={() => handleFilterChange('failed')}>Failed</button>
        <button onClick={() => handleFilterChange('completed')}>Completed</button>
      </div>
      <ul>
        {filteredSessions.map((session) => (
          <li key={session.id}>
            <span>{session.name}</span>
            <span>{session.status}</span>
            <span>{session.elapsedTime}</span>
            <span>{session.lastUpdate}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default OrchestrationPanel;

// BulkActions.js
import React from 'react';

const BulkActions = () => {
  const handleBulkAction = (action) => {
    // Perform bulk action on selected sessions
    const selectedSessions = getSelectedSessions();
    if (action === 'kill') {
      // Kill selected sessions
    } else if (action === 'steer') {
      // Steer selected sessions
    }