@miragon/mcp-toolkit-ui 2.7.0 → 2.8.0

package/src/lib/tool-result-observer.ts

@@ -0,0 +1,211 @@
+/**
+ * A passive observer of the MCP Apps (SEP-1865) host → view lifecycle
+ * notifications, read straight off the postMessage channel the view runtime
+ * itself listens on (toolkit#176 K13, N21).
+ *
+ * mcp-use 2.x latches only a result WITH `structuredContent` (or an
+ * `isError`); a content-only result, which claude.ai and Claude Desktop send,
+ * leaves its status `"pending"` forever, and its tool input merges partial and
+ * complete arguments into one field. Watching the notifications themselves
+ * tells the three cases apart that the latch cannot:
+ *
+ * - the host delivered a STRIPPED result (re-run the tool now, with the
+ *   complete arguments it was called with),
+ * - the host delivered a structured result (the latch follows; never re-run),
+ * - nothing arrived yet (a slow tool on a compliant host: keep waiting).
+ *
+ * The last case is only certain when the observer was listening before the
+ * host answered `ui/initialize` ({@link ToolObservation.sawHandshake}): hosts
+ * send the lifecycle notifications after the handshake, so an observer that
+ * saw it has seen everything sent so far. `mountMcpToolkitApp` installs it
+ * ahead of `bootstrapView` for exactly that reason.
+ *
+ * Read-only: it never sends, never answers and never stops a message.
+ */
+
+/** What the host's `ui/notifications/tool-result` carried. */
+export type ObservedToolResult = "none" | "structured" | "stripped" | "error"
+
+/** Everything the observer learned about the rendering call so far. */
+export interface ToolObservation {
+  /**
+   * The observer saw the host answer `ui/initialize`, so it was listening
+   * before any lifecycle notification could be sent: a result it has not
+   * seen has not been delivered yet.
+   */
+  sawHandshake: boolean
+  /**
+   * The arguments of the complete `ui/notifications/tool-input` — never a
+   * partial stream (`tool-input-partial` is ignored). `undefined` until it
+   * arrived.
+   */
+  completeInput: Record<string, unknown> | undefined
+  /** What the first `ui/notifications/tool-result` carried. */
+  result: ObservedToolResult
+  /** The host sent `ui/notifications/tool-cancelled`. */
+  cancelled: boolean
+}
+
+export const EMPTY_TOOL_OBSERVATION: ToolObservation = Object.freeze({
+  sawHandshake: false,
+  completeInput: undefined,
+  result: "none",
+  cancelled: false,
+})
+
+/** A host → view message the observer acts on. */
+export type HostLifecycleMessage =
+  | { kind: "handshake" }
+  | { kind: "tool-input"; arguments: Record<string, unknown> }
+  | { kind: "tool-result"; result: Exclude<ObservedToolResult, "none"> }
+  | { kind: "tool-cancelled" }
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value)
+}
+
+/**
+ * Classify a tool-result notification the way mcp-use 2.x's latch does: an
+ * `isError` result is an error, a result with `structuredContent` (even
+ * `null`) latches as ready, and anything else is the stripped, content-only
+ * result the latch ignores.
+ */
+export function classifyToolResult(
+  params: Record<string, unknown>,
+): Exclude<ObservedToolResult, "none"> {
+  if (params.isError === true) return "error"
+  return params.structuredContent === undefined ? "stripped" : "structured"
+}
+
+/** The host's answer to `ui/initialize`: a response carrying its capabilities or protocol version. */
+function isHandshakeResponse(message: Record<string, unknown>): boolean {
+  if (!("id" in message) || !isRecord(message.result)) return false
+  return (
+    isRecord(message.result.hostCapabilities) || typeof message.result.protocolVersion === "string"
+  )
+}
+
+/**
+ * Decode one postMessage payload into the lifecycle message it is, or `null`
+ * for anything else (other methods, requests, responses, foreign traffic).
+ */
+export function classifyHostMessage(data: unknown): HostLifecycleMessage | null {
+  if (!isRecord(data) || data.jsonrpc !== "2.0") return null
+  if (typeof data.method !== "string") {
+    return isHandshakeResponse(data) ? { kind: "handshake" } : null
+  }
+  const params = isRecord(data.params) ? data.params : {}
+  switch (data.method) {
+    case "ui/notifications/tool-input":
+      return {
+        kind: "tool-input",
+        arguments: isRecord(params.arguments) ? params.arguments : {},
+      }
+    case "ui/notifications/tool-result":
+      return { kind: "tool-result", result: classifyToolResult(params) }
+    case "ui/notifications/tool-cancelled":
+      return { kind: "tool-cancelled" }
+    default:
+      return null
+  }
+}
+
+/**
+ * Fold one message into the observation. Like the mcp-use latch, the call
+ * settles once: after its result or cancellation, later inputs, results and
+ * cancellations change nothing.
+ */
+export function reduceToolObservation(
+  state: ToolObservation,
+  message: HostLifecycleMessage,
+): ToolObservation {
+  if (message.kind === "handshake") {
+    return state.sawHandshake ? state : { ...state, sawHandshake: true }
+  }
+  if (state.result !== "none" || state.cancelled) return state
+  switch (message.kind) {
+    case "tool-input":
+      return { ...state, completeInput: message.arguments }
+    case "tool-result":
+      return { ...state, result: message.result }
+    case "tool-cancelled":
+      return { ...state, cancelled: true }
+  }
+}
+
+/** The `window` slice the observer listens on (any `EventTarget`, e.g. in tests). */
+export interface MessageEventSource {
+  addEventListener(type: "message", listener: (event: Event) => void): void
+  removeEventListener(type: "message", listener: (event: Event) => void): void
+}
+
+/** A subscribable observation, shaped for `useSyncExternalStore`. */
+export interface ToolResultObserver {
+  subscribe: (listener: () => void) => () => void
+  getSnapshot: () => ToolObservation
+  /** Stop listening; the last observation stays readable. */
+  dispose: () => void
+}
+
+/**
+ * Observe the lifecycle notifications arriving on `source`. `accept` filters
+ * the events (the view accepts only its host: `event.source === window.parent`,
+ * the same check the ext-apps transport makes).
+ */
+export function createToolResultObserver(
+  source: MessageEventSource,
+  accept: (event: MessageEvent) => boolean = () => true,
+): ToolResultObserver {
+  let snapshot: ToolObservation = EMPTY_TOOL_OBSERVATION
+  const listeners = new Set<() => void>()
+  const onMessage = (received: Event) => {
+    // Only `message` events are subscribed: each one is a MessageEvent.
+    const event = received as MessageEvent
+    if (!accept(event)) return
+    const message = classifyHostMessage(event.data)
+    if (!message) return
+    const next = reduceToolObservation(snapshot, message)
+    if (next === snapshot) return
+    snapshot = next
+    for (const listener of [...listeners]) listener()
+  }
+  source.addEventListener("message", onMessage)
+  return {
+    subscribe: (listener) => {
+      listeners.add(listener)
+      return () => {
+        listeners.delete(listener)
+      }
+    },
+    getSnapshot: () => snapshot,
+    dispose: () => {
+      source.removeEventListener("message", onMessage)
+    },
+  }
+}
+
+let documentObserver: ToolResultObserver | null = null
+
+/**
+ * The view document's observer: installed once and kept for the document's
+ * lifetime (one document renders one view). `null` outside a browser and in
+ * a top-level window, where no host frames the view.
+ *
+ * It must listen before the view runtime connects, so it sees the
+ * handshake. This module therefore installs it as the bundle evaluates
+ * (below), ahead of any `bootstrapView` call in the entry module, whatever
+ * the mount; `mountMcpToolkitApp` calls it again (idempotent). Installed any
+ * later, it still sees what arrives afterwards, and the recovery falls back
+ * to its grace timer for the rest.
+ */
+export function installToolResultObserver(): ToolResultObserver | null {
+  if (documentObserver) return documentObserver
+  if (typeof window === "undefined" || window.parent === window) return null
+  const host = window.parent
+  documentObserver = createToolResultObserver(window, (event) => event.source === host)
+  return documentObserver
+}
+
+// Listen from the moment the view bundle evaluates (a passive listener; a
+// no-op outside a framed browser document).
+installToolResultObserver()

