cowork-os 0.3.21 → 0.3.25

package/src/renderer/components/ScheduledTasksSettings.tsx

@@ -221,24 +221,9 @@ function formatDuration(ms: number): string {
 // Styles
 const styles = {
   container: {
-    padding: '24px',
-    maxWidth: '900px',
-  } as React.CSSProperties,
-  header: {
-    marginBottom: '24px',
-  } as React.CSSProperties,
-  title: {
-    fontSize: '24px',
-    fontWeight: 600,
-    color: 'var(--color-text-primary)',
-    marginBottom: '8px',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '12px',
-  } as React.CSSProperties,
-  subtitle: {
-    fontSize: '14px',
-    color: 'var(--color-text-muted)',
+    padding: 0,
+    maxWidth: '100%',
+    width: '100%',
   } as React.CSSProperties,
   statsGrid: {
     display: 'grid',
@@ -266,21 +251,6 @@ const styles = {
     fontWeight: 600,
     color: 'var(--color-text-primary)',
   } as React.CSSProperties,
-  addButton: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: '8px',
-    padding: '12px 20px',
-    backgroundColor: 'var(--color-accent)',
-    color: '#000',
-    border: 'none',
-    borderRadius: 'var(--radius-md)',
-    fontSize: '14px',
-    fontWeight: 600,
-    cursor: 'pointer',
-    transition: 'all 0.2s ease',
-    marginBottom: '24px',
-  } as React.CSSProperties,
   jobCard: {
     backgroundColor: 'var(--color-bg-glass)',
     border: '1px solid var(--color-border-subtle)',
@@ -517,19 +487,7 @@ export function ScheduledTasksSettings() {
   };
 
   if (loading) {
-    return (
-      <div style={styles.container}>
-        <div style={styles.header}>
-          <div style={styles.title}>
-            {Icons.clock}
-            <span>Scheduled Tasks</span>
-          </div>
-        </div>
-        <div style={{ padding: '40px', textAlign: 'center', color: 'var(--color-text-muted)' }}>
-          Loading...
-        </div>
-      </div>
-    );
+    return <div className="settings-loading">Loading scheduled tasks...</div>;
   }
 
   const lastRunJob = jobs.reduce<CronJob | null>((latest, job) => {
@@ -540,15 +498,13 @@ export function ScheduledTasksSettings() {
 
   return (
     <div style={styles.container}>
-      {/* Header */}
-      <div style={styles.header}>
-        <div style={styles.title}>
-          {Icons.clock}
-          <span>Scheduled Tasks</span>
+      <div className="settings-section">
+        <div className="settings-section-header">
+          <h3>Scheduled Tasks</h3>
         </div>
-        <div style={styles.subtitle}>
+        <p className="settings-description">
           Automate tasks to run on a schedule. Results appear in your workspace.
-        </div>
+        </p>
       </div>
 
       {/* Error Banner */}
@@ -599,19 +555,11 @@ export function ScheduledTasksSettings() {
 
       {/* Add Button */}
       <button
-        style={styles.addButton}
+        className="button-primary button-with-icon scheduled-tasks-add"
         onClick={() => {
           setEditingJob(null);
           setShowCreateModal(true);
         }}
-        onMouseOver={(e) => {
-          e.currentTarget.style.backgroundColor = 'var(--color-accent-hover)';
-          e.currentTarget.style.transform = 'translateY(-1px)';
-        }}
-        onMouseOut={(e) => {
-          e.currentTarget.style.backgroundColor = 'var(--color-accent)';
-          e.currentTarget.style.transform = 'translateY(0)';
-        }}
       >
         {Icons.plus}
         <span>New Scheduled Task</span>

package/src/renderer/components/SearchSettings.tsx

@@ -23,8 +23,8 @@ export function SearchSettings({ onStatusChange }: SearchSettingsProps) {
   const [googleApiKey, setGoogleApiKey] = useState('');
   const [googleSearchEngineId, setGoogleSearchEngineId] = useState('');
 
-  // Track which sections are expanded
-  const [expandedProvider, setExpandedProvider] = useState<SearchProviderType | null>(null);
+  // Track which provider is active in the tab view
+  const [activeProvider, setActiveProvider] = useState<SearchProviderType | null>(null);
 
   useEffect(() => {
     loadConfig();
@@ -37,6 +37,12 @@ export function SearchSettings({ onStatusChange }: SearchSettingsProps) {
       setConfigStatus(status);
       setPrimaryProvider(status.primaryProvider);
       setFallbackProvider(status.fallbackProvider);
+      setActiveProvider((prev) => {
+        if (prev && status.providers.some((provider) => provider.type === prev)) {
+          return prev;
+        }
+        return status.primaryProvider ?? status.providers[0]?.type ?? null;
+      });
       onStatusChange?.(status.isConfigured);
     } catch (error) {
       console.error('Failed to load search config:', error);
@@ -89,6 +95,7 @@ export function SearchSettings({ onStatusChange }: SearchSettingsProps) {
 
   const configuredProviders = configStatus?.providers.filter(p => p.configured) || [];
   const hasMultipleProviders = configuredProviders.length > 1;
+  const activeProviderConfig = configStatus?.providers.find(p => p.type === activeProvider) || null;
 
   if (loading) {
     return <div className="settings-loading">Loading search settings...</div>;
@@ -102,129 +109,126 @@ export function SearchSettings({ onStatusChange }: SearchSettingsProps) {
           Add API keys to enable web search. You can configure multiple providers and set a primary and fallback.
         </p>
 
-        <div className="provider-config-list">
+        <div className="llm-provider-tabs">
           {configStatus?.providers.map(provider => (
-            <div key={provider.type} className="provider-config-item">
-              <div
-                className="provider-config-header"
-                onClick={() => setExpandedProvider(
-                  expandedProvider === provider.type ? null : provider.type
-                )}
-              >
-                <div className="provider-config-info">
-                  <span className="provider-name">{provider.name}</span>
-                  <span className={`provider-status ${provider.configured ? 'configured' : 'not-configured'}`}>
-                    {provider.configured ? '✓ Configured' : '○ Not configured'}
-                  </span>
-                </div>
-                <span className="provider-expand-icon">
-                  {expandedProvider === provider.type ? '▼' : '▶'}
-                </span>
-              </div>
+            <button
+              key={provider.type}
+              className={`llm-provider-tab ${activeProvider === provider.type ? 'active' : ''}`}
+              onClick={() => {
+                setActiveProvider(provider.type);
+                setTestResult(null);
+              }}
+            >
+              <span className="llm-provider-tab-label">{provider.name}</span>
+              {provider.configured && <span className="llm-provider-tab-status" />}
+            </button>
+          ))}
+        </div>
 
-              {expandedProvider === provider.type && (
-                <div className="provider-config-form">
-                  <p className="provider-description">{provider.description}</p>
-                  <p className="provider-types">
-                    Supports: {provider.supportedTypes.join(', ')}
-                  </p>
+        {activeProviderConfig ? (
+          <div className="settings-card provider-config-panel">
+            <div className="provider-config-form">
+              <p className="provider-description">{activeProviderConfig.description}</p>
+              <p className="provider-types">
+                Supports: {activeProviderConfig.supportedTypes.join(', ')}
+              </p>
 
-                  {provider.type === 'tavily' && (
-                    <div className="settings-field">
-                      <label>Tavily API Key</label>
-                      <input
-                        type="password"
-                        className="settings-input"
-                        placeholder={provider.configured ? '••••••••••••••••' : 'tvly-...'}
-                        value={tavilyApiKey}
-                        onChange={(e) => setTavilyApiKey(e.target.value)}
-                      />
-                      <p className="settings-hint">
-                        Get your API key from <a href="https://tavily.com/" target="_blank" rel="noopener noreferrer">tavily.com</a>
-                      </p>
-                    </div>
-                  )}
+              {activeProviderConfig.type === 'tavily' && (
+                <div className="settings-field">
+                  <label>Tavily API Key</label>
+                  <input
+                    type="password"
+                    className="settings-input"
+                    placeholder={activeProviderConfig.configured ? '••••••••••••••••' : 'tvly-...'}
+                    value={tavilyApiKey}
+                    onChange={(e) => setTavilyApiKey(e.target.value)}
+                  />
+                  <p className="settings-hint">
+                    Get your API key from <a href="https://tavily.com/" target="_blank" rel="noopener noreferrer">tavily.com</a>
+                  </p>
+                </div>
+              )}
 
-                  {provider.type === 'brave' && (
-                    <div className="settings-field">
-                      <label>Brave Search API Key</label>
-                      <input
-                        type="password"
-                        className="settings-input"
-                        placeholder={provider.configured ? '••••••••••••••••' : 'BSA...'}
-                        value={braveApiKey}
-                        onChange={(e) => setBraveApiKey(e.target.value)}
-                      />
-                      <p className="settings-hint">
-                        Get your API key from <a href="https://brave.com/search/api/" target="_blank" rel="noopener noreferrer">brave.com/search/api</a>
-                      </p>
-                    </div>
-                  )}
+              {activeProviderConfig.type === 'brave' && (
+                <div className="settings-field">
+                  <label>Brave Search API Key</label>
+                  <input
+                    type="password"
+                    className="settings-input"
+                    placeholder={activeProviderConfig.configured ? '••••••••••••••••' : 'BSA...'}
+                    value={braveApiKey}
+                    onChange={(e) => setBraveApiKey(e.target.value)}
+                  />
+                  <p className="settings-hint">
+                    Get your API key from <a href="https://brave.com/search/api/" target="_blank" rel="noopener noreferrer">brave.com/search/api</a>
+                  </p>
+                </div>
+              )}
 
-                  {provider.type === 'serpapi' && (
-                    <div className="settings-field">
-                      <label>SerpAPI Key</label>
-                      <input
-                        type="password"
-                        className="settings-input"
-                        placeholder={provider.configured ? '••••••••••••••••' : 'Enter API key'}
-                        value={serpapiApiKey}
-                        onChange={(e) => setSerpapiApiKey(e.target.value)}
-                      />
-                      <p className="settings-hint">
-                        Get your API key from <a href="https://serpapi.com/" target="_blank" rel="noopener noreferrer">serpapi.com</a>
-                      </p>
-                    </div>
-                  )}
+              {activeProviderConfig.type === 'serpapi' && (
+                <div className="settings-field">
+                  <label>SerpAPI Key</label>
+                  <input
+                    type="password"
+                    className="settings-input"
+                    placeholder={activeProviderConfig.configured ? '••••••••••••••••' : 'Enter API key'}
+                    value={serpapiApiKey}
+                    onChange={(e) => setSerpapiApiKey(e.target.value)}
+                  />
+                  <p className="settings-hint">
+                    Get your API key from <a href="https://serpapi.com/" target="_blank" rel="noopener noreferrer">serpapi.com</a>
+                  </p>
+                </div>
+              )}
 
-                  {provider.type === 'google' && (
-                    <>
-                      <div className="settings-field">
-                        <label>Google API Key</label>
-                        <input
-                          type="password"
-                          className="settings-input"
-                          placeholder={provider.configured ? '••••••••••••••••' : 'AIza...'}
-                          value={googleApiKey}
-                          onChange={(e) => setGoogleApiKey(e.target.value)}
-                        />
-                      </div>
-                      <div className="settings-field">
-                        <label>Search Engine ID</label>
-                        <input
-                          type="text"
-                          className="settings-input"
-                          placeholder="Enter Search Engine ID"
-                          value={googleSearchEngineId}
-                          onChange={(e) => setGoogleSearchEngineId(e.target.value)}
-                        />
-                        <p className="settings-hint">
-                          Get your credentials from <a href="https://developers.google.com/custom-search/v1/introduction" target="_blank" rel="noopener noreferrer">Google Custom Search</a>
-                        </p>
-                      </div>
-                    </>
-                  )}
+              {activeProviderConfig.type === 'google' && (
+                <>
+                  <div className="settings-field">
+                    <label>Google API Key</label>
+                    <input
+                      type="password"
+                      className="settings-input"
+                      placeholder={activeProviderConfig.configured ? '••••••••••••••••' : 'AIza...'}
+                      value={googleApiKey}
+                      onChange={(e) => setGoogleApiKey(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-field">
+                    <label>Search Engine ID</label>
+                    <input
+                      type="text"
+                      className="settings-input"
+                      placeholder="Enter Search Engine ID"
+                      value={googleSearchEngineId}
+                      onChange={(e) => setGoogleSearchEngineId(e.target.value)}
+                    />
+                    <p className="settings-hint">
+                      Get your credentials from <a href="https://developers.google.com/custom-search/v1/introduction" target="_blank" rel="noopener noreferrer">Google Custom Search</a>
+                    </p>
+                  </div>
+                </>
+              )}
 
-                  {provider.configured && (
-                    <button
-                      className="button-small button-secondary"
-                      onClick={() => handleTestProvider(provider.type)}
-                      disabled={testingProvider === provider.type}
-                    >
-                      {testingProvider === provider.type ? 'Testing...' : 'Test Connection'}
-                    </button>
-                  )}
+              {activeProviderConfig.configured && (
+                <button
+                  className="button-small button-secondary"
+                  onClick={() => handleTestProvider(activeProviderConfig.type)}
+                  disabled={testingProvider === activeProviderConfig.type}
+                >
+                  {testingProvider === activeProviderConfig.type ? 'Testing...' : 'Test Connection'}
+                </button>
+              )}
 
-                  {testResult?.provider === provider.type && (
-                    <div className={`test-result-inline ${testResult.success ? 'success' : 'error'}`}>
-                      {testResult.success ? '✓ Connection successful' : `✗ ${testResult.error}`}
-                    </div>
-                  )}
+              {testResult?.provider === activeProviderConfig.type && (
+                <div className={`test-result-inline ${testResult.success ? 'success' : 'error'}`}>
+                  {testResult.success ? '✓ Connection successful' : `✗ ${testResult.error}`}
                 </div>
               )}
             </div>
-          ))}
-        </div>
+          </div>
+        ) : (
+          <div className="settings-empty">Select a provider to configure.</div>
+        )}
       </div>
 
       {configuredProviders.length > 0 && (