feat(ui): Action playground config and parameter forms

Signed-off-by: Richard Palethorpe <io@richiejp.com>

Dockerfile.mcpbox

@@ -20,12 +20,10 @@ COPY . .
 RUN CGO_ENABLED=0 GOOS=linux go build -o mcpbox ./cmd/mcpbox
 
 # Final stage
-FROM ubuntu:22.04
+FROM alpine:3.19
-
-ENV DEBIAN_FRONTEND=noninteractive
 
 # Install runtime dependencies
-RUN apt-get update && apt-get install -y ca-certificates tzdata docker.io bash wget curl
+RUN apk add --no-cache ca-certificates tzdata docker
 
 # Create non-root user
 #RUN adduser -D -g '' appuser

Makefile

@@ -11,7 +11,7 @@ cleanup-tests:
 	docker compose down
 
 tests: prepare-tests
-	LOCALAGI_MCPBOX_URL="http://localhost:9090" LOCALAGI_MODEL="qwen3-8b" LOCALAI_API_URL="http://localhost:8081" LOCALAGI_API_URL="http://localhost:8080" $(GOCMD) run github.com/onsi/ginkgo/v2/ginkgo --fail-fast -v -r ./...
+	LOCALAGI_MCPBOX_URL="http://localhost:9090" LOCALAGI_MODEL="gemma-3-12b-it-qat" LOCALAI_API_URL="http://localhost:8081" LOCALAGI_API_URL="http://localhost:8080" $(GOCMD) run github.com/onsi/ginkgo/v2/ginkgo --fail-fast -v -r ./...
 
 run-nokb:
 	$(MAKE) run KBDISABLEINDEX=true

README.md

