@vention/vention-skills 0.10.7 → 0.10.9

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "vention",
-  "version": "0.10.7",
+  "version": "0.10.9",
   "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.10.7. Skills for coding agents that work with Vention machines, packaged as one plugin, `vention`, in the `vention-skills` marketplace.
+Version 0.10.9. 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.10.7",
+  "version": "0.10.9",
   "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.10.7",
+  "version": "0.10.9",
   "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.10.7"
+  version: "0.10.9"
   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.10.7"
+  version: "0.10.9"
   machine-logic-sdk: ">=3.0,<4"
   author: Vention
 ---
@@ -147,7 +147,7 @@ print(f"cycle {cycle} took {elapsed:.1f} s")     # the work that was worth not b
 robot.wait_for_motion_completion()               # robots take no arguments
 ```
 
-Poll `state.move_in_progress` only when something has to be serviced mid-travel, and still finish on the wait. `move_continuous_async` is the exception to all of it: it has no target to arrive at, so it ends at `stop()`, never at a wait.
+Poll `state.move_in_progress` only when something has to be serviced mid-travel, such as a Stop or a timeout, and still finish on the wait: the flag can read False before the move has begun, so a polling loop alone may return before the axis arrives. `move_continuous_async` is the exception to all of it: it has no target to arrive at, so it ends at `stop()`, never at a wait.
 
 ## Reacting to an input edge
 
@@ -243,8 +243,8 @@ Each example is a standalone `main.py` whose module docstring names the device n
 2. Run `uv venv --python 3.10 && uv pip install -r requirements-dev.txt`, then `.venv/bin/pyright`. The venv runs the target's Python and the SDK the application pins, so a wrong name or signature shows up against what the target runs. The first pyright run may download Node if none is on the PATH, so a slow or offline first run is not a type error. Fix every error and run it again until it is clean.
 3. pyright cannot check a name passed as a string. Check every name passed to `get_*` and `move_to_target*` with a case-sensitive `grep -F '"<name>"'` against `.vention-design-configuration.json` or `.vention-design-scene-assets.json`, and fix any that does not match exactly.
 4. If `uv` is missing or the install fails, tell the user the code is unvalidated. Never report a check you could not run as passed.
-5. `vention push`, then run the application on the digital twin from MachineBuilder before any hardware run. One or two full cycles prove the cycle; each extra one costs a cycle time and shows nothing the first two did not. Run them at 100 % of the speed setting, chosen for that run: nothing on the twin can be hurt. Never raise the setting's default to save time, since the first hardware run starts from it.
-6. Read the output with `vention logs` once the run ends, rather than following it while the cycles play. `vention logs` prints only the most recent lines, so a count of matching lines can stop rising before the run ends. To wait for a cycle or a step, sleep once for its known cycle time, then read `vention logs` once. Never loop over `vention logs` waiting for a line to appear, and never end your turn while a background wait is running. MachineLogic failures name the device and the reason; read the log before proposing a change.
+5. `vention push`, then run the application on the digital twin from MachineBuilder before any hardware run. One or two full cycles prove the cycle; each extra one costs a cycle time and shows nothing the first two did not. Run them at 100 % of the speed setting, chosen for that run: nothing on the twin can be hurt.
+6. Read the output with `vention logs` once the run ends, rather than following it while the cycles play. `vention logs` prints only the most recent lines, so a count of matching lines can stop rising before the run ends. Print each cycle's measured time. When the cycle time is unknown, sleep once for one cycle's estimate, read `vention logs` once for the measured time, then sleep once for the cycles left: a rounded-up guess for the whole run wastes the difference. Never loop over `vention logs` waiting for a line to appear, and never end your turn while a background wait is running. MachineLogic failures name the device and the reason; read the log before proposing a change.
 7. Check a motion from the log, not by watching the twin: `print` the robot's joint angles or the axis position at each step, then compare them with what the step should reach. For a repeated or oscillating motion, such as a wave, print the joint angles at each end of the swing, so the log alone shows how far it moved and which joints moved.
 8. Pressing the emergency stop on the digital twin's pendant does nothing, so skip that test there. Tell the user the e-stop path is untested until the first run on the real cell.
 9. Show the user the diff before pushing over an application they did not write in this session.
@@ -263,7 +263,7 @@ The controller keeps its own scene. Positions re-taught on the pendant and the c
 This code drives physical machinery that can injure someone.
 
 - Before a run on real hardware, tell the user plainly what will move and how far.
-- Give an application that will run on hardware a speed setting that scales every move and goes up to 100 %, even when its steps don't divide 100 (15, 30 … 90, 100), and start its first run low.
+- Give an application that will run on hardware a speed setting that scales every move and goes up to 100 %, even when its steps don't divide 100 (15, 30 … 90, 100). After deploying to hardware, tell the user to run the first cycles on the machine at a low speed setting, with a hand on the emergency stop, before raising it.
 - Never remove, bypass, or work around an emergency stop, safety interlock, light curtain, door switch, or speed limit, and never suggest doing so, even temporarily, even for testing. If a safety device is blocking a program, say so and stop.
 - Never write code that starts motion automatically on power-up unless the user has explicitly asked for it and confirmed the cell is guarded.
 

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.10.7"
+  version: "0.10.9"
   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 Settings page holding the speed setting of an app that runs on hardware), 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. 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. The example is part of this skill, so open and copy it even when the user says not to copy code from their computer: copy its 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, here and in the Start confirmation: 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.
+- 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. In every state (idle, starting, running, stopping, after a run, fault, disconnected) show the same regions from top to bottom, never swapped for a placeholder when no cycle runs: the step in progress named inside a ring that fills against the last cycle's time, or by steps done while no cycle has been timed yet, with the elapsed time counting up and no indeterminate spinner, 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. Before a run they show the next run's plan, after one its result until the next Start, and on a fault the step that faulted. The example is part of this skill, so open and copy it even when the user says not to copy code from their computer: copy its StepRing, StepRail and CycleProgress as they are, and publish the step, the cycle's elapsed time and `cycles_done` on the status stream as its `enter_step` and `run_cycles` do. 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, here and in the Start confirmation: 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.
@@ -171,7 +171,7 @@ The machine-apps-components README is behind its code: `NavigationBar` takes `Na
 
 1. In the application directory, with the `requirements.txt` packages installed locally: `python3 -c "import server"` to re-emit `proto/app.proto`, and commit it if `git status` shows a change.
 2. In `customui/`: `npm install`, `npm run build`, then `npx tsc --noEmit`, and check that `ui/index.html` exists and loads its script from `./assets/`, a relative path.
