@codemation/next-host 0.0.1

package/src/features/workflows/lib/workflowDetail/WorkflowDetailUrlCodec.ts

@@ -0,0 +1,70 @@
+const RUN_PARAM = "run";
+const PANE_PARAM = "pane";
+const NODE_PARAM = "node";
+
+export type WorkflowDetailUrlLocation = Readonly<{
+  selectedRunId: string | null;
+  isRunsPaneVisible: boolean;
+  nodeId: string | null;
+}>;
+
+/** Minimal surface for `URLSearchParams` / Next `ReadonlyURLSearchParams`. */
+export type WorkflowDetailSearchParamsInput = Readonly<{
+  get(name: string): string | null;
+  toString(): string;
+}>;
+
+/**
+ * Encodes and decodes workflow detail shareable query params (`run`, `pane`, `node`).
+ */
+export class WorkflowDetailUrlCodec {
+  static parseSearchParams(searchParams: WorkflowDetailSearchParamsInput): WorkflowDetailUrlLocation {
+    const runRaw = searchParams.get(RUN_PARAM);
+    const selectedRunId = runRaw !== null && runRaw.trim() !== "" ? runRaw.trim() : null;
+    const paneRaw = searchParams.get(PANE_PARAM);
+    const pane: "live" | "executions" | null = paneRaw === "live" || paneRaw === "executions" ? paneRaw : null;
+    const nodeRaw = searchParams.get(NODE_PARAM);
+    const nodeId = nodeRaw !== null && nodeRaw.trim() !== "" ? nodeRaw.trim() : null;
+    const isRunsPaneVisible = selectedRunId !== null || pane === "executions";
+    return {
+      selectedRunId,
+      isRunsPaneVisible,
+      nodeId,
+    };
+  }
+
+  /**
+   * Copies `base`, removes workflow-detail keys, then applies `location`.
+   * Preserves unrelated query keys (e.g. future filters).
+   */
+  static mergeLocationIntoSearchParams(base: URLSearchParams, location: WorkflowDetailUrlLocation): URLSearchParams {
+    const next = new URLSearchParams(base.toString());
+    next.delete(RUN_PARAM);
+    next.delete(PANE_PARAM);
+    next.delete(NODE_PARAM);
+    if (location.selectedRunId) {
+      next.set(RUN_PARAM, location.selectedRunId);
+    } else if (location.isRunsPaneVisible) {
+      next.set(PANE_PARAM, "executions");
+    }
+    if (location.nodeId) {
+      next.set(NODE_PARAM, location.nodeId);
+    }
+    return next;
+  }
+
+  static toQueryString(searchParams: URLSearchParams): string {
+    const s = searchParams.toString();
+    return s;
+  }
+
+  static buildHref(
+    pathname: string,
+    base: WorkflowDetailSearchParamsInput,
+    location: WorkflowDetailUrlLocation,
+  ): string {
+    const merged = WorkflowDetailUrlCodec.mergeLocationIntoSearchParams(new URLSearchParams(base.toString()), location);
+    const qs = merged.toString();
+    return qs.length > 0 ? `${pathname}?${qs}` : pathname;
+  }
+}

package/src/features/workflows/lib/workflowDetail/workflowDetailTypes.ts

