principles-disciple 1.11.0 → 1.13.0

package/ui/src/charts.tsx

@@ -584,3 +584,369 @@ export function CollapsiblePanel({
     </section>
   );
 }
+
+/**
+ * BulletChart - 子弹图（Performance vs Target）
+ * 用于展示 GFI vs 阈值，带安全/警告/危险分区
+ */
+
+interface BulletChartProps {
+  value: number;
+  target: number;
+  peak?: number;
+  max?: number;
+  width?: number;
+  height?: number;
+  unit?: string;
+}
+
+export function BulletChart({
+  value,
+  target,
+  peak,
+  max = 150,
+  width = 200,
+  height = 28,
+  unit = '',
+}: BulletChartProps) {
+  const pct = Math.min(value / max, 1);
+  const targetPct = Math.min(target / max, 1);
+  const peakPct = peak ? Math.min(peak / max, 1) : 0;
+
+  // Zones
+  const safeEnd = 0.47;  // 70/150
+  const warnEnd = 0.73;  // 110/150
+
+  const barH = height * 0.5;
+  const barY = (height - barH) / 2;
+
+  return (
+    <div className="bullet-chart">
+      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
+        {/* Background zones */}
+        <rect x={0} y={barY} width={width * safeEnd} height={barH} fill="var(--success)" opacity={0.15} rx={3} />
+        <rect x={width * safeEnd} y={barY} width={width * (warnEnd - safeEnd)} height={barH} fill="var(--warning)" opacity={0.15} />
+        <rect x={width * warnEnd} y={barY} width={width * (1 - warnEnd)} height={barH} fill="var(--error)" opacity={0.15} rx={3} />
+
+        {/* Value bar */}
+        <rect
+          x={0} y={barY}
+          width={Math.max(width * pct, 2)}
+          height={barH}
+          fill={value >= target ? 'var(--error)' : value >= target * 0.7 ? 'var(--warning)' : 'var(--success)'}
+          rx={3}
+        >
+          <title>{`GFI: ${value}${unit} | 阈值: ${target}${unit}`}{peak ? ` | 今日峰值: ${peak}${unit}` : ''}</title>
+        </rect>
+
+        {/* Target marker */}
+        <line
+          x1={width * targetPct} y1={barY - 2}
+          x2={width * targetPct} y2={barY + barH + 2}
+          stroke="var(--text-primary)" strokeWidth={2} opacity={0.7}
+        />
+
+        {/* Peak marker */}
+        {peakPct > pct && (
+          <circle cx={width * peakPct} cy={height / 2} r={3} fill="var(--warning)" opacity={0.8} />
+        )}
+      </svg>
+      <div className="bullet-labels" style={{ display: 'flex', justifyContent: 'space-between', marginTop: 2, fontSize: '0.7rem', color: 'var(--text-secondary)' }}>
+        <span>0</span>
+        <span style={{ position: 'relative', left: `-${width * targetPct * 0.3}px` }}>阈值 {target}</span>
+        <span>{max}</span>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * GaugeChart - 半圆仪表盘
+ * 用于展示 Trust Score (0-100)
+ */
+
+interface GaugeChartProps {
+  value: number;
+  max?: number;
+  label: string;
+  sublabel?: string;
+  size?: number;
+  segments?: Array<{ label: string; color: string; max: number }>;
+}
+
+export function GaugeChart({
+  value,
+  max = 100,
+  label,
+  sublabel,
+  size = 100,
+  segments = [
+    { label: 'Observer', color: 'var(--text-secondary)', max: 30 },
+    { label: 'Editor', color: 'var(--info)', max: 60 },
+    { label: 'Developer', color: 'var(--accent)', max: 80 },
+    { label: 'Architect', color: 'var(--success)', max: 100 },
+  ],
+}: GaugeChartProps) {
+  const pct = Math.min(value / max, 1);
+  const radius = (size - 16) / 2;
+  const center = size / 2;
+  const circumference = Math.PI * radius;
+  const arcLength = circumference * pct;
+
+  // Find current segment
+  const currentSeg = segments.find(s => value <= s.max) ?? segments[segments.length - 1];
+
+  return (
+    <div className="gauge-chart" style={{ textAlign: 'center' }}>
+      <svg width={size} height={size / 2 + 20} viewBox={`0 0 ${size} ${size / 2 + 20}`}>
+        {/* Background arc */}
+        <path
+          d={`M ${center - radius} ${center} A ${radius} ${radius} 0 0 1 ${center + radius} ${center}`}
+          fill="none"
+          stroke="var(--bg-sunken)"
+          strokeWidth={8}
+          strokeLinecap="round"
+        />
+        {/* Value arc */}
+        <path
+          d={`M ${center - radius} ${center} A ${radius} ${radius} 0 0 1 ${center + radius} ${center}`}
+          fill="none"
+          stroke={currentSeg.color}
+          strokeWidth={8}
+          strokeLinecap="round"
+          strokeDasharray={`${arcLength} ${circumference}`}
+          style={{ transition: 'stroke-dasharray 0.5s ease' }}
+        />
+        {/* Value text */}
+        <text
+          x={center} y={center - 4}
+          textAnchor="middle"
+          fontSize="18"
+          fontWeight="600"
+          fill="var(--text-primary)"
+        >
+          {value}
+        </text>
+      </svg>
+      <div style={{ fontSize: '0.75rem', color: currentSeg.color, fontWeight: 500 }}>{label}</div>
+      {sublabel && <div style={{ fontSize: '0.65rem', color: 'var(--text-secondary)' }}>{sublabel}</div>}
+    </div>
+  );
+}
+
+/**
+ * PrincipleStack - 原则状态堆叠
+ * 展示原则分布
+ */
+
+interface PrincipleStackProps {
+  candidate: number;
+  probation: number;
+  active: number;
+  deprecated: number;
+}
+
+export function PrincipleStack({ candidate, probation, active, deprecated }: PrincipleStackProps) {
+  const total = candidate + probation + active + deprecated;
+  const segs = [
+    { label: 'Active', value: active, color: 'var(--success)' },
+    { label: 'Probation', value: probation, color: 'var(--warning)' },
+    { label: 'Candidate', value: candidate, color: 'var(--info)' },
+    { label: 'Deprecated', value: deprecated, color: 'var(--text-secondary)' },
+  ].filter(s => s.value > 0);
+
+  if (total === 0) {
+    return (
+      <div className="principle-stack" style={{ textAlign: 'center', padding: 'var(--space-3)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}>
+        No principles yet
+      </div>
+    );
+  }
+
+  return (
+    <div className="principle-stack">
+      {/* Stacked bar */}
+      <div style={{ display: 'flex', height: 8, borderRadius: 4, overflow: 'hidden', marginBottom: 8 }}>
+        {segs.map(seg => (
+          <div
+            key={seg.label}
+            style={{
+              width: `${(seg.value / total) * 100}%`,
+              backgroundColor: seg.color,
+              transition: 'width 0.3s ease',
+            }}
+            title={`${seg.label}: ${seg.value}`}
+          />
+        ))}
+      </div>
+      {/* Legend */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, fontSize: '0.7rem' }}>
+        {segs.map(seg => (
+          <span key={seg.label} style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
+            <span style={{ width: 6, height: 6, borderRadius: '50%', backgroundColor: seg.color, display: 'inline-block' }} />
+            <span style={{ color: 'var(--text-secondary)' }}>{seg.label}</span>
+            <span style={{ fontWeight: 600, color: 'var(--text-primary)' }}>{seg.value}</span>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * QueueBar - 队列状态条
+ * 展示 pending/in-progress/completed
+ */
+
+interface QueueBarProps {
+  pending: number;
+  inProgress: number;
+  completed: number;
+}
+
+export function QueueBar({ pending, inProgress, completed }: QueueBarProps) {
+  const total = pending + inProgress + completed;
+  const items = [
+    { label: 'Pending', value: pending, color: 'var(--warning)' },
+    { label: 'In Progress', value: inProgress, color: 'var(--info)' },
+    { label: 'Completed', value: completed, color: 'var(--success)' },
+  ];
+
+  if (total === 0) {
+    return (
+      <div className="queue-bar" style={{ textAlign: 'center', padding: 'var(--space-3)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}>
+        Queue empty
+      </div>
+    );
+  }
+
+  return (
+    <div className="queue-bar">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        {items.map(item => (
+          <div key={item.label} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <div style={{ width: 6, height: 6, borderRadius: '50%', backgroundColor: item.color, flexShrink: 0 }} />
+            <span style={{ fontSize: '0.7rem', color: 'var(--text-secondary)', minWidth: 55 }}>{item.label}</span>
+            <div style={{ flex: 1, height: 6, backgroundColor: 'var(--bg-sunken)', borderRadius: 3, overflow: 'hidden' }}>
+              <div
+                style={{
+                  width: `${(item.value / total) * 100}%`,
+                  height: '100%',
+                  backgroundColor: item.color,
+                  borderRadius: 3,
+                  minWidth: item.value > 0 ? 4 : 0,
+                  transition: 'width 0.3s ease',
+                }}
+              />
+            </div>
+            <span style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--text-primary)', minWidth: 20, textAlign: 'right' }}>{item.value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * LineChart - 全尺寸折线图
+ * 用于展示 GFI 等时间序列数据的完整趋势
+ */
+
+interface LineChartProps {
+  data: Array<{ label: string; value: number }>;
+  width?: number;
+  height?: number;
+  color?: string;
+  showGrid?: boolean;
+  showDots?: boolean;
+  showArea?: boolean;
+  unit?: string;
+}
+
+export function LineChart({
+  data,
+  width = 560,
+  height = 180,
+  color = 'var(--accent)',
+  showGrid = true,
+  showDots = true,
+  showArea = true,
+  unit = '',
+}: LineChartProps) {
+  if (!data || data.length === 0) {
+    return (
+      <div style={{ height, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)', fontSize: '0.85rem' }}>
+        暂无数据
+      </div>
+    );
+  }
+
+  const padding = { top: 16, right: 16, bottom: 28, left: 44 };
+  const chartW = width - padding.left - padding.right;
+  const chartH = height - padding.top - padding.bottom;
+
+  const values = data.map(d => d.value);
+  const maxVal = Math.max(...values, 1);
+  const minVal = Math.min(...values, 0);
+  const range = maxVal - minVal || 1;
+
+  // Y-axis ticks (5 ticks)
+  const yTicks = Array.from({ length: 5 }, (_, i) => minVal + (range * i) / 4);
+
+  const xStep = data.length > 1 ? chartW / (data.length - 1) : 0;
+
+  const points = data.map((d, i) => ({
+    x: padding.left + (data.length > 1 ? i * xStep : chartW / 2),
+    y: padding.top + chartH - ((d.value - minVal) / range) * chartH,
+    label: d.label,
+    value: d.value,
+  }));
+
+  const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+  const areaPath = linePath + ` L ${points[points.length - 1].x} ${padding.top + chartH} L ${points[0].x} ${padding.top + chartH} Z`;
+
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: 'block' }}>
+      {/* Grid lines */}
+      {showGrid && yTicks.map((tick, i) => {
+        const y = padding.top + chartH - ((tick - minVal) / range) * chartH;
+        return (
+          <g key={i}>
+            <line x1={padding.left} y1={y} x2={padding.left + chartW} y2={y} stroke="var(--border)" strokeWidth={0.5} strokeDasharray="3 3" />
+            <text x={padding.left - 6} y={y + 4} textAnchor="end" fontSize="10" fill="var(--text-secondary)">
+              {Math.round(tick)}
+            </text>
+          </g>
+        );
+      })}
+
+      {/* Area fill */}
+      {showArea && points.length > 1 && (
+        <path d={areaPath} fill={color} fillOpacity={0.08} />
+      )}
+
+      {/* Line */}
+      <path d={linePath} fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+
+      {/* Dots */}
+      {showDots && points.map((p, i) => (
+        <g key={i}>
+          <circle cx={p.x} cy={p.y} r={3} fill={color} stroke="var(--bg-raised)" strokeWidth={1.5} />
+          <title>{p.label}: {p.value}{unit}</title>
+        </g>
+      ))}
+
+      {/* X-axis labels */}
+      {points.map((p, i) => {
+        // Skip some labels if too many
+        const skipCount = data.length > 12 ? 2 : data.length > 8 ? 1 : 0;
+        if (i % (skipCount + 1) !== 0 && i !== points.length - 1) return null;
+        return (
+          <text key={i} x={p.x} y={height - 4} textAnchor="middle" fontSize="9" fill="var(--text-secondary)">
+            {p.label}
+          </text>
+        );
+      })}
+    </svg>
+  );
+}

package/ui/src/components/WorkspaceConfig.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { api } from '../api';
 import { useI18n } from '../i18n/ui';
-import { CollapsiblePanel } from '../charts';
-import { Loading } from './Loading';
+import { Settings, ChevronDown, ChevronUp } from 'lucide-react';
 
 export function WorkspaceConfig() {
   const { t } = useI18n();
+  const [visible, setVisible] = useState(false);
   const [wsData, setWsData] = useState<{
     configs: Array<{ workspaceName: string; enabled: boolean; displayName: string | null; syncEnabled: boolean }>;
     workspaces: Array<{ name: string; path: string; lastSync: string | null; config: null | { workspaceName: string; enabled: boolean; displayName: string | null; syncEnabled: boolean } }>;
@@ -28,8 +28,8 @@ export function WorkspaceConfig() {
   }, []);
 
   useEffect(() => {
-    loadConfigs();
-  }, [loadConfigs]);
+    if (visible) loadConfigs();
+  }, [loadConfigs, visible]);
 
   const handleToggle = async (workspaceName: string, field: 'enabled' | 'syncEnabled', currentValue: boolean) => {
     setSaving(workspaceName);
@@ -61,86 +61,118 @@ export function WorkspaceConfig() {
     }
   };
 
-  if (error) return <div className="panel error">{error}</div>;
-  if (!wsData) return <Loading />;
+  const enabledCount = (wsData?.configs ?? []).filter(c => c.enabled && c.syncEnabled).length;
+  const totalCount = wsData?.workspaces?.length ?? 0;
 
-  return (
-    <CollapsiblePanel
-      title="Workspace Configuration"
-      badge={<span className="badge">{(wsData.configs ?? []).filter(c => c.enabled && c.syncEnabled).length} / {wsData.workspaces?.length ?? 0} enabled</span>}
-      defaultCollapsed={true}
-    >
-      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 'var(--space-4)' }}>
-        <button className="button-secondary" onClick={() => setShowAddForm(!showAddForm)}>
-          {showAddForm ? t('workspace.cancel') : '+ ' + t('workspace.addWorkspace')}
+  // Toggle bar (always visible)
+  if (!visible) {
+    return (
+      <div style={{ marginBottom: 'var(--space-4)' }}>
+        <button
+          className="button-secondary"
+          onClick={() => setVisible(true)}
+          style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', fontSize: '0.8rem' }}
+        >
+          <Settings size={14} />
+          <span>{t('workspace.title')}</span>
+          {wsData && (
+            <span className="badge" style={{ fontSize: '0.7rem' }}>{enabledCount} / {totalCount}</span>
+          )}
         </button>
       </div>
+    );
+  }
 
-      {showAddForm && (
-        <form className="add-workspace-form" onSubmit={handleAddWorkspace} style={{ marginBottom: 'var(--space-4)', padding: 'var(--space-3)', background: 'var(--bg-sunken)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border)' }}>
-          <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'flex-end' }}>
-            <div style={{ flex: 1 }}>
-              <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: 'var(--text-secondary)' }}>{t('workspace.workspaceName')}</label>
-              <input
-                type="text"
-                value={newWsName}
-                onChange={(e) => setNewWsName(e.target.value)}
-                placeholder={t('workspace.placeholder.name')}
-                style={{ width: '100%', padding: 'var(--space-2)', fontSize: '13px', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)' }}
-              />
-            </div>
-            <div style={{ flex: 2 }}>
-              <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: 'var(--text-secondary)' }}>{t('workspace.path')}</label>
-              <input
-                type="text"
-                value={newWsPath}
-                onChange={(e) => setNewWsPath(e.target.value)}
-                placeholder={t('workspace.placeholder.path')}
-                style={{ width: '100%', padding: 'var(--space-2)', fontSize: '13px', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)' }}
-              />
-            </div>
-            <button type="submit" className="button-primary" disabled={adding || !newWsName.trim() || !newWsPath.trim()}>
-              {adding ? t('workspace.adding') : t('workspace.addWorkspace')}
-            </button>
-          </div>
-        </form>
-      )}
+  if (error) return <div className="panel error">{error}</div>;
+  if (!wsData) return <div className="panel" style={{ padding: 'var(--space-3)' }}>Loading...</div>;
 
-      <div className="stack">
-        {(wsData.workspaces ?? []).map((ws) => {
-          const config = ws.config ?? { workspaceName: ws.name, enabled: true, displayName: ws.name, syncEnabled: true };
-          const isSaving = saving === ws.name;
-          return (
-            <div className="row-card" key={ws.name}>
-              <div>
-                <strong>{ws.name}</strong>
-                <span>{ws.path}</span>
+  return (
+    <section className="panel" style={{ marginBottom: 'var(--space-4)' }}>
+      <div
+        className="panel-header"
+        style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
+        onClick={() => setVisible(false)}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+          <Settings size={16} />
+          <h3 style={{ fontSize: '0.9rem', margin: 0 }}>{t('workspace.title')}</h3>
+          <span className="badge" style={{ fontSize: '0.7rem' }}>{enabledCount} / {totalCount} enabled</span>
+        </div>
+        <ChevronUp size={18} style={{ color: 'var(--text-secondary)' }} />
+      </div>
+      <div className="panel-content">
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 'var(--space-4)' }}>
+          <button className="button-secondary" onClick={() => setShowAddForm(!showAddForm)}>
+            {showAddForm ? t('workspace.cancel') : '+ ' + t('workspace.addWorkspace')}
+          </button>
+        </div>
+
+        {showAddForm && (
+          <form className="add-workspace-form" onSubmit={handleAddWorkspace} style={{ marginBottom: 'var(--space-4)', padding: 'var(--space-3)', background: 'var(--bg-sunken)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border)' }}>
+            <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'flex-end' }}>
+              <div style={{ flex: 1 }}>
+                <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: 'var(--text-secondary)' }}>{t('workspace.workspaceName')}</label>
+                <input
+                  type="text"
+                  value={newWsName}
+                  onChange={(e) => setNewWsName(e.target.value)}
+                  placeholder={t('workspace.placeholder.name')}
+                  style={{ width: '100%', padding: 'var(--space-2)', fontSize: '13px', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)' }}
+                />
               </div>
-              <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center' }}>
-                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', cursor: 'pointer' }}>
-                  <input
-                    type="checkbox"
-                    checked={config.enabled}
-                    onChange={() => handleToggle(ws.name, 'enabled', config.enabled)}
-                    disabled={isSaving}
-                  />
-                  <span style={{ fontSize: '13px' }}>{t('workspace.include')}</span>
-                </label>
-                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', cursor: 'pointer' }}>
-                  <input
-                    type="checkbox"
-                    checked={config.syncEnabled}
-                    onChange={() => handleToggle(ws.name, 'syncEnabled', config.syncEnabled)}
-                    disabled={isSaving || !config.enabled}
-                  />
-                  <span style={{ fontSize: '13px' }}>{t('workspace.sync')}</span>
-                </label>
+              <div style={{ flex: 2 }}>
+                <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: 'var(--text-secondary)' }}>{t('workspace.path')}</label>
+                <input
+                  type="text"
+                  value={newWsPath}
+                  onChange={(e) => setNewWsPath(e.target.value)}
+                  placeholder={t('workspace.placeholder.path')}
+                  style={{ width: '100%', padding: 'var(--space-2)', fontSize: '13px', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)' }}
+                />
               </div>
+              <button type="submit" className="button-primary" disabled={adding || !newWsName.trim() || !newWsPath.trim()}>
+                {adding ? t('workspace.adding') : t('workspace.addWorkspace')}
+              </button>
             </div>
-          );
-        })}
+          </form>
+        )}
+
+        <div className="stack">
+          {(wsData.workspaces ?? []).map((ws) => {
+            const config = ws.config ?? { workspaceName: ws.name, enabled: true, displayName: ws.name, syncEnabled: true };
+            const isSaving = saving === ws.name;
+            return (
+              <div className="row-card" key={ws.name}>
+                <div>
+                  <strong>{ws.name}</strong>
+                  <span>{ws.path}</span>
+                </div>
+                <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center' }}>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', cursor: 'pointer' }}>
+                    <input
+                      type="checkbox"
+                      checked={config.enabled}
+                      onChange={() => handleToggle(ws.name, 'enabled', config.enabled)}
+                      disabled={isSaving}
+                    />
+                    <span style={{ fontSize: '13px' }}>{t('workspace.include')}</span>
+                  </label>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', cursor: 'pointer' }}>
+                    <input
+                      type="checkbox"
+                      checked={config.syncEnabled}
+                      onChange={() => handleToggle(ws.name, 'syncEnabled', config.syncEnabled)}
+                      disabled={isSaving || !config.enabled}
+                    />
+                    <span style={{ fontSize: '13px' }}>{t('workspace.sync')}</span>
+                  </label>
+                </div>
+              </div>
+            );
+          })}
+        </div>
       </div>
-    </CollapsiblePanel>
+    </section>
   );
 }