@midscene/visualizer 0.30.10 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (123) hide show
  1. package/dist/es/component/blackboard/index.css +8 -0
  2. package/dist/es/component/blackboard/index.mjs +137 -68
  3. package/dist/es/component/config-selector/index.mjs +102 -4
  4. package/dist/es/component/context-preview/index.mjs +1 -2
  5. package/dist/es/component/env-config/index.mjs +1 -2
  6. package/dist/es/component/env-config-reminder/index.css +8 -0
  7. package/dist/es/component/env-config-reminder/index.mjs +1 -2
  8. package/dist/es/component/form-field/index.mjs +5 -10
  9. package/dist/es/component/history-selector/index.css +38 -1
  10. package/dist/es/component/history-selector/index.mjs +1 -2
  11. package/dist/es/component/logo/index.mjs +7 -3
  12. package/dist/es/component/misc/index.mjs +1 -4
  13. package/dist/es/component/nav-actions/index.mjs +1 -2
  14. package/dist/es/component/nav-actions/style.css +1 -1
  15. package/dist/es/component/player/index.css +26 -0
  16. package/dist/es/component/player/index.mjs +376 -364
  17. package/dist/es/component/playground/index.css +291 -31
  18. package/dist/es/component/playground-result/index.css +10 -0
  19. package/dist/es/component/playground-result/index.mjs +129 -10
  20. package/dist/es/component/prompt-input/index.css +281 -31
  21. package/dist/es/component/prompt-input/index.mjs +83 -25
  22. package/dist/es/component/screenshot-viewer/index.css +214 -0
  23. package/dist/es/component/screenshot-viewer/index.mjs +282 -0
  24. package/dist/es/component/service-mode-control/index.mjs +1 -2
  25. package/dist/es/component/shiny-text/index.css +35 -3
  26. package/dist/es/component/shiny-text/index.mjs +3 -3
  27. package/dist/es/component/universal-playground/index.css +61 -1
  28. package/dist/es/component/universal-playground/index.mjs +106 -83
  29. package/dist/es/component/universal-playground/providers/context-provider.mjs +56 -18
  30. package/dist/es/component/universal-playground/providers/indexeddb-storage-provider.mjs +213 -139
  31. package/dist/es/component/universal-playground/providers/storage-provider.mjs +199 -121
  32. package/dist/es/hooks/usePlaygroundExecution.mjs +297 -146
  33. package/dist/es/hooks/usePlaygroundState.mjs +141 -75
  34. package/dist/es/hooks/useSafeOverrideAIConfig.mjs +2 -6
  35. package/dist/es/hooks/useServerValid.mjs +37 -12
  36. package/dist/es/hooks/useTheme.mjs +25 -0
  37. package/dist/es/icons/avatar.mjs +46 -4
  38. package/dist/es/icons/close.mjs +46 -4
  39. package/dist/es/icons/global-perspective.mjs +47 -5
  40. package/dist/es/icons/history.mjs +48 -6
  41. package/dist/es/icons/magnifying-glass.mjs +47 -5
  42. package/dist/es/icons/player-setting.mjs +48 -6
  43. package/dist/es/icons/setting.mjs +47 -5
  44. package/dist/es/icons/show-marker.mjs +47 -5
  45. package/dist/es/index.mjs +4 -4
  46. package/dist/es/store/history.mjs +46 -7
  47. package/dist/es/store/store.mjs +68 -2
  48. package/dist/es/types.mjs +1 -1
  49. package/dist/es/utils/constants.mjs +7 -3
  50. package/dist/es/utils/index.mjs +4 -1
  51. package/dist/es/utils/pixi-loader.mjs +37 -11
  52. package/dist/es/utils/replay-scripts.mjs +160 -111
  53. package/dist/lib/component/blackboard/index.css +8 -0
  54. package/dist/lib/component/blackboard/index.js +139 -70
  55. package/dist/lib/component/config-selector/index.js +103 -5
  56. package/dist/lib/component/context-preview/index.js +3 -4
  57. package/dist/lib/component/env-config/index.js +3 -4
  58. package/dist/lib/component/env-config-reminder/index.css +8 -0
  59. package/dist/lib/component/env-config-reminder/index.js +3 -4
  60. package/dist/lib/component/form-field/index.js +10 -15
  61. package/dist/lib/component/history-selector/index.css +38 -1
  62. package/dist/lib/component/history-selector/index.js +3 -4
  63. package/dist/lib/component/index.js +6 -8
  64. package/dist/lib/component/logo/index.js +9 -5
  65. package/dist/lib/component/misc/index.js +6 -9
  66. package/dist/lib/component/nav-actions/index.js +3 -4
  67. package/dist/lib/component/nav-actions/style.css +1 -1
  68. package/dist/lib/component/player/index.css +26 -0
  69. package/dist/lib/component/player/index.js +376 -365
  70. package/dist/lib/component/playground/index.css +291 -31
  71. package/dist/lib/component/playground/index.js +31 -33
  72. package/dist/lib/component/playground-result/index.css +10 -0
  73. package/dist/lib/component/playground-result/index.js +131 -12
  74. package/dist/lib/component/prompt-input/index.css +281 -31
  75. package/dist/lib/component/prompt-input/index.js +84 -26
  76. package/dist/lib/component/screenshot-viewer/index.css +214 -0
  77. package/dist/lib/component/screenshot-viewer/index.js +316 -0
  78. package/dist/lib/component/service-mode-control/index.js +3 -4
  79. package/dist/lib/component/shiny-text/index.css +35 -3
  80. package/dist/lib/component/shiny-text/index.js +5 -5
  81. package/dist/lib/component/universal-playground/index.css +61 -1
  82. package/dist/lib/component/universal-playground/index.js +108 -84
  83. package/dist/lib/component/universal-playground/providers/context-provider.js +58 -20
  84. package/dist/lib/component/universal-playground/providers/indexeddb-storage-provider.js +217 -143
  85. package/dist/lib/component/universal-playground/providers/storage-provider.js +207 -129
  86. package/dist/lib/hooks/usePlaygroundExecution.js +299 -148
  87. package/dist/lib/hooks/usePlaygroundState.js +143 -77
  88. package/dist/lib/hooks/useSafeOverrideAIConfig.js +4 -8
  89. package/dist/lib/hooks/useServerValid.js +39 -14
  90. package/dist/lib/hooks/useTheme.js +59 -0
  91. package/dist/lib/icons/avatar.js +48 -6
  92. package/dist/lib/icons/close.js +48 -6
  93. package/dist/lib/icons/global-perspective.js +49 -7
  94. package/dist/lib/icons/history.js +50 -8
  95. package/dist/lib/icons/magnifying-glass.js +49 -7
  96. package/dist/lib/icons/player-setting.js +50 -8
  97. package/dist/lib/icons/setting.js +49 -7
  98. package/dist/lib/icons/show-marker.js +49 -7
  99. package/dist/lib/index.js +44 -34
  100. package/dist/lib/store/history.js +48 -9
  101. package/dist/lib/store/store.js +74 -8
  102. package/dist/lib/types.js +3 -3
  103. package/dist/lib/utils/color.js +2 -2
  104. package/dist/lib/utils/constants.js +20 -4
  105. package/dist/lib/utils/index.js +10 -4
  106. package/dist/lib/utils/pixi-loader.js +41 -15
  107. package/dist/lib/utils/playground-utils.js +4 -4
  108. package/dist/lib/utils/replay-scripts.js +164 -115
  109. package/dist/types/component/config-selector/index.d.ts +2 -0
  110. package/dist/types/component/player/index.d.ts +0 -1
  111. package/dist/types/component/playground-result/index.d.ts +1 -0
  112. package/dist/types/component/prompt-input/index.d.ts +2 -1
  113. package/dist/types/component/screenshot-viewer/index.d.ts +15 -0
  114. package/dist/types/hooks/usePlaygroundExecution.d.ts +1 -1
  115. package/dist/types/hooks/usePlaygroundState.d.ts +3 -3
  116. package/dist/types/hooks/useTheme.d.ts +7 -0
  117. package/dist/types/index.d.ts +3 -3
  118. package/dist/types/store/store.d.ts +18 -1
  119. package/dist/types/types.d.ts +14 -4
  120. package/dist/types/utils/constants.d.ts +5 -1
  121. package/dist/types/utils/index.d.ts +1 -0
  122. package/dist/types/utils/replay-scripts.d.ts +1 -1
  123. package/package.json +12 -22
