klio 1.4.9 → 1.5.1

package/src/gui/public/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/gui/public/tailwind.generated.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.static{position:static}.fixed{position:fixed}.bottom-0{bottom:0}.right-0{right:0}.top-0{top:0}.top-1\/2{top:50%}.m-0{margin:0}.m-4{margin:1rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-auto{margin-top:auto}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.contents{display:contents}.hidden{display:none}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-screen{height:100vh}.min-h-0{min-height:0}.w-2\.5{width:.625rem}.w-3{width:.75rem}.w-5{width:1.25rem}.w-\[85vw\]{width:85vw}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.-translate-x-\[85vw\]{--tw-translate-x:-85vw}.-translate-x-\[85vw\],.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.border-0{border-width:0}.border-l-2{border-left-width:2px}.border-t{border-top-width:1px}.border-\[\#4dabf7\]{--tw-border-opacity:1;border-color:rgb(77 171 247/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.bg-\[\#1e1e1e\]{--tw-bg-opacity:1;background-color:rgb(30 30 30/var(--tw-bg-opacity,1))}.bg-\[\#27ca3f\]{--tw-bg-opacity:1;background-color:rgb(39 202 63/var(--tw-bg-opacity,1))}.bg-\[\#2d2d2d\]{--tw-bg-opacity:1;background-color:rgb(45 45 45/var(--tw-bg-opacity,1))}.bg-\[\#3d3d3d\]{--tw-bg-opacity:1;background-color:rgb(61 61 61/var(--tw-bg-opacity,1))}.bg-\[\#4dabf7\]{--tw-bg-opacity:1;background-color:rgb(77 171 247/var(--tw-bg-opacity,1))}.bg-\[\#e0e0e0\]{--tw-bg-opacity:1;background-color:rgb(224 224 224/var(--tw-bg-opacity,1))}.bg-\[\#ff5f56\]{--tw-bg-opacity:1;background-color:rgb(255 95 86/var(--tw-bg-opacity,1))}.bg-\[\#ffbd2e\]{--tw-bg-opacity:1;background-color:rgb(255 189 46/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-\[\#4dabf7\]{--tw-text-opacity:1;color:rgb(77 171 247/var(--tw-text-opacity,1))}.text-\[\#e0e0e0\]{--tw-text-opacity:1;color:rgb(224 224 224/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.shadow-\[0_4px_20px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-shadow:0 4px 20px rgba(0,0,0,.5);--tw-shadow-colored:0 4px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:bg-\[\#4a4a4a\]:hover{--tw-bg-opacity:1;background-color:rgb(74 74 74/var(--tw-bg-opacity,1))}.hover\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:768px){.md\:fixed{position:fixed}.md\:bottom-0{bottom:0}.md\:left-0{left:0}.md\:top-0{top:0}.md\:ml-\[250px\]{margin-left:250px}.md\:flex{display:flex}.md\:w-\[250px\]{width:250px}.md\:w-\[300px\]{width:300px}.md\:-translate-x-\[300px\]{--tw-translate-x:-300px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:flex-col{flex-direction:column}.md\:overflow-y-auto{overflow-y:auto}.md\:border-r{border-right-width:1px}.md\:border-\[\#3d3d3d\]{--tw-border-opacity:1;border-color:rgb(61 61 61/var(--tw-border-opacity,1))}.md\:bg-\[\#1e1e1e\]{--tw-bg-opacity:1;background-color:rgb(30 30 30/var(--tw-bg-opacity,1))}.md\:p-4{padding:1rem}}

package/src/gui/public/webcontainerService.js

@@ -0,0 +1,435 @@
+// WebContainer Service for browser-based execution
+// This service allows running CLI commands directly in the browser using WebContainers
+
+class WebContainerService {
+  constructor() {
+    this.webcontainerInstance = null;
+    this.initialized = false;
+    this.setupPromise = null;
+    this.initializing = false;
+    this.filesLoaded = false;
+    this.dependenciesInstalled = false;
+  }
+
+  // Initialize WebContainer
+  async initialize() {
+    if (this.initialized) {
+      return true;
+    }
+
+    if (this.initializing) {
+      // Already initializing, wait for it to complete
+      return this.setupPromise;
+    }
+
+    this.initializing = true;
+
+    try {
+      this._notifyStatus('Loading project files...');
+      // Check if WebContainer is available
+      if (typeof WebContainer === 'undefined') {
+        console.warn('WebContainer API not available - WebContainer functionality will be disabled');
+        this.initialized = true;
+        this.initializing = false;
+        return false;
+      }
+      
+      // Check if the page is cross-origin isolated
+      if (!globalThis.crossOriginIsolated) {
+        console.error('WebContainer requires cross-origin isolation. Please ensure the server is configured with proper COOP/COEP headers.');
+        
+        // Check if we're on localhost (which allows COOP/COEP without HTTPS)
+        if (typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
+          console.log('Running on localhost - COOP/COEP headers should work without HTTPS');
+        } else if (typeof window !== 'undefined' && window.location.protocol !== 'https:') {
+          console.warn('For non-localhost domains, HTTPS is required for COOP/COEP headers to work.');
+        }
+        
+        this.initialized = true;
+        this.initializing = false;
+        return false;
+      }
+
+      // Load project files from server
+      if (!this.filesLoaded) {
+        await this._loadProjectFiles();
+      }
+
+      this._notifyStatus('Booting WebContainer...');
+      // Create a new WebContainer instance
+      this.webcontainerInstance = await WebContainer.boot();
+      
+      this._notifyStatus('Mounting project files...');
+      // Mount the project files
+      await this._mountProjectFiles();
+      
+      console.log('WebContainer initialized successfully');
+      this.initialized = true;
+      this.initializing = false;
+      this._notifyStatus('WebContainer ready.');
+      return true;
+      
+    } catch (error) {
+      console.error('Failed to initialize WebContainer:', error);
+      this.initializing = false;
+      
+      // Check for specific SharedArrayBuffer error
+      if (error.message && error.message.includes('SharedArrayBuffer')) {
+        console.error('WebContainer requires SharedArrayBuffer support. Please ensure the page is served with proper cross-origin isolation headers (COOP/COEP).');
+        
+        // Check if we're on localhost (which allows COOP/COEP without HTTPS)
+        if (typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
+          console.log('Running on localhost - COOP/COEP headers should work without HTTPS');
+        } else if (typeof window !== 'undefined' && window.location.protocol !== 'https:') {
+          console.warn('For non-localhost domains, HTTPS is required for COOP/COEP headers to work.');
+        }
+      }
+      
+      // If initialization fails, mark as initialized but not functional
+      this.initialized = true;
+      this.webcontainerInstance = null;
+      
+      throw error;
+    }
+  }
+
+  // Write config to the WebContainer filesystem
+  async writeConfig(config) {
+    const initialized = await this.initialize();
+
+    if (!initialized || !this.webcontainerInstance) {
+      throw new Error('WebContainer is not available in this environment.');
+    }
+
+    const configPath = '/src/.astrocli/config.json';
+    const configDir = '/src/.astrocli';
+
+    await this.webcontainerInstance.fs.mkdir(configDir, { recursive: true });
+    await this.webcontainerInstance.fs.writeFile(configPath, JSON.stringify(config, null, 2));
+  }
+
+  // Read config from the WebContainer filesystem
+  async readConfig() {
+    const initialized = await this.initialize();
+
+    if (!initialized || !this.webcontainerInstance) {
+      throw new Error('WebContainer is not available in this environment.');
+    }
+
+    const configPath = '/src/.astrocli/config.json';
+
+    try {
+      const data = await this.webcontainerInstance.fs.readFile(configPath, 'utf8');
+      return data ? JSON.parse(data) : null;
+    } catch (error) {
+      return null;
+    }
+  }
+
+  // Load project files from server
+  async _loadProjectFiles() {
+    try {
+      const response = await fetch('/api/webcontainer-files');
+      const result = await response.json();
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to load WebContainer files');
+      }
+      
+      this.projectFiles = result.files;
+      this.filesLoaded = true;
+      console.log('WebContainer files loaded successfully');
+      
+    } catch (error) {
+      console.error('Error loading WebContainer files:', error);
+      throw error;
+    }
+  }
+
+  // Mount project files
+  async _mountProjectFiles() {
+    if (!this.projectFiles) {
+      await this._loadProjectFiles();
+    }
+
+    const filesToMount = this._buildFileTree(this.projectFiles);
+
+    await this.webcontainerInstance.mount(filesToMount);
+
+    await this._syncSwephAssets();
+
+    if (!this.dependenciesInstalled) {
+      this._notifyStatus('Installing dependencies...');
+      await this._installDependencies();
+      this.dependenciesInstalled = true;
+    }
+  }
+
+  async _installDependencies() {
+    const installProcess = await this.webcontainerInstance.spawn('npm', [
+      'install',
+      '--no-fund',
+      '--no-audit'
+    ]);
+
+    this._notifyStatus('Installing dependencies (npm install)...');
+    const output = await this._readProcessOutput(installProcess);
+    const exitCode = await installProcess.exit;
+
+    if (exitCode !== 0) {
+      throw new Error(`npm install failed (${exitCode}). ${output}`);
+    }
+  }
+
+  async _syncSwephAssets() {
+    try {
+      const wasmResponse = await fetch('/sweph/astro.wasm');
+      const dataResponse = await fetch('/sweph/astro.data');
+
+      if (!wasmResponse.ok || !dataResponse.ok) {
+        throw new Error('Failed to fetch Sweph assets from server.');
+      }
+
+      const wasmBuffer = await wasmResponse.arrayBuffer();
+      const dataBuffer = await dataResponse.arrayBuffer();
+
+      const targetDir = '/src/gui/public/sweph';
+      await this.webcontainerInstance.fs.mkdir(targetDir, { recursive: true });
+
+      await this.webcontainerInstance.fs.writeFile(
+        `${targetDir}/astro.wasm`,
+        new Uint8Array(wasmBuffer)
+      );
+
+      await this.webcontainerInstance.fs.writeFile(
+        `${targetDir}/astro.data`,
+        new Uint8Array(dataBuffer)
+      );
+    } catch (error) {
+      console.error('Error syncing Sweph assets:', error);
+      throw error;
+    }
+  }
+
+  _notifyStatus(message) {
+    if (typeof window !== 'undefined' && window.dispatchEvent) {
+      window.dispatchEvent(new CustomEvent('webcontainer-status', { detail: message }));
+    }
+  }
+
+  // Build WebContainer file tree from flat file map
+  _buildFileTree(fileMap) {
+    const tree = {};
+
+    for (const [filePath, content] of Object.entries(fileMap)) {
+      const fileContents = this._normalizeFileContents(content);
+      if (fileContents === null) {
+        continue;
+      }
+
+      const normalizedPath = filePath.replace(/\\/g, '/');
+      const parts = normalizedPath.split('/').filter(Boolean);
+      let node = tree;
+
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        const isFile = i === parts.length - 1;
+
+        if (isFile) {
+          node[part] = { file: { contents: fileContents } };
+        } else {
+          if (!node[part]) {
+            node[part] = { directory: {} };
+          }
+          node = node[part].directory;
+        }
+      }
+    }
+
+    return tree;
+  }
+
+  _normalizeFileContents(content) {
+    if (typeof content === 'string') {
+      return content;
+    }
+
+    if (!content || typeof content !== 'object') {
+      return null;
+    }
+
+    if (content.encoding === 'base64' && typeof content.contents === 'string') {
+      const binary = atob(content.contents);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+      }
+      return bytes;
+    }
+
+    return null;
+  }
+
+  // Read process output
+  async _readProcessOutput(process) {
+    let output = '';
+
+    const readStream = async (stream) => {
+      if (!stream || typeof stream.getReader !== 'function') {
+        return;
+      }
+
+      const reader = stream.getReader();
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        if (value == null) {
+          continue;
+        }
+        if (typeof value === 'string') {
+          output += value;
+          continue;
+        }
+        if (value instanceof ArrayBuffer) {
+          output += new TextDecoder().decode(value);
+          continue;
+        }
+        if (ArrayBuffer.isView(value)) {
+          output += new TextDecoder().decode(value);
+          continue;
+        }
+        output += String(value);
+      }
+    };
+
+    if (process.output) {
+      await readStream(process.output);
+      return output;
+    }
+
+    await readStream(process.stdout);
+    await readStream(process.stderr);
+
+    return output;
+  }
+
+  // Execute a command in the WebContainer
+  async executeCommand(command) {
+    try {
+      // Ensure WebContainer is initialized
+      const initialized = await this.initialize();
+      
+      // If WebContainer is not available, return a fallback response
+      if (!initialized || !this.webcontainerInstance) {
+        return {
+          success: false,
+          output: 'WebContainer is not available in this environment. Falling back to server execution.'
+        };
+      }
+      
+      const configJson = (() => {
+        try {
+          return localStorage.getItem('astrocliConfig') || '';
+        } catch (error) {
+          return '';
+        }
+      })();
+
+      // Run the command in the WebContainer
+      const commandProcess = await this.webcontainerInstance.spawn('node', ['webcontainer-entry.js', command], {
+        env: {
+          KLIO_CONFIG_JSON: configJson
+        }
+      });
+      
+      // Capture output
+      const output = await this._readProcessOutput(commandProcess);
+      
+      // Wait for command to complete
+      const exitCode = await commandProcess.exit;
+      
+      if (exitCode !== 0) {
+        throw new Error(`Command failed with exit code ${exitCode}: ${output}`);
+      }
+      
+      return {
+        success: true,
+        output: output
+      };
+      
+    } catch (error) {
+      console.error('Error executing command in WebContainer:', error);
+      
+      // Check for specific SharedArrayBuffer error
+      if (error.message && error.message.includes('SharedArrayBuffer')) {
+        console.error('WebContainer requires SharedArrayBuffer support. Please ensure the page is served with proper cross-origin isolation headers (COOP/COEP).');
+        
+        // Check if we're on localhost (which allows COOP/COEP without HTTPS)
+        if (typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
+          console.log('Running on localhost - COOP/COEP headers should work without HTTPS');
+        } else if (typeof window !== 'undefined' && window.location.protocol !== 'https:') {
+          console.warn('For non-localhost domains, HTTPS is required for COOP/COEP headers to work.');
+        }
+        
+        return {
+          success: false,
+          output: 'WebContainer requires cross-origin isolation. Please check server configuration for COOP/COEP headers.'
+        };
+      }
+      
+      return {
+        success: false,
+        output: error.message || 'Unknown error in WebContainer'
+      };
+    }
+  }
+
+  // Check if WebContainers are supported
+  static isSupported() {
+    try {
+      // Check basic browser capabilities
+      if (typeof WebAssembly !== 'object' || 
+          typeof globalThis !== 'object' ||
+          typeof globalThis.crypto !== 'object') {
+        return false;
+      }
+      
+      // Check if WebContainer API is available
+      if (typeof WebContainer === 'undefined') {
+        return false;
+      }
+      
+      // Check if the page is cross-origin isolated (required for SharedArrayBuffer)
+      if (!globalThis.crossOriginIsolated) {
+        console.warn('WebContainer requires cross-origin isolation. Please ensure the server is configured with proper COOP/COEP headers.');
+        
+        // Check if we're on localhost (which allows COOP/COEP without HTTPS)
+        if (typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
+          console.log('Running on localhost - COOP/COEP headers should work without HTTPS');
+        } else if (typeof window !== 'undefined' && window.location.protocol !== 'https:') {
+          console.warn('For non-localhost domains, HTTPS is required for COOP/COEP headers to work.');
+        }
+        
+        return false;
+      }
+      
+      return true;
+    } catch (error) {
+      console.error('Error checking WebContainer support:', error);
+      return false;
+    }
+  }
+}
+
+// Singleton instance
+const webcontainerService = new WebContainerService();
+
+// Only set global variables if we're in a browser environment
+if (typeof window !== 'undefined') {
+    window.webcontainerService = webcontainerService;
+    window.WebContainerService = WebContainerService; // Expose the class globally
+}
+
+console.log('WebContainer service loaded');
+
+export { webcontainerService, WebContainerService };

