@schlenkr/ragents 0.1.5 → 0.1.7

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>;
+}