cowork-os 0.3.21 → 0.3.25

package/src/renderer/components/MatrixSettings.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { ChannelData, ChannelUserData, SecurityMode, ContextType, ContextPolicy } from '../../shared/types';
 import { PairingCodeDisplay } from './PairingCodeDisplay';
 import { ContextPolicySettings } from './ContextPolicySettings';
@@ -33,11 +33,7 @@ export function MatrixSettings({ onStatusChange }: MatrixSettingsProps) {
   const [contextPolicies, setContextPolicies] = useState<Record<ContextType, ContextPolicy>>({} as Record<ContextType, ContextPolicy>);
   const [savingPolicy, setSavingPolicy] = useState(false);
 
-  useEffect(() => {
-    loadChannel();
-  }, []);
-
-  const loadChannel = async () => {
+  const loadChannel = useCallback(async () => {
     try {
       setLoading(true);
       const channels = await window.electronAPI.getGatewayChannels();
@@ -76,7 +72,22 @@ export function MatrixSettings({ onStatusChange }: MatrixSettingsProps) {
     } finally {
       setLoading(false);
     }
-  };
+  }, [onStatusChange]);
+
+  useEffect(() => {
+    loadChannel();
+  }, [loadChannel]);
+
+  useEffect(() => {
+    const unsubscribe = window.electronAPI?.onGatewayUsersUpdated?.((data) => {
+      if (data?.channelType !== 'matrix') return;
+      if (channel && data?.channelId && data.channelId !== channel.id) return;
+      loadChannel();
+    });
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [channel?.id, loadChannel]);
 
   const handleAddChannel = async () => {
     if (!homeserver.trim() || !userId.trim() || !accessToken.trim()) {

package/src/renderer/components/MattermostSettings.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { ChannelData, ChannelUserData, SecurityMode, ContextType, ContextPolicy } from '../../shared/types';
 import { PairingCodeDisplay } from './PairingCodeDisplay';
 import { ContextPolicySettings } from './ContextPolicySettings';
@@ -31,11 +31,7 @@ export function MattermostSettings({ onStatusChange }: MattermostSettingsProps)
   const [contextPolicies, setContextPolicies] = useState<Record<ContextType, ContextPolicy>>({} as Record<ContextType, ContextPolicy>);
   const [savingPolicy, setSavingPolicy] = useState(false);
 
-  useEffect(() => {
-    loadChannel();
-  }, []);
-
-  const loadChannel = async () => {
+  const loadChannel = useCallback(async () => {
     try {
       setLoading(true);
       const channels = await window.electronAPI.getGatewayChannels();
@@ -71,7 +67,22 @@ export function MattermostSettings({ onStatusChange }: MattermostSettingsProps)
     } finally {
       setLoading(false);
     }
-  };
+  }, [onStatusChange]);
+
+  useEffect(() => {
+    loadChannel();
+  }, [loadChannel]);
+
+  useEffect(() => {
+    const unsubscribe = window.electronAPI?.onGatewayUsersUpdated?.((data) => {
+      if (data?.channelType !== 'mattermost') return;
+      if (channel && data?.channelId && data.channelId !== channel.id) return;
+      loadChannel();
+    });
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [channel?.id, loadChannel]);
 
   const handleAddChannel = async () => {
     if (!serverUrl.trim() || !token.trim()) {

package/src/renderer/components/NodesSettings.tsx

@@ -118,101 +118,75 @@ export function NodesSettings({ compact = false }: NodesSettingsProps) {
   };
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center py-8">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accent-500" />
-      </div>
-    );
+    return <div className="settings-loading">Loading companions...</div>;
   }
 
   return (
-    <div className="space-y-4">
-      {/* Header */}
+    <div className="nodes-settings">
       {!compact && (
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-lg font-medium text-neutral-100">Mobile Companions</h3>
-            <p className="text-sm text-neutral-400 mt-1">
-              Connect iOS or Android devices as mobile companions for device-specific actions.
-            </p>
+        <div className="settings-section nodes-header-section">
+          <div className="settings-section-header">
+            <div>
+              <h3>Mobile Companions</h3>
+              <p className="settings-description">
+                Connect iOS or Android devices as mobile companions for device-specific actions.
+              </p>
+            </div>
+            <button className="button-secondary button-small" onClick={loadNodes}>
+              Refresh
+            </button>
           </div>
-          <button
-            onClick={loadNodes}
-            className="px-3 py-1.5 text-sm text-neutral-300 hover:text-neutral-100 bg-neutral-800 hover:bg-neutral-700 rounded-md transition-colors"
-          >
-            Refresh
-          </button>
         </div>
       )}
 
-      {/* Connection Instructions */}
       {nodes.length === 0 && (
-        <div className="bg-neutral-800/50 rounded-lg p-4 border border-neutral-700">
-          <h4 className="text-sm font-medium text-neutral-200 mb-2">How to Connect</h4>
-          <ol className="text-sm text-neutral-400 space-y-2 list-decimal list-inside">
+        <div className="nodes-empty-card">
+          <h4>How to Connect</h4>
+          <ol>
             <li>Make sure the Control Plane is enabled and running</li>
             <li>Install the companion app on your iOS or Android device</li>
             <li>Enter the gateway URL and authentication token in the app</li>
             <li>The device will appear here once connected</li>
           </ol>
-          <div className="mt-4 p-3 bg-neutral-900/50 rounded-md">
-            <p className="text-xs text-neutral-500 font-mono">
-              For local network: ws://{'<your-mac-ip>'}:18789
+          <div className="nodes-connection-note">
+            <p>
+              <code>For local network: ws://{'<your-mac-ip>'}:18789</code>
             </p>
-            <p className="text-xs text-neutral-500 mt-1">
+            <p>
               For remote access: Enable Tailscale or SSH tunnel in Control Plane settings
             </p>
           </div>
         </div>
       )}
 
-      {/* Node List */}
       {nodes.length > 0 && (
-        <div className="space-y-3">
+        <div className="nodes-list">
           {nodes.map((node) => (
             <div
               key={node.id}
-              className={`bg-neutral-800/50 rounded-lg p-4 border transition-colors cursor-pointer ${
-                selectedNode === node.id
-                  ? 'border-accent-500'
-                  : 'border-neutral-700 hover:border-neutral-600'
-              }`}
+              className={`nodes-card ${selectedNode === node.id ? 'is-active' : ''}`}
               onClick={() => setSelectedNode(selectedNode === node.id ? null : node.id)}
             >
-              {/* Node Header */}
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <span className="text-2xl">{getPlatformIcon(node.platform)}</span>
+              <div className="nodes-card-header">
+                <div className="nodes-card-info">
+                  <span className="nodes-platform-icon">{getPlatformIcon(node.platform)}</span>
                   <div>
-                    <h4 className="text-sm font-medium text-neutral-100">{node.displayName}</h4>
-                    <p className="text-xs text-neutral-500">
+                    <h4 className="nodes-card-title">{node.displayName}</h4>
+                    <p className="nodes-card-subtitle">
                       {node.platform.toUpperCase()} · v{node.version}
                     </p>
                   </div>
                 </div>
-                <div className="flex items-center gap-2">
-                  <span
-                    className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs ${
-                      node.isForeground
-                        ? 'bg-green-500/20 text-green-400'
-                        : 'bg-yellow-500/20 text-yellow-400'
-                    }`}
-                  >
-                    {node.isForeground ? 'Foreground' : 'Background'}
-                  </span>
-                </div>
+                <span className={`nodes-status ${node.isForeground ? 'foreground' : 'background'}`}>
+                  {node.isForeground ? 'Foreground' : 'Background'}
+                </span>
               </div>
 
-              {/* Capabilities */}
-              <div className="mt-3 flex flex-wrap gap-2">
+              <div className="nodes-capabilities">
                 {node.capabilities.map((cap) => (
                   <span
                     key={cap}
-                    className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${
-                      node.permissions?.[cap]
-                        ? 'bg-neutral-700 text-neutral-300'
-                        : 'bg-neutral-800 text-neutral-500'
-                    }`}
+                    className={`nodes-capability ${node.permissions?.[cap] ? '' : 'denied'}`}
                     title={node.permissions?.[cap] ? 'Permission granted' : 'Permission not granted'}
                   >
                     {getCapabilityIcon(cap)} {cap}
@@ -221,33 +195,30 @@ export function NodesSettings({ compact = false }: NodesSettingsProps) {
                 ))}
               </div>
 
-              {/* Expanded Details */}
               {selectedNode === node.id && (
-                <div className="mt-4 pt-4 border-t border-neutral-700 space-y-4">
-                  {/* Connection Info */}
-                  <div className="grid grid-cols-2 gap-4 text-xs">
-                    <div>
-                      <span className="text-neutral-500">Node ID</span>
-                      <p className="text-neutral-300 font-mono mt-0.5 truncate">{node.id}</p>
+                <div className="nodes-details">
+                  <div className="nodes-detail-grid">
+                    <div className="nodes-detail">
+                      <span className="nodes-detail-label">Node ID</span>
+                      <span className="nodes-detail-value nodes-detail-mono">{node.id}</span>
                     </div>
-                    <div>
-                      <span className="text-neutral-500">Device ID</span>
-                      <p className="text-neutral-300 font-mono mt-0.5 truncate">{node.deviceId || 'N/A'}</p>
+                    <div className="nodes-detail">
+                      <span className="nodes-detail-label">Device ID</span>
+                      <span className="nodes-detail-value nodes-detail-mono">{node.deviceId || 'N/A'}</span>
                     </div>
-                    <div>
-                      <span className="text-neutral-500">Connected</span>
-                      <p className="text-neutral-300 mt-0.5">{formatTimestamp(node.connectedAt)}</p>
+                    <div className="nodes-detail">
+                      <span className="nodes-detail-label">Connected</span>
+                      <span className="nodes-detail-value">{formatTimestamp(node.connectedAt)}</span>
                     </div>
-                    <div>
-                      <span className="text-neutral-500">Last Activity</span>
-                      <p className="text-neutral-300 mt-0.5">{formatTimestamp(node.lastActivityAt)}</p>
+                    <div className="nodes-detail">
+                      <span className="nodes-detail-label">Last Activity</span>
+                      <span className="nodes-detail-value">{formatTimestamp(node.lastActivityAt)}</span>
                     </div>
                   </div>
 
-                  {/* Test Commands */}
-                  <div>
-                    <h5 className="text-xs font-medium text-neutral-400 mb-2">Test Commands</h5>
-                    <div className="flex flex-wrap gap-2">
+                  <div className="nodes-test">
+                    <h5>Test Commands</h5>
+                    <div className="nodes-test-actions">
                       {node.commands.slice(0, 6).map((cmd) => (
                         <button
                           key={cmd}
@@ -256,7 +227,7 @@ export function NodesSettings({ compact = false }: NodesSettingsProps) {
                             handleTestCommand(node.id, cmd);
                           }}
                           disabled={testingCommand === `${node.id}:${cmd}`}
-                          className="px-2 py-1 text-xs bg-neutral-700 hover:bg-neutral-600 text-neutral-300 rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                          className="nodes-command-btn"
                         >
                           {testingCommand === `${node.id}:${cmd}` ? 'Testing...' : cmd}
                         </button>
@@ -264,25 +235,16 @@ export function NodesSettings({ compact = false }: NodesSettingsProps) {
                     </div>
                   </div>
 
-                  {/* Test Result */}
                   {testResult && testResult.nodeId === node.id && (
-                    <div
-                      className={`p-3 rounded text-xs ${
-                        testResult.result.ok
-                          ? 'bg-green-500/10 border border-green-500/30 text-green-400'
-                          : 'bg-red-500/10 border border-red-500/30 text-red-400'
-                      }`}
-                    >
-                      <p className="font-medium">
+                    <div className={`nodes-result ${testResult.result.ok ? 'success' : 'error'}`}>
+                      <p className="nodes-result-title">
                         {testResult.command}: {testResult.result.ok ? 'Success' : 'Failed'}
                       </p>
                       {testResult.result.error && (
-                        <p className="mt-1 text-red-300">
-                          {testResult.result.error.message}
-                        </p>
+                        <p className="nodes-result-error">{testResult.result.error.message}</p>
                       )}
                       {testResult.result.ok && testResult.result.payload != null && (
-                        <pre className="mt-2 p-2 bg-neutral-900/50 rounded overflow-auto max-h-32">
+                        <pre className="nodes-result-pre">
                           {(() => {
                             try {
                               return JSON.stringify(testResult.result.payload, null, 2).slice(0, 500);
@@ -301,14 +263,11 @@ export function NodesSettings({ compact = false }: NodesSettingsProps) {
         </div>
       )}
 
-      {/* Status Summary */}
       {nodes.length > 0 && !compact && (
-        <div className="mt-4 p-3 bg-neutral-800/30 rounded-lg border border-neutral-700/50">
-          <p className="text-xs text-neutral-400">
-            <span className="text-accent-400 font-medium">{nodes.length}</span> companion{nodes.length !== 1 ? 's' : ''} connected
-            {' · '}
-            <span className="text-green-400">{nodes.filter(n => n.isForeground).length}</span> in foreground
-          </p>
+        <div className="nodes-summary">
+          <span className="nodes-summary-count">{nodes.length}</span> companion{nodes.length !== 1 ? 's' : ''} connected
+          {' · '}
+          <span className="nodes-summary-highlight">{nodes.filter(n => n.isForeground).length}</span> in foreground
         </div>
       )}
     </div>

package/src/renderer/components/NotificationPanel.tsx

@@ -1,9 +1,11 @@
 import { useState, useEffect, useRef } from 'react';
+import { ThemeIcon } from './ThemeIcon';
+import { AlertTriangleIcon, CheckIcon, ClockIcon, InfoIcon, XIcon } from './LineIcons';
 
 // Define types inline for the renderer
 interface AppNotification {
   id: string;
-  type: 'task_completed' | 'task_failed' | 'scheduled_task' | 'info' | 'warning' | 'error';
+  type: 'task_completed' | 'task_failed' | 'scheduled_task' | 'input_required' | 'info' | 'warning' | 'error';
   title: string;
   message: string;
   read: boolean;
@@ -236,13 +238,14 @@ const Icons = {
   ),
 };
 
-const typeIcons: Record<string, { icon: string; bg: string; color: string }> = {
-  task_completed: { icon: '✅', bg: 'rgba(34, 197, 94, 0.15)', color: 'rgb(34, 197, 94)' },
-  task_failed: { icon: '❌', bg: 'rgba(239, 68, 68, 0.15)', color: 'rgb(239, 68, 68)' },
-  scheduled_task: { icon: '⏰', bg: 'var(--color-accent-glass)', color: 'var(--color-accent)' },
-  info: { icon: 'ℹ️', bg: 'rgba(59, 130, 246, 0.15)', color: 'rgb(59, 130, 246)' },
-  warning: { icon: '⚠️', bg: 'rgba(245, 158, 11, 0.15)', color: 'rgb(245, 158, 11)' },
-  error: { icon: '🚨', bg: 'rgba(239, 68, 68, 0.15)', color: 'rgb(239, 68, 68)' },
+const typeIcons: Record<string, { icon: React.ReactNode; bg: string; color: string }> = {
+  task_completed: { icon: <ThemeIcon emoji="✅" icon={<CheckIcon size={14} />} />, bg: 'rgba(34, 197, 94, 0.15)', color: 'rgb(34, 197, 94)' },
+  task_failed: { icon: <ThemeIcon emoji="❌" icon={<XIcon size={14} />} />, bg: 'rgba(239, 68, 68, 0.15)', color: 'rgb(239, 68, 68)' },
+  scheduled_task: { icon: <ThemeIcon emoji="⏰" icon={<ClockIcon size={14} />} />, bg: 'var(--color-accent-glass)', color: 'var(--color-accent)' },
+  input_required: { icon: <ThemeIcon emoji="📝" icon={<InfoIcon size={14} />} />, bg: 'rgba(245, 158, 11, 0.15)', color: 'rgb(245, 158, 11)' },
+  info: { icon: <ThemeIcon emoji="ℹ️" icon={<InfoIcon size={14} />} />, bg: 'rgba(59, 130, 246, 0.15)', color: 'rgb(59, 130, 246)' },
+  warning: { icon: <ThemeIcon emoji="⚠️" icon={<AlertTriangleIcon size={14} />} />, bg: 'rgba(245, 158, 11, 0.15)', color: 'rgb(245, 158, 11)' },
+  error: { icon: <ThemeIcon emoji="🚨" icon={<AlertTriangleIcon size={14} />} />, bg: 'rgba(239, 68, 68, 0.15)', color: 'rgb(239, 68, 68)' },
 };
 
 function formatRelativeTime(timestamp: number): string {
@@ -260,6 +263,10 @@ function formatRelativeTime(timestamp: number): string {
   return new Date(timestamp).toLocaleDateString();
 }
 
+function stripLeadingEmoji(text: string): string {
+  return text.replace(/^[\u{1F300}-\u{1FAFF}\u{2600}-\u{27BF}][\uFE0F\uFE0E]?\s*/u, '');
+}
+
 export function NotificationPanel({ onNotificationClick }: NotificationPanelProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [notifications, setNotifications] = useState<AppNotification[]>([]);
@@ -340,8 +347,14 @@ export function NotificationPanel({ onNotificationClick }: NotificationPanelProp
   };
 
   const handleNotificationClick = async (notification: AppNotification) => {
-    // Mark as read
-    if (!notification.read) {
+    const shouldAutoClear = notification.type === 'input_required';
+    if (shouldAutoClear) {
+      try {
+        await window.electronAPI.deleteNotification(notification.id);
+      } catch (error) {
+        console.error('Failed to delete notification:', error);
+      }
+    } else if (!notification.read) {
       try {
         await window.electronAPI.markNotificationRead(notification.id);
       } catch (error) {
@@ -424,6 +437,7 @@ export function NotificationPanel({ onNotificationClick }: NotificationPanelProp
               notifications.map((notification) => {
                 const typeConfig = typeIcons[notification.type] || typeIcons.info;
                 const isHovered = hoveredId === notification.id;
+                const modernTitle = stripLeadingEmoji(notification.title);
 
                 return (
                   <div
@@ -451,7 +465,7 @@ export function NotificationPanel({ onNotificationClick }: NotificationPanelProp
                       {typeConfig.icon}
                     </div>
                     <div style={styles.notificationContent}>
-                      <p style={styles.notificationTitle}>{notification.title}</p>
+                      <p style={styles.notificationTitle}>{modernTitle}</p>
                       <p style={styles.notificationMessage}>{notification.message}</p>
                       <span style={styles.notificationTime}>
                         {formatRelativeTime(notification.createdAt)}

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>
+  );
+}