upgrade the timeline

package-lock.json

@@ -10,9 +10,9 @@
       "dependencies": {
         "@aitube/broadway": "0.0.22",
         "@aitube/clap": "0.0.30",
-        "@aitube/clapper-services": "0.0.14",
+        "@aitube/clapper-services": "0.0.16",
         "@aitube/engine": "0.0.26",
-        "@aitube/timeline": "0.0.37",
+        "@aitube/timeline": "0.0.40",
         "@fal-ai/serverless-client": "^0.11.0",
         "@gradio/client": "^1.1.1",
         "@huggingface/hub": "^0.15.1",
@@ -137,12 +137,12 @@
       }
     },
     "node_modules/@aitube/clapper-services": {
-      "version": "0.0.14",
-      "resolved": "https://registry.npmjs.org/@aitube/clapper-services/-/clapper-services-0.0.14.tgz",
-      "integrity": "sha512-rC919mMzMj93Gd7CD/Yy1011huWP+GLkg0pf1g71BcwGYzp8Su6Kn82ZMNXeUStoeksR0/Lep5tnmfp+9HAaiA==",
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@aitube/clapper-services/-/clapper-services-0.0.16.tgz",
+      "integrity": "sha512-fMUoyjiSmE1zWPDWq7kNHKhOhtylgceaVsV7wOzdHMfBNruTPgAG1rHgN1o4m4HicYn4KCZwa433d9zDKDPXRg==",
       "peerDependencies": {
         "@aitube/clap": "0.0.30",
-        "@aitube/timeline": "0.0.37",
+        "@aitube/timeline": "0.0.40",
         "@monaco-editor/react": "4.6.0",
         "monaco-editor": "0.50.0",
         "react": "*",
@@ -168,9 +168,9 @@
       }
     },
     "node_modules/@aitube/timeline": {
-      "version": "0.0.37",
-      "resolved": "https://registry.npmjs.org/@aitube/timeline/-/timeline-0.0.37.tgz",
-      "integrity": "sha512-WM7cfVR9TtgjH0kAMpGkbjfKU7zfHKihqWj8DemAPeDPyvWbzbvCEFqI9AV7w/uf3K8Y/QV7iitKgXRrM/QUhQ==",
+      "version": "0.0.40",
+      "resolved": "https://registry.npmjs.org/@aitube/timeline/-/timeline-0.0.40.tgz",
+      "integrity": "sha512-TBH0Ji3rOMTITvDK6TwYr+0dRARY4hJsAeHXWt9yUXLfEYNwx8R2XR7qlk3C0gSSEpH11n7pB8qpx3TtpzSWCQ==",
       "dependencies": {
         "date-fns": "^3.6.0",
         "react-virtualized-auto-sizer": "^1.0.24"
@@ -4336,15 +4336,15 @@
       }
     },
     "node_modules/@smithy/core": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/@smithy/core/-/core-2.2.4.tgz",
-      "integrity": "sha512-qdY3LpMOUyLM/gfjjMQZui+UTNS7kBRDWlvyIhVOql5dn2J3isk9qUTBtQ1CbDH8MTugHis1zu3h4rH+Qmmh4g==",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@smithy/core/-/core-2.2.5.tgz",
+      "integrity": "sha512-0kqyj93/Aa30TEXnnWRBetN8fDGjFF+u8cdIiMI8YS6CrUF2dLTavRfHKfWh5cL5d6s2ZNyEnLjBitdcKmkETQ==",
       "dependencies": {
         "@smithy/middleware-endpoint": "^3.0.4",
-        "@smithy/middleware-retry": "^3.0.7",
+        "@smithy/middleware-retry": "^3.0.8",
         "@smithy/middleware-serde": "^3.0.3",
         "@smithy/protocol-http": "^4.0.3",
-        "@smithy/smithy-client": "^3.1.5",
+        "@smithy/smithy-client": "^3.1.6",
         "@smithy/types": "^3.3.0",
         "@smithy/util-middleware": "^3.0.3",
         "tslib": "^2.6.2"
@@ -4402,9 +4402,9 @@
       }
     },
     "node_modules/@smithy/fetch-http-handler": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/fetch-http-handler/-/fetch-http-handler-3.2.0.tgz",
