@schlenkr/ragents 0.1.0

package/plugins/ragents.orchestration/web/column/RunColumn.tsx

@@ -0,0 +1,370 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type PointerEvent, type ReactNode, type RefObject } from "react";
+import { createPortal } from "react-dom";
+import { ArrowUpRightIcon, LayoutGridIcon, Maximize2Icon, PanelBottomIcon, PanelRightIcon } from "lucide-react";
+import { useAccess } from "@aicontainer/web/AccessContext";
+import { ChatPanel } from "@aicontainer/web/chat/ChatPanel";
+import { runIsWorking } from "@aicontainer/web/chat/chat-target";
+import { useCenterElements, useColumnHost } from "@aicontainer/web/column/host";
+import type { CanvasCenterContext, CanvasElementContribution, CanvasElementDefinition, CardSectionContribution, SessionContext, SessionNavigation } from "@aicontainer/web/PluginRegistry";
+import { Button, cn, Spinner } from "@aicontainer/web/ui";
+import { useOptionalActorPrograms } from "@aicontainer/plugins/ragents.actor-programs/web/context";
+import { pendingConfirmationFor } from "@aicontainer/plugins/ragents.actor-programs/web/AppsPanel";
+import { ActorChat } from "../ActorChat";
+import { ActorChatControls } from "../ActorChatControls";
+import { useActorHeaderMode } from "../actor-header-settings";
+import { actorVisibleOnCanvas, saveCanvasViewPreferences, useCanvasViewPreferences } from "../canvas-view-settings";
+import { cardSectionsClass } from "../constants";
+import type { FlowSelection } from "../FlowInspector";
+import { runViewFrom, type RunActor, type RunView } from "../run-view";
+import { AddresseeControl } from "./AddresseeControl";
+import { columnActors, elementNeedsAttention, partitionColumnActors } from "./column-actors";
+import { useColumnSettings } from "./column-settings";
+import { clampChatWidth, saveColumnState, useColumnState, type ColumnState } from "./column-state";
+import { sheetStatus } from "./sheet-status";
+
+/** Wie der Chat zur Mini-App liegt: allein, daneben oder als Sheet darüber. */
+type ChatLayout = "full" | "side" | "floating";
+
+const SHEET_HEIGHT = "90%";
+const SHEET_BLUR_DELAY = 220;
+
+const chipRowClass = "flex flex-none flex-wrap items-center gap-1.5 border-b border-border bg-shell px-2 py-1.5";
+const chipClass = "flex h-7 max-w-[200px] flex-none cursor-pointer items-center gap-1.5 rounded-full border border-border bg-card pr-2 pl-1 text-[0.72rem] font-semibold text-foreground hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:outline-offset-1 aria-pressed:border-primary aria-pressed:bg-primary/10";
+const chatLayoutClass: Readonly<Record<ChatLayout, string>> = {
+  full: "relative flex min-h-0 min-w-0 flex-1 flex-col",
+  side: "relative flex min-h-0 min-w-0 flex-col",
+  floating: "absolute inset-x-2.5 bottom-0 z-20 flex flex-col overflow-hidden rounded-t-2xl border border-b-0 border-transparent bg-transparent transition-[height,box-shadow,background-color,border-color] duration-300 ease-[cubic-bezier(.32,.72,0,1)] data-expanded:border-border data-expanded:bg-card data-expanded:shadow-[0_-16px_60px_#00000080] motion-reduce:transition-none",
+};
+const chatSurfaceClass = "rounded-none border-0 bg-transparent";
+
+interface ColumnElement {
+  Element: CanvasElementContribution["Element"];
+  definition: CanvasElementDefinition;
+}
+
+export function OrchestrationColumn(props: CanvasCenterContext) {
+  return <RunColumn key={props.session.session.id} {...props} />;
+}
+
+function RunColumn({ canvasElements, cardSections, navigation, renderChat, session, toolbarContainer }: CanvasCenterContext) {
+  const runId = session.session.id;
+  const inspect = useAccess().can("runs.inspect");
+  const host = useColumnHost();
+  const view = runViewFrom(session.runView);
+  const stored = useColumnState(runId);
+  const centered = useCenterElements(runId);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const sheetRef = useRef<HTMLElement>(null);
+  const grabRef = useRef<HTMLButtonElement>(null);
+  const statusRef = useRef<HTMLButtonElement>(null);
+  const [chatWidth, setChatWidth] = useState(stored.chatWidth);
+  const [width, setWidth] = useState(0);
+  const [addresseeOpen, setAddresseeOpen] = useState(false);
+  const settings = useColumnSettings();
+  useEffect(() => setChatWidth(stored.chatWidth), [stored.chatWidth]);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, []);
+  const save = useCallback((patch: Partial<ColumnState>) => saveColumnState(runId, { ...stored, ...patch }), [runId, stored]);
+  const elements = useMemo<ColumnElement[]>(() => canvasElements.flatMap(({ Element, select }) => select(session)
+    .filter((definition) => definition.visible !== false)
+    .map((definition) => ({ Element, definition }))), [canvasElements, session]);
+  const selectedElement = elements.find((entry) => entry.definition.id === stored.element) ?? elements[0];
+  const actors = useMemo(() => view ? columnActors(view, inspect) : [], [inspect, view]);
+  const mode = useActorHeaderMode(runId);
+  const preferences = useCanvasViewPreferences(runId);
+  const appActorIds = useMemo(() => new Set(elements.flatMap(({ definition }) => definition.anchorActorId ? [definition.anchorActorId] : [])), [elements]);
+  const primaryId = view?.primaryActorId;
+  const selectedActor = actors.find((actor) => actor.id === stored.actor) ?? actors.find((actor) => actor.id === primaryId) ?? actors[0];
+  const { shown, hidden } = useMemo(() => partitionColumnActors(actors, {
+    mode,
+    primaryId,
+    selectedId: selectedActor?.id,
+    onStage: (actor) => actor.id === primaryId || actorVisibleOnCanvas(actor, appActorIds, preferences, primaryId),
+  }), [actors, appActorIds, mode, preferences, primaryId, selectedActor?.id]);
+  const availableWidth = () => rootRef.current?.clientWidth ?? Number.POSITIVE_INFINITY;
+  const selectActor = useCallback((actor: RunActor) => save({ actor: actor.id }), [save]);
+  const revealActor = useCallback((actor: RunActor) => {
+    saveCanvasViewPreferences(runId, { ...preferences, actorVisibility: { ...preferences.actorVisibility, [actor.id]: true } });
+    save({ actor: actor.id });
+  }, [preferences, runId, save]);
+  const navigate = useCallback((selection: FlowSelection) => {
+    const actor = selection.type === "actor" ? actors.find((entry) => entry.id === selection.id) : undefined;
+    if (actor) selectActor(actor);
+  }, [actors, selectActor]);
+  const primarySelected = selectedActor === undefined || selectedActor.id === primaryId;
+  const narrow = width < settings.sideWidth;
+  const layout: ChatLayout = !selectedElement ? "full" : !narrow && stored.chat === "side" ? "side" : "floating";
+  const sheet = useSheet(layout === "floating", sheetRef, addresseeOpen, settings.openDelay);
+  const peek = useSheetPeek(layout === "floating", sheetRef, grabRef, statusRef, selectedActor?.id);
+  const scrollerRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (layout !== "floating" || !sheet.expanded) return;
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const toBottom = () => { scroller.scrollTop = scroller.scrollHeight; };
+    toBottom();
+    const timer = window.setTimeout(toBottom, 320);
+    return () => window.clearTimeout(timer);
+  }, [layout, sheet.expanded]);
+  const status = useMemo(() => {
+    if (layout !== "floating" || !selectedActor) return undefined;
+    const messages = primarySelected ? session.messages : session.actorConversations?.[selectedActor.id] ?? [];
+    const working = primarySelected ? session.connected && (session.running || runIsWorking(session.runView, runId)) : selectedActor.lifecycle?.kind === "running";
+    return sheetStatus(messages, working, selectedActor.handle);
+  }, [layout, primarySelected, runId, selectedActor, session.actorConversations, session.connected, session.messages, session.runView, session.running]);
+
+  const addressee = view && selectedActor && <AddresseeControl
+    hidden={hidden}
+    onOpenChange={setAddresseeOpen}
+    onReveal={revealActor}
+    onSelect={selectActor}
+    runId={runId}
+    selected={selectedActor}
+    shown={shown}
+    technical={inspect}
+    view={view}
+  />;
+  const layoutToggle = layout !== "full" && toolbarContainer && createPortal(<Button
+    aria-label={narrow ? "Chat bleibt unten" : stored.chat === "side" ? "Chat nach unten legen" : "Chat nach rechts legen"}
+    className="self-center"
+    disabled={narrow}
+    onClick={() => save({ chat: stored.chat === "side" ? "bottom" : "side" })}
+    size="icon-lg"
+    title={narrow ? `Chat bleibt unten, solange das Panel schmaler als ${settings.sideWidth} Pixel ist` : stored.chat === "side" ? "Chat nach unten legen" : "Chat nach rechts legen"}
+    variant="ghost"
+  >{!narrow && stored.chat === "side" ? <PanelBottomIcon /> : <PanelRightIcon />}</Button>, toolbarContainer);
+  const chat = primarySelected || !view || !selectedActor
+    ? renderChat({ chatElementClassName: chatSurfaceClass, chatScrollerRef: (element) => { scrollerRef.current = element; }, toolbarLeft: addressee })
+    : <ActorColumnChat actor={selectedActor} cardSections={cardSections} navigation={navigation} onNavigate={navigate} session={session} toolbarLeft={addressee} view={view} />;
+
+  return <div className="flex min-h-0 min-w-0 flex-1 flex-col" data-column="run" ref={rootRef}>
+    {layoutToggle}
+    {elements.length > 1 && <nav aria-label="Mini-Apps des Runs" className={chipRowClass}>
+      {elements.map(({ definition }) => <ElementChip
+        centered={centered.has(definition.id)}
+        definition={definition}
+        key={definition.id}
+        onSelect={() => centered.has(definition.id)
+          ? host.openInCenter(runId, definition.id, definition.title ?? definition.id)
+          : save({ element: definition.id })}
+        selected={definition.id === selectedElement?.definition.id}
+        session={session}
+        view={view}
+      />)}
+    </nav>}
+    <div className={cn("relative min-h-0 min-w-0 flex-1", layout === "side" ? "grid" : "flex flex-col")} data-chat-layout={layout} style={layout === "side" ? { gridTemplateColumns: `minmax(0,1fr) auto ${chatWidth}px` } : undefined}>
+      {selectedElement && <ColumnStage centered={centered.has(selectedElement.definition.id)} element={selectedElement} navigation={navigation} peek={layout === "floating" ? peek : 0} runId={runId} session={session} />}
+      {layout === "side" && <Sash
+        onChange={(next) => setChatWidth(clampChatWidth(next, availableWidth()))}
+        onCommit={(next) => save({ chatWidth: clampChatWidth(next, availableWidth()) })}
+        value={chatWidth}
+      />}
+      {layout === "floating" && <div
+        aria-hidden
+        className="absolute inset-0 z-[15] bg-black/25 opacity-0 transition-opacity duration-300 pointer-events-none data-expanded:pointer-events-auto data-expanded:opacity-100 motion-reduce:transition-none dark:bg-black/45"
+        data-expanded={sheet.expanded || undefined}
+        onClick={sheet.close}
+      />}
+      <section
+        aria-label="Chat"
+        className={chatLayoutClass[layout]}
+        data-expanded={layout === "floating" && sheet.expanded ? true : undefined}
+        data-view={primarySelected ? "chat" : "actor-chat"}
+        onBlurCapture={layout === "floating" ? () => sheet.closeLater(SHEET_BLUR_DELAY) : undefined}
+        onFocusCapture={layout === "floating" ? sheet.open : undefined}
+        onPointerEnter={layout === "floating" ? (event) => { if (event.pointerType === "mouse") sheet.openLater(); } : undefined}
+        onPointerLeave={layout === "floating" ? () => sheet.closeLater(settings.closeDelay) : undefined}
+        ref={sheetRef}
+        style={layout === "floating" ? { height: sheet.expanded ? SHEET_HEIGHT : peek } : undefined}
+      >
+        {layout === "floating" && <button
+          aria-expanded={sheet.expanded}
+          aria-label={sheet.expanded ? "Chat absenken" : "Chat hochschieben"}
+          className="flex h-[18px] w-full flex-none cursor-pointer items-center justify-center [&:hover>span]:bg-foreground focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2"
+          onClick={sheet.toggle}
+          ref={grabRef}
+          title={sheet.expanded ? "Chat absenken" : "Chat hochschieben"}
+          type="button"
+        ><span aria-hidden className="h-1 w-9 rounded-full bg-border-strong transition-colors" /></button>}
+        {status && <button
+          className={cn("flex h-6 w-full flex-none cursor-pointer items-center gap-2 px-4 text-left text-[0.7rem] transition-opacity duration-200 in-data-expanded:pointer-events-none in-data-expanded:opacity-0 motion-reduce:transition-none", status.kind === "question" ? "text-warning" : "text-muted-foreground")}
+          onClick={sheet.toggle}
+          ref={statusRef}
+          title={status.text}
+          type="button"
+        >
+          {status.kind === "working" && <Spinner aria-hidden className="size-3 flex-none" />}
+          <span className="truncate">{status.text}</span>
+        </button>}
+        {chat}
+      </section>
+    </div>
+  </div>;
+}
+
+/** Das Sheet: Maus, Fokus oder der Griff schieben es hoch; Escape, die Bühne oder der Griff senken es. Ein offenes Pop-out hält es oben. */
+function useSheet(active: boolean, sheetRef: RefObject<HTMLElement | null>, blocked: boolean, openDelay: number) {
+  const [expanded, setExpanded] = useState(false);
+  const [held, setHeld] = useState(false);
+  const guard = useRef({ held, blocked });
+  const timer = useRef<number>(undefined);
+  useEffect(() => { guard.current = { held, blocked }; }, [blocked, held]);
+  const cancel = useCallback(() => window.clearTimeout(timer.current), []);
+  const open = useCallback(() => { cancel(); setExpanded(true); }, [cancel]);
+  const openLater = useCallback(() => { cancel(); timer.current = window.setTimeout(() => setExpanded(true), openDelay); }, [cancel, openDelay]);
+  const closeLater = useCallback((delay: number) => {
+    cancel();
+    timer.current = window.setTimeout(() => {
+      if (guard.current.held || guard.current.blocked || sheetRef.current?.contains(document.activeElement)) return;
+      setExpanded(false);
+    }, delay);
+  }, [cancel, sheetRef]);
+  const close = useCallback(() => {
+    cancel();
+    setHeld(false);
+    setExpanded(false);
+    if (document.activeElement instanceof HTMLElement && sheetRef.current?.contains(document.activeElement)) document.activeElement.blur();
+  }, [cancel, sheetRef]);
+  const toggle = useCallback(() => {
+    if (expanded) { close(); return; }
+    setHeld(true);
+    open();
+  }, [close, expanded, open]);
+  useEffect(() => { if (!active) close(); }, [active, close]);
+  useEffect(() => cancel, [cancel]);
+  useEffect(() => {
+    if (!active || !expanded) return;
+    const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape" && !guard.current.blocked) close(); };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [active, close, expanded]);
+  return { expanded, open, openLater, closeLater, close, toggle };
+}
+
+/** Die Höhe des zugeschobenen Sheets: Griff, Statuszeile und Eingabe, gemessen an der Eingabe des Chat-Rahmens. */
+function useSheetPeek(active: boolean, sheetRef: RefObject<HTMLElement | null>, grabRef: RefObject<HTMLButtonElement | null>, statusRef: RefObject<HTMLButtonElement | null>, actorId: string | undefined) {
+  const [peek, setPeek] = useState(0);
+  useLayoutEffect(() => {
+    if (!active) return;
+    const grab = grabRef.current;
+    const status = statusRef.current;
+    const composer = sheetRef.current?.querySelector<HTMLElement>('[data-chat="composer"]');
+    if (!grab || !status || !composer) throw new Error("Das Sheet des Panels findet Griff, Statuszeile oder Eingabe nicht.");
+    const measure = () => setPeek(grab.offsetHeight + status.offsetHeight + composer.offsetHeight);
+    const observer = new ResizeObserver(measure);
+    observer.observe(composer);
+    measure();
+    return () => observer.disconnect();
+  }, [active, actorId, grabRef, sheetRef, statusRef]);
+  return peek;
+}
+
+function ElementChip({ centered, definition, onSelect, selected, session, view }: {
+  centered: boolean;
+  definition: CanvasElementDefinition;
+  onSelect: () => void;
+  selected: boolean;
+  session: SessionContext;
+  view: RunView | undefined;
+}) {
+  const programs = useOptionalActorPrograms();
+  const app = programs?.listing?.apps.find((candidate) => candidate.id === definition.id);
+  const title = definition.title ?? definition.id;
+  const attention = elementNeedsAttention(view, definition, app !== undefined && pendingConfirmationFor(session, app) !== undefined);
+  return <button aria-pressed={selected && !centered} className={chipClass} data-surface="app" onClick={onSelect} title={centered ? `${title} liegt in der Mitte. Klick holt das Fenster nach vorn.` : `Mini-App ${title} anzeigen`} type="button">
+    <span className="grid size-5 flex-none place-items-center rounded-full bg-glass-app text-foreground [&>svg]:size-3"><LayoutGridIcon /></span>
+    <span className="truncate">{title}</span>
+    {attention && <span aria-label="Antwort erwartet" className="grid size-4 flex-none place-items-center rounded-full bg-warning text-[0.62rem] font-bold text-background" role="img">!</span>}
+    {centered && <ArrowUpRightIcon aria-hidden className="size-3 flex-none text-muted-foreground" />}
+  </button>;
+}
+
+function ColumnStage({ centered, element, navigation, peek, runId, session }: {
+  centered: boolean;
+  element: ColumnElement;
+  navigation: SessionNavigation;
+  peek: number;
+  runId: string;
+  session: SessionContext;
+}) {
+  const host = useColumnHost();
+  const programs = useOptionalActorPrograms();
+  const { Element, definition } = element;
+  const title = definition.title ?? definition.id;
+  return <section aria-label={`Mini-App ${title}`} className="group/stage relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-card/55" style={peek > 0 ? { paddingBottom: peek } : undefined}>
+    <div className="absolute top-1.5 right-2 z-[5] flex gap-0.5 rounded-lg border border-border bg-card p-0.5 opacity-0 transition-opacity group-hover/stage:opacity-100 group-focus-within/stage:opacity-100 motion-reduce:transition-none">
+      {host.kind === "vscode"
+        ? <Button aria-label={`${title} in die Mitte legen`} onClick={() => host.openInCenter(runId, definition.id, title)} size="icon-sm" title="In die Mitte legen" variant="ghost"><ArrowUpRightIcon /></Button>
+        : programs && <Button aria-label={`${title} in Vollansicht öffnen`} onClick={() => programs.openFullscreen(definition.id)} size="icon-sm" title="Vollansicht" variant="ghost"><Maximize2Icon /></Button>}
+    </div>
+    <div className="relative flex min-h-0 flex-1 flex-col" data-column="stage">
+      {centered
+        ? <div className="m-auto grid gap-3 p-4 text-center text-[0.76rem] text-muted-foreground" role="status">
+          <span>{title} liegt in der Mitte.</span>
+          <Button onClick={() => host.returnToColumn(runId, definition.id)} size="sm" variant="outline">Zurück ins Panel</Button>
+        </div>
+        : <Element definition={definition} navigation={navigation} presentation="tiled" session={session} />}
+    </div>
+  </section>;
+}
+
+/** Der senkrechte Griff zwischen Bühne und Chat daneben; ziehen nach links macht den Chat breiter. */
+function Sash({ onChange, onCommit, value }: { onChange: (next: number) => void; onCommit: (next: number) => void; value: number }) {
+  const drag = useRef<{ startX: number; startWidth: number }>(undefined);
+  const finish = (event: PointerEvent<HTMLDivElement>) => {
+    if (!drag.current) return;
+    drag.current = undefined;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    onCommit(value);
+  };
+  return <div
+    aria-label="Breite des Chats"
+    aria-orientation="vertical"
+    aria-valuenow={value}
+    className="flex w-2.5 flex-none cursor-col-resize touch-none items-center justify-center border-r border-l border-border bg-shell select-none hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2"
+    onKeyDown={(event) => {
+      const step = event.key === "ArrowRight" ? -24 : event.key === "ArrowLeft" ? 24 : 0;
+      if (step === 0) return;
+      event.preventDefault();
+      onChange(value + step);
+      onCommit(value + step);
+    }}
+    onPointerCancel={finish}
+    onPointerDown={(event) => {
+      drag.current = { startX: event.clientX, startWidth: value };
+      event.currentTarget.setPointerCapture(event.pointerId);
+    }}
+    onPointerMove={(event) => { if (drag.current) onChange(drag.current.startWidth + drag.current.startX - event.clientX); }}
+    onPointerUp={finish}
+    role="separator"
+    tabIndex={0}
+  >
+    <span aria-hidden className="h-10 w-1 rounded-full bg-border-strong" />
+  </div>;
+}
+
+function ActorColumnChat({ actor, cardSections, navigation, onNavigate, session, toolbarLeft, view }: {
+  actor: RunActor;
+  cardSections: readonly CardSectionContribution[];
+  navigation: SessionNavigation;
+  onNavigate: (selection: FlowSelection) => void;
+  session: SessionContext;
+  toolbarLeft: ReactNode;
+  view: RunView;
+}) {
+  const running = actor.lifecycle?.kind === "running";
+  return <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+    <div className={`${cardSectionsClass} max-h-[40%] flex-none overflow-auto overscroll-contain border-t-0 border-b`} data-slot="card-sections">
+      {cardSections.map(({ id, Section }) => <Section actor={actor} key={id} navigation={navigation} session={session} />)}
+    </div>
+    <ChatPanel className="flex-1" composer={<ActorChatControls actor={actor} presentation="column" running={running} surface="column" toolbarLeft={toolbarLeft} view={view} />}>
+      <ActorChat actor={actor} conversation={session.actorConversations?.[actor.id]} historyError={session.conversationError} onNavigate={onNavigate}
+        presentation="inspector" primaryMessages={session.messages} running={running} surface="column" view={view} />
+    </ChatPanel>
+  </div>;
+}

package/plugins/ragents.orchestration/web/column/column-actors.ts

@@ -0,0 +1,38 @@
+import type { CanvasElementDefinition } from "@aicontainer/web/PluginRegistry";
+import { actorVisibleInHeader, type ActorHeaderMode } from "../actor-header-settings";
+import type { RunActor, RunView } from "../run-view";
+
+/** Die Actors der Chip-Reihe: Koordinator zuerst, dann in Anlegereihenfolge; ohne Prüfrecht nur LLM-Agenten. */
+export const columnActors = (view: RunView, inspect: boolean): RunActor[] => {
+  const candidates = view.actors.filter((actor) => actor.kind !== "human" && (inspect || actor.kind === "agent"));
+  const primary = candidates.filter((actor) => actor.id === view.primaryActorId);
+  return [...primary, ...candidates.filter((actor) => actor.id !== view.primaryActorId)];
+};
+
+export interface ColumnActorFilter {
+  mode: ActorHeaderMode;
+  onStage: (actor: RunActor) => boolean;
+  primaryId: string | null | undefined;
+  selectedId: string | undefined;
+}
+
+/** Sichtbar nach der Actor-Anzeige des Canvas; der Koordinator und der gewählte Actor bleiben immer als Chip da. */
+export const partitionColumnActors = (actors: readonly RunActor[], filter: ColumnActorFilter): { shown: RunActor[]; hidden: RunActor[] } => {
+  const shown: RunActor[] = [];
+  const hidden: RunActor[] = [];
+  for (const actor of actors) {
+    const pinned = actor.id === filter.primaryId || actor.id === filter.selectedId;
+    (pinned || actorVisibleInHeader(actor, filter.mode, filter.onStage(actor)) ? shown : hidden).push(actor);
+  }
+  return { shown, hidden };
+};
+
+export const pendingInputCount = (view: RunView, actorId: string): number =>
+  view.inputs.filter((input) => input.actorId === actorId && input.lifecycle.kind === "pending").length;
+
+export const pendingQuestionCount = (view: RunView, askedBy: string): number =>
+  view.actions.filter((action) => action.kind === "question" && action.status === "pending" && action.askedBy === askedBy).length;
+
+/** Ein Chip trägt ein Ausrufezeichen, wenn eine Host-Bestätigung oder eine Rückfrage des Actors auf eine Antwort wartet. */
+export const elementNeedsAttention = (view: RunView | undefined, definition: CanvasElementDefinition, confirmationPending: boolean): boolean =>
+  confirmationPending || (view !== undefined && definition.anchorActorId !== undefined && pendingQuestionCount(view, definition.anchorActorId) > 0);

package/plugins/ragents.orchestration/web/column/column-settings.ts

@@ -0,0 +1,47 @@
+import { createLocalStorageSetting } from "@aicontainer/web/lib/local-storage-setting";
+
+/** Verhalten der Arbeitsspalte: ab welcher Breite der Chat neben der Mini-App liegt und wie das Sheet auf die Maus reagiert. */
+export interface ColumnSettings {
+  sideWidth: number;
+  openDelay: number;
+  closeDelay: number;
+}
+
+export const DEFAULT_COLUMN_SETTINGS: ColumnSettings = Object.freeze({ sideWidth: 900, openDelay: 160, closeDelay: 150 });
+export const COLUMN_SETTINGS_STORAGE_KEY = "ragents.orchestration.column-settings";
+export const COLUMN_SETTINGS_LIMITS = Object.freeze({
+  sideWidth: { min: 400, max: 4000 },
+  openDelay: { min: 0, max: 5000 },
+  closeDelay: { min: 0, max: 10000 },
+});
+
+const inRange = (value: unknown, range: { min: number; max: number }): value is number =>
+  typeof value === "number" && Number.isInteger(value) && value >= range.min && value <= range.max;
+
+export function parseColumnSettings(raw: string | null): ColumnSettings {
+  if (raw === null) return DEFAULT_COLUMN_SETTINGS;
+  const value: unknown = JSON.parse(raw);
+  if (!value || typeof value !== "object" || Array.isArray(value)
+    || Object.keys(value).some((key) => !["sideWidth", "openDelay", "closeDelay"].includes(key))
+    || !("sideWidth" in value) || !inRange(value.sideWidth, COLUMN_SETTINGS_LIMITS.sideWidth)
+    || !("openDelay" in value) || !inRange(value.openDelay, COLUMN_SETTINGS_LIMITS.openDelay)
+    || !("closeDelay" in value) || !inRange(value.closeDelay, COLUMN_SETTINGS_LIMITS.closeDelay)) {
+    throw new Error("Die Einstellungen der Arbeitsspalte sind ungültig: Breite 400 bis 4000 Pixel, Verzögerungen 0 bis 5000 beziehungsweise 10000 Millisekunden, ganze Zahlen.");
+  }
+  return value as ColumnSettings;
+}
+
+const setting = createLocalStorageSetting({
+  changeEvent: "ragents-column-settings-change",
+  matchesKey: (key) => key === COLUMN_SETTINGS_STORAGE_KEY,
+  parse: parseColumnSettings,
+  serialize: JSON.stringify,
+});
+
+export function useColumnSettings(): ColumnSettings {
+  return setting.useValue(COLUMN_SETTINGS_STORAGE_KEY);
+}
+
+export function saveColumnSettings(value: ColumnSettings) {
+  setting.save(COLUMN_SETTINGS_STORAGE_KEY, value);
+}

package/plugins/ragents.orchestration/web/column/column-state.ts

@@ -0,0 +1,59 @@
+import { createLocalStorageSetting } from "@aicontainer/web/lib/local-storage-setting";
+
+/** Wo der Chat liegt, wenn die Spalte breit genug ist; darunter liegt er immer unten als Sheet. */
+export type ColumnChatMode = "side" | "bottom";
+
+/** Persönlicher Zustand der Arbeitsspalte je Run: gewählte Mini-App, gewählter Actor, Chat-Lage und Chatbreite daneben. */
+export interface ColumnState {
+  element: string | null;
+  actor: string | null;
+  chat: ColumnChatMode;
+  chatWidth: number;
+}
+
+export const CHAT_MIN_WIDTH = 280;
+export const CHAT_DEFAULT_WIDTH = 380;
+/** Neben dem Chat bleibt immer Platz für ein Stück Mini-App. */
+export const STAGE_MIN_WIDTH = 300;
+
+export const DEFAULT_COLUMN_STATE: ColumnState = Object.freeze({ element: null, actor: null, chat: "side", chatWidth: CHAT_DEFAULT_WIDTH });
+
+export const columnStorageKey = (runId: string) => `ragents.orchestration.column:${runId}`;
+
+const isTextOrNull = (value: unknown): value is string | null => value === null || typeof value === "string";
+/** Frühere Zustände kannten `auto`, `floating` und `docked` sowie eine Bühnenhöhe; sie werden auf die zwei Lagen abgebildet. */
+const chatModeOf = (value: unknown): ColumnChatMode | undefined =>
+  value === undefined || value === "side" || value === "auto" ? "side" : value === "bottom" || value === "floating" || value === "docked" ? "bottom" : undefined;
+
+export function parseColumnState(raw: string | null): ColumnState {
+  if (raw === null) return DEFAULT_COLUMN_STATE;
+  const value: unknown = JSON.parse(raw);
+  if (!value || typeof value !== "object" || Array.isArray(value)
+    || Object.keys(value).some((key) => !["element", "stageHeight", "actor", "chat", "chatWidth"].includes(key))
+    || !("element" in value) || !isTextOrNull(value.element)
+    || !("actor" in value) || !isTextOrNull(value.actor)
+    || chatModeOf("chat" in value ? value.chat : undefined) === undefined
+    || ("chatWidth" in value && (typeof value.chatWidth !== "number" || !Number.isFinite(value.chatWidth) || value.chatWidth < CHAT_MIN_WIDTH))) {
+    throw new Error("Der gespeicherte Panelzustand ist ungültig.");
+  }
+  const stored = value as { element: string | null; actor: string | null; chat?: unknown; chatWidth?: number };
+  return { element: stored.element, actor: stored.actor, chat: chatModeOf(stored.chat) ?? "side", chatWidth: stored.chatWidth ?? CHAT_DEFAULT_WIDTH };
+}
+
+export const clampChatWidth = (width: number, available: number): number =>
+  Math.max(CHAT_MIN_WIDTH, Math.min(Math.round(width), Math.max(CHAT_MIN_WIDTH, available - STAGE_MIN_WIDTH)));
+
+const setting = createLocalStorageSetting({
+  changeEvent: "ragents-column-change",
+  matchesKey: (key) => key.startsWith("ragents.orchestration.column:"),
+  parse: parseColumnState,
+  serialize: JSON.stringify,
+});
+
+export function useColumnState(runId: string): ColumnState {
+  return setting.useValue(columnStorageKey(runId));
+}
+
+export function saveColumnState(runId: string, state: ColumnState) {
+  setting.save(columnStorageKey(runId), state);
+}

package/plugins/ragents.orchestration/web/column/sheet-status.ts

@@ -0,0 +1,30 @@
+import type { Message } from "@aicontainer/web/chat/types";
+
+/** Die eine Zeile des zugeschobenen Sheets: was der Chat gerade tut oder zuletzt gesagt hat. */
+export interface SheetStatus {
+  text: string;
+  kind: "idle" | "working" | "question";
+}
+
+const firstLine = (text: string, limit = 160): string => {
+  const line = text.trim().split(/\r?\n/).find((entry) => entry.trim() !== "") ?? "";
+  return line.length > limit ? `${line.slice(0, limit - 1)}…` : line;
+};
+
+const senderOf = (message: Message, handle: string): string =>
+  message.role === "user" ? "Du" : message.sender ?? `@${handle}`;
+
+export function sheetStatus(messages: readonly Message[], working: boolean, handle: string): SheetStatus {
+  const last = messages[messages.length - 1];
+  const question = [...messages].reverse().find((message) => message.role === "question" && !message.closed);
+  if (question) return { kind: "question", text: `Rückfrage: ${firstLine(question.text) || "Antwort erwartet"}` };
+  if (working) {
+    if (last?.role === "thinking" && !last.closed) return { kind: "working", text: `@${handle} denkt ...` };
+    if (last?.role === "tool" && last.tool && last.tool.result === undefined) return { kind: "working", text: `@${handle} nutzt ${last.tool.name} ...` };
+    if (last?.role === "assistant" && !last.closed && last.text.trim() !== "") return { kind: "working", text: `${senderOf(last, handle)} antwortet: ${firstLine(last.text)}` };
+    return { kind: "working", text: `@${handle} arbeitet ...` };
+  }
+  const spoken = [...messages].reverse().find((message) => (message.role === "user" || message.role === "assistant") && message.text.trim() !== "");
+  if (!spoken) return { kind: "idle", text: "Noch keine Nachrichten." };
+  return { kind: "idle", text: `${senderOf(spoken, handle)}: ${firstLine(spoken.text)}` };
+}

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

@@ -0,0 +1,10 @@
+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";
+
+export const statusOutputClass = "flex h-full min-w-14 items-center justify-center self-stretch whitespace-nowrap px-2.5 font-mono text-[0.7rem] tabular-nums text-muted-foreground";
+
+/** Rahmen für die Plugin-Beiträge einer Actor-Karte; ein Beitrag bringt keine eigenen Abstaende mit. */
+export const cardSectionsClass = "grid gap-2.5 border-t border-border-soft px-3 pt-2.5 pb-2.5 empty:hidden";

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

@@ -0,0 +1,25 @@
+import type { RunActor, RunView } from "./run-view";
+
+export type {
+  RunAction,
+  RunActor,
+  RunActorInput,
+  RunArtifact,
+  RunSubscription,
+  RunTurn,
+  RunView,
+} from "./run-view";
+export { runArtifactContentUrl, runViewFrom } from "./run-view";
+
+export const runActorFrom = (value: unknown): RunActor => {
+  const actor = value as RunActor | undefined;
+  if (typeof actor?.id !== "string" || typeof actor.handle !== "string") {
+    throw new Error("Der Karten-Kontext enthält keinen Actor der Laufansicht");
+  }
+  return actor;
+};
+
+export const actorPluginState = (view: RunView, pluginId: string, actorId: string): unknown =>
+  view.pluginStates
+    .find((entry) => entry.pluginId === pluginId && entry.scope.kind === "actor" && entry.scope.actorId === actorId)
+    ?.state;