%spin hint bar

desk/sys.kelvin

@@ -1,4 +1 @@
-[%zuse 416]
-[%zuse 415]
-[%zuse 414]
-[%zuse 413]
+[%zuse 409]

ui/App.tsx

@@ -16,6 +16,7 @@ import Buffer from './Buffer';
 import { DEFAULT_SESSION, SESSION_ID_REGEX } from './constants';
 import { showSlog } from './lib/blit';
 import { InfoButton } from './InfoButton';
+import { SpinInfoBar } from './SpinInfoBar';
 import { scrySessions, pokeTask } from './lib/utils';
 
 const initSessions = async () => {
@@ -107,6 +108,7 @@ export default function TermApp() {
   return (
     <>
       <ThemeProvider theme={dark ? _dark : _light}>
+        <SpinInfoBar />
         <div className="header">
           <Tabs />
           <InfoButton />

ui/SpinInfoBar.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import { useDark } from './lib/useDark';
+
+export const SpinInfoBar = () => {
+  const [spinStack, setSpinStack] = useState<string[]>([]);
+  const dark = useDark();
+
+  useEffect(() => {
+    console.log('spin: setting up...');
+    let available = false;
+    const spin = new EventSource('/~_~/spin', { withCredentials: true });
+
+    spin.onopen = () => {
+      console.log('spin: opened stream');
+      available = true;
+    };
+
+    spin.onmessage = (e) => {
+      console.log('spin message:', e.data);
+      // The data is expected to be a path like /stack3/stack2/stack1/stack0
+      // We need to parse it into an array of stack names
+      if (e.data && typeof e.data === 'string') {
+        // Remove leading slash if present and split by slash
+        const stackPath = e.data.startsWith('/') ? e.data.substring(1) : e.data;
+        const stackArray = stackPath.split('/').filter(Boolean);
+        setSpinStack(stackArray);
+      }
+    };
+
+    spin.onerror = (e) => {
+      console.error('spin: eventsource error:', e);
+      if (available) {
+        window.setTimeout(() => {
+          if (spin.readyState !== EventSource.CLOSED) {
+            return;
+          }
+          console.log('spin: reconnecting...');
+          // We would call the setup function again here, but we don't want to
+          // create multiple event listeners in this effect
+        }, 10000);
+      }
+    };
+
+    return () => {
+      spin.close();
+    };
+  }, []);
+
+  if (spinStack.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="spin-info-bar" style={{
+      backgroundColor: dark ? 'rgb(42, 42, 42)' : '#f0f0f0',
+      color: dark ? 'rgba(255, 255, 255, 0.9)' : 'black',
+      padding: '4px 10px',
+      fontSize: '12px',
+      fontFamily: 'monospace',
+      borderBottom: `1px solid ${dark ? 'rgba(255, 255, 255, 0.2)' : '#ccc'}`,
+      display: 'flex',
+      alignItems: 'center',
+      height: '24px',
+    }}>
+      <span style={{ marginRight: '5px', fontWeight: 'bold' }}>Spin Stack:</span>
+      {spinStack.map((stack, index) => (
+        <React.Fragment key={index}>
+          {index > 0 && <span style={{ margin: '0 5px' }}>&gt;</span>}
+          <span style={{
+            padding: '2px 6px',
+            backgroundColor: dark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
+            borderRadius: '3px',
+          }}>
+            {stack}
+          </span>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};

ui/index.html

@@ -29,10 +29,14 @@
       }
 
       .buffer-container {
-        height: calc(100% - 40px);
+        height: calc(100% - 40px - 24px);
         position: relative;
       }
 
+      .spin-info-bar {
+        width: 100%;
+      }
+
       .terminal-container {
         position: absolute;
         top: 0;