Improve Sonos widget error handling and click-to-start

- Add offline detection with "Click to start" functionality
- Clicking widget when offline opens the server launcher
- Differentiate between offline, no-speakers, and starting states
- Compact error messages with helpful hints
- Auto-minimize Terminal when starting server

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Signed-off-by: Andrew Anderson <andy@clubanderson.com>

Author: clubanderson

examples/sonos-control.jsx

@@ -4,17 +4,24 @@
 // Prerequisites: node-sonos-http-api running on port 5005
 // https://github.com/jishi/node-sonos-http-api
 
-import { css } from "uebersicht";
+import { css, run } from "uebersicht";
 
 // ============ CONFIGURATION ============
 const SONOS_API_URL = "http://localhost:5005";
 // =======================================
 
 export const command = `
-  echo '{"zones":' && curl -s "${SONOS_API_URL}/zones" 2>/dev/null && \
-  echo ',"favorites":' && curl -s "${SONOS_API_URL}/favorites/detailed" 2>/dev/null && \
-  echo ',"playlists":' && curl -s "${SONOS_API_URL}/playlists" 2>/dev/null && \
-  echo '}'
+  zones=$(curl -s --connect-timeout 1 "${SONOS_API_URL}/zones" 2>/dev/null)
+  curlrc=$?
+  if [ $curlrc -ne 0 ]; then
+    echo '{"error":"offline"}'
+  elif [ -z "$zones" ] || [ "$zones" = "[]" ]; then
+    echo '{"error":"no-speakers"}'
+  else
+    favs=$(curl -s --connect-timeout 2 "${SONOS_API_URL}/favorites/detailed" 2>/dev/null || echo '[]')
+    lists=$(curl -s --connect-timeout 2 "${SONOS_API_URL}/playlists" 2>/dev/null || echo '[]')
+    echo "{\\"zones\\":$zones,\\"favorites\\":$favs,\\"playlists\\":$lists}"
+  fi
 `;
 
 export const refreshFrequency = 3000;
@@ -1078,29 +1085,85 @@ function ZoneControl({ zone, allZones, favorites, expanded, onToggleExpand, onOp
 
 let expandedZones = new Set();
 
+const connectingStyle = {
+  background: "rgba(0, 0, 0, 0.80)",
+  backdropFilter: "blur(24px)",
+  WebkitBackdropFilter: "blur(24px)",
+  borderRadius: "16px",
+  padding: "16px 20px",
+  fontSize: "12px",
+  color: "rgba(255, 255, 255, 0.8)",
+  textAlign: "center",
+  position: "absolute",
+  top: "20px",
+  right: "20px",
+  pointerEvents: "auto",
+  maxWidth: "200px",
+};
+
+const startServer = () => {
+  run(`open ~/Desktop/Start\\ Sonos\\ Server.command`);
+};
+
 export const render = ({ output, error }) => {
-  if (error || !output) {
+  if (error || !output || output.trim() === "") {
     return (
-      <div style={errorStyle}>
-        Cannot reach Sonos API<br/>
-        <span style={{fontSize: "10px", opacity: 0.7}}>
-          Ensure node-sonos-http-api is running on port 5005
+      <div
+        style={{...connectingStyle, cursor: "pointer"}}
+        onClick={startServer}
+        title="Click to start server"
+      >
+        🔊 Sonos Offline<br/>
+        <span style={{fontSize: "10px", opacity: 0.6, lineHeight: 1.4, display: "block", marginTop: "8px"}}>
+          Click to start
         </span>
       </div>
     );
   }
 
   try {
-    const cleanOutput = output.replace(/\n/g, '');
+    const cleanOutput = output.replace(/\n/g, '').trim();
     const data = JSON.parse(cleanOutput);
+
+    // Handle offline state - server not running
+    if (data.error === "offline") {
+      return (
+        <div
+          style={{...connectingStyle, cursor: "pointer"}}
+          onClick={startServer}
+          title="Click to start server"
+        >
+          🔊 Sonos Offline<br/>
+          <span style={{fontSize: "10px", opacity: 0.6, lineHeight: 1.4, display: "block", marginTop: "8px"}}>
+            Click to start
+          </span>
+        </div>
+      );
+    }
+
+    // Handle no speakers state
+    if (data.error === "no-speakers") {
+      return (
+        <div style={connectingStyle}>
+          🔊 Sonos<br/>
+          <span style={{fontSize: "10px", opacity: 0.6, lineHeight: 1.4, display: "block", marginTop: "6px"}}>
+            No speakers found
+          </span>
+        </div>
+      );
+    }
+
     const zones = data.zones || [];
     const favorites = data.favorites || [];
     const playlists = data.playlists || [];
 
     if (!zones || zones.length === 0) {
       return (
-        <div style={errorStyle}>
-          No Sonos speakers found
+        <div style={connectingStyle}>
+          🔊 Sonos<br/>
+          <span style={{fontSize: "10px", opacity: 0.6, lineHeight: 1.4, display: "block", marginTop: "6px"}}>
+            No speakers found
+          </span>
         </div>
       );
     }
@@ -1275,9 +1338,11 @@ export const render = ({ output, error }) => {
     );
   } catch (e) {
     return (
-      <div style={errorStyle}>
-        Error: {e.message}<br/>
-        <span style={{fontSize: "9px", opacity: 0.5}}>{output?.substring(0, 100)}</span>
+      <div style={connectingStyle}>
+        🔊 Sonos<br/>
+        <span style={{fontSize: "10px", opacity: 0.6, lineHeight: 1.4, display: "block", marginTop: "6px"}}>
+          Starting up...
+        </span>
       </div>
     );
   }