@schlenkr/ragents 0.1.0

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

@@ -0,0 +1,311 @@
+import {
+  canvasEntityOf,
+  canvasShapeSize,
+  isCanvasGroupNode,
+  type CanvasArrow,
+  type CanvasGroupNode,
+  type CanvasLayout,
+  type CanvasLineStyle,
+  type CanvasShape,
+} from "../contract";
+import type { BoundaryShape, GroupLayout, SceneGroup, SceneLeaf, SceneNode } from "./canvas-layout";
+import type { RunActor, RunView } from "./run-view";
+import { ACTOR_PROGRAMS_STATE_ID, type ActorProgramState } from "@aicontainer/plugins/ragents.actor-programs/contract";
+
+export const DEFAULT_GAP = 44;
+export const RANK_GAP = 86;
+export const TOP_LEVEL_GAP = 56;
+export const ANCHORED_GAP = 20;
+export const AUTO_APP_MAX_COLUMNS = 3;
+export const UNPLACED_LABEL = "Automatisch angeordnet";
+
+export interface SceneApp {
+  key: string;
+  id: string;
+  width: number;
+  height: number;
+  anchorActorId?: string;
+}
+
+export type SceneLeafInfo =
+  | { type: "actor"; actor: RunActor }
+  | { type: "app"; app: SceneApp }
+  | { type: "shape"; shape: CanvasShape }
+  | { type: "missing"; reference: string };
+
+export interface SceneLine {
+  key: string;
+  fromKey: string;
+  toKey: string;
+  label?: string;
+  arrow: CanvasArrow;
+  style: CanvasLineStyle;
+}
+
+export interface Scene {
+  root: SceneGroup;
+  leaves: Map<string, SceneLeafInfo>;
+  lines: SceneLine[];
+  notices: string[];
+}
+
+export interface SceneInput {
+  view: RunView;
+  layout?: CanvasLayout;
+  layoutProblem?: string;
+  actorSize: (actor: RunActor) => { width: number; height: number };
+  apps: readonly SceneApp[];
+  hiddenAppIds?: readonly string[];
+  hiddenActorIds?: readonly string[];
+  showConnections?: boolean;
+}
+
+const ACTOR_KIND_ORDER: Record<string, number> = { human: 0, agent: 1, script: 2 };
+
+export const actorSort = (left: RunActor, right: RunActor) =>
+  (ACTOR_KIND_ORDER[left.kind] ?? 3) - (ACTOR_KIND_ORDER[right.kind] ?? 3)
+  || String(left.createdAt ?? "").localeCompare(String(right.createdAt ?? ""))
+  || left.id.localeCompare(right.id);
+
+export const boundaryOf = (info: SceneLeafInfo): BoundaryShape =>
+  info.type === "shape" ? (info.shape.kind === "circle" ? "circle" : "diamond") : "rect";
+
+const missingSize = (reference: string) => ({
+  width: Math.min(360, Math.max(160, 60 + reference.length * 8)),
+  height: 36,
+});
+
+const isStopped = (actor: RunActor) => actor.lifecycle?.kind === "stopped";
+
+/** Mirrors the server: an active actor wins the handle, otherwise the latest one. */
+const actorsByHandle = (view: RunView): Map<string, RunActor> => {
+  const byHandle = new Map<string, RunActor>();
+  for (const actor of view.actors) {
+    if (actor.kind === "human") continue;
+    const handle = actor.handle.toLowerCase();
+    const current = byHandle.get(handle);
+    if (!current || isStopped(current)) byHandle.set(handle, actor);
+  }
+  return byHandle;
+};
+
+const groupLayoutOf = (node: CanvasGroupNode): GroupLayout => {
+  const gap = node.gap ?? DEFAULT_GAP;
+  switch (node.group) {
+    case "h": return { type: "stack", axis: "h", gap };
+    case "v": return { type: "stack", axis: "v", gap };
+    case "wrap-h": return { type: "wrap", axis: "h", limit: node.width, gap };
+    case "wrap-v": return { type: "wrap", axis: "v", limit: node.height, gap };
+    case "grid": return { type: "grid", columns: node.columns, gap };
+    case "circle": return { type: "circle", gap };
+    case "tree": return { type: "tree", direction: node.direction, rankGap: RANK_GAP, siblingGap: gap };
+  }
+};
+
+export const buildScene = ({ view, layout, layoutProblem, actorSize, apps, hiddenAppIds = [], hiddenActorIds = [], showConnections = true }: SceneInput): Scene => {
+  const hiddenActors = new Set(hiddenActorIds);
+  const hiddenAppReferences = new Set(hiddenAppIds.map((id) => `app:${id}`));
+  const availableAppIds = new Set(apps.map((app) => app.id));
+  const stoppedActorIds = new Set(view.actors.filter(isStopped).map((actor) => actor.id));
+  for (const entry of view.pluginStates) {
+    if (entry.pluginId !== ACTOR_PROGRAMS_STATE_ID || entry.scope.kind !== "actor" || !stoppedActorIds.has(entry.scope.actorId)) continue;
+    const { program } = entry.state as ActorProgramState;
+    for (const app of program?.views ?? []) {
+      if (!availableAppIds.has(app.id)) hiddenAppReferences.add(`app:${app.id}`);
+    }
+  }
+  const notices: string[] = layoutProblem ? [`Layout unlesbar: ${layoutProblem}`] : [];
+  const leaves = new Map<string, SceneLeafInfo>();
+  const cards = view.actors.filter((actor) => actor.kind !== "human").sort(actorSort);
+  const byHandle = actorsByHandle(view);
+  const shapesById = new Map((layout?.shapes ?? []).map((shape) => [shape.id, shape]));
+  const appsById = new Map(apps.map((app) => [app.id, app]));
+  const placedActors = new Set<string>();
+  const placedApps = new Set<string>();
+  const entityKeys = new Map<string, string>();
+
+  const actorLeaf = (actor: RunActor): SceneLeaf => {
+    const key = `actor:${actor.id}`;
+    placedActors.add(actor.id);
+    leaves.set(key, { type: "actor", actor });
+    return { kind: "leaf", key, ...actorSize(actor) };
+  };
+  const appLeaf = (app: SceneApp): SceneLeaf => {
+    placedApps.add(app.key);
+    leaves.set(app.key, { type: "app", app });
+    entityKeys.set(`app:${app.id}`, app.key);
+    return { kind: "leaf", key: app.key, width: app.width, height: app.height };
+  };
+  const shapeLeaf = (shape: CanvasShape): SceneLeaf => {
+    const key = `shape:${shape.id}`;
+    leaves.set(key, { type: "shape", shape });
+    entityKeys.set(key, key);
+    return { kind: "leaf", key, ...canvasShapeSize(shape) };
+  };
+  const missingLeaf = (reference: string, reason: string): SceneLeaf => {
+    const key = `missing:${reference}`;
+    leaves.set(key, { type: "missing", reference });
+    notices.push(reason);
+    return { kind: "leaf", key, ...missingSize(reference) };
+  };
+
+  // Actors and apps named as single items are spoken for before any tree claims its lineage.
+  const claimed = new Set<string>();
+  const claimedApps = new Set<string>();
+  for (const node of layout?.nodes ?? []) {
+    if (isCanvasGroupNode(node)) continue;
+    const entity = canvasEntityOf(node.entity);
+    if (entity.kind === "actor") {
+      const actor = byHandle.get(entity.handle);
+      if (actor) claimed.add(actor.id);
+    } else if (entity.kind === "app") {
+      const app = appsById.get(entity.id);
+      if (app) claimedApps.add(app.key);
+    }
+  }
+
+  const appGroup = (key: string, members: readonly SceneApp[]): SceneGroup => ({
+    kind: "group", key,
+    layout: { type: "grid", columns: Math.min(AUTO_APP_MAX_COLUMNS, Math.ceil(Math.sqrt(members.length))), gap: DEFAULT_GAP },
+    children: members.map(appLeaf),
+  });
+
+  // Apps keep their owner's position even when the owner's card is hidden.
+  const actorWithApps = (actor: RunActor): SceneNode | undefined => {
+    placedActors.add(actor.id);
+    const leaf = hiddenActors.has(actor.id) ? undefined : actorLeaf(actor);
+    const anchored = apps.filter((app) =>
+      app.anchorActorId === actor.id && !claimedApps.has(app.key) && !placedApps.has(app.key));
+    if (anchored.length === 0) return leaf;
+    const group = appGroup(`anchored-apps:${actor.id}`, anchored);
+    return leaf
+      ? { kind: "group", key: `anchored:${actor.id}`, layout: { type: "stack", axis: "v", gap: ANCHORED_GAP }, children: [leaf, group] }
+      : group;
+  };
+
+  const lineageNode = (actor: RunActor, direction: "right" | "down", siblingGap: number): SceneGroup | undefined => {
+    const node = actorWithApps(actor);
+    const children = cards.filter((candidate) =>
+      candidate.createdBy === actor.id && !claimed.has(candidate.id) && !placedActors.has(candidate.id));
+    const descendants = children.flatMap((child) => {
+      const branch = lineageNode(child, direction, siblingGap);
+      return branch ? [branch] : [];
+    });
+    if (!node && descendants.length === 0) return undefined;
+    return {
+      kind: "group",
+      key: `lineage:${actor.id}`,
+      layout: node ? { type: "tree", direction, rankGap: RANK_GAP, siblingGap }
+        : { type: "stack", axis: direction === "right" ? "v" : "h", gap: siblingGap },
+      children: node ? [node, ...descendants] : descendants,
+    };
+  };
+
+  const itemNode = (reference: string): SceneNode | undefined => {
+    const entity = canvasEntityOf(reference);
+    if (entity.kind === "actor") {
+      const actor = byHandle.get(entity.handle);
+      if (!actor) return missingLeaf(reference, `${reference} ist kein Actor dieses Laufs`);
+      if (placedActors.has(actor.id)) return missingLeaf(reference, `${reference} ist schon platziert`);
+      return actorWithApps(actor);
+    }
+    if (entity.kind === "shape") {
+      const shape = shapesById.get(entity.id);
+      return shape ? shapeLeaf(shape) : missingLeaf(reference, `${reference} ist keine definierte Form`);
+    }
+    const app = appsById.get(entity.id);
+    if (!app) return missingLeaf(reference, `${reference} ist keine App auf der Fläche`);
+    if (placedApps.has(app.key)) return missingLeaf(reference, `${reference} ist schon platziert`);
+    return appLeaf(app);
+  };
+
+  const treeChildren = (node: CanvasGroupNode & { group: "tree" }, group: SceneGroup): SceneNode[] => {
+    const entity = canvasEntityOf(node.root);
+    const actor = entity.kind === "actor" ? byHandle.get(entity.handle) : undefined;
+    if (!actor) return [missingLeaf(node.root, `${node.root} ist kein Actor dieses Laufs; der Baum ${node.id} bleibt leer`)];
+    if (placedActors.has(actor.id)) return [missingLeaf(node.root, `${node.root} ist schon platziert; der Baum ${node.id} bleibt leer`)];
+    const tree = lineageNode(actor, node.direction, node.gap ?? DEFAULT_GAP);
+    if (tree) group.layout = tree.layout;
+    return tree?.children ?? [];
+  };
+
+  const groups = new Map<string, SceneGroup>();
+  const topLevel: SceneNode[] = [];
+  for (const node of layout?.nodes ?? []) {
+    if (!isCanvasGroupNode(node)) continue;
+    groups.set(node.id, {
+      kind: "group",
+      key: `group:${node.id}`,
+      layout: groupLayoutOf(node),
+      children: [],
+      ...(node.label || node.frame ? { frame: { label: node.label, outline: node.frame } } : {}),
+    });
+  }
+  for (const node of layout?.nodes ?? []) {
+    const target = node.parent ? groups.get(node.parent)?.children : topLevel;
+    if (!target) continue;
+    if (isCanvasGroupNode(node)) {
+      const group = groups.get(node.id)!;
+      if (node.group === "tree") group.children = treeChildren(node, group);
+      target.push(group);
+    } else {
+      if (!hiddenAppReferences.has(node.entity)) {
+        const item = itemNode(node.entity);
+        if (item) target.push(item);
+      }
+    }
+  }
+
+  const unplaced = cards.filter((actor) => !placedActors.has(actor.id));
+  const unplacedIds = new Set(unplaced.map((actor) => actor.id));
+  const roots = unplaced.filter((actor) => !actor.createdBy || !unplacedIds.has(actor.createdBy));
+  const autoChildren: SceneNode[] = roots
+    .filter((actor) => !placedActors.has(actor.id))
+    .flatMap((actor) => {
+      const branch = lineageNode(actor, "right", DEFAULT_GAP);
+      return branch ? [branch] : [];
+    });
+  const unplacedApps = apps.filter((app) => !placedApps.has(app.key));
+  if (unplacedApps.length > 0) {
+    autoChildren.push(appGroup("auto:apps", unplacedApps));
+  }
+  const removeEmpty = (nodes: SceneNode[]): SceneNode[] => nodes.flatMap<SceneNode>((node) => {
+    if (node.kind === "leaf") return [node];
+    const children = removeEmpty(node.children);
+    return children.length > 0 ? [{ ...node, children }] : [];
+  });
+  const children: SceneNode[] = hiddenActors.size > 0 || hiddenAppReferences.size > 0 ? removeEmpty(topLevel) : [...topLevel];
+  if (autoChildren.length > 0) {
+    children.push(children.length > 0
+      ? { kind: "group", key: "auto", layout: { type: "stack", axis: "v", gap: DEFAULT_GAP }, frame: { label: UNPLACED_LABEL, outline: false }, children: autoChildren }
+      : { kind: "group", key: "auto", layout: { type: "stack", axis: "v", gap: DEFAULT_GAP }, children: autoChildren });
+  }
+
+  for (const [handle, actor] of byHandle) {
+    if (leaves.has(`actor:${actor.id}`)) entityKeys.set(`@${handle}`, `actor:${actor.id}`);
+  }
+
+  const lines = (layout?.lines ?? []).flatMap((line, index): SceneLine[] => {
+    if (!showConnections) return [];
+    if (hiddenAppReferences.has(line.from) || hiddenAppReferences.has(line.to)) return [];
+    if ([line.from, line.to].some((reference) => {
+      const entity = canvasEntityOf(reference);
+      const actor = entity.kind === "actor" ? byHandle.get(entity.handle) : undefined;
+      return actor && hiddenActors.has(actor.id);
+    })) return [];
+    const fromKey = entityKeys.get(line.from);
+    const toKey = entityKeys.get(line.to);
+    if (!fromKey || !toKey) {
+      notices.push(`Linie ${line.from} nach ${line.to}: ${fromKey ? line.to : line.from} ist nicht auf der Fläche`);
+      return [];
+    }
+    return [{ key: `line:${index}`, fromKey, toKey, label: line.label, arrow: line.arrow, style: line.style }];
+  });
+
+  return {
+    root: { kind: "group", key: "root", layout: { type: "stack", axis: "v", gap: TOP_LEVEL_GAP }, children },
+    leaves,
+    lines,
+    notices: [...new Set(notices)],
+  };
+};

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

