Spaces:
Running
Running
| import { Badge, Button, Tabs } from "@cloudflare/kumo"; | |
| import { prettyApi } from "../../lib/gradio"; | |
| import { | |
| ArrowClockwiseIcon, | |
| ArrowSquareOutIcon, | |
| CaretDownIcon, | |
| CaretRightIcon, | |
| CheckIcon, | |
| CrosshairIcon, | |
| EyeIcon, | |
| EyeSlashIcon, | |
| FunctionIcon, | |
| MagnifyingGlassIcon, | |
| PlusIcon, | |
| PushPinIcon, | |
| PushPinSlashIcon, | |
| SpinnerIcon, | |
| TrashIcon, | |
| WarningIcon, | |
| LockSimpleIcon, | |
| } from "@phosphor-icons/react"; | |
| import { useReactFlow } from "@xyflow/react"; | |
| import { useMemo, useRef, useState, type DragEvent } from "react"; | |
| import { useShallow } from "zustand/react/shallow"; | |
| import { MOD } from "../../lib/format"; | |
| import { fnToDef } from "../../lib/groups"; | |
| import { hardwareLabel, isUsable, stageLabel } from "../../lib/hub"; | |
| import { allDefs, defAccent, getDef, TYPE_TOKEN, typeColor } from "../../lib/registry"; | |
| import type { CanvasNode, NodeDef, SpaceEntry } from "../../lib/types"; | |
| import { TEMPLATES } from "../../lib/workflows"; | |
| import { useCanvasStore } from "../../store/useCanvasStore"; | |
| import { spaceAction } from "../NodeError"; | |
| import { useLibraryStore } from "../../store/useLibraryStore"; | |
| import { useContextMenu, type MenuItem } from "../ContextMenu"; | |
| /* Adding nodes ----------------------------------------------------------- */ | |
| function useAddNode() { | |
| const addNode = useCanvasStore((s) => s.addNode); | |
| const addStep = useCanvasStore((s) => s.addStep); | |
| const view = useCanvasStore((s) => s.view); | |
| const snapToGrid = useCanvasStore((s) => s.snapToGrid); | |
| const { screenToFlowPosition } = useReactFlow(); | |
| return (def: NodeDef) => { | |
| if (view === "pipeline") { | |
| addStep(def.type); | |
| return; | |
| } | |
| const rect = document.querySelector(".react-flow")?.getBoundingClientRect(); | |
| const center = rect ? { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 } : { x: window.innerWidth / 2, y: window.innerHeight / 2 }; | |
| const p = screenToFlowPosition(center); | |
| const jitter = (Math.random() - 0.5) * 80; | |
| let pos = { x: p.x - (def.width ?? 260) / 2 + jitter, y: p.y - 60 + jitter }; | |
| if (snapToGrid) pos = { x: Math.round(pos.x / 20) * 20, y: Math.round(pos.y / 20) * 20 }; | |
| addNode(def.type, pos); | |
| }; | |
| } | |
| function useDragGhost() { | |
| const ghostRef = useRef<HTMLDivElement>(null); | |
| const onDragStart = (e: DragEvent, def: NodeDef) => { | |
| e.dataTransfer.setData("application/kumo-node", def.type); | |
| e.dataTransfer.effectAllowed = "copy"; | |
| const ghost = ghostRef.current; | |
| if (ghost) { | |
| ghost.textContent = def.title; | |
| ghost.style.setProperty("--node-accent", typeColor(defAccent(def))); | |
| e.dataTransfer.setDragImage(ghost, 16, 16); | |
| } | |
| }; | |
| return { ghostRef, onDragStart }; | |
| } | |
| /* Workflow tab ----------------------------------------------------------- */ | |
| const STATUS_TEXT: Record<string, string> = { queued: "Queued", running: "Running", done: "Done", error: "Failed" }; | |
| /** | |
| * Everything about *this* workflow: a dock of the nodes you reach for most, | |
| * the Spaces it depends on (and whether they're awake), and an outline of the | |
| * nodes on the canvas so a failing one is one click away. Finding new Spaces | |
| * happens in the explorer (⌘K), not here. | |
| */ | |
| function WorkflowTab() { | |
| const nodes = useCanvasStore((s) => s.nodes); | |
| const order = useCanvasStore((s) => s.order); | |
| const spaces = useCanvasStore((s) => s.spaces); | |
| const groupDefs = useCanvasStore(useShallow((s) => s.functions)); | |
| const openPalette = useCanvasStore((s) => s.openPalette); | |
| const focusNode = useCanvasStore((s) => s.focusNode); | |
| const removeSpace = useCanvasStore((s) => s.removeSpace); | |
| const refreshSpace = useCanvasStore((s) => s.refreshSpace); | |
| const deleteFunction = useCanvasStore((s) => s.deleteFunction); | |
| const pinned = useLibraryStore((s) => s.pinned); | |
| const hidden = useLibraryStore((s) => s.hidden); | |
| const pin = useLibraryStore((s) => s.pin); | |
| const unpin = useLibraryStore((s) => s.unpin); | |
| const hide = useLibraryStore((s) => s.hide); | |
| const unhide = useLibraryStore((s) => s.unhide); | |
| const onAdd = useAddNode(); | |
| const { ghostRef, onDragStart } = useDragGhost(); | |
| const ctx = useContextMenu(); | |
| const [openSpaces, setOpenSpaces] = useState<Record<string, boolean>>({}); | |
| const [showHidden, setShowHidden] = useState(false); | |
| const dock = useMemo(() => { | |
| const all = [...allDefs(), ...groupDefs.map(fnToDef)]; | |
| const byType = new Map(all.map((d) => [d.type, d])); | |
| const pins = pinned.map((t) => byType.get(t)).filter((d): d is NodeDef => !!d); | |
| const dockable = (d: NodeDef) => d.category === "Inputs" || d.category === "Utilities"; | |
| const inputs = all.filter((d) => dockable(d) && !pinned.includes(d.type) && !hidden.includes(d.type)); | |
| const groups = all.filter((d) => d.category === "Functions" && !pinned.includes(d.type)); | |
| const hiddenInputs = all.filter((d) => dockable(d) && hidden.includes(d.type)); | |
| return { pins, inputs, groups, hiddenInputs }; | |
| }, [groupDefs, pinned, hidden]); | |
| const entries = useMemo(() => Object.values(spaces).sort((a, b) => a.summary.title.localeCompare(b.summary.title)), [spaces]); | |
| const usedBy = useMemo(() => { | |
| const m = new Map<string, number>(); | |
| for (const n of nodes) { | |
| const sid = getDef(n.data.defType).space?.id; | |
| if (sid) m.set(sid, (m.get(sid) ?? 0) + 1); | |
| } | |
| return m; | |
| }, [nodes]); | |
| const outline = useMemo(() => { | |
| const rank = new Map(order.map((id, i) => [id, i])); | |
| const sorted = [...nodes].sort((a, b) => (rank.get(a.id) ?? 1e9) - (rank.get(b.id) ?? 1e9)); | |
| const children = new Map<string, CanvasNode[]>(); | |
| const roots: CanvasNode[] = []; | |
| for (const n of sorted) { | |
| if (n.parentId) children.set(n.parentId, [...(children.get(n.parentId) ?? []), n]); | |
| else roots.push(n); | |
| } | |
| return { roots, children }; | |
| }, [nodes, order]); | |
| const defMenu = (e: React.MouseEvent, def: NodeDef) => { | |
| const isPinned = pinned.includes(def.type); | |
| const items: MenuItem[] = [ | |
| { label: "Add to canvas", icon: PlusIcon, onSelect: () => onAdd(def) }, | |
| isPinned ? { label: "Remove from dock", icon: PushPinSlashIcon, onSelect: () => unpin(def.type) } : { label: "Pin to dock", icon: PushPinIcon, onSelect: () => pin(def.type) }, | |
| ]; | |
| if ((def.category === "Inputs" || def.category === "Utilities") && !isPinned) items.push(hidden.includes(def.type) ? { label: "Show in dock", icon: EyeIcon, onSelect: () => unhide(def.type) } : { label: "Hide from dock", icon: EyeSlashIcon, onSelect: () => hide(def.type) }); | |
| if (def.space) { | |
| items.push( | |
| hidden.includes(def.type) ? { label: "Show endpoint", icon: EyeIcon, onSelect: () => unhide(def.type) } : { label: "Hide endpoint", icon: EyeSlashIcon, onSelect: () => hide(def.type) }, | |
| { label: "Open Space on Hugging Face", icon: ArrowSquareOutIcon, href: `https://huggingface.co/spaces/${def.space.id}`, separator: true }, | |
| ); | |
| } | |
| if (def.category === "Functions") items.push({ label: "Delete group", icon: TrashIcon, danger: true, separator: true, onSelect: () => deleteFunction(def.type.slice(3)) }); | |
| ctx.open(e, items); | |
| }; | |
| const spaceMenu = (e: React.MouseEvent, sp: SpaceEntry) => { | |
| const own = sp.defs; | |
| const allHidden = own.length > 0 && own.every((d) => hidden.includes(d.type)); | |
| const used = usedBy.get(sp.summary.id) ?? 0; | |
| ctx.open(e, [ | |
| { label: "Reload endpoints", icon: ArrowClockwiseIcon, onSelect: () => void refreshSpace(sp.summary.id) }, | |
| { label: "Open on Hugging Face", icon: ArrowSquareOutIcon, href: `https://huggingface.co/spaces/${sp.summary.id}` }, | |
| allHidden ? { label: "Show all endpoints", icon: EyeIcon, separator: true, onSelect: () => own.forEach((d) => unhide(d.type)) } : { label: "Hide all endpoints", icon: EyeSlashIcon, separator: true, onSelect: () => own.forEach((d) => hide(d.type)) }, | |
| { label: used ? `Remove Space (${used} node${used === 1 ? "" : "s"} use it)` : "Remove Space", icon: TrashIcon, danger: true, disabled: used > 0, onSelect: () => removeSpace(sp.summary.id) }, | |
| ]); | |
| }; | |
| const Chip = ({ def, pinnedChip, dim }: { def: NodeDef; pinnedChip?: boolean; dim?: boolean }) => { | |
| const sp = def.space ? spaces[def.space.id] : undefined; | |
| return ( | |
| <button | |
| type="button" | |
| className="dock-chip" | |
| data-dim={dim || undefined} | |
| style={{ "--chip-accent": typeColor(defAccent(def)) } as React.CSSProperties} | |
| draggable | |
| onDragStart={(e) => onDragStart(e, def)} | |
| onClick={() => onAdd(def)} | |
| onContextMenu={(e) => defMenu(e, def)} | |
| title={`${def.description || def.title}\nClick to add · drag onto the canvas · right-click for options`} | |
| > | |
| {sp ? <span className="dock-chip__emoji">{sp.summary.emoji}</span> : def.category === "Functions" ? <FunctionIcon size={12} /> : <i className="dock-chip__swatch" />} | |
| <span className="truncate">{def.title}</span> | |
| {pinnedChip && <PushPinIcon size={9} weight="fill" className="dock-chip__pin" />} | |
| </button> | |
| ); | |
| }; | |
| const NodeRow = ({ n, depth }: { n: CanvasNode; depth: number }) => { | |
| const def = getDef(n.data.defType); | |
| const sp = def.space ? spaces[def.space.id] : undefined; | |
| const kids = outline.children.get(n.id) ?? []; | |
| const st = n.data.status; | |
| return ( | |
| <> | |
| <button | |
| type="button" | |
| className="wf-node" | |
| data-status={st} | |
| data-selected={n.selected || undefined} | |
| data-mode={n.data.mode !== "always" ? n.data.mode : undefined} | |
| style={{ paddingLeft: 10 + depth * 14 }} | |
| onClick={() => focusNode(n.id)} | |
| title={n.data.error ?? n.data.statusText ?? `${n.data.title ?? def.title} · click to jump to it`} | |
| > | |
| <span className="wf-node__status"> | |
| {st === "running" ? <SpinnerIcon size={12} className="animate-spin" /> : st === "done" ? <CheckIcon size={12} weight="bold" /> : st === "error" ? <WarningIcon size={12} weight="bold" /> : <i className="wf-node__dot" />} | |
| </span> | |
| {sp ? <span className="wf-node__emoji">{sp.summary.emoji}</span> : n.type === "group" ? <FunctionIcon size={12} className="text-kumo-subtle" /> : <i className="wf-node__swatch" style={{ background: typeColor(defAccent(def)) }} />} | |
| <span className="truncate">{n.data.title ?? def.title}</span> | |
| <span className="wf-node__meta"> | |
| {st === "running" && n.data.progress > 0 ? `${Math.round(n.data.progress * 100)}%` : n.data.mode === "bypass" ? "skipped" : n.data.mode === "never" ? "off" : (STATUS_TEXT[st] ?? "")} | |
| </span> | |
| <CrosshairIcon size={12} className="wf-node__jump" /> | |
| </button> | |
| {st === "error" && n.data.error && ( | |
| <div className="wf-node__error" style={{ marginLeft: 10 + depth * 14 }} onClick={() => focusNode(n.id)}> | |
| {n.data.error} | |
| </div> | |
| )} | |
| {kids.map((k) => ( | |
| <NodeRow key={k.id} n={k} depth={depth + 1} /> | |
| ))} | |
| </> | |
| ); | |
| }; | |
| return ( | |
| <div className="min-h-0 flex-1 overflow-y-auto pb-4"> | |
| <div className="@container px-3"> | |
| <Button size="sm" variant="primary" icon={MagnifyingGlassIcon} className="w-full justify-center whitespace-nowrap" onClick={() => openPalette(null)} title={`Find a Space or node (${MOD} K)`}> | |
| <span className="@max-[210px]:hidden">Find a Space or node</span> | |
| <span className="@min-[210px]:hidden">Find</span> | |
| </Button> | |
| </div> | |
| <h3 className="wf-h">Quick add</h3> | |
| <div className="dock"> | |
| {dock.pins.map((d) => ( | |
| <Chip key={d.type} def={d} pinnedChip /> | |
| ))} | |
| {dock.inputs.map((d) => ( | |
| <Chip key={d.type} def={d} /> | |
| ))} | |
| {dock.groups.map((d) => ( | |
| <Chip key={d.type} def={d} /> | |
| ))} | |
| {showHidden && dock.hiddenInputs.map((d) => <Chip key={d.type} def={d} dim />)} | |
| {dock.hiddenInputs.length > 0 && ( | |
| <button type="button" className="dock-chip dock-chip--ghost" onClick={() => setShowHidden((v) => !v)}> | |
| {showHidden ? <EyeSlashIcon size={11} /> : <EyeIcon size={11} />} | |
| {dock.hiddenInputs.length} hidden | |
| </button> | |
| )} | |
| </div> | |
| <p className="wf-hint">Click adds to the canvas, or drag one exactly where you want it. Pin anything from the explorer and it lands here.</p> | |
| <h3 className="wf-h"> | |
| Spaces in this workflow | |
| {entries.length > 0 && <span className="wf-h__count">{entries.length}</span>} | |
| </h3> | |
| {entries.length === 0 ? ( | |
| <p className="wf-hint">None yet. Every Space you add from the explorer shows up here with its status and endpoints.</p> | |
| ) : ( | |
| entries.map((sp) => { | |
| const visible = sp.defs.filter((d) => !hidden.includes(d.type)); | |
| const isOpen = openSpaces[sp.summary.id] ?? false; | |
| const used = usedBy.get(sp.summary.id) ?? 0; | |
| const usable = isUsable(sp.summary.stage); | |
| const fix = sp.status === "error" || (sp.status === "ready" && sp.summary.stage !== "RUNNING" && sp.summary.stage !== "UNKNOWN") ? spaceAction(sp.summary.id, sp, sp.error ?? "") : null; | |
| const hw = hardwareLabel(sp.summary.hardware); | |
| return ( | |
| <div key={sp.summary.id} className="wf-space" data-open={isOpen || undefined}> | |
| <div | |
| className="wf-space__row" | |
| role="button" | |
| tabIndex={0} | |
| aria-expanded={isOpen} | |
| onClick={() => setOpenSpaces((o) => ({ ...o, [sp.summary.id]: !isOpen }))} | |
| onKeyDown={(e) => e.key === "Enter" && setOpenSpaces((o) => ({ ...o, [sp.summary.id]: !isOpen }))} | |
| onContextMenu={(e) => spaceMenu(e, sp)} | |
| > | |
| <span className="wf-space__toggle" aria-hidden> | |
| {isOpen ? <CaretDownIcon size={10} weight="bold" /> : <CaretRightIcon size={10} weight="bold" />} | |
| </span> | |
| <span className="wf-space__emoji">{sp.summary.emoji}</span> | |
| <div className="min-w-0 flex-1"> | |
| <div className="wf-space__title"> | |
| {sp.summary.title} | |
| {sp.summary.private && <LockSimpleIcon size={10} weight="bold" className="ml-1 inline-block align-[-1px] opacity-70" aria-label="Private" />} | |
| </div> | |
| <div className="wf-space__meta"> | |
| {sp.status === "loading" ? ( | |
| <> | |
| <SpinnerIcon size={10} className="animate-spin" /> Loading endpoints… | |
| </> | |
| ) : sp.status === "error" ? ( | |
| <span className="text-kumo-danger">{sp.error ?? "Failed to load"}</span> | |
| ) : ( | |
| <> | |
| <span className="stage-dot" data-stage={sp.summary.stage} /> | |
| <span data-bad={!usable || undefined}>{stageLabel(sp.summary.stage)}</span> | |
| {hw && ( | |
| <span className="hw-tag" data-zero={sp.summary.zeroGpu}> | |
| {hw} | |
| </span> | |
| )} | |
| <span className="opacity-70">· {used ? `${used} on canvas` : "unused"}</span> | |
| </> | |
| )} | |
| </div> | |
| </div> | |
| {sp.status === "loading" ? null : fix ? ( | |
| fix.href ? ( | |
| <a className="wf-space__fix" href={fix.href} target="_blank" rel="noreferrer" onClick={(e) => e.stopPropagation()}> | |
| {fix.label} | |
| </a> | |
| ) : ( | |
| <Button size="xs" variant="ghost" aria-label={fix.label} title={fix.label} onClick={(e) => { e.stopPropagation(); fix.run?.(); }}> | |
| {fix.label} | |
| </Button> | |
| ) | |
| ) : sp.status === "error" || !usable ? ( | |
| <Button size="xs" variant="ghost" shape="square" icon={ArrowClockwiseIcon} aria-label="Check again" title="Check again" onClick={(e) => { e.stopPropagation(); void refreshSpace(sp.summary.id); }} /> | |
| ) : visible.length === 1 ? ( | |
| <Button size="xs" variant="ghost" shape="square" icon={PlusIcon} aria-label="Add to canvas" title="Add to canvas" onClick={(e) => { e.stopPropagation(); onAdd(visible[0]); }} /> | |
| ) : null} | |
| </div> | |
| {isOpen && ( | |
| <div className="wf-space__endpoints"> | |
| {sp.defs.length === 0 && <p className="wf-hint">No callable endpoints.</p>} | |
| {sp.defs.map((d) => { | |
| const off = hidden.includes(d.type); | |
| return ( | |
| <div | |
| key={d.type} | |
| className="lib-item" | |
| data-hidden={off || undefined} | |
| draggable={!off} | |
| onDragStart={(e) => onDragStart(e, d)} | |
| onClick={() => !off && onAdd(d)} | |
| onContextMenu={(e) => defMenu(e, d)} | |
| role="button" | |
| tabIndex={0} | |
| onKeyDown={(e) => e.key === "Enter" && !off && onAdd(d)} | |
| title={`${d.description}\nClick to add · drag onto the canvas`} | |
| > | |
| <span className="truncate">{d.space && sp.defs.length > 1 ? prettyApi(d.space.apiName) : d.title}</span> | |
| <span className="lib-item__dots"> | |
| {Array.from(new Set(d.outputs.map((o) => o.type))).map((t) => ( | |
| <i key={t} className={`port-color-${TYPE_TOKEN[t]}`} title={t} /> | |
| ))} | |
| </span> | |
| <span className="lib-item__actions"> | |
| <button | |
| type="button" | |
| className="lib-item__btn" | |
| data-active={pinned.includes(d.type) || undefined} | |
| aria-label={pinned.includes(d.type) ? "Unpin from dock" : "Pin to dock"} | |
| title={pinned.includes(d.type) ? "Unpin from dock" : "Pin to dock"} | |
| onClick={(e) => { | |
| e.stopPropagation(); | |
| (pinned.includes(d.type) ? unpin : pin)(d.type); | |
| }} | |
| > | |
| <PushPinIcon size={12} weight={pinned.includes(d.type) ? "fill" : "regular"} /> | |
| </button> | |
| <button | |
| type="button" | |
| className="lib-item__btn" | |
| aria-label={off ? "Show endpoint" : "Hide endpoint"} | |
| title={off ? "Show" : "Hide"} | |
| onClick={(e) => { | |
| e.stopPropagation(); | |
| (off ? unhide : hide)(d.type); | |
| }} | |
| > | |
| {off ? <EyeIcon size={12} /> : <EyeSlashIcon size={12} />} | |
| </button> | |
| </span> | |
| </div> | |
| ); | |
| })} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| }) | |
| )} | |
| {nodes.length > 0 && ( | |
| <> | |
| <h3 className="wf-h"> | |
| On the canvas | |
| <span className="wf-h__count">{nodes.length}</span> | |
| </h3> | |
| <div className="wf-outline"> | |
| {outline.roots.map((n) => ( | |
| <NodeRow key={n.id} n={n} depth={0} /> | |
| ))} | |
| </div> | |
| </> | |
| )} | |
| <div ref={ghostRef} className="drag-ghost" aria-hidden /> | |
| {ctx.menu} | |
| </div> | |
| ); | |
| } | |
| /* Templates tab --------------------------------------------------------- */ | |
| function TemplatesTab() { | |
| const workflowId = useCanvasStore((s) => s.workflowId); | |
| const loadTemplate = useCanvasStore((s) => s.loadTemplate); | |
| const { fitView } = useReactFlow(); | |
| const load = async (id: string) => { | |
| await loadTemplate(id); | |
| requestAnimationFrame(() => fitView({ padding: 0.18, duration: 400, maxZoom: 1 })); | |
| }; | |
| return ( | |
| <div className="min-h-0 flex-1 space-y-2 overflow-y-auto px-3 pb-3"> | |
| {TEMPLATES.map((t) => { | |
| const current = t.id === workflowId; | |
| return ( | |
| <div key={t.id} className="rounded-lg p-3 ring-1 ring-kumo-line transition-colors hover:bg-kumo-tint"> | |
| <div className="flex items-center gap-2"> | |
| <span className="text-[13px] font-medium text-kumo-strong">{t.name}</span> | |
| {current && <Badge variant="info">Open</Badge>} | |
| </div> | |
| <p className="mt-1 text-xs leading-relaxed text-kumo-subtle">{t.description}</p> | |
| <div className="mt-2.5 flex items-center justify-between gap-2"> | |
| <span className="truncate font-mono text-[10.5px] text-kumo-placeholder">{t.spaces.join(" · ")}</span> | |
| <Button size="xs" variant={current ? "secondary" : "primary"} onClick={() => void load(t.id)}> | |
| {current ? "Reset" : "Load"} | |
| </Button> | |
| </div> | |
| </div> | |
| ); | |
| })} | |
| </div> | |
| ); | |
| } | |
| export function NodeLibrary() { | |
| const tab = useCanvasStore((s) => s.libraryTab); | |
| const setLibraryTab = useCanvasStore((s) => s.setLibraryTab); | |
| return ( | |
| <div className="flex h-full flex-col"> | |
| <div className="px-3 pt-3 pb-2"> | |
| <Tabs | |
| variant="segmented" | |
| size="sm" | |
| className="w-full" | |
| listClassName="w-full" | |
| value={tab} | |
| onValueChange={(t) => setLibraryTab(t as "workflow" | "templates")} | |
| tabs={[ | |
| { value: "workflow", label: "Workflow" }, | |
| { value: "templates", label: "Templates" }, | |
| ]} | |
| /> | |
| </div> | |
| {tab === "templates" ? <TemplatesTab /> : <WorkflowTab />} | |
| </div> | |
| ); | |
| } | |