@schlenkr/ragents 0.1.18 → 0.1.20

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

@@ -1,133 +0,0 @@
-import { useAccess } from "@ragents/web/AccessContext";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-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 { 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: SurfaceCenterContext) {
-  return <RunOrchestrationCenter key={props.session.session.id} {...props} />;
-}
-
-function RunOrchestrationCenter({
-  cardSections,
-  surfaceElements,
-  navigation,
-  session,
-  statusContainer,
-  runToolbarContainer,
-}: SurfaceCenterContext) {
-  const inspect = useAccess().can("runs.inspect");
-  const surface = useSurfaceController();
-  if (!surface) throw new Error("The surface needs the surface controller of the orchestration plugin.");
-  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 } = useSurfacePresentation(session.session.id, runView);
-  const [presentationError, setPresentationError] = useState<string>();
-  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 ? !actorVisibleOnSurface(actor, appActorIds, preferences, runView.primaryActorId) : actor.kind === "script")).map((actor) => actor.id) ?? [],
-  [inspect, runView, appActorIds, preferences]);
-  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"
-      && (inspect || actor.kind === "agent")).map((actor) => `@${actor.handle}`) ?? []),
-  ]);
-  /** Without any stored tree the visible participants are split once; only a real change is saved. */
-  const fallbackRoot = useMemo(() => personalLayout === null && programLayout.layout?.root === undefined
-    ? initialTileLayout([
-      ...visibleApps,
-      ...(runView?.actors.filter((actor) => actor.kind !== "human" && actor.lifecycle?.kind !== "stopped" && !hiddenActorIds.includes(actor.id)).map((actor) => `@${actor.handle}`) ?? []),
-    ])
-    : null, [personalLayout, programLayout, visibleApps, runView, hiddenActorIds]);
-  const root = presentation.root ?? fallbackRoot;
-  const hasVisibleContent = tileEntities(root).some((entity) => visibleEntities.has(entity));
-  const stageEntities = useMemo(() => new Set(tileEntities(root)), [root]);
-  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;
-
-  const visibleStageSize = useCallback((): { width: number; height: number } | undefined => {
-    const element = stageRef.current;
-    if (!element) return undefined;
-    const stage = element.getBoundingClientRect();
-    const panel = document.getElementById("workspace-panel")?.getBoundingClientRect();
-    const overlap = panel ? Math.min(stage.right, panel.right) - Math.max(stage.left, panel.left) : 0;
-    return { width: stage.width - Math.max(0, overlap), height: stage.height };
-  }, []);
-
-  useEffect(() => {
-    const element = stageRef.current;
-    if (!element) return;
-    const observer = new ResizeObserver(() => {
-      const size = visibleStageSize();
-      if (size) element.style.setProperty("--surface-visible-width", `${size.width}px`);
-    });
-    observer.observe(element);
-    const panel = document.getElementById("workspace-panel");
-    if (panel) observer.observe(panel);
-    return () => observer.disconnect();
-  }, [visibleStageSize]);
-
-  const handleSelect = useCallback((selection: EntityReference) => {
-    surface.acceptSelection(selection);
-  }, [surface]);
-
-  const changeTiles = (next: SurfaceTileNode | null) => {
-    try {
-      saveSurfacePresentation(session.session.id, { root: next, programBasis });
-      setPresentationError(undefined);
-    } catch (error) {
-      setPresentationError(error instanceof Error ? error.message : String(error));
-    }
-  };
-
-  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="Surface" order={20}>
-        <button className={statusControlClass} onClick={() => saveSurfacePresentation(session.session.id, null)}
-          title="Reset your own arrangement and follow the program arrangement" type="button">Apply program default</button>
-      </StatusGroup>}
-      {runToolbarContainer && createPortal(<><ActorHeaderModeControl runId={session.session.id} />{inspect && <ActorSurfaceControls session={session}
-        appActorIds={appActorIds} preferences={preferences}
-        onPreferencesChange={(next) => saveSurfaceViewPreferences(session.session.id, next)} />}</>, runToolbarContainer)}
-      <div aria-label="Surface" 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(--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 && <SurfaceStartup state={startupState} />}
-      </div>
-    </div>
-  );
-}
-
-/** Fine noise over the surface so the material does not look smooth. */
-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="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/SurfaceTiles.tsx

