@schlenkr/ragents 0.1.19 → 0.1.20

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

@@ -1,82 +1,49 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, 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 { runApps, selectedRunApp, RunAppView } from "@ragents/web/run-apps";
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
+import { ArrowUpRightIcon, LayoutGridIcon, SearchIcon } from "lucide-react";
 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 { useRunPanelHost } from "@ragents/web/run-panel/host";
+import { useSurfaceController, type SurfaceCenterContext, type CardSectionContribution, type SessionContext, type SessionNavigation } from "@ragents/web/PluginRegistry";
+import { INSPECTION_TAB_ID } from "../InspectionPanel";
+import { Button, StartupNotice } from "@ragents/web/ui";
 import { ActorChat } from "../ActorChat";
 import { ActorChatControls } from "../ActorChatControls";
-import { useActorHeaderMode } from "../actor-header-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 { useProgramSlot } from "../program-slot";
 import { chatPrimaryId, runViewFrom, type RunActor, type RunView } from "@ragents/web/run-view";
 import { AddresseeControl } from "./AddresseeControl";
-import { runPanelActors, elementNeedsAttention, partitionRunPanelActors } from "./run-panel-actors";
-import { useRunPanelSettings } from "./run-panel-settings";
+import { runPanelActors } from "./run-panel-actors";
 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";
+import { saveRunPanelState, useRunPanelState, type RunPanelState } from "./run-panel-state";
 
-const SHEET_BLUR_DELAY = 220;
-
-const chipRowClass = "flex flex-none flex-wrap items-center gap-1.5 border-b border-border bg-shell px-2 py-1.5";
-const chipClass = "flex h-7 max-w-[200px] flex-none cursor-pointer items-center gap-1.5 rounded-full border border-border bg-card pr-2 pl-1 text-[0.72rem] font-semibold text-foreground hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:outline-offset-1 aria-pressed:border-primary aria-pressed:bg-primary/10";
-const chatLayoutClass: Readonly<Record<ChatLayout, string>> = {
-  full: "relative flex min-h-0 min-w-0 flex-1 flex-col",
-  side: "relative flex min-h-0 min-w-0 flex-col",
-  floating: "absolute inset-x-2.5 bottom-0 z-20 flex flex-col overflow-hidden rounded-t-2xl border border-b-0 border-border bg-card shadow-[0_-16px_60px_#00000080] transition-[height] duration-300 ease-[cubic-bezier(.32,.72,0,1)] motion-reduce:transition-none",
-};
+const chipClass = "flex h-7 max-w-[200px] flex-none cursor-pointer items-center gap-1.5 rounded-full border border-border bg-card px-2 text-[0.72rem] font-semibold text-foreground hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 aria-selected:border-primary aria-selected:bg-primary/10";
+const viewClass = "relative flex min-h-0 min-w-0 flex-1 flex-col";
 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: RunPanelChatMode; title: string }[] = [
-  { Icon: MessageSquareIcon, label: "Chat only", mode: "chat", title: "Chat only: the chat fills the run panel, the mini-app steps back" },
-  { Icon: PanelBottomIcon, label: "Chat at bottom", mode: "bottom", title: "Chat at bottom: the sheet over the mini-app" },
-  { Icon: PanelRightIcon, label: "Chat on right", mode: "side", title: "Chat on right: next to the mini-app" },
-];
-
-interface RunPanelElement {
-  Element: SurfaceElementContribution["Element"];
-  definition: SurfaceElementDefinition;
-}
 
 export function OrchestrationRunPanel(props: SurfaceCenterContext) {
   return <RunPanel key={props.session.session.id} {...props} />;
 }
 
