@schlenkr/ragents 0.1.0

package/plugins/ragents.orchestration/web/actor-conversation.ts

@@ -0,0 +1,64 @@
+import type { Message } from "@aicontainer/web/chat/types";
+import { withToolSummaries } from "@aicontainer/web/toolLine";
+import { runTurnOutputs, type RunActor, type RunActorInput, type RunView } from "./run-view";
+
+const ACTOR_HUES = [212, 158, 28, 283, 350, 190, 95, 320, 55, 245];
+const shortId = (id: string) => id.length > 12 ? `${id.slice(0, 12)}...` : id;
+
+export const actorInputLabel = (view: RunView, input: RunActorInput): string => input.subscriptionId
+  ? "Über Subscription zugestellt"
+  : `Zugestellt von @${view.actors.find((actor) => actor.id === input.enqueuedBy)?.handle ?? shortId(input.enqueuedBy)}`;
+
+export const actorConversation = (view: RunView, actor: RunActor): Message[] => {
+  const colorOf = (actorId: string) => {
+    if (view.actors.find((entry) => entry.id === actorId)?.kind === "script") return "hsl(220 10% 40%)";
+    const position = Math.max(view.actors.filter((entry) => entry.kind === "agent").findIndex((entry) => entry.id === actorId), 0);
+    return `hsl(${ACTOR_HUES[position % ACTOR_HUES.length]} 45% 42%)`;
+  };
+  const delivered = view.inputs.filter((input) => input.actorId === actor.id && input.lifecycle.kind !== "discarded" && input.presentation !== "background")
+    .map((input): { sequence: number; message: Message } => {
+      const fromOwner = input.enqueuedBy === view.ownerId;
+      const attachments = input.artifactIds.map((id) => {
+        const artifact = view.artifacts.find((entry) => entry.id === id);
+        if (!artifact) throw new Error(`Anhang ${id} fehlt in der Laufansicht`);
+        return {
+          name: artifact.title, mediaType: artifact.mediaType, size: artifact.size,
+          url: `/chat/${encodeURIComponent(view.id)}/attachments/${encodeURIComponent(id)}`,
+        };
+      });
+      return {
+        sequence: input.sequence,
+        message: {
+          key: input.id,
+          role: fromOwner ? "user" : "assistant",
+          sender: input.enqueuedBy,
+          text: input.content,
+          ...(attachments.length ? { attachments } : {}),
+          closed: true,
+          at: input.enqueuedAt,
+          ...(fromOwner ? {} : { bubble: { color: colorOf(input.enqueuedBy), label: actorInputLabel(view, input), side: "start" } }),
+        },
+      };
+    });
+  const answers = view.turns.filter((turn) => turn.actorId === actor.id)
+    .flatMap((turn) => runTurnOutputs(turn).map((output): { sequence: number; message: Message } => ({
+      sequence: output.sequence,
+      message: {
+        key: `${turn.id}:${output.sequence}`,
+        role: "assistant",
+        sender: actor.id,
+        text: output.text,
+        closed: true,
+        at: output.occurredAt,
+        bubble: { color: colorOf(actor.id), label: `@${actor.handle}`, side: "end" },
+      },
+    })));
+  return [...delivered, ...answers].sort((left, right) => left.sequence - right.sequence).map((entry) => entry.message);
+};
+
+export const actorChatMessages = (view: RunView, actor: RunActor, primaryMessages: readonly Message[], conversation?: readonly Message[]): Message[] =>
+  actor.id === view.primaryActorId
+    ? withToolSummaries(primaryMessages).map((message) => message.role === "user" || message.role === "assistant"
+      ? { ...message, sender: message.role === "user" ? view.ownerId : actor.id }
+      : message)
+    : conversation ? withToolSummaries([...conversation]) : actorConversation(view, actor);

package/plugins/ragents.orchestration/web/actor-header-settings.ts

