@ozdao/martyrs 0.2.571 → 0.2.574

package/src/modules/governance/reactcode/src/pages/TaskDetailPage.tsx

@@ -19,7 +19,7 @@ export default function TaskDetailPage() {
     return (
       <div className="min-h-screen bg-gray-50 flex items-center justify-center">
         <div className="text-center">
-          <h2 className="text-2xl font-bold text-gray-900 mb-2">Task not found</h2>
+          <h2 className="text-2xl fonfw-bold text-gray-900 mb-2">Task not found</h2>
           <Link to="/" className="text-blue-600 hover:text-blue-700">
             Back to initiatives
           </Link>
@@ -94,18 +94,18 @@ export default function TaskDetailPage() {
               <div className="flex-1">
                 <div className="flex items-center gap-3 mb-3">
                   <TaskStatusBadge status={task.status} />
-                  <span className={`px-3 py-1 rounded-full text-xs font-medium ${priority.bg} ${priority.color}`}>
+                  <span className={`px-3 py-1 rounded-full text-xs fonfw-medium ${priority.bg} ${priority.color}`}>
                     <Flag className="w-3 h-3 inline mr-1" />
                     {priority.label} Priority
                   </span>
                   {task.passed && (
-                    <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">
+                    <span className="px-3 py-1 rounded-full text-xs fonfw-medium bg-green-100 text-green-700">
                       <CheckCircle className="w-3 h-3 inline mr-1" />
                       Passed
                     </span>
                   )}
                 </div>
-                <h1 className="text-3xl font-bold text-gray-900 mb-4">{task.title}</h1>
+                <h1 className="text-3xl fonfw-bold text-gray-900 mb-4">{task.title}</h1>
                 <p className="text-gray-700 text-lg leading-relaxed whitespace-pre-wrap">
                   {task.description}
                 </p>
@@ -126,7 +126,7 @@ export default function TaskDetailPage() {
                             alt={task.assignee.name}
                             className="w-8 h-8 rounded-full"
                           />
-                          <span className="font-medium text-gray-900">{task.assignee.name}</span>
+                          <span className="fonfw-medium text-gray-900">{task.assignee.name}</span>
                         </div>
                       ) : (
                         <div className="space-y-2">
@@ -135,13 +135,13 @@ export default function TaskDetailPage() {
                             <div className="flex gap-2">
                               <button
                                 onClick={handleAssignToMe}
-                                className="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-1.5 rounded-lg transition-colors"
+                                className="bg-blue-600 hover:bg-blue-700 text-white text-sm fonfw-medium px-4 py-1.5 rounded-lg transition-colors"
                               >
                                 Assign to Me
                               </button>
                               <button
                                 onClick={() => setShowAssignForm(true)}
-                                className="bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 text-sm font-medium px-4 py-1.5 rounded-lg transition-colors"
+                                className="bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 text-sm fonfw-medium px-4 py-1.5 rounded-lg transition-colors"
                               >
                                 Assign to User
                               </button>
@@ -156,7 +156,7 @@ export default function TaskDetailPage() {
                     <Calendar className="w-5 h-5 text-gray-400 mt-0.5" />
                     <div>
                       <div className="text-sm text-gray-500 mb-1">Created / Due Date</div>
-                      <div className="font-medium text-gray-900">
+                      <div className="fonfw-medium text-gray-900">
                         {formatDate(task.createdAt)} → {formatDate(task.dueDate)}
                       </div>
                     </div>
@@ -187,20 +187,20 @@ export default function TaskDetailPage() {
             <div className="border-t border-gray-200 mt-6 pt-6">
               <div className="flex items-center gap-2 mb-4">
                 <GitBranch className="w-5 h-5 text-gray-600" />
-                <h3 className="text-base font-semibold text-gray-900">Repository Information</h3>
+                <h3 className="text-base fonfw-semibold text-gray-900">Repository Information</h3>
               </div>
               <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                 <div className="p-3 bg-gray-50 rounded-lg">
                   <div className="text-xs text-gray-500 mb-1">Project</div>
-                  <div className="font-medium text-gray-900">{task.project}</div>
+                  <div className="fonfw-medium text-gray-900">{task.project}</div>
                 </div>
                 <div className="p-3 bg-gray-50 rounded-lg">
                   <div className="text-xs text-gray-500 mb-1">Repository</div>
-                  <div className="font-medium text-gray-900">{task.repository}</div>
+                  <div className="fonfw-medium text-gray-900">{task.repository}</div>
                 </div>
                 <div className="p-3 bg-gray-50 rounded-lg">
                   <div className="text-xs text-gray-500 mb-1">Branch</div>
-                  <div className="font-medium text-gray-900">{task.branch || 'Not created'}</div>
+                  <div className="fonfw-medium text-gray-900">{task.branch || 'Not created'}</div>
                 </div>
               </div>
               <div className="mt-4 flex items-center justify-between">
@@ -226,7 +226,7 @@ export default function TaskDetailPage() {
                   {task.permissions.merge && (
                     <button
                       onClick={handleMerge}
-                      className="bg-violet-600 hover:bg-violet-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors flex items-center gap-2"
+                      className="bg-violet-600 hover:bg-violet-700 text-white text-sm fonfw-medium px-4 py-2 rounded-lg transition-colors flex items-center gap-2"
                     >
                       <GitMerge className="w-4 h-4" />
                       Merge
@@ -235,7 +235,7 @@ export default function TaskDetailPage() {
                   {task.permissions.deploy && (
                     <button
                       onClick={handleDeploy}
-                      className="bg-orange-600 hover:bg-orange-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors flex items-center gap-2"
+                      className="bg-orange-600 hover:bg-orange-700 text-white text-sm fonfw-medium px-4 py-2 rounded-lg transition-colors flex items-center gap-2"
                     >
                       <Rocket className="w-4 h-4" />
                       Deploy
@@ -251,7 +251,7 @@ export default function TaskDetailPage() {
           <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
             <div className="flex items-center gap-2 mb-4">
               <LinkIcon className="w-5 h-5 text-gray-600" />
-              <h3 className="text-base font-semibold text-gray-900">Part Of</h3>
+              <h3 className="text-base fonfw-semibold text-gray-900">Part Of</h3>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
               {initiative && (
@@ -259,8 +259,8 @@ export default function TaskDetailPage() {
                   to={`/initiatives/${initiative.id}`}
                   className="block p-4 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition-colors"
                 >
-                  <div className="text-xs text-blue-600 font-medium mb-1">Initiative</div>
-                  <div className="font-semibold text-gray-900">{initiative.title}</div>
+                  <div className="text-xs text-blue-600 fonfw-medium mb-1">Initiative</div>
+                  <div className="fonfw-semibold text-gray-900">{initiative.title}</div>
                 </Link>
               )}
               {milestone && (
@@ -268,8 +268,8 @@ export default function TaskDetailPage() {
                   to={`/milestones/${milestone.id}`}
                   className="block p-4 bg-green-50 border border-green-200 rounded-lg hover:bg-green-100 transition-colors"
                 >
-                  <div className="text-xs text-green-600 font-medium mb-1">Milestone</div>
-                  <div className="font-semibold text-gray-900">{milestone.name}</div>
+                  <div className="text-xs text-green-600 fonfw-medium mb-1">Milestone</div>
+                  <div className="fonfw-semibold text-gray-900">{milestone.name}</div>
                 </Link>
               )}
             </div>
@@ -279,16 +279,16 @@ export default function TaskDetailPage() {
         <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
           <div className="flex items-center gap-2 mb-4">
             <Users className="w-5 h-5 text-gray-600" />
-            <h3 className="text-lg font-semibold text-gray-900">Task Governance & Budget</h3>
+            <h3 className="text-lg fonfw-semibold text-gray-900">Task Governance & Budget</h3>
           </div>
 
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             <div className="space-y-4">
               <div className="p-4 bg-gray-50 rounded-lg">
-                <h4 className="text-sm font-semibold text-gray-900 mb-3">Task Acceptance</h4>
+                <h4 className="text-sm fonfw-semibold text-gray-900 mb-3">Task Acceptance</h4>
                 <p className="text-sm text-gray-700 mb-2">
                   {task.startVotingId ? (
-                    <span>This task requires <span className="font-semibold text-blue-700">public voting</span> to start work.</span>
+                    <span>This task requires <span className="fonfw-semibold text-blue-700">public voting</span> to start work.</span>
                   ) : (
                     <span>Team members can start working on this task directly.</span>
                   )}
@@ -296,10 +296,10 @@ export default function TaskDetailPage() {
               </div>
 
               <div className="p-4 bg-gray-50 rounded-lg">
-                <h4 className="text-sm font-semibold text-gray-900 mb-3">Approval Process</h4>
+                <h4 className="text-sm fonfw-semibold text-gray-900 mb-3">Approval Process</h4>
                 <p className="text-sm text-gray-700 mb-2">
                   {task.approvalVotingId ? (
-                    <span>Task completion requires <span className="font-semibold text-blue-700">public voting approval</span>.</span>
+                    <span>Task completion requires <span className="fonfw-semibold text-blue-700">public voting approval</span>.</span>
                   ) : (
                     <span>Task completion is approved by team members.</span>
                   )}
@@ -307,17 +307,17 @@ export default function TaskDetailPage() {
               </div>
 
               <div className="p-4 bg-gray-50 rounded-lg">
-                <h4 className="text-sm font-semibold text-gray-900 mb-3">Decision Making</h4>
+                <h4 className="text-sm fonfw-semibold text-gray-900 mb-3">Decision Making</h4>
                 <div className="space-y-2 text-sm">
                   <div className="flex justify-between">
                     <span className="text-gray-600">Governance Type:</span>
-                    <span className="font-medium text-gray-900">
+                    <span className="fonfw-medium text-gray-900">
                       {task.visibility.type === 'public' ? 'Community-based' : 'Team-based'}
                     </span>
                   </div>
                   <div className="flex justify-between">
                     <span className="text-gray-600">Visibility:</span>
-                    <span className="font-medium text-gray-900 capitalize">{task.visibility.type}</span>
+                    <span className="fonfw-medium text-gray-900 capitalize">{task.visibility.type}</span>
                   </div>
                 </div>
               </div>
@@ -327,22 +327,22 @@ export default function TaskDetailPage() {
               <div className="p-4 bg-gradient-to-br from-green-50 to-blue-50 border border-green-200 rounded-lg">
                 <div className="flex items-center gap-2 mb-3">
                   <DollarSign className="w-5 h-5 text-gray-700" />
-                  <h4 className="text-sm font-semibold text-gray-900">Budget</h4>
+                  <h4 className="text-sm fonfw-semibold text-gray-900">Budget</h4>
                 </div>
                 <div className="flex justify-between items-center mb-3">
                   <div>
-                    <div className="text-2xl font-bold text-gray-900">
+                    <div className="text-2xl fonfw-bold text-gray-900">
                       {task.budget.amount} {task.budget.currency}
                     </div>
                   </div>
                   <div>
                     {task.budget.approved ? (
-                      <span className="flex items-center gap-1 text-green-700 font-medium text-sm">
+                      <span className="flex items-center gap-1 text-green-700 fonfw-medium text-sm">
                         <CheckCircle className="w-4 h-4" />
                         Approved
                       </span>
                     ) : (
-                      <span className="flex items-center gap-1 text-yellow-700 font-medium text-sm">
+                      <span className="flex items-center gap-1 text-yellow-700 fonfw-medium text-sm">
                         <Clock className="w-4 h-4" />
                         Pending
                       </span>
@@ -352,7 +352,7 @@ export default function TaskDetailPage() {
                 {task.permissions.budget && !task.budget.approved && (
                   <button
                     onClick={handleApproveBudget}
-                    className="w-full bg-green-600 hover:bg-green-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors flex items-center justify-center gap-2"
+                    className="w-full bg-green-600 hover:bg-green-700 text-white text-sm fonfw-medium px-4 py-2 rounded-lg transition-colors flex items-center justify-center gap-2"
                   >
                     <DollarSign className="w-4 h-4" />
                     Approve Budget
@@ -361,7 +361,7 @@ export default function TaskDetailPage() {
               </div>
 
               <div className="p-4 bg-gray-50 rounded-lg">
-                <h4 className="text-sm font-semibold text-gray-900 mb-3">Permissions</h4>
+                <h4 className="text-sm fonfw-semibold text-gray-900 mb-3">Permissions</h4>
                 <div className="space-y-2">
                   <div className="flex items-center justify-between text-sm">
                     <span className="text-gray-600">Merge Rights</span>
@@ -399,7 +399,7 @@ export default function TaskDetailPage() {
                 {task.permissions.veto && (
                   <button
                     onClick={handleVeto}
-                    className="w-full mt-3 bg-red-600 hover:bg-red-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors flex items-center justify-center gap-2"
+                    className="w-full mt-3 bg-red-600 hover:bg-red-700 text-white text-sm fonfw-medium px-4 py-2 rounded-lg transition-colors flex items-center justify-center gap-2"
                   >
                     <Shield className="w-4 h-4" />
                     Veto Task
@@ -413,18 +413,18 @@ export default function TaskDetailPage() {
         <div className="bg-white rounded-xl shadow-sm p-6">
           <div className="flex items-center gap-2 mb-4">
             <Vote className="w-5 h-5 text-gray-600" />
-            <h3 className="text-lg font-semibold text-gray-900">Governance & Voting</h3>
+            <h3 className="text-lg fonfw-semibold text-gray-900">Governance & Voting</h3>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div className="border-2 border-blue-200 rounded-lg p-5 bg-blue-50">
-              <div className="text-xs font-semibold text-blue-700 uppercase mb-3">Start Voting</div>
+              <div className="text-xs fonfw-semibold text-blue-700 uppercase mb-3">Start Voting</div>
               {startVoting ? (
                 <>
                   <Link
                     to={`/votings/${startVoting.id}`}
                     className="block hover:bg-blue-100 -m-5 p-5 rounded-lg transition-colors"
                   >
-                    <h4 className="font-semibold text-gray-900 mb-2">{startVoting.title}</h4>
+                    <h4 className="fonfw-semibold text-gray-900 mb-2">{startVoting.title}</h4>
                     <div className="flex items-center gap-2 mb-3">
                       <TaskStatusBadge status={startVoting.status} />
                     </div>
@@ -440,7 +440,7 @@ export default function TaskDetailPage() {
                     <div className="mt-3 pt-3 border-t border-blue-200">
                       <button
                         onClick={handleSubmitForReview}
-                        className="w-full bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors"
+                        className="w-full bg-blue-600 hover:bg-blue-700 text-white text-sm fonfw-medium px-4 py-2 rounded-lg transition-colors"
                       >
                         Begin Work
                       </button>
@@ -452,7 +452,7 @@ export default function TaskDetailPage() {
                   <p className="text-gray-600 text-sm mb-3">No start voting required. Team members can begin work directly.</p>
                   {task.status === 'proposed' && (
                     <button
-                      className="w-full bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors"
+                      className="w-full bg-blue-600 hover:bg-blue-700 text-white text-sm fonfw-medium px-4 py-2 rounded-lg transition-colors"
                     >
                       Create Start Voting
                     </button>
@@ -462,14 +462,14 @@ export default function TaskDetailPage() {
             </div>
 
             <div className="border-2 border-green-200 rounded-lg p-5 bg-green-50">
-              <div className="text-xs font-semibold text-green-700 uppercase mb-3">Approval Voting</div>
+              <div className="text-xs fonfw-semibold text-green-700 uppercase mb-3">Approval Voting</div>
               {approvalVoting ? (
                 <>
                   <Link
                     to={`/votings/${approvalVoting.id}`}
                     className="block hover:bg-green-100 -m-5 p-5 rounded-lg transition-colors"
                   >
-                    <h4 className="font-semibold text-gray-900 mb-2">{approvalVoting.title}</h4>
+                    <h4 className="fonfw-semibold text-gray-900 mb-2">{approvalVoting.title}</h4>
                     <div className="flex items-center gap-2 mb-3">
                       <TaskStatusBadge status={approvalVoting.status} />
                     </div>
@@ -485,7 +485,7 @@ export default function TaskDetailPage() {
                     <div className="mt-3 pt-3 border-t border-green-200">
                       <button
                         onClick={handleCompleteTask}
-                        className="w-full bg-green-600 hover:bg-green-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors"
+                        className="w-full bg-green-600 hover:bg-green-700 text-white text-sm fonfw-medium px-4 py-2 rounded-lg transition-colors"
                       >
                         Complete Task
                       </button>
@@ -498,14 +498,14 @@ export default function TaskDetailPage() {
                   {task.status === 'in_progress' && task.assignee && (
                     <button
                       onClick={handleSubmitForReview}
-                      className="w-full bg-green-600 hover:bg-green-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors"
+                      className="w-full bg-green-600 hover:bg-green-700 text-white text-sm fonfw-medium px-4 py-2 rounded-lg transition-colors"
                     >
                       Submit for Review
                     </button>
                   )}
                   {task.status === 'review' && (
                     <button
-                      className="w-full bg-green-600 hover:bg-green-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors"
+                      className="w-full bg-green-600 hover:bg-green-700 text-white text-sm fonfw-medium px-4 py-2 rounded-lg transition-colors"
                     >
                       Create Approval Voting
                     </button>

package/src/modules/governance/reactcode/src/pages/VotingDetailPage.tsx

@@ -23,7 +23,7 @@ export default function VotingDetailPage() {
     return (
       <div className="min-h-screen bg-gray-50 flex items-center justify-center">
         <div className="text-center">
-          <h2 className="text-2xl font-bold text-gray-900 mb-2">Voting not found</h2>
+          <h2 className="text-2xl fonfw-bold text-gray-900 mb-2">Voting not found</h2>
           <Link to="/votings" className="text-blue-600 hover:text-blue-700">
             Back to votings
           </Link>
@@ -124,12 +124,12 @@ export default function VotingDetailPage() {
             <div className="flex items-start justify-between mb-6">
               <div className="flex-1">
                 <div className="flex items-center gap-3 mb-3">
-                  <span className={`px-3 py-1 rounded-full text-xs font-medium ${typeInfo.color}`}>
+                  <span className={`px-3 py-1 rounded-full text-xs fonfw-medium ${typeInfo.color}`}>
                     {typeInfo.label}
                   </span>
                   <TaskStatusBadge status={voting.status} />
                 </div>
-                <h1 className="text-3xl font-bold text-gray-900 mb-4">{voting.title}</h1>
+                <h1 className="text-3xl fonfw-bold text-gray-900 mb-4">{voting.title}</h1>
                 <p className="text-gray-700 text-lg leading-relaxed">{voting.description}</p>
               </div>
             </div>
@@ -140,14 +140,14 @@ export default function VotingDetailPage() {
                   <Calendar className="w-5 h-5 text-gray-400 mt-0.5" />
                   <div>
                     <div className="text-sm text-gray-500 mb-1">Created</div>
-                    <div className="font-medium text-gray-900">{formatDate(voting.createdAt)}</div>
+                    <div className="fonfw-medium text-gray-900">{formatDate(voting.createdAt)}</div>
                   </div>
                 </div>
                 <div className="flex items-start gap-3">
                   <Calendar className="w-5 h-5 text-gray-400 mt-0.5" />
                   <div>
                     <div className="text-sm text-gray-500 mb-1">Ends</div>
-                    <div className="font-medium text-gray-900">{formatDate(voting.endDate)}</div>
+                    <div className="fonfw-medium text-gray-900">{formatDate(voting.endDate)}</div>
                   </div>
                 </div>
               </div>
@@ -155,7 +155,7 @@ export default function VotingDetailPage() {
 
             {linkedEntity && (
               <div className="border-t border-gray-200 pt-6 mb-6">
-                <h3 className="text-sm font-semibold text-gray-900 mb-3">Related Item</h3>
+                <h3 className="text-sm fonfw-semibold text-gray-900 mb-3">Related Item</h3>
                 {linkedEntity}
               </div>
             )}
@@ -174,14 +174,14 @@ export default function VotingDetailPage() {
 
         {hasVoted && (
           <div className="bg-green-50 border border-green-200 rounded-xl p-6 text-center">
-            <div className="text-green-700 font-semibold text-lg mb-2">Thank you for voting!</div>
+            <div className="text-green-700 fonfw-semibold text-lg mb-2">Thank you for voting!</div>
             <p className="text-green-600">Your vote has been recorded.</p>
           </div>
         )}
 
         {!isActive && (
           <div className="bg-gray-50 border border-gray-200 rounded-xl p-6 text-center">
-            <div className="text-gray-700 font-semibold text-lg mb-2">Voting Closed</div>
+            <div className="text-gray-700 fonfw-semibold text-lg mb-2">Voting Closed</div>
             <p className="text-gray-600">This voting has ended.</p>
           </div>
         )}

package/src/modules/governance/reactcode/src/pages/VotingsListPage.tsx

@@ -18,14 +18,14 @@ export default function VotingsListPage() {
     <div className="min-h-screen bg-gray-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">Votings</h1>
+          <h1 className="text-3xl fonfw-bold text-gray-900 mb-2">Votings</h1>
           <p className="text-gray-600">View and participate in all active votings</p>
         </div>
 
         <div className="bg-white rounded-xl shadow-sm p-6 mb-8">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
-              <label htmlFor="typeFilter" className="block text-sm font-medium text-gray-700 mb-2">
+              <label htmlFor="typeFilter" className="block text-sm fonfw-medium text-gray-700 mb-2">
                 Type
               </label>
               <select
@@ -42,7 +42,7 @@ export default function VotingsListPage() {
             </div>
 
             <div>
-              <label htmlFor="statusFilter" className="block text-sm font-medium text-gray-700 mb-2">
+              <label htmlFor="statusFilter" className="block text-sm fonfw-medium text-gray-700 mb-2">
                 Status
               </label>
               <select

package/src/modules/governance/reactcode-2/App.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import VotingPage from './components/Layout';
+import TaskPage from './components/TaskPage';
+import VotingsFeedPage from './components/VotingsFeedPage';
+
+const App: React.FC = () => {
+  const [currentPage, setCurrentPage] = useState<'feed' | 'voting' | 'task'>('feed');
+
+  return (
+    <div className="min-h-screen bg-zinc-50">
+        {/* Global Background Ambience - Light Mode */}
+        <div className="fixed inset-0 pointer-events-none overflow-hidden">
+            <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-indigo-500/5 rounded-full blur-[120px]" />
+            <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-emerald-500/5 rounded-full blur-[120px]" />
+        </div>
+
+        {currentPage === 'feed' ? (
+             <VotingsFeedPage onNavigate={setCurrentPage} />
+        ) : currentPage === 'voting' ? (
+            <VotingPage onNavigate={setCurrentPage} />
+        ) : (
+            <TaskPage onNavigate={setCurrentPage} />
+        )}
+    </div>
+  );
+};
+
+export default App;

package/src/modules/governance/reactcode-2/README.md

@@ -0,0 +1,20 @@
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1L5-sUkQVilLxcXjb4D-0QUCxJ43_bYAd
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

package/src/modules/governance/reactcode-2/components/Charts.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
+import { ProposalStats } from '../types';
+
+interface VotingChartsProps {
+  stats: ProposalStats;
+}
+
+export const VotingCharts: React.FC<VotingChartsProps> = ({ stats }) => {
+  const data = [
+    { name: 'Yes', value: stats.votesYes, color: '#10b981' }, // emerald-500
+    { name: 'No', value: stats.votesNo, color: '#f43f5e' }, // rose-500
+    { name: 'Abstain', value: stats.votesAbstain, color: '#71717a' }, // zinc-500
+  ];
+
+  // If no votes, show empty ring
+  if (stats.totalVotes === 0) {
+      return (
+        <div className="h-40 w-40 rounded-full border-4 border-zinc-200 border-dashed flex items-center justify-center">
+            <span className="text-xs text-zinc-400">No Votes</span>
+        </div>
+      );
+  }
+
+  return (
+    <div className="h-48 w-48 relative">
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Pie
+            data={data}
+            cx="50%"
+            cy="50%"
+            innerRadius={60}
+            outerRadius={80}
+            paddingAngle={5}
+            dataKey="value"
+            stroke="none"
+          >
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color} />
+            ))}
+          </Pie>
+          <Tooltip 
+            contentStyle={{ backgroundColor: '#ffffff', borderColor: '#e4e4e7', borderRadius: '12px', color: '#18181b', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)' }}
+            itemStyle={{ color: '#18181b', fontSize: '12px', fontFamily: 'Inter' }}
+            cursor={false}
+          />
+        </PieChart>
+      </ResponsiveContainer>
+      
+      {/* Centered Total */}
+      <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+        <span className="text-3xl fonfw-bold text-zinc-900 tracking-tighter">{stats.totalVotes}</span>
+        <span className="text-[10px] text-zinc-500 uppercase tracking-widest fonfw-medium mt-1">Votes</span>
+      </div>
+    </div>
+  );
+};