@schlenkr/ragents 0.1.5 → 0.1.7

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;

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

@@ -1,54 +1,49 @@
-import { useAccess } from "@aicontainer/web/AccessContext";
+import { useAccess } from "@ragents/web/AccessContext";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { CanvasTiles } from "./CanvasTiles";
-import type { CanvasTileNode } from "../tiled-layout";
-import { CanvasStartup } from "./CanvasStartup";
-import { canvasStartupState } from "./canvas-startup";
+import { SurfaceTiles } from "./SurfaceTiles";
+import type { SurfaceTileNode } from "../tiled-layout";
+import { SurfaceStartup } from "./SurfaceStartup";
+import { surfaceStartupState } from "./surface-startup";
 import { tileEntities } from "./tile-docking";
-import { publishStageEntities } from "./canvas-stage";
-import { initialTileLayout, saveCanvasPresentation, useCanvasPresentation } from "./tiled-view-settings";
-import { StatusGroup } from "@aicontainer/web/StatusGroup";
-import { ORCHESTRATION_TAB_ID, statusControlClass } from "./constants";
-import { runViewFrom } from "./run-view";
-import { ActorCanvasControls, ActorHeaderModeControl } from "./ActorCanvasControls";
-import { actorVisibleOnCanvas, saveCanvasViewPreferences, useCanvasViewPreferences } from "./canvas-view-settings";
-import { useCanvasController, type CanvasCenterContext, type EntityReference } from "@aicontainer/web/PluginRegistry";
+import { publishSurfaceEntities } from "./surface-entities";
+import { initialTileLayout, saveSurfacePresentation, useSurfacePresentation } from "./tiled-view-settings";
+import { StatusGroup } from "@ragents/web/StatusGroup";
+import { statusControlClass } from "./constants";
+import { runViewFrom } from "@ragents/web/run-view";
+import { ActorSurfaceControls, ActorHeaderModeControl } from "./ActorSurfaceControls";
+import { actorVisibleOnSurface, saveSurfaceViewPreferences, useSurfaceViewPreferences } from "./surface-view-settings";
+import { useSurfaceController, type SurfaceCenterContext, type EntityReference } from "@ragents/web/PluginRegistry";
 
