demo improvements

Author: hypexr

README.md

@@ -202,6 +202,49 @@ function handleCommand(inputText) {
 }
 ```
 
+## Integration Tips
+
+### Managing the Command Prompt
+
+When building a terminal UI, you'll need to display a prompt that shows the current user and directory. The prompt typically needs to update after commands like `cd` or `su` that change the current path or user.
+
+**Pattern for updating the prompt:**
+
+```javascript
+function updatePrompt() {
+    const user = shell.getCurrentUser();
+    let path = shell.getCurrentPath();
+    const home = shell.environment.HOME;
+
+    // Replace home directory with ~
+    if (path === home) {
+        path = '~';
+    } else if (path.startsWith(home + '/')) {
+        path = '~' + path.substring(home.length);
+    }
+
+    // Use # for root, $ for regular users
+    const promptChar = user === 'root' ? '#' : '$';
+
+    // Update your prompt element
+    promptElement.textContent = `${user}@hostname:${path}${promptChar}`;
+}
+```
+
+**Typical command execution flow:**
+
+1. User enters a command
+2. Capture the current prompt text (for display in command history)
+3. Execute the command: `const output = shell.execute(command)`
+4. Display the command with its original prompt in history
+5. Display the command output
+6. Update the active prompt to reflect any changes (new path, new user, etc.)
+7. Clear the input field for the next command
+
+**Key point:** When displaying command history, preserve the prompt as it was when the command was entered. Only update the active input prompt after command execution.
+
+See the [live demo source code](https://github.com/hypexr/unix-shell-js/blob/main/docs/index.html) for a complete working example.
+
 ## API Reference
 
 ### UnixShell Constructor

docs/index.html

@@ -4,140 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Unix Shell JS - Live Demo</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Courier New', monospace;
-            background: #000;
-            color: #0f0;
-            padding: 20px;
-            line-height: 1.6;
-        }
-
-        .container {
-            max-width: 1000px;
-            margin: 0 auto;
-        }
-
-        h1 {
-            color: #0f0;
-            margin-bottom: 10px;
-            font-size: 2em;
-        }
-
-        .description {
-            margin-bottom: 20px;
-            color: #0a0;
-        }
-
-        .terminal {
-            background: #111;
-            border: 2px solid #0f0;
-            border-radius: 5px;
-            padding: 20px;
-            min-height: 400px;
-            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
-        }
-
-        .terminal-line {
-            margin: 5px 0;
-            display: flex;
-            align-items: baseline;
-        }
-
-        .prompt {
-            color: #0f0;
-            margin-right: 5px;
-        }
-
-        .terminal-input {
-            color: #0f0;
-            background: transparent;
-            border: none;
-            outline: none;
-            font-family: 'Courier New', monospace;
-            font-size: 14px;
-            flex: 1;
-        }
-
-        .terminal-output {
-            color: #0f0;
-            white-space: pre-wrap;
-            margin: 5px 0;
-        }
-
-        .cursor {
-            display: inline-block;
-            width: 8px;
-            height: 16px;
-            background: #0f0;
-            animation: blink 1s infinite;
-            margin-left: 2px;
-        }
-
-        @keyframes blink {
-            0%, 49% { opacity: 1; }
-            50%, 100% { opacity: 0; }
-        }
-
-        .info {
-            margin-top: 20px;
-            padding: 15px;
-            background: #112;
-            border: 1px solid #0f0;
-            border-radius: 5px;
-        }
-
-        .info h2 {
-            color: #0f0;
-            margin-bottom: 10px;
-            font-size: 1.2em;
-        }
-
-        .info ul {
-            list-style: none;
-            margin-left: 20px;
-        }
-
-        .info li:before {
-            content: "▸ ";
-            color: #0f0;
-        }
-
-        a {
-            color: #0f0;
-            text-decoration: none;
-        }
-
-        a:hover {
-            text-decoration: underline;
-        }
-
-        .links {
-            margin-top: 20px;
-            text-align: center;
-        }
-
-        .links a {
-            margin: 0 10px;
-            padding: 10px 20px;
-            border: 1px solid #0f0;
-            border-radius: 3px;
-            display: inline-block;
-            transition: all 0.3s;
-        }
-
-        .links a:hover {
-            background: #0f0;
-            color: #000;
-            text-decoration: none;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div class="container">
@@ -147,13 +14,10 @@ <h1>Unix Shell JS - Live Demo</h1>
         <div class="terminal" id="terminal">
             <div class="terminal-output">Unix Shell JS v1.0.0
 Type 'help' to see available commands, 'ls' to list files, or 'vim README.md' to edit a file.
-
-👉 Click anywhere in this terminal to start typing commands!
 </div>
             <div class="terminal-line">
                 <span class="prompt">user@demo:~$</span>
                 <input type="text" class="terminal-input" id="input" autocomplete="off" autofocus>
-                <span class="cursor"></span>
             </div>
         </div>
 
@@ -181,6 +45,8 @@ <h2>Try These Commands:</h2>
     <script src="vi-editor.js"></script>
     <script src="example-files.js"></script>
     <script>
+        // Wait for scripts to load
+        window.addEventListener('load', function() {
         // Initialize the shell
         const shell = new UnixShell({
             username: 'user',
@@ -202,7 +68,14 @@ <h2>Try These Commands:</h2>
         }
 
         function updatePrompt() {
-            const prompt = document.querySelector('.prompt');
+            // Get the prompt in the last terminal-line (the active input line)
+            // Specifically avoid history lines
+            const activeLine = terminal.querySelector('.terminal-line:last-child');
+            if (!activeLine || activeLine.classList.contains('terminal-history')) return;
+
+            const prompt = activeLine.querySelector('.prompt');
+            if (!prompt) return;
+
             const user = shell.getCurrentUser();
             let path = shell.getCurrentPath();
             const home = shell.environment.HOME;
@@ -217,6 +90,9 @@ <h2>Try These Commands:</h2>
             prompt.textContent = `${user}@demo:${path}$`;
         }
 
+        // Update prompt on load to reflect any restored state from localStorage
+        updatePrompt();
+
         input.addEventListener('keydown', (e) => {
             // Handle Tab for autocomplete
             if (e.key === 'Tab') {
@@ -252,7 +128,6 @@ <h2>Try These Commands:</h2>
                     // Multiple matches - show them
                     const matchList = completions.matches.join('  ');
                     addOutput(matchList);
-                    window.scrollTo(0, document.body.scrollHeight);
                 }
                 return;
             }
@@ -261,10 +136,13 @@ <h2>Try These Commands:</h2>
                 const command = input.value.trim();
 
                 if (command) {
-                    // Show command
+                    // Capture current prompt text before executing command
+                    const currentPromptText = terminal.querySelector('.terminal-line:last-child .prompt').textContent;
+
+                    // Show command with the prompt as it was when command was entered
                     const commandLine = document.createElement('div');
-                    commandLine.className = 'terminal-line';
-                    commandLine.innerHTML = `<span class="prompt">${document.querySelector('.prompt').textContent}</span> ${command}`;
+                    commandLine.className = 'terminal-line terminal-history';
+                    commandLine.innerHTML = `<span class="prompt">${currentPromptText}</span> ${command}`;
                     terminal.insertBefore(commandLine, terminal.lastElementChild);
 
                     // Execute command
@@ -291,15 +169,16 @@ <h2>Try These Commands:</h2>
 
                 input.value = '';
 
-                // Scroll to bottom
-                window.scrollTo(0, document.body.scrollHeight);
+                // Scroll terminal to bottom to keep input visible
+                terminal.scrollTop = terminal.scrollHeight;
             }
         });
 
         // Focus input when clicking anywhere
         document.addEventListener('click', () => {
             input.focus();
         });
+        }); // End of window.addEventListener('load')
     </script>
 </body>
 </html>

docs/index.js

@@ -276,7 +276,7 @@ class UnixShell {
         const path = targetPath || this.currentPath;
         const node = this.getNode(path);
 
-        if (!node) {
+        if (node === null || node === undefined) {
             return `ls: cannot access '${targetPath || '.'}': No such file or directory`;
         }
 
@@ -369,7 +369,7 @@ class UnixShell {
         const newPath = this.resolvePath(args[0]);
         const node = this.getNode(newPath);
 
-        if (!node) {
+        if (node === null || node === undefined) {
             return `cd: ${args[0]}: No such file or directory`;
         }
 
@@ -393,7 +393,7 @@ class UnixShell {
 
         const node = this.getNode(args[0]);
 
-        if (!node) {
+        if (node === null || node === undefined) {
             return `cat: ${args[0]}: No such file or directory`;
         }