open-managed-agents 0.1.0

package/dist/ui/managed-agents-console/src/sse.js

@@ -0,0 +1,185 @@
+const DEFAULT_MAX_FRAME_BYTES = 1024 * 1024;
+const DEFAULT_MAX_RECONNECTS = 5;
+const DEFAULT_RECONNECT_DELAY_MS = 250;
+
+export class SseFrameParser {
+  constructor({ maxFrameBytes = DEFAULT_MAX_FRAME_BYTES } = {}) {
+    this.maxFrameBytes = maxFrameBytes;
+    this.buffer = "";
+    this.eventType = "message";
+    this.eventId = "";
+    this.dataLines = [];
+    this.frameBytes = 0;
+  }
+
+  push(text) {
+    this.buffer += text;
+    const events = [];
+    while (true) {
+      const newline = this.buffer.indexOf("\n");
+      if (newline < 0) break;
+      let line = this.buffer.slice(0, newline);
+      this.buffer = this.buffer.slice(newline + 1);
+      if (line.endsWith("\r")) line = line.slice(0, -1);
+      const event = this.consumeLine(line);
+      if (event) events.push(event);
+    }
+    this.ensureBounded(this.buffer);
+    return events;
+  }
+
+  consumeLine(line) {
+    this.addFrameBytes(`${line}\n`);
+    if (line === "") return this.dispatch();
+    if (line.startsWith(":")) return null;
+    const separator = line.indexOf(":");
+    const field = separator < 0 ? line : line.slice(0, separator);
+    let value = separator < 0 ? "" : line.slice(separator + 1);
+    if (value.startsWith(" ")) value = value.slice(1);
+    if (field === "event") this.eventType = value || "message";
+    else if (field === "id" && !value.includes("\0")) this.eventId = value;
+    else if (field === "data") this.dataLines.push(value);
+    return null;
+  }
+
+  dispatch() {
+    if (this.dataLines.length === 0) {
+      this.resetFrame();
+      return null;
+    }
+    const event = {
+      id: this.eventId,
+      type: this.eventType,
+      data: this.dataLines.join("\n"),
+    };
+    this.resetFrame();
+    return event;
+  }
+
+  addFrameBytes(value) {
+    this.frameBytes += new TextEncoder().encode(value).byteLength;
+    if (this.frameBytes > this.maxFrameBytes) {
+      throw new Error("Session event stream frame exceeds the console limit");
+    }
+  }
+
+  ensureBounded(value) {
+    const pendingBytes = new TextEncoder().encode(value).byteLength;
+    if (this.frameBytes + pendingBytes > this.maxFrameBytes) {
+      throw new Error("Session event stream frame exceeds the console limit");
+    }
+  }
+
+  resetFrame() {
+    this.eventType = "message";
+    this.eventId = "";
+    this.dataLines = [];
+    this.frameBytes = 0;
+  }
+}
+
+export async function followEventStream({
+  url,
+  headers,
+  signal,
+  onEvent,
+  onState = () => {},
+  fetchImpl = fetch,
+  lastEventId,
+  maxReconnects = DEFAULT_MAX_RECONNECTS,
+  reconnectDelayMs = DEFAULT_RECONNECT_DELAY_MS,
+  maxFrameBytes = DEFAULT_MAX_FRAME_BYTES,
+}) {
+  let cursor = lastEventId || null;
+  let reconnects = 0;
+  const seen = new Set();
+  const seenOrder = [];
+
+  while (!signal?.aborted) {
+    const requestHeaders = { ...headers };
+    if (cursor) requestHeaders["last-event-id"] = cursor;
+    try {
+      const response = await fetchImpl(url, {
+        method: "GET",
+        headers: requestHeaders,
+        signal,
+      });
+      if (!response.ok) {
+        const error = new Error(`Session event stream failed (${response.status})`);
+        error.status = response.status;
+        if (response.status < 500) throw terminal(error);
+        throw error;
+      }
+      const contentType = response.headers?.get?.("content-type") ?? "";
+      if (!contentType.toLowerCase().includes("text/event-stream")) {
+        throw terminal(new Error("Session event stream returned an unexpected content type"));
+      }
+      if (!response.body) throw new Error("Session event stream returned no body");
+      onState({ status: "connected", lastEventId: cursor });
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      const parser = new SseFrameParser({ maxFrameBytes });
+      try {
+        while (!signal?.aborted) {
+          const next = await reader.read();
+          if (next.done) break;
+          const frames = parser.push(decoder.decode(next.value, { stream: true }));
+          for (const frame of frames) {
+            if (frame.id && seen.has(frame.id)) continue;
+            let event;
+            try {
+              event = JSON.parse(frame.data);
+            } catch {
+              throw terminal(new Error("Session event stream returned invalid JSON"));
+            }
+            if (frame.id) {
+              cursor = frame.id;
+              rememberSeen(seen, seenOrder, frame.id);
+            }
+            await onEvent(event, { id: frame.id, type: frame.type });
+            reconnects = 0;
+          }
+        }
+      } finally {
+        await reader.cancel().catch(() => {});
+      }
+      if (signal?.aborted) break;
+      throw new Error("Session event stream closed");
+    } catch (error) {
+      if (signal?.aborted || error?.name === "AbortError") break;
+      if (error?.terminal || reconnects >= maxReconnects) {
+        onState({ status: "failed", error, lastEventId: cursor });
+        throw error;
+      }
+      reconnects += 1;
+      onState({ status: "reconnecting", attempt: reconnects, error, lastEventId: cursor });
+      await abortableDelay(reconnectDelayMs * reconnects, signal);
+    }
+  }
+  onState({ status: "closed", lastEventId: cursor });
+  return cursor;
+}
+
+function terminal(error) {
+  error.terminal = true;
+  return error;
+}
+
+function rememberSeen(seen, order, id) {
+  seen.add(id);
+  order.push(id);
+  if (order.length > 2048) seen.delete(order.shift());
+}
+
+function abortableDelay(ms, signal) {
+  if (signal?.aborted) return Promise.resolve();
+  return new Promise((resolve) => {
+    const timeout = setTimeout(done, ms);
+    signal?.addEventListener("abort", done, { once: true });
+    function done() {
+      clearTimeout(timeout);
+      signal?.removeEventListener("abort", done);
+      resolve();
+    }
+  });
+}

