@schlenkr/ragents 0.1.0

package/apps/web/src/chat/ChatPanel.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useRef, type ReactNode, type Ref } from "react";
+import { cn } from "cn";
+
+/**
+ * Verlauf mit ueberlagerter Eingabe. Der Rahmen misst die Eingabe selbst und
+ * gibt dem Verlauf den noetigen Fussraum, damit kein Host Innenmasse setzen muss.
+ */
+export function ChatPanel({
+  children,
+  composer,
+  className,
+  nodeRef,
+}: {
+  children: ReactNode;
+  /** Die Eingabe; sie liegt ueber dem Verlauf, nicht darunter. */
+  composer?: ReactNode;
+  className?: string;
+  nodeRef?: Ref<HTMLDivElement>;
+}) {
+  const wurzel = useRef<HTMLDivElement>(null);
+  const eingabe = useRef<HTMLDivElement>(null);
+  const hasComposer = composer !== undefined;
+
+  useEffect(() => {
+    const element = eingabe.current;
+    const rahmen = wurzel.current;
+    if (!element || !rahmen) {
+      return;
+    }
+    const messen = () => rahmen.style.setProperty("--composer-height", `${element.offsetHeight}px`);
+    const beobachter = new ResizeObserver(messen);
+    beobachter.observe(element);
+    messen();
+    return () => {
+      beobachter.disconnect();
+      rahmen.style.removeProperty("--composer-height");
+    };
+  }, [hasComposer]);
+
+  return (
+    <div
+      className={cn("relative flex min-h-0 min-w-0 flex-col overflow-hidden", className)}
+      data-chat="panel"
+      ref={(element) => {
+        wurzel.current = element;
+        if (typeof nodeRef === "function") {
+          nodeRef(element);
+        } else if (nodeRef) {
+          nodeRef.current = element;
+        }
+      }}
+    >
+      {children}
+      {hasComposer && (
+        <div className="absolute inset-x-0 bottom-0 z-[5] px-6 pb-3.5 *:mx-auto *:max-w-composer" data-chat="composer" ref={eingabe}>
+          {composer}
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/web/src/chat/DetailModeSwitch.tsx

@@ -0,0 +1,58 @@
+import { SparklesIcon } from "lucide-react";
+import { Button } from "../ui";
+import { DetailMode } from "./types";
+import { ChatTexts, defaultTexts } from "./texts";
+
+export const DETAIL_MODES: readonly DetailMode[] = ["off", "current", "icons", "chips", "grouped", "compact", "full"];
+
+const TEXT_KEYS: Record<DetailMode, keyof ChatTexts> = {
+  off: "detailModeOff",
+  current: "detailModeCurrent",
+  icons: "detailModeIcons",
+  chips: "detailModeChips",
+  grouped: "detailModeGrouped",
+  compact: "detailModeCompact",
+  full: "detailModeFull",
+};
+
+export const detailModeLabel = (mode: DetailMode, texts?: Partial<ChatTexts>): string =>
+  ({ ...defaultTexts, ...texts })[TEXT_KEYS[mode]];
+
+/**
+ * Ein Knopf, der den Detailgrad der Denk- und Werkzeug-Schritte weiterschaltet. Die
+ * Reihenfolge kommt aus `modes`, der aktuelle Wert steht als Beschriftung daneben.
+ */
+export function DetailModeSwitch({
+  mode,
+  onChange,
+  modes = DETAIL_MODES,
+  collapsible = true,
+  texts,
+  className,
+}: {
+  mode: DetailMode;
+  onChange: (mode: DetailMode) => void;
+  /** Auswahl und Reihenfolge des Weiterschaltens; Default sind alle Modi. */
+  modes?: readonly DetailMode[];
+  /** false = die Beschriftung bleibt auch in einer schmalen Eingabe-Karte stehen. */
+  collapsible?: boolean;
+  texts?: Partial<ChatTexts>;
+  className?: string;
+}) {
+  const alleTexte = { ...defaultTexts, ...texts };
+  const aktuell = modes.indexOf(mode);
+  const naechster = modes[(aktuell < 0 ? 0 : aktuell + 1) % modes.length];
+  return (
+    <Button
+      aria-label={`${alleTexte.detailModeTitle}: ${detailModeLabel(mode, texts)}`}
+      className={className}
+      onClick={() => onChange(naechster)}
+      size="sm"
+      title={`${alleTexte.detailModeTitle}: ${detailModeLabel(mode, texts)}`}
+      variant="ghost"
+    >
+      <SparklesIcon />
+      <span className={collapsible ? "in-data-[compact=true]:hidden" : undefined}>{detailModeLabel(mode, texts)}</span>
+    </Button>
+  );
+}

package/apps/web/src/chat/Markdown.tsx

@@ -0,0 +1,104 @@
+import { createContext, ReactNode, useContext } from "react";
+import { cn } from "cn";
+import { Streamdown, type Components } from "streamdown";
+
+export type LinkClickHandler = (href: string, label: string) => boolean;
+
+const LinkClickContext = createContext<LinkClickHandler | undefined>(undefined);
+
+export function MarkdownLinks({ children, onLinkClick }: { children: ReactNode; onLinkClick?: LinkClickHandler }) {
+  return <LinkClickContext.Provider value={onLinkClick}>{children}</LinkClickContext.Provider>;
+}
+
+function MarkdownLink({ href, children }: { href?: string; children?: ReactNode }) {
+  const onLinkClick = useContext(LinkClickContext);
+  if (!href || href === "streamdown:incomplete-link") {
+    return <span>{children}</span>;
+  }
+  return (
+    <a
+      className="text-primary [text-underline-offset:2px] in-data-[tone=on-color]:text-inherit in-data-[tone=on-color]:underline"
+      href={href}
+      onClick={(event) => {
+        if (href && onLinkClick?.(href, event.currentTarget.textContent ?? "")) {
+          event.preventDefault();
+        }
+      }}
+      rel="noreferrer"
+      target="_blank"
+    >
+      {children}
+    </a>
+  );
+}
+
+// Waagerechte Rollbalken bleiben sichtbar - sonst ist der Ueberlauf nicht auffindbar.
+const scrollbar = "[scrollbar-width:thin] [&::-webkit-scrollbar]:block [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border";
+
+// Die Deckstreifen verbergen den Umbruch am Rand; --scroll-cover kommt aus der umgebenden Blase.
+const scrollCover = "bg-[linear-gradient(to_right,var(--scroll-cover,var(--background))_50%,transparent)_left/20px_100%_no-repeat_local,linear-gradient(to_left,var(--scroll-cover,var(--background))_50%,transparent)_right/20px_100%_no-repeat_local,linear-gradient(to_right,#00000047,transparent)_left/14px_100%_no-repeat_scroll,linear-gradient(to_left,#00000047,transparent)_right/14px_100%_no-repeat_scroll]";
+
+const headingClasses = "mt-3 mb-1 text-[15px] font-medium";
+const cellClasses = "max-w-[44ch] border border-border px-2 py-1 text-left align-top in-data-[tone=on-color]:border-white/35";
+
+const components: Components = {
+  h1: ({ children }) => <h1 className="mt-3 mb-1 text-lg font-semibold">{children}</h1>,
+  h2: ({ children }) => <h2 className={headingClasses}>{children}</h2>,
+  h3: ({ children }) => <h3 className={headingClasses}>{children}</h3>,
+  h4: ({ children }) => <h4 className="mt-2 mb-1 text-base font-medium">{children}</h4>,
+  h5: ({ children }) => <h5 className="mt-2 mb-1 text-base font-medium">{children}</h5>,
+  h6: ({ children }) => <h6 className="mt-2 mb-1 text-base font-medium">{children}</h6>,
+  p: ({ children }) => <p className="[p+&]:mt-2">{children}</p>,
+  ul: ({ children }) => <ul className="my-2 list-disc pl-6 [li>&]:my-0">{children}</ul>,
+  ol: ({ children }) => <ol className="my-2 list-decimal pl-6 [li>&]:my-0">{children}</ol>,
+  li: ({ children }) => <li className="marker:text-muted-foreground in-data-[tone=on-color]:marker:text-inherit">{children}</li>,
+  hr: () => <hr className="my-3 border-t border-border" />,
+  img: ({ src, alt }) => <img alt={alt} className="h-auto max-w-full" src={typeof src === "string" ? src : undefined} />,
+  blockquote: ({ children }) => (
+    <blockquote className="my-1 border-l-2 border-border pl-3 text-muted-foreground in-data-[tone=on-color]:border-white/50 in-data-[tone=on-color]:text-inherit">{children}</blockquote>
+  ),
+  strong: ({ children }) => <strong className="font-medium">{children}</strong>,
+  em: ({ children }) => <em>{children}</em>,
+  a: ({ href, children }) => <MarkdownLink href={href}>{children}</MarkdownLink>,
+  pre: ({ children }) => (
+    <pre className={cn(scrollbar, "my-2 overflow-x-auto rounded-lg bg-secondary px-3 py-2 font-mono text-sm leading-relaxed in-data-[tone=on-color]:bg-black/30 in-data-[tone=on-color]:text-inherit")}>{children}</pre>
+  ),
+  code: ({ children, className }) => (
+    <code className={cn(className, "rounded-sm bg-secondary px-1 py-0.5 font-mono text-sm [overflow-wrap:anywhere] in-data-[tone=on-color]:bg-white/20 in-data-[tone=on-color]:text-inherit", "[pre>&]:bg-transparent [pre>&]:p-0")}>{children}</code>
+  ),
+  // Ohne max-content schrumpft die Tabelle auf den Container und stapelt Buchstaben.
+  table: ({ children }) => (
+    <div className={cn(scrollbar, scrollCover, "my-2 overflow-x-auto")}>
+      <table className="w-max min-w-full border-collapse text-sm">{children}</table>
+    </div>
+  ),
+  thead: ({ children }) => <thead>{children}</thead>,
+  tbody: ({ children }) => <tbody>{children}</tbody>,
+  tr: ({ children }) => <tr>{children}</tr>,
+  th: ({ children }) => <th className={cn(cellClasses, "bg-secondary font-medium in-data-[tone=on-color]:bg-white/15 in-data-[tone=on-color]:text-inherit")}>{children}</th>,
+  td: ({ children }) => <td className={cellClasses}>{children}</td>,
+};
+
+function transformUrl(url: string) {
+  if (/^ablauf:(actor|input|turn|subscription|action|artifact)\/.+/.test(url)) return url;
+  const scheme = /^[^/?#]*:/.exec(url);
+  return !scheme || /^(https?|mailto|tel|ftp|irc|ircs|xmpp):$/i.test(scheme[0]) ? url : "";
+}
+
+export function Markdown({ text, streaming = false }: { text: string; streaming?: boolean }) {
+  return (
+    <Streamdown
+      className="space-y-0 text-inherit"
+      mode={streaming ? "streaming" : "static"}
+      isAnimating={streaming}
+      parseIncompleteMarkdown={streaming}
+      components={components}
+      controls={false}
+      rehypePlugins={[]}
+      urlTransform={transformUrl}
+      skipHtml
+    >
+      {text}
+    </Streamdown>
+  );
+}

package/apps/web/src/chat/QuestionCard.tsx

@@ -0,0 +1,107 @@
+import { CheckIcon } from "lucide-react";
+import { Button, Card, cn, Input } from "../ui";
+import { useState } from "react";
+import { Question } from "./types";
+
+const cardClasses = "gap-2.5 bg-background px-3.5 text-sm";
+const optionClasses = "h-auto w-full justify-start gap-2 px-3 py-1.5 text-left text-sm font-normal whitespace-normal";
+
+/**
+ * Rückfrage-Karte: Optionen untereinander, wahlweise Einzel- oder Mehrfachauswahl
+ * (question.multi), dazu immer eine freie Antwortzeile. Nach der Antwort nur noch Beleg.
+ */
+export function QuestionCard({
+  text,
+  question,
+  onAnswer,
+}: {
+  text: string;
+  question: Question;
+  onAnswer?: (text: string) => void;
+}) {
+  const [gewaehlt, setGewaehlt] = useState<string[]>([]);
+  const [frei, setFrei] = useState("");
+
+  if (question.answer !== undefined) {
+    return (
+      <Card className={cardClasses} size="sm">
+        <div className="leading-normal">{text}</div>
+        <div className="flex items-center gap-1.5 text-sm text-muted-foreground" data-question="answered">
+          <CheckIcon className="text-success" size={12} />
+          {question.answer}
+        </div>
+      </Card>
+    );
+  }
+
+  if (!onAnswer) {
+    return (
+      <Card className={cardClasses} size="sm">
+        <div className="leading-normal">{text}</div>
+        <ul className="list-disc pl-6">{question.options.map((option) => <li key={option}>{option}</li>)}</ul>
+      </Card>
+    );
+  }
+
+  const umschalten = (option: string) =>
+    setGewaehlt((bisher) =>
+      bisher.includes(option) ? bisher.filter((o) => o !== option) : [...bisher, option]);
+
+  const freiSenden = () => {
+    const wert = frei.trim();
+    if (wert) onAnswer(wert);
+  };
+
+  return (
+    <Card className={cardClasses} size="sm">
+      <div className="leading-normal">{text}</div>
+      <div className="flex flex-col items-stretch gap-1.5">
+        {question.options.map((option) =>
+          question.multi ? (
+            <Button
+              aria-pressed={gewaehlt.includes(option)}
+              className={cn(optionClasses, "aria-pressed:border-primary aria-pressed:bg-accent")}
+              data-question="option"
+              key={option}
+              onClick={() => umschalten(option)}
+              variant="outline"
+            >
+              <span className="inline-flex size-3.5 flex-none items-center justify-center rounded-sm border border-border text-primary group-aria-pressed/button:border-primary">
+                {gewaehlt.includes(option) && <CheckIcon size={10} />}
+              </span>
+              {option}
+            </Button>
+          ) : (
+            <Button className={optionClasses} data-question="option" key={option} onClick={() => onAnswer(option)} variant="outline">
+              {option}
+            </Button>
+          ),
+        )}
+      </div>
+      {question.multi && (
+        <Button
+          className="self-start"
+          disabled={gewaehlt.length === 0}
+          onClick={() => onAnswer(gewaehlt.join("; "))}
+          size="sm"
+        >
+          Auswahl übernehmen
+        </Button>
+      )}
+      <div className="flex gap-1.5">
+        <Input
+          className="flex-1"
+          onChange={(event) => setFrei(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") freiSenden();
+          }}
+          placeholder="... oder frei antworten"
+          value={frei}
+        />
+        <Button disabled={frei.trim() === ""} onClick={freiSenden} size="sm" variant="outline">
+          Antworten
+        </Button>
+      </div>
+    </Card>
+  );
+}

package/apps/web/src/chat/StepPopover.tsx

@@ -0,0 +1,82 @@
+import { useMemo } from "react";
+import { SparklesIcon, WrenchIcon, XIcon } from "lucide-react";
+import { Button, cn, Popover, PopoverContent } from "../ui";
+import { Message, prettyJson } from "./types";
+import { ChatTexts } from "./texts";
+
+const preClasses = "rounded-lg bg-secondary p-3 font-mono text-[11px] leading-[1.625] break-all whitespace-pre-wrap";
+
+export function StepPopover({
+  message,
+  position,
+  texts,
+  toolArgumentsText,
+  onClose,
+}: {
+  message: Message;
+  position: { x: number; y: number };
+  texts: ChatTexts;
+  toolArgumentsText: (tool: NonNullable<Message["tool"]>) => string;
+  onClose: () => void;
+}) {
+  const anchor = useMemo(() => ({
+    getBoundingClientRect: () => new DOMRect(position.x, position.y, 0, 0),
+    contextElement: document.documentElement,
+  }), [position]);
+  const tool = message.tool;
+  const thinking = message.role === "thinking";
+  const title = thinking ? texts.thinkingTitle : texts.toolTitle;
+
+  return (
+    <Popover open onOpenChange={(open) => { if (!open) onClose(); }}>
+      <PopoverContent
+        align="start"
+        anchor={anchor}
+        aria-label={title}
+        className={cn(
+          "w-[min(680px,calc(100vw-32px))] gap-0 overflow-hidden p-0 text-[13px] shadow-pop",
+          thinking ? "max-h-none" : "max-h-[min(70vh,620px)]",
+        )}
+        collisionPadding={16}
+        side="bottom"
+        sideOffset={10}
+      >
+        <div className="flex flex-none items-center gap-2 border-b border-border-soft px-4 py-2.5">
+          {thinking ? (
+            <SparklesIcon className="text-muted-foreground" size={14} />
+          ) : (
+            <WrenchIcon className={tool?.isError ? "text-destructive" : "text-muted-foreground"} size={14} />
+          )}
+          <span className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-medium">{title}</span>
+          <Button aria-label={texts.close} className="flex-none" onClick={onClose} size="icon-sm" title={texts.close} variant="ghost">
+            <XIcon />
+          </Button>
+        </div>
+        <div className={cn("min-h-0 p-4", thinking ? "overflow-visible" : "overflow-auto")}>
+          {thinking ? (
+            <div className="text-sm leading-[1.625] whitespace-pre-wrap">{message.text}</div>
+          ) : tool ? (
+            <div className="flex flex-col gap-4">
+              <div className="font-mono text-sm">{message.text}</div>
+              <PopoverSection label={texts.argumentsLabel} value={toolArgumentsText(tool)} />
+              {tool.result === undefined ? (
+                <div className="text-sm text-muted-foreground">{texts.toolStillRunning}</div>
+              ) : (
+                <PopoverSection error={tool.isError} label={texts.resultLabel} value={prettyJson(tool.result)} />
+              )}
+            </div>
+          ) : null}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function PopoverSection({ label, value, error = false }: { label: string; value: string; error?: boolean }) {
+  return (
+    <section>
+      <h3 className="mb-1.5 text-[11px] font-semibold tracking-[0.04em] text-muted-foreground uppercase">{label}</h3>
+      <pre className={cn(preClasses, error && "text-destructive")}>{value}</pre>
+    </section>
+  );
+}

package/apps/web/src/chat/WorkingScenes.tsx

@@ -0,0 +1,235 @@
+import { useEffect, useState } from "react";
+import { cn } from "cn";
+
+const SPUR = 13;
+const GRUNDTAKT_MS = 90;
+const SZENENWECHSEL_MS = 2600;
+
+/** Eine Zelle je Figur: Emoji und Satzzeichen teilen sich kein Raster, geschobener Text ruckelt. */
+function bahn(figuren: Record<number, string>, breite = SPUR): string[] {
+  return Array.from({ length: breite }, (_, x) => figuren[x] ?? " ");
+}
+
+interface Szene {
+  id: string;
+  takt: number;
+  laufend?: true;
+  compact?: true;
+  zeichne: (schritt: number) => string | string[];
+}
+
+/**
+ * Kleine Szenen, in denen etwas Erkennbares passiert - der Zustand aendert sich sichtbar,
+ * statt dass nur eine Figur vorbeilaeuft. Szenen mit Bewegung geben ihre Bahn als Zellen
+ * zurueck, alle anderen als schlichten Text.
+ */
+const SZENEN: Szene[] = [
+  {
+    id: "denken",
+    takt: 2,
+    zeichne: (schritt) => {
+      const takt = schritt % 10;
+      if (takt >= 8) return "\u{1F929}\u{1F4A1}";
+      return "\u{1F914}" + "\u{1F4AD}".repeat(Math.min(takt, 3));
+    },
+  },
+  {
+    // Fliegt nach rechts und zieht ihren Schweif hinterher.
+    id: "rakete",
+    takt: 2,
+    laufend: true,
+    zeichne: (schritt) => {
+      const x = schritt % SPUR;
+      return bahn({ [x - 2]: "·", [x - 1]: "\u{1F4A8}", [x]: "\u{1F680}" });
+    },
+  },
+  {
+    // Die Punkte bleiben stehen und werden einzeln gefressen.
+    id: "pacman",
+    takt: 2,
+    laufend: true,
+    zeichne: (schritt) => {
+      const x = schritt % SPUR;
+      const figuren: Record<number, string> = {};
+      for (let i = x + 1; i < SPUR; i++) {
+        figuren[i] = "·";
+      }
+      figuren[x] = schritt % 2 === 0 ? "\u{1F7E1}" : "\u{1F315}";
+      return bahn(figuren);
+    },
+  },
+  {
+    // Aus einem Samen wird ein Baum, dann von vorn.
+    id: "wachsen",
+    compact: true,
+    takt: 2,
+    zeichne: (schritt) => {
+      const stufen = ["\u{1F331}", "\u{1F331}", "\u{1F33F}", "\u{1F33F}", "\u{1F343}", "\u{1F333}", "\u{1F333}", "\u{1F333}"];
+      return stufen[schritt % stufen.length];
+    },
+  },
+  {
+    // Das Ei bekommt Risse, das Kueken schluepft.
+    id: "schluepfen",
+    compact: true,
+    takt: 2,
+    zeichne: (schritt) => {
+      const takt = schritt % 12;
+      if (takt < 4) return "\u{1F95A}";
+      if (takt < 6) return "\u{1F95A}*";
+      if (takt < 9) return "\u{1F423}";
+      return "\u{1F425}";
+    },
+  },
+  {
+    // Morse-artiges Signal, das sich zu einem OK aufloest.
+    id: "signal",
+    takt: 2,
+    zeichne: (schritt) => {
+      const takt = schritt % 14;
+      if (takt >= 11) return "\u{1F4E1} OK";
+      const muster = ["·", "··", "·-", "-·", "··-", "-··"];
+      return "\u{1F4E1} " + muster[takt % muster.length];
+    },
+  },
+  {
+    // Sanduhr: der Sand laeuft durch, dann wird gedreht.
+    id: "sanduhr",
+    takt: 2,
+    zeichne: (schritt) => {
+      const takt = schritt % 12;
+      const koerner = "·".repeat(Math.max(0, 5 - Math.floor(takt / 2)));
+      return (takt < 10 ? "⏳" : "⌛") + " " + koerner;
+    },
+  },
+  {
+    // Ei, Kueken, Henne - und die legt das naechste Ei.
+    id: "huhn-kreislauf",
+    compact: true,
+    takt: 3,
+    zeichne: (schritt) => {
+      const takt = schritt % 16;
+      if (takt < 3) return "\u{1F95A}";
+      if (takt < 5) return "\u{1F95A}*";
+      if (takt < 8) return "\u{1F423}";
+      if (takt < 11) return "\u{1F424}";
+      if (takt < 14) return "\u{1F414}";
+      return "\u{1F414}\u{1F95A}";
+    },
+  },
+  {
+    // Hut, Funken - und das Kaninchen tuermt.
+    id: "zauberhut",
+    compact: true,
+    takt: 3,
+    zeichne: (schritt) => {
+      const takt = schritt % 14;
+      if (takt < 4) return "\u{1F3A9}";
+      if (takt < 7) return "\u{1F3A9}*";
+      if (takt < 11) return "\u{1F3A9}\u{1F407}";
+      return "\u{1F407}\u{1F4A8}";
+    },
+  },
+  {
+    // Rot, Gelb, Gruen - und ab.
+    id: "ampel",
+    compact: true,
+    takt: 3,
+    zeichne: (schritt) => {
+      const takt = schritt % 12;
+      if (takt < 4) return "\u{1F534}";
+      if (takt < 6) return "\u{1F7E1}";
+      if (takt < 8) return "\u{1F7E2}";
+      return "\u{1F697}\u{1F4A8}";
+    },
+  },
+  {
+    // Klingeln, verschlafen, losrennen.
+    id: "wecker",
+    compact: true,
+    takt: 2,
+    zeichne: (schritt) => {
+      const takt = schritt % 14;
+      if (takt < 5) return takt % 2 === 0 ? "⏰" : "\u{1F514}";
+      if (takt < 8) return "\u{1F634}";
+      if (takt < 10) return "\u{1F633}";
+      return "\u{1F3C3}\u{1F4A8}";
+    },
+  },
+  {
+    // Schnecke kriecht zur Flagge - und feiert.
+    id: "schnecke",
+    takt: 4,
+    zeichne: (schritt) => {
+      const takt = schritt % 8;
+      if (takt < 5) return bahn({ [takt]: "\u{1F40C}", 4: "\u{1F3C1}" }, 5);
+      return bahn({ 4: "\u{1F389}" }, 5);
+    },
+  },
+];
+
+const COMPACT_SCENES = SZENEN.filter((scene) => scene.compact);
+
+export interface WorkingScenesProps {
+  /** Limits scenes to one or two visible characters for small status fields. */
+  compact?: boolean;
+  /** Text fuer Screenreader, Default "Arbeitet ...". */
+  label?: string;
+}
+
+/**
+ * Der Default-Working-Indikator: zufaellig rotierende Mini-Szenen. Zufaellige Reihenfolge
+ * und Startphase, damit dieselben Szenen nie wie eine Schleife wirken. Ueber die
+ * working-Prop von ChatMessages laesst er sich komplett ersetzen.
+ */
+export function WorkingScenes({ label = "Arbeitet ...", compact = false }: WorkingScenesProps) {
+  const scenes = compact ? COMPACT_SCENES : SZENEN;
+  const [sceneIndex, setSceneIndex] = useState(() => Math.floor(Math.random() * scenes.length));
+  const [offset, setOffset] = useState(() => Math.floor(Math.random() * 20));
+  const [frameTick, setFrameTick] = useState(0);
+  const [reducedMotion, setReducedMotion] = useState(() => typeof window !== "undefined"
+    && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  const scene = scenes[sceneIndex % scenes.length];
+
+  useEffect(() => {
+    const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReducedMotion(preference.matches);
+    preference.addEventListener("change", update);
+    update();
+    return () => preference.removeEventListener("change", update);
+  }, []);
+
+  useEffect(() => {
+    if (reducedMotion) return;
+    const timer = window.setInterval(() => {
+      setSceneIndex((previous) => (previous + 1 + Math.floor(Math.random() * (scenes.length - 1))) % scenes.length);
+      setOffset(Math.floor(Math.random() * 20));
+      setFrameTick(0);
+    }, SZENENWECHSEL_MS);
+    return () => window.clearInterval(timer);
+  }, [reducedMotion, scenes]);
+
+  useEffect(() => {
+    if (reducedMotion) return;
+    const timer = window.setInterval(() => setFrameTick((value) => value + 1), GRUNDTAKT_MS);
+    return () => window.clearInterval(timer);
+  }, [reducedMotion]);
+
+  const frame = scene.zeichne(Math.floor(frameTick / scene.takt) + (scene.laufend ? offset : 0));
+  return (
+    <span aria-label={label} className={cn("flex items-center gap-2.5 text-[13px]", compact ? "text-inherit" : "mt-4 text-foreground")} data-chat="working" role="status">
+      {!compact && <span aria-hidden="true" className="text-muted-foreground opacity-70">&gt;</span>}
+      <span aria-hidden="true" className={cn("inline-block flex-none font-mono [font-variant-ligatures:none]", compact ? "w-[2.4em] text-center" : "w-[15rem]")} key={scene.id}>
+        <span className="tracking-[0.02em] whitespace-pre motion-reduce:opacity-60">
+          {typeof frame === "string"
+            ? frame
+            : frame.map((cell, index) => (
+                <span className="inline-block w-[1.35em] text-center" key={index}>
+                  {cell}
+                </span>
+              ))}
+        </span>
+      </span>
+    </span>
+  );
+}