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/scripts.html ADDED Viewed

@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynthOS - Scripts</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); }
+        .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; }
+        .application-title { font-size: 24px; color: white; background: #3a7bc8; padding: 10px; width: 100%; text-align: center; border-radius: 10px 10px 0 0; }
+        .application-content { font-size: 18px; color: #ccc; padding: 20px; margin-top: 10px; flex-grow: 1; width: 100%; background: #333; border-radius: 0 0 10px 10px; display: flex; }
+        .script-list { width: 30%; border-right: 1px solid #444; padding-right: 20px; }
+        .script-list ul { list-style-type: none; }
+        .script-list li { padding: 10px; cursor: pointer; transition: background-color 0.3s; }
+        .script-list li:hover { background-color: #444; }
+        .script-list li.active { background-color: #3a7bc8; color: white; }
+        .add-script-btn { margin-top: 20px; padding: 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; width: 100%; }
+        .script-detail { width: 70%; padding-left: 20px; }
+        .script-detail input, .script-detail select { width: 100%; padding: 10px; margin-bottom: 10px; background-color: #444; color: #e0e0e0; border: none; }
+        .save-script-btn { padding: 10px; background-color: #3a7bc8; color: white; border: none; cursor: pointer; width: 100%; }
+        .delete-script-btn { padding: 10px; background-color: #ff4444; color: white; border: none; cursor: pointer; width: 100%; margin-top: 10px; }
+        .placeholder-message { text-align: center; color: #888; padding: 20px; }
+        .error-message { color: #ff6b6b; font-size: 14px; margin-top: 5px; display: none; }
+        .instructions { margin-top: 20px; padding: 15px; background: #3a3a3a; border-radius: 5px; font-size: 13px; line-height: 1.6; color: #aaa; }
+        .instructions h3 { margin-bottom: 8px; color: #4a90e2; font-size: 15px; }
+        .instructions p { margin-bottom: 10px; }
+    </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> Add or modify scripts that can be executed using the <code>/api/scripts/:id</code> API.</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="application-title">Script Editor</div>
+        <div class="application-content">
+            <div class="script-list">
+                <ul id="scriptList">
+                    <!-- Scripts will be loaded here -->
+                </ul>
+                <button class="add-script-btn">Add New Script</button>
+            </div>
+            <div class="script-detail">
+                <div id="placeholderMessage" class="placeholder-message">
+                    Select an existing script to edit or add a new one using the "Add New Script" button.
+                </div>
+                <input type="text" id="scriptId" placeholder="Script ID" value="" style="display: none;">
+                <select id="scriptType" style="display: none;">
+                    <option value="command">Command</option>
+                </select>
+                <input type="text" id="scriptCommand" placeholder="Script Command" style="display: none;">
+                <input type="text" id="scriptDescription" placeholder="Usage Description (optional)" style="display: none;">
+                <input type="text" id="scriptVariables" placeholder="Variables (optional, e.g., { city: string })" style="display: none;">
+                <div id="commandError" class="error-message">Script Command is required.</div>
+                <button class="save-script-btn" style="display: none;">Save Changes</button>
+                <button class="delete-script-btn" style="display: none;">Delete Script</button>
+                <div class="instructions">
+                    <h3>Understanding SynthOS Scripts</h3>
+                    <p>Scripts in SynthOS are powerful tools that allow you to define custom terminal commands for various tasks. When SynthOS executes a script, it runs the command and captures the console output, which is then returned for further processing or analysis.</p>
+                    <h3>Creating Effective Scripts</h3>
+                    <p>When writing a script, you can use any valid terminal command. For added flexibility, you can include {{variable}} placeholders, which SynthOS will replace with actual values during execution.</p>
+                    <h3>Example: Weather Forecast Script</h3>
+                    <p>Here's an example of an interesting script that SynthOS could use:</p>
+                    <p><code>curl wttr.in/{{city}}?format=3</code></p>
+                    <p>This script fetches a concise weather forecast for a specified city. SynthOS can call this script with different city names to get up-to-date weather information.</p>
+                    <h3>Tips for Script Writing</h3>
+                    <p>1. Keep commands concise and focused on a single task.</p>
+                    <p>2. Use variables for dynamic inputs to make scripts more versatile.</p>
+                    <p>3. Consider potential errors and how to handle them.</p>
+                    <p>4. Test your scripts thoroughly to ensure they work as expected.</p>
+                    <p>5. Provide a clear and concise usage description to help others understand how to use your script.</p>
+                    <p>6. Define the expected variables in the Variables field to document the script's requirements.</p>
+                    <h3>Using the Description Field</h3>
+                    <p>The Description field allows you to provide a brief explanation of what SynthOS can use your script for.</p>
+                    <h3>Defining Variables</h3>
+                    <p>Use the Variables field to specify any input parameters your script expects. Format it as a JSON object, e.g., { city: string, days?: number }. This helps SynthOS know what inputs it needs to provide when running your script.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="thoughts" style="display: none;">I've show the user a list of available scripts.</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'
+            });
+        };
+        // Script Editor Functionality
+        const scriptList = document.getElementById('scriptList');
+        const scriptId = document.getElementById('scriptId');
+        const scriptType = document.getElementById('scriptType');
+        const scriptCommand = document.getElementById('scriptCommand');
+        const scriptDescription = document.getElementById('scriptDescription');
+        const scriptVariables = document.getElementById('scriptVariables');
+        const addScriptBtn = document.querySelector('.add-script-btn');
+        const saveScriptBtn = document.querySelector('.save-script-btn');
+        const deleteScriptBtn = document.querySelector('.delete-script-btn');
+        const placeholderMessage = document.getElementById('placeholderMessage');
+        const commandError = document.getElementById('commandError');
+        let isNewScript = false;
+        function showScriptDetails() {
+            placeholderMessage.style.display = 'none';
+            scriptId.style.display = 'block';
+            scriptType.style.display = 'block';
+            scriptCommand.style.display = 'block';
+            scriptDescription.style.display = 'block';
+            scriptVariables.style.display = 'block';
+            saveScriptBtn.style.display = 'block';
+            deleteScriptBtn.style.display = isNewScript ? 'none' : 'block';
+        }
+        function hideScriptDetails() {
+            placeholderMessage.style.display = 'block';
+            scriptId.style.display = 'none';
+            scriptType.style.display = 'none';
+            scriptCommand.style.display = 'none';
+            scriptDescription.style.display = 'none';
+            scriptVariables.style.display = 'none';
+            saveScriptBtn.style.display = 'none';
+            deleteScriptBtn.style.display = 'none';
+            commandError.style.display = 'none';
+        }
+        function formatId(id) {
+            return id.toLowerCase().replace(/\s+/g, '-');
+        }
+        function loadScripts() {
+            fetch('/api/data/scripts')
+                .then(response => response.json())
+                .then(scripts => {
+                    scriptList.innerHTML = '';
+                    scripts.forEach(script => {
+                        const li = document.createElement('li');
+                        li.textContent = script.id;
+                        li.dataset.id = script.id;
+                        li.dataset.type = script.type;
+                        li.dataset.command = script.command;
+                        li.dataset.description = script.description || '';
+                        li.dataset.variables = script.variables || '';
+                        scriptList.appendChild(li);
+                    });
+                })
+                .catch(error => console.error('Error loading scripts:', error));
+        }
+        function saveScript(script) {
+            fetch('/api/data/scripts')
+                .then(response => response.json())
+                .then(scripts => {
+                    const existingScript = scripts.find(s => s.id === script.id);
+                    if (existingScript && isNewScript) {
+                        if (confirm('A script with this ID already exists. Do you want to overwrite it?')) {
+                            performSave(script);
+                        }
+                    } else {
+                        performSave(script);
+                    }
+                })
+                .catch(error => console.error('Error checking existing scripts:', error));
+        }
+        function performSave(script) {
+            fetch('/api/data/scripts', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(script),
+            })
+                .then(response => response.json())
+                .then(savedScript => {
+                    loadScripts();
+                    isNewScript = false;
+                    setTimeout(() => {
+                        const newScriptElement = document.querySelector(`[data-id="${savedScript.id}"]`);
+                        if (newScriptElement) {
+                            newScriptElement.click();
+                        }
+                    }, 100);
+                })
+                .catch(error => console.error('Error saving script:', error));
+        }
+        function deleteScript(id) {
+            if (confirm('Are you sure you want to delete this script?')) {
+                fetch(`/api/data/scripts/${id}`, {
+                    method: 'DELETE',
+                })
+                    .then(response => response.json())
+                    .then(result => {
+                        if (result.success) {
+                            loadScripts();
+                            hideScriptDetails();
+                        } else {
+                            console.error('Failed to delete script.');
+                        }
+                    })
+                    .catch(error => console.error('Error deleting script:', error));
+            }
+        }
+        scriptList.addEventListener('click', (e) => {
+            if (e.target.tagName === 'LI') {
+                document.querySelectorAll('.script-list li').forEach(li => li.classList.remove('active'));
+                e.target.classList.add('active');
+                showScriptDetails();
+                scriptId.value = e.target.dataset.id;
+                scriptType.value = e.target.dataset.type || 'command';
+                scriptCommand.value = e.target.dataset.command || '';
+                scriptDescription.value = e.target.dataset.description || '';
+                scriptVariables.value = e.target.dataset.variables || '';
+                commandError.style.display = 'none';
+                isNewScript = false;
+                deleteScriptBtn.style.display = 'block';
+            }
+        });
+        addScriptBtn.addEventListener('click', () => {
+            const newId = formatId(`script-${Date.now()}`);
+            showScriptDetails();
+            scriptId.value = newId;
+            scriptType.value = 'command';
+            scriptCommand.value = '';
+            scriptDescription.value = '';
+            scriptVariables.value = '';
+            commandError.style.display = 'none';
+            document.querySelectorAll('.script-list li').forEach(li => li.classList.remove('active'));
+            isNewScript = true;
+            deleteScriptBtn.style.display = 'none';
+        });
+        saveScriptBtn.addEventListener('click', () => {
+            if (!scriptCommand.value.trim()) {
+                commandError.style.display = 'block';
+                return;
+            }
+            const script = {
+                id: formatId(scriptId.value),
+                type: scriptType.value,
+                command: scriptCommand.value,
+                description: scriptDescription.value.trim() || undefined,
+                variables: scriptVariables.value.trim() || undefined,
+            };
+            saveScript(script);
+        });
+        deleteScriptBtn.addEventListener('click', () => {
+            const id = scriptId.value;
+            if (id) {
+                deleteScript(id);
+            }
+        });
+        scriptId.addEventListener('input', (e) => {
+            e.target.value = formatId(e.target.value);
+        });
+        scriptCommand.addEventListener('input', () => {
+            commandError.style.display = 'none';
+        });
+        // Load scripts when the page loads
+        loadScripts();
+        // Initialize with empty fields and show placeholder
+        hideScriptDetails();
+    </script>
+</body>
+</html>

package/required-pages/settings.html ADDED Viewed

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynthOS - Settings</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; }
+        .dialog-title { font-size: 24px; color: #f0f0f0; background: #3a3a3a; padding: 15px; border-bottom: 1px solid #444; width: 100%; text-align: center; border-radius: 10px 10px 0 0; }
+        .dialog-content { font-size: 16px; color: #ccc; padding: 20px; margin-top: 10px; flex-grow: 1; width: 100%; background: #333; border-radius: 0 0 10px 10px; }
+        .form-group { margin-bottom: 20px; }
+        .form-group label { display: block; margin-bottom: 8px; color: #e0e0e0; font-weight: 600; }
+        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #555; background: #444; color: #fff; font-size: 14px; transition: all 0.3s ease; }
+        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #3a7bc8; box-shadow: 0 0 0 2px rgba(58, 123, 200, 0.2); }
+        .form-group textarea { resize: vertical; min-height: 100px; }
+        .disabled { background: #555; cursor: not-allowed; }
+        .settings-form { background: #2a2a2a; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
+        .info-text { color: #aaa; margin-top: 15px; font-size: 14px; line-height: 1.6; }
+        .info-text a { color: #4a90e2; text-decoration: none; transition: color 0.3s; }
+        .info-text a:hover { color: #3a7bc8; }
+    </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> Please fill in all required fields in the settings form and click 'Update'. Ensure your OpenAI or Anthropic API Key is valid and select the model you wish to use.</p>
+                <p><code>Max Output Tokens</code> controls how large of a page that can be rendered and <code>Additional Instructions</code> can be used to provide further prompt instructions for how pages should be updated.</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="settings-form">
+            <div class="dialog-title">Settings</div>
+            <div class="dialog-content">
+                <form action="/api/settings" method="POST" id="settingsForm">
+                    <div class="form-group">
+                        <label for="serviceApiKey">Service API Key</label>
+                        <input type="password" id="serviceApiKey" name="serviceApiKey" placeholder="Enter your API Key" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="model">Model</label>
+                        <select id="model" name="model" required>
+                            <option value="">Select a model</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="maxTokens">Max Output Tokens</label>
+                        <input type="number" id="maxTokens" name="maxTokens" placeholder="Enter max token count" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="instructions">Additional Instructions</label>
+                        <textarea id="instructions" name="instructions" placeholder="Enter any additional instructions"></textarea>
+                    </div>
+                    <button type="submit" class="chat-submit" action="/api/submit">Update</button>
+                </form>
+                <p class="info-text">An API Key is required which can be generated from either <a href="https://platform.openai.com/api-keys" target="_blank">OpenAI API Keys</a> or <a href="https://console.anthropic.com/settings/keys" target="_blank">Anthropic API Keys</a>.</p>
+            </div>
+        </div>
+    </div>
+    <div id="thoughts" style="display: none;">Ask the user to update their settings.</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', (event) => {
+            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.scrollTop = chatMessages.scrollHeight;
+        };
+        // Form validation
+        document.getElementById('settingsForm').addEventListener('submit', function(event) {
+            const serviceApiKey = document.getElementById('serviceApiKey').value;
+            const model = document.getElementById('model').value;
+            const maxTokens = document.getElementById('maxTokens').value;
+            if (!serviceApiKey || !model || !maxTokens) {
+                alert('Please fill in all required fields before submitting.');
+                event.preventDefault();
+            }
+        });
+        // Fetch settings and populate form
+        let isConfigured = false;
+        fetch('/api/settings')
+            .then(response => response.json())
+            .then(data => {
+                console.log('Settings:', data);
+                const serviceApiKey = data.serviceApiKey || '';
+                const model = data.model || '';
+                const maxTokens = data.maxTokens || '';
+                isConfigured = serviceApiKey && model && maxTokens;
+                document.getElementById('serviceApiKey').value = serviceApiKey;
+                document.getElementById('model').innerHTML = data.availableModels.map(model => `<option value="${model}">${model}</option>`).join('');
+                document.getElementById('model').value = model;
+                document.getElementById('maxTokens').value = maxTokens;
+                document.getElementById('instructions').value = data.instructions || '';
+                // Disable chat input if not configured
+                if (!isConfigured) {
+                    document.getElementById('chatInput').disabled = true;
+                    document.getElementById('chatInput').classList.add('disabled');
+                }
+            })
+            .catch(error => console.error('Error fetching settings:', error));
+    </script>
+</body>
+</html>

package/src/files.ts ADDED Viewed

@@ -0,0 +1,49 @@
+import * as fs from 'fs/promises';
+import path from 'path';
+export async function checkIfExists(path: string): Promise<boolean> {
+    try {
+        await fs.access(path);
+        return true;
+    } catch {
+        return false;
+    }
+}
+export async function copyFile(srcFile: string, destFolder: string): Promise<void> {
+    await ensureFolderExists(destFolder);
+    const fileName = path.basename(srcFile);
+    const destFile = path.join(destFolder, fileName);
+    await fs.copyFile(srcFile, destFile);
+}
+export async function copyFiles(srcFolder: string, destFolder: string): Promise<void> {
+    await ensureFolderExists(destFolder);
+    const files = await fs.readdir(srcFolder);
+    for (const file of files) {
+        const srcPath = `${srcFolder}/${file}`;
+        const destPath = `${destFolder}/${file}`;
+        await fs.copyFile(srcPath, destPath);
+    }
+}
+export async function ensureFolderExists(path: string): Promise<void> {
+    await fs.mkdir(path, { recursive: true });
+}
+export async function listFiles(path: string): Promise<string[]> {
+    return (await fs.readdir(path)).filter(file => !file.startsWith('.') && file.includes('.'));
+}
+export async function loadFile(path: string): Promise<string> {
+    return await fs.readFile(path, 'utf8');
+}
+export async function saveFile(path: string, content: string): Promise<void> {
+    await fs.writeFile(path, content, 'utf8');
+}
+export async function deleteFile(path: string): Promise<void> {
+    await fs.unlink(path);
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export * from './service';
+export * from './files';
+export * from './init';
+export * from './pages';
+export * from './scripts';
+export * from './settings';

package/src/init.ts ADDED Viewed

@@ -0,0 +1,66 @@
+import path from "path";
+import { checkIfExists, copyFile, copyFiles, ensureFolderExists, saveFile } from "./files";
+import { DefaultSettings } from "./settings";
+export interface SynthOSConfig {
+    pagesFolder: string;
+    requiredPagesFolder: string;
+    defaultPagesFolder: string;
+    defaultScriptsFolder: string;
+}
+export function createConfig(pagesFolder = '.synthos'): SynthOSConfig {
+    return {
+        pagesFolder: path.join(process.cwd(), pagesFolder),
+        requiredPagesFolder: path.join(__dirname, '../required-pages'),
+        defaultPagesFolder: path.join(__dirname, '../default-pages'),
+        defaultScriptsFolder: path.join(__dirname, '../default-scripts')
+    };
+}
+export async function init(config: SynthOSConfig, includeDefaultPages: boolean = true): Promise<boolean> {
+    // Check for existing folder
+    if (await checkIfExists(config.pagesFolder)) {
+        return false;
+    }
+    console.log(`Initializing .synthos folder...`);
+    // Create pages folder
+    await ensureFolderExists(config.pagesFolder);
+    // Create mandatory files
+    await saveFile(path.join(config.pagesFolder, '.gitignore'), 'settings.json\n');
+    await saveFile(path.join(config.pagesFolder, 'settings.json'), JSON.stringify(DefaultSettings, null, 4));
+    await saveFile(path.join(config.pagesFolder, 'settings.json.example'), JSON.stringify(DefaultSettings, null, 4));
+    // Setup default scripts
+    console.log(`Copying default scripts to .synthos folder...`);
+    const scriptsFolder = path.join(config.pagesFolder, 'scripts');
+    await ensureFolderExists(scriptsFolder);
+    switch (process.platform) {
+        case 'win32':
+            await copyFile(path.join(config.defaultScriptsFolder, 'windows-terminal.json'), scriptsFolder);
+            break;
+        case 'darwin':
+            await copyFile(path.join(config.defaultScriptsFolder, 'mac-terminal.json'), scriptsFolder);
+            break;
+        case 'android':
+            await copyFile(path.join(config.defaultScriptsFolder, 'android-terminal.json'), scriptsFolder);
+            break;
+        case 'linux':
+        default:
+            await copyFile(path.join(config.defaultScriptsFolder, 'linux-terminal.json'), scriptsFolder);
+            break;
+    }
+    await saveFile(path.join(scriptsFolder, 'example.sh'), '#!/bin/bash\n\n# This is an example script\n\n# You can run this script using the following command:\n# sh .synthos/scripts/example.sh\n\n# This script will print "Hello, World!" to the console\n\necho "Hello, World!"\n');
+    // Copy pages
+    if (includeDefaultPages) {
+        console.log(`Copying default pages to .synthos folder...`);
+        await copyFiles(config.defaultPagesFolder, config.pagesFolder);
+    }
+    return true;
+}