···
192
+
background-color: rgba(0, 0, 0, 0.7);
195
+
transition: opacity 0.2s ease-in-out;
199
+
background-color: #ffffff;
200
+
border: 2px solid #808080;
202
+
inset -2px -2px #c0c0c0,
203
+
inset 2px 2px #404040,
204
+
0 0 10px rgba(0, 0, 0, 0.5);
208
+
animation: fadeIn 0.2s ease-in-out;
209
+
position: relative; /* Ensure proper positioning of close button */
212
+
@keyframes fadeIn {
215
+
transform: translateY(-20px);
219
+
transform: translateY(0);
233
+
.input-group label {
234
+
display: inline-block;
238
+
.input-group input {
239
+
font-family: "Courier Prime", "Courier New", monospace;
241
+
background: #ffffff;
242
+
border: 2px inset #c0c0c0;
248
+
border: 1px solid #c0c0c0;
255
+
justify-content: space-between;
258
+
border-bottom: 1px solid #c0c0c0;
259
+
background-color: #f0f0f0;
266
+
border: 1px solid #c0c0c0;
267
+
border-radius: 3px;
271
+
background-color: #c0c0c0;
275
+
position: absolute;
282
+
background: #d0d0d0;
283
+
border: 1px solid #808080;
284
+
border-radius: 3px;
287
+
text-align: center;
290
+
inset -1px -1px #404040,
291
+
inset 1px 1px #ffffff;
294
+
.modal-close:hover {
295
+
background-color: #c0c0c0;
299
+
.modal-close:active {
301
+
inset 1px 1px #404040,
302
+
inset -1px -1px #ffffff;
307
+
<!-- Help Modal -->
308
+
<div id="help-modal" class="modal">
309
+
<div class="modal-content">
310
+
<div class="title-bar">
313
+
class="modal-close"
314
+
onclick="hideModal('help-modal')"
317
+
aria-label="Close help modal"
321
+
<div class="modal-body">
322
+
<h2>Keyboard Shortcuts:</h2>
324
+
<li><strong>F1</strong>: Show this help screen</li>
326
+
<strong>F2</strong>: Save the current page state
328
+
<li><strong>F3</strong>: Load a saved page state</li>
329
+
<li><strong>Esc</strong>: Close modals</li>
331
+
<strong>Ctrl+Enter</strong>: Execute code in the
336
+
<h2>How to Use PLASTIC:</h2>
339
+
Type a description of what you want to change in the
343
+
Press Ctrl+Enter or click the "GENERATE & EXECUTE"
347
+
PLASTIC will modify itself according to your
350
+
<li>Use F2 to save your modified system</li>
351
+
<li>Use F3 to load a previously saved state</li>
354
+
<h2>About PLASTIC:</h2>
356
+
PLASTIC.EXE is a self-modifying system that lets you
357
+
transform its interface and functionality through
358
+
natural language commands.
361
+
<div style="text-align: center; margin-top: 15px">
362
+
<div class="button" onclick="hideModal('help-modal')">
369
+
<!-- Save Modal -->
370
+
<div id="save-modal" class="modal">
371
+
<div class="modal-content">
372
+
<div class="title-bar">
375
+
class="modal-close"
376
+
onclick="hideModal('save-modal')"
379
+
aria-label="Close save modal"
383
+
<div class="modal-body">
384
+
<h2>Save Current State</h2>
385
+
<div class="input-group">
386
+
<label for="save-name">Name:</label>
390
+
placeholder="Enter save name"
396
+
justify-content: center;
401
+
<div class="button" onclick="saveCurrentHTML()">
404
+
<div class="button" onclick="hideModal('save-modal')">
408
+
<div id="save-message"></div>
410
+
<h2>Saved States</h2>
411
+
<div id="saved-list" class="save-list"></div>
416
+
<!-- Load Modal -->
417
+
<div id="load-modal" class="modal">
418
+
<div class="modal-content">
419
+
<div class="title-bar">
422
+
class="modal-close"
423
+
onclick="hideModal('load-modal')"
426
+
aria-label="Close load modal"
430
+
<div class="modal-body">
431
+
<h2>Load Saved State</h2>
432
+
<div id="load-list" class="save-list"></div>
433
+
<div id="load-message"></div>
434
+
<div style="text-align: center; margin-top: 15px">
435
+
<div class="button" onclick="hideModal('load-modal')">
187
-
C:\PLASTIC.EXE - [Self-Modifying System v2.1]
444
+
C:\PLASTIC.EXE - [Self-Modifying System v3.0]
···
<h2>System Information:</h2>
203
-
<p>PLASTIC v2.1 - Self-Modifying Code System</p>
460
+
<p>PLASTIC v3.0 - Self-Modifying Code System</p>
<p>Copyright (C) 1995 DUNKIRK Corp.</p>
All rights reserved. Licensed to: REGISTERED USER under MIT
···
260
-
<span>F1=Help F2=Save F3=Load F10=Menu</span>
518
+
><span class="hotkey" onclick="showHelp()">F1=Help</span>
519
+
<span class="hotkey" onclick="showSaveModal()"
522
+
<span class="hotkey" onclick="showLoadModal()"
527
+
<span id="time">12:00</span>
···
402
-
// Fallback: use all argument values in order
return window.toolCallbacks[func](
···
console.log("Cleaned response:", cleanResponse);
// For safety, preprocess JavaScript code in JSON to escape problematic characters
498
-
cleanResponse = cleanResponse.replace(/"code"\s*:\s*(`|")([^`"]*?)(`|")/g, function(match, q1, code, q3) {
499
-
// Replace all literal backslashes with double backslashes in the code string
500
-
const escapedCode = code.replace(/\\/g, "\\\\");
501
-
return `"code":${q1}${escapedCode}${q3}`;
763
+
cleanResponse = cleanResponse.replace(
764
+
/"code"\s*:\s*(`|")([^`"]*?)(`|")/g,
765
+
function (match, q1, code, q3) {
766
+
// Replace all literal backslashes with double backslashes in the code string
767
+
const escapedCode = code.replace(/\\/g, "\\\\");
768
+
return `"code":${q1}${escapedCode}${q3}`;
// Check if response contains tool calls
···
// Preprocess JavaScript code in JSON to escape problematic characters
638
-
let cleanJson = jsonMatch[0].replace(/"code"\s*:\s*(`|")([^`"]*?)(`|")/g, function(match, q1, code, q3) {
639
-
// Replace all literal backslashes with double backslashes in the code string
640
-
const escapedCode = code.replace(/\\/g, "\\\\");
641
-
return `"code":${q1}${escapedCode}${q3}`;
906
+
let cleanJson = jsonMatch[0].replace(
907
+
/"code"\s*:\s*(`|")([^`"]*?)(`|")/g,
908
+
function (match, q1, code, q3) {
909
+
// Replace all literal backslashes with double backslashes in the code string
910
+
const escapedCode = code.replace(
914
+
return `"code":${q1}${escapedCode}${q3}`;
const toolResponse = safeJsonParse(cleanJson);
toolResponse.tool_calls &&
···
console.error("JSON parse error:", error);
console.error("Problem JSON:", jsonString);
// Try to escape any unescaped control characters
691
-
const escapedJson = jsonString.replace(/[\u0000-\u001F]/g, match => {
692
-
return '\\u' + ('0000' + match.charCodeAt(0).toString(16)).slice(-4);
965
+
const escapedJson = jsonString.replace(
966
+
/[\u0000-\u001F]/g,
971
+
"0000" + match.charCodeAt(0).toString(16)
return JSON.parse(escapedJson);
697
-
console.error("Second parse attempt failed:", secondError);
980
+
"Second parse attempt failed:",
throw error; // Throw the original error
703
-
// Handle Ctrl+Enter in textarea
704
-
function setupCtrlEnterHandler() {
988
+
function deleteSave(key) {
989
+
if (confirm("Are you sure you want to delete this save?")) {
990
+
localStorage.removeItem(key);
991
+
// Refresh the load modal to show updated list
996
+
// Handle keyboard shortcuts
997
+
function setupKeyboardHandlers() {
const codeEditor = document.getElementById("codeEditor");
// Remove any previous event listeners first (to avoid duplicates)
708
-
codeEditor.removeEventListener("keydown", ctrlEnterHandler);
1001
+
codeEditor.removeEventListener("keydown", editorKeyHandler);
// Add a new event listener
710
-
codeEditor.addEventListener("keydown", ctrlEnterHandler);
1003
+
codeEditor.addEventListener("keydown", editorKeyHandler);
console.error("codeEditor element not found, will retry");
// Retry after a short delay
714
-
setTimeout(setupCtrlEnterHandler, 100);
1007
+
setTimeout(setupKeyboardHandlers, 100);
1010
+
// Global keyboard shortcuts
1011
+
document.addEventListener("keydown", function (e) {
1013
+
if (e.key === "F1") {
1014
+
e.preventDefault();
1018
+
else if (e.key === "F2") {
1019
+
e.preventDefault();
1023
+
else if (e.key === "F3") {
1024
+
e.preventDefault();
1027
+
// Escape key - Close any open modal
1028
+
else if (e.key === "Escape") {
1029
+
document.querySelectorAll(".modal").forEach((modal) => {
1030
+
if (modal.style.display === "block") {
1031
+
hideModal(modal.id);
1032
+
// Return focus to the editor after closing modal
1034
+
document.getElementById("codeEditor");
718
-
// Define the handler function separately so it can be added/removed consistently
719
-
function ctrlEnterHandler(e) {
1044
+
// Define the editor key handler function
1045
+
function editorKeyHandler(e) {
if (e.ctrlKey && e.key === "Enter") {
726
-
// Set up the handler immediately
727
-
setupCtrlEnterHandler();
729
-
// Also ensure it's set up when the DOM is fully loaded
730
-
window.addEventListener("DOMContentLoaded", setupCtrlEnterHandler);
731
-
window.addEventListener("load", setupCtrlEnterHandler);
1052
+
// Set up the handlers immediately
1053
+
setupKeyboardHandlers();
1055
+
// Also ensure they're set up when the DOM is fully loaded
1056
+
// Modal functions
1057
+
function showModal(modalId) {
1058
+
const modal = document.getElementById(modalId);
1060
+
modal.style.display = "block";
1061
+
// Prevent body scrolling when modal is open
1062
+
document.body.style.overflow = "hidden";
1064
+
// Make the modal appear with a nice fade-in effect
1065
+
modal.style.opacity = "0";
1066
+
setTimeout(() => {
1067
+
modal.style.opacity = "1";
1070
+
// Add/refresh click handler for closing when clicking outside
1071
+
const outsideClickHandler = function (e) {
1072
+
if (e.target === modal) {
1073
+
hideModal(modalId);
1076
+
// Remove any existing handlers to avoid duplicates
1077
+
modal.removeEventListener("click", outsideClickHandler);
1078
+
modal.addEventListener("click", outsideClickHandler);
1080
+
// Trap focus within the modal
1081
+
const focusableElements = modal.querySelectorAll(
1082
+
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), .modal-close, .button',
1084
+
if (focusableElements.length > 0) {
1085
+
const firstElement = focusableElements[0];
1086
+
const lastElement =
1087
+
focusableElements[focusableElements.length - 1];
1089
+
// Focus the first element
1090
+
setTimeout(() => {
1091
+
firstElement.focus();
1094
+
// Add key event handler for tab key to trap focus
1095
+
const handleTabKey = function (e) {
1096
+
if (e.key === "Tab") {
1099
+
document.activeElement === firstElement
1101
+
e.preventDefault();
1102
+
lastElement.focus();
1105
+
document.activeElement === lastElement
1107
+
e.preventDefault();
1108
+
firstElement.focus();
1113
+
// Remove any existing handler first
1114
+
modal.removeEventListener("keydown", handleTabKey);
1115
+
modal.addEventListener("keydown", handleTabKey);
1117
+
// Store the handler on the modal object for later cleanup
1118
+
modal._tabHandler = handleTabKey;
1123
+
function hideModal(modalId) {
1124
+
const modal = document.getElementById(modalId);
1126
+
// Fade out effect
1127
+
modal.style.opacity = "0";
1129
+
// Hide the modal after animation
1130
+
setTimeout(() => {
1131
+
modal.style.display = "none";
1132
+
// Restore body scrolling when modal is closed
1133
+
document.body.style.overflow = "auto";
1136
+
// Return focus to editor when modal is closed
1137
+
const editor = document.getElementById("codeEditor");
1142
+
// Clear any error messages
1143
+
const messageElements = document.querySelectorAll(
1144
+
"#save-message, #load-message",
1146
+
messageElements.forEach((el) => {
1147
+
if (el) el.textContent = "";
1152
+
function showHelp() {
1153
+
showModal("help-modal");
1156
+
function showSaveModal() {
1157
+
document.getElementById("save-name").value = "";
1158
+
showModal("save-modal");
1159
+
// Focus the input field and select any existing text
1160
+
setTimeout(() => {
1161
+
const saveNameInput = document.getElementById("save-name");
1162
+
saveNameInput.focus();
1163
+
saveNameInput.select();
1167
+
function showLoadModal() {
1168
+
// Populate the load list
1169
+
const loadList = document.getElementById("load-list");
1170
+
loadList.innerHTML = "";
1172
+
// Get all keys in localStorage that start with 'plastic-save-'
1174
+
for (let i = 0; i < localStorage.length; i++) {
1175
+
const key = localStorage.key(i);
1176
+
if (key && key.startsWith("plastic-save-")) {
1177
+
const saveName = key.replace("plastic-save-", "");
1178
+
let timestamp = null;
1180
+
// Try to extract timestamp if it's a JSON object
1182
+
const saveData = JSON.parse(
1183
+
localStorage.getItem(key),
1185
+
timestamp = saveData.timestamp;
1187
+
// Old format, no timestamp available
1193
+
timestamp: timestamp,
1198
+
if (saves.length === 0) {
1199
+
loadList.innerHTML =
1200
+
'<div class="save-item">No saves found</div>';
1202
+
// Sort saves by timestamp (newest first) or alphabetically if no timestamp
1203
+
saves.sort((a, b) => {
1204
+
if (a.timestamp && b.timestamp) {
1205
+
return b.timestamp - a.timestamp; // Newest first
1206
+
} else if (a.timestamp) {
1207
+
return -1; // a comes first
1208
+
} else if (b.timestamp) {
1209
+
return 1; // b comes first
1211
+
return a.name.localeCompare(b.name); // Alphabetically
1215
+
saves.forEach((save) => {
1216
+
const saveItem = document.createElement("div");
1217
+
saveItem.className = "save-item";
1219
+
// Format timestamp if available
1221
+
if (save.timestamp) {
1222
+
const date = new Date(save.timestamp);
1223
+
dateStr = ` <span style="font-size: 12px; color: #808080;">(${date.toLocaleString()})</span>`;
1226
+
saveItem.innerHTML = `
1227
+
<span>${save.name}${dateStr}</span>
1229
+
<span class="hotkey" onclick="loadSave('${save.key}')" tabindex="0" role="button" aria-label="Load save ${save.name}">Load</span>
1230
+
<span class="separator">|</span>
1231
+
<span class="hotkey" onclick="deleteSave('${save.key}')" tabindex="0" role="button" aria-label="Delete save ${save.name}">Delete</span>
1234
+
// Add double-click support to load the save directly
1235
+
saveItem.addEventListener("dblclick", () =>
1236
+
loadSave(save.key),
1238
+
loadList.appendChild(saveItem);
1242
+
showModal("load-modal");
733
-
// Update time in status bar
734
-
setInterval(() => {
735
-
const now = new Date();
736
-
const timeStr = now.toLocaleTimeString([], {
741
-
const statusBarTime = document.querySelector(
742
-
".status-bar span:last-child",
744
-
if (statusBarTime) {
745
-
statusBarTime.textContent = timeStr;
1245
+
function saveCurrentHTML() {
1246
+
const saveName = document
1247
+
.getElementById("save-name")
1250
+
const saveMessage = document.getElementById("save-message");
1251
+
saveMessage.textContent =
1252
+
"Please enter a name for your save";
1253
+
saveMessage.style.color = "#ff0000";
1254
+
setTimeout(() => {
1255
+
saveMessage.textContent = "";
748
-
// Update memory in status bar based on actual tab memory usage
749
-
const memoryUsage = Math.round(
751
-
? performance.memory.usedJSHeapSize / 1024
1261
+
// Ensure all modals are closed in the saved HTML
1262
+
// First make a clone of the current document state
1263
+
const tempDiv = document.createElement("div");
1264
+
tempDiv.innerHTML = document.documentElement.outerHTML;
755
-
const memoryStr = `${589 - Math.min(Math.round(memoryUsage / 1024), 500)}K free`;
756
-
const memory = document.getElementById("memory");
758
-
memory.textContent = memoryStr;
1266
+
// Find and hide all modals in the clone
1267
+
const modalElements = tempDiv.querySelectorAll(".modal");
1268
+
modalElements.forEach((modal) => {
1269
+
modal.style.display = "none";
1272
+
// Save the current state
1273
+
const saveData = {
1274
+
html: tempDiv.innerHTML,
1275
+
timestamp: new Date().getTime(),
1279
+
localStorage.setItem(
1280
+
`plastic-save-${saveName}`,
1281
+
JSON.stringify(saveData),
1284
+
const saveMessage = document.getElementById("save-message");
1285
+
saveMessage.textContent = `Saved as "${saveName}"`;
1286
+
saveMessage.style.color = "#008000";
1287
+
setTimeout(() => {
1288
+
saveMessage.textContent = "";
1289
+
hideModal("save-modal");
1292
+
const saveMessage = document.getElementById("save-message");
1293
+
saveMessage.textContent = `Error saving: ${e.message}`;
1294
+
saveMessage.style.color = "#ff0000";
1295
+
setTimeout(() => {
1296
+
saveMessage.textContent = "";
1301
+
// Add keyboard support for modals
1302
+
document.addEventListener("DOMContentLoaded", function () {
1303
+
const saveNameInput = document.getElementById("save-name");
1304
+
if (saveNameInput) {
1305
+
// Remove any existing listeners to prevent duplicates
1306
+
const saveInputHandler = function (e) {
1307
+
if (e.key === "Enter") {
1308
+
e.preventDefault();
1309
+
saveCurrentHTML();
1313
+
saveNameInput.removeEventListener(
1317
+
saveNameInput.addEventListener("keydown", saveInputHandler);
761
-
// Update runtime in status bar - based on how long the page has been open
762
-
const pageOpenTime = performance.timing
763
-
? performance.timing.navigationStart || Date.now()
765
-
const timeOpen = Math.floor((Date.now() - pageOpenTime) / 1000);
766
-
const hours = Math.floor(timeOpen / 3600)
769
-
const minutes = Math.floor((timeOpen % 3600) / 60)
772
-
const seconds = Math.floor(timeOpen % 60)
775
-
const runtimeStr = `${hours}:${minutes}:${seconds}`;
776
-
const runtime = document.getElementById("runtime");
778
-
runtime.textContent = runtimeStr;
1321
+
.querySelectorAll(".modal-close")
1322
+
.forEach((closeBtn) => {
1323
+
closeBtn.addEventListener("keydown", function (e) {
1324
+
if (e.key === "Enter" || e.key === " ") {
1325
+
e.preventDefault();
1326
+
const modalId = this.closest(".modal").id;
1327
+
hideModal(modalId);
1333
+
function loadSave(key) {
1335
+
const savedData = localStorage.getItem(key);
1340
+
saveObj = JSON.parse(savedData);
1342
+
saveObj = { html: savedData };
1347
+
"Loading will replace the current page. Continue?",
1350
+
hideModal("load-modal");
1352
+
const scriptToAdd = `
1354
+
document.addEventListener('DOMContentLoaded', function() {
1355
+
// Ensure all modals are hidden
1356
+
document.querySelectorAll('.modal').forEach(modal => {
1357
+
modal.style.display = "none";
1360
+
// Re-setup keyboard handlers
1361
+
if (typeof setupKeyboardHandlers === 'function') {
1362
+
setupKeyboardHandlers();
1368
+
// Load the saved HTML with the added script
1370
+
document.write(saveObj.html + scriptToAdd);
1374
+
const loadMessage =
1375
+
document.getElementById("load-message");
1376
+
loadMessage.textContent = "Save not found";
1377
+
loadMessage.style.color = "#ff0000";
1378
+
setTimeout(() => {
1379
+
loadMessage.textContent = "";
1383
+
const loadMessage = document.getElementById("load-message");
1384
+
loadMessage.textContent = `Error loading: ${e.message}`;
1385
+
loadMessage.style.color = "#ff0000";
1386
+
setTimeout(() => {
1387
+
loadMessage.textContent = "";
dunkirk.sh