@schlenkr/ragents 0.1.5 → 0.1.6

package/{plugins/ragents.lsp-roslyn/web → apps/web/src/language-server}/language-server-plugin.tsx

@@ -1,17 +1,19 @@
-import { Alert, AlertDescription, Badge, Button, Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Spinner } from "@aicontainer/web/ui";
+import { Alert, AlertDescription, Badge, Button, Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Spinner } from "../ui";
 import { useEffect, useState, type ComponentType } from "react";
 import type {
   LanguageServerInstanceSnapshot,
   LanguageServerSeverity,
   LanguageServerSnapshot,
+  LanguageServerSolutions,
   LanguageServerState,
-} from "@aicontainer/server/plugin-support/language-server/contract";
+} from "@ragents/host/plugin-support/language-server/contract";
+import { useAccess } from "../AccessContext";
 import {
   type WebPlugin,
   type WebPluginDescriptor,
   type WorkspaceTabContext,
-} from "@aicontainer/web/PluginRegistry";
-import { fetchLanguageServerSnapshot } from "./api";
+} from "../PluginRegistry";
+import { fetchLanguageServerSnapshot, fetchLanguageServerSolutions, switchLanguageServerSolution } from "./api";
 
 const POLL_MS = 5000;
 const BADGE_POLL_MS = 15000;
@@ -20,8 +22,21 @@ interface TabSettings {
   label: string;
   openTool: string;
   pluginId: string;
+  solutions: boolean;
 }
 
