@schlenkr/ragents 0.1.0 → 0.1.1

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

@@ -1,17 +1,15 @@
-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]";
+/** Schichtwerk: matte Front mit geraden Kanten. */
+const materialBaseClass = "relative isolate rounded-panel border-[1.5px] border-(--material-edge) bg-(--material-face) [--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%]",
+  agent: "[--material-face:var(--color-glass-agent)]",
+  primary: "[--material-face:var(--color-glass-primary)]",
+  script: "[--material-face:var(--color-glass-script)]",
+  app: "[--material-face:var(--color-glass-app)]",
 };
 
 export const materialCardClass = (surface: MaterialSurface, className?: string) =>
@@ -23,82 +21,3 @@ export const materialHeadClass = "relative flex items-center gap-2 rounded-t-[15
 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/TiledCanvas.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, typ
 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";
+import { materialCardClass, materialHeadClass, materialIconClass, materialTitleClass } from "./MaterialBody";
 
 export interface CanvasTileItem { entity: string; title: string; content: ReactNode; surface?: "agent" | "primary" | "script" | "app" }
 interface TiledCanvasProps {
@@ -211,7 +211,6 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
           "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) => {
@@ -275,7 +274,7 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
       {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>}
+        style={positioned(materialFaceRect(preview))}><div className="absolute inset-0 rounded-[15.5px] border-2 border-primary bg-primary/22" /></div>}
     </div>
   </div>;
 }

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

@@ -2,26 +2,20 @@ import { createLocalStorageSetting } from "@aicontainer/web/lib/local-storage-se
 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 const DEFAULT_CANVAS_VIEW_PREFERENCES: CanvasViewPreferences = Object.freeze({ actorVisibility: Object.freeze({}) });
