From f64bd662b9beed4c727c88904abd828da0e91d0c Mon Sep 17 00:00:00 2001
From: Emily Sun <emilysun@Emilys-MacBook-Pro.local>
Date: Fri, 15 May 2026 21:55:35 -0700
Subject: [PATCH 1/2] feat: custom agents, time machine, and per-agent model
 selection

This bundles the feature work that built up on this branch:

- Custom agents: dashboard CRUD page and editor dialog (48px icon tile,
  chip-style guardrails, model selector). Each custom agent now carries a
  LiteLLM model_name (Opus 4.7 / Haiku 4.5) that is passed through to the
  agent-service so different agents can use different models.

- Conversation history is scoped per (workflowId, agentId): switching
  agent or workflow yields a different conversation list. localStorage
  key: texera.workflowConversations.v1.{workflowId}.{agentId}.

- Time machine: workflow snapshot list, revert, and agent-tagged
  checkpoints. New workflow-history-tool in agent-service backs the
  "undo my last change" flow; amber gains a WorkflowSnapshotResource;
  sql/updates/23.sql adds the snapshot table.

- Operator-aware custom-agent prompts: the system prompt now injects the
  full operator catalog with a "prefer built-in operators over Python
  UDFs" rule, sourced from WorkflowSystemMetadata at request time.

- LiteLLM: added the claude-opus-4.7 entry alongside claude-haiku-4.5
  and gpt-5-mini in bin/litellm-config.yaml.

- Agent panel rewritten around the (conversation list / chat) two-view
  model with subscription-managed list reloads and per-step persistence.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .run/AccessControlService.run.xml             |  20 +-
 .run/ComputingUnitManagingService.run.xml     |  20 +-
 .run/ComputingUnitMaster.run.xml              |  22 +-
 .run/ComputingUnitWorker.run.xml              |  22 +-
 .run/ConfigService.run.xml                    |  20 +-
 .run/FileService.run.xml                      |  20 +-
 .run/TexeraWebApplication.run.xml             |  20 +-
 .run/WorkflowCompilingService.run.xml         |  20 +-
 agent-service/src/agent/prompts.ts            | 220 +++++++-
 agent-service/src/agent/texera-agent.ts       |  21 +-
 agent-service/src/agent/tools/index.ts        |   1 +
 .../src/agent/tools/workflow-history-tool.ts  | 191 +++++++
 agent-service/src/server.ts                   |  11 +-
 .../texera/web/TexeraWebApplication.scala     |   2 +
 .../workflow/WorkflowSnapshotResource.scala   | 488 +++++++++++++++++
 bin/litellm-config.yaml                       |   4 +
 common/config/src/main/resources/gui.conf     |   2 +-
 frontend/src/app/app-routing.constant.ts      |   1 +
 frontend/src/app/app-routing.module.ts        |   5 +
 .../component/dashboard.component.html        |  11 +
 .../component/dashboard.component.ts          |   2 +
 .../user-agent-editor.component.html          | 130 +++++
 .../user-agent-editor.component.scss          | 187 +++++++
 .../user-agent/user-agent-editor.component.ts | 191 +++++++
 .../user/user-agent/user-agent.component.html |  46 ++
 .../user/user-agent/user-agent.component.scss |  65 +++
 .../user/user-agent/user-agent.component.ts   | 128 +++++
 .../user/custom-agent/custom-agent.service.ts | 136 +++++
 .../dashboard/type/custom-agent.interface.ts  | 141 +++++
 .../agent-chat/agent-chat.component.html      |  36 +-
 .../agent-chat/agent-chat.component.scss      |  87 ++-
 .../agent-chat/agent-chat.component.ts        | 130 ++++-
 .../agent-panel/agent-panel.component.html    | 180 ++++---
 .../agent-panel/agent-panel.component.scss    | 218 +++++---
 .../agent-panel/agent-panel.component.ts      | 494 ++++++++++--------
 .../left-panel/left-panel.component.ts        |   7 +
 .../time-machine/time-machine.component.html  | 137 +++++
 .../time-machine/time-machine.component.scss  | 200 +++++++
 .../time-machine/time-machine.component.ts    | 266 ++++++++++
 .../workspace/service/agent/agent.service.ts  |  13 +-
 .../service/agent/conversation.service.ts     | 200 +++++++
 .../time-machine/time-machine.service.ts      | 251 +++++++++
 sql/texera_ddl.sql                            |  22 +
 sql/updates/23.sql                            |  48 ++
 44 files changed, 3903 insertions(+), 533 deletions(-)
 create mode 100644 agent-service/src/agent/tools/workflow-history-tool.ts
 create mode 100644 amber/src/main/scala/org/apache/texera/web/resource/dashboard/user/workflow/WorkflowSnapshotResource.scala
 create mode 100644 frontend/src/app/dashboard/component/user/user-agent/user-agent-editor.component.html
 create mode 100644 frontend/src/app/dashboard/component/user/user-agent/user-agent-editor.component.scss
 create mode 100644 frontend/src/app/dashboard/component/user/user-agent/user-agent-editor.component.ts
 create mode 100644 frontend/src/app/dashboard/component/user/user-agent/user-agent.component.html
 create mode 100644 frontend/src/app/dashboard/component/user/user-agent/user-agent.component.scss
 create mode 100644 frontend/src/app/dashboard/component/user/user-agent/user-agent.component.ts
 create mode 100644 frontend/src/app/dashboard/service/user/custom-agent/custom-agent.service.ts
 create mode 100644 frontend/src/app/dashboard/type/custom-agent.interface.ts
 create mode 100644 frontend/src/app/workspace/component/left-panel/time-machine/time-machine.component.html
 create mode 100644 frontend/src/app/workspace/component/left-panel/time-machine/time-machine.component.scss
 create mode 100644 frontend/src/app/workspace/component/left-panel/time-machine/time-machine.component.ts
 create mode 100644 frontend/src/app/workspace/service/agent/conversation.service.ts
 create mode 100644 frontend/src/app/workspace/service/time-machine/time-machine.service.ts
 create mode 100644 sql/updates/23.sql

diff --git a/.run/AccessControlService.run.xml b/.run/AccessControlService.run.xml
index 56ffbc50fbb..b8f7db2f9ba 100644
--- a/.run/AccessControlService.run.xml
+++ b/.run/AccessControlService.run.xml
@@ -1,25 +1,7 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="AccessControlService" type="Application" factoryName="Application">
     <option name="MAIN_CLASS_NAME" value="org.apache.texera.service.AccessControlService" />
-    <module name="texera.access-control-service" />
+    <module name="texera.access-control-service.main" />
     <shortenClasspath name="ARGS_FILE" />
     <extension name="coverage">
       <pattern>
diff --git a/.run/ComputingUnitManagingService.run.xml b/.run/ComputingUnitManagingService.run.xml
index 8bbb5c1966f..1137f9a00c8 100644
--- a/.run/ComputingUnitManagingService.run.xml
+++ b/.run/ComputingUnitManagingService.run.xml
@@ -1,25 +1,7 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="ComputingUnitManagingService" type="Application" factoryName="Application">
     <option name="MAIN_CLASS_NAME" value="org.apache.texera.service.ComputingUnitManagingService" />
-    <module name="texera.computing-unit-managing-service" />
+    <module name="texera.computing-unit-managing-service.main" />
     <shortenClasspath name="ARGS_FILE" />
     <extension name="coverage">
       <pattern>
diff --git a/.run/ComputingUnitMaster.run.xml b/.run/ComputingUnitMaster.run.xml
index 7d3a3aaf989..bffc11cc7b5 100644
--- a/.run/ComputingUnitMaster.run.xml
+++ b/.run/ComputingUnitMaster.run.xml
@@ -1,27 +1,9 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="ComputingUnitMaster" type="Application" factoryName="Application">
     <option name="MAIN_CLASS_NAME" value="org.apache.texera.web.ComputingUnitMaster" />
-    <option name="VM_PARAMETERS" value="@$PROJECT_DIR$/.jvmopts" />
-    <module name="texera.amber" />
+    <module name="texera.amber.main" />
     <shortenClasspath name="ARGS_FILE" />
+    <option name="VM_PARAMETERS" value="@$PROJECT_DIR$/.jvmopts" />
     <extension name="coverage">
       <pattern>
         <option name="PATTERN" value="org.apache.texera.web.*" />
diff --git a/.run/ComputingUnitWorker.run.xml b/.run/ComputingUnitWorker.run.xml
index 025e3cfd1b7..14b004d3458 100644
--- a/.run/ComputingUnitWorker.run.xml
+++ b/.run/ComputingUnitWorker.run.xml
@@ -1,27 +1,9 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="ComputingUnitWorker" type="Application" factoryName="Application">
     <option name="MAIN_CLASS_NAME" value="org.apache.texera.web.ComputingUnitWorker" />
-    <option name="VM_PARAMETERS" value="@$PROJECT_DIR$/.jvmopts" />
-    <module name="texera.amber" />
+    <module name="texera.amber.main" />
     <shortenClasspath name="ARGS_FILE" />
+    <option name="VM_PARAMETERS" value="@$PROJECT_DIR$/.jvmopts" />
     <extension name="coverage">
       <pattern>
         <option name="PATTERN" value="org.apache.texera.web.*" />
diff --git a/.run/ConfigService.run.xml b/.run/ConfigService.run.xml
index 395688afca4..d94ad61957e 100644
--- a/.run/ConfigService.run.xml
+++ b/.run/ConfigService.run.xml
@@ -1,25 +1,7 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="ConfigService" type="Application" factoryName="Application">
     <option name="MAIN_CLASS_NAME" value="org.apache.texera.service.ConfigService" />
-    <module name="texera.config-service" />
+    <module name="texera.config-service.main" />
     <shortenClasspath name="ARGS_FILE" />
     <extension name="coverage">
       <pattern>
diff --git a/.run/FileService.run.xml b/.run/FileService.run.xml
index 0a54e70aac8..addbea8446a 100644
--- a/.run/FileService.run.xml
+++ b/.run/FileService.run.xml
@@ -1,25 +1,7 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="FileService" type="Application" factoryName="Application">
     <option name="MAIN_CLASS_NAME" value="org.apache.texera.service.FileService" />
-    <module name="texera.file-service" />
+    <module name="texera.file-service.main" />
     <shortenClasspath name="ARGS_FILE" />
     <extension name="coverage">
       <pattern>
diff --git a/.run/TexeraWebApplication.run.xml b/.run/TexeraWebApplication.run.xml
index d9e3829fc22..41588251f54 100644
--- a/.run/TexeraWebApplication.run.xml
+++ b/.run/TexeraWebApplication.run.xml
@@ -1,25 +1,7 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="TexeraWebApplication" type="Application" factoryName="Application">
     <option name="MAIN_CLASS_NAME" value="org.apache.texera.web.TexeraWebApplication" />
-    <module name="texera.amber" />
+    <module name="texera.amber.main" />
     <shortenClasspath name="ARGS_FILE" />
     <extension name="coverage">
       <pattern>
diff --git a/.run/WorkflowCompilingService.run.xml b/.run/WorkflowCompilingService.run.xml
index d41f60d9c54..f776e18ed26 100644
--- a/.run/WorkflowCompilingService.run.xml
+++ b/.run/WorkflowCompilingService.run.xml
@@ -1,25 +1,7 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="WorkflowCompilingService" type="Application" factoryName="Application">
     <option name="MAIN_CLASS_NAME" value="org.apache.texera.service.WorkflowCompilingService" />
-    <module name="texera.workflow-compiling-service" />
+    <module name="texera.workflow-compiling-service.main" />
     <shortenClasspath name="ARGS_FILE" />
     <extension name="coverage">
       <pattern>
diff --git a/agent-service/src/agent/prompts.ts b/agent-service/src/agent/prompts.ts
index 064eed2e3e5..bd862f3f04a 100644
--- a/agent-service/src/agent/prompts.ts
+++ b/agent-service/src/agent/prompts.ts
@@ -281,7 +281,219 @@ function buildAllowedOperatorSchemas(
   return schemas.length > 0 ? schemas.join("\n\n") : "No operators available.";
 }
 
-export function buildSystemPrompt(metadataStore: WorkflowSystemMetadata, allowedOperatorTypes: string[] = []): string {
+/**
+ * Subset of the Texera custom-agent config that influences the system prompt.
+ * Keep this loose — extra fields from the frontend are ignored.
+ */
+export interface CustomAgentConfig {
+  name?: string;
+  description?: string;
+  icon?: string;
+  domain?: string;
+  methodology?: string;
+  taskType?: string;
+  guardrails?: {
+    requireTrainTestSplit?: boolean;
+    requireEvaluation?: boolean;
+    preventDataLeakage?: boolean;
+    handleMissingValues?: boolean;
+    featureScalingCheck?: boolean;
+  };
+  customRules?: string;
+  preferredOperators?: string[];
+  knowledgeFiles?: Array<{ name: string; mimeType?: string; contentBase64?: string }>;
+  exampleWorkflowIds?: number[];
+  outputPreferences?: {
+    includeVisualization?: boolean;
+    exportToCsv?: boolean;
+    generateSummaryStats?: boolean;
+    includeDataProfiling?: boolean;
+    defaultFormat?: string;
+  };
+}
+
+const DOMAIN_LABELS: Record<string, string> = {
+  biomedical: "Biomedical",
+  nlp: "NLP / Text Analysis",
+  finance: "Finance",
+  social_science: "Social Science",
+  cv: "Computer Vision",
+  general: "General",
+};
+
+const METHODOLOGY_GUIDANCE: Record<string, string> = {
+  crisp_dm:
+    "CRISP-DM: structure the workflow as Business Understanding → Data Understanding → Data Preparation → Modeling → Evaluation → Deployment.",
+  semma: "SEMMA: structure the workflow as Sample → Explore → Modify → Model → Assess.",
+  kdd: "KDD: structure the workflow as Selection → Preprocessing → Transformation → Data Mining → Interpretation/Evaluation.",
+  none: "No specific framework is required.",
+};
+
+const TASK_LABELS: Record<string, string> = {
+  classification: "Classification",
+  regression: "Regression",
+  clustering: "Clustering",
+  eda: "Exploratory Data Analysis",
+  cleaning: "Data Cleaning",
+  custom: "Custom",
+};
+
+const OUTPUT_FORMAT_LABELS: Record<string, string> = {
+  dashboard: "Dashboard",
+  csv_export: "CSV Export",
+  report: "Report",
+  none: "No specific output format required",
+};
+
+function decodeBase64Text(b64: string, mimeType?: string): string | undefined {
+  // Only attempt for text-like content; skip binary like PDF.
+  const isTextLike =
+    !mimeType ||
+    mimeType.startsWith("text/") ||
+    mimeType === "application/json" ||
+    mimeType === "application/x-yaml";
+  if (!isTextLike) return undefined;
+  try {
+    const buf = Buffer.from(b64, "base64");
+    return buf.toString("utf-8");
+  } catch {
+    return undefined;
+  }
+}
+
+function buildOperatorCatalog(metadataStore: WorkflowSystemMetadata): string {
+  const entries = Object.entries(metadataStore.getAllOperatorTypes())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([type, desc]) => `- ${type}: ${desc || "(no description)"}`);
+  return entries.join("\n");
+}
+
+export function buildCustomAgentSection(
+  config: CustomAgentConfig,
+  metadataStore?: WorkflowSystemMetadata
+): string {
+  const sections: string[] = ["\n\n# Custom Agent Specialization"];
+
+  sections.push("## Action-First Policy");
+  sections.push(
+    "IMPORTANT: When the user asks you to create a workflow, DO NOT ask clarifying questions. " +
+      "Use reasonable defaults and start building immediately. You can always modify later.\n\n" +
+      "Default assumptions when not specified:\n" +
+      "- Missing values: mean imputation for numeric, mode for categorical\n" +
+      "- Train/test split: 80/20 with random seed 42\n" +
+      "- Evaluation metrics: accuracy, F1, AUC-ROC, confusion matrix\n" +
+      "- Always proceed with action, explain what you chose and why AFTER building."
+  );
+
+  if (metadataStore && metadataStore.getOperatorCount() > 0) {
+    sections.push("## Available Texera Operators (use these instead of Python UDFs when possible)");
+    sections.push(
+      "**ALWAYS prefer built-in Texera operators over Python UDFs.** Only use PythonUDFV2 " +
+        "(or other UDF operators) when no built-in operator exists for the task."
+    );
+    sections.push(buildOperatorCatalog(metadataStore));
+  }
+
+  if (config.name || config.description) {
+    sections.push("## Your Identity");
+    if (config.name) sections.push(`Name: ${config.icon ? config.icon + " " : ""}${config.name}`);
+    if (config.domain && DOMAIN_LABELS[config.domain]) sections.push(`Domain: ${DOMAIN_LABELS[config.domain]}`);
+    if (config.taskType && TASK_LABELS[config.taskType]) sections.push(`Primary Task: ${TASK_LABELS[config.taskType]}`);
+    if (config.description) sections.push(`Specialty: ${config.description}`);
+  }
+
+  if (config.methodology && METHODOLOGY_GUIDANCE[config.methodology]) {
+    sections.push("## Methodology");
+    sections.push(METHODOLOGY_GUIDANCE[config.methodology]);
+  }
+
+  const guardrailLines: string[] = [];
+  if (config.guardrails?.requireTrainTestSplit) {
+    guardrailLines.push("- You MUST include a train/test split operator before any model training operator.");
+  }
+  if (config.guardrails?.requireEvaluation) {
+    guardrailLines.push("- You MUST include an evaluation operator after every model operator.");
+  }
+  if (config.guardrails?.preventDataLeakage) {
+    guardrailLines.push(
+      "- You MUST NOT place feature engineering or fitting operators after the train/test split in a way that leaks test data into training."
+    );
+  }
+  if (config.guardrails?.handleMissingValues) {
+    guardrailLines.push("- You MUST handle missing values explicitly (impute or filter) before modeling.");
+  }
+  if (config.guardrails?.featureScalingCheck) {
+    guardrailLines.push("- You MUST consider feature scaling for distance-based or gradient-based models.");
+  }
+  if (guardrailLines.length > 0) {
+    sections.push("## Guardrails — enforce these strictly");
+    sections.push(guardrailLines.join("\n"));
+  }
+
+  const customRules = (config.customRules || "")
+    .split(/\r?\n/)
+    .map(r => r.trim())
+    .filter(Boolean);
+  if (customRules.length > 0) {
+    sections.push("## Custom Rules — follow these");
+    sections.push(customRules.map((r, i) => `${i + 1}. ${r}`).join("\n"));
+  }
+
+  if (config.preferredOperators && config.preferredOperators.length > 0) {
+    sections.push("## Preferred Operators");
+    sections.push(
+      `When multiple operators could satisfy a step, prefer: ${config.preferredOperators.join(", ")}.`
+    );
+  }
+
+  const outputLines: string[] = [];
+  const out = config.outputPreferences;
+  if (out?.includeVisualization) outputLines.push("- Include visualization operators (scatter plots, bar charts).");
+  if (out?.exportToCsv) outputLines.push("- Export results to CSV at the end of the workflow.");
+  if (out?.generateSummaryStats) outputLines.push("- Generate summary statistics for the data.");
+  if (out?.includeDataProfiling) outputLines.push("- Include a data profiling step early in the workflow.");
+  if (out?.defaultFormat && OUTPUT_FORMAT_LABELS[out.defaultFormat] && out.defaultFormat !== "none") {
+    outputLines.push(`- Target output format: ${OUTPUT_FORMAT_LABELS[out.defaultFormat]}.`);
+  }
+  if (outputLines.length > 0) {
+    sections.push("## Output Preferences");
+    sections.push(outputLines.join("\n"));
+  }
+
+  if (config.knowledgeFiles && config.knowledgeFiles.length > 0) {
+    sections.push("## Knowledge Base");
+    sections.push("The user has provided the following reference files. Treat them as authoritative context.");
+    for (const file of config.knowledgeFiles) {
+      const decoded = file.contentBase64 ? decodeBase64Text(file.contentBase64, file.mimeType) : undefined;
+      if (decoded !== undefined) {
+        const truncated = decoded.length > 4000 ? decoded.slice(0, 4000) + "\n... [truncated]" : decoded;
+        sections.push(`### File: ${file.name}\n\`\`\`\n${truncated}\n\`\`\``);
+      } else {
+        sections.push(`### File: ${file.name}\n(Binary or unreadable content — name available only.)`);
+      }
+    }
+  }
+
+  if (config.exampleWorkflowIds && config.exampleWorkflowIds.length > 0) {
+    sections.push("## Example Workflows");
+    sections.push(
+      `The user has marked workflow ids ${config.exampleWorkflowIds.join(", ")} as templates. ` +
+        "Follow similar operator structures and link patterns when relevant."
+    );
+  }
+
+  sections.push(
+    "## Behavior\nWhen generating workflows, briefly state why each operator was chosen (one short sentence) before adding it via the add_operator tool."
+  );
+
+  return sections.join("\n\n");
+}
+
+export function buildSystemPrompt(
+  metadataStore: WorkflowSystemMetadata,
+  allowedOperatorTypes: string[] = [],
+  customAgent?: CustomAgentConfig
+): string {
   const operatorSchemas = buildAllowedOperatorSchemas(metadataStore, allowedOperatorTypes);
   const allowsAll = allowedOperatorTypes.length === 0;
   const pythonAllowed = allowsAll || allowedOperatorTypes.some(t => PYTHON_UDF_OPERATOR_TYPES.includes(t));
@@ -292,5 +504,9 @@ export function buildSystemPrompt(metadataStore: WorkflowSystemMetadata, allowed
   if (rAllowed) extraSections.push(R_UDF_INSTRUCTIONS);
 
   const base = SYSTEM_PROMPT_TEMPLATE.replace("{{OPERATOR_SCHEMA}}", operatorSchemas);
-  return extraSections.length > 0 ? `${base}\n${extraSections.join("\n\n")}\n` : base;
+  let result = extraSections.length > 0 ? `${base}\n${extraSections.join("\n\n")}\n` : base;
+  if (customAgent) {
+    result += buildCustomAgentSection(customAgent, metadataStore);
+  }
+  return result;
 }
diff --git a/agent-service/src/agent/texera-agent.ts b/agent-service/src/agent/texera-agent.ts
index 37eb12d8688..8cac2036f72 100644
--- a/agent-service/src/agent/texera-agent.ts
+++ b/agent-service/src/agent/texera-agent.ts
@@ -31,7 +31,7 @@ import {
   OperatorResultSerializationMode,
   INITIAL_STEP_ID,
 } from "../types/agent";
-import { buildSystemPrompt } from "./prompts";
+import { buildSystemPrompt, CustomAgentConfig } from "./prompts";
 import {
   createAddOperatorTool,
   createModifyOperatorTool,
@@ -47,6 +47,10 @@ import {
   TOOL_NAME_EXECUTE_OPERATOR,
   type ExecutionConfig,
 } from "./tools/workflow-execution-tools";
+import {
+  createWorkflowHistoryTool,
+  TOOL_NAME_WORKFLOW_HISTORY,
+} from "./tools/workflow-history-tool";
 import { assembleContext } from "./util/context-utils";
 import { compileWorkflowAsync, type WorkflowCompilationResponse } from "../api/compile-api";
 import { createLogger } from "../logger";
@@ -60,6 +64,7 @@ export interface TexeraAgentConfig {
   agentId: string;
   agentName?: string;
   systemPrompt?: string;
+  customAgent?: CustomAgentConfig;
 }
 
 export interface AgentMessageResult {
@@ -100,6 +105,7 @@ export class TexeraAgent {
   private model: LanguageModel;
   private systemPrompt: string;
   private settings: AgentSettings;
+  private customAgent?: CustomAgentConfig;
 
   private reActStepsByMessageId: Map<string, ReActStep[]> = new Map();
 
@@ -132,6 +138,7 @@ export class TexeraAgent {
     this.createdAt = new Date();
     this.model = config.model;
     this.systemPrompt = config.systemPrompt || "";
+    this.customAgent = config.customAgent;
     this.log = createLogger("TexeraAgent", { agentId: this.agentId });
 
     this.workflowState = new WorkflowState();
@@ -175,7 +182,7 @@ export class TexeraAgent {
   }
 
   private rebuildSystemPrompt(): void {
-    this.systemPrompt = buildSystemPrompt(this.metadataStore, this.settings.allowedOperatorTypes);
+    this.systemPrompt = buildSystemPrompt(this.metadataStore, this.settings.allowedOperatorTypes, this.customAgent);
     this.settings.systemPrompt = this.systemPrompt;
   }
 
@@ -228,6 +235,16 @@ export class TexeraAgent {
       );
     }
 
+    if (this.delegateConfig) {
+      tools[TOOL_NAME_WORKFLOW_HISTORY] = createWorkflowHistoryTool(() => {
+        if (!this.delegateConfig) return undefined;
+        return {
+          userToken: this.delegateConfig.userToken,
+          workflowId: this.delegateConfig.workflowId,
+        };
+      });
+    }
+
     return tools;
   }
 
diff --git a/agent-service/src/agent/tools/index.ts b/agent-service/src/agent/tools/index.ts
index 7e2d9570703..a3fd1c84972 100644
--- a/agent-service/src/agent/tools/index.ts
+++ b/agent-service/src/agent/tools/index.ts
@@ -20,3 +20,4 @@
 export * from "./tools-utility";
 export * from "./workflow-crud-tools";
 export * from "./workflow-execution-tools";
+export * from "./workflow-history-tool";
diff --git a/agent-service/src/agent/tools/workflow-history-tool.ts b/agent-service/src/agent/tools/workflow-history-tool.ts
new file mode 100644
index 00000000000..c822567ba2a
--- /dev/null
+++ b/agent-service/src/agent/tools/workflow-history-tool.ts
@@ -0,0 +1,191 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { z } from "zod";
+import { tool } from "ai";
+import { getBackendConfig } from "../../api/backend-api";
+import { createAuthHeaders } from "../../api/auth-api";
+import { createToolResult, createErrorResult } from "./tools-utility";
+
+export const TOOL_NAME_WORKFLOW_HISTORY = "workflowHistory";
+
+interface WorkflowHistoryConfig {
+  userToken: string;
+  workflowId: number;
+}
+
+interface SnapshotEntry {
+  sid: number;
+  wid: number;
+  version: number;
+  changeType: string;
+  changeSummary: string;
+  changedOperators: string[];
+  source: "user" | "agent";
+  creationTime: string;
+}
+
+/**
+ * Build the workflowHistory tool for the agent. The tool talks to the amber
+ * `/api/time-machine/...` endpoints — it doesn't touch the audit rules
+ * or the agent chat UI, so this file is independent of those features.
+ *
+ * Actions:
+ *   - list:     return recent snapshots (default limit 20)
+ *   - revert:   revert the workflow to a specific snapshot by version number
+ *               (the agent should typically pick a version from `list` first)
+ *   - snapshot: explicitly save a checkpoint tagged as agent-sourced. Call
+ *               this after generating or modifying the workflow so the user
+ *               sees a 🤖 entry in the Time Machine timeline.
+ */
+export function createWorkflowHistoryTool(getConfig: () => WorkflowHistoryConfig | undefined) {
+  return tool({
+    description:
+      "Browse and manipulate the version history of the current workflow. " +
+      "Use `list` to see recent changes (with timestamps, who made them, " +
+      "what changed), `revert` to roll the workflow back to a specific " +
+      "version, and `snapshot` to record an agent-tagged checkpoint after " +
+      "you have generated or modified the workflow. " +
+      "Useful when the user says things like 'undo the last change' or " +
+      "'go back to before you added that operator'. Always call `snapshot` " +
+      "with a short summary after a multi-step workflow change so the user " +
+      "can revert to that point.",
+    inputSchema: z.object({
+      action: z
+        .enum(["list", "revert", "snapshot"])
+        .describe("'list' returns the timeline; 'revert' rolls back; 'snapshot' saves a checkpoint."),
+      version: z
+        .number()
+        .int()
+        .positive()
+        .optional()
+        .describe("Snapshot version number (required for revert). Get this from the `list` action first."),
+      limit: z.number().int().min(1).max(50).optional().describe("Cap for the list action. Default 20."),
+      summary: z
+        .string()
+        .optional()
+        .describe(
+          "Short summary for the `snapshot` action, e.g. 'Generated ML pipeline' or 'Added Random Forest'. <= 80 chars."
+        ),
+      changedOperators: z
+        .array(z.string())
+        .optional()
+        .describe("Optional operator IDs that were added/modified, for the `snapshot` action."),
+    }),
+    execute: async (args: {
+      action: "list" | "revert" | "snapshot";
+      version?: number;
+      limit?: number;
+      summary?: string;
+      changedOperators?: string[];
+    }) => {
+      const cfg = getConfig();
+      if (!cfg) {
+        return createErrorResult("workflowHistory tool requires a workflow context (token + workflow id).");
+      }
+      const base = `${getBackendConfig().apiEndpoint}/api/time-machine/${cfg.workflowId}`;
+      const headers = createAuthHeaders(cfg.userToken);
+      try {
+        if (args.action === "snapshot") {
+          // Fetch current workflow content from amber, then POST a snapshot.
+          // We can't compose the snapshot content from the agent side without
+          // the workflow JSON, so we read it back from the workflow endpoint.
+          const workflowResp = await fetch(
+            `${getBackendConfig().apiEndpoint}/api/workflow/${cfg.workflowId}`,
+            { method: "GET", headers }
+          );
+          if (!workflowResp.ok) {
+            const text = await workflowResp.text();
+            return createErrorResult(`could not fetch current workflow content: ${workflowResp.status} ${text}`);
+          }
+          const wf = (await workflowResp.json()) as { content: unknown };
+          const content = typeof wf.content === "string" ? wf.content : JSON.stringify(wf.content);
+          const postResp = await fetch(`${base}/snapshots`, {
+            method: "POST",
+            headers: { ...headers, "Content-Type": "application/json" },
+            body: JSON.stringify({
+              content,
+              changeType: "agent_generated",
+              changeSummary: args.summary?.slice(0, 200) ?? "Agent-generated workflow change",
+              changedOperators: args.changedOperators ?? [],
+              source: "agent",
+            }),
+          });
+          if (!postResp.ok) {
+            const text = await postResp.text();
+            return createErrorResult(`snapshot save failed: ${postResp.status} ${text}`);
+          }
+          const saved = (await postResp.json()) as { version: number; sid: number };
+          return createToolResult(`Saved snapshot v${saved.version} (sid=${saved.sid}) tagged as agent-sourced.`);
+        }
+        if (args.action === "list") {
+          const response = await fetch(`${base}/snapshots`, { method: "GET", headers });
+          if (!response.ok) {
+            const text = await response.text();
+            return createErrorResult(`list snapshots failed: ${response.status} ${text}`);
+          }
+          const all = (await response.json()) as SnapshotEntry[];
+          const limit = args.limit ?? 20;
+          const items = all.slice(0, limit);
+          const lines = items.map(
+            e =>
+              `v${e.version}  ${e.creationTime}  [${e.source}]  ${e.changeType}: ${e.changeSummary}` +
+              (e.changedOperators?.length ? `  (ops: ${e.changedOperators.join(",")})` : "")
+          );
+          const summary =
+            items.length === 0
+              ? "No snapshots recorded yet."
+              : `Showing ${items.length} of ${all.length} snapshots:\n${lines.join("\n")}`;
+          return createToolResult(summary);
+        }
+
+        // revert
+        if (args.version === undefined) {
+          return createErrorResult("revert requires `version` (an integer from the `list` action).");
+        }
+        const listResp = await fetch(`${base}/snapshots`, { method: "GET", headers });
+        if (!listResp.ok) {
+          const text = await listResp.text();
+          return createErrorResult(`could not look up version: ${listResp.status} ${text}`);
+        }
+        const all = (await listResp.json()) as SnapshotEntry[];
+        const target = all.find(s => s.version === args.version);
+        if (!target) {
+          return createErrorResult(
+            `no snapshot with version ${args.version}. Available: ${all.map(s => `v${s.version}`).join(", ") || "(none)"}.`
+          );
+        }
+        const revertResp = await fetch(`${base}/snapshots/${target.sid}/revert`, {
+          method: "POST",
+          headers,
+        });
+        if (!revertResp.ok) {
+          const text = await revertResp.text();
+          return createErrorResult(`revert failed: ${revertResp.status} ${text}`);
+        }
+        return createToolResult(
+          `Reverted workflow to v${target.version} ("${target.changeSummary}"). ` +
+            "The user should reload their canvas to see the change."
+        );
+      } catch (err: any) {
+        return createErrorResult(`workflowHistory failed: ${err?.message ?? String(err)}`);
+      }
+    },
+  });
+}
diff --git a/agent-service/src/server.ts b/agent-service/src/server.ts
index a31f9ede115..e1627cc84e4 100644
--- a/agent-service/src/server.ts
+++ b/agent-service/src/server.ts
@@ -46,7 +46,8 @@ let agentCounter = 0;
 async function createAgentInstance(
   modelType: string,
   customName?: string,
-  delegateConfig?: AgentDelegateConfig
+  delegateConfig?: AgentDelegateConfig,
+  customAgent?: any
 ): Promise<{ agentId: string; agent: TexeraAgent }> {
   const agentId = `agent-${++agentCounter}`;
   const config = getBackendConfig();
@@ -63,6 +64,7 @@ async function createAgentInstance(
     modelType,
     agentId,
     agentName: customName || "Bob",
+    customAgent,
   });
 
   await agent.initialize();
@@ -167,7 +169,8 @@ const agentsRouter = new Elysia({ prefix: "/agents" })
   .post(
     "/",
     async ({ body }) => {
-      const { modelType, name, userToken, workflowId, computingUnitId, settings } = body as CreateAgentRequest;
+      const { modelType, name, userToken, workflowId, computingUnitId, settings, customAgent } =
+        body as CreateAgentRequest & { customAgent?: any };
 
       if (!modelType) {
         throw new Error("modelType is required");
@@ -188,7 +191,7 @@ const agentsRouter = new Elysia({ prefix: "/agents" })
         };
       }
 
-      const { agentId, agent } = await createAgentInstance(modelType, name, delegateConfig);
+      const { agentId, agent } = await createAgentInstance(modelType, name, delegateConfig, customAgent);
 
       if (settings) {
         log.info(
@@ -234,6 +237,8 @@ const agentsRouter = new Elysia({ prefix: "/agents" })
             allowedOperatorTypes: t.Optional(t.Array(t.String())),
           })
         ),
+        // Loose schema — frontend may include additional fields; backend treats it as opaque.
+        customAgent: t.Optional(t.Any()),
       }),
     }
   )
