@vention/vention-skills 0.9.18 → 0.9.20

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "vention",
-  "version": "0.9.18",
+  "version": "0.9.20",
   "description": "Vention skills for coding agents: write MachineLogic applications, build machine designs, and diagnose deployed machines.",
   "author": {
     "name": "Vention"

package/README.md

@@ -1,6 +1,6 @@
 # Vention skills
 
-Version 0.9.18. Skills for coding agents that work with Vention machines, packaged as one plugin, `vention`, in the `vention-skills` marketplace.
+Version 0.9.20. Skills for coding agents that work with Vention machines, packaged as one plugin, `vention`, in the `vention-skills` marketplace.
 
 | Skill                       | What it does                                                                                                                         |
 | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/vention-skills",
-  "version": "0.9.18",
+  "version": "0.9.20",
   "description": "Vention skills for coding agents: write MachineLogic applications, build machine designs, and diagnose deployed machines.",
   "license": "MIT",
   "type": "module",

package/plugin.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
   "name": "vention",
-  "version": "0.9.18",
+  "version": "0.9.20",
   "description": "Vention skills for coding agents: write MachineLogic applications, build machine designs, and diagnose deployed machines.",
   "author": {
     "name": "Vention"

package/skills/vention-design/SKILL.md

@@ -3,7 +3,7 @@ name: vention-design
 description: Create, build and edit Vention machine designs and design graphs for agentic layout. Use when the user wants to start a new design, lay out an automation cell, add or reposition components in a Vention design, generate a machine layout from a description, add or place a floor plan image under a design, list a design's versions, or inspect an existing design graph. Trigger on MachineBuilder designs, design graphs, assembly graphs, extrusions, actuators, robot mounting, cell footprints, floor plans, or a machine-builder URL.
 license: MIT
 metadata:
-  version: "0.9.18"
+  version: "0.9.20"
   author: Vention
 ---
 

package/skills/vention-machine-logic/SKILL.md

@@ -3,7 +3,7 @@ name: vention-machine-logic
 description: Write, edit, validate, and deploy MachineLogic Python applications for Vention machines with the machine-logic-sdk and the Vention CLI. Load it before writing or changing any Python that talks to a Vention machine, however short, since device names and version-specific SDK calls come from here. Use to program a Vention machine or MachineMotion controller, drive actuators, conveyors, robots, pneumatics, or digital I/O, change an existing application, build a state machine, debug from logs, or pull, push, or link with the Vention CLI (vention or vn). Trigger on MachineLogic, machine-logic-sdk, MachineMotion, MachineBuilder applications, the Vention CLI, or a directory holding .machine-code-app-directory-info.json. Printing what the machine or robot holds now (positions, taught targets, calibration, I/O) is a program: files on disk hold only as-designed values. Not for explaining an existing machine or its configuration in words when no program is asked for, nor for Python that never touches the machine.
 license: MIT
 metadata:
-  version: "0.9.18"
+  version: "0.9.20"
   machine-logic-sdk: ">=3.0,<4"
   author: Vention
 ---

package/skills/vention-machine-logic-hmi/SKILL.md

@@ -3,7 +3,7 @@ name: vention-machine-logic-hmi
 description: Build or edit the custom operator HMI of a MachineLogic application, the React touch screen in customui/ that runs in MachineBuilder and on the MachineMotion pendant, wired to the application's Python process through vention-communication. Use when the user asks for an operator screen, a custom HMI or UI, a touch panel, start and stop buttons, live machine state on screen, or recipes an operator picks, for a Vention machine or inside a directory holding .machine-code-app-directory-info.json. Uses @vention/machine-ui, @vention/machine-apps-components and @vention/machine-logic-ui-sdk. Do not use for the no-code HMI Builder, or for the Python motion logic alone (that is vention-machine-logic).
 license: MIT
 metadata:
-  version: "0.9.18"
+  version: "0.9.20"
   author: Vention
 ---
 
@@ -152,7 +152,7 @@ The machine-apps-components README is behind its code: `NavigationBar` takes `Na
 
 - Wrap the app in `machineUiHmiTheme`.
 - Give the app an Operate page at `/`, any setup pages it needs (such as Recipes), and a Logs page: a `LogsPanel` fed by the Events stream, as the example's `logs-page.tsx` does, where the operator finds out why a cycle faulted. Nav labels name the page and never echo a top-bar action, and their icons don't suggest one. Never "Run", "Start" or a play icon: beside the top bar's Start, the operator reads it as a second Start button.
-- The Operate page is what the operator watches during a run, so it reads from across the cell. Copy the example's `operate-page.tsx` and adapt it rather than starting from a blank page. Top to bottom: a heading saying what the station is doing or the recipe running, the run's progress bar, which is the example's CycleProgress copied as it is (one segment per cycle, since a single `VentionProgressBar` cannot mark the cycles a Stop cancels), the settings for the next run (disabled while one runs), and one short paragraph on what Start and Stop do. Lay it out with `Box` or `Stack` gaps, each readout a label above its value in theme text variants. Never set `fontSize` or `lineHeight`: a value sized by hand overlaps its label.
+- The Operate page is what the operator watches during a run, so it reads from across the cell. Copy the example's `operate-page.tsx` and adapt it rather than starting from a blank page. While a run is on, show from top to bottom: the step in progress named inside a ring that fills against the last cycle's time, beside the recipe and the cycles done and rate; the cycle's steps as a row of tiles, the current one lit; and the run's progress bar. Copy the example's StepRing, StepRail and CycleProgress as they are, and publish the step and the cycle's elapsed time on the status stream as its enter_step method does. A single `VentionProgressBar` cannot mark the cycles a Stop cancels. Below them go the settings for the next run (disabled while one runs) and one short paragraph on what Start and Stop do. Leave out what the operator can neither change nor act on, such as axis stops, taught positions or device names: they are the program's constants, not the run's. Lay it out with `Box` or `Stack` gaps, each readout a label above its value in theme text variants. Never set `fontSize` or `lineHeight`: a value sized by hand overlaps its label.
 - Show each piece of information in one place only. The `StatusTopBar` already shows the state, so a page never repeats it, not even as a status indicator or an alert titled with the same word. A page adds only what the bar cannot say: the cause of a fault, what happens next, what to do.
 - The screen fits the pendant without scrolling: keep `body { margin: 0 }` from the example's `index.html`, or the full-viewport root overflows it. Only the page area between the two bars scrolls.
 - Exactly one way back to Control Center: the `NavigationBar`'s own button, which confirms before leaving. Keep `ui.showDefaultBackToControlCenterButton` `false` in `project.json`, or the pendant lays a second one over the screen.

package/skills/vention-machine-logic-hmi/examples/indexing-station-hmi/customui/package.json

@@ -15,9 +15,9 @@
     "@emotion/styled": "11.14.1",
     "@mui/material": "5.16.7",
     "@tabler/icons-react": "3.44.0",
-    "@vention/machine-apps-components": "1.26.11",
+    "@vention/machine-apps-components": "1.30.13",
     "@vention/machine-logic-ui-sdk": "0.43.17",
-    "@vention/machine-ui": "5.30.11",
+    "@vention/machine-ui": "6.6.12",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-router-dom": "6.30.3",

package/skills/vention-machine-logic-hmi/examples/indexing-station-hmi/customui/src/pages/operate-page.tsx

@@ -3,7 +3,7 @@ import { COLORS, VentionAlert, VentionSelect } from "@vention/machine-ui"
 import { useEffect, useState } from "react"
 import { client } from "../client"
 import type { Recipe, StationStatus } from "../gen/app_pb"
-import { canStart, errorText, isStopping } from "../station"
+import { STEPS, canStart, errorText, isStopping } from "../station"
 
 interface OperatePageProps {
   status: StationStatus | undefined
@@ -14,6 +14,108 @@ interface OperatePageProps {
 }
 
 const HATCHED = `repeating-linear-gradient(45deg, ${COLORS.slate[100]} 0 8px, ${COLORS.slate[200]} 8px 16px)`
+const RING_RADIUS = 52
+const RING_LENGTH = 2 * Math.PI * RING_RADIUS
+const TICK_MS = 250
+
+/** Seconds into the cycle, counted on from the last status so the ring moves between heartbeats. */
+function useCycleElapsed(status: StationStatus | undefined): number {
+  const [received, setReceived] = useState({ seconds: 0, at: 0 })
+  const [now, setNow] = useState(() => performance.now())
+  const running = status !== undefined && status.step !== ""
+  useEffect(() => setReceived({ seconds: status?.cycleElapsedSeconds ?? 0, at: performance.now() }), [status])
+  useEffect(() => {
+    if (!running) return
+    const timer = setInterval(() => setNow(performance.now()), TICK_MS)
+    return () => clearInterval(timer)
+  }, [running])
+  return running ? received.seconds + Math.max(0, now - received.at) / 1000 : 0
+}
+
+/** The step in progress, inside a ring that fills as the cycle runs against the last cycle's time. */
+function StepRing({ step, elapsed, expected, stopping }: { step: string; elapsed: number; expected: number; stopping: boolean }) {
+  const current = STEPS.find(candidate => candidate.name === step)
+  const StepIcon = current?.icon
+  const filled = expected > 0 ? Math.min(elapsed / expected, 1) : 0
+  const color = stopping ? COLORS.amber[500] : COLORS.blue[500]
+  return (
+    <Box sx={{ position: "relative", width: 220, height: 220, flexShrink: 0 }}>
+      <svg viewBox="0 0 120 120" width={220} height={220} aria-hidden="true">
+        <circle cx={60} cy={60} r={RING_RADIUS} fill="none" stroke={COLORS.slate[100]} strokeWidth={8} />
+        <circle
+          cx={60}
+          cy={60}
+          r={RING_RADIUS}
+          fill="none"
+          stroke={color}
+          strokeWidth={8}
+          strokeLinecap="round"
+          strokeDasharray={`${filled * RING_LENGTH} ${RING_LENGTH}`}
+          transform="rotate(-90 60 60)"
+        />
+      </svg>
+      <Box
+        sx={{
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 1,
+        }}
+      >
+        {StepIcon && <StepIcon size={36} color={color} />}
+        <Typography variant="heading18SemiBold">{current?.label ?? step}</Typography>
+        <Typography variant="paragraph18Medium">
+          {Math.floor(elapsed)} s{expected > 0 && ` of ~${Math.round(expected)} s`}
+        </Typography>
+      </Box>
+    </Box>
+  )
+}
+
+/** The cycle's steps in order: done ones green, the current one lit, the rest grey. */
+function StepRail({ step, stopping }: { step: string; stopping: boolean }) {
+  const currentIndex = STEPS.findIndex(candidate => candidate.name === step)
+  return (
+    <Box sx={{ display: "grid", gridTemplateColumns: `repeat(${STEPS.length}, minmax(0, 1fr))`, gap: 4 }}>
+      {STEPS.map(({ name, icon: StepIcon }, index) => {
+        const done = index < currentIndex
+        const current = index === currentIndex
+        const background = current ? (stopping ? COLORS.amber[500] : COLORS.blue[500]) : done ? COLORS.green[100] : COLORS.slate[100]
+        const iconColor = current ? "white" : done ? COLORS.green[700] : COLORS.slate[400]
+        return (
+          <Box key={name} sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
+            <Box
+              sx={{
+                width: "100%",
+                height: 64,
+                borderRadius: 2,
+                background,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <StepIcon size={32} color={iconColor} />
+            </Box>
+            <Typography variant={current ? "heading18SemiBold" : "paragraph18Medium"}>{name}</Typography>
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}
+
+function Counter({ label, value }: { label: string; value: string }) {
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1, padding: 4, borderRadius: 2, background: COLORS.slate[50] }}>
+      <Typography variant="paragraph18Medium">{label}</Typography>
+      <Typography variant="heading24SemiBold">{value}</Typography>
+    </Box>
+  )
+}
 
 /** Done cycles green, the current one amber while stopping, and the cycles Stop cancels hatched. */
 function CycleProgress({ cycle, cycleCount, stopping }: { cycle: number; cycleCount: number; stopping: boolean }) {
@@ -37,6 +139,8 @@ function CycleProgress({ cycle, cycleCount, stopping }: { cycle: number; cycleCo
 export function OperatePage({ status, connected, recipe, onRecipeChange, onError }: OperatePageProps) {
   const [recipes, setRecipes] = useState<Recipe[]>([])
   const stopping = isStopping(status, connected)
+  const elapsed = useCycleElapsed(status)
+  const running = status !== undefined && status.state.startsWith("Station_") && status.cycle > 0
 
   useEffect(() => {
     if (!connected) return
@@ -61,18 +165,33 @@ export function OperatePage({ status, connected, recipe, onRecipeChange, onError
           onPrimaryButtonClick={reset}
         />
       )}
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-        <Box sx={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 4 }}>
+      {running ? (
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 5 }}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 5 }}>
+            <StepRing step={status.step} elapsed={elapsed} expected={status.lastCycleSeconds} stopping={stopping} />
+            <Box sx={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+              <Typography variant="heading24SemiBold">{status.recipeName}</Typography>
+              {stopping && <Typography variant="paragraph18Medium">The emergency stop halts at once.</Typography>}
+              <Box sx={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: 4 }}>
+                <Counter label="Cycles done" value={`${status.cycle - 1} of ${status.cycleCount}`} />
+                <Counter
+                  label="Rate"
+                  value={status.lastCycleSeconds > 0 ? `${Math.round(3600 / status.lastCycleSeconds)} parts/h` : "After cycle 1"}
+                />
+              </Box>
+            </Box>
+          </Box>
+          <StepRail step={status.step} stopping={stopping} />
+          <CycleProgress cycle={status.cycle} cycleCount={status.cycleCount} stopping={stopping} />
+        </Box>
+      ) : (
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
           <Typography variant="heading24SemiBold">{status?.recipeName || "No recipe running"}</Typography>
-          {stopping && <Typography variant="paragraph18Medium">The emergency stop halts at once.</Typography>}
+          <Typography variant="paragraph18Medium">
+            Last cycle: {status && status.lastCycleSeconds > 0 ? `${status.lastCycleSeconds.toFixed(1)} s` : "none yet"}
+          </Typography>
         </Box>
-        {status?.state.startsWith("Station_") && status.cycle > 0 && (
-          <CycleProgress cycle={status.cycle} cycleCount={status.cycleCount} stopping={stopping} />
-        )}
-        <Typography variant="paragraph18Medium">
-          Last cycle: {status && status.lastCycleSeconds > 0 ? `${status.lastCycleSeconds.toFixed(1)} s` : "none yet"}
-        </Typography>
-      </Box>
+      )}
       <VentionSelect
         size="xx-large"
         variant="outlined"

package/skills/vention-machine-logic-hmi/examples/indexing-station-hmi/customui/src/station.ts

@@ -1,10 +1,19 @@
 import { ConnectError } from "@connectrpc/connect"
+import { IconArrowRight, IconHourglass, IconLock, IconLockOpen, type Icon } from "@tabler/icons-react"
 import { COLORS } from "@vention/machine-ui"
 import type { StationStatus } from "./gen/app_pb"
 
 // The storage RPCs record who changed each recipe.
 export const ACTOR = "operator"
 
+// One per enter_step call in server.py, in the same order and under the same name.
+export const STEPS: { name: string; label: string; icon: Icon }[] = [
+  { name: "Index", label: "Indexing the part", icon: IconArrowRight },
+  { name: "Clamp", label: "Clamping", icon: IconLock },
+  { name: "Dwell", label: "Dwelling", icon: IconHourglass },
+  { name: "Release", label: "Releasing", icon: IconLockOpen },
+]
+
 type StateDisplay = { label: string; color: string }
 
 const STATE_DISPLAY: Record<string, StateDisplay> = {

package/skills/vention-machine-logic-hmi/examples/indexing-station-hmi/proto/app.proto

@@ -158,8 +158,10 @@ message StationStatus {
   string recipe_name = 2;
   int32 cycle = 3;
   int32 cycle_count = 4;
-  double last_cycle_seconds = 5;
-  string fault = 6;
+  string step = 5;
+  double cycle_elapsed_seconds = 6;
+  double last_cycle_seconds = 7;
+  string fault = 8;
 }
 
 message Event {

package/skills/vention-machine-logic-hmi/examples/indexing-station-hmi/server.py

@@ -63,6 +63,8 @@ class StationStatus(BaseModel):
     recipe_name: str
     cycle: int
     cycle_count: int
+    step: str
+    cycle_elapsed_seconds: float
     last_cycle_seconds: float
     fault: str
 
@@ -89,6 +91,8 @@ class IndexingStation(StateMachine):
         self.machine: Optional[Machine] = None
         self.recipe: Optional[Recipe] = None
         self.cycle = 0
+        self.step = ""
+        self.cycle_started = 0.0
         self.last_cycle_seconds = 0.0
         self.fault_message = ""
         self.stop_requested = False
@@ -100,6 +104,8 @@ class IndexingStation(StateMachine):
             recipe_name=recipe.name if recipe else "",
             cycle=self.cycle,
             cycle_count=recipe.cycle_count if recipe else 0,
+            step=self.step,
+            cycle_elapsed_seconds=time.monotonic() - self.cycle_started if self.step else 0.0,
             last_cycle_seconds=self.last_cycle_seconds,
             fault=self.fault_message,
         )
@@ -111,6 +117,7 @@ class IndexingStation(StateMachine):
     @on_enter_state(BaseStates.READY.value)
     def enter_ready(self, _: object) -> None:
         self.fault_message = ""
+        self.step = ""
 
     @on_enter_state(States.station.running)
     def enter_running(self, _: object) -> None:
@@ -151,6 +158,11 @@ class IndexingStation(StateMachine):
         except Exception as error:
             await publish_event("error", "Clamp release failed", f"{error}. Check the clamp is open before the next run.")
 
+    async def enter_step(self, step: str) -> None:
+        # The HMI's STEPS in station.ts lists the same names, in this order.
+        self.step = step
+        await publish_status()
+
     async def run_cycles(self) -> None:
         recipe = self.recipe
         if recipe is None:
@@ -159,18 +171,21 @@ class IndexingStation(StateMachine):
             for cycle in range(1, recipe.cycle_count + 1):
                 if self.stop_requested:
                     break
-                started = time.monotonic()
                 self.cycle = cycle
-                await publish_status()
+                self.cycle_started = time.monotonic()
+                await self.enter_step("Index")
                 await asyncio.to_thread(self.index_part, recipe)
                 if self.stop_requested:
                     break
+                await self.enter_step("Clamp")
                 await asyncio.to_thread(self.clamp_part)
                 if self.stop_requested:
                     break
+                await self.enter_step("Dwell")
                 await asyncio.sleep(recipe.dwell_ms / 1000)
+                await self.enter_step("Release")
                 await asyncio.to_thread(self.release)
-                self.last_cycle_seconds = time.monotonic() - started
+                self.last_cycle_seconds = time.monotonic() - self.cycle_started
                 await publish_status()
                 await publish_event("info", f"Cycle {cycle}/{recipe.cycle_count} done", f"Took {self.last_cycle_seconds:.1f} s.")
             await asyncio.to_thread(self.release)

package/skills/vention-monitoring/SKILL.md

@@ -3,7 +3,7 @@ name: vention-monitoring
 description: Diagnose deployed Vention machines from controller state, history, health, and activity data. Use when the user reports a machine that is down, faulted, offline, slow, or underperforming, asks why a cycle time regressed, wants to interpret MachineMotion event data or drive and brake status, asks about OEE or uptime, or wants to know which machine in a fleet needs attention. Trigger on a MachineMotion serial number plus any complaint.
 license: MIT
 metadata:
-  version: "0.9.18"
+  version: "0.9.20"
   author: Vention
 ---