@schlenkr/ragents 0.1.0

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

@@ -0,0 +1,76 @@
+import { useAccess } from "@aicontainer/web/AccessContext";
+import { useCallback, useId, useRef, useState } from "react";
+import { useCanvasController, type SessionContext } from "@aicontainer/web/PluginRegistry";
+import { CodeIcon, UsersIcon } from "lucide-react";
+import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "@aicontainer/web/Toolbar";
+import { cn } from "@aicontainer/web/ui";
+import { FlowInspector, type FlowSelection } from "./FlowInspector";
+import { ActorPopout } from "./ActorPopout";
+import { actorSurface, type RunActor, type RunView } from "./run-view";
+import { useStageEntities } from "./canvas-stage";
+import { 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";
+
+const shortcutFillClass: Readonly<Record<string, string>> = {
+  agent: "bg-glass-agent",
+  primary: "bg-glass-primary",
+  script: "bg-glass-script",
+  app: "bg-glass-app",
+};
+
+export function ActorShortcut({ actor, view, session, open, onToggle, onClose, visible }: {
+  actor: RunActor;
+  view: RunView;
+  session: SessionContext;
+  open: boolean;
+  onToggle: () => void;
+  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);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const panelId = useId();
+  const canvas = useCanvasController();
+  const close = useCallback((restoreFocus = false) => {
+    onClose();
+    if (restoreFocus) buttonRef.current?.focus({ preventScroll: true });
+  }, [onClose]);
+
+  const inspect = (selection: FlowSelection) => {
+    if (!canvas) throw new Error("Der Actor-Zugang benötigt den Canvas-Controller.");
+    canvas.acceptSelection(selection);
+    close();
+  };
+  const surface = actorSurface(view, actor);
+  const label = actor.kind === "agent" ? `Chat mit @${actor.handle}` : `Actor-Ansicht von @${actor.handle}`;
+  const type = !technical ? "Agent" : actor.kind === "agent" ? "LLM-Agent" : "TypeScript-Actor";
+
+  return <div className="flex items-stretch [&[hidden]]:hidden" hidden={!visible}>
+    <ToolbarItem as="button" aria-controls={visited ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog"
+      aria-label={`${actor.displayName || actor.handle}. ${type}: ${label} öffnen`} className="font-bold"
+      data-surface={surface} data-staged={staged || undefined} onClick={() => { setVisited(true); onToggle(); }}
+      draggable={tiled && technical} onDragStart={(event) => {
+        if (!tiled || !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">
+      <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>
+    {visited && <ActorPopout open={open} id={panelId} label={label} closeLabel={`${label} schließen`}
+      buttonRef={buttonRef} keepMounted onClose={close} width={actor.kind === "agent" ? 784 : 560} height={640} role="dialog">
+      <div className="min-h-0 min-w-0 flex-1 overflow-auto overscroll-contain">
+        <FlowInspector actorConversations={session.actorConversations} canGoBack={false} chatSurface="popout" composerVisible
+          conversationError={session.conversationError} onBack={() => {}} onNavigate={inspect}
+          primaryMessages={session.messages} primaryRunning={session.running} selection={{ type: "actor", id: actor.id }} view={view} />
+      </div>
+    </ActorPopout>}
+  </div>;
+}

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

@@ -0,0 +1,22 @@
+import type { CardSectionContribution, EntityReference, SessionContext, SessionNavigation } from "@aicontainer/web/PluginRegistry";
+import { ActorChatPreview } from "./ActorChatPreview";
+import { cardSectionsClass } from "./constants";
+import type { RunActor, RunView } from "./run-view";
+
+export function ActorTile({ actor, view, cardSections, session, navigation, onSelect }: {
+  actor: RunActor;
+  view: RunView;
+  cardSections: readonly CardSectionContribution[];
+  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"}
+      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">
+      {cardSections.map(({ id, Section }) => <Section actor={actor} key={id} navigation={navigation} session={session} />)}
+    </div>
+  </div>;
+}

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

@@ -0,0 +1,14 @@
+import type { CanvasStartupState } from "./canvas-startup";
+
+export function CanvasStartup({ state }: { state: CanvasStartupState }) {
+  return <div className="pointer-events-none absolute inset-y-0 left-0 grid w-[var(--canvas-visible-width,100%)] place-items-center p-6"
+    role={state.kind === "error" ? "alert" : "status"} aria-live="polite">
+    <div className="w-[min(360px,100%)] text-center text-foreground">
+      <strong className={state.kind === "error" ? "text-lg font-semibold text-destructive" : "text-lg font-semibold"}>{state.title}</strong>
+      {state.kind === "working" && <div className="mx-auto mt-5 h-[5px] overflow-hidden rounded-[5px] bg-border" role="progressbar" aria-label={state.title}>
+        <span className="block h-full w-[35%] rounded-[inherit] bg-primary animate-progress-sweep motion-reduce:animate-none motion-reduce:mx-auto" />
+      </div>}
+      <p className="pointer-events-auto mt-3.5 max-h-[30vh] overflow-auto text-[0.82rem] leading-[1.6] text-muted-foreground [overflow-wrap:anywhere]">{state.detail}</p>
+    </div>
+  </div>;
+}

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

@@ -0,0 +1,47 @@
+import { useAccess } from "@aicontainer/web/AccessContext";
+import type { CanvasElementContribution, CardSectionContribution, EntityReference, SessionContext, SessionNavigation } from "@aicontainer/web/PluginRegistry";
+import type { CanvasTileNode } from "../tiled-layout";
+import { ActorTile } from "./ActorTile";
+import { FlowInspector } from "./FlowInspector";
+import { TiledCanvas, type CanvasTileItem } from "./TiledCanvas";
+import { actorSurface, type RunView } from "./run-view";
+
+export function CanvasTiles({ root, onChange, canvasElements, cardSections, session, view, navigation, onSelect, selected }: {
+  root: CanvasTileNode | null;
+  onChange: (root: CanvasTileNode | null) => void;
+  canvasElements: readonly CanvasElementContribution[];
+  cardSections: readonly CardSectionContribution[];
+  session: SessionContext;
+  view: RunView;
+  navigation: SessionNavigation;
+  onSelect: (selection: EntityReference) => void;
+  selected?: EntityReference;
+}) {
+  const inspect = useAccess().can("runs.inspect");
+  const actors = view.actors.filter((actor) => actor.kind !== "human" && actor.lifecycle?.kind !== "stopped"
+    && (inspect || actor.kind === "agent"));
+  const items: CanvasTileItem[] = [
+    ...actors.map((actor): CanvasTileItem => ({
+      entity: `@${actor.handle}`,
+      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} />
+        : <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} />,
+    })),
+    ...canvasElements.flatMap(({ Element, select }) => select(session)
+      .filter((definition) => definition.visible !== false)
+      .map((definition): CanvasTileItem => ({
+        entity: `app:${definition.id}`,
+        title: definition.title ?? definition.id,
+        surface: "app",
+        content: <Element definition={definition} navigation={navigation} session={session} presentation="tiled" />,
+      }))),
+  ];
+  const selectedEntity = selected?.type === "run-app" ? `app:${selected.id}`
+    : selected?.type === "actor" ? actors.find((actor) => actor.id === selected.id)?.handle : undefined;
+  return <TiledCanvas root={root} onChange={onChange} items={items} canArrange={inspect}
+    selectedEntity={selected?.type === "actor" && selectedEntity ? `@${selectedEntity}` : selectedEntity} />;
+}

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

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import { useAccess } from "@aicontainer/web/AccessContext";
+import { Button, Input } from "@aicontainer/web/ui";
+import { ACTOR_CARD_SIZE_LIMITS, DEFAULT_ACTOR_CARD_SIZE, saveActorCardSize, useActorCardSize } from "./card-size-settings";
+
+export function CardSizeSettings() {
+  const access = useAccess();
+  const size = useActorCardSize();
+  const [width, setWidth] = useState(String(size.width));
+  const [height, setHeight] = useState(String(size.height));
+  const [message, setMessage] = useState<string>();
+  const [error, setError] = useState<string>();
+  useEffect(() => { setWidth(String(size.width)); setHeight(String(size.height)); }, [size]);
+  const writable = access.can("settings.write");
+  const save = (next: { width: number; height: number }) => {
+    if (!writable) return;
+    setError(undefined);
+    setMessage(undefined);
+    try {
+      saveActorCardSize(next);
+      setWidth(String(next.width));
+      setHeight(String(next.height));
+      setMessage("Standardgröße gespeichert.");
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    }
+  };
+  return <form className="grid gap-3" onSubmit={(event) => {
+    event.preventDefault(); save({ width: Number(width), height: Number(height) });
+  }}>
+    <p className="text-muted-foreground">Standardgröße der LLM-Karten auf dem Canvas, in Pixeln bei 100 Prozent Zoom. Gilt für alle Runs in diesem Browser. Individuell vergrößerte Karten behalten ihre Größe.</p>
+    <div className="flex flex-wrap items-end gap-3">
+      <label className="grid gap-1.5"><span>Standardbreite</span><Input className="w-[130px]" type="number" required step="1" min={ACTOR_CARD_SIZE_LIMITS.minWidth} max={ACTOR_CARD_SIZE_LIMITS.maxWidth}
+        disabled={!writable} value={width} onChange={(event) => { setWidth(event.target.value); setMessage(undefined); }} /></label>
+      <label className="grid gap-1.5"><span>Standardhöhe</span><Input className="w-[130px]" type="number" required step="1" min={ACTOR_CARD_SIZE_LIMITS.minHeight} max={ACTOR_CARD_SIZE_LIMITS.maxHeight}
+        disabled={!writable} value={height} onChange={(event) => { setHeight(event.target.value); setMessage(undefined); }} /></label>
+      <Button type="submit" disabled={!writable}>Speichern</Button>
+      <Button disabled={!writable} onClick={() => save(DEFAULT_ACTOR_CARD_SIZE)} variant="outline">Zurücksetzen</Button>
+    </div>
+    {error ? <p className="text-muted-foreground" role="alert">{error}</p> : message && <p className="text-muted-foreground" role="status">{message}</p>}
+  </form>;
+}