diff --git a/amber/src/main/scala/org/apache/texera/web/TexeraWebApplication.scala b/amber/src/main/scala/org/apache/texera/web/TexeraWebApplication.scala
index 98b7c68c974..b8e55ec6477 100644
--- a/amber/src/main/scala/org/apache/texera/web/TexeraWebApplication.scala
+++ b/amber/src/main/scala/org/apache/texera/web/TexeraWebApplication.scala
@@ -50,6 +50,7 @@ import org.apache.texera.web.resource.dashboard.user.workflow.{
   WorkflowAccessResource,
   WorkflowExecutionsResource,
   WorkflowResource,
+  WorkflowSnapshotResource,
   WorkflowVersionResource
 }
 import org.eclipse.jetty.server.session.SessionHandler
@@ -151,6 +152,7 @@ class TexeraWebApplication
     environment.jersey.register(classOf[HubResource])
     environment.jersey.register(classOf[UserResource])
     environment.jersey.register(classOf[WorkflowVersionResource])
+    environment.jersey.register(classOf[WorkflowSnapshotResource])
     environment.jersey.register(classOf[ProjectResource])
     environment.jersey.register(classOf[ProjectAccessResource])
     environment.jersey.register(classOf[WorkflowExecutionsResource])
diff --git a/amber/src/main/scala/org/apache/texera/web/resource/dashboard/user/workflow/WorkflowSnapshotResource.scala b/amber/src/main/scala/org/apache/texera/web/resource/dashboard/user/workflow/WorkflowSnapshotResource.scala
new file mode 100644
index 00000000000..8967eccee5d
--- /dev/null
+++ b/amber/src/main/scala/org/apache/texera/web/resource/dashboard/user/workflow/WorkflowSnapshotResource.scala
@@ -0,0 +1,488 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.texera.web.resource.dashboard.user.workflow
+
+import com.fasterxml.jackson.databind.JsonNode
+import io.dropwizard.auth.Auth
+import org.apache.texera.amber.util.JSONUtils.objectMapper
+import org.apache.texera.auth.SessionUser
+import org.apache.texera.dao.SqlServer
+import org.apache.texera.dao.jooq.generated.tables.daos.WorkflowDao
+import org.jooq.{DSLContext, Field, Record}
+import org.jooq.impl.DSL
+
+import java.sql.Timestamp
+import javax.annotation.security.RolesAllowed
+import javax.ws.rs._
+import javax.ws.rs.core.MediaType
+import scala.jdk.CollectionConverters._
+
+/**
+  * Time Machine — full-snapshot version history for workflows.
+  *
+  * This is a parallel mechanism to WorkflowVersionResource, which stores JSON
+  * diffs on persist. Snapshots here are full content captures tagged with the
+  * discrete event that produced them (operator added, link removed, etc.).
+  *
+  * Reads/writes go through plain DSL because the generated jOOQ bindings for
+  * workflow_snapshot aren't part of this branch — regenerating jOOQ would be a
+  * heavier change than this hackathon scope warrants.
+  */
+object WorkflowSnapshotResource {
+
+  // raw table / field references (no generated jOOQ bindings for this table)
+  private val T = DSL.table(DSL.name("workflow_snapshot"))
+  private val SID: Field[Integer] = DSL.field(DSL.name("sid"), classOf[Integer])
+  private val WID: Field[Integer] = DSL.field(DSL.name("wid"), classOf[Integer])
+  private val UID: Field[Integer] = DSL.field(DSL.name("uid"), classOf[Integer])
+  private val SNAPSHOT_VERSION: Field[Integer] =
+    DSL.field(DSL.name("snapshot_version"), classOf[Integer])
+  private val CONTENT: Field[String] = DSL.field(DSL.name("content"), classOf[String])
+  private val CHANGE_TYPE: Field[String] = DSL.field(DSL.name("change_type"), classOf[String])
+  private val CHANGE_SUMMARY: Field[String] = DSL.field(DSL.name("change_summary"), classOf[String])
+  private val CHANGED_OPERATORS: Field[String] =
+    DSL.field(DSL.name("changed_operators"), classOf[String])
+  private val SOURCE: Field[String] = DSL.field(DSL.name("source"), classOf[String])
+  private val CREATION_TIME: Field[Timestamp] =
+    DSL.field(DSL.name("creation_time"), classOf[Timestamp])
+
+  private def context: DSLContext = SqlServer.getInstance().createDSLContext()
+
+  /** Public DTO returned by list endpoint. Lightweight — no full content. */
+  case class SnapshotEntry(
+      sid: Int,
+      wid: Int,
+      version: Int,
+      changeType: String,
+      changeSummary: String,
+      changedOperators: List[String],
+      source: String,
+      uid: Option[Int],
+      creationTime: Timestamp
+  )
+
+  /** Full snapshot including content. Returned by get-one and revert. */
+  case class SnapshotFull(
+      sid: Int,
+      wid: Int,
+      version: Int,
+      changeType: String,
+      changeSummary: String,
+      changedOperators: List[String],
+      source: String,
+      uid: Option[Int],
+      creationTime: Timestamp,
+      content: String
+  )
+
+  /** Request body for POST /snapshots. */
+  case class SnapshotCreateRequest(
+      content: String,
+      changeType: String,
+      changeSummary: String,
+      changedOperators: java.util.List[String],
+      source: String
+  ) {
+    def changedOpsList: List[String] =
+      Option(changedOperators).map(_.asScala.toList).getOrElse(Nil)
+  }
+
+  /**
+    * A single operator in a diff. `displayName` is pre-resolved on the
+    * server side from `customDisplayName` → `operatorType` → `operatorID`,
+    * so the frontend can render it directly without re-parsing the snapshot
+    * or relying on Option-field serialization. `operatorType` is also
+    * returned separately so the UI can prefer a friendlier schema label
+    * (via OperatorMetadataService.userFriendlyName) when one is available.
+    */
+  case class OperatorDiffEntry(
+      operatorID: String,
+      operatorType: String,
+      customDisplayName: String,
+      displayName: String
+  )
+
+  case class DiffResult(
+      v1: Int,
+      v2: Int,
+      operatorsAdded: List[OperatorDiffEntry],
+      operatorsRemoved: List[OperatorDiffEntry],
+      operatorsModified: List[OperatorDiffEntry],
+      linksAdded: Int,
+      linksRemoved: Int
+  )
+
+  private def nextVersion(ctx: DSLContext, wid: Integer): Int = {
+    val max = ctx
+      .select(DSL.max(SNAPSHOT_VERSION))
+      .from(T)
+      .where(WID.eq(wid))
+      .fetchOne()
+    if (max == null || max.value1() == null) 1 else max.value1().intValue() + 1
+  }
+
+  private def toEntry(r: Record): SnapshotEntry =
+    SnapshotEntry(
+      sid = r.get(SID).intValue(),
+      wid = r.get(WID).intValue(),
+      version = r.get(SNAPSHOT_VERSION).intValue(),
+      changeType = r.get(CHANGE_TYPE),
+      changeSummary = r.get(CHANGE_SUMMARY),
+      changedOperators = parseStringList(r.get(CHANGED_OPERATORS)),
+      source = r.get(SOURCE),
+      uid = Option(r.get(UID)).map(_.intValue()),
+      creationTime = r.get(CREATION_TIME)
+    )
+
+  private def toFull(r: Record): SnapshotFull = {
+    val e = toEntry(r)
+    SnapshotFull(
+      sid = e.sid,
+      wid = e.wid,
+      version = e.version,
+      changeType = e.changeType,
+      changeSummary = e.changeSummary,
+      changedOperators = e.changedOperators,
+      source = e.source,
+      uid = e.uid,
+      creationTime = e.creationTime,
+      content = r.get(CONTENT)
+    )
+  }
+
+  private def parseStringList(raw: String): List[String] = {
+    if (raw == null || raw.isEmpty) return Nil
+    try {
+      val node = objectMapper.readTree(raw)
+      if (node.isArray) node.elements().asScala.map(_.asText()).toList else Nil
+    } catch {
+      case _: Throwable => Nil
+    }
+  }
+
+  /** Extract operator IDs from a workflow content JSON string. */
+  private def extractOperatorIds(content: String): Set[String] = {
+    if (content == null || content.isEmpty) return Set.empty
+    try {
+      val root = objectMapper.readTree(content)
+      val ops = root.path("operators")
+      if (!ops.isArray) return Set.empty
+      ops.elements().asScala.map(_.path("operatorID").asText("")).filter(_.nonEmpty).toSet
+    } catch {
+      case _: Throwable => Set.empty
+    }
+  }
+
+  /** Build a `id -> JSON node` map of operators inside a workflow content. */
+  private def operatorMap(content: String): Map[String, JsonNode] = {
+    if (content == null || content.isEmpty) return Map.empty
+    try {
+      val ops = objectMapper.readTree(content).path("operators")
+      if (!ops.isArray) return Map.empty
+      ops.elements().asScala.toList.flatMap { op =>
+        val id = op.path("operatorID").asText("")
+        if (id.isEmpty) None else Some(id -> op)
+      }.toMap
+    } catch {
+      case _: Throwable => Map.empty
+    }
+  }
+
+  /** Extract a stable id for each link (source op + port -> target op + port). */
+  private def linkIds(content: String): Set[String] = {
+    if (content == null || content.isEmpty) return Set.empty
+    try {
+      val links = objectMapper.readTree(content).path("links")
+      if (!links.isArray) return Set.empty
+      links.elements().asScala.map { l =>
+        val src = l.path("source")
+        val tgt = l.path("target")
+        s"${src.path("operatorID").asText()}:${src.path("portID").asText()}->" +
+          s"${tgt.path("operatorID").asText()}:${tgt.path("portID").asText()}"
+      }.toSet
+    } catch {
+      case _: Throwable => Set.empty
+    }
+  }
+
+  private def toDiffEntry(id: String, node: JsonNode): OperatorDiffEntry = {
+    val opType = node.path("operatorType").asText("")
+    val custom = node.path("customDisplayName").asText("")
+    val resolved =
+      if (custom.nonEmpty) custom
+      else if (opType.nonEmpty) opType
+      else id
+    OperatorDiffEntry(
+      operatorID = id,
+      operatorType = opType,
+      customDisplayName = custom,
+      displayName = resolved
+    )
+  }
+
+  private def computeDiff(v1Content: String, v2Content: String, v1: Int, v2: Int): DiffResult = {
+    val ops1 = operatorMap(v1Content)
+    val ops2 = operatorMap(v2Content)
+    val ids1 = ops1.keySet
+    val ids2 = ops2.keySet
+    // For added/modified, pull metadata from v2 (the "after" side).
+    // For removed, pull from v1 since the operator no longer exists in v2.
+    val added = (ids2 -- ids1).toList.sorted.map(id => toDiffEntry(id, ops2(id)))
+    val removed = (ids1 -- ids2).toList.sorted.map(id => toDiffEntry(id, ops1(id)))
+    val modified = (ids1 intersect ids2).toList
+      .filter(id => ops1(id) != ops2(id))
+      .sorted
+      .map(id => toDiffEntry(id, ops2(id)))
+    val l1 = linkIds(v1Content)
+    val l2 = linkIds(v2Content)
+    DiffResult(
+      v1 = v1,
+      v2 = v2,
+      operatorsAdded = added,
+      operatorsRemoved = removed,
+      operatorsModified = modified,
+      linksAdded = (l2 -- l1).size,
+      linksRemoved = (l1 -- l2).size
+    )
+  }
+
+  private def hasReadAccess(wid: Integer, user: SessionUser): Boolean =
+    WorkflowAccessResource.hasReadAccess(wid, user.getUser.getUid)
+
+  private def hasWriteAccess(wid: Integer, user: SessionUser): Boolean =
+    WorkflowAccessResource.hasWriteAccess(wid, user.getUser.getUid)
+}
+
+@Path("/time-machine")
+@Produces(Array(MediaType.APPLICATION_JSON))
+@Consumes(Array(MediaType.APPLICATION_JSON))
+class WorkflowSnapshotResource {
+  import WorkflowSnapshotResource._
+
+  /** List snapshots, newest first. Lightweight (no content). */
+  @GET
+  @Path("/{wid}/snapshots")
+  @RolesAllowed(Array("REGULAR", "ADMIN"))
+  def listSnapshots(
+      @PathParam("wid") wid: Integer,
+      @Auth sessionUser: SessionUser
+  ): java.util.List[SnapshotEntry] = {
+    if (!hasReadAccess(wid, sessionUser)) {
+      throw new ForbiddenException("No sufficient access privilege.")
+    }
+    val ctx = context
+    ctx
+      .select(
+        SID,
+        WID,
+        UID,
+        SNAPSHOT_VERSION,
+        CHANGE_TYPE,
+        CHANGE_SUMMARY,
+        CHANGED_OPERATORS,
+        SOURCE,
+        CREATION_TIME
+      )
+      .from(T)
+      .where(WID.eq(wid))
+      .orderBy(SNAPSHOT_VERSION.desc())
+      .fetch()
+      .asScala
+      .map(toEntry)
+      .toList
+      .asJava
+  }
+
+  /** Get one snapshot including full content. Used for preview and revert. */
+  @GET
+  @Path("/{wid}/snapshots/{sid}")
+  @RolesAllowed(Array("REGULAR", "ADMIN"))
+  def getSnapshot(
+      @PathParam("wid") wid: Integer,
+      @PathParam("sid") sid: Integer,
+      @Auth sessionUser: SessionUser
+  ): SnapshotFull = {
+    if (!hasReadAccess(wid, sessionUser)) {
+      throw new ForbiddenException("No sufficient access privilege.")
+    }
+    val rec = context
+      .select(
+        SID,
+        WID,
+        UID,
+        SNAPSHOT_VERSION,
+        CHANGE_TYPE,
+        CHANGE_SUMMARY,
+        CHANGED_OPERATORS,
+        SOURCE,
+        CREATION_TIME,
+        CONTENT
+      )
+      .from(T)
+      .where(WID.eq(wid).and(SID.eq(sid)))
+      .fetchOne()
+    if (rec == null) throw new NotFoundException(s"Snapshot $sid not found for workflow $wid")
+    toFull(rec)
+  }
+
+  /** Create a new snapshot for this workflow. */
+  @POST
+  @Path("/{wid}/snapshots")
+  @RolesAllowed(Array("REGULAR", "ADMIN"))
+  def createSnapshot(
+      @PathParam("wid") wid: Integer,
+      req: SnapshotCreateRequest,
+      @Auth sessionUser: SessionUser
+  ): SnapshotEntry = {
+    if (!hasWriteAccess(wid, sessionUser)) {
+      throw new ForbiddenException("No sufficient access privilege.")
+    }
+    if (req == null || req.content == null || req.content.isEmpty) {
+      throw new BadRequestException("Snapshot content is required.")
+    }
+    val ctx = context
+    val v = nextVersion(ctx, wid)
+    val changedOpsJson =
+      objectMapper.writeValueAsString(req.changedOpsList.asJava)
+    val source = Option(req.source).filter(Set("user", "agent").contains).getOrElse("user")
+    val uid: Integer = sessionUser.getUser.getUid
+
+    val sid: Integer = ctx
+      .insertInto(T)
+      .columns(
+        WID,
+        UID,
+        SNAPSHOT_VERSION,
+        CONTENT,
+        CHANGE_TYPE,
+        CHANGE_SUMMARY,
+        CHANGED_OPERATORS,
+        SOURCE
+      )
+      .values(
+        wid,
+        uid,
+        Integer.valueOf(v),
+        req.content,
+        Option(req.changeType).getOrElse("manual_save"),
+        Option(req.changeSummary).getOrElse(""),
+        changedOpsJson,
+        source
+      )
+      .returning(SID)
+      .fetchOne()
+      .get(SID)
+
+    val rec = ctx
+      .select(
+        SID,
+        WID,
+        UID,
+        SNAPSHOT_VERSION,
+        CHANGE_TYPE,
+        CHANGE_SUMMARY,
+        CHANGED_OPERATORS,
+        SOURCE,
+        CREATION_TIME
+      )
+      .from(T)
+      .where(SID.eq(sid))
+      .fetchOne()
+    toEntry(rec)
+  }
+
+  /**
+    * Revert the workflow content to the snapshot. Writes the snapshot's content
+    * back into the workflow row and records a new snapshot describing the revert.
+    */
+  @POST
+  @Path("/{wid}/snapshots/{sid}/revert")
+  @RolesAllowed(Array("REGULAR", "ADMIN"))
+  def revertSnapshot(
+      @PathParam("wid") wid: Integer,
+      @PathParam("sid") sid: Integer,
+      @Auth sessionUser: SessionUser
+  ): SnapshotFull = {
+    if (!hasWriteAccess(wid, sessionUser)) {
+      throw new ForbiddenException("No sufficient access privilege.")
+    }
+    val ctx = context
+    val target = getSnapshot(wid, sid, sessionUser)
+
+    // overwrite workflow content with the snapshot
+    val workflowDao = new WorkflowDao(ctx.configuration)
+    val workflow = workflowDao.fetchOneByWid(wid)
+    if (workflow == null) throw new NotFoundException(s"Workflow $wid not found")
+    workflow.setContent(target.content)
+    workflow.setLastModifiedTime(new Timestamp(System.currentTimeMillis()))
+    workflowDao.update(workflow)
+
+    // record the revert as its own snapshot entry, pointing at the same content
+    val v = nextVersion(ctx, wid)
+    val uid: Integer = sessionUser.getUser.getUid
+    val emptyOps = objectMapper.writeValueAsString(List.empty[String].asJava)
+    ctx
+      .insertInto(T)
+      .columns(
+        WID,
+        UID,
+        SNAPSHOT_VERSION,
+        CONTENT,
+        CHANGE_TYPE,
+        CHANGE_SUMMARY,
+        CHANGED_OPERATORS,
+        SOURCE
+      )
+      .values(
+        wid,
+        uid,
+        Integer.valueOf(v),
+        target.content,
+        "revert",
+        s"Reverted to version ${target.version}",
+        emptyOps,
+        "user"
+      )
+      .execute()
+
+    target
+  }
+
+  /** Diff between two snapshots of the same workflow. */
+  @GET
+  @Path("/{wid}/diff")
+  @RolesAllowed(Array("REGULAR", "ADMIN"))
+  def diffSnapshots(
+      @PathParam("wid") wid: Integer,
+      @QueryParam("v1") sid1: Integer,
+      @QueryParam("v2") sid2: Integer,
+      @Auth sessionUser: SessionUser
+  ): DiffResult = {
+    if (!hasReadAccess(wid, sessionUser)) {
+      throw new ForbiddenException("No sufficient access privilege.")
+    }
+    if (sid1 == null || sid2 == null) {
+      throw new BadRequestException("Both v1 and v2 query params (snapshot sids) are required.")
+    }
+    val a = getSnapshot(wid, sid1, sessionUser)
+    val b = getSnapshot(wid, sid2, sessionUser)
+    computeDiff(a.content, b.content, a.version, b.version)
+  }
+}
diff --git a/bin/litellm-config.yaml b/bin/litellm-config.yaml
index 6a75d7e0013..941bad68778 100644
--- a/bin/litellm-config.yaml
+++ b/bin/litellm-config.yaml
@@ -29,6 +29,10 @@ model_list:
     litellm_params:
       model: claude-haiku-4-5-20251001
       api_key: "os.environ/ANTHROPIC_API_KEY"
+  - model_name: claude-opus-4.7
+    litellm_params:
+      model: claude-opus-4-7
+      api_key: "os.environ/ANTHROPIC_API_KEY"
   - model_name: gpt-5-mini
     litellm_params:
       model: gpt-5-mini-2025-08-07
