npm - synthos - Versions diffs - 0.6.0 → 0.7.0 - Mend

synthos 0.6.0 → 0.7.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 (149) hide show

package/README.md +33 -1
package/default-pages/app_builder.html +40 -0
package/default-pages/app_builder.json +1 -0
package/default-pages/json_tools.html +89 -159
package/default-pages/json_tools.json +1 -0
package/default-pages/my_notes.html +33 -0
package/default-pages/my_notes.json +12 -0
package/default-pages/neon_asteroids.html +77 -0
package/default-pages/neon_asteroids.json +12 -0
package/default-pages/sidebar_builder.html +49 -0
package/default-pages/sidebar_builder.json +1 -0
package/default-pages/solar_explorer.html +1956 -0
package/default-pages/solar_explorer.json +12 -0
package/default-pages/solar_tutorial.html +476 -0
package/default-pages/solar_tutorial.json +1 -0
package/default-pages/two-panel_builder.html +66 -0
package/default-pages/two-panel_builder.json +1 -0
package/dist/connectors/index.d.ts +3 -0
package/dist/connectors/index.d.ts.map +1 -0
package/dist/connectors/index.js +6 -0
package/dist/connectors/index.js.map +1 -0
package/dist/connectors/registry.d.ts +3 -0
package/dist/connectors/registry.d.ts.map +1 -0
package/dist/connectors/registry.js +100 -0
package/dist/connectors/registry.js.map +1 -0
package/dist/connectors/types.d.ts +61 -0
package/dist/connectors/types.d.ts.map +1 -0
package/dist/connectors/types.js +3 -0
package/dist/connectors/types.js.map +1 -0
package/dist/files.d.ts +2 -0
package/dist/files.d.ts.map +1 -1
package/dist/files.js +12 -1
package/dist/files.js.map +1 -1
package/dist/init.d.ts +8 -1
package/dist/init.d.ts.map +1 -1
package/dist/init.js +155 -3
package/dist/init.js.map +1 -1
package/dist/migrations.d.ts +11 -0
package/dist/migrations.d.ts.map +1 -0
package/dist/migrations.js +281 -0
package/dist/migrations.js.map +1 -0
package/dist/models/index.d.ts +3 -0
package/dist/models/index.d.ts.map +1 -0
package/dist/models/index.js +10 -0
package/dist/models/index.js.map +1 -0
package/dist/models/providers.d.ts +7 -0
package/dist/models/providers.d.ts.map +1 -0
package/dist/models/providers.js +33 -0
package/dist/models/providers.js.map +1 -0
package/dist/models/types.d.ts +21 -0
package/dist/models/types.d.ts.map +1 -0
package/dist/models/types.js +3 -0
package/dist/models/types.js.map +1 -0
package/dist/pages.d.ts +21 -2
package/dist/pages.d.ts.map +1 -1
package/dist/pages.js +202 -23
package/dist/pages.js.map +1 -1
package/dist/scripts.js +2 -2
package/dist/scripts.js.map +1 -1
package/dist/service/createCompletePrompt.d.ts +3 -2
package/dist/service/createCompletePrompt.d.ts.map +1 -1
package/dist/service/createCompletePrompt.js +11 -16
package/dist/service/createCompletePrompt.js.map +1 -1
package/dist/service/debugLog.d.ts +11 -0
package/dist/service/debugLog.d.ts.map +1 -0
package/dist/service/debugLog.js +26 -0
package/dist/service/debugLog.js.map +1 -0
package/dist/service/modelInstructions.d.ts +7 -0
package/dist/service/modelInstructions.d.ts.map +1 -0
package/dist/service/modelInstructions.js +16 -0
package/dist/service/modelInstructions.js.map +1 -0
package/dist/service/requiresSettings.d.ts +2 -2
package/dist/service/requiresSettings.d.ts.map +1 -1
package/dist/service/requiresSettings.js.map +1 -1
package/dist/service/server.d.ts.map +1 -1
package/dist/service/server.js +15 -0
package/dist/service/server.js.map +1 -1
package/dist/service/transformPage.d.ts +81 -2
package/dist/service/transformPage.d.ts.map +1 -1
package/dist/service/transformPage.js +672 -82
package/dist/service/transformPage.js.map +1 -1
package/dist/service/useApiRoutes.d.ts.map +1 -1
package/dist/service/useApiRoutes.js +579 -13
package/dist/service/useApiRoutes.js.map +1 -1
package/dist/service/useConnectorRoutes.d.ts +4 -0
package/dist/service/useConnectorRoutes.d.ts.map +1 -0
package/dist/service/useConnectorRoutes.js +389 -0
package/dist/service/useConnectorRoutes.js.map +1 -0
package/dist/service/useDataRoutes.d.ts.map +1 -1
package/dist/service/useDataRoutes.js +83 -70
package/dist/service/useDataRoutes.js.map +1 -1
package/dist/service/usePageRoutes.d.ts.map +1 -1
package/dist/service/usePageRoutes.js +243 -38
package/dist/service/usePageRoutes.js.map +1 -1
package/dist/settings.d.ts +33 -4
package/dist/settings.d.ts.map +1 -1
package/dist/settings.js +108 -15
package/dist/settings.js.map +1 -1
package/dist/synthos-cli.d.ts.map +1 -1
package/dist/synthos-cli.js +11 -1
package/dist/synthos-cli.js.map +1 -1
package/dist/themes.d.ts +9 -0
package/dist/themes.d.ts.map +1 -0
package/dist/themes.js +64 -0
package/dist/themes.js.map +1 -0
package/package.json +5 -3
package/required-pages/builder.html +74 -0
package/required-pages/builder.json +1 -0
package/required-pages/pages.html +169 -126
package/required-pages/pages.json +1 -0
package/required-pages/settings.html +812 -156
package/required-pages/settings.json +1 -0
package/required-pages/synthos_apis.html +272 -0
package/required-pages/synthos_apis.json +1 -0
package/required-pages/synthos_scripts.html +87 -0
package/required-pages/synthos_scripts.json +1 -0
package/src/connectors/index.ts +12 -0
package/src/connectors/registry.ts +98 -0
package/src/connectors/types.ts +68 -0
package/src/files.ts +11 -0
package/src/init.ts +151 -5
package/src/migrations.ts +266 -0
package/src/models/index.ts +2 -0
package/src/models/providers.ts +33 -0
package/src/models/types.ts +23 -0
package/src/pages.ts +234 -26
package/src/scripts.ts +2 -2
package/src/service/createCompletePrompt.ts +14 -18
package/src/service/debugLog.ts +17 -0
package/src/service/modelInstructions.ts +14 -0
package/src/service/requiresSettings.ts +3 -3
package/src/service/server.ts +19 -2
package/src/service/transformPage.ts +709 -88
package/src/service/useApiRoutes.ts +632 -16
package/src/service/useConnectorRoutes.ts +427 -0
package/src/service/useDataRoutes.ts +87 -71
package/src/service/usePageRoutes.ts +237 -44
package/src/settings.ts +143 -20
package/src/synthos-cli.ts +11 -1
package/src/themes.ts +71 -0
package/default-pages/[application].html +0 -95
package/default-pages/[markdown].html +0 -271
package/default-pages/[sidebar].html +0 -114
package/default-pages/[split-application].html +0 -118
package/default-pages/solar_system.html +0 -432
package/default-pages/space_invaders.html +0 -617
package/required-pages/apis.html +0 -362
package/required-pages/home.html +0 -126
package/required-pages/scripts.html +0 -350