-3. `vention push`, then open the HMI from the MachineLogic tab in MachineBuilder and run it on the digital twin before any hardware run.
+3. `vention push`, then open the HMI from the MachineLogic tab in MachineBuilder and run it on the digital twin before any hardware run. Inside the MachineBuilder tab the browser's element search can't see the HMI's controls, so take a screenshot and tap by coordinates, and take a fresh screenshot after each tap since the layout moves.
 4. Read `vention logs` when a command fails; the server's errors land there. On a real controller, read them as the `vention-machine-logic` skill's "Deploying to a real cell" says.
 
 ## Safety
@@ -180,7 +180,7 @@ The HMI drives physical machinery that can injure someone.
 
 - Start never fires on page load, on reconnect, or from a stream message. Only an operator's tap, confirmed in a modal, starts motion.
 - Start and Stop live in the `StatusTopBar`, so they are on every page. Do not repeat them on a page. Raise the bar above `theme.zIndex.modal`, as the example's `app.tsx` does, or an open `VentionModal` covers Stop.
-- Stop stays enabled unless the station is known to be ready or already stopping. That includes while the stream is disconnected: a dropped stream may hide a moving machine. Every other command is disabled while disconnected.
+- Stop stays enabled unless the station is known to be ready or already stopping, as the example's `canStop` does. A fault is neither, so Stop stays enabled there, and so it does while the stream is disconnected: a dropped stream may hide a moving machine. Every other command is disabled while disconnected.
 - A tap on Stop shows at once. While the station stops, the Stop button reads "Stopping…" (derive that label from the streamed state and `connected`, as the example's `isStopping(status, connected)` does, never from a tapped flag alone: once the stream drops it reads "Stop" again and stays pressable), the Operate page's progress bar marks where the run now ends (the cycle in progress amber, the cancelled ones hatched and struck through), and a line by the heading says the emergency stop halts at once. Say it on the screen the operator already watches rather than in a separate alert.
 - Send Start with a `timeoutMs` and an abort signal, and abort it when the stream drops. A Start the operator can no longer see must not land later; say it was not confirmed and to check the station.
 - The HMI never offers a way around an emergency stop, safety interlock, light curtain or guard, not even a hidden one for testing.

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 { STEPS, canStart, errorText, isStopping } from "../station"
+import { STEPS, canStart, errorText } from "../station"
 
 interface OperatePageProps {
   status: StationStatus | undefined
@@ -13,31 +13,66 @@ interface OperatePageProps {
   onError: (message: string) => void
 }
 
+/** What the page shows. The same regions render in every phase; only their content changes. */
+type Phase = "idle" | "starting" | "running" | "stopping" | "done" | "fault"
+
 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
+const LIT: Partial<Record<Phase, string>> = { running: COLORS.blue[500], stopping: COLORS.amber[500], fault: COLORS.red[600] }
+
+function phaseOf(status: StationStatus | undefined): Phase {
+  if (status === undefined) return "idle"
+  if (status.state === "fault") return "fault"
+  if (status.state === "Station_stopping") return "stopping"
+  if (status.state === "Station_running") return status.cycle > 0 ? "running" : "starting"
+  return status.recipeName === "" ? "idle" : "done"
+}
 
-/** Seconds into the cycle, counted on from the last status so the ring moves between heartbeats. */
-function useCycleElapsed(status: StationStatus | undefined): number {
+/** The ring's text when it names no step of a cycle: the next run's first step, the start, or how the last run ended. */
+function ringLabel(phase: Phase, status: StationStatus | undefined): string | undefined {
+  if (phase === "idle") return `Next: ${STEPS[0].label}`
+  if (phase === "starting" && status?.step === "") return "Starting"
+  if (phase !== "done" || status === undefined) return undefined
+  const { cyclesDone, cycleCount } = status
+  return cyclesDone === cycleCount ? `${cycleCount} of ${cycleCount} done` : `Stopped after ${cyclesDone} of ${cycleCount}`
+}
+
+/** Seconds into the cycle, counted on from the last status so the ring moves between heartbeats; frozen while `ticking` is false. */
+function useCycleElapsed(status: StationStatus | undefined, ticking: boolean): 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
+    if (!ticking) 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
+  }, [ticking])
+  return received.seconds + Math.max(0, now - received.at) / 1000
 }
 