diff --git a/common/config/src/main/resources/gui.conf b/common/config/src/main/resources/gui.conf
index d58d94ac7b9..9bef054a404 100644
--- a/common/config/src/main/resources/gui.conf
+++ b/common/config/src/main/resources/gui.conf
@@ -109,7 +109,7 @@ gui {
     active-time-in-minutes = ${?GUI_WORKFLOW_WORKSPACE_ACTIVE_TIME_IN_MINUTES}
 
     # whether AI copilot feature is enabled
-    copilot-enabled = false
+    copilot-enabled = true
     copilot-enabled = ${?GUI_WORKFLOW_WORKSPACE_COPILOT_ENABLED}
 
     # the limit of columns to be displayed in the result table
diff --git a/frontend/src/app/app-routing.constant.ts b/frontend/src/app/app-routing.constant.ts
index 4181df8a954..aaaee0192ac 100644
--- a/frontend/src/app/app-routing.constant.ts
+++ b/frontend/src/app/app-routing.constant.ts
@@ -37,6 +37,7 @@ export const DASHBOARD_USER_DATASET = `${DASHBOARD_USER}/dataset`;
 export const DASHBOARD_USER_DATASET_CREATE = `${DASHBOARD_USER_DATASET}/create`;
 export const DASHBOARD_USER_COMPUTING_UNIT = `${DASHBOARD_USER}/compute`;
 export const DASHBOARD_USER_QUOTA = `${DASHBOARD_USER}/quota`;
+export const DASHBOARD_USER_AGENT = `${DASHBOARD_USER}/agent`;
 export const DASHBOARD_USER_DISCUSSION = `${DASHBOARD_USER}/discussion`;
 
 export const DASHBOARD_ADMIN = `${DASHBOARD}/admin`;
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 179caf5c088..00379f64f4d 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -36,6 +36,7 @@ import { FlarumComponent } from "./dashboard/component/user/flarum/flarum.compon
 import { AdminGmailComponent } from "./dashboard/component/admin/gmail/admin-gmail.component";
 import { DatasetDetailComponent } from "./dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component";
 import { UserDatasetComponent } from "./dashboard/component/user/user-dataset/user-dataset.component";
+import { UserAgentComponent } from "./dashboard/component/user/user-agent/user-agent.component";
 import { HubWorkflowDetailComponent } from "./hub/component/workflow/detail/hub-workflow-detail.component";
 import { LandingPageComponent } from "./hub/component/landing-page/landing-page.component";
 import { DASHBOARD_ABOUT, DASHBOARD_USER_WORKFLOW } from "./app-routing.constant";
@@ -139,6 +140,10 @@ routes.push({
           path: "quota",
           component: UserQuotaComponent,
         },
+        {
+          path: "agent",
+          component: UserAgentComponent,
+        },
         {
           path: "discussion",
           component: FlarumComponent,
diff --git a/frontend/src/app/dashboard/component/dashboard.component.html b/frontend/src/app/dashboard/component/dashboard.component.html
index b04eafb3107..5cb1148c0f0 100644
--- a/frontend/src/app/dashboard/component/dashboard.component.html
+++ b/frontend/src/app/dashboard/component/dashboard.component.html
@@ -97,6 +97,17 @@
               nzType="database"></span>
             <span>Datasets</span>
           </li>
+          <li
+            nz-menu-item
+            nz-tooltip="Manage your custom AI agents"
+            nzMatchRouter="true"
+            nzTooltipPlacement="right"
+            [routerLink]="DASHBOARD_USER_AGENT">
+            <span
+              nz-icon
+              nzType="robot"></span>
+            <span>Agents</span>
+          </li>
           <li
             *ngIf="sidebarTabs.compute_enabled"
             nz-menu-item
diff --git a/frontend/src/app/dashboard/component/dashboard.component.ts b/frontend/src/app/dashboard/component/dashboard.component.ts
index 57e6e8e284e..a70c7e10dab 100644
--- a/frontend/src/app/dashboard/component/dashboard.component.ts
+++ b/frontend/src/app/dashboard/component/dashboard.component.ts
@@ -40,6 +40,7 @@ import {
   DASHBOARD_USER_PROJECT,
   DASHBOARD_USER_QUOTA,
   DASHBOARD_USER_WORKFLOW,
+  DASHBOARD_USER_AGENT,
 } from "../../app-routing.constant";
 import { Version } from "../../../environments/version";
 import { SidebarTabs } from "../../common/type/gui-config";
@@ -111,6 +112,7 @@ export class DashboardComponent implements OnInit {
   protected readonly DASHBOARD_USER_COMPUTING_UNIT = DASHBOARD_USER_COMPUTING_UNIT;
   protected readonly DASHBOARD_USER_QUOTA = DASHBOARD_USER_QUOTA;
   protected readonly DASHBOARD_USER_DISCUSSION = DASHBOARD_USER_DISCUSSION;
+  protected readonly DASHBOARD_USER_AGENT = DASHBOARD_USER_AGENT;
   protected readonly DASHBOARD_ADMIN_USER = DASHBOARD_ADMIN_USER;
   protected readonly DASHBOARD_ADMIN_GMAIL = DASHBOARD_ADMIN_GMAIL;
   protected readonly DASHBOARD_ADMIN_EXECUTION = DASHBOARD_ADMIN_EXECUTION;
diff --git a/frontend/src/app/dashboard/component/user/user-agent/user-agent-editor.component.html b/frontend/src/app/dashboard/component/user/user-agent/user-agent-editor.component.html
new file mode 100644
index 00000000000..0c35fcc29d8
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-agent/user-agent-editor.component.html
@@ -0,0 +1,130 @@
+<div class="agent-editor">
+  <!-- Basic info: icon + name on one row, then description, then model. -->
+  <div class="basic-row">
+    <div class="icon-tile">
+      <input nz-input class="icon-tile-input" maxlength="4" [(ngModel)]="draft.icon" />
+      <span class="icon-tile-badge" nz-icon nzType="edit" nzTheme="outline"></span>
+    </div>
+    <input nz-input class="name-input" [(ngModel)]="draft.name" placeholder="Agent name" />
+  </div>
+  <textarea
+    nz-input
+    class="description-input"
+    rows="2"
+    [(ngModel)]="draft.description"
+    placeholder="What does this agent specialize in?"></textarea>
+  <div class="model-row">
+    <nz-select [(ngModel)]="draft.model" class="full-width">
+      <nz-option *ngFor="let opt of MODELS" [nzValue]="opt.value" [nzLabel]="opt.label"></nz-option>
+    </nz-select>
+    <p class="hint">Opus: best for complex workflows. Haiku: fast &amp; simple tasks.</p>
+  </div>
+
+  <nz-divider nzText="Configuration" nzOrientation="left"></nz-divider>
+  <div class="form-row-grid">
+    <div>
+      <label>Domain</label>
+      <nz-select [(ngModel)]="draft.domain" class="full-width">
+        <nz-option *ngFor="let opt of DOMAINS" [nzValue]="opt.value" [nzLabel]="opt.label"></nz-option>
+      </nz-select>
+    </div>
+    <div>
+      <label>Methodology</label>
+      <nz-select [(ngModel)]="draft.methodology" class="full-width">
+        <nz-option *ngFor="let opt of METHODOLOGIES" [nzValue]="opt.value" [nzLabel]="opt.label"></nz-option>
+      </nz-select>
+    </div>
+    <div>
+      <label>Task Type</label>
+      <nz-select [(ngModel)]="draft.taskType" class="full-width">
+        <nz-option *ngFor="let opt of TASK_TYPES" [nzValue]="opt.value" [nzLabel]="opt.label"></nz-option>
+      </nz-select>
+    </div>
+  </div>
+
+  <nz-divider nzText="Guardrails" nzOrientation="left"></nz-divider>
+  <div class="guardrails-grid">
+    <label
+      nz-checkbox
+      class="guardrail-chip"
+      [class.is-checked]="draft.guardrails.requireTrainTestSplit"
+      [(ngModel)]="draft.guardrails.requireTrainTestSplit">
+      Require train/test split
+    </label>
+    <label
+      nz-checkbox
+      class="guardrail-chip"
+      [class.is-checked]="draft.guardrails.requireEvaluation"
+      [(ngModel)]="draft.guardrails.requireEvaluation">
+      Require evaluation metrics
+    </label>
+    <label
+      nz-checkbox
+      class="guardrail-chip"
+      [class.is-checked]="draft.guardrails.preventDataLeakage"
+      [(ngModel)]="draft.guardrails.preventDataLeakage">
+      Prevent data leakage
+    </label>
+    <label
+      nz-checkbox
+      class="guardrail-chip"
+      [class.is-checked]="draft.guardrails.handleMissingValues"
+      [(ngModel)]="draft.guardrails.handleMissingValues">
+      Handle missing values
+    </label>
+    <label
+      nz-checkbox
+      class="guardrail-chip"
+      [class.is-checked]="draft.guardrails.featureScalingCheck"
+      [(ngModel)]="draft.guardrails.featureScalingCheck">
+      Feature scaling check
+    </label>
+  </div>
+
+  <nz-divider nzText="Example Workflows" nzOrientation="left"></nz-divider>
+  <p class="section-hint">Select workflows as templates. Your agent will follow similar patterns.</p>
+  <nz-select
+    nzMode="multiple"
+    class="full-width"
+    [(ngModel)]="draft.exampleWorkflowIds"
+    nzPlaceHolder="Pick from your saved workflows"
+    nzAllowClear>
+    <nz-option *ngFor="let wf of workflowOptions" [nzValue]="wf.value" [nzLabel]="wf.label"></nz-option>
+  </nz-select>
+  <p class="hint" *ngIf="workflowOptions.length === 0">No saved workflows found.</p>
+
+  <nz-divider nzText="Reference Files" nzOrientation="left"></nz-divider>
+  <p class="section-hint">Upload data dictionaries, methodology docs, or paper excerpts.</p>
+  <div
+    class="dropzone"
+    [class.is-dragging]="dragging"
+    (dragover)="onDragOver($event)"
+    (dragleave)="onDragLeave($event)"
+    (drop)="onDrop($event)">
+    <span nz-icon nzType="inbox"></span>
+    <p>
+      Drag &amp; drop files here, or
+      <label class="browse-link">
+        browse
+        <input type="file" multiple [accept]="KNOWLEDGE_ACCEPT" (change)="onFileInput($event)" />
+      </label>
+    </p>
+    <p class="hint">CSV, PDF, TXT, MD, JSON — max 1 MB each</p>
+  </div>
+  <ul class="file-list" *ngIf="draft.knowledgeFiles?.length">
+    <li *ngFor="let file of draft.knowledgeFiles">
+      <span nz-icon nzType="file" class="file-icon"></span>
+      <span class="file-name">{{ file.name }}</span>
+      <span class="file-meta">{{ formatSize(file.size) }}</span>
+      <button nz-button nzType="text" nzSize="small" nzDanger (click)="removeKnowledgeFile(file.id)">
+        <span nz-icon nzType="close"></span>
+      </button>
+    </li>
+  </ul>
+
+  <nz-divider></nz-divider>
+  <div class="footer">
+    <button nz-button (click)="cancel()">Cancel</button>
+    <button nz-button nzType="primary" (click)="save()" [disabled]="!draft.name?.trim()">Save</button>
+  </div>
+</div>
diff --git a/frontend/src/app/dashboard/component/user/user-agent/user-agent-editor.component.scss b/frontend/src/app/dashboard/component/user/user-agent/user-agent-editor.component.scss
new file mode 100644
index 00000000000..36b05fb8e54
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-agent/user-agent-editor.component.scss
@@ -0,0 +1,187 @@
+.agent-editor {
+  display: flex;
+  flex-direction: column;
+
+  label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 4px;
+    .required { color: #f5222d; }
+  }
+
+  .full-width {
+    width: 100%;
+  }
+
+  // ----- Basic info row: 48px icon tile + name input ---------------------
+  .basic-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 8px;
+  }
+
+  .icon-tile {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    flex-shrink: 0;
+
+    .icon-tile-input {
+      width: 48px;
+      height: 48px;
+      padding: 0;
+      text-align: center;
+      font-size: 26px;
+      line-height: 48px;
+      border-radius: 8px;
+      background: #fafafa;
+    }
+
+    .icon-tile-badge {
+      position: absolute;
+      right: -4px;
+      bottom: -4px;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: #1890ff;
+      color: #fff;
+      font-size: 9px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      box-shadow: 0 0 0 2px #fff;
+    }
+  }
+
+  .name-input {
+    flex: 1;
+  }
+
+  .description-input {
+    margin-bottom: 8px;
+  }
+
+  .model-row {
+    margin-bottom: 4px;
+  }
+
+  // ----- Configuration: 3-column grid ------------------------------------
+  .form-row-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 12px;
+  }
+
+  // ----- Guardrails: 2-column chip grid ----------------------------------
+  .guardrails-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+
+  // Each chip is an nz-checkbox label styled as a pill. ng-zorro renders the
+  // checkbox glyph inside a `.ant-checkbox` span; this rule colors the
+  // surrounding label, not the glyph.
+  .guardrail-chip {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 8px 12px;
+    border-radius: 6px;
+    background: #f5f5f5;
+    transition: background 0.15s, color 0.15s;
+    cursor: pointer;
+    user-select: none;
+    font-weight: 400;
+
+    &.is-checked {
+      background: #e6f4ff;
+      color: #003a8c;
+    }
+
+    &:hover {
+      background: #ebebeb;
+    }
+
+    &.is-checked:hover {
+      background: #d6ebff;
+    }
+  }
+
+  // ----- Sections ---------------------------------------------------------
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  .section-hint {
+    color: rgba(0, 0, 0, 0.55);
+    margin: 0 0 8px;
+    font-size: 13px;
+  }
+
+  .hint {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+    margin: 4px 0 0;
+  }
+
+  // ----- Reference files (dropzone) --------------------------------------
+  .dropzone {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    padding: 16px;
+    text-align: center;
+    background: #fafafa;
+    transition: border-color 0.15s, background 0.15s;
+
+    &.is-dragging {
+      border-color: #1890ff;
+      background: #e6f7ff;
+    }
+
+    span[nz-icon] {
+      font-size: 24px;
+      color: #1890ff;
+    }
+
+    p {
+      margin: 4px 0 0;
+    }
+
+    .browse-link {
+      color: #1890ff;
+      cursor: pointer;
+      text-decoration: underline;
+
+      input[type="file"] {
+        display: none;
+      }
+    }
+  }
+
+  .file-list {
+    list-style: none;
+    padding: 0;
+    margin: 8px 0 0;
+
+    li {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 10px;
+      border: 1px solid #f0f0f0;
+      border-radius: 4px;
+      margin-bottom: 4px;
+      background: #fff;
+
+      .file-icon { color: rgba(0, 0, 0, 0.45); }
+      .file-name { flex: 1; }
+      .file-meta { color: rgba(0, 0, 0, 0.45); font-size: 12px; }
+    }
+  }
+}
diff --git a/frontend/src/app/dashboard/component/user/user-agent/user-agent-editor.component.ts b/frontend/src/app/dashboard/component/user/user-agent/user-agent-editor.component.ts
new file mode 100644
index 00000000000..1ebf283e06a
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-agent/user-agent-editor.component.ts
@@ -0,0 +1,191 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, inject, OnInit } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { NzModalRef, NZ_MODAL_DATA } from "ng-zorro-antd/modal";
+import { NzInputModule } from "ng-zorro-antd/input";
+import { NzSelectModule } from "ng-zorro-antd/select";
+import { NzCheckboxModule } from "ng-zorro-antd/checkbox";
+import { NzButtonModule } from "ng-zorro-antd/button";
+import { NzFormModule } from "ng-zorro-antd/form";
+import { NzDividerModule } from "ng-zorro-antd/divider";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { NzMessageService } from "ng-zorro-antd/message";
+import {
+  CustomAgent,
+  AGENT_DOMAIN_OPTIONS,
+  AGENT_METHODOLOGY_OPTIONS,
+  AGENT_MODEL_OPTIONS,
+  AGENT_TASK_TYPE_OPTIONS,
+  AGENT_OUTPUT_FORMAT_OPTIONS,
+  KnowledgeFile,
+  KNOWLEDGE_FILE_MAX_BYTES,
+  KNOWLEDGE_FILE_ACCEPT,
+} from "../../../type/custom-agent.interface";
+import { OperatorMetadataService } from "../../../../workspace/service/operator-metadata/operator-metadata.service";
+import { WorkflowPersistService } from "../../../../common/service/workflow-persist/workflow-persist.service";
+
+interface OperatorOption {
+  value: string;
+  label: string;
+}
+
+interface WorkflowOption {
+  value: number;
+  label: string;
+}
+
+@Component({
+  selector: "texera-user-agent-editor",
+  templateUrl: "./user-agent-editor.component.html",
+  styleUrls: ["./user-agent-editor.component.scss"],
+  imports: [
+    CommonModule,
+    FormsModule,
+    NzInputModule,
+    NzSelectModule,
+    NzCheckboxModule,
+    NzButtonModule,
+    NzFormModule,
+    NzDividerModule,
+    NzIconModule,
+  ],
+})
+export class UserAgentEditorComponent implements OnInit {
+  protected readonly DOMAINS = AGENT_DOMAIN_OPTIONS;
+  protected readonly METHODOLOGIES = AGENT_METHODOLOGY_OPTIONS;
+  protected readonly MODELS = AGENT_MODEL_OPTIONS;
+  protected readonly TASK_TYPES = AGENT_TASK_TYPE_OPTIONS;
+  protected readonly OUTPUT_FORMATS = AGENT_OUTPUT_FORMAT_OPTIONS;
+  protected readonly KNOWLEDGE_ACCEPT = KNOWLEDGE_FILE_ACCEPT;
+
+  public draft!: Omit<CustomAgent, "id" | "createdAt" | "updatedAt"> & Partial<Pick<CustomAgent, "id">>;
+  public operatorOptions: OperatorOption[] = [];
+  public workflowOptions: WorkflowOption[] = [];
+  public dragging = false;
+
+  private readonly modalRef = inject(NzModalRef);
+  private readonly modalData = inject<{
+    initial: Omit<CustomAgent, "id" | "createdAt" | "updatedAt"> & Partial<Pick<CustomAgent, "id">>;
+    title: string;
+  }>(NZ_MODAL_DATA);
+
+  constructor(
+    private operatorMetadataService: OperatorMetadataService,
+    private workflowPersistService: WorkflowPersistService,
+    private message: NzMessageService
+  ) {}
+
+  ngOnInit(): void {
+    this.draft = { ...this.modalData.initial };
+
+    this.operatorMetadataService.getOperatorMetadata().subscribe(meta => {
+      this.operatorOptions = (meta?.operators ?? [])
+        .map(op => ({
+          value: op.operatorType,
+          label: op.additionalMetadata?.userFriendlyName
+            ? `${op.additionalMetadata.userFriendlyName} (${op.operatorType})`
+            : op.operatorType,
+        }))
+        .sort((a, b) => a.label.localeCompare(b.label));
+    });
+
+    this.workflowPersistService.retrieveWorkflowsBySessionUser().subscribe({
+      next: workflows => {
+        this.workflowOptions = workflows
+          .filter(w => w.workflow.wid !== undefined)
+          .map(w => ({ value: w.workflow.wid as number, label: w.workflow.name }))
+          .sort((a, b) => a.label.localeCompare(b.label));
+      },
+      error: () => {
+        // Not logged in or backend unavailable — leave list empty.
+      },
+    });
+  }
+
+  public save(): void {
+    if (!this.draft.name.trim()) return;
+    this.modalRef.close(this.draft);
+  }
+
+  public cancel(): void {
+    this.modalRef.close(null);
+  }
+
+  public onFileInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    if (!input.files) return;
+    this.ingestFiles(Array.from(input.files));
+    input.value = "";
+  }
+
+  public onDrop(event: DragEvent): void {
+    event.preventDefault();
+    this.dragging = false;
+    const files = event.dataTransfer?.files;
+    if (files) this.ingestFiles(Array.from(files));
+  }
+
+  public onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    this.dragging = true;
+  }
+
+  public onDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    this.dragging = false;
+  }
+
+  public removeKnowledgeFile(id: string): void {
+    this.draft.knowledgeFiles = this.draft.knowledgeFiles.filter(f => f.id !== id);
+  }
+
+  private ingestFiles(files: File[]): void {
+    files.forEach(file => {
+      if (file.size > KNOWLEDGE_FILE_MAX_BYTES) {
+        this.message.warning(`"${file.name}" is too large (max 1 MB).`);
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result;
+        if (typeof result !== "string") return;
+        const commaIdx = result.indexOf(",");
+        const base64 = commaIdx >= 0 ? result.slice(commaIdx + 1) : result;
+        const entry: KnowledgeFile = {
+          id: `kf-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`,
+          name: file.name,
+          mimeType: file.type || "application/octet-stream",
+          size: file.size,
+          contentBase64: base64,
+        };
+        this.draft.knowledgeFiles = [...this.draft.knowledgeFiles, entry];
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+
+  public formatSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+  }
+}
diff --git a/frontend/src/app/dashboard/component/user/user-agent/user-agent.component.html b/frontend/src/app/dashboard/component/user/user-agent/user-agent.component.html
new file mode 100644
index 00000000000..26ccd48e85e
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-agent/user-agent.component.html
@@ -0,0 +1,46 @@
+<div class="agent-library">
+  <div class="header">
+    <div class="title-block">
+      <h2>My Agents</h2>
+      <p class="subtitle">Specialized AI agents for your Texera workflows.</p>
+    </div>
+    <button nz-button nzType="primary" nzSize="large" (click)="openCreate()">
+      <span nz-icon nzType="plus"></span>
+      Create Agent
+    </button>
+  </div>
+
+  <nz-empty *ngIf="agents.length === 0" nzNotFoundContent="No agents yet. Click 'Create Agent' to build your first one."></nz-empty>
+
+  <div class="cards-grid" *ngIf="agents.length > 0">
+    <nz-card *ngFor="let agent of agents" class="agent-card">
+      <div class="card-head">
+        <span class="icon">{{ agent.icon }}</span>
+        <div class="name-block">
+          <div class="name">{{ agent.name }}</div>
+          <div class="badges">
+            <nz-tag nzColor="blue">{{ domainLabel(agent.domain) }}</nz-tag>
+            <nz-tag *ngIf="agent.methodology !== 'none'" nzColor="purple">{{ methodologyLabel(agent.methodology) }}</nz-tag>
+            <nz-tag *ngIf="agent.isPublic" nzColor="green">Public</nz-tag>
+          </div>
+        </div>
+      </div>
+      <div class="description">{{ agent.description || '—' }}</div>
+      <div class="card-meta">Created {{ agent.createdAt | date:'short' }}</div>
+      <div class="card-actions">
+        <button nz-button nzSize="small" (click)="openEdit(agent)">
+          <span nz-icon nzType="edit"></span> Edit
+        </button>
+        <button nz-button nzSize="small" (click)="duplicate(agent)">
+          <span nz-icon nzType="copy"></span> Duplicate
+        </button>
+        <button nz-button nzSize="small" nzDanger
+          nz-popconfirm
+          nzPopconfirmTitle="Delete this agent?"
+          (nzOnConfirm)="delete(agent)">
+          <span nz-icon nzType="delete"></span> Delete
+        </button>
+      </div>
+    </nz-card>
+  </div>
+</div>
diff --git a/frontend/src/app/dashboard/component/user/user-agent/user-agent.component.scss b/frontend/src/app/dashboard/component/user/user-agent/user-agent.component.scss
new file mode 100644
index 00000000000..cd7b098182f
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-agent/user-agent.component.scss
@@ -0,0 +1,65 @@
+.agent-library {
+  padding: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 24px;
+
+    .title-block h2 {
+      margin: 0 0 4px;
+      font-size: 24px;
+    }
+    .subtitle {
+      color: rgba(0,0,0,0.55);
+      margin: 0;
+    }
+  }
+
+  .cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 16px;
+  }
+
+  .agent-card {
+    .card-head {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 8px;
+    }
+    .icon {
+      font-size: 36px;
+      line-height: 1;
+    }
+    .name {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+    .badges {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    .description {
+      color: rgba(0,0,0,0.65);
+      min-height: 40px;
+      margin-bottom: 12px;
+      white-space: pre-wrap;
+    }
+    .card-meta {
+      color: rgba(0,0,0,0.45);
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .card-actions {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+  }
+}
diff --git a/frontend/src/app/dashboard/component/user/user-agent/user-agent.component.ts b/frontend/src/app/dashboard/component/user/user-agent/user-agent.component.ts
new file mode 100644
index 00000000000..81d1b33ee1b
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-agent/user-agent.component.ts
@@ -0,0 +1,128 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { NzModalService } from "ng-zorro-antd/modal";
+import { NzButtonModule } from "ng-zorro-antd/button";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { NzCardModule } from "ng-zorro-antd/card";
+import { NzTagModule } from "ng-zorro-antd/tag";
+import { NzEmptyModule } from "ng-zorro-antd/empty";
+import { NzPopconfirmModule } from "ng-zorro-antd/popconfirm";
+import { NzTooltipModule } from "ng-zorro-antd/tooltip";
+import { CustomAgentService } from "../../../service/user/custom-agent/custom-agent.service";
+import { UserService } from "../../../../common/service/user/user.service";
+import { UserAgentEditorComponent } from "./user-agent-editor.component";
+import {
+  AGENT_DOMAIN_OPTIONS,
+  AGENT_METHODOLOGY_OPTIONS,
+  CustomAgent,
+} from "../../../type/custom-agent.interface";
+
+@UntilDestroy()
+@Component({
+  selector: "texera-user-agent",
+  templateUrl: "./user-agent.component.html",
+  styleUrls: ["./user-agent.component.scss"],
+  imports: [
+    CommonModule,
+    NzButtonModule,
+    NzIconModule,
+    NzCardModule,
+    NzTagModule,
+    NzEmptyModule,
+    NzPopconfirmModule,
+    NzTooltipModule,
+  ],
+})
+export class UserAgentComponent implements OnInit {
+  public agents: CustomAgent[] = [];
+
+  private readonly domainLabels = new Map(AGENT_DOMAIN_OPTIONS.map(o => [o.value, o.label]));
+  private readonly methodologyLabels = new Map(AGENT_METHODOLOGY_OPTIONS.map(o => [o.value, o.label]));
+
+  constructor(
+    private customAgentService: CustomAgentService,
+    private modalService: NzModalService,
+    private userService: UserService
+  ) {}
+
+  ngOnInit(): void {
+    this.customAgentService
+      .list$()
+      .pipe(untilDestroyed(this))
+      .subscribe(agents => (this.agents = agents));
+  }
+
+  public domainLabel(value: string): string {
+    return this.domainLabels.get(value as any) ?? value;
+  }
+
+  public methodologyLabel(value: string): string {
+    return this.methodologyLabels.get(value as any) ?? value;
+  }
+
+  public openCreate(): void {
+    const creator = this.currentUserName();
+    const draft = this.customAgentService.emptyDraft(creator);
+    this.openEditor("Create agent", draft, saved => {
+      this.customAgentService.create(saved);
+    });
+  }
+
+  public openEdit(agent: CustomAgent): void {
+    const { id, createdAt, updatedAt, ...editable } = agent;
+    this.openEditor("Edit agent", { ...editable, id }, saved => {
+      const { id: savedId, ...patch } = saved as CustomAgent;
+      this.customAgentService.update(agent.id, patch);
+    });
+  }
+
+  public duplicate(agent: CustomAgent): void {
+    this.customAgentService.duplicate(agent.id);
+  }
+
+  public delete(agent: CustomAgent): void {
+    this.customAgentService.delete(agent.id);
+  }
+
+  private currentUserName(): string {
+    const user = this.userService.getCurrentUser();
+    return user?.name ?? "anonymous";
+  }
+
+  private openEditor(
+    title: string,
+    initial: Omit<CustomAgent, "id" | "createdAt" | "updatedAt"> & Partial<Pick<CustomAgent, "id">>,
+    onSave: (saved: any) => void
+  ): void {
+    const ref = this.modalService.create({
+      nzTitle: title,
+      nzContent: UserAgentEditorComponent,
+      nzData: { initial, title },
+      nzFooter: null,
+      nzWidth: 720,
+    });
+    ref.afterClose.subscribe(result => {
+      if (result) onSave(result);
+    });
+  }
+}
diff --git a/frontend/src/app/dashboard/service/user/custom-agent/custom-agent.service.ts b/frontend/src/app/dashboard/service/user/custom-agent/custom-agent.service.ts
new file mode 100644
index 00000000000..e97cd3058c9
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/custom-agent/custom-agent.service.ts
@@ -0,0 +1,136 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Injectable } from "@angular/core";
+import { BehaviorSubject, Observable } from "rxjs";
+import {
+  CustomAgent,
+  DEFAULT_AGENT_MODEL,
+  DEFAULT_GUARDRAILS,
+  DEFAULT_OUTPUT_PREFERENCES,
+} from "../../../type/custom-agent.interface";
+
+const STORAGE_KEY = "texera.customAgents.v1";
+
+@Injectable({
+  providedIn: "root",
+})
+export class CustomAgentService {
+  private readonly agentsSubject = new BehaviorSubject<CustomAgent[]>(this.readAll());
+
+  public list$(): Observable<CustomAgent[]> {
+    return this.agentsSubject.asObservable();
+  }
+
+  public list(): CustomAgent[] {
+    return this.agentsSubject.value;
+  }
+
+  public get(id: string): CustomAgent | undefined {
+    return this.agentsSubject.value.find(a => a.id === id);
+  }
+
+  public create(input: Omit<CustomAgent, "id" | "createdAt" | "updatedAt">): CustomAgent {
+    const now = new Date().toISOString();
+    const agent: CustomAgent = {
+      ...input,
+      id: this.generateId(),
+      createdAt: now,
+      updatedAt: now,
+    };
+    const next = [...this.agentsSubject.value, agent];
+    this.persist(next);
+    return agent;
+  }
+
+  public update(id: string, patch: Partial<Omit<CustomAgent, "id" | "createdAt">>): CustomAgent | undefined {
+    const idx = this.agentsSubject.value.findIndex(a => a.id === id);
+    if (idx === -1) return undefined;
+    const updated: CustomAgent = {
+      ...this.agentsSubject.value[idx],
+      ...patch,
+      id,
+      createdAt: this.agentsSubject.value[idx].createdAt,
+      updatedAt: new Date().toISOString(),
+    };
+    const next = [...this.agentsSubject.value];
+    next[idx] = updated;
+    this.persist(next);
+    return updated;
+  }
+
+  public delete(id: string): void {
+    const next = this.agentsSubject.value.filter(a => a.id !== id);
+    this.persist(next);
+  }
+
+  public duplicate(id: string): CustomAgent | undefined {
+    const source = this.get(id);
+    if (!source) return undefined;
+    const { id: _ignored, createdAt: _c, updatedAt: _u, ...rest } = source;
+    return this.create({ ...rest, name: `${source.name} (Copy)` });
+  }
+
+  public emptyDraft(creator: string): Omit<CustomAgent, "id" | "createdAt" | "updatedAt"> {
+    return {
+      name: "",
+      description: "",
+      icon: "🤖",
+      creator,
+      model: DEFAULT_AGENT_MODEL,
+      domain: "general",
+      methodology: "crisp_dm",
+      taskType: "classification",
+      guardrails: { ...DEFAULT_GUARDRAILS },
+      customRules: "",
+      knowledgeFiles: [],
+      exampleWorkflowIds: [],
+      outputPreferences: { ...DEFAULT_OUTPUT_PREFERENCES },
+      preferredOperators: [],
+      isPublic: false,
+    };
+  }
+
+  private readAll(): CustomAgent[] {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return [];
+      const parsed = JSON.parse(raw);
+      if (!Array.isArray(parsed)) return [];
+      return (parsed as CustomAgent[]).map(a => ({
+        ...a,
+        model: a.model ?? DEFAULT_AGENT_MODEL,
+        knowledgeFiles: a.knowledgeFiles ?? [],
+        exampleWorkflowIds: a.exampleWorkflowIds ?? [],
+        outputPreferences: a.outputPreferences ?? { ...DEFAULT_OUTPUT_PREFERENCES },
+      }));
+    } catch {
+      return [];
+    }
+  }
+
+  private persist(agents: CustomAgent[]): void {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(agents));
+    this.agentsSubject.next(agents);
+  }
+
+  private generateId(): string {
+    return `agent-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+  }
+}
diff --git a/frontend/src/app/dashboard/type/custom-agent.interface.ts b/frontend/src/app/dashboard/type/custom-agent.interface.ts
new file mode 100644
index 00000000000..a7e905ec449
--- /dev/null
+++ b/frontend/src/app/dashboard/type/custom-agent.interface.ts
@@ -0,0 +1,141 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * LiteLLM `model_name` values registered in `bin/litellm-config.yaml`. Keep
+ * this union in sync with that file — picking a value not registered there
+ * will cause LiteLLM to return 404 on chat completion.
+ */
+export type AgentModel = "claude-opus-4.7" | "claude-haiku-4.5";
+
+export const DEFAULT_AGENT_MODEL: AgentModel = "claude-haiku-4.5";
+
+export const AGENT_MODEL_OPTIONS: { value: AgentModel; label: string }[] = [
+  { value: "claude-opus-4.7", label: "claude-opus-4.7 (most capable, slower)" },
+  { value: "claude-haiku-4.5", label: "claude-haiku-4.5 (fastest, cheapest)" },
+];
+
+export type AgentDomain = "biomedical" | "nlp" | "finance" | "social_science" | "cv" | "general";
+
+export type AgentMethodology = "crisp_dm" | "semma" | "kdd" | "none";
+
+export type AgentTaskType = "classification" | "regression" | "clustering" | "eda" | "cleaning" | "custom";
+
+export interface AgentGuardrails {
+  requireTrainTestSplit: boolean;
+  requireEvaluation: boolean;
+  preventDataLeakage: boolean;
+  handleMissingValues: boolean;
+  featureScalingCheck: boolean;
+}
+
+export type AgentOutputFormat = "dashboard" | "csv_export" | "report" | "none";
+
+export interface AgentOutputPreferences {
+  includeVisualization: boolean;
+  exportToCsv: boolean;
+  generateSummaryStats: boolean;
+  includeDataProfiling: boolean;
+  defaultFormat: AgentOutputFormat;
+}
+
+export interface KnowledgeFile {
+  id: string;
+  name: string;
+  mimeType: string;
+  size: number;
+  /** Base64-encoded contents (no data: prefix). For hackathon storage; size-capped. */
+  contentBase64: string;
+}
+
+export interface CustomAgent {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  creator: string;
+  /** LiteLLM model_name to use for this agent's LLM calls. */
+  model: AgentModel;
+  domain: AgentDomain;
+  methodology: AgentMethodology;
+  taskType: AgentTaskType;
+  guardrails: AgentGuardrails;
+  customRules: string;
+  /** Reference files (data dictionaries, methodology docs, papers). */
+  knowledgeFiles: KnowledgeFile[];
+  /** wids of user workflows used as templates. */
+  exampleWorkflowIds: number[];
+  outputPreferences: AgentOutputPreferences;
+  preferredOperators: string[];
+  isPublic: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export const DEFAULT_GUARDRAILS: AgentGuardrails = {
+  requireTrainTestSplit: true,
+  requireEvaluation: true,
+  preventDataLeakage: true,
+  handleMissingValues: true,
+  featureScalingCheck: true,
+};
+
+export const AGENT_DOMAIN_OPTIONS: { value: AgentDomain; label: string }[] = [
+  { value: "biomedical", label: "Biomedical" },
+  { value: "nlp", label: "NLP / Text Analysis" },
+  { value: "finance", label: "Finance" },
+  { value: "social_science", label: "Social Science" },
+  { value: "cv", label: "Computer Vision" },
+  { value: "general", label: "General" },
+];
+
+export const AGENT_METHODOLOGY_OPTIONS: { value: AgentMethodology; label: string }[] = [
+  { value: "crisp_dm", label: "CRISP-DM" },
+  { value: "semma", label: "SEMMA" },
+  { value: "kdd", label: "KDD" },
+  { value: "none", label: "None" },
+];
+
+export const AGENT_TASK_TYPE_OPTIONS: { value: AgentTaskType; label: string }[] = [
+  { value: "classification", label: "Classification" },
+  { value: "regression", label: "Regression" },
+  { value: "clustering", label: "Clustering" },
+  { value: "eda", label: "EDA" },
+  { value: "cleaning", label: "Data Cleaning" },
+  { value: "custom", label: "Custom" },
+];
+
+export const AGENT_OUTPUT_FORMAT_OPTIONS: { value: AgentOutputFormat; label: string }[] = [
+  { value: "dashboard", label: "Dashboard" },
+  { value: "csv_export", label: "CSV Export" },
+  { value: "report", label: "Report" },
+  { value: "none", label: "None" },
+];
+
+export const DEFAULT_OUTPUT_PREFERENCES: AgentOutputPreferences = {
+  includeVisualization: false,
+  exportToCsv: false,
+  generateSummaryStats: false,
+  includeDataProfiling: false,
+  defaultFormat: "none",
+};
+
+/** Knowledge file size cap (per file) to keep localStorage usable. */
+export const KNOWLEDGE_FILE_MAX_BYTES = 1_000_000; // 1 MB
+export const KNOWLEDGE_FILE_ACCEPT = ".csv,.pdf,.txt,.md,.json";
diff --git a/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.html b/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.html
index d650a0a146b..6490cd861ab 100644
--- a/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.html
+++ b/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.html
@@ -181,8 +181,42 @@
         </div>
       </div>
 
+      <!-- Attachment chips -->
+      <div class="attachment-chips" *ngIf="attachments.length > 0">
+        <div class="attachment-chip" *ngFor="let att of attachments; let i = index">
+          <i nz-icon nzType="paper-clip"></i>
+          <div class="chip-text">
+            <div class="chip-name">{{ att.name }}</div>
+            <div class="chip-summary">{{ att.summary }}</div>
+          </div>
+          <button nz-button nzType="text" nzSize="small" (click)="removeAttachment(i)">
+            <i nz-icon nzType="close"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- Hidden file input, triggered by the paperclip button below -->
+      <input
+        #fileInput
+        type="file"
+        multiple
+        class="hidden-file-input"
+        [accept]="attachmentAccept"
+        (change)="onAttachmentSelected($event)" />
+
       <!-- Input Area -->
       <div class="input-area">
+        <button
+          nz-button
+          nzType="text"
+          nzSize="default"
+          class="attach-button"
+          [disabled]="!canSendMessage()"
+          (click)="fileInput.click()"
+          nz-tooltip
+          nzTooltipTitle="Attach a file (CSV / TXT / MD / JSON)">
+          <i nz-icon nzType="paper-clip" nzTheme="outline"></i>
+        </button>
         <textarea
           #messageInput
           nz-input
@@ -194,7 +228,7 @@
         <button
           nz-button
           nzType="primary"
-          [disabled]="!currentMessage.trim() || !canSendMessage()"
+          [disabled]="(!currentMessage.trim() && attachments.length === 0) || !canSendMessage()"
           (click)="sendMessage()">
           <i
             nz-icon
diff --git a/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.scss b/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.scss
index 9098f1e243f..1d5297cbe93 100644
--- a/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.scss
+++ b/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.scss
@@ -204,20 +204,99 @@
   }
 }
 
+// Truly hidden file picker — positioned off-screen rather than display:none so
+// it remains focusable/clickable from script. The paperclip button click()s it.
+.hidden-file-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
 .input-area {
   display: flex;
   gap: 8px;
   padding: 8px 12px;
   border-top: 1px solid #f0f0f0;
   background: #ffffff;
-  align-items: center;
+  align-items: flex-end;
 
   textarea {
-    flex: 1;
+    flex: 1 1 auto;
+    min-width: 0;
   }
 
-  button {
-    align-self: flex-end;
+  > button {
+    flex-shrink: 0;
+  }
+
+  .attach-button {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    padding: 0 !important;
+    border-radius: 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(0, 0, 0, 0.55);
+    transition: background 0.15s, color 0.15s;
+
+    &:hover {
+      color: #1890ff;
+    }
+
+    i[nz-icon] {
+      font-size: 18px;
+    }
+  }
+}
+
+.attachment-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px 12px 0;
+  background: #ffffff;
+
+  .attachment-chip {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    background: #fafafa;
+    max-width: 100%;
+
+    i[nz-icon] {
+      color: #1890ff;
+    }
+
+    .chip-text {
+      display: flex;
+      flex-direction: column;
+      max-width: 220px;
+
+      .chip-name {
+        font-size: 12px;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .chip-summary {
+        font-size: 11px;
+        color: rgba(0, 0, 0, 0.45);
+      }
+    }
   }
 }
 
diff --git a/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.ts b/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.ts
index 55b6c6a3f66..4ab9c81b2f9 100644
--- a/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.ts
+++ b/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.ts
@@ -60,6 +60,20 @@ import { NzInputNumberComponent } from "ng-zorro-antd/input-number";
 import { NzTagComponent } from "ng-zorro-antd/tag";
 import { NzSwitchComponent } from "ng-zorro-antd/switch";
 
+/**
+ * In-memory attachment carried into the next outgoing message.
+ * preview holds the inlineable content (CSV sample, full text for small text
+ * files, etc); empty for unsupported types like PDF.
+ */
+export interface ChatAttachment {
+  name: string;
+  size: number;
+  summary: string;
+  preview: string;
+  fence?: string;
+  note?: string;
+}
+
 @UntilDestroy()
 @Component({
   selector: "texera-agent-chat",
@@ -102,6 +116,12 @@ export class AgentChatComponent implements OnInit, AfterViewChecked, OnDestroy,
   /** Steps on the HEAD path only (for chat rendering) */
   public visibleSteps: ReActStep[] = [];
   public currentMessage = "";
+  /** Files attached to the next outgoing message. Cleared on send. */
+  public attachments: ChatAttachment[] = [];
+  /** File types accepted by the attachment input. */
+  public readonly attachmentAccept = ".csv,.txt,.md,.json,.pdf,.tsv";
+  /** Maximum per-file size to read inline. Larger files are noted but their content is omitted. */
+  private readonly MAX_INLINE_BYTES = 200_000;
   private shouldScrollToBottom = false;
   public isDetailsModalVisible = false;
   public selectedResponse: ReActStep | null = null;
@@ -400,17 +420,123 @@ export class AgentChatComponent implements OnInit, AfterViewChecked, OnDestroy,
   }
 
   public sendMessage(): void {
-    if (!this.currentMessage.trim() || !this.canSendMessage()) {
+    const trimmed = this.currentMessage.trim();
+    if ((!trimmed && this.attachments.length === 0) || !this.canSendMessage()) {
       return;
     }
 
-    const userMessage = this.currentMessage.trim();
+    const userMessage = this.composeOutgoingMessage(trimmed);
     this.currentMessage = "";
+    this.attachments = [];
 
     // Fire-and-forget; responses stream in via the WebSocket subscription.
     this.agentService.sendMessage(this.agentInfo.id, userMessage);
   }
 
+  private composeOutgoingMessage(userText: string): string {
+    if (this.attachments.length === 0) return userText;
+    const blocks = this.attachments.map(att => this.renderAttachmentBlock(att));
+    const header =
+      "[Attached files — the user has provided the following file context for this turn]";
+    return [header, ...blocks, userText].filter(Boolean).join("\n\n");
+  }
+
+  private renderAttachmentBlock(att: ChatAttachment): string {
+    const headerLine = `### File: ${att.name} (${att.summary})`;
+    if (!att.preview) {
+      return headerLine + "\n(No previewable content available.)";
+    }
+    const fence = att.fence || "";
+    return `${headerLine}\n\`\`\`${fence}\n${att.preview}\n\`\`\``;
+  }
+
+  public onAttachmentSelected(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    if (!input.files || input.files.length === 0) return;
+    const files = Array.from(input.files);
+    input.value = "";
+    files.forEach(file => this.ingestAttachment(file));
+  }
+
+  public removeAttachment(index: number): void {
+    this.attachments = this.attachments.filter((_, i) => i !== index);
+  }
+
+  private ingestAttachment(file: File): void {
+    const lower = file.name.toLowerCase();
+    if (lower.endsWith(".pdf")) {
+      this.attachments = [
+        ...this.attachments,
+        {
+          name: file.name,
+          size: file.size,
+          summary: this.formatFileSize(file.size),
+          preview: "",
+          fence: "",
+          note: "PDF text extraction is not supported in chat. Describe the contents in your message.",
+        },
+      ];
+      return;
+    }
+    if (file.size > this.MAX_INLINE_BYTES) {
+      this.attachments = [
+        ...this.attachments,
+        {
+          name: file.name,
+          size: file.size,
+          summary: this.formatFileSize(file.size) + " — too large to inline",
+          preview: "",
+          fence: "",
+          note: "File too large to read inline.",
+        },
+      ];
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const text = String(reader.result ?? "");
+      const isCsv = lower.endsWith(".csv") || lower.endsWith(".tsv");
+      if (isCsv) {
+        const { preview, summary } = this.summarizeCsv(text, lower.endsWith(".tsv") ? "\t" : ",");
+        this.attachments = [
+          ...this.attachments,
+          { name: file.name, size: file.size, summary, preview, fence: "csv" },
+        ];
+      } else {
+        const fence = lower.endsWith(".json") ? "json" : "";
+        this.attachments = [
+          ...this.attachments,
+          {
+            name: file.name,
+            size: file.size,
+            summary: this.formatFileSize(file.size),
+            preview: text,
+            fence,
+          },
+        ];
+      }
+    };
+    reader.readAsText(file);
+  }
+
+  private summarizeCsv(content: string, delimiter: string): { preview: string; summary: string } {
+    const lines = content.replace(/\r\n/g, "\n").split("\n").filter(line => line.length > 0);
+    if (lines.length === 0) {
+      return { preview: "", summary: "Empty CSV" };
+    }
+    const header = lines[0];
+    const sampleLines = lines.slice(0, 6); // header + 5 rows
+    const cols = header.split(delimiter).length;
+    const summary = `CSV: ${cols} columns × ${Math.max(0, lines.length - 1)} rows (showing 5)`;
+    return { preview: sampleLines.join("\n"), summary };
+  }
+
+  private formatFileSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+  }
+
   /**
    * Check if messages can be sent (only when agent is available).
    */
diff --git a/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.html b/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.html
index ee77072aa0c..bc5a6fbadab 100644
--- a/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.html
+++ b/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.html
@@ -29,9 +29,7 @@
   nz-tooltip
   nzTooltipPlacement="left"
   nzTooltipTitle="AI Agents">
-  <span
-    nz-icon
-    nzType="robot"></span>
+  <span nz-icon nzType="robot"></span>
 </button>
 
 <div
@@ -49,95 +47,117 @@
   (nzResize)="onResize($event)"
   (cdkDragStarted)="handleDragStart()"
   [cdkDragFreeDragPosition]="dragPosition">
-  <!-- Minimize Button -->
-  <ul
-    id="return-button"
-    nz-menu
-    [ngClass]="{'shadow': !width}"
-    *ngIf="width">
-    <li
-      nz-menu-item
-      (click)="openPanel()">
-      <span
-        nz-icon
-        nzType="minus"></span>
+
+  <ul id="return-button" nz-menu [ngClass]="{'shadow': !width}" *ngIf="width">
+    <li nz-menu-item (click)="openPanel()">
+      <span nz-icon nzType="minus"></span>
     </li>
   </ul>
 
-  <div
-    #content
-    id="content"
-    [hidden]="!width">
-    <h4
-      id="title"
-      cdkDragHandle>
-      AI Agents
-    </h4>
+  <div #content id="content" [hidden]="!width">
+    <h4 id="title" cdkDragHandle>AI Agents</h4>
 
-    <!-- Tabs -->
-    <nz-tabs
-      [nzSelectedIndex]="selectedTabIndex"
-      (nzSelectedIndexChange)="onTabSelectChange($event)"
-      class="agent-tabs"
-      nzType="card">
-      <ng-template nzTabBarExtraContent="end">
-        <div class="tab-bar-extra">
-          <span class="agent-count">{{ agents.length }} agent(s)</span>
-        </div>
-      </ng-template>
+    <!-- VIEW 1: Conversation list (scoped to current workflow) -->
+    <div class="panel-body" *ngIf="viewMode === 'list'">
+      <div class="selector-row">
+        <span class="selector-label">New chats use</span>
+        <nz-select
+          class="selector"
+          [ngModel]="selectedAgentKey"
+          (ngModelChange)="onSelectAgentKey($event)"
+          nzShowSearch
+          nzPlaceHolder="Select an agent">
+          <nz-option [nzValue]="DEFAULT_AGENT_KEY" nzLabel="🤖 Default Agent"></nz-option>
+          <nz-option
+            *ngFor="let a of customAgents"
+            [nzValue]="a.id"
+            [nzLabel]="(a.icon || '🤖') + ' ' + a.name"></nz-option>
+        </nz-select>
+      </div>
+      <div class="selector-description" *ngIf="selectedAgentDescription()">
+        {{ selectedAgentDescription() }}
+      </div>
+
+      <div class="conversation-list">
+        <nz-empty
+          *ngIf="currentWorkflowId === undefined"
+          nzNotFoundContent="Save the workflow first to start a conversation."></nz-empty>
 
-      <!-- Registration Tab -->
-      <nz-tab
-        nzTitle="+ Agent"
-        [nzForceRender]="true">
-        <ng-template nz-tab>
-          <texera-agent-registration (agentCreated)="onAgentCreated($event)"></texera-agent-registration>
-        </ng-template>
-      </nz-tab>
+        <nz-empty
+          *ngIf="currentWorkflowId !== undefined && conversations.length === 0"
+          nzNotFoundContent="No conversations with this agent yet."></nz-empty>
 
-      <!-- Agent Tabs -->
-      <nz-tab
-        *ngFor="let agent of agents; let i = index"
-        [nzTitle]="agentTabTitle"
-        [nzForceRender]="true"
-        [nzDisabled]="!canSwitchToAgent(agent)">
-        <ng-template
-          #agentTabTitle
-          let-active="active">
-          <div
-            class="agent-tab-title"
-            [class.workflow-mismatch]="!canSwitchToAgent(agent)">
-            <span class="agent-tab-name">{{ agent.name }}</span>
-            <i
-              *ngIf="!canSwitchToAgent(agent)"
-              nz-icon
-              nzType="lock"
-              nzTheme="outline"
-              class="workflow-lock-icon"
-              nz-tooltip
-              nzTooltipTitle="This agent is working on a different workflow"></i>
+        <div
+          *ngFor="let c of conversations"
+          class="conversation-item"
+          (click)="openConversation(c)">
+          <div class="conv-head">
+            <span class="conv-agent-badge" nz-tooltip [nzTooltipTitle]="c.agentName">
+              <span class="conv-agent-icon">{{ c.agentIcon || '🤖' }}</span>
+              <span class="conv-agent-name">{{ c.agentName }}</span>
+            </span>
             <button
               nz-button
               nzType="text"
               nzSize="small"
-              class="agent-tab-close"
-              (click)="deleteAgent(agent.id, $event)"
-              nz-tooltip
-              nzTooltipTitle="Close agent">
-              <i
-                nz-icon
-                nzType="close"
-                nzTheme="outline"></i>
+              nzDanger
+              class="conv-delete"
+              nz-popconfirm
+              nzPopconfirmTitle="Delete this conversation?"
+              (nzOnConfirm)="deleteConversation(c)"
+              (click)="$event.stopPropagation()">
+              <span nz-icon nzType="delete"></span>
             </button>
           </div>
-        </ng-template>
-        <ng-template nz-tab>
-          <texera-agent-chat
-            [agentInfo]="agent"
-            [isActive]="activeAgentId === agent.id"></texera-agent-chat>
-        </ng-template>
-      </nz-tab>
-    </nz-tabs>
+          <div class="conv-title">{{ c.title }}</div>
+          <div class="conv-preview">{{ conversationPreview(c) }}</div>
+          <div class="conv-meta">
+            <span class="timestamp">{{ c.updatedAt | date:'short' }}</span>
+            <nz-tag *ngIf="c.workflowGenerated" nzColor="green">Workflow generated</nz-tag>
+          </div>
+        </div>
+      </div>
+
+      <div class="new-conversation-row">
+        <button
+          nz-button
+          nzType="primary"
+          nzBlock
+          [disabled]="isStartingConversation || currentWorkflowId === undefined"
+          (click)="newConversation()">
+          <span nz-icon nzType="plus"></span>
+          New Conversation
+        </button>
+      </div>
+    </div>
+
+    <!-- VIEW 2: Chat -->
+    <div class="panel-body chat-body" *ngIf="viewMode === 'chat'">
+      <div class="chat-header">
+        <button nz-button nzType="text" nzSize="small" (click)="backToList()">
+          <span nz-icon nzType="arrow-left"></span> Back
+        </button>
+        <div class="chat-title">
+          <div class="chat-agent">
+            <span *ngIf="activeConversation">{{ activeConversation.agentIcon }} {{ activeConversation.agentName }}</span>
+          </div>
+          <div class="chat-subtitle" *ngIf="activeConversation">{{ activeConversation.title }}</div>
+        </div>
+      </div>
+
+      <ng-container *ngIf="activeBackendAgent; else startingTpl">
+        <texera-agent-chat
+          [agentInfo]="activeBackendAgent"
+          [isActive]="true"></texera-agent-chat>
+      </ng-container>
+
+      <ng-template #startingTpl>
+        <div class="starting-state">
+          <span nz-icon nzType="loading"></span>
+          <span>Starting conversation...</span>
+        </div>
+      </ng-template>
+    </div>
 
     <nz-resize-handles [nzDirections]="['left', 'bottom', 'bottomLeft']"></nz-resize-handles>
   </div>
diff --git a/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.scss b/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.scss
index 776ec393f0c..6c5c704e5d0 100644
--- a/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.scss
+++ b/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.scss
@@ -45,7 +45,7 @@
 
 #agent-docked-button {
   position: fixed;
-  bottom: 40px; // Position above the mini-map button
+  bottom: 40px;
   right: 10px;
   z-index: 4;
   box-shadow:
@@ -66,8 +66,9 @@
   width: 100%;
   height: 100%;
   padding-top: 32px;
-  display: inline-block;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .shadow {
@@ -85,95 +86,176 @@
   padding: 0 9px;
 }
 
-.agent-tabs {
-  height: calc(100% - 32px); // Account for the title bar
+.panel-body {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-
-  ::ng-deep {
-    .ant-tabs {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .ant-tabs-nav {
-      margin-bottom: 0;
-    }
-
-    .ant-tabs-content-holder {
-      flex: 1;
-      overflow: hidden;
-    }
-
-    .ant-tabs-content {
-      height: 100%;
-    }
-
-    .ant-tabs-tabpane {
-      height: 100%;
-      overflow: hidden;
-      padding: 0;
-    }
-  }
+  flex: 1;
+  min-height: 0;
 }
 
-.agent-tab-title {
+.selector-row {
   display: flex;
   align-items: center;
   gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #f0f0f0;
 
-  .agent-tab-name {
+  .selector-label {
+    color: rgba(0, 0, 0, 0.55);
+    font-size: 13px;
+    flex-shrink: 0;
+  }
+  .selector {
     flex: 1;
   }
+}
 
-  // Visual feedback for agents on different workflows
-  &.workflow-mismatch {
-    opacity: 0.6;
+.selector-description {
+  padding: 6px 12px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.55);
+  background: #fafafa;
+  border-bottom: 1px solid #f0f0f0;
+}
 
-    .agent-tab-name {
-      color: #8c8c8c;
-    }
+.conversation-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 8px 12px;
+}
+
+.conversation-item {
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  background: #fff;
+  transition: border-color 0.15s, box-shadow 0.15s;
+
+  &:hover {
+    border-color: #1890ff;
+    box-shadow: 0 1px 4px rgba(24, 144, 255, 0.15);
   }
 
-  .workflow-lock-icon {
-    color: #faad14;
+  .conv-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 4px;
+  }
+  .conv-agent-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    background: #f0f5ff;
+    border: 1px solid #adc6ff;
+    border-radius: 10px;
+    font-size: 11px;
+    color: #2f54eb;
+    max-width: 70%;
+
+    .conv-agent-icon { font-size: 13px; }
+    .conv-agent-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .conv-title {
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .conv-delete {
+    flex-shrink: 0;
+    opacity: 0.5;
+    &:hover { opacity: 1; }
+  }
+  .conv-preview {
+    color: rgba(0, 0, 0, 0.55);
     font-size: 12px;
-    margin-left: -4px;
+    margin-top: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .conv-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 6px;
+
+    .timestamp {
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 11px;
+    }
   }
 }
 
-.agent-tab-close {
-  padding: 0 !important;
-  width: 20px !important;
-  height: 20px !important;
-  min-width: 20px !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.6;
-  margin-left: 4px;
+.new-conversation-row {
+  padding: 10px 12px;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+}
 
-  &:hover {
-    opacity: 1;
-    color: #ff4d4f !important;
-    background: rgba(255, 77, 79, 0.1) !important;
+.chat-body {
+  position: relative;
+  overflow: hidden;
+
+  texera-agent-chat {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
   }
 
-  i {
-    font-size: 12px;
+  .starting-state {
+    flex: 1;
+    min-height: 0;
   }
 }
 
-.tab-bar-extra {
-  padding-right: 8px;
+.chat-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fff;
+
+  .chat-title {
+    flex: 1;
+    overflow: hidden;
+
+    .chat-agent {
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .chat-subtitle {
+      color: rgba(0, 0, 0, 0.55);
+      font-size: 12px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
 }
 
-.agent-count {
-  font-size: 12px;
-  color: #8c8c8c;
-  padding: 4px 8px;
-  background: #f0f0f0;
-  border-radius: 4px;
+.starting-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  color: rgba(0, 0, 0, 0.55);
 }
diff --git a/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.ts b/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.ts
index cf47b8b3ab7..be6cfa283b9 100644
--- a/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.ts
+++ b/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.ts
@@ -18,25 +18,35 @@
  */
 
 import { Component, HostListener, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { Subscription } from "rxjs";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { NzResizeEvent, NzResizableDirective, NzResizeHandlesComponent } from "ng-zorro-antd/resizable";
 import { AgentService, AgentInfo } from "../../../service/agent/agent.service";
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
 import { NotificationService } from "../../../../common/service/notification/notification.service";
 import { calculateTotalTranslate3d } from "../../../../common/util/panel-dock";
-import { NgIf, NgClass, NgFor } from "@angular/common";
-import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
-import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NgIf, NgClass, NgFor, DatePipe } from "@angular/common";
+import { NzButtonComponent, NzButtonModule } from "ng-zorro-antd/button";
 import { NzWaveDirective } from "ng-zorro-antd/core/wave";
 import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
 import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
-import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzIconDirective, NzIconModule } from "ng-zorro-antd/icon";
 import { CdkDrag, CdkDragHandle } from "@angular/cdk/drag-drop";
 import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu";
-import { NzTabsComponent, NzTabBarExtraContentDirective, NzTabComponent, NzTabDirective } from "ng-zorro-antd/tabs";
-import { AgentRegistrationComponent } from "./agent-registration/agent-registration.component";
+import { NzSelectModule } from "ng-zorro-antd/select";
+import { NzTagModule } from "ng-zorro-antd/tag";
+import { NzEmptyModule } from "ng-zorro-antd/empty";
+import { NzPopconfirmModule } from "ng-zorro-antd/popconfirm";
 import { AgentChatComponent } from "./agent-chat/agent-chat.component";
-import { FormlyRepeatDndComponent } from "../../../../common/formly/repeat-dnd/repeat-dnd.component";
+import { CustomAgentService } from "../../../../dashboard/service/user/custom-agent/custom-agent.service";
+import { CustomAgent } from "../../../../dashboard/type/custom-agent.interface";
+import { Conversation, ConversationService } from "../../../service/agent/conversation.service";
+import { ReActStep } from "../../../service/agent/agent-types";
+
+const DEFAULT_AGENT_KEY = "default";
+const DEFAULT_AGENT_NAME = "Default Agent";
+const DEFAULT_AGENT_ICON = "🤖";
 
 @UntilDestroy()
 @Component({
@@ -45,294 +55,358 @@ import { FormlyRepeatDndComponent } from "../../../../common/formly/repeat-dnd/r
   styleUrls: ["agent-panel.component.scss"],
   imports: [
     NgIf,
-    NzSpaceCompactItemDirective,
+    NgFor,
+    NgClass,
+    DatePipe,
+    FormsModule,
     NzButtonComponent,
+    NzButtonModule,
     NzWaveDirective,
     ɵNzTransitionPatchDirective,
     NzTooltipDirective,
     NzIconDirective,
+    NzIconModule,
     CdkDrag,
+    CdkDragHandle,
     NzResizableDirective,
+    NzResizeHandlesComponent,
     NzMenuDirective,
-    NgClass,
     NzMenuItemComponent,
-    CdkDragHandle,
-    NzTabsComponent,
-    NzTabBarExtraContentDirective,
-    NzTabComponent,
-    NzTabDirective,
-    AgentRegistrationComponent,
-    NgFor,
+    NzSelectModule,
+    NzTagModule,
+    NzEmptyModule,
+    NzPopconfirmModule,
     AgentChatComponent,
-    NzResizeHandlesComponent,
-    FormlyRepeatDndComponent,
   ],
 })
 export class AgentPanelComponent implements OnInit, OnDestroy, OnChanges {
   protected readonly window = window;
+  protected readonly DEFAULT_AGENT_KEY = DEFAULT_AGENT_KEY;
   private static readonly MIN_PANEL_WIDTH = 400;
   private static readonly MIN_PANEL_HEIGHT = 450;
 
-  /**
-   * Optional agent ID to activate when the panel loads.
-   * When provided (from agent dashboard), the panel will open
-   * and switch to this agent's tab automatically.
-   */
+  /** Optional backend agent ID to activate when the panel loads (legacy entry point). */
   @Input() agentIdToActivate?: string;
 
-  // Panel dimensions and position
-  width: number = 0; // Start with 0 to show docked button
+  // Panel dimensions / position
+  width: number = 0;
   height = Math.max(AgentPanelComponent.MIN_PANEL_HEIGHT, window.innerHeight * 0.7);
   id = -1;
   dragPosition = { x: 0, y: 0 };
   returnPosition = { x: 0, y: 0 };
   isDocked = true;
 
-  // Tab management
-  selectedTabIndex: number = 0; // 0 = registration tab, 1+ = agent tabs
-  agents: AgentInfo[] = [];
+  // Two-view state
+  public viewMode: "list" | "chat" = "list";
+
+  /** The agent selected in the dropdown — used as the agent for the NEXT new conversation. */
+  public selectedAgentKey: string = DEFAULT_AGENT_KEY;
 
-  // Active agent tracking - only one agent can be connected at a time
-  activeAgentId: string | null = null;
+  // Data sources
+  public customAgents: CustomAgent[] = [];
+  public conversations: Conversation[] = [];
+  /** Current workflow id; undefined when no workflow is open or workflow is unsaved. */
+  public currentWorkflowId?: number;
+
+  // Active chat state
+  public activeConversation: Conversation | null = null;
+  public activeBackendAgent: AgentInfo | null = null;
+  public isStartingConversation = false;
+
+  // Cached defaults
+  private defaultModelType: string | null = null;
+  private allBackendAgents: AgentInfo[] = [];
+  private persistedStepIds = new Set<string>();
+  private listSubscription?: Subscription;
 
   constructor(
     private agentService: AgentService,
     private workflowActionService: WorkflowActionService,
-    private notificationService: NotificationService
+    private notificationService: NotificationService,
+    private customAgentService: CustomAgentService,
+    private conversationService: ConversationService
   ) {}
 
   ngOnInit(): void {
     this.loadPanelSettings();
 
-    // Subscribe to agent changes
-    this.agentService.agentChange$.pipe(untilDestroyed(this)).subscribe(() => {
-      this.agentService
-        .getAllAgents()
-        .pipe(untilDestroyed(this))
-        .subscribe(agents => {
-          this.agents = agents;
-          // Try to activate the agent if agentIdToActivate is set
-          this.tryActivateAgentFromInput();
-        });
-    });
+    this.customAgentService
+      .list$()
+      .pipe(untilDestroyed(this))
+      .subscribe(agents => (this.customAgents = agents));
+
+    // Seed and track current workflow id; reload conversation list on every change.
+    this.currentWorkflowId = this.workflowActionService.getWorkflowMetadata().wid;
+    this.reloadConversations();
+    this.workflowActionService
+      .workflowMetaDataChanged()
+      .pipe(untilDestroyed(this))
+      .subscribe(meta => {
+        const newWid = meta?.wid;
+        if (newWid === this.currentWorkflowId) return;
+        this.currentWorkflowId = newWid;
+        // Drop any active chat — it belongs to the previous workflow.
+        this.resetActiveChat();
+        this.reloadConversations();
+      });
 
-    // Load initial agents
     this.agentService
-      .getAllAgents()
+      .fetchModelTypes()
       .pipe(untilDestroyed(this))
-      .subscribe(agents => {
-        this.agents = agents;
-        // Try to activate the agent if agentIdToActivate is set
-        this.tryActivateAgentFromInput();
+      .subscribe({
+        next: models => {
+          if (models.length > 0 && !this.defaultModelType) {
+            this.defaultModelType = models[0].id;
+          }
+        },
+        error: () => {
+          // surfaced when user attempts to start a conversation
+        },
       });
+
+    this.agentService.agentChange$.pipe(untilDestroyed(this)).subscribe(() => this.refreshBackendAgents());
+    this.refreshBackendAgents();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes["agentIdToActivate"] && this.agentIdToActivate) {
-      this.tryActivateAgentFromInput();
-    }
-  }
-
-  /**
-   * Try to activate the agent specified by agentIdToActivate input.
-   * Opens the panel and switches to the agent's tab.
-   */
-  private tryActivateAgentFromInput(): void {
-    if (!this.agentIdToActivate || this.agents.length === 0) {
-      return;
-    }
-
-    const agentIndex = this.agents.findIndex(agent => agent.id === this.agentIdToActivate);
-    if (agentIndex === -1) {
-      return;
-    }
-
-    // Open the panel if it's closed
-    if (this.width === 0) {
-      this.width = AgentPanelComponent.MIN_PANEL_WIDTH;
-    }
-
-    // Switch to the agent's tab and activate it
-    const agent = this.agents[agentIndex];
-
-    // Deactivate previous agent if any
-    if (this.activeAgentId) {
-      this.agentService.deactivateAgent(this.activeAgentId);
+      this.activateFromBackendAgentId(this.agentIdToActivate);
+      this.agentIdToActivate = undefined;
     }
-
-    // Activate the specified agent
-    this.activeAgentId = agent.id;
-    this.agentService.activateAgent(agent.id);
-    this.selectedTabIndex = agentIndex + 1; // +1 because tab 0 is registration
-
-    // Clear the input so we don't re-activate on every change
-    this.agentIdToActivate = undefined;
   }
 
   @HostListener("window:beforeunload")
   ngOnDestroy(): void {
-    // Deactivate any active agent before destroying
-    this.deactivateCurrentAgent();
+    this.deactivateCurrentBackendAgent();
     this.savePanelSettings();
   }
 
-  /**
-   * Open the panel from docked state
-   */
+  // ---------- Panel open/close ----------
+
   public openPanel(): void {
     if (this.width === 0) {
-      // Open panel
       this.width = AgentPanelComponent.MIN_PANEL_WIDTH;
     } else {
-      // Close panel (dock it)
       this.width = 0;
       this.isDocked = true;
     }
   }
 
-  /**
-   * Handle agent creation - activates and switches to the new agent
-   */
-  public onAgentCreated(agentId: string): void {
-    // Deactivate previous agent if any
-    if (this.activeAgentId) {
-      this.agentService.deactivateAgent(this.activeAgentId);
-    }
+  // ---------- Selector (controls which agent the next new conversation uses) ----------
 
-    // Set the new agent as active immediately
-    this.activeAgentId = agentId;
-    this.agentService.activateAgent(agentId);
+  public selectedAgentLabel(): string {
+    if (this.selectedAgentKey === DEFAULT_AGENT_KEY) return `${DEFAULT_AGENT_ICON} ${DEFAULT_AGENT_NAME}`;
+    const agent = this.customAgents.find(a => a.id === this.selectedAgentKey);
+    return agent ? `${agent.icon} ${agent.name}` : `${DEFAULT_AGENT_ICON} ${DEFAULT_AGENT_NAME}`;
+  }
 
-    // Fetch the latest agent list and switch to the new agent's tab
-    this.agentService
-      .getAllAgents()
-      .pipe(untilDestroyed(this))
-      .subscribe(agents => {
-        this.agents = agents;
-        const agentIndex = agents.findIndex(agent => agent.id === agentId);
-        if (agentIndex !== -1) {
-          this.selectedTabIndex = agentIndex + 1; // +1 because tab 0 is registration
-        }
-      });
+  public selectedAgentDescription(): string {
+    if (this.selectedAgentKey === DEFAULT_AGENT_KEY) return "Built-in Texera assistant";
+    return this.customAgents.find(a => a.id === this.selectedAgentKey)?.description ?? "";
   }
 
-  /**
-   * Handle tab selection change - validates workflow compatibility before switching
-   */
-  public onTabSelectChange(index: number): void {
-    // Tab 0 is registration - always allow
-    if (index === 0) {
-      this.deactivateCurrentAgent();
-      this.selectedTabIndex = 0;
-      return;
-    }
+  public selectedCustomAgent(): CustomAgent | undefined {
+    return this.customAgents.find(a => a.id === this.selectedAgentKey);
+  }
+
+  public onSelectAgentKey(key: string): void {
+    if (key === this.selectedAgentKey) return;
+    this.selectedAgentKey = key;
+    // Conversations are scoped by (workflowId, agentId), so switching the
+    // selected agent shows a different list and invalidates the active chat.
+    this.resetActiveChat();
+    this.reloadConversations();
+  }
 
-    // Get the agent for this tab (index - 1 because tab 0 is registration)
-    const agentIndex = index - 1;
-    if (agentIndex < 0 || agentIndex >= this.agents.length) {
+  private resetActiveChat(): void {
+    this.viewMode = "list";
+    this.activeConversation = null;
+    this.deactivateCurrentBackendAgent();
+  }
+
+  // ---------- Conversation list (view 1) ----------
+
+  private reloadConversations(): void {
+    this.listSubscription?.unsubscribe();
+    if (this.currentWorkflowId === undefined) {
+      this.conversations = [];
       return;
     }
+    this.listSubscription = this.conversationService
+      .list$(this.currentWorkflowId, this.selectedAgentKey)
+      .pipe(untilDestroyed(this))
+      .subscribe(list => (this.conversations = list));
+  }
 
-    const agent = this.agents[agentIndex];
-    const agentWorkflowId = agent.delegate?.workflowId;
-    const currentWorkflowId = this.workflowActionService.getWorkflowMetadata().wid;
-
-    // If agent has a workflow ID, check if it matches the current workflow
-    if (agentWorkflowId !== undefined && agentWorkflowId !== 0) {
-      if (currentWorkflowId !== agentWorkflowId) {
-        // Block switching - workflow mismatch
-        this.notificationService.warning(
-          `Cannot switch to agent "${agent.name}": It's working on a different workflow. ` +
-            `Open workflow #${agentWorkflowId} to interact with this agent.`
-        );
-        return;
-      }
+  public openConversation(conversation: Conversation): void {
+    // Keep the selector in sync with whatever agent owns this conversation,
+    // so the visible list matches the open chat.
+    if (conversation.agentId !== this.selectedAgentKey) {
+      this.selectedAgentKey = conversation.agentId;
+      this.reloadConversations();
     }
-
-    // Workflow matches or agent has no workflow - allow switch
-    this.switchToAgent(agent.id, index);
+    this.activeConversation = conversation;
+    this.viewMode = "chat";
+    this.persistedStepIds.clear();
+    this.attachBackendAgent(conversation);
   }
 
-  /**
-   * Switch to a specific agent tab
-   */
-  private switchToAgent(agentId: string, tabIndex: number): void {
-    // Skip if already on this agent and tab
-    if (this.activeAgentId === agentId && this.selectedTabIndex === tabIndex) {
+  public newConversation(): void {
+    if (this.isStartingConversation) return;
+    if (this.currentWorkflowId === undefined) {
+      this.notificationService.warning("Save the workflow first to start a conversation.");
+      return;
+    }
+    if (!this.defaultModelType) {
+      this.notificationService.error("No LLM models available. Check LiteLLM is running.");
       return;
     }
+    this.isStartingConversation = true;
+    const customAgent = this.selectedCustomAgent();
+    const conversation = this.conversationService.create({
+      workflowId: this.currentWorkflowId,
+      agentId: this.selectedAgentKey,
+      agentName: customAgent ? customAgent.name : DEFAULT_AGENT_NAME,
+      agentIcon: customAgent ? customAgent.icon || DEFAULT_AGENT_ICON : DEFAULT_AGENT_ICON,
+    });
+    this.activeConversation = conversation;
+    this.viewMode = "chat";
+    this.persistedStepIds.clear();
+    this.createBackendAgentForConversation(conversation, customAgent);
+  }
 
-    // Deactivate previous agent only if switching to a different agent
-    if (this.activeAgentId !== agentId) {
-      this.deactivateCurrentAgent();
+  public deleteConversation(conversation: Conversation): void {
+    this.conversationService.delete(conversation.workflowId, conversation.agentId, conversation.id);
+    if (this.activeConversation?.id === conversation.id) {
+      this.activeConversation = null;
+      this.deactivateCurrentBackendAgent();
+      this.viewMode = "list";
     }
+  }
 
-    // Activate new agent
-    this.activeAgentId = agentId;
-    this.agentService.activateAgent(agentId);
-    this.selectedTabIndex = tabIndex;
+  public conversationPreview(c: Conversation): string {
+    if (c.messages.length === 0) return "No messages yet";
+    return c.messages[0].content;
   }
 
-  /**
-   * Deactivate the currently active agent
-   */
-  private deactivateCurrentAgent(): void {
-    if (this.activeAgentId) {
-      this.agentService.deactivateAgent(this.activeAgentId);
-      this.activeAgentId = null;
-    }
+  // ---------- Chat view (view 2) ----------
+
+  public backToList(): void {
+    this.viewMode = "list";
   }
 
-  /**
-   * Check if an agent's workflow matches the current workspace workflow
-   */
-  public canSwitchToAgent(agent: AgentInfo): boolean {
-    const agentWorkflowId = agent.delegate?.workflowId;
-    if (agentWorkflowId === undefined || agentWorkflowId === 0) {
-      return true; // Agent has no workflow - always allow
-    }
-    const currentWorkflowId = this.workflowActionService.getWorkflowMetadata().wid;
-    return currentWorkflowId === agentWorkflowId;
+  private refreshBackendAgents(): void {
+    this.agentService
+      .getAllAgents()
+      .pipe(untilDestroyed(this))
+      .subscribe(agents => (this.allBackendAgents = agents));
   }
 
-  /**
-   * Delete an agent
-   */
-  public deleteAgent(agentId: string, event: Event): void {
-    event.stopPropagation(); // Prevent tab switch
+  private attachBackendAgent(conversation: Conversation): void {
+    const existing = conversation.lastBackendAgentId
+      ? this.allBackendAgents.find(a => a.id === conversation.lastBackendAgentId)
+      : undefined;
+    if (existing) {
+      this.deactivateCurrentBackendAgent();
+      this.activeBackendAgent = existing;
+      this.agentService.activateAgent(existing.id);
+      this.subscribeToStepsForPersistence(existing.id, conversation);
+    } else {
+      const customAgent = this.customAgentService.list().find(a => a.id === conversation.agentId);
+      this.createBackendAgentForConversation(conversation, customAgent);
+    }
+  }
 
-    if (confirm("Are you sure you want to delete this agent?")) {
-      const agentIndex = this.agents.findIndex(agent => agent.id === agentId);
+  private createBackendAgentForConversation(conversation: Conversation, customAgent: CustomAgent | undefined): void {
+    // Custom agents carry their own model; the built-in default agent falls
+    // back to whatever LiteLLM offered first via /models.
+    const modelType = customAgent?.model ?? this.defaultModelType;
+    if (!modelType) {
+      this.isStartingConversation = false;
+      return;
+    }
+    if (conversation.workflowId !== this.currentWorkflowId) {
+      // Sanity check: never attach a backend agent to a conversation that
+      // belongs to a different workflow than the one currently open.
+      this.isStartingConversation = false;
+      return;
+    }
+    const customAgentName = customAgent ? `${customAgent.icon} ${customAgent.name}` : undefined;
 
-      // Deactivate if this is the active agent
-      if (this.activeAgentId === agentId) {
-        this.deactivateCurrentAgent();
-      }
+    this.deactivateCurrentBackendAgent();
+    this.agentService
+      .createAgent(modelType, customAgentName, conversation.workflowId, customAgent)
+      .pipe(untilDestroyed(this))
+      .subscribe({
+        next: agentInfo => {
+          this.activeBackendAgent = agentInfo;
+          this.agentService.activateAgent(agentInfo.id);
+          this.conversationService.setBackendAgentId(
+            conversation.workflowId,
+            conversation.agentId,
+            conversation.id,
+            agentInfo.id
+          );
+          this.activeConversation = { ...conversation, lastBackendAgentId: agentInfo.id };
+          this.subscribeToStepsForPersistence(agentInfo.id, conversation);
+          this.isStartingConversation = false;
+          this.refreshBackendAgents();
+        },
+        error: () => {
+          this.isStartingConversation = false;
+          this.viewMode = "list";
+          this.activeConversation = null;
+        },
+      });
+  }
 
-      // Must subscribe to the observable for it to execute
-      this.agentService
-        .deleteAgent(agentId)
-        .pipe(untilDestroyed(this))
-        .subscribe({
-          next: () => {
-            // If we're on the deleted agent's tab, switch to registration
-            if (agentIndex !== -1 && this.selectedTabIndex === agentIndex + 1) {
-              this.selectedTabIndex = 0;
-            } else if (this.selectedTabIndex > agentIndex + 1) {
-              // Adjust selected index if we deleted a tab before the current one
-              this.selectedTabIndex--;
-            }
-          },
-          error: (error: unknown) => {
-            console.error("Failed to delete agent:", error);
-          },
-        });
+  private deactivateCurrentBackendAgent(): void {
+    if (this.activeBackendAgent) {
+      this.agentService.deactivateAgent(this.activeBackendAgent.id);
+      this.activeBackendAgent = null;
     }
   }
 
   /**
-   * Handle panel resize
+   * Subscribe to ReAct steps for the active backend agent and persist them to
+   * the active conversation. Each step is persisted at most once.
    */
+  private subscribeToStepsForPersistence(backendAgentId: string, conversation: Conversation): void {
+    this.agentService
+      .getReActStepsObservable(backendAgentId)
+      .pipe(untilDestroyed(this))
+      .subscribe((steps: ReActStep[]) => {
+        for (const step of steps) {
+          if (this.persistedStepIds.has(step.id)) continue;
+          if (!step.content) continue;
+          const role = step.role === "user" ? "user" : "agent";
+          const generatedWorkflow = Boolean(step.toolCalls && step.toolCalls.length > 0);
+          this.conversationService.appendMessage(
+            conversation.workflowId,
+            conversation.agentId,
+            conversation.id,
+            role,
+            step.content,
+            generatedWorkflow
+          );
+          this.persistedStepIds.add(step.id);
+        }
+      });
+  }
+
+  private activateFromBackendAgentId(backendAgentId: string): void {
+    if (this.width === 0) {
+      this.width = AgentPanelComponent.MIN_PANEL_WIDTH;
+    }
+    if (this.currentWorkflowId === undefined) return;
+    const found = this.conversationService.findByBackendAgentId(this.currentWorkflowId, backendAgentId);
+    if (found) {
+      this.openConversation(found);
+    }
+  }
+
+  // ---------- Panel layout (resize/drag/persist) ----------
+
   onResize({ width, height }: NzResizeEvent): void {
     cancelAnimationFrame(this.id);
     this.id = requestAnimationFrame(() => {
@@ -341,23 +415,16 @@ export class AgentPanelComponent implements OnInit, OnDestroy, OnChanges {
     });
   }
 
-  /**
-   * Handle drag start
-   */
   handleDragStart(): void {
     this.isDocked = false;
   }
 
-  /**
-   * Load panel settings from localStorage
-   */
   private loadPanelSettings(): void {
     const savedWidth = localStorage.getItem("agent-panel-width");
     const savedHeight = localStorage.getItem("agent-panel-height");
     const savedStyle = localStorage.getItem("agent-panel-style");
     const savedDocked = localStorage.getItem("agent-panel-docked");
 
-    // Only restore width if the panel was not docked
     if (savedDocked === "false" && savedWidth) {
       const parsedWidth = Number(savedWidth);
       if (!isNaN(parsedWidth) && parsedWidth >= AgentPanelComponent.MIN_PANEL_WIDTH) {
@@ -384,9 +451,6 @@ export class AgentPanelComponent implements OnInit, OnDestroy, OnChanges {
     }
   }
 
-  /**
-   * Save panel settings to localStorage
-   */
   private savePanelSettings(): void {
     localStorage.setItem("agent-panel-width", String(this.width));
     localStorage.setItem("agent-panel-height", String(this.height));
diff --git a/frontend/src/app/workspace/component/left-panel/left-panel.component.ts b/frontend/src/app/workspace/component/left-panel/left-panel.component.ts
index ab5e32684b6..14d17ac5262 100644
--- a/frontend/src/app/workspace/component/left-panel/left-panel.component.ts
+++ b/frontend/src/app/workspace/component/left-panel/left-panel.component.ts
@@ -25,6 +25,7 @@ import { OperatorMenuComponent } from "./operator-menu/operator-menu.component";
 import { VersionsListComponent } from "./versions-list/versions-list.component";
 import { WorkflowExecutionHistoryComponent } from "../../../dashboard/component/user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component";
 import { TimeTravelComponent } from "./time-travel/time-travel.component";
+import { TimeMachineComponent } from "./time-machine/time-machine.component";
 import { SettingsComponent } from "./settings/settings.component";
 import { calculateTotalTranslate3d } from "../../../common/util/panel-dock";
 import { PanelService } from "../../service/panel/panel.service";
@@ -97,6 +98,12 @@ export class LeftPanelComponent implements OnDestroy, OnInit, AfterViewInit {
       icon: "clock-circle",
       enabled: false,
     },
+    {
+      component: TimeMachineComponent,
+      title: "Time Machine",
+      icon: "history",
+      enabled: true,
+    },
   ];
 
   order = Array.from({ length: this.items.length - 1 }, (_, index) => index + 1);
diff --git a/frontend/src/app/workspace/component/left-panel/time-machine/time-machine.component.html b/frontend/src/app/workspace/component/left-panel/time-machine/time-machine.component.html
new file mode 100644
index 00000000000..0c862a6805c
--- /dev/null
+++ b/frontend/src/app/workspace/component/left-panel/time-machine/time-machine.component.html
@@ -0,0 +1,137 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+
+<div class="time-machine-panel">
+  <div class="tm-header">
+    <span class="tm-title">Time Machine</span>
+    <div class="tm-header-actions">
+      <button
+        nz-button
+        nzSize="small"
+        nzType="primary"
+        (click)="saveSnapshot()"
+        title="Save a checkpoint of the current workflow">Save Snapshot</button>
+      <button
+        nz-button
+        nzSize="small"
+        nzType="text"
+        (click)="refresh()"
+        title="Reload history">⟳</button>
+    </div>
+  </div>
+
+  <div
+    class="tm-error"
+    *ngIf="error">{{ error }}</div>
+
+  <div
+    *ngIf="compareSids.length > 0"
+    class="tm-compare-bar">
+    <span>
+      <ng-container *ngIf="compareSids.length === 1">Pick one more snapshot's <b>Compare</b> button.</ng-container>
+      <ng-container *ngIf="compareSids.length === 2 && !diffResult">Computing diff…</ng-container>
+      <ng-container *ngIf="compareSids.length === 2 && diffResult">Compared v{{diffResult.v1}} ↔ v{{diffResult.v2}}.</ng-container>
+    </span>
+    <button
+      nz-button
+      nzSize="small"
+      nzType="text"
+      (click)="clearCompare()">clear</button>
+  </div>
+
+  <div
+    *ngIf="diffResult"
+    class="tm-diff">
+    <div class="tm-diff-title">Diff v{{diffResult.v1}} → v{{diffResult.v2}}</div>
+    <div class="tm-diff-line tm-add">
+      <span class="tm-diff-label">+ Added:</span>
+      {{ formatOperatorList(diffResult.operatorsAdded) }}
+    </div>
+    <div class="tm-diff-line tm-remove">
+      <span class="tm-diff-label">− Removed:</span>
+      {{ formatOperatorList(diffResult.operatorsRemoved) }}
+    </div>
+    <div class="tm-diff-line tm-modify">
+      <span class="tm-diff-label">~ Modified:</span>
+      {{ formatOperatorList(diffResult.operatorsModified) }}
+    </div>
+    <div
+      *ngIf="diffResult.linksAdded > 0"
+      class="tm-diff-line tm-add">
+      <span class="tm-diff-label">+ Links:</span>
+      {{ diffResult.linksAdded }} new connection{{ diffResult.linksAdded === 1 ? '' : 's' }}
+    </div>
+    <div
+      *ngIf="diffResult.linksRemoved > 0"
+      class="tm-diff-line tm-remove">
+      <span class="tm-diff-label">− Links:</span>
+      {{ diffResult.linksRemoved }} removed connection{{ diffResult.linksRemoved === 1 ? '' : 's' }}
+    </div>
+  </div>
+
+  <div
+    class="tm-timeline"
+    *ngIf="snapshots.length > 0; else emptyState">
+    <div
+      class="tm-entry"
+      *ngFor="let s of snapshots"
+      [ngClass]="{ 'tm-selected': selectedSid === s.sid, 'tm-in-compare': isInCompare(s) }"
+      (click)="selectSnapshot(s)">
+      <div class="tm-entry-dot"></div>
+      <div class="tm-entry-body">
+        <div class="tm-entry-time">{{ s.creationTime | date:'MM/dd HH:mm:ss' }}</div>
+        <div class="tm-entry-summary">{{ s.changeSummary }}</div>
+        <div class="tm-entry-meta">
+          <span
+            class="tm-badge"
+            [ngClass]="{ 'tm-badge-agent': s.source === 'agent', 'tm-badge-user': s.source === 'user' }">
+            {{ sourceLabel(s) }}
+          </span>
+          <span class="tm-badge tm-badge-scope">{{ scopeBadge(s) }}</span>
+          <span
+            *ngIf="compareOrdinal(s) !== null"
+            class="tm-badge tm-badge-compare">#{{ compareOrdinal(s) }}</span>
+          <span class="tm-version">v{{ s.version }}</span>
+        </div>
+        <div class="tm-entry-actions">
+          <button
+            nz-button
+            nzSize="small"
+            nzType="default"
+            (click)="toggleCompare(s, $event)">
+            {{ isInCompare(s) ? 'Uncompare' : 'Compare' }}
+          </button>
+          <button
+            *ngIf="selectedSid === s.sid"
+            nz-button
+            nzSize="small"
+            nzDanger
+            (click)="revertTo(s); $event.stopPropagation()">Revert</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <ng-template #emptyState>
+    <nz-empty
+      *ngIf="!loading"
+      [nzNotFoundContent]="error ? error : 'No snapshots yet. Edit the workflow to start capturing history.'">
+    </nz-empty>
+  </ng-template>
+</div>
diff --git a/frontend/src/app/workspace/component/left-panel/time-machine/time-machine.component.scss b/frontend/src/app/workspace/component/left-panel/time-machine/time-machine.component.scss
new file mode 100644
index 00000000000..84a61038f1f
--- /dev/null
+++ b/frontend/src/app/workspace/component/left-panel/time-machine/time-machine.component.scss
@@ -0,0 +1,200 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.time-machine-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-size: 12px;
+  padding: 4px 6px;
+}
+
+.tm-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px 4px 6px;
+  border-bottom: 1px solid #eee;
+
+  .tm-title {
+    font-weight: 600;
+    font-size: 13px;
+  }
+  .tm-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+}
+
+.tm-error {
+  color: #c33;
+  background: #fff1f0;
+  padding: 4px 6px;
+  border-radius: 3px;
+  margin: 4px 0;
+  font-size: 11px;
+}
+
+.tm-compare-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fffbe6;
+  padding: 2px 6px;
+  border-radius: 3px;
+  margin: 4px 0;
+  font-size: 11px;
+}
+
+.tm-diff {
+  background: #f6f8fa;
+  border: 1px solid #d0d7de;
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin: 4px 0 8px;
+  font-size: 11px;
+
+  .tm-diff-title {
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+  .tm-diff-line {
+    word-break: break-word;
+    line-height: 1.5;
+  }
+  .tm-diff-label {
+    font-weight: 600;
+    font-family: ui-monospace, Menlo, monospace;
+    margin-right: 4px;
+  }
+  .tm-add { color: #1a7f37; }
+  .tm-remove { color: #cf222e; }
+  .tm-modify { color: #9a6700; }
+}
+
+.tm-timeline {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.tm-entry {
+  display: flex;
+  gap: 8px;
+  padding: 6px 4px;
+  position: relative;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.1s ease-in-out;
+
+  &:hover {
+    background: #f0f7ff;
+  }
+  &.tm-selected {
+    background: #e6f4ff;
+  }
+  &.tm-in-compare {
+    outline: 1px dashed #faad14;
+  }
+
+  // vertical line between dots
+  &:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    left: 9px;
+    top: 18px;
+    bottom: -6px;
+    width: 2px;
+    background: #d9d9d9;
+  }
+}
+
+.tm-entry-dot {
+  flex: 0 0 auto;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #1677ff;
+  margin-top: 6px;
+  z-index: 1;
+}
+
+.tm-entry-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.tm-entry-time {
+  font-size: 10px;
+  color: #888;
+}
+
+.tm-entry-summary {
+  font-size: 12px;
+  margin-top: 1px;
+  word-break: break-word;
+}
+
+.tm-entry-meta {
+  margin-top: 3px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+
+.tm-badge {
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 8px;
+  background: #f0f0f0;
+  color: #333;
+  line-height: 1.4;
+
+  &.tm-badge-agent {
+    background: #f9f0ff;
+    color: #722ed1;
+  }
+  &.tm-badge-user {
+    background: #e6fffb;
+    color: #08979c;
+  }
+  &.tm-badge-scope {
+    background: #fff7e6;
+    color: #ad6800;
+  }
+  &.tm-badge-compare {
+    background: #fff1b8;
+    color: #874d00;
+    font-weight: 600;
+  }
+}
+
+.tm-version {
+  font-size: 10px;
+  color: #888;
+  margin-left: auto;
+}
+
+.tm-entry-actions {
+  margin-top: 6px;
+  display: flex;
+  gap: 4px;
+}
diff --git a/frontend/src/app/workspace/component/left-panel/time-machine/time-machine.component.ts b/frontend/src/app/workspace/component/left-panel/time-machine/time-machine.component.ts
new file mode 100644
index 00000000000..f591740b27a
--- /dev/null
+++ b/frontend/src/app/workspace/component/left-panel/time-machine/time-machine.component.ts
@@ -0,0 +1,266 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { CommonModule, DatePipe, NgClass, NgFor, NgIf } from "@angular/common";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import { NzButtonModule } from "ng-zorro-antd/button";
+import { NzTagModule } from "ng-zorro-antd/tag";
+import { NzEmptyModule } from "ng-zorro-antd/empty";
+import { NzTooltipModule } from "ng-zorro-antd/tooltip";
+import {
+  TimeMachineDiff,
+  TimeMachineOperatorDiffEntry,
+  TimeMachineService,
+  TimeMachineSnapshotEntry,
+} from "../../../service/time-machine/time-machine.service";
+import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
+import { UndoRedoService } from "../../../service/undo-redo/undo-redo.service";
+import { OperatorMetadataService } from "../../../service/operator-metadata/operator-metadata.service";
+import { Workflow, WorkflowContent } from "../../../../common/type/workflow";
+
+@UntilDestroy()
+@Component({
+  selector: "texera-time-machine",
+  templateUrl: "time-machine.component.html",
+  styleUrls: ["time-machine.component.scss"],
+  imports: [
+    CommonModule,
+    NgIf,
+    NgFor,
+    NgClass,
+    DatePipe,
+    NzButtonModule,
+    NzTagModule,
+    NzEmptyModule,
+    NzTooltipModule,
+  ],
+})
+export class TimeMachineComponent implements OnInit, OnDestroy {
+  public snapshots: TimeMachineSnapshotEntry[] = [];
+  public selectedSid: number | null = null;
+  public previewSummary: string | null = null;
+  public compareSids: number[] = [];
+  public diffResult: TimeMachineDiff | null = null;
+  public loading = false;
+  public error: string | null = null;
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private timeMachineService: TimeMachineService,
+    private workflowActionService: WorkflowActionService,
+    private undoRedoService: UndoRedoService,
+    private operatorMetadataService: OperatorMetadataService
+  ) {}
+
+  /**
+   * Map an operator diff entry to a human-readable label. The backend already
+   * resolves `displayName` to customDisplayName || operatorType || operatorID,
+   * so it's always non-empty. We still try the schema's userFriendlyName when
+   * we only have an operatorType so the label reads nicely (e.g. "CSV File
+   * Scan" instead of "CSVFileScan").
+   */
+  public operatorLabel(entry: TimeMachineOperatorDiffEntry): string {
+    const custom = entry.customDisplayName?.trim();
+    if (custom) return custom;
+    if (entry.operatorType) {
+      try {
+        const schema = this.operatorMetadataService.getOperatorSchema(entry.operatorType);
+        const friendly = schema?.additionalMetadata?.userFriendlyName;
+        if (friendly) return friendly;
+      } catch {
+        // schema not loaded yet or unknown type — fall through to displayName
+      }
+    }
+    return entry.displayName || entry.operatorID;
+  }
+
+  /** Comma-joined friendly labels for a diff section. */
+  public formatOperatorList(entries: TimeMachineOperatorDiffEntry[]): string {
+    if (!entries || entries.length === 0) return "(none)";
+    return entries.map(e => this.operatorLabel(e)).join(", ");
+  }
+
+  ngOnInit(): void {
+    this.refresh();
+    // refresh whenever a snapshot is captured
+    this.timeMachineService
+      .onSnapshotsChanged()
+      .pipe(takeUntil(this.destroy$), untilDestroyed(this))
+      .subscribe(() => this.refresh());
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  public get currentWid(): number {
+    return this.workflowActionService.getWorkflowMetadata()?.wid ?? 0;
+  }
+
+  public refresh(): void {
+    const wid = this.currentWid;
+    if (!wid) {
+      this.snapshots = [];
+      this.error = "Save the workflow first to start capturing snapshots.";
+      return;
+    }
+    this.loading = true;
+    this.error = null;
+    this.timeMachineService
+      .listSnapshots(wid)
+      .pipe(untilDestroyed(this))
+      .subscribe({
+        next: list => {
+          this.snapshots = list ?? [];
+          this.loading = false;
+        },
+        error: err => {
+          this.loading = false;
+          this.error = err?.message || "Failed to load history";
+        },
+      });
+  }
+
+  public sourceLabel(entry: TimeMachineSnapshotEntry): string {
+    return entry.source === "agent" ? "🤖 agent" : "👤 user";
+  }
+
+  public scopeBadge(entry: TimeMachineSnapshotEntry): string {
+    const n = entry.changedOperators?.length ?? 0;
+    switch (entry.changeType) {
+      case "operator_added":
+        return `+${n} operator${n === 1 ? "" : "s"}`;
+      case "operator_removed":
+        return `-${n} operator${n === 1 ? "" : "s"}`;
+      case "link_added":
+        return "+1 link";
+      case "link_removed":
+        return "-1 link";
+      case "config_changed":
+        return n > 0 ? `~${n} config` : "config";
+      case "revert":
+        return "revert";
+      case "agent_generated":
+        return n > 0 ? `~${n} ops` : "agent";
+      case "manual_save":
+        return "checkpoint";
+      case "auto_save":
+        return "auto-save";
+      case "run":
+        return "run";
+      default:
+        return entry.changeType;
+    }
+  }
+
+  public saveSnapshot(): void {
+    if (!this.currentWid) {
+      this.error = "Save the workflow first to capture a snapshot.";
+      return;
+    }
+    this.timeMachineService.manualSnapshot("Manual snapshot");
+  }
+
+  public selectSnapshot(entry: TimeMachineSnapshotEntry): void {
+    this.selectedSid = entry.sid;
+    this.previewSummary = `v${entry.version} — ${entry.changeSummary}`;
+  }
+
+  public toggleCompare(entry: TimeMachineSnapshotEntry, event: MouseEvent): void {
+    event.stopPropagation();
+    const idx = this.compareSids.indexOf(entry.sid);
+    if (idx >= 0) {
+      this.compareSids.splice(idx, 1);
+    } else {
+      this.compareSids.push(entry.sid);
+      if (this.compareSids.length > 2) this.compareSids.shift();
+    }
+    this.diffResult = null;
+    if (this.compareSids.length === 2) {
+      const [a, b] = this.compareSids;
+      this.timeMachineService
+        .diff(this.currentWid, a, b)
+        .pipe(untilDestroyed(this))
+        .subscribe({
+          next: d => (this.diffResult = d),
+          error: err => (this.error = err?.message || "Failed to compute diff"),
+        });
+    }
+  }
+
+  public isInCompare(entry: TimeMachineSnapshotEntry): boolean {
+    return this.compareSids.includes(entry.sid);
+  }
+
+  /** 1 or 2 for the order this snapshot was added to the compare queue; null if not queued. */
+  public compareOrdinal(entry: TimeMachineSnapshotEntry): number | null {
+    const idx = this.compareSids.indexOf(entry.sid);
+    return idx >= 0 ? idx + 1 : null;
+  }
+
+  public clearCompare(): void {
+    this.compareSids = [];
+    this.diffResult = null;
+  }
+
+  /**
+   * Revert: backend writes the snapshot's content back into the workflow row,
+   * then we reload the canvas with that content. Capture is paused during the
+   * reload so we don't snapshot the cascade of "delete all + re-add" events.
+   */
+  public revertTo(entry: TimeMachineSnapshotEntry): void {
+    if (!confirm(`Revert workflow to version ${entry.version}? Current state will become a new snapshot.`)) {
+      return;
+    }
+    const wid = this.currentWid;
+    if (!wid) return;
+    this.timeMachineService.setCaptureEnabled(false);
+    this.timeMachineService
+      .revertToSnapshot(wid, entry.sid)
+      .pipe(untilDestroyed(this))
+      .subscribe({
+        next: full => {
+          try {
+            const content = JSON.parse(full.content) as WorkflowContent;
+            const metadata = this.workflowActionService.getWorkflowMetadata();
+            const workflow: Workflow = { ...metadata, content };
+            this.workflowActionService.reloadWorkflow(workflow);
+            this.undoRedoService.clearUndoStack();
+            this.undoRedoService.clearRedoStack();
+          } catch (e) {
+            console.error("Failed to apply reverted workflow", e);
+            this.error = "Revert saved but failed to apply on canvas. Reload the page.";
+          } finally {
+            // small delay before re-enabling so the reload's cascade of mutation
+            // events flushes without producing extra snapshots
+            setTimeout(() => this.timeMachineService.setCaptureEnabled(true), 1500);
+            this.refresh();
+          }
+        },
+        error: err => {
+          this.timeMachineService.setCaptureEnabled(true);
+          this.error = err?.message || "Revert failed";
+        },
+      });
+  }
+}
diff --git a/frontend/src/app/workspace/service/agent/agent.service.ts b/frontend/src/app/workspace/service/agent/agent.service.ts
index 2009734030b..f59f95a3c38 100644
--- a/frontend/src/app/workspace/service/agent/agent.service.ts
+++ b/frontend/src/app/workspace/service/agent/agent.service.ts
@@ -689,8 +689,15 @@ export class AgentService {
    * @param modelType - The LLM model type to use
    * @param customName - Optional custom name for the agent
    * @param workflowId - Optional workflow ID for delegate mode
+   * @param customAgent - Optional Texera custom-agent config to specialize the system prompt.
+   *                     Forwarded verbatim to agent-service; ignored if not present.
    */
-  public createAgent(modelType: string, customName?: string, workflowId?: number): Observable<AgentInfo> {
+  public createAgent(
+    modelType: string,
+    customName?: string,
+    workflowId?: number,
+    customAgent?: unknown
+  ): Observable<AgentInfo> {
     return defer(() => {
       const userToken = AuthService.getAccessToken();
 
@@ -699,6 +706,10 @@ export class AgentService {
         name: customName,
       };
 
+      if (customAgent) {
+        body.customAgent = customAgent;
+      }
+
       // Include user token and workflowId for delegate mode if available
       if (userToken) {
         body.userToken = userToken;
diff --git a/frontend/src/app/workspace/service/agent/conversation.service.ts b/frontend/src/app/workspace/service/agent/conversation.service.ts
new file mode 100644
index 00000000000..ab9dd182664
--- /dev/null
+++ b/frontend/src/app/workspace/service/agent/conversation.service.ts
@@ -0,0 +1,200 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Injectable } from "@angular/core";
+import { BehaviorSubject, Observable } from "rxjs";
+
+export type ConversationRole = "user" | "agent";
+
+export interface ConversationMessage {
+  role: ConversationRole;
+  content: string;
+  timestamp: number;
+}
+
+/**
+ * A conversation is scoped to a (workflowId, agentId) pair. Each agent has its
+ * own independent history within a workflow; switching agent or workflow
+ * yields a different list. The agent identity is also denormalized onto the
+ * entry so historic rows survive custom-agent deletion.
+ */
+export interface Conversation {
+  id: string;
+  workflowId: number;
+  /** "default" or custom-agent id used to create this conversation. */
+  agentId: string;
+  agentName: string;
+  agentIcon: string;
+  title: string;
+  messages: ConversationMessage[];
+  /** Backend agent runtime id last used for this conversation. */
+  lastBackendAgentId?: string;
+  /** True if any message contained workflow-generation tool calls. */
+  workflowGenerated: boolean;
+  createdAt: number;
+  updatedAt: number;
+}
+
+const KEY_PREFIX = "texera.workflowConversations.v1.";
+
+function storageKey(workflowId: number, agentId: string): string {
+  return `${KEY_PREFIX}${workflowId}.${agentId}`;
+}
+
+function cacheKey(workflowId: number, agentId: string): string {
+  return `${workflowId}|${agentId}`;
+}
+
+export interface NewConversationInput {
+  workflowId: number;
+  agentId: string;
+  agentName: string;
+  agentIcon: string;
+}
+
+@Injectable({ providedIn: "root" })
+export class ConversationService {
+  private cache = new Map<string, BehaviorSubject<Conversation[]>>();
+
+  public list$(workflowId: number, agentId: string): Observable<Conversation[]> {
+    return this.subject(workflowId, agentId).asObservable();
+  }
+
+  public list(workflowId: number, agentId: string): Conversation[] {
+    return this.subject(workflowId, agentId).value;
+  }
+
+  public get(workflowId: number, agentId: string, conversationId: string): Conversation | undefined {
+    return this.subject(workflowId, agentId).value.find(c => c.id === conversationId);
+  }
+
+  public create(input: NewConversationInput): Conversation {
+    const now = Date.now();
+    const conversation: Conversation = {
+      id: `conv-${now.toString(36)}-${Math.random().toString(36).slice(2, 8)}`,
+      workflowId: input.workflowId,
+      agentId: input.agentId,
+      agentName: input.agentName,
+      agentIcon: input.agentIcon,
+      title: "New conversation",
+      messages: [],
+      workflowGenerated: false,
+      createdAt: now,
+      updatedAt: now,
+    };
+    const next = [conversation, ...this.subject(input.workflowId, input.agentId).value];
+    this.persist(input.workflowId, input.agentId, next);
+    return conversation;
+  }
+
+  public appendMessage(
+    workflowId: number,
+    agentId: string,
+    conversationId: string,
+    role: ConversationRole,
+    content: string,
+    workflowGenerated: boolean = false
+  ): Conversation | undefined {
+    const all = this.subject(workflowId, agentId).value;
+    const idx = all.findIndex(c => c.id === conversationId);
+    if (idx === -1) return undefined;
+    const target = all[idx];
+    const isFirstUserMessage = role === "user" && target.messages.length === 0;
+    const updated: Conversation = {
+      ...target,
+      title: isFirstUserMessage ? this.deriveTitle(content) : target.title,
+      messages: [...target.messages, { role, content, timestamp: Date.now() }],
+      workflowGenerated: target.workflowGenerated || workflowGenerated,
+      updatedAt: Date.now(),
+    };
+    const next = [...all];
+    next[idx] = updated;
+    next.sort((a, b) => b.updatedAt - a.updatedAt);
+    this.persist(workflowId, agentId, next);
+    return updated;
+  }
+
+  public setBackendAgentId(
+    workflowId: number,
+    agentId: string,
+    conversationId: string,
+    backendAgentId: string
+  ): void {
+    const all = this.subject(workflowId, agentId).value;
+    const idx = all.findIndex(c => c.id === conversationId);
+    if (idx === -1) return;
+    const next = [...all];
+    next[idx] = { ...all[idx], lastBackendAgentId: backendAgentId, updatedAt: Date.now() };
+    this.persist(workflowId, agentId, next);
+  }
+
+  public delete(workflowId: number, agentId: string, conversationId: string): void {
+    const next = this.subject(workflowId, agentId).value.filter(c => c.id !== conversationId);
+    this.persist(workflowId, agentId, next);
+  }
+
+  /**
+   * Look up a conversation across every agent bucket for the given workflow,
+   * matching on its last bound backend agent runtime id. Used when an external
+   * entry point (e.g. dashboard activation link) hands us a backend agent id
+   * and we don't know which agent bucket the conversation lives in.
+   */
+  public findByBackendAgentId(workflowId: number, backendAgentId: string): Conversation | undefined {
+    const prefix = `${KEY_PREFIX}${workflowId}.`;
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (!key || !key.startsWith(prefix)) continue;
+      const agentId = key.slice(prefix.length);
+      const found = this.subject(workflowId, agentId).value.find(c => c.lastBackendAgentId === backendAgentId);
+      if (found) return found;
+    }
+    return undefined;
+  }
+
+  private deriveTitle(firstMessage: string): string {
+    const trimmed = firstMessage.trim().replace(/\s+/g, " ");
+    if (trimmed.length <= 60) return trimmed || "New conversation";
+    return trimmed.slice(0, 57) + "...";
+  }
+
+  private subject(workflowId: number, agentId: string): BehaviorSubject<Conversation[]> {
+    const ck = cacheKey(workflowId, agentId);
+    if (!this.cache.has(ck)) {
+      this.cache.set(ck, new BehaviorSubject<Conversation[]>(this.read(workflowId, agentId)));
+    }
+    return this.cache.get(ck)!;
+  }
+
+  private read(workflowId: number, agentId: string): Conversation[] {
+    try {
+      const raw = localStorage.getItem(storageKey(workflowId, agentId));
+      if (!raw) return [];
+      const parsed = JSON.parse(raw);
+      if (!Array.isArray(parsed)) return [];
+      return (parsed as Conversation[]).sort((a, b) => b.updatedAt - a.updatedAt);
+    } catch {
+      return [];
+    }
+  }
+
+  private persist(workflowId: number, agentId: string, conversations: Conversation[]): void {
+    localStorage.setItem(storageKey(workflowId, agentId), JSON.stringify(conversations));
+    this.subject(workflowId, agentId).next(conversations);
+  }
+}
diff --git a/frontend/src/app/workspace/service/time-machine/time-machine.service.ts b/frontend/src/app/workspace/service/time-machine/time-machine.service.ts
new file mode 100644
index 00000000000..92acdcdda4d
--- /dev/null
+++ b/frontend/src/app/workspace/service/time-machine/time-machine.service.ts
@@ -0,0 +1,251 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Injectable, OnDestroy } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { BehaviorSubject, Observable, Subject, Subscription, interval, of } from "rxjs";
+import { catchError } from "rxjs/operators";
+import { WorkflowActionService } from "../workflow-graph/model/workflow-action.service";
+import { ExecuteWorkflowService } from "../execute-workflow/execute-workflow.service";
+import { ExecutionState } from "../../types/execute-workflow.interface";
+import { AppSettings } from "../../../common/app-setting";
+
+export type SnapshotChangeType =
+  | "operator_added"
+  | "operator_removed"
+  | "operator_modified"
+  | "link_added"
+  | "link_removed"
+  | "config_changed"
+  | "agent_generated"
+  | "manual_save"
+  | "auto_save"
+  | "run"
+  | "revert";
+
+export type SnapshotSource = "user" | "agent";
+
+export interface TimeMachineSnapshotEntry {
+  sid: number;
+  wid: number;
+  version: number;
+  changeType: SnapshotChangeType;
+  changeSummary: string;
+  changedOperators: string[];
+  source: SnapshotSource;
+  uid?: number | null;
+  creationTime: string;
+}
+
+export interface TimeMachineSnapshotFull extends TimeMachineSnapshotEntry {
+  content: string;
+}
+
+export interface TimeMachineOperatorDiffEntry {
+  operatorID: string;
+  operatorType: string;
+  customDisplayName: string;
+  // Server-side pre-resolved label: customDisplayName || operatorType || operatorID.
+  // Always non-empty.
+  displayName: string;
+}
+
+export interface TimeMachineDiff {
+  v1: number;
+  v2: number;
+  operatorsAdded: TimeMachineOperatorDiffEntry[];
+  operatorsRemoved: TimeMachineOperatorDiffEntry[];
+  operatorsModified: TimeMachineOperatorDiffEntry[];
+  linksAdded: number;
+  linksRemoved: number;
+}
+
+interface CreateSnapshotPayload {
+  content: string;
+  changeType: SnapshotChangeType;
+  changeSummary: string;
+  changedOperators: string[];
+  source: SnapshotSource;
+}
+
+const TIME_MACHINE_BASE = "time-machine";
+const AUTO_SNAPSHOT_INTERVAL_MS = 5 * 60 * 1000; // 5 minutes
+
+/**
+ * TimeMachineService captures workflow snapshots at important moments only —
+ * not on every keystroke or canvas tweak. Triggers:
+ *
+ *   - **Auto every 5 min**: if any change has happened since the last snapshot.
+ *   - **Run**: when the user starts an execution.
+ *   - **Agent**: when an agent-driven change is explicitly flagged
+ *     (frontend integrations call `snapshotAgentChange()`, or the agent calls
+ *     the `workflow_history` tool with `action: "snapshot"`).
+ *   - **Manual**: user clicks "Save Snapshot" in the panel.
+ *
+ * Discrete graph events (add/remove operator, link, property change) still
+ * subscribe — but only to **mark the workflow dirty**, so the 5-min timer
+ * knows there's something worth saving. They no longer POST snapshots.
+ */
+@Injectable({ providedIn: "root" })
+export class TimeMachineService implements OnDestroy {
+  private readonly captureEnabledSubject = new BehaviorSubject<boolean>(true);
+  private readonly snapshotsRefreshSubject = new Subject<void>();
+  private sourceOverride: SnapshotSource | null = null;
+  private dirty = false;
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    private http: HttpClient,
+    private workflowActionService: WorkflowActionService,
+    private executeWorkflowService: ExecuteWorkflowService
+  ) {
+    this.attachDirtyTracking();
+    this.attachAutoSnapshotTimer();
+    this.attachExecutionHook();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(s => s.unsubscribe());
+    this.subscriptions = [];
+  }
+
+  /** Pause capture (e.g. while reverting). */
+  public setCaptureEnabled(enabled: boolean): void {
+    this.captureEnabledSubject.next(enabled);
+  }
+
+  /**
+   * Mark the next captured snapshot as agent-sourced. Resets after one use.
+   * Frontend integrations that proxy agent edits should call this just before
+   * the edit, then trigger a save (manual or by letting the auto-timer fire).
+   */
+  public flagNextChangeAsAgent(): void {
+    this.sourceOverride = "agent";
+  }
+
+  public onSnapshotsChanged(): Observable<void> {
+    return this.snapshotsRefreshSubject.asObservable();
+  }
+
+  public listSnapshots(wid: number): Observable<TimeMachineSnapshotEntry[]> {
+    return this.http.get<TimeMachineSnapshotEntry[]>(
+      `${AppSettings.getApiEndpoint()}/${TIME_MACHINE_BASE}/${wid}/snapshots`
+    );
+  }
+
+  public getSnapshot(wid: number, sid: number): Observable<TimeMachineSnapshotFull> {
+    return this.http.get<TimeMachineSnapshotFull>(
+      `${AppSettings.getApiEndpoint()}/${TIME_MACHINE_BASE}/${wid}/snapshots/${sid}`
+    );
+  }
+
+  public revertToSnapshot(wid: number, sid: number): Observable<TimeMachineSnapshotFull> {
+    return this.http.post<TimeMachineSnapshotFull>(
+      `${AppSettings.getApiEndpoint()}/${TIME_MACHINE_BASE}/${wid}/snapshots/${sid}/revert`,
+      {}
+    );
+  }
+
+  public diff(wid: number, v1: number, v2: number): Observable<TimeMachineDiff> {
+    return this.http.get<TimeMachineDiff>(
+      `${AppSettings.getApiEndpoint()}/${TIME_MACHINE_BASE}/${wid}/diff?v1=${v1}&v2=${v2}`
+    );
+  }
+
+  /** Manual user-triggered checkpoint. Wired to the panel's "Save Snapshot" button. */
+  public manualSnapshot(summary: string = "Manual snapshot"): void {
+    this.capture("manual_save", summary, []);
+  }
+
+  /** Explicit agent-driven snapshot. */
+  public snapshotAgentChange(summary: string, changedOperators: string[] = []): void {
+    this.sourceOverride = "agent";
+    this.capture("agent_generated", summary, changedOperators);
+  }
+
+  private attachDirtyTracking(): void {
+    const graph = this.workflowActionService.getTexeraGraph();
+    // We listen to the same events as before, but only to mark dirty. No HTTP.
+    const dirtyStreams: Observable<unknown>[] = [
+      graph.getOperatorAddStream(),
+      graph.getOperatorDeleteStream(),
+      graph.getLinkAddStream(),
+      graph.getLinkDeleteStream(),
+      graph.getOperatorPropertyChangeStream(),
+    ];
+    dirtyStreams.forEach(stream => {
+      this.subscriptions.push(stream.subscribe(() => (this.dirty = true)));
+    });
+  }
+
+  private attachAutoSnapshotTimer(): void {
+    this.subscriptions.push(
+      interval(AUTO_SNAPSHOT_INTERVAL_MS).subscribe(() => {
+        if (!this.captureEnabledSubject.value) return;
+        if (!this.dirty) return;
+        this.capture("auto_save", "Auto-saved checkpoint", []);
+      })
+    );
+  }
+
+  private attachExecutionHook(): void {
+    this.subscriptions.push(
+      this.executeWorkflowService.getExecutionStateStream().subscribe(({ previous, current }) => {
+        // Snapshot on the transition INTO Initializing — i.e. the moment the
+        // user clicks Run. Only the leading edge, not every subsequent emission.
+        if (current.state === ExecutionState.Initializing && previous.state !== ExecutionState.Initializing) {
+          this.capture("run", "Workflow run started", []);
+        }
+      })
+    );
+  }
+
+  private capture(changeType: SnapshotChangeType, summary: string, changedOperators: string[]): void {
+    if (!this.captureEnabledSubject.value) return;
+    const wid = this.workflowActionService.getWorkflowMetadata()?.wid;
+    if (!wid) return;
+    const content = JSON.stringify(this.workflowActionService.getWorkflowContent());
+    const source = this.sourceOverride ?? "user";
+    this.sourceOverride = null;
+    const payload: CreateSnapshotPayload = {
+      content,
+      changeType,
+      changeSummary: summary,
+      changedOperators,
+      source,
+    };
+    this.http
+      .post<TimeMachineSnapshotEntry>(
+        `${AppSettings.getApiEndpoint()}/${TIME_MACHINE_BASE}/${wid}/snapshots`,
+        payload
+      )
+      .pipe(
+        catchError(err => {
+          console.warn("[TimeMachine] snapshot save failed", err);
+          return of(null);
+        })
+      )
+      .subscribe(saved => {
+        if (saved) {
+          this.dirty = false;
+          this.snapshotsRefreshSubject.next();
+        }
+      });
+  }
+}
diff --git a/sql/texera_ddl.sql b/sql/texera_ddl.sql
index d6b488e582d..218a74f832d 100644
--- a/sql/texera_ddl.sql
+++ b/sql/texera_ddl.sql
@@ -55,6 +55,7 @@ DROP TABLE IF EXISTS "user" CASCADE;
 DROP TABLE IF EXISTS user_last_active_time CASCADE;
 DROP TABLE IF EXISTS workflow CASCADE;
 DROP TABLE IF EXISTS workflow_version CASCADE;
+DROP TABLE IF EXISTS workflow_snapshot CASCADE;
 DROP TABLE IF EXISTS project CASCADE;
 DROP TABLE IF EXISTS workflow_of_project CASCADE;
 DROP TABLE IF EXISTS workflow_executions CASCADE;
@@ -163,6 +164,27 @@ CREATE TABLE IF NOT EXISTS workflow_version
     FOREIGN KEY (wid) REFERENCES workflow(wid) ON DELETE CASCADE
     );
 
+-- workflow_snapshot (Time Machine: full-snapshot history with rich metadata)
+-- This table is parallel to workflow_version (which stores JSON diffs).
+-- Each row is a full content snapshot tagged with the discrete event that produced it.
+CREATE TABLE IF NOT EXISTS workflow_snapshot
+(
+    sid                 SERIAL PRIMARY KEY,
+    wid                 INT  NOT NULL,
+    uid                 INT,
+    snapshot_version    INT  NOT NULL,
+    content             TEXT NOT NULL,
+    change_type         VARCHAR(64)  NOT NULL,
+    change_summary      TEXT NOT NULL,
+    changed_operators   TEXT NOT NULL DEFAULT '[]',
+    source              VARCHAR(16)  NOT NULL DEFAULT 'user',
+    creation_time       TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (wid) REFERENCES workflow(wid) ON DELETE CASCADE,
+    UNIQUE (wid, snapshot_version)
+    );
+CREATE INDEX IF NOT EXISTS idx_workflow_snapshot_wid_time
+    ON workflow_snapshot(wid, creation_time DESC);
+
 -- project
 CREATE TABLE IF NOT EXISTS project
 (
diff --git a/sql/updates/23.sql b/sql/updates/23.sql
new file mode 100644
index 00000000000..13077bbeb7a
--- /dev/null
+++ b/sql/updates/23.sql
@@ -0,0 +1,48 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+\c texera_db
+
+SET search_path TO texera_db;
+
+BEGIN;
+
+-- Time Machine: full-snapshot workflow history (parallel to workflow_version
+-- which stores JSON diffs). Each row is a complete content snapshot tagged
+-- with the discrete event that produced it.
+CREATE TABLE IF NOT EXISTS workflow_snapshot
+(
+    sid                 SERIAL PRIMARY KEY,
+    wid                 INT  NOT NULL,
+    uid                 INT,
+    snapshot_version    INT  NOT NULL,
+    content             TEXT NOT NULL,
+    change_type         VARCHAR(64)  NOT NULL,
+    change_summary      TEXT NOT NULL,
+    changed_operators   TEXT NOT NULL DEFAULT '[]',
+    source              VARCHAR(16)  NOT NULL DEFAULT 'user',
+    creation_time       TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (wid) REFERENCES workflow(wid) ON DELETE CASCADE,
+    UNIQUE (wid, snapshot_version)
+);
+
+CREATE INDEX IF NOT EXISTS idx_workflow_snapshot_wid_time
+    ON workflow_snapshot(wid, creation_time DESC);
+
+COMMIT;

From 56e001dacf309deca5e324d829ab2dfc8132ee17 Mon Sep 17 00:00:00 2001
From: Emily Sun <emilysun@Emilys-MacBook-Pro.local>
Date: Sat, 16 May 2026 11:21:25 -0700
Subject: [PATCH 2/2] =?UTF-8?q?feat(frontend):=20Custom=20Operator=20Build?=
 =?UTF-8?q?er=20=E2=80=94=20save=20reusable=20Python=20operators?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a "My Operators" section under Your Work where users can author
Python operators by writing UDF code, configuring ports/properties,
and saving them as draggable items in the workflow editor. Each saved
operator wraps a PythonUDFV2 node pre-filled with the saved code and
ports — no engine or operator-registry changes required.

- Data model + localStorage CRUD (custom-operator.{interface,service})
- "My Operators" list page + full-page editor with Monaco code editor,
  port/property builder, and a Test Run that validates UDF shape
- Operator panel surfaces a "My Operators" collapse at the top of the
  workflow editor; dragging a custom operator builds a PythonUDFV2
  predicate via CustomOperatorFactoryService and reuses the existing
  DragDropService flow via a new dragStartedCustom() entry point
- Custom properties get rendered as a PROPS dict prepended to the saved
  code so user UDFs can read self-configured values without extending
  the Python UDF schema

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/app/app-routing.constant.ts      |   3 +
 frontend/src/app/app-routing.module.ts        |  14 +
 .../component/dashboard.component.html        |  11 +
 .../component/dashboard.component.ts          |   2 +
 .../user-operator-editor.component.html       | 292 ++++++++++++++++++
 .../user-operator-editor.component.scss       | 224 ++++++++++++++
 .../user-operator-editor.component.ts         | 292 ++++++++++++++++++
 .../user-operator.component.html              |  74 +++++
 .../user-operator.component.scss              |  72 +++++
 .../user-operator/user-operator.component.ts  |  76 +++++
 .../custom-operator-factory.service.ts        | 118 +++++++
 .../custom-operator.service.ts                | 123 ++++++++
 .../type/custom-operator.interface.ts         |  85 +++++
 .../custom-operator-label.component.html      |  19 ++
 .../custom-operator-label.component.scss      |  42 +++
 .../custom-operator-label.component.ts        |  65 ++++
 .../operator-menu.component.html              |  20 ++
 .../operator-menu.component.scss              |   5 +
 .../operator-menu/operator-menu.component.ts  |  31 +-
 .../service/drag-drop/drag-drop.service.ts    |  17 +
 20 files changed, 1584 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/dashboard/component/user/user-operator/user-operator-editor.component.html
 create mode 100644 frontend/src/app/dashboard/component/user/user-operator/user-operator-editor.component.scss
 create mode 100644 frontend/src/app/dashboard/component/user/user-operator/user-operator-editor.component.ts
 create mode 100644 frontend/src/app/dashboard/component/user/user-operator/user-operator.component.html
 create mode 100644 frontend/src/app/dashboard/component/user/user-operator/user-operator.component.scss
 create mode 100644 frontend/src/app/dashboard/component/user/user-operator/user-operator.component.ts
 create mode 100644 frontend/src/app/dashboard/service/user/custom-operator/custom-operator-factory.service.ts
 create mode 100644 frontend/src/app/dashboard/service/user/custom-operator/custom-operator.service.ts
 create mode 100644 frontend/src/app/dashboard/type/custom-operator.interface.ts
 create mode 100644 frontend/src/app/workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.html
 create mode 100644 frontend/src/app/workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.scss
 create mode 100644 frontend/src/app/workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.ts

diff --git a/frontend/src/app/app-routing.constant.ts b/frontend/src/app/app-routing.constant.ts
index aaaee0192ac..a4d1df3fbb5 100644
--- a/frontend/src/app/app-routing.constant.ts
+++ b/frontend/src/app/app-routing.constant.ts
@@ -39,6 +39,9 @@ export const DASHBOARD_USER_COMPUTING_UNIT = `${DASHBOARD_USER}/compute`;
 export const DASHBOARD_USER_QUOTA = `${DASHBOARD_USER}/quota`;
 export const DASHBOARD_USER_AGENT = `${DASHBOARD_USER}/agent`;
 export const DASHBOARD_USER_DISCUSSION = `${DASHBOARD_USER}/discussion`;
+export const DASHBOARD_USER_OPERATOR = `${DASHBOARD_USER}/operators`;
+export const DASHBOARD_USER_OPERATOR_CREATE = `${DASHBOARD_USER_OPERATOR}/new`;
+export const DASHBOARD_USER_OPERATOR_EDIT = `${DASHBOARD_USER_OPERATOR}/edit`;
 
 export const DASHBOARD_ADMIN = `${DASHBOARD}/admin`;
 export const DASHBOARD_ADMIN_USER = `${DASHBOARD_ADMIN}/user`;
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 00379f64f4d..04f3ba5a8c2 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -37,6 +37,8 @@ import { AdminGmailComponent } from "./dashboard/component/admin/gmail/admin-gma
 import { DatasetDetailComponent } from "./dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component";
 import { UserDatasetComponent } from "./dashboard/component/user/user-dataset/user-dataset.component";
 import { UserAgentComponent } from "./dashboard/component/user/user-agent/user-agent.component";
+import { UserOperatorComponent } from "./dashboard/component/user/user-operator/user-operator.component";
+import { UserOperatorEditorComponent } from "./dashboard/component/user/user-operator/user-operator-editor.component";
 import { HubWorkflowDetailComponent } from "./hub/component/workflow/detail/hub-workflow-detail.component";
 import { LandingPageComponent } from "./hub/component/landing-page/landing-page.component";
 import { DASHBOARD_ABOUT, DASHBOARD_USER_WORKFLOW } from "./app-routing.constant";
@@ -144,6 +146,18 @@ routes.push({
           path: "agent",
           component: UserAgentComponent,
         },
+        {
+          path: "operators",
+          component: UserOperatorComponent,
+        },
+        {
+          path: "operators/new",
+          component: UserOperatorEditorComponent,
+        },
+        {
+          path: "operators/edit/:id",
+          component: UserOperatorEditorComponent,
+        },
         {
           path: "discussion",
           component: FlarumComponent,
diff --git a/frontend/src/app/dashboard/component/dashboard.component.html b/frontend/src/app/dashboard/component/dashboard.component.html
index 5cb1148c0f0..1a0d2febe50 100644
--- a/frontend/src/app/dashboard/component/dashboard.component.html
+++ b/frontend/src/app/dashboard/component/dashboard.component.html
@@ -108,6 +108,17 @@
               nzType="robot"></span>
             <span>Agents</span>
           </li>
+          <li
+            nz-menu-item
+            nz-tooltip="Reusable Python operators you've created"
+            nzMatchRouter="true"
+            nzTooltipPlacement="right"
+            [routerLink]="DASHBOARD_USER_OPERATOR">
+            <span
+              nz-icon
+              nzType="appstore-add"></span>
+            <span>My Operators</span>
+          </li>
           <li
             *ngIf="sidebarTabs.compute_enabled"
             nz-menu-item
diff --git a/frontend/src/app/dashboard/component/dashboard.component.ts b/frontend/src/app/dashboard/component/dashboard.component.ts
index a70c7e10dab..87c405c846c 100644
--- a/frontend/src/app/dashboard/component/dashboard.component.ts
+++ b/frontend/src/app/dashboard/component/dashboard.component.ts
@@ -41,6 +41,7 @@ import {
   DASHBOARD_USER_QUOTA,
   DASHBOARD_USER_WORKFLOW,
   DASHBOARD_USER_AGENT,
+  DASHBOARD_USER_OPERATOR,
 } from "../../app-routing.constant";
 import { Version } from "../../../environments/version";
 import { SidebarTabs } from "../../common/type/gui-config";
@@ -113,6 +114,7 @@ export class DashboardComponent implements OnInit {
   protected readonly DASHBOARD_USER_QUOTA = DASHBOARD_USER_QUOTA;
   protected readonly DASHBOARD_USER_DISCUSSION = DASHBOARD_USER_DISCUSSION;
   protected readonly DASHBOARD_USER_AGENT = DASHBOARD_USER_AGENT;
+  protected readonly DASHBOARD_USER_OPERATOR = DASHBOARD_USER_OPERATOR;
   protected readonly DASHBOARD_ADMIN_USER = DASHBOARD_ADMIN_USER;
   protected readonly DASHBOARD_ADMIN_GMAIL = DASHBOARD_ADMIN_GMAIL;
   protected readonly DASHBOARD_ADMIN_EXECUTION = DASHBOARD_ADMIN_EXECUTION;
diff --git a/frontend/src/app/dashboard/component/user/user-operator/user-operator-editor.component.html b/frontend/src/app/dashboard/component/user/user-operator/user-operator-editor.component.html
new file mode 100644
index 00000000000..c738872dd1f
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-operator/user-operator-editor.component.html
@@ -0,0 +1,292 @@
+<div class="operator-editor">
+  <div class="editor-toolbar">
+    <div class="left">
+      <button
+        nz-button
+        nzType="default"
+        (click)="cancel()">
+        <span
+          nz-icon
+          nzType="arrow-left"></span>
+        Back
+      </button>
+      <h2>{{ editing ? 'Edit Operator' : 'Create Operator' }}</h2>
+    </div>
+    <div class="right">
+      <button
+        *ngIf="editing"
+        nz-button
+        nzDanger
+        nz-popconfirm
+        nzPopconfirmTitle="Delete this operator? This cannot be undone."
+        (nzOnConfirm)="confirmDelete()">
+        <span
+          nz-icon
+          nzType="delete"></span>
+        Delete
+      </button>
+      <button
+        nz-button
+        (click)="cancel()">
+        Cancel
+      </button>
+      <button
+        nz-button
+        nzType="primary"
+        (click)="save()">
+        <span
+          nz-icon
+          nzType="save"></span>
+        Save
+      </button>
+    </div>
+  </div>
+
+  <div class="editor-body">
+    <div class="config-pane">
+      <h3>Basics</h3>
+      <div class="field">
+        <label>Name *</label>
+        <input
+          nz-input
+          [(ngModel)]="draft.name"
+          placeholder="BMI Calculator" />
+      </div>
+      <div class="field">
+        <label>Description</label>
+        <textarea
+          nz-input
+          rows="2"
+          [(ngModel)]="draft.description"
+          placeholder="What does this operator do?"></textarea>
+      </div>
+      <div class="field-row">
+        <div class="field">
+          <label>Icon</label>
+          <div class="emoji-picker">
+            <button
+              *ngFor="let e of emojiChoices"
+              type="button"
+              class="emoji-btn"
+              [class.selected]="draft.icon === e"
+              (click)="draft.icon = e">
+              {{ e }}
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="field">
+        <label>Category</label>
+        <nz-select
+          [(ngModel)]="draft.category"
+          nzAllowClear="false"
+          nzShowSearch
+          nzAllowCreate="true"
+          [nzPlaceHolder]="defaultCategory">
+          <nz-option
+            *ngFor="let c of knownCategories"
+            [nzValue]="c"
+            [nzLabel]="c"></nz-option>
+        </nz-select>
+      </div>
+      <div class="field">
+        <label
+          nz-checkbox
+          [(ngModel)]="draft.isPublic"
+          >Make public (community operators)</label
+        >
+      </div>
+
+      <nz-divider></nz-divider>
+
+      <div class="section-head">
+        <h3>Input ports</h3>
+        <button
+          nz-button
+          nzSize="small"
+          (click)="addInputPort()">
+          <span
+            nz-icon
+            nzType="plus"></span>
+          Add
+        </button>
+      </div>
+      <div
+        *ngFor="let port of draft.inputPorts; let i = index"
+        class="port-row">
+        <input
+          nz-input
+          [(ngModel)]="port.name"
+          placeholder="port name" />
+        <input
+          nz-input
+          [(ngModel)]="port.type"
+          placeholder="type (e.g. table)" />
+        <button
+          nz-button
+          nzSize="small"
+          nzDanger
+          (click)="removeInputPort(i)">
+          <span
+            nz-icon
+            nzType="close"></span>
+        </button>
+      </div>
+      <div
+        class="muted"
+        *ngIf="draft.inputPorts.length === 0">
+        No input ports (source operator).
+      </div>
+
+      <div class="section-head">
+        <h3>Output ports</h3>
+        <button
+          nz-button
+          nzSize="small"
+          (click)="addOutputPort()">
+          <span
+            nz-icon
+            nzType="plus"></span>
+          Add
+        </button>
+      </div>
+      <div
+        *ngFor="let port of draft.outputPorts; let i = index"
+        class="port-row">
+        <input
+          nz-input
+          [(ngModel)]="port.name"
+          placeholder="port name" />
+        <input
+          nz-input
+          [(ngModel)]="port.type"
+          placeholder="type (e.g. table)" />
+        <button
+          nz-button
+          nzSize="small"
+          nzDanger
+          (click)="removeOutputPort(i)">
+          <span
+            nz-icon
+            nzType="close"></span>
+        </button>
+      </div>
+      <div
+        class="muted"
+        *ngIf="draft.outputPorts.length === 0">
+        No output ports (sink operator).
+      </div>
+
+      <nz-divider></nz-divider>
+
+      <div class="section-head">
+        <h3>Configurable properties</h3>
+        <button
+          nz-button
+          nzSize="small"
+          (click)="addProperty()">
+          <span
+            nz-icon
+            nzType="plus"></span>
+          Add
+        </button>
+      </div>
+      <p class="muted small">Accessible inside your code via <code>self.args['property_name']</code>.</p>
+      <div
+        *ngFor="let prop of draft.properties; let i = index"
+        class="property-card">
+        <div class="property-grid">
+          <input
+            nz-input
+            [(ngModel)]="prop.name"
+            placeholder="property name" />
+          <nz-select
+            [ngModel]="prop.type"
+            (ngModelChange)="onPropertyTypeChange(prop, $event)"
+            class="prop-type">
+            <nz-option
+              *ngFor="let opt of propertyTypeOptions"
+              [nzValue]="opt.value"
+              [nzLabel]="opt.label"></nz-option>
+          </nz-select>
+          <button
+            nz-button
+            nzSize="small"
+            nzDanger
+            (click)="removeProperty(i)">
+            <span
+              nz-icon
+              nzType="close"></span>
+          </button>
+        </div>
+        <input
+          *ngIf="prop.type === 'string'"
+          nz-input
+          [ngModel]="prop.default"
+          (ngModelChange)="prop.default = $event"
+          placeholder="default value" />
+        <nz-input-number
+          *ngIf="prop.type === 'number'"
+          [ngModel]="prop.default"
+          (ngModelChange)="prop.default = $event"
+          [nzPlaceHolder]="'default value'"></nz-input-number>
+        <label
+          *ngIf="prop.type === 'boolean'"
+          nz-checkbox
+          [(ngModel)]="prop.default">
+          Default true
+        </label>
+        <ng-container *ngIf="prop.type === 'select'">
+          <input
+            nz-input
+            [ngModel]="propertyOptionsAsString(prop)"
+            (ngModelChange)="setPropertyOptions(prop, $event)"
+            placeholder="comma-separated options, e.g. small, medium, large" />
+          <nz-select
+            [ngModel]="prop.default"
+            (ngModelChange)="prop.default = $event"
+            nzPlaceHolder="default option">
+            <nz-option
+              *ngFor="let opt of prop.options"
+              [nzValue]="opt"
+              [nzLabel]="opt"></nz-option>
+          </nz-select>
+        </ng-container>
+        <input
+          nz-input
+          [(ngModel)]="prop.description"
+          placeholder="description (shown as tooltip)" />
+      </div>
+    </div>
+
+    <div class="code-pane">
+      <div class="code-header">
+        <h3>
+          Python code
+          <span class="lang-badge">UDF · python</span>
+        </h3>
+        <div class="code-actions">
+          <button
+            nz-button
+            nzSize="small"
+            (click)="testRun()">
+            <span
+              nz-icon
+              nzType="experiment"></span>
+            Test Run
+          </button>
+        </div>
+      </div>
+      <div
+        #editor
+        class="monaco-host"></div>
+      <div
+        *ngIf="testStatus !== 'idle' && testOutput"
+        class="test-output"
+        [class.ok]="testStatus === 'ok'"
+        [class.err]="testStatus === 'error'">
+        <pre>{{ testOutput }}</pre>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/frontend/src/app/dashboard/component/user/user-operator/user-operator-editor.component.scss b/frontend/src/app/dashboard/component/user/user-operator/user-operator-editor.component.scss
new file mode 100644
index 00000000000..59e93001efb
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-operator/user-operator-editor.component.scss
@@ -0,0 +1,224 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+.operator-editor {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 64px);
+}
+
+.editor-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 24px;
+  background: #fff;
+  border-bottom: 1px solid #e8e8e8;
+
+  .left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    h2 {
+      margin: 0;
+      font-size: 18px;
+    }
+  }
+
+  .right {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+.editor-body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.config-pane {
+  width: 40%;
+  min-width: 360px;
+  overflow-y: auto;
+  padding: 20px 24px;
+  border-right: 1px solid #e8e8e8;
+  background: #fafafa;
+
+  h3 {
+    margin-top: 0;
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  .field {
+    margin-bottom: 14px;
+
+    label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.65);
+      margin-bottom: 4px;
+    }
+  }
+
+  .field-row {
+    display: flex;
+    gap: 12px;
+
+    .field {
+      flex: 1;
+    }
+  }
+
+  .emoji-picker {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .emoji-btn {
+    width: 32px;
+    height: 32px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    background: #fff;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 0;
+
+    &.selected {
+      border-color: #1890ff;
+      background: #e6f7ff;
+    }
+  }
+
+  nz-select {
+    width: 100%;
+  }
+
+  .section-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 8px;
+
+    h3 {
+      margin-bottom: 0;
+    }
+  }
+
+  .port-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr auto;
+    gap: 6px;
+    margin-bottom: 6px;
+  }
+
+  .property-card {
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    padding: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .property-grid {
+    display: grid;
+    grid-template-columns: 1fr 130px auto;
+    gap: 6px;
+  }
+
+  .muted {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 13px;
+
+    &.small {
+      font-size: 12px;
+      margin-top: -4px;
+      margin-bottom: 10px;
+    }
+  }
+
+  code {
+    background: #f0f0f0;
+    padding: 1px 4px;
+    border-radius: 3px;
+    font-size: 12px;
+  }
+}
+
+.code-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+
+  .code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #e8e8e8;
+
+    h3 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+
+      .lang-badge {
+        margin-left: 8px;
+        font-size: 11px;
+        padding: 1px 6px;
+        background: #f0f0f0;
+        border-radius: 3px;
+        color: rgba(0, 0, 0, 0.55);
+        font-weight: 500;
+      }
+    }
+
+    .code-actions {
+      display: flex;
+      gap: 8px;
+    }
+  }
+
+  .monaco-host {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .test-output {
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    max-height: 160px;
+    overflow-y: auto;
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+    font-size: 12px;
+
+    pre {
+      margin: 0;
+      white-space: pre-wrap;
+    }
+
+    &.ok {
+      background: #f6ffed;
+      color: #237804;
+    }
+    &.err {
+      background: #fff1f0;
+      color: #a8071a;
+    }
+  }
+}
diff --git a/frontend/src/app/dashboard/component/user/user-operator/user-operator-editor.component.ts b/frontend/src/app/dashboard/component/user/user-operator/user-operator-editor.component.ts
new file mode 100644
index 00000000000..d626e92616a
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-operator/user-operator-editor.component.ts
@@ -0,0 +1,292 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { AfterViewInit, Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { ActivatedRoute, Router } from "@angular/router";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { NzButtonModule } from "ng-zorro-antd/button";
+import { NzCardModule } from "ng-zorro-antd/card";
+import { NzCheckboxModule } from "ng-zorro-antd/checkbox";
+import { NzDividerModule } from "ng-zorro-antd/divider";
+import { NzFormModule } from "ng-zorro-antd/form";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { NzInputModule } from "ng-zorro-antd/input";
+import { NzInputNumberModule } from "ng-zorro-antd/input-number";
+import { NzMessageService } from "ng-zorro-antd/message";
+import { NzModalService } from "ng-zorro-antd/modal";
+import { NzPopconfirmModule } from "ng-zorro-antd/popconfirm";
+import { NzSelectModule } from "ng-zorro-antd/select";
+import { NzTagModule } from "ng-zorro-antd/tag";
+import { NzTooltipModule } from "ng-zorro-antd/tooltip";
+import * as monaco from "monaco-editor";
+import "@codingame/monaco-vscode-python-default-extension";
+import {
+  CUSTOM_OPERATOR_PROPERTY_TYPE_OPTIONS,
+  CustomOperator,
+  CustomOperatorProperty,
+  CustomOperatorPropertyType,
+  DEFAULT_CUSTOM_OPERATOR_CATEGORY,
+} from "../../../type/custom-operator.interface";
+import { CustomOperatorService } from "../../../service/user/custom-operator/custom-operator.service";
+import { UserService } from "../../../../common/service/user/user.service";
+import { DASHBOARD_USER_OPERATOR } from "../../../../app-routing.constant";
+
+const EMOJI_CHOICES = ["🧩", "🛠️", "✨", "🧪", "📊", "🔢", "🧮", "🔍", "📈", "📉", "🪄", "🤖"];
+
+@UntilDestroy()
+@Component({
+  selector: "texera-user-operator-editor",
+  templateUrl: "./user-operator-editor.component.html",
+  styleUrls: ["./user-operator-editor.component.scss"],
+  imports: [
+    CommonModule,
+    FormsModule,
+    NzButtonModule,
+    NzCardModule,
+    NzCheckboxModule,
+    NzDividerModule,
+    NzFormModule,
+    NzIconModule,
+    NzInputModule,
+    NzInputNumberModule,
+    NzPopconfirmModule,
+    NzSelectModule,
+    NzTagModule,
+    NzTooltipModule,
+  ],
+})
+export class UserOperatorEditorComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild("editor", { static: false }) editorElement?: ElementRef<HTMLDivElement>;
+
+  public draft!: Omit<CustomOperator, "id" | "createdAt" | "updatedAt"> & Partial<Pick<CustomOperator, "id">>;
+  public editing = false;
+  public testOutput: string | null = null;
+  public testStatus: "idle" | "ok" | "error" = "idle";
+  public readonly emojiChoices = EMOJI_CHOICES;
+  public readonly propertyTypeOptions = CUSTOM_OPERATOR_PROPERTY_TYPE_OPTIONS;
+  public readonly defaultCategory = DEFAULT_CUSTOM_OPERATOR_CATEGORY;
+
+  public knownCategories: string[] = [DEFAULT_CUSTOM_OPERATOR_CATEGORY];
+
+  private monacoEditor?: monaco.editor.IStandaloneCodeEditor;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private customOperatorService: CustomOperatorService,
+    private userService: UserService,
+    private message: NzMessageService,
+    private modal: NzModalService,
+    private ngZone: NgZone
+  ) {}
+
+  ngOnInit(): void {
+    const idParam = this.route.snapshot.paramMap.get("id");
+    if (idParam) {
+      const existing = this.customOperatorService.get(idParam);
+      if (existing) {
+        this.editing = true;
+        const { id, createdAt, updatedAt, ...editable } = existing;
+        this.draft = { ...editable, id };
+      }
+    }
+    if (!this.draft) {
+      this.editing = false;
+      this.draft = this.customOperatorService.emptyDraft(this.currentUserName());
+    }
+
+    const others = new Set(this.customOperatorService.list().map(op => op.category));
+    others.add(DEFAULT_CUSTOM_OPERATOR_CATEGORY);
+    this.knownCategories = Array.from(others);
+  }
+
+  ngAfterViewInit(): void {
+    this.ngZone.runOutsideAngular(() => {
+      if (!this.editorElement) return;
+      this.monacoEditor = monaco.editor.create(this.editorElement.nativeElement, {
+        value: this.draft.code,
+        language: "python",
+        theme: "vs",
+        automaticLayout: true,
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        fontSize: 13,
+        tabSize: 4,
+      });
+      this.monacoEditor.onDidChangeModelContent(() => {
+        const value = this.monacoEditor?.getValue() ?? "";
+        this.ngZone.run(() => {
+          this.draft.code = value;
+          if (this.testStatus !== "idle") {
+            this.testStatus = "idle";
+            this.testOutput = null;
+          }
+        });
+      });
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.monacoEditor?.dispose();
+  }
+
+  public addInputPort(): void {
+    this.draft.inputPorts = [...this.draft.inputPorts, { name: `input-${this.draft.inputPorts.length}`, type: "any" }];
+  }
+
+  public removeInputPort(idx: number): void {
+    this.draft.inputPorts = this.draft.inputPorts.filter((_, i) => i !== idx);
+  }
+
+  public addOutputPort(): void {
+    this.draft.outputPorts = [
+      ...this.draft.outputPorts,
+      { name: `output-${this.draft.outputPorts.length}`, type: "any" },
+    ];
+  }
+
+  public removeOutputPort(idx: number): void {
+    this.draft.outputPorts = this.draft.outputPorts.filter((_, i) => i !== idx);
+  }
+
+  public addProperty(): void {
+    this.draft.properties = [
+      ...this.draft.properties,
+      { name: `param_${this.draft.properties.length + 1}`, type: "string", default: "", description: "" },
+    ];
+  }
+
+  public removeProperty(idx: number): void {
+    this.draft.properties = this.draft.properties.filter((_, i) => i !== idx);
+  }
+
+  public onPropertyTypeChange(prop: CustomOperatorProperty, newType: CustomOperatorPropertyType): void {
+    prop.type = newType;
+    switch (newType) {
+      case "number":
+        prop.default = typeof prop.default === "number" ? prop.default : 0;
+        break;
+      case "boolean":
+        prop.default = typeof prop.default === "boolean" ? prop.default : false;
+        break;
+      case "select":
+        prop.options = prop.options && prop.options.length > 0 ? prop.options : ["option_a", "option_b"];
+        prop.default = prop.options[0];
+        break;
+      default:
+        prop.default = typeof prop.default === "string" ? prop.default : "";
+    }
+  }
+
+  public propertyOptionsAsString(prop: CustomOperatorProperty): string {
+    return (prop.options ?? []).join(", ");
+  }
+
+  public setPropertyOptions(prop: CustomOperatorProperty, value: string): void {
+    const next = value
+      .split(",")
+      .map(s => s.trim())
+      .filter(s => s.length > 0);
+    prop.options = next;
+    if (!next.includes(String(prop.default))) {
+      prop.default = next[0] ?? "";
+    }
+  }
+
+  public testRun(): void {
+    const code = this.draft.code ?? "";
+    const errors: string[] = [];
+
+    if (!code.trim()) {
+      errors.push("Code is empty.");
+    }
+
+    const openParens = (code.match(/\(/g) ?? []).length;
+    const closeParens = (code.match(/\)/g) ?? []).length;
+    if (openParens !== closeParens) {
+      errors.push(`Unbalanced parentheses: ${openParens} '(' vs ${closeParens} ')'`);
+    }
+    const openBrackets = (code.match(/\[/g) ?? []).length;
+    const closeBrackets = (code.match(/\]/g) ?? []).length;
+    if (openBrackets !== closeBrackets) {
+      errors.push(`Unbalanced brackets: ${openBrackets} '[' vs ${closeBrackets} ']'`);
+    }
+
+    const hasYield = /\byield\b/.test(code);
+    const hasReturn = /\breturn\b/.test(code);
+    if (!hasYield && !hasReturn) {
+      errors.push("Body has no `yield` or `return` — UDF will produce no output.");
+    }
+
+    const hasUDFClass = /class\s+\w+\s*\(\s*UDF\w+Operator\s*\)/.test(code);
+    if (!hasUDFClass) {
+      errors.push("Could not find a class that extends a UDF*Operator base class.");
+    }
+
+    if (errors.length === 0) {
+      this.testStatus = "ok";
+      this.testOutput = "Looks good. Code parses and follows the UDF operator shape.";
+    } else {
+      this.testStatus = "error";
+      this.testOutput = errors.map(e => "• " + e).join("\n");
+    }
+  }
+
+  public save(): void {
+    const name = this.draft.name.trim();
+    if (!name) {
+      this.message.warning("Please give the operator a name.");
+      return;
+    }
+    if (this.draft.inputPorts.length === 0 && this.draft.outputPorts.length === 0) {
+      this.message.warning("An operator needs at least one input or output port.");
+      return;
+    }
+
+    const category = this.draft.category?.trim() || DEFAULT_CUSTOM_OPERATOR_CATEGORY;
+    const payload = { ...this.draft, name, category };
+
+    if (this.editing && this.draft.id) {
+      this.customOperatorService.update(this.draft.id, payload);
+      this.message.success(`Updated "${name}"`);
+    } else {
+      this.customOperatorService.create(payload);
+      this.message.success(`Created "${name}"`);
+    }
+    this.router.navigateByUrl(DASHBOARD_USER_OPERATOR);
+  }
+
+  public cancel(): void {
+    this.router.navigateByUrl(DASHBOARD_USER_OPERATOR);
+  }
+
+  public confirmDelete(): void {
+    if (!this.draft.id) return;
+    this.customOperatorService.delete(this.draft.id);
+    this.message.success("Operator deleted");
+    this.router.navigateByUrl(DASHBOARD_USER_OPERATOR);
+  }
+
+  private currentUserName(): string {
+    const user = this.userService.getCurrentUser();
+    return user?.name ?? "anonymous";
+  }
+}
diff --git a/frontend/src/app/dashboard/component/user/user-operator/user-operator.component.html b/frontend/src/app/dashboard/component/user/user-operator/user-operator.component.html
new file mode 100644
index 00000000000..1da036021ad
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-operator/user-operator.component.html
@@ -0,0 +1,74 @@
+<div class="operator-library">
+  <div class="header">
+    <div class="title-block">
+      <h2>My Operators</h2>
+      <p class="subtitle">Reusable Python operators saved to your account. Drag them onto any workflow.</p>
+    </div>
+    <button
+      nz-button
+      nzType="primary"
+      nzSize="large"
+      [routerLink]="DASHBOARD_USER_OPERATOR_CREATE">
+      <span
+        nz-icon
+        nzType="plus"></span>
+      Create Operator
+    </button>
+  </div>
+
+  <nz-empty
+    *ngIf="operators.length === 0"
+    nzNotFoundContent="No custom operators yet. Click 'Create Operator' to build your first one."></nz-empty>
+
+  <div
+    class="cards-grid"
+    *ngIf="operators.length > 0">
+    <nz-card
+      *ngFor="let op of operators"
+      class="operator-card"
+      (click)="openEdit(op)">
+      <div class="card-head">
+        <span class="icon">{{ op.icon }}</span>
+        <div class="name-block">
+          <div class="name">{{ op.name || '(untitled)' }}</div>
+          <div class="badges">
+            <nz-tag nzColor="blue">{{ op.category }}</nz-tag>
+            <nz-tag nzColor="geekblue">{{ op.inputPorts.length }} in / {{ op.outputPorts.length }} out</nz-tag>
+            <nz-tag
+              *ngIf="op.isPublic"
+              nzColor="green"
+              >Public</nz-tag
+            >
+          </div>
+        </div>
+      </div>
+      <div class="description">{{ op.description || '—' }}</div>
+      <div class="card-meta">Updated {{ op.updatedAt | date:'short' }}</div>
+      <div
+        class="card-actions"
+        (click)="$event.stopPropagation()">
+        <button
+          nz-button
+          nzSize="small"
+          (click)="openEdit(op)">
+          <span
+            nz-icon
+            nzType="edit"></span>
+          Edit
+        </button>
+        <button
+          nz-button
+          nzSize="small"
+          nzDanger
+          nz-popconfirm
+          nzPopconfirmTitle="Delete this operator?"
+          (nzOnConfirm)="delete(op)">
+          <span
+            nz-icon
+            nzType="delete"></span>
+          Delete
+        </button>
+      </div>
+    </nz-card>
+  </div>
+</div>
diff --git a/frontend/src/app/dashboard/component/user/user-operator/user-operator.component.scss b/frontend/src/app/dashboard/component/user/user-operator/user-operator.component.scss
new file mode 100644
index 00000000000..ce4f87381ce
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-operator/user-operator.component.scss
@@ -0,0 +1,72 @@
+.operator-library {
+  padding: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 24px;
+
+    .title-block h2 {
+      margin: 0 0 4px;
+      font-size: 24px;
+    }
+    .subtitle {
+      color: rgba(0, 0, 0, 0.55);
+      margin: 0;
+    }
+  }
+
+  .cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 16px;
+  }
+
+  .operator-card {
+    cursor: pointer;
+    transition: box-shadow 0.15s ease;
+
+    &:hover {
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .card-head {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 8px;
+    }
+    .icon {
+      font-size: 36px;
+      line-height: 1;
+    }
+    .name {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+    .badges {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    .description {
+      color: rgba(0, 0, 0, 0.65);
+      min-height: 40px;
+      margin-bottom: 12px;
+      white-space: pre-wrap;
+    }
+    .card-meta {
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .card-actions {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+  }
+}
diff --git a/frontend/src/app/dashboard/component/user/user-operator/user-operator.component.ts b/frontend/src/app/dashboard/component/user/user-operator/user-operator.component.ts
new file mode 100644
index 00000000000..f97ade61112
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-operator/user-operator.component.ts
@@ -0,0 +1,76 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Router, RouterLink } from "@angular/router";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { NzButtonModule } from "ng-zorro-antd/button";
+import { NzCardModule } from "ng-zorro-antd/card";
+import { NzEmptyModule } from "ng-zorro-antd/empty";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { NzPopconfirmModule } from "ng-zorro-antd/popconfirm";
+import { NzTagModule } from "ng-zorro-antd/tag";
+import { NzTooltipModule } from "ng-zorro-antd/tooltip";
+import { CustomOperatorService } from "../../../service/user/custom-operator/custom-operator.service";
+import { CustomOperator } from "../../../type/custom-operator.interface";
+import { DASHBOARD_USER_OPERATOR_CREATE, DASHBOARD_USER_OPERATOR_EDIT } from "../../../../app-routing.constant";
+
+@UntilDestroy()
+@Component({
+  selector: "texera-user-operator",
+  templateUrl: "./user-operator.component.html",
+  styleUrls: ["./user-operator.component.scss"],
+  imports: [
+    CommonModule,
+    RouterLink,
+    NzButtonModule,
+    NzCardModule,
+    NzEmptyModule,
+    NzIconModule,
+    NzPopconfirmModule,
+    NzTagModule,
+    NzTooltipModule,
+  ],
+})
+export class UserOperatorComponent implements OnInit {
+  public operators: CustomOperator[] = [];
+
+  protected readonly DASHBOARD_USER_OPERATOR_CREATE = DASHBOARD_USER_OPERATOR_CREATE;
+
+  constructor(
+    private customOperatorService: CustomOperatorService,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.customOperatorService
+      .list$()
+      .pipe(untilDestroyed(this))
+      .subscribe(ops => (this.operators = ops));
+  }
+
+  public openEdit(op: CustomOperator): void {
+    this.router.navigate([DASHBOARD_USER_OPERATOR_EDIT, op.id]);
+  }
+
+  public delete(op: CustomOperator): void {
+    this.customOperatorService.delete(op.id);
+  }
+}
diff --git a/frontend/src/app/dashboard/service/user/custom-operator/custom-operator-factory.service.ts b/frontend/src/app/dashboard/service/user/custom-operator/custom-operator-factory.service.ts
new file mode 100644
index 00000000000..6a693232666
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/custom-operator/custom-operator-factory.service.ts
@@ -0,0 +1,118 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Injectable } from "@angular/core";
+import { WorkflowUtilService } from "../../../../workspace/service/workflow-graph/util/workflow-util.service";
+import { OperatorPredicate, PortDescription } from "../../../../workspace/types/workflow-common.interface";
+import { CustomOperator, CustomOperatorProperty } from "../../../type/custom-operator.interface";
+
+const PYTHON_UDF_TYPE = "PythonUDFV2";
+
+/**
+ * Builds an OperatorPredicate that wraps a Python UDF with the saved
+ * code, ports, and property defaults of a CustomOperator. The graph still
+ * stores an ordinary PythonUDFV2 — this factory only pre-fills its fields.
+ */
+@Injectable({
+  providedIn: "root",
+})
+export class CustomOperatorFactoryService {
+  constructor(private workflowUtilService: WorkflowUtilService) {}
+
+  public buildPredicate(customOp: CustomOperator): OperatorPredicate | null {
+    let basePredicate: OperatorPredicate;
+    try {
+      basePredicate = this.workflowUtilService.getNewOperatorPredicate(PYTHON_UDF_TYPE, customOp.name);
+    } catch {
+      return null;
+    }
+
+    const inputPorts = this.buildPorts(
+      customOp.inputPorts.map(p => p.name),
+      "input"
+    );
+    const outputPorts = this.buildPorts(
+      customOp.outputPorts.map(p => p.name),
+      "output"
+    );
+
+    const code = this.composeCode(customOp);
+
+    return {
+      ...basePredicate,
+      customDisplayName: customOp.name || basePredicate.customDisplayName,
+      inputPorts,
+      outputPorts,
+      operatorProperties: {
+        ...basePredicate.operatorProperties,
+        code,
+        workers: 1,
+        retainInputColumns: true,
+      },
+    };
+  }
+
+  private buildPorts(names: string[], prefix: "input" | "output"): PortDescription[] {
+    if (names.length === 0) return [];
+    return names.map((name, i) => ({
+      portID: `${prefix}-${i}`,
+      displayName: name || `${prefix}-${i}`,
+      disallowMultiInputs: false,
+      isDynamicPort: false,
+      dependencies: [],
+    }));
+  }
+
+  /**
+   * Prepend a PROPS dict with the saved property defaults so the user's
+   * code can read them via `PROPS["property_name"]`. We can't extend the
+   * Python UDF schema without touching the engine, so this is the simplest
+   * way to surface custom properties.
+   */
+  private composeCode(customOp: CustomOperator): string {
+    const code = customOp.code ?? "";
+    if (customOp.properties.length === 0) return code;
+
+    const propsBlock = this.renderPropsBlock(customOp.properties);
+    return `${propsBlock}\n${code}`;
+  }
+
+  private renderPropsBlock(properties: CustomOperatorProperty[]): string {
+    const lines: string[] = [];
+    lines.push("# Properties configured in 'My Operators' — edit values as needed.");
+    lines.push("PROPS = {");
+    for (const prop of properties) {
+      const value = this.toPythonLiteral(prop.default, prop.type);
+      const desc = prop.description ? `  # ${prop.description}` : "";
+      lines.push(`    ${this.quoteKey(prop.name)}: ${value},${desc}`);
+    }
+    lines.push("}");
+    return lines.join("\n");
+  }
+
+  private quoteKey(name: string): string {
+    return JSON.stringify(name);
+  }
+
+  private toPythonLiteral(value: string | number | boolean, type: string): string {
+    if (type === "boolean") return value ? "True" : "False";
+    if (type === "number") return String(Number(value) || 0);
+    return JSON.stringify(String(value ?? ""));
+  }
+}
diff --git a/frontend/src/app/dashboard/service/user/custom-operator/custom-operator.service.ts b/frontend/src/app/dashboard/service/user/custom-operator/custom-operator.service.ts
new file mode 100644
index 00000000000..9c34deacc2b
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/custom-operator/custom-operator.service.ts
@@ -0,0 +1,123 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Injectable } from "@angular/core";
+import { BehaviorSubject, Observable } from "rxjs";
+import {
+  CustomOperator,
+  DEFAULT_CUSTOM_OPERATOR_CATEGORY,
+  DEFAULT_CUSTOM_OPERATOR_CODE,
+} from "../../../type/custom-operator.interface";
+
+const STORAGE_KEY = "texera.customOperators.v1";
+
+@Injectable({
+  providedIn: "root",
+})
+export class CustomOperatorService {
+  private readonly operatorsSubject = new BehaviorSubject<CustomOperator[]>(this.readAll());
+
+  public list$(): Observable<CustomOperator[]> {
+    return this.operatorsSubject.asObservable();
+  }
+
+  public list(): CustomOperator[] {
+    return this.operatorsSubject.value;
+  }
+
+  public get(id: string): CustomOperator | undefined {
+    return this.operatorsSubject.value.find(op => op.id === id);
+  }
+
+  public create(input: Omit<CustomOperator, "id" | "createdAt" | "updatedAt">): CustomOperator {
+    const now = new Date().toISOString();
+    const operator: CustomOperator = {
+      ...input,
+      id: this.generateId(),
+      createdAt: now,
+      updatedAt: now,
+    };
+    this.persist([...this.operatorsSubject.value, operator]);
+    return operator;
+  }
+
+  public update(id: string, patch: Partial<Omit<CustomOperator, "id" | "createdAt">>): CustomOperator | undefined {
+    const idx = this.operatorsSubject.value.findIndex(op => op.id === id);
+    if (idx === -1) return undefined;
+    const existing = this.operatorsSubject.value[idx];
+    const updated: CustomOperator = {
+      ...existing,
+      ...patch,
+      id,
+      createdAt: existing.createdAt,
+      updatedAt: new Date().toISOString(),
+    };
+    const next = [...this.operatorsSubject.value];
+    next[idx] = updated;
+    this.persist(next);
+    return updated;
+  }
+
+  public delete(id: string): void {
+    this.persist(this.operatorsSubject.value.filter(op => op.id !== id));
+  }
+
+  public emptyDraft(author: string): Omit<CustomOperator, "id" | "createdAt" | "updatedAt"> {
+    return {
+      name: "",
+      description: "",
+      icon: "🧩",
+      category: DEFAULT_CUSTOM_OPERATOR_CATEGORY,
+      author,
+      code: DEFAULT_CUSTOM_OPERATOR_CODE,
+      language: "python",
+      inputPorts: [{ name: "input", type: "any" }],
+      outputPorts: [{ name: "output", type: "any" }],
+      properties: [],
+      isPublic: false,
+    };
+  }
+
+  private readAll(): CustomOperator[] {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return [];
+      const parsed = JSON.parse(raw);
+      if (!Array.isArray(parsed)) return [];
+      return (parsed as CustomOperator[]).map(op => ({
+        ...op,
+        inputPorts: op.inputPorts ?? [],
+        outputPorts: op.outputPorts ?? [],
+        properties: op.properties ?? [],
+        category: op.category ?? DEFAULT_CUSTOM_OPERATOR_CATEGORY,
+      }));
+    } catch {
+      return [];
+    }
+  }
+
+  private persist(operators: CustomOperator[]): void {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(operators));
+    this.operatorsSubject.next(operators);
+  }
+
+  private generateId(): string {
+    return `custom-op-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+  }
+}
diff --git a/frontend/src/app/dashboard/type/custom-operator.interface.ts b/frontend/src/app/dashboard/type/custom-operator.interface.ts
new file mode 100644
index 00000000000..1fc5df5d59c
--- /dev/null
+++ b/frontend/src/app/dashboard/type/custom-operator.interface.ts
@@ -0,0 +1,85 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export type CustomOperatorPropertyType = "string" | "number" | "boolean" | "select";
+
+export interface CustomOperatorPort {
+  name: string;
+  /** Free-form label for the port type (informational only — Texera ports are untyped). */
+  type: string;
+}
+
+export interface CustomOperatorProperty {
+  name: string;
+  type: CustomOperatorPropertyType;
+  default: string | number | boolean;
+  description: string;
+  /** Only meaningful when type === "select". */
+  options?: string[];
+}
+
+export interface CustomOperator {
+  id: string;
+  name: string;
+  description: string;
+  /** Emoji used to visually identify the operator. */
+  icon: string;
+  /** Category name shown in the operator panel ("My Operators" by default). */
+  category: string;
+  author: string;
+  code: string;
+  language: "python";
+  inputPorts: CustomOperatorPort[];
+  outputPorts: CustomOperatorPort[];
+  properties: CustomOperatorProperty[];
+  isPublic: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export const DEFAULT_CUSTOM_OPERATOR_CATEGORY = "My Operators";
+
+export const DEFAULT_CUSTOM_OPERATOR_CODE = `from pytexera import *
+
+class ProcessTableOperator(UDFTableOperator):
+
+    @overrides
+    def process_table(self, table: Table, port: int) -> Iterator[Optional[TableLike]]:
+        # 'table' is a pandas DataFrame.
+        # Access properties via self.args['property_name'].
+        df = table
+        # Example: add a new column
+        # df['new_col'] = df['existing_col'] * 2
+        yield df
+`;
+
+export const CUSTOM_OPERATOR_PROPERTY_TYPE_OPTIONS: { value: CustomOperatorPropertyType; label: string }[] = [
+  { value: "string", label: "Text" },
+  { value: "number", label: "Number" },
+  { value: "boolean", label: "Boolean" },
+  { value: "select", label: "Select" },
+];
+
+/**
+ * Operator-type prefix used when injecting a custom operator into a workflow.
+ * The actual operator instantiated in the graph is still a Python UDF; this prefix
+ * is only used to distinguish the synthetic operator schema served from the
+ * frontend custom-operator registry.
+ */
+export const CUSTOM_OPERATOR_TYPE_PREFIX = "CustomOp__";
diff --git a/frontend/src/app/workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.html b/frontend/src/app/workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.html
new file mode 100644
index 00000000000..906f3d944cf
--- /dev/null
+++ b/frontend/src/app/workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.html
@@ -0,0 +1,19 @@
+<div cdkDropList>
+  <div
+    cdkDrag
+    (cdkDragStarted)="dragStarted()"
+    (cdkDragDropped)="dragDropped($event.dropPoint)"
+    [ngClass]="{'disable-drag-drop': !draggable}"
+    class="custom-operator-label"
+    title="{{ operator?.description || operator?.name }}">
+    <span class="icon">{{ operator?.icon }}</span>
+    <span class="text">{{ operator?.name }}</span>
+    <span
+      *ngIf="operator?.isPublic"
+      class="public-dot"
+      title="Public"></span>
+    <div
+      *cdkDragPreview
+      id="flyingOP"></div>
+  </div>
+</div>
diff --git a/frontend/src/app/workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.scss b/frontend/src/app/workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.scss
new file mode 100644
index 00000000000..20fb2c9d07b
--- /dev/null
+++ b/frontend/src/app/workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.scss
@@ -0,0 +1,42 @@
+.disable-drag-drop {
+  color: grey;
+}
+
+.custom-operator-label {
+  white-space: nowrap;
+  height: 32px;
+  line-height: 30px;
+  border-radius: 3px;
+  border: 1px solid rgba(0, 0, 0, 0);
+  transition:
+    border-color 0.3s,
+    background-color 0.3s;
+  overflow: hidden;
+  padding: 0 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  &:hover {
+    border-color: rgba(64, 169, 255, 1);
+    background-color: #f0f9ff;
+  }
+
+  .icon {
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  .text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .public-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #52c41a;
+  }
+}
diff --git a/frontend/src/app/workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.ts b/frontend/src/app/workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.ts
new file mode 100644
index 00000000000..9b8c605b1fa
--- /dev/null
+++ b/frontend/src/app/workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.ts
@@ -0,0 +1,65 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { AfterContentInit, Component, Input } from "@angular/core";
+import { CdkDrag, CdkDragPreview, CdkDropList } from "@angular/cdk/drag-drop";
+import { NgClass, NgIf } from "@angular/common";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { Point } from "../../../../types/workflow-common.interface";
+import { DragDropService } from "../../../../service/drag-drop/drag-drop.service";
+import { WorkflowActionService } from "../../../../service/workflow-graph/model/workflow-action.service";
+import { CustomOperator } from "../../../../../dashboard/type/custom-operator.interface";
+import { CustomOperatorFactoryService } from "../../../../../dashboard/service/user/custom-operator/custom-operator-factory.service";
+
+@UntilDestroy()
+@Component({
+  selector: "texera-custom-operator-label",
+  templateUrl: "./custom-operator-label.component.html",
+  styleUrls: ["./custom-operator-label.component.scss"],
+  imports: [CdkDropList, CdkDrag, CdkDragPreview, NgClass, NgIf],
+})
+export class CustomOperatorLabelComponent implements AfterContentInit {
+  @Input() operator?: CustomOperator;
+
+  public draggable = true;
+
+  constructor(
+    private dragDropService: DragDropService,
+    private workflowActionService: WorkflowActionService,
+    private customOperatorFactory: CustomOperatorFactoryService
+  ) {}
+
+  ngAfterContentInit(): void {
+    this.workflowActionService
+      .getWorkflowModificationEnabledStream()
+      .pipe(untilDestroyed(this))
+      .subscribe(canModify => (this.draggable = canModify));
+  }
+
+  public dragStarted(): void {
+    if (!this.draggable || !this.operator) return;
+    const predicate = this.customOperatorFactory.buildPredicate(this.operator);
+    if (!predicate) return;
+    this.dragDropService.dragStartedCustom(predicate);
+  }
+
+  public dragDropped(dropPoint: Point): void {
+    this.dragDropService.dragDropped(dropPoint);
+  }
+}
diff --git a/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.html b/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.html
index ff8bb97a296..e4e55465eb2 100644
--- a/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.html
+++ b/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.html
@@ -40,6 +40,26 @@
 
 <div id="spacer"></div>
 
+<nz-collapse
+  *ngIf="hasCustomOperators()"
+  nzBordered="false"
+  nzExpandIconPosition="end">
+  <nz-collapse-panel
+    *ngFor="let groupName of customGroupNames"
+    [nzHeader]="groupName"
+    [nzActive]="true"
+    class="operator-group custom-operator-group"
+    [attr.data-depth]="0">
+    <div class="indent">
+      <div
+        *ngFor="let customOp of customOperatorGroups.get(groupName)"
+        class="operator-label">
+        <texera-custom-operator-label [operator]="customOp"></texera-custom-operator-label>
+      </div>
+    </div>
+  </nz-collapse-panel>
+</nz-collapse>
+
 <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: groupNames, depth: 0 }"></ng-container>
 
 <ng-template
diff --git a/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.scss b/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.scss
index e6487324d3a..e778e7b9e4a 100644
--- a/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.scss
+++ b/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.scss
@@ -56,3 +56,8 @@
 #spacer {
   margin-top: 32px;
 }
+
+.custom-operator-group ::ng-deep .ant-collapse-header {
+  color: #1890ff;
+  font-weight: 600;
+}
diff --git a/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.ts b/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.ts
index ed172ae5d13..50cc4e76ea3 100644
--- a/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.ts
+++ b/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.ts
@@ -36,6 +36,10 @@ import { FormsModule } from "@angular/forms";
 import { NgFor, NgTemplateOutlet } from "@angular/common";
 import { OperatorLabelComponent } from "./operator-label/operator-label.component";
 import { NzCollapseComponent, NzCollapsePanelComponent } from "ng-zorro-antd/collapse";
+import { NgIf } from "@angular/common";
+import { CustomOperatorLabelComponent } from "./custom-operator-label/custom-operator-label.component";
+import { CustomOperator } from "../../../../dashboard/type/custom-operator.interface";
+import { CustomOperatorService } from "../../../../dashboard/service/user/custom-operator/custom-operator.service";
 
 @UntilDestroy()
 @Component({
@@ -54,11 +58,14 @@ import { NzCollapseComponent, NzCollapsePanelComponent } from "ng-zorro-antd/col
     NgTemplateOutlet,
     NzCollapseComponent,
     NzCollapsePanelComponent,
+    NgIf,
+    CustomOperatorLabelComponent,
   ],
 })
 export class OperatorMenuComponent {
   public opList = new Map<string, Array<OperatorSchema>>();
   public groupNames: ReadonlyArray<GroupInfo> = [];
+  public customOperatorGroups = new Map<string, CustomOperator[]>();
 
   // input value of the search input box
   public searchInputValue: string = "";
@@ -81,8 +88,22 @@ export class OperatorMenuComponent {
     private operatorMetadataService: OperatorMetadataService,
     private workflowActionService: WorkflowActionService,
     private workflowUtilService: WorkflowUtilService,
-    private dragDropService: DragDropService
+    private dragDropService: DragDropService,
+    private customOperatorService: CustomOperatorService
   ) {
+    this.customOperatorService
+      .list$()
+      .pipe(untilDestroyed(this))
+      .subscribe(ops => {
+        const groups = new Map<string, CustomOperator[]>();
+        for (const op of ops) {
+          const list = groups.get(op.category) ?? [];
+          list.push(op);
+          groups.set(op.category, list);
+        }
+        groups.forEach(list => list.sort((a, b) => a.name.localeCompare(b.name)));
+        this.customOperatorGroups = groups;
+      });
     // clear the search box if an operator is dropped from operator search box
     this.dragDropService.operatorDropStream.pipe(untilDestroyed(this)).subscribe(() => {
       this.searchInputValue = "";
@@ -115,6 +136,14 @@ export class OperatorMenuComponent {
       });
   }
 
+  public get customGroupNames(): string[] {
+    return Array.from(this.customOperatorGroups.keys()).sort();
+  }
+
+  public hasCustomOperators(): boolean {
+    return this.customOperatorGroups.size > 0;
+  }
+
   /**
    * create the search results observable
    * whenever the search box text is changed, perform the search using fuse.js
diff --git a/frontend/src/app/workspace/service/drag-drop/drag-drop.service.ts b/frontend/src/app/workspace/service/drag-drop/drag-drop.service.ts
index e7665582ba1..ff5fc8693a6 100644
--- a/frontend/src/app/workspace/service/drag-drop/drag-drop.service.ts
+++ b/frontend/src/app/workspace/service/drag-drop/drag-drop.service.ts
@@ -57,6 +57,23 @@ export class DragDropService {
     this.handleOperatorRecommendationOnDrag();
   }
 
+  /**
+   * Like {@link dragStarted} but uses a caller-supplied predicate instead of
+   * building one from an operator type. Used to drag custom operators that
+   * wrap a Python UDF with pre-filled code/ports.
+   */
+  public dragStartedCustom(predicate: OperatorPredicate): void {
+    this.op = predicate;
+    const scale = this.workflowActionService.getJointGraphWrapper().getMainJointPaper()?.scale().sx ?? 1;
+    new joint.dia.Paper({
+      el: document.getElementById("flyingOP")!,
+      width: JointUIService.DEFAULT_OPERATOR_WIDTH * scale,
+      height: JointUIService.DEFAULT_OPERATOR_HEIGHT * scale,
+      model: new joint.dia.Graph().addCell(this.jointUIService.getJointOperatorElement(this.op, { x: 0, y: 0 })),
+    }).scale(scale);
+    this.handleOperatorRecommendationOnDrag();
+  }
+
   public dragDropped(dropPoint: Point): void {
     const coordinates = this.workflowActionService
       .getJointGraphWrapper()