@@ -0,0 +1,21 @@
+import { useSyncExternalStore } from "react";
+
+const stages = new Map<string, ReadonlySet<string>>();
+const listeners = new Set<() => void>();
+const empty: ReadonlySet<string> = new Set();
+
+const subscribe = (listener: () => void) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+
+export function publishStageEntities(runId: string, entities: ReadonlySet<string> | undefined) {
+  if (entities) stages.set(runId, entities);
+  else stages.delete(runId);
+  listeners.forEach((listener) => listener());
+}
+
+export function useStageEntities(runId: string): ReadonlySet<string> {
+  const read = () => stages.get(runId) ?? empty;
+  return useSyncExternalStore(subscribe, read, read);
+}

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

@@ -0,0 +1,36 @@
+import type { ChatStartupStatus } from "@aicontainer/server/chat-events";
+import { isPendingRunActorInput, type RunView } from "./run-view";
+
+export interface CanvasStartupState {
+  kind: "working" | "error" | "waiting" | "stopped";
+  title: string;
+  detail: string;
+}
+
+export function canvasStartupState({ view, startup, connected, running, error }: {
+  view: RunView | undefined;
+  startup: ChatStartupStatus | undefined;
+  connected: boolean;
+  running: boolean;
+  error: string | undefined;
+}): CanvasStartupState | undefined {
+  if (startup?.status === "failed") return { kind: "error", title: "Der Run konnte nicht vorbereitet werden", detail: startup.message };
+  if (error) return { kind: "error", title: "Der Run-Status ist nicht erreichbar", detail: error };
+  if (startup?.status === "preparing") return { kind: "working", title: "Run wird vorbereitet", detail: startup.message };
+  const actors = view?.actors.filter((actor) => actor.kind !== "human") ?? [];
+  const activeActors = actors.filter((actor) => actor.lifecycle?.kind !== "stopped");
+  if (actors.length && !activeActors.length) return { kind: "stopped", title: "Der Run wurde gestoppt", detail: "Es wird keine weitere Arbeit ausgeführt." };
+  if (view?.actions.some((action) => action.status === "pending")) return {
+    kind: "waiting", title: "Deine Antwort wird benötigt", detail: "Im Chat wartet eine Rückfrage auf Dich.",
+  };
+  const activeIds = new Set(activeActors.map((actor) => actor.id));
+  const working = running || activeActors.some((actor) => actor.lifecycle?.kind === "running")
+    || view?.turns.some((turn) => activeIds.has(turn.actorId) && turn.status === "running")
+    || view?.inputs.some((input) => activeIds.has(input.actorId) && isPendingRunActorInput(input));
+  if (working) return { kind: "working", title: "Der Run wird eingerichtet", detail: "Die Oberfläche wird aufgebaut. Die Elemente erscheinen automatisch." };
+  const failed = activeActors.map((actor) => view?.turns.filter((turn) => turn.actorId === actor.id).at(-1))
+    .find((turn) => turn?.status === "failed" || turn?.status === "interrupted");
+  if (failed) return { kind: "error", title: "Der Aufbau wurde angehalten", detail: failed.reason || "Der letzte Arbeitsschritt konnte nicht abgeschlossen werden." };
+  if (!connected) return { kind: "working", title: "Run wird geladen", detail: "Die Verbindung zum Run wird hergestellt." };
+  return undefined;
+}

