@wakastellar/ui 4.0.0 → 4.1.1

package/src/components/waka-autocomplete/index.tsx

@@ -86,7 +86,7 @@ export const WakaAutocomplete = React.forwardRef<HTMLButtonElement, WakaAutocomp
     const [search, setSearch] = React.useState("")
     const [options, setOptions] = React.useState<AutocompleteOption[]>(initialOptions)
     const [loading, setLoading] = React.useState(false)
-    const searchTimeoutRef = React.useRef<NodeJS.Timeout>()
+    const searchTimeoutRef = React.useRef<NodeJS.Timeout>(undefined)
 
     // Synchroniser les options quand elles changent
     React.useEffect(() => {

package/src/components/waka-capacity-planner/index.tsx

@@ -306,7 +306,10 @@ export function useCapacityPlanner({
   // Get status for current usage
   const getResourceStatus = React.useCallback(
     (resource: ResourceData): ThresholdStatus => {
-      const percentage = (resource.current / resource.total) * 100
+      // Guard total <= 0: (current / 0) * 100 is Infinity, silently classed as
+      // "critical" — treat an undefined capacity as 0% instead.
+      const percentage =
+        resource.total > 0 ? (resource.current / resource.total) * 100 : 0
       return getStatusFromPercentage(percentage, thresholds)
     },
     [thresholds]

package/src/components/waka-carousel/index.tsx

@@ -588,7 +588,9 @@ export const WakaCarousel: React.FC<WakaCarouselProps> = ({
           />
         ) : currentImage ? (
           <img
-            ref={el => imageRefs.current[safeIndex] = el}
+            ref={el => {
+              imageRefs.current[safeIndex] = el
+            }}
             src={currentImage.src}
             alt={currentImage.alt}
             className={cn(

package/src/components/waka-cart-summary/index.tsx

@@ -627,15 +627,20 @@ export const WakaCartSummary: React.FC<WakaCartSummaryProps> = ({
       shipping = 0
     }
 
-    // Calculate discount
+    // Calculate discount. A "shipping" discount only zeroes the shipping line —
+    // it must NOT also reduce the taxable product amount, otherwise the shipping
+    // cost is removed twice (once by `shipping = 0`, once via `taxableAmount`).
+    // Track it separately so it still shows as savings without being subtracted
+    // from the products total.
     let discountAmount = 0
+    let shippingDiscount = 0
     if (discount) {
       if (discount.type === "percentage") {
         discountAmount = subtotal * (discount.value / 100)
       } else if (discount.type === "fixed") {
         discountAmount = Math.min(discount.value, subtotal)
       } else if (discount.type === "shipping") {
-        discountAmount = shipping
+        shippingDiscount = shipping
         shipping = 0
       }
     }
@@ -650,7 +655,7 @@ export const WakaCartSummary: React.FC<WakaCartSummaryProps> = ({
       tax,
       taxRate,
       shipping,
-      discount: discountAmount,
+      discount: discountAmount + shippingDiscount,
       total: Math.max(0, total),
     }
   }, [items, shippingCost, freeShippingThreshold, discount, taxRate])

package/src/components/waka-charts/hooks/useRechartsLoader.ts

@@ -184,23 +184,25 @@ export function useRechartsLoader(): UseRechartsLoaderResult {
         const recharts = await import("recharts")
 
         if (mounted) {
-          // Use type assertions to avoid strict type incompatibilities with recharts
+          // Cast through unknown to bridge the narrow local prop types
+          // with Recharts' own (broader) component types without using `any`.
           setComponents({
-            ResponsiveContainer: recharts.ResponsiveContainer as any,
-            BarChart: recharts.BarChart as any,
-            LineChart: recharts.LineChart as any,
-            AreaChart: recharts.AreaChart as any,
-            PieChart: recharts.PieChart as any,
-            Bar: recharts.Bar as any,
-            Line: recharts.Line as any,
-            Area: recharts.Area as any,
-            Pie: recharts.Pie as any,
-            Cell: recharts.Cell as any,
-            XAxis: recharts.XAxis as any,
-            YAxis: recharts.YAxis as any,
-            CartesianGrid: recharts.CartesianGrid as any,
-            Tooltip: recharts.Tooltip as any,
-            Legend: recharts.Legend as any,
+            ResponsiveContainer:
+              recharts.ResponsiveContainer as unknown as RechartsComponents["ResponsiveContainer"],
+            BarChart: recharts.BarChart as unknown as RechartsComponents["BarChart"],
+            LineChart: recharts.LineChart as unknown as RechartsComponents["LineChart"],
+            AreaChart: recharts.AreaChart as unknown as RechartsComponents["AreaChart"],
+            PieChart: recharts.PieChart as unknown as RechartsComponents["PieChart"],
+            Bar: recharts.Bar as unknown as RechartsComponents["Bar"],
+            Line: recharts.Line as unknown as RechartsComponents["Line"],
+            Area: recharts.Area as unknown as RechartsComponents["Area"],
+            Pie: recharts.Pie as unknown as RechartsComponents["Pie"],
+            Cell: recharts.Cell as unknown as RechartsComponents["Cell"],
+            XAxis: recharts.XAxis as unknown as RechartsComponents["XAxis"],
+            YAxis: recharts.YAxis as unknown as RechartsComponents["YAxis"],
+            CartesianGrid: recharts.CartesianGrid as unknown as RechartsComponents["CartesianGrid"],
+            Tooltip: recharts.Tooltip as unknown as RechartsComponents["Tooltip"],
+            Legend: recharts.Legend as unknown as RechartsComponents["Legend"],
             // SVG elements from React, not Recharts
             defs: "defs" as unknown as RechartsComponents["defs"],
             linearGradient: "linearGradient" as unknown as RechartsComponents["linearGradient"],

package/src/components/waka-cohort-table/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils/cn"
+import { localDateKey } from "../../utils/local-date"
 import { Download, Info, TrendingDown, TrendingUp, Users } from "lucide-react"
 
 // ============================================================================
@@ -466,7 +467,7 @@ export function WakaCohortTable({
   const handleExport = React.useCallback(
     (format: "csv" | "json") => {
       const label = metricLabel || metric
-      const filename = `cohort-${label}-${new Date().toISOString().split("T")[0]}`
+      const filename = `cohort-${label}-${localDateKey(new Date())}`
 
       if (onExport) {
         onExport({ format, filename, includeMetadata: true })

package/src/components/waka-compare-period/index.tsx

@@ -1080,11 +1080,21 @@ export function useComparePeriod(
   const {
     initialPreset = "last_week",
     initialMetrics = [],
-    referenceDate = new Date(),
+    referenceDate: referenceDateOption,
     autoRefreshInterval,
     onRefresh,
   } = options
 
+  // Stabilize referenceDate. A `= new Date()` default created a fresh Date on
+  // every render; since it's a dependency of the period-recompute effect below,
+  // that effect ran every render -> setPeriods -> re-render -> new Date -> …, an
+  // infinite render loop pinning the CPU (froze any consumer of this hook that
+  // didn't pass a stable referenceDate). Memoize so the default is created once.
+  const referenceDate = React.useMemo(
+    () => referenceDateOption ?? new Date(),
+    [referenceDateOption]
+  )
+
   const [preset, setPreset] = React.useState(initialPreset)
   const [metrics, setMetrics] = React.useState<Metric[]>(initialMetrics)
   const [isLoading, setIsLoading] = React.useState(false)

package/src/components/waka-contribution-graph/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils/cn"
+import { localDateKey, parseLocalDate } from "../../utils/local-date"
 
 // ============================================
 // TYPES
@@ -91,14 +92,8 @@ function getEndOfYear(year: number): Date {
   return new Date(year, 11, 31)
 }
 
-function formatDate(date: Date): string {
-  return date.toISOString().split("T")[0]
-}
-
-function parseDate(date: string | Date): Date {
-  if (date instanceof Date) return date
-  return new Date(date)
-}
+const formatDate = localDateKey
+const parseDate = parseLocalDate
 
 function isSameDay(date1: Date, date2: Date): boolean {
   return (

package/src/components/waka-credit-balance/index.tsx

@@ -134,7 +134,7 @@ function useAnimatedCounter(
   duration: number = 800
 ): number {
   const [displayValue, setDisplayValue] = React.useState(targetValue)
-  const animationRef = React.useRef<number>()
+  const animationRef = React.useRef<number>(undefined)
   const previousValueRef = React.useRef(targetValue)
 
   React.useEffect(() => {

package/src/components/waka-credit-card-input/index.tsx

@@ -165,7 +165,7 @@ function formatCardNumber(value: string, cardType: CardType): string {
   }
 
   // Standard 4-4-4-4 format
-  const parts = []
+  const parts: string[] = []
   for (let i = 0; i < cleaned.length; i += 4) {
     parts.push(cleaned.slice(i, i + 4))
   }
@@ -937,7 +937,7 @@ export function WakaCreditCardInput({
                 type={cvvVisible ? "text" : "password"}
                 inputMode="numeric"
                 autoComplete="cc-csc"
-                placeholder={placeholders?.cvv || cardData.cardType === "amex" ? "1234" : "123"}
+                placeholder={placeholders?.cvv ?? (cardData.cardType === "amex" ? "1234" : "123")}
                 value={cardData.cvv}
                 onChange={(e) => updateCvv(e.target.value)}
                 onFocus={handleCvvFocus}

package/src/components/waka-credit-meter/index.tsx

@@ -167,7 +167,7 @@ function useAnimatedValue(
   duration: number = 800
 ): number {
   const [displayValue, setDisplayValue] = React.useState(animated ? 0 : targetValue)
-  const animationRef = React.useRef<number>()
+  const animationRef = React.useRef<number>(undefined)
   const previousValueRef = React.useRef(animated ? 0 : targetValue)
 
   React.useEffect(() => {

package/src/components/waka-datetime-picker/index.tsx

@@ -240,13 +240,15 @@ export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimeP
     const { t } = useTranslation()
     const [open, setOpen] = React.useState(false)
     const [internalValue, setInternalValue] = React.useState<Date | DateRange | Date[] | null>(
-      variant === "range" && value && !('from' in value) ? { from: value as Date, to: undefined } : value as any
+      variant === "range" && value && !('from' in value)
+        ? { from: value as Date, to: undefined }
+        : (value as Date | DateRange | Date[] | null)
     )
     const [validationError, setValidationError] = React.useState<string | null>(null)
     const [hoveredDate, setHoveredDate] = React.useState<Date | null>(null)
 
     // Locales supportées
-    const localeMap: Record<string, any> = {
+    const localeMap: Record<string, typeof fr> = {
       fr,
       en: enUS,
       es,
@@ -433,7 +435,7 @@ export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimeP
       }
 
       // Validation
-      if (newValue && !(newValue as any).from && !Array.isArray(newValue)) {
+      if (newValue && !Array.isArray(newValue) && !("from" in newValue)) {
         const error = validateDate(newValue as Date)
         if (error) {
           setValidationError(error)
@@ -538,7 +540,11 @@ export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimeP
 
     // Render du composant principal
     const renderDatePicker = () => {
-    const pickerProps: any = {
+    // react-datepicker's props form a discriminated union (selectsRange vs
+    // selectsMultiple vs single) that this object intentionally spans at
+    // runtime; we infer the literal shape here and bridge it to the component's
+    // props via `unknown` at the spread site instead of using `any`.
+    const pickerProps = {
       selected: variant === "range" 
         ? (internalValue as DateRange)?.from 
         : variant === "multiple"
@@ -559,6 +565,9 @@ export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimeP
         timeCaption: t?.("time") || "Heure",
         dateFormat: displayFormat,
         locale: locale,
+        // Truncate weekday header to 2 chars (e.g. "lu", "ma") so full FR
+        // names ("lundi", "mercredi"...) don't overflow the grid columns.
+        formatWeekDay: (name: string) => name.charAt(0).toUpperCase() + name.charAt(1),
         placeholderText: placeholder,
         disabled,
         minDate,
@@ -568,7 +577,7 @@ export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimeP
         showWeekNumbers,
         filterDate: (date: Date) => !isDateDisabled(date),
         dayClassName: (date: Date) => {
-          const classes = []
+          const classes: string[] = []
           if (isDateHighlighted(date)) {
             classes.push("highlighted-date")
           }
@@ -618,7 +627,7 @@ export const WakaDateTimePicker = React.forwardRef<HTMLDivElement, WakaDateTimeP
           )}
           
           <div className="flex-1">
-            <DatePicker {...pickerProps} />
+            <DatePicker {...(pickerProps as unknown as React.ComponentProps<typeof DatePicker>)} />
             
             {showSelectionInfo && internalValue && (
               <div className="mt-3 p-2 bg-muted rounded-md text-xs space-y-1">

package/src/components/waka-datetime-picker.form-integration/index.tsx

@@ -59,7 +59,7 @@ export function WakaDateTimePickerForm<T extends FieldValues>({
     <Controller
       name={name}
       control={control}
-      defaultValue={defaultValue as any}
+      defaultValue={defaultValue as React.ComponentProps<typeof Controller<T>>["defaultValue"]}
       render={({ field, fieldState }) => (
         <WakaDateTimePicker
           {...props}

package/src/components/waka-doc-code-block/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils"
+import { escapeHtml } from "../../utils/security"
 import { Copy, Check, FileCode } from "lucide-react"
 import { Button } from "../button"
 import Prism from "prismjs"
@@ -85,12 +86,20 @@ export function WakaDocCodeBlock({
         <pre className="p-4 text-sm leading-relaxed">
           <code>
             {lines.map((line, i) => {
-              let highlightedLine = line
-              try {
-                if (language && Prism.languages[language]) {
+              // Default to an HTML-escaped version of the raw line so the
+              // dangerouslySetInnerHTML below can never inject untrusted HTML
+              // (P0 security fix). Only the trusted Prism.highlight() output
+              // — which produces sanitized HTML by construction — bypasses
+              // the escape.
+              let highlightedLine = escapeHtml(line)
+              if (language && Prism.languages[language]) {
+                try {
                   highlightedLine = Prism.highlight(line, Prism.languages[language], language)
+                } catch {
+                  // Prism failure → keep escaped fallback.
+                  highlightedLine = escapeHtml(line)
                 }
-              } catch {}
+              }
 
               return (
                 <div

package/src/components/waka-doc-renderer/index.tsx

@@ -38,7 +38,7 @@ export function WakaDocRenderer({ content, onHeadingsExtracted, className }: Wak
           import("rehype-raw"),
         ])
         setMdModule({
-          ReactMarkdown: rm.default,
+          ReactMarkdown: rm.default as MarkdownModule["ReactMarkdown"],
           remarkGfm: gfm.default || gfm,
           rehypeSlug: slug.default || slug,
           rehypeRaw: raw.default || raw,

package/src/components/waka-dock/index.tsx

@@ -227,7 +227,7 @@ export function WakaFloatingDock({
 }: WakaFloatingDockProps) {
   const [isVisible, setIsVisible] = React.useState(false)
   const [isHovered, setIsHovered] = React.useState(false)
-  const timeoutRef = React.useRef<NodeJS.Timeout>()
+  const timeoutRef = React.useRef<NodeJS.Timeout>(undefined)
 
   React.useEffect(() => {
     const handleScroll = () => {

package/src/components/waka-funnel-chart/index.tsx

@@ -124,21 +124,26 @@ export function useFunnelChart({
 
     return data.map((stage, index) => {
       const previousStage = index > 0 ? data[index - 1] : null
-      const conversionRate = previousStage
-        ? (stage.value / previousStage.value) * 100
-        : null
+      // Guard against a zero previous/first stage: dividing by it yields
+      // Infinity/NaN that gets rendered verbatim ("Infinity%"). Treat an
+      // undefined ratio as null (no rate), consistent with the no-previous case.
+      const conversionRate =
+        previousStage && previousStage.value > 0
+          ? (stage.value / previousStage.value) * 100
+          : null
       const dropOff = previousStage ? previousStage.value - stage.value : null
-      const dropOffPercentage = previousStage
-        ? ((previousStage.value - stage.value) / previousStage.value) * 100
-        : null
+      const dropOffPercentage =
+        previousStage && previousStage.value > 0
+          ? ((previousStage.value - stage.value) / previousStage.value) * 100
+          : null
 
       // Calculate width percentage with minimum
-      const rawWidthPercentage = (stage.value / maxValue) * 100
+      const rawWidthPercentage = maxValue > 0 ? (stage.value / maxValue) * 100 : 0
       const widthPercentage = Math.max(rawWidthPercentage, minWidthPercentage)
 
       return {
         ...stage,
-        percentageOfTotal: (stage.value / totalValue) * 100,
+        percentageOfTotal: totalValue > 0 ? (stage.value / totalValue) * 100 : 0,
         conversionRate,
         dropOff,
         dropOffPercentage,

package/src/components/waka-goal-progress/index.tsx

@@ -967,7 +967,12 @@ export function WakaCompactGoalProgress({
   className,
 }: WakaCompactGoalProgressProps) {
   const themeStyles = themeConfig[theme]
-  const progressPercent = Math.min(100, (currentValue / targetValue) * 100)
+  // Match useGoalProgress: clamp to [0,100] and guard a zero target (otherwise
+  // Infinity caps to a misleading 100%, and 0/0 renders NaN).
+  const progressPercent =
+    targetValue > 0
+      ? Math.max(0, Math.min(100, (currentValue / targetValue) * 100))
+      : 0
 
   return (
     <div className={cn("flex items-center gap-2", className)}>

package/src/components/waka-hotspot/index.tsx

@@ -223,7 +223,7 @@ export function WakaHotspot({
   const [isHidden, setIsHidden] = React.useState(false)
   const [hasAppeared, setHasAppeared] = React.useState(false)
   const hotspotRef = React.useRef<HTMLDivElement>(null)
-  const autoDismissRef = React.useRef<NodeJS.Timeout>()
+  const autoDismissRef = React.useRef<NodeJS.Timeout>(undefined)
 
   const storageKey = `${storageKeyPrefix}-${id}`
 

package/src/components/waka-invoice-preview/index.tsx

@@ -389,6 +389,9 @@ interface TotalsSectionProps {
 
 function TotalsSection({ invoice, compact }: TotalsSectionProps) {
   const subtotal = calculateSubtotal(invoice.items)
+  // When any line carries its own taxRate, calculateTotalTax sums per-line taxes
+  // and ignores the global rate — so the global % must not be shown as the label.
+  const hasItemTax = invoice.items.some((item) => item.taxRate !== undefined)
   const taxAmount = calculateTotalTax(invoice.items, invoice.taxRate)
   const discountAmount = invoice.discountAmount || (invoice.discountPercentage ? subtotal * invoice.discountPercentage : 0)
   const shippingCost = invoice.shippingCost || 0
@@ -425,7 +428,9 @@ function TotalsSection({ invoice, compact }: TotalsSectionProps) {
             <div className={rowClass}>
               <span className="text-muted-foreground">
                 Tax
-                {invoice.taxRate && ` (${(invoice.taxRate * 100).toFixed(0)}%)`}
+                {!hasItemTax && invoice.taxRate
+                  ? ` (${(invoice.taxRate * 100).toFixed(0)}%)`
+                  : ""}
               </span>
               <span>{formatCurrency(taxAmount, invoice.currency)}</span>
             </div>

package/src/components/waka-kubernetes-overview/index.tsx

@@ -225,6 +225,10 @@ function ClusterSummary({
   const totalMem = nodes.reduce((acc, n) => acc + n.memory.total, 0)
   const usedMem = nodes.reduce((acc, n) => acc + n.memory.used, 0)
 
+  // Guard empty cluster: x/0 is NaN, and NaN.toFixed(0) renders the string "NaN".
+  const pct = (used: number, total: number) =>
+    total > 0 ? (used / total) * 100 : 0
+
   return (
     <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 border-b">
       <div className="space-y-1">
@@ -232,24 +236,24 @@ function ClusterSummary({
         <div className="text-2xl font-bold">
           {healthyNodes}/{nodes.length}
         </div>
-        <Progress value={(healthyNodes / nodes.length) * 100} className="h-1" />
+        <Progress value={pct(healthyNodes, nodes.length)} className="h-1" />
       </div>
       <div className="space-y-1">
         <div className="text-sm text-muted-foreground">Pods</div>
         <div className="text-2xl font-bold">
           {runningPods}/{pods.length}
         </div>
-        <Progress value={(runningPods / pods.length) * 100} className="h-1" />
+        <Progress value={pct(runningPods, pods.length)} className="h-1" />
       </div>
       <div className="space-y-1">
         <div className="text-sm text-muted-foreground">CPU Usage</div>
-        <div className="text-2xl font-bold">{((usedCpu / totalCpu) * 100).toFixed(0)}%</div>
-        <Progress value={(usedCpu / totalCpu) * 100} className="h-1" />
+        <div className="text-2xl font-bold">{pct(usedCpu, totalCpu).toFixed(0)}%</div>
+        <Progress value={pct(usedCpu, totalCpu)} className="h-1" />
       </div>
       <div className="space-y-1">
         <div className="text-sm text-muted-foreground">Memory Usage</div>
-        <div className="text-2xl font-bold">{((usedMem / totalMem) * 100).toFixed(0)}%</div>
-        <Progress value={(usedMem / totalMem) * 100} className="h-1" />
+        <div className="text-2xl font-bold">{pct(usedMem, totalMem).toFixed(0)}%</div>
+        <Progress value={pct(usedMem, totalMem)} className="h-1" />
       </div>
     </div>
   )

package/src/components/waka-level-progress/index.tsx

@@ -335,7 +335,8 @@ export function WakaLevelProgress({
   const xpInCurrentLevel = currentXp - xpAtCurrentLevel
   const xpNeededForLevel = xpForNextLevel - xpAtCurrentLevel
   const progressPercent = Math.min(100, (xpInCurrentLevel / xpNeededForLevel) * 100)
-  const xpRemaining = xpForNextLevel - currentXp
+  // Clamp so an over-threshold XP doesn't render a negative "X XP to next level".
+  const xpRemaining = Math.max(0, xpForNextLevel - currentXp)
 
   // Size configurations
   const sizeConfig = {

package/src/components/waka-log-viewer/index.tsx

@@ -195,7 +195,9 @@ export function WakaLogViewer({
           return (
             log.message.toLowerCase().includes(query) ||
             log.source?.toLowerCase().includes(query) ||
-            JSON.stringify(log.metadata).toLowerCase().includes(query)
+            // metadata is optional: JSON.stringify(undefined) returns the value
+            // `undefined`, so `.toLowerCase()` would throw — coalesce to {} first.
+            JSON.stringify(log.metadata ?? {}).toLowerCase().includes(query)
           )
         }
         return true

package/src/components/waka-magnetic-button/index.tsx

@@ -179,7 +179,7 @@ function useMagneticEffect(
   const { enabled, radius, strength, duration } = options
   const [transform, setTransform] = React.useState({ x: 0, y: 0 })
   const [contentTransform, setContentTransform] = React.useState({ x: 0, y: 0 })
-  const animationRef = React.useRef<number>()
+  const animationRef = React.useRef<number>(undefined)
   const targetRef = React.useRef({ x: 0, y: 0 })
   const currentRef = React.useRef({ x: 0, y: 0 })
   const isActiveRef = React.useRef(false)

package/src/components/waka-mention-input/index.tsx

@@ -482,7 +482,7 @@ export const WakaMentionInput = React.forwardRef<HTMLTextAreaElement, WakaMentio
     const [searchQuery, setSearchQuery] = React.useState("")
     const [loading, setLoading] = React.useState(false)
 
-    const searchTimeoutRef = React.useRef<NodeJS.Timeout>()
+    const searchTimeoutRef = React.useRef<NodeJS.Timeout>(undefined)
     const triggerStartRef = React.useRef<number>(-1)
 
     // Sync with external value
@@ -514,6 +514,15 @@ export const WakaMentionInput = React.forwardRef<HTMLTextAreaElement, WakaMentio
       setMentions(parsedMentions)
     }, [triggers])
 
+    // Parse mentions from the initial (possibly controlled) value once on mount:
+    // the sync effect above only runs when externalValue !== internal value, but
+    // at mount they're equal, so pre-filled markup wouldn't render chips until the
+    // first edit. parseMentions only setMentions (no setValue) -> no render loop.
+    React.useEffect(() => {
+      if (value) parseMentions(value)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
     // Get plain text
     const plainText = React.useMemo(() => {
       let text = value

package/src/components/waka-order-tracker/index.tsx

@@ -268,13 +268,15 @@ export function useOrderTracker(
 
   const currentStepIndex = React.useMemo(() => {
     if (!order) return 0
-    return statusOrder.indexOf(order.status)
+    // indexOf returns -1 for an unknown status; clamp to 0 so progress never
+    // goes negative (a -1 index yielded e.g. -25%).
+    return Math.max(0, statusOrder.indexOf(order.status))
   }, [order])
 
   const isDelivered = order?.status === "delivered"
 
   const progressPercentage = React.useMemo(() => {
-    return (currentStepIndex / (statusOrder.length - 1)) * 100
+    return Math.max(0, Math.min(100, (currentStepIndex / (statusOrder.length - 1)) * 100))
   }, [currentStepIndex])
 
   const timeUntilDelivery = React.useMemo(() => {

package/src/components/waka-pod-card/index.tsx

@@ -254,7 +254,11 @@ function ContainerCard({
                   </span>
                 </div>
                 <Progress
-                  value={(container.resources.cpu.used / container.resources.cpu.limit) * 100}
+                  value={
+                    container.resources.cpu.limit > 0
+                      ? Math.min(100, (container.resources.cpu.used / container.resources.cpu.limit) * 100)
+                      : 0
+                  }
                   className="h-1.5"
                 />
               </div>
@@ -268,7 +272,11 @@ function ContainerCard({
                   </span>
                 </div>
                 <Progress
-                  value={(container.resources.memory.used / container.resources.memory.limit) * 100}
+                  value={
+                    container.resources.memory.limit > 0
+                      ? Math.min(100, (container.resources.memory.used / container.resources.memory.limit) * 100)
+                      : 0
+                  }
                   className="h-1.5"
                 />
               </div>

package/src/components/waka-presence-indicator/index.tsx

@@ -140,7 +140,7 @@ export function usePresence(options: UsePresenceOptions = {}): UsePresenceReturn
   })
 
   // Auto-away timer
-  const autoAwayTimerRef = React.useRef<NodeJS.Timeout>()
+  const autoAwayTimerRef = React.useRef<NodeJS.Timeout>(undefined)
   const lastActivityRef = React.useRef<number>(Date.now())
 
   // Persist to localStorage

package/src/components/waka-quest-card/index.tsx

@@ -1176,7 +1176,11 @@ export function useQuests({ initialQuests, onQuestComplete, onQuestClaimed }: Us
         )
 
         const completedCount = updatedObjectives.filter((o) => o.completed).length
-        const progress = (completedCount / updatedObjectives.length) * 100
+        // Guard against a quest with no objectives (0/0 -> NaN).
+        const progress =
+          updatedObjectives.length > 0
+            ? (completedCount / updatedObjectives.length) * 100
+            : 0
         const allComplete = completedCount === updatedObjectives.length
 
         const newStatus = allComplete
@@ -1220,7 +1224,11 @@ export function useQuests({ initialQuests, onQuestComplete, onQuestClaimed }: Us
         })
 
         const completedCount = updatedObjectives.filter((o) => o.completed).length
-        const progress = (completedCount / updatedObjectives.length) * 100
+        // Guard against a quest with no objectives (0/0 -> NaN).
+        const progress =
+          updatedObjectives.length > 0
+            ? (completedCount / updatedObjectives.length) * 100
+            : 0
         const allComplete = completedCount === updatedObjectives.length
 
         const newStatus = allComplete

package/src/components/waka-rating-input/index.tsx

@@ -228,10 +228,13 @@ function RatingIcon({
       return filled ? customFilledIcon : customIcon
     }
     if (customIcon) {
-      return React.cloneElement(customIcon as React.ReactElement, {
-        className: iconClasses,
-        style: { color: filled ? currentColor : inactiveColor },
-      })
+      return React.cloneElement(
+        customIcon as React.ReactElement<{ className?: string; style?: React.CSSProperties }>,
+        {
+          className: iconClasses,
+          style: { color: filled ? currentColor : inactiveColor },
+        }
+      )
     }
 
     return (