visionos-monorepo 0.1.0

package/.claude/worktrees/competent-burnell-8d1330/client/src/components/CliAuthPage.tsx

@@ -0,0 +1,385 @@
+import { useEffect, useState, type FormEvent } from "react";
+import {
+  LEARNING_TRACKS,
+  type CliAuthSession,
+  type CliAuthSessionStatus
+} from "../../../shared/src/index.js";
+import {
+  VisionOsApiError,
+  completeCliAuthSession,
+  getCliAuthSession
+} from "../lib/api.js";
+
+interface CliAuthPageProps {
+  sessionId: string;
+}
+
+function formatSessionTime(value: string) {
+  return new Date(value).toLocaleString(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short"
+  });
+}
+
+function getStatusCopy(status: CliAuthSessionStatus) {
+  if (status === "authenticated") return "Authenticated";
+  if (status === "expired") return "Expired";
+  return "Awaiting confirmation";
+}
+
+export function CliAuthPage({ sessionId }: CliAuthPageProps) {
+  const [session, setSession] = useState<CliAuthSession | null>(null);
+  const [learnerName, setLearnerName] = useState("");
+  const [learnerEmail, setLearnerEmail] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadSession() {
+      setLoading(true);
+      setErrorMessage(null);
+
+      try {
+        const payload = await getCliAuthSession(sessionId);
+
+        if (cancelled) return;
+
+        setSession(payload.session);
+        setLearnerName(payload.session.learner?.name ?? "");
+        setLearnerEmail(payload.session.learner?.email ?? "");
+      } catch (error) {
+        if (cancelled) return;
+
+        if (error instanceof VisionOsApiError) {
+          setErrorMessage(error.message);
+        } else if (error instanceof Error) {
+          setErrorMessage(error.message);
+        } else {
+          setErrorMessage("Unable to load the CLI authentication session.");
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    void loadSession();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [sessionId]);
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    const trimmedName = learnerName.trim();
+    const trimmedEmail = learnerEmail.trim().toLowerCase();
+
+    if (!trimmedName || !trimmedEmail) {
+      setErrorMessage("Enter your name and email address to continue.");
+      return;
+    }
+
+    setSubmitting(true);
+    setErrorMessage(null);
+
+    try {
+      const payload = await completeCliAuthSession(sessionId, {
+        learnerName: trimmedName,
+        learnerEmail: trimmedEmail
+      });
+
+      setSession(payload.session);
+      setLearnerName(payload.session.learner?.name ?? trimmedName);
+      setLearnerEmail(payload.session.learner?.email ?? trimmedEmail);
+    } catch (error) {
+      if (error instanceof VisionOsApiError) {
+        setErrorMessage(error.message);
+      } else if (error instanceof Error) {
+        setErrorMessage(error.message);
+      } else {
+        setErrorMessage("Unable to complete CLI authentication.");
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const track = session
+    ? LEARNING_TRACKS.find((learningTrack) => learningTrack.id === session.trackId)
+    : undefined;
+
+  return (
+    <div className="monitor-bezel">
+      <div className="monitor-screen" style={{ display: "flex", flexDirection: "column", minHeight: "calc(100vh - 48px)" }}>
+        {/* ── Header ─────────────────────── */}
+        <header className="m-site-header">
+          <div className="header-left">
+            <span className="header-brand">VisionOS</span>
+            <span className="header-meta">CLI Browser Handoff</span>
+          </div>
+          <nav className="header-nav">
+            <a href="/">Home <span className="arrow">↗</span></a>
+          </nav>
+        </header>
+
+        {/* ── Main Content ───────────────── */}
+        <main style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: "40px 60px" }}>
+          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 48, width: "100%", maxWidth: 1100, alignItems: "center" }}>
+            {/* Left Column */}
+            <div>
+              <p className="text-label" style={{ fontFamily: "var(--font-mono)" }}>
+                ← cli handoff
+              </p>
+              <h1 className="text-section-title" style={{ marginTop: 12 }}>
+                Finish sign-in<br />
+                <span style={{ fontWeight: 400, color: "var(--ink-muted)" }}>for your terminal.</span>
+              </h1>
+              <p className="m-text-body" style={{ marginTop: 20 }}>
+                This browser step confirms your identity for the waiting CLI session. Once complete, return to your terminal.
+              </p>
+
+              {/* Session info cards */}
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 32 }}>
+                <div style={{ padding: "20px 16px", background: "var(--bg-beige-light)", borderRadius: "var(--radius-lg)", border: "1px solid rgba(0,0,0,0.04)" }}>
+                  <span className="text-label">Session ID</span>
+                  <p style={{ marginTop: 8, fontFamily: "var(--font-mono)", fontSize: "0.72rem", color: "var(--ink-soft)", wordBreak: "break-all" }}>
+                    {sessionId}
+                  </p>
+                </div>
+                <div style={{ padding: "20px 16px", background: "var(--bg-beige-light)", borderRadius: "var(--radius-lg)", border: "1px solid rgba(0,0,0,0.04)" }}>
+                  <span className="text-label">Learning Track</span>
+                  <p style={{ marginTop: 8, fontSize: "1.05rem", fontWeight: 700, color: "var(--m-ink)" }}>
+                    {track?.label ?? session?.trackId ?? "Loading…"}
+                  </p>
+                  {track && (
+                    <p style={{ marginTop: 6, fontSize: "0.78rem", color: "var(--ink-muted)", lineHeight: 1.5 }}>
+                      {track.description}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Right Column — Auth Card */}
+            <div style={{
+              background: "var(--m-white)",
+              borderRadius: "var(--radius-lg)",
+              padding: 32,
+              border: "1px solid rgba(0,0,0,0.06)",
+              boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
+              position: "relative",
+              overflow: "hidden"
+            }}>
+              {/* Top stripe for visual interest */}
+              <div style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                height: 4,
+                background: session?.status === "authenticated"
+                  ? "var(--accent-green)"
+                  : session?.status === "expired"
+                    ? "var(--accent-red)"
+                    : "var(--accent-teal)"
+              }} />
+
+              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+                <div>
+                  <span className="text-label" style={{ fontFamily: "var(--font-mono)", color: "var(--accent-teal)" }}>
+                    sign-in status
+                  </span>
+                  <h2 style={{ marginTop: 8, fontSize: "1.6rem", fontWeight: 800, letterSpacing: "-0.02em", color: "var(--m-ink)", fontFamily: "var(--font-sans)" }}>
+                    {loading ? "Loading session…" : getStatusCopy(session?.status ?? "pending")}
+                  </h2>
+                </div>
+              </div>
+
+              {loading && (
+                <p style={{ marginTop: 20, fontSize: "0.88rem", color: "var(--ink-muted)", lineHeight: 1.6 }}>
+                  Fetching the auth session so this browser can confirm the waiting CLI.
+                </p>
+              )}
+
+              {!loading && errorMessage && (
+                <div style={{
+                  marginTop: 20,
+                  padding: "12px 16px",
+                  background: "rgba(224, 90, 58, 0.08)",
+                  border: "1px solid rgba(224, 90, 58, 0.2)",
+                  borderRadius: "var(--radius-md)",
+                  fontSize: "0.85rem",
+                  color: "var(--accent-red)"
+                }}>
+                  {errorMessage}
+                </div>
+              )}
+
+              {!loading && session && (
+                <div style={{ marginTop: 24 }}>
+                  {/* Timestamps */}
+                  <div style={{
+                    display: "grid",
+                    gridTemplateColumns: "1fr 1fr",
+                    gap: 12,
+                    padding: "16px",
+                    background: "var(--bg-beige-light)",
+                    borderRadius: "var(--radius-md)",
+                    marginBottom: 24
+                  }}>
+                    <div>
+                      <span style={{ fontSize: "0.65rem", color: "var(--ink-muted)", textTransform: "uppercase", letterSpacing: "0.05em" }}>Created</span>
+                      <p style={{ marginTop: 4, fontFamily: "var(--font-mono)", fontSize: "0.78rem", fontWeight: 600, color: "var(--m-ink)" }}>
+                        {formatSessionTime(session.createdAt)}
+                      </p>
+                    </div>
+                    <div>
+                      <span style={{ fontSize: "0.65rem", color: "var(--ink-muted)", textTransform: "uppercase", letterSpacing: "0.05em" }}>Expires</span>
+                      <p style={{ marginTop: 4, fontFamily: "var(--font-mono)", fontSize: "0.78rem", fontWeight: 600, color: "var(--m-ink)" }}>
+                        {formatSessionTime(session.expiresAt)}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Pending → Form */}
+                  {session.status === "pending" && (
+                    <form style={{ display: "flex", flexDirection: "column", gap: 16 }} onSubmit={(event) => void handleSubmit(event)}>
+                      <div>
+                        <label htmlFor="learnerName" style={{ display: "block", fontSize: "0.75rem", fontWeight: 600, color: "var(--ink-soft)", marginBottom: 6 }}>
+                          Name
+                        </label>
+                        <input
+                          id="learnerName"
+                          style={{
+                            width: "100%",
+                            padding: "12px 16px",
+                            border: "1px solid rgba(0,0,0,0.1)",
+                            borderRadius: "var(--radius-md)",
+                            background: "var(--m-white)",
+                            fontFamily: "var(--font-sans)",
+                            fontSize: "0.9rem",
+                            color: "var(--m-ink)",
+                            outline: "none",
+                            transition: "border-color 0.3s ease"
+                          }}
+                          value={learnerName}
+                          onChange={(event) => setLearnerName(event.target.value)}
+                          placeholder="Ada Lovelace"
+                          autoComplete="name"
+                        />
+                      </div>
+                      <div>
+                        <label htmlFor="learnerEmail" style={{ display: "block", fontSize: "0.75rem", fontWeight: 600, color: "var(--ink-soft)", marginBottom: 6 }}>
+                          Email
+                        </label>
+                        <input
+                          id="learnerEmail"
+                          style={{
+                            width: "100%",
+                            padding: "12px 16px",
+                            border: "1px solid rgba(0,0,0,0.1)",
+                            borderRadius: "var(--radius-md)",
+                            background: "var(--m-white)",
+                            fontFamily: "var(--font-sans)",
+                            fontSize: "0.9rem",
+                            color: "var(--m-ink)",
+                            outline: "none",
+                            transition: "border-color 0.3s ease"
+                          }}
+                          value={learnerEmail}
+                          onChange={(event) => setLearnerEmail(event.target.value)}
+                          placeholder="ada@example.com"
+                          autoComplete="email"
+                          type="email"
+                        />
+                      </div>
+                      <button
+                        type="submit"
+                        disabled={submitting}
+                        style={{
+                          width: "100%",
+                          padding: "14px 20px",
+                          background: "var(--m-ink)",
+                          color: "var(--m-white)",
+                          border: "none",
+                          borderRadius: "var(--radius-md)",
+                          fontFamily: "var(--font-sans)",
+                          fontSize: "0.9rem",
+                          fontWeight: 700,
+                          cursor: submitting ? "not-allowed" : "pointer",
+                          opacity: submitting ? 0.6 : 1,
+                          transition: "all 0.3s ease"
+                        }}
+                      >
+                        {submitting ? "Confirming…" : "Continue in CLI →"}
+                      </button>
+                      <p style={{ fontSize: "0.72rem", color: "var(--ink-muted)", lineHeight: 1.6 }}>
+                        This development flow uses an API-issued temporary auth session. A real identity provider can replace this step.
+                      </p>
+                    </form>
+                  )}
+
+                  {/* Authenticated → Success */}
+                  {session.status === "authenticated" && (
+                    <div style={{
+                      padding: 20,
+                      background: "rgba(45, 138, 86, 0.08)",
+                      border: "1px solid rgba(45, 138, 86, 0.2)",
+                      borderRadius: "var(--radius-md)"
+                    }}>
+                      <span style={{ display: "block", fontSize: "0.65rem", fontWeight: 600, color: "var(--accent-green)", textTransform: "uppercase", letterSpacing: "0.1em" }}>
+                        CLI sign-in complete
+                      </span>
+                      <p style={{ marginTop: 8, fontSize: "1rem", fontWeight: 700, color: "var(--m-ink)" }}>
+                        {session.learner?.name} is authenticated for the {track?.label ?? "selected"} track.
+                      </p>
+                      <p style={{ marginTop: 8, fontSize: "0.82rem", color: "var(--ink-soft)", lineHeight: 1.6 }}>
+                        You can return to the terminal. The waiting CLI session will continue automatically.
+                      </p>
+                    </div>
+                  )}
+
+                  {/* Expired */}
+                  {session.status === "expired" && (
+                    <div style={{
+                      padding: 20,
+                      background: "rgba(224, 90, 58, 0.06)",
+                      border: "1px solid rgba(224, 90, 58, 0.15)",
+                      borderRadius: "var(--radius-md)"
+                    }}>
+                      <span style={{ display: "block", fontSize: "0.65rem", fontWeight: 600, color: "var(--accent-red)", textTransform: "uppercase", letterSpacing: "0.1em" }}>
+                        Session expired
+                      </span>
+                      <p style={{ marginTop: 8, fontSize: "0.85rem", color: "var(--ink-soft)", lineHeight: 1.6 }}>
+                        This browser confirmation took too long. Start a new terminal session with <code style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>visionos start</code> to generate a fresh auth link.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </main>
+
+        {/* ── Footer ─────────────────────── */}
+        <footer className="m-site-footer">
+          <div className="header-left">
+            <span className="header-brand">VisionOS</span>
+            <span className="header-meta">CLI Auth · Secure Session</span>
+          </div>
+          <nav className="header-nav">
+            <a href="/">← Back to home</a>
+          </nav>
+        </footer>
+      </div>
+
+      <div className="bezel-notch">
+        <div className="bezel-notch-inner" />
+      </div>
+    </div>
+  );
+}