fixes #84

Author: WolfgangFahl

.components.yaml

@@ -118,3 +118,12 @@ components:
     GPXViewer is a component for visualizing GPX (GPS Exchange Format) files using OpenStreetMap and Leaflet.
     It can display GPS tracks, routes and waypoints from URLs, with configurable zoom levels
     and map centering.
+- name: Shell
+  source: /ngwidgets/shell.py
+  issue: 84
+  demo_url: http://ngdemo.bitplan.com/shell
+  demo_image_url: https://github.com/WolfgangFahl/nicegui_widgets/assets/1336221/b39f7652-1cc6-4b59-8c3d-ef327aa5db4a
+  description: >
+    Shell provides structured subprocess execution with live output capturing (teeing) of
+    stdout and stderr. It includes StreamTee, SysTee, and StdTee classes to integrate
+    with NiceGUI ui output elements such as ui.html or ui.code.

ngwidgets/widgets_demo.py

@@ -543,6 +543,44 @@ def show():
 
         await self.setup_content_div(show)
 
+    async def show_shell_demo(self):
+        """
+        Demonstrate Shell execution with tee and capture using safe predefined commands.
+        """
+        # predefined safe shell commands
+        commands = {
+            "Echo greeting": "echo Hello from shell",
+            "List files": "ls -l | head -5",
+            "Trigger error": "ls non_existent_file",
+            "Combined": "echo Hello from shell && ls -l | head -5 && ls non_existent_file",
+        }
+
+        # display a labeled preformatted text block
+        def labeled_pre(label: str, value: str, color: str = "black"):
+            ui.label(f"{label}:").style("font-weight: bold")
+            ui.html(f"<pre>{value}</pre>").style(f"color: {color}")
+
+        # run the selected command and display output
+        def run_cmd(cmd_select):
+            from ngwidgets.shell import Shell
+            shell = Shell()
+            cmd = commands[cmd_select.value]
+            result = shell.run(cmd, tee=True)
+            labeled_pre("CMD", cmd)
+            labeled_pre("STDOUT", result.stdout)
+            if result.stderr.strip():
+                labeled_pre("STDERR", result.stderr, color="red")
+
+        # setup the shell demo UI
+        async def show():
+            cmd_select = ui.select(list(commands.keys()),
+                label="Choose command",
+                value="Combined").classes("w-full")
+            ui.button("Run", on_click=lambda: run_cmd(cmd_select))
+
+        await self.setup_content_div(show)
+
+
     async def show_tristate_demo(self):
         """
         Demonstrate the Tristate project.
@@ -869,6 +907,7 @@ def setup_home():
                 "Tristate Demo": "/tristate",
                 "pdfviewer": "/pdfviewer",
                 "Progressbar": "/progress",
+                "Shell Demo": "/shell"
             }
 
             # Generate the HTML using the dictionary
@@ -938,6 +977,10 @@ async def show_components(solution_id: str, client: Client):
         async def show_progress(client: Client):
             return await self.page(client, NiceGuiWidgetsDemo.show_progress)
 
+        @ui.page("/shell")
+        async def show_shell_demo(client: Client):
+            return await self.page(client, NiceGuiWidgetsDemo.show_shell_demo)
+
         @ui.page("/gpxviewer")
         async def show_gpxviewer(client: Client):
             return await self.page(client, NiceGuiWidgetsDemo.show_gpxviewer)