From 104e905f60e6a7b1804b0109c96fc384de0b5714 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Wed, 1 Apr 2026 02:53:51 +0200
Subject: [PATCH] auto-git:  [change] src/app/App.tsx

---
 src/app/App.tsx | 55 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index aeb675e4..f0cefc32 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1973,7 +1973,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
                     </select>
                   </label>
                 </div>
-              ) : (
+              ) : link.action.type === "toggleVisibility" ? (
                 <div className="form-section">
                   <div className="vector-inputs vector-inputs--two">
                     <label className="form-field">
@@ -2008,6 +2008,59 @@ export function App({ store, initialStatusMessage }: AppProps) {
                     </label>
                   </div>
                 </div>
+              ) : link.action.type === "playAnimation" ? (
+                <div className="form-section">
+                  <div className="vector-inputs vector-inputs--two">
+                    <label className="form-field">
+                      <span className="label">Instance</span>
+                      <select
+                        data-testid={`interaction-link-play-anim-instance-${link.id}`}
+                        className="text-input"
+                        value={link.action.targetModelInstanceId}
+                        onChange={(event) => updateAnimationInteractionLinkTarget(link, event.currentTarget.value)}
+                      >
+                        {modelInstanceDisplayList.map(({ modelInstance, label }) => (
+                          <option key={modelInstance.id} value={modelInstance.id}>
+                            {label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    <label className="form-field">
+                      <span className="label">Clip</span>
+                      <select
+                        data-testid={`interaction-link-play-anim-clip-${link.id}`}
+                        className="text-input"
+                        value={link.action.clipName}
+                        onChange={(event) => updatePlayAnimationLinkClip(link, event.currentTarget.value)}
+                      >
+                        {(editorState.document.assets[
+                          editorState.document.modelInstances[link.action.targetModelInstanceId]?.assetId ?? ""
+                        ] as { kind: "model"; metadata: { animationNames: string[] } } | undefined)?.metadata.animationNames.map((name) => (
+                          <option key={name} value={name}>{name}</option>
+                        )) ?? <option value={link.action.clipName}>{link.action.clipName}</option>}
+                      </select>
+                    </label>
+                  </div>
+                </div>
+              ) : (
+                <div className="form-section">
+                  <label className="form-field">
+                    <span className="label">Instance</span>
+                    <select
+                      data-testid={`interaction-link-stop-anim-instance-${link.id}`}
+                      className="text-input"
+                      value={link.action.targetModelInstanceId}
+                      onChange={(event) => updateAnimationInteractionLinkTarget(link, event.currentTarget.value)}
+                    >
+                      {modelInstanceDisplayList.map(({ modelInstance, label }) => (
+                        <option key={modelInstance.id} value={modelInstance.id}>
+                          {label}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                </div>
               )}
 
               <div className="inline-actions">