feat: Add error handling to auto-mode facade and implement followUp feature. Fix Claude weekly usage indicator. Fix mobile card drag

apps/ui/src/components/usage-popover.tsx

@@ -8,6 +8,7 @@ import { cn } from '@/lib/utils';
 import { useSetupStore } from '@/store/setup-store';
 import { AnthropicIcon, OpenAIIcon } from '@/components/ui/provider-icon';
 import { useClaudeUsage, useCodexUsage } from '@/hooks/queries';
+import { getExpectedWeeklyPacePercentage, getPaceStatusLabel } from '@/store/utils/usage-utils';
 
 // Error codes for distinguishing failure modes
 const ERROR_CODES = {
@@ -146,13 +147,28 @@ export function UsagePopover() {
     return { color: 'text-green-500', icon: CheckCircle, bg: 'bg-green-500' };
   };
 
-  // Helper component for the progress bar
-  const ProgressBar = ({ percentage, colorClass }: { percentage: number; colorClass: string }) => (
-    <div className="h-2 w-full bg-secondary/50 rounded-full overflow-hidden">
+  // Helper component for the progress bar with optional pace indicator
+  const ProgressBar = ({
+    percentage,
+    colorClass,
+    pacePercentage,
+  }: {
+    percentage: number;
+    colorClass: string;
+    pacePercentage?: number | null;
+  }) => (
+    <div className="relative h-2 w-full bg-secondary/50 rounded-full overflow-hidden">
       <div
         className={cn('h-full transition-all duration-500', colorClass)}
         style={{ width: `${Math.min(percentage, 100)}%` }}
       />
+      {pacePercentage != null && pacePercentage > 0 && pacePercentage < 100 && (
+        <div
+          className="absolute top-0 h-full w-0.5 bg-foreground/60"
+          style={{ left: `${pacePercentage}%` }}
+          title={`Expected: ${Math.round(pacePercentage)}%`}
+        />
+      )}
     </div>
   );
 
@@ -163,6 +179,7 @@ export function UsagePopover() {
     resetText,
     isPrimary = false,
     stale = false,
+    pacePercentage,
   }: {
     title: string;
     subtitle: string;
@@ -170,6 +187,7 @@ export function UsagePopover() {
     resetText?: string;
     isPrimary?: boolean;
     stale?: boolean;
+    pacePercentage?: number | null;
   }) => {
     const isValidPercentage =
       typeof percentage === 'number' && !isNaN(percentage) && isFinite(percentage);
@@ -177,6 +195,10 @@ export function UsagePopover() {
 
     const status = getStatusInfo(safePercentage);
     const StatusIcon = status.icon;
+    const paceLabel =
+      isValidPercentage && pacePercentage != null
+        ? getPaceStatusLabel(safePercentage, pacePercentage)
+        : null;
 
     return (
       <div
@@ -211,15 +233,28 @@ export function UsagePopover() {
         <ProgressBar
           percentage={safePercentage}
           colorClass={isValidPercentage ? status.bg : 'bg-muted-foreground/30'}
+          pacePercentage={pacePercentage}
         />
-        {resetText && (
-          <div className="mt-2 flex justify-end">
+        <div className="mt-2 flex items-center justify-between">
+          {paceLabel ? (
+            <p
+              className={cn(
+                'text-[10px] font-medium',
+                safePercentage > (pacePercentage ?? 0) ? 'text-orange-500' : 'text-green-500'
+              )}
+            >
+              {paceLabel}
+            </p>
+          ) : (
+            <div />
+          )}
+          {resetText && (
             <p className="text-xs text-muted-foreground flex items-center gap-1">
               <Clock className="w-3 h-3" />
               {resetText}
             </p>
-          </div>
-        )}
+          )}
+        </div>
       </div>
     );
   };
@@ -384,6 +419,7 @@ export function UsagePopover() {
                       percentage={claudeUsage.sonnetWeeklyPercentage}
                       resetText={claudeUsage.sonnetResetText}
                       stale={isClaudeStale}
+                      pacePercentage={getExpectedWeeklyPacePercentage(claudeUsage.weeklyResetTime)}
                     />
                     <UsageCard
                       title="Weekly"
@@ -391,6 +427,7 @@ export function UsagePopover() {
                       percentage={claudeUsage.weeklyPercentage}
                       resetText={claudeUsage.weeklyResetText}
                       stale={isClaudeStale}
+                      pacePercentage={getExpectedWeeklyPacePercentage(claudeUsage.weeklyResetTime)}
                     />
                   </div>