@schlenkr/ragents 0.1.5 → 0.1.6

package/plugins/ragents.orchestration/surface.hbs

@@ -0,0 +1,34 @@
+## Arranging the tiled work surface
+
+The work surface of a run is a grid of tiles that fills the viewport. Each tile shows one actor or
+one activated mini-app. There is no other arrangement and no pan, zoom or free placement. Use
+`context.functions.canvas_layout_replace` from TypeScript to set the arrangement, and read its exact
+input type with `typescript_api` before the first call.
+
+`root` is the whole arrangement and replaces the stored one; it is the only parameter. A tile is
+{entity:"@helper"} or {entity:"app:@workspace/main"}. A split is {direction, weights, children} with
+direction "horizontal" (left/right) or "vertical" (top/bottom), two positive weights and exactly two
+children, each of which may be a split again. `root:null` clears the surface.
+
+App left, chat right at 50:50:
+{root:{direction:"horizontal",weights:[1,1],children:[
+  {entity:"app:@workspace/main"},{entity:"@helper"}
+]}}. One tile above two tiles at 2:1:
+{root:{direction:"vertical",weights:[2,1],children:[{entity:"@lead"},
+  {direction:"horizontal",weights:[1,1],children:[{entity:"@first"},{entity:"@second"}]}
+]}}. Resolve the actual actor and app names before calling; the example names are not existing
+participants.
+
+An actor tile carries {entity:"@helper",chatInput:false} when its chat composer should stay hidden.
+That changes neither permissions nor the inspector. Mini-app tiles have no chatInput.
+
+Activate actor programs before placing their views. Reference a view as `app:@handle/view-key` or
+`app:program-name/view-key`, using the handle, program name and view key you chose. The server
+resolves the actual view ID and rejects unknown views before storing the layout. Do not invent or
+copy generated view IDs. `actor_view_set_visibility` uses the same names without the `app:` prefix.
+
+Place what the user needs to see side by side and update the arrangement when the work changes.
+Participants you do not place stay reachable through the run header and can be dragged onto a tile
+there. Users can move, resize and remove tiles themselves; their personal arrangement takes
+precedence until they reset it, so do not resend a layout to fight it. The user takes part through
+the chat and needs no tile of their own.

package/plugins/ragents.orchestration/tiled-layout.ts

@@ -1,27 +1,27 @@
-import { canvasEntityKey, canvasEntityOf, type CanvasTileNode } from "./contract.js";
+import { surfaceEntityKey, surfaceEntityOf, type SurfaceTileNode } from "./contract.js";
 
-export type { CanvasTileNode } from "./contract.js";
+export type { SurfaceTileNode } from "./contract.js";
 
-export const MAX_CANVAS_TILE_DEPTH = 16;
-export const MAX_CANVAS_TILES = 64;
+export const MAX_SURFACE_TILE_DEPTH = 16;
+export const MAX_SURFACE_TILES = 64;
 
