@schlenkr/ragents 0.1.5 → 0.1.7

package/apps/web/src/panel/RunsPage.tsx

@@ -0,0 +1,84 @@
+import { CheckSquareIcon, SearchIcon, Trash2Icon, XIcon } from "lucide-react";
+import { useState } from "react";
+import { Button, Input, Toggle } from "../ui";
+import type { ConnectionRun, ConnectionView } from "./contract";
+import type { PanelPageProps } from "./page-props";
+import { ConfirmDialog } from "./PanelDialogs";
+import { PanelHeader } from "./PanelHeader";
+import { RunLine, RunList } from "./RunLine";
+
+const keyOf = (connection: string, runId: string): string => `${connection}\u0000${runId}`;
+
+const matches = (connection: ConnectionView, run: ConnectionRun, query: string): boolean =>
+  `${run.title} ${connection.name}`.toLocaleLowerCase("de-DE").includes(query);
+
+/** Alle Runs aller Server als eine Liste: Suche, beendete ausblenden, der Serverfilter vom Chip auf Start und eine Mehrfachauswahl zum Löschen. */
+export function RunsPage({ state, send }: PanelPageProps) {
+  const [query, setQuery] = useState("");
+  const [onlyConnection, setOnlyConnection] = useState(state.runsConnection);
+  const [hideEnded, setHideEnded] = useState(false);
+  const [selecting, setSelecting] = useState(false);
+  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set());
+  const [confirming, setConfirming] = useState(false);
+  const marked = state.connections.length > 1;
+  const all = state.connections.flatMap((connection) => connection.runs.map((run) => ({ connection, run })))
+    .sort((left, right) => right.run.updatedAt - left.run.updatedAt);
+  const needle = query.trim().toLocaleLowerCase("de-DE");
+  const shown = all
+    .filter(({ connection }) => onlyConnection === undefined || connection.name === onlyConnection)
+    .filter(({ run }) => !hideEnded || run.state !== "ended")
+    .filter(({ connection, run }) => needle === "" || matches(connection, run, needle));
+  const leaveSelection = () => {
+    setSelecting(false);
+    setSelected(new Set());
+  };
+  const toggle = (key: string) => setSelected((current) => {
+    const next = new Set(current);
+    if (!next.delete(key)) next.add(key);
+    return next;
+  });
+  const remove = () => {
+    for (const connection of state.connections) {
+      const runIds = connection.runs.filter((run) => selected.has(keyOf(connection.name, run.id))).map((run) => run.id);
+      if (runIds.length > 0) send({ action: "deleteRuns", name: connection.name, runIds });
+    }
+    setConfirming(false);
+    leaveSelection();
+  };
+  return <div className="grid grid-cols-1 gap-3">
+    <PanelHeader send={send} title="Runs" />
+    <div className="relative">
+      <SearchIcon aria-hidden className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-foreground" />
+      <Input aria-label="Runs suchen" className="h-8 pl-8 text-[0.76rem]" onChange={(event) => setQuery(event.target.value)}
+        placeholder="Runs suchen ..." type="search" value={query} />
+    </div>
+    <div className="flex flex-wrap items-center gap-1.5">
+      {onlyConnection !== undefined && <Toggle aria-label={`Nur ${onlyConnection}`} onPressedChange={() => setOnlyConnection(undefined)} pressed size="sm" title={`Nur Runs auf ${onlyConnection}; Klick zeigt alle`} variant="outline">
+        {onlyConnection}<XIcon data-icon="inline-end" />
+      </Toggle>}
+      <Toggle onPressedChange={setHideEnded} pressed={hideEnded} size="sm" variant="outline">Beendete ausblenden</Toggle>
+      <Toggle onPressedChange={(next) => (next ? setSelecting(true) : leaveSelection())} pressed={selecting} size="sm" variant="outline">
+        <CheckSquareIcon data-icon="inline-start" />Auswählen
+      </Toggle>
+    </div>
+    {shown.length === 0
+      ? <p className="text-[0.75rem] text-muted-foreground" role="status">{all.length === 0 ? "Noch keine Runs." : "Kein passender Run."}</p>
+      : <RunList label="Runs" selecting={selecting} showConnection={marked}>
+        {shown.map(({ connection, run }) => <RunLine connection={connection} key={keyOf(connection.name, run.id)}
+          onOpen={() => send({ action: "openRun", name: connection.name, runId: run.id })}
+          onToggle={() => toggle(keyOf(connection.name, run.id))} run={run} selected={selected.has(keyOf(connection.name, run.id))} selecting={selecting} showConnection={marked} />)}
+      </RunList>}
+    {selecting && <div className="sticky bottom-0 flex flex-wrap items-center gap-2 border-t border-border-soft bg-background py-2">
+      <span className="flex-1 text-[0.72rem] text-muted-foreground" role="status">{selected.size} ausgewählt</span>
+      <Button disabled={selected.size === 0} onClick={() => setConfirming(true)} size="xs" variant="destructive"><Trash2Icon data-icon="inline-start" />Löschen</Button>
+      <Button onClick={leaveSelection} size="xs" variant="ghost">Abbrechen</Button>
+    </div>}
+    {confirming && <ConfirmDialog
+      confirmLabel="Löschen"
+      onClose={() => setConfirming(false)}
+      onConfirm={remove}
+      title={selected.size === 1 ? "Einen Run löschen?" : `${selected.size} Runs löschen?`}>
+      Die gewählten Runs verschwinden mit ihren Journalen von ihrem Server. Das lässt sich nicht rückgängig machen.
+    </ConfirmDialog>}
+  </div>;
+}

