visionos-monorepo 0.1.0

package/cli/src/runtime/index.ts

@@ -0,0 +1,108 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createApp } from "../../../server/src/app.js";
+import { readUserProfile, writeAccountState, writeUserProfile, readLocalProgress, writeLocalProgress } from "../lib/localState.js";
+import { type LearningProgress, type UpsertLearningProgressRequest } from "../../../shared/src/index.js";
+
+const host = process.env.HOST ?? "127.0.0.1";
+const port = Number(process.env.PORT ?? 4173);
+const appUrl = process.env.CLIENT_ORIGIN ?? `http://${host}:${port}`;
+import fs from "node:fs";
+
+const currentDir = path.dirname(fileURLToPath(import.meta.url));
+
+function resolveStaticSiteDir(dir: string): string {
+  const envPath = process.env.VISIONOS_WEB_DIST;
+  if (envPath && fs.existsSync(envPath) && fs.existsSync(path.join(envPath, "index.html"))) {
+    return envPath;
+  }
+
+  const candidates = [
+    path.resolve(dir, "../web"),
+    path.resolve(dir, "../../dist/web"),
+    path.resolve(dir, "../../../client/dist"),
+    path.resolve(dir, "../../../dist/web")
+  ];
+
+  for (const candidate of candidates) {
+    if (fs.existsSync(candidate) && fs.existsSync(path.join(candidate, "index.html"))) {
+      return candidate;
+    }
+  }
+
+  return path.resolve(dir, "../web");
+}
+
+const staticSiteDir = resolveStaticSiteDir(currentDir);
+
+const app = createApp({
+  apiBaseUrl: appUrl,
+  clientOrigin: appUrl,
+  corsOrigin: true,
+  getCurrentUser: readUserProfile,
+  mode: "embedded",
+  getProgress: async (userId) => {
+    return readLocalProgress();
+  },
+  upsertProgress: async (userId, input: UpsertLearningProgressRequest) => {
+    const progressList = await readLocalProgress();
+    const existingIndex = progressList.findIndex((p) => p.trackId === input.trackId);
+    const now = new Date().toISOString();
+
+    let completedLessonIds = input.completedLessonIds ?? [];
+    let completedStepIds = input.completedStepIds ?? [];
+    let currentLessonId = input.currentLessonId;
+
+    if (existingIndex >= 0) {
+      const existing = progressList[existingIndex];
+      completedLessonIds = Array.from(new Set([...existing.completedLessonIds, ...completedLessonIds]));
+      completedStepIds = Array.from(new Set([...existing.completedStepIds, ...completedStepIds]));
+      currentLessonId = currentLessonId ?? existing.currentLessonId;
+    }
+
+    const updated: LearningProgress = {
+      userId,
+      trackId: input.trackId,
+      completedLessonIds,
+      completedStepIds,
+      currentLessonId,
+      updatedAt: now
+    };
+
+    if (existingIndex >= 0) {
+      progressList[existingIndex] = updated;
+    } else {
+      progressList.push(updated);
+    }
+
+    await writeLocalProgress(progressList);
+    return updated;
+  },
+  onAuthenticated: async (session) => {
+    if (!session.learner || !session.authenticatedAt) {
+      return;
+    }
+
+    await writeUserProfile({
+      authenticatedAt: session.authenticatedAt,
+      email: session.learner.email,
+      name: session.learner.name,
+      sessionId: session.sessionId,
+      trackId: session.trackId,
+      userId: session.learner.userId
+    });
+
+    if (session.accountToken) {
+      await writeAccountState({
+        authenticatedAt: session.authenticatedAt,
+        token: session.accountToken,
+        userId: session.learner.userId
+      });
+    }
+  },
+  staticSiteDir
+});
+
+app.listen(port, host, () => {
+  console.log(`VisionOS embedded runtime listening on ${appUrl}`);
+});

package/cli/src/types/inquirer.d.ts