package/plugins/ragents.orchestration/web/canvas-view-settings.ts

@@ -0,0 +1,48 @@
+import { createLocalStorageSetting } from "@aicontainer/web/lib/local-storage-setting";
+import type { RunActor } from "./run-view";
+
+export interface CanvasViewPreferences {
+  showAppActors: boolean;
+  showConnections: boolean;
+  actorVisibility: Readonly<Record<string, boolean>>;
+}
+
+export const DEFAULT_CANVAS_VIEW_PREFERENCES: CanvasViewPreferences = Object.freeze({
+  showAppActors: false, showConnections: true, actorVisibility: Object.freeze({}),
+});
+export const canvasViewStorageKey = (runId: string) => `ragents.orchestration.canvas-view:${runId}`;
+
+export function parseCanvasViewPreferences(raw: string | null): CanvasViewPreferences {
+  if (raw === null) return DEFAULT_CANVAS_VIEW_PREFERENCES;
+  const value: unknown = JSON.parse(raw);
+  if (!value || typeof value !== "object" || Array.isArray(value)
+    || Object.keys(value).some((key) => !["showAppActors", "showConnections", "actorVisibility"].includes(key))
+    || !("showAppActors" in value) || typeof value.showAppActors !== "boolean"
+    || !("showConnections" in value) || typeof value.showConnections !== "boolean"
+    || !("actorVisibility" in value) || !value.actorVisibility || typeof value.actorVisibility !== "object"
+    || Array.isArray(value.actorVisibility) || Object.values(value.actorVisibility).some((visible) => typeof visible !== "boolean")) {
+    throw new Error("Die gespeicherte Canvas-Ansicht ist ungültig.");
+  }
+  return value as CanvasViewPreferences;
+}
+
+export const actorVisibleOnCanvas = (actor: RunActor, appActorIds: ReadonlySet<string>, preferences: CanvasViewPreferences, primaryActorId?: string | null): boolean => {
+  if (actor.kind === "human") return false;
+  const override = Object.hasOwn(preferences.actorVisibility, actor.id) ? preferences.actorVisibility[actor.id] : undefined;
+  return override ?? (actor.id !== primaryActorId && (!appActorIds.has(actor.id) || preferences.showAppActors));
+};
+
+const setting = createLocalStorageSetting({
+  changeEvent: "ragents-canvas-view-change",
+  matchesKey: (key) => key.startsWith("ragents.orchestration.canvas-view:"),
+  parse: parseCanvasViewPreferences,
+  serialize: JSON.stringify,
+});
+
+export function useCanvasViewPreferences(runId: string): CanvasViewPreferences {
+  return setting.useValue(canvasViewStorageKey(runId));
+}
+
+export function saveCanvasViewPreferences(runId: string, preferences: CanvasViewPreferences) {
+  setting.save(canvasViewStorageKey(runId), preferences);
+}