@@ -1,4 +1,30 @@
1
1
  import { IndexedDBStorageProvider, MemoryStorageProvider, NoOpStorageProvider } from "./indexeddb-storage-provider.mjs";
2
+ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
3
+ try {
4
+ var info = gen[key](arg);
5
+ var value = info.value;
6
+ } catch (error) {
7
+ reject(error);
8
+ return;
9
+ }
10
+ if (info.done) resolve(value);
11
+ else Promise.resolve(value).then(_next, _throw);
12
+ }
13
+ function _async_to_generator(fn) {
14
+ return function() {
15
+ var self = this, args = arguments;
16
+ return new Promise(function(resolve, reject) {
17
+ var gen = fn.apply(self, args);
18
+ function _next(value) {
19
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
20
+ }
21
+ function _throw(err) {
22
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
23
+ }
24
+ _next(void 0);
25
+ });
26
+ };
27
+ }
2
28
  function _define_property(obj, key, value) {
3
29
  if (key in obj) Object.defineProperty(obj, key, {
4
30
  value: value,
@@ -9,6 +35,38 @@ function _define_property(obj, key, value) {
9
35
  else obj[key] = value;
10
36
  return obj;
11
37
  }
38
+ function _object_spread(target) {
39
+ for(var i = 1; i < arguments.length; i++){
40
+ var source = null != arguments[i] ? arguments[i] : {};
41
+ var ownKeys = Object.keys(source);
42
+ if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
43
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
44
+ }));
45
+ ownKeys.forEach(function(key) {
46
+ _define_property(target, key, source[key]);
47
+ });
48
+ }
49
+ return target;
50
+ }
51
+ function storage_provider_ownKeys(object, enumerableOnly) {
52
+ var keys = Object.keys(object);
53
+ if (Object.getOwnPropertySymbols) {
54
+ var symbols = Object.getOwnPropertySymbols(object);
55
+ if (enumerableOnly) symbols = symbols.filter(function(sym) {
56
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
57
+ });
58
+ keys.push.apply(keys, symbols);
59
+ }
60
+ return keys;
61
+ }
62
+ function _object_spread_props(target, source) {
63
+ source = null != source ? source : {};
64
+ if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
65
+ else storage_provider_ownKeys(Object(source)).forEach(function(key) {
66
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
67
+ });
68
+ return target;
69
+ }
12
70
  class LocalStorageProvider {
13
71
  checkStorageSpace() {
14
72
  try {
@@ -21,114 +79,119 @@ class LocalStorageProvider {
21
79
  return false;
22
80
  }
23
81
  }
24
- async saveMessages(messages) {
25
- try {
26
- if (!this.checkStorageSpace()) {
27
- console.warn('Low storage space detected, clearing old data...');
28
- await this.handleQuotaExceeded();
29
- }
30
- const messagesToSave = messages.slice(-this.maxStorageItems);
31
- const lightMessages = messagesToSave.map((msg)=>({
32
- ...msg,
33
- result: void 0
34
- }));
35
- const messageData = JSON.stringify(lightMessages);
36
- localStorage.setItem(this.messagesKey, messageData);
37
- } catch (error) {
38
- if (error instanceof DOMException && 'QuotaExceededError' === error.name) {
39
- console.warn('LocalStorage quota exceeded, attempting to clear old data and retry...');
40
- await this.handleQuotaExceeded();
41
- try {
42
- const recentMessages = messages.slice(-10);
43
- const lightRecentMessages = recentMessages.map((msg)=>({
44
- ...msg,
45
- result: void 0
46
- }));
47
- const messageData = JSON.stringify(lightRecentMessages);
48
- localStorage.setItem(this.messagesKey, messageData);
49
- console.info('Successfully saved recent messages after clearing storage');
50
- } catch (retryError) {
51
- console.error('Failed to save even after clearing storage:', retryError);
52
- await this.clearMessages();
82
+ saveMessages(messages) {
83
+ return _async_to_generator(function*() {
84
+ try {
85
+ if (!this.checkStorageSpace()) {
86
+ console.warn('Low storage space detected, clearing old data...');
87
+ yield this.handleQuotaExceeded();
53
88
  }
54
- } else console.error('Failed to save messages to localStorage:', error);
55
- }
56
- }
57
- async loadMessages() {
58
- try {
59
- const stored = localStorage.getItem(this.messagesKey);
60
- if (!stored) return [];
61
- const messages = JSON.parse(stored);
62
- const restoredMessages = await Promise.all(messages.map(async (msg)=>{
63
- if ('result' === msg.type && msg.id) {
64
- const resultKey = `${this.resultsKey}-${msg.id}`;
65
- const storedResult = localStorage.getItem(resultKey);
66
- if (storedResult) try {
67
- const resultItem = JSON.parse(storedResult);
68
- return {
69
- ...msg,
70
- ...resultItem
71
- };
72
- } catch (e) {
73
- console.warn('Failed to parse stored result:', e);
89
+ const messagesToSave = messages.slice(-this.maxStorageItems);
90
+ const lightMessages = messagesToSave.map((msg)=>_object_spread_props(_object_spread({}, msg), {
91
+ result: 'result' === msg.type ? void 0 : msg.result
92
+ }));
93
+ const messageData = JSON.stringify(lightMessages);
94
+ localStorage.setItem(this.messagesKey, messageData);
95
+ } catch (error) {
96
+ if (error instanceof DOMException && 'QuotaExceededError' === error.name) {
97
+ console.warn('LocalStorage quota exceeded, attempting to clear old data and retry...');
98
+ yield this.handleQuotaExceeded();
99
+ try {
100
+ const recentMessages = messages.slice(-10);
101
+ const lightRecentMessages = recentMessages.map((msg)=>_object_spread_props(_object_spread({}, msg), {
102
+ result: 'result' === msg.type ? void 0 : msg.result
103
+ }));
104
+ const messageData = JSON.stringify(lightRecentMessages);
105
+ localStorage.setItem(this.messagesKey, messageData);
106
+ console.info('Successfully saved recent messages after clearing storage');
107
+ } catch (retryError) {
108
+ console.error('Failed to save even after clearing storage:', retryError);
109
+ yield this.clearMessages();
74
110
  }
75
- }
76
- return msg;
77
- }));
78
- return restoredMessages;
79
- } catch (error) {
80
- console.error('Failed to load messages from localStorage:', error);
81
- return [];
82
- }
111
+ } else console.error('Failed to save messages to localStorage:', error);
112
+ }
113
+ }).call(this);
83
114
  }
84
- async clearMessages() {
85
- try {
86
- localStorage.removeItem(this.messagesKey);
87
- const keys = Object.keys(localStorage);
88
- keys.forEach((key)=>{
89
- if (key.startsWith(this.resultsKey)) localStorage.removeItem(key);
90
- });
91
- } catch (error) {
92
- console.error('Failed to clear messages from localStorage:', error);
93
- }
115
+ loadMessages() {
116
+ return _async_to_generator(function*() {
117
+ try {
118
+ const stored = localStorage.getItem(this.messagesKey);
119
+ if (!stored) return [];
120
+ const messages = JSON.parse(stored);
121
+ const restoredMessages = yield Promise.all(messages.map((msg)=>_async_to_generator(function*() {
122
+ if ('result' === msg.type && msg.id) {
123
+ const resultKey = `${this.resultsKey}-${msg.id}`;
124
+ const storedResult = localStorage.getItem(resultKey);
125
+ if (storedResult) try {
126
+ const resultItem = JSON.parse(storedResult);
127
+ return _object_spread({}, msg, resultItem);
128
+ } catch (e) {
129
+ console.warn('Failed to parse stored result:', e);
130
+ }
131
+ }
132
+ return msg;
133
+ }).call(this)));
134
+ return restoredMessages;
135
+ } catch (error) {
136
+ console.error('Failed to load messages from localStorage:', error);
137
+ return [];
138
+ }
139
+ }).call(this);
94
140
  }
95
- async saveResult(id, result) {
96
- try {
97
- const resultKey = `${this.resultsKey}-${id}`;
98
- localStorage.setItem(resultKey, JSON.stringify(result));
99
- } catch (error) {
100
- if (error instanceof DOMException && 'QuotaExceededError' === error.name) {
101
- console.warn('LocalStorage quota exceeded when saving result, clearing old results...');
102
- await this.handleQuotaExceeded();
103
- try {
104
- const resultKey = `${this.resultsKey}-${id}`;
105
- localStorage.setItem(resultKey, JSON.stringify(result));
106
- } catch (retryError) {
107
- console.error('Failed to save result even after clearing storage:', retryError);
108
- }
109
- } else console.error('Failed to save result to localStorage:', error);
110
- }
141
+ clearMessages() {
142
+ return _async_to_generator(function*() {
143
+ try {
144
+ localStorage.removeItem(this.messagesKey);
145
+ const keys = Object.keys(localStorage);
146
+ keys.forEach((key)=>{
147
+ if (key.startsWith(this.resultsKey)) localStorage.removeItem(key);
148
+ });
149
+ } catch (error) {
150
+ console.error('Failed to clear messages from localStorage:', error);
151
+ }
152
+ }).call(this);
111
153
  }
112
- async handleQuotaExceeded() {
113
- try {
114
- const keys = Object.keys(localStorage);
115
- const resultKeys = keys.filter((key)=>key.startsWith(this.resultsKey));
116
- const keysToRemove = resultKeys.slice(0, Math.max(1, Math.floor(resultKeys.length / 2)));
117
- keysToRemove.forEach((key)=>{
118
- localStorage.removeItem(key);
119
- });
120
- console.info(`Cleared ${keysToRemove.length} old result entries to free up storage space`);
121
- const playgroundKeys = keys.filter((key)=>key.includes('playground') || key.includes('agent') || key.startsWith('midscene'));
122
- if (playgroundKeys.length > 10) {
123
- const additionalKeysToRemove = playgroundKeys.slice(0, Math.floor(playgroundKeys.length / 3));
124
- additionalKeysToRemove.forEach((key)=>{
125
- if (key !== this.messagesKey) localStorage.removeItem(key);
154
+ saveResult(id, result) {
155
+ return _async_to_generator(function*() {
156
+ try {
157
+ const resultKey = `${this.resultsKey}-${id}`;
158
+ localStorage.setItem(resultKey, JSON.stringify(result));
159
+ } catch (error) {
160
+ if (error instanceof DOMException && 'QuotaExceededError' === error.name) {
161
+ console.warn('LocalStorage quota exceeded when saving result, clearing old results...');
162
+ yield this.handleQuotaExceeded();
163
+ try {
164
+ const resultKey = `${this.resultsKey}-${id}`;
165
+ localStorage.setItem(resultKey, JSON.stringify(result));
166
+ } catch (retryError) {
167
+ console.error('Failed to save result even after clearing storage:', retryError);
168
+ }
169
+ } else console.error('Failed to save result to localStorage:', error);
170
+ }
171
+ }).call(this);
172
+ }
173
+ handleQuotaExceeded() {
174
+ return _async_to_generator(function*() {
175
+ try {
176
+ const keys = Object.keys(localStorage);
177
+ const resultKeys = keys.filter((key)=>key.startsWith(this.resultsKey));
178
+ const keysToRemove = resultKeys.slice(0, Math.max(1, Math.floor(resultKeys.length / 2)));
179
+ keysToRemove.forEach((key)=>{
180
+ localStorage.removeItem(key);
126
181
  });
127
- console.info(`Cleared ${additionalKeysToRemove.length} additional playground-related entries`);
182
+ console.info(`Cleared ${keysToRemove.length} old result entries to free up storage space`);
183
+ const playgroundKeys = keys.filter((key)=>key.includes('playground') || key.includes('agent') || key.startsWith('midscene'));
184
+ if (playgroundKeys.length > 10) {
185
+ const additionalKeysToRemove = playgroundKeys.slice(0, Math.floor(playgroundKeys.length / 3));
186
+ additionalKeysToRemove.forEach((key)=>{
187
+ if (key !== this.messagesKey) localStorage.removeItem(key);
188
+ });
189
+ console.info(`Cleared ${additionalKeysToRemove.length} additional playground-related entries`);
190
+ }
191
+ } catch (error) {
192
+ console.error('Failed to handle quota exceeded:', error);
128
193
  }
129
- } catch (error) {
130
- console.error('Failed to handle quota exceeded:', error);
131
- }
194
+ }).call(this);
132
195
  }
133
196
  constructor(namespace = 'playground'){
134
197
  _define_property(this, "messagesKey", void 0);
@@ -139,22 +202,30 @@ class LocalStorageProvider {
139
202
  }
140
203
  }
141
204
  class storage_provider_MemoryStorageProvider {
142
- async saveMessages(messages) {
143
- this.messages = [
144
- ...messages
145
- ];
205
+ saveMessages(messages) {
206
+ return _async_to_generator(function*() {
207
+ this.messages = [
208
+ ...messages
209
+ ];
210
+ }).call(this);
146
211
  }
147
- async loadMessages() {
148
- return [
149
- ...this.messages
150
- ];
212
+ loadMessages() {
213
+ return _async_to_generator(function*() {
214
+ return [
215
+ ...this.messages
216
+ ];
217
+ }).call(this);
151
218
  }
152
- async clearMessages() {
153
- this.messages = [];
154
- this.results.clear();
219
+ clearMessages() {
220
+ return _async_to_generator(function*() {
221
+ this.messages = [];
222
+ this.results.clear();
223
+ }).call(this);
155
224
  }
156
- async saveResult(id, result) {
157
- this.results.set(id, result);
225
+ saveResult(id, result) {
226
+ return _async_to_generator(function*() {
227
+ this.results.set(id, result);
228
+ }).call(this);
158
229
  }
159
230
  constructor(){
160
231
  _define_property(this, "messages", []);
@@ -162,12 +233,20 @@ class storage_provider_MemoryStorageProvider {
162
233
  }
163
234
  }
164
235
  class storage_provider_NoOpStorageProvider {
165
- async saveMessages(_messages) {}
166
- async loadMessages() {
167
- return [];
236
+ saveMessages(_messages) {
237
+ return _async_to_generator(function*() {})();
238
+ }
239
+ loadMessages() {
240
+ return _async_to_generator(function*() {
241
+ return [];
242
+ })();
243
+ }
244
+ clearMessages() {
245
+ return _async_to_generator(function*() {})();
246
+ }
247
+ saveResult(_id, _result) {
248
+ return _async_to_generator(function*() {})();
168
249
  }
169
- async clearMessages() {}
170
- async saveResult(_id, _result) {}
171
250
  }
172
251
  var storage_provider_StorageType = /*#__PURE__*/ function(StorageType) {
173
252
  StorageType["INDEXEDDB"] = "indexeddb";
@@ -176,8 +255,7 @@ var storage_provider_StorageType = /*#__PURE__*/ function(StorageType) {
176
255
  StorageType["NONE"] = "none";
177
256
  return StorageType;
178
257
  }({});
179
- function createStorageProvider() {
180
- let type = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "indexeddb", namespace = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 'playground';
258
+ function createStorageProvider(type = "indexeddb", namespace = 'playground') {
181
259
  switch(type){
182
260
  case "indexeddb":
183
261
  if ('undefined' != typeof indexedDB) return new IndexedDBStorageProvider(namespace);