@@ -0,0 +1,9 @@
+declare module "inquirer" {
+  interface InquirerModule {
+    prompt<T>(questions: unknown[]): Promise<T>;
+  }
+
+  const inquirer: InquirerModule;
+
+  export default inquirer;
+}

package/cli/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": [
+      "ES2022"
+    ],
+    "types": [
+      "node"
+    ],
+    "noEmit": true
+  },
+  "include": [
+    "src/**/*",
+    "../server/src/**/*.ts",
+    "../shared/src/**/*.ts"
+  ]
+}

package/client/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="VisionOS — A CLI-first terminal learning platform. Practice real commands with guided lessons." />
+    <title>VisionOS — Terminal Learning Platform</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  </head>
+  <body style="background:#E0DFD5; margin:0;">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/client/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@visionos/client",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc --noEmit && vite build",
+    "dev": "vite",
+    "lint": "tsc --noEmit",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
+  }
+}
+

package/client/postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
+

package/client/src/App.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from "react";
+import { type VisionOsRuntimeInfo, type VisionOsUserProfile } from "../../shared/src/index.js";
+import { AccountPage } from "./components/AccountPage.js";
+import { CliAuthPage } from "./components/CliAuthPage.js";
+import { ManifestoPage } from "./components/ManifestoPage.js";
+import { CreatorPortal } from "./components/CreatorPortal.js";
+import { getCurrentUser, getRuntimeInfo, storeAuthToken, getStoredAuthToken, VisionOsApiError } from "./lib/api.js";
+
+export default function App() {
+  const cliAuthSessionId = new URLSearchParams(window.location.search).get("cliAuthSession");
+  const accountMode = window.location.pathname === "/register" ? "register" : window.location.pathname === "/login" ? "login" : null;
+  
+  // Intercept token from URL search parameters on initial load
+  const urlParams = new URLSearchParams(window.location.search);
+  const urlToken = urlParams.get("token");
+  if (urlToken) {
+    storeAuthToken(urlToken);
+    urlParams.delete("token");
+    const newSearch = urlParams.toString();
+    const newUrl = window.location.pathname + (newSearch ? `?${newSearch}` : "") + window.location.hash;
+    window.history.replaceState({}, "", newUrl);
+  }
+
+  const [user, setUser] = useState<VisionOsUserProfile | null>(null);
+  const [_runtime, setRuntime] = useState<VisionOsRuntimeInfo | null>(null);
+  const [_errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadHomeState() {
+      try {
+        const [userResponse, runtimeResponse] = await Promise.all([
+          getCurrentUser().catch(() => ({ user: null })),
+          getRuntimeInfo()
+        ]);
+
+        if (cancelled) {
+          return;
+        }
+
+        const runtime = runtimeResponse.runtime;
+        const currentOrigin = window.location.origin.replace(/\/$/, "");
+        const mainAppUrl = runtime.mainAppUrl?.replace(/\/$/, "");
+
+        // If running in dynamic embedded mode and not on the primary web origin, redirect immediately
+        if (runtime.mode === "embedded" && mainAppUrl && mainAppUrl !== currentOrigin) {
+          const targetUrl = new URL(mainAppUrl);
+          targetUrl.pathname = window.location.pathname;
+          
+          const params = new URLSearchParams(window.location.search);
+          const storedToken = getStoredAuthToken();
+          if (storedToken) {
+            params.set("token", storedToken);
+          }
+          params.set("embeddedApi", runtime.apiBaseUrl);
+          targetUrl.search = params.toString();
+          
+          window.location.href = targetUrl.toString();
+          return;
+        }
+
+        setUser(userResponse.user);
+        setRuntime(runtime);
+      } 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 VisionOS runtime details.");
+        }
+      }
+    }
+
+    void loadHomeState();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // CLI Auth flow → dedicated auth page
+  if (cliAuthSessionId) {
+    return <CliAuthPage sessionId={cliAuthSessionId} />;
+  }
+
+  if (accountMode) {
+    return <AccountPage initialMode={accountMode} onAuthenticated={setUser} />;
+  }
+
+  if (window.location.pathname === "/creator") {
+    return <CreatorPortal user={user} />;
+  }
+
+  // Main manifesto landing page
+  return <ManifestoPage user={user} />;
+}

