Refactor robot model and update agent state handling

- Updated `robot-final.gltf` to include clearcoat and sheen material extensions, adjusted mesh translations, and modified material properties.
- Deleted obsolete `robot-high.bin` and `robot-high.gltf` files.
- Enhanced `Status` component to display agent state and improved status logic based on constraints and state.
- Modified `useRun` to track agent state changes and structured cloning for state management.
- Updated state management in `state.ts` to include agent state tracking.
- Refined `Agent` and `Agents` components for better visual representation of agent states.
- Adjusted `Domain` component to optimize texture filtering.
- Improved lighting calculations in `Light` component for better performance.
- Updated `Stage` component to enhance rendering settings and fog color.
- Introduced a new `colors.tsx` file for centralized color management.

Author: Kevin

public/base.png

@@ -1,13 +1,9 @@
 import { useAgentInfo } from "client/state";
+import { colors } from "colors";
 import { Components } from "leva/plugin";
 import { chain, noop } from "lodash";
 import { useCss } from "react-use";
 
-const colors = {
-  warning: "#ffc400",
-  success: "#00e676",
-};
-
 const vectorProps = {
   onUpdate: noop,
   settings: {
@@ -62,18 +58,23 @@ export function Status({ id }: { id: number }) {
     },
   });
   if (!a) return null;