@@ -1,47 +0,0 @@
-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 { TiledSurface, type SurfaceTileItem } from "./TiledSurface";
-import { actorTone, type RunView } from "@ragents/web/run-view";
-
-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;
-  navigation: SessionNavigation;
-  onSelect: (selection: EntityReference) => void;
-  selected?: EntityReference;
-}) {
-  const inspect = useAccess().can("runs.inspect");
-  const actors = view.actors.filter((actor) => actor.kind !== "human" && actor.lifecycle?.kind !== "stopped"
-    && (inspect || actor.kind === "agent"));
-  const items: SurfaceTileItem[] = [
-    ...actors.map((actor): SurfaceTileItem => ({
-      entity: `@${actor.handle}`,
-      title: `${actor.displayName || actor.handle} (@${actor.handle})`,
-      tone: actorTone(view, actor),
-      content: actor.kind === "agent"
-        ? <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} />,
-    })),
-    ...surfaceElements.flatMap(({ Element, select }) => select(session)
-      .filter((definition) => definition.visible !== false)
-      .map((definition): SurfaceTileItem => ({
-        entity: `app:${definition.id}`,
-        title: definition.title ?? definition.id,
-        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 <TiledSurface root={root} onChange={onChange} items={items} canArrange={inspect}
-    selectedEntity={selected?.type === "actor" && selectedEntity ? `@${selectedEntity}` : selectedEntity} />;
-}

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

@@ -1,280 +0,0 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, CodeXml, LayoutGrid, Sparkles, GripVertical, X } from "lucide-react";
-import { surfaceTileNodeOf, type SurfaceTileNode } from "../tiled-layout";
-import { SURFACE_TILE_DRAG_TYPE, dockTile, removeTile, resizeTile, tileEntities, tileGeometry, tileMinimum, type TileDivider, type TileDockSide, type TileRect } from "./tile-docking";
-import { materialCardClass, materialHeadClass, materialIconClass, materialTitleClass } from "./MaterialBody";
-
-export interface SurfaceTileItem { entity: string; title: string; content: ReactNode; tone?: "agent" | "primary" | "script" | "app" }
-interface TiledSurfaceProps {
-  root: SurfaceTileNode | null;
-  onChange: (root: SurfaceTileNode | null) => void;
-  items: readonly SurfaceTileItem[];
-  canArrange: boolean;
-  selectedEntity?: string;
-  onSelect?: (entity: string) => void;
-}
-interface DockTarget { entity: string | null; side: TileDockSide }
-const sides: readonly TileDockSide[] = ["left", "right", "top", "bottom"];
-const sideNames = { left: "Dock left", right: "Dock right", top: "Dock top", bottom: "Dock bottom" };
-const sideIcons = { left: ArrowLeft, right: ArrowRight, top: ArrowUp, bottom: ArrowDown };
-const materialFaceRect = (slot: TileRect): TileRect => ({
-  left: slot.left + 2,
-  top: slot.top + 2,
-  width: Math.max(0, slot.width - 4),
-  height: Math.max(0, slot.height - 4),
-});
-const positioned = (rect: TileRect): CSSProperties => ({ left: rect.left, top: rect.top, width: rect.width, height: rect.height });
-const sidePlacement = {
-  left: { inner: "left-0 top-[40px]", outer: "left-0 top-[calc(50%_-_18px)]" },
-  right: { inner: "right-0 top-[40px]", outer: "right-0 top-[calc(50%_-_18px)]" },
-  top: { inner: "top-0 left-[40px]", outer: "top-0 left-[calc(50%_-_18px)]" },
-  bottom: { inner: "bottom-0 left-[40px]", outer: "bottom-0 left-[calc(50%_-_18px)]" },
-};
-const dockTargetClass = "absolute grid size-[36px] place-items-center rounded-[5px] border border-primary bg-surface text-primary shadow-[0_2px_8px_#0002] pointer-events-auto data-[active]:bg-primary data-[active]:text-surface [&>svg]:pointer-events-none";
-const dividerClass = "absolute z-3 grid touch-none place-items-center rounded-[4px] focus-visible:outline-2 focus-visible:outline-primary focus-visible:-outline-offset-2 data-[direction=horizontal]:cursor-col-resize data-[direction=vertical]:cursor-row-resize [&>span]:pointer-events-none [&>span]:rounded-[4px] [&>span]:bg-border-strong data-[direction=horizontal]:[&>span]:h-8 data-[direction=horizontal]:[&>span]:w-[3px] data-[direction=vertical]:[&>span]:h-[3px] data-[direction=vertical]:[&>span]:w-8 hover:[&>span]:bg-primary focus-visible:[&>span]:bg-primary";
-
-export function TiledSurface({ root, onChange, items, canArrange, selectedEntity, onSelect }: TiledSurfaceProps) {
-  const stageRef = useRef<HTMLDivElement>(null);
-  const [size, setSize] = useState({ width: 0, height: 0 });
-  const [available, setAvailable] = useState({ width: 0, height: 0 });
-  const [dragEntity, setDragEntity] = useState<string | null>(null);
-  const [target, setTarget] = useState<DockTarget | null>(null);
-  const [resizing, setResizing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [selected, setSelected] = useState<string>();
-  const [resizePreview, setResizePreview] = useState<SurfaceTileNode | null>(null);
-  const resizeFrame = useRef<number | null>(null);
-  const resizeRef = useRef<{ divider: TileDivider; start: number; root: SurfaceTileNode; next: SurfaceTileNode; pointerId: number; handle: HTMLDivElement } | null>(null);
-  const visibleRoot = resizePreview ?? root;
-  const entities = useMemo(() => tileEntities(root), [root]);
-  const mountedEntities = useMemo(() => [...entities].sort(), [entities]);
-  const itemMap = useMemo(() => new Map(items.map((item) => [item.entity, item])), [items]);
-  const minimum = root ? tileMinimum(root) : { width: 0, height: 0 };
-  const compact = available.width < minimum.width || available.height < minimum.height;
-  const active = selected && entities.includes(selected) ? selected : entities[0];
-  const rect = { left: 0, top: 0, ...size };
-  const geometry = useMemo(() => visibleRoot ? tileGeometry(visibleRoot, { left: 0, top: 0, ...size }) : { leaves: new Map<string, TileRect>(), dividers: [] }, [visibleRoot, size]);
-
-  useLayoutEffect(() => {
-    const stage = stageRef.current;
-    if (!stage) return;
-    const container = stage.parentElement!;
-    const measure = () => {
-      const width = stage.clientWidth;
-      const height = stage.clientHeight;
-      setSize((previous) => previous.width === width && previous.height === height ? previous : { width, height });
-      const style = getComputedStyle(container);
-      const availableWidth = container.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
-      const availableHeight = container.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
-      setAvailable((previous) => previous.width === availableWidth && previous.height === availableHeight
-        ? previous : { width: availableWidth, height: availableHeight });
-    };
-    const observer = new ResizeObserver(measure);
-    observer.observe(stage);
-    observer.observe(container);
-    measure();
-    return () => observer.disconnect();
-  }, []);
-
-  useEffect(() => { if (selectedEntity) setSelected(selectedEntity); }, [selectedEntity]);
-  useLayoutEffect(() => {
-    if (!canArrange) { setDragEntity(null); setTarget(null); return; }
-    let pendingFrame: number | null = null;
-    const cancelActivation = () => {
-      if (pendingFrame !== null) cancelAnimationFrame(pendingFrame);
-      pendingFrame = null;
-    };
-    const start = (event: DragEvent) => {
-      if (!event.dataTransfer?.types.includes(SURFACE_TILE_DRAG_TYPE)) return;
-      const entity = event.dataTransfer.getData(SURFACE_TILE_DRAG_TYPE);
-      if (!entity) return;
-      cancelActivation();
-      pendingFrame = requestAnimationFrame(() => {
-        pendingFrame = null;
-        if (!event.defaultPrevented) setDragEntity(entity);
-      });
-    };
-    const end = () => { cancelActivation(); setDragEntity(null); setTarget(null); };
-    const key = (event: KeyboardEvent) => { if (event.key === "Escape") end(); };
-    window.addEventListener("dragstart", start);
-    window.addEventListener("dragend", end);
-    window.addEventListener("drop", end);
-    window.addEventListener("keydown", key);
-    return () => {
-      cancelActivation();
-      window.removeEventListener("dragstart", start);
-      window.removeEventListener("dragend", end);
-      window.removeEventListener("drop", end);
-      window.removeEventListener("keydown", key);
-    };
-  }, [canArrange]);
-
-  const cancelResize = useCallback(() => {
-    if (resizeFrame.current !== null) cancelAnimationFrame(resizeFrame.current);
-    resizeFrame.current = null;
-    const state = resizeRef.current;
-    resizeRef.current = null;
-    if (state?.handle.hasPointerCapture(state.pointerId)) state.handle.releasePointerCapture(state.pointerId);
-    setResizePreview(null);
-    setResizing(false);
-  }, []);
-
-  useLayoutEffect(() => {
-    cancelResize();
-    return cancelResize;
-  }, [root, size, compact, cancelResize]);
-
-  useEffect(() => {
-    if (!resizing) return;
-    const key = (event: KeyboardEvent) => { if (event.key === "Escape") cancelResize(); };
-    window.addEventListener("keydown", key);
-    window.addEventListener("blur", cancelResize);
-    return () => {
-      window.removeEventListener("keydown", key);
-      window.removeEventListener("blur", cancelResize);
-    };
-  }, [resizing, cancelResize]);
-
-  const updateResize = (event: { pointerId: number; clientX: number; clientY: number }) => {
-    const state = resizeRef.current;
-    if (!state || state.pointerId !== event.pointerId) return;
-    const coordinate = state.divider.direction === "horizontal" ? event.clientX : event.clientY;
-    const ratio = Math.max(state.divider.minimum, Math.min(state.divider.maximum,
-      state.divider.ratio + (coordinate - state.start) / state.divider.span));
-    state.next = coordinate === state.start ? state.root : resizeTile(state.root, state.divider.path, ratio);
-  };
-
-  const select = (entity: string) => { setSelected(entity); onSelect?.(entity); };
-  const previewRoot = canArrange && target && dragEntity ? dockTile(root, dragEntity, target.entity, target.side) : null;
-  const previewMinimum = previewRoot ? tileMinimum(previewRoot) : null;
-  const preview = previewRoot && previewRoot !== root && previewMinimum && dragEntity
-    ? available.width < previewMinimum.width || available.height < previewMinimum.height
-      ? rect
-      : tileGeometry(previewRoot, rect).leaves.get(dragEntity)
-    : null;
-
-  const targets = (entity: string | null) => sides.map((side) => {
-    const Icon = sideIcons[side];
-    return <div key={side} className={`${dockTargetClass} ${sidePlacement[side][entity === null ? "outer" : "inner"]}`}
-      data-dock-side={side} data-dock-entity={entity ?? ""} title={sideNames[side]}
-      data-active={target?.entity === entity && target.side === side || undefined}>
-      <Icon size={18} aria-hidden="true" />
-    </div>;
-  });
-
-  return <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden p-2 data-[dragging]:[&_iframe]:pointer-events-none data-[resizing]:[&_iframe]:pointer-events-none"
-    data-dragging={canArrange && dragEntity !== null || undefined} data-resizing={resizing || undefined}>
-    {compact && entities.length > 1 && <label className="flex items-center gap-2 pb-2 text-[0.8rem]">Tile
-      <select className="max-w-[60%] min-w-0" aria-label="Visible tile" value={active} onChange={(event) => select(event.target.value)}>
-        {entities.map((entity) => <option key={entity} value={entity}>{itemMap.get(entity)?.title ?? entity}</option>)}
-      </select>
-      <span className="truncate text-muted-foreground">More space needed for the split view</span>
-    </label>}
-    <div ref={stageRef} className="relative min-h-0 min-w-0 flex-1 overflow-hidden"
-      onDragOver={(event) => {
-        if (!canArrange || dragEntity === null || !event.dataTransfer.types.includes(SURFACE_TILE_DRAG_TYPE)) return;
-        event.preventDefault();
-        event.dataTransfer.dropEffect = "move";
-        const element = event.target instanceof Element ? event.target.closest<HTMLElement>("[data-dock-side]") : null;
-        const next = element && stageRef.current?.contains(element)
-          ? { entity: element.dataset.dockEntity || null, side: element.dataset.dockSide as TileDockSide } : null;
-        setTarget((previous) => previous?.entity === next?.entity && previous?.side === next?.side ? previous : next);
-      }}
-      onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setTarget(null); }}
-      onDrop={(event) => {
-        if (!canArrange || dragEntity === null) return;
-        const entity = event.dataTransfer.getData(SURFACE_TILE_DRAG_TYPE);
-        if (!entity || entity !== dragEntity) return;
-        event.preventDefault();
-        if (!itemMap.has(entity) && !entities.includes(entity)) return;
-        const element = event.target instanceof Element ? event.target.closest<HTMLElement>("[data-dock-side]") : null;
-        try {
-          if (!root || element) {
-            const next = dockTile(root, entity, element?.dataset.dockEntity || null, (element?.dataset.dockSide ?? "right") as TileDockSide);
-            if (next !== root) onChange(next === null ? null : surfaceTileNodeOf(next));
-            select(entity);
-            setError(null);
-          }
-        } catch (cause) {
-          setError(cause instanceof Error ? cause.message : String(cause));
-        } finally {
-          setDragEntity(null);
-          setTarget(null);
-        }
-      }}>
-      {error && <div className="absolute inset-x-2 bottom-2 z-7 flex items-center gap-2 rounded-lg border border-primary bg-surface p-3 text-foreground shadow-[0_2px_8px_#0002]" role="alert"><span className="flex-1">{error}</span><button className="grid cursor-pointer place-items-center bg-transparent p-1" type="button" aria-label="Close message" onClick={() => setError(null)}><X size={16} /></button></div>}
-      {!root && <div className="grid h-full place-items-center rounded-lg border border-dashed border-border-strong p-6 text-center text-muted-foreground">{canArrange ? "Drag an actor or a mini-app from the header here." : "No content has been arranged for this tile view yet."}</div>}
-      {mountedEntities.map((entity) => {
-        const item = itemMap.get(entity);
-        const bounds = materialFaceRect(compact ? rect : geometry.leaves.get(entity)!);
-        return <section key={entity} className={materialCardClass(item?.tone ?? (entity.startsWith("app:") ? "app" : "agent"),
-          "absolute z-0 flex min-h-0 min-w-0 flex-col overflow-visible")} data-tile-entity={entity} data-tone="material"
-          style={{ ...positioned(bounds), display: compact && entity !== active ? "none" : undefined }}
-          onFocusCapture={() => { if (active !== entity) setSelected(entity); }}>
-          <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-[15.5px]">
-            <header className={`${materialHeadClass} flex-[0_0_49px] min-w-0 select-none border-b border-[#51465738] text-foreground [&[draggable=true]]:cursor-grab`}
-              draggable={canArrange} onDragStart={(event) => {
-              if (!canArrange) { event.preventDefault(); return; }
-              event.dataTransfer.setData(SURFACE_TILE_DRAG_TYPE, entity);
-              event.dataTransfer.effectAllowed = "move";
-            }}>
-              {canArrange && <GripVertical size={16} aria-hidden="true" />}
-              <span className={materialIconClass}>{item?.tone === "app" || entity.startsWith("app:") ? <LayoutGrid size={20} aria-hidden="true" /> : item?.tone === "script" ? <CodeXml size={20} aria-hidden="true" /> : <Sparkles size={20} aria-hidden="true" />}</span>
-              <span className={`${materialTitleClass} flex-1`} title={item?.title ?? entity}>{item?.title ?? entity}</span>
-              {canArrange && <button className="grid size-[26px] cursor-pointer place-items-center rounded-[4px] bg-transparent p-0 text-muted-foreground hover:bg-glass-group hover:text-foreground"
-                type="button" draggable={false} aria-label={`Remove tile ${item?.title ?? entity}`}
-                onClick={() => onChange(removeTile(root, entity))}><X size={16} /></button>}
-            </header>
-            <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-auto [&>*]:min-h-0 [&>*]:min-w-0 [&>*]:flex-1">{item?.content ?? <div className="p-4.5 text-muted-foreground">{canArrange ? "This content is no longer available. You can remove the tile or dock other content here." : "This content is no longer available."}</div>}</div>
-          </div>
-          {canArrange && dragEntity !== null && dragEntity !== entity && <div className="absolute inset-0 z-4"><div className="pointer-events-none absolute top-1/2 left-1/2 size-[116px] -translate-x-1/2 -translate-y-1/2">{targets(entity)}</div></div>}
-        </section>;
-      })}
-      {!compact && geometry.dividers.map((divider) => <div key={divider.path.join(".")} className={dividerClass}
-        role="separator" tabIndex={0} aria-label="Resize tile"
-        aria-orientation={divider.direction === "horizontal" ? "vertical" : "horizontal"}
-        aria-valuemin={Math.round(divider.minimum * 100)} aria-valuemax={Math.round(divider.maximum * 100)} aria-valuenow={Math.round(divider.ratio * 100)}
-        data-direction={divider.direction} style={positioned(divider)}
-        onPointerDown={(event) => {
-          if (event.button !== 0 || !event.isPrimary || !root || resizeRef.current) return;
-          event.preventDefault();
-          event.currentTarget.setPointerCapture(event.pointerId);
-          resizeRef.current = { divider, start: divider.direction === "horizontal" ? event.clientX : event.clientY, root, next: root, pointerId: event.pointerId, handle: event.currentTarget };
-          setResizing(true);
-        }}
-        onPointerMove={(event) => {
-          if (resizeRef.current?.pointerId !== event.pointerId) return;
-          updateResize(event);
-          if (resizeFrame.current !== null) return;
-          resizeFrame.current = requestAnimationFrame(() => {
-            resizeFrame.current = null;
-            if (resizeRef.current) setResizePreview(resizeRef.current.next);
-          });
-        }}
-        onPointerUp={(event) => {
-          const state = resizeRef.current;
-          if (!state || state.pointerId !== event.pointerId) return;
-          updateResize(event);
-          cancelResize();
-          if (state.next !== state.root) onChange(state.next);
-        }}
-        onLostPointerCapture={(event) => { if (resizeRef.current?.pointerId === event.pointerId) cancelResize(); }}
-        onPointerCancel={(event) => { if (resizeRef.current?.pointerId === event.pointerId) cancelResize(); }}
-        onKeyDown={(event) => {
-          if (event.key === "Escape" && resizeRef.current) { event.preventDefault(); cancelResize(); return; }
-          if (!root || resizeRef.current) return;
-          const negative = divider.direction === "horizontal" ? "ArrowLeft" : "ArrowUp";
-          const positive = divider.direction === "horizontal" ? "ArrowRight" : "ArrowDown";
-          if (event.key !== negative && event.key !== positive && event.key !== "Home" && event.key !== "End") return;
-          event.preventDefault();
-          const ratio = event.key === "Home" ? divider.minimum : event.key === "End" ? divider.maximum : divider.ratio + (event.key === positive ? 0.02 : -0.02);
-          onChange(resizeTile(root, divider.path, Math.max(divider.minimum, Math.min(divider.maximum, ratio))));
-        }}><span /></div>)}
-      {resizing && <div className="absolute inset-0 z-2" />}
-      {canArrange && dragEntity !== null && root && <div className="pointer-events-none absolute inset-2 z-6">{targets(null)}</div>}
-      {canArrange && dragEntity !== null && preview && <div className={materialCardClass(itemMap.get(dragEntity)?.tone ?? (dragEntity.startsWith("app:") ? "app" : "agent"),
-        "pointer-events-none absolute z-5 opacity-80")}
-        style={positioned(materialFaceRect(preview))}><div className="absolute inset-0 rounded-[15.5px] border-2 border-primary bg-primary/22" /></div>}
-    </div>
-  </div>;
-}

package/plugins/ragents.orchestration/web/actor-header-settings.ts

@@ -1,41 +0,0 @@
-import { createLocalStorageSetting } from "@ragents/web/lib/local-storage-setting";
-import type { RunActor } from "@ragents/web/run-view";
-
-export const ACTOR_HEADER_MODES = ["all", "active", "visible", "agent", "script"] as const;
-export type ActorHeaderMode = typeof ACTOR_HEADER_MODES[number];
-export const ACTOR_HEADER_MODE_LABELS: Record<ActorHeaderMode, string> = {
-  all: "All",
-  active: "Active",
-  visible: "Visible",
-  agent: "LLM agents",
-  script: "TypeScript",
-};
-
-export const actorHeaderStorageKey = (runId: string) => `ragents.orchestration.actor-header:v2:${runId}`;
-
-export function parseActorHeaderMode(raw: string | null): ActorHeaderMode {
-  if (raw === null) return "visible";
-  if (ACTOR_HEADER_MODES.some((mode) => mode === raw)) return raw as ActorHeaderMode;
-  throw new Error("The stored actor display is invalid. Allowed are all, active, visible, agent and script.");
-}
-
-export const actorOnStage = (actor: RunActor, primaryActorId: string | null | undefined, stage: ReadonlySet<string>) =>
-  actor.id === primaryActorId || stage.has(`@${actor.handle}`);
-
-export const actorVisibleInHeader = (actor: RunActor, mode: ActorHeaderMode, onStage: boolean) =>
-  actor.kind !== "human" && (mode === "all" || (mode === "active" ? actor.lifecycle?.kind !== "stopped" : mode === "visible" ? onStage : actor.kind === mode));
-
-const setting = createLocalStorageSetting({
-  changeEvent: "ragents-actor-header-change",
-  matchesKey: (key) => key.startsWith("ragents.orchestration.actor-header:"),
-  parse: parseActorHeaderMode,
-  serialize: (mode: ActorHeaderMode) => mode,
-});
-
-export function useActorHeaderMode(runId: string): ActorHeaderMode {
-  return setting.useValue(actorHeaderStorageKey(runId));
-}
-
-export function saveActorHeaderMode(runId: string, mode: ActorHeaderMode) {
-  setting.save(actorHeaderStorageKey(runId), mode);
-}

package/plugins/ragents.orchestration/web/run-panel/RunPanelSettings.tsx

@@ -1,50 +0,0 @@
-import { useEffect, useState } from "react";
-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 RunPanelSettingsValue, string>;
-
-const toDraft = (value: RunPanelSettingsValue): Draft => ({ sideWidth: String(value.sideWidth), openDelay: String(value.openDelay), closeDelay: String(value.closeDelay) });
-
-const fields: readonly { key: keyof RunPanelSettingsValue; label: string; unit: string }[] = [
-  { key: "sideWidth", label: "Chat next to the mini-app from", unit: "px" },
-  { key: "openDelay", label: "Slide up after", unit: "ms" },
-  { key: "closeDelay", label: "Slide back after leaving after", unit: "ms" },
-];
-
-export function RunPanelSettings() {
-  const access = useAccess();
-  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: RunPanelSettingsValue) => {
-    if (!writable) return;
-    setError(undefined);
-    setMessage(undefined);
-    try {
-      saveRunPanelSettings(next);
-      setMessage("Run panel settings saved.");
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : String(cause));
-    }
-  };
-  return <form className="grid gap-3" onSubmit={(event) => {
-    event.preventDefault();
-    save({ sideWidth: Number(draft.sideWidth), openDelay: Number(draft.openDelay), closeDelay: Number(draft.closeDelay) });
-  }}>
-    <p className="text-muted-foreground">From this panel width on, the chat sits to the right of the mini-app instead of as a sheet below it. The delays determine how long the mouse must rest over the sheet until it slides up, and how long it stays up after leaving. Applies immediately to all runs in this browser.</p>
-    <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={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">Save</Button>
-      <Button disabled={!writable} onClick={() => save(DEFAULT_RUN_PANEL_SETTINGS)} variant="outline">Reset</Button>
-    </div>
-    {error ? <p className="text-muted-foreground" role="alert">{error}</p> : message && <p className="text-muted-foreground" role="status">{message}</p>}
-  </form>;
-}

package/plugins/ragents.orchestration/web/run-panel/run-panel-settings.ts

@@ -1,47 +0,0 @@
-import { createLocalStorageSetting } from "@ragents/web/lib/local-storage-setting";
-
-/** Behavior of the run panel: from which width the chat sits next to the mini-app and how the sheet reacts to the mouse. */
-export interface RunPanelSettings {
-  sideWidth: number;
-  openDelay: number;
-  closeDelay: number;
-}
-
-export const DEFAULT_RUN_PANEL_SETTINGS: RunPanelSettings = Object.freeze({ sideWidth: 900, openDelay: 160, closeDelay: 150 });
-export const RUN_PANEL_SETTINGS_STORAGE_KEY = "ragents.orchestration.run-panel-settings";
-export const RUN_PANEL_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 parseRunPanelSettings(raw: string | null): RunPanelSettings {
-  if (raw === null) return DEFAULT_RUN_PANEL_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, RUN_PANEL_SETTINGS_LIMITS.sideWidth)
-    || !("openDelay" in value) || !inRange(value.openDelay, RUN_PANEL_SETTINGS_LIMITS.openDelay)
-    || !("closeDelay" in value) || !inRange(value.closeDelay, RUN_PANEL_SETTINGS_LIMITS.closeDelay)) {
-    throw new Error("The run panel settings are invalid: width 400 to 4000 pixels, delays 0 to 5000 and 10000 milliseconds respectively, integers.");
-  }
-  return value as RunPanelSettings;
-}
-
-const setting = createLocalStorageSetting({
-  changeEvent: "ragents-run-panel-settings-change",
-  matchesKey: (key) => key === RUN_PANEL_SETTINGS_STORAGE_KEY,
-  parse: parseRunPanelSettings,
-  serialize: JSON.stringify,
-});
-
-export function useRunPanelSettings(): RunPanelSettings {
-  return setting.useValue(RUN_PANEL_SETTINGS_STORAGE_KEY);
-}
-
-export function saveRunPanelSettings(value: RunPanelSettings) {
-  setting.save(RUN_PANEL_SETTINGS_STORAGE_KEY, value);
-}

