@schlenkr/ragents 0.1.0

package/plugins/ragents.orchestration/web/JournalStatus.tsx

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { XIcon } from "lucide-react";
+import type { JournalEvent } from "../../../packages/ragents/src/domain/events";
+import type { SessionHeaderContext } from "@aicontainer/web/PluginRegistry";
+import { SourceCode } from "@aicontainer/web/SourceCode";
+import { Button, Input, Popover, PopoverContent } from "@aicontainer/web/ui";
+import { runContracts } from "@aicontainer/ragents/src/http/contracts";
+import { rpc } from "@aicontainer/web/rpc";
+import { runViewFrom } from "./run-view";
+import { statusControlClass } from "./constants";
+
+export function JournalStatus({ session }: SessionHeaderContext) {
+  const [open, setOpen] = useState(false);
+  const [events, setEvents] = useState<readonly JournalEvent[]>([]);
+  const [error, setError] = useState<string>();
+  const [loading, setLoading] = useState(false);
+  const [reload, setReload] = useState(0);
+  const [query, setQuery] = useState("");
+  const [limit, setLimit] = useState(100);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const panelId = useId();
+  const view = runViewFrom(session.runView);
+  const revision = view?.revision;
+  const close = useCallback((restoreFocus = false) => {
+    setOpen(false);
+    if (restoreFocus) buttonRef.current?.focus({ preventScroll: true });
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const controller = new AbortController();
+    setLoading(true);
+    setError(undefined);
+    void rpc.call(runContracts.events, { runId: session.session.id }, { signal: controller.signal })
+      .then((result) => { if (!controller.signal.aborted) setEvents(result); })
+      .catch((cause: unknown) => { if (!controller.signal.aborted) setError(cause instanceof Error ? cause.message : String(cause)); })
+      .finally(() => { if (!controller.signal.aborted) setLoading(false); });
+    return () => controller.abort();
+  }, [open, session.session.id, revision, reload]);
+
+  const filtered = useMemo(() => {
+    const search = query.trim().toLocaleLowerCase("de-DE");
+    const handles = new Map(view?.actors.map((actor) => [actor.id, actor.handle]));
+    return [...events].reverse().filter((event) => !search || `${handles.get(event.actorId) ?? ""} ${JSON.stringify(event)}`.toLocaleLowerCase("de-DE").includes(search));
+  }, [events, query, view?.actors]);
+  const actors = new Map(view?.actors.map((actor) => [actor.id, actor.handle]));
+
+  return <div className="flex h-full min-w-0 items-stretch">
+    <button aria-controls={panelId} aria-expanded={open} className={statusControlClass} onClick={() => setOpen((value) => !value)} ref={buttonRef} type="button">
+      Journal
+    </button>
+    <Popover open={open} onOpenChange={(next) => { if (!next) close(); }}>
+    <PopoverContent align="start" anchor={buttonRef} aria-label="Journal des Runs" className="flex min-h-0 min-w-0 flex-col gap-0 overflow-hidden rounded-t-sm rounded-b-none p-0 text-[0.76rem]" collisionPadding={8} id={panelId}
+      initialFocus={searchRef} role="region" side="top" sideOffset={0} style={{ width: "min(900px, var(--available-width))", height: "min(480px, var(--available-height))" }}>
+      <header className="flex flex-none items-center gap-2 border-b border-border-soft px-2.5 py-2">
+        <div className="flex min-w-0 flex-1 items-baseline gap-2.5 [&>span]:truncate"><strong>Journal</strong><span className="text-muted-foreground">{session.session.title || "Run"}</span></div>
+        <Button onClick={() => setReload((value) => value + 1)} size="sm" variant="ghost">Aktualisieren</Button>
+        <Button aria-label="Journal schließen" onClick={() => close(true)} size="icon-sm" title="Journal schließen" variant="ghost"><XIcon /></Button>
+      </header>
+      <div className="flex flex-none items-center gap-3 px-2.5 py-2">
+        <Input className="flex-1" aria-label="Journal durchsuchen" onChange={(event) => { setQuery(event.target.value); setLimit(100); }} placeholder="Ereignistyp, Actor oder Inhalt suchen ..." ref={searchRef} type="search" value={query} />
+        <span className="flex-none whitespace-nowrap text-[0.68rem] text-muted-foreground" role="status">{loading ? "Lädt ..." : `${filtered.length} Ereignisse`}</span>
+      </div>
+      {error && <p className="flex-none px-2.5 pb-2 text-destructive" role="alert">{error}</p>}
+      <div aria-label="Journalereignisse, neueste zuerst" className="min-h-0 flex-1 overflow-auto overscroll-contain px-2.5 pb-2.5">
+        {!loading && !error && filtered.length === 0 && <p className="text-muted-foreground">{query ? "Keine passenden Ereignisse." : "Das Journal enthält noch keine Ereignisse."}</p>}
+        {filtered.slice(0, limit).map((event) => <JournalEntry actor={actors.get(event.actorId)} event={event} key={event.eventId} />)}
+        {filtered.length > limit && <Button onClick={() => setLimit((value) => value + 100)} size="sm" variant="outline">Weitere Ereignisse anzeigen</Button>}
+      </div>
+    </PopoverContent>
+    </Popover>
+  </div>;
+}
+
+function JournalEntry({ actor, event }: { actor: string | undefined; event: JournalEvent }) {
+  const [expanded, setExpanded] = useState(false);
+  return <details className="border-b border-border-soft open:[&>summary]:text-primary" onToggle={(toggle) => setExpanded(toggle.currentTarget.open)}>
+    <summary className="grid cursor-pointer grid-cols-[32px_minmax(130px,1fr)_minmax(70px,140px)_auto] items-baseline gap-2 px-0.5 py-2 text-[0.68rem] focus-visible:outline-2 focus-visible:outline-primary focus-visible:-outline-offset-2 max-[550px]:grid-cols-[24px_minmax(0,1fr)_auto] max-[550px]:gap-x-2 max-[550px]:gap-y-1">
+      <span className="text-muted-foreground tabular-nums">{event.sequence}</span>
+      <span className="font-mono [overflow-wrap:anywhere]">{event.type}</span>
+      <span className="truncate max-[550px]:col-start-2 max-[550px]:row-start-2" title={event.actorId}>{actor ? `@${actor}` : event.actorId}</span>
+      <time className="text-muted-foreground tabular-nums max-[550px]:col-start-3 max-[550px]:row-start-1" dateTime={event.occurredAt}>{new Date(event.occurredAt).toLocaleTimeString("de-DE")}</time>
+    </summary>
+    {expanded && <SourceCode className="m-0 mb-2 text-[0.68rem]" content={JSON.stringify(event, null, 2)} language="json" path="event.json" />}
+  </details>;
+}