package/required-pages/apis.html DELETED Viewed

@@ -1,362 +0,0 @@
-<!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>
-        /* Nebula Dusk Theme */
-        :root { --bg-primary:#1a1a2e; --bg-secondary:#16213e; --bg-tertiary:#0f0f23; --accent-primary:#667eea; --accent-secondary:#764ba2; --accent-tertiary:#f093fb; --accent-glow:rgba(138,43,226,0.3); --text-primary:#e0e0e0; --text-secondary:#b794f6; --border-color:rgba(138,43,226,0.3); }
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%); color: var(--text-primary); height: 100vh; display: flex; }
-        .chat-panel { width: 30%; background: linear-gradient(180deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%); box-shadow: 0 0 30px var(--accent-glow), inset 0 0 60px rgba(75, 0, 130, 0.1); padding: 20px; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); }
-        .chat-header { font-size: 24px; padding: 15px; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); color: white; text-align: center; border-radius: 15px; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); letter-spacing: 2px; }
-        .chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; margin-top: 15px; background: rgba(15, 15, 35, 0.6); border-radius: 15px; border: 1px solid var(--border-color); box-shadow: inset 0 0 30px rgba(75, 0, 130, 0.2); }
-        .chat-message { margin-bottom: 15px; padding: 12px 15px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%); border-radius: 15px; box-shadow: 0 2px 10px var(--accent-glow); border: 1px solid rgba(138, 43, 226, 0.1); backdrop-filter: blur(5px); }
-        .chat-message p { margin-bottom: 5px; line-height: 1.5; }
-        .chat-message p strong { font-weight: 600; background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
-        .chat-message p code { background: rgba(138, 43, 226, 0.3); padding: 2px 6px; border-radius: 5px; font-family: 'Courier New', Courier, monospace; color: var(--accent-tertiary); border: 1px solid rgba(240, 147, 251, 0.3); }
-        .link-group { display: flex; justify-content: space-between; margin: 15px 0; padding: 10px; background: rgba(15, 15, 35, 0.4); border-radius: 10px; border: 1px solid var(--border-color); }
-        .link-group a { font-size: 14px; color: var(--text-secondary); text-decoration: none; padding: 8px 15px; border-radius: 8px; transition: all 0.3s ease; border: 1px solid transparent; }
-        .link-group a:hover { background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%); border-color: rgba(183, 148, 246, 0.5); box-shadow: 0 0 15px var(--accent-glow); color: var(--accent-tertiary); }
-        form { display: flex; flex-direction: row; width: 100%; gap: 10px; align-items: center; }
-        .chat-input { padding: 14px 18px; border: 1px solid var(--border-color); border-radius: 25px; flex-grow: 1; font-size: 14px; background: rgba(15, 15, 35, 0.8); color: var(--text-primary); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(138, 43, 226, 0.1); transition: all 0.3s ease; }
-        .chat-input:focus { outline: none; border-color: rgba(183, 148, 246, 0.6); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 25px var(--accent-glow); }
-        .chat-input::placeholder { color: rgba(183, 148, 246, 0.5); }
-        .chat-submit { padding: 14px 20px; border: none; border-radius: 25px; font-size: 14px; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); color: white; cursor: pointer; transition: all 0.3s ease; font-weight: 600; letter-spacing: 1px; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); white-space: nowrap; }
-        .chat-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6); }
-        .chat-submit:active { transform: translateY(0); }
-        .viewer-panel { width: 70%; padding: 25px; background: linear-gradient(135deg, rgba(22, 33, 62, 0.9) 0%, rgba(15, 15, 35, 0.95) 100%); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; box-shadow: inset 0 0 60px rgba(75, 0, 130, 0.15); position: relative; overflow: hidden; }
-        .viewer-panel::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at center, rgba(138, 43, 226, 0.05) 0%, transparent 70%); animation: nebula-pulse 8s ease-in-out infinite; pointer-events: none; }
-        @keyframes nebula-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
-        .loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 15, 35, 0.9); justify-content: center; align-items: center; z-index: 1000; }
-        .spinner { width: 50px; height: 50px; border: 4px solid var(--border-color); border-top-color: var(--accent-tertiary); border-radius: 50%; animation: spin 1s linear infinite; }
-        @keyframes spin { to { transform: rotate(360deg); } }
-        /* Page Style */
-        .dialog-title { font-size: 22px; font-weight: 700; padding: 14px 30px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; text-align: center; border-radius: 12px; width: 100%; max-width: 800px; box-shadow: 0 6px 25px var(--accent-glow); position: relative; z-index: 1; }
-        .dialog-content { font-size: 14px; color: rgba(224, 224, 224, 0.8); padding: 15px 0; flex-grow: 1; width: 100%; max-width: 800px; position: relative; z-index: 1; overflow-y: auto; }
-        .api-section { margin: 8px 0; border-radius: 10px; width: 100%; background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border: 1px solid var(--border-color); overflow: hidden; }
-        .api-header { font-size: 14px; cursor: pointer; background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%); padding: 12px 15px; text-align: left; transition: all 0.3s; color: var(--text-secondary); font-weight: 500; }
-        .api-header:hover { background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%); color: var(--accent-tertiary); }
-        .api-content { display: none; padding: 12px 15px; background: rgba(15, 15, 35, 0.5); border-top: 1px solid var(--border-color); font-size: 13px; line-height: 1.5; }
-        .api-input { margin-top: 10px; }
-        .api-input input, .api-input textarea, .api-input select { width: 100%; padding: 10px 12px; margin-bottom: 8px; border-radius: 8px; border: 1px solid var(--border-color); background: rgba(15, 15, 35, 0.8); color: var(--text-primary); font-size: 13px; transition: all 0.3s; }
-        .api-input input:focus, .api-input textarea:focus, .api-input select:focus { outline: none; border-color: var(--text-secondary); box-shadow: 0 0 15px var(--accent-glow); }
-        .api-input textarea { min-height: 80px; resize: vertical; }
-        .api-input select { cursor: pointer; }
-        .api-input select option { background: var(--bg-tertiary); color: var(--text-primary); }
-        .api-input button { padding: 10px 18px; border: none; border-radius: 20px; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); color: white; cursor: pointer; transition: all 0.3s; font-weight: 500; font-size: 13px; box-shadow: 0 3px 15px var(--accent-glow); }
-        .api-input button:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5); }
-        .api-input button:disabled { background: rgba(102, 126, 234, 0.3); cursor: not-allowed; transform: none; box-shadow: none; }
-        .api-output { margin-top: 10px; min-height: 100px; max-height: 200px; background: rgba(15, 15, 35, 0.8); color: var(--accent-tertiary); padding: 12px; border-radius: 8px; overflow-y: auto; white-space: pre-wrap; font-family: 'Courier New', Courier, monospace; font-size: 12px; border: 1px solid var(--border-color); }
-        .generated-image { max-width: 100%; height: auto; margin-top: 10px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 4px 20px var(--accent-glow); }
-        /* Scrollbar Styles */
-        ::-webkit-scrollbar { width: 10px; height: 10px; }
-        ::-webkit-scrollbar-track { background: rgba(15, 15, 35, 0.6); border-radius: 10px; border: 1px solid var(--border-color); }
-        ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); border-radius: 10px; border: 2px solid rgba(15, 15, 35, 0.6); box-shadow: 0 0 10px var(--accent-glow); }
-        ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-tertiary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%); box-shadow: 0 0 15px rgba(240, 147, 251, 0.5); }
-        ::-webkit-scrollbar-corner { background: rgba(15, 15, 35, 0.6); }
-        * { scrollbar-width: thin; scrollbar-color: var(--accent-secondary) rgba(15, 15, 35, 0.6); }
-    </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 DELETED Viewed