@@ -0,0 +1,41 @@
+import { createLocalStorageSetting } from "@aicontainer/web/lib/local-storage-setting";
+import type { RunActor } from "./run-view";
+
+export const ACTOR_HEADER_MODES = ["all", "active", "visible", "agent", "script"] as const;
+export type ActorHeaderMode = typeof ACTOR_HEADER_MODES[number];
+export const ACTOR_HEADER_MODE_LABELS: Record<ActorHeaderMode, string> = {
+  all: "Alle",
+  active: "Aktive",
+  visible: "Sichtbare",
+  agent: "LLM-Agenten",
+  script: "TypeScript",
+};
+
+export const actorHeaderStorageKey = (runId: string) => `ragents.orchestration.actor-header:v2:${runId}`;
+
+export function parseActorHeaderMode(raw: string | null): ActorHeaderMode {
+  if (raw === null) return "visible";
+  if (ACTOR_HEADER_MODES.some((mode) => mode === raw)) return raw as ActorHeaderMode;
+  throw new Error("Die gespeicherte Actor-Anzeige ist ungültig. Erlaubt sind all, active, visible, agent und script.");
+}
+
+export const actorOnStage = (actor: RunActor, primaryActorId: string | null | undefined, stage: ReadonlySet<string>) =>
+  actor.id === primaryActorId || stage.has(`@${actor.handle}`);
+
+export const actorVisibleInHeader = (actor: RunActor, mode: ActorHeaderMode, onStage: boolean) =>
+  actor.kind !== "human" && (mode === "all" || (mode === "active" ? actor.lifecycle?.kind !== "stopped" : mode === "visible" ? onStage : actor.kind === mode));
+
+const setting = createLocalStorageSetting({
+  changeEvent: "ragents-actor-header-change",
+  matchesKey: (key) => key.startsWith("ragents.orchestration.actor-header:"),
+  parse: parseActorHeaderMode,
+  serialize: (mode: ActorHeaderMode) => mode,
+});
+
+export function useActorHeaderMode(runId: string): ActorHeaderMode {
+  return setting.useValue(actorHeaderStorageKey(runId));
+}
+
+export function saveActorHeaderMode(runId: string, mode: ActorHeaderMode) {
+  setting.save(actorHeaderStorageKey(runId), mode);
+}

package/plugins/ragents.orchestration/web/api.ts

@@ -0,0 +1,33 @@
+import { coreContracts } from "@aicontainer/server/api/contracts";
+import { runContracts } from "@aicontainer/ragents/src/http/contracts";
+import type { ChatAttachmentInput } from "@aicontainer/web/chat/types";
+import { rpc } from "@aicontainer/web/rpc";
+
+export const enqueueActorInput = async (runId: string, actorId: string, content: string, artifactIds: string[] = []) => {
+  await rpc.call(runContracts.enqueueInput, { runId, commandId: crypto.randomUUID(), actorId, content, artifactIds });
+};
+
+export const sendActorMessage = async (runId: string, actorId: string, text: string, attachments?: ChatAttachmentInput[]) => {
+  await rpc.call(coreContracts.chat.sendToActor, { runId, actorId, text, attachments });
+};
+
+export const resolveAction = async (
+  runId: string,
+  actionId: string,
+  decision: "approved" | "dismissed",
+  response?: string,
+) => {
+  await rpc.call(runContracts.resolveAction, { runId, commandId: crypto.randomUUID(), actionId, decision, response });
+};
+
+export const stopActor = async (runId: string, actorId: string, reason: string) => {
+  await rpc.call(runContracts.stopActor, { runId, commandId: crypto.randomUUID(), actorId, reason });
+};
+
+export const restartActor = async (runId: string, actorId: string) => {
+  await rpc.call(runContracts.restartActor, { runId, commandId: crypto.randomUUID(), actorId });
+};
+
+export const stopRun = async (runId: string, reason: string) => {
+  await rpc.call(runContracts.stopAll, { runId, commandId: crypto.randomUUID(), reason });
+};