package/dist/ui/managed-agents-console/src/states.jsx

@@ -0,0 +1,90 @@
+// states.jsx — loading skeletons, empty states, error envelope → window
+// Anthropic-shaped error envelope for the error state.
+function errEnvelope(resource) {
+  return JSON.stringify({
+    type:'error',
+    error:{ type:'api_error', message:`Failed to load ${resource}. The upstream OMA server returned an internal error.` },
+    request_id:'req_011CRvH9b2Qm4kZ2nXa7TfP',
+  }, null, 2);
+}
+
+// skeleton table — cols: array of widths (number=px fixed, 'grow'=flex)
+function SkeletonTable({ rows = 6, cols = ['grow', 90, 160, 70], lead = true }) {
+  return (
+    <div className="panel" aria-busy="true">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div className="skel-row" key={i}>
+          {lead && <span className="skel skel-dot" />}
+          {cols.map((c, j) => {
+            if (c === 'grow') return <span key={j} className="skel" style={{ height:11, flex:1, maxWidth: 120 + (i * 37 % 180) }} />;
+            if (typeof c === 'string' && c === 'pill') return <span key={j} className="skel skel-pill" style={{ width:84, flex:'0 0 auto' }} />;
+            return <span key={j} className="skel" style={{ height:11, width:c, flex:'0 0 auto' }} />;
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function EmptyState({ icon = 'folder', title, message, actionLabel, onAction, secondaryLabel, onSecondary }) {
+  return (
+    <div className="panel">
+      <div className="state">
+        <div className="state-ic"><Icon name={icon} size={22} /></div>
+        <h3>{title}</h3>
+        <p>{message}</p>
+        {(actionLabel || secondaryLabel) && (
+          <div className="actions">
+            {secondaryLabel && <button className="btn" onClick={onSecondary}>{secondaryLabel}</button>}
+            {actionLabel && <button className="btn btn-primary" onClick={onAction}><Icon name="plus" size={15} />{actionLabel}</button>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ErrorState({ resource = 'data', onRetry }) {
+  return (
+    <div className="panel">
+      <div className="state">
+        <div className="state-ic err"><Icon name="alert" size={22} /></div>
+        <h3>Couldn’t load {resource}</h3>
+        <p>The request to the OMA control plane failed. Check that the local server is running, then retry.</p>
+        <div className="err-envelope">
+          <div className="code scroll"><pre>{errEnvelope(resource)}</pre></div>
+          <div className="req"><Icon name="hash" size={13} />request_id <span className="mono">req_011CRvH9b2Qm4kZ2nXa7TfP</span></div>
+        </div>
+        <div className="actions">
+          <button className="btn btn-primary" onClick={onRetry}><Icon name="refresh" size={15} />Retry</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PartialNotice({ resource = 'data' }) {
+  return (
+    <div className="inline-warn">
+      <Icon name="alert" size={14} />
+      <span>{resource} reached the 100-page safety cap; this view may be incomplete.</span>
+    </div>
+  );
+}
+
+// inline stream skeleton (event rows)
+function SkeletonStream({ rows = 5 }) {
+  return (
+    <div className="panel" aria-busy="true">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div className="skel-row" key={i}>
+          <span className="skel skel-pill" style={{ width:52, flex:'0 0 auto' }} />
+          <span className="skel" style={{ height:11, flex:1, maxWidth: 200 + (i * 53 % 220) }} />
+          <span className="skel" style={{ height:10, width:46, flex:'0 0 auto', marginLeft:'auto' }} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+Object.assign(window, { SkeletonTable, SkeletonStream, EmptyState, ErrorState, PartialNotice });