@dilipod/ui 0.4.21 → 0.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilipod/ui",
-  "version": "0.4.21",
+  "version": "0.4.22",
   "description": "Dilipod Design System - Shared UI components and styles",
   "author": "Dilipod <hello@dilipod.com>",
   "license": "MIT",

package/src/components/impact-metrics-form.tsx

@@ -150,6 +150,9 @@ export function ImpactMetricsForm({
   // Net annual savings
   const netAnnualSavings = laborSavingsPerYear - workerCostPerYear
 
+  // ROI percentage: net savings relative to worker cost
+  const roiPercentage = workerCostPerYear > 0 ? (netAnnualSavings / workerCostPerYear) * 100 : 0
+
   return (
     <Card className={cn("border-[var(--cyan)]/20 bg-gradient-to-br from-white to-[var(--cyan)]/5", className)}>
       <CardContent className="p-5">
@@ -274,17 +277,25 @@ export function ImpactMetricsForm({
               €{netAnnualSavings.toLocaleString(undefined, { maximumFractionDigits: 0 })}
             </p>
             <p className="text-xs text-muted-foreground mt-0.5">
-              €{laborSavingsPerYear.toLocaleString(undefined, { maximumFractionDigits: 0 })} − €{workerCostPerYear}
+              €{laborSavingsPerYear.toLocaleString(undefined, { maximumFractionDigits: 0 })} <span className="opacity-60">labor saved</span> − €{workerCostPerYear} <span className="opacity-60">worker cost</span>
             </p>
           </div>
         </div>
 
-        {/* Implied frequency indicator */}
-        {impliedFrequencyPerYear > 0 && (
-          <p className="text-xs text-muted-foreground mt-4 pt-3 border-t border-border/50">
-            Implied: ~{impliedFrequencyPerMonth}×/month ({impliedFrequencyPerYear}×/year)
+        {/* ROI & Implied frequency */}
+        <div className="mt-4 pt-3 border-t border-border/50 flex items-center justify-between">
+          <p className={cn(
+            "text-sm",
+            roiPercentage > 0 ? "font-bold text-[var(--cyan)]" : "text-muted-foreground"
+          )}>
+            ROI: {roiPercentage >= 0 ? '+' : ''}{roiPercentage.toLocaleString(undefined, { maximumFractionDigits: 0 })}%
           </p>
-        )}
+          {impliedFrequencyPerYear > 0 && (
+            <p className="text-xs text-muted-foreground">
+              Implied: ~{impliedFrequencyPerMonth}×/month ({impliedFrequencyPerYear}×/year)
+            </p>
+          )}
+        </div>
       </CardContent>
     </Card>
   )

package/src/components/scenarios-manager.tsx

@@ -105,6 +105,9 @@ function ScenarioCard({
           <Icon size={16} weight="fill" className={config.color} />
         </div>
         <div className="flex-1 min-w-0 pt-0.5">
+          <div className="flex items-center gap-2 mb-1.5">
+            <Badge variant="outline" size="sm" className="font-medium">{config.label}</Badge>
+          </div>
           <p className="text-sm text-[var(--black)]">
             <span className="font-medium">When:</span> {scenario.situation}
           </p>

package/src/components/workflow-viewer.tsx

@@ -97,7 +97,7 @@ export interface SimWorkflow {
   }>
 }
 
-export type WorkflowTemplate = 'blank' | 'request_analyzer' | 'documentation_updater' | 'execution_monitor' | 'usage_reporter' | 'custom'
+export type WorkflowTemplate = 'blank' | 'request_analyzer' | 'knowledge_builder' | 'execution_monitor' | 'usage_reporter' | 'custom'
 
 export interface WorkflowViewerProps {
   /** The workflow definition to display */