+export const canvasViewStorageKey = (runId: string) => `ragents.orchestration.actor-visibility:${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"
+    || Object.keys(value).some((key) => key !== "actorVisibility")
     || !("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.");
+    throw new Error("Die gespeicherte Actor-Sichtbarkeit ist ungültig.");
   }
   return value as CanvasViewPreferences;
 }
@@ -29,12 +23,12 @@ export function parseCanvasViewPreferences(raw: string | null): CanvasViewPrefer
 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));
+  return override ?? (actor.id !== primaryActorId && !appActorIds.has(actor.id));
 };
 
 const setting = createLocalStorageSetting({
-  changeEvent: "ragents-canvas-view-change",
-  matchesKey: (key) => key.startsWith("ragents.orchestration.canvas-view:"),
+  changeEvent: "ragents-actor-visibility-change",
+  matchesKey: (key) => key.startsWith("ragents.orchestration.actor-visibility:"),
   parse: parseCanvasViewPreferences,
   serialize: JSON.stringify,
 });

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type PointerEvent, type ReactNode, type RefObject } from "react";
 import { createPortal } from "react-dom";
-import { ArrowUpRightIcon, LayoutGridIcon, Maximize2Icon, PanelBottomIcon, PanelRightIcon } from "lucide-react";
+import { ArrowUpRightIcon, LayoutGridIcon, Maximize2Icon, MessageSquareIcon, PanelBottomIcon, PanelRightIcon } from "lucide-react";
 import { useAccess } from "@aicontainer/web/AccessContext";
 import { ChatPanel } from "@aicontainer/web/chat/ChatPanel";
 import { runIsWorking } from "@aicontainer/web/chat/chat-target";
@@ -19,12 +19,9 @@ import { runViewFrom, type RunActor, type RunView } from "../run-view";
 import { AddresseeControl } from "./AddresseeControl";
 import { columnActors, elementNeedsAttention, partitionColumnActors } from "./column-actors";
 import { useColumnSettings } from "./column-settings";
-import { clampChatWidth, saveColumnState, useColumnState, type ColumnState } from "./column-state";
+import { chatLayoutFor, clampChatWidth, saveColumnState, useColumnState, type ChatLayout, type ColumnChatMode, type ColumnState } from "./column-state";
 import { sheetStatus } from "./sheet-status";
 
-/** Wie der Chat zur Mini-App liegt: allein, daneben oder als Sheet darüber. */
-type ChatLayout = "full" | "side" | "floating";
-
 const SHEET_HEIGHT = "90%";
 const SHEET_BLUR_DELAY = 220;
 
@@ -36,6 +33,12 @@ const chatLayoutClass: Readonly<Record<ChatLayout, string>> = {
   floating: "absolute inset-x-2.5 bottom-0 z-20 flex flex-col overflow-hidden rounded-t-2xl border border-b-0 border-transparent bg-transparent transition-[height,box-shadow,background-color,border-color] duration-300 ease-[cubic-bezier(.32,.72,0,1)] data-expanded:border-border data-expanded:bg-card data-expanded:shadow-[0_-16px_60px_#00000080] motion-reduce:transition-none",
 };
 const chatSurfaceClass = "rounded-none border-0 bg-transparent";
+const chatModeButtonClass = "aria-pressed:bg-accent aria-pressed:text-primary";
+const chatModes: readonly { Icon: typeof MessageSquareIcon; label: string; mode: ColumnChatMode; title: string }[] = [
+  { Icon: MessageSquareIcon, label: "Nur Chat", mode: "chat", title: "Nur Chat: der Chat füllt die Spalte, die Mini-App tritt zurück" },
+  { Icon: PanelBottomIcon, label: "Chat unten", mode: "bottom", title: "Chat unten: das Sheet über der Mini-App" },
+  { Icon: PanelRightIcon, label: "Chat rechts", mode: "side", title: "Chat rechts: neben der Mini-App" },
+];
 
 interface ColumnElement {
   Element: CanvasElementContribution["Element"];
@@ -98,7 +101,7 @@ function RunColumn({ canvasElements, cardSections, navigation, renderChat, sessi
   }, [actors, selectActor]);
   const primarySelected = selectedActor === undefined || selectedActor.id === primaryId;
   const narrow = width < settings.sideWidth;
-  const layout: ChatLayout = !selectedElement ? "full" : !narrow && stored.chat === "side" ? "side" : "floating";
+  const layout = chatLayoutFor({ chat: stored.chat, hasElement: selectedElement !== undefined, narrow });
   const sheet = useSheet(layout === "floating", sheetRef, addresseeOpen, settings.openDelay);
   const peek = useSheetPeek(layout === "floating", sheetRef, grabRef, statusRef, selectedActor?.id);
   const scrollerRef = useRef<HTMLDivElement | null>(null);
@@ -129,22 +132,19 @@ function RunColumn({ canvasElements, cardSections, navigation, renderChat, sessi
     technical={inspect}
     view={view}
   />;
-  const layoutToggle = layout !== "full" && toolbarContainer && createPortal(<Button
-    aria-label={narrow ? "Chat bleibt unten" : stored.chat === "side" ? "Chat nach unten legen" : "Chat nach rechts legen"}
-    className="self-center"
-    disabled={narrow}
-    onClick={() => save({ chat: stored.chat === "side" ? "bottom" : "side" })}
-    size="icon-lg"
-    title={narrow ? `Chat bleibt unten, solange das Panel schmaler als ${settings.sideWidth} Pixel ist` : stored.chat === "side" ? "Chat nach unten legen" : "Chat nach rechts legen"}
-    variant="ghost"
-  >{!narrow && stored.chat === "side" ? <PanelBottomIcon /> : <PanelRightIcon />}</Button>, toolbarContainer);
+  const chatModeSwitch = selectedElement && toolbarContainer && createPortal(<ChatModeSwitch
+    narrow={narrow}
+    onChange={(chat) => save({ chat })}
+    selected={stored.chat}
+    sideWidth={settings.sideWidth}
+  />, toolbarContainer);
   const chat = primarySelected || !view || !selectedActor
     ? renderChat({ chatElementClassName: chatSurfaceClass, chatScrollerRef: (element) => { scrollerRef.current = element; }, toolbarLeft: addressee })
     : <ActorColumnChat actor={selectedActor} cardSections={cardSections} navigation={navigation} onNavigate={navigate} session={session} toolbarLeft={addressee} view={view} />;
 
   return <div className="flex min-h-0 min-w-0 flex-1 flex-col" data-column="run" ref={rootRef}>
-    {layoutToggle}
-    {elements.length > 1 && <nav aria-label="Mini-Apps des Runs" className={chipRowClass}>
+    {chatModeSwitch}
+    {layout !== "full" && elements.length > 1 && <nav aria-label="Mini-Apps des Runs" className={chipRowClass}>
       {elements.map(({ definition }) => <ElementChip
         centered={centered.has(definition.id)}
         definition={definition}
@@ -158,7 +158,7 @@ function RunColumn({ canvasElements, cardSections, navigation, renderChat, sessi
       />)}
     </nav>}
     <div className={cn("relative min-h-0 min-w-0 flex-1", layout === "side" ? "grid" : "flex flex-col")} data-chat-layout={layout} style={layout === "side" ? { gridTemplateColumns: `minmax(0,1fr) auto ${chatWidth}px` } : undefined}>
-      {selectedElement && <ColumnStage centered={centered.has(selectedElement.definition.id)} element={selectedElement} navigation={navigation} peek={layout === "floating" ? peek : 0} runId={runId} session={session} />}
+      {layout !== "full" && selectedElement && <ColumnStage centered={centered.has(selectedElement.definition.id)} element={selectedElement} navigation={navigation} peek={layout === "floating" ? peek : 0} runId={runId} session={session} />}
       {layout === "side" && <Sash
         onChange={(next) => setChatWidth(clampChatWidth(next, availableWidth()))}
         onCommit={(next) => save({ chatWidth: clampChatWidth(next, availableWidth()) })}
@@ -207,6 +207,31 @@ function RunColumn({ canvasElements, cardSections, navigation, renderChat, sessi
   </div>;
 }
 
+/** Die drei Ansichten der Spalte in der Kopfzeile; "Chat rechts" bleibt gesperrt, solange die Spalte zu schmal ist. */
+function ChatModeSwitch({ narrow, onChange, selected, sideWidth }: {
+  narrow: boolean;
+  onChange: (mode: ColumnChatMode) => void;
+  selected: ColumnChatMode;
+  sideWidth: number;
+}) {
+  return <div aria-label="Ansicht der Spalte" className="flex flex-none items-center gap-0.5 self-center rounded-lg border border-border bg-card p-0.5" role="group">
+    {chatModes.map(({ Icon, label, mode, title }) => {
+      const blocked = mode === "side" && narrow;
+      return <Button
+        aria-label={label}
+        aria-pressed={selected === mode}
+        className={chatModeButtonClass}
+        disabled={blocked}
+        key={mode}
+        onClick={() => onChange(mode)}
+        size="icon-sm"
+        title={blocked ? `Chat bleibt unten, solange das Panel schmaler als ${sideWidth} Pixel ist` : title}
+        variant="ghost"
+      ><Icon /></Button>;
+    })}
+  </div>;
+}
+
 /** Das Sheet: Maus, Fokus oder der Griff schieben es hoch; Escape, die Bühne oder der Griff senken es. Ein offenes Pop-out hält es oben. */
 function useSheet(active: boolean, sheetRef: RefObject<HTMLElement | null>, blocked: boolean, openDelay: number) {
   const [expanded, setExpanded] = useState(false);
@@ -308,7 +333,7 @@ function ColumnStage({ centered, element, navigation, peek, runId, session }: {
           <span>{title} liegt in der Mitte.</span>
           <Button onClick={() => host.returnToColumn(runId, definition.id)} size="sm" variant="outline">Zurück ins Panel</Button>
         </div>
-        : <Element definition={definition} navigation={navigation} presentation="tiled" session={session} />}
+        : <Element definition={definition} navigation={navigation} session={session} />}
     </div>
   </section>;
 }

package/plugins/ragents.orchestration/web/column/column-state.ts

@@ -1,7 +1,10 @@
 import { createLocalStorageSetting } from "@aicontainer/web/lib/local-storage-setting";
 
-/** Wo der Chat liegt, wenn die Spalte breit genug ist; darunter liegt er immer unten als Sheet. */
-export type ColumnChatMode = "side" | "bottom";
+/** Die gewählte Ansicht der Spalte: nur Chat, Chat unten als Sheet oder Chat rechts, sofern die Spalte breit genug ist. */
+export type ColumnChatMode = "chat" | "bottom" | "side";
+
+/** Wie der Chat zur Mini-App liegt: allein, daneben oder als Sheet darüber. */
+export type ChatLayout = "full" | "side" | "floating";
 
 /** Persönlicher Zustand der Arbeitsspalte je Run: gewählte Mini-App, gewählter Actor, Chat-Lage und Chatbreite daneben. */
 export interface ColumnState {
@@ -21,9 +24,11 @@ export const DEFAULT_COLUMN_STATE: ColumnState = Object.freeze({ element: null,
 export const columnStorageKey = (runId: string) => `ragents.orchestration.column:${runId}`;
 
 const isTextOrNull = (value: unknown): value is string | null => value === null || typeof value === "string";
-/** Frühere Zustände kannten `auto`, `floating` und `docked` sowie eine Bühnenhöhe; sie werden auf die zwei Lagen abgebildet. */
+/** Frühere Zustände kannten `auto`, `floating` und `docked` sowie eine Bühnenhöhe; sie werden auf die heutigen Lagen abgebildet. */
 const chatModeOf = (value: unknown): ColumnChatMode | undefined =>
-  value === undefined || value === "side" || value === "auto" ? "side" : value === "bottom" || value === "floating" || value === "docked" ? "bottom" : undefined;
+  value === undefined || value === "side" || value === "auto" ? "side"
+    : value === "chat" ? "chat"
+      : value === "bottom" || value === "floating" || value === "docked" ? "bottom" : undefined;
 
 export function parseColumnState(raw: string | null): ColumnState {
   if (raw === null) return DEFAULT_COLUMN_STATE;
@@ -40,6 +45,10 @@ export function parseColumnState(raw: string | null): ColumnState {
   return { element: stored.element, actor: stored.actor, chat: chatModeOf(stored.chat) ?? "side", chatWidth: stored.chatWidth ?? CHAT_DEFAULT_WIDTH };
 }
 
+/** Ohne Mini-App und in der Ansicht "Nur Chat" füllt der Chat die Spalte; sonst liegt er rechts, wenn Platz ist, und unten, wenn nicht. */
+export const chatLayoutFor = ({ chat, hasElement, narrow }: { chat: ColumnChatMode; hasElement: boolean; narrow: boolean }): ChatLayout =>
+  !hasElement || chat === "chat" ? "full" : !narrow && chat === "side" ? "side" : "floating";
+
 export const clampChatWidth = (width: number, available: number): number =>
   Math.max(CHAT_MIN_WIDTH, Math.min(Math.round(width), Math.max(CHAT_MIN_WIDTH, available - STAGE_MIN_WIDTH)));
 

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

@@ -4,7 +4,5 @@ export const ORCHESTRATION_TAB_ID = "ragents.orchestration.inspector";
 /** Knopf in der Statusleiste: volle Leistenhöhe, keine Rundung, ruhige Fläche. */
 export const statusControlClass = "flex h-full min-w-statusbar items-center justify-center self-stretch whitespace-nowrap px-2.5 text-[0.7rem] text-foreground hover:bg-primary/12 aria-expanded:bg-primary/12 focus-visible:outline-2 focus-visible:outline-primary focus-visible:-outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
 
-export const statusOutputClass = "flex h-full min-w-14 items-center justify-center self-stretch whitespace-nowrap px-2.5 font-mono text-[0.7rem] tabular-nums text-muted-foreground";
-
 /** Rahmen für die Plugin-Beiträge einer Actor-Karte; ein Beitrag bringt keine eigenen Abstaende mit. */
 export const cardSectionsClass = "grid gap-2.5 border-t border-border-soft px-3 pt-2.5 pb-2.5 empty:hidden";

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

@@ -4,11 +4,8 @@ import { FlowInspector as NetworkInspector, type FlowSelection as NetworkSelecti
 import { OrchestrationCenter } from "./Center";
 import { OrchestrationColumn } from "./column/RunColumn";
 import { DocumentsSection } from "./DocumentsSection";
-import { CardSizeSettings } from "./CardSizeSettings";
-import { ZoomSettings } from "./ZoomSettings";
 import { ColumnSettings } from "./column/ColumnSettings";
 import { ActorShortcuts } from "./ActorCanvasControls";
-import { MaterialSettings } from "@aicontainer/web/MaterialSettings";
 import { JournalStatus } from "./JournalStatus";
 import { StopRunHeader } from "./StopRunButton";
 import { EXECUTIONS_TAB_ID, ExecutionsPanel, IconExecutions } from "./ExecutionsPanel";
@@ -149,9 +146,6 @@ export const webPlugin: WebPlugin = {
     { id: "ragents.orchestration.actors", order: 300, placement: "canvas", Header: ActorShortcuts },
   ],
   settings: [
-    { id: "ragents.orchestration.material", category: "appearance", label: "Schichtwerk-Material", Settings: MaterialSettings },
-    { id: "ragents.orchestration.card-size", category: "appearance", label: "LLM-Karten", Settings: CardSizeSettings },
-    { id: "ragents.orchestration.zoom", category: "appearance", label: "Canvas-Zoom", Settings: ZoomSettings },
     { id: "ragents.orchestration.column", category: "appearance", label: "Arbeitsspalte", Settings: ColumnSettings },
   ],
   canvas: { Center: OrchestrationCenter, Column: OrchestrationColumn, tabId: ORCHESTRATION_TAB_ID },

package/plugins/ragents.orchestration/web/tile-docking.ts

@@ -19,6 +19,12 @@ export function tileEntities(root: CanvasTileNode | null): string[] {
   return root === null ? [] : "entity" in root ? [root.entity] : root.children.flatMap(tileEntities);
 }
 
+function tileLeaf(root: CanvasTileNode | null, entity: string): CanvasTileNode | undefined {
+  if (root === null) return undefined;
+  if ("entity" in root) return root.entity === entity ? root : undefined;
+  return tileLeaf(root.children[0], entity) ?? tileLeaf(root.children[1], entity);
+}
+
 export function removeTile(root: CanvasTileNode | null, entity: string): CanvasTileNode | null {
   if (root === null || "entity" in root) return root?.entity === entity ? null : root;
   const first = removeTile(root.children[0], entity);
@@ -31,7 +37,7 @@ export function removeTile(root: CanvasTileNode | null, entity: string): CanvasT
 export function dockTile(root: CanvasTileNode | null, entity: string, target: string | null, side: TileDockSide): CanvasTileNode | null {
   if ((root && "entity" in root && root.entity === entity && target === null) || entity === target || (target !== null && !tileEntities(root).includes(target))) return root;
   const remaining = removeTile(root, entity);
-  const leaf: CanvasTileNode = { entity };
+  const leaf: CanvasTileNode = tileLeaf(root, entity) ?? { entity };
   if (!remaining) return leaf;
   const wrap = (node: CanvasTileNode): CanvasTileNode => ({
     direction: side === "left" || side === "right" ? "horizontal" : "vertical",

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

@@ -5,30 +5,28 @@ import { canvasTileEntities, canvasTileNodeOf, type CanvasTileNode } from "../ti
 import type { RunView } from "./run-view";
 
 export interface CanvasPresentation {
-  mode: "free" | "tiled";
   root: CanvasTileNode | null;
   programBasis?: string;
 }
 
-export const canvasPresentationStorageKey = (runId: string) => `ragents.orchestration.canvas-presentation:${runId}`;
+export const canvasPresentationStorageKey = (runId: string) => `ragents.orchestration.tile-presentation:${runId}`;
 
 export function parseCanvasPresentation(raw: string | null): CanvasPresentation | null {
   if (raw === null || raw === "null") return null;
   const value: unknown = JSON.parse(raw);
   if (!value || typeof value !== "object" || Array.isArray(value)
-    || !("mode" in value) || (value.mode !== "free" && value.mode !== "tiled")
-    || !("root" in value) || Object.keys(value).some((key) => !["mode", "root", "programBasis"].includes(key))
+    || !("root" in value) || Object.keys(value).some((key) => !["root", "programBasis"].includes(key))
     || ("programBasis" in value && typeof value.programBasis !== "string")) {
     throw new Error("Die gespeicherte Kachelansicht ist ungültig.");
   }
-  return { mode: value.mode, root: value.root === null ? null : canvasTileNodeOf(value.root),
+  return { root: value.root === null ? null : canvasTileNodeOf(value.root),
     ...("programBasis" in value ? { programBasis: value.programBasis as string } : {}),
   };
 }
 
 const setting = createLocalStorageSetting({
-  changeEvent: "ragents-canvas-presentation-change",
-  matchesKey: (key) => key.startsWith("ragents.orchestration.canvas-presentation:"),
+  changeEvent: "ragents-tile-presentation-change",
+  matchesKey: (key) => key.startsWith("ragents.orchestration.tile-presentation:"),
   parse: parseCanvasPresentation,
   serialize: JSON.stringify,
 });
@@ -37,7 +35,7 @@ export const useCanvasPresentationOverride = (runId: string) => setting.useValue
 export const saveCanvasPresentation = (runId: string, value: CanvasPresentation | null) =>
   setting.save(canvasPresentationStorageKey(runId), value);
 
-export const canvasProgramBasis = (program: CanvasPresentation): string => JSON.stringify({ mode: program.mode, root: program.root });
+export const canvasProgramBasis = (program: CanvasPresentation): string => JSON.stringify({ root: program.root });
 
 export function currentCanvasOverride(personal: CanvasPresentation | null, program: CanvasPresentation): CanvasPresentation | null {
   if (!personal) return null;
@@ -53,7 +51,7 @@ export function useCanvasPresentation(runId: string, view: RunView | undefined)
     try { return { layout: stateKey === undefined ? undefined : canvasLayoutOf(JSON.parse(stateKey)) }; }
     catch (error) { return { error: error instanceof Error ? error.message : String(error) }; }
   }, [stateKey]);
-  const program = useMemo((): CanvasPresentation => ({ mode: programLayout.layout?.mode ?? "free", root: programLayout.layout?.root ?? null }), [programLayout]);
+  const program = useMemo((): CanvasPresentation => ({ root: programLayout.layout?.root ?? null }), [programLayout]);
   const programBasis = useMemo(() => canvasProgramBasis(program), [program]);
   const storedLayout = useCanvasPresentationOverride(runId);
   const personalLayout = view && !programLayout.error ? currentCanvasOverride(storedLayout, program) : storedLayout;

package/plugins/ragents.overseer/server/coordinator-prompt.ts

@@ -1,7 +1,7 @@
 export const coordinatorPrompt = `Du koordinierst Aufträge in RAgents.
 Neue Runs dürfen mit einem fachlichen Auftrag starten. Der Auftrag beschreibt das gewünschte Ergebnis; der Run-Koordinator entdeckt die Funktionen und wählt seine technische Umsetzung selbst.
 Prüfe bei vorhandenen Runs den Typ des Primary-Actors in der Laufansicht. Ein TypeScript-Actor ist ein Programm mit festem Eingabeprotokoll, kein Chatpartner. Die Nachrichtenroute akzeptiert nur LLM-Actors; verwende bei Programmen die dokumentierte Mini-App oder Funktionen. Eine erfolgreiche Nachrichtenannahme bestätigt nur das Einreihen und beweist keine Ausführung. Behaupte einen Neustart oder eine Erledigung erst bei entsprechendem Ergebnis.
