@assistkick/create 1.6.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/AgentsView.tsx

@@ -0,0 +1,307 @@
+/**
+ * Agents View — management UI for agent prompts.
+ * Supports global and project-scoped views with create, edit, delete, and reset.
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { apiClient } from '../api/client';
+import { useProjectStore } from '../stores/useProjectStore';
+import { Button } from './ds/Button';
+import { Plus, RotateCcw, Trash2, Save, ChevronDown } from 'lucide-react';
+
+interface Agent {
+  id: string;
+  name: string;
+  promptTemplate: string;
+  projectId: string | null;
+  isDefault: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+const PLACEHOLDER_DOCS = [
+  { name: '{{featureId}}', description: 'The feature ID being worked on', stages: 'All' },
+  { name: '{{projectId}}', description: 'The current project ID', stages: 'All' },
+  { name: '{{mainToolsDir}}', description: 'Absolute path to the tools directory', stages: 'All' },
+  { name: '{{mainSkillDir}}', description: 'Absolute path to shared data directory', stages: 'All' },
+  { name: '{{pidFlag}}', description: 'The --project-id flag string (or empty)', stages: 'All' },
+  { name: '{{cycle}}', description: 'Current development cycle number', stages: 'Developer' },
+  { name: '{{previousReviewNotes}}', description: 'Review feedback from prior cycle', stages: 'Developer' },
+  { name: '{{debuggerFindings}}', description: 'Root cause analysis from debugger', stages: 'Developer' },
+  { name: '{{unaddressedNotes}}', description: 'QA rejection notes to investigate', stages: 'Debugger' },
+];
+
+export function AgentsView() {
+  const projects = useProjectStore((s) => s.projects);
+  const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
+
+  const [scope, setScope] = useState<'global' | 'project'>('global');
+  const [projectId, setProjectId] = useState(selectedProjectId || '');
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
+  const [editName, setEditName] = useState('');
+  const [editPrompt, setEditPrompt] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const [successMsg, setSuccessMsg] = useState('');
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const pid = scope === 'project' ? projectId : undefined;
+      const agentsResp = await apiClient.fetchAgents(scope, pid);
+      setAgents(agentsResp.agents);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load agents');
+    } finally {
+      setLoading(false);
+    }
+  }, [scope, projectId]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  useEffect(() => {
+    if (selectedProjectId) setProjectId(selectedProjectId);
+  }, [selectedProjectId]);
+
+  const showSuccess = (msg: string) => {
+    setSuccessMsg(msg);
+    setTimeout(() => setSuccessMsg(''), 3000);
+  };
+
+  const selectAgent = (agent: Agent) => {
+    setSelectedAgent(agent);
+    setEditName(agent.name);
+    setEditPrompt(agent.promptTemplate);
+    setError('');
+  };
+
+  const handleCreate = async () => {
+    try {
+      const data: any = {
+        name: 'New Agent',
+        promptTemplate: 'You are a helpful agent.\n\nFeature: {{featureId}}\nProject: {{projectId}}',
+      };
+      if (scope === 'project' && projectId) data.projectId = projectId;
+      const resp = await apiClient.createAgent(data);
+      await fetchData();
+      selectAgent(resp.agent);
+      showSuccess('Agent created');
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const handleSave = async () => {
+    if (!selectedAgent) return;
+    setSaving(true);
+    setError('');
+    try {
+      const resp = await apiClient.updateAgent(selectedAgent.id, {
+        name: editName.trim(),
+        promptTemplate: editPrompt,
+      });
+      setSelectedAgent(resp.agent);
+      await fetchData();
+      showSuccess('Agent saved');
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!selectedAgent) return;
+    setError('');
+    try {
+      await apiClient.deleteAgent(selectedAgent.id);
+      setSelectedAgent(null);
+      await fetchData();
+      showSuccess('Agent deleted');
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const handleReset = async () => {
+    if (!selectedAgent) return;
+    setError('');
+    try {
+      const resp = await apiClient.resetAgent(selectedAgent.id);
+      selectAgent(resp.agent);
+      await fetchData();
+      showSuccess('Agent reset to default');
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const hasChanges = selectedAgent && (editName !== selectedAgent.name || editPrompt !== selectedAgent.promptTemplate);
+
+  return (
+    <div className="flex h-full">
+      {/* Left Panel — Agent List */}
+      <div className="w-80 border-r border-edge flex flex-col shrink-0">
+        {/* Scope Toggle */}
+        <div className="p-3 border-b border-edge space-y-2">
+          <div className="flex gap-1 p-0.5 rounded-lg bg-surface-raised">
+            <button
+              onClick={() => setScope('global')}
+              className={`flex-1 px-3 py-1.5 rounded-md text-[12px] font-medium transition-all ${
+                scope === 'global'
+                  ? 'bg-accent text-surface shadow-sm'
+                  : 'text-content-muted hover:text-content'
+              }`}
+            >
+              Global
+            </button>
+            <button
+              onClick={() => setScope('project')}
+              className={`flex-1 px-3 py-1.5 rounded-md text-[12px] font-medium transition-all ${
+                scope === 'project'
+                  ? 'bg-accent text-surface shadow-sm'
+                  : 'text-content-muted hover:text-content'
+              }`}
+            >
+              Project
+            </button>
+          </div>
+
+          {scope === 'project' && (
+            <div className="relative">
+              <select
+                value={projectId}
+                onChange={(e) => setProjectId(e.target.value)}
+                className="w-full px-3 py-1.5 rounded-md border border-edge bg-surface text-[12px] text-content appearance-none pr-7"
+              >
+                {projects.map(p => (
+                  <option key={p.id} value={p.id}>{p.name}</option>
+                ))}
+              </select>
+              <ChevronDown size={12} className="absolute right-2 top-1/2 -translate-y-1/2 text-content-muted pointer-events-none" />
+            </div>
+          )}
+        </div>
+
+        {/* Agent List */}
+        <div className="flex-1 overflow-y-auto">
+          {loading ? (
+            <div className="p-4 text-center text-[12px] text-content-muted">Loading...</div>
+          ) : agents.length === 0 ? (
+            <div className="p-4 text-center text-[12px] text-content-muted">No agents found</div>
+          ) : (
+            agents.map(agent => {
+              const isSelected = selectedAgent?.id === agent.id;
+              return (
+                <button
+                  key={agent.id}
+                  onClick={() => selectAgent(agent)}
+                  className={`w-full text-left px-3 py-2.5 border-b border-edge transition-all ${
+                    isSelected
+                      ? 'bg-accent/10 border-l-2 border-l-accent'
+                      : 'hover:bg-surface-raised border-l-2 border-l-transparent'
+                  }`}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="text-[13px] font-medium text-content truncate">{agent.name}</span>
+                    {agent.isDefault === 1 && (
+                      <span className="shrink-0 px-1.5 py-0.5 rounded text-[9px] font-semibold uppercase bg-accent/10 text-accent">Default</span>
+                    )}
+                  </div>
+                </button>
+              );
+            })
+          )}
+        </div>
+
+        {/* Create Agent Button */}
+        <div className="p-3 border-t border-edge">
+          <Button variant="primary" size="sm" icon={<Plus size={12} />} onClick={handleCreate} className="w-full justify-center">
+            Create Agent
+          </Button>
+        </div>
+      </div>
+
+      {/* Right Panel — Agent Detail */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {error && (
+          <div className="mx-4 mt-3 px-3 py-2 rounded-md bg-error/10 border border-error/20 text-error text-[12px] flex items-center justify-between">
+            <span>{error}</span>
+            <button onClick={() => setError('')} className="text-error hover:text-error/80">&times;</button>
+          </div>
+        )}
+        {successMsg && (
+          <div className="mx-4 mt-3 px-3 py-2 rounded-md bg-accent/10 border border-accent/20 text-accent text-[12px]">
+            {successMsg}
+          </div>
+        )}
+
+        {!selectedAgent ? (
+          <div className="flex-1 flex items-center justify-center text-content-muted text-[13px]">
+            Select an agent to view details
+          </div>
+        ) : (
+          <>
+            {/* Header */}
+            <div className="p-4 border-b border-edge flex items-center justify-between gap-3">
+              <input
+                value={editName}
+                onChange={e => setEditName(e.target.value)}
+                className="flex-1 px-3 py-1.5 rounded-md border border-edge bg-surface text-[14px] font-medium text-content"
+                placeholder="Agent name"
+              />
+              <div className="flex items-center gap-2">
+                {selectedAgent.isDefault === 1 && (
+                  <Button variant="ghost" size="sm" icon={<RotateCcw size={12} />} onClick={handleReset}>
+                    Reset
+                  </Button>
+                )}
+                {selectedAgent.isDefault !== 1 && (
+                  <Button variant="danger" size="sm" icon={<Trash2 size={12} />} onClick={handleDelete}>
+                    Delete
+                  </Button>
+                )}
+                <Button variant="primary" size="sm" icon={<Save size={12} />} onClick={handleSave} disabled={saving || !hasChanges}>
+                  {saving ? 'Saving...' : 'Save'}
+                </Button>
+              </div>
+            </div>
+
+            {/* Prompt Template Editor */}
+            <div className="flex-1 flex overflow-hidden">
+              <div className="flex-1 flex flex-col p-4 overflow-hidden">
+                <div className="text-[11px] font-medium text-content-muted uppercase tracking-wider mb-2">Prompt Template</div>
+                <textarea
+                  value={editPrompt}
+                  onChange={e => setEditPrompt(e.target.value)}
+                  className="flex-1 w-full px-3 py-2 rounded-md border border-edge bg-surface text-[12px] text-content font-mono resize-none focus:border-accent/40 focus:outline-none"
+                  placeholder="Enter agent prompt template..."
+                  spellCheck={false}
+                />
+              </div>
+
+              {/* Placeholder Info Panel */}
+              <div className="w-64 border-l border-edge p-3 overflow-y-auto shrink-0">
+                <div className="text-[11px] font-medium text-content-muted uppercase tracking-wider mb-3">Placeholder Variables</div>
+                <div className="space-y-2.5">
+                  {PLACEHOLDER_DOCS.map(p => (
+                    <div key={p.name} className="text-[11px]">
+                      <code className="px-1 py-0.5 rounded bg-accent/10 text-accent font-mono text-[10px]">{p.name}</code>
+                      <div className="mt-0.5 text-content-muted">{p.description}</div>
+                      <div className="text-[9px] text-content-muted/60">{p.stages}</div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/assistkick-product-system/packages/frontend/src/components/CoherenceView.tsx

@@ -7,12 +7,25 @@ const TYPE_LABELS: Record<string, string> = {
   deprecate_node: 'Remove Node', update_description: 'Update Description',
   edge: 'Add Edge', node: 'Add Node',
 };
-const TYPE_CSS: Record<string, string> = {
-  add_edge: 'add-edge', add_node: 'add-node', remove_edge: 'remove-edge',
-  deprecate_node: 'deprecate-node', update_description: 'update-desc',
-  edge: 'add-edge', node: 'add-node',
+const TYPE_TW: Record<string, string> = {
+  add_edge: 'text-accent bg-[rgba(77,171,247,0.12)]',
+  add_node: 'text-[#ffd43b] bg-[rgba(255,212,59,0.12)]',
+  remove_edge: 'text-[#ff6b6b] bg-[rgba(255,107,107,0.12)]',
+  deprecate_node: 'text-[#ff6b6b] bg-[rgba(255,107,107,0.12)]',
+  update_description: 'text-[#51cf66] bg-[rgba(81,207,102,0.12)]',
+  edge: 'text-accent bg-[rgba(77,171,247,0.12)]',
+  node: 'text-[#ffd43b] bg-[rgba(255,212,59,0.12)]',
+};
+const CONFIDENCE_TW: Record<string, string> = {
+  high: 'text-[#40c057] bg-[rgba(64,192,87,0.12)]',
+  medium: 'text-[#fab005] bg-[rgba(250,176,5,0.12)]',
+  low: 'text-content-muted bg-surface-raised',
 };
 const CONFIDENCE_LABELS: Record<string, string> = { high: 'High', medium: 'Medium', low: 'Low' };
+const STATUS_TW: Record<string, string> = {
+  approved: 'text-[#40c057] bg-[rgba(64,192,87,0.12)]',
+  dismissed: 'text-content-muted bg-surface-raised',
+};
 
 interface CoherenceViewProps {
   graphData: any;
@@ -161,9 +174,8 @@ export function CoherenceView({ graphData, onNodeClick, projectId }: CoherenceVi
     const node = findNode(nodeId);
     return (
       <span
-        className="coherence-node-ref"
+        className={`text-accent ${node ? 'cursor-pointer' : 'cursor-default'} no-underline hover:underline`}
         onClick={() => { if (node) onNodeClick(node); }}
-        style={{ cursor: node ? 'pointer' : 'default' }}
       >
         {node ? node.name : nodeId}
       </span>
@@ -174,34 +186,34 @@ export function CoherenceView({ graphData, onNodeClick, projectId }: CoherenceVi
     switch (proposal.type) {
       case 'add_edge': case 'edge':
         return (
-          <div className="coherence-proposal-edge">
+          <div className="text-xs mb-2 leading-relaxed">
             <NodeRef nodeId={proposal.from_id} />
-            <span className="coherence-edge-arrow"> --{proposal.relation}--&gt; </span>
+            <span className="text-content-muted text-[11px]"> --{proposal.relation}--&gt; </span>
             <NodeRef nodeId={proposal.to_id} />
           </div>
         );
       case 'remove_edge':
         return (
-          <div className="coherence-proposal-edge coherence-proposal-remove">
+          <div className="text-xs mb-2 leading-relaxed line-through opacity-80">
             <NodeRef nodeId={proposal.from_id} />
-            <span className="coherence-edge-arrow"> --{proposal.relation}--&gt; </span>
+            <span className="text-content-muted text-[11px]"> --{proposal.relation}--&gt; </span>
             <NodeRef nodeId={proposal.to_id} />
           </div>
         );
       case 'add_node': case 'node':
         return (
           <>
-            <div className="coherence-proposal-node">
-              <span className="coherence-node-type-badge">{proposal.proposed_node_type}</span>
-              <span className="coherence-node-name">{proposal.proposed_node_name}</span>
+            <div className="flex items-center gap-2 mb-2">
+              <span className="text-[10px] text-content-muted uppercase tracking-wider bg-surface-raised px-2 py-0.5 rounded-sm">{proposal.proposed_node_type}</span>
+              <span className="text-xs font-medium text-content">{proposal.proposed_node_name}</span>
             </div>
             {proposal.suggested_edges?.length > 0 && (
-              <div className="coherence-suggested-edges">
-                <span className="coherence-suggested-label">Suggested edges:</span>
+              <div className="mb-2 pl-3">
+                <span className="text-[10px] text-content-muted uppercase tracking-wider">Suggested edges:</span>
                 {proposal.suggested_edges.map((edge: any, i: number) => {
                   const fromName = edge.from_id === 'NEW' ? proposal.proposed_node_name : (findNode(edge.from_id)?.name || edge.from_id);
                   const toName = edge.to_id === 'NEW' ? proposal.proposed_node_name : (findNode(edge.to_id)?.name || edge.to_id);
-                  return <div key={i} className="coherence-suggested-edge">{fromName} --{edge.relation}--&gt; {toName}</div>;
+                  return <div key={i} className="text-[11px] text-content-secondary py-0.5">{fromName} --{edge.relation}--&gt; {toName}</div>;
                 })}
               </div>
             )}
@@ -210,16 +222,16 @@ export function CoherenceView({ graphData, onNodeClick, projectId }: CoherenceVi
       case 'deprecate_node':
         return (
           <>
-            <div className="coherence-proposal-node coherence-proposal-remove">
+            <div className="flex items-center gap-2 mb-2 line-through opacity-80">
               <NodeRef nodeId={proposal.target_node_id} />
             </div>
             {proposal.affected_edges?.length > 0 && (
-              <div className="coherence-affected-edges">
-                <span className="coherence-suggested-label">
+              <div className="mb-2 pl-3">
+                <span className="text-[10px] text-content-muted uppercase tracking-wider">
                   Will also remove {proposal.affected_edges.length} edge{proposal.affected_edges.length > 1 ? 's' : ''}:
                 </span>
                 {proposal.affected_edges.map((edge: any, i: number) => (
-                  <div key={i} className="coherence-suggested-edge coherence-removal-edge">
+                  <div key={i} className="text-[11px] text-content-secondary py-0.5 text-[#ff6b6b]">
                     {findNode(edge.from)?.name || edge.from} --{edge.relation}--&gt; {findNode(edge.to)?.name || edge.to}
                   </div>
                 ))}
@@ -230,63 +242,67 @@ export function CoherenceView({ graphData, onNodeClick, projectId }: CoherenceVi
       case 'update_description':
         return (
           <>
-            <div className="coherence-proposal-update">
+            <div className="mb-2">
               <NodeRef nodeId={proposal.target_node_id} />
             </div>
             {proposal.proposed_description && (
-              <div className="coherence-proposed-desc">
-                <span className="coherence-suggested-label">Suggested description:</span>
-                <div className="coherence-desc-preview">{proposal.proposed_description}</div>
+              <div className="mb-2">
+                <span className="text-[10px] text-content-muted uppercase tracking-wider">Suggested description:</span>
+                <div className="text-[11px] text-content-secondary bg-surface-raised rounded px-2.5 py-2 mt-1 whitespace-pre-wrap max-h-[120px] overflow-y-auto">{proposal.proposed_description}</div>
               </div>
             )}
           </>
         );
       default:
-        return <div className="coherence-proposal-generic">{JSON.stringify(proposal)}</div>;
+        return <div>{JSON.stringify(proposal)}</div>;
     }
   };
 
   const ProposalCard = ({ proposal, resolved, conflicts, inBatch }: { proposal: any; resolved: boolean; conflicts: any; inBatch?: boolean }) => {
     const hasConflict = conflicts?.[proposal.id]?.length > 0;
-    const statusClass = proposal.status === 'approved' ? 'approved' : proposal.status === 'dismissed' ? 'dismissed' : '';
+    const isApproved = proposal.status === 'approved';
+    const isDismissed = proposal.status === 'dismissed';
 
     return (
-      <div className={`coherence-proposal ${statusClass}${hasConflict ? ' coherence-proposal-conflict' : ''}`} data-id={proposal.id}>
-        <div className="coherence-proposal-header">
-          <span className={`coherence-proposal-type coherence-type-${TYPE_CSS[proposal.type] || 'default'}`}>
+      <div
+        className={`bg-surface-alt border border-edge rounded-md px-4 py-3.5 mb-2.5 transition-[border-color] duration-150 hover:border-content-muted${isApproved ? ' border-l-[3px] border-l-[#40c057] opacity-70' : ''}${isDismissed ? ' border-l-[3px] border-l-content-muted opacity-50' : ''}${hasConflict ? ' border-[#ff6b6b]' : ''}`}
+        data-id={proposal.id}
+      >
+        <div className="flex items-center gap-2 mb-2">
+          <span className={`text-[10px] font-semibold uppercase tracking-wide px-2 py-0.5 rounded-sm ${TYPE_TW[proposal.type] || ''}`}>
             {TYPE_LABELS[proposal.type] || proposal.type}
           </span>
           {proposal.confidence && (
-            <span className={`coherence-confidence coherence-confidence-${proposal.confidence}`}>
+            <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-sm capitalize ${CONFIDENCE_TW[proposal.confidence] || ''}`}>
               {CONFIDENCE_LABELS[proposal.confidence] || proposal.confidence}
             </span>
           )}
           {resolved && (
-            <span className={`coherence-proposal-status-badge coherence-status-${proposal.status}`}>{proposal.status}</span>
+            <span className={`text-[10px] px-2 py-0.5 rounded-sm font-semibold capitalize ${STATUS_TW[proposal.status] || ''}`}>{proposal.status}</span>
           )}
         </div>
         {hasConflict && (
-          <div className="coherence-conflict-warning">Conflicts with other proposals — resolve the conflict before approving.</div>
+          <div className="text-[11px] text-[#ff6b6b] bg-[rgba(255,107,107,0.08)] border border-[rgba(255,107,107,0.2)] rounded px-2.5 py-1.5 mb-2">Conflicts with other proposals — resolve the conflict before approving.</div>
         )}
         <ProposalContent proposal={proposal} />
-        {!inBatch && <div className="coherence-proposal-reasoning">{proposal.reasoning}</div>}
+        {!inBatch && <div className="text-xs text-content-secondary leading-relaxed mb-2.5 px-2.5 py-2 bg-surface-raised rounded">{proposal.reasoning}</div>}
         {!resolved && (
-          <div className="coherence-proposal-actions">
+          <div className="flex gap-2">
             <button
-              className="coherence-approve-btn"
+              className="px-3.5 py-[5px] rounded font-mono text-[11px] cursor-pointer transition-[background,color] duration-150 bg-transparent border border-[#40c057] text-[#40c057] hover:enabled:bg-[#40c057] hover:enabled:text-white disabled:opacity-60 disabled:cursor-not-allowed"
               disabled={applyingIds.has(proposal.id)}
               onClick={() => handleApprove(proposal.id)}
             >
               {applyingIds.has(proposal.id) ? 'Applying...' : 'Approve'}
             </button>
-            <button className="coherence-dismiss-btn" onClick={() => handleDismiss(proposal.id)}>Dismiss</button>
+            <button className="px-3.5 py-[5px] rounded font-mono text-[11px] cursor-pointer transition-[background,color] duration-150 bg-transparent border border-edge text-content-secondary hover:border-content hover:text-content" onClick={() => handleDismiss(proposal.id)}>Dismiss</button>
           </div>
         )}
       </div>
     );
   };
 
-  if (error) return <div className="coherence-error">Failed to load coherence data: {error}</div>;
+  if (error) return <div className="text-error text-[13px] p-6 text-center">Failed to load coherence data: {error}</div>;
   if (!data) return <div>Loading...</div>;
 
   const isRunning = data.review_status === 'running';
@@ -301,14 +317,14 @@ export function CoherenceView({ graphData, onNodeClick, projectId }: CoherenceVi
   const { batched, unbatched } = groupByBatch(sortedPending);
 
   return (
-    <div className="coherence-panel">
-      <div className="coherence-header">
-        <div className="coherence-header-left">
-          <h2 className="coherence-title">Coherence Review</h2>
-          <span className="coherence-last-review">Last review: {lastReview}</span>
+    <div className="max-w-[800px] mx-auto">
+      <div className="flex items-center justify-between mb-5 pb-4 border-b border-edge">
+        <div className="flex flex-col gap-1">
+          <h2 className="text-base font-semibold text-content">Coherence Review</h2>
+          <span className="text-[11px] text-content-muted">Last review: {lastReview}</span>
         </div>
         <button
-          className={`coherence-run-btn${isRunning ? ' running' : ''}`}
+          className={`px-4 py-2 bg-transparent border border-accent rounded text-accent font-mono text-xs cursor-pointer transition-[background,color] duration-150 hover:enabled:bg-accent hover:enabled:text-white disabled:opacity-60 disabled:cursor-not-allowed${isRunning ? ' animate-pulse' : ''}`}
           disabled={runDisabled}
           title={hasPending && !isRunning ? 'Resolve all pending proposals first' : ''}
           onClick={handleRunReview}
@@ -318,24 +334,24 @@ export function CoherenceView({ graphData, onNodeClick, projectId }: CoherenceVi
       </div>
 
       {data.partial_run && !isRunning && (
-        <div className="coherence-warning-banner">
+        <div className="bg-[rgba(250,176,5,0.08)] border border-[rgba(250,176,5,0.2)] rounded px-4 py-2.5 mb-4 text-xs text-[#fab005]">
           The last review did not complete fully. Some proposals may be missing.
         </div>
       )}
 
       {isRunning && (
-        <div className="coherence-running-banner">
+        <div className="bg-[rgba(77,171,247,0.08)] border border-[rgba(77,171,247,0.2)] rounded px-4 py-3 mb-4 text-xs text-accent animate-pulse">
           {data.progress?.message || 'AI agent is analyzing the graph for inconsistencies...'}
         </div>
       )}
 
-      <div className="coherence-section">
-        <h3 className="coherence-section-title">
+      <div className="mb-6">
+        <h3 className="text-[13px] font-semibold text-content mb-3 uppercase tracking-wide">
           Pending Proposals{hasPending ? ` (${pendingProposals.length})` : ''}
         </h3>
 
         {!hasPending && !isRunning && (
-          <div className={`coherence-empty${data.last_review_timestamp && resolvedProposals.length === 0 ? ' coherence-no-issues' : ''}`}>
+          <div className={`text-xs text-content-muted p-6 text-center bg-surface-alt border border-dashed border-edge rounded-md${data.last_review_timestamp && resolvedProposals.length === 0 ? ' text-[#40c057] border-[rgba(64,192,87,0.3)] bg-[rgba(64,192,87,0.06)]' : ''}`}>
             {data.last_review_timestamp && resolvedProposals.length === 0
               ? 'No issues found. The graph is coherent.'
               : data.last_review_timestamp
@@ -349,18 +365,18 @@ export function CoherenceView({ graphData, onNodeClick, projectId }: CoherenceVi
           const typeLabels = [...new Set(batchProposals.map((p: any) => TYPE_LABELS[p.type] || p.type))].join(', ');
 
           return (
-            <div key={batchId} className="coherence-batch" data-batch={batchId}>
-              <div className="coherence-batch-header">
-                <div className="coherence-batch-info">
-                  <span className="coherence-batch-badge">Batch ({batchProposals.length})</span>
-                  <span className="coherence-batch-types">{typeLabels}</span>
+            <div key={batchId} className="bg-surface-alt border border-edge rounded-md px-4 py-3.5 mb-2.5" data-batch={batchId}>
+              <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[10px] font-semibold text-accent bg-[rgba(77,171,247,0.12)] px-2 py-0.5 rounded-sm">Batch ({batchProposals.length})</span>
+                  <span className="text-[11px] text-content-muted">{typeLabels}</span>
                 </div>
-                <div className="coherence-batch-actions">
-                  <button className="coherence-batch-expand-btn" onClick={() => toggleBatch(batchId)}>
+                <div className="flex gap-2">
+                  <button className="px-2.5 py-1 bg-transparent border border-edge rounded text-content-secondary font-mono text-[10px] cursor-pointer hover:border-content hover:text-content" onClick={() => toggleBatch(batchId)}>
                     {isExpanded ? 'Collapse' : 'Expand to cherry-pick'}
                   </button>
                   <button
-                    className="coherence-approve-btn coherence-batch-approve-btn"
+                    className="px-3.5 py-[5px] rounded font-mono text-[11px] cursor-pointer transition-[background,color] duration-150 bg-transparent border border-[#40c057] text-[#40c057] hover:enabled:bg-[#40c057] hover:enabled:text-white disabled:opacity-60 disabled:cursor-not-allowed"
                     disabled={applyingIds.has(batchId)}
                     onClick={() => handleBatchApprove(batchId)}
                   >
@@ -368,21 +384,21 @@ export function CoherenceView({ graphData, onNodeClick, projectId }: CoherenceVi
                   </button>
                 </div>
               </div>
-              <div className="coherence-proposal-reasoning">{batchProposals[0]?.reasoning || ''}</div>
+              <div className="text-xs text-content-secondary leading-relaxed mb-2.5 px-2.5 py-2 bg-surface-raised rounded">{batchProposals[0]?.reasoning || ''}</div>
               {isExpanded ? (
-                <div className="coherence-batch-items">
+                <div className="mt-2 pt-2 border-t border-edge">
                   {batchProposals.map((p: any) => (
                     <ProposalCard key={p.id} proposal={p} resolved={false} conflicts={conflicts} inBatch />
                   ))}
                 </div>
               ) : (
-                <div className="coherence-batch-summary">
+                <div className="flex flex-col gap-1 mt-2">
                   {batchProposals.map((p: any) => (
-                    <div key={p.id} className="coherence-batch-summary-item">
-                      <span className={`coherence-proposal-type coherence-type-${TYPE_CSS[p.type] || 'default'}`}>
+                    <div key={p.id} className="flex items-center gap-2 text-[11px]">
+                      <span className={`text-[10px] font-semibold uppercase tracking-wide px-2 py-0.5 rounded-sm ${TYPE_TW[p.type] || ''}`}>
                         {TYPE_LABELS[p.type] || p.type}
                       </span>
-                      <span className="coherence-batch-summary-text">{getProposalSummary(p)}</span>
+                      <span className="text-content-secondary">{getProposalSummary(p)}</span>
                     </div>
                   ))}
                 </div>
@@ -397,12 +413,12 @@ export function CoherenceView({ graphData, onNodeClick, projectId }: CoherenceVi
       </div>
 
       {resolvedProposals.length > 0 && (
-        <div className="coherence-section">
-          <button className="coherence-resolved-toggle" onClick={() => setResolvedExpanded(v => !v)}>
-            <span className="coherence-toggle-icon" dangerouslySetInnerHTML={{ __html: resolvedExpanded ? '&#9660;' : '&#9654;' }} />
+        <div className="mb-6">
+          <button className="flex items-center gap-1.5 w-full py-2 bg-transparent border-none text-content-secondary font-mono text-xs font-semibold cursor-pointer uppercase tracking-wide mb-2 hover:text-content" onClick={() => setResolvedExpanded(v => !v)}>
+            <span className="text-[9px]" dangerouslySetInnerHTML={{ __html: resolvedExpanded ? '&#9660;' : '&#9654;' }} />
             {' '}Resolved ({resolvedProposals.length})
           </button>
-          <div className={`coherence-resolved-list${resolvedExpanded ? '' : ' collapsed'}`}>
+          <div className={resolvedExpanded ? '' : 'hidden'}>
             {resolvedProposals.map((p: any) => (
               <ProposalCard key={p.id} proposal={p} resolved={true} conflicts={{}} />
             ))}