Add live quote pane controls

Author: vincelwt

PLUGINS.md

@@ -490,6 +490,42 @@ function MyPane() {
 }
 ```
 
+### Pane quick settings
+
+A pane can surface important toggle settings next to its title. Each quick setting references a `toggle` field from the pane's normal settings definition, so the header control and settings dialog share the same persisted value and update behavior.
+
+```typescript
+ctx.registerPane({
+  id: "live-prices",
+  name: "Live Prices",
+  component: LivePricesPane,
+  defaultPosition: "right",
+  quickSettings: [
+    { type: "toggle", key: "liveStreaming", icon: "zap" },
+  ],
+  settings: (context) => ({
+    values: {
+      liveStreaming: context.settings.liveStreaming !== false,
+    },
+    fields: [
+      {
+        key: "liveStreaming",
+        label: "Live streaming",
+        description: "Stream updates continuously when enabled.",
+        type: "toggle",
+      },
+    ],
+  }),
+});
+
+function LivePricesPane() {
+  const [liveStreaming] = usePaneSettingValue("liveStreaming", true);
+  // Use liveStreaming to select continuous updates or a slower polling path.
+}
+```
+
+Quick settings currently support toggle fields with the `zap` icon. Unknown keys and non-toggle fields are ignored.
+
 ### Events
 
 Subscribe to and emit app events:

src/components/layout/detached-pane-shell.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useRendererHost, useUiCapabilities } from "../../ui";
+import { Box, Span, Text, useRendererHost, useUiCapabilities } from "../../ui";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { t } from "../../i18n";
 import { useShortcut, useViewport } from "../../react/input";
@@ -49,6 +49,7 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
   const instance = useAppSelector((state) => findPaneInstance(state.config.layout, desktopWindowBridge.paneId) ?? null);
   const paneDef = instance ? pluginRegistry.panes.get(instance.paneId) ?? null : null;
   const hasPaneSettings = !!instance && pluginRegistry.hasPaneSettings(instance.instanceId);
+  const quickSettings = instance ? pluginRegistry.resolvePaneQuickSettings(instance.instanceId) : [];
   const titleState = useMemo(
     () => ({ config, paneState }) as Parameters<typeof getPaneDisplayTitle>[0],
     [config, paneState],
@@ -118,6 +119,16 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
     stopMouse(event);
     pluginRegistry.openPaneSettingsFn(desktopWindowBridge.paneId);
   }, [desktopWindowBridge.paneId, pluginRegistry]);
+  const toggleQuickSetting = useCallback((key: string, event?: { stopPropagation?: () => void; preventDefault?: () => void }) => {
+    stopMouse(event);
+    focusPane();
+    void pluginRegistry.togglePaneQuickSetting(desktopWindowBridge.paneId, key).catch((error) => {
+      pluginRegistry.notify({
+        body: error instanceof Error ? error.message : "Could not update pane setting.",
+        type: "error",
+      });
+    });
+  }, [desktopWindowBridge.paneId, focusPane, pluginRegistry]);
 
   if (!instance || !paneDef) {
     return (
@@ -183,9 +194,36 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
                 paddingRight={showWindowControls ? 0 : 1}
                 style={{ position: "relative" }}
               >
-                <Box flexGrow={1} minWidth={0} overflow="hidden">
+                <Box minWidth={0} flexShrink={1} overflow="hidden">
                   <Text fg={paneTitleText(focused, true, colors)} selectable={false} data-gloom-role="pane-title">{title}</Text>
                 </Box>
+                {quickSettings.map((setting) => (
+                  <Box
+                    key={setting.key}
+                    height={1}
+                    minWidth={20}
+                    paddingLeft={1}
+                    paddingRight={1}
+                    alignItems="center"
+                    justifyContent="center"
+                    className="electrobun-webkit-app-region-no-drag"
+                    data-gloom-role="pane-quick-setting"
+                    data-setting-key={setting.key}
+                    data-gloom-interactive="true"
+                    aria-label={`${setting.label}: ${setting.value ? "on" : "off"}`}
+                    aria-pressed={setting.value}
+                    title={`${setting.label}: ${setting.value ? "on" : "off"}`}
+                    style={{ cursor: "pointer" }}
+                    onMouseDown={(event: any) => toggleQuickSetting(setting.key, event)}
+                  >
+                    <Span style={{ display: "inline-flex", width: 12, height: 12, color: setting.value ? colors.warning : colors.textDim }}>
+                      <svg viewBox="0 0 12 12" width="12" height="12" fill="none" aria-hidden="true">
+                        <path d="M7.1 1.2 2.7 6.5h3.1l-.7 4.3 4.4-5.5H6.4l.7-4.1Z" fill="currentColor" />
+                      </svg>
+                    </Span>
+                  </Box>
+                ))}
+                <Box flexGrow={1} minWidth={0} />
                 {hasPaneSettings && (
                   <Text
                     fg={paneTitleText(focused, true, colors)}

src/components/layout/floating-pane.tsx

@@ -2,7 +2,7 @@ import { Box, Text, useUiCapabilities } from "../../ui";
 import type { ReactNode } from "react";
 import { colors, floatingPaneBg } from "../../theme/colors";
 import { PaneBodyFrame, getPaneWindowAttributes } from "./pane/frame";
-import { PaneHeader } from "./pane/header";
+import { PaneHeader, type PaneHeaderQuickSetting } from "./pane/header";
 import { hasPaneFooterContent, PaneFooterBar, type CombinedPaneFooter } from "./pane/footer";
 import { resolvePaneBodyFrame, shouldReservePaneFooter } from "./pane/sizing";
 
@@ -17,6 +17,7 @@ interface FloatingPaneWrapperProps {
   focused: boolean;
   windowModeSelected?: boolean;
   showActions?: boolean;
+  quickSettings?: PaneHeaderQuickSetting[];
   onMouseDown?: (event: any) => void;
   onMouseDownCapture?: (event: any) => void;
   onHeaderMouseMove?: (event: any) => void;
@@ -63,6 +64,7 @@ export function FloatingPaneWrapper({
   focused,
   windowModeSelected = false,
   showActions = false,
+  quickSettings,
   onMouseDown,
   onMouseDownCapture,
   onHeaderMouseMove,
@@ -115,6 +117,7 @@ export function FloatingPaneWrapper({
         windowModeSelected={windowModeSelected}
         floating
         showActions={showActions}
+        quickSettings={quickSettings}
         onHeaderMouseMove={onHeaderMouseMove}
         onHeaderMouseDown={onHeaderMouseDown}
         onHeaderMouseDrag={onHeaderMouseDrag}

src/components/layout/pane/header.tsx

@@ -15,6 +15,7 @@ interface PaneHeaderProps {
   windowModeSelected?: boolean;
   floating?: boolean;
   showActions?: boolean;
+  quickSettings?: PaneHeaderQuickSetting[];
   onHeaderMouseMove?: (event: any) => void;
   onHeaderMouseDown?: (event: any) => void;
   onHeaderMouseDrag?: (event: any) => void;
@@ -24,6 +25,15 @@ interface PaneHeaderProps {
   onCloseMouseDown?: (event: any) => void;
 }
 
+export interface PaneHeaderQuickSetting {
+  key: string;
+  icon: "zap";
+  label: string;
+  description?: string;
+  active: boolean;
+  onMouseDown?: (event: any) => void;
+}
+
 function truncateTitle(title: string, maxWidth: number): string {
   return truncateToDisplayWidth(title, maxWidth);
 }
@@ -43,9 +53,15 @@ function captureTerminalPointerDrag(renderer: unknown, renderable: unknown): voi
 function DesktopPaneButton({
   icon,
   onMouseDown,
+  color = colors.textDim,
+  label,
+  pressed,
 }: {
   icon: ReactNode;
   onMouseDown?: (event: any) => void;
+  color?: string;
+  label?: string;
+  pressed?: boolean;
 }) {
   return (
     <Box
@@ -54,6 +70,9 @@ function DesktopPaneButton({
       justifyContent="center"
       onMouseDown={onMouseDown}
       data-gloom-interactive={onMouseDown ? "true" : undefined}
+      aria-label={label}
+      aria-pressed={pressed}
+      title={label}
       style={{
         borderRadius: 4,
         minWidth: 20,
@@ -69,7 +88,7 @@ function DesktopPaneButton({
           justifyContent: "center",
           width: 12,
           height: 12,
-          color: colors.textDim,
+          color,
         }}
       >
         {icon}
@@ -92,7 +111,7 @@ function TerminalPaneButton({
   return (
     <Box
       height={1}
-      width={text.length}
+      width={displayWidth(text)}
       flexDirection="row"
       data-gloom-role={role}
       data-gloom-interactive={onMouseDown ? "true" : undefined}
@@ -110,6 +129,7 @@ export function PaneHeader({
   windowModeSelected = false,
   floating = false,
   showActions = false,
+  quickSettings = [],
   onHeaderMouseMove,
   onHeaderMouseDown,
   onHeaderMouseDrag,
@@ -125,6 +145,7 @@ export function PaneHeader({
   const backgroundColor = floating ? floatingPaneTitleBg(visuallyFocused) : paneTitleBg(visuallyFocused);
   const actionText = showActions ? PANE_HEADER_ACTION : "     ";
   const closeText = floating ? PANE_HEADER_CLOSE : "";
+  const terminalQuickSettingsWidth = quickSettings.reduce((total) => total + displayWidth(" ⚡ "), 0);
   const textColor = paneTitleText(visuallyFocused, floating);
   const handleTerminalHeaderMouseDown = useCallback((event: any) => {
     captureTerminalPointerDrag(nativeRenderer, terminalHeaderRef.current);
@@ -158,7 +179,7 @@ export function PaneHeader({
         <Text fg={visuallyFocused ? colors.borderFocused : colors.textMuted} selectable={false} data-gloom-role="pane-grip">
           {PANE_HEADER_GRIP}
         </Text>
-        <Box flexGrow={1} minWidth={0} overflow="hidden">
+        <Box minWidth={0} flexShrink={1} overflow="hidden">
           <Text
             fg={textColor}
             selectable={false}
@@ -173,6 +194,25 @@ export function PaneHeader({
             {title}
           </Text>
         </Box>
+        {quickSettings.map((setting) => (
+          <Box key={setting.key} data-gloom-role="pane-quick-setting" data-setting-key={setting.key}>
+            <DesktopPaneButton
+              onMouseDown={setting.onMouseDown}
+              color={setting.active ? colors.warning : colors.textDim}
+              label={`${setting.label}: ${setting.active ? "on" : "off"}`}
+              pressed={setting.active}
+              icon={(
+                <svg viewBox="0 0 12 12" width="12" height="12" fill="none" aria-hidden="true">
+                  <path
+                    d="M7.1 1.2 2.7 6.5h3.1l-.7 4.3 4.4-5.5H6.4l.7-4.1Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              )}
+            />
+          </Box>
+        ))}
+        <Box flexGrow={1} minWidth={0} />
         <Box data-gloom-role="pane-action">
           {showActions ? (
             <DesktopPaneButton
@@ -213,10 +253,10 @@ export function PaneHeader({
     // Reserve 2 for corners, 1 for ─ after ┌, 1 for ─ before ┐
     const borderColor = visuallyFocused ? colors.borderFocused : colors.border;
     const innerWidth = Math.max(0, width - 4);
-    const contentWidth = PANE_HEADER_GRIP.length + closeText.length + actionText.length;
+    const contentWidth = PANE_HEADER_GRIP.length + terminalQuickSettingsWidth + closeText.length + actionText.length;
     const titleWidth = Math.max(0, innerWidth - contentWidth);
     const clippedTitle = truncateTitle(title, titleWidth);
-    const fillLen = Math.max(0, innerWidth - PANE_HEADER_GRIP.length - displayWidth(clippedTitle) - actionText.length - closeText.length);
+    const fillLen = Math.max(0, innerWidth - PANE_HEADER_GRIP.length - displayWidth(clippedTitle) - terminalQuickSettingsWidth - actionText.length - closeText.length);
     const fill = "─".repeat(fillLen);
 
     return (
@@ -233,6 +273,15 @@ export function PaneHeader({
       >
         <Text fg={borderColor} selectable={false}>{"┌─"}</Text>
         <Text fg={textColor} selectable={false}>{`${PANE_HEADER_GRIP}${clippedTitle}`}</Text>
+        {quickSettings.map((setting) => (
+          <TerminalPaneButton
+            key={setting.key}
+            text=" ⚡ "
+            fg={setting.active ? colors.warning : colors.textDim}
+            role="pane-quick-setting"
+            onMouseDown={setting.onMouseDown}
+          />
+        ))}
         <Text fg={borderColor} selectable={false}>{fill}</Text>
         <TerminalPaneButton
           text={actionText}
@@ -253,7 +302,7 @@ export function PaneHeader({
     );
   }
 
-  const titleWidth = Math.max(0, width - PANE_HEADER_GRIP.length - actionText.length - closeText.length);
+  const titleWidth = Math.max(0, width - PANE_HEADER_GRIP.length - terminalQuickSettingsWidth - actionText.length - closeText.length);
   const clippedTitle = truncateTitle(title, titleWidth);
   const padding = " ".repeat(Math.max(0, titleWidth - displayWidth(clippedTitle)));
 
@@ -272,6 +321,15 @@ export function PaneHeader({
       <Text fg={textColor} selectable={false}>
         {`${PANE_HEADER_GRIP}${clippedTitle}${padding}`}
       </Text>
+      {quickSettings.map((setting) => (
+        <TerminalPaneButton
+          key={setting.key}
+          text=" ⚡ "
+          fg={setting.active ? colors.warning : colors.textDim}
+          role="pane-quick-setting"
+          onMouseDown={setting.onMouseDown}
+        />
+      ))}
       <TerminalPaneButton
         text={actionText}
         fg={textColor}

src/components/layout/pane/index.tsx

@@ -2,7 +2,7 @@ import { Box, useUiCapabilities } from "../../../ui";
 import type { ReactNode } from "react";
 import { paneBg } from "../../../theme/colors";
 import { PaneBodyFrame, getPaneWindowAttributes } from "./frame";
-import { PaneHeader } from "./header";
+import { PaneHeader, type PaneHeaderQuickSetting } from "./header";
 import { hasPaneFooterContent, PaneFooterBar, type CombinedPaneFooter } from "./footer";
 import { resolvePaneBodyFrame, shouldReservePaneFooter } from "./sizing";
 
@@ -15,6 +15,7 @@ interface PaneWrapperProps {
   height?: number | `${number}%` | "auto";
   flexGrow?: number;
   showActions?: boolean;
+  quickSettings?: PaneHeaderQuickSetting[];
   onMouseDown?: (event: any) => void;
   onMouseDownCapture?: (event: any) => void;
   onHeaderMouseMove?: (event: any) => void;
@@ -36,6 +37,7 @@ export function PaneWrapper({
   height,
   flexGrow,
   showActions = false,
+  quickSettings,
   onMouseDown,
   onMouseDownCapture,
   onHeaderMouseMove,
@@ -87,6 +89,7 @@ export function PaneWrapper({
           focused={focused}
           windowModeSelected={windowModeSelected}
           showActions={showActions}
+          quickSettings={quickSettings}
           onHeaderMouseMove={onHeaderMouseMove}
           onHeaderMouseDown={onHeaderMouseDown}
           onHeaderMouseDrag={onHeaderMouseDrag}

src/components/layout/shell/index.tsx

@@ -30,6 +30,7 @@ import {
 } from "../../../state/selectors-ui";
 import { useThemeColors } from "../../../theme/theme-context";
 import { getPaneDisplayTitle } from "../pane/title";
+import type { PaneHeaderQuickSetting } from "../pane/header";
 import { getShortcutDisplayMode } from "../../../utils/shortcut-labels";
 import {
   actionMenuWidth,
@@ -423,6 +424,27 @@ export function Shell({
     (pane: ResolvedPane): string => getPaneDisplayTitle(titleState, pane.instance, pane.def),
     [titleState],
   );
+  const handlePaneQuickSetting = useCallback((paneId: string, key: string, event: any) => {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    focusPane(paneId);
+    void pluginRegistry.togglePaneQuickSetting(paneId, key).catch((error) => {
+      pluginRegistry.notify({
+        body: error instanceof Error ? error.message : "Could not update pane setting.",
+        type: "error",
+      });
+    });
+  }, [focusPane, pluginRegistry]);
+  const getPaneQuickSettings = useCallback((paneId: string): PaneHeaderQuickSetting[] => (
+    pluginRegistry.resolvePaneQuickSettings(paneId).map((setting) => ({
+      key: setting.key,
+      icon: setting.icon,
+      label: setting.label,
+      description: setting.description,
+      active: setting.value,
+      onMouseDown: (event) => handlePaneQuickSetting(paneId, setting.key, event),
+    }))
+  ), [config, handlePaneQuickSetting, pluginRegistry]);
 
   const openPaneMenu = useCallback((paneId: string, rect: LayoutBounds, event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
     const pane = paneMap.get(paneId);
@@ -561,6 +583,7 @@ export function Shell({
         dragFloatingRect={dragFloatingRect}
         focusedPaneId={focusedPaneId}
         getPaneTitle={getPaneTitle}
+        getPaneQuickSettings={getPaneQuickSettings}
         handleFloatingClose={handleFloatingClose}
         handleFloatingCloseMouseDown={handleFloatingCloseMouseDown}
         handleNativeDrag={handleNativeDrag}