package/apps/web/src/panel/StartPage.tsx

@@ -0,0 +1,163 @@
+import { ChevronRightIcon, PlusIcon, ServerIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { cn } from "cn";
+import { StartSection, StartTiles, startTileCount } from "../StartTiles";
+import { Button, ConnectionStateIcon, connectionStateWord, Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger } from "../ui";
+import { busyState, connectionState, routeLabel, stateDetail } from "./connection-state";
+import type { ConnectionEntry, ConnectionView } from "./contract";
+import type { PanelPageProps } from "./page-props";
+import { LoginDialog } from "./PanelDialogs";
+import { RunLine, RunList } from "./RunLine";
+
+const RECENT_RUNS = 5;
+
+/** Die Vorlage hinter defaultEntry; die Erweiterung nennt nur eine Kennung aus entries. */
+const defaultEntryOf = (connection: ConnectionView): ConnectionEntry | undefined => connection.entries.find((entry) => entry.id === connection.defaultEntry);
+
+const chipPartClass = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60 enabled:hover:bg-accent";
+const iconPartClass = "flex w-8 flex-none items-center justify-center";
+
+/** Was der linke Teil des Chips tut: das Wort steht neben dem Namen, das Label im Tooltip; ohne run ist er gesperrt. */
+const chipAction = (connection: ConnectionView, send: PanelPageProps["send"], onLogin: (name: string) => void): { word: string; label: string; run?: () => void } => {
+  switch (connectionState(connection)) {
+    case "login-required":
+    case "forbidden": return { word: "Anmelden", label: `An ${connection.name} anmelden`, run: () => onLogin(connection.name) };
+    case "unreachable":
+    case "failed": return { word: "Erneut versuchen", label: `${connection.name} erneut versuchen`, run: () => send({ action: "retry", name: connection.name }) };
+    case "stopped": return connection.kind === "profile"
+      ? { word: "Starten", label: `${connection.name} starten`, run: () => send({ action: "startProfile", name: connection.name }) }
+      : { word: "Verbinden", label: `Mit ${connection.name} verbinden`, run: () => send({ action: "connect", name: connection.name }) };
+    case "starting": return { word: "startet ...", label: `${connection.name} startet` };
+    case "connected":
+    case "ready": return { word: "", label: `Runs auf ${connection.name}`, run: () => send({ action: "page", page: "runs", connection: connection.name }) };
+  }
+};
+
+interface Failure {
+  readonly title: string;
+  readonly message: string;
+}
+
+/** Das Zustandssymbol als eigener Knopf: bei einem Fehler öffnet es das Popover mit der Meldung, das Schloss den Anmeldedialog. */
+function StateButton({ connection, action, failure, onFailure, send, onLogin }: {
+  connection: ConnectionView;
+  action: ReturnType<typeof chipAction>;
+  failure: Failure | undefined;
+  onFailure: (failure: Failure | undefined) => void;
+  send: PanelPageProps["send"];
+  onLogin: (name: string) => void;
+}) {
+  const state = connectionState(connection);
+  const detail = stateDetail(connection);
+  const missing = connection.missingEnvironment;
+  if (state === "login-required") {
+    return <button aria-label={`Anmeldung an ${connection.name}`} className={cn(iconPartClass, chipPartClass)} onClick={() => onLogin(connection.name)} type="button">
+      <ConnectionStateIcon state={state} />
+    </button>;
+  }
+  const shown = detail !== undefined ? { title: connectionStateWord(state), message: detail } : failure;
+  return <Popover onOpenChange={(next) => onFailure(next ? shown : undefined)} open={failure !== undefined}>
+    <PopoverTrigger aria-label={`Fehler von ${connection.name} anzeigen`} className={cn(iconPartClass, chipPartClass)}>
+      <ConnectionStateIcon state={state} />
+    </PopoverTrigger>
+    {shown && <PopoverContent align="start" className="w-[min(360px,calc(100vw-16px))] gap-2 p-3" collisionPadding={8} dim side="bottom">
+      <PopoverHeader><PopoverTitle className="text-[0.8rem] font-semibold text-destructive">{shown.title}</PopoverTitle></PopoverHeader>
+      <p className={cn("max-h-[50vh] overflow-auto select-text whitespace-pre-wrap text-[0.72rem] leading-normal [overflow-wrap:anywhere]", shown.message.includes("\n") && "font-mono")}>{shown.message}</p>
+      <div className="flex flex-wrap justify-end gap-2">
+        <Button onClick={() => send({ action: "showOutput" })} size="xs" variant="ghost">Ausgabe öffnen</Button>
+        {missing && <Button aria-label={`Wert für ${missing.variable} setzen und ${connection.name} erneut starten`}
+          onClick={() => { onFailure(undefined); send({ action: "setSecret", name: missing.variable, connection: connection.name }); }} size="xs">Wert setzen</Button>}
+        {action.run && action.word && <Button onClick={() => { onFailure(undefined); action.run?.(); }} size="xs" variant="secondary">{action.word}</Button>}
+      </div>
+    </PopoverContent>}
+  </Popover>;
+}
+
+/** Ein Server als geteilter Knopf: links Zustand, Name, Aktionswort und Zielzeile, rechts das Plus für den Default oder einen neuen Chat. */
+function ConnectionChip({ connection, send, onLogin }: {
+  connection: ConnectionView;
+  send: PanelPageProps["send"];
+  onLogin: (name: string) => void;
+}) {
+  const [failure, setFailure] = useState<Failure>();
+  const action = chipAction(connection, send, onLogin);
+  const state = connectionState(connection);
+  const busy = busyState(connection);
+  const detail = stateDetail(connection);
+  useEffect(() => { if (!busy && detail === undefined) setFailure(undefined); }, [busy, detail]);
+  const canCreate = connection.state.kind === "connected" && connection.canCreate;
+  const route = routeLabel(connection);
+  const starter = defaultEntryOf(connection);
+  const plusLabel = starter ? `Neuer Run aus ${starter.title} auf ${connection.name}` : `Neuer Chat auf ${connection.name}`;
+  const ownIcon = state === "login-required" || detail !== undefined || failure !== undefined;
+  return <li className="flex min-w-0 items-stretch overflow-hidden rounded-md bg-secondary">
+    {ownIcon && <StateButton action={action} connection={connection} failure={failure} onFailure={setFailure} onLogin={onLogin} send={send} />}
+    <button aria-label={action.label} className={cn("group/action flex min-w-0 flex-1 items-center gap-1.5 py-1.5 pr-1.5 pl-2 text-left disabled:cursor-default", chipPartClass)}
+      disabled={action.run === undefined} onClick={action.run} title={action.label} type="button">
+      {!ownIcon && <ConnectionStateIcon state={state} />}
+      <span className="grid min-w-0 flex-1 gap-0.5">
+        <span className="flex min-w-0 items-baseline gap-1.5">
+          <span className="max-w-[calc(100%-3rem)] flex-none truncate text-[0.76rem] font-semibold">{connection.name}</span>
+          {action.word && <span className="ml-auto min-w-0 truncate text-[0.62rem] text-muted-foreground group-enabled/action:group-hover/action:text-foreground">{action.word}</span>}
+        </span>
+        <span className="truncate font-mono text-[0.62rem] text-muted-foreground" data-cell="route" title={route}>{route}</span>
+      </span>
+    </button>
+    {canCreate
+      ? <button aria-label={plusLabel} className={cn("flex w-7 flex-none items-center justify-center border-l border-border-soft text-muted-foreground hover:text-foreground", chipPartClass)}
+        onClick={() => send({ action: "newRun", name: connection.name, ...(starter ? { entryId: starter.id } : {}) })} title={plusLabel} type="button"><PlusIcon aria-hidden className="size-3.5" /></button>
+      : <span aria-hidden className="w-7 flex-none" />}
+  </li>;
+}
+
+/** Die Vorlagen eines Servers: die Standard-Vorlage oder Neuer Chat zuerst, dann die übrigen; ab zwei Servern mit Überschrift. */
+function ConnectionOffers({ connection, marked, send }: { connection: ConnectionView; marked: boolean; send: PanelPageProps["send"] }) {
+  return <div className="grid grid-cols-1 gap-1.5">
+    {marked && <h3 className="flex items-center gap-1.5 pt-1 text-[0.78rem] font-semibold"><ConnectionStateIcon state={connectionState(connection)} />{connection.name}</h3>}
+    <StartTiles defaultEntry={connection.defaultEntry} entries={connection.entries} label={marked ? `Vorlagen auf ${connection.name}` : "Vorlagen"}
+      onNewChat={() => send({ action: "newRun", name: connection.name })} onStart={(entryId) => send({ action: "newRun", name: connection.name, entryId })} />
+  </div>;
+}
+
+/** Die Startseite: die Server als Block, darunter die letzten Runs und je erreichbarem Server seine Vorlagen, die Standard-Vorlage oder Neuer Chat zuerst. */
+export function StartPage({ state, send }: PanelPageProps) {
+  const [login, setLogin] = useState<string>();
+  const connections = state.connections;
+  const marked = connections.length > 1;
+  const runs = connections.flatMap((connection) => connection.runs.map((run) => ({ connection, run })))
+    .sort((left, right) => right.run.updatedAt - left.run.updatedAt);
+  const reachable = connections.filter((connection) => connection.state.kind === "connected" && connection.canCreate);
+  const tiles = reachable.reduce((count, connection) => count + startTileCount(connection.entries, connection.defaultEntry, true), 0);
+  const loginConnection = connections.find((connection) => connection.name === login);
+  return <div className="@container/panel grid grid-cols-1 gap-4">
+    {state.problem && <p className="text-[0.8rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{state.problem}</p>}
+    {connections.length === 0
+      ? <div className="grid gap-3">
+        <p className="text-[0.85rem] leading-normal text-muted-foreground">Noch kein Server. Lege einen Server per Adresse oder ein lokales Profil an.</p>
+        <Button onClick={() => send({ action: "page", page: "connections" })}><ServerIcon data-icon="inline-start" />Server anlegen</Button>
+      </div>
+      : <>
+        <section className="grid grid-cols-1 gap-1.5">
+          <StartSection count={connections.length} title="Server" />
+          <ul aria-label="Server" className="grid grid-cols-2 gap-1.5 @[560px]/panel:auto-cols-fr @[560px]/panel:grid-flow-col @[560px]/panel:grid-cols-none">
+            {connections.map((connection) => <ConnectionChip connection={connection} key={connection.name} onLogin={setLogin} send={send} />)}
+          </ul>
+        </section>
+        <section className="grid grid-cols-1 gap-1.5">
+          <StartSection title="Weiter">
+            {runs.length > 0 && <Button className="text-[0.66rem]" onClick={() => send({ action: "page", page: "runs" })} size="xs" variant="ghost">Alle {runs.length} Runs<ChevronRightIcon data-icon="inline-end" /></Button>}
+          </StartSection>
+          {runs.length === 0
+            ? <p className="text-[0.75rem] text-muted-foreground">Noch keine Runs.</p>
+            : <RunList label="Zuletzt" showConnection={marked}>
+              {runs.slice(0, RECENT_RUNS).map(({ connection, run }) => <RunLine connection={connection} key={`${connection.name}:${run.id}`} onOpen={() => send({ action: "openRun", name: connection.name, runId: run.id })} run={run} showConnection={marked} />)}
+            </RunList>}
+        </section>
+        {reachable.length > 0 && <section className="grid grid-cols-1 gap-1.5">
+          <StartSection count={tiles} title="Neu" />
+          {reachable.map((connection) => <ConnectionOffers connection={connection} key={connection.name} marked={marked} send={send} />)}
+        </section>}
+      </>}
+    {loginConnection && <LoginDialog connection={loginConnection} onClose={() => setLogin(undefined)} send={send} />}
+  </div>;
+}

package/apps/web/src/panel/connection-state.ts

@@ -0,0 +1,40 @@
+import type { ConnectionStateName } from "../ui/state-vocabulary";
+import type { ConnectionView, MissingEnvironment } from "./contract";
+
+/** Der Zustand eines Servers im Vokabular der Seiten; ein lokales Profil ist verbunden nicht "verbunden", sondern bereit. */
+export const connectionState = (connection: ConnectionView): ConnectionStateName => {
+  switch (connection.state.kind) {
+    case "stopped": return "stopped";
+    case "starting":
+    case "connecting": return "starting";
+    case "connected": return connection.kind === "profile" ? "ready" : "connected";
+    case "unreachable": return "unreachable";
+    case "login-required": return "login-required";
+    case "forbidden": return "forbidden";
+    case "failed": return "failed";
+  }
+};
+
+/** Warum eine fehlende Umgebungsvariable den Start aufhält: welche, wofür sie das Profil braucht und wohin ihr Wert gehört. */
+const missingEnvironmentDetail = (missing: MissingEnvironment): string =>
+  `Die Umgebungsvariable ${missing.variable} ist nicht gesetzt; die Konfiguration verlangt sie für ${missing.section}.${missing.key}. `
+  + "Hinterlege ihren Wert als Secret in VS Code; er bleibt in der SecretStorage und kommt beim nächsten Start in die Umgebung des Hosts.";
+
+/** Der Grund, der zum Zustand gehört; er steht unter der Zeile des Servers. */
+export const stateDetail = (connection: ConnectionView): string | undefined => {
+  if (connection.missingEnvironment) return missingEnvironmentDetail(connection.missingEnvironment);
+  const state = connection.state;
+  if (state.kind === "unreachable" || state.kind === "forbidden" || state.kind === "failed") return state.message;
+  return undefined;
+};
+
+export const kindLabel = (connection: ConnectionView): string => connection.kind === "profile" ? "lokales Profil" : "Server";
+
+/** Die Zielzeile unter dem Namen: das lokale Profil, der Host des Servers oder der Server, dessen Profil lokal läuft. */
+export const routeLabel = (connection: ConnectionView): string => {
+  const route = connection.route;
+  if (route.kind === "profile") return `lokal \u00b7 ${route.profile}`;
+  return route.localHost ? `${route.host} \u00b7 lokal` : route.host;
+};
+
+export const busyState = (connection: ConnectionView): boolean => connection.state.kind === "starting" || connection.state.kind === "connecting";

package/apps/web/src/panel/contract.ts

@@ -1,9 +1,9 @@
-import type { ColumnTheme } from "../column/host-contract";
+import type { RunPanelTheme } from "../run-panel/host-contract";
 
-/** Eine Umgebung der Erweiterung: ein RAgents-Server oder ein lokales Profil, das sie selbst startet. */
-export type TargetKind = "server" | "profile";
+/** Ein Server der Erweiterung: ein RAgents-Server per Adresse oder ein lokales Profil, das sie selbst startet. */
+export type ConnectionKind = "server" | "profile";
 
-export type TargetState =
+export type ConnectionState =
   | { readonly kind: "stopped" }
   | { readonly kind: "starting"; readonly detail?: string }
   | { readonly kind: "connecting" }
@@ -13,53 +13,87 @@ export type TargetState =
   | { readonly kind: "forbidden"; readonly message: string }
   | { readonly kind: "failed"; readonly message: string };
 
-export interface TargetRun {
+/** Eine Umgebungsvariable, die die Konfiguration eines Profils mit env("NAME") verlangt, ohne dass sie gesetzt ist. */
+export interface MissingEnvironment {
+  readonly variable: string;
+  /** Die Sektion der Konfiguration, die sie braucht, etwa ein Plugin. */
+  readonly section: string;
+  readonly key: string;
+}
+
+export interface ConnectionRun {
   readonly id: string;
   readonly title: string;
   readonly state: "running" | "waiting" | "idle" | "ended";
-  readonly questions: number;
+  readonly pendingActions: number;
   readonly updatedAt: number;
+  /** Die Erweiterung konnte die Run-Ansicht nicht lesen; die Zeile nennt den Grund. */
+  readonly problem?: string;
+  /** Warum der Server den Run gesperrt hat; die Zeile öffnet ihn nicht, löschen bleibt möglich. */
+  readonly locked?: string;
 }
 
-export interface TargetEntry {
+export interface ConnectionEntry {
   readonly id: string;
   readonly title: string;
   readonly description: string;
   readonly kind: "skill" | "script";
-  /** Die Gruppe der Kachelansicht; ein Run-Script ohne eigene Kategorie steht unter "Run-Scripts". */
+  /** Die Gruppe der Vorlagen auf Start; ein Run-Script ohne eigene Kategorie steht unter "Run-Scripts". */
   readonly category: string;
+  /** Ein Leitfaden fragt vor dem Start nach; die Vorlage heißt dann "Einrichten" statt "Starten". */
+  readonly guided?: boolean;
 }
 
-export interface TargetView {
+/** Wohin der Server geht: ein lokales Profil, eine Adresse oder eine Adresse, deren verteiltes Profil auf einem lokalen Host läuft. */
+export type ConnectionRoute =
+  | { readonly kind: "profile"; readonly profile: string }
+  | { readonly kind: "server"; readonly host: string; readonly localHost: boolean };
+
+export interface ConnectionView {
   readonly name: string;
-  readonly kind: TargetKind;
+  readonly kind: ConnectionKind;
   /** Adresse des Servers oder Pfad der Profildatei. */
   readonly address: string;
-  readonly state: TargetState;
-  readonly runs: readonly TargetRun[];
-  readonly entries: readonly TargetEntry[];
+  readonly route: ConnectionRoute;
+  readonly state: ConnectionState;
+  readonly runs: readonly ConnectionRun[];
+  readonly entries: readonly ConnectionEntry[];
+  /** Die Vorlage aus entries, die das Plus am Chip nimmt und die auf Start zuerst steht; ohne sie ist ein neuer Run ein leerer Chat. */
+  readonly defaultEntry?: string;
   /** Neue Runs sind erlaubt; ohne das Recht bleibt nur die Liste. */
   readonly canCreate: boolean;
   /** Der angemeldete Benutzer, sofern der Server Benutzer führt. */
   readonly user?: string;
   /** Die zuletzt versuchte Kennung; das Anmeldeformular übernimmt sie. */
   readonly loginUser?: string;
-  /** Anmeldedaten liegen in der SecretStorage, damit die Umgebung sich still anmeldet. */
+  /** Anmeldedaten liegen in der SecretStorage, damit sich die Erweiterung still am Server anmeldet. */
   readonly savedLogin?: boolean;
-  /** Fehler der letzten Aktion an dieser Umgebung, direkt in ihrer Zeile. */
+  /** Fehler der letzten Aktion an diesem Server, direkt in seiner Zeile. */
   readonly problem?: string;
+  /** Start oder Übernahme scheiterten an dieser Umgebungsvariablen; die Zeile führt von hier zum Wert und zum neuen Versuch. */
+  readonly missingEnvironment?: MissingEnvironment;
 }
 
+/** Die vier Seiten der Erweiterung; "run" zeigt das Run-Panel statt dieser Seite. */
+export type PanelPage = "start" | "runs" | "run" | "connections";
+
+/** Die Seiten, auf die das Panel selbst umschalten darf; zum Run führt openRun. */
+export const PANEL_PAGES = ["start", "runs", "connections"] as const;
+
 export interface PanelState {
-  readonly theme: ColumnTheme;
-  readonly page: "overview" | "settings";
-  readonly targets: readonly TargetView[];
+  readonly theme: RunPanelTheme;
+  readonly page: PanelPage;
+  readonly connections: readonly ConnectionView[];
   /** Die Profildateien im Host-Ordner; der Dialog bietet sie an, ohne Host bleibt die Liste leer. */
   readonly profileSuggestions: readonly string[];
   /** Die Einstellung ragents.connections ist fehlerhaft; die Seite nennt den Grund. */
   readonly problem?: string;
   /** Der zuletzt über den Dateidialog gewählte Profilpfad; der Dialog übernimmt ihn. */
   readonly pickedProfileFile?: string;
+  /** Die Seite Runs beginnt mit den Runs dieses Servers; der Chip auf Start setzt ihn, die Titelzeile nicht. */
+  readonly runsConnection?: string;
+  /** Namen aus ragents.hostEnvironment ohne Wert in der SecretStorage; die Einstellung gilt für alle Server, darum steht die Liste einmal. */
+  readonly missingSecrets?: readonly string[];
 }
 
 /** Der Zustand kommt von der Erweiterung, zuerst eingebettet in die Seite, danach als Nachricht. */
@@ -70,17 +104,22 @@ export interface PanelStateMessage {
 
 /** Was die Panelseite an die Erweiterung schickt. */
 export type PanelAction =
-  | { readonly action: "page"; readonly page: "overview" | "settings" }
+  | { readonly action: "page"; readonly page: (typeof PANEL_PAGES)[number]; readonly connection?: string }
   | { readonly action: "settingsFile" }
   | { readonly action: "pickProfile" }
+  | { readonly action: "showOutput" }
   | { readonly action: "addServer"; readonly name: string; readonly url: string }
   | { readonly action: "addProfile"; readonly name: string; readonly profileFile: string }
   | { readonly action: "updateServer"; readonly name: string; readonly newName: string; readonly url: string }
   | { readonly action: "updateProfile"; readonly name: string; readonly newName: string; readonly profileFile: string }
   | { readonly action: "remove" | "connect" | "disconnect" | "logout" | "startProfile" | "stopProfile" | "retry"; readonly name: string }
+  /** Der Name einer Umgebungsvariablen, nicht der eines Servers: die Erweiterung fragt den Wert ab und legt ihn in die SecretStorage.
+   * Mit connection kommt der Name zuerst in ragents.hostEnvironment, und dieser Server startet danach erneut. */
+  | { readonly action: "setSecret"; readonly name: string; readonly connection?: string }
   | { readonly action: "login"; readonly name: string; readonly user: string; readonly password: string }
   | { readonly action: "login"; readonly name: string; readonly token: string }
   | { readonly action: "openRun"; readonly name: string; readonly runId: string }
+  | { readonly action: "deleteRuns"; readonly name: string; readonly runIds: readonly string[] }
   | { readonly action: "newRun"; readonly name: string; readonly entryId?: string };
 
 export type PanelActionMessage = PanelAction & { readonly type: "ragents.panel" };
@@ -90,15 +129,21 @@ const text = (value: unknown, key: string): boolean => typeof (value as Record<s
 export const isPanelActionMessage = (value: unknown): value is PanelActionMessage => {
   if (typeof value !== "object" || value === null || (value as { type?: unknown }).type !== "ragents.panel") return false;
   switch ((value as { action?: unknown }).action) {
-    case "page": return (value as { page?: unknown }).page === "overview" || (value as { page?: unknown }).page === "settings";
-    case "settingsFile": case "pickProfile": return true;
+    case "page": return (PANEL_PAGES as readonly unknown[]).includes((value as { page?: unknown }).page)
+      && ((value as { connection?: unknown }).connection === undefined || text(value, "connection"));
+    case "settingsFile": case "pickProfile": case "showOutput": return true;
     case "addServer": return text(value, "name") && text(value, "url");
     case "addProfile": return text(value, "name") && text(value, "profileFile");
     case "updateServer": return text(value, "name") && text(value, "newName") && text(value, "url");
     case "updateProfile": return text(value, "name") && text(value, "newName") && text(value, "profileFile");
     case "remove": case "connect": case "disconnect": case "logout": case "startProfile": case "stopProfile": case "retry": return text(value, "name");
+    case "setSecret": return text(value, "name") && ((value as { connection?: unknown }).connection === undefined || text(value, "connection"));
     case "login": return text(value, "name") && (text(value, "token") || (text(value, "user") && text(value, "password")));
     case "openRun": return text(value, "name") && text(value, "runId");
+    case "deleteRuns": {
+      const runIds = (value as { runIds?: unknown }).runIds;
+      return text(value, "name") && Array.isArray(runIds) && runIds.every((runId) => typeof runId === "string");
+    }
     case "newRun": return text(value, "name") && ((value as { entryId?: unknown }).entryId === undefined || text(value, "entryId"));
     default: return false;
   }

package/apps/web/src/panel/page-props.ts

@@ -0,0 +1,6 @@
+import type { PanelAction, PanelState } from "./contract";
+
+export interface PanelPageProps {
+  readonly state: PanelState;
+  readonly send: (action: PanelAction) => void;
+}

package/apps/web/src/plugin-bootstrap.ts

@@ -2,9 +2,15 @@ import { isRecord } from "./lib/guards";
 import { startEntryFrom, type StartEntry } from "../../server/src/plugin-support/start-entries-contract";
 import { PluginRegistry, type WebPlugin } from "./PluginRegistry";
 
+/** Where the browser loads a plugin's web half from; the host serves the bundle under these addresses. */
+export interface PluginWebAddresses {
+  readonly entry: string;
+  readonly css?: string;
+}
+
 export interface PluginDescriptor {
   id: string;
-  web: boolean;
+  web?: PluginWebAddresses;
   config?: Record<string, unknown>;
 }
 
@@ -15,70 +21,92 @@ export interface PluginBootstrap {
   };
   plugins: PluginDescriptor[];
   startEntries: StartEntry[];
+  defaultStartEntry?: string;
 }
 
-export type WebPluginLoader = () => Promise<WebPlugin>;
-export type WebPluginLoaders = ReadonlyMap<string, WebPluginLoader>;
+/** Loads a module and a stylesheet by address; the browser does it with import() and a link element. */
+export interface WebBundleLoader {
+  readonly module: (url: string) => Promise<unknown>;
+  readonly stylesheet: (url: string) => Promise<void>;
+}
 
 const isWebPlugin = (value: unknown): value is WebPlugin =>
   typeof value === "object" && value !== null && typeof (value as WebPlugin).id === "string";
 
-const loaderFor = (id: string, load: () => Promise<unknown>): WebPluginLoader => async () => {
-  const module = await load() as Record<string, unknown>;
-  const plugin = module.webPlugin;
+const webPluginFrom = (id: string, module: unknown): WebPlugin => {
+  const plugin = (module as Record<string, unknown>).webPlugin;
   if (!isWebPlugin(plugin)) {
     throw new Error(`Der Web-Einstieg des Plugins ${id} exportiert keine Konstante webPlugin mit einer Plugin-Kennung`);
   }
   if (plugin.id !== id) {
-    throw new Error(`Der Plugin-Ordner ${id} meldet die abweichende Kennung ${plugin.id}`);
+    throw new Error(`Das Bundle ${id} meldet die abweichende Kennung ${plugin.id}`);
   }
   return plugin;
 };
 
-/** Turns the bundle's entry map (plugin id to web entry import) into loaders. */
-export const webPluginLoadersFrom = (entries: Readonly<Record<string, () => Promise<unknown>>>): WebPluginLoaders =>
-  new Map(Object.entries(entries).map(([id, load]) => [id, loaderFor(id, load)]));
+const loaded = <T>(id: string, url: string, load: Promise<T>): Promise<T> =>
+  load.catch((cause: unknown) => {
+    throw new Error(`Die Web-Hälfte des Plugins ${id} lädt nicht von ${url}: ${cause instanceof Error ? cause.message : String(cause)}`);
+  });
 
-/** A plugin without a web half stays a bare descriptor; a web half missing from the bundle is a build error. */
-const pluginFor = (descriptor: PluginDescriptor, loaders: WebPluginLoaders): Promise<WebPlugin> => {
-  const load = loaders.get(descriptor.id);
-  if (load) return load();
-  if (descriptor.web) {
-    throw new Error(`Das Web-Bundle enthält das Plugin ${descriptor.id} nicht; mit dem Profil dieses Servers bauen`);
-  }
-  return Promise.resolve({ id: descriptor.id });
+/** A plugin without a web half stays a bare descriptor; one with a web half loads its bundle and stylesheet. */
+const pluginFor = async (descriptor: PluginDescriptor, loader: WebBundleLoader): Promise<WebPlugin> => {
+  const web = descriptor.web;
+  if (!web) return { id: descriptor.id };
+  const [module] = await Promise.all([
+    loaded(descriptor.id, web.entry, loader.module(web.entry)),
+    ...(web.css === undefined ? [] : [loaded(descriptor.id, web.css, loader.stylesheet(web.css))]),
+  ]);
+  return webPluginFrom(descriptor.id, module);
 };
 
+/** A web half that did not load; the plugin keeps its server part and shows as this error instead of taking the interface down. */
+export interface PluginFailure {
+  readonly id: string;
+  readonly message: string;
+}
+
 export const activatePlugins = async (
   bootstrap: PluginBootstrap,
-  loaders: WebPluginLoaders,
-): Promise<{ bootstrap: PluginBootstrap; registry: PluginRegistry }> => {
-  const plugins = await Promise.all(bootstrap.plugins.map((descriptor) => pluginFor(descriptor, loaders)));
+  loader: WebBundleLoader,
+): Promise<{ bootstrap: PluginBootstrap; registry: PluginRegistry; failures: readonly PluginFailure[] }> => {
+  const settled = await Promise.allSettled(bootstrap.plugins.map((descriptor) => pluginFor(descriptor, loader)));
+  const failures = settled.flatMap((result, index): PluginFailure[] => result.status === "rejected"
+    ? [{ id: bootstrap.plugins[index]!.id, message: result.reason instanceof Error ? result.reason.message : String(result.reason) }]
+    : []);
+  const plugins = settled.map((result, index): WebPlugin => result.status === "fulfilled" ? result.value : { id: bootstrap.plugins[index]!.id });
   const configurations = new Map(bootstrap.plugins.map((plugin) => [plugin.id, plugin.config ?? {}]));
-  return {
-    bootstrap,
-    registry: new PluginRegistry(
-      { plugins, product: bootstrap.product, startEntries: bootstrap.startEntries },
-      configurations,
-    ),
-  };
+  try {
+    const registry = new PluginRegistry({ plugins, product: bootstrap.product, startEntries: bootstrap.startEntries,
+      ...(bootstrap.defaultStartEntry === undefined ? {} : { defaultStartEntry: bootstrap.defaultStartEntry }) }, configurations);
+    return { bootstrap, registry, failures };
+  } catch (cause) {
+    const reason = cause instanceof Error ? cause.message : String(cause);
+    throw new Error([reason, ...failures.map((failure) => failure.message)].join("\n"), { cause });
+  }
 };
 
+const isWebAddresses = (value: unknown): value is PluginWebAddresses =>
+  isRecord(value) && typeof value.entry === "string" && value.entry.length > 0
+  && (value.css === undefined || typeof value.css === "string" && value.css.length > 0)
+  && Object.keys(value).every((key) => key === "entry" || key === "css");
+
 export const pluginBootstrapFrom = (value: unknown): PluginBootstrap => {
   if (!isRecord(value) || !isRecord(value.product) || !Array.isArray(value.plugins)
     || !Array.isArray(value.startEntries)
+    || value.defaultStartEntry !== undefined && typeof value.defaultStartEntry !== "string"
     || typeof value.product.id !== "string" || !value.product.id
     || typeof value.product.title !== "string" || !value.product.title) {
     throw new Error("Die Plugin-Konfiguration entspricht nicht dem erwarteten Format");
   }
-  const plugins = value.plugins.map((entry) => {
-    if (!isRecord(entry) || typeof entry.id !== "string" || !entry.id || typeof entry.web !== "boolean"
+  const plugins = value.plugins.map((entry): PluginDescriptor => {
+    if (!isRecord(entry) || typeof entry.id !== "string" || !entry.id || entry.web !== undefined && !isWebAddresses(entry.web)
       || entry.config !== undefined && !isRecord(entry.config)) {
       throw new Error("Die Plugin-Konfiguration enthält einen ungültigen Plugin-Descriptor");
     }
     return {
       id: entry.id,
-      web: entry.web,
+      ...(entry.web === undefined ? {} : { web: entry.web }),
       config: entry.config as Record<string, unknown> | undefined,
     };
   });
@@ -86,5 +114,6 @@ export const pluginBootstrapFrom = (value: unknown): PluginBootstrap => {
     product: { id: value.product.id, title: value.product.title },
     plugins,
     startEntries: value.startEntries.map(startEntryFrom),
+    ...(value.defaultStartEntry === undefined ? {} : { defaultStartEntry: value.defaultStartEntry }),
   };
 };

package/{plugins/ragents.product/web → apps/web/src/product}/ModelControl.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@aicontainer/web/ui";
-import { thinkingLabel } from "@aicontainer/web/lib/labels";
-import type { StartOptionControlContext } from "@aicontainer/web/PluginRegistry";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui";
+import { thinkingLabel } from "../lib/labels";
+import type { StartOptionControlContext } from "../PluginRegistry";
 
 interface ModelPresentation {
   provider: string;