@schlenkr/ragents 0.1.0

package/plugins/ragents.orchestration/server/index.ts

@@ -0,0 +1,64 @@
+import {
+  actorInputSchema,
+  agentTools,
+  enqueueActorInput,
+  eventResultSchema,
+  ScriptDriver,
+  type ActorInputRequest,
+  type RAgentsPlugin,
+} from "@aicontainer/ragents";
+import { runtimeProviderToken } from "@aicontainer/server/ragents/host-services.js";
+import { pluginAssetPath } from "@aicontainer/server/plugin-support/asset-path.js";
+import type { PluginModule } from "@aicontainer/server/plugin-support/plugin-module.js";
+import { boundToTools, handlebarsPrompt } from "@aicontainer/server/plugin-support/prompt.js";
+import { createCanvasToolContributor } from "./canvas-tool.js";
+import { createRunStopContributor } from "./run-stop-tool.js";
+import { sessionManagementToken } from "@aicontainer/server/ragents/global-chat.js";
+
+const orchestrationPromptFile = pluginAssetPath(import.meta.url, "../orchestration.hbs");
+const canvasPromptFile = pluginAssetPath(import.meta.url, "../canvas.hbs");
+
+const orchestrationPlugin: RAgentsPlugin = {
+  manifest: { id: "ragents.orchestration" },
+  register: (host) => {
+    host.functions(createCanvasToolContributor());
+    host.functions(createRunStopContributor(
+      (runId) => host.service(sessionManagementToken)().stop(runId),
+      (error) => console.error("Run-Stopp durch den Koordinator fehlgeschlagen", error),
+    ));
+    host.operations({
+      id: "actor_input",
+      label: "Actor-Input einreihen",
+      description: "Reiht für einen Actor einen normalen Texteingang unter der gebundenen Identität ein - "
+        + "als Agent oder, aus einer App-Aktion, als Besitzer des Runs. Bestätigt nur das Einreihen. TypeScript-Actors verstehen ausschließlich ihr programmiertes Eingabeprotokoll, keine freien Aufträge.",
+      schema: actorInputSchema,
+      resultSchema: eventResultSchema,
+      operator: "direct",
+      execute: (context, input) =>
+        enqueueActorInput(host.service(runtimeProviderToken)(), {
+          actorId: context.principal.actorId,
+          commandId: context.invocationId,
+          ...(context.principal.kind === "agent" && context.principal.turnId
+            ? { turnId: context.principal.turnId }
+            : {}),
+          correlationId: context.invocationId,
+          causationId: context.invocationId,
+        }, context.runId, input as ActorInputRequest),
+    });
+    host.script({
+      id: "typescript",
+      create: (context) => ({
+        driver: new ScriptDriver({ runtime: context.runtime }),
+      }),
+    });
+    host.prompts(
+      handlebarsPrompt("ragents.orchestration.prompt", 600, orchestrationPromptFile),
+      boundToTools(
+        handlebarsPrompt("ragents.orchestration.canvas", 650, canvasPromptFile),
+        "canvas_layout_replace",
+      ),
+    );
+  },
+};
+
+export const plugin: PluginModule = { create: () => orchestrationPlugin };

package/plugins/ragents.orchestration/server/run-stop-tool.ts