package/plugins/ragents.orchestration/web/card-size-settings.ts

@@ -0,0 +1,36 @@
+import { createLocalStorageSetting } from "@aicontainer/web/lib/local-storage-setting";
+
+export interface ActorCardSize { width: number; height: number }
+
+export const DEFAULT_ACTOR_CARD_SIZE: ActorCardSize = { width: 720, height: 520 };
+export const ACTOR_CARD_SIZE_LIMITS = { minWidth: 240, maxWidth: 2880, minHeight: 260, maxHeight: 2700 };
+export const ACTOR_CARD_SIZE_STORAGE_KEY = "ragents.orchestration.actor-card-size";
+
+export function parseActorCardSize(raw: string | null): ActorCardSize {
+  if (raw === null) return DEFAULT_ACTOR_CARD_SIZE;
+  const value: unknown = JSON.parse(raw);
+  if (!value || typeof value !== "object" || !("width" in value) || !("height" in value)
+    || !Number.isInteger(value.width) || !Number.isInteger(value.height)
+    || typeof value.width !== "number" || typeof value.height !== "number"
+    || value.width < ACTOR_CARD_SIZE_LIMITS.minWidth || value.width > ACTOR_CARD_SIZE_LIMITS.maxWidth
+    || value.height < 180 || value.height > ACTOR_CARD_SIZE_LIMITS.maxHeight) {
+    throw new Error("Die Standardgröße der LLM-Karten ist ungültig. Breite: 240 bis 2880, Höhe: 260 bis 2700 Pixel.");
+  }
+  return { width: value.width, height: Math.max(ACTOR_CARD_SIZE_LIMITS.minHeight, value.height) };
+}
+
+const setting = createLocalStorageSetting({
+  changeEvent: "ragents-actor-card-size-change",
+  matchesKey: (key) => key === ACTOR_CARD_SIZE_STORAGE_KEY,
+  parse: parseActorCardSize,
+  serialize: JSON.stringify,
+});
+
+export function useActorCardSize(): ActorCardSize {
+  return setting.useValue(ACTOR_CARD_SIZE_STORAGE_KEY);
+}
+
+export function saveActorCardSize(size: ActorCardSize) {
+  if (size.height < ACTOR_CARD_SIZE_LIMITS.minHeight) throw new Error("LLM-Karten benötigen mindestens 260 Pixel Höhe für Verlauf und Eingabe.");
+  setting.save(ACTOR_CARD_SIZE_STORAGE_KEY, size);
+}