package/plugins/ragents.orchestration/web/canvas-layout-storage.ts

@@ -0,0 +1,39 @@
+export interface CanvasCamera { x: number; y: number; zoom: number }
+export interface CanvasSize { width: number; height: number }
+export interface CanvasElementSizes {
+  canvasSizes: [string, CanvasSize][];
+  actorSizes: [string, CanvasSize][];
+  expandedActors: string[];
+  collapsedElements: string[];
+}
+
+export const canvasLayoutStorageKey = (runId: string, part: "camera" | "elements") =>
+  `ragents.orchestration.canvas-layout:${runId}:${part}`;
+
+const record = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === "object" && !Array.isArray(value);
+const finite = (value: unknown): value is number => typeof value === "number" && Number.isFinite(value);
+const positive = (value: unknown): value is number => finite(value) && value > 0;
+
+export function parseCanvasCamera(raw: string | null): CanvasCamera | undefined {
+  if (raw === null) return undefined;
+  const value: unknown = JSON.parse(raw);
+  if (!record(value) || !finite(value.x) || !finite(value.y) || !positive(value.zoom) || value.zoom > 2.5) {
+    throw new Error("Die gespeicherte Canvas-Kamera ist ungültig.");
+  }
+  return { x: value.x, y: value.y, zoom: value.zoom };
+}
+
+export function parseCanvasElementSizes(raw: string | null): CanvasElementSizes {
+  if (raw === null) return { canvasSizes: [], actorSizes: [], expandedActors: [], collapsedElements: [] };
+  const value: unknown = JSON.parse(raw);
+  const sizes = (entries: unknown) => Array.isArray(entries) && entries.every((entry: unknown) =>
+    Array.isArray(entry) && entry.length === 2 && typeof entry[0] === "string"
+    && record(entry[1]) && positive(entry[1].width) && positive(entry[1].height));
+  const ids = (entries: unknown) => Array.isArray(entries) && entries.every((entry: unknown) => typeof entry === "string");
+  if (!record(value) || !sizes(value.canvasSizes) || !sizes(value.actorSizes)
+    || !ids(value.expandedActors) || !ids(value.collapsedElements)) {
+    throw new Error("Die gespeicherten Canvas-Größen sind ungültig.");
+  }
+  return value as unknown as CanvasElementSizes;
+}

package/plugins/ragents.orchestration/web/canvas-layout.ts

