@schlenkr/ragents 0.1.0 → 0.1.2

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

@@ -2,10 +2,9 @@ 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 { 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 { actorVisibleOnCanvas, type CanvasViewPreferences } from "./canvas-view-settings";
 import { runViewFrom, type RunActor } from "./run-view";
 import { ActorPopout } from "./ActorPopout";
 import { ActorShortcut } from "./ActorShortcut";
@@ -13,7 +12,6 @@ import { ACTOR_HEADER_MODES, ACTOR_HEADER_MODE_LABELS, actorOnStage, actorVisibl
 import { useStageEntities } from "./canvas-stage";
 
 export interface ActorCanvasControlsProps {
-  control: "actors" | "view";
   session: SessionContext;
   appActorIds: ReadonlySet<string>;
   preferences: CanvasViewPreferences;
@@ -33,10 +31,6 @@ export function filterCanvasActors(actors: readonly RunActor[], appActorIds: Rea
   });
 }
 
-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>();
@@ -74,8 +68,8 @@ export function ActorHeaderModeControl({ runId }: { runId: string }) {
   </ToolbarItem>;
 }
 
-export function ActorCanvasControls({ control, session, appActorIds, preferences, onPreferencesChange }: ActorCanvasControlsProps) {
-  const [open, setOpen] = useState<"actors" | "view">();
+export function ActorCanvasControls({ session, appActorIds, preferences, onPreferencesChange }: ActorCanvasControlsProps) {
+  const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const buttonRef = useRef<HTMLButtonElement>(null);
   const panelId = useId();
@@ -84,40 +78,30 @@ export function ActorCanvasControls({ control, session, appActorIds, preferences
   const actors = runView?.actors;
   const filtered = useMemo(() => filterCanvasActors(actors ?? [], appActorIds, query), [actors, appActorIds, query]);
   const close = useCallback((restoreFocus = false) => {
-    setOpen(undefined);
+    setOpen(false);
     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} />}
+  const label = `Actors \u00b7 ${actors?.length ?? 0}`;
+  return <div className="flex h-full min-w-0 flex-none items-stretch">
+    <ToolbarItem as="button" ref={buttonRef} aria-controls={open ? panelId : undefined} aria-expanded={open}
+      aria-label={label} title={label} onClick={() => setOpen((value) => !value)} type="button">
+      <UsersIcon size={20} /><ToolbarText>Actors</ToolbarText>
+    </ToolbarItem>
+    {open && <ActorPopout open id={panelId} label="Actors des Runs" closeLabel="Actorliste schließen"
+      buttonRef={buttonRef} onClose={close} width={460} height={460}
+      placement="bottom" focusInput role="region">
+      <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} />
       <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>;
@@ -149,11 +133,3 @@ export function ActorCanvasList({ actors, appActorIds, primaryActorId, onInspect
     </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/ActorChatPreview.tsx

@@ -1,27 +1,21 @@
-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 { memo, useCallback } 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 }: {
+export const ActorChatPreview = memo(function ActorChatPreview({ actor, view, primaryMessages, conversation, historyError, chatInput = true, running = false, onNavigate }: {
   actor: RunActor;
   view: RunView;
   primaryMessages?: readonly Message[];
   conversation?: readonly Message[];
   historyError?: string;
+  chatInput?: boolean;
   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;

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

@@ -8,7 +8,6 @@ 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 { useCanvasPresentation } from "./tiled-view-settings";
 import { CANVAS_TILE_DRAG_TYPE } from "./tile-docking";
 
 const shortcutIconClass = "grid size-[30px] flex-none place-items-center rounded-lg border border-foreground/15 text-foreground";
@@ -29,7 +28,6 @@ export function ActorShortcut({ actor, view, session, open, onToggle, onClose, v
   onClose: () => void;
   visible: boolean;
 }) {
-  const tiled = useCanvasPresentation(session.session.id, view).presentation.mode === "tiled";
   const staged = useStageEntities(session.session.id).has(`@${actor.handle}`);
   const technical = useAccess().can("runs.inspect");
   const [visited, setVisited] = useState(false);
@@ -54,13 +52,13 @@ export function ActorShortcut({ actor, view, session, open, onToggle, onClose, v
     <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(); }}
-      draggable={tiled && technical} onDragStart={(event) => {
-        if (!tiled || !technical) { event.preventDefault(); return; }
+      draggable={technical} onDragStart={(event) => {
+        if (!technical) { event.preventDefault(); return; }
         event.dataTransfer.setData(CANVAS_TILE_DRAG_TYPE, `@${actor.handle}`);
         event.dataTransfer.effectAllowed = "move";
         close();
       }}
-      ref={buttonRef} title={`${type}: ${label} öffnen${tiled && technical ? ". Zum Andocken auf eine Kachel ziehen." : ""}`} type="button">
+      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>
       <ToolbarCopy><ToolbarLabel>@{actor.handle}</ToolbarLabel><ToolbarText>{actor.displayName && actor.displayName !== actor.handle ? actor.displayName : type}</ToolbarText></ToolbarCopy>
     </ToolbarItem>

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

@@ -3,16 +3,17 @@ import { ActorChatPreview } from "./ActorChatPreview";
 import { cardSectionsClass } from "./constants";
 import type { RunActor, RunView } from "./run-view";
 
-export function ActorTile({ actor, view, cardSections, session, navigation, onSelect }: {
+export function ActorTile({ actor, view, cardSections, chatInput, session, navigation, onSelect }: {
   actor: RunActor;
   view: RunView;
   cardSections: readonly CardSectionContribution[];
+  chatInput?: boolean;
   session: SessionContext;
   navigation: SessionNavigation;
   onSelect: (selection: EntityReference) => void;
 }) {
   return <div className="flex flex-col overflow-hidden has-[>[data-slot=card-sections]:not(:empty)]:min-h-[260px]">
-    <ActorChatPreview actor={actor} view={view} running={actor.lifecycle?.kind === "running"}
+    <ActorChatPreview actor={actor} view={view} chatInput={chatInput} running={actor.lifecycle?.kind === "running"}
       conversation={session.actorConversations?.[actor.id]} historyError={session.conversationError}
       onNavigate={onSelect} primaryMessages={actor.id === view.primaryActorId ? session.messages : undefined} />
     <div className={`${cardSectionsClass} max-h-[45%] flex-[0_1_auto] overflow-auto overscroll-contain`} data-slot="card-sections">

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

@@ -1,6 +1,6 @@
 import { useAccess } from "@aicontainer/web/AccessContext";
 import type { CanvasElementContribution, CardSectionContribution, EntityReference, SessionContext, SessionNavigation } from "@aicontainer/web/PluginRegistry";
-import type { CanvasTileNode } from "../tiled-layout";
+import { canvasTileChatInput, type CanvasTileNode } from "../tiled-layout";
 import { ActorTile } from "./ActorTile";
 import { FlowInspector } from "./FlowInspector";
 import { TiledCanvas, type CanvasTileItem } from "./TiledCanvas";
@@ -26,7 +26,7 @@ export function CanvasTiles({ root, onChange, canvasElements, cardSections, sess
       title: `${actor.displayName || actor.handle} (@${actor.handle})`,
       surface: actorSurface(view, actor),
       content: actor.kind === "agent"
-        ? <ActorTile actor={actor} view={view} cardSections={cardSections} session={session} navigation={navigation} onSelect={onSelect} />
+        ? <ActorTile actor={actor} view={view} cardSections={cardSections} chatInput={canvasTileChatInput(root, `@${actor.handle}`)} session={session} navigation={navigation} onSelect={onSelect} />
         : <FlowInspector view={view} selection={{ type: "actor", id: actor.id }} canGoBack={false} chatSurface="canvas"
           composerVisible={false} onNavigate={onSelect} onBack={() => {}} primaryMessages={session.messages}
           actorConversations={session.actorConversations} conversationError={session.conversationError} primaryRunning={session.running} />,
@@ -37,7 +37,7 @@ export function CanvasTiles({ root, onChange, canvasElements, cardSections, sess
         entity: `app:${definition.id}`,
         title: definition.title ?? definition.id,
         surface: "app",
-        content: <Element definition={definition} navigation={navigation} session={session} presentation="tiled" />,
+        content: <Element definition={definition} navigation={navigation} session={session} />,
       }))),
   ];
   const selectedEntity = selected?.type === "run-app" ? `app:${selected.id}`