package/plugins/ragents.orchestration/web/column/AddresseeControl.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { ChevronDownIcon, CodeIcon, SparklesIcon, UsersIcon } from "lucide-react";
+import { Badge, cn, Input, Spinner } from "@aicontainer/web/ui";
+import { ActorHeaderModeControl } from "../ActorCanvasControls";
+import { ActorPopout } from "../ActorPopout";
+import { actorSurface, type RunActor, type RunView } from "../run-view";
+import { pendingInputCount } from "./column-actors";
+
+const chipClass = "flex h-7 min-w-[70px] max-w-[220px] flex-[0_1_auto] cursor-pointer items-center gap-1.5 rounded-full border border-border bg-background pr-2 pl-1 text-[0.72rem] font-semibold text-foreground hover:bg-accent aria-expanded:border-primary focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:outline-offset-1";
+const busyClass = "flex h-7 min-w-0 flex-[0_1_auto] cursor-pointer items-center gap-1.5 rounded-md px-1.5 text-[0.7rem] text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:outline-offset-1";
+const entryClass = "flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent aria-current:bg-primary/10 focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2";
+const iconClass: Readonly<Record<string, string>> = {
+  agent: "bg-glass-agent",
+  primary: "bg-glass-primary",
+  script: "bg-glass-script",
+  app: "bg-glass-app",
+};
+
+const actorType = (actor: RunActor, technical: boolean) => !technical ? "Agent" : actor.kind === "agent" ? "LLM-Agent" : "TypeScript-Actor";
+const actorStatus = (actor: RunActor) => actor.lifecycle?.kind === "running" ? "arbeitet" : actor.lifecycle?.kind === "stopped" ? "gestoppt" : "bereit";
+
+export const filterActors = (actors: readonly RunActor[], query: string): RunActor[] => {
+  const words = query.trim().toLocaleLowerCase("de-DE").split(/\s+/).filter(Boolean);
+  return actors.filter((actor) => words.every((word) => `@${actor.handle} ${actor.displayName}`.toLocaleLowerCase("de-DE").includes(word)));
+};
+
+function ActorIcon({ actor, className, view }: { actor: RunActor; className?: string; view: RunView }) {
+  const surface = actorSurface(view, actor);
+  return <span className={cn("grid flex-none place-items-center rounded-full text-foreground [&>svg]:size-3", iconClass[surface], className)}>
+    {actor.lifecycle?.kind === "running" ? <Spinner aria-hidden className="size-3" /> : surface === "primary" ? <SparklesIcon /> : actor.kind === "agent" ? <UsersIcon /> : <CodeIcon />}
+  </span>;
+}
+
+function ActorEntry({ actor, current, onPick, technical, view }: { actor: RunActor; current: boolean; onPick: () => void; technical: boolean; view: RunView }) {
+  const pending = pendingInputCount(view, actor.id);
+  return <li>
+    <button aria-current={current || undefined} className={entryClass} onClick={onPick} title={`Nachrichten an @${actor.handle} richten`} type="button">
+      <ActorIcon actor={actor} className="size-5" view={view} />
+      <span className="grid min-w-0 flex-1">
+        <span className="truncate font-semibold">@{actor.handle}</span>
+        <span className="text-[0.66rem] text-muted-foreground">{actorType(actor, technical)}, {actorStatus(actor)}</span>
+      </span>
+      {pending > 0 && <Badge className="h-4 min-w-4 px-1 text-[0.6rem]" variant="secondary">{pending}</Badge>}
+    </button>
+  </li>;
+}
+
+/** Der Adressat des Chats als Chip in der Eingabeleiste; das Pop-out listet die sichtbaren Actors, die ausgeblendeten hinter ihrer Zahl. */
+export function AddresseeControl({ hidden, onOpenChange, onReveal, onSelect, runId, selected, shown, technical, view }: {
+  hidden: readonly RunActor[];
+  onOpenChange: (open: boolean) => void;
+  onReveal: (actor: RunActor) => void;
+  onSelect: (actor: RunActor) => void;
+  runId: string;
+  selected: RunActor;
+  shown: readonly RunActor[];
+  technical: boolean;
+  view: RunView;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [hiddenListed, setHiddenListed] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const panelId = useId();
+  const change = useCallback((next: boolean) => {
+    setOpen(next);
+    onOpenChange(next);
+  }, [onOpenChange]);
+  const close = useCallback((restoreFocus = false) => {
+    change(false);
+    if (restoreFocus) buttonRef.current?.focus({ preventScroll: true });
+  }, [change]);
+  const working = useMemo(() => [...shown, ...hidden].filter((actor) => actor.lifecycle?.kind === "running" && actor.id !== selected.id), [hidden, selected.id, shown]);
+  const hiddenMatches = useMemo(() => filterActors(hidden, query), [hidden, query]);
+  const pick = (actor: RunActor, reveal: boolean) => {
+    (reveal ? onReveal : onSelect)(actor);
+    close(true);
+  };
+  const busyTitle = working.map((actor) => `@${actor.handle} arbeitet`).join(", ");
+  const busyPending = working.length > 0 ? pendingInputCount(view, working[0].id) : 0;
+  const listClass = "list-none px-1.5 py-1";
+
+  return <>
+    <button aria-controls={open ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog" className={chipClass} onClick={() => change(!open)} ref={buttonRef} title={`Adressat: @${selected.handle}. Klick wählt einen anderen Actor`} type="button">
+      <ActorIcon actor={selected} className="size-5" view={view} />
+      <span className="truncate">@{selected.handle}</span>
+      <ChevronDownIcon aria-hidden className="size-3 flex-none text-muted-foreground" />
+    </button>
+    {working.length > 0 && <button className={busyClass} onClick={() => change(!open)} title={busyTitle} type="button">
+      <Spinner aria-hidden className="size-3 flex-none" />
+      <span className="truncate in-data-[compact=true]:hidden">@{working[0].handle}</span>
+      {busyPending > 0 && <Badge className="h-4 min-w-4 px-1 text-[0.6rem]" variant="secondary">{busyPending}</Badge>}
+      {working.length > 1 && <span className="flex-none">+{working.length - 1}</span>}
+    </button>}
+    {open && <ActorPopout buttonRef={buttonRef} closeLabel="Adressat schließen" height={400} id={panelId} label="Adressat" onClose={close} open placement="top" role="dialog" width="available">
+      <div className="min-h-0 flex-1 overflow-auto overscroll-contain">
+        <ul className={listClass}>
+          {shown.map((actor) => <ActorEntry actor={actor} current={actor.id === selected.id} key={actor.id} onPick={() => pick(actor, false)} technical={technical} view={view} />)}
+        </ul>
+        {hidden.length > 0 && <div className="border-t border-border-soft">
+          <button aria-expanded={hiddenListed} className="flex w-full cursor-pointer items-center justify-between gap-2 px-3.5 py-2 text-left text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2" onClick={() => setHiddenListed((value) => !value)} type="button">
+            <span>{hidden.length} ausgeblendete Actors</span>
+            <ChevronDownIcon aria-hidden className={cn("size-3.5 flex-none transition-transform", hiddenListed && "rotate-180")} />
+          </button>
+          {hiddenListed && <>
+            {hidden.length > 8 && <div className="px-2.5 pb-1"><Input aria-label="Ausgeblendete Actors durchsuchen" className="h-7" onChange={(event) => setQuery(event.target.value)} placeholder="Handle suchen ..." type="search" value={query} /></div>}
+            <ul className={listClass}>
+              {hiddenMatches.map((actor) => <ActorEntry actor={actor} current={false} key={actor.id} onPick={() => pick(actor, true)} technical={technical} view={view} />)}
+            </ul>
+          </>}
+        </div>}
+      </div>
+      <div className="flex flex-none items-stretch border-t border-border-soft"><ActorHeaderModeControl runId={runId} /></div>
+    </ActorPopout>}
+  </>;
+}

package/plugins/ragents.orchestration/web/column/ColumnSettings.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { useAccess } from "@aicontainer/web/AccessContext";
+import { Button, Input } from "@aicontainer/web/ui";
+import { COLUMN_SETTINGS_LIMITS, DEFAULT_COLUMN_SETTINGS, saveColumnSettings, useColumnSettings, type ColumnSettings as ColumnSettingsValue } from "./column-settings";
+
+type Draft = Record<keyof ColumnSettingsValue, string>;
+
+const toDraft = (value: ColumnSettingsValue): Draft => ({ sideWidth: String(value.sideWidth), openDelay: String(value.openDelay), closeDelay: String(value.closeDelay) });
+
+const fields: readonly { key: keyof ColumnSettingsValue; label: string; unit: string }[] = [
+  { key: "sideWidth", label: "Chat neben der Mini-App ab", unit: "px" },
+  { key: "openDelay", label: "Hochschieben nach", unit: "ms" },
+  { key: "closeDelay", label: "Zurück nach Verlassen nach", unit: "ms" },
+];
+
+export function ColumnSettings() {
+  const access = useAccess();
+  const stored = useColumnSettings();
+  const [draft, setDraft] = useState(() => toDraft(stored));
+  const [message, setMessage] = useState<string>();
+  const [error, setError] = useState<string>();
+  useEffect(() => { setDraft(toDraft(stored)); }, [stored]);
+  const writable = access.can("settings.write");
+  const save = (next: ColumnSettingsValue) => {
+    if (!writable) return;
+    setError(undefined);
+    setMessage(undefined);
+    try {
+      saveColumnSettings(next);
+      setMessage("Einstellungen der Arbeitsspalte gespeichert.");
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    }
+  };
+  return <form className="grid gap-3" onSubmit={(event) => {
+    event.preventDefault();
+    save({ sideWidth: Number(draft.sideWidth), openDelay: Number(draft.openDelay), closeDelay: Number(draft.closeDelay) });
+  }}>
+    <p className="text-muted-foreground">Ab dieser Breite des Panels liegt der Chat rechts neben der Mini-App statt als Sheet darunter. Die Verzögerungen bestimmen, wie lange die Maus über dem Sheet liegen muss, bis es hochgleitet, und wie lange es nach dem Verlassen oben bleibt. Gilt sofort für alle Runs in diesem Browser.</p>
+    <div className="flex flex-wrap items-end gap-3">
+      {fields.map(({ key, label, unit }) => <label className="grid gap-1.5" key={key}>
+        <span>{label} ({unit})</span>
+        <Input className="w-[130px]" disabled={!writable} max={COLUMN_SETTINGS_LIMITS[key].max} min={COLUMN_SETTINGS_LIMITS[key].min} onChange={(event) => { setDraft({ ...draft, [key]: event.target.value }); setMessage(undefined); }} required step="1" type="number" value={draft[key]} />
+      </label>)}
+      <Button disabled={!writable} type="submit">Speichern</Button>
+      <Button disabled={!writable} onClick={() => save(DEFAULT_COLUMN_SETTINGS)} variant="outline">Zurücksetzen</Button>
+    </div>
+    {error ? <p className="text-muted-foreground" role="alert">{error}</p> : message && <p className="text-muted-foreground" role="status">{message}</p>}
+  </form>;
+}