CSOM-X Working Branch by maxy-shpfy · Pull Request #2028 · TangleML/tangle-ui

maxy-shpfy · 2026-03-29T23:10:30Z

Description

Related Issue and Pull requests

Type of Change

Checklist

I have tested this does not break current pipelines / runs functionality
I have tested the changes on staging

Screenshots (if applicable)

Test Instructions

Additional Comments

+  if (segCount === 0) return [];
+
+  // dp[dir] = best cost so far, exiting in `dir`
+  let dp: [number, number] = [Infinity, Infinity];


maxy-shpfy

V1 Regression Risk Review — File-level annotations for changes outside the V2 scope.

See full analysis: V1 changes tracker

maxy-shpfy · 2026-04-10T04:06:02Z

@@ -1 +1,15 @@
-export const deepClone = <T>(obj: T): T => structuredClone(obj);


Risk: HIGH

What & Why: Replaced structuredClone with JSON.parse(JSON.stringify()) + MobX toJS() unwrapping. V2 uses MobX Keystone for state management; structuredClone throws on MobX observables because they contain non-serializable internal properties.

Risks: 17 V1 callers affected (history manager, autosave, debounced state, node duplication, flex node updates, task replacement, etc.). JSON.parse/stringify loses Date objects, Map, Set, undefined values, Infinity, NaN, and functions that structuredClone preserves. If any V1 code path stores these types in component specs, cloning silently corrupts data. Adds MobX as a runtime dependency of a core utility.

What if reverted? V2 MobX store operations (clone-on-write for undo, autosave snapshots) would throw at runtime. V1 reverts to safe structuredClone semantics.

maxy-shpfy · 2026-04-10T04:06:02Z

