feat(client): add user profile components

apps/client/src/components/ProfileImage.tsx

···
+import { formatName } from "@/utils/userUtils";
+
+interface ProfileImageProps {
+  user: { name: string };
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const sizeMap = {
+  sm: "h-6 w-6 text-xs",
+  md: "h-8 w-8 text-sm",
+  lg: "h-10 w-10 text-base",
+};
+
+export const ProfileImage = ({
+  user: { name },
+  size = "md",
+  className = "",
+}: ProfileImageProps) => {
+  const sizeClasses = sizeMap[size];
+  const initial = formatName(name);
+
+  return (
+    <div
+      className={`rounded-full bg-ctp-blue flex items-center justify-center text-ctp-base font-medium ${sizeClasses} ${className}`}
+    >
+      {initial}
+    </div>
+  );
+};

apps/client/src/components/Progress.tsx

···
+import { raise } from "@cv/utils";
+import { cva } from "class-variance-authority";
+import {
+  Children,
+  createContext,
+  type ReactElement,
+  type ReactNode,
+  useContext,
+  useState,
+} from "react";
+import { z } from "zod";
+
+interface ProgressContextValue {
+  currentStep: number;
+  next: () => void;
+  back: () => void;
+  canGoNext: boolean;
+  canGoBack: boolean;
+}
+
+const ProgressContext = createContext<ProgressContextValue | null>(null);
+
+export const useProgressContext = () => {
+  return (
+    useContext(ProgressContext) ??
+    raise("useProgressContext must be used within a ProgressProvider")
+  );
+};
+
+export const stepStateSchema = z.enum([
+  "selected",
+  "completed",
+  "pending",
+  "error",
+]);
+
+export const stepPropsSchema = z.object({
+  name: z.string().min(1, "Step name is required"),
+  children: z.any().optional(),
+  index: z.number().int().nonnegative().optional(),
+  state: stepStateSchema.optional(),
+});
+
+export type StepProps = z.infer<typeof stepPropsSchema>;
+export type StepState = z.infer<typeof stepStateSchema>;
+
+const validateStepProps = (props: unknown): StepProps | null => {
+  const result = stepPropsSchema.safeParse(props);
+  if (result.success) {
+    return result.data;
+  }
+  return null;
+};
+
+const getStepPropsFromElement = (element: ReactElement): StepProps | null => {
+  if (
+    element &&
+    typeof element === "object" &&
+    "props" in element &&
+    element.props &&
+    typeof element.props === "object"
+  ) {
+    return validateStepProps(element.props);
+  }
+  return null;
+};
+
+const stepContainerVariants = cva("flex items-center space-x-2", {
+  variants: {
+    state: {
+      selected: "text-ctp-blue",
+      completed: "text-ctp-green",
+      pending: "text-ctp-subtext0",
+      error: "text-ctp-red",
+    },
+  },
+  defaultVariants: {
+    state: "pending",
+  },
+});
+
+const stepIndicatorVariants = cva(
+  "h-8 w-8 rounded-full flex items-center justify-center",
+  {
+    variants: {
+      state: {
+        selected: "bg-ctp-blue text-ctp-base",
+        completed: "bg-ctp-green text-ctp-base",
+        pending: "bg-ctp-surface0",
+        error: "bg-ctp-red text-ctp-base",
+      },
+    },
+    defaultVariants: {
+      state: "pending",
+    },
+  },
+);
+
+interface StepComponentProps {
+  name: string;
+  children?: ReactNode;
+}
+
+interface StepRenderProps {
+  name: string;
+  index: number;
+  state: StepState;
+}
+
+const Step = (_props: StepComponentProps) => {
+  // This component is just a marker - Progress will render it
+  return null;
+};
+
+Step.displayName = "Progress.Step";
+
+const StepRenderer = ({ name, index, state }: StepRenderProps) => {
+  const stepNumber = index + 1;
+
+  return (
+    <div className={stepContainerVariants({ state })}>
+      <div className={stepIndicatorVariants({ state })}>{stepNumber}</div>
+      <span className="font-medium">{name}</span>
+    </div>
+  );
+};
+
+const ConnectorLine = ({ isCompleted }: { isCompleted: boolean }) => (
+  <div
+    className={`h-1 w-16 ${isCompleted ? "bg-ctp-green" : "bg-ctp-surface0"}`}
+  />
+);
+
+interface ProgressProps {
+  initialStep?: number;
+  onNext?: () => void;
+  onBack?: () => void;
+  children: ReactNode;
+}
+
+export const Progress = ({
+  initialStep = 0,
+  onNext,
+  onBack,
+  children,
+}: ProgressProps) => {
+  const [currentStep, setCurrentStep] = useState(initialStep);
+
+  const steps = Children.toArray(children).filter(
+    (child): child is ReactElement =>
+      child !== null &&
+      typeof child === "object" &&
+      "type" in child &&
+      child.type === Step,
+  );
+
+  const totalSteps = steps.length;
+  const canGoNext = currentStep < totalSteps - 1;
+  const canGoBack = currentStep > 0;
+
+  const handleNext = () => {
+    if (canGoNext) {
+      setCurrentStep((prev) => prev + 1);
+      onNext?.();
+    }
+  };
+
+  const handleBack = () => {
+    if (canGoBack) {
+      setCurrentStep((prev) => prev - 1);
+      onBack?.();
+    }
+  };
+
+  const currentStepElement = steps[currentStep];
+  const currentStepProps = currentStepElement
+    ? getStepPropsFromElement(currentStepElement)
+    : null;
+  const currentStepContent = currentStepProps?.children ?? null;
+
+  return (
+    <ProgressContext.Provider
+      value={{
+        currentStep,
+        next: handleNext,
+        back: handleBack,
+        canGoNext,
+        canGoBack,
+      }}
+    >
+      <div>
+        <div className="mb-8">
+          <div className="flex items-center justify-center space-x-4">
+            {steps.map((stepElement, index) => {
+              const stepProps = getStepPropsFromElement(stepElement);
+              if (!stepProps) {
+                console.warn(`Invalid step props at index ${index}`);
+                return null;
+              }
+
+              const isCurrent = index === currentStep;
+              const isCompleted = index < currentStep;
+              const stepState: StepState = isCurrent
+                ? "selected"
+                : isCompleted
+                  ? "completed"
+                  : "pending";
+
+              return (
+                <div
+                  key={`step-${stepProps.name}-${index}`}
+                  className="flex items-center"
+                >
+                  <StepRenderer
+                    name={stepProps.name}
+                    index={index}
+                    state={stepState}
+                  />
+                  {index < totalSteps - 1 && (
+                    <ConnectorLine isCompleted={isCompleted} />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {currentStepContent && <div>{currentStepContent}</div>}
+      </div>
+    </ProgressContext.Provider>
+  );
+};
+
+Progress.Step = Step;

apps/client/src/components/Tooltip.tsx

···
+import { useEffect, useRef, useState } from "react";
+
+interface TooltipProps {
+  children: React.ReactNode;
+  position?: "left" | "right" | "top" | "bottom";
+  triggerRef: React.RefObject<HTMLElement>;
+}
+
+export const Tooltip = ({
+  children,
+  position = "right",
+  triggerRef,
+}: TooltipProps) => {
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const trigger = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    if (!trigger) {
+      return;
+    }
+    if (!tooltip) {
+      return;
+    }
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+
+    let top = 0;
+    let left = 0;
+
+    switch (position) {
+      case "right":
+        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+        left = triggerRect.right + 8;
+        break;
+      case "left":
+        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+        left = triggerRect.left - tooltipRect.width - 8;
+        break;
+      case "top":
+        top = triggerRect.top - tooltipRect.height - 8;
+        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "bottom":
+        top = triggerRect.bottom + 8;
+        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+        break;
+    }
+
+    setTooltipPosition({ top, left });
+  }, [position, triggerRef]);
+
+  return (
+    <div
+      ref={tooltipRef}
+      className="fixed z-50 pointer-events-none transition-opacity duration-200"
+      style={{
+        top: `${tooltipPosition.top}px`,
+        left: `${tooltipPosition.left}px`,
+      }}
+    >
+      {children}
+    </div>
+  );
+};

apps/client/src/components/UserProfileDrawer.tsx

···
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { ProfileImage } from "./ProfileImage";
+import { ServerStatusIndicator } from "./ServerStatusIndicator";
+
+type UseHoverMenuProps = {
+  hoverDelay?: number;
+};
+
+const useHoverMenu = ({ hoverDelay = 200 }: UseHoverMenuProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [hoverTimeout, setHoverTimeout] = useState<number | null>(null);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+      }
+    };
+  }, [hoverTimeout]);
+
+  const handleMouseEnter = () => {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+      setHoverTimeout(null);
+    }
+    setIsOpen(true);
+  };
+
+  const handleMouseLeave = () => {
+    const timeout = setTimeout(() => {
+      setIsOpen(false);
+    }, hoverDelay);
+    setHoverTimeout(timeout);
+  };
+
+  return {
+    isOpen,
+    handleMouseEnter,
+    handleMouseLeave,
+  };
+};
+
+type UserProfileDrawerProps = {
+  user: {
+    name: string;
+  };
+  onLogout: () => void;
+  hoverDelay?: number;
+  onProfileClick?: () => void;
+};
+
+export const UserProfileDrawer = ({
+  user,
+  onLogout,
+  hoverDelay = 200,
+  onProfileClick = () => {
+    window.location.href = "/profile";
+  },
+}: UserProfileDrawerProps) => {
+  const { isOpen, handleMouseEnter, handleMouseLeave } = useHoverMenu({
+    hoverDelay,
+  });
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        className="relative flex items-center gap-3 cursor-pointer p-3 rounded-lg hover:bg-ctp-surface0 transition-colors focus:outline-none focus:ring-2 focus:ring-ctp-blue focus:ring-inset"
+        onClick={onProfileClick}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onProfileClick();
+          }
+        }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        aria-expanded={isOpen}
+        aria-haspopup="menu"
+        aria-label="User profile menu"
+      >
+        {/* Profile Image */}
+        <ProfileImage user={user} size="md" />
+
+        {/* User Info */}
+        <div className="hidden md:block">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-ctp-text">
+              {user.name}
+            </span>
+            <ServerStatusIndicator compact />
+          </div>
+        </div>
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div
+          className="absolute right-0 top-full mt-2 w-48 bg-ctp-surface0 rounded-lg shadow-lg border border-ctp-surface1 py-2 z-50"
+          role="menu"
+          aria-hidden={!isOpen}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          <Link
+            to="/profile"
+            role="menuitem"
+            className="flex items-center gap-3 px-4 py-2 text-sm text-ctp-text hover:bg-ctp-surface1 transition-colors"
+          >
+            <ProfileImage user={user} size="sm" />
+            <div>
+              <div className="font-medium">{user.name}</div>
+              <div className="text-xs text-ctp-subtext0">View Profile</div>
+            </div>
+          </Link>
+
+          <div className="border-t border-ctp-surface1 my-2"></div>
+
+          <a
+            href={import.meta.env["VITE_DOCS_URL"] || "http://localhost:3001"}
+            target="_blank"
+            rel="noopener noreferrer"
+            role="menuitem"
+            className="flex items-center gap-3 px-4 py-2 text-sm text-ctp-text hover:bg-ctp-surface1 transition-colors"
+          >
+            <span className="text-lg">📚</span>
+            <span>Documentation</span>
+          </a>
+
+          <button
+            type="button"
+            onClick={onLogout}
+            role="menuitem"
+            className="w-full flex items-center gap-3 px-4 py-2 text-sm text-ctp-red hover:bg-ctp-surface1 transition-colors text-left"
+          >
+            <span className="text-lg">🚪</span>
+            <span>Logout</span>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};