@schlenkr/ragents 0.1.0 → 0.1.2

package/apps/web/src/column/ColumnApp.tsx

@@ -1,6 +1,10 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { ChevronDownIcon, ChevronUpIcon, LayoutGridIcon } from "lucide-react";
-import { canStartEntry } from "../../../../packages/ragents/src/access";
+import { canStartEntry, type AccessContext } from "../../../../packages/ragents/src/access";
+import { getStartOptions, setStartOption } from "../api";
+import { sendChatMessage, startChatEntry } from "../chat/requests";
+import { preparedRunInput } from "../run-preparation";
+import { initialStartOptionUpdates } from "../StartOptions";
 import { AccessScreen, useAccess } from "../AccessContext";
 import type { SessionInfo } from "../api";
 import { PluginChat } from "../PluginChat";
@@ -9,7 +13,7 @@ import { usePluginActivation } from "../PluginActivation";
 import { useRunReadState } from "../run-read-state";
 import { SessionList } from "../SessionList";
 import { SettingsModal } from "../SettingsModal";
-import { Alert, Button } from "../ui";
+import { Alert, Button, Spinner } from "../ui";
 import type { ColumnLocation } from "./column-location";
 import { ColumnMenu } from "./ColumnMenu";
 import { useColumnHost } from "./host";
