@vention/vention-skills 0.1.0

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

@@ -0,0 +1,34 @@
+{
+  "name": "indexing-station-hmi",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "prebuild": "rm -rf src/gen && buf generate ../proto && chmod -R g+w src/gen",
+    "build": "esbuild src/main.tsx --bundle --outdir=../ui/assets --format=esm --target=esnext --loader:.tsx=tsx --loader:.ts=ts --loader:.css=css --splitting --entry-names=main --chunk-names=[name]-[hash] && sed 's|/src/main.tsx|./assets/main.js|g' index.html | sed 's|</head>|<link rel=\"stylesheet\" href=\"./assets/main.css\"></head>|g' > ../ui/index.html && chmod -R g+w ../ui",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@bufbuild/protobuf": "2.12.0",
+    "@connectrpc/connect": "2.1.1",
+    "@connectrpc/connect-web": "2.1.1",
+    "@emotion/react": "11.14.0",
+    "@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-logic-ui-sdk": "0.43.17",
+    "@vention/machine-ui": "5.30.11",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-router-dom": "6.30.3",
+    "tss-react": "4.9.21"
+  },
+  "devDependencies": {
+    "@bufbuild/buf": "1.70.0",
+    "@bufbuild/protoc-gen-es": "2.12.0",
+    "@types/react": "17.0.92",
+    "@types/react-dom": "17.0.26",
+    "esbuild": "0.28.1",
+    "typescript": "5.9.3"
+  }
+}

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

