@schlenkr/ragents 0.1.5 → 0.1.6

package/plugins/ragents.orchestration/web/{column/RunColumn.tsx → run-panel/RunPanel.tsx}

@@ -1,28 +1,28 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type PointerEvent, type ReactNode, type RefObject } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type KeyboardEvent, type MouseEvent, type PointerEvent, type ReactNode, type RefObject } from "react";
 import { createPortal } from "react-dom";
 import { ArrowUpRightIcon, LayoutGridIcon, Maximize2Icon, MessageSquareIcon, 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 { useAccess } from "@ragents/web/AccessContext";
+import { ChatPanel } from "quassel";
+import { runIsWorking } from "@ragents/web/chat/chat-target";
+import { useCenterElements, useRunPanelHost } from "@ragents/web/run-panel/host";
+import type { SurfaceCenterContext, SurfaceElementContribution, SurfaceElementDefinition, CardSectionContribution, SessionContext, SessionNavigation } from "@ragents/web/PluginRegistry";
+import { Button, cn, Spinner, StartupNotice } from "@ragents/web/ui";
 import { ActorChat } from "../ActorChat";
 import { ActorChatControls } from "../ActorChatControls";
 import { useActorHeaderMode } from "../actor-header-settings";
-import { actorVisibleOnCanvas, saveCanvasViewPreferences, useCanvasViewPreferences } from "../canvas-view-settings";
+import { surfaceStartupState, type SurfaceStartupState } from "../surface-startup";
+import { actorVisibleOnSurface, saveSurfaceViewPreferences, useSurfaceViewPreferences } from "../surface-view-settings";
 import { cardSectionsClass } from "../constants";
 import type { FlowSelection } from "../FlowInspector";
-import { runViewFrom, type RunActor, type RunView } from "../run-view";
+import { useProgramSlot } from "../program-slot";
+import { chatPrimaryId, runViewFrom, type RunActor, type RunView } from "@ragents/web/run-view";
 import { AddresseeControl } from "./AddresseeControl";
-import { columnActors, elementNeedsAttention, partitionColumnActors } from "./column-actors";
-import { useColumnSettings } from "./column-settings";
-import { chatLayoutFor, clampChatWidth, saveColumnState, useColumnState, type ChatLayout, type ColumnChatMode, type ColumnState } from "./column-state";
+import { runPanelActors, elementNeedsAttention, partitionRunPanelActors } from "./run-panel-actors";
+import { useRunPanelSettings } from "./run-panel-settings";
+import { chatShowsContent, useRunPanelStartup } from "./run-panel-startup";
+import { chatLayoutFor, clampChatWidth, saveRunPanelState, useRunPanelState, type ChatLayout, type RunPanelChatMode, type RunPanelState } from "./run-panel-state";
 import { sheetStatus } from "./sheet-status";
 
-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";
@@ -30,31 +30,31 @@ const chipClass = "flex h-7 max-w-[200px] flex-none cursor-pointer items-center
 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",
+  floating: "absolute inset-x-2.5 bottom-0 z-20 flex flex-col overflow-hidden rounded-t-2xl border border-b-0 border-border bg-card shadow-[0_-16px_60px_#00000080] transition-[height] duration-300 ease-[cubic-bezier(.32,.72,0,1)] motion-reduce:transition-none",
 };
 const chatSurfaceClass = "rounded-none border-0 bg-transparent";
 const chatModeButtonClass = "aria-pressed:bg-accent aria-pressed:text-primary";