-function RunPanel({ surfaceElements, cardSections, navigation, renderChat, session, toolbarContainer }: SurfaceCenterContext) {
+function RunPanel({ surfaceElements, cardSections, navigation, renderChat, session }: SurfaceCenterContext) {
   const runId = session.session.id;
+  const surface = useSurfaceController();
   const inspect = useAccess().can("runs.inspect");
   const host = useRunPanelHost();
   const view = runViewFrom(session.runView);
   const stored = useRunPanelState(runId);
-  const centered = useCenterElements(runId);
-  const rootRef = useRef<HTMLDivElement>(null);
-  const sheetRef = useRef<HTMLElement>(null);
-  const grabRef = useRef<HTMLButtonElement>(null);
-  const statusRef = useRef<HTMLButtonElement>(null);
-  const [chatWidth, setChatWidth] = useState(stored.chatWidth);
-  const [width, setWidth] = useState(0);
-  const [addresseeOpen, setAddresseeOpen] = useState(false);
-  const settings = useRunPanelSettings();
-  useEffect(() => setChatWidth(stored.chatWidth), [stored.chatWidth]);
-  useEffect(() => {
-    const root = rootRef.current;
-    if (!root) return;
-    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
-    observer.observe(root);
-    return () => observer.disconnect();
-  }, []);
   const save = useCallback((patch: Partial<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 }))), [surfaceElements, session]);
-  const selectedElement = elements.find((entry) => entry.definition.id === stored.element) ?? elements[0];
+  const elements = useMemo(() => runApps(session, surfaceElements), [surfaceElements, session]);
+  const selectedElement = host.kind === "browser" ? selectedRunApp(elements, stored.element) : undefined;
+  useEffect(() => {
+    if (host.kind === "browser" && session.connected && stored.element !== null && !selectedElement) save({ element: null });
+  }, [host.kind, save, selectedElement, session.connected, stored.element]);
+  const [visited, setVisited] = useState<ReadonlySet<string>>(() => new Set(stored.element ? [stored.element] : []));
+  const selectedId = selectedElement?.definition.id;
+  useEffect(() => {
+    if (selectedId) setVisited((current) => current.has(selectedId) ? current : new Set([...current, selectedId]));
+  }, [selectedId]);
   const startup = useRunPanelStartup(
     surfaceStartupState({ view, startup: session.startup, connected: session.connected, running: session.running, error: session.conversationError }),
     session.connected,
@@ -84,424 +51,82 @@ function RunPanel({ surfaceElements, cardSections, navigation, renderChat, sessi
   );
   const notice = startup ? <RunPanelStartup state={startup} /> : undefined;
   const actors = useMemo(() => view ? runPanelActors(view, inspect) : [], [inspect, view]);
-  const mode = useActorHeaderMode(runId);
-  const preferences = useSurfaceViewPreferences(runId);
-  const appActorIds = useMemo(() => new Set(elements.flatMap(({ definition }) => definition.anchorActorId ? [definition.anchorActorId] : [])), [elements]);
   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(() => partitionRunPanelActors(actors, {
-    mode,
-    primaryId,
-    selectedId: selectedActor?.id,
-    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) => {
-    saveSurfaceViewPreferences(runId, { ...preferences, actorVisibility: { ...preferences.actorVisibility, [actor.id]: true } });
+  const [visitedActors, setVisitedActors] = useState<ReadonlySet<string>>(() => new Set(stored.actor ? [stored.actor] : []));
+  const selectActor = useCallback((actor: RunActor) => {
+    setVisitedActors((current) => new Set([...current, actor.id]));
     save({ actor: actor.id });
-  }, [preferences, runId, save]);
+  }, [save]);
   const navigate = useCallback((selection: FlowSelection) => {
     const actor = selection.type === "actor" ? actors.find((entry) => entry.id === selection.id) : undefined;
     if (actor) selectActor(actor);
-  }, [actors, selectActor]);
+    else if (inspect) navigation.openTab(INSPECTION_TAB_ID, selection);
+  }, [actors, inspect, navigation, selectActor]);
   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, 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;
-    const scroller = scrollerRef.current;
-    if (!scroller) return;
-    const toBottom = () => { scroller.scrollTop = scroller.scrollHeight; };
-    toBottom();
-    const timer = window.setTimeout(toBottom, 320);
-    return () => window.clearTimeout(timer);
-  }, [layout, sheet.expanded]);
-  const status = useMemo(() => {
-    if (layout !== "floating" || !selectedActor) return undefined;
-    const messages = primarySelected ? session.messages : session.actorConversations?.[selectedActor.id] ?? [];
-    const working = primarySelected ? session.connected && (session.running || runIsWorking(session.runView, runId)) : selectedActor.lifecycle?.kind === "running";
-    return sheetStatus(messages, working, selectedActor.handle);
-  }, [layout, primarySelected, runId, selectedActor, session.actorConversations, session.connected, session.messages, session.runView, session.running]);
-
-  const addressee = view && selectedActor && <AddresseeControl
-    hidden={hidden}
-    onOpenChange={setAddresseeOpen}
-    onReveal={revealActor}
+    const selection = selectedElement ? { type: "run-app", id: selectedElement.definition.id }
+      : selectedActor ? { type: "actor", id: selectedActor.id } : undefined;
+    if (surface?.selection?.type !== selection?.type || surface?.selection?.id !== selection?.id) surface?.acceptSelection(selection);
+  }, [selectedActor, selectedElement, surface]);
+  const addressee = view && selectedActor && <><AddresseeControl
+    actors={actors}
     onSelect={selectActor}
