visionos-monorepo 0.1.0

package/client/src/components/CreatorPortal.tsx

@@ -0,0 +1,885 @@
+import { useEffect, useState } from "react";
+import {
+  type LearningTrack,
+  type LearningLesson,
+  type LessonStep,
+  type VisionOsUserProfile,
+  type LessonDifficulty
+} from "../../../shared/src/index.js";
+import {
+  getTracks,
+  getLessons,
+  createTrack,
+  updateTrack,
+  createLesson,
+  updateLesson
+} from "../lib/api.js";
+
+interface CreatorPortalProps {
+  user: VisionOsUserProfile | null;
+}
+
+export function CreatorPortal({ user }: CreatorPortalProps) {
+  const [tracks, setTracks] = useState<LearningTrack[]>([]);
+  const [selectedTrack, setSelectedTrack] = useState<LearningTrack | null>(null);
+  const [lessons, setLessons] = useState<LearningLesson[]>([]);
+  const [selectedLesson, setSelectedLesson] = useState<LearningLesson | null>(null);
+
+  // Forms
+  const [isCreatingTrack, setIsCreatingTrack] = useState(false);
+  const [trackForm, setTrackForm] = useState({ id: "", label: "", description: "" });
+  const [trackError, setTrackError] = useState("");
+
+  const [isEditingTrack, setIsEditingTrack] = useState(false);
+  const [editTrackForm, setEditTrackForm] = useState({ label: "", description: "" });
+
+  const [isEditingLesson, setIsEditingLesson] = useState(false);
+  const [lessonForm, setLessonForm] = useState<{
+    id: string;
+    title: string;
+    difficulty: LessonDifficulty;
+    summary: string;
+    estimatedMinutes: number;
+    steps: LessonStep[];
+  }>({
+    id: "",
+    title: "",
+    difficulty: "beginner",
+    summary: "",
+    estimatedMinutes: 10,
+    steps: []
+  });
+  const [lessonError, setLessonError] = useState("");
+
+  // Load tracks initially
+  useEffect(() => {
+    loadTracks();
+  }, []);
+
+  async function loadTracks() {
+    try {
+      const res = await getTracks();
+      setTracks(res.tracks);
+    } catch (err) {
+      console.error("Failed to load tracks:", err);
+    }
+  }
+
+  // Load lessons when selected track changes
+  useEffect(() => {
+    if (selectedTrack) {
+      loadLessons(selectedTrack.id);
+      setIsCreatingTrack(false);
+      setIsEditingTrack(false);
+      setIsEditingLesson(false);
+      setSelectedLesson(null);
+    } else {
+      setLessons([]);
+    }
+  }, [selectedTrack]);
+
+  async function loadLessons(trackId: string) {
+    try {
+      const res = await getLessons(trackId);
+      setLessons(res.lessons);
+    } catch (err) {
+      console.error("Failed to load lessons:", err);
+    }
+  }
+
+  async function handleCreateTrack(e: React.FormEvent) {
+    e.preventDefault();
+    setTrackError("");
+    try {
+      const cleanId = trackForm.id.trim().toLowerCase().replace(/[^a-z0-9_-]/g, "");
+      if (!cleanId) {
+        setTrackError("Track ID cannot be empty and must be alphanumeric.");
+        return;
+      }
+      const res = await createTrack({
+        id: cleanId,
+        label: trackForm.label.trim(),
+        description: trackForm.description.trim()
+      });
+      await loadTracks();
+      setSelectedTrack(res.track);
+      setIsCreatingTrack(false);
+      setTrackForm({ id: "", label: "", description: "" });
+    } catch (err: any) {
+      setTrackError(err.message ?? "Failed to create track.");
+    }
+  }
+
+  async function handleUpdateTrack(e: React.FormEvent) {
+    e.preventDefault();
+    if (!selectedTrack) return;
+    try {
+      const res = await updateTrack(selectedTrack.id, {
+        label: editTrackForm.label.trim(),
+        description: editTrackForm.description.trim()
+      });
+      await loadTracks();
+      setSelectedTrack(res.track);
+      setIsEditingTrack(false);
+    } catch (err: any) {
+      alert(err.message ?? "Failed to update track.");
+    }
+  }
+
+  function startCreateLesson() {
+    setLessonError("");
+    setLessonForm({
+      id: "",
+      title: "",
+      difficulty: "beginner",
+      summary: "",
+      estimatedMinutes: 10,
+      steps: [
+        {
+          id: "",
+          title: "",
+          objective: "",
+          command: "",
+          explanation: "",
+          validationType: "syntax"
+        }
+      ]
+    });
+    setIsEditingLesson(true);
+    setSelectedLesson(null);
+  }
+
+  function startEditLesson(lesson: LearningLesson) {
+    setLessonError("");
+    setLessonForm({
+      id: lesson.id,
+      title: lesson.title,
+      difficulty: lesson.difficulty,
+      summary: lesson.summary,
+      estimatedMinutes: lesson.estimatedMinutes,
+      steps: lesson.steps.map(s => ({
+        id: s.id,
+        title: s.title,
+        objective: s.objective,
+        command: s.command,
+        explanation: s.explanation,
+        validationType: s.validationType || "syntax",
+        validationPath: s.validationPath || "",
+        validationContent: s.validationContent || ""
+      }))
+    });
+    setIsEditingLesson(true);
+    setSelectedLesson(lesson);
+  }
+
+  function handleAddStep() {
+    setLessonForm(prev => ({
+      ...prev,
+      steps: [
+        ...prev.steps,
+        {
+          id: "",
+          title: "",
+          objective: "",
+          command: "",
+          explanation: "",
+          validationType: "syntax"
+        }
+      ]
+    }));
+  }
+
+  function handleRemoveStep(index: number) {
+    setLessonForm(prev => {
+      const newSteps = [...prev.steps];
+      newSteps.splice(index, 1);
+      return { ...prev, steps: newSteps };
+    });
+  }
+
+  function handleStepChange(index: number, field: keyof LessonStep, value: any) {
+    setLessonForm(prev => {
+      const newSteps = [...prev.steps];
+      newSteps[index] = { ...newSteps[index], [field]: value };
+      return { ...prev, steps: newSteps };
+    });
+  }
+
+  async function handleSaveLesson(e: React.FormEvent) {
+    e.preventDefault();
+    if (!selectedTrack) return;
+    setLessonError("");
+
+    const cleanLessonId = lessonForm.id.trim().toLowerCase().replace(/[^a-z0-9_-]/g, "");
+    if (!cleanLessonId) {
+      setLessonError("Lesson ID is required and must be alphanumeric.");
+      return;
+    }
+
+    const payload = {
+      id: cleanLessonId,
+      trackId: selectedTrack.id,
+      title: lessonForm.title.trim(),
+      difficulty: lessonForm.difficulty,
+      summary: lessonForm.summary.trim(),
+      estimatedMinutes: Number(lessonForm.estimatedMinutes) || 10,
+      steps: lessonForm.steps.map(s => ({
+        id: s.id.trim().toLowerCase().replace(/[^a-z0-9_-]/g, ""),
+        title: s.title.trim(),
+        objective: s.objective.trim(),
+        command: s.command.trim(),
+        explanation: s.explanation.trim(),
+        validationType: s.validationType || "syntax",
+        validationPath: s.validationPath ? s.validationPath.trim() : undefined,
+        validationContent: s.validationContent ? s.validationContent.trim() : undefined
+      }))
+    };
+
+    try {
+      if (selectedLesson) {
+        // Edit
+        await updateLesson(selectedLesson.id, payload);
+      } else {
+        // Create
+        await createLesson(selectedTrack.id, payload);
+      }
+      await loadLessons(selectedTrack.id);
+      setIsEditingLesson(false);
+      setSelectedLesson(null);
+    } catch (err: any) {
+      setLessonError(err.message ?? "Failed to save lesson.");
+    }
+  }
+
+  if (!user) {
+    return (
+      <div className="monitor-bezel">
+        <div className="monitor-screen" style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh", padding: 24 }}>
+          <div style={{ color: "var(--m-ink)", fontFamily: "var(--font-mono)", textAlign: "center", maxWidth: 520, background: "rgba(255,255,255,0.68)", border: "1px solid rgba(10,10,10,0.14)", borderRadius: "var(--radius-md)", padding: "34px 38px", boxShadow: "0 20px 50px rgba(10,10,10,0.12)" }}>
+            <p style={{ color: "var(--accent-red)", fontSize: "0.8rem", fontWeight: 800, letterSpacing: "0.08em" }}>ACCESS REQUIRED</p>
+            <h1 style={{ marginTop: 10, fontFamily: "var(--font-sans)", fontSize: "2rem", lineHeight: 1.05 }}>Create your own lessons</h1>
+            <p style={{ marginTop: 12, color: "var(--ink-soft)", lineHeight: 1.6 }}>Sign in to open Creator Studio, build custom tracks, and publish terminal lesson steps.</p>
+            <div style={{ display: "flex", justifyContent: "center", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
+              <a href="/login" className="creator-auth-link creator-auth-link--primary">Login</a>
+              <a href="/register" className="creator-auth-link">Register</a>
+            </div>
+            <a href="/" style={{ color: "var(--accent-teal)", display: "inline-block", marginTop: 22, fontWeight: 700 }}>Return to home</a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const isSelectedTrackStatic = selectedTrack && !selectedTrack.creatorId;
+  const isSelectedTrackCreatedByMe = selectedTrack && selectedTrack.creatorId === user.userId;
+
+  return (
+    <div className="monitor-bezel">
+      <div className="monitor-screen" style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
+        {/* Header */}
+        <header className="m-site-header">
+          <div className="header-left">
+            <span className="header-brand">VisionOS</span>
+            <span className="header-meta" style={{ color: "#00ffcc" }}>CREATOR STUDIO</span>
+          </div>
+          <nav className="header-nav">
+            <a href="/">Home <span className="arrow">↗</span></a>
+          </nav>
+        </header>
+
+        {/* Dashboard Grid */}
+        <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 24, padding: 24, flex: 1 }}>
+          {/* Sidebar */}
+          <aside style={{ borderRight: "1px solid rgba(255,255,255,0.08)", paddingRight: 24 }}>
+            <h2 className="text-label" style={{ fontFamily: "var(--font-mono)", marginBottom: 16 }}>Learning Tracks</h2>
+            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+              {tracks.map(track => {
+                const isMyTrack = track.creatorId === user.userId;
+                return (
+                  <button
+                    key={track.id}
+                    onClick={() => {
+                      setSelectedTrack(track);
+                      setEditTrackForm({ label: track.label, description: track.description });
+                    }}
+                    style={{
+                      background: selectedTrack?.id === track.id ? "#001f1a" : "rgba(255,255,255,0.55)",
+                      border: selectedTrack?.id === track.id ? "1px solid #00ffcc" : "1px solid rgba(10,10,10,0.16)",
+                      color: selectedTrack?.id === track.id ? "#00ffcc" : "var(--m-ink)",
+                      borderRadius: "var(--radius-sm)",
+                      padding: "10px 14px",
+                      textAlign: "left",
+                      cursor: "pointer",
+                      fontFamily: "var(--font-mono)",
+                      fontSize: "0.85rem",
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      transition: "all 0.2s ease",
+                      boxShadow: selectedTrack?.id === track.id ? "0 0 12px rgba(0, 255, 204, 0.25)" : "none"
+                    }}
+                  >
+                    <span>{track.label}</span>
+                    {isMyTrack && <span style={{ color: "#00ffcc", fontSize: "0.65rem", border: "1px solid #00ffcc", padding: "1px 4px", borderRadius: 2 }}>MY CONTENT</span>}
+                    {!track.creatorId && <span style={{ color: "var(--ink-muted)", fontSize: "0.65rem" }}>SYSTEM</span>}
+                  </button>
+                );
+              })}
+            </div>
+
+            <button
+              onClick={() => {
+                setIsCreatingTrack(true);
+                setSelectedTrack(null);
+                setIsEditingTrack(false);
+                setIsEditingLesson(false);
+              }}
+              style={{
+                width: "100%",
+                marginTop: 24,
+                background: "#000",
+                border: "1px dashed #00ffcc",
+                color: "#00ffcc",
+                borderRadius: "var(--radius-sm)",
+                padding: "12px",
+                fontFamily: "var(--font-mono)",
+                cursor: "pointer",
+                fontSize: "0.85rem",
+                textAlign: "center",
+                boxShadow: "0 0 10px rgba(0, 255, 204, 0.15)"
+              }}
+            >
+              + Create New Track
+            </button>
+          </aside>
+
+          {/* Main workspace */}
+          <main style={{ paddingLeft: 12 }}>
+            {/* Create Track Form */}
+            {isCreatingTrack && (
+              <div style={{ maxWidth: 650 }}>
+                <h1 className="text-section-title" style={{ fontSize: "1.8rem" }}>Create Track</h1>
+                <p className="m-text-body" style={{ color: "var(--ink-muted)", marginTop: 6, fontSize: "0.85rem" }}>
+                  Design a custom path with specialized terminal lessons.
+                </p>
+
+                {trackError && <div style={{ color: "var(--accent-red)", fontFamily: "var(--font-mono)", marginTop: 12, fontSize: "0.85rem" }}>ERROR: {trackError}</div>}
+
+                <form onSubmit={handleCreateTrack} style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 16 }}>
+                  <div>
+                    <label className="text-label" style={{ display: "block", marginBottom: 6 }}>Track ID (URL & CLI key)</label>
+                    <input
+                      type="text"
+                      placeholder="e.g. advanced-git-flow"
+                      value={trackForm.id}
+                      onChange={e => setTrackForm(prev => ({ ...prev, id: e.target.value }))}
+                      required
+                      style={{
+                        width: "100%",
+                        padding: 10,
+                        background: "rgba(255,255,255,0.03)",
+                        border: "1px solid rgba(255,255,255,0.1)",
+                        borderRadius: "var(--radius-sm)",
+                        color: "var(--m-ink)",
+                        fontFamily: "var(--font-mono)"
+                      }}
+                    />
+                  </div>
+                  <div>
+                    <label className="text-label" style={{ display: "block", marginBottom: 6 }}>Display Label</label>
+                    <input
+                      type="text"
+                      placeholder="e.g. Advanced Git"
+                      value={trackForm.label}
+                      onChange={e => setTrackForm(prev => ({ ...prev, label: e.target.value }))}
+                      required
+                      style={{
+                        width: "100%",
+                        padding: 10,
+                        background: "rgba(255,255,255,0.03)",
+                        border: "1px solid rgba(255,255,255,0.1)",
+                        borderRadius: "var(--radius-sm)",
+                        color: "var(--m-ink)",
+                        fontFamily: "var(--font-mono)"
+                      }}
+                    />
+                  </div>
+                  <div>
+                    <label className="text-label" style={{ display: "block", marginBottom: 6 }}>Description Summary</label>
+                    <textarea
+                      placeholder="Explain what learners will practice on their terminal..."
+                      value={trackForm.description}
+                      onChange={e => setTrackForm(prev => ({ ...prev, description: e.target.value }))}
+                      required
+                      rows={4}
+                      style={{
+                        width: "100%",
+                        padding: 10,
+                        background: "rgba(255,255,255,0.03)",
+                        border: "1px solid rgba(255,255,255,0.1)",
+                        borderRadius: "var(--radius-sm)",
+                        color: "var(--m-ink)",
+                        fontFamily: "var(--font-mono)"
+                      }}
+                    />
+                  </div>
+
+                  <div style={{ display: "flex", gap: 12, marginTop: 12 }}>
+                    <button type="submit" className="copy-link-btn" style={{ background: "#000", border: "1px solid var(--bezel-outer)", color: "var(--bg-beige)", boxShadow: "0 0 12px rgba(168, 168, 160, 0.4)", fontWeight: 700 }}>Publish Track</button>
+                    <button type="button" onClick={() => setIsCreatingTrack(false)} style={{ background: "#000", border: "1px solid rgba(255,255,255,0.25)", color: "var(--bg-beige)", padding: "10px 18px", borderRadius: "var(--radius-sm)", cursor: "pointer", boxShadow: "0 0 8px rgba(255,255,255,0.05)" }}>Cancel</button>
+                  </div>
+                </form>
+              </div>
+            )}
+
+            {/* Selected Track Dashboard */}
+            {selectedTrack && !isCreatingTrack && !isEditingLesson && (
+              <div>
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 16 }}>
+                  <div>
+                    <h1 className="text-section-title" style={{ fontSize: "2rem" }}>{selectedTrack.label}</h1>
+                    <p className="m-text-body" style={{ color: "var(--ink-muted)", marginTop: 6, fontSize: "0.9rem" }}>{selectedTrack.description}</p>
+                    <p style={{ fontFamily: "var(--font-mono)", color: "#00ffcc", fontSize: "0.75rem", marginTop: 8 }}>Track Key: {selectedTrack.id}</p>
+                  </div>
+                  {isSelectedTrackCreatedByMe && (
+                    <button
+                      onClick={() => setIsEditingTrack(true)}
+                      style={{
+                        background: "#000",
+                        border: "1px solid #00ffcc",
+                        color: "#00ffcc",
+                        padding: "8px 16px",
+                        borderRadius: "var(--radius-sm)",
+                        cursor: "pointer",
+                        fontFamily: "var(--font-mono)",
+                        fontSize: "0.8rem",
+                        boxShadow: "0 0 10px rgba(0, 255, 204, 0.3)"
+                      }}
+                    >
+                      Edit Track Meta
+                    </button>
+                  )}
+                </div>
+
+                {/* Edit Track Meta Form */}
+                {isEditingTrack && (
+                  <form onSubmit={handleUpdateTrack} style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 12, maxWidth: 600 }}>
+                    <div>
+                      <label className="text-label" style={{ display: "block", marginBottom: 4 }}>Label</label>
+                      <input
+                        type="text"
+                        value={editTrackForm.label}
+                        onChange={e => setEditTrackForm(prev => ({ ...prev, label: e.target.value }))}
+                        required
+                        style={{ width: "100%", padding: 8, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.1)", color: "var(--m-ink)", fontFamily: "var(--font-mono)" }}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-label" style={{ display: "block", marginBottom: 4 }}>Description</label>
+                      <textarea
+                        value={editTrackForm.description}
+                        onChange={e => setEditTrackForm(prev => ({ ...prev, description: e.target.value }))}
+                        required
+                        rows={3}
+                        style={{ width: "100%", padding: 8, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.1)", color: "var(--m-ink)", fontFamily: "var(--font-mono)" }}
+                      />
+                    </div>
+                    <div style={{ display: "flex", gap: 10 }}>
+                      <button type="submit" style={{ background: "#000", border: "1px solid var(--bezel-outer)", color: "var(--bg-beige)", padding: "8px 16px", borderRadius: "var(--radius-sm)", cursor: "pointer", fontWeight: 700, boxShadow: "0 0 12px rgba(168, 168, 160, 0.4)" }}>Save Changes</button>
+                      <button type="button" onClick={() => setIsEditingTrack(false)} style={{ background: "#000", border: "1px solid rgba(255,255,255,0.25)", color: "var(--bg-beige)", padding: "8px 16px", borderRadius: "var(--radius-sm)", cursor: "pointer", boxShadow: "0 0 8px rgba(255,255,255,0.05)" }}>Cancel</button>
+                    </div>
+                  </form>
+                )}
+
+                {/* Track Lessons Section */}
+                <div style={{ marginTop: 32 }}>
+                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
+                    <h2 className="text-label" style={{ fontSize: "1rem", fontFamily: "var(--font-mono)" }}>Track Lessons ({lessons.length})</h2>
+                    {isSelectedTrackCreatedByMe && (
+                      <button
+                        onClick={startCreateLesson}
+                        style={{
+                          background: "#000",
+                          border: "1px solid #00ffcc",
+                          color: "#00ffcc",
+                          padding: "8px 16px",
+                          borderRadius: "var(--radius-sm)",
+                          cursor: "pointer",
+                          fontFamily: "var(--font-mono)",
+                          fontSize: "0.8rem",
+                          fontWeight: 700,
+                          boxShadow: "0 0 12px rgba(0, 255, 204, 0.35)"
+                        }}
+                      >
+                        + Add New Lesson
+                      </button>
+                    )}
+                  </div>
+
+                  {lessons.length === 0 ? (
+                    <div style={{ border: "1px dashed rgba(255,255,255,0.06)", padding: "32px 0", textAlign: "center", borderRadius: "var(--radius-md)", color: "var(--ink-muted)" }}>
+                      No lessons have been added to this track yet.
+                    </div>
+                  ) : (
+                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+                      {lessons.map(lesson => {
+                        const isMyLesson = lesson.creatorId === user.userId;
+                        return (
+                          <div
+                            key={lesson.id}
+                            style={{
+                              background: "rgba(255,255,255,0.02)",
+                              border: "1px solid rgba(255,255,255,0.05)",
+                              borderRadius: "var(--radius-md)",
+                              padding: 20,
+                              display: "flex",
+                              flexDirection: "column",
+                              justifyContent: "space-between"
+                            }}
+                          >
+                            <div>
+                              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                                <span style={{ color: "#00ffcc", fontFamily: "var(--font-mono)", fontSize: "0.75rem", textTransform: "uppercase" }}>{lesson.difficulty} — {lesson.estimatedMinutes} mins</span>
+                                {isMyLesson && <span style={{ color: "#00ffcc", fontSize: "0.6rem", border: "1px solid #00ffcc", padding: "1px 4px", borderRadius: 2 }}>MY CONTENT</span>}
+                              </div>
+                              <h3 style={{ marginTop: 8, fontSize: "1.1rem" }}>{lesson.title}</h3>
+                              <p className="m-text-body" style={{ fontSize: "0.8rem", color: "var(--ink-muted)", marginTop: 6 }}>{lesson.summary}</p>
+                              <p style={{ fontFamily: "var(--font-mono)", fontSize: "0.7rem", color: "var(--ink-muted)", marginTop: 8 }}>Steps: {lesson.steps.length}</p>
+                            </div>
+
+                            {isMyLesson && (
+                              <button
+                                onClick={() => startEditLesson(lesson)}
+                                style={{
+                                  marginTop: 16,
+                                  alignSelf: "flex-start",
+                                  background: "#000",
+                                  border: "1px solid rgba(255,255,255,0.25)",
+                                  color: "var(--bg-beige)",
+                                  padding: "6px 12px",
+                                  borderRadius: "var(--radius-sm)",
+                                  cursor: "pointer",
+                                  fontSize: "0.75rem",
+                                  fontFamily: "var(--font-mono)",
+                                  boxShadow: "0 0 8px rgba(255, 255, 255, 0.05)"
+                                }}
+                              >
+                                Edit Lesson & Steps
+                              </button>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Lesson & Steps Builder */}
+            {isEditingLesson && selectedTrack && (
+              <div style={{ maxWidth: 850, paddingBottom: 48 }}>
+                <h1 className="text-section-title" style={{ fontSize: "1.8rem" }}>
+                  {selectedLesson ? `Edit Lesson: ${selectedLesson.title}` : "Add New Lesson"}
+                </h1>
+                <p className="m-text-body" style={{ color: "var(--ink-muted)", marginTop: 6, fontSize: "0.85rem" }}>
+                  Define custom terminal steps and configure dynamic verification rules.
+                </p>
+
+                {lessonError && <div style={{ color: "var(--accent-red)", fontFamily: "var(--font-mono)", marginTop: 12, fontSize: "0.85rem" }}>ERROR: {lessonError}</div>}
+
+                <form onSubmit={handleSaveLesson} style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 16 }}>
+                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+                    <div>
+                      <label className="text-label" style={{ display: "block", marginBottom: 6 }}>Lesson ID</label>
+                      <input
+                        type="text"
+                        placeholder="e.g. git-rebasing-basics"
+                        value={lessonForm.id}
+                        disabled={!!selectedLesson}
+                        onChange={e => setLessonForm(prev => ({ ...prev, id: e.target.value }))}
+                        required
+                        style={{
+                          width: "100%",
+                          padding: 10,
+                          background: "rgba(255,255,255,0.55)",
+                          border: "1px solid rgba(10,10,10,0.16)",
+                          borderRadius: "var(--radius-sm)",
+                          color: "var(--m-ink)",
+                          fontFamily: "var(--font-mono)",
+                          opacity: selectedLesson ? 0.5 : 1
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-label" style={{ display: "block", marginBottom: 6 }}>Title</label>
+                      <input
+                        type="text"
+                        placeholder="e.g. Rebasing Basics"
+                        value={lessonForm.title}
+                        onChange={e => setLessonForm(prev => ({ ...prev, title: e.target.value }))}
+                        required
+                        style={{
+                          width: "100%",
+                          padding: 10,
+                          background: "rgba(255,255,255,0.03)",
+                          border: "1px solid rgba(255,255,255,0.1)",
+                          borderRadius: "var(--radius-sm)",
+                          color: "var(--m-ink)",
+                          fontFamily: "var(--font-mono)"
+                        }}
+                      />
+                    </div>
+                  </div>
+
+                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+                    <div>
+                      <label className="text-label" style={{ display: "block", marginBottom: 6 }}>Difficulty</label>
+                      <select
+                        value={lessonForm.difficulty}
+                        onChange={e => setLessonForm(prev => ({ ...prev, difficulty: e.target.value as any }))}
+                        style={{
+                          width: "100%",
+                          padding: 10,
+                          background: "var(--bg-beige-light)",
+                          border: "1px solid rgba(10,10,10,0.18)",
+                          borderRadius: "var(--radius-sm)",
+                          color: "var(--m-ink)",
+                          fontFamily: "var(--font-mono)"
+                        }}
+                      >
+                        <option value="beginner">Beginner</option>
+                        <option value="intermediate">Intermediate</option>
+                        <option value="advanced">Advanced</option>
+                      </select>
+                    </div>
+                    <div>
+                      <label className="text-label" style={{ display: "block", marginBottom: 6 }}>Estimated Minutes</label>
+                      <input
+                        type="number"
+                        placeholder="10"
+                        value={lessonForm.estimatedMinutes}
+                        onChange={e => setLessonForm(prev => ({ ...prev, estimatedMinutes: Number(e.target.value) }))}
+                        required
+                        style={{
+                          width: "100%",
+                          padding: 10,
+                          background: "rgba(255,255,255,0.03)",
+                          border: "1px solid rgba(255,255,255,0.1)",
+                          borderRadius: "var(--radius-sm)",
+                          color: "var(--m-ink)",
+                          fontFamily: "var(--font-mono)"
+                        }}
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <label className="text-label" style={{ display: "block", marginBottom: 6 }}>Summary Description</label>
+                    <input
+                      type="text"
+                      placeholder="Brief overview explaining what this lesson teaches..."
+                      value={lessonForm.summary}
+                      onChange={e => setLessonForm(prev => ({ ...prev, summary: e.target.value }))}
+                      required
+                      style={{
+                        width: "100%",
+                        padding: 10,
+                        background: "rgba(255,255,255,0.03)",
+                        border: "1px solid rgba(255,255,255,0.1)",
+                        borderRadius: "var(--radius-sm)",
+                        color: "var(--m-ink)",
+                        fontFamily: "var(--font-mono)"
+                      }}
+                    />
+                  </div>
+
+                  {/* Step Editor List */}
+                  <div style={{ marginTop: 24 }}>
+                    <h3 className="text-label" style={{ fontSize: "0.95rem", marginBottom: 12, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                      <span>Lesson Steps ({lessonForm.steps.length})</span>
+                      <button
+                        type="button"
+                        onClick={handleAddStep}
+                        style={{
+                          background: "#000",
+                          border: "1px solid #00ffcc",
+                          color: "#00ffcc",
+                          padding: "4px 10px",
+                          borderRadius: 4,
+                          fontSize: "0.75rem",
+                          cursor: "pointer",
+                          fontFamily: "var(--font-mono)",
+                          boxShadow: "0 0 10px rgba(0, 255, 204, 0.2)"
+                        }}
+                      >
+                        + Add Step
+                      </button>
+                    </h3>
+
+                    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+                      {lessonForm.steps.map((step, idx) => (
+                        <div
+                          key={idx}
+                          style={{
+                            background: "rgba(255,255,255,0.01)",
+                            border: "1px solid rgba(255,255,255,0.06)",
+                            borderRadius: "var(--radius-md)",
+                            padding: 20,
+                            position: "relative"
+                          }}
+                        >
+                          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
+                            <span style={{ color: "#00ffcc", fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: "0.8rem" }}>STEP {idx + 1}</span>
+                            {lessonForm.steps.length > 1 && (
+                              <button
+                                type="button"
+                                onClick={() => handleRemoveStep(idx)}
+                                style={{
+                                  background: "#000",
+                                  border: "1px solid var(--accent-red)",
+                                  color: "var(--accent-red)",
+                                  padding: "4px 8px",
+                                  borderRadius: 4,
+                                  fontSize: "0.75rem",
+                                  cursor: "pointer",
+                                  fontFamily: "var(--font-mono)",
+                                  boxShadow: "0 0 8px rgba(255, 77, 77, 0.25)"
+                                }}
+                              >
+                                [Remove Step]
+                              </button>
+                            )}
+                          </div>
+
+                          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 12 }}>
+                            <div>
+                              <label style={{ fontSize: "0.75rem", display: "block", color: "var(--ink-muted)", marginBottom: 4 }}>Step Key ID</label>
+                              <input
+                                type="text"
+                                placeholder="e.g. git-rebase-interactive"
+                                value={step.id}
+                                onChange={e => handleStepChange(idx, "id", e.target.value)}
+                                required
+                                style={{ width: "100%", padding: 8, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)", color: "var(--m-ink)", fontFamily: "var(--font-mono)", fontSize: "0.85rem" }}
+                              />
+                            </div>
+                            <div>
+                              <label style={{ fontSize: "0.75rem", display: "block", color: "var(--ink-muted)", marginBottom: 4 }}>Display Title</label>
+                              <input
+                                type="text"
+                                placeholder="e.g. Start Interactive Rebase"
+                                value={step.title}
+                                onChange={e => handleStepChange(idx, "title", e.target.value)}
+                                required
+                                style={{ width: "100%", padding: 8, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)", color: "var(--m-ink)", fontFamily: "var(--font-mono)", fontSize: "0.85rem" }}
+                              />
+                            </div>
+                          </div>
+
+                          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 0.8fr", gap: 12, marginBottom: 12 }}>
+                            <div>
+                              <label style={{ fontSize: "0.75rem", display: "block", color: "var(--ink-muted)", marginBottom: 4 }}>Command Explanation</label>
+                              <input
+                                type="text"
+                                placeholder="Explain what this command does and how it affects history..."
+                                value={step.explanation}
+                                onChange={e => handleStepChange(idx, "explanation", e.target.value)}
+                                required
+                                style={{ width: "100%", padding: 8, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)", color: "var(--m-ink)", fontFamily: "var(--font-mono)", fontSize: "0.85rem" }}
+                              />
+                            </div>
+                            <div>
+                              <label style={{ fontSize: "0.75rem", display: "block", color: "var(--ink-muted)", marginBottom: 4 }}>Step Goal / Objective</label>
+                              <input
+                                type="text"
+                                placeholder="e.g. Choose which commits to squash."
+                                value={step.objective}
+                                onChange={e => handleStepChange(idx, "objective", e.target.value)}
+                                required
+                                style={{ width: "100%", padding: 8, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)", color: "var(--m-ink)", fontFamily: "var(--font-mono)", fontSize: "0.85rem" }}
+                              />
+                            </div>
+                          </div>
+
+                          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 0.8fr", gap: 12, marginBottom: 12 }}>
+                            <div>
+                              <label style={{ fontSize: "0.75rem", display: "block", color: "var(--ink-muted)", marginBottom: 4 }}>Target Command</label>
+                              <input
+                                type="text"
+                                placeholder="e.g. git rebase -i HEAD~3"
+                                value={step.command}
+                                onChange={e => handleStepChange(idx, "command", e.target.value)}
+                                required
+                                style={{ width: "100%", padding: 8, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)", color: "var(--m-ink)", fontFamily: "var(--font-mono)", fontSize: "0.85rem" }}
+                              />
+                            </div>
+                            <div>
+                              <label style={{ fontSize: "0.75rem", display: "block", color: "var(--ink-muted)", marginBottom: 4 }}>Expected Result Verification</label>
+                              <select
+                                value={step.validationType || "syntax"}
+                                onChange={e => handleStepChange(idx, "validationType", e.target.value)}
+                                style={{ width: "100%", padding: 8, background: "var(--bg-beige-light)", border: "1px solid rgba(10,10,10,0.18)", color: "var(--m-ink)", fontFamily: "var(--font-mono)", fontSize: "0.85rem" }}
+                              >
+                                <option value="syntax">Syntax Success (runs with exit 0)</option>
+                                <option value="file-exists">File/Folder Exists</option>
+                                <option value="file-contains">File Exists and Contains Content</option>
+                              </select>
+                            </div>
+                          </div>
+
+                          {/* Dynamic validation parameters */}
+                          {step.validationType !== "syntax" && (
+                            <div style={{ display: "grid", gridTemplateColumns: step.validationType === "file-contains" ? "1fr 1fr" : "1fr", gap: 12, padding: "12px 16px", background: "rgba(0, 255, 204, 0.03)", border: "1px solid rgba(0, 255, 204, 0.08)", borderRadius: "var(--radius-sm)" }}>
+                              <div>
+                                <label style={{ fontSize: "0.7rem", display: "block", color: "#00ffcc", marginBottom: 4 }}>Relative File/Folder Path</label>
+                                <input
+                                  type="text"
+                                  placeholder="e.g. practice/hello.txt"
+                                  value={step.validationPath || ""}
+                                  onChange={e => handleStepChange(idx, "validationPath", e.target.value)}
+                                  required
+                                  style={{ width: "100%", padding: 8, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(0, 255, 204, 0.2)", color: "var(--m-ink)", fontFamily: "var(--font-mono)", fontSize: "0.8rem" }}
+                                />
+                              </div>
+                              {step.validationType === "file-contains" && (
+                                <div>
+                                  <label style={{ fontSize: "0.7rem", display: "block", color: "#00ffcc", marginBottom: 4 }}>Expected Text/String Content</label>
+                                  <input
+                                    type="text"
+                                    placeholder="e.g. hello terminal"
+                                    value={step.validationContent || ""}
+                                    onChange={e => handleStepChange(idx, "validationContent", e.target.value)}
+                                    required
+                                    style={{ width: "100%", padding: 8, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(0, 255, 204, 0.2)", color: "var(--m-ink)", fontFamily: "var(--font-mono)", fontSize: "0.8rem" }}
+                                  />
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
+                    <button type="submit" className="copy-link-btn" style={{ background: "#000", border: "1px solid var(--bezel-outer)", color: "var(--bg-beige)", boxShadow: "0 0 12px rgba(168, 168, 160, 0.4)", fontWeight: 700 }}>Publish Lesson</button>
+                    <button type="button" onClick={() => setIsEditingLesson(false)} style={{ background: "#000", border: "1px solid rgba(255,255,255,0.25)", color: "var(--bg-beige)", padding: "10px 18px", borderRadius: "var(--radius-sm)", cursor: "pointer", boxShadow: "0 0 8px rgba(255,255,255,0.05)" }}>Cancel</button>
+                  </div>
+                </form>
+              </div>
+            )}
+
+            {/* Empty State */}
+            {!selectedTrack && !isCreatingTrack && (
+              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: "400px", color: "var(--ink-muted)" }}>
+                <h2>Creator Workspace</h2>
+                <p style={{ marginTop: 8, fontSize: "0.9rem" }}>Select a track from the sidebar to manage lessons or create a new track.</p>
+              </div>
+            )}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}