package/plugins/ragents.orchestration/web/MaterialBody.tsx

@@ -0,0 +1,104 @@
+import { memo, useId, useLayoutEffect, useRef, useState } from "react";
+import { MATERIAL_DEPTH_PER_STEP } from "@aicontainer/web/material-settings";
+import { cn } from "@aicontainer/web/ui";
+
+export type MaterialSurface = "agent" | "primary" | "script" | "app";
+
+/** Schichtwerk: matte Front, gerade Kanten, die Tiefe kommt aus MaterialBody. */
+const materialBaseClass = "relative isolate rounded-panel border-[1.5px] border-(--material-edge) bg-(--material-face) [box-shadow:var(--material-extrusion)] [--material-edge:#514657] dark:[--material-edge:#b7a8bd]";
+
+const materialSurfaceClass: Readonly<Record<MaterialSurface, string>> = {
+  agent: "[--material-face:var(--color-glass-agent)] [--material-tone:19] [--material-saturation:37%] [--material-lightness:62%] dark:[--material-lightness:27%]",
+  primary: "[--material-face:var(--color-glass-primary)] [--material-tone:275] [--material-saturation:23%] [--material-lightness:64%] dark:[--material-lightness:26%]",
+  script: "[--material-face:var(--color-glass-script)] [--material-tone:45] [--material-saturation:40%] [--material-lightness:57%] dark:[--material-lightness:24%]",
+  app: "[--material-face:var(--color-glass-app)] [--material-tone:212] [--material-saturation:18%] [--material-lightness:70%] dark:[--material-lightness:25%]",
+};
+
+export const materialCardClass = (surface: MaterialSurface, className?: string) =>
+  cn(materialBaseClass, materialSurfaceClass[surface], className);
+
+/** Kopfzeile einer Materialkarte: dieselbe Front, eine Spur dunkler, oben gerundet. */
+export const materialHeadClass = "relative flex items-center gap-2 rounded-t-[15.5px] bg-[color-mix(in_srgb,var(--material-face)_96%,black)] px-3 py-2";
+
+export const materialTitleClass = "min-w-0 truncate p-0 text-[17px] font-[730] leading-[1.3] tracking-[-.5px]";
+
+export const materialIconClass = "grid size-8 flex-none place-items-center rounded-[11px] border border-[#5146578a] bg-white/9 text-foreground shadow-glass-icon";
+
+export const materialRuleClass = "border-[#51465738]";
+
+export function materialExtrusion(steps: number): string {
+  if (steps === 0) return "none";
+  const depth = steps * MATERIAL_DEPTH_PER_STEP;
+  const layers: string[] = [];
+  for (let i = .5; i <= depth; i += .5) {
+    const band = Math.floor((i - .5) / MATERIAL_DEPTH_PER_STEP);
+    layers.push(`${i * .5}px ${-i * .7}px 0 hsl(var(--material-tone) var(--material-saturation) calc(var(--material-lightness) - ${8 - band * 3}%))`);
+  }
+  return layers.join(",");
+}
+
+function outlineOf(width: number, height: number, dx: number, dy: number): string {
+  const radius = Math.min(17, (width - 1) / 2, (height - 1) / 2);
+  const points = [[radius, radius], [radius + dx, radius + dy], [width - radius + dx, radius + dy],
+    [width - radius + dx, height - radius + dy], [width - radius, height - radius], [radius, height - radius]];
+  const normals = points.map((point, index) => {
+    const next = points[(index + 1) % points.length]!;
+    const x = next[0]! - point[0]!, y = next[1]! - point[1]!, length = Math.hypot(x, y);
+    return [y / length, -x / length];
+  });
+  return points.map((point, index) => {
+    const before = normals[(index + points.length - 1) % points.length]!, after = normals[index]!;
+    const start = [point[0]! + radius * before[0]!, point[1]! + radius * before[1]!];
+    const end = [point[0]! + radius * after[0]!, point[1]! + radius * after[1]!];
+    return `${index ? "L" : "M"}${start.join(" ")}A${radius} ${radius} 0 0 1 ${end.join(" ")}`;
+  }).join("") + "Z";
+}
+
+const depthClass = "pointer-events-none absolute -top-[1.5px] -left-[1.5px] z-2 h-[calc(100%+3px)] w-[calc(100%+3px)] flex-none overflow-visible";
+
+export const MaterialBody = memo(function MaterialBody({ steps }: { steps: number }) {
+  const depth = steps * MATERIAL_DEPTH_PER_STEP;
+  const ref = useRef<SVGSVGElement>(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const id = useId().replaceAll(":", "");
+  useLayoutEffect(() => {
+    const parent = ref.current?.parentElement;
+    if (!parent) return;
+    parent.style.setProperty("--material-extrusion", materialExtrusion(steps));
+    return () => { parent.style.removeProperty("--material-extrusion"); };
+  }, [steps]);
+  useLayoutEffect(() => {
+    const parent = ref.current?.parentElement;
+    if (!parent || steps === 0) return;
+    const measure = () => setSize((previous) => {
+      const width = parent.offsetWidth, height = parent.offsetHeight;
+      return width === previous.width && height === previous.height ? previous : { width, height };
+    });
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(parent);
+    return () => observer.disconnect();
+  }, [steps]);
+  const { width, height } = size, dx = depth * .5, dy = -depth * .7;
+  if (steps === 0 || width < 2 || height < 2) return <svg aria-hidden="true" className={depthClass} ref={ref} />;
+  const outline = outlineOf(width, height, dx, dy), length = Math.hypot(dx, dy);
+  const normalX = -dy / length, normalY = dx / length, radius = Math.min(17, (width - 1) / 2, (height - 1) / 2);
+  const centerX = width - radius + radius / Math.sqrt(2), centerY = radius - radius / Math.sqrt(2);
+  return <svg aria-hidden="true" className={depthClass} ref={ref} viewBox={`0 0 ${width} ${height}`}>
+    <defs>
+      <mask id={`${id}-face`} maskUnits="userSpaceOnUse" x={-3} y={dy - 3} width={width + dx + 6} height={height - dy + 6}>
+        <rect x={-3} y={dy - 3} width={width + dx + 6} height={height - dy + 6} fill="white" stroke="none" />
+        <rect width={width} height={height} rx={radius} fill="black" stroke="black" strokeWidth={1} />
+      </mask>
+      <linearGradient id={`${id}-corner`} gradientUnits="userSpaceOnUse"
+        x1={centerX - normalX * 24} y1={centerY - normalY * 24} x2={centerX + normalX * 24} y2={centerY + normalY * 24}>
+        {[[0, 0], [.15, 0], [.15, .12], [.35, .12], [.35, .28], [.65, .28], [.65, .12], [.85, .12], [.85, 0], [1, 0]]
+          .map(([offset, opacity], index) => <stop key={index} offset={offset} stopColor="black" stopOpacity={opacity} />)}
+      </linearGradient>
+    </defs>
+    <g mask={`url(#${id}-face)`}>
+      <path d={outline} fill={`url(#${id}-corner)`} stroke="none" />
+      <path d={outline} fill="none" stroke="var(--material-edge)" strokeWidth={1.5} vectorEffect="non-scaling-stroke" />
+    </g>
+  </svg>;
+});

package/plugins/ragents.orchestration/web/ScriptActorCard.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { SourceCode } from "@aicontainer/web/SourceCode";
+import { CodeXmlIcon } from "lucide-react";
+import { Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@aicontainer/web/ui";
+import { materialHeadClass, materialIconClass, materialRuleClass, materialTitleClass } from "./MaterialBody";
+import type { RunActor } from "./run-view";
+
+const stateBarClass: Readonly<Record<string, string>> = {
+  running: "bg-primary animate-fade-pulse motion-reduce:animate-none",
+  done: "bg-success",
+  failed: "bg-destructive",
+};
+
+export function ScriptActorCard({ actor, state, stateLabel, inputCount, onSelect }: {
+  actor: RunActor;
+  state: string;
+  stateLabel: string;
+  inputCount: number;
+  onSelect: () => void;
+}) {
+  const [sourceOpen, setSourceOpen] = useState(false);
+  return <>
+    <div className={`${materialHeadClass} flex-none`}>
+      <button className="flex min-w-0 flex-1 cursor-pointer items-center gap-2.5 text-left focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4"
+        onClick={onSelect} title={`Details von @${actor.handle} öffnen`} type="button">
+        <span className={`${materialIconClass} font-mono text-[10px] font-bold leading-none tracking-[.04em]`} aria-label="TypeScript">TS</span>
+        <span className={materialTitleClass}>@{actor.handle}</span>
+      </button>
+      <Button className="flex-none gap-1.5 rounded-[3px] text-[11px]" size="sm" variant="ghost" disabled={actor.source === undefined}
+        title={actor.source === undefined ? "Kein Quelltext in der Laufansicht vorhanden" : `Skript von @${actor.handle} anzeigen`}
+        aria-label={`Skript von @${actor.handle} anzeigen`} onClick={() => setSourceOpen(true)}>
+        <CodeXmlIcon />
+        Skript
+      </Button>
+    </div>
+    <div className={`relative mx-3 flex items-center justify-between gap-3 border-t py-2 text-[11px] leading-4 text-muted-foreground ${materialRuleClass}`}>
+      <span className="flex items-center gap-[7px]">
+        <span aria-hidden="true" className={`h-2.5 w-[5px] ${stateBarClass[state] ?? "bg-muted-foreground"}`} />
+        {stateLabel}
+      </span>
+      <span title="An diesen Actor zugestellte Eingaben">{inputCount} {inputCount === 1 ? "Eingabe" : "Eingaben"}</span>
+    </div>
+    {sourceOpen && actor.source !== undefined && <Dialog open onOpenChange={(open) => { if (!open) setSourceOpen(false); }}>
+      <DialogContent scope="run" size="wide">
+        <DialogHeader>
+          <DialogTitle>Skript von @{actor.handle}</DialogTitle>
+          <DialogDescription>TypeScript</DialogDescription>
+        </DialogHeader>
+        <DialogBody className="max-h-[65vh] overflow-auto overscroll-contain" role="region"
+          aria-label={`TypeScript-Quelltext von @${actor.handle}`} tabIndex={0}>
+          <SourceCode className="m-0 overflow-visible" content={actor.source} language="typescript" path={`${actor.handle}.ts`} />
+        </DialogBody>
+      </DialogContent>
+    </Dialog>}
+  </>;
+}

package/plugins/ragents.orchestration/web/StopRunButton.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { useAccess } from "@aicontainer/web/AccessContext";
+import type { SessionHeaderContext } from "@aicontainer/web/PluginRegistry";
+import { Button } from "@aicontainer/web/ui";
+import { ToolbarItem } from "@aicontainer/web/Toolbar";
+import { stopRun } from "./api";
+
+const STOP_RUN_REASON = "Not-Aus durch den Bediener";
+
+export function StopRunHeader({ session }: SessionHeaderContext) {
+  return <ToolbarItem className="max-w-none"><StopRunButton key={session.session.id} runId={session.session.id} /></ToolbarItem>;
+}
+
+function StopRunButton({ runId }: { runId: string }) {
+  const writable = useAccess().can("runs.write");
+  const [armed, setArmed] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string>();
+
+  const stop = async () => {
+    setBusy(true);
+    setError(undefined);
+    try {
+      await stopRun(runId, STOP_RUN_REASON);
+      setArmed(false);
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!writable) return null;
+  if (!armed) {
+    return (
+      <Button onClick={() => setArmed(true)} size="sm" title="Beendet den ganzen Lauf: Turns, Agenten und Abläufe" variant="destructive">
+        Lauf stoppen
+      </Button>
+    );
+  }
+
+  return (
+    <span className="inline-flex items-center gap-1.5 whitespace-nowrap">
+      <span className="text-[0.72rem] font-semibold text-destructive">Wirklich alles stoppen?</span>
+      <Button disabled={busy} onClick={() => void stop()} size="sm" variant="destructive">Ja</Button>
+      <Button disabled={busy} onClick={() => setArmed(false)} size="sm" variant="outline">
+        Abbrechen
+      </Button>
+      {error && <span className="max-w-[260px] truncate text-[0.7rem] text-destructive" title={error}>{error}</span>}
+    </span>
+  );
+}

package/plugins/ragents.orchestration/web/TiledCanvas.tsx

@@ -0,0 +1,281 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, CodeXml, LayoutGrid, Sparkles, GripVertical, X } from "lucide-react";
+import { canvasTileNodeOf, type CanvasTileNode } from "../tiled-layout";
+import { CANVAS_TILE_DRAG_TYPE, dockTile, removeTile, resizeTile, tileEntities, tileGeometry, tileMinimum, type TileDivider, type TileDockSide, type TileRect } from "./tile-docking";
+import { MaterialBody, materialCardClass, materialHeadClass, materialIconClass, materialTitleClass } from "./MaterialBody";
+
+export interface CanvasTileItem { entity: string; title: string; content: ReactNode; surface?: "agent" | "primary" | "script" | "app" }
+interface TiledCanvasProps {
+  root: CanvasTileNode | null;
+  onChange: (root: CanvasTileNode | null) => void;
+  items: readonly CanvasTileItem[];
+  canArrange: boolean;
+  selectedEntity?: string;
+  onSelect?: (entity: string) => void;
+}
+interface DockTarget { entity: string | null; side: TileDockSide }
+const sides: readonly TileDockSide[] = ["left", "right", "top", "bottom"];
+const sideNames = { left: "Links andocken", right: "Rechts andocken", top: "Oben andocken", bottom: "Unten andocken" };
+const sideIcons = { left: ArrowLeft, right: ArrowRight, top: ArrowUp, bottom: ArrowDown };
+const materialFaceRect = (slot: TileRect): TileRect => ({
+  left: slot.left + 2,
+  top: slot.top + 2,
+  width: Math.max(0, slot.width - 4),
+  height: Math.max(0, slot.height - 4),
+});
+const positioned = (rect: TileRect): CSSProperties => ({ left: rect.left, top: rect.top, width: rect.width, height: rect.height });
+const sidePlacement = {
+  left: { inner: "left-0 top-[40px]", outer: "left-0 top-[calc(50%_-_18px)]" },
+  right: { inner: "right-0 top-[40px]", outer: "right-0 top-[calc(50%_-_18px)]" },
+  top: { inner: "top-0 left-[40px]", outer: "top-0 left-[calc(50%_-_18px)]" },
+  bottom: { inner: "bottom-0 left-[40px]", outer: "bottom-0 left-[calc(50%_-_18px)]" },
+};
+const dockTargetClass = "absolute grid size-[36px] place-items-center rounded-[5px] border border-primary bg-canvas text-primary shadow-[0_2px_8px_#0002] pointer-events-auto data-[active]:bg-primary data-[active]:text-canvas [&>svg]:pointer-events-none";
+const dividerClass = "absolute z-3 grid touch-none place-items-center rounded-[4px] focus-visible:outline-2 focus-visible:outline-primary focus-visible:-outline-offset-2 data-[direction=horizontal]:cursor-col-resize data-[direction=vertical]:cursor-row-resize [&>span]:pointer-events-none [&>span]:rounded-[4px] [&>span]:bg-border-strong data-[direction=horizontal]:[&>span]:h-8 data-[direction=horizontal]:[&>span]:w-[3px] data-[direction=vertical]:[&>span]:h-[3px] data-[direction=vertical]:[&>span]:w-8 hover:[&>span]:bg-primary focus-visible:[&>span]:bg-primary";
+
+export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity, onSelect }: TiledCanvasProps) {
+  const stageRef = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [available, setAvailable] = useState({ width: 0, height: 0 });
+  const [dragEntity, setDragEntity] = useState<string | null>(null);
+  const [target, setTarget] = useState<DockTarget | null>(null);
+  const [resizing, setResizing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selected, setSelected] = useState<string>();
+  const [resizePreview, setResizePreview] = useState<CanvasTileNode | null>(null);
+  const resizeFrame = useRef<number | null>(null);
+  const resizeRef = useRef<{ divider: TileDivider; start: number; root: CanvasTileNode; next: CanvasTileNode; pointerId: number; handle: HTMLDivElement } | null>(null);
+  const visibleRoot = resizePreview ?? root;
+  const entities = useMemo(() => tileEntities(root), [root]);
+  const mountedEntities = useMemo(() => [...entities].sort(), [entities]);
+  const itemMap = useMemo(() => new Map(items.map((item) => [item.entity, item])), [items]);
+  const minimum = root ? tileMinimum(root) : { width: 0, height: 0 };
+  const compact = available.width < minimum.width || available.height < minimum.height;
+  const active = selected && entities.includes(selected) ? selected : entities[0];
+  const rect = { left: 0, top: 0, ...size };
+  const geometry = useMemo(() => visibleRoot ? tileGeometry(visibleRoot, { left: 0, top: 0, ...size }) : { leaves: new Map<string, TileRect>(), dividers: [] }, [visibleRoot, size]);
+
+  useLayoutEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const container = stage.parentElement!;
+    const measure = () => {
+      const width = stage.clientWidth;
+      const height = stage.clientHeight;
+      setSize((previous) => previous.width === width && previous.height === height ? previous : { width, height });
+      const style = getComputedStyle(container);
+      const availableWidth = container.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+      const availableHeight = container.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
+      setAvailable((previous) => previous.width === availableWidth && previous.height === availableHeight
+        ? previous : { width: availableWidth, height: availableHeight });
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(stage);
+    observer.observe(container);
+    measure();
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => { if (selectedEntity) setSelected(selectedEntity); }, [selectedEntity]);
+  useLayoutEffect(() => {
+    if (!canArrange) { setDragEntity(null); setTarget(null); return; }
+    let pendingFrame: number | null = null;
+    const cancelActivation = () => {
+      if (pendingFrame !== null) cancelAnimationFrame(pendingFrame);
+      pendingFrame = null;
+    };
+    const start = (event: DragEvent) => {
+      if (!event.dataTransfer?.types.includes(CANVAS_TILE_DRAG_TYPE)) return;
+      const entity = event.dataTransfer.getData(CANVAS_TILE_DRAG_TYPE);
+      if (!entity) return;
+      cancelActivation();
+      pendingFrame = requestAnimationFrame(() => {
+        pendingFrame = null;
+        if (!event.defaultPrevented) setDragEntity(entity);
+      });
+    };
+    const end = () => { cancelActivation(); setDragEntity(null); setTarget(null); };
+    const key = (event: KeyboardEvent) => { if (event.key === "Escape") end(); };
+    window.addEventListener("dragstart", start);
+    window.addEventListener("dragend", end);
+    window.addEventListener("drop", end);
+    window.addEventListener("keydown", key);
+    return () => {
+      cancelActivation();
+      window.removeEventListener("dragstart", start);
+      window.removeEventListener("dragend", end);
+      window.removeEventListener("drop", end);
+      window.removeEventListener("keydown", key);
+    };
+  }, [canArrange]);
+
+  const cancelResize = useCallback(() => {
+    if (resizeFrame.current !== null) cancelAnimationFrame(resizeFrame.current);
+    resizeFrame.current = null;
+    const state = resizeRef.current;
+    resizeRef.current = null;
+    if (state?.handle.hasPointerCapture(state.pointerId)) state.handle.releasePointerCapture(state.pointerId);
+    setResizePreview(null);
+    setResizing(false);
+  }, []);
+
+  useLayoutEffect(() => {
+    cancelResize();
+    return cancelResize;
+  }, [root, size, compact, cancelResize]);
+
+  useEffect(() => {
+    if (!resizing) return;
+    const key = (event: KeyboardEvent) => { if (event.key === "Escape") cancelResize(); };
+    window.addEventListener("keydown", key);
+    window.addEventListener("blur", cancelResize);
+    return () => {
+      window.removeEventListener("keydown", key);
+      window.removeEventListener("blur", cancelResize);
+    };
+  }, [resizing, cancelResize]);
+
+  const updateResize = (event: { pointerId: number; clientX: number; clientY: number }) => {
+    const state = resizeRef.current;
+    if (!state || state.pointerId !== event.pointerId) return;
+    const coordinate = state.divider.direction === "horizontal" ? event.clientX : event.clientY;
+    const ratio = Math.max(state.divider.minimum, Math.min(state.divider.maximum,
+      state.divider.ratio + (coordinate - state.start) / state.divider.span));
+    state.next = coordinate === state.start ? state.root : resizeTile(state.root, state.divider.path, ratio);
+  };
+
+  const select = (entity: string) => { setSelected(entity); onSelect?.(entity); };
+  const previewRoot = canArrange && target && dragEntity ? dockTile(root, dragEntity, target.entity, target.side) : null;
+  const previewMinimum = previewRoot ? tileMinimum(previewRoot) : null;
+  const preview = previewRoot && previewRoot !== root && previewMinimum && dragEntity
+    ? available.width < previewMinimum.width || available.height < previewMinimum.height
+      ? rect
+      : tileGeometry(previewRoot, rect).leaves.get(dragEntity)
+    : null;
+
+  const targets = (entity: string | null) => sides.map((side) => {
+    const Icon = sideIcons[side];
+    return <div key={side} className={`${dockTargetClass} ${sidePlacement[side][entity === null ? "outer" : "inner"]}`}
+      data-dock-side={side} data-dock-entity={entity ?? ""} title={sideNames[side]}
+      data-active={target?.entity === entity && target.side === side || undefined}>
+      <Icon size={18} aria-hidden="true" />
+    </div>;
+  });
+
+  return <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden p-2 data-[dragging]:[&_iframe]:pointer-events-none data-[resizing]:[&_iframe]:pointer-events-none"
+    data-dragging={canArrange && dragEntity !== null || undefined} data-resizing={resizing || undefined}>
+    {compact && entities.length > 1 && <label className="flex items-center gap-2 pb-2 text-[0.8rem]">Kachel
+      <select className="max-w-[60%] min-w-0" aria-label="Sichtbare Kachel" value={active} onChange={(event) => select(event.target.value)}>
+        {entities.map((entity) => <option key={entity} value={entity}>{itemMap.get(entity)?.title ?? entity}</option>)}
+      </select>
+      <span className="truncate text-muted-foreground">Mehr Platz für die geteilte Ansicht benötigt</span>
+    </label>}
+    <div ref={stageRef} className="relative min-h-0 min-w-0 flex-1 overflow-hidden"
+      onDragOver={(event) => {
+        if (!canArrange || dragEntity === null || !event.dataTransfer.types.includes(CANVAS_TILE_DRAG_TYPE)) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+        const element = event.target instanceof Element ? event.target.closest<HTMLElement>("[data-dock-side]") : null;
+        const next = element && stageRef.current?.contains(element)
+          ? { entity: element.dataset.dockEntity || null, side: element.dataset.dockSide as TileDockSide } : null;
+        setTarget((previous) => previous?.entity === next?.entity && previous?.side === next?.side ? previous : next);
+      }}
+      onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setTarget(null); }}
+      onDrop={(event) => {
+        if (!canArrange || dragEntity === null) return;
+        const entity = event.dataTransfer.getData(CANVAS_TILE_DRAG_TYPE);
+        if (!entity || entity !== dragEntity) return;
+        event.preventDefault();
+        if (!itemMap.has(entity) && !entities.includes(entity)) return;
+        const element = event.target instanceof Element ? event.target.closest<HTMLElement>("[data-dock-side]") : null;
+        try {
+          if (!root || element) {
+            const next = dockTile(root, entity, element?.dataset.dockEntity || null, (element?.dataset.dockSide ?? "right") as TileDockSide);
+            if (next !== root) onChange(next === null ? null : canvasTileNodeOf(next));
+            select(entity);
+            setError(null);
+          }
+        } catch (cause) {
+          setError(cause instanceof Error ? cause.message : String(cause));
+        } finally {
+          setDragEntity(null);
+          setTarget(null);
+        }
+      }}>
+      {error && <div className="absolute inset-x-2 bottom-2 z-7 flex items-center gap-2 rounded-lg border border-primary bg-canvas p-3 text-foreground shadow-[0_2px_8px_#0002]" role="alert"><span className="flex-1">{error}</span><button className="grid cursor-pointer place-items-center bg-transparent p-1" type="button" aria-label="Meldung schließen" onClick={() => setError(null)}><X size={16} /></button></div>}
+      {!root && <div className="grid h-full place-items-center rounded-lg border border-dashed border-border-strong p-6 text-center text-muted-foreground">{canArrange ? "Ziehe einen Actor oder eine Mini-App aus der Kopfzeile hierher." : "Für diese Kachelansicht sind noch keine Inhalte angeordnet."}</div>}
+      {mountedEntities.map((entity) => {
+        const item = itemMap.get(entity);
+        const bounds = materialFaceRect(compact ? rect : geometry.leaves.get(entity)!);
+        return <section key={entity} className={materialCardClass(item?.surface ?? (entity.startsWith("app:") ? "app" : "agent"),
+          "absolute z-0 flex min-h-0 min-w-0 flex-col overflow-visible")} data-tile-entity={entity} data-surface="material"
+          style={{ ...positioned(bounds), display: compact && entity !== active ? "none" : undefined }}
+          onFocusCapture={() => { if (active !== entity) setSelected(entity); }}>
+          <MaterialBody steps={0} />
+          <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-[15.5px]">
+            <header className={`${materialHeadClass} flex-[0_0_49px] min-w-0 select-none border-b border-[#51465738] text-foreground [&[draggable=true]]:cursor-grab`}
+              draggable={canArrange} onDragStart={(event) => {
+              if (!canArrange) { event.preventDefault(); return; }
+              event.dataTransfer.setData(CANVAS_TILE_DRAG_TYPE, entity);
+              event.dataTransfer.effectAllowed = "move";
+            }}>
+              {canArrange && <GripVertical size={16} aria-hidden="true" />}
+              <span className={materialIconClass}>{item?.surface === "app" || entity.startsWith("app:") ? <LayoutGrid size={20} aria-hidden="true" /> : item?.surface === "script" ? <CodeXml size={20} aria-hidden="true" /> : <Sparkles size={20} aria-hidden="true" />}</span>
+              <span className={`${materialTitleClass} flex-1`} title={item?.title ?? entity}>{item?.title ?? entity}</span>
+              {canArrange && <button className="grid size-[26px] cursor-pointer place-items-center rounded-[4px] bg-transparent p-0 text-muted-foreground hover:bg-glass-group hover:text-foreground"
+                type="button" draggable={false} aria-label={`Kachel ${item?.title ?? entity} entfernen`}
+                onClick={() => onChange(removeTile(root, entity))}><X size={16} /></button>}
+            </header>
+            <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-auto [&>*]:min-h-0 [&>*]:min-w-0 [&>*]:flex-1">{item?.content ?? <div className="p-4.5 text-muted-foreground">{canArrange ? "Dieser Inhalt ist nicht mehr verfügbar. Du kannst die Kachel entfernen oder einen anderen Inhalt hier andocken." : "Dieser Inhalt ist nicht mehr verfügbar."}</div>}</div>
+          </div>
+          {canArrange && dragEntity !== null && dragEntity !== entity && <div className="absolute inset-0 z-4"><div className="pointer-events-none absolute top-1/2 left-1/2 size-[116px] -translate-x-1/2 -translate-y-1/2">{targets(entity)}</div></div>}
+        </section>;
+      })}
+      {!compact && geometry.dividers.map((divider) => <div key={divider.path.join(".")} className={dividerClass}
+        role="separator" tabIndex={0} aria-label="Kachelgröße ändern"
+        aria-orientation={divider.direction === "horizontal" ? "vertical" : "horizontal"}
+        aria-valuemin={Math.round(divider.minimum * 100)} aria-valuemax={Math.round(divider.maximum * 100)} aria-valuenow={Math.round(divider.ratio * 100)}
+        data-direction={divider.direction} style={positioned(divider)}
+        onPointerDown={(event) => {
+          if (event.button !== 0 || !event.isPrimary || !root || resizeRef.current) return;
+          event.preventDefault();
+          event.currentTarget.setPointerCapture(event.pointerId);
+          resizeRef.current = { divider, start: divider.direction === "horizontal" ? event.clientX : event.clientY, root, next: root, pointerId: event.pointerId, handle: event.currentTarget };
+          setResizing(true);
+        }}
+        onPointerMove={(event) => {
+          if (resizeRef.current?.pointerId !== event.pointerId) return;
+          updateResize(event);
+          if (resizeFrame.current !== null) return;
+          resizeFrame.current = requestAnimationFrame(() => {
+            resizeFrame.current = null;
+            if (resizeRef.current) setResizePreview(resizeRef.current.next);
+          });
+        }}
+        onPointerUp={(event) => {
+          const state = resizeRef.current;
+          if (!state || state.pointerId !== event.pointerId) return;
+          updateResize(event);
+          cancelResize();
+          if (state.next !== state.root) onChange(state.next);
+        }}
+        onLostPointerCapture={(event) => { if (resizeRef.current?.pointerId === event.pointerId) cancelResize(); }}
+        onPointerCancel={(event) => { if (resizeRef.current?.pointerId === event.pointerId) cancelResize(); }}
+        onKeyDown={(event) => {
+          if (event.key === "Escape" && resizeRef.current) { event.preventDefault(); cancelResize(); return; }
+          if (!root || resizeRef.current) return;
+          const negative = divider.direction === "horizontal" ? "ArrowLeft" : "ArrowUp";
+          const positive = divider.direction === "horizontal" ? "ArrowRight" : "ArrowDown";
+          if (event.key !== negative && event.key !== positive && event.key !== "Home" && event.key !== "End") return;
+          event.preventDefault();
+          const ratio = event.key === "Home" ? divider.minimum : event.key === "End" ? divider.maximum : divider.ratio + (event.key === positive ? 0.02 : -0.02);
+          onChange(resizeTile(root, divider.path, Math.max(divider.minimum, Math.min(divider.maximum, ratio))));
+        }}><span /></div>)}
+      {resizing && <div className="absolute inset-0 z-2" />}
+      {canArrange && dragEntity !== null && root && <div className="pointer-events-none absolute inset-2 z-6">{targets(null)}</div>}
+      {canArrange && dragEntity !== null && preview && <div className={materialCardClass(itemMap.get(dragEntity)?.surface ?? (dragEntity.startsWith("app:") ? "app" : "agent"),
+        "pointer-events-none absolute z-5 opacity-80")}
+        style={positioned(materialFaceRect(preview))}><MaterialBody steps={0} /><div className="absolute inset-0 rounded-[15.5px] border-2 border-primary bg-primary/22" /></div>}
+    </div>
+  </div>;
+}

