import * as React from 'react'
import { useMutation } from '@tanstack/react-query'
import { useConfig } from '@/state/config'
import { ipc, isTauriHost } from '@/lib/api/desktop'
import { asEnvelope } from '@/lib/error'
import type {
DesktopPromptOptimizeResponse,
DesktopWakeupResponse,
TargetTool,
WakeupProfile,
} from '@/lib/types/desktop'
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Badge } from '@/components/ui/badge'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { ErrorBanner } from '@/components/error-banner'
import { Loader2, Wand2, Zap } from 'lucide-react'
const TARGETS: TargetTool[] = ['claude', 'codex', 'opencode']
const PROFILES: WakeupProfile[] = ['developer', 'project']
type Mode = 'wakeup' | 'prompt'
export function WakeupPage() {
const cfg = useConfig()
const [mode, setMode] = React.useState<Mode>('wakeup')
const [task, setTask] = React.useState('')
const [filesRaw, setFilesRaw] = React.useState('')
const [target, setTarget] = React.useState<TargetTool>('claude')
const [profile, setProfile] = React.useState<WakeupProfile>('developer')
const [provider, setProvider] = React.useState('')
const [sessionId, setSessionId] = React.useState('')
const wakeupMutation = useMutation({
mutationFn: () => {
const files = filesRaw
.split(/[\n,]/)
.map((s) => s.trim())
.filter(Boolean)
return ipc.buildWakeup({
config_path: cfg.configPath,
vault_root_override: cfg.vaultRoot.trim() || null,
cwd: cfg.cwd,
task,
files,
target,
profile,
})
},
})
const promptMutation = useMutation({
mutationFn: () => {
const files = filesRaw
.split(/[\n,]/)
.map((s) => s.trim())
.filter(Boolean)
return ipc.optimizePrompt({
config_path: cfg.configPath,
vault_root_override: cfg.vaultRoot.trim() || null,
cwd: cfg.cwd,
task,
files,
target,
profile,
provider: provider.trim() || null,
session_id: sessionId.trim() || null,
})
},
})
const wakeup = wakeupMutation.data ?? null
const prompt = promptMutation.data ?? null
const loading = wakeupMutation.isPending || promptMutation.isPending
const error = wakeupMutation.error ?? promptMutation.error
const errorEnvelope = error ? asEnvelope(error) : null
function run() {
if (mode === 'wakeup') wakeupMutation.mutate()
else promptMutation.mutate()
}
return (
<div className="space-y-4">
<Tabs value={mode} onValueChange={(v) => setMode(v as Mode)}>
<TabsList>
<TabsTrigger value="wakeup" className="gap-1.5">
<Wand2 className="h-3.5 w-3.5" />
唤醒包
</TabsTrigger>
<TabsTrigger value="prompt" className="gap-1.5">
<Zap className="h-3.5 w-3.5" />
Prompt 优化
</TabsTrigger>
</TabsList>
</Tabs>
<div className="grid gap-4 lg:grid-cols-[1fr_1.2fr]">
<Card>
<CardHeader>
<CardTitle className="text-base">
{mode === 'wakeup' ? '生成唤醒包' : '生成优化后的 Prompt'}
</CardTitle>
<CardDescription>
{mode === 'wakeup'
? '根据 profile 聚合身份 / 工作风格 / 近期上下文 / 约束 / 决策 / 事件。'
: '叠加 context + wakeup 两段，生成一段可直接丢给目标 AI 的 combined prompt。'}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid gap-2">
<Label htmlFor="task">任务</Label>
<Textarea
id="task"
rows={3}
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="resume spool lifecycle work"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="files">相关文件（逗号 / 换行分隔）</Label>
<Textarea
id="files"
rows={2}
value={filesRaw}
onChange={(e) => setFilesRaw(e.target.value)}
placeholder="src/lifecycle_service.rs"
/>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="grid gap-2">
<Label>target</Label>
<Select value={target} onValueChange={(v) => setTarget(v as TargetTool)}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{TARGETS.map((t) => (
<SelectItem key={t} value={t}>
{t}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="grid gap-2">
<Label>profile</Label>
<Select value={profile} onValueChange={(v) => setProfile(v as WakeupProfile)}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{PROFILES.map((p) => (
<SelectItem key={p} value={p}>
{p}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
{mode === 'prompt' && (
<div className="grid grid-cols-2 gap-3">
<div className="grid gap-2">
<Label>provider（可选）</Label>
<Input
value={provider}
onChange={(e) => setProvider(e.target.value)}
placeholder="claude / codex"
/>
</div>
<div className="grid gap-2">
<Label>session_id（可选）</Label>
<Input
value={sessionId}
onChange={(e) => setSessionId(e.target.value)}
/>
</div>
</div>
)}
<div className="flex items-center gap-3 pt-2">
<Button
onClick={run}
disabled={loading || !task.trim() || !cfg.cwd.trim()}
>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
{mode === 'wakeup' ? '生成唤醒包' : '生成 Prompt'}
</Button>
{!isTauriHost() && <Badge variant="muted">Bridge 未就绪</Badge>}
</div>
{errorEnvelope && <ErrorBanner envelope={errorEnvelope} />}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-base">输出</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{mode === 'wakeup' && wakeup && <WakeupResult response={wakeup} />}
{mode === 'prompt' && prompt && <PromptResult response={prompt} />}
{((mode === 'wakeup' && !wakeup) || (mode === 'prompt' && !prompt)) &&
!loading && (
<p className="text-sm text-muted-foreground">尚未生成。</p>
)}
</CardContent>
</Card>
</div>
</div>
)
}
function WakeupResult({ response }: { response: DesktopWakeupResponse }) {
const knowledgeIndex = response.packet?.knowledge_index
const maintenanceHints = response.packet?.maintenance_hints ?? []
return (
<div className="space-y-3">
<p className="text-xs text-muted-foreground">
vault_root: <span className="text-foreground">{response.used_vault_root}</span>
</p>
{maintenanceHints.length > 0 && (
<div className="rounded-md border border-yellow-500/30 bg-yellow-500/5 p-3">
<Label className="mb-1 block text-xs text-yellow-600">维护提醒</Label>
<ul className="list-disc pl-4 text-xs text-yellow-700">
{maintenanceHints.map((hint, i) => (
<li key={i}>{hint}</li>
))}
</ul>
</div>
)}
{knowledgeIndex && (
<div>
<Label className="mb-1 block text-xs">知识导航 (INDEX)</Label>
<pre className="max-h-[200px] overflow-auto rounded-md border border-primary/20 bg-primary/5 p-3 text-xs leading-relaxed whitespace-pre-wrap">
{knowledgeIndex}
</pre>
</div>
)}
<div>
<Label className="mb-1 block text-xs">Packet</Label>
<pre className="max-h-[480px] overflow-auto rounded-md border bg-muted/30 p-3 text-xs leading-relaxed">
{JSON.stringify(response.packet, null, 2)}
</pre>
</div>
</div>
)
}
function PromptResult({ response }: { response: DesktopPromptOptimizeResponse }) {
const combined = typeof response.combined_prompt === 'string' ? response.combined_prompt : ''
const ctx = typeof response.context_prompt === 'string' ? response.context_prompt : ''
const wake = typeof response.wakeup_prompt === 'string' ? response.wakeup_prompt : ''
return (
<Tabs defaultValue="combined">
<TabsList>
<TabsTrigger value="combined">Combined</TabsTrigger>
<TabsTrigger value="context">Context</TabsTrigger>
<TabsTrigger value="wakeup">Wakeup</TabsTrigger>
<TabsTrigger value="raw">Raw JSON</TabsTrigger>
</TabsList>
<TabsContent value="combined">
<pre className="max-h-[480px] overflow-auto rounded-md border bg-muted/30 p-3 text-xs leading-relaxed whitespace-pre-wrap">
{combined}
</pre>
</TabsContent>
<TabsContent value="context">
<pre className="max-h-[480px] overflow-auto rounded-md border bg-muted/30 p-3 text-xs leading-relaxed whitespace-pre-wrap">
{ctx}
</pre>
</TabsContent>
<TabsContent value="wakeup">
<pre className="max-h-[480px] overflow-auto rounded-md border bg-muted/30 p-3 text-xs leading-relaxed whitespace-pre-wrap">
{wake}
</pre>
</TabsContent>
<TabsContent value="raw">
<pre className="max-h-[480px] overflow-auto rounded-md border bg-muted/30 p-3 text-xs leading-relaxed">
{JSON.stringify(response, null, 2)}
</pre>
</TabsContent>
</Tabs>
)
}