-    runId={runId}
     selected={selectedActor}
-    shown={shown}
     technical={inspect}
     view={view}
-  />;
-  const chatModeSwitch = selectedElement && toolbarContainer && createPortal(<ChatModeSwitch
-    narrow={narrow}
-    onChange={(chat) => save({ chat })}
-    selected={stored.chat}
-    sideWidth={settings.sideWidth}
-  />, toolbarContainer);
-  const chat = primarySelected || !view || !selectedActor
-    ? 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 bg-app" data-run-panel="run" ref={rootRef}>
-    {chatModeSwitch}
-    {layout !== "full" && elements.length > 1 && <nav aria-label="Mini-apps of the run" className={chipRowClass}>
-      {elements.map(({ definition }) => <ElementChip
-        centered={centered.has(definition.id)}
-        definition={definition}
+  />{inspect && <Button aria-label={`Inspect @${selectedActor.handle}`} onClick={() => navigation.openTab(INSPECTION_TAB_ID, { type: "actor", id: selectedActor.id })} size="icon-sm" title="Inspect actor" variant="ghost"><SearchIcon /></Button>}</>;
+
+  return <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-app" data-run-panel="run">
+    {elements.length > 0 && <nav aria-label="Mini-apps of the run" className="flex flex-none flex-wrap items-center gap-1.5 border-b border-border bg-shell px-2 py-1.5" role={host.kind === "browser" ? "tablist" : undefined}>
+      {host.kind === "browser" && <button aria-selected={!selectedElement} className={chipClass} onClick={() => save({ element: null })} role="tab" type="button">Chat</button>}
+      {elements.map(({ definition }) => <button
+        aria-selected={host.kind === "browser" ? definition.id === selectedElement?.definition.id : undefined}
+        className={chipClass}
         key={definition.id}
-        onSelect={() => centered.has(definition.id)
-          ? host.openInCenter(runId, definition.id, definition.title ?? definition.id)
-          : save({ element: definition.id })}
-        selected={definition.id === selectedElement?.definition.id}
-        session={session}
-        view={view}
-      />)}
-    </nav>}
-    <div className={cn("relative min-h-0 min-w-0 flex-1", layout === "side" ? "grid" : "flex flex-col")} data-chat-layout={layout} style={layout === "side" ? { gridTemplateColumns: `minmax(0,1fr) auto ${chatWidth}px` } : undefined}>
-      {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()) })}
-        value={chatWidth}
-      />}
-      {layout === "floating" && <div
-        aria-hidden
-        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={cn(chatLayoutClass[layout], layout === "floating" && "[&_[data-chat=composer]]:[--qsl-panel-height:var(--sheet-available-height)] [&: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" ? (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: resize.height ?? (sheet.expanded ? expandedHeight : geometry.minimum), transition: resize.height !== undefined ? "none" : undefined, "--sheet-available-height": `${geometry.available}px` } as CSSProperties : undefined}
+        onClick={() => {
+          if (host.kind === "vscode") host.openApp(runId, definition.id, definition.title ?? definition.id);
+          else {
+            setVisited((current) => new Set([...current, definition.id]));
+            save({ element: definition.id });
+          }
+        }}
+        role={host.kind === "browser" ? "tab" : undefined}
+        type="button"
       >
-        {layout === "floating" && <button
-          aria-expanded={sheet.expanded}
-          aria-label="Height of the expanded chat"
-          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}
-          role="separator"
-          title={`Drag: set the expanded height. Click: ${sheet.expanded ? "lower chat" : "raise chat"}.`}
-          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-[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}
-          type="button"
-        >
-          {status.kind === "working" && <Spinner aria-hidden className="size-3 flex-none" />}
-          <span className="truncate">{status.text}</span>
-        </button>}
-        {chat}
-      </section>
-    </div>
-  </div>;
-}
-
-/** The three views of the run panel in the header; "Chat on right" stays disabled while the run panel is too narrow. */
-function ChatModeSwitch({ narrow, onChange, selected, sideWidth }: {
-  narrow: boolean;
-  onChange: (mode: RunPanelChatMode) => void;
-  selected: RunPanelChatMode;
-  sideWidth: number;
-}) {
-  return <div aria-label="Run panel view" 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
-        aria-label={label}
-        aria-pressed={selected === mode}
-        className={chatModeButtonClass}
-        disabled={blocked}
-        key={mode}
-        onClick={() => onChange(mode)}
-        size="icon-sm"
-        title={blocked ? `Chat stays at the bottom while the panel is narrower than ${sideWidth} pixels` : title}
-        variant="ghost"
-      ><Icon /></Button>;
+        <LayoutGridIcon aria-hidden className="size-3" />
+        <span className="truncate">{definition.title ?? definition.id}</span>
+        {host.kind === "vscode" && <ArrowUpRightIcon aria-hidden className="size-3" />}
+      </button>)}
+    </nav>}
+    <section aria-label="Chat" className={viewClass} data-view={primarySelected ? "chat" : "actor-chat"} hidden={selectedElement !== undefined} inert={selectedElement !== undefined} style={selectedElement ? { display: "none" } : undefined}>
+      <div className={viewClass} hidden={!primarySelected} inert={!primarySelected} style={primarySelected ? undefined : { display: "none" }}>
+        {renderChat({ chatElementClassName: chatSurfaceClass, notice, toolbarLeft: addressee })}
+      </div>
+      {view && actors.filter((actor) => actor.id !== primaryId && (visitedActors.has(actor.id) || actor.id === selectedActor?.id)).map((actor) => {
+        const selected = actor.id === selectedActor?.id;
+        return <div className={viewClass} hidden={!selected} inert={!selected} key={actor.id} style={selected ? undefined : { display: "none" }}>
+          <ActorRunPanelChat actor={actor} cardSections={cardSections} navigation={navigation} notice={notice} onNavigate={navigate} session={session} toolbarLeft={addressee} view={view} />
+        </div>;
+      })}
+    </section>
+    {host.kind === "browser" && elements.filter(({ definition }) => visited.has(definition.id) || definition.id === selectedElement?.definition.id).map((element) => {
+      const selected = element === selectedElement;
+      return <section aria-label={`Mini-app ${element.definition.title ?? element.definition.id}`} className={viewClass} hidden={!selected} inert={!selected} key={element.definition.id} role="tabpanel" style={selected ? undefined : { display: "none" }}>
+        <RunAppView app={element} navigation={navigation} session={session} />
+      </section>;
     })}
   </div>;
 }
 
