jettypod 4.4.116 → 4.4.120

package/apps/dashboard/components/InstallClaudeScreen.tsx

@@ -1,23 +1,78 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import Image from 'next/image';
+import { Button } from '@/components/ui/Button';
+
+const statusMessages = [
+  "Downloading Claude Code...",
+  "Setting Up Environment...",
+  "Configuring Permissions...",
+  "Almost There...",
+];
 
 interface InstallClaudeScreenProps {
   onInstall: () => void;
   isInstalling: boolean;
-  installProgress?: string;
+  isSuccess: boolean;
 }
 
 export function InstallClaudeScreen({
   onInstall,
   isInstalling,
-  installProgress,
+  isSuccess,
 }: InstallClaudeScreenProps) {
+  const [messageIndex, setMessageIndex] = useState(0);
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (!isInstalling || isSuccess) return;
+    const interval = setInterval(() => {
+      setMessageIndex((prev) => (prev + 1) % statusMessages.length);
+    }, 2500);
+    return () => clearInterval(interval);
+  }, [isInstalling, isSuccess]);
+
+  useEffect(() => {
+    if (!isInstalling || isSuccess) return;
+    const interval = setInterval(() => {
+      setProgress((prev) => Math.min(prev + 2, 90));
+    }, 300);
+    return () => clearInterval(interval);
+  }, [isInstalling, isSuccess]);
+
+  useEffect(() => {
+    if (isSuccess) setProgress(100);
+  }, [isSuccess]);
+
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-zinc-900 p-8">
-      <div className="max-w-md w-full space-y-8">
+      <style jsx>{`
+        @keyframes pulse {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50% { opacity: 0.5; transform: scale(1.1); }
+        }
+        @keyframes drawCheck {
+          to { stroke-dashoffset: 0; }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(8px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        .pulse-dot {
+          animation: pulse 1.5s ease-in-out infinite;
+        }
+        .checkmark-draw {
+          animation: drawCheck 0.6s ease-out forwards;
+        }
+        .fade-in {
+          animation: fadeIn 0.4s ease-out forwards;
+        }
+      `}</style>
+
+      <div className="max-w-md w-full space-y-10">
         {/* Logo */}
-        <div className="flex flex-col items-center space-y-4">
+        <div className="flex flex-col items-center space-y-6">
           <Image
             src="/jettypod_wordmark.png"
             alt="JettyPod"
