From 9e3e8d62ff269853b799d7e6f8ea205bbfc89b02 Mon Sep 17 00:00:00 2001
From: William Kelso <wpkelso+github@posteo.net>
Date: Tue, 13 May 2025 14:49:27 -0400
Subject: [PATCH 01/16] add terminal cssclass

---
 demo/Views/CSSView.vala          |  5 +++--
 lib/Constants.vala               | 10 ++++++++++
 lib/Styles/Granite/_classes.scss | 18 ++++++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/demo/Views/CSSView.vala b/demo/Views/CSSView.vala
index 6e70df169..8b5321417 100644
--- a/demo/Views/CSSView.vala
+++ b/demo/Views/CSSView.vala
@@ -84,7 +84,8 @@ public class CSSView : DemoPage {
         card_box.append (card);
         card_box.append (card_checkered);
 
-        var terminal_label = new Granite.HeaderLabel ("\"terminal\" style class");
+        var terminal_label = new Granite.HeaderLabel
+        ("\"Granite.CssClass.TERMINAL\"");
 
         var terminal = new Gtk.Label ("[ 73%] Linking C executable granite-demo\n[100%] Built target granite-demo") {
             selectable = true,
@@ -97,7 +98,7 @@ public class CSSView : DemoPage {
             min_content_height = 70,
             child = terminal
         };
-        terminal_scroll.add_css_class (Granite.STYLE_CLASS_TERMINAL);
+        terminal_scroll.add_css_class (Granite.CssClass.TERMINAL);
 
         var accent_color_label = new Granite.HeaderLabel ("Colored labels and icons");
 
diff --git a/lib/Constants.vala b/lib/Constants.vala
index f7438e168..18f1e5760 100644
--- a/lib/Constants.vala
+++ b/lib/Constants.vala
@@ -131,6 +131,7 @@ namespace Granite {
      * When used with {@link Gtk.Label} this style includes internal padding. When used with {@link Gtk.TextView}
      * interal padding will need to be set with {@link Gtk.Container.border_width}
      */
+    [Version (deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.CssClass.TERMINAL")]
     public const string STYLE_CLASS_TERMINAL = "terminal";
     /**
      * Style class for title label text in a {@link Granite.MessageDialog}
@@ -290,6 +291,15 @@ namespace Granite {
          * Style class for non-terminal text that uses a monospace font.
          */
         public const string MONOSPACE = "monospace";
+
+        /**
+         * Style class for {@link Gtk.Label} or {@link Gtk.TextView} to emulate the appearance of Terminal. This includes
+         * text color, background color, selection highlighting, and selecting the system monospace font.
+         *
+         * When used with {@link Gtk.Label} this style includes internal padding. When used with {@link Gtk.TextView}
+         * interal padding will need to be set with {@link Gtk.Container.border_width}
+         */
+        public const string TERMINAL = "terminal";
     }
 
     /**
diff --git a/lib/Styles/Granite/_classes.scss b/lib/Styles/Granite/_classes.scss
index eaf129810..05436f6ff 100644
--- a/lib/Styles/Granite/_classes.scss
+++ b/lib/Styles/Granite/_classes.scss
@@ -48,3 +48,21 @@ paper {
     font-family: monospace;
 }
 
+.terminal {
+    font-family: monospace;
+
+    background-color: $fg-color;
+    color: bg-color(0);
+
+    padding: rem(12px) rem(18px);
+
+    & selection {
+        background-color: bg-color(0);
+        color: $fg-color;
+
+        &:backdrop {
+            // Cancelling values set in non-terminal selection
+            background-color: inherit;
+        }
+    }
+}

From 764640eb0ecb06acf26b3a63843e6a34198e00ec Mon Sep 17 00:00:00 2001
From: William Kelso <wpkelso+github@posteo.net>
Date: Wed, 14 May 2025 12:48:07 -0400
Subject: [PATCH 02/16] add widget shell

---
 lib/Widgets/TerminalView.vala | 32 ++++++++++++++++++++++++++++++++
 lib/meson.build               |  1 +
 2 files changed, 33 insertions(+)
 create mode 100644 lib/Widgets/TerminalView.vala

diff --git a/lib/Widgets/TerminalView.vala b/lib/Widgets/TerminalView.vala
new file mode 100644
index 000000000..f0b370802
--- /dev/null
+++ b/lib/Widgets/TerminalView.vala
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2025 elementary, Inc. (https://elementary.io)
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+[Version (since = "7.7.0")]
+public class Granite.TerminalView : Gtk.ScrolledWindow {
+
+    public TerminalView () {
+        this.add_css_class (Granite.CssClass.TERMINAL);
+    }
+    
+    public TerminalView.with_textview (
+        Gtk.TextView view = new Gtk.TextView () {
+            cursor_visible = true,
+            margin_end = 6,
+            editable = false,
+            margin_start = 6,
+            monospace = true,
+            pixels_below_lines = 3,
+            wrap_mode = Gtk.WrapMode.WORD
+        }
+    ) {
+        this.child = view;
+    }
+    
+    // We may not need this, as we could use an un-editable TextView and
+    // simplify the API
+    public TerminalView.with_label (Gtk.Label label) {
+        this.child = label;
+    }
+}
diff --git a/lib/meson.build b/lib/meson.build
index 545b7870b..b7aa4c4c1 100644
--- a/lib/meson.build
+++ b/lib/meson.build
@@ -32,6 +32,7 @@ libgranite_sources = files(
     'Widgets/SettingsSidebar.vala',
     'Widgets/Settings.vala',
     'Widgets/SwitchModelButton.vala',
+    'Widgets/TerminalView.vala',
     'Widgets/TimePicker.vala',
     'Widgets/ToolBox.vala',
     'Widgets/Toast.vala',

From 1306caae90c9f0e781b64af3cfe80add0521835d Mon Sep 17 00:00:00 2001
From: wpkelso <wpkelso+github@posteo.net>
Date: Thu, 15 May 2025 00:18:25 -0400
Subject: [PATCH 03/16] add autoscroll from installer

---
 demo/Views/CSSView.vala          | 16 ++------
 lib/Styles/Granite/_classes.scss |  8 ++--
 lib/Widgets/TerminalView.vala    | 65 +++++++++++++++++++++++---------
 3 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/demo/Views/CSSView.vala b/demo/Views/CSSView.vala
index 8b5321417..a3da86add 100644
--- a/demo/Views/CSSView.vala
+++ b/demo/Views/CSSView.vala
@@ -87,18 +87,8 @@ public class CSSView : DemoPage {
         var terminal_label = new Granite.HeaderLabel
         ("\"Granite.CssClass.TERMINAL\"");
 
-        var terminal = new Gtk.Label ("[ 73%] Linking C executable granite-demo\n[100%] Built target granite-demo") {
-            selectable = true,
-            wrap = true,
-            xalign = 0,
-            yalign = 0
-        };
-
-        var terminal_scroll = new Gtk.ScrolledWindow () {
-            min_content_height = 70,
-            child = terminal
-        };
-        terminal_scroll.add_css_class (Granite.CssClass.TERMINAL);
+        var terminal = new Granite.TerminalView ();
+        terminal.append_to_buffer ("[ 73%] Linking C executable granite-demo\n[100%] Built target granite-demo");
 
         var accent_color_label = new Granite.HeaderLabel ("Colored labels and icons");
 
@@ -141,7 +131,7 @@ public class CSSView : DemoPage {
         box.append (card_header);
         box.append (card_box);
         box.append (terminal_label);
-        box.append (terminal_scroll);
+        box.append (terminal);
         box.append (accent_color_label);
         box.append (accent_color_box);
         box.append (success_color_box);
diff --git a/lib/Styles/Granite/_classes.scss b/lib/Styles/Granite/_classes.scss
index 05436f6ff..6ff4d07fa 100644
--- a/lib/Styles/Granite/_classes.scss
+++ b/lib/Styles/Granite/_classes.scss
@@ -51,14 +51,14 @@ paper {
 .terminal {
     font-family: monospace;
 
-    background-color: $fg-color;
-    color: bg-color(0);
+    background-color: $SLATE_900;
+    color: $SILVER_200;
 
     padding: rem(12px) rem(18px);
 
     & selection {
-        background-color: bg-color(0);
-        color: $fg-color;
+        background-color: $SILVER_200;
+        color: $SLATE_900;
 
         &:backdrop {
             // Cancelling values set in non-terminal selection
diff --git a/lib/Widgets/TerminalView.vala b/lib/Widgets/TerminalView.vala
index f0b370802..0e1ce1e1e 100644
--- a/lib/Widgets/TerminalView.vala
+++ b/lib/Widgets/TerminalView.vala
@@ -1,32 +1,63 @@
-/*
+/**
  * Copyright 2025 elementary, Inc. (https://elementary.io)
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
 [Version (since = "7.7.0")]
-public class Granite.TerminalView : Gtk.ScrolledWindow {
+public class Granite.TerminalView : Granite.Bin {
+
+    private Gtk.TextBuffer buffer;
+    private double prev_upper_adj = 0;
+    private Gtk.ScrolledWindow scrolled_window;
 
     public TerminalView () {
-        this.add_css_class (Granite.CssClass.TERMINAL);
-    }
-    
-    public TerminalView.with_textview (
         Gtk.TextView view = new Gtk.TextView () {
-            cursor_visible = true,
-            margin_end = 6,
+            cursor_visible = false,
             editable = false,
-            margin_start = 6,
             monospace = true,
             pixels_below_lines = 3,
             wrap_mode = Gtk.WrapMode.WORD
-        }
-    ) {
-        this.child = view;
+        };
+
+        buffer = view.get_buffer ();
+
+        scrolled_window = new Gtk.ScrolledWindow () {
+            child = view,
+            hexpand = true,
+            vexpand = true,
+            hscrollbar_policy = NEVER,
+        };
+
+        this.child = scrolled_window;
+
+        // FIXME: this disjoints the window closing and the execution finishing
+        Idle.add (() => {
+            attempt_scroll ();
+            return GLib.Source.CONTINUE;
+        });
     }
-    
-    // We may not need this, as we could use an un-editable TextView and
-    // simplify the API
-    public TerminalView.with_label (Gtk.Label label) {
-        this.child = label;
+
+    construct {
+        this.add_css_class (Granite.CssClass.TERMINAL);
+    }
+
+    // TODO: does this need to exist?
+    public void append_to_buffer (string text) {
+        buffer.insert_at_cursor (text, -1);
+    }
+
+    public void attempt_scroll () {
+        var adj = scrolled_window.vadjustment;
+        var units_from_end = prev_upper_adj - adj.page_size - adj.value;
+
+        if (adj.upper - prev_upper_adj <= 0) {
+            return;
+        }
+
+        if (prev_upper_adj <= adj.page_size || units_from_end <= 50) {
+            adj.value = adj.upper;
+        }
+
+        prev_upper_adj = adj.upper;
     }
 }

From 7102eefc7b0d93226751bfc0f0122ed0f16e197e Mon Sep 17 00:00:00 2001
From: William Kelso <wpkelso+github@posteo.net>
Date: Thu, 15 May 2025 14:53:17 -0400
Subject: [PATCH 04/16] clean up display

---
 demo/Views/CSSView.vala          | 5 ++++-
 lib/Styles/Granite/_classes.scss | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/demo/Views/CSSView.vala b/demo/Views/CSSView.vala
index a3da86add..e71d63258 100644
--- a/demo/Views/CSSView.vala
+++ b/demo/Views/CSSView.vala
@@ -88,7 +88,10 @@ public class CSSView : DemoPage {
         ("\"Granite.CssClass.TERMINAL\"");
 
         var terminal = new Granite.TerminalView ();
-        terminal.append_to_buffer ("[ 73%] Linking C executable granite-demo\n[100%] Built target granite-demo");
+        terminal.append_to_buffer ("[ 25%] Performing optimization passes\n");
+        terminal.append_to_buffer ("[ 65%] Inserting nonsense functions to pad binary size\n");
+        terminal.append_to_buffer ("[ 73%] Linking C executable granite-demo\n");
+        terminal.append_to_buffer ("[100%] Built target granite-demo\n");
 
         var accent_color_label = new Granite.HeaderLabel ("Colored labels and icons");
 
diff --git a/lib/Styles/Granite/_classes.scss b/lib/Styles/Granite/_classes.scss
index 6ff4d07fa..68eba2450 100644
--- a/lib/Styles/Granite/_classes.scss
+++ b/lib/Styles/Granite/_classes.scss
@@ -54,7 +54,9 @@ paper {
     background-color: $SLATE_900;
     color: $SILVER_200;
 
-    padding: rem(12px) rem(18px);
+    padding: 0 rem(18px);
+    // this is roughly 4 lines
+    min-height: 12ex; 
 
     & selection {
         background-color: $SILVER_200;

From 1a92a46ae9d0eedd4adbcb24f9bbbfc689d7dd34 Mon Sep 17 00:00:00 2001
From: William Kelso <wpkelso+github@posteo.net>
Date: Thu, 15 May 2025 15:48:05 -0400
Subject: [PATCH 05/16] add autoscroll enable/disable

---
 demo/Views/CSSView.vala          |  2 +-
 lib/Styles/Granite/_classes.scss |  5 ++---
 lib/Widgets/MessageDialog.vala   | 12 +++++++-----
 lib/Widgets/TerminalView.vala    | 27 ++++++++++++++++++++++++---
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/demo/Views/CSSView.vala b/demo/Views/CSSView.vala
index e71d63258..9f9f8f49d 100644
--- a/demo/Views/CSSView.vala
+++ b/demo/Views/CSSView.vala
@@ -87,7 +87,7 @@ public class CSSView : DemoPage {
         var terminal_label = new Granite.HeaderLabel
         ("\"Granite.CssClass.TERMINAL\"");
 
-        var terminal = new Granite.TerminalView ();
+        var terminal = new Granite.TerminalView () { autoscroll = true };
         terminal.append_to_buffer ("[ 25%] Performing optimization passes\n");
         terminal.append_to_buffer ("[ 65%] Inserting nonsense functions to pad binary size\n");
         terminal.append_to_buffer ("[ 73%] Linking C executable granite-demo\n");
diff --git a/lib/Styles/Granite/_classes.scss b/lib/Styles/Granite/_classes.scss
index 68eba2450..4dc0590bd 100644
--- a/lib/Styles/Granite/_classes.scss
+++ b/lib/Styles/Granite/_classes.scss
@@ -54,9 +54,8 @@ paper {
     background-color: $SLATE_900;
     color: $SILVER_200;
 
-    padding: 0 rem(18px);
-    // this is roughly 4 lines
-    min-height: 12ex; 
+    // this is roughly 3 lines
+    min-height: 9ex; 
 
     & selection {
         background-color: $SILVER_200;
diff --git a/lib/Widgets/MessageDialog.vala b/lib/Widgets/MessageDialog.vala
index f0fdbaa08..684ae696c 100644
--- a/lib/Widgets/MessageDialog.vala
+++ b/lib/Widgets/MessageDialog.vala
@@ -169,7 +169,8 @@ public class Granite.MessageDialog : Granite.Dialog {
      */
     private Gtk.Grid message_grid;
 
-    private Gtk.Label? details_view;
+    //private Gtk.Label? details_view;
+    private Granite.TerminalView? details_view;
 
     /**
      * The {@link Gtk.Expander} used to hold the error details view.
@@ -308,7 +309,7 @@ public class Granite.MessageDialog : Granite.Dialog {
         if (details_view == null) {
             secondary_label.margin_bottom = 18;
 
-            details_view = new Gtk.Label ("") {
+/*            details_view = new Gtk.Label ("") {
                 selectable = true,
                 wrap = true,
                 xalign = 0,
@@ -321,9 +322,10 @@ public class Granite.MessageDialog : Granite.Dialog {
                 child = details_view
             };
             scroll_box.add_css_class (Granite.STYLE_CLASS_TERMINAL);
-
+*/
+            details_view = new Granite.TerminalView ();
             expander = new Gtk.Expander (_("Details")) {
-                child = scroll_box
+                child = details_view 
             };
 
             message_grid.attach (expander, 1, 2, 1, 1);
@@ -333,6 +335,6 @@ public class Granite.MessageDialog : Granite.Dialog {
             }
         }
 
-        details_view.label = error_message;
+        details_view.append_to_buffer (error_message);
     }
 }
diff --git a/lib/Widgets/TerminalView.vala b/lib/Widgets/TerminalView.vala
index 0e1ce1e1e..bc6d08725 100644
--- a/lib/Widgets/TerminalView.vala
+++ b/lib/Widgets/TerminalView.vala
@@ -6,6 +6,8 @@
 [Version (since = "7.7.0")]
 public class Granite.TerminalView : Granite.Bin {
 
+    public bool autoscroll { get; construct set; default=false; }
+
     private Gtk.TextBuffer buffer;
     private double prev_upper_adj = 0;
     private Gtk.ScrolledWindow scrolled_window;
@@ -16,6 +18,10 @@ public class Granite.TerminalView : Granite.Bin {
             editable = false,
             monospace = true,
             pixels_below_lines = 3,
+            left_margin = 9,
+            right_margin = 9,
+            top_margin = 6,
+            bottom_margin = 6,
             wrap_mode = Gtk.WrapMode.WORD
         };
 
@@ -30,15 +36,30 @@ public class Granite.TerminalView : Granite.Bin {
 
         this.child = scrolled_window;
 
-        // FIXME: this disjoints the window closing and the execution finishing
+        notify["autoscroll"].connect ((s, p) => {
+            if (autoscroll) {
+                enable_autoscroll ();           
+            } else {
+                disable_autoscroll ();
+            }
+
+        });
+    }
+
+    construct {
+        this.add_css_class (Granite.CssClass.TERMINAL);
+    }
+
+    private void enable_autoscroll () {
+        // FIXME: this disjoints the window closing and the application finishing
         Idle.add (() => {
             attempt_scroll ();
             return GLib.Source.CONTINUE;
         });
     }
 
-    construct {
-        this.add_css_class (Granite.CssClass.TERMINAL);
+    private void disable_autoscroll () {
+        //TODO: implement
     }
 
     // TODO: does this need to exist?

From 727cb1516a1d69e15d2dbe3dd15962d99a4842f7 Mon Sep 17 00:00:00 2001
From: William Kelso <wpkelso+github@posteo.net>
Date: Thu, 15 May 2025 15:50:48 -0400
Subject: [PATCH 06/16] remove erroneous whitespace

---
 lib/Widgets/MessageDialog.vala | 2 +-
 lib/Widgets/TerminalView.vala  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/Widgets/MessageDialog.vala b/lib/Widgets/MessageDialog.vala
index 684ae696c..08a1abe4a 100644
--- a/lib/Widgets/MessageDialog.vala
+++ b/lib/Widgets/MessageDialog.vala
@@ -325,7 +325,7 @@ public class Granite.MessageDialog : Granite.Dialog {
 */
             details_view = new Granite.TerminalView ();
             expander = new Gtk.Expander (_("Details")) {
-                child = details_view 
+                child = details_view
             };
 
             message_grid.attach (expander, 1, 2, 1, 1);
diff --git a/lib/Widgets/TerminalView.vala b/lib/Widgets/TerminalView.vala
index bc6d08725..95941d6d7 100644
--- a/lib/Widgets/TerminalView.vala
+++ b/lib/Widgets/TerminalView.vala
@@ -38,7 +38,7 @@ public class Granite.TerminalView : Granite.Bin {
 
         notify["autoscroll"].connect ((s, p) => {
             if (autoscroll) {
-                enable_autoscroll ();           
+                enable_autoscroll ();
             } else {
                 disable_autoscroll ();
             }

From 1f93fdebea54b5f54e47382b5ef457693a88b912 Mon Sep 17 00:00:00 2001
From: wpkelso <wpkelso+github@posteo.net>
Date: Fri, 16 May 2025 12:30:18 -0400
Subject: [PATCH 07/16] Move terminal output view to separate page, clean up
 api a litte

---
 demo/GraniteDemo.vala              |  2 ++
 demo/Views/CSSView.vala            | 11 -----------
 demo/Views/TerminalOutputView.vala | 27 +++++++++++++++++++++++++++
 demo/meson.build                   |  1 +
 lib/Widgets/MessageDialog.vala     |  2 +-
 lib/Widgets/TerminalView.vala      | 13 +++++++------
 6 files changed, 38 insertions(+), 18 deletions(-)
 create mode 100644 demo/Views/TerminalOutputView.vala

diff --git a/demo/GraniteDemo.vala b/demo/GraniteDemo.vala
index 9b1204abd..60212f195 100644
--- a/demo/GraniteDemo.vala
+++ b/demo/GraniteDemo.vala
@@ -27,6 +27,7 @@ public class Granite.Demo : Gtk.Application {
         var controls_view = new ControlsView ();
         var maps_view = new MapsView ();
         var overlaybar_view = new OverlayBarView ();
+        var terminal_output_view = new TerminalOutputView ();
         var toast_view = new ToastView ();
         var settings_uris_view = new SettingsUrisView ();
         var style_manager_view = new StyleManagerView ();
@@ -53,6 +54,7 @@ public class Granite.Demo : Gtk.Application {
         main_stack.add_titled (video_view, "video", video_view.title);
         main_stack.add_titled (overlaybar_view, "overlaybar", "OverlayBar");
         main_stack.add_titled (settings_uris_view, "settings_uris", "Settings URIs");
+        main_stack.add_titled (terminal_output_view, "terminal_output_view", "Terminal View");
         main_stack.add_titled (toast_view, "toasts", "Toast");
         main_stack.add_titled (utils_view, "utils", "Utils");
         main_stack.add_titled (dialogs_view, "dialogs", "Dialogs");
diff --git a/demo/Views/CSSView.vala b/demo/Views/CSSView.vala
index 9f9f8f49d..6ee453a60 100644
--- a/demo/Views/CSSView.vala
+++ b/demo/Views/CSSView.vala
@@ -84,15 +84,6 @@ public class CSSView : DemoPage {
         card_box.append (card);
         card_box.append (card_checkered);
 
-        var terminal_label = new Granite.HeaderLabel
-        ("\"Granite.CssClass.TERMINAL\"");
-
-        var terminal = new Granite.TerminalView () { autoscroll = true };
-        terminal.append_to_buffer ("[ 25%] Performing optimization passes\n");
-        terminal.append_to_buffer ("[ 65%] Inserting nonsense functions to pad binary size\n");
-        terminal.append_to_buffer ("[ 73%] Linking C executable granite-demo\n");
-        terminal.append_to_buffer ("[100%] Built target granite-demo\n");
-
         var accent_color_label = new Granite.HeaderLabel ("Colored labels and icons");
 
         var accent_color_box = new Gtk.Box (HORIZONTAL, 6);
@@ -133,8 +124,6 @@ public class CSSView : DemoPage {
         };
         box.append (card_header);
         box.append (card_box);
-        box.append (terminal_label);
-        box.append (terminal);
         box.append (accent_color_label);
         box.append (accent_color_box);
         box.append (success_color_box);
diff --git a/demo/Views/TerminalOutputView.vala b/demo/Views/TerminalOutputView.vala
new file mode 100644
index 000000000..430131068
--- /dev/null
+++ b/demo/Views/TerminalOutputView.vala
@@ -0,0 +1,27 @@
+/*
+ * Copyright 20205 elementary, Inc. (https://elementary.io)
+ * SPDX-License-Identifier: LGPL-3.0-or-later
+ */
+
+public class TerminalOutputView: DemoPage {
+    construct {
+        title = "Terminal Output";
+        var terminal = new Granite.TerminalView () { 
+            autoscroll = true,
+            vexpand = true,
+            margin_top = 12,
+            margin_bottom = 12,
+            margin_start = 12,
+            margin_end = 12
+        };
+        terminal.append_text ("[ 25%] Performing optimization passes\n");
+        terminal.append_text ("[ 65%] Inserting nonsense functions to pad binary size\n");
+        terminal.append_text ("[ 73%] Linking C executable granite-demo\n");
+        terminal.append_text ("[100%] Built target granite-demo\n");
+
+        terminal.add_css_class (Granite.CssClass.CARD);
+
+        child = terminal;
+    }
+
+}
diff --git a/demo/meson.build b/demo/meson.build
index ef8a75d02..c52e24ae6 100644
--- a/demo/meson.build
+++ b/demo/meson.build
@@ -18,6 +18,7 @@ executable(
     'Views/OverlayBarView.vala',
     'Views/SettingsUrisView.vala',
     'Views/StyleManagerView.vala',
+    'Views/TerminalOutputView.vala',
     'Views/ToastView.vala',
     'Views/UtilsView.vala',
     'Views/VideoView.vala',
diff --git a/lib/Widgets/MessageDialog.vala b/lib/Widgets/MessageDialog.vala
index 08a1abe4a..c4e0c3380 100644
--- a/lib/Widgets/MessageDialog.vala
+++ b/lib/Widgets/MessageDialog.vala
@@ -335,6 +335,6 @@ public class Granite.MessageDialog : Granite.Dialog {
             }
         }
 
-        details_view.append_to_buffer (error_message);
+        details_view.append_text (error_message);
     }
 }
diff --git a/lib/Widgets/TerminalView.vala b/lib/Widgets/TerminalView.vala
index 95941d6d7..7fa6ec49a 100644
--- a/lib/Widgets/TerminalView.vala
+++ b/lib/Widgets/TerminalView.vala
@@ -35,6 +35,7 @@ public class Granite.TerminalView : Granite.Bin {
         };
 
         this.child = scrolled_window;
+        this.add_css_class (Granite.CssClass.TERMINAL);
 
         notify["autoscroll"].connect ((s, p) => {
             if (autoscroll) {
@@ -46,10 +47,6 @@ public class Granite.TerminalView : Granite.Bin {
         });
     }
 
-    construct {
-        this.add_css_class (Granite.CssClass.TERMINAL);
-    }
-
     private void enable_autoscroll () {
         // FIXME: this disjoints the window closing and the application finishing
         Idle.add (() => {
@@ -62,11 +59,14 @@ public class Granite.TerminalView : Granite.Bin {
         //TODO: implement
     }
 
-    // TODO: does this need to exist?
-    public void append_to_buffer (string text) {
+    public void append_text (string text) {
         buffer.insert_at_cursor (text, -1);
     }
 
+    public void replace_text (string text) {
+        buffer.set_text (text);
+    }
+
     public void attempt_scroll () {
         var adj = scrolled_window.vadjustment;
         var units_from_end = prev_upper_adj - adj.page_size - adj.value;
@@ -82,3 +82,4 @@ public class Granite.TerminalView : Granite.Bin {
         prev_upper_adj = adj.upper;
     }
 }
+

From 9e24e49d1b4f3699fb1692b3afea019e833f8bce Mon Sep 17 00:00:00 2001
From: wpkelso <wpkelso+github@posteo.net>
Date: Fri, 16 May 2025 12:41:35 -0400
Subject: [PATCH 08/16] clean up whitespace, add comments

---
 demo/Views/TerminalOutputView.vala | 2 +-
 lib/Widgets/TerminalView.vala      | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/demo/Views/TerminalOutputView.vala b/demo/Views/TerminalOutputView.vala
index 430131068..863d3c0eb 100644
--- a/demo/Views/TerminalOutputView.vala
+++ b/demo/Views/TerminalOutputView.vala
@@ -6,7 +6,7 @@
 public class TerminalOutputView: DemoPage {
     construct {
         title = "Terminal Output";
-        var terminal = new Granite.TerminalView () { 
+        var terminal = new Granite.TerminalView () {
             autoscroll = true,
             vexpand = true,
             margin_top = 12,
diff --git a/lib/Widgets/TerminalView.vala b/lib/Widgets/TerminalView.vala
index 7fa6ec49a..6803ac52a 100644
--- a/lib/Widgets/TerminalView.vala
+++ b/lib/Widgets/TerminalView.vala
@@ -59,6 +59,11 @@ public class Granite.TerminalView : Granite.Bin {
         //TODO: implement
     }
 
+    /* This is useful for specific feedback such as in MessageDialogs
+     *
+     * Might also be useful to have a way of enabling direct input for stdout or
+     * stderr
+     */
     public void append_text (string text) {
         buffer.insert_at_cursor (text, -1);
     }
@@ -82,4 +87,3 @@ public class Granite.TerminalView : Granite.Bin {
         prev_upper_adj = adj.upper;
     }
 }
-

From 37602bf195770e0b0b8ae0364e457ef0b921da8d Mon Sep 17 00:00:00 2001
From: wpkelso <wpkelso+github@posteo.net>
Date: Sat, 17 May 2025 14:09:33 -0400
Subject: [PATCH 09/16] Move terminal view class to it's own file

---
 lib/Styles/Granite/Index.scss        |  1 +
 lib/Styles/Granite/TerminalView.scss | 19 +++++++++++++++++++
 lib/Styles/Granite/_classes.scss     | 20 --------------------
 3 files changed, 20 insertions(+), 20 deletions(-)
 create mode 100644 lib/Styles/Granite/TerminalView.scss

diff --git a/lib/Styles/Granite/Index.scss b/lib/Styles/Granite/Index.scss
index 0a3a64e4e..13a73e5ed 100644
--- a/lib/Styles/Granite/Index.scss
+++ b/lib/Styles/Granite/Index.scss
@@ -6,5 +6,6 @@
 @import 'MessageDialog.scss';
 @import 'OverlayBar.scss';
 @import 'Placeholder.scss';
+@import 'TerminalView.scss';
 @import 'Toast.scss';
 @import 'ToolBox.scss';
diff --git a/lib/Styles/Granite/TerminalView.scss b/lib/Styles/Granite/TerminalView.scss
new file mode 100644
index 000000000..c9339a86e
--- /dev/null
+++ b/lib/Styles/Granite/TerminalView.scss
@@ -0,0 +1,19 @@
+.terminal {
+    font-family: monospace;
+
+    background-color: $SLATE_900;
+    color: $SILVER_200;
+
+    // this is roughly 3 lines
+    min-height: 9ex; 
+
+    & selection {
+        background-color: $SILVER_200;
+        color: $SLATE_900;
+
+        &:backdrop {
+            // Cancelling values set in non-terminal selection
+            background-color: inherit;
+        }
+    }
+}
diff --git a/lib/Styles/Granite/_classes.scss b/lib/Styles/Granite/_classes.scss
index 4dc0590bd..970eb84ad 100644
--- a/lib/Styles/Granite/_classes.scss
+++ b/lib/Styles/Granite/_classes.scss
@@ -47,23 +47,3 @@ paper {
 .monospace {
     font-family: monospace;
 }
-
-.terminal {
-    font-family: monospace;
-
-    background-color: $SLATE_900;
-    color: $SILVER_200;
-
-    // this is roughly 3 lines
-    min-height: 9ex; 
-
-    & selection {
-        background-color: $SILVER_200;
-        color: $SLATE_900;
-
-        &:backdrop {
-            // Cancelling values set in non-terminal selection
-            background-color: inherit;
-        }
-    }
-}

From 2af81a7a9e2cc14df6a81e1db0e4c01eb30ede28 Mon Sep 17 00:00:00 2001
From: wpkelso <wpkelso+github@posteo.net>
Date: Sat, 17 May 2025 14:15:13 -0400
Subject: [PATCH 10/16] change CssClass to internal

---
 lib/Constants.vala | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/Constants.vala b/lib/Constants.vala
index 8adf1c2d7..ace20bf61 100644
--- a/lib/Constants.vala
+++ b/lib/Constants.vala
@@ -131,7 +131,7 @@ namespace Granite {
      * When used with {@link Gtk.Label} this style includes internal padding. When used with {@link Gtk.TextView}
      * interal padding will need to be set with {@link Gtk.Container.border_width}
      */
-    [Version (deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.CssClass.TERMINAL")]
+    [Version (deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.TerminalView")]
     public const string STYLE_CLASS_TERMINAL = "terminal";
     /**
      * Style class for title label text in a {@link Granite.MessageDialog}
@@ -294,7 +294,7 @@ namespace Granite {
          * When used with {@link Gtk.Label} this style includes internal padding. When used with {@link Gtk.TextView}
          * interal padding will need to be set with {@link Gtk.Container.border_width}
          */
-        public const string TERMINAL = "terminal";
+        internal const string TERMINAL = "terminal";
     }
 
     /**

From 35626e71f38fb07f3e6f1129be3eb84f4f9cd449 Mon Sep 17 00:00:00 2001
From: William Kelso <wpkelso+github@posteo.net>
Date: Sun, 18 May 2025 16:32:22 -0400
Subject: [PATCH 11/16] add enable/disable autoscroll?

---
 lib/Widgets/TerminalView.vala | 42 ++++++++++++++---------------------
 1 file changed, 17 insertions(+), 25 deletions(-)

diff --git a/lib/Widgets/TerminalView.vala b/lib/Widgets/TerminalView.vala
index 6803ac52a..1e21a98a0 100644
--- a/lib/Widgets/TerminalView.vala
+++ b/lib/Widgets/TerminalView.vala
@@ -38,40 +38,19 @@ public class Granite.TerminalView : Granite.Bin {
         this.add_css_class (Granite.CssClass.TERMINAL);
 
         notify["autoscroll"].connect ((s, p) => {
-            if (autoscroll) {
-                enable_autoscroll ();
-            } else {
-                disable_autoscroll ();
-            }
-
+            update_autoscroll ();
         });
     }
 
-    private void enable_autoscroll () {
+    private void update_autoscroll () {
         // FIXME: this disjoints the window closing and the application finishing
         Idle.add (() => {
             attempt_scroll ();
-            return GLib.Source.CONTINUE;
+            if (this.autoscroll) { return GLib.Source.CONTINUE; }
+            else {return GLib.Source.REMOVE; }
         });
     }
 
-    private void disable_autoscroll () {
-        //TODO: implement
-    }
-
-    /* This is useful for specific feedback such as in MessageDialogs
-     *
-     * Might also be useful to have a way of enabling direct input for stdout or
-     * stderr
-     */
-    public void append_text (string text) {
-        buffer.insert_at_cursor (text, -1);
-    }
-
-    public void replace_text (string text) {
-        buffer.set_text (text);
-    }
-
     public void attempt_scroll () {
         var adj = scrolled_window.vadjustment;
         var units_from_end = prev_upper_adj - adj.page_size - adj.value;
@@ -86,4 +65,17 @@ public class Granite.TerminalView : Granite.Bin {
 
         prev_upper_adj = adj.upper;
     }
+
+    /* This is useful for specific feedback such as in MessageDialogs
+     *
+     * Might also be useful to have a way of enabling direct input for stdout or
+     * stderr
+     */
+    public void append_text (string text) {
+        buffer.insert_at_cursor (text, -1);
+    }
+
+    public void replace_text (string text) {
+        buffer.set_text (text);
+    }
 }

From 5650bb3d6530763fcef898fab63e26777839f284 Mon Sep 17 00:00:00 2001
From: William Kelso <wpkelso+github@posteo.net>
Date: Tue, 20 May 2025 14:36:25 -0400
Subject: [PATCH 12/16] Better show autoscroll

---
 demo/Views/TerminalOutputView.vala | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/demo/Views/TerminalOutputView.vala b/demo/Views/TerminalOutputView.vala
index 863d3c0eb..d914dd337 100644
--- a/demo/Views/TerminalOutputView.vala
+++ b/demo/Views/TerminalOutputView.vala
@@ -18,6 +18,12 @@ public class TerminalOutputView: DemoPage {
         terminal.append_text ("[ 65%] Inserting nonsense functions to pad binary size\n");
         terminal.append_text ("[ 73%] Linking C executable granite-demo\n");
         terminal.append_text ("[100%] Built target granite-demo\n");
+        terminal.append_text ("Counting to one hundred...\n");
+
+        for (int i = 0; i <= 100; i++) {
+            var itos = i.to_string ("%i\n");
+            terminal.append_text (itos);
+        }
 
         terminal.add_css_class (Granite.CssClass.CARD);
 

From 2828f7100c76107f2d212012c565d2f0df028607 Mon Sep 17 00:00:00 2001
From: William Kelso <wpkelso+github@posteo.net>
Date: Tue, 20 May 2025 14:47:18 -0400
Subject: [PATCH 13/16] fix lint error?

---
 demo/Views/TerminalOutputView.vala | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/Views/TerminalOutputView.vala b/demo/Views/TerminalOutputView.vala
index d914dd337..d09df5022 100644
--- a/demo/Views/TerminalOutputView.vala
+++ b/demo/Views/TerminalOutputView.vala
@@ -18,7 +18,7 @@ public class TerminalOutputView: DemoPage {
         terminal.append_text ("[ 65%] Inserting nonsense functions to pad binary size\n");
         terminal.append_text ("[ 73%] Linking C executable granite-demo\n");
         terminal.append_text ("[100%] Built target granite-demo\n");
-        terminal.append_text ("Counting to one hundred...\n");
+        terminal.append_text ("Counting to one hundred…\n");
 
         for (int i = 0; i <= 100; i++) {
             var itos = i.to_string ("%i\n");

From 2e04a2d8b2df07154d2df5a19ef07adf8e78c7e2 Mon Sep 17 00:00:00 2001
From: William Kelso <wpkelso+github@posteo.net>
Date: Thu, 29 May 2025 16:46:39 -0400
Subject: [PATCH 14/16] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Danielle Foré <danielle@elementary.io>
---
 lib/Widgets/TerminalView.vala | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/lib/Widgets/TerminalView.vala b/lib/Widgets/TerminalView.vala
index 1e21a98a0..b9914bc5a 100644
--- a/lib/Widgets/TerminalView.vala
+++ b/lib/Widgets/TerminalView.vala
@@ -6,14 +6,14 @@
 [Version (since = "7.7.0")]
 public class Granite.TerminalView : Granite.Bin {
 
-    public bool autoscroll { get; construct set; default=false; }
+    public bool autoscroll { get; set; default = false; }
 
     private Gtk.TextBuffer buffer;
     private double prev_upper_adj = 0;
     private Gtk.ScrolledWindow scrolled_window;
 
     public TerminalView () {
-        Gtk.TextView view = new Gtk.TextView () {
+        var view = new Gtk.TextView () {
             cursor_visible = false,
             editable = false,
             monospace = true,
@@ -34,8 +34,8 @@ public class Granite.TerminalView : Granite.Bin {
             hscrollbar_policy = NEVER,
         };
 
-        this.child = scrolled_window;
-        this.add_css_class (Granite.CssClass.TERMINAL);
+        child = scrolled_window;
+        add_css_class (Granite.CssClass.TERMINAL);
 
         notify["autoscroll"].connect ((s, p) => {
             update_autoscroll ();
@@ -46,8 +46,11 @@ public class Granite.TerminalView : Granite.Bin {
         // FIXME: this disjoints the window closing and the application finishing
         Idle.add (() => {
             attempt_scroll ();
-            if (this.autoscroll) { return GLib.Source.CONTINUE; }
-            else {return GLib.Source.REMOVE; }
+            if (autoscroll) {
+                return GLib.Source.CONTINUE;
+            } else {
+                return GLib.Source.REMOVE;
+            }
         });
     }
 

From 04bcee48eb5d397f3601f71a10416845859b126e Mon Sep 17 00:00:00 2001
From: William Kelso <wpkelso+github@posteo.net>
Date: Tue, 10 Jun 2025 14:47:48 -0400
Subject: [PATCH 15/16] remove commented code, use bound properties

---
 lib/Constants.vala             |  5 +----
 lib/Widgets/MessageDialog.vala | 20 ++++----------------
 lib/Widgets/TerminalView.vala  | 23 ++++++++---------------
 3 files changed, 13 insertions(+), 35 deletions(-)

diff --git a/lib/Constants.vala b/lib/Constants.vala
index ace20bf61..c4ba970b8 100644
--- a/lib/Constants.vala
+++ b/lib/Constants.vala
@@ -288,11 +288,8 @@ namespace Granite {
         public const string MONOSPACE = "monospace";
 
         /**
-         * Style class for {@link Gtk.Label} or {@link Gtk.TextView} to emulate the appearance of Terminal. This includes
+         * Internal style class for {@link Granite.TerminalView} to emulate the appearance of Terminal. This includes
          * text color, background color, selection highlighting, and selecting the system monospace font.
-         *
-         * When used with {@link Gtk.Label} this style includes internal padding. When used with {@link Gtk.TextView}
-         * interal padding will need to be set with {@link Gtk.Container.border_width}
          */
         internal const string TERMINAL = "terminal";
     }
diff --git a/lib/Widgets/MessageDialog.vala b/lib/Widgets/MessageDialog.vala
index c4e0c3380..9847c6ca2 100644
--- a/lib/Widgets/MessageDialog.vala
+++ b/lib/Widgets/MessageDialog.vala
@@ -169,7 +169,9 @@ public class Granite.MessageDialog : Granite.Dialog {
      */
     private Gtk.Grid message_grid;
 
-    //private Gtk.Label? details_view;
+    /**
+     * The {@link Granite.TerminalView} used to display error details 
+     */
     private Granite.TerminalView? details_view;
 
     /**
@@ -309,20 +311,6 @@ public class Granite.MessageDialog : Granite.Dialog {
         if (details_view == null) {
             secondary_label.margin_bottom = 18;
 
-/*            details_view = new Gtk.Label ("") {
-                selectable = true,
-                wrap = true,
-                xalign = 0,
-                yalign = 0
-            };
-
-            var scroll_box = new Gtk.ScrolledWindow () {
-                margin_top = 12,
-                min_content_height = 70,
-                child = details_view
-            };
-            scroll_box.add_css_class (Granite.STYLE_CLASS_TERMINAL);
-*/
             details_view = new Granite.TerminalView ();
             expander = new Gtk.Expander (_("Details")) {
                 child = details_view
@@ -335,6 +323,6 @@ public class Granite.MessageDialog : Granite.Dialog {
             }
         }
 
-        details_view.append_text (error_message);
+        details_view.label = error_message;
     }
 }
diff --git a/lib/Widgets/TerminalView.vala b/lib/Widgets/TerminalView.vala
index b9914bc5a..ddab3ac49 100644
--- a/lib/Widgets/TerminalView.vala
+++ b/lib/Widgets/TerminalView.vala
@@ -7,12 +7,15 @@
 public class Granite.TerminalView : Granite.Bin {
 
     public bool autoscroll { get; set; default = false; }
+    // TODO: Choose one
+    public string text { get; set; }
+    public string label { get; set; }
 
     private Gtk.TextBuffer buffer;
     private double prev_upper_adj = 0;
     private Gtk.ScrolledWindow scrolled_window;
 
-    public TerminalView () {
+    construct {
         var view = new Gtk.TextView () {
             cursor_visible = false,
             editable = false,
@@ -37,6 +40,9 @@ public class Granite.TerminalView : Granite.Bin {
         child = scrolled_window;
         add_css_class (Granite.CssClass.TERMINAL);
 
+        bind_property ("text", buffer, "text", BIDIRECTIONAL | SYNC_CREATE);
+        bind_property ("label", buffer, "text", BIDIRECTIONAL | SYNC_CREATE);
+
         notify["autoscroll"].connect ((s, p) => {
             update_autoscroll ();
         });
@@ -54,7 +60,7 @@ public class Granite.TerminalView : Granite.Bin {
         });
     }
 
-    public void attempt_scroll () {
+    private void attempt_scroll () {
         var adj = scrolled_window.vadjustment;
         var units_from_end = prev_upper_adj - adj.page_size - adj.value;
 
@@ -68,17 +74,4 @@ public class Granite.TerminalView : Granite.Bin {
 
         prev_upper_adj = adj.upper;
     }
-
-    /* This is useful for specific feedback such as in MessageDialogs
-     *
-     * Might also be useful to have a way of enabling direct input for stdout or
-     * stderr
-     */
-    public void append_text (string text) {
-        buffer.insert_at_cursor (text, -1);
-    }
-
-    public void replace_text (string text) {
-        buffer.set_text (text);
-    }
 }

From 899fdc29e5d79aa3b3c6abaee33db94afe320d76 Mon Sep 17 00:00:00 2001
From: William Kelso <wpkelso+github@posteo.net>
Date: Tue, 10 Jun 2025 15:07:29 -0400
Subject: [PATCH 16/16] Deduplicate text properties, fix errors in dmeo

---
 demo/Views/TerminalOutputView.vala | 12 ++++++------
 lib/Widgets/MessageDialog.vala     |  2 +-
 lib/Widgets/TerminalView.vala      |  3 ---
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/demo/Views/TerminalOutputView.vala b/demo/Views/TerminalOutputView.vala
index d09df5022..de71d734e 100644
--- a/demo/Views/TerminalOutputView.vala
+++ b/demo/Views/TerminalOutputView.vala
@@ -14,15 +14,15 @@ public class TerminalOutputView: DemoPage {
             margin_start = 12,
             margin_end = 12
         };
-        terminal.append_text ("[ 25%] Performing optimization passes\n");
-        terminal.append_text ("[ 65%] Inserting nonsense functions to pad binary size\n");
-        terminal.append_text ("[ 73%] Linking C executable granite-demo\n");
-        terminal.append_text ("[100%] Built target granite-demo\n");
-        terminal.append_text ("Counting to one hundred…\n");
+        terminal.text = "[ 25%] Performing optimization passes\n";
+        terminal.text += "[ 65%] Inserting nonsense functions to pad binary size\n";
+        terminal.text += "[ 73%] Linking C executable granite-demo\n";
+        terminal.text += "[100%] Built target granite-demo\n";
+        terminal.text += "Counting to one hundred…\n";
 
         for (int i = 0; i <= 100; i++) {
             var itos = i.to_string ("%i\n");
-            terminal.append_text (itos);
+            terminal.text += itos;
         }
 
         terminal.add_css_class (Granite.CssClass.CARD);
diff --git a/lib/Widgets/MessageDialog.vala b/lib/Widgets/MessageDialog.vala
index 9847c6ca2..fa4330a8d 100644
--- a/lib/Widgets/MessageDialog.vala
+++ b/lib/Widgets/MessageDialog.vala
@@ -323,6 +323,6 @@ public class Granite.MessageDialog : Granite.Dialog {
             }
         }
 
-        details_view.label = error_message;
+        details_view.text = error_message;
     }
 }
diff --git a/lib/Widgets/TerminalView.vala b/lib/Widgets/TerminalView.vala
index ddab3ac49..7de1531e3 100644
--- a/lib/Widgets/TerminalView.vala
+++ b/lib/Widgets/TerminalView.vala
@@ -7,9 +7,7 @@
 public class Granite.TerminalView : Granite.Bin {
 
     public bool autoscroll { get; set; default = false; }
-    // TODO: Choose one
     public string text { get; set; }
-    public string label { get; set; }
 
     private Gtk.TextBuffer buffer;
     private double prev_upper_adj = 0;
@@ -41,7 +39,6 @@ public class Granite.TerminalView : Granite.Bin {
         add_css_class (Granite.CssClass.TERMINAL);
 
         bind_property ("text", buffer, "text", BIDIRECTIONAL | SYNC_CREATE);
-        bind_property ("label", buffer, "text", BIDIRECTIONAL | SYNC_CREATE);
 
         notify["autoscroll"].connect ((s, p) => {
             update_autoscroll ();