package/src/lib/typography.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest"
+import { MICRO_LABEL, TYPE_FLOOR_PX, TYPE_SCALE, TYPE_STEPS } from "./typography.js"
+import { cn } from "./utils.js"
+
+describe("the type scale (CI §4)", () => {
+  it("has five steps, each its own self-named utility", () => {
+    expect(TYPE_STEPS).toEqual(["title", "section", "body", "dense", "small"])
+    expect(TYPE_SCALE).toEqual({
+      title: "text-title",
+      section: "text-section",
+      body: "text-body",
+      dense: "text-dense",
+      small: "text-small",
+    })
+  })
+
+  it("puts the floor at the CI's smallest size and micro-labels on it, in normal case", () => {
+    expect(TYPE_FLOOR_PX).toBe(13)
+    expect(MICRO_LABEL).toBe("text-small font-semibold")
+    expect(MICRO_LABEL).not.toMatch(/uppercase|text-xs|text-\[/)
+  })
+})
+
+describe("cn knows the type scale (tailwind-merge would drop it as a colour)", () => {
+  it("keeps a scale size next to a text colour, in either order", () => {
+    for (const size of Object.values(TYPE_SCALE)) {
+      expect(cn(size, "text-muted-foreground")).toBe(`${size} text-muted-foreground`)
+      expect(cn("text-danger-ink", size)).toBe(`text-danger-ink ${size}`)
+    }
+  })
+
+  it("lets a later size win over an earlier one, scale or Tailwind", () => {
+    expect(cn("text-sm", "text-small")).toBe("text-small")
+    expect(cn("text-small", "text-xs")).toBe("text-xs")
+    expect(cn("text-dense", "text-title")).toBe("text-title")
+    expect(cn("md:text-sm", "md:text-dense")).toBe("md:text-dense")
+  })
+
+  it("keeps a leading set after the size (a size resets the line height before it)", () => {
+    expect(cn("text-small", "leading-4")).toBe("text-small leading-4")
+    expect(cn(MICRO_LABEL, "text-muted-foreground")).toBe(
+      "text-small font-semibold text-muted-foreground",
+    )
+  })
+})

package/src/lib/typography.ts

@@ -0,0 +1,47 @@
+/**
+ * The type scale of the kit (modeler-tool-design §4, adapted for embedded
+ * widgets): five steps, each a role in `theme.css` (`--text-<step>` with its
+ * line height and weight) and a Tailwind utility of the same name.
+ *
+ * | Step      | Utility        | Size / weight / line height | Use                                        |
+ * | --------- | -------------- | --------------------------- | ------------------------------------------ |
+ * | `title`   | `text-title`   | 28 px / 700 / 1.2           | page title (the CI h2; a widget has no h1 40 px) |
+ * | `section` | `text-section` | 21 px / 600 / 1.3           | section title (CI h3)                      |
+ * | `body`    | `text-body`    | 16 px / 400 / 1.6           | running text: state and toast descriptions |
+ * | `dense`   | `text-dense`   | 14 px / 400 / 1.5           | dense tables and controls (inputs, chips, count pills, the inline alert box): the documented product exception, never running text |
+ * | `small`   | `text-small`   | 13 px / 400 / 1.5           | captions, labels, hints, meta rows: the FLOOR |
+ *
+ * Nothing renders below 13 px — no `text-xs` (12 px), no `text-[10px]`
+ * micro-labels (`examples/test/design-system.test.ts` enforces it). A label
+ * that used to be a 10–11 px uppercase caption is {@link MICRO_LABEL}: 13 px,
+ * semibold, normal case.
+ *
+ * Combine the utilities through the kit's `cn`: plain tailwind-merge does not
+ * know these sizes and would drop `text-small` next to a text colour.
+ */
+
+/** The five steps, smallest last. */
+export const TYPE_STEPS = ["title", "section", "body", "dense", "small"] as const
+
+/** One step of the type scale. */
+export type TypeStep = (typeof TYPE_STEPS)[number]
+
+/** The utility class per step (`TYPE_SCALE.small` → `"text-small"`). */
+export const TYPE_SCALE: Readonly<Record<TypeStep, `text-${TypeStep}`>> = {
+  title: "text-title",
+  section: "text-section",
+  body: "text-body",
+  dense: "text-dense",
+  small: "text-small",
+}
+
+/** The smallest text the kit renders, in CSS px (CI §4 "klein"). */
+export const TYPE_FLOOR_PX = 13
+
+/**
+ * A caption above a value or a column: table heads, KPI labels, group
+ * labels. 13 px semibold in normal case — the CI floor, where these used to
+ * be 10–11 px uppercase. Typography only: add the colour
+ * (`text-muted-foreground`) at the call site.
+ */
+export const MICRO_LABEL = "text-small font-semibold"

package/src/lib/utils.ts

@@ -1,5 +1,16 @@
 import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { extendTailwindMerge } from "tailwind-merge"
+import { TYPE_STEPS } from "./typography.js"
+
+/**
+ * tailwind-merge that knows the kit's type scale. Out of the box it reads
+ * an unknown `text-small` as a text COLOUR and drops it next to
+ * `text-muted-foreground`; registered as font sizes, `text-small` conflicts
+ * only with other sizes (`text-sm`, `text-xs`), as it should.
+ */
+const twMerge = extendTailwindMerge({
+  extend: { theme: { text: [...TYPE_STEPS] } },
+})
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))