@@ -137,7 +137,7 @@ interface ContainerSpec {
 interface ContainerImplementation {


Risk: MEDIUM

What & Why: Exported three previously-private types (ImplementationType, PredicateType, ExecutionOptionsSpec). Changed isGraphImplementation to accept undefined and return false instead of assuming the argument is always defined.

Risks: isGraphImplementation(undefined) now returns false silently instead of throwing. If V1 code passed undefined due to a bug, it was caught immediately before; now it proceeds with a falsy branch, potentially masking logic errors.

What if reverted? V2 model layer loses type imports. Any V2 code calling isGraphImplementation with a potentially-undefined value would need its own guard.

maxy-shpfy · 2026-04-10T04:06:02Z

@@ -5,6 +5,7 @@ import { ToastContainer } from "react-toastify";
 import { useDocumentTitle } from "@/hooks/useDocumentTitle";


Risk: MEDIUM

What & Why: Wrapped the entire layout tree in <PipelineStorageProvider>, which is a V2 service for folder-based pipeline storage (IndexedDB + local filesystem drivers).

Risks: Adds a new React context provider to the V1 root. If PipelineStorageProvider triggers IndexedDB initialization, background fetches, or event listeners on mount, these run on every V1 page load.

What if reverted? V2 pipeline folders, file menu "Save As", and folder breadcrumbs all lose their storage context and break.

maxy-shpfy · 2026-04-10T04:06:03Z

@@ -17,19 +17,7 @@ export const ExportPipelineButton = () => {
  }, [componentSpec]);


Risk: LOW

What & Why: Extracted file-download logic into a standalone exportPipeline() function. Existing button uses it.

Risks: Pure refactoring. Same behavior. exportPipeline is also consumed by V2 fileMenu.actions.ts.

What if reverted? V2 file menu export breaks. V1 unaffected if inline logic restored.

maxy-shpfy · 2026-04-10T04:06:03Z

@@ -142,7 +142,7 @@ const DropdownMenuRadioItem = forwardRef<
  >


Risk: LOW

What & Why: Changed Icon size from null to "sm" in radio items. Added pl-2 padding to DropdownMenuShortcut.

Risks: Visual-only. Affects all dropdown menus globally (radio indicator size, shortcut label spacing).

What if reverted? Dropdown radio indicators and shortcut spacing revert.

maxy-shpfy · 2026-04-10T04:06:03Z

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from "class-variance-authority";


Risk: LOW

What & Why: Added LucideProps spread to allow passing additional SVG attributes (e.g., strokeWidth, color).

Risks: Additive. Existing usages unaffected (extra props just pass through).

What if reverted? V2 icon customization (custom stroke widths, colors) stops working.

maxy-shpfy · 2026-04-10T04:06:03Z

@@ -7,12 +7,14 @@ interface ResizeHandleProps {
  minWidth?: number;


Risk: LOW

What & Why: Added optional onDoubleClick prop to VerticalResizeHandle.

Risks: No behavior change when not provided. Used by V2 floating windows for double-click-to-reset-width.

What if reverted? V2 resize handles lose double-click reset.

github-actions · 2026-04-14T05:13:21Z

🎩 Preview

A preview build has been created at: 11-17-poc_component_spec_object_model/71c859e

maxy-shpfy · 2026-04-14T05:13:32Z

poc: ai sidekick agent #2094
CSOM-X Working Branch #2028 👈 (View in Graphite)
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

maxy-shpfy · 2026-04-14T05:18:21Z

@@ -200,3 +200,39 @@ code {
    display: none; /* Chrome, Safari, Opera */
  }
 }
+
+/* Dialog stack transition animations */


Addition to make dialog transitions smooth

maxy-shpfy · 2026-04-14T05:18:48Z

@@ -544,8 +544,9 @@ export const isContainerImplementation = (
 ): implementation is ContainerImplementation => "container" in implementation;

 export const isGraphImplementation = (
-  implementation: ImplementationType,
-): implementation is GraphImplementation => "graph" in implementation;
+  implementation: ImplementationType | undefined,


Widening typing to accept undefined

maxy-shpfy · 2026-04-14T17:45:46Z


 const DEFAULT_PAGE_SIZE = 10;

-function usePagination<T>(


Extracted into separate file to be reused by multiple components

maxy-shpfy · 2026-04-14T17:47:15Z

-        </TableBody>
-      </Table>
-
-      {totalPages > 1 && (


Extracted into PaginationControls

maxy-shpfy · 2026-04-14T17:51:44Z

+    "mobx": "^6.15.0",
+    "mobx-keystone": "^1.20.0",
+    "mobx-react-lite": "^4.1.1",
+    "prism-react-renderer": "^2.4.1",


Likely will go away - and be replaced with std code highlighter

camielvs · 2026-04-13T23:19:15Z

+            onDragStart={(e: DragEvent<HTMLDivElement>) => {
+              if (!dragData) return;
+              e.dataTransfer.setData("application/x-folder-move", dragData);
+              e.dataTransfer.effectAllowed = "move";
+              if (dragItemCount && dragItemCount > 1) {
+                const ghost = document.createElement("div");
+                ghost.style.cssText =
+                  "position:fixed;top:-1000px;left:-1000px;padding:6px 12px;border-radius:6px;font-size:14px;font-weight:500;color:white;background:#0f172a;box-shadow:0 4px 12px rgba(0,0,0,0.15);white-space:nowrap;";
+                ghost.textContent = `${dragItemCount} items`;
+                document.body.appendChild(ghost);
+                e.dataTransfer.setDragImage(ghost, 0, 0);
+                requestAnimationFrame(() => ghost.remove());
+              }
+              onDragStateChange?.(true);
+            }}
+            onDragEnd={() => onDragStateChange?.(false)}
+            className={dragData ? "cursor-grab" : undefined}
+          >


Can this be moved to a handleDragStart variable?

camielvs · 2026-04-13T23:19:53Z

+              if (dragItemCount && dragItemCount > 1) {
+                const ghost = document.createElement("div");
+                ghost.style.cssText =
+                  "position:fixed;top:-1000px;left:-1000px;padding:6px 12px;border-radius:6px;font-size:14px;font-weight:500;color:white;background:#0f172a;box-shadow:0 4px 12px rgba(0,0,0,0.15);white-space:nowrap;";


does it make sense for this to be fixed at -1000, -1000?

camielvs · 2026-04-13T23:21:31Z

 import NewPipelineButton from "../shared/NewPipelineButton";

-const AppMenu = () => {
+const DefaultAppMenu = () => {


Worth renaming or marking as AppMenuV1?

camielvs · 2026-04-13T23:21:57Z

+  if (pathname.startsWith(RUN_V2_BASE_PATH)) {
+    return null;
+  }


I assume this is future-proofing? I'm not aware of a runs v2

camielvs · 2026-04-14T16:48:27Z

  );
 };

+const RUN_V2_BASE_PATH = "/run-v2";


This should be derived from the route defined in the router

camielvs · 2026-04-14T17:53:03Z

+  const showMoreButton = componentSpec?.name ? (
+    <RecentExecutionsButton pipelineName={componentSpec.name} />
+  ) : null;


Suggested change

const showMoreButton = componentSpec?.name ? (

<RecentExecutionsButton pipelineName={componentSpec.name} />

) : null;

const showMoreButton = !!componentSpec?.name &&

<RecentExecutionsButton pipelineName={componentSpec.name} />

camielvs · 2026-04-14T17:55:16Z

nice. clean file :D

camielvs · 2026-04-14T17:55:35Z

+    <InlineStack
+      align="space-between"
+      gap="0"
+      className="px-4 py-2 bg-gray-50 border-b w-full z-1"


reason for z-1?

camielvs · 2026-04-14T17:56:03Z

+                      >
+                        {isRoot ? (
+                          <InlineStack align="start" gap="1">
+                            <Home className="w-3 h-3" />


Icon primitive

camielvs · 2026-04-14T17:56:15Z

+                    <BreadcrumbPage>
+                      {isRoot ? (
+                        <InlineStack align="start" gap="1">
+                          <Home className="w-3 h-3" />


Icon primitive

camielvs · 2026-04-14T17:58:30Z

+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <div className="text-xs text-gray-500">


Paragraph primitive

camielvs · 2026-04-14T17:58:47Z

+
+    if (input.type) result.type = input.type;
+    if (input.description) result.description = input.description;
+    if (input.defaultValue) result.default = input.defaultValue;


🤖 This is an AI-generated code review comment.

Falsy default value silently dropped during serialization

if (input.defaultValue) result.default = input.defaultValue;

InputSpec.default is typed as string | undefined, so "" (empty string) is a structurally valid default value. This falsy check drops it silently — a pipeline with default: "" would lose that field on roundtrip.

Fix:

if (input.defaultValue !== undefined) result.default = input.defaultValue;

camielvs · 2026-04-14T17:58:55Z

+}
+
+export function isInputRequired(input: InputSpec): boolean {
+  return !input.optional && !input.default;


🤖 This is an AI-generated code review comment.

isInputRequired misclassifies empty-string default as "no default"

export function isInputRequired(input: InputSpec): boolean { return !input.optional && !input.default; }

InputSpec.default is string | undefined. The falsy check !input.default returns true for an empty string (""), which is a valid default — so an input with default: "" would incorrectly generate a MISSING_REQUIRED_INPUT validation error.

Fix:

return !input.optional && input.default === undefined;

camielvs · 2026-04-14T17:59:05Z

+      }
+
+      dialog.reject(createCancellationError());
+      onClose(dialog.id);


🤖 This is an AI-generated code review comment.

Renderer calls reject then resolve on the same promise

In handleOpenChange and dialogProps.cancel:

dialog.reject(createCancellationError()); onClose(dialog.id); // internally calls resolver.resolve() — no-op but misleading

onClose is the provider's close(), which calls resolver.resolve(result) before cleaning up. Since the promise is already settled (rejected), the resolve is a no-op — so it doesn't break anything. But the renderer is bypassing the provider's cancel abstraction by calling reject directly. This makes the code harder to reason about and means the renderer has implicit knowledge of the provider's internals.

Suggested approach: pass an onCancel prop (backed by the provider's cancel()) to DialogRenderer, so the renderer doesn't need to call reject directly.

camielvs · 2026-04-14T17:59:13Z

+      }
+    }
+    previousStackLength.current = stack.length;
+  }, [disabled, stack.length, navigate, searchParams, stack, closingDialogIds]);


🤖 This is an AI-generated code review comment.

Redundant stack.length dep alongside stack

}, [disabled, stack.length, navigate, searchParams, stack, closingDialogIds]);

stack as a dependency already covers changes to stack.length. The duplicate is unnecessary.

Fix: remove stack.length from the array.

Mbeaulne · 2026-04-14T19:50:05Z

Clicking on a handle now highlights the prop in the properties panel. Previously it would highlight all of the edges it was connected to.

camielvs

Initial thoughts and comments throughout the code. UX stuff has been noted in Slack thread.

Some notable items to highlight:

Pack & unpack subgraph is buggy
Undo/redo needs improvement
Pipeline validation is returning false positives and the availability of the submission functionality is not clear
Some top nav buttons don't appear to do anything when clicked
We need to provide a couple of default window layouts, and the first time the v2 editor is loaded it should have one of these already applied (ideally one that is similar to the existing v1 layout)
Selection state seems to persist even after deleting a node or otherwise visually deselecting it
Window behaviour can feel a bit awkward when not docked
Pipeline renaming does not work

camielvs · 2026-04-14T17:59:36Z

+ * Uses ResizeObserver to detect content size changes and applies CSS transitions.
+ * During shrink transitions, overflow is visible to prevent content clipping.
+ */
+export function AnimatedHeight({


I see this is only used inside the new dialog component. For exactly which scenario does it apply?

camielvs · 2026-04-14T22:00:25Z

+  ["task-component-ref-bar"]: {
+    name: "Task Component Ref Bar",
+    description:
+      "When enabled, the Component Ref Bar is shown in the Task Details panel moving some of the actions to the Actions section.",
+    default: true,
+    category: "setting",
+  },


I'm not sure I understand what this is actually referring to

After playing with things I see what this setting is changing. imo we don't need this setting; it should be default "true" behaviour. in "false" mode it just doesn't work well with the rest of the new UX

camielvs · 2026-04-14T23:10:24Z

+  ["snap-properties-to-node"]: {
+    name: "Position Properties near selected node",
+    description:
+      "When enabled, the floating Properties window is automatically positioned next to the selected node.",
+    default: false,
+    category: "setting",
+  },


Not sure if intended but this setting appears to not work with multiselect

camielvs · 2026-04-15T00:39:48Z

There are some bugs somewhere in here:

tasks moved into a subgraph seem to loose their annotations (or at least cache setting)

multiple inputs with the same name across different tasks are not handled correctly - we end up with multiple input nodes with the same name, some of which will not be connected to anything. we should be checking the original connections to see what is connected to what and then determine from there exactly what inputs we need to create and link up

positioning of generated input or output nodes in the subgraph could be improved

Before creating & unpacking a subgraph

Inside the created subgraph

After unpacking again

camielvs · 2026-04-15T00:43:17Z

There is a bug somewhere in here where multiple inputs with the same name leads to multiple input connects on the unpacked graph

(see trainer name task input in pics below)

Before creating a subgraph

After unpacking

camielvs · 2026-04-15T01:25:56Z

I don't recall seeing Google Drive anywhere during my adventures. Where/what is this used for?

camielvs · 2026-04-15T01:39:17Z

Run Actions being its own window feels excessive

camielvs · 2026-04-15T01:39:47Z

+
+  // ad-hoc solution to display "Link" action
+  const taskNode = {
+    nodeId: taskName,


isn't this the exact kind of scenario we're trying to fix with the rewrite?

camielvs · 2026-04-15T01:51:05Z

+        <Button
+          onClick={handleOpenLogs}
+          variant="outline"
+          size="sm"
+          className="absolute -z-1 -top-8 right-0"
+        >
+          <Icon name="ScrollText" size="xs" />
+          Open Logs
+        </Button>


I understand what you're trying to do but I'm not sure I agree with the implementation. It's going to be quite messy on a busy pipeline. However, at the moment I don't have a better suggestion

That's a PoC - not a final product, a demo that we can use different components in Editor and RunView to cater the best ux we can craft.

camielvs · 2026-04-15T01:53:42Z

imo windows should have at least a little padding to the text content at the bottom

Mbeaulne · 2026-04-15T15:23:34Z

Validation, from a subgraph, doesn't get surfaced to the top and you can submit a broken pipeline if there are validation errors in subgraphs. the Pipeline structure window picks up the validation but the validation under the details as well as the submit run button do not.

…osition

github-code-quality Bot found potential problems Mar 29, 2026

View reviewed changes

maxy-shpfy changed the title ~~11 17 poc component spec object model~~ CSOM-X Working Branch Apr 4, 2026

maxy-shpfy force-pushed the 11-17-poc_component_spec_object_model branch from 6e7eec5 to 7f54b42 Compare April 4, 2026 00:58

github-code-quality Bot found potential problems Apr 4, 2026

View reviewed changes

Comment thread src/components/ui/animated-height.tsx Dismissed

Comment thread src/routes/v2/shared/windows/DockArea.tsx Dismissed

maxy-shpfy marked this pull request as ready for review April 4, 2026 01:33

maxy-shpfy requested a review from a team as a code owner April 4, 2026 01:33

maxy-shpfy marked this pull request as draft April 4, 2026 01:33

maxy-shpfy commented Apr 10, 2026

View reviewed changes

maxy-shpfy force-pushed the 11-17-poc_component_spec_object_model branch from cbb8625 to 74b6dde Compare April 14, 2026 05:13

maxy-shpfy force-pushed the 11-17-poc_component_spec_object_model branch from 74b6dde to c9a8ef6 Compare April 14, 2026 05:16

maxy-shpfy commented Apr 14, 2026

View reviewed changes

maxy-shpfy force-pushed the 11-17-poc_component_spec_object_model branch from c9a8ef6 to 554786f Compare April 14, 2026 06:11

maxy-shpfy commented Apr 14, 2026

View reviewed changes

camielvs reviewed Apr 14, 2026

View reviewed changes

camielvs reviewed Apr 15, 2026

View reviewed changes

maxy-shpfy mentioned this pull request Apr 15, 2026

poc: ai sidekick agent #2094

Draft

8 tasks

maxy-shpfy force-pushed the 11-17-poc_component_spec_object_model branch from b436d06 to 0bd9008 Compare April 16, 2026 00:30

maxy-shpfy marked this pull request as ready for review April 16, 2026 17:38

maxy-shpfy added 14 commits April 16, 2026 11:02

- fix: fix failed checks

77a13a1

- refactor: improves and tidy-ups

1865746

- chore: reduse risks to v1

09d2c50

- fix: node drops on canvas

98b7756

- chore: revery codesyntaxhighlighter changes

5982b38

- chore: revert yaml.ts changes

cafaf8f

- chore: remove io type usage and use conventional input output nodes

d89ec6c

- refactor: optimizations

5ef5f0f

- fix: db initial registry creation

f417d55

- chore: remove "task-component-ref-bar" beta flag

5d3a69c

- chore: remove "vibed" task node

eebea18

- feat: colored header on classic node

7986906

- chore: tmp remove beta flag to control properties floating window p…

dd18905

…osition

- chore: after-sync fix

71c859e

maxy-shpfy force-pushed the 11-17-poc_component_spec_object_model branch from f4f4cb1 to 71c859e Compare April 16, 2026 18:03

maxy-shpfy merged commit cad9e94 into master Apr 16, 2026
17 checks passed

maxy-shpfy deleted the 11-17-poc_component_spec_object_model branch April 16, 2026 18:07

		@@ -1 +1,15 @@
		export const deepClone = <T>(obj: T): T => structuredClone(obj);

		@@ -137,7 +137,7 @@ interface ContainerSpec {
		interface ContainerImplementation {

		@@ -5,6 +5,7 @@ import { ToastContainer } from "react-toastify";
		import { useDocumentTitle } from "@/hooks/useDocumentTitle";

		@@ -17,19 +17,7 @@ export const ExportPipelineButton = () => {
		}, [componentSpec]);

		@@ -142,7 +142,7 @@ const DropdownMenuRadioItem = forwardRef<
		>

		@@ -1,5 +1,5 @@
		import { cva, type VariantProps } from "class-variance-authority";

		@@ -7,12 +7,14 @@ interface ResizeHandleProps {
		minWidth?: number;

Conversation

maxy-shpfy commented Mar 29, 2026

Description

Related Issue and Pull requests

Type of Change

Checklist

Screenshots (if applicable)

Test Instructions

Additional Comments

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

maxy-shpfy left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Risk: HIGH

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Risk: MEDIUM

Uh oh!

Choose a reason for hiding this comment

Risk: MEDIUM

Uh oh!

Choose a reason for hiding this comment

Risk: LOW

Uh oh!

Choose a reason for hiding this comment

Risk: LOW

Uh oh!

Choose a reason for hiding this comment

Risk: LOW

Uh oh!

Choose a reason for hiding this comment

Risk: LOW

Uh oh!

Uh oh!

github-actions Bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎩 Preview

Uh oh!

maxy-shpfy commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

maxy-shpfy left a comment •

edited

Loading

github-actions Bot commented Apr 14, 2026 •

edited

Loading

maxy-shpfy commented Apr 14, 2026 •

edited

Loading