package/plugins/ragents.orchestration/web/run-panel/sheet-status.ts

@@ -1,30 +0,0 @@
-import type { Message } from "quassel/events";
-
-/** The single line of the collapsed sheet: what the chat is doing right now or said last; open actions themselves are in the dock below. */
-export interface SheetStatus {
-  text: string;
-  kind: "idle" | "working" | "waiting";
-}
-
-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 - 3)}...` : line;
-};
-
-const senderOf = (message: Message, handle: string): string =>
-  message.role === "user" ? "You" : message.sender ?? `@${handle}`;
-
-export function sheetStatus(messages: readonly Message[], working: boolean, handle: string): SheetStatus {
-  const last = messages[messages.length - 1];
-  const waiting = messages.filter((message) => message.role === "action" && message.action?.status === undefined).length;
-  if (waiting > 0) return { kind: "waiting", text: waiting === 1 ? "Waiting for input" : `Waiting for ${waiting} inputs` };
-  if (working) {
-    if (last?.role === "thinking" && !last.closed) return { kind: "working", text: `@${handle} is thinking ...` };
-    if (last?.role === "tool" && last.tool && last.tool.result === undefined) return { kind: "working", text: `@${handle} is using ${last.tool.name} ...` };
-    if (last?.role === "assistant" && !last.closed && last.text.trim() !== "") return { kind: "working", text: `${senderOf(last, handle)} is answering: ${firstLine(last.text)}` };
-    return { kind: "working", text: `@${handle} is working ...` };
-  }
-  const spoken = [...messages].reverse().find((message) => (message.role === "user" || message.role === "assistant") && message.text.trim() !== "");
-  if (!spoken) return { kind: "idle", text: "No messages yet." };
-  return { kind: "idle", text: `${senderOf(spoken, handle)}: ${firstLine(spoken.text)}` };
-}