@1agh/maude 1.0.11 → 1.3.0

package/apps/studio/client/panels/SyncPanel.jsx

@@ -14,6 +14,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { safeDetail, safeName, syncPresentation } from '../../sync/presentation.ts';
+import { TeamProjectsDialog } from './TeamProjects.jsx';
+import SourceConflictPanel from './SourceConflictPanel.jsx';
+import { isNativeApp } from '../github.js';
 
 /**
  * How long Resync stays disabled after a cycle finishes.
@@ -98,6 +101,39 @@ function readFiles(raw) {
   return raw;
 }
 
+/**
+ * The seed progress model, or null when absent/untrustworthy.
+ *
+ * Absent is the norm on an older dev-server, and this panel must render
+ * exactly as it did before when it is — every field here is additive.
+ */
+function readProgress(raw) {
+  if (!raw || typeof raw !== 'object') return null;
+  if (![raw.tracked, raw.delivered, raw.remaining].every(isCount)) return null;
+  if (typeof raw.phase !== 'string') return null;
+  const blocked = Array.isArray(raw.blocked)
+    ? raw.blocked.filter((b) => b && typeof b.class === 'string' && isCount(b.count))
+    : [];
+  return { ...raw, blocked };
+}
+
+/** One sentence per phase, in the user's terms — never the machine's. */
+const PHASE_TEXT = {
+  scanning: 'Looking through the project…',
+  seeding: null, // the counts say it better than a sentence would
+  paused: 'Paused — nothing is lost; this resumes by itself.',
+  blocked: 'Nothing is moving on its own — the files below need a decision.',
+  converged: 'Everything is up to date.',
+};
+
+/** What each wall means, and what a person can do about it. */
+const BLOCKED_TEXT = {
+  'too-large': 'too big for this workspace',
+  quota: "this hour's upload allowance is used up",
+  unreachable: 'the workspace could not be reached',
+  refused: 'the workspace would not take them',
+};
+
 /** Consent-class notices (feature-before-first-external-users Task 1), or []
  *  when the shape can't be trusted. Absent is the norm — the payload carries
  *  `notices` only when a boot raised one (shared-doc ON, TSX bodies). */
@@ -226,6 +262,50 @@ export default function SyncPanel({
   onClose,
 }) {
   const p = syncPresentation(status, { project });
+  // Plan T20/T22 — a refused workspace on the desktop is usually a sign-in that
+  // ran out. Signing in again re-mints the credential and reopens the same copy.
+  const [signInAgain, setSignInAgain] = useState(false);
+  // Plan T19 — "Download everything for offline".
+  const [offline, setOffline] = useState('');
+  const [offlineBusy, setOfflineBusy] = useState(false);
+  async function prepareOffline() {
+    setOfflineBusy(true);
+    setOffline('');
+    try {
+      const r = await fetch('/_api/sync/offline', { method: 'POST' });
+      const j = await r.json().catch(() => ({}));
+      if (!j.ok) setOffline(j.error || 'Could not download the project right now.');
+      else if (j.complete) setOffline(`Everything is on this device${j.pulled ? ` — ${j.pulled} file${j.pulled === 1 ? '' : 's'} came down` : ''}.`);
+      else setOffline(`${j.pulled} file${j.pulled === 1 ? '' : 's'} came down; ${j.failed} still to come — Maude keeps trying.`);
+    } catch {
+      setOffline('Maude isn’t reachable right now.');
+    } finally {
+      setOfflineBusy(false);
+    }
+  }
+  // Plan T28 — the conflict being resolved (a canvas slug), or null.
+  const [resolving, setResolving] = useState(null);
+  // Plan T16 — the person's decision on an unfinished AI edit.
+  const [aiBusy, setAiBusy] = useState('');
+  const [aiNote, setAiNote] = useState('');
+  const aiHeld = status?.aiAction?.state === 'held' ? status.aiAction : null;
+  async function resolveAi(choice) {
+    setAiBusy(choice);
+    setAiNote('');
+    try {
+      const r = await fetch('/_api/project/ai-action', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ choice }),
+      });
+      const j = await r.json().catch(() => ({}));
+      if (!j.ok) setAiNote(j.error || (j.code ? `The project refused it (${j.code}).` : 'That did not work.'));
+    } catch {
+      setAiNote('Maude isn’t reachable right now.');
+    } finally {
+      setAiBusy('');
+    }
+  }
   const [resyncing, setResyncing] = useState(false);
   const [cooling, setCooling] = useState(false);
   const [note, setNote] = useState('');
