Function MetadataTab

client/src/components/MetadataTab.tsx:27–168

({
  metadata,
  onMetadataChange,
})

}

const MetadataTab: React.FC<MetadataTabProps> = ({
  metadata,
  onMetadataChange,
}) => {
  const [entries, setEntries] = useState<MetadataEntry[]>(() => {
    return Object.entries(metadata).map(([key, value]) => ({ key, value }));
  });

  const addEntry = () => {
    setEntries([...entries, { key: "", value: "" }]);
  };

  const removeEntry = (index: number) => {
    const newEntries = entries.filter((_, i) => i !== index);
    setEntries(newEntries);
    updateMetadata(newEntries);
  };

  const updateEntry = (
    index: number,
    field: "key" | "value",
    value: string,
  ) => {
    const newEntries = [...entries];
    newEntries[index][field] = value;
    setEntries(newEntries);
    updateMetadata(newEntries);
  };

  const updateMetadata = (newEntries: MetadataEntry[]) => {
    const metadataObject: Record<string, string> = {};
    newEntries.forEach(({ key, value }) => {
      const trimmedKey = key.trim();
      if (
        trimmedKey &&
        value.trim() &&
        hasValidMetaPrefix(trimmedKey) &&
        !isReservedMetaKey(trimmedKey) &&
        hasValidMetaName(trimmedKey)
      ) {
        metadataObject[trimmedKey] = value.trim();
      }
    });
    onMetadataChange(metadataObject);
  };

  return (
    <TabsContent value="metadata">
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-lg font-semibold">Metadata</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Key-value pairs that will be included in all MCP requests
            </p>
          </div>
          <Button onClick={addEntry} size="sm">
            <Plus className="w-4 h-4 mr-2" />