@@ -45,25 +49,40 @@ function ColumnPage({ initialRunId, registry }: { initialRunId: string | undefin
   const canCreate = writeRuns && (access.can("runs.create") || registry.scriptEntries.some((entry) => canStartEntry(access, entry.id)));
   const runReadState = useRunReadState(access.user?.id);
   const [runId, setRunId] = useState(initialRunId);
+  const [runStartOptions, setRunStartOptions] = useState<Readonly<Record<string, unknown>>>();
   const [draft, setDraft] = useState<{ session: SessionInfo; startOptions?: Readonly<Record<string, unknown>>; entryId?: string }>();
+  const [launch, setLaunch] = useState<Launch>();
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [listOpen, setListOpen] = useState(false);
   const openSettings = useCallback(() => setSettingsOpen(true), []);
-  const { sessions, unreachable, refresh } = useSessionList(readRuns && !draft);
+  const { sessions, unreachable, refresh } = useSessionList(readRuns && !draft && !launch);
   const [headerContainer, setHeaderContainer] = useState<HTMLDivElement | null>(null);
   const [toolsContainer, setToolsContainer] = useState<HTMLDivElement | null>(null);
   const startDraft = useCallback((startOptions?: Readonly<Record<string, unknown>>, entryId?: string) => { setListOpen(false); setDraft({ session: newDraft(), startOptions, entryId }); }, []);
   const createRun = useCallback(() => startDraft(), [startDraft]);
+  const openRun = useCallback((id: string, startOptions?: Readonly<Record<string, unknown>>) => {
+    setListOpen(false);
+    setDraft(undefined);
+    setLaunch(undefined);
+    setRunStartOptions(startOptions);
+    setRunId(id);
+  }, []);
   const selectRun = useCallback((id: string) => { setListOpen(false); setRunId(id); }, []);
 
   useEffect(() => host.onCommand((message) => {
     if (message.type === "selectRun") {
       setDraft(undefined);
+      setLaunch(undefined);
       setListOpen(false);
+      setRunStartOptions(undefined);
       setRunId(message.runId ?? undefined);
     }
-    if (message.type === "newRun" && canCreate) startDraft(message.startOptions, message.entryId);
-  }), [canCreate, host, startDraft]);
+    if (message.type !== "newRun" || !canCreate) return;
+    // Im Panel ist ein Klick ein Klick: die Vorlage startet sofort, der freie Auftrag entsteht im Chat des neuen Runs.
+    if (host.kind !== "vscode") startDraft(message.startOptions, message.entryId);
+    else if (message.entryId === undefined) openRun(crypto.randomUUID(), message.startOptions);
+    else setLaunch({ runId: crypto.randomUUID(), entryId: message.entryId, startOptions: message.startOptions });
+  }), [canCreate, host, openRun, startDraft]);
   useEffect(() => { host.notify({ type: "ready" }); }, [host]);
   useEffect(() => { host.notify({ type: "runChanged", runId: runId ?? null }); }, [host, runId]);
   useEffect(() => {
@@ -73,6 +92,9 @@ function ColumnPage({ initialRunId, registry }: { initialRunId: string | undefin
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [listOpen]);
 
+  if (launch) return <RunLaunch access={access} launch={launch} onCancel={() => setLaunch(undefined)} onOpenSettings={openSettings}
+    onStarted={openRun} registry={registry} />;
+
   const session = sessions.find((entry) => entry.id === runId);
   const list = readRuns
     ? <SessionList activeId={runId} onCreate={canCreate ? createRun : undefined} onSelect={selectRun} onToggleSelected={() => undefined} registry={registry} seenRevisions={runReadState.revisions} selectMode={false} selectedIds={noSelection} sessions={sessions} />
@@ -90,8 +112,9 @@ function ColumnPage({ initialRunId, registry }: { initialRunId: string | undefin
             </header>
             <main className="relative z-1 flex min-h-0 min-w-0 flex-1 @container/chat-content">
               <PluginChat
-                canvasToolbarContainer={toolsContainer}
+                toolbarContainer={toolsContainer}
                 headerContainer={headerContainer}
+                initialStartOptions={runStartOptions}
                 key={runId}
                 layout="column"
                 onViewed={runReadState.markViewed}
@@ -134,6 +157,59 @@ function ColumnPage({ initialRunId, registry }: { initialRunId: string | undefin
   );
 }
 
+interface Launch {
+  readonly runId: string;
+  readonly entryId: string;
+  readonly startOptions?: Readonly<Record<string, unknown>>;
+}
+
+/** Ein Klick auf eine Kachel der Übersicht: Startoptionen setzen, den Einstieg starten, fertig. */
+async function launchRun(launch: Launch, registry: PluginRegistry, access: AccessContext): Promise<void> {
+  const entry = registry.startEntries.find((candidate) => candidate.id === launch.entryId);
+  if (!entry) throw new Error("Diese Startvorlage gibt es in diesem Profil nicht.");
+  if (!canStartEntry(access, entry.id)) throw new Error(`${entry.title} ist für dieses Benutzerkonto nicht freigegeben.`);
+  if (launch.startOptions) {
+    const options = await getStartOptions(launch.runId);
+    for (const [id, value] of initialStartOptionUpdates(options, launch.startOptions)) await setStartOption(launch.runId, id, value);
+  }
+  if (entry.action === "script") await startChatEntry(launch.runId, entry.id, null);
+  else await sendChatMessage(launch.runId, preparedRunInput([], entry.prompt, undefined, entry.skill).text);
+}
+
+function RunLaunch({ launch, registry, access, onStarted, onCancel, onOpenSettings }: {
+  launch: Launch;
+  registry: PluginRegistry;
+  access: AccessContext;
+  onStarted: (runId: string) => void;
+  onCancel: () => void;
+  onOpenSettings: () => void;
+}) {
+  const [error, setError] = useState<string>();
+  const running = useRef(false);
+  useEffect(() => {
+    if (running.current) return;
+    running.current = true;
+    void launchRun(launch, registry, access).then(
+      () => onStarted(launch.runId),
+      (cause: unknown) => setError(cause instanceof Error ? cause.message : String(cause)),
+    );
+  }, [access, launch, onStarted, registry]);
+  return (
+    <div className="flex h-full flex-col bg-[image:var(--canvas-backdrop)]">
+      <header className={listHeaderClass}>
+        <LayoutGridIcon aria-hidden className="size-4 flex-none text-muted-foreground" />
+        <strong className="min-w-0 flex-1 truncate text-[0.82rem] font-semibold">{registry.brand.title}</strong>
+        <ColumnMenu onOpenSettings={onOpenSettings} />
+      </header>
+      <div className="flex min-h-0 flex-1 items-center justify-center p-6">
+        {error
+          ? <Alert className="max-w-[420px] gap-3" variant="destructive"><p>{error}</p><Button onClick={onCancel} variant="outline">Zurück</Button></Alert>
+          : <p className="flex items-center gap-2 text-muted-foreground" role="status"><Spinner />Run wird gestartet ...</p>}
+      </div>
+    </div>
+  );
+}
+
 function ElementPage({ elementId, registry, runId }: { elementId: string; registry: PluginRegistry; runId: string }) {
   const host = useColumnHost();
   const readRuns = useAccess().can("runs.read");

package/apps/web/src/column/clipboard.ts

@@ -0,0 +1,64 @@
+import { isClipboardColumnMessage } from "./host-contract";
+
+type EditingAction = "paste" | "copy" | "cut";
+
+const actionOf = (event: KeyboardEvent): EditingAction | undefined => {
+  if (!(event.metaKey || event.ctrlKey) || event.altKey) return undefined;
+  switch (event.key) {
+    case "v": return "paste";
+    case "c": return "copy";
+    case "x": return "cut";
+    default: return undefined;
+  }
+};
+
+const isEditable = (element: Element | null): element is HTMLElement =>
+  element !== null && (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || (element as HTMLElement).isContentEditable === true);
+
+/**
+ * macOS liefert Einfügen, Kopieren und Ausschneiden über das Menü der Anwendung, und VS Code reicht
+ * den Befehl nur an das Dokument seines Webviews weiter, nicht in ein iframe fremder Herkunft. Die
+ * Spalte führt ihn deshalb selbst aus; den Text der Zwischenablage holt sie über die Hülle.
+ */
+export function installClipboardBridge(browser: Window): () => void {
+  const parent = browser.parent;
+  const pending = new Map<string, (text: string) => void>();
+
+  const onMessage = (event: MessageEvent) => {
+    if (event.source !== parent || !isClipboardColumnMessage(event.data)) return;
+    const settle = pending.get(event.data.id);
+    if (!settle) return;
+    pending.delete(event.data.id);
+    settle(event.data.text);
+  };
+
+  const read = () => new Promise<string>((resolve) => {
+    const id = crypto.randomUUID();
+    pending.set(id, resolve);
+    parent.postMessage({ type: "clipboardRead", id }, "*");
+  });
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    const action = actionOf(event);
+    if (action === undefined || event.defaultPrevented) return;
+    const target = browser.document.activeElement;
+    if (action !== "copy" && !isEditable(target)) return;
+    event.preventDefault();
+    if (action !== "paste") {
+      browser.document.execCommand(action);
+      return;
+    }
+    void read().then((text) => {
+      if (!text || !isEditable(target)) return;
+      target.focus();
+      browser.document.execCommand("insertText", false, text);
+    });
+  };
+
+  browser.addEventListener("message", onMessage);
+  browser.addEventListener("keydown", onKeyDown, true);
+  return () => {
+    browser.removeEventListener("message", onMessage);
+    browser.removeEventListener("keydown", onKeyDown, true);
+  };
+}

package/apps/web/src/column/host-contract.ts

@@ -31,6 +31,10 @@ export type ColumnHostMessage =
   | { type: "openExternal"; url: string }
   | { type: "openPage"; url: string; title: string };
 
+/** Der Text der Zwischenablage: ein iframe fremder Herkunft darf sie im Webview nicht lesen, die Hülle darüber schon. */
+export type ColumnClipboardMessage = { type: "clipboardRead"; id: string };
+export type ClipboardColumnMessage = { type: "clipboardText"; id: string; text: string };
+
 /** Nachrichten des Hosts an das Panel. */
 export type HostColumnMessage =
   | { type: "selectRun"; runId: string | null }
@@ -65,6 +69,12 @@ export const isColumnHostMessage = (value: unknown): value is ColumnHostMessage
   }
 };
 
+export const isColumnClipboardMessage = (value: unknown): value is ColumnClipboardMessage =>
+  isObject(value) && value.type === "clipboardRead" && isText(value.id);
+
+export const isClipboardColumnMessage = (value: unknown): value is ClipboardColumnMessage =>
+  isObject(value) && value.type === "clipboardText" && isText(value.id) && typeof value.text === "string";
+
 export const isHostColumnMessage = (value: unknown): value is HostColumnMessage => {
   if (!isObject(value)) return false;
   switch (value.type) {

package/apps/web/src/column.tsx

@@ -7,6 +7,7 @@ import { createRoot } from "react-dom/client";
 import { Button } from "./ui";
 import { AccessGate, AccessScreen } from "./AccessContext";
 import { installAccessToken } from "./access-token";
+import { installClipboardBridge } from "./column/clipboard";
 import { ColumnApp, HostLogin } from "./column/ColumnApp";
 import { parseColumnLocation } from "./column/column-location";
 import { ColumnHostProvider, createColumnHost } from "./column/host";
@@ -21,6 +22,7 @@ try {
   const location = parseColumnLocation(window.location.search);
   if (location.access !== undefined) installAccessToken(location.access);
   const host = createColumnHost(location.host, window);
+  if (location.host === "vscode") installClipboardBridge(window);
   const theme = initializeTheme(window);
   if (location.theme !== undefined) theme.setPreference(location.theme);
   host.onCommand((message) => { if (message.type === "theme") theme.setPreference(message.theme); });

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

@@ -2,13 +2,14 @@ import { useState, type FormEvent } from "react";
 import { Button, Input, Label } from "../ui";
 import type { PanelAction, TargetView } from "./contract";
 
-/** Die Anmeldung eines Ziels, direkt in seiner Karte: Benutzer und Passwort oder ein Zugangstoken. */
-export function LoginForm({ target, mode, busy, send, submitLabel }: {
+/** Die Anmeldung einer Umgebung im Dialogkörper: Benutzer und Passwort oder ein Zugangstoken. */
+export function LoginForm({ target, mode, busy, send, submitLabel, onCancel }: {
   target: TargetView;
   mode: "password" | "token";
   busy: boolean;
   send: (action: PanelAction) => void;
   submitLabel: string;
+  onCancel?: () => void;
 }) {
   const [user, setUser] = useState(target.loginUser ?? "");
   const [password, setPassword] = useState("");
@@ -26,6 +27,11 @@ export function LoginForm({ target, mode, busy, send, submitLabel }: {
         <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>
       </>}
-    <Button className="w-full" disabled={busy || !complete} size="sm" type="submit">{submitLabel}</Button>
+    {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>
+    <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>
+    </div>
   </form>;
 }

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

@@ -1,90 +1,215 @@
-import { BookIcon, CodeIcon, PlusIcon, SettingsIcon } from "lucide-react";
-import { Button, Card } from "../ui";
+import { BookIcon, ChevronRightIcon, CodeIcon, PlusIcon, SearchIcon, ServerIcon, SettingsIcon } from "lucide-react";
+import { useState, type CSSProperties, type ReactNode } from "react";
+import { cn } from "cn";
+import { Button, Input } from "../ui";
 import type { PanelAction, PanelState, TargetEntry, TargetRun, TargetView } from "./contract";
-import { LoginForm } from "./LoginForm";
-import { runStateLabel, runTone, stateDetail, stateLabel, stateTone } from "./target-state";
+import { LoginDialog } from "./PanelDialogs";
+import { busyState, environmentHue, kindLabel, runStateLabel, runTime, runTone, stateDetail, stateLabel, stateTone } from "./target-state";
 
 export interface PanelPageProps {
   readonly state: PanelState;
   readonly send: (action: PanelAction) => void;
 }
 
-const rowClass = "flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2 disabled:opacity-50";
+const NEW_RUN_GROUP = "Ohne Vorlage";
+const NEW_RUN_TEXT = "Leerer Run, der Auftrag entsteht im Chat der Arbeitsspalte.";
 
-function RunRow({ target, run, busy, send }: { target: TargetView; run: TargetRun; busy: boolean; send: PanelPageProps["send"] }) {
+const edgeColor = "[border-left-color:oklch(var(--env-lightness)_var(--env-chroma)_var(--env-hue))]";
+const sectionClass = "flex items-baseline gap-2 text-[0.66rem] font-bold uppercase tracking-[0.06em] text-muted-foreground";
+const countClass = "font-mono text-[0.62rem] font-normal tracking-normal opacity-80";
+const environmentLine = "truncate text-[0.62rem] leading-tight text-muted-foreground";
+
+const hueStyle = (name: string): CSSProperties => ({ "--env-hue": environmentHue(name) } as CSSProperties);
+
+function Section({ title, count }: { title: string; count: number }) {
+  return <h2 className={sectionClass}>{title}<span className={countClass}>{count}</span></h2>;
+}
+
+function EnvironmentRow({ target, marked, send, onLogin }: {
+  target: TargetView;
+  marked: boolean;
+  send: PanelPageProps["send"];
+  onLogin: (target: TargetView) => void;
+}) {
+  const detail = stateDetail(target) ?? target.problem;
+  const busy = busyState(target);
+  return <li className="flex flex-wrap items-center gap-x-2 gap-y-1 border-b border-border-soft px-1 py-2 last:border-b-0">
+    {marked && <span aria-hidden className="size-[9px] flex-none rounded-[3px] bg-[oklch(var(--env-lightness)_var(--env-chroma)_var(--env-hue))]" style={hueStyle(target.name)} />}
+    <strong className="min-w-0 flex-1 truncate text-[0.8rem] font-semibold">{target.name}</strong>
+    <span className="flex-none text-[0.62rem] uppercase tracking-[0.05em] text-muted-foreground">{kindLabel(target)}</span>
+    <span className={cn("flex flex-none 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>
+    <EnvironmentAction busy={busy} onLogin={onLogin} send={send} target={target} />
+    {detail && <p className="w-full text-[0.7rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{detail}</p>}
+  </li>;
+}
+
+/** Nur eine Umgebung mit Problem bietet hier eine Handlung an; Trennen und Stoppen stehen in den Einstellungen. */
+function EnvironmentAction({ target, busy, send, onLogin }: {
+  target: TargetView;
+  busy: boolean;
+  send: PanelPageProps["send"];
+  onLogin: (target: TargetView) => void;
+}) {
+  const state = target.state.kind;
+  if (state === "login-required" || state === "forbidden") return <Button disabled={busy} onClick={() => onLogin(target)} 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 target.kind === "profile"
+    ? <Button disabled={busy} onClick={() => send({ action: "startProfile", name: target.name })} size="xs" variant="secondary">Starten</Button>
+    : <Button disabled={busy} onClick={() => send({ action: "connect", name: target.name })} size="xs" variant="secondary">Verbinden</Button>;
+  return null;
+}
+
+function RunRow({ target, run, marked, send }: { target: TargetView; run: TargetRun; marked: boolean; send: PanelPageProps["send"] }) {
   return <li>
-    <button className={rowClass} disabled={busy} onClick={() => send({ action: "openRun", name: target.name, runId: run.id })} type="button">
-      <span aria-hidden className={`size-[7px] flex-none rounded-full bg-current ${runTone(run)}`} />
-      <span className="min-w-0 flex-1 truncate text-[0.82rem] font-medium">{run.title}</span>
-      <span className={`flex-none text-[0.7rem] ${runTone(run)}`}>{runStateLabel(run)}</span>
+    <button
+      className={cn("flex w-full min-w-0 items-center gap-2 rounded-[2px_7px_7px_2px] border-l-[3px] border-transparent py-1.5 pr-2 pl-2 text-left hover:bg-accent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60",
+        marked && cn("pl-[9px]", edgeColor))}
+      onClick={() => send({ action: "openRun", name: target.name, runId: run.id })}
+      style={marked ? hueStyle(target.name) : undefined}
+      title={marked ? `${run.title} (${target.name})` : run.title}
+      type="button">
+      <span aria-hidden className={cn("size-[7px] flex-none rounded-full bg-current", runTone(run))} />
+      <span className="flex min-w-0 flex-1 flex-col">
+        {marked && <span className={environmentLine}>{target.name}</span>}
+        <span className="truncate text-[0.8rem] font-medium">{run.title}</span>
+      </span>
+      <span className="flex flex-none flex-col items-end">
+        <span className={cn("text-[0.68rem]", runTone(run))}>{runStateLabel(run)}</span>
+        <span className="font-mono text-[0.62rem] text-muted-foreground">{runTime(run)}</span>
+      </span>
     </button>
   </li>;
 }
 
-function EntryRow({ target, entry, busy, send }: { target: TargetView; entry: TargetEntry; busy: boolean; send: PanelPageProps["send"] }) {
-  return <li>
-    <button className={rowClass} disabled={busy} onClick={() => send({ action: "newRun", name: target.name, entryId: entry.id })} title={entry.description} type="button">
-      {entry.action === "skill" ? <BookIcon aria-hidden className="size-3.5 flex-none text-muted-foreground" /> : <CodeIcon aria-hidden className="size-3.5 flex-none text-muted-foreground" />}
-      <span className="min-w-0 flex-1 truncate text-[0.82rem]">{entry.title}</span>
+const tileClass = "group/tile flex h-full min-w-0 flex-col gap-1.5 border border-border-soft border-l-[3px] bg-card p-2.5 pl-[9px] text-left"
+  + " hover:border-border hover:bg-accent/40 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60";
+const skillTone = "[--tone:var(--primary)] rounded-[3px_12px_12px_3px] border-l-primary/70";
+const scriptTone = "[--tone:var(--success)] rounded-[3px_4px_4px_3px] border-l-success/70";
+
+function Tile({ category, icon, title, description, environment, extra, onClick }: {
+  category: string;
+  icon: ReactNode;
+  title: string;
+  description: string;
+  environment: string | undefined;
+  extra: string;
+  onClick: () => void;
+}) {
+  return <li className="min-w-0">
+    <button className={cn(tileClass, extra)} onClick={onClick} style={environment ? hueStyle(environment) : undefined}
+      title={environment ? `${title} (${environment})` : title} type="button">
+      <span className="flex min-w-0 items-center gap-1.5 text-(--tone)">
+        {icon}
+        <span className="truncate text-[0.58rem] font-semibold uppercase tracking-[0.06em] text-muted-foreground">{category}</span>
+      </span>
+      {environment && <span className={environmentLine}>{environment}</span>}
+      <span className="text-[0.76rem] font-semibold leading-snug [overflow-wrap:anywhere]">{title}</span>
+      <span className="line-clamp-2 text-[0.66rem] leading-[1.45] text-muted-foreground">{description}</span>
+      <span className="mt-auto flex items-center gap-0.5 pt-1.5 text-[0.62rem] font-semibold text-(--tone) opacity-50 group-hover/tile:opacity-100">
+        Starten<ChevronRightIcon aria-hidden className="size-3" />
+      </span>
     </button>
   </li>;
 }
 
-function TargetActions({ target, busy, send }: { target: TargetView; busy: boolean; send: PanelPageProps["send"] }) {
-  const state = target.state;
-  if (state.kind === "stopped") return <Button disabled={busy} onClick={() => send({ action: "connect", name: target.name })} size="sm" variant="secondary">{target.kind === "profile" ? "Starten" : "Verbinden"}</Button>;
-  if (state.kind === "unreachable" || state.kind === "failed") return <Button disabled={busy} onClick={() => send({ action: "connect", name: target.name })} size="sm" variant="secondary">Erneut versuchen</Button>;
-  if (state.kind === "connected") return <Button disabled={busy} onClick={() => send({ action: "disconnect", name: target.name })} size="sm" variant="ghost">{target.kind === "profile" ? "Stoppen" : "Trennen"}</Button>;
-  return null;
+interface Offer {
+  readonly target: TargetView;
+  readonly entry: TargetEntry | undefined;
 }
 
-function TargetCard({ target, send }: { target: TargetView; send: PanelPageProps["send"] }) {
-  const detail = stateDetail(target);
-  const connected = target.state.kind === "connected";
-  const busy = target.state.kind === "starting" || target.state.kind === "connecting";
-  return <Card className="gap-3 p-4">
-    <header className="grid gap-1">
-      <div className="flex min-w-0 items-center gap-2">
-        <strong className="min-w-0 flex-1 truncate text-[0.95rem] font-semibold">{target.name}</strong>
-        <span className={`flex-none text-[0.72rem] font-medium ${stateTone(target)}`}>{stateLabel(target)}</span>
-      </div>
-      <p className="truncate text-[0.72rem] text-muted-foreground" title={target.description}>{target.description}</p>
-    </header>
-    {detail && <p className="text-[0.75rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{detail}</p>}
-    {target.problem && <p className="text-[0.75rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{target.problem}</p>}
-    {target.state.kind === "login-required" && <LoginForm busy={busy} mode={target.state.mode} send={send} submitLabel="Anmelden" target={target} />}
-    {connected && <>
-      {target.runs.length > 0
-        ? <ul className="-mx-2 grid gap-0.5">{target.runs.map((run) => <RunRow busy={busy} key={run.id} run={run} send={send} target={target} />)}</ul>
-        : <p className="text-[0.75rem] text-muted-foreground">Noch keine Runs.</p>}
-      {target.canCreate && <>
-        <Button disabled={busy} onClick={() => send({ action: "newRun", name: target.name })} size="sm" variant="secondary"><PlusIcon data-icon="inline-start" />Neuer Run</Button>
-        {target.entries.length > 0 && <details className="-mx-2">
-          <summary className="cursor-pointer rounded-md px-2 py-1 text-[0.72rem] font-semibold text-muted-foreground hover:bg-accent">Startvorlagen <span className="font-mono opacity-80">{target.entries.length}</span></summary>
-          <ul className="mt-1 grid gap-0.5">{target.entries.map((entry) => <EntryRow busy={busy} entry={entry} key={entry.id} send={send} target={target} />)}</ul>
-        </details>}
-      </>}
-    </>}
-    <footer className="flex flex-wrap items-center gap-2 empty:hidden">
-      <TargetActions busy={busy} send={send} target={target} />
-      {connected && target.user && <Button disabled={busy} onClick={() => send({ action: "logout", name: target.name })} size="sm" variant="ghost">Abmelden</Button>}
-    </footer>
-  </Card>;
+const matches = (offer: Offer, query: string): boolean => {
+  const entry = offer.entry;
+  const haystack = entry === undefined
+    ? `${NEW_RUN_GROUP} Neuer Run ${NEW_RUN_TEXT} ${offer.target.name}`
+    : `${entry.title} ${entry.description} ${entry.category} ${offer.target.name}`;
+  return haystack.toLocaleLowerCase("de-DE").includes(query);
+};
+
+/** Die Kacheln stehen nach Kategorie gruppiert; die Gruppe "Ohne Vorlage" mit dem leeren Run bleibt oben. */
+const groupOffers = (offers: readonly Offer[]): Array<readonly [string, readonly Offer[]]> => {
+  const groups = new Map<string, Offer[]>();
+  for (const offer of offers) {
+    const key = offer.entry?.category ?? NEW_RUN_GROUP;
+    const group = groups.get(key) ?? [];
+    group.push(offer);
+    groups.set(key, group);
+  }
+  return [...groups];
+};
+
+function Templates({ targets, marked, send }: { targets: readonly TargetView[]; marked: boolean; send: PanelPageProps["send"] }) {
+  const [query, setQuery] = useState("");
+  const offers: Offer[] = targets.flatMap((target) => [
+    { target, entry: undefined },
+    ...target.entries.map((entry) => ({ target, entry })),
+  ]);
+  const needle = query.trim().toLocaleLowerCase("de-DE");
+  const filtered = needle === "" ? offers : offers.filter((offer) => matches(offer, needle));
+  return <section className="grid gap-2">
+    <Section count={offers.length} title="Startvorlagen" />
+    <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="Vorlagen suchen" className="h-8 pl-8 text-[0.76rem]" onChange={(event) => setQuery(event.target.value)}
+        placeholder="Vorlagen suchen ..." type="search" value={query} />
+    </div>
+    {filtered.length === 0
+      ? <p className="text-[0.75rem] text-muted-foreground" role="status">Keine passende Vorlage.</p>
+      : groupOffers(filtered).map(([group, entries]) => <div className="grid gap-1.5" key={group}>
+        <h3 className={sectionClass}>{group}<span className={countClass}>{entries.length}</span></h3>
+        <ul className="grid grid-cols-[repeat(auto-fill,minmax(182px,1fr))] gap-2">
+          {entries.map(({ target, entry }) => entry === undefined
+            ? <Tile category={NEW_RUN_GROUP} description={NEW_RUN_TEXT} environment={marked ? target.name : undefined}
+              extra="[--tone:var(--primary)] rounded-[3px_10px_10px_3px] border-dashed border-l-primary/50" icon={<PlusIcon aria-hidden className="size-3.5" />}
+              key={target.name} onClick={() => send({ action: "newRun", name: target.name })} title="Neuer Run" />
+            : <Tile category={entry.category} description={entry.description} environment={marked ? target.name : undefined}
+              extra={entry.kind === "skill" ? skillTone : scriptTone}
+              icon={entry.kind === "skill" ? <BookIcon aria-hidden className="size-3.5" /> : <CodeIcon aria-hidden className="size-3.5" />}
+              key={`${target.name}:${entry.id}`}
+              onClick={() => send({ action: "newRun", name: target.name, entryId: entry.id })} title={entry.title} />)}
+        </ul>
+      </div>)}
+  </section>;
 }
 
-/** Die Startseite des Panels: alle Ziele nebeneinander, je Ziel Zustand, Runs und Startvorlagen. */
+/** Die Startseite des Panels: alle Umgebungen, darunter ihre Runs und ihre Startvorlagen als Kacheln. */
 export function OverviewPage({ state, send }: PanelPageProps) {
-  return <div className="grid gap-3">
+  const [login, setLogin] = useState<string>();
+  const targets = state.targets;
+  const marked = targets.length > 1;
+  const runs = targets.flatMap((target) => target.runs.map((run) => ({ target, run })))
+    .sort((left, right) => right.run.updatedAt - left.run.updatedAt);
+  const starters = targets.filter((target) => target.state.kind === "connected" && target.canCreate);
+  const loginTarget = targets.find((target) => target.name === login);
+  return <div className="grid gap-4">
     <div className="flex items-center justify-between gap-2">
-      <h1 className="text-[1.15rem] font-semibold">Übersicht</h1>
+      <h1 className="text-[1.1rem] font-semibold">Übersicht</h1>
       <Button aria-label="Einstellungen" onClick={() => send({ action: "page", page: "settings" })} size="icon-sm" title="Einstellungen" 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
-      ? <Card className="gap-3 p-4">
-        <p className="text-[0.85rem] leading-normal text-muted-foreground">Noch kein Ziel. Lege einen Server oder ein lokales Profil an.</p>
-        <Button onClick={() => send({ action: "page", page: "settings" })}><PlusIcon data-icon="inline-start" />Ziel anlegen</Button>
-      </Card>
-      : state.targets.map((target) => <TargetCard key={target.name} send={send} target={target} />)}
+    {targets.length === 0
+      ? <div className="grid gap-3">
+        <p className="text-[0.85rem] leading-normal text-muted-foreground">Noch keine Umgebung. Lege einen Server oder ein lokales Profil an.</p>
+        <Button onClick={() => send({ action: "page", page: "settings" })}><ServerIcon data-icon="inline-start" />Umgebung anlegen</Button>
+      </div>
+      : <>
+        <section className="grid gap-1.5">
+          {marked && <Section count={targets.length} title="Umgebungen" />}
+          <ul className="grid">
+            {targets.map((target) => <EnvironmentRow key={target.name} marked={marked} onLogin={(entry) => setLogin(entry.name)} send={send} target={target} />)}
+          </ul>
+        </section>
+        <section className="grid gap-1.5">
+          <Section count={runs.length} title="Runs" />
+          {runs.length === 0
+            ? <p className="text-[0.75rem] text-muted-foreground">Noch keine Runs.</p>
+            : <ul className="-mx-1 grid gap-0.5">
+              {runs.map(({ target, run }) => <RunRow key={`${target.name}:${run.id}`} marked={marked} run={run} send={send} target={target} />)}
+            </ul>}
+        </section>
+        {starters.length > 0 && <Templates marked={marked} send={send} targets={starters} />}
+      </>}
+    {loginTarget && <LoginDialog onClose={() => setLogin(undefined)} send={send} target={loginTarget} />}
   </div>;
 }