feat(ui): add ButlerPanel — pain points, proposals, memory insights

- Add Butler types (PainPoint, Proposal, DelegationResult) to viking-client.ts
- Add butler API functions: getButlerInsights, getButlerProposals,
  recordButlerPainPoint, generateButlerSolution, updateButlerProposalStatus,
  butlerDelegateTask
- Create ButlerPanel with three sections:
  - InsightsSection: pain point cards with evidence chain, severity, confidence
  - ProposalsSection: solution cards with accept/reject actions
  - MemorySection: Viking memory entries per agent
- Create useButlerInsights hook for data fetching
- Add "管家" tab to RightPanel with ConciergeBell icon

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

desktop/src/components/ButlerPanel/InsightsSection.tsx

@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import { ChevronDown, ChevronUp, AlertTriangle, TrendingUp, Info } from 'lucide-react';
+import type { ButlerPainPoint } from '../../lib/viking-client';
+
+interface InsightsSectionProps {
+  painPoints: ButlerPainPoint[];
+}
+
+function SeverityBadge({ severity }: { severity: ButlerPainPoint['severity'] }) {
+  const config = {
+    low: { bg: 'bg-blue-100 dark:bg-blue-900/30', text: 'text-blue-700 dark:text-blue-300', label: '低' },
+    medium: { bg: 'bg-amber-100 dark:bg-amber-900/30', text: 'text-amber-700 dark:text-amber-300', label: '中' },
+    high: { bg: 'bg-red-100 dark:bg-red-900/30', text: 'text-red-700 dark:text-red-300', label: '高' },
+  };
+  const c = config[severity];
+  return <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${c.bg} ${c.text}`}>{c.label}</span>;
+}
+
+function StatusBadge({ status }: { status: ButlerPainPoint['status'] }) {
+  const config = {
+    detected: { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-600 dark:text-gray-400', label: '已检测' },
+    confirmed: { bg: 'bg-amber-100 dark:bg-amber-900/30', text: 'text-amber-700 dark:text-amber-300', label: '已确认' },
+    solving: { bg: 'bg-blue-100 dark:bg-blue-900/30', text: 'text-blue-700 dark:text-blue-300', label: '解决中' },
+    solved: { bg: 'bg-emerald-100 dark:bg-emerald-900/30', text: 'text-emerald-700 dark:text-emerald-300', label: '已解决' },
+    dismissed: { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-500 dark:text-gray-500', label: '已忽略' },
+  };
+  const c = config[status];
+  return <span className={`px-1.5 py-0.5 rounded text-xs ${c.bg} ${c.text}`}>{c.label}</span>;
+}
+
+export function InsightsSection({ painPoints }: InsightsSectionProps) {
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  if (painPoints.length === 0) {
+    return (
+      <div className="text-center py-8">
+        <Info className="w-8 h-8 mx-auto mb-2 text-gray-300 dark:text-gray-600" />
+        <p className="text-sm text-gray-500 dark:text-gray-400">暂无洞察</p>
+        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+          管家会在对话中自动发现您遇到的反复困难
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {painPoints.map((pp) => {
+        const isExpanded = expandedId === pp.id;
+        return (
+          <div
+            key={pp.id}
+            className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden"
+          >
+            <button
+              className="w-full px-3 py-2.5 flex items-start gap-2 text-left hover:bg-gray-50 dark:hover:bg-gray-750"
+              onClick={() => setExpandedId(isExpanded ? null : pp.id)}
+            >
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <AlertTriangle className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
+                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                    {pp.summary}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <SeverityBadge severity={pp.severity} />
+                  <StatusBadge status={pp.status} />
+                  <span className="text-xs text-gray-400 dark:text-gray-500">
+                    {pp.occurrence_count} 次
+                  </span>
+                </div>
+              </div>
+              <div className="flex items-center gap-2 flex-shrink-0">
+                <div className="flex items-center gap-1">
+                  <TrendingUp className="w-3 h-3 text-gray-400" />
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                    {Math.round(pp.confidence * 100)}%
+                  </span>
+                </div>
+                {isExpanded ? (
+                  <ChevronUp className="w-4 h-4 text-gray-400" />
+                ) : (
+                  <ChevronDown className="w-4 h-4 text-gray-400" />
+                )}
+              </div>
+            </button>
+
+            {isExpanded && (
+              <div className="px-3 pb-3 border-t border-gray-100 dark:border-gray-700 pt-2 space-y-2">
+                <div className="text-xs text-gray-500 dark:text-gray-400">
+                  分类: <span className="text-gray-700 dark:text-gray-300">{pp.category}</span>
+                </div>
+                <div className="space-y-1">
+                  <div className="text-xs font-medium text-gray-600 dark:text-gray-300">证据链:</div>
+                  {pp.evidence.map((e, i) => (
+                    <div
+                      key={i}
+                      className="text-xs bg-gray-50 dark:bg-gray-750 rounded p-2"
+                    >
+                      <div className="text-gray-700 dark:text-gray-300 italic">
+                        &ldquo;{e.user_said}&rdquo;
+                      </div>
+                      <div className="text-gray-400 dark:text-gray-500 mt-0.5">
+                        {e.why_flagged}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <div className="flex items-center gap-2 text-xs text-gray-400 dark:text-gray-500">
+                  <span>首次: {new Date(pp.first_seen).toLocaleDateString()}</span>
+                  <span>|</span>
+                  <span>最近: {new Date(pp.last_seen).toLocaleDateString()}</span>
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}