-export function OrchestrationCenter(props: CanvasCenterContext) {
+export function OrchestrationCenter(props: SurfaceCenterContext) {
   return <RunOrchestrationCenter key={props.session.session.id} {...props} />;
 }
 
 function RunOrchestrationCenter({
   cardSections,
-  canvasElements,
+  surfaceElements,
   navigation,
-  onCenterModeChange,
   session,
   statusContainer,
   runToolbarContainer,
-}: CanvasCenterContext) {
+}: SurfaceCenterContext) {
   const inspect = useAccess().can("runs.inspect");
-  const canvas = useCanvasController();
-  if (canvas?.tabId !== ORCHESTRATION_TAB_ID) {
-    throw new Error("Canvas-Beitrag und Canvas-Provider passen nicht zusammen");
-  }
+  const surface = useSurfaceController();
+  if (!surface) throw new Error("Die Fläche braucht den Flächen-Controller des Orchestrierungs-Plugins.");
   const lastRunView = useRef<ReturnType<typeof runViewFrom>>(undefined);
   const parsedRunView = runViewFrom(session.runView);
   if (parsedRunView !== undefined) lastRunView.current = parsedRunView;
   const runView = parsedRunView ?? lastRunView.current;
-  const { programLayout, personalLayout, presentation, programBasis } = useCanvasPresentation(session.session.id, runView);
+  const { programLayout, personalLayout, presentation, programBasis } = useSurfacePresentation(session.session.id, runView);
   const [presentationError, setPresentationError] = useState<string>();
-  const preferences = useCanvasViewPreferences(session.session.id);
-  const appActorIds = useMemo(() => new Set(canvasElements.flatMap((contribution) => contribution.select(session)
-    .flatMap((element) => element.anchorActorId ? [element.anchorActorId] : []))), [canvasElements, session]);
+  const preferences = useSurfaceViewPreferences(session.session.id);
+  const appActorIds = useMemo(() => new Set(surfaceElements.flatMap((contribution) => contribution.select(session)
+    .flatMap((element) => element.anchorActorId ? [element.anchorActorId] : []))), [surfaceElements, session]);
   const hiddenActorIds = useMemo(() => runView?.actors
-    .filter((actor) => actor.kind !== "human" && (inspect ? !actorVisibleOnCanvas(actor, appActorIds, preferences, runView.primaryActorId) : actor.kind === "script")).map((actor) => actor.id) ?? [],
+    .filter((actor) => actor.kind !== "human" && (inspect ? !actorVisibleOnSurface(actor, appActorIds, preferences, runView.primaryActorId) : actor.kind === "script")).map((actor) => actor.id) ?? [],
   [inspect, runView, appActorIds, preferences]);
-  const canvasReady = runView !== undefined && (runView.actors.some((actor) => actor.kind !== "human")
-    || canvasElements.some((contribution) => contribution.select(session).some((element) => element.visible !== false)));
-  const visibleApps = useMemo(() => canvasElements.flatMap((contribution) => contribution.select(session)
-    .filter((element) => element.visible !== false).map((element) => `app:${element.id}`)), [canvasElements, session]);
+  const visibleApps = useMemo(() => surfaceElements.flatMap((contribution) => contribution.select(session)
+    .filter((element) => element.visible !== false).map((element) => `app:${element.id}`)), [surfaceElements, session]);
   const visibleEntities = new Set([
     ...visibleApps,
     ...(runView?.actors.filter((actor) => actor.kind !== "human" && actor.lifecycle?.kind !== "stopped"
@@ -64,13 +59,12 @@ function RunOrchestrationCenter({
   const root = presentation.root ?? fallbackRoot;
   const hasVisibleContent = tileEntities(root).some((entity) => visibleEntities.has(entity));
   const stageEntities = useMemo(() => new Set(tileEntities(root)), [root]);
-  useEffect(() => publishStageEntities(session.session.id, stageEntities), [session.session.id, stageEntities]);
-  useEffect(() => () => publishStageEntities(session.session.id, undefined), [session.session.id]);
-  const startupState = canvasStartupState({ view: runView, startup: session.startup, connected: session.connected,
+  useEffect(() => publishSurfaceEntities(session.session.id, stageEntities), [session.session.id, stageEntities]);
+  useEffect(() => () => publishSurfaceEntities(session.session.id, undefined), [session.session.id]);
+  const startupState = surfaceStartupState({ view: runView, startup: session.startup, connected: session.connected,
     running: session.running, error: session.conversationError });
   const stageRef = useRef<HTMLDivElement | null>(null);
   const showStartup = !hasVisibleContent && startupState !== undefined;
-  useEffect(() => { onCenterModeChange(canvasReady ? "workflow" : "chat"); }, [canvasReady, onCenterModeChange]);
 
   const visibleStageSize = useCallback((): { width: number; height: number } | undefined => {
     const element = stageRef.current;
@@ -86,7 +80,7 @@ function RunOrchestrationCenter({
     if (!element) return;
     const observer = new ResizeObserver(() => {
       const size = visibleStageSize();
-      if (size) element.style.setProperty("--canvas-visible-width", `${size.width}px`);
+      if (size) element.style.setProperty("--surface-visible-width", `${size.width}px`);
     });
     observer.observe(element);
     const panel = document.getElementById("workspace-panel");
@@ -94,15 +88,13 @@ function RunOrchestrationCenter({
     return () => observer.disconnect();
   }, [visibleStageSize]);
 
-  const requestedEntity = navigation.selectionFor(ORCHESTRATION_TAB_ID);
-
   const handleSelect = useCallback((selection: EntityReference) => {
-    canvas?.acceptSelection(selection);
-  }, [canvas]);
+    surface.acceptSelection(selection);
+  }, [surface]);
 
-  const changeTiles = (next: CanvasTileNode | null) => {
+  const changeTiles = (next: SurfaceTileNode | null) => {
     try {
-      saveCanvasPresentation(session.session.id, { root: next, programBasis });
+      saveSurfacePresentation(session.session.id, { root: next, programBasis });
       setPresentationError(undefined);
     } catch (error) {
       setPresentationError(error instanceof Error ? error.message : String(error));
@@ -111,31 +103,31 @@ function RunOrchestrationCenter({
 
   return (
     <div className="relative flex h-full min-h-0 min-w-0 flex-1 overflow-clip" data-view="tiled">
-      {personalLayout && <StatusGroup container={statusContainer} label="Kachelfläche" order={20}>
-        <button className={statusControlClass} onClick={() => saveCanvasPresentation(session.session.id, null)}
+      {personalLayout && <StatusGroup container={statusContainer} label="Fläche" order={20}>
+        <button className={statusControlClass} onClick={() => saveSurfacePresentation(session.session.id, null)}
           title="Eigene Anordnung zurücksetzen und der Programmanordnung folgen" type="button">Programmvorgabe übernehmen</button>
       </StatusGroup>}
-      {runToolbarContainer && createPortal(<><ActorHeaderModeControl runId={session.session.id} />{inspect && <ActorCanvasControls session={session}
+      {runToolbarContainer && createPortal(<><ActorHeaderModeControl runId={session.session.id} />{inspect && <ActorSurfaceControls session={session}
         appActorIds={appActorIds} preferences={preferences}
-        onPreferencesChange={(next) => saveCanvasViewPreferences(session.session.id, next)} />}</>, runToolbarContainer)}
-      <div aria-label="Kachelfläche" className="relative min-h-0 min-w-0 flex-[1_1_360px] overflow-clip bg-[image:var(--canvas-backdrop)]" ref={stageRef}>
-        <CanvasGrain />
+        onPreferencesChange={(next) => saveSurfaceViewPreferences(session.session.id, next)} />}</>, runToolbarContainer)}
+      <div aria-label="Fläche" className="relative min-h-0 min-w-0 flex-[1_1_360px] overflow-clip bg-[image:var(--surface-backdrop)]" ref={stageRef}>
+        <SurfaceGrain />
         {(programLayout.error || presentationError) && <p className="absolute inset-x-2 top-2 z-10 bg-secondary p-3 text-destructive" role="alert">{programLayout.error || presentationError}</p>}
-        {runView && !showStartup && <div className="absolute inset-y-0 left-0 w-[var(--canvas-visible-width,100%)] overflow-hidden">
-          <CanvasTiles root={root} onChange={changeTiles}
-            canvasElements={canvasElements} cardSections={cardSections} session={session} view={runView} navigation={navigation} onSelect={handleSelect}
-            selected={requestedEntity && typeof requestedEntity === "object" && "type" in requestedEntity && "id" in requestedEntity ? requestedEntity as EntityReference : undefined} />
+        {runView && !showStartup && <div className="absolute inset-y-0 left-0 w-[var(--surface-visible-width,100%)] overflow-hidden">
+          <SurfaceTiles root={root} onChange={changeTiles}
+            surfaceElements={surfaceElements} cardSections={cardSections} session={session} view={runView} navigation={navigation} onSelect={handleSelect}
+            selected={surface.selection} />
         </div>}
-        {showStartup && <CanvasStartup state={startupState} />}
+        {showStartup && <SurfaceStartup state={startupState} />}
       </div>
     </div>
   );
 }
 
 /** Feines Rauschen über der Fläche, damit das Material nicht glatt wirkt. */
-function CanvasGrain() {
+function SurfaceGrain() {
   return <svg aria-hidden="true" className="pointer-events-none absolute inset-0 size-full opacity-10" preserveAspectRatio="none" viewBox="0 0 180 180">
-    <filter id="canvas-grain"><feTurbulence baseFrequency=".76" numOctaves="3" stitchTiles="stitch" type="fractalNoise" /></filter>
-    <path d="M0 0h180v180H0z" fill="#887890" filter="url(#canvas-grain)" opacity=".32" />
+    <filter id="surface-grain"><feTurbulence baseFrequency=".76" numOctaves="3" stitchTiles="stitch" type="fractalNoise" /></filter>
+    <path d="M0 0h180v180H0z" fill="#887890" filter="url(#surface-grain)" opacity=".32" />
   </svg>;
 }

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

@@ -1,7 +1,7 @@
-import { runActorFrom, runViewFrom, type RunArtifact } from "./contract";
-import { formatBytes } from "@aicontainer/web/lib/format";
-import type { CardSectionContext, SessionNavigation } from "@aicontainer/web/PluginRegistry";
-import { SectionLabel } from "@aicontainer/web/ui";
+import { runActorFrom, runViewFrom, type RunArtifact } from "@ragents/web/run-view";
+import { formatBytes } from "@ragents/web/lib/format";
+import type { CardSectionContext, SessionNavigation } from "@ragents/web/PluginRegistry";
+import { SectionLabel } from "@ragents/web/ui";
 
 const openDocument = (navigation: SessionNavigation, artifact: RunArtifact) => {
   if (navigation.revealEntity({ type: "artifact", id: artifact.id })) return;