@schlenkr/ragents 0.1.5 → 0.1.6

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

@@ -1,54 +1,49 @@
-import { useAccess } from "@aicontainer/web/AccessContext";
+import { useAccess } from "@ragents/web/AccessContext";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { CanvasTiles } from "./CanvasTiles";
-import type { CanvasTileNode } from "../tiled-layout";
-import { CanvasStartup } from "./CanvasStartup";
-import { canvasStartupState } from "./canvas-startup";
+import { SurfaceTiles } from "./SurfaceTiles";
+import type { SurfaceTileNode } from "../tiled-layout";
+import { SurfaceStartup } from "./SurfaceStartup";
+import { surfaceStartupState } from "./surface-startup";
 import { tileEntities } from "./tile-docking";
-import { publishStageEntities } from "./canvas-stage";
-import { initialTileLayout, saveCanvasPresentation, useCanvasPresentation } from "./tiled-view-settings";
-import { StatusGroup } from "@aicontainer/web/StatusGroup";
-import { ORCHESTRATION_TAB_ID, statusControlClass } from "./constants";
-import { runViewFrom } from "./run-view";
-import { ActorCanvasControls, ActorHeaderModeControl } from "./ActorCanvasControls";
-import { actorVisibleOnCanvas, saveCanvasViewPreferences, useCanvasViewPreferences } from "./canvas-view-settings";
-import { useCanvasController, type CanvasCenterContext, type EntityReference } from "@aicontainer/web/PluginRegistry";
+import { publishSurfaceEntities } from "./surface-entities";
+import { initialTileLayout, saveSurfacePresentation, useSurfacePresentation } from "./tiled-view-settings";
+import { StatusGroup } from "@ragents/web/StatusGroup";
+import { statusControlClass } from "./constants";
+import { runViewFrom } from "@ragents/web/run-view";
+import { ActorSurfaceControls, ActorHeaderModeControl } from "./ActorSurfaceControls";
+import { actorVisibleOnSurface, saveSurfaceViewPreferences, useSurfaceViewPreferences } from "./surface-view-settings";
+import { useSurfaceController, type SurfaceCenterContext, type EntityReference } from "@ragents/web/PluginRegistry";
 
