From d08ef472a304b5909bc49f49e0567578bf7485a8 Mon Sep 17 00:00:00 2001
From: Shirone <kacperlachowiczwp.pl@wp.pl>
Date: Thu, 15 Jan 2026 16:21:08 +0100
Subject: [PATCH] feat(ui): add shared skeleton component and update CLI status

- Add reusable SkeletonPulse component to replace 4 duplicate definitions
- Update CLI status components to use shared skeleton
- Simplify CLI status components by using React Query hooks

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/ui/src/components/ui/skeleton.tsx         | 18 ++++++++++++++++++
 .../cli-status/claude-cli-status.tsx           |  5 +----
 .../cli-status/codex-cli-status.tsx            |  5 +----
 .../cli-status/cursor-cli-status.tsx           |  5 +----
 .../cli-status/opencode-cli-status.tsx         |  5 +----
 5 files changed, 22 insertions(+), 16 deletions(-)
 create mode 100644 apps/ui/src/components/ui/skeleton.tsx

diff --git a/apps/ui/src/components/ui/skeleton.tsx b/apps/ui/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..0efc029a
--- /dev/null
+++ b/apps/ui/src/components/ui/skeleton.tsx
@@ -0,0 +1,18 @@
+/**
+ * Skeleton Components
+ *
+ * Loading placeholder components for content that's being fetched.
+ */
+
+import { cn } from '@/lib/utils';
+
+interface SkeletonPulseProps {
+  className?: string;
+}
+
+/**
+ * Pulsing skeleton placeholder for loading states
+ */
+export function SkeletonPulse({ className }: SkeletonPulseProps) {
+  return <div className={cn('animate-pulse bg-muted/50 rounded', className)} />;
+}
diff --git a/apps/ui/src/components/views/settings-view/cli-status/claude-cli-status.tsx b/apps/ui/src/components/views/settings-view/cli-status/claude-cli-status.tsx
index 2457969b..d4ad50c5 100644
--- a/apps/ui/src/components/views/settings-view/cli-status/claude-cli-status.tsx
+++ b/apps/ui/src/components/views/settings-view/cli-status/claude-cli-status.tsx
@@ -1,5 +1,6 @@
 import { useState, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
+import { SkeletonPulse } from '@/components/ui/skeleton';
 import { CheckCircle2, AlertCircle, RefreshCw, XCircle } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { CliStatus } from '../shared/types';
@@ -34,10 +35,6 @@ function getAuthMethodLabel(method: string): string {
   }
 }
 
-function SkeletonPulse({ className }: { className?: string }) {
-  return <div className={cn('animate-pulse bg-muted/50 rounded', className)} />;
-}
-
 function ClaudeCliStatusSkeleton() {
   return (
     <div
diff --git a/apps/ui/src/components/views/settings-view/cli-status/codex-cli-status.tsx b/apps/ui/src/components/views/settings-view/cli-status/codex-cli-status.tsx
index 86635264..675b66c5 100644
--- a/apps/ui/src/components/views/settings-view/cli-status/codex-cli-status.tsx
+++ b/apps/ui/src/components/views/settings-view/cli-status/codex-cli-status.tsx
@@ -1,5 +1,6 @@
 import { useState, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
+import { SkeletonPulse } from '@/components/ui/skeleton';
 import { CheckCircle2, AlertCircle, RefreshCw, XCircle } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { CliStatus } from '../shared/types';
@@ -29,10 +30,6 @@ function getAuthMethodLabel(method: string): string {
   }
 }
 
-function SkeletonPulse({ className }: { className?: string }) {
-  return <div className={cn('animate-pulse bg-muted/50 rounded', className)} />;
-}
-
 function CodexCliStatusSkeleton() {
   return (
     <div
diff --git a/apps/ui/src/components/views/settings-view/cli-status/cursor-cli-status.tsx b/apps/ui/src/components/views/settings-view/cli-status/cursor-cli-status.tsx
index bc49270c..f9cf6cae 100644
--- a/apps/ui/src/components/views/settings-view/cli-status/cursor-cli-status.tsx
+++ b/apps/ui/src/components/views/settings-view/cli-status/cursor-cli-status.tsx
@@ -1,5 +1,6 @@
 import { useState, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
+import { SkeletonPulse } from '@/components/ui/skeleton';
 import { CheckCircle2, AlertCircle, RefreshCw, XCircle } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { CursorIcon } from '@/components/ui/provider-icon';
@@ -19,10 +20,6 @@ interface CursorCliStatusProps {
   onRefresh: () => void;
 }
 
-function SkeletonPulse({ className }: { className?: string }) {
-  return <div className={cn('animate-pulse bg-muted/50 rounded', className)} />;
-}
-
 export function CursorCliStatusSkeleton() {
   return (
     <div
diff --git a/apps/ui/src/components/views/settings-view/cli-status/opencode-cli-status.tsx b/apps/ui/src/components/views/settings-view/cli-status/opencode-cli-status.tsx
index bfd9efe6..b8154726 100644
--- a/apps/ui/src/components/views/settings-view/cli-status/opencode-cli-status.tsx
+++ b/apps/ui/src/components/views/settings-view/cli-status/opencode-cli-status.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { SkeletonPulse } from '@/components/ui/skeleton';
 import { CheckCircle2, AlertCircle, RefreshCw, Bot, Cloud } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { CliStatus } from '../shared/types';
@@ -74,10 +75,6 @@ interface OpencodeCliStatusProps {
   onRefresh: () => void;
 }
 
-function SkeletonPulse({ className }: { className?: string }) {
-  return <div className={cn('animate-pulse bg-muted/50 rounded', className)} />;
-}
-
 export function OpencodeCliStatusSkeleton() {
   return (
     <div