npm - synthos - Versions diffs - 0.1.0 - Mend

synthos 0.1.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 (102) hide show

package/LICENSE +21 -0
package/README.md +71 -0
package/bin/synthos.js +3 -0
package/default-pages/[application].html +87 -0
package/default-pages/[markdown].html +261 -0
package/default-pages/[sidebar].html +89 -0
package/default-pages/[split-application].html +133 -0
package/default-pages/json_tools.html +176 -0
package/default-scripts/android.terminal.json +7 -0
package/default-scripts/linux-terminal.json +7 -0
package/default-scripts/mac-terminal.json +7 -0
package/default-scripts/windows-terminal.json +7 -0
package/dist/files.d.ts +9 -0
package/dist/files.d.ts.map +1 -0
package/dist/files.js +79 -0
package/dist/files.js.map +1 -0
package/dist/index.d.ts +7 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +23 -0
package/dist/index.js.map +1 -0
package/dist/init.d.ts +9 -0
package/dist/init.d.ts.map +1 -0
package/dist/init.js +59 -0
package/dist/init.js.map +1 -0
package/dist/pages.d.ts +6 -0
package/dist/pages.d.ts.map +1 -0
package/dist/pages.js +55 -0
package/dist/pages.js.map +1 -0
package/dist/scripts.d.ts +14 -0
package/dist/scripts.d.ts.map +1 -0
package/dist/scripts.js +103 -0
package/dist/scripts.js.map +1 -0
package/dist/service/createCompletePrompt.d.ts +4 -0
package/dist/service/createCompletePrompt.d.ts.map +1 -0
package/dist/service/createCompletePrompt.js +42 -0
package/dist/service/createCompletePrompt.js.map +1 -0
package/dist/service/generateImage.d.ts +32 -0
package/dist/service/generateImage.d.ts.map +1 -0
package/dist/service/generateImage.js +71 -0
package/dist/service/generateImage.js.map +1 -0
package/dist/service/index.d.ts +8 -0
package/dist/service/index.d.ts.map +1 -0
package/dist/service/index.js +24 -0
package/dist/service/index.js.map +1 -0
package/dist/service/requiresSettings.d.ts +3 -0
package/dist/service/requiresSettings.d.ts.map +1 -0
package/dist/service/requiresSettings.js +24 -0
package/dist/service/requiresSettings.js.map +1 -0
package/dist/service/server.d.ts +4 -0
package/dist/service/server.d.ts.map +1 -0
package/dist/service/server.js +26 -0
package/dist/service/server.js.map +1 -0
package/dist/service/transformPage.d.ts +11 -0
package/dist/service/transformPage.d.ts.map +1 -0
package/dist/service/transformPage.js +119 -0
package/dist/service/transformPage.js.map +1 -0
package/dist/service/useApiRoutes.d.ts +4 -0
package/dist/service/useApiRoutes.d.ts.map +1 -0
package/dist/service/useApiRoutes.js +95 -0
package/dist/service/useApiRoutes.js.map +1 -0
package/dist/service/useDataRoutes.d.ts +4 -0
package/dist/service/useDataRoutes.d.ts.map +1 -0
package/dist/service/useDataRoutes.js +98 -0
package/dist/service/useDataRoutes.js.map +1 -0
package/dist/service/usePageRoutes.d.ts +5 -0
package/dist/service/usePageRoutes.d.ts.map +1 -0
package/dist/service/usePageRoutes.js +132 -0
package/dist/service/usePageRoutes.js.map +1 -0
package/dist/settings.d.ts +13 -0
package/dist/settings.d.ts.map +1 -0
package/dist/settings.js +55 -0
package/dist/settings.js.map +1 -0
package/dist/synthos-cli.d.ts +2 -0
package/dist/synthos-cli.d.ts.map +1 -0
package/dist/synthos-cli.js +43 -0
package/dist/synthos-cli.js.map +1 -0
package/images/home.png +0 -0
package/images/page-management.png +0 -0
package/images/settings.png +0 -0
package/images/synthos-square.png +0 -0
package/package.json +58 -0
package/required-pages/apis.html +347 -0
package/required-pages/home.html +83 -0
package/required-pages/pages.html +135 -0
package/required-pages/scripts.html +335 -0
package/required-pages/settings.html +158 -0
package/src/files.ts +49 -0
package/src/index.ts +6 -0
package/src/init.ts +66 -0
package/src/pages.ts +55 -0
package/src/scripts.ts +130 -0
package/src/service/createCompletePrompt.ts +40 -0
package/src/service/generateImage.ts +101 -0
package/src/service/index.ts +7 -0
package/src/service/requiresSettings.ts +22 -0
package/src/service/server.ts +26 -0
package/src/service/transformPage.ts +135 -0
package/src/service/useApiRoutes.ts +95 -0
package/src/service/useDataRoutes.ts +97 -0
package/src/service/usePageRoutes.ts +147 -0
package/src/settings.ts +60 -0
package/src/synthos-cli.ts +38 -0

