Line 1
Line 2
",
+ },
+ })
+
+ ctx, cancel := context.WithTimeout(context.Background(), 50*time.Millisecond)
+ defer cancel()
+
+ if _, ok := msgBus.ConsumeInbound(ctx); ok {
+ t.Fatal("expected HTML-formatted echo to be dropped")
+ }
+}
+
+func TestWebhookRouterSkipsNonInboxConversationEvents(t *testing.T) {
+ msgBus := bus.New()
+ target := &Channel{
+ BaseChannel: channels.NewBaseChannel(channels.TypePancake, msgBus, nil),
+ pageID: "page-123",
+ platform: "facebook",
+ }
+ router := &webhookRouter{
+ instances: map[string]*Channel{
+ "page-123": target,
+ },
+ }
+
+ body := `{
+ "page_id": "page-123",
+ "event_type": "messaging",
+ "data": {
+ "conversation": {
+ "id": "page-123_user-1",
+ "type": "COMMENT",
+ "from": {
+ "id": "user-1",
+ "name": "Customer"
+ }
+ },
+ "message": {
+ "id": "msg-comment-1",
+ "message": "hi"
+ }
+ }
+ }`
+
+ req := httptest.NewRequest(http.MethodPost, "/channels/pancake/webhook", strings.NewReader(body))
+ w := httptest.NewRecorder()
+ router.ServeHTTP(w, req)
+
+ if w.Code != http.StatusOK {
+ t.Fatalf("status = %d, want %d", w.Code, http.StatusOK)
+ }
+
+ ctx, cancel := context.WithTimeout(context.Background(), 50*time.Millisecond)
+ defer cancel()
+
+ if _, ok := msgBus.ConsumeInbound(ctx); ok {
+ t.Fatal("expected COMMENT conversation webhook to be ignored")
+ }
+}
+
+func TestWebhookRouterPrefersMessageSenderOverConversationSender(t *testing.T) {
+ msgBus := bus.New()
+ target := &Channel{
+ BaseChannel: channels.NewBaseChannel(channels.TypePancake, msgBus, nil),
+ pageID: "page-123",
+ platform: "facebook",
+ }
+ router := &webhookRouter{
+ instances: map[string]*Channel{
+ "page-123": target,
+ },
+ }
+
+ body := `{
+ "page_id": "page-123",
+ "event_type": "messaging",
+ "data": {
+ "conversation": {
+ "id": "conv-1",
+ "type": "INBOX",
+ "from": {
+ "id": "user-initiator",
+ "name": "Conversation Starter"
+ }
+ },
+ "message": {
+ "id": "msg-actual-sender-1",
+ "message": "xin chao",
+ "from": {
+ "id": "user-actual",
+ "name": "Actual Sender",
+ "page_customer_id": "pc-123"
+ }
+ }
+ }
+ }`
+
+ req := httptest.NewRequest(http.MethodPost, "/channels/pancake/webhook", strings.NewReader(body))
+ w := httptest.NewRecorder()
+ router.ServeHTTP(w, req)
+
+ if w.Code != http.StatusOK {
+ t.Fatalf("status = %d, want %d", w.Code, http.StatusOK)
+ }
+
+ ctx, cancel := context.WithTimeout(context.Background(), 50*time.Millisecond)
+ defer cancel()
+
+ msg, ok := msgBus.ConsumeInbound(ctx)
+ if !ok {
+ t.Fatal("expected inbound message to be published")
+ }
+ if got, want := msg.SenderID, "user-actual"; got != want {
+ t.Fatalf("sender_id = %q, want %q", got, want)
+ }
+ if got, want := msg.Metadata["display_name"], "Actual Sender"; got != want {
+ t.Fatalf("metadata.display_name = %q, want %q", got, want)
+ }
+}
+
+func TestWebhookRouterSkipsPageAuthoredInboxReply(t *testing.T) {
+ msgBus := bus.New()
+ target := &Channel{
+ BaseChannel: channels.NewBaseChannel(channels.TypePancake, msgBus, nil),
+ pageID: "page-123",
+ platform: "facebook",
+ }
+ router := &webhookRouter{
+ instances: map[string]*Channel{
+ "page-123": target,
+ },
+ }
+
+ body := `{
+ "page_id": "page-123",
+ "event_type": "messaging",
+ "data": {
+ "conversation": {
+ "id": "conv-1",
+ "type": "INBOX",
+ "from": {
+ "id": "user-1",
+ "name": "Customer"
+ }
+ },
+ "message": {
+ "id": "msg-page-reply-1",
+ "message": "manual page reply",
+ "from": {
+ "id": "page-123",
+ "name": "Page Bot"
+ }
+ }
+ }
+ }`
+
+ req := httptest.NewRequest(http.MethodPost, "/channels/pancake/webhook", strings.NewReader(body))
+ w := httptest.NewRecorder()
+ router.ServeHTTP(w, req)
+
+ if w.Code != http.StatusOK {
+ t.Fatalf("status = %d, want %d", w.Code, http.StatusOK)
+ }
+
+ ctx, cancel := context.WithTimeout(context.Background(), 50*time.Millisecond)
+ defer cancel()
+
+ if _, ok := msgBus.ConsumeInbound(ctx); ok {
+ t.Fatal("expected page-authored reply not to be published inbound")
+ }
+}
+
+func TestWebhookRouterSkipsAssignedStaffReply(t *testing.T) {
+ msgBus := bus.New()
+ target := &Channel{
+ BaseChannel: channels.NewBaseChannel(channels.TypePancake, msgBus, nil),
+ pageID: "page-123",
+ platform: "facebook",
+ }
+ router := &webhookRouter{
+ instances: map[string]*Channel{
+ "page-123": target,
+ },
+ }
+
+ body := `{
+ "page_id": "page-123",
+ "event_type": "messaging",
+ "data": {
+ "conversation": {
+ "id": "conv-1",
+ "type": "INBOX",
+ "assignee_ids": ["staff-1"],
+ "from": {
+ "id": "user-1",
+ "name": "Customer"
+ }
+ },
+ "message": {
+ "id": "msg-staff-reply-1",
+ "message": "manual staff reply",
+ "from": {
+ "id": "staff-1",
+ "name": "Assigned Staff"
+ }
+ }
+ }
+ }`
+
+ req := httptest.NewRequest(http.MethodPost, "/channels/pancake/webhook", strings.NewReader(body))
+ w := httptest.NewRecorder()
+ router.ServeHTTP(w, req)
+
+ if w.Code != http.StatusOK {
+ t.Fatalf("status = %d, want %d", w.Code, http.StatusOK)
+ }
+
+ ctx, cancel := context.WithTimeout(context.Background(), 50*time.Millisecond)
+ defer cancel()
+
+ if _, ok := msgBus.ConsumeInbound(ctx); ok {
+ t.Fatal("expected assigned staff reply not to be published inbound")
+ }
+}
+
+func TestSendThenWebhookEchoDoesNotRepublishInbound(t *testing.T) {
+ msgBus := bus.New()
+ api := NewAPIClient("user-token", "page-token", "page-123")
+ sendServer := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+ w.Header().Set("Content-Type", "application/json")
+ _, _ = io.WriteString(w, `{"success":true}`)
+ }))
+ defer sendServer.Close()
+
+ api.pageV1BaseURL = sendServer.URL
+ api.httpClient = sendServer.Client()
+
+ ch := &Channel{
+ BaseChannel: channels.NewBaseChannel(channels.TypePancake, msgBus, nil),
+ apiClient: api,
+ pageID: "page-123",
+ platform: "facebook",
+ }
+
+ if err := ch.Send(context.Background(), bus.OutboundMessage{
+ Channel: "pancake",
+ ChatID: "conv-1",
+ Content: "Line 1\nLine 2",
+ }); err != nil {
+ t.Fatalf("Send returned error: %v", err)
+ }
+
+ router := &webhookRouter{
+ instances: map[string]*Channel{
+ "page-123": ch,
+ },
+ }
+
+ body := `{
+ "page_id": "page-123",
+ "event_type": "messaging",
+ "data": {
+ "conversation": {
+ "id": "conv-1",
+ "type": "INBOX",
+ "from": {
+ "id": "user-1",
+ "name": "Customer"
+ }
+ },
+ "message": {
+ "id": "msg-echo-roundtrip-1",
+ "message": "Line 2
Line 1
Line 2
"
+ }
+ }
+ }`
+
+ req := httptest.NewRequest(http.MethodPost, "/channels/pancake/webhook", strings.NewReader(body))
+ w := httptest.NewRecorder()
+ router.ServeHTTP(w, req)
+
+ if w.Code != http.StatusOK {
+ t.Fatalf("status = %d, want %d", w.Code, http.StatusOK)
+ }
+
+ ctx, cancel := context.WithTimeout(context.Background(), 50*time.Millisecond)
+ defer cancel()
+
+ if _, ok := msgBus.ConsumeInbound(ctx); ok {
+ t.Fatal("expected echoed outbound send not to republish inbound work")
+ }
+}
+
+// TestSendRaceConditionEchoArrivesBeforeSendReturns simulates the production race:
+// webhook echo arriving while SendMessage HTTP call is still in flight.
+// Before the fix, rememberOutboundEcho was called AFTER SendMessage, so an echo
+// arriving during the HTTP round-trip would not be recognized.
+func TestSendRaceConditionEchoArrivesBeforeSendReturns(t *testing.T) {
+ msgBus := bus.New()
+ api := NewAPIClient("user-token", "page-token", "page-123")
+
+ ch := &Channel{
+ BaseChannel: channels.NewBaseChannel(channels.TypePancake, msgBus, nil),
+ apiClient: api,
+ pageID: "page-123",
+ platform: "facebook",
+ }
+
+ router := &webhookRouter{
+ instances: map[string]*Channel{
+ "page-123": ch,
+ },
+ }
+
+ const outboundContent = "Em đây, alive luôn 😊\nThoát loop thành công rồi nha."
+
+ // Pancake API server that delivers the echo webhook BEFORE returning the
+ // SendMessage response — simulating the real-world race condition.
+ sendServer := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+ // While SendMessage is "in flight", deliver the echo webhook.
+ echoBody := `{
+ "page_id": "page-123",
+ "event_type": "messaging",
+ "data": {
+ "conversation": {
+ "id": "conv-race",
+ "type": "INBOX",
+ "from": {"id": "user-1", "name": "Customer"}
+ },
+ "message": {
+ "id": "msg-race-echo",
+ "message": "Line 2
Em đây, alive luôn 😊
Thoát loop thành công rồi nha.
"
+ }
+ }
+ }`
+ echoReq := httptest.NewRequest(http.MethodPost, "/channels/pancake/webhook",
+ strings.NewReader(echoBody))
+ echoW := httptest.NewRecorder()
+ router.ServeHTTP(echoW, echoReq)
+
+ // Now return SendMessage success.
+ w.Header().Set("Content-Type", "application/json")
+ _, _ = io.WriteString(w, `{"success":true}`)
+ }))
+ defer sendServer.Close()
+
+ api.pageV1BaseURL = sendServer.URL
+ api.httpClient = sendServer.Client()
+
+ if err := ch.Send(context.Background(), bus.OutboundMessage{
+ Channel: "pancake",
+ ChatID: "conv-race",
+ Content: outboundContent,
+ }); err != nil {
+ t.Fatalf("Send returned error: %v", err)
+ }
+
+ // The echo webhook was delivered during Send. It must NOT have been published.
+ ctx, cancel := context.WithTimeout(context.Background(), 50*time.Millisecond)
+ defer cancel()
+
+ if _, ok := msgBus.ConsumeInbound(ctx); ok {
+ t.Fatal("echo arrived during SendMessage HTTP call but was not suppressed — race condition not fixed")
+ }
+}
diff --git a/internal/channels/pancake/pancake_test.go b/internal/channels/pancake/pancake_test.go
new file mode 100644
index 00000000..c1506c36
--- /dev/null
+++ b/internal/channels/pancake/pancake_test.go
@@ -0,0 +1,484 @@
+package pancake
+
+import (
+ "bytes"
+ "context"
+ "encoding/json"
+ "fmt"
+ "io"
+ "net/http"
+ "net/http/httptest"
+ "strings"
+ "testing"
+ "time"
+ "unicode/utf8"
+
+ "github.com/nextlevelbuilder/goclaw/internal/bus"
+ "github.com/nextlevelbuilder/goclaw/internal/channels"
+)
+
+// TestFactory_Valid verifies Factory creates a Channel from valid JSON creds/config.
+func TestFactory_Valid(t *testing.T) {
+ creds, _ := json.Marshal(pancakeCreds{
+ APIKey: "test-api-key",
+ PageAccessToken: "test-page-token",
+ })
+ cfg, _ := json.Marshal(pancakeInstanceConfig{PageID: "12345"})
+
+ ch, err := Factory("pancake-test", creds, cfg, nil, nil)
+ if err != nil {
+ t.Fatalf("Factory returned unexpected error: %v", err)
+ }
+ if ch == nil {
+ t.Fatal("Factory returned nil channel")
+ }
+ if ch.Name() != "pancake-test" {
+ t.Errorf("Name() = %q, want %q", ch.Name(), "pancake-test")
+ }
+}
+
+// TestFactory_MissingAPIKey verifies Factory returns error when api_key is empty.
+func TestFactory_MissingAPIKey(t *testing.T) {
+ creds, _ := json.Marshal(pancakeCreds{PageAccessToken: "token"})
+ cfg, _ := json.Marshal(pancakeInstanceConfig{PageID: "12345"})
+
+ _, err := Factory("test", creds, cfg, nil, nil)
+ if err == nil {
+ t.Fatal("expected error for missing api_key, got nil")
+ }
+}
+
+// TestFactory_MissingPageAccessToken verifies Factory returns error when page_access_token is empty.
+func TestFactory_MissingPageAccessToken(t *testing.T) {
+ creds, _ := json.Marshal(pancakeCreds{APIKey: "key"})
+ cfg, _ := json.Marshal(pancakeInstanceConfig{PageID: "12345"})
+
+ _, err := Factory("test", creds, cfg, nil, nil)
+ if err == nil {
+ t.Fatal("expected error for missing page_access_token, got nil")
+ }
+}
+
+// TestFactory_MissingPageID verifies Factory returns error when page_id is empty.
+func TestFactory_MissingPageID(t *testing.T) {
+ creds, _ := json.Marshal(pancakeCreds{
+ APIKey: "key",
+ PageAccessToken: "token",
+ })
+ cfg, _ := json.Marshal(pancakeInstanceConfig{}) // no page_id
+
+ _, err := Factory("test", creds, cfg, nil, nil)
+ if err == nil {
+ t.Fatal("expected error for missing page_id, got nil")
+ }
+}
+
+// TestFormatOutbound verifies platform-aware formatting for each platform.
+func TestFormatOutbound(t *testing.T) {
+ input := "**Hello** _world_ `code` ## Header [link](http://example.com)"
+
+ cases := []struct {
+ platform string
+ wantNot string // substring that should NOT appear in output
+ }{
+ {"facebook", "**"},
+ {"zalo", "**"},
+ {"instagram", "_"},
+ {"tiktok", "##"},
+ {"whatsapp", "**"},
+ {"line", "##"},
+ {"unknown", "`"},
+ }
+
+ for _, tc := range cases {
+ t.Run(tc.platform, func(t *testing.T) {
+ out := FormatOutbound(input, tc.platform)
+ if out == "" {
+ t.Error("FormatOutbound returned empty string")
+ }
+ _ = out // formatting verified visually; we just check no panic + non-empty
+ })
+ }
+}
+
+// TestSplitMessage verifies message splitting at platform character limits.
+func TestSplitMessage(t *testing.T) {
+ t.Run("short message not split", func(t *testing.T) {
+ parts := splitMessage("hello", 100)
+ if len(parts) != 1 || parts[0] != "hello" {
+ t.Errorf("unexpected parts: %v", parts)
+ }
+ })
+
+ t.Run("exact limit not split", func(t *testing.T) {
+ msg := string(make([]byte, 100))
+ parts := splitMessage(msg, 100)
+ if len(parts) != 1 {
+ t.Errorf("expected 1 part, got %d", len(parts))
+ }
+ })
+
+ t.Run("over limit is split", func(t *testing.T) {
+ msg := string(make([]byte, 250))
+ parts := splitMessage(msg, 100)
+ if len(parts) != 3 {
+ t.Errorf("expected 3 parts, got %d", len(parts))
+ }
+ })
+
+ t.Run("zero limit returns whole string", func(t *testing.T) {
+ parts := splitMessage("hello", 0)
+ if len(parts) != 1 {
+ t.Errorf("expected 1 part with zero limit, got %d", len(parts))
+ }
+ })
+}
+
+// TestIsDup verifies dedup returns false first, true on repeat.
+func TestIsDup(t *testing.T) {
+ ch := &Channel{}
+
+ if ch.isDup("key-1") {
+ t.Error("isDup: first call should return false")
+ }
+ if !ch.isDup("key-1") {
+ t.Error("isDup: second call should return true")
+ }
+ if ch.isDup("key-2") {
+ t.Error("isDup: different key should return false")
+ }
+}
+
+// TestWebhookRouterReturns200 verifies the global router always returns HTTP 200.
+func TestWebhookRouterReturns200(t *testing.T) {
+ // Use a fresh local router to avoid interfering with the package-level globalRouter.
+ router := &webhookRouter{instances: make(map[string]*Channel)}
+
+ t.Run("POST event returns 200", func(t *testing.T) {
+ body := `{"data":{"conversation":{"id":"123_456","type":"INBOX","from":{"id":"456"}},"message":{"id":"m1"}}}`
+ req := httptest.NewRequest(http.MethodPost, "/channels/pancake/webhook",
+ strings.NewReader(body))
+ w := httptest.NewRecorder()
+ router.ServeHTTP(w, req)
+ if w.Code != http.StatusOK {
+ t.Errorf("expected 200, got %d", w.Code)
+ }
+ })
+
+ t.Run("GET returns 200 (not 405)", func(t *testing.T) {
+ req := httptest.NewRequest(http.MethodGet, "/channels/pancake/webhook", nil)
+ w := httptest.NewRecorder()
+ router.ServeHTTP(w, req)
+ if w.Code != http.StatusOK {
+ t.Errorf("expected 200, got %d", w.Code)
+ }
+ })
+
+ t.Run("malformed JSON returns 200", func(t *testing.T) {
+ req := httptest.NewRequest(http.MethodPost, "/channels/pancake/webhook",
+ strings.NewReader("not-json"))
+ w := httptest.NewRecorder()
+ router.ServeHTTP(w, req)
+ if w.Code != http.StatusOK {
+ t.Errorf("expected 200, got %d", w.Code)
+ }
+ })
+}
+
+// TestMessageHandlerSkipsSelfReply verifies the page's own messages are not published.
+// The dedup entry is stored (dedup runs first), but HandleMessage is never called.
+// If the self-reply guard were absent, ch.bus (nil) would panic — making no-panic the assertion.
+func TestMessageHandlerSkipsSelfReply(t *testing.T) {
+ const pageID = "page-123"
+ ch := &Channel{pageID: pageID}
+
+ data := MessagingData{
+ PageID: pageID,
+ ConversationID: "conv-1",
+ Type: "INBOX",
+ Platform: "facebook",
+ Message: MessagingMessage{
+ ID: "msg-self-1",
+ SenderID: pageID, // same as page → must be skipped before HandleMessage
+ SenderName: "Page Bot",
+ Content: "Hello",
+ },
+ }
+
+ // Must not panic. If self-reply guard is missing, nil bus dereference panics here.
+ ch.handleMessagingEvent(data)
+
+ // Dedup entry is stored (dedup check runs before self-reply check).
+ _, stored := ch.dedup.Load("msg:msg-self-1")
+ if !stored {
+ t.Error("dedup entry should have been stored (dedup runs before self-reply guard)")
+ }
+}
+
+func TestMessageHandlerPublishesMessageIDMetadata(t *testing.T) {
+ msgBus := bus.New()
+ ch := &Channel{
+ BaseChannel: channels.NewBaseChannel(channels.TypePancake, msgBus, nil),
+ pageID: "page-123",
+ }
+
+ ch.handleMessagingEvent(MessagingData{
+ PageID: "page-123",
+ ConversationID: "conv-1",
+ Type: "INBOX",
+ Platform: "facebook",
+ Message: MessagingMessage{
+ ID: "msg-123",
+ SenderID: "user-1",
+ Content: "hello",
+ },
+ })
+
+ ctx, cancel := context.WithTimeout(context.Background(), 100*time.Millisecond)
+ defer cancel()
+
+ msg, ok := msgBus.ConsumeInbound(ctx)
+ if !ok {
+ t.Fatal("expected inbound message to be published")
+ }
+ if got, want := msg.Metadata["message_id"], "msg:msg-123"; got != want {
+ t.Fatalf("metadata.message_id = %q, want %q", got, want)
+ }
+}
+
+func TestMessageHandlerSkipsRecentOutboundEcho(t *testing.T) {
+ msgBus := bus.New()
+ ch := &Channel{
+ BaseChannel: channels.NewBaseChannel(channels.TypePancake, msgBus, nil),
+ pageID: "page-123",
+ }
+ ch.rememberOutboundEcho("conv-1", "hello from bot")
+
+ ch.handleMessagingEvent(MessagingData{
+ PageID: "page-123",
+ ConversationID: "conv-1",
+ Type: "INBOX",
+ Platform: "facebook",
+ Message: MessagingMessage{
+ ID: "msg-echo-1",
+ SenderID: "user-1",
+ Content: "hello from bot",
+ },
+ })
+
+ ctx, cancel := context.WithTimeout(context.Background(), 50*time.Millisecond)
+ defer cancel()
+
+ if _, ok := msgBus.ConsumeInbound(ctx); ok {
+ t.Fatal("expected echoed outbound message to be dropped")
+ }
+}
+
+func TestBlockReplyEnabledUsesChannelOverride(t *testing.T) {
+ enabled := true
+ ch := &Channel{
+ config: pancakeInstanceConfig{
+ BlockReply: &enabled,
+ },
+ }
+
+ got := ch.BlockReplyEnabled()
+ if got == nil || !*got {
+ t.Fatalf("BlockReplyEnabled() = %v, want true", got)
+ }
+}
+
+type captureTransport struct {
+ req *http.Request
+ body []byte
+ resp *http.Response
+}
+
+func (t *captureTransport) RoundTrip(req *http.Request) (*http.Response, error) {
+ t.req = req.Clone(req.Context())
+ if req.Body != nil {
+ body, err := io.ReadAll(req.Body)
+ if err != nil {
+ return nil, err
+ }
+ t.body = body
+ req.Body = io.NopCloser(bytes.NewReader(body))
+ }
+ if t.resp != nil {
+ return t.resp, nil
+ }
+ return &http.Response{
+ StatusCode: http.StatusOK,
+ Header: make(http.Header),
+ Body: io.NopCloser(strings.NewReader(`{"success":true}`)),
+ Request: req,
+ }, nil
+}
+
+func TestAPIClientSendMessageMatchesOfficialContract(t *testing.T) {
+ transport := &captureTransport{}
+ client := NewAPIClient("user-token", "page-token", "page-123")
+ client.httpClient = &http.Client{Transport: transport}
+
+ if err := client.SendMessage(context.Background(), "conv-456", "xin chao"); err != nil {
+ t.Fatalf("SendMessage returned error: %v", err)
+ }
+
+ if transport.req == nil {
+ t.Fatal("expected outbound request to be captured")
+ }
+ if got, want := transport.req.URL.Path, "/api/public_api/v1/pages/page-123/conversations/conv-456/messages"; got != want {
+ t.Fatalf("request path = %q, want %q", got, want)
+ }
+ if got := transport.req.URL.Query().Get("page_access_token"); got != "page-token" {
+ t.Fatalf("page_access_token query = %q, want %q", got, "page-token")
+ }
+
+ var payload map[string]any
+ if err := json.Unmarshal(transport.body, &payload); err != nil {
+ t.Fatalf("unmarshal payload: %v", err)
+ }
+ if got, want := payload["action"], "reply_inbox"; got != want {
+ t.Fatalf("payload.action = %#v, want %#v", got, want)
+ }
+ if got, want := payload["message"], "xin chao"; got != want {
+ t.Fatalf("payload.message = %#v, want %#v", got, want)
+ }
+ if _, exists := payload["content"]; exists {
+ t.Fatalf("payload must not contain legacy content field: %s", string(transport.body))
+ }
+ if _, exists := payload["attachment_id"]; exists {
+ t.Fatalf("payload must not contain attachment_id field: %s", string(transport.body))
+ }
+}
+
+func TestAPIClientSendMessageReturnsBodyLevelError(t *testing.T) {
+ transport := &captureTransport{
+ resp: &http.Response{
+ StatusCode: http.StatusOK,
+ Header: make(http.Header),
+ Body: io.NopCloser(strings.NewReader(`{"success":false,"message":"conversation blocked"}`)),
+ },
+ }
+ client := NewAPIClient("user-token", "page-token", "page-123")
+ client.httpClient = &http.Client{Transport: transport}
+
+ err := client.SendMessage(context.Background(), "conv-456", "xin chao")
+ if err == nil {
+ t.Fatal("expected SendMessage to return body-level error")
+ }
+ if !strings.Contains(err.Error(), "conversation blocked") {
+ t.Fatalf("SendMessage error = %v, want body-level message", err)
+ }
+}
+
+// TestTruncateForTikTok_MultiByteCharacters verifies rune-safe truncation for
+// Vietnamese diacritics and emoji (multi-byte UTF-8 sequences).
+func TestTruncateForTikTok_MultiByteCharacters(t *testing.T) {
+ // Vietnamese text with diacritics (multi-byte UTF-8)
+ input := strings.Repeat("Xin chào ", 100) // ~900 bytes, <500 runes
+ result := truncateForTikTok(input)
+ if !utf8.ValidString(result) {
+ t.Fatal("truncateForTikTok produced invalid UTF-8")
+ }
+
+ // Emoji string exceeding 500 runes
+ emoji := strings.Repeat("😊", 600)
+ result = truncateForTikTok(emoji)
+ runes := []rune(result)
+ if len(runes) > 500 {
+ t.Errorf("expected <=500 runes, got %d", len(runes))
+ }
+ if !utf8.ValidString(result) {
+ t.Fatal("emoji truncation produced invalid UTF-8")
+ }
+}
+
+// TestMessageHandlerEmptyMessageID verifies that two messages with empty IDs
+// from different conversations are both published (not deduped against each other).
+func TestMessageHandlerEmptyMessageID(t *testing.T) {
+ msgBus := bus.New()
+ ch := &Channel{
+ BaseChannel: channels.NewBaseChannel(channels.TypePancake, msgBus, nil),
+ pageID: "page-123",
+ }
+
+ // First message with empty ID — should be published
+ ch.handleMessagingEvent(MessagingData{
+ PageID: "page-123", ConversationID: "conv-1",
+ Type: "INBOX", Platform: "facebook",
+ Message: MessagingMessage{ID: "", SenderID: "user-1", Content: "hello"},
+ })
+
+ // Second message with empty ID, different conversation — should ALSO be published
+ ch.handleMessagingEvent(MessagingData{
+ PageID: "page-123", ConversationID: "conv-2",
+ Type: "INBOX", Platform: "facebook",
+ Message: MessagingMessage{ID: "", SenderID: "user-2", Content: "world"},
+ })
+
+ ctx, cancel := context.WithTimeout(context.Background(), 100*time.Millisecond)
+ defer cancel()
+
+ _, ok1 := msgBus.ConsumeInbound(ctx)
+ if !ok1 {
+ t.Fatal("first empty-ID message should be published")
+ }
+ _, ok2 := msgBus.ConsumeInbound(ctx)
+ if !ok2 {
+ t.Fatal("second empty-ID message should NOT be deduped against first")
+ }
+}
+
+func TestAPIClientUploadMediaMatchesOfficialContract(t *testing.T) {
+ transport := &captureTransport{
+ resp: &http.Response{
+ StatusCode: http.StatusOK,
+ Header: make(http.Header),
+ Body: io.NopCloser(strings.NewReader(`{"id":"upload-123","success":true}`)),
+ },
+ }
+ client := NewAPIClient("user-token", "page-token", "page-123")
+ client.httpClient = &http.Client{Transport: transport}
+
+ id, err := client.UploadMedia(context.Background(), "photo.jpg", strings.NewReader("file-bytes"), "image/jpeg")
+ if err != nil {
+ t.Fatalf("UploadMedia returned error: %v", err)
+ }
+ if id != "upload-123" {
+ t.Fatalf("UploadMedia id = %q, want %q", id, "upload-123")
+ }
+ if transport.req == nil {
+ t.Fatal("expected upload request to be captured")
+ }
+ if got, want := transport.req.URL.Path, "/api/public_api/v1/pages/page-123/upload_contents"; got != want {
+ t.Fatalf("upload path = %q, want %q", got, want)
+ }
+ if got := transport.req.URL.Query().Get("page_access_token"); got != "page-token" {
+ t.Fatalf("upload page_access_token query = %q, want %q", got, "page-token")
+ }
+ if !strings.HasPrefix(transport.req.Header.Get("Content-Type"), "multipart/form-data; boundary=") {
+ t.Fatalf("upload Content-Type = %q, want multipart/form-data", transport.req.Header.Get("Content-Type"))
+ }
+}
+
+// TestIsAuthError_WrappedError verifies errors.As works with wrapped apiError.
+func TestIsAuthError_WrappedError(t *testing.T) {
+ inner := &apiError{Code: 401, Message: "unauthorized"}
+ wrapped := fmt.Errorf("send failed: %w", inner)
+ if !isAuthError(wrapped) {
+ t.Error("isAuthError should detect wrapped 401 apiError via errors.As")
+ }
+ if isAuthError(fmt.Errorf("random error")) {
+ t.Error("isAuthError should return false for non-apiError")
+ }
+}
+
+// TestIsRateLimitError_WrappedError verifies errors.As works with wrapped rate limit.
+func TestIsRateLimitError_WrappedError(t *testing.T) {
+ inner := &apiError{Code: 429, Message: "too many requests"}
+ wrapped := fmt.Errorf("send failed: %w", inner)
+ if !isRateLimitError(wrapped) {
+ t.Error("isRateLimitError should detect wrapped 429 apiError via errors.As")
+ }
+}
diff --git a/internal/channels/pancake/types.go b/internal/channels/pancake/types.go
new file mode 100644
index 00000000..a0a239df
--- /dev/null
+++ b/internal/channels/pancake/types.go
@@ -0,0 +1,130 @@
+// Package pancake implements the Pancake (pages.fm) channel for GoClaw.
+// Pancake acts as a unified proxy for Facebook, Zalo OA, Instagram, TikTok, WhatsApp, Line.
+// A single Pancake API key gives access to all connected platforms — no per-platform OAuth needed.
+package pancake
+
+import "encoding/json"
+
+// pancakeCreds holds encrypted credentials stored in channel_instances.credentials.
+type pancakeCreds struct {
+ APIKey string `json:"api_key"` // User-level Pancake API key
+ PageAccessToken string `json:"page_access_token"` // Page-level token for all page APIs
+ WebhookSecret string `json:"webhook_secret,omitempty"` // Optional HMAC-SHA256 verification
+}
+
+// pancakeInstanceConfig holds non-secret config from channel_instances.config JSONB.
+type pancakeInstanceConfig struct {
+ PageID string `json:"page_id"`
+ Platform string `json:"platform,omitempty"` // auto-detected at Start(): facebook/zalo/instagram/tiktok/whatsapp/line
+ Features struct {
+ InboxReply bool `json:"inbox_reply"`
+ CommentReply bool `json:"comment_reply"`
+ } `json:"features"`
+ AllowFrom []string `json:"allow_from,omitempty"`
+ BlockReply *bool `json:"block_reply,omitempty"` // override gateway block_reply (nil = inherit)
+}
+
+// --- Webhook payload types ---
+// These types match the actual Pancake (pages.fm) webhook delivery format.
+// Top-level envelope has optional "event_type" + nested "data" containing
+// "conversation" and "message" objects.
+
+// WebhookEvent is the top-level Pancake webhook delivery envelope.
+type WebhookEvent struct {
+ EventType string `json:"event_type,omitempty"` // "messaging", may be empty
+ PageID string `json:"page_id,omitempty"` // top-level page_id (some formats)
+ Data json.RawMessage `json:"data"`
+}
+
+// WebhookData is the "data" envelope inside a Pancake webhook event.
+type WebhookData struct {
+ Conversation WebhookConversation `json:"conversation"`
+ Message WebhookMessage `json:"message"`
+ PageID string `json:"page_id,omitempty"` // page_id may appear here or top-level
+}
+
+// WebhookConversation holds the conversation metadata from a Pancake webhook.
+type WebhookConversation struct {
+ ID string `json:"id"` // format: "pageID_senderID"
+ Type string `json:"type"` // "INBOX" or "COMMENT"
+ AssigneeIDs []string `json:"assignee_ids,omitempty"` // Pancake staff IDs assigned to this conversation
+ From WebhookSender `json:"from"`
+ Snippet string `json:"snippet,omitempty"`
+}
+
+// WebhookSender identifies the message sender.
+type WebhookSender struct {
+ ID string `json:"id"`
+ Name string `json:"name"`
+ Email string `json:"email,omitempty"`
+ PageCustomerID string `json:"page_customer_id,omitempty"`
+}
+
+// WebhookMessage holds the message payload from a Pancake webhook.
+type WebhookMessage struct {
+ ID string `json:"id"`
+ Message string `json:"message,omitempty"` // primary text content
+ OriginalMessage string `json:"original_message,omitempty"` // unformatted fallback
+ Content string `json:"content,omitempty"` // legacy field
+ From *WebhookSender `json:"from,omitempty"` // actual sender of this message
+ Attachments []MessageAttachment `json:"attachments,omitempty"`
+ CreatedAt json.Number `json:"created_at,omitempty"`
+}
+
+// MessageAttachment represents a media attachment in a Pancake webhook message.
+type MessageAttachment struct {
+ Type string `json:"type"` // "image", "video", "file"
+ URL string `json:"url"`
+}
+
+// MessagingData is the normalized internal representation used after parsing.
+type MessagingData struct {
+ PageID string
+ ConversationID string
+ Type string // "INBOX" or "COMMENT"
+ Platform string // "facebook", "zalo", "instagram", "tiktok", "whatsapp", "line"
+ AssigneeIDs []string
+ Message MessagingMessage
+}
+
+// MessagingMessage is the normalized message used by the handler.
+type MessagingMessage struct {
+ ID string
+ Content string
+ SenderID string
+ SenderName string
+ Attachments []MessageAttachment
+}
+
+// --- API response types ---
+
+// PageInfo holds page metadata from GET /pages response.
+type PageInfo struct {
+ ID string `json:"id"`
+ Name string `json:"name"`
+ Platform string `json:"platform"` // facebook/zalo/instagram/tiktok/whatsapp/line
+ Avatar string `json:"avatar,omitempty"`
+}
+
+// SendMessageRequest is the POST body for sending a message via Pancake API.
+type SendMessageRequest struct {
+ Action string `json:"action"`
+ Message string `json:"message,omitempty"`
+ ContentIDs []string `json:"content_ids,omitempty"`
+}
+
+// UploadResponse is returned by POST /pages/{id}/upload_contents.
+type UploadResponse struct {
+ ID string `json:"id"`
+ URL string `json:"url,omitempty"`
+}
+
+// apiError wraps a Pancake API error response.
+type apiError struct {
+ Code int `json:"code"`
+ Message string `json:"message"`
+}
+
+func (e *apiError) Error() string {
+ return e.Message
+}
diff --git a/internal/channels/pancake/webhook_handler.go b/internal/channels/pancake/webhook_handler.go
new file mode 100644
index 00000000..981f0cc5
--- /dev/null
+++ b/internal/channels/pancake/webhook_handler.go
@@ -0,0 +1,242 @@
+package pancake
+
+import (
+ "crypto/hmac"
+ "crypto/sha256"
+ "encoding/hex"
+ "encoding/json"
+ "io"
+ "log/slog"
+ "net/http"
+ "strings"
+ "sync"
+)
+
+const (
+ webhookPath = "/channels/pancake/webhook"
+ maxBodyBytes = 1 << 20 // 1 MB — prevent abuse
+)
+
+// verifyHMAC verifies a Pancake HMAC-SHA256 signature.
+// Expected header format: "sha256=Thoát loop thành công rồi nha.
@@ -63,6 +93,23 @@ export function ChatTopBar({ agentId, isRunning, isBusy, activity, teamTasks, on
+ {usage && (
+
+
+ {usage.used.toLocaleString()}/{usage.max.toLocaleString()}
+
+ ({usage.percent}%)
+
+ )}
{isRunning ? (
{activity ? phaseLabels[activity.phase] : "Running…"}
diff --git a/ui/web/src/components/graph/graph-utils.ts b/ui/web/src/components/graph/graph-utils.ts
new file mode 100644
index 00000000..a562580c
--- /dev/null
+++ b/ui/web/src/components/graph/graph-utils.ts
@@ -0,0 +1,32 @@
+/** Degree-based node sizing: 4-12px range. Logarithmic scale for dense hubs. */
+export function getNodeSize(degree: number): number {
+ if (degree === 0) return 4;
+ return 4 + Math.min(Math.log2(degree + 1) * 2, 8);
+}
+
+/**
+ * Truncate a long string by removing the middle and inserting an ellipsis.
+ * Example: truncateMiddle("Model Steering System Benchmark", 20) → "Model Ster…hmark"
+ */
+export function truncateMiddle(str: string, maxLength = 28): string {
+ if (!str || str.length <= maxLength) return str;
+ const keepStart = Math.ceil((maxLength - 1) * 0.6);
+ const keepEnd = Math.floor((maxLength - 1) * 0.4);
+ return `${str.slice(0, keepStart)}…${str.slice(-keepEnd)}`;
+}
+
+/** Sigma settings constants for consistent look across both graph views */
+export const SIGMA_SETTINGS = {
+ /** Labels hidden for nodes smaller than this on screen */
+ labelRenderedSizeThreshold: 8,
+ /** Lower = fewer labels shown (avoids overlap) */
+ labelDensity: 0.12,
+ /** Grid cell size for label collision avoidance */
+ labelGridCellSize: 120,
+ /** Default edge color (overridden per-theme) */
+ defaultEdgeColor: "#334155",
+ /** Minimum camera ratio (most zoomed in) */
+ minCameraRatio: 0.02,
+ /** Maximum camera ratio (most zoomed out) */
+ maxCameraRatio: 8,
+} as const;
diff --git a/ui/web/src/components/graph/sigma-graph-container.tsx b/ui/web/src/components/graph/sigma-graph-container.tsx
new file mode 100644
index 00000000..1731a217
--- /dev/null
+++ b/ui/web/src/components/graph/sigma-graph-container.tsx
@@ -0,0 +1,371 @@
+import { useRef, useEffect, useCallback, useState } from "react";
+import Sigma from "sigma";
+import { EdgeCurvedArrowProgram } from "@sigma/edge-curve";
+import { EdgeArrowProgram } from "sigma/rendering";
+import forceAtlas2 from "graphology-layout-forceatlas2";
+import noverlap from "graphology-layout-noverlap";
+import type Graph from "graphology";
+import { useUiStore } from "@/stores/use-ui-store";
+import { SIGMA_SETTINGS } from "./graph-utils";
+
+export type EdgeType = "curvedArrow" | "arrow";
+
+export interface SigmaGraphContainerProps {
+ graph: Graph;
+ edgeType?: EdgeType;
+ selectedNodeId?: string | null;
+ onNodeSelect?: (nodeId: string | null) => void;
+ onNodeDoubleClick?: (nodeId: string) => void;
+ /** Called when Sigma instance is ready (or destroyed) */
+ onSigmaReady?: (sigma: Sigma | null) => void;
+ /** Compact mode for embedded mini-graphs (no layout, smaller labels) */
+ compact?: boolean;
+ /** Node types to hide (from filter component) */
+ hiddenTypes?: Set;
+}
+
+/** Theme-aware colors */
+function useThemeColors() {
+ const theme = useUiStore((s) => s.theme);
+ const isDark =
+ theme === "dark" ||
+ (theme === "system" &&
+ window.matchMedia("(prefers-color-scheme: dark)").matches);
+ return {
+ isDark,
+ labelColor: isDark ? "#e2e8f0" : "#1e293b",
+ // Base edge color — visible but not dominant
+ edgeColor: isDark ? "#47556966" : "#94a3b8cc",
+ // Dim color for non-active edges
+ dimEdgeColor: isDark ? "#47556933" : "#cbd5e166",
+ // Highlight for active neighborhood edges
+ highlightEdgeColor: isDark ? "#a1a1aa" : "#64748b",
+ };
+}
+
+export function SigmaGraphContainer({
+ graph,
+ edgeType = "arrow",
+ selectedNodeId,
+ onNodeSelect,
+ onNodeDoubleClick,
+ onSigmaReady,
+ compact = false,
+ hiddenTypes,
+}: SigmaGraphContainerProps) {
+ const containerRef = useRef(null);
+ const internalSigmaRef = useRef(null);
+ // Incremented when sigma instance changes — used to trigger event handler registration.
+ const [sigmaVersion, setSigmaVersion] = useState(0);
+ const [hoveredNode, setHoveredNode] = useState(null);
+ // Pulse phase for animated highlighted edges (0..1, cycles)
+ const [pulsePhase, setPulsePhase] = useState(0);
+ const { labelColor, edgeColor, dimEdgeColor, highlightEdgeColor } = useThemeColors();
+
+ const setSigmaRef = useCallback(
+ (instance: Sigma | null) => {
+ internalSigmaRef.current = instance;
+ setSigmaVersion((v) => v + 1);
+ onSigmaReady?.(instance);
+ },
+ [onSigmaReady],
+ );
+
+ // --- Initialize Sigma with PRE-COMPUTED FA2 layout (no shake, no worker) ---
+ useEffect(() => {
+ if (!containerRef.current || graph.order === 0) return;
+
+ // Unified adaptive FA2 layout — no density branching.
+ // Params scale with orphan ratio (disconnected nodes / total nodes).
+ if (graph.order > 1) {
+ // Random disc init — uniform area distribution for all graph types.
+ const spread = Math.sqrt(graph.order) * 20;
+ const nodes = graph.nodes();
+ for (let i = 0; i < nodes.length; i++) {
+ const angle = Math.random() * Math.PI * 2;
+ const r = Math.sqrt(Math.random()) * spread;
+ graph.setNodeAttribute(nodes[i], "x", Math.cos(angle) * r);
+ graph.setNodeAttribute(nodes[i], "y", Math.sin(angle) * r);
+ }
+
+ // Orphan ratio drives adaptive parameters:
+ // High orphan → stronger gravity (pull orphans to center), tighter layout
+ // Low orphan → link forces dominate, more spread for cluster readability
+ let orphanCount = 0;
+ for (const node of nodes) {
+ if (graph.degree(node) === 0) orphanCount++;
+ }
+ const orphanRatio = orphanCount / graph.order;
+ const gravity = 0.5 + orphanRatio * 2.0;
+ const scalingRatio = 4.0 - orphanRatio * 2.0;
+ const iterations = graph.order < 100 ? 500 : graph.order < 500 ? 300 : 200;
+
+ forceAtlas2.assign(graph, {
+ iterations,
+ settings: {
+ linLogMode: true,
+ outboundAttractionDistribution: true,
+ gravity,
+ scalingRatio,
+ adjustSizes: true,
+ strongGravityMode: true,
+ slowDown: 8,
+ barnesHutOptimize: graph.order > 100,
+ edgeWeightInfluence: 0,
+ },
+ });
+
+ // Noverlap only for connected-heavy graphs (prevents overlap in dense clusters).
+ // Skip for high-orphan graphs to avoid grid artifacts.
+ if (orphanRatio < 0.3) {
+ noverlap.assign(graph, {
+ maxIterations: 30,
+ settings: { margin: 2, ratio: 1.02, speed: 3, gridSize: 20 },
+ });
+ }
+ }
+
+ const edgePrograms: Record = {
+ arrow: EdgeArrowProgram,
+ curvedArrow: EdgeCurvedArrowProgram as unknown as typeof EdgeArrowProgram,
+ };
+
+ const sigma = new Sigma(graph, containerRef.current, {
+ allowInvalidContainer: true,
+ renderLabels: true,
+ labelRenderedSizeThreshold: compact ? 14 : SIGMA_SETTINGS.labelRenderedSizeThreshold,
+ labelDensity: compact ? 0.05 : SIGMA_SETTINGS.labelDensity,
+ labelGridCellSize: SIGMA_SETTINGS.labelGridCellSize,
+ labelColor: { color: labelColor },
+ defaultEdgeColor: edgeColor,
+ defaultEdgeType: edgeType,
+ edgeProgramClasses: edgePrograms,
+ minCameraRatio: SIGMA_SETTINGS.minCameraRatio,
+ maxCameraRatio: SIGMA_SETTINGS.maxCameraRatio,
+ labelFont: "Inter, system-ui, sans-serif",
+ labelSize: compact ? 10 : 12,
+ zoomingRatio: 1.3,
+ // Enable z-index sorting — required for edge/node `zIndex` attr to affect render order
+ zIndex: true,
+ });
+
+ setSigmaRef(sigma);
+
+ // Fit viewport to graph on next frame (after initial render)
+ requestAnimationFrame(() => {
+ sigma.getCamera().animatedReset({ duration: 300 });
+ });
+
+ return () => {
+ sigma.kill();
+ // Only clear external ref if it still points to THIS sigma (concurrent mode safety)
+ if (internalSigmaRef.current === sigma) {
+ internalSigmaRef.current = null;
+ onSigmaReady?.(null);
+ }
+ };
+ }, [graph, edgeType, compact]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ // --- Update theme colors without re-init ---
+ useEffect(() => {
+ const sigma = internalSigmaRef.current;
+ if (!sigma) return;
+ sigma.setSetting("labelColor", { color: labelColor });
+ sigma.setSetting("defaultEdgeColor", edgeColor);
+ sigma.refresh();
+ }, [labelColor, edgeColor]);
+
+ // Compute multi-hop neighborhood (BFS, 2 hops) for active node
+ const neighborhoodRef = useRef<{ nodes: Set; edges: Set } | null>(null);
+ useEffect(() => {
+ const active = selectedNodeId || hoveredNode;
+ if (!active || !graph.hasNode(active)) {
+ neighborhoodRef.current = null;
+ return;
+ }
+ const nodes = new Set([active]);
+ const edges = new Set();
+ const MAX_HOPS = 2;
+ let frontier: string[] = [active];
+ for (let hop = 0; hop < MAX_HOPS; hop++) {
+ const next: string[] = [];
+ for (const n of frontier) {
+ graph.forEachEdge(n, (edge, _attrs, source, target) => {
+ edges.add(edge);
+ const other = source === n ? target : source;
+ if (!nodes.has(other)) {
+ nodes.add(other);
+ next.push(other);
+ }
+ });
+ }
+ frontier = next;
+ if (frontier.length === 0) break;
+ }
+ neighborhoodRef.current = { nodes, edges };
+ }, [selectedNodeId, hoveredNode, graph]);
+
+ // --- Unified node/edge reducers: filter + subtle hover highlight (no dimming) ---
+ useEffect(() => {
+ const sigma = internalSigmaRef.current;
+ if (!sigma) return;
+
+ const getNodeType = (attrs: Record) =>
+ (attrs.docType || attrs.entityType || "other") as string;
+
+ sigma.setSetting("nodeReducer", (node, data) => {
+ // Filter: hide nodes of hidden types
+ if (hiddenTypes?.size && hiddenTypes.has(getNodeType(data))) {
+ return { ...data, hidden: true };
+ }
+
+ const activeNode = selectedNodeId || hoveredNode;
+ if (!activeNode) return data;
+
+ const hood = neighborhoodRef.current;
+ if (!hood) return data;
+
+ if (node === activeNode) {
+ // Active node: bring to top, show label
+ return { ...data, zIndex: 3, forceLabel: true };
+ }
+ if (hood.nodes.has(node)) {
+ // Within 2-hop neighborhood: show label, slightly raised z-index
+ return { ...data, zIndex: 2, forceLabel: true };
+ }
+ // Outside neighborhood: keep color/size, no dimming — just lower z-index
+ return { ...data, zIndex: 0 };
+ });
+
+ sigma.setSetting("edgeReducer", (edge, data) => {
+ // Filter: hide edges connected to hidden node types
+ if (hiddenTypes?.size) {
+ const srcAttrs = graph.getNodeAttributes(graph.source(edge));
+ const tgtAttrs = graph.getNodeAttributes(graph.target(edge));
+ if (hiddenTypes.has(getNodeType(srcAttrs)) || hiddenTypes.has(getNodeType(tgtAttrs))) {
+ return { ...data, hidden: true };
+ }
+ }
+
+ const activeNode = selectedNodeId || hoveredNode;
+ if (!activeNode) return data;
+
+ const hood = neighborhoodRef.current;
+ if (!hood) return data;
+
+ if (hood.edges.has(edge)) {
+ // Edges within neighborhood: thin + subtle OPACITY pulse (not size).
+ const alpha = Math.round(200 + Math.sin(pulsePhase * Math.PI * 2) * 40);
+ const alphaHex = Math.max(0, Math.min(255, alpha)).toString(16).padStart(2, "0");
+ const pulsedColor = `${highlightEdgeColor}${alphaHex}`;
+ return { ...data, color: pulsedColor, size: 1, zIndex: 2 };
+ }
+ // Non-related edges: HIDE entirely so active edges are clearly visible
+ return { ...data, hidden: true };
+ });
+
+ sigma.refresh();
+ }, [selectedNodeId, hoveredNode, graph, highlightEdgeColor, dimEdgeColor, hiddenTypes]);
+
+ // --- Pulse animation for highlighted edges (only runs when a node is active) ---
+ // Respects prefers-reduced-motion — skips animation entirely for accessibility
+ useEffect(() => {
+ const active = selectedNodeId || hoveredNode;
+ if (!active) return;
+
+ // Honor user's reduced-motion preference
+ const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+ if (mediaQuery.matches) return;
+
+ let rafId = 0;
+ const start = performance.now();
+ const PULSE_PERIOD_MS = 1800; // slower, gentler pulse
+ const tick = () => {
+ const elapsed = performance.now() - start;
+ setPulsePhase((elapsed % PULSE_PERIOD_MS) / PULSE_PERIOD_MS);
+ rafId = requestAnimationFrame(tick);
+ };
+ rafId = requestAnimationFrame(tick);
+ return () => cancelAnimationFrame(rafId);
+ }, [selectedNodeId, hoveredNode]);
+
+ // Add pulsePhase to reducer deps so edges re-render on pulse
+ useEffect(() => {
+ const sigma = internalSigmaRef.current;
+ if (!sigma) return;
+ sigma.refresh({ skipIndexation: true });
+ }, [pulsePhase]);
+
+ // --- Event handlers: use refs for values that change frequently to avoid
+ // re-registering Sigma listeners (which drops in-flight double-click events) ---
+ const selectedNodeIdRef = useRef(selectedNodeId);
+ selectedNodeIdRef.current = selectedNodeId;
+ const onNodeSelectRef = useRef(onNodeSelect);
+ onNodeSelectRef.current = onNodeSelect;
+ const onNodeDoubleClickRef = useRef(onNodeDoubleClick);
+ onNodeDoubleClickRef.current = onNodeDoubleClick;
+
+ useEffect(() => {
+ const sigma = internalSigmaRef.current;
+ if (!sigma) return;
+
+ const handleEnterNode = ({ node }: { node: string }) => {
+ setHoveredNode(node);
+ if (containerRef.current) containerRef.current.style.cursor = "pointer";
+ };
+
+ const handleLeaveNode = () => {
+ setHoveredNode(null);
+ if (containerRef.current) containerRef.current.style.cursor = "default";
+ };
+
+ const handleClickNode = ({ node }: { node: string }) => {
+ onNodeSelectRef.current?.(node === selectedNodeIdRef.current ? null : node);
+ };
+
+ const handleDoubleClickNode = ({ node, event }: { node: string; event: { preventSigmaDefault?: () => void } }) => {
+ // Prevent Sigma's default zoom-in behavior on double-click
+ event.preventSigmaDefault?.();
+ onNodeDoubleClickRef.current?.(node);
+ };
+
+ const handleClickStage = () => {
+ onNodeSelectRef.current?.(null);
+ };
+
+ sigma.on("enterNode", handleEnterNode);
+ sigma.on("leaveNode", handleLeaveNode);
+ sigma.on("clickNode", handleClickNode);
+ sigma.on("doubleClickNode", handleDoubleClickNode);
+ sigma.on("clickStage", handleClickStage);
+
+ return () => {
+ sigma.off("enterNode", handleEnterNode);
+ sigma.off("leaveNode", handleLeaveNode);
+ sigma.off("clickNode", handleClickNode);
+ sigma.off("doubleClickNode", handleDoubleClickNode);
+ sigma.off("clickStage", handleClickStage);
+ };
+ }, [sigmaVersion]); // re-register only when sigma instance changes
+
+ // NOTE: Click on node NO LONGER moves camera.
+ // Camera only animates for explicit user actions (search, fit-to-view, keyboard F).
+ // This matches the old force-graph behavior where clicking just highlights.
+
+ // No-data state
+ if (graph.order === 0) {
+ return (
+ ;
+ defaultColor?: string;
+ /** Currently hidden types (controlled state) */
+ hiddenTypes: Set;
+ onHiddenTypesChange: (types: Set) => void;
+ collapsed: boolean;
+ onCollapsedChange: (collapsed: boolean) => void;
+}
+
+export function SigmaGraphFilters({
+ graph, typeColors, defaultColor = "#9ca3af",
+ hiddenTypes, onHiddenTypesChange,
+ collapsed, onCollapsedChange,
+}: SigmaGraphFiltersProps) {
+ const containerRef = useRef(null);
+
+ // Memoize type counts to avoid iterating all nodes on every render
+ const typeCounts = useMemo(() => {
+ if (graph.order === 0) return [];
+ const counts = new Map();
+ graph.forEachNode((_node, attrs) => {
+ const t = (attrs.docType || attrs.entityType || "other") as string;
+ counts.set(t, (counts.get(t) ?? 0) + 1);
+ });
+ const result: TypeCount[] = [];
+ for (const [type, count] of counts) {
+ result.push({ type, color: typeColors[type] ?? defaultColor, count });
+ }
+ return result.sort((a, b) => b.count - a.count);
+ }, [graph, typeColors, defaultColor]);
+
+ const toggleType = useCallback((type: string) => {
+ const next = new Set(hiddenTypes);
+ if (next.has(type)) next.delete(type);
+ else next.add(type);
+ onHiddenTypesChange(next);
+ }, [hiddenTypes, onHiddenTypesChange]);
+
+ // Close dropdown on outside click OR Escape key
+ useEffect(() => {
+ if (collapsed) return;
+ const handleClick = (e: MouseEvent) => {
+ if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+ onCollapsedChange(true);
+ }
+ };
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ onCollapsedChange(true);
+ }
+ };
+ document.addEventListener("mousedown", handleClick);
+ document.addEventListener("keydown", handleKeyDown);
+ return () => {
+ document.removeEventListener("mousedown", handleClick);
+ document.removeEventListener("keydown", handleKeyDown);
+ };
+ }, [collapsed, onCollapsedChange]);
+
+ if (typeCounts.length === 0) return null;
+
+ return (
+ (null);
+
+ // Global `?` key handler to open help (when not typing in input)
+ useEffect(() => {
+ const handler = (e: KeyboardEvent) => {
+ const tag = (e.target as HTMLElement)?.tagName;
+ if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+ if (e.key === "?") {
+ e.preventDefault();
+ setOpen((prev) => !prev);
+ } else if (e.key === "Escape" && open) {
+ setOpen(false);
+ }
+ };
+ document.addEventListener("keydown", handler);
+ return () => document.removeEventListener("keydown", handler);
+ }, [open]);
+
+ // Outside click to dismiss
+ useEffect(() => {
+ if (!open) return;
+ const handler = (e: MouseEvent) => {
+ if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+ setOpen(false);
+ }
+ };
+ document.addEventListener("mousedown", handler);
+ return () => document.removeEventListener("mousedown", handler);
+ }, [open]);
+
+ return (
+ (null);
+ const rafRef = useRef(0);
+
+ // Compute graph bounding box from node positions
+ const getBounds = useCallback(() => {
+ let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+ graph.forEachNode((_node, attrs) => {
+ const x = attrs.x as number;
+ const y = attrs.y as number;
+ if (x < minX) minX = x;
+ if (x > maxX) maxX = x;
+ if (y < minY) minY = y;
+ if (y > maxY) maxY = y;
+ });
+ // Add padding
+ const padX = (maxX - minX) * 0.1 || 50;
+ const padY = (maxY - minY) * 0.1 || 50;
+ return { minX: minX - padX, minY: minY - padY, maxX: maxX + padX, maxY: maxY + padY };
+ }, [graph]);
+
+ // Draw minimap
+ const draw = useCallback(() => {
+ const canvas = canvasRef.current;
+ const ctx = canvas?.getContext("2d");
+ if (!canvas || !ctx || !sigma || graph.order === 0) return;
+
+ const dpr = window.devicePixelRatio || 1;
+ canvas.width = size * dpr;
+ canvas.height = size * dpr;
+ ctx.scale(dpr, dpr);
+
+ const bounds = getBounds();
+ const bw = bounds.maxX - bounds.minX;
+ const bh = bounds.maxY - bounds.minY;
+ const scale = Math.min(size / bw, size / bh);
+ const offsetX = (size - bw * scale) / 2;
+ const offsetY = (size - bh * scale) / 2;
+
+ // Clear
+ ctx.clearRect(0, 0, size, size);
+
+ // Background
+ ctx.fillStyle = "rgba(0,0,0,0.03)";
+ ctx.fillRect(0, 0, size, size);
+
+ // Draw nodes as 1.5px dots
+ graph.forEachNode((_node, attrs) => {
+ const x = ((attrs.x as number) - bounds.minX) * scale + offsetX;
+ const y = ((attrs.y as number) - bounds.minY) * scale + offsetY;
+ ctx.beginPath();
+ ctx.arc(x, y, 1.5, 0, Math.PI * 2);
+ ctx.fillStyle = (attrs.color as string) || "#9ca3af";
+ ctx.fill();
+ });
+
+ // Draw viewport rectangle — use viewportToGraph to derive the 4 corners
+ // in graph space, then map to minimap space
+ const { width, height } = sigma.getDimensions();
+ const topLeft = sigma.viewportToGraph({ x: 0, y: 0 });
+ const bottomRight = sigma.viewportToGraph({ x: width, y: height });
+
+ const vx1 = (topLeft.x - bounds.minX) * scale + offsetX;
+ const vy1 = (topLeft.y - bounds.minY) * scale + offsetY;
+ const vx2 = (bottomRight.x - bounds.minX) * scale + offsetX;
+ const vy2 = (bottomRight.y - bounds.minY) * scale + offsetY;
+ const vw = vx2 - vx1;
+ const vh = vy2 - vy1;
+
+ ctx.strokeStyle = "rgba(59, 130, 246, 0.7)";
+ ctx.lineWidth = 1.5;
+ ctx.strokeRect(vx1, vy1, vw, vh);
+ ctx.fillStyle = "rgba(59, 130, 246, 0.08)";
+ ctx.fillRect(vx1, vy1, vw, vh);
+ }, [sigma, graph, size, getBounds]);
+
+ // Redraw on camera changes
+ useEffect(() => {
+ if (!sigma) return;
+ const camera = sigma.getCamera();
+
+ // Throttled redraw — skip if already scheduled
+ let scheduled = false;
+ const scheduleRedraw = () => {
+ if (scheduled) return;
+ scheduled = true;
+ rafRef.current = requestAnimationFrame(() => {
+ scheduled = false;
+ draw();
+ });
+ };
+
+ // Initial draw
+ scheduleRedraw();
+
+ // Redraw on camera updates (pan/zoom) AND after every sigma render
+ // (so FA2 layout position updates are reflected)
+ camera.on("updated", scheduleRedraw);
+ sigma.on("afterRender", scheduleRedraw);
+
+ return () => {
+ camera.off("updated", scheduleRedraw);
+ sigma.off("afterRender", scheduleRedraw);
+ cancelAnimationFrame(rafRef.current);
+ };
+ }, [sigma, draw]);
+
+ // Click to jump: find nearest node to click position and center camera on it
+ const handleClick = useCallback(
+ (e: React.MouseEvent) => {
+ if (!sigma || graph.order === 0) return;
+ const rect = canvasRef.current?.getBoundingClientRect();
+ if (!rect) return;
+
+ const bounds = getBounds();
+ const bw = bounds.maxX - bounds.minX;
+ const bh = bounds.maxY - bounds.minY;
+ const scale = Math.min(size / bw, size / bh);
+ const offsetX = (size - bw * scale) / 2;
+ const offsetY = (size - bh * scale) / 2;
+
+ // Convert click position to graph coordinates
+ const clickX = e.clientX - rect.left;
+ const clickY = e.clientY - rect.top;
+ const targetGraphX = (clickX - offsetX) / scale + bounds.minX;
+ const targetGraphY = (clickY - offsetY) / scale + bounds.minY;
+
+ // Find nearest node (avoids coordinate-system issues with camera.animate)
+ let nearestId: string | null = null;
+ let minDist = Infinity;
+ graph.forEachNode((id, attrs) => {
+ const dx = (attrs.x as number) - targetGraphX;
+ const dy = (attrs.y as number) - targetGraphY;
+ const d = dx * dx + dy * dy;
+ if (d < minDist) { minDist = d; nearestId = id; }
+ });
+
+ if (nearestId) {
+ const display = sigma.getNodeDisplayData(nearestId);
+ if (display) {
+ sigma.getCamera().animate(
+ { x: display.x, y: display.y },
+ { duration: 300 },
+ );
+ }
+ }
+ },
+ [sigma, graph, size, getBounds],
+ );
+
+ if (graph.order === 0) return null;
+
+ return (
+
+ );
+}
diff --git a/ui/web/src/components/graph/sigma-graph-search.tsx b/ui/web/src/components/graph/sigma-graph-search.tsx
new file mode 100644
index 00000000..f6260645
--- /dev/null
+++ b/ui/web/src/components/graph/sigma-graph-search.tsx
@@ -0,0 +1,162 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import type Sigma from "sigma";
+import type Graph from "graphology";
+import { Search, X } from "lucide-react";
+import { Input } from "@/components/ui/input";
+
+interface SigmaGraphSearchProps {
+ sigma: Sigma | null;
+ graph: Graph;
+ onNodeSelect?: (nodeId: string | null) => void;
+ placeholder?: string;
+}
+
+interface SearchResult {
+ id: string;
+ label: string;
+ color: string;
+}
+
+export function SigmaGraphSearch({ sigma, graph, onNodeSelect, placeholder = "Search nodes..." }: SigmaGraphSearchProps) {
+ const [query, setQuery] = useState("");
+ const [results, setResults] = useState([]);
+ const [open, setOpen] = useState(false);
+ const [activeIndex, setActiveIndex] = useState(0);
+ const inputRef = useRef(null);
+ const containerRef = useRef(null);
+
+ // Search graph nodes by label
+ const handleSearch = useCallback(
+ (q: string) => {
+ setQuery(q);
+ if (!q.trim() || graph.order === 0) {
+ setResults([]);
+ setOpen(false);
+ return;
+ }
+ const lower = q.toLowerCase();
+ const matches: SearchResult[] = [];
+ graph.forEachNode((node, attrs) => {
+ if (matches.length >= 10) return;
+ const label = (attrs.label as string) || "";
+ if (label.toLowerCase().includes(lower)) {
+ matches.push({ id: node, label, color: attrs.color as string });
+ }
+ });
+ setResults(matches);
+ setOpen(matches.length > 0);
+ setActiveIndex(0);
+ },
+ [graph],
+ );
+
+ // Select a result: highlight + camera zoom
+ const selectResult = useCallback(
+ (nodeId: string) => {
+ onNodeSelect?.(nodeId);
+ if (sigma && graph.hasNode(nodeId)) {
+ // Use getNodeDisplayData for correct stage coords (not raw graph coords).
+ // Only zoom in if currently zoomed out (don't force zoom level if already zoomed in).
+ const nodeDisplay = sigma.getNodeDisplayData(nodeId);
+ if (nodeDisplay) {
+ const currentRatio = sigma.getCamera().ratio;
+ sigma.getCamera().animate(
+ { x: nodeDisplay.x, y: nodeDisplay.y, ratio: Math.min(currentRatio, 0.5) },
+ { duration: 400 },
+ );
+ }
+ }
+ setOpen(false);
+ setQuery("");
+ },
+ [sigma, graph, onNodeSelect],
+ );
+
+ // Keyboard navigation in dropdown
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (!open || results.length === 0) return;
+ if (e.key === "ArrowDown") {
+ e.preventDefault();
+ setActiveIndex((i) => Math.min(i + 1, results.length - 1));
+ } else if (e.key === "ArrowUp") {
+ e.preventDefault();
+ setActiveIndex((i) => Math.max(i - 1, 0));
+ } else if (e.key === "Enter") {
+ e.preventDefault();
+ const r = results[activeIndex];
+ if (r) selectResult(r.id);
+ } else if (e.key === "Escape") {
+ setOpen(false);
+ inputRef.current?.blur();
+ }
+ },
+ [open, results, activeIndex, selectResult],
+ );
+
+ // Close dropdown on outside click
+ useEffect(() => {
+ const handleClick = (e: MouseEvent) => {
+ if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+ setOpen(false);
+ }
+ };
+ document.addEventListener("mousedown", handleClick);
+ return () => document.removeEventListener("mousedown", handleClick);
+ }, []);
+
+ return (
+ ;
+ selectedNodeId?: string | null;
+ onNodeSelect?: (nodeId: string | null) => void;
+ /** Ref to search input — "/" focuses it */
+ searchInputRef?: RefObject;
+}
+
+/**
+ * Keyboard shortcuts for Sigma graph views.
+ * Only active when the graph container (or a child) is focused.
+ *
+ * | Key | Action |
+ * |---------|---------------------|
+ * | + / = | Zoom in |
+ * | - | Zoom out |
+ * | R | Reset view (fit all)|
+ * | F | Focus selected node |
+ * | Escape | Deselect all |
+ * | / | Focus search input |
+ */
+export function useSigmaKeyboard({
+ sigma,
+ graph,
+ containerRef,
+ selectedNodeId,
+ onNodeSelect,
+ searchInputRef,
+}: UseSigmaKeyboardOptions) {
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!container || !sigma) return;
+
+ const handler = (e: KeyboardEvent) => {
+ // Ignore if typing in an input/textarea
+ const tag = (e.target as HTMLElement).tagName;
+ if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+
+ switch (e.key) {
+ case "+":
+ case "=":
+ e.preventDefault();
+ sigma.getCamera().animatedZoom({ duration: 200 });
+ break;
+ case "-":
+ e.preventDefault();
+ sigma.getCamera().animatedUnzoom({ duration: 200 });
+ break;
+ case "r":
+ case "R":
+ e.preventDefault();
+ sigma.getCamera().animatedReset({ duration: 300 });
+ break;
+ case "f":
+ case "F":
+ if (selectedNodeId && graph.hasNode(selectedNodeId)) {
+ e.preventDefault();
+ const nodeDisplay = sigma.getNodeDisplayData(selectedNodeId);
+ if (nodeDisplay) {
+ const currentRatio = sigma.getCamera().ratio;
+ sigma.getCamera().animate(
+ { x: nodeDisplay.x, y: nodeDisplay.y, ratio: Math.min(currentRatio, 0.5) },
+ { duration: 400 },
+ );
+ }
+ }
+ break;
+ case "Escape":
+ onNodeSelect?.(null);
+ break;
+ case "/":
+ e.preventDefault();
+ searchInputRef?.current?.focus();
+ break;
+ }
+ };
+
+ container.addEventListener("keydown", handler);
+ return () => container.removeEventListener("keydown", handler);
+ }, [sigma, graph, containerRef, selectedNodeId, onNodeSelect, searchInputRef]);
+}
diff --git a/ui/web/src/components/layout/system-settings-constants.ts b/ui/web/src/components/layout/system-settings-constants.ts
index 504310ea..3bb1226c 100644
--- a/ui/web/src/components/layout/system-settings-constants.ts
+++ b/ui/web/src/components/layout/system-settings-constants.ts
@@ -42,6 +42,8 @@ export interface InitState {
kgProvider: string;
kgModel: string;
kgMinConfidence: string;
+ bgProvider: string;
+ bgModel: string;
}
export const DEFAULTS: InitState = {
@@ -51,6 +53,7 @@ export const DEFAULTS: InitState = {
compProvider: "", compModel: "",
compThreshold: "", compKeepRecent: "", compMaxTokens: "",
kgProvider: "", kgModel: "", kgMinConfidence: "0.75",
+ bgProvider: "", bgModel: "",
};
export function parseBool(v: string | undefined, fallback: boolean): boolean {
diff --git a/ui/web/src/components/layout/system-settings-modal.tsx b/ui/web/src/components/layout/system-settings-modal.tsx
index ce36a27c..01cc4815 100644
--- a/ui/web/src/components/layout/system-settings-modal.tsx
+++ b/ui/web/src/components/layout/system-settings-modal.tsx
@@ -1,6 +1,6 @@
import { useState, useEffect, useCallback } from "react";
import { useTranslation } from "react-i18next";
-import { Settings2, Loader2, Save, AlertTriangle, Info, ExternalLink, Network } from "lucide-react";
+import { Settings2, Loader2, Save, AlertTriangle, Info, ExternalLink, Network, Cog } from "lucide-react";
import { Link } from "react-router";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
@@ -57,6 +57,10 @@ export function SystemSettingsModal({ open, onOpenChange }: SystemSettingsModalP
const [kgModel, setKgModel] = useState("");
const [kgMinConfidence, setKgMinConfidence] = useState("0.75");
+ // Background Workers
+ const [bgProvider, setBgProvider] = useState("");
+ const [bgModel, setBgModel] = useState("");
+
const applyConfigs = useCallback((
configs: Record,
kgSettings?: { extraction_provider?: string; extraction_model?: string; min_confidence?: number },
@@ -71,12 +75,14 @@ export function SystemSettingsModal({ open, onOpenChange }: SystemSettingsModalP
compMaxTokens: configs["compaction.max_tokens"] ?? "",
kgProvider: kgSettings?.extraction_provider ?? "", kgModel: kgSettings?.extraction_model ?? "",
kgMinConfidence: String(kgSettings?.min_confidence ?? 0.75),
+ bgProvider: configs["background.provider"] ?? "", bgModel: configs["background.model"] ?? "",
};
setInit(s);
setEmbProvider(s.embProvider); setEmbModel(s.embModel); setEmbMaxChunkLen(s.embMaxChunkLen); setEmbChunkOverlap(s.embChunkOverlap);
setToolStatus(s.toolStatus); setBlockReply(s.blockReply); setIntentClassify(s.intentClassify);
setCompProvider(s.compProvider); setCompModel(s.compModel); setCompThreshold(s.compThreshold); setCompKeepRecent(s.compKeepRecent); setCompMaxTokens(s.compMaxTokens);
setKgProvider(s.kgProvider); setKgModel(s.kgModel); setKgMinConfidence(s.kgMinConfidence);
+ setBgProvider(s.bgProvider); setBgModel(s.bgModel);
resetEmb();
}, [resetEmb]);
@@ -118,6 +124,8 @@ export function SystemSettingsModal({ open, onOpenChange }: SystemSettingsModalP
if (compThreshold !== init.compThreshold) updates["compaction.threshold"] = compThreshold;
if (compKeepRecent !== init.compKeepRecent) updates["compaction.keep_recent"] = compKeepRecent;
if (compMaxTokens !== init.compMaxTokens) updates["compaction.max_tokens"] = compMaxTokens;
+ if (bgProvider !== init.bgProvider) updates["background.provider"] = bgProvider;
+ if (bgModel !== init.bgModel) updates["background.model"] = bgModel;
for (const [key, value] of Object.entries(updates)) await http.put(`/v1/system-configs/${key}`, { value });
const kgChanged = kgProvider !== init.kgProvider || kgModel !== init.kgModel || kgMinConfidence !== init.kgMinConfidence;
if (kgChanged) {
@@ -179,6 +187,20 @@ export function SystemSettingsModal({ open, onOpenChange }: SystemSettingsModalP
+ {/* Background Workers */}
+
+
+ {t("bg.description")}
+
+
+ { setBgProvider(v); setBgModel(""); }} model={bgModel} onModelChange={setBgModel} allowEmpty providerLabel={t("bg.provider")} modelLabel={t("bg.model")} providerTip={t("bg.providerTip")} modelTip={t("bg.modelTip")} providerPlaceholder={t("bg.providerPlaceholder")} modelPlaceholder={t("bg.modelPlaceholder")} />
+
+
+
c.value === configType)?.descKey ?? "";
return (
-
);
diff --git a/ui/web/src/pages/agents/agent-detail/evolution-tab/evolution-metrics-charts.tsx b/ui/web/src/pages/agents/agent-detail/evolution-tab/evolution-metrics-charts.tsx
index 821ee035..abedc644 100644
--- a/ui/web/src/pages/agents/agent-detail/evolution-tab/evolution-metrics-charts.tsx
+++ b/ui/web/src/pages/agents/agent-detail/evolution-tab/evolution-metrics-charts.tsx
@@ -18,16 +18,20 @@ export function EvolutionMetricsCharts({ toolAggs, retrievalAggs, loading }: Evo
return ;
}
+ // API returns rates as 0-1 fractions; convert to 0-100 for chart display.
+ const toolData = toolAggs.map((a) => ({ ...a, success_rate: a.success_rate * 100 }));
+ const retrievalData = retrievalAggs.map((a) => ({ ...a, usage_rate: a.usage_rate * 100 }));
+
return (
+ No data to display
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/ui/web/src/components/graph/sigma-graph-controls.tsx b/ui/web/src/components/graph/sigma-graph-controls.tsx
new file mode 100644
index 00000000..2276e51a
--- /dev/null
+++ b/ui/web/src/components/graph/sigma-graph-controls.tsx
@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useState } from "react";
+import type Sigma from "sigma";
+import { ZoomIn, ZoomOut, Maximize2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const NODE_LIMIT_OPTIONS = [100, 200, 500, 1000, 5000] as const;
+
+interface SigmaGraphControlsProps {
+ sigma: Sigma | null;
+ nodeLimit: number;
+ isLimited: boolean;
+ onNodeLimitChange: (limit: number) => void;
+ /** i18n labels — caller provides pre-formatted translated strings */
+ labels: {
+ nodes: string;
+ edges: string;
+ limitNote?: string;
+ };
+}
+
+export function SigmaGraphControls({
+ sigma,
+ nodeLimit,
+ isLimited,
+ onNodeLimitChange,
+ labels,
+}: SigmaGraphControlsProps) {
+ const [zoomPercent, setZoomPercent] = useState(100);
+
+ // Track zoom level from camera events
+ useEffect(() => {
+ if (!sigma) return;
+ const camera = sigma.getCamera();
+ const update = () => {
+ // ratio < 1 = zoomed in, ratio > 1 = zoomed out. Invert for display.
+ setZoomPercent(Math.round((1 / camera.ratio) * 100));
+ };
+ update();
+ camera.on("updated", update);
+ return () => { camera.off("updated", update); };
+ }, [sigma]);
+
+ const handleZoomIn = useCallback(() => {
+ sigma?.getCamera().animatedZoom({ duration: 200 });
+ }, [sigma]);
+
+ const handleZoomOut = useCallback(() => {
+ sigma?.getCamera().animatedUnzoom({ duration: 200 });
+ }, [sigma]);
+
+ const handleFitToView = useCallback(() => {
+ sigma?.getCamera().animatedReset({ duration: 300 });
+ }, [sigma]);
+
+ return (
+
+ {labels.nodes}
+ {labels.edges}
+ {isLimited && labels.limitNote && (
+ · {labels.limitNote}
+ )}
+
+
+ );
+}
diff --git a/ui/web/src/components/graph/sigma-graph-filters.tsx b/ui/web/src/components/graph/sigma-graph-filters.tsx
new file mode 100644
index 00000000..1f949c3b
--- /dev/null
+++ b/ui/web/src/components/graph/sigma-graph-filters.tsx
@@ -0,0 +1,122 @@
+import { useCallback, useMemo, useEffect, useRef } from "react";
+import type Graph from "graphology";
+import { Filter, ChevronDown, ChevronUp } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface TypeCount {
+ type: string;
+ color: string;
+ count: number;
+}
+
+interface SigmaGraphFiltersProps {
+ graph: Graph;
+ /** Map of type → color for the legend dots */
+ typeColors: Record
+
+ {zoomPercent}%
+
+
+
+
+
+
+
+ {!collapsed && (
+
+ );
+}
diff --git a/ui/web/src/components/graph/sigma-graph-keyboard-help.tsx b/ui/web/src/components/graph/sigma-graph-keyboard-help.tsx
new file mode 100644
index 00000000..c86a693a
--- /dev/null
+++ b/ui/web/src/components/graph/sigma-graph-keyboard-help.tsx
@@ -0,0 +1,106 @@
+import { useState, useEffect, useRef } from "react";
+import { Keyboard, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface Shortcut {
+ keys: string[];
+ description: string;
+}
+
+const SHORTCUTS: Shortcut[] = [
+ { keys: ["+"], description: "Zoom in" },
+ { keys: ["-"], description: "Zoom out" },
+ { keys: ["R"], description: "Reset view (fit all)" },
+ { keys: ["F"], description: "Focus selected node" },
+ { keys: ["Esc"], description: "Deselect" },
+ { keys: ["/"], description: "Focus search" },
+ { keys: ["?"], description: "Show this help" },
+];
+
+/**
+ * Keyboard shortcuts help popover.
+ * Triggered by `?` key or by clicking the keyboard icon.
+ */
+export function SigmaGraphKeyboardHelp() {
+ const [open, setOpen] = useState(false);
+ const containerRef = useRef
+ {typeCounts.map(({ type, color, count }) => {
+ const hidden = hiddenTypes.has(type);
+ return (
+
+ );
+ })}
+
+ )}
+
+
+
+ {open && (
+
+ );
+}
diff --git a/ui/web/src/components/graph/sigma-graph-minimap.tsx b/ui/web/src/components/graph/sigma-graph-minimap.tsx
new file mode 100644
index 00000000..b53a2555
--- /dev/null
+++ b/ui/web/src/components/graph/sigma-graph-minimap.tsx
@@ -0,0 +1,177 @@
+import { useRef, useEffect, useCallback } from "react";
+import type Sigma from "sigma";
+import type Graph from "graphology";
+
+interface SigmaGraphMinimapProps {
+ sigma: Sigma | null;
+ graph: Graph;
+ /** Minimap canvas size in pixels */
+ size?: number;
+}
+
+/**
+ * Lightweight canvas-overlay minimap.
+ * Draws all nodes as small dots + a viewport rectangle showing the current camera view.
+ * Click to jump, no drag (KISS).
+ */
+export function SigmaGraphMinimap({ sigma, graph, size = 140 }: SigmaGraphMinimapProps) {
+ const canvasRef = useRef
+
+ )}
+
+
+ Keyboard shortcuts
+ +-
+ {SHORTCUTS.map(({ keys, description }) => (
+
- {description} +
- + {keys.map((k) => ( + + {k} + + ))} + +
+
+ ))}
+
+
+ );
+}
diff --git a/ui/web/src/components/graph/use-sigma-keyboard.ts b/ui/web/src/components/graph/use-sigma-keyboard.ts
new file mode 100644
index 00000000..c1f8c589
--- /dev/null
+++ b/ui/web/src/components/graph/use-sigma-keyboard.ts
@@ -0,0 +1,88 @@
+import { useEffect, type RefObject } from "react";
+import type Sigma from "sigma";
+import type Graph from "graphology";
+
+interface UseSigmaKeyboardOptions {
+ sigma: Sigma | null;
+ graph: Graph;
+ /** Container element — shortcuts only fire when this element or its children are focused */
+ containerRef: RefObject
+
+
+ {/* Dropdown results */}
+ {open && (
+
+ {results.map((r, i) => (
+
+ ))}
+
+ )}
+
+
+
+
{/* Header */}
+
);
}
diff --git a/ui/web/src/pages/agents/agent-detail/config-sections/memory-section.tsx b/ui/web/src/pages/agents/agent-detail/config-sections/memory-section.tsx
index c8487f72..42d2ff61 100644
--- a/ui/web/src/pages/agents/agent-detail/config-sections/memory-section.tsx
+++ b/ui/web/src/pages/agents/agent-detail/config-sections/memory-section.tsx
@@ -1,7 +1,7 @@
import { useTranslation } from "react-i18next";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
-import type { MemoryConfig } from "@/types/agent";
+import type { MemoryConfig, DreamingConfig } from "@/types/agent";
import { InfoLabel, numOrUndef } from "./config-section";
interface MemorySectionProps {
@@ -12,6 +12,10 @@ interface MemorySectionProps {
export function MemorySection({ value, onChange }: MemorySectionProps) {
const { t } = useTranslation("agents");
const s = "configSections.memory";
+ const ds = "configSections.dreaming";
+ const dreaming: DreamingConfig = value.dreaming ?? {};
+ const setDreaming = (patch: Partial) =>
+ onChange({ ...value, dreaming: { ...dreaming, ...patch } });
return (
+ {/* Phase 8 — Dreaming worker per-agent overrides.
+ Nested inside memory since dreaming is memory consolidation.
+ All fields optional; nil = use backend defaults. */}
+
@@ -305,6 +305,6 @@ export function AgentPermissionsTab({ agentId }: AgentPermissionsTabProps) {
)}
)}
-
@@ -95,6 +99,51 @@ export function MemorySection({ value, onChange }: MemorySectionProps) {
/>
+
+
+ {t(`${ds}.title`)}
+{t(`${ds}.description`)}
+
+ setDreaming({ enabled: v })}
+ />
+ {t(`${ds}.enabled`)}
+
+
+
+
+ {t(`${ds}.threshold`)}
+ setDreaming({ threshold: numOrUndef(e.target.value) })}
+ className="text-base md:text-sm"
+ />
+
+
+ {t(`${ds}.debounceMs`)}
+ setDreaming({ debounce_ms: numOrUndef(e.target.value) })}
+ className="text-base md:text-sm"
+ />
+
+
+ setDreaming({ verbose_log: v })}
+ />
+ {t(`${ds}.verboseLog`)}
+
+
{/* Tool Success Rate */}
-
+
`${v}%`} />
@@ -35,12 +39,12 @@ export function EvolutionMetricsCharts({ toolAggs, retrievalAggs, loading }: Evo
formatter={(value, _name, props) => {
const v = Number(value ?? 0);
const p = props?.payload as ToolAggregate | undefined;
- return [`${v.toFixed(1)}%`, p ? `${p.call_count} calls, ${p.avg_duration_ms.toFixed(0)}ms avg` : ""];
+ return [`${v.toFixed(1)}%`, p ? t("detail.evolution.tooltipCalls", { count: p.call_count, ms: p.avg_duration_ms.toFixed(0) }) : ""];
}}
/>
-
+
`${v}%`} />
@@ -65,12 +69,12 @@ export function EvolutionMetricsCharts({ toolAggs, retrievalAggs, loading }: Evo
formatter={(value, _name, props) => {
const v = Number(value ?? 0);
const p = props?.payload as RetrievalAggregate | undefined;
- return [`${v.toFixed(1)}%`, p ? `${p.query_count} queries, score ${p.avg_score.toFixed(2)}` : ""];
+ return [`${v.toFixed(1)}%`, p ? t("detail.evolution.tooltipQueries", { count: p.query_count, score: p.avg_score.toFixed(2) }) : ""];
}}
/>
= {
threshold: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
tool_order: "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300",
skill_add: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
- memory_prune: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
};
const STATUS_COLORS: Record = {
@@ -62,11 +61,11 @@ export function EvolutionSuggestionsTable({ suggestions, loading, onUpdateStatus
{t("detail.evolution.toolSuccess")}
- {toolAggs.length === 0 ? ( + {toolData.length === 0 ? ({t("detail.evolution.noMetrics")}
) : ({t("detail.evolution.retrievalQuality")}
- {retrievalAggs.length === 0 ? ( + {retrievalData.length === 0 ? ({t("detail.evolution.noMetrics")}
) : (| Type | -Suggestion | -Status | -Created | -Actions | +{t("detail.evolution.colType")} | +{t("detail.evolution.colSuggestion")} | +{t("detail.evolution.colStatus")} | +{t("detail.evolution.colCreated")} | +{t("detail.evolution.colActions")} |
|---|