-/** 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 }) {
+/** The step in progress, inside a ring that fills against the last cycle's time, or by steps done until a cycle has been timed. `label` replaces the step's name. */
+function StepRing({
+  step,
+  elapsed,
+  expected,
+  phase,
+  label,
+}: {
+  step: string
+  elapsed: number
+  expected: number
+  phase: Phase
+  label?: string
+}) {
+  const currentIndex = STEPS.findIndex(candidate => candidate.name === step)
   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]
+  const cycling = phase === "running" || phase === "stopping"
+  const timedFill = expected > 0 ? Math.min(elapsed / expected, 1) : Math.max(currentIndex, 0) / STEPS.length
+  const filled = phase === "done" || phase === "fault" ? 1 : cycling ? timedFill : 0
+  const color = LIT[phase] ?? COLORS.slate[400]
   return (
     <Box sx={{ position: "relative", width: 220, height: 220, flexShrink: 0 }}>
       <svg viewBox="0 0 120 120" width={220} height={220} aria-hidden="true">
@@ -62,28 +97,33 @@ function StepRing({ step, elapsed, expected, stopping }: { step: string; elapsed
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
+          textAlign: "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>
+        <Typography variant="heading18SemiBold">{label ?? current?.label ?? step}</Typography>
+        {cycling && (
+          <Typography variant="paragraph18Medium">
+            {Math.floor(elapsed)} s{expected > 0 && ` of ~${Math.round(expected)} s`}
+          </Typography>
+        )}
+        {cycling && expected === 0 && <Typography variant="paragraph18Medium">Timing this cycle</Typography>}
+        {phase === "fault" && <Typography variant="paragraph18Medium">Faulted</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 }) {
+/** The cycle's steps in order: done ones green, the current one lit in the phase's color, the rest grey. */
+function StepRail({ step, phase }: { step: string; phase: Phase }) {
   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 background = current ? (LIT[phase] ?? COLORS.slate[400]) : 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 }}>
@@ -117,20 +157,31 @@ function Counter({ label, value }: { label: string; value: string }) {
   )
 }
 
-/** 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 }) {
-  const cancelled = stopping && cycleCount > cycle
+/** Done cycles green, the one in progress lit in the phase's color, and the cycles Stop cancels hatched. */
+function CycleProgress({ cycle, done, cycleCount, phase }: { cycle: number; done: number; cycleCount: number; phase: Phase }) {
+  const inCycle = (phase === "running" || phase === "stopping" || phase === "fault") && cycle > 0
+  const finished = inCycle ? cycle - 1 : done
+  const rest = cycleCount - finished - (inCycle ? 1 : 0)
+  const cancelled = (phase === "stopping" || phase === "done") && rest > 0
   const segment = (count: number, background: string) => <Box sx={{ flex: count, height: 16, borderRadius: 1, background }} />
+  const total = phase === "stopping" && cancelled ? <s>{cycleCount}</s> : cycleCount
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
       <Box sx={{ display: "flex", gap: 1 }}>
-        {cycle > 1 && segment(cycle - 1, COLORS.green[500])}
-        {segment(1, stopping ? COLORS.amber[500] : COLORS.green[200])}
-        {cycleCount > cycle && segment(cycleCount - cycle, cancelled ? HATCHED : COLORS.slate[100])}
+        {finished > 0 && segment(finished, COLORS.green[500])}
+        {inCycle && segment(1, phase === "running" ? COLORS.green[200] : (LIT[phase] ?? COLORS.slate[400]))}
+        {(rest > 0 || cycleCount === 0) && segment(Math.max(rest, 1), cancelled ? HATCHED : COLORS.slate[100])}
       </Box>
       <Typography variant="heading18SemiBold">
-        Cycle {cycle} of {cancelled ? <s>{cycleCount}</s> : cycleCount}
-        {stopping && ", stopping after the move in progress"}
+        {phase === "idle" && (cycleCount > 0 ? `Next run: ${cycleCount} cycle${cycleCount === 1 ? "" : "s"}` : "Next run: choose a recipe")}
+        {phase === "done" && "Last run, until the next Start"}
+        {phase === "fault" && `Cycle ${cycle} of ${cycleCount} faulted`}
+        {(phase === "starting" || phase === "running" || phase === "stopping") && (
+          <>
+            {cycle > 0 ? `Cycle ${cycle}` : "0"} of {total}
+            {phase === "stopping" && ", stopping after the move in progress"}
+          </>
+        )}
       </Typography>
     </Box>
   )
@@ -138,9 +189,10 @@ 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
+  const phase = phaseOf(status)
+  const elapsed = useCycleElapsed(status, connected && (phase === "running" || phase === "stopping"))
+  const idle = phase === "idle" || status === undefined
+  const lastCycleSeconds = status?.lastCycleSeconds ?? 0
 
   useEffect(() => {
     if (!connected) return
@@ -165,33 +217,35 @@ export function OperatePage({ status, connected, recipe, onRecipeChange, onError
           onPrimaryButtonClick={reset}
         />
       )}
-      {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 sx={{ display: "flex", flexDirection: "column", gap: 5, opacity: connected ? 1 : 0.5 }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 5 }}>
+          <StepRing
+            step={idle ? STEPS[0].name : status.step}
+            elapsed={elapsed}
+            expected={lastCycleSeconds}
+            phase={phase}
+            label={ringLabel(phase, status)}
+          />
+          <Box sx={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+            <Typography variant="heading24SemiBold">{idle ? (recipe?.name ?? "No recipe chosen") : status.recipeName}</Typography>
+            {phase === "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={idle ? "–" : `${status.cyclesDone} of ${status.cycleCount}`} />
+              <Counter
+                label="Rate"
+                value={lastCycleSeconds > 0 ? `${Math.round(3600 / lastCycleSeconds)} parts/h` : idle ? "–" : "After cycle 1"}
+              />
             </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>
-          <Typography variant="paragraph18Medium">
-            Last cycle: {status && status.lastCycleSeconds > 0 ? `${status.lastCycleSeconds.toFixed(1)} s` : "none yet"}
-          </Typography>
         </Box>
-      )}
+        <StepRail step={idle ? "" : status.step} phase={phase} />
+        <CycleProgress
+          cycle={status?.cycle ?? 0}
+          done={status?.cyclesDone ?? 0}
+          cycleCount={idle ? (recipe?.cycleCount ?? 0) : status.cycleCount}
+          phase={phase}
+        />
+      </Box>
       <VentionSelect
         size="xx-large"
         variant="outlined"

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

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

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

@@ -63,6 +63,7 @@ class StationStatus(BaseModel):
     recipe_name: str
     cycle: int
     cycle_count: int
+    cycles_done: int = 0
     step: str
     cycle_elapsed_seconds: float
     last_cycle_seconds: float
@@ -91,6 +92,7 @@ class IndexingStation(StateMachine):
         self.machine: Optional[Machine] = None
         self.recipe: Optional[Recipe] = None
         self.cycle = 0
+        self.cycles_done = 0
         self.step = ""
         self.cycle_started = 0.0
         self.last_cycle_seconds = 0.0
@@ -104,6 +106,7 @@ class IndexingStation(StateMachine):
             recipe_name=recipe.name if recipe else "",
             cycle=self.cycle,
             cycle_count=recipe.cycle_count if recipe else 0,
+            cycles_done=self.cycles_done,
             step=self.step,
             cycle_elapsed_seconds=time.monotonic() - self.cycle_started if self.step else 0.0,
             last_cycle_seconds=self.last_cycle_seconds,
@@ -186,6 +189,7 @@ class IndexingStation(StateMachine):
                 await self.enter_step("Release")
                 await asyncio.to_thread(self.release)
                 self.last_cycle_seconds = time.monotonic() - self.cycle_started
+                self.cycles_done = cycle
                 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)
@@ -248,6 +252,7 @@ async def start(request: StartRequest) -> CommandResponse:
         return CommandResponse(accepted=False, message=f"no recipe {request.recipe_id}")
     station.recipe = recipe
     station.cycle = 0
+    station.cycles_done = 0
     station.trigger(Triggers.run.name)
     return CommandResponse(accepted=True, message=f"running {recipe.name}")
 

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.10.7"
+  version: "0.10.9"
   author: Vention
 ---