@@ -0,0 +1,30 @@
+import { Type } from "typebox";
+import { defineRunFunction, defineToolAvailability, holdsUsable, type ToolContributor } from "@aicontainer/ragents";
+import { toolDescriptorFrom } from "@aicontainer/server/plugin-support/agent-tool.js";
+
+const available = defineToolAvailability({
+  availability: "conditional",
+  availabilityDetail: "Für den Primary-Actor mit execution.stopOwned im eigenen Run.",
+  requiredCapabilities: ["execution.stopOwned"],
+}, (actor, view) => actor.kind !== "human" && actor.id === view.primaryActorId && holdsUsable(actor, "execution.stopOwned"));
+
+export const createRunStopContributor = (stop: (runId: string) => Promise<void>, onError: (error: unknown) => void): ToolContributor => {
+  const definition = defineRunFunction({
+    name: "run_stop",
+    label: "Lauf stoppen",
+    description: "Leitet den vollständigen Stopp des eigenen Runs ein: laufende Turns, Werkzeuge, Unteragenten und Plugin-Dienste. Unterhaltung und Dateien bleiben erhalten. Bricht auch den eigenen Turn ab; die Annahme ist keine Bestätigung abgeschlossener Bereinigung. Bei Benutzerwunsch nach vollständigem Abbruch sofort verwenden, keine Abbruchnachricht an beschäftigte Agenten senden.",
+    schema: Type.Object({}, { additionalProperties: false }),
+    resultSchema: Type.Object({ requested: Type.Literal(true) }, { additionalProperties: false }),
+    available,
+    run: ({ caller, signal }) => {
+      signal?.throwIfAborted();
+      void stop(caller.runId).catch(onError);
+      return { requested: true as const };
+    },
+  });
+  return {
+    name: "ragents.orchestration.run-stop",
+    descriptors: [toolDescriptorFrom(definition, available)],
+    tools: () => [definition],
+  };
+};

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