package/required-pages/apis.html ADDED Viewed

@@ -0,0 +1,347 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynthOS - APIs</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1a1a1a; color: #e0e0e0; height: 100vh; display: flex; }
+        .chat-panel { width: 30%; background: #2a2a2a; box-shadow: 0 0 10px rgba(0,0,0,0.3); padding: 20px; display: flex; flex-direction: column; }
+        .chat-header { font-size: 24px; padding: 10px; background: #3a7bc8; color: white; text-align: center; border-radius: 10px 10px 0 0; }
+        .chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; margin-top: 10px; background: #333; border-radius: 10px; }
+        .chat-message { margin-bottom: 15px; padding: 10px; background: #444; border-radius: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
+        .chat-message p { margin-bottom: 5px; line-height: 1.4; }
+        .chat-message p strong { font-weight: 600; color: #4a90e2; }
+        .chat-message p code { background: #555; padding: 2px 4px; border-radius: 3px; font-family: 'Courier New', Courier, monospace; color: #e0e0e0; }
+        .link-group { display: flex; justify-content: space-between; margin: 15px 0; }
+        .link-group a { font-size: 14px; color: #4a90e2; text-decoration: none; padding: 5px 10px; border-radius: 5px; transition: background-color 0.3s; }
+        .link-group a:hover { background-color: #3a3a3a; }
+        form { display: flex; flex-direction: column; width: 100%; }
+        .chat-input, .chat-submit { padding: 12px; border: none; border-radius: 25px; width: 100%; font-size: 14px; }
+        .chat-input { background: #444; color: #e0e0e0; margin-bottom: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
+        .chat-submit { background: #3a7bc8; color: white; cursor: pointer; transition: background-color 0.3s; }
+        .chat-submit:hover { background: #2a6cb8; }
+        .viewer-panel { width: 70%; padding: 20px; background: #2a2a2a; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; box-shadow: -5px 0 10px rgba(0,0,0,0.2); overflow-y: auto; }
+        .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 26, 26, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
+        .spinner { border: 8px solid #333; border-top: 8px solid #3a7bc8; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        ::-webkit-scrollbar { width: 10px; }
+        ::-webkit-scrollbar-track { background: #333; }
+        ::-webkit-scrollbar-thumb { background: #555; border-radius: 5px; }
+        ::-webkit-scrollbar-thumb:hover { background: #666; }
+        .dialog-title { font-size: 24px; color: #f0f0f0; background: #3a7bc8; padding: 10px; border-radius: 10px 10px 0 0; width: 100%; text-align: center; }
+        .dialog-content { font-size: 18px; color: #ccc; padding: 10px; margin-top:10px; flex-grow: 1; width: 100%; }
+        .api-section { margin: 10px 0; padding: 10px; background: #333; border-radius: 10px; width: 100%; }
+        .api-header { font-size: 20px; cursor: pointer; background: #444; padding: 10px; border-radius: 10px; text-align: left; transition: background-color 0.3s; }
+        .api-header:hover { background: #555; }
+        .api-content { display: none; margin-top: 10px; text-align: left; padding: 10px; background: #3a3a3a; border-radius: 10px; }
+        .api-input { margin-top: 10px; }
+        .api-input input, .api-input textarea, .api-input select { width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 5px; border: none; background: #444; color: #fff; }
+        .api-input textarea { min-height: 100px; resize: vertical; }
+        .api-input button { padding: 10px 15px; border: none; border-radius: 25px; background: #3a7bc8; color: #fff; cursor: pointer; transition: background-color 0.3s; }
+        .api-input button:hover { background: #2a6cb8; }
+        .api-input button:disabled { background: #666; cursor: not-allowed; }
+        .api-output { margin-top: 10px; min-height: 200px; background: #222; color: #fff; padding: 10px; border-radius: 5px; overflow-y: auto; white-space: pre-wrap; }
+        .generated-image { max-width: 100%; height: auto; margin-top: 10px; border-radius: 5px; }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
+</head>
+<body>
+    <div class="chat-panel">
+        <div class="chat-header">SynthOS</div>
+        <div class="chat-messages" id="chatMessages">
+            <div class="chat-message"><p><strong>SynthOS:</strong> Expand the individual API operations to test calls.</p></div>
+        </div>
+        <div class="link-group">
+            <a href="#" id="saveLink">Save</a>
+            <a href="/pages" id="pagesLink">Pages</a>
+            <a href="#" id="resetLink">Reset</a>
+        </div>
+        <form action="/" method="POST" id="chatForm">
+            <input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message...">
+            <button type="submit" class="chat-submit">Send</button>
+        </form>
+    </div>
+    <div class="viewer-panel" id="viewerPanel">
+        <div class="dialog-title">API Explorer</div>
+        <div class="dialog-content">
+            <div class="api-section">
+                <div class="api-header" onclick="toggleSection(this)">GET /api/data/:table</div>
+                <div class="api-content">
+                    This operation retrieves all rows from the specified table. The response is an array of JSON objects, each representing a row in the table.
+                    <div class="api-input">
+                        <input type="text" placeholder="Table Name" />
+                        <button onclick="callApi(event, 'GET', '/api/data/')">Submit</button>
+                    </div>
+                    <div class="api-output"></div>
+                </div>
+            </div>
+            <div class="api-section">
+                <div class="api-header" onclick="toggleSection(this)">GET /api/data/:table/:id</div>
+                <div class="api-content">
+                    This operation retrieves a single row from the specified table using the provided ID. The response is a JSON object representing the row.
+                    <div class="api-input">
+                        <input type="text" placeholder="Table Name" />
+                        <input type="text" placeholder="ID" />
+                        <button onclick="callApi(event, 'GET', '/api/data/')">Submit</button>
+                    </div>
+                    <div class="api-output"></div>
+                </div>
+            </div>
+            <div class="api-section">
+                <div class="api-header" onclick="toggleSection(this)">POST /api/data/:table/:id</div>
+                <div class="api-content">
+                    This operation saves a single row to the specified table. The request should include a JSON object representing the row. The response indicates success.
+                    <div class="api-input">
+                        <input type="text" placeholder="Table Name" />
+                        <input type="text" placeholder="ID" />
+                        <textarea placeholder="JSON Data"></textarea>
+                        <button onclick="callApi(event, 'POST', '/api/data/')">Submit</button>
+                    </div>
+                    <div class="api-output"></div>
+                </div>
+            </div>
+            <div class="api-section">
+                <div class="api-header" onclick="toggleSection(this)">DELETE /api/data/:table/:id</div>
+                <div class="api-content">
+                    This operation deletes a single row from the specified table using the provided ID. The response indicates success.
+                    <div class="api-input">
+                        <input type="text" placeholder="Table Name" />
+                        <input type="text" placeholder="ID" />
+                        <button onclick="callApi(event, 'DELETE', '/api/data/')">Submit</button>
+                    </div>
+                    <div class="api-output"></div>
+                </div>
+            </div>
+            <div class="api-section">
+                <div class="api-header" onclick="toggleSection(this)">GET /api/pages</div>
+                <div class="api-content">
+                    This operation retrieves a list of all available pages. The response is an array of page names.
+                    <div class="api-input">
+                        <button onclick="callApi(event, 'GET', '/api/pages')">Submit</button>
+                    </div>
+                    <div class="api-output"></div>
+                </div>
+            </div>
+            <div class="api-section">
+                <div class="api-header" onclick="toggleSection(this)">POST /api/generate/image</div>
+                <div class="api-content">
+                    This operation generates an image based on a prompt. You can specify the shape and style of the image.
+                    <div class="api-input">
+                        <input type="text" placeholder="Prompt" id="imagePrompt" />
+                        <select id="imageShape">
+                            <option value="square">Square</option>
+                            <option value="portrait">Portrait</option>
+                            <option value="landscape">Landscape</option>
+                        </select>
+                        <select id="imageStyle">
+                            <option value="vivid">Vivid</option>
+                            <option value="natural">Natural</option>
+                        </select>
+                        <button onclick="generateImage(event)">Generate Image</button>
+                    </div>
+                    <div class="api-output"></div>
+                </div>
+            </div>
+            <div class="api-section">
+                <div class="api-header" onclick="toggleSection(this)">POST /api/generate/completion</div>
+                <div class="api-content">
+                    This operation generates a text completion based on a prompt. You can optionally specify the temperature for controlling randomness.
+                    <div class="api-input">
+                        <textarea placeholder="Prompt" id="completionPrompt"></textarea>
+                        <input type="number" placeholder="Temperature (optional)" id="completionTemperature" step="0.1" min="0" max="1" />
+                        <button onclick="generateCompletion(event)">Generate Completion</button>
+                    </div>
+                    <div class="api-output"></div>
+                </div>
+            </div>
+            <div class="api-section">
+                <div class="api-header" onclick="toggleSection(this)">POST /api/scripts/:id</div>
+                <div class="api-content">
+                    This operation executes a script with the specified ID and passes in the provided variables. The response contains the output of the script execution.
+                    <div class="api-input">
+                        <input type="text" placeholder="Script ID" id="scriptId" />
+                        <textarea placeholder="Variables (JSON format)" id="scriptVariables"></textarea>
+                        <button onclick="executeScript(event)">Execute Script</button>
+                    </div>
+                    <div class="api-output"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="thoughts" style="display: none;">I've shown the user a list of available API's.</div>
+    <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
+    <script>
+        // Basic chat functionality
+        document.getElementById("chatInput").focus();
+        document.getElementById("chatForm").addEventListener('submit', () => {
+            document.getElementById("loadingOverlay").style.display = 'flex';
+            document.getElementById("chatForm").action = window.location.pathname;
+        });
+        document.getElementById("saveLink").addEventListener("click", function() {
+            const pageName = prompt("Enter the name of the page to save as:");
+            if (pageName) {
+                window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
+            }
+        });
+        document.getElementById("resetLink").addEventListener("click", function() {
+            window.location.href = `${window.location.pathname}/reset`;
+        });
+        window.onload = function() {
+            const chatMessages = document.getElementById('chatMessages');
+            chatMessages.scrollTo({
+                top: chatMessages.scrollHeight,
+                behavior: 'smooth'
+            });
+        };
+        // Toggle functionality for API sections
+        function toggleSection(header) {
+            const content = header.nextElementSibling;
+            content.style.display = content.style.display === 'block' ? 'none' : 'block';
+        }
+        // Function to call the server API
+        function callApi(event, method, endpoint) {
+            event.preventDefault();
+            const button = event.target;
+            button.disabled = true;
+            const inputs = event.target.parentElement.querySelectorAll('input, textarea');
+            let url = endpoint;
+            let data = {};
+            inputs.forEach(input => {
+                if (input.placeholder === 'Table Name') {
+                    url += input.value;
+                } else if (input.placeholder === 'ID') {
+                    url += '/' + input.value;
+                } else if (input.placeholder === 'JSON Data') {
+                    data = JSON.parse(input.value);
+                }
+            });
+            fetch(url, {
+                method: method,
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: method === 'POST' ? JSON.stringify(data) : null
+            })
+            .then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                const outputBox = event.target.parentElement.nextElementSibling;
+                outputBox.textContent = JSON.stringify(data, null, 2);
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+                alert('API call failed! Check console for details.');
+            })
+            .finally(() => {
+                button.disabled = false;
+            });
+        }
+        // Function to generate image
+        function generateImage(event) {
+            event.preventDefault();
+            const button = event.target;
+            button.disabled = true;
+            const prompt = document.getElementById('imagePrompt').value;
+            const shape = document.getElementById('imageShape').value;
+            const style = document.getElementById('imageStyle').value;
+            const outputBox = event.target.parentElement.nextElementSibling;
+            fetch('/api/generate/image', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ prompt, shape, style })
+            })
+            .then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                outputBox.textContent = JSON.stringify(data, null, 2);
+                if (data.url) {
+                    const img = document.createElement('img');
+                    img.src = data.url;
+                    img.alt = 'Generated Image';
+                    img.className = 'generated-image';
+                    outputBox.appendChild(img);
+                }
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+                alert('Image generation failed! Check console for details.');
+            })
+            .finally(() => {
+                button.disabled = false;
+            });
+        }
+        // Function to generate completion
+        function generateCompletion(event) {
+            event.preventDefault();
+            const button = event.target;
+            button.disabled = true;
+            const prompt = document.getElementById('completionPrompt').value;
+            const temperature = document.getElementById('completionTemperature').value;
+            const outputBox = event.target.parentElement.nextElementSibling;
+            fetch('/api/generate/completion', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ prompt, temperature: parseFloat(temperature) || undefined })
+            })
+            .then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                outputBox.textContent = JSON.stringify(data, null, 2);
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+                alert('Completion generation failed! Check console for details.');
+            })
+            .finally(() => {
+                button.disabled = false;
+            });
+        }
+        // Function to execute script
+        function executeScript(event) {
+            event.preventDefault();
+            const button = event.target;
+            button.disabled = true;
+            const scriptId = document.getElementById('scriptId').value;
+            const variables = JSON.parse(document.getElementById('scriptVariables').value);
+            const outputBox = event.target.parentElement.nextElementSibling;
+            fetch(`/api/scripts/${scriptId}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(variables)
+            })
+            .then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                outputBox.textContent = JSON.stringify(data, null, 2);
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+                alert('Script execution failed! Check console for details.');
+            })
+            .finally(() => {
+                button.disabled = false;
+            });
+        }
+    </script>
+</body>
+</html>

package/required-pages/home.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynthOS</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1a1a1a; color: #e0e0e0; height: 100vh; display: flex; }
+        .chat-panel { width: 30%; background: #2a2a2a; box-shadow: 0 0 10px rgba(0,0,0,0.3); padding: 20px; display: flex; flex-direction: column; }
+        .chat-header { font-size: 24px; padding: 10px; background: #3a7bc8; color: white; text-align: center; border-radius: 10px 10px 0 0; }
+        .chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; margin-top: 10px; background: #333; border-radius: 10px; }
+        .chat-message { margin-bottom: 15px; padding: 10px; background: #444; border-radius: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
+        .chat-message p { margin-bottom: 5px; line-height: 1.4; }
+        .chat-message p strong { font-weight: 600; color: #4a90e2; }
+        .chat-message p code { background: #555; padding: 2px 4px; border-radius: 3px; font-family: 'Courier New', Courier, monospace; color: #e0e0e0; }
+        .link-group { display: flex; justify-content: space-between; margin: 15px 0; }
+        .link-group a { font-size: 14px; color: #4a90e2; text-decoration: none; padding: 5px 10px; border-radius: 5px; transition: background-color 0.3s; }
+        .link-group a:hover { background-color: #3a3a3a; }
+        form { display: flex; flex-direction: column; width: 100%; }
+        .chat-input, .chat-submit { padding: 12px; border: none; border-radius: 25px; width: 100%; font-size: 14px; }
+        .chat-input { background: #444; color: #e0e0e0; margin-bottom: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
+        .chat-submit { background: #3a7bc8; color: white; cursor: pointer; transition: background-color 0.3s; }
+        .chat-submit:hover { background: #2a6cb8; }
+        .viewer-panel { width: 70%; padding: 30px; background: #2a2a2a; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: -5px 0 10px rgba(0,0,0,0.2); }
+        .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 26, 26, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
+        .spinner { border: 8px solid #333; border-top: 8px solid #3a7bc8; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        ::-webkit-scrollbar { width: 10px; }
+        ::-webkit-scrollbar-track { background: #333; }
+        ::-webkit-scrollbar-thumb { background: #555; border-radius: 5px; }
+        ::-webkit-scrollbar-thumb:hover { background: #666; }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
+</head>
+<body>
+    <div class="chat-panel">
+        <div class="chat-header">SynthOS</div>
+        <div class="chat-messages" id="chatMessages">
+            <div class="chat-message"><p><strong>SynthOS:</strong> What can I create for you?</p></div>
+        </div>
+        <div class="link-group">
+            <a href="#" id="saveLink">Save</a>
+            <a href="/pages" id="pagesLink">Pages</a>
+            <a href="#" id="resetLink">Reset</a>
+        </div>
+        <form action="/" method="POST" id="chatForm">
+            <input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message...">
+            <button type="submit" class="chat-submit">Send</button>
+        </form>
+    </div>
+    <div class="viewer-panel" id="viewerPanel">
+        <!-- Viewer content will be rendered here -->
+    </div>
+    <div id="thoughts" style="display: none;">Prompt the user and ask them what they'd like to create.</div>
+    <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
+    <script>
+        document.getElementById("chatInput").focus();
+        document.getElementById("chatForm").addEventListener('submit', () => {
+            document.getElementById("loadingOverlay").style.display = 'flex';
+            document.getElementById("chatForm").action = window.location.pathname;
+        });
+        document.getElementById("saveLink").addEventListener("click", function() {
+            const pageName = prompt("Enter the name of the page to save as:");
+            if (pageName) {
+                window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
+            }
+        });
+        document.getElementById("resetLink").addEventListener("click", function() {
+            window.location.href = `${window.location.pathname}/reset`;
+        });
+        window.onload = function() {
+            const chatMessages = document.getElementById('chatMessages');
+            chatMessages.scrollTo({
+                top: chatMessages.scrollHeight,
+                behavior: 'smooth'
+            });
+        };
+    </script>
+</body>
+</html>

package/required-pages/pages.html ADDED Viewed

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynthOS - Pages</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1a1a1a; color: #e0e0e0; height: 100vh; display: flex; }
+        .chat-panel { width: 30%; background: #2a2a2a; box-shadow: 0 0 10px rgba(0,0,0,0.3); padding: 20px; display: flex; flex-direction: column; }
+        .chat-header { font-size: 24px; padding: 10px; background: #3a7bc8; color: white; text-align: center; border-radius: 10px 10px 0 0; }
+        .chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; margin-top: 10px; background: #333; border-radius: 10px; }
+        .chat-message { margin-bottom: 15px; padding: 10px; background: #444; border-radius: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
+        .chat-message p { margin-bottom: 5px; line-height: 1.4; }
+        .chat-message p strong { font-weight: 600; color: #4a90e2; }
+        .chat-message p code { background: #555; padding: 2px 4px; border-radius: 3px; font-family: 'Courier New', Courier, monospace; color: #e0e0e0; }
+        .link-group { display: flex; justify-content: space-between; margin: 15px 0; }
+        .link-group a { font-size: 14px; color: #4a90e2; text-decoration: none; padding: 5px 10px; border-radius: 5px; transition: background-color 0.3s; }
+        .link-group a:hover { background-color: #3a3a3a; }
+        form { display: flex; flex-direction: column; width: 100%; }
+        .chat-input, .chat-submit { padding: 12px; border: none; border-radius: 25px; width: 100%; font-size: 14px; }
+        .chat-input { background: #444; color: #e0e0e0; margin-bottom: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
+        .chat-submit { background: #3a7bc8; color: white; cursor: pointer; transition: background-color 0.3s; }
+        .chat-submit:hover { background: #2a6cb8; }
+        .viewer-panel { width: 70%; padding: 20px; background: #2a2a2a; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; box-shadow: -5px 0 10px rgba(0,0,0,0.2); overflow-y: auto; }
+        .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 26, 26, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
+        .spinner { border: 8px solid #333; border-top: 8px solid #3a7bc8; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        ::-webkit-scrollbar { width: 10px; }
+        ::-webkit-scrollbar-track { background: #333; }
+        ::-webkit-scrollbar-thumb { background: #555; border-radius: 5px; }
+        ::-webkit-scrollbar-thumb:hover { background: #666; }
+        .saved-pages { font-size: 24px; padding: 10px; background: #3a7bc8; color: white; text-align: center; border-radius: 10px 10px 0 0; width: 100%; margin-bottom: 20px; }
+        .page-category { margin-bottom: 50px; width: 100%; }
+        .category-title { font-size: 20px; color: #e0e0e0; margin-bottom: 15px; padding: 10px; border-radius: 5px; background: linear-gradient(45deg, #4a4a4a, #3a3a3a); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
+        .page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
+        .page-link { color: #fff; text-decoration: none; padding: 12px 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: #3a3a3a; transition: all 0.3s ease; height: 60px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
+        .page-link:hover { background: #4a4a4a; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
+</head>
+<body>
+    <div class="chat-panel">
+        <div class="chat-header">SynthOS</div>
+        <div class="chat-messages" id="chatMessages">
+            <div class="chat-message"><p><strong>SynthOS:</strong> Here are all of the created pages.</p></div>
+        </div>
+        <div class="link-group">
+            <a href="#" id="saveLink">Save</a>
+            <a href="/pages" id="pagesLink">Pages</a>
+            <a href="#" id="resetLink">Reset</a>
+        </div>
+        <form action="/" method="POST" id="chatForm">
+            <input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message...">
+            <button type="submit" class="chat-submit">Send</button>
+        </form>
+    </div>
+    <div class="viewer-panel" id="viewerPanel">
+        <div class="saved-pages">Pages</div>
+        <div class="page-category">
+            <h2 class="category-title">System Pages</h2>
+            <div class="page-grid">
+                <a href="/home" class="page-link">Home</a>
+                <a href="/pages" class="page-link">Pages</a>
+                <a href="/settings" class="page-link">Settings</a>
+                <a href="/apis" class="page-link">API Explorer</a>
+                <a href="/scripts" class="page-link">Script Editor</a>
+            </div>
+        </div>
+        <div class="page-category">
+            <h2 class="category-title">Custom Pages</h2>
+            <div id="customPagesList" class="page-grid">
+                <!-- Custom pages will be dynamically loaded here -->
+            </div>
+        </div>
+        <div class="page-category">
+            <h2 class="category-title">Page Templates</h2>
+            <div id="templatesList" class="page-grid">
+                <!-- Templates will be dynamically loaded here -->
+            </div>
+        </div>
+    </div>
+    <div id="thoughts" style="display: none;">I've presented the user with a list of created pages.</div>
+    <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
+    <script>
+        // Basic chat functionality
+        document.getElementById("chatInput").focus();
+        document.getElementById("chatForm").addEventListener('submit', () => {
+            document.getElementById("loadingOverlay").style.display = 'flex';
+            document.getElementById("chatForm").action = window.location.pathname;
+        });
+        document.getElementById("saveLink").addEventListener("click", function() {
+            const pageName = prompt("Enter the name of the page to save as:");
+            if (pageName) {
+                window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
+            }
+        });
+        document.getElementById("resetLink").addEventListener("click", function() {
+            window.location.href = `${window.location.pathname}/reset`;
+        });
+        window.onload = function() {
+            const chatMessages = document.getElementById('chatMessages');
+            chatMessages.scrollTo({
+                top: chatMessages.scrollHeight,
+                behavior: 'smooth'
+            });
+         };
+        // Fetch custom pages and templates and display them
+        fetch('/api/pages')
+            .then(response => response.json())
+            .then(data => {
+                const customPagesList = document.getElementById('customPagesList');
+                const templatesList = document.getElementById('templatesList');
+                customPagesList.innerHTML = ''; // Clear existing content
+                templatesList.innerHTML = ''; // Clear existing content
+                const systemPages = ['home', 'pages', 'settings', 'apis', 'scripts'];
+                data.forEach(page => {
+                    const pageLink = document.createElement('a');
+                    pageLink.href = `/${page}`;
+                    pageLink.textContent = page;
+                    pageLink.className = 'page-link';
+                    if (page.startsWith('[') && page.endsWith(']')) {
+                        templatesList.appendChild(pageLink);
+                    } else if (!systemPages.includes(page.toLowerCase())) {
+                        customPagesList.appendChild(pageLink);
+                    }
+                });
+            })
+            .catch(error => console.error('Error fetching pages:', error));
+    </script>
+</body>
+</html>