synthos 0.6.0 → 0.7.0

package/src/init.ts

@@ -1,5 +1,7 @@
+import * as fs from 'fs/promises';
 import path from "path";
-import { checkIfExists, copyFile, copyFiles, ensureFolderExists, saveFile } from "./files";
+import { checkIfExists, copyFile, copyFiles, deleteFile, ensureFolderExists, listFiles, saveFile } from "./files";
+import { PAGE_VERSION } from "./pages";
 import { DefaultSettings } from "./settings";
 
 export interface SynthOSConfig {
@@ -7,20 +9,29 @@ export interface SynthOSConfig {
     requiredPagesFolder: string;
     defaultPagesFolder: string;
     defaultScriptsFolder: string;
+    defaultThemesFolder: string;
+    pageScriptsFolder: string;
+    debug: boolean;
+    debugPageUpdates: boolean;
 }
 
-export function createConfig(pagesFolder = '.synthos'): SynthOSConfig {
+export function createConfig(pagesFolder = '.synthos', options?: { debug?: boolean; debugPageUpdates?: boolean }): 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')
+        defaultScriptsFolder: path.join(__dirname, '../default-scripts'),
+        defaultThemesFolder: path.join(__dirname, '../default-themes'),
+        pageScriptsFolder: path.join(__dirname, '../page-scripts'),
+        debug: options?.debug ?? false,
+        debugPageUpdates: options?.debugPageUpdates ?? false
     };
 }
 
 export async function init(config: SynthOSConfig, includeDefaultPages: boolean = true): Promise<boolean> {
     // Check for existing folder
     if (await checkIfExists(config.pagesFolder)) {
+        await repairMissingFolders(config);
         return false;
     }
 
@@ -55,12 +66,147 @@ export async function init(config: SynthOSConfig, includeDefaultPages: boolean =
     }  
 
     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');
+
+    // Setup default themes
+    console.log(`Copying default themes to .synthos folder...`);
+    const themesFolder = path.join(config.pagesFolder, 'themes');
+    await ensureFolderExists(themesFolder);
+    await copyFiles(config.defaultThemesFolder, themesFolder);
+
     // Copy pages
     if (includeDefaultPages) {
         console.log(`Copying default pages to .synthos folder...`);
-        await copyFiles(config.defaultPagesFolder, config.pagesFolder);
+        await copyDefaultPages(config.defaultPagesFolder, config.pagesFolder);
     }
 
     return true;
 }