@@ -0,0 +1,47 @@
+import { canvasEntityKey, canvasEntityOf, type CanvasTileNode } from "./contract.js";
+
+export type { CanvasTileNode } from "./contract.js";
+
+export const MAX_CANVAS_TILE_DEPTH = 16;
+export const MAX_CANVAS_TILES = 64;
+
+export const canvasTileNodeOf = (input: unknown): CanvasTileNode => {
+  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`);
+    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")) throw new Error(`${where}: eine Kachel trägt nur entity; 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);
+      if (entity.kind === "shape") throw new Error(`${where}: Kacheln zeigen Actors (@handle) oder Mini-Apps (app:<name>/<view>), keine Formen`);
+      const key = canvasEntityKey(entity);
+      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`);
+      return { entity: key };
+    }
+    if (Object.keys(node).some((key) => !["direction", "weights", "children"].includes(key))) throw new Error(`${where}: eine Teilung trägt nur direction, weights und children`);
+    if (node.direction !== "horizontal" && node.direction !== "vertical") throw new Error(`${where}.direction muss horizontal oder vertical sein`);
+    if (!Array.isArray(node.weights) || node.weights.length !== 2 || node.weights.some((weight) => typeof weight !== "number" || !Number.isFinite(weight) || weight <= 0)) {
+      throw new Error(`${where}.weights muss genau zwei endliche positive Zahlen enthalten`);
+    }
+    if (!Array.isArray(node.children) || node.children.length !== 2) throw new Error(`${where}.children muss genau zwei Kacheln oder Teilungen enthalten`);
+    return {
+      direction: node.direction,
+      weights: [node.weights[0], node.weights[1]],
+      children: [parse(node.children[0], `${where}.children[0]`, depth + 1), parse(node.children[1], `${where}.children[1]`, depth + 1)],
+    };
+  };
+  return parse(input, "root", 0);
+};
+
+export const canvasTileEntities = (root: CanvasTileNode | null | undefined): string[] =>
+  !root ? [] : "entity" in root ? [root.entity] : root.children.flatMap(canvasTileEntities);
+
+export const mapCanvasTileEntities = (root: CanvasTileNode, resolve: (entity: string) => string): CanvasTileNode =>
+  "entity" in root ? { entity: resolve(root.entity) } : {
+    ...root,
+    children: [mapCanvasTileEntities(root.children[0], resolve), mapCanvasTileEntities(root.children[1], resolve)],
+  };

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

@@ -0,0 +1,159 @@
+import { useAccess } from "@aicontainer/web/AccessContext";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useCanvasController, type SessionContext, type SessionHeaderContext } from "@aicontainer/web/PluginRegistry";
+import { UsersIcon } from "lucide-react";
+import { Button, Input } from "@aicontainer/web/ui";
+import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "@aicontainer/web/Toolbar";
+import { statusControlClass } from "./constants";
+import { actorVisibleOnCanvas, DEFAULT_CANVAS_VIEW_PREFERENCES, type CanvasViewPreferences } from "./canvas-view-settings";
+import { runViewFrom, type RunActor } from "./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";
+
+export interface ActorCanvasControlsProps {
+  control: "actors" | "view";
+  session: SessionContext;
+  appActorIds: ReadonlySet<string>;
+  preferences: CanvasViewPreferences;
+  onPreferencesChange: (preferences: CanvasViewPreferences) => void;
+}
+
+const nameClass = "min-w-0 max-w-full text-left font-semibold [overflow-wrap:anywhere]";
+
+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[] {
+  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");
+    return words.every((word) => text.includes(word));
+  });
+}
+
+export function withAppActorVisibility(preferences: CanvasViewPreferences, appActorIds: ReadonlySet<string>, visible: boolean): CanvasViewPreferences {
+  return { ...preferences, showAppActors: visible, actorVisibility: Object.fromEntries(Object.entries(preferences.actorVisibility).filter(([id]) => !appActorIds.has(id))) };
+}
+
+export function ActorShortcuts({ session }: SessionHeaderContext) {
+  const inspect = useAccess().can("runs.inspect");
+  const [openKey, setOpenKey] = useState<string>();
+  const close = useCallback(() => setOpenKey(undefined), []);
+  const mode = useActorHeaderMode(session.session.id);
+  const stage = useStageEntities(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]);
+  useEffect(() => {
+    if (openKey && !actors.some((actor) => `${session.session.id}:${actor.id}` === openKey && shown(actor))) close();
+  }, [actors, close, openKey, session.session.id, shown]);
+  if (!view || actors.length === 0) return null;
+
+  return <nav aria-label="Actors des Runs" className="flex min-w-0 flex-none items-stretch">
+    {actors.map((actor) => {
+      const key = `${session.session.id}:${actor.id}`;
+      return <ActorShortcut actor={actor} key={key} onClose={close}
+        onToggle={() => setOpenKey((current) => current === key ? undefined : key)}
+        open={openKey === key} session={session} view={view} visible={shown(actor)} />;
+    })}
+  </nav>;
+}
+
+const PUBLIC_ACTOR_HEADER_MODES: readonly ActorHeaderMode[] = ["active", "visible", "all"];
+
+export function ActorHeaderModeControl({ runId }: { runId: string }) {
+  const inspect = useAccess().can("runs.inspect");
+  const mode = useActorHeaderMode(runId);
+  const modes = inspect ? ACTOR_HEADER_MODES : PUBLIC_ACTOR_HEADER_MODES;
+  const next = modes[(modes.indexOf(mode) + 1) % modes.length];
+  const label = `Actor-Anzeige: ${ACTOR_HEADER_MODE_LABELS[mode]}. Wechseln zu ${ACTOR_HEADER_MODE_LABELS[next]}`;
+  return <ToolbarItem as="button" aria-label={label} className="w-[120px] max-w-[120px] min-w-[120px] flex-[0_0_120px]" onClick={() => saveActorHeaderMode(runId, next)} title={label} type="button">
+    <ToolbarCopy><ToolbarLabel>Anzeige</ToolbarLabel><ToolbarText>{ACTOR_HEADER_MODE_LABELS[mode]}</ToolbarText></ToolbarCopy>
+  </ToolbarItem>;
+}
+
+export function ActorCanvasControls({ control, session, appActorIds, preferences, onPreferencesChange }: ActorCanvasControlsProps) {
+  const [open, setOpen] = useState<"actors" | "view">();
+  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 close = useCallback((restoreFocus = false) => {
+    setOpen(undefined);
+    if (restoreFocus) buttonRef.current?.focus({ preventScroll: true });
+  }, []);
+
+  useEffect(() => { close(); setQuery(""); }, [session.session.id, close]);
+
+  const trigger = {
+    ref: buttonRef,
+    "aria-controls": open ? panelId : undefined,
+    "aria-expanded": open !== undefined,
+    "aria-label": control === "actors" ? `Actors \u00b7 ${actors?.length ?? 0}` : "Ansicht",
+    title: control === "actors" ? `Actors \u00b7 ${actors?.length ?? 0}` : "Canvas-Ansicht",
+    onClick: () => setOpen((value) => value === control ? undefined : control),
+    type: "button" as const,
+  };
+  return <div className={control === "actors" ? "flex h-full min-w-0 flex-none items-stretch" : "flex h-full min-w-0 items-stretch"}>
+    {control === "actors"
+      ? <ToolbarItem as="button" {...trigger}><UsersIcon size={20} /><ToolbarText>Actors</ToolbarText></ToolbarItem>
+      : <button className={statusControlClass} {...trigger}>Ansicht</button>}
+    {open && <ActorPopout open id={panelId} label={open === "actors" ? "Actors des Runs" : "Canvas-Ansicht"}
+      closeLabel={open === "actors" ? "Actorliste schließen" : "Canvas-Ansicht schließen"}
+      buttonRef={buttonRef} onClose={close} width={open === "actors" ? 460 : 360} height={open === "actors" ? 460 : 260}
+      placement={control === "actors" ? "bottom" : "top"} focusInput role="region">
+      {open === "actors" ? <>
+        <div className="flex flex-none items-center gap-2.5 p-2.5">
+          <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} />
+      </> : <CanvasViewOptions appActorIds={appActorIds} 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 }: {
+  actors: readonly RunActor[];
+  appActorIds: ReadonlySet<string>;
+  primaryActorId?: string | null;
+  onInspect: (id: string) => void;
+  onPreferencesChange: (preferences: CanvasViewPreferences) => void;
+  preferences: CanvasViewPreferences;
+}) {
+  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>}
+          {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">
+          <span>{actorType(actor)}</span>{actorStatus(actor) && <span>{actorStatus(actor)}</span>}{appActorIds.has(actor.id) && <span className="text-primary">Mini-App</span>}
+        </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>
+      </label>}
+    </li>)}</ul>}
+  </div>;
+}
+
+export function CanvasViewOptions({ appActorIds, preferences, onPreferencesChange }: Pick<ActorCanvasControlsProps, "appActorIds" | "preferences" | "onPreferencesChange">) {
+  return <div className="flex min-h-0 flex-1 flex-col items-start gap-4.5 overflow-auto overscroll-contain px-3 py-4 [&>label]:flex [&>label]:cursor-pointer [&>label]:items-center [&>label]:gap-2">
+    <label><input checked={preferences.showAppActors} onChange={(event) => onPreferencesChange(withAppActorVisibility(preferences, appActorIds, event.target.checked))} type="checkbox" /><span>Actors mit Mini-App anzeigen</span></label>
+    <label><input checked={preferences.showConnections} onChange={(event) => onPreferencesChange({ ...preferences, showConnections: event.target.checked })} type="checkbox" /><span>Verbindungen anzeigen</span></label>
+    <Button onClick={() => onPreferencesChange(DEFAULT_CANVAS_VIEW_PREFERENCES)} size="sm" variant="ghost">Ansicht zurücksetzen</Button>
+  </div>;
+}

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

@@ -0,0 +1,56 @@
+import { useAccess } from "@aicontainer/web/AccessContext";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@aicontainer/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 type { FlowSelection } from "./FlowInspector";
+import type { RunActor, RunView } from "./run-view";
+
+const emptyMessages: readonly Message[] = [];
+
+export function ActorChat({ actor, view, presentation, surface = presentation, primaryMessages = emptyMessages, conversation, historyError, running = false, className, onNavigate, scrollerRef }: {
+  actor: RunActor;
+  view: RunView;
+  presentation: "canvas" | "inspector";
+  /** Schlüssel der Anzeigefläche für den gemerkten Detailgrad; Default ist die Darstellung. */
+  surface?: string;
+  primaryMessages?: readonly Message[];
+  conversation?: readonly Message[];
+  historyError?: string;
+  running?: boolean;
+  className?: string;
+  onNavigate: (selection: FlowSelection) => void;
+  scrollerRef?: (element: HTMLDivElement | null) => void;
+}) {
+  const inspect = useAccess().can("runs.inspect");
+  const steps = useChatSteps(view.id, actor.id, surface);
+  const renderTool = useToolRenderer();
+  const configuredMode = steps.mode("agents");
+  const detailMode = inspect || configuredMode === "off" ? configuredMode : "current";
+  const messages = useMemo(() => actorChatMessages(view, actor, primaryMessages, conversation), [view, actor, primaryMessages, conversation]);
+  const openLink = useCallback((href: string) => {
+    const match = /^ablauf:(actor|input|turn|subscription|action|artifact)\/(.+)$/.exec(href);
+    if (!match) return false;
+    if (!inspect) return true;
+    onNavigate({ type: match[1] as FlowSelection["type"], id: match[2] });
+    return true;
+  }, [inspect, onNavigate]);
+  return <>
+    {historyError && <p className="my-1.5 text-[0.72rem] text-destructive" role="alert">{historyError}</p>}
+    <ChatMessages
+    className={className}
+    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}
+    renderTool={renderTool}
+    owner={actor.id}
+    onLinkClick={openLink}
+    running={running}
+    showTimestamps={presentation === "inspector"}
+    stepsExpandable={inspect && steps.stepsExpandable}
+    scrollerRef={scrollerRef}
+    />
+  </>;
+}

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

@@ -0,0 +1,64 @@
+import { useAccess } from "@aicontainer/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";
+
+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 }: {
+  actor: RunActor;
+  view: RunView;
+  composerVisible?: boolean;
+  presentation?: "canvas" | "inspector" | "column";
+  surface?: 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 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>;
+  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"}
+      maxRows={4}
+      onSend={(text, files) => sendActorMessage(view.id, actor.id, text, files)}
+      onStop={disabledReason === undefined ? () => {
+        setStopError(undefined);
+        void stopChatActor(view.id, actor.id).catch((error: unknown) =>
+          setStopError(error instanceof Error ? error.message : String(error)));
+      } : undefined}
+      rows={1}
+      running={running}
+      texts={{ placeholder: disabledReason ?? `Nachricht an @${actor.handle} ...` }}
+      toolbarLeft={<>
+        {toolbarLeft}
+        {detailSwitch}
+        {presentation === "inspector" && <span className="truncate text-[0.7rem] text-muted-foreground">an @{actor.handle}</span>}
+      </>}
+      toolbarRight={toolbarRight}
+    />
+    {stopError && <p className={noteClass} role="alert">{stopError}</p>}
+    {disabledReason && presentation === "inspector" && <p className={noteClass}>{disabledReason}</p>}
+  </div>;
+}

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

@@ -0,0 +1,36 @@
+import { canvasLayoutOf, ORCHESTRATION_PLUGIN_ID } from "../contract";
+import { ActorChat } from "./ActorChat";
+import { ActorChatControls } from "./ActorChatControls";
+import { ChatPanel } from "@aicontainer/web/chat/ChatPanel";
+import { memo, useCallback, useMemo } from "react";
+import type { FlowSelection } from "./FlowInspector";
+import type { RunActor, RunView } from "./run-view";
+import type { Message } from "@aicontainer/web/chat/types";
+
+export const ActorChatPreview = memo(function ActorChatPreview({ actor, view, primaryMessages, conversation, historyError, running = false, onNavigate }: {
+  actor: RunActor;
+  view: RunView;
+  primaryMessages?: readonly Message[];
+  conversation?: readonly Message[];
+  historyError?: string;
+  running?: boolean;
+  onNavigate: (selection: FlowSelection) => void;
+}) {
+  const layoutState = view.pluginStates.find((entry) => entry.pluginId === ORCHESTRATION_PLUGIN_ID && entry.scope.kind === "run")?.state;
+  const chatInput = useMemo(() => {
+    if (layoutState === undefined) return true;
+    const node = canvasLayoutOf(layoutState).nodes.find((entry) => "entity" in entry && entry.entity === `@${actor.handle}`);
+    return !node || !("chatInput" in node) || node.chatInput !== false;
+  }, [layoutState, actor.handle]);
+  const focusableScroller = useCallback((element: HTMLDivElement | null) => {
+    if (!element) return;
+    element.tabIndex = 0;
+    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} />
+    </ChatPanel>
+  </div>;
+});