@parallelworks/ui 0.38.0 → 0.39.0

package/README.md

@@ -10,7 +10,7 @@ so an application ships only what it imports:
 | `./icons` | the icon barrel |
 | `./list` | list pages, tables, row menus and list controls |
 | `./form` | `DynamicForm` and its field registry |
-| `./graph` | job dependency graph and tree view |
+| `./graph` | job dependency graph and tree view, and the visual workflow editor: the graph, the run form as an inputs editor, and their dialogs |
 | `./editor` | Monaco editor (`monaco-editor` is an optional peer); YAML validation, completion and hover run in a bundled worker |
 | `./logviewer` | log viewer with ANSI color and search |
 | `./file-explorer` | object storage explorer over a host-supplied provider |

package/dist/ai/components/ChatInput.js

@@ -6,6 +6,7 @@ import { useChat } from "../core/ChatProvider.js";
 import AttachmentUpload from "./AttachmentUpload.js";
 import useDragDrop from "../core/useDragDrop.js";
 import { ComposerContext, ComposerControls, ComposerSettings } from "./ComposerChrome.js";
+import { clearDraft, readDraft, storeDraft, sweepDrafts } from "./chatDraft.js";
 import DragOverlay from "./DragOverlay.js";
 import { PasteFileCard } from "./PastedText.js";
 import { SlashMenu, useSlashMenu } from "./SlashMenu.js";
@@ -14,29 +15,6 @@ import cx from "classnames";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatInput.tsx
-var DRAFT_STORAGE_PREFIX = "aiChatDraft:";
-var DRAFT_MAX_LENGTH = 1e4;
-function draftKey(conversationId) {
-	return `${DRAFT_STORAGE_PREFIX}${conversationId ?? "new"}`;
-}
-function readDraft(conversationId) {
-	try {
-		return window.localStorage.getItem(draftKey(conversationId)) ?? "";
-	} catch {
-		return "";
-	}
-}
-function storeDraft(conversationId, text) {
-	try {
-		if (!text || text.length > DRAFT_MAX_LENGTH) window.localStorage.removeItem(draftKey(conversationId));
-		else window.localStorage.setItem(draftKey(conversationId), text);
-	} catch {}
-}
-function clearDraft(conversationId) {
-	try {
-		window.localStorage.removeItem(draftKey(conversationId));
-	} catch {}
-}
 /** An optional box that is still empty should not wear the filled look of
 *  one waiting to send something. */
 function sendability({ hasText, canFlushQueue, allowEmpty, disabled, modelReady, pendingCount }) {
@@ -88,8 +66,15 @@ function streamControls(chat, turn) {
 		queuedCount: chat.queuedMessages.length
 	};
 }