package/src/gui/routes/api.js

@@ -1,134 +1,97 @@
 const express = require('express');
 const router = express.Router();
-const commandDatabase = require('../database');
 const { exec } = require('child_process');
 const path = require('path');
 
-// Initialize database
-commandDatabase.initialize().catch(err => {
-  console.error('Failed to initialize database:', err);
-});
 
-// Get all commands
-router.get('/commands', async (req, res) => {
-  try {
-    const commands = await commandDatabase.getAllCommands();
-    res.json(commands);
-  } catch (err) {
-    console.error('Error fetching commands:', err);
-    res.status(500).json({ error: 'Failed to fetch commands' });
-  }
+// Health check endpoint
+router.get('/health', (req, res) => {
+  res.json({ status: 'healthy', timestamp: new Date().toISOString() });
 });
 
-// Search commands
-router.get('/commands/search', async (req, res) => {
-  const query = req.query.q || '';
-  
+// Get WebContainer files endpoint
+router.get('/webcontainer-files', async (req, res) => {
   try {
-    const results = await commandDatabase.searchCommands(query);
-    res.json(results);
-  } catch (err) {
-    console.error('Error searching commands:', err);
-    res.status(500).json({ error: 'Failed to search commands' });
+    const webcontainerSetup = require('../webcontainerSetup');
+    const files = await webcontainerSetup.getProjectFiles();
+    
+    res.json({
+      success: true,
+      files: files
+    });
+  } catch (error) {
+    console.error('Error getting WebContainer files:', error);
+    res.status(500).json({
+      success: false,
+      error: error.message
+    });
   }
 });
 
-// Get specific command by ID
-router.get('/commands/:id', async (req, res) => {
+// User session information endpoint
+router.get('/user-session', (req, res) => {
   try {
-    const command = await commandDatabase.getCommandById(req.params.id);
-    if (command) {
-      res.json(command);
-    } else {
-      res.status(404).json({ error: 'Command not found' });
-    }
+    const userId = req.session.userId;
+    res.json({
+      userId: userId,
+      sessionId: req.sessionID,
+      isNewSession: !req.session.cookie.originalMaxAge
+    });
   } catch (err) {
-    console.error('Error fetching command:', err);
-    res.status(500).json({ error: 'Failed to fetch command' });
+    console.error('Error getting user session:', err);
+    res.status(500).json({ error: 'Failed to get user session' });
   }
 });
 
-// Get commands by category
-router.get('/commands/category/:category', async (req, res) => {
-  try {
-    const commands = await commandDatabase.getCommandsByCategory(req.params.category);
-    res.json(commands);
-  } catch (err) {
-    console.error('Error fetching commands by category:', err);
-    res.status(500).json({ error: 'Failed to fetch commands by category' });
-  }
-});
 
-// Save a new command
-router.post('/commands', async (req, res) => {
+// Get user-specific commands endpoint
+router.get('/user-commands', async (req, res) => {
   try {
-    const { command, args, result, tags, category } = req.body;
+    const userId = req.session.userId;
+    const commands = await commandDatabase.getAllCommands();
     
-    if (!command) {
-      return res.status(400).json({ error: 'Command is required' });
-    }
+    // Filter commands by user
+    const userCommands = commands.filter(cmd => 
+      cmd.tags && cmd.tags.includes(`user:${userId}`)
+    );
     
-    const commandId = await commandDatabase.saveCommand(command, args, result, tags, category);
-    res.status(201).json({ id: commandId, message: 'Command saved successfully' });
+    res.json(userCommands);
   } catch (err) {
-    console.error('Error saving command:', err);
-    res.status(500).json({ error: 'Failed to save command' });
+    console.error('Error fetching user commands:', err);
+    res.status(500).json({ error: 'Failed to fetch user commands' });
   }
 });
 
-// Health check endpoint
-router.get('/health', (req, res) => {
-  res.json({ status: 'healthy', timestamp: new Date().toISOString() });
+// User logout endpoint
+router.post('/logout', (req, res) => {
+  try {
+    req.session.destroy((err) => {
+      if (err) {
+        console.error('Error destroying session:', err);
+        return res.status(500).json({ error: 'Failed to logout' });
+      }
+      res.clearCookie('connect.sid'); // Clear the session cookie
+      res.json({ success: true, message: 'Logged out successfully' });
+    });
+  } catch (err) {
+    console.error('Error in logout endpoint:', err);
+    res.status(500).json({ error: 'Failed to logout' });
+  }
 });
 
-// Run command endpoint
-router.post('/run-command', async (req, res) => {
+// Get all user sessions (for admin/debug purposes)
+router.get('/sessions', async (req, res) => {
   try {
-    const { command } = req.body;
-    
-    if (!command) {
-      return res.status(400).json({ error: 'Command is required' });
-    }
-    
-    // Execute the command using child_process
-    const commandToRun = command.startsWith('klio ') ? command : `klio ${command}`;
-    const mainJsPath = path.join(__dirname, '..', '..', '..', 'src', 'main.js');
-    
-    exec(`node ${mainJsPath} ${command}`, { 
-      cwd: path.join(__dirname, '..', '..', '..'),
-      maxBuffer: 1024 * 1024 * 10 // 10MB buffer
-    }, (error, stdout, stderr) => {
-      if (error) {
-        console.error('Command execution error:', error);
-        console.error('Stderr:', stderr);
-        return res.status(500).json({
-          error: 'Command execution failed',
-          details: stderr || error.message,
-          command: commandToRun
-        });
-      }
-      
-      // Save command to history
-      commandDatabase.saveCommand(
-        command,
-        '',
-        stdout,
-        '',
-        'executed'
-      ).catch(err => {
-        console.error('Failed to save command to history:', err);
-      });
-      
-      res.json({
-        output: stdout,
-        command: command
-      });
+    // This would require accessing the session store directly
+    // For now, just return the current session info
+    res.json({
+      currentUser: req.session.userId,
+      message: 'Session management implemented'
     });
-    
   } catch (err) {
-    console.error('Error in run-command endpoint:', err);
-    res.status(500).json({ error: 'Failed to execute command' });
+    console.error('Error getting sessions:', err);
+    res.status(500).json({ error: 'Failed to get sessions' });
   }
 });
 
-module.exports = router;
+module.exports = router;