diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx
index 435d1cebd..4ea41f853 100644
--- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx
+++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx
@@ -324,7 +324,7 @@ const Chat = ({ integrationId }: { integrationId: string }) => {
     ],
     // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,
     // so don't use this action for langgraph integration.
-    available: ['langgraph', 'langgraph-fastapi'].includes(integrationId) ? 'disabled' : 'enabled',
+    available: ['langgraph', 'langgraph-fastapi', 'langgraph-typescript'].includes(integrationId) ? 'disabled' : 'enabled',
     renderAndWaitForResponse: ({ args, respond, status }) => {
       return <StepsFeedback args={args} respond={respond} status={status} />;
     },
diff --git a/typescript-sdk/apps/dojo/src/files.json b/typescript-sdk/apps/dojo/src/files.json
index de4f8d15c..3065bb788 100644
--- a/typescript-sdk/apps/dojo/src/files.json
+++ b/typescript-sdk/apps/dojo/src/files.json
@@ -80,7 +80,7 @@
   "pydantic-ai::human_in_the_loop": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
+      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi', 'langgraph-typescript'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -236,7 +236,7 @@
   "server-starter-all-features::human_in_the_loop": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
+      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi', 'langgraph-typescript'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -456,7 +456,7 @@
   "langgraph::human_in_the_loop": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
+      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi', 'langgraph-typescript'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -663,7 +663,7 @@
   "langgraph-fastapi::human_in_the_loop": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
+      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi', 'langgraph-typescript'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -857,7 +857,7 @@
   "langgraph-typescript::human_in_the_loop": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
+      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi', 'langgraph-typescript'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -1051,7 +1051,7 @@
   "llama-index::human_in_the_loop": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
+      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi', 'langgraph-typescript'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -1155,7 +1155,7 @@
   "crewai::human_in_the_loop": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
