tower-studio 0.1.3 → 0.1.5

package/src/components/onboarding/guided-tour.tsx

@@ -1,255 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback, useRef } from "react";
-import { Button } from "@/components/ui/button";
-import { useI18n } from "@/lib/i18n";
-import { setConfigValue } from "@/actions/config-actions";
-import { X } from "lucide-react";
-
-interface TourStep {
-  target: string; // data-tour attribute value
-  titleKey: string;
-  descKey: string;
-  placement: "top" | "bottom" | "left" | "right";
-  waitForTarget?: boolean; // wait until target appears in DOM
-}
-
-const TOUR_STEPS: TourStep[] = [
-  {
-    target: "create-workspace",
-    titleKey: "tour.step1.title",
-    descKey: "tour.step1.desc",
-    placement: "right",
-  },
-  {
-    target: "create-project",
-    titleKey: "tour.step2.title",
-    descKey: "tour.step2.desc",
-    placement: "bottom",
-    waitForTarget: true,
-  },
-  {
-    target: "open-assistant",
-    titleKey: "tour.step3.title",
-    descKey: "tour.step3.desc",
-    placement: "bottom",
-  },
-];
-
-interface GuidedTourProps {
-  onComplete: () => void;
-}
-
-export function GuidedTour({ onComplete }: GuidedTourProps) {
-  const { t } = useI18n();
-  const [currentStep, setCurrentStep] = useState(0);
-  const [targetRect, setTargetRect] = useState<DOMRect | null>(null);
-  const [visible, setVisible] = useState(false);
-  const observerRef = useRef<MutationObserver | null>(null);
-
-  const step = TOUR_STEPS[currentStep];
-
-  const handleComplete = useCallback(async () => {
-    await setConfigValue("onboarding.tourCompleted", true);
-    onComplete();
-  }, [onComplete]);
-
-  const findTarget = useCallback(() => {
-    if (!step) return null;
-    return document.querySelector(`[data-tour="${step.target}"]`) as HTMLElement | null;
-  }, [step]);
-
-  const updatePosition = useCallback(() => {
-    const el = findTarget();
-    if (el) {
-      setTargetRect(el.getBoundingClientRect());
-      setVisible(true);
-    } else {
-      setVisible(false);
-    }
-  }, [findTarget]);
-
-  // Watch for target element appearing in DOM (for steps that require navigation first)
-  useEffect(() => {
-    updatePosition();
-
-    let skipTimer: ReturnType<typeof setTimeout> | null = null;
-
-    if (!visible && step?.waitForTarget) {
-      observerRef.current = new MutationObserver(() => {
-        const el = findTarget();
-        if (el) {
-          setTargetRect(el.getBoundingClientRect());
-          setVisible(true);
-          observerRef.current?.disconnect();
-          if (skipTimer) clearTimeout(skipTimer);
-        }
-      });
-      observerRef.current.observe(document.body, { childList: true, subtree: true });
-
-      // Auto-skip after 5s if target never appears (user hasn't navigated there)
-      skipTimer = setTimeout(() => {
-        const el = findTarget();
-        if (!el) {
-          setCurrentStep((s) => {
-            const next = s + 1;
-            return next < TOUR_STEPS.length ? next : s;
-          });
-          // If it was the last step, complete the tour
-          if (currentStep >= TOUR_STEPS.length - 1) {
-            handleComplete();
-          }
-        }
-      }, 5000);
-    }
-
-    const handleResize = () => updatePosition();
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("scroll", handleResize, true);
-
-    return () => {
-      observerRef.current?.disconnect();
-      if (skipTimer) clearTimeout(skipTimer);
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("scroll", handleResize, true);
-    };
-  }, [currentStep, step, findTarget, updatePosition, visible, handleComplete]);
-
-  // Re-position on any click (user may have navigated)
-  useEffect(() => {
-    const timer = setInterval(updatePosition, 1000);
-    return () => clearInterval(timer);
-  }, [updatePosition]);
-
-  const handleNext = useCallback(() => {
-    if (currentStep < TOUR_STEPS.length - 1) {
-      setCurrentStep((s) => s + 1);
-      setVisible(false);
-    } else {
-      handleComplete();
-    }
-  }, [currentStep]);
-
-  if (!step) return null;
-
-  // Calculate tooltip position
-  const getTooltipStyle = (): React.CSSProperties => {
-    if (!targetRect) return { display: "none" };
-
-    const gap = 12;
-    const style: React.CSSProperties = { position: "fixed", zIndex: 10001 };
-
-    switch (step.placement) {
-      case "right":
-        style.left = targetRect.right + gap;
-        style.top = targetRect.top + targetRect.height / 2;
-        style.transform = "translateY(-50%)";
-        break;
-      case "bottom":
-        style.left = targetRect.left + targetRect.width / 2;
-        style.top = targetRect.bottom + gap;
-        style.transform = "translateX(-50%)";
-        break;
-      case "left":
-        style.right = window.innerWidth - targetRect.left + gap;
-        style.top = targetRect.top + targetRect.height / 2;
-        style.transform = "translateY(-50%)";
-        break;
-      case "top":
-        style.left = targetRect.left + targetRect.width / 2;
-        style.bottom = window.innerHeight - targetRect.top + gap;
-        style.transform = "translateX(-50%)";
-        break;
-    }
-
-    return style;
-  };
-
-  return (
-    <>
-      {/* Overlay with cutout for target element */}
-      {visible && targetRect && (
-        <>
-          {/* Semi-transparent backdrop */}
-          <div
-            className="fixed inset-0 z-[10000]"
-            style={{
-              background: `radial-gradient(
-                ellipse at ${targetRect.left + targetRect.width / 2}px ${targetRect.top + targetRect.height / 2}px,
-                transparent ${Math.max(targetRect.width, targetRect.height)}px,
-                rgba(0,0,0,0.6) ${Math.max(targetRect.width, targetRect.height) + 30}px
-              )`,
-            }}
-            onClick={handleNext}
-          />
-
-          {/* Highlight ring around target */}
-          <div
-            className="pointer-events-none fixed z-[10001] rounded-lg ring-2 ring-amber-400 ring-offset-2 ring-offset-background"
-            style={{
-              left: targetRect.left - 4,
-              top: targetRect.top - 4,
-              width: targetRect.width + 8,
-              height: targetRect.height + 8,
-            }}
-          />
-
-          {/* Tooltip */}
-          <div
-            className="fixed z-[10002] w-72 rounded-xl border border-border bg-card p-4 shadow-2xl"
-            style={getTooltipStyle()}
-          >
-            <div className="flex items-start justify-between gap-2">
-              <div>
-                <h3 className="text-sm font-semibold text-foreground">
-                  {t(step.titleKey as Parameters<typeof t>[0])}
-                </h3>
-                <p className="mt-1 text-xs text-muted-foreground leading-relaxed">
-                  {t(step.descKey as Parameters<typeof t>[0])}
-                </p>
-              </div>
-              <button
-                onClick={handleComplete}
-                className="shrink-0 rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
-              >
-                <X className="h-3.5 w-3.5" />
-              </button>
-            </div>
-
-            <div className="mt-3 flex items-center justify-between">
-              {/* Step indicator */}
-              <div className="flex gap-1">
-                {TOUR_STEPS.map((_, i) => (
-                  <div
-                    key={i}
-                    className={`h-1.5 w-1.5 rounded-full ${
-                      i === currentStep ? "bg-amber-400" : i < currentStep ? "bg-amber-400/40" : "bg-muted"
-                    }`}
-                  />
-                ))}
-              </div>
-
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="ghost"
-                  className="h-7 px-2 text-xs text-muted-foreground"
-                  onClick={handleComplete}
-                >
-                  {t("tour.skip" as Parameters<typeof t>[0])}
-                </Button>
-                <Button
-                  className="h-7 px-3 text-xs bg-amber-500/15 text-amber-300 ring-1 ring-amber-500/25 hover:bg-amber-500/25"
-                  onClick={handleNext}
-                >
-                  {currentStep < TOUR_STEPS.length - 1
-                    ? t("tour.next" as Parameters<typeof t>[0])
-                    : t("tour.done" as Parameters<typeof t>[0])}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </>
-      )}
-    </>
-  );
-}