-/** The sheet: mouse, focus or the grip raise it; Escape, the stage or the grip lower it. An open pop-out keeps it up. */
-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(() => { 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 (resizing.current || guard.current.held || guard.current.blocked
-        || (document.activeElement !== grabRef.current && sheetRef.current?.contains(document.activeElement))) return;
-      setExpanded(false);
-    }, delay);
-  }, [cancel, grabRef, sheetRef]);
-  const close = useCallback(() => {
-    cancel();
-    setHeld(false);
-    setExpanded(false);
-    if (document.activeElement instanceof HTMLElement && sheetRef.current?.contains(document.activeElement)) document.activeElement.blur();
-  }, [cancel, sheetRef]);
-  const toggle = useCallback(() => {
-    if (expanded) { close(); return; }
-    setHeld(true);
-    open();
-  }, [close, expanded, open]);
-  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: 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, held, open, openLater, closeLater, close, toggle, pauseResize, finishResize };
-}
-
-/** The height of the collapsed sheet: grip, status line and input including open actions above it, measured on the input of the chat frame. */
-function useSheetPeek(active: boolean, sheetRef: RefObject<HTMLElement | null>, grabRef: RefObject<HTMLButtonElement | null>, statusRef: RefObject<HTMLButtonElement | null>, actorId: string | undefined) {
-  const [geometry, setGeometry] = useState({ minimum: 0, maximum: 0, available: 0, scale: 1 });
-  useLayoutEffect(() => {
-    if (!active) return;
-    const sheet = sheetRef.current;
-    const grab = grabRef.current;
-    const status = statusRef.current;
-    const composer = sheet?.querySelector<HTMLElement>('[data-chat="composer"]');
-    const container = sheet?.parentElement;
-    if (!sheet || !grab || !composer || !container) throw new Error("The panel sheet cannot find the grip, input or frame.");
-    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 available = Math.floor(container.getBoundingClientRect().height / scale * 0.9);
-      const maximum = Math.max(minimum, available);
-      setGeometry((previous) => previous.minimum === minimum && previous.maximum === maximum && previous.available === available && previous.scale === scale ? previous : { minimum, maximum, available, 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 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: SurfaceElementDefinition;
-  onSelect: () => void;
-  selected: boolean;
-  session: SessionContext;
-  view: RunView | undefined;
-}) {
-  const programs = useProgramSlot();
-  const title = definition.title ?? definition.id;
-  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} is in the center. Click brings the window to the front.` : `Show mini-app ${title}`} 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="Answer expected" className="grid size-4 flex-none place-items-center rounded-full bg-warning text-[0.62rem] font-bold text-background" role="img">!</span>}
-    {centered && <ArrowUpRightIcon aria-hidden className="size-3 flex-none text-muted-foreground" />}
-  </button>;
-}
-
-function RunPanelStage({ centered, element, navigation, peek, runId, session }: {
-  centered: boolean;
-  element: RunPanelElement;
-  navigation: SessionNavigation;
-  peek: number;
-  runId: string;
-  session: SessionContext;
-}) {
-  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-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={`Move ${title} to the center`} onClick={() => host.openInCenter(runId, definition.id, title)} size="icon-sm" title="Move to the center" variant="ghost"><ArrowUpRightIcon /></Button>
-        : programs && <Button aria-label={`Open ${title} in full view`} onClick={() => programs.openFullscreen(definition.id)} size="icon-sm" title="Full view" variant="ghost"><Maximize2Icon /></Button>}
-    </div>
-    <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} is in the center.</span>
-          <Button onClick={() => host.returnToRunPanel(runId, definition.id)} size="sm" variant="outline">Back to panel</Button>
-        </div>
-        : <Element definition={definition} navigation={navigation} session={session} />}
-    </div>
-  </section>;
-}
-
-/** The vertical grip between stage and the chat next to it; dragging left makes the chat wider. */
-function Sash({ onChange, onCommit, value }: { onChange: (next: number) => void; onCommit: (next: number) => void; value: number }) {
-  const drag = useRef<{ startX: number; startWidth: number }>(undefined);
-  const finish = (event: PointerEvent<HTMLDivElement>) => {
-    if (!drag.current) return;
-    drag.current = undefined;
-    event.currentTarget.releasePointerCapture(event.pointerId);
-    onCommit(value);
-  };
-  return <div
-    aria-label="Chat width"
-    aria-orientation="vertical"
-    aria-valuenow={value}
-    className="flex w-2.5 flex-none cursor-col-resize touch-none items-center justify-center border-r border-l border-border bg-shell select-none hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2"
-    onKeyDown={(event) => {
-      const step = event.key === "ArrowRight" ? -24 : event.key === "ArrowLeft" ? 24 : 0;
-      if (step === 0) return;
-      event.preventDefault();
-      onChange(value + step);
-      onCommit(value + step);
-    }}
-    onPointerCancel={finish}
-    onPointerDown={(event) => {
-      drag.current = { startX: event.clientX, startWidth: value };
-      event.currentTarget.setPointerCapture(event.pointerId);
-    }}
-    onPointerMove={(event) => { if (drag.current) onChange(drag.current.startWidth + drag.current.startX - event.clientX); }}
-    onPointerUp={finish}
-    role="separator"
-    tabIndex={0}
-  >
-    <span aria-hidden className="h-10 w-1 rounded-full bg-border-strong" />
-  </div>;
-}
-
-function ActorRunPanelChat({ actor, cardSections, navigation, notice, onNavigate, session, toolbarLeft, view }: {
+export function ActorRunPanelChat({ actor, cardSections, navigation, notice, onNavigate, session, toolbarLeft, view }: {
   actor: RunActor;
   cardSections: readonly CardSectionContribution[];
   navigation: SessionNavigation;
-  notice: ReactNode;
+  notice?: ReactNode;
   onNavigate: (selection: FlowSelection) => void;
   session: SessionContext;
-  toolbarLeft: ReactNode;
+  toolbarLeft?: ReactNode;
   view: RunView;
 }) {
   const running = actor.lifecycle?.kind === "running";

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

@@ -1,5 +1,3 @@
-import type { SurfaceElementDefinition } from "@ragents/web/PluginRegistry";
-import { actorVisibleInHeader, type ActorHeaderMode } from "../actor-header-settings";
 import { chatPrimaryId, type RunActor, type RunView } from "@ragents/web/run-view";
 
 /** The actors of the chip row: coordinator first, then in creation order; without the inspect right only LLM agents. */
@@ -10,30 +8,5 @@ export const runPanelActors = (view: RunView, inspect: boolean): RunActor[] => {
   return [...primary, ...candidates.filter((actor) => actor.id !== primaryId)];
 };
 
-export interface RunPanelActorFilter {
-  mode: ActorHeaderMode;
-  onStage: (actor: RunActor) => boolean;
-  primaryId: string | null | undefined;
-  selectedId: string | undefined;
-}
-
-/** Visible according to the surface's actor display; the coordinator and the selected actor always stay as a chip. */
-export const partitionRunPanelActors = (actors: readonly RunActor[], filter: RunPanelActorFilter): { shown: RunActor[]; hidden: RunActor[] } => {
-  const shown: RunActor[] = [];
-  const hidden: RunActor[] = [];
-  for (const actor of actors) {
-    const pinned = actor.id === filter.primaryId || actor.id === filter.selectedId;
-    (pinned || actorVisibleInHeader(actor, filter.mode, filter.onStage(actor)) ? shown : hidden).push(actor);
-  }
-  return { shown, hidden };
-};
-
 export const pendingInputCount = (view: RunView, actorId: string): number =>
   view.inputs.filter((input) => input.actorId === actorId && input.lifecycle.kind === "pending").length;
-
-export const pendingActionCount = (view: RunView, askedBy: string): number =>
-  view.actions.filter((action) => action.status === "pending" && action.askedBy === askedBy).length;
-
-/** A chip carries an exclamation mark when a host confirmation or an action of the actor waits for input. */
-export const elementNeedsAttention = (view: RunView | undefined, definition: SurfaceElementDefinition, confirmationPending: boolean): boolean =>
-  confirmationPending || (view !== undefined && definition.anchorActorId !== undefined && pendingActionCount(view, definition.anchorActorId) > 0);