@mindlogic-ai/logician-ui 3.1.0 → 3.2.0-alpha.1

package/src/components/Workflow/canvas/DrawerShell/DrawerIssues.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { type ReactNode, useMemo } from 'react';
+import { Box, HStack, VStack } from '@chakra-ui/react';
+
+import { AlertTriangle, TbAlertCircle } from '@/components/Icon';
+import { Subtext } from '@/components/Typography';
+
+import { useWorkflowIssueMessage } from '../../useWorkflowIssueMessage';
+import type { Issue, IssueSeverity } from '../../Workflow.types';
+import { useWorkflowTranslate } from '../../WorkflowContext';
+import { severityCalloutStyle } from '../issueSeverity';
+import { SeverityDot } from '../SeverityDot';
+
+interface DrawerIssuesProps {
+  /**
+   * Issues to surface in the drawer header band, already filtered by the
+   * caller (node drawers pass only orphan / non-field-scoped issues; edge
+   * drawers pass all of theirs). Returns null when empty.
+   */
+  issues: Issue[];
+}
+
+/**
+ * One severity bucket of node/edge issues, rendered as a tinted callout: a
+ * severity icon + a short heading ("Fixes needed" / "Worth checking") on top,
+ * then the messages as a bulleted list beneath. Severities never mix in a box
+ * so the icon, heading and tint stay meaningful.
+ *
+ * Markers use the severity's `dark` tone via `SeverityDot` — the CSS list
+ * `::marker` defaults to a muted grey that reads as an odd low-contrast dot on
+ * the tinted background.
+ */
+function IssueCallout({
+  severity,
+  title,
+  issues,
+  resolveMessage,
+}: {
+  severity: IssueSeverity;
+  title: ReactNode;
+  issues: Issue[];
+  resolveMessage: (issue: Issue) => string;
+}) {
+  const { bg, color, borderColor } = severityCalloutStyle(severity);
+  const Icon = severity === 'error' ? TbAlertCircle : AlertTriangle;
+  return (
+    <Box
+      border="1px solid"
+      borderColor={borderColor}
+      borderRadius="md"
+      bg={bg}
+      px={3}
+      py={2}
+    >
+      <VStack align="stretch" gap={1.5}>
+        <HStack gap={1.5} color={color}>
+          <Icon boxSize="xs" />
+          <Subtext color={color} fontWeight="bold">
+            {title}
+          </Subtext>
+        </HStack>
+        <VStack align="stretch" gap={0.5} ps={1}>
+          {issues.map((issue, i) => (
+            <HStack key={`${issue.code}_${i}`} gap={2} align="flex-start">
+              <SeverityDot severity={severity} tone="dark" mt={1.5} />
+              <Subtext color={color}>{resolveMessage(issue)}</Subtext>
+            </HStack>
+          ))}
+        </VStack>
+      </VStack>
+    </Box>
+  );
+}
+
+/**
+ * Header issue band shared by node and edge drawers: groups the given issues
+ * by severity and renders one tinted `IssueCallout` per non-empty bucket.
+ */
+export function DrawerIssues({ issues }: DrawerIssuesProps) {
+  const resolveIssueMessage = useWorkflowIssueMessage();
+  const translate = useWorkflowTranslate();
+  const grouped = useMemo(
+    () => ({
+      errors: issues.filter((i) => i.severity === 'error'),
+      warnings: issues.filter((i) => i.severity === 'warning'),
+    }),
+    [issues]
+  );
+
+  if (issues.length === 0) return null;
+
+  return (
+    <Box px={4} py={3}>
+      <VStack align="stretch" gap={2}>
+        {grouped.errors.length > 0 ? (
+          <IssueCallout
+            severity="error"
+            title={translate('workflow_drawer_issues_error_title')}
+            issues={grouped.errors}
+            resolveMessage={resolveIssueMessage}
+          />
+        ) : null}
+        {grouped.warnings.length > 0 ? (
+          <IssueCallout
+            severity="warning"
+            title={translate('workflow_drawer_issues_warning_title')}
+            issues={grouped.warnings}
+            resolveMessage={resolveIssueMessage}
+          />
+        ) : null}
+      </VStack>
+    </Box>
+  );
+}