-export function OrchestrationCenter(props: CanvasCenterContext) {
+export function OrchestrationCenter(props: SurfaceCenterContext) {
   return <RunOrchestrationCenter key={props.session.session.id} {...props} />;
 }
 
 function RunOrchestrationCenter({
   cardSections,
-  canvasElements,
+  surfaceElements,
   navigation,
-  onCenterModeChange,
   session,
   statusContainer,
   runToolbarContainer,
-}: CanvasCenterContext) {
+}: SurfaceCenterContext) {
   const inspect = useAccess().can("runs.inspect");
-  const canvas = useCanvasController();
-  if (canvas?.tabId !== ORCHESTRATION_TAB_ID) {
-    throw new Error("Canvas-Beitrag und Canvas-Provider passen nicht zusammen");
-  }
+  const surface = useSurfaceController();
+  if (!surface) throw new Error("Die Fläche braucht den Flächen-Controller des Orchestrierungs-Plugins.");
   const lastRunView = useRef<ReturnType<typeof runViewFrom>>(undefined);
   const parsedRunView = runViewFrom(session.runView);
   if (parsedRunView !== undefined) lastRunView.current = parsedRunView;
   const runView = parsedRunView ?? lastRunView.current;
-  const { programLayout, personalLayout, presentation, programBasis } = useCanvasPresentation(session.session.id, runView);
+  const { programLayout, personalLayout, presentation, programBasis } = useSurfacePresentation(session.session.id, runView);
   const [presentationError, setPresentationError] = useState<string>();
-  const preferences = useCanvasViewPreferences(session.session.id);
-  const appActorIds = useMemo(() => new Set(canvasElements.flatMap((contribution) => contribution.select(session)
-    .flatMap((element) => element.anchorActorId ? [element.anchorActorId] : []))), [canvasElements, session]);
+  const preferences = useSurfaceViewPreferences(session.session.id);
+  const appActorIds = useMemo(() => new Set(surfaceElements.flatMap((contribution) => contribution.select(session)
+    .flatMap((element) => element.anchorActorId ? [element.anchorActorId] : []))), [surfaceElements, session]);
   const hiddenActorIds = useMemo(() => runView?.actors
-    .filter((actor) => actor.kind !== "human" && (inspect ? !actorVisibleOnCanvas(actor, appActorIds, preferences, runView.primaryActorId) : actor.kind === "script")).map((actor) => actor.id) ?? [],
+    .filter((actor) => actor.kind !== "human" && (inspect ? !actorVisibleOnSurface(actor, appActorIds, preferences, runView.primaryActorId) : actor.kind === "script")).map((actor) => actor.id) ?? [],
   [inspect, runView, appActorIds, preferences]);
-  const canvasReady = runView !== undefined && (runView.actors.some((actor) => actor.kind !== "human")
-    || canvasElements.some((contribution) => contribution.select(session).some((element) => element.visible !== false)));
-  const visibleApps = useMemo(() => canvasElements.flatMap((contribution) => contribution.select(session)
-    .filter((element) => element.visible !== false).map((element) => `app:${element.id}`)), [canvasElements, session]);
+  const visibleApps = useMemo(() => surfaceElements.flatMap((contribution) => contribution.select(session)
+    .filter((element) => element.visible !== false).map((element) => `app:${element.id}`)), [surfaceElements, session]);
   const visibleEntities = new Set([
     ...visibleApps,
     ...(runView?.actors.filter((actor) => actor.kind !== "human" && actor.lifecycle?.kind !== "stopped"
@@ -64,13 +59,12 @@ function RunOrchestrationCenter({
   const root = presentation.root ?? fallbackRoot;
   const hasVisibleContent = tileEntities(root).some((entity) => visibleEntities.has(entity));
   const stageEntities = useMemo(() => new Set(tileEntities(root)), [root]);
-  useEffect(() => publishStageEntities(session.session.id, stageEntities), [session.session.id, stageEntities]);
-  useEffect(() => () => publishStageEntities(session.session.id, undefined), [session.session.id]);
-  const startupState = canvasStartupState({ view: runView, startup: session.startup, connected: session.connected,
+  useEffect(() => publishSurfaceEntities(session.session.id, stageEntities), [session.session.id, stageEntities]);
+  useEffect(() => () => publishSurfaceEntities(session.session.id, undefined), [session.session.id]);
+  const startupState = surfaceStartupState({ view: runView, startup: session.startup, connected: session.connected,
     running: session.running, error: session.conversationError });
   const stageRef = useRef<HTMLDivElement | null>(null);
   const showStartup = !hasVisibleContent && startupState !== undefined;
-  useEffect(() => { onCenterModeChange(canvasReady ? "workflow" : "chat"); }, [canvasReady, onCenterModeChange]);
 
   const visibleStageSize = useCallback((): { width: number; height: number } | undefined => {
     const element = stageRef.current;
@@ -86,7 +80,7 @@ function RunOrchestrationCenter({
     if (!element) return;
     const observer = new ResizeObserver(() => {
       const size = visibleStageSize();
-      if (size) element.style.setProperty("--canvas-visible-width", `${size.width}px`);
+      if (size) element.style.setProperty("--surface-visible-width", `${size.width}px`);
     });
     observer.observe(element);
     const panel = document.getElementById("workspace-panel");
@@ -94,15 +88,13 @@ function RunOrchestrationCenter({
     return () => observer.disconnect();
   }, [visibleStageSize]);
 
-  const requestedEntity = navigation.selectionFor(ORCHESTRATION_TAB_ID);
-
   const handleSelect = useCallback((selection: EntityReference) => {
-    canvas?.acceptSelection(selection);
-  }, [canvas]);
+    surface.acceptSelection(selection);
+  }, [surface]);
 
-  const changeTiles = (next: CanvasTileNode | null) => {
+  const changeTiles = (next: SurfaceTileNode | null) => {
     try {
-      saveCanvasPresentation(session.session.id, { root: next, programBasis });
+      saveSurfacePresentation(session.session.id, { root: next, programBasis });
       setPresentationError(undefined);
     } catch (error) {
       setPresentationError(error instanceof Error ? error.message : String(error));
@@ -111,31 +103,31 @@ function RunOrchestrationCenter({
 
   return (
     <div className="relative flex h-full min-h-0 min-w-0 flex-1 overflow-clip" data-view="tiled">
-      {personalLayout && <StatusGroup container={statusContainer} label="Kachelfläche" order={20}>
-        <button className={statusControlClass} onClick={() => saveCanvasPresentation(session.session.id, null)}
+      {personalLayout && <StatusGroup container={statusContainer} label="Fläche" order={20}>
+        <button className={statusControlClass} onClick={() => saveSurfacePresentation(session.session.id, null)}
           title="Eigene Anordnung zurücksetzen und der Programmanordnung folgen" type="button">Programmvorgabe übernehmen</button>
       </StatusGroup>}
-      {runToolbarContainer && createPortal(<><ActorHeaderModeControl runId={session.session.id} />{inspect && <ActorCanvasControls session={session}
+      {runToolbarContainer && createPortal(<><ActorHeaderModeControl runId={session.session.id} />{inspect && <ActorSurfaceControls session={session}
         appActorIds={appActorIds} preferences={preferences}
-        onPreferencesChange={(next) => saveCanvasViewPreferences(session.session.id, next)} />}</>, runToolbarContainer)}
-      <div aria-label="Kachelfläche" className="relative min-h-0 min-w-0 flex-[1_1_360px] overflow-clip bg-[image:var(--canvas-backdrop)]" ref={stageRef}>
-        <CanvasGrain />
+        onPreferencesChange={(next) => saveSurfaceViewPreferences(session.session.id, next)} />}</>, runToolbarContainer)}
+      <div aria-label="Fläche" className="relative min-h-0 min-w-0 flex-[1_1_360px] overflow-clip bg-[image:var(--surface-backdrop)]" ref={stageRef}>
+        <SurfaceGrain />
         {(programLayout.error || presentationError) && <p className="absolute inset-x-2 top-2 z-10 bg-secondary p-3 text-destructive" role="alert">{programLayout.error || presentationError}</p>}
-        {runView && !showStartup && <div className="absolute inset-y-0 left-0 w-[var(--canvas-visible-width,100%)] overflow-hidden">
-          <CanvasTiles root={root} onChange={changeTiles}
-            canvasElements={canvasElements} cardSections={cardSections} session={session} view={runView} navigation={navigation} onSelect={handleSelect}
-            selected={requestedEntity && typeof requestedEntity === "object" && "type" in requestedEntity && "id" in requestedEntity ? requestedEntity as EntityReference : undefined} />
+        {runView && !showStartup && <div className="absolute inset-y-0 left-0 w-[var(--surface-visible-width,100%)] overflow-hidden">
+          <SurfaceTiles root={root} onChange={changeTiles}
+            surfaceElements={surfaceElements} cardSections={cardSections} session={session} view={runView} navigation={navigation} onSelect={handleSelect}
+            selected={surface.selection} />
         </div>}
-        {showStartup && <CanvasStartup state={startupState} />}
+        {showStartup && <SurfaceStartup state={startupState} />}
       </div>
     </div>
   );
 }
 
 /** Feines Rauschen über der Fläche, damit das Material nicht glatt wirkt. */
-function CanvasGrain() {
+function SurfaceGrain() {
   return <svg aria-hidden="true" className="pointer-events-none absolute inset-0 size-full opacity-10" preserveAspectRatio="none" viewBox="0 0 180 180">
-    <filter id="canvas-grain"><feTurbulence baseFrequency=".76" numOctaves="3" stitchTiles="stitch" type="fractalNoise" /></filter>
-    <path d="M0 0h180v180H0z" fill="#887890" filter="url(#canvas-grain)" opacity=".32" />
+    <filter id="surface-grain"><feTurbulence baseFrequency=".76" numOctaves="3" stitchTiles="stitch" type="fractalNoise" /></filter>
+    <path d="M0 0h180v180H0z" fill="#887890" filter="url(#surface-grain)" opacity=".32" />
   </svg>;
 }

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

@@ -1,7 +1,7 @@
-import { runActorFrom, runViewFrom, type RunArtifact } from "./contract";
-import { formatBytes } from "@aicontainer/web/lib/format";
-import type { CardSectionContext, SessionNavigation } from "@aicontainer/web/PluginRegistry";
-import { SectionLabel } from "@aicontainer/web/ui";
+import { runActorFrom, runViewFrom, type RunArtifact } from "@ragents/web/run-view";
+import { formatBytes } from "@ragents/web/lib/format";
+import type { CardSectionContext, SessionNavigation } from "@ragents/web/PluginRegistry";
+import { SectionLabel } from "@ragents/web/ui";
 
 const openDocument = (navigation: SessionNavigation, artifact: RunArtifact) => {
   if (navigation.revealEntity({ type: "artifact", id: artifact.id })) return;

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

@@ -1,12 +1,12 @@
 import { useEffect, useMemo, useState } from "react";
-import type { JournalEvent } from "../../../packages/ragents/src/domain/events";
-import type { WorkspaceTabContext } from "@aicontainer/web/PluginRegistry";
-import { SourceCode } from "@aicontainer/web/SourceCode";
-import { Alert, AlertDescription, Badge, Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@aicontainer/web/ui";
-import { runContracts } from "@aicontainer/ragents/src/http/contracts";
-import { rpc } from "@aicontainer/web/rpc";
+import type { JournalEvent } from "@ragents/engine/src/domain/events";
+import type { WorkspaceTabContext } from "@ragents/web/PluginRegistry";
+import { SourceCode } from "@ragents/web/SourceCode";
+import { Alert, AlertDescription, Badge, Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ragents/web/ui";
+import { runContracts } from "@ragents/engine/src/http/contracts";
+import { rpc } from "@ragents/web/rpc";
 import { executionDuration, executionEventsFrom, executionStatusLabel, filterExecutions, projectExecutions, type ExecutionStatus, type TypeScriptExecution } from "./executions";
-import { runViewFrom, type RunView } from "./run-view";
+import { runViewFrom, type RunView } from "@ragents/web/run-view";
 
 export const EXECUTIONS_TAB_ID = "ragents.orchestration.executions";
 

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

@@ -1,11 +1,10 @@
 import { ArrowLeftIcon, WrenchIcon } from "lucide-react";
-import { useAccess } from "@aicontainer/web/AccessContext";
-import { Badge, Button, Empty, EmptyDescription, EmptyHeader, EmptyTitle, Input, Tabs, TabsContent, TabsList, TabsTrigger } from "@aicontainer/web/ui";
+import { useAccess } from "@ragents/web/AccessContext";
+import { Badge, Button, Empty, EmptyDescription, EmptyHeader, EmptyTitle, Input, Tabs, TabsContent, TabsList, TabsTrigger } from "@ragents/web/ui";
 import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
 import { ActorChat } from "./ActorChat";
 import { ActorChatControls } from "./ActorChatControls";
-import { QuestionCard } from "@aicontainer/web/chat/QuestionCard";
-import type { Message } from "@aicontainer/web/chat/types";
+import type { Message } from "quassel/events";
 import {
   isPendingRunActorInput,
   runArtifactContentUrl,
@@ -18,16 +17,14 @@ import {
   type RunTurn,
   type RunUsage,
   type RunView,
-} from "./run-view";
-import { actorInputLabel } from "./actor-conversation";
+} from "@ragents/web/run-view";
+import { actorInputLabel } from "@ragents/web/actor-conversation";
 import { resolveAction, restartActor, stopActor } from "./api";
-import { formatBytes } from "@aicontainer/web/lib/format";
-import { SourceCode } from "@aicontainer/web/SourceCode";
-import { thinkingLabel } from "@aicontainer/web/lib/labels";
+import { formatBytes } from "@ragents/web/lib/format";
+import { SourceCode } from "@ragents/web/SourceCode";
+import { thinkingLabel } from "@ragents/web/lib/labels";
 import { formatTime } from "./format";
-import { useOptionalActorPrograms } from "@aicontainer/plugins/ragents.actor-programs/web/context";
-import { actorProgramSourceReference } from "@aicontainer/plugins/ragents.actor-programs/web/program-state";
-import { ProgramSource } from "@aicontainer/plugins/ragents.actor-programs/web/ProgramSource";
+import { useProgramSlot } from "./program-slot";
 
 export interface FlowSelection {
   type: "actor" | "input" | "turn" | "subscription" | "action" | "artifact";
@@ -46,7 +43,7 @@ interface FlowInspectorProps {
   conversationError?: string;
   primaryRunning: boolean;
   /** Anzeigefläche für den gemerkten Detailgrad; das Popout meldet sich getrennt vom Seiteninspector. */
-  chatSurface?: string;
+  chatDisplay?: string;
 }
 
 const inspectorClass = "flex h-full min-h-0 flex-col bg-card";
@@ -306,28 +303,11 @@ function ActionCard({ action, runId, onError }: { action: RunAction; runId: stri
     }
   };
 
-  if (action.kind === "question" && action.question) {
-    return (
-      <div className={actionClass}>
-        {action.description && <p>{action.description}</p>}
-        <QuestionCard
-          onAnswer={writable ? (text) => void resolve("approved", text) : undefined}
-          question={{ callId: action.id, options: action.question.options, multi: action.question.multi }}
-          text={action.title}
-        />
-        <div className="mt-1 flex justify-end gap-1.5">
-          <Button disabled={!writable || busy} onClick={() => void resolve("dismissed", undefined)} size="sm" variant="outline">
-            Verwerfen
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className={actionClass}>
       <strong>{action.title}</strong>
       {action.description && <p>{action.description}</p>}
+      {action.owner && <p>wartet auf Eingabe - {action.owner}</p>}
       {action.input && (
         <Input
           className="my-1.5 text-[0.76rem]"
@@ -364,11 +344,11 @@ function SourceListing({ handle, source }: { handle: string; source: string }) {
 
 function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: RunActor; index: RunIndex }) {
   const access = useAccess();
-  const programs = useOptionalActorPrograms();
+  const programs = useProgramSlot();
   const writable = access.can("runs.write");
   const inspect = access.can("runs.inspect");
   const view = index.view;
-  const program = inspect && programs?.runId === view.id ? actorProgramSourceReference(view, actor.id) : undefined;
+  const programSource = inspect && programs?.runId === view.id ? programs.source(view, actor.id) : undefined;
   const [error, setError] = useState<string>();
   const inputs = view.inputs.filter((entry) => entry.actorId === actor.id).sort((left, right) => left.sequence - right.sequence);
   const turns = view.turns.filter((entry) => entry.actorId === actor.id).sort((left, right) => left.startedAt.localeCompare(right.startedAt));
@@ -390,7 +370,7 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
 
   const config = driver && driver.kind !== "manual" ? driver.config : undefined;
   const sections: SectionTab[] = [
-    { id: "info", label: "Info: Modell und Laufdetails", icon: <SectionIcon kind="info" />, content: (
+    { id: "info", label: "Info: Modell und Run-Details", icon: <SectionIcon kind="info" />, content: (
       <div className={statusClass}>
         {lifecycle && <StatusPill status={lifecycle} />}
         <span>{primary ? "Primärer Actor" : ACTOR_KIND_LABELS[actor.kind]}</span>
@@ -400,7 +380,7 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
         <span>{pendingInputCount} offen</span>
         <span>{turns.length} Turns</span>
         {primary && runCost !== undefined && (
-          <span title="Gesamtkosten des Laufs über alle Turns">{formatCostUsd(runCost)}</span>
+          <span title="Gesamtkosten des Runs über alle Turns">{formatCostUsd(runCost)}</span>
         )}
       </div>
     ) },
@@ -410,12 +390,11 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
       icon: <SectionIcon kind="prompt" />,
       content: <pre className={textBlockClass}>{actor.prompt}</pre>,
     }] : []),
-    ...(program && programs ? [{
+    ...(programSource ? [{
       id: "source",
       label: "Quelltext",
       icon: <SectionIcon kind="source" />,
-      content: <ProgramSource api={programs.api} moduleId={program.name} runId={view.id} revision={program.revision}
-        key={`${view.id}:${actor.id}:${program.revision}`} expandedByDefault />,
+      content: programSource,
     }] : actor.source ? [{
       id: "source",
       label: "Quelltext",
@@ -548,6 +527,7 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
             className="flex-shrink-0"
             onClick={() => void stopActor(view.id, actor.id, STOP_REASON).catch((caught: Error) => setError(caught.message))}
             size="sm"
+            title={`@${actor.handle} samt beauftragten Kindern dauerhaft stoppen; die Chat-Eingabe unterbricht dagegen nur den laufenden Turn`}
             variant="destructive"
           >
             Stop
@@ -569,7 +549,7 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
           actor={actor}
           view={view}
           presentation="inspector"
-          surface={props.chatSurface}
+          display={props.chatDisplay}
           className="min-h-0 flex-1"
           primaryMessages={props.primaryMessages}
           conversation={props.actorConversations?.[actor.id]}
@@ -577,7 +557,7 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
           onNavigate={props.onNavigate}
           running={primary ? props.primaryRunning : lifecycle === "running"}
         />
-        <ActorChatControls actor={actor} view={view} composerVisible={props.composerVisible} surface={props.chatSurface}
+        <ActorChatControls actor={actor} view={view} composerVisible={props.composerVisible} display={props.chatDisplay}
           running={primary ? props.primaryRunning : lifecycle === "running"} />
       </SectionTabs>
     </div>
@@ -691,7 +671,7 @@ function ActionView({ action, index, ...props }: FlowInspectorProps & { action:
   const [error, setError] = useState<string>();
   return (
     <div className={inspectorClass}>
-      <DetailHeader canGoBack={props.canGoBack} eyebrow={action.kind === "question" ? "Frage" : "Aktion"} onBack={props.onBack} subtitle={actorLabel(index, action.askedBy)} title={action.title} />
+      <DetailHeader canGoBack={props.canGoBack} eyebrow="Aktion" onBack={props.onBack} subtitle={actorLabel(index, action.askedBy)} title={action.title} />
       <div className={statusClass}><StatusPill status={action.status} /></div>
       <div className={scrollClass}>
         {action.status === "pending" && <ActionCard action={action} onError={setError} runId={index.view.id} />}
@@ -702,10 +682,12 @@ function ActionView({ action, index, ...props }: FlowInspectorProps & { action:
             <dt>Gefragt von</dt><dd><EntityLink id={action.askedBy} index={index} onNavigate={props.onNavigate} /></dd>
             <dt>Vorgeschlagen</dt><dd>{formatTime(action.proposedAt)}</dd>
             {action.resolvedAt && <><dt>Aufgelöst</dt><dd>{formatTime(action.resolvedAt)}</dd></>}
-            {action.response && <><dt>Antwort</dt><dd>{action.response}</dd></>}
+            {action.owner && <><dt>Eigentümer</dt><dd>{action.owner}</dd></>}
+            {action.result !== null && action.result !== undefined && <><dt>Ergebnis</dt><dd>{typeof action.result === "string" ? action.result : JSON.stringify(action.result)}</dd></>}
           </dl>
         </section>
         {Object.keys(action.parameters).length > 0 && <section className={sectionClass}><h3>Parameter</h3><pre className={textBlockClass}>{JSON.stringify(action.parameters, null, 2)}</pre></section>}
+        {action.payload !== null && action.payload !== undefined && <section className={sectionClass}><h3>Nutzdaten</h3><pre className={textBlockClass}>{JSON.stringify(action.payload, null, 2)}</pre></section>}
         {error && <p className={errorClass}>{error}</p>}
       </div>
     </div>

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

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { XIcon } from "lucide-react";
-import type { JournalEvent } from "../../../packages/ragents/src/domain/events";
-import type { SessionHeaderContext } from "@aicontainer/web/PluginRegistry";
-import { SourceCode } from "@aicontainer/web/SourceCode";
-import { Button, Input, Popover, PopoverContent } from "@aicontainer/web/ui";
-import { runContracts } from "@aicontainer/ragents/src/http/contracts";
-import { rpc } from "@aicontainer/web/rpc";
-import { runViewFrom } from "./run-view";
+import type { JournalEvent } from "@ragents/engine/src/domain/events";
+import type { SessionHeaderContext } from "@ragents/web/PluginRegistry";
+import { SourceCode } from "@ragents/web/SourceCode";
+import { Button, Input, Popover, PopoverContent } from "@ragents/web/ui";
+import { runContracts } from "@ragents/engine/src/http/contracts";
+import { rpc } from "@ragents/web/rpc";
+import { runViewFrom } from "@ragents/web/run-view";
 import { statusControlClass } from "./constants";
 
 export function JournalStatus({ session }: SessionHeaderContext) {
@@ -52,7 +52,7 @@ export function JournalStatus({ session }: SessionHeaderContext) {
     </button>
     <Popover open={open} onOpenChange={(next) => { if (!next) close(); }}>
     <PopoverContent align="start" anchor={buttonRef} aria-label="Journal des Runs" className="flex min-h-0 min-w-0 flex-col gap-0 overflow-hidden rounded-t-sm rounded-b-none p-0 text-[0.76rem]" collisionPadding={8} id={panelId}
-      initialFocus={searchRef} role="region" side="top" sideOffset={0} style={{ width: "min(900px, var(--available-width))", height: "min(480px, var(--available-height))" }}>
+      initialFocus={searchRef} role="region" side="top" style={{ width: "min(900px, var(--available-width))", height: "min(480px, var(--available-height))" }}>
       <header className="flex flex-none items-center gap-2 border-b border-border-soft px-2.5 py-2">
         <div className="flex min-w-0 flex-1 items-baseline gap-2.5 [&>span]:truncate"><strong>Journal</strong><span className="text-muted-foreground">{session.session.title || "Run"}</span></div>
         <Button onClick={() => setReload((value) => value + 1)} size="sm" variant="ghost">Aktualisieren</Button>

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

@@ -1,19 +1,19 @@
-import { cn } from "@aicontainer/web/ui";
+import { cn } from "@ragents/web/ui";
 
-export type MaterialSurface = "agent" | "primary" | "script" | "app";
+export type MaterialTone = "agent" | "primary" | "script" | "app";
 
 /** Schichtwerk: matte Front mit geraden Kanten. */
 const materialBaseClass = "relative isolate rounded-panel border-[1.5px] border-(--material-edge) bg-(--material-face) [--material-edge:#514657] dark:[--material-edge:#b7a8bd]";
 
-const materialSurfaceClass: Readonly<Record<MaterialSurface, string>> = {
+const materialToneClass: Readonly<Record<MaterialTone, string>> = {
   agent: "[--material-face:var(--color-glass-agent)]",
   primary: "[--material-face:var(--color-glass-primary)]",
   script: "[--material-face:var(--color-glass-script)]",
   app: "[--material-face:var(--color-glass-app)]",
 };
 
-export const materialCardClass = (surface: MaterialSurface, className?: string) =>
-  cn(materialBaseClass, materialSurfaceClass[surface], className);
+export const materialCardClass = (tone: MaterialTone, className?: string) =>
+  cn(materialBaseClass, materialToneClass[tone], className);
 
 /** Kopfzeile einer Materialkarte: dieselbe Front, eine Spur dunkler, oben gerundet. */
 export const materialHeadClass = "relative flex items-center gap-2 rounded-t-[15.5px] bg-[color-mix(in_srgb,var(--material-face)_96%,black)] px-3 py-2";

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

@@ -1,8 +1,8 @@
 import { useState } from "react";
-import { useAccess } from "@aicontainer/web/AccessContext";
-import type { SessionHeaderContext } from "@aicontainer/web/PluginRegistry";
-import { Button } from "@aicontainer/web/ui";
-import { ToolbarItem } from "@aicontainer/web/Toolbar";
+import { useAccess } from "@ragents/web/AccessContext";
+import type { SessionHeaderContext } from "@ragents/web/PluginRegistry";
+import { Button, StopGlyph } from "@ragents/web/ui";
+import { ToolbarItem } from "@ragents/web/Toolbar";
 import { stopRun } from "./api";
 
 const STOP_RUN_REASON = "Not-Aus durch den Bediener";
@@ -33,8 +33,8 @@ function StopRunButton({ runId }: { runId: string }) {
   if (!writable) return null;
   if (!armed) {
     return (
-      <Button onClick={() => setArmed(true)} size="sm" title="Beendet den ganzen Lauf: Turns, Agenten und Abläufe" variant="destructive">
-        Lauf stoppen
+      <Button onClick={() => setArmed(true)} size="sm" title="Beendet den ganzen Run: Turns, Agenten und Abläufe" variant="destructive">
+        <StopGlyph data-icon="inline-start" />Run stoppen
       </Button>
     );
   }

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

@@ -0,0 +1,8 @@
+import { StartupNotice } from "@ragents/web/ui";
+import type { SurfaceStartupState } from "./surface-startup";
+
+export function SurfaceStartup({ state }: { state: SurfaceStartupState }) {
+  return <div className="pointer-events-none absolute inset-y-0 left-0 grid w-[var(--surface-visible-width,100%)] place-items-center p-6">
+    <StartupNotice state={state} />
+  </div>;
+}

package/plugins/ragents.orchestration/web/{CanvasTiles.tsx → SurfaceTiles.tsx}

@@ -1,15 +1,15 @@
-import { useAccess } from "@aicontainer/web/AccessContext";
-import type { CanvasElementContribution, CardSectionContribution, EntityReference, SessionContext, SessionNavigation } from "@aicontainer/web/PluginRegistry";
-import { canvasTileChatInput, type CanvasTileNode } from "../tiled-layout";
+import { useAccess } from "@ragents/web/AccessContext";
+import type { SurfaceElementContribution, CardSectionContribution, EntityReference, SessionContext, SessionNavigation } from "@ragents/web/PluginRegistry";
+import { surfaceTileChatInput, type SurfaceTileNode } from "../tiled-layout";
 import { ActorTile } from "./ActorTile";
 import { FlowInspector } from "./FlowInspector";
-import { TiledCanvas, type CanvasTileItem } from "./TiledCanvas";
-import { actorSurface, type RunView } from "./run-view";
+import { TiledSurface, type SurfaceTileItem } from "./TiledSurface";
+import { actorTone, type RunView } from "@ragents/web/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[];
+export function SurfaceTiles({ root, onChange, surfaceElements, cardSections, session, view, navigation, onSelect, selected }: {
+  root: SurfaceTileNode | null;
+  onChange: (root: SurfaceTileNode | null) => void;
+  surfaceElements: readonly SurfaceElementContribution[];
   cardSections: readonly CardSectionContribution[];
   session: SessionContext;
   view: RunView;
@@ -20,28 +20,28 @@ export function CanvasTiles({ root, onChange, canvasElements, cardSections, sess
   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 => ({
+  const items: SurfaceTileItem[] = [
+    ...actors.map((actor): SurfaceTileItem => ({
       entity: `@${actor.handle}`,
       title: `${actor.displayName || actor.handle} (@${actor.handle})`,
-      surface: actorSurface(view, actor),
+      tone: actorTone(view, actor),
       content: actor.kind === "agent"
-        ? <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"
+        ? <ActorTile actor={actor} view={view} cardSections={cardSections} chatInput={surfaceTileChatInput(root, `@${actor.handle}`)} session={session} navigation={navigation} onSelect={onSelect} />
+        : <FlowInspector view={view} selection={{ type: "actor", id: actor.id }} canGoBack={false} chatDisplay="surface"
           composerVisible={false} onNavigate={onSelect} onBack={() => {}} primaryMessages={session.messages}
           actorConversations={session.actorConversations} conversationError={session.conversationError} primaryRunning={session.running} />,
     })),
-    ...canvasElements.flatMap(({ Element, select }) => select(session)
+    ...surfaceElements.flatMap(({ Element, select }) => select(session)
       .filter((definition) => definition.visible !== false)
-      .map((definition): CanvasTileItem => ({
+      .map((definition): SurfaceTileItem => ({
         entity: `app:${definition.id}`,
         title: definition.title ?? definition.id,
-        surface: "app",
+        tone: "app",
         content: <Element definition={definition} navigation={navigation} session={session} />,
       }))),
   ];
   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}
+  return <TiledSurface root={root} onChange={onChange} items={items} canArrange={inspect}
     selectedEntity={selected?.type === "actor" && selectedEntity ? `@${selectedEntity}` : selectedEntity} />;
 }