-      "integrity": "sha512-vFvDxMrc6sO5Atec8PaISckMcAwsCrRhYxwUylg97bRT2KZoumOF7qk5+6EVUtuM1IG9AJV5aqXnHln9ZdXHpg==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@smithy/fetch-http-handler/-/fetch-http-handler-3.2.1.tgz",
+      "integrity": "sha512-0w0bgUvZmfa0vHN8a+moByhCJT07WN6AHKEhFSOLsDpnszm+5dLVv5utGaqbhOrZ/aF5x3xuPMs/oMCd+4O5xg==",
       "dependencies": {
         "@smithy/protocol-http": "^4.0.3",
         "@smithy/querystring-builder": "^3.0.3",
@@ -4478,14 +4478,14 @@
       }
     },
     "node_modules/@smithy/middleware-retry": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@smithy/middleware-retry/-/middleware-retry-3.0.7.tgz",
-      "integrity": "sha512-f5q7Y09G+2h5ivkSx5CHvlAT4qRR3jBFEsfXyQ9nFNiWQlr8c48blnu5cmbTQ+p1xmIO14UXzKoF8d7Tm0Gsjw==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@smithy/middleware-retry/-/middleware-retry-3.0.8.tgz",
+      "integrity": "sha512-wmIw3t6ZbeqstUFdXtStzSSltoYrcfc28ndnr0mDSMmtMSRNduNbmneA7xiE224fVFXzbf24+0oREks1u2X7Mw==",
       "dependencies": {
         "@smithy/node-config-provider": "^3.1.3",
         "@smithy/protocol-http": "^4.0.3",
         "@smithy/service-error-classification": "^3.0.3",
-        "@smithy/smithy-client": "^3.1.5",
+        "@smithy/smithy-client": "^3.1.6",
         "@smithy/types": "^3.3.0",
         "@smithy/util-middleware": "^3.0.3",
         "@smithy/util-retry": "^3.0.3",
@@ -4535,9 +4535,9 @@
       }
     },
     "node_modules/@smithy/node-http-handler": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@smithy/node-http-handler/-/node-http-handler-3.1.1.tgz",
-      "integrity": "sha512-L71NLyPeP450r2J/mfu1jMc//Z1YnqJt2eSNw7uhiItaONnBLDA68J5jgxq8+MBDsYnFwNAIc7dBG1ImiWBiwg==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@smithy/node-http-handler/-/node-http-handler-3.1.2.tgz",
+      "integrity": "sha512-Td3rUNI7qqtoSLTsJBtsyfoG4cF/XMFmJr6Z2dX8QNzIi6tIW6YmuyFml8mJ2cNpyWNqITKbROMOFrvQjmsOvw==",
       "dependencies": {
         "@smithy/abort-controller": "^3.1.1",
         "@smithy/protocol-http": "^4.0.3",
@@ -4639,15 +4639,15 @@
       }
     },
     "node_modules/@smithy/smithy-client": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@smithy/smithy-client/-/smithy-client-3.1.5.tgz",
-      "integrity": "sha512-x9bL9Mx2CT2P1OiUlHM+ZNpbVU6TgT32f9CmTRzqIHA7M4vYrROCWEoC3o4xHNJASoGd4Opos3cXYPgh+/m4Ww==",
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@smithy/smithy-client/-/smithy-client-3.1.6.tgz",
+      "integrity": "sha512-w9oboI661hfptr26houZ5mdKc//DMxkuOMXSaIiALqGn4bHYT9S4U69BBS6tHX4TZHgShmhcz0d6aXk7FY5soA==",
       "dependencies": {
         "@smithy/middleware-endpoint": "^3.0.4",
         "@smithy/middleware-stack": "^3.0.3",
         "@smithy/protocol-http": "^4.0.3",
         "@smithy/types": "^3.3.0",
-        "@smithy/util-stream": "^3.0.5",
+        "@smithy/util-stream": "^3.0.6",
         "tslib": "^2.6.2"
       },
       "engines": {
@@ -4731,12 +4731,12 @@
       }
     },
     "node_modules/@smithy/util-defaults-mode-browser": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@smithy/util-defaults-mode-browser/-/util-defaults-mode-browser-3.0.7.tgz",
