feat(app-shell): Automations pillar — rail grouped by object, flow meta and switch in the item header, Canvas · Variables · Runs · Problems · Debug tabs (objectui#12454)

.changeset/12454-automations-pillar-layout.md

@@ -0,0 +1,11 @@
+---
+'@object-ui/app-shell': minor
+---
+
+The Studio's Automations pillar takes the redesign's layout (objectui#12454, epic objectui#12446).
+
+- **The rail groups flows by the object each one is about**, in the order of the objects' labels, with a count per group and a trailing "No object" group. The object is read off the flow's own definition as the metadata list serves it: the Start node's object, else the first data node of the flow on one of the package's objects, else the first record it writes. Groups fold; a search filters within them.
+- **Each row** carries a glyph for its trigger kind (record-triggered, scheduled, screen, autolaunched), its label on one line (the row's title holds it whole, with its kind and status), and a 6 px status dot (green On, grey Not running here, amber Refused, a hollow ring Off). A legend under the rail names them.
+- **The item header** carries the flow's Trigger, Status, Run as and version, the meta the canvas's info bar used to show, and the Enabled switch, whose title carries "Off by default · review before enabling".
+- **A tab row** — Canvas, Variables, Runs, Problems (with its count) and Debug — replaces the info bar's buttons. Variables, Runs and Problems open as the tab's body; picking a problem opens the canvas on its element. Debug keeps the canvas beside the simulator.
+- **The canvas** sits flush under the tabs on the sidebar surface with a 20 px dot grid, and its zoom control floats at the bottom right; the metadata-admin designer's flow preview shares the canvas look and keeps its info bar.

packages/app-shell/src/views/metadata-admin/i18n.ts

@@ -3477,6 +3477,14 @@ const ENGINE_STRINGS_EN: Record<string, string> = {
   'engine.studio.auto.emptyLine2': 'and its configuration appears here.',
   'engine.studio.auto.designersMissing':
     'No metadata designers are registered in this session, so this flow cannot be designed here.',
+  // objectui#12454 — the rail's groups and legend: a flow's trigger kind, and
+  // the trailing group of flows that name no object.
+  'engine.studio.auto.group.noObject': 'No object',
+  'engine.studio.auto.kind.record': 'Record-triggered',
+  'engine.studio.auto.kind.scheduled': 'Scheduled',
+  'engine.studio.auto.kind.screen': 'Screen',
+  'engine.studio.auto.kind.autolaunched': 'Autolaunched',
+  'engine.studio.auto.legend': 'Legend',
   // Access pillar
   'engine.studio.access.created': 'Permission set “{label}” created',
   'engine.studio.access.title': 'Permission matrix',
@@ -6616,6 +6624,12 @@ const ENGINE_STRINGS_ZH: Record<string, string> = {
   'engine.studio.auto.emptyLine1': '在画布里点选一个节点,',
   'engine.studio.auto.emptyLine2': '它的配置会在这里显示。',
   'engine.studio.auto.designersMissing': '本次会话没有注册任何元数据设计器,因此无法在这里设计该流程。',
+  'engine.studio.auto.group.noObject': '无对象',
+  'engine.studio.auto.kind.record': '记录触发',
+  'engine.studio.auto.kind.scheduled': '定时',
+  'engine.studio.auto.kind.screen': '交互页面',
+  'engine.studio.auto.kind.autolaunched': '自动启动',
+  'engine.studio.auto.legend': '图例',
   // Access pillar
   'engine.studio.access.created': '权限集「{label}」已创建',
   'engine.studio.access.title': '权限矩阵',

packages/app-shell/src/views/metadata-admin/previews/FlowCanvas.tsx

@@ -875,9 +875,9 @@ export function FlowCanvas({
           )}
         </div>
       )}
-      {/* Toolbar */}
-      <div className="absolute right-2 top-2 z-30 flex items-center gap-1.5">
-        {editable && (
+      {/* Toolbar: Add node at the top right, while the canvas is editable. */}
+      {editable && (
+        <div className="absolute right-3 top-3 z-30 flex items-center gap-1.5">
           <NodePalette {...paletteFor('toolbar')} onPick={(type) => addAfter(selectedId, type)}>
             <button
               type="button"
@@ -887,39 +887,42 @@ export function FlowCanvas({
               {tr('engine.inspector.add.node', locale)}
             </button>
           </NodePalette>
-        )}
-        <div className="flex items-center rounded-lg border bg-background/90 shadow-sm backdrop-blur-sm">
-          <button
-            type="button"
-            title={tr('engine.flowCanvas.zoomOut', locale)}
-            aria-label={tr('engine.flowCanvas.zoomOut', locale)}
-            onClick={() => setZoom((z) => clampZoom(z - 0.15))}
-            className="inline-flex h-7 w-7 items-center justify-center text-muted-foreground hover:text-foreground"
-          >
-            <ZoomOut className="h-3.5 w-3.5" />
-          </button>
-          <span className="w-10 text-center text-[11px] tabular-nums text-muted-foreground">
-            {Math.round(zoom * 100)}%
-          </span>
-          <button
-            type="button"
-            title={tr('engine.flowCanvas.zoomIn', locale)}
-            aria-label={tr('engine.flowCanvas.zoomIn', locale)}
-            onClick={() => setZoom((z) => clampZoom(z + 0.15))}
-            className="inline-flex h-7 w-7 items-center justify-center text-muted-foreground hover:text-foreground"
-          >
-            <ZoomIn className="h-3.5 w-3.5" />
-          </button>
-          <button
-            type="button"
-            title={tr('engine.flowCanvas.fit', locale)}
-            aria-label={tr('engine.flowCanvas.fit', locale)}
-            onClick={fitToView}
-            className="inline-flex h-7 w-7 items-center justify-center border-l text-muted-foreground hover:text-foreground"
-          >
-            <Maximize2 className="h-3.5 w-3.5" />
-          </button>
         </div>
+      )}
+      {/* objectui#12454 — the zoom control floats at the bottom right: −,
+          the percentage, +, then fit after a divider. */}
+      <div className="absolute bottom-4 right-4 z-30 flex items-center gap-0.5 rounded-lg border bg-background p-[3px] shadow-sm">
+        <button
+          type="button"
+          title={tr('engine.flowCanvas.zoomOut', locale)}
+          aria-label={tr('engine.flowCanvas.zoomOut', locale)}
+          onClick={() => setZoom((z) => clampZoom(z - 0.15))}
+          className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <ZoomOut className="h-3.5 w-3.5" />
+        </button>
+        <span className="min-w-[44px] text-center text-xs tabular-nums text-foreground/80">
+          {Math.round(zoom * 100)}%
+        </span>
+        <button
+          type="button"
+          title={tr('engine.flowCanvas.zoomIn', locale)}
+          aria-label={tr('engine.flowCanvas.zoomIn', locale)}
+          onClick={() => setZoom((z) => clampZoom(z + 0.15))}
+          className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <ZoomIn className="h-3.5 w-3.5" />
+        </button>
+        <span aria-hidden className="mx-0.5 h-[18px] w-px bg-border" />
+        <button
+          type="button"
+          title={tr('engine.flowCanvas.fit', locale)}
+          aria-label={tr('engine.flowCanvas.fit', locale)}
+          onClick={fitToView}
+          className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <Maximize2 className="h-3.5 w-3.5" />
+        </button>
       </div>
 
       {/* Viewport */}
@@ -938,18 +941,15 @@ export function FlowCanvas({
           onBgPointerUp(e);
           onNodePointerUp(e);
         }}
-        className={cn(
-          'h-full w-full cursor-grab outline-none active:cursor-grabbing',
-          'bg-muted/15 dark:bg-background/30',
-          // Subtle inset vignette gives the canvas surface depth.
-          'shadow-[inset_0_0_90px_rgba(0,0,0,0.05)]',
-        )}
+        // objectui#12454 — the sidebar surface with a 20 px dot grid, as the
+        // redesign's canvas reads; the dots stay on the border token.
+        className="h-full w-full cursor-grab bg-sidebar outline-none active:cursor-grabbing"
         style={{
           // Dot grid tied to pan + zoom so the surface tracks the diagram
           // (rather than floating behind a static texture).
           backgroundImage:
             'radial-gradient(circle at 1px 1px, hsl(var(--border)) 1px, transparent 0)',
-          backgroundSize: `${18 * zoom}px ${18 * zoom}px`,
+          backgroundSize: `${20 * zoom}px ${20 * zoom}px`,
           backgroundPosition: `${pan.x}px ${pan.y}px`,
         }}
       >