package/client/src/components/AccountPage.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { type AccountAuthMode, type VisionOsUserProfile } from "../../../shared/src/index.js";
+import { AuthPanel } from "./AuthPanel.js";
+
+interface AccountPageProps {
+  initialMode: AccountAuthMode;
+  onAuthenticated: (user: VisionOsUserProfile) => void;
+}
+
+export function AccountPage({ initialMode, onAuthenticated }: AccountPageProps) {
+  const [mode] = useState(initialMode);
+
+  return (
+    <div className="monitor-bezel">
+      <div className="monitor-screen" style={{ display: "flex", flexDirection: "column", minHeight: "calc(100vh - 48px)" }}>
+        <header className="m-site-header">
+          <div className="header-left">
+            <span className="header-brand">VisionOS</span>
+            <span className="header-meta">Account Access</span>
+          </div>
+          <nav className="header-nav">
+            <a href="/">Home <span className="arrow">↗</span></a>
+            <a href="/creator" className="creator-nav-link">Create Lessons <span className="arrow">↗</span></a>
+          </nav>
+        </header>
+
+        <main style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: "40px 60px" }}>
+          <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 48, width: "100%", maxWidth: 1050, alignItems: "center" }}>
+            <div>
+              <p className="text-label" style={{ fontFamily: "var(--font-mono)" }}>
+                account sync
+              </p>
+              <h1 className="text-section-title" style={{ marginTop: 12 }}>
+                Save progress<br />
+                <span style={{ fontWeight: 400, color: "var(--ink-muted)" }}>across sessions.</span>
+              </h1>
+              <p className="m-text-body" style={{ marginTop: 20 }}>
+                Create an account or log in to keep your VisionOS profile and learning progress in MongoDB.
+              </p>
+            </div>
+
+            <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"
+            }}>
+              <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 4, background: "var(--accent-teal)" }} />
+              <span className="text-label" style={{ fontFamily: "var(--font-mono)", color: "var(--accent-teal)" }}>
+                {mode === "register" ? "new account" : "existing account"}
+              </span>
+              <h2 style={{ marginTop: 8, marginBottom: 24, fontSize: "1.6rem", fontWeight: 800, color: "var(--m-ink)", fontFamily: "var(--font-sans)" }}>
+                {mode === "register" ? "Register" : "Login"}
+              </h2>
+              <AuthPanel
+                mode={mode}
+                onAuthenticated={(auth) => {
+                  onAuthenticated({
+                    ...auth.user,
+                    authenticatedAt: new Date().toISOString(),
+                    sessionId: "web",
+                    trackId: "git"
+                  });
+                  window.location.href = "/";
+                }}
+              />
+            </div>
+          </div>
+        </main>
+      </div>
+      <div className="bezel-notch">
+        <div className="bezel-notch-inner" />
+      </div>
+    </div>
+  );
+}

package/client/src/components/AuthPanel.tsx