@@ -0,0 +1,152 @@
+import { Box } from "@mui/material"
+import { IconBook, IconHistory, IconPlayerPlay, IconPlayerPlayFilled, IconPlayerStopFilled } from "@tabler/icons-react"
+import { NavigationBar, StatusTopBar } from "@vention/machine-apps-components"
+import type { LogEntry, LogType } from "@vention/machine-apps-components"
+import { COLORS, VentionAlert, VentionModal } from "@vention/machine-ui"
+import { useEffect, useRef, useState } from "react"
+import { Navigate, Route, Routes } from "react-router-dom"
+import { client, openEvents, openStatus, STATUS_STALL_MS } from "./client"
+import type { Event, Recipe } from "./gen/app_pb"
+import { LogsPage } from "./pages/logs-page"
+import { RecipesPage } from "./pages/recipes-page"
+import { RunPage } from "./pages/run-page"
+import { canStart, canStop, describeState, errorText } from "./station"
+import { useStream } from "./use-stream"
+
+// Events are kept in memory from when the HMI opened, so the cap bounds a long shift.
+const MAX_LOG_ENTRIES = 500
+const NAV_ICON_SIZE = 42
+const TOP_BAR_ICON_SIZE = 32
+// A Start that has not been answered by then is abandoned rather than left to land later.
+const START_TIMEOUT_MS = 5000
+
+function toLogLevel(level: string): LogType {
+  if (level === "error") return "error"
+  if (level === "warning" || level === "warn") return "warning"
+  return "info"
+}
+
+function useEventLog(): LogEntry[] {
+  const { value: latestEvent } = useStream<Event>(openEvents)
+  const [entries, setEntries] = useState<LogEntry[]>([])
+  const nextId = useRef(0)
+
+  useEffect(() => {
+    if (latestEvent === undefined) return
+    nextId.current += 1
+    const entry: LogEntry = {
+      id: String(nextId.current),
+      date: latestEvent.timestamp,
+      level: toLogLevel(latestEvent.level),
+      code: latestEvent.level.toUpperCase(),
+      message: latestEvent.message,
+      description: latestEvent.detail,
+    }
+    setEntries(previous => [entry, ...previous].slice(0, MAX_LOG_ENTRIES))
+  }, [latestEvent])
+
+  return entries
+}
+
+export function App() {
+  const { value: status, connected } = useStream(openStatus, STATUS_STALL_MS)
+  const logEntries = useEventLog()
+  const [commandError, setCommandError] = useState("")
+  const state = describeState(status, connected)
+
+  const [recipe, setRecipe] = useState<Recipe | undefined>(undefined)
+  const [confirmingStart, setConfirmingStart] = useState(false)
+  const startRequest = useRef<AbortController | undefined>(undefined)
+  const startable = canStart(status, connected) && recipe !== undefined
+
+  useEffect(() => {
+    if (!connected) startRequest.current?.abort()
+  }, [connected])
+
+  const start = async () => {
+    setConfirmingStart(false)
+    if (recipe === undefined) return
+    const controller = new AbortController()
+    startRequest.current = controller
+    try {
+      const response = await client.start({ recipeId: recipe.id }, { signal: controller.signal, timeoutMs: START_TIMEOUT_MS })
+      if (!response.accepted) setCommandError(`Start refused: ${response.message}`)
+    } catch (error) {
+      setCommandError(`Start not confirmed: ${errorText(error)}. Check the station state before starting again.`)
+    }
+  }
+
+  const stop = () => {
+    client.trigger_Stop({}).catch((error: unknown) => setCommandError(`Stop failed: ${errorText(error)}`))
+  }
+
+  return (
+    <Box sx={{ height: "100vh", width: "100vw", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+      {/* Above every modal's backdrop, so Stop stays one tap away while a dialog is open. */}
+      <Box sx={{ position: "relative", zIndex: theme => theme.zIndex.modal + 1 }}>
+        <StatusTopBar
+          variant="dark"
+          status={{ label: state.label, color: state.color }}
+          buttonConfigs={[
+            {
+              id: "start",
+              label: "Start",
+              onClick: () => setConfirmingStart(true),
+              disabled: !startable,
+              backgroundColor: COLORS.green[600],
+              backgroundColorHover: COLORS.green[700],
+              textColor: "white",
+              icon: <IconPlayerPlayFilled size={TOP_BAR_ICON_SIZE} color="white" />,
+            },
+            {
+              id: "stop",
+              label: "Stop",
+              onClick: stop,
+              disabled: !canStop(status, connected),
+              backgroundColor: COLORS.red[600],
+              backgroundColorHover: COLORS.red[700],
+              textColor: "white",
+              icon: <IconPlayerStopFilled size={TOP_BAR_ICON_SIZE} color="white" />,
+            },
+          ]}
+        />
+      </Box>
+      {commandError !== "" && (
+        <VentionAlert
+          severity="error"
+          size="xx-large"
+          title={commandError}
+          isFullWidth
+          isCloseable
+          onCloseButtonClick={() => setCommandError("")}
+        />
+      )}
+      <Box sx={{ flex: 1, minHeight: 0, overflow: "auto", padding: 6 }}>
+        <Routes>
+          <Route
+            path="/"
+            element={<RunPage status={status} connected={connected} recipe={recipe} onRecipeChange={setRecipe} onError={setCommandError} />}
+          />
+          <Route path="/recipes" element={<RecipesPage connected={connected} onError={setCommandError} />} />
+          <Route path="/logs" element={<LogsPage entries={logEntries} />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </Box>
+      <NavigationBar variant="flex">
+        <NavigationBar.Item id="run" label="Run" path="/" icon={<IconPlayerPlay size={NAV_ICON_SIZE} color="white" />} />
+        <NavigationBar.Item id="recipes" label="Recipes" path="/recipes" icon={<IconBook size={NAV_ICON_SIZE} color="white" />} />
+        <NavigationBar.Item id="logs" label="Logs" path="/logs" icon={<IconHistory size={NAV_ICON_SIZE} color="white" />} />
+      </NavigationBar>
+      <VentionModal
+        isOpen={confirmingStart && startable}
+        onClose={() => setConfirmingStart(false)}
+        isTouchDevice
+        type="warning"
+        titleText={`Start ${recipe?.name ?? ""}?`}
+        body="The conveyor will move."
+        primaryButton={{ text: "Start", onClick: () => void start() }}
+        secondaryButton={{ text: "Cancel", onClick: () => setConfirmingStart(false) }}
+      />
+    </Box>
+  )
+}

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

@@ -0,0 +1,17 @@
+import { createClient } from "@connectrpc/connect"
+import { createConnectTransport } from "@connectrpc/connect-web"
+import { getMachineCodeProcessHttpUrl } from "@vention/machine-logic-ui-sdk"
+import { IndexingStationService } from "./gen/app_pb"
+
+// Must match the process name in project.json.
+const PROCESS_NAME = "indexing-station"
+
+export const client = createClient(
+  IndexingStationService,
+  createConnectTransport({ baseUrl: `${getMachineCodeProcessHttpUrl(PROCESS_NAME)}/rpc`, useBinaryFormat: false })
+)
+
+export const openStatus = (signal: AbortSignal) => client.status({}, { signal })
+// Three of the server's STATUS_HEARTBEAT_S repeats.
+export const STATUS_STALL_MS = 6000
+export const openEvents = (signal: AbortSignal) => client.events({}, { signal })

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

@@ -0,0 +1,16 @@
+import { ThemeProvider } from "@mui/material"
+import { isTouchScreenDevice, VirtualKeyboard } from "@vention/machine-logic-ui-sdk"
+import { machineUiHmiTheme } from "@vention/machine-ui"
+import ReactDOM from "react-dom"
+import { HashRouter } from "react-router-dom"
+import { App } from "./app"
+
+ReactDOM.render(
+  <ThemeProvider theme={machineUiHmiTheme}>
+    <HashRouter>
+      <App />
+      {isTouchScreenDevice() && <VirtualKeyboard />}
+    </HashRouter>
+  </ThemeProvider>,
+  document.getElementById("root")
+)

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

@@ -0,0 +1,52 @@
+import { LogsPanel } from "@vention/machine-apps-components"
+import type { FetchParams, FetchResult, LogEntry, LogType } from "@vention/machine-apps-components"
+import { VentionModal } from "@vention/machine-ui"
+import type { VentionModalProps } from "@vention/machine-ui"
+import { useCallback, useState } from "react"
+
+const PAGE_SIZE = 10
+const MODAL_TYPE: Record<LogType, VentionModalProps["type"]> = { error: "negative", warning: "warning", info: "info" }
+
+function matchesFilters(entry: LogEntry, { filters }: FetchParams): boolean {
+  const time = new Date(entry.date).getTime()
+  if (filters.logType && entry.level !== filters.logType) return false
+  if (filters.fromDate && time < new Date(`${filters.fromDate}T00:00:00`).getTime()) return false
+  if (filters.toDate && time > new Date(`${filters.toDate}T23:59:59.999`).getTime()) return false
+  return true
+}
+
+export function LogsPage({ entries }: { entries: LogEntry[] }) {
+  const [openEntry, setOpenEntry] = useState<LogEntry | undefined>(undefined)
+  const dataFetcher = useCallback(
+    async (params: FetchParams): Promise<FetchResult> => {
+      const matching = entries.filter(entry => matchesFilters(entry, params))
+      if (params.filters.sortOrder === "oldest") matching.reverse()
+      const totalPages = Math.max(1, Math.ceil(matching.length / params.pageSize))
+      const start = (params.page - 1) * params.pageSize
+      return {
+        logs: matching.slice(start, start + params.pageSize),
+        totalCount: matching.length,
+        totalPages,
+        currentPage: params.page,
+        hasMorePages: params.page < totalPages,
+      }
+    },
+    [entries]
+  )
+
+  // The table shows long text in full only on hover, so a tap opens the whole entry.
+  return (
+    <>
+      <LogsPanel dataFetcher={dataFetcher} pagination={{ mode: "pagination", pageSize: PAGE_SIZE }} onLogClick={setOpenEntry} />
+      <VentionModal
+        isOpen={openEntry !== undefined}
+        onClose={() => setOpenEntry(undefined)}
+        isTouchDevice
+        type={openEntry ? MODAL_TYPE[openEntry.level] : "info"}
+        titleText={openEntry?.message ?? ""}
+        body={openEntry?.description ?? ""}
+        primaryButton={{ text: "Close", onClick: () => setOpenEntry(undefined) }}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,139 @@
+import { Box, Typography } from "@mui/material"
+import { VentionButton, VentionModal, VentionStepper, VentionTextInput } from "@vention/machine-ui"
+import { useCallback, useEffect, useState } from "react"
+import { client } from "../client"
+import type { Recipe } from "../gen/app_pb"
+import { ACTOR, errorText } from "../station"
+
+type RecipeFields = Pick<Recipe, "name" | "indexDistanceMm" | "speedMmS" | "dwellMs" | "cycleCount">
+type NumericField = Exclude<keyof RecipeFields, "name">
+
+const NEW_RECIPE: RecipeFields = { name: "", indexDistanceMm: 100, speedMmS: 100, dwellMs: 500, cycleCount: 10 }
+
+const NUMERIC_FIELDS: { field: NumericField; label: string; unit: string; step: number; min: number }[] = [
+  { field: "indexDistanceMm", label: "Index distance", unit: "mm", step: 5, min: 5 },
+  { field: "speedMmS", label: "Speed", unit: "mm/s", step: 10, min: 10 },
+  { field: "dwellMs", label: "Dwell", unit: "ms", step: 100, min: 0 },
+  { field: "cycleCount", label: "Cycles", unit: "", step: 1, min: 1 },
+]
+
+interface RecipesPageProps {
+  connected: boolean
+  onError: (message: string) => void
+}
+
+export function RecipesPage({ connected, onError }: RecipesPageProps) {
+  const [recipes, setRecipes] = useState<Recipe[]>([])
+  const [editingId, setEditingId] = useState<number | undefined>(undefined)
+  const [draft, setDraft] = useState<RecipeFields>(NEW_RECIPE)
+  const [confirmingDelete, setConfirmingDelete] = useState(false)
+
+  const reload = useCallback(async () => {
+    try {
+      setRecipes((await client.recipe_ListRecords({})).records)
+    } catch (error) {
+      onError(`Could not load recipes: ${errorText(error)}`)
+    }
+  }, [onError])
+
+  useEffect(() => {
+    if (connected) void reload()
+  }, [connected, reload])
+
+  const edit = (recipe: Recipe | undefined) => {
+    setEditingId(recipe?.id)
+    setDraft(recipe ?? NEW_RECIPE)
+  }
+
+  const save = async () => {
+    try {
+      const response =
+        editingId === undefined
+          ? await client.recipe_CreateRecord({ record: draft, actor: ACTOR })
+          : await client.recipe_UpdateRecord({ recordId: editingId, record: { ...draft, id: editingId }, actor: ACTOR })
+      setEditingId(response.record?.id)
+      await reload()
+    } catch (error) {
+      onError(`Could not save ${draft.name}: ${errorText(error)}`)
+    }
+  }
+
+  const remove = async () => {
+    setConfirmingDelete(false)
+    if (editingId === undefined) return
+    try {
+      await client.recipe_DeleteRecord({ recordId: editingId, actor: ACTOR })
+      edit(undefined)
+      await reload()
+    } catch (error) {
+      onError(`Could not delete ${draft.name}: ${errorText(error)}`)
+    }
+  }
+
+  return (
+    <Box sx={{ display: "flex", gap: 8 }}>
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 4, width: 320 }}>
+        <VentionButton size="x-large" variant={editingId === undefined ? "filled" : "outline"} onClick={() => edit(undefined)}>
+          New recipe
+        </VentionButton>
+        {recipes.map(recipe => (
+          <VentionButton
+            key={recipe.id}
+            size="x-large"
+            variant={recipe.id === editingId ? "filled" : "outline"}
+            onClick={() => edit(recipe)}
+          >
+            {recipe.name}
+          </VentionButton>
+        ))}
+      </Box>
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 5, flex: 1, maxWidth: 640 }}>
+        <VentionTextInput
+          size="xx-large"
+          label="Name"
+          value={draft.name}
+          onChange={event => setDraft({ ...draft, name: event.target.value })}
+        />
+        {NUMERIC_FIELDS.map(({ field, label, unit, step, min }) => (
+          <Box key={field} sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+            <Typography variant="heading18SemiBold">{label}</Typography>
+            <VentionStepper
+              value={`${draft[field]} ${unit}`.trim()}
+              minusButtonProps={{
+                disabled: draft[field] - step < min,
+                onClick: () => setDraft({ ...draft, [field]: draft[field] - step }),
+              }}
+              plusButtonProps={{ onClick: () => setDraft({ ...draft, [field]: draft[field] + step }) }}
+            />
+          </Box>
+        ))}
+        <Box sx={{ display: "flex", gap: 6 }}>
+          <VentionButton
+            size="xx-large"
+            variant="filled-brand"
+            fullWidth
+            disabled={!connected || draft.name.trim() === ""}
+            onClick={() => void save()}
+          >
+            Save
+          </VentionButton>
+          {editingId !== undefined && (
+            <VentionButton size="xx-large" variant="destructive" fullWidth disabled={!connected} onClick={() => setConfirmingDelete(true)}>
+              Delete
+            </VentionButton>
+          )}
+        </Box>
+      </Box>
+      <VentionModal
+        isOpen={confirmingDelete && connected}
+        onClose={() => setConfirmingDelete(false)}
+        isTouchDevice
+        type="negative"
+        titleText={`Delete ${draft.name}?`}
+        body="The recipe is removed for every operator."
+        primaryButton={{ text: "Delete", variant: "destructive", onClick: () => void remove() }}
+        secondaryButton={{ text: "Cancel", onClick: () => setConfirmingDelete(false) }}
+      />
+    </Box>
+  )
+}

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

@@ -0,0 +1,65 @@
+import { Box, Typography } from "@mui/material"
+import { VentionAlert, VentionSelect, VentionStatusIndicator } from "@vention/machine-ui"
+import { useEffect, useState } from "react"
+import { client } from "../client"
+import type { Recipe, StationStatus } from "../gen/app_pb"
+import { canStart, describeState, errorText } from "../station"
+
+interface RunPageProps {
+  status: StationStatus | undefined
+  connected: boolean
+  recipe: Recipe | undefined
+  onRecipeChange: (recipe: Recipe | undefined) => void
+  onError: (message: string) => void
+}
+
+export function RunPage({ status, connected, recipe, onRecipeChange, onError }: RunPageProps) {
+  const [recipes, setRecipes] = useState<Recipe[]>([])
+  const state = describeState(status, connected)
+
+  useEffect(() => {
+    if (!connected) return
+    client.recipe_ListRecords({}).then(
+      response => setRecipes(response.records),
+      (error: unknown) => onError(`Could not load recipes: ${errorText(error)}`)
+    )
+  }, [connected, onError])
+
+  const reset = () => {
+    client.trigger_Reset({}).catch((error: unknown) => onError(`Reset failed: ${errorText(error)}`))
+  }
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 6, maxWidth: 960 }}>
+      <VentionStatusIndicator size="xx-large" outline dotColor={state.color} label={state.label} />
+      {status !== undefined && status.fault !== "" && (
+        <VentionAlert
+          severity="error"
+          size="xx-large"
+          title="Fault"
+          descriptionText={status.fault}
+          primaryButtonText={connected && status.state === "fault" ? "Reset" : undefined}
+          onPrimaryButtonClick={reset}
+        />
+      )}
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+        <Typography variant="heading24SemiBold">
+          {status?.recipeName ? `${status.recipeName}: cycle ${status.cycle}/${status.cycleCount}` : "No recipe running"}
+        </Typography>
+        <Typography variant="paragraph18Medium">
+          Last cycle: {status && status.lastCycleSeconds > 0 ? `${status.lastCycleSeconds.toFixed(1)} s` : "none yet"}
+        </Typography>
+      </Box>
+      <VentionSelect
+        size="xx-large"
+        variant="outlined"
+        labelText="Recipe"
+        placeholder="Choose a recipe"
+        value={recipe?.id ?? ""}
+        isDisabled={!canStart(status, connected)}
+        onChange={event => onRecipeChange(recipes.find(candidate => candidate.id === Number(event.target.value)))}
+        menuItems={recipes.map(candidate => ({ value: candidate.id, displayText: candidate.name }))}
+      />
+    </Box>
+  )
+}

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

