cowork-os 0.3.21 → 0.3.23

package/src/renderer/components/MainContent.tsx

@@ -12,6 +12,7 @@ import { getMessage } from '../utils/agentMessages';
 const VERBOSE_STEPS_KEY = 'cowork:verboseSteps';
 const TASK_TITLE_MAX_LENGTH = 50;
 const TITLE_ELLIPSIS_REGEX = /(\.\.\.|\u2026)$/u;
+const MAX_ATTACHMENTS = 10;
 
 // Important event types shown in non-verbose mode
 // These are high-level steps that represent meaningful progress
@@ -49,6 +50,46 @@ const buildTaskTitle = (text: string): string => {
   return `${trimmed.slice(0, TASK_TITLE_MAX_LENGTH)}...`;
 };
 
+type SelectedFileInfo = {
+  path: string;
+  name: string;
+  size: number;
+  mimeType?: string;
+};
+
+type PendingAttachment = SelectedFileInfo & {
+  id: string;
+};
+
+type ImportedAttachment = {
+  relativePath: string;
+  fileName: string;
+  size: number;
+  mimeType?: string;
+};
+
+const formatFileSize = (size: number): string => {
+  if (size < 1024) return `${size} B`;
+  const kb = size / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB`;
+  const mb = kb / 1024;
+  return `${mb.toFixed(1)} MB`;
+};
+
+const buildAttachmentSummary = (attachments: ImportedAttachment[]): string => {
+  if (attachments.length === 0) return '';
+  const lines = attachments.map((attachment) => (
+    `- ${attachment.fileName} (${attachment.relativePath})`
+  ));
+  return `Attached files (relative to workspace):\n${lines.join('\n')}`;
+};
+
+const composeMessageWithAttachments = (text: string, attachments: ImportedAttachment[]): string => {
+  const base = text.trim() || 'Please review the attached files.';
+  const summary = buildAttachmentSummary(attachments);
+  return summary ? `${base}\n\n${summary}` : base;
+};
+
 type MentionOption = {
   type: 'agent' | 'everyone';
   id: string;
@@ -526,7 +567,7 @@ interface GoalModeOptions {
   maxAttempts?: number;
 }
 
-type SettingsTab = 'appearance' | 'llm' | 'search' | 'telegram' | 'slack' | 'whatsapp' | 'teams' | 'morechannels' | 'updates' | 'guardrails' | 'queue' | 'skills' | 'voice';
+type SettingsTab = 'appearance' | 'llm' | 'search' | 'telegram' | 'slack' | 'whatsapp' | 'teams' | 'x' | 'morechannels' | 'integrations' | 'updates' | 'guardrails' | 'queue' | 'skills' | 'voice';
 
 interface MainContentProps {
   task: Task | undefined;
@@ -539,6 +580,7 @@ interface MainContentProps {
   onSelectWorkspace?: (workspace: Workspace) => void;
   onOpenSettings?: (tab?: SettingsTab) => void;
   onStopTask?: () => void;
+  onOpenBrowserView?: (url?: string) => void;
   selectedModel: string;
   availableModels: LLMModelInfo[];
   onModelChange: (model: string) => void;
@@ -553,11 +595,15 @@ interface ActiveCommand {
   startTimestamp: number; // When the command started, for positioning in timeline
 }
 
-export function MainContent({ task, selectedTaskId, workspace, events, onSendMessage, onCreateTask, onChangeWorkspace, onSelectWorkspace, onOpenSettings, onStopTask, selectedModel, availableModels, onModelChange }: MainContentProps) {
+export function MainContent({ task, selectedTaskId, workspace, events, onSendMessage, onCreateTask, onChangeWorkspace, onSelectWorkspace, onOpenSettings, onStopTask, onOpenBrowserView, selectedModel, availableModels, onModelChange }: MainContentProps) {
   // Agent personality context for personalized messages
   const agentContext = useAgentContext();
   const [pendingApproval, setPendingApproval] = useState<ApprovalRequest | null>(null);
   const [inputValue, setInputValue] = useState('');
+  const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
+  const [attachmentError, setAttachmentError] = useState<string | null>(null);
+  const [isDraggingFiles, setIsDraggingFiles] = useState(false);
+  const [isUploadingAttachments, setIsUploadingAttachments] = useState(false);
   const [agentRoles, setAgentRoles] = useState<AgentRoleData[]>([]);
   const [mentionQuery, setMentionQuery] = useState('');
   const [mentionTarget, setMentionTarget] = useState<{ start: number; end: number } | null>(null);
@@ -1220,37 +1266,192 @@ export function MainContent({ task, selectedTaskId, workspace, events, onSendMes
     }
   };
 
-  const handleSend = () => {
-    if (inputValue.trim()) {
-      // Use selectedTaskId to determine if we should follow-up or create new task
-      // This fixes the bug where old tasks (beyond the 100 most recent) would create new tasks
-      // instead of sending follow-up messages
-      if (!selectedTaskId && onCreateTask) {
-        // No task selected - create new task with optional Goal Mode options
-        const trimmedInput = inputValue.trim();
-        const title = buildTaskTitle(trimmedInput);
-        const options: GoalModeOptions | undefined = goalModeEnabled && verificationCommand
-          ? {
-              successCriteria: { type: 'shell_command' as const, command: verificationCommand },
-              maxAttempts,
-            }
-          : undefined;
-        onCreateTask(title, trimmedInput, options);
-        // Reset Goal Mode state
-        setGoalModeEnabled(false);
-        setVerificationCommand('');
-        setMaxAttempts(3);
-      } else {
-        // Task is selected (even if not in current list) - send follow-up message
-        onSendMessage(inputValue.trim());
+  const reportAttachmentError = (message: string) => {
+    setAttachmentError(message);
+    window.setTimeout(() => setAttachmentError(null), 5000);
+  };
+
+  const appendPendingAttachments = (files: SelectedFileInfo[]) => {
+    if (files.length === 0) return;
+    setPendingAttachments((prev) => {
+      const existingPaths = new Set(prev.map((attachment) => attachment.path));
+      const next = [...prev];
+      for (const file of files) {
+        if (existingPaths.has(file.path)) continue;
+        if (next.length >= MAX_ATTACHMENTS) {
+          reportAttachmentError(`You can attach up to ${MAX_ATTACHMENTS} files.`);
+          break;
+        }
+        next.push({
+          ...file,
+          id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        });
+        existingPaths.add(file.path);
       }
-      setInputValue('');
-      setMentionOpen(false);
-      setMentionQuery('');
-      setMentionTarget(null);
+      return next;
+    });
+  };
+
+  const handleAttachFiles = async () => {
+    try {
+      const files = await window.electronAPI.selectFiles();
+      if (!files || files.length === 0) return;
+      appendPendingAttachments(files);
+    } catch (error) {
+      console.error('Failed to select files:', error);
+      reportAttachmentError('Failed to add attachments. Please try again.');
     }
   };
 
+  const handleRemoveAttachment = (id: string) => {
+    setPendingAttachments((prev) => prev.filter((attachment) => attachment.id !== id));
+  };
+
+  const isFileDrag = (event: React.DragEvent) =>
+    Array.from(event.dataTransfer.types || []).includes('Files');
+
+  const handleDragOver = (event: React.DragEvent) => {
+    if (!isFileDrag(event)) return;
+    event.preventDefault();
+    setIsDraggingFiles(true);
+  };
+
+  const handleDragLeave = (event: React.DragEvent) => {
+    if (!isFileDrag(event)) return;
+    event.preventDefault();
+    setIsDraggingFiles(false);
+  };
+
+  const handleDrop = (event: React.DragEvent) => {
+    if (!isFileDrag(event)) return;
+    event.preventDefault();
+    setIsDraggingFiles(false);
+
+    const droppedFiles = Array.from(event.dataTransfer.files || []);
+    const files: SelectedFileInfo[] = [];
+    let missingPath = false;
+
+    droppedFiles.forEach((file) => {
+      const filePath = (file as File & { path?: string }).path;
+      if (!filePath) {
+        missingPath = true;
+        return;
+      }
+      files.push({
+        path: filePath,
+        name: file.name,
+        size: file.size,
+        mimeType: file.type || undefined,
+      });
+    });
+
+    if (missingPath) {
+      reportAttachmentError('Drag-and-drop is not supported for these files. Use the attach button instead.');
+    }
+    appendPendingAttachments(files);
+  };
+
+  const renderAttachmentPanel = () => {
+    if (pendingAttachments.length === 0 && !attachmentError) return null;
+    return (
+      <div className="attachment-panel">
+        {attachmentError && <div className="attachment-error">{attachmentError}</div>}
+        {pendingAttachments.length > 0 && (
+          <div className="attachment-list">
+            {pendingAttachments.map((attachment) => (
+              <div className="attachment-chip" key={attachment.id}>
+                <span className="attachment-icon">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                    <path d="M14 2v6h6" />
+                  </svg>
+                </span>
+                <span className="attachment-name" title={attachment.name}>{attachment.name}</span>
+                <span className="attachment-size">{formatFileSize(attachment.size)}</span>
+                <button
+                  className="attachment-remove"
+                  onClick={() => handleRemoveAttachment(attachment.id)}
+                  title="Remove attachment"
+                  disabled={isUploadingAttachments}
+                >
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M18 6L6 18M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const importAttachmentsToWorkspace = async (): Promise<ImportedAttachment[]> => {
+    if (pendingAttachments.length === 0) return [];
+    if (!workspace) {
+      throw new Error('Select a workspace before attaching files.');
+    }
+    return window.electronAPI.importFilesToWorkspace({
+      workspaceId: workspace.id,
+      files: pendingAttachments.map((attachment) => attachment.path),
+    });
+  };
+
+  const handleSend = async () => {
+    const trimmedInput = inputValue.trim();
+    const hasAttachments = pendingAttachments.length > 0;
+
+    if (!trimmedInput && !hasAttachments) return;
+
+    let importedAttachments: ImportedAttachment[] = [];
+
+    if (hasAttachments) {
+      setIsUploadingAttachments(true);
+      try {
+        importedAttachments = await importAttachmentsToWorkspace();
+      } catch (error) {
+        console.error('Failed to import attachments:', error);
+        reportAttachmentError(error instanceof Error ? error.message : 'Failed to upload attachments.');
+        setIsUploadingAttachments(false);
+        return;
+      } finally {
+        setIsUploadingAttachments(false);
+      }
+    }
+
+    const message = composeMessageWithAttachments(trimmedInput, importedAttachments);
+
+    // Use selectedTaskId to determine if we should follow-up or create new task
+    // This fixes the bug where old tasks (beyond the 100 most recent) would create new tasks
+    // instead of sending follow-up messages
+    if (!selectedTaskId && onCreateTask) {
+      // No task selected - create new task with optional Goal Mode options
+      const titleSource = trimmedInput || (pendingAttachments[0]?.name ? `Review ${pendingAttachments[0].name}` : 'New task');
+      const title = buildTaskTitle(titleSource);
+      const options: GoalModeOptions | undefined = goalModeEnabled && verificationCommand
+        ? {
+            successCriteria: { type: 'shell_command' as const, command: verificationCommand },
+            maxAttempts,
+          }
+        : undefined;
+      onCreateTask(title, message, options);
+      // Reset Goal Mode state
+      setGoalModeEnabled(false);
+      setVerificationCommand('');
+      setMaxAttempts(3);
+    } else {
+      // Task is selected (even if not in current list) - send follow-up message
+      onSendMessage(message);
+    }
+
+    setInputValue('');
+    setPendingAttachments([]);
+    setAttachmentError(null);
+    setMentionOpen(false);
+    setMentionQuery('');
+    setMentionTarget(null);
+  };
+
   const handleClearQueue = () => {
     setQueuedMessage(null);
   };
@@ -1442,7 +1643,7 @@ export function MainContent({ task, selectedTaskId, workspace, events, onSendMes
 
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
-      handleSend();
+      void handleSend();
     }
   };
 
@@ -1550,7 +1751,14 @@ export function MainContent({ task, selectedTaskId, workspace, events, onSendMes
             </div>
 
             {/* Input Area */}
-            <div className="welcome-input-container cli-input-container">
+            {renderAttachmentPanel()}
+            <div
+              className={`welcome-input-container cli-input-container ${isDraggingFiles ? 'drag-over' : ''}`}
+              onDragOver={handleDragOver}
+              onDragEnter={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+            >
               {showVoiceNotConfigured && (
                 <div className="voice-not-configured-banner">
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -1779,6 +1987,16 @@ export function MainContent({ task, selectedTaskId, workspace, events, onSendMes
                       </div>
                     )}
                   </div>
+                  <button
+                    className="attachment-btn"
+                    onClick={handleAttachFiles}
+                    disabled={isUploadingAttachments}
+                    title="Attach files"
+                  >
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M21.44 11.05l-8.49 8.49a5 5 0 0 1-7.07-7.07l8.49-8.49a3 3 0 0 1 4.24 4.24l-8.49 8.49a1 1 0 0 1-1.41-1.41l7.78-7.78" />
+                    </svg>
+                  </button>
                   <button
                     className={`voice-input-btn ${voiceInput.state}`}
                     onClick={voiceInput.toggleRecording}
@@ -1813,7 +2031,7 @@ export function MainContent({ task, selectedTaskId, workspace, events, onSendMes
                   <button
                     className="lets-go-btn lets-go-btn-sm"
                     onClick={handleSend}
-                    disabled={!inputValue.trim()}
+                    disabled={(!inputValue.trim() && pendingAttachments.length === 0) || isUploadingAttachments}
                   >
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                       <path d="M12 19V5M5 12l7-7 7 7" />
@@ -1925,6 +2143,7 @@ export function MainContent({ task, selectedTaskId, workspace, events, onSendMes
                       session={item.session}
                       onClose={() => handleCanvasClose(item.session.id)}
                       forceSnapshot={item.forceSnapshot}
+                      onOpenBrowser={onOpenBrowserView}
                     />
                   );
                 }
@@ -2080,7 +2299,14 @@ export function MainContent({ task, selectedTaskId, workspace, events, onSendMes
 
       {/* Footer with Input */}
       <div className="main-footer">
-        <div className="input-container">
+        {renderAttachmentPanel()}
+        <div
+          className={`input-container ${isDraggingFiles ? 'drag-over' : ''}`}
+          onDragOver={handleDragOver}
+          onDragEnter={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
           {/* Queued message display */}
           {queuedMessage && (
             <div className="queued-message-frame">
@@ -2171,6 +2397,16 @@ export function MainContent({ task, selectedTaskId, workspace, events, onSendMes
                 selectedModel={selectedModel}
                 onModelChange={onModelChange}
               />
+              <button
+                className="attachment-btn"
+                onClick={handleAttachFiles}
+                disabled={isUploadingAttachments}
+                title="Attach files"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M21.44 11.05l-8.49 8.49a5 5 0 0 1-7.07-7.07l8.49-8.49a3 3 0 0 1 4.24 4.24l-8.49 8.49a1 1 0 0 1-1.41-1.41l7.78-7.78" />
+                </svg>
+              </button>
               <button
                 className={`voice-input-btn ${voiceInput.state}`}
                 onClick={voiceInput.toggleRecording}
@@ -2205,7 +2441,7 @@ export function MainContent({ task, selectedTaskId, workspace, events, onSendMes
               <button
                 className="lets-go-btn lets-go-btn-sm"
                 onClick={handleSend}
-                disabled={!inputValue.trim()}
+                disabled={(!inputValue.trim() && pendingAttachments.length === 0) || isUploadingAttachments}
                 title="Send message"
               >
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

package/src/renderer/components/NotionSettings.tsx

@@ -0,0 +1,231 @@
+import { useEffect, useState } from 'react';
+import { NotionSettingsData } from '../../shared/types';
+
+export function NotionSettings() {
+  const [settings, setSettings] = useState<NotionSettingsData | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<{ success: boolean; error?: string; name?: string; userId?: string } | null>(null);
+  const [status, setStatus] = useState<{ configured: boolean; connected: boolean; name?: string; error?: string } | null>(null);
+  const [statusLoading, setStatusLoading] = useState(false);
+
+  useEffect(() => {
+    loadSettings();
+    refreshStatus();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      const loaded = await window.electronAPI.getNotionSettings();
+      setSettings(loaded);
+    } catch (error) {
+      console.error('Failed to load Notion settings:', error);
+    }
+  };
+
+  const updateSettings = (updates: Partial<NotionSettingsData>) => {
+    if (!settings) return;
+    setSettings({ ...settings, ...updates });
+  };
+
+  const handleSave = async () => {
+    if (!settings) return;
+    setSaving(true);
+    setTestResult(null);
+    try {
+      const payload: NotionSettingsData = { ...settings };
+      await window.electronAPI.saveNotionSettings(payload);
+      setSettings(payload);
+      await refreshStatus();
+    } catch (error) {
+      console.error('Failed to save Notion settings:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const refreshStatus = async () => {
+    try {
+      setStatusLoading(true);
+      const result = await window.electronAPI.getNotionStatus();
+      setStatus(result);
+    } catch (error) {
+      console.error('Failed to load Notion status:', error);
+    } finally {
+      setStatusLoading(false);
+    }
+  };
+
+  const handleTestConnection = async () => {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await window.electronAPI.testNotionConnection();
+      setTestResult(result);
+      await refreshStatus();
+    } catch (error: any) {
+      setTestResult({ success: false, error: error.message || 'Failed to test connection' });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  if (!settings) {
+    return <div className="settings-loading">Loading Notion settings...</div>;
+  }
+
+  const statusLabel = !status?.configured
+    ? 'Missing Key'
+    : status.connected
+      ? 'Connected'
+      : 'Configured';
+
+  const statusClass = !status?.configured
+    ? 'missing'
+    : status.connected
+      ? 'connected'
+      : 'configured';
+
+  return (
+    <div className="notion-settings">
+      <div className="settings-section">
+        <div className="settings-section-header">
+          <div className="settings-title-with-badge">
+            <h3>Connect Notion</h3>
+            {status && (
+              <span
+                className={`notion-status-badge ${statusClass}`}
+                title={!status.configured ? 'API key not configured' : status.connected ? 'Connected to Notion' : 'Configured'}
+              >
+                {statusLabel}
+              </span>
+            )}
+            {statusLoading && !status && (
+              <span className="notion-status-badge configured">Checking…</span>
+            )}
+          </div>
+          <button className="btn-secondary btn-sm" onClick={refreshStatus} disabled={statusLoading}>
+            {statusLoading ? 'Checking...' : 'Refresh Status'}
+          </button>
+        </div>
+        <p className="settings-description">
+          Connect the agent to Notion using an integration API key, then use the built-in `notion_action` tool to search,
+          read, and update pages or data sources.
+        </p>
+        {status?.error && (
+          <p className="settings-hint">Status check: {status.error}</p>
+        )}
+        <div className="settings-actions">
+          <button
+            className="btn-secondary btn-sm"
+            onClick={() => window.electronAPI.openExternal('https://notion.so/my-integrations')}
+          >
+            Open Integrations
+          </button>
+        </div>
+      </div>
+
+      <div className="settings-section">
+        <div className="settings-field">
+          <label>Enable Integration</label>
+          <label className="settings-toggle">
+            <input
+              type="checkbox"
+              checked={settings.enabled}
+              onChange={(e) => updateSettings({ enabled: e.target.checked })}
+            />
+            <span className="toggle-slider" />
+          </label>
+        </div>
+
+        <div className="settings-field">
+          <label>API Key</label>
+          <input
+            type="password"
+            className="settings-input"
+            placeholder="ntn_..."
+            value={settings.apiKey || ''}
+            onChange={(e) => updateSettings({ apiKey: e.target.value || undefined })}
+          />
+          <p className="settings-hint">Create an integration and copy the key that starts with <code>ntn_</code> or <code>secret_</code>.</p>
+        </div>
+
+        <div className="settings-field">
+          <label>Notion Version</label>
+          <input
+            type="text"
+            className="settings-input"
+            placeholder="2025-09-03"
+            value={settings.notionVersion || ''}
+            onChange={(e) => updateSettings({ notionVersion: e.target.value || undefined })}
+          />
+          <p className="settings-hint">Use the latest API version unless support requests a pin.</p>
+        </div>
+
+        <div className="settings-field">
+          <label>Timeout (ms)</label>
+          <input
+            type="number"
+            className="settings-input"
+            min={1000}
+            max={120000}
+            value={settings.timeoutMs ?? 20000}
+            onChange={(e) => updateSettings({ timeoutMs: Number(e.target.value) })}
+          />
+        </div>
+
+        <div className="settings-actions">
+          <button className="btn-secondary btn-sm" onClick={handleTestConnection} disabled={testing}>
+            {testing ? 'Testing...' : 'Test Connection'}
+          </button>
+          <button className="btn-primary btn-sm" onClick={handleSave} disabled={saving}>
+            {saving ? 'Saving...' : 'Save Settings'}
+          </button>
+        </div>
+
+        {testResult && (
+          <div className={`test-result ${testResult.success ? 'success' : 'error'}`}>
+            {testResult.success ? (
+              <span>Connected{testResult.name ? ` as ${testResult.name}` : ''}</span>
+            ) : (
+              <span>Connection failed: {testResult.error}</span>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="settings-section">
+        <h4>Setup Tips</h4>
+        <ol className="settings-hint">
+          <li>Create an integration and copy its API key.</li>
+          <li>Share the target pages or databases with the integration.</li>
+          <li>Save settings, then click “Test Connection”.</li>
+        </ol>
+      </div>
+
+      <div className="settings-section">
+        <h4>Quick Usage</h4>
+        <pre className="settings-info-box">{`// Search for pages or data sources
+notion_action({
+  action: "search",
+  query: "Roadmap"
+});
+
+// Read a page
+notion_action({
+  action: "get_page",
+  page_id: "YOUR_PAGE_ID"
+});
+
+// Create a page in a database
+notion_action({
+  action: "create_page",
+  database_id: "YOUR_DATABASE_ID",
+  properties: {
+    Name: { title: [{ text: { content: "New item" } }] }
+  }
+});`}</pre>
+      </div>
+    </div>
+  );
+}

package/src/renderer/components/Onboarding/Onboarding.tsx

@@ -20,6 +20,9 @@ const PROVIDERS: {
   { id: 'gemini', name: 'Gemini', requiresKey: true },
   { id: 'ollama', name: 'Ollama', requiresKey: false },
   { id: 'openrouter', name: 'OpenRouter', requiresKey: true },
+  { id: 'groq', name: 'Groq', requiresKey: true },
+  { id: 'xai', name: 'Grok', requiresKey: true },
+  { id: 'kimi', name: 'Kimi', requiresKey: true },
   { id: 'bedrock', name: 'AWS Bedrock', requiresKey: false },
 ];
 
@@ -29,6 +32,9 @@ const PROVIDER_URLS: Record<string, string> = {
   openai: 'https://platform.openai.com/api-keys',
   gemini: 'https://aistudio.google.com/app/apikey',
   openrouter: 'https://openrouter.ai/keys',
+  groq: 'https://console.groq.com/keys',
+  xai: 'https://console.x.ai/',
+  kimi: 'https://platform.moonshot.ai/',
 };
 
 export function Onboarding({ onComplete }: OnboardingProps) {
@@ -252,7 +258,13 @@ export function Onboarding({ onComplete }: OnboardingProps) {
                   ? 'OpenAI'
                   : provider === 'gemini'
                     ? 'Google AI Studio'
-                    : 'OpenRouter'}
+                    : provider === 'openrouter'
+                      ? 'OpenRouter'
+                      : provider === 'groq'
+                        ? 'Groq Console'
+                        : provider === 'xai'
+                          ? 'xAI Console'
+                          : 'Moonshot Platform'}
             </a>
           </p>
         )}