Add Paperclip agent activity mirror to case detail page

New "Agents" tab in case detail shows all Paperclip agent comments,
issue status, and agent status for each case — eliminating the need
to switch between Legal-AI and Paperclip UIs.

Backend: 4 new DB query functions in paperclip_client.py (issues,
comments, agents, post_comment) + 2 new API endpoints (GET/POST
/api/cases/{case_number}/agents). Comment posting uses Board API
with DB+wakeup fallback to ensure CEO routing.

Frontend: agents.ts hooks (10s polling), AgentActivityFeed component
(markdown timeline + comment input), AgentStatusWidget (sidebar),
4th tab in case detail page.

Also includes new-company-setup-guide.md documenting the process
for setting up the betterment levy (CMPA) company.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web-ui/src/components/cases/agent-activity-feed.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+import { useRef, useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { Markdown } from "@/components/ui/markdown";
+import { useAgentActivity, useSendComment } from "@/lib/api/agents";
+import type { PaperclipComment } from "@/lib/api/agents";
+import { toast } from "sonner";
+import {
+  Bot,
+  User,
+  Send,
+  Loader2,
+  MessageSquare,
+  Clock,
+} from "lucide-react";
+
+/* ── Role → color mapping ────────────────────────────────────── */
+
+const ROLE_COLORS: Record<string, string> = {
+  ceo: "bg-blue-100 text-blue-800 border-blue-200",
+  researcher: "bg-purple-100 text-purple-800 border-purple-200",
+  engineer: "bg-emerald-100 text-emerald-800 border-emerald-200",
+  qa: "bg-amber-100 text-amber-800 border-amber-200",
+};
+
+const ROLE_DOT: Record<string, string> = {
+  ceo: "bg-blue-500",
+  researcher: "bg-purple-500",
+  engineer: "bg-emerald-500",
+  qa: "bg-amber-500",
+};
+
+function roleColor(role: string | null) {
+  return ROLE_COLORS[role ?? ""] ?? "bg-gray-100 text-gray-700 border-gray-200";
+}
+
+function roleDot(role: string | null) {
+  return ROLE_DOT[role ?? ""] ?? "bg-gray-400";
+}
+
+/* ── Time formatting ─────────────────────────────────────────── */
+
+function timeAgo(iso: string | null): string {
+  if (!iso) return "";
+  const diff = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 1) return "עכשיו";
+  if (mins < 60) return `לפני ${mins} דק׳`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `לפני ${hours} שע׳`;
+  const days = Math.floor(hours / 24);
+  return `לפני ${days} ימים`;
+}
+
+/* ── Issue identifier → find matching identifier ─────────────── */
+
+function issueIdentifier(
+  comment: PaperclipComment,
+  issueMap: Map<string, string>,
+): string {
+  return issueMap.get(comment.issue_id) ?? "";
+}
+
+/* ── Comment card ────────────────────────────────────────────── */
+
+function CommentCard({
+  comment,
+  issueMap,
+}: {
+  comment: PaperclipComment;
+  issueMap: Map<string, string>;
+}) {
+  const isAgent = !!comment.author_agent_id;
+  const label = isAgent ? comment.agent_name ?? "סוכן" : "חיים";
+  const identifier = issueIdentifier(comment, issueMap);
+
+  return (
+    <div className="group relative flex gap-3 py-3 px-2 rounded-lg hover:bg-sand-soft/50 transition-colors">
+      {/* Avatar */}
+      <div className="flex-shrink-0 pt-0.5">
+        {isAgent ? (
+          <div
+            className={`w-8 h-8 rounded-full flex items-center justify-center ${roleColor(comment.agent_role)}`}
+          >
+            <Bot className="w-4 h-4" />
+          </div>
+        ) : (
+          <div className="w-8 h-8 rounded-full flex items-center justify-center bg-gold-soft text-gold-deep border border-gold">
+            <User className="w-4 h-4" />
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        {/* Header */}
+        <div className="flex items-center gap-2 mb-1 flex-wrap">
+          <span className="text-sm font-semibold text-navy">{label}</span>
+          {isAgent && comment.agent_role && (
+            <span
+              className={`inline-flex items-center gap-1 text-[11px] px-1.5 py-0.5 rounded-full border ${roleColor(comment.agent_role)}`}
+            >
+              <span className={`w-1.5 h-1.5 rounded-full ${roleDot(comment.agent_role)}`} />
+              {comment.agent_role}
+            </span>
+          )}
+          {identifier && (
+            <Badge variant="outline" className="text-[10px] font-mono">
+              {identifier}
+            </Badge>
+          )}
+          <span className="text-[11px] text-ink-faint mr-auto flex items-center gap-1">
+            <Clock className="w-3 h-3" />
+            {timeAgo(comment.created_at)}
+          </span>
+        </div>
+
+        {/* Body */}
+        <div className="text-sm">
+          <Markdown content={comment.body} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Main Feed ───────────────────────────────────────────────── */
+
+export function AgentActivityFeed({
+  caseNumber,
+}: {
+  caseNumber: string;
+}) {
+  const { data, isLoading, error } = useAgentActivity(caseNumber);
+  const sendComment = useSendComment(caseNumber);
+  const [body, setBody] = useState("");
+  const endRef = useRef<HTMLDivElement>(null);
+
+  // Build issue_id → identifier map
+  const issueMap = new Map<string, string>();
+  if (data?.issues) {
+    for (const iss of data.issues) {
+      issueMap.set(iss.id, iss.identifier);
+    }
+  }
+
+  // Auto-scroll on new comments
+  const commentCount = data?.comments?.length ?? 0;
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [commentCount]);
+
+  const handleSend = () => {
+    if (!body.trim()) return;
+    sendComment.mutate(
+      { body: body.trim() },
+      {
+        onSuccess: (res) => {
+          setBody("");
+          toast.success(`נשלח ל-${res.issue_identifier}`);
+        },
+        onError: () => toast.error("שגיאה בשליחת ההודעה"),
+      },
+    );
+  };
+
+  // ── Empty / loading states ──
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12 text-ink-faint">
+        <Loader2 className="w-5 h-5 animate-spin ml-2" />
+        <span>טוען פעילות סוכנים...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center py-12 text-red-500 text-sm">
+        שגיאה בטעינת פעילות סוכנים
+      </div>
+    );
+  }
+
+  if (!data?.issues?.length) {
+    return (
+      <div className="text-center py-12 space-y-2">
+        <MessageSquare className="w-10 h-10 mx-auto text-ink-faint/40" />
+        <p className="text-sm text-ink-faint">
+          התהליך טרם הופעל. לחץ &quot;התחל תהליך&quot; בלשונית סקירה.
+        </p>
+      </div>
+    );
+  }
+
+  const comments = data.comments ?? [];
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Issue summary bar */}
+      <div className="flex items-center gap-2 px-2 py-2 border-b border-rule mb-2 flex-wrap">
+        {data.issues.map((iss) => (
+          <Badge
+            key={iss.id}
+            variant={iss.status === "done" ? "secondary" : "default"}
+            className="text-[11px] font-mono"
+          >
+            {iss.identifier} — {iss.status}
+          </Badge>
+        ))}
+      </div>
+
+      {/* Comments stream */}
+      <div className="flex-1 overflow-y-auto max-h-[500px] space-y-1 px-1">
+        {comments.length === 0 ? (
+          <div className="text-center py-8 text-ink-faint text-sm">
+            <Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />
+            הסוכנים התחילו לעבוד, ממתין לדיווח ראשון...
+          </div>
+        ) : (
+          comments.map((c) => (
+            <CommentCard key={c.id} comment={c} issueMap={issueMap} />
+          ))
+        )}
+        <div ref={endRef} />
+      </div>
+
+      {/* Comment input */}
+      <div className="border-t border-rule pt-3 mt-3 space-y-2">
+        <Textarea
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+          placeholder="כתוב הוראה לסוכנים..."
+          className="min-h-[60px] resize-none text-sm"
+          dir="rtl"
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+              e.preventDefault();
+              handleSend();
+            }
+          }}
+        />
+        <div className="flex items-center justify-between">
+          <span className="text-[11px] text-ink-faint">
+            ההודעה תנותב דרך סוכן ה-CEO &middot; Ctrl+Enter לשליחה
+          </span>
+          <Button
+            size="sm"
+            onClick={handleSend}
+            disabled={!body.trim() || sendComment.isPending}
+          >
+            {sendComment.isPending ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <Send className="w-4 h-4 ml-1" />
+            )}
+            שלח
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}