@@ -69,11 +69,6 @@ Now you can access and manage your agents at [http://localhost:8080](http://loca
 
 Still having issues? see this Youtube video: https://youtu.be/HtVwIxW3ePg
 
-## Videos
-
-[![Creating a basic agent](https://img.youtube.com/vi/HtVwIxW3ePg/mqdefault.jpg)](https://youtu.be/HtVwIxW3ePg)
-[![Agent Observability](https://img.youtube.com/vi/v82rswGJt_M/mqdefault.jpg)](https://youtu.be/v82rswGJt_M)
-
 ## 📚🆕 Local Stack Family
 
 🆕 LocalAI is now part of a comprehensive suite of AI tools designed to work together:
@@ -120,7 +115,7 @@ LocalAGI supports multiple hardware configurations through Docker Compose profil
 - Supports text, multimodal, and image generation models
 - Run with: `docker compose -f docker-compose.nvidia.yaml up`
 - Default models:
-  - Text: `qwen3-8b`
+  - Text: `gemma-3-12b-it-qat`
   - Multimodal: `minicpm-v-2_6`
   - Image: `sd-1.5-ggml`
 - Environment variables:
@@ -136,7 +131,7 @@ LocalAGI supports multiple hardware configurations through Docker Compose profil
 - Supports text, multimodal, and image generation models
 - Run with: `docker compose -f docker-compose.intel.yaml up`
 - Default models:
-  - Text: `qwen3-8b`
+  - Text: `gemma-3-12b-it-qat`
   - Multimodal: `minicpm-v-2_6`
   - Image: `sd-1.5-ggml`
 - Environment variables:
@@ -167,7 +162,7 @@ docker compose -f docker-compose.intel.yaml up
 ```
 
 If no models are specified, it will use the defaults:
-- Text model: `qwen3-8b`
+- Text model: `gemma-3-12b-it-qat`
 - Multimodal model: `minicpm-v-2_6`
 - Image model: `sd-1.5-ggml`
 
@@ -185,6 +180,14 @@ Good (relatively small) models that have been tested are:
 - **✓ Effortless Setup**: Simple Docker compose setups and pre-built binaries.
 - **✓ Feature-Rich**: From planning to multimodal capabilities, connectors for Slack, MCP support, LocalAGI has it all.
 
+## 🌐 The Local Ecosystem
+
+LocalAGI is part of the powerful Local family of privacy-focused AI tools:
+
+- [**LocalAI**](https://github.com/mudler/LocalAI): Run Large Language Models locally.
+- [**LocalRecall**](https://github.com/mudler/LocalRecall): Retrieval-Augmented Generation with local storage.
+- [**LocalAGI**](https://github.com/mudler/LocalAGI): Deploy intelligent AI agents securely and privately.
+
 ## 🌟 Screenshots
 
 ### Powerful Web UI

core/agent/agent.go

@@ -180,12 +180,6 @@ func (a *Agent) Execute(j *types.Job) *types.JobResult {
 	}()
 
 	if j.Obs != nil {
-		if len(j.ConversationHistory) > 0 {
-			m := j.ConversationHistory[len(j.ConversationHistory)-1]
-			j.Obs.Creation = &types.Creation{ ChatCompletionMessage: &m }
-			a.observer.Update(*j.Obs)
-		}
-
 		j.Result.AddFinalizer(func(ccm []openai.ChatCompletionMessage) {
 			j.Obs.Completion = &types.Completion{
 				Conversation: ccm,

core/state/config.go

@@ -253,7 +253,7 @@ func NewAgentConfigMeta(
 				Name:         "enable_reasoning",
 				Label:        "Enable Reasoning",
 				Type:         "checkbox",
-				DefaultValue: true,
+				DefaultValue: false,
 				HelpText:     "Enable agent to explain its reasoning process",
 				Tags:         config.Tags{Section: "AdvancedSettings"},
 			},

core/types/observable.go

@@ -6,7 +6,6 @@ import (
 )
 
 type Creation struct {
-	ChatCompletionMessage *openai.ChatCompletionMessage `json:"chat_completion_message,omitempty"`
 	ChatCompletionRequest *openai.ChatCompletionRequest `json:"chat_completion_request,omitempty"`
 	FunctionDefinition    *openai.FunctionDefinition    `json:"function_definition,omitempty"`
 	FunctionParams        ActionParams                  `json:"function_params,omitempty"`

docker-compose.intel.yaml

@@ -12,16 +12,6 @@ services:
       - /dev/dri/card1
       - /dev/dri/renderD129
 
-  mcpbox:
-    extends:
-      file: docker-compose.yaml
-      service: mcpbox
-
-  dind:
-    extends:
-      file: docker-compose.yaml
-      service: dind
-
   localrecall:
     extends:
       file: docker-compose.yaml

docker-compose.nvidia.yaml

@@ -17,16 +17,6 @@ services:
               count: 1
               capabilities: [gpu]
 
-  mcpbox:
-    extends:
-      file: docker-compose.yaml
-      service: mcpbox
-    
-  dind:
-    extends:
-      file: docker-compose.yaml
-      service: dind
-
   localrecall:
     extends:
       file: docker-compose.yaml

docker-compose.yaml

@@ -7,7 +7,7 @@ services:
     # Image list (dockerhub): https://hub.docker.com/r/localai/localai
     image: localai/localai:master-ffmpeg-core
     command: 
-    - ${MODEL_NAME:-qwen3-8b}
+    - ${MODEL_NAME:-gemma-3-12b-it-qat}
     - ${MULTIMODAL_MODEL:-minicpm-v-2_6}
     - ${IMAGE_MODEL:-sd-1.5-ggml}
     - granite-embedding-107m-multilingual
@@ -54,28 +54,14 @@ services:
       - "8080"
     volumes:
       - ./volumes/mcpbox:/app/data
-    environment:
+      # share docker socket if you want it to be able to run docker commands
-      - DOCKER_HOST=tcp://dind:2375
+      - /var/run/docker.sock:/var/run/docker.sock
-    depends_on:
-      dind:
-        condition: service_healthy
     healthcheck:
       test: ["CMD", "wget", "-q", "-O", "-", "http://localhost:8080/processes"]
       interval: 30s
       timeout: 10s
       retries: 3
 
-  dind:
-    image: docker:dind
-    privileged: true
-    environment:
-      - DOCKER_TLS_CERTDIR=""
-    healthcheck:
-      test: ["CMD", "docker", "info"]
-      interval: 10s
-      timeout: 5s
-      retries: 3
-
   localagi:
     depends_on:
       localai:
@@ -91,7 +77,7 @@ services:
       - 8080:3000
     #image: quay.io/mudler/localagi:master
     environment:
-      - LOCALAGI_MODEL=${MODEL_NAME:-qwen3-8b}
+      - LOCALAGI_MODEL=${MODEL_NAME:-gemma-3-12b-it-qat}
       - LOCALAGI_MULTIMODAL_MODEL=${MULTIMODAL_MODEL:-minicpm-v-2_6}
       - LOCALAGI_IMAGE_MODEL=${IMAGE_MODEL:-sd-1.5-ggml}
       - LOCALAGI_LLM_API_URL=http://localai:8080

main.go

@@ -66,7 +66,6 @@ func main() {
 		localRAG,
 		services.Actions(map[string]string{
 			"browser-agent-runner-base-url": localOperatorBaseURL,
-			"deep-research-runner-base-url": localOperatorBaseURL,
 		}),
 		services.Connectors,
 		services.DynamicPrompts,

pkg/localoperator/client.go

@@ -4,146 +4,69 @@ import (
 	"bytes"
 	"encoding/json"
 	"fmt"
-	"io"
 	"net/http"
-	"time"
 )
 
+// Client represents a client for interacting with the LocalOperator API
 type Client struct {
 	baseURL    string
 	httpClient *http.Client
 }
 
-func NewClient(baseURL string, timeout ...time.Duration) *Client {
+// NewClient creates a new API client
-	defaultTimeout := 30 * time.Second
+func NewClient(baseURL string) *Client {
-	if len(timeout) > 0 {
-		defaultTimeout = timeout[0]
-	}
-
 	return &Client{
 		baseURL:    baseURL,
-		httpClient: &http.Client{
+		httpClient: &http.Client{},
-			Timeout: defaultTimeout,
-		},
 	}
 }
 
+// AgentRequest represents the request body for running an agent
 type AgentRequest struct {
 	Goal                string `json:"goal"`
 	MaxAttempts         int    `json:"max_attempts,omitempty"`
 	MaxNoActionAttempts int    `json:"max_no_action_attempts,omitempty"`
 }
 
-type DesktopAgentRequest struct {
+// StateDescription represents a single state in the agent's history
-	AgentRequest
-	DesktopURL string `json:"desktop_url"`
-}
-
-type DeepResearchRequest struct {
-	Topic               string `json:"topic"`
-	MaxCycles           int    `json:"max_cycles,omitempty"`
-	MaxNoActionAttempts int    `json:"max_no_action_attempts,omitempty"`
-	MaxResults          int    `json:"max_results,omitempty"`
-}
-
-// Response types
 type StateDescription struct {
 	CurrentURL             string `json:"current_url"`
 	PageTitle              string `json:"page_title"`
 	PageContentDescription string `json:"page_content_description"`
 	Screenshot             string `json:"screenshot"`
-	ScreenshotMimeType     string `json:"screenshot_mime_type"`
+	ScreenshotMimeType     string `json:"screenshot_mime_type"` // MIME type of the screenshot (e.g., "image/png")
 }
 
+// StateHistory represents the complete history of states during agent execution
 type StateHistory struct {
 	States []StateDescription `json:"states"`
 }
 
-type DesktopStateDescription struct {
+// RunAgent sends a request to run an agent with the given goal
-	ScreenContent  string `json:"screen_content"`
-	ScreenshotPath string `json:"screenshot_path"`
-}
-
-type DesktopStateHistory struct {
-	States []DesktopStateDescription `json:"states"`
-}
-
-type SearchResult struct {
-	Title       string `json:"title"`
-	URL         string `json:"url"`
-	Description string `json:"description"`
-}
-
-type ResearchResult struct {
-	Topic          string         `json:"topic"`
-	Summary        string         `json:"summary"`
-	Sources        []SearchResult `json:"sources"`
-	KnowledgeGaps  []string       `json:"knowledge_gaps"`
-	SearchQueries  []string       `json:"search_queries"`
-	ResearchCycles int            `json:"research_cycles"`
-	CompletionTime time.Duration  `json:"completion_time"`
-}
-
 func (c *Client) RunBrowserAgent(req AgentRequest) (*StateHistory, error) {
-	return post[*StateHistory](c.httpClient, c.baseURL+"/api/browser/run", req)
+	body, err := json.Marshal(req)
-}
-
-func (c *Client) RunDesktopAgent(req DesktopAgentRequest) (*DesktopStateHistory, error) {
-	return post[*DesktopStateHistory](c.httpClient, c.baseURL+"/api/desktop/run", req)
-}
-
-func (c *Client) RunDeepResearch(req DeepResearchRequest) (*ResearchResult, error) {
-	return post[*ResearchResult](c.httpClient, c.baseURL+"/api/deep-research/run", req)
-}
-
-func (c *Client) Readyz() (string, error) {
-	return c.get("/readyz")
-}
-
-func (c *Client) Healthz() (string, error) {
-	return c.get("/healthz")
-}
-
-func (c *Client) get(path string) (string, error) {
-	resp, err := c.httpClient.Get(c.baseURL + path)
 	if err != nil {
-		return "", fmt.Errorf("failed to make request: %w", err)
+		return nil, fmt.Errorf("failed to marshal request: %w", err)
+	}
+
+	resp, err := c.httpClient.Post(
+		fmt.Sprintf("%s/api/browser/run", c.baseURL),
+		"application/json",
+		bytes.NewBuffer(body),
+	)
+	if err != nil {
+		return nil, fmt.Errorf("failed to send request: %w", err)
 	}
 	defer resp.Body.Close()
 
 	if resp.StatusCode != http.StatusOK {
-		body, _ := io.ReadAll(resp.Body)
+		return nil, fmt.Errorf("unexpected status code: %d", resp.StatusCode)
-		return "", fmt.Errorf("unexpected status code: %d, body: %s", resp.StatusCode, string(body))
 	}
 
-	return resp.Status, nil
+	var state StateHistory
-}
+	if err := json.NewDecoder(resp.Body).Decode(&state); err != nil {
-
+		return nil, fmt.Errorf("failed to decode response: %w", err)
-func post[T any](client *http.Client, url string, body interface{}) (T, error) {
+	}
-	var result T
+
-	jsonBody, err := json.Marshal(body)
+	return &state, nil
-	if err != nil {
-		return result, fmt.Errorf("failed to marshal request body: %w", err)
-	}
-
-	fmt.Println("Sending request", "url", url, "body", string(jsonBody))
-
-	resp, err := client.Post(url, "application/json", bytes.NewBuffer(jsonBody))
-	if err != nil {
-		return result, fmt.Errorf("failed to make request: %w", err)
-	}
-	defer resp.Body.Close()
-
-	fmt.Println("Response", "status", resp.StatusCode)
-
-	if resp.StatusCode != http.StatusOK {
-		body, _ := io.ReadAll(resp.Body)
-		return result, fmt.Errorf("unexpected status code: %d, body: %s", resp.StatusCode, string(body))
-	}
-
-	if err := json.NewDecoder(resp.Body).Decode(&result); err != nil {
-		return result, fmt.Errorf("failed to decode response: %w", err)
-	}
-
-	return result, nil
 }

services/actions.go

@@ -19,7 +19,6 @@ const (
 	ActionSearch                         = "search"
 	ActionCustom                         = "custom"
 	ActionBrowserAgentRunner             = "browser-agent-runner"
-	ActionDeepResearchRunner             = "deep-research-runner"
 	ActionGithubIssueLabeler             = "github-issue-labeler"
 	ActionGithubIssueOpener              = "github-issue-opener"
 	ActionGithubIssueCloser              = "github-issue-closer"
@@ -55,7 +54,6 @@ var AvailableActions = []string{
 	ActionGithubRepositoryGet,
 	ActionGithubGetAllContent,
 	ActionBrowserAgentRunner,
-	ActionDeepResearchRunner,
 	ActionGithubRepositoryCreateOrUpdate,
 	ActionGithubIssueReader,
 	ActionGithubIssueCommenter,
@@ -123,8 +121,6 @@ func Action(name, agentName string, config map[string]string, pool *state.AgentP
 		a = actions.NewGithubIssueSearch(config)
 	case ActionBrowserAgentRunner:
 		a = actions.NewBrowserAgentRunner(config, actionsConfigs["browser-agent-runner-base-url"])
-	case ActionDeepResearchRunner:
-		a = actions.NewDeepResearchRunner(config, actionsConfigs["deep-research-runner-base-url"])
 	case ActionGithubIssueReader:
 		a = actions.NewGithubIssueReader(config)
 	case ActionGithubPRReader:
@@ -185,11 +181,6 @@ func ActionsConfigMeta() []config.FieldGroup {
 			Label:  "Browser Agent Runner",
 			Fields: actions.BrowserAgentRunnerConfigMeta(),
 		},
-		{
-			Name:   "deep-research-runner",
-			Label:  "Deep Research Runner",
-			Fields: actions.DeepResearchRunnerConfigMeta(),
-		},
 		{
 			Name:   "generate_image",
 			Label:  "Generate Image",

services/actions/browseragentrunner.go

@@ -3,7 +3,6 @@ package actions
 import (
 	"context"
 	"fmt"
-	"time"
 
 	"github.com/mudler/LocalAGI/core/types"
 	"github.com/mudler/LocalAGI/pkg/config"
@@ -25,7 +24,7 @@ func NewBrowserAgentRunner(config map[string]string, defaultURL string) *Browser
 		config["baseURL"] = defaultURL
 	}
 
-	client := api.NewClient(config["baseURL"], 15*time.Minute)
+	client := api.NewClient(config["baseURL"])
 
 	return &BrowserAgentRunner{
 		client:           client,

services/actions/deepresearchrunner.go

@@ -1,130 +0,0 @@
-package actions
-
-import (
-	"context"
-	"fmt"
-	"time"
-
-	"github.com/mudler/LocalAGI/core/types"
-	"github.com/mudler/LocalAGI/pkg/config"
-	api "github.com/mudler/LocalAGI/pkg/localoperator"
-	"github.com/sashabaranov/go-openai/jsonschema"
-)
-
-const (
-	MetadataDeepResearchResult = "deep_research_result"
-)
-
-type DeepResearchRunner struct {
-	baseURL, customActionName string
-	client                    *api.Client
-}
-
-func NewDeepResearchRunner(config map[string]string, defaultURL string) *DeepResearchRunner {
-	if config["baseURL"] == "" {
-		config["baseURL"] = defaultURL
-	}
-
-	client := api.NewClient(config["baseURL"], 15*time.Minute)
-
-	return &DeepResearchRunner{
-		client:           client,
-		baseURL:          config["baseURL"],
-		customActionName: config["customActionName"],
-	}
-}
-
-func (d *DeepResearchRunner) Run(ctx context.Context, params types.ActionParams) (types.ActionResult, error) {
-	result := api.DeepResearchRequest{}
-	err := params.Unmarshal(&result)
-	if err != nil {
-		return types.ActionResult{}, fmt.Errorf("failed to unmarshal params: %w", err)
-	}
-
-	req := api.DeepResearchRequest{
-		Topic:               result.Topic,
-		MaxCycles:           result.MaxCycles,
-		MaxNoActionAttempts: result.MaxNoActionAttempts,
-		MaxResults:          result.MaxResults,
-	}
-
-	researchResult, err := d.client.RunDeepResearch(req)
-	if err != nil {
-		return types.ActionResult{}, fmt.Errorf("failed to run deep research: %w", err)
-	}
-
-	// Format the research result into a readable string
-	var resultStr string
-
-	resultStr += "Deep research result\n"
-	resultStr += fmt.Sprintf("Topic: %s\n", researchResult.Topic)
-	resultStr += fmt.Sprintf("Summary: %s\n", researchResult.Summary)
-	resultStr += fmt.Sprintf("Research Cycles: %d\n", researchResult.ResearchCycles)
-	resultStr += fmt.Sprintf("Completion Time: %s\n\n", researchResult.CompletionTime)
-
-	if len(researchResult.Sources) > 0 {
-		resultStr += "Sources:\n"
-		for _, source := range researchResult.Sources {
-			resultStr += fmt.Sprintf("- %s (%s)\n  %s\n", source.Title, source.URL, source.Description)
-		}
-	}
-
-	return types.ActionResult{
-		Result:   fmt.Sprintf("Deep research completed successfully.\n%s", resultStr),
-		Metadata: map[string]interface{}{MetadataDeepResearchResult: researchResult},
-	}, nil
-}
-
-func (d *DeepResearchRunner) Definition() types.ActionDefinition {
-	actionName := "run_deep_research"
-	if d.customActionName != "" {
-		actionName = d.customActionName
-	}
-	description := "Run a deep research on a specific topic, gathering information from multiple sources and providing a comprehensive summary"
-	return types.ActionDefinition{
-		Name:        types.ActionDefinitionName(actionName),
-		Description: description,
-		Properties: map[string]jsonschema.Definition{
-			"topic": {
-				Type:        jsonschema.String,
-				Description: "The topic to research",
-			},
-			"max_cycles": {
-				Type:        jsonschema.Number,
-				Description: "Maximum number of research cycles to perform (optional)",
-			},
-			"max_no_action_attempts": {
-				Type:        jsonschema.Number,
-				Description: "Maximum number of attempts without taking an action (optional)",
-			},
-			"max_results": {
-				Type:        jsonschema.Number,
-				Description: "Maximum number of results to collect (optional)",
-			},
-		},
-		Required: []string{"topic"},
-	}
-}
-
-func (d *DeepResearchRunner) Plannable() bool {
-	return true
-}
-
-// DeepResearchRunnerConfigMeta returns the metadata for Deep Research Runner action configuration fields
-func DeepResearchRunnerConfigMeta() []config.Field {
-	return []config.Field{
-		{
-			Name:     "baseURL",
-			Label:    "Base URL",
-			Type:     config.FieldTypeText,
-			Required: false,
-			HelpText: "Base URL of the LocalOperator API",
-		},
-		{
-			Name:     "customActionName",
-			Label:    "Custom Action Name",
-			Type:     config.FieldTypeText,
-			HelpText: "Custom name for this action",
-		},
-	}
-}

services/connectors/discord.go

@@ -30,15 +30,9 @@ func NewDiscord(config map[string]string) *Discord {
 		duration = 5 * time.Minute
 	}
 
-	token := config["token"]
-
-	if !strings.HasPrefix(token, "Bot ") {
-		token = "Bot " + token
-	}
-
 	return &Discord{
 		conversationTracker: NewConversationTracker[string](duration),
-		token:               token,
+		token:               config["token"],
 		defaultChannel:      config["defaultChannel"],
 	}
 }

webui/react-ui/src/components/CollapsibleRawSections.jsx

@@ -1,103 +0,0 @@
-import React, { useState } from 'react';
-import hljs from 'highlight.js/lib/core';
-import json from 'highlight.js/lib/languages/json';
-import 'highlight.js/styles/monokai.css';
-
-hljs.registerLanguage('json', json);
-
-export default function CollapsibleRawSections({ container }) {
-  const [showCreation, setShowCreation] = useState(false);
-  const [showProgress, setShowProgress] = useState(false);
-  const [showCompletion, setShowCompletion] = useState(false);
-  const [copied, setCopied] = useState({ creation: false, progress: false, completion: false });
-
-  const handleCopy = (section, data) => {
-    navigator.clipboard.writeText(JSON.stringify(data, null, 2));
-    setCopied(prev => ({ ...prev, [section]: true }));
-    setTimeout(() => setCopied(prev => ({ ...prev, [section]: false })), 1200);
-  };
-
-  return (
-    <div>
-      {/* Creation Section */}
-      {container.creation && (
-        <div>
-          <h4 style={{ display: 'flex', alignItems: 'center' }}>
-            <span
-              style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', flex: 1 }}
-              onClick={() => setShowCreation(v => !v)}
-            >
-              <i className={`fas fa-chevron-${showCreation ? 'down' : 'right'}`} style={{ marginRight: 6 }} />
-              Creation
-            </span>
-            <button
-              title="Copy Creation JSON"
-              onClick={e => { e.stopPropagation(); handleCopy('creation', container.creation); }}
-              style={{ marginLeft: 8, border: 'none', background: 'none', cursor: 'pointer', color: '#ccc' }}
-            >
-              {copied.creation ? <span style={{ color: '#6f6' }}>Copied!</span> : <i className="fas fa-copy" />}
-            </button>
-          </h4>
-          {showCreation && (
-            <pre className="hljs"><code>
-              <div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(container.creation || {}, null, 2), { language: 'json' }).value }} />
-            </code></pre>
-          )}
-        </div>
-      )}
-      {/* Progress Section */}
-      {container.progress && container.progress.length > 0 && (
-        <div>
-          <h4 style={{ display: 'flex', alignItems: 'center' }}>
-            <span
-              style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', flex: 1 }}
-              onClick={() => setShowProgress(v => !v)}
-            >
-              <i className={`fas fa-chevron-${showProgress ? 'down' : 'right'}`} style={{ marginRight: 6 }} />
-              Progress
-            </span>
-            <button
-              title="Copy Progress JSON"
-              onClick={e => { e.stopPropagation(); handleCopy('progress', container.progress); }}
-              style={{ marginLeft: 8, border: 'none', background: 'none', cursor: 'pointer', color: '#ccc' }}
-            >
-              {copied.progress ? <span style={{ color: '#6f6' }}>Copied!</span> : <i className="fas fa-copy" />}
-            </button>
-          </h4>
-          {showProgress && (
-            <pre className="hljs"><code>
-              <div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(container.progress || {}, null, 2), { language: 'json' }).value }} />
-            </code></pre>
-          )}
-        </div>
-      )}
-      {/* Completion Section */}
-      {container.completion && (
-        <div>
-          <h4 style={{ display: 'flex', alignItems: 'center' }}>
-            <span
-              style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', flex: 1 }}
-              onClick={() => setShowCompletion(v => !v)}
-            >
-              <i className={`fas fa-chevron-${showCompletion ? 'down' : 'right'}`} style={{ marginRight: 6 }} />
-              Completion
-            </span>
-            <button
-              title="Copy Completion JSON"
-              onClick={e => { e.stopPropagation(); handleCopy('completion', container.completion); }}
-              style={{ marginLeft: 8, border: 'none', background: 'none', cursor: 'pointer', color: '#ccc' }}
-            >
-              {copied.completion ? <span style={{ color: '#6f6' }}>Copied!</span> : <i className="fas fa-copy" />}
-            </button>
-          </h4>
-          {showCompletion && (
-            <pre className="hljs"><code>
-              <div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(container.completion || {}, null, 2), { language: 'json' }).value }} />
-            </code></pre>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-

webui/react-ui/src/pages/AgentStatus.jsx

@@ -1,181 +1,4 @@
 import { useState, useEffect } from 'react';
-import CollapsibleRawSections from '../components/CollapsibleRawSections';
-
-function ObservableSummary({ observable }) {
-  // --- CREATION SUMMARIES ---
-  const creation = observable?.creation || {};
-  // ChatCompletionRequest summary
-  let creationChatMsg = '';
-  // Prefer chat_completion_message if present (for jobs/top-level containers)
-  if (creation?.chat_completion_message && creation.chat_completion_message.content) {
-    creationChatMsg = creation.chat_completion_message.content;
-  } else {
-    const messages = creation?.chat_completion_request?.messages;
-    if (Array.isArray(messages) && messages.length > 0) {
-      const lastMsg = messages[messages.length - 1];
-      creationChatMsg = lastMsg?.content || '';
-    }
-  }
-  // FunctionDefinition summary
-  let creationFunctionDef = '';
-  if (creation?.function_definition?.name) {
-    creationFunctionDef = `Function: ${creation.function_definition.name}`;
-  }
-  // FunctionParams summary
-  let creationFunctionParams = '';
-  if (creation?.function_params && Object.keys(creation.function_params).length > 0) {
-    creationFunctionParams = `Params: ${JSON.stringify(creation.function_params)}`;
-  }
-
-  // --- COMPLETION SUMMARIES ---
-  const completion = observable?.completion || {};
-  // ChatCompletionResponse summary
-  let completionChatMsg = '';
-  const chatCompletion = completion?.chat_completion_response;
-  if (
-    chatCompletion &&
-    Array.isArray(chatCompletion.choices) &&
-    chatCompletion.choices.length > 0
-  ) {
-    const lastChoice = chatCompletion.choices[chatCompletion.choices.length - 1];
-    // Prefer tool_call summary if present
-    let toolCallSummary = '';
-    const toolCalls = lastChoice?.message?.tool_calls;
-    if (Array.isArray(toolCalls) && toolCalls.length > 0) {
-      toolCallSummary = toolCalls.map(tc => {
-        let args = '';
-        // For OpenAI-style, arguments are in tc.function.arguments, function name in tc.function.name
-        if (tc.function && tc.function.arguments) {
-          try {
-            args = typeof tc.function.arguments === 'string' ? tc.function.arguments : JSON.stringify(tc.function.arguments);
-          } catch (e) {
-            args = '[Unserializable arguments]';
-          }
-        }
-        const toolName = tc.function?.name || tc.name || 'unknown';
-        return `Tool call: ${toolName}(${args})`;
-      }).join('\n');
-    }
-    completionChatMsg = lastChoice?.message?.content || '';
-    // Attach toolCallSummary to completionChatMsg for rendering
-    if (toolCallSummary) {
-      completionChatMsg = { toolCallSummary, message: completionChatMsg };
-    }
-    // Else, it's just a string
-
-  }
-  // Conversation summary
-  let completionConversation = '';
-  if (Array.isArray(completion?.conversation) && completion.conversation.length > 0) {
-    const lastConv = completion.conversation[completion.conversation.length - 1];
-    completionConversation = lastConv?.content ? `${lastConv.content}` : '';
-  }
-  // ActionResult summary
-  let completionActionResult = '';
-  if (completion?.action_result) {
-    completionActionResult = `Action Result: ${String(completion.action_result).slice(0, 100)}`;
-  }
-  // AgentState summary
-  let completionAgentState = '';
-  if (completion?.agent_state) {
-    completionAgentState = `Agent State: ${JSON.stringify(completion.agent_state)}`;
-  }
-  // Error summary
-  let completionError = '';
-  if (completion?.error) {
-    completionError = `Error: ${completion.error}`;
-  }
-
-  // Only show if any summary is present
-  if (!creationChatMsg && !creationFunctionDef && !creationFunctionParams &&
-      !completionChatMsg && !completionConversation && !completionActionResult && !completionAgentState && !completionError) {
-    return null;
-  }
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 2, margin: '2px 0 0 0' }}>
-      {/* CREATION */}
-      {creationChatMsg && (
-        <div title={creationChatMsg} style={{ display: 'flex', alignItems: 'center', color: '#cfc', fontSize: 14 }}>
-          <i className="fas fa-comment-dots" style={{ marginRight: 6, flex: '0 0 auto' }}></i>
-          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>{creationChatMsg}</span>
-        </div>
-      )}
-      {creationFunctionDef && (
-        <div title={creationFunctionDef} style={{ display: 'flex', alignItems: 'center', color: '#cfc', fontSize: 14 }}>
-          <i className="fas fa-code" style={{ marginRight: 6, flex: '0 0 auto' }}></i>
-          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>{creationFunctionDef}</span>
-        </div>
-      )}
-      {creationFunctionParams && (
-        <div title={creationFunctionParams} style={{ display: 'flex', alignItems: 'center', color: '#fc9', fontSize: 14 }}>
-          <i className="fas fa-sliders-h" style={{ marginRight: 6, flex: '0 0 auto' }}></i>
-          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>{creationFunctionParams}</span>
-        </div>
-      )}
-      {/* COMPLETION */}
-      {/* COMPLETION: Tool call summary if present */}
-      {completionChatMsg && typeof completionChatMsg === 'object' && completionChatMsg.toolCallSummary && (
-        <div
-          title={completionChatMsg.toolCallSummary}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            color: '#ffd966', // Distinct color for tool calls
-            fontSize: 14,
-            marginTop: 2,
-            whiteSpace: 'pre-line',
-            wordBreak: 'break-all',
-          }}
-        >
-          <i className="fas fa-tools" style={{ marginRight: 6, flex: '0 0 auto' }}></i>
-          <span style={{ whiteSpace: 'pre-line', display: 'block' }}>{completionChatMsg.toolCallSummary}</span>
-        </div>
-      )}
-      {/* COMPLETION: Message content if present */}
-      {completionChatMsg && ((typeof completionChatMsg === 'object' && completionChatMsg.message) || typeof completionChatMsg === 'string') && (
-        <div
-          title={typeof completionChatMsg === 'object' ? completionChatMsg.message : completionChatMsg}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            color: '#8fc7ff',
-            fontSize: 14,
-            marginTop: 2,
-          }}
-        >
-          <i className="fas fa-robot" style={{ marginRight: 6, flex: '0 0 auto' }}></i>
-          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>{typeof completionChatMsg === 'object' ? completionChatMsg.message : completionChatMsg}</span>
-        </div>
-      )}
-      {completionConversation && (
-        <div title={completionConversation} style={{ display: 'flex', alignItems: 'center', color: '#b8e2ff', fontSize: 14 }}>
-          <i className="fas fa-comments" style={{ marginRight: 6, flex: '0 0 auto' }}></i>
-          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>{completionConversation}</span>
-        </div>
-      )}
-      {completionActionResult && (
-        <div title={completionActionResult} style={{ display: 'flex', alignItems: 'center', color: '#ffd700', fontSize: 14 }}>
-          <i className="fas fa-bolt" style={{ marginRight: 6, flex: '0 0 auto' }}></i>
-          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>{completionActionResult}</span>
-        </div>
-      )}
-      {completionAgentState && (
-        <div title={completionAgentState} style={{ display: 'flex', alignItems: 'center', color: '#ffb8b8', fontSize: 14 }}>
-          <i className="fas fa-brain" style={{ marginRight: 6, flex: '0 0 auto' }}></i>
-          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>{completionAgentState}</span>
-        </div>
-      )}
-      {completionError && (
-        <div title={completionError} style={{ display: 'flex', alignItems: 'center', color: '#f66', fontSize: 14 }}>
-          <i className="fas fa-exclamation-triangle" style={{ marginRight: 6, flex: '0 0 auto' }}></i>
-          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>{completionError}</span>
-        </div>
-      )}
-    </div>
-  );
-}
-
 import { useParams, Link } from 'react-router-dom';
 import hljs from 'highlight.js/lib/core';
 import json from 'highlight.js/lib/languages/json';
@@ -184,7 +7,7 @@ import 'highlight.js/styles/monokai.css';
 hljs.registerLanguage('json', json);
 
 function AgentStatus() {
-  const [showStatus, setShowStatus] = useState(false);
+  const [showStatus, setShowStatus] = useState(true);
   const { name } = useParams();
   const [statusData, setStatusData] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -271,16 +94,17 @@ function AgentStatus() {
       setObservableMap(prevMap => {
         const prev = prevMap[data.id] || {};
         const updated = {
-          ...data,
           ...prev,
+          ...data,
+          creation: data.creation,
+          progress: data.progress,
+          completion: data.completion,
         };
         // Events can be received out of order
         if (data.creation)
           updated.creation = data.creation;
         if (data.completion)
           updated.completion = data.completion;
-        if ((data.progress?.length ?? 0) > (prev.progress?.length ?? 0))
-          updated.progress = data.progress;
         if (data.parent_id && !prevMap[data.parent_id])
           prevMap[data.parent_id] = {
             id: data.parent_id,
@@ -428,17 +252,12 @@ function AgentStatus() {
                           setExpandedCards(new Map(expandedCards).set(container.id, newExpanded));
                         }}
                       >
-                        <div style={{ display: 'flex', gap: '10px', alignItems: 'center', maxWidth: '90%' }}>
+                        <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
   <i className={`fas fa-${container.icon || 'robot'}`} style={{ verticalAlign: '-0.125em' }}></i>
-                          <span style={{ width: '100%' }}>
-                            <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
   <span>
     <span className='stat-label'>{container.name}</span>#<span className='stat-label'>{container.id}</span>
   </span>
-                              <ObservableSummary observable={container} />
+</div>
-                            </div>
-                          </span>
-                        </div>
                         <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                           <i
                             className={`fas fa-chevron-${expandedCards.get(container.id) ? 'up' : 'down'}`}
@@ -460,23 +279,18 @@ function AgentStatus() {
                               const isExpanded = expandedCards.get(childKey);
                               return (
                                 <div key={`${container.id}-child-${child.id}`} className='card' style={{ background: '#222', marginBottom: '0.5em' }}>
-                                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'hand', maxWidth: '100%' }}
+                                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer' }}
                                     onClick={() => {
                                       const newExpanded = !expandedCards.get(childKey);
                                       setExpandedCards(new Map(expandedCards).set(childKey, newExpanded));
                                     }}
                                   >
-                                    <div style={{ display: 'flex', maxWidth: '90%', gap: '10px', alignItems: 'center' }}>
+                                    <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
   <i className={`fas fa-${child.icon || 'robot'}`} style={{ verticalAlign: '-0.125em' }}></i>
-                                      <span style={{ width: '100%' }}>
-                                        <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
   <span>
     <span className='stat-label'>{child.name}</span>#<span className='stat-label'>{child.id}</span>
   </span>
-                                          <ObservableSummary observable={child} />
+</div>
-                                        </div>
-                                      </span>
-                                    </div>
                                     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                       <i
                                         className={`fas fa-chevron-${isExpanded ? 'up' : 'down'}`}
@@ -489,14 +303,60 @@ function AgentStatus() {
                                     </div>
                                   </div>
                                   <div style={{ display: isExpanded ? 'block' : 'none' }}>
-                                    <CollapsibleRawSections container={child} />
+                                    {child.creation && (
+                                      <div>
+                                        <h5>Creation:</h5>
+                                        <pre className="hljs"><code>
+                                          <div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(child.creation || {}, null, 2), { language: 'json' }).value }}></div>
+                                        </code></pre>
+                                      </div>
+                                    )}
+                                    {child.progress && child.progress.length > 0 && (
+                                      <div>
+                                        <h5>Progress:</h5>
+                                        <pre className="hljs"><code>
+                                          <div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(child.progress || {}, null, 2), { language: 'json' }).value }}></div>
+                                        </code></pre>
+                                      </div>
+                                    )}
+                                    {child.completion && (
+                                      <div>
+                                        <h5>Completion:</h5>
+                                        <pre className="hljs"><code>
+                                          <div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(child.completion || {}, null, 2), { language: 'json' }).value }}></div>
+                                        </code></pre>
+                                      </div>
+                                    )}
                                   </div>
                                 </div>
                               );
                             })}
                           </div>
                         )}
-                        <CollapsibleRawSections container={container} />
+                        {container.creation && (
+                          <div>
+                            <h4>Creation:</h4>
+                            <pre className="hljs"><code>
+                              <div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(container.creation || {}, null, 2), { language: 'json' }).value }}></div>
+                            </code></pre>
+                          </div>
+                        )}
+                        {container.progress && container.progress.length > 0 && (
+                          <div>
+                            <h4>Progress:</h4>
+                            <pre className="hljs"><code>
+                              <div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(container.progress || {}, null, 2), { language: 'json' }).value }}></div>
+                            </code></pre>
+                          </div>
+                        )}
+                        {container.completion && (
+                          <div>
+                            <h4>Completion:</h4>
+                            <pre className="hljs"><code>
+                              <div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(container.completion || {}, null, 2), { language: 'json' }).value }}></div>
+                            </code></pre>
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>