debug flag

app/(playground)/p/[agentId]/beta-proto/feature-flags/types.ts

@@ -1,4 +1,5 @@
 export interface FeatureFlags {
 	uploadFileToPromptNodeFlag: boolean;
 	webSearchNodeFlag: boolean;
+	debugFlag: boolean;
 }

app/(playground)/p/[agentId]/beta-proto/giselle-node/components.tsx

@@ -26,6 +26,7 @@ type GiselleNodeProps = (GiselleNodeBlueprint | GiselleNodeType) & {
 	resultPortHandle?: FC<PortHandleProps>;
 	incomingConnections?: ConnectorObject[];
 	outgoingConnections?: ConnectorObject[];
+	debug?: boolean;
 };
 
 type TargetParameterProps = {
@@ -203,7 +204,7 @@ export function GiselleNode(props: GiselleNodeProps) {
 					</div>
 				</div>
 			</div>
-			{props.object === "node" && (
+			{props.debug && props.object === "node" && (
 				<div className="absolute top-[calc(100%+8px)] left-[8px] right-[8px] font-mono text-[8px] py-[4px] px-[8px] bg-black-100/30 border border-black-70 text-black--30">
 					<div className="flex flex-col gap-[4px]">
 						<div>Debug info</div>

app/(playground)/p/[agentId]/beta-proto/react-flow-adapter/giselle-node.tsx

@@ -14,6 +14,7 @@ import {
 import clsx from "clsx/lite";
 import type { FC } from "react";
 import type { ConnectorObject } from "../connector/types";
+import { useFeatureFlags } from "../feature-flags/context";
 import { GiselleNode } from "../giselle-node/components";
 import {
 	type GiselleNode as GiselleNodeType,
@@ -24,6 +25,7 @@ export type ReactFlowNode = Node<GiselleNodeType>;
 
 export const ReactFlowNode: FC<NodeProps<ReactFlowNode>> = ({ data }) => {
 	const edges = useEdges<ReactFlowEdge>();
+	const { debugFlag } = useFeatureFlags();
 	return (
 		<GiselleNode
 			{...data}
@@ -52,6 +54,7 @@ export const ReactFlowNode: FC<NodeProps<ReactFlowNode>> = ({ data }) => {
 				.filter((edge) => edge.source === data.id)
 				.map((edge) => edge.data)
 				.filter((connector) => connector != null)}
+			debug={debugFlag}
 		/>
 	);
 };

app/(playground)/p/[agentId]/page.tsx

@@ -2,6 +2,7 @@ import "@xyflow/react/dist/style.css";
 import { getTeamMembershipByAgentId } from "@/app/(auth)/lib/get-team-membership-by-agent-id";
 import { agents, db } from "@/drizzle";
 import {
+	debugFlag as getDebugFlag,
 	uploadFileToPromptNodeFlag as getUploadFileToPromptNodeFlag,
 	webSearchNodeFlag as getWebSearchNodeFlag,
 } from "@/flags";
@@ -32,14 +33,19 @@ export default async function AgentPlaygroundPage({
 
 	const uploadFileToPromptNodeFlag = await getUploadFileToPromptNodeFlag();
 	const webSearchNodeFlag = await getWebSearchNodeFlag();
+	const debugFlag = await getDebugFlag();
 
 	const agent = await getAgent(agentId);
 
 	return (
 		<Playground
 			agentId={agentId}
 			graph={agent.graphv2}
-			featureFlags={{ uploadFileToPromptNodeFlag, webSearchNodeFlag }}
+			featureFlags={{
+				uploadFileToPromptNodeFlag,
+				webSearchNodeFlag,
+				debugFlag,
+			}}
 		/>
 	);
 }

flags.ts

@@ -41,3 +41,16 @@ export const webSearchNodeFlag = flag<boolean>({
 		{ value: true, label: "Enable" },
 	],
 });
+
+export const debugFlag = flag<boolean>({
+	key: "debug",
+	async decide() {
+		return false;
+	},
+	description: "Enable debug mode",
+	defaultValue: false,
+	options: [
+		{ value: false, label: "disable" },
+		{ value: true, label: "Enable" },
+	],
+});