implement shell command interface and add basic commands (echo, ls, pwd, cd, touch, cat, rm) with syscall integration

src/components/TerminalShell.tsx

@@ -0,0 +1,59 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Terminal } from 'lucide-react';
+import { System } from '../shell/system';
+
+const TerminalShell: React.FC = () => {
+    const [history, setHistory] = useState<string[]>(['Welcome to the terminal! Type "help" for commands.']);
+    const [currentCommand, setCurrentCommand] = useState('');
+    const bottomRef = useRef<HTMLDivElement>(null);
+    const system = System.getInstance();  // Use singleton instead of creating new instance
+
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [history]);
+
+    const handleCommand = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            const command = currentCommand.trim();
+            const [cmdName, ...args] = command.split(' ');
+
+            if (system.knowsCommand(cmdName)) {
+                const output = system.executeCommand(cmdName, args);
+
+                const newLines = output.split('\\n').filter(l => l);
+
+                setHistory(prev => [...prev, `$ ${command}`, ...newLines]);
+            } else {
+                setHistory(prev => [...prev, `$ ${command}`, `Command not found: ${cmdName}`]);
+            }
+            setCurrentCommand('');
+        }
+    };
+
+    return (
+        <div className="h-full flex flex-col">
+            <div className="flex-1 overflow-y-auto mb-4">
+                {history.map((line, index) => (
+                    <div key={index} className="mb-2">
+                        {line}
+                    </div>
+                ))}
+                <div ref={bottomRef} />
+            </div>
+            <div className="flex items-center">
+                <Terminal className="mr-2" size={18} />
+                <span className="mr-2">$</span>
+                <input
+                    type="text"
+                    value={currentCommand}
+                    onChange={(e) => setCurrentCommand(e.target.value)}
+                    onKeyDown={handleCommand}
+                    className="flex-1 bg-transparent border-none outline-none text-[#00FF00]"
+                    autoFocus
+                />
+            </div>
+        </div>
+    );
+};
+
+export default TerminalShell;