@@ -0,0 +1,152 @@
+import type { BinaryAttachment } from "@codemation/core/browser";
+import type { FieldDataNode } from "rc-tree";
+import type { ReactNode } from "react";
+import type {
+  Items,
+  NodeExecutionSnapshot,
+  PersistedRunState,
+  RunSummary,
+  WorkflowDto,
+} from "../../hooks/realtime/realtime";
+
+export type InspectorTab = "input" | "output";
+export type InspectorMode = InspectorTab | "split";
+export type InspectorFormat = "json" | "pretty" | "binary";
+export type CopyState = "idle" | "copied";
+export type ViewedWorkflowContext = "live-workflow" | "historical-run";
+export type PortEntries = ReadonlyArray<readonly [string, Items]>;
+export type WorkflowNode = WorkflowDto["nodes"][number];
+export type WorkflowDiagramNode = WorkflowDto["nodes"][number];
+export type ExecutionNode = Readonly<{
+  node: WorkflowNode;
+  snapshot?: NodeExecutionSnapshot;
+  /** Stable workflow attachment id when `node.id` is a synthetic per-invocation id. */
+  workflowConnectionNodeId?: string;
+}>;
+export type NodeExecutionError = NonNullable<NodeExecutionSnapshot["error"]>;
+export type JsonEditorMode = "pin-output" | "workflow-snapshot";
+/** Per-output-item binary maps for the pin-output dialog (parallel to parsed JSON items). */
+export type PinBinaryMapsByItemIndex = ReadonlyArray<Readonly<Record<string, BinaryAttachment>>>;
+export type JsonEditorState = Readonly<
+  | {
+      mode: "workflow-snapshot";
+      title: string;
+      value: string;
+    }
+  | {
+      mode: "pin-output";
+      title: string;
+      value: string;
+      workflowId: string;
+      nodeId: string;
+      binaryMapsByItemIndex: PinBinaryMapsByItemIndex;
+    }
+>;
+export type ExecutionTreeNode = FieldDataNode<
+  Readonly<{
+    key: string;
+    title?: ReactNode;
+    workflowNode?: WorkflowNode;
+    snapshot?: NodeExecutionSnapshot;
+  }>
+>;
+export type WorkflowRunsSidebarSelectedRun =
+  | Pick<PersistedRunState, "workflowSnapshot" | "executionOptions">
+  | undefined;
+export type WorkflowRunsSidebarRun = RunSummary;
+export type WorkflowRunsSidebarModel = Readonly<{
+  workflowId: string;
+  displayedWorkflow: WorkflowDto | undefined;
+  workflow: WorkflowDto | undefined;
+  workflowError: string | null;
+  error: string | null;
+  displayedRuns: ReadonlyArray<RunSummary> | undefined;
+  runsError: string | null;
+  selectedRunId: string | null;
+  selectedRun: PersistedRunState | undefined;
+}>;
+export type WorkflowRunsSidebarFormatting = Readonly<{
+  formatDateTime: (value: string | undefined) => string;
+  formatRunListWhen: (value: string | undefined) => string;
+  formatRunListDurationLine: (run: Pick<RunSummary, "startedAt" | "finishedAt" | "status">) => string;
+  getExecutionModeLabel: (
+    run: Pick<RunSummary, "executionOptions"> | Pick<PersistedRunState, "executionOptions"> | undefined,
+  ) => string | null;
+}>;
+export type WorkflowRunsSidebarActions = Readonly<{
+  onSelectRun: (runId: string) => void;
+}>;
+export type WorkflowExecutionInspectorNodeActionsModel = Readonly<{
+  viewContext: ViewedWorkflowContext;
+  isRunning: boolean;
+  canEditOutput: boolean;
+  canClearPinnedOutput: boolean;
+}>;
+export type WorkflowExecutionInspectorPaneModel = Readonly<{
+  tab: InspectorTab;
+  format: InspectorFormat;
+  selectedPort: string | null;
+  portEntries: PortEntries;
+  value: unknown;
+  attachments: ReadonlyArray<WorkflowExecutionInspectorAttachmentModel>;
+  emptyLabel: string;
+  showsError: boolean;
+}>;
+export type WorkflowExecutionInspectorAttachmentModel = Readonly<{
+  key: string;
+  itemIndex: number;
+  name: string;
+  contentUrl: string;
+  attachment: BinaryAttachment;
+}>;
+export type PrettyJsonTreeNode = Readonly<{
+  key: string;
+  label: string;
+  isLeaf: boolean;
+  inlineValue?: ReactNode;
+  multilineValue?: string;
+  children?: ReadonlyArray<PrettyJsonTreeNode>;
+}>;
+export type WorkflowInspectorAttachmentGroup = Readonly<{
+  itemIndex: number;
+  attachments: ReadonlyArray<WorkflowExecutionInspectorAttachmentModel>;
+}>;
+export type WorkflowExecutionInspectorModel = Readonly<{
+  workflowId: string;
+  viewContext: ViewedWorkflowContext;
+  selectedRunId: string | null;
+  isLoading: boolean;
+  loadError: string | null;
+  selectedRun: PersistedRunState | undefined;
+  selectedNodeId: string | null;
+  selectedNodeSnapshot: NodeExecutionSnapshot | undefined;
+  selectedWorkflowNode: WorkflowNode | undefined;
+  selectedPinnedOutput: Items | undefined;
+  selectedNodeError: NodeExecutionError | undefined;
+  selectedMode: InspectorMode;
+  inputPane: WorkflowExecutionInspectorPaneModel;
+  outputPane: WorkflowExecutionInspectorPaneModel;
+  executionTreeData: ReadonlyArray<ExecutionTreeNode>;
+  executionTreeExpandedKeys: ReadonlyArray<string>;
+  /** rc-tree key for the selected execution row (may differ from {@link selectedNodeId} when keys are disambiguated). */
+  selectedExecutionTreeKey: string | null;
+  nodeActions: WorkflowExecutionInspectorNodeActionsModel;
+}>;
+export type WorkflowExecutionInspectorFormatting = Readonly<{
+  formatDateTime: (value: string | undefined) => string;
+  formatDurationLabel: (snapshot: NodeExecutionSnapshot | undefined) => string | null;
+  getNodeDisplayName: (node: WorkflowNode | undefined, fallback: string | null) => string;
+  getSnapshotTimestamp: (snapshot: NodeExecutionSnapshot | undefined) => string | undefined;
+  getErrorHeadline: (error: NodeExecutionError | undefined) => string;
+  getErrorStack: (error: NodeExecutionError | undefined) => string | null;
+  getErrorClipboardText: (error: NodeExecutionError | undefined) => string;
+}>;
+export type WorkflowExecutionInspectorActions = Readonly<{
+  onSelectNode: (nodeId: string) => void;
+  onEditSelectedOutput: () => void;
+  onClearPinnedOutput: () => void;
+  onSelectMode: (mode: InspectorMode) => void;
+  onSelectFormat: (tab: InspectorTab, format: InspectorFormat) => void;
+  onSelectInputPort: (portName: string) => void;
+  onSelectOutputPort: (portName: string) => void;
+}>;