package/plugins/ragents.orchestration/web/ZoomSettings.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import { useAccess } from "@aicontainer/web/AccessContext";
+import { Button, Input } from "@aicontainer/web/ui";
+import { DEFAULT_PINCH_ZOOM_SENSITIVITY, savePinchZoomSensitivity, usePinchZoomSensitivity } from "./zoom-settings";
+
+export function ZoomSettings() {
+  const access = useAccess();
+  const sensitivity = usePinchZoomSensitivity();
+  const [value, setValue] = useState(String(sensitivity));
+  const [message, setMessage] = useState<string>();
+  const [error, setError] = useState<string>();
+  useEffect(() => { setValue(String(sensitivity)); }, [sensitivity]);
+  const writable = access.can("settings.write");
+  const save = (next: number) => {
+    if (!writable) return;
+    setError(undefined);
+    setMessage(undefined);
+    try {
+      savePinchZoomSensitivity(next);
+      setValue(String(next));
+      setMessage("Zoom-Empfindlichkeit gespeichert.");
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    }
+  };
+  return <form className="grid gap-3" onSubmit={(event) => {
+    event.preventDefault(); save(Number(value));
+  }}>
+    <p className="text-muted-foreground">Empfindlichkeit der Pinch-Geste auf dem Canvas. Faktor 1 entspricht dem bisherigen Verhalten, Faktor 2 ist doppelt so empfindlich. Gilt sofort für alle Runs in diesem Browser.</p>
+    <div className="flex flex-wrap items-end gap-3">
+      <label className="grid gap-1.5"><span>Pinch-Zoom-Faktor</span><Input className="w-[130px]" type="number" required step="0.1" min="0.1" max="10"
+        disabled={!writable} value={value} onChange={(event) => { setValue(event.target.value); setMessage(undefined); }} /></label>
+      <Button type="submit" disabled={!writable}>Speichern</Button>
+      <Button disabled={!writable} onClick={() => save(DEFAULT_PINCH_ZOOM_SENSITIVITY)} 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>;
+}