-    
+
+async function repairMissingFolders(config: SynthOSConfig): Promise<void> {
+    // Rebuild scripts folder from defaults if missing
+    const scriptsFolder = path.join(config.pagesFolder, 'scripts');
+    if (!await checkIfExists(scriptsFolder)) {
+        console.log(`Restoring default scripts to .synthos folder...`);
+        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');
+    }
+
+    // Rebuild themes folder from defaults if missing
+    const themesFolder = path.join(config.pagesFolder, 'themes');
+    if (!await checkIfExists(themesFolder)) {
+        console.log(`Restoring default themes to .synthos folder...`);
+        await ensureFolderExists(themesFolder);
+        await copyFiles(config.defaultThemesFolder, themesFolder);
+    }
+
+    // Ensure pages/ subfolder exists
+    const pagesSubdir = path.join(config.pagesFolder, 'pages');
+    if (!await checkIfExists(pagesSubdir)) {
+        // No pages folder and no flat files — rebuild from defaults
+        const htmlFiles = (await listFiles(config.pagesFolder)).filter(f => f.endsWith('.html'));
+        if (htmlFiles.length === 0) {
+            console.log(`Restoring default pages to .synthos/pages/ folder...`);
+            await copyDefaultPages(config.defaultPagesFolder, config.pagesFolder);
+        } else {
+            await ensureFolderExists(pagesSubdir);
+        }
+    }
+
+    // Migrate any stray flat .html files from root into pages/<name>/
+    await migrateFlatPages(config.pagesFolder);
+}
+
+function toTitleCase(name: string): string {
+    // Strip brackets, replace underscores/hyphens with spaces, then Title Case each word
+    return name
+        .replace(/[\[\]]/g, '')
+        .replace(/[_-]/g, ' ')
+        .replace(/\b\w/g, c => c.toUpperCase());
+}
+
+async function migrateFlatPages(pagesFolder: string): Promise<void> {
+    const pagesSubdir = path.join(pagesFolder, 'pages');
+    const htmlFiles = (await listFiles(pagesFolder)).filter(f => f.endsWith('.html'));
+    if (htmlFiles.length === 0) return;
+
+    console.log(`Migrating ${htmlFiles.length} page(s) to .synthos/pages/ folder...`);
+    await ensureFolderExists(pagesSubdir);
+    const now = new Date().toISOString();
+
+    for (const file of htmlFiles) {
+        const pageName = file.replace(/\.html$/, '');
+        const category = pageName.startsWith('[') ? 'Builder' : 'Pages';
+        const title = toTitleCase(pageName);
+        const pageFolder = path.join(pagesSubdir, pageName);
+        await ensureFolderExists(pageFolder);
+        await fs.copyFile(
+            path.join(pagesFolder, file),
+            path.join(pageFolder, 'page.html')
+        );
+        await saveFile(
+            path.join(pageFolder, 'page.json'),
+            JSON.stringify({
+                title,
+                categories: [category],
+                pinned: false,
+                createdDate: now,
+                lastModified: now,
+                pageVersion: 1,
+                mode: 'unlocked',
+            }, null, 4)
+        );
+        await deleteFile(path.join(pagesFolder, file));
+    }
+}
+
+async function copyDefaultPages(srcFolder: string, destFolder: string): Promise<void> {
+    const pagesDir = path.join(destFolder, 'pages');
+    await ensureFolderExists(pagesDir);
+    const files = await fs.readdir(srcFolder);
+    const now = new Date().toISOString();
+    for (const file of files) {
+        if (!file.endsWith('.html')) continue;
+        const pageName = file.replace(/\.html$/, '');
+        const pageFolder = path.join(pagesDir, pageName);
+        await ensureFolderExists(pageFolder);
+        await fs.copyFile(path.join(srcFolder, file), path.join(pageFolder, 'page.html'));
+
+        // Read companion .json metadata from source folder, fall back to defaults
+        let metadata: Record<string, unknown> = {};
+        const jsonPath = path.join(srcFolder, `${pageName}.json`);
+        if (await checkIfExists(jsonPath)) {
+            try {
+                const raw = await fs.readFile(jsonPath, 'utf-8');
+                metadata = JSON.parse(raw);
+            } catch {
+                // use defaults
+            }
+        }
+        const fullMetadata = {
+            title: typeof metadata.title === 'string' ? metadata.title : '',
+            categories: Array.isArray(metadata.categories) ? metadata.categories : [],
+            pinned: typeof metadata.pinned === 'boolean' ? metadata.pinned : false,
+            createdDate: now,
+            lastModified: now,
+            pageVersion: typeof metadata.pageVersion === 'number' ? metadata.pageVersion
+                : typeof metadata.uxVersion === 'number' ? metadata.uxVersion : PAGE_VERSION,
+            mode: metadata.mode === 'locked' ? 'locked' : 'unlocked',
+        };
+        await saveFile(path.join(pageFolder, 'page.json'), JSON.stringify(fullMetadata, null, 4));
+    }
+}

package/src/migrations.ts