package/src/features/workflows/lib/workflowDetailTreeStyles.ts

@@ -0,0 +1,65 @@
+export const WORKFLOW_DETAIL_TREE_STYLES = `
+  @keyframes codemationSpin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  .codemation-execution-tree,
+  .codemation-json-tree {
+    background: transparent;
+    border: none;
+    font-family: inherit;
+  }
+
+  .codemation-execution-tree .rc-tree-node-content-wrapper,
+  .codemation-json-tree .rc-tree-node-content-wrapper {
+    display: inline-block;
+    width: calc(100% - 18px);
+    height: auto;
+    padding: 0;
+    line-height: 1.2;
+    vertical-align: top;
+  }
+
+  .codemation-execution-tree .rc-tree-switcher,
+  .codemation-json-tree .rc-tree-switcher {
+    width: 12px;
+    margin-right: 6px;
+  }
+
+  .codemation-execution-tree .rc-tree-treenode,
+  .codemation-json-tree .rc-tree-treenode {
+    padding: 0 0 4px;
+    line-height: normal;
+  }
+
+  .codemation-execution-tree .rc-tree-treenode {
+    white-space: nowrap;
+  }
+
+  .codemation-json-tree .rc-tree-treenode {
+    white-space: normal;
+  }
+
+  .codemation-execution-tree .rc-tree-title,
+  .codemation-json-tree .rc-tree-title {
+    display: block;
+    width: 100%;
+  }
+
+  .codemation-execution-tree .rc-tree-treenode ul,
+  .codemation-json-tree .rc-tree-treenode ul {
+    padding-left: 20px;
+  }
+
+  .codemation-execution-tree .rc-tree-node-selected {
+    background: transparent;
+    box-shadow: none;
+    opacity: 1;
+  }
+
+  .codemation-execution-tree .rc-tree-node-content-wrapper:hover,
+  .codemation-json-tree .rc-tree-node-content-wrapper:hover {
+    background: transparent;
+  }
+`;

