@schlenkr/ragents 0.1.5 → 0.1.6

package/apps/web/src/PluginChat.tsx

@@ -10,37 +10,38 @@ import {
   type ReactNode,
 } from "react";
 import { createPortal } from "react-dom";
-import { ChatInputToolbar } from "./chat/ChatInputToolbar";
-import { primaryIsProgram, programChatNotice, runIsWorking, stopChatWork } from "./chat/chat-target";
-import { ChatMessages } from "./chat/ChatMessages";
-import { ChatPanel } from "./chat/ChatPanel";
-import { DetailModeSwitch } from "./chat/DetailModeSwitch";
+import { ChatInputToolbar, ChatMessages, ChatPanel, type ChatAttachmentInput, type ChatEvent, type ToolInfo } from "quassel";
+import { primaryChatState, primaryIsProgram, programChatNotice, runIsWorking } from "./chat/chat-target";
+import { StoppedActorNotice } from "./chat/StoppedActorNotice";
+import { ChatViewSwitches, useChatViewSettings } from "./chat-view-settings";
 import { useChat } from "./chat/useChat";
 import { runUserLocation, type ChatRunLocation } from "./chat/user-location";
-import type { ChatEvent, ToolInfo } from "./chat/types";
-import { type SessionInfo } from "./api";
+import { dismissAction, interruptActorTurn, type SessionInfo } from "./api";
 import { useRunStore } from "./RunStore";
 import { withToolSummaries } from "./toolLine";
-import { StartOptionBadges, StartOptionsProvider } from "./StartOptions";
+import { StartOptionBadges, StartOptionControls, StartOptionsProvider, useStartOptions } from "./StartOptions";
 import { useAttachmentCapabilities } from "./chat/useAttachmentCapabilities";
-import { StartSurface } from "./StartSurface";
+import { StartSelection } from "./StartSelection";
 import { WorkspacePanel, useWorkspacePanelState, type WorkspacePanelState } from "./WorkspacePanel";
 import { StatusGroup } from "./StatusGroup";
-import { CanvasShortcuts } from "./CanvasShortcuts";
-import { ColumnRunHeader } from "./column/ColumnRunHeader";
+import { SurfaceShortcuts } from "./SurfaceShortcuts";
+import { RunPanelHeader } from "./run-panel/RunPanelHeader";
+import { RunPanelRail } from "./run-panel/RunPanelRail";
+import { RunPanelWorkspace } from "./run-panel/RunPanelWorkspace";
+import { activeWorkspaceTab, saveRunPanelWorkspaceState, useRunPanelWorkspaceState } from "./run-panel/workspace-state";
 import { ToolbarItem, ToolbarText } from "./Toolbar";