-Der freie Canvas ist die Vorgabe. Benutzer können stattdessen eine feste Kachelfläche verlangen, etwa Mini-App links und Chat rechts 50:50 oder eine Kachel oben und zwei unten im Verhältnis 2:1. Übernimm diese Wünsche in den Run-Auftrag; der Run setzt sie über context.functions.canvas_layout_replace mit mode und verschachteltem root um. Bei bestehenden Runs gib den Layoutauftrag an den LLM-Koordinator weiter. Persönliche Benutzeranordnungen bleiben vorrangig, bis der Benutzer die Programmanordnung übernimmt.
+Die Arbeitsfläche eines Runs besteht aus Kacheln. Benutzer können eine bestimmte Aufteilung verlangen, etwa Mini-App links und Chat rechts 50:50 oder eine Kachel oben und zwei unten im Verhältnis 2:1. Übernimm diese Wünsche in den Run-Auftrag; der Run setzt sie über context.functions.canvas_layout_replace mit verschachteltem root um. Bei bestehenden Runs gib den Layoutauftrag an den LLM-Koordinator weiter. Persönliche Benutzeranordnungen bleiben vorrangig, bis der Benutzer die Programmanordnung übernimmt.
 Antworte auf Deutsch mit echten Umlauten und den nötigen Einzelheiten. Nenne Läufe mit ihren Titeln. Verwende einfache Bindestriche und normale Anführungszeichen.`;
 
 export const preparationPrompt = `${coordinatorPrompt}