@@ -25,66 +80,100 @@ export function InstallClaudeScreen({
             height={40}
             priority
           />
-          <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
-            Claude Code Required
-          </h1>
-          <p className="text-zinc-500 dark:text-zinc-400 text-center">
-            JettyPod requires Claude Code to be installed.
-            Click below to install it automatically.
-          </p>
+          {!isInstalling && !isSuccess && (
+            <>
+              <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
+                Claude Code Required
+              </h1>
+              <p className="text-zinc-500 dark:text-zinc-400 text-center">
+                JettyPod requires Claude Code to be installed.
+                Click below to install it automatically.
+              </p>
+            </>
+          )}
         </div>
 
-        {/* Install Button or Progress */}
-        <div className="pt-4">
-          {isInstalling ? (
-            <div className="space-y-4" data-testid="install-progress">
-              <div className="w-full py-3 px-6 rounded-xl font-medium text-center bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300">
-                Installing Claude Code...
+        {/* Install Button / Progress / Success */}
+        <div className="pt-6">
+          {isSuccess ? (
+            <div className="flex flex-col items-center space-y-8 fade-in" data-testid="install-success">
+              {/* Animated Checkmark */}
+              <div
+                className="w-20 h-20 rounded-full flex items-center justify-center"
+                style={{ backgroundColor: '#819D9F' }}
+              >
+                <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+                  <polyline
+                    points="10,20 18,28 30,12"
+                    stroke="white"
+                    strokeWidth="3"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    fill="none"
+                    strokeDasharray="40"
+                    strokeDashoffset="40"
+                    className="checkmark-draw"
+                  />
+                </svg>
+              </div>
+
+              <h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
+                Claude Code Installed
+              </h2>
+              <p className="text-zinc-500 dark:text-zinc-400 text-center">
+                Redirecting you to connect your account...
+              </p>
+            </div>
+          ) : isInstalling ? (
+            <div className="space-y-8" data-testid="install-progress">
+              {/* Pulse dot + status message */}
+              <div className="flex items-center justify-center space-x-4">
+                <div
+                  className="w-3 h-3 rounded-full pulse-dot"
+                  style={{ backgroundColor: '#819D9F' }}
+                />
+                <span className="text-zinc-600 dark:text-zinc-300 font-medium">
+                  {statusMessages[messageIndex]}
+                </span>
+              </div>
+
+              {/* Progress bar */}
+              <div className="w-full h-1 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
+                <div
+                  className="h-full rounded-full transition-[width] duration-200 ease-out"
+                  style={{
+                    width: `${progress}%`,
+                    background: 'linear-gradient(90deg, #c8d9da, #819D9F)',
+                  }}
+                />
               </div>
-              {installProgress && (
-                <pre className="bg-zinc-100 dark:bg-zinc-800 p-4 rounded-lg text-sm text-zinc-600 dark:text-zinc-300 overflow-auto max-h-48">
-                  {installProgress}
-                </pre>
-              )}
             </div>
           ) : (
-            <button
+            <Button
               onClick={onInstall}
-              className="w-full py-3 px-6 rounded-xl font-medium transition-all duration-200 hover:-translate-y-1 hover:scale-[1.01] active:translate-y-0 active:scale-100"
-              style={{
-                cursor: 'pointer',
-                background: 'linear-gradient(145deg, #ffffff 0%, #faf9f7 10%, #f0f4f4 35%, #c8d9da 55%, #819D9F 90%)',
-                color: '#3d4d4e',
-                boxShadow: `
-                  0 1px 1px rgba(0, 0, 0, 0.02),
-                  0 2px 4px rgba(0, 0, 0, 0.03),
-                  0 6px 12px rgba(0, 0, 0, 0.05),
-                  0 12px 24px rgba(0, 0, 0, 0.06),
-                  0 20px 40px rgba(129, 157, 159, 0.2),
-                  0 32px 64px rgba(129, 157, 159, 0.18),
-                  inset 0 2px 4px rgba(255, 255, 255, 1),
-                  inset 0 -2px 4px rgba(129, 157, 159, 0.05)
-                `,
-              }}
+              size="lg"
+              fullWidth
               data-testid="install-claude-button"
             >
               Install Claude Code
-            </button>
+            </Button>
           )}
         </div>
 
-        {/* Info Section */}
-        <div className="pt-8 space-y-4">
-          <div className="border border-zinc-200 dark:border-zinc-700 rounded-lg p-4 text-zinc-500 dark:text-zinc-400 text-sm">
-            <p>
-              <strong className="text-zinc-700 dark:text-zinc-300">What is Claude Code?</strong>
-            </p>
-            <p className="mt-2">
-              Claude Code is an AI-powered coding assistant by Anthropic.
-              JettyPod uses it to help you plan and build software.
-            </p>
+        {/* Info Section - only show when idle */}
+        {!isInstalling && !isSuccess && (
+          <div className="pt-10 space-y-4">
+            <div className="rounded-lg p-6 text-zinc-500 dark:text-zinc-400 text-base">
+              <p>
+                <strong className="text-zinc-700 dark:text-zinc-300">What is Claude Code?</strong>
+              </p>
+              <p className="mt-2">
+                Claude Code is an AI-powered coding assistant by Anthropic.
+                JettyPod uses it to help you plan and build software.
+              </p>
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );

package/apps/dashboard/components/JettyLoader.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface JettyLoaderProps {
+  size?: number;
+  className?: string;
+}
+
+export function JettyLoader({ size = 48, className = '' }: JettyLoaderProps) {
+  const [showAlt, setShowAlt] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setShowAlt((prev) => !prev);
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className={className} style={{ width: size, height: size }}>
+      <img
+        src="/jetty-icon-loading.svg"
+        alt="Loading"
+        width={size}
+        height={size}
+        style={{ display: showAlt ? 'none' : 'block' }}
+      />
+      <img
+        src="/jetty-icon-loading-alt.svg"
+        alt="Loading"
+        width={size}
+        height={size}
+        style={{ display: showAlt ? 'block' : 'none' }}
+      />
+    </div>
+  );
+}