-export const canvasTileNodeOf = (input: unknown): CanvasTileNode => {
+export const surfaceTileNodeOf = (input: unknown): SurfaceTileNode => {
   const entities = new Set<string>();
-  const parse = (value: unknown, where: string, depth: number): CanvasTileNode => {
-    if (depth > MAX_CANVAS_TILE_DEPTH) throw new Error(`${where}: höchstens ${MAX_CANVAS_TILE_DEPTH} verschachtelte Teilungen sind erlaubt`);
+  const parse = (value: unknown, where: string, depth: number): SurfaceTileNode => {
+    if (depth > MAX_SURFACE_TILE_DEPTH) throw new Error(`${where}: höchstens ${MAX_SURFACE_TILE_DEPTH} verschachtelte Teilungen sind erlaubt`);
     if (typeof value !== "object" || value === null || Array.isArray(value)) throw new Error(`${where} muss eine Kachel oder Teilung sein`);
     const node = value as Record<string, unknown>;
     if (Object.hasOwn(node, "entity")) {
       if (Object.keys(node).some((key) => key !== "entity" && key !== "chatInput")) throw new Error(`${where}: eine Kachel trägt nur entity und chatInput; eine Teilung direction, weights und children`);
       if (typeof node.entity !== "string") throw new Error(`${where}.entity muss @handle oder app:<name>/<view> sein`);
-      const entity = canvasEntityOf(node.entity);
-      const key = canvasEntityKey(entity);
+      const entity = surfaceEntityOf(node.entity);
+      const key = surfaceEntityKey(entity);
       if (node.chatInput !== undefined && (entity.kind !== "actor" || typeof node.chatInput !== "boolean")) {
         throw new Error(`${where}.chatInput ist nur für Actors als Wahrheitswert erlaubt`);
       }
       if (entities.has(key)) throw new Error(`${where}: ${key} ist mehr als einmal als Kachel platziert`);
       entities.add(key);
-      if (entities.size > MAX_CANVAS_TILES) throw new Error(`Höchstens ${MAX_CANVAS_TILES} Kacheln sind erlaubt`);
+      if (entities.size > MAX_SURFACE_TILES) throw new Error(`Höchstens ${MAX_SURFACE_TILES} Kacheln sind erlaubt`);
       return node.chatInput === undefined ? { entity: key } : { entity: key, chatInput: node.chatInput as boolean };
     }
     if (Object.keys(node).some((key) => !["direction", "weights", "children"].includes(key))) throw new Error(`${where}: eine Teilung trägt nur direction, weights und children`);
@@ -40,16 +40,16 @@ export const canvasTileNodeOf = (input: unknown): CanvasTileNode => {
 };
 
 /** A tile hides the chat composer of its actor only when its leaf says chatInput: false. */
-export const canvasTileChatInput = (root: CanvasTileNode | null | undefined, entity: string): boolean =>
+export const surfaceTileChatInput = (root: SurfaceTileNode | null | undefined, entity: string): boolean =>
   !root ? true : "entity" in root
     ? root.entity !== entity || root.chatInput !== false
-    : canvasTileChatInput(root.children[0], entity) && canvasTileChatInput(root.children[1], entity);
+    : surfaceTileChatInput(root.children[0], entity) && surfaceTileChatInput(root.children[1], entity);
 
-export const canvasTileEntities = (root: CanvasTileNode | null | undefined): string[] =>
-  !root ? [] : "entity" in root ? [root.entity] : root.children.flatMap(canvasTileEntities);
+export const surfaceTileEntities = (root: SurfaceTileNode | null | undefined): string[] =>
+  !root ? [] : "entity" in root ? [root.entity] : root.children.flatMap(surfaceTileEntities);
 
-export const mapCanvasTileEntities = (root: CanvasTileNode, resolve: (entity: string) => string): CanvasTileNode =>
+export const mapSurfaceTileEntities = (root: SurfaceTileNode, resolve: (entity: string) => string): SurfaceTileNode =>
   "entity" in root ? { ...root, entity: resolve(root.entity) } : {
     ...root,
-    children: [mapCanvasTileEntities(root.children[0], resolve), mapCanvasTileEntities(root.children[1], resolve)],
+    children: [mapSurfaceTileEntities(root.children[0], resolve), mapSurfaceTileEntities(root.children[1], resolve)],
   };

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

@@ -1,21 +1,21 @@
-import { useAccess } from "@aicontainer/web/AccessContext";
-import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@aicontainer/web/ui";
+import { useAccess } from "@ragents/web/AccessContext";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@ragents/web/ui";
 import { useCallback, useMemo } from "react";
-import { ChatMessages } from "@aicontainer/web/chat/ChatMessages";
-import type { Message } from "@aicontainer/web/chat/types";
-import { useChatSteps, useToolRenderer } from "@aicontainer/web/PluginRegistry";
-import { actorChatMessages } from "./actor-conversation";
+import { ChatMessages, type Message } from "quassel";
+import { useActionRenderer, useToolRenderer } from "@ragents/web/PluginRegistry";
+import { useChatViewSettings } from "@ragents/web/chat-view-settings";
+import { actorChatMessages } from "@ragents/web/actor-conversation";
 import type { FlowSelection } from "./FlowInspector";
-import type { RunActor, RunView } from "./run-view";
+import type { RunActor, RunView } from "@ragents/web/run-view";
 
 const emptyMessages: readonly Message[] = [];
 
-export function ActorChat({ actor, view, presentation, surface = presentation, primaryMessages = emptyMessages, conversation, historyError, running = false, className, onNavigate, scrollerRef }: {
+export function ActorChat({ actor, view, presentation, display = presentation, primaryMessages = emptyMessages, conversation, historyError, running = false, className, onNavigate, scrollerRef }: {
   actor: RunActor;
   view: RunView;
-  presentation: "canvas" | "inspector";
+  presentation: "surface" | "inspector";
   /** Schlüssel der Anzeigefläche für den gemerkten Detailgrad; Default ist die Darstellung. */
-  surface?: string;
+  display?: string;
   primaryMessages?: readonly Message[];
   conversation?: readonly Message[];
   historyError?: string;
@@ -25,9 +25,10 @@ export function ActorChat({ actor, view, presentation, surface = presentation, p
   scrollerRef?: (element: HTMLDivElement | null) => void;
 }) {
   const inspect = useAccess().can("runs.inspect");
-  const steps = useChatSteps(view.id, actor.id, surface);
+  const chatView = useChatViewSettings(view.id, actor.id, "agents", display);
   const renderTool = useToolRenderer();
-  const configuredMode = steps.mode("agents");
+  const renderAction = useActionRenderer();
+  const configuredMode = chatView.detailMode;
   const detailMode = inspect || configuredMode === "off" ? configuredMode : "current";
   const messages = useMemo(() => actorChatMessages(view, actor, primaryMessages, conversation), [view, actor, primaryMessages, conversation]);
   const openLink = useCallback((href: string) => {
@@ -44,12 +45,13 @@ export function ActorChat({ actor, view, presentation, surface = presentation, p
     detailMode={detailMode}
     emptyState={<Empty><EmptyHeader><EmptyTitle>{actor.kind === "script" ? "Noch kein Verlauf" : "Noch kein Gespräch"}</EmptyTitle><EmptyDescription>{actor.kind === "script" ? "Hier erscheinen Programmeingaben und ihre Verarbeitung." : "Schreibe eine Nachricht, um das Gespräch zu beginnen."}</EmptyDescription></EmptyHeader></Empty>}
     messages={messages}
+    renderAction={renderAction}
     renderTool={renderTool}
     owner={actor.id}
     onLinkClick={openLink}
     running={running}
-    showTimestamps={presentation === "inspector"}
-    stepsExpandable={inspect && steps.stepsExpandable}
+    showTimestamps={chatView.showTimestamps}
+    stepsExpandable={inspect && chatView.stepsExpandable}
     scrollerRef={scrollerRef}
     />
   </>;

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

@@ -1,51 +1,48 @@
-import { useAccess } from "@aicontainer/web/AccessContext";
+import { useAccess } from "@ragents/web/AccessContext";
 import { useState, type ReactNode } from "react";
-import { stopChatActor } from "@aicontainer/web/api";
-import { useChatSteps } from "@aicontainer/web/PluginRegistry";
-import { ChatInputToolbar } from "@aicontainer/web/chat/ChatInputToolbar";
-import { DetailModeSwitch } from "@aicontainer/web/chat/DetailModeSwitch";
-import { useAttachmentCapabilities } from "@aicontainer/web/chat/useAttachmentCapabilities";
-import { programChatNotice } from "@aicontainer/web/chat/chat-target";
-import { sendActorMessage } from "./api";
-import type { RunActor, RunView } from "./run-view";
+import { interruptActorTurn, sendActorMessage } from "@ragents/web/api";
+import { ChatViewSwitches, useChatViewSettings } from "@ragents/web/chat-view-settings";
+import { ChatInputToolbar } from "quassel";
+import { StoppedActorNotice } from "@ragents/web/chat/StoppedActorNotice";
+import { useAttachmentCapabilities } from "@ragents/web/chat/useAttachmentCapabilities";
+import { programChatNotice } from "@ragents/web/chat/chat-target";
+import type { RunActor, RunView } from "@ragents/web/run-view";
 
 const controlsClass = "flex flex-shrink-0 items-center gap-2 border-t border-border-soft px-workspace-inset pt-2 pb-2.5";
 
 const noteClass = "mt-1.5 text-[0.7rem] text-muted-foreground";
 
-export function ActorChatControls({ actor, view, composerVisible = true, presentation = "inspector", surface = presentation, running = false, toolbarLeft, toolbarRight }: {
+export function ActorChatControls({ actor, view, composerVisible = true, presentation = "inspector", display = presentation, running = false, toolbarLeft, toolbarRight }: {
   actor: RunActor;
   view: RunView;
   composerVisible?: boolean;
-  presentation?: "canvas" | "inspector" | "column";
-  surface?: string;
+  presentation?: "surface" | "inspector" | "panel";
+  display?: string;
   running?: boolean;
   toolbarLeft?: ReactNode;
   toolbarRight?: ReactNode;
 }) {
   const writable = useAccess().can("runs.write");
   const [stopError, setStopError] = useState<string>();
-  const steps = useChatSteps(view.id, actor.id, surface);
+  const chatView = useChatViewSettings(view.id, actor.id, "agents", display);
   const attachments = useAttachmentCapabilities(view.id, actor.id, JSON.stringify(actor.execution?.driver.config));
-  const disabledReason = !writable ? "Du hast Lesezugriff auf diesen Run."
-    : actor.lifecycle?.kind === "stopped" ? "Dieser Actor ist gestoppt und nimmt keine Eingaben mehr an." : undefined;
-  const detailSwitch = steps.selectable && <DetailModeSwitch
-    collapsible={presentation === "canvas"}
-    mode={steps.mode("agents")}
-    onChange={(mode) => steps.setMode("agents", mode)}
-  />;
-  if (!composerVisible || actor.kind === "human") return detailSwitch && <div className={controlsClass}>{detailSwitch}</div>;
-  if (actor.kind === "script") return <div className={controlsClass}><p className={noteClass}>{programChatNotice}</p>{detailSwitch}</div>;
+  const disabledReason = !writable ? "Du hast Lesezugriff auf diesen Run." : undefined;
+  const switches = <ChatViewSwitches collapsible={presentation === "surface"} settings={chatView} />;
+  if (!composerVisible || actor.kind === "human") return <div className={controlsClass}>{toolbarLeft}{switches}</div>;
+  if (actor.kind === "script") return <div className={controlsClass}><p className={noteClass}>{programChatNotice}</p>{toolbarLeft}{switches}</div>;
+  if (actor.lifecycle?.kind === "stopped") return <div className={presentation === "inspector" ? "flex-shrink-0 px-5 pt-2.5 pb-3.5" : undefined}>
+    <StoppedActorNotice actor={actor} runId={view.id} toolbar={<>{toolbarLeft}{switches}</>} />
+  </div>;
   return <div className={presentation === "inspector" ? "flex-shrink-0 px-5 pt-2.5 pb-3.5" : undefined}>
     <ChatInputToolbar
       {...attachments}
       disabled={disabledReason !== undefined}
-      layout={presentation === "canvas" ? "inline" : "card"}
+      layout={presentation === "surface" ? "inline" : "card"}
       maxRows={4}
       onSend={(text, files) => sendActorMessage(view.id, actor.id, text, files)}
-      onStop={disabledReason === undefined ? () => {
+      onStop={writable && actor.lifecycle?.kind === "running" ? () => {
         setStopError(undefined);
-        void stopChatActor(view.id, actor.id).catch((error: unknown) =>
+        void interruptActorTurn(view.id, actor.id).catch((error: unknown) =>
           setStopError(error instanceof Error ? error.message : String(error)));
       } : undefined}
       rows={1}
@@ -53,7 +50,7 @@ export function ActorChatControls({ actor, view, composerVisible = true, present
       texts={{ placeholder: disabledReason ?? `Nachricht an @${actor.handle} ...` }}
       toolbarLeft={<>
         {toolbarLeft}
-        {detailSwitch}
+        {switches}
         {presentation === "inspector" && <span className="truncate text-[0.7rem] text-muted-foreground">an @{actor.handle}</span>}
       </>}
       toolbarRight={toolbarRight}

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

@@ -1,10 +1,9 @@
 import { ActorChat } from "./ActorChat";
 import { ActorChatControls } from "./ActorChatControls";
-import { ChatPanel } from "@aicontainer/web/chat/ChatPanel";
+import { ChatPanel, type Message } from "quassel";
 import { memo, useCallback } from "react";
 import type { FlowSelection } from "./FlowInspector";
-import type { RunActor, RunView } from "./run-view";
-import type { Message } from "@aicontainer/web/chat/types";
+import type { RunActor, RunView } from "@ragents/web/run-view";
 
 export const ActorChatPreview = memo(function ActorChatPreview({ actor, view, primaryMessages, conversation, historyError, chatInput = true, running = false, onNavigate }: {
   actor: RunActor;
@@ -22,9 +21,9 @@ export const ActorChatPreview = memo(function ActorChatPreview({ actor, view, pr
     element.setAttribute("role", "region");
     element.setAttribute("aria-label", `Chatverlauf von @${actor.handle}`);
   }, [actor.handle]);
-  return <div className="flex min-h-[106px] w-full min-w-0 flex-1 flex-col overflow-hidden rounded-b-[16px] text-left" data-canvas-scroll="true">
-    <ChatPanel className="flex-1" composer={chatInput ? <ActorChatControls actor={actor} view={view} presentation="canvas" running={running} /> : undefined}>
-      <ActorChat actor={actor} view={view} presentation="canvas" primaryMessages={primaryMessages} conversation={conversation} historyError={historyError} running={running} onNavigate={onNavigate} scrollerRef={focusableScroller} />
+  return <div className="flex min-h-[106px] w-full min-w-0 flex-1 flex-col overflow-hidden rounded-b-[16px] text-left" data-surface-scroll="true">
+    <ChatPanel className="flex-1" composer={<ActorChatControls actor={actor} view={view} composerVisible={chatInput} presentation="surface" running={running} />}>
+      <ActorChat actor={actor} view={view} presentation="surface" primaryMessages={primaryMessages} conversation={conversation} historyError={historyError} running={running} onNavigate={onNavigate} scrollerRef={focusableScroller} />
     </ChatPanel>
   </div>;
 });

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

@@ -1,8 +1,8 @@
 import { useRef, type ReactNode, type RefObject } from "react";
 import { XIcon } from "lucide-react";
-import { Button, Popover, PopoverContent } from "@aicontainer/web/ui";
+import { Button, Popover, PopoverContent } from "@ragents/web/ui";
 
-export function ActorPopout({ open, id, label, closeLabel, buttonRef, onClose, width, height, placement = "bottom", focusInput = false, keepMounted = false, role, children }: {
+export function ActorPopout({ open, id, label, closeLabel, buttonRef, onClose, width, height, placement = "bottom", focusInput = false, keepMounted = false, role, headerContent, children }: {
   open: boolean;
   id: string;
   label: string;
@@ -16,18 +16,20 @@ export function ActorPopout({ open, id, label, closeLabel, buttonRef, onClose, w
   focusInput?: boolean;
   keepMounted?: boolean;
   role: "dialog" | "region";
+  headerContent?: ReactNode;
   children: ReactNode;
 }) {
   const panelRef = useRef<HTMLDivElement>(null);
   const pressedAnchor = (details: { reason: string; event: Event }) =>
     details.reason === "outside-press" && details.event.target instanceof Node && buttonRef.current?.contains(details.event.target) === true;
   return <Popover open={open} onOpenChange={(next, details) => { if (!next && !pressedAnchor(details)) onClose(); }}>
-    <PopoverContent align="start" anchor={buttonRef} aria-label={label} className="flex min-h-0 min-w-0 flex-col gap-0 overflow-hidden rounded-b-sm p-0 text-[0.76rem] focus:outline-none data-[placement=top]:rounded-t-sm data-[placement=top]:rounded-b-none [&_input[type=checkbox]]:m-0 [&_input[type=checkbox]]:flex-none [&_input[type=checkbox]]:accent-primary" collisionPadding={8} data-canvas-scroll="true" dim
+    <PopoverContent align="start" anchor={buttonRef} aria-label={label} className="flex min-h-0 min-w-0 flex-col gap-0 overflow-hidden rounded-b-sm p-0 text-[0.76rem] focus:outline-none data-[placement=top]:rounded-t-sm data-[placement=top]:rounded-b-none [&_input[type=checkbox]]:m-0 [&_input[type=checkbox]]:flex-none [&_input[type=checkbox]]:accent-primary" collisionPadding={8} data-surface-scroll="true" dim
       data-placement={placement} id={id} initialFocus={focusInput ? () => panelRef.current?.querySelector("input") ?? true : true} keepMounted={keepMounted}
-      ref={panelRef} role={role} side={placement} sideOffset={0}
+      ref={panelRef} role={role} side={placement}
       style={{ width: width === "available" ? "var(--available-width)" : width, height, maxWidth: "var(--available-width)", maxHeight: "var(--available-height)" }}>
       <header className="flex flex-none items-center justify-between gap-2 border-b border-border-soft px-2.5 py-2">
-        <strong>{label}</strong>
+        <strong className="shrink-0">{label}</strong>
+        {headerContent}
         <Button aria-label={closeLabel} onClick={() => onClose(true)} size="icon-sm" title={closeLabel} variant="ghost"><XIcon /></Button>
       </header>
       {children}

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

@@ -1,14 +1,14 @@
-import { useAccess } from "@aicontainer/web/AccessContext";
+import { useAccess } from "@ragents/web/AccessContext";
 import { useCallback, useId, useRef, useState } from "react";
-import { useCanvasController, type SessionContext } from "@aicontainer/web/PluginRegistry";
+import { useSurfaceController, type SessionContext } from "@ragents/web/PluginRegistry";
 import { CodeIcon, UsersIcon } from "lucide-react";
-import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "@aicontainer/web/Toolbar";
-import { cn } from "@aicontainer/web/ui";
+import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "@ragents/web/Toolbar";
+import { cn } from "@ragents/web/ui";
 import { FlowInspector, type FlowSelection } from "./FlowInspector";
 import { ActorPopout } from "./ActorPopout";
-import { actorSurface, type RunActor, type RunView } from "./run-view";
-import { useStageEntities } from "./canvas-stage";
-import { CANVAS_TILE_DRAG_TYPE } from "./tile-docking";
+import { actorTone, type RunActor, type RunView } from "@ragents/web/run-view";
+import { useSurfaceEntities } from "./surface-entities";
+import { SURFACE_TILE_DRAG_TYPE } from "./tile-docking";
 
 const shortcutIconClass = "grid size-[30px] flex-none place-items-center rounded-lg border border-foreground/15 text-foreground";
 
@@ -28,44 +28,44 @@ export function ActorShortcut({ actor, view, session, open, onToggle, onClose, v
   onClose: () => void;
   visible: boolean;
 }) {
-  const staged = useStageEntities(session.session.id).has(`@${actor.handle}`);
+  const staged = useSurfaceEntities(session.session.id).has(`@${actor.handle}`);
   const technical = useAccess().can("runs.inspect");
   const [visited, setVisited] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const panelId = useId();
-  const canvas = useCanvasController();
+  const surface = useSurfaceController();
   const close = useCallback((restoreFocus = false) => {
     onClose();
     if (restoreFocus) buttonRef.current?.focus({ preventScroll: true });
   }, [onClose]);
 
   const inspect = (selection: FlowSelection) => {
-    if (!canvas) throw new Error("Der Actor-Zugang benötigt den Canvas-Controller.");
-    canvas.acceptSelection(selection);
+    if (!surface) throw new Error("Der Actor-Zugang benötigt den Flächen-Controller.");
+    surface.acceptSelection(selection);
     close();
   };
-  const surface = actorSurface(view, actor);
+  const tone = actorTone(view, actor);
   const label = actor.kind === "agent" ? `Chat mit @${actor.handle}` : `Actor-Ansicht von @${actor.handle}`;
   const type = !technical ? "Agent" : actor.kind === "agent" ? "LLM-Agent" : "TypeScript-Actor";
 
   return <div className="flex items-stretch [&[hidden]]:hidden" hidden={!visible}>
     <ToolbarItem as="button" aria-controls={visited ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog"
       aria-label={`${actor.displayName || actor.handle}. ${type}: ${label} öffnen`} className="font-bold"
-      data-surface={surface} data-staged={staged || undefined} onClick={() => { setVisited(true); onToggle(); }}
+      data-tone={tone} data-staged={staged || undefined} onClick={() => { setVisited(true); onToggle(); }}
       draggable={technical} onDragStart={(event) => {
         if (!technical) { event.preventDefault(); return; }
-        event.dataTransfer.setData(CANVAS_TILE_DRAG_TYPE, `@${actor.handle}`);
+        event.dataTransfer.setData(SURFACE_TILE_DRAG_TYPE, `@${actor.handle}`);
         event.dataTransfer.effectAllowed = "move";
         close();
       }}
       ref={buttonRef} title={`${type}: ${label} öffnen${technical ? ". Zum Andocken auf eine Kachel ziehen." : ""}`} type="button">
-      <span className={cn(shortcutIconClass, staged && shortcutFillClass[surface])}>{actor.kind === "agent" ? <UsersIcon size={20} /> : <CodeIcon size={20} />}</span>
+      <span className={cn(shortcutIconClass, staged && shortcutFillClass[tone])}>{actor.kind === "agent" ? <UsersIcon size={20} /> : <CodeIcon size={20} />}</span>
       <ToolbarCopy><ToolbarLabel>@{actor.handle}</ToolbarLabel><ToolbarText>{actor.displayName && actor.displayName !== actor.handle ? actor.displayName : type}</ToolbarText></ToolbarCopy>
     </ToolbarItem>
     {visited && <ActorPopout open={open} id={panelId} label={label} closeLabel={`${label} schließen`}
       buttonRef={buttonRef} keepMounted onClose={close} width={actor.kind === "agent" ? 784 : 560} height={640} role="dialog">
       <div className="min-h-0 min-w-0 flex-1 overflow-auto overscroll-contain">
-        <FlowInspector actorConversations={session.actorConversations} canGoBack={false} chatSurface="popout" composerVisible
+        <FlowInspector actorConversations={session.actorConversations} canGoBack={false} chatDisplay="popout" composerVisible
           conversationError={session.conversationError} onBack={() => {}} onNavigate={inspect}
           primaryMessages={session.messages} primaryRunning={session.running} selection={{ type: "actor", id: actor.id }} view={view} />
       </div>

package/plugins/ragents.orchestration/web/{ActorCanvasControls.tsx → ActorSurfaceControls.tsx}

@@ -1,21 +1,21 @@
-import { useAccess } from "@aicontainer/web/AccessContext";
+import { useAccess } from "@ragents/web/AccessContext";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { useCanvasController, type SessionContext, type SessionHeaderContext } from "@aicontainer/web/PluginRegistry";
+import type { SessionContext, SessionHeaderContext } from "@ragents/web/PluginRegistry";
 import { UsersIcon } from "lucide-react";
-import { Input } from "@aicontainer/web/ui";
-import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "@aicontainer/web/Toolbar";
-import { actorVisibleOnCanvas, type CanvasViewPreferences } from "./canvas-view-settings";
-import { runViewFrom, type RunActor } from "./run-view";
+import { Input } from "@ragents/web/ui";
+import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "@ragents/web/Toolbar";
+import { actorVisibleOnSurface, type SurfaceViewPreferences } from "./surface-view-settings";
+import { chatPrimaryId, runViewFrom, type RunActor } from "@ragents/web/run-view";
 import { ActorPopout } from "./ActorPopout";
 import { ActorShortcut } from "./ActorShortcut";
 import { ACTOR_HEADER_MODES, ACTOR_HEADER_MODE_LABELS, actorOnStage, actorVisibleInHeader, saveActorHeaderMode, useActorHeaderMode, type ActorHeaderMode } from "./actor-header-settings";
-import { useStageEntities } from "./canvas-stage";
+import { useSurfaceEntities } from "./surface-entities";
 
-export interface ActorCanvasControlsProps {
+export interface ActorSurfaceControlsProps {
   session: SessionContext;
   appActorIds: ReadonlySet<string>;
-  preferences: CanvasViewPreferences;
-  onPreferencesChange: (preferences: CanvasViewPreferences) => void;
+  preferences: SurfaceViewPreferences;
+  onPreferencesChange: (preferences: SurfaceViewPreferences) => void;
 }
 
 const nameClass = "min-w-0 max-w-full text-left font-semibold [overflow-wrap:anywhere]";
@@ -23,7 +23,7 @@ const nameClass = "min-w-0 max-w-full text-left font-semibold [overflow-wrap:any
 const actorType = (actor: RunActor) => actor.kind === "human" ? "Benutzer" : actor.kind === "agent" ? "LLM-Agent" : "TypeScript-Actor";
 const actorStatus = (actor: RunActor) => actor.lifecycle?.kind === "running" ? "Arbeitet" : actor.lifecycle?.kind === "stopped" ? "Gestoppt" : actor.lifecycle?.kind === "idle" ? "Bereit" : "";
 
-export function filterCanvasActors(actors: readonly RunActor[], appActorIds: ReadonlySet<string>, query: string): readonly RunActor[] {
+export function filterSurfaceActors(actors: readonly RunActor[], appActorIds: ReadonlySet<string>, query: string): readonly RunActor[] {
   const words = query.trim().toLocaleLowerCase("de-DE").split(/\s+/).filter(Boolean);
   return actors.filter((actor) => {
     const text = [`@${actor.handle}`, actor.displayName, actor.kind, actorType(actor), actor.lifecycle?.kind, actorStatus(actor), appActorIds.has(actor.id) ? "Mini-App" : ""].join(" ").toLocaleLowerCase("de-DE");
@@ -36,10 +36,11 @@ export function ActorShortcuts({ session }: SessionHeaderContext) {
   const [openKey, setOpenKey] = useState<string>();
   const close = useCallback(() => setOpenKey(undefined), []);
   const mode = useActorHeaderMode(session.session.id);
-  const stage = useStageEntities(session.session.id);
+  const stage = useSurfaceEntities(session.session.id);
   const view = runViewFrom(session.runView);
   const actors = useMemo(() => view?.actors.filter((actor) => actor.kind !== "human" && (inspect || actor.kind === "agent")) ?? [], [inspect, view]);
-  const shown = useCallback((actor: RunActor) => actorVisibleInHeader(actor, mode, actorOnStage(actor, view?.primaryActorId, stage)), [mode, stage, view?.primaryActorId]);
+  const primaryId = view ? chatPrimaryId(view) : undefined;
+  const shown = useCallback((actor: RunActor) => actorVisibleInHeader(actor, mode, actorOnStage(actor, primaryId, stage)), [mode, stage, primaryId]);
   useEffect(() => {
     if (openKey && !actors.some((actor) => `${session.session.id}:${actor.id}` === openKey && shown(actor))) close();
   }, [actors, close, openKey, session.session.id, shown]);
@@ -68,15 +69,14 @@ export function ActorHeaderModeControl({ runId }: { runId: string }) {
   </ToolbarItem>;
 }
 
-export function ActorCanvasControls({ session, appActorIds, preferences, onPreferencesChange }: ActorCanvasControlsProps) {
+export function ActorSurfaceControls({ session, appActorIds, preferences, onPreferencesChange }: ActorSurfaceControlsProps) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const buttonRef = useRef<HTMLButtonElement>(null);
   const panelId = useId();
-  const canvas = useCanvasController();
   const runView = runViewFrom(session.runView);
   const actors = runView?.actors;
-  const filtered = useMemo(() => filterCanvasActors(actors ?? [], appActorIds, query), [actors, appActorIds, query]);
+  const filtered = useMemo(() => filterSurfaceActors(actors ?? [], appActorIds, query), [actors, appActorIds, query]);
   const close = useCallback((restoreFocus = false) => {
     setOpen(false);
     if (restoreFocus) buttonRef.current?.focus({ preventScroll: true });
@@ -97,29 +97,24 @@ export function ActorCanvasControls({ session, appActorIds, preferences, onPrefe
         <Input className="flex-1" aria-label="Actors durchsuchen" onChange={(event) => setQuery(event.target.value)} placeholder="Handle, Typ oder Status suchen ..." type="search" value={query} />
         <span className="flex-none whitespace-nowrap text-[0.68rem] text-muted-foreground" role="status">{filtered.length} von {actors?.length ?? 0}</span>
       </div>
-      <ActorCanvasList actors={filtered} appActorIds={appActorIds} primaryActorId={runView?.primaryActorId} onInspect={(id) => {
-        if (!canvas) throw new Error("Die Actorliste benötigt den Canvas-Controller.");
-        canvas.acceptSelection({ type: "actor", id });
-        close(true);
-      }} onPreferencesChange={onPreferencesChange} preferences={preferences} />
+      <ActorSurfaceList actors={filtered} appActorIds={appActorIds} primaryActorId={runView?.primaryActorId} onPreferencesChange={onPreferencesChange} preferences={preferences} />
       <p className="flex-none border-t border-border-soft px-2.5 py-2.5 text-[0.68rem] text-muted-foreground">Persönliche Ansicht dieses Runs</p>
     </ActorPopout>}
   </div>;
 }
 
-export function ActorCanvasList({ actors, appActorIds, primaryActorId, onInspect, onPreferencesChange, preferences }: {
+export function ActorSurfaceList({ actors, appActorIds, primaryActorId, onPreferencesChange, preferences }: {
   actors: readonly RunActor[];
   appActorIds: ReadonlySet<string>;
   primaryActorId?: string | null;
-  onInspect: (id: string) => void;
-  onPreferencesChange: (preferences: CanvasViewPreferences) => void;
-  preferences: CanvasViewPreferences;
+  onPreferencesChange: (preferences: SurfaceViewPreferences) => void;
+  preferences: SurfaceViewPreferences;
 }) {
   return <div className="min-h-0 flex-1 overflow-auto overscroll-contain px-2.5">
     {actors.length === 0 ? <p className="text-muted-foreground">Keine passenden Actors.</p> : <ul className="list-none">{actors.map((actor) => <li className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2.5 border-b border-border-soft py-1.5" key={actor.id}>
       <div className="grid min-w-0 gap-0.5 leading-[1.3]">
         <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
-          {actor.kind === "human" ? <span className={nameClass}>@{actor.handle}</span> : <button className={`${nameClass} cursor-pointer rounded-[2px] hover:text-primary hover:underline focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-[3px]`} onClick={() => onInspect(actor.id)} title={`@${actor.handle} im Inspector öffnen`} type="button">@{actor.handle}</button>}
+          <span className={nameClass}>@{actor.handle}</span>
           {actor.displayName !== actor.handle && <span className="min-w-0 max-w-full text-[0.7rem] [overflow-wrap:anywhere]">{actor.displayName}</span>}
         </div>
         <span className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[0.66rem] text-muted-foreground">
@@ -127,8 +122,8 @@ export function ActorCanvasList({ actors, appActorIds, primaryActorId, onInspect
         </span>
       </div>
       {actor.kind !== "human" && <label className="flex cursor-pointer items-center gap-[5px] whitespace-nowrap text-[0.68rem]">
-        <input aria-label={`@${actor.handle} im Canvas anzeigen`} checked={actorVisibleOnCanvas(actor, appActorIds, preferences, primaryActorId)} onChange={(event) => onPreferencesChange({ ...preferences, actorVisibility: { ...preferences.actorVisibility, [actor.id]: event.target.checked } })} type="checkbox" />
-        <span>Canvas</span>
+        <input aria-label={`@${actor.handle} auf der Fläche anzeigen`} checked={actorVisibleOnSurface(actor, appActorIds, preferences, primaryActorId)} onChange={(event) => onPreferencesChange({ ...preferences, actorVisibility: { ...preferences.actorVisibility, [actor.id]: event.target.checked } })} type="checkbox" />
+        <span>Fläche</span>
       </label>}
     </li>)}</ul>}
   </div>;

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

@@ -1,7 +1,7 @@
-import type { CardSectionContribution, EntityReference, SessionContext, SessionNavigation } from "@aicontainer/web/PluginRegistry";
+import type { CardSectionContribution, EntityReference, SessionContext, SessionNavigation } from "@ragents/web/PluginRegistry";
 import { ActorChatPreview } from "./ActorChatPreview";
 import { cardSectionsClass } from "./constants";
-import type { RunActor, RunView } from "./run-view";
+import type { RunActor, RunView } from "@ragents/web/run-view";
 
 export function ActorTile({ actor, view, cardSections, chatInput, session, navigation, onSelect }: {
   actor: RunActor;