@jsonpages/cli 3.0.45 → 3.0.46

package/assets/src_tenant_alpha.sh

@@ -41,6 +41,7 @@ import { addSectionConfig } from '@/lib/addSectionConfig';
 import { getHydratedData } from '@/lib/draftStorage';
 import type { JsonPagesConfig, ProjectState } from '@jsonpages/core';
 import type { SiteConfig, ThemeConfig, MenuConfig } from '@/types';
+import { SaveDrawer } from '@/components/SaveDrawer';
 
 import siteData from '@/data/config/site.json';
 import themeData from '@/data/config/theme.json';
@@ -69,6 +70,7 @@ function getInitialData() {
 function App() {
   const [{ pages, siteConfig }] = useState(getInitialData);
   const [assetsManifest, setAssetsManifest] = useState<LibraryImageEntry[]>([]);
+  const [saveDrawer, setSaveDrawer] = useState<{ state: ProjectState; slug: string } | null>(null);
 
   useEffect(() => {
     // In Cloud mode, listing assets might be different or disabled for MVP
@@ -78,11 +80,7 @@ function App() {
       .then((list: LibraryImageEntry[]) => setAssetsManifest(Array.isArray(list) ? list : []))
       .catch(() => setAssetsManifest([]));
   }, []);
-  
-console.log("🔍 DEBUG ENV:", {
-  URL: import.meta.env.VITE_JSONPAGES_CLOUD_URL,
-  KEY: import.meta.env.VITE_JSONPAGES_API_KEY ? "PRESENT" : "MISSING"
-});
+
   const config: JsonPagesConfig = {
     tenantId: TENANT_ID,
     registry: ComponentRegistry as JsonPagesConfig['registry'],
@@ -96,29 +94,9 @@ console.log("🔍 DEBUG ENV:", {
     persistence: {
       async saveToFile(state: ProjectState, slug: string): Promise<void> {
         
-        // ☁️ SCENARIO A: CLOUD BRIDGE (Production)
+        // ☁️ SCENARIO A: CLOUD BRIDGE (Production) — open SaveDrawer, stream save-stream
         if (CLOUD_API_URL && CLOUD_API_KEY) {
-          console.log(`☁️ Saving ${slug} via Cloud Bridge...`);
-          
-          const res = await fetch(`${CLOUD_API_URL}/save`, {
-            method: 'POST',
-            headers: { 
-              'Content-Type': 'application/json',
-              'Authorization': `Bearer ${CLOUD_API_KEY}`
-            },
-            body: JSON.stringify({ 
-              // Mapping logical slug to physical path in repo
-              path: `src/data/pages/${slug}.json`, 
-              // We save the page config specifically
-              content: state.page, 
-              message: `Content update for ${slug} via Visual Editor`
-            }),
-          });
-
-          if (!res.ok) {
-            const err = await res.json().catch(() => ({}));
-            throw new Error(err.error || `Cloud save failed: ${res.status}`);
-          }
+          setSaveDrawer({ state, slug });
           return;
         }
 
@@ -164,7 +142,20 @@ console.log("🔍 DEBUG ENV:", {
     },
   };
 
-  return <JsonPagesEngine config={config} />;
+  return (
+    <>
+      <JsonPagesEngine config={config} />
+      {saveDrawer && CLOUD_API_URL && CLOUD_API_KEY && (
+        <SaveDrawer
+          cloudUrl={CLOUD_API_URL}
+          apiKey={CLOUD_API_KEY}
+          state={saveDrawer.state}
+          slug={saveDrawer.slug}
+          onClose={() => setSaveDrawer(null)}
+        />
+      )}
+    </>
+  );
 }
 
 export default App;
@@ -301,6 +292,279 @@ export const NotFound: React.FC = () => {
 
 
 
+END_OF_FILE_CONTENT
+mkdir -p "src/components/SaveDrawer"
+echo "Creating src/components/SaveDrawer/SaveDrawer.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/SaveDrawer.tsx"
+/**
+ * SaveDrawer — Cloud save flow with real SSE (commit → push → build → live).
+ * Opens when user saves in Cloud mode; consumes POST save-stream and shows
+ * the four steps. On done: "Refresh page" + "Close" only (no redirect).
+ */
+import { useState, useEffect, useCallback } from 'react';
+import type { ProjectState } from '@jsonpages/core';
+
+const SAVE_STEPS = [
+  { id: 'commit' as const, label: 'Commit' },
+  { id: 'push' as const, label: 'Push' },
+  { id: 'build' as const, label: 'Build' },
+  { id: 'live' as const, label: 'Live' },
+];
+
+function parseSSE(buffer: string): { event: string; data: string }[] {
+  const lines = buffer.split('\n');
+  const out: { event: string; data: string }[] = [];
+  let event = 'message';
+  let data = '';
+  for (const line of lines) {
+    if (line.startsWith('event:')) event = line.slice(6).trim();
+    else if (line.startsWith('data:')) data = line.slice(5).trim();
+    else if (line === '' && data) {
+      out.push({ event, data });
+      data = '';
+      event = 'message';
+    }
+  }
+  if (data) out.push({ event, data });
+  return out;
+}
+
+export interface SaveDrawerProps {
+  cloudUrl: string;
+  apiKey: string;
+  state: ProjectState;
+  slug: string;
+  onClose: () => void;
+}
+
+export function SaveDrawer({ cloudUrl, apiKey, state, slug, onClose }: SaveDrawerProps) {
+  const [completedSteps, setCompletedSteps] = useState<string[]>([]);
+  const [activeStepId, setActiveStepId] = useState<string | null>('commit');
+  const [logs, setLogs] = useState<Record<string, string[]>>({});
+  const [phase, setPhase] = useState<'running' | 'done' | 'error'>('running');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const addLog = useCallback((stepId: string, message: string) => {
+    setLogs((prev) => ({ ...prev, [stepId]: [...(prev[stepId] || []), message] }));
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    let gotDone = false;
+
+    const run = async () => {
+      const url = `${cloudUrl.replace(/\/$/, '')}/save-stream`;
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${apiKey}`,
+        },
+        body: JSON.stringify({
+          path: `src/data/pages/${slug}.json`,
+          content: state.page,
+          message: `Content update for ${slug} via Visual Editor`,
+        }),
+      });
+
+      if (!res.ok || !res.body) {
+        const data = await res.json().catch(() => ({}));
+        setErrorMessage((data as { error?: string }).error || `Request failed: ${res.status}`);
+        setPhase('error');
+        return;
+      }
+
+      const reader = res.body.getReader();
+      const dec = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { value, done: streamDone } = await reader.read();
+        if (streamDone || cancelled) break;
+        buffer += dec.decode(value, { stream: true });
+        const parts = buffer.split('\n\n');
+        buffer = parts.pop() || '';
+
+        for (const part of parts) {
+          const parsed = parseSSE(part + '\n\n');
+          for (const { event: ev, data: raw } of parsed) {
+            if (cancelled) return;
+            try {
+              const data = JSON.parse(raw) as Record<string, unknown>;
+              if (ev === 'step') {
+                const id = data.id as string | undefined;
+                const status = data.status as string | undefined;
+                if (id && status === 'running') setActiveStepId(id);
+                if (id && status === 'done') {
+                  setCompletedSteps((prev) => [...prev, id].filter(Boolean));
+                  setActiveStepId(null);
+                }
+              } else if (ev === 'log' && data.stepId && data.message) {
+                addLog(data.stepId as string, data.message as string);
+              } else if (ev === 'error') {
+                setErrorMessage((data.message as string) || 'Error');
+                setPhase('error');
+                return;
+              } else if (ev === 'done') {
+                gotDone = true;
+                setCompletedSteps((prev) => [...new Set([...prev, 'commit', 'push', 'build', 'live'])]);
+                setActiveStepId(null);
+                setPhase('done');
+                return;
+              }
+            } catch {
+              // ignore parse errors
+            }
+          }
+        }
+      }
+
+      if (!cancelled && !gotDone) {
+        setErrorMessage('Connection closed before completion');
+        setPhase('error');
+      }
+    };
+
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [cloudUrl, apiKey, state.page, slug, addLog]);
+
+  const progressPct =
+    phase === 'done' ? 100 : SAVE_STEPS.length > 0 ? Math.round((completedSteps.length / SAVE_STEPS.length) * 100) : 0;
+
+  const stepState = (id: string) => {
+    if (completedSteps.includes(id)) return 'done';
+    if (activeStepId === id) return 'active';
+    return 'pending';
+  };
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-40 bg-black/40 backdrop-blur-[2px]"
+        onClick={phase === 'done' || phase === 'error' ? onClose : undefined}
+        aria-hidden
+      />
+      <div
+        role="status"
+        aria-live="polite"
+        className="fixed inset-x-0 bottom-0 z-50 flex justify-center pb-6 px-4"
+        aria-label={phase === 'done' ? 'Save completed' : phase === 'error' ? 'Save failed' : 'Saving'}
+      >
+        <div
+          className="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-white/[0.07] bg-[hsl(222,18%,7%)] shadow-lg"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="relative z-10 px-6 pt-6 pb-5">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold text-white">
+                {phase === 'done' ? 'Content is live' : phase === 'error' ? 'Save failed' : 'Saving to Cloud'}
+              </h2>
+              {phase === 'running' && (
+                <span className="text-xs font-mono text-white/50">{completedSteps.length} / {SAVE_STEPS.length}</span>
+              )}
+            </div>
+
+            {phase === 'error' && errorMessage && (
+              <p className="text-sm text-red-400 mb-4">{errorMessage}</p>
+            )}
+
+            <div className="flex items-center gap-2 mb-4">
+              {SAVE_STEPS.map((step, i) => (
+                <div key={step.id} className="flex items-center flex-1">
+                  <div
+                    className={`flex items-center justify-center w-8 h-8 rounded-full border-2 shrink-0 ${
+                      stepState(step.id) === 'done'
+                        ? 'bg-emerald-500/20 border-emerald-500'
+                        : stepState(step.id) === 'active'
+                          ? 'bg-blue-500/20 border-blue-500'
+                          : 'bg-white/10 border-white/20'
+                    }`}
+                  >
+                    {stepState(step.id) === 'done' ? (
+                      <span className="text-emerald-400" aria-hidden>✓</span>
+                    ) : stepState(step.id) === 'active' ? (
+                      <span className="w-3 h-3 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" aria-hidden />
+                    ) : (
+                      <span className="text-xs text-white/40">{i + 1}</span>
+                    )}
+                  </div>
+                  <span
+                    className={`ml-2 text-xs font-medium truncate ${
+                      stepState(step.id) !== 'pending' ? 'text-white' : 'text-white/40'
+                    }`}
+                  >
+                    {step.label}
+                  </span>
+                  {i < SAVE_STEPS.length - 1 && (
+                    <div
+                      className={`flex-1 h-0.5 mx-2 min-w-[8px] ${
+                        stepState(step.id) === 'done' ? 'bg-emerald-500/50' : 'bg-white/10'
+                      }`}
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+
+            <div className="h-1 bg-white/10 rounded-full overflow-hidden mb-4">
+              <div
+                className="h-full bg-emerald-500 rounded-full transition-all duration-300"
+                style={{ width: `${progressPct}%` }}
+              />
+            </div>
+
+            {Object.keys(logs).length > 0 && (
+              <div className="mb-4 p-2 rounded bg-black/30 border border-white/10 font-mono text-xs text-white/60 space-y-0.5 max-h-20 overflow-y-auto">
+                {(logs[activeStepId || ''] || []).slice(-3).map((line, i) => (
+                  <div key={i}>$ {line}</div>
+                ))}
+              </div>
+            )}
+
+            <div className="flex items-center gap-2 justify-end">
+              {phase === 'done' && (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => window.location.reload()}
+                    className="px-4 py-2 rounded-lg bg-emerald-500 text-zinc-900 font-medium text-sm hover:bg-emerald-400"
+                  >
+                    Refresh page
+                  </button>
+                  <button
+                    type="button"
+                    onClick={onClose}
+                    className="px-4 py-2 rounded-lg border border-white/20 text-white/90 text-sm hover:bg-white/10"
+                  >
+                    Close
+                  </button>
+                </>
+              )}
+              {phase === 'error' && (
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="px-4 py-2 rounded-lg border border-white/20 text-white/90 text-sm hover:bg-white/10"
+                >
+                  Close
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/SaveDrawer/index.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/index.ts"
+export { SaveDrawer } from './SaveDrawer';
+
 END_OF_FILE_CONTENT
 mkdir -p "src/components/arch-layers"
 echo "Creating src/components/arch-layers/View.tsx..."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonpages/cli",
-  "version": "3.0.45",
+  "version": "3.0.46",
   "description": "The Sovereign CLI Engine for JsonPages.",
   "type": "module",
   "bin": {