Spaces:
Running
Running
| import { Button } from "@cloudflare/kumo"; | |
| import { ArrowUUpLeftIcon, CaretRightIcon, CheckCircleIcon, DownloadSimpleIcon, GraphIcon, ImagesIcon, PlayIcon, PlusIcon, RowsIcon, ShareNetworkIcon, SlidersHorizontalIcon, SparkleIcon, SquaresFourIcon, WarningCircleIcon, XIcon } from "@phosphor-icons/react"; | |
| import { AnimatePresence, motion } from "motion/react"; | |
| import { useEffect, useMemo, useRef, useState } from "react"; | |
| import { getDef } from "../lib/registry"; | |
| import type { CanvasNode, FileRef, OutputValue } from "../lib/types"; | |
| import { OutputView } from "./OutputView"; | |
| import { useCanvasStore } from "../store/useCanvasStore"; | |
| import { useCopilotStore } from "../store/useCopilotStore"; | |
| export type MobilePanel = "library" | "inspector" | "copilot" | "results" | null; | |
| /** Which panel is showing on a phone. Only one fits, so the last one opened wins. */ | |
| export function useMobilePanel(active: boolean): MobilePanel { | |
| const leftOpen = useCanvasStore((s) => s.leftOpen); | |
| const rightOpen = useCanvasStore((s) => s.rightOpen); | |
| const copilotOpen = useCopilotStore((s) => s.open); | |
| const resultsOpen = useCanvasStore((s) => s.resultsOpen); | |
| const setLeftOpen = useCanvasStore((s) => s.setLeftOpen); | |
| const setRightOpen = useCanvasStore((s) => s.setRightOpen); | |
| const setResultsOpen = useCanvasStore((s) => s.setResultsOpen); | |
| const setCopilotOpen = useCopilotStore((s) => s.setOpen); | |
| const prev = useRef({ leftOpen, rightOpen, copilotOpen, resultsOpen }); | |
| useEffect(() => { | |
| if (!active) return; | |
| const p = prev.current; | |
| prev.current = { leftOpen, rightOpen, copilotOpen, resultsOpen }; | |
| const opened = | |
| (resultsOpen && !p.resultsOpen && "results") || (leftOpen && !p.leftOpen && "library") || (rightOpen && !p.rightOpen && "inspector") || (copilotOpen && !p.copilotOpen && "copilot") || null; | |
| if (!opened) return; | |
| if (opened !== "library" && leftOpen) setLeftOpen(false); | |
| if (opened !== "inspector" && rightOpen) setRightOpen(false); | |
| if (opened !== "copilot" && copilotOpen) setCopilotOpen(false); | |
| if (opened !== "results" && resultsOpen) setResultsOpen(false); | |
| }, [active, leftOpen, rightOpen, copilotOpen, resultsOpen, setLeftOpen, setRightOpen, setCopilotOpen, setResultsOpen]); | |
| if (!active) return null; | |
| return resultsOpen ? "results" : copilotOpen ? "copilot" : rightOpen ? "inspector" : leftOpen ? "library" : null; | |
| } | |
| /** Full-height sheet over the work area; the header carries the close button. */ | |
| export function MobileSheet({ panel, title, children }: { panel: MobilePanel; title: string; children: React.ReactNode }) { | |
| const setLeftOpen = useCanvasStore((s) => s.setLeftOpen); | |
| const setRightOpen = useCanvasStore((s) => s.setRightOpen); | |
| const setCopilotOpen = useCopilotStore((s) => s.setOpen); | |
| const setResultsOpen = useCanvasStore((s) => s.setResultsOpen); | |
| const close = () => { | |
| setLeftOpen(false); | |
| setRightOpen(false); | |
| setCopilotOpen(false); | |
| setResultsOpen(false); | |
| }; | |
| return ( | |
| <AnimatePresence initial={false}> | |
| {panel && ( | |
| <motion.section | |
| key={panel} | |
| className="m-sheet" | |
| initial={{ y: "100%" }} | |
| animate={{ y: 0 }} | |
| exit={{ y: "100%" }} | |
| transition={{ duration: 0.22, ease: [0.16, 1, 0.3, 1] }} | |
| aria-label={title} | |
| > | |
| <header className="m-sheet__head"> | |
| <span className="truncate">{title}</span> | |
| <button type="button" className="m-sheet__close" onClick={close} aria-label="Close"> | |
| <XIcon size={14} weight="bold" /> | |
| </button> | |
| </header> | |
| <div className="min-h-0 flex-1">{children}</div> | |
| </motion.section> | |
| )} | |
| </AnimatePresence> | |
| ); | |
| } | |
| /** Bottom tab bar: what the side toggles and view switch do on a desktop. */ | |
| export function MobileBar({ panel }: { panel: MobilePanel }) { | |
| const view = useCanvasStore((s) => s.view); | |
| const setView = useCanvasStore((s) => s.setView); | |
| const setLeftOpen = useCanvasStore((s) => s.setLeftOpen); | |
| const setRightOpen = useCanvasStore((s) => s.setRightOpen); | |
| const setInspectorTab = useCanvasStore((s) => s.setInspectorTab); | |
| const openPalette = useCanvasStore((s) => s.openPalette); | |
| const selectedCount = useCanvasStore((s) => s.nodes.filter((n) => n.selected).length); | |
| const running = useCanvasStore((s) => s.run.running); | |
| const queued = useCanvasStore((s) => s.queue.length); | |
| const setCopilotOpen = useCopilotStore((s) => s.setOpen); | |
| const setResultsOpen = useCanvasStore((s) => s.setResultsOpen); | |
| const closeAll = () => { | |
| setLeftOpen(false); | |
| setRightOpen(false); | |
| setCopilotOpen(false); | |
| setResultsOpen(false); | |
| }; | |
| const toggle = (which: Exclude<MobilePanel, null>) => { | |
| if (panel === which) return closeAll(); | |
| if (which === "library") setLeftOpen(true); | |
| else if (which === "results") setResultsOpen(true); | |
| else if (which === "inspector") { | |
| setInspectorTab("properties"); | |
| setRightOpen(true); | |
| } else setCopilotOpen(true); | |
| }; | |
| const ViewIcon = view === "canvas" ? GraphIcon : RowsIcon; | |
| return ( | |
| <nav className="m-bar" aria-label="Mobile navigation"> | |
| <button type="button" className="m-bar__btn" data-active={panel === "library" || undefined} onClick={() => toggle("library")}> | |
| <SquaresFourIcon size={20} weight={panel === "library" ? "fill" : "regular"} /> | |
| <span>Library</span> | |
| </button> | |
| <button | |
| type="button" | |
| className="m-bar__btn" | |
| data-active={!panel || undefined} | |
| onClick={() => { | |
| if (panel) closeAll(); | |
| else setView(view === "canvas" ? "pipeline" : "canvas"); | |
| }} | |
| title={panel ? "Back to the workflow" : `Switch to ${view === "canvas" ? "pipeline" : "canvas"} view`} | |
| > | |
| <ViewIcon size={20} weight={!panel ? "fill" : "regular"} /> | |
| <span>{view === "canvas" ? "Canvas" : "Pipeline"}</span> | |
| </button> | |
| <button type="button" className="m-bar__btn m-bar__btn--add" onClick={() => openPalette(null)} aria-label="Add a node"> | |
| <span className="m-bar__add"> | |
| <PlusIcon size={20} weight="bold" /> | |
| </span> | |
| <span>Add</span> | |
| </button> | |
| <button type="button" className="m-bar__btn" data-active={panel === "inspector" || undefined} onClick={() => toggle("inspector")}> | |
| <span className="relative"> | |
| <SlidersHorizontalIcon size={20} weight={panel === "inspector" ? "fill" : "regular"} /> | |
| {(selectedCount > 0 || running || queued > 0) && <i className="m-bar__dot" />} | |
| </span> | |
| <span>{selectedCount > 0 ? "Node" : "Inspect"}</span> | |
| </button> | |
| <button type="button" className="m-bar__btn" data-active={panel === "copilot" || undefined} onClick={() => toggle("copilot")}> | |
| <SparkleIcon size={20} weight={panel === "copilot" ? "fill" : "regular"} /> | |
| <span>Copilot</span> | |
| </button> | |
| </nav> | |
| ); | |
| } | |
| /* Run strip -------------------------------------------------------------- */ | |
| const fmtSecs = (ms: number) => (ms < 60_000 ? `${Math.round(ms / 1000)}s` : `${Math.floor(ms / 60_000)}m ${Math.round((ms % 60_000) / 1000)}s`); | |
| /** Under the top bar while a run is active: the current step, its ETA, and a tap to jump to it. */ | |
| export function RunStrip() { | |
| const run = useCanvasStore((s) => s.run); | |
| const current = useCanvasStore((s) => (s.run.currentNodeId ? s.nodes.find((n) => n.id === s.run.currentNodeId) : undefined)); | |
| const runningNode = useCanvasStore((s) => s.nodes.find((n) => n.data.status === "running")); | |
| const failedNode = useCanvasStore((s) => s.nodes.find((n) => n.data.status === "error")); | |
| const queued = useCanvasStore((s) => s.queue.length); | |
| const selectNodes = useCanvasStore((s) => s.selectNodes); | |
| const setResultsOpen = useCanvasStore((s) => s.setResultsOpen); | |
| const [, tick] = useState(0); | |
| // The "Done" state hides itself after a few seconds. | |
| const finished = !run.running && run.finishedAt !== null && Date.now() - run.finishedAt < 6000; | |
| useEffect(() => { | |
| if (run.running) { | |
| const t = setInterval(() => tick((x) => x + 1), 1000); | |
| return () => clearInterval(t); | |
| } | |
| if (run.finishedAt === null) return; | |
| const t = setTimeout(() => tick((x) => x + 1), 6100); | |
| return () => clearTimeout(t); | |
| }, [run.running, run.finishedAt]); | |
| const show = run.running || finished; | |
| const node = runningNode ?? current; | |
| const title = node ? node.data.title ?? getDef(node.data.defType).title : null; | |
| const frac = run.total ? Math.min(1, (run.completed + (runningNode?.data.progress ?? 0)) / run.total) : 0; | |
| const jump = (id: string) => { | |
| selectNodes([id]); | |
| window.dispatchEvent(new CustomEvent("gr-canvas:focus-node", { detail: id })); | |
| }; | |
| return ( | |
| <AnimatePresence initial={false}> | |
| {show && ( | |
| <motion.button | |
| type="button" | |
| className="run-strip" | |
| data-state={run.running ? "running" : run.ok ? "done" : "failed"} | |
| initial={{ height: 0, opacity: 0 }} | |
| animate={{ height: 36, opacity: 1 }} | |
| exit={{ height: 0, opacity: 0 }} | |
| transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }} | |
| onClick={() => { | |
| if (run.running) { | |
| if (node) jump(node.id); | |
| } else if (run.ok) setResultsOpen(true); | |
| else if (failedNode) jump(failedNode.id); | |
| }} | |
| > | |
| {run.running ? ( | |
| <> | |
| <span className="run-strip__spinner" aria-hidden /> | |
| <span className="run-strip__main truncate">{title ?? "Starting…"}</span> | |
| <span className="run-strip__meta"> | |
| {runningNode?.data.statusText ?? (run.total ? `${Math.min(run.completed + 1, run.total)}/${run.total}` : fmtSecs(Date.now() - run.startedAt))} | |
| {queued > 0 && ` · +${queued} queued`} | |
| </span> | |
| <span className="run-strip__bar" style={{ transform: `scaleX(${frac})` }} aria-hidden /> | |
| </> | |
| ) : run.ok ? ( | |
| <> | |
| <CheckCircleIcon size={16} weight="fill" /> | |
| <span className="run-strip__main truncate">Done in {fmtSecs(Date.now() - run.startedAt)}</span> | |
| <span className="run-strip__meta"> | |
| Results <CaretRightIcon size={11} weight="bold" /> | |
| </span> | |
| </> | |
| ) : ( | |
| <> | |
| <WarningCircleIcon size={16} weight="fill" /> | |
| <span className="run-strip__main truncate">{failedNode ? `${failedNode.data.title ?? getDef(failedNode.data.defType).title} failed` : "Run failed"}</span> | |
| <span className="run-strip__meta"> | |
| Show <CaretRightIcon size={11} weight="bold" /> | |
| </span> | |
| </> | |
| )} | |
| </motion.button> | |
| )} | |
| </AnimatePresence> | |
| ); | |
| } | |
| /* Results sheet ----------------------------------------------------------- */ | |
| const isRef = (v: unknown): v is FileRef => !!v && typeof v === "object" && typeof (v as FileRef).url === "string"; | |
| const filesOf = (v: OutputValue | undefined): FileRef[] => (isRef(v) ? [v] : Array.isArray(v) ? (v.filter(isRef) as FileRef[]) : []); | |
| const hasValue = (v: OutputValue | undefined) => v !== undefined && v !== null && v !== ""; | |
| async function fetchFile(ref: FileRef): Promise<File | null> { | |
| try { | |
| const r = await fetch(ref.url); | |
| if (!r.ok) return null; | |
| const blob = await r.blob(); | |
| const name = ref.name ?? ref.url.split("/").pop()?.split("?")[0] ?? "output"; | |
| return new File([blob], name, { type: ref.mime || blob.type }); | |
| } catch { | |
| return null; | |
| } | |
| } | |
| async function shareRef(ref: FileRef, title: string, setToast: (t: { text: string } | null) => void) { | |
| const nav = navigator as Navigator & { canShare?: (d: ShareData) => boolean }; | |
| if (typeof nav.share !== "function") { | |
| try { | |
| await navigator.clipboard.writeText(ref.url); | |
| setToast({ text: "Link copied" }); | |
| } catch { | |
| window.open(ref.url, "_blank", "noopener"); | |
| } | |
| return; | |
| } | |
| const file = await fetchFile(ref); | |
| try { | |
| if (file && nav.canShare?.({ files: [file] })) await nav.share({ files: [file], title }); | |
| else await nav.share({ title, url: ref.url }); | |
| } catch { | |
| /* user dismissed */ | |
| } | |
| } | |
| async function saveRef(ref: FileRef) { | |
| const file = await fetchFile(ref); | |
| if (!file) return window.open(ref.url, "_blank", "noopener"); | |
| const url = URL.createObjectURL(file); | |
| const a = document.createElement("a"); | |
| a.href = url; | |
| a.download = file.name; | |
| document.body.appendChild(a); | |
| a.click(); | |
| a.remove(); | |
| setTimeout(() => URL.revokeObjectURL(url), 10_000); | |
| } | |
| function ResultCard({ node }: { node: CanvasNode }) { | |
| const def = getDef(node.data.defType); | |
| const setToast = useCanvasStore((s) => s.setToast); | |
| const title = node.data.title ?? def.title; | |
| const ports = def.outputs.filter((p) => hasValue(node.data.outputs?.[p.id])); | |
| return ( | |
| <section className="m-result"> | |
| <h3 className="m-result__title">{title}</h3> | |
| {ports.map((p) => { | |
| const value = node.data.outputs?.[p.id]; | |
| const files = filesOf(value); | |
| return ( | |
| <div key={p.id} className="m-result__port"> | |
| {ports.length > 1 && <div className="m-result__label">{p.label || p.id}</div>} | |
| <OutputView value={value} type={p.type} /> | |
| {files.length > 0 && ( | |
| <div className="m-result__actions"> | |
| {files.slice(0, 4).map((f, i) => ( | |
| <span key={i} className="flex gap-1.5"> | |
| <Button size="sm" variant="secondary" icon={ShareNetworkIcon} onClick={() => void shareRef(f, title, setToast)}> | |
| Share{files.length > 1 ? ` ${i + 1}` : ""} | |
| </Button> | |
| <Button size="sm" variant="ghost" icon={DownloadSimpleIcon} onClick={() => void saveRef(f)}> | |
| Save | |
| </Button> | |
| </span> | |
| ))} | |
| </div> | |
| )} | |
| {files.length === 0 && typeof value === "string" && ( | |
| <div className="m-result__actions"> | |
| <Button | |
| size="sm" | |
| variant="secondary" | |
| icon={ShareNetworkIcon} | |
| onClick={() => { | |
| if (typeof navigator.share === "function") void navigator.share({ title, text: value }).catch(() => undefined); | |
| else void navigator.clipboard.writeText(value).then(() => setToast({ text: "Copied" })); | |
| }} | |
| > | |
| Share | |
| </Button> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| })} | |
| </section> | |
| ); | |
| } | |
| /** Every output of the last run, full width; final outputs first. */ | |
| export function ResultsView() { | |
| const nodes = useCanvasStore((s) => s.nodes); | |
| const edges = useCanvasStore((s) => s.edges); | |
| const order = useCanvasStore((s) => s.order); | |
| const running = useCanvasStore((s) => s.run.running); | |
| const enqueue = useCanvasStore((s) => s.enqueue); | |
| const setResultsOpen = useCanvasStore((s) => s.setResultsOpen); | |
| const items = useMemo(() => { | |
| const feeds = new Set(edges.map((e) => e.source)); | |
| const rank = new Map(order.map((id, i) => [id, i])); | |
| return nodes | |
| .filter((n) => { | |
| const def = getDef(n.data.defType); | |
| return !def.emits && def.outputs.some((p) => hasValue(n.data.outputs?.[p.id])); | |
| }) | |
| .sort((a, b) => Number(feeds.has(a.id)) - Number(feeds.has(b.id)) || (rank.get(b.id) ?? 0) - (rank.get(a.id) ?? 0)); | |
| }, [nodes, edges, order]); | |
| if (items.length === 0) | |
| return ( | |
| <div className="m-results__empty"> | |
| <ImagesIcon size={28} className="text-kumo-placeholder" /> | |
| <p className="text-sm text-kumo-subtle">{running ? "Running… results land here." : "No results yet."}</p> | |
| {!running && nodes.length > 0 && ( | |
| <Button size="sm" variant="primary" icon={PlayIcon} onClick={() => enqueue()}> | |
| Run workflow | |
| </Button> | |
| )} | |
| {!running && nodes.length === 0 && ( | |
| <Button size="sm" variant="primary" icon={PlusIcon} onClick={() => { setResultsOpen(false); useCanvasStore.getState().openPalette(null); }}> | |
| Add a node | |
| </Button> | |
| )} | |
| </div> | |
| ); | |
| return ( | |
| <div className="m-results"> | |
| {items.map((n) => ( | |
| <ResultCard key={n.id} node={n} /> | |
| ))} | |
| </div> | |
| ); | |
| } | |
| /* Toast -------------------------------------------------------------------- */ | |
| /** Bottom toast with an optional action ("Removed X · Undo"). */ | |
| export function ToastHost() { | |
| const toast = useCanvasStore((s) => s.toast); | |
| const setToast = useCanvasStore((s) => s.setToast); | |
| return ( | |
| <AnimatePresence> | |
| {toast && ( | |
| <motion.div | |
| key={toast.id} | |
| className="toast" | |
| role="status" | |
| initial={{ opacity: 0, y: 12, scale: 0.98 }} | |
| animate={{ opacity: 1, y: 0, scale: 1 }} | |
| exit={{ opacity: 0, y: 8, scale: 0.98, transition: { duration: 0.15 } }} | |
| transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }} | |
| > | |
| <span className="truncate">{toast.text}</span> | |
| {toast.action && ( | |
| <button type="button" className="toast__act" onClick={toast.action.run}> | |
| {toast.action.label === "Undo" && <ArrowUUpLeftIcon size={13} weight="bold" />} | |
| {toast.action.label} | |
| </button> | |
| )} | |
| <button type="button" className="toast__close" aria-label="Dismiss" onClick={() => setToast(null)}> | |
| <XIcon size={12} weight="bold" /> | |
| </button> | |
| </motion.div> | |
| )} | |
| </AnimatePresence> | |
| ); | |
| } | |