+export interface SolutionChoice {
+  solutions?: LanguageServerSolutions;
+  error?: string;
+  switching: boolean;
+  writable: boolean;
+  onSwitch: (root: string | null) => void;
+}
+
+const NO_SOLUTION = "none";
+
+const solutionValue = (path: string): string => `solution:${path}`;
+
 const severityLabels: Readonly<Record<LanguageServerSeverity, string>> = {
   error: "Fehler",
   warning: "Warnung",
@@ -52,6 +67,17 @@ const headerLabel = (snapshot: LanguageServerSnapshot | undefined): string => {
 const countLabel = (count: number, singular: string, plural: string): string =>
   `${count} ${count === 1 ? singular : plural}`;
 
+const messageOf = (caught: unknown): string => caught instanceof Error ? caught.message : String(caught);
+
+/** Genau eine offene Instanz einer gefundenen Solution oder keine ergibt eine Auswahl; mehrere oder eine andere Wurzel nicht. */
+const selectedSolution = (solutions: LanguageServerSolutions, snapshot: LanguageServerSnapshot): string | null => {
+  const roots = snapshot.instances.map((instance) => instance.root);
+  if (roots.length === 0) return NO_SOLUTION;
+  if (roots.length > 1) return null;
+  const open = solutions.solutions.find((solution) => solution.root === roots[0]);
+  return open ? solutionValue(open.path) : null;
+};
+
 const errorsOf = (snapshot: LanguageServerSnapshot | undefined): number =>
   (snapshot?.instances ?? [])
     .filter((instance) => instance.state === "ready" || instance.state === "suspended")
@@ -120,15 +146,111 @@ const useSnapshot = (pluginId: string, runId: string, active: boolean, pollMs: n
   return { snapshot, error, pending, refresh: () => setRefreshKey((value) => value + 1) };
 };
 
+const useSolutions = (pluginId: string, runId: string, active: boolean, onSwitched: () => void) => {
+  const [solutions, setSolutions] = useState<LanguageServerSolutions>();
+  const [error, setError] = useState<string>();
+  const [switching, setSwitching] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  useEffect(() => {
+    if (!active) return;
+    let disposed = false;
+    fetchLanguageServerSolutions(pluginId, runId).then(
+      (value) => {
+        if (disposed) return;
+        setSolutions(value);
+        setError(undefined);
+      },
+      (caught: unknown) => {
+        if (!disposed) setError(messageOf(caught));
+      },
+    );
+    return () => { disposed = true; };
+  }, [active, pluginId, refreshKey, runId]);
+
+  const switchTo = (root: string | null) => {
+    setSwitching(true);
+    setError(undefined);
+    switchLanguageServerSolution(pluginId, runId, root)
+      .then(setSolutions, (caught: unknown) => setError(messageOf(caught)))
+      .finally(() => {
+        setSwitching(false);
+        onSwitched();
+      });
+  };
+
+  return { solutions, error, switching, switchTo, refresh: () => setRefreshKey((value) => value + 1) };
+};
+
 const panelFor = (settings: TabSettings) => {
   function LanguageServerPanel({ active, session }: WorkspaceTabContext) {
     const { snapshot, error, pending, refresh } = useSnapshot(settings.pluginId, session.session.id, active);
-    return <LanguageServerPanelView settings={settings} snapshot={snapshot} error={error} pending={pending} onRefresh={refresh} />;
+    const access = useAccess();
+    const choice = useSolutions(settings.pluginId, session.session.id, active && settings.solutions, refresh);
+    const refreshAll = () => {
+      refresh();
+      choice.refresh();
+    };
+    return (
+      <LanguageServerPanelView
+        settings={settings}
+        snapshot={snapshot}
+        error={error}
+        pending={pending}
+        onRefresh={settings.solutions ? refreshAll : refresh}
+        choice={settings.solutions ? {
+          solutions: choice.solutions,
+          error: choice.error,
+          switching: choice.switching,
+          writable: access.can("runs.write") && access.can(`${settings.pluginId}.write`),
+          onSwitch: choice.switchTo,
+        } : undefined}
+      />
+    );
   }
 
   return LanguageServerPanel;
 };
 
+function SolutionSelect({ choice, snapshot }: { choice: SolutionChoice; snapshot: LanguageServerSnapshot | undefined }) {
+  const { solutions } = choice;
+  if (!solutions || !snapshot) return null;
+  if (solutions.solutions.length === 0) {
+    return <p className="border-t border-border-soft px-2.5 py-2 text-xs text-muted-foreground">Keine Solution im Arbeitsbereich.</p>;
+  }
+  const openRoots = new Set(snapshot.instances.map((instance) => instance.root));
+  const items = [
+    { value: NO_SOLUTION, path: null, label: "Keine" },
+    ...solutions.solutions.map((solution) => ({
+      value: solutionValue(solution.path),
+      path: solution.path,
+      label: openRoots.has(solution.root) ? `${solution.path} (offen)` : solution.path,
+    })),
+  ];
+  const instances = snapshot.instances.length;
+
+  return (
+    <div className="flex items-center gap-2 border-t border-border-soft px-2.5 py-2">
+      <span className="flex-none text-xs text-muted-foreground">Solution</span>
+      <Select
+        disabled={!choice.writable || choice.switching}
+        items={items}
+        onValueChange={(value) => {
+          const item = items.find((entry) => entry.value === value);
+          if (item) choice.onSwitch(item.path);
+        }}
+        value={selectedSolution(solutions, snapshot)}
+      >
+        <SelectTrigger aria-label="Solution wählen" className="min-w-0 flex-1" size="sm" title={choice.writable ? undefined : "Umschalten verlangt Schreibrechte"}>
+          <SelectValue placeholder={instances > 1 ? `${instances} Instanzen offen` : "Andere Wurzel offen"} />
+        </SelectTrigger>
+        <SelectContent>{items.map((item) => <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>)}</SelectContent>
+      </Select>
+      {choice.switching && <Spinner aria-label="Wird umgeschaltet" />}
+    </div>
+  );
+}
+
 function LanguageServerInstanceView({ instance }: { instance: LanguageServerInstanceSnapshot }) {
   const diagnosticsAvailable = instance.state === "ready" || instance.state === "suspended";
   const files = diagnosticsAvailable ? instance.files : [];
@@ -190,12 +312,13 @@ function LanguageServerInstanceView({ instance }: { instance: LanguageServerInst
   );
 }
 
-export function LanguageServerPanelView({ settings, snapshot, error, pending, onRefresh }: {
+export function LanguageServerPanelView({ settings, snapshot, error, pending, onRefresh, choice }: {
   settings: Pick<TabSettings, "label" | "openTool">;
   snapshot?: LanguageServerSnapshot;
   error?: string;
   pending: boolean;
   onRefresh: () => void;
+  choice?: SolutionChoice;
 }) {
   const instances = snapshot?.instances ?? [];
 
@@ -210,7 +333,9 @@ export function LanguageServerPanelView({ settings, snapshot, error, pending, on
           <IconRefresh className={pending ? "animate-spin" : undefined} />
         </Button>
       </header>
+      {choice && <SolutionSelect choice={choice} snapshot={snapshot} />}
       {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
+      {choice?.error && <Alert variant="destructive"><AlertDescription>{choice.error}</AlertDescription></Alert>}
       {snapshot && instances.length === 0 && (
         <Empty>
           <EmptyHeader>
@@ -243,6 +368,7 @@ const configuredPlugin = (descriptor: WebPluginDescriptor, settings: TabSettings
   ...descriptor,
   workspaceTabs: [{
     readRight: `${descriptor.id}.read`,
+    requiresWorkspace: true,
     id: `${descriptor.id}.diagnostics`,
     label: settings.label,
     order: 300,
@@ -260,6 +386,7 @@ export const languageServerWebPlugin = (pluginId: string, Icon: ComponentType =
       label: textFrom(config, "label", pluginId),
       openTool: textFrom(config, "openTool", pluginId),
       pluginId,
+      solutions: config.solutions === true,
     }, Icon),
   };
 };

package/apps/web/src/main.tsx

@@ -1,4 +1,3 @@
-import "./ui/tailwind.css";
 // Fremde Klassen von highlight.js und react-diff-view; hier statt in den Komponenten, die auch Mini-Apps bündeln.
 import "./highlighting.css";
 import "./diff-view.css";
@@ -7,8 +6,11 @@ import { createRoot } from "react-dom/client";
 import { Button } from "./ui";
 import { App } from "./App";
 import { AccessGate, AccessScreen } from "./AccessContext";
+import { QuasselHost } from "./chat/QuasselHost";
 import { initializeTheme } from "./theme";
+import { installHostModules } from "./host-modules";
 
+installHostModules();
 const root = document.getElementById("root");
 if (!root) throw new Error("Root-Element fehlt");
 
@@ -18,7 +20,7 @@ try {
   import.meta.hot?.dispose(() => theme.dispose());
   reactRoot.render(
     <StrictMode>
-      <AccessGate><App /></AccessGate>
+      <QuasselHost><AccessGate><App /></AccessGate></QuasselHost>
     </StrictMode>,
   );
 } catch (cause) {

package/apps/web/src/offered-machines.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+
+/** Wo eine Oberfläche neue Runs anbietet: der Browser nur auf dem Server, VS Code als Arbeitsplatz auch auf Arbeitsplätzen. */
+export type OfferedMachines = "server" | "all";
+
+const OfferedMachinesContext = createContext<OfferedMachines>("server");
+
+/** Der Host legt es fest; ohne ihn, etwa in der Web-App, gilt nur der Server. */
+export const OfferedMachinesProvider = OfferedMachinesContext.Provider;
+
+export const useOfferedMachines = (): OfferedMachines => useContext(OfferedMachinesContext);

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

@@ -0,0 +1,117 @@
+import { FolderIcon, KeyIcon, PencilIcon, PlusIcon, ServerIcon, SettingsIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import { Button, ConnectionStateIcon } from "../ui";
+import { busyState, connectionState, kindLabel, stateDetail } from "./connection-state";
+import type { ConnectionView, PanelAction } from "./contract";
+import type { PanelPageProps } from "./page-props";
+import { ConfirmDialog, ConnectionDialog, LoginDialog } from "./PanelDialogs";
+import { PanelHeader } from "./PanelHeader";
+
+const fileNameOf = (address: string): string => address.split(/[/\\]/).pop() ?? address;
+
+/** Ein lokales Profil startet die Erweiterung selbst; nur ein Server per Adresse kennt Verbinden, Trennen und Anmelden. */
+function RowActions({ connection, busy, send, onLogin }: {
+  connection: ConnectionView;
+  busy: boolean;
+  send: (action: PanelAction) => void;
+  onLogin: (name: string) => void;
+}) {
+  const state = connection.state.kind;
+  const profile = connection.kind === "profile";
+  const missing = connection.missingEnvironment;
+  if (missing) {
+    return <>
+      <Button aria-label={`Wert für ${missing.variable} setzen und ${connection.name} erneut starten`} disabled={busy}
+        onClick={() => send({ action: "setSecret", name: missing.variable, connection: connection.name })} size="xs"><KeyIcon data-icon="inline-start" />Wert setzen</Button>
+      <Button disabled={busy} onClick={() => send({ action: "retry", name: connection.name })} size="xs" variant="secondary">Erneut versuchen</Button>
+    </>;
+  }
+  if (state === "login-required" || state === "forbidden") return <Button disabled={busy} onClick={() => onLogin(connection.name)} size="xs" variant="secondary">Anmelden</Button>;
+  if (state === "unreachable" || state === "failed") return <Button disabled={busy} onClick={() => send({ action: "retry", name: connection.name })} size="xs" variant="secondary">Erneut versuchen</Button>;
+  if (profile) return null;
+  if (state === "connected") return <Button disabled={busy} onClick={() => send({ action: "disconnect", name: connection.name })} size="xs" variant="ghost">Trennen</Button>;
+  if (state === "stopped") return <Button disabled={busy} onClick={() => send({ action: "connect", name: connection.name })} size="xs" variant="secondary">Verbinden</Button>;
+  return null;
+}
+
+function ConnectionRow({ connection, send, onEdit, onLogin, onRemove }: {
+  connection: ConnectionView;
+  send: (action: PanelAction) => void;
+  onEdit: (name: string) => void;
+  onLogin: (name: string) => void;
+  onRemove: (name: string) => void;
+}) {
+  const busy = busyState(connection);
+  const detail = stateDetail(connection) ?? connection.problem;
+  const profile = connection.kind === "profile";
+  return <li className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2.5 gap-y-1.5 border-b border-border-soft px-1 py-2.5 last:border-b-0">
+    <span aria-hidden className="grid size-[26px] flex-none place-items-center rounded-md bg-secondary text-muted-foreground">
+      {profile ? <FolderIcon className="size-3.5" /> : <ServerIcon className="size-3.5" />}
+    </span>
+    <span className="min-w-0">
+      <span className="flex min-w-0 items-center gap-2">
+        <strong className="min-w-0 truncate text-[0.8rem] font-semibold">{connection.name}</strong>
+        <span className="flex-none text-[0.6rem] uppercase tracking-[0.05em] text-muted-foreground">{kindLabel(connection)}</span>
+        <ConnectionStateIcon className="ml-auto" state={connectionState(connection)} />
+      </span>
+      <span className="block truncate font-mono text-[0.68rem] text-muted-foreground" title={connection.address}>{profile ? fileNameOf(connection.address) : connection.address}</span>
+    </span>
+    {detail && <p className="col-span-2 text-[0.7rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{detail}</p>}
+    <span className="col-span-2 flex flex-wrap items-center gap-1.5">
+      <RowActions busy={busy} connection={connection} onLogin={onLogin} send={send} />
+      {connection.savedLogin && <Button disabled={busy} onClick={() => send({ action: "logout", name: connection.name })} size="xs" variant="ghost">Abmelden</Button>}
+      <Button onClick={() => onEdit(connection.name)} size="xs" variant="ghost"><PencilIcon data-icon="inline-start" />Bearbeiten</Button>
+      <Button aria-label={`${connection.name} entfernen`} className="ml-auto" onClick={() => onRemove(connection.name)} size="icon-sm" variant="ghost"><Trash2Icon /></Button>
+    </span>
+  </li>;
+}
+
+/** Namen aus ragents.hostEnvironment, zu denen kein Wert gespeichert ist; ohne ihn startet der lokale Host ohne diese Umgebungsvariable. */
+function MissingSecrets({ names, send }: { names: readonly string[]; send: (action: PanelAction) => void }) {
+  return <section className="grid grid-cols-1 gap-1.5">
+    <h2 className="text-[0.66rem] font-bold uppercase tracking-[0.06em] text-muted-foreground">Fehlende Werte</h2>
+    <p className="text-[0.7rem] leading-normal text-muted-foreground">
+      Zu diesen Namen aus ragents.hostEnvironment liegt kein Wert in der SecretStorage; ein lokal gestarteter Host bekommt die Umgebungsvariable nicht.
+    </p>
+    <ul className="grid grid-cols-1">
+      {names.map((name) => <li className="flex items-center gap-2 border-b border-border-soft px-1 py-2.5 last:border-b-0" key={name}>
+        <KeyIcon aria-hidden className="size-3.5 flex-none text-muted-foreground" />
+        <span className="min-w-0 flex-1 truncate font-mono text-[0.72rem]" title={name}>{name}</span>
+        <Button aria-label={`Wert für ${name} setzen`} onClick={() => send({ action: "setSecret", name })} size="xs" variant="secondary">Wert setzen</Button>
+      </li>)}
+    </ul>
+  </section>;
+}
+
+/** Die Einrichtung: die Server als Zeilen, dahinter die Dialoge zum Anlegen, Bearbeiten, Anmelden und Entfernen. */
+export function ConnectionsPage({ state, send }: PanelPageProps) {
+  const [dialog, setDialog] = useState<{ kind: "new" } | { kind: "edit"; name: string }>();
+  const [login, setLogin] = useState<string>();
+  const [removing, setRemoving] = useState<string>();
+  const editing = dialog?.kind === "edit" ? state.connections.find((connection) => connection.name === dialog.name) : undefined;
+  const loginConnection = state.connections.find((connection) => connection.name === login);
+  const open = dialog?.kind === "new" || editing !== undefined;
+  const missingSecrets = state.missingSecrets ?? [];
+  return <div className="grid grid-cols-1 gap-3">
+    <PanelHeader send={send} title="Server" />
+    {state.problem && <p className="text-[0.8rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{state.problem}</p>}
+    <section className="grid grid-cols-1 gap-1.5">
+      {state.connections.length === 0
+        ? <p className="text-[0.85rem] leading-normal text-muted-foreground">Noch kein Server.</p>
+        : <ul className="grid grid-cols-1">
+          {state.connections.map((connection) => <ConnectionRow connection={connection} key={connection.name} onEdit={(name) => setDialog({ kind: "edit", name })} onLogin={setLogin} onRemove={setRemoving} send={send} />)}
+        </ul>}
+    </section>
+    {missingSecrets.length > 0 && <MissingSecrets names={missingSecrets} send={send} />}
+    <div className="flex flex-wrap items-center gap-2">
+      <Button onClick={() => setDialog({ kind: "new" })} size="sm"><PlusIcon data-icon="inline-start" />Neuer Server</Button>
+      <Button aria-label="Einstellung öffnen" onClick={() => send({ action: "settingsFile" })} size="sm" title="Einstellung öffnen (settings.json)" variant="ghost"><SettingsIcon data-icon="inline-start" />settings.json</Button>
+    </div>
+    {open && <ConnectionDialog connection={editing} key={editing?.name ?? "neu"} onClose={() => setDialog(undefined)} send={send} state={state} />}
+    {loginConnection && <LoginDialog connection={loginConnection} onClose={() => setLogin(undefined)} send={send} />}
+    {removing !== undefined && <ConfirmDialog confirmLabel="Entfernen" onClose={() => setRemoving(undefined)}
+      onConfirm={() => { send({ action: "remove", name: removing }); setRemoving(undefined); }} title={`${removing} entfernen?`}>
+      Der Server verschwindet aus ragents.connections. Gespeicherte Anmeldedaten gehen dabei verloren. Runs auf dem Server bleiben, wo sie sind.
+    </ConfirmDialog>}
+  </div>;
+}

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

@@ -1,24 +1,24 @@
 import { useState, type FormEvent } from "react";
 import { Button, Input, Label } from "../ui";
-import type { PanelAction, TargetView } from "./contract";
+import type { ConnectionView, PanelAction } from "./contract";
 
-/** Die Anmeldung einer Umgebung im Dialogkörper: Benutzer und Passwort oder ein Zugangstoken. */
-export function LoginForm({ target, mode, busy, send, submitLabel, onCancel }: {
-  target: TargetView;
+/** Die Anmeldung an einem Server im Dialogkörper: Benutzer und Passwort oder ein Zugangstoken. */
+export function LoginForm({ connection, mode, busy, send, submitLabel, onCancel }: {
+  connection: ConnectionView;
   mode: "password" | "token";
   busy: boolean;
   send: (action: PanelAction) => void;
   submitLabel: string;
   onCancel?: () => void;
 }) {
-  const [user, setUser] = useState(target.loginUser ?? "");
+  const [user, setUser] = useState(connection.loginUser ?? "");
   const [password, setPassword] = useState("");
   const [token, setToken] = useState("");
   const complete = mode === "token" ? token.trim() !== "" : user.trim() !== "" && password !== "";
-  const field = `${target.name}-${mode}`;
+  const field = `${connection.name}-${mode}`;
   const submit = (event: FormEvent) => {
     event.preventDefault();
-    send(mode === "token" ? { action: "login", name: target.name, token } : { action: "login", name: target.name, user, password });
+    send(mode === "token" ? { action: "login", name: connection.name, token } : { action: "login", name: connection.name, user, password });
   };
   return <form className="grid gap-2.5" onSubmit={submit}>
     {mode === "token"
@@ -27,8 +27,8 @@ export function LoginForm({ target, mode, busy, send, submitLabel, onCancel }: {
         <div className="grid gap-1.5"><Label htmlFor={`user-${field}`}>Benutzer</Label><Input autoComplete="username" disabled={busy} id={`user-${field}`} onChange={(event) => setUser(event.target.value)} value={user} /></div>
         <div className="grid gap-1.5"><Label htmlFor={`password-${field}`}>Passwort</Label><Input autoComplete="current-password" disabled={busy} id={`password-${field}`} onChange={(event) => setPassword(event.target.value)} type="password" value={password} /></div>
       </>}
-    {target.problem && <p className="text-[0.75rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{target.problem}</p>}
-    <p className="text-[0.72rem] leading-normal text-muted-foreground">Die Anmeldedaten liegen im Schlüsselspeicher von VS Code; die Umgebung meldet sich danach still an.</p>
+    {connection.problem && <p className="text-[0.75rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{connection.problem}</p>}
+    <p className="text-[0.72rem] leading-normal text-muted-foreground">Die Anmeldedaten liegen im Schlüsselspeicher von VS Code; die Erweiterung meldet sich danach still am Server an.</p>
     <div className="mt-1 flex flex-wrap justify-end gap-2">
       {onCancel && <Button onClick={onCancel} size="sm" type="button" variant="ghost">Abbrechen</Button>}
       <Button disabled={busy || !complete} size="sm" type="submit">{submitLabel}</Button>

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

@@ -1,8 +1,8 @@
 import { FolderOpenIcon } from "lucide-react";
 import { useEffect, useState, type FormEvent, type ReactNode } from "react";
 import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Label, Toggle } from "../ui";
-import type { PanelAction, PanelState, TargetKind, TargetView } from "./contract";
-import { busyState } from "./target-state";
+import { busyState } from "./connection-state";
+import type { ConnectionKind, ConnectionView, PanelAction, PanelState } from "./contract";
 import { LoginForm } from "./LoginForm";
 
 const PROFILE_FILE = /^ragents\.config\.([a-z0-9]+(?:-[a-z0-9]+)*)\.ts$/;
@@ -22,31 +22,48 @@ function PanelDialog({ title, onClose, children }: { title: string; onClose: ()
   </Dialog>;
 }
 
-/** Die Anmeldung einer Umgebung, aus der Übersicht wie aus den Einstellungen derselbe Dialog. */
-export function LoginDialog({ target, onClose, send }: { target: TargetView; onClose: () => void; send: (action: PanelAction) => void }) {
-  const demanded = target.state.kind === "login-required" ? target.state.mode : "password";
+/** Die Sicherheitsfrage vor einer Handlung, die nichts zurücknimmt: Entfernen eines Servers, Löschen von Runs. */
+export function ConfirmDialog({ title, confirmLabel, onConfirm, onClose, children }: {
+  title: string;
+  confirmLabel: string;
+  onConfirm: () => void;
+  onClose: () => void;
+  children: ReactNode;
+}) {
+  return <PanelDialog onClose={onClose} title={title}>
+    <p className="text-[0.78rem] leading-normal text-muted-foreground [overflow-wrap:anywhere]">{children}</p>
+    <div className="mt-1 flex flex-wrap justify-end gap-2">
+      <Button onClick={onClose} size="sm" type="button" variant="ghost">Abbrechen</Button>
+      <Button onClick={onConfirm} size="sm" type="button" variant="destructive">{confirmLabel}</Button>
+    </div>
+  </PanelDialog>;
+}
+
+/** Die Anmeldung an einem Server, von der Start-Seite wie von der Seite Server derselbe Dialog. */
+export function LoginDialog({ connection, onClose, send }: { connection: ConnectionView; onClose: () => void; send: (action: PanelAction) => void }) {
+  const demanded = connection.state.kind === "login-required" ? connection.state.mode : "password";
   const [mode, setMode] = useState<"password" | "token">(demanded);
-  useEffect(() => { if (target.state.kind === "connected") onClose(); }, [onClose, target.state.kind]);
-  return <PanelDialog onClose={onClose} title={`Anmelden an ${target.name}`}>
+  useEffect(() => { if (connection.state.kind === "connected") onClose(); }, [onClose, connection.state.kind]);
+  return <PanelDialog onClose={onClose} title={`Anmelden an ${connection.name}`}>
     <div aria-label="Art der Anmeldung" className="flex gap-1.5" role="group">
       <Toggle onPressedChange={() => setMode("password")} pressed={mode === "password"} size="sm" variant="outline">Benutzer</Toggle>
       <Toggle onPressedChange={() => setMode("token")} pressed={mode === "token"} size="sm" variant="outline">Zugangstoken</Toggle>
     </div>
-    <LoginForm busy={busyState(target)} key={mode} mode={mode} onCancel={onClose} send={send} submitLabel="Anmelden" target={target} />
+    <LoginForm busy={busyState(connection)} connection={connection} key={mode} mode={mode} onCancel={onClose} send={send} submitLabel="Anmelden" />
   </PanelDialog>;
 }
 
-/** Anlegen und Bearbeiten einer Umgebung; Bearbeiten schickt update und behält damit die gespeicherten Anmeldedaten. */
-export function TargetDialog({ state, target, onClose, send }: {
+/** Anlegen und Bearbeiten eines Servers; Bearbeiten schickt update und behält damit die gespeicherten Anmeldedaten. */
+export function ConnectionDialog({ state, connection, onClose, send }: {
   state: PanelState;
-  target: TargetView | undefined;
+  connection: ConnectionView | undefined;
   onClose: () => void;
   send: (action: PanelAction) => void;
 }) {
-  const [kind, setKind] = useState<TargetKind>(target?.kind ?? "server");
-  const [name, setName] = useState(target?.name ?? "");
-  const [url, setUrl] = useState(target?.kind === "server" ? target.address : "");
-  const [profileFile, setProfileFile] = useState(target?.kind === "profile" ? target.address : "");
+  const [kind, setKind] = useState<ConnectionKind>(connection?.kind ?? "server");
+  const [name, setName] = useState(connection?.name ?? "");
+  const [url, setUrl] = useState(connection?.kind === "server" ? connection.address : "");
+  const [profileFile, setProfileFile] = useState(connection?.kind === "profile" ? connection.address : "");
   const [sent, setSent] = useState<{ name: string; at: PanelState }>();
   const picked = state.pickedProfileFile;
   const settled = sent !== undefined && sent.at !== state;
@@ -59,7 +76,7 @@ export function TargetDialog({ state, target, onClose, send }: {
   useEffect(() => {
     if (!settled || sent === undefined) return;
     if (state.problem !== undefined) setSent(undefined);
-    else if (state.targets.some((entry) => entry.name === sent.name)) onClose();
+    else if (state.connections.some((entry) => entry.name === sent.name)) onClose();
   }, [onClose, sent, settled, state]);
   const takeProfile = (file: string) => {
     setProfileFile(file);
@@ -69,23 +86,23 @@ export function TargetDialog({ state, target, onClose, send }: {
   const submit = (event: FormEvent) => {
     event.preventDefault();
     setSent({ name: name.trim(), at: state });
-    if (target === undefined) send(kind === "server" ? { action: "addServer", name, url } : { action: "addProfile", name, profileFile });
+    if (connection === undefined) send(kind === "server" ? { action: "addServer", name, url } : { action: "addProfile", name, profileFile });
     else send(kind === "server"
-      ? { action: "updateServer", name: target.name, newName: name, url }
-      : { action: "updateProfile", name: target.name, newName: name, profileFile });
+      ? { action: "updateServer", name: connection.name, newName: name, url }
+      : { action: "updateProfile", name: connection.name, newName: name, profileFile });
   };
-  return <PanelDialog onClose={onClose} title={target ? `${target.name} bearbeiten` : "Neue Umgebung"}>
+  return <PanelDialog onClose={onClose} title={connection ? `${connection.name} bearbeiten` : "Neuer Server"}>
     <form className="grid gap-3" onSubmit={submit}>
-      <div aria-label="Art der Umgebung" className="flex gap-1.5" role="group">
+      <div aria-label="Art des Servers" className="flex gap-1.5" role="group">
         <Toggle onPressedChange={() => setKind("server")} pressed={kind === "server"} size="sm" variant="outline">Server</Toggle>
         <Toggle onPressedChange={() => setKind("profile")} pressed={kind === "profile"} size="sm" variant="outline">Lokales Profil</Toggle>
       </div>
       {kind === "server"
-        ? <div className="grid gap-1.5"><Label htmlFor="target-url">Adresse</Label><Input id="target-url" onChange={(event) => setUrl(event.target.value)} placeholder="https://werkstatt.example.com" value={url} /></div>
+        ? <div className="grid gap-1.5"><Label htmlFor="connection-url">Adresse</Label><Input id="connection-url" onChange={(event) => setUrl(event.target.value)} placeholder="https://werkstatt.example.com" value={url} /></div>
         : <div className="grid gap-1.5">
-          <Label htmlFor="target-profile-file">Profildatei</Label>
+          <Label htmlFor="connection-profile-file">Profildatei</Label>
           <div className="flex items-center gap-2">
-            <Input aria-label="Profildatei" className="min-w-0 flex-1 font-mono text-[0.72rem]" id="target-profile-file" onChange={(event) => setProfileFile(event.target.value)} placeholder="~/repos/RAgents/ragents.config.core.ts" title={profileFile} value={profileFile} />
+            <Input aria-label="Profildatei" className="min-w-0 flex-1 font-mono text-[0.72rem]" id="connection-profile-file" onChange={(event) => setProfileFile(event.target.value)} placeholder="~/repos/RAgents/ragents.config.core.ts" title={profileFile} value={profileFile} />
             <Button className="flex-none" onClick={() => send({ action: "pickProfile" })} size="sm" type="button" variant="secondary"><FolderOpenIcon data-icon="inline-start" />Datei wählen ...</Button>
           </div>
           {state.profileSuggestions.length > 0 && <>
@@ -101,14 +118,14 @@ export function TargetDialog({ state, target, onClose, send }: {
           </>}
         </div>}
       <div className="grid gap-1.5">
-        <Label htmlFor="target-name">Name</Label>
-        <Input id="target-name" onChange={(event) => setName(event.target.value)} placeholder={kind === "server" ? "Werkstatt" : "core"} value={name} />
+        <Label htmlFor="connection-name">Name</Label>
+        <Input id="connection-name" onChange={(event) => setName(event.target.value)} placeholder={kind === "server" ? "Werkstatt" : "core"} value={name} />
         {kind === "profile" && <span className="text-[0.68rem] text-muted-foreground">aus dem Dateinamen übernommen, überschreibbar</span>}
       </div>
       {state.problem && <p className="text-[0.75rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{state.problem}</p>}
       <div className="mt-1 flex flex-wrap justify-end gap-2">
         <Button onClick={onClose} size="sm" type="button" variant="ghost">Abbrechen</Button>
-        <Button disabled={!name.trim() || !value.trim()} size="sm" type="submit">{target ? "Speichern" : "Anlegen"}</Button>
+        <Button disabled={!name.trim() || !value.trim()} size="sm" type="submit">{connection ? "Speichern" : "Anlegen"}</Button>
       </div>
     </form>
   </PanelDialog>;

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

@@ -0,0 +1,11 @@
+import { ArrowLeftIcon } from "lucide-react";
+import { Button } from "../ui";
+import type { PanelAction } from "./contract";
+
+/** Die Kopfzeile der Seiten Runs und Server: der Weg zurück auf Start und der Seitentitel; die Aktionen stehen in der Titelzeile von VS Code. */
+export function PanelHeader({ title, send }: { title: string; send: (action: PanelAction) => void }) {
+  return <div className="flex items-center gap-1.5">
+    <Button aria-label="Zur Start-Seite" onClick={() => send({ action: "page", page: "start" })} size="icon-sm" title="Zur Start-Seite" variant="ghost"><ArrowLeftIcon /></Button>
+    <h1 className="min-w-0 flex-1 text-[1.1rem] font-semibold">{title}</h1>
+  </div>;
+}

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

@@ -1,9 +1,12 @@
-import { OverviewPage, type PanelPageProps } from "./OverviewPage";
-import { SettingsPage } from "./SettingsPage";
+import { ConnectionsPage } from "./ConnectionsPage";
+import type { PanelPageProps } from "./page-props";
+import { RunsPage } from "./RunsPage";
+import { StartPage } from "./StartPage";
 
-/** Das Panel der Erweiterung ohne geöffneten Run: die Übersicht aller Umgebungen, dahinter die Einstellungsseite. */
+/** Das Panel ohne geöffneten Run: Start, Runs oder Server; der Run selbst liegt im Run-Panel. */
 export function PanelPage(props: PanelPageProps) {
-  return <main className="min-h-dvh p-3">
-    {props.state.page === "settings" ? <SettingsPage {...props} /> : <OverviewPage {...props} />}
+  const page = props.state.page;
+  return <main className="h-dvh overflow-y-auto p-3">
+    {page === "connections" ? <ConnectionsPage {...props} /> : page === "runs" ? <RunsPage key={props.state.runsConnection ?? ""} {...props} /> : <StartPage {...props} />}
   </main>;
 }

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

@@ -0,0 +1,48 @@
+import { cn } from "cn";
+import { CircleAlertIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { Checkbox, longTime, RunStateIcon, shortTime } from "../ui";
+import type { ConnectionRun, ConnectionView } from "./contract";
+
+const lineClass = "grid grid-cols-subgrid items-center rounded-md px-2 py-1.5 text-left hover:bg-accent"
+  + " focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60";
+
+/** Die Spalten der Liste: Kontrollkästchen (nur im Auswahlmodus), Zustand, Titel, Zeit und Server (nur ab zwei Servern). */
+const columnsOf = (showConnection: boolean, selecting: boolean): string => selecting
+  ? (showConnection ? "grid-cols-[auto_auto_minmax(0,1fr)_auto_auto]" : "grid-cols-[auto_auto_minmax(0,1fr)_auto]")
+  : (showConnection ? "grid-cols-[auto_minmax(0,1fr)_auto_auto]" : "grid-cols-[auto_minmax(0,1fr)_auto]");
+
+/** Die Liste der Run-Zeilen: ein Raster, dessen Spalten die Zeilen per Subgrid teilen, damit alles untereinander steht. */
+export function RunList({ label, showConnection, selecting = false, children }: {
+  label: string;
+  showConnection: boolean;
+  selecting?: boolean;
+  children: ReactNode;
+}) {
+  return <ul aria-label={label} className={cn("-mx-2 grid gap-x-2 gap-y-0.5", columnsOf(showConnection, selecting))}>{children}</ul>;
+}
+
+/** Eine Zeile je Run, auf Start wie auf Runs dieselbe: Zustand und Titel links, rechts Zeit und Server in den Spalten der Liste. */
+export function RunLine({ connection, run, showConnection, selecting, selected, onOpen, onToggle }: {
+  connection: ConnectionView;
+  run: ConnectionRun;
+  showConnection: boolean;
+  selecting?: boolean;
+  selected?: boolean;
+  onOpen: () => void;
+  onToggle?: () => void;
+}) {
+  const time = shortTime(run.updatedAt);
+  return <li className="col-span-full grid grid-cols-subgrid items-center">
+    {selecting && <Checkbox aria-label={`${run.title} auswählen`} checked={selected === true} className="ml-1" onCheckedChange={() => onToggle?.()} />}
+    <button className={cn(lineClass, selecting ? "col-[2/-1]" : "col-span-full")} onClick={() => (selecting ? onToggle?.() : onOpen())} title={showConnection ? `${run.title} (${connection.name})` : run.title} type="button">
+      <RunStateIcon open={run.pendingActions} state={run.state} />
+      <span className="flex min-w-0 items-center gap-1.5">
+        <span className="min-w-0 truncate text-[0.8rem] font-medium">{run.title}</span>
+        {run.problem !== undefined && <span className="flex flex-none text-destructive" title={run.problem}><CircleAlertIcon aria-hidden className="size-3.5" /><span className="sr-only">{run.problem}</span></span>}
+      </span>
+      <span className="w-[42px] text-right font-mono text-[0.62rem] text-muted-foreground" data-cell="time" title={longTime(run.updatedAt)}>{time}</span>
+      {showConnection && <span className="max-w-[92px] truncate text-[0.64rem] font-semibold text-muted-foreground" data-cell="connection" title={connection.name}>{connection.name}</span>}
+    </button>
+  </li>;
+}