orcheo-studio 0.21.1

package/src/features/workflow/lib/workflow-storage.types.ts

@@ -0,0 +1,261 @@
+import type {
+  Workflow,
+  WorkflowEdge,
+  WorkflowNode,
+} from "@features/workflow/data/workflow-data";
+import type { WorkflowDiffResult, WorkflowSnapshot } from "./workflow-diff";
+import type { RJSFSchema } from "@rjsf/utils";
+
+export interface ApiWorkflow {
+  id: string;
+  handle?: string | null;
+  name: string;
+  slug: string;
+  description: string | null;
+  draft_access?: "personal" | "authenticated" | "workspace";
+  tags: string[];
+  is_archived: boolean;
+  is_public: boolean;
+  require_login: boolean;
+  published_at: string | null;
+  published_by: string | null;
+  created_at: string;
+  updated_at: string;
+  share_url?: string | null;
+  chatkit?: WorkflowChatKitConfig | null;
+  latest_version?: ApiWorkflowVersion | null;
+  is_scheduled?: boolean;
+}
+
+export interface ChatKitStartScreenPrompt {
+  label: string;
+  prompt: string;
+  icon?: string | null;
+}
+
+export interface ChatKitSupportedModel {
+  id: string;
+  label?: string | null;
+  description?: string | null;
+  disabled?: boolean;
+  default?: boolean;
+}
+
+export interface WorkflowChatKitConfig {
+  start_screen_prompts?: ChatKitStartScreenPrompt[] | null;
+  supported_models?: ChatKitSupportedModel[] | null;
+}
+
+export interface ApiWorkflowVersionSummary {
+  id: string;
+  workflow_id: string;
+  version: number;
+  mermaid?: string | null;
+  has_cron_trigger?: boolean;
+  metadata: unknown;
+  runnable_config?: WorkflowRunnableConfig | null;
+  notes: string | null;
+  created_by: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ApiWorkflowPageData {
+  workflow: ApiWorkflow;
+  versions?: ApiWorkflowVersionSummary[];
+}
+
+export type ApiWorkflowPagePayload = ApiWorkflow | ApiWorkflowPageData;
+
+export interface PublicWorkflowMetadata {
+  id: string;
+  handle?: string | null;
+  name: string;
+  description: string | null;
+  is_public: boolean;
+  require_login: boolean;
+  share_url: string | null;
+  chatkit?: WorkflowChatKitConfig | null;
+}
+
+export interface WorkflowRunnableConfig {
+  configurable?: Record<string, unknown>;
+  run_name?: string;
+  tags?: string[];
+  metadata?: Record<string, unknown>;
+  callbacks?: unknown[];
+  recursion_limit?: number;
+  max_concurrency?: number;
+  prompts?: Record<string, unknown>;
+}
+
+export interface ApiWorkflowVersion extends ApiWorkflowVersionSummary {
+  graph: Record<string, unknown>;
+}
+
+export interface ApiWorkflowRun {
+  id: string;
+  workflow_id: string;
+  workflow_version_id: string;
+  status: string;
+  triggered_by: string;
+  input_payload: Record<string, unknown>;
+  output_payload?: Record<string, unknown> | null;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface WorkflowCredentialReadinessItem {
+  name: string;
+  placeholders: string[];
+  available: boolean;
+  credential_id?: string | null;
+  provider?: string | null;
+}
+
+export interface WorkflowCredentialReadinessResponse {
+  workflow_id: string;
+  status: "ready" | "missing" | "not_required";
+  referenced_credentials: WorkflowCredentialReadinessItem[];
+  available_credentials: string[];
+  missing_credentials: string[];
+}
+
+export interface WorkflowListenerHealth {
+  subscription_id: string;
+  node_name: string;
+  platform: string;
+  status: "active" | "blocked" | "paused" | "error" | "disabled";
+  bot_identity_key: string;
+  assigned_runtime?: string | null;
+  lease_expires_at?: string | null;
+  last_event_at?: string | null;
+  last_error?: string | null;
+  runtime_status:
+    | "starting"
+    | "healthy"
+    | "backoff"
+    | "stopped"
+    | "error"
+    | "unknown";
+  runtime_detail?: string | null;
+  last_polled_at?: string | null;
+  consecutive_failures: number;
+}
+
+export interface WorkflowListenerAlert {
+  subscription_id: string;
+  platform: string;
+  kind: "stalled_listener" | "reconnect_loop" | "dispatch_failure";
+  detail: string;
+}
+
+export interface WorkflowListenerMetricsByPlatform {
+  platform: string;
+  total: number;
+  healthy: number;
+  paused: number;
+  errors: number;
+}
+
+export interface WorkflowListenerMetricsResponse {
+  workflow_id: string;
+  total_subscriptions: number;
+  active_subscriptions: number;
+  blocked_subscriptions: number;
+  paused_subscriptions: number;
+  disabled_subscriptions: number;
+  error_subscriptions: number;
+  healthy_runtimes: number;
+  reconnecting_runtimes: number;
+  stalled_listeners: number;
+  dispatch_failures: number;
+  by_platform: WorkflowListenerMetricsByPlatform[];
+  alerts: WorkflowListenerAlert[];
+}
+
+export interface WorkflowPublishResponse {
+  workflow: ApiWorkflow;
+  message?: string | null;
+  share_url?: string | null;
+}
+
+export interface SystemPluginStatus {
+  name: string;
+  enabled: boolean;
+  status: string;
+  version: string;
+  exports: string[];
+  loaded: boolean;
+  load_error?: string | null;
+}
+
+export interface SystemPluginsResponse {
+  plugins: SystemPluginStatus[];
+}
+
+export interface CronTriggerConfig {
+  expression: string;
+  timezone?: string;
+  allow_overlapping?: boolean;
+  start_at?: string | null;
+  end_at?: string | null;
+}
+
+export interface WorkflowVersionMetadata {
+  snapshot?: WorkflowSnapshot;
+  summary?: WorkflowDiffResult["summary"];
+  message?: string;
+  workflowToGraph?: Record<string, string>;
+  graphToWorkflow?: Record<string, string>;
+  templateId?: string;
+  configurableSchemas?: Record<string, RJSFSchema>;
+  avatarEmoji?: string;
+}
+
+export interface RequestOptions extends RequestInit {
+  expectJson?: boolean;
+}
+
+export interface WorkflowVersionRecord {
+  id: string;
+  version: string;
+  versionNumber: number;
+  timestamp: string;
+  message: string;
+  author: Workflow["owner"];
+  avatarEmoji?: string | null;
+  summary: WorkflowDiffResult["summary"];
+  snapshot: WorkflowSnapshot;
+  mermaid?: string | null;
+  hasCronTrigger?: boolean;
+  runnableConfig?: WorkflowRunnableConfig | null;
+  configurableSchemas?: Record<string, RJSFSchema>;
+  graphToWorkflow?: Record<string, string>;
+  templateId?: string;
+}
+
+export interface StoredWorkflow extends Workflow {
+  versions: WorkflowVersionRecord[];
+  draftAccess?: "personal" | "authenticated" | "workspace";
+  isArchived?: boolean;
+  isPublic?: boolean;
+  shareUrl?: string | null;
+  chatkitStartScreenPrompts?: ChatKitStartScreenPrompt[] | null;
+  chatkitSupportedModels?: ChatKitSupportedModel[] | null;
+}
+
+export interface SaveWorkflowInput {
+  id?: string;
+  name: string;
+  description?: string;
+  tags?: string[];
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+}
+
+export interface SaveWorkflowOptions {
+  versionMessage?: string;
+  actor?: string;
+  runnableConfig?: WorkflowRunnableConfig | null;
+}

package/src/features/workflow/pages/workflow/components/settings-tab-content.tsx

@@ -0,0 +1,428 @@
+import React from "react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/design-system/ui/alert";
+import { Badge } from "@/design-system/ui/badge";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Separator } from "@/design-system/ui/separator";
+import type {
+  WorkflowListenerHealth,
+  WorkflowListenerMetricsResponse,
+} from "@features/workflow/lib/workflow-storage.types";
+import { AlertTriangle, RefreshCw, ShieldOff, Zap } from "lucide-react";
+import WorkflowHistory from "@features/workflow/components/panels/workflow-history";
+
+export interface SettingsTabContentProps {
+  workflowId: string | null;
+  workflowName: string;
+  workflowDescription: string;
+  workflowTags: string[];
+  missingCredentials?: string[];
+  onWorkflowNameChange: (value: string) => void;
+  onWorkflowDescriptionChange: (value: string) => void;
+  onTagsChange: (value: string) => void;
+  onSaveWorkflowDetails: () => Promise<void>;
+  isSavingWorkflowDetails: boolean;
+  workflowVersions: Array<{ version: string; createdAt: string }>;
+  onRestoreVersion: (version: { version: string; createdAt: string }) => void;
+  listeners: WorkflowListenerHealth[];
+  listenerMetrics: WorkflowListenerMetricsResponse | null;
+  isListenersLoading: boolean;
+  isListenersRefreshing: boolean;
+  activeListenerSubscriptionId: string | null;
+  onRefreshListeners: () => Promise<void>;
+  onPauseListener: (subscriptionId: string) => Promise<void>;
+  onResumeListener: (subscriptionId: string) => Promise<void>;
+}
+
+const listenerStatusBadge = (status: WorkflowListenerHealth["status"]) => {
+  switch (status) {
+    case "active":
+      return { label: "Active", variant: "default" as const };
+    case "blocked":
+      return { label: "Blocked", variant: "outline" as const };
+    case "paused":
+      return { label: "Paused", variant: "secondary" as const };
+    case "error":
+      return { label: "Error", variant: "destructive" as const };
+    case "disabled":
+      return { label: "Disabled", variant: "outline" as const };
+  }
+};
+
+const runtimeStatusBadge = (
+  status: WorkflowListenerHealth["runtime_status"],
+) => {
+  switch (status) {
+    case "healthy":
+      return { label: "Healthy", className: "bg-emerald-600 text-white" };
+    case "starting":
+      return { label: "Starting", className: "bg-sky-600 text-white" };
+    case "backoff":
+      return { label: "Backoff", className: "bg-amber-500 text-black" };
+    case "error":
+      return { label: "Runtime Error", className: "bg-rose-600 text-white" };
+    case "stopped":
+      return { label: "Stopped", className: "bg-slate-500 text-white" };
+    default:
+      return { label: "Unknown", className: "bg-muted text-muted-foreground" };
+  }
+};
+
+const formatDateTime = (value?: string | null) => {
+  if (!value) {
+    return "Never";
+  }
+
+  const timestamp = new Date(value);
+  if (Number.isNaN(timestamp.getTime())) {
+    return value;
+  }
+  return timestamp.toLocaleString();
+};
+
+const platformLabel = (platform: WorkflowListenerHealth["platform"]) => {
+  switch (platform) {
+    case "telegram":
+      return "Telegram";
+    case "discord":
+      return "Discord";
+    case "qq":
+      return "QQ";
+  }
+};
+
+function ListenerSummary({
+  metrics,
+}: {
+  metrics: WorkflowListenerMetricsResponse | null;
+}) {
+  const items = [
+    {
+      label: "Total",
+      value: metrics?.total_subscriptions ?? 0,
+    },
+    {
+      label: "Healthy",
+      value: metrics?.healthy_runtimes ?? 0,
+    },
+    {
+      label: "Paused",
+      value: metrics?.paused_subscriptions ?? 0,
+    },
+    {
+      label: "Blocked",
+      value: metrics?.blocked_subscriptions ?? 0,
+    },
+    {
+      label: "Alerts",
+      value: metrics?.alerts.length ?? 0,
+    },
+  ];
+
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
+      {items.map((item) => (
+        <div
+          key={item.label}
+          className="rounded-lg border bg-muted/30 px-4 py-3"
+        >
+          <div className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
+            {item.label}
+          </div>
+          <div className="mt-2 text-2xl font-semibold">{item.value}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function SettingsTabContent({
+  workflowId,
+  workflowName,
+  workflowDescription,
+  workflowTags,
+  missingCredentials = [],
+  onWorkflowNameChange,
+  onWorkflowDescriptionChange,
+  onTagsChange,
+  onSaveWorkflowDetails,
+  isSavingWorkflowDetails,
+  workflowVersions,
+  onRestoreVersion,
+  listeners,
+  listenerMetrics,
+  isListenersLoading,
+  isListenersRefreshing,
+  activeListenerSubscriptionId,
+  onRefreshListeners,
+  onPauseListener,
+  onResumeListener,
+}: SettingsTabContentProps) {
+  const hasMissingCredentials = missingCredentials.length > 0;
+
+  return (
+    <div className="mx-auto max-w-5xl space-y-8">
+      <div>
+        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h2 className="text-xl font-bold">Workflow Settings</h2>
+            <p className="text-sm text-muted-foreground">
+              Edit the workflow name, description, and tags locally, then save
+              them explicitly.
+            </p>
+          </div>
+          <Button
+            onClick={() => void onSaveWorkflowDetails()}
+            disabled={!workflowId || isSavingWorkflowDetails}
+          >
+            {isSavingWorkflowDetails ? "Saving..." : "Save details"}
+          </Button>
+        </div>
+        {hasMissingCredentials ? (
+          <Alert variant="destructive" className="mb-4">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertTitle>Missing credentials</AlertTitle>
+            <AlertDescription>
+              This workflow references credentials that are not in the vault.
+              Add them before running:
+              <ul className="mt-1 list-disc pl-5">
+                {missingCredentials.map((name) => (
+                  <li key={name} className="font-mono">
+                    {name}
+                  </li>
+                ))}
+              </ul>
+            </AlertDescription>
+          </Alert>
+        ) : null}
+        <div className="space-y-4">
+          <div className="grid gap-2">
+            <label className="text-sm font-medium">Workflow Name</label>
+            <input
+              type="text"
+              className="rounded-md border border-border bg-background px-3 py-2"
+              value={workflowName}
+              onChange={(event) => onWorkflowNameChange(event.target.value)}
+            />
+          </div>
+          <div className="grid gap-2">
+            <label className="text-sm font-medium">Description</label>
+            <textarea
+              className="rounded-md border border-border bg-background px-3 py-2"
+              rows={3}
+              value={workflowDescription}
+              onChange={(event) =>
+                onWorkflowDescriptionChange(event.target.value)
+              }
+            />
+          </div>
+          <div className="grid gap-2">
+            <label className="text-sm font-medium">Tags</label>
+            <input
+              type="text"
+              className="rounded-md border border-border bg-background px-3 py-2"
+              value={workflowTags.join(", ")}
+              onChange={(event) => onTagsChange(event.target.value)}
+            />
+
+            <p className="text-xs text-muted-foreground">
+              Separate tags with commas
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-4">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h2 className="text-xl font-bold">Listener Control</h2>
+            <p className="text-sm text-muted-foreground">
+              Monitor and pause or resume private bot listeners for this
+              workflow.
+            </p>
+          </div>
+          <Button
+            variant="outline"
+            onClick={() => void onRefreshListeners()}
+            disabled={
+              !workflowId || isListenersLoading || isListenersRefreshing
+            }
+          >
+            <RefreshCw
+              className={isListenersRefreshing ? "animate-spin" : undefined}
+            />
+            Refresh
+          </Button>
+        </div>
+
+        {!workflowId ? (
+          <Alert>
+            <ShieldOff className="h-4 w-4" />
+            <AlertTitle>Save the workflow first</AlertTitle>
+            <AlertDescription>
+              Listener subscriptions are created from persisted workflow
+              versions. Save this workflow to inspect or control them.
+            </AlertDescription>
+          </Alert>
+        ) : isListenersLoading ? (
+          <Card>
+            <CardContent className="pt-6 text-sm text-muted-foreground">
+              Loading listener health and control state...
+            </CardContent>
+          </Card>
+        ) : listeners.length === 0 ? (
+          <Card>
+            <CardHeader>
+              <CardTitle>No listeners detected</CardTitle>
+              <CardDescription>
+                The latest workflow version does not expose any listener
+                subscriptions.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        ) : (
+          <div className="space-y-4">
+            <ListenerSummary metrics={listenerMetrics} />
+
+            {listenerMetrics && listenerMetrics.alerts.length > 0 && (
+              <Alert variant="destructive">
+                <AlertTriangle className="h-4 w-4" />
+                <AlertTitle>Listener alerts</AlertTitle>
+                <AlertDescription>
+                  <div className="space-y-1">
+                    {listenerMetrics.alerts.map((alert) => (
+                      <p key={`${alert.subscription_id}-${alert.kind}`}>
+                        {platformLabel(alert.platform)}: {alert.detail}
+                      </p>
+                    ))}
+                  </div>
+                </AlertDescription>
+              </Alert>
+            )}
+
+            <div className="grid gap-4">
+              {listeners.map((listener) => {
+                const status = listenerStatusBadge(listener.status);
+                const runtime = runtimeStatusBadge(listener.runtime_status);
+                const isActionPending =
+                  activeListenerSubscriptionId === listener.subscription_id;
+                const canPause = listener.status === "active";
+                const canResume =
+                  listener.status === "paused" || listener.status === "blocked";
+
+                return (
+                  <Card key={listener.subscription_id}>
+                    <CardHeader className="gap-3 sm:flex-row sm:items-start sm:justify-between">
+                      <div className="space-y-2">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <CardTitle>{listener.node_name}</CardTitle>
+                          <Badge variant="outline">
+                            {platformLabel(listener.platform)}
+                          </Badge>
+                          <Badge variant={status.variant}>{status.label}</Badge>
+                          <Badge className={runtime.className}>
+                            {runtime.label}
+                          </Badge>
+                        </div>
+                        <CardDescription>
+                          Bot identity: {listener.bot_identity_key}
+                        </CardDescription>
+                      </div>
+
+                      {(canPause || canResume) && (
+                        <Button
+                          variant={canPause ? "outline" : "default"}
+                          disabled={isActionPending}
+                          onClick={() =>
+                            void (canPause
+                              ? onPauseListener(listener.subscription_id)
+                              : onResumeListener(listener.subscription_id))
+                          }
+                        >
+                          {isActionPending
+                            ? canPause
+                              ? "Pausing..."
+                              : "Resuming..."
+                            : canPause
+                              ? "Pause"
+                              : "Resume"}
+                        </Button>
+                      )}
+                    </CardHeader>
+                    <CardContent className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-4">
+                      <div>
+                        <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
+                          Runtime
+                        </div>
+                        <div className="mt-1 font-medium">
+                          {listener.assigned_runtime ?? "Unassigned"}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
+                          Last poll
+                        </div>
+                        <div className="mt-1 font-medium">
+                          {formatDateTime(listener.last_polled_at)}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
+                          Last event
+                        </div>
+                        <div className="mt-1 font-medium">
+                          {formatDateTime(listener.last_event_at)}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
+                          Failures
+                        </div>
+                        <div className="mt-1 font-medium">
+                          {listener.consecutive_failures}
+                        </div>
+                      </div>
+
+                      {(listener.runtime_detail || listener.last_error) && (
+                        <div className="sm:col-span-2 xl:col-span-4">
+                          <div className="rounded-lg border border-amber-300/50 bg-amber-50/70 px-3 py-2 text-amber-950 dark:border-amber-700/50 dark:bg-amber-950/30 dark:text-amber-100">
+                            <div className="mb-1 flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em]">
+                              <Zap className="h-3.5 w-3.5" />
+                              Runtime detail
+                            </div>
+                            <p>
+                              {listener.last_error ??
+                                listener.runtime_detail ??
+                                "No detail available."}
+                            </p>
+                          </div>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <Separator />
+
+      <WorkflowHistory
+        versions={workflowVersions}
+        currentVersion={workflowVersions.at(-1)?.version}
+        onRestoreVersion={onRestoreVersion}
+      />
+    </div>
+  );
+}