@@ -279,6 +359,7 @@ export default function SyncPanel({
   const files = readFiles(status?.files);
 
   const delivery = useMemo(() => readDelivery(status?.files?.delivery), [status?.files?.delivery]);
+  const progress = useMemo(() => readProgress(status?.files?.progress), [status?.files?.progress]);
 
   // Sync settings (Task 2) — fetched once on mount; `settings` stays null when
   // no hub is linked, which is also the render gate for the whole section.
@@ -496,6 +577,18 @@ export default function SyncPanel({
               continuous now, so nobody needs this button to pick up a new
               canvas — it is a repair tool, and repairing a cell is the hub's
               job. See `.ai/logs/rca/issue-cloud-assets-open-findings.md` §5. */}
+          {!cloud && status?.files && (
+            <button
+              type="button"
+              className="sp-resync"
+              data-testid="sync-offline"
+              onClick={prepareOffline}
+              disabled={offlineBusy}
+              title="Download every file of the project to this device now, to work offline"
+            >
+              {offlineBusy ? 'Downloading…' : 'Download all'}
+            </button>
+          )}
           {!cloud && (
             <button
               type="button"
@@ -517,6 +610,11 @@ export default function SyncPanel({
             {safeDetail(note, '')}
           </div>
         )}
+        {offline && (
+          <div className="sp-resync-note" role="status" aria-live="polite" data-testid="sync-offline-note">
+            {safeDetail(offline, '')}
+          </div>
+        )}
         {/* The one-rule sentence, live — same aria pattern as the rail note:
             a polite announcement when the phase changes, never a focus steal. */}
         {p && (
@@ -526,8 +624,26 @@ export default function SyncPanel({
               {p.title}
               {p.next ? ` ${p.next}` : ''}
             </span>
+            {p.phase === 'refused' && !cloud && isNativeApp() && (
+              <button
+                type="button"
+                className="btn btn--sm"
+                data-testid="sync-signin-again"
+                onClick={() => setSignInAgain(true)}
+              >
+                Sign in again
+              </button>
+            )}
           </div>
         )}
+        {resolving && <SourceConflictPanel slug={resolving} onClose={() => setResolving(null)} />}
+        {signInAgain && (
+          <TeamProjectsDialog
+            title="Sign in again"
+            initialServer={typeof status?.url === 'string' ? status.url : ''}
+            onClose={() => setSignInAgain(false)}
+          />
+        )}
       </div>
 
       <div className="sp-body">
@@ -535,11 +651,42 @@ export default function SyncPanel({
             (shared-doc buffer, TSX bodies) and used to live only in a
             console.warn a desktop user never sees. Dismiss is per (notice,
             hub) on this machine — a new hub resurfaces them by design. */}
+        {aiHeld && (
+          <section aria-label="Unfinished AI edit" className="sp-notice sp-ai-held" data-testid="sync-ai-held">
+            <p className="sp-notice-text">
+              <b>An unfinished AI edit is kept on this device.</b>{' '}
+              {safeDetail(aiHeld.label, 'AI edit')} changed{' '}
+              {Array.isArray(aiHeld.canvases) ? aiHeld.canvases.length : 0} canvas
+              {Array.isArray(aiHeld.canvases) && aiHeld.canvases.length === 1 ? '' : 'es'} and did not finish,
+              so nothing of it is shared yet. Publish it as it stands, or discard it — the
+              discarded bytes stay in recovery.
+            </p>
+            <div className="sp-ai-actions">
+              <button type="button" className="btn btn--sm btn--primary" disabled={!!aiBusy} onClick={() => resolveAi('publish')} data-testid="sync-ai-publish">
+                {aiBusy === 'publish' ? 'Publishing…' : 'Publish'}
+              </button>
+              <button type="button" className="btn btn--sm btn--ghost" disabled={!!aiBusy} onClick={() => resolveAi('discard')} data-testid="sync-ai-discard">
+                {aiBusy === 'discard' ? 'Discarding…' : 'Discard'}
+              </button>
+            </div>
+            {aiNote && <p className="sp-notice-text" role="alert">{safeDetail(aiNote, '')}</p>}
+          </section>
+        )}
         {notices.length > 0 && (
           <section aria-label="Notices" data-testid="sync-notices">
             {notices.map((n) => (
               <div key={n.id} className="sp-notice" data-testid={`sync-notice-${n.id}`}>
                 <p className="sp-notice-text">{safeNoticeText(n.text)}</p>
+                {n.id.startsWith('source-conflict-') && (
+                  <button
+                    type="button"
+                    className="btn btn--sm"
+                    data-testid={`sync-resolve-${n.id.slice('source-conflict-'.length)}`}
+                    onClick={() => setResolving(n.id.slice('source-conflict-'.length))}
+                  >
+                    Resolve…
+                  </button>
+                )}
                 <button
                   type="button"
                   className="sp-notice-dismiss"
@@ -648,17 +795,98 @@ export default function SyncPanel({
         {files && (
           <section aria-label="Project files" data-testid="sync-files">
             <div className="gp-sect-label">
-              project files <span className="gp-group-count">{files.synced}</span>
-            </div>
-            <div className="sp-assets-line">
-              {`${files.synced} synced` + (files.pulled > 0 ? ` · ${files.pulled} pulled` : '')}
+              project files{' '}
+              <span className="gp-group-count">{progress ? progress.tracked : files.synced}</span>
             </div>
+            {progress ? (
+              <>
+                <div className="sp-progress-track" data-testid="sync-files-progress">
+                  <div
+                    className="sp-progress-fill"
+                    style={{
+                      width: `${
+                        progress.tracked > 0
+                          ? Math.min(100, Math.round((progress.delivered / progress.tracked) * 100))
+                          : 100
+                      }%`,
+                    }}
+                  />
+                </div>
+                <div className="sp-assets-line" data-testid="sync-files-remaining">
+                  {`${progress.delivered} of ${progress.tracked} delivered`}
+                  {progress.remaining > 0 ? ` · ${progress.remaining} waiting` : ''}
+                </div>
+                {PHASE_TEXT[progress.phase] && (
+                  <div className="sp-assets-line" data-testid="sync-files-phase">
+                    {PHASE_TEXT[progress.phase]}
+                  </div>
+                )}
+                {progress.passCapped && progress.remaining > 0 && (
+                  <div className="sp-assets-line">
+                    More is on the way — the last pass reached its limit and picks up where it
+                    left off.
+                  </div>
+                )}
+                {progress.blocked.map((b) => (
+                  <div
+                    key={b.class}
+                    className="sp-assets-retry"
+                    data-testid={`sync-blocked-${b.class}`}
+                  >
+                    {b.count} file{b.count === 1 ? '' : 's'} —{' '}
+                    {BLOCKED_TEXT[b.class] ?? 'the workspace would not take them'}.
+                  </div>
+                ))}
+                {/*
+                  THE RAW COUNTERS STAY. A panel derived from the same source it
+                  displays cannot be cross-checked, and DDR-214's whole lesson is
+                  that a status surface has to be falsifiable — so the numbers the
+                  passes actually reported remain here to disagree with.
+                */}
+                <div className="sp-assets-line sp-raw-counters">
+                  {`raw: ${files.synced} synced`}
+                  {files.pushed ? ` · ${files.pushed} pushed` : ''}
+                  {files.pulled > 0 ? ` · ${files.pulled} pulled` : ''}
+                </div>
+              </>
+            ) : (
+              <div className="sp-assets-line">
+                {`${files.synced} synced` + (files.pulled > 0 ? ` · ${files.pulled} pulled` : '')}
+              </div>
+            )}
             {files.conflicts > 0 && (
               <div className="sp-assets-retry" data-testid="sync-files-conflicts">
                 {files.conflicts} conflict{files.conflicts === 1 ? '' : 's'} — the older copies are
                 kept in Trash, below.
               </div>
             )}
+            {/*
+              A PAUSE IS NOT A FAILURE, and it gets its own words. The
+              workspace asked us to slow down; nothing is wrong, nothing is
+              lost, and the only correct action is to wait — which is exactly
+              what a person cannot infer from a count of failures (issue #109).
+              It comes FIRST because it explains the failure line below it.
+            */}
+            {files.rateLimited && (
+              <div className="sp-assets-retry" data-testid="sync-files-rate-limited">
+                <strong>syncing paused for a moment.</strong> The workspace asked this machine to
+                slow down.{' '}
+                {files.rateLimited.waiting > 0
+                  ? `${files.rateLimited.waiting} file${files.rateLimited.waiting === 1 ? '' : 's'} still on the way — nothing is lost, they arrive when the pause lifts.`
+                  : 'It resumes by itself.'}
+              </div>
+            )}
+            {/*
+              AND A FAILURE IS NOT A SYNC. This had no field at all, so a pass
+              that refused every file rendered as "N synced" and a person saw
+              broken images with the cause only in a terminal they never open.
+            */}
+            {files.failed > 0 && !files.rateLimited && (
+              <div className="sp-assets-retry" data-testid="sync-files-failed">
+                {files.failed} file{files.failed === 1 ? '' : 's'} did not come through on the last
+                check — sync retries them by itself. The list is below.
+              </div>
+            )}
             {/*
               A HELD BREAKER, said out loud. These used to exist only as a
               console.warn, which on a machine whose user never opens a
@@ -717,6 +945,12 @@ export default function SyncPanel({
                     </li>
                   ))}
                   {delivery.fine.length > 200 && <li>…and {delivery.fine.length - 200} more</li>}
+                  {files.deliveryTruncated > 0 && (
+                    <li className="sp-truncated">
+                      …and {files.deliveryTruncated} more not listed here — the list is capped so
+                      the files that need attention always fit.
+                    </li>
+                  )}
                 </ul>
               </details>
             )}