@@ -0,0 +1,326 @@
+export interface SceneLeaf {
+  kind: "leaf";
+  key: string;
+  width: number;
+  height: number;
+}
+
+export type GroupLayout =
+  | { type: "stack"; axis: "h" | "v"; gap: number }
+  | { type: "wrap"; axis: "h" | "v"; limit: number; gap: number }
+  | { type: "grid"; columns: number; gap: number }
+  | { type: "circle"; gap: number }
+  | { type: "tree"; direction: "right" | "down"; rankGap: number; siblingGap: number };
+
+/** A frame is a caption above the members, an outline around them, or both. */
+export interface SceneFrame {
+  label?: string;
+  outline: boolean;
+}
+
+export interface SceneGroup {
+  kind: "group";
+  key: string;
+  layout: GroupLayout;
+  children: SceneNode[];
+  frame?: SceneFrame;
+}
+
+export type SceneNode = SceneLeaf | SceneGroup;
+
+export interface SceneLabel {
+  fromKey: string;
+  toKey: string;
+  width: number;
+  height: number;
+}
+
+const LABEL_CLEARANCE = 64;
+
+/** Reserve label space in the smallest group containing both endpoints. */
+export const withLabelSpacing = (root: SceneNode, labels: readonly SceneLabel[]): SceneNode => {
+  const paths = new Map<string, SceneGroup[]>();
+  const collect = (node: SceneNode, parents: SceneGroup[]) => {
+    if (node.kind === "leaf") paths.set(node.key, parents);
+    else node.children.forEach((child) => collect(child, [...parents, node]));
+  };
+  collect(root, []);
+  const spacing = new Map<SceneGroup, { width: number; height: number }>();
+  for (const label of labels) {
+    if (label.fromKey === label.toKey) continue;
+    const from = paths.get(label.fromKey);
+    const to = paths.get(label.toKey);
+    if (!from || !to) continue;
+    let common: SceneGroup | undefined;
+    for (let i = 0; i < Math.min(from.length, to.length) && from[i] === to[i]; i++) common = from[i];
+    if (!common) continue;
+    const previous = spacing.get(common);
+    spacing.set(common, {
+      width: Math.max(previous?.width ?? 0, label.width + LABEL_CLEARANCE),
+      height: Math.max(previous?.height ?? 0, label.height + LABEL_CLEARANCE),
+    });
+  }
+  const update = (node: SceneNode): SceneNode => {
+    if (node.kind === "leaf") return node;
+    const room = spacing.get(node);
+    let layout = node.layout;
+    if (room) {
+      switch (layout.type) {
+        case "stack":
+          layout = { ...layout, gap: Math.max(layout.gap, layout.axis === "h" ? room.width : room.height) };
+          break;
+        case "tree":
+          layout = { ...layout,
+            rankGap: Math.max(layout.rankGap, layout.direction === "right" ? room.width : room.height),
+            siblingGap: Math.max(layout.siblingGap, layout.direction === "right" ? room.height : room.width),
+          };
+          break;
+        default:
+          layout = { ...layout, gap: Math.max(layout.gap, room.width, room.height) };
+      }
+    }
+    return { ...node, layout, children: node.children.map(update) };
+  };
+  return labels.length ? update(root) : root;
+};
+
+/** A positioned box; x and y are the top-left corner in world coordinates. */
+export interface PlacedBox {
+  key: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface PlacedFrame extends PlacedBox {
+  label?: string;
+  outline: boolean;
+}
+
+export interface SceneLayout {
+  boxes: PlacedBox[];
+  frames: PlacedFrame[];
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export const FRAME_PADDING = 18;
+export const FRAME_LABEL_HEIGHT = 22;
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+interface Offset {
+  x: number;
+  y: number;
+}
+
+const extent = (sizes: readonly Size[], offsets: readonly Offset[]): Size => ({
+  width: Math.max(0, ...sizes.map((size, index) => offsets[index].x + size.width)),
+  height: Math.max(0, ...sizes.map((size, index) => offsets[index].y + size.height)),
+});
+
+const stackOffsets = (sizes: readonly Size[], axis: "h" | "v", gap: number): Offset[] => {
+  let cursor = 0;
+  return sizes.map((size) => {
+    const offset = axis === "h" ? { x: cursor, y: 0 } : { x: 0, y: cursor };
+    cursor += (axis === "h" ? size.width : size.height) + gap;
+    return offset;
+  });
+};
+
+const wrapOffsets = (sizes: readonly Size[], axis: "h" | "v", limit: number, gap: number): Offset[] => {
+  const offsets: Offset[] = [];
+  let main = 0;
+  let cross = 0;
+  let lineCross = 0;
+  let lineCount = 0;
+  for (const size of sizes) {
+    const mainSize = axis === "h" ? size.width : size.height;
+    const crossSize = axis === "h" ? size.height : size.width;
+    if (lineCount > 0 && main + mainSize > limit) {
+      cross += lineCross + gap;
+      main = 0;
+      lineCross = 0;
+      lineCount = 0;
+    }
+    offsets.push(axis === "h" ? { x: main, y: cross } : { x: cross, y: main });
+    main += mainSize + gap;
+    lineCross = Math.max(lineCross, crossSize);
+    lineCount += 1;
+  }
+  return offsets;
+};
+
+const gridOffsets = (sizes: readonly Size[], columns: number, gap: number): Offset[] => {
+  const cellWidth = Math.max(0, ...sizes.map((size) => size.width));
+  const cellHeight = Math.max(0, ...sizes.map((size) => size.height));
+  return sizes.map((size, index) => ({
+    x: (index % columns) * (cellWidth + gap) + (cellWidth - size.width) / 2,
+    y: Math.floor(index / columns) * (cellHeight + gap) + (cellHeight - size.height) / 2,
+  }));
+};
+
+/** Room between ring neighbours for a short line and its label. */
+const CIRCLE_LINK_ROOM = 96;
+
+const circleOffsets = (sizes: readonly Size[], gap: number): Offset[] => {
+  const count = sizes.length;
+  if (count <= 1) return sizes.map(() => ({ x: 0, y: 0 }));
+  const diagonals = sizes.map((size) => Math.hypot(size.width, size.height));
+  const chord = Math.max(...sizes.map((size, index) => {
+    const next = sizes[(index + 1) % count];
+    return Math.max(
+      (diagonals[index] + diagonals[(index + 1) % count]) / 2 + gap,
+      (size.width + next.width) / 2 + CIRCLE_LINK_ROOM,
+    );
+  }));
+  const radius = chord / (2 * Math.sin(Math.PI / count));
+  const centers = sizes.map((_, index) => {
+    const angle = -Math.PI / 2 + index * 2 * Math.PI / count;
+    return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius };
+  });
+  const minX = Math.min(...centers.map((center, index) => center.x - sizes[index].width / 2));
+  const minY = Math.min(...centers.map((center, index) => center.y - sizes[index].height / 2));
+  return centers.map((center, index) => ({
+    x: center.x - sizes[index].width / 2 - minX,
+    y: center.y - sizes[index].height / 2 - minY,
+  }));
+};
+
+const treeOffsets = (sizes: readonly Size[], direction: "right" | "down", rankGap: number, siblingGap: number): Offset[] => {
+  if (sizes.length === 0) return [];
+  const [node, ...subtrees] = sizes;
+  const branch = direction === "right"
+    ? stackOffsets(subtrees, "v", siblingGap).map((offset) => ({ x: node.width + rankGap, y: offset.y }))
+    : stackOffsets(subtrees, "h", siblingGap).map((offset) => ({ x: offset.x, y: node.height + rankGap }));
+  return [{ x: 0, y: 0 }, ...branch];
+};
+
+const childOffsets = (layout: GroupLayout, sizes: readonly Size[]): Offset[] => {
+  switch (layout.type) {
+    case "stack": return stackOffsets(sizes, layout.axis, layout.gap);
+    case "wrap": return wrapOffsets(sizes, layout.axis, layout.limit, layout.gap);
+    case "grid": return gridOffsets(sizes, layout.columns, layout.gap);
+    case "circle": return circleOffsets(sizes, layout.gap);
+    case "tree": return treeOffsets(sizes, layout.direction, layout.rankGap, layout.siblingGap);
+  }
+};
+
+const framePadding = (group: SceneGroup): number => (group.frame?.outline ? FRAME_PADDING : 0);
+
+const frameInset = (group: SceneGroup): Offset => ({
+  x: framePadding(group),
+  y: framePadding(group) + (group.frame?.label ? FRAME_LABEL_HEIGHT : 0),
+});
+
+interface Measured {
+  size: Size;
+  offsets: Offset[];
+}
+
+const measure = (node: SceneNode, cache: Map<SceneNode, Measured>): Measured => {
+  const known = cache.get(node);
+  if (known) return known;
+  let result: Measured;
+  if (node.kind === "leaf") {
+    result = { size: { width: node.width, height: node.height }, offsets: [] };
+  } else {
+    const sizes = node.children.map((child) => measure(child, cache).size);
+    const offsets = childOffsets(node.layout, sizes);
+    const inner = extent(sizes, offsets);
+    const inset = frameInset(node);
+    result = {
+      size: {
+        width: inner.width + inset.x + framePadding(node),
+        height: inner.height + inset.y + framePadding(node),
+      },
+      offsets,
+    };
+  }
+  cache.set(node, result);
+  return result;
+};
+
+const arrange = (node: SceneNode, x: number, y: number, cache: Map<SceneNode, Measured>, out: SceneLayout) => {
+  const { size, offsets } = measure(node, cache);
+  if (node.kind === "leaf") {
+    out.boxes.push({ key: node.key, x, y, width: size.width, height: size.height });
+    return;
+  }
+  if (node.frame) {
+    out.frames.push({ key: node.key, x, y, width: size.width, height: size.height, label: node.frame.label, outline: node.frame.outline });
+  }
+  const inset = frameInset(node);
+  node.children.forEach((child, index) => {
+    arrange(child, x + inset.x + offsets[index].x, y + inset.y + offsets[index].y, cache, out);
+  });
+};
+
+/** Places every leaf and frame of the scene; the root's top-left corner lands at the given origin. */
+export const layoutScene = (root: SceneNode, originX = 0, originY = 0): SceneLayout => {
+  const cache = new Map<SceneNode, Measured>();
+  const out: SceneLayout = { boxes: [], frames: [], x: originX, y: originY, width: 0, height: 0 };
+  arrange(root, originX, originY, cache, out);
+  const { size } = measure(root, cache);
+  out.width = size.width;
+  out.height = size.height;
+  return out;
+};
+
+export type BoundaryShape = "rect" | "circle" | "diamond";
+
+export interface LineEnd {
+  box: PlacedBox;
+  boundary: BoundaryShape;
+}
+
+export interface LineGeometry {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  middle: { x: number; y: number };
+}
+
+const LINE_MARGIN = 3;
+
+const exitDistance = (end: LineEnd, dx: number, dy: number): number => {
+  const halfWidth = end.box.width / 2;
+  const halfHeight = end.box.height / 2;
+  const ax = Math.abs(dx);
+  const ay = Math.abs(dy);
+  switch (end.boundary) {
+    case "rect":
+      return Math.min(ax > 0 ? halfWidth / ax : Infinity, ay > 0 ? halfHeight / ay : Infinity);
+    case "circle":
+      return Math.min(halfWidth, halfHeight);
+    case "diamond":
+      return 1 / (ax / halfWidth + ay / halfHeight);
+  }
+};
+
+/** A straight connector between two boxes, trimmed to their outlines. */
+export const lineGeometry = (from: LineEnd, to: LineEnd): LineGeometry => {
+  const start = { x: from.box.x + from.box.width / 2, y: from.box.y + from.box.height / 2 };
+  const finish = { x: to.box.x + to.box.width / 2, y: to.box.y + to.box.height / 2 };
+  const dx = finish.x - start.x;
+  const dy = finish.y - start.y;
+  const length = Math.hypot(dx, dy);
+  if (length < 1) return { x1: start.x, y1: start.y, x2: finish.x, y2: finish.y, middle: start };
+  const ux = dx / length;
+  const uy = dy / length;
+  const fromTrim = exitDistance(from, ux, uy) + LINE_MARGIN;
+  const toTrim = exitDistance(to, ux, uy) + LINE_MARGIN;
+  if (fromTrim + toTrim >= length) return { x1: start.x, y1: start.y, x2: finish.x, y2: finish.y, middle: { x: (start.x + finish.x) / 2, y: (start.y + finish.y) / 2 } };
+  const x1 = start.x + ux * fromTrim;
+  const y1 = start.y + uy * fromTrim;
+  const x2 = finish.x - ux * toTrim;
+  const y2 = finish.y - uy * toTrim;
+  return { x1, y1, x2, y2, middle: { x: (x1 + x2) / 2, y: (y1 + y2) / 2 } };
+};