@schlenkr/ragents 0.1.5 → 0.1.7

package/apps/web/src/SettingsModal.tsx

@@ -3,7 +3,7 @@ import { ArrowLeftIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon,
 import { cn } from "cn";
 import { Button, Card, Dialog, DialogContent, DialogTitle, Input, Spinner, Toggle, ToggleGroup, ToggleGroupItem } from "./ui";
 import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { Markdown } from "./chat/Markdown";
+import { Markdown } from "quassel";
 import { SourceCode } from "./SourceCode";
 import { formatBytes } from "./lib/format";
 import { ThemeSettings } from "./ThemeSettings";
@@ -12,7 +12,7 @@ import { modelDefaultsChangedEvent } from "./model-settings-events";
 import {
   getSettings,
   getSettingsSkill,
-  type SettingsAgentExtension,
+  type SettingsAgentHook,
   type SettingsModel,
   type SettingsProfile,
   type SettingsResponse,
@@ -41,14 +41,14 @@ import {
 } from "./settings-contributions";
 
 type SettingsPageSelection =
-  | { kind: "models" | "appearance" | "runtime" | "extensions" }
+  | { kind: "models" | "appearance" | "runtime" | "plugins" }
   | { kind: "plugin"; id: string }
   | { kind: "capability"; id: ContributionKind };
 
 const settingsAreas = [
   { id: "models", label: "Modelle" },
   { id: "appearance", label: "Darstellung" },
-  { id: "extensions", label: "Erweiterungen" },
+  { id: "plugins", label: "Plugins" },
   { id: "runtime", label: "Laufzeit" },
 ] as const;
 const capabilities = contributionFilters.filter(
@@ -97,8 +97,8 @@ type LoadState =
 export function SettingsModal({ onClose, registry }: SettingsModalProps) {
   const access = useAccess();
   const [selection, setSelection] = useState<SettingsPageSelection>({ kind: "models" });
-  const catalogVisible = selection.kind === "extensions" || selection.kind === "plugin" || selection.kind === "capability";
-  const activeArea = catalogVisible ? "extensions" : selection.kind;
+  const catalogVisible = selection.kind === "plugins" || selection.kind === "plugin" || selection.kind === "capability";
+  const activeArea = catalogVisible ? "plugins" : selection.kind;
   const [axis, setAxis] = useState<"plugin" | "capability">("plugin");
   const [lastPlugin, setLastPlugin] = useState<string | null>(null);
   const [lastCapability, setLastCapability] = useState<ContributionKind>("tools");
@@ -181,7 +181,7 @@ export function SettingsModal({ onClose, registry }: SettingsModalProps) {
     setAxis(next);
     setSelection(next === "capability"
       ? { kind: "capability", id: lastCapability }
-      : lastPlugin === null ? { kind: "extensions" } : { kind: "plugin", id: lastPlugin });
+      : lastPlugin === null ? { kind: "plugins" } : { kind: "plugin", id: lastPlugin });
   }
 
   return (
@@ -202,19 +202,19 @@ export function SettingsModal({ onClose, registry }: SettingsModalProps) {
           aria-current={activeArea === area.id ? "page" : undefined}
           className={cn(settingsAreaClass, activeArea === area.id ? "border-b-primary font-bold text-primary" : "text-muted-foreground hover:text-foreground")}
           key={area.id}
-          onClick={() => area.id === "extensions" ? changeAxis(axis) : setSelection({ kind: area.id })}
+          onClick={() => area.id === "plugins" ? changeAxis(axis) : setSelection({ kind: area.id })}
           type="button"
         >{area.label}</button>)}
       </nav>
       {catalogVisible && <div className="flex flex-none gap-1 border-b border-border-soft px-3.5 py-2.5">
-        <ToggleGroup aria-label="Erweiterungen ordnen" size="sm" spacing={0} value={[axis]} variant="outline"
+        <ToggleGroup aria-label="Plugins ordnen" size="sm" spacing={0} value={[axis]} variant="outline"
           onValueChange={([value]) => { if (value) changeAxis(value === "capability" ? "capability" : "plugin"); }}>
-          <ToggleGroupItem value="plugin">Nach Extension</ToggleGroupItem>
+          <ToggleGroupItem value="plugin">Nach Plugin</ToggleGroupItem>
           <ToggleGroupItem value="capability">Nach Fähigkeit</ToggleGroupItem>
         </ToggleGroup>
       </div>}
       <div className={cn("grid min-h-0 flex-1", catalogVisible ? "grid-cols-[230px_minmax(0,1fr)] max-[900px]:grid-cols-[190px_minmax(0,1fr)] max-md:grid-cols-[minmax(0,1fr)] max-md:grid-rows-[auto_minmax(0,1fr)]" : "grid-cols-[minmax(0,1fr)]")}>
-        {catalogVisible && <nav aria-label="Erweiterungen durchsuchen" className="flex min-w-0 flex-col gap-[3px] overflow-y-auto border-r border-border-soft bg-background/72 px-2.5 py-4 max-md:flex-row max-md:overflow-x-auto max-md:border-r-0 max-md:border-b max-md:border-border-soft max-md:p-2" ref={navigationRef}>
+        {catalogVisible && <nav aria-label="Plugins durchsuchen" className="flex min-w-0 flex-col gap-[3px] overflow-y-auto border-r border-border-soft bg-background/72 px-2.5 py-4 max-md:flex-row max-md:overflow-x-auto max-md:border-r-0 max-md:border-b max-md:border-border-soft max-md:p-2" ref={navigationRef}>
           {axis === "plugin" && filtered.map((group) => {
             const count = countContributions(group);
             const selected = selection.kind === "plugin" && selection.id === group.id;
@@ -272,7 +272,7 @@ export function SettingsModal({ onClose, registry }: SettingsModalProps) {
           {(catalogVisible || selection.kind === "runtime") && settings === null && state.status === "loading" && (
             <div className={loadStateClass}>
               <Spinner aria-hidden className="size-3" />
-              Laufzeit und Erweiterungen werden geladen.
+              Laufzeit und Plugins werden geladen.
             </div>
           )}
           {(catalogVisible || selection.kind === "runtime") && settings === null && state.status === "failed" && (
@@ -284,7 +284,7 @@ export function SettingsModal({ onClose, registry }: SettingsModalProps) {
             </div>
           )}
           {settings !== null && selection.kind === "runtime" && <RuntimePage groups={groups} registry={registry} settings={settings} />}
-          {settings !== null && selection.kind === "extensions" && <SettingsPage title="Erweiterungen" description="Durchsuche die installierten Beiträge nach Extension oder Fähigkeit. Wähle eine Extension für ihre Details.">
+          {settings !== null && selection.kind === "plugins" && <SettingsPage title="Plugins" description="Durchsuche die installierten Beiträge nach Plugin oder Fähigkeit. Wähle ein Plugin für seine Details.">
             <div className="grid gap-4">{groups.map((group) => <button className={ownerLinkClass} key={group.id} onClick={() => openPlugin(group.id)} type="button">
               {group.id}<span className={ownerLinkNoteClass}>{countContributions(group)} Beiträge</span>
             </button>)}</div>
@@ -298,7 +298,7 @@ export function SettingsModal({ onClose, registry }: SettingsModalProps) {
               : <PluginPage group={active} key={active.id} settings={registry.settings} />
           )}
           {settings !== null && activeCapability !== undefined && (
-            <SettingsPage title={activeCapability.label} description={`${activeCapability.groups.length} Extensions liefern passende Beiträge. Öffne eine Extension für ihre vollständigen Details.`}>
+            <SettingsPage title={activeCapability.label} description={`${activeCapability.groups.length} Plugins liefern passende Beiträge. Öffne ein Plugin für seine vollständigen Details.`}>
               {activeCapability.groups.length === 0 && <SettingsEmpty>Keine Beiträge gefunden. Wähle eine andere Fähigkeit oder ändere die Suche.</SettingsEmpty>}
               {activeCapability.groups.map((group) => (
                 <PluginPage
@@ -351,7 +351,7 @@ function RuntimePage({ groups, registry, settings }: {
 }) {
   const workspace = settings.runtime.workspace;
   const documents = settings.runtime.documents;
-  const internalExtensions = settings.agentExtensions.filter((extension) => extension.kind === "internal");
+  const internalHooks = settings.agentHooks.filter((hook) => hook.kind === "internal");
   return (
     <SettingsPage
       description={`Die Werte stammen aus der aktuell laufenden ${registry.brand.title}-Instanz. Konfigurationswerte mit Geheimnissen werden vom Server nicht ausgeliefert.`}
@@ -426,17 +426,17 @@ function RuntimePage({ groups, registry, settings }: {
           ))}
         </div>
       </SettingsSection>
-      <SettingsSection count={internalExtensions.length} title="Interne Erweiterungen">
+      <SettingsSection count={internalHooks.length} title="Interne Hooks">
         <p className={sectionCopyClass}>
-          Diese Extensions gehören der Agentenlaufzeit selbst und stammen aus keinem Plugin. Plugin-Erweiterungen
+          Diese Hooks gehören der Agentenlaufzeit selbst und stammen aus keinem Plugin. Hooks eines Plugins
           stehen auf der Seite ihres Plugins.
         </p>
-        {internalExtensions.length === 0
-          ? <SettingsEmpty>Keine interne Agent-Extension registriert.</SettingsEmpty>
+        {internalHooks.length === 0
+          ? <SettingsEmpty>Kein interner Hook registriert.</SettingsEmpty>
           : (
             <div className={cardListClass}>
-              {internalExtensions.map((extension) => (
-                <ExtensionCard extension={extension} key={extension.id} />
+              {internalHooks.map((hook) => (
+                <HookCard hook={hook} key={hook.id} />
               ))}
             </div>
           )}
@@ -470,7 +470,7 @@ function PluginPage({ group, settings, onOpenPlugin }: {
       <header>
         <div className="flex items-center justify-between gap-3">
           {onOpenPlugin
-            ? <button className={ownerLinkClass} onClick={onOpenPlugin} type="button">{group.id}<span className={ownerLinkNoteClass}>Extension öffnen</span></button>
+            ? <button className={ownerLinkClass} onClick={onOpenPlugin} type="button">{group.id}<span className={ownerLinkNoteClass}>Plugin öffnen</span></button>
             : <h2 className={`${pageTitleClass} truncate font-mono`}>{group.id}</h2>}
           {!onOpenPlugin && <span className={statusListClass}>
             <StatusBadge active={group.serverRegistered} label={group.serverRegistered ? "Server registriert" : "Server unbekannt"} />
@@ -506,11 +506,11 @@ function PluginPage({ group, settings, onOpenPlugin }: {
         </SettingsSection>
       )}
       {group.startEntries.length > 0 && (
-        <SettingsSection count={group.startEntries.length} title="Einstiege">
+        <SettingsSection count={group.startEntries.length} title="Vorlagen">
           <p className={sectionCopyClass}>
-            Was das Plugin auf die Startfläche legt. Ein Skill öffnet einen bearbeitbaren Auftrag;
+            Was das Plugin auf die Startseite legt. Ein Skill öffnet einen bearbeitbaren Auftrag;
             ein Run-Script baut den Run selbst auf, bevor
-            der Chat beginnt. Nennt ein Einstieg einen Leitfaden, öffnet der Klick zuerst dessen Dialog.
+            der Chat beginnt. Nennt eine Vorlage einen Leitfaden, öffnet der Klick zuerst dessen Dialog.
           </p>
           <div className={cardListClass}>
             {group.startEntries.map((entry) => (
@@ -571,11 +571,11 @@ function PluginPage({ group, settings, onOpenPlugin }: {
           </div>
         </SettingsSection>
       )}
-      {group.extensions.length > 0 && (
-        <SettingsSection count={group.extensions.length} title="Erweiterungen">
+      {group.hooks.length > 0 && (
+        <SettingsSection count={group.hooks.length} title="Hooks">
           <div className={cardListClass}>
-            {group.extensions.map((extension) => (
-              <ExtensionCard extension={extension} key={extension.id} />
+            {group.hooks.map((hook) => (
+              <HookCard hook={hook} key={hook.id} />
             ))}
           </div>
         </SettingsSection>
@@ -773,22 +773,22 @@ function ProfileCard({ profile }: { profile: SettingsProfile }) {
   );
 }
 
-function ExtensionCard({ extension }: { extension: SettingsAgentExtension }) {
+function HookCard({ hook }: { hook: SettingsAgentHook }) {
   return (
     <article className={cn(cardClass, "grid gap-2")}>
       <header className={cardHeaderClass}>
         <span className={cardCopyClass}>
-          <strong className={cardTitleClass}>{extension.id}</strong>
-          <small className={cardNoteClass}>{extension.owner}</small>
+          <strong className={cardTitleClass}>{hook.id}</strong>
+          <small className={cardNoteClass}>{hook.owner}</small>
         </span>
-        <StatusBadge active label={extension.kind === "internal" ? "Intern" : "Plugin-Beitrag"} />
+        <StatusBadge active label={hook.kind === "internal" ? "Intern" : "Plugin-Beitrag"} />
       </header>
-      <SettingsValue label="Auflösung je Agent" value={extension.resolvesPerAgent ? "Ja" : "Nein"} />
-      {extension.factories.length > 0 && (
+      <SettingsValue label="Auflösung je Agent" value={hook.resolvesPerAgent ? "Ja" : "Nein"} />
+      {hook.factories.length > 0 && (
         <SettingsValue
           label="Factories"
-          value={extension.factories
-            .map((factory) => `${factory.name ?? "anonym"} (${factory.scope})`)
+          value={hook.factories
+            .map((factory) => `${factory.name} (${factory.scope})`)
             .join(", ")}
         />
       )}

package/apps/web/src/StartOptions.tsx

@@ -8,6 +8,7 @@ import {
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui";
 import type { PluginRegistry, SessionContext, StartOptionControlContext } from "./PluginRegistry";
 import { modelDefaultsChangedEvent } from "./model-settings-events";
+import { useOfferedMachines, type OfferedMachines } from "./offered-machines";
 
 export interface StartOptionsControl {
   readonly options: readonly StartOptionState[];
@@ -35,6 +36,44 @@ export const initialStartOptionUpdates = (
   .filter((option) => option.selectable && !option.locked && Object.hasOwn(values, option.id))
   .map((option) => [option.id, values[option.id]] as const);
 
+/** Was eine Vorlage festlegt, belegt niemand vor; sonst scheitert ihr Start an der abweichenden Wahl. */
+export const withoutFixedStartOptions = (
+  values: Readonly<Record<string, unknown>>,
+  fixed: Readonly<Record<string, unknown>> | undefined,
+): Readonly<Record<string, unknown>> => Object.fromEntries(Object.entries(values).filter(([optionId]) => !fixed || !Object.hasOwn(fixed, optionId)));
+
+export interface ShownStartOption {
+  readonly option: StartOptionState;
+  readonly fixed: boolean;
+}
+
+/** Was eine Stelle zeigt: die wählbaren offenen Optionen und jede, die die Vorlage festlegt, mit deren Wert und nicht wählbar. */
+export const shownStartOptions = (
+  options: readonly StartOptionState[],
+  fixed: Readonly<Record<string, unknown>>,
+): readonly ShownStartOption[] => options.flatMap((option): ShownStartOption[] => Object.hasOwn(fixed, option.id)
+  ? [{ option: { ...option, value: fixed[option.id], selectable: false }, fixed: true }]
+  : option.selectable && !option.locked ? [{ option, fixed: false }] : []);
+
+const sameJson = (left: unknown, right: unknown): boolean => {
+  if (Array.isArray(left) || Array.isArray(right)) {
+    return Array.isArray(left) && Array.isArray(right) && left.length === right.length && left.every((entry, index) => sameJson(entry, right[index]));
+  }
+  if (typeof left !== "object" || typeof right !== "object" || left === null || right === null) return left === right;
+  const keys = Object.keys(left);
+  return keys.length === Object.keys(right).length
+    && keys.every((key) => Object.hasOwn(right, key) && sameJson((left as Record<string, unknown>)[key], (right as Record<string, unknown>)[key]));
+};
+
+/** Was vor dem Start anders gewählt ist, als die Vorlage festlegt; so ein Start scheitert am Server. */
+export const conflictingStartOptions = (
+  options: readonly StartOptionState[],
+  fixed: Readonly<Record<string, unknown>>,
+): readonly StartOptionState[] => options.filter((option) => option.chosen && !option.locked
+  && Object.hasOwn(fixed, option.id) && !sameJson(option.value, fixed[option.id]));
+
+const noneFixed: Readonly<Record<string, unknown>> = Object.freeze({});
+
 export function StartOptionsProvider({
   children,
   connected,
@@ -48,10 +87,10 @@ export function StartOptionsProvider({
   sessionId: string;
 }>) {
   const access = useAccess();
-  const allowed = access.can("runs.create") && access.can("runs.inspect");
+  const allowed = access.can("runs.create");
   const started = messageCount > 0;
-  const [state, setState] = useState<{ sessionId: string; options: readonly StartOptionState[]; errors: ReadonlyMap<string, string>; pending: boolean }>(
-    () => ({ sessionId, options: [], errors: new Map(), pending: true }),
+  const [state, setState] = useState<{ sessionId: string; options: readonly StartOptionState[]; errors: ReadonlyMap<string, string>; pending: boolean; loadedStarted: boolean }>(
+    () => ({ sessionId, options: [], errors: new Map(), pending: true, loadedStarted: false }),
   );
   const active = useRef<{ sessionId: string; pending: boolean; controller: AbortController } | null>(null);
   const outstanding = useRef<{ sessionId: string; values: Readonly<Record<string, unknown>> } | null>(
@@ -72,7 +111,7 @@ export function StartOptionsProvider({
     const operation = { sessionId, pending: true, controller };
     active.current = operation;
     setState((current) => current.sessionId === sessionId ? { ...current, pending: true }
-      : { sessionId, options: [], errors: new Map(), pending: true });
+      : { sessionId, options: [], errors: new Map(), pending: true, loadedStarted: false });
     void (async () => {
       try {
         if (saving.current?.sessionId === sessionId) await saving.current.done;
@@ -82,7 +121,7 @@ export function StartOptionsProvider({
         setState((current) => {
           const errors = new Map(current.errors);
           errors.delete("");
-          return { sessionId, options, errors, pending: false };
+          return { sessionId, options, errors, pending: false, loadedStarted: started };
         });
       } catch (cause) {
         if (!controller.signal.aborted) setState((current) => ({ ...current, errors: new Map(current.errors).set("", messageOf(cause)), pending: false }));
@@ -150,8 +189,9 @@ export function StartOptionsProvider({
     })();
   }, [allowed, sessionId, set, state]);
 
+  // Bis der Server nach der ersten Nachricht geantwortet hat, ist alles gesperrt; danach gilt sein locked.
   const control = useMemo<StartOptionsControl>(() => ({
-    options: state.sessionId === sessionId ? state.options.map((option) => ({ ...option, locked: option.locked || started })) : [],
+    options: state.sessionId === sessionId ? state.options.map((option) => ({ ...option, locked: option.locked || (started && !state.loadedStarted) })) : [],
     errors: state.sessionId === sessionId ? state.errors : new Map(),
     pending: state.sessionId !== sessionId || state.pending || applying,
     set,
@@ -189,37 +229,52 @@ const ChoiceControl = ({ disabled, error, option, setValue }: StartOptionControl
   );
 };
 
-export function StartOptionControls({ disabled, registry, placement = "surface" }: { disabled: boolean; registry: PluginRegistry; placement?: "surface" | "composer" }) {
+const unchangeable = async () => undefined;
+
+function FixedStartOption({ conflict, machines, option, registry }: { conflict: boolean; machines: OfferedMachines; option: StartOptionState; registry: PluginRegistry }) {
+  const Control = registry.startOptions.get(option.id)?.Control ?? ChoiceControl;
+  return <span className="contents" data-start-option-fixed={option.id} title="Von der Vorlage festgelegt">
+    <Control disabled error={conflict ? "Gewählt ist ein anderer Wert; die Vorlage legt diesen fest." : undefined} machines={machines} option={option} setValue={unchangeable} />
+  </span>;
+}
+
+/** Die Startoptionen einer Stelle; was die gewählte Vorlage festlegt, steht fest mit ihrem Wert statt zur Wahl. */
+export function StartOptionControls({ disabled, registry, placement = "page", fixed = noneFixed }: {
+  disabled: boolean;
+  registry: PluginRegistry;
+  placement?: "page" | "composer";
+  fixed?: Readonly<Record<string, unknown>>;
+}) {
   const access = useAccess();
   const control = useStartOptions();
+  const machines = useOfferedMachines();
   const loadError = control.errors.get("");
-  if (!access.can("runs.create") || !access.can("runs.inspect")) return null;
+  if (!access.can("runs.create")) return null;
+  const here = control.options.filter((option) => (registry.startOptions.get(option.id)?.placement ?? "page") === placement);
+  const conflicts = new Set(conflictingStartOptions(here, fixed).map((option) => option.id));
   return (
     <>
-      {placement === "surface" && loadError && <p className="text-[0.75rem] text-destructive" role="alert">{loadError}</p>}
-      {control.options
-        .filter((option) => option.selectable && !option.locked
-          && (registry.startOptions.get(option.id)?.placement ?? "surface") === placement)
-        .map((option) => {
-          const Control = registry.startOptions.get(option.id)?.Control ?? ChoiceControl;
-          return (
-            <Control
-              disabled={disabled || control.pending || !access.can("runs.write")}
-              error={control.errors.get(option.id)}
-              key={option.id}
-              option={option}
-              setValue={(value) => control.set(option.id, value)}
-            />
-          );
-        })}
+      {placement === "page" && loadError && <p className="text-[0.75rem] text-destructive" role="alert">{loadError}</p>}
+      {shownStartOptions(here, fixed).map(({ option, fixed: isFixed }) => {
+        if (isFixed) return <FixedStartOption conflict={conflicts.has(option.id)} key={option.id} machines={machines} option={option} registry={registry} />;
+        const Control = registry.startOptions.get(option.id)?.Control ?? ChoiceControl;
+        return (
+          <Control
+            disabled={disabled || control.pending || !access.can("runs.write")}
+            error={control.errors.get(option.id)}
+            key={option.id}
+            machines={machines}
+            option={option}
+            setValue={(value) => control.set(option.id, value)}
+          />
+        );
+      })}
     </>
   );
 }
 
 export function StartOptionBadges({ registry, session }: { registry: PluginRegistry; session: SessionContext }) {
-  const access = useAccess();
   const control = useStartOptions();
-  if (!access.can("runs.inspect")) return null;
   return (
     <>
       {control.options.map((option) => {

package/apps/web/src/StartSelection.tsx

@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
+import { useModalController, type ModalController } from "./ui/modal-controller";
+import { useStartOptions } from "./StartOptions";
+import { useAccess } from "./AccessContext";
+import { canStartEntry } from "../../../packages/ragents/src/access";
+import { startEntryDirectly } from "./chat/requests";
+import { RunPreparationChat } from "./RunPreparationChat";
+import { StartSection, StartTiles, startTileCount } from "./StartTiles";
+import type { ConnectionEntry } from "./panel/contract";
+import type { JsonValue, PluginRegistry, SessionContext, StartEntry } from "./PluginRegistry";
+
+const tileOf = (entry: StartEntry, guided: boolean, technical: boolean): ConnectionEntry => ({
+  id: entry.id,
+  title: entry.title,
+  description: entry.description,
+  kind: entry.action,
+  category: entry.category ?? (technical ? "Run-Scripts" : "Abläufe"),
+  ...(guided ? { guided: true } : {}),
+});
+
+/** Die Startauswahl eines Entwurfs: dieselben Kacheln wie Start in VS Code; Neuer Chat öffnet den leeren Run, eine Vorlage startet sofort oder nach ihrem Leitfaden. */
+export function StartSelection({ registry, session, initialEntryId, onOpen }: {
+  registry: PluginRegistry;
+  session: SessionContext;
+  initialEntryId?: string;
+  /** Der Entwurf wird zum offenen Run, als leerer Chat oder nach dem Start einer Vorlage. */
+  onOpen: () => void;
+}) {
+  const access = useAccess();
+  const modal = useModalController();
+  const [error, setError] = useState<string>();
+  const [pending, setPending] = useState(false);
+  const launching = useRef(false);
+  const openedInitialEntry = useRef(false);
+  const sessionRef = useRef(session);
+  sessionRef.current = session;
+  const startOptions = useStartOptions();
+  const disabled = pending || startOptions.pending;
+  const technical = access.can("runs.inspect");
+  const free = access.can("runs.create");
+  const entries = registry.startEntries.filter((entry) => canStartEntry(access, entry.id) && (entry.action === "script" || free));
+  const tiles = entries.map((entry) => tileOf(entry, registry.guideFor(entry) !== undefined, technical));
+  const defaultEntry = entries.some((entry) => entry.id === registry.defaultStartEntry) ? registry.defaultStartEntry : undefined;
+
+  const launch = useCallback(async (entry: StartEntry, value: JsonValue | null) => {
+    if (launching.current || !canStartEntry(access, entry.id)) return;
+    launching.current = true;
+    setPending(true);
+    setError(undefined);
+    try {
+      await startEntryDirectly(sessionRef.current.session.id, entry, value);
+      onOpen();
+    } catch (cause) {
+      setError(`${entry.title}: ${cause instanceof Error ? cause.message : String(cause)}`);
+    } finally {
+      launching.current = false;
+      setPending(false);
+    }
+  }, [access, onOpen]);
+
+  const open = useCallback((entryId: string) => {
+    const entry = registry.startEntries.find((candidate) => candidate.id === entryId);
+    if (!entry || !canStartEntry(access, entry.id)) {
+      setError("Diese Vorlage ist im aktuellen Profil nicht verfügbar.");
+      return;
+    }
+    openStartEntry(entry, registry, modal, sessionRef, launch);
+  }, [access, launch, modal, registry]);
+
+  useEffect(() => {
+    if (!initialEntryId || disabled || openedInitialEntry.current) return;
+    openedInitialEntry.current = true;
+    open(initialEntryId);
+  }, [disabled, initialEntryId, open]);
+
+  return <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-auto px-10 pt-6 pb-5 max-md:px-3 max-md:pt-11 max-md:pb-4">
+    <section aria-label="Startauswahl" className="mx-auto grid w-full max-w-composer grid-cols-1 gap-1.5">
+      <StartSection count={startTileCount(tiles, defaultEntry, free)} title="Neu" />
+      {error && <p className="text-[0.8rem] text-destructive" role="alert">{error}</p>}
+      {tiles.length === 0 && !free
+        ? <p className="text-[0.75rem] text-muted-foreground" role="status">Für dieses Benutzerkonto ist keine Vorlage freigegeben.</p>
+        : <StartTiles defaultEntry={defaultEntry} disabled={disabled} entries={tiles} label="Vorlagen" onNewChat={free ? onOpen : undefined} onStart={open} />}
+    </section>
+  </div>;
+}
+
+/** Eine Vorlage öffnen: ihr Leitfaden fragt zuerst, ein Skill mit Leitfaden geht danach in den Vorbereitungschat, alles andere startet sofort. */
+export function openStartEntry(entry: StartEntry, registry: PluginRegistry, modal: ModalController,
+  sessionRef: RefObject<SessionContext>, launch: (entry: StartEntry, value: JsonValue | null) => Promise<void>) {
+  const guide = registry.guideFor(entry);
+  if (!guide) { void launch(entry, null); return; }
+  let completed = false;
+  modal.open({ title: entry.title, subtitle: entry.description,
+    render: (controller) => <guide.Guide entry={entry} session={sessionRef.current}
+      onCancel={controller.back} onComplete={(value) => {
+        if (completed) return;
+        if (entry.action === "script") {
+          completed = true;
+          controller.back();
+          void launch(entry, value);
+          return;
+        }
+        if (typeof value !== "string" || !value.trim()) throw new Error(`Der Leitfaden für ${entry.title} muss einen nicht leeren Auftrag liefern.`);
+        const prompt = value;
+        completed = true;
+        controller.back();
+        modal.open({ title: "Auftrag vorbereiten", subtitle: entry.title,
+          render: () => <RunPreparationChat entry={entry} initialPrompt={prompt} registry={registry} sessionRef={sessionRef} /> });
+      }} />,
+  });
+}

package/apps/web/src/StartTiles.tsx

@@ -0,0 +1,73 @@
+import { BookIcon, ChevronRightIcon, CodeIcon, PlusIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import type { ConnectionEntry } from "./panel/contract";
+
+const NEW_CHAT = { category: "Ohne Vorlage", title: "Neuer Chat", description: "Leerer Run, der Auftrag entsteht im Chat." };
+
+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 tileClass = "group/tile flex h-full min-w-0 flex-col gap-1.5 rounded-[12px] border border-border-soft bg-card p-2.5 text-left [--tone:var(--primary)]"
+  + " enabled:hover:border-border enabled:hover:bg-accent/40 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60 disabled:opacity-60";
+const entryIcon = (entry: ConnectionEntry): ReactNode => entry.kind === "skill"
+  ? <BookIcon aria-hidden className="size-3.5" />
+  : <CodeIcon aria-hidden className="size-3.5" />;
+
+/** Die Überschrift eines Abschnitts der Startseite, mit Zahl und rechts einer Aktion. */
+export function StartSection({ title, count, children }: { title: string; count?: number; children?: ReactNode }) {
+  return <div className="flex items-baseline justify-between gap-2">
+    <h2 className={sectionClass}>{title}{count !== undefined && <span className={countClass}>{count}</span>}</h2>
+    {children}
+  </div>;
+}
+
+function Tile({ category, title, description, icon, standard, guided, disabled, onClick }: {
+  category: string;
+  title: string;
+  description: string;
+  icon: ReactNode;
+  /** Die Vorlage ist der Default ihres Servers. */
+  standard?: boolean;
+  guided?: boolean;
+  disabled: boolean;
+  onClick: () => void;
+}) {
+  return <li className="min-w-0">
+    <button className={tileClass} disabled={disabled} onClick={onClick} title={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>
+        {standard && <span className="ml-auto flex-none rounded-sm border border-current px-1 text-[0.52rem] font-semibold uppercase tracking-[0.06em] leading-[1.5] opacity-70">Standard</span>}
+      </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-enabled/tile:group-hover/tile:opacity-100">
+        {guided ? "Einrichten" : "Starten"}<ChevronRightIcon aria-hidden className="size-3" />
+      </span>
+    </button>
+  </li>;
+}
+
+/** Wie viele Kacheln StartTiles zeigt: die Vorlagen, ohne Standard-Vorlage dazu Neuer Chat. */
+export const startTileCount = (entries: readonly ConnectionEntry[], defaultEntry: string | undefined, newChat: boolean): number =>
+  entries.length + (defaultEntry === undefined && newChat ? 1 : 0);
+
+/** Die Vorlagen eines Servers als Kacheln, die Standard-Vorlage oder Neuer Chat zuerst: Start in VS Code und die Startauswahl im Browser. */
+export function StartTiles({ entries, defaultEntry, label, disabled = false, onNewChat, onStart }: {
+  entries: readonly ConnectionEntry[];
+  defaultEntry?: string;
+  label: string;
+  disabled?: boolean;
+  /** Ohne sie fehlt die Kachel Neuer Chat. */
+  onNewChat?: () => void;
+  onStart: (entryId: string) => void;
+}) {
+  const standard = entries.find((entry) => entry.id === defaultEntry);
+  const others = entries.filter((entry) => entry.id !== defaultEntry);
+  return <ul aria-label={label} className="grid grid-cols-[repeat(auto-fill,minmax(182px,1fr))] gap-2">
+    {standard
+      ? <Tile category={standard.category} description={standard.description} disabled={disabled} guided={standard.guided} icon={entryIcon(standard)} onClick={() => onStart(standard.id)} standard title={standard.title} />
+      : onNewChat && <Tile {...NEW_CHAT} disabled={disabled} icon={<PlusIcon aria-hidden className="size-3.5" />} onClick={onNewChat} />}
+    {others.map((entry) => <Tile category={entry.category} description={entry.description} disabled={disabled} guided={entry.guided} icon={entryIcon(entry)} key={entry.id}
+      onClick={() => onStart(entry.id)} title={entry.title} />)}
+  </ul>;
+}

package/apps/web/src/{CanvasShortcuts.tsx → SurfaceShortcuts.tsx}

@@ -2,7 +2,7 @@ import { useEffect, useId, useRef, useState, type ReactNode } from "react";
 import { ChevronLeftIcon } from "lucide-react";
 import { ToolbarItem } from "./Toolbar";
 
-export function CanvasShortcuts({ children }: { children: ReactNode }) {
+export function SurfaceShortcuts({ children }: { children: ReactNode }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const viewportRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -23,7 +23,7 @@ export function CanvasShortcuts({ children }: { children: ReactNode }) {
     };
     const wheel = (event: WheelEvent) => {
       if (event.defaultPrevented || event.ctrlKey || viewport.scrollWidth <= viewport.clientWidth + 1) return;
-      if (event.target instanceof Element && event.target.closest("[data-canvas-scroll]")) return;
+      if (event.target instanceof Element && event.target.closest("[data-surface-scroll]")) return;
       event.preventDefault();
       const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
       const unit = event.deltaMode === WheelEvent.DOM_DELTA_LINE ? 16 : event.deltaMode === WheelEvent.DOM_DELTA_PAGE ? viewport.clientWidth : 1;

package/apps/web/src/ThemeSettings.tsx

@@ -14,7 +14,7 @@ export function ThemeSettings() {
   return <div className="mx-auto flex max-w-[1020px] flex-col gap-6 px-[clamp(20px,4vw,46px)] pt-7 pb-12 max-sm:px-3.5 max-sm:pt-5 max-sm:pb-9">
     <header>
       <h2 className="text-[1.08rem] text-foreground">Darstellung</h2>
-      <p className="mt-2 max-w-[780px] text-xs leading-[1.55] text-muted-foreground">Farben für die gesamte Oberfläche, den Canvas und das Seitenpanel.</p>
+      <p className="mt-2 max-w-[780px] text-xs leading-[1.55] text-muted-foreground">Farben für die gesamte Oberfläche, die Fläche und die Leiste.</p>
     </header>
     <section aria-labelledby="theme-settings-title">
       <Card className="flex-row flex-wrap items-center gap-5 p-6 max-sm:p-4">

package/apps/web/src/WorkspacePanel.tsx

@@ -48,7 +48,7 @@ export function WorkspacePanel(props: WorkspacePanelProps) {
   const tabs = props.tabs;
   const activeTab = tabs.find((tab) => tab.id === props.navigation.activeTabId) ?? tabs[0];
   const activeTabId = activeTab?.id;
-  const stateAction = collapsed ? "Arbeitsbereich aufklappen" : "Arbeitsbereich einklappen";
+  const stateAction = collapsed ? "Leiste aufklappen" : "Leiste einklappen";
 
   useLayoutEffect(() => {
     const panel = panelRef.current;
@@ -196,7 +196,7 @@ export function WorkspacePanel(props: WorkspacePanelProps) {
 
   return (
     <aside
-      aria-label="Arbeitsbereich"
+      aria-label="Leiste"
       className={cn(
         "relative z-20 flex min-h-0 min-w-0 flex-col @max-[960px]/chat-content:absolute @max-[960px]/chat-content:inset-y-0 @max-[960px]/chat-content:right-0 @max-[960px]/chat-content:left-auto",
         collapsed
@@ -211,7 +211,7 @@ export function WorkspacePanel(props: WorkspacePanelProps) {
         <div
           aria-controls="workspace-panel"
           aria-disabled={!resizable}
-          aria-label="Breite des Arbeitsbereichs"
+          aria-label="Breite der Leiste"
           aria-orientation="vertical"
           aria-valuemax={Math.round(layoutBounds.max)}
           aria-valuemin={Math.round(layoutBounds.min)}
@@ -231,7 +231,7 @@ export function WorkspacePanel(props: WorkspacePanelProps) {
         />
       )}
       {props.headerContainer && createPortal(<TooltipProvider><div className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden pr-[7px] pl-[9px]" data-workspace-state={props.state}>
-        <nav aria-label="Arbeitsbereich" className="flex min-w-0 flex-1 flex-nowrap gap-[3px] overflow-x-auto no-scrollbar" hidden={collapsed} role="tablist">
+        <nav aria-label="Leiste" className="flex min-w-0 flex-1 flex-nowrap gap-[3px] overflow-x-auto no-scrollbar" hidden={collapsed} role="tablist">
           {tabs.map((tab) => (
             <Tooltip key={tab.id}>
               <TooltipTrigger