@@ -0,0 +1,266 @@
+import * as cheerio from 'cheerio';
+import { completePrompt } from 'agentm-core';
+import { deduplicateInlineScripts } from './service/transformPage';
+
+/**
+ * Registry of migration functions: fromVersion -> transform.
+ * Each function transforms page HTML from version N to version N+1.
+ */
+const migrations: Record<number, (html: string, completePrompt: completePrompt) => Promise<string>> = {
+    1: migrateV1toV2,
+};
+
+/**
+ * Migrate a page's HTML from one version to another by applying
+ * sequential migration steps.
+ */
+export async function migratePage(html: string, fromVersion: number, toVersion: number, completePrompt: completePrompt): Promise<string> {
+    let current = html;
+    for (let v = fromVersion; v < toVersion; v++) {
+        const migrate = migrations[v];
+        if (!migrate) {
+            throw new Error(`No migration defined for version ${v} -> ${v + 1}`);
+        }
+        current = await migrate(current, completePrompt);
+    }
+    return current;
+}
+
+/** CSS classes that belong to the shared theme and must NOT appear in page-specific <style> blocks. */
+const SHARED_CSS_SELECTORS = [
+    '*',
+    'body',
+    '.chat-panel',
+    '.chat-header',
+    '.chat-messages',
+    '.chat-message',
+    '.chat-message p',
+    '.chat-message strong',
+    '.chat-message pre',
+    '.chat-message code',
+    '.chat-message a',
+    '.link-group',
+    '.link-group a',
+    'form',
+    '.chat-input',
+    '.chat-submit',
+    '.loading-overlay',
+    '.spinner',
+    '.viewer-panel',
+    '#loadingOverlay',
+    '.chat-submit:disabled',
+    '.chat-input:disabled',
+];
+
+const V1_TO_V2_SYSTEM_PROMPT = `You are a code migration tool. You convert SynthOS v1 pages to v2 format.
+
+## Rules — What to REMOVE
+
+1. **Shared CSS rules** — Remove CSS rules that match these selectors **exactly** (they are now in theme.css):
+   \`*\`, \`body\`, \`.chat-panel\`, \`.chat-header\`, \`.chat-messages\`, \`.chat-message\` (and descendants like \`.chat-message p\`, \`.chat-message strong\`, \`.chat-message pre\`, \`.chat-message code\`, \`.chat-message a\`), \`.link-group\`, \`.link-group a\`, \`form\`, \`.chat-input\`, \`.chat-submit\`, \`.loading-overlay\`, \`.spinner\`, \`.viewer-panel\`, \`#loadingOverlay\`, \`.chat-submit:disabled\`, \`.chat-input:disabled\`
+   Also remove any \`@keyframes spin\` and scrollbar pseudo-element rules (\`::-webkit-scrollbar\`, \`::-webkit-scrollbar-track\`, \`::-webkit-scrollbar-thumb\`).
+   **Important:** Only remove rules matching these selectors exactly. Do NOT remove pseudo-element variants (\`.viewer-panel::before\`, \`.viewer-panel::after\`), pseudo-class variants (\`.chat-input:focus\`, \`.chat-submit:hover\`), or any other compound selectors that extend the shared selectors — those are page-specific styles and must be preserved. Also preserve any \`@keyframes\` referenced by page-specific rules (e.g. if a page has \`.viewer-panel::before\` using a custom animation, keep that \`@keyframes\`).
+
+2. **Shared inline JS** — Remove these specific code blocks from \`<script>\` tags:
+   - \`document.getElementById('chatInput').focus()\` line
+   - \`chatForm\` submit event listener (the one with setTimeout and loading overlay)
+   - \`saveLink\` click handler
+   - \`resetLink\` click handler
+   - \`window.onload\` that ONLY scrolls chatMessages (keep other onload logic!)
+   - Chat panel toggle IIFE (references \`synthos-chat-collapsed\`)
+   - Focus management IIFE (references \`stopImmediatePropagation\`)
+   - \`// Basic chat functionality\` comment
+
+3. **Empty \`<script>\` tags** — If a script block becomes empty after stripping, remove it entirely.
+
+## Rules — What to ADD
+
+1. In \`<head>\`, add these two lines right after the \`<title>\` tag (if not already present):
+   \`\`\`
+   <script src="/api/theme-info.js"></script>
+   <link rel="stylesheet" href="/api/theme.css">
+   \`\`\`
+
+## Rules — What to TRANSFORM
+
+### Data/Table API migration
+The data API changed from global tables to **page-scoped** tables:
+- Old: \`/api/data/:table\` → New: \`/api/data/:page/:table\`
+- Old: \`/api/data/:table/:id\` → New: \`/api/data/:page/:table/:id\`
+- Tables are now stored as sub-folders of each page's folder.
+- **Raw fetch() calls** must be updated: e.g. \`fetch('/api/data/notes')\` → \`fetch('/api/data/' + pageName + '/notes')\`
+- **synthos.data.\* helpers** handle this automatically — they read the current page name from \`window.pageInfo.name\`. Prefer converting raw fetch data calls to use the helpers instead:
+  - \`fetch('/api/data/notes')\` → \`synthos.data.list('notes')\`
+  - \`fetch('/api/data/notes/' + id)\` → \`synthos.data.get('notes', id)\`
+  - \`fetch('/api/data/notes', { method: 'POST', ... })\` → \`synthos.data.save('notes', row)\`
+  - \`fetch('/api/data/notes/' + id, { method: 'DELETE' })\` → \`synthos.data.remove('notes', id)\`
+
+### Color variables
+Replace hardcoded Nebula Dusk colors with CSS variables in **page-specific** CSS only:
+| Hardcoded | CSS Variable |
+|-----------|-------------|
+| \`#667eea\` | \`var(--accent-primary)\` |
+| \`#764ba2\` | \`var(--accent-secondary)\` |
+| \`#f093fb\` | \`var(--accent-tertiary)\` |
+| \`#b794f6\` | \`var(--text-secondary)\` |
+| \`#e0e0e0\` | \`var(--text-primary)\` |
+| \`rgba(138, 43, 226, 0.3)\` or similar purple rgba | \`var(--border-color)\` or \`var(--accent-glow)\` (use border-color for borders, accent-glow for shadows) |
+| \`#1a1a2e\` | \`var(--bg-primary)\` |
+| \`#16213e\` | \`var(--bg-secondary)\` |
+| \`#0f0f23\` | \`var(--bg-tertiary)\` |
+
+For gradients using these colors (e.g. \`linear-gradient(135deg, #667eea, #764ba2)\`), replace with \`linear-gradient(135deg, var(--accent-primary), var(--accent-secondary))\`.
+
+## Rules — What to PRESERVE (do NOT modify)
+
+- ALL viewer-panel HTML content (games, presentations, tools, etc.)
+- ALL page-specific JavaScript (game logic, presentation logic, keyboard handlers, etc.)
+- ALL page-specific CSS (game styles, presentation styles, layout rules for non-shared classes)
+- Chat message history in \`.chat-messages\`
+- \`<div id="thoughts">\` content
+- External CDN script tags (\`<script src="...">\`)
+- The two-panel layout structure (chat-panel + viewer-panel)
+- The \`<div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>\` element
+- The chat form, link-group, chat-header elements (structure only, their CSS is handled by theme)
+
+## V2 page structure example
+
+\`\`\`html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynthOS - Page Title</title>
+    <script src="/api/theme-info.js"></script>
+    <link rel="stylesheet" href="/api/theme.css">
+    <style>
+        /* Only page-specific styles here — no shared chat/layout CSS */
+        .my-custom-element {
+            color: var(--text-primary);
+            background: var(--bg-secondary);
+        }
+    </style>
+    <!-- external CDN scripts if needed -->
+</head>
+<body>
+    <div class="chat-panel">
+        <div class="chat-header">SynthOS</div>
+        <div class="chat-messages" id="chatMessages">
+            <!-- chat messages preserved -->
+        </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">
+        <!-- page content preserved -->
+        <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
+    </div>
+    <div id="thoughts" style="display: none;">...</div>
+    <script>
+        // Only page-specific JS here — no shared chat handlers
+    </script>
+</body>
+</html>
+\`\`\`
+
+## Output format
+
+Return ONLY the complete migrated HTML. No markdown fences, no explanation, no commentary. Just the raw HTML starting with \`<!DOCTYPE html>\`.`;
+
+/**
+ * v1 -> v2: LLM-based migration that strips shared code and adds theme support.
+ * Post-processes with cheerio to verify critical elements are present.
+ */
+async function migrateV1toV2(html: string, completePrompt: completePrompt): Promise<string> {
+    const system = { role: 'system' as const, content: V1_TO_V2_SYSTEM_PROMPT };
+    const prompt = { role: 'user' as const, content: `Convert this v1 page to v2 format:\n\n${html}` };
+
+    const result = await completePrompt({ prompt, system, maxTokens: 16000 });
+    if (!result.completed || !result.value) {
+        throw new Error('LLM migration failed: ' + (result.error?.message ?? 'no response'));
+    }
+
+    // Strip markdown fencing if present
+    let migrated = result.value.trim();
+    if (migrated.startsWith('```')) {
+        migrated = migrated.replace(/^```(?:html)?\s*\n?/, '').replace(/\n?```\s*$/, '');
+    }
+
+    // Post-process with cheerio to verify and fix critical elements
+    migrated = postProcessV2(migrated);
+
+    return migrated;
+}
+
+/**
+ * Cheerio-based post-processing to verify the LLM output meets v2 requirements.
+ */
+export function postProcessV2(html: string): string {
+    const $ = cheerio.load(html, { decodeEntities: false });
+
+    // Ensure theme-info.js is in <head>
+    if ($('script[src="/api/theme-info.js"]').length === 0) {
+        const titleEl = $('title');
+        if (titleEl.length > 0) {
+            titleEl.after('\n<script src="/api/theme-info.js"></script>');
+        } else {
+            $('head').prepend('<script src="/api/theme-info.js"></script>\n');
+        }
+    }
+
+    // Ensure theme.css is in <head>
+    if ($('link[href="/api/theme.css"]').length === 0) {
+        const themeScript = $('script[src="/api/theme-info.js"]');
+        if (themeScript.length > 0) {
+            themeScript.after('\n<link rel="stylesheet" href="/api/theme.css">');
+        } else {
+            $('head').append('<link rel="stylesheet" href="/api/theme.css">\n');
+        }
+    }
+
+    // Remove leftover shared CSS selectors from <style> blocks
+    $('style').each(function (_, el) {
+        let css = $(el).html() ?? '';
+        for (const selector of SHARED_CSS_SELECTORS) {
+            // Escape special regex chars in selector
+            const escaped = selector.replace(/[.*+?^${}()|[\]\\#]/g, '\\$&');
+            // Match the full rule block: selector { ... }
+            const pattern = new RegExp(`(?:^|\\n)\\s*${escaped}\\s*\\{[^}]*\\}`, 'g');
+            css = css.replace(pattern, '');
+        }
+        // Remove @keyframes spin
+        css = css.replace(/@keyframes\s+spin\s*\{[^}]*(?:\{[^}]*\}[^}]*)*\}/g, '');
+        // Remove scrollbar pseudo-element rules
+        css = css.replace(/(?:^|\n)\s*(?:\*|body|)::-webkit-scrollbar(?:-(?:track|thumb))?\s*\{[^}]*\}/g, '');
+        $(el).html(css);
+    });
+
+    // Remove empty <style> blocks
+    $('style').each(function (_, el) {
+        const content = ($(el).html() ?? '').trim();
+        if (content === '') {
+            $(el).remove();
+        }
+    });
+
+    // Remove empty <script> blocks (no src)
+    $('script').each(function (_, el) {
+        const src = $(el).attr('src');
+        if (src) return;
+        const code = ($(el).html() ?? '').trim();
+        if (code === '') {
+            $(el).remove();
+        }
+    });
+
+    // Remove duplicate inline scripts that share overlapping declarations
+    return deduplicateInlineScripts($.html());
+}