-  const status = a.constraints?.length
-    ? {
-        color: colors.warning,
-        label: `Waiting for ${chain(a.constraints)
-          .map((c) => c.id)
-          .uniq()
-          .thru(
-            (ids) => `${ids.length > 1 ? "agents" : "agent"} ${ids.join(", ")}`
-          )
-          .value()}`,
-      }
-    : { color: colors.success, label: "Healthy" };
+  console.log(a.state);
+  const status =
+    a.constraints?.length || a.state === "idle"
+      ? {
+          color: a.state === "idle" ? colors.error : colors.warning,
+          label: `${
+            a.state === "idle" ? "Waiting for" : "Constrained by"
+          } ${chain(a.constraints)
+            .map((c) => c.id)
+            .uniq()
+            .thru(
+              (ids) =>
+                `${ids.length > 1 ? "agents" : "agent"} ${ids.join(", ")}`
+            )
+            .value()}`,
+        }
+      : { color: colors.success, label: "Healthy" };
   return (
     <div className={cls}>
       <h4>
@@ -82,6 +83,7 @@ export function Status({ id }: { id: number }) {
           <Dot color={status.color} /> {status.label}
         </span>
       </h4>
+      <p>State: {a.state}</p>
       <Components.Row input>
         <Components.Label>Position</Components.Label>
         <Components.Vector

public/robot-final.bin

@@ -2,7 +2,17 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { Mutex } from "async-mutex";
 import { client } from "client/trpc";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
-import { identity, isArray, slice, throttle, trim } from "lodash";
+import {
+  clone,
+  cloneDeep,
+  identity,
+  isArray,
+  isNumber,
+  range,
+  slice,
+  throttle,
+  trim,
+} from "lodash";
 import { useRef } from "react";
 import { AdgProgress, Output } from "smart";
 import { id } from "utils";
@@ -92,6 +102,7 @@ export function useRun() {
             1500,
             { trailing: true, leading: false }
           );
+          const agentState: State["agentState"] = {};
           let adg: AdgProgress | undefined = undefined;
           return await new Promise<void>((res, rej) => {
             abort.current = () => {
@@ -109,6 +120,17 @@ export function useRun() {
                 for (const d of data) {
                   if ("type" in d) {
                     switch (d.type) {
+                      case "state_change":
+                        if (isNumber(d.agent)) {
+                          console.log(d.agent, d.value);
+                          agentState[d.agent] = d.value;
+                          console.log(structuredClone(agentState));
+                        } else {
+                          range(contents.count).forEach((i) => {
+                            agentState[i] = d.value;
+                          });
+                        }
+                        break;
                       case "message":
                         setLog((t) => slice([...t, d.content], -100));
                         break;
@@ -119,7 +141,11 @@ export function useRun() {
                         adg = d;
                         break;
                       case "tick":
-                        actions.push({ state: d, adg });
+                        actions.push({
+                          state: d,
+                          adg,
+                          agentState: structuredClone(agentState),
+                        });
                         f();
                         break;
                       case "error":

public/robot-final.gltf

@@ -16,7 +16,7 @@ import {
 import { store } from "store";
 import { useEffect, useMemo, useState } from "react";
 import { useEffectOnce } from "react-use";
-import { AdgProgress, Step } from "smart";
+import { AdgProgress, StateChange, Step } from "smart";
 import { lerp, lerpRadians } from "utils";
 import { useSpeed } from "./play";
 import { selectionAtom } from "./selection";
@@ -26,6 +26,7 @@ const CHUNK_SIZE = 256;
 export type State = {
   state: Step;
   adg?: AdgProgress;
+  agentState?: Record<number, StateChange["value"]>;
 };
 
 export const logAtom = atom<string[]>([]);
@@ -101,6 +102,7 @@ export const useAgentInfo = (i: number) => {
             const agent = a?.state?.agents?.[i];
             if (!agent) return;
             return {
+              state: a.agentState?.[i],
               constraints: a.adg?.constraints?.[i]?.constraining_agent,
               position: [agent.x + 0.5, 0, -agent.y - 0.5] as [
                 number,
@@ -133,6 +135,7 @@ export const useAgentPosition = (i: number) => {
           // Teleport if too far away
           if (dist(p.position, v0.position) > 0.5) return v0;
           return {
+            state: v0.state,
             constraints: v0.constraints,
             position: zip(p.position, v0.position).map(([a, b]) =>
               lerp(a!, b!, alpha(speed))

public/robot-high.bin

@@ -0,0 +1,5 @@
+export const colors = {
+  warning: "#ffc400",
+  success: "#00e676",
+  error: "#f50057",
+};

public/robot-high.gltf

@@ -16,6 +16,7 @@ import { ComponentProps, Suspense } from "react";
 import { useBoolean, useTween } from "react-use";
 import { DoubleSide } from "three";
 import { rectangleRounded } from "./rectangleRounded";
+import { colors } from "colors";
 
 const font = `./fonts/geist-medium.ttf`;
 
@@ -95,7 +96,6 @@ export function Path({
   const dest = last(path);
 
   const { current: a } = useAgentPosition(id);
-
   const constrained = !!a?.constraints?.length;
 
   return (
@@ -131,19 +131,25 @@ export function Path({
                 renderOrder={9998}
                 dashScale={5}
                 depthTest={false}
-                lineWidth={s.scale.to((s) => s * 6)}
+                lineWidth={s.scale.to((s) => s * 4)}
                 color="#fff"
                 points={path}
                 dashed
               />
               <AnimatedRing
                 scale={s.scale}
                 args={[0.6 / 2, 0.7 / 2, 32, 32]}
-                position={[x, y - 0.09, z]}
+                position={[x, y - 0.06, z]}
                 rotation={[-Math.PI / 2, 0, 0]}
               >
                 <meshBasicMaterial
-                  color={constrained ? "#ffc400" : "#00e676"}
+                  color={
+                    a?.state === "idle"
+                      ? colors.error
+                      : constrained
+                      ? colors.warning
+                      : colors.success
+                  }
                 />
               </AnimatedRing>
               <AnimatedRing
@@ -153,7 +159,7 @@ export function Path({
                 position={dest}
                 rotation={[-Math.PI / 2, 0, 0]}
               >
-                <meshBasicMaterial color={"#f50057"} depthTest={false} />
+                <meshBasicMaterial color={colors.error} depthTest={false} />
               </AnimatedRing>
               <AnimatedRing
                 renderOrder={9999}
@@ -162,7 +168,7 @@ export function Path({
                 position={src}
                 rotation={[-Math.PI / 2, 0, 0]}
               >
-                <meshBasicMaterial color={"#00e676"} depthTest={false} />
+                <meshBasicMaterial color={colors.success} depthTest={false} />
               </AnimatedRing>
               {a?.constraints?.map?.(({ id: to }) => (
                 <Constraint
@@ -200,7 +206,6 @@ export function Agent({ i, ...props }: { i: number } & InstanceProps) {
   if (!a) {
     return undefined;
   }
-
   return (
     <>
       <Suspense fallback={null}>