package/src/components/Workflow/canvas/DrawerShell/DrawerShell.tsx

@@ -0,0 +1,408 @@
+'use client';
+
+import { type ComponentType, type ReactNode, useEffect, useMemo } from 'react';
+import { Box, chakra } from '@chakra-ui/react';
+
+import { Button } from '@/components/Button';
+import { TbX } from '@/components/Icon';
+import { Menu } from '@/components/Menu';
+import { Text } from '@/components/Typography';
+
+import { renamedOutputHandle } from '../../connectionRules';
+import { cloneNode } from '../../createNode';
+import type {
+  DockSide,
+  EdgeDrawerRenderProps,
+  GraphEdge,
+  GraphNode,
+  Issue,
+} from '../../Workflow.types';
+import { useWorkflow, useWorkflowTranslate } from '../../WorkflowContext';
+import { BuiltInEdgeInspector, endpointTitle } from '../EdgeInspector';
+import { FloatingCard } from '../FloatingCard';
+import { DrawerHeader } from './DrawerHeader';
+import { DrawerIssues } from './DrawerIssues';
+
+export type NodeInspectorProps = {
+  /**
+   * Which side the inspector docks on. `'right'` (default) renders after the
+   * canvas; `'left'` orders it before the canvas (use when another surface owns
+   * the right rail). Also drives the top gutter — a left dock sits higher since
+   * it has no top-right action card to clear.
+   */
+  dock?: DockSide;
+  /**
+   * Optional host renderer for the edge inspector body. When omitted, edges get
+   * a built-in inspector (editable label + read-only endpoints + delete).
+   */
+  renderEdgeDrawer?: ComponentType<EdgeDrawerRenderProps>;
+};
+
+/**
+ * The built-in node/edge inspector. Mount it as a child of `<Workflow>` to get
+ * the default floating drawer; omit it to own inspection entirely (drive your
+ * own UI off `onSelectionChange`). A node and an edge share this surface: the
+ * editor's `drawerTarget` selects which branch renders. Node bodies come from
+ * the host node-type registry (`def.renderDrawer`); edge bodies come from the
+ * optional `renderEdgeDrawer`, falling back to a built-in label + endpoints
+ * inspector. Renders even in read-only mode (controls disable themselves).
+ */
+export function NodeInspector({
+  dock = 'right',
+  renderEdgeDrawer,
+}: NodeInspectorProps) {
+  const {
+    graph,
+    dispatch,
+    getNodeType,
+    editor,
+    setDrawerTarget,
+    issuesByNode,
+    issuesByEdge,
+    readOnly,
+    hostBridge,
+  } = useWorkflow();
+
+  const target = editor.drawerTarget;
+  const node: GraphNode | null =
+    target?.type === 'node'
+      ? (graph.nodes.find((n) => n.id === target.id) ?? null)
+      : null;
+  const edge: GraphEdge | null =
+    target?.type === 'edge'
+      ? (graph.edges.find((e) => e.id === target.id) ?? null)
+      : null;
+
+  // Target points at something that no longer exists (e.g. just deleted) —
+  // clear it defensively so the drawer doesn't get stuck open on a ghost.
+  useEffect(() => {
+    if (target && !node && !edge) setDrawerTarget(null);
+  }, [target, node, edge, setDrawerTarget]);
+
+  // Render even when read-only: node/edge inspectors disable their own controls
+  // via the `readOnly` flag, so the drawer stays a legible read-only view (used
+  // by the version-history preview). Callers that want it gone simply don't
+  // mount <NodeInspector>.
+  if (!target) return null;
+  if (target.type === 'node') {
+    if (!node) return null;
+    return (
+      // Keyed by node id so switching between two same-kind nodes remounts the
+      // drawer — without this, scroll offset and collapsed-section state from
+      // the previous node carry over to the next one.
+      <NodeDrawer
+        key={node.id}
+        node={node}
+        issuesByNode={issuesByNode}
+        hostBridge={hostBridge}
+        readOnly={readOnly}
+        dock={dock}
+        dispatch={dispatch}
+        getNodeType={getNodeType}
+        graphNodes={graph.nodes}
+        setDrawerTarget={setDrawerTarget}
+      />
+    );
+  }
+  if (!edge) return null;
+  return (
+    <EdgeDrawer
+      edge={edge}
+      issues={issuesByEdge[edge.id] ?? []}
+      hostBridge={hostBridge}
+      readOnly={readOnly}
+      dock={dock}
+      RenderEdge={renderEdgeDrawer}
+    />
+  );
+}
+
+/**
+ * Shared drawer chrome: a floating `Card` inspector with a header + scrollable
+ * body. Kept in its own column (rather than overlaying) so it never covers the
+ * canvas MiniMap; the margin gutter detaches it from the edges and the top
+ * inset clears any floating action controls a host renders in the canvas
+ * top-right.
+ *
+ * `alignSelf="flex-start"` opts the card out of the flex row's stretch so it
+ * sizes to its content rather than the full canvas height; `maxHeight` caps it
+ * at the available column (minus the `mt`/`mb` gutters, kept in sync via the
+ * spacing CSS vars) so a long inspector still scrolls its body instead of
+ * overflowing.
+ */
+function DrawerFrame({
+  header,
+  children,
+  dock,
+}: {
+  header: ReactNode;
+  children: ReactNode;
+  dock: DockSide;
+}) {
+  // A right dock clears the host's top-right action card (mt=20); a left dock
+  // (version-history preview) has nothing above it, so it sits at the same top
+  // gutter as the palette (mt=4).
+  const topInset = dock === 'left' ? 4 : 20;
+  return (
+    <FloatingCard
+      // A left dock renders before the canvas in the flex row; a right dock
+      // after. The host hides the palette when docking left, so order:-1 lands
+      // the inspector at the left edge.
+      order={dock === 'left' ? -1 : undefined}
+      mt={topInset}
+      mb={4}
+      mx={4}
+      alignSelf="flex-start"
+      maxHeight={`calc(100% - var(--chakra-spacing-${topInset}) - var(--chakra-spacing-4))`}
+      display="flex"
+      flexDirection="column"
+    >
+      {header}
+      <Box flex="1" minHeight={0} overflowY="auto">
+        {children}
+      </Box>
+    </FloatingCard>
+  );
+}
+
+/**
+ * Wraps an inspector body in a disabled `<fieldset>` when read-only (version
+ * preview). A disabled fieldset natively disables every form control nested in
+ * it — inputs, textareas, selects, buttons, switches — so the whole inspector
+ * goes read-only without each node type having to gate every control. The
+ * header (close button) lives outside this, so the drawer can still be closed.
+ */
+function ReadOnlyFieldset({
+  readOnly,
+  children,
+}: {
+  readOnly: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <chakra.fieldset disabled={readOnly} border="0" m={0} p={0} minW={0}>
+      {children}
+    </chakra.fieldset>
+  );
+}
+
+function NodeDrawer({
+  node,
+  issuesByNode,
+  hostBridge,
+  readOnly,
+  dock,
+  dispatch,
+  getNodeType,
+  graphNodes,
+  setDrawerTarget,
+}: {
+  node: GraphNode;
+  issuesByNode: Record<string, Issue[]>;
+  hostBridge: unknown;
+  readOnly: boolean;
+  dock: DockSide;
+  dispatch: ReturnType<typeof useWorkflow>['dispatch'];
+  getNodeType: ReturnType<typeof useWorkflow>['getNodeType'];
+  graphNodes: GraphNode[];
+  setDrawerTarget: ReturnType<typeof useWorkflow>['setDrawerTarget'];
+}) {
+  const translate = useWorkflowTranslate();
+  const def = getNodeType(node.kind);
+  const issues = useMemo<Issue[]>(
+    () => issuesByNode[node.id] ?? [],
+    [issuesByNode, node.id]
+  );
+  // Field-scoped issues render inline beneath their inputs via FieldWrapper.
+  // Only node-scoped issues that DON'T target a specific field (e.g.
+  // graph-level "unreachable from start") still need a header surface.
+  const orphanIssues = useMemo(
+    () => issues.filter((i) => !i.fieldKey),
+    [issues]
+  );
+
+  if (!def) return null;
+
+  const Render = def.renderDrawer;
+  const Icon = def.icon;
+  // Title the drawer with the instance (an agent's name), not the kind — with
+  // several same-kind nodes the kind alone doesn't say which one is open. The
+  // kind stays visible as the subtitle (dropped when the node is unnamed and
+  // the title already IS the kind label).
+  const instanceTitle = endpointTitle(node, def, node.id);
+  // Single dispatch path for every config write, so a handle rename (e.g. a
+  // renamed Classify category, whose handle is `cat_<name>`) always moves its
+  // edge instead of orphaning it.
+  const applyConfig = (next: unknown) =>
+    dispatch({
+      type: 'updateNodeConfig',
+      id: node.id,
+      config: next,
+      remapEdgeHandle: renamedOutputHandle(def.handles, node.config, next),
+    });
+
+  const header = (
+    <DrawerHeader
+      icon={
+        <Box color="slate.1200" display="flex" alignItems="center">
+          <Icon boxSize="xs" />
+        </Box>
+      }
+      title={instanceTitle}
+      subtitle={instanceTitle === def.label ? undefined : def.label}
+      lineClampTitle
+      menuItems={
+        // No mutating actions in read-only (version preview) — selection stays
+        // enabled so the node is still inspectable, but Duplicate/Delete are
+        // hidden so the previewed graph can't be edited.
+        !readOnly && !def.placement?.pinned ? (
+          <>
+            <Menu.Item
+              value="duplicate"
+              onClick={() => {
+                const clone = cloneNode(node, graphNodes);
+                dispatch({ type: 'addNode', node: clone });
+                setDrawerTarget({ type: 'node', id: clone.id });
+              }}
+            >
+              {translate('workflow_node_duplicate') as string}
+            </Menu.Item>
+            <Menu.Item
+              value="delete"
+              color="danger.main"
+              onClick={() => {
+                dispatch({ type: 'deleteNode', id: node.id });
+                setDrawerTarget(null);
+              }}
+            >
+              {translate('workflow_node_delete') as string}
+            </Menu.Item>
+          </>
+        ) : undefined
+      }
+      onClose={() => setDrawerTarget(null)}
+    />
+  );
+
+  return (
+    <DrawerFrame header={header} dock={dock}>
+      <DrawerIssues issues={orphanIssues} />
+      <ReadOnlyFieldset readOnly={readOnly}>
+        {Render ? (
+          <Render
+            id={node.id}
+            config={node.config}
+            issues={issues}
+            readOnly={readOnly}
+            hostBridge={hostBridge}
+            onChange={applyConfig}
+          />
+        ) : (
+          <Text color="slate.600" fontSize="sm" px={4} py={4}>
+            {translate('workflow_drawer_empty_settings')}
+          </Text>
+        )}
+      </ReadOnlyFieldset>
+    </DrawerFrame>
+  );
+}
+
+function EdgeDrawer({
+  edge,
+  issues,
+  hostBridge,
+  readOnly,
+  dock,
+  RenderEdge,
+}: {
+  edge: GraphEdge;
+  issues: Issue[];
+  hostBridge: unknown;
+  readOnly: boolean;
+  dock: DockSide;
+  RenderEdge?: ComponentType<EdgeDrawerRenderProps>;
+}) {
+  const translate = useWorkflowTranslate();
+  const { graph, dispatch, getNodeType, setDrawerTarget, setSelectedEdgeId } =
+    useWorkflow();
+
+  const sourceNode = graph.nodes.find((n) => n.id === edge.source);
+  const targetNode = graph.nodes.find((n) => n.id === edge.target);
+  const connectionTitle = translate('workflow_edge_connection', {
+    source: endpointTitle(
+      sourceNode,
+      sourceNode ? getNodeType(sourceNode.kind) : undefined,
+      edge.source
+    ),
+    target: endpointTitle(
+      targetNode,
+      targetNode ? getNodeType(targetNode.kind) : undefined,
+      edge.target
+    ),
+  }) as string;
+
+  const onChange = (next: GraphEdge) =>
+    dispatch({
+      type: 'updateEdge',
+      id: edge.id,
+      patch: { label: next.label },
+    });
+
+  const onDelete = () => {
+    dispatch({ type: 'deleteEdge', id: edge.id });
+    setDrawerTarget(null);
+    setSelectedEdgeId(null);
+  };
+
+  const header = (
+    // Delete moved out of the kebab into an explicit button at the foot of the
+    // drawer (below), so it's discoverable when you just click an edge — the
+    // hover-X on the canvas only appears over the edge's name badge now.
+    <DrawerHeader
+      title={connectionTitle}
+      lineClampTitle
+      onClose={() => setDrawerTarget(null)}
+    />
+  );
+
+  return (
+    <DrawerFrame header={header} dock={dock}>
+      <DrawerIssues issues={issues} />
+      <ReadOnlyFieldset readOnly={readOnly}>
+        {RenderEdge ? (
+          <RenderEdge
+            edge={edge}
+            onChange={onChange}
+            issues={issues}
+            readOnly={readOnly}
+            hostBridge={hostBridge}
+          />
+        ) : (
+          <BuiltInEdgeInspector
+            edge={edge}
+            onChange={onChange}
+            issues={issues}
+            readOnly={readOnly}
+            hostBridge={hostBridge}
+          />
+        )}
+      </ReadOnlyFieldset>
+      {/* Explicit delete affordance for the edge — outside the read-only
+          fieldset, and hidden entirely in the version-history preview. */}
+      {readOnly ? null : (
+        <Box borderTopWidth="1px" borderColor="slate.200" px={4} py={3}>
+          <Button
+            size="sm"
+            variant="outline"
+            colorPalette="danger"
+            width="100%"
+            onClick={onDelete}
+          >
+            <TbX boxSize="xs" />
+            {translate('workflow_edge_delete') as string}
+          </Button>
+        </Box>
+      )}
+    </DrawerFrame>
+  );
+}

