@1agh/maude 0.41.0 → 0.43.0

package/apps/studio/client/export-center.jsx

@@ -0,0 +1,460 @@
+// export-center.jsx — background export notification center
+// (feature-background-export-notification-center).
+//
+//   useExportCenter()  → headless handle (hydrate + WS upsert + toast/panel state)
+//   <ExportBadge>      → menubar entry point (busy pulse + running/queued count)
+//   <ExportToast>       → completion notice (bottom-left, mirrors WhatsNewToast)
+//   <ExportPanel>       → job list (reuses the help-modal backdrop)
+//
+// Structurally a near-exact twin of whats-new.jsx, but driven by live WS
+// `export:job` pushes (via `upsert`, called from app.jsx's WS message handler)
+// instead of a static feed. Styling lives in client/styles/3-shell-maude.css
+// (`.st-exports`) and 4-components.css (`.st-export-*`).
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { isNativeApp, saveExport } from './github.js';
+
+const FORMAT_LABELS = {
+  png: 'PNG',
+  pdf: 'PDF',
+  svg: 'SVG',
+  html: 'HTML',
+  pptx: 'PPTX',
+  canva: 'Canva',
+  zip: 'ZIP',
+  mp4: 'MP4',
+  webm: 'WebM',
+  gif: 'GIF',
+};
+const SCOPE_LABELS = {
+  selection: 'Selection',
+  artboard: 'Artboard',
+  'canvas-as-separate': 'Canvas → separate',
+  'project-raw': 'Project (raw)',
+};
+
+async function fetchJobBytes(id) {
+  const r = await fetch(`/_api/export-jobs/download?id=${encodeURIComponent(id)}`);
+  if (!r.ok) return null;
+  const disp = r.headers.get('Content-Disposition') || '';
+  const filename = /filename="([^"]+)"/.exec(disp)?.[1] || null;
+  const blob = await r.blob();
+  return { blob, filename };
+}
+
+async function autoDownloadBlob(id, fallbackName) {
+  const got = await fetchJobBytes(id);
+  if (!got) return;
+  const filename = got.filename || fallbackName || 'export';
+  const url = URL.createObjectURL(got.blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+
+async function saveNative(id, fallbackName) {
+  const got = await fetchJobBytes(id);
+  if (!got) return null;
+  const filename = got.filename || fallbackName || 'export';
+  const bytes = Array.from(new Uint8Array(await got.blob.arrayBuffer()));
+  return saveExport(filename, bytes);
+}
+
+export function useExportCenter() {
+  const [jobs, setJobs] = useState(() => new Map());
+  const [panelOpen, setPanelOpen] = useState(false);
+  const [toastQueue, setToastQueue] = useState([]);
+  const [savingIds, setSavingIds] = useState(() => new Set());
+  const prevStatusRef = useRef(new Map());
+  // Dedup guards (not state — re-rendering on these changing would be
+  // pointless; they only gate one-shot side effects).
+  const finalizedRef = useRef(new Set()); // auto-download fires at most once per job
+  const startToastShownRef = useRef(new Set()); // "Exporting…" toast fires at most once per job
+
+  useEffect(() => {
+    let alive = true;
+    fetch('/_api/export-jobs')
+      .then((r) => r.json())
+      .then((j) => {
+        if (!alive) return;
+        const m = new Map();
+        for (const job of Array.isArray(j?.jobs) ? j.jobs : []) {
+          m.set(job.id, job);
+          // Hydration is a SNAPSHOT, not a live transition — seed both guards
+          // so a page (re)load never replays a toast / auto-download for a
+          // job that already reached this status before we opened.
+          prevStatusRef.current.set(job.id, job.status);
+          startToastShownRef.current.add(job.id);
+        }
+        setJobs(m);
+      })
+      .catch(() => {
+        /* offline / restart — the badge just stays empty until a push arrives */
+      });
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  const upsert = useCallback((job) => {
+    if (!job || typeof job.id !== 'string') return;
+    setJobs((prev) => {
+      const next = new Map(prev);
+      next.set(job.id, job);
+      return next;
+    });
+  }, []);
+
+  // One toast per job, morphing in place as the job's live status changes
+  // (queued/running → done/failed) rather than stacking a separate "started"
+  // and "finished" toast. Detects two kinds of transitions:
+  //   - first time a job is seen active (queued/running) → surfaces it so the
+  //     user knows it's running in the background right after the dialog closes.
+  //   - a done/failed transition → surfaces it (or refreshes it in place if
+  //     it's still the front-of-queue toast from the "started" step above).
+  useEffect(() => {
+    const prevStatus = prevStatusRef.current;
+    const toSurface = [];
+    const justFinished = [];
+    // Single pass — read `was` for every job BEFORE prevStatus gets mutated
+    // below, so both the toast + auto-download decisions see the real
+    // "did this change just now" transition, not an already-updated ref.
+    for (const job of jobs.values()) {
+      const was = prevStatus.get(job.id);
+      const isActive = job.status === 'queued' || job.status === 'running';
+      const isFinished = job.status === 'done' || job.status === 'failed';
+      if (was === undefined && isActive && !startToastShownRef.current.has(job.id)) {
+        startToastShownRef.current.add(job.id);
+        toSurface.push(job.id);
+      } else if (was !== job.status && isFinished) {
+        toSurface.push(job.id);
+        justFinished.push(job);
+      }
+    }
+    for (const job of jobs.values()) prevStatus.set(job.id, job.status);
+
+    if (toSurface.length) {
+      setToastQueue((q) => {
+        const merged = q.filter((id) => !toSurface.includes(id));
+        return [...toSurface, ...merged].slice(0, 8);
+      });
+    }
+
+    // Native (Tauri) never auto-pops the OS save dialog — it would interrupt
+    // whatever the user is doing elsewhere. Always an explicit "Save…" click.
+    if (isNativeApp() || !justFinished.length) return;
+    for (const job of justFinished) {
+      if (job.status !== 'done') continue;
+      if (finalizedRef.current.has(job.id)) continue;
+      // Focus-gated: avoids duplicate downloads when multiple tabs share one
+      // dev-server and both receive the same WS push.
+      if (!document.hasFocus()) continue;
+      finalizedRef.current.add(job.id);
+      void autoDownloadBlob(job.id, job.filename);
+    }
+  }, [jobs]);
+
+  const list = useMemo(
+    () =>
+      Array.from(jobs.values()).sort((a, b) => (b.createdAt || '').localeCompare(a.createdAt || '')),
+    [jobs]
+  );
+  const runningCount = list.filter((j) => j.status === 'running').length;
+  const queuedCount = list.filter((j) => j.status === 'queued').length;
+
+  const dismissToast = useCallback(() => setToastQueue((q) => q.slice(1)), []);
+  const openPanel = useCallback(() => setPanelOpen(true), []);
+  const closePanel = useCallback(() => setPanelOpen(false), []);
+
+  const withSaving = useCallback(async (job, fn) => {
+    setSavingIds((prev) => new Set(prev).add(job.id));
+    try {
+      await fn();
+    } finally {
+      setSavingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(job.id);
+        return next;
+      });
+    }
+  }, []);
+
+  // Manual "Download" (web, unfocused-tab fallback) / "Save…" (native) — the
+  // toast/panel row action. Both mark the job finalized so the focus-gated
+  // auto-download effect above doesn't ALSO fire for it later, and both track
+  // a busy state (`savingIds`) so the button can show it's working instead of
+  // going silent while the bytes fetch + (for native) the OS dialog opens.
+  const download = useCallback(
+    async (job) => {
+      finalizedRef.current.add(job.id);
+      await withSaving(job, () => autoDownloadBlob(job.id, job.filename));
+    },
+    [withSaving]
+  );
+  const save = useCallback(
+    async (job) => {
+      finalizedRef.current.add(job.id);
+      await withSaving(job, () => saveNative(job.id, job.filename));
+    },
+    [withSaving]
+  );
+
+  const toastJobId = panelOpen ? null : (toastQueue[0] ?? null);
+
+  return {
+    jobs: list,
+    upsert,
+    runningCount,
+    queuedCount,
+    busyCount: runningCount + queuedCount,
+    panelOpen,
+    openPanel,
+    closePanel,
+    showToast: !!toastJobId,
+    toastJob: toastJobId ? (jobs.get(toastJobId) ?? null) : null,
+    dismissToast,
+    download,
+    save,
+    savingIds,
+  };
+}
+
+function jobLabel(job) {
+  const fmt = FORMAT_LABELS[job.format] || String(job.format || '').toUpperCase();
+  const scope = SCOPE_LABELS[job.scope] || job.scope;
+  return `${fmt} · ${scope}`;
+}
+
+// Native "Save…" opens the OS file picker; web "Download" streams a blob
+// through <a download> — distinct verbs, so the busy label stays distinct too
+// (the fetch-bytes step behind both can take several seconds on a large export).
+function saveActionLabel(saving) {
+  if (isNativeApp()) return saving ? 'Saving…' : 'Save…';
+  return saving ? 'Downloading…' : 'Download';
+}
+
+function ProgressBar({ progress }) {
+  if (!progress || !progress.total) {
+    return <div className="st-export-progress st-export-progress--indeterminate" aria-hidden="true" />;
+  }
+  const pct = Math.max(0, Math.min(100, Math.round((progress.current / progress.total) * 100)));
+  return (
+    <div
+      className="st-export-progress"
+      role="progressbar"
+      aria-valuenow={pct}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      <div className="st-export-progress-bar" style={{ width: `${pct}%` }} />
+    </div>
+  );
+}
+
+// Per-job anchor for the ETA: the FIRST progress sample the client sees. For a
+// video export that's the first frame-step frame — after the (progress-less)
+// renderMediaOnWeb attempt — so the rate is measured over real capture work and
+// isn't skewed by that pre-roll. Keyed by job id; cleared when the job ends.
+const etaAnchors = new Map();
+
+/** Rough "~N min left" from the rate since the first observed progress sample.
+ *  Recomputes on every progress update (frame-step emits ~1–2/s), so it ticks
+ *  down live without a timer. Returns null until there's enough delta to trust. */
+function etaLabel(job) {
+  const cur = job.progress?.current;
+  const total = job.progress?.total;
+  if (!cur || !total || cur >= total) {
+    etaAnchors.delete(job.id);
+    return null;
+  }
+  let anchor = etaAnchors.get(job.id);
+  if (!anchor || cur < anchor.c) {
+    anchor = { t: Date.now(), c: cur };
+    etaAnchors.set(job.id, anchor);
+  }
+  const doneSinceAnchor = cur - anchor.c;
+  if (doneSinceAnchor < 3) return null; // need a few frames to estimate a rate
+  const remainingMs = ((Date.now() - anchor.t) / doneSinceAnchor) * (total - cur);
+  if (remainingMs < 45_000) return '<1 min left';
+  return `~${Math.round(remainingMs / 60_000)} min left`;
+}
+
+function StatusPill({ job }) {
+  const statusText =
+    job.status === 'queued'
+      ? 'Queued'
+      : job.status === 'running'
+        ? job.progress?.total
+          ? `${job.progress.current} of ${job.progress.total}`
+          : 'Rendering…'
+        : job.status === 'done'
+          ? 'Ready'
+          : 'Failed';
+  const eta = job.status === 'running' ? etaLabel(job) : null;
+  return (
+    <span className={`st-export-pill st-export-pill--${job.status}`}>
+      {statusText}
+      {eta ? ` · ${eta}` : ''}
+    </span>
+  );
+}
+
+export function ExportBadge({ center }) {
+  const busy = center.busyCount > 0;
+  return (
+    <button
+      type="button"
+      className="st-exports"
+      data-tour="exports"
+      data-busy={busy ? 'true' : 'false'}
+      aria-label={busy ? `Exports — ${center.busyCount} running` : 'Exports'}
+      data-tip="Exports"
+      onClick={center.openPanel}
+    >
+      <span aria-hidden="true">⬇</span>
+      {busy && (
+        <span className="st-exports__count" aria-hidden="true">
+          {center.busyCount}
+        </span>
+      )}
+    </button>
+  );
+}
+
+export function ExportToast({ center }) {
+  if (!center.showToast || !center.toastJob) return null;
+  const job = center.toastJob;
+  const pending = job.status === 'queued' || job.status === 'running';
+  const ok = job.status === 'done';
+  const saving = center.savingIds.has(job.id);
+  const finalize = () => {
+    if (isNativeApp()) void center.save(job);
+    else void center.download(job);
+  };
+  return (
+    <div className="st-toast" role="status" aria-live="polite">
+      <button type="button" className="st-toast-close" aria-label="Dismiss" onClick={center.dismissToast}>
+        ×
+      </button>
+      <div className="st-toast-hd">
+        <span aria-hidden="true">{pending ? '⋯' : ok ? '⬇' : '⚠'}</span>
+        {pending ? 'Exporting…' : ok ? 'Export ready' : 'Export failed'}
+      </div>
+      <div className="st-toast-title">{jobLabel(job)}</div>
+      {pending ? (
+        <>
+          <div className="st-toast-txt">Running in the background — you can keep working.</div>
+          <ProgressBar progress={job.progress} />
+        </>
+      ) : (
+        <div className="st-toast-txt">
+          {ok ? (job.filename ?? 'Ready to download.') : (job.error ?? 'Something went wrong.')}
+        </div>
+      )}
+      {ok && (
+        <div className="st-toast-actions">
+          <button
+            type="button"
+            className="btn btn--primary btn--sm"
+            onClick={finalize}
+            disabled={saving}
+          >
+            {saving && <span className="st-btn-spin" aria-hidden="true" />}
+            {saveActionLabel(saving)}
+          </button>
+          <button type="button" className="btn btn--ghost btn--sm" onClick={center.dismissToast}>
+            Dismiss
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ExportPanel({ center }) {
+  const { panelOpen, closePanel } = center;
+  useEffect(() => {
+    if (!panelOpen) return;
+    function onKey(e) {
+      if (e.key === 'Escape') closePanel();
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [panelOpen, closePanel]);
+
+  if (!panelOpen) return null;
+  return (
+    <div
+      className="help-modal-backdrop"
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) closePanel();
+      }}
+    >
+      <div
+        className="st-export-panel"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="st-export-panel-title"
+      >
+        <header className="help-modal-hd">
+          <span className="title" id="st-export-panel-title">
+            Exports
+          </span>
+          <button
+            type="button"
+            className="help-modal-close"
+            aria-label="Close (Esc)"
+            onClick={closePanel}
+          >
+            ×
+          </button>
+        </header>
+        <div className="st-export-panel__body">
+          {center.jobs.length === 0 ? (
+            <p className="mdcc-wn-empty">No exports yet.</p>
+          ) : (
+            <ul className="st-export-list">
+              {center.jobs.map((job) => (
+                <li key={job.id} className="st-export-item">
+                  <div className="st-export-item__hd">
+                    <span className="st-export-item__label">{jobLabel(job)}</span>
+                    <StatusPill job={job} />
+                  </div>
+                  {(job.status === 'queued' || job.status === 'running') && (
+                    <ProgressBar progress={job.progress} />
+                  )}
+                  {job.status === 'done' && (
+                    <div className="st-export-item__ft">
+                      <span className="st-export-item__filename">{job.filename}</span>
+                      <button
+                        type="button"
+                        className="btn btn--ghost btn--sm"
+                        disabled={center.savingIds.has(job.id)}
+                        onClick={() => (isNativeApp() ? center.save(job) : center.download(job))}
+                      >
+                        {center.savingIds.has(job.id) && (
+                          <span className="st-btn-spin" aria-hidden="true" />
+                        )}
+                        {saveActionLabel(center.savingIds.has(job.id))}
+                      </button>
+                    </div>
+                  )}
+                  {job.status === 'failed' && (
+                    <div className="st-export-item__ft">
+                      <span className="st-export-item__error">{job.error ?? 'Export failed.'}</span>
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/studio/client/github.js

@@ -35,6 +35,10 @@ export const signOut = () => invoke('github_sign_out');
 export const isSignedIn = () => invoke('github_is_signed_in');
 export const openVerification = () =>
   invoke('github_open_verification', { url: 'https://github.com/login/device' });
+/** Open a github.com URL (PR link, repo page) in the OS browser. Native only; the
+ *  Rust side host-locks it to github.com. Throws on an older desktop build without
+ *  the command — callers fall back to copy-to-clipboard. */
+export const openGitHubUrl = (url) => invoke('open_github_url', { url });
 /** Show the device code as soon as the shell has it. Returns an unlisten promise. */
 export const onDeviceCode = (cb) => listen('github://device-code', cb);
 /** Fire when sign-in completes (any surface) so other surfaces can flip live. cb(login). */

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

@@ -364,6 +364,14 @@ export default function GitPanel({
                 getLatest: true,
               }
         );
+      else if (kind === 'publish' && /protected branch|GH006/i.test(res.error || ''))
+        // A protected default branch rejects a direct Publish — point at the PR flow
+        // (DDR-162): the way to add work to a protected branch is a draft + a pull request.
+        setBanner({
+          variant: 'warn',
+          title: 'This branch is protected',
+          text: 'It needs a pull request. Switch to a draft, then use “Add to Shared version” to open one.',
+        });
       else setBanner({ variant: 'error', text: res.error || 'Something went wrong.' });
       return res;
     } finally {