From b4cedfdfc5ae7c04381d13dc87e320e302fa8a62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9ctor=20Alvarez?= <halvarezr@outlook.com>
Date: Tue, 26 May 2026 20:46:49 -0600
Subject: [PATCH 1/3] Polish request-log rows and fix uncolored method pills
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The METHOD column rendered several event types as bare, uncolored text
because only HTTP verbs and a subset of socket events had color variants.
Add color coverage for the socket lifecycle events that were missing
(DROP, LIVE_CONNECT, LIVE_RECONNECT, DISPATCH_BURST) plus HTTP HEAD/OPTIONS,
and give .method a neutral tinted fallback so no method can ever render
without a pill background.

Also fix layout inconsistencies in the log table:
- Widen the METHOD column (62px → 104px) and add white-space: nowrap so
  long socket event names (LIVE_RECONNECT, DISPATCH_BURST) no longer wrap
  or overflow their cell.
- Unify pill sizing: matching padding and a min-width on .tag-type so the
  TYPE and METHOD pills align.
- Give rows breathing room (height 32px → min-height 36px, padding and gap
  bumped) for a more consistent vertical rhythm.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/index.css | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index ae10ba8..4ba3cbc 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -425,14 +425,21 @@ svg {
   font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 700;
-  padding: 2px 5px;
+  padding: 2px 7px;
   border-radius: 3px;
   letter-spacing: 0.02em;
   min-width: 42px;
   text-align: center;
   display: inline-block;
+  white-space: nowrap;
+  /* Neutral fallback so any method without a specific variant still
+     renders as a tinted pill instead of bare, uncolored text. */
+  color: var(--fg-2);
+  background: color-mix(in oklch, var(--fg-2) 12%, transparent);
 }