package/src/features/workflows/screens/WorkflowDetailScreen.tsx

@@ -0,0 +1,236 @@
+"use client";
+
+import { useEffect, useMemo, useRef } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+import { WorkflowCanvas } from "../components/canvas/WorkflowCanvas";
+import type { WorkflowDto } from "../hooks/realtime/realtime";
+import { NodePropertiesSlidePanel } from "../components/workflowDetail/NodePropertiesSlidePanel";
+import { useWorkflowDetailController } from "../hooks/workflowDetail/useWorkflowDetailController";
+import { WorkflowJsonEditorDialog } from "../components/workflowDetail/WorkflowJsonEditorDialog";
+import { WorkflowRunsSidebar } from "../components/workflowDetail/WorkflowRunsSidebar";
+import { WORKFLOW_DETAIL_TREE_STYLES } from "../lib/workflowDetailTreeStyles";
+import { WorkflowDetailScreenInspectorPanel } from "./WorkflowDetailScreenInspectorPanel";
+import { useWorkflowDetailChromeDispatch } from "../../../shell/WorkflowDetailChromeContext";
+
+export function WorkflowDetailScreen(args: Readonly<{ workflowId: string; initialWorkflow?: WorkflowDto }>) {
+  const controller = useWorkflowDetailController(args);
+  const setChrome = useWorkflowDetailChromeDispatch();
+  const controllerRef = useRef(controller);
+  controllerRef.current = controller;
+
+  const activationAlertKey = (controller.workflowActivationAlertLines ?? []).join("\u0000");
+  const credentialAttentionKey = controller.credentialAttentionSummaryLines.join("\u0000");
+
+  const chromeStateKey = useMemo(
+    () =>
+      [
+        controller.isLiveWorkflowView,
+        controller.workflowIsActive,
+        controller.isWorkflowActivationPending,
+        activationAlertKey,
+        credentialAttentionKey,
+      ].join("|"),
+    [
+      controller.isLiveWorkflowView,
+      controller.workflowIsActive,
+      controller.isWorkflowActivationPending,
+      activationAlertKey,
+      credentialAttentionKey,
+    ],
+  );
+
+  useEffect(() => {
+    if (!setChrome) {
+      return;
+    }
+    const c = controllerRef.current;
+    setChrome({
+      isLiveWorkflowView: c.isLiveWorkflowView,
+      workflowIsActive: c.workflowIsActive,
+      isWorkflowActivationPending: c.isWorkflowActivationPending,
+      setWorkflowActive: (active) => {
+        controllerRef.current.setWorkflowActive(active);
+      },
+      workflowActivationAlertLines: c.workflowActivationAlertLines,
+      dismissWorkflowActivationAlert: () => {
+        controllerRef.current.dismissWorkflowActivationAlert();
+      },
+      credentialAttentionSummaryLines: c.credentialAttentionSummaryLines,
+    });
+  }, [setChrome, chromeStateKey]);
+
+  useEffect(() => {
+    return () => {
+      setChrome?.(null);
+    };
+  }, [setChrome]);
+
+  const activeCanvasTab = controller.isRunsPaneVisible ? "executions" : "live";
+  const shouldShowRealtimeBadge = controller.isLiveWorkflowView && !controller.isRunsPaneVisible;
+  const realtimeBadge =
+    controller.workflowDevBuildState.state === "failed"
+      ? {
+          className: "border-destructive/40 bg-destructive/10 text-destructive shadow-md ring-1 ring-foreground/10",
+          label: "Rebuild failed. Latest code is not live yet.",
+          testId: "workflow-dev-build-failed-indicator",
+        }
+      : controller.showRealtimeDisconnectedBadge
+        ? {
+            className:
+              "border-amber-400/60 bg-amber-50 text-amber-950 shadow-md ring-1 ring-foreground/10 dark:bg-amber-950/20 dark:text-amber-100",
+            label: "Realtime disconnected. Workflow edits won't auto-refresh.",
+            testId: "workflow-realtime-disconnected-indicator",
+          }
+        : controller.workflowDevBuildState.state === "building"
+          ? {
+              className: "border-primary/40 bg-primary/10 text-primary shadow-md ring-1 ring-foreground/10",
+              label: "Rebuilding workflow...",
+              testId: "workflow-dev-build-started-indicator",
+            }
+          : null;
+
+  return (
+    <main className="h-full w-full min-h-0 overflow-hidden bg-muted/40">
+      <section
+        className={cn(
+          "relative grid h-full min-h-0 w-full min-w-0 overflow-hidden",
+          controller.isRunsPaneVisible ? "grid-cols-[minmax(0,320px)_minmax(0,1fr)]" : "grid-cols-1",
+        )}
+      >
+        {controller.isRunsPaneVisible ? (
+          <WorkflowRunsSidebar
+            model={controller.sidebarModel}
+            formatting={controller.sidebarFormatting}
+            actions={controller.sidebarActions}
+          />
+        ) : null}
+
+        <div
+          className="grid h-full min-h-0 min-w-0 bg-muted/40"
+          style={{
+            gridTemplateRows: controller.isPanelCollapsed
+              ? "minmax(0, 1fr) 36px"
+              : `minmax(0, 1fr) ${controller.inspectorHeight}px`,
+          }}
+        >
+          <div className="relative flex h-full min-h-0 min-w-0 flex-row overflow-hidden bg-muted/40">
+            {controller.displayedWorkflow ? (
+              <>
+                <div className="relative min-h-0 min-w-0 flex-1 overflow-hidden">
+                  <WorkflowCanvas
+                    workflow={controller.displayedWorkflow}
+                    nodeSnapshotsByNodeId={controller.displayedNodeSnapshotsByNodeId}
+                    connectionInvocations={controller.displayedConnectionInvocations}
+                    credentialAttentionTooltipByNodeId={controller.credentialAttentionTooltipByNodeId}
+                    pinnedNodeIds={controller.pinnedNodeIds}
+                    selectedNodeId={controller.selectedNodeId}
+                    propertiesTargetNodeId={controller.propertiesPanelNodeId}
+                    isLiveWorkflowView={controller.isLiveWorkflowView}
+                    isRunning={controller.isRunning}
+                    onSelectNode={controller.selectCanvasNode}
+                    onOpenPropertiesNode={controller.openPropertiesPanelForNode}
+                    onRunNode={controller.runCanvasNode}
+                    onTogglePinnedOutput={controller.toggleCanvasNodePin}
+                    onEditNodeOutput={controller.editCanvasNodeOutput}
+                    onClearPinnedOutput={controller.clearCanvasNodePin}
+                    workflowNodeIdsWithBoundCredential={controller.workflowNodeIdsWithBoundCredential}
+                    onRequestOpenCredentialEditForNode={controller.requestOpenCredentialEditForNode}
+                  />
+                </div>
+                <NodePropertiesSlidePanel
+                  workflowId={args.workflowId}
+                  isOpen={controller.isPropertiesPanelOpen}
+                  node={controller.selectedPropertiesWorkflowNode}
+                  onClose={controller.closePropertiesPanel}
+                  pendingCredentialEditForNodeId={controller.pendingCredentialEditForNodeId}
+                  onConsumedPendingCredentialEdit={controller.consumePendingCredentialEditRequest}
+                />
+              </>
+            ) : (
+              <div className="p-4 text-sm text-muted-foreground">Loading diagram…</div>
+            )}
+            <div className="pointer-events-none absolute top-3 left-1/2 z-[6] flex -translate-x-1/2 items-center gap-2">
+              <div className="pointer-events-auto flex overflow-hidden rounded-lg border border-border bg-card/95 shadow-md ring-1 ring-foreground/10">
+                <Button
+                  type="button"
+                  data-testid="workflow-canvas-tab-live"
+                  variant={activeCanvasTab === "live" ? "default" : "ghost"}
+                  size="sm"
+                  className="h-8 rounded-none border-r border-border px-3 text-xs font-extrabold"
+                  onClick={controller.openLiveWorkflow}
+                  aria-pressed={activeCanvasTab === "live"}
+                >
+                  Live workflow
+                </Button>
+                <Button
+                  type="button"
+                  data-testid="workflow-canvas-tab-executions"
+                  variant={activeCanvasTab === "executions" ? "default" : "ghost"}
+                  size="sm"
+                  className="h-8 rounded-none px-3 text-xs font-extrabold"
+                  onClick={controller.openExecutionsPane}
+                  aria-pressed={activeCanvasTab === "executions"}
+                >
+                  Executions
+                </Button>
+              </div>
+              {controller.canCopySelectedRunToLive ? (
+                <Button
+                  type="button"
+                  data-testid="canvas-copy-to-live-button"
+                  size="sm"
+                  className="pointer-events-auto h-8 px-3 text-xs font-extrabold"
+                  onClick={controller.copySelectedRunToLive}
+                >
+                  Copy to live
+                </Button>
+              ) : null}
+            </div>
+            {controller.isLiveWorkflowView && !controller.isRunsPaneVisible ? (
+              <div className="pointer-events-auto absolute bottom-3 left-1/2 z-[6] -translate-x-1/2">
+                <Button
+                  type="button"
+                  data-testid="canvas-run-workflow-button"
+                  size="sm"
+                  className="h-8 px-3 text-xs font-extrabold"
+                  onClick={controller.runWorkflowFromCanvas}
+                  disabled={controller.isRunning}
+                >
+                  {controller.isRunning ? "Running..." : "Run workflow"}
+                </Button>
+              </div>
+            ) : null}
+            <div className="pointer-events-none absolute top-3 right-3 z-[6] flex max-w-[min(22rem,calc(100%-1.5rem))] flex-col items-end gap-2">
+              {shouldShowRealtimeBadge && realtimeBadge ? (
+                <div
+                  data-testid={realtimeBadge.testId}
+                  className={cn(
+                    "pointer-events-auto rounded-md border px-2.5 py-2 text-xs font-bold",
+                    realtimeBadge.className,
+                  )}
+                >
+                  {realtimeBadge.label}
+                </div>
+              ) : null}
+            </div>
+          </div>
+
+          <WorkflowDetailScreenInspectorPanel controller={controller} />
+        </div>
+      </section>
+      {controller.jsonEditorState ? (
+        <WorkflowJsonEditorDialog
+          state={controller.jsonEditorState}
+          onClose={controller.closeJsonEditor}
+          onSave={(value, binaryMaps) => {
+            controller.saveJsonEditor(value, binaryMaps);
+          }}
+        />
+      ) : null}
+      <style>{WORKFLOW_DETAIL_TREE_STYLES}</style>
+    </main>
+  );
+}

