@schlenkr/ragents 0.1.19 → 0.1.20

package/plugins/ragents.actor-programs/web/AppsPanel.tsx

@@ -1,7 +1,6 @@
 import { useAccess } from "@ragents/web/AccessContext";
-import { ArrowLeftIcon, LayoutGridIcon } from "lucide-react";
+import { ArrowLeftIcon } from "lucide-react";
 import { Alert, Badge, Button, cn, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Spinner } from "@ragents/web/ui";
-import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "@ragents/web/Toolbar";
 import {
   useCallback,
   useEffect,
@@ -15,14 +14,10 @@ import { answerQuestion } from "@ragents/plugins/ragents.ask/web/api";
 import { QuestionCard } from "@ragents/plugins/ragents.ask/web/QuestionCard";
 import { ACTOR_PROGRAMS_STATE_ID } from "@ragents/host/plugin-support/actor-programs/contract";
 import {
-  useSurfaceController,
   type SessionContext,
-  type SessionHeaderContext,
   type WorkspaceTabContext,
 } from "@ragents/web/PluginRegistry";
 import { runViewFrom, type RunAction } from "@ragents/web/run-view";
-import { useSurfaceEntities } from "@ragents/plugins/ragents.orchestration/web/surface-entities";
-import { SURFACE_TILE_DRAG_TYPE } from "@ragents/plugins/ragents.orchestration/web/tile-docking";
 import { ProgramSlotContext, type ProgramSlot } from "@ragents/plugins/ragents.orchestration/web/program-slot";
 import {
   type RunApp,
@@ -34,7 +29,6 @@ import {
 import type { JsonValue } from "./bridge";
 import { actorProgramSourceView, ProgramSource } from "./ProgramSource";
 import { FunctionForm } from "./FunctionForm";
-import { ExpandIcon } from "./ExpandIcon";
 import { actorProgramsRevision } from "./state-revision";
 import { actorProgramViews, currentActorListing } from "./program-state";
 import { activeActorInvocations, readActorInvocation } from "./invocations";
@@ -47,7 +41,6 @@ export const RUN_TOOLS_TAB_ID = "ragents.actor-programs.tools";
 const entryIconClass = "flex size-[34px] items-center justify-center rounded-[10px] bg-[color-mix(in_srgb,var(--primary)_12%,var(--background))] text-primary";
 const headClass = "grid flex-none grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5 border-b border-border-soft px-workspace-inset py-[9px]";
 const sectionLabelClass = "mb-2 text-[0.66rem] tracking-[0.075em] text-muted-foreground uppercase";
-const quickIconClass = "grid size-[30px] flex-none place-items-center rounded-lg border border-info/25 bg-glass-app text-info";
 
 const ACTIVE_STATUSES = new Set(["queued", "running"]);
 const POLL_INTERVAL = 700;
@@ -79,18 +72,6 @@ export function ActorProgramsProvider({
   const [storedListing, setListing] = useState<ActorProgramsListing>();
   const listing = useMemo(() => currentActorListing(storedListing, session.runView), [storedListing, session.runView]);
   const [error, setError] = useState<string>();
-  const [fullscreen, setFullscreen] = useState<{ runId: string; appId: string }>();
-  const visibleApps = actorProgramApps(session).filter((app) => app.app.visible !== false);
-  const fullscreenAppId = fullscreen?.runId === runId && visibleApps.some((app) => app.id === fullscreen.appId)
-    ? fullscreen.appId : undefined;
-  const closeFullscreen = useCallback(() => setFullscreen(undefined), []);
-  const openFullscreen = useCallback((appId: string) => {
-    if (!actorProgramApps(session).some((app) => app.id === appId && app.app.visible !== false)) {
-      throw new Error("The actor view is not available on the surface.");
-    }
-    setFullscreen({ runId, appId });
-  }, [runId, session]);
-  useEffect(() => { if (fullscreen && !fullscreenAppId) setFullscreen(undefined); }, [fullscreen, fullscreenAppId]);
   const loadRevision = useRef(0);
 
   const refresh = useCallback(async () => {
@@ -172,23 +153,15 @@ export function ActorProgramsProvider({
   const value = useMemo<ActorProgramsContextValue>(() => ({
     api,
     error,
-    fullscreenAppId,
     invoke,
     listing,
-    openFullscreen,
-    closeFullscreen,
     refresh,
     runId,
-  }), [api, error, fullscreenAppId, invoke, listing, openFullscreen, closeFullscreen, refresh, runId]);
+  }), [api, error, invoke, listing, refresh, runId]);
   const slot = useMemo<ProgramSlot>(() => ({
     runId,
-    needsAnswer: (session, appId) => {
-      const app = listing?.apps.find((candidate) => candidate.id === appId);
-      return app !== undefined && pendingConfirmationFor(session, app) !== undefined;
-    },
-    openFullscreen,
     source: (view, actorId) => actorProgramSourceView(api, view, actorId),
-  }), [api, listing, openFullscreen, runId]);
+  }), [api, runId]);
   return <ActorProgramsContext.Provider value={value}>
     <ProgramSlotContext.Provider value={slot}>{children}</ProgramSlotContext.Provider>
   </ActorProgramsContext.Provider>;
@@ -376,55 +349,6 @@ export function ToolsPanel({ active, navigation, selection, session }: Workspace
   );
 }
 
-/** A click on a mini-app selects its tile on the surface; the surface is the surface controller of the orchestration plugin. */
-export function ActorProgramsHeader({ session }: SessionHeaderContext) {
-  const canArrange = useAccess().can("runs.inspect");
-  const surface = useSurfaceController();
-  const stage = useSurfaceEntities(session.session.id);
-  const { closeFullscreen, fullscreenAppId, openFullscreen } = useActorPrograms();
-  const apps = actorProgramApps(session).filter((app) => app.app.visible !== false);
-  if (apps.length === 0) return null;
-
-  return (
-    <nav aria-label="Actor views" className="flex min-w-0 flex-none items-stretch">
-      {apps.map((app) => (
-        <div role="group" aria-label={app.title} key={`app:${app.id}`}
-          className={cn("relative flex flex-none items-stretch border-r border-border hover:bg-accent focus-within:bg-accent",
-            fullscreenAppId === app.id && "bg-primary/12 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-[3px] after:bg-primary after:content-['']")}>
-        <ToolbarItem
-          as="button"
-          className="max-w-[214px] border-r-0 font-bold hover:not-disabled:bg-transparent"
-          draggable={canArrange}
-          onDragStart={(event) => {
-            if (!canArrange) { event.preventDefault(); return; }
-            event.dataTransfer.setData(SURFACE_TILE_DRAG_TYPE, `app:${app.id}`);
-            event.dataTransfer.effectAllowed = "move";
-            closeFullscreen();
-          }}
-          onClick={() => {
-            if (!surface) throw new Error("The app entries need the surface controller of the orchestration plugin.");
-            closeFullscreen();
-            surface.acceptSelection({ type: "run-app", id: app.id });
-          }}
-          aria-label={`Mini-app: ${app.title} of @${app.actorHandle}`}
-          title={`Mini-app: ${app.title} of @${app.actorHandle}${canArrange ? ". Drag onto a tile to dock." : ""}`}
-          type="button"
-        >
-          <span className={cn(quickIconClass, !stage.has(`app:${app.id}`) && "bg-transparent")}><LayoutGridIcon size={20} /></span>
-          <ToolbarCopy><ToolbarLabel>@{app.actorHandle}</ToolbarLabel><ToolbarText>{app.title}</ToolbarText></ToolbarCopy>
-        </ToolbarItem>
-        <ToolbarItem as="button" aria-expanded={fullscreenAppId === app.id} aria-label={`${app.title} ${fullscreenAppId === app.id ? "close full view" : "open in full view"}`}
-          title={`${app.title} ${fullscreenAppId === app.id ? "close full view" : "open in full view"}`}
-          className="relative w-[38px] justify-center border-r-0 p-0 hover:not-disabled:bg-transparent before:pointer-events-none before:absolute before:top-1/4 before:bottom-1/4 before:left-0 before:border-l before:border-dashed before:border-border-strong before:content-['']"
-          onClick={() => fullscreenAppId === app.id ? closeFullscreen() : openFullscreen(app.id)} type="button">
-          <ExpandIcon />
-        </ToolbarItem>
-        </div>
-      ))}
-    </nav>
-  );
-}
-
 export function ToolsBadge() {
   const { listing } = useActorPrograms();
   return listing && listing.tools.length > 0

package/plugins/ragents.actor-programs/web/EmbeddedApps.tsx

@@ -1,6 +1,5 @@
 import { useAccess } from "@ragents/web/AccessContext";
 import { Spinner } from "@ragents/web/ui";
-import { isRecord } from "@ragents/web/lib/guards";
 import { runActorFrom } from "@ragents/web/run-view";
 import type {
   SurfaceElementContext,
@@ -33,13 +32,6 @@ export function ActorProgramToolCardSection({ actor, session }: CardSectionConte
 
 export const actorProgramSurfaceElements = (session: SessionContext): readonly SurfaceElementDefinition[] =>
   actorProgramApps(session).flatMap((module): SurfaceElementDefinition[] => {
-    const rawPlacements = module.app.placements;
-    const placement = Array.isArray(rawPlacements) ? rawPlacements.find((entry) => isRecord(entry) && entry.kind === "canvas") : undefined;
-    const surface = isRecord(placement) ? placement : undefined;
-    if (surface && typeof surface.anchorActorId !== "string") {
-      throw new Error(`The surface placement of the actor view ${module.title} is invalid`);
-    }
-    if (surface && surface.anchorActorId !== module.actorId) throw new Error(`The view ${module.title} belongs to @${module.actorHandle}.`);
     return [{
       id: module.id,
       title: module.title,
@@ -61,7 +53,6 @@ export function ActorProgramSurfaceElement({ definition, session }: SurfaceEleme
       app={app}
       invoke={invoke}
       pendingConfirmationInvocationId={confirmation?.parameters.invocationId}
-      presentation="tiled"
       runId={runId}
       session={session}
     />

package/plugins/ragents.actor-programs/web/api.ts

@@ -17,8 +17,6 @@ export interface RunAppAction {
   confirmation: string | null;
 }
 
-export type RunAppPlacement = { kind: "canvas"; anchorActorId: string };
-
 export type RunAppInvocation = {
   id: string;
   actorId: string;
@@ -45,7 +43,6 @@ export interface RunApp {
   description?: string;
   revision: string;
   actions: RunAppAction[];
-  placements: RunAppPlacement[];
   state: { version: 1; revision: number; values: JsonValue };
   invocations: RunAppInvocation[];
 }
@@ -198,23 +195,10 @@ export const runAppInvocationFrom = (value: unknown): RunAppInvocation => {
   }
 };
 
-const runAppPlacementFrom = (value: unknown): RunAppPlacement => {
-  if (!isRecord(value)) throw new Error("An app placement is not an object");
-  if (value.kind === "canvas") {
-    return {
-      kind: "canvas",
-      anchorActorId: requiredString(value.anchorActorId, "placement.anchorActorId"),
-    };
-  }
-  throw new Error("kind of an app placement must be canvas");
-};
-
 export const runAppFrom = (value: unknown): RunApp => {
   if (!isRecord(value)) throw new Error("An app is not an object");
   if (!Array.isArray(value.actions)) throw new Error("actions of an app is not a list");
   if (!Array.isArray(value.invocations)) throw new Error("invocations of an app is not a list");
-  const rawPlacements = value.placements ?? [];
-  if (!Array.isArray(rawPlacements)) throw new Error("placements of an app is not a list");
   if (!isRecord(value.state) || value.state.version !== 1 || !Number.isSafeInteger(value.state.revision) || !isJsonValue(value.state.values)) throw new Error("state of a view does not match the state contract");
   const actions = unique(value.actions.map(runAppActionFrom), (action) => action.id, "actions");
   const invocations = unique(
@@ -227,12 +211,9 @@ export const runAppFrom = (value: unknown): RunApp => {
     throw new Error("An app execution refers to an unknown action");
   }
   if (value.visible !== undefined && typeof value.visible !== "boolean") throw new Error("visible of an app is not a boolean");
-  if (rawPlacements.length > 1) throw new Error("placements of an app contains more than one placement");
-  const placements = rawPlacements.map(runAppPlacementFrom);
   const id = requiredString(value.id, "view.id");
   if (!VIEW_ID_PATTERN.test(id)) throw new Error("view.id is not a valid identifier");
   const actorId = requiredString(value.actorId, "view.actorId");
-  if (placements.some((placement) => placement.anchorActorId !== actorId)) throw new Error("The view must be placed at its own actor");
   return {
     id,
     actorId,
@@ -244,7 +225,6 @@ export const runAppFrom = (value: unknown): RunApp => {
       : {}),
     revision: requiredString(value.revision, "app.revision"),
     actions,
-    placements,
     state: { version: 1, revision: value.state.revision as number, values: value.state.values },
     invocations,
   };

package/plugins/ragents.actor-programs/web/context.ts

@@ -5,10 +5,7 @@ import type { JsonValue } from "./bridge";
 export interface ActorProgramsContextValue {
   api: ActorProgramsApi;
   error: string | undefined;
-  fullscreenAppId: string | undefined;
   listing: ActorProgramsListing | undefined;
-  openFullscreen: (appId: string) => void;
-  closeFullscreen: () => void;
   refresh: () => Promise<void>;
   invoke: (
     appId: string,

package/plugins/ragents.actor-programs/web/index.tsx

@@ -7,12 +7,10 @@ import {
 import { createActorProgramsApi } from "./api";
 import {
   RUN_TOOLS_TAB_ID,
-  ActorProgramsHeader,
   ActorProgramsProvider,
   ToolsBadge,
   ToolsPanel,
 } from "./AppsPanel";
-import { FullscreenHost } from "./FullscreenHost";
 import {
   ActorProgramSurfaceElement,
   ActorProgramToolCardSection,
@@ -38,7 +36,6 @@ const configuredPlugin = (descriptor: WebPluginDescriptor, routePrefix: string):
     return (
       <ActorProgramsProvider api={api} session={session}>
         {children}
-        <FullscreenHost session={session} />
       </ActorProgramsProvider>
     );
   }
@@ -47,12 +44,6 @@ const configuredPlugin = (descriptor: WebPluginDescriptor, routePrefix: string):
     ...descriptor,
     needsRunView: true,
     SessionProvider: Provider,
-    sessionHeaders: [{
-      id: "ragents.actor-programs.quick-list",
-      placement: "surface",
-      order: 250,
-      Header: ActorProgramsHeader,
-    }],
     cardSections: [{
       id: "ragents.actor-programs.tools",
       order: 400,

package/plugins/ragents.orchestration/ragents-plugin.json

@@ -1,7 +1,6 @@
 {
   "id": "ragents.orchestration",
   "exports": {
-    "server": ["server/contract"],
-    "web": ["web/surface-entities", "web/program-slot", "web/tile-docking"]
+    "web": ["web/program-slot"]
   }
 }

package/plugins/ragents.orchestration/server/index.ts

@@ -1,6 +1,5 @@
 import {
   actorInputSchema,
-  agentTools,
   enqueueActorInput,
   eventResultSchemaOf,
   ScriptDriver,
@@ -10,17 +9,13 @@ import {
 import { runtimeProviderToken } from "@ragents/host/ragents/host-services.js";
 import { pluginAsset } from "@ragents/host/plugin-support/plugin-folder.js";
 import type { PluginModule } from "@ragents/host/plugin-support/plugin-module.js";
-import { boundToTools, handlebarsPrompt } from "@ragents/host/plugin-support/prompt.js";
-import { createSurfaceToolContributor, placeOnSurface } from "./surface-tool.js";
-import { surfacePlacementToken } from "./contract.js";
+import { handlebarsPrompt } from "@ragents/host/plugin-support/prompt.js";
 import { createRunStopContributor } from "./run-stop-tool.js";
 import { runManagementToken } from "@ragents/host/ragents/global-chat.js";
 
 const orchestrationPlugin: RAgentsPlugin = {
   manifest: { id: "ragents.orchestration" },
   register: (host) => {
-    host.functions(createSurfaceToolContributor());
-    host.provide(surfacePlacementToken, placeOnSurface(host.service(runtimeProviderToken)));
     host.functions(createRunStopContributor(
       (runId) => host.service(runManagementToken)().stop(runId),
       (error) => console.error("Run stop by the coordinator failed", error),
@@ -52,11 +47,6 @@ const orchestrationPlugin: RAgentsPlugin = {
     });
     host.prompts(
       handlebarsPrompt("ragents.orchestration.prompt", 600, pluginAsset("ragents.orchestration", "orchestration.hbs")),
-      boundToTools(
-        handlebarsPrompt("ragents.orchestration.surface", 650, pluginAsset("ragents.orchestration", "surface.hbs")),
-        "canvas_layout_replace",
-        "canvas_layout_place",
-      ),
     );
   },
 };

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

@@ -13,7 +13,7 @@ const emptyMessages: readonly Message[] = [];
 export function ActorChat({ actor, view, presentation, display = presentation, primaryMessages = emptyMessages, conversation, historyError, running = false, className, onNavigate, scrollerRef }: {
   actor: RunActor;
   view: RunView;
-  presentation: "surface" | "inspector";
+  presentation: "panel" | "inspector";
   /** Key of the display surface for the remembered detail level; defaults to the presentation. */
   display?: string;
   primaryMessages?: readonly Message[];

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

@@ -16,7 +16,7 @@ export function ActorChatControls({ actor, view, composerVisible = true, present
   actor: RunActor;
   view: RunView;
   composerVisible?: boolean;
-  presentation?: "surface" | "inspector" | "panel";
+  presentation?: "inspector" | "panel";
   display?: string;
   running?: boolean;
   toolbarLeft?: ReactNode;

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

@@ -42,8 +42,6 @@ interface FlowInspectorProps {
   actorConversations?: Readonly<Record<string, readonly Message[]>>;
   conversationError?: string;
   primaryRunning: boolean;
-  /** Display surface for the remembered detail level; the popout registers separately from the side inspector. */
-  chatDisplay?: string;
 }
 
 const inspectorClass = "flex h-full min-h-0 flex-col bg-card";
@@ -549,7 +547,7 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
           actor={actor}
           view={view}
           presentation="inspector"
-          display={props.chatDisplay}
+          display="inspector"
           className="min-h-0 flex-1"
           primaryMessages={props.primaryMessages}
           conversation={props.actorConversations?.[actor.id]}
@@ -557,7 +555,7 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
           onNavigate={props.onNavigate}
           running={primary ? props.primaryRunning : lifecycle === "running"}
         />
-        <ActorChatControls actor={actor} view={view} composerVisible={props.composerVisible} display={props.chatDisplay}
+        <ActorChatControls actor={actor} view={view} composerVisible={props.composerVisible} display="inspector"
           running={primary ? props.primaryRunning : lifecycle === "running"} />
       </SectionTabs>
     </div>

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

@@ -0,0 +1,21 @@
+import type { WorkspaceTabContext } from "@ragents/web/PluginRegistry";
+import { Button } from "@ragents/web/ui";
+import { chatPrimaryId, runViewFrom } from "@ragents/web/run-view";
+import { FlowInspector, type FlowSelection } from "./FlowInspector";
+
+export const INSPECTION_TAB_ID = "ragents.orchestration.inspection";
+
+export function InspectionPanel({ navigation, selection, session }: WorkspaceTabContext) {
+  const view = runViewFrom(session.runView);
+  const primary = view && chatPrimaryId(view);
+  const selected = (selection ?? undefined) as FlowSelection | undefined;
+  return <div className="flex h-full min-h-0 flex-col">
+    <nav aria-label="Inspect participants" className="flex flex-none flex-wrap gap-1 border-b border-border p-2">
+      {view?.actors.map((actor) => <Button key={actor.id} onClick={() => navigation.openTab(INSPECTION_TAB_ID, { type: "actor", id: actor.id })} size="xs" variant="ghost">@{actor.handle}</Button>)}
+    </nav>
+    <div className="min-h-0 flex-1"><FlowInspector actorConversations={session.actorConversations} canGoBack={selected !== undefined} composerVisible={false}
+      conversationError={session.conversationError} onBack={() => navigation.openTab(INSPECTION_TAB_ID, null)}
+      onNavigate={(next) => navigation.openTab(INSPECTION_TAB_ID, next)} primaryMessages={session.messages}
+      primaryRunning={session.running} selection={selected ?? (primary ? { type: "actor", id: primary } : undefined)} view={view} /></div>
+  </div>;
+}

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

@@ -1,9 +1,8 @@
+import { SearchIcon } from "lucide-react";
+import { INSPECTION_TAB_ID, InspectionPanel } from "./InspectionPanel";
 import { useEffect, useState } from "react";
-import { OrchestrationCenter } from "./Center";
 import { OrchestrationRunPanel } from "./run-panel/RunPanel";
 import { DocumentsSection } from "./DocumentsSection";
-import { RunPanelSettings } from "./run-panel/RunPanelSettings";
-import { ActorShortcuts } from "./ActorSurfaceControls";
 import { JournalStatus } from "./JournalStatus";
 import { StopRunHeader } from "./StopRunButton";
 import { EXECUTIONS_TAB_ID, ExecutionsPanel, IconExecutions } from "./ExecutionsPanel";
@@ -18,7 +17,7 @@ import {
 
 export { ORCHESTRATION_PLUGIN_ID } from "./constants";
 
-/** The selection on the surface: an artifact opens the documents, every other entity becomes the selected tile and the reported location. */
+/** The selection on the surface: an artifact opens the documents; actors and mini-apps report the current location. */
 function OrchestrationSessionProvider({ children, navigation, session }: SessionProviderProps) {
   const runView = runViewFrom(session.runView);
   const [selection, setSelection] = useState<EntityReference>();
@@ -46,12 +45,8 @@ export const webPlugin: WebPlugin = {
   sessionStatus: [{ id: "ragents.orchestration.journal", readRight: "runs.inspect", order: 20, Status: JournalStatus }],
   sessionHeaders: [
     { id: "ragents.orchestration.stop", readRight: "runs.write", order: 100, Header: StopRunHeader },
-    { id: "ragents.orchestration.actors", order: 300, placement: "surface", Header: ActorShortcuts },
   ],
-  settings: [
-    { id: "ragents.orchestration.runPanel", category: "appearance", label: "Run panel", Settings: RunPanelSettings },
-  ],
-  surface: { Center: OrchestrationCenter, RunPanel: OrchestrationRunPanel },
+  surface: { RunPanel: OrchestrationRunPanel },
   cardSections: [{
     id: "ragents.orchestration.documents",
     order: 300,
@@ -59,6 +54,15 @@ export const webPlugin: WebPlugin = {
   }],
   SessionProvider: OrchestrationSessionProvider,
   workspaceTabs: [{
+    id: INSPECTION_TAB_ID,
+    readRight: "runs.inspect",
+    label: "Inspection",
+    order: 100,
+    Icon: SearchIcon,
+    Panel: InspectionPanel,
+    keepMounted: true,
+    available: (session) => runViewFrom(session.runView) !== undefined,
+  }, {
     id: EXECUTIONS_TAB_ID,
     readRight: "runs.inspect",
     label: "Executions",

package/plugins/ragents.orchestration/web/program-slot.ts

@@ -1,12 +1,9 @@
 import { createContext, useContext, type ReactNode } from "react";
-import type { SessionContext } from "@ragents/web/PluginRegistry";
 import type { RunView } from "@ragents/web/run-view";
 
 /** What an actor-program extension adds to the run panel and the inspector; without one both show no programs. */
 export interface ProgramSlot {
   runId: string;
-  needsAnswer: (session: SessionContext, appId: string) => boolean;
-  openFullscreen: (appId: string) => void;
   source: (view: RunView, actorId: string) => ReactNode;
 }
 

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

@@ -1,7 +1,6 @@
 import { useCallback, useId, useMemo, useRef, useState } from "react";
 import { ChevronDownIcon } from "lucide-react";
-import { Badge, cn, Input, Spinner } from "@ragents/web/ui";
-import { ActorHeaderModeControl } from "../ActorSurfaceControls";
+import { Badge, Input, Spinner } from "@ragents/web/ui";
 import { ActorPopout } from "../ActorPopout";
 import type { RunActor, RunView } from "@ragents/web/run-view";
 import { pendingInputCount } from "./run-panel-actors";
@@ -11,50 +10,38 @@ import { ActorIcon, AddresseeTree } from "./AddresseeTree";
 const chipClass = "flex h-7 min-w-[70px] max-w-[220px] flex-[0_1_auto] cursor-pointer items-center gap-1.5 rounded-full border border-border bg-background pr-2 pl-1 text-[0.72rem] font-semibold text-foreground hover:bg-accent aria-expanded:border-primary focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:outline-offset-1";
 const busyClass = "flex h-7 min-w-0 flex-[0_1_auto] cursor-pointer items-center gap-1.5 rounded-md px-1.5 text-[0.7rem] text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:outline-offset-1";
 
-/** The chat's addressee as a chip in the input bar; the pop-out shows the actors as a tree by creator, the hidden ones behind their count. */
-export function AddresseeControl({ hidden, onOpenChange, onReveal, onSelect, runId, selected, shown, technical, view }: {
-  hidden: readonly RunActor[];
-  onOpenChange: (open: boolean) => void;
-  onReveal: (actor: RunActor) => void;
+/** The chat's addressee as a chip in the input bar; the pop-out shows the actors as a tree by creator, including stopped actors. */
+export function AddresseeControl({ actors, onSelect, selected, technical, view }: {
+  actors: readonly RunActor[];
   onSelect: (actor: RunActor) => void;
-  runId: string;
   selected: RunActor;
-  shown: readonly RunActor[];
   technical: boolean;
   view: RunView;
 }) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
-  const [hiddenListed, setHiddenListed] = useState(false);
   const [toggled, setToggled] = useState<ReadonlySet<string>>(() => new Set());
   const buttonRef = useRef<HTMLButtonElement>(null);
   const panelId = useId();
-  const change = useCallback((next: boolean) => {
-    setOpen(next);
-    onOpenChange(next);
-  }, [onOpenChange]);
   const close = useCallback((restoreFocus = false) => {
-    change(false);
+    setOpen(false);
     setQuery("");
     if (restoreFocus) buttonRef.current?.focus({ preventScroll: true });
-  }, [change]);
+  }, []);
   const revealSelected = useCallback((element: HTMLDivElement | null) => {
     element?.querySelector("[aria-current=true]")?.scrollIntoView({ block: "nearest" });
   }, []);
-  const working = useMemo(() => [...shown, ...hidden].filter((actor) => actor.lifecycle?.kind === "running" && actor.id !== selected.id), [hidden, selected.id, shown]);
+  const working = useMemo(() => actors.filter((actor) => actor.lifecycle?.kind === "running" && actor.id !== selected.id), [actors, selected.id]);
   const summary = useMemo(() => addresseeSummaries(view), [view]);
   const searching = query.trim() !== "";
-  const shownTree = useMemo(() => addresseeTree(view, addresseeMatches(view, shown, query, summary)), [query, shown, summary, view]);
-  const hiddenMatches = useMemo(() => addresseeMatches(view, hidden, query, summary), [hidden, query, summary, view]);
-  const hiddenTree = useMemo(() => addresseeTree(view, hiddenMatches), [hiddenMatches, view]);
-  const hiddenOpen = hiddenListed || (searching && hiddenMatches.length > 0);
+  const tree = useMemo(() => addresseeTree(view, addresseeMatches(view, actors, query, summary)), [actors, query, summary, view]);
   const toggle = useCallback((key: string) => setToggled((current) => {
     const next = new Set(current);
     if (!next.delete(key)) next.add(key);
     return next;
   }), []);
-  const pick = (actor: RunActor, reveal: boolean) => {
-    (reveal ? onReveal : onSelect)(actor);
+  const pick = (actor: RunActor) => {
+    onSelect(actor);
     close(true);
   };
   const busyTitle = working.map((actor) => `@${actor.handle} is working`).join(", ");
@@ -63,33 +50,25 @@ export function AddresseeControl({ hidden, onOpenChange, onReveal, onSelect, run
   const listClass = "px-1.5 py-1";
 
   return <>
-    <button aria-controls={open ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog" className={chipClass} onClick={() => change(!open)} ref={buttonRef} title={`Addressee: @${selected.handle}. Click to choose another actor`} type="button">
+    <button aria-controls={open ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog" className={chipClass} onClick={() => setOpen(!open)} ref={buttonRef} title={`Addressee: @${selected.handle}. Click to choose another actor`} type="button">
       <ActorIcon actor={selected} className="size-5" view={view} />
       <span className="truncate">@{selected.handle}</span>
       <ChevronDownIcon aria-hidden className="size-3 flex-none text-muted-foreground" />
     </button>
-    {working.length > 0 && <button className={busyClass} onClick={() => change(!open)} title={busyTitle} type="button">
+    {working.length > 0 && <button className={busyClass} onClick={() => setOpen(!open)} title={busyTitle} type="button">
       <Spinner aria-hidden className="size-3 flex-none" />
       <span className="truncate in-data-[compact=true]:hidden">@{working[0].handle}</span>
       {busyPending > 0 && <Badge className="h-4 min-w-4 px-1 text-[0.6rem]" variant="secondary">{busyPending}</Badge>}
       {working.length > 1 && <span className="flex-none">+{working.length - 1}</span>}
     </button>}
     {open && <ActorPopout buttonRef={buttonRef} closeLabel="Close addressee" height={460} id={panelId} label="Addressee" onClose={close} open placement="top" role="dialog" width="available">
-      {shown.length + hidden.length > ADDRESSEE_SEARCH_ABOVE && <div className="flex-none border-b border-border-soft px-2.5 py-1.5">
+      {actors.length > ADDRESSEE_SEARCH_ABOVE && <div className="flex-none border-b border-border-soft px-2.5 py-1.5">
         <Input aria-label="Search actors" className="h-7" onChange={(event) => setQuery(event.target.value)} placeholder="Search handle or task ..." type="search" value={query} />
       </div>}
       <div className="min-h-0 flex-1 overflow-auto overscroll-contain" ref={revealSelected}>
-        <AddresseeTree className={listClass} nodes={shownTree} onPick={(actor) => pick(actor, false)} {...treeProps} />
-        {searching && shownTree.length === 0 && hiddenMatches.length === 0 && <p className="px-3.5 py-2 text-muted-foreground">No actor matches the search.</p>}
-        {hidden.length > 0 && (!searching || hiddenMatches.length > 0) && <div className="border-t border-border-soft">
-          <button aria-expanded={hiddenOpen} className="flex w-full cursor-pointer items-center justify-between gap-2 px-3.5 py-2 text-left text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2" onClick={() => setHiddenListed(!hiddenOpen)} type="button">
-            <span>{hidden.length} hidden actors</span>
-            <ChevronDownIcon aria-hidden className={cn("size-3.5 flex-none transition-transform", hiddenOpen && "rotate-180")} />
-          </button>
-          {hiddenOpen && <AddresseeTree className={listClass} nodes={hiddenTree} onPick={(actor) => pick(actor, true)} {...treeProps} />}
-        </div>}
+        <AddresseeTree className={listClass} nodes={tree} onPick={pick} {...treeProps} />
+        {searching && tree.length === 0 && <p className="px-3.5 py-2 text-muted-foreground">No actor matches the search.</p>}
       </div>
-      <div className="flex flex-none items-stretch border-t border-border-soft"><ActorHeaderModeControl runId={runId} /></div>
     </ActorPopout>}
   </>;
 }