@@ -1,126 +0,0 @@
-<!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>
-        /* Nebula Dusk Theme */
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); color: #e0e0e0; height: 100vh; display: flex; }
-        .chat-panel { width: 30%; background: linear-gradient(180deg, rgba(26,26,46,0.95) 0%, rgba(22,33,62,0.95) 100%); box-shadow: 0 0 30px rgba(138,43,226,0.2), inset 0 0 60px rgba(75,0,130,0.1); padding: 20px; display: flex; flex-direction: column; border-right: 1px solid rgba(138,43,226,0.3); }
-        .chat-header { font-size: 24px; padding: 15px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); color: #fff; text-align: center; border-radius: 15px; box-shadow: 0 4px 20px rgba(102,126,234,0.4); text-shadow: 0 2px 10px rgba(0,0,0,0.3); letter-spacing: 2px; }
-        .chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; margin-top: 15px; background: rgba(15,15,35,0.6); border-radius: 15px; border: 1px solid rgba(138,43,226,0.2); box-shadow: inset 0 0 30px rgba(75,0,130,0.2); }
-        .chat-message { margin-bottom: 15px; padding: 12px 15px; background: linear-gradient(135deg, rgba(102,126,234,0.15) 0%, rgba(118,75,162,0.15) 100%); border-radius: 15px; box-shadow: 0 2px 10px rgba(138,43,226,0.2); border: 1px solid rgba(138,43,226,0.1); backdrop-filter: blur(5px); }
-        .chat-message p { margin-bottom: 5px; line-height: 1.5; }
-        .chat-message p strong { font-weight: 600; background: linear-gradient(90deg, #667eea, #f093fb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
-        .chat-message p code { background: rgba(138,43,226,0.3); padding: 2px 6px; border-radius: 5px; font-family: 'Courier New', Courier, monospace; color: #f093fb; border: 1px solid rgba(240,147,251,0.3); }
-        .link-group { display: flex; justify-content: space-between; margin: 15px 0; padding: 10px; background: rgba(15,15,35,0.4); border-radius: 10px; border: 1px solid rgba(138,43,226,0.2); }
-        .link-group a { font-size: 14px; color: #b794f6; text-decoration: none; padding: 8px 15px; border-radius: 8px; transition: all 0.3s ease; border: 1px solid transparent; }
-        .link-group a:hover { background: linear-gradient(135deg, rgba(102,126,234,0.3) 0%, rgba(118,75,162,0.3) 100%); border-color: rgba(183,148,246,0.5); box-shadow: 0 0 15px rgba(138,43,226,0.3); color: #f093fb; }
-        form { display: flex; flex-direction: row; width: 100%; gap: 10px; align-items: center; }
-        .chat-input { padding: 14px 18px; border: 1px solid rgba(138,43,226,0.3); border-radius: 25px; flex-grow: 1; font-size: 14px; background: rgba(15,15,35,0.8); color: #e0e0e0; box-shadow: inset 0 2px 10px rgba(0,0,0,0.3), 0 0 20px rgba(138,43,226,0.1); transition: all 0.3s ease; }
-        .chat-input:focus { outline: none; border-color: rgba(183,148,246,0.6); box-shadow: inset 0 2px 10px rgba(0,0,0,0.3), 0 0 25px rgba(138,43,226,0.3); }
-        .chat-input::placeholder { color: rgba(183,148,246,0.5); }
-        .chat-submit { padding: 14px 20px; border: none; border-radius: 25px; font-size: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); color: #fff; cursor: pointer; transition: all 0.3s ease; font-weight: 600; letter-spacing: 1px; box-shadow: 0 4px 20px rgba(102,126,234,0.4); white-space: nowrap; }
-        .chat-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(102,126,234,0.6); }
-        .chat-submit:active { transform: translateY(0); }
-        .viewer-panel { width: 70%; padding: 25px; background: linear-gradient(135deg, rgba(22,33,62,0.9) 0%, rgba(15,15,35,0.95) 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: inset 0 0 60px rgba(75,0,130,0.15); position: relative; overflow: hidden; }
-        .loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15,15,35,0.9); justify-content: center; align-items: center; z-index: 1000; }
-        .spinner { width: 50px; height: 50px; border: 4px solid rgba(138,43,226,0.3); border-top-color: #f093fb; border-radius: 50%; animation: spin 1s linear infinite; }
-        @keyframes spin { to { transform: rotate(360deg); } }
-        /* Elegant minimal idle animation */
-        .idle-container { position: absolute; width: 100%; height: 100%; pointer-events: none; opacity: 1; transition: opacity 1s ease-out; }
-        .idle-container.hidden { opacity: 0; }
-        .breathing-orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(102,126,234,0.15) 0%, transparent 70%); animation: breathe 4s ease-in-out infinite; }
-        .breathing-orb::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%; background: rgba(183,148,246,0.6); box-shadow: 0 0 20px rgba(183,148,246,0.4); animation: core-pulse 4s ease-in-out infinite; }
-        @keyframes breathe { 0%,100% { width: 80px; height: 80px; opacity: 0.3; } 50% { width: 120px; height: 120px; opacity: 0.6; } }
-        @keyframes core-pulse { 0%,100% { opacity: 0.4; box-shadow: 0 0 20px rgba(183,148,246,0.3); } 50% { opacity: 0.8; box-shadow: 0 0 30px rgba(183,148,246,0.5); } }
-        .orbit-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; border: 1px solid rgba(102,126,234,0.1); border-radius: 50%; animation: orbit-rotate 20s linear infinite; }
-        .orbit-ring::after { content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: rgba(240,147,251,0.5); border-radius: 50%; box-shadow: 0 0 10px rgba(240,147,251,0.3); }
-        @keyframes orbit-rotate { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
-        /* Scrollbar Styles */
-        ::-webkit-scrollbar { width: 10px; height: 10px; }
-        ::-webkit-scrollbar-track { background: rgba(15,15,35,0.6); border-radius: 10px; }
-        ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 10px; border: 2px solid rgba(15,15,35,0.6); box-shadow: 0 0 10px rgba(138,43,226,0.4); }
-        ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f093fb 0%, #764ba2 50%, #667eea 100%); box-shadow: 0 0 15px rgba(240,147,251,0.5); }
-        ::-webkit-scrollbar-corner { background: rgba(15,15,35,0.6); }
-        * { scrollbar-width: thin; scrollbar-color: #764ba2 rgba(15,15,35,0.6); }
-    </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">
-        <div class="idle-container" id="idleAnimation">
-            <div class="orbit-ring"></div>
-            <div class="breathing-orb"></div>
-        </div>
-    </div>
-    <div id="thoughts" style="display: none;">Simplified the idle animation dramatically. Removed all the busy elements (scanning lines, particles, data streams, corner brackets, multiple pulse rings, status text). Now it's just two elements: 1) A breathing orb in the center that gently expands and contracts with a soft glow, and 2) A single thin orbital ring that rotates very slowly (20 seconds per rotation) with a small accent dot. This creates an elegant, minimal presence that suggests the system is alive without being distracting. The animation is much more refined and Star Trek computer-appropriate - subtle ambient awareness rather than flashy effects.</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'
-            });
-        };
-        // Function to hide the idle animation when content is rendered
-        function hideIdleAnimation() {
-            const idleContainer = document.getElementById('idleAnimation');
-            if (idleContainer) {
-                idleContainer.classList.add('hidden');
-                setTimeout(() => {
-                    idleContainer.style.display = 'none';
-                }, 1000);
-            }
-        }
-        // Function to show the idle animation
-        function showIdleAnimation() {
-            const idleContainer = document.getElementById('idleAnimation');
-            if (idleContainer) {
-                idleContainer.style.display = 'block';
-                setTimeout(() => {
-                    idleContainer.classList.remove('hidden');
-                }, 10);
-            }
-        }
-    </script>
-</body>
-</html>