package/plugins/ragents.reference/examples.ts

@@ -5,8 +5,7 @@ export const referenceConcepts = [
   { id: "fifo", label: "Input-Warteschlange" },
   { id: "stop", label: "Actor-Stopp" },
   { id: "artifacts", label: "Artefakte und Zugriff" },
-  { id: "canvas", label: "Canvas-Layout" },
-  { id: "canvas-view", label: "Persönliche Canvas-Ansicht", entryKind: "walkthrough" },
+  { id: "tiles", label: "Kachelfläche", entryKind: "walkthrough" },
   { id: "actor-views", label: "Mini-Apps" },
   { id: "actor-state", label: "Actor-Zustand" },
   { id: "llm-actor-view", label: "LLM-Actor mit View" },

package/plugins/ragents.reference/run-scripts/balcony-wizard/RUN.md

@@ -8,7 +8,7 @@ tags: Run-Scripts, Anwendungsfall, Konzeptdemo, Mini-Apps, LLM-Actor mit View, F
 
 Das TypeScript-Setup legt einen Balkon-Berater mit dem Modellprofil `standard` und ausdrücklich
 ohne Werkzeuge an. Das mitgelieferte Programm `actors/balcony-app/` bindet eine eigenständige
-Canvas-App an diesen Actor. Seine Chatkarte ist durch die eigene View ersetzt; ein Koordinator
+Mini-App an diesen Actor. Die Fläche zeigt allein deren Kachel statt einer Chatkachel; ein Koordinator
 wird für diesen Run nicht angelegt. Der Berater wird zum Primary-Actor und behält seinen eigenen
 Interview-Prompt.
 

package/plugins/ragents.reference/run-scripts/balcony-wizard/actors/balcony-app/package.json

@@ -5,6 +5,6 @@
   "ragents": {
     "title": "Balkonberatung",
     "description": "Fünf Fragen und eine persönliche Gestaltungsempfehlung in einer eigenen Mini-App.",
-    "views": [{ "id": "main", "client": "src/client.tsx", "width": 620, "height": 650 }]
+    "views": [{ "id": "main", "client": "src/client.tsx" }]
   }
 }

