visionos-monorepo 0.1.0

package/client/src/components/CliAuthPage.tsx

@@ -0,0 +1,367 @@
+import { useEffect, useState } from "react";
+import {
+  LEARNING_TRACKS,
+  type CliAuthSession,
+  type CliAuthSessionStatus,
+  type VisionOsUserProfile
+} from "../../../shared/src/index.js";
+import {
+  VisionOsApiError,
+  getCliAuthSession,
+  getCurrentUser,
+  confirmCliAuthSession,
+  getRuntimeInfo
+} from "../lib/api.js";
+import { AuthPanel } from "./AuthPanel.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 [currentUser, setCurrentUser] = useState<VisionOsUserProfile | null>(null);
+  const [mainAppUrl, setMainAppUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadData() {
+      setLoading(true);
+      setErrorMessage(null);
+
+      try {
+        const [sessionPayload, userPayload, runtimePayload] = await Promise.all([
+          getCliAuthSession(sessionId),
+          getCurrentUser().catch(() => ({ user: null })),
+          getRuntimeInfo().catch(() => null)
+        ]);
+
+        if (cancelled) return;
+
+        setSession(sessionPayload.session);
+        setCurrentUser(userPayload.user);
+        if (runtimePayload?.runtime?.mainAppUrl) {
+          setMainAppUrl(runtimePayload.runtime.mainAppUrl);
+        }
+      } 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 CLI authentication details.");
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    void loadData();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [sessionId]);
+
+  useEffect(() => {
+    if (session?.status === "authenticated") {
+      const timer = setTimeout(() => {
+        const targetUrl = mainAppUrl
+          ? `${mainAppUrl.replace(/\/$/, "")}/?token=${session.accountToken}`
+          : `/?token=${session.accountToken}`;
+        window.location.href = targetUrl;
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [session?.status, session?.accountToken, mainAppUrl]);
+
+  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 or Direct Confirmation */}
+                  {session.status === "pending" && currentUser ? (
+                    <div style={{
+                      padding: 24,
+                      background: "rgba(14, 116, 144, 0.04)",
+                      border: "1px dashed var(--accent-teal)",
+                      borderRadius: "var(--radius-lg)",
+                      marginBottom: 20,
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 16
+                    }}>
+                      <div>
+                        <span className="text-label" style={{ color: "var(--accent-teal)", fontSize: "0.62rem" }}>
+                          ● browser session detected
+                        </span>
+                        <h3 style={{ marginTop: 8, fontSize: "1.1rem", fontWeight: 800, color: "var(--m-ink)", fontFamily: "var(--font-sans)" }}>
+                          Quick Link Terminal
+                        </h3>
+                        <p style={{ marginTop: 6, fontSize: "0.82rem", color: "var(--ink-muted)", lineHeight: 1.5 }}>
+                          You are currently signed in as <strong style={{ color: "var(--m-ink)" }}>{currentUser.name}</strong> ({currentUser.email}). Would you like to confirm terminal login as this user?
+                        </p>
+                      </div>
+
+                      <button
+                        onClick={async () => {
+                          setLoading(true);
+                          setErrorMessage(null);
+                          try {
+                            const res = await confirmCliAuthSession(sessionId);
+                            setSession(res.session);
+                          } catch (err) {
+                            setErrorMessage(err instanceof Error ? err.message : "Unable to link CLI session.");
+                          } finally {
+                            setLoading(false);
+                          }
+                        }}
+                        className="auth-submit"
+                        style={{ background: "#000000", border: "1px solid var(--bezel-outer)", color: "var(--bg-beige)", width: "100%", fontWeight: 700, cursor: "pointer", transition: "all 0.2s ease", boxShadow: "0 0 12px rgba(168, 168, 160, 0.4)", borderRadius: "var(--radius-md)" }}
+                      >
+                        Confirm & Link Terminal
+                      </button>
+
+                      <div style={{ display: "flex", alignItems: "center", gap: 8, justifyContent: "center" }}>
+                        <span style={{ height: 1, flex: 1, background: "rgba(0,0,0,0.06)" }} />
+                        <span style={{ fontSize: "0.65rem", color: "var(--ink-faint)", textTransform: "uppercase" }}>or</span>
+                        <span style={{ height: 1, flex: 1, background: "rgba(0,0,0,0.06)" }} />
+                      </div>
+
+                      <button
+                        onClick={() => {
+                          setCurrentUser(null);
+                        }}
+                        className="auth-google-fallback"
+                        style={{ minHeight: 38, fontSize: "0.8rem", border: "1px solid rgba(255,255,255,0.25)", background: "#000000", color: "var(--m-ink)", width: "100%", cursor: "pointer", boxShadow: "0 0 8px rgba(255, 255, 255, 0.05)", borderRadius: "var(--radius-md)" }}
+                      >
+                        Use a different account
+                      </button>
+                    </div>
+                  ) : session.status === "pending" && (
+                    <div>
+                      <AuthPanel
+                        mode="login"
+                        sessionId={sessionId}
+                        onCliSessionAuthenticated={(payload) => setSession(payload.session)}
+                      />
+                      <p style={{ fontSize: "0.72rem", color: "var(--ink-muted)", lineHeight: 1.6 }}>
+                        Your account is saved in MongoDB. After this browser step completes, return to your terminal.
+                      </p>
+                    </div>
+                  )}
+
+                  {/* 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>
+                      <p style={{ marginTop: 12, fontSize: "0.78rem", color: "var(--accent-teal)", fontWeight: 600, fontFamily: "var(--font-mono)" }}>
+                        Redirecting to your progress dashboard...
+                      </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>
+  );
+}