package/src/components/onboarding/onboarding-wizard.tsx

@@ -1,84 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { useI18n } from "@/lib/i18n";
-import { setOnboardingProgress } from "@/actions/onboarding-actions";
-import { WizardStepUsername } from "./wizard-step-username";
-import { WizardStepCli } from "./wizard-step-cli";
-
-const TOTAL_STEPS = 2;
-
-interface OnboardingWizardProps {
-  onComplete: () => void;
-  initialStep?: number;
-  initialUsername?: string;
-}
-
-export function OnboardingWizard({ onComplete, initialStep, initialUsername }: OnboardingWizardProps) {
-  const { t } = useI18n();
-  const [step, setStep] = useState(initialStep ?? 1);
-  const [username, setUsername] = useState(initialUsername ?? "");
-
-  async function handleUsernameNext(name: string) {
-    setUsername(name);
-    await setOnboardingProgress(1);
-    setStep(2);
-  }
-
-  const stepIndicator = t("onboarding.stepIndicator")
-    .replace("{current}", String(step))
-    .replace("{total}", String(TOTAL_STEPS));
-
-  return (
-    <Dialog open={true} onOpenChange={() => {}} disablePointerDismissal>
-      <DialogContent
-        showCloseButton={false}
-        style={{
-          width: "100vw",
-          height: "100vh",
-          maxWidth: "none",
-          top: 0,
-          left: 0,
-          transform: "none",
-          borderRadius: 0,
-        }}
-      >
-        <div className="flex flex-col items-center justify-center h-full">
-          <div className="w-full max-w-md px-4 space-y-8">
-            {/* Wizard title */}
-            <div className="text-center space-y-3">
-              <h1 className="text-2xl font-bold">{t("onboarding.title")}</h1>
-
-              {/* Step indicator dots */}
-              <div className="flex items-center justify-center gap-2">
-                {Array.from({ length: TOTAL_STEPS }, (_, i) => (
-                  <div
-                    key={i}
-                    className={`h-2 w-2 rounded-full transition-colors ${
-                      i + 1 === step
-                        ? "bg-primary"
-                        : i + 1 < step
-                        ? "bg-primary/50"
-                        : "bg-muted"
-                    }`}
-                  />
-                ))}
-              </div>
-
-              <p className="text-xs text-muted-foreground">{stepIndicator}</p>
-            </div>
-
-            {/* Step content */}
-            {step === 1 && (
-              <WizardStepUsername onNext={handleUsernameNext} />
-            )}
-            {step === 2 && (
-              <WizardStepCli username={username} onComplete={onComplete} />
-            )}
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/onboarding/wizard-step-cli.tsx

@@ -1,53 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { useI18n } from "@/lib/i18n";
-import { CLIAdapterTester } from "@/components/settings/cli-adapter-tester";
-import { completeOnboarding } from "@/actions/onboarding-actions";
-import type { TestResult } from "@/lib/cli-test";
-
-interface WizardStepCliProps {
-  username: string;
-  onComplete: () => void;
-}
-
-export function WizardStepCli({ username, onComplete }: WizardStepCliProps) {
-  const { t } = useI18n();
-  const [testResult, setTestResult] = useState<TestResult | null>(null);
-  const [completing, setCompleting] = useState(false);
-
-  async function handleComplete() {
-    setCompleting(true);
-    await completeOnboarding(username);
-    onComplete();
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="space-y-2">
-        <h2 className="text-xl font-semibold">{t("onboarding.step2.title")}</h2>
-        <p className="text-sm text-muted-foreground">{t("onboarding.step2.desc")}</p>
-      </div>
-
-      <CLIAdapterTester
-        adapterType="claude_code"
-        adapterLabel="Claude CLI"
-        onResult={setTestResult}
-      />
-
-      {testResult && !testResult.ok && (
-        <p className="text-sm text-destructive">{t("onboarding.cliRequired")}</p>
-      )}
-
-      <div className="flex justify-end">
-        <Button
-          onClick={handleComplete}
-          disabled={!testResult?.ok || completing}
-        >
-          {t("onboarding.complete")}
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/components/onboarding/wizard-step-username.tsx

@@ -1,59 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { useI18n } from "@/lib/i18n";
-
-interface WizardStepUsernameProps {
-  onNext: (username: string) => void;
-}
-
-export function WizardStepUsername({ onNext }: WizardStepUsernameProps) {
-  const { t } = useI18n();
-  const [value, setValue] = useState("");
-
-  const trimmed = value.trim();
-  const isDisabled = trimmed.length === 0;
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!isDisabled) {
-      onNext(trimmed);
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-6">
-      <div className="space-y-2">
-        <h2 className="text-xl font-semibold">{t("onboarding.step1.title")}</h2>
-        <p className="text-sm text-muted-foreground">{t("onboarding.step1.desc")}</p>
-      </div>
-
-      <div className="space-y-2">
-        <label
-          htmlFor="onboarding-username"
-          className="text-sm font-medium leading-none"
-        >
-          {t("onboarding.step1.usernameLabel")}
-        </label>
-        <input
-          id="onboarding-username"
-          type="text"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          placeholder={t("onboarding.step1.usernamePlaceholder")}
-          className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          maxLength={64}
-          autoFocus
-          autoComplete="username"
-        />
-      </div>
-
-      <div className="flex justify-end">
-        <Button type="submit" disabled={isDisabled}>
-          {t("onboarding.step1.next")}
-        </Button>
-      </div>
-    </form>
-  );
-}