@jsonpages/cli 3.0.47 → 3.0.49

package/assets/src_tenant_alpha.sh

@@ -439,13 +439,14 @@ END_OF_FILE_CONTENT
 echo "Creating src/components/SaveDrawer/SaveDrawer.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/SaveDrawer.tsx"
 /**
- * SaveDrawer — Identical to prototype DopaDrawer.
+ * SaveDrawer — Identical to prototype DopaDrawer (dopa-save).
  * Bottom sheet for Cloud save; driven by real SSE (save-stream).
- * Done: "Refresh page" + "Chiudi". Error: "Annulla" + "Retry".
+ * Done: countdown 3s + "Chiusura in Xs" + Chiudi + Open site → auto-close. Error: Annulla + Retry.
  */
 import { useState } from 'react';
 import { cn } from '@/lib/utils';
 import { Separator } from '@/components/ui/separator';
+import { Progress } from '@/components/ui/progress';
 import { DeployNode } from './DeployNode';
 import { DeployConnector } from './DeployConnector';
 import { Particles, BuildBars, SuccessBurst, ElapsedTimer } from './Visuals';
@@ -464,7 +465,18 @@ export interface SaveDrawerProps {
 export function SaveDrawer({ cloudUrl, apiKey, state, slug, onClose }: SaveDrawerProps) {
   const [burst, setBurst] = useState(false);
 
-  const { phase, currentStep, stepState, doneSteps, progress, retry } = useSaveStream({
+  const {
+    phase,
+    currentStep,
+    stepState,
+    doneSteps,
+    progress,
+    deployUrl,
+    countdown,
+    logs,
+    errorMessage,
+    retry,
+  } = useSaveStream({
     cloudUrl,
     apiKey,
     state,
@@ -567,8 +579,12 @@ export function SaveDrawer({ cloudUrl, apiKey, state, slug, onClose }: SaveDrawe
                     </div>
                   ) : isError ? (
                     <>
-                      <p className="text-base font-semibold text-white leading-snug">Deploy failed at build.</p>
-                      <p className="text-sm text-white/35 mt-0.5">Check your Vercel logs or retry below</p>
+                      <p className="text-base font-semibold text-white leading-snug">
+                        Deploy failed at build.
+                      </p>
+                      <p className="text-sm text-white/35 mt-0.5">
+                        {errorMessage ?? 'Check your Vercel logs or retry below'}
+                      </p>
                     </>
                   ) : currentStep ? (
                     <>
@@ -580,7 +596,24 @@ export function SaveDrawer({ cloudUrl, apiKey, state, slug, onClose }: SaveDrawe
               </div>
 
               <div className="flex flex-col items-end gap-1.5 shrink-0 ml-6">
-                {!isDone && <ElapsedTimer running={isRunning} />}
+                {isDone ? (
+                  <div className="flex flex-col items-end gap-1.5 save-fade-up">
+                    <span
+                      className="font-mono text-xs text-emerald-400 font-semibold"
+                      aria-live="polite"
+                    >
+                      Chiusura in {countdown}s
+                    </span>
+                    <div className="w-24 h-0.5 bg-white/10 rounded-full overflow-hidden">
+                      <div
+                        className="h-full bg-emerald-400 rounded-full countdown-bar"
+                        style={{ boxShadow: '0 0 6px #34d39988' }}
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <ElapsedTimer running={isRunning} />
+                )}
               </div>
             </div>
 
@@ -608,12 +641,21 @@ export function SaveDrawer({ cloudUrl, apiKey, state, slug, onClose }: SaveDrawe
 
             <Separator className="mb-5 bg-white/[0.06]" />
 
+            {isRunning && currentStep && (logs[currentStep.id]?.length ?? 0) > 0 && (
+              <div className="mb-4 max-h-16 overflow-y-auto rounded-md bg-white/[0.04] px-3 py-2 font-mono text-[11px] text-white/50 leading-relaxed">
+                {logs[currentStep.id]?.map((line, i) => (
+                  <div key={i}>{line}</div>
+                ))}
+              </div>
+            )}
+
             <div className="flex items-center gap-4">
-              <div className="flex-1 h-[2px] bg-white/[0.06] rounded-full overflow-hidden">
-                <div
-                  className="h-full rounded-full transition-all duration-300"
-                  style={{
-                    width: `${progress}%`,
+              <div className="flex-1">
+                <Progress
+                  value={progress}
+                  className="h-[2px] bg-white/[0.06]"
+                  indicatorClassName="transition-none"
+                  indicatorStyle={{
                     background: `linear-gradient(90deg, ${DEPLOY_STEPS[0].color}, ${activeColor})`,
                   }}
                 />
@@ -624,17 +666,19 @@ export function SaveDrawer({ cloudUrl, apiKey, state, slug, onClose }: SaveDrawe
                   <div className="flex gap-2 save-fade-up">
                     <button
                       type="button"
-                      onClick={() => window.location.reload()}
-                      className="px-3 py-1.5 rounded-md bg-emerald-400 text-zinc-900 text-sm font-semibold hover:bg-emerald-300"
+                      onClick={onClose}
+                      className="h-9 rounded-md px-3 inline-flex items-center justify-center text-sm font-medium border border-white/20 bg-white/5 text-white/90 hover:bg-white/10 transition-colors"
                     >
-                      Refresh page
+                      Chiudi
                     </button>
                     <button
                       type="button"
-                      onClick={onClose}
-                      className="px-3 py-1.5 rounded-md border border-white/20 text-white/90 text-sm hover:bg-white/10"
+                      onClick={() =>
+                        deployUrl ? window.open(deployUrl, '_blank') : window.location.reload()
+                      }
+                      className="h-9 rounded-md px-3 inline-flex items-center justify-center gap-1.5 text-sm font-semibold bg-emerald-400 text-zinc-900 hover:bg-emerald-300 transition-colors"
                     >
-                      Chiudi
+                      <span aria-hidden>↗</span> Open site
                     </button>
                   </div>
                 )}
@@ -644,14 +688,14 @@ export function SaveDrawer({ cloudUrl, apiKey, state, slug, onClose }: SaveDrawe
                     <button
                       type="button"
                       onClick={onClose}
-                      className="px-3 py-1.5 rounded-md text-white/80 text-sm hover:bg-white/10"
+                      className="h-9 rounded-md px-3 inline-flex items-center justify-center text-sm font-medium text-white/80 hover:bg-white/10 transition-colors"
                     >
                       Annulla
                     </button>
                     <button
                       type="button"
                       onClick={retry}
-                      className="px-3 py-1.5 rounded-md bg-red-500/90 text-white text-sm font-medium hover:bg-red-500"
+                      className="h-9 rounded-md px-3 inline-flex items-center justify-center text-sm font-medium bg-red-600 text-white hover:bg-red-500 transition-colors"
                     >
                       Retry
                     </button>
@@ -875,7 +919,9 @@ END_OF_FILE_CONTENT
 echo "Creating src/components/SaveDrawer/useSaveStream.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/useSaveStream.ts"
 /**
- * useSaveStream — Same API as prototype useSaveOrchestrator, but driven by real SSE from save-stream.
+ * useSaveStream — Same API as prototype useSaveOrchestrator, driven by SSE from save-stream.
+ * Event handling aligned with CreateTenantFlow (parseSSE, step/log/error/done, post-loop, try/catch).
+ * Payload is read from a ref at effect start so the effect does not depend on state.page (avoids re-run and stream kill).
  */
 import { useState, useCallback, useEffect, useRef } from 'react';
 import type { ProjectState } from '@jsonpages/core';
@@ -913,15 +959,25 @@ export function useSaveStream({
   apiKey,
   state,
   slug,
-  onClose: _onClose,
+  onClose,
 }: UseSaveStreamOptions) {
   const [phase, setPhase] = useState<DeployPhase>('running');
   const [doneSteps, setDoneSteps] = useState<StepId[]>([]);
   const [activeStepId, setActiveStepId] = useState<StepId | null>('commit');
   const [progress, setProgress] = useState(0);
+  const [deployUrl, setDeployUrl] = useState<string | null>(null);
+  const [countdown, setCountdown] = useState(3);
+  const [logs, setLogs] = useState<Record<string, string[]>>({});
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const progressRef = useRef(0);
   const [runId, setRunId] = useState(0);
 
+  const payloadRef = useRef<{ path: string; content: unknown; message: string } | null>(null);
+
+  const addLog = useCallback((stepId: string, message: string) => {
+    setLogs((prev) => ({ ...prev, [stepId]: [...(prev[stepId] || []), message] }));
+  }, []);
+
   const stepState = useCallback(
     (i: number): StepState => {
       const step = DEPLOY_STEPS[i];
@@ -937,81 +993,116 @@ export function useSaveStream({
 
   useEffect(() => {
     let cancelled = false;
+    let gotDone = false;
     setPhase('running');
     setDoneSteps([]);
     setActiveStepId('commit');
     setProgress(0);
+    setDeployUrl(null);
+    setCountdown(3);
+    setLogs({});
+    setErrorMessage(null);
     progressRef.current = 0;
 
-    const url = `${cloudUrl.replace(/\/$/, '')}/save-stream`;
+    payloadRef.current = {
+      path: `src/data/pages/${slug}.json`,
+      content: state.page,
+      message: `Content update for ${slug} via Visual Editor`,
+    };
+
+    const base = cloudUrl.replace(/\/$/, '');
+    const url = base.includes('/api/v1')
+      ? `${base}/save-stream`
+      : `${base}/api/v1/save-stream`;
 
     const run = async () => {
-      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`,
-        }),
-      });
+      try {
+        const payload = payloadRef.current;
+        if (!payload || cancelled) return;
 
-      if (!res.ok || !res.body) {
-        if (!cancelled) setPhase('error');
-        return;
-      }
+        const res = await fetch(url, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${apiKey}`,
+          },
+          body: JSON.stringify(payload),
+        });
 
-      const reader = res.body.getReader();
-      const dec = new TextDecoder();
-      let buffer = '';
+        if (!res.ok || !res.body) {
+          if (!cancelled) {
+            setPhase('error');
+            setErrorMessage(res.status ? `HTTP ${res.status}` : 'Request failed');
+          }
+          return;
+        }
 
-      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() || '';
+        const reader = res.body.getReader();
+        const dec = new TextDecoder();
+        let buffer = '';
 
-        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 StepId | undefined;
-                const status = data.status as string | undefined;
-                if (id && status === 'running') {
-                  setActiveStepId(id);
-                  const idx = DEPLOY_STEPS.findIndex((s) => s.id === id);
-                  if (idx >= 0) progressRef.current = Math.round((idx / DEPLOY_STEPS.length) * 100);
-                  setProgress(progressRef.current);
-                }
-                if (id && status === 'done') {
-                  setDoneSteps((prev) => [...prev, id].filter(Boolean));
+        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 StepId | undefined;
+                  const status = data.status as string | undefined;
+                  if (id && status === 'running') {
+                    setActiveStepId(id);
+                    const idx = DEPLOY_STEPS.findIndex((s) => s.id === id);
+                    if (idx >= 0) progressRef.current = Math.round((idx / DEPLOY_STEPS.length) * 100);
+                    setProgress(progressRef.current);
+                  }
+                  if (id && status === 'done') {
+                    setDoneSteps((prev) => [...prev, id].filter(Boolean));
+                    setActiveStepId(null);
+                    const idx = DEPLOY_STEPS.findIndex((s) => s.id === id);
+                    progressRef.current = idx >= 0 ? Math.round(((idx + 1) / DEPLOY_STEPS.length) * 100) : 100;
+                    setProgress(progressRef.current);
+                  }
+                } else if (ev === 'log' && data.stepId && data.message) {
+                  addLog(data.stepId as string, data.message as string);
+                } else if (ev === 'error') {
+                  if (!cancelled) {
+                    setErrorMessage((data.message as string) || 'Errore');
+                    setPhase('error');
+                  }
+                  return;
+                } else if (ev === 'done') {
+                  gotDone = true;
+                  setDeployUrl((data.deployUrl as string) ?? null);
+                  setProgress(100);
+                  setDoneSteps(['commit', 'push', 'build', 'live']);
                   setActiveStepId(null);
-                  const idx = DEPLOY_STEPS.findIndex((s) => s.id === id);
-                  progressRef.current = idx >= 0 ? Math.round(((idx + 1) / DEPLOY_STEPS.length) * 100) : 100;
-                  setProgress(progressRef.current);
+                  setPhase('done');
+                  return;
                 }
-              } else if (ev === 'error') {
-                setPhase('error');
-                return;
-              } else if (ev === 'done') {
-                setProgress(100);
-                setDoneSteps(['commit', 'push', 'build', 'live']);
-                setActiveStepId(null);
-                setPhase('done');
-                return;
+              } catch {
+                // ignore parse errors
               }
-            } catch {
-              // ignore
             }
           }
         }
+
+        if (!cancelled && !gotDone) {
+          setErrorMessage('Operazione interrotta o build non completato.');
+          setPhase('error');
+        }
+      } catch (e) {
+        if (!cancelled) {
+          setErrorMessage(e instanceof Error ? e.message : 'Errore');
+          setPhase('error');
+        }
       }
     };
 
@@ -1019,7 +1110,23 @@ export function useSaveStream({
     return () => {
       cancelled = true;
     };
-  }, [cloudUrl, apiKey, slug, state.page, runId]);
+  }, [cloudUrl, apiKey, slug, runId, addLog]);
+
+  useEffect(() => {
+    if (phase !== 'done') return;
+    setCountdown(3);
+    const iv = setInterval(() => {
+      setCountdown((s) => {
+        if (s <= 1) {
+          clearInterval(iv);
+          onClose();
+          return 0;
+        }
+        return s - 1;
+      });
+    }, 1000);
+    return () => clearInterval(iv);
+  }, [phase, onClose]);
 
   const retry = useCallback(() => setRunId((r) => r + 1), []);
 
@@ -1029,6 +1136,10 @@ export function useSaveStream({
     stepState,
     doneSteps,
     progress,
+    deployUrl,
+    countdown,
+    logs,
+    errorMessage,
     retry,
   };
 }
@@ -3871,6 +3982,47 @@ export { Label }
 
 
 
+END_OF_FILE_CONTENT
+echo "Creating src/components/ui/progress.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/ui/progress.tsx"
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  value?: number | null;
+  indicatorClassName?: string;
+  indicatorStyle?: React.CSSProperties;
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  ({ className, value, indicatorClassName, indicatorStyle, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="progressbar"
+      aria-valuenow={value ?? 0}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      className={cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', className)}
+      {...props}
+    >
+      <div
+        className={cn(
+          'h-full min-w-full bg-primary transition-all duration-700 ease-out',
+          indicatorClassName
+        )}
+        style={{
+          width: '100%',
+          transform: `translateX(-${100 - (value ?? 0)}%)`,
+          ...indicatorStyle,
+        }}
+      />
+    </div>
+  )
+);
+Progress.displayName = 'Progress';
+
+export { Progress };
+
 END_OF_FILE_CONTENT
 echo "Creating src/components/ui/select.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/select.tsx"
@@ -5340,6 +5492,15 @@ html {
   to { stroke-dashoffset: 0; }
 }
 
+/* Countdown drain — 3s linear (dopa-save identical) */
+.countdown-bar {
+  animation: countdown-drain 3s linear forwards;
+}
+@keyframes countdown-drain {
+  from { width: 100%; }
+  to   { width: 0%;   }
+}
+
 
 END_OF_FILE_CONTENT
 mkdir -p "src/lib"

package/package.json

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