@schlenkr/ragents 0.1.0 → 0.1.2

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

@@ -0,0 +1,115 @@
+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 { LoginForm } from "./LoginForm";
+
+const PROFILE_FILE = /^ragents\.config\.([a-z0-9]+(?:-[a-z0-9]+)*)\.ts$/;
+
+/** Eine Profildatei heißt ragents.config.<profil>.ts; ihr Profil ist der Name, den der Dialog vorschlägt. */
+export const profileNameOf = (profileFile: string): string =>
+  PROFILE_FILE.exec(profileFile.split(/[/\\]/).pop() ?? "")?.[1] ?? "";
+
+const fileNameOf = (profileFile: string): string => profileFile.split(/[/\\]/).pop() ?? profileFile;
+
+function PanelDialog({ title, onClose, children }: { title: string; onClose: () => void; children: ReactNode }) {
+  return <Dialog onOpenChange={(next) => { if (!next) onClose(); }} open>
+    <DialogContent className="gap-3" scope="page" size="small">
+      <DialogHeader><DialogTitle className="text-[0.95rem] font-semibold">{title}</DialogTitle></DialogHeader>
+      {children}
+    </DialogContent>
+  </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";
+  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}`}>
+    <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} />
+  </PanelDialog>;
+}
+
+/** Anlegen und Bearbeiten einer Umgebung; Bearbeiten schickt update und behält damit die gespeicherten Anmeldedaten. */
+export function TargetDialog({ state, target, onClose, send }: {
+  state: PanelState;
+  target: TargetView | 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 [sent, setSent] = useState<{ name: string; at: PanelState }>();
+  const picked = state.pickedProfileFile;
+  const settled = sent !== undefined && sent.at !== state;
+  useEffect(() => {
+    if (!picked) return;
+    setKind("profile");
+    setProfileFile(picked);
+    setName((current) => current.trim() === "" ? profileNameOf(picked) : current);
+  }, [picked]);
+  useEffect(() => {
+    if (!settled || sent === undefined) return;
+    if (state.problem !== undefined) setSent(undefined);
+    else if (state.targets.some((entry) => entry.name === sent.name)) onClose();
+  }, [onClose, sent, settled, state]);
+  const takeProfile = (file: string) => {
+    setProfileFile(file);
+    setName((current) => current.trim() === "" ? profileNameOf(file) : current);
+  };
+  const value = kind === "server" ? url : profileFile;
+  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 });
+    else send(kind === "server"
+      ? { action: "updateServer", name: target.name, newName: name, url }
+      : { action: "updateProfile", name: target.name, newName: name, profileFile });
+  };
+  return <PanelDialog onClose={onClose} title={target ? `${target.name} bearbeiten` : "Neue Umgebung"}>
+    <form className="grid gap-3" onSubmit={submit}>
+      <div aria-label="Art der Umgebung" 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="target-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} />
+            <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 && <>
+            <p className="text-[0.7rem] leading-normal text-muted-foreground">Im Host-Ordner gefunden, ein Klick übernimmt sie:</p>
+            <ul className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-1.5">
+              {state.profileSuggestions.map((file) => <li key={file}>
+                <button aria-pressed={profileFile === file} className="flex w-full min-w-0 flex-col gap-0.5 rounded-md border border-border-soft px-2.5 py-1.5 text-left hover:border-border aria-pressed:border-primary aria-pressed:bg-accent" onClick={() => takeProfile(file)} type="button">
+                  <strong className="truncate text-[0.75rem] font-semibold">{profileNameOf(file)}</strong>
+                  <span className="truncate font-mono text-[0.65rem] text-muted-foreground" title={file}>{fileNameOf(file)}</span>
+                </button>
+              </li>)}
+            </ul>
+          </>}
+        </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} />
+        {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>
+      </div>
+    </form>
+  </PanelDialog>;
+}

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

@@ -1,7 +1,7 @@
 import { OverviewPage, type PanelPageProps } from "./OverviewPage";
 import { SettingsPage } from "./SettingsPage";
 
-/** Das Panel der Erweiterung ohne geöffneten Run: die Übersicht aller Ziele, dahinter die Einstellungsseite. */
+/** Das Panel der Erweiterung ohne geöffneten Run: die Übersicht aller Umgebungen, dahinter die Einstellungsseite. */
 export function PanelPage(props: PanelPageProps) {
   return <main className="min-h-dvh p-3">
     {props.state.page === "settings" ? <SettingsPage {...props} /> : <OverviewPage {...props} />}

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

@@ -1,102 +1,98 @@
-import { ArrowLeftIcon, FolderOpenIcon, PlusIcon, SettingsIcon, Trash2Icon } from "lucide-react";
-import { useEffect, useState, type FormEvent } from "react";
-import { Button, Card, Input, Label, Toggle } from "../ui";
+import { ArrowLeftIcon, FolderIcon, PencilIcon, PlusIcon, ServerIcon, SettingsIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "cn";
+import { Button } from "../ui";
 import type { PanelAction, TargetView } from "./contract";
-import { LoginForm } from "./LoginForm";
 import type { PanelPageProps } from "./OverviewPage";
-import { stateLabel, stateTone } from "./target-state";
+import { LoginDialog, TargetDialog } from "./PanelDialogs";
+import { busyState, kindLabel, stateDetail, stateLabel, stateTone } from "./target-state";
 
-const sectionTitleClass = "text-[0.8rem] font-semibold";
+const fileNameOf = (address: string): string => address.split(/[/\\]/).pop() ?? address;
 
-function Credentials({ target, busy, send }: { target: TargetView; busy: boolean; send: (action: PanelAction) => void }) {
-  const demanded = target.state.kind === "login-required" ? target.state.mode : "password";
-  const [mode, setMode] = useState<"password" | "token">(demanded);
-  return <details className="rounded-md border border-border-soft px-2.5 py-2">
-    <summary className="cursor-pointer text-[0.75rem] font-semibold text-muted-foreground">Anmeldedaten {target.savedLogin ? "(gespeichert)" : ""}</summary>
-    <div className="mt-2.5 grid gap-2.5">
-      <div className="flex gap-1.5">
-        <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={busy} mode={mode} send={send} submitLabel="Speichern und anmelden" target={target} />
-      {target.savedLogin && <Button disabled={busy} onClick={() => send({ action: "logout", name: target.name })} size="sm" variant="ghost">Anmeldedaten löschen</Button>}
-    </div>
-  </details>;
+/** Verbinden, Trennen, Starten und Stoppen sitzen hier; die Übersicht bietet nur den Weg aus einem Problem heraus. */
+function RowActions({ target, busy, send, onLogin }: {
+  target: TargetView;
+  busy: boolean;
+  send: (action: PanelAction) => void;
+  onLogin: (name: string) => void;
+}) {
+  const state = target.state.kind;
+  const profile = target.kind === "profile";
+  if (state === "connected") return <Button disabled={busy} onClick={() => send({ action: profile ? "stopProfile" : "disconnect", name: target.name })} size="xs" variant="ghost">{profile ? "Stoppen" : "Trennen"}</Button>;
+  if (state === "login-required" || state === "forbidden") return <Button disabled={busy} onClick={() => onLogin(target.name)} size="xs" variant="secondary">Anmelden</Button>;
+  if (state === "unreachable" || state === "failed") return <Button disabled={busy} onClick={() => send({ action: "retry", name: target.name })} size="xs" variant="secondary">Erneut versuchen</Button>;
+  if (state === "stopped") return <Button disabled={busy} onClick={() => send({ action: profile ? "startProfile" : "connect", name: target.name })} size="xs" variant="secondary">{profile ? "Starten" : "Verbinden"}</Button>;
+  return null;
 }
 
-function TargetRow({ target, send }: { target: TargetView; send: (action: PanelAction) => void }) {
+function TargetRow({ target, send, onEdit, onLogin }: {
+  target: TargetView;
+  send: (action: PanelAction) => void;
+  onEdit: (name: string) => void;
+  onLogin: (name: string) => void;
+}) {
   const [confirming, setConfirming] = useState(false);
-  const busy = target.state.kind === "starting" || target.state.kind === "connecting";
-  return <Card className="gap-2.5 p-3.5">
-    <div className="flex min-w-0 items-start gap-2">
-      <span className="min-w-0 flex-1">
-        <strong className="block truncate text-[0.9rem] font-semibold">{target.name}</strong>
-        <span className="block truncate text-[0.72rem] text-muted-foreground" title={target.description}>{target.description}</span>
-        <span className={`block text-[0.7rem] ${stateTone(target)}`}>{stateLabel(target)}</span>
+  const busy = busyState(target);
+  const detail = stateDetail(target) ?? target.problem;
+  const profile = target.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-baseline gap-2">
+        <strong className="min-w-0 truncate text-[0.8rem] font-semibold">{target.name}</strong>
+        <span className="flex-none text-[0.6rem] uppercase tracking-[0.05em] text-muted-foreground">{kindLabel(target)}</span>
       </span>
+      <span className="block truncate font-mono text-[0.68rem] text-muted-foreground" title={target.address}>{profile ? fileNameOf(target.address) : target.address}</span>
+    </span>
+    <span className={cn("col-span-2 flex items-center gap-1.5 text-[0.7rem]", stateTone(target))}>
+      <span aria-hidden className="size-[7px] flex-none rounded-full bg-current" />{stateLabel(target)}
+    </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} onLogin={onLogin} send={send} target={target} />
+      {target.savedLogin && <Button disabled={busy} onClick={() => send({ action: "logout", name: target.name })} size="xs" variant="ghost">Abmelden</Button>}
+      <Button disabled={busy} onClick={() => onEdit(target.name)} size="xs" variant="ghost"><PencilIcon data-icon="inline-start" />Bearbeiten</Button>
       {confirming
-        ? <span className="flex flex-none items-center gap-1">
+        ? <span className="flex items-center gap-1.5">
+          <span className="text-[0.7rem] text-muted-foreground">Wirklich entfernen?</span>
           <Button disabled={busy} onClick={() => send({ action: "remove", name: target.name })} size="xs" variant="destructive">Entfernen</Button>
           <Button onClick={() => setConfirming(false)} size="xs" variant="ghost">Nein</Button>
         </span>
-        : <Button aria-label={`${target.name} entfernen`} disabled={busy} onClick={() => setConfirming(true)} size="icon-sm" variant="ghost"><Trash2Icon /></Button>}
-    </div>
-    {target.problem && <p className="text-[0.75rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{target.problem}</p>}
-    {target.kind === "server" && <Credentials busy={busy} send={send} target={target} />}
-  </Card>;
-}
-
-function AddServer({ send }: { send: (action: PanelAction) => void }) {
-  const [name, setName] = useState("");
-  const [url, setUrl] = useState("");
-  const submit = (event: FormEvent) => {
-    event.preventDefault();
-    send({ action: "addServer", name, url });
-    setName("");
-    setUrl("");
-  };
-  return <form className="grid gap-2.5" onSubmit={submit}>
-    <h2 className={sectionTitleClass}>Server hinzufügen</h2>
-    <div className="grid gap-1.5"><Label htmlFor="server-name">Name</Label><Input id="server-name" onChange={(event) => setName(event.target.value)} placeholder="Werkstatt" value={name} /></div>
-    <div className="grid gap-1.5"><Label htmlFor="server-url">Adresse</Label><Input id="server-url" onChange={(event) => setUrl(event.target.value)} placeholder="https://werkstatt.example.com" value={url} /></div>
-    <Button disabled={!name.trim() || !url.trim()} size="sm" type="submit"><PlusIcon data-icon="inline-start" />Server anlegen</Button>
-  </form>;
+        : <Button aria-label={`${target.name} entfernen`} className="ml-auto" disabled={busy} onClick={() => setConfirming(true)} size="icon-sm" variant="ghost"><Trash2Icon /></Button>}
+    </span>
+  </li>;
 }
 
-function AddProfile({ picked, send }: { picked: string | undefined; send: (action: PanelAction) => void }) {
-  const [name, setName] = useState("");
-  const [profileFile, setProfileFile] = useState("");
-  useEffect(() => { if (picked) setProfileFile(picked); }, [picked]);
-  const submit = (event: FormEvent) => {
-    event.preventDefault();
-    send({ action: "addProfile", name, profileFile });
-    setName("");
-    setProfileFile("");
-  };
-  return <form className="grid gap-2.5" onSubmit={submit}>
-    <h2 className={sectionTitleClass}>Lokales Profil hinzufügen</h2>
-    <div className="grid gap-1.5"><Label htmlFor="profile-name">Name</Label><Input id="profile-name" onChange={(event) => setName(event.target.value)} placeholder="core" value={name} /></div>
-    <div className="grid gap-1.5"><Label htmlFor="profile-file">Profildatei</Label><Input id="profile-file" onChange={(event) => setProfileFile(event.target.value)} placeholder="~/repos/RAgents/ragents.config.core.ts" value={profileFile} /></div>
-    <div className="flex flex-wrap gap-2">
-      <Button onClick={() => send({ action: "pickProfile" })} size="sm" type="button" variant="ghost"><FolderOpenIcon data-icon="inline-start" />Datei wählen ...</Button>
-      <Button className="flex-1" disabled={!name.trim() || !profileFile.trim()} size="sm" type="submit"><PlusIcon data-icon="inline-start" />Profil anlegen</Button>
-    </div>
-  </form>;
-}
-
-/** Eine Seite für alles, was eingerichtet wird: Ziele anlegen und entfernen, Anmeldedaten je Server. */
+/** Alles, was eingerichtet wird: die Umgebungen als Zeilenliste, dahinter die Dialoge zum Anlegen, Bearbeiten und Anmelden. */
 export function SettingsPage({ state, send }: PanelPageProps) {
+  const [dialog, setDialog] = useState<{ kind: "new" } | { kind: "edit"; name: string }>();
+  const [login, setLogin] = useState<string>();
+  const editing = dialog?.kind === "edit" ? state.targets.find((target) => target.name === dialog.name) : undefined;
+  const loginTarget = state.targets.find((target) => target.name === login);
+  const open = dialog?.kind === "new" || editing !== undefined;
   return <div className="grid gap-3">
     <div className="flex items-center gap-2">
       <Button aria-label="Zur Übersicht" onClick={() => send({ action: "page", page: "overview" })} size="icon-sm" title="Zur Übersicht" variant="ghost"><ArrowLeftIcon /></Button>
-      <h1 className="min-w-0 flex-1 text-[1.15rem] font-semibold">Einstellungen</h1>
+      <h1 className="min-w-0 flex-1 text-[1.1rem] font-semibold">Einstellungen</h1>
       <Button aria-label="Einstellung öffnen" onClick={() => send({ action: "settingsFile" })} size="icon-sm" title="Einstellung öffnen (settings.json)" variant="ghost"><SettingsIcon /></Button>
     </div>
     {state.problem && <p className="text-[0.8rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{state.problem}</p>}
-    {state.targets.length === 0
-      ? <p className="text-[0.85rem] leading-normal text-muted-foreground">Noch kein Ziel.</p>
-      : state.targets.map((target) => <TargetRow key={target.name} send={send} target={target} />)}
-    <Card className="gap-4 p-4"><AddServer send={send} /></Card>
-    <Card className="gap-4 p-4"><AddProfile picked={state.pickedProfileFile} send={send} /></Card>
+    <section className="grid gap-1.5">
+      <h2 className="flex items-baseline gap-2 text-[0.66rem] font-bold uppercase tracking-[0.06em] text-muted-foreground">
+        Umgebungen<span className="font-mono text-[0.62rem] font-normal tracking-normal opacity-80">{state.targets.length}</span>
+      </h2>
+      {state.targets.length === 0
+        ? <p className="text-[0.85rem] leading-normal text-muted-foreground">Noch keine Umgebung.</p>
+        : <ul className="grid">
+          {state.targets.map((target) => <TargetRow key={target.name} onEdit={(name) => setDialog({ kind: "edit", name })} onLogin={setLogin} send={send} target={target} />)}
+        </ul>}
+    </section>
+    <div className="flex flex-wrap items-center gap-2">
+      <Button onClick={() => setDialog({ kind: "new" })} size="sm"><PlusIcon data-icon="inline-start" />Neue Umgebung</Button>
+    </div>
+    {open && <TargetDialog key={editing?.name ?? "neu"} onClose={() => setDialog(undefined)} send={send} state={state} target={editing} />}
+    {loginTarget && <LoginDialog onClose={() => setLogin(undefined)} send={send} target={loginTarget} />}
   </div>;
 }

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

@@ -1,6 +1,6 @@
 import type { ColumnTheme } from "../column/host-contract";
 
-/** Ein Ziel der Erweiterung: ein RAgents-Server oder ein lokales Profil, das sie selbst startet. */
+/** Eine Umgebung der Erweiterung: ein RAgents-Server oder ein lokales Profil, das sie selbst startet. */
 export type TargetKind = "server" | "profile";
 
 export type TargetState =
@@ -25,14 +25,16 @@ export interface TargetEntry {
   readonly id: string;
   readonly title: string;
   readonly description: string;
-  readonly action: "skill" | "script";
+  readonly kind: "skill" | "script";
+  /** Die Gruppe der Kachelansicht; ein Run-Script ohne eigene Kategorie steht unter "Run-Scripts". */
+  readonly category: string;
 }
 
 export interface TargetView {
   readonly name: string;
   readonly kind: TargetKind;
-  /** Adresse des Servers oder Profil samt Pfad. */
-  readonly description: string;
+  /** Adresse des Servers oder Pfad der Profildatei. */
+  readonly address: string;
   readonly state: TargetState;
   readonly runs: readonly TargetRun[];
   readonly entries: readonly TargetEntry[];
@@ -42,9 +44,9 @@ export interface TargetView {
   readonly user?: string;
   /** Die zuletzt versuchte Kennung; das Anmeldeformular übernimmt sie. */
   readonly loginUser?: string;
-  /** Anmeldedaten liegen in der SecretStorage, damit sich das Ziel still anmeldet. */
+  /** Anmeldedaten liegen in der SecretStorage, damit die Umgebung sich still anmeldet. */
   readonly savedLogin?: boolean;
-  /** Fehler der letzten Aktion an diesem Ziel, direkt in seiner Karte. */
+  /** Fehler der letzten Aktion an dieser Umgebung, direkt in ihrer Zeile. */
   readonly problem?: string;
 }
 
@@ -52,9 +54,11 @@ export interface PanelState {
   readonly theme: ColumnTheme;
   readonly page: "overview" | "settings";
   readonly targets: readonly TargetView[];
+  /** 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; das Formular übernimmt ihn. */
+  /** Der zuletzt über den Dateidialog gewählte Profilpfad; der Dialog übernimmt ihn. */
   readonly pickedProfileFile?: string;
 }
 
@@ -71,7 +75,9 @@ export type PanelAction =
   | { readonly action: "pickProfile" }
   | { readonly action: "addServer"; readonly name: string; readonly url: string }
   | { readonly action: "addProfile"; readonly name: string; readonly profileFile: string }
-  | { readonly action: "remove" | "connect" | "disconnect" | "logout"; readonly name: 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 }
   | { 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 }
@@ -88,7 +94,9 @@ export const isPanelActionMessage = (value: unknown): value is PanelActionMessag
     case "settingsFile": case "pickProfile": return true;
     case "addServer": return text(value, "name") && text(value, "url");
     case "addProfile": return text(value, "name") && text(value, "profileFile");
-    case "remove": case "connect": case "disconnect": case "logout": return text(value, "name");
+    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 "login": return text(value, "name") && (text(value, "token") || (text(value, "user") && text(value, "password")));
     case "openRun": return text(value, "name") && text(value, "runId");
     case "newRun": return text(value, "name") && ((value as { entryId?: unknown }).entryId === undefined || text(value, "entryId"));

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

@@ -1,6 +1,6 @@
 import type { TargetRun, TargetView } from "./contract";
 
-/** Wie der Zustand eines Ziels in seiner Karte steht; ein lokales Profil ist nicht getrennt, sondern nicht gestartet. */
+/** Wie der Zustand einer Umgebung in ihrer Zeile steht; ein lokales Profil ist nicht getrennt, sondern nicht gestartet. */
 export const stateLabel = (target: TargetView): string => {
   switch (target.state.kind) {
     case "stopped": return target.kind === "profile" ? "nicht gestartet" : "getrennt";
@@ -27,13 +27,17 @@ export const stateTone = (target: TargetView): string => {
   }
 };
 
-/** Der Grund, der zum Zustand gehört; er steht unter der Kopfzeile der Karte. */
+/** Der Grund, der zum Zustand gehört; er steht unter der Zeile der Umgebung. */
 export const stateDetail = (target: TargetView): string | undefined => {
   const state = target.state;
   if (state.kind === "unreachable" || state.kind === "forbidden" || state.kind === "failed") return state.message;
   return undefined;
 };
 
+export const kindLabel = (target: TargetView): string => target.kind === "profile" ? "lokales Profil" : "Server";
+
+export const busyState = (target: TargetView): boolean => target.state.kind === "starting" || target.state.kind === "connecting";
+
 export const runStateLabel = (run: TargetRun): string => {
   switch (run.state) {
     case "running": return "läuft";
@@ -51,3 +55,24 @@ export const runTone = (run: TargetRun): string => {
     case "idle": return "text-muted-foreground";
   }
 };
+
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+/** Wann ein Run zuletzt etwas getan hat; alles ab gestern nennt das Datum statt einer Spanne. */
+export const runTime = (run: TargetRun, now: number = Date.now()): string => {
+  const passed = now - run.updatedAt;
+  if (passed < MINUTE) return "gerade eben";
+  if (passed < HOUR) return `vor ${Math.floor(passed / MINUTE)} Min`;
+  if (passed < DAY) return `vor ${Math.floor(passed / HOUR)} Std`;
+  return new Date(run.updatedAt).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" });
+};
+
+const HUES = [255, 170, 300, 10, 130, 210, 60, 330];
+
+/** Die Farbe einer Umgebung hängt an ihrem Namen, nicht an ihrer Stelle in der Liste; Umsortieren ändert sie nicht. */
+export const environmentHue = (name: string): number => {
+  const hash = [...name].reduce((value, character) => (value * 31 + character.codePointAt(0)!) % 100_003, 7);
+  return HUES[hash % HUES.length]!;
+};

package/apps/web/src/ui/theme.css

@@ -134,6 +134,8 @@
     --warning-soft: #f3e4d8;
     --info: #4b648a;
     --teal: #356c70;
+    --env-lightness: 0.55;
+    --env-chroma: 0.12;
     --border: #c9c4d5;
     --border-soft: #dad6e3;
     --border-strong: #a397b2;
@@ -186,6 +188,8 @@
     --warning-soft: #43382b;
     --info: #9dbade;
     --teal: #8ec9c4;
+    --env-lightness: 0.79;
+    --env-chroma: 0.1;
     --border: #555065;
     --border-soft: #403c50;
     --border-strong: #8e809f;

package/apps/web/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "lib": [
+      "ES2024",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@aicontainer/server/*": [
+        "../../apps/server/src/*"
+      ],
+      "@aicontainer/web/*": [
+        "../../apps/web/src/*"
+      ],
+      "@aicontainer/plugins/*": [
+        "../../plugins/*"
+      ],
+      "@ragents/workflow": [
+        "../../plugins/ragents.actor-programs/workflow/index.ts"
+      ]
+    }
+  },
+  "include": [
+    "src",
+    "../../plugins/*/web",
+    "../../plugins/ragents.actor-programs/client-ui/index.tsx",
+    "../../plugins/*/contract.ts"
+  ]
+}

package/apps/web/vite.config.ts

@@ -0,0 +1,140 @@
+import { fileURLToPath } from "node:url";
+import { execFileSync } from "node:child_process";
+import { readdir, readFile } from "node:fs/promises";
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import path from "node:path";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig, type Plugin } from "vite";
+
+const apiTarget = process.env.API_TARGET ?? "http://localhost:4710";
+const repositoryRoot = fileURLToPath(new URL("../../", import.meta.url));
+const hostEntry = path.join(repositoryRoot, "apps/web/src/main.tsx");
+const pluginEntriesModule = "virtual:ragents-plugins";
+
+interface BundledPlugin {
+  readonly id: string;
+  readonly folder: string;
+  readonly web: string | undefined;
+}
+
+const webEntryOf = (folder: string): string | undefined =>
+  ["web/index.ts", "web/index.tsx"].map((name) => path.join(folder, name))
+    .find((candidate) => statSync(candidate, { throwIfNoEntry: false })?.isFile() === true);
+
+const repositoryPlugins = (): BundledPlugin[] => {
+  const root = path.join(repositoryRoot, "plugins");
+  return readdirSync(root, { withFileTypes: true })
+    .filter((entry) => entry.isDirectory())
+    .map((entry) => ({ id: entry.name, folder: path.join(root, entry.name), web: webEntryOf(path.join(root, entry.name)) }));
+};
+
+/** The profile's plugins as the server resolves them; PLUGIN_LIST_FILE names them directly, otherwise the last stdout line carries the JSON. */
+const profilePlugins = (): BundledPlugin[] => {
+  const listFile = process.env.PLUGIN_LIST_FILE;
+  if (listFile) return JSON.parse(readFileSync(listFile, "utf8")) as BundledPlugin[];
+  if (!process.env.PRODUCT_PROFILE) return [];
+  const output = execFileSync("node", ["--import", "tsx", "src/profile/plugin-list.ts"], {
+    cwd: path.join(repositoryRoot, "apps/server"),
+    encoding: "utf8",
+    stdio: ["ignore", "pipe", "inherit"],
+  });
+  return JSON.parse(output.trim().split("\n").at(-1) ?? "[]") as BundledPlugin[];
+};
+
+/** Bundles the repository's plugins and, with a profile, its plugins from anywhere on disk. */
+const bundledPlugins = (): BundledPlugin[] => {
+  const plugins = repositoryPlugins();
+  for (const plugin of profilePlugins()) {
+    const known = plugins.find((candidate) => candidate.id === plugin.id);
+    if (known && known.folder !== plugin.folder) {
+      throw new Error(`Das Plugin ${plugin.id} liegt unter ${known.folder} und ${plugin.folder}`);
+    }
+    if (!known) plugins.push(plugin);
+  }
+  return plugins;
+};
+
+const isBareSpecifier = (specifier: string): boolean =>
+  !/^(\.{1,2}\/|\/|\0|[a-z][a-z0-9+.-]*:)/i.test(specifier);
+
+const ragentsPlugins = (plugins: readonly BundledPlugin[]): Plugin => {
+  const external = plugins.filter((plugin) => !plugin.folder.startsWith(repositoryRoot));
+  const withWeb = plugins.filter((plugin) => plugin.web !== undefined);
+  return {
+    name: "ragents-plugins",
+    enforce: "pre",
+    config: () => ({
+      resolve: {
+        alias: {
+          "@aicontainer/ragents/src": path.join(repositoryRoot, "packages/ragents/src"),
+          "@aicontainer/server": path.join(repositoryRoot, "apps/server/src"),
+          "@aicontainer/web": path.join(repositoryRoot, "apps/web/src"),
+          "@aicontainer/plugins": path.join(repositoryRoot, "plugins"),
+        },
+      },
+      server: { fs: { allow: [repositoryRoot, ...external.map((plugin) => plugin.folder)] } },
+    }),
+    resolveId(source, importer) {
+      if (source === pluginEntriesModule) return `\0${pluginEntriesModule}`;
+      if (!importer || importer.startsWith(repositoryRoot) || !isBareSpecifier(source)) return null;
+      return this.resolve(source, hostEntry, { skipSelf: true });
+    },
+    load(id) {
+      if (id !== `\0${pluginEntriesModule}`) return null;
+      const entries = withWeb.map((plugin) => `  ${JSON.stringify(plugin.id)}: () => import(${JSON.stringify(plugin.web)}),`);
+      return `export const webPluginEntries = {\n${entries.join("\n")}\n};\n`;
+    },
+    transform(code, id) {
+      if (!id.endsWith("/apps/web/src/ui/tailwind.css") || external.length === 0) return null;
+      const sources = external.flatMap((plugin) => [
+        `@source ${JSON.stringify(path.join(plugin.folder, "web/**/*"))};`,
+        `@source ${JSON.stringify(path.join(plugin.folder, "client-ui/**/*"))};`,
+      ]);
+      return `${code}\n${sources.join("\n")}\n`;
+    },
+  };
+};
+
+export default defineConfig({
+  plugins: [ragentsPlugins(bundledPlugins()), react(), tailwindcss(), {
+    name: "ragents-help",
+    apply: "build",
+    buildStart() {
+      const script = path.join(repositoryRoot, "build/homepage.sh");
+      if (statSync(script, { throwIfNoEntry: false })?.isFile()) execFileSync("bash", [script], { cwd: repositoryRoot, stdio: "inherit" });
+    },
+    async generateBundle() {
+      const directory = path.join(repositoryRoot, "docs/homepage/dist");
+      if (!statSync(directory, { throwIfNoEntry: false })?.isDirectory()) return;
+      const include = async (relative: string): Promise<void> => {
+        for (const entry of await readdir(path.join(directory, relative), { withFileTypes: true })) {
+          const name = path.posix.join(relative, entry.name);
+          if (entry.isDirectory()) await include(name);
+          else this.emitFile({ type: "asset", fileName: `help/${name}`, source: await readFile(path.join(directory, name)) });
+        }
+      };
+      await include("");
+    },
+  }],
+  build: {
+    outDir: path.join(repositoryRoot, "apps/web/dist", process.env.PRODUCT_PROFILE ?? "ohne-profil"),
+    rollupOptions: {
+      input: {
+        main: fileURLToPath(new URL("index.html", import.meta.url)),
+        column: fileURLToPath(new URL("column.html", import.meta.url)),
+      },
+    },
+  },
+  server: {
+    port: 5710,
+    strictPort: true,
+    proxy: {
+      "/api": apiTarget,
+      "/chat": apiTarget,
+      "/plugin-assets": apiTarget,
+      "/ragents": apiTarget,
+      "/help": apiTarget,
+    },
+  },
+});