package/src/locale/index.ts

@@ -9,6 +9,7 @@ export { TOOLKIT_MESSAGES, formatCount, resolveToolkitMessages } from "./toolkit
 export type {
   BuilderMessages,
   CommonMessages,
+  FilterBarMessages,
   ListFooterMessages,
   PropsSheetMessages,
   RendererMessages,

package/src/locale/message-types.ts

@@ -14,8 +14,16 @@ export interface CommonMessages {
   details: string
   /** Accessible name of a toast's close button. */
   dismiss: string
-  /** Accessible name of the toast region. */
+  /**
+   * @deprecated No longer rendered: the toast region is a plain live region
+   * with fixed attributes and takes no name. Kept so a catalog that sets it
+   * still type-checks.
+   */
   notifications: string
+  /** Title of a widget's error state when its data could not be loaded. */
+  loadFailed: string
+  /** The line under {@link CommonMessages.loadFailed}: what you can do (a retry follows). */
+  loadFailedHint: string
 }
 
 /** Strings of the `McpAppView` chrome (placeholder, error state, toolbar, step errors). */
@@ -47,6 +55,21 @@ export interface ViewMessages {
   errorHintNoRetry: string
   /** Retry button of the error state and of the step-error alert. */
   retry: string
+  /**
+   * Title of the notice shown instead of the view when the tool ran, the chat
+   * did not pass its result to the view, and the view must not run it again
+   * on its own (the recovery policy forbids it). Nothing failed.
+   */
+  blockedTitle: string
+  /** The line under {@link ViewMessages.blockedTitle} when the notice offers to load the view. */
+  blockedHint: string
+  /**
+   * The line under {@link ViewMessages.blockedTitle} when the tool writes, so
+   * the view offers no button that would run it again: what you can do instead.
+   */
+  blockedHintNoRetry: string
+  /** Button of that notice: loads the view by running the (non-writing) tool again. */
+  blockedRetry: string
   /** Summary of the error's technical-details disclosure. */
   errorDetails: string
   /** Title of the alert that lists the data steps that failed. */
@@ -61,6 +84,14 @@ export interface ViewMessages {
   fullscreenFailed: string
   /** Toast line under {@link ViewMessages.fullscreenFailed}: what you can do. */
   fullscreenFailedHint: string
+  /**
+   * The line under the toolbar title of a view that loaded its data again
+   * itself (the host did not pass the original result along, or the user
+   * retried or refreshed), with the time pre-formatted (`formatClockTime`, in
+   * the language of these words). It must carry its meaning in its own
+   * words: there is no tooltip, so touch and keyboard users read only this.
+   */
+  dataAsOf: (time: string) => string
 }
 
 /** Strings of `ListFooter`. */
@@ -71,6 +102,31 @@ export interface ListFooterMessages {
   defaultNoun: string
   loadMore: string
   loadingMore: string
+  /** Status while a new first page is in flight over the rows on screen. */
+  updating: string
+  /**
+   * Status at zero rows, for screen readers only (the caller's empty state is
+   * what you see): a search that finds nothing is announced like any count.
+   */
+  noResults: string
+  /** Title when a new first page failed and the previous rows stay on screen. */
+  refreshFailed: string
+  /** The line under {@link ListFooterMessages.refreshFailed}: what you see and can do. */
+  refreshFailedHint: string
+  /** Title when loading the next page failed. */
+  loadMoreFailed: string
+  /** The line under {@link ListFooterMessages.loadMoreFailed}: what you see and can do. */
+  loadMoreFailedHint: string
+}
+
+/** Strings of `FilterBar`. */
+export interface FilterBarMessages {
+  /** Placeholder of the search input. */
+  searchPlaceholder: string
+  /** Accessible name of the search input (a placeholder is no label). */
+  searchLabel: string
+  /** Accessible name of the chip group. */
+  chipsLabel: string
 }
 
 /** Strings of the widget renderer's fallbacks. */
@@ -89,13 +145,70 @@ export interface BuilderMessages {
   builderBadge: string
   previewBadge: string
   catalogue: string
+  /** Toolbar button that opens the save dialog: saves the draft as a dashboard. */
   save: string
+  /**
+   * @deprecated Since 2.8 the builder's commit button is Apply
+   * ({@link BuilderMessages.apply}). An override of `done`, in the builder's
+   * `labels` or a `LocaleProvider`'s `toolkitMessages`, still labels it unless
+   * the same override sets `apply`.
+   */
   done: string
+  /** Primary action: show the edited view in place and leave the builder (saves nothing). */
+  apply: string
+  /** Tooltip of {@link BuilderMessages.apply}: what it does, and that it saves nothing. */
+  applyHint: string
+  /** Leave the builder without the edits: the view stays as it was before editing. */
+  discard: string
+  /** Tooltip of {@link BuilderMessages.discard}. */
+  discardHint: string
+  /**
+   * Tooltip of {@link BuilderMessages.discard} in a builder without a view to
+   * apply to (no `onExit`): Discard resets the draft in place.
+   */
+  discardHintStandalone: string
+  /** Tooltip of {@link BuilderMessages.save}: what a dashboard is for. */
+  saveHint: string
+  /**
+   * Marker next to the title while the draft has changes that would be lost:
+   * neither the view before editing nor a saved dashboard holds them.
+   */
+  unsavedChanges: string
+  /** Title of the confirmation before unsaved changes are discarded. */
+  discardDialogTitle: string
+  /** What discarding does to the view, when no saved dashboard holds the changes. */
+  discardDialogDescription: string
+  /** What discarding does to the view, when a saved dashboard holds the changes. */
+  discardDialogDescriptionSaved: string
+  /** Safe choice of the discard confirmation (it keeps the draft). */
+  keepEditing: string
+  /** Destructive choice of the discard confirmation. */
+  discardConfirm: string
+  /** Toggle that shows the technical parts: data sources, catalogue, ids. */
+  advanced: string
+  /** Tooltip of {@link BuilderMessages.advanced}: what it shows. */
+  advancedHint: string
+  /** Accessible name of a tab's rename button, with the tab's label. */
+  renameTabNamed: (label: string) => string
+  /** Accessible name of a tab's remove button, with the tab's label. */
+  removeTabNamed: (label: string) => string
+  /** Marks the row that receives the next element added from the list. */
+  rowTarget: string
+  /** Lead word of a step's output line ("provides …"), next to {@link BuilderMessages.catalogueNeedsKeys}. */
+  stepProvides: string
+  /** Accessible name of a key's value field, with the key name (or none yet). */
+  keyValueFor: (key: string) => string
   viewLayoutTab: string
   viewPipelineTab: string
   viewPreviewTab: string
   saveDialogTitle: string
+  /** What the save dialog does, and that Apply (not Save) changes the view. */
   saveDialogDescription: string
+  /**
+   * {@link BuilderMessages.saveDialogDescription} in a builder without a view
+   * to apply to (no `onExit`): no Apply to point to.
+   */
+  saveDialogDescriptionStandalone: string
   saveNameLabel: string
   saveDescriptionLabel: string
   saveConfirm: string
@@ -115,6 +228,9 @@ export interface BuilderMessages {
   statusPending: string
   statusRefreshing: string
   paletteHeader: string
+  /** Status line of the palette while the first catalogue answer is on its way. */
+  paletteLoading: string
+  /** The palette has no element (the catalogue answered with none). */
   paletteEmpty: string
   canvasEmpty: string
   canvasDropHint: string
@@ -213,7 +329,7 @@ export interface ToolkitMessages {
   common: CommonMessages
   view: ViewMessages
   listFooter: ListFooterMessages
-  filterBar: { searchPlaceholder: string }
+  filterBar: FilterBarMessages
   pills: { live: string }
   renderer: RendererMessages
   builder: BuilderMessages

package/src/locale/messages-de.ts

@@ -13,6 +13,8 @@ export const de: ToolkitMessages = {
     details: "Details",
     dismiss: "Hinweis schließen",
     notifications: "Hinweise",
+    loadFailed: "Der Inhalt konnte nicht geladen werden",
+    loadFailedHint: "Versuch es noch mal. Klappt es wieder nicht, frag im Chat nach.",
   },
   view: {
     loading: "Ansicht wird geladen…",
@@ -27,6 +29,11 @@ export const de: ToolkitMessages = {
     errorHint: "Versuch es noch mal. Klappt es wieder nicht, frag im Chat nach.",
     errorHintNoRetry: "Frag im Chat noch mal nach dieser Ansicht.",
     retry: "Erneut versuchen",
+    blockedTitle: "Der Chat hat das Ergebnis nicht an die Ansicht weitergegeben",
+    blockedHint: "Lade die Ansicht selbst oder frag im Chat nach dem aktuellen Stand.",
+    blockedHintNoRetry:
+      "Die Aktion ist schon gelaufen, deshalb startet die Ansicht sie nicht noch mal. Frag im Chat nach dem aktuellen Stand.",
+    blockedRetry: "Ansicht laden",
     errorDetails: "Details",
     stepErrorsTitle: "Ein Teil der Daten konnte nicht geladen werden",
     stepErrorsHint: "Versuch es noch mal, um die fehlenden Daten zu laden.",
@@ -34,14 +41,21 @@ export const de: ToolkitMessages = {
     refreshFailedHint: "Du siehst den zuletzt geladenen Stand. Versuch es gleich noch mal.",
     fullscreenFailed: "Die Darstellung ließ sich nicht umschalten.",
     fullscreenFailedHint: "Die Ansicht bleibt, wie sie ist. Versuch es gleich noch mal.",
+    dataAsOf: (time) => `Neu geladen um ${time} Uhr`,
   },
   listFooter: {
     showing: ({ shown, total, noun }) => `Zeigt ${shown} von ${total} ${noun}`.trimEnd(),
     defaultNoun: "Zeilen",
     loadMore: "Mehr laden",
     loadingMore: "Wird geladen…",
+    updating: "Wird aktualisiert…",
+    noResults: "Keine Einträge",
+    refreshFailed: "Die Liste konnte nicht aktualisiert werden",
+    refreshFailedHint: "Du siehst das vorherige Ergebnis. Versuch es gleich noch mal.",
+    loadMoreFailed: "Weitere Einträge konnten nicht geladen werden",
+    loadMoreFailedHint: "Die Einträge oben sind aktuell. Versuch es gleich noch mal.",
   },
-  filterBar: { searchPlaceholder: "Filtern…" },
+  filterBar: { searchPlaceholder: "Filtern…", searchLabel: "Filtern", chipsLabel: "Filter" },
   pills: { live: "Live" },
   renderer: {
     widgetUnavailable: "Dieses Element ist in dieser Version nicht verfügbar.",
@@ -53,13 +67,37 @@ export const de: ToolkitMessages = {
     builderBadge: "Bearbeitung",
     previewBadge: "Vorschau",
     catalogue: "Katalog",
-    save: "Speichern",
+    save: "Als Dashboard speichern",
     done: "Fertig",
+    apply: "Übernehmen",
+    applyHint: "Zeigt deine Änderungen in dieser Ansicht und speichert nichts.",
+    discard: "Verwerfen",
+    discardHint: "Beendet die Bearbeitung. Die Ansicht bleibt, wie sie war.",
+    discardHintStandalone: "Setzt deine Änderungen zurück.",
+    saveHint: "Speichert das Layout als Dashboard, das du später wieder öffnen kannst.",
+    unsavedChanges: "Ungespeicherte Änderungen",
+    discardDialogTitle: "Änderungen verwerfen?",
+    discardDialogDescription:
+      "Deine Änderungen an dieser Ansicht gehen verloren. Die Ansicht bleibt, wie sie vor dem Bearbeiten war.",
+    discardDialogDescriptionSaved:
+      "Die Ansicht springt auf den Stand vor dem Bearbeiten zurück. Dein gespeichertes Dashboard behält deine Änderungen.",
+    keepEditing: "Weiter bearbeiten",
+    discardConfirm: "Änderungen verwerfen",
+    advanced: "Erweitert",
+    advancedHint: "Zeigt Datenquellen, Katalog und technische IDs.",
+    renameTabNamed: (label) => `Tab „${label}“ umbenennen`,
+    removeTabNamed: (label) => `Tab „${label}“ entfernen`,
+    rowTarget: "Neue Elemente landen hier",
+    stepProvides: "liefert",
+    keyValueFor: (key) => (key ? `Wert von ${key}` : "Wert"),
     viewLayoutTab: "Layout",
     viewPipelineTab: "Datenquellen",
     viewPreviewTab: "Vorschau",
-    saveDialogTitle: "Dashboard speichern",
-    saveDialogDescription: "Speichert das Layout zusammen mit den Datenquellen, die es füllen.",
+    saveDialogTitle: "Als Dashboard speichern",
+    saveDialogDescription:
+      "Speichert das Layout mit seinen Datenquellen als Dashboard, das du später wieder öffnen kannst. Diese Ansicht änderst du mit „Übernehmen“.",
+    saveDialogDescriptionStandalone:
+      "Speichert das Layout mit seinen Datenquellen als Dashboard, das du später wieder öffnen kannst.",
     saveNameLabel: "Name",
     saveDescriptionLabel: "Beschreibung",
     saveConfirm: "Dashboard speichern",
@@ -76,10 +114,11 @@ export const de: ToolkitMessages = {
     emptyKeys: "Noch keine Schlüssel.",
     emptySteps: "Noch keine Schritte.",
     statusUpToDate: "Aktuell",
-    statusPending: "Wird gleich übernommen…",
-    statusRefreshing: "Wird übernommen…",
+    statusPending: "Wird gleich aktualisiert…",
+    statusRefreshing: "Wird aktualisiert…",
     paletteHeader: "Elemente",
-    paletteEmpty: "Noch keine Elemente verfügbar. Füg einen Schlüssel oder einen Schritt hinzu.",
+    paletteLoading: "Elemente werden geladen…",
+    paletteEmpty: "Noch keine Elemente verfügbar. Elemente erscheinen, sobald ihre Daten da sind.",
     canvasEmpty: "Zieh ein Element hierher oder klick eins in der Liste an.",
     canvasDropHint: "Zum Hinzufügen loslassen",
     addRow: "Zeile hinzufügen",
@@ -119,9 +158,9 @@ export const de: ToolkitMessages = {
     saveNamePlaceholder: "Name des Dashboards",
     saveDescriptionPlaceholder: "Optional",
     saved: (name) => `Dashboard „${name}“ gespeichert.`,
-    renameHint: "Doppelklick auf einen Tab benennt ihn um.",
-    renameTitle: "Doppelklicken zum Umbenennen",
-    autoApplies: "Änderungen gelten sofort",
+    renameHint: "Einen Tab benennst du mit F2, per Doppelklick oder über den Stift um.",
+    renameTitle: "F2 oder Doppelklick zum Umbenennen",
+    autoApplies: "Änderungen erscheinen sofort in der Vorschau",
     noMoreKeys: "Keine weiteren Schlüssel verfügbar.",
     parsedType: "Erkannter Typ",
     valueType: (code) =>