-      "integrity": "sha512-Q2txLyvQyGfmjsaDbVV7Sg8psefpFcrnlGapDzXGFRPFKRBeEg6OvFK8FljqjeHSaCZ6/UuzQExUPqBR/2qlDA==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@smithy/util-defaults-mode-browser/-/util-defaults-mode-browser-3.0.8.tgz",
+      "integrity": "sha512-eLRHCvM1w3ZJkYcd60yKqM3d70dPB+071EDpf9ZGYqFed3xcm/+pWwNS/xM0JXRrjm0yAA19dWcdFN2IE/66pQ==",
       "dependencies": {
         "@smithy/property-provider": "^3.1.3",
-        "@smithy/smithy-client": "^3.1.5",
+        "@smithy/smithy-client": "^3.1.6",
         "@smithy/types": "^3.3.0",
         "bowser": "^2.11.0",
         "tslib": "^2.6.2"
@@ -4746,15 +4746,15 @@
       }
     },
     "node_modules/@smithy/util-defaults-mode-node": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@smithy/util-defaults-mode-node/-/util-defaults-mode-node-3.0.7.tgz",
-      "integrity": "sha512-F4Qcj1fG6MGi2BSWCslfsMSwllws/WzYONBGtLybyY+halAcXdWhcew+mej8M5SKd5hqPYp4f7b+ABQEaeytgg==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@smithy/util-defaults-mode-node/-/util-defaults-mode-node-3.0.8.tgz",
+      "integrity": "sha512-Tajvdyg5+k77j6AOrwSCZgi7KdBizqPNs3HCnFGRoxDjzh+CjPLaLrXbIRB0lsAmqYmRHIU34IogByaqvDrkBQ==",
       "dependencies": {
         "@smithy/config-resolver": "^3.0.4",
         "@smithy/credential-provider-imds": "^3.1.3",
         "@smithy/node-config-provider": "^3.1.3",
         "@smithy/property-provider": "^3.1.3",
-        "@smithy/smithy-client": "^3.1.5",
+        "@smithy/smithy-client": "^3.1.6",
         "@smithy/types": "^3.3.0",
         "tslib": "^2.6.2"
       },
@@ -4812,12 +4812,12 @@
       }
     },
     "node_modules/@smithy/util-stream": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@smithy/util-stream/-/util-stream-3.0.5.tgz",
