work-agent 0.1.0

package/components/setup-guide.tsx

@@ -0,0 +1,484 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from '@/components/ui/card';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select';
+import { AlertCircle, CheckCircle, Loader2, Settings, Key, Globe } from 'lucide-react';
+
+interface SetupGuideProps {
+	mode?: 'full' | 'settings';
+}
+
+interface ConfigStatus {
+	isConfigured: boolean;
+	configDir: string;
+	hasProviders: boolean;
+	hasEnvApiKey: boolean;
+	envProvider?: string | null;
+	providers: string[];
+}
+
+// 预设的 AI 提供商配置
+// API 类型: anthropic-messages (Anthropic/兼容), openai-completions (OpenAI 兼容)
+const PROVIDER_PRESETS: Record<string, { name: string; baseUrl: string; api: string; docs: string; defaultModel?: string }> = {
+	zhipu: {
+		name: '智谱 AI (GLM)',
+		baseUrl: 'https://open.bigmodel.cn/api/anthropic',
+		api: 'anthropic-messages',
+		docs: 'https://open.bigmodel.cn/',
+		defaultModel: 'glm-4.7',
+	},
+	ollama: {
+		name: 'Ollama (本地)',
+		baseUrl: 'http://192.168.44.151:11434/v1',
+		api: 'openai-completions',
+		docs: 'https://ollama.ai/',
+		defaultModel: 'qwen3.5:27b',
+	},
+	custom: {
+		name: '自定义',
+		baseUrl: '',
+		api: 'openai-completions',
+		docs: '',
+	},
+};
+
+export function SetupGuide({ mode = 'full' }: SetupGuideProps) {
+	const [status, setStatus] = useState<ConfigStatus | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [saving, setSaving] = useState(false);
+	const [testing, setTesting] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [success, setSuccess] = useState(false);
+	const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);
+
+	// Form state
+	const [selectedProvider, setSelectedProvider] = useState('zhipu');
+	const [apiKey, setApiKey] = useState('');
+	const [baseUrl, setBaseUrl] = useState(PROVIDER_PRESETS.zhipu.baseUrl);
+	const [modelId, setModelId] = useState('glm-4.7');
+
+	// Load current status
+	useEffect(() => {
+		async function loadStatus() {
+			try {
+				const response = await fetch('/api/config/status');
+				if (response.ok) {
+					const data = await response.json();
+					setStatus(data);
+				}
+			} catch (e) {
+				console.error('Failed to load config status:', e);
+			} finally {
+				setLoading(false);
+			}
+		}
+		loadStatus();
+	}, []);
+
+	// Update baseUrl and modelId when provider changes
+	useEffect(() => {
+		const preset = PROVIDER_PRESETS[selectedProvider];
+		if (preset) {
+			setBaseUrl(preset.baseUrl);
+			if (preset.defaultModel) {
+				setModelId(preset.defaultModel);
+			}
+		}
+	}, [selectedProvider]);
+
+	const handleSave = async () => {
+		if (!apiKey.trim()) {
+			setError('请输入 API Key');
+			return;
+		}
+
+		setSaving(true);
+		setError(null);
+		setSuccess(false);
+
+		try {
+			const preset = PROVIDER_PRESETS[selectedProvider];
+			const providerId = selectedProvider === 'custom' ? 'custom' : selectedProvider;
+
+			const response = await fetch('/api/config/providers', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					id: providerId,
+					baseUrl: baseUrl || preset.baseUrl,
+					api: preset.api,
+					apiKey: apiKey,
+					models: modelId ? [modelId] : undefined,
+				}),
+			});
+
+			if (!response.ok) {
+				const data = await response.json();
+				throw new Error(data.error || '保存失败');
+			}
+
+			setSuccess(true);
+			setApiKey('');
+			setModelId('');
+
+			// Refresh status
+			const statusResponse = await fetch('/api/config/status');
+			if (statusResponse.ok) {
+				const data = await statusResponse.json();
+				setStatus(data);
+			}
+
+			// Reload page after 2 seconds to apply new config
+			setTimeout(() => {
+				window.location.reload();
+			}, 2000);
+		} catch (e) {
+			setError(e instanceof Error ? e.message : '保存失败');
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	const handleTest = async () => {
+		if (!baseUrl.trim()) {
+			setTestResult({ success: false, message: '请输入 API 地址' });
+			return;
+		}
+
+		setTesting(true);
+		setTestResult(null);
+
+		try {
+			const preset = PROVIDER_PRESETS[selectedProvider];
+			const providerId = selectedProvider === 'custom' ? 'custom' : selectedProvider;
+
+			const response = await fetch('/api/config/test', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					providerId,
+					baseUrl: baseUrl || preset.baseUrl,
+					api: preset.api,
+					apiKey: apiKey || 'test',
+					modelId: modelId || preset.defaultModel,
+				}),
+			});
+
+			const data = await response.json();
+
+			if (response.ok && data.success) {
+				setTestResult({ success: true, message: data.message || '连接成功！' });
+			} else {
+				setTestResult({ success: false, message: data.error || '连接失败' });
+			}
+		} catch (e) {
+			setTestResult({ 
+				success: false, 
+				message: e instanceof Error ? e.message : '连接测试失败' 
+			});
+		} finally {
+			setTesting(false);
+		}
+	};
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center min-h-[400px]">
+				<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+			</div>
+		);
+	}
+
+	const preset = PROVIDER_PRESETS[selectedProvider];
+
+	return (
+		<div className="max-w-2xl mx-auto p-6 space-y-6">
+			{/* Header */}
+			<div className="text-center space-y-2">
+				<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4">
+					<Settings className="h-8 w-8 text-primary" />
+				</div>
+				<h1 className="text-2xl font-bold">
+					{mode === 'full' ? '欢迎使用智能助手' : '系统设置'}
+				</h1>
+				<p className="text-muted-foreground">
+					{mode === 'full' ? '请先配置 AI 提供商以开始使用' : '管理 AI 提供商配置'}
+				</p>
+			</div>
+
+			{/* Success message */}
+			{success && (
+				<Card className="border-green-200 bg-green-50">
+					<CardContent className="pt-6">
+						<div className="flex items-center gap-2 text-green-700">
+							<CheckCircle className="h-5 w-5" />
+							<span className="font-medium">配置保存成功！页面即将刷新...</span>
+						</div>
+					</CardContent>
+				</Card>
+			)}
+
+			{/* Current status */}
+			{status?.hasEnvApiKey && (
+				<Card className="border-blue-200 bg-blue-50">
+					<CardContent className="pt-6">
+						<div className="flex items-center gap-2 text-blue-700">
+							<CheckCircle className="h-5 w-5" />
+							<span>
+								检测到环境变量配置
+								{status.envProvider && ` (AI_PROVIDER=${status.envProvider})`}
+								，系统已配置
+							</span>
+						</div>
+					</CardContent>
+				</Card>
+			)}
+
+			{/* Configuration form */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-lg">配置 AI 提供商</CardTitle>
+					<CardDescription>
+						选择一个 AI 提供商并输入您的 API Key
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					{/* Provider selection */}
+					<div className="space-y-2">
+						<label className="text-sm font-medium">选择提供商</label>
+						<Select value={selectedProvider} onValueChange={setSelectedProvider}>
+							<SelectTrigger>
+								<SelectValue />
+							</SelectTrigger>
+							<SelectContent>
+								{Object.entries(PROVIDER_PRESETS).map(([id, preset]) => (
+									<SelectItem key={id} value={id}>
+										{preset.name}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+						{preset.docs && (
+							<p className="text-xs text-muted-foreground">
+								获取 API Key: <a href={preset.docs} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">{preset.docs}</a>
+							</p>
+						)}
+					</div>
+
+					{/* API Key */}
+					<div className="space-y-2">
+						<label className="text-sm font-medium flex items-center gap-2">
+							<Key className="h-4 w-4" />
+							API Key
+						</label>
+						<Input
+							type="password"
+							placeholder={
+								selectedProvider === 'ollama' 
+									? 'Ollama不需要真实API Key，填写任意值（如：ollama）' 
+									: selectedProvider === 'zhipu' 
+										? 'xxx.xxx' 
+										: 'sk-...'
+							}
+							value={apiKey}
+							onChange={(e) => setApiKey(e.target.value)}
+						/>
+						{selectedProvider === 'ollama' && (
+							<p className="text-xs text-amber-600 bg-amber-50 p-2 rounded flex items-start gap-2">
+								<span className="text-amber-500">💡</span>
+								<span>Ollama不需要真实的API Key，填写任意值即可（如：ollama）</span>
+							</p>
+						)}
+					</div>
+
+					{/* Base URL (for custom providers) */}
+					<div className="space-y-2">
+						<label className="text-sm font-medium flex items-center gap-2">
+							<Globe className="h-4 w-4" />
+							API 地址
+						</label>
+						<Input
+							placeholder="https://api.example.com/v1"
+							value={baseUrl}
+							onChange={(e) => setBaseUrl(e.target.value)}
+							disabled={selectedProvider !== 'custom' && selectedProvider !== 'ollama'}
+						/>
+						{selectedProvider === 'ollama' && (
+							<p className="text-xs text-muted-foreground">
+								💡 本地Ollama服务地址，默认为 http://192.168.44.151:11434/v1
+							</p>
+						)}
+						{selectedProvider !== 'custom' && selectedProvider !== 'ollama' && (
+							<p className="text-xs text-muted-foreground">
+								使用 {preset.name} 默认地址。如需自定义请选择"自定义"或"Ollama"提供商。
+							</p>
+						)}
+					</div>
+
+					{/* Model ID (optional) */}
+					<div className="space-y-2">
+						<label className="text-sm font-medium">模型 ID (可选)</label>
+						<Input
+							placeholder="claude-sonnet-4-20250514"
+							value={modelId}
+							onChange={(e) => setModelId(e.target.value)}
+						/>
+						<p className="text-xs text-muted-foreground">
+							留空使用默认模型
+						</p>
+					</div>
+
+					{/* Error message */}
+					{error && (
+						<div className="flex items-center gap-2 text-sm text-red-600 bg-red-50 p-3 rounded-lg">
+							<AlertCircle className="h-4 w-4" />
+							{error}
+						</div>
+					)}
+
+					{/* Test result */}
+					{testResult && (
+						<div className={`flex items-start gap-2 text-sm p-3 rounded-lg ${
+							testResult.success 
+								? 'text-green-600 bg-green-50' 
+								: 'text-red-600 bg-red-50'
+						}`}>
+							{testResult.success ? (
+								<CheckCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
+							) : (
+								<AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
+							)}
+							<span>{testResult.message}</span>
+						</div>
+					)}
+
+					{/* Buttons */}
+					<div className="flex gap-3">
+						<Button
+							onClick={handleTest}
+							disabled={testing || !baseUrl.trim()}
+							variant="outline"
+							className="flex-1"
+						>
+							{testing ? (
+								<>
+									<Loader2 className="h-4 w-4 mr-2 animate-spin" />
+									测试中...
+								</>
+							) : (
+								'测试连接'
+							)}
+						</Button>
+						<Button
+							onClick={handleSave}
+							disabled={saving || !apiKey.trim()}
+							className="flex-1"
+						>
+							{saving ? (
+								<>
+									<Loader2 className="h-4 w-4 mr-2 animate-spin" />
+									保存中...
+								</>
+							) : (
+								'保存配置'
+							)}
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* Alternative: Environment variable */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-lg">或者使用环境变量</CardTitle>
+					<CardDescription>
+						在 Docker 或系统环境中设置
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<div className="bg-muted rounded-lg p-4 font-mono text-sm space-y-3">
+						<div>
+							<p className="text-muted-foreground"># 使用 AI_ 前缀环境变量（推荐）</p>
+							<p>environment:</p>
+							<p className="pl-4">AI_PROVIDER: zhipu</p>
+							<p className="pl-4">AI_MODEL: glm-4</p>
+							<p className="pl-4">AI_API_KEY: your-api-key</p>
+						</div>
+						<div className="border-t border-border pt-3">
+							<p className="text-muted-foreground"># 本地 Ollama 配置</p>
+							<p>environment:</p>
+							<p className="pl-4">AI_PROVIDER: ollama</p>
+							<p className="pl-4">AI_MODEL: qwen3.5:27b</p>
+							<p className="pl-4">AI_BASE_URL: http://192.168.44.151:11434/v1</p>
+							<p className="pl-4">AI_API_KEY: ollama</p>
+						</div>
+						<div className="border-t border-border pt-3">
+							<p className="text-muted-foreground"># 或使用供应商特定环境变量</p>
+							<p>environment:</p>
+							<p className="pl-4">ZHIPU_API_KEY: your-api-key</p>
+							<p className="pl-4 text-muted-foreground"># 或</p>
+							<p className="pl-4">ANTHROPIC_API_KEY: your-api-key</p>
+						</div>
+						<div className="border-t border-border pt-3">
+							<p className="text-muted-foreground"># 或挂载配置文件</p>
+							<p>volumes:</p>
+							<p className="pl-4">- ~/.pi/agent:/home/nextjs/.pi/agent</p>
+						</div>
+					</div>
+					<div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+						<p className="text-sm text-blue-700 font-medium mb-2">支持的环境变量：</p>
+						<table className="text-xs text-blue-600 w-full">
+							<tbody>
+								<tr><td className="font-mono pr-4">AI_PROVIDER</td><td>供应商 ID (zhipu, anthropic, deepseek, openai, ollama)</td></tr>
+								<tr><td className="font-mono pr-4">AI_MODEL</td><td>模型 ID (如 glm-4, claude-sonnet-4-20250514, qwen3.5:27b)</td></tr>
+								<tr><td className="font-mono pr-4">AI_BASE_URL</td><td>自定义 API 地址</td></tr>
+								<tr><td className="font-mono pr-4">AI_API_KEY</td><td>通用 API Key</td></tr>
+							</tbody>
+						</table>
+					</div>
+					{status && (
+						<p className="mt-3 text-xs text-muted-foreground">
+							配置目录: <code className="bg-muted px-1 rounded">{status.configDir}</code>
+						</p>
+					)}
+				</CardContent>
+			</Card>
+
+			{/* Existing providers */}
+			{status?.providers && status.providers.length > 0 && (
+				<Card>
+					<CardHeader>
+						<CardTitle className="text-lg">已配置的提供商</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="flex flex-wrap gap-2">
+							{status.providers.map((provider) => (
+								<span
+									key={provider}
+									className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm"
+								>
+									{PROVIDER_PRESETS[provider]?.name || provider}
+								</span>
+							))}
+						</div>
+					</CardContent>
+				</Card>
+			)}
+		</div>
+	);
+}

package/components/sub-nav.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import { LucideIcon } from 'lucide-react';
+
+export interface NavItem {
+	href: string;
+	label: string;
+	icon: LucideIcon;
+	badge?: number;
+}
+
+interface SubNavProps {
+	items: NavItem[];
+}
+
+export function SubNav({ items }: SubNavProps) {
+	const pathname = usePathname();
+
+	return (
+		<nav className="w-48 flex-shrink-0 border-r bg-card py-4">
+			<ul className="space-y-1 px-2">
+				{items.map((item) => {
+					const isActive = pathname === item.href || pathname.startsWith(item.href + '/');
+					const Icon = item.icon;
+					
+					return (
+						<li key={item.href}>
+							<Link
+								href={item.href}
+								className={cn(
+									'flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
+									isActive
+										? 'bg-blue-50 text-blue-700 font-medium'
+										: 'text-gray-700 hover:bg-gray-100'
+								)}
+							>
+								<Icon className="h-4 w-4" />
+								<span className="flex-1">{item.label}</span>
+								{item.badge !== undefined && item.badge > 0 && (
+									<span className="px-1.5 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
+										{item.badge}
+									</span>
+								)}
+							</Link>
+						</li>
+					);
+				})}
+			</ul>
+		</nav>
+	);
+}