+      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCopilotAction, useLangGraphInterrupt } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { useTheme } from \"next-themes\";\n\ninterface HumanInTheLoopProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst HumanInTheLoop: React.FC<HumanInTheLoopProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"human_in_the_loop\"\n    >\n      <Chat integrationId={integrationId} />\n    </CopilotKit>\n  );\n};\n\ninterface Step {\n  description: string;\n  status: \"disabled\" | \"enabled\" | \"executing\";\n}\n\n// Shared UI Components\nconst StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (\n  <div \n  data-testid=\"select-steps\"\n  className=\"flex\">\n    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${\n      theme === \"dark\" \n        ? \"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl\"\n        : \"bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80\"\n    }`}>\n      {children}\n    </div>\n  </div>\n);\n\nconst StepHeader = ({ \n  theme, \n  enabledCount, \n  totalCount, \n  status, \n  showStatus = false \n}: { \n  theme?: string; \n  enabledCount: number; \n  totalCount: number; \n  status?: string;\n  showStatus?: boolean;\n}) => (\n  <div className=\"mb-5\">\n    <div className=\"flex items-center justify-between mb-3\">\n      <h2 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\n        Select Steps\n      </h2>\n      <div className=\"flex items-center gap-3\">\n        <div className={`text-sm ${theme === \"dark\" ? \"text-slate-400\" : \"text-gray-500\"}`}>\n          {enabledCount}/{totalCount} Selected\n        </div>\n        {showStatus && (\n          <div className={`text-xs px-2 py-1 rounded-full font-medium ${\n            status === \"executing\" \n              ? theme === \"dark\" \n                ? \"bg-blue-900/30 text-blue-300 border border-blue-500/30\"\n                : \"bg-blue-50 text-blue-600 border border-blue-200\"\n              : theme === \"dark\"\n                ? \"bg-slate-700 text-slate-300\"\n                : \"bg-gray-100 text-gray-600\"\n          }`}>\n            {status === \"executing\" ? \"Ready\" : \"Waiting\"}\n          </div>\n        )}\n      </div>\n    </div>\n    \n    <div className={`relative h-2 rounded-full overflow-hidden ${theme === \"dark\" ? \"bg-slate-700\" : \"bg-gray-200\"}`}>\n      <div \n        className=\"absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out\"\n        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}\n      />\n    </div>\n  </div>\n);\n\nconst StepItem = ({ \n  step, \n  theme, \n  status, \n  onToggle, \n  disabled = false \n}: { \n  step: { description: string; status: string }; \n  theme?: string; \n  status?: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}) => (\n  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${\n    step.status === \"enabled\"\n      ? theme === \"dark\" \n        ? \"bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30\"\n        : \"bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60\"\n      : theme === \"dark\"\n        ? \"bg-slate-800/30 border border-slate-600/30\"\n        : \"bg-gray-50/50 border border-gray-200/40\"\n  }`}>\n    <label \n    data-testid=\"step-item\" \n    className=\"flex items-center cursor-pointer w-full\">\n      <div className=\"relative\">\n        <input\n          type=\"checkbox\"\n          checked={step.status === \"enabled\"}\n          onChange={onToggle}\n          className=\"sr-only\"\n          disabled={disabled}\n        />\n        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${\n          step.status === \"enabled\"\n            ? \"bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500\"\n            : theme === \"dark\"\n              ? \"border-slate-400 bg-slate-700\"\n              : \"border-gray-300 bg-white\"\n        } ${disabled ? \"opacity-60\" : \"\"}`}>\n          {step.status === \"enabled\" && (\n            <svg className=\"w-3 h-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={3} d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n        </div>\n      </div>\n      <span \n       data-testid=\"step-text\"\n       className={`ml-3 font-medium transition-all duration-300 ${\n        step.status !== \"enabled\" && status != \"inProgress\"\n          ? `line-through ${theme === \"dark\" ? \"text-slate-500\" : \"text-gray-400\"}`\n          : theme === \"dark\" ? \"text-white\" : \"text-gray-800\"\n      } ${disabled ? \"opacity-60\" : \"\"}`}>\n        {step.description}\n      </span>\n    </label>\n  </div>\n);\n\nconst ActionButton = ({ \n  variant, \n  theme, \n  disabled, \n  onClick, \n  children \n}: { \n  variant: \"primary\" | \"secondary\" | \"success\" | \"danger\";\n  theme?: string;\n  disabled?: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n}) => {\n  const baseClasses = \"px-6 py-3 rounded-lg font-semibold transition-all duration-200\";\n  const enabledClasses = \"hover:scale-105 shadow-md hover:shadow-lg\";\n  const disabledClasses = \"opacity-50 cursor-not-allowed\";\n  \n  const variantClasses = {\n    primary: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl\",\n    secondary: theme === \"dark\"\n      ? \"bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500\"\n      : \"bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400\",\n    success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl\",\n    danger: \"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl\"\n  };\n\n  return (\n    <button\n      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${\n        disabled && variant === \"secondary\" ? \"bg-gray-200 text-gray-500\" : \n        disabled && variant === \"success\" ? \"bg-gray-400\" :\n        variantClasses[variant]\n      }`}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DecorativeElements = ({ \n  theme, \n  variant = \"default\" \n}: { \n  theme?: string; \n  variant?: \"default\" | \"success\" | \"danger\" \n}) => (\n  <>\n    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${\n      variant === \"success\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-green-500/10 to-emerald-500/10\" \n          : \"bg-gradient-to-br from-green-200/30 to-emerald-200/30\"\n        : variant === \"danger\"\n          ? theme === \"dark\" \n            ? \"bg-gradient-to-br from-red-500/10 to-pink-500/10\" \n            : \"bg-gradient-to-br from-red-200/30 to-pink-200/30\"\n          : theme === \"dark\" \n            ? \"bg-gradient-to-br from-blue-500/10 to-purple-500/10\" \n            : \"bg-gradient-to-br from-blue-200/30 to-purple-200/30\"\n    }`} />\n    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${\n      variant === \"default\"\n        ? theme === \"dark\" \n          ? \"bg-gradient-to-br from-purple-500/10 to-pink-500/10\" \n          : \"bg-gradient-to-br from-purple-200/30 to-pink-200/30\"\n        : \"opacity-50\"\n    }`} />\n  </>\n);\nconst InterruptHumanInTheLoop: React.FC<{\n  event: { value: { steps: Step[] } };\n  resolve: (value: string) => void;\n}> = ({ event, resolve }) => {\n  const { theme } = useTheme();\n  \n  // Parse and initialize steps data\n  let initialSteps: Step[] = [];\n  if (event.value && event.value.steps && Array.isArray(event.value.steps)) {\n    initialSteps = event.value.steps.map((step: any) => ({\n      description: typeof step === \"string\" ? step : step.description || \"\",\n      status: typeof step === \"object\" && step.status ? step.status : \"enabled\",\n    }));\n  }\n\n  const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);\n  const enabledCount = localSteps.filter(step => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handlePerformSteps = () => {\n    const selectedSteps = localSteps\n      .filter((step) => step.status === \"enabled\")\n      .map((step) => step.description);\n    resolve(\"The user selected the following steps: \" + selectedSteps.join(\", \"));\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />\n      \n      <div className=\"space-y-3 mb-6\">\n        {localSteps.map((step, index) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            onToggle={() => handleStepToggle(index)}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex justify-center\">\n        <ActionButton\n          variant=\"primary\"\n          theme={theme}\n          onClick={handlePerformSteps}\n        >\n          <span className=\"text-lg\">✨</span>\n          Perform Steps\n          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${\n            theme === \"dark\" ? \"bg-purple-800/50\" : \"bg-purple-600/20\"\n          }`}>\n            {enabledCount}\n          </span>\n        </ActionButton>\n      </div>\n\n      <DecorativeElements theme={theme} />\n    </StepContainer>\n  );\n};\n\nconst Chat = ({ integrationId }: { integrationId: string }) => {\n  // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n  // This hook won't do anything for other integrations.\n  useLangGraphInterrupt({\n    render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,\n  });\n  useCopilotAction({\n    name: \"generate_task_steps\",\n    description: \"Generates a list of steps for the user to perform\",\n    parameters: [\n      {\n        name: \"steps\",\n        type: \"object[]\",\n        attributes: [\n          {\n            name: \"description\",\n            type: \"string\",\n          },\n          {\n            name: \"status\",\n            type: \"string\",\n            enum: [\"enabled\", \"disabled\", \"executing\"],\n          },\n        ],\n      },\n    ],\n    // Langgraph uses it's own hook to handle human-in-the-loop interactions via langgraph interrupts,\n    // so don't use this action for langgraph integration.\n    available: ['langgraph', 'langgraph-fastapi', 'langgraph-typescript'].includes(integrationId) ? 'disabled' : 'enabled',\n    renderAndWaitForResponse: ({ args, respond, status }) => {\n      return <StepsFeedback args={args} respond={respond} status={status} />;\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\">\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{\n            initial:\n              \"Hi, I'm an agent specialized in helping you with your tasks. How can I help you?\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {\n  const { theme } = useTheme();\n  const [localSteps, setLocalSteps] = useState<Step[]>([]);\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (status === \"executing\" && localSteps.length === 0) {\n      setLocalSteps(args.steps);\n    }\n  }, [status, args.steps, localSteps]);\n\n  if (args.steps === undefined || args.steps.length === 0) {\n    return <></>;\n  }\n\n  const steps = localSteps.length > 0 ? localSteps : args.steps;\n  const enabledCount = steps.filter((step: any) => step.status === \"enabled\").length;\n\n  const handleStepToggle = (index: number) => {\n    setLocalSteps((prevSteps) =>\n      prevSteps.map((step, i) =>\n        i === index\n          ? { ...step, status: step.status === \"enabled\" ? \"disabled\" : \"enabled\" }\n          : step,\n      ),\n    );\n  };\n\n  const handleReject = () => {\n    if (respond) {\n      setAccepted(false);\n      respond({ accepted: false });\n    }\n  };\n\n  const handleConfirm = () => {\n    if (respond) {\n      setAccepted(true);\n      respond({ accepted: true, steps: localSteps.filter(step => step.status === \"enabled\")});\n    }\n  };\n\n  return (\n    <StepContainer theme={theme}>\n      <StepHeader \n        theme={theme} \n        enabledCount={enabledCount} \n        totalCount={steps.length} \n        status={status}\n        showStatus={true}\n      />\n      \n      <div className=\"space-y-3 mb-6\">\n        {steps.map((step: any, index: any) => (\n          <StepItem\n            key={index}\n            step={step}\n            theme={theme}\n            status={status}\n            onToggle={() => handleStepToggle(index)}\n            disabled={status !== \"executing\"}\n          />\n        ))}\n      </div>\n\n      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}\n      {accepted === null && (\n        <div className=\"flex justify-center gap-4\">\n          <ActionButton\n            variant=\"secondary\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleReject}\n          >\n            <span className=\"mr-2\">✗</span>\n            Reject\n          </ActionButton>\n          <ActionButton\n            variant=\"success\"\n            theme={theme}\n            disabled={status !== \"executing\"}\n            onClick={handleConfirm}\n          >\n            <span className=\"mr-2\">✓</span>\n            Confirm\n            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${\n              theme === \"dark\" ? \"bg-green-800/50\" : \"bg-green-600/20\"\n            }`}>\n              {enabledCount}\n            </span>\n          </ActionButton>\n        </div>\n      )}\n\n      {/* Result State - Unique to StepsFeedback */}\n      {accepted !== null && (\n        <div className=\"flex justify-center\">\n          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${\n            accepted \n              ? theme === \"dark\"\n                ? \"bg-green-900/30 text-green-300 border border-green-500/30\"\n                : \"bg-green-50 text-green-700 border border-green-200\"\n              : theme === \"dark\"\n                ? \"bg-red-900/30 text-red-300 border border-red-500/30\"\n                : \"bg-red-50 text-red-700 border border-red-200\"\n          }`}>\n            <span className=\"text-lg\">{accepted ? \"✓\" : \"✗\"}</span>\n            {accepted ? \"Accepted\" : \"Rejected\"}\n          </div>\n        </div>\n      )}\n\n      <DecorativeElements theme={theme} variant={\n        accepted === true ? \"success\" : accepted === false ? \"danger\" : \"default\"\n      } />\n    </StepContainer>\n  );\n};\n\n\nexport default HumanInTheLoop;\n",
       "language": "typescript",
       "type": "file"
     },
diff --git a/typescript-sdk/apps/dojo/src/menu.ts b/typescript-sdk/apps/dojo/src/menu.ts
index 80a7fad5e..a931f8541 100644
--- a/typescript-sdk/apps/dojo/src/menu.ts
+++ b/typescript-sdk/apps/dojo/src/menu.ts
@@ -52,7 +52,7 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
   },
   {
     id: "langgraph",
-    name: "LangGraph",
+    name: "LangGraph (Python)",
     features: [
       "agentic_chat",
       "human_in_the_loop",
@@ -64,7 +64,7 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
   },
   {
     id: "langgraph-fastapi",
-    name: "LangGraph FastAPI",
+    name: "LangGraph (FastAPI)",
     features: [
       "agentic_chat",
       "human_in_the_loop",
@@ -75,6 +75,19 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
       "agentic_chat_reasoning",
     ],
   },
+
+  {
+    id: "langgraph-typescript",
+    name: "LangGraph (Typescript)",
+    features: [
+      "agentic_chat",
+      "human_in_the_loop",
+      "agentic_generative_ui",
+      "tool_based_generative_ui",
+      "predictive_state_updates",
+      "shared_state"
+    ],
+  },
   {
     id: "agno",
     name: "Agno",