package/src/components/Workflow/canvas/DrawerShell/index.ts

@@ -0,0 +1,2 @@
+export type { NodeInspectorProps } from './DrawerShell';
+export { NodeInspector } from './DrawerShell';

package/src/components/Workflow/canvas/EdgeInspector/BuiltInEdgeInspector.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { Box, Stack, VStack } from '@chakra-ui/react';
+
+import { Input } from '@/components/Input';
+import { Subtext } from '@/components/Typography';
+
+import type {
+  EdgeDrawerRenderProps,
+  GraphNode,
+  NodeTypeDef,
+} from '../../Workflow.types';
+import { useWorkflow, useWorkflowTranslate } from '../../WorkflowContext';
+import { FieldWrapper } from '../FieldWrapper';
+import { endpointTitle, findPort } from './endpointTitle';
+
+/**
+ * Author-facing line for the port an edge endpoint sits on. A resolved port
+ * shows its label (Pass / 분기 1 — the same text LabeledEdge rides on the
+ * wire) or nothing when unlabeled (raw ids like `out` are wiring detail). A
+ * DANGLING handle — one no current port matches, e.g. after restoring a
+ * snapshot whose category was renamed — falls back to the raw id, the only
+ * clue left for diagnosing the broken wire.
+ */
+function portLabel(
+  node: GraphNode | undefined,
+  def: NodeTypeDef | undefined,
+  side: 'inputs' | 'outputs',
+  handleId: string | undefined
+): string | undefined {
+  if (!node || !def || !handleId) return undefined;
+  const port = findPort(node, def, side, handleId);
+  return port ? port.label : handleId;
+}
+
+/**
+ * Built-in edge inspector body rendered in `DrawerShell` when the host does not
+ * supply a `renderEdgeDrawer`. Shows an editable label plus read-only endpoint
+ * info (source title → target title, and handle ids when present). Label edits
+ * flow through `onChange` (an `updateEdge` dispatch) so they are undoable.
+ *
+ * Deliberately uses only generic primitives (logician-ui + FieldWrapper) so the
+ * framework core stays domain-free.
+ */
+export function BuiltInEdgeInspector({
+  edge,
+  onChange,
+  readOnly,
+}: EdgeDrawerRenderProps) {
+  const translate = useWorkflowTranslate();
+  const { graph, getNodeType } = useWorkflow();
+
+  const sourceNode = graph.nodes.find((n) => n.id === edge.source);
+  const targetNode = graph.nodes.find((n) => n.id === edge.target);
+  const sourceDef = sourceNode ? getNodeType(sourceNode.kind) : undefined;
+  const targetDef = targetNode ? getNodeType(targetNode.kind) : undefined;
+  const sourceTitle = endpointTitle(sourceNode, sourceDef, edge.source);
+  const targetTitle = endpointTitle(targetNode, targetDef, edge.target);
+
+  return (
+    <Box px={4} py={4}>
+      <VStack align="stretch" gap={4}>
+        <FieldWrapper
+          // Edges have no field-scoped issues in `issuesByField` (which is keyed
+          // by nodeId), so this lookup is intentionally empty — FieldWrapper is
+          // reused purely for its label + layout.
+          nodeId={edge.id}
+          fieldKey="label"
+          label={translate('workflow_edge_label_label') as string}
+        >
+          {({ borderColor }) => (
+            <Input
+              borderColor={borderColor}
+              value={edge.label ?? ''}
+              disabled={readOnly}
+              placeholder={
+                translate('workflow_edge_label_placeholder') as string
+              }
+              onChange={(e) =>
+                onChange({ ...edge, label: e.target.value || undefined })
+              }
+            />
+          )}
+        </FieldWrapper>
+
+        <Stack gap={1.5}>
+          <Subtext fontWeight="semibold" color="slate.1300">
+            {translate('workflow_edge_endpoints_heading') as string}
+          </Subtext>
+          <Stack gap={2}>
+            <EndpointRow
+              label={translate('workflow_edge_source_label') as string}
+              title={sourceTitle}
+              portLabel={portLabel(
+                sourceNode,
+                sourceDef,
+                'outputs',
+                edge.sourceHandle
+              )}
+            />
+            <EndpointRow
+              label={translate('workflow_edge_target_label') as string}
+              title={targetTitle}
+              portLabel={portLabel(
+                targetNode,
+                targetDef,
+                'inputs',
+                edge.targetHandle
+              )}
+            />
+          </Stack>
+        </Stack>
+      </VStack>
+    </Box>
+  );
+}
+
+/** One read-only endpoint line: role label, resolved node title, optional port label. */
+function EndpointRow({
+  label,
+  title,
+  portLabel,
+}: {
+  label: string;
+  title: string;
+  portLabel?: string;
+}) {
+  return (
+    <Stack gap={0.5}>
+      <Subtext color="slate.900">{label}</Subtext>
+      <Subtext color="slate.1200">{title}</Subtext>
+      {portLabel ? <Subtext color="slate.700">{portLabel}</Subtext> : null}
+    </Stack>
+  );
+}