-      "integrity": "sha512-xC3L5PKMAT/Bh8fmHNXP9sdQ4+4aKVUU3EEJ2CF/lLk7R+wtMJM+v/1B4en7jO++Wa5spGzFDBCl0QxgbUc5Ug==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@smithy/util-stream/-/util-stream-3.0.6.tgz",
+      "integrity": "sha512-w9i//7egejAIvplX821rPWWgaiY1dxsQUw0hXX7qwa/uZ9U3zplqTQ871jWadkcVB9gFDhkPWYVZf4yfFbZ0xA==",
       "dependencies": {
-        "@smithy/fetch-http-handler": "^3.2.0",
-        "@smithy/node-http-handler": "^3.1.1",
+        "@smithy/fetch-http-handler": "^3.2.1",
+        "@smithy/node-http-handler": "^3.1.2",
         "@smithy/types": "^3.3.0",
         "@smithy/util-base64": "^3.0.0",
         "@smithy/util-buffer-from": "^3.0.0",
@@ -5615,12 +5615,12 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/automation-events": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-7.0.5.tgz",
-      "integrity": "sha512-Ni6vhZg0mKmVlew1kxWAzWL7QY1LYDdoYgp6yF9OHeskDrjyJp2SqoKoPQYeiMYjeIlbSpnxXm/JI55VcmX5Wg==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-7.0.6.tgz",
+      "integrity": "sha512-3tFP+Xrk0u0JWdGEvJGtW9oUdWOnX1v6RwFapgIwanBvn21yCzgBMe+FlAPW+3kIQsxIDV9mFw//BzrGXOJQ5A==",
       "dependencies": {
-        "@babel/runtime": "^7.24.5",
-        "tslib": "^2.6.2"
+        "@babel/runtime": "^7.24.7",
+        "tslib": "^2.6.3"
       },
       "engines": {
         "node": ">=18.2.0"
@@ -6961,9 +6961,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.818",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.818.tgz",
-      "integrity": "sha512-eGvIk2V0dGImV9gWLq8fDfTTsCAeMDwZqEPMr+jMInxZdnp9Us8UpovYpRCf9NQ7VOFgrN2doNSgvISbsbNpxA=="
+      "version": "1.4.820",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.820.tgz",
+      "integrity": "sha512-kK/4O/YunacfboFEk/BDf7VO1HoPmDudLTJAU9NmXIOSjsV7qVIX3OrI4REZo0VmdqhcpUcncQc6N8Q3aEXlHg=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -7613,9 +7613,9 @@
       }
     },
     "node_modules/esquery": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
-      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
       "dev": true,
       "dependencies": {
         "estraverse": "^5.1.0"
@@ -7745,12 +7745,12 @@
       "integrity": "sha512-VhXlQgj9ioXCqGstD37E/HBeqEGV/qOD/kmbVG8h5xKBYvM1L3lR1Zn4555cQ8GkYbJa8aJSipLPndE1k6zK2w=="
     },
     "node_modules/fast-unique-numbers": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/fast-unique-numbers/-/fast-unique-numbers-9.0.5.tgz",
