@schlenkr/ragents 0.1.4 → 0.1.6

package/plugins/ragents.orchestration/web/{TiledCanvas.tsx → TiledSurface.tsx}

@@ -1,14 +1,14 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, CodeXml, LayoutGrid, Sparkles, GripVertical, X } from "lucide-react";
-import { canvasTileNodeOf, type CanvasTileNode } from "../tiled-layout";
-import { CANVAS_TILE_DRAG_TYPE, dockTile, removeTile, resizeTile, tileEntities, tileGeometry, tileMinimum, type TileDivider, type TileDockSide, type TileRect } from "./tile-docking";
+import { surfaceTileNodeOf, type SurfaceTileNode } from "../tiled-layout";
+import { SURFACE_TILE_DRAG_TYPE, dockTile, removeTile, resizeTile, tileEntities, tileGeometry, tileMinimum, type TileDivider, type TileDockSide, type TileRect } from "./tile-docking";
 import { materialCardClass, materialHeadClass, materialIconClass, materialTitleClass } from "./MaterialBody";
 
-export interface CanvasTileItem { entity: string; title: string; content: ReactNode; surface?: "agent" | "primary" | "script" | "app" }
-interface TiledCanvasProps {
-  root: CanvasTileNode | null;
-  onChange: (root: CanvasTileNode | null) => void;
-  items: readonly CanvasTileItem[];
+export interface SurfaceTileItem { entity: string; title: string; content: ReactNode; tone?: "agent" | "primary" | "script" | "app" }
+interface TiledSurfaceProps {
+  root: SurfaceTileNode | null;
+  onChange: (root: SurfaceTileNode | null) => void;
+  items: readonly SurfaceTileItem[];
   canArrange: boolean;
   selectedEntity?: string;
   onSelect?: (entity: string) => void;
@@ -30,10 +30,10 @@ const sidePlacement = {
   top: { inner: "top-0 left-[40px]", outer: "top-0 left-[calc(50%_-_18px)]" },
   bottom: { inner: "bottom-0 left-[40px]", outer: "bottom-0 left-[calc(50%_-_18px)]" },
 };
-const dockTargetClass = "absolute grid size-[36px] place-items-center rounded-[5px] border border-primary bg-canvas text-primary shadow-[0_2px_8px_#0002] pointer-events-auto data-[active]:bg-primary data-[active]:text-canvas [&>svg]:pointer-events-none";
+const dockTargetClass = "absolute grid size-[36px] place-items-center rounded-[5px] border border-primary bg-surface text-primary shadow-[0_2px_8px_#0002] pointer-events-auto data-[active]:bg-primary data-[active]:text-surface [&>svg]:pointer-events-none";
 const dividerClass = "absolute z-3 grid touch-none place-items-center rounded-[4px] focus-visible:outline-2 focus-visible:outline-primary focus-visible:-outline-offset-2 data-[direction=horizontal]:cursor-col-resize data-[direction=vertical]:cursor-row-resize [&>span]:pointer-events-none [&>span]:rounded-[4px] [&>span]:bg-border-strong data-[direction=horizontal]:[&>span]:h-8 data-[direction=horizontal]:[&>span]:w-[3px] data-[direction=vertical]:[&>span]:h-[3px] data-[direction=vertical]:[&>span]:w-8 hover:[&>span]:bg-primary focus-visible:[&>span]:bg-primary";
 
-export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity, onSelect }: TiledCanvasProps) {
+export function TiledSurface({ root, onChange, items, canArrange, selectedEntity, onSelect }: TiledSurfaceProps) {
   const stageRef = useRef<HTMLDivElement>(null);
   const [size, setSize] = useState({ width: 0, height: 0 });
   const [available, setAvailable] = useState({ width: 0, height: 0 });
@@ -42,9 +42,9 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
   const [resizing, setResizing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [selected, setSelected] = useState<string>();
-  const [resizePreview, setResizePreview] = useState<CanvasTileNode | null>(null);
+  const [resizePreview, setResizePreview] = useState<SurfaceTileNode | null>(null);
   const resizeFrame = useRef<number | null>(null);
-  const resizeRef = useRef<{ divider: TileDivider; start: number; root: CanvasTileNode; next: CanvasTileNode; pointerId: number; handle: HTMLDivElement } | null>(null);
+  const resizeRef = useRef<{ divider: TileDivider; start: number; root: SurfaceTileNode; next: SurfaceTileNode; pointerId: number; handle: HTMLDivElement } | null>(null);
   const visibleRoot = resizePreview ?? root;
   const entities = useMemo(() => tileEntities(root), [root]);
   const mountedEntities = useMemo(() => [...entities].sort(), [entities]);
@@ -85,8 +85,8 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
       pendingFrame = null;
     };
     const start = (event: DragEvent) => {
-      if (!event.dataTransfer?.types.includes(CANVAS_TILE_DRAG_TYPE)) return;
-      const entity = event.dataTransfer.getData(CANVAS_TILE_DRAG_TYPE);
+      if (!event.dataTransfer?.types.includes(SURFACE_TILE_DRAG_TYPE)) return;
+      const entity = event.dataTransfer.getData(SURFACE_TILE_DRAG_TYPE);
       if (!entity) return;
       cancelActivation();
       pendingFrame = requestAnimationFrame(() => {
@@ -172,7 +172,7 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
     </label>}
     <div ref={stageRef} className="relative min-h-0 min-w-0 flex-1 overflow-hidden"
       onDragOver={(event) => {
-        if (!canArrange || dragEntity === null || !event.dataTransfer.types.includes(CANVAS_TILE_DRAG_TYPE)) return;
+        if (!canArrange || dragEntity === null || !event.dataTransfer.types.includes(SURFACE_TILE_DRAG_TYPE)) return;
         event.preventDefault();
         event.dataTransfer.dropEffect = "move";
         const element = event.target instanceof Element ? event.target.closest<HTMLElement>("[data-dock-side]") : null;
@@ -183,7 +183,7 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
       onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setTarget(null); }}
       onDrop={(event) => {
         if (!canArrange || dragEntity === null) return;
-        const entity = event.dataTransfer.getData(CANVAS_TILE_DRAG_TYPE);
+        const entity = event.dataTransfer.getData(SURFACE_TILE_DRAG_TYPE);
         if (!entity || entity !== dragEntity) return;
         event.preventDefault();
         if (!itemMap.has(entity) && !entities.includes(entity)) return;
@@ -191,7 +191,7 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
         try {
           if (!root || element) {
             const next = dockTile(root, entity, element?.dataset.dockEntity || null, (element?.dataset.dockSide ?? "right") as TileDockSide);
-            if (next !== root) onChange(next === null ? null : canvasTileNodeOf(next));
+            if (next !== root) onChange(next === null ? null : surfaceTileNodeOf(next));
             select(entity);
             setError(null);
           }
@@ -202,24 +202,24 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
           setTarget(null);
         }
       }}>
-      {error && <div className="absolute inset-x-2 bottom-2 z-7 flex items-center gap-2 rounded-lg border border-primary bg-canvas p-3 text-foreground shadow-[0_2px_8px_#0002]" role="alert"><span className="flex-1">{error}</span><button className="grid cursor-pointer place-items-center bg-transparent p-1" type="button" aria-label="Meldung schließen" onClick={() => setError(null)}><X size={16} /></button></div>}
+      {error && <div className="absolute inset-x-2 bottom-2 z-7 flex items-center gap-2 rounded-lg border border-primary bg-surface p-3 text-foreground shadow-[0_2px_8px_#0002]" role="alert"><span className="flex-1">{error}</span><button className="grid cursor-pointer place-items-center bg-transparent p-1" type="button" aria-label="Meldung schließen" onClick={() => setError(null)}><X size={16} /></button></div>}
       {!root && <div className="grid h-full place-items-center rounded-lg border border-dashed border-border-strong p-6 text-center text-muted-foreground">{canArrange ? "Ziehe einen Actor oder eine Mini-App aus der Kopfzeile hierher." : "Für diese Kachelansicht sind noch keine Inhalte angeordnet."}</div>}
       {mountedEntities.map((entity) => {
         const item = itemMap.get(entity);
         const bounds = materialFaceRect(compact ? rect : geometry.leaves.get(entity)!);
-        return <section key={entity} className={materialCardClass(item?.surface ?? (entity.startsWith("app:") ? "app" : "agent"),
-          "absolute z-0 flex min-h-0 min-w-0 flex-col overflow-visible")} data-tile-entity={entity} data-surface="material"
+        return <section key={entity} className={materialCardClass(item?.tone ?? (entity.startsWith("app:") ? "app" : "agent"),
+          "absolute z-0 flex min-h-0 min-w-0 flex-col overflow-visible")} data-tile-entity={entity} data-tone="material"
           style={{ ...positioned(bounds), display: compact && entity !== active ? "none" : undefined }}
           onFocusCapture={() => { if (active !== entity) setSelected(entity); }}>
           <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-[15.5px]">
             <header className={`${materialHeadClass} flex-[0_0_49px] min-w-0 select-none border-b border-[#51465738] text-foreground [&[draggable=true]]:cursor-grab`}
               draggable={canArrange} onDragStart={(event) => {
               if (!canArrange) { event.preventDefault(); return; }
-              event.dataTransfer.setData(CANVAS_TILE_DRAG_TYPE, entity);
+              event.dataTransfer.setData(SURFACE_TILE_DRAG_TYPE, entity);
               event.dataTransfer.effectAllowed = "move";
             }}>
               {canArrange && <GripVertical size={16} aria-hidden="true" />}
-              <span className={materialIconClass}>{item?.surface === "app" || entity.startsWith("app:") ? <LayoutGrid size={20} aria-hidden="true" /> : item?.surface === "script" ? <CodeXml size={20} aria-hidden="true" /> : <Sparkles size={20} aria-hidden="true" />}</span>
+              <span className={materialIconClass}>{item?.tone === "app" || entity.startsWith("app:") ? <LayoutGrid size={20} aria-hidden="true" /> : item?.tone === "script" ? <CodeXml size={20} aria-hidden="true" /> : <Sparkles size={20} aria-hidden="true" />}</span>
               <span className={`${materialTitleClass} flex-1`} title={item?.title ?? entity}>{item?.title ?? entity}</span>
               {canArrange && <button className="grid size-[26px] cursor-pointer place-items-center rounded-[4px] bg-transparent p-0 text-muted-foreground hover:bg-glass-group hover:text-foreground"
                 type="button" draggable={false} aria-label={`Kachel ${item?.title ?? entity} entfernen`}
@@ -272,7 +272,7 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
         }}><span /></div>)}
       {resizing && <div className="absolute inset-0 z-2" />}
       {canArrange && dragEntity !== null && root && <div className="pointer-events-none absolute inset-2 z-6">{targets(null)}</div>}
-      {canArrange && dragEntity !== null && preview && <div className={materialCardClass(itemMap.get(dragEntity)?.surface ?? (dragEntity.startsWith("app:") ? "app" : "agent"),
+      {canArrange && dragEntity !== null && preview && <div className={materialCardClass(itemMap.get(dragEntity)?.tone ?? (dragEntity.startsWith("app:") ? "app" : "agent"),
         "pointer-events-none absolute z-5 opacity-80")}
         style={positioned(materialFaceRect(preview))}><div className="absolute inset-0 rounded-[15.5px] border-2 border-primary bg-primary/22" /></div>}
     </div>

package/plugins/ragents.orchestration/web/actor-header-settings.ts

@@ -1,5 +1,5 @@
-import { createLocalStorageSetting } from "@aicontainer/web/lib/local-storage-setting";
-import type { RunActor } from "./run-view";
+import { createLocalStorageSetting } from "@ragents/web/lib/local-storage-setting";
+import type { RunActor } from "@ragents/web/run-view";
 
 export const ACTOR_HEADER_MODES = ["all", "active", "visible", "agent", "script"] as const;
 export type ActorHeaderMode = typeof ACTOR_HEADER_MODES[number];

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

@@ -1,23 +1,17 @@
-import { coreContracts } from "@aicontainer/server/api/contracts";
-import { runContracts } from "@aicontainer/ragents/src/http/contracts";
-import type { ChatAttachmentInput } from "@aicontainer/web/chat/types";
-import { rpc } from "@aicontainer/web/rpc";
+import { runContracts } from "@ragents/engine/src/http/contracts";
+import { rpc } from "@ragents/web/rpc";
 
 export const enqueueActorInput = async (runId: string, actorId: string, content: string, artifactIds: string[] = []) => {
   await rpc.call(runContracts.enqueueInput, { runId, commandId: crypto.randomUUID(), actorId, content, artifactIds });
 };
 
-export const sendActorMessage = async (runId: string, actorId: string, text: string, attachments?: ChatAttachmentInput[]) => {
-  await rpc.call(coreContracts.chat.sendToActor, { runId, actorId, text, attachments });
-};
-
 export const resolveAction = async (
   runId: string,
   actionId: string,
   decision: "approved" | "dismissed",
-  response?: string,
+  result?: string,
 ) => {
-  await rpc.call(runContracts.resolveAction, { runId, commandId: crypto.randomUUID(), actionId, decision, response });
+  await rpc.call(runContracts.resolveAction, { runId, commandId: crypto.randomUUID(), actionId, decision, result });
 };
 
 export const stopActor = async (runId: string, actorId: string, reason: string) => {

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

@@ -1,5 +1,4 @@
 export const ORCHESTRATION_PLUGIN_ID = "ragents.orchestration";
-export const ORCHESTRATION_TAB_ID = "ragents.orchestration.inspector";
 
 /** Knopf in der Statusleiste: volle Leistenhöhe, keine Rundung, ruhige Fläche. */
 export const statusControlClass = "flex h-full min-w-statusbar items-center justify-center self-stretch whitespace-nowrap px-2.5 text-[0.7rem] text-foreground hover:bg-primary/12 aria-expanded:bg-primary/12 focus-visible:outline-2 focus-visible:outline-primary focus-visible:-outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";

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

@@ -1,6 +1,6 @@
-import type { JournalEvent } from "../../../packages/ragents/src/domain/events";
-import type { JsonValue } from "../../../packages/ragents/src/domain/json";
-import type { RunView } from "./run-view";
+import type { JournalEvent } from "@ragents/engine/src/domain/events";
+import type { JsonValue } from "@ragents/engine/src/domain/json";
+import type { RunView } from "@ragents/web/run-view";
 
 export type ExecutionStatus = "running" | "completed" | "failed" | "interrupted";
 

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

@@ -1,139 +1,42 @@
-import { useAccess } from "@aicontainer/web/AccessContext";
-import { createContext, useContext, useEffect, useState } from "react";
-import { FlowInspector as NetworkInspector, type FlowSelection as NetworkSelection } from "./FlowInspector";
+import { useEffect, useState } from "react";
 import { OrchestrationCenter } from "./Center";
-import { OrchestrationColumn } from "./column/RunColumn";
+import { OrchestrationRunPanel } from "./run-panel/RunPanel";
 import { DocumentsSection } from "./DocumentsSection";
-import { ColumnSettings } from "./column/ColumnSettings";
-import { ActorShortcuts } from "./ActorCanvasControls";
+import { RunPanelSettings } from "./run-panel/RunPanelSettings";
+import { ActorShortcuts } from "./ActorSurfaceControls";
 import { JournalStatus } from "./JournalStatus";
 import { StopRunHeader } from "./StopRunButton";
 import { EXECUTIONS_TAB_ID, ExecutionsPanel, IconExecutions } from "./ExecutionsPanel";
-import { ORCHESTRATION_PLUGIN_ID, ORCHESTRATION_TAB_ID } from "./constants";
-import { runViewFrom } from "./run-view";
+import { ORCHESTRATION_PLUGIN_ID } from "./constants";
+import { runViewFrom } from "@ragents/web/run-view";
 import {
-  CanvasControllerProvider,
+  SurfaceControllerProvider,
   type EntityReference,
   type SessionProviderProps,
   type WebPlugin,
-  type WorkspaceTabContext,
-} from "@aicontainer/web/PluginRegistry";
+} from "@ragents/web/PluginRegistry";
 
-export { ORCHESTRATION_PLUGIN_ID, ORCHESTRATION_TAB_ID } from "./constants";
-
-interface OrchestrationController {
-  canGoBack: boolean;
-  selection: NetworkSelection | undefined;
-  selectionRevision: number;
-  acceptCanvasSelection: (selection: EntityReference | undefined) => void;
-  navigateBack: () => void;
-  navigateFromPanel: (selection: NetworkSelection) => void;
-}
-
-const OrchestrationContext = createContext<OrchestrationController | undefined>(undefined);
-
-const isNetworkSelection = (selection: EntityReference): selection is NetworkSelection =>
-  selection.type === "actor"
-  || selection.type === "input"
-  || selection.type === "turn"
-  || selection.type === "subscription"
-  || selection.type === "action"
-  || selection.type === "artifact";
+export { ORCHESTRATION_PLUGIN_ID } from "./constants";
 
+/** Die Auswahl auf der Fläche: ein Artefakt öffnet die Dokumente, jede andere Entität wird die gewählte Kachel und der gemeldete Standort. */
 function OrchestrationSessionProvider({ children, navigation, session }: SessionProviderProps) {
-  const inspect = useAccess().can("runs.inspect");
   const runView = runViewFrom(session.runView);
-  const [selection, setSelection] = useState<NetworkSelection>();
-  const [history, setHistory] = useState<NetworkSelection[]>([]);
-  const [selectionRevision, setSelectionRevision] = useState(0);
+  const [selection, setSelection] = useState<EntityReference>();
 
   useEffect(() => {
     if (runView) return;
     setSelection(undefined);
-    setHistory([]);
-    setSelectionRevision((revision) => revision + 1);
   }, [runView]);
 
-  const publishSelection = (next: NetworkSelection | undefined) => {
+  const acceptSelection = (next: EntityReference | undefined) => {
+    if (next?.type === "artifact" && navigation.revealEntity(next)) return;
     setSelection(next);
-    setSelectionRevision((revision) => revision + 1);
-  };
-
-  const acceptCanvasSelection = (nextEntity: EntityReference | undefined) => {
-    if (nextEntity && !isNetworkSelection(nextEntity)) return;
-    const next = nextEntity;
-    if (next?.type === "artifact" && navigation.revealEntity(next)) {
-      setSelectionRevision((revision) => revision + 1);
-      return;
-    }
-    setHistory([]);
-    publishSelection(next);
-    if (next && inspect) navigation.openTab(ORCHESTRATION_TAB_ID);
-  };
-
-  const navigateFromPanel = (next: NetworkSelection) => {
-    if (next.type === "artifact" && navigation.revealEntity(next)) return;
-    const current = selection
-      ?? (runView ? { type: "actor" as const, id: runView.primaryActorId ?? runView.ownerId } : undefined);
-    if (current) setHistory((entries) => [...entries.slice(-31), current]);
-    publishSelection(next);
-  };
-
-  const navigateBack = () => {
-    const previous = history.at(-1);
-    setHistory((entries) => entries.slice(0, -1));
-    publishSelection(previous);
   };
 
   return (
-    <CanvasControllerProvider value={{
-      acceptSelection: acceptCanvasSelection,
-      selection,
-      selectionRevision,
-      tabId: ORCHESTRATION_TAB_ID,
-    }}>
-      <OrchestrationContext.Provider value={{
-        acceptCanvasSelection,
-        canGoBack: history.length > 0,
-        navigateBack,
-        navigateFromPanel,
-        selection,
-        selectionRevision,
-      }}>
-        {children}
-      </OrchestrationContext.Provider>
-    </CanvasControllerProvider>
-  );
-}
-
-export const useOrchestrationController = () => useContext(OrchestrationContext);
-
-function OrchestrationInspectorPanel({ session }: WorkspaceTabContext) {
-  const controller = useOrchestrationController();
-  if (!controller) throw new Error("Orchestrierungs-Plugin ist nicht aktiv");
-  return (
-    <NetworkInspector
-      canGoBack={controller.canGoBack}
-      composerVisible={session.centerMode === "workflow"}
-      primaryMessages={session.messages}
-      actorConversations={session.actorConversations}
-      conversationError={session.conversationError}
-      primaryRunning={session.running}
-      onBack={controller.navigateBack}
-      onNavigate={controller.navigateFromPanel}
-      selection={controller.selection}
-      view={runViewFrom(session.runView)}
-    />
-  );
-}
-
-function IconOrchestration() {
-  return (
-    <svg aria-hidden fill="none" height="15" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.7" viewBox="0 0 24 24" width="15">
-      <rect height="6" rx="1.5" width="8" x="3" y="3" />
-      <rect height="6" rx="1.5" width="8" x="13" y="15" />
-      <path d="M7 9v4a2 2 0 0 0 2 2h4" />
-    </svg>
+    <SurfaceControllerProvider value={{ acceptSelection, selection }}>
+      {children}
+    </SurfaceControllerProvider>
   );
 }
 
@@ -143,12 +46,12 @@ export const webPlugin: WebPlugin = {
   sessionStatus: [{ id: "ragents.orchestration.journal", readRight: "runs.inspect", order: 20, Status: JournalStatus }],
   sessionHeaders: [
     { id: "ragents.orchestration.stop", readRight: "runs.write", order: 100, Header: StopRunHeader },
-    { id: "ragents.orchestration.actors", order: 300, placement: "canvas", Header: ActorShortcuts },
+    { id: "ragents.orchestration.actors", order: 300, placement: "surface", Header: ActorShortcuts },
   ],
   settings: [
-    { id: "ragents.orchestration.column", category: "appearance", label: "Arbeitsspalte", Settings: ColumnSettings },
+    { id: "ragents.orchestration.runPanel", category: "appearance", label: "Run-Panel", Settings: RunPanelSettings },
   ],
-  canvas: { Center: OrchestrationCenter, Column: OrchestrationColumn, tabId: ORCHESTRATION_TAB_ID },
+  surface: { Center: OrchestrationCenter, RunPanel: OrchestrationRunPanel },
   cardSections: [{
     id: "ragents.orchestration.documents",
     order: 300,
@@ -156,14 +59,6 @@ export const webPlugin: WebPlugin = {
   }],
   SessionProvider: OrchestrationSessionProvider,
   workspaceTabs: [{
-    readRight: "runs.inspect",
-    id: ORCHESTRATION_TAB_ID,
-    label: "Netz",
-    order: 100,
-    Icon: IconOrchestration,
-    Panel: OrchestrationInspectorPanel,
-    available: (session) => (runViewFrom(session.runView)?.actors.length ?? 0) > 0,
-  }, {
     id: EXECUTIONS_TAB_ID,
     readRight: "runs.inspect",
     label: "Executions",

package/plugins/ragents.orchestration/web/program-slot.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext, type ReactNode } from "react";
+import type { SessionContext } from "@ragents/web/PluginRegistry";
+import type { RunView } from "@ragents/web/run-view";
+
+/** What an actor-program extension adds to the run panel and the inspector; without one both show no programs. */
+export interface ProgramSlot {
+  runId: string;
+  needsAnswer: (session: SessionContext, appId: string) => boolean;
+  openFullscreen: (appId: string) => void;
+  source: (view: RunView, actorId: string) => ReactNode;
+}
+
+export const ProgramSlotContext = createContext<ProgramSlot | undefined>(undefined);
+export const useProgramSlot = () => useContext(ProgramSlotContext);

package/plugins/ragents.orchestration/web/run-panel/AddresseeControl.tsx

@@ -0,0 +1,95 @@
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { ChevronDownIcon } from "lucide-react";
+import { Badge, cn, Input, Spinner } from "@ragents/web/ui";
+import { ActorHeaderModeControl } from "../ActorSurfaceControls";
+import { ActorPopout } from "../ActorPopout";
+import type { RunActor, RunView } from "@ragents/web/run-view";
+import { pendingInputCount } from "./run-panel-actors";
+import { ADDRESSEE_SEARCH_ABOVE, addresseeMatches, addresseeSummaries, addresseeTree } from "./addressee-tree";
+import { ActorIcon, AddresseeTree } from "./AddresseeTree";
+
+const chipClass = "flex h-7 min-w-[70px] max-w-[220px] flex-[0_1_auto] cursor-pointer items-center gap-1.5 rounded-full border border-border bg-background pr-2 pl-1 text-[0.72rem] font-semibold text-foreground hover:bg-accent aria-expanded:border-primary focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:outline-offset-1";
+const busyClass = "flex h-7 min-w-0 flex-[0_1_auto] cursor-pointer items-center gap-1.5 rounded-md px-1.5 text-[0.7rem] text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:outline-offset-1";
+
+/** Der Adressat des Chats als Chip in der Eingabeleiste; das Pop-out zeigt die Actors als Baum nach Erzeuger, die ausgeblendeten hinter ihrer Zahl. */
+export function AddresseeControl({ hidden, onOpenChange, onReveal, onSelect, runId, selected, shown, technical, view }: {
+  hidden: readonly RunActor[];
+  onOpenChange: (open: boolean) => void;
+  onReveal: (actor: RunActor) => void;
+  onSelect: (actor: RunActor) => void;
+  runId: string;
+  selected: RunActor;
+  shown: readonly RunActor[];
+  technical: boolean;
+  view: RunView;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [hiddenListed, setHiddenListed] = useState(false);
+  const [toggled, setToggled] = useState<ReadonlySet<string>>(() => new Set());
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const panelId = useId();
+  const change = useCallback((next: boolean) => {
+    setOpen(next);
+    onOpenChange(next);
+  }, [onOpenChange]);
+  const close = useCallback((restoreFocus = false) => {
+    change(false);
+    setQuery("");
+    if (restoreFocus) buttonRef.current?.focus({ preventScroll: true });
+  }, [change]);
+  const revealSelected = useCallback((element: HTMLDivElement | null) => {
+    element?.querySelector("[aria-current=true]")?.scrollIntoView({ block: "nearest" });
+  }, []);
+  const working = useMemo(() => [...shown, ...hidden].filter((actor) => actor.lifecycle?.kind === "running" && actor.id !== selected.id), [hidden, selected.id, shown]);
+  const summary = useMemo(() => addresseeSummaries(view), [view]);
+  const searching = query.trim() !== "";
+  const shownTree = useMemo(() => addresseeTree(view, addresseeMatches(view, shown, query, summary)), [query, shown, summary, view]);
+  const hiddenMatches = useMemo(() => addresseeMatches(view, hidden, query, summary), [hidden, query, summary, view]);
+  const hiddenTree = useMemo(() => addresseeTree(view, hiddenMatches), [hiddenMatches, view]);
+  const hiddenOpen = hiddenListed || (searching && hiddenMatches.length > 0);
+  const toggle = useCallback((key: string) => setToggled((current) => {
+    const next = new Set(current);
+    if (!next.delete(key)) next.add(key);
+    return next;
+  }), []);
+  const pick = (actor: RunActor, reveal: boolean) => {
+    (reveal ? onReveal : onSelect)(actor);
+    close(true);
+  };
+  const busyTitle = working.map((actor) => `@${actor.handle} arbeitet`).join(", ");
+  const busyPending = working.length > 0 ? pendingInputCount(view, working[0].id) : 0;
+  const treeProps = { onToggle: toggle, openByDefault: searching, selectedId: selected.id, summary, technical, toggled, view };
+  const listClass = "px-1.5 py-1";
+
+  return <>
+    <button aria-controls={open ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog" className={chipClass} onClick={() => change(!open)} ref={buttonRef} title={`Adressat: @${selected.handle}. Klick wählt einen anderen Actor`} type="button">
+      <ActorIcon actor={selected} className="size-5" view={view} />
+      <span className="truncate">@{selected.handle}</span>
+      <ChevronDownIcon aria-hidden className="size-3 flex-none text-muted-foreground" />
+    </button>
+    {working.length > 0 && <button className={busyClass} onClick={() => change(!open)} title={busyTitle} type="button">
+      <Spinner aria-hidden className="size-3 flex-none" />
+      <span className="truncate in-data-[compact=true]:hidden">@{working[0].handle}</span>
+      {busyPending > 0 && <Badge className="h-4 min-w-4 px-1 text-[0.6rem]" variant="secondary">{busyPending}</Badge>}
+      {working.length > 1 && <span className="flex-none">+{working.length - 1}</span>}
+    </button>}
+    {open && <ActorPopout buttonRef={buttonRef} closeLabel="Adressat schließen" height={460} id={panelId} label="Adressat" onClose={close} open placement="top" role="dialog" width="available">
+      {shown.length + hidden.length > ADDRESSEE_SEARCH_ABOVE && <div className="flex-none border-b border-border-soft px-2.5 py-1.5">
+        <Input aria-label="Actors durchsuchen" className="h-7" onChange={(event) => setQuery(event.target.value)} placeholder="Handle oder Aufgabe suchen ..." type="search" value={query} />
+      </div>}
+      <div className="min-h-0 flex-1 overflow-auto overscroll-contain" ref={revealSelected}>
+        <AddresseeTree className={listClass} nodes={shownTree} onPick={(actor) => pick(actor, false)} {...treeProps} />
+        {searching && shownTree.length === 0 && hiddenMatches.length === 0 && <p className="px-3.5 py-2 text-muted-foreground">Kein Actor passt zur Suche.</p>}
+        {hidden.length > 0 && (!searching || hiddenMatches.length > 0) && <div className="border-t border-border-soft">
+          <button aria-expanded={hiddenOpen} className="flex w-full cursor-pointer items-center justify-between gap-2 px-3.5 py-2 text-left text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2" onClick={() => setHiddenListed(!hiddenOpen)} type="button">
+            <span>{hidden.length} ausgeblendete Actors</span>
+            <ChevronDownIcon aria-hidden className={cn("size-3.5 flex-none transition-transform", hiddenOpen && "rotate-180")} />
+          </button>
+          {hiddenOpen && <AddresseeTree className={listClass} nodes={hiddenTree} onPick={(actor) => pick(actor, true)} {...treeProps} />}
+        </div>}
+      </div>
+      <div className="flex flex-none items-stretch border-t border-border-soft"><ActorHeaderModeControl runId={runId} /></div>
+    </ActorPopout>}
+  </>;
+}

package/plugins/ragents.orchestration/web/run-panel/AddresseeTree.tsx

@@ -0,0 +1,109 @@
+import { ChevronRightIcon, CodeIcon, SparklesIcon, UsersIcon } from "lucide-react";
+import { Badge, cn, Spinner } from "@ragents/web/ui";
+import { actorTone, type RunActor, type RunView } from "@ragents/web/run-view";
+import { pendingInputCount } from "./run-panel-actors";
+import { addresseeNodeContains, addresseeStatus, addresseeStatusCounts, addresseeStatusWord, type AddresseeActorNode, type AddresseeGroupNode, type AddresseeNode, type AddresseeStatus } from "./addressee-tree";
+
+const entryClass = "flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent aria-current:bg-primary/10 focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2";
+const branchClass = "ml-[18px] list-none border-l border-border-soft pl-1";
+const iconClass: Readonly<Record<string, string>> = {
+  agent: "bg-glass-agent",
+  primary: "bg-glass-primary",
+  script: "bg-glass-script",
+  app: "bg-glass-app",
+};
+const statusClass: Readonly<Record<AddresseeStatus, string>> = {
+  running: "text-primary",
+  input: "text-warning",
+  waiting: "text-muted-foreground",
+  stopped: "text-muted-foreground/70",
+};
+
+const actorType = (actor: RunActor, technical: boolean) => !technical ? "Agent" : actor.kind === "agent" ? "LLM-Agent" : "TypeScript-Actor";
+
+export function ActorIcon({ actor, className, view }: { actor: RunActor; className?: string; view: RunView }) {
+  const tone = actorTone(view, actor);
+  return <span className={cn("grid flex-none place-items-center rounded-full text-foreground [&>svg]:size-3", iconClass[tone], className)}>
+    {actor.lifecycle?.kind === "running" ? <Spinner aria-hidden className="size-3" /> : tone === "primary" ? <SparklesIcon /> : actor.kind === "agent" ? <UsersIcon /> : <CodeIcon />}
+  </span>;
+}
+
+export interface AddresseeTreeProps {
+  view: RunView;
+  selectedId: string;
+  technical: boolean;
+  summary: (actor: RunActor) => string | undefined;
+  /** Gruppen, deren Aufklappzustand der Benutzer gegenüber der Vorgabe umgeschaltet hat. */
+  toggled: ReadonlySet<string>;
+  /** Offen ohne eigene Wahl, etwa während einer Suche. */
+  openByDefault: boolean;
+  onToggle: (key: string) => void;
+  onPick: (actor: RunActor) => void;
+}
+
+/** Der Adressatenbaum: je Actor Handle, Kurzbeschreibung und Zustand, gleichartige Geschwister als aufklappbare Gruppe. */
+export function AddresseeTree({ className, nodes, ...props }: AddresseeTreeProps & { className?: string; nodes: readonly AddresseeNode[] }) {
+  return <ul className={cn("list-none", className)}>
+    {nodes.map((node) => node.kind === "actor"
+      ? <ActorBranch key={node.actor.id} node={node} {...props} />
+      : <GroupBranch key={node.key} node={node} {...props} />)}
+  </ul>;
+}
+
+function ActorBranch({ node, ...props }: AddresseeTreeProps & { node: AddresseeActorNode }) {
+  return <li>
+    <ActorEntry actor={node.actor} {...props} />
+    {node.children.length > 0 && <AddresseeTree className={branchClass} nodes={node.children} {...props} />}
+  </li>;
+}
+
+function ActorEntry({ actor, onPick, selectedId, summary, technical, view }: AddresseeTreeProps & { actor: RunActor }) {
+  const pending = pendingInputCount(view, actor.id);
+  const status = addresseeStatus(view, actor);
+  const description = summary(actor);
+  const name = actor.displayName.trim();
+  const showName = name !== "" && name.toLocaleLowerCase("de-DE") !== actor.handle.toLocaleLowerCase("de-DE") && name !== description;
+  const current = actor.id === selectedId;
+  return <button aria-current={current || undefined} className={entryClass} data-actor-handle={actor.handle} onClick={() => onPick(actor)}
+    title={`@${actor.handle}, ${actorType(actor, technical)}, ${addresseeStatusWord(status)}. Nachrichten an @${actor.handle} richten`} type="button">
+    <ActorIcon actor={actor} className="size-5" view={view} />
+    <span className="grid min-w-0 flex-1">
+      <span className="flex min-w-0 items-baseline gap-1.5">
+        <span className="truncate font-semibold">@{actor.handle}</span>
+        {showName && <span className="min-w-0 truncate text-[0.66rem] text-muted-foreground">{name}</span>}
+      </span>
+      {description && <span className="truncate text-[0.66rem] text-muted-foreground">{description}</span>}
+    </span>
+    {pending > 0 && <Badge className="h-4 min-w-4 px-1 text-[0.6rem]" variant="secondary">{pending}</Badge>}
+    <span className={cn("flex-none text-[0.66rem]", statusClass[status])} data-addressee-status={status}>{addresseeStatusWord(status)}</span>
+  </button>;
+}
+
+function GroupBranch({ node, ...props }: AddresseeTreeProps & { node: AddresseeGroupNode }) {
+  const { onToggle, openByDefault, selectedId, toggled, view } = props;
+  const actors = node.members.map((member) => member.actor);
+  const open = (openByDefault || addresseeNodeContains(node, selectedId)) !== toggled.has(node.key);
+  const counts = addresseeStatusCounts(view, actors);
+  const running = actors.some((actor) => actor.lifecycle?.kind === "running");
+  const pending = actors.reduce((sum, actor) => sum + pendingInputCount(view, actor.id), 0);
+  return <li>
+    <button aria-expanded={open} className={entryClass} data-addressee-group={node.label} onClick={() => onToggle(node.key)}
+      title={`${node.label}: ${actors.length} gleichartige Actors, ${counts}. Klick ${open ? "klappt die Gruppe zu" : "zeigt alle"}`} type="button">
+      <span className="grid size-5 flex-none place-items-center text-muted-foreground">
+        <ChevronRightIcon aria-hidden className={cn("size-3.5 transition-transform", open && "rotate-90")} />
+      </span>
+      <span className="grid min-w-0 flex-1">
+        <span className="flex min-w-0 items-baseline gap-1.5">
+          <span className="truncate font-semibold">{node.label}</span>
+          <span className="flex-none text-[0.66rem] text-muted-foreground">{actors.length} Actors</span>
+        </span>
+        <span className="truncate text-[0.66rem] text-muted-foreground">{counts}</span>
+      </span>
+      {running && <Spinner aria-hidden className="size-3 flex-none text-primary" />}
+      {pending > 0 && <Badge className="h-4 min-w-4 px-1 text-[0.6rem]" variant="secondary">{pending}</Badge>}
+    </button>
+    {open && <ul className={branchClass}>
+      {node.members.map((member) => <ActorBranch key={member.actor.id} node={member} {...props} />)}
+    </ul>}
+  </li>;
+}