package/src/components/Workflow/canvas/EdgeInspector/endpointTitle.ts

@@ -0,0 +1,38 @@
+import type { GraphNode, HandleDef, NodeTypeDef } from '../../Workflow.types';
+
+/**
+ * Author-facing title for an edge endpoint: the node-type's per-instance title
+ * (e.g. an agent's name) when available, else the type label, else the raw id.
+ *
+ * Shared by the edge inspector (drawer header connection title + endpoint info).
+ */
+export function endpointTitle(
+  node: GraphNode | undefined,
+  def: NodeTypeDef | undefined,
+  fallbackId: string
+): string {
+  if (node && def?.getInstanceTitle) {
+    const title = def.getInstanceTitle(node.config);
+    if (title) return title;
+  }
+  return def?.label ?? fallbackId;
+}
+
+/**
+ * Resolve the port an edge endpoint sits on, from the owning node's current
+ * handle set. `undefined` when the handle id no longer matches any port — a
+ * dangling endpoint (e.g. a restored snapshot referencing a renamed Classify
+ * category).
+ *
+ * Shared by the canvas wire label (LabeledEdge) and the edge inspector so the
+ * two surfaces can't drift on how a port is named.
+ */
+export function findPort(
+  node: GraphNode | undefined,
+  def: NodeTypeDef | undefined,
+  side: 'inputs' | 'outputs',
+  handleId: string | undefined
+): HandleDef | undefined {
+  if (!node || !def || !handleId) return undefined;
+  return def.handles(node.config)[side].find((h) => h.id === handleId);
+}

package/src/components/Workflow/canvas/EdgeInspector/index.ts

@@ -0,0 +1,2 @@
+export { BuiltInEdgeInspector } from './BuiltInEdgeInspector';
+export { endpointTitle, findPort } from './endpointTitle';