Add hook system.

src/style.css

@@ -129,6 +129,61 @@
   color: #b29df5;
 }
 
+/* Status dots. One shared appearance for the sidebar row and the pane header,
+   coloured entirely by which state class is on the icon. Symbolic icons take
+   their colour from `color`, so nothing here needs a second asset.
+
+   These are read at a glance from across a screen full of tabs, so the colours
+   are picked to survive that: amber and red carry the two states that actually
+   want you, and they are the only warm colours anywhere in the window. */
+.playpen-status-dot {
+  -gtk-icon-size: 8px;
+  opacity: 0;
+}
+
+.playpen-status-busy,
+.playpen-status-done,
+.playpen-status-input,
+.playpen-status-failed {
+  opacity: 1;
+}
+
+/* Working: the same accent as an active pane's border, so "busy" reads as
+   ordinary activity rather than something gone wrong. */
+.playpen-status-busy {
+  color: #b29df5;
+  animation: playpen-pulse 1.6s ease-in-out infinite;
+}
+
+/* Finished while you were elsewhere. Green rather than the accent so it is
+   distinct from still-working at a glance, which is the one distinction this
+   whole indicator exists to make. */
+.playpen-status-done {
+  color: #7ddc9a;
+}
+
+/* Blocked on you. Amber, and not animated — a pulsing dot reads as progress,
+   and this is the opposite of progress. */
+.playpen-status-input {
+  color: #f0c069;
+}
+
+.playpen-status-failed {
+  color: #f2a0a0;
+}
+
+@keyframes playpen-pulse {
+  0%   { opacity: 0.35; }
+  50%  { opacity: 1; }
+  100% { opacity: 0.35; }
+}
+
+/* Renaming a tab: a single entry in a popover hanging off the row. */
+.playpen-rename {
+  padding: 8px;
+  min-width: 220px;
+}
+
 /* A web pane's navigation bar, below the pane header. Kept visually quieter
    than the header so the two rows don't compete. */
 .playpen-nav {