package/src/features/workflows/screens/WorkflowDetailScreenInspectorPanel.tsx

@@ -0,0 +1,55 @@
+import { PanelBottomClose, PanelBottomOpen } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+import { WorkflowExecutionInspector } from "../components/workflowDetail/WorkflowExecutionInspector";
+import type { WorkflowDetailControllerResult } from "../hooks/workflowDetail/useWorkflowDetailController";
+
+export function WorkflowDetailScreenInspectorPanel(props: Readonly<{ controller: WorkflowDetailControllerResult }>) {
+  const { controller } = props;
+  return (
+    <div
+      className={cn(
+        "grid min-h-0 min-w-0 border-t border-border bg-card",
+        controller.isPanelCollapsed ? "grid-rows-[36px]" : "grid-rows-[36px_minmax(0,1fr)]",
+      )}
+    >
+      <div
+        className={cn(
+          "flex cursor-ns-resize select-none items-center justify-between gap-3 bg-card px-3 py-0",
+          !controller.isPanelCollapsed && "border-b border-border",
+        )}
+        onMouseDown={(event) => controller.startInspectorResize(event.clientY)}
+      >
+        <div className="text-xs font-extrabold tracking-wide text-muted-foreground uppercase">Execution inspector</div>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          className="size-7 shrink-0"
+          onClick={(event) => {
+            event.stopPropagation();
+            controller.toggleInspectorPanel();
+          }}
+          aria-label={controller.isPanelCollapsed ? "Open execution inspector" : "Collapse execution inspector"}
+        >
+          {controller.isPanelCollapsed ? (
+            <PanelBottomOpen size={15} strokeWidth={1.9} />
+          ) : (
+            <PanelBottomClose size={15} strokeWidth={1.9} />
+          )}
+        </Button>
+      </div>
+      {!controller.isPanelCollapsed ? (
+        <div className="min-h-0 min-w-0 overflow-hidden">
+          <WorkflowExecutionInspector
+            model={controller.inspectorModel}
+            formatting={controller.inspectorFormatting}
+            actions={controller.inspectorActions}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/features/workflows/screens/WorkflowsList.tsx

@@ -0,0 +1,35 @@
+import type { WorkflowSummary } from "../hooks/realtime/realtime";
+
+import { WorkflowsListTree } from "../components/WorkflowsListTree";
+
+export function WorkflowsList(
+  args: Readonly<{ workflows: ReadonlyArray<WorkflowSummary> | undefined; error: string | null }>,
+) {
+  const { workflows, error } = args;
+
+  if (error) {
+    return (
+      <p className="text-sm text-destructive" data-testid="workflows-load-error">
+        Failed to load workflows: {error}
+      </p>
+    );
+  }
+
+  if (!workflows) {
+    return (
+      <p className="text-sm text-muted-foreground" data-testid="workflows-loading">
+        Loading workflows…
+      </p>
+    );
+  }
+
+  if (workflows.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground" data-testid="workflows-empty">
+        No workflows found.
+      </p>
+    );
+  }
+
+  return <WorkflowsListTree workflows={workflows} />;
+}

package/src/features/workflows/screens/WorkflowsScreen.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import type { WorkflowSummary } from "../hooks/realtime/realtime";
+
+import { useWorkflowsQueryWithInitialData } from "../hooks/realtime/realtime";
+
+import { WorkflowsList } from "./WorkflowsList";
+
+export function WorkflowsScreen(args: Readonly<{ initialWorkflows?: ReadonlyArray<WorkflowSummary> }>) {
+  const { initialWorkflows } = args;
+  const workflowsQuery = useWorkflowsQueryWithInitialData(initialWorkflows);
+  const workflows = workflowsQuery.data;
+  const error = workflowsQuery.error instanceof Error ? workflowsQuery.error.message : null;
+
+  return (
+    <main className="mx-auto max-w-[1100px] px-6 py-6">
+      <header className="flex flex-wrap items-baseline justify-between gap-3">
+        <div>
+          <div className="text-xs font-extrabold uppercase tracking-wide text-muted-foreground">Codemation</div>
+          <h1 className="mb-0 mt-2 text-3xl font-semibold tracking-tight">Workflows</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Framework-managed workflows using the shared Codemation runtime.
+          </p>
+        </div>
+      </header>
+      <section className="mt-8">
+        <WorkflowsList workflows={workflows} error={error} />
+      </section>
+    </main>
+  );
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { CodemationNextHost } from "./server/CodemationNextHost";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}