-      "integrity": "sha512-wVA1YcLQn0eAo4P1DXu4UI3wx68Llwm2/iCtpoOGuTi3jm/13KFYjCt3Nlq2fseSuyaBz43RKimj5G68GDzjjg==",
+      "version": "9.0.6",
+      "resolved": "https://registry.npmjs.org/fast-unique-numbers/-/fast-unique-numbers-9.0.6.tgz",
+      "integrity": "sha512-KGsLrPoDOcnPVDVuZGnc/bHwBA9u9uvsmLK3sNr7js7TWVuM0Udb6lP4YnNZtphb+zBDCsknxf4BNg7grNjTPg==",
       "dependencies": {
-        "@babel/runtime": "^7.24.5",
-        "tslib": "^2.6.2"
+        "@babel/runtime": "^7.24.7",
+        "tslib": "^2.6.3"
       },
       "engines": {
         "node": ">=18.2.0"
@@ -10149,9 +10149,9 @@
       }
     },
     "node_modules/openai": {
-      "version": "4.52.3",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-4.52.3.tgz",
-      "integrity": "sha512-IyQLYKGYoEEkUCEm2frPzwHDJ3Ym663KtivnY6pWCzuoi6/HgSIMMxpcuTRS81GH6tiULPYGmTxIvzXdmPIWOw==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-4.52.4.tgz",
+      "integrity": "sha512-3CkV7e8epJBnTe5ptn4i3ivfm1d8cvkbvBOzhGmGYEarpDpcCgwOMV1aBPvZ/HoveUtREWUE9Fqcy7BcPNtMJg==",
       "dependencies": {
         "@types/node": "^18.11.18",
         "@types/node-fetch": "^2.6.4",
@@ -10399,11 +10399,11 @@
       }
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.1.tgz",
-      "integrity": "sha512-9/8QXrtbGeMB6LxwQd4x1tIMnsmUxMvIH/qWGsccz6bt9Uln3S+sgAaqfQNhbGA8ufzs2fHuP/yqapGgP9Hh2g==",
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.2.tgz",
+      "integrity": "sha512-voV4dDrdVZVNz84n39LFKDaRzfwhdzJ7akpyXfTMxCgRUp07U3lcJUXRlhTKP17rgt09sUzLi5iCitpEAr+6ug==",
       "engines": {
-        "node": ">=18"
+        "node": "14 || 16 || 18 || 20 || >=22"
       }
     },
     "node_modules/path-to-regexp": {
@@ -10708,9 +10708,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.12.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.2.tgz",
-      "integrity": "sha512-x+NLUpx9SYrcwXtX7ob1gnkSems4i/mGZX5SlYxwIau6RrUSODO89TR/XDGGpn5RPWSYIB+aSfuSlV5+CmbTBg==",
+      "version": "6.12.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.3.tgz",
+      "integrity": "sha512-AWJm14H1vVaO/iNZ4/hO+HyaTehuy9nRqVdkTqlJt0HWvBiBIEXFmb4C0DGeYo3Xes9rrEW+TxHsaigCbN5ICQ==",
       "dependencies": {
         "side-channel": "^1.0.6"
       },
@@ -11554,13 +11554,13 @@
       }
     },
     "node_modules/standardized-audio-context": {
-      "version": "25.3.72",
-      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.72.tgz",
-      "integrity": "sha512-Dvwu2NuqafQqWxUWoo6G9ze/cvVNlFDpmIOA8XjuItrfR0h/REjgjoYCT3Y7nbkUJKGoz8SqqVzR7JATQV4XeQ==",
+      "version": "25.3.73",
+      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.73.tgz",
+      "integrity": "sha512-PiFIweBipW18uz0rNrXs8A7MzdCcVcEHiqf0B5RzwBIgp0eSb3Cj11HcWidrgR0XYeEogokcMsIbrVjy63mhoA==",
       "dependencies": {
-        "@babel/runtime": "^7.24.5",
-        "automation-events": "^7.0.5",
-        "tslib": "^2.6.2"
+        "@babel/runtime": "^7.24.7",
+        "automation-events": "^7.0.6",
+        "tslib": "^2.6.3"
       }
     },
     "node_modules/state-local": {
@@ -11950,12 +11950,9 @@
       }
     },
     "node_modules/tailwind-merge": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz",
-      "integrity": "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==",
-      "dependencies": {
-        "@babel/runtime": "^7.24.1"
-      },
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.4.0.tgz",
+      "integrity": "sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"

package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "@aitube/broadway": "0.0.22",
     "@aitube/clap": "0.0.30",
-    "@aitube/clapper-services": "0.0.14",
+    "@aitube/clapper-services": "0.0.16",
     "@aitube/engine": "0.0.26",
-    "@aitube/timeline": "0.0.37",
+    "@aitube/timeline": "0.0.40",
     "@fal-ai/serverless-client": "^0.11.0",
     "@gradio/client": "^1.1.1",
     "@huggingface/hub": "^0.15.1",

src/app/main.tsx

