Add per-shape G-code preview boxes with correct download filenames

On the TIFF Slices to GCode tab, each shape now shows its generated
G-code in a fixed-height, scrollable box aligned under its download
box, populated on generation. The in-box download button is stamped
with the real filename (e.g. Hollow_Pyramid_SnakePath_gcode.txt)
instead of gr.Code's hardcoded "file.txt".

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app.py

@@ -129,6 +129,15 @@ APP_CSS = """
     color: var(--body-text-color-subdued);
     margin-top: -0.3rem !important;
 }
+
+/* Keep the per-shape G-code previews at a fixed height with internal scroll
+   (gr.Code's max_lines does not constrain the editor in this Gradio build). */
+.gcode-view .cm-editor {
+    max-height: 320px;
+}
+.gcode-view .cm-scroller {
+    overflow: auto;
+}
 """
 
 # Gradio 6.10's gr.Model3D leaves the Undo (reset view) button permanently
@@ -982,6 +991,23 @@ def run_all_tiff_to_gcode(
     return outputs[0], outputs[1], outputs[2], "\n".join(messages)
 
 
+def load_all_gcode_text(
+    path1: str | None,
+    path2: str | None,
+    path3: str | None,
+) -> tuple[str, str, str]:
+    """Return the raw text of each shape's generated G-code file for display."""
+    def read(path: str | None, shape_num: int) -> str:
+        if not path:
+            return f"# No G-code generated for Shape {shape_num} yet."
+        try:
+            return Path(path).read_text()
+        except OSError as exc:
+            return f"# Failed to read G-code file: {exc}"
+
+    return read(path1, 1), read(path2, 2), read(path3, 3)
+
+
 GCODE_SOURCE_SHAPE1 = "Use Shape 1 G-Code"
 GCODE_SOURCE_SHAPE2 = "Use Shape 2 G-Code"
 GCODE_SOURCE_SHAPE3 = "Use Shape 3 G-Code"
@@ -1572,6 +1598,22 @@ def build_demo() -> gr.Blocks:
                 gcode_file_2 = gr.File(label="Download G-Code Shape 2")
                 gcode_file_3 = gr.File(label="Download G-Code Shape 3")
 
+            # Per-shape G-code preview, aligned under each download box. Fixed
+            # height with internal scrolling so the files don't fill the page.
+            with gr.Row():
+                gcode_view_1 = gr.Code(
+                    label="Shape 1 G-Code", language=None, lines=15, max_lines=15,
+                    interactive=False, elem_classes=["gcode-view"], elem_id="gcode-view-1",
+                )
+                gcode_view_2 = gr.Code(
+                    label="Shape 2 G-Code", language=None, lines=15, max_lines=15,
+                    interactive=False, elem_classes=["gcode-view"], elem_id="gcode-view-2",
+                )
+                gcode_view_3 = gr.Code(
+                    label="Shape 3 G-Code", language=None, lines=15, max_lines=15,
+                    interactive=False, elem_classes=["gcode-view"], elem_id="gcode-view-3",
+                )
+
             gcode_status = gr.Markdown("")
 
             gcode_button.click(
@@ -1593,6 +1635,42 @@ def build_demo() -> gr.Blocks:
                     pixel_size,
                 ],
                 outputs=[gcode_file_1, gcode_file_2, gcode_file_3, gcode_status],
+            ).then(
+                fn=load_all_gcode_text,
+                inputs=[gcode_file_1, gcode_file_2, gcode_file_3],
+                outputs=[gcode_view_1, gcode_view_2, gcode_view_3],
+            ).then(
+                # gr.Code's built-in download button hardcodes "file.txt"; stamp
+                # the real filename (from each File value's orig_name) onto the
+                # download link so it matches the Download G-Code Shape box.
+                fn=None,
+                inputs=[gcode_file_1, gcode_file_2, gcode_file_3],
+                outputs=[],
+                js="""(f1, f2, f3) => {
+                    const files = [f1, f2, f3];
+                    const nameOf = (f) => {
+                        if (!f) return null;
+                        if (f.orig_name) return f.orig_name;
+                        const p = f.path || f.url || "";
+                        return p ? p.split(/[\\\\/]/).pop() : null;
+                    };
+                    const apply = (tries) => {
+                        let pending = false;
+                        files.forEach((f, i) => {
+                            const name = nameOf(f);
+                            if (!name) return;
+                            const a = document.querySelector(`#gcode-view-${i + 1} a[download]`);
+                            if (a) {
+                                if (a.getAttribute("download") !== name) a.setAttribute("download", name);
+                            } else {
+                                pending = true;
+                            }
+                        });
+                        if (pending && tries < 20) setTimeout(() => apply(tries + 1), 150);
+                    };
+                    apply(0);
+                    return [];
+                }""",
             )
 
         with gr.Tab("G-Code Visualization"):