@agent-relay/dashboard 2.0.83-beta.0 → 2.0.85

package/src/providers/SettingsProvider.tsx

@@ -0,0 +1,247 @@
+/**
+ * Settings Provider
+ *
+ * Manages user preferences: theme, display options, notification settings.
+ * Persists to localStorage and applies theme to the document root.
+ */
+
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { defaultSettings, type Settings } from '../components/settings';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type LegacyDashboardSettings = {
+  theme?: 'dark' | 'light' | 'system';
+  compactMode?: boolean;
+  showTimestamps?: boolean;
+  soundEnabled?: boolean;
+  notificationsEnabled?: boolean;
+  autoScrollMessages?: boolean;
+};
+
+interface SettingsContextValue {
+  settings: Settings;
+  updateSettings: (updater: (prev: Settings) => Settings) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const SETTINGS_STORAGE_KEY = 'dashboard-settings';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function mergeSettings(base: Settings, partial: Partial<Settings>): Settings {
+  return {
+    ...base,
+    ...partial,
+    notifications: { ...base.notifications, ...partial.notifications },
+    display: { ...base.display, ...partial.display },
+    messages: { ...base.messages, ...partial.messages },
+    connection: { ...base.connection, ...partial.connection },
+    agentDefaults: {
+      ...base.agentDefaults,
+      ...partial.agentDefaults,
+      defaultModels: {
+        ...base.agentDefaults?.defaultModels,
+        ...partial.agentDefaults?.defaultModels,
+      },
+    },
+  };
+}
+
+function migrateLegacySettings(raw: LegacyDashboardSettings): Settings {
+  const theme = raw.theme && ['dark', 'light', 'system'].includes(raw.theme)
+    ? raw.theme
+    : defaultSettings.theme;
+  const sound = raw.soundEnabled ?? defaultSettings.notifications.sound;
+  const desktop = raw.notificationsEnabled ?? defaultSettings.notifications.desktop;
+  return {
+    ...defaultSettings,
+    theme,
+    display: {
+      ...defaultSettings.display,
+      compactMode: raw.compactMode ?? defaultSettings.display.compactMode,
+      showTimestamps: raw.showTimestamps ?? defaultSettings.display.showTimestamps,
+    },
+    notifications: {
+      ...defaultSettings.notifications,
+      sound,
+      desktop,
+      enabled: sound || desktop || defaultSettings.notifications.mentionsOnly,
+    },
+    messages: {
+      ...defaultSettings.messages,
+      autoScroll: raw.autoScrollMessages ?? defaultSettings.messages.autoScroll,
+    },
+  };
+}
+
+function loadSettingsFromStorage(): Settings {
+  if (typeof window === 'undefined') return defaultSettings;
+  try {
+    const saved = localStorage.getItem(SETTINGS_STORAGE_KEY);
+    if (!saved) return defaultSettings;
+    const parsed = JSON.parse(saved);
+    if (!parsed || typeof parsed !== 'object') return defaultSettings;
+    if ('notifications' in parsed && 'display' in parsed) {
+      const merged = mergeSettings(defaultSettings, parsed as Partial<Settings>);
+      merged.notifications.enabled = merged.notifications.sound ||
+        merged.notifications.desktop ||
+        merged.notifications.mentionsOnly;
+      return merged;
+    }
+    if ('notificationsEnabled' in parsed || 'soundEnabled' in parsed || 'autoScrollMessages' in parsed) {
+      return migrateLegacySettings(parsed as LegacyDashboardSettings);
+    }
+  } catch {
+    // Fall back to defaults
+  }
+  return defaultSettings;
+}
+
+function saveSettingsToStorage(settings: Settings) {
+  if (typeof window === 'undefined') return;
+  try {
+    localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
+  } catch {
+    // Ignore localStorage failures
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+const SettingsContext = createContext<SettingsContextValue | null>(null);
+
+// ---------------------------------------------------------------------------
+// Provider
+// ---------------------------------------------------------------------------
+
+export interface SettingsProviderProps {
+  children: React.ReactNode;
+}
+
+export function SettingsProvider({ children }: SettingsProviderProps) {
+  const [settings, setSettings] = useState<Settings>(() => loadSettingsFromStorage());
+
+  const updateSettings = useCallback((updater: (prev: Settings) => Settings) => {
+    setSettings((prev) => updater(prev));
+  }, []);
+
+  // Persist settings changes
+  useEffect(() => {
+    saveSettingsToStorage(settings);
+  }, [settings]);
+
+  // Apply theme to document
+  useEffect(() => {
+    const applyTheme = (theme: 'light' | 'dark' | 'system') => {
+      let effectiveTheme: 'light' | 'dark';
+
+      if (theme === 'system') {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        effectiveTheme = prefersDark ? 'dark' : 'light';
+      } else {
+        effectiveTheme = theme;
+      }
+
+      const root = document.documentElement;
+      root.classList.remove('theme-light', 'theme-dark');
+      root.classList.add(`theme-${effectiveTheme}`);
+      root.style.colorScheme = effectiveTheme;
+    };
+
+    applyTheme(settings.theme);
+
+    if (settings.theme === 'system') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const handleChange = () => applyTheme('system');
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    }
+  }, [settings.theme]);
+
+  // Request browser notification permissions when enabled
+  useEffect(() => {
+    if (!settings.notifications.desktop) return;
+    if (typeof window === 'undefined' || !('Notification' in window)) return;
+
+    if (Notification.permission === 'granted') return;
+
+    if (Notification.permission === 'denied') {
+      updateSettings((prev) => ({
+        ...prev,
+        notifications: {
+          ...prev.notifications,
+          desktop: false,
+          enabled: prev.notifications.sound || prev.notifications.mentionsOnly,
+        },
+      }));
+      return;
+    }
+
+    Notification.requestPermission().then((permission) => {
+      if (permission !== 'granted') {
+        updateSettings((prev) => ({
+          ...prev,
+          notifications: {
+            ...prev.notifications,
+            desktop: false,
+            enabled: prev.notifications.sound || prev.notifications.mentionsOnly,
+          },
+        }));
+      }
+    }).catch(() => undefined);
+  }, [settings.notifications.desktop, settings.notifications.sound, settings.notifications.mentionsOnly, updateSettings]);
+
+  return (
+    <SettingsContext.Provider value={{ settings, updateSettings }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+export function useSettings(): SettingsContextValue {
+  const ctx = useContext(SettingsContext);
+  if (!ctx) {
+    throw new Error('useSettings must be used within a SettingsProvider');
+  }
+  return ctx;
+}
+
+// Re-export the notification sound helper so App can still use it
+export function playNotificationSound() {
+  if (typeof window === 'undefined') return;
+  const AudioContextConstructor =
+    window.AudioContext ||
+    (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+  if (!AudioContextConstructor) return;
+  try {
+    const context = new AudioContextConstructor();
+    const oscillator = context.createOscillator();
+    const gain = context.createGain();
+    oscillator.type = 'sine';
+    oscillator.frequency.value = 880;
+    gain.gain.value = 0.03;
+    oscillator.connect(gain);
+    gain.connect(context.destination);
+    oscillator.start();
+    oscillator.stop(context.currentTime + 0.12);
+    oscillator.onended = () => {
+      context.close().catch(() => undefined);
+    };
+  } catch {
+    // Audio might be blocked by browser autoplay policies
+  }
+}

package/src/providers/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Provider exports
+ *
+ * Focused context providers extracted from the monolithic App component.
+ */
+
+export { SettingsProvider, useSettings, playNotificationSound } from './SettingsProvider';
+export type { SettingsProviderProps } from './SettingsProvider';
+
+export { CloudWorkspaceProvider, useCloudWorkspace } from './CloudWorkspaceProvider';
+export type { CloudWorkspaceProviderProps, CloudWorkspace } from './CloudWorkspaceProvider';
+
+export { RelayConfigProvider } from './RelayConfigProvider';
+export type { RelayConfigProviderProps } from './RelayConfigProvider';
+
+export { AgentProvider, useAgentContext } from './AgentProvider';
+export type { AgentProviderProps } from './AgentProvider';
+
+export { MessageProvider, useMessageContext, ACTIVITY_FEED_ID } from './MessageProvider';
+export type { MessageProviderProps } from './MessageProvider';
+
+export { ChannelProvider, useChannelContext } from './ChannelProvider';
+export type { ChannelProviderProps, ChannelContextValue } from './ChannelProvider';
+
+export { SendProvider, useSendContext } from './SendProvider';
+export type { SendProviderProps, SendContextValue } from './SendProvider';

package/src/types/index.ts

@@ -4,6 +4,7 @@
 
 import type { AgentStatus } from '../lib/colors';
 import type { ThreadMetadata } from './threading';
+import type { ReactionGroup } from '@relaycast/types';
 
 export type { ThreadMetadata } from './threading';
 
@@ -22,6 +23,7 @@ export interface Agent {
   server?: string; // For fleet view - which server the agent is on
   isProcessing?: boolean; // True when agent is thinking/processing a message
   processingStartedAt?: number; // Timestamp when processing started
+  lastLogLine?: string; // Last log output line from worker_stream
   isSpawned?: boolean; // True if agent was spawned via dashboard (can be killed)
   team?: string; // Optional user-defined team grouping (e.g., "frontend-team", "backend-team")
   agentId?: string; // Unique agent ID for resume functionality
@@ -32,10 +34,10 @@ export interface Agent {
   avatarUrl?: string; // Avatar URL for human users
   authRevoked?: boolean; // True if agent's authentication has been revoked (needs re-login)
   cwd?: string; // Working directory (repo name) the agent was spawned in
-  // Local daemon agent fields
-  isLocal?: boolean; // True if agent is from a linked local daemon
-  daemonName?: string; // Name of the linked daemon
-  machineId?: string; // Machine ID of the linked daemon
+  // Local broker agent fields
+  isLocal?: boolean; // True if agent is from a linked local broker
+  brokerName?: string; // Name of the linked broker
+  machineId?: string; // Machine ID of the linked broker
   // Profile fields for understanding agent behavior
   profile?: AgentProfile;
 }
@@ -101,12 +103,8 @@ export interface Attachment {
 }
 
 
-// Reaction Types
-export interface Reaction {
-  emoji: string;
-  count: number;
-  agents: string[];
-}
+// Reaction Types — sourced from canonical @relaycast/types
+export type Reaction = ReactionGroup;
 
 // Message Types
 export interface Message {
@@ -279,6 +277,8 @@ export interface SpawnAgentRequest {
   shadowTriggers?: SpeakOnTrigger[];
   /** When the shadow should speak */
   shadowSpeakOn?: SpeakOnTrigger[];
+  /** Agent name to continue session from (agent continuity) */
+  continueFrom?: string;
 }
 
 export interface SpawnAgentResponse {