@@ -0,0 +1,312 @@
+import { useEffect, useRef, useState, type FormEvent } from "react";
+import { type AccountAuthMode, type AccountAuthResponse } from "../../../shared/src/index.js";
+import {
+  VisionOsApiError,
+  completeCliAuthSession,
+  completeCliAuthSessionWithGoogle,
+  loginAccount,
+  loginWithGoogle,
+  registerAccount,
+  storeAuthToken
+} from "../lib/api.js";
+
+declare global {
+  interface Window {
+    google?: {
+      accounts: {
+        id: {
+          initialize(options: {
+            client_id: string;
+            callback: (response: { credential?: string }) => void;
+          }): void;
+          renderButton(
+            element: HTMLElement,
+            options: {
+              shape?: string;
+              size?: string;
+              text?: string;
+              theme?: string;
+              width?: number;
+              logo_alignment?: string;
+            }
+          ): void;
+        };
+      };
+    };
+  }
+}
+
+interface AuthPanelProps {
+  mode?: AccountAuthMode;
+  sessionId?: string;
+  onAuthenticated?: (auth: AccountAuthResponse) => void;
+  onCliSessionAuthenticated?: (payload: Awaited<ReturnType<typeof completeCliAuthSession>>) => void;
+}
+
+function getErrorMessage(error: unknown) {
+  if (error instanceof VisionOsApiError || error instanceof Error) {
+    return error.message;
+  }
+
+  return "Unable to authenticate right now.";
+}
+
+const googleIdentityScriptId = "visionos-google-identity";
+const googleIdentityScriptSrc = "https://accounts.google.com/gsi/client";
+
+export function AuthPanel({
+  mode = "login",
+  sessionId,
+  onAuthenticated,
+  onCliSessionAuthenticated
+}: AuthPanelProps) {
+  const [authMode, setAuthMode] = useState<AccountAuthMode>(mode);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [googleMessage, setGoogleMessage] = useState<string | null>("Loading Google sign-in...");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const googleButtonRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    loadGoogleSignIn();
+
+    return () => {
+      const script = document.getElementById(googleIdentityScriptId) as HTMLScriptElement | null;
+
+      if (script) {
+        script.onload = null;
+        script.onerror = null;
+      }
+    };
+  }, [sessionId]);
+
+  function renderGoogleButton() {
+    const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID as string | undefined;
+
+    if (!clientId?.trim()) {
+      setGoogleMessage("Google sign-in needs VITE_GOOGLE_CLIENT_ID.");
+      setErrorMessage("Google sign-in is not configured. Add VITE_GOOGLE_CLIENT_ID to the client environment.");
+      return false;
+    }
+
+    if (!window.google || !googleButtonRef.current) {
+      setGoogleMessage("Google sign-in is still loading.");
+      return false;
+    }
+
+    window.google.accounts.id.initialize({
+      client_id: clientId,
+      callback: (response) => {
+        if (response.credential) {
+          void handleGoogleCredential(response.credential);
+        }
+      }
+    });
+    googleButtonRef.current.innerHTML = "";
+    window.google.accounts.id.renderButton(googleButtonRef.current, {
+      shape: "rectangular",
+      size: "large",
+      text: "signin_with",
+      theme: "outline",
+      width: 320,
+      logo_alignment: "left"
+    });
+    setGoogleMessage(null);
+    return true;
+  }
+
+  function loadGoogleSignIn() {
+    setErrorMessage(null);
+    const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID as string | undefined;
+
+    if (!clientId?.trim()) {
+      setGoogleMessage("Google sign-in needs VITE_GOOGLE_CLIENT_ID.");
+      setErrorMessage("Google sign-in is not configured. Add VITE_GOOGLE_CLIENT_ID to the client environment.");
+      return;
+    }
+
+    if (window.google) {
+      renderGoogleButton();
+      return;
+    }
+
+    setGoogleMessage("Loading Google sign-in...");
+
+    const existingScript = document.getElementById(googleIdentityScriptId) as HTMLScriptElement | null;
+    const script = existingScript ?? document.createElement("script");
+
+    if (!existingScript) {
+      script.id = googleIdentityScriptId;
+      script.src = googleIdentityScriptSrc;
+      script.async = true;
+      script.defer = true;
+      document.head.appendChild(script);
+    }
+
+    script.onload = () => {
+      renderGoogleButton();
+    };
+    script.onerror = () => {
+      setGoogleMessage("Google sign-in could not load. Try again.");
+      setErrorMessage("Google sign-in could not load. Check your network, ad blocker, or Google OAuth configuration.");
+    };
+  }
+
+  async function finishAuth(auth: AccountAuthResponse) {
+    storeAuthToken(auth.token);
+    onAuthenticated?.(auth);
+  }
+
+  async function handleGoogleCredential(credential: string) {
+    setSubmitting(true);
+    setErrorMessage(null);
+
+    try {
+      if (sessionId) {
+        const payload = await completeCliAuthSessionWithGoogle(sessionId, { credential });
+
+        if (payload.auth) {
+          await finishAuth(payload.auth);
+        }
+
+        onCliSessionAuthenticated?.(payload);
+        return;
+      }
+
+      await finishAuth(await loginWithGoogle({ credential }));
+    } catch (error) {
+      setErrorMessage(getErrorMessage(error));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setSubmitting(true);
+    setErrorMessage(null);
+
+    try {
+      if (sessionId) {
+        const payload = await completeCliAuthSession(sessionId, {
+          mode: authMode,
+          learnerEmail: email,
+          learnerName: name,
+          password
+        });
+
+        if (payload.auth) {
+          await finishAuth(payload.auth);
+        }
+
+        onCliSessionAuthenticated?.(payload);
+        return;
+      }
+
+      const auth = authMode === "register"
+        ? await registerAccount({ email, name, password })
+        : await loginAccount({ email, password });
+
+      await finishAuth(auth);
+    } catch (error) {
+      setErrorMessage(getErrorMessage(error));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const googleMark = (
+    <svg className="auth-google-mark" aria-hidden="true" viewBox="0 0 18 18">
+      <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62Z" />
+      <path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.33-1.58-5.04-3.72H.94v2.34A9 9 0 0 0 9 18Z" />
+      <path fill="#FBBC05" d="M3.96 10.7A5.41 5.41 0 0 1 3.68 9c0-.59.1-1.16.28-1.7V4.96H.94A9 9 0 0 0 0 9c0 1.45.34 2.82.94 4.04l3.02-2.34Z" />
+      <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58A8.64 8.64 0 0 0 9 0 9 9 0 0 0 .94 4.96L3.96 7.3C4.67 5.16 6.66 3.58 9 3.58Z" />
+    </svg>
+  );
+
+  return (
+    <div className="auth-panel">
+      <div className="auth-mode-toggle" role="tablist" aria-label="Authentication mode">
+        <button
+          className={authMode === "login" ? "active" : ""}
+          type="button"
+          onClick={() => setAuthMode("login")}
+        >
+          Login
+        </button>
+        <button
+          className={authMode === "register" ? "active" : ""}
+          type="button"
+          onClick={() => setAuthMode("register")}
+        >
+          Register
+        </button>
+      </div>
+
+      <div className="auth-google-slot" aria-busy={submitting}>
+        <div
+          className="auth-google-render-host"
+          hidden={Boolean(googleMessage)}
+          ref={googleButtonRef}
+        />
+        {googleMessage && (
+          <button
+            className="auth-google-fallback"
+            disabled={submitting}
+            onClick={loadGoogleSignIn}
+            type="button"
+          >
+            {googleMark}
+            <span>Sign in with Google</span>
+          </button>
+        )}
+      </div>
+
+      <div className="auth-divider">
+        <span />
+        <strong>or</strong>
+        <span />
+      </div>
+
+      <form className="auth-form" onSubmit={(event) => void handleSubmit(event)}>
+        {authMode === "register" && (
+          <label>
+            <span>Name</span>
+            <input
+              autoComplete="name"
+              onChange={(event) => setName(event.target.value)}
+              placeholder="Ada Lovelace"
+              value={name}
+            />
+          </label>
+        )}
+        <label>
+          <span>Email</span>
+          <input
+            autoComplete="email"
+            onChange={(event) => setEmail(event.target.value)}
+            placeholder="ada@example.com"
+            type="email"
+            value={email}
+          />
+        </label>
+        <label>
+          <span>Password</span>
+          <input
+            autoComplete={authMode === "register" ? "new-password" : "current-password"}
+            onChange={(event) => setPassword(event.target.value)}
+            placeholder="Minimum 8 characters"
+            type="password"
+            value={password}
+          />
+        </label>
+        {errorMessage && <div className="auth-error">{errorMessage}</div>}
+        <button className="auth-submit" disabled={submitting} type="submit">
+          {submitting ? "Working..." : authMode === "register" ? "Create account" : "Login"}
+        </button>
+      </form>
+    </div>
+  );
+}