cowork-os 0.3.21

package/src/renderer/components/UpdateSettings.tsx

@@ -0,0 +1,295 @@
+import { useState, useEffect } from 'react';
+
+interface VersionInfo {
+  version: string;
+  isDev: boolean;
+  isGitRepo: boolean;
+  isNpmGlobal: boolean;
+  gitBranch?: string;
+  gitCommit?: string;
+}
+
+interface UpdateInfo {
+  available: boolean;
+  currentVersion: string;
+  latestVersion: string;
+  releaseNotes?: string;
+  releaseUrl?: string;
+  publishedAt?: string;
+  updateMode: 'git' | 'npm' | 'electron-updater';
+}
+
+interface UpdateProgress {
+  phase: 'checking' | 'downloading' | 'extracting' | 'installing' | 'complete' | 'error';
+  percent?: number;
+  message: string;
+}
+
+export function UpdateSettings() {
+  const [versionInfo, setVersionInfo] = useState<VersionInfo | null>(null);
+  const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null);
+  const [progress, setProgress] = useState<UpdateProgress | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [checking, setChecking] = useState(false);
+  const [updating, setUpdating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [updateReady, setUpdateReady] = useState(false);
+
+  useEffect(() => {
+    loadVersionInfo();
+
+    // Subscribe to update events
+    const unsubProgress = window.electronAPI.onUpdateProgress((prog) => {
+      setProgress(prog);
+      if (prog.phase === 'error') {
+        setError(prog.message);
+        setUpdating(false);
+      }
+    });
+
+    const unsubDownloaded = window.electronAPI.onUpdateDownloaded(() => {
+      setUpdateReady(true);
+      setUpdating(false);
+    });
+
+    const unsubError = window.electronAPI.onUpdateError((err) => {
+      setError(err.error);
+      setUpdating(false);
+    });
+
+    return () => {
+      unsubProgress();
+      unsubDownloaded();
+      unsubError();
+    };
+  }, []);
+
+  const loadVersionInfo = async () => {
+    try {
+      setLoading(true);
+      const info = await window.electronAPI.getAppVersion();
+      setVersionInfo(info);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCheckForUpdates = async () => {
+    try {
+      setChecking(true);
+      setError(null);
+      setUpdateInfo(null);
+      const info = await window.electronAPI.checkForUpdates();
+      setUpdateInfo(info);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setChecking(false);
+    }
+  };
+
+  const handleDownloadUpdate = async () => {
+    if (!updateInfo) return;
+
+    try {
+      setUpdating(true);
+      setError(null);
+      await window.electronAPI.downloadUpdate(updateInfo);
+    } catch (err: any) {
+      setError(err.message);
+      setUpdating(false);
+    }
+  };
+
+  const handleInstallUpdate = async () => {
+    try {
+      await window.electronAPI.installUpdate();
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  if (loading) {
+    return <div className="settings-loading">Loading version info...</div>;
+  }
+
+  return (
+    <div className="update-settings">
+      <div className="settings-section">
+        <h3>Current Version</h3>
+        <div className="version-info">
+          <div className="version-number">
+            v{versionInfo?.version || 'Unknown'}
+          </div>
+          {versionInfo?.isDev && (
+            <span className="version-badge dev">Development Mode</span>
+          )}
+          {versionInfo?.isNpmGlobal && (
+            <span className="version-badge npm">Installed via npm</span>
+          )}
+          {versionInfo?.isGitRepo && (
+            <div className="git-info">
+              <span className="git-branch">{versionInfo.gitBranch}</span>
+              {versionInfo.gitCommit && (
+                <span className="git-commit">@ {versionInfo.gitCommit}</span>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="settings-section">
+        <h3>Check for Updates</h3>
+        <p className="settings-description">
+          {versionInfo?.isNpmGlobal
+            ? 'Updates will be installed via npm.'
+            : versionInfo?.isGitRepo
+            ? 'Updates will be pulled from GitHub and rebuilt automatically.'
+            : 'Updates will be downloaded and installed automatically.'}
+        </p>
+
+        <div className="update-actions">
+          <button
+            className="button-primary"
+            onClick={handleCheckForUpdates}
+            disabled={checking || updating}
+          >
+            {checking ? 'Checking...' : 'Check for Updates'}
+          </button>
+        </div>
+
+        {updateInfo && (
+          <div className={`update-status ${updateInfo.available ? 'available' : 'up-to-date'}`}>
+            {updateInfo.available ? (
+              <>
+                <div className="update-header">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
+                  </svg>
+                  <span>Update Available!</span>
+                </div>
+                <div className="update-versions">
+                  <span className="current">Current: {updateInfo.currentVersion}</span>
+                  <span className="arrow">→</span>
+                  <span className="latest">Latest: {updateInfo.latestVersion}</span>
+                </div>
+                {updateInfo.publishedAt && (
+                  <div className="update-date">
+                    Released: {new Date(updateInfo.publishedAt).toLocaleDateString()}
+                  </div>
+                )}
+                {updateInfo.releaseNotes && (
+                  <div className="release-notes">
+                    <h4>Release Notes</h4>
+                    <div className="release-notes-content">
+                      {updateInfo.releaseNotes.split('\n').slice(0, 10).join('\n')}
+                      {updateInfo.releaseNotes.split('\n').length > 10 && '...'}
+                    </div>
+                  </div>
+                )}
+                {updateInfo.releaseUrl && (
+                  <a
+                    href={updateInfo.releaseUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="release-link"
+                  >
+                    View on GitHub →
+                  </a>
+                )}
+                <div className="update-mode">
+                  Update method: <strong>{
+                    updateInfo.updateMode === 'npm' ? 'npm update' :
+                    updateInfo.updateMode === 'git' ? 'Git Pull + Rebuild' : 'Auto-download'
+                  }</strong>
+                </div>
+              </>
+            ) : (
+              <div className="update-header up-to-date">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                  <path d="M22 4L12 14.01l-3-3" />
+                </svg>
+                <span>You're up to date!</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {progress && (
+          <div className="update-progress">
+            <div className="progress-message">{progress.message}</div>
+            {progress.percent !== undefined && (
+              <div className="progress-bar">
+                <div
+                  className="progress-fill"
+                  style={{ width: `${progress.percent}%` }}
+                />
+              </div>
+            )}
+          </div>
+        )}
+
+        {error && (
+          <div className="update-error">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <circle cx="12" cy="12" r="10" />
+              <line x1="15" y1="9" x2="9" y2="15" />
+              <line x1="9" y1="9" x2="15" y2="15" />
+            </svg>
+            {error}
+          </div>
+        )}
+
+        {updateInfo?.available && !updating && !updateReady && (
+          <button
+            className="button-primary update-button"
+            onClick={handleDownloadUpdate}
+            disabled={updating}
+          >
+            {versionInfo?.isNpmGlobal
+              ? 'Update Now (npm install)'
+              : versionInfo?.isGitRepo
+              ? 'Update Now (Git Pull + Rebuild)'
+              : 'Download & Install Update'}
+          </button>
+        )}
+
+        {updateReady && (
+          <button
+            className="button-primary update-button restart"
+            onClick={handleInstallUpdate}
+          >
+            Restart to Apply Update
+          </button>
+        )}
+      </div>
+
+      <div className="settings-section">
+        <h3>Manual Update</h3>
+        <p className="settings-description">
+          You can also manually update by running {versionInfo?.isNpmGlobal ? 'this command' : 'these commands'} in the terminal:
+        </p>
+        <div className="manual-update-commands">
+          {versionInfo?.isNpmGlobal ? (
+            <code>
+              npm update -g cowork-os
+            </code>
+          ) : (
+            <code>
+              git fetch origin{'\n'}
+              git pull origin main{'\n'}
+              npm install{'\n'}
+              npm run build
+            </code>
+          )}
+        </div>
+        <p className="settings-hint">
+          After updating, restart the application to apply changes.
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/renderer/components/VoiceIndicator.tsx

@@ -0,0 +1,270 @@
+import { useState, useEffect } from 'react';
+import { VoiceState } from '../../shared/types';
+
+interface VoiceIndicatorProps {
+  /** Whether voice mode is enabled */
+  enabled?: boolean;
+  /** Position of the indicator */
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  /** Whether to show even when inactive */
+  showWhenInactive?: boolean;
+  /** Click handler */
+  onClick?: () => void;
+}
+
+export function VoiceIndicator({
+  enabled = false,
+  position = 'bottom-right',
+  showWhenInactive = false,
+  onClick,
+}: VoiceIndicatorProps) {
+  const [voiceState, setVoiceState] = useState<VoiceState>({
+    isActive: false,
+    isListening: false,
+    isSpeaking: false,
+    isProcessing: false,
+    audioLevel: 0,
+  });
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    // Subscribe to voice events
+    const unsubscribe = window.electronAPI.onVoiceEvent((event) => {
+      if (event.type === 'voice:state-changed') {
+        setVoiceState(event.data as VoiceState);
+      }
+    });
+
+    // Get initial state
+    window.electronAPI.getVoiceState().then(setVoiceState).catch(console.error);
+
+    return () => {
+      unsubscribe();
+    };
+  }, [enabled]);
+
+  // Don't render if disabled and not showing when inactive
+  if (!enabled && !showWhenInactive) {
+    return null;
+  }
+
+  // Don't render if inactive and not showing when inactive
+  if (!voiceState.isActive && !voiceState.isSpeaking && !voiceState.isListening && !showWhenInactive) {
+    return null;
+  }
+
+  const getStatusText = () => {
+    if (!enabled) return 'Voice Disabled';
+    if (voiceState.isSpeaking) return 'Speaking';
+    if (voiceState.isListening) return 'Listening';
+    if (voiceState.isProcessing) return 'Processing';
+    if (voiceState.isActive) return 'Voice Ready';
+    return 'Voice Inactive';
+  };
+
+  const getStatusClass = () => {
+    if (!enabled) return 'disabled';
+    if (voiceState.isSpeaking) return 'speaking';
+    if (voiceState.isListening) return 'listening';
+    if (voiceState.isProcessing) return 'processing';
+    if (voiceState.isActive) return 'active';
+    return 'inactive';
+  };
+
+  return (
+    <div
+      className={`voice-indicator ${position} ${getStatusClass()}`}
+      onClick={onClick}
+      title={getStatusText()}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          onClick?.();
+        }
+      }}
+    >
+      {/* Icon */}
+      <div className="voice-indicator-icon">
+        {voiceState.isSpeaking ? (
+          <SpeakingIcon audioLevel={voiceState.audioLevel} />
+        ) : voiceState.isListening ? (
+          <MicrophoneIcon audioLevel={voiceState.audioLevel} />
+        ) : voiceState.isProcessing ? (
+          <ProcessingIcon />
+        ) : (
+          <MicrophoneOffIcon />
+        )}
+      </div>
+
+      {/* Pulse animation when active */}
+      {(voiceState.isSpeaking || voiceState.isListening) && (
+        <div className="voice-indicator-pulse" />
+      )}
+
+      {/* Partial transcript preview */}
+      {voiceState.partialTranscript && (
+        <div className="voice-indicator-transcript">
+          {voiceState.partialTranscript}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// SVG Icons
+function MicrophoneIcon({ audioLevel = 0 }: { audioLevel?: number }) {
+  const scale = 1 + (audioLevel / 100) * 0.2;
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ transform: `scale(${scale})` }}
+    >
+      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+      <line x1="12" y1="19" x2="12" y2="23" />
+      <line x1="8" y1="23" x2="16" y2="23" />
+    </svg>
+  );
+}
+
+function MicrophoneOffIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <line x1="1" y1="1" x2="23" y2="23" />
+      <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" />
+      <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23" />
+      <line x1="12" y1="19" x2="12" y2="23" />
+      <line x1="8" y1="23" x2="16" y2="23" />
+    </svg>
+  );
+}
+
+function SpeakingIcon({ audioLevel = 0 }: { audioLevel?: number }) {
+  const wave1Height = 4 + (audioLevel / 100) * 6;
+  const wave2Height = 8 + (audioLevel / 100) * 4;
+  const wave3Height = 4 + (audioLevel / 100) * 6;
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+      <line x1="15" y1={12 - wave1Height / 2} x2="15" y2={12 + wave1Height / 2} />
+      <line x1="18" y1={12 - wave2Height / 2} x2="18" y2={12 + wave2Height / 2} />
+      <line x1="21" y1={12 - wave3Height / 2} x2="21" y2={12 + wave3Height / 2} />
+    </svg>
+  );
+}
+
+function ProcessingIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="processing-spin"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 6v6l4 2" />
+    </svg>
+  );
+}
+
+// Mini version for status bar
+export function VoiceIndicatorMini({
+  enabled = false,
+  onClick,
+}: {
+  enabled?: boolean;
+  onClick?: () => void;
+}) {
+  const [voiceState, setVoiceState] = useState<VoiceState>({
+    isActive: false,
+    isListening: false,
+    isSpeaking: false,
+    isProcessing: false,
+    audioLevel: 0,
+  });
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const unsubscribe = window.electronAPI.onVoiceEvent((event) => {
+      if (event.type === 'voice:state-changed') {
+        setVoiceState(event.data as VoiceState);
+      }
+    });
+
+    window.electronAPI.getVoiceState().then(setVoiceState).catch(console.error);
+
+    return () => {
+      unsubscribe();
+    };
+  }, [enabled]);
+
+  if (!enabled) return null;
+
+  const getStatusClass = () => {
+    if (voiceState.isSpeaking) return 'speaking';
+    if (voiceState.isListening) return 'listening';
+    if (voiceState.isProcessing) return 'processing';
+    if (voiceState.isActive) return 'active';
+    return 'inactive';
+  };
+
+  return (
+    <button
+      className={`voice-indicator-mini ${getStatusClass()}`}
+      onClick={onClick}
+      title={`Voice: ${getStatusClass()}`}
+    >
+      {voiceState.isSpeaking ? (
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+          <line x1="15" y1="9" x2="15" y2="15" stroke="currentColor" strokeWidth="2" />
+          <line x1="18" y1="7" x2="18" y2="17" stroke="currentColor" strokeWidth="2" />
+        </svg>
+      ) : voiceState.isListening ? (
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+        </svg>
+      ) : (
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" opacity="0.5" />
+          <path d="M19 10v2a7 7 0 0 1-14 0v-2" opacity="0.5" />
+        </svg>
+      )}
+    </button>
+  );
+}