@miragon/mcp-toolkit-ui 2.6.0 → 2.8.0

package/src/app/builder/CanvasRow.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback, useRef } from "react"
 import { ChevronDown, ChevronUp, SlidersHorizontal, Trash2, X } from "lucide-react"
-import type { RowDef, WidgetProps } from "@miragon/mcp-toolkit-core"
+import type { DisplayText, RowDef, WidgetProps } from "@miragon/mcp-toolkit-core"
 import { GridItem, GridLayout } from "../../components/GridLayout.js"
 import { Button } from "../../primitives/button.js"
 import {
@@ -10,10 +10,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../primitives/select.js"
+import { FOCUS_RING, FOCUS_RING_INSET } from "../../lib/focus-ring.js"
 import { cn } from "../../lib/utils.js"
 import { RenderedWidget, type WidgetComponent } from "../widget-renderer.js"
+import { displayLabel } from "./builder-model.js"
 import type { LayoutBuilderLabels } from "./labels.js"
 import { WIDGET_DRAG_MIME } from "./labels.js"
+import { REVEAL_ON_INTENT } from "./reveal.js"
+import { useDisplayResolver } from "./use-display-resolver.js"
 
 // -------------------------------------------------------------------------- //
 // Canvas row — drop target + per-cell controls + resize handle
@@ -36,6 +40,8 @@ function CanvasRowImpl({
   onAddWidget,
   onConfigureCell,
   propsSchemaByWidgetId,
+  displayByWidgetId,
+  advanced,
   widgets,
   widgetProps,
 }: {
@@ -55,14 +61,25 @@ function CanvasRowImpl({
   onAddWidget: (widgetId: string, targetRowIdx?: number) => void
   onConfigureCell: (rowIdx: number, cellIdx: number) => void
   propsSchemaByWidgetId: Map<string, Record<string, unknown>>
+  displayByWidgetId: Map<string, DisplayText>
+  advanced: boolean
   widgets: Record<string, WidgetComponent>
   widgetProps: WidgetProps
 }) {
   const gridRef = useRef<HTMLDivElement | null>(null)
+  const { locale, resolveKey } = useDisplayResolver()
+  // The target row follows the pointer AND the keyboard: focus moving into a
+  // row (its actions, a cell control) makes it the row the palette adds to.
+  const target = () => {
+    if (!focused) setFocusedRowIndex(rowIdx)
+  }
 
   return (
     <div
-      onClick={() => setFocusedRowIndex(rowIdx)}
+      data-slot="builder-row"
+      data-target={focused ? "" : undefined}
+      onClick={target}
+      onFocus={target}
       onDragOver={(e) => {
         if (!e.dataTransfer.types.includes(WIDGET_DRAG_MIME)) return
         e.preventDefault()
@@ -82,21 +99,28 @@ function CanvasRowImpl({
         }
       }}
       className={cn(
-        "group relative rounded-lg border-l-2 px-3 py-2 transition-colors",
+        "group relative rounded-md border-l-2 px-3 py-2 transition-colors",
         focused
           ? "border-l-primary bg-card"
           : "bg-background hover:bg-card/60 border-l-transparent",
         dragOver && "bg-primary/5 border-l-primary",
       )}
     >
-      <div className="mb-2 flex items-center justify-between">
-        <div className="text-muted-foreground flex items-center gap-2 text-[11px]">
-          <span className="font-mono">row {rowIdx + 1}</span>
-          <span className="bg-muted/60 rounded px-1 py-0.5 text-[10px]">
-            {row.row.length} {row.row.length === 1 ? "widget" : "widgets"}
-          </span>
+      <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
+        <div className="text-muted-foreground text-small flex flex-wrap items-center gap-2">
+          <span className="font-medium">{L.rowLabel(rowIdx + 1)}</span>
+          <span className="bg-muted rounded px-1.5 py-0.5">{L.elementCount(row.row.length)}</span>
+          {focused && (
+            <span className="text-foreground inline-flex items-center gap-1.5">
+              <span aria-hidden="true" className="bg-primary size-1.5 rounded-full" />
+              {L.rowTarget}
+            </span>
+          )}
         </div>
-        <div className="opacity-0 transition-opacity group-hover:opacity-100">
+        <div
+          data-slot="builder-row-actions"
+          className={cn("flex items-center", focused ? "opacity-100" : REVEAL_ON_INTENT)}
+        >
           <Button
             variant="ghost"
             size="icon-xs"
@@ -105,7 +129,7 @@ function CanvasRowImpl({
               onMoveRow(rowIdx, -1)
             }}
             disabled={isFirst}
-            aria-label="Move row up"
+            aria-label={L.moveRowUp}
           >
             <ChevronUp />
           </Button>
@@ -117,7 +141,7 @@ function CanvasRowImpl({
               onMoveRow(rowIdx, 1)
             }}
             disabled={isLast}
-            aria-label="Move row down"
+            aria-label={L.moveRowDown}
           >
             <ChevronDown />
           </Button>
@@ -137,10 +161,10 @@ function CanvasRowImpl({
       {row.row.length === 0 ? (
         <div
           className={cn(
-            "rounded-md border border-dashed py-6 text-center text-[11px] transition-colors",
+            "text-small rounded-md border border-dashed py-6 text-center transition-colors",
             dragOver
-              ? "border-primary bg-primary/5 text-primary"
-              : "border-muted-foreground/30 text-muted-foreground",
+              ? "border-focus bg-accent text-accent-foreground"
+              : "border-input text-muted-foreground",
           )}
         >
           {dragOver ? L.canvasDropHint : L.canvasEmpty}
@@ -153,29 +177,48 @@ function CanvasRowImpl({
               const Widget = widgets[cell.widget]
               const hasPropsSchema = propsSchemaByWidgetId.has(cell.widget)
               const propCount = cell.props ? Object.keys(cell.props).length : 0
+              const name = displayLabel(
+                displayByWidgetId.get(cell.widget) ?? {},
+                cell.widget,
+                locale,
+                resolveKey,
+              )
               return (
                 <GridItem key={`${cell.widget}-${cellIdx}`} span={span}>
-                  <div className="border-border bg-card relative overflow-hidden rounded-md border shadow-sm">
-                    <div className="text-muted-foreground bg-muted/30 flex items-center justify-between gap-2 border-b px-2 py-1 text-[10px]">
-                      <span className="truncate font-mono">{cell.widget}</span>
+                  <div className="border-border bg-card shadow-1 relative overflow-hidden rounded-md border">
+                    <div className="text-muted-foreground bg-muted/30 text-small flex items-center justify-between gap-2 border-b px-2 py-1">
+                      <span className="flex min-w-0 items-baseline gap-2" title={name.hint}>
+                        <span className="text-foreground truncate font-medium">{name.label}</span>
+                        {advanced && name.hint && (
+                          <span className="truncate font-mono">{name.hint}</span>
+                        )}
+                      </span>
                       <div className="flex shrink-0 items-center gap-2">
-                        <label className="text-muted-foreground/80 inline-flex items-center gap-0.5 font-mono">
-                          <span className="sr-only">Column span</span>
+                        <label className="text-muted-foreground inline-flex items-center gap-0.5 tabular-nums">
+                          <span className="sr-only">{L.columnSpan}</span>
                           <Select
                             value={String(span)}
                             onValueChange={(v) => onSetCellSpan(rowIdx, cellIdx, Number(v))}
                           >
                             <SelectTrigger
                               size="sm"
-                              className="h-5 gap-0.5 border-none bg-transparent px-1 py-0 font-mono text-[10px] shadow-none focus:ring-0"
-                              aria-label="Column span"
+                              className={cn(
+                                "text-small h-6 gap-0.5 border-none bg-transparent px-1 py-0 tabular-nums shadow-none",
+                                // Borderless, so the input focus edge is gone: the kit ring instead.
+                                FOCUS_RING,
+                              )}
+                              aria-label={L.columnSpan}
                               onClick={(e) => e.stopPropagation()}
                             >
                               <SelectValue />
                             </SelectTrigger>
                             <SelectContent>
                               {Array.from({ length: 12 }, (_, i) => i + 1).map((n) => (
-                                <SelectItem key={n} value={String(n)} className="font-mono text-xs">
+                                <SelectItem
+                                  key={n}
+                                  value={String(n)}
+                                  className="text-small tabular-nums"
+                                >
                                   {n}
                                 </SelectItem>
                               ))}
@@ -191,13 +234,11 @@ function CanvasRowImpl({
                               e.stopPropagation()
                               onConfigureCell(rowIdx, cellIdx)
                             }}
-                            aria-label="Configure widget props"
+                            aria-label={L.configureElement}
                             title={
-                              propCount > 0
-                                ? `Configure widget props (${propCount} set)`
-                                : "Configure widget props"
+                              propCount > 0 ? L.configureElementSet(propCount) : L.configureElement
                             }
-                            className={cn(propCount > 0 && "text-primary")}
+                            className={cn(propCount > 0 && "text-link")}
                           >
                             <SlidersHorizontal />
                           </Button>
@@ -209,7 +250,7 @@ function CanvasRowImpl({
                             e.stopPropagation()
                             onRemoveCell(rowIdx, cellIdx)
                           }}
-                          aria-label="Remove widget"
+                          aria-label={L.removeElement}
                         >
                           <X />
                         </Button>
@@ -222,10 +263,11 @@ function CanvasRowImpl({
                         props={widgetProps}
                         cellProps={cell.props}
                         showEmptyHint
-                        notBundledClassName="text-muted-foreground rounded border border-dashed p-3 text-center text-[11px]"
+                        notBundledClassName="text-muted-foreground rounded border border-dashed p-3 text-center text-small"
                       />
                     </div>
                     <ResizeHandle
+                      label={L.resizeElement}
                       rowIdx={rowIdx}
                       cellIdx={cellIdx}
                       span={span}
@@ -250,12 +292,14 @@ export const CanvasRow = memo(CanvasRowImpl)
 // -------------------------------------------------------------------------- //
 
 function ResizeHandle({
+  label,
   rowIdx,
   cellIdx,
   span,
   getGridEl,
   onSetCellSpan,
 }: {
+  label: string
   rowIdx: number
   cellIdx: number
   span: number
@@ -304,8 +348,11 @@ function ResizeHandle({
       onClick={(e) => e.stopPropagation()}
       onKeyDown={onKeyDown}
       tabIndex={0}
-      className="hover:bg-primary/40 focus-visible:bg-primary/40 focus-visible:ring-primary/60 absolute top-0 right-0 h-full w-1.5 cursor-col-resize touch-none select-none focus-visible:ring-1 focus-visible:outline-none"
-      aria-label="Resize widget"
+      className={cn(
+        "hover:bg-primary/40 focus-visible:bg-primary/40 absolute top-0 right-0 h-full w-1.5 cursor-col-resize touch-none select-none",
+        FOCUS_RING_INSET,
+      )}
+      aria-label={label}
       role="separator"
       aria-orientation="vertical"
       aria-valuenow={span}

package/src/app/builder/CatalogueSheet.tsx

@@ -11,8 +11,11 @@ import {
   SheetHeader,
   SheetTitle,
 } from "../../primitives/sheet.js"
+import { TONE_DOT, TONE_TEXT } from "../../lib/tone-utils.js"
 import { cn } from "../../lib/utils.js"
+import { displayLabel } from "./builder-model.js"
 import type { LayoutBuilderLabels } from "./labels.js"
+import { useDisplayResolver } from "./use-display-resolver.js"
 
 // -------------------------------------------------------------------------- //
 // Catalogue Sheet — slides in from the right
@@ -37,6 +40,7 @@ export function CatalogueSheet({
   onSeedKey: (name: string) => void
   onAddProducingStep: (key: string) => void
 }) {
+  const { locale, resolveKey } = useDisplayResolver()
   const producerOf = useMemo(() => {
     const map = new Map<string, string | undefined>()
     for (const e of keyCatalog) map.set(e.key, e.producedBySteps[0])
@@ -59,28 +63,29 @@ export function CatalogueSheet({
             <section className="flex flex-col gap-2">
               <CatalogueSectionHeader title={L.catalogueKeys} count={keyCatalog.length} />
               {keyCatalog.length === 0 ? (
-                <p className="text-muted-foreground text-xs italic">No keys registered.</p>
+                <p className="text-muted-foreground text-small italic">{L.noKeysRegistered}</p>
               ) : (
                 <ul className="flex flex-col gap-1">
                   {keyCatalog.map((entry) => (
                     <li
                       key={entry.key}
-                      className="hover:bg-accent/40 flex flex-col gap-1 rounded-md border px-2 py-1.5 text-xs"
+                      className="hover:bg-muted text-small flex flex-col gap-1 rounded-md border px-2 py-1.5"
                     >
                       <div className="flex items-start justify-between gap-2">
                         <span className="truncate font-mono">{entry.key}</span>
                         <span
                           className={cn(
-                            "inline-flex shrink-0 items-center gap-1 text-[10px]",
-                            entry.inContext
-                              ? "text-emerald-600 dark:text-emerald-400"
-                              : "text-muted-foreground",
+                            "text-small inline-flex shrink-0 items-center gap-1",
+                            entry.inContext ? TONE_TEXT.success : "text-muted-foreground",
                           )}
                         >
                           <span
+                            aria-hidden="true"
                             className={cn(
                               "size-1.5 rounded-full",
-                              entry.inContext ? "bg-emerald-500" : "bg-muted-foreground/40",
+                              entry.inContext
+                                ? TONE_DOT.success
+                                : "border-input border bg-transparent",
                             )}
                           />
                           {entry.inContext ? L.catalogueLive : L.catalogueMissing}
@@ -89,7 +94,7 @@ export function CatalogueSheet({
                       {(entry.producedBySteps.length > 0 ||
                         entry.consumedBySteps.length > 0 ||
                         entry.consumedByWidgets.length > 0) && (
-                        <div className="text-muted-foreground/80 flex flex-col gap-0.5 text-[10px]">
+                        <div className="text-muted-foreground text-small flex flex-col gap-0.5">
                           {entry.producedBySteps.length > 0 && (
                             <span>
                               {L.catalogueProducedBy}{" "}
@@ -98,13 +103,13 @@ export function CatalogueSheet({
                           )}
                           {entry.consumedBySteps.length > 0 && (
                             <span>
-                              step {L.catalogueConsumedBy}{" "}
+                              {L.catalogueStepPrefix} {L.catalogueConsumedBy}{" "}
                               <span className="font-mono">{entry.consumedBySteps.join(", ")}</span>
                             </span>
                           )}
                           {entry.consumedByWidgets.length > 0 && (
                             <span>
-                              widget {L.catalogueConsumedBy}{" "}
+                              {L.catalogueElementPrefix} {L.catalogueConsumedBy}{" "}
                               <span className="font-mono">
                                 {entry.consumedByWidgets.join(", ")}
                               </span>
@@ -137,25 +142,39 @@ export function CatalogueSheet({
             <section className="flex flex-col gap-2">
               <CatalogueSectionHeader title={L.catalogueSteps} count={availableSteps.length} />
               {availableSteps.length === 0 ? (
-                <p className="text-muted-foreground text-xs italic">No steps registered.</p>
+                <p className="text-muted-foreground text-small italic">{L.noStepsRegistered}</p>
               ) : (
                 <ul className="flex flex-col gap-1">
-                  {availableSteps.map((s) => (
-                    <li
-                      key={s.id}
-                      className="flex flex-col gap-0.5 rounded-md border px-2 py-1.5 text-xs"
-                    >
-                      <span className="truncate font-mono">{s.id}</span>
-                      <div className="text-muted-foreground/80 flex flex-wrap gap-x-3 text-[10px]">
-                        <span className="font-mono">
-                          ← {s.requires.length ? s.requires.join(", ") : "(no inputs)"}
-                        </span>
-                        <span className="font-mono">
-                          → {s.produces.length ? s.produces.join(", ") : "(none)"}
-                        </span>
-                      </div>
-                    </li>
-                  ))}
+                  {availableSteps.map((s) => {
+                    const name = displayLabel(s, s.id, locale, resolveKey)
+                    return (
+                      <li
+                        key={s.id}
+                        className="text-small flex flex-col gap-0.5 rounded-md border px-2 py-1.5"
+                      >
+                        <span className="truncate font-medium">{name.label}</span>
+                        {name.hint && (
+                          <span className="text-muted-foreground truncate font-mono">
+                            {name.hint}
+                          </span>
+                        )}
+                        <div className="text-muted-foreground flex flex-wrap gap-x-3">
+                          <span>
+                            {L.catalogueNeedsKeys}{" "}
+                            <span className="font-mono">
+                              {s.requires.length ? s.requires.join(", ") : L.noInputs}
+                            </span>
+                          </span>
+                          <span>
+                            {L.stepProvides}{" "}
+                            <span className="font-mono">
+                              {s.produces.length ? s.produces.join(", ") : L.noOutputs}
+                            </span>
+                          </span>
+                        </div>
+                      </li>
+                    )
+                  })}
                 </ul>
               )}
             </section>
@@ -166,7 +185,7 @@ export function CatalogueSheet({
                 count={unreachableWidgets.length}
               />
               {unreachableWidgets.length === 0 ? (
-                <p className="text-muted-foreground text-xs italic">
+                <p className="text-muted-foreground text-small italic">
                   {L.catalogueUnreachableEmpty}
                 </p>
               ) : (
@@ -175,13 +194,19 @@ export function CatalogueSheet({
                     const candidate = w.missingKeys
                       .map((k) => ({ key: k, step: producerOf.get(k) }))
                       .find((c) => c.step)
+                    const name = displayLabel(w, w.id, locale, resolveKey)
                     return (
                       <li
                         key={w.id}
-                        className="bg-muted/20 flex flex-col gap-1 rounded-md border px-2 py-1.5 text-xs"
+                        className="bg-muted/20 text-small flex flex-col gap-1 rounded-md border px-2 py-1.5"
                       >
-                        <span className="truncate font-mono">{w.id}</span>
-                        <span className="text-muted-foreground/80 text-[10px]">
+                        <span className="truncate font-medium">{name.label}</span>
+                        {name.hint && (
+                          <span className="text-muted-foreground truncate font-mono">
+                            {name.hint}
+                          </span>
+                        )}
+                        <span className="text-muted-foreground">
                           {L.catalogueNeedsKeys}{" "}
                           <span className="font-mono">{w.missingKeys.join(", ")}</span>
                         </span>
@@ -218,11 +243,9 @@ export function CatalogueSheet({
 function CatalogueSectionHeader({ title, count }: { title: string; count: number }) {
   return (
     <div className="flex items-center gap-2">
-      <span className="text-muted-foreground text-[10px] font-semibold tracking-[0.12em] uppercase">
-        {title}
-      </span>
+      <h3 className="text-muted-foreground text-small font-semibold">{title}</h3>
       <span className="bg-border h-px flex-1" aria-hidden="true" />
-      <Badge variant="outline" className="px-1.5 text-[10px]">
+      <Badge variant="outline" className="px-1.5">
         {count}
       </Badge>
     </div>

package/src/app/builder/CellPropsSheet.tsx

@@ -1,5 +1,7 @@
-import type { RowDef } from "@miragon/mcp-toolkit-core"
+import type { DisplayText, RowDef } from "@miragon/mcp-toolkit-core"
 import { WidgetPropsSheet } from "../widget-props-sheet.js"
+import { displayLabel } from "./builder-model.js"
+import { useDisplayResolver } from "./use-display-resolver.js"
 
 // -------------------------------------------------------------------------- //
 // Cell props sheet — mounts the WidgetPropsSheet for the configured cell
@@ -10,25 +12,37 @@ import { WidgetPropsSheet } from "../widget-props-sheet.js"
  * can be open at a time across the entire workspace — including across
  * tabs. `configuringCell` addresses `{ rowIdx, cellIdx }` on the currently
  * active draft surface (rows or active tab's rows); renders nothing when no
- * cell is being configured or the address no longer resolves.
+ * cell is being configured or the address no longer resolves. The sheet is
+ * titled with the widget's name; closing it returns focus to the cell's
+ * configure button (the kit's `SheetContent` hands it back to the element
+ * that opened it, see `lib/focus-return.ts`).
  */
 export function CellPropsSheet({
   configuringCell,
   activeRows,
   propsSchemaByWidgetId,
+  displayByWidgetId,
   onApply,
   onClose,
 }: {
   configuringCell: { rowIdx: number; cellIdx: number } | null
   activeRows: RowDef[]
   propsSchemaByWidgetId: Map<string, Record<string, unknown>>
+  displayByWidgetId: Map<string, DisplayText>
   onApply: (rowIdx: number, cellIdx: number, next: Record<string, unknown> | undefined) => void
   onClose: () => void
 }) {
+  const { locale, resolveKey } = useDisplayResolver()
   if (!configuringCell) return null
   const cell = activeRows[configuringCell.rowIdx]?.row[configuringCell.cellIdx]
   if (!cell) return null
   const schema = propsSchemaByWidgetId.get(cell.widget)
+  const name = displayLabel(
+    displayByWidgetId.get(cell.widget) ?? {},
+    cell.widget,
+    locale,
+    resolveKey,
+  )
   return (
     <WidgetPropsSheet
       open
@@ -36,6 +50,7 @@ export function CellPropsSheet({
         if (!open) onClose()
       }}
       widgetId={cell.widget}
+      widgetTitle={name.hint ? name.label : undefined}
       schema={schema}
       value={cell.props}
       onApply={(next) => {

package/src/app/builder/DiscardDialog.tsx

@@ -0,0 +1,59 @@
+import { Button } from "../../primitives/button.js"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../primitives/dialog.js"
+import type { LayoutBuilderLabels } from "./labels.js"
+
+// -------------------------------------------------------------------------- //
+// Discard confirmation
+// -------------------------------------------------------------------------- //
+
+/**
+ * Asks before Discard takes the changes out of the view (CI §9: confirm
+ * before an irreversible action). When a saved dashboard holds them
+ * (`changesSaved`), it says so instead of calling them lost. The safe choice
+ * comes first in the DOM, so the dialog opens with focus on "Keep editing";
+ * closing it returns focus to Discard (the kit's `DialogContent` hands it
+ * back to the element that opened it, see `lib/focus-return.ts`).
+ */
+export function DiscardDialog({
+  L,
+  open,
+  onOpenChange,
+  changesSaved,
+  onConfirm,
+}: {
+  L: Required<LayoutBuilderLabels>
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** A saved dashboard holds the changes: only the view goes back. */
+  changesSaved: boolean
+  onConfirm: () => void
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{L.discardDialogTitle}</DialogTitle>
+          <DialogDescription>
+            {changesSaved ? L.discardDialogDescriptionSaved : L.discardDialogDescription}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">{L.keepEditing}</Button>
+          </DialogClose>
+          <Button variant="destructive" onClick={onConfirm}>
+            {L.discardConfirm}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/app/builder/EmptyHint.tsx

@@ -1,4 +1,5 @@
 import { Layers, SlidersHorizontal } from "lucide-react"
+import { EmptyState } from "../../components/EmptyState.js"
 import { Button } from "../../primitives/button.js"
 import type { LayoutBuilderLabels } from "./labels.js"
 
@@ -6,6 +7,10 @@ import type { LayoutBuilderLabels } from "./labels.js"
 // Empty hint — shown on the Layout view before any widget is reachable
 // -------------------------------------------------------------------------- //
 
+/**
+ * The builder's empty state. Its one next step (open the data sources) is the
+ * blue primary button: CI §9 "Leer: Empty-State-Karte mit blauem CTA".
+ */
 export function EmptyHint({
   L,
   onGotoPipeline,
@@ -14,16 +19,16 @@ export function EmptyHint({
   onGotoPipeline: () => void
 }) {
   return (
-    <div className="border-muted-foreground/30 text-muted-foreground flex flex-col items-center gap-2 rounded-md border border-dashed p-10 text-sm">
-      <Layers className="size-5" />
-      <p>No widgets reachable yet.</p>
-      <p className="text-xs">
-        Open the <span className="font-medium">{L.viewPipelineTab}</span> tab to seed keys or add a
-        pipeline step — the palette unlocks as soon as a widget's contract is satisfied.
-      </p>
-      <Button variant="outline" size="sm" onClick={onGotoPipeline} className="mt-1">
-        <SlidersHorizontal /> Open {L.viewPipelineTab}
-      </Button>
-    </div>
+    <EmptyState
+      className="rounded-md border border-dashed"
+      icon={<Layers />}
+      title={L.emptyHintTitle}
+      description={L.emptyHintBody}
+      action={
+        <Button size="sm" onClick={onGotoPipeline}>
+          <SlidersHorizontal aria-hidden="true" /> {L.openDataSources}
+        </Button>
+      }
+    />
   )
 }