package/plugins/ragents.reference/run-scripts/balcony-wizard/src/server.ts

@@ -25,7 +25,7 @@ export default defineActor(contract, {
       handle: "balcony-advisor", displayName: "Balkon-Berater", prompt, profile: profile.name, tools: [],
     });
     await context.functions.actor_program_activate({ name: "balcony-app", actor: `@${advisor.handle}` });
-    await context.functions.canvas_layout_replace({ nodes: [{ entity: `app:@${advisor.handle}/main` }] });
+    await context.functions.canvas_layout_replace({ root: { entity: `app:@${advisor.handle}/main` } });
     await context.functions.run_configure({ title: "Dein Balkon", primaryActor: `@${advisor.handle}` });
     context.state.replace({ built: true });
   },

package/plugins/ragents.reference/run-scripts/balcony-wizard/tests/program.test.ts

@@ -27,7 +27,7 @@ function setup(options: { missingProfile?: boolean; failActivation?: boolean } =
   return { calls, context };
 }
 
-test("richtet einen Berater ohne Werkzeuge und seine eigene Canvas-App ein", async () => {
+test("richtet einen Berater ohne Werkzeuge und seine eigene Mini-App als einzige Kachel ein", async () => {
   const { calls, context } = setup();
   await program.onInput!(input, context);
   assert.deepEqual(calls.map((call) => call.name), ["model_list", "agent_spawn", "actor_program_activate", "canvas_layout_replace", "run_configure"]);
@@ -36,7 +36,7 @@ test("richtet einen Berater ohne Werkzeuge und seine eigene Canvas-App ein", asy
     prompt: (calls[1]!.input as { prompt: string }).prompt,
   });
   assert.deepEqual(calls[2]!.input, { name: "balcony-app", actor: "@balcony-advisor" });
-  assert.deepEqual(calls[3]!.input, { nodes: [{ entity: "app:@balcony-advisor/main" }] });
+  assert.deepEqual(calls[3]!.input, { root: { entity: "app:@balcony-advisor/main" } });
   assert.deepEqual(calls[4]!.input, { title: "Dein Balkon", primaryActor: "@balcony-advisor" });
   assert.deepEqual(context.state.read(), { built: true });
   await program.onInput!(input, context);

package/plugins/ragents.reference/run-scripts/conversation-circle/RUN.md

@@ -3,12 +3,11 @@ title: Gesprächsrunde einrichten
 description: "Ein vorbereitetes Setup zeigt die Parametrisierung durch einen Startleitfaden und die Anordnung einer Gesprächsrunde. Der Koordinator führt anschließend die Runden."
 order: 120
 guide: ragents.reference.conversation-circle
-tags: Run-Scripts, Anwendungsfall, Konzeptdemo, Startleitfaden, Agententeams, Canvas-Layout
+tags: Run-Scripts, Anwendungsfall, Konzeptdemo, Startleitfaden, Agententeams
 ---
 
-Dasselbe Ziel wie die Skill "Gesprächsrunde auf der Fläche", aber deterministisch: das Script
-stellt mira, jon und ada als gewöhnliche LLMs auf, gestaltet die Fläche und übergibt dem Koordinator
-das Briefing.
+Ein deterministisches Setup: das Script stellt mira, jon und ada als gewöhnliche LLMs auf, teilt
+die Kachelfläche unter ihnen auf und übergibt dem Koordinator das Briefing.
 Die Karte prüft das Modell, dieses Script prüft die Plattform.
 
 Der Leitfaden übergibt `{ "topic": "...", "rounds": 2 }`. `topic` enthält 1 bis 160 Zeichen, `rounds` ist eine ganze Zahl von 1 bis 5. Der Startwert `null` wählt ausdrücklich das Thema "Sollten Innenstädte autofrei werden?" und zwei Runden. Andere unvollständige oder ungültige Werte werden vor dem Aufbau abgelehnt. Thema und Rundenzahl steuern die Darstellung und den Auftrag, das Thema auch den Run-Titel.

package/plugins/ragents.reference/run-scripts/conversation-circle/src/server.ts

@@ -58,25 +58,19 @@ export default defineActor(contract, {
     }
 
     await context.functions.canvas_layout_replace({
-      nodes: [
-        { entity: "shape:thema" },
-        { id: "runde", group: "circle", label: "Runde", frame: true },
-        { entity: participants[0]!, parent: "runde" },
-        { entity: participants[1]!, parent: "runde" },
-        { entity: participants[2]!, parent: "runde" },
-      ],
-      shapes: [{ id: "thema", kind: "diamond", text: topic }],
-      lines: [
-        { from: participants[0]!, to: participants[1]!, arrow: "end", label: "gibt weiter" },
-        { from: participants[1]!, to: participants[2]!, arrow: "end", label: "gibt weiter" },
-        { from: participants[2]!, to: participants[0]!, arrow: "end", label: "gibt weiter" },
-        { from: "shape:thema", to: participants[0]!, style: "dashed", label: "Auftakt" },
-      ],
+      root: {
+        direction: "vertical",
+        weights: [1, 1],
+        children: [
+          { entity: participants[0]! },
+          { direction: "horizontal", weights: [1, 1], children: [{ entity: participants[1]! }, { entity: participants[2]! }] },
+        ],
+      },
     });
 
     await context.functions.actor_input({
       actor: "@coordinator",
-      content: `Die Runde steht: ${participants.join(", ")} sind aufgestellt, die Fläche ist gestaltet. Thema: "${topic}". `
+      content: `Die Runde steht: ${participants.join(", ")} sind aufgestellt, die Fläche ist aufgeteilt. Thema: "${topic}". `
         + `Führe genau ${rounds} Gesprächsrunden durch: in jeder Runde ${participants.join(", ")} in dieser Reihenfolge. `
         + "Jeder erhält die bisherigen Beiträge. Ändere die Fläche nicht. "
         + "Fasse das Gespräch am Ende in drei Sätzen zusammen.",

package/plugins/ragents.reference/run-scripts/conversation-circle/tests/program.test.ts

@@ -8,9 +8,11 @@ test("Thema und Rundenzahl steuern Teilnehmer, Fläche und Auftrag", async () =>
   await program.onInput!(startInput({ topic: "Teamfrühstück", rounds: 3 }), context);
   assert.deepEqual(calls.filter((call) => call.name === "agent_spawn").map((call) => (call.input as { handle: string }).handle), ["mira", "jon", "ada"]);
   assert.deepEqual(calls.find((call) => call.name === "run_configure")?.input, { title: "Gesprächsrunde: Teamfrühstück" });
-  const layout = calls.find((call) => call.name === "canvas_layout_replace")?.input as { shapes: { text: string }[]; lines: unknown[] };
-  assert.equal(layout.shapes[0].text, "Teamfrühstück");
-  assert.equal(layout.lines.length, 4);
+  const layout = calls.find((call) => call.name === "canvas_layout_replace")?.input as { root: unknown };
+  assert.deepEqual(layout.root, { direction: "vertical", weights: [1, 1], children: [
+    { entity: "@mira" },
+    { direction: "horizontal", weights: [1, 1], children: [{ entity: "@jon" }, { entity: "@ada" }] },
+  ] });
   assert.match(JSON.stringify(calls.at(-1)), /genau 3 Gesprächsrunden/);
   assert.deepEqual(context.state.read(), { built: true });
   const completedCalls = calls.length;

package/plugins/ragents.reference/run-scripts/learning-afternoon/package.json

@@ -5,6 +5,6 @@
   "ragents": {
     "title": "Lernnachmittag",
     "backend": "src/server.ts",
-    "views": [{ "id": "main", "client": "src/client.tsx", "width": 620, "height": 550 }]
+    "views": [{ "id": "main", "client": "src/client.tsx" }]
   }
 }