@@ -0,0 +1,34 @@
+import { ConnectError } from "@connectrpc/connect"
+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"
+
+type StateDisplay = { label: string; color: string }
+
+const STATE_DISPLAY: Record<string, StateDisplay> = {
+  ready: { label: "Ready", color: COLORS.slate[500] },
+  Station_running: { label: "Running", color: COLORS.green[500] },
+  Station_stopping: { label: "Stopping", color: COLORS.amber[500] },
+  fault: { label: "Fault", color: COLORS.red[600] },
+}
+const DISCONNECTED: StateDisplay = { label: "Disconnected", color: COLORS.slate[400] }
+
+export function describeState(status: StationStatus | undefined, connected: boolean): StateDisplay {
+  if (!connected || status === undefined) return DISCONNECTED
+  return STATE_DISPLAY[status.state] ?? { label: status.state, color: COLORS.slate[500] }
+}
+
+export function canStart(status: StationStatus | undefined, connected: boolean): boolean {
+  return connected && status?.state === "ready" && status.fault === ""
+}
+
+/** Stop is disabled only when the station is known to be ready: a dropped stream may hide a moving conveyor. */
+export function canStop(status: StationStatus | undefined, connected: boolean): boolean {
+  return !(connected && status?.state === "ready")
+}
+
+export function errorText(error: unknown): string {
+  return ConnectError.from(error).rawMessage
+}

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

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react"
+
+const RETRY_DELAYS_MS = [500, 1000, 2000, 5000]
+
+/**
+ * Latest message of a server stream, reopened whenever it drops; pass a stable `open`.
+ * `stallMs` treats silence as a drop to catch hung connections; use it only on heartbeat streams.
+ */
+export function useStream<T>(
+  open: (signal: AbortSignal) => AsyncIterable<T>,
+  stallMs?: number
+): { value: T | undefined; connected: boolean } {
+  const [value, setValue] = useState<T | undefined>(undefined)
+  const [connected, setConnected] = useState(false)
+
+  useEffect(() => {
+    const controller = new AbortController()
+    let attempt = 0
+    const consume = async (): Promise<void> => {
+      while (!controller.signal.aborted) {
+        const streamController = new AbortController()
+        const abortStream = () => streamController.abort()
+        controller.signal.addEventListener("abort", abortStream)
+        let stallTimer: ReturnType<typeof setTimeout> | undefined
+        const armStallTimer = () => {
+          clearTimeout(stallTimer)
+          if (stallMs !== undefined) stallTimer = setTimeout(abortStream, stallMs)
+        }
+        armStallTimer()
+        try {
+          for await (const message of open(streamController.signal)) {
+            attempt = 0
+            armStallTimer()
+            setValue(message)
+            setConnected(true)
+          }
+        } catch {
+          // A dropped or stalled stream is reopened below.
+        }
+        clearTimeout(stallTimer)
+        controller.signal.removeEventListener("abort", abortStream)
+        if (controller.signal.aborted) return
+        setConnected(false)
+        const delay = RETRY_DELAYS_MS[Math.min(attempt, RETRY_DELAYS_MS.length - 1)]
+        attempt += 1
+        await new Promise(resolve => setTimeout(resolve, delay))
+      }
+    }
+    void consume()
+    return () => controller.abort()
+  }, [open, stallMs])
+
+  return { value, connected }
+}

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

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

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

@@ -0,0 +1,13 @@
+from typing import Optional
+
+from sqlmodel import Field, SQLModel
+
+
+# The HMI's Connect client leaves zero values out of the JSON it sends, so every field needs a zero default.
+class Recipe(SQLModel, table=True):
+    id: Optional[int] = Field(default=None, primary_key=True)
+    name: str = ""
+    index_distance_mm: float = 0.0
+    speed_mm_s: float = 0.0
+    dwell_ms: int = 0
+    cycle_count: int = 0

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

@@ -0,0 +1,6 @@
+{
+  "processes": {
+    "onPlay": [{ "name": "indexing-station", "command": "python3 -m uvicorn server:app --host 0.0.0.0 --port 8000", "port": 8000 }]
+  },
+  "ui": { "showDefaultBackToControlCenterButton": true }
+}