-.method.GET {
+.method.GET,
+.method.HEAD,
+.method.OPTIONS {
   color: var(--proxy);
   background: color-mix(in oklch, var(--proxy) 14%, transparent);
 }
@@ -690,11 +697,11 @@ svg {
 .log-row-head,
 .log-row {
   display: grid;
-  grid-template-columns: 78px 70px 62px 1fr 70px 80px 70px;
-  gap: 10px;
-  padding: 0 14px;
+  grid-template-columns: 78px 72px 104px 1fr 70px 80px 70px;
+  gap: 12px;
+  padding: 7px 16px;
   align-items: center;
-  height: 32px;
+  min-height: 36px;
   border-bottom: 1px solid color-mix(in oklch, var(--line) 60%, transparent);
 }
 .log-row-head {
@@ -745,12 +752,14 @@ svg {
 .tag-type {
   font-size: 10px;
   font-weight: 700;
-  padding: 2px 6px;
+  padding: 2px 7px;
   border-radius: 3px;
+  min-width: 52px;
   text-align: center;
   letter-spacing: 0.04em;
   font-family: var(--font-mono);
   display: inline-block;
+  white-space: nowrap;
 }
 .tag-type.MOCK {
   color: var(--mock);
@@ -774,10 +783,23 @@ svg {
 .method.SUBSCRIBE,
 .method.UNSUBSCRIBE,
 .method.DISPATCH,
-.method.ERROR {
+.method.DISPATCH_BURST {
   color: var(--accent);
   background: color-mix(in oklch, var(--accent) 14%, transparent);
 }
+.method.LIVE_CONNECT {
+  color: var(--ok);
+  background: color-mix(in oklch, var(--ok) 14%, transparent);
+}
+.method.LIVE_RECONNECT {
+  color: var(--warn);
+  background: color-mix(in oklch, var(--warn) 14%, transparent);
+}
+.method.DROP,
+.method.ERROR {
+  color: var(--err);
+  background: color-mix(in oklch, var(--err) 14%, transparent);
+}
 
 .status-200,
 .status-201,

From 86a51a977a6e16304e8f41ee28d4308b73ffce87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9ctor=20Alvarez?= <halvarezr@outlook.com>
Date: Tue, 26 May 2026 20:50:51 -0600
Subject: [PATCH 2/3] Default channels to mixed mode and forward proxy headers
 to live upstream

- Introduce DefaultChannelMode (mixed) and use it everywhere a channel
  lacks an explicit config, so channels both dispatch locally and forward
  to the live target by default instead of defaulting to mock-only.
- Forward standard reverse-proxy headers (X-Forwarded-For/-Host/-Proto,
  X-Real-IP) when dialing the live target, and stop stripping Origin so the
  upstream sees the same request the client would send directly.
- Add a LIVE_DIAL log event summarizing the dial (target, client host/addr,
  subprotocols, redacted headers) to make upstream connection issues
  debuggable without leaking credentials.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 channel_modes.go                           | 11 +++-
 channel_modes_test.go                      |  4 +-
 frontend/src/components/Sidebar.tsx        |  6 +-
 frontend/src/components/SocketPanel.tsx    |  2 +-
 frontend/src/stores/useChannelModeStore.ts |  2 +-
 socket.go                                  | 47 +++++++++++++-
 ws_proxy.go                                | 74 +++++++++++++++++++++-
 ws_proxy_test.go                           | 14 +++-
 8 files changed, 146 insertions(+), 14 deletions(-)

diff --git a/channel_modes.go b/channel_modes.go
index 8ee805a..c5e7484 100644
--- a/channel_modes.go
+++ b/channel_modes.go
@@ -24,6 +24,11 @@ const (
 	ModeMixed  ChannelMode = "mixed"
 )
 
+// DefaultChannelMode is applied to channels that do not yet have an explicit
+// configuration. Mixed lets the dashboard dispatch locally while still
+// forwarding client frames to the live target when one is configured.
+const DefaultChannelMode = ModeMixed
+
 type ChannelConfig struct {
 	Channel     string      `json:"channel"`
 	Mode        ChannelMode `json:"mode"`
@@ -72,7 +77,7 @@ func (r *ChannelModeRegistry) Get(channel string) ChannelConfig {
 	if ok {
 		return cfg
 	}
-	return ChannelConfig{Channel: channel, Mode: ModeMock}
+	return ChannelConfig{Channel: channel, Mode: DefaultChannelMode}
 }
 
 func (r *ChannelModeRegistry) Set(cfg ChannelConfig) error {
@@ -101,7 +106,7 @@ func (r *ChannelModeRegistry) Set(cfg ChannelConfig) error {
 		}
 	}
 	if cfg.Mode == "" {
-		cfg.Mode = ModeMock
+		cfg.Mode = DefaultChannelMode
 	}
 	r.channels[cfg.Channel] = cfg
 	snapshot := r.snapshotLocked()
@@ -140,7 +145,7 @@ func (r *ChannelModeRegistry) Delete(channel string) error {
 	r.mu.Unlock()
 
 	listenerCfg := previous
-	listenerCfg.Mode = ModeMock
+	listenerCfg.Mode = DefaultChannelMode
 	listenerCfg.UpdatedAt = now
 	eventCfg := listenerCfg
 
diff --git a/channel_modes_test.go b/channel_modes_test.go
index 7f13c5f..8b39ffa 100644
--- a/channel_modes_test.go
+++ b/channel_modes_test.go
@@ -18,8 +18,8 @@ func TestChannelModeRegistryGetSetSnapshotAndPersistence(t *testing.T) {
 	if err != nil {
 		t.Fatalf("NewChannelModeRegistry() error = %v", err)
 	}
-	if got := reg.Get("/scores").Mode; got != ModeMock {
-		t.Fatalf("default mode = %s, want mock", got)
+	if got := reg.Get("/scores").Mode; got != DefaultChannelMode {
+		t.Fatalf("default mode = %s, want %s", got, DefaultChannelMode)
 	}
 	if err := reg.Set(ChannelConfig{Channel: "/scores", Mode: ModeMixed, RateCapHz: 25}); err != nil {
 		t.Fatalf("Set() error = %v", err)
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index e06658f..28a0bd6 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -329,7 +329,7 @@ function SavedChannelsPanel({ showToast }: { showToast: (message: string, kind?:
   const confirm = useConfirm()
   const [adding, setAdding] = useState(false)
   const [channel, setChannel] = useState('')
-  const [mode, setMode] = useState<ChannelMode>('mock')
+  const [mode, setMode] = useState<ChannelMode>('mixed')
   const [saving, setSaving] = useState(false)
 
   const savedChannels = useMemo(
@@ -339,7 +339,7 @@ function SavedChannelsPanel({ showToast }: { showToast: (message: string, kind?:
 
   const resetForm = useCallback(() => {
     setChannel('')
-    setMode('mock')
+    setMode('mixed')
     setAdding(false)
   }, [])
 
@@ -452,7 +452,7 @@ function SavedChannelsPanel({ showToast }: { showToast: (message: string, kind?:
                 {cfg.channel}
               </span>
               <span className="px-1.5 py-0.5 rounded-sm border border-line text-[10px] uppercase text-fg-2">
-                {cfg.mode || 'mock'}
+                {cfg.mode || 'mixed'}
               </span>
               <button
                 type="button"
diff --git a/frontend/src/components/SocketPanel.tsx b/frontend/src/components/SocketPanel.tsx
index e382100..2f2ecbb 100644
--- a/frontend/src/components/SocketPanel.tsx
+++ b/frontend/src/components/SocketPanel.tsx
@@ -252,7 +252,7 @@ export function SocketPanel({
           ) : (
             <div className="channel-mode-list">
               {visibleChannels.map(item => {
-                const current = channelModes[item]?.mode ?? 'mock'
+                const current = channelModes[item]?.mode ?? 'mixed'
                 return (
                   <div className="channel-mode-row" key={item}>
                     <span title={item}>{item}</span>
diff --git a/frontend/src/stores/useChannelModeStore.ts b/frontend/src/stores/useChannelModeStore.ts
index a05c1c7..bd4f129 100644
--- a/frontend/src/stores/useChannelModeStore.ts
+++ b/frontend/src/stores/useChannelModeStore.ts
@@ -53,7 +53,7 @@ export const useChannelModeStore = create<ChannelModeStore>((set, get) => ({
       throw err
     }
   },
-  addChannel: async (channel, mode = 'mock', rateCapHz = 0) => {
+  addChannel: async (channel, mode = 'mixed', rateCapHz = 0) => {
     await get().setMode(channel, mode, rateCapHz)
   },
   deleteChannel: async (channel) => {
diff --git a/socket.go b/socket.go
index 26dccdd..60582b0 100644
--- a/socket.go
+++ b/socket.go
@@ -145,6 +145,7 @@ type SocketClient struct {
 	closeOnce       sync.Once
 	droppedToClient atomic.Uint64
 	upstreamHeaders http.Header
+	upstreamHost    string
 
 	mu            sync.RWMutex
 	subscriptions map[string]string
@@ -320,7 +321,7 @@ func IsWebSocketRequest(r *http.Request) bool {
 
 // extractUpstreamHeaders clones the inbound client headers, dropping the ones
 // that the WebSocket handshake or HTTP transport must control on the upstream
-// dial. Everything else (Authorization, Cookie, X-* etc.) is forwarded
+// dial. Everything else (Authorization, Cookie, Origin, X-* etc.) is forwarded
 // verbatim so the upstream sees the same request the client would send directly.
 func extractUpstreamHeaders(src http.Header) http.Header {
 	if len(src) == 0 {
@@ -336,7 +337,6 @@ func extractUpstreamHeaders(src http.Header) http.Header {
 		case "Connection",
 			"Upgrade",
 			"Host",
-			"Origin",
 			"Content-Length",
 			"X-Ditto-Ws-Mode":
 			continue
@@ -348,6 +348,48 @@ func extractUpstreamHeaders(src http.Header) http.Header {
 	return out
 }
 
+// applyForwardingHeaders annotates the headers Ditto sends to the live target
+// with the standard proxy markers so the upstream can see the original client.
+// Existing values are extended (X-Forwarded-For is appended) rather than
+// replaced, matching common reverse-proxy behaviour.
+func applyForwardingHeaders(headers http.Header, clientHost, clientAddr string, tls bool) http.Header {
+	if headers == nil {
+		headers = make(http.Header)
+	}
+	if ip := clientIPFromRemoteAddr(clientAddr); ip != "" {
+		if prev := headers.Get("X-Forwarded-For"); prev != "" {
+			headers.Set("X-Forwarded-For", prev+", "+ip)
+		} else {
+			headers.Set("X-Forwarded-For", ip)
+		}
+		if headers.Get("X-Real-IP") == "" {
+			headers.Set("X-Real-IP", ip)
+		}
+	}
+	if clientHost != "" && headers.Get("X-Forwarded-Host") == "" {
+		headers.Set("X-Forwarded-Host", clientHost)
+	}
+	if headers.Get("X-Forwarded-Proto") == "" {
+		if tls {
+			headers.Set("X-Forwarded-Proto", "wss")
+		} else {
+			headers.Set("X-Forwarded-Proto", "ws")
+		}
+	}
+	return headers
+}
+
+func clientIPFromRemoteAddr(addr string) string {
+	if addr == "" {
+		return ""
+	}
+	host, _, err := net.SplitHostPort(addr)
+	if err != nil {
+		return addr
+	}
+	return host
+}
+
 func shouldProxyWebSocket(r *http.Request) bool {
 	mode := strings.ToLower(strings.TrimSpace(r.Header.Get("X-Ditto-WS-Mode")))
 	queryMode := strings.ToLower(strings.TrimSpace(r.URL.Query().Get("__ditto_ws")))
@@ -503,6 +545,7 @@ func (h *SocketHub) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 		done:            make(chan struct{}),
 		subscriptions:   make(map[string]string),
 		upstreamHeaders: extractUpstreamHeaders(r.Header),
+		upstreamHost:    r.Host,
 	}
 	h.addClient(client)
 	h.publishSocketEvent("CONNECT", r.URL.RequestURI(), http.StatusSwitchingProtocols, "", 0)
diff --git a/ws_proxy.go b/ws_proxy.go
index bcb0c46..eb160f4 100644
--- a/ws_proxy.go
+++ b/ws_proxy.go
@@ -188,10 +188,23 @@ func (ch *liveChannel) run() {
 		client := ch.firstClient()
 		var subprotocols []string
 		var headers http.Header
+		var clientHost, clientAddr string
 		if client != nil {
 			subprotocols = client.protocol.Subprotocols()
-			headers = client.upstreamHeaders
+			headers = cloneHeaders(client.upstreamHeaders)
+			clientHost = client.upstreamHost
+			clientAddr = client.remoteAddr
 		}
+		headers = applyForwardingHeaders(headers, clientHost, clientAddr, isSecureTarget(target))
+		ch.bridge.hub.publishSocketEventWithSource(
+			"LIVE_DIAL",
+			ch.channel,
+			0,
+			fmt.Sprintf("target=%s client_host=%q client_addr=%q subprotocols=%v headers=%s",
+				target, clientHost, clientAddr, subprotocols, summarizeHeaders(headers)),
+			0,
+			"live",
+		)
 		conn, _, err := websocket.Dial(ch.ctx, target, &websocket.DialOptions{
 			Subprotocols: subprotocols,
 			HTTPHeader:   headers,
@@ -318,6 +331,65 @@ func nextLiveBackoff(current time.Duration) time.Duration {
 	return next
 }
 
+// cloneHeaders returns a shallow copy of h. Used before mutating headers that
+// belong to the SocketClient so subsequent dial attempts start from the same
+// baseline rather than accumulating forwarding markers.
+func cloneHeaders(h http.Header) http.Header {
+	if h == nil {
+		return make(http.Header)
+	}
+	out := make(http.Header, len(h))
+	for k, vs := range h {
+		copied := make([]string, len(vs))
+		copy(copied, vs)
+		out[k] = copied
+	}
+	return out
+}
+
+// isSecureTarget reports whether the live target uses a TLS-encrypted scheme
+// (wss/https) so the X-Forwarded-Proto header reflects the upstream transport.
+func isSecureTarget(target string) bool {
+	u, err := url.Parse(target)
+	if err != nil {
+		return false
+	}
+	scheme := strings.ToLower(u.Scheme)
+	return scheme == "wss" || scheme == "https"
+}
+
+// summarizeHeaders returns a one-line redacted view of the headers Ditto
+// forwards to the upstream live target. Authorization / Cookie / API key
+// values are truncated so logs do not leak credentials but still indicate
+// whether the header was present.
+func summarizeHeaders(h http.Header) string {
+	if len(h) == 0 {
+		return "{}"
+	}
+	keys := make([]string, 0, len(h))
+	for k := range h {
+		keys = append(keys, k)
+	}
+	parts := make([]string, 0, len(keys))
+	for _, k := range keys {
+		vs := h.Values(k)
+		v := ""
+		if len(vs) > 0 {
+			v = vs[0]
+		}
+		kl := strings.ToLower(k)
+		if kl == "authorization" || kl == "cookie" || strings.Contains(kl, "api-key") || strings.Contains(kl, "token") {
+			if len(v) > 12 {
+				v = v[:8] + "…(" + fmt.Sprintf("%d", len(v)) + "b)"
+			} else if v != "" {
+				v = "…(" + fmt.Sprintf("%d", len(v)) + "b)"
+			}
+		}
+		parts = append(parts, fmt.Sprintf("%s=%q", k, v))
+	}
+	return "{" + strings.Join(parts, " ") + "}"
+}
+
 func RegisterLiveTargetRoutes(mux *http.ServeMux, manager *LiveTargetManager) {
 	if manager == nil {
 		return
diff --git a/ws_proxy_test.go b/ws_proxy_test.go
index 4d6bd94..f098215 100644
--- a/ws_proxy_test.go
+++ b/ws_proxy_test.go
@@ -163,7 +163,10 @@ func TestLiveBridgeForwardsAuthHeaders(t *testing.T) {
 	if got := headers.Get("X-Custom-Auth"); got != "custom" {
 		t.Fatalf("X-Custom-Auth = %q, want custom", got)
 	}
-	for _, name := range []string{"Origin", "X-Ditto-Ws-Mode", "Sec-Websocket-Key"} {
+	if got := headers.Get("Origin"); got != "http://localhost:8888" {
+		t.Fatalf("Origin = %q, want forwarded verbatim", got)
+	}
+	for _, name := range []string{"X-Ditto-Ws-Mode", "Sec-Websocket-Key"} {
 		if got := headers.Get(name); name == "Sec-Websocket-Key" {
 			if got == "client-owned" {
 				t.Fatalf("%s forwarded client-owned value", name)
@@ -175,6 +178,15 @@ func TestLiveBridgeForwardsAuthHeaders(t *testing.T) {
 	if got := headers.Get("Sec-Websocket-Trace"); got != "" {
 		t.Fatalf("Sec-Websocket-Trace = %q, want filtered", got)
 	}
+	if got := headers.Get("X-Forwarded-For"); got == "" {
+		t.Fatalf("X-Forwarded-For missing, want the client IP")
+	}
+	if got := headers.Get("X-Forwarded-Proto"); got != "ws" && got != "wss" {
+		t.Fatalf("X-Forwarded-Proto = %q, want ws or wss", got)
+	}
+	if got := headers.Get("X-Forwarded-Host"); got == "" {
+		t.Fatalf("X-Forwarded-Host missing, want the original Host")
+	}
 }
 
 func TestLiveBridgeDetachAttachStressKeepsNewClient(t *testing.T) {

From 027617720734ffa118f95a22060778ad11d7239e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9ctor=20Alvarez?= <halvarezr@outlook.com>
Date: Tue, 26 May 2026 21:10:32 -0600
Subject: [PATCH 3/3] Stop reporting AppSync control frames as decode errors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AppSync emits periodic keep-alives ({"type":"ka"}) and subscription
lifecycle frames (subscribe, subscribe_success, complete, error, …) that
carry no {t, e} payload. decodeAppSyncEnvelope tried to decode them like
data frames and surfaced "appsync envelope not found" on every one,
flooding the live logs with spurious decode errors — even though actual
data frames (e.g. statsInfo) were decoding fine.

Recognize non-"data" frame types up front and return them as control
frames labelled by type with no decode error. Verified against recorded
traffic: 673 data frames still decode, 148 control frames now go quiet,
zero errors (previously all 148 errored).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 recordings.go      |  8 ++++++++
 recordings_test.go | 21 +++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/recordings.go b/recordings.go
index 2cd9566..3de6fdf 100644
--- a/recordings.go
+++ b/recordings.go
@@ -489,6 +489,14 @@ func decodeAppSyncEnvelope(schemas *SchemaRegistry, profile AdapterProfile, data
 	if err := json.Unmarshal(data, &outer); err != nil {
 		return nil, err.Error()
 	}
+	// AppSync emits periodic keep-alives and subscription-lifecycle frames
+	// (ka, connection_ack, subscribe, subscribe_success, complete, error, …)
+	// that carry no decodable payload. Surface them as control frames with the
+	// type as the label instead of reporting a spurious decode error. Only
+	// "data" frames carry a {t, e} payload to decode.
+	if typ, ok := outer["type"].(string); ok && typ != "" && typ != "data" {
+		return &DecodedFrame{Alias: typ}, ""
+	}
 	value := outer["event"]
 	if value == nil {
 		if payload, ok := outer["payload"].(map[string]any); ok {
diff --git a/recordings_test.go b/recordings_test.go
index 3958614..fc21ff0 100644
--- a/recordings_test.go
+++ b/recordings_test.go
@@ -308,6 +308,27 @@ func TestAppSyncDecoderReportsMissingPayload(t *testing.T) {
 	}
 }
 
+func TestAppSyncDecoderTreatsControlFramesAsBenign(t *testing.T) {
+	rec, err := NewRecorder(t.TempDir(), nil, nil, nil, false)
+	if err != nil {
+		t.Fatalf("NewRecorder() error = %v", err)
+	}
+	// AppSync sends keep-alives and subscription-lifecycle frames that carry
+	// no payload; they must not be reported as decode errors.
+	for _, typ := range []string{"ka", "connection_ack", "subscribe", "subscribe_success", "complete"} {
+		decoded, decodeErr := rec.decodeAppSyncProfile(
+			AdapterProfile{BaseAdapter: "appsync"},
+			[]byte(`{"type":"`+typ+`"}`),
+		)
+		if decodeErr != "" {
+			t.Fatalf("type %q: decodeErr = %q, want empty (control frame)", typ, decodeErr)
+		}
+		if decoded == nil || decoded.Alias != typ || decoded.TypeName != "" || decoded.PayloadJSON != nil {
+			t.Fatalf("type %q: decoded = %#v, want control frame labelled by type", typ, decoded)
+		}
+	}
+}
+
 func TestMixedModeLocalDispatchIsRecorded(t *testing.T) {
 	bus := NewEventBus()
 	modes, err := NewChannelModeRegistry(t.TempDir(), bus, false)