@volter/editor-game 0.5.66 → 0.5.67

package/src/network/NetworkInspectorPanel.tsx

@@ -14,8 +14,9 @@
  * Degradation ladder rendered honestly (W3a contract, first system-adapter
  * consumer): no adapter → the register-an-adapter notice; an adapter missing
  * an optional capability → that section says "not provided by this adapter";
- * nothing is ever fabricated. Editor code never imports Colyseus here — only
- * the `NetworkingAdapter` interface (net-import-ban).
+ * nothing is ever fabricated. The panel reads only the `NetworkingAdapter`
+ * interface: the game's own, or the editor's observer of its Colyseus rooms
+ * (`services/game-network.ts`).
  *
  * Mounted as the `network` workspace utility (drawer tab beside
  * Console/Profiler, `core-utilities.tsx`), available only while a
@@ -37,6 +38,8 @@ import type {
   ConnectionState,
   NetConditioning,
   NetMessageEvent,
+  NetServerInspection,
+  NetTypeTraffic,
   NetworkingAdapter,
 } from '@volter/editor-project/adapter';
 import { memo, useEffect, useReducer, useRef, useState } from 'react';
@@ -100,8 +103,43 @@ function formatLeaf(value: unknown): string {
  * are NOT mounted: a fresh snapshot every poll re-renders only the visible
  * rows, never a collapsed subtree.
  */
-function StateTreeNode({ name, value, depth }: { name: string; value: unknown; depth: number }) {
+type StateEdit = (path: readonly (string | number)[], value: unknown) => Promise<void>;
+type StateDelete = (path: readonly (string | number)[]) => Promise<void>;
+type StateType = (path: readonly (string | number)[]) => string | null;
+
+/** A field's replicated type beside its name, dim (Godot's Replication panel's column). */
+function TypeTag({ type }: { type: string | null | undefined }) {
+  if (!type) return null;
+  return (
+    <span data-testid="net-tree-type" style={{ color: themeVars.content.dim, marginLeft: 6 }}>
+      {type}
+    </span>
+  );
+}
+
+function StateTreeNode({
+  name,
+  value,
+  depth,
+  path = [],
+  edit,
+  remove,
+  typeOf,
+}: {
+  name: string;
+  value: unknown;
+  depth: number;
+  path?: readonly string[];
+  /** The server's state edit (Monitor's), when the adapter offers one: leaves become editable. */
+  edit?: StateEdit | undefined;
+  /** The server's state delete (Monitor's), when offered: each key gets a remove control. */
+  remove?: StateDelete | undefined;
+  /** The schema's declared type for a path, when the adapter reads one. */
+  typeOf?: StateType | undefined;
+}) {
   const [expanded, setExpanded] = useState(depth === 0);
+  const [draft, setDraft] = useState<string | null>(null);
+  const [failed, setFailed] = useState<string | null>(null);
   const rowStyle: React.CSSProperties = {
     ...MONO,
     paddingLeft: 8 + depth * 14,
@@ -110,11 +148,71 @@ function StateTreeNode({ name, value, depth }: { name: string; value: unknown; d
   };
 
   if (!isBranch(value)) {
+    const editable = edit && (typeof value === 'number' || typeof value === 'string' || typeof value === 'boolean');
+    const commit = (next: unknown) => {
+      setDraft(null);
+      edit?.(path, next).then(
+        () => setFailed(null),
+        (caught: unknown) => setFailed(caught instanceof Error ? caught.message : String(caught)),
+      );
+    };
+    const parse = (text: string): unknown => {
+      if (typeof value === 'number') {
+        const number = Number(text);
+        return Number.isFinite(number) ? number : value;
+      }
+      return text;
+    };
     return (
-      <div style={rowStyle} data-testid="net-tree-leaf">
+      <div style={rowStyle} data-testid="net-tree-leaf" data-path={path.join('.')}>
         <span style={{ color: themeVars.content.primary }}>{name}</span>
         <span style={{ color: themeVars.content.muted }}>: </span>
-        <span style={{ color: themeVars.content.primary }}>{formatLeaf(value)}</span>
+        {draft !== null ? (
+          <TextInput
+            data-testid="net-tree-edit"
+            autoFocus
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') commit(parse(draft));
+              if (event.key === 'Escape') setDraft(null);
+            }}
+            onBlur={() => setDraft(null)}
+            style={{ width: 120 }}
+          />
+        ) : (
+          <span
+            data-testid={editable ? 'net-tree-value' : undefined}
+            title={editable ? (typeof value === 'boolean' ? 'Click to toggle on the server' : 'Click to edit on the server') : undefined}
+            style={{ color: themeVars.content.primary, cursor: editable ? 'text' : undefined }}
+            onClick={
+              editable
+                ? () => (typeof value === 'boolean' ? commit(!value) : setDraft(String(value)))
+                : undefined
+            }
+          >
+            {formatLeaf(value)}
+          </span>
+        )}
+        <TypeTag type={path.length > 0 ? typeOf?.(path) : null} />
+        {remove && path.length > 0 ? (
+          <button
+            type="button"
+            data-testid="net-tree-delete"
+            title="Delete this key on the server"
+            aria-label={`Delete ${path.join('.')} on the server`}
+            onClick={() =>
+              remove(path).then(
+                () => setFailed(null),
+                (caught: unknown) => setFailed(caught instanceof Error ? caught.message : String(caught)),
+              )
+            }
+            style={{ marginLeft: 8, border: 0, background: 'transparent', color: themeVars.content.muted, cursor: 'pointer' }}
+          >
+            ×
+          </button>
+        ) : null}
+        {failed ? <span style={{ color: themeVars.semantic.danger }}> {failed}</span> : null}
       </div>
     );
   }
@@ -136,10 +234,39 @@ function StateTreeNode({ name, value, depth }: { name: string; value: unknown; d
           {' '}
           {Array.isArray(value) ? `[${entries.length}]` : `{${entries.length}}`}
         </span>
+        <TypeTag type={path.length > 0 ? typeOf?.(path) : null} />
+        {failed ? <span style={{ color: themeVars.semantic.danger }}> {failed}</span> : null}
+        {remove && path.length > 0 ? (
+          <button
+            type="button"
+            data-testid="net-tree-delete"
+            title="Delete this key on the server"
+            aria-label={`Delete ${path.join('.')} on the server`}
+            onClick={(event) => {
+              event.stopPropagation();
+              remove(path).then(
+                () => setFailed(null),
+                (caught: unknown) => setFailed(caught instanceof Error ? caught.message : String(caught)),
+              );
+            }}
+            style={{ marginLeft: 8, border: 0, background: 'transparent', color: themeVars.content.muted, cursor: 'pointer' }}
+          >
+            ×
+          </button>
+        ) : null}
       </div>
       {expanded &&
         entries.map(([key, child]) => (
-          <StateTreeNode key={key} name={key} value={child} depth={depth + 1} />
+          <StateTreeNode
+            key={key}
+            name={key}
+            value={child}
+            depth={depth + 1}
+            path={depth === 0 ? [key] : [...path, key]}
+            edit={edit}
+            remove={remove}
+            typeOf={typeOf}
+          />
         ))}
     </div>
   );
@@ -252,6 +379,7 @@ function ConditionerControls({ adapter }: { adapter: NetworkingAdapter }) {
   const [cond, setCond] = useState<NetConditioning>(
     () => adapter.getConditioning?.() ?? { latencyMs: 0, jitterMs: 0, packetLoss: 0 },
   );
+  const limits = adapter.getConditioningLimits?.() ?? {};
   const apply = (next: NetConditioning) => {
     setCond(next);
     adapter.setConditioning?.(next);
@@ -281,13 +409,23 @@ function ConditionerControls({ adapter }: { adapter: NetworkingAdapter }) {
         testId="net-cond-jitter"
         onChange={(v) => apply({ ...cond, jitterMs: Math.max(0, v) })}
       />
-      <NumberInput
-        label="loss %"
-        value={cond.packetLoss * 100}
-        step={5}
-        testId="net-cond-loss"
-        onChange={(v) => apply({ ...cond, packetLoss: Math.min(1, Math.max(0, v / 100)) })}
-      />
+      {limits.packetLoss ? (
+        <span
+          data-testid="net-cond-loss-absent"
+          title={limits.packetLoss}
+          style={{ fontSize: fontSizeVar.sm, color: themeVars.content.muted }}
+        >
+          loss: not simulated
+        </span>
+      ) : (
+        <NumberInput
+          label="loss %"
+          value={cond.packetLoss * 100}
+          step={5}
+          testId="net-cond-loss"
+          onChange={(v) => apply({ ...cond, packetLoss: Math.min(1, Math.max(0, v / 100)) })}
+        />
+      )}
     </div>
   );
 }
@@ -445,6 +583,8 @@ export function NetworkInspectorPanel() {
   const adapterRef = useRef<NetworkingAdapter | null>(null);
   const [paused, setPaused] = useState(false);
   const [filter, setFilter] = useState('');
+  // The one message draft: sent as this client, or from the server to one client or all.
+  const [draft, setDraft] = useState<MessageDraft>({ type: '', payload: '' });
 
   useEffect(() => {
     const syncAdapter = () => {
@@ -550,6 +690,17 @@ export function NetworkInspectorPanel() {
         </AbsentNote>
       )}
 
+      {caps.server ? (
+        <ServerView
+          adapter={adapter}
+          ownSession={view.roomInfo?.sessionId ?? null}
+          ownRoom={view.roomInfo?.roomId ?? null}
+          draft={draft}
+        />
+      ) : null}
+      {caps.traffic ? <TrafficTable rows={adapter.getTrafficByType?.() ?? []} /> : null}
+      {caps.send ? <SendControls adapter={adapter} ping={caps.ping} draft={draft} setDraft={setDraft} /> : null}
+
       {/* Body: state tree | message log */}
       <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>
         <div
@@ -564,7 +715,14 @@ export function NetworkInspectorPanel() {
         >
           {caps.stateTree ? (
             snapshot != null ? (
-              <StateTreeNode name="state" value={snapshot} depth={0} />
+              <StateTreeNode
+                name="state"
+                value={snapshot}
+                depth={0}
+                edit={adapter.editServerState ? (path, next) => adapter.editServerState!(path, next) : undefined}
+                remove={adapter.deleteServerState ? (path) => adapter.deleteServerState!(path) : undefined}
+                typeOf={adapter.stateFieldType ? (path) => adapter.stateFieldType!(path) : undefined}
+              />
             ) : (
               <AbsentNote>Not connected — no replicated state to show.</AbsentNote>
             )
@@ -606,7 +764,9 @@ export function NetworkInspectorPanel() {
                   variant="ghost"
                   data-testid="net-log-clear"
                   onClick={() => {
+                    // Godot's Clear resets its tables too: the log and the traffic totals.
                     logRef.current.clear();
+                    adapter.clearTraffic?.();
                     force();
                   }}
                 >
@@ -642,3 +802,278 @@ export function NetworkInspectorPanel() {
     </div>
   );
 }
+
+/**
+ * Traffic per message type, both directions — Godot's network profiler reads a game's RPCs and
+ * its synchronizers as two tables of counts and sizes; a Colyseus room's are its messages and its
+ * state sync, which arrive here as rows of one table (`state`, `patch`, and each message type).
+ */
+function TrafficTable({ rows }: { rows: readonly NetTypeTraffic[] }) {
+  const cell = { padding: `0 ${spaceVar[3]}`, textAlign: 'right' as const, whiteSpace: 'nowrap' as const };
+  const bytes = (value: number) => (value >= 1024 ? `${(value / 1024).toFixed(1)} KiB` : `${value} B`);
+  return (
+    <div
+      data-testid="net-traffic"
+      style={{ maxHeight: 132, overflow: 'auto', borderBottom: `1px solid ${themeVars.boundary.default}` }}
+    >
+      {rows.length === 0 ? (
+        <AbsentNote>No traffic yet.</AbsentNote>
+      ) : (
+        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: fontSizeVar.sm, ...MONO }}>
+          <thead>
+            <tr style={{ color: themeVars.content.muted }}>
+              <th style={{ ...cell, textAlign: 'left' }}>Type</th>
+              <th style={cell}>In</th>
+              <th style={cell}>Bytes in</th>
+              <th style={cell}>Out</th>
+              <th style={cell}>Bytes out</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={row.type} data-testid="net-traffic-row">
+                <td style={{ ...cell, textAlign: 'left' }}>{row.type}</td>
+                <td style={cell}>{row.countIn || '-'}</td>
+                <td style={cell}>{row.countIn ? bytes(row.bytesIn) : '-'}</td>
+                <td style={cell}>{row.countOut || '-'}</td>
+                <td style={cell}>{row.countOut ? bytes(row.bytesOut) : '-'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
+
+interface MessageDraft {
+  readonly type: string;
+  readonly payload: string;
+}
+
+/** The draft as a message: its type and its parsed JSON payload (none when empty). */
+function draftMessage(draft: MessageDraft): { type: string; payload: unknown } {
+  if (draft.type.trim() === '') throw new Error('Name the message type first.');
+  return { type: draft.type, payload: draft.payload.trim() === '' ? undefined : (JSON.parse(draft.payload) as unknown) };
+}
+
+/**
+ * A message type and a JSON payload (Colyseus Monitor's Send dialog), sent into the room as this
+ * client so a server handler can be exercised without writing game code for it; the Server section
+ * sends the same draft from the server.
+ */
+function SendControls({
+  adapter,
+  ping,
+  draft,
+  setDraft,
+}: {
+  adapter: NetworkingAdapter;
+  ping: boolean;
+  draft: MessageDraft;
+  setDraft: (next: MessageDraft) => void;
+}) {
+  const [rtt, setRtt] = useState<string | null>(null);
+  const measure = () => {
+    setRtt('…');
+    adapter.ping?.().then(
+      (ms) => setRtt(`${ms} ms`),
+      (caught: unknown) => setRtt(caught instanceof Error ? caught.message : String(caught)),
+    );
+  };
+  const [error, setError] = useState<string | null>(null);
+  const send = () => {
+    try {
+      const message = draftMessage(draft);
+      adapter.sendMessage?.(message.type, message.payload);
+      setError(null);
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    }
+  };
+  return (
+    <div
+      data-testid="net-send"
+      style={{ display: 'flex', gap: spaceVar[2], alignItems: 'center', padding: spaceVar[2] }}
+    >
+      <TextInput
+        data-testid="net-send-type"
+        placeholder="Message type"
+        value={draft.type}
+        onChange={(event) => setDraft({ ...draft, type: event.target.value })}
+        style={{ width: 140 }}
+      />
+      <TextInput
+        data-testid="net-send-payload"
+        placeholder='Payload (JSON), e.g. {"x": 1}'
+        value={draft.payload}
+        onChange={(event) => setDraft({ ...draft, payload: event.target.value })}
+        style={{ flex: 1, minWidth: 80 }}
+      />
+      <Button type="button" variant="ghost" data-testid="net-send-button" disabled={draft.type.trim() === ''} onClick={send}>
+        Send as this client
+      </Button>
+      {ping ? (
+        <>
+          <Button type="button" variant="ghost" data-testid="net-ping" onClick={measure}>
+            Ping
+          </Button>
+          {rtt ? (
+            <span data-testid="net-rtt" style={{ fontSize: fontSizeVar.sm, ...MONO }}>
+              {rtt}
+            </span>
+          ) : null}
+        </>
+      ) : null}
+      {error ? (
+        <span data-testid="net-send-error" style={{ color: themeVars.semantic.danger, fontSize: fontSizeVar.sm }}>
+          {error}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * The room server's side — Colyseus Monitor's room list and room view, read from Monitor's own API
+ * on the server: every room (Inspect one), the machine's CPU and memory, and the inspected room's
+ * clients. Its acts are Monitor's: Broadcast and Dispose for the room, Send and Disconnect for a
+ * client, the message being the Send row's draft.
+ */
+function ServerView({
+  adapter,
+  ownSession,
+  ownRoom,
+  draft,
+}: {
+  adapter: NetworkingAdapter;
+  ownSession: string | null;
+  ownRoom: string | null;
+  draft: MessageDraft;
+}) {
+  const [inspection, setInspection] = useState<NetServerInspection | null | undefined>(undefined);
+  const [inspected, setInspected] = useState<string | undefined>(undefined);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    let live = true;
+    const read = () => {
+      void adapter.inspectServer?.(inspected).then(
+        (next) => {
+          if (live) setInspection(next);
+        },
+        (caught: unknown) => {
+          if (live) setError(caught instanceof Error ? caught.message : String(caught));
+        },
+      );
+    };
+    read();
+    // Monitor refreshes its room view every 5 s; this reads the server every 2.
+    const id = setInterval(read, 2000);
+    return () => {
+      live = false;
+      clearInterval(id);
+    };
+  }, [adapter, inspected]);
+  const act = (run: () => Promise<void> | undefined) => {
+    try {
+      run()?.then(
+        () => setError(null),
+        (caught: unknown) => setError(caught instanceof Error ? caught.message : String(caught)),
+      );
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    }
+  };
+  const seconds = (ms: number) => `${Math.round(ms / 1000)} s`;
+  const cell = { padding: `0 ${spaceVar[3]}`, whiteSpace: 'nowrap' as const };
+  if (inspection === undefined) return null;
+  if (inspection === null) {
+    return (
+      <AbsentNote testId="net-server-absent">
+        The room server serves no Monitor view (its `server` configuration sets VGAI_ROOM_MONITOR=1).
+      </AbsentNote>
+    );
+  }
+  const roomId = inspection.room?.roomId;
+  const actButton = (testId: string, label: string, run: () => Promise<void> | undefined) => (
+    <Button type="button" variant="ghost" data-testid={testId} onClick={() => act(run)}>
+      {label}
+    </Button>
+  );
+  return (
+    <div
+      data-testid="net-server"
+      style={{ padding: `${spaceVar[2]} 0`, borderBottom: `1px solid ${themeVars.boundary.default}`, fontSize: fontSizeVar.sm }}
+    >
+      <div data-testid="net-server-summary" style={{ padding: `0 ${spaceVar[3]}`, color: themeVars.content.muted }}>
+        Server · {inspection.rooms.length} room{inspection.rooms.length === 1 ? '' : 's'} · {inspection.connections}{' '}
+        connection{inspection.connections === 1 ? '' : 's'}
+        {inspection.cpuPercent !== null ? ` · CPU ${inspection.cpuPercent.toFixed(0)}%` : ''}
+        {inspection.memory ? ` · memory ${Math.round(inspection.memory.usedMb)} / ${Math.round(inspection.memory.totalMb)} MB` : ''}
+        {inspection.room ? ` · state ${inspection.room.stateBytes} B` : ''}
+      </div>
+      <table style={{ borderCollapse: 'collapse', ...MONO }}>
+        <tbody>
+          {inspection.rooms.map((room) => (
+            <tr key={room.roomId} data-testid="net-server-room" data-inspected={room.roomId === roomId || undefined}>
+              <td style={cell}>{room.name}</td>
+              <td style={cell}>{room.roomId}</td>
+              <td style={cell}>
+                {room.clients}
+                {room.maxClients !== null ? ` / ${room.maxClients}` : ''} clients
+              </td>
+              <td style={cell}>{room.locked ? 'locked' : 'open'}</td>
+              <td style={cell}>{seconds(room.elapsedMs)}</td>
+              <td style={cell}>
+                {room.roomId === roomId ? (
+                  <>
+                    {actButton('net-server-broadcast', 'Broadcast', () => {
+                      const message = draftMessage(draft);
+                      return adapter.broadcast?.(message.type, message.payload, room.roomId);
+                    })}
+                    {actButton('net-server-dispose', 'Dispose', () => adapter.disposeRoom?.(room.roomId))}
+                  </>
+                ) : (
+                  <Button type="button" variant="ghost" data-testid="net-server-inspect" onClick={() => setInspected(room.roomId)}>
+                    Inspect
+                  </Button>
+                )}
+              </td>
+            </tr>
+          ))}
+          {inspection.room?.clients.map((client) => (
+            <tr key={client.sessionId} data-testid="net-server-client">
+              <td style={cell}>client</td>
+              <td style={cell}>
+                {client.sessionId}
+                {client.sessionId === ownSession ? ' (this client)' : ''}
+              </td>
+              <td style={cell}>{seconds(client.elapsedMs)}</td>
+              <td style={cell} colSpan={3}>
+                {actButton('net-server-send', 'Send', () => {
+                  const message = draftMessage(draft);
+                  return adapter.sendToClient?.(client.sessionId, message.type, message.payload, roomId);
+                })}
+                {actButton('net-server-disconnect', 'Disconnect', () => adapter.disconnectClient?.(client.sessionId, roomId))}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {inspection.room && inspection.room.roomId !== ownRoom && inspection.room.state !== undefined ? (
+        // ANOTHER room's state, as Monitor's Inspect opens it: read from the server, and edited
+        // and deleted in THAT room. The tree below the section stays this client's own room.
+        <div data-testid="net-server-room-state" style={{ padding: `${spaceVar[2]} 0` }}>
+          <StateTreeNode
+            name={`room ${inspection.room.roomId}`}
+            value={inspection.room.state}
+            depth={0}
+            edit={adapter.editServerState ? (path, next) => adapter.editServerState!(path, next, roomId) : undefined}
+            remove={adapter.deleteServerState ? (path) => adapter.deleteServerState!(path, roomId) : undefined}
+          />
+        </div>
+      ) : null}
+      {error ? <AbsentNote>{error}</AbsentNote> : null}
+    </div>
+  );
+}

package/src/network/network-inspector-model.ts

@@ -9,8 +9,8 @@
  * pause/filter, the sparkline sample history, and the polyline geometry —
  * lives here.
  *
- * Editor code never imports Colyseus (net-import-ban) — only the
- * `NetworkingAdapter` interface.
+ * The inspector reads only the `NetworkingAdapter` interface; decoding a
+ * game's Colyseus rooms is the observer's (`services/game-network.ts`).
  */
 
 import type {
@@ -82,6 +82,14 @@ export interface NetworkCapabilityMap {
   /** The adapter can SET the local identity (`setPlayerIdentity`) — the
    *  inspector shows an EDITABLE name field. Implies `identity`. */
   identitySettable: boolean;
+  /** Traffic per message type (`getTrafficByType`). */
+  traffic: boolean;
+  /** Sending a message into the room as this client (`sendMessage`). */
+  send: boolean;
+  /** Measuring a round trip (`ping`). */
+  ping: boolean;
+  /** The room server's own view (`inspectServer`). */
+  server: boolean;
 }
 
 export function deriveNetworkCapabilities(
@@ -103,6 +111,10 @@ export function deriveNetworkCapabilities(
     stats: typeof adapter.getReplicationStats === 'function',
     identity: typeof adapter.getPlayerIdentity === 'function',
     identitySettable: typeof adapter.setPlayerIdentity === 'function',
+    traffic: typeof adapter.getTrafficByType === 'function',
+    send: typeof adapter.sendMessage === 'function',
+    ping: typeof adapter.ping === 'function',
+    server: typeof adapter.inspectServer === 'function',
   };
 }
 

package/src/play/play-log-events.ts

@@ -1,4 +1,4 @@
-import type { LogEntry } from '@volter/editor-core/editor-api';
+import type { LogEntry } from '@volter/editor-sdk/kit/editor-api';
 import type { TickStampedEvent } from '@volter/editor-project/adapter/system-adapter';
 
 /** Convert newly observed game-authored debug events into persistent JSONL entries. */