+var draftsSwept = false;
 var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEditLastMessage, allowEmpty = false, attachments: attachmentsWanted = true, requireModel = true, inputLabel, sendLabel, sendTestId, slash, notices, activity, context, reserveContext = false, settingsLeft, settingsRight = /* @__PURE__ */ jsx(ComposerControls, {}), hint, turn, pastes }, ref) {
 	const [input, setInput] = useState(() => readDraft(conversationId));
+	useEffect(() => {
+		if (!draftsSwept) {
+			draftsSwept = true;
+			sweepDrafts();
+		}
+	}, []);
 	const { cards, handleTextPaste, removeCard, takeCards, blocking: pastesBlocking } = usePasteCards(pastes, input, (value) => {
 		setInput(value);
 		storeDraft(conversationId, value);

package/dist/ai/components/chatDraft.d.ts

@@ -0,0 +1,7 @@
+export declare const DRAFT_MAX_LENGTH = 10000;
+export declare const DRAFT_TTL_MS: number;
+export declare function readDraft(conversationId?: string): string;
+export declare function storeDraft(conversationId: string | undefined, text: string): void;
+export declare function clearDraft(conversationId?: string): void;
+/** Removes expired drafts, and starts the clock on ones stored without an age. */
+export declare function sweepDrafts(now?: number): void;

package/dist/ai/components/chatDraft.js

@@ -0,0 +1,66 @@
+//#region src/ai/components/chatDraft.ts
+var DRAFT_STORAGE_PREFIX = "aiChatDraft:";
+var DRAFT_MAX_LENGTH = 1e4;
+var DRAFT_TTL_MS = 2592e6;
+function draftKey(conversationId) {
+	return `${DRAFT_STORAGE_PREFIX}${conversationId ?? "new"}`;
+}
+/** Older versions stored the bare text, which has no age. */
+function parseDraft(raw) {
+	try {
+		const parsed = JSON.parse(raw);
+		if (typeof parsed === "object" && parsed !== null && typeof parsed.text === "string" && typeof parsed.savedAt === "number") return parsed;
+	} catch {}
+	return { text: raw };
+}
+var expired = (savedAt, now) => now - savedAt > DRAFT_TTL_MS;
+function readDraft(conversationId) {
+	try {
+		const raw = window.localStorage.getItem(draftKey(conversationId));
+		if (raw === null) return "";
+		const draft = parseDraft(raw);
+		return draft.savedAt !== void 0 && expired(draft.savedAt, Date.now()) ? "" : draft.text;
+	} catch {
+		return "";
+	}
+}
+function storeDraft(conversationId, text) {
+	try {
+		if (!text || text.length > 1e4) window.localStorage.removeItem(draftKey(conversationId));
+		else {
+			const draft = {
+				text,
+				savedAt: Date.now()
+			};
+			window.localStorage.setItem(draftKey(conversationId), JSON.stringify(draft));
+		}
+	} catch {}
+}
+function clearDraft(conversationId) {
+	try {
+		window.localStorage.removeItem(draftKey(conversationId));
+	} catch {}
+}
+/** Removes expired drafts, and starts the clock on ones stored without an age. */
+function sweepDrafts(now = Date.now()) {
+	try {
+		const storage = window.localStorage;
+		const keys = [];
+		for (let i = 0; i < storage.length; i++) {
+			const key = storage.key(i);
+			if (key?.startsWith(DRAFT_STORAGE_PREFIX)) keys.push(key);
+		}
+		for (const key of keys) {
+			const raw = storage.getItem(key);
+			if (raw === null) continue;
+			const draft = parseDraft(raw);
+			if (draft.savedAt === void 0) storage.setItem(key, JSON.stringify({
+				text: draft.text,
+				savedAt: now
+			}));
+			else if (expired(draft.savedAt, now)) storage.removeItem(key);
+		}
+	} catch {}
+}
+//#endregion
+export { DRAFT_MAX_LENGTH, DRAFT_TTL_MS, clearDraft, readDraft, storeDraft, sweepDrafts };

package/dist/editing.d.ts

@@ -406,6 +406,8 @@ export interface WorkflowEditing {
     inputChildrenKey: (type: unknown) => string | undefined;
     isValidInputName: (name: string) => boolean;
     newInputName: (existing: Iterable<string>) => string;
+    /** The name an `addJob` edit gives the job it adds. */
+    newJobName: (existing: Iterable<string>) => string;
     /** `base`, or `base_2`, `base_3`… when it's taken. */
     nextName: (taken: Iterable<string>, base: string) => string;
     /** The first of `candidate(1)`, `candidate(2)`… that `taken` doesn't hold. */

package/dist/editor/Monaco.js

@@ -1,11 +1,11 @@
 import { useCssIsDark } from "../components/useCssIsDark.js";
 import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
+import { lintContext, useLintEditing, useLintSources } from "./lintContext.js";
 import { publishNestedText } from "./nestedText.js";
 import { registerRevealer } from "./reveal.js";
 import { defineEditorThemes, getThemeName } from "./themes.js";
 import { setupMonacoWorkers } from "./workers.js";
 import { holdListeners, modelFor } from "./editorModel.js";
-import { lintContext, useLintEditing, useLintSources } from "./lintContext.js";
 import { ensureYamlLanguage } from "./yamlLanguage.js";
 import cx from "classnames";
 import { useEffect, useLayoutEffect, useRef } from "react";

package/dist/editor/index.js

@@ -1,8 +1,8 @@
+import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
 import { INPUT_YAML_PATH, JOB_YAML_PATH, SETTINGS_YAML_PATH, STEP_YAML_PATH, settingsSchemas } from "./settingsYaml.js";
 import Editor from "./Editor.js";
 import EditorField from "./EditorField.js";
 import FormCodePanel from "./FormCodePanel.js";
-import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
 import { nestedWorkflowText } from "./nestedText.js";
 import { revealLines } from "./reveal.js";
 import { defineEditorThemes, getThemeName } from "./themes.js";

package/dist/editor/lintContext.js

@@ -1,7 +1,7 @@
-import { useLoadedWorkflowEngine, useRepoSuggestions, useSecretVariablesResolver, useWorkflowActions, useWorkflowJsonResolver } from "../components/Provider.js";
+import { useLoadedWorkflowEngine, useRepoSuggestions, useSecretVariablesResolver, useWorkflowActions, useWorkflowEditing, useWorkflowJsonResolver } from "../components/Provider.js";
 import { asRecord } from "../graph/records.js";
-import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
 import { DEFAULT_GITLAB_HOST, DEFAULT_REPO_YAML, loadUsesInputs } from "../graph/usesInputs.js";
+import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
 import { useEffect, useMemo, useState } from "react";
 //#region src/editor/lintContext.ts
 var KEEP_MS = 6e4;
@@ -112,6 +112,18 @@ function useLintSources() {
 		actions
 	]);
 }
+/** lintContext for a component, which renders again when more of it arrives. */
+function useLintContext(source) {
+	const editing = useWorkflowEditing();
+	const sources = useLintSources();
+	const [arrivals, setArrivals] = useState(0);
+	return useMemo(() => source === void 0 ? {} : lintContext(editing, source, sources, () => setArrivals((n) => n + 1)), [
+		editing,
+		source,
+		sources,
+		arrivals
+	]);
+}
 /**
 * The engine's editing once its checks have loaded, rendering again when they have; undefined
 * before then, without an engine that edits, or with `load` false.
@@ -133,4 +145,4 @@ function useLintEditing(load = true) {
 	return load && ready ? engine?.editing : void 0;
 }
 //#endregion
-export { HOST_MARKER_OWNER, LINT_OWNER, lintContext, useLintEditing, useLintSources };
+export { HOST_MARKER_OWNER, LINT_OWNER, lintContext, useLintContext, useLintEditing, useLintSources };

package/dist/graph/DependencyGraph.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { GraphLayout } from '../editing.js';
 import type { MatrixGroup, WorkflowEngine } from '../engine.js';
+import type { DependencyGraphEditor } from './editorApi.js';
 import { type RunLink, type WorkflowJob } from './types.js';
 export type ViewMode = 'dag' | 'tree';
 export declare const addCleanupSteps: ({ jobs }: {
@@ -17,6 +18,7 @@ export declare function computeGraphLayout(engine: WorkflowEngine, jobs: Record<
     ancestorDists: Record<string, Map<string, number>>;
     descendantDists: Record<string, Map<string, number>>;
 };
+export declare function intoView(start: number, end: number, low: number, high: number): number;
 interface GraphRun {
     id?: string | undefined;
     number?: number | undefined;
@@ -29,20 +31,25 @@ interface GraphRun {
     executedJobs?: Record<string, unknown> | undefined;
     links?: Record<string, RunLink> | undefined;
 }
-export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, yamlJobs, fixedHeight, }: {
+export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, }: {
     run: GraphRun;
     preview?: boolean;
     removeBorder?: boolean | undefined;
     viewMode?: ViewMode;
     setViewMode?: (mode: ViewMode) => void;
     layout?: GraphLayout | undefined;
+    editor?: DependencyGraphEditor | undefined;
     yamlJobs?: Record<string, unknown> | undefined;
+    inputs?: Record<string, unknown> | undefined;
+    /** The workflow as written, for what the editor's expressions can read. */
+    workflow?: Record<string, unknown> | undefined;
     fixedHeight?: string | undefined;
 }): React.JSX.Element | undefined;
 export declare function DependencyGraphPreview(inputs: {
     yml?: Record<string, unknown>;
     removeBorder?: boolean;
     layout?: GraphLayout | undefined;
+    editor?: DependencyGraphEditor | undefined;
     /** A fixed panel height; without one the panel is only as tall as the graph. */
     height?: string | undefined;
 }): React.JSX.Element;