synthos 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Steven Ickman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,71 @@
+# SynthOS: An AI Powered Interactive Shell Experience
+
+[SynthOS](https://github.com/Stevenic/synthos) is an interactive shell experience powered by generative AI, featuring a user interface that is entirely AI-generated. Similar to a wiki, it organizes everything into pages, but with a twist: these pages are self-modifying and can transform into anything. Each page includes a chat panel and a content viewer. Entering a command into the chat panel prompts the configured Large Language Model (LLM) to completely rewrite the current page. The page can morph into anything—from providing answers to questions to becoming a tool that assists you with complex tasks.
+
+SynthOS has access to tools in the form of APIs and scripts. Built-in APIs enable SynthOS to read and write objects to local storage or make additional generative AI calls. Scripts are user-defined extensions that allow SynthOS to perform local actions on your machine. You can add scripts that let SynthOS start a build, make a Git commit, or run a cURL command.
+
+## Installing SynthOS
+
+To get started using SynthOS you'll need to first install a recent version of [Node.js](https://nodejs.org/en/download/package-manager/current). I use version `18.20.2` but any relatively recent version should work.  You'll also want to go to OpenAI.com [create a developer account](https://platform.openai.com/login?launch) if you don't have one (it's free.)  Once you have your account created you'll need to [generate an API Key](https://platform.openai.com/api-keys) from the Dashboard. Save this key somewhere as you'll need it in a few moments.
+
+Open a terminal window and run the following commands:
+
+```bash
+npm install --global synthos
+synthos start
+```
+
+This will install the CLI and start the SynthOS server running. This terminal window needs to stay open to keep the server running.  You should see a message saying `SynthOS's server is running on http://localhost:4242`.  You can open your browser to that link and you should land on the `settings` page.
+
+
+## Using SynthOS
+
+The first time you open SynthOS you're going to be directed to a `settings` page where you can enter your API key: 
+
+![SynthOS Settings Page](./images/settings.png)
+
+Enter the OpenAI API key you saved into the API Key field and select the version of GPT-4o you'd like to use from the drop down. `gpt-4o-mini` is the cheapest but it's not as creative as `gpt-4o-2024-08-06`. If you're on a trial account then I'd recommend sticking with `gpt-4o-mini` otherwise I'd go with `gpt-4o` for the best creativity. Another strategy would be to stick with `gpt-4o-mini` while using an app but switch to `gpt-4o` when you want to create something new.  It's also worth noting, that you only incur LLM costs when chatting with the LLM from the chat window so if you're just using an app it created, there's no cost.  And if you're curious the average number of output tokens generated for a simple page is around 2,000 tokens. Add another 500 or so in prompt overhead and most requests will be around 2,500 input tokens and 2,000 generated output tokens.
+
+Once you've entered your API key and selected your model press Update and you should be navigated to the `home` page:
+
+![SynthOS Home Page](./images/home.png)
+
+Type in a query like "create a snake game. make it fill the viewer and include a score" to just verify that all of your settings are properly configured and everything is working.
+
+
+## Page Management
+
+A SynthOS server instance is just a collection of named pages. You can think of it almost like a wiki but every page is generated by an LLM with direction from you. If you look directly above the chat input box you'll see controls for performing basic page management:
+
+![SynthOS Page Management](./images/page-management.png)
+
+- **Save** - Will save the current page to either a new page or over the top of the current page. Any page can be replaced, even the home page.
+- **Pages** - Navigates you to the `pages` page where you can see a listing of all the current pages. You can navigate to a different page from either the `pages` page or by setting the `/{page_name}` directly in your browsers address bar.
+- **Reset** - Restores the current page back to its last save point. The modifications to a page are cached in the servers memory until their either saved using **Save** or the server is restarted.  Clicking **Reset** lets you manually roll back changes and, trust me, you will be clicking this a lot.
+
+One thing you'll notice is that there's no **Delete** action. This is actually by design. The LLM has direct access to all of these page management features and I didn't want it randomly deciding to write a program that would delete all of its pages.
+
+When you start SynthOS, it creates a `.synthos` subfolder under the folder it was started in. This folder contains your current `settings.json` file and a `.html` file for last save point of every page.  Deleting this .html file will delete the page from the collection but you may need to restart the SynthOS server for the changes to take effect.
+
+Since all of the pages are just static .html files it means that you're to edit them directly using a tool like [VSCode](https://code.visualstudio.com/). You'll need to click **Reset** in the UI to see your manual changes take effect.  Sometimes it's easier to just go in and tweak the final layout of a page manually.
+
+
+## Tips and Tricks
+
+I'm new to working with SynthOS as well but here's a couple of things I've already figured out.
+
+**Manual Reset**\
+Sometimes the LLM will decide to make a change that breaks the entire page. This is when it's useful to know how to manually reset the page to its last save point.  From the address bar append a `/reset` to the current address. So `https://localhost:4242/home/reset` will restore the home page back to its starting state.
+
+
+**Save Often**\
+This goes along with the reset tip. Most things you create are going to take a bit of iteration. You're going to ask the LLM to make a change and it's not going to do exactly what you want or worse break the whole page. Anytime you get something you like save it. Saving is cheap and you can have as many drafts as you want. Just use a naming scheme like `my_app_v2`.
+
+**Walk the LLM to a Design Step-by-Step**\
+We're asking the LLM to re-generate an entire page on every request. That's asking a lot. You'll get your best results if you have the model focus on one change at a time (start with layout) and then step your way to a final design, saving anytime you get a result you like.
+
+**Leverage the [templates]**\
+Use the provided templates as a starting point for structure or better yet, build your own templates!  I'm still figuring this out but it seems like you want to start with defining the pages layout first because the LLM will naturally want to make any changes within the confines of the current layout. Once you get your layout the way you want add in visual elements like input boxes and such. Then once you get everything visually the way you want you can add in behavior like calling API's or saving to storage.
+
+**Give the LLM Libraries to Use**\
+If you have a specific JavaScript library you want to use, find the link on a CDN or the web and then tell the LLM to use that specific version and it will.

package/bin/synthos.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+var app = require('../dist/synthos-cli.js');
+app.run();

package/default-pages/[application].html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynthOS - {Application Title}</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; }
+    </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 kind of application would you like?</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">{Application Title}</div>
+        <div class="application-content">{Application Content}</div>
+    </div>
+    <div id="thoughts" style="display: none;">I've prompted the user for the type of application to create.</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>
+</body>
+</html>

package/default-pages/[markdown].html

@@ -0,0 +1,261 @@
+<!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: 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; }
+        .markdown-content { text-align: left; color: #f0f0f0; width: 100%; max-width: 800px; margin: 0 auto; line-height: 1.6; }
+        .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5 { color: #ffffff; margin-top: 1em; margin-bottom: 0.5em; }
+        .markdown-content h1 { font-size: 2.5em; border-bottom: 2px solid #4a90e2; padding-bottom: 0.2em; }
+        .markdown-content h2 { font-size: 2em; }
+        .markdown-content h3 { font-size: 1.5em; }
+        .markdown-content h4 { font-size: 1.2em; }
+        .markdown-content h5 { font-size: 1em; }
+        .markdown-content p { margin-bottom: 1em; }
+        .markdown-content ul, .markdown-content ol { margin-left: 10px; margin-bottom: 1em; }
+        .markdown-content li { margin-bottom: 0.5em; }
+        .markdown-content blockquote { margin: 1em 0; padding: 0.5em 10px; border-left: 5px solid #4a90e2; background: #333; font-style: italic; }
+        .markdown-content code { background: #333; padding: 2px 4px; font-family: 'Courier New', Courier, monospace; }
+        .markdown-content pre { background: #333; padding: 15px; border-radius: 4px; overflow-x: auto; margin-bottom: 1em; }
+        .markdown-content .code-block { border-radius: 4px; overflow: hidden; margin-bottom: 1em; }
+        .markdown-content .code-block pre { border-radius: 0; margin-bottom: 0; }
+        .markdown-content a { color: #3498db; text-decoration: none; }
+        .markdown-content a:hover { text-decoration: underline; }
+        .markdown-content > * + * { margin-top: 1em; }
+        .markdown-content table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
+        .markdown-content th, .markdown-content td { padding: 10px; border: 1px solid #444; text-align: left; }
+        .markdown-content th { background: #3a3a3a; font-weight: bold; }
+        .markdown-content td { background: #2b2b2b; }
+        .markdown-content img { max-width: 100%; height: auto; display: block; margin: 1em auto; border-radius: 4px; }
+        .code-header { background: #444; padding: 5px 10px; border-radius: 5px 5px 0 0; display: flex; justify-content: space-between; align-items: center; }
+        .code-header span { font-size: 0.9em; color: #ccc; }
+        .copy-button { background: #5a5a5a; border: none; color: #fff; padding: 5px 10px; border-radius: 5px; cursor: pointer; }
+        .copy-button:hover { background: #6a6a6a; }
+    </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>
+    <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.10.0/highlight.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.10.0/styles/night-owl.min.css" rel="stylesheet">
+</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 document can I write 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="markdown-content" id="markdownContent">
+            <!-- The markdown content will be rendered here -->
+        </div>
+    </div>
+    <div id="thoughts" style="display: none;">I've prompted the user for the document to write.</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'
+            });
+
+            // Render markdown using marked library with custom renderer
+            const renderer = new marked.Renderer();
+            renderer.code = function(code) {
+                const validLanguage = !!(code.lang && hljs.getLanguage(code.lang));
+                const highlighted = validLanguage ? hljs.highlight(code.lang, code.text).value : code.text;
+                console.log(highlighted);
+                return `<div class="code-block">
+                            <div class="code-header">
+                                <span>${code.lang || 'plaintext'}</span>
+                                <button class="copy-button" onclick="copyToClipboard(this)">Copy</button>
+                            </div>
+                            <pre><code class="${code.lang}">${highlighted}</code></pre>
+                        </div>`;
+            };
+
+            marked.setOptions({
+                renderer: renderer,
+                highlight: function(code) {
+                    const validLanguage = !!(code.lang && hljs.getLanguage(code.lang));
+                    return validLanguage ? hljs.highlight(code.lang, code.text).value : code.textS;
+                }
+            });
+
+            document.getElementById('markdownContent').innerHTML = marked.parse(markdownContent);
+
+            // Initialize mermaid
+            mermaid.initialize({ startOnLoad: true, theme: 'dark' });
+            mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
+        };
+            
+        function copyToClipboard(button) {
+            const codeBlock = button.parentElement.nextElementSibling.querySelector('code');
+            navigator.clipboard.writeText(codeBlock.textContent).then(() => {
+                button.textContent = 'Copied!';
+                setTimeout(() => { button.textContent = 'Copy'; }, 2000);
+            });
+        }
+
+        // Markdown content to render
+        const markdownContent = `# SynthOS's Markdown Showcase
+
+This page demonstrates various markdown elements and how they are styled in our custom theme.
+
+## Text Formatting
+
+You can make text **bold**, *italic*, or ***both***. You can also use ~~strikethrough~~ for deleted text.
+
+## Lists
+
+### Unordered List
+
+- Item 1
+- Item 2
+  - Subitem 2.1
+  - Subitem 2.2
+- Item 3
+
+### Ordered List
+
+1. First item
+2. Second item
+3. Third item
+   1. Subitem 3.1
+   2. Subitem 3.2
+
+## Links and Images
+
+You can create [links to websites](https://www.example.com) or add images:
+
+![Sample Image](https://via.placeholder.com/300x200.png?text=Sample+Image)
+
+## Blockquotes
+
+> This is a blockquote. It's great for highlighting important information or quoting sources.
+
+## Code Blocks
+
+Inline code: \`console.log('Hello, World!');\`
+
+Code block:
+
+\`\`\`javascript
+function greet(name) {
+  return \`Hello, \${name}!\`;
+}
+
+console.log(greet('SynthOS'));
+\`\`\`
+
+## Tables
+
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 |
+| Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3 |
+
+## Horizontal Rule
+
+---
+
+## Task Lists
+
+- [x] Complete task
+- [ ] Incomplete task
+- [ ] Another task
+
+## Mermaid Diagrams
+
+\`\`\`mermaid
+graph TD
+    A[Start] --> B{Is it?}
+    B -- Yes --> C[OK]
+    C --> D[Rethink]
+    D --> B
+    B -- No ----> E[End]
+\`\`\`
+
+This showcase demonstrates the various markdown elements and how they are styled in our custom theme. Feel free to use these examples as a reference when creating your own markdown content!
+
+## Additional Content for Scrolling
+
+To demonstrate the scrolling functionality, we've added some extra content below.
+
+### Lorem Ipsum
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc id aliquam tincidunt, nisl nunc tincidunt nunc, vitae aliquam nunc nunc vitae nunc. Sed euismod, nunc id aliquam tincidunt, nisl nunc tincidunt nunc, vitae aliquam nunc nunc vitae nunc.
+
+### Code Example
+
+Here's another code example to show how syntax highlighting works with scrolling:
+
+\`\`\`python
+def fibonacci(n):
+    if n <= 1:
+        return n
+    else:
+        return fibonacci(n-1) + fibonacci(n-2)
+
+# Print the first 10 Fibonacci numbers
+for i in range(10):
+    print(fibonacci(i))
+\`\`\`
+
+### Final Thoughts
+
+This extended markdown content demonstrates how the viewer panel now scrolls independently of the chat panel, allowing users to read through longer documents while still having access to the chat functionality.`;
+    </script>
+</body>
+</html>

package/default-pages/[sidebar].html

@@ -0,0 +1,89 @@
+<!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: 70%; 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; }
+        .sidebar-panel { width: 30%; 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; }
+        .sidebar-title { font-size: 24px; color: #f0f0f0; background: #3a3a3a; padding: 10px; border-bottom: 1px solid #444; width: 100%; text-align: center; }
+        .sidebar-content { font-size: 18px; color: #ccc; padding: 10px; margin-top:10px; flex-grow: 1; width: 100%; overflow-y: auto; }
+    </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 would you like in the sidebar?</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="sidebar-panel" id="sidebarPanel">
+        <div class="sidebar-title">Sidebar</div>
+        <div class="sidebar-content">
+            <p>This is the sidebar content. You can customize this area with various widgets, information, or controls as needed.</p>
+        </div>
+    </div>
+    <div id="thoughts" style="display: none;">I've prompted the user for what they would like to add to teh sidebar.</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>
+</body>
+</html>