package/src/models/index.ts

@@ -0,0 +1,2 @@
+export { ProviderName, ProviderConfig, ModelEntry, Provider } from './types';
+export { AnthropicProvider, OpenAIProvider, PROVIDERS, getProvider, detectProvider } from './providers';

package/src/models/providers.ts

@@ -0,0 +1,33 @@
+import { Provider, ProviderName } from './types';
+
+export const AnthropicProvider: Provider = {
+    name: 'Anthropic',
+    builderModels: ['claude-opus-4-6', 'claude-sonnet-4-5'],
+    chatModels: ['claude-haiku-4-5', 'claude-sonnet-4-5'],
+    detectModel(model: string): boolean {
+        return model.startsWith('claude-');
+    }
+};
+
+export const OpenAIProvider: Provider = {
+    name: 'OpenAI',
+    builderModels: ['gpt-5.2', 'gpt-5.2-codex'],
+    chatModels: ['gpt-5-nano', 'gpt-5-mini', 'gpt-4.1'],
+    detectModel(model: string): boolean {
+        return model.startsWith('gpt-') || model.startsWith('GPT-');
+    }
+};
+
+export const PROVIDERS: Provider[] = [AnthropicProvider, OpenAIProvider];
+
+export function getProvider(name: ProviderName): Provider {
+    const provider = PROVIDERS.find(p => p.name === name);
+    if (!provider) {
+        throw new Error(`Unknown provider: ${name}`);
+    }
+    return provider;
+}
+
+export function detectProvider(model: string): Provider | undefined {
+    return PROVIDERS.find(p => p.detectModel(model));
+}

package/src/models/types.ts

@@ -0,0 +1,23 @@
+export type ProviderName = 'Anthropic' | 'OpenAI';
+
+export interface ProviderConfig {
+    apiKey: string;
+    model: string;
+    maxTokens: number;
+}
+
+export interface ModelEntry {
+    use: 'builder' | 'chat';
+    provider: ProviderName;
+    configuration: ProviderConfig;
+    imageQuality: 'standard' | 'hd';
+    instructions?: string;
+    logCompletions?: boolean;
+}
+
+export interface Provider {
+    name: ProviderName;
+    builderModels: string[];
+    chatModels: string[];
+    detectModel(model: string): boolean;
+}