@@ -67,7 +67,8 @@ function MainContent() {
       flex flex-col
       w-screen h-screen
       overflow-hidden
-      items-center justify-center
+      justify-between
+      
       font-light
       text-stone-900/90 dark:text-stone-100/90
       `)}
@@ -76,10 +77,14 @@ function MainContent() {
       }}
       >
       <TopBar />
-        <div className={cn(
-          `flex flex-row flex-grow w-full overflow-hidden`, 
-          isEmpty ? "opacity-0" : "opacity-100"
-        )}>
+        <div className={cn(`
+        flex flex-row overflow-hidden
+        h-[calc(100vh-40px)] w-screen
+        `, 
+        isEmpty ? "opacity-0" : "opacity-100"
+        )}
+
+        >
           <ReflexContainer orientation="vertical">
           
             <ReflexElement>
@@ -120,7 +125,6 @@ function MainContent() {
           {showAssistant && <ReflexElement size={300}><ChatView /></ReflexElement>}
 
           </ReflexContainer>
-          
         </div>
 
       <SettingsDialog />

src/components/editors/EntityEditor/index.tsx

@@ -1,15 +1,37 @@
+import { TimelineSegment, useTimeline } from "@aitube/timeline"
+
 import { FormFile } from "@/components/forms/FormFile"
 import { FormInput } from "@/components/forms/FormInput"
 import { FormSection } from "@/components/forms/FormSection"
-import { useEntityEditor } from "@/services"
+import { useEntityEditor, useRenderer } from "@/services"
+import { useEffect } from "react"
+import { ClapEntity, ClapProject } from "@aitube/clap"
 
 export function EntityEditor() {
+  const clap: ClapProject = useTimeline(s => s.clap)
+
+  const segmentsChanged: number = useTimeline(s => s.segmentsChanged)
+  const selectedSegments: TimelineSegment[] = useTimeline(s => s.selectedSegments)
+  const { activeSegments } = useRenderer(s => s.bufferedSegments)
+
   const current = useEntityEditor(s => s.current)
   const setCurrent = useEntityEditor(s => s.setCurrent)
   const history = useEntityEditor(s => s.history)
   const undo = useEntityEditor(s => s.undo)
   const redo = useEntityEditor(s => s.redo)
 
+  let segment = selectedSegments.at(-1)
+  let entity: ClapEntity | undefined = clap.entityIndex[segment?.entityId as any]
+ 
+  if (!entity) {
+    segment = activeSegments.find(s => clap.entityIndex[s?.entityId as any])
+    entity = clap.entityIndex[segment?.entityId as any]
+  }
+
+  useEffect(() => {
+    setCurrent(entity)
+  }, [clap, entity, segmentsChanged])
+
   if (!current) {
     return <div>
       No Entity selected
@@ -30,7 +52,7 @@ export function EntityEditor() {
           ? <img src={current?.imageId}></img>
           : null}
         <FormFile
-          label={"Visual identity file"}
+          label={"Visual identity file (TODO)"}
         />
         {/*
         <FormInput<string>
@@ -38,6 +60,9 @@ export function EntityEditor() {
           value={current?.audioId.slice(0, 20)}
         />
         */}
+        <FormFile
+          label={"Audio identity file (TODO)"}
+        />
         <FormInput<string>
           label={"Label"}
           value={current.label}

src/components/editors/SegmentEditor/index.tsx

@@ -1,14 +1,25 @@
+import { useEffect } from "react"
+import { TimelineSegment, useTimeline } from "@aitube/timeline"
+
 import { FormInput } from "@/components/forms/FormInput"
 import { FormSection } from "@/components/forms/FormSection"
 import { useSegmentEditor } from "@/services"
+import { ClapSegmentStatus } from "@aitube/clap"
+
 
 export function SegmentEditor() {
+  const segmentsChanged: number = useTimeline(s => s.segmentsChanged)
+  const selectedSegments: TimelineSegment[] = useTimeline(s => s.selectedSegments)
   const current = useSegmentEditor(s => s.current)
   const setCurrent = useSegmentEditor(s => s.setCurrent)
   const history = useSegmentEditor(s => s.history)
   const undo = useSegmentEditor(s => s.undo)
   const redo = useSegmentEditor(s => s.redo)
 
+  useEffect(() => {
+    setCurrent(selectedSegments.at(-1))
+  }, [selectedSegments.map(s => s.id).join(',')])
+
   if (!current) {
     return <div>
       No segment selected
@@ -17,12 +28,14 @@ export function SegmentEditor() {
 
   return (
     <FormSection
-      label={"Project Settings"}
+      label={"Segment Editor"}
       className="p-4">
         <FormInput<string>
+          type="textarea"
           label={"Label"}
           value={current.label}
         />
+        {/*
         <FormInput<string>
           label={"Prompt"}
           value={current.prompt}
@@ -33,12 +46,9 @@ export function SegmentEditor() {
             })
           }}
         />
+        */}
         <div>
-          <div>Generation status</div>
-          <div>{current.status || "N.A."}</div>
-        </div>
-        <div>
-          <div>Created at</div>
+          <div>Created at:</div>
           <div>{current.createdAt || "N.A."}</div>
         </div>
     </FormSection>

src/lib/core/constants.ts

@@ -4,7 +4,7 @@
 export const HARD_LIMIT_NB_MAX_ASSETS_TO_GENERATE_IN_PARALLEL = 32
 
 export const APP_NAME = "Clapper.app"
-export const APP_REVISION = "r20240626-2017"
+export const APP_REVISION = "r20240709-1611"
 
 export const APP_DOMAIN = "Clapper.app"
 export const APP_LINK = "https://clapper.app"

src/services/monitor/useMonitor.ts

@@ -112,9 +112,11 @@ export const useMonitor = create<MonitorStore>((set, get) => ({
 
     const { isPlaying, mode, staticVideoRef } = monitor
     const { renderLoop } = renderer
-    const { setCursorTimestampAtInMs } = timeline
+    const { setCursorTimestampAtInMs, cursorTimestampAtInMs } = timeline
 
-    setCursorTimestampAtInMs(timeInMs)
+    if (cursorTimestampAtInMs !== timeInMs) {
+      setCursorTimestampAtInMs(timeInMs)
+    }
 
     if (mode === MonitoringMode.NONE) {
       return

src/services/ui/theme.ts

@@ -106,6 +106,9 @@ export const backstage: UITheme = {
         // gradientStart: 0.6,
         // gradientEnd: 1.0,
       }
+    },
+    playbackCursor: {
+      lineColor: "#FACC15"
     }
   }
 
@@ -170,6 +173,9 @@ export const midnight: UITheme = {
         gradientStart: 0.6,
         gradientEnd: 1.0,
       }
+    },
+    playbackCursor: {
+      lineColor: "#5B9DF1",
     }
   }
 }
@@ -233,6 +239,9 @@ export const lavender: UITheme = {
         // gradientStart: 0.6,
         // gradientEnd: 1.0,
       }
+    },
+    playbackCursor: {
+      lineColor: "#A78BFA",
     }
   }
 }
@@ -296,6 +305,9 @@ export const flix: UITheme = {
         gradientStart: 0.6,
         gradientEnd: 1.0,
       }
+    },
+    playbackCursor: {
+      lineColor: "#D22F27",
     }
   }
 }
@@ -359,6 +371,9 @@ export const lore: UITheme = {
         gradientStart: 0.6,
         gradientEnd: 1.0,
       }
+    },
+    playbackCursor: {
+      lineColor: "#DE4A80",
     }
   }
 }
@@ -423,6 +438,9 @@ export const gordon: UITheme = {
         // gradientStart: 0.6,
         // gradientEnd: 1.0,
       }
+    },
+    playbackCursor: {
+      lineColor: "#ff8400",
     }
   }
 }
@@ -488,6 +506,9 @@ export const system360: UITheme = {
         // gradientStart: 0.6,
         // gradientEnd: 1.0,
       }
+    },
+    playbackCursor: {
+      lineColor: "#C74E40",
     }
   }
 }
@@ -551,6 +572,9 @@ export const silent: UITheme = {
         // gradientStart: 0.6,
         // gradientEnd: 1.0,
       }
+    },
+    playbackCursor: {
+      lineColor: "#ffffff",
     }
   }
 }
@@ -614,6 +638,9 @@ export const sandy: UITheme = {
         // gradientStart: 0.6,
         // gradientEnd: 1.0,
       }
+    },
+    playbackCursor: {
+      lineColor:  "#e67a7a",
     }
   }
 }