Styles in Css, zustand subscribe, colors, add ul, Spinner while running

playground/react/.eslintrc.cjs

@@ -1,21 +1,22 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
-  rules: {
-    'react/jsx-no-target-blank': 'off',
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
     ],
-  },
-}
+    ignorePatterns: ["dist", ".eslintrc.cjs"],
+    parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+    settings: { react: { version: "18.2" } },
+    plugins: ["react-refresh"],
+    rules: {
+        "react/jsx-no-target-blank": "off",
+        "react/prop-types": "off",
+        "react-refresh/only-export-components": [
+            "warn",
+            { allowConstantExport: true },
+        ],
+    },
+};

playground/react/src/App.jsx

@@ -1,13 +1,13 @@
-import AgentsBoardDebugger from './AgentsBoardDebugger';
+import AgentsBoardDebugger from "./components/AgentDebbuger/AgentsBoardDebugger";
 import team from './teams/openai/productSpecsTeam';
+import "./index.css";
 
 function App() {
-  return (
-    <>
-      <h1>AgenticJS Playground</h1>
-      <AgentsBoardDebugger team={team}/>
-    </>
-  )
+    return (
+        <div className="mainContent">
+            <AgentsBoardDebugger team={team} />
+        </div>
+    );
 }
 
-export default App
+export default App;

playground/react/src/components/AgentDebbuger/AgentsBoardDebugger.jsx

@@ -0,0 +1,197 @@
+import { useEffect, useState } from "react";
+import Spinner from "../Spinner/Spinner";
+import "./appDebuggerStyles.css";
+
+const AgentsBoardDebugger = ({ team }) => {
+    const useTeamStore = team.useStore();
+    const {
+        agents,
+        tasks,
+        workflowLogs,
+        teamWorkflowStatus,
+        workflowResult,
+        inputs,
+        setInputs,
+    } = useTeamStore((state) => ({
+        agents: state.agents,
+        tasks: state.tasks,
+        workflowLogs: state.workflowLogs,
+        teamWorkflowStatus: state.teamWorkflowStatus,
+        workflowResult: state.workflowResult,
+        inputs: state.inputs,
+        setInputs: state.setInputs,
+    }));
+
+    const [statusLog, setStatusLog] = useState([teamWorkflowStatus]);
+
+    useEffect(() => {
+        const unsub = useTeamStore.subscribe((state, previusState) => {
+            if (state.teamWorkflowStatus !== previusState.teamWorkflowStatus)
+                setStatusLog((prevLog) => [
+                    ...prevLog,
+                    state.teamWorkflowStatus,
+                ]);
+        });
+
+        return unsub;
+    }, []);
+
+    const startTeam = () => {
+        try {
+            team.start(inputs);
+        } catch (error) {
+            console.error("Invalid JSON input:", error);
+        }
+    };
+
+    return (
+        <div>
+            <h1 className="title">Agents Team Debugger</h1>
+            <div className="inputSection">
+                <h2 className="sectionTitle">Team Inputs</h2>
+                <div>
+                    <textarea
+                        value={JSON.stringify(inputs, null, 2)}
+                        onChange={(e) => setInputs(JSON.parse(e.target.value))}
+                        placeholder="Enter JSON input"
+                        className="inputTextarea"
+                    />
+                </div>
+
+                <div className="actionWrapper">
+                    <button onClick={startTeam} className="actionButton">
+                        Start Workflow
+                    </button>
+
+                    {teamWorkflowStatus === "running_workflow" && <Spinner />}
+                </div>
+            </div>
+
+            <div className="section">
+                <h2 className="sectionTitle">🕵️‍♂️ Agents</h2>
+                <ul>
+                    {agents.map((agent) => (
+                        <li key={agent.id} className="listItem agentName">
+                            <span>
+                                {agent.name} - {agent.role}
+                            </span>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+            <div className="section">
+                <h2 className="sectionTitle">📝 Tasks</h2>
+                <ul>
+                    {tasks.map((task) => (
+                        <li key={task.id} className="listItem">
+                            <div className="taskContainer">
+                                <span className="taskDescription">
+                                    {task.description}
+                                </span>
+                                <span className="taskStatus">
+                                    {task.status}{" "}
+                                    {task.status === "doing" && (
+                                        <Spinner color="white" />
+                                    )}
+                                </span>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+            <div className="section">
+                <h2 className="sectionTitle">
+                    🔄 Team Workflow Status Changes
+                </h2>
+
+                <ul>
+                    {statusLog.map((status, index) => (
+                        <li key={index} className="listItem">
+                            Status: {status}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+            <div className="section">
+                <h2 className="sectionTitle">📋 Task Logs</h2>
+
+                {workflowLogs.length > 0 ? (
+                    <ul>
+                        {workflowLogs.map((log) => (
+                            <li
+                                key={
+                                    log.task.id +
+                                    log.task.status +
+                                    log.agent.name
+                                }
+                                className="listItem"
+                            >
+                                ({log.task.status}) - timestamp: {log.timestamp}{" "}
+                                - {log.agent.name} - {log.task.description}
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    <div className="noAvailableData">
+                        <span>Not yet available</span>
+                    </div>
+                )}
+            </div>
+            <div className="section">
+                <h2 className="sectionTitle">Workflow Result</h2>
+                <div>
+                    {workflowResult ? (
+                        workflowResult
+                    ) : (
+                        <div className="noAvailableData">
+                            <span>Not yet available</span>
+                        </div>
+                    )}
+                </div>
+            </div>
+            <div className="section">
+                <h2 className="sectionTitle">📊 Task Results</h2>
+
+                <ul>
+                    {tasks.map((task) => (
+                        <li
+                            key={task.id}
+                            className="listItem taskResult_Container last_child"
+                        >
+                            <div>
+                                <strong className="subtitle">Task:</strong>
+                                <span> {task.description} </span>
+                            </div>
+
+                            <div>
+                                <strong className="subtitle">Time:</strong>
+                                <span>
+                                    {" "}
+                                    {task.duration
+                                        ? `${task.duration} seconds`
+                                        : "Not yet available"}
+                                </span>
+                            </div>
+
+                            <div className="taskResult_response">
+                                <p>
+                                    <strong className="subtitle">
+                                        Result:
+                                    </strong>
+                                </p>
+
+                                <p>
+                                    {task.result
+                                        ? task.result
+                                        : "Not yet available"}
+                                </p>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default AgentsBoardDebugger;