1 files changed, 53 insertions, 0 deletions
diff --git a/makima/frontend/src/components/workflow/WorkflowContractCard.tsx b/makima/frontend/src/components/workflow/WorkflowContractCard.tsx
new file mode 100644
index 0000000..e6c8a1c
--- /dev/null
+++ b/makima/frontend/src/components/workflow/WorkflowContractCard.tsx
@@ -0,0 +1,53 @@
+import type { ContractSummary, ContractStatus } from "../../lib/api";
+
+interface WorkflowContractCardProps {
+  contract: ContractSummary;
+  onClick: () => void;
+  onDragStart: (e: React.DragEvent) => void;
+}
+
+const statusConfig: Record<ContractStatus, { label: string; color: string }> = {
+  active: { label: "Active", color: "text-green-400" },
+  completed: { label: "Done", color: "text-blue-400" },
+  archived: { label: "Archived", color: "text-[#555]" },
+};
+
+export function WorkflowContractCard({
+  contract,
+  onClick,
+  onDragStart,
+}: WorkflowContractCardProps) {
+  const status = statusConfig[contract.status] || statusConfig.active;
+
+  return (
+    <div
+      draggable
+      onDragStart={onDragStart}
+      onClick={onClick}
+      className="p-3 bg-[rgba(9,13,20,0.8)] border border-[rgba(117,170,252,0.2)] hover:border-[rgba(117,170,252,0.4)] cursor-pointer transition-colors select-none"
+    >
+      {/* Name */}
+      <div className="font-mono text-sm text-[#dbe7ff] truncate mb-1">
+        {contract.name}
+      </div>
+
+      {/* Status and counts row */}
+      <div className="flex items-center justify-between">
+        <span className={`font-mono text-[10px] uppercase ${status.color}`}>
+          {status.label}
+        </span>
+        <div className="flex items-center gap-2 font-mono text-[10px] text-[#555]">
+          <span title="Files">{contract.fileCount} files</span>
+          <span title="Tasks">{contract.taskCount} tasks</span>
+        </div>
+      </div>
+
+      {/* Description preview if exists */}
+      {contract.description && (
+        <div className="mt-1 font-mono text-[10px] text-[#555] truncate">
+          {contract.description}
+        </div>
+      )}
+    </div>
+  );
+}