visionos-monorepo 0.1.0

package/client/src/components/TrackCard.tsx

@@ -0,0 +1,19 @@
+interface TrackCardProps {
+  title: string;
+  description: string;
+  accentClass: string;
+}
+
+export function TrackCard({ title, description, accentClass }: TrackCardProps) {
+  return (
+    <article
+      className={`rounded-[1.75rem] border p-6 shadow-panel transition-transform duration-300 hover:-translate-y-1 ${accentClass}`}
+    >
+      <div className="space-y-3">
+        <h3 className="text-2xl font-bold text-ink">{title}</h3>
+        <p className="text-sm leading-7 text-slate-600">{description}</p>
+      </div>
+    </article>
+  );
+}
+

package/client/src/lib/api.ts

@@ -0,0 +1,215 @@
+import {
+  type AccountAuthRequest,
+  type AccountAuthResponse,
+  type CliAuthSessionEnvelope,
+  type CompleteCliAuthSessionRequest,
+  type GoogleAuthRequest,
+  type LearningProgressResponse,
+  type UpsertLearningProgressRequest,
+  type VisionOsRuntimeInfoResponse,
+  type VisionOsUserInfoResponse
+} from "../../../shared/src/index.js";
+
+const urlParams = new URLSearchParams(window.location.search);
+let urlEmbeddedApi = urlParams.get("embeddedApi");
+
+if (urlEmbeddedApi) {
+  try {
+    window.sessionStorage.setItem("visionos.embeddedApi", urlEmbeddedApi);
+  } catch (e) {
+    // Ignore Storage errors in nested iframe or restricted contexts
+  }
+} else {
+  try {
+    urlEmbeddedApi = window.sessionStorage.getItem("visionos.embeddedApi");
+  } catch (e) {
+    // Ignore Storage errors
+  }
+}
+
+const defaultApiBaseUrl = import.meta.env.DEV ? "http://127.0.0.1:4000" : window.location.origin;
+const apiBaseUrl = (urlEmbeddedApi ?? import.meta.env.VITE_API_BASE_URL ?? defaultApiBaseUrl).replace(/\/$/, "");
+
+export class VisionOsApiError extends Error {
+  constructor(
+    message: string,
+    readonly status: number
+  ) {
+    super(message);
+    this.name = "VisionOsApiError";
+  }
+}
+
+const authTokenStorageKey = "visionos.authToken";
+
+export function getStoredAuthToken() {
+  return window.localStorage.getItem(authTokenStorageKey);
+}
+
+export function storeAuthToken(token: string) {
+  window.localStorage.setItem(authTokenStorageKey, token);
+}
+
+export function clearStoredAuthToken() {
+  window.localStorage.removeItem(authTokenStorageKey);
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  const token = getStoredAuthToken();
+  const headers = new Headers(init?.headers);
+
+  if (token && !headers.has("Authorization")) {
+    headers.set("Authorization", `Bearer ${token}`);
+  }
+
+  const response = await fetch(`${apiBaseUrl}${path}`, {
+    ...init,
+    headers
+  });
+  const payload = (await response.json().catch(() => null)) as { message?: string } | null;
+
+  if (!response.ok) {
+    throw new VisionOsApiError(
+      payload?.message ?? `VisionOS API request failed with status ${response.status}.`,
+      response.status
+    );
+  }
+
+  return payload as T;
+}
+
+export function registerAccount(body: AccountAuthRequest) {
+  return request<AccountAuthResponse>("/auth/register", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+}
+
+export function loginAccount(body: AccountAuthRequest) {
+  return request<AccountAuthResponse>("/auth/login", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+}
+
+export function loginWithGoogle(body: GoogleAuthRequest) {
+  return request<AccountAuthResponse>("/auth/google", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+}
+
+export function getCliAuthSession(sessionId: string) {
+  return request<CliAuthSessionEnvelope>(`/auth/cli/sessions/${sessionId}`);
+}
+
+export function completeCliAuthSession(
+  sessionId: string,
+  body: CompleteCliAuthSessionRequest
+) {
+  return request<CliAuthSessionEnvelope>(`/auth/cli/sessions/${sessionId}/complete`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+}
+
+export function completeCliAuthSessionWithGoogle(sessionId: string, body: GoogleAuthRequest) {
+  return request<CliAuthSessionEnvelope>(`/auth/cli/sessions/${sessionId}/google`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+}
+
+export function confirmCliAuthSession(sessionId: string) {
+  return request<CliAuthSessionEnvelope>(`/auth/cli/sessions/${sessionId}/confirm`, {
+    method: "POST"
+  });
+}
+
+export function getCurrentUser() {
+  return request<VisionOsUserInfoResponse>("/auth/me");
+}
+
+export function getRuntimeInfo() {
+  return request<VisionOsRuntimeInfoResponse>("/runtime/info");
+}
+
+export function getProgress() {
+  return request<LearningProgressResponse>("/progress");
+}
+
+export function upsertProgress(body: UpsertLearningProgressRequest) {
+  return request<{ progress: LearningProgressResponse["progress"][number] }>("/progress", {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+}
+
+// ── Content API Helpers ──────────────────────────────────────────────────
+
+export function getTracks() {
+  return request<{ tracks: any[] }>("/content/tracks");
+}
+
+export function getLessons(trackId: string) {
+  return request<{ lessons: any[] }>(`/content/tracks/${trackId}/lessons`);
+}
+
+export function createTrack(body: { id: string; label: string; description: string }) {
+  return request<{ track: any }>("/content/tracks", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+}
+
+export function updateTrack(trackId: string, body: { label: string; description: string }) {
+  return request<{ track: any }>(`/content/tracks/${trackId}`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+}
+
+export function createLesson(trackId: string, body: any) {
+  return request<{ lesson: any }>(`/content/tracks/${trackId}/lessons`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+}
+
+export function updateLesson(lessonId: string, body: any) {
+  return request<{ lesson: any }>(`/content/lessons/${lessonId}`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+}
+

package/client/src/main.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.js";
+import { ErrorBoundary } from "./components/ErrorBoundary.js";
+import "./styles/index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
+  </React.StrictMode>
+);
+

package/client/src/styles/index.css

@@ -0,0 +1,33 @@
+@import "./manifesto.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  color: #0A0A0A;
+  background: #E0DFD5;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}