-import { DialogTitle, Spinner } from "./ui";
-import { CanvasModalContext, RunModalContext } from "./ui/dialog";
+import { cn, DialogTitle, Spinner } from "./ui";
+import { SurfaceModalContext, RunModalContext } from "./ui/dialog";
 import { Modal } from "./ui/modal";
 import {
   ChatStepsProvider,
   PluginSessionProviders,
+  useActionRenderer,
   useToolRenderer,
-  useChatSteps,
   primaryChatActor,
-  useCanvasController,
-  type ChatSurfaceOptions,
-  type ExtensionEvent,
+  useSurfaceController,
+  type ChatDisplayOptions,
+  type PluginEvent,
   type PluginRegistry,
   type SessionContext,
   type SessionNavigation,
@@ -50,10 +51,12 @@ import {
 
 const chatElementClass = "flex h-full min-h-0 w-full min-w-0 flex-1 flex-col overflow-hidden rounded-lg border border-border-soft/60 bg-card/55";
 
-/** workspace: Canvas und Werkstatt; column: die schmale Arbeitsspalte; element: genau ein Canvas-Element in voller Größe. */
-export type ChatLayout = "workspace" | "column" | { element: string };
+/** workspace: Fläche und Werkstatt; panel: das Run-Panel; element: genau ein Flächenelement in voller Größe. */
+export type ChatLayout = "workspace" | "panel" | { element: string };
 
 interface PluginChatProps {
+  autoFocusChat?: boolean;
+  onAutoFocusChatSettled?: () => void;
   layout?: ChatLayout;
   toolbarContainer?: HTMLElement | null;
   statusContainer?: HTMLElement | null;
@@ -70,6 +73,8 @@ interface PluginChatProps {
 }
 
 interface ChatWorkspaceProps {
+  autoFocusChat?: boolean;
+  onAutoFocusChatSettled?: () => void;
   layout: ChatLayout;
   toolbarContainer?: HTMLElement | null;
   statusContainer?: HTMLElement | null;
@@ -78,11 +83,10 @@ interface ChatWorkspaceProps {
   headerContainer?: HTMLElement | null;
   workspaceHeaderContainer?: HTMLElement | null;
   startDialog?: { onClose: () => void; initialEntryId?: string };
-  onStarted?: () => void;
+  onStarted: () => void;
   onModalContainer: (element: HTMLDivElement | null) => void;
-  onCanvasModalContainer: (element: HTMLDivElement | null) => void;
+  onSurfaceModalContainer: (element: HTMLDivElement | null) => void;
   navigation: SessionNavigation;
-  onCenterModeChange: (mode: SessionContext["centerMode"]) => void;
   pendingTabIds: readonly string[];
   registry: PluginRegistry;
   runError?: string;
@@ -90,19 +94,21 @@ interface ChatWorkspaceProps {
   tabs: readonly WorkspaceTabContribution[];
 }
 
-export function PluginChat({ layout = "workspace", headerContainer, toolbarContainer, workspaceHeaderContainer, statusContainer, initialStartOptions, onStarted, onLocationChange, onViewed, viewing = false, registry, session, startDialog }: PluginChatProps) {
+export function PluginChat({ autoFocusChat, onAutoFocusChatSettled, layout = "workspace", headerContainer, toolbarContainer, workspaceHeaderContainer, statusContainer, initialStartOptions, onStarted, onLocationChange, onViewed, viewing = false, registry, session, startDialog }: PluginChatProps) {
   const access = useAccess();
   const startOnly = startDialog !== undefined;
   const [modalContainer, setModalContainer] = useState<HTMLDivElement | null>(null);
-  const [canvasModalContainer, setCanvasModalContainer] = useState<HTMLDivElement | null>(null);
-  const [extensionEvents, setExtensionEvents] = useState<readonly ExtensionEvent[]>([]);
+  const [surfaceModalContainer, setSurfaceModalContainer] = useState<HTMLDivElement | null>(null);
+  const [pluginEvents, setPluginEvents] = useState<readonly PluginEvent[]>([]);
   const onChatEvent = useCallback((event: ChatEvent) => {
-    if (event.kind === "reset") setExtensionEvents([]);
-    if (event.kind !== "extension") return;
+    if (event.kind === "reset") setPluginEvents([]);
+    if (event.kind !== "plugin") return;
     const { pluginId, type, payload, at } = event;
-    setExtensionEvents((current) => [...current, { pluginId, type, payload, at }]);
+    setPluginEvents((current) => [...current, { pluginId, type, payload, at }]);
   }, []);
-  const { messages, running, connected, startup, send, start, stop } = useChat(session.id, onChatEvent, !startOnly);
+  const { messages, running, connected, startup, send: sendMessage, startSkill, start } = useChat(session.id, onChatEvent, !startOnly);
+  const send = useCallback((text: string, attachments?: ChatAttachmentInput[], entryId?: string) =>
+    entryId === undefined ? sendMessage(text, attachments) : startSkill(entryId, text, attachments), [sendMessage, startSkill]);
   const runStore = useRunStore(session.id, startOnly || registry.needsRunView || onViewed !== undefined, !startOnly);
   useEffect(() => {
     const view = runStore.view;
@@ -130,62 +136,43 @@ export function PluginChat({ layout = "workspace", headerContainer, toolbarConta
   useEffect(() => {
     if (startOnly && runExists) reportStarted();
   }, [reportStarted, runExists, startOnly]);
-  const [centerMode, setCenterMode] = useState<SessionContext["centerMode"]>("chat");
-  const [requestedTabId, setRequestedTabId] = useState<string | undefined>(undefined);
   const [tabSelections, setTabSelections] = useState<Record<string, unknown>>({});
   const [pendingTabIds, setPendingTabIds] = useState<readonly string[]>([]);
   const knownClientToolIds = useRef<Set<string>>(new Set());
 
-  const respond = useCallback(async (callId: string, payload: unknown) => {
-    const responder = registry.questionResponder;
-    if (!responder) throw new Error("Kein Plugin hat einen Question-Responder registriert");
-    return responder({ id: session.id }, callId, payload);
-  }, [registry, session.id]);
-
   const sessionContext = useMemo<SessionContext>(() => ({
-    centerMode,
     connected,
-    extensionEvents,
+    pluginEvents,
     messages,
     actorConversations: runStore.conversations,
     conversationError: runStore.error,
-    respond,
     runView: runStore.view,
     running,
     startup,
     send,
     session,
     start,
-    stop,
-  }), [centerMode, connected, extensionEvents, messages, respond, runStore.view, runStore.conversations, runStore.error, running, startup, send, session, start, stop]);
+  }), [connected, pluginEvents, messages, runStore.view, runStore.conversations, runStore.error, running, startup, send, session, start]);
 
   const registeredTabs = useMemo(() => registry.registeredTabs(sessionContext, access), [access, registry, sessionContext]);
   const availableTabs = useMemo(() => registry.availableTabs(sessionContext, access), [access, registry, sessionContext]);
-  const activeTabId = requestedTabId !== undefined && availableTabs.some((tab) => tab.id === requestedTabId)
-    ? requestedTabId
-    : availableTabs[0]?.id ?? "";
-
-  const [panelState, updatePanelState] = useWorkspacePanelState(session.id);
+  const { activeTabId, panelState, showTab, togglePanel } = useWorkspaceTabs(session.id, layout, availableTabs);
 
   const openTab = useCallback((tabId: string, selection?: unknown) => {
-    const available = registeredTabs.some((tab) => tab.id === tabId);
-    if (!available && registry.canvas?.tabId !== tabId) {
-      throw new Error("Arbeitsbereichs-Tab ist nicht registriert: " + tabId);
+    if (!registeredTabs.some((tab) => tab.id === tabId)) {
+      throw new Error("Reiter der Leiste ist nicht registriert: " + tabId);
     }
     if (selection !== undefined) {
       setTabSelections((current) => ({ ...current, [tabId]: selection }));
     }
-    if (available) {
-      setRequestedTabId(tabId);
-      updatePanelState("expanded");
-    }
-  }, [registeredTabs, registry.canvas?.tabId, updatePanelState]);
+    showTab(tabId);
+  }, [registeredTabs, showTab]);
 
   const selectionFor = useCallback((tabId: string) => tabSelections[tabId], [tabSelections]);
 
   const revealEntity = useCallback((entity: { type: string; id: string }) => {
     const target = registry.targetForEntity(entity, sessionContext);
-    if (!target || (!registeredTabs.some((tab) => tab.id === target.tabId) && registry.canvas?.tabId !== target.tabId)) return false;
+    if (!target || !registeredTabs.some((tab) => tab.id === target.tabId)) return false;
     openTab(target.tabId, target.selection);
     return true;
   }, [openTab, registeredTabs, registry, sessionContext]);
@@ -222,7 +209,7 @@ export function PluginChat({ layout = "workspace", headerContainer, toolbarConta
 
   return (
     <RunModalContext.Provider value={startOnly ? null : modalContainer}>
-    <CanvasModalContext.Provider value={startOnly ? null : canvasModalContainer}>
+    <SurfaceModalContext.Provider value={startOnly ? null : surfaceModalContainer}>
     <ChatStepsProvider policy={registry.chatDisplayPolicy}>
       <StartOptionsProvider
         connected={connected}
@@ -234,19 +221,20 @@ export function PluginChat({ layout = "workspace", headerContainer, toolbarConta
           {!startOnly && onLocationChange && <UserLocationReporter activeTabId={navigation.activeTabId} onChange={onLocationChange}
             panelVisible={panelState === "expanded"} runId={session.id} tabs={availableTabs} />}
           <ChatWorkspace
+            autoFocusChat={autoFocusChat}
+            onAutoFocusChatSettled={onAutoFocusChatSettled}
             layout={layout}
             toolbarContainer={toolbarContainer}
             panelState={panelState}
-            onTogglePanel={() => updatePanelState(panelState === "expanded" ? "collapsed" : "expanded")}
+            onTogglePanel={togglePanel}
             headerContainer={headerContainer}
             workspaceHeaderContainer={workspaceHeaderContainer}
             statusContainer={statusContainer}
             onModalContainer={setModalContainer}
-            onCanvasModalContainer={setCanvasModalContainer}
+            onSurfaceModalContainer={setSurfaceModalContainer}
             onStarted={reportStarted}
             startDialog={startDialog}
             navigation={navigation}
-            onCenterModeChange={setCenterMode}
             pendingTabIds={pendingTabIds}
             registry={registry}
             runError={runStore.error}
@@ -256,11 +244,40 @@ export function PluginChat({ layout = "workspace", headerContainer, toolbarConta
         </PluginSessionProviders>
       </StartOptionsProvider>
     </ChatStepsProvider>
-    </CanvasModalContext.Provider>
+    </SurfaceModalContext.Provider>
     </RunModalContext.Provider>
   );
 }
 
+/** Der Reiterzustand je Layout: im Web ein flüchtiger Reiter und der gespeicherte Aufklappzustand, im Run-Panel der je Run gespeicherte offene Reiter der Leiste. */
+function useWorkspaceTabs(runId: string, layout: ChatLayout, availableTabs: readonly WorkspaceTabContribution[]) {
+  const [requestedTabId, setRequestedTabId] = useState<string>();
+  const [workspaceState, updateWorkspaceState] = useWorkspacePanelState(runId);
+  const stored = useRunPanelWorkspaceState(runId);
+  const runPanel = layout === "panel";
+  const activeTabId = runPanel
+    ? activeWorkspaceTab(stored, availableTabs)
+    : requestedTabId !== undefined && availableTabs.some((tab) => tab.id === requestedTabId) ? requestedTabId : availableTabs[0]?.id ?? "";
+  const panelState: WorkspacePanelState = runPanel ? (activeTabId === "" ? "collapsed" : "expanded") : workspaceState;
+  const firstTabId = availableTabs[0]?.id ?? null;
+  const showTab = useCallback((tabId: string) => {
+    if (runPanel) {
+      saveRunPanelWorkspaceState(runId, { ...stored, tab: tabId });
+      return;
+    }
+    setRequestedTabId(tabId);
+    updateWorkspaceState("expanded");
+  }, [runId, runPanel, stored, updateWorkspaceState]);
+  const togglePanel = useCallback(() => {
+    if (runPanel) {
+      saveRunPanelWorkspaceState(runId, { ...stored, tab: panelState === "expanded" ? null : stored.tab ?? firstTabId });
+      return;
+    }
+    updateWorkspaceState(panelState === "expanded" ? "collapsed" : "expanded");
+  }, [firstTabId, panelState, runId, runPanel, stored, updateWorkspaceState]);
+  return { activeTabId, panelState, showTab, togglePanel };
+}
+
 function UserLocationReporter({ activeTabId, onChange, panelVisible, runId, tabs }: {
   activeTabId: string;
   onChange: (location: ChatRunLocation) => void;
@@ -268,8 +285,8 @@ function UserLocationReporter({ activeTabId, onChange, panelVisible, runId, tabs
   runId: string;
   tabs: readonly WorkspaceTabContribution[];
 }) {
-  const canvas = useCanvasController();
-  const location = runUserLocation(runId, activeTabId, tabs, panelVisible, canvas?.selection);
+  const surface = useSurfaceController();
+  const location = runUserLocation(runId, activeTabId, tabs, panelVisible, surface?.selection);
   const { tab, selection } = location;
   const type = selection?.type;
   const id = selection?.id;
@@ -280,6 +297,8 @@ function UserLocationReporter({ activeTabId, onChange, panelVisible, runId, tabs
 }
 
 function ChatWorkspace({
+  autoFocusChat,
+  onAutoFocusChatSettled,
   layout,
   toolbarContainer = null,
   panelState,
@@ -288,11 +307,10 @@ function ChatWorkspace({
   workspaceHeaderContainer,
   statusContainer = null,
   onModalContainer,
-  onCanvasModalContainer,
+  onSurfaceModalContainer,
   onStarted,
   startDialog,
   navigation,
-  onCenterModeChange,
   pendingTabIds,
   registry,
   runError,
@@ -301,16 +319,16 @@ function ChatWorkspace({
 }: ChatWorkspaceProps) {
   const access = useAccess();
   const [runToolbarContainer, setRunToolbarContainer] = useState<HTMLDivElement | null>(null);
-  const headerContributions = registry.sessionHeaders.filter((entry) => entry.placement !== "canvas" && (!entry.readRight || access.can(entry.readRight)));
-  const canvasContributions = registry.sessionHeaders.filter((entry) => entry.placement === "canvas" && (!entry.readRight || access.can(entry.readRight)));
+  const headerContributions = registry.headersFor(session, access, "header");
+  const surfaceContributions = registry.headersFor(session, access, "surface");
   const startSession = useMemo<SessionContext>(() => {
     const attempt = async (work: () => Promise<void>) => {
       await work();
-      onStarted?.();
+      onStarted();
     };
     return {
       ...session,
-      send: (text, attachments) => attempt(() => session.send(text, attachments)),
+      send: (text, attachments, entryId) => attempt(() => session.send(text, attachments, entryId)),
       start: (entryId, input) => attempt(() => session.start(entryId, input)),
     };
   }, [onStarted, session]);
@@ -327,18 +345,21 @@ function ChatWorkspace({
     };
   }, [attentionActive]);
   const hasWorkspace = !startDialog && tabs.length > 0;
-  const CanvasCenter = registry.canvas?.Center;
-  const CanvasColumn = registry.canvas?.Column;
+  const SurfaceCenter = registry.surface?.Center;
+  const SurfaceRunPanel = registry.surface?.RunPanel;
   const bindCompactContainers = useCallback((element: HTMLDivElement | null) => {
     onModalContainer(element);
-    onCanvasModalContainer(element);
-  }, [onCanvasModalContainer, onModalContainer]);
+    onSurfaceModalContainer(element);
+  }, [onSurfaceModalContainer, onModalContainer]);
 
   const renderTool = useToolRenderer();
 
-  const renderChat = (options: ChatSurfaceOptions = {}) => (
+  const renderChat = (options: ChatDisplayOptions = {}) => (
     <ChatSurface
+      autoFocus={autoFocusChat}
+      onAutoFocusSettled={onAutoFocusChatSettled}
       options={options}
+      registry={registry}
       renderTool={renderTool}
       session={session}
     />
@@ -346,16 +367,16 @@ function ChatWorkspace({
 
   if (startDialog) return (
     <Modal className="gap-0 p-0 [&_[data-slot=dialog-body]:has([data-preparation])]:overflow-hidden" nextBehavior="push" onClose={startDialog.onClose} scope="page" showCloseButton size="full">
-      <DialogTitle className="sr-only">Neue Unterhaltung</DialogTitle>
-      <StartSurface registry={registry} session={startSession} initialEntryId={startDialog.initialEntryId} />
+      <DialogTitle className="sr-only">Neuer Run</DialogTitle>
+      <StartSelection registry={registry} session={startSession} initialEntryId={startDialog.initialEntryId} onOpen={onStarted} />
     </Modal>
   );
 
   const status = registry.sessionStatus.filter((entry) => !entry.readRight || access.can(entry.readRight)).map(({ id, order, Status }) => <StatusGroup container={statusContainer} key={id} label="Run-Aktionen" order={order}>
     <Status navigation={navigation} session={session} />
   </StatusGroup>);
-  const header = headerContainer && createPortal(layout === "column"
-    ? <ColumnRunHeader attention={attention} contributions={headerContributions} navigation={navigation} registry={registry} runError={runError} session={session} working={session.running} />
+  const header = headerContainer && createPortal(layout === "panel"
+    ? <RunPanelHeader attention={attention} contributions={headerContributions} navigation={navigation} registry={registry} runError={runError} session={session} working={session.running} />
     : <div className="flex min-w-0 flex-[1_0_auto] items-stretch">
         <div className="flex min-w-0 flex-none items-stretch text-[0.82rem] font-semibold text-foreground">
           <ToolbarItem className="min-w-[140px] max-w-[260px] justify-start font-semibold max-md:min-w-[120px] max-md:max-w-[180px]" title={session.session.title}><ToolbarText>{session.session.title || "Neuer Run"}</ToolbarText></ToolbarItem>
@@ -382,21 +403,26 @@ function ChatWorkspace({
       {header}
       <div className="relative isolate flex min-h-0 min-w-0 flex-1" ref={bindCompactContainers}>
         {typeof layout === "object"
-          ? <CanvasElementView elementId={layout.element} navigation={navigation} registry={registry} session={session} />
-          : CanvasColumn
-            ? <CanvasColumn
-              toolbarContainer={toolbarContainer}
-              runToolbarContainer={null}
-              statusContainer={statusContainer}
-              cardSections={registry.cardSections}
-              canvasElements={registry.canvasElements}
-              navigation={navigation}
-              onCenterModeChange={onCenterModeChange}
-              renderChat={renderChat}
-              session={session}
-              tabIds={tabs.map((tab) => tab.id)}
-            />
-            : <DefaultCenter renderChat={renderChat} />}
+          ? <SurfaceElementView elementId={layout.element} navigation={navigation} registry={registry} session={session} />
+          : <>
+            <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
+              {SurfaceRunPanel
+                ? <SurfaceRunPanel
+                  toolbarContainer={toolbarContainer}
+                  runToolbarContainer={null}
+                  statusContainer={statusContainer}
+                  cardSections={registry.cardSections}
+                  surfaceElements={registry.surfaceElements}
+                  navigation={navigation}
+                  renderChat={renderChat}
+                  session={session}
+                  tabIds={tabs.map((tab) => tab.id)}
+                />
+                : <DefaultCenter renderChat={renderChat} />}
+              {hasWorkspace && <RunPanelWorkspace navigation={navigation} onClose={onTogglePanel} open={panelState === "expanded"} session={session} tabs={tabs} />}
+            </div>
+            {hasWorkspace && <RunPanelRail navigation={navigation} onClose={onTogglePanel} open={panelState === "expanded"} pendingTabIds={pendingTabIds} session={session} tabs={tabs} />}
+          </>}
       </div>
     </div>
   );
@@ -410,23 +436,22 @@ function ChatWorkspace({
         ref={onModalContainer}
       >
         <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-          {(CanvasCenter || canvasContributions.length > 0) && <div aria-label="Apps und Actors" className="flex min-h-[52px] min-w-0 flex-none items-stretch border-b border-border bg-[color-mix(in_srgb,var(--canvas)_55%,var(--card))]" role="region">
+          {(SurfaceCenter || surfaceContributions.length > 0) && <div aria-label="Apps und Actors" className="flex min-h-[52px] min-w-0 flex-none items-stretch border-b border-border bg-[color-mix(in_srgb,var(--surface)_55%,var(--card))]" role="region">
             <div className="flex flex-none items-stretch empty:hidden" ref={setRunToolbarContainer} />
-            <CanvasShortcuts key={session.session.id}>
-              {canvasContributions.map(({ id, Header }) => <Header key={id} navigation={navigation} session={session} />)}
-            </CanvasShortcuts>
+            <SurfaceShortcuts key={session.session.id}>
+              {surfaceContributions.map(({ id, Header }) => <Header key={id} navigation={navigation} session={session} />)}
+            </SurfaceShortcuts>
           </div>}
-        <div className="relative isolate flex min-h-0 min-w-0 flex-1" ref={onCanvasModalContainer}>
-        {CanvasCenter
+        <div className="relative isolate flex min-h-0 min-w-0 flex-1" ref={onSurfaceModalContainer}>
+        {SurfaceCenter
             ? (
-              <CanvasCenter
+              <SurfaceCenter
                 toolbarContainer={toolbarContainer}
                 runToolbarContainer={runToolbarContainer}
                 statusContainer={statusContainer}
                 cardSections={registry.cardSections}
-                canvasElements={registry.canvasElements}
+                surfaceElements={registry.surfaceElements}
                 navigation={navigation}
-                onCenterModeChange={onCenterModeChange}
                 renderChat={renderChat}
                 session={session}
                 tabIds={tabs.map((tab) => tab.id)}
@@ -452,7 +477,7 @@ function ChatWorkspace({
 }
 
 function DefaultCenter({ renderChat }: {
-  renderChat: (options?: ChatSurfaceOptions) => ReactNode;
+  renderChat: (options?: ChatDisplayOptions) => ReactNode;
 }) {
   return (
     <div className="relative flex min-h-0 min-w-0 flex-1">
@@ -463,14 +488,14 @@ function DefaultCenter({ renderChat }: {
   );
 }
 
-/** Ein Canvas-Element in voller Größe, etwa eine Mini-App im Editorbereich von VS Code. */
-function CanvasElementView({ elementId, navigation, registry, session }: {
+/** Ein Flächenelement in voller Größe, etwa eine Mini-App im Editorbereich von VS Code. */
+function SurfaceElementView({ elementId, navigation, registry, session }: {
   elementId: string;
   navigation: SessionNavigation;
   registry: PluginRegistry;
   session: SessionContext;
 }) {
-  const match = registry.canvasElements.flatMap((contribution) => contribution.select(session)
+  const match = registry.surfaceElements.flatMap((contribution) => contribution.select(session)
     .filter((definition) => definition.id === elementId && definition.visible !== false)
     .map((definition) => ({ Element: contribution.Element, definition })))[0];
   if (!match) return <div className="m-auto max-w-[420px] p-6 text-center text-muted-foreground" role="status">
@@ -482,29 +507,45 @@ function CanvasElementView({ elementId, navigation, registry, session }: {
 }
 
 function ChatSurface({
+  autoFocus,
+  onAutoFocusSettled,
   options,
+  registry,
   renderTool,
   session,
 }: {
-  options: ChatSurfaceOptions;
+  autoFocus?: boolean;
+  onAutoFocusSettled?: () => void;
+  options: ChatDisplayOptions;
+  registry: PluginRegistry;
   renderTool: (tool: ToolInfo) => ReactNode;
   session: SessionContext;
 }) {
   const access = useAccess();
   const writable = access.can("runs.write");
-  const steps = useChatSteps(session.session.id, primaryChatActor(session.runView));
+  const renderAction = useActionRenderer();
+  const chatView = useChatViewSettings(session.session.id, primaryChatActor(session.runView), "coordinator");
   const [sendError, setSendError] = useState<string>();
-  const attachments = useAttachmentCapabilities(session.session.id);
+  const startOptions = useStartOptions();
+  const attachments = useAttachmentCapabilities(session.session.id, "primary", JSON.stringify(startOptions.options.map(({ id, value }) => [id, value])));
   const messages = useMemo(() => withToolSummaries(session.messages), [session.messages]);
   const working = session.connected && (session.running || runIsWorking(session.runView, session.session.id));
+  const partner = primaryChatState(session.runView, session.session.id, session.running);
   return (
     <ChatPanel
-      className={options.chatElementClassName ? `${chatElementClass} ${options.chatElementClassName}` : chatElementClass}
+      className={cn(chatElementClass, options.chatElementClassName)}
       composer={
-        primaryIsProgram(session.runView, session.session.id) ? <p className="text-muted-foreground">{programChatNotice}</p> : <div className="[--input-card-radius:var(--radius-lg)]" onWheel={options.onComposerWheel}>
+        primaryIsProgram(session.runView, session.session.id) ? <div className="flex min-w-0 flex-col gap-1.5">
+          <p className="text-muted-foreground">{programChatNotice}</p>
+          <div className="flex min-w-0 flex-wrap items-center gap-2">{options.toolbarLeft}<ChatViewSwitches collapsible={false} settings={chatView} /></div>
+        </div>
+        : partner.kind === "stopped" ? <div className="[--qsl-input-card-radius:var(--radius-lg)]"><StoppedActorNotice actor={partner.actor} runId={session.session.id} toolbar={<>{options.toolbarLeft}<ChatViewSwitches collapsible={false} settings={chatView} /></>} /></div>
+        : <div className="[--qsl-input-card-radius:var(--radius-lg)]">
           {sendError && <p className="text-[0.8rem] text-destructive" role="alert">{sendError}</p>}
           <ChatInputToolbar
             {...attachments}
+            autoFocus={autoFocus}
+            onAutoFocusSettled={onAutoFocusSettled}
             disabled={!session.connected || !writable}
             maxRows={4}
             texts={writable ? undefined : { placeholder: "Lesezugriff auf diesen Run" }}
@@ -512,41 +553,34 @@ function ChatSurface({
               setSendError(undefined);
               return session.send(text, attachments);
             }}
-            onStop={writable ? () => {
+            onStop={writable && partner.kind === "active" && partner.turnRunning ? () => {
               setSendError(undefined);
-              void stopChatWork(session.session.id, session.runView, session.stop).catch((error: unknown) => setSendError(error instanceof Error ? error.message : String(error)));
+              void interruptActorTurn(session.session.id, partner.actorId).catch((error: unknown) => setSendError(error instanceof Error ? error.message : String(error)));
             } : undefined}
             rows={1}
             running={working}
-            toolbarRight={options.toolbarRight}
             toolbarLeft={
               <>
                 {options.toolbarLeft}
-                {steps.selectable && (
-                  <DetailModeSwitch
-                    collapsible={false}
-                    mode={steps.mode("coordinator")}
-                    onChange={(mode) => steps.setMode("coordinator", mode)}
-                  />
-                )}
+                <ChatViewSwitches collapsible={false} settings={chatView} />
               </>
             }
+            toolbarRight={<StartOptionControls disabled={!session.connected || !writable} placement="composer" registry={registry} />}
           />
         </div>
       }
-      nodeRef={options.nodeRef}
     >
-      <ChatMessages
-        detailMode={steps.mode("coordinator")}
-        emptyState={<div className="m-auto text-center text-muted-foreground">Der Run wird angelegt ...</div>}
+      {options.notice ?? <ChatMessages
+        detailMode={chatView.detailMode}
         messages={messages}
-        onAnswerQuestion={writable ? (callId, text) => void session.respond(callId, text) : undefined}
+        onDismissAction={writable ? (actionId) => void dismissAction(session.session.id, actionId) : undefined}
+        renderAction={renderAction}
         renderTool={renderTool}
         running={working}
         scrollerRef={options.chatScrollerRef}
-        showTimestamps
-        stepsExpandable={steps.stepsExpandable}
-      />
+        showTimestamps={chatView.showTimestamps}
+        stepsExpandable={chatView.stepsExpandable}
+      />}
     </ChatPanel>
   );
 }

package/apps/web/src/PluginFailureNotice.tsx

@@ -0,0 +1,15 @@
+import { Alert, AlertDescription, AlertTitle } from "./ui";
+import type { PluginFailure } from "./plugin-bootstrap";
+
+/** Names every plugin whose web half did not load; the rest of the interface keeps working. */
+export function PluginFailureNotice({ failures }: { failures: readonly PluginFailure[] }) {
+  if (failures.length === 0) return null;
+  return (
+    <Alert className="flex-none rounded-none border-x-0 border-t-0" data-slot="plugin-failures" variant="destructive">
+      <AlertTitle>{failures.length === 1 ? `Das Plugin ${failures[0]!.id} lädt nicht` : `${failures.length} Plugins laden nicht`}</AlertTitle>
+      <AlertDescription>
+        {failures.map((failure) => <p key={failure.id}>{failure.message}</p>)}
+      </AlertDescription>
+    </Alert>
+  );
+}