@noya-app/noya-multiplayer-react 0.1.76 → 0.1.78

package/src/inspector/sections/GitSection.tsx

@@ -0,0 +1,500 @@
+"use client";
+
+import { GitFileEditHandle, GitManager } from "@noya-app/state-manager";
+import React, { useEffect, useRef, useState } from "react";
+import { useObservable } from "../../useObservable";
+import { ColoredDot } from "../ColoredDot";
+import { getStateInspectorTheme } from "../inspectorTheme";
+import { StateInspectorButton } from "../StateInspectorButton";
+import {
+  StateInspectorDisclosureRowInner,
+  StateInspectorDisclosureSection,
+} from "../StateInspectorDisclosureSection";
+import { StateInspectorTitleLabel } from "../StateInspectorTitleLabel";
+
+export function GitSection({
+  showGit,
+  setShowGit,
+  colorScheme,
+  gitManager,
+}: {
+  showGit: boolean;
+  setShowGit: (value: boolean) => void;
+  colorScheme: "light" | "dark";
+  gitManager: GitManager;
+}) {
+  const theme = getStateInspectorTheme(colorScheme);
+  const repos = useObservable(gitManager.repos$);
+  const isInitialized = useObservable(gitManager.isInitialized$);
+  const repoFiles = useObservable(gitManager.repoFiles$);
+
+  // Local state for focused repo (debugging UI only)
+  const [focusedRepoId, setFocusedRepoId] = useState<string | null>(null);
+
+  // State for editing a file
+  const [editingFile, setEditingFile] = useState<string | null>(null);
+  const editHandleRef = useRef<GitFileEditHandle | null>(null);
+  const [editContent, setEditContent] = useState<string>("");
+  const [isEditInitialized, setIsEditInitialized] = useState(false);
+
+  const focusedRepo = focusedRepoId
+    ? repos.find((r) => r.id === focusedRepoId)
+    : null;
+  const focusedRepoFilesState = focusedRepoId ? repoFiles[focusedRepoId] : null;
+
+  const handleFocusRepo = async (repoId: string | null) => {
+    // Close any open edit session when switching repos
+    if (editHandleRef.current) {
+      editHandleRef.current.close();
+      editHandleRef.current = null;
+      setEditingFile(null);
+      setEditContent("");
+      setIsEditInitialized(false);
+    }
+    setFocusedRepoId(repoId);
+    if (repoId && !repoFiles[repoId]) {
+      await gitManager.fetchRepoFiles(repoId);
+    }
+  };
+
+  const handleEditFile = (filePath: string) => {
+    if (!focusedRepoId || !focusedRepoFilesState) return;
+
+    // Close existing session
+    if (editHandleRef.current) {
+      editHandleRef.current.close();
+    }
+
+    const handle = gitManager.openEditingHandle(
+      focusedRepoId,
+      filePath,
+      focusedRepoFilesState.ref
+    );
+    editHandleRef.current = handle;
+    setEditingFile(filePath);
+    setIsEditInitialized(false);
+    setEditContent("");
+  };
+
+  const handleCloseEdit = () => {
+    if (editHandleRef.current) {
+      editHandleRef.current.close();
+      editHandleRef.current = null;
+    }
+    setEditingFile(null);
+    setEditContent("");
+    setIsEditInitialized(false);
+  };
+
+  // Subscribe to content updates from the editing handle
+  useEffect(() => {
+    const handle = editHandleRef.current;
+    if (!handle) return;
+
+    const unsubContent = handle.content$.subscribe((content) => {
+      setEditContent(content);
+    });
+
+    const unsubInitialized = handle.isInitialized$.subscribe((initialized) => {
+      setIsEditInitialized(initialized);
+    });
+
+    return () => {
+      unsubContent();
+      unsubInitialized();
+    };
+  }, [editingFile]);
+
+  const handleContentChange = (newContent: string) => {
+    const handle = editHandleRef.current;
+    if (!handle) return;
+
+    handle.setState(newContent);
+  };
+
+  const handleBranchChange = async (ref: string) => {
+    if (focusedRepoId) {
+      await gitManager.fetchRepoFiles(focusedRepoId, ref);
+    }
+  };
+
+  const handleAddFile = async () => {
+    if (!focusedRepoId || !focusedRepoFilesState) return;
+
+    const path = prompt("Enter file path (e.g., src/index.ts):");
+    if (!path) return;
+
+    try {
+      await gitManager.patchFiles(
+        focusedRepoId,
+        { create: [{ path, content: "" }] },
+        focusedRepoFilesState.ref
+      );
+    } catch (error) {
+      alert(`Failed to create file: ${error}`);
+    }
+  };
+
+  const handleRenameFile = async (oldPath: string) => {
+    if (!focusedRepoId || !focusedRepoFilesState) return;
+
+    const newPath = prompt(`Rename "${oldPath}" to:`, oldPath);
+    if (!newPath || newPath === oldPath) return;
+
+    try {
+      await gitManager.patchFiles(
+        focusedRepoId,
+        { rename: [{ oldPath, newPath }] },
+        focusedRepoFilesState.ref
+      );
+    } catch (error) {
+      alert(`Failed to rename file: ${error}`);
+    }
+  };
+
+  const handleDeleteFile = async (path: string) => {
+    if (!focusedRepoId || !focusedRepoFilesState) return;
+
+    // eslint-disable-next-line no-restricted-globals
+    const confirmed = confirm(`Delete "${path}"?`);
+    if (!confirmed) return;
+
+    try {
+      await gitManager.patchFiles(
+        focusedRepoId,
+        { delete: [{ path }] },
+        focusedRepoFilesState.ref
+      );
+
+      // If we were editing this file, close the editor
+      if (editingFile === path) {
+        handleCloseEdit();
+      }
+    } catch (error) {
+      alert(`Failed to delete file: ${error}`);
+    }
+  };
+
+  return (
+    <StateInspectorDisclosureSection
+      open={showGit}
+      setOpen={setShowGit}
+      title={
+        <StateInspectorTitleLabel>
+          Git Repos ({repos.length})
+          <ColoredDot type={isInitialized ? "success" : "error"} />
+        </StateInspectorTitleLabel>
+      }
+      colorScheme={colorScheme}
+      right={
+        <span style={{ display: "flex", gap: "10px" }}>
+          <StateInspectorButton
+            theme={theme}
+            onClick={async () => {
+              try {
+                await gitManager.initRepo();
+              } catch (error) {
+                console.error("[GitSection] Failed to create repo:", error);
+              }
+            }}
+          >
+            Init Repo
+          </StateInspectorButton>
+        </span>
+      }
+    >
+      <StateInspectorDisclosureRowInner>
+        {/* Repo selector */}
+        <div style={{ padding: "4px 12px", display: "flex", gap: "4px" }}>
+          <select
+            name="repoSelector"
+            value={focusedRepoId ?? ""}
+            style={{ flex: "1 1 auto", height: "19px", minWidth: 0 }}
+            onChange={(e) => {
+              const value = e.target.value;
+              handleFocusRepo(value || null);
+            }}
+          >
+            <option value="">Select a repo...</option>
+            {repos.map((repo) => (
+              <option key={repo.id} value={repo.id}>
+                {repo.id}
+              </option>
+            ))}
+          </select>
+          {focusedRepoId && (
+            <StateInspectorButton
+              theme={theme}
+              onClick={() => gitManager.fetchRepoFiles(focusedRepoId)}
+            >
+              Refresh
+            </StateInspectorButton>
+          )}
+          <label
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              fontSize: "11px",
+              whiteSpace: "nowrap",
+            }}
+          >
+            [Include Content = {gitManager.includeContent ? "true" : "false"}]
+          </label>
+        </div>
+
+        {/* Branch selector and files list for focused repo */}
+        {focusedRepo && focusedRepoFilesState && (
+          <>
+            {/* Branch selector */}
+            <div
+              style={{
+                padding: "4px 12px",
+                display: "flex",
+                gap: "8px",
+                alignItems: "center",
+                fontSize: "12px",
+              }}
+            >
+              <span style={{ color: theme.BASE_COLOR }}>Branch:</span>
+              {focusedRepoFilesState.branches.length > 0 ? (
+                <select
+                  value={focusedRepoFilesState.ref}
+                  style={{ flex: "1 1 auto", height: "19px" }}
+                  onChange={(e) => handleBranchChange(e.target.value)}
+                >
+                  {focusedRepoFilesState.branches.map((branch) => (
+                    <option key={branch.name} value={branch.name}>
+                      {branch.name}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <span style={{ opacity: 0.6, fontStyle: "italic" }}>
+                  {focusedRepoFilesState.ref || "No branches"}
+                </span>
+              )}
+              {focusedRepoFilesState.oid && (
+                <span
+                  style={{
+                    fontFamily: "monospace",
+                    fontSize: "10px",
+                    opacity: 0.6,
+                  }}
+                  title={focusedRepoFilesState.oid}
+                >
+                  {focusedRepoFilesState.oid.slice(0, 7)}
+                  {focusedRepoFilesState.fetchState === "refreshing" && "…"}
+                </span>
+              )}
+              <StateInspectorButton
+                theme={theme}
+                onClick={handleAddFile}
+                style={{ fontSize: "10px", padding: "2px 6px" }}
+              >
+                + Add File
+              </StateInspectorButton>
+            </div>
+
+            {focusedRepoFilesState.fetchState === "loading" && (
+              <div
+                style={{
+                  padding: "12px",
+                  fontSize: "12px",
+                }}
+              >
+                Loading files...
+              </div>
+            )}
+            {focusedRepoFilesState.error && (
+              <div
+                style={{
+                  padding: "12px",
+                  fontSize: "12px",
+                  color: "#f44",
+                }}
+              >
+                Error: {focusedRepoFilesState.error}
+              </div>
+            )}
+            {focusedRepoFilesState.fetchState !== "loading" &&
+              !focusedRepoFilesState.error &&
+              focusedRepoFilesState.files.length === 0 && (
+                <div
+                  style={{
+                    padding: "12px",
+                    fontSize: "12px",
+                  }}
+                >
+                  No files (empty repo)
+                </div>
+              )}
+            {/* Hide file list when editing a file */}
+            {!editingFile &&
+              focusedRepoFilesState.files.map((file, index) => {
+                // Get content preview if available
+                const fileInfo = focusedRepoFilesState.fileContents?.find(
+                  (f) => f.path === file
+                );
+                let preview = "";
+                if (fileInfo) {
+                  try {
+                    const decoded = atob(fileInfo.content);
+                    // Take first 40 chars, replace newlines with spaces
+                    preview = decoded
+                      .slice(0, 40)
+                      .replace(/\n/g, " ")
+                      .replace(/\s+/g, " ");
+                    if (decoded.length > 40) preview += "…";
+                  } catch {
+                    // ignore decode errors
+                  }
+                }
+
+                return (
+                  <div
+                    key={index}
+                    style={{
+                      padding: "2px 12px",
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      gap: "8px",
+                      borderBottom: `1px solid ${
+                        colorScheme === "light"
+                          ? "rgb(223 223 223)"
+                          : "rgb(29 29 29)"
+                      }`,
+                    }}
+                  >
+                    <span
+                      style={{
+                        fontFamily: "monospace",
+                        fontSize: "11px",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        minWidth: 0,
+                        display: "flex",
+                        gap: "8px",
+                      }}
+                      title={file}
+                    >
+                      <span>{file}</span>
+                      {preview && (
+                        <span style={{ opacity: 0.5 }}>{preview}</span>
+                      )}
+                    </span>
+                    <span style={{ display: "flex", gap: "4px", flexShrink: 0 }}>
+                      <StateInspectorButton
+                        theme={theme}
+                        onClick={() => handleEditFile(file)}
+                        style={{ fontSize: "10px", padding: "2px 6px" }}
+                      >
+                        Edit
+                      </StateInspectorButton>
+                      <StateInspectorButton
+                        theme={theme}
+                        onClick={() => handleRenameFile(file)}
+                        style={{ fontSize: "10px", padding: "2px 6px" }}
+                      >
+                        Rename
+                      </StateInspectorButton>
+                      <StateInspectorButton
+                        theme={theme}
+                        onClick={() => handleDeleteFile(file)}
+                        style={{ fontSize: "10px", padding: "2px 6px" }}
+                      >
+                        Delete
+                      </StateInspectorButton>
+                    </span>
+                  </div>
+                );
+              })}
+
+            {/* File editor textarea */}
+            {editingFile && (
+              <div
+                style={{
+                  padding: "8px 12px",
+                  borderTop: `1px solid ${theme.DIVIDER_COLOR}`,
+                  flex: "1 1 auto",
+                  display: "flex",
+                  flexDirection: "column",
+                  minHeight: 0,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBottom: "8px",
+                    flexShrink: 0,
+                  }}
+                >
+                  <span
+                    style={{
+                      fontFamily: "monospace",
+                      fontSize: "11px",
+                      fontWeight: "bold",
+                    }}
+                  >
+                    {editingFile}
+                    {!isEditInitialized && (
+                      <span style={{ opacity: 0.5, marginLeft: "8px" }}>
+                        Loading...
+                      </span>
+                    )}
+                  </span>
+                  <StateInspectorButton
+                    theme={theme}
+                    onClick={handleCloseEdit}
+                    style={{ fontSize: "10px", padding: "2px 6px" }}
+                  >
+                    Close
+                  </StateInspectorButton>
+                </div>
+                <textarea
+                  value={editContent}
+                  onChange={(e) => handleContentChange(e.target.value)}
+                  disabled={!isEditInitialized}
+                  style={{
+                    width: "100%",
+                    flex: "1 1 auto",
+                    minHeight: "100px",
+                    fontFamily: "monospace",
+                    fontSize: "11px",
+                    padding: "8px",
+                    border: `1px solid ${theme.DIVIDER_COLOR}`,
+                    borderRadius: "4px",
+                    backgroundColor: theme.ROW_BACKGROUND,
+                    color: theme.BASE_COLOR,
+                    resize: "none",
+                    boxSizing: "border-box",
+                  }}
+                />
+              </div>
+            )}
+
+          </>
+        )}
+
+        {/* Empty state when no repos */}
+        {repos.length === 0 && (
+          <div
+            style={{
+              padding: "12px",
+              fontSize: "12px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+            }}
+          >
+            <span>No git repos</span>
+          </div>
+        )}
+      </StateInspectorDisclosureRowInner>
+    </StateInspectorDisclosureSection>
+  );
+}

package/src/noyaApp.ts

@@ -149,6 +149,7 @@ export function getSyncAdapter<
   debug?: boolean;
   policyAuthContext?: PolicyAuthContext;
   serverScripts?: LocalStorageSyncOptions["serverScripts"];
+  git?: LocalStorageSyncOptions["git"];
 }): SyncAdapter<S, M, E, MenuT, I> {
   const {
     multiplayerUrl,
@@ -156,6 +157,7 @@ export function getSyncAdapter<
     debug,
     policyAuthContext,
     serverScripts,
+    git,
   } = params ?? {};
 
   return isEmbeddedApp()
@@ -166,6 +168,7 @@ export function getSyncAdapter<
         ? localStorageSync<S, M, E, MenuT, I>({
             key: offlineStorageKey,
             ...(serverScripts ? { serverScripts } : {}),
+            ...(git ? { git } : {}),
           })
         : stubSync<S, M, E, MenuT, I>();
 }
@@ -178,6 +181,8 @@ export type UseNoyaStateOptions<
   I extends Record<string, any> = Record<string, unknown>,
 > = UseMultiplayerStateOptions<S, M, E, MenuT, I> & {
   offlineStorageKey?: string;
+  serverScripts?: LocalStorageSyncOptions["serverScripts"];
+  git?: LocalStorageSyncOptions["git"];
 };
 
 export type UseNoyaStateResult<
@@ -282,12 +287,16 @@ export function useNoyaStateInternal<
       offlineStorageKey: options?.offlineStorageKey,
       debug: options?.debug,
       policyAuthContext: basePolicyAuthContext,
+      serverScripts: options?.serverScripts,
+      git: options?.git,
     });
   }, [
     multiplayerUrl,
     options?.offlineStorageKey,
     options?.debug,
     basePolicyAuthContext,
+    options?.serverScripts,
+    options?.git,
   ]);
 
   const [noyaManager] = useState(

package/src/singleton.tsx

@@ -44,6 +44,7 @@ export type AnyNoyaSingletonOptions<
   offlineStorageKey?: string;
   multiplayerUrl?: string;
   serverScripts?: LocalStorageSyncOptions["serverScripts"];
+  git?: LocalStorageSyncOptions["git"];
 };
 
 export function initializeNoyaSingleton<
@@ -106,6 +107,7 @@ export function initializeNoyaSingleton<
       offlineStorageKey,
       debug: managerOptions?.debug,
       serverScripts: managerOptions?.serverScripts,
+      git: managerOptions?.git,
       policyAuthContext,
     });