-const chatModes: readonly { Icon: typeof MessageSquareIcon; label: string; mode: ColumnChatMode; title: string }[] = [
-  { Icon: MessageSquareIcon, label: "Nur Chat", mode: "chat", title: "Nur Chat: der Chat füllt die Spalte, die Mini-App tritt zurück" },
+const chatModes: readonly { Icon: typeof MessageSquareIcon; label: string; mode: RunPanelChatMode; title: string }[] = [
+  { Icon: MessageSquareIcon, label: "Nur Chat", mode: "chat", title: "Nur Chat: der Chat füllt das Run-Panel, die Mini-App tritt zurück" },
   { Icon: PanelBottomIcon, label: "Chat unten", mode: "bottom", title: "Chat unten: das Sheet über der Mini-App" },
   { Icon: PanelRightIcon, label: "Chat rechts", mode: "side", title: "Chat rechts: neben der Mini-App" },
 ];
 
-interface ColumnElement {
-  Element: CanvasElementContribution["Element"];
-  definition: CanvasElementDefinition;
+interface RunPanelElement {
+  Element: SurfaceElementContribution["Element"];
+  definition: SurfaceElementDefinition;
 }
 
-export function OrchestrationColumn(props: CanvasCenterContext) {
-  return <RunColumn key={props.session.session.id} {...props} />;
+export function OrchestrationRunPanel(props: SurfaceCenterContext) {
+  return <RunPanel key={props.session.session.id} {...props} />;
 }
 
-function RunColumn({ canvasElements, cardSections, navigation, renderChat, session, toolbarContainer }: CanvasCenterContext) {
+function RunPanel({ surfaceElements, cardSections, navigation, renderChat, session, toolbarContainer }: SurfaceCenterContext) {
   const runId = session.session.id;
   const inspect = useAccess().can("runs.inspect");
-  const host = useColumnHost();
+  const host = useRunPanelHost();
   const view = runViewFrom(session.runView);
-  const stored = useColumnState(runId);
+  const stored = useRunPanelState(runId);
   const centered = useCenterElements(runId);
   const rootRef = useRef<HTMLDivElement>(null);
   const sheetRef = useRef<HTMLElement>(null);
@@ -63,7 +63,7 @@ function RunColumn({ canvasElements, cardSections, navigation, renderChat, sessi
   const [chatWidth, setChatWidth] = useState(stored.chatWidth);
   const [width, setWidth] = useState(0);
   const [addresseeOpen, setAddresseeOpen] = useState(false);
-  const settings = useColumnSettings();
+  const settings = useRunPanelSettings();
   useEffect(() => setChatWidth(stored.chatWidth), [stored.chatWidth]);
   useEffect(() => {
     const root = rootRef.current;
@@ -72,27 +72,33 @@ function RunColumn({ canvasElements, cardSections, navigation, renderChat, sessi
     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)
+  const save = useCallback((patch: Partial<RunPanelState>) => saveRunPanelState(runId, { ...stored, ...patch }), [runId, stored]);
+  const elements = useMemo<RunPanelElement[]>(() => surfaceElements.flatMap(({ Element, select }) => select(session)
     .filter((definition) => definition.visible !== false)
-    .map((definition) => ({ Element, definition }))), [canvasElements, session]);
+    .map((definition) => ({ Element, definition }))), [surfaceElements, session]);
   const selectedElement = elements.find((entry) => entry.definition.id === stored.element) ?? elements[0];
-  const actors = useMemo(() => view ? columnActors(view, inspect) : [], [inspect, view]);
+  const startup = useRunPanelStartup(
+    surfaceStartupState({ view, startup: session.startup, connected: session.connected, running: session.running, error: session.conversationError }),
+    session.connected,
+    elements.length > 0 || chatShowsContent(session.messages),
+  );
+  const notice = startup ? <RunPanelStartup state={startup} /> : undefined;
+  const actors = useMemo(() => view ? runPanelActors(view, inspect) : [], [inspect, view]);
   const mode = useActorHeaderMode(runId);
-  const preferences = useCanvasViewPreferences(runId);
+  const preferences = useSurfaceViewPreferences(runId);
   const appActorIds = useMemo(() => new Set(elements.flatMap(({ definition }) => definition.anchorActorId ? [definition.anchorActorId] : [])), [elements]);
-  const primaryId = view?.primaryActorId;
+  const primaryId = view ? chatPrimaryId(view) : undefined;
   const selectedActor = actors.find((actor) => actor.id === stored.actor) ?? actors.find((actor) => actor.id === primaryId) ?? actors[0];
-  const { shown, hidden } = useMemo(() => partitionColumnActors(actors, {
+  const { shown, hidden } = useMemo(() => partitionRunPanelActors(actors, {
     mode,
     primaryId,
     selectedId: selectedActor?.id,
-    onStage: (actor) => actor.id === primaryId || actorVisibleOnCanvas(actor, appActorIds, preferences, primaryId),
+    onStage: (actor) => actor.id === primaryId || actorVisibleOnSurface(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 } });
+    saveSurfaceViewPreferences(runId, { ...preferences, actorVisibility: { ...preferences.actorVisibility, [actor.id]: true } });
     save({ actor: actor.id });
   }, [preferences, runId, save]);
   const navigate = useCallback((selection: FlowSelection) => {
@@ -102,8 +108,11 @@ function RunColumn({ canvasElements, cardSections, navigation, renderChat, sessi
   const primarySelected = selectedActor === undefined || selectedActor.id === primaryId;
   const narrow = width < settings.sideWidth;
   const layout = chatLayoutFor({ chat: stored.chat, hasElement: selectedElement !== undefined, narrow });
-  const sheet = useSheet(layout === "floating", sheetRef, addresseeOpen, settings.openDelay);
-  const peek = useSheetPeek(layout === "floating", sheetRef, grabRef, statusRef, selectedActor?.id);
+  const sheet = useSheet(layout === "floating", sheetRef, grabRef, addresseeOpen, settings.openDelay);
+  const geometry = useSheetPeek(layout === "floating", sheetRef, grabRef, statusRef, selectedActor?.id);
+  const expandedHeight = Math.max(geometry.minimum, Math.min(stored.sheetExpandedHeight ?? geometry.maximum, geometry.maximum));
+  const resize = useSheetResize(layout === "floating", sheetRef, grabRef, sheet, geometry, expandedHeight,
+    (height) => save({ sheetExpandedHeight: Math.round(height) }));
   const scrollerRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
     if (layout !== "floating" || !sheet.expanded) return;
@@ -139,10 +148,10 @@ function RunColumn({ canvasElements, cardSections, navigation, renderChat, sessi
     sideWidth={settings.sideWidth}
   />, 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} />;
+    ? renderChat({ chatElementClassName: chatSurfaceClass, chatScrollerRef: (element) => { scrollerRef.current = element; }, notice, toolbarLeft: addressee })
+    : <ActorRunPanelChat actor={selectedActor} cardSections={cardSections} navigation={navigation} notice={notice} 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}>
+  return <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-app" data-run-panel="run" ref={rootRef}>
     {chatModeSwitch}
     {layout !== "full" && elements.length > 1 && <nav aria-label="Mini-Apps des Runs" className={chipRowClass}>
       {elements.map(({ definition }) => <ElementChip
@@ -158,7 +167,7 @@ function RunColumn({ canvasElements, cardSections, navigation, renderChat, sessi
       />)}
     </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}>
-      {layout !== "full" && selectedElement && <ColumnStage centered={centered.has(selectedElement.definition.id)} element={selectedElement} navigation={navigation} peek={layout === "floating" ? peek : 0} runId={runId} session={session} />}
+      {layout !== "full" && selectedElement && <RunPanelStage centered={centered.has(selectedElement.definition.id)} element={selectedElement} navigation={navigation} peek={layout === "floating" ? geometry.minimum : 0} runId={runId} session={session} />}
       {layout === "side" && <Sash
         onChange={(next) => setChatWidth(clampChatWidth(next, availableWidth()))}
         onCommit={(next) => save({ chatWidth: clampChatWidth(next, availableWidth()) })}
@@ -166,33 +175,46 @@ function RunColumn({ canvasElements, cardSections, navigation, renderChat, sessi
       />}
       {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"
+        className="absolute inset-0 z-[15] bg-backdrop opacity-0 transition-opacity duration-300 pointer-events-none data-expanded:pointer-events-auto data-expanded:opacity-100 motion-reduce:transition-none"
         data-expanded={sheet.expanded || undefined}
         onClick={sheet.close}
       />}
       <section
         aria-label="Chat"
-        className={chatLayoutClass[layout]}
+        className={cn(chatLayoutClass[layout], layout === "floating" && "[&:not([data-expanded])_[data-slot=card-sections]]:hidden [&[data-sheet-resizing]_[data-slot=card-sections]]:hidden")}
         data-expanded={layout === "floating" && sheet.expanded ? true : undefined}
+        data-sheet-resizing={resize.height !== undefined || undefined}
         data-view={primarySelected ? "chat" : "actor-chat"}
         onBlurCapture={layout === "floating" ? () => sheet.closeLater(SHEET_BLUR_DELAY) : undefined}
-        onFocusCapture={layout === "floating" ? sheet.open : undefined}
+        onFocusCapture={layout === "floating" ? (event) => { if (event.target !== grabRef.current) 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}
+        style={layout === "floating" ? { height: resize.height ?? (sheet.expanded ? expandedHeight : geometry.minimum), transition: resize.height !== undefined ? "none" : undefined } : 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}
+          aria-label="Höhe des ausgeklappten Chats"
+          aria-orientation="horizontal"
+          aria-valuemin={geometry.minimum}
+          aria-valuemax={geometry.maximum}
+          aria-valuenow={Math.round(resize.height ?? expandedHeight)}
+          className="flex h-3 w-full flex-none cursor-row-resize touch-none items-center justify-center outline-none select-none [&:hover>span]:bg-foreground [&:focus-visible>span]:bg-foreground [&:focus-visible>span]:ring-2 [&:focus-visible>span]:ring-ring/60"
+          data-run-panel="sheet-grip"
+          onClick={resize.onClick}
+          onKeyDown={resize.onKeyDown}
+          onPointerDown={resize.onPointerDown}
+          onPointerMove={resize.onPointerMove}
+          onPointerUp={resize.onPointerUp}
+          onPointerCancel={resize.onPointerCancel}
+          onLostPointerCapture={resize.onPointerCancel}
           ref={grabRef}
-          title={sheet.expanded ? "Chat absenken" : "Chat hochschieben"}
+          role="separator"
+          title={`Ziehen: ausgeklappte Höhe einstellen. Klicken: ${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")}
+          className={cn("flex h-6 w-full flex-none cursor-pointer items-center gap-2 px-[var(--qsl-chat-horizontal-padding,24px)] 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 === "waiting" ? "text-warning" : "text-muted-foreground")}
           onClick={sheet.toggle}
           ref={statusRef}
           title={status.text}
@@ -207,14 +229,14 @@ function RunColumn({ canvasElements, cardSections, navigation, renderChat, sessi
   </div>;
 }
 
-/** Die drei Ansichten der Spalte in der Kopfzeile; "Chat rechts" bleibt gesperrt, solange die Spalte zu schmal ist. */
+/** Die drei Ansichten des Run-Panels in der Kopfzeile; "Chat rechts" bleibt gesperrt, solange das Run-Panel zu schmal ist. */
 function ChatModeSwitch({ narrow, onChange, selected, sideWidth }: {
   narrow: boolean;
-  onChange: (mode: ColumnChatMode) => void;
-  selected: ColumnChatMode;
+  onChange: (mode: RunPanelChatMode) => void;
+  selected: RunPanelChatMode;
   sideWidth: number;
 }) {
-  return <div aria-label="Ansicht der Spalte" className="flex flex-none items-center gap-0.5 self-center rounded-lg border border-border bg-card p-0.5" role="group">
+  return <div aria-label="Ansicht des Run-Panels" className="flex flex-none items-center gap-0.5 self-center rounded-lg border border-border bg-card p-0.5" role="group">
     {chatModes.map(({ Icon, label, mode, title }) => {
       const blocked = mode === "side" && narrow;
       return <Button
@@ -233,22 +255,29 @@ function ChatModeSwitch({ narrow, onChange, selected, sideWidth }: {
 }
 
 /** 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) {
+function useSheet(active: boolean, sheetRef: RefObject<HTMLElement | null>, grabRef: RefObject<HTMLButtonElement | null>, blocked: boolean, openDelay: number) {
   const [expanded, setExpanded] = useState(false);
   const [held, setHeld] = useState(false);
   const guard = useRef({ held, blocked });
+  const resizing = useRef(false);
   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 open = useCallback(() => { if (!resizing.current) { cancel(); setExpanded(true); } }, [cancel]);
+  const openLater = useCallback(() => {
+    if (resizing.current) return;
+    cancel();
+    timer.current = window.setTimeout(() => { if (!resizing.current) setExpanded(true); }, openDelay);
+  }, [cancel, openDelay]);
   const closeLater = useCallback((delay: number) => {
+    if (resizing.current) return;
     cancel();
     timer.current = window.setTimeout(() => {
-      if (guard.current.held || guard.current.blocked || sheetRef.current?.contains(document.activeElement)) return;
+      if (resizing.current || guard.current.held || guard.current.blocked
+        || (document.activeElement !== grabRef.current && sheetRef.current?.contains(document.activeElement))) return;
       setExpanded(false);
     }, delay);
-  }, [cancel, sheetRef]);
+  }, [cancel, grabRef, sheetRef]);
   const close = useCallback(() => {
     cancel();
     setHeld(false);
@@ -260,48 +289,139 @@ function useSheet(active: boolean, sheetRef: RefObject<HTMLElement | null>, bloc
     setHeld(true);
     open();
   }, [close, expanded, open]);
+  const pauseResize = useCallback(() => { cancel(); resizing.current = true; }, [cancel]);
+  const finishResize = useCallback((previous?: { expanded: boolean; held: boolean }) => {
+    cancel();
+    resizing.current = false;
+    setExpanded(previous?.expanded ?? false);
+    setHeld(previous?.held ?? false);
+  }, [cancel]);
   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(); };
+    const onKeyDown = (event: globalThis.KeyboardEvent) => { if (event.key === "Escape" && !resizing.current && !guard.current.blocked) close(); };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [active, close, expanded]);
-  return { expanded, open, openLater, closeLater, close, toggle };
+  return { expanded, held, open, openLater, closeLater, close, toggle, pauseResize, finishResize };
 }
 
 /** 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);
+  const [geometry, setGeometry] = useState({ minimum: 0, maximum: 0, scale: 1 });
   useLayoutEffect(() => {
     if (!active) return;
+    const sheet = sheetRef.current;
     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 composer = sheet?.querySelector<HTMLElement>('[data-chat="composer"]');
+    const container = sheet?.parentElement;
+    if (!sheet || !grab || !composer || !container) throw new Error("Das Sheet des Panels findet Griff, Eingabe oder Rahmen nicht.");
+    const measure = () => {
+      const style = getComputedStyle(sheet);
+      const width = sheet.getBoundingClientRect().width;
+      if (width === 0) return;
+      const scale = width / Number.parseFloat(style.width);
+      const minimum = Math.ceil((grab.getBoundingClientRect().height + (status?.getBoundingClientRect().height ?? 0)
+        + composer.getBoundingClientRect().height) / scale + Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth));
+      const maximum = Math.max(minimum, Math.floor(container.getBoundingClientRect().height / scale * 0.9));
+      setGeometry((previous) => previous.minimum === minimum && previous.maximum === maximum && previous.scale === scale ? previous : { minimum, maximum, scale });
+    };
     const observer = new ResizeObserver(measure);
     observer.observe(composer);
+    observer.observe(grab);
+    observer.observe(container);
+    if (status) observer.observe(status);
     measure();
     return () => observer.disconnect();
   }, [active, actorId, grabRef, sheetRef, statusRef]);
-  return peek;
+  return geometry;
+}
+
+function useSheetResize(active: boolean, sheetRef: RefObject<HTMLElement | null>, grabRef: RefObject<HTMLButtonElement | null>, sheet: ReturnType<typeof useSheet>,
+  geometry: { minimum: number; maximum: number; scale: number }, expandedHeight: number, onCommit: (height: number) => void) {
+  const [height, setHeight] = useState<number>();
+  const drag = useRef<{ pointerId: number; startY: number; startHeight: number; height: number; moved: boolean; expanded: boolean; held: boolean }>(undefined);
+  const suppressClick = useRef(false);
+  const finish = (commit: boolean) => {
+    const previous = drag.current;
+    if (!previous) return;
+    drag.current = undefined;
+    suppressClick.current = previous.moved || !commit;
+    const grip = grabRef.current;
+    if (grip?.hasPointerCapture(previous.pointerId)) grip.releasePointerCapture(previous.pointerId);
+    if (commit && previous.moved) onCommit(previous.height);
+    sheet.finishResize(commit && previous.moved ? { expanded: true, held: previous.held } : previous);
+    setHeight(undefined);
+  };
+  const finishResize = sheet.finishResize;
+  useEffect(() => {
+    if (active) return;
+    drag.current = undefined;
+    setHeight(undefined);
+    finishResize();
+  }, [active, finishResize]);
+  const clamp = (value: number) => Math.max(geometry.minimum, Math.min(value, geometry.maximum));
+  return {
+    height,
+    onClick: (event: MouseEvent<HTMLButtonElement>) => {
+      const suppressed = suppressClick.current && event.detail > 0;
+      suppressClick.current = false;
+      if (suppressed) return;
+      sheet.toggle();
+    },
+    onPointerDown: (event: PointerEvent<HTMLButtonElement>) => {
+      if (event.button !== 0 || drag.current || !sheetRef.current) return;
+      event.preventDefault();
+      const startHeight = sheetRef.current.getBoundingClientRect().height / geometry.scale;
+      drag.current = { pointerId: event.pointerId, startY: event.clientY, startHeight, height: startHeight, moved: false, expanded: sheet.expanded, held: sheet.held };
+      suppressClick.current = false;
+      sheet.pauseResize();
+      setHeight(startHeight);
+      event.currentTarget.setPointerCapture(event.pointerId);
+      event.currentTarget.focus({ preventScroll: true });
+    },
+    onPointerMove: (event: PointerEvent<HTMLButtonElement>) => {
+      const current = drag.current;
+      if (!current || current.pointerId !== event.pointerId) return;
+      const distance = (current.startY - event.clientY) / geometry.scale;
+      if (!current.moved && Math.abs(distance) < 3) return;
+      current.moved = true;
+      current.height = clamp(current.startHeight + distance);
+      setHeight(current.height);
+    },
+    onPointerUp: (event: PointerEvent<HTMLButtonElement>) => { if (drag.current?.pointerId === event.pointerId) finish(true); },
+    onPointerCancel: (event: PointerEvent<HTMLButtonElement>) => { if (drag.current?.pointerId === event.pointerId) finish(false); },
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => {
+      if (event.key === "Escape" && drag.current) {
+        event.preventDefault();
+        event.stopPropagation();
+        finish(false);
+        return;
+      }
+      const next = event.key === "ArrowUp" ? expandedHeight + 24 : event.key === "ArrowDown" ? expandedHeight - 24
+        : event.key === "Home" ? geometry.minimum : event.key === "End" ? geometry.maximum : undefined;
+      if (next === undefined || drag.current) return;
+      event.preventDefault();
+      sheet.finishResize({ expanded: true, held: sheet.held });
+      onCommit(clamp(next));
+    },
+  };
 }
 
 function ElementChip({ centered, definition, onSelect, selected, session, view }: {
   centered: boolean;
-  definition: CanvasElementDefinition;
+  definition: SurfaceElementDefinition;
   onSelect: () => void;
   selected: boolean;
   session: SessionContext;
   view: RunView | undefined;
 }) {
-  const programs = useOptionalActorPrograms();
-  const app = programs?.listing?.apps.find((candidate) => candidate.id === definition.id);
+  const programs = useProgramSlot();
   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">
+  const attention = elementNeedsAttention(view, definition, programs?.needsAnswer(session, definition.id) ?? false);
+  return <button aria-pressed={selected && !centered} className={chipClass} data-tone="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>}
@@ -309,29 +429,29 @@ function ElementChip({ centered, definition, onSelect, selected, session, view }
   </button>;
 }
 
-function ColumnStage({ centered, element, navigation, peek, runId, session }: {
+function RunPanelStage({ centered, element, navigation, peek, runId, session }: {
   centered: boolean;
-  element: ColumnElement;
+  element: RunPanelElement;
   navigation: SessionNavigation;
   peek: number;
   runId: string;
   session: SessionContext;
 }) {
-  const host = useColumnHost();
-  const programs = useOptionalActorPrograms();
+  const host = useRunPanelHost();
+  const programs = useProgramSlot();
   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}>
+  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-app" 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">
+    <div className="relative flex min-h-0 flex-1 flex-col" data-run-panel="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>
+          <Button onClick={() => host.returnToRunPanel(runId, definition.id)} size="sm" variant="outline">Zurück ins Panel</Button>
         </div>
         : <Element definition={definition} navigation={navigation} session={session} />}
     </div>
@@ -373,10 +493,11 @@ function Sash({ onChange, onCommit, value }: { onChange: (next: number) => void;
   </div>;
 }
 
-function ActorColumnChat({ actor, cardSections, navigation, onNavigate, session, toolbarLeft, view }: {
+function ActorRunPanelChat({ actor, cardSections, navigation, notice, onNavigate, session, toolbarLeft, view }: {
   actor: RunActor;
   cardSections: readonly CardSectionContribution[];
   navigation: SessionNavigation;
+  notice: ReactNode;
   onNavigate: (selection: FlowSelection) => void;
   session: SessionContext;
   toolbarLeft: ReactNode;
@@ -387,9 +508,16 @@ function ActorColumnChat({ actor, cardSections, navigation, onNavigate, session,
     <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 className="flex-1" composer={<ActorChatControls actor={actor} presentation="panel" running={running} display="panel" toolbarLeft={toolbarLeft} view={view} />}>
+      {notice ?? <ActorChat actor={actor} conversation={session.actorConversations?.[actor.id]} historyError={session.conversationError} onNavigate={onNavigate}
+        presentation="inspector" primaryMessages={session.messages} running={running} display="panel" view={view} />}
     </ChatPanel>
   </div>;
 }
+
+/** Der Ladezustand mittig im Chat; er rückt nur hoch, wo er sonst unter die Eingabe geriete. */
+function RunPanelStartup({ state }: { state: SurfaceStartupState }) {
+  return <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto_minmax(var(--qsl-composer-height,0px),1fr)] justify-items-center overflow-hidden p-6">
+    <StartupNotice className="row-start-2" state={state} />
+  </div>;
+}

package/plugins/ragents.orchestration/web/{column/ColumnSettings.tsx → run-panel/RunPanelSettings.tsx}

@@ -1,33 +1,33 @@
 import { useEffect, useState } from "react";
-import { useAccess } from "@aicontainer/web/AccessContext";
-import { Button, Input } from "@aicontainer/web/ui";
-import { COLUMN_SETTINGS_LIMITS, DEFAULT_COLUMN_SETTINGS, saveColumnSettings, useColumnSettings, type ColumnSettings as ColumnSettingsValue } from "./column-settings";
+import { useAccess } from "@ragents/web/AccessContext";
+import { Button, Input } from "@ragents/web/ui";
+import { RUN_PANEL_SETTINGS_LIMITS, DEFAULT_RUN_PANEL_SETTINGS, saveRunPanelSettings, useRunPanelSettings, type RunPanelSettings as RunPanelSettingsValue } from "./run-panel-settings";
 
-type Draft = Record<keyof ColumnSettingsValue, string>;
+type Draft = Record<keyof RunPanelSettingsValue, string>;
 
-const toDraft = (value: ColumnSettingsValue): Draft => ({ sideWidth: String(value.sideWidth), openDelay: String(value.openDelay), closeDelay: String(value.closeDelay) });
+const toDraft = (value: RunPanelSettingsValue): Draft => ({ sideWidth: String(value.sideWidth), openDelay: String(value.openDelay), closeDelay: String(value.closeDelay) });
 
-const fields: readonly { key: keyof ColumnSettingsValue; label: string; unit: string }[] = [
+const fields: readonly { key: keyof RunPanelSettingsValue; label: string; unit: string }[] = [
   { key: "sideWidth", label: "Chat neben der Mini-App ab", unit: "px" },
   { key: "openDelay", label: "Hochschieben nach", unit: "ms" },
   { key: "closeDelay", label: "Zurück nach Verlassen nach", unit: "ms" },
 ];
 
-export function ColumnSettings() {
+export function RunPanelSettings() {
   const access = useAccess();
-  const stored = useColumnSettings();
+  const stored = useRunPanelSettings();
   const [draft, setDraft] = useState(() => toDraft(stored));
   const [message, setMessage] = useState<string>();
   const [error, setError] = useState<string>();
   useEffect(() => { setDraft(toDraft(stored)); }, [stored]);
   const writable = access.can("settings.write");
-  const save = (next: ColumnSettingsValue) => {
+  const save = (next: RunPanelSettingsValue) => {
     if (!writable) return;
     setError(undefined);
     setMessage(undefined);
     try {
-      saveColumnSettings(next);
-      setMessage("Einstellungen der Arbeitsspalte gespeichert.");
+      saveRunPanelSettings(next);
+      setMessage("Einstellungen des Run-Panels gespeichert.");
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : String(cause));
     }
@@ -40,10 +40,10 @@ export function ColumnSettings() {
     <div className="flex flex-wrap items-end gap-3">
       {fields.map(({ key, label, unit }) => <label className="grid gap-1.5" key={key}>
         <span>{label} ({unit})</span>
-        <Input className="w-[130px]" disabled={!writable} max={COLUMN_SETTINGS_LIMITS[key].max} min={COLUMN_SETTINGS_LIMITS[key].min} onChange={(event) => { setDraft({ ...draft, [key]: event.target.value }); setMessage(undefined); }} required step="1" type="number" value={draft[key]} />
+        <Input className="w-[130px]" disabled={!writable} max={RUN_PANEL_SETTINGS_LIMITS[key].max} min={RUN_PANEL_SETTINGS_LIMITS[key].min} onChange={(event) => { setDraft({ ...draft, [key]: event.target.value }); setMessage(undefined); }} required step="1" type="number" value={draft[key]} />
       </label>)}
       <Button disabled={!writable} type="submit">Speichern</Button>
-      <Button disabled={!writable} onClick={() => save(DEFAULT_COLUMN_SETTINGS)} variant="outline">Zurücksetzen</Button>
+      <Button disabled={!writable} onClick={() => save(DEFAULT_RUN_PANEL_SETTINGS)} 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>;